De Dreamweaver a W3C
Ha arribat a les meves mans una web creada per un novell en el camp i utilitzant Dreamweaver. He decidit reconvertir-la a XHTML, ben format i semanticament correcte, i CSS. I com no, he decidit compartir el procés amb vosaltres.
El Dreamweaver és una eina molt potent per treballar, però una mala eina per a l’aprenentatge. Després de l’experiència com a professor en un curs de creació de pà gines web utilitzant aquesta eina he pogut comprovar que incita als usuaris novells a utilitzar mètodes i tècniques incorrectes:
- Composició de la pà gina mitjançant taules.
- Ã?s de l’etiqueta
fonti d’altres en detriment de les fulles d’estil externes. - Marcat semanticament incorrecte (per exemple
blockquoteper sagnar el text). - Etc.
El procés per corregir tots aquests errors ha resultat força senzill. He basat tot el treball en el home, per després ampliar-ho a la resta del lloc.
Comencem amb el HTML (veure original):
- Convertir la composició de taules en capes.
- Millorar la semà ntica: utilitzar els
hnper marcar els tÃtols, transformar el menú en una llista i eliminar elsblockquoteutilitzats per sagnar. - Eliminar tots els estils en lÃnia i les etiquetes
font.
D’aquesta manera comencem a tenir un HTML semanticament correcte, molt més simple i lleuger que l’original. En molts casos és millor començar el document de nou enlloc d’editar l’existent.
Un cop fet això convertim el document a XHTML especificant el corresponent DOCTYPE, creem uns metatags adequats i acabem de polir alguns petits detalls abans de comprovar que el document valida.
Ara doncs ja tenim un XHTML ben format, semanticament correcte i millorat respecte a l’original. Veure resultat.
Només ens queda crear un CSS que torni a donar l’aspecte original al document. Segons anem creant el CSS anirem veient la necessitat d’afegir alguns ID’s i classes al XHTML.
En aquest cas en concret he aprofitat per fer unes petites modificacions al disseny: adaptar-lo per a resolucions de 800×600 o superiors, canviar la tipografia del cos de la pà gina per facilitar-ne la lectura i altres petits detalls (veure CSS resultant).
El resultat ha sigut molt satisfactori:
- El pes del document s’ha reduït en un 58%.
- El codi és més net, la presentació i el contingut estan separats: més fà cil de mantenir.
- El lloc és més accessible i està més preparat per als cercadors.
Després només manca estendre tots els canvis realitzats a la resta del lloc (pot implicar petites modificacions al CSS). Per fer-ho més fà cil, i pensant en el manteniment, he dividit el document en trossos per aprofitar la comanda include de SSI i de pas poder prescindir de les plantilles de Dreamweaver.
Setembre 17th, 2004 at 11:40 am
Molt bon article. Molt didà ctic. M’agrada!
Setembre 17th, 2004 at 5:18 pm
Bon article, però pq es recomana el us de capes en comptes de taules? Jo tota la vida he usat taules en comptes de capes :S
Setembre 17th, 2004 at 8:43 pm
Dexter: si vols saber perque les capes són millors que les taules per maquetar fes-li una ullada a Why tables for layout is stupid
Setembre 18th, 2004 at 11:37 am
Si es fa servir el Dreamweaver com editor de codi prescindint del suport WYSIWYG, pots fer webs totalment và lides.
Setembre 18th, 2004 at 5:18 pm
bon article!
Dexter, no crec que “capes” sigui un terme correcte ja que un element <div> no té perquè comportar-se com una capa. Més aviat s’hauria d’anomenar “caixes” que és el que són o si vols “divisions”.
Les caixes només es comporten com a capes quan els ho especifiques amb una posició absoluta i coordenades.
Traduim: Perquè utilitzar un Dreamweaver que és tan gran i costós en comptes d’un TopStyle [http://www.bradsoft.com/topstyle/index.asp] (windows), un StyleMaster [http://www.westciv.com/style_master/] (mac/windows) o un Quanta (linux)?
Setembre 20th, 2004 at 12:41 am
Els que us dediqueu a aquestes coses professionalment feu servir editors WYSIWYG o ho feu tot a pèl en pla vi? Jo faig pà gines web molt de tant en tant (a un ritme de 2 o 3 a l’any) i la veritat és que treballant amb un editor de text trobo que és sang, suor i llà grimes. Grà cies per compartir alguns secrets professionals ;-)
Setembre 20th, 2004 at 1:49 pm
adriA: els editors WYSIWYG van molt bé per agilitzar la feina però si els utilitzes no està de més que després revisis el codi que t’han generat (i res de maquetar amb taules). En general crec que la solució òptima és utilitzar diferents eines, una per a cada tasca. En el cas concret del CSS el TopStyle és el millor editor que he provat, però és de pagament :P
Setembre 20th, 2004 at 5:00 pm
Grà cies pel link Monitotxi.
Provaré de canviar una mica el xip en els meus projectes web, però ho veig realment difÃcil quan estás tan habituat a treballar amb taules, i més quan t’han ensenyat a fer-ho amb elles :)
El que he descobert es l’amplitud dels arxius .css, no creia pas que poguessin fins i tot arrodonir les puntes d’un DIV :O (que li pots dir el radi i tot! xD)