comparte el articulo 

Diseño de páginas web: Diseño del documento

Actualizado el 10/03/2010 < > 0 Comentarios

Resumen: El diseño del documento HTML o XHTML debe ser compatible con la mayor cantidad de medios empleados por los usuarios que sea posible.

Normalmente pensamos que el diseño de páginas web está referido al diseño de las versiones que usualmente vemos en los monitores de los ordenadores personales, tanto de escritorio como portátiles (en realidad se trata del mismo medio). Sin embargo, el diseño de las páginas también debe comprender a los usuarios de los móviles, y algo bastante frecuente, las páginas en modo de impresión.

Muchas páginas ofrecen textos o imágenes que posiblemente los usuarios necesiten o deseen imprimir. Es muy frecuente que cuando tratamos de imprimir una página en su diseño original, esta no tiene las medidas adecuadas y la impresión no se vea en forma correcta. Por ello, muchas páginas ofrecen a sus usuarios y visitantes la posibilidad de acceder a una versión imprimible del documento.

Del mismo modo, un usuario que desea acceder a una página web desde un móvil, encontrará que las versiones para ordenadores de las páginas web presentan dimensiones inadecuadas para este medio, debiendo emplear las molestas barras de desplazamiento horizontal para acceder al todos los contenidos. Debido al notorio incremento del empleo de móviles para acceder a la web, muchas páginas ofrecen actualmente versiones de sus páginas que se adaptan a las resoluciones de pantalla de los mismos.

Documentos adaptables al medio desde el que se visualiza

La opción de crear un documento para cada tipo de medio, si bien es viable, realmente resulta difícil de implementar por dos razones. La primera es que constituye una verdadera pérdida de tiempo y energía por parte del diseñador. En segundo lugar, la creación de varios documentos para cada una de las páginas de un sitio implica ocupar mucho espacio en el servidor, con el consiguiente aumento de los costos del mismo.

La mejor solución es la implementación de hojas de estilo externas, es decir, separadas del documento HTML o XHTML para cada uno de los medios que se desea implementar y vinculadas al documento principal a través de la etiqueta <link> en el <head> del documento.

<link rel="stylesheet" href="screen.css" media="screen, handheld" />
<link rel="stylesheet" href="print.css" media="print" />
<link rel="stylesheet" href="handheld.css" media="handheld" />

Estas etiquetas tienen la facultad de que una vez que el navegador ha detectado el medio a través del atributo “media” (media=”screen” para los ordenadores normales, media=”print” para el diseño de la página imprimible y media=”handheld” para los diferentes dispositivos móviles), determina cual de las hojas de estilo es la que debe aplicar. El siguiente ejemplo es una muy conocida página (Wikipedia), la cual ofrece a sus visitantes la posibilidad de acceder a una página imprimible. Aquí pueden observarse las diferencias entre un diseño y otro.
Diseño de visualización en ordenador y diseño de impresión

Orden del documento

Muchos motores de búsqueda indexan las páginas web teniendo en cuenta cuáles son los elementos que aparecen desplegados en los primeros lugares del documento HTML, lo que no indica necesariamente que sea el orden en el que se visualizan, ya que esto puede modificarse empleando el CSS.

Además, siempre es conveniente dar un orden lógico a los contenidos, de modo que la página no aparezca como algo confuso compuesto por elementos inconexos. Además de la importancia real de los elementos del documento (tanto los visibles como los no visibles), los diferentes componentes tienen un orden de importancia relativa, es decir, una jerarquía en el orden en que son visualizados. Desde este punto de vista, es importante que los diferentes contenidos aparezcan ordenados de acuerdo con esta jerarquía, y su visualización corresponda con la misma.

Selección de los elementos visualizables

La presentación de un documento en varios formatos para su visualización en diferentes medios, también conlleva la selección de elementos. Cuando se diseña una página web, algunos elementos de este formato son compatibles con los diseños de impresión, mientras que otros pueden y deben ser obviados, dado que no aportan ninguna utilidad al usuario y puede ocupar un espacio que, en los formatos de impresión, pueden resultar útiles para expandir textos o imágenes.

Algunos ejemplos de elementos que pueden ser dejados de lado, son por ejemplo, los menús y las columnas (siempre y cuando no tengan contenidos relevantes y relacionados con el resto del documento). Los links no serán visualizables en un formato de impresión, pero si se puede colocar una dirección web para que pueda ser visible en el documento impreso.

Utilización de textos alternativos

La etiqueta <img />, la cual determina la ubicación de una imagen en un documento web, tiene la posibilidad de insertar un texto alternativo a través del atributo alt=”texto alternativo”. Algunos buscadores le dan importancia a los textos alternativos de las imágenes, por lo que es aprovechado en el posicionamiento de una página web en los mismos. Sin embargo, este atributo tiene una importancia que va mucho más allá de colaborar en la tarea de indexación de una página por las palabras clave empleadas en este atributo. Se trata de la accesibilidad.

Este texto alternativo es el que los medios destinados a las personas con dificultades visuales utilizan para la descripción de lo que se muestra en una página web. También los videos tienen la posibilidad de agregar descripciones en forma de texto, los cuales pueden ser interpretados por los medios para discapacitados.

Adaptación al medio empleado

Las personas que navegan por la web, emplean los sitios web de formas diferentes, de acuerdo a sus necesidades, gustos o posibilidades. El hecho de que un porcentaje de los usuarios de Internet tengan dificultades visuales o ausencia completa de la visión, debe orientar una buena parte de los contenidos a su uso por parte del software de lectura. Otro porcentaje importante de los internautas, acceden la mayor parte del tiempo a la web a través de los múltiples dispositivos móviles, por lo que las páginas deberían contar con un diseño específico para este tipo de dispositivos, que permita la visualización de los contenidos en bajas resoluciones de pantalla.

Y lo más importante, todo esto, no debe requerir un esfuerzo desmesurado por parte del diseñador, el cual cuenta con medios a su alcance para que esta tarea resulte sencilla y sin tener que realizar modificaciones en el documento original, tanto si está escrito en HTML como en XHTML.

Publicado el 10/03/2010, última actualización 10/03/2010.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras