Ús de la retícula

El propòsit d'aquesta pràctica es començar a treballar amb una retícula que us ajudi a situar i alinear els diferents elements del disseny. L'ús d'una retícula no és cap novetat al món de les arts i de l'arquitectura. No és estrany, llavors, que el disseny web incorpori aquest sistema. Veieu a continuació la següent pràctica on s'explica com preparar una retícula amb l'Inkscape que us servirà després com a referència visual per a la composició del lloc web.

Creació d'una retícula amb Inkscape

Obriu un nou document amb l'Inkscape i feu clic a Arxiu | Propietats del document i establiu les següents mides:

  • Amplada: 960 px
  • Alçada: 756 px

Hem escollit aquestes dimensions pel fet que la pàgina principal es mostri en la seva totalitat a resolucions de pantalla de 1024 x 768 o superiors. Aquesta decisió correspon a un model de disseny anomenat d'amplada fixa (fixed-width) en contraposició d'un disseny líquid, el qual les seves dimensions es van adaptant en funció de la mida del navegador.

Desactiveu l'opció mostrar ombra del paper. Cliqueu a la mostra de color de fons. Us apareixerà un finestra flotant amb diferents pestanyes, cadascuna d'elles correspon a un model de color. Cliqueu a la pestanya RGB i doneu a la variable Alpha un valor de 255, perquè el color de fons sigui blanc i opac.

Deseu els canvis via Arxiu | Anomena i desa amb el següent nom: disseny.svg

Guies a Inkscape

Per defecte, les guies són visibles a Inkscape. Podeu crear una guia nova si feu clic a qualsevol del regle horitzontal o vertical i, sense deixar de prémer el botó esquerra del ratolí, moveu el punter del ratolí a qualsevol punt de l'àrea de dibuix. Us apareixerà una guia -vertical si heu fet clic al regle vertical o horitzontal si heu fet clic al regle horitzontal- de color vermell. Moveu-la fins a qualsevol ubicació de l'àrea de dibuix. Un cop heu deixat de clicar sobre el botó esquerra del ratolí, el color de la nova guia serà blau.

Si voleu desplaçar-la de nou, moveu el cursor fins a qualsevol punt de la guia. En el moment que la guia canviï de color blau a vermell, feu clic amb el botó esquerra del ratolí i manteniu-lo premut per desplaçar-la a qualsevol punt de l'àrea de dibuix.

Per donar a la guia una posició exacte, moveu el cursor fins a qualsevol punt de la guia. En el moment que la guia canviï de color blau a vermell, feu doble clic. Us apareixerà una finestra flotant amb les següents variables:

  • X: posició a l'eix de les X de la guia
  • Y: posició a l'eix de les Y de la guia
  • Unitats (en píxels)
  • Àngle: mesurat en graus

Si voleu esborrar una guia, moveu el cursor fins a qualsevol punt de la guia. En el moment que la guia canviï de color blau a vermell, premeu Ctrl i feu clic amb el botó esquerra del ratolí.

Visibilitat i color de les guies

Les guies a Inkscape són presents a totes les capes de dibuix de l'Inkscape. Per fer-les o no visibles, premeu Alt gr + 1 (equivalent al símbol |) o feu clic a Visualitza | Guies.

Si el que voleu és modificar el color de les guies, aneu a Arxiu | Propietats del document. Us apareixerà una finestra flotant amb diferentes pestanyes (ja coneixeu la pestanya Pàgina). Cliqueu a la pestanya Guies i trobareu les opcions de modificar el color actual de la guia (blau) com del color quan les seleccioneu (vermell). També podeu activar i desactivar el mostrar les guies.

Una opció important a tenir en compte és, sense sortir de la finestra Propietats del document, el contingut de la pestanya Ajustar. Aquí modificareu el valor de la distància de ajustament dels objectes a les guies actives i visibles. Deixeu un valor de 50 píxels.

Construcció d'una retícula amb Inkscape

Abans de continuar, us avancem que, al llarg d'aquest curs, treballareu amb un entorn de desenvolupament anomenat Blueprint CSS. Blueprint CSS és, en paraules dels seus creadors

un framework, que pretén reduir el temps de desenvolupament. Us dóna una base sòlida per construir un projecte amb un sistema fàcil de guies.1)

Què significa això? Per traduir més endavant el prototip visual al sistema proposat per Blueprint CSS, haureu de construir una retícula idèntica a l'Inkscape. Per estalviar feina, aquí teniu un model basat en els següents paràmatres:

  • Amplada de la pàgina web: 960 px
  • Número de columnes: 17
  • Amplada de la columna: 48 px
  • Amplada de l'espai entre columnes: 9 px

Visiteu aquest generador en línia de retícules, Grid Calculator, comproveu les dades i veieu la retícula resultant.

Blueprint CSS no és l'únic framework o entorn de treball adreçat a facilitar el desenvolupament dels fulls d'estils d'un disseny web. Altres igualment interessants són 960 Grid System (que porten plantilles preparades per Inkscape, entre altres) i Yahoo User Interface Library's Grid

Descarregueu l'arxiu 960.svg.zip, descomprimiu-lo i obriu-lo amb l'Inkscape. Veureu que ja teniu disponible la retícula seguint els paràmetres anteriors.

Com puc veure aquesta retícula al navegador?

És lògic analitzar el disseny de les pàgines web des del punt de vista de l'ús d'una retícula. Aquesta metodologia us permetrà comprovar fàcilment la composició general del disseny així com l'espai que ocupa cada divisió de la pàgina.

El navegador Mozilla Firefox disposa d'un complement, GridFox, que us permet justament això: superposar una retícula a l'àrea visible de la pàgina. Feu clic a la icona següent i instaŀleu GridFox al navegador.

Un cop heu instaŀlat i reiniciat el navegador, feu clic al botó dreta del ratolí per obrir la finestra de preferències del GridFox.

Especifiqueu els següents valors que veieu a la següent captura de la finestra de preferències del GridFox. Activeu l'opció Equal Column Widths al camp Column type i Center al camp Site Alignment.

Escriviu un valor de 969 píxels (17 columnes * 57 ( 48 + 9 )) al camp Site width i 17 al camp # of columns.

Aneu a la pestanya Appearence i assigneu el valor de 9 al camp Line thickness.

Obriu la pàgina de la XTEC per veure la retícula superposada a sobre del disseny (Premeu Alt + Ctrl + G per activar-la) del lloc web.

1) Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid