Archivo de la etiqueta: jquery

Crear marcadores en Google Maps con la API

Otra de las cosas muy interesantes que nos permite la API de google maps es poder utilizar los marcadores que queramos y situarlos a nuestro antojo dentro de un mismo mapa. Incluso podemos vincular este marcador con una url de tal modo que al hacer click sobre él nos lleve a otro contenido dentro de Internet.

Obtener la capa y asignarle al objeto «mapa»

En un principio deberás tener colocada dentro de tu página una capa vacía donde querrás ubicar el mapa. Lo normal será rellenar el mapa en el momento que carguemos la página.


...

<div id="map_canvas"></div>

...

Con jquery podemos utlizar el evento onload de la ventana para realizar todas las operaciones del mapa.


window.onload = function () {  

//Creamos las opciones que estarán asignadas al mapa

var options = {
 mapTypeControlOptions: {
 mapTypeIds: ['Styled']
 },
 center: new google.maps.LatLng(39.644024, -3.185656),
 zoom: 5,
 disableDefaultUI: true,
 mapTypeId: 'Styled'
 };
 var div = document.getElementById('map_canvas');  //En esta línea obtenemos la capa donde se ubicará nuestro mapa

//Creamos el objeto mapa de google con las opciones y asignamos la capa div html
 var map = new google.maps.Map(div, options); 

}

 

Cómo crear el marcador

Para crear un marcador es necesario dos objetos de google que son:

  • google.maps.Marker, será el propio marcador.
  • google.maps.LatLng, objeto que representa las coordenadas dentro del mapa.

Primero creamos un objeto LatLng , en él fijaremos la longitud y latitud del marcador.


var gijon = new google.maps.LatLng(43.532362, -5.661588);

Posteriormente creamos el marcador:


var marker_gijon = new google.maps.Marker({
 position: gijon,
 url: '/sedes/sede-gijon/',
 title: 'Gijón',
 map: map
 });

En este punto podemos ver en la propiedad «position» le asignamos la variable de tipo LatLng establecido previamente.

Title, será la cadena que se mostrará al pasar el ratón por encima.

Y «map» es el objeto mapa creado anteriormente.

La propiedad url no existe como tal en el objeto de google marker pero la creamos nosotros para establecer la dirección a la que se dirigirá posteriormente.

Para tratar esta dirección podemos utilizar el siguiente código:


google.maps.event.addListener(marker_gijon, 'click', function() {
window.location.href = marker_gijon.url;
});

Este ha sido un pequeño tutorial para crear marcadores en Google Maps con la API. Seguro que existen más posibilidades pero esto es solo una manera sencilla de empezar.

jQuery $(document).ready no siempre funciona con updatepanel

Si estás trabajando con UpdatePanel y jQuery puede ser que acabes teniendo un problema cuando cargues la página parcialmente.

Partimos de lo siguiente:

En la carga inicial de la página realizamos con jQuery algunas acciones mediante el $(document).ready().

Comprobamos que cuando ejecutamos la página esto funciona correctamente.

Cuando hacemos una carga parcial de la página dentro de un UpdatePanel entonces no se ejecutará la función ready() de jQuery ya que el DOM se ha creado en la carga inicial.

Si queremos que se produzcan las mismas acciones en la carga parcial usaremos el siguiente código:


$(document).ready(function() {
 // Nuestro código al incializar la página (DOM cargado)
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
 //Volver a escribir nuestro código al realizar una carga parcial de la página con UpdatePanel
});

Recorrer un array con jQuery

Para recorrer un array con jQuery podemos utilizar el comando .each(). Su definición es:

jQuery.each( collection, callback(indexInArray, valueOfElement) )

Es decir pasamos como primer parámetro el array y como segundo una función que recibe como el índice del elemento recorrido y su valor.

Un ejemplo de su uso:


var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };

jQuery.each( obj, function( i, val ) {
 $( "#" + i ).append( document.createTextNode( " - " + val ) );
});

En el ejemplo anterior se crearían los siguientes textos:

-1
-2
-3
-4
-5

…colocados respectivamente dentro de elementos dentro del DOM cuyos identificadores sean: «one», «two», «three», etc…

Consumir una API con jQuery y AJAX

En este post intentaremos aprender a consumir una API con jQuery y AJAX.

Nota: en el ejemplo que vamos a desarrollar partimos con que nuestro servicio API se encuentra en la misma web donde vamos a desarrollar el cliente.

Partimos también con que existen dos métodos en la API: obtención de una lista de todos los productos (URI: «/api/products») y seleccionar un producto por un identificador (URI: «/api/products/id«). La URI podrá cambiar dependiendo donde se ubique el servicio… en muchos casos puede ser del tipo «http://…»

Usaremos jQuery para realizar llamadas AJAX y actualizar la página con los resultados.

Empezamos por crear nuestro archivo vacío HTML. En él escribiremos lo siguiente:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Product App</title>
</head>
<body>

<div>
 <h2>All Products</h2>
 <ul id="products" />
 </div>
 <div>
 <h2>Search by ID</h2>
 <input type="text" id="prodId" size="5" />
 <input type="button" value="Search" onclick="find();" />
 <p id="product" />
 </div>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
 <script>
 var uri = 'api/products';

$(document).ready(function () {
 // Send an AJAX request
 $.getJSON(uri)
 .done(function (data) {
 // On success, 'data' contains a list of products.
 $.each(data, function (key, item) {
 // Add a list item for the product.
 $('<li>', { text: formatItem(item) }).appendTo($('#products'));
 });
 });
 });

function formatItem(item) {
 return item.Name + ': $' + item.Price;
 }

function find() {
 var id = $('#prodId').val();
 $.getJSON(uri + '/' + id)
 .done(function (data) {
 $('#product').text(formatItem(data));
 })
 .fail(function (jqXHR, textStatus, err) {
 $('#product').text('Error: ' + err);
 });
 }
 </script>
</body>
</html>

Nota: Existen muchas maneras de obtener jQuery, en este caso lo obtenemos de un recurso compartido en Internet (http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js)

Obtener la lista de productos

Para obtener la lista de productos se envía una petición HTTP (GET) a la uri donde se encuentra el servicio API. (/api/products).

La función de jQuery getJSON envía una petición asíncrona AJAX. La respuesta esperará por tanto un array de objetos JSON.  La función «done» especifica que la respuesta ha llegado. Cuando llegue la respuesta actualizaremos el DOM con la información que hemos recibido.


$(document).ready(function () {
 // Send an AJAX request
 $.getJSON(apiUrl)
 .done(function (data) {
 // On success, 'data' contains a list of products.
 $.each(data, function (key, item) {
 // Add a list item for the product.
 $('<li>', { text: formatItem(item) }).appendTo($('#products'));
 });
 });
});

Obtener un elemento pasando un identificador

Para obtener un producto por un un identificador, enviaremos un petición HTTP GET a «/api/products/id«, donde id es el identificador de producto.


function find() {
 var id = $('#prodId').val();
 $.getJSON(apiUrl + '/' + id)
 .done(function (data) {
 $('#product').text(formatItem(data));
 })
 .fail(function (jqXHR, textStatus, err) {
 $('#product').text('Error: ' + err);
 });
}

Menús con scroll

En este post explicaré la forma de hacer menús con scroll típicos en sitios web de una sola página.

Antes de nada decir que existen unos cuantos plugins de jquery para realizar webs de una sola página en el que viene implementado ya un menú de este tipo. Por ejemplo son muy conocidos Smint y CoolKitten. En el ejemplo de este post utlizaremos jquery waypoints.

Lo primero que debemos hacer es crear las distintas secciones a los que se dirigirán los enlaces del menú.


...

<div id="seccion_1">...</div>

<div id="seccion_2">...</div>

<div id="seccion_3">...</div>

...

Posteriormente implementaremos el menú con enlaces a cada uno de las secciones establecidas anteriormente.


<div id="menu">

<ul>

<li><a id="menu_seccion1" href="#seccion_1">ir a seccion 1</a></li>

<li><a id="menu_seccion2" href="#seccion_2">ir a seccion 2</a></li>

<li><a id="menu_seccion3" href="#seccion_3">ir a seccion 3</a></li>

</ul>

</div>

Este menú necesitamos dejarlo fijo en algún punto para que sea visible durante todo el scroll de la página. Por ejemplo en nuestro caso lo situaremos debajo de la pantalla. Para ello usaremos css y la propiedad position fixed:


#menu

{

position:fixed;

bottom:0;

}

Con todo esto y utilizando únicamente html y css podemos crear un menú con scroll. El problema es si queremos que los elementos del menú se activen o desactiven dependiendo de que sección nos encontremos. Para hacerlo ya necesitaremos javascript. Con jquery y jquery waypoints podemos manejar eventos que se produzcan cuando el usuario se encuentre en una u otra sección de la página. No olvideis importarlo a vuestra página.


$('#seccion_1') .waypoint(function(direction) {

//esto se ejecutará cuando el usurio esté dentro de la sección 1

alert('esto se ejecutará cuando el usurio esté dentro de la sección 1');
}

Con esto, jquery y un poco de imaginación podemos hacer casi todo. Entre otras cosas cambiar la clase css de cualquier elemento del menú cuando se llegue a la sección indicada.


$('#seccion_1') .waypoint(function(direction) {

$('#menu_seccion1').addClass('menu_active');

}

Scroll lento a secciones de una página mediante enlaces

Quizá ya conozcamos que si estamos en una página que tiene distintas secciones se puede ir a través de un menú o enlaces.

...
<div id="seccion_1">contenido 1</div>
<div id="seccion_2">contenido 2</div>
...
<a href="#seccion_1">ir a sección 1</a>
<a href="#seccion_2">ir a sección 2</a>
...

La navegación a estos elementos o capas es instantánea. Con jQuery podemos establecer la velocidad con la que se producirá la navegación haciendo un efecto de transición que en muchas ocasiones es visualmente más atractivo.

Lo primero que haremos es importarnos, si no la tenemos ya, nuestra librería de jQuery.

Después para cada elemento que queramos el efecto de animación usaremos este código:

$('a[href=#seccion_1]').click(function (event)
{
event.stopPropagation();
var Position = jQuery('[id="seccion_1"]').offset().top;
jQuery('html, body').animate({ scrollTop: Position }, 1100);
return false;
});

Donde pone 1100 se refiere al tiempo en milisegundos que estará realizando la animación.

Con este valor podemos establecer un scroll lento a secciones de una página.

Obtener índice seleccionado de un tab con jquery

Si tenemos una pestaña y queremos obtener índice seleccionado de un tab con jquery puedes probar:

...
var current_index = $("#tabs").tabs("option","selected");
...

En caso de que no funcione es porque en la versión más reciente de jquery se utiliza lo siguiente:

...
var current_index = $("#tabs").tabs('option', 'active');
...

Donde #tabs es el id de la capa que contendrá las pestañas con jquery.

Obtener imágenes desde Instagram para mostrarlas en tu Web

Si deseas obtener en tu Web las imágenes que tienes desde tu cuenta de Instagram estos son los pasos a seguir:

  1. Primero debes entrar en tu cuenta de instagram y en el pie de página buscar el enlace al desarrollo de la API
  2. Deberás crear un nuevo cliente, es decir tu aplicación web. Para ello existe un botón llamado «Gestionar Clientes». Una vez dentro deberás «Registrar un nuevo cliente».
  3. Aparecerá un formulario que deberás rellenar con el nombre de la aplicación (cualquiera vale), una descripción (la que desees), la url de tu sitio web y una url que se encuentre dentro de tu sitio  a donde redirigirá instagram para comprobar que te has autenticado correctamente. En realidad en este paso estamos registrando la aplicación, pero deberás registrar también el cliente para poder obtener el ClientID que es necesario para poder seguir adelante.
  4. Con esto hecho deberás ir a tu web y colocar el siguiente código sustituyendo el [clientid] y [callbackuri] por tus datos.
    var access_token = location.hash.split('=')[1];
     if (location.hash) {
     } else {
     location.href="https://instagram.com/oauth/authorize/?display=touch&client_id=[clientid]&redirect_uri=[callbackuri]/&response_type=token";
     }
  5. Con un navegador escribirás la url donde hayas colocado este código y si todo sale correctamente serás redirigido a la url que escribiste como callbackuri. Atento aquí a la url porque si todo es correcto se pasará como parámetro el access-token. Copialo y guárdalo porque lo necesitarás más tarde. En este punto puedes quitar el código anterior porque tu aplicación ya está autenticada.
  6. Ya queda menos… para el siguiente paso necesitas obtener tu identificador de usuario que no es lo mismo que tu identificador de cliente. Para obtenerlo puedes utilizar este tool de Instagram.
  7. Ya podemos obtener las fotos de Instagram con el siguiente código, sustituyendo claro está tu [userid] y tu [access_token]:
    $(function() {
     $.ajax({
     type: "GET",
     dataType: "jsonp",
     cache: false,
     url: "https://api.instagram.com/v1/users/[userid]/media/recent/?access_token=[access_token]",
     success: function(data) {
     for (var i = 0; i < 6; i++) {
     if(data.data[i]) { // to prevent a bug with non missing images
     $(".instagram").append("
    <div class="instagram-placeholder"><a href="&quot; + data.data[i].link +&quot;" target="_blank"><img class="instagram-image" alt="" src="&quot; + data.data[i].images.thumbnail.url +&quot;" /></a></div>
    ");
     }
     }
     }
     });
     });
  8. Para que esto funcione debes de tener una capa con la clase «instagram» ya que es ahí donde añade los elementos con jquery.

Últimas tecnologías Web

Muchas tecnologías avanzan vertiginosamente hacia un futuro que seguramente no podamos ni imaginar. Este mismo futuro no nos permite ni un solo descanso y nos obliga a seguir aprendiendo. En el área del desarrollo y programación web pasa lo mismo.

Cada cierto tiempo los lenguajes de programación como ASP.Net, PHP, silverlight, etc. realizan cambios y mejoras en su framework aumentando, refinando y adaptando su funcionalidad y, al mismo tiempo, dejando poco a poco obsoletas versiones anteriores.

Por eso es recomendable utilizar las últimas tecnologías al servicio de los clientes. Tecnologías Web:

  • Web 2.0 – jQuery, XHTML, HTML5, AJAX
  • PHP 5.x
  • .Net 4.0 y .Net 4.5 – ASP.Net, Silverlight, Web Services, WCF, Entity Framework
  • CMS – Joomla! 2.5, joomla! 3.0, Drupal 7, WordPress 3.x
  • Datos y SGDB – SqlServer, Oracle, MySql, Pervasive, ODBC, XML, csv…
  • Servidores Web – IIS 6, IIS 7 y Apache.

Si lo prefiere para posibles mantenimientos de antiguos sitios web también tengo amplia experiencia en las versiones anteriores de PHP, ASP Clásico, ASP.Net (1.0, 2.0, 3.0 y 3.5) y joomla 1.6