Entradas etiquetadas ‘javascript’

Browser Shooter, el juego de los navegadores en JS

4 de Septiembre de 2009

Browser Shooter es un juego desarrollado con Javascript que nos recuerda al famoso Puzzle Bobble pero con los logos de navegadores
web.

El juego usa jQuery 1.3.2 y con una gran cantidad de archivos JS se controla la física de los rebotes, el movimiento del lanzador y demás efectos del juego.

Puedes probarlo aquí

jQuery Visualize

10 de Julio de 2009

jQuery Visualize, es un plugin de jQuery que nos permite generar gráficas dinámicas usando <canvas /> para alogar los gráficos.

Lo curioso de este plugin es que carga los datos desde tablas <html>y el resultado no puede ser más accesible, ya que en caso de que el usuario no tenga el Javascript activo, este podrá ver la tabla con los datos, posibilitando así su comprensión.

Y lo “malo”… tu navegador debe ser HTML5 compatible, de lo contrario no podrás ver funcionar este plugin.

Fuente: anieto2k

Generar gráficas con Javascript

26 de Junio de 2009

anieto2k ha publicado un buen listado de librerías Javascript para generar nuestras gráficas más elegantes para nuestros proyectos:

  1. Flot [jQuery]
  2. fgCharting [jQuery]
  3. jQuery Sparklines [jQuery]
  4. jqPlot [jQuery]
  5. TufteGraph [jQuery]
  6. jQuery Google Charting [jQuery]
  7. ProtoChart [Prototype]
  8. JSXGraph [Prototype o jQuery]
  9. Protovis [Native JS]
  10. PlotKit [Nativa JS]

Fuente: anieto2k

7 reglas para realizar Javascript de calidad

19 de Junio de 2009
  • No hagas suposiciones: no pienses que el usuario tendrá el javascript activado o que usará un navegador adecuado.
  • Usa IDs y relaciones entre elementos: para no depender de un HTML mal estructurado y que el javascript sea imposible de realizar, utiliza IDs para acceder a los elementos con los que se quiere tratar y busca elementos que faciliten acceder a otros elementos.
  • Utiliza estilos: en vez de modificar los estilos de los elementos HTML mediante Javascript, usa clases CSS que modifiquen los estilos, y mediante Javascript se le puede añadir la clase a un elemento superior.
  • Comprende el navegador y a los usuarios: debes pensar cómo funciona un navegador, no sobre saturar su comportamiento (abuso de drag&drop, eventos, …). Además debes pensar qué espera el usuario que haga el navegador, y respetarlo.
  • Comprende los eventos: los eventos no solo corresponden a un objeto, sino a los elementros hijo que contiene. Así se pueden realizar eventos sobr un único elemento y no tener que modificar los demás.
  • Respeta el código de otros: seguro que a parte de tu código existe algún otro que has añadido, por lo que deberás programar teniendo en cuenta que hay que evitar conflicto entre funciones.
  • Después de ti vendrá otro: es muy frecuente que alguien acabe modificando tu código, ten un poco de consideración por los demás y escribe código legible y comprensible.

Fuente: The seven rules of unobstrusive JavaScript

Publicada la O3D, el 3D en nuestros navegadores

22 de Abril de 2009

Google ha publicado una nueva API open source llamada O3D. Sirve para poder crear aplicaciones interactivas en 3D que se visalizan en nuestros navegadores.  Usando Javascript podemos crear, mostrar, manipular un mundo virtual en 3D, seguramente quede poco para ver el próximo shooter de éxito funcinando en Firefox ^^!

Al igual que el Flash, es necesario un plugin para cada sistema operativo para hacer funcionar las aplicaciones O3D.

Hay versión para Windows y Mac, y los usuarios de Linux deben seguir estas instrucciones para compilarlo.

Más ejemplos:

Fuente: anieto2k

Carga Google Analytics y Google Maps asincronamente

13 de Marzo de 2009

Seguramente tanto Google Analytics cómo Google Maps sean usadas por muchas de las aplicaciones Web de hoy en día.

Precisamente estas dos aplicaciones pueden provocar, en muchas situaciones, retrasos en los tiempos de carga o lo que es peor, que no se cargue el contenido de forma correcta.

Google Analytics

Analytics es el gestor de estadísticas gratuito de Google, es usado por muchísimos sitios Web y quizás debido a eso, se suele producir un retraso en la carga de la página, para evitar este retraso simplemente hay que dejarle la carga al evento onload del navegador. Con jQuery esto se traduce así:

  $(document).ready(function(){
      $.getScript('http://www.google-analytics.com/ga.js',function(){
         if (typeof(_gat) == 'object'){
            var pageTracker = _gat._getTracker('UA-XXXXXXX-Y');
            pageTracker._initData();
            pageTracker._trackPageview();
         }
      });
   });

Pero si no estamos usando jQuery podemos usar la función como addLoadEvent() que nos permite añadir funcionalidades al evento onload con compatibilidad en todos los navegadores, sería algo así:

addLoadEvent(function(){
 // Insertamos el Código que Google Analytics
 var analyticsCode = 'UA-XXXXXXX-Y';
 var s = document.createElement("script");
 s.type = "text/javascript";
 s.src = "http://www.google-analytics.com/ga.js";
 s.onload = s.onreadystatechange = function() {
	if (typeof _gat  == 'object'){
            var pageTracker = _gat._getTracker(analyticsCode);
            pageTracker._initData();
            pageTracker._trackPageView();
         }
 }
 document.getElementsByTagName("head")[0].appendChild(s);
});

En ambos casos se debe reemplazar (UA-XXXXXXX-Y) por el código que Google Analytics nos asigna.

Google Maps

La mayor y posiblemente mejor aplicación de mapas de Internet y de dónde la gran mayoría de sitios Web obtienen la información sobre mapas, es sin duda la que más problemas produce. Las largas esperas producen, por ejemplo, en Internet Explorer 6 que el tiempo de carga de las imágenes nos desesperen antes de poder visualizarlas….

Para solucionar el problema basándonos en una solución sobre jQuery podemos usar:

function cargarMapa(){
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("MAPA"));
      map.setCenter(new GLatLng(39.578678,2.646021), 16);
   }
};
$(document).ready(function(){
   var api='AQUI TU GOOGLE MAPS API KEY';
   $.getScript('http://maps.google.com/maps?file=api
&amp;v=2.x&amp;key='+api+'&amp;async=2&amp;callback=cargarMapa');
});

Si se prefiere, también podemos usar el ya conocido addLoadEvent()

addLoadEvent(function(){
	var api='AQUI TU GOOGLE MAPS API KEY';
	function cargarMapa(){
	   if (GBrowserIsCompatible()) {
	      var map = new GMap2(document.getElementById("MAPA"));
	      map.setCenter(new GLatLng(39.578678,2.646021), 16);
	   }
	};
	var s = document.createElement("script");
	s.type = "text/javascript";
	s.src = 'http://maps.google.com/maps?file=api
        &amp;v=2.x&amp;key='+api+'&amp;async=2&amp;callback=cargarMapa';

         document.getElementsByTagName("head")[0].appendChild(s);
})

Fuente: anieto2k

¿Habéis tenido problemas antes con los tiempos de carga usando estos servicios de Google en vuestras aplicaciones Web?

jQuery Calculator, la calculadora definitiva

28 de Enero de 2009

En la mayoría de aplicaciones de gestión es muy últil disponer de una calculadora para introducir nuevos datos en un formulario o para realizar pequeñas comprobaciones. Si además podemos disponer de una calculadora dentro de la interfaz del programa y accesible vía un icono o al hacer click sobre un input, pues mejor que mejor. Hoy os presento jQuery Calculator.

Aspecto por defecto

Aspecto por defecto

Uso

1.Incluir jQuery

2.Descargar el plugin jQuery Calculator (v1.0.0) e incluir los archivos necesarios en la página

<style type="text/css">@import "jquery.calculator.css";</style>
<script type="text/javascript" src="jquery.calculator.js"></script>

3.Realizar la invocación (ver más ejemplos)

$('input').calculator();

$('input').calculator({showOn: 'button'});

Se puede invocar desde un botón, una imágen, al hacer focus sobre un elemento. Además podemos personalizar la animación: show, slide, slideDown, fade… (gracias a jQuery UI).

Localización

jQuery Calculator además está disponible en varios idiomas, entre ellos, el español.  Basta con agregar el archivo de idioma correspondiente y cargar la calculadora indicando el idioma cómo parámetro de la llamada:

<script type="text/javascript" src="jquery.calculator-es.js"></script>
$('#l10nCalc').calculator($.calculator.regional['es']);

Estilos CSS

Por defecto, los colores y elementos gráficos de jQuery Calculator, la verdad, són un poco sosos, pero por suerte disponemos de una extensa guía de diseño para darle nuestro toque personal modificando el CSS directamente para conseguir darle algo más de vida.

)

Mismo plugin + CSS modificado = Nueva calculadora :)

Funciones Extra

jQuery Calculator es más potente de lo que parece a simple vista, podemos trabajar con diferentes bases, podemos añadir más botones y funciones a la calculadora para adaptarla 100% a lo que queremos hacer con ella, además de definir los callbacks adecuados para tratar los resultados obtenidos y ya se me olvidaba, también tiene funciones de “memória”.



Lanzamiento de jQuery 1.3

15 de Enero de 2009

Los chicos de jQuery (uno de los mejores framewoks javascript), han lanzado una nueva versión en los últimos días. Se trata de la versión 1.3.

En esta nueva versión de jQuery se ha visto incrementada sustancialmente la velocidad en la mayoría de aspectos. Básicamente la mejora de velocidad de ha mejorado cambiando el selector de elementos, ahora se utiliza Sizzle. Por otro lado se ha reescrito la inyección de HTML haciendo hasta 6 veces más rápida esta.

Para conocer más sobre esta versión de jQuery no olvides visitar la documentación oficial.

Descargar

jQuery Minified / jQuery Regular


Google Maps más accesible sin Javascript

8 de Enero de 2009

Es posible mejorar la accesibilidad de Google Maps a través de la implementación de la Google Static Maps API, que permite incluir una imagen simple mediante el tag <img> y una URL especificado en el atributo “src”.

Ejemplo: http://maps.google.com/staticmap?center=41.539402,2.441468&markers=41.539402,2.441468,red&zoom=17&size=400×300&key=TU-CLAVE-GOOGLEMAPS

Ejemplo Imagen API Estática de Google Maps

Pero no solo se trata de ganar en accesibilidad. Por ejemplo, si implementamos una versión imprimible del contenido, se podrá visualizar fácilmet que salga la imagen que se genera con dicha API.

El IE7.js es una alternativa de compatibilidad con menos esfuerzo

7 de Enero de 2009

Ser compatible con el IE6 y el IE7, lo que significa adaptar los estándares de la Web a estos navegadores bastante populares, implica invertir mucho tiempo y esfuerzo. Además, requiere el conocimiento de hacks compatibles con las validaciones de las páginas por la W3C e incluso la separación de hojas de estilo en los peores casos.

El IE7.js es una librería liviana (de 11Kb comprimidos) de Javascript que permite convertir los navegadores Microsoft Internet Explorer desde la versión 5 hasta la 8 en vavegadores compatibles con los estándares de la Web, tanto a nivel de código HTML como de hojas de estilo CSS. También añade soporte de transparencia de imágenes PNG para el IE5 y el IE6.

EL IE7.js es una alternativa de compatibilidad con menos esfuerzo. Ahora con una evolución significativa en la velocidad y estabilidad, se ha convertido en una versión BETA, tras permanecer un largo periodo de tiempo en ALPHA. El motor del sistema opera con base2: Una librería de Javascript que permite trabajar con un Javascript multinavegador con un único DOM, siguiendo los estándates ECMAScript. Esta librería esta teniendo un fuerte impulso de desarrollo, lo que ha permitido mejorar notablemente el rendimiento del IE7.js. Ambas librerías son mantenidas por el mismo equipo de desarrollo de Dean Edwards.

¿Pero por qué significa un menor esfuerzo? Solo imagina implementar una única hoja de estilos compatible para todos los navegadores, válida para la W3C (tanto en HTML como en CSS) y solamente incluyendo los tags:

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->