Cuando en un proyecto se presenta la necesidad de mostrar y manejar grandes cantidades de datos, las tablas suelen ser los elementos más adecuados para llevar a cabo su presentación. Si bien, el uso de tablas para la maquetación de sitios ha sido satanizado en los últimos años, su función de despliegue y acomodo de información sigue cumpliendo un papel muy importante para el manejo de contenido.

Cuando este contenido tiende a extenderse demasiado, es recomendable buscar implementar algún tipo de funcionalidad que le permita al usuario filtrar la información, para que de esa manera pueda encontrar de manera más rápida lo que esta buscando. Para lograr esto, se puede recurrir a peticiones a servidor mediante algún lenguaje como PHP, también se puede recurrir a ajax para agregar dinamismo, o simplemente utilizar jQuery para depurar los datos que ya han sido desplegados en la tabla.

Para poder llevar a cabo una sencilla pero eficiente filtración de datos, en este artículo haremos uso de la librería jQuery, explicando cada paso necesario para llegar a la estructura adecuada.

Establecimiento de las tablas

Lo primero que debemos hacer, es establecer las tablas que van a contener los datos que queremos mostrarle al usuario. Para aquellos que tengan un poco de experiencia con HTML, este paso puede parecer bastante sencillo, pero es común que al momento de estructurar una table, el desarrollador tienda a omitir ciertas etiquetas diseñadas para aumentar la semántica del código y crear una especialización de funciones.

Es recomendable hacer uso de etiquetas como “thead”, “tbody” y “th” para que quede bien definida la función de cada parte de la table, y además para que se que nos facilite la manipulación de dicha estructura con JavaScript. La etiqueta “thead” sirve para definir la parte de la table donde se encontrarán los encabezados, cada encabezado de columna deberá ir dentro de una etiquta “th”. Por su parte, la etiqueta “tbody” nos sirve para indicar el incio y el fin del cuerpo de nuestra tabla, dentro de esta sección haremos uso de las etiquetas “tr” para definir filas y “td” para establecer cada celda.

Añadir estilo a las filas

Después de tener nuestra tabla definida, es tiempo de pasar a darle un poco de estilo para hacer que la visualización luzca mejor para el usuario. Un cambio en el CSS que tiende a mejorar en gran medida la experiencia del usuario, es la adaptación de las filas estilo Cebra.

El estilo Cebra hace que las filas pares luzcan de un color distinto a las filas impares, de esa manera el usuario podrá visualizar mejor los datos de cada renglón de la tabla, haciendo que sea más difícil equivocarse y mezclar datos. Esta es una técnica de organización muy recurrida por los diseñadores web, debido a que es muy fácil de aplicar y no requiere de añadir alguna clase de plugin o librería.

Para poder lograr esto, lo primero que debemos hacer es establecer los valores de estilo para la tabla en general:

Con esto indicamos que el color de la tabla será blanco y que su ancho se estirará hasta topar con el del padre, abarcando así su 100%. Después de esto, pasamos a enfocarnos en los elementos que conforman las filas (tr). Para poder dar estilo a esta parte de la tabla, podemos recurrir a dos métodos.

El primero de ellos requiere de menos codificación y a simple vista puede resultar más sencillo. Su funcionamiento se basa en utilizar el pseudo elemento nth-child de CSS, con él se establecen los valores de estilo para las filas pares (even) y las impares (odd), simplemente enviando como parámetro el valor correspondiente.

Con este código las filas pares lucirán de color blanco, mientras que las impares de color gris. El problema con este método, es que no es soportado por todos los navegadores. Para poder lograr una compatibilidad mayor, será necesario recurrir al segundo método:

Este código establece los mismos colores, pero con la diferencia de que para aplicarlo, tenemos que añadir la clase “impar” a las filas que así lo sean. Para poder lograr esto, vamos a recurrir a jQuery y una simple función. Recuerda que para que el siguiente código funcione, debiste haber incluido la librería de jQuery anteriormente en tu código.

Efecto hover

Para dar un toque más adecuado al estilo de nuestra tabla, podemos hacer que cuando el puntero del mouse se encuentre sobre alguna de las filas, esta cambie de color de fondo para hacerse resaltar sobre las demás. Para poder lograr esto, podemos recurrir a la pseudo elemento “:hover” de CSS.

Con esta adición, le será más fácil al usuario encontrar y ubicar datos.

El equipo de desarrollo de esta herramienta para la creación de sitios y aplicaciones accesibles desde los principales dispositivos móviles lanza una nueva versión final.

17/10/2012 – jQuery Mobile 1.2 es la última versión estable de este framework para desarrollo de interfaces móviles.

Esta versión trae como novedad más destacada un nuevo widget popup además de 100 mejoras y correcciones en toda la biblioteca con las que hacer nuestro trabajo mejor y más rápido.

Desde su lanzamiento a finales del año pasado (v.1 final) jQuery Mobile es considerada como una interesante herramienta de crear sitios y aplicaciones accesibles por smartphones y tabletas tan populares como iOS, Android, Windows Phone, BlackMerry, Symbian o Meego, entre otros.

Interesados pueden acceder a más información y descarga del nuevo jQuery Mobile 1.2 final desdejquerymobile.com.

Fuente: Desarrolloweb

Handpicked jQuery Plugins Repository v2

Clasificados por categorías según su funcionalidad todos estos plugins jQuery están listos para empezar a ser usados y disponen junto a una breve descripción una demo del mismo.

Además todos aquellos que lo deseen tienen también la posibilidad de encontrar cada uno de estos plugins en un CDN, de forma que sea posible usarlo sin ni siquiera tener que descargarlos.

En cuanto a plugins jQuery que podemos encontrar en esta selección destaca aquellos relativos a efectos visuales, funcionalidades para formularios y menús, creación de sliders, efectos en texto, o integración con redes sociales como Twitter.

Tras el lanzamiento de esta nueva versión de Handpicked jQuery Plugins Repository, todos los scripts ahora corren sobre jQuery 1.7.2. Usuarios interesados pueden acceder a este repositorio online de plugins jQuery desde iwantaneff.in/repo.

Fuente: DesarrolloWeb

Con la idea de ofrecer nuevas y sofisticasdos efectos a las animaciones al hacer desplazamientos en nuestro websites Jhon Polacek y su equipo daban a conocer recientemente este nuevo plugin jQuery.

Si quieres sorprender a los usuarios que visitan tu web con una variada y completa serie de animaciones que se desvanecen, pasan, resbalan, rebotan o mueven además de otros efectos como parallax, color, fling…., SuperScrollorama es el plugin jQuery que estabas buscando.

Compatible con la mayoría de los principales navegadores este plugín gratuito requiere jQuery para su uso y forma parte de un proyecto open source bajo licencia MIT y GPL.

Al igual que se predecesor SuperScrollorama ofrece varias opciones de configuración con la que ajustar la duración y la posición de los elementos animados.

Para Descargar dar clic AQUÍ

Fuente: DesarrolloWeb

Nivel: Medio

¿Qué es la geolocalización?

Sin entrar en si forma parte o no de HTML5, podemos definir la geolocalización como una nueva API Javascript que nos permite conocer de forma fácil nuestras coordenadas desde un navegador.

Conociendo nuestra posición

Esta API destaca por lo fácil que es usarla. Por ejemplo:

<script>
     function localizame() {
           navigator.geolocation.getCurrentPosition(coordenadas);
     }

     function coordenadas(){
           var latitud = position.coords.latitude;
           var longitud = position.coords.longitude;
     }
</script>

Con este código tan simple tenemos almacenados en las variables latitud y longitud la latitud y longitud de nuestra posición

Controlando errores

Es posible que obtengamos algún tipo de error a la hora de usar esta API. El más común para los usuarios desactualizados (vamos, los que usen IE) es que el navegador no soporte geolocalización. En ese caso controlaremos:

<script>
function localizame() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(coordenadas);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
}
</script>

Existen además otros errores relacionados con los permisos sobre privacidad del usuario, tiempo de espera, etc. Para ello crearemos una función sencilla que muestre un mensaje según el código de error, y la llamamos en la función getCurrentPosition:

<script>
        function localizame() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(coordenadas, errores);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
        }

        function errores(err) {
            if (err.code == 0) {
              alert("Oops! Algo ha salido mal");
            }
            if (err.code == 1) {
              alert("Oops! No has aceptado compartir tu posición");
            }
            if (err.code == 2) {
              alert("Oops! No se puede obtener la posición actual");
            }
            if (err.code == 3) {
              alert("Oops! Hemos superado el tiempo de espera");
            }
        }
</script>

Combinando la API de geolocalización con la API de Google Maps

Veamos los pasos directamente sobre los comentarios del código:

<!DOCTYPE html>
<html>
<head>
    <title>Localizador</title>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> /*Usamos JQuery*/
    <style>
        body{
            font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
        }
    </style>
</head>
<body>
    <header>
        <h1>Localizador mediante HTML5</h1>
    </header>
    <section>
        <article>
            <div id='map_canvas' style='width:100%; height:400px;'></div>/*Esta capa hará de elemento contenedor del mapa*/
        </article>
    </section>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> /*Cargamos la API de Google Maps*/

    <script type="text/javascript">
        var map;
        var latitud;
        var longitud;

        $(document).ready(function() {
            localizame(); /*Cuando cargue la página, cargamos nuestra posición*/
        });

        function localizame() {
            if (navigator.geolocation) { /* Si el navegador tiene geolocalizacion */
                navigator.geolocation.getCurrentPosition(coordenadas, errores);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
        }

        function coordenadas(position) {
            latitud = position.coords.latitude; /*Guardamos nuestra latitud*/
            longitud = position.coords.longitude; /*Guardamos nuestra longitud*/
            cargarMapa();
        }

        function errores(err) {
            /*Controlamos los posibles errores */
            if (err.code == 0) {
              alert("Oops! Algo ha salido mal");
            }
            if (err.code == 1) {
              alert("Oops! No has aceptado compartir tu posición");
            }
            if (err.code == 2) {
              alert("Oops! No se puede obtener la posición actual");
            }
            if (err.code == 3) {
              alert("Oops! Hemos superado el tiempo de espera");
            }
        }

        function cargarMapa() {
            var latlon = new google.maps.LatLng(latitud,longitud); /* Creamos un punto con nuestras coordenadas */
            var myOptions = {
                zoom: 17,
                center: latlon, /* Definimos la posicion del mapa con el punto */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };/*Configuramos una serie de opciones como el zoom del mapa y el tipo.
            map = new google.maps.Map($("#map_canvas").get(0), myOptions); /*Creamos el mapa y lo situamos en su capa */

            var coorMarcador = new google.maps.LatLng(latitud,longitud); /Un nuevo punto con nuestras coordenadas para el marcador (flecha) */

            var marcador = new google.maps.Marker({
/*Creamos un marcador*/
                position: coorMarcador, /*Lo situamos en nuestro punto */
                map: map, /* Lo vinculamos a nuestro mapa */
                title: "Dónde estoy?"
            });
        }
    </script>
</body>
</html>

Fuente: Cristalab

Este plugin jQuery nos permite captar y mostrar de forma sencilla feeds RSS y Atom.

FeedEk nos permite personalizar y mostrar en un widget los contenidos del canal RSS o Atom que le indiquemos.

Pese a que cada día toma más fuerza la plataforma Twitter como espacio de comunicación de noticias e información, los feeds siguen teniendo un peso como medio de redifusión del contenido web.

Hasta el momento los interesados en los principales formato de feeds (RSS y Atom) debían usar un programa para acceder a las fuentes suscritas desde un mismo lugar. No obstante, ahora gracias a FeedEk vamos a poder tomar los feeds desde cualquier dominio con una pocas lineas de código y mostralos en nuestro site a través de un widget.

FeedEk permite además ciertas opciones de configuración como mencionar la URL del feed, número de artículos a mostrar, o incluso descripción y fecha de publicación.

Pese a que, para cualquiera que tenga un poco de experiencia en estos temas no le va a resultar difícil manejar FeedEk, esta utilidad dispone en su web de las instrucciones, demos y códigos necesarios para implementarla de forma sencilla en nuestro site.

Interesados pueden acceder a FeedEk desdejquery-plugins.net/FeedEK.

Pasos implementar FeedEk en una página:

1 – Incluir los recursos de Javascript en la sección <head> de la página:

<head>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="FeedEk.js"></script>

</head>

2- Añadir un marcador de posición para el widget a su página:

<body>
    ...
    <div id="divRss">
    </div>
    ...
</body>

3- Añadir el código JavaScript que se rellenará el espacio que declaramos como  marcador del posición:

 $('#divRss').FeedEk({
   FeedUrl : 'http://rss.cnn.com/rss/edition.rss',
   MaxCount : 5,
   ShowDesc : true,
   ShowPubDate:true
  });

Opciones

Estilos

Usted puede modificar su Feed con css. Este es el código css que utiliza para la demostración

body{ background-color:#F4F4EE; font:13px tahoma,Geneva,sans-serif; text-align:left; }

#divRss{ width:450px; padding: 0px 3px 3px 5px; background-color:#FFF;
border:1px solid #D3CAD7; margin-top:3px; }

.ItemTitle{ font-weight:bold; margin:5px 0px 0px 0px; padding-top:3px; }
.ItemTitle a{ color:#4EBAFF; text-decoration:none }
.ItemTitle a:hover{ text-decoration:underline }
.ItemContent{ padding:1px 3px 3px 3px; border-bottom:1px solid #D3CAD7; color:#3E3E3E; }
.ItemDate{ font-size:11px; color:#AAA; }

Puedes observar el archivo de ejemplo brindado en la página oficial de este proyecto que contiene todo los códigos necesarios que lo ponemos a tu disposición:

Con información: Desarrolloweb – jQuery Plugins

Como todo desarrollo con jQuery, es sencillo, pero también elegante.

Implementación

Para comenzar hay que enlazar los archivos CSS y JS:

<link rel='stylesheet' type='text/css' href='css/style.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/example.js'></script>

Recuerda que puedes descargar jQuery desde nuestra sección de utilidades.

En el archivo example.js está el siguiente código que es el encargado de darle la apariencia a la tabla comparativa:

$(function() {
var numCols = $("colgroup").length,
featuredCol;
// Zebra striping
$("tr:odd").addClass("odd");
$("tr:last").addClass("final-row");
// Figure out which column # is featured.
$("colgroup").each(function(i) {
if (this.id == "featured") featuredCol = i+1;
});
// Apply classes to each table cell indicating column
// Also applies classes if cell is right or left of featured column
$("td, th").each(function(i) {
$(this).addClass("table-col-" + ((i % numCols) + 1));
if (((i%numCols)+1) == (featuredCol-1)) $(this).addClass("leftOfFeatured");
if (((i%numCols)+1) == (featuredCol+1)) $(this).addClass("rightOfFeatured");
});
});

Luego el código HTML que implementa la tabla:

<table id="feature-table">
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup id="featured"></colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th id="header-basic"><span> Basic</span> <a href="#">Sign Up</a></th>
<th id="header-plus"><span> Plus</span><a href="#">Sign Up</a></th>
<th id="header-premium"><span> Premium</span><a href="#">Sign Up</a></th>
<th id="header-pro"><span>0 Pro</span><a href="#">Sign Up</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>50 pages</td>
<td>75 pages</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<td>3 users</td>
<td>5 users</td>
<td>10 users</td>
<td>Unlimited</td>
</tr>
<tr>
<td>10 Sites</td>
<td>25 Sites</td>
<td>100 Sites</td>
<td>Unlimited</td>
</tr>
<tr>
<td>50 MB</td>
<td>250 MB</td>
<td>1 GB</td>
<td>5 GB</td>
</tr>
<tr>
<td>included</td>
<td>included</td>
<td>included</td>
<td>included</td>
</tr>
<tr>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
</tr>
<tr>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
</tr>
<tr>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
</tr>
<tr>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
</tr>
<tr>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
</tr>
<tr>
<td><a href="#">Sign Up</a></td>
<td><a href="#">Sign Up</a></td>
<td><a href="#">Sign Up</a></td>
<td><a href="#">Sign Up</a></td>
</tr>
</tbody>
</table>
</div>

Como les había comentado, crear una tabla comparativa es muy sencillo con jQuery.

Notas finales:

En la página hay un demo online y también la versión para descargarlo y correrlo localmente en el navegador web sin necesidad de montarlo en un servidor web.

Cuando analicen el código del demo, notarán un línea adicional que omití, debido a que se trata de un hack para las versiones antiguas de Internet Explorer.

Website: css-tricks.com/feature-table-design

Fuente: http://pixelcoblog.com

$('input').each(function(){
   // tomamos el valor actual del input
   var currentValue = $(this).val();
   // en el focus() comparamos si es el mismo por defecto, y si es asi lo vaciamos
   $(this).focus(function(){
      if( $(this).val() == currentValue ) {
         $(this).val('');
      };
   });
   // en el blur, si el usuario dejo el value vacio, lo volvemos a restablecer
   $(this).blur(function(){
      if( $(this).val() == '' ) {
         $(this).val(currentValue);
      };
   });
});

Ver ejemplo

Fuente: csslab

Ver ejemplo

Modo de Uso

1. Adjuntar jquery.js y jquery.fontSizer.js entre las etiquetas <head></head>
2. Definir id’s para ambos links, por ejemplo #aumentar (+) y #disminuir (-)
3. Inicializar el plugin, como en el ejemplo:

      $(document).ready(function(){
   $("#aumentar").fontSizer({
   action: "up"
   });
   $("#disminuir").fontSizer({
   action: "down",
   });
   });

4. Eso es. El único parámetro obligatorio es indicar la acción de cada link mediante action. Los parámetros son:
   • action: “up/down” (requerido).
   • elements: “elemento” (un id, class o etiqueta donde actuará el cambio de tamaño de fuente).
   • increment: número (en cuántos pasos serán el cambio de tamaño; por defecto es de 1 en 1).
   • max: número (tamaño máximo del tamaño de fuente; por defecto es 30px).
   • min: número (tamaño mínimo del tamaño de fuente; por defecto es 8px).

Por ahora solo ha sido probado con jQuery 1.2.6, pero no debería de tener problemas con versiones desde 1.2+

Descargar ejemplo y JS

Fuente: csslab

Nueva versión disponible, 0.9.4

Configuración:

• Incluye la librería jQuery y luego este plugin:

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.timelinr-0.9.js" type="text/javascript"></script>

• Inicialízalo con los parámetros por defecto:

<script type="text/javascript">
   $(function(){
      $().timelinr();
   });
</script>

• O customízalos:

<script type="text/javascript">
   $(function(){
      $().timelinr({
         orientation: 'horizontal',
         // valores: horizontal | vertical, por defecto horizontal
         containerDiv: '#timeline',
         // valores: cualquier etiqueta HTML ó #id, por defecto #timeline
         datesDiv: '#dates',
         // valores: cualquier etiqueta HTML ó #id, por defecto #dates
         datesSelectedClass: 'selected',
         // valores: cualquier clase, por defecto selected
         datesSpeed: 500,
         // valores: número entre 100 y 1000 (recomendado), por defecto 500 (normal)
         issuesDiv : '#issues',
         // valores: cualquier etiqueta HTML ó #id, por defecto #issues
         issuesSelectedClass: 'selected',
         // valores: cualquier clase, por defecto selected
         issuesSpeed: 200,
         // valores: número entre 100 y 1000 (recomendado), por defecto 200 (fast)
         issuesTransparency: 0.2,
         // valores: número entre 0 y 1 (recomendado), por defecto 0.2
         issuesTransparencySpeed: 500,
         // valores: número entre 100 y 1000 (recomendado), por defecto 500 (normal)
         prevButton: '#prev',
         // valores: cualquier etiqueta HTML ó #id, por defecto #prev
         nextButton: '#next',
         // valores: cualquier etiqueta HTML ó #id, por defecto #next
         arrowKeys: 'false',
         // valores: true/false, por defecto false
         startAt: 1,
         // valor: número entre 1 y el máximo de elementos, por defecto 1 (primero)
         autoPlay: 'false',
         // valor: true | false, por defecto false
         autoPlayDirection: 'forward',
         // valor: forward | backward, por defecto forward
         autoPlayPause: 2000
         // valor: número (1000 = 1 seg), por defecto 2000 (2segs)
      })
   });
</script>

• El marcado HTML debe ser de la siguiente forma:

<div id="timeline">
   <ul id="dates">
      <li><a href="#">date1</a></li>
      <li><a href="#">date2</a></li>
   </ul>
   <ul id="issues">
      <li id="date1">
         <p>Lorem ipsum.</p>
      </li>
      <li id="date2">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
<a href="#" id="next">+</a> <!-- opcional -->
<a href="#" id="prev">-</a> <!-- opcional -->
</div>

Ícono diseñado por Sebastián Cortés

Cambios:

• 0.9.4: Agregados autoPlay, autoPlayPause y autoPlayDirection (deshabilitados por defecto).
• 0.9.3: Agregado startAt: selecciona en qué punto quieres que comience la línea de tiempo.
• 0.9.3: Solucionado bug con animación mientras presionas los botones de navegación.
• 0.9.2: Solucionado bug Firefox con event.preventDefault();
• 0.9.1: Agregado navegación por teclado, ver ejemplo vertical.
• 0.9.1: preventDefault(); agregado a las flechas.
• 0.9.1: Documentación mejorada.

Ver ejemplos y descargar los archivos:

Demo Horizontal
Demo Vertical
Demo Autoplay
Descargar Plugin 09.4 + ejemplos

Fuente: CSSLAB