GEEKX

Edicion 1 - Bolivia - Septiembre 2013 - Distribucion Gratuita
www.geekx.bo
Grandes disenos que
inspiran al mundo
GUÍA
SELECTORES - ATRIBUTOS EN CSS3 - SELECTOR DE HERMANOS - PSEUDO ELEMENTOS
25 TECNICAS QUE NECESITAS SABER
WORD-WRAP - COLOR - COLORES RGBA - COLORES HSL Y HSLA - EFECTOS DE BORDE
EFECTOS DE TEXTO Y TIPOGRAFÍA
Somos un grupo
de bolivianas y
bolivianos que,
cansados de las
mas lentas y caras.

CONTROLANDO LOS PORCESOS DESDE 1985

index
bienvenido
Bienvenido a
geekx
Trabajos
Informatico y Diseñador gráfico nacido en
La Paz, Bolivia egresado de la EISPDM, con
4 años de experiencia laboral en diseño de
identidad corporativa, páginas web en html5/
css3, javascript, responsive web design y
publicaciones digitales.
Soy una persona con experiencia en
manejo de grupos, liderazgo, orientada
a resultados, capacidad de análisis y
rápido aprendizaje.
i pusiéramos verticalmente y en
fila piezas de dominó una atrás de
la otra a una distancia suficiente,
al empujar la primera caerían las
demás en cascada. Eso mismo
sucedió con el universo nerd/
geek/freak para que alcanzara la
popularidad que posee hoy en
día .
Comienza el editorial de Ivan Laime Sarsuri,
principal responsable de GEEKX.
Una revista geek
El número cero de la revista, que salió en julio de
2012 (el próximo número ya está casi listo), trae
59 páginas con información selecta y presentada
con un excelente diseño gráfico. Hay noticias,
artículos sobre tecnología, review del comic
de Justice League, la serie Game of Thrones
2da. temporada, la peli Prometheus y previews
de The Dark Knight Rises y The Amazing
Spiderman, que aunque ya estrenadas valen la
pena revisar. La revista se completa con notas
sobre juegos de video, de cartas y un espacio
literario.
GUIQ, creemos aquí en [i], forma parte de esa
futura masa de revistas que van a cambiar el
panorama editorial de las pequeñas editoras,
acosadas, como es de público conocimiento,
por un sistema de distribución que no sólo es
obsoleto sino además tan caro que nos pone
a todos en situación de quiebre. En estos días
en Facebook circularon comunicados de varias
revistas independientes como Barcelona y
THC, donde se denuncia el aumento de $2.30
impuesto por los gremios de distribuidores, que
viene a sumarse al 50% de comisión sobre el
precio de tapa.
El que se niega a pagar, simplemente no tiene
cómo distribuir sus revistas y debe cerrar.
La única posibilidad de seguir trabajando es,
entonces, trasladar a los lectores el aumento, lo
que a su vez es perjudicial para todos porque,
como es lógico, se vende menos.
Siguenos en Twitter para ver de todas nuestras noticfas @geekx
Visita nuestro blog para tu opinion, critica y mas www.geekx.bo
Jhonny Catacora
Redación
MArcelo Flores
Diagramación
Ruben Lovera
Diseño Grafico
Fernado Medrano
Fotografia
www.geekx.bo

Contenido
Comenarios y criticas sobre estos temas en la web kodearti.com
Puedes opinar sobre el tema desde hoy mismo, y si tienes un tema distinto, pero relacionado al area contactate con el equipo editorial
equipoeditorial@geekx.bo geekxbo #geekxbo www.geekx.bo
GUÍA
25 TECNICAS QUE NECESITAS SABER
WORD-WRAP EFECTOS SOMBRA Y BRILLO
EFECTOS
En ocasiones algunas palabras cuya CSS3 trae una serie de novedades en
longitud e xced.
el manejo de bordes.
COLOR
Tradicionalmente en CSS los valores
de los colores se han expresado en
valores RGB.
NUEVAS
Importante: A estas alturas supongo
que sabéis lo que tengo que decir de la
compatibilidad.
16
20 21 22
21
17
18
En este tema veremos el uso de
box-shadow y text-shadow con los
que podremos crear sombras y brillos.
Además como regalo os dejo una
aplicación práctica.
SELECTORES
En primer lugar encontramos 3 nuevos
selectores de atributos.
PSEUDO ELEMENTOS
En este capítulo abordaremos los
pseudoelementos del CSS3 y sus
cambios respecto a CSS2.1.
PSEUDOCLASES
Uno de los puntos donde CSS3 hace
grandes incorporaciones es en las
clases
EFECTOS
En anteriores temas hemos visto
selectores, pseudo-elementos y
pseudo-clases. Además como regalo
os dejo una aplicación práctica.
CSS3 trae una serie de novedades en
el manejo de bordes.
NUEVAS
Importante: A estas alturas supongo
que sabéis lo que tengo que decir de la
compatibilidad.
Más y mejor INTERNET
para BOLIVIA
6
7
¿Quiénes Somos?
Somos un grupo de bolivianas y bolivianos
que, cansados de las mas lentas y caras
conexiones del mundo,
Linked in
LinkedIn es un sitio web orientado a negocios,
fue fundado en diciembre de 2002 lanzado en
mayo de 2013
8
Drupal es una comunidad que lleva años sin
sufrir un lavado de cara. Muchos años de
antigüedad provocan que haya una deuda
técnica ante las nuevas tecnologías. La
parición de los tests así como Frameworks de
Javascript obligaban en consecuencia a que
Drupal también se oriente a estas nuevas,
y eficientes, prácticas.
6
DESIGN
AWARDS
CSS DS
CSS Design Awards es un archivo viviente
de los mejores sitios web del mundo y un
escaparate inspirado celebra el talento
emergente.
Cada versión de Drupal siempre se hizo
pensando en la anterior, y se hizo pensando
en que deberían tener una relación para que
sea relativamente fácil para el usuario migrar
su sitio a lo último. Pero esa herencia de
versiones (Drupal soporta hasta PHP 4, algo
inentendible) hace que se quede muy atrás
técnicamente.

noticias
Noticias
Comentarios
Criticas
header
Comenarios y criticas sobre estos temas en la web kodearti.com
Puedes opinar sobre el tema desde hoy mismo, y si tienes un tema distinto, pero relacionado al area contactate con el equipo editorial
equipoeditorial@kodearti.com
kodearti
#kodearti
Más y mejor INTERNET
para BOLIVIA
¿Quiénes Somos?
SoSomos un grupo de bolivianas y bolivianos que,
cansados de las mas lentas y caras conexiones
del mundo, reivindicamos el derecho a un servicio
digno de Internet, por lo que nos proponemos
como meta lograr un mínimo de 1 mbps de ancho
de banda a un costo menor a Bs. 100.-
(Sugerencia de Marisol Murillo y Luis Paez)
Somos un grupo de bolivianas y bolivianos que,
cansados de las lentas y caras conexiones de
internet que brindan las empresas proveedoras
de este servicio en nuestro país, exigimos el
derecho a un servicio digno de internet con un
mínimo de 1mbps de velocidad de conexión a un
costo menor a 150 Bs.
(Sugerencia de Kichi Chan)
¿Que Buscamos?
Buscamos el progreso de nuestro país a través
de las tecnologías de información, con un
acceso digno a Internet que permita educación,
comunicación, emprendimientos y comercio
en-línea, facilitando que las profesionales
Bolivianas puedan ofrecer sus productos con un
acceso digno a Internet que permita educación,
comunicación, emprendimientos y comercio
en-línea, facilitando que las profesionales
Bolivianas puedan ofrecer sus productos con un
acceso digno a Internet que permita educación,
comunicación, emprendimientos y comercio enlínea,
facilitando que las profesionales Bolivianas
puedan ofrecer sus productos, servicios y
conocimientos al mundo en igualdad de
condiciones.
(Sugerencia de Eric Arellano)
¿Cómo participar?
Te invitamos a participar en las redes sociales.
Vota por esta iniciativa dándole “Me gusta” en
Facebook
Este sitio necesita de editores, asi que si quieres
escribir sobre algún tema, recopilar información
importante relacionada con el tema, etc, te
invitamos a ser parte del sitio.
Te invitamos a ser parte de la difusión de nuestra
problemática.
Comenta con tus amigos, por email, en redes
sociales, en el aula, en donde te reúnas, sobre
la problemática del internet en Bolivia. Además
puedes insertar botones de apoyo en tu sitio
web.
Si tienes contactos con algún medio de prensa,
haz llegar el reporte de que Bolivia tiene el
internet mas lento y caro del mundo.
Participa en las actividades
Periódicamente organizamos reuniones con
autoridades de gobierno, políticos y movimientos
sociales, siempre es bueno, ir entre varias
personas. Así que te invitamos a estar atento a
las convocatorias.
Ahora, si tienes algún contacto con poder de
decisión, haz tu la reunión y envíanos un reporte
de los resultados.
3En el 2013, el 17 de Mayo tenemos un evento en
la ciudad de Cochabamba y previo al 17 de mayo
queremos organizar diferentes eventos en todas
la ciudades del país si tienes alguna idea, gente,
recursos o quieres apoyar en la organización
de algún evento promocionando no solo las
actividades sino un evento de tecnología y
quieres el respaldo de la comunidad no dudes
en contactare con nosotros y coordinaremos
cualquier evento, mientras mas gente conozca la
problemática del país, mejor!
Todos pueden participar.
6 Revista geek gratuita

Los temas mas actuales en el mundo del diseno web
header
noticias
Adelántese, obtenga LinkedIn
La mayor red profesional del mundo: Con más de 225 millones de miembros. Averigua cómo crear un
buen perfil y darse a conocer.
Conecta. Encuentra. Haz
que te encuentren.
Impulsa tu carrera.
Infórmate y comparte.
Construye tu identidad profesional en
Internet y mantente en contacto con
compañeros de clase y de trabajo.
Descubre oportunidades profesionales,
tratos de negocios y nuevas empresas.
Obtén las últimas noticias, la inspiración
y la información que necesitas para
destacar en tu trabajo.
LinkedIn es un sitio web orientado a negocios, fue fundado en diciembre de 2002 y lanzado en
mayo de 20031 (comparable a un servicio de red social), principalmente para red profesion al. Fue
fundada por Reid Hoffman, Allen Blue, Konstantin Guericke, Eric Ly y Jean-Luc Vaillant.
En octubre de 2008, tenía más de 25 millones de usuarios registrados3 extendiéndose a 150 industrias.
En marzo de 2013, dispone de más de 200 millones de usuarios registrados,4 de más de 200 países, que
abarcan todas las empresas de la lista de la revista Fortune de las 500 mayores empresas estadounidenses.
Es seguida en un lejano segundo lugar por Viadeo.
Unete Ahora !!!
www.geekx.bo

header
noticias
Drupal integracion con Symfony
Drupal 8 integracion Symfony
ace unas semanas tuve la gran suerte de poder ir al evento DeSymfony, la cual tuvo
muchas ponencias bastante interesantes, sobre todo el segundo día. El primero fue
bastante decepcionante, pero no me meteré a criticar a los que tienen el valor de exponer
antes cientos de personas.
Una de las ponencias fue sobre la integración de Symfony en Drupal en su nueva versión 8. Aparte
de eso hay muchas novedades que les comentaré acontinuación.
Drupal es una comunidad que lleva años sin sufrir un lavado de cara. Muchos años de antigüedad
provocan que haya una deuda técnica ante las nuevas tecnologías. La aparición de los tests así como
Frameworks de Javascript obligaban en consecuencia a que Drupal también se oriente a estas nuevas,
y eficientes, prácticas.
Cada versión de Drupal siempre se hizo pensando en la anterior, y se hizo pensando en que deberían
tener una relación para que sea relativamente fácil para el usuario migrar su sitio a lo último. Pero esa
herencia de versiones (Drupal soporta hasta PHP 4, algo inentendible) hace que se quede muy atrás
técnicamente.
Se ha tomado la decisión de cambiar todo drásticamente, asumiendo las consecuencias, y en esta
versión 8 de Drupal se verá el comienzo de una transición hacia las buenas prácticas para el desarrollador.
8 Revista geek gratuita

header
noticias
Cambios en el hook_menu
Ahora las rutas las definiremos en el fichero routing.yml
de nuestro módulo personalizado. Algo muy derivado de
Symfony. En nuestro hook_menu solo quedará el título de
la página que definamos.
¿Pasará algo con los hooks?
Evidentemende, los hooks han sido parte de nuestra vida
en Drupal (para los que no solo lo usamos para instalar
módulos), pero en Drupal 8 desaparecerán muchos de
ellos, para que finalmente en Drupal 9 no existan más.
Muy probablemente sea un cambio negativo para
muchos, que ya están acostumbrados a desarrollar de
una manera, pero las buenas prácticas las tenemos que
seguir y los hooks, por lo tanto, deben desaparecer de
nuestra mente.
Si los hooks ya no existen, ¿Quiénes los
reemplazarán?
En Symfony existe el EventDispatcher, que son
disparadores de eventos orientados a objetos, agrupables
y, sobre todo, testeables. Un conjunto perfecto de buenas
prácticas que Drupal necesitaba tener y que con los
hooks no tenía.
Como mencioné más arriba, el EventDispatcher convivirá
con los hooks en Drupal 8, pero en Drupal 9 los hooks no
estarán más.
Dependency Injection (Inyección de
dependencias)
Para los que no sepan, la inyección de dependencias es
un patrón de diseño orientado a objetos en la cual se
suministran objetos a una clase en lugar de crearlas ella
misma. Sonará muy confuso, pero crear un objeto dentro
de una clase hace que la misma dependa de ese objeto,
cosa que no es muy bueno a veces, sobre todo si se tiene
que refactorizar el código.
Los objetos siempre tienen que ser creados fuera de una
clase, y a lo sumo inyectarlos en ella y que no haya ningún
tipo de dependencia si se separan.
Esta práctica la adquirirá Drupal 8, con la idea de que su
código sea mucho más legible, escalable y testeable.
Otros proyectos OS incorporados
Esta es una lista de los proyectos OS que incorporará
Drupal en su versión 8.
Conclusiones
jQuery
CKEditor
Backbone
Modrnizr
Farbtastic
Grippie
Normalize
Composer
PHPUnit
Guzzle
Zend Feed
Drupal hará un cambio drástico en su Core para el
uso de las buenas prácticas. Esto es muy positivo,
pero muchos de nosotros nos pusimos a pensar: ¿Cuánta
gente que usa Drupal usa buenas prácticas?. El ponente
nos dijo que con este cambio el 50% de la comunidad
Drupal se iría, con que nos ha respondido la pregunta
antes de hacerla.
Otros de los puntos a cubrir en las preguntas fue el tema
de la migración, el mismo ponente nos dijo que si una
persona tiene un site en Drupal 6 o 7 y le funciona bien
económicamente, entonces no es necesario migrar
a Drupal 8 de momento. No se si es la respuesta que
esperaba pero realmente tiene sentido, ahora mismo
migrar de versión es prácticamente imposible.
Drupal 8 tiene previsto salir a la luz a comienzos del año
que viene, ahora mismo es un 400% más lento que
Drupal 7, pero ahora empieza la época de optimización,
la cual espero que deje a nuestro CMS favorito en el top
del ranking.
Views va a pasar a ser parte del Core
Al fin vamos a tener un módulo prácticamente
indispensable en el Core de Drupal. Tendremos el
punto negativo que de momento será muy difícil pasar
vistas realizadas en Drupal 7, pero seremos optimistas
y esperaremos a que haya alguna manera sencilla de
hacerlo.
www.geekx.bo

DESIGN
AWARDS
Grandes disenos que
inspiran al mundo
Proceso de selección
Design Awards es un archivo viviente de los mejores sitios web del mundo
y un escaparate inspirado celebra el talento emergente. El objetivo de CSS
Design Awards es capturar cada paso en la rápida evolución del diseño web y
de arrojar luz sobre los diseñadores que inspiran a todos nosotros.
Todos los sitios web presentados se añadirán automáticamente a la lista de espera para su
consideración. Los sitios web que cumplan con los criterios de presentación a continuación se
añadirán a la galería de CSS.
Sitios web considerados como pendientes por nuestros jueces serán añadidos a la galería Los
nominados y estar en la carrera por el premio de diseño CSS. Los ganadores serán notificados y
su trabajo aparecen en la página de inicio, así como añadir a la Galería de los Ganadores. Sitios
ganadores también se publicarán a través de redes sociales.
Nuestros Jueces
Mientras votos de los usuarios son una consideración importante, existen agujeros de bucle
tecnológicos que pueden eludir el seguimiento de los clics de usuarios que permiten votos para ser
aumentadas artificialmente.
Por lo tanto, de jurado final es por un panel de entre 4 y 8 diseñadores profesionales en función de su
disponibilidad. Todos nuestros jueces son universitarios diseñadores calificados con entre 5 y 10 años
de experiencia en diseño gráfico, diseño web y desarrollo web.
Criterios de presentación
http://www.cssdesignawards.com/
Se invita a los diseñadores web, los equipos de diseño, agencias, propietarios de sitios web y los
entusiastas de CSS para presentar sitios web para su consideración, sin embargo, toda la información
solicitada en la página de presentación Web es necesaria para completar una entrada en los Premios
de Diseño CSS.
Websites presentados deben cumplir con los siguientes criterios:
# 1 de Alto Nivel de la Creatividad Visual
# 2 Profesionalmente codificado CSS
# 3 Completamente Funcional
# 4 Cumple W3C (recomendado pero no obligatorio)
Parallax, empresa profesional de diseño
y desarrollo web, ganador mes de
Agosto 2013
10 Revista geek gratuita

DESIGN
AWARDS
Me encanta la innovacion asi como la tecnologia, estoy muy convencido que
apost ar en las nuevas tecnologias rinde muchos frutos, ya que te habre un campo
interesante a nuevos horizontes, eso y por que tambien confío plenamente en mi
equipo de trabajo.
Juan Carlos Ramos Castañeta - CEO
Ruben Lovera
Programador Web
Margoth Loayza
Programadora PHP
Ivan Cartagena
Diseñador Web
Hugo Miranda
Social Media
Ludwing Rubi
Marketing
www.geekx.bo

DESIGN
AWARDS
Freelancer a la vista!!!
Hola, mi nombre es Rain, soy un diseñador de páginas web y
desarrollador de aplicaciones para usuario, en la actualidad vivo y
trabajo en Taipei, Taiwán.
Mis principios de diseño son : El énfasis en la facilidad de uso,
pluralista e interacción, se centran en el diseño de interacción por
excelencia, la sencillez y la eficacia de la mezcla, y experiencias de
usuario innovadores.
12 Revista geek gratuita

DESIGN
AWARDS
Interfaz de usuario diseño web, front-end de desarrollo,
experiencia de usuario y diseño de integración responde con HTML5
y CSS3.
www.geekx.bo

DESIGN
AWARDS
http://www.internshipdesign.com
Internship Design tuvo la idea de realizar un Blog con un curioso diseño pero a
la vez atractivo. Internship Design es una empresa de Diseño Grafico destinado a
informar a su Clientela el trabajo que reaizan e incluso en lo que se estan abocando
en ese instante, interesante forma de mostras sus actividades laborales, y de
pronto una forma original de informar a su clientela lo que realizan.
Jhonny Catacora
CEO
MArcelo Flores
Programador PHP
Ruben Lovera
Programador Web
Fernado Medrano
Diseñador Web
MArcelo Flores
Programador PHP
14 Revista geek gratuita

GUÍA
25 TECNICAS QUE NECESITAS SABER
GUÍA
25 TECNICAS QUE NECESITAS SABER
16 Revista geek gratuita

GUÍA
25 TECNICAS QUE NECESITAS SABER
ESTA GUIA TRATA SOBRE CSS3, LA ÚLTIMA VERSIÓN DEL CASCADE STYLE
SHEET, CSS3 VINO PARA QUEDARSE.
Para sacarle partido a esta guía necesitarás las siguientes herramientas:
• Un editor de texto plano o editor de código para HTML y CSS. Yo uso Komodo, aunque
reconozco Sublime Text o Notepad++ son excelentes opciones.
• Las últimas versiones de un par de navegadores que sigan los estándares como Firefox
o Chrome. A lo largo de todo este libro encontraréis avisos de lo poco compatible que es
todo con Internet Explorer. Bueno, las versiones 9 y 10 parece que pretenden solucionar
en gran medida esto.
IMPORTANTE
Dada la reducida compatibilidad actual de los navegadores con CSS3 es aconsejable añadir
los prefijos -moz- y -webkit- en todos los ejemplos que realicemos. De manera opcional
podéis probar con -o- y -ms-aunque no os puedo
www.geekx.bo

GUÍA
25 TECNICAS QUE NECESITAS SABER
SELECTORES
PSEUDOCLASES
ATRIBUTOS EN CSS3
En primer lugar encontramos 3 nuevos
selectores de atributos:
Código :
elemento[atributoA=”valor”] Selecciona los
elementos con ese atributo y que su valor
comienza por la cadena de texto indicada en
“valor”.
Código :
elemento[atributo$=”valor”] Selecciona los
elementos con ese atributo y que su valor termina
por la cadena de texto indicada en “valor”.
Código :
elemento[atributo*=”valor”] Selecciona los
elementos con ese atributo y que su valor
contiene la cadena de texto indicada en “valor”.
/* Selecciona todos los enlaces que
lleven a una página que contenga la
palabra ejemplo*/ a [href*=”ejemplo”]
{.. .}
/^Selecciona todos los enlaces que
apunten a una dirección de correo*/
a[hrefA=”mailto:”]{...}
En este capítulo abordaremos los pseudoelementos
del CSS3 y sus cambios respecto a
CSS2.1.
En la versión 2.1 contábamos con 4 pseudoelementos:
:first-line. Selecciona la primera línea.
;//rsf-/efte/\Selecciona la primera letra.
• :before. Nos posiciona al inicio del contenido de
un elemento.
:after. Nos posiciona al final del contenido de un
elemento.
La siguiente imagen muestra dónde apuntaría el
Código :
p::first-letter{ color:red;
}
p::first-line{ color:blue;
}
hl::after{
content:”.”;
}
hl::before{
content:”Ejemplo de “; }
PSEUDO ELEMENTOS
SELECTOR DE HERMANOS
El selector general de hermanos tiene un
funcionamiento similar al selector adyacente de
CSS2.1.
Mientras que en el adyacente la condición es que
los elementos fuesen consecutivos en el código
HTML, el selector general de hermanos tiene
en consideración todos los elementos que sean
consecutivos aunque no lo sean en el código
HTML.
Código :
/^Selector adyacente en CSS2.1*/
hl + h2{...}
/^Selector general de hermanos de CSS3*/
hl ~ h2{...}
Titulo Subtitulo
adyacente
Titulo
párrafo de separación
Subtitulo con selector general de
hermanos
PSEUDO ELEMENTOS DE CSS3
selector en cada uno de los casos:
En la versión 2.1 contábamos con 4 pseudoelementos:
:first-line. Selecciona la primera línea.
;//rsf-/efte/\Selecciona la primera letra.
• :before. Nos posiciona al inicio del contenido de
un elemento.
:after. Nos posiciona al final del contenido de un
elemento.
La siguiente imagen muestra dónde apuntaría el
selector en cada uno de los casos:
pseudo-elementos Esto es
un ejemplo usando pseudo elementos
en CSS3 donde pasamos coloreamos
de rojo la primera letra con firstletter,
coloreamos de azul la primera
línea con first-line, e incluimos
en el titulo el texto “Ejemplo de” y “.”
con before y after respectivamente.
Uno de los puntos donde CSS3 hace
grandes incorporaciones es en las
pseudo-clases. Gracias a las nuevas
pseudo-clases tendremos un control
mucho más ajustado de los elementos
HTML.
Consejo: Ya que Internet Explorer 6-8
no soporta la mayoría de pseudo-clases
se han desarrollado algunas librerías
de javascript que realizan las mismas
funciones para estos navegadores. La que
mejores resultados me ha dado ha sido
select[ivizr] que podréis descargar de su
página oficial.
Código :
/^Selecciona los elementos impares
de la
clase .nthchild*/
.nthchild:nth-child(odd){
color:red; }
clase .nthlastchild*/
.nthlastchild:nth-last-child(2){
color:blue; }
clase .nthchild*/
.nthchild:nth-child(odd){
color:red; }
clase .nthlastchild*/
.nthlastchild:nth-last-child(2){
color:blue; }
clase .nthchild*/
.nthchild:nth-child(odd){
color:red; }
clase .nthlastchild*/
.nthlastchild:nth-last-child(2){
color:blue; }
clase .nthchild*/
.nthchild:nth-child(odd){
color:red; }
clase .nthlastchild*/
.nthlastchild:nth-last-child(2){
color:blue; }
clase .nthchild*/
.nthchild:nth-child(odd){
color:red; }
clase .nthlastchild*/
.nthlastchild:nth-last-child(2){
color:blue; }
clase .nthchild*/
.nthchild:nth-child(odd){
color:red; }
clase .nthlastchild*/
.nthlastchild:nth-last-child(2){
color:blue; }
clase .nthchild*/
.nthchild:nth-child(odd){
color:red; }
clase .nthlastchild*/
.nthlastchild:nth-last-child(2){
color:blue; }
18 Revista geek gratuita

EFECTOS DE TEXTO Y TIPOGRAFÍA
En anteriores temas hemos visto selectores, pseudo-elementos y pseudo-clases que son
herramientas fundamentales para lograr un código más depurado y limpio. Estoy seguro que más de
un diseñador habrá encontrado este comienzo muy pesado y aburrido. A partir de ahora veremos
características de CSS más visuales con la que podrás explotar tu creatividad.
Los diseñadores web se han encontrado durante bastante tiempo con enormes limitaciones en
cuanto a texto se refiere. CSS3 nos da un ápice de libertad en este sentido ya que por fin se asienta
como estándar la implementación de font-face, nos permite editar textos en varias columnas y
soluciona algunos problemas de visualización con word-warp.
Código :
@font-face{
font-family:;/*E1 nombre con el que nos referiremos a la fuente*/
src: [,]*;/*La ruta de donde cargamos el archivo del tipo*/
[font-weight:];/*Peso de la fuente*/
[font-style:];/*Estilo*/ }
Veamos un ejemplo:
Código :
@font-face{
font-family:”Deliciosa”;
src:url(‘fonts/Delicious-Roman. otf’);
}
#ejemplo{
font-family:”Deliciosa”; }
COLUMNAS EN CSS3
GUÍA
25 TECNICAS QUE NECESITAS SABER
Si queremos crear una estructura de varias
columnas contamos con cuatro nuevos atributos.
Al día que se escribe este curso estos atributos
están únicamente incorporados de manera
experimental en navegadores derivados de
Mozilla (Firefox) y Webkit (Chrome y Safari), por
lo que hay que añadir el prefijo -moz- o -webkitsegún
el caso. Os describo los atributos:
Por ejemplo:
Código:
.ejemplo{
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-width: lOOpx;
-moz-column-gap: 20px;
-webkit-column-width: lOOpx;
-webkit-column-gap: 20px; /*column-rule
se centra en el espacio dedicado al
gap*/
-webkit-column-rule: lpx solid
#ccc;/^Observad que indicamos, ancho,
estilo y color.
-moz-column-rule: lpx solid #ccc;
}
En ocasiones algunas palabras cuya longitud
excede el ancho de de la capa que lo contiene,
por lo que ignorando toda media, la muy hija de
un diccionario se sale arruinando el diseño.
El atributo word-warp soluciona esto “rompiendo”
la palabra y situando el resto en las filas inferiores.
Personalmente me parece una solución a medias,
ya que lo correcto sería la inclusión de un guión
en la ruptura de la palabra, al igual que cuando
escribimos en un editor de textos.
Código:
word-wrap:break-word; /*Rompe las
palabras*/
word-wrap:normal; /*Se porta de la
forma
habitual*/
Existe el riesgo de que un navegador determinado no interprete correctamente algunos formatos de
fuentes. Para asegurarse habría que importar todos los formatos:
Código :
src: url(‘Delicious-Roman.eot’) ;
src: local(‘?’), url(‘Delicious-Roman .woff’) format(‘woff’), url(‘Delicious-Roman.
ttf’ )
format(‘truetype’) , url(‘Delicious-Roman. svg#webfont57ztNrX6’)
format(‘svg’) ;
Consejo:
Existen aplicaciones que permiten exportarlas tipografías de un formato a otro.
www.geekx.bo

GUÍA
25 TECNICAS QUE NECESITAS SABER
WORD-WRAP
En ocasiones algunas palabras cuya longitud
excede el ancho de de la capa que lo contiene,
por lo que ignorando toda media, la muy hija de
un diccionario se sale arruinando el diseño.
El atributo word-warp soluciona esto “rompiendo”
la palabra y situando el resto en las filas inferiores.
Personalmente me parece una solución a medias,
ya que lo correcto sería la inclusión de un guión
en la ruptura de la palabra, al igual que cuando
escribimos en un editor de textos.
word-wrap:break-word; /*Rompe las
palabras*/
word-wrap:normal; /*Se porta de la forma
habitual*/
Aunque a la fecha de la edición de este tema
ninguno de los atributos aquí descritos tiene
una implementación fiable en el 100% de los
navegadores, es cierto que se ha notado un
cambio de tendencias en el diseño web, con
páginas que empiezan a basar su diseño en el
atractivo de las tipografías.
Tradicionalmente en CSS los valores de los colores se han expresado en valores RGB. CSS3 da una
vuelta de tuerca a este sistema y añade por un lado el canal alfa, y por el otro los sistemas HSL y HSLA.
CSS3 nos permite añadir un canal alfa (de transparencia) al sistema de color RGB.
Esta nueva notación a la que llamaremos rgba permite gracias a su cuarto canal la posibilidad de
indicar la opacidad en tantos por 1, es decir, tomando 0 como la máxima transparencia y 1 como la
máxima opacidad.
Actualmente cuando queremos crear alguna capa
con transparencia creamos una imagen png con la
opacidad que deseemos y guardamos conservando
el canal alfa. Después en el css definimos esa
imagen de fondo y eventualmente le damos el valor
transparent.
background:transparent url(“fondo.png”)
repeat; modelo RGBA. Su uso es el mismo
c\uergb(r,g,b); pero añadiendo el cuarto
valor:
Código:
body{
background-color:rgba(100,20,40,0.5);
}
COLOR
COLORES RGBA
Además este tipo de color actúa sobre cualquier elemento susceptible de atribución de color, como
los textos.
Para no perder las costumbres, Internet Explorer 8 no da soporte a este modelo por lo que para verlo
tendremos que usar una versión 9 o superior del programa de Microsoft.
COLORES HSL Y HSLA
CSS3 añade además un nuevo modelo de color
conocido como HSL. Estas siglas provienen del
inglés Hue, Saturation, Ligthness o lo que es lo
mismo, tono, saturación y brillo.
Código :
/^atributo:
hsl (tono,saturación,brillo) ; */
background-color: hsl(360,100%,20%);
Nótese que el valor tono puede tomar valores del 0 al 360 donde:
0, sería el rojo.
120, sería el verde.
240, sería el azul.
360, volvería a ser rojo.
Además, como en el caso del modelo RGB, al HSL se le puede añadir un canal alpha para definir
la transparencia del color. El resultado en código sería el siguiente, dando resultados análogos a
RGBA:
hsla(30 0,13 0%,65%,10%);
20 Revista geek gratuita

CSS3 trae una serie de novedades en el manejo de bordes de elementos. Tareas tan complicadas
hasta ahora como crear una esquina redondeada o usar imágenes en los bordes serán ahora
asombrosamente sencillos.
Hasta ahora era un auténtico quebradero de cabeza y una pérdida de tiempo crear un borde
redondeado teniendo que utilizar imágenes de fondo o recurriendo a hacks. El atributo border-radius
simplifica su implementación como vemos a continuación:
Código:
border-radius:15px;
Como resultado tendríamos una capa con todas las esquinas redondeadas.
Consejo: Como siempre, para optimizar la compatibilidad con los navegadores es conveniente usar los
prefijos -webkit- y -moz-.
Si quisiéramos usar diferentes radios en cada esquina la sintaxis shorthand sería:
Código:
border-radius:15px Opx 25px Opx;
Importante: Los valores dados al atributo border-radlus se empiezan a aplicar desde la esquina
superior izquierda en sentido horario
/*border-y-x-radius: valor;*/
border-top-left-radius: 15px;
/^Equivale a:*/
border-radius: 15px Opx Opx Opx;
El atributo border-image nos habilita para usar imágenes de fondo para los bordes de nuestros
elementos.
Para entender el funcionamiento de este atributo, empezaremos por crear una imagen de prueba, en mi
caso es esta:
Observad como las guías la dividen en una malla de 9 secciones, cada una de 12 x 12 px. No es
obligatorio pero nos servirá para entender mejor el concepto. La sintaxis a usar es la siguiente:
Con la primera medida indicaríamos a que distancia estaría la guía horizontal superior, con la segunda
la guía vertical derecha, con la tercera la guía horizontal inferior y con la cuarta la guía vertical izquierda.
Como dicen que una imagen vale más que mil palabras:
Lógicamente si sólo diésemos una medida, esta se aplicaría a todas las distancias y para las mismas
podemos indicar cantidades porcentuales.
Los modificadores indican como actuar en caso de que el borde sea mayor que las medidas de la
imagen.
/*border-y-x-radius: valor;*/
border-top-left-radius: 15px;
/^Equivale a:*/
border-radius: 15px Opx Opx Opx;
EFECTOS DE BORDE
BORDES REDONDEADOS CON BORDER-RADIUS
BORDES CON IMÁGENES
Código:
border-image: url(“borde.png”) 12 12 12 12 repeat repeat;
NUEVAS
PROPIEDADES
GUÍA
25 TECNICAS QUE NECESITAS SABER
BACKGROUND-ORIGIN
Importante: A estas alturas supongo que sabéis
lo que tengo que decir de la compatibilidad de
Internet Explorer 8 con este atributo. Por si las
dudas lo confirmo: no es compatible.
Podríamos decir que el atributo background-origin
es una versión mejorada de background-position
que nos permite definir el origen de coordenadas
desde el cual posicionamos la imagen. Podemos
darle tres valores:
border-box. Toma como origen de coordenadas el
borde del elemento.
padding-box. Toma como origen de coordenadas
el padding del elemento.
BACKGROUND-CLIP
En ocasiones tendremos bordes con
ransparencias bajo los cuales no queremos
que se muestre el fondo, aunque la propiedad
background-origin tenga el valor border-box.
Para estos casos contamos con el atributo
background-clip que “enmascara” nuestro fondo
tomando como referencia el borde, el padding o
el contenido. Lo valores pueden ser:
border. Es el valor por defecto. La imagen no
sufre cambios.
padding. Empieza a enmascarar a partir del inicio
padding, por lo que no se mostrará fondo bajo
nuestro borde.
contení. Enmascara a partir del contenido, por
padding.
MÚLTIPLES FONDOS
Hasta ahora en CSS2 el uso de varios fondos
era algo complejo que pasaba por superponer
varias capas aplicando a cada una de ellas un
fondo distinto. CSS3 permite asignar a un mismo
elemento varios fondos mediante el atributo
background-image por lo que este trabajo se
facilita enormemente.
La sintaxis para asignar varios fondos es la
siguiente:
Código:
background-image:url(“imagen” ) ,
url(“imagen”) ;
Código:
background-image:url(“bg2.png”
url(“bgl.png”) ;
www.geekx.bo

GUÍA
25 TECNICAS QUE NECESITAS SABER
EFECTOS DE SOMBRA Y BRILLO
En este tema veremos el uso de box-shadow y text-shadow con los que podremos crear
sombras y brillos. Además como regalo os dejo una aplicación práctica: Textos 3D.
BOX-SHADOW
Hasta ahora aplicar un efecto de sombra a cualquier elemento de nuestro html era un
proceso entretenido donde teníamos que cargar imágenes creadas previamente en nuestro
programa de edición de imágenes favorito, recortarlas, ajustarías, etc.
Con el atributo box-shadow podemos aplicar sombras a nuestras capas con pasmosa
facilidad. La sintaxis de box-shadow es la siguiente:
Código:
box-shadow: distanciaX distanciaY difuminado
color;
Código:
box-shadow: 5px lOpx 7px rgba(0,0,0,0 . 5) ;
TEXTOS EN 3D
CON TEXT-SHADOW
Utilice múltiples Texto sombras para crear texto en
3D en cualquier elemento HTML.
No HTML extra, sin dolores de cabeza adicionales,
simplemente awesomesauce.
h1 {
text-shadow: 0 1px 0 # ccc,
0 2px 0 # c9c9c9,
0 3px 0 # bbb,
0 4px 0 # b9b9b9,
0 5px 0 # aaa,
0 6px rgba 1px (0,0,0, 0,1),
0 0 5px rgba (0,0,0, 0,1),
0 1px 3px rgba (0,0,0, 0,3),
0 3px 5px rgba (0,0,0, 0,2),
0 5px 10px rgba (0,0,0, 0,25),
0 10px 10px rgba (0,0,0, 0,2),
0 20px 20px rgba (0,0,0, 0,15);
}
Si quisiéramos añadir varias sombras, sólo tendríamos que añadir un nuevo valor al atributo
usando una coma como separador:
Código:
box-shadow: 5px lOpx 7px rgba(0,0,0,0.5), -5px -lOpx 7px rgba(0,0,0,0.5);
Eso ya tiene algo más de aspecto 3D, pero aun le
podemos dar un aspecto más realista. Aplicaremos
una nueva sombra siguiendo el método anterior,
con la diferencia que esta vez le daremos color
negro. Por último añadimos una sombra mayor
que todas las demás, de color gris claro y con
difuminado:
El atributo text-shadow se incluyó inicialmente en el CSS2 pero fué eliminado en CSS2.1. Por
suerte para todos CSS3 vuelve a incluirlo. Seguro que te preguntas en qué se diferencia
debox-shadow. Mientras que box-shadow crea sombras a en forma de caja, text-shadow
realiza una sombra ajustada a los propios caracteres de un texto. En la siguiente imagen
podéis ver la diferencia de los atributos aplicados a textos:
Código:
text-shadow: distanciaX distanciaY
difuminado color;
Para asignar varias sombras usamos la coma
como separador. Por ejemplo:
Código:
text-shadow: 5px lOpx 7px
rgba(0,0,0,0.5), -5px -lOpx 7px
rgba(0,0,0,0.5);
BRILLO
Código:
text-shadow: Opx Opx 20px
rgba(0,255,0, 1) ;
text-shadow:
Opx Opx 20px
rgba(0,255,0,1),
Opx Opx 20px
rgba(0,255,0,1),
Opx Opx 20px
rgba(0,255,O,1);
Código:
text-shadow:
lpx lpx Opx rgba(230,230,230,1),
2px 2px Opx rgba(200,200,200,1),
3px 3px Opx rgba(180,180,180,1),
4px 4px Opx rgba(160,160,160,1),
/^Añadimos*/
5px 5px Opx rgba(0,0,0,1),
8px 8px 2Opx rgba(0,0,0,0.5);
Código:
text-shadow:
lpx lpx Opx rgba(230,230,230,1),
2px 2px Opx rgba(200,200,200,1),
3px 3px Opx rgba(180,180,180,1),
4px 4px Opx rgba(160,160,160,1),
/^Añadimos*/
5px 5px Opx rgba(0,0,0,1),
8px 8px 2Opx rgba(0,0,0,0.5);
22 Revista geek gratuita

TRANSFORMACIONES
GUÍA
25 TECNICAS QUE NECESITAS SABER
Una de las aportaciones de CSS3 que en mi opinión añaden más dinamismo al diseño son las transformaciones. A partir de ahora podremos modificar la
rotación, inclinación o escala de nuestros elementos.
TRANSFORM EN CSS3
El atributo transform nos permite, como su propio
nombre indica, transformar un elemento. Su sintaxis
es la siguiente:
Importante: He notado que las transformaciones aplicadas a textos no funcionan bien con -webkit-.
Como solución podemos aplicarlas a las capas contenedoras. En -moz- sí se puede aplicar directamente
sobre el texto sin problemas.
Código :
transform: tipo(cantidad);
El valor tipo puede tomar cuatro valores, y cada uno
de ellos realiza una función diferente:
• rotate. Nos permite girar los elementos un
número de grados. La sintaxis es:
Código :
transform: rotate(25deg) ;
Se pueden aplicar diferentes transformaciones a un
mismo elemento simplemente escribiéndolas de
manera consecutiva:
Código:
transform: scale(1.6) skew(lOdeg)
transíate(5px) rotate(12deg);
• skew. Podemos inclinar un elemento tanto en
coordenadas X como V. El valor se expresa en
grados y la sintaxis es la siguiente:
Código :
/*transform: skew(gradosX, gradosY);*/
transform: skew(15deg, 3deg);
• scale. Con este tipo podremos escalar nuestro
elemento tanto en X como en V en una cantidad
expresada en tantos por uno:
Código:
/*transform: scale(escalaX,escalaY);*/
transform: scale(1.5,0.6);*/
• transíate. Podemos desplazar el elemento tanto
en X como en V.
Código:
/*transform: transíate(desplazamientoX,
desplazamientoY);*/
transform:transíate(12px, 19px);
TRANSICIONES
Actualmente CSS3 permite la posibilidad de cambiar el estilo de un elemento mediante una
transición animada. Este es tal vez el aspecto que me ha resultado más atractivo de todo CSS3 y
es curioso que cuando redacté este mismo curso en Cristalab no escribí nada acerca de ellas. Sin
embargo es una de las características con mayor potencial y más efectista de cuantas hayamos
revisado hasta ahora.
Existen 4 propiedades base para crear transiciones:
• transition-property: Define la propiedad que vamos a animar mediante la transición.
• transition-duration: La duración en segundos de la animación.
• transition-timing-function: La función matemática aplicada a la animación. Puede
tomar 5 valores predefinidos (linear, ease, ease-in, ease-out o ease-in-ouf) o cubic-bezier(v, v, v, v)
para definir tus propias funciones. Su valor por defecto es ease.
• transition-delay: Indica el retardo en segundos. El valor por defecto es 0.
También se puede aplicar el método shorthand:
Independientemente del orden:
transition: [propiedad] [duración] [función] [retardo]
Código:
div{
width: lOOpx;
transition: width ls ease-in 0.2s;
-o-transition: width ls ease-in 0 . 2 s;
-moz-transition: width ls ease-in 0 . 2 s;
-webkit-transition: width ls ease-in 0.2s; }
div:hover{
width: 500px;
transition: width ls ease-in 0.2s;
-o-transition: width ls ease-in 0 . 2 s;
-moz-transition: width ls ease-in 0 . 2 s;
-webkit-transition: width ls ease-in 0.2s; }
En este ejemplo modificamos el ancho de una capa durante un segundo empezando 0.2 segundos
después de hacer hover sobre el div.
El caso es que podemos aplicar transiciones a varias propiedades a la vez, simplemente separando las
sentencias por comas:
www.geekx.bo

GUÍA
25 TECNICAS QUE NECESITAS SABER
ANIMACIONES CSS
Tradicionalmente cuando queríamos incluir cualquier tipo de animación en nuestras
páginas webs teníamos que recurrir a tecnologías como Flash o JavaScript. Si bien
la potencia de los dos citados es descomunal en comparación, las nuevas funciones
de animación de CSS3 abren una nueva puerta a nuestra imaginación, sin tener que
depender de tecnologías extras.
Importante: En la fecha en la que se realiza este curso, la compatibilidad de las
animaciones se limita a los navegadores basados en webkit como Chrome o Safari.
Fotogramas
Para aquellos que son flasheros el concepto de fotograma clave no necesita
explicación. Si no te encuentras entre los adeptos del programa de Adobe, es
importante que entiendas bien este concepto antes de continuar.
Un fotograma clave no es más que un punto destacado en el tiempo de nuestra
animación. Cualquier animación consta al menos de dos fotogramas claves: el
punto inicial y el punto final.
@KEYFRAMES
FOTOGRAMAS CLAVES DE LAS
ANIMACIONES EN CSS3
En CSS3 creamos animaciones completas mediante @keyframes, que son un
conjunto de fotogramas clave. Su sintaxis es la siguiente:
Código:
/*@keyframe nombreAnimacion{
puntoDelKeyframe{
atributosIniciales;
}
puntoDelKeyframe{
nuevosAtributos; }
puntoDelKeyframe{
últimosAtributos;
}*/
}
Código:
@keyframe animacionCochef
/^Indicamos que salimos de la
posición 0*/ f rom{
left:Opx;
}
/^Indicamos que al final la
posición debe ser 350*/
to{
left:350px;
} }
Un poco extraño ¿verdad? Tranquilo, es más fácil de lo que parece. Veamos que
tendríamos que hacer para desplazar nuestro coche a la derecha:
NO TE OLVIDES DE
ORDENAR TU CODIGO CSS
POR ORDEN ALFABETIDO, LA
WC3 TOMA MUY ENCUENTA
EL ORDEN DE TU CODIGO,
SEAMOS ORDENADOS
24 Revista geek gratuita