Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a mostrar los estilos de diseño que se suelen emplear cuando se maqueta una página web.

En este vídeo te voy a hablar del estilo de diseño fijo. En la parte anterior de este vídeo, vimos la maquetación de una página web sin diseño, es decir, simplemente mostrar la página web “en su presentación normal”. En realidad, esto no es lo normal; normalmente queremos que una página web aparezca con un diseño. Existen diferentes estilos o técnicas de diseño. En este vídeo vamos a ver el diseño fijo.

Un diseño fijo se realiza cuando se trabaja con un ancho fijo. Este estilo de diseño tiene un problema importante: cuando la resolución de pantalla es menor que el ancho definido para la página, aparece una barra de desplazamiento horizontal. Por el contrario, cuando la resolución de pantalla es mucho mayor que el ancho definido, se desaprovecha la pantalla de visualización.

Este diseño fue muy común durante los primeros años de la Web, y todavía pervive en muchos sitios web, como te voy a mostrar a continuación. Por ejemplo, el sitio web del Consorcio de Transportes de Madrid está diseñado con un ancho fijo de 800 píxeles. Con una resolución de 1920 píxeles se ve esto, ya que este sitio web está diseñado para 800 píxeles de ancho. Pero para una resolución inferior, por ejemplo en un teléfono móvil de baja gama, se ve esto, con la maligna barra de desplazamiento horizontal.

Este es el sitio web de turismo de Castilla y León y así se ve a 1920 píxeles de ancho. Esta página también está diseñada para 800 píxeles de ancho. Y este es el sitio web de la sección El mundo del vino del periódico El Mundo, que está diseñado para 640 píxeles de ancho. Como vemos, el diseño fijo no es tan extraño en la actualidad. Vamos a ver un ejemplo escandaloso: aquí tenemos el sitio web del Congreso de los Diputados de España, que debería dar ejemplo de buen hacer, y sin embargo tiene un diseño fijo para un ancho de 800 píxeles.

¿Cómo se realiza el diseño fijo? Este es el esquema de la página de prueba que estoy utilizando como ejemplo. Hay varias formas de lograr esta maquetación mediante un diseño fijo. La más antigua se realizaba sin la ayuda de CSS; se empleaba una tabla que permitía dividir la página web como si fuera una cuadrícula. Con el atributo width se definía el ancho de la tabla y de las celdas. Y este es el resultado. Claro, la página se ve correctamente cuando se visualiza con la resolución para la que ha sido diseñada. Pero con resoluciones inferiores aparece la barra de desplazamiento horizontal, y con resoluciones superiores se desaprovecha la pantalla.

Por cierto, aquí puedes ver la tabla y las celdas de la tabla resaltadas. Esto quizás te pueda ayudar a entender cómo se realiza un diseño fijo con tablas. El diseño fijo con tablas quedó obsoleto hace ya muchos años. La página web “Porqué diseñar con tablas es estúpido” lo explica muy bien.

El diseño con tablas presenta muchos problemas: mezcla el contenido con la presentación, el código HTML es más complejo, las páginas son más pesadas y más difíciles de mantener, y produce muchos problemas de usabilidad y accesibilidad. En la actualidad, el diseño con tablas es algo totalmente prehistórico, pero como te he comentado, hace años era lo común. Por ejemplo, así era la página principal de la Universidad de Alicante en junio de 2005.

Si se resaltan las tablas y las celdas de las tablas que hay en esta página, esto es lo que se puede observar: un buen número de tablas anidadas unas dentro de otras.

¿Ha mejorado el diseño de la página principal de la Universidad de Alicante? Sí, ha mejorado, ya no utiliza tablas, pero sigue utilizando un diseño fijo que no se adapta correctamente a diferentes resoluciones de pantalla.

Existe otra forma de realizar un diseño fijo con la propiedad float de CSS. Esta propiedad permite que los elementos de bloque, como pueden ser las etiquetas div o p, se puedan colocar en una disposición horizontal, una al lado de otra. Esta propiedad la tienes explicada con detalle en el vídeo “CSS: Maquetación web con CSS: uso de float”.

En este estilo de diseño no se usan tablas; se emplea la etiqueta div para agrupar el contenido. Para el body, es decir, para toda la página, se define un ancho fijo, y luego se define un ancho para cada una de las columnas que componen la página. La suma del ancho de las columnas es igual al ancho total. Para que esto sea verdad es muy importante poner a cero el margen de las columnas.

La página la he diseñado para un ancho de 960px. ¿Por qué? Usar un ancho de 960 píxeles era un estilo muy común hace años, cuando la resolución de pantalla más popular era 1024x768. Como es un diseño fijo, cuando la resolución de pantalla es inferior aparece la barra de desplazamiento horizontal. Cuando la resolución de pantalla es superior a 1024 píxeles, la página se ve de esta forma.

¿No se podría por lo menos mostrar la página centrada? Sí, esto se resuelve con una sola línea en el CSS. Simplemente hay que establecer los márgenes izquierdo y derecho del body a auto, y el contenido de la página se mostrará centrado con cualquier resolución de pantalla.

Ahora te invito a que veas la quinta parte de este vídeo, en el que veremos el diseño elástico, que mejora algunos de los problemas del diseño fijo.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo: a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web”, que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.