memoire de fin de cycle

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 moimê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

I1 L’entreprise d’accueil ........................................................................................ 3

I11 Présentation ............................................................................................... 3

I12 Activités ...................................................................................................... 3

I13 Partenaires ................................................................................................. 3

I2 Travail demandé ............................................................................................... 4

I3 L’Entreprise IFRI ............................................................................................... 4

I4 Objectifs du site ............................................................................................... 5

I5 Cibles du site .................................................................................................... 6

I6 Adéquation avec les cibles................................................................................ 6

I7 Diagramme de GANTT ..................................................................................... 6

I8 Analyse de la concurrence ................................................................................ 8

Chapitre II

Conception du projet II1 Définition des rubriques ................................................................................. 12

II2 Contenu du site .............................................................................................. 12

II3 Arborescence du site ..................................................................................... 13

II4 Spécifications techniques............................................................................... 15

II5 Gabarit de page ............................................................................................. 15

II6 Choix des couleurs ........................................................................................ 17

II7 Choix de la police ........................................................................................... 17

II8 Modélisation UML .......................................................................................... 17

II81 Diagramme de cas d’utilisation ................................................................ 17

II82 Diagramme de classes ............................................................................ 19

II83 Diagramme de séquence ........................................................................ 20

Chapitre III

Réalisation du projet III1 Langages et technologies utilisés ................................................................. 23

III2 Outils utilisés ................................................................................................. 24

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

III 31 Page d’introduction Flash ...................................................................... 26

III 32 La page d’accueil ................................................................................... 26

III 33 La page produits .................................................................................... 27

III 34 La page Eau minérale naturelle gazéifiée ............................................. 28

III4 Espace d’administration ................................................................................ 29

III41 La page de saisi du mot de passe .......................................................... 29

III42 La page Administration ........................................................................... 30

III43 Sécurité du mot de passe ....................................................................... 31

III5 Tests et contrôles .......................................................................................... 31

III6 Hébergement ................................................................................................ 31

III7 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 VIGISUD 1 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


3

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.

I1 L’entreprise d’accueil (VIGISUD)

I11 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.

I12 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).

I13 Partenaires

VIGISUD possède plusieurs partenaires dans le monde, qui sont :

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

IPMONDE2 COMMUNICATION (France) : spécialisé dans l’hébergement et la

Télécommunication.

1 Site : www.vigiware.com

2 Site : www.ipmonde.net


4

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

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

I2 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 FAQ 5 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.

I3 L’Entreprise IFRI Présentation

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

daïra (souspréfecture) d’IfriOuzellaguen, 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


5

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.

I4 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.


6

I5 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.

I6 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.

I7 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 quasitotalité 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]

Juin Juillet

S3 S4 S1 S2 S3 S4 S1

Ana

lyse

du

proj

et Réception du projet

Collecte d’informations

Définition des objectifs

Définition des cibles

Analyse de la concurrence

Con

cept

ion

Choix techniques

Conception graphique

Définition du contenu

Rédaction du CDC

Modélisation UML

Réa

lisat

ion

Développement des pages

Programmation des scripts

Tests-Contrôles

Hébergement

Référencement

Tableau 1 : Diagramme de GANTT : Temps estimé

CDC : Cahier des charges


8

I8 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

utilisées HTML, JavaScript, Flash

HTML, JavaScript, CSS,

Flash, ASP

Accès au site Libre Libre

Hiérarchisation /

Organisation

Arborescence claire

Cinq rubriques

horizontales

Arborescence claire Quatre

rubriques verticales avec

sous menus

Titre des

rubriques

Société, Produits,

Situation, News, FAQ’s

Actualité Vittel, Découvrez

Vittel, Bougez avec Vittel,

Si vous testiez votre

Vitalité ?

Style du langage

utilisé Professionnel Professionnel

Métaphore /

Forme graphique

Couleur dominante bleue

Charte graphique n’est pas

respectée

Mauvaise qualité d’images

Couleurs dominantes bleue

et rouge

Charte graphique respectée

Bonne qualité d’images


9

Type de

navigation

Menu horizontal (en flash),

icônes non significatifs

Navigation simple avec un

menu vertical à trois niveaux

Partie dynamique Non formulaire de contact

Liens vers

d’autres sites Oui Oui

Norme W3C Non (19 erreurs) Non (11 erreurs)

Les auteurs SoufNet.com

- Design & intégration atelier

buz.com

- Hébergement : digex.com

- Contenus : ecrito.com

- Photos : Olivier Buhgiar

Les partenaires Aucun

- nestlewaters.com

- thermesvittel.com

- vitalitos.fr

Moteur de

recherche Non Non

Les éléments

positifs

- Navigation simple

- Mise en page en 800x600

qui s'adaptent aux autres

résolutions

- Rapidité de chargement

du site et des différentes

pages

- Adresse intuitive

- Navigation simple

- Mise en page en 800x600

qui s'adaptent aux autres

résolutions

- Bien référencé

- Adresse intuitive

- Charte graphiques

respectée

Les éléments

négatifs

- Le formulaire de contact

ne marche pas

Il n'y a pas de lien explicite

vers la page d'accueil


10

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

Chapitre II

Conception du projet

Chapitre II Conception du site

12

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.

II1 Définition des rubriques Nous avons proposé pour le site d’IFRI, un découpage en six rubriques qui

sont :

Rubrique Description

Accueil

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

des informations disponibles dans le site. Elle montre d’une

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.

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

tout contenu figurant sur le site.

FAQ

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

produits, dont les internautes peuvent proposer une question

ou un commentaire, mais reste à l’administrateur de valider et

de répondre à cette dernière.

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

formulaire de contact.

Tableau 3 : Définition des rubriques

II2 Contenu du site La véritable richesse de ce site, sera évidemment le contenu unique des

informations qui y seront présentées.


13

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.

II3 Arborescence du site

Qui sommes nous

Accueil

Produits

Mentions légales

FAQ

Contact

Nos valeurs

Historiqe

Plan

Produits

Accueil

Qui sommes

Nous

Mentions légales

FAQ

Contact

Eau minérale

Eau gazeifiée

Eau arômatisée

Soda

Nectar

Mentions

Accueil

Qui sommes

nous

Produits

FAQ

Contact

FAQ

Accueil

Qui sommes

nous

Produits

Mentions légales

Contact

Qualité sanitaire

Analyse

Historique

Plan

Poser Question

Figure 1 : Arborescence du site

Contact

Accueil

Qui sommes

nous

Produits

Mentions légales

FAQ

Nos valeurs

Accueil

Qui sommes

nous

Produits

Mentions légales

FAQ

Contact

Historique

Qualité sanitaire

Source à bouteille

Historique

Accueil

Qui sommes

nous

Produits

Mentions légales

FAQ

Contact

Nos valeurs

Qualité sanitaire

Source à bouteille

Source à bouteille

Accueil

Qui sommes

nous

Produits

Mentions légales

FAQ

Contact

Qualié sanitaire

Analyse

Historiqe

Plan

Qalité sanitaire

Accueil

Qui sommes

nous

Produits

Mentions légales

FAQ

Contact

Analyse

Source à bouteille

P

Accueil

P


15

II4 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.

II5 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 :


16

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’entê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.

800 px

Pied de page

Entête

Corps

239 px

51 px


17

II6 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 ».

II7 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]

II8 Modélisation UML

II81 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]


18

Figure 3 : Diagramme de cas d’utilisation

Ifri.fr

S’authentifier

« include »

S’abonner aux News letter

Consulter la FAQ

Poser question dans FAQ

Ecrire un message dans contact

Envoyer une News letter

Répondre dans FAQ

Lire les messages reçus

Ecrire un message

Internaute Administrateur

« include »

« include »

« include »


19

II82 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]

Figure 4 : Diagramme de classe

Lire messages

Répondre

Envoyer Newsletter

Abonnes

Id_ab email

Administrateur

Id_adm login passe mail

Mess_recus

Id_mess nom prenom mail tel societe ville objet message

FAQ

Id_faq question reponse 1

0..*

0..*

1

0..* 1


20

II83 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

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

S’abonner

Confirmation d’abonnement

Affichage de la page FAQ

Poser une question

Confirmation

Vérification

Internaute

Abonnes FAQ

Consulter FAQ


21

Acteur : Administrateur

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.

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

FAQ Abonnes Mess_recus

Administrateur

Administrateur

S’authentifier

Confirmation

Vérification

Chapitre III

Réalisation du projet

Chapitre III Réalisation du site

23

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.

III1 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 popup.

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.


24

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.

III2 Outils utilisés Notre choix de logiciels est porté sur :

Logiciel Justification du choix

Macromédia

Dreamweaver

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

What You Get).

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.

Macromédia Flash

Permet la création d'animations hautement

interactives.

Permet d'exploiter des graphismes vectoriels sur

Internet.

Le plugin nécessaire à son fonctionnement est

distribué avec les dernières versions de navigateur.


25

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.

Adobe Photoshop

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 photomontages.

Possède de nombreux outils de retouche et de

correction.

Les fonctions peuvent être étendues par l'adjonction

de modules (plugsin).

Possibilité d'enregistrement de séquences de

tâches permettant le traitement d'images par lot.

Adobe Illustrator

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.

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.

Chapitre III

III 31 Page d’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

possèdent pas le plugin 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’atti

l’attention de l’internaute vers le logo de l’entreprise ainsi que son slogan et de

donner envie d’aller plus loin.

III 32 La page d’accueil

La home page ou la page d’accueil, est une page légère au

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 sig

’introduction Flash


se fait à travers deux liens, un lien en flash et un autre en HTML pour ceux qui ne

in Flash installé sur leurs navigateurs.


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


donner envie d’aller plus loin.

Figure 7 : Page d'introduction flash

La page d’accueil

ou la page d’accueil, est une page légère au chargement. On y trouve



ensuite trouver après les pages de contenu significatif, (produits, plan, FAQ,

Réalisation du site

26


HTML pour ceux qui ne


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


chargement. On y trouve



uits, plan, FAQ, etc.).

Chapitre III

III 33 La page produits

Contient l’ensemble des catégo

est présenté sous forme d’une image cliquable qui ramène vers la page des produits

concernés.

Figure 8 : Page d'accueil

Contient l’ensemble des catégories des produits qui existent. C



27

ries des produits qui existent. Chaque produit


Chapitre III

III 34 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.

Figure 9 : Page Produits

La page Eau minérale naturelle gazéifiée




28



Chapitre III

III4 Espace d’administrationEst 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

d’envoyer des Newsletters aux abonnés du site ainsi

messages.

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

htt://www.ifri.fr/admin.php

les pages d’administration :

III41 La page de saisie du mot de passe

Est une page de saisi

d’administration. Ainsi, une possibilité est donnée à l’administrateur de récupérer

mot de passe en cas d’oubli

Figure 10 : Page Eau Gazéifiée

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

letters aux abonnés du site ainsi que de lire et d’

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

htt://www.ifri.fr/admin.php Cette partie est protégée par un mot de passe. Parmi

:

du mot de passe

saisie du Login et du mot de passe pour accéder à l’espace

une possibilité est donnée à l’administrateur de récupérer

mot de passe en cas d’oubli à l’aide d’une adresse électronique secondaire.


29

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,

de lire et d’envoyer des

L’accès à l’espace d’administration se fait par saisie d’URL :

Cette partie est protégée par un mot de passe. Parmi

du Login et du mot de passe pour accéder à l’espace

une possibilité est donnée à l’administrateur de récupérer le

à l’aide d’une adresse électronique secondaire.

Chapitre III

Figure

III42 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 11 : Page de saisie du mot de passe

La page Administration


partir de cette page que l’administrateur peut gérer le site.

Figure 12 : Page d'administration du site


30


partir de cette page que l’administrateur peut gérer le site.


31

III43 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 76f9c2321620f0898604

III5 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.

III6 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.

MD5


32

III7 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="identifierurl" content="http://www.ifri.fr“>

<meta name="datecreationyyyymmdd "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.


33

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.

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.

Documents

memoire de fin de cycle