Memoire Ifri [PDF]

Zitiervorschau

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 IPMONDE

2

(France) :

spécialisé

dans

la

virtualisation.

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

Télécommunication.

1 2

Site : www.vigiware.com 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 Site : www.axis.com 5 FAQ : Foire Aux Questions 4

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

Analyse du projet

S3

Juillet S4

S1

S2

S3

Réception du projet Collecte d’informations Définition des objectifs Définition des cibles Analyse de la concurrence

Conception

Choix techniques Conception graphique Définition du contenu Rédaction du CDC Modélisation UML

Réalisation

Développement des pages Programmation des scripts

Tests-Contrôles Hébergement Référencement : Temps estimé

CDC : Cahier des charges

Tableau 1 : Diagramme de GANTT

Aout S4

S1

S2

S3

S4

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 utilisées Accès au site Hiérarchisation / Organisation

HTML, JavaScript, Flash

HTML, JavaScript, CSS, Flash, ASP

Libre

Libre

Arborescence claire

Arborescence claire Quatre

Cinq rubriques

rubriques verticales avec

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 utilisé

Professionnel Couleur dominante bleue

Métaphore / Forme graphique

Charte graphique n’est pas respectée Mauvaise qualité d’images

Professionnel

Couleurs dominantes bleue et rouge Charte graphique respectée Bonne qualité d’images

8

Chapitre I

Type de navigation Partie dynamique Liens vers d’autres sites Norme W3C

Analyse du projet

Menu horizontal (en flash), icônes non significatifs

Navigation simple avec un menu vertical à trois niveaux

Non

formulaire de contact

Oui

Oui

Non (19 erreurs)

Non (11 erreurs) - Design & intégration atelierbuz.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 recherche

Non

- Navigation simple

- Mise en page en 800x600 qui s'adaptent aux autres Les éléments positifs

résolutions

- Rapidité de chargement du site et des différentes pages

- Adresse intuitive

Les éléments négatifs

- Le formulaire de contact ne marche pas

Non - Navigation simple

- Mise en page en 800x600 qui s'adaptent aux autres résolutions

- Bien référencé

- Adresse intuitive

- Charte graphiques respectée Il n'y a pas de lien explicite 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 , 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

Accueil

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

Contact

Contient

les

coordonnées

de

l’entreprise

ainsi

qu’un

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 nous

Source à bouteille

Qalité sanitaire

Accueil

Accueil

Accueil

Accueil

Accueil

Qui sommes nous

Qui sommes nous

Qui sommes nous

Qui sommes nous

Qui sommes nous

Qui sommes nous

Produits

Produits

Produits

Produits

Produits

Produits

Produits

Mentions légales

Mentions légales

Mentions légales

Mentions légales

Mentions légales

Mentions légales

Mentions légales

Mentions légales

Contact

FAQ

FAQ

FAQ

FAQ

FAQ

FAQ

FAQ

Qualité sanitaire

Contact

Contact

Contact

Contact

Contact

Eau gazeifiée

Analyse

Historique

Nos valeurs

Qualié sanitaire

Analyse

Historiqe

Eau arômatisée

Historique

Qualité sanitaire

Qualité sanitaire

Analyse

Source à bouteille

Qualité sanitaire

Soda

Plan

Source à bouteille

Source à bouteille

Historiqe

Nectar

Poser Question

Produits

Mentions

FAQ

Contact

Nos valeurs

Accueil

Accueil

Accueil

Accueil

Accueil

Accueil

Produits

Qui sommes Nous

Qui sommes nous

Qui sommes nous

Qui sommes nous

Mentions légales

Mentions légales

Produits

Produits

FAQ

FAQ

FAQ

Contact

Contact

Contact

Nos valeurs

Eau minérale

Historiqe

Plan

Historique

Plan

Figure 1 : Arborescence du site

Plan d'accès

Source à bouteille

Contact

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

S’authentifier

« include »

« include »

Internaute

Poser question dans FAQ

Lire les messages reçus

Administrateur

« include »

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

1

Envoyer Newsletter

0..*

Mess_recus

Administrateur

Id_adm login passe mail

0..*

0..*

Répondre

Lire messages

Id_mess nom prenom 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 ur

FAQ

Abonnes

Mess_recus

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 Dreamweaver

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.




Permet

la

création

d'animations

hautement

interactives. Macromédia Flash




Permet d'exploiter des graphismes vectoriels sur 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. Adobe Photoshop




Très pratique pour les photo-montages.




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




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.

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é

bejaia06

Mot

MD5

de

passe

crypté

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

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

•

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.