Vídeo: Maquetación de un diseño con Blueprint CSS. Parte 1 de 3

  • Por
Vídeo de la maquetación CSS ayudados por el framework CSS Blueprint. Partimos de un diseño con Photoshop y generamos la plantilla en HTML y CSS.
Blueprint es un excelente producto para el que quiera maquetar una web rápidamente y con bastante facilidad. Nos ayuda en la etapa de diseño y sobre todo en la de maquetación, siempre basada en estándares de las Hojas de Estilo en Cascada. Nosotros venimos trabajando bastante para la creación de un manual que explique el modo de trabajo con este framework CSS y ahora estamos creando una serie de videotutoriales que esperamos acaben de despejar las dudas que los lectores puedan tener.

En esta ocasión estamos poniéndonos manos a la obra con la maquetación CSS a partir de un diseño realizado previamente y publicado para los lectores de DesarrolloWeb.com. Se trata de convertir una imagen diseñada con Photoshop en una página web, realizada con HTML y CSS. Todo ello realizado paso a paso y en vídeo y con completas explicaciones.

Para poder seguir este videotutorial necesitarás un par de referencias:

Nota: Para el que no disponga de la base de conocimientos necesaria para abordar este taller, recomendamos el Manual genérico sobre las Hojas de Estilo en Cascada y otro manual específico de Maquetación CSS.
En este videotutorial comenzaremos con la presentación de todos los materiales y referencias necesarias para ponerse a maquetar con CSS. Luego, partiendo de una página vacía, comenzaremos a crear código fuente para maquetar el diseño que tenemos en una imagen en Photoshop.

El primer paso será incluir los estilos CSS que nos proporciona Blueprint y luego ir poco a poco creando el código HTML y los estilos CSS específicos para maquetar esta página web. La tarea no resultará difícil, sin más bien laboriosa, pues para crear un diseño generalmente tenemos varias partes que se deben integrar en la página. No obstante, el diseño que estamos realizando es bastante sencillo y espero al alcance de todas las personas.

Esta será la primera entrega de la práctica de maquetación, en la que realizaremos la parte de la cabecera y de la noticia principal. Más adelante trabajaremos con las otras partes de este diseño, que planeamos se completará en tres entregas, con duración total de 2 horas de práctica de maquetación web.

El trabajo, tal como quedará hasta la finalización de esta primera parte se puede ver en el siguiente enlace.

Así que sin más introducciones, os dejo con esta primera parte de la videopráctica de maquetación CSS con Blueprint. Y por cierto, os informamos que la segunda parte de esta práctica continua en el videotutorial de Blueprint parte 2 de 3.

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

juanc_cholele

20/5/2011
la continuación :(
Realmente muy bueno el vídeo, como si estuviera al lado del instructor, espero la continuación... gracias

hdort1

21/5/2011
PREGUNTA
Saludos....
Felicitaciones y mil gracias por su dedicación y continuidad, realmente son admirables.
Espero con avidez la continuación de este video.

Por otro lado, tengo una pregunta que no tiene que ver con el tema, pero es que tengo un pequeño problemita con los editores Notepad ++ y el Komodo edit. No he podido hacer funcionar el autocompletado de etiquetas, es decir, cuando empiezo a escribir una etiqueta, se despliega la ventana para elegir la etiqueta y no tener que tipear toda la palabra, pero esta función solo me completa la palabra, no me cierra la etiqueta. Si alguien me puede ayudar, lo agradeceré muchisimo.

Hasta la próxima.

jlee

21/5/2011
Exelente tuto
Muchisimas gracias por el tuto, esperamos pronto parte 2 y 3

tito

08/7/2011
buen tutorial
pero cada vez que oigo como dices blueprint me duele a los oidos...

Mcarthur

11/7/2011
Buena opcion
Hace tiempo buscaba una opcion diferente al DW y gracias al tuto que montaron me ha servido de mucho para crear web de forma mas rapida y menos problematicas con el anterior soft.
Los felicito por el tutorial que nos brindan muy bien explicado y de comprension rapida.

manu

17/2/2012
acerca del videotutorial
oye amigo, la barra del menu se me monta sobre el cuerpo, que estoy haciendo mal? este es mi codigo:
<body>
<div class="container">
<div class="span-24 last">
<div class="span-11"><img src="objetos/logo.PNG" width="296" height="67"</div>
<div class="span-13 last">
<ul id="nav">
<li>portada</li>
<li>diseño</li>
<li>enlaces</li>
<li>quienes somos</li>
</ul>
</div>
</div>
<div class="span-24 last">cuerpo</div>
<div class="span-24 last">Pie</div>
</div>
</body>

Elias

29/11/2012
Gracias
Realmente no conocia este framework, me parece muy interezante y agradezco este completo manual.

pmmparana

24/10/2016
Alternativa a Photoshop
Existe alguna alternativa de software free license para hacer lo mismo que se hace en el ejemplo con photoshop?