Diseño Web, Registro de dominio y Hospedaje Web

lunes, 9 de mayo de 2011

10 fascinantes experimentos en JavaScript y HTML5 para hacer en tu navegador

Chrome Experiments, a pesar del nombre, es un sitio dedicado a la difusión de experimentos con tecnologías de punta para navegadores web. Fue lanzado hace unos 18 meses bajo el auspicio de Google, quien recién celebró la llegada del experimento número 100. Por supuesto, JavaScript y HTML5, son las tecnologías más relevantes usadas en el sitio para poner a prueba tu(s) navegador(es). Bueno, pues aquí presento una pequeña selección de 10 experimentos que consideré interesantes, creativos y divertidos. Por cierto, muchos de ellos funcionan mejor con Chrome y Opera; ya hemos hablado un poco de esto.
Da clic en los títulos para lanzar el experimento.

1. Google Gravity

  • Descripción: Mira cómo todos los elementos de la legendaria página principal de Google comienzan a caer y rebotar hasta el fondo de tu pantalla, acelerados por una fuerza (virtual) gravitacional.
  • Tecnologías utilizadas: JavaScript (box2d-js)

2. Destructive Video

  • Descripción: Reproduce Big Buck Bunny con HTML5 y luego despedaza a clicazos el vídeo. Verás con agrado cómo éste vuelve a la normalidad.
  • Tecnologías utilizadas: JavaScript y HTML5 (elementos video y canvas; en especial, la llamada a la funciónCanvas.drawImage())

3. Canopy

  • Descripción: Es un navegador de fractales. Cada clic te hace ir más rápido. Sigue con atención las instrucciones. Se difruta más si seleccionas “mutate” y “bloom” mientras mantienes presionado el botón izquierdo del mouse.
  • Tecnologías utilizadas: JavaScript (JQuery) y HTML5 (canvas)

4. Smalltalk

  • Descripción: Una herramienta que recoge estatus de Twitter —-el pequeño gran diálogo—- para conformar un mapa del clima y su efecto en nuestras vidas. Una herramienta Social Weather.
  • Tecnologías utilizadas: Twitter API, Google Maps, JavaScript (JQuery) y HTML5 (canvas)

5. Social Collider

  • Descripción: Revela conexiones cruzadas entre conversaciones (¿memes?) en Twitter, de forma temporal y lateral a través de muchos contextos. En el ejemplo muestro las conversaciones relacionadas con el oráculo mundial en turno: el Pulpo Paul.
  • Tecnologías utilizadas: Twitter API, Google Maps, JavaScript (JQuery) y HTML5 (canvas)

6. Ball Pool

  • Descripción: 1) Arrastra objetos, 2) Da clic en el fondo y 3) Agita tu navegador (éste es más espectacular). Da doble clic para iniciar un juego nuevo.
  • Tecnologías utilizadas: JavaScript (box2d-js) y HTML5 (canvas)

7. Browser Pong

  • Descripción: Es probable que Pong sea uno de los videojuegos más básicos y antiguos. Con Browser Pong no jugarásdentro del navegador, sino con él.
  • Tecnologías utilizadas: JavaScript (JQuery) y HTML5 (audio)

8. Harmony

  • Descripción: Una herramienta de dibujo mínima. Once pinceles poco convencionales y un lienzo. Sólo extrañé la combinación CTRL+Z para olvidar mis errores; como prueba de esto mira mi horrendo dibujo.
  • Tecnologías utilizadas: JavaScript y HTML5 (canvas)

9. TWITCH

  • Descripción: Varios juegos mínimos dentro de ventanas pequeñas. Cada ventana es una etapa interconectada con la siguiente. Fue uno de mis favoritos.
  • Tecnologías utilizadasProcessing.js y JavaScript

10. Liquid Particles

  • Descripción: La interfaz es tu mouse. Da clic y mueve el cursor; las partículas reaccionarán en un ciclo de atracción-repulsión. Es sencillamente fascinante.
  • Tecnologías utilizadas: JavaScript y HTML5 (canvas)

No hay comentarios: