Hoy voy a hablar sobre 2 cosas en este post, primero y es el tema principal es sobre el framework css llamado Blueprint y el segundo tema es Windows Live Writer.

Bueno y porque Windows Live Writer? pues porque acabo de instalarlo y voy a escribir este post usándolo para hacer una prueba de sus funciones, luego escribiré mas a fondo sobre el tema del windows live writer.

Blueprint es un set de archivos CSS que trae ya definidos muchos formatos útiles y que  nos facilitan la creación de nuestros sitios. Es 100% web 2.0, trabaja con DIV y permite definir desde una página con una sola columna, hasta páginas con diseños complejos casi tan fácil como usar una grilla gráfica para ubicar nuestros objetos.

Hay que reconocer que de primera mano no es tan rápido el desarrollo usando este framework ya que tenemos primero que aprender como usarlo y cual es la mejor forma de poner los objetos, pero estoy seguro que después de coger el paso ya será muy fácil crear rápidamente un sitio con una distribución compleja y sin tanta preocupación por el css y los tipos de letra entre otros.

aquí hay un ejemplo de lo que puede hacerse con solo Blueprint

http://files.bjorkoy.com/blueprint/tests/parts/sample.html

Actualmente está en la versión 0.7, la cual podemos descargar desde Google Code BluePrintCss.

El archivo descarga varias cosas incluido el código fuente pero básicamente solo necesitaremos incluir 3 archivos css:

print.css Este archivo tiene los estilos necesarios para usarlos al momento de imprimir contenido

screen.css : Este es el archivo principal con todos los estilos necesarios.

ie.css : Un archivo para suplir algunas de las cosas diferentes que tiene Internet Explorer.

Ahora incluimos los css dentro de nuestra pagina con las etiquetas link.

<!– Framework CSS –>
<link rel=”stylesheet” href=”../blueprint/screen.css” type=”text/css” media=”screen, projection”>
<link rel=”stylesheet” href=”../blueprint/print.css” type=”text/css” media=”print”>
<!–[if IE]><link rel=”stylesheet” href=”../../blueprint/ie.css” type=”text/css” media=”screen, projection”><![endif]–>

Y comenzamos a utilizarlo.

Como vemos en las etiquetas definimos cada uno de los usos que se le dará a los archivos, por ejemplo para el archivo screen.css definimos que se usara para proyecciones y pantalla, luego definimos el que se usará para impresión y adicionalmente con una etiqueta condicional definimos que si es un Internet Explorer entonces usamos el archivo ie.css.

Lo primero es incluir un DIV que servirá de contenedor para todo el sitio, este div contendrá los demás elementos de la página y se encargará de dar el tamaño y centrar el contenido.

<div class=”container”>

En donde el estilo que usamos es “container” el cual define el tamaño a 960px centrado.

Ahora voy a crear el encabezado de la página en donde pondré el titulo del sitio. utilizo un estilo “span-24” que llenará de lado a lado de la pantalla.

<div class=”span-24″>
<h1>Este es el header</h1>
</div>

Defino una columna de contenido principal, con “column span-12 colborder first “ que básicamente le decimos que es una columna que es la primera y que tiene un borde al lado derecho.

<div class=”column span-12 colborder first “>
<h2>Contenido Principal</h2>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et</p>
</div>

Ahora agrego dos columnas mas que por el span-7 y el span-3 son mas pequeñas en ancho que la de contenido.

<div class=”column span-7 “>
<h3>Segunda Columna</h3>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue</p>

</div>

<div class=”column span-3 last”>
<h3>Tercera Columna</h3>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue</p>
</div>

y por ultimo adiciono el Pie de Página, lo separo con un HR para hacer una línea.

<hr>

<div class=”span-24″>
<h4>Este es el Footer</h4>
</div>

y ya tengo el esqueleto de mi sitio, solo me restaría terminar de adicionar las imágenes y el contenido que defina mi diseño pero el esqueleto esta listo.

Bueno, esta muy básico, pero solo quería contarles lo sencillo que es, ya igual trae muchas otras cosas que quizás trataremos después o puedes leer en los tutoriales, ejemplos o con la experiencia propia, es mas si quieres publicar un tutorial mas avanzado te invito a que me lo envíes y yo lo publico aquí como un post a tu nombre.

yo recomiendo este tutorial de Leonardo Donofrio el cual explica las cosas básicas y en español, aunque hay que tener en cuenta que este tutorial usa una versión anterior de blueprint así que no van a coincidir las medidas de los elementos.

yo lo que hice fue usar el tutorial para entender como usarlo pero luego abrí el archivo screen.css y comencé a ver cuales son las medidas de cada uno de los atributos para saber cual usar.

más tutoriales y artículos sobre el tema en:

http://code.google.com/p/blueprintcss/wiki/Links

La página oficial de Mootools informa ahora que se ha liberado la versión 1.2 de la librería Mootools, han cambiado el diseño de la página y por ahora solo está disponible la descarga y la documentación, aun faltan cosas como los demos.

Bueno entraremos a analizar esta nueva versión para ver que cosas nuevas trae y como va a estar la compatibilidad con  plugins de la versión 1.1.

Ahora me tocó modificar la entrega 2 de los post sobre mootools que estaba haciendo, aun no se que va a pasar con la versión 1.1 y si va a tener mas soporte, yo creería que no pero vamos a ver que pasa y como se porta esta nueva versión.

Por ahora resta esperar que la página esté completamente lista y que más información van a plublicar… ya me descargue la version 1.1 que pesa apx 60k. empesaré a usarla…

link