Sie sind auf Seite 1von 84

Systèmes Répartis INTERNET Site Web

SITE WEB

11 octobre 2009 23242407.doc Page 1 sur 84


Systèmes Répartis INTERNET Site Web

SOMMAIRE

Chapitre 1 : Création d'un Site......................................................................................................4


Introduction...........................................................................................................................................4
1.Questions Préalables .........................................................................................................................5
2.Outils de développement .................................................................................................................12
3.Equipe ou Groupe de Travail..........................................................................................................18
Conclusion............................................................................................................................................23
Chapitre 2 : Structure d'un Site...................................................................................................25
1.Organisation locale...........................................................................................................................25
2.Organisation du lieu de publication................................................................................................26
3.Noms des fichiers..............................................................................................................................29
4.Conclusion.........................................................................................................................................30
Chapitre 3 : Architecture d'un Site..............................................................................................31
1.Découpe de l'information.................................................................................................................31
2.Structure ..........................................................................................................................................32
3.Outils de navigation..........................................................................................................................35
4.Page d'accueil....................................................................................................................................35
5.Ergonomie (ou règles de l'art).........................................................................................................37
6.Conclusion.........................................................................................................................................46
Chapitre 4 : Apprécier un Site.....................................................................................................47
1.Lignes de force .................................................................................................................................47
2.Critères de jugement .......................................................................................................................53
3.Conclusion.........................................................................................................................................57
Chapitre 5 : Publier le Site...........................................................................................................58
1.Opérations préalables .....................................................................................................................58
2.Transfert de fichiers.........................................................................................................................62
3.Site de l'hébergeur............................................................................................................................63
4.Moyens nécessaires ..........................................................................................................................67
5.Logiciel spécialisé.............................................................................................................................68
6.Editeur avancé..................................................................................................................................71
7.Assistant de publication de sites Web de l'environnement Windows...........................................78
8.Gestionnaire de Serveur Web Personnel........................................................................................80

11 octobre 2009 23242407.doc Page 2 sur 84


Systèmes Répartis INTERNET Site Web

9.Conclusion.........................................................................................................................................81
Chapitre 6 : Référencer un Site...................................................................................................82
1.Diffuser l'adresse URL du site ........................................................................................................82
2.Renseigner l'en-tête de ses Fichiers ................................................................................................82
3.Service d’hébergement.....................................................................................................................83
4.Moteurs de recherche et Sites référenceurs....................................................................................83
5.Conclusion.........................................................................................................................................84

11 octobre 2009 23242407.doc Page 3 sur 84


Systèmes Répartis INTERNET Site Web

Chapitre 1 : Création d'un Site


Introduction
Avant de se lancer à corps perdu dans la création d'un site, il faut se poser un certain nombre de
questions. Que faut-il pour créer un site Web ?
Questions préalables
Que le concepteur soit amené à réaliser un site personnel, un site vitrine d'entreprise ou un site
applicatif (application Web), il faut avant toute chose :
• Déterminer l'objectif du site, l’audience visée et donc en conséquence décider de son
contenu et de ses principaux thèmes
• Dans le cadre d’un projet, réunir une équipe volontaire aux multiples compétences, et
établir un échéancier pour toute la durée du développement ou du projet
• Réunir les outils de développement tels qu’un éditeur HTML pour l'écriture des pages
Web, un logiciel de retouche photo pour traiter les images, un logiciel de publication pour
transférer les fichiers du site sur le serveur, etc...
• Apprendre quelques techniques liées au monde du Web et débuter par quelques notions
de langage HTML
• Structurer et organiser le site, décider de son ergonomie
• Disposer de temps libre pour la réalisation ainsi que pour les mises à jour obligatoirement
fréquentes (un site est une œuvre vivante jamais achevée)
• Décider d'un nom de site, trouver un serveur pour héberger le site, avant de le publier
• Faire connaître le site (le référencer), notamment auprès des moteurs de recherche.

Plan adopté
A travers ce chapitre, une réponse préliminaire à toutes ces questions sera donnée. Pour cela, les
sujets abordés ont été regroupés en trois parties :
• Les questions préalables à la réalisation
• Les outils indispensables au développement
• Les compétences requises aussi bien pour le créateur de site personnel que pour chaque
membre de l’équipe de projet

Modules liés
Les autres chapitres de ce module entreprennent une étude plus poussée d'un certain nombre de
sujets abordés dans ce chapitre de présentation générale :
• Le deuxième chapitre apprend comment organiser physiquement un site,
11 octobre 2009 23242407.doc Page 4 sur 84
Systèmes Répartis INTERNET Site Web

• Le troisième présente les différentes architectures fonctionnelles d'un site,


• Le quatrième chapitre indique comment faire apprécier son site,
• Le cinquième est chargé de tout ce qui concerne la publication du site côté client ,
• Le sixième chapitre et le dernier présente les différents moyens de faire connaître le site
(référencement).

Toutes les notions techniques nécessaires pour développer un site sont passées en revue dans les
modules intitulés "HTML Statique" et "HTML Dynamique".

1. Questions Préalables
1.1 Objectif du site
Le contenu d'un site va dépendre de la nature du site.
Type (ou nature) du site
Le but du site et l'organisation de son développement vont dépendre du nombre de personnes
concernés par la conception du site. Aussi distingue-t-on d'emblée deux premiers types de site :
les sites personnels et les sites "professionnels" nécessitant la constitution d'un groupe aux
multiples compétences.
Les sites professionnels peuvent être déclinés en plusieurs types, fonctions de la nature du
groupe associatif, fonctions des buts avoués pour le site.
Le site d'une association loi 1901 n'est pas de même nature que celui d'une entreprise privée ou
celui d'un organisme public.
Au sein des entreprises privées, un site "vitrine" destiné à assurer la publicité du site, à attirer
les nouveaux clients, ne se présente pas comme un site purement marchand (E-commerce).
Enfin pour terminer cette première liste sommaire des types de site, parlons des sites applicatifs
interfaçant des bases de données de quelque nature que ce soit. Une entreprise peut sur son
Intranet mettre à la disposition de ses employés un site d'accès à de multiples applications et
bases de données. Un organisme d'enseignement public ou privé peut mettre en oeuvre un site
applicatif de télé-enseignement (E-Learning).
En conclusion, le type ou la nature du site peut déjà déterminer le but principal du site.

Le contenu d'un site va dépendre de l'audience visée.

Buts (ou Objectif) du site


Hormis les sites applicatifs, l'ensemble des sites du monde entier vont partager l'envie de se faire
connaître à travers le réseau Internet, comme le but d'offrir un certain nombre d'informations ou
de points de vue sur des sujets donnés. Rappelons-nous que le service Web a pour but
intrinsèque d'être un service d'informations universel, d'être la plus grosse banque de données
qui puisse exister.

11 octobre 2009 23242407.doc Page 5 sur 84


Systèmes Répartis INTERNET Site Web

Site Personnel
Les sites personnels peuvent traiter d'un thème donné (site thématique), et donc viser un public
universel. Mais ils peuvent aussi définir des rubriques qui n'intéressent que le cercle familial ou
relationnel.
Pour les sites thématiques, il faut chercher dans ses zones de compétences, qu'elles soient
professionnelles ou dans le domaine des loisirs, un sujet, un thème, une passion que l'on souhaite
faire partager. Il ne faut pas viser pas à tout prix l'expertise dans un domaine particulier. Il y a de
la place pour tous les niveaux de compétence.
L'essentiel est que le site soit de qualité.

Site d'Entreprise
Au niveau d'une entreprise, le cahier des charges détermine la nature et les véritables buts du
site. La création d'un site sur Internet relève d'une démarche de communication.
C'est un outil complémentaire d'une stratégie de communication et de prospection qui doit
répondre à un certain nombre de conditions.
Le contenu doit nécessairement aller de pair avec les objectifs du site. A-t-on le souhait d'élargir
le champ relationnel ? S'agit-il d'un site destiné à la seule diffusion d'informations ou d'un site
interactif ? Est-ce un outil pour communiquer avec les fournisseurs ? Les collaborateurs ? Les
chefs ? etc...

Audience du chapitre
Ce chapitre, dans son ensemble, donne les premières réponses aux concepteurs de site personnel
comme aux concepteurs de site d'entreprise, si le thème abordé le justifie.
De plus, ce document étant destiné aux personnels des armées, quelques passages de ce chapitre
renseigneront sur un certain nombre de mesures spécifiques à l’armée de terre.

Site Intranet des Armées


Dans le cadre de sites internes aux armées, un certain nombre de directives ont été élaborées par
le CERSIAT (Centre d'Etudes et de Réalisation des Systèmes d'Information de l'Armée de
Terre), organisme de veille technologique et de préconisation sous la tutelle de la DCTEI
(Direction Centrale des Télécommunications et de l'Informatique).

1.2 Organisation du projet


S'organiser pour développer un site implique au minimum d'établir un échéancier pour toute la
durée du développement ou du projet.
Quelle que soit la nature du site, on peut plaquer l'organisation du développement de ce site à
celui de la conduite de projet, surtout dans le cas d'un site applicatif.
En effet, la réalisation de sites professionnels demeure souvent complexe pour chacune des
étapes : conception (maquette), développement, mise en page, publication.

Site Professionnel
Ces différentes tâches peuvent être réalisées dans le cadre d'un groupe de travail.
11 octobre 2009 23242407.doc Page 6 sur 84
Systèmes Répartis INTERNET Site Web

Ce groupe conduit la création du site comme n’importe quelle conduite de projet. Il établit donc
un échéancier qu’il s’efforce de respecter. Une réunion ponctuant chaque fin d’étape du
déroulement de projet est nécessaire afin d’assurer une coordination.
Il est conseillé alors d'imposer une recette pour vérifier la conformité des travaux avec le cahier
des charges.
Il faudra également prendre en compte les opérations de maintenance et de gestion courante du
site pour le faire évoluer au quotidien.
Au cours de la phase de conception pure, le groupe établit la maquette de publication (équipe de
maquettage), ainsi que l’architecture du site (équipe de conception). La maquette du site doit
non seulement comprendre les principaux thèmes du contenu mais encore les services Internet
offerts par le site aux visiteurs (messagerie, téléchargement, forums de discussion). Dès le
départ, un membre de ce groupe peut rédiger un document de description du site (charte).
Durant la phase de développement, certains vont rédiger le contenu des pages HTML (équipe de
rédaction), alors que d’autres vont élaborer des programmes permettant de rendre le site
interactif (équipe de développement) ou préparer les fichiers multimédia qui vont être insérées
dans les pages Web (équipe de graphistes).
La troisième phase de mise en page (équipe de réalisation technique) consiste à intégrer dans le
site le travail des trois équipes précédentes, et appliquer la charte d’ergonomie définie durant la
phase de conception à l’ensemble du site (principes de navigation, style).
La dernière étape met en jeu une dernière équipe (équipe de publication) qui peut être chargée
de trouver un hébergeur, de donner un nom officiel et spécifique au site, et une fois le site publié
de le faire connaître auprès des sites référenceurs.

Site Personnel
Ce dernier n'implique que la personne elle-même. Le concepteur de site personnel doit réunir
toutes ses compétences, et développer seul son projet de site de bout en bout. Il ne dispose pour
développer son site que de son ordinateur personnel sur lequel il doit réunir tous les outils
nécessaires.

1.3 Structurer le contenu


Avant d’orienter le lecteur vers les chapitres suivants du module, donnons quelques exemples qui
prouvent la nécessité de structurer un site.

Une des règles d'or admise pour la réalisation d'un site impose que chaque page HTML ne puisse
dépasser 3 à 5 écrans, ceci pour des raisons de temps de chargement et de lisibilité. Il faudra
donc découper le contenu en pages et sous-pages (qui ne correspondront pas forcément aux
chapitres définis).

Ensuite il faudra relier ses différentes pages de façon logique afin que l'internaute puisse
naviguer avec aisance dans le site. Ceci ne présente pas de difficultés du point de vue technique,
car le langage HTML est, par essence, un langage hypertexte s'appuyant sur la technique des
liens.
Des petits repères graphiques rendront cette navigation plus intuitive pour l'internaute (notion de
barre de navigation). On prévoit généralement sur chaque page, un retour vers la page d'accueil
ou carte du site, ceci afin de venir au secours des internautes égarés ou encore à ceux (et cela
11 octobre 2009 23242407.doc Page 7 sur 84
Systèmes Répartis INTERNET Site Web

arrive plus souvent qu'on le pense) qui entrent dans le site par le biais d'une page déterminée
(résultat de recherche).
Ces liaisons permettent de définir ce qu'on appelle l'organisation logique d'un site ou
architecture, objet du troisième chapitre du même module.

A côté de l'organisation logique existe l'organisation physique ou comment ranger les fichiers
constitutifs du site.
La première organisation consiste à entasser sous la racine du site l'ensemble des fichiers
composant ce site. Cela reste simple tant que le site contient 20 à 30 fichiers. Mais à partir du
moment où le site comporte 1000 fichiers, la personne chargée de maintenir le site éprouvera
quelques difficultés.
La deuxième organisation physique possible réside dans une copie de l'organisation logique.
D'autres modèles existent, par exemple celui d’une "organisation horizontale".
Pour toutes ces raisons, il convient d'organiser le site selon deux angles de vue : le côté technique
et le côté thématique. Avant de statuer sur l’implémentation physique propre du site, le créateur
doit mettre en place sur le disque dur une arborescence séparant les fichiers constitutifs du site
(site à publier) des fichiers utilisés pour développer le site (sources).
Le chapitre intitulé "structure d'un site" est consacré à cet aspect des choses.

1.4 Ergonomie du site


L'auteur d'un site Web se voit confronté avec la forme la plus aboutie de la communication. En
effet, il s'agit de communiquer avec des mots, des couleurs, des images et d'effectuer une mise en
page de chaque document HTML du site.

Dans cette communication par essence internationale, visuelle autant que littéraire, il faudra tenir
compte des différences culturelles qui peuvent exister (même si le site ne s'adresse qu'aux
francophones).
Sobriété des mots et de la présentation graphique, concision et précision, seront des éléments
déterminants. Mais ces règles ne sont pas les seules à appliquer... Rester soi-même peut être
aussi un bon conseil. Le respect des règles et usages du Web en la matière (la fameuse
Nétiquette) sera le meilleur garant de la "mondialisation" de la communication.

Le dernier chapitre du module consacré à l'ergonomie d'un site "Armée de Terre" se révèle être
une bonne entrée en matière relativement exhaustive.

1.5 Hébergement du site


Une fois que le site est réalisé et testé, il faut chercher quel serveur va héberger le site.
Le principe de fonctionnement du service Web, à l'image de tout service offert par le réseau
Internet, est un modèle client serveur. Dans cette architecture, un ensemble de logiciels clients
joué par les navigateurs, installés sur des environnements différents (Mac, PC, UNIX), pourra se
connecter à un service d'informations offert par le serveur.

11 octobre 2009 23242407.doc Page 8 sur 84


Systèmes Répartis INTERNET Site Web

Le site sera rendu disponible aux clients grâce à l'action du serveur HTTP qui contrôle
obligatoirement les demandes des clients que sont les internautes, et les réponses qu'il renvoie
sous forme de pages Web.
Pour l'hébergement, trois choix sont offerts :
• trouver un serveur Web (ou HTTP) existant qui puisse héberger le site (exemple du
fournisseur d'accès dans le cas d'un site personnel),
• mettre en place un serveur HTTP permanent au sein de l'entreprise,
• mettre en place un serveur HTTP intermittent (le temps de la connexion, exemples d’un
serveur local de test pour le partenaire de développement ou d’un serveur personnel
limité aux amis).

Site Personnel
Le cas du site personnel correspond surtout au premier type d'hébergement. Si le concepteur de
site possède une connexion Internet, il dispose déjà d'un espace disque compris dans
l'abonnement auprès du fournisseur d'accès. Sinon, un certain nombre de sites proposent des
hébergements gratuits (ou presque), ainsi que des Cyber clubs ou Cyber cafés mais pour une
somme modique.
En ce qui concerne les ressources, un espace d'un méga octet (5Mo) est un minimum pour
réaliser quelque chose de bien à condition de ne pas être trop gourmand en images. Les sites
thématiques personnels peuvent atteindre facilement un volume de 20 à 30Mo, voire plus si ce
dernier fait appel à quelques présentations vidéos lourdes à charger. Par ailleurs, les
fournisseurs d'accès Internet proposent sans difficulté des espaces de 100Mo pour des sites
volumineux.
En plus de l'espace disque, l'internaute dispose aussi de l'adresse Internet de l'hébergeur du
genre: www.nom_du_fournisseur.com (ou .fr). L'hébergeur crée alors un répertoire personnel
portant le nom de l'internaute ou un pseudonyme choisi librement par ce dernier (si non déjà
utilisé). L'adresse URL du site est alors du genre :
• www.nom_du_fournisseur/répertoire_du_site.

Une variante de l'adresse URL peut être : nom_du_site.nom_du_fournisseur.


Dans le cas où l'internaute souhaiterait ne pas mentionner le nom de l'hébergeur dans le nom du
site, donc souhaite créer un nom qui lui est propre, il convient d'acheter ou d'obtenir gratuitement
contre une publicité présente dans le site un nom de domaine équivalent à votre site.

Site d'Entreprise
Les entreprises, en fonction de leur stratégie ou en fonction du personnel informatique qualifié
dont ils disposent, peuvent aussi bien décider du premier type d'hébergement que du deuxième.

Serveur permanent au sein de l'entreprise


Suivant la vocation du site, Intranet (réseau Internet réduit à la portion congrue de l'entreprise)
ou Internet, l'hébergement s'effectuera sur des serveurs différents au sein de l'entreprise elle-

11 octobre 2009 23242407.doc Page 9 sur 84


Systèmes Répartis INTERNET Site Web

même. Le premier sera accessible depuis l'ensemble du réseau local de l'entreprise alors que le
deuxième le sera peut-être uniquement depuis le réseau Internet.
Les besoins matériels en matière de serveur seront différents s'il s'agit d'un site "vitrine" destiné à
assurer une stratégie de communication de l'entreprise, ou d'un système d'information de type
Web.
Pour ce qui est du matériel, un simple PC doté d'un microprocesseur Pentium 133 suffit pour une
centaine de clients. Au-delà, il faut investir dans une machine plus puissante, voire une machine
de type serveur. D'autre part, les ressources mémoire du serveur varient en fonction de
l'utilisation du serveur.
Dans le cas présent, l'achat et l'installation d'un serveur restent peu onéreux (voir paragraphe 2.5
sur les serveurs).
Dans le cas d'un site vitrine ou marchand, posséder son serveur HTTP permanent est une
solution peu onéreuse si l'on possède une ligne louée.

Serveur professionnel du réseau Internet


Outre le fournisseur d'accès officiel de l'entreprise, le site peut être hébergé chez un
professionnel.
Généralement, le professionnel désire réaliser lui-même le site Web et offrira à la fois les
services de réalisation et d'hébergement. Le professionnel peut aussi prendre en charge tout
l'aspect administratif de la gestion des noms de domaines.
Le professionnel peut nous proposer, soit un hébergement sur serveur mutualisé (plusieurs sites
de plusieurs organismes sur le même serveur), soit un hébergement sur serveur dédié.

Site Intranet des Armées


Dans l'armée de terre, les seuls serveurs autorisés restent au niveau des régions ou des grands
organismes. En ce qui concerne les armées, des directives fixent les règles de nommage des sites:
• "organisme.armée.def" pour un site Intranet
• "organisme.armée.defense.gouv.fr" pour un site "vitrine" ouvert sur la Toile.

Le chapitre consacré à la publication d'un site rentre plus dans le détail sur le sujet.

1.6 Autres Services proposés


Adresse de Courrier Electronique
Une adresse électronique n'est pas à proprement parler un élément d'un site. Mais sans elle, le
site perd un complément indispensable en terme de contact, de communication, de feed-back et
autre interactivité avec les visiteurs du site.
Un site doit comporter le nom du concepteur dans le cas d'un site personnel, sinon le nom de
l'administrateur ou webmestre dans le cas d'un organisme.
Si le site est un site composite divisé en sous-sites, il est possible d'indiquer d'autres adresses
électroniques, de même que si la responsabilité rédactionnelle d'un thème du site est à la charge
d'une personne différente de celle chargée de maintenir le site.
En bref, les différents membres de l'équipe de projet d'un site peuvent se trouver mentionnés.

11 octobre 2009 23242407.doc Page 10 sur 84


Systèmes Répartis INTERNET Site Web

Des statistiques de trafic, URL référentes, mots clés référents, etc… sont proposés par le
professionnel qui peut aussi prendre en charge tout l'aspect administratif de la gestion des noms
de domaines et des changements de délégation. Les sociétés sollicitées pour l'hébergement d'un
site proposent dorénavant gratuitement ces prestations.

Des services de téléchargement de fichiers et de forums de discussion peuvent compléter le site.

1.7 Publication d'un site (Mise en ligne)


Cette procédure angoisse le plus les néophytes. En fait, c'est peut-être l'opération la plus simple
de l'histoire du site. Il s'agit d'effectuer le transfert du site depuis la machine de développement
vers la machine du fournisseur d'accès dans le cas d'un site personnel, ou vers le serveur de
l'organisme dans le cas d'un site professionnel, ou vers le site extérieur choisi pour
l'hébergement.

Le chapitre du module intitulé "publication d'un site" est consacré à cette opération technique.

1.8 Faire connaître votre site (Référencement)


Le cercle des amis étant très vite épuisé, il faut passer par les moteurs de recherche et autres sites
de référencement pour faire connaître l'œuvre à la communauté des internautes. Il suffit de
choisir un certain nombre de sites comme Yahoo, Francité, AltaVista, Nomade, etc...

Deux principales méthodes existent : soit renseigner les pages du site par l'utilisation de mots-
clés (balises META du langage HTML) au profit des moteurs de recherche, soit déclarer le site
auprès de sites de moteurs ou spécialisés dans le référencement.

Les sociétés sollicitées pour l'hébergement d'un site proposent dorénavant ces prestations.

Pour en savoir plus sur le sujet, il convient de se reporter au chapitre du même module consacré
au référencement.
Pour en savoir plus sur les balises META, il faut consulter le module HTML statique, chapitre
"balises META".

1.9 Faire des mises à jour (Maintenance)


Au contraire d'un livre, un site Internet est quelque chose de vivant... Le contenu se doit
d'évoluer.
Le courrier reçu permet de mieux cibler le public, les visiteurs peuvent effectuer telle ou telle
suggestion sur le contenu ou la présentation.
La présentation graphique vieillit quelque peu, de nouvelles techniques intéressantes
apparaissent.
Tout ceci représente de bonnes raisons pour effectuer des mises à jour régulières qui permettront
de fidéliser les visiteurs.

Dans le cas d'un site personnel, la maintenance d'un site est aisée.

11 octobre 2009 23242407.doc Page 11 sur 84


Systèmes Répartis INTERNET Site Web

Au contraire, dans le cas d'un système d'information d'entreprise reposant sur le Web, la
maintenance d'un site de 10.000 pages est plus complexe.

Site d'Entreprise
Afin de maintenir le site plus aisément, la nécessité d'écrire un document décrivant le site de A à
Z s'impose. Ce document peut s'intituler charte du site.
Entretenu par un membre de l'équipe de projet, il peut décrire :
• Le but du site
• Les principales rubriques (sous sites éventuels)
• L'audience visée
• Les acteurs ou membres de l'équipe d'élaboration puis de maintenance du site
• Les choix techniques (HTML ou..., applications ou Applets ou..., scripts, feuilles de
styles, etc...)
• Les choix d'ergonomie (arrière-plan, couleurs, texte, barres de navigation, bas de page,
etc...)

1.10 Avoir du temps et de la patience


Mais pour réaliser toutes ces opérations, il a fallu consacrer un certain temps et faire preuve
d'une certaine dose de patience.
Pour les non-initiés, faire un site peut se résumer à rédiger un article de presse ou un gros
rapport. D'ailleurs, quand on évoque le prix de réalisation d'un site, le client pousse généralement
des hauts cris.
Faire un site, c'est accoucher du contenu, veiller à une mise en page attrayante, faire et vérifier
tous les hyper liens, parfois se battre avec le langage HTML, le tester sous divers navigateurs, le
tester encore avec les différentes résolutions d'écran.

Le drame (et la richesse) de toute présentation multimédia, est que toute erreur ou faute de goût
dans l'aspect visuel dépréciera automatiquement le contenu de celle-ci.

2. Outils de développement
Quel que soit le modèle de site, le concepteur ou développeur a besoin d'un certain nombre
d'outils et d'un minimum de compétences techniques. L'un ne va pas sans l'autre.
Site personnel
Dans le cas d'un site personnel, le concepteur doit rassembler au minimum les logiciels suivants :
• Un éditeur HTML pour concevoir aisément des pages Web,
• Un navigateur pour visualiser le résultat de la conception,
• Un logiciel de retouches photos pour l'aspect multimédia,
• Un logiciel spécialisé dans le transfert de fichiers pour la publication du site, si l'éditeur
HTML ne le propose pas.

On peut rajouter un logiciel de compression de fichiers (Winzip) pour permettre à l'internaute de


télécharger des fichiers.
11 octobre 2009 23242407.doc Page 12 sur 84
Systèmes Répartis INTERNET Site Web

Site applicatif
Dans le cas plus spécifique d'un site applicatif, ou d'un site vitrine élaboré avec d'autres langages
de description que le langage HTML, une plate-forme de développement est nécessaire.
Enfin, dans le cas d'une entreprise, le choix du serveur qui va héberger le site est primordial et
délicat.
Il en est de même du serveur qui servira aux tests et à la validation du site avant publication.

2.1 Langage HTML


Le Web utilise le langage de description HTML (se référer au module "HTML statique"). Sans
lui, la réalisation de pages Web est impossible !
Les éditeurs HTML actuels évitent de taper au clavier sous Bloc-Notes (PC) toutes les balises et
autres caractères accentués. Des palettes ou barres de menus d'icônes, ainsi que des menus
textuels relativement explicites permettent au néophyte de s'affranchir la plupart du temps de la
connaissance des balises.
Néanmoins, même si le débutant possède le meilleur éditeur du moment, il doit tôt ou tard
plonger dans le code source HTML pour mettre en place des éléments non proposés par l'éditeur
ou pour solutionner des problèmes qui ne sont pas faciles à régler depuis l'écran de travail.
C'est pourquoi une bonne connaissance du langage HTML se révélera très vite indispensable.

2.2 Editeurs HTML


Les principaux éditeurs du moment sont FrontPage 2000 de Microsoft, Dreamweaver 4.0 de
Macromedia, Golive 5.0 d'Adobe et WebEditor 4 de Namo.
Les éditeurs HTML doivent concilier simplicité d'utilisation et sophistication des fonctions.
WebEditor s'illustre pour le 1er critère. Dreamweaver et Golive s'affrontent pour le second.
Frontpage joue la carte de l'équilibre.
Outils de création de pages et de sites web, les éditeurs HTML (HyperText Markup Language)
doivent s'adapter à de multiples contraintes. La plus exigeante est peut-être de concilier
performances et ergonomie, surtout lorsqu'il s'agit de s'adresser à un large éventail de
concepteurs web, du néophyte au professionnel. Cet exercice est d'autant plus délicat que pour
construire un site vitrine attrayant et interactif, le langage HTML, de par ses limites, est tenu de
cohabiter chaque jour un peu plus avec d'autres langages, XML, DHTML, XHTML, sans
omettre les JavaScript et les ASP (Active Server Page).

Etude comparative des quatre éditeurs (synthèse)


Outil ergonomique pour la prise en main, WebEditor se révèle le plus limité. Si les bibliothèques
mises à disposition du concepteur sont nombreuses, l'éditeur se montre modeste en matière de
développement de pages interactives (pas d'éditeur JavaScript ni de débogueur), en insertion de
documents et en publication. WebEditor parait donc bien adapté à la conception de sites simples.
Un niveau au-dessus, FrontPage s'est enrichi dans la version 2000. L'éditeur a porté ses efforts
sur le placement des objets, y compris par couches (layer content), les liens avec sa base Access
ou encore sur les niveaux d'approbation lors de travaux de groupe. On peut cependant lui
reprocher d'avoir fait l'impasse sur le format PSD (Photoshop d'Adobe) avec support de calques,
pour l'insertion d'images, ou encore sur le format SVG, pour traiter les images vectorielles.
Autre caractéristique, Microsoft n'a pas estimé nécessaire de prendre en compte les spécificités
11 octobre 2009 23242407.doc Page 13 sur 84
Systèmes Répartis INTERNET Site Web

du protocole WebDAV (Web Distributed Authoring and Versioning) pour le travail d'équipe sur
des serveurs distants, préférant son offre FrontPage Server Extensions.
Avec GoLive et Dreamweaver, on retrouve des valeurs sûres du marché qui poursuivent leur
évolution. Adobe et Macromedia renforcent la richesse fonctionnelle de leurs outils et offrent
une meilleure intégration à leurs gammes respectives. Dreamweaver conserve un avantage pour
les outils de publication, les outils de productivité et la création de pages interactives tandis que
GoLive bénéficie d'une intégration poussée à Photoshop ce qui lui permet de faire un sans faute
sur ses capacités d'insertion de documents. Mais pour l'un comme pour l'autre, l'investissement
temps ne sera pas négligeable...

2.3 Navigateurs
Les trois navigateurs les plus couramment utilisés sont Internet Explorer 5.5 de Microsoft (75%
du marché) et Communicator 6.0 de Netscape (20%), ou encore Opéra 5.11.
La première chose à savoir est qu'il existe plusieurs types de navigateurs qui eux-mêmes existent
en différentes versions. Ces navigateurs (browser en anglais) interprètent les pages HTML de
façon légèrement différente. Toute la difficulté de la création d'un site web se situe dans ces
différences d'interprétation. Il est difficile de réaliser un site compatible avec tous les
navigateurs. En tant qu'internaute averti, il faut se procurer la version la plus récente du
navigateur favori sachant qu'ils sont tous gratuits.
Pour Internet Explorer, l'utilisation d'une version 4 ou 5 n'amène pas de problème d'affichage sur
l'ensemble des pages. Il en est de même de Netscape 4.5, même si ce dernier interprète encore
mal certains des composants qui peuvent être utilisés dans une page dynamique.
Si une version antérieure à celles citées ci-dessus est utilisée, la plupart des sites visités ne
doivent pas s'afficher correctement, par conséquent des informations sûrement précieuses seront
perdus.
La nouvelle version du navigateur de Netscape, baptisée Netscape 6, est bien plus qu'un simple
navigateur. Elle dispose, outre les programmes de courriel, de newsgroups et d'éditeur HTML
déjà présents dans les versions précédentes, d'une messagerie instantanée, compatible avec AOL
Instant Messenger. Ouverte sur les standards, cette nouvelle mouture reconnaît notamment les
formats HTML 4.0 et XML 1.0.
Le « troisième navigateur », Opera 5.11, apprécié pour sa rapidité d'affichage, a de moins en
moins à envier à ses principaux concurrents (Internet Explorer et Netscape). L'utilisateur
regrettera toutefois la gestion problématique de JavaScript, et celle, non moins aléatoire, des
plug-in, tant au niveau de l'installation que de l'utilisation.

Si le créateur néophyte ne veut pas télécharger la dernière version du navigateur, alors il lui reste
la possibilité d’acheter un magazine de presse Internet pour PC ou MAC; les dernières versions
des navigateurs y sont presque toujours.

Sans se lancer dans la comparaison des deux navigateurs les plus prisés au niveau de leurs
capacités d’interprétation, ne sachant pas d’avance quels navigateurs utilisent les visiteurs du
site, il convient de tester le site en visualisant le résultat à l'aide d'un exemplaire de chaque.
En effet, certaines balises du langage HTML ou techniques sont mieux interprétées par l'un ou
l'autre des deux navigateurs. En général, Internet Explorer interprète mieux et plus.
11 octobre 2009 23242407.doc Page 14 sur 84
Systèmes Répartis INTERNET Site Web

2.3 Logiciel et connaissances graphiques


Il n'est pas nécessaire d'être un infographiste de choc pour faire un site mais un minimum de
connaissances dans le traitement de l'image sera utile.

Les formats d'images acceptés sont des fichiers ayant pour extension gif (256 couleurs pour les
graphiques en général), jpeg (ou jpg pour les photos pures) ou png. La récupération d'images
sous un autre format impose la conversion de ces dernières, opération possible avec ce type de
logiciel.
L'insertion d'une image dans une page impose de gérer les dimensions en pixels de cette image.
Il sera peut-être nécessaire de redimensionner cette dernière avant insertion. De même, peut-être
que seule une portion congrue de cette image nous intéresse : il s'agit alors de la recadrer à l'aide
de l'outil adéquat. Sans parler d'effets visuels tels que des flous artistiques, la transparence du
fond d'une image par rapport à la couleur d'arrière-plan est souvent recherchée. De plus, la
superposition d'images et de textes (calques) est un procédé souvent utilisé dans l'édition de
magazines.
Pour un site vitrine ou personnel, la bonne connaissance d'un logiciel comme Paint Shop Pro
(Jasc) semble une bonne introduction en matière de traitement graphique. Pour des sites
professionnels, des logiciels comme Photoshop 6.0 d'Adobe ou Illustrator 9.0 de CorelDraw
sont nécessaires. Les éditeurs HTML comme Dreamweaver propose leur propre solution :
FireWorks.

Enfin, il n'est pas nécessaire d'être un employé de maison d'édition pour élaborer une bonne mise
en page (éviter les vides, éviter la surabondance d'informations). Il n'est pas nécessaire d'être un
artiste en dessin d'art pour connaître la complémentarité et l'équilibre des couleurs entre elles.

2.4 Logiciel de publication


Si l'on utilise des logiciels reposant sur l'emploi du protocole FTP, plusieurs moyens sont à la
disposition du concepteur de site pour transférer le site vers le serveur de l’hébergeur :
• Un logiciel spécialisé dans le transfert comme CuteFtp ou WsFtp95Le.
• Quel que soit l'environnement de travail UNIX ou Windows, effectuer le transfert en
mode commande depuis respectivement une fenêtre terminale ou une fenêtre MS-DOS.
o Ce mode reste réservé aux informaticiens.
• Un éditeur avancé de pages HTML du style Dreamweaver ou FrontPage qui possède
désormais des fonctions de publication de sites.

2.4 Plates-Formes de développement


Pour créer des sites statiques (pages textes sans script), les éditeurs HTML du marché sont
amplement suffisants. Réaliser un premier site sans connaître les langages Javascript ou VBscript
fait effectivement partie du possible.
La consultation du module "HTML dynamique" permet au néophyte d'insérer dans ces pages
quelques éléments d'interactivité récupérés sur la Toile sans vraiment de connaissances
techniques.
11 octobre 2009 23242407.doc Page 15 sur 84
Systèmes Répartis INTERNET Site Web

En outre, un simple éditeur HTML permet d'insérer "à la main" dans vos pages des commandes
ASP ou des applets Java. Mais les phases de test et de déboguage risquent d'être longues et
difficiles. Ces éditeurs n'offrent pas, à proprement parler, d'interface de développement. Il est
impossible de voir ce que les pages dynamiques donnent réellement tant qu'elles ne seront pas
chargées sur un serveur.
Si l'objectif est de réaliser des sites puissants et dynamiques, ou si l’on veut pouvoir employer
presque n'importe quel langage ou composant Internet afin d'optimiser au mieux le site, l'emploi
d'une véritable plate-forme de développement est nécessaire. Le choix doit se faire en fonction
des composants et langages que l'on veut utiliser. Mais il faut rappeler une règle essentielle : un
projet ne se définit pas en fonction des éléments utilisés. Au contraire, les outils doivent être
choisis en fonction de ces besoins.

Partant donc de ce principe, et après avoir peaufiné l'étude réelle des besoins, quels langages, de
script ou de développement, allons-nous utiliser ? Quels composants allons-nous employer ?
Quels types d'animations souhaitons-nous incorporer dans nos pages ? Toutes les plates-formes
gèrent, bien entendu, la simple création de pages HTML. Certaines vont permettre en plus
d'incorporer facilement du DHTML, des CSS, du gif animé. D'autres encore peuvent générer de
l'ASP, du JSP, du CFML. N'oublions pas les langages tels que PHP, Cold Fusion ou Java. Si l'on
veut créer des sites à la fois de bonne facture graphique, rapides d'accès et robustes, l'on se doit
d'incorporer plusieurs de ces composants et d'utiliser au moins l'un des langages précités.
Enfin, la plate-forme idéale doit permettre une gestion aisée d'éléments de bases de données, que
ce soit du SQL, de l'Access ou toute autre base de données à la norme ODBC.
Les outils répondants à tous ces critères sont déjà moins nombreux, surtout si l'on demande en
plus de faire du "drag and drop" de composants ou d'éléments de bases de données. Deux
produits bien présents sur le marché émergent de la masse : Visual Interdev 6.0 incorporé dans la
suite Visual Studio 6.0 de Microsoft, et Dreamweaver Ultradev, de Macromédia.
D'autres produits, néanmoins, restent intéressants et attractifs en terme de prix, si les besoins sont
à la fois plus limités et spécifiques. ASPEdit, notamment, peut constituer un excellent choix si la
préoccupation principale est l'incorporation d'ASP.
Visual InterDev constituera un très bon choix si l'objectif principal est le développement de sites
pour des serveurs Microsoft avec la technologie ASP. Visual InterDev peut aussi séduire le
développeur expert s'il s'en sert de plate-forme de développement de base robuste. Ces points
faibles sont son manque d'ouverture vers les autres produits à la norme Internet, et aussi le fait
qu'il soit intégré dans une suite de développement totalement orientée développeur. Cette
absence de modularité dans l'achat peut véritablement constituer un frein à son acquisition.
UltraDev est réellement un outil de conception intégré. Ses principaux avantages sont sans nul
doute la possibilité de publier des bases de données dynamiques dans l'interface Dreamweaver,
et surtout sa fonction de visualisation permettant de voir en réel le résultat des codes de pages, y
compris pour du JSP. On peut néanmoins regretter un manque de simplicité en ce qui concerne le
processus de liaison dynamique, et l'interface « outil de bases de données » peut rebuter des non-
programmeurs. Néanmoins, UltraDev prédomine très nettement du point de vue de l'ouverture à
la norme Internet et des fonctions de visualisation temps réel (assez limitées avec Visual
InterDev).

11 octobre 2009 23242407.doc Page 16 sur 84


Systèmes Répartis INTERNET Site Web

2.5 Serveurs Web


Enfin, que l’on soit dans le cas d’un site personnel insérant un minuscule compteur de visites sur
la page d'accueil ou dans le cas d’un site plus professionnel faisant appel à des pages dynamiques
(ASP ou PHP), la plate-forme de développement ne serait pas complète sans la présence et
l'installation d'un serveur web pour tester le site en local.

Site Personnel
Dans l'environnement PC, le premier serveur disponible est PWS (Personal Web Server de
Microsoft), alors que l'environnement UNIX propose le serveur Apache d'Apache Software
Foundation.
L'étude de ces serveurs est présentée dans le module "Serveurs".

Site d'Entreprise
En ce qui concerne l'Intranet d'une entreprise, ou un système d'information Web, d'autres
serveurs sont à envisager pour tester ou publier le site.
Les plus connus restent encore le serveur Apache et « Internet Information Server » (version
professionnelle de PWS énoncé plus haut, version 5.0 fourni en standard avec Microsoft
Windows 2000 Advanced Server). Mais d'autres concurrents se positionnent en candidats de
deuxième plan : Netscape Server Enterprise, Web Server Enterprise Edition 4.1 de iPlanet-
Solaris 8.
Quelques tableaux détaillées dans le module "Serveurs Web" permettront aux décideurs
d'effectuer leur choix.
En conclusion, pour un Intranet léger et pour un rapport performances / prix imbattable (puisque
gratuit), Apache se place en première position. Le serveur iPlanet coûte 1 677 € HT, alors que
l'acquisition de IIS5.0 nécessite au préalable celle du système d'exploitation : d'où un coût de
3 964 € HT. Pour un site sécurisé, il vaut mieux choisir iPlanet.

Dans le cas du serveur de publication d'entreprise, il s'agit de prévoir tout un environnement de


fonctionnement 24h/24 : local climatisé, télésurveillance par une présence technique
permanente pendant les heures ouvrables, bases de données installées sur des serveurs séparés
équipés d'une technologie Raid (reconstruction automatique des données en cas de défaillance
des disques) et alimentation sécurisée (double alimentation + courant secouru), sauvegardes
régulières stockées à l'extérieur du local, protection anti-virus activée en permanence.

2.6 Migration HTML vers XML


Le passage du langage HTML au langage XHTML ou XML nécessite d'autres logiciels pour
l'environnement de développement.
La création d'un site vitrine ou applicatif en langage XML relève d'une démarche professionnelle
de haute technicité.
Ces deux contextes ne trouveront aucune suite dans ce module et feront l’objet d’un prochain
module.

11 octobre 2009 23242407.doc Page 17 sur 84


Systèmes Répartis INTERNET Site Web

3. Equipe ou Groupe de Travail


Les membres de l'équipe chargée du site Web doivent être plus que des experts de leur propre
domaine. Ils doivent aussi comprendre la façon dont leur contribution s'insère dans la vision
globale du projet.
La liste qui suit n'a pour but que d'attirer l'attention sur les qualifications dont on peut avoir
besoin au sein de l'équipe. En fonction du projet et de la situation, il est évident que l'on peut
mettre en place une équipe très différente, les informations suivantes n'ayant qu'une valeur
indicative.

3.1 Responsable de production


Pour les projets de petite ou de moyenne envergure, on ne trouve en général qu'un responsable de
production. Il supervise la création des pages ainsi que leur imbrication, et il veille au respect des
objectifs en matière d'interactivité et de richesse au niveau des fonctionnalités. Il donne des
conseils et émet des critiques concernant le sens du message, l'aspect des graphismes et le niveau
d'interactivité apporté par les scripts par rapport au reste du contenu.
Lorsque le projet est important (mise en place d'un ou de plusieurs sites web pour une grande
entreprise, une administration ou tout organisme comparable), il est fréquent de trouver un
chargé de production pour la partie multimédia, un autre pour le code (scripts, pages ASP,
ActiveX, etc.), un pour le graphisme et ainsi de suite.

Il n'y a pas à proprement parler de qualification qui prédispose à assumer la fonction de chargé
de production d'un site web. Tout au plus, faut-il remarquer que sa préoccupation première sera
de savoir comment implémenter un élément donné plutôt que de s'interroger sur ce qu'il faut
implémenter. Par conséquent, le chargé de production devra avoir des connaissances reconnues
dans plusieurs des disciplines suivantes :

• Etude et réalisation d'un site web, en incluant la configuration du serveur, la planification


des opérations, la gestion des versions et des procédures de validation.
Il peut en outre lui être utile d'avoir des connaissances dans le domaine de la
conception de scripts ainsi que dans le domaine de l'administration de serveurs.
• Maîtrise du contenu des pages web, de leur présentation et de leur organisation pour
constituer un ensemble homogène d'informations.

• Connaissance des stratégies de réalisation et des modèles d'enchaînement des opérations


ainsi qu'une certaine habileté à déterminer la meilleure stratégie à adopter pour réaliser un
projet donné.

3.2 Administrateur de Site Web (Webmaster)


Il s'agit ici de l'administrateur du serveur qui va héberger le site définitif, ou (et) mettre en place
un serveur de test durant la période de test et de validation du site. Dans le cadre du projet, il peut
être le seul technicien disponible qui va effectivement et techniquement tester le site.

11 octobre 2009 23242407.doc Page 18 sur 84


Systèmes Répartis INTERNET Site Web

Dans une entreprise de dimension moyenne, cet administrateur peut aussi bien gérer le serveur
Intranet abritant le service d'informations interne à l'entreprise que le serveur Internet destiné à
héberger les sites vitrines de l'entreprise.
Un site Web complet met en jeu les autres services disponibles du réseau Internet :
téléchargement, messagerie, annuaire, forums de discussion. La même personne, selon ses
compétences, peut gérer l'ensemble.

Les charges et compétences attendus d'un tel personnel l'amène à :


• Assurer l'administration, la gestion et l'assistance des serveurs Web et de leurs applications,
incluant le contrôle du trafic, l'installation et la configuration des logiciels, ainsi que la mise
en place de nouveaux serveurs.
• Assurer la gestion permanente du site et la configuration des serveurs pour en assurer la
qualité et la fiabilité. Il établit et communique les standards de contrôle des coûts et assure
l'évolution des applications.
• Installer, configurer et régler des logiciels d'application Web.
• Utiliser le langage HTML.
• Sécuriser les droits et configure les modifications nécessaires à des transactions sécurisées.
• Etablir et évaluer des traitements pour des caractéristiques de nouveaux serveurs dans un
contexte commercial.

Pour assurer pleinement sa charge, il doit posséder, de plus, une expérience en :


• Planification et gestion de projet.
• Sauvegarde, restauration et exploitation de données.
• Réseaux, sécurité et Web.

3.3 Concepteur de sites Web


D'autres postes peuvent être associés à ce titre : Web designer, Ingénieur d'étude web. Dans
les entreprises utilisatrices, ce poste varie considérablement en fonction de la taille de la
structure, de la nature et des objectifs alloués au site Web. Les start-up et les PME rechercheront
davantage des personnes polyvalentes, capables de prendre en charge tous les aspects de la
conception du site, allant du cahier des charges à la réalisation graphique en passant par
l'architecture technique, l'organisation du contenu, voire même l'intégration au système
d'information, le marketing (référencement, affiliation) et la mise en exploitation.
Dans les sociétés de plus grande taille, ces tâches sont compartimentées: on parle moins de
«concepteur de site web» que de consultant, d'architecte ou de web designer, chacun ayant alors
son registre d'intervention spécifique.
Dans les SSII ou chez les «web architects», le concepteur de sites Web est le plus souvent l'un
des membres d'une équipe projet pluridisciplinaire (consultant, graphiste, marketeur ou
informaticien), travaillant simultanément sur différents projets et progressant de façon itérative
avec les clients (durée moyenne d'un projet: 2 à 3 mois).

Ces missions traditionnelles sont :

11 octobre 2009 23242407.doc Page 19 sur 84


Systèmes Répartis INTERNET Site Web

• Offrir des solutions web adaptées au besoin du client


• Scénarisation et organisation du contenu du site
• Construction de l'architecture technique du site
• Réalisation et intégration d'éléments graphiques, d'animations visuelles et sonores

Les compétences requises en matière de savoir-faire sont à la fois d'ordre technologique (1) et
générale (2) :
1. Solide culture informatique et télécoms
Maîtrise des langages HTML, DHTML, Java, JavaScript, SQL, C/C++
Graphisme : connaissance des incontournables outils du marché (Adobe Photoshop,... )
Développement : connaissance de IIS/ASP, JBuilder, WebDB,...
Maîtrise du marketing en ligne et de la communication
2. Bonne compréhension des enjeux de l'entreprise et des besoins du client (externe ou
maître d'ouvrage interne)
Ergonomie, interactivité et interface Homme/Machine
Notions de QoS délivrée à l'utilisateur
Sens artistique
Notions de business plan

3.4 Editeur
Il contribue à maintenir la cohésion du site du point de vue de l'information. À ce titre, il
supervise la création des textes, depuis le choix des sujets jusqu'à la relecture, la correction, etc.
Parfois, il est aussi chargé de faire le même travail au niveau de certaines séquences multimédia.
Une de ses principales attributions consiste à fixer un calendrier de publication, calendrier à
faire respecter. Voici quelques-unes des qualités que cette fonction requiert :
• L'attention au détail.
Dernier à relire un document, puisqu'il donne son aval pour la publication en
ligne, l'éditeur est celui qui doit voir ce que personne d'autre n'a vu.
• La compréhension du ton général que doit adopter le site.
C'est à lui que revient la responsabilité de guider le travail des rédacteurs et des
réalisateurs des séquences multimédias.
• La connaissance des procédures et des étapes qui s'effectuent en coulisse.
• La bonne maîtrise des subtilités juridiques régissant les marques déposées et les droits
d'auteur.
• Une grande maîtrise de soi pour faire face aux télescopages de calendrier, aux
dépassements de date de remise, etc…

3.5 Rédacteur
A côté de l'indispensable connaissance technique, les rédacteurs doivent être en mesure de
produire des textes en respectant les règles élémentaires de l'écriture : orthographe, grammaire,
11 octobre 2009 23242407.doc Page 20 sur 84
Systèmes Répartis INTERNET Site Web

terminologie appropriée, sens du style, etc. Il peut paraître souhaitable que les rédacteurs aient
une expérience du langage HTML, mais c'est aujourd'hui de moins en moins nécessaire, compte
tenu de la simplicité d'emploi des logiciels d'édition.
De tous les membres de l'équipe qu'il faudra recruter, les rédacteurs sont en général les seuls à
venir d'autres services de l'entreprise. Il est évidemment possible d'avoir recours à des
collaborations ponctuelles (en accord avec le chef de service de l'intervenant) de réutiliser tout ou
partie des documents préexistants, dont la publication aura été expressément autorisée.

3.6 Programmeur
C'est à lui qu'échoit la lourde responsabilité d'apporter de l'interactivité au site web. Il devra donc
concevoir et déboguer des scripts, réutiliser des composants ActiveX, concevoir et tester des
pages ASP, etc. Pour cela, il doit impérativement maîtriser un large éventail de techniques de
programmation, parmi lesquelles :
• Le langage HTML, des langages de scripts ASP (ou PHP).
• Le sens de l'organisation pour prévoir les besoins du site en éléments programmés et
rendre ces derniers opérationnels à temps.
• La capacité à développer, mettre au point, déboguer et rationaliser de scripts autant que
des applications web plus sophistiquées.
• La compréhension des différents niveaux d'interactivité pour être capable de déterminer
celui qui sera le plus adapté au but poursuivi.
• L'écriture de procédures permettant d'identifier le type de logiciel de consultation utilisé
par le visiteur pour retourner un contenu pertinent en fonction de ses possibilités.
• Une certaine familiarité avec les objets ActiveX et autres logiciels fonctionnant sur les
clients web, pour ajouter de l'interactivité et les doter de capacités de restitution de
séquences multimédia.

Si, en outre, les toutes dernières technologies de l'information attirent le chef d'équipe, il peut
être indispensable de recruter un programmeur connaissant les nouveaux standards DHTML et
XML (Extensible HTML), ainsi que les structures logicielles informationnelles permettant de
définir le contenu d'une chaîne d'information.

3.7 Infographiste
La tâche de l'infographiste ne consiste pas seulement à fabriquer des images pour le site web,
puisqu'il devra souvent intervenir dans la création ou la production de séquences sonores ou
vidéo. Bien sûr, il doit comprendre les différences qui existent entre l'imagerie numérique
destinée aux supports imprimés et l'infographie d'un site accessible en ligne. Un bon artiste doit
savoir comment créer des images saisissantes qui pourront être téléchargées sur Internet en un
temps record. Voici un rapide résumé des capacités souhaitables :
• Une bonne connaissance des stations graphiques les plus performantes.
• Un sens artistique développé.
• La capacité de savoir trancher entre l'apparence d'une image (qualité, dimensions) et la
bande passante (poids en Ko) qui passe par celle des formats graphiques.
11 octobre 2009 23242407.doc Page 21 sur 84
Systèmes Répartis INTERNET Site Web

• La maîtrise de la technologie des feuilles de style.

Remarque :
La bande passante est le volume de données pouvant circuler en une seconde entre deux
ordinateurs. Ce peut être au sein d'un réseau local d'entreprise (LAN) ou sur un réseau de
transmission à longue distance (WAN) tel qu'Internet. La bande passante revêt une importance
cruciale puisqu'elle détermine le temps que les visiteurs vont passer à attendre que les pages web
se chargent.

3.8 Expert en technologie multimedia


Les autres postes analogues sont : Ingénieur multimédia, Web designer et Ergonome.
Depuis quelques années, Internet et la multiplication des sites Web ont contribué à faire
reconnaître l'importance de ce métier, même si l'environnement technologique y est - pour
l'instant - moins riche qu'en «off line». De surcroît, l'avènement du numérique, de la télévision
interactive et des WebTV (avec la diffusion temps réel sur Internet) ajoutent de la complexité
technique et des possibilités ergonomiques inexplorées, que l'expert en technologie multimédia
s'empressera de maîtriser puis d'utiliser. Jusqu'alors un peu isolé - et donc seul responsable des
choix engagés au nom de son entreprise (ou de son client) en matière de standards, de formats et
de normes - l'expert multimédia bénéficie désormais de méthodes et d'outils de plus en plus
standardisés. En externe, il voit sa tâche un peu allégée avec la création de nombreuses "web
agencies" et autres "web architects" qui «industrialisent» le processus de création. Notre expert
se trouve soutenu par des équipes projet regroupant des expertises connexes aux siennes et
auxquelles il est systématiquement associé. En interne, l'expert multimédia intervient non
seulement sur le contenant (la «machinerie informatique et communication» et ses performances)
mais aussi sur le contenu. Il a également une responsabilité pour tout ce qui est de la bonne
utilisation du serveur et des applications multimédia, de leur ergonomie, de leur maintenance et
de la procédure de mise à jour.

Ce type de métier est chargé des missions suivantes :


• Conception de l'architecture d'un système multimédia -sur le Web, sur un serveur
Intranet, sur CD-ROM ou sur une cartouche de jeu vidéo - à partir des spécifications
(topologie, performances, contraintes fonctionnelles, graphismes ... )
• Conseil (sur l'intégration des aspects techniques, ergonomiques et fonctionnels) aux
éditeurs de produits multimédia et assistance aux équipes de développement
• Pilotage du déploiement et de la mise en route du système multimédia
• Veille technologique

Pour assurer ces fonctions, le personnel est censé posséder les qualifications suivantes :

Savoir-faire technologiques
• Culture approfondie de toutes les technologies multimédia et de tous les vecteurs de
diffusion
• Conception, modélisation des serveurs multimédias, maîtrise des langages et outils
spécifiques de développement et de mise au point des applications
11 octobre 2009 23242407.doc Page 22 sur 84
Systèmes Répartis INTERNET Site Web

• Environnement d'exploitation
• Ergonomie
• Vision et compréhension des évolutions technologiques

Savoir-faire généraux
• Compréhension de l'environnement technologique de l'entreprise et de sa politique de
communication
• Connaissances des besoins des directions fonctionnelles, opérationnelles et des
utilisateurs
• Technique de conduite de projet, de management d'équipes et d'animation
• Compréhension des mécanismes clés de l'ergonomie visuelle, auditive, cognitive et
gestuelle

3.9 Technicien chargé des essais


Si le site web est important et complexe, le concours d'un technicien chargé d'effectuer les essais
peut s'avérer indispensable, voire, dans certains cas, celui d'une véritable équipe de tests.
S'agissant des petits sites, le producteur et le technicien du site doivent être capables d'assurer
conjointement cette fonction. Compte tenu de l'étendue de sa mission, le technicien chargé des
essais doit avoir un certain nombre de compétences en commun avec le développeur dans les
domaines suivants :
• Les procédures de tests et les stratégies de déploiement des nouveaux projets et des
nouvelles technologies.
• Les systèmes d'exploitation, ainsi que l'administration des serveurs.
• Les techniques de mise en réseau associées à Internet et aux Intranets, telles que le
routage, les coupe-feux et le protocole TCP/IP, mais aussi des technologies aussi
poussées que le clustering.
• Le langage HTML, les pages de scripts ASP, JavaScript ou VBScript, les contrôles OCX
et, plus généralement, les dernières technologies de programmes associées à Internet et au
World Wide Web.
• La sécurité des réseaux et les procédures de sauvegarde des systèmes.

3.10 Chaîne décisionnelle


Dès lors que l'équipe a été constituée, il est important de définir les responsabilités de chacun
concernant les tâches à accomplir pour faire fonctionner le site. En fixant les règles qui
déterminent la charge de travail de chaque membre de l'équipe et le calendrier d'enchaînement
des opérations, on s'assure toutes les chances de succès.

Conclusion
En bref, créer un site n’est pas une mince affaire.
11 octobre 2009 23242407.doc Page 23 sur 84
Systèmes Répartis INTERNET Site Web

Comme pour tout projet de publication, il faut être certain d’avoir quelque chose à communiquer,
autant en éléments textuels que visuels.
Comme pour tout projet, il faut réunir la bonne équipe, rassembler les moyens, établir un
calendrier raisonnable, sans précipitation aucune.
Enfin, si les techniques invoquées dans ce chapitre sont étrangères au lecteur, il lui est fortement
conseillé de s’initier au monde du Web avant de vouloir créer.
Les modules sur le langage HTML sont à connaître, ainsi qu’un certain nombre de généralités
sur le réseau Internet présent dans le module « Services Internet ».

11 octobre 2009 23242407.doc Page 24 sur 84


Systèmes Répartis INTERNET Site Web

Chapitre 2 : Structure d'un Site


Un site Web est un ensemble de fichiers écrits en langage HTML, accompagnés non seulement
de fichiers multimédia tels que les fichiers images, son, ou vidéos, mais aussi de fichiers plus
techniques tels que des fichiers de scripts, des applettes Java, etc...
Ces divers fichiers s'appellent les uns les autres grâce à des liens hypertextes.
Tous ces fichiers doivent être répartis dans une arborescence d'autant plus développée qu'ils sont
nombreux.

Dans la suite du chapitre, les termes d'arborescence, ou d'organisation physique, ou de structure


du site vont être employés.
Il faut distinguer cette organisation de l'organisation logique ou fonctionnelle du site reflétant la
cartographie du site ou la cartographie des liens.

Le concepteur de site peut choisir selon des critères donnés, soit de faire coïncider les deux types
d'organisation, soit de les différencier afin par exemple de faciliter la mise à jour ou la
maintenance du site.

Mais avant d'étudier la structure physique du site tel qu'il sera publié, voyons quelle structure le
développeur peut utiliser en local sur sa station.

1. Organisation locale
L'auteur du document préconise une organisation spécifique pour chaque site Web à élaborer.

En premier lieu, il convient de créer un répertoire portant le nom du site pour le distinguer des
autres sites que l'on peut accueillir dans son répertoire de données.
Dessous le répertoire créé ci-dessus, l'auteur conseille de créer à leur tour deux sous-répertoires
qui vont accueillir respectivement le site Web en cours de développement et les fichiers sources
utilisés pour concevoir ce site.

Prenons l'exemple d'un site ayant pour thème la musique du blues:


• Blues
o www.monblues.fr
o sources

Répertoire source
Le répertoire source peut être organisé à son tour. En premier lieu, il convient de rassembler les
images et images animées que l'on souhaite incorporer sous un répertoire spécifique, d'en faire de
même pour les applets Java ou autres techniques importées.
Pour un site personnel, il peut comporter autant de répertoires que de sites dont on s'inspire.
Dans le cadre d'un travail de groupe, il est à souhaiter que l'intégrateur des différentes sources
mette en place un répertoire par membre du groupe.

11 octobre 2009 23242407.doc Page 25 sur 84


Systèmes Répartis INTERNET Site Web

Répertoires de développement et de publication


Toujours sous le répertoire général, le développeur peut mettre en place un répertoire de
développement où il effectue les différents essais et un répertoire de publication abritant la
version définitive destinée à être publié.
Dans le cadre d'un travail de groupe, le concepteur peut être amené à effectuer plusieurs
propositions, et donc par voie de conséquence démultiplier le nombre de sous répertoires d'essai.
Par précaution, il peut aussi sauvegarder les différentes versions du site.

Dans le cas de la portabilité d'un site quelles que soient les résolutions d'écran, le concepteur doit
créer autant de répertoires que de résolutions autorisées.

Récapitulons en reprenant l'exemple du site précédent:


• Blues
o essai
o publication ou www.monblues.fr
o sources
 images
 site-source1

Comme le montre l'exemple, si le concepteur a déjà négocié la publication du site auprès d'un
fournisseur de noms de domaine, le site de publication peut d'ores et déjà prendre ce nom.

Les deux répertoires essai et publication doivent présenter la même organisation physique,
organisation exposée dans la suite du chapitre.
Au fur et à mesure de l'utilisation de tel ou tel fichier source, l'auteur préconise de dupliquer ce
dernier sous la structure mise en place pour la publication.

2. Organisation du lieu de publication


Le véritable lieu de publication de l'hébergeur doit être une copie conforme du site local situé
sous le répertoire de publication.
Examinons maintenant les différentes organisations possibles, que ce soit en local ou chez
l'hébergeur.

2.1 Site simple


Si le site n'est composé que d'un nombre restreint de fichiers, ils peuvent tous être stockés
directement dans le répertoire attribué par le fournisseur d'hébergement.

Le fichier d'accueil se nomme traditionnellement index.htm, sans majuscule. Le nom des


autres fichiers importe peu, pourvu qu'il se rapporte de près au titre de la page HMTL associée.

Exemple:
• Fournisseur
• Répertoire-racine
index.htm
11 octobre 2009 23242407.doc Page 26 sur 84
Systèmes Répartis INTERNET Site Web

fichierl.htm
fichier2.htm
fichier3.htm
image-l.gif
image-2.jpg
son-l.mid
son-2.mid

Pour plus de clarté dans la maintenance, il peut être commode de différencier les fichiers par
types, en stockant par exemple les fichiers multimédia tels que les fichiers images, sons, etc.
dans des sous-répertoires spécifiques.

Exemple:
• Fournisseur
• Répertoire-racine
index.htm
fichier-l.htm
fichier-2.htm
fichier-3.htm
Sous-répertoire "images"
image-l.gif
image-2.jpg
Sous-répertoire "sons"
son-l.mid
son-2.mid
Sous-répertoire "videos"
video-l.mpg
video-2.avi

Les logos peuvent aussi être stockées de manière séparée, de même que les modèles de pages
(templates) disponibles chez les éditeurs avancés.
Ce principe peut être étendu aux fichiers de feuilles de style ainsi qu'aux fichiers plus techniques.

Les feuilles de style (fichiers à extension css) appliquées à tout ou partie du site peuvent se
trouver sous le répertoire style. Il en est de même pour les "server side includes" sous le
répertoire include(s).
Les applets Java et les contrôles Active X internes au site peuvent respectivement être
rassemblées sous le répertoire applet(s) et ocx.
De même, les fichiers de scripts externes aux pages (fichiers à extension js) sont à stocker sous le
répertoire script(s).
Enfin, les applications Web du type cgi peuvent être soit publiées de manière séparées du site
(politique générale des hébergeurs), soit restées intégrées au site sous un répertoire portant le
nom de cgi(-bin).

Exemple complémentaire:
Sous-répertoire "styles"
11 octobre 2009 23242407.doc Page 27 sur 84
Systèmes Répartis INTERNET Site Web

rubrique-l.css
ssrub-2.css
page-3.css
Sous-répertoire "applets"
mon.class
ton.class
Sous-répertoire "scripts"
menu.jss
page.jss

2.2 Site complexe


Un site peut traiter de plusieurs thèmes, ou rubriques, et être constitué d'un grand nombre de
fichiers. Dans ce cas, il est commode d'organiser l'arborescence en différenciant les thèmes.

 Sous le répertoire racine, on installe le ou les fichiers servant à l'écran d'accueil

 Si des fichiers images (ou sons, etc...) sont communs à plusieurs rubriques, on peut
les stocker dans un sous-répertoire spécifique (par exemple "img-com")

 Les fichiers propres à une rubrique donnée sont réunis dans un sous-répertoire
réservé à cette rubrique, lui-même éventuellement subdivisé en d'autres sous-
répertoires (images spécifiques à cette rubrique, etc...)

Exemple:

• Fournisseur
• Répertoire-racine
index.htm
fichier l.htm
fichier 2.htm
fichier-3.htm
• Sous-répertoire commun "img-com"
image-l.gif
image-2.jpg
• Sous-répertoire commun "sons-com"
son-l.mid
son-2.mid
• Sous-répertoire "rubrique-1"
index.htm
fichier I.htm
fichier 2.htm
fichier-3.htm
• Sous-répertoire commun "images"
rubrique1-l.gif
rubrique1-2.jpg
11 octobre 2009 23242407.doc Page 28 sur 84
Systèmes Répartis INTERNET Site Web

• Sous-répertoire "rubrique-2"
index.htm
fichier-l.htm
fichier-2.htm
fichier-3.htm
• Sous-répertoire commun "images"
rubrique2-l.gif
rubrique2-2.jpg

Chaque rubrique constituant une entité, il est commode de nommer "index.htm" le fichier
d'accueil de la rubrique proprement dite. Ainsi, on peut si nécessaire diffuser une adresse URL
spécifique pour chaque rubrique, comme si elles constituaient des sites séparés (les rubriques
peuvent d'ailleurs ne pas être reliées entre elles par des liens hypertexte, et constituer réellement
des sites distincts).

Si le site fédère un certain nombre de sous sites, l'organisation décrite ci-dessus peut être
réappliquée au niveau de chaque sous site, aussi bien pour les fichiers multimédia que les fichiers
techniques, aussi bien pour les rubriques importantes.

Un des principaux arguments en faveur d'une organisation horizontale réside dans la facilité de
mise à jour du site par transfert de fichiers.

3. Noms des fichiers


3.1 Page d'accueil
Il est recommandé - mais non obligatoire- de nommer index.htm le fichier d'accueil du site, ou
d'une rubrique. Le nom index.htm(l) est le nom le plus répandu.
Les webmestres des serveurs hébergeurs des sites, outre le fichier default.htm pour les serveurs
Microsoft, configurent systématiquement ce nom comme page d'accueil. Il est déjà configuré par
les serveurs Apache.
A condition qu'il ne comporte pas de majuscules (*), il s'ouvrira automatiquement. Il n'est donc
pas nécessaire d'indiquer son nom dans l'adresse URL.

(*) D'une façon générale, il est recommandé d'écrire tous les noms de fichiers et de répertoires
sans majuscules, ce qui évite toute erreur de casse dans l'écriture ultérieure des liens hypertextes.
Outre les erreurs éventuelles lors de la pose de liens manuels par le développeur de site, l'emploi
systématique de minuscules améliore la portabilité du site vers les visiteurs sous UNIX.

3.2 Répertoires
En dehors des répertoires évoqués ci-dessus, les noms des répertoires sommets de chaque
rubrique doivent reprendre ci-possible le nom de la rubrique.

Afin d'assurer une portabilité maximum du site, il est recommandé de ne pas utiliser de caractère
espace (monde UNIX) ou souligné (mal interprété par certains navigateurs). De même, il est plus
simple de n'utiliser que des caratères minuscules.
11 octobre 2009 23242407.doc Page 29 sur 84
Systèmes Répartis INTERNET Site Web

Même si les systèmes d'exploitation actuels autorisent les noms à 255 caractères, le développeur
est invité à dénommer de manière explicite les répertoires avec les expressions les plus courtes.
Il peut enfin, s'il veut rendre son site accessible aux internautes travaillant encore sous
l'environnement Windows 3.11, respecter pour le nommage la règle "8.3" (motde8lettres.htm)
qui est la plus restrictive.

3.3 Autres fichiers


Les noms de pages Web doivent pour raison de simplicité et facilité de maintenance porter les
même noms que les titres de document (balise title) ou titre de sommet de pages.
La volonté de rendre un site portable incite à réutiliser les règles édictées ci-dessus.

Les fichiers images ou autres fichiers multimédias peuvent être renommées afin d'être plus
explicites.

4. Conclusion
Ce chapitre peut paraître superflu au moment du développement d'un site personnel. Il l'est déjà
moins quand il s'agit de maintenir ce site personnel à un rythme mensuel.
Dans le cadre d'une équipe de travail, il se révèle, encore une fois, essentiel pour donner une
méthode de conduite de développement de sites Web à l'ensemble des acteurs et assurer une
meilleure coordination et compréhension pour toute la durée du projet.

11 octobre 2009 23242407.doc Page 30 sur 84


Systèmes Répartis INTERNET Site Web

Chapitre 3 : Architecture d'un Site


Après avoir franchi les différentes étapes de la création d'un site (pré-requis, moyens, vision de
l'internaute), le jeune développeur peut élaborer sa première maquette de site (architecture) en
tenant compte des différents principes ou règles énoncées ci-dessous.

1. Découpe de l'information
1.1 Raisons
La raison essentielle de la découpe du contenu en petites pages de dimension réduite réside
dans un temps de chargement raisonnable pour le confort de l’internaute. Ce fameux temps de
chargement comprend non seulement le texte de la page mais aussi les images voire autres
animations du style Java, Javascript ou DHTML. Un total de 45 Ko est calculé comme une
moyenne idéale tandis qu’une page de 70 à 80 Ko est à considérer comme un maximum pour un
temps de chargement acceptable.

Des petits morceaux d'information sont plus adaptés à la lecture sur un écran d'ordinateur que la
vision partielle d'un long document. La mémoire immédiate et la synthèse instantanée de l'esprit
humain étant ce qu'elles sont, des pages Web très longues sont déstabilisantes car elles
nécessitent le défilement vertical et l'obligation de se rappeler les informations ainsi disparues de
l'écran. Selon certaines études psychologiques, la mémoire à court terme comprend entre 4 et 7
petits éléments d'information.
En outre, cette découpe de l'information en petites unités logiques, associée à une structure
rationnelle, facilite grandement la navigation et la recherche de l'information souhaitée.

Pour fixer un ordre de grandeur, cette découpe de l'information correspondra à 2 ou 3 écrans soit
environ entre une demi-feuille et une feuille de format A4 sans mise en forme, ou alors 2 à 3
feuilles de format A4 d'une mise en page particulièrement aérée.

1.2 Utilité
Le découpage de l'information en petits morceaux organisés de façon uniforme est
particulièrement adapté aux présentations Web car :
• peu d'utilisateurs passent leur temps à lire de longs passages de texte sur l'écran.
A la lecture en ligne, on préférera souvent enregistrer les longs documents ou même les
imprimer.
• le découpage de l'information en petites unités et le système hypertexte font bon ménage.
11 octobre 2009 23242407.doc Page 31 sur 84
Systèmes Répartis INTERNET Site Web

En effet, en cliquant sur un lien, l’internaute s'attend généralement à trouver un autre


morceau d'information liée et complémentaire à la précédente et non un livre complet.
Mais il ne faut pas trop subdiviser votre information. Cliquer un lien pour ne trouver que
quelques mots ou un petit paragraphe peut se révéler frustrant pour l’utilisateur et le
distraire du véritable contenu.
On utilise alors plutôt (mais sans en abuser) les petites fenêtres pop-up du Javascript.
• une forme uniformisée du découpage et de la présentation crée une identité au site.
Cette cohérence permet très vite aux visiteurs d'acquérir une certaine expérience pour
leurs recherches et autres explorations, voire même de prévoir comment une nouvelle
section du site sera organisée. "Se sent à l'aise dans un site" est une des clés essentielles
d'un bon site.

Ce concept de découpage de l'information doit cependant être flexible et adapté au sujet traité
ainsi qu’à la logique d'organisation de votre site et au confort de votre visiteur. C'est la nature du
contenu qui suggére le meilleur moyen de subdiviser et d'organiser l'information.
Ainsi, dans certains cas, des pages plus longues sont néanmoins nécessaires pour traiter
complètement un sujet sans distraire le visiteur par une découpe intempestive de celui-ci. C'est
particulièrement vrai lorsque l'on souhaite que l'utilisateur puisse imprimer ou enregistrer un
sujet déterminé en une seule étape.

2. Structure
Sans une structure fonctionnelle, votre site sera un échec
même si le contenu en est pertinent et bien rédigé.

"La chose la plus importante à considérer lorsqu'on prépare le design d'un site Web, c'est la
satisfaction des utilisateurs. La facilité avec laquelle ils trouveront ce qu’ils recherchent
déterminera la fréquence avec laquelle ils reviendront sur le site. Eviter de frustrer les
internautes est l'objectif principal du design. Et au bout du compte, savoir structurer l'information
qu'on présente est la base fondamentale d'une expérience réussie sur le Web." (Valérie Casey,
professeur de Web Design à l'Université de San Francisco)
Le but est de fournir à l'usager l'information qu'il souhaite en un minimum d'étapes et donc en un
minimum de temps. Pour autant que des normes strictes existent en la matière, on parle de la
"règle des 3 clics" selon laquelle toute information de votre site doit être disponible en 3 clics
de souris maximum. Il faut donc hiérarchiser l'information selon une structure efficiente pour
minimiser la navigation vers l'information.

2.1 Structure séquentielle


Le moyen le plus simple d'organiser l'information est la façon séquentielle. C'est en quelque
sorte le retour au livre avec sa narration linéaire : chapitre 1, chapitre 2, chapitre 3...

11 octobre 2009 23242407.doc Page 32 sur 84


Systèmes Répartis INTERNET Site Web

Les narrations, les lignes du temps ou autres exposés nécessitant un ordre logique se prêtent à ce
genre de structure ainsi que les thèmes progressant du général au particulier. La structure
séquentielle est aussi particulièrement adaptée aux sites d'apprentissage ou tutoriaux où le
passage à une page suivante requiert des pré-requis exposés à la page précédente.

Cependant, cette structure séquentielle ne sera utilisée que pour des petits sites (ou des parties de
sites plus grands) car de longues séquences narratives ou explicatives nécessiteront souvent une
structure plus sophistiquée pour rester compréhensives.

2.2 Structure hiérarchisée


La structure hiérarchisée est une des meilleures façons d'organiser des blocs d'information
complexes. Ce schéma d'organisation s'adapte particulièrement bien au site Web car les
différents thèmes dépendent ainsi d'une seule et unique page, soit la page d'index, ou la page
d'accueil [homepage]. En outre, les utilisateurs sont souvent familiarisés avec les diagrammes
hiérarchisés comme les organigrammes et trouvent la métaphore facilement compréhensible pour
les aider dans leur navigation.

Cette organisation hiérarchisée en blocs d'informations indépendants nécessite cependant un gros


travail d'analyse préalable du contenu (notions pré-requises, doublons d'information...) car cette
structure hiérarchisée n'est efficiente que si l'information disponible est soigneusement organisé.

2.3 Structure en réseau


Cette structure fonctionne de préférence pour des petits sites destinés à des utilisateurs hautement
qualifiés en quête d’enrichissement ou de perfectionnement plutôt que pour des sites nécessitant
la compréhension basique d'un sujet. On travaille ici les associations d’idées et le libre cours de
la pensée. Chaque visiteur parcourt le site de façon unique selon ses propres intérêts et sa propre
démarche vers l’information sans avoir l’impression d’être dirigé.

11 octobre 2009 23242407.doc Page 33 sur 84


Systèmes Répartis INTERNET Site Web

Ce type de structure exploite la pleine puissance des liens aussi bien vers des informations
situées à l’intérieur du site et vers des informations situées dans d’autres sites de la toile.
Cette structure en réseau se révèle ardue à mettre en place pour les internautes novices dans le
sujet traité. Ceux-ci auront alors l’idée d’un site confus, difficilement exploitable.
En fait, cette structure est une suite logique des deux structures précédemment évoquées. Il
convient d'envisager cette structure une fois que les structures précédentes sont stabilisées. Cette
architecture cependant n'est pas appplicable sur tous les sites.

2.4 Structure en évolution


Pour les sites qui connaissent une croissance rapide et de nombreux développements, l'objectif
est de garder un équilibre entre les différents blocs d'informations. Et ce n'est pas toujours une
chose aisée... Le feedback des utilisateurs et une analyse personnelle critique du site aident à
déterminer si certains passages ne sont que pauvrement structurés ou si la structure initiale est
devenue, avec les différentes ajoutes, complètement obsolète.

L'objectif est de maintenir une hiérarchisation équilibrée qui aide l'accès rapide à l'information
ainsi qu'une compréhension intuitive de la façon dont les éléments sont organisés.

Exemple d’une structure équilibrée

11 octobre 2009 23242407.doc Page 34 sur 84


Systèmes Répartis INTERNET Site Web

3. Outils de navigation
Un visiteur qui se perd est un visiteur qui ne reviendra plus.

Une fois la structure en place, il faut encore fournir aux visiteurs, les outils de navigation
indispensables pour une exploration aisée du site. Ces outils de navigations sont aussi
indispensables à la circulation dans le site que les panneaux de circulation du réseau routier.

Ces outils de navigation se présentent par des liens sous forme de texte ou seront plus
agréablement conçus sous forme de petites images, boutons, icônes ou barres d’information. On
veillera alors à un graphique simple et à la symbolique intuitive car ils se doivent d’être efficaces
mais aussi de rester discrets par rapport au contenu et au visuel proprement dit. Ces outils de
navigation qui se retrouvent de page en page contribuent aussi à créer l’identité graphique de
site.

Quelques principes généralement adoptés par tous les concepteurs de site semblent se dégager.
Les utilisateurs d’un site doivent toujours être capables de revenir à tout moment vers la page
d’accueil [Home ou Index] ou vers les principaux points de navigation. Chaque page d’un site
comporte donc un lien vers cette page d’accueil ou la page servant de dispatching. De plus, si le
sens du contenu global y invite, on prévoit des possibilités de retour à la page précédente ou
d’avancement à la page suivante.

Les barres qui proposent de multiples choix dans un espace réduit ont de nombreux adeptes car
elles peuvent ainsi servir d’en-tête de page et donner une forte cohérence visuelle au site. Mais
d’autres préfèrent l’usage de cadres ou de tableaux.

La tendance actuelle sur le Web est de proposer plusieurs outils de navigation. Le premier est
celui qui guide l’utilisateur dans la navigation du site selon les directives de l'auteur. Les autres
donnent pleine liberté d’exploration au visiteur.

4. Page d'accueil
Pas une couverture mais plutôt un sommaire visuel et informatif.

Lorsque l'internaute clique sur le site à partir d'un moteur de recherche ou encode directement
l'adresse au clavier, c'est sur cette page qu'il aboutit. Il reste alors 30 secondes pour le convaincre
11 octobre 2009 23242407.doc Page 35 sur 84
Systèmes Répartis INTERNET Site Web

de parcourir les pages de cette œuvre et récompenser le développeur ainsi de toutes les heures de
travail. C'est dire toute l'importance que l'on accorde à la conception et à la réalisation de cette
première page.

Cette page d'entrée du site prend le nom de page d'index (en référence à l'adresse index.htm), de
"homepage" ou de page d'accueil. Pour les sites à structure hiérarchisée, cette page est tout
naturellement celle qui est au sommet de la hiérarchie et vers laquelle on peut revenir à partir de
toutes les pages du site.

Les usages (ou le bon sens) dictent les éléments constitutifs de celle-ci :
• le nom ou le titre du site qui en reprend l'objet.
• un sommaire (détaillé ou synthétique) qui donne une vue d'ensemble du contenu et amorce
les outils de navigation.
• un élément visuel (logo, image, icône symbolique) pour l'aspect attractif.
• un court texte qui reprend le descriptif fourni aux moteurs de recherche (excellent pour le
référencement et le classement).
• le nom de l'auteur et un lien vers l'adresse électronique de celui-ci.
• la date de réalisation ou de la dernière mise à jour.
• etc.

On évite dans la page d'accueil :


• toute forme de publicité mensongère quant au contenu.
• des liens externes vers d'autres sites.
Ceci est assurément sympathique mais pourquoi risquer de perdre un visiteur
potentiel avant même qu'il ait découvert les pages du site.
• de devoir utiliser les barres de défilement vertical.
Au-delà de 2 écrans, la page d'accueil risque d'être beaucoup trop détaillée et donc
pas assez attractive. A la limite, toute l'information importante devrait être
concentrée sur le premier écran.
• un temps de chargement prohibitif car la tentation sera grande pour un site inconnu de
cliquez le bouton "Précédent" et de retourner aux sites concurrents proposés par le
moteur de recherche.
• une page d'accueil avec des cadres car cela en complique grandement le référencement et
le classement auprès de certains moteurs de recherche.

La page d’accueil est la page la plus importante du site. C’est elle, et elle seule, qui par son
attrait déclenche le clic "gagnant" du visiteur hésitant vers l'œuvre.

11 octobre 2009 23242407.doc Page 36 sur 84


Systèmes Répartis INTERNET Site Web

5. Ergonomie (ou règles de l'art)


5.1 Quelques règles
En matière de création de site Web, il existe quelques véritables "règles de l'art" qui sont
généralement respectées en matière de publication sur le Web.

La règle des trois clics.


Toute information dans un site doit être accessible en 3 clics de souris maximum à partir de la
page d'accueil.

La règle des trois écrans.


La longueur d'une page ne doit pas dépasser 3 à 5 écrans (grand maximum) pour limiter le
défilement vertical.

Le premier écran d'un page doit rassembler le maximum de l'information et inviter à en


poursuivre la découverte.
Un pourcentage important des internautes n'utilisent pas ou peu le défilement vertical.

Le défilement horizontal de la page est à proscrire quelle que soit la résolution d'écran du
visiteur.
Un écran ne doit être rempli qu'à 50% de texte et de graphiques. Le reste est consacré au fond
d'écran.

Quels que soient les goûts en matière artistique, le texte doit toujours rester lisible par rapport au
fond d'écran. Comme dans la vie de tous les jours, le Web comporte son lot de mal voyants : ne
pas les oublier.

Prévoir une possibilité de retour à la page d'accueil à chaque page du site. Un visiteur perdu
est un visiteur déçu.

Ecrire des phrases courtes à la construction simple. C'est un exercice de communication...

La lecture de texte sur écran se révèle vite fatiguante. Des lignes de texte de 60 à 90 caractères
maximum semblent être un bon compromis surtout si on sait que la tendance est aux résolution
d'écran de 800 x 600 et 1024 x 768 ...

Si après les 10 secondes (*) suivant un clic, il ne se passe rien, l'internaute s’inquiète, s'ennuie,
s'impatiente ou quitte la page. [* à adapter selon chaque capital de patience].

Tous les liens sont dûment vérifiés et valides. A ce stade de développement de la publication
Internet, un lien non valide devient presque inacceptable.

Sans oublier tout de ce qui précède, il est opportun de rester toujours soi-même et si possible
créatif.

11 octobre 2009 23242407.doc Page 37 sur 84


Systèmes Répartis INTERNET Site Web

5.2 La résolution d'écran


Les concepteurs débutants posent souvent la (mauvaise) question : "Pour quelle résolution
d'écran doit-on concevoir un site ?". C'est une mauvaise question car l'on ne connaît jamais la
résolution d'écran du visiteur. Et une annotation du genre "site optimisé en 800 x 600" est assez
illusoire car les internautes qui changeront leur résolution uniquement pour voir le site en
question sont rarissimes. Il existe cependant certaines solutions pour rendre votre site
esthétiquement compatible avec n'importe quelle résolution d'écran.

Présentation
Beaucoup de gens pensent que la résolution d'écran dépend de la taille de l'écran. Ceci est faux.
On peut avoir un écran de 14 pouces configuré pour une haute résolution, ou avoir un écran de
21 pouces et n'offrir qu'une basse résolution d'écran de seulement 640 x 480. L'unité est le pixel
(picture element ou point d'image). 640 x 480 représente respectivement le nombre de pixels de
l'échelle horizontale puis celui de l'échelle verticale.

La plupart des moniteurs peuvent afficher différentes résolutions d'écran. C'est la carte graphique
qui détermine les différentes résolutions d'écran possibles pour un ordinateur donné.
Ainsi, au début, les cartes graphiques de 1 Mo proposaient la norme de 640 x 480. Au fur et à
mesure de l'évolution de ces cartes, celles-ci disposaient de plus en plus de mémoire vidéo
(quantifiée en Mo). Elles pouvaient donc proposer des résolutions de plus en plus élevées, et
donc plusieurs résolutions configurables. Ainsi les cartes à 2Mo ont introduit la résolution 800 x
600, suivi de près par les cartes graphiques à 4Mo qui ont permis les résolutions 1024 x 768 ou
même 1280 x 1024.
Les internautes suivent bien entendu cette évolution technologique et la résolution initiale de 640
x 480, qui représentait la norme quelques années auparavant, est en voie de disparition au profit
de résolutions plus hautes.

Le résultat d'un sondage (an 2000) présenté dans le tableau suivant, obtenu après recoupement de
plusieurs sources permet de brosser une idée de la répartition des différentes résolutions utilisées
pour le Web.

Résolution Pourcentage
640x480 7%
800x600 55 %
1024x768 30 %
1280x1024 7%
11 octobre 2009 23242407.doc Page 38 sur 84
Systèmes Répartis INTERNET Site Web

Le tableau montre que la moyenne des utilisateurs du Web utilisent une résolution d'écran de
800x600 [et en 65.536 couleurs].
Mais écrire pour la moyenne n'est pas tout... Il reste les 45 % autres internautes pour qui votre
site risque d'être une véritable catastrophe.

Illustration du problème
Le premier exemple montre une page avec une image reprenant les lettres de l’alphabet. Avec
une résolution 800x600, cette image s’adapte parfaitement à l’écran. Par contre, cette même
page, vue en 640x480 est déjà beaucoup moins sympathique.

L’utilisateur doit non seulement faire appel au défilement vertical pour voir l’entièreté des lettres
mais également au défilement horizontal car les lettres K et L ont disparu de l’écran. Si le
défilement vertical est acceptable pour une page d’une certaine consistance, le défilement
horizontal est à bannir car trop inconfortable pour le visiteur.

Résolution 800x600 Résolution 640x480

Le second exemple tente d'illustrer les différences de mise en page et surtout la longueur des
lignes de texte d’une résolution à l’autre.

Si une page reprend principalement du texte, plus la résolution est haute, plus la ligne de texte
sera longue et donc plus la lecture de ce texte à l’écran sera fastidieuse. Lire du texte sur un écran
en 1280x1024 reviendrait à lire un journal !

Quelques solutions
Il faut bien admettre qu’une résolution de 640 x 480 entraîne une composition de la page un peu
étriquée. Avec des résolutions plus hautes, on peut concevoir des pages plus aérées et aux
proportions plus équilibrées. En outre, cette largeur supplémentaire permet généralement de
prévoir des menus de navigation omniprésents sur chaque page du site.

Passons en revue quelques solutions pour garder une certaine compatibilité par rapport aux
différentes résolutions possibles.

On conseille de limiter la largeur des images à environ 600 pixels même pour les sites
idéalement conçus en 800x600 ou en résolution plus grande encore afin d’éviter de devoir

11 octobre 2009 23242407.doc Page 39 sur 84


Systèmes Répartis INTERNET Site Web

utiliser les barres de défilement horizontales, sous des résolutions inférieures. Cette limitation
vaut aussi pour les tableaux et les cadres élaborés avec une largeur fixée en pixels.
On pense à inclure les longs passages de texte dans des tableaux (à bordure invisible) d’environ
600 pixels maximum. On obtient ainsi des lignes de texte de 60 à 90 caractères, ce qui semble
être une norme acceptable pour un confort de lecture à l’écran.

Il faut prévoir d’entrée de jeu les images d'arrière-plan avec une largeur de 1280 pixels afin
qu’ils s’adaptent à toutes les résolutions possibles. Cette préconisation évite une répétition de
l'image horizontalement, ce qui entraîne généralement des effets non désirés et désastreux
(raccord).
Les résultats désirés ne s'obtiennent pas dès le premier essai. Aussi une série de tests semble
nécessaire à cette étape du développement.
Finalement, on rencontre le plus souvent des sites conçus en 600 pixels de large pour être vus en
800x600 ou plus, le reste de la largeur étant un arrière-plan neutre. La page reste alors toujours
bien lisible quelque soit la résolution.

Résolution 640x480 Résolution 800x600

Remarque finale
Avec le langage Javascript 1.2, on peut détecter (sans pouvoir la modifier cependant) la
résolution d'écran de l’internaute et le rediriger automatiquement vers une page spécialement
conçue pour cette résolution [screen width et screen.height]. Ceci semble à priori intéressant
mais cela équivaut alors à écrire quasiment un site pour chaque résolution. Quel boulot !

5.3 La zone de sécurité


A cause des différentes résolutions d’écran possibles et des modifications apportées à l'affichage
des pages du site, est né dans la pratique de la publication Web, le concept de la zone de sécurité.

Celle-ci est une zone qui, quelle que soit la résolution d’écran, le système d’exploitation ou le
navigateur utilisé, est vue parfaitement par l’internaute.

Zone de sécurité du navigateur


Cette zone correspond aussi à la partie de la page Web qui apparaît en premier à l’œil du visiteur
et dans laquelle on regroupe le maximum d’informations littéraires ou graphiques (véritable
synthèse de la page) qui l’incitent à utiliser le défilement vertical pour poursuivre l’exploration
de la page.
11 octobre 2009 23242407.doc Page 40 sur 84
Systèmes Répartis INTERNET Site Web

Pour une résolution d’écran toujours possible de 640x480, la largeur est d’environ 600 pixels car
il faut tenir compte des marges et de la barre de défilement. La hauteur, compte tenu des
différentes barres d’outils et barres d’état du navigateur, est quant à elle d’environ 350 pixels.

Zone de sécurité du navigateur

On souhaite parfois que le visiteur puisse imprimer une page. Or, l'expérience d’internaute
démontre que l’impression d’une page Web n’est pas sans surprises, spécialement lorsque la
page comporte des images.

Zone de sécurité pour l’impression


Notons tout d’abord que le langage HTML n’a pas été conçu pour l’impression. C’est le
navigateur qui recompose la page Web de la largeur de l’écran à la largeur (plus petite) d’une
feuille A4. Si la page a été conçue avec du texte avec retour automatique du chariot ou avec des
tableaux exprimés en pourcentage de la fenêtre, cette recomposition s’effectue sans problèmes.
Par contre, si la page comporte des images qui dépassent une largeur de 530 pixels ou si des
tableaux excèdent une largeur de 530 pixels, le risque est grand que certains éléments de l’image
ou du tableau n’apparaissent pas à l’impression.

Zone de sécurité pour l’impression

11 octobre 2009 23242407.doc Page 41 sur 84


Systèmes Répartis INTERNET Site Web

Surtout si la page destinée à être imprimée comporte des images, la zone sûre d’impression
devient 530 pixels de largeur pour 710 pixels de hauteur. Selon l’importance attachée au
document, il n’est pas inutile de tester cette impression avec différents types d’imprimante. Il est
dans certains cas plus sûr de recourir au téléchargement d'un document du type PDF (Adobe
Acrobat), document universel et vraiment conçu pour l’impression.

5.4 La mise en page


Classique ou "délire" ? Livresque ou audiovisuel ?

Comment présenter l'information sur l’écran du visiteur relié à la toile ? D’une façon classique,
quasiment livresque ou, profitant des dernières technologies en matière de publication sur le
Web, puiser l'inspiration dans les créations audiovisuelles comme la télévision et spécialement
ses bandes annonces ou ses spots publicitaires ?

Le point de vue du classique


La transmission d’un savoir se fait, autant pour l’auteur que pour le lecteur, d’une façon
structurée et claire. On ne peut passer outre à l’héritage culturel de siècles d’édition au risque de
décontenancer le visiteur. Titres, chapitres, sous-chapitres, éventuellement en-tête et pieds de
page apportent une hiérarchie du contenu qui permet tout au long de l’exposé d’aller du principal
au particulier et qui induit ainsi une structuration de la connaissance. Clarté et netteté de la mise
en page restent et resteront le maître mot de l'expression.
Les animations et autres effets visuels ou dynamiques ne font que distraire le lecteur du véritable
contenu et créer à la longue un sentiment d'inconsistance pour finalement le lasser du site. Le
Web reste avant tout un formidable réservoir d’informations même si certains veulent en faire un
parc de loisirs.
Il importe devant cette profusion d’informations, qui ira à n’en pas douter de façon croissante,
d’apporter une information pertinente, détaillée, actualisée et surtout facilement accessible.
La véritable dynamique du Web ne réside pas dans ces animations que l’on dit révolutionnaires,
mais dans la démarche active de l’internaute vers l’information qu’il souhaite trouver. C’est cette
information qu’il faut lui donner, pas des "mots qui bougent"... Au royaume du Web, plus que
jamais le contenu sera roi.

Le point de vue du "délire"


Avec les derniers développements du Javascript, du DHTML voire de Flash, la mise en page des
sites Web est profondément bouleversée. Les diverses animations sur le texte ou les images, pour
autant qu'elles ne soient pas inutilement gratuites, viennent renforcer la transmission de
l'information. Le livre n'est pas le seul moyen de communication.
Il existe aussi l'audiovisuel et les présentations multimédia. Les publicitaires l'ont bien compris et
leurs spots à la télévision ne font plus que raconter leur histoire de la façon la plus convaincante
possible. Par des effets dynamiques, ils attirent le regard et l'esprit pour tantôt faire ressortir un
mot ou un logo ou tantôt synthétiser un message. Il est évident que le contenu ne suffit plus et
que c'est le message qui est transmis de la façon la plus performante qui l'emporte. Les gens ne
lisent plus ou très peu... par contre ils passent des heures à regarder de façon consciente ou non

11 octobre 2009 23242407.doc Page 42 sur 84


Systèmes Répartis INTERNET Site Web

leur poste de télévision. Consciemment ou non, ils s'attendent à retrouver lors de leur exploration
du Web, la même forme d'expression et le même environnement visuel.
Le langage HTML et ses développements annexes possèdent maintenant tous les outils pour
mettre en place son propre mode d'expression, créatif et dynamique.

En conclusion
Bien au-delà d'un exercice de style, ces deux points de vue ne sont pourtant pas inconciliables.
La mise en page sera dictée par la densité du contenu et surtout par le public visé. Il ne faut
cependant jamais oublier que cette mise en page doit être au service de la transmission de
l'information et rester claire, nette et efficace.

5.5 Cadres ou tableaux


Les cadres [frames] permettent de diviser l'écran en 2 ou plusieurs fenêtres et d'afficher dans
chacune de celle-ci des documents HTML distincts. Ce système offre une alternative puissante
pour la conception visuelle et l'organisation de la navigation d'une publication Web.

On peut affirmer qu'à l'heure actuelle, il n'existe plus de problèmes de compatibilité à l'utilisation
des cadres dans un site. En outre, la migration vers des résolutions d'écran plus grandes
(1024x768 au lieu de 800x600) arrangent visuellement bien les choses. Pourtant les cadres
gardent leur part de détracteurs qui préfèrent garder les présentations sous forme de tableaux.

AVANTAGES CADRES
Simplicité du code.
Menu toujours présent à l'écran.
Riches possibilités en Javascript.
Code moins visible pour les débutants.

Bien que les cadres ne soient pas implantés directement dans certains éditeurs HTML, leur
écriture est simple. Cette simplicité du code se paie par une grande rigueur au niveau des
attributs des balises. Les cadres restent, pour les concepteurs débutants, un des meilleurs moyens
pour "s’emmêler les pinceaux".

Avec la division de l'écran en fenêtres, la tentation est grande d'en réserver une pour y mettre le
menu (complet) des points abordés dans le site et offrir ainsi un outil de navigation qui sera
toujours présent sous les yeux de l'internaute. Ce genre de cadre est spécialement apprécié pour
les sites dont le contenu est appelé à se développer fréquemment car il suffira alors de modifier
le seul fichier qui apparaît dans ce cadre.
Pour les concepteurs experts, les cadres et surtout les cadres invisibles, présentent de multiples
possibilités :
- pour passer des valeurs d'une page à l'autre (en Javascript).
- pour masquer des données jugées confidentielles (compteurs, statistiques).
- pour précharger des images dans le cache.
- etc.

11 octobre 2009 23242407.doc Page 43 sur 84


Systèmes Répartis INTERNET Site Web

Bien que l’astuce ne fera pas long feu, l’accès au code des pages incluses dans les cadres est un
peu moins aisé pour les internautes débutants.

INCONVENIENTS CADRES
Référencement délicat sur certains moteurs de recherche (Hotbot).
Barre de défilement pas très esthétique.
Manipulations plus difficiles pour les débutants.

Le référencement auprès de certains moteurs de recherche, spécialement ceux qui scannent le


texte de la page, se révèle une opération périlleuse car la page de définition de cadres ne
comporte que quelques lignes de code HTML. Le référencement d'une page nécessite une
connaissance pointue de l'emploi des balises META.

La barre de défilement introduite par défaut, et par ailleurs bien pratique, est souvent d'une
esthétique douteuse dans l'ensemble visuel de votre page. Bien entendu, il est possible de la faire
disparaître [border=0 frameborder=no framespacing=0]. Mais si cela fonctionne visuellement
très bien sous une résolution d'écran déterminée (exemple 800x600), il est quasi certain qu'une
partie de votre menu, par exemple, sera inaccessible et donc impossible à consulter, sous une
résolution inférieure (640x480).

L'impression et l'enregistrement de la page sont plus délicats pour les internautes débutants.

AVANTAGES TABLEAUX
Présentation excellente.
Compatible avec tous navigateurs.

Les tableaux sont très utiles pour la mise en page, pour "dessiner" une page Web au millimètre
près. "En publication HTML, tout est tableau". Que ce soit pour créer un alignement, une
composition de page ou un menu de navigation, les tableaux offrent toujours une présentation
impeccable et compatible avec tous les navigateurs.

INCONVENIENTS TABLEAUX
Code entier à répéter pour chaque page à créer.
Lourdeur du code à télécharger avec certains navigateurs.
Encore quelques différences entre Netscape et Internet
Explorer.

Construire un menu de navigation qui se retrouve sur chacune des pages d'un site peut se révéler
fastidieux car il faudra répéter pour chaque page le code entier. Le fait le plus fastidieux réside
dans les fréquentes mises à jour ou ajoutes du site. Il faudra alors modifier ce menu de navigation
dans toutes les pages du site alors qu'avec un menu de navigation localisé dans un cadre, il suffit
d'ajouter quelques lignes dans le fichier en question.

Le navigateur compose les tableaux de la page à partir des balises du langage HTML. Si la page
comporte un grand tableau avec de nombreuses lignes et colonnes, si ce tableau initial comporte
de nombreux autres tableaux imbriqués, l'opération de composition de la page peut prendre un
11 octobre 2009 23242407.doc Page 44 sur 84
Systèmes Répartis INTERNET Site Web

certain temps et allonger le temps de chargement. On évite donc les tableaux trop compliqués. La
solution consiste à diviser ces grands tableaux en plusieurs tableaux plus petits.

5.6 Typographie
Il faut bien admettre qu’il n’est pas évident de composer avec les polices de caractères...
En langage HTML, on peut utiliser n’importe quelle police de caractère mais à la condition que
celle-ci soit installée sur l’ordinateur du visiteur.
Ainsi, si tout le site est écrit avec la police Amelia, et si cette police n’est pas installée sur le
poste du visiteur, celui-ci verra le site dans la police par défaut de son navigateur, soit
généralement en Times New Roman.

Une solution consiste à employer les polices par défaut du système d’exploitation, polices que
tout utilisateur est sensé avoir sur sa machine. Mais on ne peut pas dire qu’elles apportent grand
chose de plus que les classique Times New Roman ou Arial.

Polices par défaut pour Windows 95 et Macintosh

Dans ce paragraphe consacré aux polices, il semble intéressant de relever que le rendu des
polices est différent selon le système d’exploitation.
En effet, avec les navigateurs sous Windows, les caractères (d’une même police) apparaissent un
peu plus grand que sous Macintosh.

11 octobre 2009 23242407.doc Page 45 sur 84


Systèmes Répartis INTERNET Site Web

Taille de certaines polices sous Windows et Macintosh

La solution la plus simple consiste à utiliser les polices par défaut. Il existe une autre solution
que l'on peut appliquer de deux façons différentes selon le niveau de connaissances du
développeur.
La première technique consiste à indiquer plusieurs polices au sein des balises font du langage
HTML (relatives à la police de caractères) suivant un ordre de préférence choisi par le
développeur. La deuxième consiste à indiquer la même chose au sein des feuilles de style.
Dans les deux cas, le navigateur, interpréteur de la page Web, cherchera sur le poste du visiteur
la première police indiquée. S'il ne la trouve pas, il passe à la deuxième, et ainsi de suite... De
toute façon, si toutes les polices indiquées ne sont pas installées, il utilisera la police paramétrée
par défaut dans ses options (Internet Explorer) ou préférences (Netscape).

6. Conclusion
La lecture de ce chapitre est essentielle avant d'élaborer la maquette du site. Il convient de s'en
imprégner avant d'entreprendre quoi que ce soit.
Outre la structure logique du site dépendant de la nature du site et de son contenu, ce chapitre
donne un certain nombre d'explications et de conseils techniques pouvant orienter le choix de la
structure technique (cadre ou non, résolution d'écran, un ou plusieurs sites, etc...).
Avant d'ouvrir l'éditeur pour créer la première page, il reste un dernier chapitre à consulter : celui
de l'organisation physique d'un site.

11 octobre 2009 23242407.doc Page 46 sur 84


Systèmes Répartis INTERNET Site Web

Chapitre 4 : Apprécier un Site


Une fois le site Web publié, il convient de fidéliser ses visiteurs. Il faut donc charmer les
visiteurs du site pour qu'ils aient envie d'y revenir. Mais que faut-il donc faire pour obtenir de
tels résultats ?
Référencer un site Web sur la Toile entraîne nécessairement un classement, au moins au niveau
des moteurs de recherche style annuaire, parmi les sites traitant du même thème. Vouloir attirer
le maximum de visiteurs impose de se classer parmi les meilleurs sites. Les sites référenceurs,
ou les moteurs de recherche, vont donc juger notre site suivant une batterie de critères. Quels
sont-ils ?
Les deux parties de ce chapitre essaient de répondre aux deux questions précédentes.

La consultation de ce chapitre est utile pendant la phase de conception du site, une fois que l'on a
dressé la maquette du site (organisation physique et architecture logique), pour ne pas prendre de
mauvaises directions dès la conception des premières pages. Ce chapitre ainsi que celui portant
sur l’ergonomie devrait constituer le livre de chevet du concepteur pendant toute la phase de
développement et de test.

1. Lignes de force
1.1 Publication papier
Avant de se lancer dans une publication Web, il est difficile d'éviter la comparaison avec la
publication papier.
La plupart des concepts pour structurer l'information s'appuient sur l'organisation de livres,
brochures, périodiques ou catalogues qui sont développés autour de la publication imprimée.
Culturellement, il est impossible (voire dangereux car le risque de décontenancer l’interlocuteur
existe) de passer outre à des siècles de règles et de conventions. Mais force est de constater que
la publication sur Internet comporte ses propres spécificités.

Sans vouloir être exhaustif, soulignons en quelques-unes.


• L'internaute n'a pas la sensation physique du livre et risque d'être rapidement perdu dans le
dédale d'écrans qui se présentent à lui. Il faut plus que jamais structurer l'exposé et offrir des
outils de navigation pour lui permettre de se mouvoir ou même de le guider dans le site.
• Autant pour les yeux que pour l'esprit, l'auteur devra communiquer en terme d'écran et non
plus en terme de feuille de papier d'un format déterminé.
• Le langage HTML, langage informatique utilisé pour écrire les publications Web, n'assure pas
la maîtrise du document comme le permet le logiciel de traitement de texte à l'égard du
document que l'on imprime. Un visiteur visionnera peut-être le site avec une police de
caractères plus grande que celle visualisée chez le concepteur, une grandeur d'écran différente
ou une qualité d'image moindre...
• L'internaute a une démarche active vers l'information qu'il recherche. Sauf quelques
"contemplatifs" du Web, l'internaute moyen lira les pages en diagonales, dans un ordre
11 octobre 2009 23242407.doc Page 47 sur 84
Systèmes Répartis INTERNET Site Web

dispersé, qui sera tout sauf celui souhaité par l'auteur, jusqu'à l'information recherchée. Une
fois "son" information trouvée, le site sera considéré comme un site génial. Mais se
souviendra-t-il des mises en pages et autres graphiques travaillés, retravaillés, bichonnées
pendant des heures voire des semaines ? ...

La publication Web offre un rapport "prix / audience / délai" défiant toute concurrence vis à
vis de l’édition traditionnelle :
 le coût des moyens techniques est accessoire sinon dérisoire au vu de ceux de la
production d'un livre ou d'une revue.
 la barre des 100 000 lecteurs est quelque chose d'accessible sur le Web, même pour un
site personnel.
 le délai des corrections, actualisations et autres mises à jour sera fonction de la propre
créativité du concepteur. Par contre, la publication Web est exigeante en travail et donc
en temps à y consacrer.

La différence essentielle est cependant l'interactivité qu'apporte la publication Web. Prenons


simplement les courriels (e-mails) des visiteurs [1 à 2% en moyenne], qui communiquent en
temps réel, encouragements, critiques ou suggestions. Quelle mine d'or incomparable pour les
mises à jour ou les développements ultérieurs de l'œuvre !

1.2 Schéma global


Avant de se lancer dans la réalisation d'un site Web, il faut prendre le temps d'une réflexion
préalable dont voici les lignes de force.

Le pourquoi de cette démarche (objectifs) engendrera le public visé. La connaissance du public


déterminera alors trois composantes : le contenu rédactionnel et la présentation visuelle de
votre publication qui devront, l'un et l'autre, tenir compte des particularités de fonctionnement de
ce nouvel outil de communication qu'est Internet.

En outre, une fois le site sur le réseau, l'interactivité et précisément les courriels (e-mails) des
visiteurs permettront de mieux connaître "le" public et d'affiner, lors des mises à jour, le précieux
schéma de réflexion du site : objectifs  public  contenu, visuel et fonctionnel.

11 octobre 2009 23242407.doc Page 48 sur 84


Systèmes Répartis INTERNET Site Web

"Un site Web doit refléter les trois composantes qui s'adressent chacune à une fraction du public.
Ceux qui n'ont jamais visité le site, les passants, apprécieront sa clarté et sa présentation visuelle
harmonieuse. Ceux qui y reviennent une ou deux fois, les curieux, seront convaincus par la
qualité du contenu. Enfin les habitués des lieux, les fidèles, témoigneront une infinie gratitude si,
en plus, le téléchargement des pages est rapide." (Philippe Monteiro da Rocha)

1.3 Objectifs
Sans objectifs, pas de cohérence. Sans cohérence, pas de public non plus !
La première étape dans la conception d'un site Web est la définition des objectifs poursuivis dans
la création d'un site. Ces objectifs formeront la "colonne vertébrale" de la communication qui
apportera la cohérence indispensable au site.
Ces objectifs fourniront également un outil d'évaluation du site, ô combien utile pour
éventuellement corriger le tir ou guider le concepteur dans ses développements ultérieurs.

Ces objectifs peuvent prendre des formes multiples :


• être présent sur le Web.
Objectif minimaliste, il faudra dans ce cas veiller à la densité du contenu.
• faire des visiteurs ou du trafic.
Ici le visuel risque d'être prépondérant mais ceci ne fidélise pas forcément une clientèle.
• faire un site de liens.
Le fonctionnel invitera le concepteur à vérifier régulièrement la validité des liens.
• faire un site de promotion d'une association ou d'une marque commerciale.
Un mariage harmonieux du contenu et du visuel sera la priorité absolue et fera alors le
succès du concepteur.
• faire un site commercial.
Il convient de remplacer dans ce qui suit les mots "contenu pertinent" par "service
probant".
• faire un site académique.
Il faudra penser à alléger le poids du contenu par un visuel adapté et une facilité de
navigation quasi intuitive.
• informer ou distraire.
En deux mots, voilà deux programmes bien différents.

1.4 Public visé


Connaître son public pour communiquer avec lui.

L'étape suivante dans le processus d'élaboration d'un site sera d'identifier les utilisateurs
potentiels du site afin d’adapter la stratégie de communication à leurs besoins et leurs attentes.

Outre la densité du contenu et la sophistication du visuel, cette connaissance du public


influencera également la structure ou l'aspect fonctionnel du site. Les internautes novices
souhaitent une structure claire voire dirigiste tandis que les internautes expérimentés ont plutôt
11 octobre 2009 23242407.doc Page 49 sur 84
Systèmes Répartis INTERNET Site Web

horreur d'une structure trop lourde qui leur donne l'impression d'être chapeauté et de freiner leur
accès à l'information.
Les internautes novices et visiteurs occasionnels.
Ces internautes novices sont demandeurs d'une structure claire et d'un aperçu qui illustre
comment l'information est arrangée dans le site. Un menu textuel trop détaillé les
décontenancera. Ainsi préféreront-ils un menu, idéalement agrémenté d'une touche graphique, de
4 à 6 sujets. Pour ces internautes novices, une page d'accueil au visuel attractif et à la mise en
page soignée sera souvent décisive [attention, ils n'utilisent que très peu le défilement vertical].
Les visiteurs occasionnels apprécieront un plan du site, des pages d'aperçu et des petites icônes
qui leur rappellent où se situe l'information dans le site. Un dictionnaire des termes techniques,
acronymes et abréviations ainsi qu'une FAQ ["Frequently Asked Questions" ou Foire Aux
Questions] peuvent être très utiles à ces visiteurs d'un jour.

Les internautes experts et visiteurs fidèles.


Ces internautes expérimentés utiliseront le site pour obtenir rapidement une information précise
et pertinente. Ils se révèlent assez impatients lorsqu'ils sont confrontés à des petits menus en
cascade de 4 à 6 choix et les fioritures graphiques leur importent peu. Ils ont généralement un but
spécifique en tête et ils apprécieront les menus textuels détaillés, les outils de navigation clairs à
la symbolique légère qui permettent une recherche rapide jusqu’à l'information souhaitée. En
fait, ils ne feront que traverser le site jusqu'à la bribe de contenu qui les intéresse.

Le fin du fin en terme de structure d'un site est d'être capable de s’adapter à plusieurs profils
d'utilisateurs.

1.5 Contenu rédactionnel


Le Web est par essence textuel.

Le Web est une formidable source d'informations. Mais à la différence de la télévision par
exemple, l'internaute doit adopter une démarche active car il doit aller chercher cette
information. Dans cette recherche, il s'attend à trouver de l'information utile et un contenu
pertinent et actualisé. Dans le cas contraire, l'internaute s'en ira frustré et on peut parier qu'il ne
remettra jamais les pieds dans votre site.

N'oubliez pas non plus que le Web est un marché très concurrencé et que la plupart des
sujets d’informations sont ou seront traités à de multiples reprises. La différence se fera
sur la qualité et le détail du contenu.

L'internaute moyen après avoir longuement vagabondé dans tous les sens sur la toile, se limite
très souvent, après quelques mois, à une vingtaine de sites qui correspondent à ses centres
d'intérêt et qu'il revisite à intervalle régulier. Ces sites ainsi "élus" le sont non pas pour le
graphisme puisqu'il le connaît par cœur et ne le regarde même plus, non pas pour la facilité de
navigation puisqu'il l’oublie tellement il se sent à l'aise, mais pour le contenu et surtout son
actualisation régulière. Le contenu est le meilleur moyen de fidéliser le public. Faire venir le
visiteur sur votre site, c'est bien, le faire revenir c’est assurément la plus belle réussite !

11 octobre 2009 23242407.doc Page 50 sur 84


Systèmes Répartis INTERNET Site Web

Le Web est large et les publics sont variés. De la vulgarisation à l'expertise, chaque niveau a sa
place pourvu que le sujet soit traité de façon cohérente. Il est parfois plaisant d'avoir une
explication claire et simple sur un sujet déterminé sans devoir entrer dans des développements
pointus mais compliqués. Rien n'empêche alors de préciser d’entrée les limites du site.

Bien que l'auteur ne soit pas un champion en la matière, des fautes d'orthographe "énaurmes et
trop nombreuse" non seulement agacent votre lecteur mais surtout déprécient la crédibilité de
votre contenu et l'image de votre site. De grâce, il existe des correcteurs d'orthographe et des
bons samaritains de la langue française pour vous relire !

1.6 Présentation visuelle


Sans le graphisme, le Web ne serait pas ce qu'il est.

A n'en pas douter, le Web a véritablement décollé grâce à son côté visuel. Par visuel, nous
entendons non seulement les images et autres éléments graphiques mais également les
animations que permettent les développements technologiques comme le Java, le Javascript et le
DHTML.

Dans les 30 secondes qui sont accordées pour convaincre un internaute à entrer dans le site, le
visuel prend toute son importance. Un aperçu du contenu éveillera assurément son intérêt mais
c'est le visuel qui entraînera le clic "gagnant" vers l'intérieur de votre site.

Il ne faut cependant pas en conclure qu'il est indispensable d'être un infographiste de génie pour
faire un site. L'important est bien que le visuel soit adapté au public... Et puis n'oubliez pas qu'un
visuel sobre, net et attrayant suffit dans la plupart des cas.

Soulignons aussi que le visuel doit garder le visiteur sur le contenu et non le distraire de celui-ci.
Le visuel est aussi (ou surtout ?) une autre façon de communiquer le contenu au visiteur. En
aucun cas, il ne sera une occasion pour se faire plaisir ou étaler gratuitement ses talents
graphiques.
Enfin, il ne faut pas oublier que les internautes comportent, comme dans la vie de tous les jours,
leur lot de myopes, presbytes et autres daltoniens. Pensez à eux avec des couleurs nettes et des
images vraiment informatives.

Le visuel est aussi fort utile pour structurer les propos et agrémenter la mise en page. On veillera
à créer tout au long des pages d'un site une identité et/ou une cohérence visuelle qui guidera
l'internaute tout au long de sa visite. On prêtera une attention particulière à cette identité visuelle
lorsque plusieurs personnes participent à l'élaboration du site.

Cet aspect visuel doit impérativement tenir compte de l'aspect fonctionnel de la publication sur
Internet et tout spécialement du temps de chargement des images et du temps de réponse des
animations (Java et dans une mesure moindre le DHTML). Mis à part les sites à caractère
pornographique, la patience de l'internaute moyen est vite épuisé... A ce stade de développement
d'Internet et des télécommunications, le visuel et spécialement la taille des images sont encore

11 octobre 2009 23242407.doc Page 51 sur 84


Systèmes Répartis INTERNET Site Web

toujours une question de compromis. On oublie trop vite qu’un site se juge en ligne à partir du
réseau et non à partir de son disque dur !

Notons pour terminer que le visuel d'un site vieillira bien plus vite que le contenu. La Web a ses
modes (mais oui, mais oui...) et il faudra penser à rafraîchir régulièrement le visuel du site.

1.7 Aspect fonctionnel


Comprendre le fonctionnement du Web et le comportement des internautes.

L'écran du visiteur et surtout le Web sera le support de la publication. Ce nouveau moyen de


communication a non seulement ses spécificités techniques mais aussi déjà ses "us et coutumes".

Si dans la publication papier, il suffit de tourner la feuille, sur le Web il faudra composer avec le
temps de chargement de la page.
Commençons par le texte. Une page de 15 à 30 K (équivalent à une feuille A4 maximum) ne
pose pas de problèmes. Au-delà, le temps de chargement devient pénalisant surtout si en plus,
cette page comporte de nombreux tableaux imbriqués qui ralentissent le chargement.
Mais n'oublions pas qu'en langage HTML, toutes les images sont des fichiers séparés qu'il faudra
charger après celui de la page. Un total d'images de 30 à 50 Ko semble être la norme. Au-delà
des 80 Ko pour une image, le délai d'attente entame le capital patience de certains visiteurs et
devient quelque chose de prohibitif surtout pour une page d'accueil. N'oublions pas qu'une image
chargée reste dans le "cache" du navigateur, que ce dernier ne la rechargera plus à partir du
réseau mais à partir du disque dur, ce qui entraîne un chargement immédiat. Ceci permet d'user
et d'abuser d'éléments graphiques tels que des boutons, des puces, des tirets de séparations et
d'autres bannières que l'on retrouve de page en page, d'éléments graphiques qui agrémentent la
mise en page et forment ainsi l'identité visuelle d'un site.

Ces différentes (petites) pages doivent être structurées de façon logique afin que l'internaute
puisse naviguer efficacement dans le site. Nous avons consacré plus avant dans le module un
chapitre particulier sur les différentes structures d'un site Web. Il faudra aussi prévoir de petites
icônes pour que l'internaute puisse utiliser aisément cette structure et se retrouver à tout moment
dans l'exploration de votre site. Les maîtres du Web conseillent de prévoir pour chaque page une
possibilité de retour à la page d'accueil. Ces petites icônes de navigation devront être d'un
graphique simple et d'une symbolique intuitive.

L'essence du Web est la notion d'interactivité :


 interactivité entre les pages du site,
 interactivité entre le site et les autres sites présents sur le Web,
 interactivité entre le Web et les autres outils disponibles sur Internet (qu'il s'agisse des
moteurs de recherche, des e-mails, des listes de diffusion, des forums, des fichiers à
télécharger, etc.).
 interactivité, enfin, entre les visiteurs et l'auteur.
Tout concepteur d'un site Web doit toujours veiller à créer cette interactivité que
ce soit simplement par adresses de courriel cliquables, ou par l’intermédiaire de
formulaires (livres d'or) à caractère plus "officiels".
11 octobre 2009 23242407.doc Page 52 sur 84
Systèmes Répartis INTERNET Site Web

Les passionnés de la Toile n'ont jamais lors de la visite d'un site été dans l'obligation de
télécharger un plug-in, changer de navigateur (browser), modifier la résolution d'écran ou le
nombre de couleurs de son ordinateur.
Un site s'il peut être optimisé pour une configuration déterminée, doit rester compatible quel que
soit le visiteur. Tous ces critères de jugement rendront le site conforme à l'esprit d'universalité du
HTML et du Web.

2. Critères de jugement
Il suffit dans un premier temps de reprendre les lignes de force définies ci-dessus dans un ordre
légèrement différent :
• Contenu,
• Fonctionnel
• Visuel

D'autres critères touchant à l'organisation du site, aux techniques utilisées, au respect du cahier
des charges initial ont été ajoutés.
Les différents critères et sous-critères énumérés ci-dessous ne se veulent pas exhaustifs.

2.1 Contenu
• Intérêt du sujet
Est-ce que le sujet est original ? A-t-il déjà été traité par d'autres sites ? Dans
l'affirmative, est-ce que le sujet a été traité de façon pertinente ou originale ?
• Proportion d ‘éléments aspirés
Ce critère sanctionne les sites qui insèrent les pages d'autrui aspirés sans les modifier, des
photocopies de magazines, etc…
• Importance texte - photos
Ce critère juge les pages trop orientées texte ou uniquement composées de photos sans
commentaires. Un juste équilibre entre les deux, à la manière des magazines, doit être
trouvé.
• Pertinence du contenu (texte)
Le parcours de l'ensemble du contenu reste une appréciation majeure. L'internaute va
trouver ou non l'information recherchée, une information valide ou non, pertinente ou
non. La façon de présenter le contenu, des mots les plus importants aux détails est
important. La qualité du style est appréciable.
• Sons, Vidéos
La présence d'éléments multimédias supplémentaires augmente la valeur ajoutée du site
et permet de départager des sites ex-æquo sur tous les plans. Pour cela, le concepteur peut

11 octobre 2009 23242407.doc Page 53 sur 84


Systèmes Répartis INTERNET Site Web

insérer de manière judicieuse des petites vidéos non gourmandes en bande passante ou
sonoriser de manière non excessive un certain nombre de pages du site.
• Cohérence d’ensemble
L'analyse d'ensemble du contenu reste très important : présence de rubriques hors sujet,
sujet traité complètement ou partiellement, site synthétique ou non, pertinence des
rubriques.

2.2 Fonctionnel
• Profondeur du site
Quelle que soit l'architecture choisie, il s'agit de vérifier que l'on atteint le niveau le plus
bas du site en 5 clics.
• Problèmes de Liens
Ce critère vérifie la présence de liens rompus.
• Nombre de liens par page
Un site est abouti s'il applique la structure réseau (voir chapitre architecture). Il s'agit ici
dans une première démarche d'analyser l'architecture du site. Quelle que soit la réponse,
la présence de liens permettant d'atteindre n'importe quelle page du site à partir d'une
page donnée rehausse la valeur du site. Les liens appartenant aux barres de navigation ne
sont pas pris en compte, alors que les liens posés sur une image MAP le sont.
• Structure de la page
Il s'agit ici d'analyser la structure interne d'une page. Toute page doit comporter un titre.
Si celle-ci est longue d'au moins deux pages écran, elle doit proposer en dessous du titre
un sommaire de page permettant d'atteindre chaque paragraphe de la page (ou autre
division), d'où l'existence de liens internes. Depuis le pied de page, le visiteur doit
pouvoir revenir au sommaire de page par lien interne.
• Eléments (barres) de navigation
Outre le menu général présent dans tout site normalement constitué, des barres de
navigation peuvent être créées pour circuler à l'intérieur d'une rubrique comportant des
boutons intitulés page suivante et page précédente. Le minimum à installer est de pouvoir
revenir à la page d'accueil, ainsi qu'en tête de rubrique.
• Temps de chargement
Le temps de chargement dépend d'une part de l'encombrement du réseau ou plutôt de la
bande passante réservée au visiteur mais d'autre part et surtout dépend de la taille des
fichiers téléchargés sur le poste du visiteur. Il faut limiter les pages à une taille de 15 à 30
Ko, celles des images entre 50 et 80Ko, celles des applets Java à 100Ko.
La page d'accueil, primordiale pour l'appréciation du site, ne doit pas être trop chargée
d'images ou d'applets.
• Portabilité

11 octobre 2009 23242407.doc Page 54 sur 84


Systèmes Répartis INTERNET Site Web

Le site Web est destiné par essence à un public très éclectique aussi bien sur le plan du
système d'exploitation utilisé que sur le plan du navigateur favori. La portabilité d'un site
fait partie des éléments de jugement obligatoires du monde Web.

2.3 Visuel ou Esthétique


• Arrière-plan
La couleur d'arrière-plan peut être jugée de façon intrinsèque (en rapport avec le sujet),
ou en liaison avec le texte (harmonie des couleurs, importance du fond par rapport au
texte). S'il s'agit d'une image, le choix du motif peut être mis en cause ou la taille de
l'image initiale (problème de résolution d'écran entraînant un effet damier portant atteinte
à l'esthétique du site).
• Police
Les polices vont être jugées suivant leur nombre au sein d'une même page (inférieur à
trois) ou leur couleur (en accord avec le fond, mots importants, légendes textuelles, etc...)
ou leur taille (illisibilité, trop gros). Le choix judicieux des polices peut être apprécié.
Les polices les plus utilisées sont Verdana ou Arial, ou Times New Roman.
• Agencement des éléments
La pagination style magazine va être utilisée pour juger du découpage des pages. En
dehors des zones réservées au titre et au sommaire de page, les autres zones doivent être
remplies de manière à ne laisser aucun vide derrière soi.
Le juste alignement des objets de la page les uns par rapport aux autres peut entrer en
considération dans ce critère.
• Absence de bordures
Une attention particulière est apportée au choix des bordures de tableaux (absence ou
présence justifiée, couleurs, épaisseur, effet 3D grâce aux feuilles de style). Il en est de
même pour les bordures d'images : bordures volontairement artistiques ou liées aux liens
posés dessus. Les bordures de cadres peuvent faire l'objet de la même attention.
• Cadres
La présence d'une page d'accueil découpée en cadres exige que le concepteur sache gérer
finement cette technique. En général, les concepteurs choisissent de ne pas laisser le
visiteur retailler la dimension des cadres, de bannir la présence d'ascenseurs pour
visualiser l'intégralité du sommaire ou du titre par exemple.
• Minimum d'ascenseurs
La présence d'ascenseurs horizontaux (barre de défilement) est à proscrire. La présence
d'ascenseurs horizontaux doit se limiter à deux voire trois écrans.

2.4 Organisation
En dehors de ces trois familles de critères, un site peut être jugé aussi sur l'organisation physique
du site et donc sa facilité à le maintenir.

11 octobre 2009 23242407.doc Page 55 sur 84


Systèmes Répartis INTERNET Site Web

• Page d'accueil = index.htm ou index.html


Ce nom de fichier donné à la page d'accueil se trouve être le premier nom configuré dans
les serveurs Web.
• Organisation des fichiers
Le chapitre portant sur l'organisation physique renseigne sur les critères attendus.
Synthétiquement, en fonction du contenu du site, l'on attend une structure de répertoires
permettant de stocker de manière séparée les éléments multimédias (images, sons) des
pages Web, les éléments techniques (scripts, applets, etc...) du reste du site.
• Nommage des fichiers
Les caractères espace et souligné sont déconseillés, ceci afin d'assurer une meilleure
portabilité. Les noms de fichiers ne doivent pas être trop longs ( <255 caractères) mais
suffisamment longs pour être explicites. Les noms doivent être en rapport avec le titre de
la page, ou le motif représenté pour une image.
• Fichiers inutiles
Une attention doit être portée lors de la publication du site. Il s'agit de transférer vers le
serveur hébergeur le site seulement et non les différents essais effectués.
• Titre des pages (balise title)
La balise title (titre apparaissant dans la barre du navigateur en vu et place du nom et
chemin de fichier) doit être considérée comme obligatoire. Dans le cas où la page
d'accueil décrirait un ensemble de cadres, seule celle de la page de définition des cadres
nécessite un titre au bénéfice du visiteur. Si les pages du site sont référencées auprès de
différents moteurs de recherche, il convient de renseigner ainsi chaque page.
• Charte
Afin de maintenir le site aisément, il est conseillé d'écrire une charte du site. Ce dernier,
outre le nom du site, renseigne sur : le but du site, les acteurs, sa localisation, son
architecture, son organisation, sa charte graphique, etc... Ce document peut être destiné
d’une part au concepteur qui va ne maintenir le site qu'à un rythme mensuel par exemple,
et d’autre part à l'hébergeur pour la surveillance du site, ou ...

2.5 Techniques
Les techniques utilisées peuvent aussi faire partie de la grille de critères.
Il existe un certain nombre de techniques permettant d'insérer de l'interactivité ou un
comportement dynamique à la page Web (voir le module HTML dynamique).

Scripts
Outre la page de formulaire destinée à faire apprécier le site par le visiteur, le concepteur peut
utiliser des scripts pour tester le type de navigateur du visiteur, gérer le menu général du site,
informer le visiteur par l'ouverture de fenêtres popup, afficher des images, etc...
Feuilles de style

11 octobre 2009 23242407.doc Page 56 sur 84


Systèmes Répartis INTERNET Site Web

La technique des feuilles de style a pour but de donner un style homogène à une page, à toute
une partie du site (niveau rubrique), sinon à tout le site. La maîtrise de cette technique améliore
le visuel porté sur le site. Entre autres, il met en valeur le texte par le surlignement, il crée des
faux boutons à partir de la gestion des bordures de texte. Par ailleurs, il place les objets à un
endroit déterminé de la page, ce qui nous permet de superposer des images ou objets (techniques
des calques).

Une autre technique est d'utiliser les Server Side Includes.

Toutes ces techniques ne demandent pas au serveur de lancer une application.


Le site sera jugé sur le plan technique d'une manière différente s'il sollicite l'exécution de
programmes hébergés par ce dernier. Un autre module consacré aux applications Web se
chargera d'apprécier ce genre de site.

2.6 Contraintes
Dans le cadre d'une structure de projet ou d'un travail pratique de cours dispensé sur le sujet, un
site va être jugé selon qu'il respecte ou non le cahier des charges ou les contraintes définies au
préalable. Ceci est important si le site proposé est en concurrence avec d'autres sites.

3. Conclusion
La lecture de ce chapitre achevée permet au concepteur néophyte d'avoir tous les éléments (ou
presque) pour se consacrer au site, non seulement dans la phase de conception mais aussi dans la
phase de test et de validation.
Organisation et méthodes sont les mots-clés assurant une validation solide du site.

Il ne faut pas hésiter à solliciter d'autres avis que le sien pour faire apprécier et juger un site,
tester une mise en ligne officieuse à l'aide de partenaires.
La persévérance reste le meilleur conseil !

11 octobre 2009 23242407.doc Page 57 sur 84


Systèmes Répartis INTERNET Site Web

Chapitre 5 : Publier le Site


Ce chapitre intéresse tout aussi bien les concepteurs de sites personnels que les concepteurs de
site d'entreprise à vocation Intranet ou Internet.

Créer un site ne se justifie que si des gens le visitent... Il faut donc, une fois le site terminé et
validé, le rendre public, c'est-à-dire accessible à n'importe quel personnel de l'entreprise dans le
cas d'un site Intranet, à n'importe quel internaute dans le cas d'un site Internet. En d'autres
termes, il faut le mettre en ligne, c'est-à-dire transférer le site depuis la station de l'internaute (en
bas à gauche dans le schéma ci-dessous) vers le serveur Internet hébergeur du site (en haut à
droite).

Avant d'effectuer la publication proprement dite, diverses opérations préalables sont nécessaires :
• donner un nom au site,
• trouver un organisme hébergeur du site.

1. Opérations préalables
1.1 Nom du site
Site d'entreprise
Le nom de domaine donné au site peut, auprès d'un organisme adéquat rencontré sur le réseau
Internet, soit :
11 octobre 2009 23242407.doc Page 58 sur 84
Systèmes Répartis INTERNET Site Web

• se louer,
• être obtenu gratuitement sans compensation, ou gratuitement moyennant l'accueil d'un
certain nombre de bandeaux publicitaires.

Voici trois exemples de sites offrant des services de location :


ère
 http://www.amen.fr/ (6 francs HT/mois pour la 1 offre)
 http://www.gandi.net/ (12 euros par an)
 http://www.domaindirect.com ( $24.99 par an)

Le nom de domaine doit respecter un certain nombre de règles de nommage couramment


admises dans le monde Internet, notamment en ce qui concerne le suffixe emprunté soit aux
domaines de plus haut niveau (TLD ou Top Level Domain), soit aux bigrammes réservés aux
pays du monde entier, soit les deux combinés en prenant soin de terminer le nom par le
bigramme du pays :
• TLD : suffixes d’origine (.com, .net, .edu, .net, .gov, .mil, .int), suffixes récents (.arts,
etc.)
• Bigrammes des pays : .fr pour la France, .de pour l'Allemagne, etc...

Tout organisation ou particulier voulant terminer son nom de domaine par le suffixe ".fr" doit
s'adresser à un prestataire Internet ayant signé une convention d'adhésion à l'AFNIC (liste d'au
moins 1000 prestataires sur le site en question). Ce prestataire s'adressera alors à l'AFNIC pour
obtenir la création du nom de domaine correspondant.
Pour plus de renseignements sur la zone ".fr", il faut consulter les chartes présentes sur le site :
 http://www.nic.fr/enregistrement/nommage.html.

Le nom donné au site doit être unique sur le réseau Internet. Il ne doit pas être pris par un autre
site, ou trop se rapprocher du nom d'un site existant pour éviter les confusions de genre, ou être
source de tracasseries administratives ou juridiques. Des bases de données "Whois" renseignent
sur la préexistence de ce dernier.
Le premier site officiel à consulter est : http://www.nic.fr/cgi-bin/whois, la base de données de
l'AFNIC.

Site personnel
Dans le cas d'un site personnel, l'internaute s'adresse en premier lieu à son fournisseur d'accès.
Si ce dernier ne convient pas, un certain nombre de sites, pas forcément associés à des
fournisseurs d'accès, proposent des hébergements.
Quel que soit l'hébergeur personnel élu, le nom du site comportera son adresse Internet du style:
• www.nom_hébergeur.fr.
L'hébergeur crée alors un répertoire personnel portant le nom de l'internaute ou un pseudonyme
choisi librement par ce dernier (si non déjà utilisé).
L'adresse URL du site est alors du genre : www.nom_hébergeur.fr/répertoire_du_site.
Une variante de l'adresse URL peut être : www.nom_du_site.nom_hébergeur.fr.

L'adresse de publication sera pratiquement la même que l'adresse destinatrice du transfert du site.

11 octobre 2009 23242407.doc Page 59 sur 84


Systèmes Répartis INTERNET Site Web

1.2 Site hébergeur


Pour l'hébergement, trois choix sont offerts :
• trouver un serveur Web (ou HTTP) existant qui puisse vous héberger (exemple du
fournisseur d'accès dans le cas d'un site personnel),
• mettre en place un serveur HTTP permanent au sein de l'entreprise,
• mettre en place un serveur HTTP intermittent (le temps de la connexion, exemples d’un
serveur local de test pour le partenaire de développement ou d’un serveur local limité aux
amis).

Serveur Internet présent sur le réseau des réseaux


Outre le fournisseur d'accès officiel de l'entreprise, le site peut être hébergé chez un
professionnel.
Généralement, ce dernier désire réaliser lui-même le site Web et offrira à la fois les services de
réalisation et d'hébergement.
Pour la confection du site, selon sa complexité, il faut compter entre 3.000 F et plus de 10.000 F.
Il est conseillé de prévoir aussi un petit budget pour la promotion et la maintenance des pages
Web du site Internet.
Pour l'hébergement seul, suivant la qualité du service fourni, la prestation peut aller de 700 F à
1500 F par an.
Des services de Mailing (comptes personnels et mailing list) et des statistiques de trafic, URL
référentes, mots clés référents, etc… sont proposés par le professionnel qui peut aussi prendre en
charge tout l'aspect administratif de la gestion des noms de domaines et des changements de
délégation.
Dans le cas où la stratégie d'entreprise choisirait de diversifier ses fournisseurs (hébergeur et
loueur de nom de domaine par exemple), l'enregistrement du nom de domaine (www.votre-
société.com) peut coûter environ 150 FRF pour 2 ans (2ème semestre 2001) et l'hébergement à
partir de 50 FRF par mois.
Le professionnel peut nous proposer, soit un hébergement sur serveur mutualisé (plusieurs sites
de plusieurs organismes sur le même serveur), soit un hébergement sur serveur dédié.
De toute façon, l'offre professionnelle d'hébergement doit s'adapter à tous les types de sites et à
tous les types de trafic. Une offre de qualité peut reposer sur les 5 grands principes ci-dessous:

• fiabilité et sécurité
• variété des applications
• qualité des connexions
• hébergement personnalisé
• informations

Fiabilité et sécurité
Les serveurs et ceux des clients sont installés dans des locaux climatisés, télé surveillés 24h/24
avec une présence technique permanente pendant les heures ouvrables. Les sites et les bases de
11 octobre 2009 23242407.doc Page 60 sur 84
Systèmes Répartis INTERNET Site Web

données sont installés sur des serveurs équipés d'une technologie Raid (reconstruction
automatique des données en cas de défaillance des disques) et d'une alimentation sécurisée
(double alimentation + courant secouru). Des sauvegardes régulières sont effectuées et stockées à
l'extérieur des locaux. Une protection anti-virus est activée en permanence.
Variété des applications
Les serveurs sont capables d'accueillir des bases de données de plusieurs types (SQL Server, My
SQL, Access et autres) sur demande aussi bien dans des environnements Microsoft Windows
(serveur HTTP IIS et Apache) que Linux. Les langages attendus au niveau applicatif sont de
plusieurs natures : PHP, ASP, Perl, C, C++ et SQL.
Qualité des connexions
L'équipe technique de la société d'hébergement, présente sur place, assure la hot-line pendant les
heures ouvrables et analyse les performances et le bon fonctionnement des connexions. Une
connectivité évolutive permet d'encaisser des pointes de trafic en fonction des besoins.
Hébergement personnalisé
Le client peut opter pour un hébergement sur serveur mutualisé (plusieurs sites sur le même
serveur) ou pour un hébergement sur serveur dédié.
Informations
Les sites hébergés bénéficient, selon les prestataires des services, de E-mailing (comptes
personnels et mailing list) et des statistiques de trafic, URL et mots clés référents (balises
META), etc…
Ils peuvent prendre en compte également l'aspect administratif de la gestion des noms de
domaines et des changements de délégation.
Une prestation de référencement peut être offerte, s'appuyant sur les techniques de
développement utilisées : pages statiques (HTML) mais également dynamiques (CGI, ASP, PHP,
PERL, etc.); autant d’éléments a priori invisibles des moteurs de recherche qui deviennent
référençables et rendent les pages disponibles auprès des Internautes.

Remarque :
Le choix du nom de domaine et celui de l'hébergeur ont été traités dans deux paragraphes
différents. En réalité, les prestataires actuels ont tendance à proposer les deux prestations. Mises
ensemble, elles peuvent coûter 107.21 € TTC (soit 703.25 FF TTC) par an.

Serveur présent dans l'entreprise


Les entreprises, en fonction de leur stratégie ou en fonction du personnel informatique qualifié
dont ils disposent, peuvent aussi bien décider du premier type d'hébergement que du deuxième.
La suite du paragraphe traite du cas où l'entreprise choisit d'héberger son propre serveur. Ces
besoins seront différents en matière de serveur s'il s'agit d'un site "vitrine" destiné à assurer une
stratégie de communication de l'entreprise, ou d'un système d'information type Web.

Pour ce qui est du matériel, un simple PC doté d'un microprocesseur Pentium 133 suffit pour une
centaine de clients. Au-delà, il faut investir dans une machine plus puissante, voire une machine
de type serveur. D'autre part, les ressources mémoire du serveur varient en fonction de

11 octobre 2009 23242407.doc Page 61 sur 84


Systèmes Répartis INTERNET Site Web

l'utilisation du serveur. Voici un petit tableau synthétisant grossièrement les configurations


nécessaires pour des utilisations standards :

Type de serveur Mémoire vive Mémoire de masse


Serveur HTTP classique pour site vitrine <64 Mo 9 Go
Serveur Applicatif utilisant des programmes de
<128 Mo 9 Go
scripts (ASP/PHP/JSP)
Serveur Applicatif utilisant les autres techniques <256 Mo 18 Go (+ RAID)
Serveur de streaming (vidéo, visioconférence) <512 Mo 18 Go (+ RAID)

A titre d'exemple, un site d'enseignement universitaire à distance nécessite un espace disque de


2Go.
Suivant la vocation du site, Intranet ou Internet, l'hébergement s'effectuera sur des serveurs
différents.
Dans le cas d'un site Intranet (réseau Internet réduit à la portion congrue de l'entreprise), l'achat
et l'installation d'un serveur restent peu onéreux (voir paragraphe sur les serveurs).
Dans le cas d'un site vitrine ou marchand, posséder son serveur HTTP permanent est une
solution peu onéreuse si l'on possède une ligne louée (ligne spécialisée louée auprès de
l’opérateur national France-Télécom).

2. Transfert de fichiers
La publication d'un site proprement dit consiste à transférer les fichiers composant le site depuis
la station de développement de l'internaute vers le serveur de la société choisie pour héberger le
site. Une fois présent sur le serveur, le site est rendu public sur le réseau Internet.

Avant d'énumérer les moyens disponibles de publication de site, rappelons sommairement


comment fonctionne le service de transfert de fichiers, un des services les plus anciens du réseau
Internet. Pour ceux qui veulent en savoir plus, il est conseillé de se reporter au module "Services
Internet".

Le mode de transfert de fichiers le plus couramment utilisé sur le réseau Internet repose sur
l'emploi du protocole FTP (File Transfert Protocol).
Les services de transfert reposent sur le principe client - serveur. L'émetteur du transfert est le
logiciel client du concepteur, qu'il soit spécialisé ou autre. Le destinataire du transfert est le
serveur FTP de la société choisie pour héberger le site.

Quel que soit le moyen utilisé, le client a besoin de récupérer trois éléments techniques auprès du
site « publieur » :
 Une adresse URL de publication sur le serveur FTP de l'hébergeur : nom
du serveur (ou adresse IP), puis chemin de publication spécifique au site
donné
 Un identifiant de connexion permettant au serveur de reconnaître le client
11 octobre 2009 23242407.doc Page 62 sur 84
Systèmes Répartis INTERNET Site Web

 Un mot de passe pour protéger l'accès au lieu de publication

Suivant la nature du site à publier, l'hébergeur peut indiquer plusieurs adresses situées sur le
même serveur. En effet, si un élément du site nécessite l'exécution d'une application, ces
applications peuvent être hébergées de manière séparée du site HTML statique ou vitrine par le
webmestre du site hébergeur.
Le premier exemple d'application à donner est celui du compteur de visites d'un site que l'on
rencontre encore fréquemment sur un certain nombre d'entre eux. Si le concepteur ne dispose pas
de compteur, le site hébergeur lui-même peut lui en proposer plusieurs modèles.

L'objet des paragraphes suivants est de décrire fonctionnellement les outils en question puis de
détailler techniquement la procédure à suivre.

3. Site de l'hébergeur
Pour illustrer ce paragraphe, il a fallu choisir arbitrairement un hébergeur parmi d'autres : le site
Voilà de France-Télécom.

Sur la page d'accueil existe un lien dédié à la publication de site : "pages perso : hébergement
gratuit".

11 octobre 2009 23242407.doc Page 63 sur 84


Systèmes Répartis INTERNET Site Web

La deuxième page prend en compte le fait que le concepteur de pages Web soit un néophyte
(Assistant en ligne) ou un concepteur expérimenté (FTP Web).

La troisième page invite à créer (déclarer) le site auprès de l'hébergeur.

11 octobre 2009 23242407.doc Page 64 sur 84


Systèmes Répartis INTERNET Site Web

La quatrième page invite le « concepteur » à définir un compte d'accès à son futur lieu de
publication sur le serveur.

11 octobre 2009 23242407.doc Page 65 sur 84


Systèmes Répartis INTERNET Site Web

La cinquième page demande si l'on veut rajouter des renseignements complémentaires.

La sixième page valide l'adhésion et les renseignements indiqués au préalable.

11 octobre 2009 23242407.doc Page 66 sur 84


Systèmes Répartis INTERNET Site Web

Un courrier électronique vient confirmer la prise en compte de l'adhésion de l'internaute au


service d'hébergement.

4. Moyens nécessaires
Le concepteur, d'une manière générale, accède à travers le réseau, au serveur qui héberge le site,
qu'il soit sur le réseau Internet ou sur le réseau local de l'entreprise,. Cependant, plusieurs cas de
figure se présentent.

Pour le concepteur du site Intranet de l'entreprise, il suffira d'atteindre depuis la station de


développement le serveur présent sur le réseau local de l'entreprise.
Pour le concepteur de site personnel, il suffira d'atteindre depuis sa station, à travers le réseau
Internet, le serveur du fournisseur d'accès ou celui du site hébergeur.
Pour le concepteur du site vitrine Internet de l'entreprise, deux cas sont à différencier. Soit le
serveur hébergeur est situé chez un professionnel de l'hébergement, alors le concepteur se
retrouve dans le cas de l'internaute classique. Soit le serveur est présent dans l'entreprise, alors ce
dernier est en général isolé du réseau local de l'entreprise. Dans ce cas, le concepteur doit
transiter par une station reliée au serveur, ou directement travailler sur ce dernier.

Quel que soit le cas de figure, pour publier le site Web, le concepteur dispose de plusieurs
moyens :
 Un logiciel spécialisé dans le transfert de fichiers,
 Des fonctionnalités avancées de l'éditeur HTML,

11 octobre 2009 23242407.doc Page 67 sur 84


Systèmes Répartis INTERNET Site Web

 De l'assistant de publication livré avec le navigateur "Internet Explorer" dans


l'environnement Windows,
 Si l'internaute, concepteur de site, a installé le serveur Web "PWS" (Personal Web
Server) livré avec le système d'exploitation Windows pour tester son site, utiliser
sa fonction de publication.

5. Logiciel spécialisé
Il existe une quantité de logiciels de transferts de fichiers disponibles sur le réseau Internet. Leurs
modes de fonctionnement restant analogues, décrire l'un d'entre eux revient à décrire les autres.
Un des logiciels les plus utilisés reste WS-FTP95LE (société Ipswitch).

Une fois le logiciel lancé, deux fenêtres s'ouvrent :


• Une correspondante à l'écran principal,
• Une deuxième proposant au client de se connecter sur un serveur donné.

Fermons la deuxième fenêtre (cliquer sur "Cancel" ou...) pour décrire d'abord sommairement la
fenêtre principale.

Celle-ci est partagée en deux zones d'affichage : une concerne la station locale (local system) et
son système de fichiers, l'autre concerne le serveur distant (remote system) et l'organisation
spécifique du service FTP.
11 octobre 2009 23242407.doc Page 68 sur 84
Systèmes Répartis INTERNET Site Web

La zone de gauche garde le souvenir de la dernière opération, et notamment l'affichage de la


zone du dernier téléchargement par exemple.

Pour chaque zone, le logiciel propose un certain nombre de boutons d'action. Pour se déplacer
dans l'arborescence d'une station, il est possible de le faire directement dans la zone d'affichage :
• pour descendre sous un répertoire, double clic sur ce dernier,
• pour remonter, double clic sur les deux points "..".
Autrement, le bouton "Chgdir" offre une alternative.

Pour spécifier le type de fichier transféré, en dessous de ces deux zones, se trouvent deux
possibilités : soit deux boutons radio à choix exclusif, soit une case à cocher laissant le logiciel
décider.
La zone immédiatement inférieure sert à afficher le résultat des différentes opérations effectuées
sur le serveur une fois la connexion réussie.

Le plus intéressant en dehors de ces deux zones reste la barre de boutons d'action du bas.
Le premier bouton à actionner pour se connecter sur un site FTP est "Connect".
La deuxième fenêtre, évoquée en début de paragraphe, se lance.

Le logiciel présente par défaut un certain nombre de profils de connexion (Session Profile) pré
configurés sur des serveurs universellement connus. Pour en voir la liste, il suffit de dérouler la
fenêtre "Profile Name". A chaque profil correspond une adresse sous forme chiffrée (adresse IP)
ou un nom de domaine (Host_Name).
Si l'adresse indiquée par l'hébergeur ne se trouve pas dans la liste, il faut alors créer un nouveau
profil (bouton New).

La première chose à faire est de donner un nom parlant à ce nouveau profil, "hebergeur" par
exemple. Ensuite, il faut renseigner plusieurs champs obligatoires :

11 octobre 2009 23242407.doc Page 69 sur 84


Systèmes Répartis INTERNET Site Web

• L'adresse du serveur FTP de l'hébergeur dans le champ "Host_Name" du style


"www.monhebergeur.com",
• Le nom d'utilisateur choisi lors de l'inscription chez l'hébergeur dans le champ "User ID"
• Le mot de passe choisi lors de l'inscription dans le champ "Password"
• Le chemin sur le serveur FTP distant pour atteindre le répertoire de publication propre au
client dans "Initial Directories / Remote Host"
• Optionnellement, la localisation du site à publier sur la station locale dans le champ
"Local PC"

Une fois le profil défini, n'hésitons pas à le sauvegarder en actionnant le bouton "Save".
Le fait d'actionner le bouton "OK" lance la procédure de connexion.

Supposons que la connexion ait réussi ! Alors les deux flèches de transfert situées entre les deux
zones de la fenêtre principale décrite plus haut sont activées. La flèche orientée vers la gauche
est utilisée pour télécharger alors que celle de droite sert à publier le site.
Il ne reste plus qu'à sélectionner dans la zone de gauche (Local System) le contenu du site à
publier (et non le répertoire qui le contient). Les touches du clavier "Ctrl" et "Shift" permettent
de sélectionner respectivement le contenu élément par élément ou le tout. Une fois la sélection
terminée, il suffit d'actionner la flèche droite pour démarrer la publication.

Deux cas se présentent dans la zone de droite (Remote System) :


• Soit il s'agit de la première connexion, alors le répertoire visé sur le serveur est
normalement vide (ne pas s'affoler),
• Soit il s'agit d'une Xième connexion, le répertoire contient la précédente version du site.

Dans le cas d'une mise à jour du site, il convient avant de démarrer la nouvelle publication de
nettoyer le site des fichiers désormais périmés. Il est conseillé de supprimer les répertoires
modifiés avant de publier les nouvelles versions.
11 octobre 2009 23242407.doc Page 70 sur 84
Systèmes Répartis INTERNET Site Web

Ces mises à jour ne peuvent être réalisées que par quelqu'un qui connaît particulièrement
l'organisation physique du site.

6. Editeur avancé
6.1 Macromedia Dreamweaver
Un des deux éditeurs les plus utilisés actuellement, Dreamweaver, propose des services de
publication.
A partir de la version 2.0 de l'éditeur, il est possible depuis une fenêtre spécifique, de travailler à
la fois sur le site de développement présent sur son ordinateur personnel et sur le site publié
auprès de l'hébergeur.
Pour cela, l'éditeur nous propose d'établir la carte du site, ou plutôt la "définition du site" selon
ses termes. Dans la barre de menus, un menu "Site" nous est proposé. Une fois le menu déroulant
activé, il faut choisir le sous-menu "Définir les Sites".
La fenêtre ci-dessous s'ouvre.
La zone de texte de gauche comprend quatre "catégories". Pour chaque catégorie sélectionnée,
les champs de droite diffèrent. Nous allons détailler comment renseigner ces différents champs.

1. Catégorie "Infos Locales"


Il s'agit de définir ici le lieu de développement du site. Il peut se situer en local sur la machine
ou vu à travers un partage réseau sous PC.
Passons en revue les différentes fonctionnalités et énumérons les opérations à effectuer :
• En premier, donner un nom au site (étiquette) pour le distinguer des autres sites à définir
• Aller chercher sur le disque local la racine du site en cliquant sur l'icône "parcourir"
• Possibilité de définir l'adresse du site final pour les liens à adresses absolues
• Possibilité de créer un cache secondaire pour l'éditeur Dreamweaver
11 octobre 2009 23242407.doc Page 71 sur 84
Systèmes Répartis INTERNET Site Web

2. Catégorie "Infos du Serveur Web"


Il s'agit de définir ici le lieu de publication du site. Il peut être atteint, soit par l'intermédaire
d'un réseau local à travers un partage réseau, soit par serveur FTP dont il faut paramétrer l'accès.

Accès au lieu de publication via le réseau local


En supposant que le concepteur du site ait accès au serveur via une ressource partagée, ce dernier
doit :
• Aller chercher le répertoire distant
• Laisser cocher la case "actualiser les fichiers distants " pour faire prendre en compte
automatiquement par le logiciel tout changement intervenu entre la dernière carte
mémorisée et une nouvelle arborescence physique effectuée en dehors du logiciel.
Si la case est non cochée, le concepteur est obligé de cliquer sur "actualiser" dans la fenêtre
"carte du site".

Accès au lieu de publication via Internet


Dans ce cas, les champs suivants sont à renseigner :
• Donner l'adresse du serveur FTP (adresse IP ou nom de domaine équivalent) de
l'hébergeur (Hôte FTP),
• Indiquer le répertoire personnel attribué par l'hébergeur, répertoire destinataire du
transfert du site situé sur le serveur de publication,

11 octobre 2009 23242407.doc Page 72 sur 84


Systèmes Répartis INTERNET Site Web

• Le nom d'utilisateur et le mot de passe obligatoires pour se connecter (enregistrement


possible),
• Possibilité de définir deux options de comportement à l'égard du pare-feu du site de
publication.

3. Catégorie "Archives / Extraire"

Cette catégorie n'est disponible que si la précédente a été activée. Elle est intéressante si le
concepteur de site travaille au sein d'une équipe (ou si l'on travaille seul, mais depuis plusieurs
machines).

11 octobre 2009 23242407.doc Page 73 sur 84


Systèmes Répartis INTERNET Site Web

L'option d'extraction est utile pour informer les autres qu'un fichier a été extrait du site de
publication pour le modifier, ou pour se rappeler qu'une version plus récente d'un fichier est
peut-être ouverte sur une autre machine.
L'option d'archivage consiste à retransférer les fichiers extraits et modifiés, ou publier les
fichiers nouvellement créés en local.
Le nom d'extraction sert à identifier le membre du groupe qui a extrait le fichier pour le
modifier.
Il s'agit du nom qui s'affichera dans la fenêtre du site à côté de tous les fichiers extraits.
Si l'on travaille seul sur plusieurs machines, on utilise un nom d'extraction différent pour chaque
machine (par exemple, PierreR-MacDomicile et PierreR-PCBureau), de manière à savoir où se
trouve la dernière version du fichier en cas d'oubli d'archivage.

4. Catégorie "Mise en forme de la carte du site"

Les différents champs permettent de paramétrer la présentation de la carte du site local :


• Définir la page d'accueil
• Dimensionner la fenêtre de la carte
• Choisir l'étiquetage des icônes
• La première option consiste à cacher une partie de l'arborescence pour faciliter le
travail sur les gros sites, donc masquer des fichiers. Cocher la case permet de les
réafficher en italique
• La deuxième option permet d'afficher les fichiers dépendants, c'est à dire les fichiers
de n'importe quel type (image, applets, etc...) appelés par une page Web

5. Catégorie "Design Notes" (à partir de la v3.0)

Cette catégorie est destinée au travail de groupe. Une fois le service activé, il permet d'associer à
chaque page Web conçue un fichier de notes ayant pour extension complémentaire .mno.
11 octobre 2009 23242407.doc Page 74 sur 84
Systèmes Répartis INTERNET Site Web

Trois choix sont proposés :


• Gérer "Design Notes"
Désactiver l'option pour désactiver le service, et effacer tous les fichiers de
"Design Notes" concernant le site.
Le déplacement d'un fichier dans le site entraîne celui du fichier "Notes"
associé. Celui-ci est rangé sous un dossier "_notes".
• Télécharger Design Notes pour les partager.
Si le concepteur est seul pour élaborer le site, il doit désactiver la case à
cocher pour ne pas transférer les notes sur le site distant afin de les faire
partager au groupe inexistant.
Ce téléchargement a lieu lorsque le créateur archive ou place les fichiers sur
le site distant.
• Bouton "Nettoyer"
Pour effacer du site des "Design Notes" non associées aux pages Web.

6. Cartes des sites de développement et de publication


Une fois ces cinq onglets ou catégories configurés, le logiciel construit les deux cartes de site : le
local et le distant si configuré. La fenêtre suivante, distincte de la zone de travail, permet donc de
gérer de manière dynamique les deux sites.

La fenêtre de gauche offre deux possibilités de représentation à l'aide des deux icônes de la barre
de menu situées en haut et à gauche : architecture physique ou arborescence du site sur le lieu de
publication, architecture logique ou structure des liens.

11 octobre 2009 23242407.doc Page 75 sur 84


Systèmes Répartis INTERNET Site Web

Dans le deuxième cas, le fait de cliquer sur un des fichiers de l'arborescence racine fait apparaître
les fichiers liés au premier. Il est possible de recommencer l'opération et de boucler sur la page
d'accueil.
La page de droite permet de gérer l'architecture physique du site local.

6.2 FrontPage 2000

11 octobre 2009 23242407.doc Page 76 sur 84


Systèmes Répartis INTERNET Site Web

L'éditeur FrontPage, depuis la version 2000, rassemble le logiciel de gestion de sites


(Explorateur) et celui purement dédié à l’édition de pages Web. Une fois le logiciel lancé, le
concepteur voulant gérer son site local de développement depuis son éditeur, ouvre le site Web
existant sur la station. Pour cela, il suffit d'aller dans le menu "Fichier / Ouvrir un site Web", puis
parcourir l'organisation du disque dur jusqu'à la racine du site.

Une fois le site ouvert, le concepteur retourne dans le menu "Fichier", puis clique sur l'option
"Publier un site". Une fenêtre apparaît demandant l'adresse URL de publication.

Si l'hébergeur n'a pas été choisi, l'éditeur propose un choix (bouton "Fournisseurs...").
Hormis ce choix, l'activation du bouton "Options" nous dévoile quelques paramétrages possibles.
11 octobre 2009 23242407.doc Page 77 sur 84
Systèmes Répartis INTERNET Site Web

Une fois que l'adresse URL de l'hébergeur est rentrée dans le champ adéquat, le concepteur
clique sur le bouton "Publier". Alors l'assistant de connexion au réseau Internet se lance.

7. Assistant de publication de sites Web de l'environnement


Windows
Avec le navigateur Internet Explorer est livré un assistant de publication. Dans "Démarrer /
Programmes", le concepteur laisse glisser la souris sur "Internet Explorer", et choisit l'option
"Assistant de Publication".

11 octobre 2009 23242407.doc Page 78 sur 84


Systèmes Répartis INTERNET Site Web

Le deuxième écran demande la localisation du site local.

Le troisième écran demande un nom (étiquette) au site.


11 octobre 2009 23242407.doc Page 79 sur 84
Systèmes Répartis INTERNET Site Web

Le quatrième écran définit l'adresse de publication du site, c'est-à-dire l'adresse du serveur


d'hébergement.
Une fois que la configuration est terminée, le système propose à l'internaute concepteur de site
de se connecter à son fournisseur d'accès pour effectivement transférer le site.

8. Gestionnaire de Serveur Web Personnel

11 octobre 2009 23242407.doc Page 80 sur 84


Systèmes Répartis INTERNET Site Web

Si le concepteur ou développeur de site a installé un serveur Web personnel, par exemple


"Personal Web Server" livré avec le système d'exploitation Windows, il peut à l'aide de son
gestionnaire publier le site.
Il suffit de cliquer sur l'icône "Publier" à gauche.
L'icône "Site Web" permet de définir au préalable la page d'accueil du site.

9. Conclusion
Ce chapitre représente l'aboutissement du projet de site Web. Avant de publier ce site, il convient
d'effectuer le maximum de tests pour être le plus parfait possible. Il s'agit d'impressionner
durablement les visiteurs du site dès leur premier passage.
Quel que soit le moyen utilisé pour publier le site vers l'hébergeur, les transferts de pages vers le
site seront aussi fréquents que les mises à jour du site. Il s'agit pour l'internaute, en fonction de sa
méthode de travail, de choisir l'outil le plus adéquat, c'est-à-dire le moyen le plus pratique
(depuis l'éditeur) ou le plus sûr (logiciel spécialisé).
Une fois que le site est publié, si l'hébergeur ne le propose pas, il faut penser à le faire référencer,
c'est-à-dire le faire connaître auprès des sites "moteurs de recherche".

11 octobre 2009 23242407.doc Page 81 sur 84


Systèmes Répartis INTERNET Site Web

Chapitre 6 : Référencer un Site


Créer un site ne se justifie que si un maximum de gens le visitent... Il faut donc le faire connaître.
Pour cela, diverses méthodes sont proposées. Elles ne s'excluent pas les unes les autres mais sont
toutes complémentaires.
En conséquence, le rédacteur de ce chapitre propose au concepteur de site d'utiliser les quatre
méthodes afin de mettre toutes les chances de son côté.

1. Diffuser l'adresse URL du site


La première consiste tout simplement à diffuser son adresse URL par l'intermédiaire de ses
relations:
• auprès de ses amis,
• sur sa carte de visite ou sa documentation professionnelle,
• dans la signature des messages de courriels (courrier électronique) et de ses contributions aux
newsgroups.

Une variante consiste sur la Toile à s'annoncer sur des forums spécifiques.

2. Renseigner l'en-tête de ses Fichiers


La deuxième méthode relève plus d'une démarche professionnelle et technique dans la mesure où
elle consiste à placer des mots-clés dans l'en-tête des fichiers importants, pour que les moteurs
qui scannent les sites web les intègrent dans leurs bases de données.
Il est inutile d'en mettre dans tous les fichiers HTML du site. Il est conseillé de choisir ceux qui
sont les plus "significatifs", c'est à dire ceux dans lesquels les visiteurs trouveront quelque chose
en y accédant directement.
Le fichier essentiel à renseigner est bien sûr le fichier d'accueil, en principe index.htm (racine du
site).

Les attributs et paramètres font parties des balises META insérées dans l'en-tête du fichier
HTML, donc entre les balises <HEAD> et </HEAD>.
Il convient d'inscrire au moins un titre, des mots-clés proprement dit , et éventuellement le nom
de l'auteur et une description.
Voici un exemple pour le site Jura Spéléo:

<HTML>
<HEAD>
<TITLE>Jura Speleo</TITLE>
<META Name="keywords" Content="speleo, grotte, gouffre, karst, Jura, Franche-
Comte">
<META Name="author" Content="Frachon Jean-Claude">
<META Name="description" Content="La speleologie dans le département du
Jura"> </HEAD>
11 octobre 2009 23242407.doc Page 82 sur 84
Systèmes Répartis INTERNET Site Web

Pour plus de renseignements sur les balises de référencement, il faut consulter le chapitre
"Balises META" situé dans le module "HTML Statique".

3. Service d’hébergement
En dehors du « propriétaire » du site, le site ou service chargé de l’hébergement est intéressé au
plus au point par la publicité de l’ensemble des sites hébergés.
De lui-même, il va proposer des services de référencement.
Il a deux méthodes à sa disposition : celles des balises META paramétrées au niveau du serveur
(en-tête HTTP), ou plutôt la méthode exposée dans le paragraphe suivant.

4. Moteurs de recherche et Sites référenceurs


La troisième méthode relève aussi d'une démarche professionnelle et technique qui permet de
compléter les résultats de la précédente méthode. Pour être certain que le site sera pris en compte
par les moteurs de recherche, il faut le référencer dans leurs services.
On expose ici deux méthodes que l'on peut utiliser de manière complémentaire:

1) soit passer par l'intermédiaire de sites référenceurs, qui inscriront automatiquement le site sur
plusieurs moteurs de recherche. Il est plus simple d'utiliser des services gratuits, comme:

Addme http://www.addme.com/ Référencement sur 25 moteurs


Annonceur http://www.annonceur.net/submit/ Référencement sur 100 moteurs
Référenceur http://sam.acorus.fr/referenceur/ Référencement sur une dizaine
annonce_gratuite.html d'outils

2) soit compléter au coup par coup, en s'inscrivant manuellement auprès de tel ou tel moteur
ayant échappé à l'étape précédente (chercher sur les moteurs une rubrique du genre "add URL").

Il existe plusieurs types de moteurs de recherche :

• Les moteurs du type annuaire

• Les moteurs proprement dits

• Les métamoteurs.
Selon le type de moteur, la méthode diffère quelque peu au départ. En effet, sur les moteurs de
type annuaire, où les sites sont classés par thème, il faut réfléchir sur la catégorie à laquelle
appartient votre site.
Le premier exemple expose les différentes étapes d'enregistrement auprès de Yahoo, moteur de
recherche de type annuaire.
Pour cela, nous conseillons de préparer au préalable un bloc-notes (ou document Word) avec :
11 octobre 2009 23242407.doc Page 83 sur 84
Systèmes Répartis INTERNET Site Web

• L'URL du site (http://www…..),

• Le titre du site,

• Sa description,

• Le nom de la personne à contacter,

• L'adresse de courriel de cette personne.

Pour référencer le site sur Yahoo, il faut respecter quelques règles de base. Tout d'abord, il faut
choisir la catégorie dans laquelle on veut ajouter le site. Il faut aussi définir les sous-catégories.

En bas de la page, il faut cliquer sur :

La première étape demande des informations sur le site.


La deuxième étape demande de mentionner le site éventuellement dans d'autres catégories. Ces
informations sont facultatives.
La troisième étape demande des renseignements personnels ainsi que la situation géographique
du site (facultatif).
La quatrième étape sollicite des informations concernant la durée de vie du site (facultatif),
ainsi que quelques commentaires supplémentaires (facultatif).
Enfin, il faut valider votre enregistrement. En réponse, le site envoie le message suivant:
Merci !
Merci d'avoir pris le temps de soumettre votre site. ...

Votre site est enregistré sur Yahoo.fr. La notoriété de ce dernier vous oblige à attendre quelques
semaines pour que les " e-surfeurs " visitent votre site.

Selon les sites de moteurs, il faut repérer sur leur page d'accueil un lien mentionnant les textes
suivants : Proposer un site, Ajouter un site, Add a Page, etc...

5. Conclusion
Le référencement du site selon la dernière méthode ne va pas être immédiat. Si certains moteurs
mettent un ou deux jours, d'autres sites de moteurs de recherche mettent plusieurs semaines à
prendre en compte les inscriptions.
Le premier essai selon la deuxième méthode (balises META) n'est pas forcément le bon. Il
faudra peut-être revoir le référencement de vos pages.

La persévérance est le meilleur conseil !


11 octobre 2009 23242407.doc Page 84 sur 84

Das könnte Ihnen auch gefallen