Así que has escuchado todos los rumores sobre que HTML5 tomaría el lugar de Adobe Flash. Mientras que la mayoría de la comunidad web argumenta que es posible o no, debes estar preguntando qué hace que HTML5 sea tan poderoso que incluso la compañía gigante Apple quiere usarlo para reemplazar a Flash.
Por eso existe este post, no vamos a hablar de lo que HTML5 puede hacer, sino a mostrar demos en vivo de cosas mágicas que HTML5 puede lograr con otro lenguaje como JavaScript, así que prepárate para inspirarte.
Nota: Como HTML5 no es totalmente compatible con ciertos navegadores web como Internet Explorer, se recomienda encarecidamente utilizar el navegador Firefox para ver todas las demostraciones de HTML5 a continuación.
Animación
El elemento canvas de HTML5 es el factor decisivo para que HTML5 sustituya ciertas animaciones de Flash. Permite construir dinámicas y scripts de renderizado de formas 2D e imágenes de mapa de bits con Javascript, lo que por otro lado es, animación controlable.
Audioburst Animation
Una cómoda y fantástica animación creada con el canvas de HTML5 y la etiqueta de audio.
Ball Pool
Presentada en el último evento Google I/O, esta demo muestra lo dinámico que puede ser HTML5.
Blob Sallad
Una criatura engendrada por HTML5 que te encantará.
Bomomo
Con Bomomo, puedes observar diferentes movimientos atómicos simulados con HTML5.
Bola del navegador
Asómbrate con esta bola HTML5 ‘cross-browser’.
Burbujas
Diviértete creando un sinfín de burbujas flotantes con diferentes colores.
Canvas Cartoon Animation
Una sencilla y divertida caricatura HTML5 que te ayuda a entender lo que puede hacer el elemento canvas de HTML5.
Coolclock
Un bonito y personalizable reloj analógico construido con HTML5 y JavaScript.
Flickr PS3 Slideshow
Visualiza tus fotos de Flickr con slideshow estilo PS3 en el navegador web.
Polaroid interactiva
Una demo interactiva que funciona de forma bastante similar a la interfaz multitáctil.
JS Fireworks
Disfruta del momento de los fuegos artificiales con la gravedad y velocidad que prefieras, impulsado por HTML5 y Javascript.
Calidoscopio
Un calidoscopio HTML5 muy bonito y futurista.
Partículas de Líquido
Animación de partículas sensibles que reaccionan según el movimiento del ratón.
Mesmerizer
Otra sensible y destacada demo HTML5 que muestra cómo reaccionan los elementos cercanos con el movimiento de tu ratón.
Nube de Nebulosas
Piérdete con esta maravillosa nebulosa HTML5.
Parallax
Ve todas las formas 2D en perspectiva paralela.
Animación de partículas
Una elegante animación de partículas HTML5 que puede formar en su mensaje preferido.
Spread
Piérdete con esta interminable animación de spread.
Campo de estrellas
Una animación de campo de estrellas HTML5 muy chula que cambiaría de dirección y velocidad según el movimiento del ratón.
Destrucción de vídeos
Un solo clic para hacer estallar un vídeo en reproducción.
Forma de onda
Observa cómo se mueve la onda del lienzo de HTML5 alterando su amplitud, longitud de onda, anchura, etc.
Efecto 3D
¿Presionado por la animación del lienzo? Eso es más el elemento canvas de HTML5 puede hacer, y se llama efecto 3D. El desarrollador puede basarse en el elemento canvas, el DOM y JavaScript para crear un efecto 3D, que más tarde puede desarrollarse en una animación 3D o en un juego.
Canvas3D y Flickr
Tenga una experiencia 3D totalmente nueva con el photostream de Flickr.
Simulación de telas
Una simulación de telas realista basada en HTML5.
Monstruo que evoluciona
Observa cómo un monstruo evoluciona hasta convertirse en una complicada criatura, uno de sus creadores es HTML5.
Google Giftbox
El gigantesco motor de búsqueda Google se presenta en 3D, en una vista jugable.
JS Touch
Un escaparate de alta calidad y realismo ‘3D en 2D Canvas’.
Presentación de datos
Aunque el elemento canvas de HTML5 puede utilizarse para crear animaciones y efectos 3D, también puede implementarse para presentar datos matemáticos.
Gnuplot
Gnuplot, una aplicación de trazado de datos en versión HTML5.
RGraph
RGraph proporciona una amplia gama de presentación de datos como gráfico de barras, barra de progreso y gráfico de radar tradicional.
Aplicación Web
Por último, utilizando todas las posibilidades combinadas por HTML5 y otros langauge, se puede crear una aplicación interactiva o un juego que está cerca de la aplicación Flash.
CanvasPaint
El hermano de Microsoft Paint entra en su navegador web, y su padre es HTML5.
CanvasMol
Una aplicación científica que te ayuda a entender la estructura de ciertos elementos de la tierra.
Cartoon Builder
Dibuja interesantes dibujos animados con este constructor de dibujos mínimo e interactivo.
Arrastra cualquier cosa aquí
Arrastra cualquier cosa que puedas arrastrar en la demo para mostrar los detalles.
Gartic Sketch
Una original aplicación HTML5 que permite realizar algunos dibujos básicos que se pueden guardar en diferentes formatos de imagen como jpeg o png.
PhysicSketch
Dibuja lo que quieras y ve cómo reaccionan con la gravedad simulada.
Sketchpad
Una potente aplicación de dibujo en HTML5 que te permite dibujar y editar tu imagen de forma precisa.
Smalltalk
Una aplicación web que confirma la posición geográfica de los mensajes relacionados con el tiempo adquiridos de Twitter, formándolos así en un mapa «social del tiempo» basado en un lienzo, bastante trivial (como dice el autor) pero interesante.
Juego
3Bored
Nunca te aburrirás si puedes seguir evadiendo cientos de balas de HTML5 en el siguiente segundo.
Breakout
Rebotar la bola para romper todos los ladrillos.
Canvascape
No es exactamente un juego, pero demuestra cómo se puede utilizar HTML5 para desarrollar un juego de navegador de disparos en primera persona.
Atrápalo
¿Cuántas bolas puedes esquivar para conseguir tu casilla ganadora en HTML5?
Cadena de Reacción
Cadena de explosión para conseguir el objetivo, no te vuelvas adicto.
Cubeout
Juega al Tetris en 3D, vista de arriba abajo.
etchaPhysics
Dibuja elementos para mover la bola hasta la estrella, no te olvides de la gravedad.
Jigsaw Puzzle
Haz clic, gira y suelta las piezas del puzzle para resolver este rompecabezas basado en HTML5.
Slide Puzzle
Deslízate hacia la victoria, otro juego HTML5 que está hecho para exprimir el jugo de tu mente.
Same Game
Quita cierto grupo para conseguir otro grupo emparejado del mismo color y al final conseguirás la victoria.
Tetris
Uno de los juegos más clásicos que vuelve a la vida gracias a HTML5.
Torus
Otro juego de Tetris en versión pseudo-3D.
Conclusión
¿Cuál es la limitación de HTML5? En este momento no podemos decidirlo, pero con el impresionante vídeo de abajo podemos saber hasta dónde ha llegado el HTML5:
Sí, es Quake II en el navegador web, así que ahora está muy claro que con HTML5 nacerían más aplicaciones web rompedoras al servicio de miles de millones de internautas. Es rápido, está evolucionando y está cambiando la red mundial. La pregunta es, ¿cómo usarías este HTML5 que cambia el juego?
Nos gustaría escuchar tu idea!