O como dicen los de lengua inglesa, ver el Wireframe, see the wireframe.

¿Qué es un wireframe?

Pues como ya decimos en el título un wireframe es un esquema de disposición de los diferentes elementos de una página web. Los módulos visuales sin textos en los que se distribuyen los contenidos.

La utilidad que le podemos dar es la del estudio y la inspiración, por ejemplo cuando una página web te gusta o te atrae por su usabilidad, ejecutas la herramienta y podrás ver su estructura, a partir de aquí inspira y expira código fuente hasta que la mejores.

En la captura de pantalla anterior te mostramos el wireframe de la página corporativa de nuestra aplicación de gestión online invOOice.com, una distribución la mar de sencilla y clara, en el header, selector de idiomas, logo, menú de navegación cuerpo de a tres columnas con imagen en cada una y un footer.

La aplicación para ver el wireframe

Esta aplicación es un Bookmarklet, es decir una aplicación web que se puede instalar como favorito, para instalarla:

Arrástra ESTO hasta tu barra de favoritos, si no te funciona dirígete a la página de autor y allí encontrarás más botones para instalarlo y una mayor documentación.

Os copiamos un vídeo de youtube sobre el funcionamiento de esta aplicación:

Enlace original: http://www.volkside.com/2010/12/introducing-wirify-the-web-as-wireframes/

En el siguiente enlace encontrarás la web original de donde he capturado la imagen con el esquema de compatibilidad de las nuevas funcionalidades del HTML así como diversos enlaces para poder comprobar por ti mismo la compatibilidad del HTML5 con los diferentes navegadores web: http://robertnyman.com/html5/

Slider con hashtag construído bajo jQuery, la propiedad hashtag permite que desde cualquier enlace previo o cualquier enlace en la propia página puedas ir directamente a la diapositiva que quieras.

A nivel de efectos es sencillito pero muy efectivo, meter más efectos es meter más ruido y perder elegancia, puede modificarse prácticamente del todo via CSS.  No obstante estos efectos son totalmente ampliables mediante la configuración de diferentes easeIn y easeOut, puedes ver los efectos disponibles en:

http://gsgd.co.uk/sandbox/jquery/easing/

Además este slider permite que se desplace su contenido interior a través de la rueda de scroll del mouse, genera la paginación automática y permite cualquier tipo de contenido, todo en 2,2Kb. (Sin contar las librerías jQuery).

A nivel de compatibilidad hemos encontrado algún problema menor con Google Chrome, donde el indicador de paginación está sobre el contenido y la capa flotante pisa algo el contenido, bajo FireFox funciona perfectamente, quizá en una nueva versión corrijan estos problemas.

La licencia de este slider es totalmente free, es decir puedes incorporarla en tus propias aplicaciones sean comerciales o no.

Enlace: http://mgoys.com/lab/hashslider