Archive for category: AJAX

17Sep 2010 1 Comment

Jquery: Búsqueda Instantanea parte 2

Categories: AJAX, javascript - Tags: , , ,

Como prometí aqui va la segunda parte del tutorial para búsqueda instantanea, voy a mostrar como adaptarlo a 2 páginas web distintas en el primer caso una forma simple usando la web de NeoTeo y para el segundo caso voy a hacer un Flickr Instant usando su respuesta JSON.

NeoTeo

En este caso no existe una respuesta JSON que podamos parsear y mostrar así que usaré un iframe con id “miframe” que transmita mi búsqueda y la muestre. Para ello voy a usar una sola función llamada “getTopSearchResult” la que a su vez invoca la función doneWorking que básicamente nos indica que la búsqueda fue exitosa, ya hablaré de esta más adelante.

1
2
3
4
5
function getTopSearchResult(keyword) {  
    var the_url = 'http://www.neoteo.com/tag/'+keyword+'.neo';
    doneWorking();
    $("#miframe").attr('src', the_url);
}

Flickr Instant

Flickr al igual que la gran mayoría de portales web 2.0 si ofrece resultados en formato Json, asi que voy a provecharme de esta característica para buscar resultados y luego poder mostrarlos correctamente ordenados.

Primero voy a buscar resultados con esta función:

1
2
3
4
5
function getTopSearchResult(keyword) {
     var the_url = 'http://api.flickr.com/services/feeds/photos_public.gne?tags='+encodeURIComponent(keyword)+'&format=json&jsoncallback=?';
    $.getJSON(the_url, displayImages);
    doneWorking();
}

Ahora el problema es convertir ese resultado json en algo más coherente y util para el usuario, lo que logro con la función “displayImages”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function displayImages(data) {                                                                                                                                  // inicia la busqueda
        ////var iStart = Math.floor(Math.random()*(11));           
        // Empezamos
        var htmlString = "<ul>";                   
       
        // Mostramos resultados
        $.each(data.items, function(i,item){   
                // Decimos que muestre thumbnails cuadrados
                var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");     
               
                // Empezamos a mostrar uno por uno
                htmlString += '<li><a href="' + item.link + '" target="_blank">';
                htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '" border="0" />';
                htmlString += '</a></li>';
        });    
       
    // Finalmente llenamos el DIV
    $('#imagesWrapper').html(htmlString + "</ul>");
}

Este método es válido para cualquier resultado json de donde sea que provengam basta alterar los nombres de las variables que no siempre son link, title, etc

Ver Demo
Download

02Sep 2010 8 Comments

Jquery: Interactuando PHP con elementos sin recargar

Categories: AJAX, javascript - Tags: ,

Para entender este tutorial es necesario tener una mínima base de PHP y Jquery, además de haber leido este otro tutorial. Una vez que tengas todo eso claro vamos a ver como hacer que javascript responda según la respuesta que de el script PHP.


Este script se podría utilizar para verificar si un dato ha sido actualizado, verificar si encontró un registro, etc, etc. Yo por una cuestión de mantener simple el ejemplo voy a hacer que script.php genere un número aleatorio entre el 1 y el 20, si el número generado es mayor a 10 mostrará un mensaje (ganaste), de lo contrario mostrará otro mensaje, si en vez de ese else no pongo nada pues simplemente no se actualizará el DIV. Tengamos en mente que no sólo puede actualizarse un DIV es posible mostrar mensajes, cargar formularios y hacer cualquier cosa que javascript y nuestra imaginación permita.

miscript.php

1
2
3
4
5
6
<?php
/// aqui puedo hacer invocaciones a la base de datos o lo que se me ocurra
$minumero=rand(1,20);
/// retorno una respuesta
echo $minumero;
?>

Mi codigo javascript

Luego de invocar a jquery, necesitariamos el sgte. código:

1
2
3
4
5
6
7
8
9
10
11
function recargar(){   
    var variable_post="Mi texto recargado";
    $.post("miscript.php", { variable: variable_post }, function(data){
        //// Verificamos la rpta entregada por miscript.php
        if (data>10) {
            $("#recargado").html('Has ganado con un puntaje de: '+data);
        } else {
            $("#recargado").html('Has perdido con un puntaje de: '+data);
        }  
    });        
}

Observación 1: Si fuera una invocación a la base de datos puedes enviarle a javascript un valor boolena true/false para saber si se encontraron resultados.

Observación 2: Esto funciona bien con respuestas simples, si requiero devolver varias variables lo mejor es enviarlas como cadena y luego parsearlas algo como: mivariable1=algo&mivariable2=algo&mivariable3=algo… pero si necesitas recoger un gran volumen de datos como retorno lo ideal sería obtener una respuesta XML o JSON



20Aug 2010 0 Comments

Sammy: url ajax con soporte del boton atras

Categories: AJAX - Tags:

Seguramente han visto en Facebook que se carga contenido AJAX y al hacerlo se agrega una ruta en el browser(navegador) de tal forma que si apretamos el botón atrás se carga el contenido anterior a la llamada AJAX, pues existe una solución muy simple para hacer esto mismo usando Jquery allí es donde estra a jugar sammy.js

Lo primero es invocar a jquery y a sammy, algo como:

1
2
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/sammy.js"></script>

Luego en el body vamos a insertar un pequeño menu y el contenedor que nos va a servir para el ejemplo:

1
2
3
4
5
6
7
8
<div id="nav">
        <ul>
            <li><a href="#/inicio">inicio</a></li>
            <li><a href="#/formulario">formulario</a></li>
            <li><a href="#/label/drafts">drafts</a></li>
        </ul>
    </div>
<div id="content"></div>

Antes de complicar las cosas veamos como luce la versión más simple:

1
2
3
4
var ratPack = $.sammy(function() {
this.element_selector = '#content';
       // todas nuestras rutas irían aquí
});

En nuestro menu hay 3 rutas: #/inicio, #/formulario, #/label/drafts
Eso significa que por cada ruta debemos insertar un código similar a este:

1
2
3
4
this.get('#/inicio', function(context) {
              context.app.swap('');
              context.$element().append('<h1>inbox</h1>');
});

Lo único que hago allí es que al ingresar la ruta misitio.com#/inicio se va cargar en el div content un titulo H1
Pueden ver un ejemplo más complicado incluyendo envío de formularios AQUI

Para el envío de formularios usando el método POST el código sería algo así:

1
2
3
4
5
this.post('#/formulario', function(context) {
              context.app.swap('');
              var to = this.params['to'];
              context.$element().append('<h1>hola ' + to + '</h1>');
          });

Igualmente para los que hablan inglés pueden ver el tutorial que tomé como modelo AQUI

12Aug 2010 0 Comments

SEO: ¿Es AJAX malo para buscadores?

Categories: AJAX, Posicionamiento, seo - Tags: ,

Esta es una pregunta muy frecuente que yo considero depende mucho del uso que le damos al ajax, y esto esta ligado a la accesibilidad porque no es lo mismo poner un javascript que invoca todo que un pequeño script para darle algo de animación a nuestro sitio.

Hay tal variedad de scripts que no podría decir tal afecta y tal no pero voy a hablar de los scripts más comunes y de ahí un método para testear el resto.

Acordeón

Me refiero a estos script que ocultan parte del texto y la muestran al darle click a un botón, los spiders de los buscadores ven la página sin CSS ni javascript así que verán el texto completo que sólo esta oculto en un div con overflow hidden, por lo que no afecta el SEO.

Galerías AJAX estilo slideshow

Usualmente estas galerías funcionan con un link como este:

1
<a href="miimagen.jpg" rel="lightbox[]"><img src="thumb.jpg"></a>

Mi sugerencia allí ya sea que usemos o no AJAX es agregar a la imágenes el atributo ALT que es el que usan los buscadores

1
<a href="miimagen.jpg" rel="lightbox[]"><img src="thumb.jpg" alt="descripcion de mi imagen"></a>

Tabs o pestañas

En este caso habría que hacer un distingo entre aquellas que ocultan el texto y lo muestran según la pestaña seleccionada y aquellas que invocan el contenido dinámicamente. Las segundas no serán enlazadas por los buscadores y las primeras serán enlazadas como parte del texto de toda la página aunque sería muy interesante si pudiera enlazarse el área concreta.

Invocar contenidos sin recargar la página

Este es un truco muy popular que yo recomiendo usarlo únicamente para envío de formularios o para mostrar mensajes de advertencia.
Habría que hacer el distingo, no es lo mismo usar este link:

1
<a href="#" onclick="javascript:carga(1);">

Ese nunca será enlazado pero este otro si:

1
<a href="mipagina.html" onclick="javascript:carga(1); return false;">

Debemos tener presente que aunque las páginas invocadas con el segundo link son indexadas no podemos tener control sobre sus metatags ni el título así que los buscadores las indexarán como vean por conveniente.

¿Cómo se si mi página AJAX será indexada?

La mejor forma de comprobar esto es deshabilitar por completo el CSS y el javascript y empezemos a navegar en nuestro sitio si podemos ver todas las secciones y acceder a nuestros links significa que estamos trabajando bien si por el contrario acabamos viendo un texto informe imposible de navegar entonces tenemos un largo trabajo por hacer.

08Feb 2010 2 Comments

Elementos de interfaz(UI) para web

Categories: AJAX, Diseño - Tags: , ,

Siempre ando buscando recursos para web y me encontré con esta interesante colección de elementos de interfaz totalmente gratis lista para usar en algún proyectos con ajax. Incluye botones, avisos, barras de desplazamientos, menus, combos, etc.

Web UI set

Pueden bajarla AQUI

Ni bien publiqué este post me encontré con otras opciones muy interesantes que incluyen no sólo botones, también cursores e incluso elementos de interfaz, pueden verlo AQUI

Suscribete

Ahora también puedes suscribirte via correo electrónico

Ingresa tu dirección de correo:

Delivered by FeedBurner


Facebook

Mi Galeria flickr

[ Ver más ]

© Copyright - Miguel Manchego - Design by Kriesi