HTML5

Remake de Super Mario Bros en HTML5 + Javascript



La combinación HTML5 + Javascript se ha convertido en una mezcla explosiva, la cual nos permite traer a nuestro navegador cosas impensables años atrás. Hemos visto como se ha portado juegos e incluso demos gráficas.

En esta entrada os enlazamos a un repositorio de Github donde podemos encontrar el juego de Super Mario Bros escrito totalmente en HTML5 y Javasctript.

El código fuente está bastante comentado, en caso de que te pique la curiosidad y quieras aprender algo del mismo. Y si lo que quieres es echar una partida, puedes ir a www.fullscreenmario.com (requiere Google Chrome, con Firefox no me funcionó y el resto de navegadores no los he probado). Si el sitio no funciona como me pasó a mi, puedes bajarte el fichero .zip con todo el contenido, y desde tu navegador, carga el fichero mario.html.

Animaciones espectaculares usando HTML5 y CSS3



Animación F1, click para verla

HTML5 y CSS3

Hombre corriendo en 3D

3D Bricks

Cubes

Cara humana en HTML5

Agua

y muchas más que puedes ver en este enlace.

Realmente increíbles.

Aprende HTML5, CSS3 y Javascript... mirando



Para mi la mejor forma de aprender es ponerse manos a la obra y hacer por uno mismo lo que tengamos que hacer. Pero antes de poder ponernos a hacer nada, por lo menos en temas de programación, uno tiene que leer un poco antes o por lo menos ver como otros desarrollan una tarea parecida a la nuestra.

Desde mi punto de vista el leer sobre como funciona la plataforma o tecnología sobre la que vamos a trabajar es fundamental, pero también ayuda ver algún ejemplo.

Clásicos de Atari jugables desde el navegador



Desde Atari Arcade, podemos jugar a 8 clásicos reescritos en HTML y Javascript, es decir, jugables desde el navegador (Chrome me dio problemas, pero con Firefox funcionan muy bien. Deduzco que IE también funciona bien, ni idea sobre el resto).

Los juegos disponibles son:

• Pong
• Asteroids
• Missile Command
• Super Breakout
• Lunar Lander
• Combat
• Centipede
• Yars’ Revenge

Pero lo mejor de todo no son los juegos en si (al menos para mi ;)), sino que Atari Arcade es además una plataforma de juegos, en la que puedes desplegar tus propios juegos. Para ello Atari pone a disposición un conjunto de librerías (javascript) y documentación donde nos explican como podemos crear nuestros propios juegos y desplegarlos en dicha plataforma.

Fuente

Historia de HTML5 (Infografía)



Fuente

Mario 5 escrito en Javascript, incluye código fuente



Son muchos los juegos y otras aplicaciones que se han portado al navegador creando estos en Javascript. Especialmente desde que se liberó HTML5 y CSS3. Estas dos tecnologías junto con la potencia infravalorada de Javascript se pueden hacer cosas muy interesantes.

En esta entrada nos van explicando paso a paso la creación de este Mario 5, con trozos de código, HTML y CSS y sus correspondientes explicaciones. Además si eres capaz de entender y seguir el artículo podrás incluso fácilmente extender este mismo juego.

Tutorial: como programar un juego tipo "breakout" en HTML5



(haz click para jugar)

Completo tutorial en inglés donde te explica paso a paso como crear un juego tipo Breakout (ladrillos), aquí tienes el enlace del juego final para probarlo. Es bastante sencillo pero es interesante para estudiarlo y aprender un poco más sobre la creación de programas en HTML5.

Parte 1: Introducción a Canvas.

Parte 2: Animación y entrada del teclado.

Parte 3: Colisiones, puntuación y sonido.

Autor, Aditya Ravi Shankar.

Descargando la Wikipedia (en inglés) con una aplicación en HTML5



(Imágen vista aquí)

Si por cualquier motivo necesitas la Wikipedia sin conexión a Internet, en esta web puedes descargarla. La versión pequeña ocupa 14MB y la grande 1GB. Además, en la web tienes un índice para buscar el artículo que quieras para luego bajarlo (más información en la web original)

Visto en HackerNews.

Convierte Flash a HTML5



Esta es otra pequeña joya de Google llamada Google Swiffy. Este proyecto de Google Labs nos permite convertir ficheros SWF (Flash) en código HTML5. Dicha conversión la hace usando SVG, que actualmente sólo es soportado por navegadores basados en Webkit, como son Safari y Chrome. Por lo tanto para poder ver el resultado de la conversión necesitarás uno de estos 2 navegadores.

Para convertir una fichero SWF sólo tienes que visitar Google Swiffy y subir el fichero en cuestión y luego incrustar el código generado en tu web dentro de un <iframe>. Eso es todo.

Pirates ♥ Daisies: el mejor juego en HTML5



Sin necesidad de plugin, java, etc y jugable bajo las plataformas Chrome 6+, Firefox 3.6+, Safari 5+, Opera 11, IExplorer 9 beta. La gente de Conceivably Tech dice que es el mejor juego en HTML5, segun pruebas de rendimiento, fluidez en equipos con pocos recursos, jugabilidad, calidad de sus gráficos y sonidos y su interfaz.

Jugar: Pirates ♥ Daisies

Link

Plantilla de seguridad para HTML5



En este enlace podéis encontrar una amplia lista de trucos, o chuleta, o como quieras llamarlo sobre seguridad para el nuevo estándar HTML5.

Cada apunte está acompañado de un pequeña descripción del vector de ataque, sintaxis/ejemplo de la etiqueta/atributo en cuestión y como podemos mitigar dicha amenaza.

También nos indica que navegador está expuesto a dicho ataque.

Very handy!

Concurso Sprite Animation Contest de Informatica64

 

Nuestros amigos de Informatica64 nos ofrecen la oportunidad de ganar una consola Xbox (hay tres, una para cada categoría) en el concurso Sprite Animation Contest y además aprender algo del nuevo HTML5 e Internet Explorer 9.

El objetivo es crear una animación en HTML5 de 3 minutos de duración donde tienes que enseñar de la manera más original posible las novedades del nuevo Windows Live Mail. En el pasado BlogCamp donde lo pasamos genial, también tuvimos oportunidad de hacer nuestros pinitos con HTML5. Además nos lo ponen fácil, el motor ya nos lo ofrecen así que sólo tenemos que tener algunas nociones de cómo funciona para ponernos manos a la obra.

Emu8080, primer emulador de 8080 escrito en javascript



Emu8080, el primer emulador de 8080 escrito en javascript y HTML5, capaz de emular la disquetera, lector/escritor de tarjetas perforadas, impresora y un terminal VT100.

Emula una máquina CP/M completa. Aprovechando la tecnología que nos brinda el nuevo HTML5, usa WebSQL para emular dispositivos de almacenamiento de bloques, podemos montar dispositivos de cintas virtuales arrastrando  ficheros de nuestro escritorio, etc.

El hecho de use HTML5, requiere que usemos un navegador que soporte dicha especificación. Ellos recomiendan Chrome o Safari.

Programación de juegos en Javascript usando el elemento Canvas



Parece que el elemento canvas, introducido en el nuevo HTML5, está dando mucho que hablar por la potencia que puede añadir al desarrollo de páginas web.

Y cuando mezclas este elemento con un lenguaje tan potente como es javascript, sólo la imaginación puede ponerte barreras a la hora de ser creativos. Y si no me crees echa un vistazo a esta página.

Si lo que te gustan son los juegos y no sólo jugar, sino también crearlos, experimentar, etc. Aquí tienes un tutorial compuesto por las siguientes secciones:

Asegúr@IT: II Blog Camp con Informatica64 y Microsoft

Charla de Alejandro Martín sobre HTML5

Durante los días 24, 25 y 26 hemos estado invitados en Madrid a un evento bastante peculiar: campo, seguridad informática, cabañas y buenos bloggers... se puede pedir más?  Lejos de ser aburrido y de escuchar charlas eternas con la corbata apretando, la experiencia ha sido una de las mejores que hemos tenido en este tipo de actos. El secreto del éxito ha sido un cocktel de alta participación, juegos, cuatro XBOX de regalo y las presentaciones de maligno (elladodelmal.com).

Animaciones en HTML5

 

Estas escenas están creadas usando exclusivamente código HTML5 y ciclos de colores de 8-bit.

Para verlas, usa Google Chrome o el plugin para IE (Chrome Frame).

Visto en TheAwesomer.

Cliente VNC escrito en HTML5



noVNC es un cliente de VNC usando las nuevas características que nos ofrece la última versión de HTML. Especialmente aprovechando el Canvas y los WebSockets.

Sólo hay un pequeño problema y hasta que no aparezca algún servidor de VNC que soporte conexión vía WebSockets, será necesario el uso de un proxy de WebSockets a TCP Sockets. La buena noticia es que este proyecto incluye un proxy de este tipo llamado “wsproxy”.

Quake 2 escrito en Javascript y HTML5

Originalmente los autores de este proyecto escribieron una versión en Java llamada Jake2. Luego usaron GWT para convertir el código de Java a Javascript y con la ayuda de WebGL, el API del Canvas y algunas otras novedades del nuevo HTML5 han llegado a esta impresionante versión de Quake 2 jugable desde el propio navegador.

Esta es la web del proyecto, desde la que entre otras cosas te puedes descargar el código fuente.

Chuleta HTML5



Como bien sabéis, HTML5, el nuevo estándar de las páginas de hipertexto, viene muy cargado con un gran número de nuevas y potentes funcionalidades. Prueba de ello, es que gigantes como Mozilla o Google, están adoptando esta tecnología a pasos agigantados. De hecho, Google dejó de dar soporte a Google Gears en detrimento de este nuevo estándar y ya sabéis, Google es como el rey Midas, todo lo que toca lo convierte en oro. Así que ya sabéis, si eres desarrollador web, ponte las pilas y empieza a tomarte en serio la adopción de HTML5 en tus proyectos.