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

  • Por
Un vídeo tutorial en el que realizamos un ejemplo práctico de maquetación CSS, paso por paso, para que las personas puedan aprender cómo realizar una página con posicionamiento y dimensionado de elementos por medio de 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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

roberto_badillo-566207

01/5/2010
Felicitaciones
Esta excelente muy didáctico

Gracias

Aercolini

04/5/2010
maquetación con CSS
Muy bueno el video tutorial

Elros

04/5/2010
Buen tuto!!!
Excelente tutorial css.

Como nota para eliminar el espacio que aparece arriba de la cabecera tambien bastaba poner un padding:1px; en el css de la cabecera y con eso se soluciona de igual manera el problema, sin necesidad de colocar un height, de esta manera se hace mas flexible el diseño

uservillano

15/6/2010
Felicitaciones Comunidad de deesarrolladores
Hola Felicito por estos videos tutoriales , super didacticos .
Agradeceria que de la misma forma como videos tutoriales como HTML Y CSS hagn uno igual, peor con javascript y nuevamente felicitaciones exelente pagina web :)

Maria

23/8/2010
gracias
Queria daros las gracias por estos videotutoriales, he aprendido mucho, espero aprobar el examen que tengo en septiembre, jeje, gracias de nuevo! :)

jpetis

10/11/2010
Agradecimientos
Considero desde mi humilde opinion que este tutorial de CCS es muy completo y ademas esta muy bien explicado y dirigido. recomiendo hacerlo a quien quiera de verdad hacer una web. Es un buen principio de comprension de no volverse uno loco con los editores de diseño y poder colocar las cosas donde uno quiere de verdad

cesar

19/11/2010
Videos tutoriales css
Hola los felicito por compartir sus conocimientos con la comunidad web, excelentes sus videos y muy pedagógicos. Exitos

ana

14/1/2011
muy bien pero tengo un problema
Hoola si me parece muy esto de la maquetacion pero tengo una gran duda porque nuestro profesor de informatica nos mando a hacer una pagina en frances en la cual se hacen paginas y se vinculan con una sola que es la de index.html pero okey pero si yo quiero poner ahora esas paginas en maquetacion css tengo que utilizar la de index.html o las otras sin vincular? por favor decirme que hacer porque es una tarea

anyelo_roy

23/3/2011
Excelente
Excelente tutorial gracias!!

Miguel Ponce

25/3/2011
GRACIAS
Hola mucho GUSTO me encanto el VIDEO TUTORIAL, mira te cuento q me srivo de mucho... estoy empezando a trabajar en una empresa... y bueno me gusta programar.. pero el LENGUAGE q manejan aca es nuevo para mi.... y te dire q me he dedicado a dar estilos a las páginas WEB... chevere pienso q es todo una ciencia los estilos CSS... y de seguro q si nos ayudas con unos viedos de CSS y html 5 te quedaria muy agradecido...cudiate chau..

Silvina

05/4/2011
no veo los videos
Hola!!
No sé por qué pero no puedo ver bien los videos, solo escucho el audio con toda la imagen verde. O bien parece que comienza bien y después hace ese defecto. Probé directamente de You tube y sucede lo mismo No sé si en mi pc tendré algo mal configurado. Qué les parece que puede ser?

ladydis_81

06/4/2011
Gracias por compartir conocimiento
Muy buen material de fácil entendimiento gracias y ya estoy practicando

midesweb

30/4/2011
Maquetación en FRANCES?????
Ana: Dices lo siguiente:
"mando a hacer una pagina en frances"

¿Dices en Francés?
¿O te refieres quizás a que mandó hacerla con "frames"?

ThorGiner

26/8/2011
Gracias por los tutos!
Pues afortunadamente encontré estos tutos, ahora q me urgia aprender a maquetar usando hojas de estilo, se me hicieron muy practicos y didacticos, solo me gustaria k pusieran un link para descargar, el logo y los iconos, para lograr un mejor desarrollo de los tutos, yo ocupé una imagen cualquiera algo mas grande, y cuando surge el problema del espacio en el header me costo trabajo encontrar las medidas adecuadas para solucionar el problema,
gracias!

Felipe

27/11/2011
Muchas Gracias
Muy buenos videos Felicitaciones

bruneti

31/10/2012
Muchas gracias!
Muchas gracias por estos vídeos, me has resuelto un montón de dudas! ...y cómo se nota la experiencia...vas lanzado como un cohete! :)

Cris_Mol

03/12/2013
ADICTA A DESARROLLOWEB.COM
SENCILLAMENTE GENIAL!

Isabel Velásquez Feria

09/9/2015
Me ha sido de gran utilidad
Hola: Estoy siguiendo todos los videos de CSS y es bastante lo que he podido aprender, esto para mi es un comienzo porque pienso dedicarme a hacer páginas web.


Gracias.

Velisabella

19/9/2015
Me salen unos errores en el programa
Hola:
Tengo el privilegio de seguir tus videos de Maquetación con css los cuales me han parecido muy interesantes y didácticos. Aparte de agradecerte por brindar esa herramienta tan buena quisiera hacerte una pequeña consulta:

En mi código comenzaron salirme un símbolo <blockquote> en varias líneas
<blockquote>
<blockquote>
<blockquote>
<blockquote>

y en las listas me apareció así:

<ul>
<ul>
<ul>
<ul>
quisiera saber si se trata de algún virus o que puede ser. Por supuesto mi programa dejó de funcionar hasta que le borré todo eso pero no se que pudo pasar.

Atten.

Isabel Velásquez F.