Disseny web amb Blueprint CSS i Boks

Blueprint és un Framework CSS que permet accelerar el procés de desenvolupament del disseny CSS d'un lloc web i assegurar la compatibilitat d'aquest disseny entre els diferents navegadors.

Quan parlem de frameworks CSS ens referim a una o més llibreries que us ajudarà en la resolució d'un problema específic. En aquest cas, els frameworks CSS o web design framework és un full d'estil prefabricat que facilita la tasca del disseny de la pàgina en el següents termes:

  • Disseny sense taules
  • Ràpid desenvolupament
  • Compatibilitat entre navegadors

En el cas del framework Blueprint teniu les següents avantatges:

  • Un CSS reset que eŀlimina les discrepàncies entre navegadors. Aquest CSS reset ja el vau utilitzar a la pràctica 3 del mòdul 5
  • Un retícula que us permetrà crear composicions complexes.
  • Estils per als formularis
  • Estil d'impressió de la pàgina
  • Coŀlecció de plugins per a botons, pestanyes i sprites.
  • Eines, editors i plantilles disponibles per agilitzar el procés de treball amb el framework.

Veieu a continuació un exemple de composició de pàgina:

Boks

Treballar amb un framework css com Blueprint no és fàcil, especialment si no esteu completament familiaritzats amb els conceptes del CSS2. Per aquesta tampoc és raó perquè no comproveu el potencial d'aquesta eina. Per aquesta raó, enlloc de treballar directament amb Blueprint, fareu servir un ajudant visual anomenat Boks.

Què és Boks?

En paraules del seu desenvolupador, Boks és una aplicació AIR (Adobe Integrated Runtime, és a dir, un entorn de desenvolupament i producció multi-plataforma d'aplicacions basats en tecnologies d'Adobe com Adobe Flash) que porta una interfície visual per treballar amb el framework Blueprint.

Instaŀlació de Boks

Per instaŀlar Boks heu de tenir prèviament l'entorn d'execució AIR al sistema operatiu. Aneu a http://get.adobe.com/air/ i premeu al següent botó:

Un cop heu intaŀlat correctament Adobe AIR, torneu a la pàgina principal de Boks i feu clic a l'opció Install Now o descarregueu-lo directament des d'aquest enllaç.

Un cop instaŀlat correctament, executeu Boks i us apareixerà la següent finestra:

Configuració de Boks

Feu clic sobre el botó Grid Settings. S'obrirà una finestra de propietats. Seleccioneu la pestanya Grid i establiu els següents paràmetres de la retícula tal com podeu veure a la següent captura de pantalla:

  • Amplada de la pàgina: 960px
  • Nombre de columnes: 17
  • Columnes + desplaçament = 48 + 9

Aquesta retícula és la mateixa que teniu disponible a la plantilla de l'Inkscape i que us va ajudar com a referència per enllestir la composició visual del lloc web.

Aneu a la pestanya Export i establiu la següent configuració:

  • Page Title/Language: D277 i ca
  • DOCTYPE: XHTML 1.0 Strict

Creació d'una composició

Cliqueu a sobre del botó OK i aneu a la finestra principal. Desplaceu el cursor a la primera columna, començant per l'esquerra, cliqueu amb el botó esquerra i, sense deixar de prémer, moveu el cursor fins a l'última columna de la dreta:

Obtindreu una franja horitzontal de color violeta que correspon a la primera divisió o regió de la composició:

En la part de sota de la finestra de Boks escriureu el valor id: capcalera i, a l'àrea de text de la dreta (HTML Content) copiareu el contingut de l'estructura de l'arxiu index.html que pertany al bloc capcalera. Veieu la següent captura:

Realitzeu la resta de regions pel mateix procés:

Procés final

Ja heu definit la composició i incorporat la part de l'estructura. Ara cal exportar-la mitjançant el botó Export. S'obrirà una finestra de l'explorador de fitxer i carpetes del sistema: seleccioneu el lloc on voleu crear l'exportació i obtindreu la següent estructura:

  • un fitxer output.html
  • un directori css on trobareu el fitxer screen.css i print.css

Un primer resultat seria el següent:

En aquest cas hem activat l'opció de mostrar la retícula a sobre de

Ja teniu la base de la composició. Ara només cal que establiu l'estil de cada element de la pàgina.

Recordeu que aquests frameworks ajuden especialment en el moment de resoldre el problema de la composició o disseny de columnes d'una pàgina i que sigui compatible en la totalitat de navegadors actuals.