Ads 468x60px

Perfil

sábado, 23 de febrero de 2013

8 juegos geniales desarrollados en HTML5


En el mercado de los juegos a través del navegador, Flash mantiene un amplio dominio, sin embargo, con la llegada de HTML5 se abre una nueva ventana, desde la que se ve un futuro prometedor para esta forma de generar entretenimiento.
Aunque aún le falta mucho camino por recorrer, HTML5 tiene a su favor, entre muchas otras, tres ventajas importantes que sin duda alguna lo perfilan como lamejor alternativa para desarrollar juegos de navegador en los años venideros.
  • Es un estándar abierto y gratuito, por lo que está al alcance de cualquiera. A diferencia de Flash, los desarolladores ya no tendrán que pagar por software exclusivo y costoso para poder crear juegos.
  • No requiere instalar complementos, es soportado por la mayoría de navegadores modernos independientemente del sistema operativo, por lo cual es posible disfrutar de los juegos desarrollados en HTML5 casi en cualquier plataforma.
  • Cuenta con el apoyo de los más grandes del mundo tecnológico. Google, Microsoft y Apple han manifestado su total respaldo a HTML5.
Otra característica importante de HTML5 es que puede combinarse fácilmente con otras tecnologías para sacarle mayor provecho, tal es el caso de Javascript, lenguaje en el cual se han escrito varios frameworks con clases exclusivas para video juegos, útiles para agregar características como detección de colisiones, animaciones multicapa y acceso a la aceleración por hardware recientemente incorporada a algunos navegadores.
El número de juegos en HTML5 disponibles en el mercado actualmente no es muy grande, y aun hay mucho que mejorar en el apartado de rendimiento, consumo de CPU y memoria, sin embargo algunos de los que se han hecho hasta ahora son realmente buenos y sirven de anticipo de lo que podemos esperar en los próximos meses, pero ¿qué tal si le damos un vistazo a algunos de ellos?
  • Chain Reaction: Es un juego tan simple como adictivo, consta de una cuadricula donde rebotan en todas direcciones una cantidad determinada de pequeñas partículas circulares. El objetivo, como su nombre lo indica, es generar una reacción en la cual dichas partículas chocan entre ellas hasta desaparecer por completo.
  • Torus: Basado en Tetris, pero con una genial variación. En Torus, los bloques no se apilan en un plano frente a la pantalla, sino forman un cilindro, que a su vez podemos girar para buscar la mejor ubicación para nuestra siguiente jugada.
  • Entanglement: Este adictivo juego consiste en rotar piezas en forma de hexágono con diferentes patrones sobre ellas, con el objetivo de formar la linea de mayor longitud posible antes de que esta toque alguno de los extremos del tablero. Tiene una música muy relajante y podemos usar nuestra cuenta de Google para almacenar los puntajes que obtengamos.
  • 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 para dispositivos móviles, también está disponible en HTML5 para disfrutar desde el navegador. Este port fue desarrollado con la intensión de demostrar el soporte de Google Chrome para este lenguaje.
  • Cut the Rope: Como lo hiciera Google con el Angry Birds para Chrome, Microsoft ha querido hacer su propia demostración para Internet Explorer 9. Para quienes no lo conocen, Cut the Rope es un juego bastante popular en plataformas móviles como iPhone y Android, que tiene por protagonista un pequeño monstruo verde llamado Om Nom, al que debemos alimentar con un caramelo tras cortar cuerdas para liberarlo, además de estallar algunas burbujas, capturar estrellas y otros divertidos retos que van apareciendo a medida que avanzamos de nivel. Se puede probar desde cualquier navegador con soporte para HTML5, aunque en cierto punto nos pide que usemos IE9 para disfrutar de más niveles.
  • Fieldrunners: Debo confesar que es uno de mis favoritos, los gráficos son geniales y cuenta con varios modos de juego. El objetivo del juego es proteger una base militar usando torres que disparan diferentes tipos de munición, está muy bien logrado y garantiza muchas horas de entretenimiento. Aunque el juego es pago (lo que demuestra que también se gana dinero con juegos desarrollados en HTML5) podemos disfrutar de un nivel totalmente gratis.
También hay que destacar que los últimos doodles, como se le conoce a las versiones que Google saca de su logotipo para conmemorar fechas importantes, han sido posibles gracias a HTML5. Uno para destacar, es el doodle creado para celebrar los 30 años de Pac-Man con el que podemos jugar y disfrutar otro de los grandes clásicos.

6 librerías JavaScript útiles para desarrolladores


JavaScript es uno de los lenguajes de programación más usados de la actualidad, gracias a este, tenemos acceso a múltiples características que se ofrecen en los sitios web que visitamos regularmente y que hacen nuestra experiencia de navegación mucho más agradable, simple y entretenida.
Los navegadores que usamos a diario llevan integrados sus propios motores JavaScript, con el fin de aprovechar al máximo sus bondades y tratar de ofrecer al usuario, un mayor rendimiento en aplicaciones webque lo implementan de forma exhaustiva.
Interfaces de usuario, páginas web dinámicas, validación del lado del cliente, animación, frameworks para desarrollo de aplicaciones que requieren actualizar información en tiempo real y muchas cosas más, son posibles con este lenguaje.
Entre esas muchas cosas, existen pequeñas librerías creadas para cumplir objetivos muy específicos, que nos ayudarán a dotar nuestros proyectos de características muy interesantes, así que vale la pena que las tengas allí a la mano.
  • Moousture: Una librería que permite el uso de gestos del ratón en cualquier sitio web, es compatible con todos los navegadores modernos, incluidos los móviles. Para los que no lo tienen muy claro, un gesto de ratón, es un movimiento -obviamente del ratón o mouse- que al dibujar una trayectoria específica en la pantalla, genera un evento por parte de la aplicación, o en este caso, de la página web. En el propio sitio de Moousture se puede ver un ejemplo, si dibujas un circulo en sentido anti-horario sobre la página, se desplegará un menú.
  • Grafico: Esta librería nos permite generar y manipular varios tipos de gráficos, muy elegantes visualmente. Grafico es fácil de implementar, su API permite la configuración y personalización una gran cantidad de parámetros, lo que la convierte en una herramienta bastante flexible. La librería pone a nuestra disposición 10 tipos de gráficos, de barras, de area, de línea y barras horizontales son algunos de ellos.
  • PaintbrushJS: Especialmente útil y unas de mis favoritas. PaintbrushJS, permite manipular y procesar imágenes utilizando JavaScript y canvas. Es bastante liviana y fácil de usar, cuenta con 9 filtros distintos que se configuran de manera independiente. Los efectos logrados con esta librería son un tanto similares a los que podemos encontrar en aplicaciones como Instagram o picplz.
  • Selectivizr: Una librería que permite emular los selectores de CSS3 a través de pseudo-clases en versiones antiguas de Internet Explorer, específicamente IE6, IE7 e IE8. Basta con incluir el script en las páginas nuestro proyecto, ya que Selectivizr se encarga del "trabajo sucio". Ahora puedes decir adiós a muchos dolores de cabeza generados por estos viejos navegadores.
  • CanvasXpress: Muy similar a Grafico, pero mucho más poderosa. Si necesitas crear gráficos complejos en tu proyecto, esta es la elección correcta. CanvasXpress, además permite generar gráficos tridimensionales, que podemos rotar libremente para una mejor perspectiva. Sin duda una increíble librería para tener en favoritos.
  • Typeface.js: Con esta librería podemos añadir cualquier tipo de fuente a nuestras páginas web, sin necesidad de renderizar imágenes. Es muy fácil de usar, pero no se encuentra totalmente optimizada, por lo que es mejor usarla con cuidado y leer la documentación.
La cantidad de librerías JavaScript disponibles en la red son casi infinitas, algunas más complejas y otras más simples, pero sin duda, todas resultan de gran ayuda a la hora de desarrollar. Espero que estas sean de gran utilidad para todos ustedes y si desean compartir alguna otra, no duden hacerlo en los comentarios, son todas bienvenidas.

5 herramientas para simplificar el desarrollo en HTML5


A pesar de que el W3C -World Wide Web Consortium- y WHATWG -Web Hypertext Application Technology Working Group - aún se encuentran trabajando en él, HTML5, con sus nuevas y magnificas características, está revolucionando la forma en que se desarrolla para la web.
Es una realidad que, a la fecha, no todos los navegadores soportan todas las características del estándar -aunque hay que reconocer que se esfuerzan mucho para mejorar la compatibilidad con cada versión- sin embargo, desarrollar hoy día en HTML5 trae muchos beneficios, sobre todo de cara al futuro.
Para el día de hoy, se encuentran disponibles una gran variedad de herramientas para simplificar el desarrollo en HTML5, útiles tanto para los más expertos como para los que apenas se inician. Personalmente encuentro muy atractivas estas 5 que compartiré con ustedes a continuación:

Initializr

Initializr es un generador de plantillas basado en HTML5 Boilerplate que nos permite generar rápidamenteuna base para comenzar a desarrollar nuestro proyecto, lista para usar y muy fácil de personalizar.
Tenemos la posibilidad de escoger entre 3 "sabores" diferentes para la plantilla: HTML5 Boilerplate Clásico, Responsive y Bootstrap, cada una lista para funcionar de acuerdo a nuestra elección. Una vez que hayamos pre-configurado nuestra plantilla, hacemos clic en "Download it!", y automáticamente se descargaran todos lo archivos (con su estructura de directorios bien definida) necesarios para comenzar a desarrollar. La herramienta también cuenta con buena documentación en español.

HTML 5 Demos

HTML 5 Demos nos ofrece una pequeña, pero valiosa lista de ejemplos que aprovechan las bondades de HTML5, llena de funciones interesantes que podemos reutilizar en nuestros proyectos.
Los ejemplos, además del código fuente, nos muestran los navegadores compatibles y las tecnologías específicas que utilizan para poder funcionar. Para los que realmente desean aprender HTML5 será muy fácil quedarse enganchados analizando todos y cada uno de los magníficos ejemplos disponibles.

HTML 5 Visual Cheat Sheet

HTML 5 Visual Cheat Sheet pone a nuestra disposición la lista completa de etiquetas HTML 4.01 y HTML5, cada una con sus respectivos atributos.
En la hoja se diferencian de manera clara las etiquetas que funcionan en ambas versiones del estándar, las que no son compatibles con HTML5 y por supuesto las que se agregaron de manera reciente y que hacen a HTML5 tan poderoso.
Aunque los enlaces directos a los JPG y PDF están rotos, podemos descargar la imagen directamente desde Flickr. Aunque fue publicada originalmente hace casi 3 años, no deja de estar vigente.

SwitchToHTML5

El objetivo de SwitchToHTML5 es muy similar al de Initializr, es decir, crear de manera rápida una plantilla con la estructura básica en HTML5 que nos permita comenzar a desarrollar con una base predefinida, aunque su funcionamiento es mucho más simple y genérico.
Para generar nuestra plantilla, solo debemos seleccionar de la lista los elementos que vamos a utilizar y finalmente hacer clic en "Generate HTML5 Framework". En menos de un minuto estaremos desarrollando a plenitud.

HTML5 Reset

HTML5 Reset nos ofrece, entre otras cosas, la posibilidad de tener una plantilla para comenzar a desarrollartemas para WordPress con soporte HTML5. La gran ventaja de esta herramienta es que solo contiene lo que realmente necesitamos para iniciar, sin complicarnos con basura innecesaria.