Este es un pequeño truco muy sencillo que sirve para usar como imagen por defecto o imagen no encontrada. Para esto basta este sencillo código:
1 | <img onerror="this.src='default.jpg';" src="http://midominio.com/miimagen.jpg"> |
En caso que no se encuentre la imagen miimagen.jpg automáticamente se cargará la imagen default.jpg
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.
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 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
Últimamente se han puesto de moda las búsquedas instantaneas usando AJAX como el aún en prueba Google Instant o el script experimental para hacer un YouTube Instant, en realidad implementar soluciones así no es nada del otro mundo el verdadero problema radica en que generan un mayor tráfico y pueden sobrecargar el servidor si tienen demasiados usuarios.
En este tutorial de dos partes voy a destripar el codigo de youtube instant, simplificarlo un poco y mostrar como hacer los cambios para que funcione con cualquier sitio web 2.0 (entendiendo que esos son los sitios que cuentan con un API para acceder a su contenido externamente ya sea enformato XML o Json), este script podría funcionar con YouTube, Flickr, Google, Google Images, etc…
Como no cuento con una base de datos que contenga los términos más buscados y que además me corrija la ortografía y ofrezca posibles búsquedas, voy a hacer que Google se encargue de esa chamba y de eso trata la primera parte del tutorial.
Básicamente sólo necesitamos un campo input, un span que nos indica la palabra clave que estamos buscando y un div que vaya a contener los resultados
1 2 3 4 5 6 7 |
Ahora necesito incluir jquery y este archivo instant.js que es el encargado de pedirle a google sugerencias para los términos de búsqueda y en la 2da parte además deberá conectarse con un API y darnos resultados.
Bueno veamoslo por partes:
Lo primero es crear las variables que nos indiquen el estado de la búsqueda y además asignen los eventos cuando escribo y cuando dejo de escribir
1 2 3 4 5 6 7 8 9 10 11 12 | function iniciar() { // Inicializa variables y eventos currentSearch = ''; currentSuggestion = ''; xhrWorking = false; // Indica si la consulta XHR se esta ejecutando searchPending = false; // Indica si hay otra busqueda var searchBox = $('#searchBox'); searchBox.keyup(doInstantSearch); searchBox.submit(doInstantSearch); // Focus search box searchBox.focus(); } |
De esta forma cuando escribo un término ejecuta la funcion doInstantSearch que primero comprueba si hay cosas que buscar, luego borra la busqueda pasada y finalmente mediante AJAX le pide a Google que le envie palabras clave
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | function doInstantSearch() { if (xhrWorking) { searchPending = true; return; } var searchBox = $('#searchBox'); // No repite la busqueda a menos que cambie la busqueda if (searchBox.val() == currentSearch) { return; } currentSearch = searchBox.val(); // Borra los resultados de la busqueda pasada if (searchBox.val() == '') { $('#moreVideosWrapper').hide('slow'); currentSuggestion = ''; updateSuggestedKeyword('<strong>Busqueda Instantanea</strong>'); return; // don't search for anything } // Empieza la busqueda searchBox.attr('class', 'statusLoading'); keyword = searchBox.val(); // Usa el sistema de sugerencias de google var the_url = 'http://suggestqueries.google.com/complete/search?hl=es&hjson=t&jsonp=window.xt.handleResponse&q='+encodeURIComponent(searchBox.val())+'&cp=1'; /* Este otro es para sugerencias con youtube var the_url = 'http://suggestqueries.google.com/complete/search?hl=es&ds=yt&client=youtube&hjson=t&jsonp=window.yt.www.suggest.handleResponse&q='+encodeURIComponent(searchBox.val())+'&cp=1'; */ $.ajax({ type: "GET", url: the_url, dataType: "script" }); xhrWorking = true; } |
A su vez esta función va a invocar a otra, fijémonos en la linea var the_url = ‘http://suggestqueries.google.com/complete/search?hl=es&hjson=t&jsonp=window.xt.handleResponse&q=’+encodeURIComponent(searchBox.val())+’&cp=1′;
Tenemos que procesar el array que nos envia google con posibles sugerencias para extraer unicamente la más acertada, también sería posible que se genere un combo con el resto de opciones pero para hacerlo más simple me voy a conformar con una.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | xt = {}; xt.handleResponse = function(suggestions) { // Busca la 1era sugerencia var searchTerm = parseSuggestionsString(suggestions); // Si no hay sugerencias busca esa palabra if (!searchTerm) { searchTerm = keyword; $('#searchTermKeyword').html(searchTerm+' (Exact search)'); } else { $('#searchTermKeyword').html(searchTerm); if (searchTerm == currentSuggestion) { doneWorking(); return; // } } /// Busca la primera URL getTopSearchResult(searchTerm); currentSuggestion = searchTerm; } |
Esa función a su vez debe llamar otra función encargada de parsear el array, una 2da funcion que devuelve datos y veré en la 2da parte del tutorial y finalmente una 3era función que finaliza la búsqueda.
//// Actualización
Puedes ver la 2da parte de este tutorial AQUI
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.
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; ?> |
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
Siempre resulta un problema usar una fuente ya que existen tantos sistemas operativos y navegadores que no es posible saber si tendrán la fuente que queremos y puedan ver nuestra página web tal cual la diseñamos, existen algunas soluciones basadas en flash pero resultan un tanto pesadas, para solucionar estos problemas surge Cufon.
Lo primero serñia descargar el script desde AQUI y lo añadimos en la cabecera de nuestro sitio, algo como:
Para poder usar una fuente no podemos tenerla en su formato original TTF sino que debemos convertirla a un formato especial desde la propia página de cufón usando su conversor automático esto nos va a generar un archivo .js que debemos añadir a nuestra cabecera:
1 2 3 4 |
Esto añade la fuente Myriad Pro y luego indica que debe reemplazar el titulo h2 que tenga como atributo MyriadPro
Últimos Comentarios