Vídeo: Práctica de Maquetación CSS

Sobre Maquetación CSS ya hemos hablado muchas veces en DesarrolloWeb.com, pues es uno de los conocimientos fundamentales que cualquier desarrollador debe conocer para realizar páginas web de última generación. De hecho, todos los conocimientos que las personas adquieren sobre CSS están dirigidos por último a aprender a utilizar este lenguaje exclusivamente para maquetar y definir el aspecto de las webs.

Quien se interese por la maquetación puede leer el Manual de Maquetación CSS que hemos publicado ya hace tiempo, pero también agradecerá sin duda los presentes vídeos que ilustran el mundo de la maquetación desde la práctica.

Este material viene a continuar con el Videotutorial de CSS y a ofrecer a las personas una visión más cercana sobre cómo utilizar las Hojas de Estilo en Cascada para realizar una página web. Se trata por tanto de unos vídeos esenciales para poder entender cómo diseñar webs utilizando CSS de la manera correcta, aprovechando todas las posibilidades y ventajas de este lenguaje que permite separar el contenido de la forma.

En el vídeo veremos cómo se construye una página en HTML sencilla, donde no se aplica ningún atributo ni etiqueta para definir el estilo. Es decir, con HTML sólo definimos el contenido de la web. Luego veremos cómo con CSS se define la forma o el aspecto con el que los elementos de la página se tienes que visualizar. Es decir, veremos cómo se define la forma exclusivamente con CSS y cómo podemos cambiar radicalmente el aspecto del contenido, para adaptarlo a nuestras necesidades, gustos u objetivos de presentación.

La práctica la hemos grabado en vídeo sobre la marcha, lo que quiere decir que el diseño de esta web lo hemos realizado sin un guión previo, sin tener muy claro lo que se pretendía obtener. Por ello podremos ver cómo a medida que se fue creando el diseño nos encontramos con problemas típicos de la maquetación CSS y cómo aplicando estilos podemos ir resolviéndolos. Por esta misma razón a menudo jugamos con la prueba y ensayo hasta que encontramos un buen resultado. Tengo que admitir también que el aspecto final no es un diseño muy elaborado, pero el objetivo del vídeo no es hacer una web bonita, sino mostrar a las personas cómo se maqueta con CSS por la práctica.

Otra recomendación antes de ver estos vídeos es acceder a unas grabaciones previas donde se muestra una demo sobre las posibilidades de la maquetación web, cómo se consigue, qué atributos se suelen utilizar, así como las técnicas habituales que envuelve. Así pues, sobre todo para las personas con menor experiencia, recomendamos encarecidamente ver antes el videotutorial de introducción a la maquetación web.

Para las personas que deseen probar a seguir los pasos de este ejemplo de maquetación web explicado en el vídeo, ponemos a vuestra disposición el siguiente link, donde puede verse el ejemplo en marcha que vamos a realizar.

Así que sin más tardar vamos a mostrar ahora mismo los vídeos que conforman esta práctica sobre maquetación web con CSS, que están divididos en 6 vídeos, de menos de 10 minutos de duración para poder subirlos a YouTube.

Vídeo 1: Comenzamos el diseño en HTML y primeros estilos

En este vídeo introducimos algunas de las referencias útiles para aprender a maquetar y comenzamos el ejemplo práctico creando un contenido estrictamente en HTML, con una serie de elementos DIV, también llamados capas en la jerga del diseño web. El esquema principal del sitio lo compondremos con los distintos elementos esenciales de las páginas: cabecera, cuerpo y pie. Luego comenzamos a aplicar los primeros estilos a la página, comenzando por el aspecto general del cuerpo y el contenedor principal.

Vídeo tutorial 2: Estilos en la cabecera

En este segundo vídeo comenzamos ya a aplicar estilos en la cabecera, con la colocación de un logotipo para la página y la creación de un formulario para hacer un buscador interno. Coloraremos el logotipo y el formulario en la cabecera, como elementos flotantes y comprobaremos que en ocasiones al colocar algunos elementos se nos descuadra el diseño. Los problemas se resuelven averiguando los elementos que están produciendo las dificultades e identificando los atributos CSS que nos están faltando.

Videotutorial parte 3: Fin de cabecera y comienzo del cuerpo

En este vídeo mostramos cómo resolver el problema encontrado en la cabecera en el vídeo anterior y también comenzaremos con la creación de estilos para definir el aspecto de la parte principal de la página, lo que llamamos el cuerpo. Además, haremos el principio del navegador, colocando una lista que deberá estilizarse más adelante.

Vídeo tutorial 4: Cuarta parte con diseño de columnas

La cuarta parte de este videotutorial la dedicamos a la creación de una estructura de dos columnas en el cuerpo de la página, que es uno de los puntos más interesantes en la maquetación web. Además comenzaremos a estilizar el diseño del navegador de la columna de la derecha, aplicando estilos a las listas de enlaces.

Videotutorial 5: Fin de la lista y comienzo del pie

En esta parte, ya casi el final de la práctica, veremos como aplicar estilos interesantes en las listas, incorporando un señalador o bullet personalizado en la lista del navegador. Luego comenzaremos con el diseño del pie de página, que tiene también otra lista que se estilizará de una manera completamente distinta.

Vídeo final, parte 6: Con los últimos estilos pie de página y pruebas en distintos navegadores

Este vídeo, de menor duración, mostrará cómo terminar de aplicar estilos al pie de página y la lista de enlaces que contiene. Además, para acabarlo todo, se mostrará el ejemplo con distintos navegadores, para comprobar si todo se ve de la misma manera.

Con esto termina este vídeo de maquetación web con CSS que esperamos haya resultado interesante. Terminamos dando las gracias a todos los que han seguido los vídeos y recomendando hacer el trabajo de creación de una web con estilos asignados totalmente con CSS, por vuestra propia cuenta, para poder asimilar bien todo lo relatado. Además, si alguien le interesa profundizar un poquito más y seguir su formación por medio de vídeo, os informamos que existe otro videotutorial en DesarrolloWeb.com de maquetación web por medio del framework 960 Grid System.