Catorce experimentos con HTML 5 que te dejarán boquiabierto
Descubre algunas de las posibilidades de creación proporcionadas por este lenguaje que reúne todas las condiciones para destronar a Flash de Adobe.
En los últimos meses, HTML5 ha venido destacándose por conquistar cada vez más un espacio que hasta el momento parecía exclusivo de las aplicaciones en Flash. A pesar de que el software de Adobe continúe siendo usado por una gran cantidad de sitios, la falta de soporte para la tecnología en productos Apple y futuramente también en Windows 8 , provoca algunas dudas con respecto a su futuro.
Es fácil de entender los motivos por los cuales HTML5 gana cada vez más espacio y conquista la preferencia de los fabricantes. Por no necesitar ningún tipo de plugin, la tecnología permite introducir videos, juegos y contenidos interactivos en sitios de una forma más simple para el desarrollador y más confortable para el usuario.
Para tornar el proceso de desarrollo más simple, el lenguaje utiliza tags objetivas que no usan códigos complicados para el desarrollo de sitios más interesantes. En este artículo presentamos algunos ejemplos de lo que se puede hacer con esta tecnología que debe cambiar sustancialmente las páginas de internet en los próximos años.
The Wilderness Downtown
En esta dirección , solo tienes que digitar el nombre de una ciudad para transformarla en una pieza importante dentro de un videoclip. Para dejar el resultado mucho más elegante, son abiertas varias pestañas con un tamaño variable en el navegador, cada una mostrando un ángulo diferente de la acción.
Para obtener un video con más elementos es indispensable escoger una localización que esté retratada en el servicio Google Street View. Después de ver el resultado final, es posible compartirlo con amigos a través de sitios como Facebook y Twitter.
Flower Power
Siendo un excelente ejemplo de interactividad, FlowerPower es un sitio que le permite a los usuarios escribir o dibujar cualquier cosa usando flores de se abren con un simple clic del mouse.
Controladores en la parte superior de la pantalla permiten alterar el tamaño de la escritura e incluso la velocidad en que surgen las flores. El resultado es solamente una muestra de lo que HTML5 puede ofrecer sin interferir en ningún momento en el desempeño de un navegador.
WebGL Water Simulation
Recomendado solamente para quien tiene una tarjeta de video un poco más moderna, el WebGL Water Simulation es un bello ejemplo de la capacidad 3D del HTML 5. Este experimento muestra una interacción con el agua extremamente realista, incluyendo una fuente de luz que se adapta a la posición de cada elemento y al ángulo de visualización escogido por el usuario.
ROME
Un sorprendente videoclip interactivo que mezcla filmaciones con actores reales, animación en 3D y dibujos tradicionales, ROME guía al usuario en un viaje irreal en el que nada es lo que parece ser.
La interacción con los elementos presentes en la pantalla es a través del puntero del mouse, que puede ser usado para cambiar el ángulo de la cámara, revelando detalles que generalmente pasarían desapercibidos. Además, también pueden ocurrir transformaciones en elementos del escenario con resultados bastante coloridos e irreales. Para obtener un mejor desempeño, es imprescindible el uso del navegador Google Chrome .
Voxels
Una especie de LEGO virtual en el que es posible agregar una gran cantidad de piezas con los más diversos colores. Usando solamente el puntero del mouse el usuario puede cambiar rápidamente el ángulo de visión y cambiar el nivel de zoom de los elementos presentados en la pantalla.
Google Sphere
¿Qué tal si en vez de presentar los resultados de una búsqueda en forma de listas, Google aprovechara mejor el espacio en blanco disponible en su página inicial? Es justamente esto lo que hace Sphere , transformando cualquier búsqueda en una verdadera nube de tags interactiva.
Conductor
Diversas líneas se mueven de forma totalmente aleatoria por la pantalla y al cruzarse resultan en la reproducción de diferentes notas musicales. El usuario tiene la libertad de usar el puntero del mouse para interactuar con cualquier elemento de la pantalla, en una experiencia que impresiona por la creatividad.
Asteroids
Una recreación en tres dimensiones del juego clásico lanzado por Atari en 1979, esta versión de Asteroids presenta gráficos actualizados que funcionan directamente en el navegador, por lo que no necesita la instalación de ningún plugin, algo que lo hace ideal para pasar una tarde de aburrimiento.
Ball Pool
En esta bella experiencia con HTML5 , el usuario tiene a disposición pelotas de diversos tamaños que puede mover para todas las direcciones que desee por toda la pantalla. El proyecto se destaca por la física realista y por la interacción que posee con el navegador.
No dejes de probar acciones como hacer doble clic sobre un objeto, seleccionar el fondo de pantalla o literalmente sacudir el navegador para ver las pelotas saltando de un lado para otro en la pantalla. La experiencia es lo suficientemente interesante para justificar la pérdida de una buena cantidad de minutos delante de la computadora.
Magnetic
Aprende más sobre la forma en que actúan los imanes sobre partículas que están en el ambiente y entre sí mismos. Además de arrastrar los elementos de la pantalla, el usuario puede agregar nuevos imanes con tamaños variables usando un doble clic del mouse en cualquier logar del ambiente.
Z-Type
Prueba tu velocidad de digitación en este adictivo juego en el que tu objetivo es escribir lo más rápido posible las palabras que surgen en la pantalla. Cada letra correcta garantiza un tiro y es necesaria una buena habilidad en el teclado para derrotar los enemigos que surgen en las fases más avanzadas del título.
BreakDOM
En este remake del juego Breakout , el jugador utiliza una barra de desplazamiento para controlar una pelota que elimina varias cajas de selección. Los controles son simples y pueden ser efectuados tanto a través del mouse como por las flechas del teclado.
Trail
Realiza dibujos coloridos en la pantalla del navegador usando trazos que siguen los movimientos del puntero del mouse . Para expandir el rayo de los trazos que quedan girando de forma constante, basta dejar presionado el botón izquierdo del mouse.
Typographic Rain
Una verdadera lluvia de caracteres inundará tu navegador en este experimento que muestra como diferentes elementos de HTML 5 pueden interactuar entre sí. Cada una de las letras que caen en la pantalla está constituida por un código diferente que responde de forma realista a los demás elementos de la pantalla.
Además de contar con una especie de paraguas que bloquea determinados caracteres, el usuario puede alterar el tamaño de las letras, la frecuencia con que ellas caen e incluso el nivel de la gravedad presente en el ambiente.
Descubre algunas de las posibilidades de creación proporcionadas por este lenguaje que reúne todas las condiciones para destronar a Flash de Adobe.
En los últimos meses, HTML5 ha venido destacándose por conquistar cada vez más un espacio que hasta el momento parecía exclusivo de las aplicaciones en Flash. A pesar de que el software de Adobe continúe siendo usado por una gran cantidad de sitios, la falta de soporte para la tecnología en productos Apple y futuramente también en Windows 8 , provoca algunas dudas con respecto a su futuro.
Es fácil de entender los motivos por los cuales HTML5 gana cada vez más espacio y conquista la preferencia de los fabricantes. Por no necesitar ningún tipo de plugin, la tecnología permite introducir videos, juegos y contenidos interactivos en sitios de una forma más simple para el desarrollador y más confortable para el usuario.
Para tornar el proceso de desarrollo más simple, el lenguaje utiliza tags objetivas que no usan códigos complicados para el desarrollo de sitios más interesantes. En este artículo presentamos algunos ejemplos de lo que se puede hacer con esta tecnología que debe cambiar sustancialmente las páginas de internet en los próximos años.
The Wilderness Downtown
En esta dirección , solo tienes que digitar el nombre de una ciudad para transformarla en una pieza importante dentro de un videoclip. Para dejar el resultado mucho más elegante, son abiertas varias pestañas con un tamaño variable en el navegador, cada una mostrando un ángulo diferente de la acción.
Para obtener un video con más elementos es indispensable escoger una localización que esté retratada en el servicio Google Street View. Después de ver el resultado final, es posible compartirlo con amigos a través de sitios como Facebook y Twitter.
Flower Power
Siendo un excelente ejemplo de interactividad, FlowerPower es un sitio que le permite a los usuarios escribir o dibujar cualquier cosa usando flores de se abren con un simple clic del mouse.
Controladores en la parte superior de la pantalla permiten alterar el tamaño de la escritura e incluso la velocidad en que surgen las flores. El resultado es solamente una muestra de lo que HTML5 puede ofrecer sin interferir en ningún momento en el desempeño de un navegador.
WebGL Water Simulation
Recomendado solamente para quien tiene una tarjeta de video un poco más moderna, el WebGL Water Simulation es un bello ejemplo de la capacidad 3D del HTML 5. Este experimento muestra una interacción con el agua extremamente realista, incluyendo una fuente de luz que se adapta a la posición de cada elemento y al ángulo de visualización escogido por el usuario.
ROME
Un sorprendente videoclip interactivo que mezcla filmaciones con actores reales, animación en 3D y dibujos tradicionales, ROME guía al usuario en un viaje irreal en el que nada es lo que parece ser.
La interacción con los elementos presentes en la pantalla es a través del puntero del mouse, que puede ser usado para cambiar el ángulo de la cámara, revelando detalles que generalmente pasarían desapercibidos. Además, también pueden ocurrir transformaciones en elementos del escenario con resultados bastante coloridos e irreales. Para obtener un mejor desempeño, es imprescindible el uso del navegador Google Chrome .
Voxels
Una especie de LEGO virtual en el que es posible agregar una gran cantidad de piezas con los más diversos colores. Usando solamente el puntero del mouse el usuario puede cambiar rápidamente el ángulo de visión y cambiar el nivel de zoom de los elementos presentados en la pantalla.
Google Sphere
¿Qué tal si en vez de presentar los resultados de una búsqueda en forma de listas, Google aprovechara mejor el espacio en blanco disponible en su página inicial? Es justamente esto lo que hace Sphere , transformando cualquier búsqueda en una verdadera nube de tags interactiva.
Conductor
Diversas líneas se mueven de forma totalmente aleatoria por la pantalla y al cruzarse resultan en la reproducción de diferentes notas musicales. El usuario tiene la libertad de usar el puntero del mouse para interactuar con cualquier elemento de la pantalla, en una experiencia que impresiona por la creatividad.
Asteroids
Una recreación en tres dimensiones del juego clásico lanzado por Atari en 1979, esta versión de Asteroids presenta gráficos actualizados que funcionan directamente en el navegador, por lo que no necesita la instalación de ningún plugin, algo que lo hace ideal para pasar una tarde de aburrimiento.
Ball Pool
En esta bella experiencia con HTML5 , el usuario tiene a disposición pelotas de diversos tamaños que puede mover para todas las direcciones que desee por toda la pantalla. El proyecto se destaca por la física realista y por la interacción que posee con el navegador.
No dejes de probar acciones como hacer doble clic sobre un objeto, seleccionar el fondo de pantalla o literalmente sacudir el navegador para ver las pelotas saltando de un lado para otro en la pantalla. La experiencia es lo suficientemente interesante para justificar la pérdida de una buena cantidad de minutos delante de la computadora.
Magnetic
Aprende más sobre la forma en que actúan los imanes sobre partículas que están en el ambiente y entre sí mismos. Además de arrastrar los elementos de la pantalla, el usuario puede agregar nuevos imanes con tamaños variables usando un doble clic del mouse en cualquier logar del ambiente.
Z-Type
Prueba tu velocidad de digitación en este adictivo juego en el que tu objetivo es escribir lo más rápido posible las palabras que surgen en la pantalla. Cada letra correcta garantiza un tiro y es necesaria una buena habilidad en el teclado para derrotar los enemigos que surgen en las fases más avanzadas del título.
BreakDOM
En este remake del juego Breakout , el jugador utiliza una barra de desplazamiento para controlar una pelota que elimina varias cajas de selección. Los controles son simples y pueden ser efectuados tanto a través del mouse como por las flechas del teclado.
Trail
Realiza dibujos coloridos en la pantalla del navegador usando trazos que siguen los movimientos del puntero del mouse . Para expandir el rayo de los trazos que quedan girando de forma constante, basta dejar presionado el botón izquierdo del mouse.
Typographic Rain
Una verdadera lluvia de caracteres inundará tu navegador en este experimento que muestra como diferentes elementos de HTML 5 pueden interactuar entre sí. Cada una de las letras que caen en la pantalla está constituida por un código diferente que responde de forma realista a los demás elementos de la pantalla.
Además de contar con una especie de paraguas que bloquea determinados caracteres, el usuario puede alterar el tamaño de las letras, la frecuencia con que ellas caen e incluso el nivel de la gravedad presente en el ambiente.