Etiqueta: JavaScript

Videojuegos en HTML5 con CSS y JavaScript

Siguiendo con la serie de desarrollo de videojuegos para la web, tras haber probado la API de Canvas 2D (si te interesa puede ver el post sobre experimiento de visualización o el de motor videojuego con Canvas 2D), y antes de dar el salto a WebGL (la mayoría de motores de videojuego en JavaScript utilizan WebGL para el renderizado) quería probar el rendimiento del navegador desarrollando un juego muy simple que manipulase el DOM para mostrar los gráficos.

(Si quieres ir al juego directamente puedes hacerlo clicando aquí 🎾.
O clica aquí para investigar el código fuente.)

DOM (Document Object Model) representa una página web como un árbol, dónde los elementos de la página son nodos. A este representación se puede acceder y manipular con lenguajes de programación como JavaScript.

Sigue leyendo Videojuegos en HTML5 con CSS y JavaScript

Experimentos con la Web Audio API de JavaScript

La Web Audio API es una interfaz que nos permite generar y modificar flujos de audio. Vamos, crear sonido con JavaScript desde el navegador (o incluso música si eres un virtuoso).

Esta tecnología lleva bastante tiempo disponible (el primer borrador de la W3C data de 2011), y desde 2014 su soporte está incluído en la mayoría de navegadores web. Varias librerías JavaScript demuestran el potencial de esta API, tales como Tone.js o howler.js, y hay web apps que hacen un uso impresionante del sonido sintetizado: véase Plink o Euphony.

Para empezar a trabajar con la Web Audio API hay primero que entender como funciona: toda operación para manipular sonido se realiza dentro de un contexto sonido, el cual está diseñado como un sistema de nodos interconectados que transforman uno o varios flujos de sonido. Desde un nodo origen se conectan cualquier número de nodos de audio que procesan el flujo de audio hasta que finalmente se conecta a un nodo de destino. El flujo de audio pasa por todos estos nodos donde es procesado, hasta terminar en el nodo de destino que puede representar la salida por los altavoces o que se guarde en un archivo. Este conjunto de nodos enlazados se conoce como audio routing graph.

Sigue leyendo Experimentos con la Web Audio API de JavaScript

JavaScript Experiments: Desarrollando un motor de videojuego

Continuando con los experimentos con tecnologías web, y después de haber jugado un poco con Canvas 2D, toca el turno a investigar cómo construir un motor de videojuego en HTML5 y JavaScript.

Hace tiempo que había experimentado con la idea, desarrollando un concepto en Flash ActionScript 3 (si tienes el plugin de Flash instalado puedes jugar aquí hasta finales de 2020), y ahora que los navegadores están más que preparados para ser una plataforma de videojuegos (y lo demuestra la gran cantidad de motores HTML5 u juegos que hay disponibles) me decidí a programar el mío propio; no con afán comercial, si no por el placer del aprendizaje.

Sigue leyendo JavaScript Experiments: Desarrollando un motor de videojuego

Ajax, Internet Explorer y la caché

Si desarrollas sitios web, en algún momento de tu vida te has enfrentado a problemas derivados de la compatibilidad entre navegadores. Y si tuviera que preguntar por el navegador más problematico, sin duda la respuesta sería unánime: Internet Explorer. Cuándo creemos que con la siguiente versión del navegador de Microsoft olvidaremos todas las miserias que hemos sufrido con él, nos sorprende con nuevos obstáculos.

El último problema que me he encontrado con Internet Explorer no es nuevo, pero merece la pena mencionarlo. Por lo menos está presente desde la versión 8, y está relacionado en cómo cachea las peticiones Ajax con el método GET.

Sigue leyendo Ajax, Internet Explorer y la caché

Compartir en redes sociales y medir con Google Analytics

¿Gestionas las estadísticas de visitas de un sitio web con Google Analytics, y quieres medir la efectividad de los botones para compartir en redes sociales?

El código de seguimiento JavaScript de Google Analytics (Tracking Code, que carga en la página el archivo externo ga.js con todas las funcionalidades), dispone de una API en la que consta un método que permite este tipo de medición, el método _trackSocial(). Con él se pueden registrar las interacciones “sociales” de nuestro sitio y categorizarlas correctamente.

_gaq.push(['_trackSocial',  'theSocialNetwork', 'like', 'http://www.mysite.com/abc']);

El botón de Google+ invoca automáticamente éste método al ser activado y envía la información a nuestra cuenta de Google Analytics; pero si queremos medir las acciones de otras plataformas como Facebook o Twitter, entonces se requiere un poco más de trabajo e integración con las APIs de esos servicios. Sigue leyendo Compartir en redes sociales y medir con Google Analytics