Aquesta pràctica és un resum de bones pràctiques que cal que tingueu present en el moment que desenvolupeu un lloc web. Si bé ja les heu aprés al llarg del curs, aquest recull us servirà d'ajuda per resfrescar algunes qüestions que, sovint, són la causa d'un mal funcionament de la web si no les apliqueu correctament.

Aquest recull està basat en l'exceŀlent article 30 HTML Best Practices for Beginners de Jeffrey Way.

Veieu la següent estructura:

<li>Barcelona
<li>Badalona
<li>Reus

Us heu adonat que falten algunes etiquetes; no sabem si és una llista enumerada (ol) o no (ul) i tampoc no s'han tancat les etiquetes li. Si aquesta pràctica era habitual fa 10 anys, avui en dia s'ha de evitar sempre, especialment pel que fa a tancar qualsevol de les etiquetes que feu servir a l'estructura. En cas contrari, resultarà impossible validar correctament la pàgina. A continuació, l'estructura correcta:

<ul>
  <li>Barcelona</li>
  <li>Badalona</li>
  <li>Reus</li>
</ul>

Una altra pràctica que heu d'evitar sempre: barrejar la presentació amb l'estructura.

<div id="atencio">
  <p style="color: yellow">Aquesta frase és d'advertiment</p>
</div>

El procés del disseny web passa sempre per separar l'estructura de la presentació. Primer creeu l'estructura i després penseu en la realització de l'estil, és a dir, no afegiu cap estil fins que no tingueu l'estructura acabada. Recordeu que en aquest curs heu vist la separació en tres fases del disseny i desenvolupament del lloc web:

1. Disseny del prototip visual
2. Estructura de la pàgina (HTML)
3. Creació de l'estil visual (CSS)

La versió correcta de l'exemple anterior hauria de ser:

#atencio p {
  color: yellow;
}

Si bé és un tòpic que s'escapa de l'àmbit del curs, és cert que no podem oblidar la capa de comportament d'un lloc web amb el llenguatge Javascript. En certa manera, la majoria de les pàgines actuals la incorporen i proporcionen una experiència més gratificant per a l'usuari/ària.

El problema és si no respecteu la divisió estructura-estil-comportament, és a dir, barregeu funcions del comportament amb l'estructura del document. Un exemple clàssic és el següent:

 <a href="#" onclick="MM_openBrWindow('/documents_html/us_portal.htm')" title="Condicions d'&uacute;s">Condicions d'ús</a>

L'ús de l'atribut onclick associat a l'etiqueta a. El valor és una funció (MM_openBrWindow()) que farà alguna cosa. Aquesta pràctica és completament errònia i és propi d'una dinàmica de disseny web de fa 15 anys. Les alternatives passen per fer ús de les noves llibreries Javascript com jQuery que permeten de forma fàcil situar fora de l'estructura qualsevol comportament.

La validació no és pas un peatge que entorpeix la llibertat creativa, tot el contrari, és una eina de gran ajuda que us permetrà preveure comportaments erronis del lloc web.

Per aquesta tasca, que ha de ser constant al llarg de tot el procés de desenvolupament del lloc web, us recomanem que descarregueu i instaŀleu el complement Web Developer. A banda de la quantitat de les funcionalitats que porta per inspeccionar i analitzar la web, obriu el menú Tools per accedir a les diferents opcions de validació.

El complement Firebug per al navegador Mozilla Firefox és un dels millors ajudants per a la creació i anàlisi de pàgines web. No dubteu en instaŀlar-lo i feu-lo funcionar per comprendre el comportament de tots els elements, estructurals, visuals i de comportament, del vostre lloc web com d'altres.

Eviteu sempre escriure en majúscules les etiquetes de l'estructura:

<H1>Lorem ipsum dolor</H1>
<P>Lorem Ipsum</p>

A més de proporcionar mal d'ulls, recorda la temible funció d'exportació a HTML de Microsoft Word.

<h1>Lorem ipsum dolor</h1>
<p>Lorem Ipsum</p>

Enlloc de:

<div id="nav">
<a href="#">Inici</a>
<a href="#">Bloc</a>
<a href="#">Wiki</a>
<a href="#">Fòrum</a>
</div>

estructureu la llista de enllaços fent ús de l'element semàntic, en aquest cas, de l'element ul que, com ja sabeu, representa a qualsevol llista on l'ordre dels ítems que conté no és important:

<ul id="nav">
  <li><a href="#">Inici</a></li>
  <li><a href="#">Bloc</a></li>
  <li><a href="#">Wiki</a></li>
  <li><a href="#">Fòrum</a></li>
</div>

Tornem a reiterar la necessitat de afegir l'atribut alt a tots les imatges de l'estructura per raons d'accessibilitat i de validació de l'estructura. I en cas que la imatge tingui un significat important dins del document, afegiu l'atribut longdesc que apunti a una pàgina web que la descrigui textualment.

<img src="cos.jpeg" alt="imatge del cos humà" longdesc="cos.html" />

Ja heu vist a la pràctica anterior el funcionament d'un framework CSS. Els frameworks són realment útils i, sobretot, permeten agilitzar el procés de treball, però sempre i quan esteu familiaritzats amb els conceptes que envolten al llenguatge CSS. És per aquesta raó que el seu ús no és pas recomanable per a qui comença de cero amb els fulls d'estils: enlloc de ser una gran ajuda es convertirà en dos problemes, aprendre CSS i el funcionament del framework.