CONCEPTION DU SITE INTERNET DE LA COMMUNE DU BROCmaevagiachino.free.fr/images/Rapport_Info.pdf ·...

UNIVERSITÉ DE NICE SOPHIA ANTIPOLIS

IUT DE NICE COTE D’AZUR

DEPARTEMENT INFORMATIQUE

41, BD NOPOLEON III – 06206 NICE CEDEX 3

RAPPORT DE STAGE POUR L’OBTENTION DU

DIPLÔME UNIVERSITAIRE DE TECHNOLOGIE

SESSION 2003 - 2004

CONCEPTION DU SITE INTERNET DE LA COMMUNE DU BROC

Présenté par Maéva Giachino

Mairie du Broc

1, place de l’hôtel de ville 06510 Le Broc

Sous la direction de : M. Loïc Solbes, tuteur entreprise M. Jean Courtoisier, tuteur IUT

Remerciements

Mon stage a été effectué à la Mairie de la commune du Broc sous la responsabilité de M. Loïc

Solbes. Qu’il me soit permis de le remercier pour son aide et toute la confiance qu’il m’a

accordée tout au long de mon stage.

Mes remerciements s’adressent également à M. Emile Tornatore, Maire du Broc, pour

m’avoir accueillie et m’avoir permis de réaliser mon stage au sein de son administration.

Je tiens aussi à remercier l’ensemble du personnel de la Mairie qui a su m’accueillir et me

renseigner dans mon travail de la meilleure des façons, et plus particulièrement Mme Elsa

Seyeux, Mme Marcelle Iorio et Mme Lise Peron.

Je remercie également M. Jean Courtoisier enseignant responsable de mon stage en entreprise

pour sa disponibilité et ses conseils, et aussi M. Sergio Sarmiento, professeur d’Expression-

Communication pour avoir répondu à mes questions sur la rédaction d’un rapport de stage.

Enfin je remercie Mlle Aicha Mansour et M. Benjamin Demaj pour leur collaboration et leur

esprit d’équipe.

Maéva Giachino Conception du site Internet du Broc 2003 – 2004

IUT de Nice Département Informatique 2

Résumés

Français Ce rapport présente le stage que j’ai effectué à la Mairie du Broc du 29 mars au 11 juin 2004,

en collaboration avec Mlle Aicha Mansour, dans le cadre de la deuxième année de DUT

Informatique. Notre projet était de concevoir le site Internet de la commune du Broc. Les

objectifs fixés étaient de réaliser un site informationnel mais également un site de service pour

les habitants.

Le planning fut établi de manière à terminer le site avant la fin du moi de mai, afin de pouvoir

effectuer les modifications éventuelles. La méthode que nous avons utilisée consistait à de

fréquentes concertations entre la personne qui commande le site et les techniciens chargés de

son développement. Nous avons eu la possibilité de choisir les outils et les solutions les mieux

adaptés pour mener à bien notre projet.

Les différentes tâches réalisées ont été les suivantes :

- élaboration du cahier des charges

- création du design

- développement du contenu du site

- finalisation du projet

A la fin du stage nous avons présenté notre travail au Conseil Municipal de la commune qui

fut très satisfait. Aujourd’hui la Mairie du Broc dispose d’un site Internet opérationnel, prêt à

être mis en ligne.



Anglais This report presents the training course that I have accomplished at the Mairie du Broc from

March 2004, the 29th to June 2004, the 11th, in collaboration with Miss Aicha Mansour, as

part of the second year of DUT Informatique, equivalent to a two-year degree diploma. The

project was to create the Web site of the town of Le Broc. The aim was to program an

informational site but also a site of service for the inhabitant.

The planning was to finish the site before the end of the May month in order to make any

necessary modifications. The way we choose was to often consult the chief of the project and

the technicians who was in charge with its development. We have the choice of the best tools

and solutions to conclude the project.

The different tasks we accomplished was :

- elaborate the task book

- create the design

- develop the contents of the site

- conclude the project

At the end of our training course, we showed our work to the town council which was

pleased. Now the Mairie du Broc has a whole and operational Web site, ready to be online.



SOMMAIRE

INTRODUCTION ................................................................................................................................................. 5 1 - ANALYSE DE LA SITUATION ............................................................................................................... 6

1.1 PRESENTATION DE LA MAIRIE .............................................................................................................. 7 1.1.1 Les différents services ..................................................................................................................... 7 1.1.2 Le Service Informatique .................................................................................................................. 8

1.2 PRESENTATION DU PROJET .................................................................................................................... 9 1.3 ANALYSE DE L’EXISTANT ................................................................................................................... 10 1.4 MOYENS MIS EN OEUVRE .................................................................................................................... 11

1.4.1 Matériel fourni .............................................................................................................................. 11 1.4.2 Logiciels utilisés ............................................................................................................................ 11

1.5 ORGANISATION ET PLANNING ............................................................................................................. 13 1.5.1 Maîtrise d’œuvre ........................................................................................................................... 13 1.5.2 Planning ........................................................................................................................................ 13

2 - CONCEPTION DU SITE INTERNET ................................................................................................... 15 2.1 LES EXIGENCES DE DEPART ................................................................................................................. 16

2.1.1 Aspect graphique ........................................................................................................................... 16 2.1.2 Aspect fonctionnel ......................................................................................................................... 16

2.2 DEMARCHE DE REALISATION .............................................................................................................. 17 2.2.1 Les différentes étapes .................................................................................................................... 17 2.2.2 Partage du travail ......................................................................................................................... 17

2.3 CHOIX TECHNIQUES ............................................................................................................................ 18 2.3.1 Langages de programmation ........................................................................................................ 18 2.3.2 Résolution ...................................................................................................................................... 19 2.3.3 Navigation ..................................................................................................................................... 20

2.4 CREATION DU DESIGN ......................................................................................................................... 21 2.4.1 Premières maquettes ..................................................................................................................... 21 2.4.2 Maquette finale .............................................................................................................................. 22 2.4.3 Feuille de style .............................................................................................................................. 24

2.5 CONTENU DU SITE ............................................................................................................................... 25 2.5.1 Les rubriques ................................................................................................................................. 25 2.5.2 Les textes ....................................................................................................................................... 25 2.5.3 Les illustrations ............................................................................................................................. 25 2.5.4 Les documents PDF ...................................................................................................................... 27

2.6 CONTRAINTE TECHNIQUE .................................................................................................................... 28 3 - FINALIS ATION DU PROJET ET RESULTATS ................................................................................ 30

3.1 REFERENCEMENT ................................................................................................................................ 32 3.2 HEBERGEMENT ................................................................................................................................... 33 3.3 RESULTATS OBTENUS ......................................................................................................................... 34

3.3.1 Un site opérationnel ...................................................................................................................... 34 3.3.2 Planning respecté .......................................................................................................................... 35 3.3.3 Présentation du projet au Conseil municipal ................................................................................ 35

3.4 EXTENSION POSSIBLE DU PROJET ........................................................................................................ 36 CONCLUSION ................................................................................................................................................... 37 GLOSSAIRE ....................................................................................................................................................... 38 BIBLIOGRAPHIE .............................................................................................................................................. 40



Introduction

La Mairie du Broc est une petite structure comptant une soixantaine d’employés. Son service

informatique n’est pas très développé. Mlle Mansour et moi-même avons donc été accueillies

au sein du Service Culture et Communication dont M. Solbes est responsable. Ce dernier

s’occupe également du Service Informatique.

La finalité de notre projet était de développer un site Internet afin d’informer les visiteurs sur

la commune et de faciliter les démarches administratives pour les habitants. Les objectifs

principaux de ce site étaient de favoriser la communication et l’accès à l’information,

d’améliorer les services publics rendus aux usagers et de relancer l’attractivité de la

commune. Nous avons dû pour cela nous familiariser avec un environnement de travail que

nous ne connaissions pas et dont nous avions tout à apprendre. Nous avons travaillé en équipe

pour mener à bien ce projet.

Dans une première partie, nous analyserons la situation, à savoir le contexte du stage,

l’environnement de travail, les moyens mis en œuvre au sein de la Mairie et l’organisation

adoptée. Ensuite, nous présenterons la réalisation du site Internet avec les exigences de départ,

les choix techniques et le développement. Enfin dans une dernière partie nous exposerons la

finalisation du projet et les résultats obtenus.



11 -- AANNAALLYYSSEE DDEE LLAA SSIITTUUAATTIIOONN



1.1 Présentation de la Mairie

Le Broc est une petite commune du moyen pays niçois. Elle domine les vallées du Var et de

L’Esteron et compte 1021 habitants pour une superficie de 1865 ha. C’est un village riche en

culture et en patrimoine.

1.1.1 Les différents services

La Mairie du Broc compte une soixantaine d’employés regroupant les Services

Administratifs, la Voirie et le Service Scolaire. 25 d’entre eux sont titulaires de la fonction

publique. Comme toutes les mairies, elle est organisée en plusieurs services :

- Accueil / Secrétariat

- Service État Civil

- Service Élections

- Service du Personnel

- Service Culture / Communication

- Service Comptabilité

- Service Urbanisme

- Service Travaux

- Service Jeunesse (CLSH)

- Service Informatique

- Service Scolaire

- Service Technique (Voirie)

- Service Entretien

Le Broc n’étant pas une grande ville, sa Mairie est relativement petite. Par conséquent,

certains services sont assurés par un seul employé. Par exemple, la personne chargée du

Service des Élections assure également le Service de l’État Civil.



La Mairie du Broc fonctionne selon un système hiérarchique simple (annexe n°1). Il y a le

Maire de la commune, M. Emile Tornatore, les 14 conseillers municipaux dont 4 adjoints, le

secrétaire général et les employés des différents services. Il existe également un coordinateur

des Services Techniques.

Il est à noter que M. Tornatore est responsable de la Mission Académique des Technologies

de l’Information et de la Communication pour l’Enseignement (MATIS). Il est également

président de la Communauté des Communes des Coteaux d’Azur (CCCA).

1.1.2 Le Service Informatique

Du fait de sa petite structure, la mairie du Broc ne possède pas un service informatique très

développé. En effet, c’est M. Solbes qui en a la charge, en parallèle avec son travail dans le

Service Culture et Communication.

Les employés de la Mairie travaillent sur un réseau informatique qui leur permet d’échanger

des informations entre eux, mais également de sauvegarder toutes les données.

Un nouveau serveur, plus puissant, a été installé au mois de mars. Il est équipé d’un

processeur Celeron et de Small Business Server 2003 qui est un système d’exploitation

Windows spécifique aux serveurs.

De plus, Windows XP Professionnel a été choisi comme système d’exploitation pour 90% du

parc informatique de la Mairie, et une connexion Internet de type ADSL 1Mbs a été installée

récemment.



1.2 Présentation du projet

Un site Internet n’est ni plus ni moins qu’un nouvel outil de communication et de promotion.

Grâce à Internet, l’information est en ligne 24 heures sur 24. C’est pourquoi la Mairie du Broc

a décidé de se présenter sur le monde du Net, et a fait appel à deux étudiantes en

Informatique.

Notre projet a donc pour finalité la conception du site Internet de la commune du Broc. Un

site tout d’abord informationnel mais également un site de services ; en effet il devra informer

le public sur la commune et faciliter les démarches administratives pour les habitants,

notamment par le biais de téléchargement de formulaires.

Nous avons alors dégagé les objectifs principaux du projet : améliorer la communication et

l’accès à l’information, améliorer les services publics rendus aux usagers et enfin relancer

l’attractivité de la commune en valorisant l’offre et les productions locales.

Le site devra s’adresser d’une part à un public présent sur le territoire (les habitants, les

commerçants, les associations…) et d’autre part au public extérieur (les touristes, la C.C.C.A.,

les partenaires extérieurs).



1.3 Analyse de l’existant

Lorsque nous sommes arrivées, la Mairie du Broc ne possédait pas encore de site Internet. De

plus aucune étude concrète n’avait été faite sur la réalisation éventuelle de ce projet. Seul

M. Solbes avait déjà une idée précise de ce qu’il envisageait pour ce site. Nous avons donc du

réaliser l’intégralité du site, en confrontant nos idées avec celles de M. Solbes.

Pour compléter nos réflexions, nous avons visité d’autres sites de communes déjà existants.

La visite de ces sites nous a beaucoup servi, notamment les sites de Carros et de

Tourette-Levens qui nous ont bien aidé au cours de la réalisation du site. Cette analyse nous a

donc permis de relever les points positifs que pouvait comprendre le site d’une commune,

mais aussi les éléments que nous ne voulions pas voir figurer sur le site du Broc.



1.4 Moyens mis en oeuvre

1.4.1 Matériel fourni Au début de notre stage nous avons rencontrés quelques difficultés quant à l’accès au matériel

informatique. La première semaine aucun ordinateur n’était disponible mais dès la deuxième

semaine nous avons pu profiter d’un ordinateur de bureau et d’un ordinateur portable équipés

de Windows XP Professionnel et d’Internet Explorer version 6. Il restait encore un petit

handicap : nous n’avions pas de connexion Internet ce qui était relativement contraignant pour

rechercher certaines informations, mais à partir de la 6ème semaine nous avons pu bénéficier

de la connexion Internet ADSL. Nous pouvions également profiter d’un scanner ainsi que

d’un appareil photo numérique afin de prendre toutes les photos nécessaires pour illustrer le

site.

1.4.2 Logiciels utilisés Microsoft Office FrontPage 2003

Nous avons utilisé le logiciel Microsoft Office FrontPage 2003 pour la rédaction des lignes de

code. Il s’agit d’une application de création et de gestion de sites web dotée des outils et des

fonctionnalités permettant de créer des sites dynamiques et interactifs. FrontPage 2003 intègre

toutes les fonctions de création, de mise en page, de codage et de publication permettant

d’élaborer des sites attrayants et de générer du code de meilleure qualité.



Adobe Photoshop 7.0

Adobe Photoshop 7.0 est un logiciel de retouche d’images qui nous a donné la possibilité, à

l’aide de sa panoplie très complète d’outils de correction, de peinture et de dessin, d’effectuer

tous nos travaux d’images avec efficacité. Il intègre plusieurs effets préprogrammées afin

d’améliorer l’aspect d’une image. Photoshop nous a également permis d’optimiser nos photos

afin de les publier sur Internet.

EasyPHP 1.7

EasyPHP installe et configure automatiquement un environnement de travail complet

permettant de mettre en oeuvre toute la puissance et la souplesse qu'offre le langage

dynamique PHP. EasyPHP émule un serveur apache sur la machine locale afin de pouvoir

tester des pages écrites en PHP. Il intègre également une base de donnée MySQL. Ce logiciel

nous a permis de tester des bouts de programmes en langage PHP.



1.5 Organisation et planning

1.5.1 Maîtrise d’œuvre Nous étions 4 personnes à participer à la réalisation du site Internet : Mlle Aicha Mansour,

M. Benjamin Demaj, M. Loïc Solbes et moi-même. M. Demaj était également stagiaire à la

Mairie du Broc, il est étudiant en Maîtrise AES (Administration Économique et Sociale) à la

Faculté de Droit de Nice.

L’ensemble de la maîtrise d’œuvre a participé à la collecte d’informations. Ensuite M. Demaj

a été chargé de la rédaction des textes figurant sur la plupart des pages. Mlle Mansour et moi-

même avions la responsabilité de la création du design, la rédaction de certaines pages et la

programmation de l’ensemble du site. Enfin M. Solbes supervisait et validait notre travail ; il

participait également à la rédaction du contenu.

Nous pouvons également préciser que M. le Maire était le comité de pilotage de notre projet.

1.5.2 Planning Après une première journée d’analyse de la situation et du travail à fournir, nous avons eu

notre premier entretien avec M. le Maire et M. Solbes. Nous avons pu alors établir un

planning, qui ne fut pas vraiment définitif.

- Semaine 1 : réflexion sur les enjeux d’un site Internet et réalisation du cahier des

charges

- Semaines 2 et 3 : création de la structure et du design du site

- Semaines 4, 5 et 6 : programmation du contenu de chaque page

- Semaine 7, 8 et 9 : premières modifications et premières améliorations

- Semaines 10 et 11 : dernières modifications et finalisation du projet

- Vendredi 11 juin : livraison du site

Nous avions également prévu des rendez-vous avec M. le Maire après chaque étape

importante de la conception du site.



Au bout de quelques jours passés dans la Mairie et après avoir compris son fonctionnement,

nous nous sommes rendus compte que le planning ne pourrait pas être respecté. En effet,

notre stage se déroulait durant une période où les activités et les manifestations étaient

nombreuses, notamment dans le domaine de la culture. Par conséquent, M. Solbes n’était pas

toujours disponible et il lui était difficile de nous livrer le contenu pour les dates fixées. C’est

pourquoi nous avons établit un nouveau planning, plus libre : le site devait être fini pour la fin

du mois de mai, afin de pouvoir y apporter des modifications éventuelles.

Cette analyse de la situation nous a permis de rédiger le cahier des charges du projet à partir

duquel nous avons pu commencer la réalisation du site Internet.



22 -- CCOONNCCEEPPTTIIOONN DDUU SSIITTEE IINNTTEERRNNEETT



2.1 Les exigences de départ

Dés le début du stage, M. Solbes et M. le Maire avaient des idées prédéfinies de ce qui devait

apparaître dans le site, d’un point de vue esthétique mais surtout d’un point de vue pratique.

2.1.1 Aspect graphique

Le site devait être une vitrine de la commune pour les habitants et les visiteurs extérieurs.

Aucune charte graphique ne nous a été réellement imposée. La seule consigne était de faire

une présentation homogène, claire, simple et intuitive. Il nous a également été demandé de ne

pas utiliser d’animations.

2.1.2 Aspect fonctionnel

Les exigences fonctionnelles furent nombreuses. Tout d’abord, nous devions structurer

l’information de manière à ce que l’utilisateur y accède intuitivement, sans avoir à cliquer

plusieurs fois. Toutes les pages devaient être accessibles depuis la page d’accueil et le visiteur

devait pouvoir revenir sur celle-ci à partir de chaque page.

Nous devions favoriser le côté pratique du site. En effet chaque espace de la page devait être

utilisé à bon escient et avoir une utilité pour l’internaute. Une photo, au premier abord

décorative, devait être également associée à une action ; par exemple rediriger vers une autre

page, agrandir la photo, l’imprimer ou l’enregistrer.

De plus, un site informationnel se doit d’être régulièrement mis à jour, mais aucun employé

de la Mairie n’est vraiment qualifié pour cette tâche. C’est pourquoi, il était de notre

responsabilité de créer un site simple afin de faciliter les futures mises à jour. Diverses

solutions ont été envisagées pour la maintenance du site Internet, telles que la formation d’une

personne ou l’achat d’un module de mise à jour. A ce jour, la décision n’a pas encore été prise

par la Mairie.



2.2 Démarche de réalisation

Pour concevoir le site Internet nous avons suivi une méthode étudiée cette année en cours de

Commerce Électronique. Il suffit de recueillir et de formaliser les attentes et souhaits des

clients sur le rôle et les objectifs du site. La personne qui commande le site intervient tout au

long de la conception pour donner son avis. Les concepteurs et les clients partagent une vision

commune du site et établissent ensemble les axes structurants de l’aspect du projet.

2.2.1 Les différentes étapes

Tout d’abord un cahier des charges est élaboré en accord avec le client. Nous proposons une

arborescence comprenant les rubriques et les pages du site. Ensuite intervient la mise en

forme d’une maquette du design et du contenu. Une fois la maquette validée, il faut

développer toutes les pages et réaliser divers tests sur le fonctionnement du site. Enfin la mise

en ligne du site peut être effectuée.

2.2.2 Partage du travail

La démarche de réalisation choisie, Mlle Mansour et moi-même devions nous partager le

travail. Nous avons composé ensemble l’arborescence du site. Ensuite nous avons préparé

différents styles de design pour les proposer à M. Solbes qui en a retenu un. J’ai alors

retravaillé cette maquette avec les bonnes illustrations pendant que Mlle Mansour réalisait des

pages d’essai en intégrant du contenu. Quand la maquette fut validée et qu’une partie du

contenu nous fut livrée, nous nous sommes réparti le développement des différentes pages.

Enfin nous avons travaillé ensemble sur le référencement du site Internet.



2.3 Choix techniques

2.3.1 Langages de programmation

Nous avons utilisé des langages de programmation Internet que nous avons étudiés au cours

de notre 1ère année de DUT Informatique.

HTML (Hyper Text Markup Language) HTML est un "langage à balises" qui permet de concevoir des pages Web. Il permet de coder

une page à l’aide de commandes de mise en forme qui sont ensuite interprétées par un

navigateur. Les pages HTML sont aujourd’hui le système de base des sites Web. Les sites

peuvent inclure du texte, des images fixes ou animées, du son, de la vidéo et même des

programmes interactifs (à l'aide du Javascript).

Nous avons donc utilisé le langage HTML pour une partie importante de la programmation du

site : la mise en page du texte, le positionnement des images et aussi pour les liens hypertextes

vers d’autres pages.

JavaScript JavaScript est un langage de scripts qui, incorporé aux balises HTML, permet d’améliorer la

présentation et l’interactivité des pages Web. JavaScript est donc une extension du code

HTML. Ces scripts vont être gérés et exécutés par le navigateur sans devoir faire appel aux

ressources du serveur. Ces instructions seront donc traitées en direct par le navigateur.

Nous avons utilisé ce langage principalement pour favoriser l’interactivité de notre site

Internet.



CSS (Cascading Style Sheets) Le CSS a pour but de modifier le contenu d’une page Internet par une grande variété d’effets.

Avec les feuilles de style CSS, il est possible de contrôler parfaitement la mise en page des

différents éléments qui composent la page. Par exemple, nous pouvons définir la couleur

d’une police, sa taille, le positionnement d’un objet ou encore l’espacement entre les

paragraphes. C’est pourquoi nous avons choisi le CSS pour la mise en forme du texte : les

titres, les sous-titres, les liens et les paragraphes.

PHP Le PHP est un langage de scripting inclus dans les pages HTML et traité par le serveur. PHP

permet de construire dynamiquement des pages HTML contenant les résultats de calculs ou

de requête SQL adressées à un système de gestion de base de données. Il reprend une syntaxe

claire, très proche de celle du langage C. PHP est l’outil idéal pour tout site Internet de taille

moyenne n’ayant pas à supporter un grand nombre de requêtes simultanées, ce qui est le cas

de ce site. J’ai utilisé ce langage pour résoudre un problème rencontré au cours de la

conception du site.

2.3.2 Résolution

La résolution d’un écran représente le nombre de pixels affichés sur celui-ci et détermine par

conséquent la taille des éléments affichés. Plus elle est élevée, plus les éléments sont petits.

Les valeurs standard de résolution vont de 800x600 à 1600x1200, mais la plus utilisée de nos

jours est 1024x768. C’est pourquoi nous avons décidé d’optimiser notre site pour cette

résolution, en vérifiant qu’il fonctionnait également avec des résolutions inférieures ou

supérieures.



2.3.3 Navigation Pour que l’internaute puisse accéder à l’information rapidement, nous devions créer un mode

de navigation fluide et efficace. Nous avons opté pour des pages statiques et un menu

dynamique en JavaScript. Ce menu n’affiche que les grandes rubriques du site et lorsqu’on

clique sur l’une d’entre elles il laisse apparaître ses sous parties (figure n°1). Il permet donc à

l’utilisateur de trouver ce qu’il cherche sans difficulté et sans être surchargé d’informations.

Figure n°1

Nous avons également créé un plan du site accessible depuis chaque page, par un lien situé au

dessous du menu. Il présente l’architecture du site et comprend des liens hypertextes vers

toutes les parties. Enfin, il est possible de retourner sur la page d’accueil en cliquant à trois

endroits différents de la page : sur "Accueil" dans le menu et dans la bannière en cliquant sur

la photo du village ou sur son nom.



2.4 Création du design

Nous avons consacré 3 semaines à la création du design. Notre choix a été guidé par la

consultation de plusieurs sites. Nous avons également dû nous baser sur le style du menu

puisque c’est le premier élément que nous avons inclus dans la création du site.

2.4.1 Premières maquettes

Plusieurs maquettes ont été réalisées avant de trouver le style définitif du site. Au départ nous

avons travaillé sur une base très simple où figurait le menu, une photo du village, le blason du

Broc et un message de bienvenue pour la page d’accueil. Nous avons jugé cette présentation

trop banale. Nous avons alors essayé plusieurs styles différents afin de trouver un design

original et représentatif d’une commune. M. Solbes a ensuite choisi une maquette que nous

avons présentée à M. Tornatore (annexe n°2). Il nous alors suggéré quelques modifications :

le site devait être plus interactif, et l’espace devait être utilisé plus judicieusement. Par

exemple, les photos situées en haut de la page pouvaient avoir une utilité et ne pas

simplement être décoratives. Nous sommes donc retournées visiter quelques sites avant

d’améliorer notre travail et d’aboutir à la maquette finale.



2.4.2 Maquette finale Pour élaborer la maquette finale (annexe n°3), nous avons essayé d’allier au mieux l’aspect

pratique et l’aspect esthétique du site.

La bannière

En haut de chaque page, nous avons choisi de faire figurer une bannière présentant plusieurs

photos de la commune du Broc (figure n°2). Je me suis occupée de sa création. J’ai d’abord

trouvé une forme graphique originale s’unissant bien avec le menu : l’effet d’arc. Ensuite j’ai

cherché des photos représentatives de la commune et correspondant chacun à une partie

importante du site. En effet, nous avions décidé de créer une bannière dont l’utilité serait

incontestable pour l’internaute. C’est pourquoi quand on clique dessus, chaque photo redirige

sur une page du site. La photo de la fontaine renvoie sur une galerie photo de la commune,

celle du tabac sur la page des commerces, la photo du village retourne à la page d’accueil,

celle du moulin à huile redirige sur la page culture oléicole, la photo de l’inscription sur la

partie historique et patrimoine et celle de la zone industrielle sur la parc d’activités. Enfin, il

était indispensable que le nom et le blason de la commune figurent également sur cette

bannière, je les ai donc insérés en haut à gauche.

Figure n°2

J’ai réalisé cette bannière à l’aide du logiciel Adobe Photoshop 7.0.



Couleurs et formes Nous avons essayé d’utiliser des couleurs rappelant le village ainsi que la région. Les couleurs

du Broc sont le rouge et le jaune ; on les retrouve sur le blason en haut de chaque page. De

plus, nous avons gardé le rouge pour l’écriture du nom de la commune. Ensuite, nous avons

beaucoup utilisé le bleu, pour les menus et les titres, qui rappelle le ciel et la mer de la Côte

d’Azur. Nous avons, par contre, choisi un bleu relativement foncé car nous ne voulions pas

que le site soit trop voyant.

En ce qui concerne les formes du design, nous avons préféré des courbes et des coins

arrondis, notamment pour le menu, ainsi que des traits fins.

Arrière-plans Au départ nous avions envisagé de mettre un fond sobre et identique sur toutes les pages,

comme on peut le voir sur la première maquette. Mais par la suite nous avons pensé à garder

un fond blanc pour l’ensemble du site et à rajouter un arrière-plan plus personnalisé sur

quelques pages. C’était notamment le cas de certaines pages que j’ai réalisées. Pour concevoir

ces arrière-plans, j’ai choisi une photo significative de la partie à illustrer, puis je l’ai

retouchée avec Adobe Photoshop. Par exemple, j’ai atténué les contours de l’image et j’ai

réduit son opacité afin de pouvoir la faire apparaître derrière un texte sans en empêcher la

lecture. Cette solution laisse deviner un graphisme travaillé et soigné sans être trop chargé.

Pour l’arrière-plan de la page d’accueil (figure n°3), j’ai repris une photo du village que j’ai

découpée en suivant le contour des toits des maisons et en retraçant la forme d’une ellipse.

Ensuite j’ai estompé les bords de l’image et réduit son opacité.

Figure n°3



J’ai également illustré la page « Restauration et hébergement » avec des arrière-plans de ce

type (annexe n°4). J’ai pris une photo de chaque restaurant et du gîte de la commune que j’ai

travaillées et insérées derrière leur texte respectif. Ceci donne à la page un côté très esthétique

tout en restant simple.

2.4.3 Feuille de style Les feuilles de style permettent d’affiner la mise en page générale d’un site Internet sans

devoir intervenir dans les pages. Il suffit de modifier directement le fichier texte où se trouve

le code CSS. Le code présent dans les feuilles de style indique à l’ordinateur, qui affiche les

pages Web d’un site, quelle est la couleur d’un texte, par exemple.

Nous avons créé une feuille de style (annexe n°5) pour décrire la police, la taille et la couleur

des titres et des textes du site. Nous avons également défini différents styles de liens

hypertextes.

La création du design a été une étape très importante de la conception du site Internet du

Broc. La qualité graphique devait être travaillé car elle correspond à l’identité visuelle du site.



2.5 Contenu du site

2.5.1 Les rubriques

Les différentes parties du site ont été définies dés le début du stage mais elles ont été

modifiées tout au long de la conception. En effet, c’est en travaillant sur le projet que nous

nous somme rendus compte de ce qui pouvait être amélioré. Nous avons alors regroupé

certaines rubriques, rajouté des parties et supprimé des pages inutiles. Ces décisions ont bien

sûr été prises avec M. Solbes. Pour la première version du plan, nous avions 14 rubriques

comprenant chacune différentes parties (annexe n°6), aujourd’hui nous en avons 13 (annexe

n°7). Une description rapide des rubriques est également présente en annexe (annexe n°8).

2.5.2 Les textes

La majorité des textes ont été rédigés par M. Demaj et M. Solbes. J’en ai également rédigé

quelques uns, c’est pourquoi nous devions nous imposer un style d’écriture. Les textes ne

devaient pas être trop longs pour garder l’attention de l’internaute et les phrases devaient être

simples. Tous les textes ont été validés par M. Solbes avant d’être intégrés au site.

2.5.3 Les illustrations Les photos occupent une place très importante dans le site d’une commune qui se veut

informationnel. En effet, il est important de pouvoir illustrer ce qui est écrit. On peut alors

trouver des images sur presque la totalité des pages. Le logiciel Photoshop nous a permis de

les retoucher au besoin et de les mettre au bon format. Plus les dimensions d’une image sont

grandes, plus sa taille (en Ko) est importante et lourde pour un site Web. Il a donc fallu les

redimensionner avant de les inclure dans le site.



Ensuite nous avons écrit un script en langage JavaScript (Encadré n°1) afin d’ouvrir une

photo dans une nouvelle fenêtre avec sa taille originale lorsqu’on clique dessus. Il est alors

possible de l’enregistrer ou de l’imprimer.

<script> function CreateWindow(Image, Titre, Largeur, Hauteur) { var htmlpage=" "; var win_opt= "toolbar=0, location=0, directories=0, status=0, menubar=0,"; win_opt += "scrollbars=0, resizable=0, copyhistory=0,"; win_opt += "width=" + Largeur + ", height=" + Hauteur; // Définition de l'adresse exacte de l'image currentLoc = location.href.substring(0, location.href.lastIndexOf('/')+1); ImageUrl= currentLoc + Image; // Création de la fenêtre NewWindow= window.open("", "Titre", win_opt); // Génération du contenu de la page NewWindow.document.open(); htmlpage += "<html><head><title>" + Titre + "</title></head><body>"; htmlpage += "<center><font size=+2 face='Monotype Corsiva'>" + Titre + "</font><hr>"; htmlpage += "<img hspace=0 vspace=0 align=center src="+ImageUrl+ ">"; htmlpage += "<hr><form>" htmlpage += "</form>"; htmlpage += "</center>"; htmlpage += "</body></html>"; NewWindow.document.write(htmlpage); } </script> Encadré n°1 Nous avons également réalisé des galeries photos pour les parties où beaucoup de photos

étaient disponibles : le Village, le Patrimoine, le Service jeunesse, les Restaurants et le

Jumelage. Un lien hypertexte « Photos » est présent sur ces pages et ouvre la galerie photos

dans une nouvelle fenêtre.



2.5.4 Les documents PDF Un document PDF est un document texte non modifiable se présentant sous forme de

vignettes. Beaucoup de documents présents sur Internet sont au format PDF, notamment les

documents officiels. Pour les lire il faut installer le logiciel gratuit Acrobat Reader. Dans

certaines pages nous avons utilisé des fichiers de ce type, par exemple pour les

téléchargements de formulaires administratifs. Nous avons mis au début de ces pages, un petit

texte expliquant la nécessité du logiciel Acrobat Reader accompagné d’un lien pour le

télécharger (Encadré n°2).

Les formulaires ci-dessous sont au format PDF. Pour les consulter vous devez disposer du logiciel Acrobat Reader.

Pour le télécharger gratuitement cliquez sur l'icone.

Encadré n°2

De plus, pour la page des conseils municipaux, je disposais des comptes-rendus des derniers

conseils au format Word. M. Solbes ne voulait pas que les utilisateurs puissent les modifier.

J’ai alors trouvé le moyen de convertir un document Word en PDF, à l’aide de deux logiciels

(l’un pour installer une imprimante virtuelle et l’autre pour convertir le fichier).



2.6 Contrainte technique Au début du mois de mai, M. Solbes a rencontré deux personnes pour la présentation d’un

module de mise à jour et j’ai pu participer au rendez-vous. Au cours de la discussion, nous en

sommes venus à parler de l’utilité du JavaScript. J’ai alors appris qu’il était possible de

désactiver le JavaScript sur les navigateurs, ce qui était plutôt contraignant pour notre menu

qui était entièrement programmé dans ce langage. Si un internaute désactive cette option sur

son navigateur, il lui est alors impossible de visionner le menu du site (figure n°4). J’ai

d’abord pensé à changer le menu, mais alors il fallait également revoir le design puisque créé

autour de celui-ci, opération difficile par rapport au temps qu’il nous restait pour terminer.

Figure n°4



J’ai alors cherché une solution pour qu’un autre menu apparaisse par défaut du menu en

JavaScript si ce dernier ne s’affichait pas. J’ai programmé un menu entièrement en HTML

reprenant les bases de celui en JavaScript. Sous l’emplacement du menu sur la page d’accueil

j’ai écrit la phrase suivante « Si le menu ne s’affiche pas cliquez ici », quand l’utilisateur

clique, le menu en HTML apparaît et reste présent sur toutes les autres pages du site (annexe

n°9). Ce menu est certainement moins esthétique mais il s’affiche dans tous les cas,

l’inconvénient c’est qu’il n’est pas visible en entier à l’écran. De plus, il sera utilisé seulement

par un faible pourcentage des internautes qui désactive le JavaScript.

Pour cette solution il existait encore deux possibilités. La première était de faire deux copies

du site Internet : l’une intégrant le menu en JavaScript, l’autre celui en HTML. Mais le site

occuperait alors deux fois plus de place lors de la mise en ligne chez un hébergeur. J’ai donc

opté pour un test en PHP (Encadré n°3). Si le visiteur clique sur le lien une variable est créée.

Ensuite, dans toutes les pages, avant d’inclure le menu on fait une vérification : si la variable

existe on affiche le menu en JavaScript, sinon on affiche celui en HTML.

<? if(!isset($_SESSION['menu'])) { echo '<SCRIPT LANGUAGE="JavaScript" SRC="../menu/menu.js"></SCRIPT>'; } else { include("../menu/menu.html"); } ?> Encadré n°3

Cette solution nous a permis de garder notre menu en JavaScript sans empêcher certains

internautes de naviguer sur le site. De plus nous avons pu éviter d’avoir le site en double.



33 -- FFIINNAALLIISS AATTIIOONN DDUU PPRROOJJEETT EETT RREESSUULLTTAATTSS



3.1 Navigateurs Quand on crée un site Internet il faut vérifier qu’il est compatible avec la plupart des outils

permettant de le consulter, plus particulièrement les navigateurs. Le site du Broc a été

optimisé pour Internet Explorer, mais il est important qu’il puisse fonctionner avec d’autres

navigateurs très utilisés dans le monde, comme Netscape ou encore Mozilla pour les

utilisateurs du système d’exploitation Unix. Il était d’autant plus nécessaire de faire cette

vérification en sachant que quelques versions de Netscape ne prennent pas en compte certains

langages de programmation reconnus par Internet Explorer.

Nous avons alors installé les navigateurs Netscape 7.0 et Mozilla 1.6 sur un ordinateur et nous

avons testé la compatibilité du site. Les inconvénients rencontrés étaient les mêmes pour les 2

navigateurs : le menu s’affichait mais l’effet réalisé à l’aide du JavaScript ne fonctionnait plus

(figure n°5). C'est-à-dire que toutes les sous parties du menu étaient affichées en permanence

alors qu’avec le menu en JavaScript seules les rubriques principales étaient visibles. Le

résultat est quasiment le même que lorsque le menu en HTML est affiché, cela réduit

légèrement la qualité graphique du site mais n’empêche pas une bonne navigation.

Figure n°5



3.2 Référencement

Le référencement d’un site Internet consiste à inscrire les pages du site dans les principaux

outils de recherche du Web (annuaires et moteurs). C’est une étape primordiale lorsqu’on

souhaite attirer des visiteurs ciblés. Le but premier d’un bon référencement est de positionner

le site dans les premières pages des outils de recherche, en effet une grande majorité des

internautes ne consultent pas les pages suivantes. Une fois que le site du Broc sera mis en

ligne il faudra se rendre sur les moteurs de recherche et l’inscrire en soumettant son URL,

principalement sur les plus utilisées tels que Google ou Yahoo.

Cependant une autre étape du référencement doit être réalisée pendant la conception du site

Internet, il s’agit de définir les balises <meta> dans le code HTML. Elles permettent

d’indiquer aux moteurs de recherche un certain nombre d’informations sur le contenu d’une

page et elles configurent la description du site au travers de mots-clés. Les balises <meta>

propose plusieurs options plus ou moins utiles, il nous a paru nécessaire d’utiliser 3 d’entre-

elles : description, keywords et revisit. La balise <META NAME="description"> permet

d'indiquer au moteur de recherche une phrase résumant le contenu de la page. La balise

<META NAME="keywords"> sert à indiquer des mots clés supplémentaires aux moteurs de

recherche ; ces mots clés peuvent améliorer le classement de la page ou indiquer certains mots

importants que ne contiendrait pas le document. La balise <META NAME="revisit"> défini

tous les combien de jours le moteur de recherche doit revenir visiter le site. Nous avons défini

des mots-clés qui seraient identiques sur toutes les pages, il s’agit de ceux de la page d’accueil

(encadré n°4), ensuite nous en avons rajouté des spécifiques à chaque page.

<META NAME="description" CONTENT="Site officiel de la commune du Broc">

<META NAME="keywords" CONTENT="Le Broc, village, Carros, Gattières, communauté des communes,

arrière-pays niçois, Alpes-Maritimes, mairie, site officiel, photos, accueil">

<META NAME="revisit" CONTENT="7">

Encadré n°4



3.3 Hébergement L’hébergement est une phase indispensable de la conception d’un site Internet puisqu’il s’agit

de sa publication sur le réseau mondial. Il faut procéder en 2 étapes : tout d’abord il faut

trouver un nom de domaine disponible et ensuite trouver un hébergeur adéquat à ce que l’on

recherche. Dés le début du stage, M. Solbes nous a demandé de trouver le nom de domaine.

Au cours de notre recherche, nous nous sommes aperçu que M. Tornatore en avait déjà

réservé un : mairie-lebroc.fr . En ce qui concerne la recherche d’un hébergeur, c’est

M. Solbes et M. le Maire qui s’en chargent, à ce jour ils n’ont pas encore pris leur

décision. La seule exigence est que l’hébergeur dispose d’un serveur PHP pour pouvoir

exécuter le script mis au point pour résoudre le problème d’affichage du menu en JavaScript.

Une fois que le site sera inscrit chez un hébergeur, il sera mis en ligne et sera donc disponible

à tous les internautes.



3.4 Résultats obtenus

3.4.1 Un site opérationnel Aujourd’hui, nous pouvons dire que la commune du Broc possède un site Internet complet et

opérationnel, répondant aux attentes de départ. Le site comporte toutes les informations qu’un

visiteur peut rechercher sur Le Broc. Il est informationnel sur les valeurs et les

caractéristiques de la commune : la municipalité, le patrimoine, la culture, la vie économique,

la vie associative, l’éducation, les loisirs et les actualités. Mais c’est également un site de

service pour tout ce qui concerne l’administratif.

Cependant, il reste encore 4 pages où le contenu n’a pas pu être défini car nous sommes en

attentes de documents extérieurs. Mais nous avons décidé en accord avec M. Solbes de les

laisser présentes sur le site en signalant qu’elles sont en cours de construction (figure n°6).

Figure n°6

Le site est désormais prêt à être mis en ligne, la Mairie n’a plus qu’à trouver un hébergeur

pour pouvoir disposer de son site Internet.



3.4.2 Planning respecté Respecter un planning nous paraissait difficile, au début du stage, en raison des disponibilités

des personnes avec lesquelles nous collaborions. C’est pourquoi avec M. Solbes nous avons

abandonné le premier planning et nous nous somme fixé simplement une période de fin de

projet. Nous pouvons donc dire que le planning a été respecté, puisque le site était terminé à

la fin du mois de Mai et que les deux dernières semaines de stage ont été consacrées aux

modifications nécessaires et à la finalisation du projet.

3.4.3 Présentation du projet au Conseil municipal

Le Lundi 7 juin à 19h, nous nous sommes rendues au Conseil Municipal de la Mairie du Broc

afin de présenter notre projet à M. le Maire et aux conseillers municipaux. La plupart d’entre

eux n’ont pas de grandes connaissances du monde Internet, c’est pourquoi nous leur avons

expliqué l’intérêt d’un site Internet. Nous leur avons ensuite présenté le site du Broc dans son

intégralité en faisant aussi une démonstration du téléchargement de certains documents. Ils

ont beaucoup apprécié notre intervention et ont trouvé que le site que nous avions réalisé était

un très bon produit, autant sur le plan esthétique que sur le plan pratique.



3.5 Extension possible du projet

Le site que nous avons créé pour la Mairie du Broc est avant tout un site informationnel. La

prochaine étape serait de concevoir une partie qui faciliterait la gestion interne de la Mairie.

Elle serait réservée aux principaux services de la commune : l’administration, la voirie,

l’enseignement et les associations. Cette partie permettrait aux consultants de communiquer

entre eux plus facilement, grâce à un accès privé (identifiant et mot de passe personnels). Par

exemple, si un employé de la Voirie doit faire parvenir à la Mairie son calendrier de la

semaine, il pourrait le faire directement par le biais du site Internet, et toutes les personnes

ayant un droit sur cet accès privé pourraient le consulter. Nous avons pensé à cette éventualité

dès le début de notre stage, mais en raison du peu de temps encore disponible il était

impossible de la réaliser durant cette période. C’est une extension très intéressante qui sera

envisagée par M. Tornatore à qui nous avons exposé notre idée.



Conclusion Le projet qui m’a été confié au sein de la Mairie du Broc avait pour finalité la conception du

site Internet de la commune du Broc. Je devais réaliser, en collaboration avec Mlle Mansour,

un site informationnel d’une part, mais aussi un site de services pour les habitants. Pour cela

nous avons choisi une méthode consistant à de fréquentes concertations entre la personne qui

commande le site et les développeurs. Nous avons également dû faire preuve d’un esprit

d’équipe pendant ces deux mois et demi. Ce projet m’a permis de travailler sur toutes les

étapes nécessaires à la réalisation d’un site Internet, à savoir l’élaboration d’un cahier des

charges, la création du design, le développement et la finalisation du projet. Le site est

désormais prêt à être mis en ligne.

Les seules difficultés que nous avons rencontrées pendant cette période de stage sont des

problèmes d’ordre matériel au début et des petites contraintes de temps liées aux

disponibilités de notre tuteur, M. Solbes.

Ce stage m’a permis tout d’abord de mettre en application les connaissances acquises au cours

de ma formation à l’IUT Informatique de Nice. J’ai également pu évoluer dans un monde

professionnel que je ne connaissais pas, ce qui s’est avéré être une expérience très

enrichissante.

La dernière semaine, nous avons eu l’opportunité de présenter notre travail au Conseil

Municipal du Broc qui a beaucoup apprécié notre produit. Aujourd’hui la commune du Broc

dispose d’un outil de communication opérationnel et performant, répondant aux objectifs de

départ. La Mairie pourra désormais envisager la création d’un accès privé sur ce site afin

d’améliorer la gestion interne de la commune.



Glossaire

Comité de pilotage :

Le comité de pilotage valide les propositions faites à la fin de chaque phase et permet de

passer à l’étape suivante.

Hébergeur :

Un hébergeur est une entreprise proposant ses services afin d’abriter sur ses propres serveurs

les sites Internet de ses clients. Elle assure le support des langages qui peuvent être utilisés

dans les sites qu’elle héberge. Le choix d’un langage influe souvent sur le choix de

l’hébergeur.

Liens hypertextes :

Les liens hypertextes sont des éléments d’une page HTML qui emmènent dans un autre

endroit lorsqu’on clique dessus. C’est ce qui permet de lier des pages Web entre elles. Les

liens hypertextes permettent de naviguer vers un autre endroit du document ou encore vers un

autre fichier.

Maîtrise d’œuvre :

La maîtrise d’œuvre est responsable de la concrétisation de l’idée en outil informatique. Elle

intervient à la fin de l’expression du besoin du client. Elle est responsable des bons choix

techniques, de la bonne réalisation du projet et de l’adéquation du résultat avec les besoins du

client.

Moteur de recherche :

C’est une gigantesque base de données sur le Web. Il visite périodiquement une partie des

fichiers statiques accessibles sur Internet et met à jour la base de données. L’internaute peut

formuler sa recherche à l'aide de mots clés contenus dans les fichiers. Le résultat fournit par le

moteur de recherche consiste en une liste de pages Web contenant le ou les mots saisis,

classés selon un ordre de pertinence qui peut prendre en compte la place des mots et/ou leur

fréquence.

Google, Altavista et Voila sont des exemples de moteurs de recherche.



Navigateur :

C’est un logiciel utilisé pour naviguer sur les réseaux informatiques et dans leurs bases de

données, en particulier sur Internet. Internet Explorer est le navigateur le plus utilisé dans le

monde, suivi de Netscape.

Nom de domaine :

Un nom de domaine est une adresse qui permet de retrouver facilement un site Internet sans

devoir apprendre par coeur des séries de chiffres difficiles à mémoriser. Chaque nom de

domaine est associé à une adresse de protocole Internet, plus couramment appelé adresse IP.

PDF : « Portable format document »

Il s’agit d’un format de document créé par l’éditeur Adobe. Il s’est imposé dans le monde

entier comme le standard pour la distribution sécurisée de documents et de formulaires

électroniques. Le format PDF est un format de fichier universel qui préserve les polices, les

images, les objets graphiques et la mise en forme de tout document source, quelles que soient

l'application et la plate-forme utilisées pour le créer.

Serveur :

Un serveur est un logiciel permettant d’interpréter un langage de programmation web, afin de

l’afficher correctement dans le navigateur Internet.

URL : « Uniform Resource Locator »

L’URL correspond à l’adresse d’une ressource Internet (page Web ou fichier quelconque) et

le chemin à suivre pour s’y rendre. L’adresse est lisible dans la boîte de dialogue du

navigateur.



Bibliographie Sites Internet - Mairie de Carros, site officiel de la ville de Carros, (consulté régulièrement), disponible sur

http://www.ville-carros.fr

- Mairie de Tourrette-Levens, site officiel de la ville de Tourrette-Levens, (consulté

régulièrement), disponible sur http://www.tourrette-levens.org

- Mairie de Castagniers, site officiel de la commune de Castagniers, (consulté plusieurs fois),

disponible sur http://www.mairie-de-castagniers.com

- Mairie de Vence, site officiel de la ville de Vence, (consulté plusieurs fois), disponible sur

http://www.ville-vence.fr

- Mairie de St Laurent du Var, site officiel de la ville de St Laurent du Var, (consulté le 30

mars 2004), disponible sur http://ville-saintlaurentduvar.fr

- Mairie de Cabris, site officiel de la ville de Cabris, (consulté le 15 avril 2004), disponible

sur http://mairie.cabris.free.fr

- Mairie de Nice, site officiel de la ville de Nice, (consulté le 15 avril 2004), disponible sur

http://www.nice-coteazur.org

- Service public, site des services publics, (consulté régulièrement), disponible sur

http://www.service-public.fr

- Préfecture des Alpes-Maritimes, site de la préfecture des Alpes-Maritimes, (consulté

plusieurs fois), disponible sur http://www.alpes-maritimes.pref.gouv.fr

- Guide FrontPage, site du logiciel FrontPage, (consulté le 02 Avril 2004), disponible sur

http://www.microsoft.com/france/office/frontpage



CONCEPTION DU SITE INTERNET

DE LA COMMUNE DU BROC

Mairie du Broc

- ANNEXES

I

TABLE DES ANNEXES

Annexe n°1 : Architecture hiérarchique de la Mairie .......................................... II Annexe n°2 : Première maquette du design du site ............................................ III Annexe n°3 : Maquette finale du design du site (page d’accueil) ...................... IV Annexe n°4 : Page « Restauration et hébergement » ........................................... V Annexe n°5 : Feuille de style en CSS .................................................................VI Annexe n°6 : Première arborescence du contenu du site .................................. VII Annexe n°7 : Arborescence finale du contenu du site ..................................... VIII Annexe n°8 : Description des rubriques .............................................................. IX Annexe n°9 : Affichage du menu en HTML ....................................................... XI

II

Annexe n°1 : Architecture hiérarchique de la Mairie

III

Annexe n°2 : Première maquette du design du site

IV

Annexe n°3 : Maquette finale du design du site (page d’accueil)

V

Annexe n°4 : Page « Restauration et hébergement »

VI

Annexe n°5 : Feuille de style en CSS

Fichier common.css /* titre de la page */ .titre_1 { font-family: Monotype Corsiva; font-size: 24pt; color: #7788AA; font-weight: bold; } /* sous-titres */ .titre_2 { font-family: Monotype Corsiva; font-size: 18pt; color: #7788AA; font-weight: bold; } .titre_3 { font-family: Monotype Corsiva; font-size: 18pt; color: #7788AA; } .titre_galerie { font-family: Monotype Corsiva; font-size: 36pt; } .titre_4 { font-family: Monotype Corsiva; font-size: 20pt; } /* textes */ .texte_1 { font-family: Comic Sans MS; font-size: 10pt; } .texte_2 { font-family: Times New Roman; font-size: 12pt; } .texte_intro { font-family: Comic Sans MS; font-size: 12pt; } .texte_menu { font-family: Verdana; font-size: 10pt; color: #FFFFFF; } /* liens */ A.liens:link { text-decoration: underline; font-family: Times New Roman; color: #0000FF; font-size: 12pt} A.liens:visited { text-decoration: underline; font-family : Times New Roman ; color: #800080; font-size : 12pt; } A.liens:hover { text-decoration: underline; font-family : Times New Roman ; color: #FEA211; font-size: 12pt} A.liens2:link { text-decoration: none; font-family: Times New Roman; color: #0000FF; font-size: 12pt} A.liens2:visited { text-decoration: none; font-family : Times New Roman ; color: #800080; font-size : 12pt; } A.liens2:hover { text-decoration: underline; font-family : Times New Roman ; color: #FEA211; font-size: 12pt} A.liens-photos:link { text-decoration: none; font-family: Times New Roman; color: #0000FF; font-size: 14pt} A.liens-photos:visited { text-decoration: none; font-family : Times New Roman ; color: #800080; font-size : 14pt; } A.liens-photos:hover { text-decoration: underline; font-family : Times New Roman ; color: #3232AF; font-size: 14pt} A.liens-retour:link { text-decoration: none; font-family: Times New Roman; color: #000000; font-size: 10pt} A.liens-retour:visited { text-decoration: none; font-family : Times New Roman ; color: #000000; font-size : 10pt; } A.liens-menu:link { text-decoration: none; font-family: Times New Roman; color: #FFFFFF; font-size: 10pt} A.liens-menu:visited { text-decoration: none; font-family : Times New Roman ; color: #FFFFFF; font-size : 10pt; } A.liens-menu:hover { text-decoration: none; font-family : Times New Roman ; color: #CC0000; font-size: 10pt}

VII

Annexe n°6 : Première arborescence du contenu du site

VIII

Annexe n°7 : Arborescence finale du contenu du site

IX

Annexe n°8 : Description des rubriques

La rubrique Accueil permet à un visiteur de situer la commune du Broc. Elle comprend la

page d’accueil, avec une description du village, sur laquelle ce dernier arrive quand il entre

sur le site. Mais aussi des plans de la commune et le mot du maire.

La rubrique Municipalité s’adresse plus précisément aux habitants puisqu’elle parle du

Conseil Municipal et des projets communaux en cours. Elle leur permet également d’effectuer

leurs démarches administratives plus facilement, notamment par le biais de téléchargements

de formulaires de toutes sortes.

La rubrique Patrimoine est une des parties qui met le plus en valeur la commune. Elle traite

des nombreux vestiges du passé (les époques antique et médiévale, les sites religieux) ainsi

que de la tradition de l’olive.

La rubrique Culture expose toutes les activités culturelles présentes sur la commune. En

effet, Le Broc est riche en culture, par exemple des expositions d’artistes variés sont

organisées très souvent à la salle des expositions.

La rubrique Actualités permet aux habitants et aussi aux visiteurs extérieurs de se tenir au

courant de ce qui se passe dans leur commune : les manifestations organisées mais également

les naissances, mariages et décès récents.

La rubrique Jeunesse décrit tout ce qui est mis en place pour le bien être des enfants. Tout

d’abord pour leur éducation mais également pour leur plaisir avec un service jeunesse qui

s’occupe très bien de ces jeunes personnes.

La rubrique Sports et Loisirs décrit simplement les activités qu’il est possible d’effectuer au

Broc : le tennis, le squash, ou encore la marche à pieds avec un plan des parcours pédestres de

la commune.

X

La rubrique Associations comprend une liste de toutes les associations du Broc, au nombre

de 12, accompagné d’une rapide description de chacune d’entre elles. La vie associative est

très présente dans la commune.

La rubrique Vie économique explique une ressource importante de la commune du Broc,

d’une part sa propriété sur une partie de la zone industrielle Carros-Le Broc mais aussi son

moulin à huile.

La rubrique Vie pratique expose tout ce qu’il y a connaître pour vivre au Broc, à savoir les

moyens de transports pour s’y rendre, les restaurants pour y manger, les lieux d’hébergement

pour y dormir et les commerces pour se faire plaisir. Cette partie compte également une page

sur laquelle se trouvent tous les numéros utiles sur la commune et ses alentours.

La rubrique Les coteaux d’azur explique tout d’abord ce qu’est la C.C.C.A (Communauté

des Commune des Coteaux d’Azur) et présente ensuite le village jumelé avec Le Broc :

Montone (en Italie).

La rubrique Bulletin municipal permet simplement de télécharger L’écho des platanes qui

est le bulletin municipal de la commune, édité tous les 3 mois.

La rubrique Contact indique l’adresse e-mail de la Mairie afin de pouvoir correspondre avec

celle-ci ainsi qu’une liste de liens qui peuvent être utiles aux visiteurs du site.

XI

Annexe n°9 : Affichage du menu en HTML

Quand le JavaScript n’est pas activé le menu ne s’affiche pas, il suffit alors de cliquer sur le

bouton cliquez ici.

Après avoir cliquer sur le bouton, un autre menu apparaît. Il est certes très long et moins esthétique mais il ne présente aucun problème d’affichage.

CONCEPTION DU SITE INTERNET DE LA COMMUNE DU BROCmaevagiachino.free.fr/images/Rapport_Info.pdf ·...

Documents

Transcript of CONCEPTION DU SITE INTERNET DE LA COMMUNE DU BROCmaevagiachino.free.fr/images/Rapport_Info.pdf ·...