Étude de cas : Roma Italia
Les fondations
Lors.de.la.préparation.du.code.HTML,.ma.principale.préoccupation.est.de.rendre.ce.code.
aussi.signifiant.et.léger.que.possible..Par.signifiant,.j’entends.que.les.noms.des.éléments.
HTML.et.des.sélecteurs.choisis.représentent.le.contenu.de.telle.manière.qu’en.supprimant.
tous.les.styles,.on.pourrait.comprendre.la.hiérarchie.et.la.structure.du.contenu..Ils.sont.loin.
les.temps.où.les.GIF.d’espacement.et.les.éléments.br.répétés.truffaient.nos.lignes.de.code !.
Ces.bizarreries.ont.été.remplacées.par.des.éléments.qui.représentent.de.manière.logique.–.
ou.sémantique.–.le.contenu :
•. . une.liste.numérotée.des.éléments.les.plus.vendus.(ol) ;
•. . le.titre.principal.de.la.page.(h1) ;
•. . une.citation.d’un.client.satisfait.(blockquote.et.cite).
Cette.approche.nécessite.de.chasser.de.son.esprit.les.informations.relatives.à.la.présentation,.
conformément.à.la.philosophie.décrite.très.complètement.par.Andy.Clarke.dans.son.remarquable.livre.Transcender CS, Sublimez le design web !.(Eyrolles)..Je.me.souviens.encore.de.
mes.premières.expériences.en.CSS.alors.que.je.programmais.une.application.web.à.grande.
échelle..J’étais.très.fier.d’avoir.créé.une.série.de.noms.de.classes.de.présentation.qui.permettaient.de.marquer.le.contenu.avec.une.élégante.clarté,.comme.ceci :
Quelle.déconvenue,.lorsque.je.me.suis.rendu.compte.qu’il.fallait.revoir.la.présentation.de.
l’application.et.que.les.dizaines.de.modèles.utilisés.devaient.inclure.à.peu.près.tout.sauf.des.
polices.Arial.rouges.de.10 pixels !
Par."léger",.je.veux.dire.que.le.balisage.doit.être.aussi.concis.que.possible.(éléments,.attributs.et.valeurs.pour.le.HTML,.sélecteurs,.propriétés.et.valeurs.pour.les.CSS)..Par.exemple,.
background-color: #c27e28;
background-image: url(../img/feature-orange.jpg);
background-repeat: no-repeat;
peut.être.remplacé.par :
background: #c27e28 url(../img/feature-orange.jpg) no-repeat;
Vous.rencontrerez.de.nombreux.exemples.de.balisage.signifiant.et.léger.dans.cette.étude.de.
cas..J’en.décrirai.une.partie,.mais.vous.découvrirez.la.plupart.vous-même..
Un œil rivé sur le HTML 5
Pour.le.balisage.signifiant.et.léger,.j’ai.choisi.de.m’en.tenir.au.HTML 4.01.Strict.au.niveau.
du.DOCTYPE,.en.le.préférant.au.XHTML 1.0.Strict.et.au.HTML 5..Je.vais.rapidement.
expliquer.pourquoi..