Ver la disposición de una página web

ver-wireframe-de-una-pagina.jpg

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/

Compatibilidad del HTML5 entre navegadores

compatibilidad-html5-navegadores-web.png

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 bajo jQuery

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

Internet Explorer 8 incompatible con max-width

Esto es un post rápido o apunte para tenerlo a mano pues tras darme de cabezazos durante un par de horas con una hoja de estilo y la compatibilidad entre diversos navegadores.

En especial esta compatiblidad afecta a Internet Explorer 8, el navegador que tristemente usa la mayor parte del planeta, y que hoy Microsoft pretende jubilar con su nueva versión, si bien es cierto que Internet Explorer 9 tiene buena pinta lamentablemente no es compatible con Windows XP, es decir, sólo funciona bajo Vista y Windows 7.

El Internet Explorer versión 8 o IE8 tiene un bug, y van fosfocientos mil, en fin, aunque quizá no sea tan bug sino una excentricidad o exceso de compatibilidad.

El bug es que Internet Explorer 8 no soporta los estilos max-width, min-width, max-height, min-height propiedades de estilo que como ya sabrás o habrás deducido con tu prodigiosa mente ceceseada sirven para definir el máximo ancho, mínimo ancho y altos de por ejemplo una caja de texto aka DIV.

Esta propiedad funciona perfectamente bajo FireFox, Chrome, Safari etc.

Fíjate en este trozo de código, donde ya te aviso que no funcionará bajo IE8.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<style>
.width {
    width:50%;
    min-width:200px;
    max-width:400px;
    background:#eee;
}

Y ahora en este otro, que es el que funciona bajo IE8, la diferencia, es que defines el tipo de documento html sin especificación alguna con el tag DOCTYPE, es decir, no lo haces estricto tal y como se hace en documentos bajo HTML5, y por tanto, max-width funciona bajo IE8

<!DOCTYPE html>
<head>
<style>
.width {
    width:50%;
    min-width:200px;
    max-width:400px;
    background:#eee;
}