Tablas

Una de las particularidades del diseño Web es que el diseñador desconoce cómo será visualizado su producto. Además de la posibilidad que tienen los usuarios de configurar su navegador, se suma el hecho que una misma página puede ser visualizada por diferentes dispositivos y tamaños de pantalla.

Hasta hace unos años atrás, el estándar gráfico de las computadoras hogareñas era una configuración de monitor de 640 por 480 píxeles con 256 colores. Hoy es de 800 por 600 píxeles a millones de colores, y varios usuarios ya disponen de placas gráficas que admiten resoluciones de 1024 por 720 píxeles y utilizan monitores de 17 pulgadas. Para que la estructura del sitio sea reproducida fielmente en cualquier resolución, una de las estrategias a utilizar es diseñar con tablas.

paginas web economicas

El lenguaje HTML admite un amplio manejo de tablas, que fueron destinadas originalmente a mostrar información tabulada. Sin embargo, en el diseño Web se utilizan tablas que son invisibles al usuario, pero que permiten al diseñador organizar

la información en bloques que permanecerán inamovibles, independientemente del tamaño de pantalla y las dimensiones de la ventana del navegador. “Para un diseñador Web, y debido a las limitaciones del lenguaje HTML, la única herramienta de composición que funciona hasta ahora en todos los navegadores son las tablas” (Lynch y Horton, 2000: 68).

Para Lynch y Horton (2000) las tablas permiten controlar varios aspectos del diseño: a) longitud de línea; b) márgenes; c) columnas; d) canalones –espacio entre columnas-; y e) bordes. Fernández-Coca (1998) apunta que dentro de la tabla pueden colocarse enlaces, gráficos, color, animaciones y textos. Holzschlag (2001) recomienda aprovechar las características avanzadas que el HTML en su versión 4 admite para las tablas como las opciones de alineación –izquierda, centro y derecha; y borde superior, borde inferior, y centro vertical-, agrupación de celdas y posibilidad de anidar –colocar tablas dentro de otras tablas-. Lynch y Horton (2000) agregan que las tablas ayudan a controlar mejor la inserción de imágenes ya que reservan el espacio exacto que ocupa el gráfico.

Un aspecto que –en nuestra opinión- es interesante destacar en la utilización de tablas es que los tamaños se pueden fijar en forma absoluta, especificando el alto o ancho de píxeles, o relativa, indicando el porcentaje de pantalla que cada fila o columna ocupa. Los valores absolutos permiten manejar con precisión la disposición gráfica de los elementos: por más que el usuario amplíe o reduzca la ventana de su navegador, cada elemento del diseño se mantendrá en su lugar sin alterar la estructura básica del sitio. Por otra parte, los tamaños relativos permiten construir páginas flexibles, es decir que si el usuario varía el ancho o alto de su ventana el contenido se redibujará proporcionalmente en su interior.

diseño web malaga

La utilización de valores absolutos o relativos es una elección que el diseñador Web debe realizar de acuerdo a i su diseño es más rígido o flexible. Nielsen (2000) recomienda introducir valores relativos para garantizar que usuarios con diferentes configuraciones y tamaños de pantalla vean un diseño semejante.

Desde nuestra óptica, este criterio puede resultar útil en algunos casos pero puede presentar inconvenientes en otros. Por ejemplo, si se le adjudica a una columna un porcentaje reducido –10 o 15%- su contenido puede ser muy difícil de visualizar a escala pequeña porque puede que el espacio no permita ubicar más de una palabras por línea. Además, un tamaño relativo impide que el diseñador sepa exactamente donde se cortará una línea o frase que quiera conservar en un mismo renglón.

Una forma de solucionar esto es utilizar varias tablas en el diseño y otorgarles valores relativos a unas y absoluto a otras, especialmente en aquellas cuyas áreas son más reducidas. El aspecto negativo de esta estrategia para utilizar tablas es que el diseño puede tornarse demasiado complejo y difícil de manejar.

plantillas paginas web gratis

Holzschlag (2001) indica señala cuatro puntos a tener en cuenta en el diseño con tablas:

• ?  Alinearlas verticalmente y no horizontalmente. “La gente que lee y escribe un idioma horizontalmente tiende a organizar la información visual también horizontalmente, lo que puede ser perfecto para el flujo de contenido, pero no tanto para estructurar una página” (Holzschlag. 2001: 20). Las columnas verticales son las que controlan en mayor medida la estructura y presentación de una página Web.
• ?  Evitar huecos entre imágenes ensambladas. Para evitar cargar imágenes de gran tamaño una a estrategia utilizada es fraccionarlas en varias partes y unirlas luego en una tabla. Esta tarea requiere prestar atención a varios aspectos: a) medir y cortar las imágenes con precisión para evitar desajustes de tamaño al unirlas; b) indicar el tamaño de la tabla, ya sea en forma absoluta o relativa; c) colocar “0” en las opciones de relleno y espacio entre celdas; d) señalar en la celda su ancho en forma absoluta; y e) utilizar las opciones de alineación de cada celda.
• ?  Anidar y apilar. Anidar consiste en colocar tablas unas dentro de otras.

Apilar es colocar una tabla encima de otra. Ambas opciones permiten lograr diseños complejos y manejar elementos como gráficos y textos de una manera muy precisa. Holzschlag (2001) recomienda no abusar de estas estrategias porque requieren muchas líneas de código HTML y aumenta el tamaño del archivo. Además, el diseñador puede desorientarse fácilmente con lo cual el proceso de diseño se vuelve más lento y poco claro para otros diseñadores que deban modificar la página.

? Utilizar funciones de HTML versión 4. Esta versión del lenguaje incluye una serie de elementos para aumentar la accesibilidad y mejorar el resultado final de las páginas. Algunas de estas funciones son: a) añadir una cabecera a la tabla, para señalar su contenido y permitir que los sistemas de voz para discapacitados visuales puedan conocer la información que hay dentro; b) agrupar columnas, lo cual permite producir un código más “limpio”; y c) utilizar las opciones de alineación vertical y horizontal para filas y columnas.