Edicion 1 - Bolivia - Septiembre 2013 - Distribucion Gratuita
OLORES RGBA - COLO
R ES H S L
Y H SL A -
25 TECNICAS QUE NECESITAS SABER E B OR
DE
S3 N CS
OR - C COL
GUÍA
OS
ORES - ATRIBUTO T C E L E S SE
Somos un grupo de bolivianas y bolivianos que, cansados de las mas lentas y caras.
AP WR
W N O A S M R P E S ORD H E U E D D O ELEM OR T C Y O T T X I E P O G RA E T L E E D E NT S S F ÍA - ECTO EF
SD CTO EFE
Grandes disenos que inspiran al mundo
www.geekx.bo
CONTROLANDO LOS PORCESOS DESDE 1985
index bienvenido
Trabajos
Bienvenido a
geekx
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.
Una revista geek
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
www.geekx.bo
Rub
Diseñoen Lovera Grafico
MArc
Diagraelo Flores mación
Jhonny
Cata
Redaccióora n
Visita nuestro blog para tu opinion, critica y mas
@geekx
Me
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
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.
rano Fotogdra fia
Comienza el editorial de Ivan Laime Sarsuri, principal responsable de GEEKX.
sobre juegos de video, de cartas y un espacio literario.
Fernad o
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 .
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
17
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
18
25 TECNICAS QUE NECESITAS SABER 20 WORD-WRAP
21
En ocasiones algunas palabras cuya longitud e xced.
COLOR
Tradicionalmente en CSS los valores de los colores se han expresado en valores RGB.
EFECTOS
CSS3 trae una serie de novedades en el manejo de bordes.
NUEVAS
22 SOMBRA Y BRILLO
Importante: A estas alturas supongo que sabéis lo que tengo que decir de la compatibilidad.
Más y mejor INTERNET para BOLIVIA
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
21
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.
8 6
16
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. 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.
6
EFECTOS
En anteriores temas hemos visto selectores, pseudo-elementos y pseudo-clases. Además como regalo os dejo una aplicación práctica.
EFECTOS
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.
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.
Noticias Comentarios noticias 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
6
Revista geek gratuita
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.
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.
Construye tu identidad profesional en Internet y mantente en contacto con compañeros de clase y de trabajo.
Impulsa tu carrera.
Infórmate y comparte.
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
Otros proyectos OS incorporados
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.
Esta es una lista de los proyectos OS que incorporará Drupal en su versión 8. jQuery CKEditor Backbone Modrnizr Farbtastic Grippie Normalize Composer PHPUnit Guzzle
¿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.
Zend Feed
Conclusiones
D
rupal 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.
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.
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 http://www.cssdesignawards.com/
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.
Proceso de selección 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 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)
10
Revista geek gratuita
<arriba> Parallax, empresa profesional de diseño y desarrollo web, ganador mes de Agosto 2013
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
14
Revista geek gratuita
Arce ProgrM Flore amadlo or PHPs
Fernad
Diseñao Medrano dor We b
PrograRuben Lovera mador Web
Arce ProgrM Flore amadlo or PHPs
Jhonny
Cataco
CEO
ra
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.
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
SELECTORES
25 TECNICAS QUE NECESITAS SABER
ATRIBUTOS EN CSS3
SELECTOR DE HERMANOS
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
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.
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”] {.. .}
Código : /^Selector adyacente en CSS2.1*/ hl + h2{...} /^Selector general de hermanos de CSS3*/ hl ~ h2{...} <hl>Titulo</hl> <h2>Subtitulo adyacente</h2> <hl>Titulo</hl> <p> párrafo de separación</p> <h2>Subtitulo con selector general de hermanos</h2>
/^Selecciona todos los enlaces que apunten a una dirección de correo*/ a[hrefA=”mailto:”]{...}
PSEUDO ELEMENTOS PSEUDO ELEMENTOS DE CSS3 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 “; } <div id=”ejemplo”>
18
Revista geek gratuita
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:
<hl>pseudo-elementos</hl> <p>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&iacute;nea con first-line, e incluimos en el titulo el texto “Ejemplo de” y “.” con before y after respectivamente. </ div>
PSEUDOCLASES 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; }
GUÍA
EFECTOS DE TEXTO Y TIPOGRAFÍA
COLUMNAS EN CSS3
25 TECNICAS QUE NECESITAS SABER
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:<nombre fuente>;/*E1 nombre con el que nos referiremos a la fuente*/ src: <source>[,<source>]*;/*La ruta de donde cargamos el archivo del tipo*/ [font-weight:<weigth>];/*Peso de la fuente*/ [font-style:<style>];/*Estilo*/ } Veamos un ejemplo: Código : @font-face{ font-family:”Deliciosa”; src:url(‘fonts/Delicious-Roman. otf’); } #ejemplo{ font-family:”Deliciosa”; }
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
COLOR
25 TECNICAS QUE NECESITAS SABER
WORD-WRAP
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.
COLORES RGBA 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.
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); } 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
GUÍA
EFECTOS DE BORDE 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.
BORDES REDONDEADOS CON BORDER-RADIUS 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;
NUEVAS
25 TECNICAS QUE NECESITAS SABER
PROPIEDADES 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 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;
BORDES CON IMÁGENES 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: Código: border-image: url(“borde.png”) 12 12 12 12 repeat repeat;
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;
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.
Utilice múltiples Texto sombras para crear texto en 3D en cualquier elemento HTML. No HTML extra, sin dolores de cabeza adicionales, simplemente awesomesauce.
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) ;
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);
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);
22
Revista geek gratuita
TEXTOS EN 3D CON TEXT-SHADOW
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);
h1 { text-shadow: 0 0 0 0 0 0 0 0 0 0 0 0 }
1px 0 # ccc, 2px 0 # c9c9c9, 3px 0 # bbb, 4px 0 # b9b9b9, 5px 0 # aaa, 6px rgba 1px (0,0,0, 0,1), 0 5px rgba (0,0,0, 0,1), 1px 3px rgba (0,0,0, 0,3), 3px 5px rgba (0,0,0, 0,2), 5px 10px rgba (0,0,0, 0,25), 10px 10px rgba (0,0,0, 0,2), 20px 20px rgba (0,0,0, 0,15);
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: 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);
GUÍA
TRANSFORMACIONES
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) ;
• 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);*/
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);
• 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
ANIMACIONES CSS
25 TECNICAS QUE NECESITAS SABER 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
FOTOGRAMAS CLAVES DE LAS ANIMACIONES EN CSS3 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 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