Curs de disseny web amb CSS

CSS és l'acrònim del terme anglès Cascading Style Sheets, la traducció al català del qual és Fulls d'Estil en Cascada. És un llenguatge de marcatge, al igual que l'HTML, orientat a definir la representació visual de la informació continguda en un document HTML (o XHTML).

L'objectiu del CSS és poder separar físicament el codi empleat per a estructurar la informació continguda en una pàgina web, del codi destinat a definir la representació visual d'aquesta informació.

En altres paraules, es tracta de poder separar el programador d'HTML, el qual s'encarrega d'estructurar la informació per a què aquesta pugui ser entesa correctament per navegadors, per a què pugui ser indexada correctament per buscadors, en definitiva per a poder ser manipulada més endavant gràcies a una estructura coherent, del dissenyador, aquell que pensa en la representació visual de la informació per a proporcionar un plaer estètic a l'usuari.

Cal dir, però, que CSS no deixa de ser un llenguatge de marcatge basat en l'SGML al igual que l'HTML i, per tant, no es tracta de disseny pur, però està destinat únicament a definir, mitjançant uns paràmetres, la representació visual de la informació. Un bon ús de CSS, acompanyat de material gràfic (imatges, animacions, etc.) transformarà una web ben programada en HTML en el disseny visual desitjat, concebut possiblement a priori amb un programa de disseny pur com el PhotoShop, FreeHand, Illustrator, CorelDraw o altres.

Ens hauríem de preguntar quin és el paper que realitza, exactament, el programador o dissenyador de CSS en el procés creatiu d'una pàgina web abans de preguntar-nos si és programador o dissenyador.

Centrem-nos en la creació d'un model industrial que descrigui el procés de creació de webs sense l'ús de CSS tot pensant un moment en l'escissió fonamental en la producció d'un lloc web: la programació per una banda i el disseny per una altra.

La primera es realitza mitjançant un editor de text ASCII sobre el qual s'estructura la informació que contindrà la web mitjançant la semàntica específica d'un llenguatge específic (en aquest cas HTML o XHTML). En contrapartida, el disseny inclou una part de creativitat i una part tècnica; la darrera permet obtenir material digital a partir d'unes eines de creació gràfica per ordinador (el que s'anomena Disseny Assistit per Ordinador).

Donat que són dues parts diferenciables es poden personificar en dues figures: el programador i el dissenyador web.

La vessant creativa pertany més pròpiament al dissenyador i la part tècnica és la que l'uneix amb el programador.

El programador, per altra banda, és el creador de l'estructura de la web i a través d'ella pot donar una pauta i/o límits al dissenyador. Malgrat orienti al dissenyador i aquest faci un disseny conseqüent, entregat en format digital, el programador haurà d'implementar el disseny mitjançant codi. És a dir, la representació visual o forma també aniran a càrrec del programador. Com a conseqüència d'aquest fet, el programador es converteix en la persona que comença i tanca l'operació de fer la web ja que el suport final està en el codi i qualsevol canvi en el disseny visual té una repercussió directa en el codi. Per aquest motiu també, aquest model de procés creatiu coerceix al programador a responsabilitzar-se de tot el procés de realització de webs.

Amb CSS el sistema canvia sensiblement però les conseqüències sobre l'eficiència productiva són contundents:

Observant el següent diagrama veureu que el CSS es col·loca entre el procés de disseny i la programació, fent de lligam entre ambdues parts. És a dir, CSS és l'eina que permet modul·laritzar el procés creatiu d'una pàgina web.

Observeu atentament com el procés creatiu s'ha dividit en 3 mòduls:

• Mòdul de programació web: és l'encarregat de generar un document hipertext (mitjançant HTML, XHTML, JavaScript, DHTML, etc.) a partir de les dades i premises proporcionades pel client que ens ha demanat la web.

  La programació s'encarrega, per tant, d'estructurar el contingut (informació a exposar a la web) mitjançant un llenguatge de marcatge que permeti una bona lectura del codi per desenvolupadors i els buscadors d'Internet i a la que sigui fàcil aplicar-hi estils visuals sense afectar el contingut en sí. Aquesta programació, per altra banda, pot estar condicionada per idees i suggerències donades pel procés de disseny, que acostuma a ser un procés que s'executa en paral·lel a la programació però, és aconsellable, sense començar abans que aquesta ni finalitzar després d'aquesta.

• Mòdul de disseny web: correspon al procés creatiu visual basat en la creativitat, limitada per les premises imposades pel mòdul de programació, i les eines gràfiques: el programari PhotoShop, FreeHand, Illustrator, CorelDraw, etc.

  El material digital no cal que vagi a parar al mòdul de programació sino al tercer mòdul que descriurem a continuació.

• Mòdul de programació i disseny CSS: s'encarrega d'utilitzar el material gràfic, proporcionat pel mòdul de disseny web, i el llenguatge CSS per transformar visualment el contingut estructurat d'una web, proporcionat pel mòdul de programació.

  És a dir, s'encarrega de donar la forma al contingut. En altres paraules: s'encarrega d'aplicar el disseny sobre el codi.

Aleshores, el que s'encarrega del mòdul de programació i disseny CSS és programador o dissenyador? Doncs és fonamentalment programador ja que la seva feina consisteix en escriure documents en llenguatge de marcatge CSS, però fa de lligam amb el dissenyador i s'encarrega d'aconseguir que la web es vegi segons el disseny concebut.

Amb CSS podem modificar l'aspecte visual d'una web radicalment sense tocar una línia de codi en els documents HTML o XHTML.

De l'apartat anterior podem extreure diverses conclusions:

• La presència de CSS permet modul·laritzar el procés de creació web en 3 mòduls
• El mòdul de la programació/disseny en CSS fa de lligam entre la programació de webs i el disseny web
• El CSS aplica el disseny concebut sobre l'estrucura. És a dir, la responsabilitat de la representació visual de la informació queda en mans del programador/dissenyador CSS

El model descrit a l'anterior apartat aconsegueix separar estructura de la informació (en mans del programador) de representació de la informació (programador/dissenyador CSS).

Avantatges, per tant, de l'aplicació de CSS a nivell productiu:

• No és necessari el programador per a fer canvis visuals a la web
• No és necessari el dissenyador per a canviar l'estructura de la web
• No és necessari el dissenyador per a la majoria dels canvis de disseny que la web pugui tenir pel que fa a l'aspecte del text, colors de fons i tamanys
• El programador/dissenyador de CSS pot responsabilitzar-se de la web (manteniment, canvis en el disseny) un cop acabada la primera versió
• Amb CSS es poden especificar moltes més qualitats estètiques que amb el ventall d'objectes i atributs del codi HTML o XHTML. És a dir, el CSS té molta més potència i moltes més possibilitats per al retoc visual.
• La representació visual del contingut de les pàgines web queda supeditada als documents CSS. És a dir, es pot modificar el disseny a pàgines web en massa efectuant pocs canvis en aquests documents.

El darrer punt encarna el verdader avanç a nivell productiu ja que permet fer canvis visuals radicals sense tocar codi i això implica fer més amb menys temps.

Perfecte, vés a la propera secció i començarem a fer pàgines web amb CSS!