Contenu des 10 leçons
Leçon 1: Saisie et style de texte
Leçon 10: Je structure mon site. Répertoire. Ressources supplémentairesContenu de la leçon 10 (ch.12, structure du site. Ch.13, Ressources)
A ce point de mon avancement, j'ai créé plusieurs pages que j'ai l'intention d'exposer sur mon site.
Je suppose que j'ai créé ces pages sous forme de fichiers "index", "mapage2", "mapage3", mapage_concerts"', etc... que j'ai enregistrés dans un dossier (ou répertoire) de mon disque dur que j'ai appelé "monsite".
Publier ça veut dire que ce dossier va devenir public, c'est-à-dire accessible au public pour qu'il puisse le consulter. Ce n'est pas possible si ce dossier reste sur mon ordinateur, à moins que l'ordinateur reste allumé en permanence et qu'il soit configuré comme un serveur. Généralement cependant, je devrai déposer une copie de ce dossier chez un fournisseur d'accès internet (FAI). C'est ce qu'on appelle "publier". Le fournisseur chez qui vous gérez votre courrier électronique vous offre également cette possibilité d'installer votre site personnel chez lui. De plus, il fournit quelques outils gratuits et conseils pour le réaliser.
Il faut d'abord que vous disposiez d'un hébergeur -fournisseur d'accès (FAI)- qui accueillera votre site. La méthode est à peu près semblable pour tous les fournisseurs d'accès, avec des variations de présentation et de terminologie. Ils vous invitent à aller sur leur site, puis à vous rendre dans votre compte pour créer l'adresse de votre site. C'est l'adresse que devront taper sur leur navigateur Internet ceux qui veulent visiter votre site. Par exemple, si je suis abonné aux services de courrier électronique d'Alice, je me connecte sur le site d'Alice, j'ouvre la page Espace Abonnés, puis accès à Mon compte, et je constate que je peux créer mon site Pages perso. En suivant les indications, je dois créer l'adresse de mon site, qui ressemble à http://cequevousvoulez.chez-alice.fr/.
Une fois votre site Page perso activé, vous devez y transférer une copie de vos documents (vos pages) par un procédé spécial (procédé ftp, qui signifie File Transfert Protocole autrement dit en langage clair: Protocole de transfert de documents. Plusieurs méthodes sont possibles:
Dans les deux derniers cas, on vous demandera de remplir certaines cases de renseignements. Pour Filezilla, dans le menu "Fichier", ouvrez "Gestionnaire de sites", puis "Nouveau site". Filezilla vous demande un nom qu'il reconnaitra comme l'étiquette de votre site distant. Ce nom est indépendant du nom de votre dossier local, mais rien ne vous empêche de choisir le même.
Ensuite indiquez l'adresse de hébergeur (Hôte): c'est l'adresse ftp donnée par votre FAI et non l'adresse de votre site que vous avez créée précédemment. Par exemple, pour Alice, c'est: ftp.chez-alice.fr.
Puis indiquez votre nom d'utilisateur et votre mot de passe que vous avez déclarés ou reçus de votre FAI pour créer votre courrier électronique. Enfin, le port est 21 (en principe et je ne sais pas à qui ça correspond).
Enregistrez, connectez-vous, et vous avez devant vos yeux une fenêtre où se trouve à gauche le contenu de votre disque dur local, et à droite le contenu de votre dossier web distant. Pour le moment il est vide de documents. Alors allez-y, transférer en glissant les fichiers, ou en utilisant le clic droit.
Une fois votre site publié, le public internaute le découvrira à condition qu'il en connaisse l'existence. Il y a pour cela deux moyens. On bien vous écrivez à vos connaissances et correspondants pour leur donner l'adresse du site. Ou bien les moteurs de recherche le débusquent selon des critères de mots-clés.
Premier travail de visibilité de vos pages, il est important que chaque page du site soit bien identifiée par son titre. Le titre de ma page est celui que je veux voir affiché par les navigateurs dans la barre de titre de la fenêtre du navigateur. Il apparaitra également dans les résultats des recherches des moteurs.
Pour saisir le titre: je vais dans le menu [Format] et je clique sur [Titre et propriétés de la page]. Dans la boite de dialogue ainsi ouverte, j'inscris le titre de ma page dans la rubrique "titre" (première ligne de la boite):
Informations sur la musique traditionnelle
Figure 12-1
Dans la même fenêtre, je peux inscrire le nom de l'auteur de la page.
Les indications de titre et d'auteur ne sont pas enregistrées dans le corps de texte et sont invisibles dans le corps de texte. Cependant, elles sont visibles en mode Source, dans la partie <head>. Voici comment elles ont été prises en compte:
<title>Informations sur la musique traditionnelle</title>
<meta content="Alain Boudet" name="author">
Les moteurs de recherches parcourent des millions de pages. Comment repèrent-ils mes pages en fonction des mots-clés que je leur indique? Ils ne lisent pas tout de la même façon. Ils sont sensibles aux mots contenus dans l'adresse, aux titres et sous-titres de la page identifiés par les sélecteurs h1 à h6. Ils lisent également des indications non-affichées qui sont contenues dans la partie <head> visible en mode Source. Ce sont le titre de la page, le nom de l'auteur, et également la "description" et les "mots-clés". C'est ce qu'on appelle le référencement.
J'ai accès à la rubrique [Description] avec la même fenêtre [Format]>[Titre et propriétés de la page] (figure 12-1). J'y inscris une description courte et fidèle du contenu.
NVu n'a pas prévu d'insérer des mots-clés en mode Normal. Peut-être parce que cette fonction a été galvaudée et qu'elle prend de moins en moins d'importance pour les moteurs de recherche. Pour inscrire des mots-clés, il est donc nécessaire d'opérer en mode Source, mais c'est facile. Belle occasion d'aller voir un peu plus la partie <head>.
Précédant la balise de fin </head>, ou suivant les autres meta-balises <title> et <meta content>, j'insère le texte suivant:
<meta name="keywords" content="j'inscris ici les mots clés">.
Attention, n'écrire que des lettres en code html. Pas de é, è ou à, mais é è à. On peut mettre ce texte n'importe où entre <head> et </head> sauf à l'intérieur d'un bloc, le bloc de style par exemple, situé entre la balise de début <style> et la balise de fin </style>.
<head> ...............
<meta content="Multiples informations sur les divers aspects de la musique traditionnelle française et étrangère. Articles, agenda" name="description">
<meta name="keywords" content="musique traditionnelle, bretagne, italie, klezmer">
</head>
Une autre question que je me suis posée: lorsque je navigue avec Mozilla, certaines pages n'affichent pas correctement les lettres spéciales comme é, è, à. Pourquoi? Est-ce que mes propres pages seront correctement affichées par les navigateurs? Merci à André de m'avoir fourni la réponse:
Ca ne vient pas de toi, mais du fait que le rédacteur de la page n'utilise pas la même page de code que toi. Je m'explique.
Le code ASCII qui permet de représenter les caractères sur un octet, n'a été normalisé à l'origine que pour les 128 premières valeurs (soit 7 bits) car l'ASCII a été créé pour les transmissions de texte. Depuis le code ASCII est utilisé de manière générale, et on a ajouté des caractères spéciaux représentés sur les 128 codes suivants (utilisant donc les 8 bits). Mais comme ce n'était pas normalisé, plusieurs interprétations ont fleuri, c'est ce qu'on appelle les pages de code (Latin occidental IS0 8859-1, UTF-8, etc.). Le monde Unix utilise de plus en plus l'UTF, alors que le monde Windows reste sur l'ISO 8859, ce qui produit ce que tu vois.
En fait, si le rédacteur de la page avait utilisé la norme html, ça ne serait pas arrivé. En effet, pour éviter ça, il y a des séquences html pour représenter les caractères spéciaux :
é pour e accent aigu
è pour e accent grave
ê pour e accent circonflexe
à pour a accent grave
ô pour o accent circonflexe
° pour le petit rond qui signifie 'degré'
j'en passe et des meilleures
Ces séquences sont indépendantes des pages de code et sont interprétées par le navigateur (par toujours bien avec IE) pour produire le caractère désiré.
Conclusion: comme NVu utilise les normes html, je ne risque rien.
Dans mon ordinateur, j'ai créé un répertoire "monsite" dans lequel figurent mes différents fichiers de page: "index", "mapage2", "mapage3", mapage4"', etc... Le nom de fichier de la page d'accueil doit forcément être "index.html". C'est à cette condition que cette page va s'ouvrir par défaut lorsque quelqu'un indiquera l'adresse de mon site.
Lorsque je publierai le site, une copie du répertoire "monsite" sera transporté sur le serveur distant avec tout son contenu. Il faut donc qu'y soient jointes également les images que j'ai insérées dans mes pages. Comment agencer tous ces fichiers dans le répertoire? Est-il obligatoire de le structurer en sous-dossiers et lesquels?
Non, il n'est pas obligatoire de le structurer, mais c'est conseillé. Je peux très bien concevoir mon répertoire comme un vaste coffre à jouets où je fourre en vrac tous mes fichiers, pages, images, feuilles de style externe, etc... Le navigateur trouve toujours le fichier s'il a son nom. Cependant, si la machine n'est pas gênée, l'humain que je suis risque d'avoir du mal à s'y retrouver lorsque je voudrai faire des corrections ou modifier le contenu du site. Ce n'est donc pour une question technique qu'il est fortement conseillé de structurer le site, mais pour aider notre esprit. Faites-le donc selon votre gout.
Il est vivement conseillé de créer des sous-dossiers: "images" par exemple, et pourquoi pas plusieurs sous-dossiers correspondant à chacune des pages. Je peux aussi créer des sous-dossiers pour un ensemble de pages dans une arborescence: tous mes documents "musique irlandaise" dans l'un, les documents "musique italienne" dans un autre, etc...
Est-il possible d'importer des textes déjà saisis en traitement de texte, sans avoir à les ressaisir entièrement? Il est évidemment possible de faire des "copier-coller", et ça marche. Le problème est que ce n'est pas bien propre sur le plan des codes de mise en forme, car on importe aussi tous les styles intégrés (sauf pour les traitements de texte qui utilisent des feuilles de style). Si je veux que le texte collé bénéficie de la feuille de style interne de ma page, je dois l'importer sans aucune mise en forme. Il est nécessaire pour cela de l'"Enregistrer sous" en mode texte (.txt) avant de le copier. Utiliser également la commande [Format]>[Annuler le style de texte].
Avant de publier une page, je vais procéder à quelques vérifications pour éviter de mauvaises surprises:
Si je souhaite que les lecteurs aient la possibilité de me contacter, je peux laisser mon adresse électronique. Je peux également créer un lien. En cliquant sur un mot, une expression ou une image, cela ouvre une nouvelle page de messagerie vierge adressée à mon adresse. Par exemple:
Pour me contacter, cliquer ici.Il s'agit d'un lien externe et la méthode est la même que pour créer des liens avec d'autres pages (figure 9-11). Dans [Emplacement du lien], j'inscris mon adresse. Différence: je coche la case [la valeur ci-dessus est une adresse électronique].
Si de plus je souhaite que mes correspondants me laissent leurs coordonnées, il y a bien mieux employer un formulaire. Mais ceci est une autre histoire que vous pourrez apprendre dans d'autres tutoriels et dans l'Aide. Ce n'est pas plus difficile que le reste, mais je ne veux pas écrire sur toutes les possibilités de NVu, je ne n'en finirais pas. Plus tard peut-être, si j'ai de l'aide.
Voici la partie la plus importante de tout ce tutoriel.
Vous maitrisez l'utilisation de l'éditeur NVu et vous savez construire votre site web. Mais qu'allez-vous y mettre dedans? La question essentielle est:
Qu'est-ce que je veux communiquer?
Faire de belles pages c'est bien. Respecter la syntaxe html, être doué et astucieux en technique, c'est SUPER. Mais quel sera le contenu des pages? Imaginez une belle vitrine, avec de nombreuses astuces et de belles décorations, mais vide, ou absurde, encombrée, incompréhensible, ennuyeuse, sans intérêt. Comment donner de l'intérêt, du sens à votre site? L'intérêt et le sens du contenu dépendent de la réponse à ces deux questions:
La réponse à la première question ne peut être que personnelle.
Pourquoi donc faire un site? Est-ce que j'ai envie de jouer avec l'outil, est-ce que c'est pour faire comme les autres, pour me sentir à la page? Est-ce pour communiquer ma passion pour un sujet? Ou parce que j'ai des documents, des opinions à proposer et partager pour apporter ma contribution à un monde meilleur? La condition pour répondre à cette question, c'est de prendre du temps pour s'interroger. Impossible d'esquiver ce temps de maturation. Prendre le temps de laisser murir cette réflexion avant de passer à la réalisation. Un temps de méditation. Laisser émerger ce qui vient...
Toutes les réponses sont bonnes, à condition qu'elles soient sincères. Ce n'est pas de la morale, c'est de la communication. La sincérité est ce qui donnera de l'intérêt, du sens, de la cohérence, du piment, de la force, à votre site. Si votre motivation est de jouer, votre site sera construit réellement dans ce but. N'essayez pas de faire semblant d'être autre chose. C'est ce qui détermine la teneur du message. Un message, ce n'est pas forcément une idée intellectuelle ou une information précise, c'est ce que j'ai envie de partager, ce que j'ai envie que le lecteur perçoive de ce que je montre.
Deuxième question: sous quelle forme communiquer pour intéresser le lecteur? Comment présenter le message pour qu'il soit lisible et compréhensible ?
Cette question met en lumière la distinction entre l'idée et les mots qui communiquent l'idée. Vous connaissez ça dans les conversations? Vous voulez dire quelque chose et puis, vous ne trouvez pas le mot qui l'exprime. Quelqu'un vous suggère un mot, et non, il ne représente pas votre idée. Constatez que l'idée existe en-dehors des mots. Les mots sont là pour l'habiller, lui donner un corps plus concret, je pourrais dire un corps de chair. L'idée, c'est l'esprit et le mot, c'est le corps.
Choisir les mots, ou encore d'autres langages tels que des dessins ou images, ça fait partie des techniques de communication, et ça peut se perfectionner. On peut recueillir de nombreux conseils à ce sujet. Mais ça ne peut pas fonctionner si vous n'avez pas la réponse à la première question sur le sens de ce que vous voulez communiquer. Pour donner corps au message, il faut que l'intention du message soit claire.
Exemple de conseils
Déterminez quel public vous voulez toucher. Adaptez votre langage à celui de votre public. Notez: l'idée peut rester la même quel que soit le public, en accord profond avec vous, mais le langage peut changer pour être compris des autres. Ainsi, si vous adoptez un langage SMS, c'est pour toucher ceux qui parlent comme ça. Pour les autres, ce sera comme une langue étrangère, et ils n'auront pas envie de faire l'effort d'apprendre. Dans le même ordre d'idée, si vous parlez bien en français, mais avec des mots techniques compris uniquement de ceux qui ont la culture, pourquoi pas? Avec le langage de la communication informatique par exemple, blogs, php, javascript, ftp, paramètres proxy ou même des mots très courants comme "publier" qui ont un sens précis qu'on ne peut pas deviner si on est en-dehors du coup. Tout ça c'est possible à condition d'être cohérent: cela signifie que vous vous adressez à ces personnes de façon spécifique et voulue.
Le langage pour faire passer ses messages ne comporte pas seulement des mots, mais toute la présentation, avec ses couleurs, ses formes, la disposition des différents éléments, le nombre de pages, les images, les dessins, les sons, les animations, etc... Trop d'animations, de couleurs, ou trop d'informations entassées dans une même page risque de distraire le lecteur et de le détourner du vrai message.
L'apparence du site (Informations sur la musique traditionnelle) que je vous ai conduit à créer dans cet apprentissage, reflète à la fois mes conceptions et une logique d'apprentissage progressif. C'est seulement un exemple. C'est comme cela que j'ai appris à utiliser Kompozer/NVu et que j'ai constitué le présent site Spiritualité, Science et Développement personnel.
Abandonnez mon schéma et créez votre site à votre gout. Il y a bien d'autres exemples de sites à votre disposition, tels ceux proposés sur le forum NVu en français. Il y a bien d'autres outils, fonctionnalités et ressources à votre disposition, que vous pouvez utilement vous approprier. Il vous suffira d'aller consulter l'aide et d'autres tutoriels qui sont cités plus loin. Exemples d'outils et de fonctionnalités:
Un menu déroulant, c'est un menu qui apparait lorsque vous positionnez le pointeur de la souris sur le titre du menu ou que vous cliquez sur ce titre, selon les cas. On a l'impression qu'on déroule la feuille, et que le contenu apparait. En réalité, il n'y a rien qui se déroule. C'est un bloc qui s'affiche ou disparait, en fonction de la position du pointeur. Ce menu fait donc appel à la fonction d'affichage. Vous pouvez choisir l'endroit où cette fenêtre s'affiche dans la page, et si vous la placer juste en-dessous du titre (ou à sa droite), alors ça rappelle vaguement un déroulement.
Le moteur de cette fonction est donc une instruction d'affichage. En html, c'est très simple, c'est "display", qu'on trouve dans les styles internes (propriétés de la boite). On peut l'associer à la commande hover. Elle indique le style à appliquer lorsque la souris se trouve sur le bloc. C'est donc excellent pour notre but. Malheureusement, ce n'est pas pris en compte par Internet Explorer, autant dire que ce n'est pas applicable. Voir cependant un exemple de programme sur le site de Developpez.com, par Marc Hertzog.
Si vous savez manier les formulaires, vous pouvez exploiter les commandes <SELECT> et <OPTION>, comme dans le site d'Izidoo.
Javascript est un langage pour écrire de petits programmes exécutables par les navigateurs (en général). Il n'est pas le seul (asp, php, etc..), mais il est très répandu. Il permet de définir des fonctions d'exécution de certaines actions, comme afficher ou cacher. C'est ce qu'exploitent certains scripts (programmes) pour réaliser des menus déroulants. Ce langage est assez compliqué, mais vous n'avez pas à entrer dedans, seulement à recopier au bon endroit. Il y en a d'assez simples, comme celui d'Alsacréation ou de JSS.
Celui que je trouve le plus simple est celui d'Izidoo, surtout si on simplifie sa mise en page (tous les styles qui sont appliqués), comme par exemple dans le site Batraciens. Car l'une des difficultés est de bien positionner les sous-menus par rapport aux tableaux des titres principaux. Il faut être capable de passer de l'un à l'autre en continuité, faute de quoi, le programme Javascript interprète que vous quittez et efface les sous-menus. Or, s'il est facile de le faire pour un des navigateurs, par exemple, Mozilla, vous vous apercevez que les positionnements ne sont pas interprétés de la même façon par Internet Explorer, ce qui complique beaucoup les choses. J'ai donc moi-même encore simplifié (page documentation) en traitant les sous-menus seulement comme une fenêtre d'affichage sans liens.
Vous avez déjà vérifié que les liens de vos pages qui pointent vers des sites extérieurs fonctionnent bien... au moment où vous avez créé la page. Mais voilà, l'adresse que vous avez indiquée peut changer ou même disparaitre quelques semaines plus tard. Les sites sont éphémères. Quelquefois, même s'ils se maintiennent, ils se restructurent. Comment vérifier que les liens de vos pages sont toujours valides?
Vous trouverez facilement sur Internet des outils en ligne qui vérifient les liens d'UNE SEULE page. Par exemple le Link Checker de W3C.
Mais il est bien plus pratique d'utiliser un vérificateur de l'ensemble des liens de toutes vos pages de votre site. En gratuit, vous n'avez pas le choix.
Windows: Xenu's Link Sleuth, en français.
Mac OS: 
Integrity de Shiela Dixon
NVu/Kompozer en français est présenté sur le site du projet Mozilla dont il est une composante. Vous y suivrez l'évolution des versions.
http://frenchmozilla.sourceforge.net/nvu/
Il existe une version évoluée récente de NVu, élaborée par un enthousiaste de NVu, appelée KompoZer. Il annonce avoir enlevé des bugs et propose un éditeur CSS mieux présenté, ainsi que d'autres améliorations. Je l'ai peu testée, et je ne peux rien en dire. Toutefois, il me semble que les anomalies que j'ai signalées dans ce tutoriel n'ont pas été corrigées.
https://kompozer-web.de/en
Un forum sur l'utilisation de NVu/Kompozer est présent sur le site de Geckozone
http://www.geckozone.org/forum/
Dans le même site de Geckozone, vous trouverez une page des ressources et tutoriels concernant NVu
Ressources sur NVU (tutoriels, sites, extensions, thèmes), dont je reproduis la partie concernant les tutoriels:
Plusieurs des tutoriels cités sont installés sur le site de Framasoft, un annuaire de logiciels libres. Vous aurez avantage à vous rendre à Framasoft, rubrique tutoriels: http://www.framasoft.net/rubrique4.html.
Qu'est-ce que Framasoft? Voir http://www.framasoft.net/article3050.htmlVoici des sites et des pages web qui expliquent le langage html ou exposent des façons de mettre en page en langage html.
Des logiciels gratuits à télécharger avec une astucieuse pipette capable de prélever, enregistrer et recopier n'importe quelle couleur de votre écran.
La Boîte à Couleurs, par Benjamin Chartier, http://pourpre.com/colorbox/
Un autre en RVB, avec palette en TLS: Programme RVB. http://www.ptorris.com/Voir dans AppStore, Color Picker.
Retour à la leçon 9: Barre de menu. Tableau
Mise en ligne 18 octobre 2006 - dernière modification 30 janvier 2012
Texte conforme à la nouvelle orthographe française (1990)