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 “sin diseño”. En la parte anterior de este vídeo, vimos el análisis de la maquetación de una página web a nivel macro y micro. Algo muy importante que vimos fue la diferencia que existe entre la maquetación de un medio impreso y la maquetación de una página web.

Mientras que en un medio impreso conocemos con toda precisión el tamaño de publicación, es decir, sabemos el tamaño del papel y los márgenes que se van a emplear, en la Web el medio de publicación es la pantalla, que puede ser de un ordenador, de una tableta, de un teléfono móvil o de algún otro dispositivo que todavía no se ha inventado. Esto es muy importante no olvidarlo: en la Web, las dimensiones del dispositivo de visualización son desconocidas.

Bueno, en realidad, no son del todo desconocidas, podemos suponer un rango, desde una resolución mínima de VGA de 640x480 hasta una resolución máxima QSXGA de 2560x2048. Pero además, aunque todo el mundo usase la misma resolución de pantalla, puede ocurrir que algunos usuarios tengan una visualización menor porque su navegador muestra algún panel o simplemente el usuario no tiene maximizada la ventana del navegador. Por tanto, te lo vuelvo a repetir: en la Web, las dimensiones del dispositivo de visualización son desconocidas.

Los principales estilos de diseño que existen en la maquetación de una página web son: sin diseño, diseño fijo, diseño elástico, diseño líquido o fluido, y diseño adaptable. En realidad, lo normal es que al final se utilice un diseño híbrido, una mezcla de todos estos.

En este vídeo y en los siguientes vamos a ver cómo desarrollar la siguiente página web con todos los estilos de diseño que antes te he mostrado. Esta página se compone de: una cabecera, una barra o menú de navegación principal, la zona de contenido principal, un panel con información adicional y un pie de página.

Veamos el primer estilo de diseño.

Sin diseño es como se hacían las páginas web cuando nació la Web en 1990. Por ejemplo, esta es la primera página web que Tim Berners-Lee publicó en diciembre de 1990. En realidad no es la primera, sino una versión posterior del año 1992, pero podemos ver que la página no tiene diseño: no hay colores, no hay diferentes tipos de letra, no se ha distribuido el contenido por la página.

En la actualidad, con cualquier página web, como por ejemplo la página web principal del sitio web de la Universidad de Alicante, podemos hacer la prueba de visualizarla sin estilos. El resultado puede ser sorprendente, similar a ver la foto de alguna famosa sin maquillaje: la página es irreconocible. A la izquierda podemos ver la visualización normal de la página y a la derecha la podemos ver sin estilos. Podemos ver que sin estilos la página es larguísima.

¿Cómo se realiza este diseño? No hay mucho que decir porque no se tiene que hacer nada. Respecto a la página de prueba que voy a desarrollar, este es el código HTML de la página. La página tiene: una cabecera, una barra o menú de navegación principal, la zona de contenido principal, un panel con información adicional y un pie de página. Y así es como se ve en un navegador.

Vamos a ponerle un poco de diseño a la página, pero eso lo haremos en la siguiente parte de este vídeo, en el que te explicaré cómo realizar un diseño fijo 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.