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 la parte anterior de este vídeo, vimos los estilos de diseño “sin diseño” y “diseño fijo”. Recuerda que hoy en día existen multitud de dispositivos que permiten acceder a la Web, lo que origina que no exista una resolución de pantalla estándar.

En el siguiente gráfico de StatCounter podemos ver la evolución de las resoluciones de pantalla desde marzo de 2009 hasta octubre de 2014. El cambio producido en menos de 6 años ha sido impresionante. En marzo de 2009, la resolución más común era 1024x768 con un 42%. La siguiente resolución más común era 1280x800 con casi un 20%. Las dos resoluciones sumaban más de un 60%.

En octubre de 2014, la resolución de 1024x768 sólo representa un 5%, igual que 1280x800. En octubre de 2014, la resolución más común es “Otra” con un 35%, lo que significa que en la actualidad conviven multitud de resoluciones debido a los dispositivos móviles. En segundo lugar aparece 1366x768 con un 20%, la típica resolución de los portátiles. Aunque esas dos resoluciones son las más comunes, no hay que olvidar todas estas resoluciones que suman un 45%.

Los diseños que vamos a ver a continuación tienen como objetivo lograr que una página web se visualice correctamente en diferentes dispositivos. En este vídeo vamos a ver el diseño elástico.

En el diseño elástico, el ancho de la página no es fijo. El tamaño de la página y sus elementos está declarado en relación con el tamaño del texto, que se suele especificar en em. La principal ventaja de este diseño es que cuando se aumenta el tamaño del texto, este se reajusta perfectamente a la estructura, sin desbordamientos.

Veamos un ejemplo de diseño no elástico. Esta es la página principal del Congreso de los Diputados de España. Si en el navegador aumento el tamaño de visualización, realizando zoom con Ctrl +, la página aumenta pero se sigue viendo bien, porque toda la página aumenta en proporción. Sin embargo, hace años esto no funcionaba así. Solo aumentaba el tamaño del texto y podían ocurrir cosas como esto: el texto se hacía más grande pero no el resto de la página, así que el texto se salía de sus contenedores y no se podía leer ni entender correctamente.

¿Cómo se realiza un diseño elástico? Este es el esquema de la página de prueba que estoy utilizando como ejemplo en estos vídeos. Para realizar este diseño he añadido unos elementos div para agrupar ciertas partes del 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 la página y de las columnas.

La anchura de los distintos bloques de la página la he definido con la unidad de medida em. De este modo, toda la estructura de la página aumenta de forma proporcional al aumentar el tamaño del texto. Si no conoces o no entiendes las distintas unidades de medida que se pueden emplear en CSS, te recomiendo la lectura de este documento del W3C. De todas las unidades de medida que existen, algunas están recomendadas, mientras que otras solo están recomendadas para un uso ocasional o no se recomienda de forma rotunda su uso.

Para que entiendas cómo está organizada la página web con bloques, en esta imagen he destacado todos los elementos de tipo div. Si aumento el tamaño del texto con Ctrl +, todo el tamaño de la página aumenta de forma proporcional y la página se sigue viendo bien.

El diseño elástico resuelve algunos problemas, pero no es la solución perfecta. Con este diseño sigue existiendo el problema de qué ocurre con resoluciones pequeñas, ya que aunque se trabaja con unidades de medida relativas, en el fondo sigue siendo un diseño fijo. Y cuando se aumenta el tamaño de la página, puede llegar un momento en que aparezca la desagradable barra de desplazamiento horizontal.

¿No se puede hacer mejor? Claro, en realidad el ejemplo que te he mostrado tiene un ancho fijo, y al principio te he dicho que una de las ventajas del diseño elástico es que se puede realizar un diseño para un ancho no fijo. Para ello, no voy a definir el ancho de la columna con el contenido principal. El ancho de esta columna será el espacio que haya disponible en la página una vez restado el ancho del menú principal y del contenido secundario.

En este diseño, el ancho de la página no está limitado. Las columnas de menú principal e información adicional tienen definido un ancho fijo, pero el contenido principal no tiene un ancho definido. El ancho del contenido principal se adapta al espacio disponible. Podemos ver cómo al aumentar el tamaño del texto, las columnas con el menú principal y el contenido secundario aumentan de tamaño, mientras que la columna con el contenido principal disminuye. Y al reducir el tamaño de la ventana del navegador para simular una resolución de pantalla pequeña, la página se adapta correctamente a la nueva resolución.

Ahora sí que tenemos un diseño para un ancho no fijo. Sin embargo, para ciertas situaciones, el diseño líquido o fluido que te explicaré en la siguiente parte de este vídeo es mejor.

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.