Sebastián Thüer

Comunicación, diseño y tecnología

html5

LayerStyle: Crear efectos con CSS3 como si fuesen capas de Photoshop

· ·

Si el HTML dio un salto con HTML5, CSS hace lo mismo con CSS3 ¿Qué hay de nuevo en esta versión del archivo de estilo? Básicamente, muchos cosas que antes requería de ciertos trucos ahora se pueden hacer directamente desde CSS sin la necesidad de utilizar imágenes.

Bordes redondeados, sombras y fondos degradados ahora se pueden trabajar de manera directa en CSS. Eso sí, la sintaxis también se ha hecho algo más compleja porque -como toda novedad en la industria- los desarrolladores de navegadores no se ponen de acuerdo y hay que utilizar propiedas específicas.

Seguramente que para el trabajo detallado es necesario aprender la sintaxis, pero como un primer acercamiento no está demás mirar algunas herramietnas como LayerStyles que se encargan de generar el código automáticamente utilizando una interfaz mucho más amigable para un diseñador: la ventana de capas de Photoshop.

Aunque ciertamente no es 100% igual, se acerca bastante el código generado sirve para los diferentes motores de navegadores que soporten CSS3 como WebKit (Chrome, Safari) , Gecko (Firefox, Camino) y el nuevo Internet Explorer 9.

El resulta es bastante bueno, aunque a veces puede que la pantalla del navegador se congele si agregamos demasiados efectos. Igualmente el proyecto de Felix Nicklas es de código abierto con lo cual es esperable que se vaya mejorando.

Obviamente, esta herramienta utiliza HTML5.

Roots, un theme de WordPress para diseñadores web

· ·

Desde hace un tiempo en el diseño web se está imponiendo la tendencia de reutilizar una serie de bibliotecas o recursos genéricos que permiten solucionar algunos problemas puntuales sin tener que convertirse en un experto en la materia. No me refiero solamente frameworks de JavaScript como jQuery, Prototype o Yahoo User Interface que están ampliamente extendidos. También se están comenzando a utilizar frameworks de CSS para estandarizar la generación de estilos, frameworks de HTML5 para extender este lenguaje a los navegadores más antiguos y sistemas de retículas como 960 grid system o 1140 CSS grid.

Roots es un theme para WordPress que se presenta como excelente opción para diseñadores web ya que incorpora muchos de etos recursos. Utiliza HTML5, microformatos y tiene predefinidas una serie de opciones como organizar los posts por año y nombre, guarda los nuevos archivos en el directorio assets y, afirman los creadores, produce un código más limpio que la mayoría de las demás plantillas para WordPress.

Como lo indica su nombre, Roots es un theme para ser utilizado de base en muchos diseños y permite agilizar muchísimo el desarrollo de diseños web en WordPress ya que soluciona una serie de problemas comunes a los que se enfrentan los diseñadores cuando quieren desarrollar un theme para este sistema de gestión de contenidos.

Diseño web con HTML5: 10 recursos para comenzar ya

· ·

El HTML5 está a la vuelta de la esquina. Aunque la especificación todavía no está aprobada, cada vez más diseñadores y desarrolladores web se animan a iniciar sus proyectos con el futuro estándar. Para que iniciar un proyecto en HTML5 no sea un quebradero de cabeza, acá hay una recopilación de diferentes recursos que permiten comenzar rápidamente el diseño web en la nueva versión del HTML.

Está lista actualiza el viejo post de 2009 con 5+5 recursos para HTML5. Si no tenés idea de HTML5, mirá primero HTML5 para diseñadores web.

1. Modernizr

Moderniz es una librería JavaScript que permite incorporar HTML5 y CSS3 a tus proyectos sin que los antiguos navegadores que no soportan las nuevas tecnologías queden imposibilitados de ver tu sitio. Por ejemplo, se pueden utilizar los nuevos tags semánticos como HEADER, SECTION o FOOTER sin tener que preocuparse por no estar soportados en Internet Explorer.

2. HTML5 Shiv

Una librería específicamente desarrollada para que las etiquetas HTML5 y CSS3 puedan ser interpretadas por Internet Explorer. El proyecto está hosteado en Google Code y no que hay que descargar ni configurar nada. Basta incluir unas líneas en el código y es suficiente.

3. HTML5 Boilerplate

Es una plantilla HTML5 para desarrollar rápidamente un proyecto con las opciones y configuraciones más habituales. No es un framework, sino solo una recopilación de diferentes técnicas y trucos comunes en todo proyecto web que utilice HTML y CSS3.

4. Initializr

Es un proyecto que funciona como una recopilación de diferentes librerías y recursos de HTML5. En su página web elegimos una serie de opciones a partir de las cuales nos genera un ZIP con todos los archivos necesarios. Puede incluir Modernizr, HTML5 Shiv, jQuery, configuración para .htaccess y más.

5. HTML5 Reset

Se trata de una completa plantilla que incluye todos los elementos más habituales en un proyecto con HTML5. Incluye HTML, CSS y JavaScript. Hay tres versiones disponibles que van desde la completa con comentarios muy buenos para aprender y la básica solamente con la estructura general.

6. Switch To HTML5

Un sencillo generador online de HTML5 basado en una serie de opciones que puede definir el usuario. Ideal para comenzar y obtener resultados rápidos sin complicarse demasiado.

7. HTML5 Lint

Con HTML5 la validación del código es un asunto delicado. En lugar de la consistencia que proponía el escricto estándar XHTML, HTML5 vuelve a ser más laxo y mantener el código coherente se hace más difícil. HTML5 Lint ayuda a los desarrolladores a mantener la consistencia original en HTML5 a través de una serie de opciones que validan la escritura en minúscula, el uso de comillas para los valores de atributos, el cierre de todas las etiquetas y otras reglas de sintaxis. Ideal para puristas del código.

8. HTML5 Doctor

Uno de los primeros sitios dedicados a HTML5 que se ha convertido en una verdadera fuente te recursos para este lenguaje con publicación regular de artículos, novedades y algunos tutoriales. También es interesante su sitio hermano HTML5 Gallery con una muy buena selección de sitios web que implementan HTML5.

9. HTML5 Rocks

Otro excelente centro de recursos sobre HTML5 con el auspicio de Google y del que ya publiqué una presentación sobre HTML5. HTML5 Rocks combina información con tutoriales y al mismo tiempo nos deja ver en vivo las mejoras que ofrece el nuevo lenguaje de la web. Para pasar un buen rato recorriendo y aprendiendo.

10. HTML5 Reference Poster

Un impresionante poster de 10 x 7 metros con un buen resumen de las especificaciones del HTML5. Un diseño equiibrado y armonioso junto a el uso de iconos ayuda a identificar fácilmente los diferentes aspectos de la nueva especificación. Un buen recurso de decoración-consulta en la oficina y para clases de tecnología.

#Bonus: HTML5 for Beginners

HTML5 for Beginners

HTML5 for Beginners es un libro escrito por Jeremy Keith especialmente para diseñadores web que quieran iniciarse en los futuros estándares de la web. De manera ágil y sencilla, Keith introduce las principales novedades de HTML5 con ejemplos y casos prácticos. Un texto breves pero tremendamente útil publicado por A Book Apart. Cuesta 18 dólares más envío en versión papel y 9 dólares el eBook (ePub y PDF abierto sin restricciones).

Ilustración principal a partir de una imagen de BigStockPhoto

Anticipando Internet Explorer 9

· ·

Interfaz renovada y minimalista, respecto por los estándares web y un riguroso proceso de testeo. Microsoft parece estar trabajando para Internet Explorer 9 no se convierta en la nueva pesadilla de los diseñadores web. Luego de 15 años de Internet Explorer, parece que Microsoft ha tomado nota de sus principales fallos y se ha volcado dedicidamente en favor de los estándares web.

Hace unos días se ha filtrado un video que muestra la nueva interfaz de usuario de Internet Explorer. El minimalismo recuerda mucho a Chrome la principal diferencia es que la pestaña de ventanas se colocan a la derecha de la barra de direcciones. Los botones también se han reducido al mínimo y quedan solo dos que permiten ir hacia atrás o adelante. El resto de las opciones parecen estar en una serie de iconos que agrupan diferentes posibilidades de configuración.

Uno de los aspectos que más llama la atención en el video es su desempeño en un test bastante popular como Acid3 donde obtiene una puntuación de 95 sobre 100, por encima de la versión actual de Firefox que llega al 94% ¿Qué significa esto? Probablemente, que el lanzamiento de Internet Explorer 9 no necesite revisar nuestras páginas si están diseñados de acuerdo con los estándares.

Además de los estándares, Internet Exporer 9 apuesta decididamente por HTML5 y la página de Test Drive que lanzó Microsoft contiene muchos ejemplos sobre diferentes implementaciones de las nuevas etiquetas que tiene el lenguaje. Otra buena noticia: tambien hay soporte para CSS3 y los nuevos selectores avanzados que permiten afectar el diseño de un segmento de la página de modo mucho más específico.

Además, hay una extensa documentación y existe la posibilidad de descargar una Preview de IE9 para ir viendo cómo se comporta el navegador en cuanto a nuevas implementaciones y velocidad, una aspecto cada vez más importante con la gran cantidad de aplicaciones web y su creciente comlejidad.

Steve Jobs: Una web abierta para dispositivos cerrados

· ·

Steve Jobs publicó una larga carta abierta sobre Flash donde justifica por qué Apple no usa ni usará esta tecnología en sus dispositivos móviles como iPhone, iPad , iPod. Larga, sobria y clara, el texto es una lectura imprescindible para diseñadores web que quieren saber hacia donde irá la tecnología en los próximos años.

Para Jobs Flash fue pensado para la era de la PC y el mouse, no para los nuevos dispositivos móviles, La nueva generación de dispositivos requieren bajo consumo, interfaz táctil y formatos abiertos. La tecnología de Adobe no cumple ninguno de estos requisitos: Flash es un formato propietario, la mayor parte de las aplicaciones necesita ser reescrita para ser multitouch y tiene un alto consumo de batería.

Las críticas de Jobs

Jobs ataca algunos mitos y señala que la fuerte presencia de Flash en la web se debe especialmente al video: el 75% del video colgado en la web se encuentra en formato Flash. Sin embargo, existen formatos más modernos como H.264 que está disponible en los principales proveedores de video online como YouTube, Vimeo, Netflix, Facebook y otros.

Jobs es especialmente duro con Flash en cuanto a seguridad y rendimiento. Afirma que tuvo uno el peor record de seguridad en 2009 y que es la principal causa por las cuales se cuelgan las Mac. E insiste en la demorada salida de Flash en un smartphone anunciada a inicios de 2009 pero de las cuales no hay novedades todavía.

Abiertos, pero no tanto

La alternativa de Apple y otras empresas frente a Flash es apostar por los estándares: HTML5, CSS 3 y JavaScript. Algo que ya está sucediendo con la creciente presencia de frameworks para JavaScript (jQuery, MooTools, Prototype, etc.) en el diseño de sitios e interfaces online.

Sin embargo, para Apple los formatos abiertos son solo buenos en la web. Sus dispositivos seguirán utilizando tecnología propietaria. El Safari utiliza el motor de código abierto WebKit, como lo hacen casi todos los navegadores excepto Internet Explorer, pero sigue siendo una aplicación cerrada. Igual que los 50.000 juegos de su App Store con los que piensa dar batalla a Flash.