Recientemente hemos lanzado la versión beta de un nuevo sitio en el que hemos estado trabajando, llamado theexpressiveweb.com. Este es un proyecto que hemos hecho junto con la ayuda de Big Spaceship, con el objetivo de crear a la vez un recurso y un showcase que refleje algunas de las características más creativas y expresivas que se agregan a la web de hoy en día.

sitio

Además de destacar y ofrecer información de doce nuevas características en HTML5 y CSS3, el sitio mismo hace un uso amplio de nuevas características como transiciones CSS3, transformaciones CSS3, almacenamiento web y mucho más para brindar un recurso visualmente atractivo para aprender más acerca de HTML5 y CSS3.


El sitio destaca las siguientes características:

Cada página de cada característica contiene:

  • Un demo de la característica.
  • Datos del soporte del navegador.
  • Enlaces a ejemplos en los que se usa esa característica.
  • Enlaces a recursos y tutoriales más a fondo.
  • Detección y estrategias de reserva de la característica.

categorias

El objetivo es brindar una rápida introducción y comprendimiento de las nuevas características, proporcionar información y enlaces para que los diseñadores y desarrolladores puedan obtener una comprensión más profunda acerca de qué trata la característica, para qué puede ser utilizada y cómo utilizarla.

¿Por qué beta?

¿Entonces por qué este sitio fue lanzado como una versión beta? Bueno, la respuesta simple es que aún hay algunos errores en el sitio, particularmente en navegadores viejos y algunos dispositivos. A pesar de esto, hemos decidido lanzar el sitio como beta, para compartir los recursos e información con la comunidad, compartir algunas de las lecciones que hemos aprendido desarrollando el sitio, y obtener retroalimentación de esto.

Cuando comenzamos el desarrollo del sitio un par de meses atrás, diseñamos un plan ambicioso para un sitio que aprovecha y destaca una amplia gama de características de vanguardia. En efecto, y en retrospectiva, probablemente fuimos demasiado ambiciosos en nuestro alcance. Además de hacer frente a los problemas normales a través de los navegadores al hacer desarrollo web, ahora teníamos que lidiar con una gran cantidad de funcionalidad del núcleo del sitio que no era soportada consistentemente (o en su totalidad) entre los navegadores. Mientras que este es un problema particular en navegadores viejos, aún fue un problema para la mayoría de los navegadores actuales. Por ejemplo, el sitio usa transiciones CSS3 para animar las transiciones de las páginas, una característica con la cual no es compatible la versión actual de Internet Explorer 9.

Podríamos haber elegido soportar únicamente los navegadores más actuales, pero sentimos que incluso los demos de las características no serían soportados, los recursos y el contenido listado en cada página aún serían valiosos para los desarrolladores y diseñadores. Por lo tanto, el sitio se ejecuta en navegadores viejos como Internet Explorer 7, aunque la mayoría de las características que se destacan, no son compatibles.

Por supuesto, lidiar con las diferencias entre navegadores es una realidad del desarrollo web. Necesitas desarrollar con esto en mente, además de desarrollar estrategias de reserva para cuando una característica requerida no sea soportada. Sin embargo, en nuestro caso, ya que estábamos intentando destacar específicamente las nuevas características, tuvimos que lidiar con más problemas de implementación y soporte de los navegadores de un sitio habitual.

Lecciones aprendidas

Así que, ¿Cuáles son algunas de las lecciones que hemos aprendido al crear un sitio que hace un uso extenso de nuevas características de HTML5 y CSS3?

Decidir con anticipación si se soportaran los navegadores viejos

Soportar los navegadores viejos cuando se trabaja con nuevas características agrega un nivel adicional de complejidad al proyecto. Las nuevas características que agregues, requerirán de más tiempo de implementación y depuración para desarrollar una solución de reserva para los navegadores viejos.

Como mínimo, asegúrate de tener un sólido entendimiento de lo bien que se degradan las nuevas características. Por ejemplo, si las fuentes web no están disponibles, entonces puedes fácilmente retroceder a una fuente incorporada. Sin embargo, si las transiciones CSS3 son cruciales para tu sitio, entonces puede que tengas que hacer trabajo adicional para implementar las animaciones vía JavaScript para situaciones donde las animaciones CSS no son soportadas.

Si decides no soportar los navegadores viejos, entonces quizá quieras considerar el reducir el número de nuevas características en que se basa tu sitio.

Utiliza en tu sitio únicamente las nuevas características de HTML5/CSS3 esenciales

Para cada nueva característica de vanguardia que uses en tu proyecto, tendrás que considerar el tiempo de desarrollo y el costo de cada uno de los siguientes:

  • Implementar una estrategia de reserva para navegadores que no soportan la característica.
  • Lidiar con diferencias en las implementaciones de la característica entre los navegadores que no soportan la característica.
  • Estar preparado para nuevas versiones de los navegadores y para cambiar las implementaciones de la característica (más información abajo).

Esto es especialmente cierto cuando se apunta a navegadores viejos que no soportan algunas de las características.

Esto no sugiere que no deberías usar las nuevas características, pero necesitaras ser consciente de los costos de desarrollo y mantenimiento que puede acarrear. Al centrarse únicamente en las características esenciales para el sitio, puedes ayudar a reducir el impacto de los elementos anteriores.

Plan de más mantenimiento después del lanzamiento

Esto es algo que nos tomó por sorpresa. Si estás construyendo un sitio que hace uso extenso de nuevas características de HTML5 y CSS3, para su mantenimiento necesitas planear tener mayores recursos de los normales.

Esto porque HTML5 y CSS3 consisten relativamente en nuevas características que no necesariamente han sido estandarizadas. Debido a que son nuevas, las implementaciones de los navegadores pueden (y lo harán) cambiar entre versiones.

Desafortunadamente, descubrimos esto de la forma difícil. Apple lanzó Safari 5.1 cerca de una semana antes del lanzamiento del sitio, y este lanzamiento termino rompiendo un par de cosas en nuestro sitio. Cuanto más tiempo pasa después del lanzamiento de tu sitio, habrá más lanzamientos de navegadores, y así lo más probable es que tu sitio se rompa. Por supuesto, esto se aplica a cualquier contenido web, pero dado que estas son nuevas características, es un problema en particular cuando se usan algunas de las nuevas funcionalidades de HTML5 y CSS3.

El rendimiento no es sólo acerca de JavaScript

Cuando empezamos este proyecto, nuestra preocupación principal era el rendimiento en torno a las diferencias en la ejecución de JavaScript entre navegadores (especialmente los viejos). Sin embargo, cuando empezamos a implementar algunas de las transiciones de CSS3 para animaciones de transición de página, tuvimos que lidiar con diferencias en el rendimiento de las animaciones entre navegadores.

Así como más y más sitios web utilizan motion graphics, esto llegara a ser un problema importante para los creadores de contenido. Por ejemplo, en el caso de transiciones CSS3, fueron dos causas primarias de las diferencias.

La primera, algunos navegadores aceleran las transiciones CSS3 con el uso del hardware, lo cual puede brindar muy buen rendimiento a la animación. Sin embargo, no todos los navegadores lo hacen. En nuestro caso, el rendimiento de la animación fue el mismo, pero el uso del CPU puede ser significativamente mayor que cuando las transiciones no eran aceleradas.

La segunda, animar el contenido en los dispositivos puede tener perfiles de desempeño dramáticamente diferentes. No solo entre navegadores de escritorio y dispositivos, sino entre los diferentes dispositivos. Por ejemplo, encontramos que para nuestro proyecto el iPad de Apple brinda un mejor desempeño de animación que el de la XOOM de Motorola.

La clave es comprender cuáles son los límites de los motion graphics en particular, y cuando se degrada el rendimiento a un punto en que necesitas considerar la implementación de una solución de reserva para una animación menos intensa. Este límite cambiara de proyecto en proyecto.

En el caso de theexpressiveweb.com, cuando un navegador o un dispositivo no puede ejecutar la animación suavemente, el sitio cambia a una transición menos intensa que construye los gráficos y los hace aparecer, lo opuesto a animarlos desde el lado.

No muevas demasiadas cosas a la vez

Esta es muy simple, pero como una regla general, mientras se animen menos cosas simultáneamente, las animaciones se realizarán más suavemente.

En theexpressiveweb.com, cuando cambias las páginas pasan un par de cosas:

  • La navegación de la página y los elementos de información se animan al salir
  • La página de ejemplo se construye fuera
  • La navegación de la página y los elementos de información se animan al entrar
  • Los recursos de los demos se animan al entrar

Algunos navegadores podrían manejar todos estos elementos animándose al mismo tiempo. Sin embargo, algunos navegadores tienen problemas al animar todos los elementos suavemente. Nosotros arreglamos esto al animar primero los elementos de navegación y el contenido y entonces la transición de la página de demostración.

Esto no solo proporciona animaciones suaves, también provee al usuario con información y contenido anterior, ambos de los cuales hacen que el sitio se sienta mucho más responsivo.

Tener una estrategia de reserva para características clave es una parte fundamental del plan de desarrollo

Deberías tener una estrategia de reserva para cualquier característica nueva de HTML5/CSS3 que estés utilizando. Esto es particularmente importante para características que son clave para el sitio o para la experiencia que estás intentando crear. Para estas características, necesitas desarrollar la estrategia de reserva desde el principio como una parte clave del desarrollo del sitio y el proceso de diseño.

Para theexpressiveweb.com, hicimos un uso extenso de transiciones CSS3 para animar las transiciones de las páginas. Estos motion graphics son una parte clave para la experiencia del sitio. Debido a que son clave, desde el principio tuvimos que desarrollar el sitio con una estrategia de reserva en mente.

Como mencione anteriormente, si las transiciones CSS3 no son soportadas (o no se realizan bien), entonces el sitio vuelve a animaciones de transiciones más simples. Esto aún brinda una buena (aunque ligeramente degradada) experiencia para el usuario.

Pudimos haber vuelto a animar las transiciones usando JavaScript, sin embargo, encontramos que las transiciones basadas en JavaScript no se realizan bien en algunos casos (especialmente en dispositivos). Ya que todavía tendríamos que implementar una transición más simple para estos escenarios, decidimos no implementar una reserva a través de JavaScript.

Diseñar y desarrollar con móvil en mente

Mientras que mantener en mente los navegadores móviles es importante cuando se diseñan sitios regulares, es particularmente importante cuando se diseñan y desarrollan sitios que usan motion graphics. Además de tener que lidiar con las diferencias en las resoluciones de los dispositivos y los métodos de entrada, también debes poner atención al rendimiento de las animaciones.

En general, los navegadores móviles proveen mejor soporte para las nuevas características, y brindan buen soporte para la aceleración de hardware para transiciones, transformaciones y animaciones de CSS3. Sin embargo, cualquier movimiento y animación tiene la posibilidad de agravar severamente al navegador y al dispositivo. Comprender estas limitaciones a tiempo en el ciclo de desarrollo hará tu proceso de desarrollo mucho más suave.

Usa Modernizr

No hay mucho que decir aquí. Si estas usando nuevas características, necesitarás asegurarte de que el navegador las soporta. La librería Modernizr es sin duda la forma más robusta y fácil para detectar cuáles características soporta el navegador.

Si necesitas revisar frecuentemente el soporte de una característica de tu sitio, vale la pena hacer todas las comprobaciones en la primera carga y entonces guardar los resultados, lo opuesto a revisar cada vez que se necesita. Encontramos que en algunas situaciones esto podría brindar una mejora notable en el rendimiento de inicialización.

Herramientas

Una pregunta que hemos estado escuchando es: “¿Qué herramientas utilizaron para construir el sitio?” Específicamente, “¿Usaron Adobe Edge para construir el sitio?”.

Bueno, primero, el equipo utilizó las mismas herramientas que otros diseñadores y desarrolladores web utilizan para construir sitios web. Estas incluyen herramientas como Adobe Dreamweaver, TextMate, Coda y Photoshop. También usamos Adobe Flash para crear las animaciones de hojas de sprites las cuales son utilizadas en la página de Audio HTML5.

Sin embargo, no utilizamos Adobe Edge para crear los motion graphics del sitio. Comenzamos el proyecto hace un par de meses mientras que la versión de prueba de Edge aún estaba siendo desarrollada. Más importante, la versión actual de Edge no está realmente orientada a este tipo de dinámica, la animación en tiempo de ejecución.

Como los ejemplos en el sitio de Adobe Edge destacan, la versión actual de Adobe Edge está enfocada en crear animaciones estáticas de tiempo de autor. Mientras que puedes aprovechar su salida en JavaScript, no es el enfoque primario de este lanzamiento. Por supuesto, esta es solo la versión de prueba, y el plan es proporcionar los ganchos en los lanzamientos posteriores para habilitar el tipo de animaciones dinámicas conducidas por eventos que se ven en theexpressiveweb.com.

Sin embargo, una cosa que hemos aprendido al desarrollar Flash, y al trabajar muy de cerca con la comunidad Flash, es que hay un balance entre lo que es animado en tiempo de autor en la herramienta, y lo que es animado programáticamente en tiempo de ejecución. Por ejemplo, para theexpressiveweb.com, Adobe Edge habría sido muy útil para crear rápidamente las animaciones y transiciones de todas las páginas de contenido y los elementos de navegación. Sin embargo, para los bloques de animaciones que construyen los demos, aún podríamos utilizar JavaScript, transiciones CSS3 y animar los bloques individuales en tiempo de ejecución. Esto debido a la complejidad de la animación, el número de veces en que se usan animaciones similares (doce en el sitio), el mero número de elementos siendo animados, y la facilidad de reutilizar el modelo del código para agregar nuevas animaciones. Adobe Edge permitirá este tipo de animaciones complejas, donde se animan cientos de elementos, pero en algunos casos, puede que aún quieras usar JavaScript y CSS directamente. Adobe Edge te dará esa opción.

El último objetivo de Adobe Edge es proporcionar la flexibilidad de trabajar dentro de ambos modelos. Sin embargo, para la primera versión de prueba, el equipo se enfocó en animaciones de tiempo de autor.

Retroalimentación

El sitio está en beta, pero nos gustaría escuchar cualquier retroalimentación, preguntas, o problemas que puedas tener. Puedes enviarnos tus comentarios a theexpressiveweb_feedback@adobe.com.

Aprender más

Si quieres aprender más acerca de cómo desarrollamos el sitio o acerca de HTML5 y CSS3 en general, revisa la página de recursos en theexpressiveweb.com la cual lista muchos recursos útiles para comenzar con HTML5 / CSS3. Por supuesto, beta.theexpressiveweb.com es también un gran recurso en características específicas.

Recursos

Finalmente, puedes aprender más acerca de todo el trabajo que Adobe está haciendo en el sitio de Adobe y HTML5.

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Jesús Macedo.