Experiencias de un programador curioso del SEO
Jquery
Articulos relacionados con este maravilloso framework basado en prototype
Plugins imprescindibles para Jquery – jgfeed (lector rss)
25 nov
Jgfeed es un plugin para jquery que nos permite leer fuentes RSS devolviendonos los feed (entradas) en formato JSON.
Jgfeed utliza la API AJAX de Google para feeds para obtener las entradas de una fuente RSS y devolvernos una estructura JSON de una forma sencilla y optima que nos permitira incluir contenido sindicado en nuestras páginas de forma fácil. Ademas podemos utlizar Jgfeed con otros plugins de jquery para conseguir unas interficies de usuario al estilo Google Reader 
.
Ejemplo de implementación de jgfeed
$.jGFeed('http://yokese.wordpress.com/feed/rss/',
function(feeds){
// revisamos que no haya errores
if(!feeds){
// si se ha encontrado un error salimos de la función
return false;
}
// recorremos los feeds y mostramos la información deseada
for(var i=0; i < feeds.entries.length ; i++){
var entry = feeds.entries[i];
// titulo de la entrada
entry.title;
}
}, 10); // 10 son el numero de entradas a devolver por el rss
Campos de la estructura JSON que devuelve jgFeed
| Campo | Descripción |
|---|---|
| title | Titulo de la entrada rss |
| link | Enlace a la página original de la entrada rss |
| author | Autor de la entrada rss |
| publishedDate | Fecha de la publicación de la entrada |
| contentSnippet | Contenido reducido (sumario) de la entrada rss |
| content | Contenido completo de la entrada rss |
| categories | Array de cadenas de texto con las categorias a las que pertenece la entrada |
Argumentos que puede recibir el constructor de jgfeed
| Argumento | Descripción |
|---|---|
| url | URL del feed RSS |
| callback | Funcion a ejecutar despues de cargar las entradas, recibe por parametro el array de feeds |
| num (opcional) | Numero de entradas a devolver (por defecto 3) |
| key (opcional) | Google API Key (por si deseas usar la tuya propia |
Plugins imprescindibles para Jquery – jQuery Menu
20 nov
En esta ocasión os traigo dentro de la serie Plugins imprescindibles para Jquery el plugin JQuery Menu.
Ejemplo de uso de JQuery Menu
El plugin JQuery Menu es una extensión a los controles de usuario que ofrece Jquery UI del cual os hablare en el siguiente artículo. Como extensión usa los mismos themes que Jquery UI y de esta forma adaptarse e integrarse al resto de controles.
A continuación la implementación de un código de ejemplo de Jquery UI de un sencillo menú.
Ejemplo de implementación de JQuery Menu
Inicialización del plugin
$('#flat').menu({
content: $('#flat').next().html(), // grab content from this page
showSpeed: 400
});
Enlace y lista utlizada por el plugin
<a tabindex="0" href="#search-engines" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flat"><span class="ui-icon ui-icon-triangle-1-s"></span>flat menu</a> <div id="search-engines" class="hidden"> <ul> <li><a href="#">Apples</a></li> <li><a href="#">Oranges</a></li> <li><a href="#">Bananas</a></li> <li><a href="#">Cheetos</a></li> </ul> </div>
Resultado obtenido
Resultado obtenido del código implementado
Plugins imprescindibles para Jquery – jpPlot
27 sep
En esta nueva entrega de la serie Plugins imprescindibles para Jquery os mostrare el plugin de jquery jqPlot .
jqPlot utiliza el elemento Canvas para renderizar en cliente gráficos dinámicos por medio de programación. Una de las ventajas fundamentales de usar este plugin de jquery es la posibilidad de incluir en nuestras páginas gráficos interactivos sin necesidad de sobrecargarlas con pesados flash.
Ejemplo de jqPlot
Al igual que todos los la mayoria de los plugin de jquery jqPlot nos brinda una configuración bastante asequible para todos aquellos que conocemos el framework de Jquery .
Ejemplo de implementación de jqPlot
Resultado del código implementado
var cosPoints = [];
for (var i=0; i<2*Math.PI; i+=0.1){
cosPoints.push([i, Math.cos(i)]);
}
plot1 = $.jqplot('chart1', [cosPoints], {
series:[{showMarker:false}],
axes:{
xaxis:{
label:'Angle (radians)',
autoscale: true
},
yaxis:{
label:'Cosine',
autoscale: true
}
}
});
Ademas jqPlot cuenta con una excelente documentación que nos permitira sacar el máximo rendimiento a este gran plugin.
Plugins imprescindibles para Jquery – slideViewer
21 ago
Bienvenidos a la segunda entrega de la serie Plugins imprescindibles para Jquery en esta ocasión os hablare del plugin de jquery slideViewer.
SlideViewer es un plugin de jquery cuya utilidad es la de generarnos a partir de una lista html de imagenes una galeria de imagenes con una interficie y transiciones atractivas.
jQuery slideViewer
SlideViewer nos permite modifiar su aspecto desde la hoja de estilos pudiendose adaptar de esta manera al diseño de nuestra interficie.
Ejemplo Simple
Dentro del tag HEAD
jQuery(function(){jQuery("div#<code>ejemploSlideviewId</code>").slideView({toolTip: false});
Dentro del tag BODY
<ul> <li><img src="img1.jpg" alt="alt img 1" /></li> <li><img src="img2.jpg" alt="alt img 2" /></li> <li><img src="img3.jpg" alt="alt img 3" /></li> <li><img src="img4.jpg" alt="alt img 4" /></li> <!--eccetera--> </ul> </div>
Tambien podemos usar slideViewer con otros plugins como jQuery lightBox plugin (del que os hablare en un próximo articulo) para usar slidwViewer como visor de vistas en miniatura y máximizarlas con lightBox dotando a nuestra interficie de una sencillez y elegancia dignas del Iphone 
.
SlideViewer interactuando con Ligthbox
Ejemplo con LigthBox
Dentro del tag HEAD
jQuery(function(){
jQuery("div#<code>ejemploSlideviewId</code>").slideView({toolTip: false});
jQuery("div#<code>ejemploSlideviewId</code>").lightBox({fixedNavigation:true});
});
Dentro del tag BODY
<div id="ejemploSlideviewId"> <ul> <a href="rutaimg1" title="title img1"><li><img src="img1.jpg" alt="alt img 1" /></li></a> <a href="rutaimg1" title="title img1"><li><img src="img2.jpg" alt="alt img 2" /></li></a> <a href="rutaimg1" title="title img1"><li><img src="img3.jpg" alt="alt img 3" /></li></a> <a href="rutaimg1" title="title img1"><li><img src="img4.jpg" alt="alt img 4" /></li></a> <!--eccetera--> </ul> </div>
Plugins imprescindibles para Jquery – BlockUI
12 ago
Para los que no conozcais Jquery es un libreria framework de javascript basada en prototype que nos facilita a los desarrolladores crear interfaces enriquecidas de usuario e interaccionar con los elementos html de forma mucho más sencilla.
Pasadas las presentaciones pertinentes en esta serie de articulos tratare de mostraros en mi opinión los plugins imprescindibles para Jquery que debeis conocer para poder llevar a buen puerto vuestros desarrollos web con interfaces usables e intuitivas para el usuario. En este primer capitulo os mostrare blockui uno de mis últimos descubrimientos en la extensa materia de los plugins para jquery
jquery.blockUI.js
BlockUI es uno de los magnificos plugins realizados por malsup ; concretamente blockui como su nombre indica sirve para bloquear al usuario ciertas zonas de una página web. Si usamos AJAX en nuestras aplicaciones esto nos será muy útil para mostrar el típico mensaje de loading espere… mientras efectuamos las operaciones en el lado del servidor.
BlockUI Iphone style
BlockUI nos brinda tambien la posibilida de mostrar Growl messages notificaciones al usuario cuando realicemos alguna operación que no actualice el contenido activo
Growl message con BlockUI
Para más información acerca de este plugins no dudes en visitar su página oficial
