Bien visualiser le site

Présentation du site

Mode d'emploi

Courrier

statistiques

LA COLLECTE DE L'INFORMATION
Pour pouvoir collecter de l'information, il a fallu sensibiliser les administrés de Châtillon-sur-Loire en les informant de l'existence du projet et en sollicitant leur collaboration active.
Pour répondre à cet objectif , la mairie a organisé des séances d'information où étaient invités les différents acteurs socio-professionnels de la ville, les associations, les élus ...

Ces rencontres ont été d'une grande importance car elles ont permis de démystifier l'image de l'Internet et d'en montrer l'utilité. De nombreuses explications ont été apportées aux personnes présentes, en particulier sur le fonctionnement de l'Internet. La structure du site ainsi que les choix technologiques ont été exdplqués à plusieurs reprises.Nous avons mesuré l'efficacité de ces interventions lors des premiers retours d'information caractérisés par des documents officiels ou personnels (la revue " le Châtillonnais ", office de tourisme, associations, photos …).
Nous avons été approvisionnés par différents canaux :

• en mains propres,
• par téléphone,
• par courrier,
• par E-mail.

LES CHOIX TECHNOLOGIQUES
Plusieurs technologies de développement et construction de sites ont été comparées.En fin de compte, nous avons retenu le logiciel Dreamweaver de l'éditeur Macromedia.

Outil favori des professionnels, ce produit présente plusieurs avantages. Tout d'abord, il offre de nombreuses fonctionnalités, une palette d'outils complète et performante et un système de gestion du site efficace. De plus, Dreamweaver est compatible avec d'autres produits (complémentaires pour la conception d'un site) tels que Flash (pour la réalisation d'animation), Fireworks (pour la réalisation de boutons et de montages graphiques), et Photoshop (pour la retouche de photos).
Même si la prise en main et l'adaptation à l'interface est plus longue que pour le logiciel FrontPage (Microsoft Editions), Dreamweaver nous a semblé être le produit totalement le plus adapté à la construction d'un site professionnel.

Outre le choix du logiciel, nous avons eu a définir la technique de mise en page. En Html, deux techniques sont couramment utilisées :

• technique des cadres,
• technique des tableaux.

Nous avons fait le choix d'une mise en page bâtie sur une structure de tableaux. En effet, seules les versions récentes de navigateurs peuvent reconnaître des pages Web réalisées à partir de cadres. Or, tous les internautes ne sont pas équipés des dernières versions de navigateur.

Durant la réalisation de ce projet, nous avons toujours eu le souci de personnaliser le site, préférant créer nos propres boutons et bandeaux plutôt que d'utiliser ceux proposés dans les bibliothèques de logiciels ou sur l'Internet. L'utilisation de Photoshop 6 a facilité ce travail. De plus, avec cet outil, nous avons pour chaque image ou photo optimisé la taille des fichiers afin d'obtenir le meilleur compromis poids / qualité. Plus une page est constituée d'éléments de taille importante (boutons, photos, dessins), plus l'affichage de la page sera long, plus l'internaute sera déçu.( notons qu'avec l'arrivée du haut débit ces problèmes seront résolus)

• En application :
  tous les boutons ont été réalisés avec Adobe Photoshop_6 et enregistrés en format GIF (256 couleurs maximum),
• toutes les photos ont été retravaillées avec Photoshop et enregistrées en format jpeg (format 24 bits donc en 16,7 millions de couleurs),
• l'animation (photo-texte) de la page d'accueil a été réalisée à partir de Macromedia Flash_4,
• le plan de la ville, les plans d'accès ont été réalisés avec Macromedia Freehand_8.

LA DESCRIPTION DU SITE WEB

La qualité d'un site Internet repose principalement sur l'organisation de l'information, tant textuelle que graphique, sur la flexibilité de la navigation et sur l'interactivité.

1 LA CHARTE GRAPHIQUE
Il est indispensable de rappeler qu'Internet, en général, et un site communal, en particulier, sont des outils d'information, de communication et éventuellement de transaction. Les critères de convivialité, de navigation et d'ergonomie doivent être des composantes fortes de la charte graphique. Il est primordial de réfléchir dès le commencement du projet à ces trois aspects avant de mettre en place l'outil technologique.

L'analyse du contexte spécifique d'une commune permet d'évaluer les forces et les faiblesses afin de potentialiser les premières à bon escient et de remédier aux secondes. Une commune n'est pas identique à une autre. Un certain nombres de caractéristiques distinguent chacune de sa voisine. L'objectif n'est pas de parvenir à une standardisation des sites communaux mais au contraire, de conserver, malgré des exigences minimales, toutes leurs diversités. Pour répondre à ces exigences, nous avons choisi de personnaliser au maximum le site de Châtillon en créant une charte graphique qui lui est propre.

La définition de la charte graphique du site de Châtillon a été une étape importante du projet. Pour réaliser le site définitif, nous avons réalisé 3 maquettes intermédiaires différentes, présentées successivement aux administrés lors des réunions à Châtillon. Ces réunions ont permis de faire évoluer et converger les idées de départ.

La charte graphique prend en compte un ensemble de critères qui caractérisent l'aspect du site :

• la police de caractères du contenu mais aussi des boutons et des liens,
• le choix des couleurs : police, boutons, fond d'écran,
• les graphiques : barres de navigation et d'habillage, bandeau, boutons,l'ergonomie, la convivialité et l'interactivité,
• la cohérence de l'ensemble.

Modèle de page

La première étape a consisté à créer une structure de pages utilisables à tous les niveaux du site. A partir de la technique des tableaux, nous avons constitué un canevas standard qui définit la taille et la position des cellules. Ce modèle permet d'intégrer tous les éléments utiles à l'internaute tout en respectant un cadre de cohérence propre à ce site. La figure suivante schématise le modèle de page et présente les éléments dimensionnels indispensables. Pour différencier les pages suivant les rubriques, le cadre qui entoure la cellule de contenu aura une couleur différente.

Il est important de concevoir le design d'un site Web en tenant compte des différents types d'écrans disponibles sur le marché. A l'heure actuelle, il est conseillé de construire le site selon une résolution minimum de 600 x 800 pixels.

Police de caractères et graphiques
A priori, il faut prendre conscience qu'un texte informatique est très différent d'un texte papier. Les textes conçus pour être diffusés sur le réseau Internet possèdent aussi leurs propres caractéristiques. En plus d'être des textes numérisés, ils forment ce qu'on appelle un hypertexte, c'est à dire un ensemble de blocs d'information reliés par des liens, qui permettent de naviguer entre ceux-ci et de pâsser facilement d'un texte à l'autre.
La police de caractères " Verdana " est retenue pour l'ensemble du site (contenu et textes des graphiques). Cette police est une des plus courantes trouvée sur les pages Web, elle n'est pas trop sophistiquée et est de lecture rapide et agréable.

Le fond d'écran est un élément à utiliser avec circonspection, puisqu'il est difficile de prévoir tous les types d'affichage pour s'assurer de la lisibilité du texte.

Le bandeau d'accueil est un montage effectué sous Photoshop 6 à partir de photos de la commune de Châtillon-sur-Loire. Nous avons décidé de mettre ce graphisme sur la majorité des pages du site. Sur les pages de contenu (dernier niveau, pages individuelles des artisans, commerçants…), il a été enlevé.

L'ergonomie de l'interface se définit comme étant tous les moyens mis en oeuvre pour guider et informer l'usager. La taille, la forme et la couleur de ses composantes sont déterminantes pour le succès du site.

Nous avons travaillé sur plusieurs batteries de boutons pour retenir finalement les modèles présentés dans la figure de droite et dans le tableau ci-dessous. Les boutons du tableau servent de base pour la constitution des barres de navigation (horizontale et verticale).Ces boutons sont interactifs, le texte change de couleur quand on amène le pointeur de la souris dessus. Les deux modèles de boutons et leurs effets sont présentés.

3.1.3 Exemple de page

La figure suivante donne un exemple de page telles qu'elles sont dans le site. Pour la rubrique " la Mairie " on remarque la présence de 8 sous-rubriques, et un contour bleu foncé qui entoure la cellule de contenu.

3.2 LES PRINCIPES DE NAVIGATION

La manière dont les informations sont présentées sur le site, le langage utilisé, l'utilisation de liens hypertextes et la mise à disposition de différents outils de navigation contribuent à la convivialité du site, c'est-à-dire à sa facilité d'utilisation et sont donc un moyen de stimuler l'usage.

Dans la mesure du possible, nous avons optimisé l'utilisation des liens hypertextes ou hyperliens, c'est-à-dire des références vers d'autres pages Web sur le même site ou sur des sites extérieurs à celui de la commune.

La navigation à l'intérieur du site se veut fonctionnelle et structurée. Dans chacune des pages du site, l'internaute a accès directement à 5 rubriques, à partir de la barre de navigation horizontale située sous le bandeau d'accueil.

Il a également accès au sommaire*, où on retrouve en seul clic toutes les rubriques du site dans une barre de navigation verticale située dans la partie gauche du tableau de la page.

De la barre verticale, en cliquant sur une des rubriques, l'utilisateur accède aux sous-rubriques et pages de contenu. Le nombre de sous-rubriques par rubrique et le nombre de pages par sous-rubrique est variable.

Pour faciliter la navigation, en bas de chaque page, l'utilisateur dispose :

• de plusieurs fonctions dont le nombre peut-être variable suivant les pages (retour haut de page, retour page précédente, page suivante),
• d'une liste de liens hypertextes qui renvoient au sommaire ou à toutes les rubriques du site.

Pour résumer, le principe de navigation permet d'avoir accès à toutes les rubriques du site en seul clic, quelque soit le niveau où on se trouve.
Par la rubrique " Espace Web ", ou on trouve une page avec des hyper liens qui renvoient sur les principaux moteurs de recherches, l'internaute pourra accéder à Internet en deux clics maximum.

De manière générale, une structure de navigation logique, une interface agréable et conviviale, une gestion intelligente des couleurs, une utilisation pertinente d'icônes très visuelles et tout à fait compréhensibles, et, une description textuelle de la structure du site, aideront l'utilisateur à naviguer sur le site communal.

C'est la prise en compte de ces éléments qui a guidé les évolutions successives de nos maquettes.

L'état d'avancement du site est le suivant :

L'ossature est terminée et 230 pages sont en ligne.
Pour être plus précis, l'architecture du site, c'est-à-dire l'ordre et l'intitulé des rubriques, sont définitifs. De plus, l'organisation interne des fichiers qui composent le site est structurée. Les photos, les images, les logos, les plans d'accès sont classés par rubrique dans des dossiers.

Ce type d'architecture a été choisi afin de faciliter les évolutions du site, les mises à jour ou les suppressions de pages.