HTML5 Rocks

HTML5 Rocks

HTML5 Características

Gráficos

La Web ha sido siempre un medio visual, pero restringido en el mejor de los casos. Hasta hace poco, los desarrolladores de HTML solo podían utilizar CSS y JavaScript para crear animaciones o efectos visuales para sus sitios web, o tenían que recurrir a complementos como Flash.

Sin embargo, esta situación ha cambiado con la incorporación de tecnologías como el elemento canvas, la especificación WebGL y las imágenes SVG. De hecho, hay muchas funciones nuevas que permiten crear gráficos en la Web: Canvas 2D, WebGL, SVG, las transformaciones 3D de CSS y ​​el estándar SMIL.

Novedades

The Future is Now!

Es obvio que ninguna de estas nuevas tecnologías sería útil si no pudiera ejecutarse con rapidez. Afortunadamente, los motores de JavaScript actuales son lo suficientemente rápidos como para ejecutar juegos 3D y manipular vídeos en tiempo real. La composición acelerada por hardware también se está implementando en muchos navegadores, lo que significa que incluso las transformaciones y transiciones con CSS serán pan comido.

Los desarrolladores ya están utilizando estas funciones, por lo que cada vez hay más gráficos en HTML, que abarcan desde implementaciones de antiguos algoritmos de gráficos 2D hasta técnicas completamente nuevas desarrolladas expresamente para la Web actual.

Compatibilidad con el navegador

Los “gráficos“ abarcan tantas cosas que se está trabajando en varias especificaciones relacionadas con ellos. En una demostración de gráficos completa, se pueden utilizar algunos de los siguientes elementos:

Click each specification to see its support status on caniuse.com. Chrome-specific details can be found on the Chrome Platform Status.

Demostraciones

En estado puro

An interactive film by Chris Black
3 Dreams of Black
Online music video from the Arcade Fire
The Wilderness Downtown
Online drawing application
deviantART muro
SVG support via svgweb
Wikipedia

Recursos

  • svgweb Compatibilidad con SVG en todos los navegadores
  • Adobe Illustrator HTML5 pack Compatibilidad con SVG, CSS y Canvas para Illustrator
  • Raphaël Biblioteca de animación que envuelve SVG
  • cakejs Biblioteca de escenas gráficas de JavaScript para el elemento canvas
  • Processing.js Migración del lenguaje de secuencias de comandos de animación de procesamiento a JavaScript (utiliza canvas)
  • three.js Motor 3D ligero que utiliza canvas, SVG y WebGL
  • GPU Accelerated Compositing in Chrome Información previa y detallada sobre la implementación de la composición acelerada por hardware en Chrome