Une fois le dossier de réalisation préparé et le site de communication opérationnel, il faut mettre en application tout un certain nombres de tâches, afin de pouvoir commencer le travail de création du site.
La méthodologie décrite au travers de ce tutorial n'a pas la prétention d'être LA méthodologie à suivre.
Elle a néanmoins fait ses preuves et reste une alternative jouable pour la création de sites Web évolutifs et respectant les standards du Web.
Prérecquis et fichiers nécessaires
Extensions Lorem and More et Lorem Ipsum Génératorh
Afin de faciliter le travail d'intégration et de réalisation de cette maquette de travail, il peut être intéressant de travailler avec du faux texte et de fausses images. En ce qui concerne le texte, vous pouvez utiliser les extensions Lorem and More et Lorem Ipsum Générator disponible sur le serveur de Adobe Exchange.
Vous pouvez également installer une extension firefox, Dummy Lipsum, ou vous procurer ce faux texte sur des sites qui en génère. Si vous ne savez pas installer les extensions Dreamweaver, suivez le tutorial prévu à cet effet.
Prérecquis et fichiers
Aucun prérecquis particulier n'est recommandé, le tutorial utilise les outils suivants :
- DreamWeaver
- Firefox
- Netscape 4.79
- Fichiers nécessaires
Cahier des charges et objectifs
La réalisation de cette maquette, doit fournir des fichiers HTML, CSS, JS qui seront valides conformément aux recommandations du W3C. Leur portabilités inter principaux navigateurs Firefox, Internet Explorer, Safari devra être assurée (aucun graphisme complexe n'est imposé).
Au travers de ce tutorial, la démarche est de privilégier une méthodologie de travail, plutôt que de rentrer dans la complexité engendrée par certains types de visuels. Il sera intéressant également, de porter une attention toute particulière à l'accéssibilité et au référencement.
Aperçu de l'interface structurelle
Le plus complexe dans la visualisation de cette interface, c'est qu'il faut l'observer en tant qu'architecte de l'information et donc l'interpréter d'un point de vue structurel et non graphique.
L'ensemble de l'information pourra être visuellement représentée de la même manière, mais l'intérêt sera justement de porter alors un second visuel à cette même interface, et pourquoi pas un troisième, afin de pouvoir présenter au client diverses approches pour son identité visuelle.
Le document se décompose en trois principales zones ou secteurs d'information :
- L'entête (dont le menu)
- Les informations contextuelles
- Le contenu de la page
Chaque secteur est lui même décomposé en divers éléments qui peuvent, ou pas, être visualisés directement sur le schéma, ou définis par le cahier des charges :
- Titre
- Sous titre
- Paragraphe
- Elément de liste
- Elément en surbrillance
- Elément en emphase
- Liens, menus, sous menus
- Notes, commentaires, accronymes
- Elément stylés communs (6.3 €)
- ...
Arborescence et structuration
Différentes approches permettent de poser les bases de la structuration du document HTML. Tout va dépendre de vos bases de départ. A savoir :
- Est ce que vous travaillez sur un site, que vous commencez à partir d'une page blanche ?
- Est ce que le site est une refonte d'un site déjà existant ?
- Est ce que le client vous a remis des documents de contenu ?
- etc...
Donc une fois encore tout n'est question que de contexte.
En partant d'un existant
Dans le cas où vous travaillez depuis un existant, qu'il s'agisse d'un site en ligne ou de documents textes, commencez par récupérer une version HTML de ce contenu, soit en enregistrant la page depuis un navigateur web, soit en enregistrant sous HTML depuis Word.
Ensuite, ouvrez ce code dans Dreamweaver pour le nettoyer en utilisant le menu Commandes > Nettoyer le code xHTML ou Commandes > Nettoyer HTML Word en fonction.
Une fois le travail de nettoyage effectué, vérifiez quand même de visu le code, afin de vous assurez que rien ne cloche ou que le travail de nettoyage n'ait pas laissé quelques incohérences d'imbrication de balises.
Aidez-vous de la fenêtre Rechercher / Remplacer, qui est une des plus grandes réussite des débuts de Dreamweaver. Si besoin est, rapprochez vous du tutorial prévu à ce effet.
En partant de zéro
Si par contre vous démarrez depuis une page blanche, vous avez deux options, soit vous commencez par une ligne de faux texte de 1000 mots que vous allez découper et structurer au fur et à mesure, soit vous avancez par petites portions de faux texte que vous structurez et agencez au fur et à mesure. L'essentiel est que vous soyez à l'aise avec la méthode.
DOCTYPE utilisé
Pour ce travail, il n'est pas nécessaire de travailler en xHTML donc un document HTML fera l'affaire. Optons pour un HTML 4.01 Transitionnel. Ceci, nous donnera alors l'occasion dans la dernière partie du tutrorial de réaliser un portage vers du xHTML strict et voir les modifications à apporter.
Déroulé du texte et du contenu (real_01.htm)
Objectifs de ce déroulé
En attendant d'avoir le contenu réel par votre client, il vous faut pouvoir mettre en place les maquettes, les modèles, les feuilles de style et rien ne remplace le faux texte et les fausses images, afin de pouvoir construire et présenter ce travail.
Bien que le contenu sera complètement factice, il va nous permettre de travailler proprement et de garder un résultat présentable.
Logo, image de contenu ou d'illustration ?
Eternelle question. Le logo doit-il faire partie du contenu, ou doit-il être ajouté par les feuilles de style ? Beaucoup considèrent qu'il faut l'intégrer au contenu. Mais en y regardant à deux fois, il est préférable de le joindre par des feuilles de styles.
Voici quelques points qui peuvent aller dans ce sens :
- Possibilité d'afficher un logo sur la page web et d'en imprimer un autre
- Possibilité de décliner le logo (couleur, niveau de gris, deux tons...) en fonction des pages
- Facilité d'adaptation du contenu en cas de redistribution (par les CSS ou AJAX)
- ...
Image de remplacement
De la même manière que le faux texte donne du coprs à la page et au contenu, il faut également utiliser des images pour illustrer ce contenu. Seules les images de contenu doivent être intégrées. Les images d'illustrations ou faisant partie de l'identité visuelle, seront ajoutées par les feuilles de style.
Mise en pratique
Vous pouvez utiliser directement le fichier correspondant 'real_01.htm' présent dans les fichiers nécessaires, ou tout simplement mettre votre propre contenu sous forme de texte déroulé au kilomètre intégrant uniquement les images de contenu.
Chaque élément de la structure étant délimité par des balises de paragraphe <p>, et chaque image sera uniquement délimité par une simple balise <img> et n'étant pas intégré à l'intérieur d'une balise <p>.
L'étape du chapitre suivant se chargera de modifier chaque balise <p> en balise de description, <h2>, <h3>, <blockquote>... etc...
Balisage des données tabulées (real_02.htm)
Les balises de tableaux
Bien souvent lorsqu'on travaille avec des CSS, on regarde les tableaux comme de mauvais venus... et grand nombre hésite à les utiliser. Certes, s'ils sont à éviter pour la mise en page ou tout autre manière détournée pour gérer du visuel, ils restent d'excelents éléments de structuration pour les données tabulées. Donc pas d'hésitation, dès qu'il s'agit de données de rapport, de tableur excel, de comptes, etc... les tableaux sont là.
Par contre, ils sont parfois assez mal utilisés, et on oubli bien des balises, ou des éléments de structuration.... voir à ce sujet le tutorial sur les bases du HTML.
Mise en pratique
Notre tableau présente un titre de tableau, qui sera taguer avec une balise <caption> prévue à cette effet, il n'est donc pas nécessaire d'utiliser de balise <h2>
Il est également important de baliser les trois principales parties de ce tableau <thead> qui contiendra les titres de colonnes, <tfoot> qui permettra de marier l'ensemble des cellules de la dernière rangée <tr> contenant les notes de bas de tableau pour notre exemple, et <tbody> pour le reste du corps de tableau.
Balisage générique du texte et du contenu (real_03.htm)
Une fois le document déroulé, il faut en structurer le contenu en procédant à la mise en place d'une hiérarchie d'importance de niveau <h2> à <p>. Il faut alors prendre soin de bien distinguer chaque sections, par exemple, il faut s'assurer que Outils de recherche et Titre de note, soient tous deux des entêtes de niveau <h2> car ils sont tous deux des titres de section et ont donc un même degré d'importance.
Il faudra lors de l'étape suivante répartir l'ensemble du document en divisions afin de s'assurer que les divers <h2> et autres balises d'entêtes n'entrent pas en conflit structurel.
Pensez également à placer de faux liens (href="#") afin de bénéficier de balises <a> représentant les futurs vrais liens. Balisez également de balises <strong> de mise en surbrillance et <em> de mise en enphase. Tout ceci permet, d'une part, de donner au texte une dynamique de contenu et, d'autre part de s'assurer que les moteurs de recherche trouveront un sens sémantique à ce contenu.
Balisage spécifique du texte et du contenu (real_04.htm)
Une fois que les principaux éléments structurels ont été mis en place, il faut affiner le balisage du contenu en s'attardant sur l'ensemble des éléments de type acronyme <acronym>, abréviation <abbr>, (lire le débat à ce sujet), les citations <cite>, <q>, <blockquote>... etc...
Ce travail permettra d'obtenir un document plus explicite, car pour un moteur de recherche qui récupère par exemple le mot cap, s'agit-il du cap à suivre ? du Certificat d'Aptitude Professionelle ?, ou encore de l'abréviation du mot capable ?... de plus est-ce que ces abréviations, mots ou acronymes sont en français ? ou dans une autre langue...
De ce fait, s'il est complètement farfelu de taguer l'ensemble des mots d'un contenu, il est très pertinent de taguer l'ensemble des acronymes, abréviations , citations et autres éléments de ce type, en prenant soin de définir leurs attributs lang et title.
Liste des éléments de notre exemple
Voici pour notre exemple la liste des éléments qu'il est intéressant de taguer. Toutefois, cette liste est loin d'être exhaustive et ne représente aucunement l'ensemble des cas de figure.
Si vous souhaitez pouvoir les visualiser d'un simple coup d'oeil durant votre travail de balisage au sein de la page, ajoutez le style incorporé suivant :
<style>
acronym, abbr, blockquote, q, cite, dfn {
color:#ff0000;
font-weight:bold;
}
</style>
Accronym
AOC
Appellation d'Origine Controlée, avec comme lien informatif éventuel, http://www.univers-fromages.com/ensavoirplus-aoc-aop-labels.php
AOP
Appellation d'Origine Protégée, avec comme lien informatif éventuel, http://www.univers-fromages.com/ensavoirplus-aoc-aop-labels.php
OGM
Organisme Génétiquement Modifié, avec comme lien informatif éventuel http://www.ogm.gouv.fr/
IFOAM
International Federation of Organic Agriculture Movements avec comme lien informatif éventuel http://www.ifoam.org/
JDLE
Le journal de l'environnement avec comme lien informatif éventuel http://www.journaldelenvironnement.net/fr/index/index.asp
FNAB
Fédération Nationale d'Agriculture Biologique avec comme lien informatif éventuel http://www.fnab.org/
SAU
Surface Agricole Utile avec comme lien informatif éventuel http://fr.wikipedia.org/wiki/Pays_agricole
INRA
Institut National de la Recherche Agronomique avec comme lien informatif éventuel http://www.inra.fr/
abbr
bio
agriculture biologique avec comme lien informatif éventuel http://www.intelligenceverte.org/agriculture-biologique.asp
cite, q, blockquote
Le guide des connaisseurs .... "Le fromage de Herve, ...."
L'ensemble de l'article référent est passé dans l'attribut cite="http://www.leguidedesconnaisseurs.be/article1978.html"
dfn
sub, sup
Outils et moteurs spécifiques
Ce genre de travail devient vite fastidieux et nécessite un temps d'intervention pouvant rapidement devenir très coûteux. Pour cela, il est important de développer en interne des moteurs informatiques réalisés sous Visual Basic, Director, PHP, peut importe l'outil, dans la mesure où le résultat soit satisfaisant, qui permettent de taguer pour nous l'ensemble de ces acronymes ou abbréviations, etc...
L'idée est de demander au client de rédiger un document Excel qui contient l'ensemble des associations sous la forme ci-dessous; Ensuite le moteur parserait l'ensemble du site pour taguer chaque fichier HTML en fonction.
Puce et média réalise un moteur sous Director, il devrait être prochainement en téléchargement. Laisser nous savoir si vous êtes intéressé.
Répartition des principales divisions du document (real_05.htm)
Maintenant que tout doit être correctement balisé et structuré, il nous reste à répartir le document sous forme de sections. Comme nous l'avons défini dans l'introduction de ce tutorial, il existe trois principales parties, qui sont, l'entête, les informations contextuelles et le contenu à proprement parlé de chaque page. De plus, dans la partie d'informations contextuelles, nous retrouvons trois zones de notes qui doivent également être taguer sous forme de divisions autonomes.
Nous allons utiliser des balises <div> pour 'diviser' et isoler ces différentes parties. Commencez par sélectionner l'ensemble des balises d'une même zone, par exemple pour celles de l'entête, sélectionnez de la balise <h2>Titre de document à menu D </li></ul>, puis cliquez sur l'icône Insérer la balise DIV de l'onglet Mise en forme.
Donnez un nom d'attribut ID ou de classe pour chaque secteur, en fonction du tableau ci dessous :
| zone | délimitation | id | class |
|---|---|---|---|
| entête | <h2>Titre de document... à ...menu D</li></ul> | entete | |
| nav contextuelle | <h2>Outil de recherche... à .../aulx_max.jpg"> | nav_context | |
| contenu | <h2>Titre de paragraphe... à ... </table> | contenu | |
| note 1 | <h2>Titre de note... à ...en savoir plus.</a></p> | notes | |
| note 2 | <h2>Titre de note... à ...menu F</a></li></ul> | notes | |
| note 3 | <h2>Titre de note... à ...6.3 €</p> | notes | |
Validation et compatibilité (real_06.htm)
Une fois votre document HTML terminé, enregistrez le, et avant de le placer en ligne pour vérifier sa validation, procédez à une vérification de validité depuis Dreamweaver.
Validation
Ouvrez le réglage des paramètres Fenêtre > Résultats, onglet Validation. Puis, depuis le menu contextuel ouvrez Paramètres. Assurez vous d'avoir sélectionné uniquement HTML. Ensuite, depuis le même menu, sélectionnez Validez le document actuel.
Prenez alors soin de corriger l'ensemble des erreurs reportéees. Généralement vous allez avoir des erreurs de type entités HTML de caractères, ou certains attributs alt de balise <img>.
Vérification de validator
Pour l'instant le document se trouve être en DOCTYPE HTML 4.01 Transitionel. Plusieurs manières pour tester et valider ce document, soit en utilisant le menu Tools > Validate HTML de la barre web developer , soit en vous rendant directement auprès des services du W3C prévu à cet effet. Quoiqu'il en soit, votre page devra être en ligne.
Mise en place de la feuille de style
Définition
Pour cette première feuille de style CSS, nous n'allons pas faire dans l'innovation, nous allons rester dans les bases visuelles de la représentation structurelle du début de ce tutorial. Nous explorerons un aspect graphique totalement différent en fin de tutorial, dans la partie de proposition d'une autre identité visuelle.
Méthodologie
Bien que les feuilles de styles seront externes par la suite, il est préférable dans un premier temps de travailler et de créer des feuilles de styles en entête du document :
<style>
declaration {
}
</style>
Cela permet de ne pas avoir à enregistrer sans cesse le document et surtout de se concentrer sur un seul document. Ceci fait, que vous travailliez dans le code CSS à la main, ou directement sur la feuille de style, vous n'avez pas à basculer de document pour repasser dans le HTML afin de prévisualiser dans le navigateur.
Une fois la création des CSS terminée, et ce depuis la version CS3 de Dreamweaver, vous pouvez par un simple clic droit dans la palette Style CSS, accéder à un sous menu Déplacer les règle CSS ... Ce menu vous permettra alors de déplacer votre sélection vers une feuille de style externe déjà existante, ou de simplement en créer une nouvelle pour l'occasion.
Vous pourrez ensuite découper cette feuille de style en deux feuilles, ancien.css et moderne.css, comme vu précédemment dans ce tutorial, afin de filtrer et permettre aux navigateurs les plus anciens de quand même afficher un contenu utilisable par l'internaute.
Premières descriptions de base
Avant de définir l'ensemble des descriptions et règles, nous allons commencer par définir quelques règles d'aide au travail qui ne viendrons pas fausser nos choix, mais au contraire nous aiderons à mieux les définir.
Le sélecteur body
Définissons un jeu de polices pour l'ensemble du document, ainsi qu'une taille référence de 10 px. Cela nous permettra de travailler avec une unité proportionnelle comme le cadratin (em), basé sur une référence décimale.
body {
font-family: "Lucida Console", Arial, Helvetica, sans-serif;
font-size: 10px;
}
Le sélecteur universel *
Ce sélecteur ciblant l'ensemble des balises HTML, cela va nous permettre de réinitialiser l'ensemble des marges (margin) et remplissage (padding) du document. De ce fait, chaque marge et remplissage seront explicitement ajustées, et nous ne laisseront pas les valeurs par défaut, différentes pour chaque navigateur, prendre le dessus.
* {
margin: 0px;
padding: 0px;
}
Positionnement temporaire des secteurs ou zones
Positionnons les trois secteurs dans l'espace afin de dégager de la surface et de nous permettre de nous concentrer sur le visuel. Pour l'instant utilisons la propriété position que l'on définira comme absolu, nous verrons ensuite de revenir et adapter cette déclaration.
#entete {
height: 200px;
width: 900px;
left: 0px;
top: 0px;
position: absolute;
}
#nav_context {
width: 260px;
left: 0px;
top: 200px;
position: absolute;
}
#contenu {
width: 640px;
left: 260px;
top: 200px;
position: absolute;
}
