Accessibilité

Article Dreamweaver

Drew McLellan
Drew McLellan
Dreamweaver Fever*

Articles prcdents
Writing Secure DreamweaverMX Applications*, Ray West

Des pages plus professionnelles en cinq tapes avec DreamweaverMX

Ils prtendent quun mauvais ouvrier blme toujours ses outils. Et ils ont raison... Peu importe la qualit de loutil, cest la comptence de la personne qui lutilise qui produit le rsultat.

Cet article prsente les cinq tapes permettant dobtenir des rsultats professionnels avec DreamweaverMX.

Etape1: exportez votre code JavaScript et vos CSS vers des fichiers externes
Mme si vous estimez que garder lensemble du code dans votre page de base savre pratique pour les tches ddition, gardez lesprit que cette technique savre trs gourmande en bande passante. Dplacer le code JavaScript et les CSS hors de la section <head> de chaque page et dans des fichiers centraux permet daccomplir deux actions utiles:

  • La centralisation de votre code. Si vous devez apporter des modifications votre code, vous ne devrez effectuer lopration quune seule fois, et non pour chaque page qui lutilise.
  • Une conomie de bande passante. Le navigateur client ne charge le code JavaScript et vos fichiers CSS quune seule fois, et non une fois par page.

Pour accomplir cette tche, recherchez tout dabord les fonctions JavaScript dans la section <head> de vos documents. Voici un exemple typique:

<script language="JavaScript"
	type="text/JavaScript">
	<!--
	function MM_openBrWindow(theURL,winName,features)
	{ //v2.0
	window.open(theURL,winName,features);
	}
	//-->
	</script>
Copiez les fonctions dans un nouveau fichier texte, que vous enregistrerez sous un nom tel que fichier.js. Placez un lien ce fichier dans la section <head> de chaque page de votre site (ou placez-le dans votre modle), comme suit: 
<script language="JavaScript" type="text/JavaScript"
	src="/commun.js">
	</script>
Reprez le code CSS dans la section <head> de vos pages, copiez-le dans un nouveau fichier texte, que vous enregistrerez sous un nom tel que mesStyles.css. Voil ce que vous devriez chercher dans la section <head>: 
<style type="text/css">
	<!--
	h1 {
	font-family: Arial, Helvetica, sans-serif;
	
	font-weight: bold;
	color: #000000;
	}
	-->
	</style>

Liez le fichier CSS votre page web en insrant un lien vers le fichier CSS dans la section <head> de la page: 

<link href="/mesStyles.css" rel="stylesheet"
	type="text/css" />

Etape2: exportez votre site sans infos de gabarit
DreamweaverMX utilise les commentaires HTML pour stocker les mtadonnes dans les documents. Ces commentaires permettent lutilisation des fonctionnalits telles que les gabarits et les lments de bibliothque. Bien que ces fonctionnalits savrent particulirement pratiques lors de la construction de votre site, ces commentaires peuvent consommer un trop grand volume de bande passante et donner vos pages un aspect non professionnel lorsque vos fichiers sont sur le site de production.

Dreamweaver peut liminer ces commentaires et vous fournir une nouvelle version nettoye de votre site. Notez quil est nanmoins fondamental de conserver ces commentaires dans la version que vous utilisez pour viter de perdre le lien vos gabarits. Pour ce faire, choisissez Modifier > Modles > Exporter sans marqueur dans votre site. Utilisez la fonction Parcourir pour stocker votre site nettoy dans un nouvel emplacement et cliquez surOK.

Etape3: prparez votre site pour le futur avec XHTML
HTML a atteint la fin de sa vie et nest plus dvelopp comme langage de balisage. Il est maintenant supplant par le code Extensible HTML (en anglais) (XHTML), une implmentation du code XML convenant tous les navigateurs, nouveaux comme anciens. Bien que XHTML soit un langage XML, ses balises et attributs sont similaires au code HTML, que les anciens navigateurs ne distinguaient pas. Lutilisation du langage XML savre avantageuse car il constitue la nouvelle norme de lavenir.

Si vous effectuez les oprations de codage manuellement, vous devez matriser certains concepts XHTML avant de procder la conversion de vos fichiers. Par exemple, la norme XHTML prfre les attributs non vides, ainsi que les balises correctement imbriques et associes par paire. Vous pourrez en apprendre plus sur les diffrences entre les codifications HTML et XHTML dans larticle de Dan Short, Coding Standards Using XHTML (Standards de code en XHTML)* .

Si vous travaillez dans un environnement visuel, comme la plupart des utilisateurs, il est facile de transformer vos pages en chefs-duvre XHTML:

  • Si vous commencez la conception dune nouvelle page, vrifiez lactivation e loption Rendre le document conforme lXHTML dans le coin infrieur de la fentre Nouveau document.
  • Sil sagit dune page HTML existante, convertissez-la au format XHTML en choisissant Fichier > Convertir > XHTML.

Pas plus difficile que a.

Etape4: organisez votre code laide de la commande Appliquer le formatage de la source
Pour les pages longues et complexes, il devient vite difficile de sy retrouver dans une page en mode daffichage Code. Les programmeurs professionnels soulignent toujours limportance dune codification bien prsente et soigneusement dtaille.

Voici quelques-uns des avantages dune codification correctement formate:

  • Vous ne savez jamais qui est susceptible dapporter des modifications au code une fois que vous lavez labor. Que se passera-t-il si votre client revient sur le site pour y apporter des modifications en votre absence? Vos collgues doivent donc pouvoir y accder et comprendre le fonctionnement de votre page web.
  • Ce qui est clair maintenant ne le sera peut-tre plus dans quelques mois. Et sil vous arrive de modifier une page que vous avez vous-mme cre quelques mois plus tt,votreconnaissance du code ne sera plus ncessairement la mme et risque de ne pas vous aider comprendre sa toute dernire version. Un formatage soign vous aidera clarifier la situation.
  • Que se passera-t-il si vos clients curieux jettent un coup dil au code source sur leur site? Souhaiteriez-vous quils accdent un pouvantable fouillis ou quils rencontrent un code organisavec soin? Jimagine que vous prfrerez la seconde solution...

Ceci ne signifie pas que vous devez passer des heures nettoyer votre page avant de la tlcharger sur le serveur. DreamweaverMX vous simplifie la vie: il vous suffit de choisir Commandes > Appliquer le formatage de la source aprs ldition dune page.

Etape5: validez votre page pour rechercher les erreurs de base
Vous seriez amus(e) de connatre le nombre de professionnels qui ne connaissent pas les outils qui sont leur disposition pour corriger leurs erreurs de codification. Vous pouvez liminer la plupart des problmes de compatibilit de navigateur sur votre page en vrifiant si le code est correct. Pour ce faire, il vous suffit de lexcuter dans un programme de validation. En effet, le plus difficile nest pas de rsoudre les petits problmes, mais de les localiser. Do lutilit incontestable dun programme de validation.

Les utilisateurs de DreamweaverMX possdent deux moyens pour valider leur code. Le premier moyen provient de Dreamweaver. Vrifiez si vous avez bien enregistr la page sur laquelle vous travaillez. Choisissez ensuite Fichier > Vrifier la page. Choisissez ensuite Valider le marquer, sil sagit dune page HTML ou Valider en XML sil sagit dune page XHTML. Le panneau des rsultats saffiche alors et prsente la liste des ventuels problmes dtects.

Le second moyen de valider votre page consiste utiliser les outils de validation en ligne de W3C. Vous pouvez valider tous les types de HTML et XHTML, ainsi que les fichiers CSS. Les programmes de validation sont accessibles sur la page daccueil du site web de W3C:

La diffrence constate dans la page aprs la correction des erreurs mineures est rellement tonnante. Par exemple, une balise qui nest pas correctement imbrique peut empcher laffichage dune page dans un navigateur, alors quelle saffiche correctement dans un autre. Cette simple raison suffit laisser aux programmes de validation de code le soin de faire le sale boulot.