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:

• Manual de Blueprint CSS
• Vídeo donde realizamos el diseño con Photoshop que ahora vamos a maquetar

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.