Bones pràctiques en maquetació HTML
Fa pocs dies, a Nettuts+, s’hi va publicar l’article 30 HTML Best Practices for Beginners. El seu autor és Jeffrey Way. M’ha semblat molt interessant, tot i que per vergonya meva el títol de l’article original acaba amb les paraules for Beginners. No em considero un principiant, i hi ha algunes d’aquestes pràctiques que no aplico. Així que per fer-ho menys humiliant he tret els beginners del títol. He traduït algunes de les bones pràctiques i espero que em pugui servir de memo a mi, als meus companys i a la gent del ram que llegeixi l’article.
1. Tancar sempre les etiquetes
Pels estàndards actuals de maquetació hem de mirar d’evitar al 100% les etiquetes sense tancar o les mal tancades.
Mal fet:
<li>Some text here.
<li>Some new text here.
<li>You get the idea.
Ben fet:
<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>
2. Declarar el correcte DOCTYPE
El DocType va abans de l’obertura de les etiquetes HTML a la part superior de la pàgina, i li indica al navegador si la pàgina conté HTML, XHTML, o una combinació d’ambdós, de manera que pugui interpretar correctament les marques.
La majoria triem entre aquests quatre DocType a l’hora de crear nous llocs web:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
3. No utilitzar estils en línia
Quan piquem codi durant la maquetació HTML ens podem veure temptats per fer via i anar aplicant els estils sobre la marxa, dins la mateixa línia de codi HTML.
<p style=”color: red;”>I’m going to make this text red so that it really stands out and makes people take notice! </p>
Pot semblar inofensiu però a la llarga pot apuntar cap a errors de codi, a banda que fa que les línies de codi siguin molt més llargues i això repercuteix negativament al pes de la pàgina i a les validacions d’accessibilitat, SEO…
Primer s’ha de construir l’estructura completa. Un cop tinguem tot el codi hi aplicarem els estils en cascada CSS:
#someElement > p {
color: red;
}
4. Col·locar els estils CSS externs dins l’etiqueta HEAD
Tècnicament l’especificació d’HTML recomana l’inclusió dels estils en cascada CSS dins el Head. El benefici principal és que la pàgina carrega més ràpidament.
<head>
<title>My Favorites Kinds of Corn</title>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”path/to/file.css” />
</head>
5. Col·locar els arxius Javascript a la part inferior de la pàgina
Cal recordar que l’objectiu principal és que la pàgina carregui el més ràpid possible a l’usuari. Quan es carrega un script, el navegador atura la càrrega de la pàgina fins que no acaba d’interpretar aquest script. L’usuari haurà d’esperar un temps a que finalitzi aquest procés.
La única finalitat dels arxius Javascript és afegir funcions extra a la pàgina, per tant podem situar aquests arxius a la part inferior de la codificació. El fet que siguin els últims arxius en carregar-se no afectaran negativament el procés de càrrega de la resta de la pàgina, si no tot el contrari.
<p>And now you know my favorite kinds of corn.</p>
<script type=”text/javascript” src=”path/to/file.js”></script>
<script type=”text/javascript” src=”path/to/anotherFile.js”></script>
</body>
</html>
6. No utilitzar Javascript en línia
Una pràctica comuna anys enrere era la utilització de comandaments Javascript aplicats directament sobre les etiquetes HTML. Això va ser molt comú en les galeries d’imatges o a enllaços on normalment s’adjuntava a la etiqueta un atribut “onclick”. Actualment això mai no s’ha de fer.
7. Validar contínuament
Fa poc vàrem publicar un article en el que parlàvem de la importància de validar, i d’alguns dels diferents mètodes online de validar els nostres documents HTML i fulls d’estils CSS.
Per anar fent les validacions de forma àgil mentre anem treballant és recomanable descarregar la barra d’eines per a desenvolupadors web de Firefox: Web Developer Toolbar. Un cop l’instal·leu, cliqueu el botó “tools” i feu servir contínuament les opcions “Validate HTML” i “Validate CSS”.
8. Descarregueu “Firebug”
Es tracta d’un altre add-on de Firefox. Ajuda a la depuració de Javascript i ens ajuda a identificar elements que hereten propietats d’altres elements que desconeixem. Descarregueu-lo!
9. Ús de Firebug
- Descripció general de Firebug (anglès)
- Depura Javascript amb Firebug (anglès)
10. Escriviu les etiquetes amb minúscules
Tècnicament no hi ha cap problema en la capitalització dels noms de les etiquetes HTML, però fer-ho tampoc no serveix per a res i resulta bastant molest per als ulls dels desenvolupadors.
Mal fet:
<DIV>
<P>Here’s an interesting fact about corn.</P>
</DIV>
Ben fet:
<div>
<p>Here’s an interesting fact about corn.</p>
</div>
11. Feu servir etiquetes H1-H6
La millor pràctica és fer servir tots 6 tipus d’encapçalament. L’autor d’aquest article se sincera dient que no arriba a sobrepassar el H4. Jo no supero el H3. Però per raons semàntiques i de SEO, de vegades és millor fer servir un H6 que una P quan s’escaigui.
<h1>This is a really important corn fact!</h1>
<h6>Small, but still significant corn fact goes here.</h6>
12. Als blocs, feu servir H1 per al títol de l’article
Als blocs i als webs, és millor assignar la etiqueta d’encapçalament principal H1 per al títol d’un article o d’un encapçalament rellevant que no pas un logotip o el títol del bloc o el web.
13. Descarregueu “ySlow”
És un altre add-on de Firefox. ySlow un cop s’activa, analitza el web i ens fa un informe on es detallen les necessitats de millora del lloc.
14. Barres de navegació amb llistes UL
Podem maquetar aquesta secció de navegació de la següent manera:
<div id=”nav”>
<a href=”#”>Home </a>
<a href=”#”>About </a>
<a href=”#”>Contact </a>
</div>
Però per raons semàntiques, és millor maquetar el contingut com si es tractés d’un llistat d’ítems:
<ul id=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
15. Aprèn hacks de IE
També hem parlat dels hacks en un article anterior. Tard o d’hora ens trobarem aplicant estils que només Internet Explorer pugui interpretar, especialment les versions anteriors a les actuals (IE6 principalment).
Una bona manera de fer-ho és generar un full d’estils exclusiu per Internet Explorer, i que podríem anomenar “ie.css”. Després aplicarem aquest condicional al codi de la maqueta:
<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”path/to/ie.css” />
<![endif]–>
Aquest codi està dient: “Si ets usuari d’Internet Explorer 6 o inferior, importa aquest full d’estils. Del contrari, no ho facis”.
16. Tria un bon editor web
Mac:
PC:
17. Quan el web estigui acabat, comprimeix
Comprimint els arxius CSS i Javascript podem reduir el pes dels arxius en un 25% o més. No és convenient de fer-ho durant el procés de desenvolupament, només un cop hem acabat.
Serveis de compressió Javascript:
Serveis de compressió CSS:
18. Talla, talla, talla
Un cop hem finalitzat la maquetació hem de revisar el codi i mirar de reduir el nombre d’elements de la pàgina. Un UL ha d’estar embolcallat per un DIV? No cal.
19. Totes les imatges han de tenir atributs ALT
És fàcil passar per alt els atributs ALT dins les etiquetes d’imatges. Tanmateix és un element molt important per qüestions de validació i accessibilitat. Cal tenir cura especial d’aquest punt.
Mal fet:
<IMG SRC=”cornImage.jpg” />
Ben fet:
<img src=”cornImage.jpg” alt=”A corn field I visited.” />
20. Observar el codi font
Quina manera millor d’aprendre HTML que copiant. Inicialment tots som copiadores. A continuació, lentament, comencem a desenvolupar els nostres propis estils i mètodes. No es tracta de robar el disseny, si no d’aprendre l’estil de codificació.
En quant als efectes Javascript, moltes pàgines fan servir scripts. Només cal de saber de quin script es tracta i de cercar-lo a Google.
21. Estils a tots els elements
Aquesta bona pràctica està bàsicament pensada per als clients que administrin els seus webs. Només perquè nosaltres no fem servir blockquote o OL no significa que els nostres clients no les facin servir. Cal crear una pàgina especial on mostrar els estils de cada element: ul, ol, p, h1-h6, blockquote, etc.
22. Fes servir Photoshop
Tot i que faig servir bàsicament Fireworks per fer els dissenys de webs, també m’ajudo en força ocasions de Photoshop. Aquest punt vindria a dir que familiaritzar-se amb un editor d’imatge és el pas necessari posterior a l’haver après HTML i CSS (o a l’inrevés).
23. Aprèn cada etiqueta HTML
Hi ha dotzenes d’etiquetes que no fem servir i ni tan sols veiem en altres llocs. Però això no significa que no els hàgim d’aprendre. Què hi ha de la etiqueta <abbr>? I de la etiqueta <cite>?
24. Participeu a la Comunitat
Hi ha llocs web que contribueixen en gran mesura a la millora dels coneixements del desenvolupador web. Tard o d’hora un pot arribar a familiaritzar-se de tal manera amb aquest entorn que també pot ensenyar a altres desenvolupadors amb menys experiència. I tot gràcies a blocs, fòrums, pàgines personals, etc.
25. Fes servir CSS Reset
Aquest és un aspecte debatut: fer servir o no un CSS Reset. A l’igual que l’autor de l’article, jo també ho recomano al 100%.
Per defecte els navegadors interpreten a la seva manera les diferents etiquetes HTML. Per això ens podem trobar que quan no hem donat estil a determinades etiquetes, aquestes poden tenir un comportament no desitjat o molest. Un CSS Reset el que fa es deixar totes les propietats de les etiquetes a 0.
A continuació hi ha el CSS Reset més popular, d’Eric Meyer:
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
26. Alinea els elements
Aquesta ja és més una qüestió de disseny que no pas de codificació. Anteriorment també hem parlat d’això en un article. Hem de buscar la millor alineació dels elements. El nostre cervell busca associacions d’elements, relacions entre ells… En definitiva, tendeix a ordenar i agrupar els elements. Alinear-los correctament ajuda a una comprensió més ràpida per part de l’ull i el cervell. A més, segons l’autor, podrem argumentar de forma irrebatible el perquè hem situat un element en un lloc determinat.
Una resposta a “Bones pràctiques en maquetació HTML”
Deixa un comentari
Joan on May 26th, 2009
Molt útil i mastegadet, Lluís. Gràcies!