En este caso, te vamos a mostrar varios de ellos que están incluidos en Jquery User Interface. Para poder usar estos widgets en tus webs puedes descargarte la librería en este enlace. Deberas incluir los scripts en tus páginas añadiendo a tu cabecera HTML:

<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”jquery-ui-1.7.2.custom.min.js”></script>
<link type=”text/css” href=”css/smoothness/jquery-ui-1.7.2.custom.css” rel=”stylesheet” />

Puedes ver los ejemplos en este enlace.

Ejemplo 1 – Acordeón

Este widget te permite poner varios divs que se muestran y esconden haciendo un efecto de acordeón. Para crear este widget necesitas una parte del código en HTML

<div id=”div_acordeon”>
<h3><a href=”#”>Contenido 1</a></h3>
<div>
<p>Aquí puedes poner el contenido de la primera division.</p>
</div>
<h3><a href=”#”>Contenido 2</a></h3>
<div>
<p>Aquí puedes poner el contenido de la segunda division.</p>
</div>
<h3><a href=”#”>Contenido 3</a></h3>
<div>
<p>Aquí puedes poner el contenido de la tercera division.</p>
Campo 1: <input type=”text” name=”texto” /><br/>
Campo 2: <input type=”password” name=”pass” />
</div>
</div>

La otra parte del código es javascript:

$(document).ready(function(){ $(“#div_acordeon”).accordion(); });

Con esta linea de js definimos que el div con identificador div_acordeon es el que contiene todos los títulos y los divs que se mostrarán y esconderán.

Ejemplo 2 – Calendario

Puedes añadir un calendario facilmente con este widget. Hay dos opciones. Definir el calendario sobre un div, siempre sera visible, o definirlo sobre un campo de texto, el calendario se mostrara cuando entren en el campo.

Para ello tenemos los codigos HTML:

<div id=”div_calendario”></div>
Campo de fecha: <input id=”text_calendario” type=”text”></p>

El código js para crear el calendario es:

$(document).ready(function(){ $(“#div_calendario”).datepicker({ dateFormat: ‘dd/mm/yy’ }); });
$(document).ready(function(){ $(“#text_calendario”).datepicker({ dateFormat: ‘dd/mm/yy’ }); });

Ejemplo 3 – Diálogo

Para los diálogos modales deberemos crear un div para cada uno de ellos con el contenido de estos. En el ejemplo hemos creado estos tres

<div id=”dialogo” title=”Titulo del diálogo modal”>
<p>Aquí puedes escribir el texto que desees</p>
</div>

<div id=”confirmacion” title=”Titulo de la confirmación modal”>
<p><span style=”float:left; margin:0 7px 20px 0;”></span>Texto de confirmación. Esta seguro?</p>
</div>

<div id=”formulario” title=”Titulo del formulario”>
<form>
<fieldset>
<label for=”name”>Nombre</label><br/>
<input type=”text” name=”name” id=”name” /><br/>
<label for=”email”>Correo</label><br/>
<input type=”text” name=”email” id=”email” value=”" /><br/>
<label for=”password”>Contraseña</label><br/>
<input type=”password” name=”password” id=”password” value=”" />
</fieldset>
</form>
</div>

El código js es:

$(function() {
$(“#dialogo”).dialog({ bgiframe: true, modal: true, autoOpen: false });
});

$(function() {
$(“#confirmacion”).dialog({ bgiframe: true, modal: true, autoOpen: false,
overlay: { backgroundColor: ‘#000′, opacity: 0.5 },
buttons: { ‘Aceptar’: function() { $(this).dialog(‘close’); },
‘Cancelar’: function() { $(this).dialog(‘close’); }
} }); });

$(“#formulario”).dialog({ bgiframe: true, autoOpen: false, height: 300, modal: true, resizable: false,
buttons: { ‘Aceptar’: function() { $(this).dialog(‘close’); },
‘Cancelar’: function() { $(this).dialog(‘close’); }
}, });

Para abrir un diálogo utilizamos el código js siguiente

$(“#dialogo”).dialog(‘open’);

Ejemplo 4 – Pestañas

El código HTML es:

<div id=”div_tabs”>
<ul>
<li><a href=”#tab1″>Pestaña 1</a></li>
<li><a href=”#tab2″>Pestaña 2</a></li>
<li><a href=”#tab3″>Pestaña 3</a></li>
</ul>
<div id=”tab1″>
<p>Aquí puedes poner el contenido de la primera pestaña.</p>
</div>
<div id=”tab2″>
<p>Aquí puedes poner el contenido de la segunda pestaña.</p>
</div>
<div id=”tab3″>
<p>Aquí puedes poner el contenido de la tercera pestaña.</p>
</div>
</div>

Y el js:

$(function() { $(“#div_tabs”).tabs(); });

Ejemplo 5 – Cambiar los themes, CSS

Puedes cambiar el estilo de los widgets modificando el fichero CSS. Otra forma más fácil de crear tu propio tema es utilizando la herramienta ThemeRoller que Jquery pone a tu disposición. Puedes modificar el estilo en linea y cuando sea de tu agrado descargarte el fichero CSS que lo define.

Puedes probar esta herramienta en este ejemplo y modificar el estilo de todos los ejemplos.

Como siempre, puedes ver los ejemplos en funcionamiento en una página a parte. Pulsa este enlace si quieres verlos.

Ejemplo 1 – Mostrar / Ocultar

En este ejemplo puedes ver como se muestran y ocultan unos divs. El efecto hace que se oculten y muestren por el borde superior izquierdo. Para ello estamos utilizando el código:

• $(‘.div_ejemplo1′).show(“5″): Muestra todos los objetos de la clase div_ejemplo1.
• $(‘.div_ejemplo1′).hide(“5″): Oculta todos los objetos de la clase div_ejemplo1.
• $(‘.div_ejemplo1′).toggle(“5″): Muestra o oculta, alternando según el estado en el que se encuentren, todos los objetos de la clase div_ejemplo1.

Como ves, utilizamos los selectores que os explicamos en el post Jquery, escribe menos, haz más. Por lo tanto los efectos se pueden aplicar sobre un solo objeto, sobre varios, todos los de la misma clase…

Ejemplo 2 – Deslizar

Este ejemplo es similar al anterior pero el efecto muestra y oculta los divs deslizandolos a la parte superior. Utilizamos el código:

• $(‘.div_ejemplo2′).slideDown(): Muestra todos los objetos de la clase div_ejemplo2.
• $(‘.div_ejemplo2′).slideUp(): Oculta todos los objetos de la clase div_ejemplo2.
• $(‘.div_ejemplo2′).slideToggle(): Muestra o oculta, alternando según el estado en el que se encuentren, todos los objetos de la clase div_ejemplo1.

Ejemplo 3 – Opacidad

Este ejemplo utiliza la opacidad de los divs para crear el efecto. El código:

• $(‘.div_ejemplo3′).fadeIn(): Muestra todos los objetos de la clase div_ejemplo3.
• $(‘.div_ejemplo3′).fadeOut(): Oculta todos los objetos de la clase div_ejemplo3.

Ejemplo 4

En este ejemplo puedes ver como los efectos no solo funcionan sobre divs. Aquí los utilizamos con un párrafo y con un enlace.

Open Flash Chart utiliza Flash para mostrar los gráficos y los ficheros de datos utilizan el formato JSON. No te asustes si no habías oído nunca el termino JSON. Por suerte, con el código que te has descargado se incluyen librerías para crear los ficheros de datos con varios lenguajes( PHP, Perl, Python… ).

Para añadir un gráfico lo puedes hacer de varias formas. La que ha mi me parece mas sencilla es:

• Incluye el script swfobject.js en la cabecera HTML de tu código. Para ello:

<script type=”text/javascript” src=”js/swfobject.js”></script>

• Crea un div donde quieras ver el gráfico. En los ejemplos hemos creado:

<div id=”grafico”></div>

• Llama a swfobject.embedSWF para crear el gráfico

<script type=”text/javascript”>
swfobject.embedSWF(“open-flash-chart.swf”, “grafico”, “800″, “500″, “9.0.0″, “expressInstall.swf”,{“data-file”:”data.json”} );
</script>

Hay varias formas de pasar el parámetro de la ruta del fichero de datos. Una de ellas es la que acabo de escribir, en este caso el fichero se llama data.json. Otra forma es pasar el fichero en la URL de la pagina. Por ejemplo, en la URL http://vidaenlaluna.es/ejemplos/open_flash_chart/index.html?ofc=data.php el fichero de datos se llama data.php.

La parte que mas trabajo te va a llevar es la creación del fichero de datos. Hay muchas opciones posibles. En la pagina de Open Flash Chart encontraras muchos ejemplos con el código para crearlos.

Yo he creado cuatro ejemplos en este enlace. Puedes descargarte el codigo comentado con el que se generan los ficheros de datos en este enlace.

Podéis ver el ejemplo en este enlace.

Movernos a un punto

Para movernos a un punto podemos hacerlo con las sentencias:

var la = ge.createLookAt(”);
la.set(XXXX, YYYYY, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 1000 );
ge.getView().setAbstractView(la);

Deberemos substituir XXXX e YYYY por las coordenadas del punto.

Crear un punto de interés

Crear un punto de interés es algo mas largo. Aquí os dejo el código comentado.

//Creamos el punto
var placemark = ge.createPlacemark(”);
//Asignamos el texto o nombre del punto
placemark.setName(“Sagrada Família”);
//Lo añadimos al visor
ge.getFeatures().appendChild(placemark);
//Le asignamos el icono
var icon = ge.createIcon(”);
icon.setHref(‘http://maps.google.com/mapfiles/kml/paddle/red-circle.png’);
var style = ge.createStyle(”);
style.getIconStyle().setIcon(icon);
placemark.setStyleSelector(style);
//Situamos el punto fisicamente
var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
var point = ge.createPoint(”);
point.setLongitude(2.1745);
point.setLatitude(41.404);
placemark.setGeometry(point);

Opciones del visor

Podemos modificar varias opciones en el visor:

• options.setStatusBarVisibility( TRUE/FALSE ): Barra de estado.
• options.setGridVisibility( TRUE/FALSE ): Visibilidad del grid.
• options.setOverviewMapVisibility( TRUE/FALSE ): Visibilidad del mapa de situación.
• options.setScaleLegendVisibility( TRUE/FALSE ): Visibilidad de la escala.
• options.setAtmosphereVisibility( TRUE/FALSE ): Visibilidad de la atmósfera.
• options.setMouseNavigationEnabled( TRUE/FALSE ): Navegación con el ratón.
• ge.getNavigationControl().setVisibility( ge.VISIBILITY_SHOW / ge.VISIBILITY_HIDE ): Visibilidad del control de navegación.

Para empezar necesitaremos la clave del API, podéis conseguirla en este enlace.

Puedes ver un ejemplo en la página.

El API de Google Earth

Para cargar el API deberemos incluir el script en nuestra cabecera HTML con

<script type=”text/javascript” src=”http://www.google.com/jsapi?key=CLAVE_API”></script>

Necesitaremos crear un div donde se mostrara el mundo. Para ello, en nuestro ejemplo creamos el div:

<div id=”div_earth” style=”margin: 10px; width: 600px; height: 400px”></div>

Dentro de nuestro código javascript cargamos el mundo en el div y lo inicializamos. Para ello:

<script type=”text/javascript”>
google.load(“earth”, “1″);
var ge = null;
function init() {
google.earth.createInstance(“div_earth”, initCallback, failureCallback);
}
function initCallback(pluginInstance) {
ge = pluginInstance;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
}
</script>

Este  código es bastante genérico así que poca cosa hay que explicar.

• google.earth.createInstance(“div_earth”, initCallback, failureCallback): Esta linea crea la instancia de Google Earth. El primer parametro, “div_earth”, es el div donde veremos la aplicación. El segundo sera la función javascript que se llamara para la inicialización. El tercero sera la función que se llamara si hay algún error.
• ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO): Mostramos los controles de navegación con los que el usuario se podrá mover, hacer zoom…

Uso de KML con el API

Mi idea era empezar por tutoriales básicos pero, por petición de uno de nuestros lectores, voy a explicar como utilizar ficheros KML en el API. Solo explicare como utilizarlos con el API, en siguientes post entraremos en los ficheros KML para ver como crearlos. Si quereis ver el fichero KML que usaremos podeis acceder desde este enlace.

Según la definición de la Wikipedia, “KML (del acrónimo en inglés Keyhole Markup Language) es un lenguaje de marcado basado en XML para representar datos geográficos en tres dimensiones. Fue desarrollado para ser manejado con Keyhole LT, precursor de Google Earth (Google adquirió Keyhole LT en Octubre de 2004 tras lanzar su versión LT 2)”.

KML es usado para definir objetos en 3D, textos, puntos de interés… en mapas y vistas en 3D. En el ejemplo que os mostraré dibujaremos las instalaciones del Google Campus. Podéis ver el resultado en la imagen.

Para cargar el fichero KML utilizaramos la función procesarKML.

function procesarKML()
{
var kmlUrl = ‘http://vidaenlaluna.es/ejemplos/api_google_kml/google_campus.kml’;
google.earth.fetchKml(ge, kmlUrl, function(kmlObject) {
if (kmlObject)
{
ge.getFeatures().appendChild(kmlObject);
document.getElementById(‘btnKML’).disabled = true;
alert(‘Fichero KML.correcto’);
}
else
{
alert(‘Fichero KML.incorrecto’);
}
});
}

Google.earth.fetchKml es el método del API encargado de procesar el fichero. Para ello le debemos pasar la instancia del plugin( anteriormente hemos creado la instancia en la variable ge ) y la URL del fichero KML. En el tercer parámetro enviamos la función que se ejecutara después de procesar el fichero. Esta función carga el objeto KML en el mapa si se ha procesado correctamente o alerta al usuario de que el fichero KML no es correcto.

Cualquier duda ya sabéis que podéis comentarla.

Puedes ver los ejemplos en la pagina.

Ejemplo 3 – Tipos de mapas

En Google maps tenemos varias vistas diferentes de los mapas. Las mas comunes son

• Vista predeterminada: Es la vista clásica de los mapas de Google. El código es G_NORMAL_MAP.
• Vista satélite: Es la vista desde satélite. El código es G_SATELLITE_MAP.
• Vista híbrida: Es una mezcla de la vista satélite con calles y nombres. El código es G_HYBRID_MAP.
• Vista terreno: Es una mezcla de las tres vistas anteriores. Puedes ver el terreno en relieve pero continuas teniendo información de calles y situaciones importantes. El código es G_PHYSICAL_MAP.

Para cambiar de una vista a otra deberás llamar al método setMapType pasandole el código del tipo de mapa que quieres ver.

map.setMapType(G_NORMAL_MAP);

Ejemplo 4 – Zoom y mover el mapa

Hacer zoom y mover el mapa es muy sencillo.

Para hacer zoom tendrás que llamar a los métodos zoomIn o zoomOut segun quieras acercarte o alejarte.

map.zoomIn();
map.zoomOut();

Para mover el mapa a otro punto simplemente llama a panTo pasando por parámetro el punto donde quieres situarte.

map.panTo( new GLatLng(41.405317,2.176829) );

Sin usar el API

Es la forma mas sencilla de incluir un mapa. Sigue estos pasos:

• Buscar la dirección en la pagina de Google Maps. En nuestro ejemplo buscamos la Sagrada Familia.
• Pulsa sobre el texto “Enlazar”

• Copia y pega el código que hay debajo de “Pegar HTML para insertar en sitio web” en tu pagina web.

Con estos tres pasos ya tienes un mapa en tu pagina web.

Usando el API

Si por ejemplo quieres incluir mapas dinámicamente ( no tienes la dirección cuando escribes el código ) o quieres personalizar los textos de los puntos de interés tendrás que usar el API.

Lo primero que has de hacer para usar el API es tener una cuenta con Google y registrar en el API usando este enlace. Una vez tengas la clave para usar el API en tu web ya estas preparado para empezar a picar código.

Necesitas incluir en tu cabecera HTML el fichero javascript del API. Para ello:

<script src=”http://maps.google.com/maps?file=api&v=1&key=TU_CLAVE” type=”text/javascript”></script>

Substituye TU_CLAVE por la clave que te han proporcionado al registrarte.

En el lugar donde queramos ver el mapa pondremos un div como por ejemplo:

<div id=”div_map1″ style=”width: 425px; height: 350px”></div>

Para cargar el mapa lo haremos por javascript así que ya sabes que lo has de introducir dentro de las etiquetas correspondientes( <script type=”text/javascript”></script>  ). Vamos a ver un par de ejemplos.

Puedes ver los ejemplos en la pagina.

Ejemplo 1

var map = new GMap2(document.getElementById(“div_map1″));
map.setCenter(new GLatLng(41.405317,2.176829), 15);
map.setUIToDefault();

En la primera linea creamos una variable del tipo GMap2. Cada objeto de esta clase define un único mapa de la página. Como puedes ver le pasamos por parámetro el div donde queremos ver el mapa( div_map1 ).

En la segunda linea inicializamos el mapa. Para ello llamamos al método setCenter pasándole las coordenadas que deben centrarse en el mapa ( utilizamos la clase GLatLng ) y el nivel de zoom.

Si queremos ver en el mapa los botones típicos de google ( zoom, tipo de mapa… ) deberemos llamar al método setUIToDefault.

Ejemplo 2

var map2 = new GMap2(document.getElementById(“div_map2″));
map2.setCenter(new GLatLng(41.405317,2.176829), 15);
map2.setUIToDefault();
var point = new GLatLng(41.405317,2.176829);
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
var myHtml = “Texto <b>HTML</b> que quieres mostrar en el punto”;
map2.openInfoWindowHtml(point, myHtml); });
map2.addOverlay(marker);

En este ejemplo mostraremos el mapa igual que en el primero pero añadiremos un marcador. Al pulsar el marcador se mostrara un mensaje con información.

Las tres primeras lineas del código son iguales a las del ejemplo 1.

En la cuarta linea creamos un punto ya que lo utilizaremos varias veces. Después creamos un objeto del tipo GMarker que es el encargado de mostrar un punto en el mapa. Le pasamos como parámetro el punto donde debe apuntar.

Las lineas siguientes crearan el evento click sobre el marcador. Para ello llamamos a GEvent.addListener que se encargara de crear el evento. Pasamos como parámetro el marcador, que evento enlazamos y que debe hacer.

La última linea añade el marcador, incluyendo el evento, al mapa.

Ire añadiendo ejemplos practicos cuando tenga algo mas de tiempo. Si estas interesado en algo concreto comentalo y espero poder ayudarte.