15 sitios que hacen cosas increíbles con HTML5

Anuncio

El próximo HTML5 10 sitios web para ver de qué se trata HTML5 Lee mas La actualización del lenguaje de marcado de hipertexto de 20 años promete llevar la experiencia "web" a un nivel completamente nuevo, permitiendo al navegador hacer más desde una perspectiva visual y de datos. Aunque HTML5 todavía está a una buena distancia de estar completamente implementado, eso no ha impedido que muchos desarrolladores lo lleven al límite.

Echa un vistazo a estos sitios web increíbles que realmente te dan una buena idea sobre las capacidades de HTML5 como lenguaje de programación, hacer cosas en su navegador web que antes solo eran posibles en un programa externo o enchufar. Los probé en Chrome y todos deberían funcionar en un navegador compatible con HTML5 como Chrome, Firefox 4, Safari o IE9. Son demos y HTML5 sigue siendo un trabajo en progreso, por lo que si tiene problemas para verlos, puede probar en otro navegador. ¡Disfrutar!

Esta es una gran demostración realizada por Arcade Fire y Google que presenta diferentes trucos de HTML5 Canvas. No quiero arruinarte la sorpresa: ingresa la dirección de tu infancia y disfruta del video y la magia técnica.

WebVenture es una implementación HTML5 y Javascript de la plataforma de juegos MacVenture. ¡Ahora puedes jugar Deja Vu 1 y 2, Shadowgate y Uninvited directamente en tu navegador! Otras implementaciones de juegos como Wolfenstein 3D se está trabajando para llevar los juegos a su navegador.

Este sitio de Google muestra un enfoque estilo "libro" para una descripción sobre cómo funcionan los navegadores web y cuántas de las tecnologías subyacentes funcionan. Impresionante desde un punto de vista técnico, también es una buena introducción para los lectores que deseen saber más sobre cómo funciona la web.

Dibujo colaborativo

Esta demostración utiliza el HTML5 websockets característica para permitir a los espectadores colaborar, al mismo tiempo, dibujar en el lienzo.

SketchPad es un programa de "pintura" para la web. Admite instrumentos de dibujo rudimentarios y solo se realiza en HTML5 y JavaScript.

Galactic Plunder es un 2D Space Shooter implementado en HTML5. No es tan completo como un tirador de desplazamiento lateral normal, está hecho completamente en HTML5, lo cual es impresionante en sí mismo.

HTML5 te permite hacer mucho con videos en la web. Además de permitirte reproducirlo sin tu navegador web, sin plugin, te permite manipular ese video. Esta demostración muestra cómo puede "Volar" los píxeles de un video mientras se reproduce.

Bola de ventana múltiple

Esto demuestra y el efecto también se ve en el video Arcade Fire. HTML5 le permite abrir varias ventanas y hacer que los objetos se muevan entre ellas.

HTML5 Rocks es una presentación de diapositivas que muestra muchas de las características especiales del lenguaje HTML5. Si eres desarrollador, te proporciona un código de muestra y te permite ver las posibilidades de HTML5.

Si eras jugador a principios de los 90, recordarás este efecto con cariño. Como el poder computacional era limitado, los diseñadores gráficos usaron "trucos" para emular el video en una imagen estática. Este efecto de lienzo le mostrará cómo se hizo y también incluye muchos ejemplos que también son hermosos.

Experimentos HTML5 de Hakim.se [Ya no está disponible]

Este sitio enumera muchas demostraciones de juegos y otros pequeños gadgets para mostrar lo que puede hacer con HTML5. Bueno para la inspiración y tal vez un poco de diversión.

Harmony es un pequeño programa de dibujo que te permite usar pinceles geniales para pintar una imagen. Puede crear cosas como "piel" y "web" que son geniales para ver en la creación.

Este aseado mashup de @ 9elementos pone música y puntos giratorios con publicaciones de Twitter sobre HTML5. ¡Difícil de describir en la práctica, hay que verlo para entenderlo!

Radiohead / HTML5 Mashup

Otro mashup ordenado que enfrenta a Radiohead Idiota con un dibujo de Thom Yorke que se dibuja a medida que avanza la canción. Otro efecto de "visto para creer".

¿Quieren más?

Estos dos sitios web están configurados para ofrecer a las vistas una amplia variedad de demostraciones de HTML5 y los efectos HTML5 Canvas. Desde lo mundano a lo “genial”, si tienes sed de más, estos son los lugares a donde ir.

Ahora hay muchas demostraciones de HTML5 en Internet, y está en camino de convertirse en el nuevo estándar de la web. ¿Tienes demostraciones increíbles que te gustaría compartir? ¡Por favor publique en los comentarios a continuación!