Vous êtes sur la page 1sur 40

REPUBLIQUE ALGERIENNE DEMOCRATIQUE ET POPULAIRE

MINISTERE DE L’ENSEIGNEMENT SUPERIEUR ET DE LA RECHERCHE SCIENTIFIQUE


FACULTE DES SCIENCES ET DES SCIENCES DE L’INGENIORAT
DEPARTEMENT D’INFORMATIQUE

LICENCE PROFESSIONNELLE
Activités et techniques de communication
Option : « Animation et gestion des sites Web »

Mémoire de fin de cycle

Thème : Réalisation d’un site vitrine pour


l’Entreprise IFRI

Présenté par : Organisme d’accueil :


HASNIOU Abdselam SARL Vigisud

Promoteur :
M. BELHOUL Yacine

2006 - 2007
Remerciement
Je remercie très sincèrement :

• Mon promoteur Monsieur Y.BELHOUL qui m’a accompagné tout au long de


cette expérience professionnelle avec beaucoup de patience et de pédagogie.

• Au responsable des opérations de Vigisud Monsieur F.CHERFA, de m’avoir


accepté au sein de cette société pendant la durée de mon stage.

• Merci également à Mlle S.IMLOUL et Mr H.SLIMANI responsables de la


formation pour leur suivi continu durant l’année ainsi que pour leurs efforts
qu’ils fournissent pour nous assurer le bon déroulement de notre formation à
l’université comme à l’entreprise.

• Aux membres de jury d’avoir accepté de juger ce modeste travail.

• A tous ceux qui ont contribué à la réalisation de ce projet de près ou de loin.

J’ai pour moi-même, été enchanté de travailler avec l’équipe de Vigisud et de


réaliser un de leurs projets. J’espère avoir donné, au sein de cette entreprise,
satisfaction dans le travail qui m’a été confié.

Pour terminer, un grand merci à mes parents et à toute ma famille pour tous les
encouragements et les espoirs qu’ils ont placés en moi.
Sommaire
Chapitre I
Analyse du projet
I-1- L’entreprise d’accueil ........................................................................................ 3

I-1-1- Présentation ............................................................................................... 3

I-1-2- Activités ...................................................................................................... 3

I-1-3- Partenaires ................................................................................................. 3

I-2- Travail demandé ............................................................................................... 4

I-3- L’Entreprise IFRI ............................................................................................... 4

I-4- Objectifs du site ............................................................................................... 5

I-5- Cibles du site .................................................................................................... 6

I-6- Adéquation avec les cibles................................................................................ 6

I-7- Diagramme de GANTT ..................................................................................... 6

I-8- Analyse de la concurrence ................................................................................ 8

Chapitre II
Conception du projet
II-1- Définition des rubriques ................................................................................. 12

II-2- Contenu du site .............................................................................................. 12

II-3- Arborescence du site ..................................................................................... 13

II-4- Spécifications techniques............................................................................... 15

II-5- Gabarit de page ............................................................................................. 15

II-6- Choix des couleurs ........................................................................................ 17

II-7- Choix de la police........................................................................................... 17


II-8- Modélisation UML .......................................................................................... 17

II-8-1- Diagramme de cas d’utilisation ................................................................ 17

II-8-2- Diagramme de classes ............................................................................ 19

II-8-3- Diagramme de séquence ........................................................................ 20

Chapitre III
Réalisation du projet
III-1- Langages et technologies utilisés ................................................................. 23

III-2- Outils utilisés ................................................................................................. 24

III- 3- Espace client................................................................................................ 25

III- 3-1- Page d’introduction Flash ...................................................................... 26

III- 3-2- La page d’accueil................................................................................... 26

III- 3-3- La page produits .................................................................................... 27

III- 3-4- La page Eau minérale naturelle gazéifiée ............................................. 28

III-4- Espace d’administration ................................................................................ 29

III-4-1- La page de saisi du mot de passe .......................................................... 29

III-4-2- La page Administration ........................................................................... 30

III-4-3- Sécurité du mot de passe ....................................................................... 31

III-5- Tests et contrôles.......................................................................................... 31

III-6- Hébergement ................................................................................................ 31

III-7- Référencement ............................................................................................. 32


Introduction

Dans le cadre de la formation en licence professionnelle « Activités et


techniques de communication », option « Animation et gestion des sites Web », nous
avons effectué un stage d’apprentissage au sein de l’entreprise VIGISUD1 située à
Béjaïa entre le 16/06/2007 et le 30/08/2007.

Mon travail, consiste à réaliser un site Web vitrine pour l’Entreprise d’eau
minérale et de boissons IFRI. Ce site permettra donc, de présenter l’entreprise et
ses produits, comme il permettra aussi aux internautes de s’abonner au site pour
recevoir des Newsletters et des nouveautés de l’entreprise.

Le site Internet est découpé en deux parties principales : un espace public


dont tous les internautes peuvent accéder et un espace d’administration du site dont
l'accès est réservé à l’administrateur grâce à un mot de passe.

Ce présent mémoire s’articule autour de trois principaux chapitres ; le premier


contient une analyse du projet, où il y a une étude préalable des besoins de
l’entreprise, le second comporte une vue conceptuelle du système. Enfin, le troisième
et dernier chapitre est consacré à la réalisation.

1
Site : www.vigisud.com
Chapitre I

Analyse du projet
Chapitre I Analyse du projet

La réussite d’un projet Web repose sur une bonne formulation et la


compréhension des besoins du client.
Dans ce chapitre Nous définissons les entreprises IFRI et Vigisud, le travail
demandé, les objectifs et les cibles ainsi que les besoins du client.

I-1- L’entreprise d’accueil (VIGISUD)

I-1-1- Présentation

VIGISUD est une jeune entreprise créée en 2006, d’un capital de


20 000 000.00 DA. Elle est spécialisée dans le développement des solutions WEB, la
réalisation de CD interactifs, de vidéos de surveillance IP et installation réseaux.

VIGISUD dispose de ses propres infrastructures, plateforme d’hébergement


de vidéosurveillance, de sites web et de téléphonie. Ceci lui permet de réaliser des
économies d’échelles importantes pour ses partenaires agréés et ses clients finaux.

Son réseau de distribution de proximité, installé dans chaque pays lui permet
d’assurer une qualité de service à taille humaine et irréprochable.

I-1-2- Activités
- Installation et configuration des caméras de surveillance Par Internet.
- Conception et hébergement de sites Web.
- Infogérance (plate forme de travail collaboratif).
- Télécommunication (Téléphonie VoiP).

I-1-3- Partenaires
VIGISUD possède plusieurs partenaires dans le monde, qui sont :

VIGIWARE1 (France) : spécialisé dans la virtualisation.


2
IPMONDE COMMUNICATION (France) : spécialisé dans l’hébergement et la
Télécommunication.

1
Site : www.vigiware.com
2
Site : www.ipmonde.net

3
Chapitre I Analyse du projet

VIDENTYS3 (France) : spécialisé dans l’intégration du matériel Informatique.

Axis Communications4 (France) : spécialisé dans la vidéo Surveillance « matériels ».

I-2- Travail demandé

Il nous a été demandé durant la période du stage à l’Entreprise de réaliser un site


Web publicitaire pour l’entreprise d’eau minérale et de boissons IFRI© située à
Béjaïa, qui est l’un des projets de VIGISUD.
Ce site présente l’entreprise et ses produits comme il permet aux internautes
de s’abonner au service de Newsletters pour recevoir toutes nouveautés de
l’entreprise.

Le site doit contenir deux espaces principaux :

• Espace public : espace informatif de présentation de l’entreprise et de ses


produits ; il doit permettre, aussi, aux internautes de s’abonner au service des
newsletters, proposer une question ou un commentaire dans la page FAQ5 et
envoyer un message dans le site.
• Espace d’administration : grâce à cet espace, l’administrateur pourra gérer la
FAQ, lire les messages reçus et envoyer une Newsletters aux abonnés du
site.

I-3- L’Entreprise IFRI


Présentation

L’Entreprise IFRI est située à Ighzer Amokrane, chef lieu de commune et de


daïra (sous-préfecture) d’Ifri-Ouzellaguen, dans la wilaya de Béjaïa, dans le nord de
l’Algérie. Elle est implantée à l’entrée est de la vallée de la Soummam, en contrebas
du massif montagneux de Djurdjura qui constitue son réservoir naturel d’eau.

3
Site : www.videntys.com
4
Site : www.axis.com
5
FAQ : Foire Aux Questions

4
Chapitre I Analyse du projet

Pionnier dans l’utilisation du PET (polyéthylène téréphtalate) au niveau


national, IFRI inaugure son premier atelier d’embouteillage le 20 juillet 1996.
A cette date, plus de 20 millions de bouteilles sont commercialisées sur l’ensemble
du territoire national. Ce chiffre atteint 48 millions d’unités en 1999 puis 252 millions
de litres en 2004 avant de franchir le cap des 500 millions de litres (emballage PET
et verre) en 2005.

Les Etablissements Ibrahim & Fils (société IFRI) sont producteurs de


limonades diverses et de sirops depuis 1986.

I-4- Objectifs du site


Le site doit répondre aux objectifs de communication suivants :

• Objectif cognitif (faire connaître)

Il est fixé afin d’améliorer les connaissances du consommateur sur l’entreprise


et ses produit. Par exemple faire connaitre l’existence d’un produit « IFRI produit de
l’eau gazéifiée », ou fournir des caractéristiques du produit, et notamment celles qui
motivent le consommateur et qui permettent, en outre, de se différencier de la
concurrence. Par exemple « L’eau IFRI est riche en calcium ».

• Objectif affectif (faire aimer)

Il est fixé afin de construire une image de marque c'est-à-dire l’ensemble des
traits qui constituent la personnalité du produit tel qu’elle est perçue par un individu.
On arrivera alors à palper les sentiments ressentis vis-à-vis du produit. Par exemple :
« IFRI, une eau minérale plus pure … », elle est, donc, le symbole de l’appartenance
à un milieu social favorisé.

• Objectif conatif (faire agir)

Il est fixé afin de faire agir un consommateur, l’inciter à se rendre dans un


magasin, à essayer le produit, à demander une brochure d’information, etc. Cet
objectif a pour but de modifier le comportement des consommateurs.

5
Chapitre I Analyse du projet

I-5- Cibles du site

Clients
Les clients cherchent à connaître les produits de l’entreprise, son historique, sa
source, consulter les questions fréquentes dans FAQ, etc.

Partenaires
Les partenaires, cherchent à découvrir la présentation de leur voisin, leur chiffre
d’affaires, leur historique, contacter l’entreprise, etc.

Grand public
Outre les visiteurs professionnels, c’est aussi pour une large part au grand public que
s’adressent ces informations. Ces visiteurs non avertis devront être séduits par la
clarté des informations et de la navigation, la qualité de la présentation et la richesse
des illustrations.

I-6- Adéquation avec les cibles


Pour répondre aux contraintes respectives générées par ces différents publics, le site
doit donc combiner :

Une grande richesse de contenu, une réactivité exemplaire, une ergonomie d’une
grande clarté, et un habillage riche et attractif.

Il doit aussi être facilement accessible, mais répondre aux attentes des utilisateurs
avancés.

I-7- Diagramme de GANTT

Le diagramme de GANTT est un outil permettant de modéliser la planification


de tâches nécessaires à la réalisation d'un projet. Il s'agit d'un outil inventé en 1917
par Henry L. GANTT.

Etant donné la relative facilitée de lecture des diagrammes GANTT, cet outil
est utilisé par la quasi-totalité des chefs de projet dans tous les secteurs. Le
diagramme GANTT représente un outil pour le chef de projet, permettant de
représenter graphiquement l'avancement du projet, mais, c'est également un bon
moyen de communication entre les différents acteurs d'un projet. [s2]

6
Juin Juillet Aout
S3 S4 S1 S2 S3 S4 S1 S2 S3 S4
Réception du projet
Analyse du projet

Collecte d’informations

Définition des objectifs

Définition des cibles

Analyse de la concurrence

Choix techniques
Conception

Conception graphique

Définition du contenu

Rédaction du CDC

Modélisation UML

Développement des pages

Programmation des scripts


Réalisation

Tests-Contrôles
Hébergement

Référencement
Tableau 1 : Diagramme de GANTT
: Temps estimé
CDC : Cahier des charges
Chapitre I Analyse du projet

I-8- Analyse de la concurrence


L’analyse de la concurrence est une démarche utilisée très fréquemment dans
le cycle de conception d’un produit informatique.
Elle consiste à étudier les sites que l’on juge concurrents ou comparables, afin d’en
extraire les points positifs et / ou négatifs. [s2]
Nous avons effectué une analyse sur deux sites, un site Algérien et un autre
Français qui travaillent dans le même domaine qu’Ifri, qui sont : Guedila et Vittel.

Site 1 Site 2
Nom du site Guedila Vittel
URL du site http://www.guedila.com http://www.vittel.fr
Date de l’analyse 08 Aout 2007 10 Aout 2007
Public visé Grand public Grand public
Langues utilisées Français Français
Technologies HTML, JavaScript, CSS,
HTML, JavaScript, Flash
utilisées Flash, ASP
Accès au site Libre Libre
Arborescence claire Arborescence claire Quatre
Hiérarchisation /
Cinq rubriques rubriques verticales avec
Organisation
horizontales sous menus
Actualité Vittel, Découvrez
Titre des Société, Produits, Vittel, Bougez avec Vittel,
rubriques Situation, News, FAQ’s Si vous testiez votre
Vitalité ?
Style du langage
Professionnel Professionnel
utilisé
Couleur dominante bleue
Couleurs dominantes bleue
Métaphore / et rouge
Charte graphique n’est pas
Forme graphique Charte graphique respectée
respectée
Bonne qualité d’images
Mauvaise qualité d’images

8
Chapitre I Analyse du projet

Type de Navigation simple avec un


Menu horizontal (en flash),
navigation menu vertical à trois niveaux
icônes non significatifs
Partie dynamique Non formulaire de contact
Liens vers
Oui Oui
d’autres sites
Norme W3C Non (19 erreurs) Non (11 erreurs)
- Design & intégration atelier-
buz.com
Les auteurs SoufNet.com - Hébergement : digex.com
- Contenus : ecrito.com
- Photos : Olivier Buhgiar
- nestle-waters.com
Les partenaires Aucun - thermes-vittel.com
- vitalitos.fr
Moteur de
Non Non
recherche
- Navigation simple
- Navigation simple

- Mise en page en 800x600


- Mise en page en 800x600
qui s'adaptent aux autres
qui s'adaptent aux autres
résolutions
résolutions
Les éléments
positifs - Bien référencé
- Rapidité de chargement
du site et des différentes
- Adresse intuitive
pages

- Charte graphiques
- Adresse intuitive
respectée
- Le formulaire de contact
Les éléments Il n'y a pas de lien explicite
ne marche pas
négatifs vers la page d'accueil

9
Chapitre I Analyse du projet

- FAQ's ne marche pas

- Le site utilise des frames


(cadres), ce qui peut
empêcher certains
moteurs de recherche
d'indexer ces pages et
d'en lire le contenu.

- Les News ne sont pas mis


à jour.

- Les images ne sont pas


dotées du paramètre
ALT1.

- Les titres n'utilisent pas


les balises H1, H2. Les
robots des moteurs de
recherche accordent plus
d'importance aux titres
qu'au contenu, cela freine
le référencement.

- Aucun meta2 tags n'est


inséré dans les pages.
Tableau 2 : Analyse de la concurrence

L’analyse du projet constitue une étape importante dans le déroulement du


projet. Cette analyse va nous permettre de passer à la conception du site en tenant
compte des besoins du client, des objectifs fixés et de la concurrence.

1
ALT : attribut de la balise <img>, il permet d'afficher du texte lorsque l'image ne peut être affichée et donne
la possibilité de communiquer alternativement avec les malvoyants.
2
Meta : Balise qui contient des mots clés. Les moteurs de recherche accordent de l’importance à cet élément.

10
Chapitre II

Conception du projet
Chapitre II Conception du site

Après l’analyse et la définition des besoins spécifiques du client, vient l’étape


de la conception du projet et qui consiste à définir le contenu du site, l’arborescence
des pages, leur présentation ainsi que le diagramme de cas d’utilisation, le
diagramme de classes et les différents diagrammes de séquence.

II-1- Définition des rubriques


Nous avons proposé pour le site d’IFRI, un découpage en six rubriques qui
sont :

Rubrique Description

C’est la page principale, elle offre des pistes vers l'ensemble


des informations disponibles dans le site. Elle montre d’une
Accueil
manière synthétique l’ensemble des principaux titres
développés.

Qui sommes nous Page de présentation de l’entreprise.

Produits Contient les produits de l’entreprise.

Des mentions qui serviront à établir le cadre d’utilisation de


Mentions légales
tout contenu figurant sur le site.

Page dédiée aux questions fréquentes sur l’entreprise et ses


produits, dont les internautes peuvent proposer une question
FAQ
ou un commentaire, mais reste à l’administrateur de valider et
de répondre à cette dernière.

Contient les coordonnées de l’entreprise ainsi qu’un


Contact
formulaire de contact.
Tableau 3 : Définition des rubriques

II-2- Contenu du site


La véritable richesse de ce site, sera évidemment le contenu unique des
informations qui y seront présentées.

12
Chapitre II Conception du site

Si le visiteur, vient y chercher une information, il devra pouvoir y accéder


d’une manière transparente en trois clics de souris.

Mais la présentation synthétique et attractive de la page d’accueil l’incitera à


découvrir davantage d’autres informations telles que : Plan d’accès, historique, IFRI
et la santé, etc.

II-3- Arborescence du site

13
Accueil

Qui sommes Source à Qalité


Produits Mentions FAQ Contact Nos valeurs Historique Plan d'accès Contact
nous bouteille sanitaire

Accueil Accueil Accueil Accueil Accueil Accueil Accueil Accueil Accueil Accueil Accueil

Qui Qui Qui Qui Qui Qui Qui Qui Qui Qui
Produits sommes sommes sommes sommes sommes sommes sommes sommes sommes sommes
Nous nous nous nous nous nous nous nous nous nous

Mentions Mentions Produits


Produits Produits Produits Produits Produits Produits Produits Produits
légales légales

Mentions Mentions Mentions Mentions Mentions Mentions Mentions Mentions


FAQ FAQ FAQ légales
légales légales légales légales légales légales légales

Contact Contact Contact Contact FAQ FAQ FAQ FAQ FAQ FAQ FAQ

Eau Qualité
Nos valeurs Contact Contact Contact Contact Contact
minérale sanitaire

Eau Qualié Analyse Historiqe


Historiqe Analyse Historique Nos valeurs
gazeifiée sanitaire

Eau Qualité Qualité Source à Qualité


Plan Historique Analyse bouteille sanitaire
arômatisée sanitaire sanitaire

Source à Source à Source à


Soda Plan Historiqe bouteille
bouteille bouteille

Poser
Nectar Plan
Question

Figure 1 : Arborescence du site


Chapitre II Conception du site

II-4- Spécifications techniques


Pour le bien être du site, nous avons défini un ensemble de spécifications
techniques à respecter tout au long de la réalisation du site :

• L’utilisation des frames est interdite, car ils empêchent certains moteurs de
recherche d'indexer ces pages et d’en lire le contenu.
• Une page Web ne doit pas occuper plus de 40 Ko pour se charger rapidement.
• La taille d’une animation gif ne doit pas dépasser 15 Ko.
• Les balises <IMG> doivent être associées de l’attribut ALT qui permet d'afficher
du texte lorsque l'image ne peut être affichée.
• Remplir les balises <META> pour les descriptions et les mots clés de chaque
page.
• Pouvoir revenir à la page d'accueil de n'importe quelle page du site.
• Quelle que soit la page actuelle, la page destination ne sera jamais éloignée
de plus de trois clics de souris.
• Appliquer les styles CSS pour les mises en page et présentations.
• Tester le site sur plusieurs configurations.
• Mise en page en 800x600 s'adaptant aux autres résolutions.
• Élaborer une navigation logique, simple et intuitive. L'internaute ne doit pas se
perdre.
• Animation ou effets spéciaux à utiliser avec modération.

II-5- Gabarit de page


Toutes les pages du site doivent se rassembler pour ne pas perturber la
navigation de l’utilisateur. Elles varient aussi, quelque peu, en fonction de leur
contenu. Pour cela nous avons défini le gabarit de page suivant :

15
Chapitre II Conception du site

800 px

239 px En-tête

Corps

51 px Pied de page
Figure 2 : Gabarit de page

Le site est opté pour un affichage parfait en 800X600 pixels pour une meilleure
compatibilité avec les anciens écrans.

Le site est structuré de la manière suivante avec trois parties distinctes :

L’en-tête

Contient une animation Flash, qui comporte le logo de l’entreprise et son slogan pour
permettre aux internautes de savoir qu’ils sont bien arrivés au site qu’ils voulaient,
ainsi qu’une barre de navigation.

Le corps

Est la partie informative du site. Il contient l’ensemble d’informations sur l’entreprise


et ses produits. Toute la navigation s’effectue dans cette partie.

Le pied de page

Comporte un rappel textuel du menu de navigation et un copyright.

16
Chapitre II Conception du site

II-6- Choix des couleurs


Le choix des couleurs est primordial. Les couleurs utilisées dans le site
changent en fonction du produit pour une meilleure interactivité avec l’internaute, par
exemple la page du produit « Soda pomme verte » est en vert, « Soda Orange » est
en orange et ainsi de suite.

Mais les couleurs dominantes du site restent la bleue et la verte. Le bleu est la
couleur du logo, le vert pour rester en cohérence avec le slogan de l’entreprise et qui
fait référence à la vie « ifri, source de vie ».

II-7- Choix de la police

Le choix des polices de caractère sera simplifié aux limites imposées par Internet,
car on ne peut pas utiliser n’importe quelle police de caractères pour le texte puisque
les navigateurs Internet utilisent celles disponibles sur la machine où ils sont
installés. Heureusement, les systèmes d’exploitation des PCs et des Macs disposent
par défaut d’un ensemble de polices dont certaines sont communes aux deux
plateformes. Mais cette liste de polices est plutôt réduite.

Pour cela, nous utilisons Arial pour les textes, car c’est une police système présente
pratiquement chez tous les utilisateurs, lisible à l’écran comme elle est très utilisée
sur Internet. [s1]

II-8- Modélisation UML

II-8-1- Diagramme de cas d’utilisation

Le diagramme de cas d'utilisation est un des outils importants d’UML. Il décrit


le fonctionnement d'un système du point de vue de l'utilisateur. Il énumère, d'une
façon simple et compréhensible, les possibilités d'interaction entre le système et les
acteurs. [s3]

17
Chapitre II Conception du site

Ifri.fr

S’abonner aux News


letter

Envoyer une News


letter

« include »
Consulter la FAQ

Répondre dans FAQ

« include »
S’authentifier

Lire les messages


« include »
Internaute reçus
Administrateur

« include »
Poser question dans
FAQ

Ecrire un message

Ecrire un message
dans contact

Figure 3 : Diagramme de cas d’utilisation

18
Chapitre II Conception du site

II-8-2- Diagramme de classes


Le diagramme de classe est généralement considéré comme le plus important
dans la conception d’une application. Il représente l’architecture conceptuelle du
système : Il décrit les classes que le système utilise, ainsi que les relations qui
existent entre eux. [s3]

Abonnes

FAQ
Id_ab
email
Id_faq
question
reponse
1

Envoyer Newsletter 1

0..*
Administrateur Mess_recus

Id_adm 0..* Répondre Id_mess


login nom
passe prenom
mail 0..* Lire messages 1 mail
tel
societe
ville
objet
message

Figure 4 : Diagramme de classe

19
Chapitre II Conception du site

II-8-3- Diagramme de séquence


Le diagramme de séquence représente la succession chronologique des
opérations réalisées pour un acteur. Il indique les objets que l’acteur va manipuler et
les opérations qui vont passer d’un objet à un autre. [s3]

• Acteur : Internaute

Abonnes FAQ

Internaute
S’abonner
Vérification
Confirmation d’abonnement

Consulter FAQ

Affichage de la page FAQ

Poser une question

Confirmation

Figure 5 : Diagramme de séquence de l’internaute

20
Chapitre II Conception du site

• Acteur : Administrateur

Administrate FAQ Abonnes Mess_recus


ur

Administrateur

S’authentifier
Vérification

Confirmation

Répondre à une question

Confirmation

Envoyer une News

Confirmation d’envoi

Demande de la page des messages


reçus
Affichage de la page des messages

Figure 6 : Diagramme de séquence de l’internaute

Après la modélisation du site, la définition des rubriques et du contenu, vient


l’étape de la réalisation qui va nous permettre de développer les différentes pages du
site.

21
Chapitre III

Réalisation du projet
Chapitre III Réalisation du site

Maintenant que l'on a déterminé les cibles, la concurrence, les objectifs et le


contenu, le moment est venu à l’implémentation. A cette étape, le site commence
réellement à se profiler.
Nous allons présenter dans ce chapitre, les différents langages et outils utilisés pour
la réalisation du site, les pages principales du site ainsi que la procédure
d’hébergement et de référencement.

III-1- Langages et technologies utilisés [s1]


Le choix de la technologie sera dicté par le besoin. Par exemple, pour faire
une vérification des informations saisies dans le formulaire de contact, JavaScript
côté client sera suffisant et beaucoup plus rapide qu'un script côté serveur qui
nécessite une requête au serveur. Par contre, pour tester un mot de passe, une
vérification côté serveur est obligatoire pour la sécurité de ce dernier.

Nous avons choisi l’ensemble des langages et technologies suivants :

HTML

Le HTML est un langage de description de pages Web. Il permet l’insertion des liens
hypertextes et d’images.
JavaScript

JavaScript est un langage de programmation non compilé, orienté objet,


Principalement utilisé côté client, Nous l’avons utilisé pour le contrôle du formulaire et
l’affichage des pop-up.
CSS

Abréviation de « Cascading Style Sheets ». Les feuilles de style déterminent l’aspect


de la typographie et d’un certain nombre de liens utilisés pour l’ensemble du site.
Elles pourront être modifiées facilement pour affecter profondément la présentation
générale du site.

PHP

Est un langage de Scripting embarqué dans les pages HTML et traité par le serveur.
Il est utilisé pour accéder à la base de données et la création d’applications
dynamiques telles que la lecture ou l’écriture des messages dans la base de
données.

23
Chapitre III Réalisation du site

Apache

Est un serveur web très répandu qui supporte le PHP, nous devrons posséder notre
serveur local pour faire du PHP.

MySql

Est un système de gestion de bases de données très utilisé sur le Web.

PHPMyAdmin

C'est un outil écrit en PHP pour gérer les bases de données MySQL. Il a pour rôle de
faciliter la gestion des bases de données MySQL sur un serveur.

III-2- Outils utilisés


Notre choix de logiciels est porté sur :

Logiciel Justification du choix


 Notre maîtrise du logiciel.
 Disponibilité du logiciel.
 Il permet la mise en place visuelle des éléments de
notre page web en générant le code a notre place
(logiciel de type WYSIWYG : What You See Is
Macromédia What You Get).
Dreamweaver  Capacité de gérer du code JavaScript de manière
transparente.
 Adapté pour l'intégration d'éléments créés avec
Fireworks ou Flash.
 Sait gérer les langages dynamiques et bases de
données.
 Permet la création d'animations hautement
interactives.
 Permet d'exploiter des graphismes vectoriels sur
Macromédia Flash
Internet.
 Le plug-in nécessaire à son fonctionnement est
distribué avec les dernières versions de navigateur.

24
Chapitre III Réalisation du site

 Programmation associée (Action Script) permet de


très notables avancées dans l'intelligence des
pages web.
 Flash peut permettre des exploits d'ergonomie
autrement très délicats à réaliser avec du HTML,
CSS ou JavaScript.
 Permet de retoucher quasiment tous les formats
d'images.
 Permet de rajouter des truquages aux images :
effets spéciaux, d'ombre et de lumières et bien
d'autres.
 Très pratique pour les photo-montages.
Adobe Photoshop
 Possède de nombreux outils de retouche et de
correction.
 Les fonctions peuvent être étendues par l'adjonction
de modules (plugs-in).
 Possibilité d'enregistrement de séquences de
tâches permettant le traitement d'images par lot.
 Permet la création des graphiques vectoriels.
 Peut être utilisé indépendamment ou en
complément de Photoshop.
 Offre des outils de dessin vectoriel puissants.
Adobe Illustrator
 Un des avantages des images vectorielles est
qu'elles ne sont pas dépendantes de la résolution,
c’est-à-dire qu'elles ne perdent pas en qualité si on
les agrandit.
Tableau 4 : Choix des logiciels

III- 3- Espace client


L’espace client est la partie publique du site dont l’accès est autorisé à tout le
monde, il constitue un espace informatif de présentation de l’entreprise et ses
activités.

25
Chapitre III Réalisation du site

III- 3-1- Page d’introduction


’introduction Flash
Le site commence par une introduction Flash, le passage à la page d’accueil
se fait à travers deux liens, un lien en flash et un autre en HTML pour ceux qui ne
possèdent pas le plug-in
in Flash installé sur leurs navigateurs.

C'est sur cette page que l'internaute arrive après avoir validé l'adresse du site
sur le navigateur.

Cette introduction Flash exigée par le commanditaire a pour but d’attirer


d’atti
l’attention de l’internaute vers le logo de l’entreprise ainsi que son slogan et de
donner envie d’aller plus loin.

Figure 7 : Page d'introduction flash

III- 3-2- La page d’accueil


La home page ou la page d’accueil, est une page légère au chargement. On y trouve
le nom du site, indiquant au visiteur qu'il est bien arrivé où il voulait aller,
éventuellement un logo et des liens vers les principaux points forts du site. On pourra
ensuite trouver après les pages de contenu significatif,
sig (produits,
uits, plan, FAQ, etc.).

26
Chapitre III Réalisation du site

Figure 8 : Page d'accueil

III- 3-3- La page produits


Contient l’ensemble des catégories
catégories des produits qui existent. Chaque
C produit
est présenté sous forme d’une image cliquable qui ramène vers la page des produits
concernés.

27
Chapitre III Réalisation du site

Figure 9 : Page Produits

III- 3-4- La page Eau minérale naturelle gazéifiée


Cette page contient la description du produit "eau minérale naturelle
gazéifiée", elle prend la même couleur que celle des bouteilles de ce produit.

28
Chapitre III Réalisation du site

Figure 10 : Page Eau Gazéifiée

III-4- Espace d’administration


Est un espace réservé à l’administrateur du site et qui lui permet de gérer la
partie client, de répondre aux questions et aux remarques des internautes,
d’envoyer des Newsletters
letters aux abonnés du site ainsi que de lire et d’envoyer
d’ des
messages.

L’accès à l’espace d’administration se fait par saisi


saisie d’URL :
htt://www.ifri.fr/admin.php Cette partie est protégée par un mot de passe. Parmi
les pages d’administration :

III-4-1- La page de saisie du mot de passe


Est une page de saisie
saisi du Login et du mot de passe pour accéder à l’espace
d’administration. Ainsi, une possibilité est donnée à l’administrateur de récupérer le
mot de passe en cas d’oubli à l’aide d’une adresse électronique secondaire.

29
Chapitre III Réalisation du site

Figure 11 : Page de saisie du mot de passe

III-4-2- La page Administration


Nous avons mis à la disposition de l’administrateur cette interface d’administration
simple et intuitive. C’est à partir de cette page que l’administrateur peut gérer le site.

Figure 12 : Page d'administration du site

30
Chapitre III Réalisation du site

III-4-3- Sécurité du mot de passe


Les pages du Back office sont protégées par l’instruction « diened of service » qui
interdit impérativement l’accès à cette espace sans saisir le login et le mot de passe.

Le mot de passe est crypté avec la fonction de hachage MD5 pour une meilleure
sécurité.

Mot de passe non crypté Mot de passe crypté


bejaia06 MD5 76f9c2321620f0898604

III-5- Tests et contrôles


Cette étape consiste à s’assurer que le site est conforme aux attentes du
client et faire en sorte que son utilisation se déroule correctement.

Pour cela nous avons effectué des tests de compatibilité avec les différents
navigateurs les plus connus et les plus utilisés ainsi que les différentes versions :
Internet Explorer V5, V6 et V7, Fire Fox V1.5 et V2. Comme nous avons effectué un
contrôle de contenu du site pour identifier les erreurs qui peuvent se produire lors de
la rédaction ou du développement.

Après les tests et le contrôle du contenu et après que toutes les bugs et les
erreurs sont identifiées nous avons pu les corriger.

III-6- Hébergement [o1]


Pour que le site soit accessible par Internet il faut qu’il soit hébergé sur un
serveur relié en permanence à Internet. Pour cela, nous avons plusieurs propositions
d’offres d’hébergement dans la plateforme de Vigisud.

Selon nos besoins nous avons choisi une offre de 500Mo qui possède 20
comptes FTP. L’utilisation de PHP/MySQL est possible avec des statistiques de
connexion et mesure d’audience.

31
Chapitre III Réalisation du site

III-7- Référencement [o1]


Le référencement est une partie très importante dans la vie d’un site Web. La
grande majorité des visiteurs cherchent le site grâce à des outils de recherche, il est
donc primordial de le faire figurer dans les plus connus et les plus utilisés. Mais, il ne
suffit pas d’être présent dans les bases de données de ces moteurs, il faut être aussi
dans les premières pages des résultats.

Pour assurer un bon référencement du site, nous avons effectué les étapes de
référencement suivantes :

• Nettoyage du code

Pour obtenir un bon résultat, le site doit être optimisé. Pour cela nous avons utilisé
l’outil du nettoyage du code de DreamWeaver qui nous permet de supprimer les
parties inutiles et redondantes du code.

• Choix des mots clés

Nous avons choisi un ensemble de mots clés qui peuvent être saisi par l’internaute
lors de sa recherche. Ils vont nous servir pour le référencement. Par exemple : ifri,
eau, minérale, jus, boisson, béjaïa, usine, …etc.

• Insertion des balises <meta>

Nous avons inséré les balises <meta> suivantes dans les pages de notre site pour
que les moteurs de recherche puissent les trouver facilement.

<meta name="description" content="Entreprise Algérienne d’eau


minérale et de boissons“>
<meta name="keywords" content="ifri, eau, minérale, naturelle,
boissons, jus, Béjaia, Algérie,entreprise, ighzer Amokrane, béjaïa“>
<meta name="identifier-url" content="http://www.ifri.fr“>
<meta name="date-creation-yyyymmdd "content="20070915“>

• Référencement manuel

Consiste à inscrire le site dans les moteurs de recherche et annuaires les plus
courants en remplissant les feuilles de référencement de ces derniers.

32
Chapitre III Réalisation du site

• Référencement automatique

Référencement à l’aide d’un logiciel ou d’un site de référencement. Nous avons


utilisé le site http://referencement-gratuit.erezine.com/ pour le référencement
automatique de notre site.

33
Conclusion
Durant ces deux mois et demi de stage au sein de l’entreprise Vigisud, il nous
a été confié la tâche de réalisation d’un site Web vitrine pour l’entreprise d’eau
minérale et de boissons IFRI, qui est l’un des projets de Vigisud.

Dans un premier temps, nous sommes amenés à réaliser un cahier des


charges pour guider le client vers une conception équilibrée et conforme à ses
objectifs.

Après la validation du cahier des charges par le client, nous avons conçu une
maquette du site qui est, ensuite, présentée et acceptée par le client.

Puis, nous avons entrepris la conception détaillée du site, les aspects de


communication, la rédaction du contenu, etc.

Enfin, nous avons entamé la réalisation, l’intégration du contenu, la


programmation des scripts, jusqu'à l’hébergement et le référencement du site après
sa validation par le client.

Finalement, nous avons obtenu un site convenable qui a été approuvé par le
client. Mais, cela ne c’est pas fait sans peine car nous avons été obligés de modifier
plusieurs fois les mêmes choses pour rester dans les exigences du client.

Ce stage a été très bénéfique pour nous en tant qu’une expérience


personnelle et professionnelle. Notre mission nous a beaucoup intéressés et nous a
permis de réaliser un site Web pour une grande entreprise à l’échelle nationale.
Webographie
[s1] http://www.mowebmaster.com

[s2] http://www.commentcamarche.net

[s3] http://www.uml.free.fr

Bibliographie
[o1] M.Martin, Créer son site Web, Edition CampusPress, 2001.
Résumé
Notre travail consiste en la conception et la réalisation d’un site Web vitrine
pour l’entreprise d’eaux minérales et de boissons IFRI au sein de l’entreprise Vigisud.

Ce présent mémoire se compose de trois principaux chapitres : le premier


chapitre est consacré à l’analyse du projet, où il y a des définitions des entreprises
Vigisud et IFRI ainsi qu’une étude préalable des besoins de l’entreprise.

Le second contient une conception détaillé du site, la définition du contenu,


l’arborescence des pages ainsi et une modélisation UML.

Le troisième chapitre est consacré à la réalisation. Il comporte le choix des


logiciels et des outils du développement, la description de quelques pages réalisées,
l’hébergement et le référencement.

Vous aimerez peut-être aussi