Int Site Web

Systèmes Répartis

INTERNET

Site Web

SITE WEB

11 octobre 2009

23242407.doc

Page 1 sur 84

Systèmes Répartis

INTERNET

Site Web

SOMMAIRE

Chapitre 1 : Création d'un Site......................................................................................................4 Introduction...........................................................................................................................................4 1.Questions Préalables .........................................................................................................................5 2.Outils de développement .................................................................................................................12 3.Equipe ou Groupe de Travail..........................................................................................................18 Conclusion............................................................................................................................................23

Chapitre 2 : Structure d'un Site...................................................................................................25 1.Organisation locale...........................................................................................................................25 2.Organisation du lieu de publication................................................................................................26 3.Noms des fichiers..............................................................................................................................29 4.Conclusion.........................................................................................................................................30

Chapitre 3 : Architecture d'un Site..............................................................................................31 1.Découpe de l'information.................................................................................................................31 2.Structure ..........................................................................................................................................32 3.Outils de navigation..........................................................................................................................35 4.Page d'accueil....................................................................................................................................35 5.Ergonomie (ou règles de l'art).........................................................................................................37 6.Conclusion.........................................................................................................................................46

Chapitre 4 : Apprécier un Site.....................................................................................................47 1.Lignes de force .................................................................................................................................47 2.Critères de jugement .......................................................................................................................53 3.Conclusion.........................................................................................................................................57

Chapitre 5 : Publier le Site...........................................................................................................58 1.Opérations préalables .....................................................................................................................58 2.Transfert de fichiers.........................................................................................................................62 3.Site de l'hébergeur............................................................................................................................63 4.Moyens nécessaires ..........................................................................................................................67 5.Logiciel spécialisé.............................................................................................................................68 6.Editeur avancé..................................................................................................................................71 7.Assistant de publication de sites Web de l'environnement Windows...........................................78 8.Gestionnaire de Serveur Web Personnel........................................................................................80 11 octobre 2009

23242407.doc

Page 2 sur 84

Systèmes Répartis

INTERNET

Site Web

9.Conclusion.........................................................................................................................................81

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

11 octobre 2009

23242407.doc

Page 3 sur 84

Systèmes Répartis

INTERNET

Site Web

Chapitre 1 : Création d'un Site Introduction Avant de se lancer à corps perdu dans la création d'un site, il faut se poser un certain nombre de questions. Que faut-il pour créer un site Web ?

Questions préalables Que le concepteur soit amené à réaliser un site personnel, un site vitrine d'entreprise ou un site applicatif (application Web), il faut avant toute chose : •

Déterminer l'objectif du site, l’audience visée et donc en conséquence décider de son contenu et de ses principaux thèmes

•

Dans le cadre d’un projet, réunir une équipe volontaire aux multiples compétences, et établir un échéancier pour toute la durée du développement ou du projet

•

Réunir les outils de développement tels qu’un éditeur HTML pour l'écriture des pages Web, un logiciel de retouche photo pour traiter les images, un logiciel de publication pour transférer les fichiers du site sur le serveur, etc...

•

Apprendre quelques techniques liées au monde du Web et débuter par quelques notions de langage HTML

•

Structurer et organiser le site, décider de son ergonomie

•

Disposer de temps libre pour la réalisation ainsi que pour les mises à jour obligatoirement fréquentes (un site est une œuvre vivante jamais achevée)

•

Décider d'un nom de site, trouver un serveur pour héberger le site, avant de le publier

•

Faire connaître le site (le référencer), notamment auprès des moteurs de recherche.

Plan adopté A travers ce chapitre, une réponse préliminaire à toutes ces questions sera donnée. Pour cela, les sujets abordés ont été regroupés en trois parties : •

Les questions préalables à la réalisation

•

Les outils indispensables au développement

•

Les compétences requises aussi bien pour le créateur de site personnel que pour chaque membre de l’équipe de projet

Modules liés Les autres chapitres de ce module entreprennent une étude plus poussée d'un certain nombre de sujets abordés dans ce chapitre de présentation générale : •

Le deuxième chapitre apprend comment organiser physiquement un site,

11 octobre 2009

23242407.doc

Page 4 sur 84

Systèmes Répartis

INTERNET

Site Web

•

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

•

Le quatrième chapitre indique comment faire apprécier son site,

•

Le cinquième est chargé de tout ce qui concerne la publication du site côté client ,

•

Le sixième chapitre et le dernier présente les différents moyens de faire connaître le site (référencement).

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

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

11 octobre 2009

23242407.doc

Page 5 sur 84

Systèmes Répartis

INTERNET

Site Web

Site Personnel Les sites personnels peuvent traiter d'un thème donné (site thématique), et donc viser un public universel. Mais ils peuvent aussi définir des rubriques qui n'intéressent que le cercle familial ou relationnel. Pour les sites thématiques, il faut chercher dans ses zones de compétences, qu'elles soient professionnelles ou dans le domaine des loisirs, un sujet, un thème, une passion que l'on souhaite faire partager. Il ne faut pas viser pas à tout prix l'expertise dans un domaine particulier. Il y a de la place pour tous les niveaux de compétence. L'essentiel est que le site soit de qualité. Site d'Entreprise Au niveau d'une entreprise, le cahier des charges détermine la nature et les véritables buts du site. La création d'un site sur Internet relève d'une démarche de communication. C'est un outil complémentaire d'une stratégie de communication et de prospection qui doit répondre à un certain nombre de conditions. Le contenu doit nécessairement aller de pair avec les objectifs du site. A-t-on le souhait d'élargir le champ relationnel ? S'agit-il d'un site destiné à la seule diffusion d'informations ou d'un site interactif ? Est-ce un outil pour communiquer avec les fournisseurs ? Les collaborateurs ? Les chefs ? etc... Audience du chapitre Ce chapitre, dans son ensemble, donne les premières réponses aux concepteurs de site personnel comme aux concepteurs de site d'entreprise, si le thème abordé le justifie. De plus, ce document étant destiné aux personnels des armées, quelques passages de ce chapitre renseigneront sur un certain nombre de mesures spécifiques à l’armée de terre. Site Intranet des Armées Dans le cadre de sites internes aux armées, un certain nombre de directives ont été élaborées par le CERSIAT (Centre d'Etudes et de Réalisation des Systèmes d'Information de l'Armée de Terre), organisme de veille technologique et de préconisation sous la tutelle de la DCTEI (Direction Centrale des Télécommunications et de l'Informatique).

1.2 Organisation du projet S'organiser pour développer un site implique au minimum d'établir un échéancier pour toute la durée du développement ou du projet. Quelle que soit la nature du site, on peut plaquer l'organisation du développement de ce site à celui de la conduite de projet, surtout dans le cas d'un site applicatif. En effet, la réalisation de sites professionnels demeure souvent complexe pour chacune des étapes : conception (maquette), développement, mise en page, publication. Site Professionnel Ces différentes tâches peuvent être réalisées dans le cadre d'un groupe de travail. 11 octobre 2009

23242407.doc

Page 6 sur 84

Systèmes Répartis

INTERNET

Site Web

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

1.3 Structurer le contenu Avant d’orienter le lecteur vers les chapitres suivants du module, donnons quelques exemples qui prouvent la nécessité de structurer un site. Une des règles d'or admise pour la réalisation d'un site impose que chaque page HTML ne puisse dépasser 3 à 5 écrans, ceci pour des raisons de temps de chargement et de lisibilité. Il faudra donc découper le contenu en pages et sous-pages (qui ne correspondront pas forcément aux chapitres définis). Ensuite il faudra relier ses différentes pages de façon logique afin que l'internaute puisse naviguer avec aisance dans le site. Ceci ne présente pas de difficultés du point de vue technique, car le langage HTML est, par essence, un langage hypertexte s'appuyant sur la technique des liens. Des petits repères graphiques rendront cette navigation plus intuitive pour l'internaute (notion de barre de navigation). On prévoit généralement sur chaque page, un retour vers la page d'accueil ou carte du site, ceci afin de venir au secours des internautes égarés ou encore à ceux (et cela 11 octobre 2009

23242407.doc

Page 7 sur 84

Systèmes Répartis

INTERNET

Site Web

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

1.4 Ergonomie du site L'auteur d'un site Web se voit confronté avec la forme la plus aboutie de la communication. En effet, il s'agit de communiquer avec des mots, des couleurs, des images et d'effectuer une mise en page de chaque document HTML du site. Dans cette communication par essence internationale, visuelle autant que littéraire, il faudra tenir compte des différences culturelles qui peuvent exister (même si le site ne s'adresse qu'aux francophones). Sobriété des mots et de la présentation graphique, concision et précision, seront des éléments déterminants. Mais ces règles ne sont pas les seules à appliquer... Rester soi-même peut être aussi un bon conseil. Le respect des règles et usages du Web en la matière (la fameuse Nétiquette) sera le meilleur garant de la "mondialisation" de la communication. Le dernier chapitre du module consacré à l'ergonomie d'un site "Armée de Terre" se révèle être une bonne entrée en matière relativement exhaustive.

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

11 octobre 2009

23242407.doc

Page 8 sur 84

Systèmes Répartis

INTERNET

Site Web

Le site sera rendu disponible aux clients grâce à l'action du serveur HTTP qui contrôle obligatoirement les demandes des clients que sont les internautes, et les réponses qu'il renvoie sous forme de pages Web. Pour l'hébergement, trois choix sont offerts : •

trouver un serveur Web (ou HTTP) existant qui puisse héberger le site (exemple du fournisseur d'accès dans le cas d'un site personnel),

•

mettre en place un serveur HTTP permanent au sein de l'entreprise,

•

mettre en place un serveur HTTP intermittent (le temps de la connexion, exemples d’un serveur local de test pour le partenaire de développement ou d’un serveur personnel limité aux amis).

Site Personnel Le cas du site personnel correspond surtout au premier type d'hébergement. Si le concepteur de site possède une connexion Internet, il dispose déjà d'un espace disque compris dans l'abonnement auprès du fournisseur d'accès. Sinon, un certain nombre de sites proposent des hébergements gratuits (ou presque), ainsi que des Cyber clubs ou Cyber cafés mais pour une somme modique. En ce qui concerne les ressources, un espace d'un méga octet (5Mo) est un minimum pour réaliser quelque chose de bien à condition de ne pas être trop gourmand en images. Les sites thématiques personnels peuvent atteindre facilement un volume de 20 à 30Mo, voire plus si ce dernier fait appel à quelques présentations vidéos lourdes à charger. Par ailleurs, les fournisseurs d'accès Internet proposent sans difficulté des espaces de 100Mo pour des sites volumineux. En plus de l'espace disque, l'internaute dispose aussi de l'adresse Internet de l'hébergeur du genre: www.nom_du_fournisseur.com (ou .fr). L'hébergeur crée alors un répertoire personnel portant le nom de l'internaute ou un pseudonyme choisi librement par ce dernier (si non déjà utilisé). L'adresse URL du site est alors du genre : • www.nom_du_fournisseur/répertoire_du_site. Une variante de l'adresse URL peut être : nom_du_site.nom_du_fournisseur. Dans le cas où l'internaute souhaiterait ne pas mentionner le nom de l'hébergeur dans le nom du site, donc souhaite créer un nom qui lui est propre, il convient d'acheter ou d'obtenir gratuitement contre une publicité présente dans le site un nom de domaine équivalent à votre site. Site d'Entreprise Les entreprises, en fonction de leur stratégie ou en fonction du personnel informatique qualifié dont ils disposent, peuvent aussi bien décider du premier type d'hébergement que du deuxième. Serveur permanent au sein de l'entreprise Suivant la vocation du site, Intranet (réseau Internet réduit à la portion congrue de l'entreprise) ou Internet, l'hébergement s'effectuera sur des serveurs différents au sein de l'entreprise elle11 octobre 2009

23242407.doc

Page 9 sur 84

Systèmes Répartis

INTERNET

Site Web

même. Le premier sera accessible depuis l'ensemble du réseau local de l'entreprise alors que le deuxième le sera peut-être uniquement depuis le réseau Internet. Les besoins matériels en matière de serveur seront différents s'il s'agit d'un site "vitrine" destiné à assurer une stratégie de communication de l'entreprise, ou d'un système d'information de type Web. Pour ce qui est du matériel, un simple PC doté d'un microprocesseur Pentium 133 suffit pour une centaine de clients. Au-delà, il faut investir dans une machine plus puissante, voire une machine de type serveur. D'autre part, les ressources mémoire du serveur varient en fonction de l'utilisation du serveur. Dans le cas présent, l'achat et l'installation d'un serveur restent peu onéreux (voir paragraphe 2.5 sur les serveurs). Dans le cas d'un site vitrine ou marchand, posséder son serveur HTTP permanent est une solution peu onéreuse si l'on possède une ligne louée. Serveur professionnel du réseau Internet Outre le fournisseur d'accès officiel de l'entreprise, le site peut être hébergé chez un professionnel. Généralement, le professionnel désire réaliser lui-même le site Web et offrira à la fois les services de réalisation et d'hébergement. Le professionnel peut aussi prendre en charge tout l'aspect administratif de la gestion des noms de domaines. Le professionnel peut nous proposer, soit un hébergement sur serveur mutualisé (plusieurs sites de plusieurs organismes sur le même serveur), soit un hébergement sur serveur dédié. Site Intranet des Armées Dans l'armée de terre, les seuls serveurs autorisés restent au niveau des régions ou des grands organismes. En ce qui concerne les armées, des directives fixent les règles de nommage des sites: • "organisme.armée.def" pour un site Intranet • "organisme.armée.defense.gouv.fr" pour un site "vitrine" ouvert sur la Toile. Le chapitre consacré à la publication d'un site rentre plus dans le détail sur le sujet.

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

11 octobre 2009

23242407.doc

Page 10 sur 84

Systèmes Répartis

INTERNET

Site Web

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

1.7 Publication d'un site (Mise en ligne) Cette procédure angoisse le plus les néophytes. En fait, c'est peut-être l'opération la plus simple de l'histoire du site. Il s'agit d'effectuer le transfert du site depuis la machine de développement vers la machine du fournisseur d'accès dans le cas d'un site personnel, ou vers le serveur de l'organisme dans le cas d'un site professionnel, ou vers le site extérieur choisi pour l'hébergement. Le chapitre du module intitulé "publication d'un site" est consacré à cette opération technique.

1.8 Faire connaître votre site (Référencement) Le cercle des amis étant très vite épuisé, il faut passer par les moteurs de recherche et autres sites de référencement pour faire connaître l'œuvre à la communauté des internautes. Il suffit de choisir un certain nombre de sites comme Yahoo, Francité, AltaVista, Nomade, etc... Deux principales méthodes existent : soit renseigner les pages du site par l'utilisation de motsclés (balises META du langage HTML) au profit des moteurs de recherche, soit déclarer le site auprès de sites de moteurs ou spécialisés dans le référencement. Les sociétés sollicitées pour l'hébergement d'un site proposent dorénavant ces prestations. Pour en savoir plus sur le sujet, il convient de se reporter au chapitre du même module consacré au référencement. Pour en savoir plus sur les balises META, il faut consulter le module HTML statique, chapitre "balises META".

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

23242407.doc

Page 11 sur 84

Systèmes Répartis

INTERNET

Site Web

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

1.10 Avoir du temps et de la patience Mais pour réaliser toutes ces opérations, il a fallu consacrer un certain temps et faire preuve d'une certaine dose de patience. Pour les non-initiés, faire un site peut se résumer à rédiger un article de presse ou un gros rapport. D'ailleurs, quand on évoque le prix de réalisation d'un site, le client pousse généralement des hauts cris. Faire un site, c'est accoucher du contenu, veiller à une mise en page attrayante, faire et vérifier tous les hyper liens, parfois se battre avec le langage HTML, le tester sous divers navigateurs, le tester encore avec les différentes résolutions d'écran. Le drame (et la richesse) de toute présentation multimédia, est que toute erreur ou faute de goût dans l'aspect visuel dépréciera automatiquement le contenu de celle-ci.

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

23242407.doc

Page 12 sur 84

Systèmes Répartis

INTERNET

Site Web

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

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

2.2 Editeurs HTML Les principaux éditeurs du moment sont FrontPage 2000 de Microsoft, Dreamweaver 4.0 de Macromedia, Golive 5.0 d'Adobe et WebEditor 4 de Namo. Les éditeurs HTML doivent concilier simplicité d'utilisation et sophistication des fonctions. WebEditor s'illustre pour le 1er critère. Dreamweaver et Golive s'affrontent pour le second. Frontpage joue la carte de l'équilibre. Outils de création de pages et de sites web, les éditeurs HTML (HyperText Markup Language) doivent s'adapter à de multiples contraintes. La plus exigeante est peut-être de concilier performances et ergonomie, surtout lorsqu'il s'agit de s'adresser à un large éventail de concepteurs web, du néophyte au professionnel. Cet exercice est d'autant plus délicat que pour construire un site vitrine attrayant et interactif, le langage HTML, de par ses limites, est tenu de cohabiter chaque jour un peu plus avec d'autres langages, XML, DHTML, XHTML, sans omettre les JavaScript et les ASP (Active Server Page). Etude comparative des quatre éditeurs (synthèse) Outil ergonomique pour la prise en main, WebEditor se révèle le plus limité. Si les bibliothèques mises à disposition du concepteur sont nombreuses, l'éditeur se montre modeste en matière de développement de pages interactives (pas d'éditeur JavaScript ni de débogueur), en insertion de documents et en publication. WebEditor parait donc bien adapté à la conception de sites simples. Un niveau au-dessus, FrontPage s'est enrichi dans la version 2000. L'éditeur a porté ses efforts sur le placement des objets, y compris par couches (layer content), les liens avec sa base Access ou encore sur les niveaux d'approbation lors de travaux de groupe. On peut cependant lui reprocher d'avoir fait l'impasse sur le format PSD (Photoshop d'Adobe) avec support de calques, pour l'insertion d'images, ou encore sur le format SVG, pour traiter les images vectorielles. Autre caractéristique, Microsoft n'a pas estimé nécessaire de prendre en compte les spécificités 11 octobre 2009

23242407.doc

Page 13 sur 84

Systèmes Répartis

INTERNET

Site Web

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

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

23242407.doc

Page 14 sur 84

Systèmes Répartis

INTERNET

Site Web

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

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

Un éditeur avancé de pages HTML du style Dreamweaver ou FrontPage qui possède désormais des fonctions de publication de sites.

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

23242407.doc

Page 15 sur 84

Systèmes Répartis

INTERNET

Site Web

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

11 octobre 2009

23242407.doc

Page 16 sur 84

Systèmes Répartis

INTERNET

Site Web

2.5 Serveurs Web Enfin, que l’on soit dans le cas d’un site personnel insérant un minuscule compteur de visites sur la page d'accueil ou dans le cas d’un site plus professionnel faisant appel à des pages dynamiques (ASP ou PHP), la plate-forme de développement ne serait pas complète sans la présence et l'installation d'un serveur web pour tester le site en local. Site Personnel Dans l'environnement PC, le premier serveur disponible est PWS (Personal Web Server de Microsoft), alors que l'environnement UNIX propose le serveur Apache d'Apache Software Foundation. L'étude de ces serveurs est présentée dans le module "Serveurs". Site d'Entreprise En ce qui concerne l'Intranet d'une entreprise, ou un système d'information Web, d'autres serveurs sont à envisager pour tester ou publier le site. Les plus connus restent encore le serveur Apache et « Internet Information Server » (version professionnelle de PWS énoncé plus haut, version 5.0 fourni en standard avec Microsoft Windows 2000 Advanced Server). Mais d'autres concurrents se positionnent en candidats de deuxième plan : Netscape Server Enterprise, Web Server Enterprise Edition 4.1 de iPlanetSolaris 8. Quelques tableaux détaillées dans le module "Serveurs Web" permettront aux décideurs d'effectuer leur choix. En conclusion, pour un Intranet léger et pour un rapport performances / prix imbattable (puisque gratuit), Apache se place en première position. Le serveur iPlanet coûte 1 677 € HT, alors que l'acquisition de IIS5.0 nécessite au préalable celle du système d'exploitation : d'où un coût de 3 964 € HT. Pour un site sécurisé, il vaut mieux choisir iPlanet. Dans le cas du serveur de publication d'entreprise, il s'agit de prévoir tout un environnement de fonctionnement 24h/24 : local climatisé, télésurveillance par une présence technique permanente pendant les heures ouvrables, bases de données installées sur des serveurs séparés équipés d'une technologie Raid (reconstruction automatique des données en cas de défaillance des disques) et alimentation sécurisée (double alimentation + courant secouru), sauvegardes régulières stockées à l'extérieur du local, protection anti-virus activée en permanence.

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

11 octobre 2009

23242407.doc

Page 17 sur 84

Systèmes Répartis

INTERNET

Site Web

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

3.1 Responsable de production Pour les projets de petite ou de moyenne envergure, on ne trouve en général qu'un responsable de production. Il supervise la création des pages ainsi que leur imbrication, et il veille au respect des objectifs en matière d'interactivité et de richesse au niveau des fonctionnalités. Il donne des conseils et émet des critiques concernant le sens du message, l'aspect des graphismes et le niveau d'interactivité apporté par les scripts par rapport au reste du contenu. Lorsque le projet est important (mise en place d'un ou de plusieurs sites web pour une grande entreprise, une administration ou tout organisme comparable), il est fréquent de trouver un chargé de production pour la partie multimédia, un autre pour le code (scripts, pages ASP, ActiveX, etc.), un pour le graphisme et ainsi de suite. Il n'y a pas à proprement parler de qualification qui prédispose à assumer la fonction de chargé de production d'un site web. Tout au plus, faut-il remarquer que sa préoccupation première sera de savoir comment implémenter un élément donné plutôt que de s'interroger sur ce qu'il faut implémenter. Par conséquent, le chargé de production devra avoir des connaissances reconnues dans plusieurs des disciplines suivantes : •

Etude et réalisation d'un site web, en incluant la configuration du serveur, la planification des opérations, la gestion des versions et des procédures de validation. Il peut en outre lui être utile d'avoir des connaissances dans le domaine de la conception de scripts ainsi que dans le domaine de l'administration de serveurs.

•

Maîtrise du contenu des pages web, de leur présentation et de leur organisation pour constituer un ensemble homogène d'informations.

•

Connaissance des stratégies de réalisation et des modèles d'enchaînement des opérations ainsi qu'une certaine habileté à déterminer la meilleure stratégie à adopter pour réaliser un projet donné.

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

23242407.doc

Page 18 sur 84

Systèmes Répartis

INTERNET

Site Web

Dans une entreprise de dimension moyenne, cet administrateur peut aussi bien gérer le serveur Intranet abritant le service d'informations interne à l'entreprise que le serveur Internet destiné à héberger les sites vitrines de l'entreprise. Un site Web complet met en jeu les autres services disponibles du réseau Internet : téléchargement, messagerie, annuaire, forums de discussion. La même personne, selon ses compétences, peut gérer l'ensemble. Les charges et compétences attendus d'un tel personnel l'amène à : • Assurer l'administration, la gestion et l'assistance des serveurs Web et de leurs applications, incluant le contrôle du trafic, l'installation et la configuration des logiciels, ainsi que la mise en place de nouveaux serveurs. • Assurer la gestion permanente du site et la configuration des serveurs pour en assurer la qualité et la fiabilité. Il établit et communique les standards de contrôle des coûts et assure l'évolution des applications. • Installer, configurer et régler des logiciels d'application Web. • Utiliser le langage HTML. • Sécuriser les droits et configure les modifications nécessaires à des transactions sécurisées. • Etablir et évaluer des traitements pour des caractéristiques de nouveaux serveurs dans un contexte commercial. Pour assurer pleinement sa charge, il doit posséder, de plus, une expérience en : • Planification et gestion de projet. • Sauvegarde, restauration et exploitation de données. • Réseaux, sécurité et Web.

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

23242407.doc

Page 19 sur 84

Systèmes Répartis

• • • •

INTERNET

Site Web

Offrir des solutions web adaptées au besoin du client Scénarisation et organisation du contenu du site Construction de l'architecture technique du site Réalisation et intégration d'éléments graphiques, d'animations visuelles et sonores

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

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

3.5 Rédacteur A côté de l'indispensable connaissance technique, les rédacteurs doivent être en mesure de produire des textes en respectant les règles élémentaires de l'écriture : orthographe, grammaire, 11 octobre 2009

23242407.doc

Page 20 sur 84

Systèmes Répartis

INTERNET

Site Web

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

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

3.7 Infographiste La tâche de l'infographiste ne consiste pas seulement à fabriquer des images pour le site web, puisqu'il devra souvent intervenir dans la création ou la production de séquences sonores ou vidéo. Bien sûr, il doit comprendre les différences qui existent entre l'imagerie numérique destinée aux supports imprimés et l'infographie d'un site accessible en ligne. Un bon artiste doit savoir comment créer des images saisissantes qui pourront être téléchargées sur Internet en un temps record. Voici un rapide résumé des capacités souhaitables : •

Une bonne connaissance des stations graphiques les plus performantes.

•

Un sens artistique développé.

•

La capacité de savoir trancher entre l'apparence d'une image (qualité, dimensions) et la bande passante (poids en Ko) qui passe par celle des formats graphiques.

11 octobre 2009

23242407.doc

Page 21 sur 84

Systèmes Répartis

•

INTERNET

Site Web

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

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

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

Conception de l'architecture d'un système multimédia -sur le Web, sur un serveur Intranet, sur CD-ROM ou sur une cartouche de jeu vidéo - à partir des spécifications (topologie, performances, contraintes fonctionnelles, graphismes ... )

•

Conseil (sur l'intégration des aspects techniques, ergonomiques et fonctionnels) aux éditeurs de produits multimédia et assistance aux équipes de développement

•

Pilotage du déploiement et de la mise en route du système multimédia

•

Veille technologique

Pour assurer ces fonctions, le personnel est censé posséder les qualifications suivantes : Savoir-faire technologiques • Culture approfondie de toutes les technologies multimédia et de tous les vecteurs de diffusion • Conception, modélisation des serveurs multimédias, maîtrise des langages et outils spécifiques de développement et de mise au point des applications 11 octobre 2009

23242407.doc

Page 22 sur 84

Systèmes Répartis

• • •

INTERNET

Site Web

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

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

3.9 Technicien chargé des essais Si le site web est important et complexe, le concours d'un technicien chargé d'effectuer les essais peut s'avérer indispensable, voire, dans certains cas, celui d'une véritable équipe de tests. S'agissant des petits sites, le producteur et le technicien du site doivent être capables d'assurer conjointement cette fonction. Compte tenu de l'étendue de sa mission, le technicien chargé des essais doit avoir un certain nombre de compétences en commun avec le développeur dans les domaines suivants : •

Les procédures de tests et les stratégies de déploiement des nouveaux projets et des nouvelles technologies.

•

Les systèmes d'exploitation, ainsi que l'administration des serveurs.

•

Les techniques de mise en réseau associées à Internet et aux Intranets, telles que le routage, les coupe-feux et le protocole TCP/IP, mais aussi des technologies aussi poussées que le clustering.

•

Le langage HTML, les pages de scripts ASP, JavaScript ou VBScript, les contrôles OCX et, plus généralement, les dernières technologies de programmes associées à Internet et au World Wide Web.

•

La sécurité des réseaux et les procédures de sauvegarde des systèmes.

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

Conclusion En bref, créer un site n’est pas une mince affaire. 11 octobre 2009

23242407.doc

Page 23 sur 84

Systèmes Répartis

INTERNET

Site Web

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

11 octobre 2009

23242407.doc

Page 24 sur 84

Systèmes Répartis

INTERNET

Site Web

Chapitre 2 : Structure d'un Site Un site Web est un ensemble de fichiers écrits en langage HTML, accompagnés non seulement de fichiers multimédia tels que les fichiers images, son, ou vidéos, mais aussi de fichiers plus techniques tels que des fichiers de scripts, des applettes Java, etc... Ces divers fichiers s'appellent les uns les autres grâce à des liens hypertextes. Tous ces fichiers doivent être répartis dans une arborescence d'autant plus développée qu'ils sont nombreux. Dans la suite du chapitre, les termes d'arborescence, ou d'organisation physique, ou de structure du site vont être employés. Il faut distinguer cette organisation de l'organisation logique ou fonctionnelle du site reflétant la cartographie du site ou la cartographie des liens. Le concepteur de site peut choisir selon des critères donnés, soit de faire coïncider les deux types d'organisation, soit de les différencier afin par exemple de faciliter la mise à jour ou la maintenance du site. Mais avant d'étudier la structure physique du site tel qu'il sera publié, voyons quelle structure le développeur peut utiliser en local sur sa station.

1. Organisation locale L'auteur du document préconise une organisation spécifique pour chaque site Web à élaborer. En premier lieu, il convient de créer un répertoire portant le nom du site pour le distinguer des autres sites que l'on peut accueillir dans son répertoire de données. Dessous le répertoire créé ci-dessus, l'auteur conseille de créer à leur tour deux sous-répertoires qui vont accueillir respectivement le site Web en cours de développement et les fichiers sources utilisés pour concevoir ce site. Prenons l'exemple d'un site ayant pour thème la musique du blues: • Blues o www.monblues.fr o sources Répertoire source Le répertoire source peut être organisé à son tour. En premier lieu, il convient de rassembler les images et images animées que l'on souhaite incorporer sous un répertoire spécifique, d'en faire de même pour les applets Java ou autres techniques importées. Pour un site personnel, il peut comporter autant de répertoires que de sites dont on s'inspire. Dans le cadre d'un travail de groupe, il est à souhaiter que l'intégrateur des différentes sources mette en place un répertoire par membre du groupe. 11 octobre 2009

23242407.doc

Page 25 sur 84

Systèmes Répartis

INTERNET

Site Web

Répertoires de développement et de publication Toujours sous le répertoire général, le développeur peut mettre en place un répertoire de développement où il effectue les différents essais et un répertoire de publication abritant la version définitive destinée à être publié. Dans le cadre d'un travail de groupe, le concepteur peut être amené à effectuer plusieurs propositions, et donc par voie de conséquence démultiplier le nombre de sous répertoires d'essai. Par précaution, il peut aussi sauvegarder les différentes versions du site. Dans le cas de la portabilité d'un site quelles que soient les résolutions d'écran, le concepteur doit créer autant de répertoires que de résolutions autorisées. Récapitulons en reprenant l'exemple du site précédent: • Blues o essai o publication ou www.monblues.fr o sources  images  site-source1 Comme le montre l'exemple, si le concepteur a déjà négocié la publication du site auprès d'un fournisseur de noms de domaine, le site de publication peut d'ores et déjà prendre ce nom. Les deux répertoires essai et publication doivent présenter la même organisation physique, organisation exposée dans la suite du chapitre. Au fur et à mesure de l'utilisation de tel ou tel fichier source, l'auteur préconise de dupliquer ce dernier sous la structure mise en place pour la publication.

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

2.1 Site simple Si le site n'est composé que d'un nombre restreint de fichiers, ils peuvent tous être stockés directement dans le répertoire attribué par le fournisseur d'hébergement. Le fichier d'accueil se nomme traditionnellement index.htm, sans majuscule. Le nom des autres fichiers importe peu, pourvu qu'il se rapporte de près au titre de la page HMTL associée. Exemple: •

•

11 octobre 2009

Fournisseur Répertoire-racine index.htm 23242407.doc

Page 26 sur 84

Systèmes Répartis

INTERNET

Site Web

fichierl.htm fichier2.htm fichier3.htm image-l.gif image-2.jpg son-l.mid son-2.mid Pour plus de clarté dans la maintenance, il peut être commode de différencier les fichiers par types, en stockant par exemple les fichiers multimédia tels que les fichiers images, sons, etc. dans des sous-répertoires spécifiques. Exemple: • Fournisseur • Répertoire-racine index.htm fichier-l.htm fichier-2.htm fichier-3.htm Sous-répertoire "images" image-l.gif image-2.jpg Sous-répertoire "sons" son-l.mid son-2.mid Sous-répertoire "videos" video-l.mpg video-2.avi Les logos peuvent aussi être stockées de manière séparée, de même que les modèles de pages (templates) disponibles chez les éditeurs avancés. Ce principe peut être étendu aux fichiers de feuilles de style ainsi qu'aux fichiers plus techniques. Les feuilles de style (fichiers à extension css) appliquées à tout ou partie du site peuvent se trouver sous le répertoire style. Il en est de même pour les "server side includes" sous le répertoire include(s). Les applets Java et les contrôles Active X internes au site peuvent respectivement être rassemblées sous le répertoire applet(s) et ocx. De même, les fichiers de scripts externes aux pages (fichiers à extension js) sont à stocker sous le répertoire script(s). Enfin, les applications Web du type cgi peuvent être soit publiées de manière séparées du site (politique générale des hébergeurs), soit restées intégrées au site sous un répertoire portant le nom de cgi(-bin). Exemple complémentaire: Sous-répertoire "styles" 11 octobre 2009

23242407.doc

Page 27 sur 84

Systèmes Répartis

INTERNET

Site Web

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

2.2 Site complexe Un site peut traiter de plusieurs thèmes, ou rubriques, et être constitué d'un grand nombre de fichiers. Dans ce cas, il est commode d'organiser l'arborescence en différenciant les thèmes.  Sous le répertoire racine, on installe le ou les fichiers servant à l'écran d'accueil  Si des fichiers images (ou sons, etc...) sont communs à plusieurs rubriques, on peut les stocker dans un sous-répertoire spécifique (par exemple "img-com")  Les fichiers propres à une rubrique donnée sont réunis dans un sous-répertoire réservé à cette rubrique, lui-même éventuellement subdivisé en d'autres sousrépertoires (images spécifiques à cette rubrique, etc...) Exemple: •

•

• • •

11 octobre 2009

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 23242407.doc

Page 28 sur 84

Systèmes Répartis

INTERNET

Site Web

• Sous-répertoire "rubrique-2" index.htm fichier-l.htm fichier-2.htm fichier-3.htm • Sous-répertoire commun "images" rubrique2-l.gif rubrique2-2.jpg Chaque rubrique constituant une entité, il est commode de nommer "index.htm" le fichier d'accueil de la rubrique proprement dite. Ainsi, on peut si nécessaire diffuser une adresse URL spécifique pour chaque rubrique, comme si elles constituaient des sites séparés (les rubriques peuvent d'ailleurs ne pas être reliées entre elles par des liens hypertexte, et constituer réellement des sites distincts). Si le site fédère un certain nombre de sous sites, l'organisation décrite ci-dessus peut être réappliquée au niveau de chaque sous site, aussi bien pour les fichiers multimédia que les fichiers techniques, aussi bien pour les rubriques importantes. Un des principaux arguments en faveur d'une organisation horizontale réside dans la facilité de mise à jour du site par transfert de fichiers.

3. Noms des fichiers 3.1 Page d'accueil Il est recommandé - mais non obligatoire- de nommer index.htm le fichier d'accueil du site, ou d'une rubrique. Le nom index.htm(l) est le nom le plus répandu. Les webmestres des serveurs hébergeurs des sites, outre le fichier default.htm pour les serveurs Microsoft, configurent systématiquement ce nom comme page d'accueil. Il est déjà configuré par les serveurs Apache. A condition qu'il ne comporte pas de majuscules (*), il s'ouvrira automatiquement. Il n'est donc pas nécessaire d'indiquer son nom dans l'adresse URL. (*) D'une façon générale, il est recommandé d'écrire tous les noms de fichiers et de répertoires sans majuscules, ce qui évite toute erreur de casse dans l'écriture ultérieure des liens hypertextes. Outre les erreurs éventuelles lors de la pose de liens manuels par le développeur de site, l'emploi systématique de minuscules améliore la portabilité du site vers les visiteurs sous UNIX.

3.2 Répertoires En dehors des répertoires évoqués ci-dessus, les noms des répertoires sommets de chaque rubrique doivent reprendre ci-possible le nom de la rubrique. Afin d'assurer une portabilité maximum du site, il est recommandé de ne pas utiliser de caractère espace (monde UNIX) ou souligné (mal interprété par certains navigateurs). De même, il est plus simple de n'utiliser que des caratères minuscules. 11 octobre 2009

23242407.doc

Page 29 sur 84

Systèmes Répartis

INTERNET

Site Web

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

3.3 Autres fichiers Les noms de pages Web doivent pour raison de simplicité et facilité de maintenance porter les même noms que les titres de document (balise title) ou titre de sommet de pages. La volonté de rendre un site portable incite à réutiliser les règles édictées ci-dessus. Les fichiers images ou autres fichiers multimédias peuvent être renommées afin d'être plus explicites.

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

11 octobre 2009

23242407.doc

Page 30 sur 84

Systèmes Répartis

INTERNET

Site Web

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

1. Découpe de l'information 1.1 Raisons La raison essentielle de la découpe du contenu en petites pages de dimension réduite réside dans un temps de chargement raisonnable pour le confort de l’internaute. Ce fameux temps de chargement comprend non seulement le texte de la page mais aussi les images voire autres animations du style Java, Javascript ou DHTML. Un total de 45 Ko est calculé comme une moyenne idéale tandis qu’une page de 70 à 80 Ko est à considérer comme un maximum pour un temps de chargement acceptable. Des petits morceaux d'information sont plus adaptés à la lecture sur un écran d'ordinateur que la vision partielle d'un long document. La mémoire immédiate et la synthèse instantanée de l'esprit humain étant ce qu'elles sont, des pages Web très longues sont déstabilisantes car elles nécessitent le défilement vertical et l'obligation de se rappeler les informations ainsi disparues de l'écran. Selon certaines études psychologiques, la mémoire à court terme comprend entre 4 et 7 petits éléments d'information. En outre, cette découpe de l'information en petites unités logiques, associée à une structure rationnelle, facilite grandement la navigation et la recherche de l'information souhaitée. Pour fixer un ordre de grandeur, cette découpe de l'information correspondra à 2 ou 3 écrans soit environ entre une demi-feuille et une feuille de format A4 sans mise en forme, ou alors 2 à 3 feuilles de format A4 d'une mise en page particulièrement aérée.

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

23242407.doc

Page 31 sur 84

Systèmes Répartis

INTERNET

Site Web

En effet, en cliquant sur un lien, l’internaute s'attend généralement à trouver un autre morceau d'information liée et complémentaire à la précédente et non un livre complet. Mais il ne faut pas trop subdiviser votre information. Cliquer un lien pour ne trouver que quelques mots ou un petit paragraphe peut se révéler frustrant pour l’utilisateur et le distraire du véritable contenu. On utilise alors plutôt (mais sans en abuser) les petites fenêtres pop-up du Javascript. • une forme uniformisée du découpage et de la présentation crée une identité au site. Cette cohérence permet très vite aux visiteurs d'acquérir une certaine expérience pour leurs recherches et autres explorations, voire même de prévoir comment une nouvelle section du site sera organisée. "Se sent à l'aise dans un site" est une des clés essentielles d'un bon site. Ce concept de découpage de l'information doit cependant être flexible et adapté au sujet traité ainsi qu’à la logique d'organisation de votre site et au confort de votre visiteur. C'est la nature du contenu qui suggére le meilleur moyen de subdiviser et d'organiser l'information. Ainsi, dans certains cas, des pages plus longues sont néanmoins nécessaires pour traiter complètement un sujet sans distraire le visiteur par une découpe intempestive de celui-ci. C'est particulièrement vrai lorsque l'on souhaite que l'utilisateur puisse imprimer ou enregistrer un sujet déterminé en une seule étape.

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

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

11 octobre 2009

23242407.doc

Page 32 sur 84

Systèmes Répartis

INTERNET

Site Web

Les narrations, les lignes du temps ou autres exposés nécessitant un ordre logique se prêtent à ce genre de structure ainsi que les thèmes progressant du général au particulier. La structure séquentielle est aussi particulièrement adaptée aux sites d'apprentissage ou tutoriaux où le passage à une page suivante requiert des pré-requis exposés à la page précédente. Cependant, cette structure séquentielle ne sera utilisée que pour des petits sites (ou des parties de sites plus grands) car de longues séquences narratives ou explicatives nécessiteront souvent une structure plus sophistiquée pour rester compréhensives.

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

Cette organisation hiérarchisée en blocs d'informations indépendants nécessite cependant un gros travail d'analyse préalable du contenu (notions pré-requises, doublons d'information...) car cette structure hiérarchisée n'est efficiente que si l'information disponible est soigneusement organisé.

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

11 octobre 2009

23242407.doc

Page 33 sur 84

Systèmes Répartis

INTERNET

Site Web

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

2.4 Structure en évolution Pour les sites qui connaissent une croissance rapide et de nombreux développements, l'objectif est de garder un équilibre entre les différents blocs d'informations. Et ce n'est pas toujours une chose aisée... Le feedback des utilisateurs et une analyse personnelle critique du site aident à déterminer si certains passages ne sont que pauvrement structurés ou si la structure initiale est devenue, avec les différentes ajoutes, complètement obsolète. L'objectif est de maintenir une hiérarchisation équilibrée qui aide l'accès rapide à l'information ainsi qu'une compréhension intuitive de la façon dont les éléments sont organisés. Exemple d’une structure équilibrée

11 octobre 2009

23242407.doc

Page 34 sur 84

Systèmes Répartis

INTERNET

Site Web

3. Outils de navigation Un visiteur qui se perd est un visiteur qui ne reviendra plus. Une fois la structure en place, il faut encore fournir aux visiteurs, les outils de navigation indispensables pour une exploration aisée du site. Ces outils de navigations sont aussi indispensables à la circulation dans le site que les panneaux de circulation du réseau routier. Ces outils de navigation se présentent par des liens sous forme de texte ou seront plus agréablement conçus sous forme de petites images, boutons, icônes ou barres d’information. On veillera alors à un graphique simple et à la symbolique intuitive car ils se doivent d’être efficaces mais aussi de rester discrets par rapport au contenu et au visuel proprement dit. Ces outils de navigation qui se retrouvent de page en page contribuent aussi à créer l’identité graphique de site. Quelques principes généralement adoptés par tous les concepteurs de site semblent se dégager. Les utilisateurs d’un site doivent toujours être capables de revenir à tout moment vers la page d’accueil [Home ou Index] ou vers les principaux points de navigation. Chaque page d’un site comporte donc un lien vers cette page d’accueil ou la page servant de dispatching. De plus, si le sens du contenu global y invite, on prévoit des possibilités de retour à la page précédente ou d’avancement à la page suivante.

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

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

4. Page d'accueil Pas une couverture mais plutôt un sommaire visuel et informatif. Lorsque l'internaute clique sur le site à partir d'un moteur de recherche ou encode directement l'adresse au clavier, c'est sur cette page qu'il aboutit. Il reste alors 30 secondes pour le convaincre 11 octobre 2009

23242407.doc

Page 35 sur 84

Systèmes Répartis

INTERNET

Site Web

de parcourir les pages de cette œuvre et récompenser le développeur ainsi de toutes les heures de travail. C'est dire toute l'importance que l'on accorde à la conception et à la réalisation de cette première page. Cette page d'entrée du site prend le nom de page d'index (en référence à l'adresse index.htm), de "homepage" ou de page d'accueil. Pour les sites à structure hiérarchisée, cette page est tout naturellement celle qui est au sommet de la hiérarchie et vers laquelle on peut revenir à partir de toutes les pages du site. Les usages (ou le bon sens) dictent les éléments constitutifs de celle-ci : • le nom ou le titre du site qui en reprend l'objet. • un sommaire (détaillé ou synthétique) qui donne une vue d'ensemble du contenu et amorce les outils de navigation. • un élément visuel (logo, image, icône symbolique) pour l'aspect attractif. • un court texte qui reprend le descriptif fourni aux moteurs de recherche (excellent pour le référencement et le classement). • le nom de l'auteur et un lien vers l'adresse électronique de celui-ci. • la date de réalisation ou de la dernière mise à jour. • etc. On évite dans la page d'accueil : •

toute forme de publicité mensongère quant au contenu.

•

des liens externes vers d'autres sites. Ceci est assurément sympathique mais pourquoi risquer de perdre un visiteur potentiel avant même qu'il ait découvert les pages du site.

•

de devoir utiliser les barres de défilement vertical. Au-delà de 2 écrans, la page d'accueil risque d'être beaucoup trop détaillée et donc pas assez attractive. A la limite, toute l'information importante devrait être concentrée sur le premier écran.

•

un temps de chargement prohibitif car la tentation sera grande pour un site inconnu de cliquez le bouton "Précédent" et de retourner aux sites concurrents proposés par le moteur de recherche.

•

une page d'accueil avec des cadres car cela en complique grandement le référencement et le classement auprès de certains moteurs de recherche.

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

11 octobre 2009

23242407.doc

Page 36 sur 84

Systèmes Répartis

INTERNET

Site Web

5. Ergonomie (ou règles de l'art) 5.1 Quelques règles En matière de création de site Web, il existe quelques véritables "règles de l'art" qui sont généralement respectées en matière de publication sur le Web. La règle des trois clics. Toute information dans un site doit être accessible en 3 clics de souris maximum à partir de la page d'accueil. La règle des trois écrans. La longueur d'une page ne doit pas dépasser 3 à 5 écrans (grand maximum) pour limiter le défilement vertical. Le premier écran d'un page doit rassembler le maximum de l'information et inviter à en poursuivre la découverte. Un pourcentage important des internautes n'utilisent pas ou peu le défilement vertical. Le défilement horizontal de la page est à proscrire quelle que soit la résolution d'écran du visiteur. Un écran ne doit être rempli qu'à 50% de texte et de graphiques. Le reste est consacré au fond d'écran. Quels que soient les goûts en matière artistique, le texte doit toujours rester lisible par rapport au fond d'écran. Comme dans la vie de tous les jours, le Web comporte son lot de mal voyants : ne pas les oublier. Prévoir une possibilité de retour à la page d'accueil à chaque page du site. Un visiteur perdu est un visiteur déçu. Ecrire des phrases courtes à la construction simple. C'est un exercice de communication... La lecture de texte sur écran se révèle vite fatiguante. Des lignes de texte de 60 à 90 caractères maximum semblent être un bon compromis surtout si on sait que la tendance est aux résolution d'écran de 800 x 600 et 1024 x 768 ... Si après les 10 secondes (*) suivant un clic, il ne se passe rien, l'internaute s’inquiète, s'ennuie, s'impatiente ou quitte la page. [* à adapter selon chaque capital de patience]. Tous les liens sont dûment vérifiés et valides. A ce stade de développement de la publication Internet, un lien non valide devient presque inacceptable. Sans oublier tout de ce qui précède, il est opportun de rester toujours soi-même et si possible créatif.

11 octobre 2009

23242407.doc

Page 37 sur 84

Systèmes Répartis

INTERNET

Site Web

5.2 La résolution d'écran Les concepteurs débutants posent souvent la (mauvaise) question : "Pour quelle résolution d'écran doit-on concevoir un site ?". C'est une mauvaise question car l'on ne connaît jamais la résolution d'écran du visiteur. Et une annotation du genre "site optimisé en 800 x 600" est assez illusoire car les internautes qui changeront leur résolution uniquement pour voir le site en question sont rarissimes. Il existe cependant certaines solutions pour rendre votre site esthétiquement compatible avec n'importe quelle résolution d'écran. Présentation Beaucoup de gens pensent que la résolution d'écran dépend de la taille de l'écran. Ceci est faux. On peut avoir un écran de 14 pouces configuré pour une haute résolution, ou avoir un écran de 21 pouces et n'offrir qu'une basse résolution d'écran de seulement 640 x 480. L'unité est le pixel (picture element ou point d'image). 640 x 480 représente respectivement le nombre de pixels de l'échelle horizontale puis celui de l'échelle verticale.

La plupart des moniteurs peuvent afficher différentes résolutions d'écran. C'est la carte graphique qui détermine les différentes résolutions d'écran possibles pour un ordinateur donné. Ainsi, au début, les cartes graphiques de 1 Mo proposaient la norme de 640 x 480. Au fur et à mesure de l'évolution de ces cartes, celles-ci disposaient de plus en plus de mémoire vidéo (quantifiée en Mo). Elles pouvaient donc proposer des résolutions de plus en plus élevées, et donc plusieurs résolutions configurables. Ainsi les cartes à 2Mo ont introduit la résolution 800 x 600, suivi de près par les cartes graphiques à 4Mo qui ont permis les résolutions 1024 x 768 ou même 1280 x 1024. Les internautes suivent bien entendu cette évolution technologique et la résolution initiale de 640 x 480, qui représentait la norme quelques années auparavant, est en voie de disparition au profit de résolutions plus hautes. Le résultat d'un sondage (an 2000) présenté dans le tableau suivant, obtenu après recoupement de plusieurs sources permet de brosser une idée de la répartition des différentes résolutions utilisées pour le Web. Résolution 640x480 800x600 1024x768 1280x1024 11 octobre 2009

Pourcentage 7% 55 % 30 % 7% 23242407.doc

Page 38 sur 84

Systèmes Répartis

INTERNET

Site Web

Le tableau montre que la moyenne des utilisateurs du Web utilisent une résolution d'écran de 800x600 [et en 65.536 couleurs]. Mais écrire pour la moyenne n'est pas tout... Il reste les 45 % autres internautes pour qui votre site risque d'être une véritable catastrophe. Illustration du problème Le premier exemple montre une page avec une image reprenant les lettres de l’alphabet. Avec une résolution 800x600, cette image s’adapte parfaitement à l’écran. Par contre, cette même page, vue en 640x480 est déjà beaucoup moins sympathique. L’utilisateur doit non seulement faire appel au défilement vertical pour voir l’entièreté des lettres mais également au défilement horizontal car les lettres K et L ont disparu de l’écran. Si le défilement vertical est acceptable pour une page d’une certaine consistance, le défilement horizontal est à bannir car trop inconfortable pour le visiteur. Résolution 800x600

Résolution 640x480

Le second exemple tente d'illustrer les différences de mise en page et surtout la longueur des lignes de texte d’une résolution à l’autre. Si une page reprend principalement du texte, plus la résolution est haute, plus la ligne de texte sera longue et donc plus la lecture de ce texte à l’écran sera fastidieuse. Lire du texte sur un écran en 1280x1024 reviendrait à lire un journal ! Quelques solutions Il faut bien admettre qu’une résolution de 640 x 480 entraîne une composition de la page un peu étriquée. Avec des résolutions plus hautes, on peut concevoir des pages plus aérées et aux proportions plus équilibrées. En outre, cette largeur supplémentaire permet généralement de prévoir des menus de navigation omniprésents sur chaque page du site. Passons en revue quelques solutions pour garder une certaine compatibilité par rapport aux différentes résolutions possibles. On conseille de limiter la largeur des images à environ 600 pixels même pour les sites idéalement conçus en 800x600 ou en résolution plus grande encore afin d’éviter de devoir 11 octobre 2009

23242407.doc

Page 39 sur 84

Systèmes Répartis

INTERNET

Site Web

utiliser les barres de défilement horizontales, sous des résolutions inférieures. Cette limitation vaut aussi pour les tableaux et les cadres élaborés avec une largeur fixée en pixels. On pense à inclure les longs passages de texte dans des tableaux (à bordure invisible) d’environ 600 pixels maximum. On obtient ainsi des lignes de texte de 60 à 90 caractères, ce qui semble être une norme acceptable pour un confort de lecture à l’écran. Il faut prévoir d’entrée de jeu les images d'arrière-plan avec une largeur de 1280 pixels afin qu’ils s’adaptent à toutes les résolutions possibles. Cette préconisation évite une répétition de l'image horizontalement, ce qui entraîne généralement des effets non désirés et désastreux (raccord). Les résultats désirés ne s'obtiennent pas dès le premier essai. Aussi une série de tests semble nécessaire à cette étape du développement. Finalement, on rencontre le plus souvent des sites conçus en 600 pixels de large pour être vus en 800x600 ou plus, le reste de la largeur étant un arrière-plan neutre. La page reste alors toujours bien lisible quelque soit la résolution. Résolution 640x480

Résolution 800x600

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

5.3 La zone de sécurité A cause des différentes résolutions d’écran possibles et des modifications apportées à l'affichage des pages du site, est né dans la pratique de la publication Web, le concept de la zone de sécurité. Celle-ci est une zone qui, quelle que soit la résolution d’écran, le système d’exploitation ou le navigateur utilisé, est vue parfaitement par l’internaute. Zone de sécurité du navigateur Cette zone correspond aussi à la partie de la page Web qui apparaît en premier à l’œil du visiteur et dans laquelle on regroupe le maximum d’informations littéraires ou graphiques (véritable synthèse de la page) qui l’incitent à utiliser le défilement vertical pour poursuivre l’exploration de la page. 11 octobre 2009

23242407.doc

Page 40 sur 84

Systèmes Répartis

INTERNET

Site Web

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

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

11 octobre 2009

23242407.doc

Page 41 sur 84

Systèmes Répartis

INTERNET

Site Web

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

5.4 La mise en page Classique ou "délire" ? Livresque ou audiovisuel ? Comment présenter l'information sur l’écran du visiteur relié à la toile ? D’une façon classique, quasiment livresque ou, profitant des dernières technologies en matière de publication sur le Web, puiser l'inspiration dans les créations audiovisuelles comme la télévision et spécialement ses bandes annonces ou ses spots publicitaires ? Le point de vue du classique La transmission d’un savoir se fait, autant pour l’auteur que pour le lecteur, d’une façon structurée et claire. On ne peut passer outre à l’héritage culturel de siècles d’édition au risque de décontenancer le visiteur. Titres, chapitres, sous-chapitres, éventuellement en-tête et pieds de page apportent une hiérarchie du contenu qui permet tout au long de l’exposé d’aller du principal au particulier et qui induit ainsi une structuration de la connaissance. Clarté et netteté de la mise en page restent et resteront le maître mot de l'expression. Les animations et autres effets visuels ou dynamiques ne font que distraire le lecteur du véritable contenu et créer à la longue un sentiment d'inconsistance pour finalement le lasser du site. Le Web reste avant tout un formidable réservoir d’informations même si certains veulent en faire un parc de loisirs. Il importe devant cette profusion d’informations, qui ira à n’en pas douter de façon croissante, d’apporter une information pertinente, détaillée, actualisée et surtout facilement accessible. La véritable dynamique du Web ne réside pas dans ces animations que l’on dit révolutionnaires, mais dans la démarche active de l’internaute vers l’information qu’il souhaite trouver. C’est cette information qu’il faut lui donner, pas des "mots qui bougent"... Au royaume du Web, plus que jamais le contenu sera roi. Le point de vue du "délire" Avec les derniers développements du Javascript, du DHTML voire de Flash, la mise en page des sites Web est profondément bouleversée. Les diverses animations sur le texte ou les images, pour autant qu'elles ne soient pas inutilement gratuites, viennent renforcer la transmission de l'information. Le livre n'est pas le seul moyen de communication. Il existe aussi l'audiovisuel et les présentations multimédia. Les publicitaires l'ont bien compris et leurs spots à la télévision ne font plus que raconter leur histoire de la façon la plus convaincante possible. Par des effets dynamiques, ils attirent le regard et l'esprit pour tantôt faire ressortir un mot ou un logo ou tantôt synthétiser un message. Il est évident que le contenu ne suffit plus et que c'est le message qui est transmis de la façon la plus performante qui l'emporte. Les gens ne lisent plus ou très peu... par contre ils passent des heures à regarder de façon consciente ou non 11 octobre 2009

23242407.doc

Page 42 sur 84

Systèmes Répartis

INTERNET

Site Web

leur poste de télévision. Consciemment ou non, ils s'attendent à retrouver lors de leur exploration du Web, la même forme d'expression et le même environnement visuel. Le langage HTML et ses développements annexes possèdent maintenant tous les outils pour mettre en place son propre mode d'expression, créatif et dynamique. En conclusion Bien au-delà d'un exercice de style, ces deux points de vue ne sont pourtant pas inconciliables. La mise en page sera dictée par la densité du contenu et surtout par le public visé. Il ne faut cependant jamais oublier que cette mise en page doit être au service de la transmission de l'information et rester claire, nette et efficace.

5.5 Cadres ou tableaux Les cadres [frames] permettent de diviser l'écran en 2 ou plusieurs fenêtres et d'afficher dans chacune de celle-ci des documents HTML distincts. Ce système offre une alternative puissante pour la conception visuelle et l'organisation de la navigation d'une publication Web. On peut affirmer qu'à l'heure actuelle, il n'existe plus de problèmes de compatibilité à l'utilisation des cadres dans un site. En outre, la migration vers des résolutions d'écran plus grandes (1024x768 au lieu de 800x600) arrangent visuellement bien les choses. Pourtant les cadres gardent leur part de détracteurs qui préfèrent garder les présentations sous forme de tableaux. AVANTAGES CADRES Simplicité du code. Menu toujours présent à l'écran. Riches possibilités en Javascript. Code moins visible pour les débutants. Bien que les cadres ne soient pas implantés directement dans certains éditeurs HTML, leur écriture est simple. Cette simplicité du code se paie par une grande rigueur au niveau des attributs des balises. Les cadres restent, pour les concepteurs débutants, un des meilleurs moyens pour "s’emmêler les pinceaux". Avec la division de l'écran en fenêtres, la tentation est grande d'en réserver une pour y mettre le menu (complet) des points abordés dans le site et offrir ainsi un outil de navigation qui sera toujours présent sous les yeux de l'internaute. Ce genre de cadre est spécialement apprécié pour les sites dont le contenu est appelé à se développer fréquemment car il suffira alors de modifier le seul fichier qui apparaît dans ce cadre. Pour les concepteurs experts, les cadres et surtout les cadres invisibles, présentent de multiples possibilités : - pour passer des valeurs d'une page à l'autre (en Javascript). - pour masquer des données jugées confidentielles (compteurs, statistiques). - pour précharger des images dans le cache. - etc. 11 octobre 2009

23242407.doc

Page 43 sur 84

Systèmes Répartis

INTERNET

Site Web

Bien que l’astuce ne fera pas long feu, l’accès au code des pages incluses dans les cadres est un peu moins aisé pour les internautes débutants. INCONVENIENTS CADRES Référencement délicat sur certains moteurs de recherche (Hotbot). Barre de défilement pas très esthétique. Manipulations plus difficiles pour les débutants. Le référencement auprès de certains moteurs de recherche, spécialement ceux qui scannent le texte de la page, se révèle une opération périlleuse car la page de définition de cadres ne comporte que quelques lignes de code HTML. Le référencement d'une page nécessite une connaissance pointue de l'emploi des balises META. La barre de défilement introduite par défaut, et par ailleurs bien pratique, est souvent d'une esthétique douteuse dans l'ensemble visuel de votre page. Bien entendu, il est possible de la faire disparaître [border=0 frameborder=no framespacing=0]. Mais si cela fonctionne visuellement très bien sous une résolution d'écran déterminée (exemple 800x600), il est quasi certain qu'une partie de votre menu, par exemple, sera inaccessible et donc impossible à consulter, sous une résolution inférieure (640x480). L'impression et l'enregistrement de la page sont plus délicats pour les internautes débutants. AVANTAGES TABLEAUX Présentation excellente. Compatible avec tous navigateurs. Les tableaux sont très utiles pour la mise en page, pour "dessiner" une page Web au millimètre près. "En publication HTML, tout est tableau". Que ce soit pour créer un alignement, une composition de page ou un menu de navigation, les tableaux offrent toujours une présentation impeccable et compatible avec tous les navigateurs. INCONVENIENTS TABLEAUX Code entier à répéter pour chaque page à créer. Lourdeur du code à télécharger avec certains navigateurs. Encore quelques différences entre Netscape et Internet Explorer. Construire un menu de navigation qui se retrouve sur chacune des pages d'un site peut se révéler fastidieux car il faudra répéter pour chaque page le code entier. Le fait le plus fastidieux réside dans les fréquentes mises à jour ou ajoutes du site. Il faudra alors modifier ce menu de navigation dans toutes les pages du site alors qu'avec un menu de navigation localisé dans un cadre, il suffit d'ajouter quelques lignes dans le fichier en question. Le navigateur compose les tableaux de la page à partir des balises du langage HTML. Si la page comporte un grand tableau avec de nombreuses lignes et colonnes, si ce tableau initial comporte de nombreux autres tableaux imbriqués, l'opération de composition de la page peut prendre un 11 octobre 2009

23242407.doc

Page 44 sur 84

Systèmes Répartis

INTERNET

Site Web

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

5.6 Typographie Il faut bien admettre qu’il n’est pas évident de composer avec les polices de caractères... En langage HTML, on peut utiliser n’importe quelle police de caractère mais à la condition que celle-ci soit installée sur l’ordinateur du visiteur. Ainsi, si tout le site est écrit avec la police Amelia, et si cette police n’est pas installée sur le poste du visiteur, celui-ci verra le site dans la police par défaut de son navigateur, soit généralement en Times New Roman. Une solution consiste à employer les polices par défaut du système d’exploitation, polices que tout utilisateur est sensé avoir sur sa machine. Mais on ne peut pas dire qu’elles apportent grand chose de plus que les classique Times New Roman ou Arial. Polices par défaut pour Windows 95 et Macintosh

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

11 octobre 2009

23242407.doc

Page 45 sur 84

Systèmes Répartis

INTERNET

Site Web

Taille de certaines polices sous Windows et Macintosh

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

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

11 octobre 2009

23242407.doc

Page 46 sur 84

Systèmes Répartis

INTERNET

Site Web

Chapitre 4 : Apprécier un Site Une fois le site Web publié, il convient de fidéliser ses visiteurs. Il faut donc charmer les visiteurs du site pour qu'ils aient envie d'y revenir. Mais que faut-il donc faire pour obtenir de tels résultats ? Référencer un site Web sur la Toile entraîne nécessairement un classement, au moins au niveau des moteurs de recherche style annuaire, parmi les sites traitant du même thème. Vouloir attirer le maximum de visiteurs impose de se classer parmi les meilleurs sites. Les sites référenceurs, ou les moteurs de recherche, vont donc juger notre site suivant une batterie de critères. Quels sont-ils ? Les deux parties de ce chapitre essaient de répondre aux deux questions précédentes. La consultation de ce chapitre est utile pendant la phase de conception du site, une fois que l'on a dressé la maquette du site (organisation physique et architecture logique), pour ne pas prendre de mauvaises directions dès la conception des premières pages. Ce chapitre ainsi que celui portant sur l’ergonomie devrait constituer le livre de chevet du concepteur pendant toute la phase de développement et de test.

1. Lignes de force 1.1 Publication papier Avant de se lancer dans une publication Web, il est difficile d'éviter la comparaison avec la publication papier. La plupart des concepts pour structurer l'information s'appuient sur l'organisation de livres, brochures, périodiques ou catalogues qui sont développés autour de la publication imprimée. Culturellement, il est impossible (voire dangereux car le risque de décontenancer l’interlocuteur existe) de passer outre à des siècles de règles et de conventions. Mais force est de constater que la publication sur Internet comporte ses propres spécificités. Sans vouloir être exhaustif, soulignons en quelques-unes. • L'internaute n'a pas la sensation physique du livre et risque d'être rapidement perdu dans le dédale d'écrans qui se présentent à lui. Il faut plus que jamais structurer l'exposé et offrir des outils de navigation pour lui permettre de se mouvoir ou même de le guider dans le site. • Autant pour les yeux que pour l'esprit, l'auteur devra communiquer en terme d'écran et non plus en terme de feuille de papier d'un format déterminé. • Le langage HTML, langage informatique utilisé pour écrire les publications Web, n'assure pas la maîtrise du document comme le permet le logiciel de traitement de texte à l'égard du document que l'on imprime. Un visiteur visionnera peut-être le site avec une police de caractères plus grande que celle visualisée chez le concepteur, une grandeur d'écran différente ou une qualité d'image moindre... • L'internaute a une démarche active vers l'information qu'il recherche. Sauf quelques "contemplatifs" du Web, l'internaute moyen lira les pages en diagonales, dans un ordre 11 octobre 2009

23242407.doc

Page 47 sur 84

Systèmes Répartis

INTERNET

Site Web

dispersé, qui sera tout sauf celui souhaité par l'auteur, jusqu'à l'information recherchée. Une fois "son" information trouvée, le site sera considéré comme un site génial. Mais se souviendra-t-il des mises en pages et autres graphiques travaillés, retravaillés, bichonnées pendant des heures voire des semaines ? ... La publication Web offre un rapport "prix / audience / délai" défiant toute concurrence vis à vis de l’édition traditionnelle :  le coût des moyens techniques est accessoire sinon dérisoire au vu de ceux de la production d'un livre ou d'une revue.  la barre des 100 000 lecteurs est quelque chose d'accessible sur le Web, même pour un site personnel.  le délai des corrections, actualisations et autres mises à jour sera fonction de la propre créativité du concepteur. Par contre, la publication Web est exigeante en travail et donc en temps à y consacrer. La différence essentielle est cependant l'interactivité qu'apporte la publication Web. Prenons simplement les courriels (e-mails) des visiteurs [1 à 2% en moyenne], qui communiquent en temps réel, encouragements, critiques ou suggestions. Quelle mine d'or incomparable pour les mises à jour ou les développements ultérieurs de l'œuvre !

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

Le pourquoi de cette démarche (objectifs) engendrera le public visé. La connaissance du public déterminera alors trois composantes : le contenu rédactionnel et la présentation visuelle de votre publication qui devront, l'un et l'autre, tenir compte des particularités de fonctionnement de ce nouvel outil de communication qu'est Internet. En outre, une fois le site sur le réseau, l'interactivité et précisément les courriels (e-mails) des visiteurs permettront de mieux connaître "le" public et d'affiner, lors des mises à jour, le précieux schéma de réflexion du site : objectifs  public  contenu, visuel et fonctionnel.

11 octobre 2009

23242407.doc

Page 48 sur 84

Systèmes Répartis

INTERNET

Site Web

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

1.3 Objectifs Sans objectifs, pas de cohérence. Sans cohérence, pas de public non plus !

La première étape dans la conception d'un site Web est la définition des objectifs poursuivis dans la création d'un site. Ces objectifs formeront la "colonne vertébrale" de la communication qui apportera la cohérence indispensable au site. Ces objectifs fourniront également un outil d'évaluation du site, ô combien utile pour éventuellement corriger le tir ou guider le concepteur dans ses développements ultérieurs. Ces objectifs peuvent prendre des formes multiples : • être présent sur le Web. Objectif minimaliste, il faudra dans ce cas veiller à la densité du contenu. • faire des visiteurs ou du trafic. Ici le visuel risque d'être prépondérant mais ceci ne fidélise pas forcément une clientèle. • faire un site de liens. Le fonctionnel invitera le concepteur à vérifier régulièrement la validité des liens. • faire un site de promotion d'une association ou d'une marque commerciale. Un mariage harmonieux du contenu et du visuel sera la priorité absolue et fera alors le succès du concepteur. • faire un site commercial. Il convient de remplacer dans ce qui suit les mots "contenu pertinent" par "service probant". • faire un site académique. Il faudra penser à alléger le poids du contenu par un visuel adapté et une facilité de navigation quasi intuitive. • informer ou distraire. En deux mots, voilà deux programmes bien différents.

1.4 Public visé Connaître son public pour communiquer avec lui.

L'étape suivante dans le processus d'élaboration d'un site sera d'identifier les utilisateurs potentiels du site afin d’adapter la stratégie de communication à leurs besoins et leurs attentes. Outre la densité du contenu et la sophistication du visuel, cette connaissance du public influencera également la structure ou l'aspect fonctionnel du site. Les internautes novices souhaitent une structure claire voire dirigiste tandis que les internautes expérimentés ont plutôt 11 octobre 2009

23242407.doc

Page 49 sur 84

Systèmes Répartis

INTERNET

Site Web

horreur d'une structure trop lourde qui leur donne l'impression d'être chapeauté et de freiner leur accès à l'information. Les internautes novices et visiteurs occasionnels. Ces internautes novices sont demandeurs d'une structure claire et d'un aperçu qui illustre comment l'information est arrangée dans le site. Un menu textuel trop détaillé les décontenancera. Ainsi préféreront-ils un menu, idéalement agrémenté d'une touche graphique, de 4 à 6 sujets. Pour ces internautes novices, une page d'accueil au visuel attractif et à la mise en page soignée sera souvent décisive [attention, ils n'utilisent que très peu le défilement vertical]. Les visiteurs occasionnels apprécieront un plan du site, des pages d'aperçu et des petites icônes qui leur rappellent où se situe l'information dans le site. Un dictionnaire des termes techniques, acronymes et abréviations ainsi qu'une FAQ ["Frequently Asked Questions" ou Foire Aux Questions] peuvent être très utiles à ces visiteurs d'un jour. Les internautes experts et visiteurs fidèles. Ces internautes expérimentés utiliseront le site pour obtenir rapidement une information précise et pertinente. Ils se révèlent assez impatients lorsqu'ils sont confrontés à des petits menus en cascade de 4 à 6 choix et les fioritures graphiques leur importent peu. Ils ont généralement un but spécifique en tête et ils apprécieront les menus textuels détaillés, les outils de navigation clairs à la symbolique légère qui permettent une recherche rapide jusqu’à l'information souhaitée. En fait, ils ne feront que traverser le site jusqu'à la bribe de contenu qui les intéresse. Le fin du fin en terme de structure d'un site est d'être capable de s’adapter à plusieurs profils d'utilisateurs.

1.5 Contenu rédactionnel Le Web est par essence textuel. Le Web est une formidable source d'informations. Mais à la différence de la télévision par exemple, l'internaute doit adopter une démarche active car il doit aller chercher cette information. Dans cette recherche, il s'attend à trouver de l'information utile et un contenu pertinent et actualisé. Dans le cas contraire, l'internaute s'en ira frustré et on peut parier qu'il ne remettra jamais les pieds dans votre site. N'oubliez pas non plus que le Web est un marché très concurrencé et que la plupart des sujets d’informations sont ou seront traités à de multiples reprises. La différence se fera sur la qualité et le détail du contenu. L'internaute moyen après avoir longuement vagabondé dans tous les sens sur la toile, se limite très souvent, après quelques mois, à une vingtaine de sites qui correspondent à ses centres d'intérêt et qu'il revisite à intervalle régulier. Ces sites ainsi "élus" le sont non pas pour le graphisme puisqu'il le connaît par cœur et ne le regarde même plus, non pas pour la facilité de navigation puisqu'il l’oublie tellement il se sent à l'aise, mais pour le contenu et surtout son actualisation régulière. Le contenu est le meilleur moyen de fidéliser le public. Faire venir le visiteur sur votre site, c'est bien, le faire revenir c’est assurément la plus belle réussite ! 11 octobre 2009

23242407.doc

Page 50 sur 84

Systèmes Répartis

INTERNET

Site Web

Le Web est large et les publics sont variés. De la vulgarisation à l'expertise, chaque niveau a sa place pourvu que le sujet soit traité de façon cohérente. Il est parfois plaisant d'avoir une explication claire et simple sur un sujet déterminé sans devoir entrer dans des développements pointus mais compliqués. Rien n'empêche alors de préciser d’entrée les limites du site. Bien que l'auteur ne soit pas un champion en la matière, des fautes d'orthographe "énaurmes et trop nombreuse" non seulement agacent votre lecteur mais surtout déprécient la crédibilité de votre contenu et l'image de votre site. De grâce, il existe des correcteurs d'orthographe et des bons samaritains de la langue française pour vous relire !

1.6 Présentation visuelle Sans le graphisme, le Web ne serait pas ce qu'il est. A n'en pas douter, le Web a véritablement décollé grâce à son côté visuel. Par visuel, nous entendons non seulement les images et autres éléments graphiques mais également les animations que permettent les développements technologiques comme le Java, le Javascript et le DHTML. Dans les 30 secondes qui sont accordées pour convaincre un internaute à entrer dans le site, le visuel prend toute son importance. Un aperçu du contenu éveillera assurément son intérêt mais c'est le visuel qui entraînera le clic "gagnant" vers l'intérieur de votre site. Il ne faut cependant pas en conclure qu'il est indispensable d'être un infographiste de génie pour faire un site. L'important est bien que le visuel soit adapté au public... Et puis n'oubliez pas qu'un visuel sobre, net et attrayant suffit dans la plupart des cas. Soulignons aussi que le visuel doit garder le visiteur sur le contenu et non le distraire de celui-ci. Le visuel est aussi (ou surtout ?) une autre façon de communiquer le contenu au visiteur. En aucun cas, il ne sera une occasion pour se faire plaisir ou étaler gratuitement ses talents graphiques. Enfin, il ne faut pas oublier que les internautes comportent, comme dans la vie de tous les jours, leur lot de myopes, presbytes et autres daltoniens. Pensez à eux avec des couleurs nettes et des images vraiment informatives. Le visuel est aussi fort utile pour structurer les propos et agrémenter la mise en page. On veillera à créer tout au long des pages d'un site une identité et/ou une cohérence visuelle qui guidera l'internaute tout au long de sa visite. On prêtera une attention particulière à cette identité visuelle lorsque plusieurs personnes participent à l'élaboration du site. Cet aspect visuel doit impérativement tenir compte de l'aspect fonctionnel de la publication sur Internet et tout spécialement du temps de chargement des images et du temps de réponse des animations (Java et dans une mesure moindre le DHTML). Mis à part les sites à caractère pornographique, la patience de l'internaute moyen est vite épuisé... A ce stade de développement d'Internet et des télécommunications, le visuel et spécialement la taille des images sont encore 11 octobre 2009

23242407.doc

Page 51 sur 84

Systèmes Répartis

INTERNET

Site Web

toujours une question de compromis. On oublie trop vite qu’un site se juge en ligne à partir du réseau et non à partir de son disque dur ! Notons pour terminer que le visuel d'un site vieillira bien plus vite que le contenu. La Web a ses modes (mais oui, mais oui...) et il faudra penser à rafraîchir régulièrement le visuel du site.

1.7 Aspect fonctionnel Comprendre le fonctionnement du Web et le comportement des internautes. L'écran du visiteur et surtout le Web sera le support de la publication. Ce nouveau moyen de communication a non seulement ses spécificités techniques mais aussi déjà ses "us et coutumes". Si dans la publication papier, il suffit de tourner la feuille, sur le Web il faudra composer avec le temps de chargement de la page. Commençons par le texte. Une page de 15 à 30 K (équivalent à une feuille A4 maximum) ne pose pas de problèmes. Au-delà, le temps de chargement devient pénalisant surtout si en plus, cette page comporte de nombreux tableaux imbriqués qui ralentissent le chargement. Mais n'oublions pas qu'en langage HTML, toutes les images sont des fichiers séparés qu'il faudra charger après celui de la page. Un total d'images de 30 à 50 Ko semble être la norme. Au-delà des 80 Ko pour une image, le délai d'attente entame le capital patience de certains visiteurs et devient quelque chose de prohibitif surtout pour une page d'accueil. N'oublions pas qu'une image chargée reste dans le "cache" du navigateur, que ce dernier ne la rechargera plus à partir du réseau mais à partir du disque dur, ce qui entraîne un chargement immédiat. Ceci permet d'user et d'abuser d'éléments graphiques tels que des boutons, des puces, des tirets de séparations et d'autres bannières que l'on retrouve de page en page, d'éléments graphiques qui agrémentent la mise en page et forment ainsi l'identité visuelle d'un site. Ces différentes (petites) pages doivent être structurées de façon logique afin que l'internaute puisse naviguer efficacement dans le site. Nous avons consacré plus avant dans le module un chapitre particulier sur les différentes structures d'un site Web. Il faudra aussi prévoir de petites icônes pour que l'internaute puisse utiliser aisément cette structure et se retrouver à tout moment dans l'exploration de votre site. Les maîtres du Web conseillent de prévoir pour chaque page une possibilité de retour à la page d'accueil. Ces petites icônes de navigation devront être d'un graphique simple et d'une symbolique intuitive. L'essence du Web est la notion d'interactivité :  interactivité entre les pages du site,  interactivité entre le site et les autres sites présents sur le Web,  interactivité entre le Web et les autres outils disponibles sur Internet (qu'il s'agisse des moteurs de recherche, des e-mails, des listes de diffusion, des forums, des fichiers à télécharger, etc.).  interactivité, enfin, entre les visiteurs et l'auteur. Tout concepteur d'un site Web doit toujours veiller à créer cette interactivité que ce soit simplement par adresses de courriel cliquables, ou par l’intermédiaire de formulaires (livres d'or) à caractère plus "officiels". 11 octobre 2009

23242407.doc

Page 52 sur 84

Systèmes Répartis

INTERNET

Site Web

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

2. Critères de jugement Il suffit dans un premier temps de reprendre les lignes de force définies ci-dessus dans un ordre légèrement différent : • Contenu, • Fonctionnel • Visuel D'autres critères touchant à l'organisation du site, aux techniques utilisées, au respect du cahier des charges initial ont été ajoutés. Les différents critères et sous-critères énumérés ci-dessous ne se veulent pas exhaustifs.

2.1 Contenu •

Intérêt du sujet Est-ce que le sujet est original ? A-t-il déjà été traité par d'autres sites ? Dans l'affirmative, est-ce que le sujet a été traité de façon pertinente ou originale ?

•

Proportion d ‘éléments aspirés Ce critère sanctionne les sites qui insèrent les pages d'autrui aspirés sans les modifier, des photocopies de magazines, etc…

•

Importance texte - photos Ce critère juge les pages trop orientées texte ou uniquement composées de photos sans commentaires. Un juste équilibre entre les deux, à la manière des magazines, doit être trouvé.

•

Pertinence du contenu (texte) Le parcours de l'ensemble du contenu reste une appréciation majeure. L'internaute va trouver ou non l'information recherchée, une information valide ou non, pertinente ou non. La façon de présenter le contenu, des mots les plus importants aux détails est important. La qualité du style est appréciable.

•

Sons, Vidéos La présence d'éléments multimédias supplémentaires augmente la valeur ajoutée du site et permet de départager des sites ex-æquo sur tous les plans. Pour cela, le concepteur peut

11 octobre 2009

23242407.doc

Page 53 sur 84

Systèmes Répartis

INTERNET

Site Web

insérer de manière judicieuse des petites vidéos non gourmandes en bande passante ou sonoriser de manière non excessive un certain nombre de pages du site. •

Cohérence d’ensemble L'analyse d'ensemble du contenu reste très important : présence de rubriques hors sujet, sujet traité complètement ou partiellement, site synthétique ou non, pertinence des rubriques.

2.2 Fonctionnel •

Profondeur du site Quelle que soit l'architecture choisie, il s'agit de vérifier que l'on atteint le niveau le plus bas du site en 5 clics.

•

Problèmes de Liens Ce critère vérifie la présence de liens rompus.

•

Nombre de liens par page Un site est abouti s'il applique la structure réseau (voir chapitre architecture). Il s'agit ici dans une première démarche d'analyser l'architecture du site. Quelle que soit la réponse, la présence de liens permettant d'atteindre n'importe quelle page du site à partir d'une page donnée rehausse la valeur du site. Les liens appartenant aux barres de navigation ne sont pas pris en compte, alors que les liens posés sur une image MAP le sont.

•

Structure de la page Il s'agit ici d'analyser la structure interne d'une page. Toute page doit comporter un titre. Si celle-ci est longue d'au moins deux pages écran, elle doit proposer en dessous du titre un sommaire de page permettant d'atteindre chaque paragraphe de la page (ou autre division), d'où l'existence de liens internes. Depuis le pied de page, le visiteur doit pouvoir revenir au sommaire de page par lien interne.

•

Eléments (barres) de navigation Outre le menu général présent dans tout site normalement constitué, des barres de navigation peuvent être créées pour circuler à l'intérieur d'une rubrique comportant des boutons intitulés page suivante et page précédente. Le minimum à installer est de pouvoir revenir à la page d'accueil, ainsi qu'en tête de rubrique.

•

Temps de chargement Le temps de chargement dépend d'une part de l'encombrement du réseau ou plutôt de la bande passante réservée au visiteur mais d'autre part et surtout dépend de la taille des fichiers téléchargés sur le poste du visiteur. Il faut limiter les pages à une taille de 15 à 30 Ko, celles des images entre 50 et 80Ko, celles des applets Java à 100Ko. La page d'accueil, primordiale pour l'appréciation du site, ne doit pas être trop chargée d'images ou d'applets.

•

Portabilité

11 octobre 2009

23242407.doc

Page 54 sur 84

Systèmes Répartis

INTERNET

Site Web

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

2.3 Visuel ou Esthétique •

Arrière-plan La couleur d'arrière-plan peut être jugée de façon intrinsèque (en rapport avec le sujet), ou en liaison avec le texte (harmonie des couleurs, importance du fond par rapport au texte). S'il s'agit d'une image, le choix du motif peut être mis en cause ou la taille de l'image initiale (problème de résolution d'écran entraînant un effet damier portant atteinte à l'esthétique du site).

•

Police Les polices vont être jugées suivant leur nombre au sein d'une même page (inférieur à trois) ou leur couleur (en accord avec le fond, mots importants, légendes textuelles, etc...) ou leur taille (illisibilité, trop gros). Le choix judicieux des polices peut être apprécié. Les polices les plus utilisées sont Verdana ou Arial, ou Times New Roman.

•

Agencement des éléments La pagination style magazine va être utilisée pour juger du découpage des pages. En dehors des zones réservées au titre et au sommaire de page, les autres zones doivent être remplies de manière à ne laisser aucun vide derrière soi. Le juste alignement des objets de la page les uns par rapport aux autres peut entrer en considération dans ce critère.

•

Absence de bordures Une attention particulière est apportée au choix des bordures de tableaux (absence ou présence justifiée, couleurs, épaisseur, effet 3D grâce aux feuilles de style). Il en est de même pour les bordures d'images : bordures volontairement artistiques ou liées aux liens posés dessus. Les bordures de cadres peuvent faire l'objet de la même attention.

•

Cadres La présence d'une page d'accueil découpée en cadres exige que le concepteur sache gérer finement cette technique. En général, les concepteurs choisissent de ne pas laisser le visiteur retailler la dimension des cadres, de bannir la présence d'ascenseurs pour visualiser l'intégralité du sommaire ou du titre par exemple.

•

Minimum d'ascenseurs La présence d'ascenseurs horizontaux (barre de défilement) est à proscrire. La présence d'ascenseurs horizontaux doit se limiter à deux voire trois écrans.

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

23242407.doc

Page 55 sur 84

Systèmes Répartis

•

INTERNET

Site Web

Page d'accueil = index.htm ou index.html Ce nom de fichier donné à la page d'accueil se trouve être le premier nom configuré dans les serveurs Web.

•

Organisation des fichiers Le chapitre portant sur l'organisation physique renseigne sur les critères attendus. Synthétiquement, en fonction du contenu du site, l'on attend une structure de répertoires permettant de stocker de manière séparée les éléments multimédias (images, sons) des pages Web, les éléments techniques (scripts, applets, etc...) du reste du site.

•

Nommage des fichiers Les caractères espace et souligné sont déconseillés, ceci afin d'assurer une meilleure portabilité. Les noms de fichiers ne doivent pas être trop longs ( <255 caractères) mais suffisamment longs pour être explicites. Les noms doivent être en rapport avec le titre de la page, ou le motif représenté pour une image.

•

Fichiers inutiles Une attention doit être portée lors de la publication du site. Il s'agit de transférer vers le serveur hébergeur le site seulement et non les différents essais effectués.

•

Titre des pages (balise title) La balise title (titre apparaissant dans la barre du navigateur en vu et place du nom et chemin de fichier) doit être considérée comme obligatoire. Dans le cas où la page d'accueil décrirait un ensemble de cadres, seule celle de la page de définition des cadres nécessite un titre au bénéfice du visiteur. Si les pages du site sont référencées auprès de différents moteurs de recherche, il convient de renseigner ainsi chaque page.

•

Charte Afin de maintenir le site aisément, il est conseillé d'écrire une charte du site. Ce dernier, outre le nom du site, renseigne sur : le but du site, les acteurs, sa localisation, son architecture, son organisation, sa charte graphique, etc... Ce document peut être destiné d’une part au concepteur qui va ne maintenir le site qu'à un rythme mensuel par exemple, et d’autre part à l'hébergeur pour la surveillance du site, ou ...

2.5 Techniques Les techniques utilisées peuvent aussi faire partie de la grille de critères. Il existe un certain nombre de techniques permettant d'insérer de l'interactivité ou un comportement dynamique à la page Web (voir le module HTML dynamique). Scripts Outre la page de formulaire destinée à faire apprécier le site par le visiteur, le concepteur peut utiliser des scripts pour tester le type de navigateur du visiteur, gérer le menu général du site, informer le visiteur par l'ouverture de fenêtres popup, afficher des images, etc... Feuilles de style 11 octobre 2009

23242407.doc

Page 56 sur 84

Systèmes Répartis

INTERNET

Site Web

La technique des feuilles de style a pour but de donner un style homogène à une page, à toute une partie du site (niveau rubrique), sinon à tout le site. La maîtrise de cette technique améliore le visuel porté sur le site. Entre autres, il met en valeur le texte par le surlignement, il crée des faux boutons à partir de la gestion des bordures de texte. Par ailleurs, il place les objets à un endroit déterminé de la page, ce qui nous permet de superposer des images ou objets (techniques des calques). Une autre technique est d'utiliser les Server Side Includes. Toutes ces techniques ne demandent pas au serveur de lancer une application. Le site sera jugé sur le plan technique d'une manière différente s'il sollicite l'exécution de programmes hébergés par ce dernier. Un autre module consacré aux applications Web se chargera d'apprécier ce genre de site.

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

3. Conclusion La lecture de ce chapitre achevée permet au concepteur néophyte d'avoir tous les éléments (ou presque) pour se consacrer au site, non seulement dans la phase de conception mais aussi dans la phase de test et de validation. Organisation et méthodes sont les mots-clés assurant une validation solide du site. Il ne faut pas hésiter à solliciter d'autres avis que le sien pour faire apprécier et juger un site, tester une mise en ligne officieuse à l'aide de partenaires. La persévérance reste le meilleur conseil !

11 octobre 2009

23242407.doc

Page 57 sur 84

Systèmes Répartis

INTERNET

Site Web

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

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

1. Opérations préalables 1.1 Nom du site Site d'entreprise Le nom de domaine donné au site peut, auprès d'un organisme adéquat rencontré sur le réseau Internet, soit : 11 octobre 2009

23242407.doc

Page 58 sur 84

Systèmes Répartis

INTERNET

Site Web

• se louer, • être obtenu gratuitement sans compensation, ou gratuitement moyennant l'accueil d'un certain nombre de bandeaux publicitaires. Voici trois exemples de sites offrant des services de location : ère  http://www.amen.fr/ (6 francs HT/mois pour la 1 offre)  http://www.gandi.net/ (12 euros par an)  http://www.domaindirect.com ( $24.99 par an) Le nom de domaine doit respecter un certain nombre de règles de nommage couramment admises dans le monde Internet, notamment en ce qui concerne le suffixe emprunté soit aux domaines de plus haut niveau (TLD ou Top Level Domain), soit aux bigrammes réservés aux pays du monde entier, soit les deux combinés en prenant soin de terminer le nom par le bigramme du pays : • TLD : suffixes d’origine (.com, .net, .edu, .net, .gov, .mil, .int), suffixes récents (.arts, etc.) • Bigrammes des pays : .fr pour la France, .de pour l'Allemagne, etc... Tout organisation ou particulier voulant terminer son nom de domaine par le suffixe ".fr" doit s'adresser à un prestataire Internet ayant signé une convention d'adhésion à l'AFNIC (liste d'au moins 1000 prestataires sur le site en question). Ce prestataire s'adressera alors à l'AFNIC pour obtenir la création du nom de domaine correspondant. Pour plus de renseignements sur la zone ".fr", il faut consulter les chartes présentes sur le site :  http://www.nic.fr/enregistrement/nommage.html. Le nom donné au site doit être unique sur le réseau Internet. Il ne doit pas être pris par un autre site, ou trop se rapprocher du nom d'un site existant pour éviter les confusions de genre, ou être source de tracasseries administratives ou juridiques. Des bases de données "Whois" renseignent sur la préexistence de ce dernier. Le premier site officiel à consulter est : http://www.nic.fr/cgi-bin/whois, la base de données de l'AFNIC. Site personnel Dans le cas d'un site personnel, l'internaute s'adresse en premier lieu à son fournisseur d'accès. Si ce dernier ne convient pas, un certain nombre de sites, pas forcément associés à des fournisseurs d'accès, proposent des hébergements. Quel que soit l'hébergeur personnel élu, le nom du site comportera son adresse Internet du style: • www.nom_hébergeur.fr. L'hébergeur crée alors un répertoire personnel portant le nom de l'internaute ou un pseudonyme choisi librement par ce dernier (si non déjà utilisé). L'adresse URL du site est alors du genre : www.nom_hébergeur.fr/répertoire_du_site. Une variante de l'adresse URL peut être : www.nom_du_site.nom_hébergeur.fr. L'adresse de publication sera pratiquement la même que l'adresse destinatrice du transfert du site.

11 octobre 2009

23242407.doc

Page 59 sur 84

Systèmes Répartis

INTERNET

Site Web

1.2 Site hébergeur Pour l'hébergement, trois choix sont offerts : •

trouver un serveur Web (ou HTTP) existant qui puisse vous héberger (exemple du fournisseur d'accès dans le cas d'un site personnel),

•

mettre en place un serveur HTTP permanent au sein de l'entreprise,

•

mettre en place un serveur HTTP intermittent (le temps de la connexion, exemples d’un serveur local de test pour le partenaire de développement ou d’un serveur local limité aux amis).

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

fiabilité et sécurité

•

variété des applications

•

qualité des connexions

•

hébergement personnalisé

•

informations Fiabilité et sécurité

Les serveurs et ceux des clients sont installés dans des locaux climatisés, télé surveillés 24h/24 avec une présence technique permanente pendant les heures ouvrables. Les sites et les bases de 11 octobre 2009

23242407.doc

Page 60 sur 84

Systèmes Répartis

INTERNET

Site Web

données sont installés sur des serveurs équipés d'une technologie Raid (reconstruction automatique des données en cas de défaillance des disques) et d'une alimentation sécurisée (double alimentation + courant secouru). Des sauvegardes régulières sont effectuées et stockées à l'extérieur des locaux. Une protection anti-virus est activée en permanence. Variété des applications Les serveurs sont capables d'accueillir des bases de données de plusieurs types (SQL Server, My SQL, Access et autres) sur demande aussi bien dans des environnements Microsoft Windows (serveur HTTP IIS et Apache) que Linux. Les langages attendus au niveau applicatif sont de plusieurs natures : PHP, ASP, Perl, C, C++ et SQL. Qualité des connexions L'équipe technique de la société d'hébergement, présente sur place, assure la hot-line pendant les heures ouvrables et analyse les performances et le bon fonctionnement des connexions. Une connectivité évolutive permet d'encaisser des pointes de trafic en fonction des besoins. Hébergement personnalisé Le client peut opter pour un hébergement sur serveur mutualisé (plusieurs sites sur le même serveur) ou pour un hébergement sur serveur dédié. Informations Les sites hébergés bénéficient, selon les prestataires des services, de E-mailing (comptes personnels et mailing list) et des statistiques de trafic, URL et mots clés référents (balises META), etc… Ils peuvent prendre en compte également l'aspect administratif de la gestion des noms de domaines et des changements de délégation. Une prestation de référencement peut être offerte, s'appuyant sur les techniques de développement utilisées : pages statiques (HTML) mais également dynamiques (CGI, ASP, PHP, PERL, etc.); autant d’éléments a priori invisibles des moteurs de recherche qui deviennent référençables et rendent les pages disponibles auprès des Internautes. Remarque : Le choix du nom de domaine et celui de l'hébergeur ont été traités dans deux paragraphes différents. En réalité, les prestataires actuels ont tendance à proposer les deux prestations. Mises ensemble, elles peuvent coûter 107.21 € TTC (soit 703.25 FF TTC) par an. Serveur présent dans l'entreprise Les entreprises, en fonction de leur stratégie ou en fonction du personnel informatique qualifié dont ils disposent, peuvent aussi bien décider du premier type d'hébergement que du deuxième. La suite du paragraphe traite du cas où l'entreprise choisit d'héberger son propre serveur. Ces besoins seront différents en matière de serveur s'il s'agit d'un site "vitrine" destiné à assurer une stratégie de communication de l'entreprise, ou d'un système d'information type Web. Pour ce qui est du matériel, un simple PC doté d'un microprocesseur Pentium 133 suffit pour une centaine de clients. Au-delà, il faut investir dans une machine plus puissante, voire une machine de type serveur. D'autre part, les ressources mémoire du serveur varient en fonction de 11 octobre 2009

23242407.doc

Page 61 sur 84

Systèmes Répartis

INTERNET

Site Web

l'utilisation du serveur. Voici un petit tableau synthétisant grossièrement les configurations nécessaires pour des utilisations standards : Type de serveur Mémoire vive Mémoire de masse Serveur HTTP classique pour site vitrine <64 Mo 9 Go Serveur Applicatif utilisant des programmes de <128 Mo 9 Go scripts (ASP/PHP/JSP) Serveur Applicatif utilisant les autres techniques <256 Mo 18 Go (+ RAID) Serveur de streaming (vidéo, visioconférence) <512 Mo 18 Go (+ RAID) A titre d'exemple, un site d'enseignement universitaire à distance nécessite un espace disque de 2Go. Suivant la vocation du site, Intranet ou Internet, l'hébergement s'effectuera sur des serveurs différents. Dans le cas d'un site Intranet (réseau Internet réduit à la portion congrue de l'entreprise), l'achat et l'installation d'un serveur restent peu onéreux (voir paragraphe sur les serveurs). Dans le cas d'un site vitrine ou marchand, posséder son serveur HTTP permanent est une solution peu onéreuse si l'on possède une ligne louée (ligne spécialisée louée auprès de l’opérateur national France-Télécom).

2. Transfert de fichiers La publication d'un site proprement dit consiste à transférer les fichiers composant le site depuis la station de développement de l'internaute vers le serveur de la société choisie pour héberger le site. Une fois présent sur le serveur, le site est rendu public sur le réseau Internet. Avant d'énumérer les moyens disponibles de publication de site, rappelons sommairement comment fonctionne le service de transfert de fichiers, un des services les plus anciens du réseau Internet. Pour ceux qui veulent en savoir plus, il est conseillé de se reporter au module "Services Internet". Le mode de transfert de fichiers le plus couramment utilisé sur le réseau Internet repose sur l'emploi du protocole FTP (File Transfert Protocol). Les services de transfert reposent sur le principe client - serveur. L'émetteur du transfert est le logiciel client du concepteur, qu'il soit spécialisé ou autre. Le destinataire du transfert est le serveur FTP de la société choisie pour héberger le site. Quel que soit le moyen utilisé, le client a besoin de récupérer trois éléments techniques auprès du site « publieur » :  Une adresse URL de publication sur le serveur FTP de l'hébergeur : nom du serveur (ou adresse IP), puis chemin de publication spécifique au site donné  Un identifiant de connexion permettant au serveur de reconnaître le client 11 octobre 2009

23242407.doc

Page 62 sur 84

Systèmes Répartis

INTERNET

Site Web

 Un mot de passe pour protéger l'accès au lieu de publication Suivant la nature du site à publier, l'hébergeur peut indiquer plusieurs adresses situées sur le même serveur. En effet, si un élément du site nécessite l'exécution d'une application, ces applications peuvent être hébergées de manière séparée du site HTML statique ou vitrine par le webmestre du site hébergeur. Le premier exemple d'application à donner est celui du compteur de visites d'un site que l'on rencontre encore fréquemment sur un certain nombre d'entre eux. Si le concepteur ne dispose pas de compteur, le site hébergeur lui-même peut lui en proposer plusieurs modèles. L'objet des paragraphes suivants est de décrire fonctionnellement les outils en question puis de détailler techniquement la procédure à suivre.

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

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

11 octobre 2009

23242407.doc

Page 63 sur 84

Systèmes Répartis

INTERNET

Site Web

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

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

23242407.doc

Page 64 sur 84

Systèmes Répartis

INTERNET

Site Web

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

11 octobre 2009

23242407.doc

Page 65 sur 84

Systèmes Répartis

INTERNET

Site Web

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

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

23242407.doc

Page 66 sur 84

Systèmes Répartis

INTERNET

Site Web

Un courrier électronique vient confirmer la prise en compte de l'adhésion de l'internaute au service d'hébergement.

4. Moyens nécessaires Le concepteur, d'une manière générale, accède à travers le réseau, au serveur qui héberge le site, qu'il soit sur le réseau Internet ou sur le réseau local de l'entreprise,. Cependant, plusieurs cas de figure se présentent. Pour le concepteur du site Intranet de l'entreprise, il suffira d'atteindre depuis la station de développement le serveur présent sur le réseau local de l'entreprise. Pour le concepteur de site personnel, il suffira d'atteindre depuis sa station, à travers le réseau Internet, le serveur du fournisseur d'accès ou celui du site hébergeur. Pour le concepteur du site vitrine Internet de l'entreprise, deux cas sont à différencier. Soit le serveur hébergeur est situé chez un professionnel de l'hébergement, alors le concepteur se retrouve dans le cas de l'internaute classique. Soit le serveur est présent dans l'entreprise, alors ce dernier est en général isolé du réseau local de l'entreprise. Dans ce cas, le concepteur doit transiter par une station reliée au serveur, ou directement travailler sur ce dernier. Quel que soit le cas de figure, pour publier le site Web, le concepteur dispose de plusieurs moyens :

11 octobre 2009



Un logiciel spécialisé dans le transfert de fichiers,



Des fonctionnalités avancées de l'éditeur HTML, 23242407.doc

Page 67 sur 84

Systèmes Répartis 



INTERNET

Site Web

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

5. Logiciel spécialisé Il existe une quantité de logiciels de transferts de fichiers disponibles sur le réseau Internet. Leurs modes de fonctionnement restant analogues, décrire l'un d'entre eux revient à décrire les autres. Un des logiciels les plus utilisés reste WS-FTP95LE (société Ipswitch). Une fois le logiciel lancé, deux fenêtres s'ouvrent : • Une correspondante à l'écran principal, • Une deuxième proposant au client de se connecter sur un serveur donné. Fermons la deuxième fenêtre (cliquer sur "Cancel" ou...) pour décrire d'abord sommairement la fenêtre principale.

Celle-ci est partagée en deux zones d'affichage : une concerne la station locale (local system) et son système de fichiers, l'autre concerne le serveur distant (remote system) et l'organisation spécifique du service FTP. 11 octobre 2009

23242407.doc

Page 68 sur 84

Systèmes Répartis

INTERNET

Site Web

La zone de gauche garde le souvenir de la dernière opération, et notamment l'affichage de la zone du dernier téléchargement par exemple. Pour chaque zone, le logiciel propose un certain nombre de boutons d'action. Pour se déplacer dans l'arborescence d'une station, il est possible de le faire directement dans la zone d'affichage : • pour descendre sous un répertoire, double clic sur ce dernier, • pour remonter, double clic sur les deux points "..". Autrement, le bouton "Chgdir" offre une alternative. Pour spécifier le type de fichier transféré, en dessous de ces deux zones, se trouvent deux possibilités : soit deux boutons radio à choix exclusif, soit une case à cocher laissant le logiciel décider. La zone immédiatement inférieure sert à afficher le résultat des différentes opérations effectuées sur le serveur une fois la connexion réussie. Le plus intéressant en dehors de ces deux zones reste la barre de boutons d'action du bas. Le premier bouton à actionner pour se connecter sur un site FTP est "Connect". La deuxième fenêtre, évoquée en début de paragraphe, se lance. Le logiciel présente par défaut un certain nombre de profils de connexion (Session Profile) pré configurés sur des serveurs universellement connus. Pour en voir la liste, il suffit de dérouler la fenêtre "Profile Name". A chaque profil correspond une adresse sous forme chiffrée (adresse IP) ou un nom de domaine (Host_Name). Si l'adresse indiquée par l'hébergeur ne se trouve pas dans la liste, il faut alors créer un nouveau profil (bouton New).

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

23242407.doc

Page 69 sur 84

Systèmes Répartis

• • • • •

INTERNET

Site Web

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

Une fois le profil défini, n'hésitons pas à le sauvegarder en actionnant le bouton "Save". Le fait d'actionner le bouton "OK" lance la procédure de connexion. Supposons que la connexion ait réussi ! Alors les deux flèches de transfert situées entre les deux zones de la fenêtre principale décrite plus haut sont activées. La flèche orientée vers la gauche est utilisée pour télécharger alors que celle de droite sert à publier le site. Il ne reste plus qu'à sélectionner dans la zone de gauche (Local System) le contenu du site à publier (et non le répertoire qui le contient). Les touches du clavier "Ctrl" et "Shift" permettent de sélectionner respectivement le contenu élément par élément ou le tout. Une fois la sélection terminée, il suffit d'actionner la flèche droite pour démarrer la publication. Deux cas se présentent dans la zone de droite (Remote System) : • Soit il s'agit de la première connexion, alors le répertoire visé sur le serveur est normalement vide (ne pas s'affoler), • Soit il s'agit d'une Xième connexion, le répertoire contient la précédente version du site. Dans le cas d'une mise à jour du site, il convient avant de démarrer la nouvelle publication de nettoyer le site des fichiers désormais périmés. Il est conseillé de supprimer les répertoires modifiés avant de publier les nouvelles versions. 11 octobre 2009

23242407.doc

Page 70 sur 84

Systèmes Répartis

INTERNET

Site Web

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

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

1. Catégorie "Infos Locales" Il s'agit de définir ici le lieu de développement du site. Il peut se situer en local sur la machine ou vu à travers un partage réseau sous PC. Passons en revue les différentes fonctionnalités et énumérons les opérations à effectuer : •

En premier, donner un nom au site (étiquette) pour le distinguer des autres sites à définir

•

Aller chercher sur le disque local la racine du site en cliquant sur l'icône "parcourir"

•

Possibilité de définir l'adresse du site final pour les liens à adresses absolues

•

Possibilité de créer un cache secondaire pour l'éditeur Dreamweaver

11 octobre 2009

23242407.doc

Page 71 sur 84

Systèmes Répartis

INTERNET

Site Web

2. Catégorie "Infos du Serveur Web" Il s'agit de définir ici le lieu de publication du site. Il peut être atteint, soit par l'intermédaire d'un réseau local à travers un partage réseau, soit par serveur FTP dont il faut paramétrer l'accès. Accès au lieu de publication via le réseau local En supposant que le concepteur du site ait accès au serveur via une ressource partagée, ce dernier doit : •

Aller chercher le répertoire distant

•

Laisser cocher la case "actualiser les fichiers distants " pour faire prendre en compte automatiquement par le logiciel tout changement intervenu entre la dernière carte mémorisée et une nouvelle arborescence physique effectuée en dehors du logiciel. Si la case est non cochée, le concepteur est obligé de cliquer sur "actualiser" dans la fenêtre "carte du site".

Accès au lieu de publication via Internet Dans ce cas, les champs suivants sont à renseigner : •

Donner l'adresse du serveur FTP (adresse IP ou nom de domaine équivalent) de l'hébergeur (Hôte FTP),

•

Indiquer le répertoire personnel attribué par l'hébergeur, répertoire destinataire du transfert du site situé sur le serveur de publication,

11 octobre 2009

23242407.doc

Page 72 sur 84

Systèmes Répartis

INTERNET

Site Web

•

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

•

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

3. Catégorie "Archives / Extraire"

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

11 octobre 2009

23242407.doc

Page 73 sur 84

Systèmes Répartis

INTERNET

Site Web

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

Les différents champs permettent de paramétrer la présentation de la carte du site local : • Définir la page d'accueil • Dimensionner la fenêtre de la carte • Choisir l'étiquetage des icônes • La première option consiste à cacher une partie de l'arborescence pour faciliter le travail sur les gros sites, donc masquer des fichiers. Cocher la case permet de les réafficher en italique • La deuxième option permet d'afficher les fichiers dépendants, c'est à dire les fichiers de n'importe quel type (image, applets, etc...) appelés par une page Web 5. Catégorie "Design Notes" (à partir de la v3.0) Cette catégorie est destinée au travail de groupe. Une fois le service activé, il permet d'associer à chaque page Web conçue un fichier de notes ayant pour extension complémentaire .mno. 11 octobre 2009

23242407.doc

Page 74 sur 84

Systèmes Répartis

INTERNET

Site Web

Trois choix sont proposés : •

Gérer "Design Notes" Désactiver l'option pour désactiver le service, et effacer tous les fichiers de "Design Notes" concernant le site. Le déplacement d'un fichier dans le site entraîne celui du fichier "Notes" associé. Celui-ci est rangé sous un dossier "_notes".

•

Télécharger Design Notes pour les partager. Si le concepteur est seul pour élaborer le site, il doit désactiver la case à cocher pour ne pas transférer les notes sur le site distant afin de les faire partager au groupe inexistant. Ce téléchargement a lieu lorsque le créateur archive ou place les fichiers sur le site distant.

•

Bouton "Nettoyer" Pour effacer du site des "Design Notes" non associées aux pages Web.

6. Cartes des sites de développement et de publication Une fois ces cinq onglets ou catégories configurés, le logiciel construit les deux cartes de site : le local et le distant si configuré. La fenêtre suivante, distincte de la zone de travail, permet donc de gérer de manière dynamique les deux sites. La fenêtre de gauche offre deux possibilités de représentation à l'aide des deux icônes de la barre de menu situées en haut et à gauche : architecture physique ou arborescence du site sur le lieu de publication, architecture logique ou structure des liens. 11 octobre 2009

23242407.doc

Page 75 sur 84

Systèmes Répartis

INTERNET

Site Web

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

6.2 FrontPage 2000

11 octobre 2009

23242407.doc

Page 76 sur 84

Systèmes Répartis

INTERNET

Site Web

L'éditeur FrontPage, depuis la version 2000, rassemble le logiciel de gestion de sites (Explorateur) et celui purement dédié à l’édition de pages Web. Une fois le logiciel lancé, le concepteur voulant gérer son site local de développement depuis son éditeur, ouvre le site Web existant sur la station. Pour cela, il suffit d'aller dans le menu "Fichier / Ouvrir un site Web", puis parcourir l'organisation du disque dur jusqu'à la racine du site. Une fois le site ouvert, le concepteur retourne dans le menu "Fichier", puis clique sur l'option "Publier un site". Une fenêtre apparaît demandant l'adresse URL de publication.

Si l'hébergeur n'a pas été choisi, l'éditeur propose un choix (bouton "Fournisseurs..."). Hormis ce choix, l'activation du bouton "Options" nous dévoile quelques paramétrages possibles. 11 octobre 2009

23242407.doc

Page 77 sur 84

Systèmes Répartis

INTERNET

Site Web

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

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

11 octobre 2009

23242407.doc

Page 78 sur 84

Systèmes Répartis

INTERNET

Site Web

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

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

23242407.doc

Page 79 sur 84

Systèmes Répartis

INTERNET

Site Web

Le quatrième écran définit l'adresse de publication du site, c'est-à-dire l'adresse du serveur d'hébergement. Une fois que la configuration est terminée, le système propose à l'internaute concepteur de site de se connecter à son fournisseur d'accès pour effectivement transférer le site.

8. Gestionnaire de Serveur Web Personnel

11 octobre 2009

23242407.doc

Page 80 sur 84

Systèmes Répartis

INTERNET

Site Web

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

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

11 octobre 2009

23242407.doc

Page 81 sur 84

Systèmes Répartis

INTERNET

Site Web

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

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

2. Renseigner l'en-tête de ses Fichiers La deuxième méthode relève plus d'une démarche professionnelle et technique dans la mesure où elle consiste à placer des mots-clés dans l'en-tête des fichiers importants, pour que les moteurs qui scannent les sites web les intègrent dans leurs bases de données. Il est inutile d'en mettre dans tous les fichiers HTML du site. Il est conseillé de choisir ceux qui sont les plus "significatifs", c'est à dire ceux dans lesquels les visiteurs trouveront quelque chose en y accédant directement. Le fichier essentiel à renseigner est bien sûr le fichier d'accueil, en principe index.htm (racine du site). Les attributs et paramètres font parties des balises META insérées dans l'en-tête du fichier HTML, donc entre les balises et . 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: <TITLE>Jura Speleo <META Name="keywords" Content="speleo, grotte, gouffre, karst, Jura, FrancheComte"> <META Name="author" Content="Frachon Jean-Claude"> <META Name="description" Content="La speleologie dans le département du Jura"> 11 octobre 2009

23242407.doc

Page 82 sur 84

Systèmes Répartis

INTERNET

Site Web

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

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

4. Moteurs de recherche et Sites référenceurs La troisième méthode relève aussi d'une démarche professionnelle et technique qui permet de compléter les résultats de la précédente méthode. Pour être certain que le site sera pris en compte par les moteurs de recherche, il faut le référencer dans leurs services. On expose ici deux méthodes que l'on peut utiliser de manière complémentaire: 1) soit passer par l'intermédiaire de sites référenceurs, qui inscriront automatiquement le site sur plusieurs moteurs de recherche. Il est plus simple d'utiliser des services gratuits, comme: Addme http://www.addme.com/ Annonceur http://www.annonceur.net/submit/ Référenceur http://sam.acorus.fr/referenceur/ annonce_gratuite.html

Référencement sur 25 moteurs Référencement sur 100 moteurs Référencement sur une dizaine d'outils

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

Les moteurs du type annuaire

•

Les moteurs proprement dits

•

Les métamoteurs.

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

23242407.doc

Page 83 sur 84

Systèmes Répartis

INTERNET

•

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

•

Le titre du site,

•

Sa description,

•

Le nom de la personne à contacter,

•

L'adresse de courriel de cette personne.

Site Web

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

La première étape demande des informations sur le site. La deuxième étape demande de mentionner le site éventuellement dans d'autres catégories. Ces informations sont facultatives. La troisième étape demande des renseignements personnels ainsi que la situation géographique du site (facultatif). La quatrième étape sollicite des informations concernant la durée de vie du site (facultatif), ainsi que quelques commentaires supplémentaires (facultatif). Enfin, il faut valider votre enregistrement. En réponse, le site envoie le message suivant: Merci ! Merci d'avoir pris le temps de soumettre votre site. ... Votre site est enregistré sur Yahoo.fr. La notoriété de ce dernier vous oblige à attendre quelques semaines pour que les " e-surfeurs " visitent votre site.

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

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

23242407.doc

Page 84 sur 84