Maquetación web


Maquetación web. Consiste en tomar el diseño y la arquitectura de un sitio web y convertirlo en código para el programador. Esta es una profesión muy demandada que requiere de conocimientos de varias disciplinas, como estilos CSS, HTML, etc. La maquetación, también llamada a veces diagramación, es un oficio del diseño editorial que se encarga de organizar en un espacio, contenidos escritos, visuales y en algunos casos audiovisuales (multimedia) en medios impresos y electrónicos, como libros, diarios y revistas.


Maquetación de página HTML


En HTML, la maquetación web básicamente se trata de proveer de estilo a los elementos de nuestra página web para que estos se vean lo más atractivo posible según sean los objetivos, esto implica un proceso creativo, en el que se definen colores, tamaños, márgenes, rellenos, bordes, hasta efectos especiales y mucho más. Como hemos visto, con HTML podemos dotar de cierto estilo a nuestros elementos HTML mediante ciertos atributos, pero piénsalo bien, no sería para nada cómodo poner todos los estilos dentro de un atributo y aun peor si la estructura de nuestra página se va complicando aún más y más a medida que vamos añadiendo nuevos elementos.


Importancia


El objetivo es mantener separado el contenido de la página de la presentación. De este modo haces más fácil el mantenimiento y cambios al contenido y diseño que tengas que hacer en el futuro. Hay otras ventajas, como reducir el tiempo de desarrollo y el tiempo que el usuario debe esperar a que se cargue completamente el sitio.


Ejemplo de maquetación HTML y CSS


A modo de ejemplo veamos como se ve un código de estilo CSS para un párrafo HTML.




Si echamos un vistazo al código CSS podemos notar que está llena de instrucciones, propiedades y valores, pues es así como trabaja CSS.

Resultado:




¿Qué acabamos de hacer?
Pues es sencillo, simplemente le pusimos un estilo a un elemento html y en este caso a un párrafo.

¿Cómo lo hicimos?
Te explicaré brevemente, ya que esto ya corresponde al curso de CSS, Verás, hemos creado un párrafo cualquiera en nuestro documento de HTML y para dotarle de estilo hemos empleado la etiqueta dentro de la etiqueta de nuestro documento html, dentro de la etiqueta colocamos el código CSS que ves a lado del párrafo HTML, si guardas el documento y actualizas el navegador verás que se aplican los estilos al párrafo , al final tu documento HTML se debería ver similar a:




Con CSS también podemos apuntar los elementos únicos de nuestro documento HTML que están identificados con el atributo ID, también podemos apuntar los elementos que están identificados con un atributo CLASS y después de apuntarlos determinar las características y estilos que dichos elementos tendrán.