Documente Academic
Documente Profesional
Documente Cultură
SITE WEB
SOMMAIRE
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
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
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.
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 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.
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.
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.
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.
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.
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.
Le chapitre consacré à la publication d'un site rentre plus dans le détail sur le sujet.
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.
Le chapitre du module intitulé "publication d'un site" est consacré à cette opération technique.
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".
Dans le cas d'un site personnel, la maintenance d'un site est aisée.
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...)
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.
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.
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
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.
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).
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.
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 :
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 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
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.
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
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 ».
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.
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.
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.
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.
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
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.
(*) 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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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 !
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.
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.
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.
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.
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 ?
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.
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.
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.
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.
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.
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.
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.
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.
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.
"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.
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.
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.
Le fin du fin en terme de structure d'un site est d'être capable de s’adapter à plusieurs profils
d'utilisateurs.
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 !
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 !
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
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.
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.
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
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é
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.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.
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
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).
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 !
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.
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.
• 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.
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
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.
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
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".
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 quatrième page invite le « concepteur » à définir un compte d'accès à son futur lieu de
publication sur le serveur.
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.
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,
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).
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
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 :
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.
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.
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).
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.
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
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.
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.
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.
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".
Une variante consiste sur la Toile à s'annoncer sur des forums spécifiques.
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.
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:
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").
• 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
• Le titre du site,
• Sa description,
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.
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.