Google ha desarrollado un divertido juego que funciona por aceleración de hardware utilizando la tecnología WebGL (una implementación de OpenGL en los navegadores). WebGL forma parte del estándar HTML5 lo que significa que todos los navegadores que respeten la norma deberían poder ejecutar el juego sin complicaciones.

El juego es una especie del clásico pinball en la que es necesario llevar una esfera del punto A al punto B. El terreno está formado por mapas de calles de Google Maps en un cubo en 3 dimensiones. Al mover el cursor el cubo gira sobre su propio eje causando que la esfera se vea afectada por la gravedad. Es admirable el nivel de detalle de los mapas y el tiempo de respuesta del juego, bastante bueno para ser un juego dentro de un navegador web.

He probado el juego en Firefox y Google Chrome y funciona bastante fluido y sin problemas. Si te interesan otro tipo de juegos algo más comerciales en HTML5 (como Angry Birds) revisa la siguiente página.

Enlace: Play Map’s Cube

Canvas Rider

Este juego aprovecha al máximo el nuevo elemento canvas de HTML5, consiste en conducir una bicicleta a través de increíbles escenarios dibujados por los propios jugadores. En esencia es muy simple, pero entretenido y muestra el potencial de combinar HTML5 y Javascript.

TankWorld

Sus gráficos no son impresionantes, pero es un shooter 3D bastante interesante construido enteramente en HTML5 y Javascript. En el manejamos un pequeño tanque de guerra, con el objetivo de capturar la bandera mientras destruimos otros tanques con las diferentes armas disponibles.

Angry Birds

Uno de los juegos más populares de los últimos tiempos y su mecánica de juego es prácticamente conocida por todos. Disponible principalmente en plataformas móviles ahora por fin hace su aparición en equipos tradicionales a través de HTML5. El juego se realizó para ser presentado en la inauguración de la tienda de aplicaciones Chrome Web Store y fue desarrollado para funcionar en el navegador Google Chrome, aunque en otros navegadores también funciona sin mayores problemas.

Cut the rope

Uno de mis juegos favoritos de todos los tiempos. Cut the rope apareció por primera vez para la plataforma iOS y su mecánica de juego hasta ahora había sido totalmente orientada a pantallas multitouch. El juego consiste en alimentar con un caramelo a un pequeño monstruo verde llamado om nom. Lo entretenido del juego es lograr que el caramelo llegue justo a la boca de om nom y para eso tendrás que romper cuerdas, romper bombas, etc. Mejor pruébenlo para que conozcan de primera mano la calidad de este juego. Este juego fue desarrollado basándose en Internet Explorer 9, pero no tendrán problemas con Chrome o Firefox.

Fieldrunners

Si te gustan los juegos tipo tower defense no te puedes perder Fieldrunners. Al igual que Cut the Rope este juego nació en plataformas móviles y de hecho fue uno de los primeros juegos exitosos en la tienda de aplicaciones de Apple. Ahora han hecho un port completo a HTML5 para que puedas probarlo a través de cualquier navegador web actual. Les advierto que es bastante adictivo, así que pruébenlo.

Chrono Trigger

Nah, siento tomarles el pelo pero oficialmente todavía no hay una implementación de Chrono Trigger en HTML5. El enlace los llevará a una demo del juego que realicé para los laboratorios de Panchosoft.com. El personaje (Frog) se puede mover a través de la pantalla con las teclas de desplazamiento del teclado. Fue interesante desarrollar este pequeño demo utilizando el elemento canvas de HTML5, más adelante presentaré un post técnico sobre el proceso de desarrollo.

Fuente: Bitelia

Desde luego todavía falta tiempo para que Flash pase al segundo lugar en el desarrollo de videojuegos en línea. Principalmente debido al tiempo en el que ambas tecnologías han existido, Flash tiene más de una década mientras que HTML5 solo tiene un par de años.

Existen numerosos hacks o desarrollos que utilizan Kinect para hacer cosas asombrosas utilizando la webcam con profundidad. Lo que hasta ahora a nadie se le había ocurrido es publicar una webcam utilizando como medio la tecnología WebGL de los navegadores web modernos. El autor utilizó WebGL para generar un ambiente 3D  «real» en lugar de enviar un simple video en 2D. Es posible interactuar con la escena al arrastrar el puntero del mouse. El stream en vivo está disponible en esta dirección, si en el momento que visitas la página no hay nada publicado entonces puedes ver el siguiente video demostrativo. El resultado es asombroso.

Fuente: Engadget

Hasta hace algunos años Flash era muy utilizado en sitios web para mostrar gráficas de barra o de pastel. Había cientos de plugins que hacían muy sencilla la labor de colocar estas gráficas para los desarrolladores web, además incluían animaciones que daban un mejor aspecto.

Si eres desarrollador (especialmente si eres desarrollador web) seguramente te interesará utilizar las últimas tecnologías disponibles y sobre todo utilizar los estándares. Así que para el caso de las gráficas, presento como referencia una librería de Javascript llamada HighCharts.

HighCharts te permite añadir gráficas animadas a tu sitio web en una gran variedad de formatos. El plugin está hecho en Javascript por lo que es sumamente sencillo agregarlo a tu sitio web. La alimentación de información se hace a través del formato JSON.

Personalmente he utilizado esta librería en varios proyectos y siempre me ha dado excelentes resultados. Lo mejor de todo es que es compatible con cualquier navegador que soporte Javascript. Es decir, funciona con Windows, Linux, Mac, Android, iOS, Windows Phone, Firefox, Chrome, Safari, Internet Explorer, en una PC, en un Smartphone, en una Tablet, etc. Algo con lo que Flash no puede competir.

Librería: Highcharts
Demos: Highcharts Demos

Para un desarrollador web debe ser prioritario comenzar a conocer elestándar HTML5 ya que incluye novedades más que interesantes y al mismo tiempo elimina algunas características de HTML4 (como ejemplo las etiquetas <font>, <center> y <frame> entre otras). Por otro lado, sistemas operativos como el próximo Windows 8 ofrecerán soporte nativo para desarrollar aplicaciones utilizando este lenguaje de marcado.

Y ya hablando del tema, hace tiempo me encontré esta interesante «hoja de trucos» de HTML5 con la cuál es bastante sencillo conocer lo nuevo, lo que no cambia y lo que se ha eliminado de HTML4 en este nuevo estándar. Haciendo clic en la imagen pueden llegar a la imagen original y moverse a través de ella utilizando la función de arrastrar y soltar.

Leyenda de la imagen:

Espero les sea de utilidad, saludos.

Fuente: Woork
Imagen original en alta resolución: Flickr

Pues bien, para solucionar este último problema comienzan a aparecer alternativas como jPlayer, un reproductor de audio y video escrito en javascript que aprovecha las nuevas características multimedia de HTML5. El reproductor tiene un peso de tan solo 8Kb y es multiplaforma, multinavegador y además soporta múltiples codecs de audio y video. El diseño del reproductor se puede personalizar fácilmente utilizando estilos CSS. Les recomiendo encarecidamente visitar la sección de demostración de la página oficial del reproductor.

Los codecs de audio y video que jPlayer soporta son:

• HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
• Flash: mp3, mp4 (AAC/H.264)

Los sistemas operativos y navegadores soportados son los siguientes:

• Windows: Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9
• OSX: Safari, Firefox, Chrome, Opera
• iOS: Mobile Safari: iPad, iPhone, iPod Touch
• Android: Android 2.3

Para utilizarlo en tu sitio web tan solo es necesario enlazar la librería jQuery y enlazar el archivo javascript de jPlayer. Posteriormente se debe crear el código HTML en el cual se quiere mostrar el reproductor:

[cc lang=»html4strict»]

[/cc]

Agregamos las siguientes líneas de código javascript y vualá, tendrás un reproductor de audio o video en tu sitio web que funcionará con el estándar HTML5 cuando esté disponible y en su defecto utilizará Flash (de forma oculta al usuario final).

[cc lang=»javascript»]$(document).ready(function(){
$(«#jquery_jplayer_1»).jPlayer({
ready: function () {
$(this).jPlayer(«setMedia», {
m4a: «/media/mysound.mp4»,
oga: «/media/mysound.ogg»
});
},
swfPath: «/js»,
supplied: «m4a, oga»
});
});;[/cc]

Al ser jPlayer un proyecto de código abierto, me encontré con el siguiente fork del reproductor que incluye una interfaz personalizada con CSS3 y soporta gestos de arrastrar y soltar para avanzar o reproducir el audio. Hagan la prueba presionando el botón a continuación.

Si eres desarrollador web sin duda jPlayer te será de utilidad para tus proyectos.

Curiosamente esta demo tiene un mal desempeño en Google Chrome, funciona de forma regular en la última versión estable de Firefox y funciona bastante bien en Internet Explorer 9 beta (aunque al parecer el creador de este comic trabajó con este último navegador).

Increíble.

Si te gusta el desarrollo web te recomiendo particularmente que veas las diapositivas pues todas las aplicaciones web venideras utilizarán las mejoras que ahí se explican.

Para ver esta presentación correctamente es necesario utilizar un navegador basado en el motor WebKit (ej. Google Chrome y Safari). Haz click en la siguiente imagen o en el link para acceder:

http://apirocks.com/html5/html5.html

No tengo duda en que la nombrada «Web 2.0» parecerá un chiste cuando se compare con la web basada en HTML 5, practicamente las posibilidades se multiplicarán.

Saludos.