Spacius, juego hecho con Javascript

Anteriormente hablamos de un juego hecho en Javascript, el famoso Super Mario de la consola Nintendo fue recreado con Javascript y en tan solo 14KB. Ahora le sumamos este otro jueguito a la lista. Se trata de Spacius, un juego hecho también con JavaScript, que viene con todo (para el tiempo de la consola Nintendo) sonido de fondo, efectos, puntaje y mucha diversión.

Juego en JavaScript

Artículo relacionado

qUIpt: Caché de archivos JavaScript

qUIptqUIpt es una pequeña librería que guarda en caché archivos JavaScript, aunque SSL esté activado. qUIpt ayuda al propietario de un sitio web a reducir costes de tráfico, además sus visitantes podrán ver que las páginas web cargan más rápido.

Funciona mediante comprobar el contenido de window.name mientras la página está cargando. Si no hay contenido dentro de window.name, los archivos necesarios se descargan mediante XHR. Lo mismo sucede si un usuario entra por primera vez a nuestro sitio ó si document.referrer (el documento desde el que se ha llegado al documento actual pulsando un enlace) está fuera de nuestro dominio ó esta vacia.

La idea es buena pero en cuanto a seguridad es un poco cuestionable. Seguramente el desarrollador de esta utilidad tendrá en cuenta ello a futuro. 

Super Mario con JavaScript (en 14KB)

Seguramente se acuerdan ó han jugado Super Mario para consola Nintendo. Un juego realmente entretenido, además trae muy buenos recuerdos. En fin, el punto es que Jacob Seidelin ha creado una mini-replica de este juego (creo que solo el primer nivel 1-1) con JavaScript en un archivo de 14KB.

Super Mario Bros en JavaScript

Este jueguito cuenta incluso con música MIDI, en IE no se escucha y en los demás navegadores pues cada uno tiene siempre un pequeño inconveniente. Por supuesto le falta algunas cosas extras, como hongos y Koopas.

Los resultados varian un poco entre los diferente navegadores, pero en Firefox, Opera, Safari y IE son jugables.

A diferencia de juego original, este Mario puede volver atrás-izquierda y cuando mueres tienes que recargar la página para empezar de nuevo.

Versión normal: sin música ó con música

Version grande: sin música ó con música



Multibox: lightbox multisoporte

Phatfusion es un sitio web donde encontramos muchas utilidades javascript-flash de calidad. Un lugar muy visitado por los desarrolladores web. En esta oportunidad nos centraremos en una de estas utilidades llamada multibox, un lightbox (ó ventana modal dentro del navegador) hecho con mootools con soporte para imágenes, video, flash, mp3's y html. Compatible con Firefox 2, IE6, IE7 y Safari.Realmente muy útil.

Phatfusion Multibox

Enlaces | Demo-Info 

Librería IE7.js: Internet Explorer compatible con estándares

IE7.js es una librería JavaScript que hace que el Microsoft Internet Explorer se comporte como un navegador compatible con los estándares. Se centra en cuestiones de CSS y hace que los PNG transparentes se muestren correctamente en IE5 y IE6.

Esto resulta útil pues hacer CSS compatibles entre navegadores como Internet Explorer y ... el resto, es perder horas en el desarrollo de nuestros proyectos. Así que recomendamos IE7.js. Nos ayuda a no preocuparnos en nuestros trabajos por la compatibilidad CSS entre los navegadores web. Aunque también nos ayuda de otras formas, consulte la información en los enlaces.

Enlaces IE7.js 2.0 beta, demo, Cross-browser 

Tablesorter: Ordenar tabla con jQuery

Tablesorter es un plugin para jQuery que convierte una tabla estándar HTML con etiquetas THEAD y TBODY en una tabla ordenable sin necesidad de recargar la página (AJAX). Tablesorter puede analizar y clasificar de manera satisfactoria muchos tipos de datos.

 tablesorter with jquery

Características

  • Ordenado de múltiples columnas.
  • Ordenado de datos tipo: texto, URI, enteros, moneda, punto flotante, direcciones IP, fechas (ISO, formatos largos y cortos), hora e incluso un formato propio.
  • Soporta etiquetas ROWSPAN y COLSPAN en TH (cabeceras).
  • Soporta formato de ordenado secundario. Es decir, puede ordenar alfabeticamente y como formato secundario: ordenar por números.
  • El tamaño del archivo 7.4KB.

Vía javascriptkata

Enlace jQuery plugin: Tablesorter 2.0 

Los Navegadores Web y JavaScript

La ejecución de JavaScript ha mejorado notablemente entre 1996 y 2006. Esto se debe a que gran parte de la web 2.0 requiere de JavaScript. Para el correcto funcionamiento de las "aplicaciones web" actuales es importante la optimización del tiempo de ejecución de este lenguaje. Eso dependerá del desarrollador y en gran medida de los navegadores web, los cuales desean ubicarse en nuestra PC como el navegador por defecto, pero por supuesto deberán hacer mérito procesando las instrucciones de este lenguaje rapidamente.

Justamente para saber como, ó mas bien dicho, que tan rápido ejecuta el código JavaScript nuestro navegador favorito existe una excelente utilidad, benchmark, llamada SunSpider 0.9.

SunSpider realiza una serie de pruebas sobre el navegador para saber en tiempo que le toma para procesar ciertas instrucciones, por así decirlo, los cuales abarcan: renderizado 3D; acceso a arrays, propiedades de objetos y variables; procesos matemáticos con enteros y punto flotante; control de flujo (blucles, recursión, condicionales); encriptado; performance de objetos "date"; expresiones regulares; tratamiento de cadenas y mucho más.

He aquí un analisis de los principales navegadores del mercado testeando procesos e instrucciones del lenguaje JS con SunSpider.

Se uso el siguiente equipo: Windows Vista 32-bit, 4 GB RAM, Procesador 3.0 GHz Core Duo 2; y los navegadores sin extensiones ni plug-ins, o sea una instalación limpia. He aquí los resultados.

Test 1 

Parece que IE es el mas demoron en ejecutar las distintas instrucciones de JavaScript, sobre todo en lo relacionado con el tratamiento de cadenas (String). La sorpresa, es que la relación de lentos, sigue Firefox. Lo sorprendete es el muy recomendado Opera, practicamente 4 veces más rápido que IE.

En este otro gráfico podemos apreciar los mismos resultados en otra forma:

Test 2 

El JavaScript parece que va a seguir siendo una fuente de posts y artículos en los diversos blogs de desarrollo el próximo año que se nos viene, como siempre lo que nos interesará será la forma de implementarla de manera efectiva, pero también  dependerá de como los navegadores web actuarán para realizar los procesos más rápido.

Vía Coding Horror 

Google Chart API con PHP

Tanto se habla de Google Chart API y como implementarlo con ayuda de frameworks conocidos como Prototype y Ext, sin embargo podemos implementarlo con cualquier otros framework ó lenguaje que trate con HTML. Para PHP es realmente simple:

Basta con generar los datos, de preferencia almacenarlos en un array, para crear el url y establecerlo en el atributo de la etiqueta IMG de nuestra página. Les dejo el link para el tutorial y así ustedes puedan implementarlo. 

Google Chart API in PHP

Chart Maker: generador de gráficos con Ext2 y Google Chart API

Con la nueva API para gráficos que Google ha hecho disponible, han salido a la luz nuevas herramientas que nos ayudan a configurar de manera más fácil. Justamente Chart Maker, se encarga de generar gráficos con la interface de usuario de Ext 2.0 y Google Chart API. Hay que recordar que para generar gráficos con Google Chart debemos especificar ciertos valores a los parametros que enviaremos por URL:

http://chart.apis.google.com/chart?cht=p&chs=280x140&chtt=My%20Graph&chl=Futbol%7CCricket%7CRugby&chco=ff0000,00ff00,0000ff&chd=t:100,80,90 

así que para evitarnos ese trabajo, muchas veces confuso, podemos usar Chart Maker.

Chart Maker 

Desplazándote por Imágenes Panorámicas con JavaScript

Seguramente hemos escuchado de visitas ó tours virtuales, por ejemplo Easypano es una empresa que se dedica al desarrollo de software para la creación de visitas virtuales basándose en Java. Ahora bien, nos referimos por visitas virtuales a la interacción que tiene el usuario con fotografías panóramicas ó de 360ºx360º para desplazarse por éstas como si estuviera en lugar donde fueron tomadas. Esto es muy usado en el campo de la inmobiliarias, los brindan a través de sitios web ó a través de CDs multimedia.  Como vuelvo a repetir este tipo de aplicación se basan en Java, hasta donde conozco.

Sin embargo, vía Ajaxian me entero que alguien dio el primer paso para desplazarnos por fotografías panorámicas usando JavaScript (era de esperarse), lo cual bien se puede aplicar a una visita virtual. En realidad no es el primero, hace algunos meses descubrí algo parecido en Javascript pero no tenía un buen acabado.

Por ejemplo, si tenemos esta imagen panorámica.

 Africa panoramica

El resultado aplicado este código en Javascript. Con la ayuda del mouse puedes indicar el sentido de desplazamiento (derecha o izquierda).

Africa 3D 

Aunque el autor menciona en su post que esta utilidad fue algo casual que él hizo, pues no esta renderizado aún, y consume mucho de tu microprocesador. Pero ¿verdad que no está mal la idea? Ahora solo a esperar a que alguien se incline por agregar este tipo de desplazamiento con JavaScript a imágenes de 360ºx360º.

Enlace | Stupid JavaScript Tricks: "3D" Panorama

Navegación

Categorias

Archivos

Monitored by eXternalTest