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

Fuente | www.weblimite.com

Interesante artículo publicado en Seraccesible que trata sobre el diseño de una página web con medidas fijas (px ó ex) o líquidas (em, %) que determinará su capacidad para ser accesible o no. Según el WAI, una página web debe ofrecer la posibilidad de adaptarse a cualquier interfaz de usuario sin que por ello haya una pérdida de información o legibilidad.

El artículo nos comenta los pros y contras de la utilización de diseños fijos, líquidos, flexibles e híbridos, decantándose el autor por éste último. El WAI no establece qué diseño es el más apropiado para desarrollar una web accesible, si no que lo deja a la elección del diseñador, siempre y cuando el contenido sea transformable sin que por ello se pierda información o dificulte su comprensión.

Finalmente, el autor nos ofrece varias sugerencias para diseñar páginas web accesibles:

• Evitar la utilización del pixel (px) para definir el tamaño del texto. Si se utiliza para determinar el ancho de un elemento (contenedor) se deben hacer pruebas en las diferentes condiciones de navegación.
• Si nuestro diseño en determinadas condiciones no ofrece una buena legibilidad, proporcionar estilos de presentación alternativos.
• Cada dispositivo de navegación (pantalla, PDA, etc.) o simplemente de presentación (impresora), requiere determinadas carácteristicas en el diseño. Si nuestro diseño no está adaptado a un determinado dispositivo, crear la CSS específica.

Más info | Diseño web accesible

Coded Preview es una herramienta online rápida y gratuita que nos permite generar una vista previa en un navegador  de nuestro diseño web en formato HTML. Utilizado la aplicación, podrás ver exactamente cómo queda tu diseño en un browser. Además, podrás almacenar las previews en su servidor y de esta forma enviárselas a quién tu quieras, e incluso podrás crear una estructura que relacione las páginas entre sí, creando un árbol de navegación que facilite la comprensión de todo el diseño. Gracias a Coded Preview podrás ahorrar tiempo, ya que no necesitarás crear la página HTML y subirla vía FTP, si no que a través de un botón podrás tenerla disponible en la red.

Para subir nuestra preview tendremos que rellenar un formulario: título del diseño, página a la que pueda enlazar, alineación en el navegador (izquierda, centrada o derecha), márgenes, color o imagen de fondo, e incluso nos ofrecen la posibilidad de proteger mediante un password nuestra preview. Podremos elegir si subirla a su servidor o bien descargar un fichero comprimido con los HTML y gestionarlos nosotros por nuestra cuenta. Una vez hayamos subida nuestra preview, podremos añadir subpáginas para crear el árbol de navegación de nuestro sitio y añadirle una funcionalidad básica que ayude acercarnos a cómo quedará una vez finalizado.

Aunque aun no está disponible, están desarrollando una aplicación de escritorio que permite subir directamente desde nuestra máquina cualquier preview. Si bien es una aplicación muy sencilla cuya tarea no supone ninguna dificultad, nos ahorrará un tiempo y la posibilidad de tener todos nuestros proyectos almacenados en un mismo lugar.

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