Des dels primers mòduls fins ara heu estat treballant el disseny del lloc web. Ara és el moment de traduir el prototip o disseny que heu realitzat al llarg del mòdul 3 i traduir-lo al llenguatge de la web.

En primer lloc decidireu quina ha de ser l'estructura i què contindrà aquest document. Seguidament construireu l'esquelet del document HTML i definireu cadascuna de les seccions de la pàgina fent ús d'unes etiquetes de marques molt simples. Aquesta part la treballareu en aquest mòdul. Després d'això, aprendreu a aplicar l'estil visual al contingut gràcies als full d'estils o CSS, que veureu amb profunditat al proper mòdul.

Abans de continuar i per tal d'evitar possibles interpretacions errònies, la pàgina web no serà una rèplica exacta del disseny que heu realitzat amb l'Inkscape. La naturalesa flexible de la web (múltiples navegadors, diferents mides de pantalles, dispositius…) fan impossible que la web es comporti amb la mateixa rigidesa d'un pòster, un llibre o un catàleg. Això no significa que el resultat final del lloc web sigui molt diferent del disseny. Tot el contrari. Treballareu perquè la semblança del lloc web al prototip sigui la més aproximada. Penseu què és important no preocupar-vos del detall en aquest procés de traducció del disseny gràfic al llenguatge de la web.

Al llarg d'aquest curs us remarcarem sovint la necessitat de treballar el disseny web respectant els estàndards de la web. No és cap caprici o estil d'un grup de desenvolupadors i dissenyadors de la web. Els estàndards de la web parla, en general, que tots els llocs web segueixin un model de desenvolupament comú per tothom. El símil seria les normes de tràfic, un model de circulació estandarditzat per a tots els països i que permet conduir sense problemes per a les diferents carreteres i vies del món. Veieu a continuació què ha de presentar una pàgina web conforme amb els estàndards de la web.

• El contingut i l'estructura es caracteritza per l'ús vàlid HTML o XHTML.
• La presentació es fa utilitzant fulls d'estils -CSS- vàlids.
• La pàgina web ha de ser accessible per a tothom, independentment del navegador web, la plataforma, o discapacitat personal.
• Compatibilitat: És compatible amb tots els navegadors actuals, i ho serà també per futures versions.
• Independència del dispositiu: Funcionarà de la mateixa manera en un navegador d’un ordinador, d’un telèfon mòbil, etc.
• Facilitar la feina als cercadors: Als motors de cerca com Google, Bing, Ask, etc. els hi agrada un document ben estructurat. No només consulten i avaluen les metadades, sinó que analitzen cada vegada amb molta més precisió el contingut.
• Pàgines més lleugeres: Si es compara el pes d’una pàgina maquetada amb taules amb una altra que fa servir fulls d’estil es veurà que la diferència, en funció de la complexitat del disseny, pot fer que la segona sigui entre un 60% i un 70% més lleugera que la primera. Els documents que separen l’aparença del contingut utilitzen menys codi, per la qual cosa els llocs basats en els estàndards utilitzen menys amplada de banda i es mostren més ràpidament als usuaris.

A la pràctica 2 aprendreu quines són les parts fonamentals d'un document XHTML perquè sigui vàlid. Aquesta pràctica, encara que sigui excessivament teòrica, és necessària per realitzar la traducció del disseny a l'XHTML correctament.