sensorique - créer sa page web 1/2

La création de sa propre page web tous les internautes en rêvent, beaucoup passent à l'acte, mais peu dépassent le stade de l'autosatisfaction. Il faut en effet prendre conscience qu'en septembre 2000 on dénombrait déjà plus de 3 Milliards de pages sur la toile et qu'aujourd'hui Google en indexe environ 25 milliards et traite rien qu'en Europe 20 milliards de requètes mensuelles. Dans ces conditions la probabilité pour qu'une page soit lue par d'autres que son rédacteur est extrêmement faible. Les quelques lignes qui suivent n'ont donc pour objet que d'apporter une toute petite contribution à la réalisation de vos fantasmes virtuels, et surtout à leur bonne diffusion sur le web, mais ne seront absolument pas un cours sur le HTML puisqu'il y en a déjà d'excellents.

Avant de commencer la réalisation d'une page web il y a quelques questions à se poser, et avant de la télécharger il en reste d'autres que nous avons réunies sous 7 rubriques, sans être pour cela exhaustif:

La réponse à toutes ces questions va conditionner la mise en oeuvre et le résultat final et nous allons essayer, dans ce qui suit, de vous donner quelques éléments de réflexion pour être plus performants et peut-être plus réalistes. Je ne suis pas du tout un expert en informatique, mais seulement un expérimentateur qui n'a pas trop mal réussi son arrivée sur le web et mes réponses et réflexions vis à vis des questions précédentes sont donc le fruit de ma seule expérience et parfois de celle de quelques uns des étudiants qui ont autrefois fréquenté ma zone d'influence sur le campus rouennais et aussi de quelques relations récentes parfois induites par ce site web.

L'objectif visé.

L'analyse de nombreuses pages web, dites d'amateur, celles qui m'intéressent ici, montre qu'il y a plusieurs objectifs possibles:

montrer qu'on est compétent en vue de trouver un job ou un meilleur job,

mettre ses compétences au service des internautes ou d'une catégorie d'internautes (c'est le cas de ce site),

faire connaitre son travail ou un hobby qui vous tient réellement à coeur,

ou simplement se faire plaisir sans objectif utilitaire.

ou tout cela à la fois...

La manière de réaliser son site sera cependant fort différente selon le cas :

la sobriété et la concision seront indispensables dans le premier cas,

la rigueur et une bonne documentation dans le second,

l'avant-dernier sera plus ludique et on s'y permettra beaucoup plus d'effets spéciaux et d'ingéniosité graphique.

Bien sûr dans tous les cas il sera judicieux de trouver un bon équilibre entre tous ces éléments : il n'est pas interdit d'avoir un graphisme élégant dans un CV et quelques effets spéciaux peuvent aérer un cours magistral rigoureux, mais il faut toujours garder à l'esprit que les fantaisies graphiques occupent de la mémoire et augmentent considérablement le temps de chargement d'une page.

Les thèmes abordés

Eu égard au nombre de sites existant aujourd'hui, il y a fort à parier que quelqu'un a eu la même idée que vous et l'a déjà mise sur la toile. Il faut donc faire une étude de marché et, en exploitant les moteurs de recherche et les sources documentaires, essayer de voir ce qui existe déjà afin de pouvoir vous démarquer et faire mieux. Ainsi si je prend l'exemple des sites qui expliquent comment créer un site web, la plupart vont vous expliquer les procédures du HTML et les trucs pour vous faire référencer, mais très peu vont vous demander de vous poser la série de questions qui précèdent, ni insister sur certaines particularités des serveurs qui ont pourtant une méga influence sur votre réalisation. Je vous parlerai donc très peu du HTML, un peu du référencement, mais surtout des trucs que j'ai trouvés.

Il ne faut pas dans un même site trop mélanger des thèmes complètement différents, ou si vous le faites il faut être conscient qu'un seul d'entre eux (deux tout au plus) sera identifié dans les annuaires ou les moteurs de recherche et que, par conséquent, les autres n'auront pas le succès que vous espériez, mais seront seulement vus par des internautes qui zappent sur l'ensemble de votre site. Internautes qui y sont arrivés par le biais d'une recherche concernant le thème majeur bien référencé de votre site. En fait, aujourd'hui, votre site sera référencé dans une catégorie précise par la plupart des moteurs de recherche, catégorie qui ne recouvre pas forcément tous les thèmes que vous abordez, cependant Google sera capable de référencer correctement les divers thèmes de votre site. Mais il faut être conscient que votre classement dans les listes de Google ne sera pas le même pour les différents thèmes. Ainsi, si l'on prend l'exemple d'Electron mon amour, si vous faites une recherche sur le thème "capteurs" vous le trouverez dans les premières lignes des propositions de Google, par contre si vous faites une recherche sur le thème "mode d'emploi du PC" le classement sera sensiblement moins brillant. En fait le classement reflète assez bien la fréquentation des pages web de votre site.

Ainsi si vous avez constitué une base de données cinématographiques gigantesque, et qu'à côté vous avez un second thème avec vos photos de Corrèze, même si elles sont belles à vos yeux elles ne seront pas le moteur de votre site. Ca ne vous interdit pas de les présenter, mais elles ne seront vues que par très peu de vos visiteurs.

Si vous souhaitez avoir beaucoup de visiteurs il faut être soit très beau, soit très utile et tant mieux si vous avez à la fois un site beau et utile. Mais l'utilité n'est pas une notion universelle, si vous faites un site sur la mécanique quantique, spécifiquement dédié à la résolution de l'équation de Schrödinger, il est clair qu'il pourra être utile à quelques physiciens mais ce n'est pas la peine de mettre un compteur à 5 chiffres pour comptabiliser vos visiteurs, même si vous avez passé des mois à monter une superbe animation qui visualise les orbitales électroniques illustrant les solutions de ladite équation dans divers cas particuliers.

Si vous avez à coeur de parler de plusieurs thèmes vraiment différents n'hésitez pas à créer un site web spécifique pour chaque thème quitte à mettre des liens permettant de zapper de l'un à l'autre, plutôt que de tout mettre sur le même site. Mais ce n'est pas une obligation...Electron mon amour regroupe plusieurs rubriques très diversifiées et ça marche très bien.

les outils à disposition

Pour réaliser un site web il faut disposer de plusieurs outils indispensables et de quelques uns simplement utiles. Les deux indispensables sont un éditeur HTML et un logiciel de dessin/retouche d'image et parmi les utiles il y a un éditeur classique tel wordpad et quelques outils pour gérer les animations. Enfin quelques outils pour optimiser le site, le mettre en place et en vérifier le contenu en ligne et hors ligne. Il existe d'autres langages que le HTML utilisables pour la réalisation de sites web attractifs, je pense en particulier au langage PHP qui présente des particularités très intéressantes. Cependant ce langage n'est pas autorisé par tous les hébergeurs tels Orange,etc...aussi nous ne l'employons pas et nous n'en parlerons pas ici. Par contre le JavaScript est utilisable sans contraintes et nous mêlons fréquemment des morceaux de programme écrits en javascript au milieu d'un ensemble HTML.

l'éditeur HTML

Il en existe un certain nombre sur le marché. L'un des plus employés est Dreamweaver, dont la version 2.0 complète a été diffusée gratuitement par le magazine PC-Expert il y a quelques années ainsi que par Wanadoo, et convient parfaitement à un débutant. Cependant il ne possède pas certaines fonctionnalités des versions plus récentes et il sera donc nécessaire de lui adjoindre un éditeur classique, en particulier pour la justification des textes et pour la fonctionnalité rechercher/remplacer. Par contre Dreamweaver version MX de 2004 et les versions suivantes disposent de toutes les fonctionnalités et garantissent des résultats très satisfaisants.

Un éditeur tel Dreamweaver, de l'éditeur Macromédia, vous permet d'écrire votre texte presque tel qu'il sera affiché comme avec un vulgaire traitement de texte, mais aussi de visualiser dans une seconde fenêtre le code source HTML et de le modifier directement dans le fichier source, en particulier pour ajouter les habillages de texte qui ne sont pas prévus dans les menus de l'éditeur principal tels le soulignement, les indices et exposants ou la justification et bien d'autres choses. Il permet l'adjonction de lignes en javascript et même l'édition de programmes complet de type *.js

l'éditeur dreamweaver 2.0

l'éditeur Dreamweaver MX. On notera par rapport au précédent la multitude d'éléments supplémentaires facilitant la réalisation d'une page web

Pour justifier un paragraphe dont la balise de début est <p> il suffit de la remplacer par <p align=justify>, et c'est dans ce cas qu'un éditeur tel wordpad est bien utile, car il dispose de la fonction d'édition "remplacer", ce qui permettra de justifier tous les paragraphes d'un coup, par contre pour souligner un mot ou mettre un caractère en indice on devra le faire manuellement et c'est sans doute l'un des points les plus négatifs du HTML. Sous Dreamweaver MX la justification fait partie des possibilités standard ainsi qu'on peut le voir sur la figure ci-dessus : dans le cartouche du bas figurent en effet l'essentiel des fonctions d'un traitement de texte classique.

On pourra noter cela sur le code source de la page précédente visualisé ci-dessous

Cette figure représente le haut de la fenêtre code source, on y remarque à gauche la possibilité d'appeler un éditeur externe, celle de remonter à la première ligne et à droite l'indication du numéro de la ligne visualisée et du total du fichier, bien sûr le nom du fichier et l'indication qu'il s'agit du code source HTML sont aussi indiquées. Pour visualiser le code source il suffit de cliquer sur l'icone en bas à droite de la fenêtre principale de Dreamweaver 2.0. Dans les versions récentes (figure de droite) le principe est identique mais l'icone est en haut à gauche et l'on dispose de trois modes d'affichage le mode "création" (ce que l'internaute verra) le mode "code" source et la possibilité de visualiser les deux simultanément ce qui se révèle très pratique.

Bien sûr ce n'est pas la seule amélioration. Dreamweaver possède maintenant toutes les fonctions d'un éditeur . En bas de la page en cours d'édition on trouve un menu très riche figuré ci-dessous

En haut à gauche de cette figure sont affichés en grisé les noms des fichiers ouverts simultanément et en blanc celui qui est affiché et sur lequel on travaille à l'instant. L'inspecteur de propriétés nous indique que le curseur se trouve sur un paragraphe, dont la fonte de caractères est Arial en taille 2 et qu'il s'agit d'un texte justifié. Si le mot sélectionné avait été support d'un lien celui-ci serait affiché dans la case ad hoc. Pour remplir cette case on peut s'il s'agit d'un lien interne simplement cliquer sur l'icone jaune qui va ouvrir le répertoire en cours et permettre, d'un simple clic de souris, de sélectionner le fichier destinataire du lien et dans la case cible définir où va s'ouvrir ledit lien (même fenêtre ou au contraire une nouvelle fenêtre). A droite on retrouve les commandes classiques d'un traitement de texte.

La zone inférieure est celle de l'inspecteur de résultats, c'est à dire d'un ensemble d'outils de vérification du code s'appliquant soit au fichier en cours soit à l'ensemble du site. On peut ainsi vérifier en quelques secondes l'ensemble des liens internes d'un site et identifier ceux qui sont brisés.

figures et graphiques

Pour les figures en .gif ou .jpeg un logiciel tel Paint Shop Pro est pratique, mais ce n'est pas le seul. L'un de ses points forts est de disposer de la possibilité de faire du gif animé d'une manière

mais aussi de capturer tout ou partie d'un écran, et toutes les recopies d'écran qui figurent dans Electron mon amour sont ainsi réalisées d'un simple clic avec Paint Shop Pro.

Si l'on souhaite écrire des équations complexes, le mieux est de les écrire avec un éditeur tel MathType et de les sauver en format gif car les écrire directement en HTML est particulièrement fastidieux et source de risque d'erreur, et même quasi impossible dès lors qu'on a besoin de symboles mathématiques particuliers. Si vous ne disposez pas de la version complète de MathType, mais seulement de l'éditeur d'équation sous une version ancienne de Word, la procédure consiste à écrire l'équation sous Word et faire un coupé-collé vers Paint Shop Pro et sauver l'image en gif avant de l'intégrer dans votre fichier HTML comme toute image.

Pour visualiser le résultat il est indispensable d'utiliser un navigateur tel Firefox ou Internet Explorer en mode hors connexion. Mais notez bien ceci, si vous avez développé votre site sous Windows il se peut que vous n'ayiez pas tout à fait le même résultat lorsque votre site sera effectivement en place sur un serveur distant qui tourne non sous Windows mais sous Unix (ou Linux). Notez aussi que tous les navigateurs ne sont pas équivalents et ne comprendront pas forcément toutes vos commandes (ou les interpréteront différemment ce qui est parfois très ennuyeux).

Un truc consiste à installer sur votre PC une version de Linux et à tester alors votre site, qui est sauvegardé dans un répertoire de votre PC sous Windows, à partir de Linux, c'est le meilleur moyen pour identifier que telle image n'apparaitra pas parce que son nom commence par une majuscule et que dans votre fichier HTML vous l'avez nommée intégralement en minuscules. Windows ne faisant pas la distinction entre majuscule et minuscule, sous Dreamweaver cette erreur ne peut être reconnue, sous Firefox ou Internet Explorer sous Windows non plus, mais sous Linux vous constaterez l'erreur et pourrez alors la corriger avant de télécharger l'ensemble de votre site chez votre hébergeur.

Notez encore que Netscape veut absolument afficher tout ce qu'il rencontre dans le code de votre fichier HTML et si par exemple vous intégrez dans votre fichier une ou deux lignes en java script faisant appel à une ressource extérieure dont vous ne disposez pas sur votre machine mais qui sera accessible sur le site web, Netscape va se planter lorsque vous allez tester le résultat de votre site en interne sur votre PC (c'est à dire hors connexion). Par contre Internet Explorer ou Firefox, dès lors que vous lui avez indiqué que vous travaillez hors connexion, ignorera tous les appels à des ressources cgi et autres qui seraient sur un site distant et vous permettra de tester tranquillement tout le reste de votre code. Notez cependant que vous ne pourrez pas tester les liens qui font appel à une url, y compris vers un répertoire de votre propre site. Essayez donc de proscrire les liens du type http://mon_site.hébergeur.com/REPERTOIRE/toto.htm mais utilisez plutôt des liens dans le style ../../REPERTOIRE/toto.htm qui marcheront aussi bien sur le site téléchargé que sur votre disque dur.

Enfin un détail que peu d'internautes connaissent : Quelle police de caractères sera utilisée sur l'ordinateur de l'internaute qui veut lire votre site?

Deux cas de figure se rencontrent :

- soit vous n'avez rien spécifié, c'est à dire que votre éditeur (tel Dreamweaver) affiche dans sa fenêtre de contrôle les mots Police par défaut. Qu'est-ce que cela signifie. En pratique deux choses. D'une part, dans Dreamweaver votre texte va exploiter la police par défaut utilisée par Windows, c'est à dire dans 95% des cas celle qui a été définie par défaut par Microsoft et qui a donc été installée comme telle lors de l'installation de votre version personnelle de Windows. Il y a fort à parier dans ce cas qu'il s'agit de la police Times New Roman en taille 12. En conséquence le texte que vous écrivez est affiché dans votre ordinateur en Times New Roman mais en taille 10 dans votre éditeur. Lorsque vous voulez visualiser sous Internet Explorer votre document vous constatez effectivement que la police affichée est bien Times mais que sa taille est supérieure à celle dans votre éditeur ce qui évidemment va changer sensiblement la présentation puisque les mots seront plus longs. On s'en aperçoit très bien quand on écrit du texte dans une cellule de tableau dont on a défini la largeur avec précision en pixels par exemple.
Mais ce qui vous importe c' est votre lecteur, est-ce la même chose pour lui? Ici encore deux cas : soit sa machine a été installée par défaut avec la police Times New Roman en taille 12 et alors son navigateur affichera la même chose que le votre, soit il a modifié ce choix initial et l'a remplacé par exemple par la police Arial et alors toute votre stratégie pour faire tenir votre texte dans une ligne du tableau sera mise à mal car la police Arial est plus large que la police Times.
Donc si vous ne précisez pas quelle police doit être employée vous ignorez celle qui sera effectivement utilisée par vos lecteurs et la présentation peut s'en ressentir. C'est effectivement le cas le plus fréquent ainsi sur le site que vous lisez actuellement ce fut le cas dans un premier temps la plupart des textes furent écrits avec la police par défaut. Aujourd'hui c'est différent et les textes de ce site sont écrits soit avec la police Arial, soit la police Comic Sans MS qui sont recommandées par les ergonomes.

- soit vous voulez absolument que l'affichage soit rigoureusement celui que vous désirez quels que soient la machine et le système d'exploitation utilisé. Dans ce cas il va falloir le spécifier ce qui est beaucoup plus contraignant, d'une part, et plus gourmand en octets, d'autre part. Les ergonomes recommandent cependant cette solution en conseillant en outre l'emploi de la police Arial qui est plus lisible (parce que sansérif) et donc moins fatigante à lire sur un écran, surtout lorsqu'il s'agit de textes de grande longueur (comme sur ce site).

- En conséquence je recommande au lecteur de ce site de modifier son choix de police par défaut en remplaçant Times soit par Arial, soit par Comic sans MS. Le résultat est spectaculaire. Comment procéder? Dans Internet Explorer vous allez dans le menu options, puis options Internet, dans le menu Général vous cliquez alors sur polices et dans la case Police de page Web vous choisissez Arial (par exemple) et dorénavant chaque fois que Windows rencontrera un texte dont la police n'est pas définie avec précision il la remplacera par Arial. Attention dans votre machine personnelle vous disposez peut-être de nombreuses polices de caractères et l'une d'entre elles, très originale, vous plait beaucoup, mais je vous déconseille de l'employer car tous les internautes n'ont pas la même machine que vous et si vous spécifiez une police qui n'existe pas dans la machine de votre lecteur ou qui n'est pas reconnue par le navigateur qu'il utilise, cette police sera alors remplacée par la police par défaut de ce navigateur et tous vos effets seront évidemment perdus et cela peut parfois rendre complètement incompréhensible la lecture de la page concernée.

les utilitaires

Il ne suffit pas de tester que le code que vous avez écrit est correct et qu'à l'affichage vous obtenez ce que vous voulez, il faut penser que vos lecteurs ne disposent pas forcément :

d'un écran de 17 pouces avec une résolution de 1024x768 en 16M de couleurs. Depuis 2003 les écrans vendus sont tous de résolution égale ou supérieure à 1024x768, mais tout le monde n'a pas changé de machine récemment. Ma dernière analyse statistique (en septembre 2013) montre que 11% des internautes disposent d'un tel écran, 11% travaillent en 1280x1024, 40% utilisent un portable en 1280x800 tandis que 28% disposent d'écrans de 20 voire 21 pouces, mais 8% sont encore en 800x600 ou sur des formats divers . Vos belles images ne seront donc pas forcément perçues dans leur totale beauté par tous si elles sont trop grandes.

d'une ligne ADSL (1/3 sont encore en bas débit) et que le temps de chargement de votre superbe fond d'écran va peut-être les dissuader de continuer à visiter votre site. Il existe des logiciels compresseurs qui vont vous permettre d'éliminer dans votre fichier source tous les codes inutiles (les multiples blancs par exemple) ce qui en réduit la taille, et donc le temps de téléchargement, sans rien changer de l'aspect que l'on verra. Dreamweaver peut nettoyer votre code HTML de ses balises vides ou redondantes

l'indicateur Dreamweaver en bas et à droite de la fenêtre d'édition

Dreamweaver possède un indicateur très utile vous précisant la taille de l'ensemble des fichiers associés à un même fichier HTML et le temps théorique de chargement de cet ensemble avec un modem à 28Kb/s (valeur par défaut). Dites vous bien que le temps alors indiqué est assez réaliste de celui qui sera effectivement nécessaire pour afficher votre page avec un modem standard c'est à dire à 56Kb/s et une ligne téléphonique normalement utilisée. Faites donc en sorte que ce temps ne dépasse pas 15 à 20s, en particulier pour les toutes premières pages de votre site, sinon vos visiteurs perdront patience et iront zapper ailleurs. Il vaut mieux couper en deux un fichier qui avec ses images associées sera trop long à charger. Ci-dessus l'image montre à sa taille réelle cet indicateur tel qu'on peut le trouver sur la figure précédente montrant la fenêtre complète de l'éditeur. Ici on peut lire que l'éditeur avait une fenêtre de 677x394 pixels. Vous pouvez d'ailleurs vérifier sur l'image globale de dreamweaver MX , que l'ensemble des fichiers associés au fichier "créer sa page perso" faisait 259K et que te temps de chargement en était de 72s avec un modem à 28Kb/s. Aujourd'hui en Europe plus de 70% des internautes disposent de l'ADSL et certains webmasters imaginent que ce n'est donc plus nécessaire de réfléchir à la taille des fichiers car le temps de chargement est fortement réduit. Ceci est une erreur pour deux raisons complémentaires. Les lignes téléphoniques ne permettent pas des transferts infinis et lorsque le nombre d'internautes connectés à une même ligne est trop important la vitesse de transfert s'écroule et aux heures de pointe il m'arrive souvent de constater des vitesses de transfert de seulement quelques dizaines de kbits/s (et même en début d'après-midi il est fréquent que la ligne soit indisponible pour cause de saturation) alors que ma ligne et mon routeur peuvent supporter en théorie plus de 12 Mbits/s. Donc réduire au maximum la taille des fichiers permet de les charger plus vite et puisqu'ils encombreront moins longtemps la ligne ils concourent à la rapidité d'ensemble du système.

Un autre indicateur sur la partie gauche permet de contrôler les éléments du code source d'un mot sélectionné. C'est particulièrement utile pour savoir si un caractère a bien été mis en indice ou en exposant, ce qu'on ne voit pas sur l'affichage direct, qu'une image est bien centrée ce qui n'est pas toujours évident ou si un titre est bien au bon format. Ainsi dans l'exemple ci-dessous on voit qu'il est au format h3, que votre texte est en retrait (blockquote) et que la fonte de caractère est définie (font) et que vous êtes dans la zone "body" c'est à dire dans le corps de votre fichier.

Un fichier HTML comporte souvent des liens multiples, s'il est long il ne sera pas inutile pour vous d'en faire une liste. Dreamweaver vous permet de vérifier que les liens internes à votre site sont fonctionnels, mais il ne vérifie pas les liens externes et ceux-ci peuvent être corrects aujourd'hui et les sites vers lesquels ils pointent être disparus ou transférés demain. La maintenance de votre site sera donc facilitée si vous avez un fichier de ces liens, et si vous testez régulièrement leur validité. Il n'est rien de plus désagréable que de découvrir sur un site un lien qui vous parait intéressant mais qui pointe sur une adresse erronée ou obsolète. Donc essayez de les maintenir à jour, je dis bien "essayez" car au rythme où les sites web apparaissent, disparaissent et changent d'hébergeurs la maintenance n'est pas une sinécure. Un utilitaire vous permet de tester tout votre site rapidement, il s'agit de Xenu téléchargeable gratuitement.

Vous trouverez à cet effet toute une série d'utilitaires sur le site de Xavier Cotton.

Pour des infos sur le HTML et la création de site la majorité des hébergeurs vous offrent des facilités, mais il s'agit souvent de procédés simplissimes destinés à un réel débutant. Orange offre un double choix pour débutants et pour internaute confirmé.

Une dernière remarque concernant le code HTML. Sous windows les caractères minuscules et majuscules sont équivalents, mais sous Unix ce n'est plus le cas et il y a une très grande probabilité pour que le serveur qui hébergera votre site tourne sous unix ou linux (Apache). Donc faites très attention à la dénomination de vos fichiers et de vos répertoires. Prenez, par exemple, la bonne habitude de nommer vos répertoires tout en majuscules (ou tout en minuscule) et les fichiers intégralement en minuscules. Et prohibez les caractères accentués dans ces noms de fichier car nombre de versions d'internet explorer ne savent pas les interpréter correctement.

télécharger son site

Vous avez fini votre mise en page, tous vos liens sont fonctionnels, vous avez sélectionné un hébergeur qui vous a ouvert un compte, il ne reste plus qu'une chose essentielle à faire c'est télécharger tous vos fichiers sur le serveur dans le répertoire qui est le votre. Pour cela vous allez utiliser la procédure FTP, mais il vous faut un logiciel pratique d'emploi. Ici encore il en existe des dizaines, choisissez le plus simple et le moins cher Filezilla que vous pouvez télécharger gratuitement à partir du site xcotton ci-dessus, dans la rubrique freeware.

Sa mise en oeuvre est intuitive. Au démarrage il vous affiche un formulaire dans lequel il faudra indiquer l'adresse de votre hébergeur (ici ce sera perso-ftp.orange.fr), le nom d'utilisateur sous lequel vous êtes enregistré et votre mot de passe (ces deux infos vous sont fournies par votre hébergeurr). Sur le côté gauche vous indiquez le nom du site. On peut se contenter de laisser par défaut site FTP si l'on a un seul site, ou mettre un nom mnémotechnique

Une fois les diverses cases remplies, on enregistre le paramétrage, on rouvre Filezilla et on clique à nouveau sur fichier et gestionnaire de sites puis sur connexion (la fois suivante il suffira de cliquer sur reconnecter).

Ensuite dès que la connexion est établie vous avez à gauche l'image de votre pc et à droite celle de votre site et il suffit de sélectionner un fichier d'un coté et de glisser la souris enfoncée de gauche à droite pour que le transfert soit effectué (attention à bien mettre en façade le bon répertoire d'arrivée quand il y en a plusieurs). Un signal sonore et un message en clair (transfer complete) vous indiquent que c'est fait. Sur le plan pratique il est aussi conseillé d'afficher la liste des fichiers rangés par date de création plutôt que par noms, car il est vraisemblable, lors d'une mise à jour de votre site, que les fichiers à télécharger seront les derniers créés.

Sur la copie ci-dessus on distingue en haut une fenêtre de suivi des opérations côté du serveur distant, le dernier message fait état du succès du listage du répertoire du site distant qui est effectivement affiché dans la fenêtre de droite. La fenêtre du bas correspond au suivi du côté de votre PC, à gauche vont s'afficher les fichiers que vous voulez transférer et il leur correspondra à droite leur point d'arrivée sur le serveur et divers indicateurs visuels vous permettent de suivre le téléchargement fichier par fichier.

Un conseil : ne téléchargez pas trente six fichiers d'un coup si vous ne disposez pas d'une connexion ADSL à grand débit sauf s'ils sont très courts car il y a fort à parier que votre ligne téléphonique n'est pas parfaite et qu'un parasite (votre voisine qui décroche son téléphone par exemple, ce qui induit souvent des problèmes de diaphonie non dramatiques en audio, mais souvent rédhibitoires en transmission de données) va entrainer un incident de téléchargement et vous ne saurez plus où vous en êtes. Vous perdrez donc moins de temps en opérant soit par fichiers unitaires ou par paquets de fichiers de quelques dizaines de Ko.

En fait le téléchargement fonctionne bien si la ligne et le récepteur sont en accord. Ainsi si vous avez un modem à 56K et que vous téléchargez via une ligne téléphonique standard vers un serveur tel

le résultat sera excellent car le serveur d'accueil est optimisé pour 56K, par contre si vous disposez d'une ligne spécialisée à fibre optique à 100Mbits/s vous allez peut-être constater avec une immense déception que les fichiers sont transmis avec des erreurs une fois sur deux, et que vous devez redémarrer le processus de téléchargement et renvoyer à nouveau les fichiers erronés. Le résultat est que vous passez alors plus de temps à envoyer vos fichiers avec une liaison spécialisée ultra rapide qu'avec une vulgaire ligne téléphonique.

Votre logiciel FTP va vous permettre aussi de renommer un fichier sur votre site distant (utile s'il y a un problème de majuscule/minuscule) ou de le transférer dans un autre répertoire (si vous ne l'avez pas téléchargé dans le bon, ce qui arrive plus souvent qu'on ne l'imagine a priori, surtout si l'on a un site avec nombre de répertoires et sous répertoires), voire de l'effacer s'il n'est plus utile ou de le récupérer (si par mégarde vous l'avez effacé dans votre propre machine).

Notez aussi que tout fichier téléchargé est enregistré avec la date et l'heure non point de votre machine mais de celle de réception. Alors pensez à vérifier la date et surtout l'heure de votre propre machine et à la mettre en coïncidence avec celle du serveur. C'est très important pour la maintenance de votre site, sinon à terme vous ne saurez plus si vous avez ou non chargé la dernière version de tel fichier que vous avez modifié plusieurs fois au cours de la semaine ou de la journée.

Quel serveur va héberger le site.

Ce n'est pas une question anodine. Il y a des dizaines de "provider" mais ils ne sont pas équivalents. Certains sont payants et d'autres gratuits, le volume qui est réservé pour votre site peut être très limité, très vaste ou même illimité. Le temps de téléchargement peut être très lent ou très rapide selon la puissance des serveurs. Mais ce qui fera la grande différence, pour vous, ce sont les services gratuits que vous rendra ou non votre hébergeur :

inscription dans les annuaires,

statistiques de fréquentation,

aide en temps réel pour la mise au point de votre site,

fourniture d'utilitaires...

et bien évidemment fiabilité du service (combien d'heures par jour, ou de jours par mois votre site est-il réellement accessible?), bande passante...Rien ne vaut un petit test préalable et comparatif. Notez bien qu'actuellement certains organismes pourtant importants présentent des troubles du comportement étonnants qui font que la disponibilité de votre site sera mise à mal un jour et parfois même deux jours par semaine ce qui est parfaitement inadmissible.

En ce qui me concerne sur ce site j'ai retenu Wanadoo devenu depuis

après une analyse de tous les paramètres listés ci-dessus. Ils sont effectivement satisfaisants chez cet hébergeur et tout particulièrement la disponibilité du site (une seule journée de maintenance en 13 années). Mais la contrepartie est qu'Orange limite à 100Mo la taille de votre site web. C'est le plus souvent suffisant, sauf si vous êtes un photographe passionné et que vous voulez faire partager nombre de photos grand format, ou si comme sur Electron mon Amour vous avez de nombreuses rubriques. Ainsi mon site web sera-t-il contraint dans quelques années de changer d'hébergeur, à moins que je cesse de l'enrichir ou qu'Orange décide d'offrir un espace disque de 1 Go sur ses serveurs!

Ci-après nous allons examiner comment faire connaitre son site.

Créer sa page web perso 1/2

quelques conseils

L'objectif visé.

Les thèmes abordés

les outils à disposition

l'éditeur HTML

les utilitaires

télécharger son site

Quel serveur va héberger le site.

	© 2000-2015 LHERBAUDIERE 10 pages à l'impression		dernière mise à jour 27 janvier 2015