Maquetación de una web con Blueprint CSS. Vídeo final parte 3 de 3

  • Por
Último vídeo de la práctica de maquetación web con CSS ayudados por el framework CSS Blueprint.
En DesarrolloWeb.com estamos tratando de ser lo más didácticos posibles y para ello nos hemos puesto a producir vídeos sobre distintas técnicas de desarrollo, como es el caso de estos videotutoriales que están ilustrando el uso de Blueprint para la maquetación web.

Blueprint es un framework CSS que hemos tratado en profundidad en el Manual de Blueprint CSS. Como colofón a ese manual estamos realizando una práctica completa de maquetación web con CSS, en la que hemos partido desde cero, creando previamente un diseño con Photoshop y luego maquetando ese diseño con HTML y CSS.

Todo ello nos ha llevado varias prácticas, que se pueden encontrar en los siguientes enlaces:

En esta tercera parte vamos a llegar al final de la práctica, en la que terminaremos nuestro sitio web, o mejor dicho, la plantilla de nuestro sitio web en HTML y maquetada por completo con las Hojas de Estilo en Cascada.

El presente videotutorial seguirá por donde nos quedamos en la anterior parte 2, tratando la tercera columna de contenidos centrales de la página y luego pasando a realizar la maquetación del pie de página.

No hay muchos misterios ya por desvelar, si es que habéis seguido las anteriores partes de esta práctica en vídeo. No obstante, esperamos que el material os sirva de provecho y podáis seguir aprendiendo técnicas de maquetación web actuales.

Os dejo sin más dilación con el vídeo, que finalizará este ejemplo de maquetación web CSS con Blueprint.

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

kodeone

07/11/2011
gracias!
Muchas gracias por el tutorial, está perfectamente explicado y me ha servido de mucho : D

10/2/2012
Gracias y Sugerencia
Estimado Miguel,

tengo dos sensaciones juntas que comparto a continuación:

1. Enorme agradecimiento porque en 3 hrs he aprendido algo que de otra forma hubiese llevado días enteros (varios). Se trata de como pasar de una idea o concepto, siguiendo por el photoshop maquetado y luego pasándolo a la practica con la precisión que entrega blueprint. MUY BUENO.

2. como sugerencia, he visto que has aplicado muy bien toda la parte de posicionamiento de elementos en la pagina. Aunque a la hora de utilizar elementos del tipography, forms y algunas clases de formato he encontrado que los ejemplos buscaron atajos directos vía CSS. He visto otros frameworks donde se generaban clases standard que luego simplemente se aplicaban a los nuevos componentes.

Esto ultimo no es critica, solo que me quede con un sabor de "falta algo".

Ahora mismo voy a iniciar el diseño de mi pagina con tus conceptos y voy a intentar utilizar los que menciono en el punto 2. Si logro un avance significativo, te lo paso así tal vez puedas sumarlos en próximos vídeos.

Un saludo y nuevamente gracias por todo este material.

lapb63

16/2/2012
Gracias y sugerencia
Primero, dar las gracias por los videos, realmente acortan la curva de aprendizaje.
Segundo, una humilde sugerencia (más bien, una petición).Sería genial un video que mostrara cómo adaptamos esta plantilla recién creada, a una plantilla joomla. Ahí sí que el ciclo pedagógico estaría completo.
Muchas gracias nuevamente. Saludos

Ezequiel

12/6/2013
Gracias.
Gracias por este libro simple, corto, perfecto y lo mejor de todo muy bien explicado! saludos, ojala sigas subiendo cosas, abrazo.