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 explicar cómo se realiza la maquetación de una página web.

En la primera parte de este vídeo, vimos el concepto de maquetación, que consiste en realizar el boceto de la composición de un texto que se va a publicar, usado para determinar sus características definitivas. La maquetación de una página web se puede realizar a varios niveles. Para no complicarlo mucho, voy a hablar de maquetación macro y maquetación micro. Veamos un ejemplo.

Primero voy a realizar un análisis a nivel macro de la maquetación de una página web. Esta es la página principal del sitio web de la Universidad de Alicante. Ahora mismo se está visualizando en una pantalla con una resolución de 1920x1080. Si cambiamos la resolución de visualización a 1024x768, vemos que la zona de contenido principal se ajusta perfectamente al ancho disponible.

En realidad, la página no se ha ajustado. Lo que ocurre es que la página se ha diseñado para un ancho de 1024 píxeles. Cuando definimos las dimensiones de un diseño, normalmente sólo nos fijamos en el ancho; ese valor se limita. El alto no se suele limitar, ya que la página web puede crecer y crecer gracias a la barra de desplazamiento vertical.

El diseño de esta página es en parte flexible, porque como vemos se adapta a tamaños de pantalla mayores, pero no es totalmente flexible, porque para tamaños inferiores, la página no se adapta y aparece esta barra de desplazamiento horizontal que no debería aparecer nunca.

¿Por qué no debe aparecer la barra de desplazamiento horizontal? Hace ya muchos años, Jakob Nielsen, uno de los gurús de la usabilidad, publicó el artículo “Top 10 Web Design Mistakes of 2002”. En el puesto tercero de esta lista de errores aparecía la barra de desplazamiento horizontal. Doce años después, este consejo sigue siendo válido.

Una vez que tenemos claro que esta página está maquetada para un ancho de 1024 píxeles y posee un diseño centrado, voy a realizar un análisis a nivel micro. A nivel micro podemos detectar los siguientes cuatro bloques principales: una barra de menú superior que permite cambiar el idioma de la página, la cabecera, el contenido principal y el pie de la página. Cada bloque principal se puede descomponer a su vez en bloques más pequeños.

El contenido principal se compone de dos grandes subbloques. A su vez, el bloque de la izquierda se compone de todos estos otros bloques. Este análisis se puede repetir varias veces para cada bloque hasta llegar al nivel de detalle que se desee. Las páginas de tercer nivel y niveles inferiores del sitio web de la Universidad de Alicante presentan otro.

Así se ve la página a 1920x1080. Así a 1024x768. Y así a 800x600. Como vemos, la página se ajusta a diferentes resoluciones porque hace uso de un diseño fluido o líquido.

A nivel micro, la página presenta los siguientes bloques principales: la barra de selección de idioma y de enlaces comunes, la cabecera, el contenido principal y el pie de página. A su vez, el contenido principal se divide en la barra de navegación y el contenido.

Ahora te invito a que veas la tercera parte de este vídeo, en el que empezaremos a ver los principales estilos de diseño que existen en la maquetación de una página web.

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.