Interesante artículo publicado en Janko donde nos enseñan cinco formas distintas de mejorar el aspecto de los links de nuestra página web o blog. Por línea general los diseñadores web asignan distintos colores (normalmente los corporativos) a los enlaces para que los usuarios los identifiquen como tal; en otras ocasiones, los enlaces tienen un estilo clásico, color azul oscuro y subrayados. Sin embargo, si queremos darle un toque original a nuestros enlaces, tenemos a nuestra disposición varios recursos en CSS y JavaScript que nos facilitarán la tarea, teniendo en cuenta que el objetivo de un enlace es que pueda ser identificado como tal por un usuario, ya sea novel o con experiencia, por lo que buscaremos detalles que lo hagan resaltar respecto el resto del texto del website.

En Janko nos proponen cinco formas para conseguirlo, desde la más sencilla, que es aplicar un subrayado con estilo a los enlaces (en este caso el subrayado tiene la propiedad dashed, por lo que será un subrayado con guiones), a la más compleja, que sería mediante un plugin de JavaScript, crear un pequeño efecto de animación de desplazamiento.

Para mí, las más interesantes son las de incluir un pequeño icono junto al enlace con CSS (en la Wikipedia lo usan y lo cierto es que es muy descriptivo) y el que ya he comentado de incluir un subrayado estilizado a los enlaces, de hecho, para la web de un cliente utilicé una técnica parecida, con la diferencia de que también tenía un subrayado en la parte superior en el hover, por lo que al pasar el ratón por encima, el enlace quedaba enmarcado por arriba y por debajo con dos líneas de guiones (style=”border-top: 1px dashed #333, border-bottom: 1px dashed #333“). Aunque lo cierto es que sigo siendo uno de esos webmasters clásicos que sólo cambian el color de los enlaces y aplican en el hover el subrayado, ¿y tú? ¿Qué estilo aplicas a tus enlaces?

Más info | http://www.jankoatwarpspeed.com

A continuación os paso un enlace a una hoja de referencia rápida de CSS (CSS Cheat Sheet) con una recopilación de las clases más utilizadas y las propiedades de éstas. Muy útil si en algún momento dado no recuerdas cómo se usaba alguna clase CSS y no tienes el autocompletar en la aplicación que estás usando. Está en formato HTML, aunque podremos imprimirla en PDF y guardarla en nuestro ordenador, o simplemente imprimirla en papel.

Más info | http://lesliefranke.com/files/reference/csscheatsheet.html

GetFavicon.org es un proyecto español gracias al cuál podremos ver, acceder o descargar el favicon de cualquier página web. Simplemente escribiendo la dirección del sitio web del favicon en que estemos interesados, el sistema nos mostrará todos los que encuentre y nos dará la opción de descargarlos en varios formatos (ICO, GIF, JPG ó PNG). En caso de que no detecten el favicon de una web, podremos sugerirles la URL de ésta para que lo capturen.

También podremos encontrar una interesante recopilación de información sobre los favicons, su utilización, diseño, recomendaciones, tamaño, conversores, etc. Otra utilidad de este proyecto es, según comentan en Wwwhatsnew, “Hay algunas páginas que tienen favicon grandes y se pueden aprovechar para difundir la imagen del sitio“.

Más info | http://www.getfavicon.org
Fuente |  http://wwwhatsnew.com

Con Userfly podrás realizar completos estudios de usabilidad de tu página web sobre usuarios reales. Simplemente incluyendo una línea de código JavaScript en tus páginas podrás ver en video el comportamiento de los usuarios de tu página web instantes después de su visita. La información se muestra en un video que funciona como un Video Screener, que graba todos los movimientos y acciones del cursor; además, en la parte superior van apareciendo las acciones que ha realizado el usuario (click, submit (enviar un formulario), etc.).

La aplicación UserFly es de pago, aunque nos ofrecen una demo que sólo permite almacenar los datos de 10 usuarios cada hora. Sin duda, es una herramienta de gran utilidad, ya que nos permite conocer qué partes de nuestra web son las más visitadas y cuáles deberíamos mejorar para llamar la atención de los usuarios.

Si bien herramientas de este tipo ya existen en el mercado, como la Superposición de Sitio de Google Analytics, UserFly destaca por ofrecer información en video y prácticamente en tiempo real.

Más info | http://www.userfly.com
Fuente | http://wwwhatsnew.com

The Woork HandBook es un e-book gratuito sobre diseño y programación web. Entre los temas que trata, destacan CSS, HTML, bases de datos, Ajax, programación web y frameworks de JavaScript como Mootools o Scriptaculous.

El libro es una recopilación de artículos escritos por Antonio Lupetti, webmaster de Woork, blog dedicado al diseño de páginas web que el año pasado tuvo cerca de cuatro millones de visitantes. Los artículos del libro están copiados tal cual del blog, por lo que es posible que haya alguna errata por ahí. El contenido está dividido por capítulos que contienen código fuente, imágenes, ilustraciones y enlaces al contenido original publicado en el blog Woork; en total, 133 páginas para aprender nuevos conceptos y procedimientos para diseñar una página web.

Más info | http://woork.blogspot.com
Fuente | http://ulczyk.blogspot.com

Los banner Page Peel comenzaron a aparecer el año pasado y destacan por ser muy poco intrusivos y altamente creativos. La idea se basa en que al pasar el ratón por la esquina superior derecha de una web, donde hay una esquina doblada y meciéndose lentamente, se desplegará el contenido oculto del banner.  De esta forma, la publicidad sólo aparecerá si el usuario desea verla, y como el Page Peel es muy llamativo, la mayoría de usuarios moverán el cursor para ver qué hay debajo de esa esquina doblada que se está moviendo.

Hasta hace no mucho, todos los scripts para generar el efecto Page Peel eran de pago, sin embargo, poco a poco han ido apareciendo alternativas gratuitas basadas en javascript, flash, jquery, etc. A continuación os paso varios enlaces desde donde podréis descargar los scripts e implementarlos en vuestra página web o blog, ya sea como banner publicitario o para promocionar algún evento, artículo, etc.

» Page Peel Effect en jQuery
» Page Peel Effect con JavaScript, imágenes y flash
» Otras alternativas de Page Peel Effect