Entradas etiquetadas ‘jquery’

La chuleta de jQuery 1.3 (Visual Cheat Sheet)

25 de Septiembre de 2009

 jQuery Visual Cheat Sheet

Para tener a mano todo lo que puedas necesitar cuando trabajas con jQuery 1.3, entre otras más cosas, incluye información acerca de:

  • Selectores
  • Efectos
  • CSS
  • Eventos
  • Ajax
  • Utilidades

Muy recomendable.

[Descargar][Ver]

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

Resaltado de mapas con jQuery

29 de Mayo de 2009

Los mapas de imágenes HTML són muy útiles para por ejemplo una página con un mapa político y de las diferentes oficinas de una empresa, etc… también está la posibilidad de usar google maps para tal caso, pero eso ya es otro tema. Con jQuery maphilight podemos hacer estos mapas más atractivos muy fácilmente, el resultado:

[Demo 1] [Demo 2]

[Documentación]

[Descargar]

Fuente: jQuery Maphi

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


jQuery más fácil con una Extensión del Dreamweaver

9 de Enero de 2009

Se trata de una extensión disponible gratuitamente que se instala en el Dreamweaver, a través de un típico .MXP. Facilita definitivamente el trabajo del día día con este lenguaje de programación. Su aportación se puede resumir en:

  • Sintaxis coloreada del lenguaje.
  • Autoayuda cuando escribes, con listados que contienen todas las funciones de jQuery y jQuery UI.
  • Biblioteca de recortes de código.
Captura del plugin en acción

Captura del plugin en acción

Esta disponible para Dreamweaver CS3, 8, MX2004, and MX, tanto en Windows como en Mac OS X.

Menús estilo acordeón en JQuery

27 de Noviembre de 2008

Uno de los lenguajes que nos sirve para poder hacer desarrollos más vistosos, en el sentido de animaciones o realizar efectos, fue en su momento javascript. Pero gracias a la aparición de Jquery podemos realizar muchas más cosas más fácilmente de lo que podiamos hacer con Javascript. En este caso queremos exponer el plugin de jquery “accordion”, esto nos permite hacer unos menús desplegables que hoy en día se usan en Webs reconocidas como por ejemplo la de Apple. En este tipo de menús constan de apartados importantes que contienen un “listado” de enlaces que dan accesos a los distintos apartados de la web. El funcionamiento es sencillo, simplemente cuando seleccionas uno de estos grandes apartados se despliega el menú que contiene dando paso a la lista de enlaces de ese ámbito. Veamos un ejemplo con el menú de Apple:

Vemos en la parte izquerda este tipo de menu.

Estos menús se realizan con el uso de los tags UL i LI que nos permiten realizar listados. En estos tags se le deben añadir los id’s pertinentes para que se pueda identificar el elemento que se selecciona y se pueda desplegar. Este es un ejemplo:

<ul class=”drawers” id=”menu”>
<li class=”drawer”><h2 class=”drawer-handle”>Sección 1</h2>
<ul class=”submenu”>
<li class=”elemento”><a href=”#”>Elemento 1.1</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.2</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.3</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.4</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.5</a></li>

<li class=”elemento”><a href=”/”>Salir</a></li>
</ul>
</li>
<li class=”drawer”><h2 class=”drawer-handle”> Sección 2 </h2>
<ul class=”submenu”>
<li class=”elemento”><a href=”#”>Elemento 2.1</a></li>
<li class=”elemento”><a href=”#”>Elemento 2.2</a></li>
<li class=”elemento”><a href=”#”>Elemento 2.3</a></li>
</ul>
</li>
</ul>

Este es un sencillo menú con 2 apartados con varios subelementos cada uno de los apartados. Una vez hecho esto tendremos que inicializar el menú y dar la acción de despliegue en Jquery. Tanto se puede desplegar con un click del ratón, como simplemente pasando el ratón por encima (al hacer hover). La inicialización (que debería ir englobada dentro del <head> por ejemplo) de este menú podria ser tal que así:

$(document).ready(function () {

$(’LI.drawer UL:not(:first)’).hide();

$(’LI.drawer UL:first’).addClass(’open’);

$(’H2.drawer-handle’).click(function () {

$(’LI.drawer UL:visible’).hide();

$(’H2.open’).removeClass(’open’);

$(this).next().show(”slow”);

$(this).addClass(’open’);
});
});
En esta inicialización empezamos cerrando todos los elementos principales menos el primero (cada uno lo puede hacer a su gusto). Entonces se le añade a este primer elemento la clase “open”. Entonces solo se debe determinar con que evento se mostraran los elementos de los otros submenus, en el ejemplo seria con el click del elemento principal. Entonces se esconde el elemento actual, se le quita la clase open y se le asigna al nuevo elemento que se mostrará.

Son menus bastante útiles y vistosos para mostrar los accesos a los diferentes apartados de la web de una manera organizada y vistosa.