La Web 2.0 i les tecnologies que la fan possible/Disseny web, tractament d'imatges i CSS
Normalment, quan es desenvolupa un projecte de pàgina web, abans de començar a escriure l'HTML es crea una maqueta amb un programa de retoc fotogràfic del que seria la pàgina principal i d'altres pàgines essencials.
La maqueta ha de ser una guia de com es vol que quedi la pàgina web. S'han d'utilitzar els mateixos colors, el mateix tipus de lletra, i els elements s'han de disposar de la manera com es vol a la pàgina web. I un cop feta aquesta primera maqueta, es passa a fer una reproducció amb HTML o XHTML.
Realment fins que no aparegueren els llenguatges de servidor (CGI) i amb conseqüència la web dels serveis (Web 1.5), els webmestres es quedaven en aquesta fase. La web ja estava dissenyada i feta HTML, tan sols feia falta penjar-la a un servidor. En un projecte web complex, però, aquesta maqueta encara ha d'experimentar uns quants canvis i s'ha de dinamitzar tant al costat del servidor com al costat del client (amb programació, és clar) per acabar d'estar llesta i penjar-la.
No ens avancem, però, als esdeveniments. Ja parlaré de programació al costat del servidor i al costat del client en els seus respectius capítols. Parlem, ara, de disseny i maquetació.
El disseny inicial de les pàgines web s'acostuma a fer amb un programa de retoc fotogràfic com el GIMP o el Photoshop. Amb un d'aquests programes es crea una nova imatge, que acostuma a ser d'uns 800 píxels[1] d'ample i 1000 de llarg (segons el criteri del webmestre), i es comença a disposar en ella els elements que tindrà la nova pàgina.
Els dissenys d'avui en dia no són com els de fa uns quants anys. Els escrits de Tim O'Really han causat un gran revolt a la Web i les pàgines actuals acostumen a seguir unes pautes de disseny etiquetades com a "disseny 2.0".
Aquests dissenys utilitzen colors forts i brillants que s'utilitzen per dividir la pàgina i remarcar les seccions importants d'aquesta, ja que atreuen l'atenció dels visitants. La mida de les lletres dels elements importants en aquests dissenys acostuma a ser molt més gran que en les pàgines de la Web 1.0, la qual cosa també ajuda amb la diferenciació entre elements de major i menor importància.
A més, les pàgines que segueixen aquesta corrent estan molt ben acabades amb efectes 3D, ombrejats, ressaltats, difuminats, reflexes de llum, efectes mirall, icones atractives, contorns estrellats, caixes arrodonides per als continguts, etc. És el cas dels logotips 2.0, com en aquest exemple que ofereix la Viquipèdia en espanyol.
L'efecte mirall que hi apareix és un dels efectes més populars quan es parla de disseny 2.0. Aquest efecte es pot aconseguir o bé amb un programa de retoc fotogràfic o bé escrivint unes línies JavaScript a la mateixa pàgina utilitzant, normalment, la llibreria script.aculo.us. D'això, però, ja en parlarem més endavant.
Un altre dels aspectes més rellevants de la Web 2.0 quan es parla de disseny és la simplicitat. L'usuari ha de poder veure, a simple cop d'ull, el que vol veure, i la feina del dissenyador és que ho aconsegueixi. Això s'ha de fer, però, sense treure-li funcionalitat a la pàgina.
Un exemple de simplicitat extrema és el Twitter, un servei web que estableix una xarxa social entre els seus usuaris. Permet crear un blog en que cada entrada té un màxim de 140 caràcters, també anomenat microblog, i el que els usuaris hi escriuen és el que estan fent en aquells moments. Una aplicació tan simple com aquesta és un èxit a Internet.
També es tendeix a disposar les pàgines centrades dins la finestra del navegador, amb poques columnes i amb seccions clarament diferenciades (amb l'ús de color o amb marges en blanc).
Per el que fa a la navegació, sempre ha hagut algun tipus de barres amb enllaços que condueixen a les principals seccions de la pàgina a totes les pàgines del lloc. La tendència d'avui és fer-les el més senzilles possible per a l'usuari i ficar-les a la part superior de la pàgina, recordant, a cops, les pestanyes que utilitzen els actuals navegadors.
Un cop fet el disseny amb el programa de retoc fotogràfic, es procedirà al retallat de les imatges que seran útils per a la pàgina final i a la transformació del model (del disseny) en maqueta (en document HTML o XHTML). Aquest procés es realitza, com ja he dit, escrivint el codi (X)HTML manualment o amb l'ajuda d'un entorn WYSIWYG.
També pot ajudar, però, un programa com l'Adobe Fireworks (abans de Macromedia), en el que tan sols fa falta obrir el disseny realitzat, seleccionar les seccions que té diferenciant les imatges dels sectors on hi va text, i exportar el projecte a un document HTML que necessitarà un tractament posterior amb un programa WYSIWYG.
Abans que l'HTML 4 fos estàndard recomanat per la W3C, no hi havia cap altra manera de disposar elements a la pàgina, fer columnes, barres de navegació, seccions, encapçalaments o peus sense l'ús de taules. Les taules en HTML es defineixen amb l'etiqueta <table> i el seu ús és el de representar dades de manera tabulada. Els dissenyadors aviat vegueren una manera de disposar els elements en ella, ja que cada cel·la es podia configurar amb un color de fons i unes dimensions. També se'ls i podien treure els cantons aplicant-los-hi el valor "0" l'atribut border de les taules i les cel·les d'aquestes.
Les maquetes amb taules eren fàcils de realitzar, i els programes com l'Adobe Fireworks les generaven automàticament, i donat que eren la única opció per realitzar pàgines amb columnes i seccions, el seu ús s'expandí arreu la Web. Tot i així, les taules HTML, al no estar pensades per al disseny sinó per a la tabulació de dades, han presentat molts problemes com la sobrecàrrega d'etiquetes que són necessàries per definir-les (<table>, <tbody>, <tr>, <td>, etc.) i la poca accessibilitat des de dispositius que no siguin els ordinadors tradicionals.
També el mesclar contingut amb format, fa que els llocs siguin menys sostenibles, ja que per canviar qualsevol aspecte del disseny, s'ha de passar enmig de totes les dades i localitzar cadascuna de les parts de la pàgina per canviar-les. Si a més el lloc és gran, s'ha de canviar el disseny de totes les pàgines, el que pot arribar a ser una feina molt lenta i molt costosa.
Arran d'això sorgí, a partir de l'estandardització de l'HTML 4, un nou estàndard, el Cascading Style Sheets (CSS), que permetia definir els estils dels elements i les etiquetes HTML, XML o XHTML. Moltes etiquetes i atributs que fins aquell moment havien servit per definir aspectes del disseny de la pàgina foren desaprovats i es desaconsellava l'ús de taules per a la maquetació, ja que aquesta ja es podia realitzar amb CSS.
Els beneficis que aporta el CSS són molts. L'estil CSS es pot aplicar a una sola etiqueta (amb l'atribut style), a tota una pàgina dins una secció d'aquesta on es defineixen estils per a diverses etiquetes (amb l'etiqueta style), o fins i tot per a tot el lloc, amb l'ús d'un fitxer extern al document (X)HTML. L'ús més estès és l'últim, així que tan sols fa falta modificar l'arxiu de l'estil CSS per modificar tot el disseny del lloc, cosa que resulta molt menys costosa i molt més ràpida que amb l'ús de taules, en que s'ha de canviar el disseny de totes les pàgines, buscant entre el contingut els atributs referents al disseny.
La sintaxi CSS permet associar-li a un selector una serie de atributs i valors que el modifiquen. Aquest selector es pot tractar d'un nom d'etiqueta, de tal manera que l'estil associat a ell s'aplicaran a totes les etiquetes del mateix nom, a un nom de classe, se li aplicarà l'estil associat a totes les etiquetes que tinguin el mateix nom de classe dins l'atribut HTML class, i a un identificador únic (ID), que aplicarà l'estil al únic element de la pàgina que tindrà el mateix ID (definit per l'atribut HTML id).
A totes les etiquetes referides pels selectors, se'ls aplicarà l'estil configurat pels atributs i els valors. Els atributs són paraules del llenguatge ja definides per l'estàndard com color per definir el color, height per definir l'altura de l'element, margin per definir els marges, etc. Així doncs, un exemple d'estil CSS seria:
html {
margin: 0;
padding: 0;
}
body {
font: 75% georgia, sans-serif;
line-height: 1.88889;
color: #555753;
background: #fff url(blossoms.jpg) no-repeat bottom right;
margin: 0;
padding: 0;
}
p {
margin-top: 0;
text-align: justify;
}
h3 {
font: italic normal 1.4em georgia, sans-serif;
letter-spacing: 1px;
margin-bottom: 0;
color: #7D775C;
}
Cada selector (en aquest cas les etiquetes html, body, p i h3) té associats una serie d'atributs que el configuren. Així doncs, tots els paràgrafs (p) de la pàgina no tindran marge superior (margin-top) perquè aquest té el valor de 0, i tindran una alineació justificada. Aquests estils també s'hereten, així que si una etiqueta està continguda per una altra, aquesta rep també tots els seus atributs i estils. Aquest és el cas del body, ja que totes les etiquetes contingudes al seu interior tindran, si no s'especifica el contrari, lletra (font) amb una grandària del 75% de la família Georgia, o, en el seu dèficit, qualsevol que sigui sans-serif[2]. El color (color) d'aquesta serà un gris #555753 definit per la notació RGB[3]. També tindrà de fons (background) amb la imatge blossoms.jpg, sense repetir i situada a la part de baix, dreta, de la pàgina, mentre que la resta del fons serà de color blanc (#fff en RGB).
L'exemple ha estat tret de CSS Zen Garden, una pàgina que permet seleccionar diferents arxius CSS que li canvien radicalment el disseny. La pàgina pretén incentivar l'ús del CSS demostrant les grans possibilitats que aquest té i com n'és de possible separar el disseny del contingut.
Actualment, la W3C està treballant en la tercera versió del CSS, mentre que la segona encara no ha estat implementada del tot per tots els navegadors (en concret, Internet Explorer).
^ El píxel és la unitat menor en la que es descompon una imatge digital. Les imatges es formen com un gran conjunt rectangular de píxels, on cada píxel forma un punt de color molt petit de la imatge total. Les pantalles actuals acostumen a estar configurades en una resolució de 1024 d'ample per 768 d'alt, però quan s'editen pàgines web es té en compte els monitors amb resolucions més petites (com 800 per 600).
^ En disseny web, s'han d'utilitzar fonts que siguin comunes a tots els ordinadors per tal de que la pàgina es vegi igual en tots els navegadors. Això redueix la llista de fonts disponibles a Arial, Verdana, Georigia, Courier i algunes més, i si es pot donar alternatives per si l'ordinador no té aquella font. En última instància s'acostuma a deixar com a alternativa serif o sans-serif, les dos grans famílies tipogràfiques de les que deriven totes les altres.
^ Els colors a les pàgines web es poden definir pel seu nom en anglès, com per exemple red per al roig, o pel seu valor RGB, on es defineix el color a partir dels seus components: roig, verd i blau. Cada color bé definit per sis dígits, dos per cada component. Els dígits, a més, són hexadecimals, la qual cosa implica que van del 0 al F (16 en decimal). Així doncs, el #000000 és el negre, el #FFFFFF és el blanc, el #FF0000 és el roig pur, el #00FF00 és el verd pur i el #0000FF és el blau pur. Es poden fer fins a 16 milions de combinacions utilitzant tots els dígits (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E i F).