Ajaxman » Jquery

[Javascript:Jquery] Plugin GoogleMaps

Ajaxman — Wed, 06 Jan 2010 17:57:29 +0000

Me entero en Twitter, sobre un plugin de Jquery el cual nos permite trabajar comoda y apliamente con GoogleMaps de una manera muy facil.

Para usarlo primero nos bajamos el Jquery y despues el plugin

En nuestro HTMl agregamos ambos JS’s (El Jquery primero y despues el plugin Jquery.Googlemaps)

Y ahora a agregamos el siguiente script (Javascript)

$('selector').googleMaps();

Y listo con eso ya podemos ver como funciona

Aunque como hemos de suponer es mucho mas funcional usando algo mas de codigo, aqui algunos ejemplos.

Por ejemplo podemos indicar la latitud y la longitud

$(document).ready(function() {
    $('selector').googleMaps({
        latitude: 49.26063518364422,
        longitude: -123.15673828125
    });
});

O algo tan avanzado como una marca, personalizada en cierto punto del mapa.


$(document).ready(function() {
    $('selector').googleMaps({
        markers: {
            latitude:     37.4416,
            longitude: -122.1516,
            icon: {
                image: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
                shadow: 'http://chart.apis.google.com/chart?chst=d_map_pin_shadow',
                iconSize: '12, 20',
                shadowSize: '22, 20'
            }
        }
    });
});

Y con el ultimo ejemplo podriamos obtener algo como esto

Google Maps jQuery Plugin

Toda la documentacion y mas ejemplos en la pagina web del autor
Google Maps jQuery Plugin – Shawn Mayzes

No related posts.

[Jquery-Plugin]Sparklines, creado graficas con Jquery

Ajaxman — Thu, 17 Jul 2008 18:55:32 +0000

Leo una interesante entrada de Andrés Nieto sobre un plugin con el cual podemos crear pequeñas grafícas usando Javascript, obviamente apoyandonos de la librería Jquery.

Este importante plugin tiene varias opciones comunes como son

type – line (default), bar o tristate
width – Ancho de la gráfica, por defecto “auto”.
height – Altura de la gráfica, por defecto “auto”.
lineColor – Color de la línea
fillColor – Color del relleno

Esto lo recalco por que ademas de eso podemos usar muchas otras opciones, como son

Opciones de gráficas tipo línea:

spotColor – Oculta o muestra el color del valor final.
spotRadius – En pixels (default: 2)

Opciones de gráficas tipo Bar:

barColor – Color de los valores positivos
negBarColor – Color de los valores negativos
barWidth – Tamaño de cada barra, en pixels
barSpacing -Separación entre barras, en pixels.
zeroAxis – Centro del eje Y.

Opciones de gráficas tipo Tristate:

posBarColor – Colores valores positivos
negBarColor – Colores valores negativos
zeroBarColor – Colores para valores cero.
barSpacing – Separación entre barras, en pixels
zeroAxis – Centro del eje Y

Creo que Ajax, esta llegando hasta limites insospechados si ha esto le añadimos la próxima versión de HTML, el 5, tal ve pronto salgan juegos muy buenos creados con Javascript y hasta aplicaciones mas poderosas.

Para saber como pueden usarlo en su sitio web, pueden darse la vuelta por el Blog de Andrés donde viene la información completa.
Vía | jQuery Sparklines, gráficas sencillas con jQuery

No related posts.

[Ajax] mcDropdown: Mejorando las listas desplegables con Jquery

Ajaxman — Mon, 30 Jun 2008 16:44:50 +0000

Después de varios días sin postear por tener mucho trabajo, vuelvo a escribir, y saben postear y trabajar es complicado, creo que debería dejar de trabajar y dedicarme ha escribir post’s .

Vía Hotajax(un blog bastante interesante sobre Ajax), me acabo de enterar de un importante plugin para que podamos mejorar bastante nuestras listas desplegables.

Esta funcionalidad nos permite generar submenus desplegables desde un combobox, osea elegir y desde ahí volver a elegir otra opción, además de que todo esto lo guarda en un “historial” para saber donde andamos, les pongo una imagen para que vean a lo que me refiero.

Para hacer uso de este plugin vamos a necesitar descargarnos mcdropdown, el cual ya trae todos los script necesarios para que funcione.

Codigo despues del salto

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Giva Labs - mcDropdown jQuery Plug-in | Giva

Example

Please select a category:

Arts & Humanities
- Photography
  - 3D
  - Digital
- History
- Literature
Business & Economy
Computers & Internet
Education
Entertainment
- Movies
- TV Shows
- Music
- Humor
Health

Vía | http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm
Y ejemplo vía | Example mcDropdown

No related posts.

[Javascript] Menú deslizante usando Jquery

Ajaxman — Wed, 11 Jun 2008 15:35:19 +0000

El seraphinux ultimamente le ha dado por escribir mas que de costumbre y gracias ha ello me he encontrado con un menú deslizante echo con Javascript.

Para que se den una idea de que les hablo aquí esta la imagen de menú normal

Y aquí la imagen del menú pero ahora desplazado, o deslizado.

Esto fue hecho gracias a la potencialidad y funcionalidad de Jquery, que es muy fácil de adaptarse a cualquier uso.

Veamos como se hizo, siguiendo el ejemplo de la fuente.

Primero necesitamos usar HTML,

[HTML]

Isn’t this nice?

[/HTML]

Ahora le aplicamos el siguiente CSS

[CSS]

[/CSS]

Y para hacerlo funcionar usamos Jquery de la siguiente forma

[JAVASCRIPT]

[/JAVASCRIPT]

Como ven es bastante simple, las imagenes usadas y el ejemplo de esto lo podrán encontrar en

http://www.webresourcesdepot.com/wp-content/uploads/file/jquery-sliding-menu/

Aunque ultimamente me ha estado atrayendo bastante Mootools, Jquery sigue teniendo muchisima utilidad.

Estoy planeando algo grande (después de que libere algo que tengo pendiente ups, solo me falta terminar la traducción y listo), que tendrá bastante Ajax y javascript, la pelea esta en que Framework utilizare, tal vez sera Jquery o Mootools, no lo se hagan sus apuestas.

Vía | Menu deslizante con jQuery
Surgio en | Sliding Top Menu With jQuery

[Google-Ajax] Google Ajax Libraries API, La gran biblioteca de Librerias Ajax

Ajaxman — Wed, 28 May 2008 17:36:03 +0000

Leyendo el blog de Andrés Nieto veo una nueva iniciativa de Google, se llama:

Google Ajax Libraries API

Que viene siendo una especie de lugar donde se almacenaran librerías Ajax, (como Jquery, Mootools, Prototype, Etc..), y las cuales estarán accesibles a todo el publico.

Las librerias/Frameworks disponibles en este momento son

Las ultimas 4 no son Librerias JS, sin embargo tambien forman parte de este abanico de posibilidades.

Su implementación/uso es simple y de la siguiente forma:

Esto es para cargar Jquery, para cargar alguna de las otras librerías JS, debemos cambiar la ruta del script(SRc) por alguna de las siguientes:


//jQuery

http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

// Prototype

http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js

//Script.aculo.us

http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js

//MooTools

http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js

//Dojo

http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js

También se pueden agregar dichas librerías usando funciones de la api de Google, para ello, necesitaremos cargar la api de google y llamar lo que deseemos como el siguiente ejemplo

Como pudimos ver la carga se realizo usando la función google.load, la cual funciona de la siguiente forma:


google.load(name, version, opt);

Como podemos observar se utilizan 3 parámetros, los cuales son, el nombre de la librería, la versión de dicha librería, y el ultimo parámetro, que es opcional es para indicar algunas opciones para personalizar mejor la carga de dicha librería, por ejemplo si la deseamos comprimida o no, entre otras opciones mas.

Ejemplo de carga

//con 2 parametros
google.load("jquery", "1.2.3");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

//con 3 parametros
google.load("mootools", "1.11", {uncompressed:true});

Andrés también comenta que el segundo parámetro tiene la opción de que si no indicas exactamente que versión utilizaras, es decir sin pones por ejemplo usar “scriptaculous con la version 1.8″, google automaticamente te mandara ultima versión que haya salido de dicha rama por ejemplo la “1.8.1″.

Google ahora esta explotando una parte que la tenia olvidada, que es, la potencialidad y la necesidad de usar librerías ajax, aunque yo preferiría tener alojadas las librerías que uso en mi propio server, yo creo que es una buena iniciativa de Google, aunque también no hay que depender siempre de Google.

Para completar este post pueden leer la fuente | Google Ajax Libraries API, ajax sobre la arquitectura Google

No related posts.

[Javascript - Jquery] Jhon Resig: aprendiendo javascript, y jQuery

Ajaxman — Tue, 01 Apr 2008 05:38:43 +0000

Mientras siguo desarrollando el proyecto que me ha llevado mas tiempo de lo previsto, veo que los recursos para los desarrolladores web no paran de fluir.

El maestro Jhon Resig, que ya nos tiene acostumbrados a sus platicas, nos presenta un video en donde vemos el uso de Javascript, con algunos trucos que nos seran de gran utilidad.

Son consejos simples, en donde tambien vemos el uso/manejo del DOM, y por supuesto el manejo de Jquery, es en ingles, pero como muchos lo dominan bastante bien, se que no les sera dificil, les dejo el video a ver que les parece.

Javascript y Jquery

Pinche aquí para ver el vídeo

Y tambien les dejo el PDF de la presentacion para que puedan ver todo lo que se trato en el video

Descargar aqui PDF javascript y Jquery

Via | JavaScript Talk at Northeastern

No related posts.

[Recursos] Resumen de una encuesta sobre desarrollo web y Ajax

Ajaxman — Tue, 25 Mar 2008 20:08:54 +0000

Antes de que me digan ¿y donde esta la encuesta? dejeneme decirles que esta encuesta no la hice yo, si no la hiciceron en http://www.nitobi.com/survey/.

Y lo encontre visitando ajaxian, y bueno les cuento sobre esto:

Se hizo una encuesta sobre algunos gustos y preferencias sobre desarrollo web y ajax, los resultados muestran varias tendencias sobre los frameworks ajax mas usados asi como el lenguaje de script del lado del servidor tambien mas usado o talvez preferido.

Hubo varias preguntas y respuestas pero las que sin duda me interesaron mas fueron:

¿Que Plataformas de desarrollo que está usando?

La respuesta con grafica y con numeros.

PHP: 296
Just HTML and CSS: 289
Java (other): 177
.Net: 163
Cold Fusion: 105
JSP: 105
Servlets: 89
Other (please specify): 57
Struts: 51
Python: 46
Rails: 42
Flex: 27
JSF: 23

¿Qué herramientas de desarrollo usas (seleccione todos los que correspondan)?

En este caso el resultado es:

Eclipse: 289
Dreamweaver: 241
NotePad: 156
Visual Studio: 154
Aptana: 105
Other (please specify): 80
Textmate: 42
Flex Builder: 39
BBEdit: 36
NotePad++: 33

Aqui un detalle, muchos usan eclipse y otros mas usan dreamweaver, yo uso rapidphp y es excelente aunque solo esta disponible para windows, pero sin duda su flexibilidad y caracteristicas lo hacen fenomenal, ojala y fuera opensource, pero aun asi lo uso por encima de dreamweaver, no es un post patrocinado ni nada, pero deberian probarlo.

Y una sobre el uso de ajax (la que mas nos interesa)

Si está usando Ajax, juegos de herramientas o framewokrs de lo que está usando en sus proyectos (seleccione todos los que correspondan)?

jQuery: 144
Prototype: 143
Scriptaculous: 127
YUI: 99
Ajax for ASP.Net (Atlas): 91
Mootools: 65
Dojo: 63
ExtJs: 61
Nitobi: 61
Spry: 29
Other (please specify): 27
GWT: 19
JMaki: 6
Mochikit: 2

Por increible que parezca Jquery esta dominado a prototype, vemos tambien que al framwork Mochikit muy pocos lo usan.

Y hay mas pero solo puese esas.

Esto no es algo que se cumpla siempre debemos recordar que fue solo una encuesta, pero nos ayuda a ver hacia donde va el desarrollo web.

Los que quieran ver todo los datos de la encuesta, los encuentran aqui | Nitobi Survey Results
Via | Nitobi Survey Results on Ajax Development
Y todos los resultados de dicha encuesta estan Aqui | Descargar

No related posts.