Mémoire Mastere PDF

Ministre de lEnseignement suprieur
de la recherche scientifique et de la Technologies
Universit de La Mannouba
Institut Suprieur des
Arts Multimdias
Projet de fin dtudes

Site Web
Agence de Webmarketing
WEB 2 COM
www.web-2-com.net
Travail ralis par :

SOUMAYA ATTIA
Encadr par :
M. Nobel El Houssine BOUBAKER
Anne universitaire 2002-2003
REMERCIMENTS
Je remercie tout dabord M. Nobel El Houssine BOUBAKER qui ma

accept comme stagiaire et qui a encadr ce projet de fin dtudes.
Je remercie aussi mon amie Mariem pour toute laide quelle ma apporte
durant cette anne universitaire.
Enfin, je noublierai pas de remercier tous ceux qui mont aid de prs ou de
loin raliser ce travail et tout particulirement
Mme Ahlem BOUZIRI
de lInstitut Suprieur des Arts Multimdias de La Mannouba.
DEDICACES
A ceux que jaime le plus au monde, mes parents.

A ma deuxime famille la famille BEN OUALI et particulirement ma
tante SALOUA
A mes deux surs et amies IKRAM et RIM
A mes deux rayons de soleil AYA et AMAL
A tous ceux que jaime et qui maiment
SOUMAYA
Projet Multimdias Web 2 Com
ISAMM 2006
INTRODUCTION
tre prsent sur Internet est devenue une ralit frquente de nos jours. De ce fait,
toute entreprise qui se respecte cherche assurer sa prsence sur le rseau
mondial. Pour cela, une entreprise peut assurer cette prsence par ses propres
moyens ou sous-traiter chez une Agence de Webmarketing.
La cration dun site web ncessite aussi bien des professionnels en communication
que des experts en cration de sites et ce pour avoir un message communicationnel
bien labor au risque de se trouver prsente sur Internet sans pour autant raliser
le profit escompt.
Lobjectif de ce stage effectu lAgence de Webmarketing WEB 2 COM, du 15
juillet au 15 octobre 2006, est de concevoir et de raliser le site web de lAgence
ainsi que son CD Card. Le but de ce travail est dassurer sa prsence sur le web en
vue de promouvoir lAgence auprs des ses clients actuels et de ses prospects.
Pour cela, quelques tapes sont ncessaires savoir : la prparation du contenu
textuel, la conception de la maquette graphique, la ralisation et lhbergement.
Dans ce rapport nous allons dtailler les tapes de conception et de ralisation de ce
projet, en rpondant quelques questions savoir : Quelles informations prsenter
sur le site ? Quels sont les meilleurs logiciels utiliser pour la cration de ces deux
moyens de communication ?
Prsentation De Web 2 Com
WEB 2 COM est une Agence tunisienne de webmarketing, base Sousse,
travaillant dans le domaine des Nouvelles Technologies de l'Information et de la
Communication (NTIC).
Cette Agence opre dans les divers domaines du webmarketing :
Dveloppement de visibilit dans les moteurs de recherche
CD Rom & CD Card
Vente d'espaces pour les bannires publicitaires

-1-
ISAMM 2006
Assistance et prparation des cahiers de charges
Conception des sites web et dveloppement des applications Intranet
Soumission des sites web
Rfrencement professionnel
Positionnement publicitaire
E-mail marketing
Gestion de contenu
Analyse statistique et modlisation conomtrique
Gestion de la relation client : Call Center
Valeurs ajoutes de lAgence :

- Un suivi et un conseil personnalis pour chaque client.
- Un plan de communication sur Internet personnalis et adapt aux objectifs et au
budget de chaque client.
- Le Retour Sur Investissement (ROI) est au cur du travail de lAgence.
Nous allons commencer, dans ce rapport, par analyser les sites web de quatre
Agences de communication sur internet savoir : ABC Xebmarketing, ALCOM, ES 2i
et gnral mdias Co. Dans le deuxime chapitre nous allons dtailler les tapes de
conception du site web ainsi que du CD Card de lAgence. Le dernier chapitre sera
consacr la ralisation des deux supports en question.
-2-
ISAMM 2006
PREMIER CHAPITRE : Etude pralable

Vu la conjoncture actuelle en Tunisie et lvolution rapide que connais le domaine de
la publicit sur internet, il est primordial pour toute Agence travaillant dans ce
domaine davoir son propre site internet ainsi que son CD promotionnel.
En effet, la Tunisie compte aujourdhui plus de 200 Agences travaillant dans le
webmarketing pour ce, la prsence sur la toile mondiale devient une priorit pour
attirer de nouveaux clients.
Nous allons dans ce chapitre prsenter quelques sites web dAgences de
communication tunisiennes travaillant dans le mme secteur dactivit que lAgence
Web 2 Com.
1. ABC Xebmarketing
Fig1 : Ecran du site de lAgence ABC Xebmarketing
En analysant le site de lAgence ABC Xebmarketing, nous avons pu dgager

quelques points forts et quelques faiblesses.
1.1. Points Forts
-
Diversit des rubriques.
Contenu clair et bien prsent dans une structure de tableau.
-3-

-
ISAMM 2006
Lutilisation des formes rectangulaires et de la couleur bleue pour donner une

image de srieux lAgence.
1.2. Points faibles
Les versions anglaise et arabe sont des liens vers un autre site
http://www.accesstoebusiness.com/.
Le contenu nest pas centr sur la page.
Un espace de lien sur le ct gauche de la page qui cre un dsquilibre

puisquil ya un espace blanc dans le ct droit de la page.
Labsence danimations.
Lutilisation non justifie de limage de deux femmes.
Petite taille de lcriture.
-4-
ISAMM 2006
2. ALCOM
Fig2 : Ecran du site de lAgence ALCOM
En analysant le site de lAgence ACLOM, nous avons pu dgager quelques points

forts et quelques faiblesses.
-5-
ISAMM 2006
2.1. Points Forts

-
La page est centre sur la fentre du navigateur.
Lutilisation des formes rectangulaires et de la couleur bleue pour donner une

image de srieux lAgence.
2.2. Points faibles
La page est longue sans pour autant avoir de contenu consistant.
Lutilisation dicnes non lisibles des travaux de lAgence sans que ces icnes
soient des liens vers les travaux en question.
Lexistence despace vide en bas de page.
Les liens de la bannire ne fonctionnent pas.
La bannire et lespace publicitaire prennent trois quarts de la page alors que

gnralement les internautes ne prfrent pas utiliser lascenseur pour lire une
page.
Site en une seule langue.

3. ES 2i
Fig3 : Ecran du site de lAgence ES2i
-6-
ISAMM 2006
En analysant le site de lAgence ES2i, nous avons pu dgager quelques points forts
et quelques faiblesses.
3.1. Points Forts
-
Contenu clair et bien prsent.
Harmonie des couleurs.
La page est centre sur la fentre du navigateur.

3.2. Points faibles
Lexistence despace vide.
La rubrique newsletter est une image non fonctionnelle.
Lexistence de liens non fonctionnels.

4. GENERAL MEDIA Co
Fig4 : Ecran du site de lAgence GENERAL MEDIA Co
En analysant le site de lAgence GENERAL MEDIA Co, nous avons pu dgager

quelques points forts et quelques faiblesses.
-7-
ISAMM 2006
4.1. Points Forts

-
Harmonie des couleurs.

4.2. Points faibles
La page nest pas centre sur le navigateur ce qui cre un espace gris vide du
ct droit de la page.
Les pages prsentent un contenu textuel charg.
La page est lente au tlchargement surtout avec la bannire en flash.

5. Synthse
A la fin de cette tude pralable, nous pouvons pu dgager certains points viter et
dautres quil vaut mieux utiliser pour notre projet et ce pour un rsultat plus pertinent.
5.1. Points viter
La premire chose viter est la cration despace vide dans la page. La deuxime
est de crer un quilibre entre le contenu textuel et les images. La troisime chose
est de faire une traduction de notre site en deux langues (anglais et arabe) et ce pour
nos clients trangers. La dernire chose viter est lutilisation de fichiers de grande
taille.
5.2. Points retenir
Ce que nous avons pu relever de plus important est lutilisation de formes
rectangulaires et dune structure de tableau dans tous les sites sujets de notre
analyse. De plus tous ces sites ont utilis la couleur bleue mme si elle nexiste pas
dans le logo. Pour notre cas, cette couleur nmane pas dun choix arbitraire
puisquelle fait partie des couleurs du logo de lAgence.
-8-
ISAMM 2006
6. Cahier des charges

A la fin de ce chapitre, nous allons numrer les contraintes ergonomiques,
fonctionnelle et esthtiques :
6.1. Contraintes esthtiques
Les principales contraintes esthtiques sont :
La simplicit de l'interface.
La convivialit (facilit d'utilisation de l'application).
L'utilisation des effets des liens (changement de la couleur du lien,

changement d'animation d'une interface a une autre, apparition d'un mot
indicatif....)
Quels que soient les gots en matire artistique, le texte doit toujours rester
lisible par rapport au fond d'cran.
crire des phrases courtes la construction simple.
La lecture de texte sur cran se rvle vite fatigante. Des lignes de texte de 60
90 caractre maximum semblent tre un bon compromis surtout si nous
savons que la tendance est aux rsolutions d'cran de 800 x 600 et 1024 x
768 ...
Une navigation aise avec des liens simples et personnaliss.

6.2. Contraintes ergonomiques
S'assurer de l'harmonie graphique de chaque page.
Privilgier la clart et la lisibilit.
L'utilisation d'un nombre limit de couleurs met en valeur la force d'une charte
graphique.
Prvoir une possibilit de retour la page d'accueil chaque page. Un

utilisateur perdu est un utilisateur du.
-9-
ISAMM 2006
Utilisation des couleurs significatives et qui refltent l'aspect fonctionnel de

l'application.
6.3. Contraintes fonctionnelles
Nous ne pouvons pas passer dun service un autre que par le menu situ
sur la plage daccueil.
La rgle des trois clics. Toute information doit tre accessible en 3 clics de
souris maximum partir de la page d'accueil.
La rgle des trois crans. La longueur d'une page ne doit pas dpasser 3 5
crans (grand maximum) pour limiter le dfilement vertical.
Le premier cran d'un page doit rassembler le maximum de l'information et

inviter en poursuivre la dcouverte. Un pourcentage important des
utilisateurs nutilise pas ou peu le dfilement vertical.
Le dfilement horizontal de la page est viter (sinon proscrire) quelle que

soit la rsolution d'cran de lutilisateur.
Un cran ne doit tre rempli qu' 50% de texte et de graphiques. Le reste est
consacr au fond d'cran.
Nous avons aussi utilis lexcution automatique du Cd Card (Autorun).
- 10 -
ISAMM 2006
DEUXIEME CHAPITRE : Conception
Une interface est, par dfinition, une jonction entre deux lments dun systme
informatique. Depuis larrive des techniques du multimdia, le design dinterface est
devenu une discipline part entire qui requiert un large ventail de comptences :
dveloppeurs,
designers,
typographes,
graphistes,
cogniticiens,
traducteurs,
rdacteurs... Le design dune interface utilisateur et son illustration graphique

demandent une comprhension des principes de manipulation et des pratiques de
lutilisateur final. Un design dinterface russi est ergonomique : il doit guider et
informer lutilisateur.
En pratique linterface est constitue dune suite dobjets visuels aux fonctions
souvent multiples qui permettent lutilisateur dinteragir avec le programme
multimdia. Lobjectif premier dun design dinterface est de crer chez lutilisateur un
modle mental appropri et cohrent du contenu du programme et de son
fonctionnement.
1. Conception du Site Web
1.1. Synopsis du Site web
1.1.1. Objectifs du site
Assurer la prsence de lAgence sur le net
Avoir un support promotionnel prsenter aux clients actuels et futurs
Attirer de nouveaux clients grce au site web

1.1.2. Cibles du site
Les internautes cherchant une information sur la publicit sur inetrnet en

Tunisie
Les clients actuels de lAgence
Les partenaires de lAgence
Les prospects
- 11 -
ISAMM 2006
1.1.3. Charte graphique
Les caractristiques du produit : site web en trois langues et CD Card en

franais.
Spcifications du commanditaire :
- Utilisation des couleurs du logo :
Bleu clair
Bleu fonc
- Utilisation de formes rectangulaires

- Utilisation des polices :
Police
Verdana
Monotype corsiva
Brush Script MT
Utilisation
Pour le corps du texte
Pour le message publicitaire de lAgence
Pour les titres
Taille
9 px
16 px
18 px
- Eviter les animations flash pour acclrer le tlchargement des

pages du site.
1.1.4. Organigramme et schma de navigation
Dans ce site nous allons utiliser une architecture en rseau. Ce type de structure
exploite la pleine puissance des liens vers des informations lintrieur du site et
vers des informations situe dans dautres sites de la toile.
Fig5 : Schma de navigation du site web
Organigramme
- 12 -
ISAMM 2006
Accueil
Prsentation
Prestations&Services
FAQ
Assistance et prparation des cahiers de

charges
Conception des sites web et dveloppement
des applications Intranet
Contact
E-mailing
Accueil
Rfrencement
Informations lgales
Positionnement
Email
Conception sites web

CD Rom & CD Card
Bannires Publicitaires
E-mail marketing
CAO / DAO & Impression

Analyse Des Donnes
Gestion de contenu
Analyse statistique et modlisation

conomtrique
Assistance Technique
Testimoniaux
Outils Gratuits
Nos Publications
Nos Rfrences
- 13 -
ISAMM 2006
1.2. Conception Graphique du Site Web

La ralisation du site http://www.web-2-com.net a dbut en aot 2006. Nous allons
prsenter dans ce qui suit les tapes de ce travails.
La conception du site est base sur une maquette choisie par le commanditaire,
cette maquette est la suivante :
Fig6 : Maquette originale du site web
En analysant cette maquette, la premire chose qui attire lattention est les formes
circulaires du logo. Pour cela, nous pouvons noter les points forts et les points faibles
suivant :
1.2.1. Points forts
-
Lutilisation des couleurs du logo dans la conception de la page.
Contenu clair et lisible.
Lutilisation du bleu et des formes rectangulaire pour montrer les srieux de

lAgence.
- 14 -
ISAMM 2006
1.2.2. Points faibles

-
Lutilisation des formes rectangulaires alors que le logo est base de formes
circulaires.
Lutilisation dimages dans la bannire sans relation avec le domaine du

webmarketing : les lunettes et les pices de monnaie.
Les nuances du vert utilises pour la scroll barre.
Pour cela, avant de commencer la ralisation, jai propos au commanditaire du site

les maquettes suivantes en essayant dinclure les formes circulaires :
Maquette 1
Fig6 : Maquette 1 propose pour le site web
Dans cette maquette, jai essay de garder la structure dun tableau, les couleurs du
logo tout en insrant des lignes arrondis pour rappeler les formes circulaires du logo.
Jai insr les liens hypertextes principaux en haut et bas de page.
Pour simplifier la page, jai utilis trois types dimages :
-
Le logo de lAgence dans le coin haut gauche de la page.
Une image dordinateur en relation avec le domaine dactivit de lAgence.
- 15 -

-
ISAMM 2006
Limage dun client pour la rubrique Testimoniaux.
Maquette 2
Dans cette deuxime maquette :

-
Jai insr les formes circulaires dans les boutons, la forme arrondie de la
rubrique Testimoniaux et dans la bannire.
Jai gard la structure dun tableau utilise par tous les sites professionnels du
domaine.
Jai utilis des couleurs du logo avec insertion dun gris claire couleur
gnralement associe au domaine informatique.
Pour le logo, il tait prfrable de le mettre au coin bas droit de la page et ce

vue les couleurs de la bannire proches de ceux du logo. Il ne sera pas donc
bien lisible sil tait insr la bannire.
- 16 -
ISAMM 2006
Maquette 3
Cette maquette est inspire de la maquette originale propose par le commanditaire

avec quelques modifications savoir :
-
Modifier les liens selon les domaines dactivit de la dite Agence
Apporter des modifications sur la bannire en ajoutant une animation gif :

cette animation t cre par le logiciel danimation swish puis converti en
gif anim par le logiciel swf2gif.
Ajouter un lien pour la newsletter
Ajouter une animation sur les services : ralis avec Photoshop puis
ImageReady pour avoir un format gif anim.
Ajouter une animation simple pour insrer le logo qui doit tre prsent dans
toutes les pages du site. Cette animation a t ralise par le logiciel Gif
Animator.
- 17 -
ISAMM 2006
Maquette 4
Pour la dernire maquette, jai essay dinsrer plus de formes circulaires avec un
contenu textuel simple et uniquement les liens hypertextes principaux.
Il a t convenu de garder la maquette 3 inspire du modle original.
Pour la bannire propose par le commanditaire, jai essay dinsrer quelques
modifications pour rapprocher la dite bannire du domaine du webmarketing :
Bannire originale
Fig10 : Bannire originale du site web
Nous remarquons la prsence non justifie de limage des pices de monnaie ainsi
que celle de limmeuble.
- 18 -
ISAMM 2006
Propositions 1 : bannire anime.
Fig11 : Bannire 1 propose pour le site web
Cette premire bannire est base sur le logo avec une animation texte avec le
slogan et les services de lAgence.
Propositions 2
Pour cette bannire, jai chang limage des pices de monnaie par celle de flches
pour faire rfrence au mailing cibl qui un des domaines dactivit de lAgence.
Quant limage de limmeuble, je lai chang par celle dun homme travaillant sur un
ordinateur. Jai aussi chang limage du clavier par une autre prsentant un plan
rapproch des boutons dun clavier.
Propositions 3
Animation Flash
Pour cette bannire, jai insr le logo de lAgence tout en utilisant un fond blanc
pour des raisons de lisibilit. Jai utilis aussi limage des boutons rapprochs dun
clavier. Pour limage de lhomme au coin droit, il sagit dune animation Gif anime
prsentant les diffrents services de lAgence.
Selon la volont du directeur de lAgence, jai due rutiliser la photo des pices de
monnaies dans la bannire en gardant lanimation flash ce qui a donn le rsultat
suivant :
- 19 -
ISAMM 2006
Fig14 : Bannire finale du site web
Maquette de la version finale du site web
Fig15 : Maquette finale du site web
- 20 -
ISAMM 2006
2. Conception du CD Card
2.1. Synopsis du CD Card
2.1.1. Objectif du CD Card
Avoir un support promotionnel prsenter aux clients actuels et futurs
2.1.2. Cibles du CD Card
Les clients actuels de lAgence
Les partenaires de lAgence
Les prospects
2.1.3. Charte graphique
Les caractristiques du produit : CD Card en franais.
Spcifications du commanditaire :
- Utilisation des couleurs du logo :
Bleu clair
Bleu fonc
- Utilisation de formes rectangulaires

- Utilisation des polices :
Police
Verdana
Monotype corsiva
Brush Script MT
Utilisation
Pour le corps du texte
Pour le message publicitaire de lAgence
Pour les titres
Taille
12 px
23 px
23 px
2.1.4. Organigramme et schma de navigation

Pour le CD Card nous allons utiliser la mme architecture en rseau utilise pour le
site web.
Organigramme
- 21 -
ISAMM 2006
Accueil
Accueil
Prsentation
Services
Informations lgales
Assistance et prparation des cahiers de

charges
Testimoniaux
Contactez Nous
Conception des sites web dveloppement des

applications Intranet
E-mail marketing
Gestion de contenu
Analyse statistique et modlisation

conomtrique
- 22 -
ISAMM 2006
2.2. Conception graphique du CD Crad

Jai propos au directeur de lAgence les maquettes suivantes pour choisir lune
dentre elle pour le CD Card de lAgence :
Maquette 1
Fig15 : Maquette 1 du CD Card
Dans cette maquette, jai utilis :

-
Les couleurs du logo
Des formes rectangulaires avec les coins arrondis.
Le logo dans le coin gauche haut de la page
Les liens droite de la page sous forme de boutons.
- 23 -
ISAMM 2006
Maquette 2
Cette maquette est base sur une structure de tableau contenant du texte et
dimages. Les couleurs du texte sont celle du logo avec un fond blanc pour avoir une
page lisible et assez simple.
Maquette 3
- 24 -
ISAMM 2006
Pour la troisime maquette, jai utilis les formes rectangulaires avec les couleurs du
logo, une structure de tableau avec une animation du ct gauche de la page.
Il a t convenu de garder la maquette 3 en apportant les modifications suivantes :
Remplacer limage par une animation contenant les services de lAgence.

Avec des animations sur les rfrences dans les pages internes du CD, ces
animations doivent tre des liens vers les travaux de lAgence hbergs sur le
serveur du site de lAgence.
taler les liens sur la largeur de la page.
Insrer un fond musical.
Insrer les liens : Accueil, Prsentation, Nos services, Informations lgales,

Testimoniaux, Contactez nous et Nous connatre.
Maquette finale du CD Card
Fig18 : Ecran finale du CD Card
- 25 -
ISAMM 2006
TROISIEME CHAPITRE : Ralisation du projet

1. La Ralisation du site Web
1.1. Prparation du contenu textuel
La premire tape de ralisation du projet tait la prparation du contenu textuel du
site et ce partir des document techniques de lAgence, de linternet ainsi que de
mes observations durant le stage.
Aprs avoir termin la prparation du texte en langue franaise, jai due le traduire en
anglais ainsi quen arabe vue que le site est en trois langues.
1.2. Logiciels utiliss
Adobe Photoshop : pour le traitement des images ainsi que la cration des
animations simples offre du mois, les services .
DreamWeaver : pour la cration des pages web.
Front page : pour la manipulation du code HTML.
Swish : pour la cration de la partie anime de la bannire puisquil est plus facile de
manipuler une animation dimages par le logiciel Swich que par Falsh.
En effet, Swish fonctionne semblablement flash, par consquent fonctionne avec
plusieurs scnes si vous le dsirez, lorsque vous enregistrez, vous enregistrez une
ressource, mais il vous faut exporter l'animation, ce qui apparatra sur internet.
GIF Animator : utilis aussi pour la cration de bannire anime pour avoir une
animation format GIF beaucoup plus rapide tlcharger dans un site web.
Visual GIF Animator est un outil GIF (format d'change de graphiques) et AVI (audio
vido mlangs) facile utiliser et rapide. Son interface utilisateur vous rend
indpendant des cadres et vous laisse concevoir des bannires, des boutons, des
lignes... et ce en quelques minutes seulement.
Magic Swf2Gif : pour convertir lanimation de la bannire du format SWF au format
GIF anim.
- 26 -
ISAMM 2006
Magic Swf2Gif est un utilitaire puissant qui convertit les fichiers SWf de Macromedia
en GIF anim. Avec Magic Swf2Gif, un fichier GIF dans n'importe quelle rsolution et
n'importe quel taux de frames peut tre cre a partir du fichier SWF, donc nous
pouvons montrer l'image des fichiers SWF aux utilisateurs qui n'ont pas le module
d'extension de Flash.
Logiciel FTP client : pour hberger le site sur le serveur.
Yooda Map : pour gnrer le fichier XML du site. Yooda Map est un logiciel gratuit
qui gnre automatiquement les fichiers Google SiteMaps. YoodaMap propose, dans
sa version bta, les fonctionnalits suivantes :
Cration automatique du fichier Google SiteMaps.
Exclusion des rpertoires ou des fichiers prcis pour le crawl.
limination des paramtres de sessions.

1.3. Implmentation et test
Avant dhberger notre site, nous avons effectu une vrification des liens internes et
externes du site, pour cela nous avons utiliser le logiciel Xenu's Link Sleuth.
Xenu's Link Sleuth (TM) est un logiciel qui vrifie les liens internes et externes de
tout site Web, y compris les liens des images, des cadres, des plug-in, des scripts,
etc... Il donne les codes d'erreur des liens briss, et produit un plan du site analys.
Il permet d'identifier les erreurs dans les liens internes ou externes, de reprer les
fichiers manquants et de s'assurer que les liens externes existent toujours.
1.4. Le fichier robots.txt
Le fichier robots.txt est un fichier texte contenant des commandes utilises par les
robots d'indexation des moteurs de recherche afin de leur prciser les pages qui
peuvent ou pas tre indexes. Ainsi tout moteur de recherche commence
l'exploration d'un site web en cherchant le fichier robots.txt la racine du site.
- 27 -
ISAMM 2006
Ces instructions se rsument autoriser ou empcher la lecture de certaines pages

du site, cest utile en cas dutilisation de frames ou pour verrouiller laccs des
pages que vous ne souhaitez pas indexer pour diverses raisons.
Cependant, plus le moteur de recherche aura index de pages dun site plus sa
visibilit augmente sur le web.
Avec <meta name= robots content=noindex> nous interdisons un moteur de
recherche de transmettre la page en question sa base de donnes.
Avec <meta name= robots content=index> nous permettons un moteur de
recherche de transmettre la page en question sa base de donnes.
Avec <meta name= robots content=nofollow> nous permettons un moteur de
recherche de transmettre la page en question sa base de donnes en ignorant les
liens contenu dans la mme page.
Avec <meta name= robots content=follow> nous permettons un moteur de
recherche de transmettre la page en question sa base de donnes en indexant les
liens contenu dans la mme page.
Notons que nous pouvons combiner les commandes prcdentes, bien que
certaines soient redondante : index, follow , index, nofollow , noindex,
follow , noindex, nofollow .
Le fichier robots.txt de notre site :
User-agent: *
Disallow:
Cet exemple de fichier permet lindexation de toutes les pages du site.

1.5. Prparation du fichier Sitemap.xml
Ce fichier est utile pour soumettre le site chez le moteur de recherche Google. En
effet, Google propose un nouveau service : Google SiteMaps. Ce dernier, prsent
comme un service titre exprimental, a pour vocation de faciliter lindexation des
pages dun site par les robots de Google.
- 28 -
ISAMM 2006
La dcouverte des pages dun site, dautant plus lorsquil est rcemment cr, peut
tre un processus extrmement long. Les robots doivent tout dabord trouver ce
dernier partir dun lien provenant dun autre site. Une fois la page analyse et les
liens vers les autres pages trouvs, le robot continuera la dcouverte du site. Ce
processus, notamment pour un gros site, peut tre extrmement long. Ne parlons
pas des difficults lies la rindexation des modifications dun site. Google
SiteMaps a pour principe de recenser, dans un fichier XML, lensemble des urls dun
site, et ventuellement la date de modification de ces dernires. De ce point de vue,
Google SiteMaps est une bonne ide pour un moteur plus actuel et plus ractif.
Le fonctionnement de Google SiteMaps est trs simple, et se droule en trois temps :
Crer un ou des fichiers XML contenant les urls du site (Avec YoodaMap par
exemple) et respectant le protocole expliqu ci-dessous.
Vous devez mettre le fichier XML ainsi gnr sur votre site en respectant les
contraintes demplacements et de taille.
Soumettre le fichier SiteMap Google.
Fig19 : Cration fichier XML avec Yooda Map
- 29 -
ISAMM 2006
1.6. Hbergement du site et nom du domaine du site

Un nom de domaine est une "adresse" qui permet de retrouver facilement un site
Internet sans devoir apprendre par coeur des sries de chiffres difficiles
mmoriser.
Un nom de domaine, est constitu de plusieurs lments :
La racine : qui est en principe le nom de lentreprise ou de son activit. Ce

nom peut tre compos dun ou plusieurs mots spars ou non par un tiret,
web-2-com dans notre cas.
Une extension ou suffixe spare de la racine par un point, exp : .net
L'ensemble accol formant le nom de domaine, exp : web-2-com.net
Une adresse Internet forme par le nom de domaine prcd par les trois W
qui signifient World Wide Web. Pour notre cas ladresse est la suivante : www.
web-2-com.net.
Notre site a t hberg sur le serveur de lAgence via un logiciel ftp client. Les
tapes dune connexion ftp sont les suivantes :
Appeler le programme et ouvrir une session.
Fig20 : Connexion FTP
- 30 -
ISAMM 2006
Cliquer sur : file/connect.
Une 2me fentre va souvrir : Cliquer sur New sites profile.
Une 3me fentre va souvrir : Cela implique que l'on connat le nom du serveur
et qu'on y a accs par un nom d'utilisateur et un mot de passe (ou
ventuellement en anonyme en cochant la case ad-hoc.)
Fig21 : Cration compte FTP
Si la connexion est accepte, deux fentres apparaissent. En gnral, la

fentre de gauche permet d'accder aux fichiers en local et la fentre de
droite, d'accder aux fichiers qui sont sur le serveur. Quant la fentre du
haut, elle liste les commandes effectues durant la session.
Fig22 : Chargement sur serveur distant
- 31 -
ISAMM 2006
Le systme de navigation est similaire celui du gestionnaire de fichiers

Windows.
Pour transfrer un dossier ou un fichier, il faut le slectionner. La flche qui se

trouve au milieu, entre les deux fentres, est alors active. Une fois que l'on
est sr de se trouver dans le bon rpertoire d'arrive, il suffit d'appuyer sur
cette flche pour effectuer le transfert.
- 32 -
ISAMM 2006
2. La ralisation du CD Crad
2.1. Ralisation du CD Card version Flash
2.1.1. Logiciels utiliss
Flash 8 : pour la cration de lanimation.
Adobe Photoshop : pour le traitement des images.
IrfanView : pour la cration de licne du CD que nous voulons afficher lors de
louverture du CD Card.
IrfanView est une visionneuse compacte et trs facile utiliser. Elle permet de
visualiser rapidement une multitude de formats de fichiers graphique, vido et audio.
Ainsi, les formats de fichiers suivant peuvent tre ouverts : JPG, GIF, PhotoCD,
ANI/CUR, TIFF, ICO/ICL/EXE/DLL, SWF (Flash), WAV, MP3, ASF, MOV, WMF,
mais galement les formats /NOL/NGG/NSL/OTB/GSM utiliss par les tlphones
Pour crer licne du CD, jai essay dutiliser le logo de lAgence
mais limage ntait pas trop lisible, pour a nous avons opt pour le
mot WEB 2 COM avec les couleurs de lAgence.
2.1.2. Autorun et fichier ico
LAutorun est une spcification propre aux systmes dexploitation Windows qui
permet dautomatiser les procdures de lancement ou dinstallation dun programme.
Rappelons que nous pouvons dsactiver temporairement la fonctionnalit Autorun en
gardant la touche Maj enfonce au moment o nous insrons le disque. Les fichiers
suivants sont requis :
Un fichier nomm Autorun.inf
Un fichier excutable.
Le fichier Autorun.inf doit tre plac la racine de notre CD. Nous pouvons crer
notre premier fichier Autorun.inf dans un diteur de texte quelconque comme le Blocnotes Windows. Sa structure ressemble fortement celle dun fichier .ini avec des
- 33 -
ISAMM 2006
sections appeles "cls" et, lintrieur de chacune delles, un certain nombre de

commandes.
Voici le dtail des commandes autorises pour la section [Autorun] :
Defaulticon : dfinit licne par dfaut pour lapplication spcifie.
Icon : dfinit le chemin vers le fichier icne contenu dans un fichier

excutable. Ce sera le nom du fichier, suivi dune virgule et du numro dindex
ou le nom d'un fichier .ico. Cette icne saffiche dans lExplorateur la place
de licne standard attribu au CD-Rom. Elle doit tre place dans le mme
rpertoire que le fichier excutable dfini par lentre Open.
Label : dfinit le texte qui sera affich dans lExplorateur quand le disque sera
insr, par exemple label= tiquette_Du_Disque.
Open : dfinit le nom et lemplacement de lapplication qui sera

automatiquement lance. Il est possible dajouter les commutateurs propres
lapplication qui est spcifie.
Shell : dfinit la commande par dfaut. La variable verb correspondant la

commande de menu. La syntaxe employe est shell=verb.
Shell\Verb : permet dajouter une commande personnalise au raccourci

pointant vers le disque.
Voyez cet exemple :
shell\verb\command=Nom_Fichier.exe
shell\verb=Texte_Du_Menu
La premire entre associe la variable verb une commande. Ce sera aussi
le texte qui sera affich dans le raccourci. Nom_Fichier.exe reprsente
lemplacement et le nom du fichier excutable.
La deuxime entre permet de personnaliser le texte qui sera affich dans le
raccourci pointant vers le disque.
- 34 -
ISAMM 2006
Shellexecute : permet d'ouvrir directement un fichier ( partir du moment que

l'utilisateur possde l'application correspondante) : shellexecute=index.htm
Le fichier autorun.inf de notre CD Card :

[autorun]
open=cd-web2com.exe
icon=web-2-com.ico
2.1.3. Duplication
La gravure et la cration des copies du CD Card pour les donnes aux clients de
lAgence.
2.1.4. Impression
Aprs la gravure du CD Crad, nous avons cre la jaquette du CD pour limprimer par
la suite sur le CD.
Aperu de la jaquette du CD Card
Fig23 : Jaquette du CD Card
- 35 -
ISAMM 2006
2.2. Ralisation du CD Card version CHM

2.2.1. Logiciel utilis
HTML Help Workshop : est comme son nom l'indique un logiciel qui va nous
permettre de cre des fichiers d'aide du type Windows 98 et plus. Nous pouvons
donc cre des fichiers d'aide mais surtout diter les projets obtenus aprs
dcompilation d'un fichier HTML.
2.2.2. tapes de ralisation
Pour la version CHM, les tapes de ralisation sont les suivantes :
Supprimer les codes java script pour les liens publicitaire de Google.
Insrer une frame dans la page index pour y insrer un fond musical, qui est
le mme utilis dans la version Flash du CD card. Jai utilis un frame (de
taille 0px/0px), donc il ne sera pas visible, pour avoir un son tout au long de la
navigation dans le CD en vitant le rebobinage du son chaque fois que le
navigateur change de page.
Utiliser le logiciel HTML Help Workshop pour la compilation du site web de

Web 2 Com.
Paramtrage de conversion
Fig24 : Interface du logiciel HTML Help Workshop
- 36 -
ISAMM 2006
Une fentre de paramtrage apparatra pour

y enregistrer le nom du projet.
Fig25 : Paramtrage HTML Help Workshop
Prise dcran du CD Card en CHM
Fig26 : Prise dcran du CD Card en CHM
- 37 -
ISAMM 2006
3. Calendrier de ralisation
Notre projet sest droul durant les deux mois de aot et septembre 2006 et ce
selon le calendrier suivant :
Aot 2006
re
1
semaine
me
2
semaine
me
3
semaine
Septembre 2006
me
4
semaine
re
1
semaine
me
2
semaine
me
3
semaine
me
4
semaine
Contenu textuel
Prparation liens
Collecte dimages
Version anglaise et arabe
Animations
Hbergement
- 38 -
ISAMM 2006
CONCLUSION
Ce stage prsente pour moi une relle occasion dapprendre et de faire un premier
pas vers le monde du multimdias, toujours en volution.
Mon stage ma permis ainsi de toucher diffrentes techniques web tel que
lhbergement et le rfrencement des sites web. De plus, jai pris connaissance des
diffrentes mthodes de marketing permettant la promotion dune socit sur le
web : cration des bannires, des animations, lchange des liens et le-mailing.
En outre, ce projet a t loccasion dappliquer les tapes du processus global de
dveloppement dune application informatique, plus spcifiquement une application
Web.
Enfin, jestime que jai russi atteindre les objectifs tracs pour ce stage de fin
dtudes du Mastre en Multimdias et Art de lImage de lISAMM.
Par ailleur, jai eu loccasion durant ce stage de participer des activits de
lentreprise en dehors de mon projet. Jai contribu des campagnes de-mailing en
ralisant la maquette graphique, la cration du code HTML et lenvoi avec le logiciel
Valen Emailer . Jai aussi travaill sur le CD Crad de lAgence matrimoniale
Suprme Relation ainsi que sur la version anglaise du site www.biocurethalasso.com.
- 39 -
ISAMM 2006
BIBLIOGRAPHIE
http://cyberzoide.developpez.com/win/autorun/
http://www.yooda.com/outils_referencement/Yooda_map.php
http://www.wikipedia.org/
http://www.lesmoteursderecherche.com/
http://www.hotline-pc.org/menu-cd.htm
- 40 -
ISAMM 2006
ANNEXE
Exemples de codes utiliss pour le projet

Code pour modifier la couleur de la scroll barre dun navigateur web
<STYLE>{
scrollbar-arrow-color:99FF99;
scrollbar-shadow-color:32CBCD;
scrollbar-face-color:2E2EAB;
scrollbar-highlight-color:99FF99;
scrollbar-darkshadow-color:99FF99;
.Style1 {
color: #47A328;
font-weight: bold;
}
.Style1 {
color: #47A328;
font-weight: bold;
}
</STYLE>
<script language="JavaScript" type="text/JavaScript">
<!-function MM_swapImgRestore() { //v3.0
var
i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var
i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new
Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src;
x.src=a[i+2];}
}
//-->
- 41 -
ISAMM 2006
</script>

<!-infoscroll(100,1)
// -->
</script>
Code pour contrle de son dans une animation flash
onClipEvent(load)
{
_root.soundstatus="on";
_root.mySound = new Sound(_level0);
_root.mySound2 = new Sound(_level1);
maxvolume=100;
minvolume=0;
}
onClipEvent(enterFrame)
{
if(_root.soundstatus=="on") {step=5}
if(_root.soundstatus=="off") {step=-5}
maxvolume+=step;
if (maxvolume>100) {maxvolume=100;}
if (maxvolume<0) {maxvolume=0;}
_root.mySound.setVolume(maxvolume);
_root.mySound2.setVolume(maxvolume);
}
- 43 -

Mémoire Mastere PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Mémoire Mastere PDF

Încărcat de

Drepturi de autor:

Formate disponibile

Ministre de lEnseignement suprieur

de la recherche scientifique et de la Technologies

Projet de fin dtudes

Travail ralis par :

Anne universitaire 2002-2003

Je remercie tout dabord M. Nobel El Houssine BOUBAKER qui ma

A ceux que jaime le plus au monde, mes parents.

A tous ceux que jaime et qui maiment

Projet Multimdias Web 2 Com

Dveloppement de visibilit dans les moteurs de recherche

CD Rom & CD Card

Vente d'espaces pour les bannires publicitaires

Projet Multimdias Web 2 Com

Assistance et prparation des cahiers de charges

Conception des sites web et dveloppement des applications Intranet

Soumission des sites web

Analyse statistique et modlisation conomtrique

Gestion de la relation client : Call Center

Valeurs ajoutes de lAgence :

Projet Multimdias Web 2 Com

PREMIER CHAPITRE : Etude pralable

Fig1 : Ecran du site de lAgence ABC Xebmarketing

En analysant le site de lAgence ABC Xebmarketing, nous avons pu dgager

Diversit des rubriques.

Contenu clair et bien prsent dans une structure de tableau.

Projet Multimdias Web 2 Com

Lutilisation des formes rectangulaires et de la couleur bleue pour donner une

Le contenu nest pas centr sur la page.

Un espace de lien sur le ct gauche de la page qui cre un dsquilibre

Lutilisation non justifie de limage de deux femmes.

Petite taille de lcriture.

Projet Multimdias Web 2 Com

Fig2 : Ecran du site de lAgence ALCOM

En analysant le site de lAgence ACLOM, nous avons pu dgager quelques points

Projet Multimdias Web 2 Com

2.1. Points Forts

Contenu clair et bien prsent dans une structure de tableau.

La page est centre sur la fentre du navigateur.

Lutilisation des formes rectangulaires et de la couleur bleue pour donner une

La page est longue sans pour autant avoir de contenu consistant.

Lexistence despace vide en bas de page.

Les liens de la bannire ne fonctionnent pas.

La bannire et lespace publicitaire prennent trois quarts de la page alors que

Site en une seule langue.

Fig3 : Ecran du site de lAgence ES2i

Projet Multimdias Web 2 Com

Contenu clair et bien prsent.

Harmonie des couleurs.

Diversit des rubriques.

La page est centre sur la fentre du navigateur.

Lexistence despace vide.

Site en une seule langue.

La rubrique newsletter est une image non fonctionnelle.

Lexistence de liens non fonctionnels.

Fig4 : Ecran du site de lAgence GENERAL MEDIA Co

En analysant le site de lAgence GENERAL MEDIA Co, nous avons pu dgager

Projet Multimdias Web 2 Com

4.1. Points Forts

Contenu clair et bien prsent dans une structure de tableau.

Harmonie des couleurs.

Diversit des rubriques.

Les pages prsentent un contenu textuel charg.

Site en une seule langue.