Últimamente el blog estuvo un poco descuidado, los que hicieron comentarios o preguntas durante este tiempo se habrán dado cuenta. Uno de los tantos motivos fue haberme encontrado con la, probablemente, peor pesadilla de los freelancers: un trabajo fijo.

Pero es momento de retomar el “buen camino”. Ahora, con un poco más de independencia, y además de presentarles dentro de unos días la web de mi nueva empresa de diseño web (para que me digan si les parece fea o no ),  voy a aumentar la frecuencia de los posts y el feedback con los lectores. Porque eso es lo importante, aprender juntos.

Los dejo con Color, un plugin en Jquery que sirve para animar texto, capas, realizar scrolls con easing, y cambiar de color cualquier texto con un agradable efecto de fading.

Yo veo más útil el fade en el cambio de color, para usarlo en los links durante el mouseover.

Sitio del plugin Color, jQuery

Tutorial para incluir fading en el :hover de los links

Unos proyectos en desarrollo me llevaron a buscar tutoriales para hacer tooltips, y como verán hay de todo, simples, animados, minimalistas, feos, etc. Aquí va una lista de los que me parecieron más interesantes

Animated hover effect – Webdesignerwall

En el tutorial no dicen que es un tooltip, pero puede ser usado como tal. Son los ítems 5a y 6a de la lista.

Tutorial – Demo

Coda Popup Bubbles – Jqueryfordesigners

Tutorial – Demo

Simple tooltip with CSS and Jquery – Kriesi.at

Tutorial – Demo

Better tooltip with Jquery awesomeness – Net tuts

Tutorial – Demo

Simple tooltip powered by Jquery – 3nhaced.com

Tutorial – Demo

Algo que queda muy bien y sirve para guiar a los usuarios: iconos distintos para links a tipos de archivo específicos: Un ícono para los PDF, otro para los ZIP, y hasta para links salientes a otros sitios. Obviamente lo ideal es que los íconos aparezcan automáticamente para cada link, y no estar cargándolos manualmente.

Si no sabías cómo hacer esto usando solamente CSS, te comento que resulta estúpidamente sencillo:

Lo principal es entender el simple funcionamiento de los condicionales “^” y “$“. El condicional “^” significa empieza con, y “$” significa termina con.

Sabiendo eso puedes añadir iconos a los links salientes, que son los que empiezan con http://

a[href^="http://"] {

estilos para los links salientes

}

Y también puedes añadir cualquier cosa a los links con extensiones específicas, en este caso daremos un estilo diferente a todos los links que terminan en .rar:

a[href$=".rar"] {

estilos para los links a archivos .rar

}

El resto es solo cuestión de experimentar un poco, los condicionales funcionan con cualquier navegador medianamente nuevo.

Hacer SEO puede resultar bastante tedioso y estresante. Es por eso que los webmasters agradecemos infinitamente herramientas como la que provee dnframe.com, con más de 60 datos acerca del dominio que desees: Page Rank, Alexa Rank, una calificación entre 1 y 10 para tus etiquetas title y tus keywords,

• Page Rank.
• Alexa Rank.
• Calidad del nombre de dominio, tamaño total de HTML, cantidad de palabras en los keywords y la descripción: Todo con una calificación que puede ir del 1 al 10.
• Validación HTML, CSS y RSS.
• Cantidad de páginas indexadas por los buscadores.
• Velocidad de carga.
• Backlinks y páginas indexadas en marcadores sociales como Delicious, Digg, Webeame, Reddit, etc.

En Noupe encontré un ejemplo de menú desplegable en JQuery de uso bastante agradable, inclusive lo guardé para próximos proyectos. Click en la imagen para ver una Demo:

Se trata de un menú en el que si clickeas el texto, funciona como enlace, y si clickeas la flecha lateral se despliega el submenú. Pero lo que le da el toque especial es el suave efecto de movimiento al expandirse y colapsarse el menú.

Incluye la opción de mostrar un menú mucho más sencillo para los usuarios que tienen deshabilitado el Javascript en su navegador, obviamente el resultado es muy pobre.

Css Templates es una web en español con una rápidamente creciente colección de templates para WordPress, Blogger, Joomla, etc. El diseño extremadamente minimalista me pareció muy cómodo y sobre todo “desestresante”. Estoy poniéndome manos a la obra para crear una versión personalizable del template de ElWebmaster.net y colgarla en CssTemplates.

Algunos templates que me gustaron:

Un regalo para los fans de MAC, este menú basado en jQuery y CSS inspirado en el dock de la manzanita. Desarrollado por ndesign, con íconos que también ellos diseñaron. Incluye 2 estilos: top y bottom

Descarga el menú – Mira el demo

Implementación del menú:

Luego de descargar el menú, incluye el siguiente código en el <head> de tu web:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>

Incluye lo siguiente en cualquier parte del <body>

<script type="text/javascript">
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
</script>

Para añadir un ítem al top dock (el que se ubica en la parte superior)

<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>

Y para añadir un ítem al bottom dock (el de abajo)

<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>

Funciona con IE 6, IE 7, Opera 9, Firefox 2, y Safari 2 (algunos errores menores en Safari)

Es muy común ver en webs con diseño grunge esos menús con tipografía manuscrita que se subrayan al pasar el cursor encima.

Una técnica para lograr esto consiste en usar 2 imágenes: una para el menú no activado y otra para cuando pasamos el mouse encima, en este caso con los ítems subrayados. Usar la imagen del menú no activado como fondo de un div, colocar dentro del div una lista con parámetros de tamaño, cuyos ítems (en el estado hover) tengan como imagen de fondo el menú activado, o subrayado. A la imagen de fondo durante el hover debemos darle coordenadas de posición para que coincidan las partes.  A continuación voy a explicar cómo hacer un sencillo pero agradable menú grunge:

HTML

<div id=”contenedor_menu”>
<ul id=”menu”>
<li id=”blog”><a href=”index.html”>Blog</a></li>
<li id=”contact”><a href=”contact.html”>Contact</a></li>
<li id=”about”><a href=”about.html”>About</a></li>
</ul>
</div>

CSS

#contenedor_menu { /*–Creamos un div que contenga al menú, con las dimensiones de la imagen a utilizar */
height: 376px;
width: 292px;
overflow: hidden; /*Con overflow hidden hacemos que cualquier cosa que salga de los bordes del div sea invisible */
background:url(menu.png) no-repeat; /*Nuestra imagen de fondo, el menú */
}
#menu { /*-Ésto vamos a usarlo como id de la lista o ul, le damos la ubicación apropiada para la imagen que estamos usando*/
margin:76px 0px 0px 10px;
padding:0px;
}
#menu li { /*Quitamos los estilos de lista y la separación entre ítems*/
list-style:none;
margin:0px;
padding:0px;
}

#menu li, #menu a { /*Damos a los ítems de lista el tamaño apropiado para abarcar el texto presente en la imagen del menú, y display block para que los links funcionen como cuadro*/
display:block;
height:70px;
width:160px;
}

#blog, #contact, #about { /*Éstos son los id para cada ítem de lista, con el text-indent escondemos el texto del link*/
text-indent:-300em;
overflow:hidden;
}

/*La parte más importante: en el estado hover de cada ítem de lista cambiamos el background por el del menú activado, y le damos las coordenadas necesarias para que los ítems aparezcan justo donde deben estar*/

#blog a:hover {background:url(menu_on.png) -10px -76px no-repeat; }
#contact a:hover {background:url(menu_on.png) -10px -146px no-repeat; }
#about a:hover {background:url(menu_on.png) -10px -216px no-repeat; }

La mejor forma de entender todo esto es descargando el ejemplo y leyendo el código completo

Algo que muchas personas preguntan (principalmente en foros) es cómo hacer cuando quieren convertir en link un div que tiene imagen de fondo, algo así como convertirlo en un botón.

El ejemplo que presento es para un div con imagen de fondo que se transforma en link al colocar dentro un link de texto oculto, y dándole display:block al link:

CSS

#menu { <!–Contenedor –>
float:left;
background:url(imagen.jpg) top center no-repeat;
}

#menu a {
height: 100px; <!–Los valores de tamaño los asignamos al link, no al div contenedor –>
width: 150px;
text-indent:-3000em; <!–Con esto hacemos que el span no se vea –>
display:block; <!–Aquí hacemos que funcione como caja, como botón –>
}

HTML

<div id=”menu”><a href=”http://www.google.com” ><span>Google.com</span></a></div>