Con los patrones de diseño se buscan crear estándares que de algún modo dicten las formas adecuadas de mostrar el contenido de un sitio web. Sin embargo no debemos pensar en ellos como reglas o imposiciones sobre la creatividad y alternancia que se puede presentar en un sitio, simplemente son sugerencias para el desarrollo las cuales nos indican qué partes son de mayor interés para la vista de los usuarios.

Son muchos los patrones de diseño que se han planteado a lo largo del tiempo, tenemos que especificar que esto viene de mucho tiempo antes a la creación de las páginas web. Con la imprenta y la creación de los primeros textos mediante este método, se empezaron a utilizar estructuras, las cuales con el tiempo demostraron que hay ciertas áreas donde la gente suele explorar o fijar más la vista.

En la actualidad aún seguimos utilizando esta clase de patrones de diseño web, la diferencia radica en que ahora con las páginas web tenemos más control sobre los tamaños y formas de presentación, por lo que se puede optar por un patrón no tan tradicional.

Diagrama de Gutenberg en diseño web

Este es quizás el patrón de diseño más utilizado en la historia, ya que la estructura que propone se puede ver representada tanto en escritos, carteles, publicidad e inclusive en la televisión. Lo que nos define este diagrama, en principio, es una estructura basada en el movimiento que sigue el ojo humano por inercia, este movimiento hace que se termine presentando más atención a ciertas partes del objeto desplegado, por lo que dichas partes toman más relevancia en el diseño.

Si nos decidimos en utilizar este patrón, entonces a la hora de realizar un diseño web debemos de tener muy en cuenta las siguientes indicaciones para distribuir ordenadamente todos los elementos:

• Nuestra área de exposición estará dividida en cuatro partes.
• Cada cuadrante representa una zona óptica.
• La más importante de ellas es la ubicada en la parte superior izquierda y recibe el nombre de zona primaria.
• La siguiente en la estructura es la zona de barbecho fuerte, que se encuentra ubicada en el extremo superior derecho.
• En la parte inferior izquierda encontramos la zona que presenta menos atención, la zona de barbecho débil.
• Finalmente en la parte inferior derecha se encuentra la zona terminal.

El hecho de utilizar este diagrama para la realización de nuestros diseños, traerá consigo una armonía con la gravedad normal de lectura, permitiendo al usuario seguir una orientación familiar, mejorando de esta manera la comprensión del contenido.

Este resultado se logra gracias a la costumbre, ya que las personas occidentales comúnmente realizan una lectura que va descendiendo por una serie de barridos hasta llegar a la zona terminal.

Para este patrón de diseño las zonas que presentan menor atención son la esquina superior derecha e inferior izquierda, y en caso de querer atraer atención a esas partes es necesario incluir un elemento llamativo que enfatice de alguna manera la zona. Es por esto que el contenido relevante debe seguir la diagonal que va de la esquina superior izquierda a la inferior derecha.

Un uso a este patrón que generalmente se da en los sitios web, es cuando se coloca el logo en la zona principal, el contenido importante se despliega en la zona de en medio y alguna información de contacto o de registro se coloca en la zona terminal.

Es recomendado utilizar este patrón cuando presentamos grandes cantidades de texto, si este no es tu caso y tienes bien definida una jerarquía visual, quizás sea recomendable utilizar otro tipo de patrón.

Patrón Z en diseño web

Como su nombre lo dice, este patrón se encarga de definir el diseño de un sitio en base a la forma de la letra Z. Los usuarios empezarán a percibir la información de la esquina superior izquierda, moviéndose horizontalmente hacia la esquina superior derecha, después de manera diagonal irán hasta la parte inferior izquierda para finalmente terminar con la parte inferior derecha.

Este patrón puede ser considerado como una contraparte al diagrama de Gutenberg, ya que propone un desplace diagonal inverso, y toma en cuenta las dos zonas que el diagrama considera poco relevantes.

Sin embargo, esta contraparte no se ve tan reflejada al momento de determinar las zonas de mayor relevancia, ya que en los dos patrones esta funcionalidad recae en la zona principal y terminal.

El patrón Z es recomendable para páginas con un diseño web simple, con pocos elementos que necesiten de completa atención, pero no por esto queremos dar a entender que sólo debe ser limitado a esta clase de diseños. Este tipo de layout puede ser aplicado a casi cualquier proyecto de diseño web, ya que cumple con las necesidades básicas de cualquier sitio, presentar una marca, tener jerarquía, establecer una estructura y llamar a la interacción.

Existen otros patrones que se derivan de este, tal es el caso del patrón zig zag, que básicamente consiste en un conjunto de patrones Z que se van uniendo a lo largo de la página desplegada para continuar con el mismo seguimiento visual del contenido. Este podría ser considerado el movimiento natural en caso de que el usuario continuará leyendo la información que se encuentra debajo de la primera vista en nuestra página de inicio.

También encontramos al patrón del triángulo rectángulo que básicamente consiste en utilizar el patrón Z dando un movimiento de clausura distinto, en vez de mandar la atención a la zona inferior derecha, regresamos a la zona superior izquierda. De esta forma se forma un triángulo, dentro del cual debe de ir la información más relevante.

Al utilizar frameworks de JavaScript, como jQuery o Mootols, es común recurrir a métodos encapsulados y atajos que nos permitan realizar alguna clase de acción de manera sencilla, sin tener que instanciar cada objeto o clase que necesitemos, y sin necesidad modificar alguna línea en el código base de la librería para llevar acabo una función.

MooTools no es la excepción a esta característica, por lo que existen muchas clases que cuentan con atajos sencillos y fáciles de recordar para el usuario, entre ellos encontramos “.load()”, “.morph()”, “.tween()”, entre otros, que al llamarlos cumplen con su función específica.

Sin embargo existe la posibilidad de que tu como diseñador o desarrollador web necesites realizar alguna alteración más específica en las propiedades de la clase, para ello se puede optar por crear instancias de las clases mediante objetos y obtener más control.

Instanciar una clase con Mootools

Con el propósito de ejemplificar, en este artículo utilizaremos la función “tweet” de MooTools, ya que es bastante sencilla y de uso muy común. Esta función se encarga de agregar efectos de animación al estilo CSS de los elementos a los que se les aplica.

Generalmente esta función es llamada al concatenar su atajo al selector del elemento que recibirá la acción, “$(elemento).tweet()”. Por defecto puede recibir tres parámetros, el primero de ellos para especificar la propiedad CSS que se verá afectada, el segundo indica el valor inicial y el tercero el valor que tendrá la propiedad al final de la transición.

// modifica la altura de 'miElemento' de 20px a 200px:
$('miElemento').tween('height', [20, 200]);

Esto es de gran ayuda si queremos realizar simplemente la transición, pero si queremos lograr más control sobre las propiedades, tenemos que hacer uso de la clase que define esta función. Esta clase lleva por nombre “Fx.Tweet” y la manera de instanciarla es la siguiente:

var tweenLaWebera = new Fx.Tween('miElemento');

Ahora la variable “tweenLaWebera” es un objeto que ha obtenido la funcionalidad de la clase Tween, por lo que ahora podemos hacer llamadas a las funciones “set” y “start”. Para llamar una de ellas basta con hacer esto:

var tweenLaWebera.start('height', 200);

Esta es uno de los principios básicos de MooTools, la creación de instancias de clase busca manejar su estado llamando métodos y estableciendo las propiedades de los objetos.

Tomemos el primer ejemplo que hicimos con el atajo “tweet”, ahora vamos a representarlo utilizando una instancia de la clase:

var tweenLaWebera = new Fx.Tween('miElemento',{
  transition: 'bounce:out',
  duration: 1000
});

$('miElemento').addEvents({
  focus: function(){
    tweenLaWebera.start('height', 200);
  },
  blur: function(){
    tweenLaWebera.start('height', 20)
  }
});

Como se puede apreciar ahora el efecto es controlado por nosotros, y definimos en que momento se mandará llamar.

Lo que hicimos en el código fue básicamente crear el objeto, indicarle el tipo de transición que realizaremos y la duración de ésta, después mandamos llamar a la función “start” de dicho objeto cuando el elemento recibe dos diferentes eventos, cuando se encuentra enfocado el elemento aumentará su altura a 200 y cuando quitemos el enfoque de él su altura regresará a ser de 20.

Opciones de una clase

Como pudimos apreciar en el último ejemplo, la clase “Fx.Tween” obtiene dos argumentos en su constructor, el primero de ellos es el elemento al cual vamos a aplicar el efecto, mientras que el segundo es un objeto definido con varias propiedades u opciones.

Este segundo parámetro es el que se encarga de decirle a la clase como comportarse y para definirlo basta con establecer una variable en JavaScript compuesta por valores de tipo “propiedad:valor” o simplemente poner esos valores dentro de la misma creación del objeto.

//Alternativa 1
var opciones = {
  property: 'height',
  duration: 750,
  transition: 'bounce:out'
};

var tweenLaWebera = new Fx.Tween('miElemento', opciones);

//Alternativa 2
var tweenLaWebera = new Fx.Tween('miElemento',{
  property: 'height',
  duration: 750,
  transition: 'bounce:out'
});

Incluso podemos utilizar distintas opciones para cambiar el comportamiento de cada paso del proceso, en el ejemplo anterior manejamos una transición de tipo “bounce:out”, suponiendo que quisiéramos modificar este la segunda parte de este efecto, es decir cuando el elemento se vuelve a encoger, podemos realizar algo como esto:

var tweenLaWebera = new Fx.Tween('miElemento',{
  transition: 'bounce:out',
  link: 'cancel',
  duration: 1000
});

var crece = function(){
  tweenLaWebera.options.transition = 'bounce:out';
  tweenLaWebera.start('height', 200);
};

var encoge = function(){
  tweenLaWebera.options.transition = 'quad:in:out';
  tweenLaWebera.start('height', 20);
};

$('miElemento').addEvents({
  focus: crece,
  blur: encoge
});

De esta manera al momento de crecer el elemento utilizará la transición “bounce:out” mientras que al encogerse de nuevo utilizará “quad:in:out”, esto logrará una animación personalizada.

Eventos en Mootools

En algunas ocasiones puede que deseemos realizar un proceso al momento de que el efecto empieza o finaliza, MooTools cuenta con eventos personalizados para lograr este propósito.

La clase Fx.Tween hereda todo sus eventos de Fx por lo que podemos utilizar las acciones “start” y “complete” para disparar nuestros procesos.

Por ejemplo, si quisiéramos cambiar el color del texto contenido en un textarea al momento de enfocarnos en él, pero sólo si la transición ha terminado, entonces tendríamos llamar a la opción “onComplete” dentro de la instancia.

Esto nos da como resultado un código como el siguiente:

var tweenLaWebera = new Fx.Tween('miElemento',{
  transition: 'bounce:out',
  duration: 1000,
  link: 'chain',
  onComplete: function(){
    tweenLaWebera.element.toggleClass('focused');
  }
});

var crece = function(){
  tweenLaWebera.options.transition = 'bounce:out';
  tweenLaWebera.start('height', 200);
};

var encoge = function(){
  tweenLaWebera.options.transition = 'quad:in:out';
  tweenLaWebera.start('height', 20);
};

$('miElemento').addEvents({
  focus: crece,
  blur: encoge
});

Como ya mencionamos, en esta ocasión únicamente estamos utilizando la clase “Tweet” para ejemplificar, si requieres utilizar otra clase puedes recurrir a la documentación de MooTools para saber que opciones puedes pasar como parámetro de la instancia.

Y no es para menos, puesto que float es uno de los conceptos menos aprehensibles por la intuición y cuando esta propiedad es utilizada generalmente obtenemos como resultado algo que no esperábamos.

Al utilizar elementos posicionados mediante float de manera incorrecta, estos pueden causar grandes problemas de visibilidad y usabilidad a nuestros sitios, rompiendo muchas veces con el layout disponible y haciendo que trabajemos el doble con tal de lograr un comportamiento más o menos deseable.

Es por ello muchos diseñadores prefieren llegar al extremo de evitar completamente su uso, omitiendo el hecho de que los layouts realizados mediante elementos flotantes son uno de los más adecuados a los estándares.

El problema no radica en la propiedad en si, lo hace en la forma en que ésta es interpretada por los desarrolladores, diseñadores y alguno que otro navegador. Por esta malinterpretación, su concepto es considerado algo tan escasamente intuitivo; sin embargo, si echamos un vistazo a su teoría y documentación veremos que no es algo realmente tan complejo como parece, ya que la mayoría de los problemas y bugs son producidos por versiones antiguas de navegadores, en su mayoría de Internet Explorer.

Puntos importantes sobre los elementos flotantes

• Para encontrar la razón por la que se dio el nacimiento de la propiedad float en CSS, nos tendríamos que remontar mucho tiempo atrás en la historia del Internet, al punto donde los desarrolladores web buscaron obtener la habilidad para mostrar un texto alrededor de las imágenes que se desplegaban en los navegadores.

  Dicha práctica llego a ser implementada a partir de Netscape 1.1 y tiempo después fue añadida al nuevo lenguaje de estilo al cual se le dio el nombre de CSS.

• El término “float” fue utilizado para describir la manera en que el elemento flota de un lado a otro, de arriba hacia abajo, al momento de poseer esta propiedad y sin necesidad de aplicar algo más que intervenga en su posición.

  Si bien su función se describe desde las primeras mejoras que se hicieron a la versión 2 del lenguaje HTML, fue hasta su implementación en CSS cuando empezó a tener un reconocimiento público y a la par de esto empezaron a surgir la mayoría de las malinterpretaciones de la propiedad.

• Una capa o caja que reciba la propiedad float tendrá un comportamiento especial, distinto al del resto de los elementos que son posicionados con otros métodos, puesto que al principio el elemento que cuente con esta propiedad si se posiciona como parte del flujo normal, pero en cierto punto se saca del flujo y se desplaza hacia la izquierda o derecha de nuestra página retirándose lo más posible.

  Cuando un elemento es retirado del flujo normal, todo el contenido que se encuentra dentro de ese flujo tiende a ignorar a dicho elemento por completo y por lo tanto no hace espacio para que sea ocupado por éste.

• Al momento de asignarle la propiedad float, el elemento se convierte en un bloque, en una caja la cual puede variar su posición oscilando de izquierda a derecha dependiendo del valor que reciba la propiedad. Las opciones en el marcado serían básicamente tres, “float: left”, “float right” o “float: none”, para dar un alineado a la izquierda, derecha o simplemente no dar la propiedad.
• Tenemos que recordar siempre dar un ancho a los elementos que reciban la propiedad, este debe ser especificado mediante la propiedad width, ya que en caso de no contar con esta medida los resultados al momento de aplicar float pueden resultar poco predecibles. Esta regla se puede romper en caso de que apliquemos la propiedad a una imagen que ya tiene un ancho implícito, pero si un elemento float no tiene un ancho explícito o implícito en sus propiedades, ocupará todo su bloque contenedor de manera horizontal, imitando el comportamiento de los elementos no flotantes y no dejando la posibilidad de que el resto del contenido lo rodee.
• A diferencia de las cajas en el flujo normal, los márgenes verticales de una caja flotante no se contraen con los márgenes de las cajas que se encuentran encima o debajo de ella. Además, una caja flotante puede superponer otras cajas a nivel de bloque adyacentes a ella en el flujo normal.
• Un elemento flotante siempre ocupará un lugar al extremo izquierdo o derecho del elemento que lo contiene, no existe tal costa como un float centrado, algo que puede ser difícil de entender si vas empezando con el diseño web, pero fácil de recordar conforme avanzas en la práctica.
• Cuando hacemos flotar un elemento este se coloca hasta el extremo borde de la dirección que indicamos, ya sea derecha o izquierda, si después de esto hacemos flotar otro elemento y lo mandamos a la misma dirección, este se va a desplazar hasta que alcance el borde del primer elemento flotante. Si seguimos flotando elemento en la misma dirección estos se irán acumulando hasta que no haya suficiente espacio, cuando esto ocurre se empezaran a desplazar hacia abajo del layout hasta que todos quepan.
• Al momento de utilizar la propiedad tenemos que estar concientes de que la posición vertical del elemento será la que comúnmente ocuparía si estuviera dentro del flujo normal, mientras que la posición horizontal dependerá de la caja contenedora del elemento, si no esta dentro de ninguna otra capa o caja, entonces la ventana el cuerpo de nuestro documento será su límite.
• Todas las cajas que sean creadas antes o después del elemento flotante, fluirán verticalmente de manera normal como si el elemento no existiera. Sin embargo, aquellas cajas que sean creadas al lado de la flotante serán acortadas con fin de dar espacio para que ésta se muestre.
• Si queremos elaborar un layout utilizando únicamente elementos de tipo div con la propiedad “float: left”, estos se alinearán uno tras otro formando columnas. Si al final de este layout quisiéramos agregar un footer o una caja que abarque de manera completa la pantalla, basta con aplicar la propiedad “clear: both” a dicho elemento, de esa manera no importa el tamaño de las columnas que se crearon.

Como en esta ocasión haremos uso del core del framework para poder elaborar los ejemplos, tenemos que cargarlo en el inicio de nuestro código tal como se indicó en el artículo “Empezando con MooTools” de este manual.

Al igual que con jQuery, tenemos la opción de cargarlo de dos maneras distintas, ya sea descargando el core y los módulos que queremos utilizar o simplemente haciendo llamada a la API de Google que nos proporciona el código. La manera de carga que elijamos dependerá de la forma en que quieras desarrollar y si tendrás una conexión constante a Internet.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools.js"></script>

Elementos y eventos de Mootools

Para poder empezar a manipular el DOM de nuestra página debemos tener en mente todas las partes que lo conforman, cada una de estas es considerada un elemento y generalmente son definidas por una etiqueta HTML que se encarga de añadirlo a la interfaz. En una misma página podemos tener elementos de tipo imagen, sonido, texto o de estilo, todos ellos tomando parte del DOM.

Todos los elementos que conforman la página pueden ser manipulados de manera individual, cada uno puede recibir ciertas acciones que se encargarán de llevar a cabo alguna clase de proceso.

A estas acciones se les llaman eventos, y se encargan de capturar la interacción del usuario con el sitio para poder desencadenar alguna otra tarea.

Evento de carga en Mootools

El primer evento que surge dentro de una página es la carga de esta, no hay ningún elemento en particular que lo mande llamar, más bien es el conjunto de elementos que al estar totalmente cargados hacen que esta función pueda entrar en juego para llamar el código que tiene en su interior.

Debido a que no hay un elemento que reciba la acción, muchas veces la definición de este evento puede resultar confusa para la persona que va empezando a programar con JavaScript. En el caso de MooTools, la librería cuenta con dos funciones que nos ayudan a capturar este evento y poder llevar un proceso inmediatamente después de que la página se ha cargado.

Este par de funciones llevan por nombre “load” y “domready”, son sencillas y prácticamente hacen lo mismo, la única diferencia es que “domready” entra en acción antes de que las imágenes de nuestro sitio se carguen, mientras que “load” espera a que realmente todo el sitio se encuentre visible y listo.

En base a esto, se puede pensar que “load” es una mejor función para manipular la carga de un sitio, y puede que tengas razón, pero todo dependerá de lo que desees hacer.

Si en tu trabajo necesitas calcular las dimensiones de un objeto, imagen, o la posición final, entonces “load” si es la mejor opción para ti, pero generalmente la función “domready” es la más utilizada, ya que permite un inicio de proceso más rápido sin tener que esperar la carga de elementos que en ocasiones pueden ser muy pesados.

La manera de codificar dichas funciones es la siguiente:

window.addEvent('domready', function(){
    //Aquí podemos realizar cualquier acción que queramos se lleve a cabo después de cargar la página.
     alert("Hola La Webera!");
});

window.addEvent('load', function(){
    //Aquí podemos realizar cualquier acción que queramos se lleve a cabo después de cargar la página, incluso cálculos con imágenes.
});

Manipulación de elementos con Mootools

Como ya se dijo, cada elemento puede recibir varios eventos los cuales a su vez se encargarán de realizar algún proceso, pero para poder llegar a eso debemos saber como manipularlos.

Lo primero que tenemos que hacer es seleccionar el o los elementos que queremos reciban la acción, para ello contamos con los selectores que en el caso de MooTools son definidos dentro de dos funciones: $() o $$().

La función $() muchas veces es vista como un atajo para la sentencia “document.getElementById()” de JavaScript y generalmente esa es su función, pero aparte de recibir un ID, esta función también puede recibir elementos del DOM.

La manera en que esta función diferencia si el desarrollador envía un elemento o un ID, es que cuando recibe una cadena inmediatamente lo procesa como ID y va en busca de dicho elemento, en cambio cuando se pasa una referencia a un elemento simplemente lo envuelve para aplicarle las funciones posteriores.

var elemDiv = $('laWeberaDiv'); // Elemento MooTools formado por el div con id 'laWeberaDiv'

En el caso de la función $$(), esta es utilizada para obtener una serie de elementos, es decir al momento de introducir un parámetro a la función se nos regresará un arreglo con todos los elementos que cumplan con el selector.

Se puede pensar como un atajo de la función “document.getElementsByTagName()” de JavaScript, pero además de rastrear un objeto por su tipo, puede recibir selectores CSS como parámetro lo cual aumenta su poder.

var arrDiv = $$('div'); // Arreglo de elementos de tipo div

En base a esto podemos desarrollar un pequeño código que nos permita cambiar el color de todos los links que sean de cierta clase dentro de una página, y que todo esto se haga al momento de cargar la página.

window.addEvent('domready', function(){
    $$('a.linkLaWebera').setStyle('color', 'steelblue');
});

Conclusión

Como se pudo observar en este artículo, el manejo de elementos y su manipulación con eventos es un proceso bastante sencillo. Si ya has desarrollado con anterioridad para JavaScript, o mejor aún si ya habías utilizado un framework anteriormente, no te resultará nada difícil poder dominar este tema.

El uso de selectores puede ser el tema más difícil a tratar, sobre todo si vienes de trabajar con jQuery, pero nada que la practica no pueda remediar, solo recuerda utilizar siempre doble signo de moneda para traer un arreglo de elementos.

Por obvias razones, para todos aquellos que nos dedicamos a diseñar o desarrollar páginas web, Internet se convierte en algo esencial, algo que incluso puede llegar a ser vital para nuestro negocio, ya que sin una conexión de salida en teoría no tendríamos manera de obtener y realizar nuestro trabajo. Es prácticamente imposible trabajar como diseñador web sin tener acceso a la red mundial y el simple hecho de perder conexión durante un largo período se convierte en el mayor de los temores para muchos diseñadores freelance.

Para muchos freelancers el perder la señal de Internet puede resultar un hecho muy frustrante, al poco tiempo pueden perder orientación, caer en el aburrimiento y omitir el resto de las formas que existen para realizar un trabajo. Esta clase de comportamiento puede pasarse por alto por un par de horas, pero si a nuestro proveedor de Internet se le ocurre dejarnos sin servicio durante un par de días las cosas se pueden llevar a complicar si no hacemos algo al respecto.

Busca conexiones alternas

Si después de realizar pruebas y esperar un tiempo has llegado a la conclusión de que el servicio de Internet no regresará pronto, es hora de buscar alternativas. Puedes optar por utilizar tu móvil para navegar, aunque sinceramente resulta algo incómodo si lo que necesitas es desarrollar o peor aún diseñar en alguna clase de editor.

Si deseas el paquete completo, entonces puedes tomar tu laptop e ir en búsqueda de alguna conexión perdida, si en tu casa no llega el servicio, puede que a la del vecino sí llegue. Con esto no queremos decir que tengas que robar Internet, si tienes una cordial relación con alguno de tus vecinos puedes llegar a un acuerdo para utilizar su conexión momentáneamente.

Otra alternativa es ir a algún restaurante, café o bar que cuente con alguna clase de conexión privada, puedes preguntar a los empleados por la contraseña y el precio tan sólo será el consumo de alguno de sus productos.

Si el presupuesto es corto o simplemente no quieres tener que oír el ruido que se produce en alguno de estos establecimientos siempre queda otra opción, puedes ir en busca de algún parque o sitio público con conexión a Internet. Generalmente las bibliotecas son lugares muy tranquilos con buena conexión, también las universidades o parques tecnológicos puedes ofrecer el servicio gratis.

Cuando Internet no es una opción

Puede que hayas llegado al punto donde quemaste todas tus alternativas y no encontraste ninguna conexión, o puede que hayas decidido cancelar tu servicio de Internet por un tiempo por cuestiones de presupuesto y por ello te ves envuelto en esta situación, en cualquiera de estos casos lo único que queda es tratar de sacar provecho al tiempo con los recursos que dispones.

Tratando de ver siempre lo positivo tienes que recordar que para desarrollar no hace falta tener una conexión permanente. Sí, resulta bastante cómodo tener una biblioteca a nuestra disposición dentro del buscador, pero también existen libros y material de apoyo con el cual de seguro todavía muchos de nosotros contamos gracias a nuestra vida como estudiantes.

Para probar tus sitios y diseños puedes instalar un servidor web local, esto si aún no lo tienes, para descargarlo tendrías que tener Internet por un momento pero basta con unos cuantos minutos. Si no puedes conseguir eso, aún puedes usar tu navegador para probar únicamente sitios que realices con HTML y JavaScript.

Actividades que podemos realizar sin Internet

Es díficil pensar en las cosas que solíamos hacer antes de que Internet formará parte fundamental de nuestro trabajo, pero basta con echar un vistazo a nuestro alrededor y ver el resto de herramientas con las que contamos para llevar a puerto nuestros proyectos.

Para mantener el contacto con nuestros clientes podemos realizar algunas llamadas, incluso puedes ganar algunos puntos por hacer esto, ya que muchos clientes prefieres una llamada a un correo electrónico, pero si la situación es contraria, evita llamar a esos clientes y espera un mejor momento.

Para mejorar tu avance en los procesos puedes llevar a cabo una revisión de tus objetivos con el fin de fijar algunos que vayan más allá del siguiente mes, también puedes examinar tu itinerario de tareas y tratar de optimizarlo de ser necesario, revisar tu lista de clientes para ver quienes ya no merecen estar ahí o a quien más puedes incluir, e incluso se puede optar por realizar un tipo de contabilidad rápida comprobando que nuestro presupuesto puede rendir hasta el punto deseado.

Si tienes algún blog o sitio donde generalmente publicas contenido, puedes escribir mientras esperas que regresa la conexión. El preparar artículos generalmente lleva consigo algún tipo de investigación, pero por el momento puedes omitir esta parte y dar preferencia a la estructuración de tus conocimientos, de esa manera te resultará más sencillo terminar el contenido a publicar una vez que tengas Internet.

Si las investigaciones no pueden esperar más tiempo o estás ansioso por seguir aprendiendo, puedes echar un vistazo a todos los libros físicos o electrónicos que has comprado y que por alguna u otra razón no has podido leer.

Por increíble que parezca el no tener conexión a Internet nos ayuda a reflexionar más sobre aspectos muy relevantes para nuestra persona y negocio, los cuales tendemos a omitir por la velocidad con la que trabajamos y el ritmo de vida que llevamos.

Con este tutorial trataremos de demostrar la capacidad de carga y animación de jQuery, tomando un layout sencillo y agregándole las mejoras ofrecidas por el framework. Haremos uso de la funcionalidad AJAX para lograr la carga datos en el contenedor del layout, de esa manera el usuario no necesitará dejar la página para poder ver más información, al mismo tiempo integraremos algunos efectos de animación de fácil codificación pero de resultados significantes.

Layout de la página

El primer paso es crear un layout sencillo que sirva para ejemplificar la carga de contenido, para ello simplemente utilizaremos un menú y un contenedor, de esa manera al dar clic en alguna de las opciones del menú, la información del contenedor cambiará sin necesidad de tener que cargar la página por separado. Nuestro código HTML lucirá de la siguiente manera:

    <div id="wrapper">
    <h1>La Webera</h1>
    <ul id="menu">
        <li><a href="1.html">Sección 1</a></li>
        <li><a href="2.html">Sección 2</a></li>
        <li><a href="3.html">Sección 3</a></li>
    </ul>
    <div id="contenedor">
        <h2>jQuery</h2>
        <p>Carga y animación de contenido</p>
    </div>

Una vez realizada la estructura, tenemos que asegurarnos de cargar la versión más reciente de jQuery, para ello puedes bajar el código directamente de su sitio, o simplemente hacer referencia al repositorio de Google donde se encuentra. Esto depende de la manera en que queremos trabajar, al cargar el código de jQuery desde Google es muy probable que el usuario ya lo tengo cargado en su máquina por lo que no será necesario una petición extra a tu servidor, pero tiene la desventaja de depender de alguien externo.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Manejo de métodos y eventos con jQuery

Una vez definida la estructura HTML tenemos que empezar a pensar en lo que queremos cambiar dinámicamente, para ello haremos uso de la librería jQuery, previamente cargada. Cuando se utiliza jQuery tenemos que pensar en eventos, un evento es una acción que realiza el usuario, como un clic, una tecla aplastada o pasar el ratón sobre un elemento, dichos eventos pueden ser utilizados para identificar cuando llevar a cabo ciertas acciones.

En este caso habíamos planeado cargar el nuevo contenido cada vez que el usuario diera clic en el menú, entonces ese clic se convertirá en el evento que queremos manejar. Para realizar esto, jQuery nos ofrece una estructura bastante fácil y sencilla, basta con escoger el elemento que recibe la acción mediante un selector, el cual puede ser su ID, una de sus clases, su tipo o alguna expresión que indique uno de sus atributos.

En nuestra estructura todos los links del menú son parte de una lista desordenada que tiene un ID que la identifica, en base a esto podemos elaborar nuestro selector. Después de englobar todos los elementos que recibirán la acción, tenemos que indicar el evento, en este caso es un clic y para ello jQuery utiliza un método que sencillamente lleva el nombre “click”, el cual se anida al selector y posteriormente se indica la acción a realizar.

jQuery('#menu li a').click(function(){
    // Aqui irá la acción de carga de contenido
});

Cargar el contenido

La acción de carga de contenido estará dividida en dos partes, primero tenemos que remover lo que ya existía en el contenedor y después cargar el nuevo contenido. Para lograr definir la página que contiene los datos que queremos mostrar, lo primero que tenemos que hacer es obtener el atributo “href” del link que fue seleccionado en el menú, para ello pondremos la siguiente línea dentro del evento que definimos con jQuery:

var pagina_a_cargar = jQuery(this).attr('href')+' #contenedor';

Con esta sentencia, al momento de dar clic sobre una opción del menú asignaremos a la variable un valor con la página de destino y el id del contenedor donde queremos cargarlo, esto será enviado con la llamada AJAX en el método “load” de jQuery para que reemplace el contenido.

Para lograr una transición animada podemos recurrir a un efecto sencillo, en vez de hacer que el contenido simplemente desaparezca en un instante, haremos uso de la función “hide” de jQuery para que se oculte a cierta velocidad y mande llamar a otra función que declararemos más adelante, la cual se encargará de cargar el contenido:

jQuery('#contenedor').hide('fast', cargarContenido);

Esto hará lo necesario para ocultar el viejo contenido, ahora necesitamos mostrar el nuevo y para ello elaboraremos una serie de funciones que se encargarán de llevar acabo el proceso y animarlo. La primera función a definir es “cargarContenido” la cual es llamada al aplicar el efecto hide al contenedor.

function cargarContenido() {
    jQuery('#contenedor').load(pagina_a_cargar,'',mostrarNuevoContenido)
}

Dentro de esta función hacemos uso del método “load”, el cual se encargará de obtener el contenido de la página que especificamos en el enlace sobre el cual dimos clic. Después de cargarlo hace llamada a una nueva función que lleva por nombre “mostrarNuevoContenido”, y esto lo hacemos para aplicar un nuevo efecto con la función “show” de jQuery.

function mostrarNuevoContenido() {
    jQuery('#contenedor').show('normal');
}

Finalmente tenemos que agregar un “return false” al final de nuestro evento de clic para que al momento de seleccionar un enlace el navegador no trate de abrirlo en una nueva ventana. De esta manera lucirá nuestro código final:

jQuery().ready(function() {
    jQuery('#menu li a').click(function(){
        var pagina_a_cargar = jQuery(this).attr('href')+' #contenedor';
        jQuery('#contenedor').hide('fast', cargarContenido);   

        /* Funciones */
        function cargarContenido() {
            jQuery('#contenedor').load(pagina_a_cargar,'',mostrarNuevoContenido)
        }

        function mostrarNuevoContenido() {
            jQuery('#contenedor').show('normal');
        } 

        return false;
    });
});

La manera más común e inmediata de tener presencia en la red es mediante una página web que resuma toda la información que los consumidores pueden necesitar sobre nuestro negocio. Las empresas lo saben y no se lo piensan dos veces a la hora de contratar a especialistas en diseño web para que les creen una página web a medida.

¿Parece fácil, verdad? Pues no lo es. A la hora de escoger a un diseñador freelance o agencia especialista hay que tener mucho cuidado y asegurarnos de que la persona que vaya a encargarse de nuestro diseño entienda lo que está haciendo.

De nada nos servirá gastarnos todo el presupuesto en tener una página web bonita si luego, a la hora de la verdad, no se cuidan los detalles que de verdad importan de cara al consumidor y de cara al posicionamiento de nuestra web en los motores de búsqueda (SEO). Una página web mal diseñada, que no se entienda o que no funcione correctamente nos va a hacer tirar dinero, perder consumidores y seguramente dañe nuestra reputación e imagen corporativa.

Para evitar que esto suceda, debemos tener en cuenta algunos factores vitales que deben considerarse a la hora de crear una página web. Para ello, a continuación vamos a ver algunos de los problemas que podemos llegar a tener si nuestra página no está bien diseñada desde un principio.

Diseño antes que funcionalidad

¡Error! Una página web puede ser muy atractiva a la vista y tener unos colores y elementos muy bien elegidos. Sin embargo si la navegación es confusa o complicada no va a servir de mucho pues sólo vamos a conseguir frustrar al consumidor.

Por supuesto una página web puede ser atractiva y funcional a la vez, pero siempre debe primar la funcionalidad. Si hay que sacrificar algo, será preferible que el diseño sea un poco menos sofisticado pero que la página sea clara y directa, al fin y al cabo la finalidad es la de informar al consumidor.

Web mal estructurada y de difícil navegación

Es necesario tener muy clara desde el principio la estructura que queremos que nuestra página web siga. El mapa del sitio debería planearse de antemano acorde a la información que queremos comunicar y a nuestro público objetivo, para evitar sorpresas desagradables.

Los usuarios tienen que encontrar la información de manera inmediata y sin necesidad de tener que investigar o pasar horas buscando por nuestra web. Por lo tanto el estilo, el orden y las categorías deberían ser clarísimos desde un buen principio porque cambiar toda la estructura del sitio web al final, cuando ya está diseñado, no es tarea fácil ni agradable.

Información de contacto

Parece increíble, pero sorprende ver el número de páginas web corporativas que no disponen de datos de contacto o que si lo hacen los esconden en categorías extrañas que nada tienen que ver y que son casi imposibles de encontrar por el consumidor.

Como ya comentaba antes, una página web es al fin y al cabo una herramienta para comunicarte con el consumidor y adquirir consumidores nuevos, por lo tanto los datos de contacto deberían ser fáciles de encontrar. Hay que ofrecerle al consumidor la posibilidad de contactarnos y por tanto como mínimo la dirección de e-mail y un teléfono de contacto deberían ser fácilmente accesibles.

Problemas de carga en la página

No hay nada que desespere más a un usuario que una página web que tarda en cargarse, especialmente hoy en día que las conexiones a internet son por norma general buenas. Esto puede deberse a una mala programación del sitio cuando se diseñó la página o puede tratarse de un problema de la empresa de hosting. El primero de los casos es fácilmente controlable, el segundo está fuera de nuestro alcance, pero ayudará que la compañía de hosting disponga de un buen servicio técnico que pueda ayudarnos a solucionar posibles problemas.

Errores e incompatibilidades

Antes de publicar una página web tienen que realizarse tests de prueba para asegurar su correcto funcionamiento. Si esto no se lleva a cabo, podemos encontrarnos con vergonzosos mensajes de error, errores de carga, incompatibilidades con los diferentes exploradores o resoluciones de pantalla y otros muchos problemas de usabilidad. Esto molesta al consumidor y nos da muy mala imagen.

Elementos automáticos, abuso de Flash y publicidad indeseada

Disponer de publicidad en la página web puede ser una manera (aunque muy cuestionable en páginas corporativas) de obtener ingresos extra o cerrar colaboraciones con colaboradores. Sin embargo conviene que esta publicidad no sea intrusiva (típico anuncio pop-up que te bloquea la pantalla hasta que consigues encontrar la pequeñísima cruz para cerrarlo) pues molesta a la navegación.

También molesta bastante al consumidor el disponer de un video, canción o elemento que se ponga en marcha automáticamente al entrar en la web. Si tenemos un video que queremos que el consumidor vea no hay problema en ponerlo bien visible en la página web, pero nunca debería empezar de manera automática. Es el usuario el que debería controlar como y cuando lo reproduce.

Algo similar ocurre con el uso de intros en flash. Hubo una época de auténtica fiebre por incluir este tipo de introducciones en las páginas web corporativas. El consumidor quiere acceso directo a la información y por norma general este tipo de videos son vistos como una molestia o una pérdida de tiempo. Si de todas maneras insistimos en ponerlo, debemos asegurarnos de que la opción de “Saltar introducción” (o Skip intro) esté bien visible.

Otro factor a tener en cuenta es que los móviles no reproducen contenido flash y por lo tanto esto va a impedir que nuestra web pueda consultarse correctamente desde un dispositivo móvil, algo que es cada día más importante y común.

Imposibilidad de editarla/actualizarla

Si en tu empresa no dispones de ningún empleado o departamento capacitado para crear tu página web, es una práctica muy común la de subcontratar a una agencia que se encargue del tema.

Sin embargo siempre deberíamos asegurarnos de disponer de los derechos de administrador de la página web para poder actualizar información y mantenerla al día cuando sea necesario. Si esta opción no está disponible, debemos asegurarnos de que exista una comunicación continua con la agencia que se ha encargado de diseñarla para que puedan realizarnos las modificaciones de manera rápida.

Fallos en la seguridad

Es necesario alojar la web en un servidor seguro y proteger las bases de datos, sistemas de pago o cualquier elemento que recoja datos del consumidor contra posibles ataques de piratas informáticos. Un problema de seguridad o de privacidad de datos supone la pérdida de confianza del consumidor y una mala imagen y mala reputación de nuestra empresa.

Falta de tráfico de visitas

Es probable que tu página web no reciba un flujo de visitas suficiente. Si esto sucede, probablemente sea porque no existe ninguna campaña de marketing o ninguna estrategia de apoyo, algo que es bastante común en las pequeñas empresas que no disponen de un departamento específico para gestionar estos temas.

No obstante, si vamos a tener presencia online y queremos que reporte beneficios necesitamos diseñar una campaña efectiva y legal de SEO o posicionamiento en los motores de búsqueda. Esto ayudará a situar nuestra web en las primeras posiciones en los diferentes buscadores y aumentará nuestro tráfico y visibilidad.

Falta de integración con el resto del negocio

Tu página web tiene que estar totalmente integrada en tu plan de negocio y de marketing. Hay que incluirla en posibles estrategias y tenerla en cuenta como otro elemento más de comunicación con el cliente. Además si también tenemos presencia en redes sociales o asociaciones debería quedar todo unificado e integrado debidamente en nuestra página web. Es importante que la persona que nos diseñe la página web entienda de que va el negocio.

Esta conducta debe de frecuentarse y llevarse a cabo lo más posible, pero la duda y el cuestionamiento se puede producir si nos encontramos con personas que realizan las mismas actividades que nosotros.

En estos casos, existen muchos diseñadores freelancers quienes prefieren mantenerse alejados de la competencia, y no consideran a otros desarrolladores autónomos para establecer relaciones, ni siquiera para conversar y mucho menos para ser amigos.

La decisión se dará al definir si debemos considerar a estas personas únicamente como competencia o quizás debamos abrir la posibilidad de establecer una relación que puede rendir frutos profesionales.

Esto no es fácil en principio, puesto que la mayor parte del tiempo vemos a la competencia como rivales y personas que únicamente quieren quitarnos nuestro trabajo, por ello en este artículo trataremos de hacerte ver un lado que comúnmente no se expone, razones por las que relacionarnos con similares nos ayudarán a ser mejores.

Ve un recurso en la competencia

El simple hecho de tener una competencia nos hace mejores, sin necesidad de establecer una relación como tal, la competencia ya esta haciendo algo por nosotros.

Al momento de conocer que existe alguien más rondando el mismo mercado que teníamos “asegurado” en el pasado, hace que busquemos mejorar nuestros servicios y ofrecer mejores productos para sobresalir de los demás, esto hará que nos preparemos mejor, que tengamos un portafolio o curriculum más amplio y esto nos ayudará a crear una mejor marca, algo que por supuesto también beneficia al cliente.

Dejando atrás un poco la etiqueta de competencia, los otro diseñadores freelance pueden convertirse en grandes compañeros, incluso en fundadores de un gremio importante dentro de la zona donde normalmente desarrollas tus proyectos.

Crear una comunidad de personas que se dedican a lo mismo, ha ayudado a crear profesiones más fuertes, mejores pagadas y más apreciadas.

Los otros diseñadores freelance dentro de tu comunidad puedes representar grandes recursos, podemos aprender de personas grandiosas que quizás han venido diseñando o desarrollando para web desde mucho tiempo antes que nosotros, o de jóvenes que van saliendo de la escuela y tienen una visión más fresca de lo que es el mercado.

Establecer estas relaciones nos hará más sencillo el aprender como crecer dentro del negocio.

La transición es difícil

Por supuesto que el hecho de saber que alguien más dentro de tu comunidad esta buscando los mismos clientes que tú puede resultar bastante incomodo, al grado de que no podamos estar tranquilos pensando que quizás estamos dejando ir clientes porque la otra persona está trabajando más que nosotros.

Pero hay que ir un paso más allá, si te sientes personalmente cómodo estableciendo una relación con alguien de tu misma profesión y rubro de trabajo, no tienes porque ponerte barreras.

Lograr todo esto requiere de práctica y por supuesto de confianza, confiar en lo que hacemos y lo que somos, ya que sin ello siempre veremos al colega como una competencia.

Si tienes bien trazados tus objetivos, tus planes y siempre mantienes una idea clara de cual es tu base de clientes no tendrás algún problema, esto no es el viejo oeste, dos o más si caben en el mismo pueblo.

La unión hace la fuerza

Muchas veces el hecho de contar con una comunidad detrás de ti te ayudará a salir de momentos difíciles, el colaborar con otros te puede dar proyectos no tan demandantes que te ayudarán a salir del mal paso.

De igual manera la colaboración se puede producir por el simple hecho de ayudar a otros, cuidando su espalda para que ellos cuiden la tuya cuando sea necesario.

La misma colaboración puede llevar tu negocio a otros niveles, se puede optar por formar una alianza o asociación con otros diseñadores freelance, llegando inclusive a establecer una compañía de diseño web más sólida y mejor estructurada.

El hecho de que algún proyecto no sea lo suficientemente bueno para ti, no significa que no sea de utilidad para otros, puedes compartir los datos de compañeros con las compañías o personas que te ofrezcan proyectos que realmente no cubren con lo que estás buscando. De esa manera puedes apoyar a otros de tu comunidad y más adelante ellos mismos pueden apoyarte a ti.

Por ejemplo, si tu eres una persona a la cual le gusta mucho diseñar pero realmente no eres un apasionado del diseño, puedes pasar algunos de tus proyectos que demanden muchos conocimientos en edición o diseño gráfico a uno de tus compañeros que sea bueno en esto, así cuando él tenga algún proyecto de desarrollo puede recurrir a ti.

Conclusión

El resultado de formar o no una sociedad seguirá siendo dependiente de distintos factores, con estos puntos que expusimos en esta ocasión no queremos decir que se garantiza un éxito rotundo, estamos hablando sólo en base a la experiencia y a lo que la historia nos ha enseñado con otros grupos de trabajo.

Si tu te consideras una persona poco sociable o que realmente no esta dispuesta a colaborar de manera conjunta, estás en todo tu derecho de mantenerte en solitario, al final del día es una de los beneficios que nos proporciona el trabajar de manera independiente. Toma lo que mejor se adapte a tu situación.

Esta funcionalidad te puede resultar familiar, puede que en más de una ocasión te hayas percatado que al colocar el mouse sobre un elemento, como una imagen, aparezca un mensaje dentro de una pequeña caja de color. Esta es la funcionalidad clásica de un tooltip por defecto, el cual es agregado por el navegador, gracias a que nosotros especificamos un atributo “alt” o “title” a nuestro elemento.

En esta ocasión también haremos uso de dichos atributos, pero en lugar de utilizar el tooltip que nos ofrece el navegador haremos uno personalizado, que lucirá acorde al diseño del sitio y hará que luzca más profesional.

Tooltip personalizado

El uso de tooltips personalizados no es nuevo, se ha venido aplicando desde hace tiempo en el diseño web y en el pasado se pudieron apreciar sobretodo en desarrollos que fueron elaborados con Flash. En la actualidad su elaboración ya no involucra el uso de Flash, puesto que resulta mucho más sencilla gracias al uso de jQuery para el manejo de animaciones y transiciones.

Aunque jQuery simplifica la creación, aún necesitamos realizar una serie de tareas para poder personalizar nuestro tooltip. En esta ocasión nos apoyaremos con CSS3 para no utilizar imágenes al dar forma a nuestro tooltip, también haremos uso del atributo “title” en cada elemento donde queramos desplegarlo, agregando al mismo tiempo un alto valor de SEO a los elementos ya que indicaremos una descripción de lo que estamos desplegando.

De esta manera nuestro tooltip personalizado tendrá una muy buena presentación, sin necesidad de cargar imágenes que demanden peticiones extra al servidor, mostrando información relevante e importante para el usuario, mejorando su experiencia de navegación, con un código limpio y de fácil SEO para los buscadores.

Estructura HTML para el tooltip

La base del proyecto estará sustentada por una estructura de lenguaje HTML, empezaremos por definir los elementos que mostrarán un tooltip, en esta ocasión nos decidimos a utilizar elementos de enlace por lo que utilizaremos la etiqueta “a” para definirlos. Debemos aclarar que cualquier elemento que acepte el atributo title puede ser utilizado, pero en esta ocasión solo quisimos utilizar enlaces, más adelante declararemos los elementos pueden utilizar esta herramienta.

<a href="#" title="Este enlace actualmente no lleva a ningún lado pero sirve para mostrarte el uso del tooltip" class="tooltip_elemento center">Tooltip en un enlace</a>

A nuestros elementos les agregamos una clase que lleva por nombre “tooltip” esta será definida más adelante en nuestro código CSS, y se utiliza para darle un estilo con el que contará cada vez que la caja de descripción se abra.

Después de definir los elementos que abrirán el tooltip debemos establecer la estructura del tooltip en sí, para ello haremos uso de un elemento de tipo “div” el cual contendrá un texto por defecto.

<div class="tooltip">Texto del tooltip</div>

Estilo del tooltip

Lo primero que debemos definir es la posición de los elementos que contendrán el tooltip, la cual debe ser relativa para que el tooltip pueda ser desplegando y para ello le daremos un valor de “relative” a la propiedad “position”:

.tooltip_elemento {
    position: relative;
}

Después le daremos estilo a la caja que define nuestra descripción, es decir el div que lleva la clase “tooltip” en sus atributos. El tooltip debe permanecer oculto por defecto por lo que estableceremos un valor “none” a la propiedad “display”, le daremos una posición absoluta para que sea relativa al elemento que lo despliega, estableceremos las dimensiones de la caja dependiendo del tamaño que queramos y finalmente definimos el color de fondo y algunos aspectos de la fuente para estilizar el elemento.

.tooltip {
    display: none;
    position: absolute;
    width: 200px;
    padding: 10px;
    margin: 0 0 12px 0;
    z-index: 100;
    bottom: 100%;
    background: #FDD017;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
}

Finalmente definimos el estilo de la flecha que lucirá en la parte inferior del tooltip, para ello haremos uso de los pseudo elementos “after” y “before”. El estilo que le demos a ambos definirá cada mitad de la forma de la flecha, por lo que al juntarlos tendremos la flecha completa

.tooltip:after {
    content: "";
    position: absolute;
    bottom: -14px;
    z-index: 100;
    border: 0 solid #FDD017;
    border-bottom: 14px solid transparent;
    border-left-width: 10px;
    width: 50%;
    left: 50%;
}

.tooltip:before {
    content: "";
    position: absolute;
    border: 0 solid #FDD017;
    bottom: -14px;
    z-index: 100;
    border-right-width: 10px;
    border-bottom: 14px solid transparent;
    width: 50%;
    right: 50%;
}

Uso de jQuery para desplegar el tooltip

El último paso a realizar es establecer la funcionalidad de despliegue de nuestro tooltip, para ello haremos uso de jQuery y definiremos un par de funciones. Utilizaremos los eventos “mouseenter” y “mouseleave” para disparar nuestras funciones, dichos eventos se producen cuando ponemos el mouse sobre un elemento y cuando lo retiramos.

Al momento de poner el mouse sobre el elemento (mouseenter) debemos obtener la posición del mouse para calcular donde colocar el tooltip, después obtenemos el texto del atributo “title” para poder desplegarlo, lo añadimos al div que define nuestro tooltip y finalmente mediante la función “fadeIn” mostramos la descripción.

jQuery("a").mouseenter(function (e) {
    var posMouse = e.pageX - this.offsetLeft;
    var textoTooltip = jQuery(this).attr("title"); 

    if (textoTooltip.length > 0) {
        jQuery(this).append('<div class="tooltip">' + textoTooltip + '</div>');
        jQuery("a > div.tooltip").css("left", "" + posMouse - 103 + "px");
        jQuery("a > div.tooltip").fadeIn(300);
    }
});

Como se puede apreciar en nuestro selector de jQuery únicamente estamos especificando los elementos de tipo enlace “a”, si quisiéramos agregar más elementos o especificar ciertos tipos de enlaces, tendríamos que modificar ese selector.

Al momento de retirar el mouse del elemento (mouseleave) llamaremos a la función “fadeOut” que agrega una transición para desaparecer nuestro tooltip, finalmente removemos el elemento del marcado con la función “remove” después de introducirlo en una cola mediante al función “queue” para que el remover se aplique hasta que el efecto haya terminado.

jQuery("a").mouseleave(function () {
    jQuery("a > div.tooltip").fadeOut(300).delay(300).queue(function () {
        jQuery(this).remove();
        jQuery(this).dequeue();
    });
});