◀️  Anterior

📚 Introducción al desarrollo web: HTML y CSS (2/2)

🗂️ Cómo se maqueta una página web

🎥⏱️ 3m 49s

📖 CSS: maquetación de una página (1)

⭐ Aspectos clave

Debes ver el vídeo CSS: maquetación de una página (1) en el que se explica qué es la maquetación de una página web, en qué consiste definir la estructura, diseño o composición (en inglés layout o mockup) de la página. Además se muestra la maquetación por bloques.

📝 Transcripción

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.

¿Qué es la maquetación?
Si buscamos en el diccionario de la lengua de la Real Academia Española el término “maquetación” encontramos la definición “acción y efecto de maquetar”. No queda muy claro.

Si buscamos “maquetar” encontramos la definición “Hacer la maqueta de una publicación”. Y si buscamos “maqueta” por fin encontramos una definición que nos dice algo: “Boceto previo de la composición de un texto que se va a publicar, usado para determinar sus características definitivas”.

Por ejemplo, cuando un periódico prepara la portada de una edición, prepara diferentes maquetas para probar diferentes titulares, diferentes contenidos y encontrar la que mejor cree que va a funcionar en el quiosco. Y cuando se organiza el espacio de una página del periódico, se trabaja a nivel de bloques para distribuir los diferentes elementos en el espacio disponible.

Muchas veces, al maquetar una publicación no se trabaja así, con el contenido visible, sino que se trabaja de esta otra forma, mediante bloques. Con estos bloques se puede jugar para definir varias maquetas y tomar una decisión de la publicación final.

A la hora de maquetar se tienen que tener en cuenta consideraciones gráficas del diseño, como la claridad, la legibilidad, el correcto uso de los espacios en blanco, la distribución balanceada del contenido y muchas otras consideraciones. Algunos sinónimos de maquetación y maqueta son estructura, diseño, composición, y en inglés se suelen emplear los términos layout y mockup.

En la maquetación de una página web se suelen aplicar los mismos principios y técnicas que se han aplicado tradicionalmente en los medios impresos. Pero hay una diferencia muy importante. 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 un ordenador, una tableta, un teléfono móvil o algún otro dispositivo que todavía no se ha inventado. Por tanto, realmente la maquetación de una página web se diferencia bastante de la maquetación de los medios tradicionales.

Como veremos más adelante, esto influyó de forma muy negativa en los principios de la Web. 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. Pero eso te lo explicaré en la segunda parte de este vídeo, en el que voy a realizar un análisis a nivel macro y micro de 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.

 ◀️  Anterior