Adobe lanza la beta del nuevo sitio llamado theexpressiveweb.com . Este es un proyecto que han elaborado con la ayuda de BigSpaceShip con el objetivo de crear tanto un recurso como escaparate que pone de relieve algunas de las características de web hoy en día.



Además de destacar y facilitar información sobre doce nuevas características de HTML5 CSS3, el mismo sitio hace un uso extensivo de las nuevas características tales como CSS3 transiciones , transformaciones con CSS3 , almacenamiento web y mucho más para ofrecer un recurso atractivo visual para aprender más acerca de HTML5 y CSS3.

El sitio destaca el HTML5 y CSS3 siguientes características:
Cada página contiene características:
  • Una demostración de la característica.
  • Los datos sobre soporte de los navegadores.
  • Enlaces a ejemplos en la naturaleza que el uso de la función.
  • Enlaces a más en profundidad los recursos y tutoriales.
  • Detección y estrategias de reserva para la función.
El objetivo es proporcionar una introducción rápida y la comprensión de las nuevas funciones, y proporcionar información y enlaces para que los diseñadores y los desarrolladores pueden obtener una comprensión más profunda de lo que la función es, para lo que puede ser utilizado, y cómo usarlo.


Como pueden observar utiliza tecnología Adobe Edge, la cual hablamos anteriormente 



Lecciones aprendidas

Así que, ¿cuáles son algunas de las lecciones que hemos aprendido de la creación de un sitio que hace un uso extensivo de nuevas características de HTML5 CSS3?

Decida con anticipación si apoyar los navegadores más antiguos

El apoyo a los navegadores más antiguos cuando se trabaja con las nuevas características añade un nivel adicional de complejidad al proyecto. Las características más nuevo que añadir, más trabajo que tiene que gastar la aplicación y depuración de las soluciones de reserva en los navegadores antiguos.

Como mínimo, asegúrese de que tiene un sólido entendimiento de cómo las nuevas características y degradan. Por ejemplo, si las fuentes web no están disponibles, entonces puede fácilmente retroceder a una fuente incorporada.Sin embargo, si CSS3 animaciones son cruciales para su sitio, entonces es posible que tenga que hacer un trabajo adicional para poner en práctica las animaciones a través de JavaScript para situaciones en las animaciones CSS no son compatibles.

Si usted decide apoyar los navegadores más antiguos, entonces usted puede desear considerar reduciendo el número de nuevas características que su sitio se basa en.

Adquirir la HTML5/CSS3 características esenciales a su sitio

Para cada nuevo, de vanguardia característica que utiliza en su proyecto que tener en cuenta el tiempo de desarrollo y el costo de cada uno de los siguientes:
  • Implementación de una estrategia de repliegue para los navegadores que no soportan la función.
  • Las diferencias en las implementaciones de figurar entre los navegadores que son compatibles con la función.
  • Estar preparado para las versiones del navegador para cambiar sus implementaciones de función (más abajo).
Esto es especialmente cierto cuando la orientación navegadores antiguos que no pueden apoyar algunas de las nuevas características.

Esto no quiere decir que usted no debe utilizar las nuevas características, pero hay que ser consciente de frente de los costos de desarrollo y mantenimiento que eso conlleva. Al centrarse únicamente en las características esenciales para el sitio, usted puede ayudar a reducir el impacto global de los elementos anteriores.

Plan de mantenimiento para más después de la liberación

Esto es algo que nos sorprendió un poco con la guardia baja. Si usted está construyendo un sitio que hace un uso extensivo de nuevas características de HTML5 CSS3, es necesario planear en tener más alto que los recursos normales de mantenimiento.

Esto se debe a HTML5 y CSS3 consisten en relativamente nuevas características que no necesariamente han sido estandarizados. Porque son tan nuevas, las implementaciones de navegador puede (y será) el cambio entre versiones.

Por desgracia, hemos descubierto la manera más difícil. Apple lanzó Safari 5.1 aproximadamente una semana antes de que el sitio de lanzamiento, y la liberación terminó rompiendo un par de cosas en nuestro sitio. Cuanto más tiempo pase después del lanzamiento de su sitio web, el navegador más versiones habrá, y por lo tanto las cosas más probable en su sitio va a romper. Por supuesto, esto se aplica a cualquier contenido de la web, pero dado lo nuevo de estas características son, es un tema en particular cuando se utilizan algunos de los nuevos HTML5 y CSS3 funcionalidad.

El rendimiento no se trata sólo de JavaScript

Cuando empezamos el proyecto, nuestra preocupación principal actuación fue en torno a las diferencias en la ejecución de JavaScript entre los navegadores (browsers especialmente los más viejos). Sin embargo, a medida que comenzaron a aplicar algunas de las CSS3 transiciones para animaciones de transición de página, hemos tenido que lidiar con las diferencias en el rendimiento de la animación entre los navegadores.

Como los sitios web más y más el uso de gráficos en movimiento, esto se convertirá en un tema importante para los creadores de contenido. Por ejemplo, en el caso de las transiciones CSS3, hay dos causas principales de las diferencias.

En primer lugar, un poco de hardware navegadores CSS3 acelerar las transiciones, lo que puede ofrecer un rendimiento de animación muy buena. Sin embargo, no todos los navegadores de hacer esto. En nuestro caso, rendimiento de la animación fue el mismo, pero el uso de CPU puede ser significativamente mayor que cuando las transiciones no se aceleraron.

En segundo lugar, animación de contenido en dispositivos pueden tener perfiles de rendimiento totalmente diferente. No sólo entre los navegadores de escritorio y dispositivos, sino también entre diferentes dispositivos. Por ejemplo, encontramos que para nuestro proyecto el iPad de Apple proporciona un rendimiento mucho mejor que la animación en el XOOM Motorola.

La clave es entender cuáles son los límites de sus gráficos en movimiento en particular, y cuando el rendimiento se degrada a un punto que es necesario considerar la implementación de una solución alternativa a una animación de menor intensidad. Este límite puede variar de un proyecto a otro.

En el caso de theexpressiveweb.com, cuando un navegador o un dispositivo de problemas no puede reproducir la animación, el sitio cambia a una transición menos intensivo que se basa en los gráficos, haciendo que aparezcan, en lugar de animar en el lado.

No se mueven muchas cosas a la vez

Esta es bastante simple, pero como regla general, menos cosas al mismo tiempo que animar, más suave será realizar sus animaciones.

En theexpressiveweb.com, al cambiar las páginas de un par de cosas:
  • Página de navegación y elementos de información animar a cabo
  • Página de demostración se basa a cabo
  • Página de navegación y elementos de información animar en
  • Activos demostración animada en
Algunos navegadores pueden manejar todos estos elementos de animación, al mismo tiempo. Sin embargo, algunos navegadores tenido problemas para la animación de todos los elementos sin problemas. Fijamos esta animando por primera vez en los elementos de navegación y el contenido y después de comenzar la transición de página / demo.



Esto no sólo proporciona animaciones más suaves, pero también proporcionan al usuario la información y los contenidos anteriores, los cuales sienten que el sitio sea mucho más sensible.

Tener una estrategia de repliegue para las principales características una parte fundamental del plan de desarrollo

Usted debe tener una estrategia de reserva para cualquier nueva HTML5/CSS3 características que usted está utilizando. Esto es particularmente importante para las características que son clave para el sitio o la experiencia que están tratando de crear. Por estas características, que necesita para desarrollar la estrategia de repliegue desde el principio como una parte clave del desarrollo del sitio y el proceso de diseño.

Para theexpressiveweb.com, que hacen un uso extensivo de CSS3 transiciones para animar las transiciones de página. Estos gráficos en movimiento son una parte clave de la experiencia en el sitio. Porque son muy importantes, hemos tenido que desarrollar el sitio con una estrategia de repliegue en mente desde el principio.

Como se mencionó anteriormente, si CSS3 transiciones no son compatibles (o no funcionan bien), el sitio vuelve a caer a simples animaciones de las transiciones de página. Esto todavía ofrece una buena (aunque un poco degradada) la experiencia para el usuario.

Podríamos haber vuelto a la animación de las transiciones usando JavaScript, sin embargo, encontramos que basados ​​en JavaScript transiciones no funcionan bien en algunos casos (especialmente en los dispositivos). Ya que tendría que poner en práctica una transición más sencilla y más performante para los escenarios, hemos decidido no aplicar una reserva adicional a través de JavaScript.

Diseñar y desarrollar con el móvil en la mente

Manteniendo los navegadores móviles en cuenta es importante en el diseño de sitios web regular, es particularmente importante en el diseño y desarrollo de sitios que utilizan gráficos en movimiento. Además de tener que lidiar con las diferencias en la resolución del dispositivo y los métodos de entrada, también hay que prestar especial atención al rendimiento de las animaciones.

En general, los navegadores móviles ofrecer un mejor todo el apoyo para las nuevas funciones, y proporcionar un buen soporte para la aceleración de hardware de CSS3 transiciones, transformaciones y animaciones. Sin embargo, cualquier movimiento y la animación tiene la posibilidad de gravar seriamente el navegador y el dispositivo. La comprensión de estas limitaciones al principio del ciclo de desarrollo harán que su proceso de desarrollo mucho más suave.

Use Modernizr

No hay mucho que decir aquí. Si está utilizando las nuevas características, es necesario asegurarse de que el navegador es compatible con esas características. El Modernizr biblioteca es, por lejos el más fácil, y la mayoría de forma robusta para detectar qué características son compatibles con el navegador.

Si es necesario comprobar con frecuencia para soporte de las funciones a través de su sitio, podría valer la pena hacer todos los controles de carga y luego guardar los resultados, en lugar de comprobar cada vez que se necesita el cheque. Hemos encontrado que en algunas situaciones esto podría proporcionar una notable mejora en el rendimiento de la inicialización.



Herramientas

Una pregunta que hemos escuchado es lo de herramientas usó para construir el sitio? En concreto, se utiliza la vista previa de borde Adobe para construir el sitio?

Bueno, en primer lugar, el equipo utilizó todos las mismas herramientas de otros diseñadores y desarrolladores web utilizar para desarrollar sitios web. Estos incluyen herramientas como Adobe Dreamweaver , TextMate , Coda , yPhotoshop . También usamos el Adobe Flash para crear las animaciones hoja de sprites que se utilizan en la página de audio HTML5 .

Sin embargo, no hizo uso de la vista previa de borde de Adobe para crear los gráficos de movimiento para el sitio.Comenzamos el proyecto de un par de meses, mientras que la vista previa de borde aún se estaba desarrollando.Más importante aún, la vista previa de borde actual no es realmente destinada a este tipo de animación dinámica, en tiempo de ejecución.

Como el ejemplo de lo más destacado sitio de Adobe Edge, la versión preliminar actual de Adobe Edge está centrado en la creación de animaciones estáticas, el tiempo de autor. Mientras que usted puede aprovechar su salida a través de JavaScript, que no es el objetivo principal de esta versión. Por supuesto, esto es sólo una versión preliminar, y el plan es proporcionar a los ganchos en las versiones posteriores para que el tipo de dinámica, orientada a eventos animaciones visto en theexpressiveweb.com.

Sin embargo, una cosa que hemos aprendido de desarrollo de Flash, y trabajando estrechamente con la comunidad Flash, es que hay un equilibrio entre lo que se anima a la hora de autor en la herramienta, y lo que es animación mediante programación en tiempo de ejecución. Por ejemplo, para theexpressiveweb.com, Adobe borde habría sido muy útil para crear rápidamente las animaciones y transiciones para todo el contenido de páginas y elementos de navegación. Sin embargo, para las animaciones de bloques que construyen el demos, que todavía podría usar JavaScript y CSS3 transiciones y animar a los bloques individuales en tiempo de ejecución. Esto es debido a la complejidad de la animación, el número de animaciones tiempos similares son el uso (doce en el sitio), el gran número de artículos que se está animando, y la facilidad de la reutilización de un modelo de código para añadir nuevas animaciones. Adobe Edge permitir este tipo de animaciones complejas, donde se anima a cientos de elementos, pero en algunos casos, es posible que desee utilizar JavaScript y CSS directamente. Adobe borde le dará esa opción.

El objetivo final de Adobe Edge es para proporcionar la flexibilidad de trabajar en ambos modelos. Sin embargo, para la primera versión preliminar, el equipo se centró en las animaciones de tiempo-autor.

Más información

Si desea obtener más información acerca de cómo se desarrolló el sitio o cerca de HTML5 y CSS3, en general, consulte el evento Campamento HTML5 en Nueva York el viernes, 5 de agosto. Hay una serie de sesiones sobre HTML5 / CSS3, Adobe y HTML5, así como una sesión sobre theexpressiveweb.com de Stephen Koch, que fue el promotor principal del proyecto.

También hemos creado un página de Recursos en theexpressiveweb.com que enumera una serie de recursos útiles para comenzar con HTML5 / CSS3. Por supuesto, beta.theexpressiveweb.com es también un gran recurso en características específicas.