|
|
Ir a Contenidos | Diputación de Barcelona - red de municipios
|
Ahora es posible crear un formato flexible con líneas cortas cómodas que se adaptan a la resolución de la pantalla, al ancho de la ventana del navegador y al tamaño de letra seleccionado por el usuario. Éste podría ser un nuevo principio para la consecución de páginas web más accesibles y fáciles de utilizar.
Todos conocemos el antiguo diseño de webs flexible con líneas largas, prácticamente de un lado al otro, excepto por un par de píxeles para los márgenes izquierdo y derecho. Hoy en día, aún se encuentran líneas largas en la red: las especificaciones del W3C y los artículos de Jakob Nielsen son sólo algunos de los mejores ejemplos.
Un formato flexible con líneas largas es, sin duda alguna, el formato de página más versátil y fácil de utilizar que se haya inventado jamás. Si se utiliza con una fuente relativa (EM, porcentaje), se adapta a cualquier resolución de pantalla, a cualquier ancho de la ventana del navegador y al tamaño de letra seleccionado por el usuario en el navegador.
El formato flexible tradicional con líneas largas resulta incluso ideal para explorar la página. Con una resolución alta y una ventana maximizada, se consigue una visión más amplia de la página, pero las líneas son demasiado largas para leerlas. Cuando se desea leer, basta con reducir el ancho de la ventana o utilizar la opción zoom del navegador para aumentar el tamaño de letra, o bien combinar el redimensionamiento con el zoom.
Desgraciadamente, la mayoría de usuarios no conocen las virtudes del formato flexible con líneas largas. No reducen el ancho de la ventana para facilitar la lectura y no están acostumbrados a aumentar el tamaño de letra automáticamente. Simplemente, no lo hacen. Por eso la mayoría de diseñadores de webs no consideran ni tan sólo como una opción el formato flexible clásico con líneas largas.
Las líneas largas son nefastas para la mayoría de usuarios: se ven mal en una ventana de navegador maximizada con una resolución alta, por eso asustan a la mayoría de usuarios normales.
Hoy en día, prácticamente no se ve nunca un formato flexible con líneas largas en las páginas iniciales o del primer nivel de navegación. Sin embargo, este formato aún se utiliza en algunos sitios web para documentación, informes, especificaciones y artículos largos. En estos casos, el formato flexible con líneas largas es la mejor opción.
La buena noticia es que la propiedad MAX-WIDTH de CSS nos ofrece una nueva opción: formato flexible con líneas cortas. Es decir, líneas fáciles de leer. Este diseño es un elemento de compensación considerable para la mayoría de usuarios: se adapta a la resolución, al ancho de las ventanas y al tamaño de letra seleccionado por el usuario. No facilita la exploración como el formato flexible con líneas largas, pero las líneas cortas se ven perfectamente y el usuario no tiene que reducir el ancho de la ventana o utilizar el zoom para que aparezcan menos caracteres por línea.
Es importante comprender que siempre ha sido posible crear un formato con líneas cortas utilizando, por ejemplo, un valor de 50% para el atributo WIDTH en HTML o para la propiedad WIDTH en CSS. Pero este formato sólo es parcialmente flexible. Tiene un problema importante: si el usuario aumenta el tamaño de letra, no se alargan las líneas para que aparezca el mismo número de caracteres por línea. El usuario es el único que puede aumentar un poco el tamaño del texto. Las líneas resultan demasiado cortas demasiado pronto. Son necesarias la propiedad MAX-WIDTH y la unidad EM si se van a adaptar las líneas de las páginas a selecciones más extremas de tamaño de letra.
Un navegador como Opera tiene una opción de zoom de página fantástica que permite aumentar o reducir el tamaño de todos los elementos de una página según sea necesario, incluso las imágenes. Si se aplicara una función de este tipo a todos los navegadores, también a Internet Explorer, el diseño de webs flexible también sería posible sin MAX-WIDTH y la unidad EM.
Eche un vistazo al sitio web del fanático de los píxeles Jeffrey Zeldman, www.zeldman.com. Es imposible aumentar el tamaño de las minúsculas letras de este sitio en IE para Windows. IE necesita unidades relativas como EM o porcentajes. Ni tan sólo Mozilla, que tiene una función de zoom que también acepta los píxeles, funciona bien en la página de Zeldman. El zoom de Opera es el único que funciona. Cuando se aumenta el tamaño del texto, se alargan las líneas. Les recomiendo que lean su libro Designing with web standards, 2003. Es la novedad más importante sobre diseño de webs.
La propiedad MAX-WIDTH en CSS funciona de la forma siguiente: la línea tiene una longitud constante siempre que la ventana del navegador sea más ancha que MAX-WIDTH. Cuando se reduce la ventana, el ancho de la página web se vuelve flexible. Inténtenlo utilizando PX como unidad. MAX-WIDTH no sirve para nada si se utiliza un porcentaje como unidad.
Excepto para la primera prueba, la unidad que se debe utilizar para MAX-WIDTH es la unidad EM, la más importante en el diseño de webs. La mayoría de navegadores utilizan la equivalencia 12 pt=16 px=1 em como tamaño de letra por defecto. Si deseamos líneas cortas, por ejemplo con un ancho de 500 px, basta con seleccionar un valor de 31 em (496 px) o de 32 em (512 px) para MAX-WIDTH. Si es preciso, se pueden utilizar distintos valores de MAX-WIDTH en la misma página. Cada DIV y todos los demás elementos que delimitan un bloque pueden tener un valor propio de MAX-WIDTH.
Los navegadores como Mozilla y Opera son compatibles con la propiedad MAX-WIDTH. Internet Explorer de Microsoft aún no, pero esto no supone un gran problema. Resulta fácil crear un JavaScript para MSIE que simule todas las grandes virtudes de MAX-WIDTH. ¿Y por qué no utilizar este JavaScript hoy en día? De todos modos, lo necesitaremos para adaptar las versiones antiguas de MSIE hasra el gran día en que una nueva versión de IE implemente MAX-WIDTH.
Lo más importante es evitar las líneas más largas que lo que se suele imprimir, es decir, entre 60 y 70 caracteres por línea. El ancho de las columnas de muchos periódicos es de sólo la mitad y también se pueden leer perfectamente en pantalla. Pero debemos recordar que, cuanto más cortas son las líneas, más a menudo nos tenemos que desplazar por la página, lo que dificulta la lectura. Y cuanto más cortas son las líneas, más larga es la página y, por lo tanto, más difícil resulta obtener una visión general. En muchos casos, las líneas cortas dificultan la visión de conjunto si provocan que nos tengamos que desplazar más por la página. Las líneas demasiado cortas también pueden provocar que la página parezca vacía o que se considere como un derroche de recursos.
Para un formato de una columna, la mejor solución será, a menudo, utilizar líneas más largas que las que utilizaríamos para un formato de dos o tres columnas. Por lo general, utilizo 500 px para las líneas cortas. Un valor de 30 em (480 px) es perfecto en muchos casos.
En todos mis artículos de una columna que aparecen en www.SmackTheMouse.com (seis en inglés y 46 en danés) ahora utilizo un formato flexible con líneas cortas. Utilizo MAX-WIDTH (42 em, 672 px con el tamaño de letra por defecto) para los navegadores compatibles. Las páginas se degradan perfectamente en los demás navegadores, que utilizan un formato flexible con líneas largas. Para simular el efecto del MAX-WIDTH en el MSIE, se utiliza un JavaScript.
En la hoja de estilo externa utilizamos la propiedad MAX-WIDTH como si fuera compatible con todos los navegadores. Utilicemos un valor de 32 em (512 px) como ejemplo. Los navegadores como Opera y Mozilla utilizarán este valor. Internet Explorer no entiende qué es la propiedad MAX-WIDTH y simplemente la obvia.
Para todos los DIV con clases que utilicen MAX-WIDTH, necesitaremos algún elemento que el JavaScript pueda detectar para encontrar un sustituto para Internet Explorer. La mejor solución será, simplemente, detectar el uso de la propiedad MAX-WIDTH en la hoja de estilo externa para una clase determinada que se utilice en un elemento. Pero, que yo sepa, de momento esto no es posible de ninguna forma práctica. Con el DOM de W3C podemos utilizar el grupo de hojas de estilo, pero tendremos demasiados problemas. Las reglas sólo están disponibles si utilizamos números de índice, y hay unos cuantos problemas más.
La única solución razonable que se me ocurre es utilizar el atributo ID. Yo lo utilizo de la forma siguiente: <div id="ie32">. Sólo utilizo los cuatro primeros caracteres del JavaScript. Cuando lo necesito, si es que lo necesito, puedo agregar cualquier cosa al ID anterior, por ejemplo lo siguiente: "ie32a", "ie32_elValorRealDelID", etc. Esto supone un trabajo adicional, pero resulta fácil agregar letras para crear ID exclusivos o para asignarles valores con más sentido cuando es necesario.
El siguiente JavaScript es una copia del utilizado en www.SmackTheMouse.com. El ajuste de palabras podría romper el código. Depende de las condiciones de visualización: resolución, ancho de la ventana y tamaño de letra. Bájense el JavaScript original si lo necesitan. El archivo de secuencia gestiona todos los usos de MAX-WIDTH en todas las páginas.
function maxWidthIE()
{
var agt=navigator.userAgent.toLowerCase();
var is_ie = ((agt.indexOf("msie") != -1) &&
(agt.indexOf("opera") == -1));
if (is_ie == true)
{
if(document.getElementsByTagName)
{
window.onresize = new Function("window.location.reload()")
var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++)
{
var div = divs[i];
if (div.getAttribute("id").substring(0,2) == "ie")
{
var maxPix = div.getAttribute("id").substring(2,4) * 16;
var maxWidth = div.getAttribute("id").substring(2,4)
var width;
if (document.body.clientWidth > (maxPix/12) *
parseInt(document.body.currentStyle.fontSize))
{
width = maxWidth + "em";
}
else
{
width = "auto";
}
div.style.width = width;
}
}
}
}
}
Se debería llamar el JavaScript una vez cargado el contenido del documento, justo antes de </body>. En primer lugar, el JavaScript intentará detectar si el navegador utilizado es Internet Explorer. A continuación, excluirá las versiones antiguas de IE si no entienden el método getElementsByTagName.
Después, el JavaScript encontrará todas las etiquetas DIV y comprobará si incluyen un ID en el que las dos primeras letras sean "ie" (subcadena(0,2)). Seguidamente, multiplicará por 16 los dos caracteres siguientes de estos ID, "32" en el ejemplo anterior (subcadena(2,4)), para obtener el valor de WIDTH en píxeles.
Si la ventana del navegador (document.body.clientWidth) es más ancha que el valor de MAX-WIDTH dividido por 12 (el tamaño de letra por defecto del navegador) y multiplicado por el valor seleccionado por el usuario en el navegador (maxPix/12 * parseInt(document.body.currentStyle.fontSize)), el ancho del DIV debería ser igual que el valor de MAX-WIDTH. Cuando el valor de WIDTH de la ventana del navegador sea más pequeño que el de MAX-WIDTH, se utilizará el valor "auto" para WIDTH.
MAX-WIDTH y EM no se utilizan sólo para el formato con una columna. También se necesita un formato flexible para dos columnas. Esto es lo que utilizo en muchas de las páginas de mi sitio web. Echen un vistazo a las páginas como weblog y validate.
Si utilizamos FLOAT, MAX-WIDTH y EM, el formato de dos columnas puede ser extremadamente flexible. Cuando la resolución de la pantalla es lo bastante elevada, el puerto de visualización es lo bastante ancho y el zoom del usuario es lo bastante pequeño, las páginas aparecen con dos columnas. Si la resolución es baja, la ventana del navegador no es bastante ancha o se amplía el tamaño de letra con el zoom, las dos columnas se organizan automáticamente y se convierten en una sola columna. Éste es el nuevo estándar para el diseño de webs flexible.
© Jesper Tverskov 2003
http://www.a-diba.net