Envolviendo el código – jQuery Wrap()

Hace unos días tuve un reto con un layout en html, quería meter un div dentro de otro para posicionar unos elementos en forma de grid, lo cual es totalmente posible, no podía modificar la estructura html de ese grid, pero si podía insertar código javascript.

Lo primero que pensé fué usar el metodo clone de jquery, crear el wrapper e insertar el objeto clonado ahí.

Pero investigué un poco más y conocí el wrap que se encarga de hacer justamente lo que necesitaba.

Otras idéas – Pie de foto

Tienes una colección de imágenes en en el html, todas tienen su debida descripción en el atributo alt.

Primero envuelves cada una de las imágenes en un div que vas a usar como el contenedor de la imagen y el pie de foto.

Puedes verlo funcionando en este ejemplo (ver código  fuente)

Mejores FAQ’s con jQuery

Una forma de mostrar un FAQ o las preguntas frecuentes sin la necesidad de muchos divs y otras cosas superfluas. (Ver código fuente)

Ejemplo

Loops en jQuery con .each()

Viendo ejemplos de jQuery ultimamente, he visto que muchos programadores usan loops con while() o for() en sus scripts. No hay nada de malo en eso, pero debemos saber que .each() también puede hacer loop sobre arrays y objetos.

Diseñando tablas

Hace mucho tiempo que ya no usamos tablas para hacer un layout. Nunca debe hacerse un layout en tablas, eso implica mucho código que no significa nada, para eso debemos escribir html estructural y crear nuestros diseño con CSS. Pero, las tablas todavía tienen uso, cuando queremos mostrar data tabular en filas y columnas.

Los ejemplos donde las tablas son recomendadas incluyen calendarios, horarios, resultados de exámenes, resultados médicos, yo para este ejemplo voy a utilizar una tabla de posiciones de los equipos en la división este de la liga americana. La tabla de ejemplo.

Las tablas tienen el codigo HTML mas interesante, asi que los resultados dependerán de que nivel de complejidad sea requerido.

Estructura de las tablas

Utilizo <thead><tfoot> y <tbody> porque estos tags permiten que podamos agrupar las filas de la tabla en grupos de secciones:  header, footer y body.

Aunque con la excepción del thead, no hay diferencia visual entre una tabla que tenga estos elementos y una que no los tenga, pero siempre es bueno incluirlos porque proveen valiosa información extra sobre la estructura de la tabla, que puede ser usada para mostrarla en impresión o en la pantalla.

Diseñando

A esta tabla le añadimos una clase a las filas impares, para aplicarles una imagen de fondo. Este truco se puede lograr con javascript fácilmente, evitándonos aplicarle una clase a cada fila impar.

Con jQuery, seleccionar filas impares o pares es muy directo:

  $("table tbody tr:odd").addClass("impar");

con un poco de color, padding y algunos bordes tenemos una tabla asi.

Para inspiración de diseños de tablas, vale la pena visitar http://icant.co.uk/csstablegallery/, es un website al estilo Zen-Garden donde una misma tabla es rediseñada por hojas de estilos enviadas por los usuarios.

Columnas

el elemento <colwrap> y el elemento <col> permiten aplicar algunos estilos a una columna individual en una tabla. Voy a ponerle un fondo de un color mas oscuro a la columna de juegos ganados. Ejemplo final.

Javascript y AJAX para SEO

Javascript y AJAX nos brindan la capacidad de hacer aplicaciones web dinámicas, que no tienen que cargar una pagina completa para mostrar un fragmento de información, sino que simulan una carga inmediata, lo que significa menos carga para el servidor, menos ancho de banda e información más accesible.

Hoy en día, los diseñadores web están tan enfocados trabajando en sus aplicaciones web dinámicas que se olvidan de que la mayoría del tráfico es proveniente de los buscadores, que pasan mucho trabajo, o no pueden indexar los enlaces hechos con AJAX.

En otras palabras, muchas de tus páginas en AJAX están escondidas para los buscadores. Para completar el problema, la mayoría de los websites en AJAX tienen un solo link, el buscador tiene menos páginas que indexar.

La idea es optimizar nuestros sitios para que el javascript no haga que nuestros links no sean indexados. Aquí hay una pequeña guía para crear u optimizar un website con Javascript/AJAX que sea totalmente amigable con Google.

Diseña tu websites usando Javascript Degradable, de forma que el website sea totalmente navegable para un visitante sin Javascript y para otro con Javascript.

Cuando tengas un website navegable completamente sin Javascript, entonces puedes comenzar a incluir las partes de AJAX en algunos lugares.

Es bueno ir revisando el desarrollo del diseño en un browser de texto, como Lynx o SEO Browser

Detecta si los objetos existen, o si es un browser con capacidad de ejecutar Javascript, para que solo sirvas AJAX a quienes pueden usarlo.

Aparte de esos pasos es de  suma importancia enviar un sitemap completo del website. El sitemap solo no es suficiente, todo el conjunto es necesario para que funcione perfectamente.

De esta forma es posible utilizar Javascript y AJAX en nuestros websites de forma que sean accesibles y que sean visibles para los buscadores.

Google Doctype

En estos días ha habido mucho interés por parte de los desarrolladores web en el lanzamiento de Google Doctype. Es una enciclopedia y referencia abierta a contribuciones de todo el mundo, su enfoque principal es la documentación (Específicamente, documentar la Web Abierta [The Open Web]).

La documentación está básicamente dividida en dos partes:

Todo el contenido de Google Doctype es 100% abierto, Open Source, y se puede colaborar

jQuery 101 (introducción)

jQuery es una librería que nos ayuda a simplificar la programación en javascript y AJAX. A diferencia de otras librerías de javascript, jQuery nos permite expresar un código muy complejo de la forma más sencilla y corta posible.

La metodología es simple: Encuentra cosas, y actúa sobre ellas. Encontramos los elementos con el objeto jQuery $(), que funciona básicamente como document.getElementById, excepto que no solo soporta ids sino también selectores de CSS y xPath, en vez de retornar solo un elemento, puede retornar un array de elementos.

Aquí una pequeña muestra del impacto que jQuery puede tener en tu código. Para una tarea sencilla como añadir un evento al click en los links de una región en una página, usarías javascript y métodos del DOM asi:

Con jQuery vamos directo al punto y nos ahorramos tener que hacer un loop sobre todos los elementos, no hay necesidad de usar múltiples métodos del DOM, solo con un pequeño string tenemos lo que necesitamos.

Cuando este listo … $(document).ready()

Es lo primero que hay que aprender de jQuery. Si quieres que un evento funcione en la página hay que llamarlo dentro de $(document).ready(), todo lo que este dentro de esta llamada, será ejecutado justo cuando el DOM este listo y antes de que el contenido de la página se cargue.

La ventaja de $(document).ready() es que se pueden tener tantos llamados a este método como sea necesario, aparte de que se ejecuta antes de que el contenido de la página este disponible, permitiendo que una cantidad de efectos de esconder, mostrar y otros, estén listas inmediatamente cuando el usuario ve por primera vez los elementos de la página.

Añadiendo contenido

Con jQuery tenemos acceso de forma pragmática al Dom, navegar el documento, tomar y modificar los atributos de los elementos y podemos quitar e insertar contenido.

Este fragmento aparte de mostrar la facilidad para insertar contenido al DOM, un efecto fadeIn, y aplicarle un estilo CSS al nuevo elemento, es un ejemplo de otra de las ventajas de jQuery, el encadenamiento de los llamados a los métodos.

Cada vez que se llama un método de jQuery, esta retorna el mismo objecto jQuery, lo que nos permite volverlo a utilizar sin tener que repetir el selector.

Efectos

jQuery cuenta con un grupo importante de efectos como show(“speed”), hide(“speed”), fadeIn(), fadeOut(), slideUp(), slideDown(), aparte de algunos efectos que sirven para cambiar el estado visible o invisible de un elemento dependiendo de su estado actual toggle().

Cuando son llamados sin el parametro de velocidad los metodos show() y hide(), muestran o esconden inmediatamente el elemento en cuestion. Todos el resto de este grupo de metodos llamados sin parametro de velocidad, usan la velocidad por defecto 400ms.

… Despues de jQuery …

Solo hé tratado una minúscula introducción sobre lo que es posible con jQuery. jQuery es divertido, porque siempre se aprenden nuevos trucos que resultan increíblemente naturales. jQuery simplifica tu código javascript desde la primera vez que lo usas, cada vez que aprendes algo tu código es un poco más simple.

Algunos links importantes:

Menús Dropdown con jQuery

Una forma sencilla para lograr rápidamente esos menús con jQuery…

… Una lista sencilla en HTML , un poco de jQuery y CSS

un ejemplo.