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

Argumentos que puede recibir el constructor de jgfeed

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

]]> http://www.unprogramadormas.com/20/11/2009/plugins-imprescindibles-para-jquery-jquery-menu/feed/ 0 http://www.unprogramadormas.com/27/09/2009/plugins-imprescindibles-para-jquery-jpplot/ http://www.unprogramadormas.com/27/09/2009/plugins-imprescindibles-para-jquery-jpplot/#comments Sun, 27 Sep 2009 11:19:00 +0000 jmnieves http://yokese.wordpress.com/?p=125 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. ]]> http://www.unprogramadormas.com/27/09/2009/plugins-imprescindibles-para-jquery-jpplot/feed/ 0 http://www.unprogramadormas.com/21/08/2009/plugins-imprescindibles-para-jquery-%e2%80%93-slideviewer/ http://www.unprogramadormas.com/21/08/2009/plugins-imprescindibles-para-jquery-%e2%80%93-slideviewer/#comments Fri, 21 Aug 2009 07:40:21 +0000 jmnieves http://yokese.wordpress.com/?p=114 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>

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