Projet de fin d`études Site Web Agence de Webmarketing WEB 2 COM

Transcription

Ministère de l’Enseignement supérieur
de la recherche scientifique et de la Technologies
Université de La Mannouba
Institut Supérieur des
Arts Multimédias
Projet de fin d’études
Site Web
Agence de Webmarketing
WEB 2 COM
www.web-2-com.net
Travail réalisé par :
SOUMAYA ATTIA
Encadré par :
M. Nobel El Houssine BOUBAKER
Année universitaire 2002-2003
REMERCIMENTS
Je remercie tout d’abord M. Nobel El Houssine BOUBAKER qui m’a
accepté comme stagiaire et qui a encadré ce projet de fin d’études.
Je remercie aussi mon amie Mariem pour toute l’aide qu’elle m’a apportée
durant cette année universitaire.
Enfin, je n’oublierai pas de remercier tous ceux qui m’ont aidé de prés ou de
loin à réaliser ce travail et tout particulièrement
Mme Ahlem BOUZIRI
de l’Institut Supérieur des Arts Multimédias de La Mannouba.
DEDICACES
A ceux que j’aime le plus au monde, à mes parents….
A ma deuxième famille la famille BEN OUALI et particulièrement ma
tante SALOUA
A mes deux sœurs et amies IKRAM et RIM
A mes deux rayons de soleil AYA et AMAL
A tous ceux que j’aime et qui m’aiment…
SOUMAYA
Projet Multimédias Web 2 Com
ISAMM 2006
INTRODUCTION
Être présent sur Internet est devenue une réalité fréquente de nos jours. De ce fait,
toute entreprise qui se respecte cherche à assurer sa présence sur le réseau
mondial. Pour cela, une entreprise peut assurer cette présence par ses propres
moyens ou sous-traiter chez une Agence de Webmarketing.
La création d’un site web nécessite aussi bien des professionnels en communication
que des experts en création de sites et ce pour avoir un message communicationnel
bien élaboré au risque de se trouver présente sur Internet sans pour autant réaliser
le profit escompté.
L’objectif de ce stage effectué à l’Agence de Webmarketing WEB 2 COM, du 15
juillet au 15 octobre 2006, est de concevoir et de réaliser le site web de l’Agence
ainsi que son CD Card. Le but de ce travail est d’assurer sa présence sur le web en
vue de promouvoir l’Agence auprès des ses clients actuels et de ses prospects.
Pour cela, quelques étapes sont nécessaires à savoir : la préparation du contenu
textuel, la conception de la maquette graphique, la réalisation et l’hébergement.
Dans ce rapport nous allons détailler les étapes de conception et de réalisation de ce
projet, en répondant à quelques questions à savoir : Quelles informations présenter
sur le site ? Quels sont les meilleurs logiciels à utiliser pour la création de ces deux
moyens de communication ?
Présentation De Web 2 Com
WEB 2 COM est une Agence tunisienne de webmarketing, basée à Sousse,
travaillant dans le domaine des Nouvelles Technologies de l'Information et de la
Communication (NTIC).
Cette Agence opère dans les divers domaines du webmarketing :

Développement de visibilité dans les moteurs de recherche

CD Rom & CD Card

Vente d'espaces pour les bannières publicitaires
-1-
ISAMM 2006

Assistance et préparation des cahiers de charges

Conception des sites web et développement des applications Intranet

Soumission des sites web

Référencement professionnel

Positionnement publicitaire

E-mail marketing

Gestion de contenu

Analyse statistique et modélisation économétrique

Gestion de la relation client : Call Center
Valeurs ajoutées de l’Agence :
- 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 cœur du travail de l’Agence.
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 général médias Co. Dans le deuxième chapitre nous allons détailler les étapes de
conception du site web ainsi que du CD Card de l’Agence. Le dernier chapitre sera
consacré à la réalisation des deux supports en question.
-2-
ISAMM 2006
PREMIER CHAPITRE : Etude préalable
Vu la conjoncture actuelle en Tunisie et l’évolution rapide que connais le domaine de
la publicité sur internet, il est primordial pour toute Agence travaillant dans ce
domaine d’avoir son propre site internet ainsi que son CD promotionnel.
En effet, la Tunisie compte aujourd’hui plus de 200 Agences travaillant dans le
webmarketing pour ce, la présence sur la toile mondiale devient une priorité pour
attirer de nouveaux clients.
Nous allons dans ce chapitre présenter quelques sites web d’Agences de
communication tunisiennes travaillant dans le même secteur d’activité que l’Agence
Web 2 Com.
1. ABC Xebmarketing
Fig1 : Ecran du site de l’Agence ABC Xebmarketing
En analysant le site de l’Agence ABC Xebmarketing, nous avons pu dégager
quelques points forts et quelques faiblesses.
1.1. Points Forts
-
Diversité des rubriques.
-
Contenu clair et bien présenté dans une structure de tableau.
-3-
-
ISAMM 2006
L’utilisation des formes rectangulaires et de la couleur bleue pour donner une
image de sérieux à l’Agence.
1.2. Points faibles
-
Les versions anglaise et arabe sont des liens vers un autre site
http://www.accesstoebusiness.com/.
-
Le contenu n’est pas centré sur la page.
-
Un espace de lien sur le côté gauche de la page qui crée un déséquilibre
puisqu’il y’a un espace blanc dans le côté droit de la page.
-
L’absence d’animations.
-
L’utilisation non justifiée de l’image de deux femmes.
-
Petite taille de l’écriture.
-4-
ISAMM 2006
2. ALCOM
Fig2 : Ecran du site de l’Agence ALCOM
En analysant le site de l’Agence ACLOM, nous avons pu dégager quelques points
forts et quelques faiblesses.
-5-
ISAMM 2006
2.1. Points Forts
-
-
La page est centrée sur la fenêtre du navigateur.
-
L’utilisation des formes rectangulaires et de la couleur bleue pour donner une
image de sérieux à l’Agence.
2.2. Points faibles
-
La page est longue sans pour autant avoir de contenu consistant.
-
L’utilisation d’icônes non lisibles des travaux de l’Agence sans que ces icônes
soient des liens vers les travaux en question.
-
L’existence d’espace vide en bas de page.
-
Les liens de la bannière ne fonctionnent pas.
-
La bannière et l’espace publicitaire prennent trois quarts de la page alors que
généralement les internautes ne préfèrent pas utiliser l’ascenseur pour lire une
page.
-
Site en une seule langue.
3. ES 2i
Fig3 : Ecran du site de l’Agence ES2i
-6-
ISAMM 2006
En analysant le site de l’Agence ES2i, nous avons pu dégager quelques points forts
et quelques faiblesses.
3.1. Points Forts
-
Contenu clair et bien présenté.
-
Harmonie des couleurs.
-
-
La page est centrée sur la fenêtre du navigateur.
3.2. Points faibles
-
L’existence d’espace vide.
-
-
La rubrique newsletter est une image non fonctionnelle.
-
L’existence de liens non fonctionnels.
4. GENERAL MEDIA Co
Fig4 : Ecran du site de l’Agence GENERAL MEDIA Co
En analysant le site de l’Agence GENERAL MEDIA Co, nous avons pu dégager
quelques points forts et quelques faiblesses.
-7-
ISAMM 2006
4.1. Points Forts
-
-
Harmonie des couleurs.
-
4.2. Points faibles
-
La page n’est pas centrée sur le navigateur ce qui crée un espace gris vide du
côté droit de la page.
-
Les pages présentent un contenu textuel chargé.
-
-
La page est lente au téléchargement surtout avec la bannière en flash.
5. Synthèse
A la fin de cette étude préalable, nous pouvons pu dégager certains points à éviter et
d’autres qu’il vaut mieux utiliser pour notre projet et ce pour un résultat plus pertinent.
5.1. Points à éviter
La première chose à éviter est la création d’espace vide dans la page. La deuxième
est de créer un équilibre entre le contenu textuel et les images. La troisième chose
est de faire une traduction de notre site en deux langues (anglais et arabe) et ce pour
nos clients étrangers. La dernière chose à éviter est l’utilisation de fichiers de grande
taille.
5.2. Points à retenir
Ce que nous avons pu relever de plus important est l’utilisation de formes
rectangulaires et d’une structure de tableau dans tous les sites sujets de notre
analyse. De plus tous ces sites ont utilisé la couleur bleue même si elle n’existe pas
dans le logo. Pour notre cas, cette couleur n’émane pas d’un choix arbitraire
puisqu’elle fait partie des couleurs du logo de l’Agence.
-8-
ISAMM 2006
6. Cahier des charges
A la fin de ce chapitre, nous allons énumérer les contraintes ergonomiques,
fonctionnelle et esthétiques :
6.1. Contraintes esthétiques
Les principales contraintes esthétiques 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 goûts en matière 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 révèle vite fatigante. Des lignes de texte de 60
à 90 caractère maximum semblent être un bon compromis surtout si nous
savons que la tendance est aux résolutions d'écran de 800 x 600 et 1024 x
768 ...

Une navigation aisée avec des liens simples et personnalisés.
6.2. Contraintes ergonomiques

S'assurer de l'harmonie graphique de chaque page.

Privilégier la clarté et la lisibilité.

L'utilisation d'un nombre limité de couleurs met en valeur la force d'une charte
graphique.

Prévoir une possibilité de retour à la page d'accueil à chaque page. Un
utilisateur perdu est un utilisateur déçu.
-9-

ISAMM 2006
Utilisation des couleurs significatives et qui reflètent l'aspect fonctionnel de
l'application.
6.3. Contraintes fonctionnelles

Nous ne pouvons pas passer d’un service à un autre que par le menu situé
sur la plage d’accueil.

La règle des trois clics. Toute information doit être accessible en 3 clics de
souris maximum à partir de la page d'accueil.

La règle des trois écrans. La longueur d'une page ne doit pas dépasser 3 à 5
écrans (grand maximum) pour limiter le défilement vertical.

Le premier écran d'un page doit rassembler le maximum de l'information et
inviter à en poursuivre la découverte. Un pourcentage important des
utilisateurs n’utilise pas ou peu le défilement vertical.

Le défilement horizontal de la page est à éviter (sinon à proscrire) quelle que
soit la résolution d'écran de l’utilisateur.

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é l’exécution automatique du Cd Card (Autorun).
- 10 -

ISAMM 2006
DEUXIEME CHAPITRE : Conception
Une interface est, par définition, une jonction entre deux éléments d’un système
informatique. Depuis l’arrivée des techniques du multimédia, le design d’interface est
devenu une discipline à part entière qui requiert un large éventail de compétences :
développeurs,
designers,
typographes,
graphistes,
cogniticiens,
traducteurs,
rédacteurs... Le design d’une interface utilisateur et son illustration graphique
demandent une compréhension des principes de manipulation et des pratiques de
l’utilisateur final. Un design d’interface réussi est ergonomique : il doit guider et
informer l’utilisateur.
En pratique l’interface est constituée d’une suite d’objets visuels aux fonctions
souvent multiples qui permettent à l’utilisateur d’interagir avec le programme
multimédia. L’objectif premier d’un design d’interface est de créer chez l’utilisateur un
modèle mental approprié et cohérent 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 présence de l’Agence sur le net

Avoir un support promotionnel à présenter aux clients actuels et futurs

Attirer de nouveaux clients grâce 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 l’Agence

Les partenaires de l’Agence

Les prospects
- 11 -
ISAMM 2006
1.1.3. Charte graphique

Les caractéristiques du produit : site web en trois langues et CD Card en
français.

Spécifications 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 l’Agence
Pour les titres
Taille
9 px
16 px
18 px
- Eviter les animations flash pour accélérer le téléchargement des
pages du site.
1.1.4. Organigramme et schéma de navigation
Dans ce site nous allons utiliser une architecture en réseau. Ce type de structure
exploite la pleine puissance des liens vers des informations à l’intérieur du site et
vers des informations située dans d’autres sites de la toile.
Fig5 : Schéma de navigation du site web
Organigramme
- 12 -
ISAMM 2006
Accueil
Présentation
Prestations&Services
FAQ
Assistance et préparation des cahiers de
charges
Conception des sites web et développement
des applications Intranet
Contact
E-mailing
Accueil
Référencement
Informations légales
Positionnement
Email
Conception sites web
CD Rom & CD Card
Bannières Publicitaires
E-mail marketing
CAO / DAO & Impression
Analyse Des Données
Gestion de contenu
Analyse statistique et modélisation
économétrique
Assistance Technique
Testimoniaux
Outils Gratuits
Nos Publications
Nos Références
- 13 -
ISAMM 2006
1.2. Conception Graphique du Site Web
La réalisation du site http://www.web-2-com.net a débuté en août 2006. Nous allons
présenter dans ce qui suit les étapes de ce travails.
La conception du site est basée sur une maquette choisie par le commanditaire,
cette maquette est la suivante :
Fig6 : Maquette originale du site web
En analysant cette maquette, la première chose qui attire l’attention est les formes
circulaires du logo. Pour cela, nous pouvons noter les points forts et les points faibles
suivant :
1.2.1. Points forts
-
L’utilisation des couleurs du logo dans la conception de la page.
-
Contenu clair et lisible.
-
L’utilisation du bleu et des formes rectangulaire pour montrer les sérieux de
l’Agence.
- 14 -
ISAMM 2006
1.2.2. Points faibles
-
L’utilisation des formes rectangulaires alors que le logo est à base de formes
circulaires.
-
L’utilisation d’images dans la bannière sans relation avec le domaine du
webmarketing : les lunettes et les pièces de monnaie.
-
Les nuances du vert utilisées pour la scroll barre.
Pour cela, avant de commencer la réalisation, j’ai proposé au commanditaire du site
les maquettes suivantes en essayant d’inclure les formes circulaires :
Maquette 1
Fig6 : Maquette 1 proposée pour le site web
Dans cette maquette, j’ai essayé de garder la structure d’un tableau, les couleurs du
logo tout en insérant des lignes arrondis pour rappeler les formes circulaires du logo.
J’ai inséré les liens hypertextes principaux en haut et bas de page.
Pour simplifier la page, j’ai utilisé trois types d’images :
-
Le logo de l’Agence dans le coin haut gauche de la page.
-
Une image d’ordinateur en relation avec le domaine d’activité de l’Agence.
- 15 -
-
ISAMM 2006
L’image d’un client pour la rubrique Testimoniaux.
Maquette 2
Dans cette deuxième maquette :
-
J’ai inséré les formes circulaires dans les boutons, la forme arrondie de la
rubrique Testimoniaux et dans la bannière.
-
J’ai gardé la structure d’un tableau utilisée par tous les sites professionnels du
domaine.
-
J’ai utilisé des couleurs du logo avec insertion d’un gris claire couleur
généralement associée au domaine informatique.
-
Pour le logo, il était préférable de le mettre au coin bas droit de la page et ce
vue les couleurs de la bannière proches de ceux du logo. Il ne sera pas donc
bien lisible s’il était inséré à la bannière.
- 16 -
ISAMM 2006
Maquette 3
Cette maquette est inspirée de la maquette originale proposée par le commanditaire
avec quelques modifications à savoir :
-
Modifier les liens selon les domaines d’activité de la dite Agence
-
Apporter des modifications sur la bannière en ajoutant une animation gif :
cette animation à été crée par le logiciel d’animation «swish» puis converti en
gif animé par le logiciel « swf2gif».
-
Ajouter un lien pour la newsletter
-
Ajouter une animation sur les services : réalisé avec Photoshop puis
ImageReady pour avoir un format gif animé.
-
Ajouter une animation simple pour insérer le logo qui doit être présent dans
toutes les pages du site. Cette animation a été réalisée par le logiciel Gif
Animator.
- 17 -
ISAMM 2006
Maquette 4
Pour la dernière maquette, j’ai essayé d’insérer plus de formes circulaires avec un
contenu textuel simple et uniquement les liens hypertextes principaux.
Il a été convenu de garder la maquette 3 inspirée du modèle original.
Pour la bannière proposée par le commanditaire, j’ai essayé d’insérer quelques
modifications pour rapprocher la dite bannière du domaine du webmarketing :
Bannière originale
Fig10 : Bannière originale du site web
Nous remarquons la présence non justifiée de l’image des pièces de monnaie ainsi
que celle de l’immeuble.
- 18 -
ISAMM 2006
Propositions 1 : bannière animée.
Fig11 : Bannière 1 proposée pour le site web
Cette première bannière est basée sur le logo avec une animation texte avec le
slogan et les services de l’Agence.
Propositions 2
Pour cette bannière, j’ai changé l’image des pièces de monnaie par celle de flèches
pour faire référence au mailing ciblé qui un des domaines d’activité de l’Agence.
Quant à l’image de l’immeuble, je l’ai changé par celle d’un homme travaillant sur un
ordinateur. J’ai aussi changé l’image du clavier par une autre présentant un plan
rapproché des boutons d’un clavier.
Propositions 3
Animation Flash
Pour cette bannière, j’ai inséré le logo de l’Agence tout en utilisant un fond blanc
pour des raisons de lisibilité. J’ai utilisé aussi l’image des boutons rapprochés d’un
clavier. Pour l’image de l’homme au coin droit, il s’agit d’une animation Gif animée
présentant les différents services de l’Agence.
Selon la volonté du directeur de l’Agence, j’ai due réutiliser la photo des pièces de
monnaies dans la bannière en gardant l’animation flash ce qui a donné le résultat
suivant :
- 19 -
ISAMM 2006
Fig14 : Bannière 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 à présenter aux clients actuels et futurs
2.1.2. Cibles du CD Card

Les clients actuels de l’Agence

Les partenaires de l’Agence

Les prospects
2.1.3. Charte graphique

Les caractéristiques du produit : CD Card en français.

Spécifications 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 l’Agence
Pour les titres
Taille
12 px
23 px
23 px
2.1.4. Organigramme et schéma de navigation
Pour le CD Card nous allons utiliser la même architecture en réseau utilisée pour le
site web.
Organigramme
- 21 -
ISAMM 2006
Accueil
Accueil
Présentation
Services
Informations légales
Assistance et préparation des cahiers de
charges
Testimoniaux
Contactez Nous
Conception des sites web développement des
applications Intranet
E-mail marketing
Gestion de contenu
Analyse statistique et modélisation
économétrique
- 22 -
ISAMM 2006
2.2. Conception graphique du CD Crad
J’ai proposé au directeur de l’Agence les maquettes suivantes pour choisir l’une
d’entre elle pour le CD Card de l’Agence :
Maquette 1
Fig15 : Maquette 1 du CD Card
Dans cette maquette, j’ai 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 basée sur une structure de tableau contenant du texte et
d’images. 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 troisième maquette, j’ai utilisé les formes rectangulaires avec les couleurs du
logo, une structure de tableau avec une animation du côté gauche de la page.
Il a été convenu de garder la maquette 3 en apportant les modifications suivantes :

Remplacer l’image par une animation contenant les services de l’Agence.
Avec des animations sur les références dans les pages internes du CD, ces
animations doivent être des liens vers les travaux de l’Agence hébergés sur le
serveur du site de l’Agence.

Étaler les liens sur la largeur de la page.

Insérer un fond musical.

Insérer les liens : Accueil, Présentation, Nos services, Informations légales,
Testimoniaux, Contactez nous et Nous connaître.
Maquette finale du CD Card
Fig18 : Ecran finale du CD Card
- 25 -
ISAMM 2006
TROISIEME CHAPITRE : Réalisation du projet
1. La Réalisation du site Web
1.1. Préparation du contenu textuel
La première étape de réalisation du projet était la préparation du contenu textuel du
site et ce à partir des document techniques de l’Agence, de l’internet ainsi que de
mes observations durant le stage.
Après avoir terminé la préparation du texte en langue française, j’ai due le traduire en
anglais ainsi qu’en arabe vue que le site est en trois langues.
1.2. Logiciels utilisés
Adobe Photoshop : pour le traitement des images ainsi que la création des
animations simples « offre du mois, les services ».
DreamWeaver : pour la création des pages web.
Front page : pour la manipulation du code HTML.
Swish : pour la création de la partie animée de la bannière puisqu’il est plus facile de
manipuler une animation d’images par le logiciel Swich que par Falsh.
En effet, Swish fonctionne semblablement à flash, par conséquent fonctionne avec
plusieurs scènes si vous le désirez, lorsque vous enregistrez, vous enregistrez une
ressource, mais il vous faut exporter l'animation, ce qui apparaîtra sur internet.
GIF Animator : utilisé aussi pour la création de bannière animée pour avoir une
animation format GIF beaucoup plus rapide à télécharger dans un site web.
Visual GIF Animator est un outil GIF (format d'échange de graphiques) et AVI (audio
vidéo mélangés) facile à utiliser et rapide. Son interface utilisateur vous rend
indépendant des cadres et vous laisse concevoir des bannières, des boutons, des
lignes... et ce en quelques minutes seulement.
Magic Swf2Gif : pour convertir l’animation de la bannière 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 résolution et
n'importe quel taux de frames peut être crée 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 héberger le site sur le serveur.
Yooda Map : pour générer le fichier XML du site. Yooda Map est un logiciel gratuit
qui génère automatiquement les fichiers Google SiteMaps. YoodaMap propose, dans
sa version bêta, les fonctionnalités suivantes :

Création automatique du fichier Google SiteMaps.

Exclusion des répertoires ou des fichiers précis pour le crawl.

Élimination des paramètres de sessions.
1.3. Implémentation et test
Avant d’héberger notre site, nous avons effectué une vérification 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 vérifie 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 brisés, et produit un plan du site analysé.
Il permet d'identifier les erreurs dans les liens internes ou externes, de repérer 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 utilisées par les
robots d'indexation des moteurs de recherche afin de leur préciser les pages qui
peuvent ou pas être indexées. 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 résument à autoriser ou empêcher la lecture de certaines pages
du site, c’est utile en cas d’utilisation de frames ou pour verrouiller l’accès à des
pages que vous ne souhaitez pas indexer pour diverses raisons.
Cependant, plus le moteur de recherche aura indexé de pages d’un 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 données.
Avec <meta name= “robots” content=”index”> nous permettons à un moteur de
recherche de transmettre la page en question à sa base de données.
Avec <meta name= “robots” content=”nofollow”> nous permettons à un moteur de
recherche de transmettre la page en question à sa base de données en ignorant les
liens contenu dans la même page.
Avec <meta name= “robots” content=”follow”> nous permettons à un moteur de
recherche de transmettre la page en question à sa base de données en indexant les
liens contenu dans la même page.
Notons que nous pouvons combiner les commandes précédentes, 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 l’indexation de toutes les pages du site.
1.5. Préparation 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, présenté
comme un service à titre expérimental, a pour vocation de faciliter l’indexation des
pages d’un site par les robots de Google.
- 28 -
ISAMM 2006
La découverte des pages d’un site, d’autant plus lorsqu’il est récemment créé, peut
être un processus extrêmement long. Les robots doivent tout d’abord trouver ce
dernier à partir d’un lien provenant d’un autre site. Une fois la page analysée et les
liens vers les autres pages trouvés, le robot continuera la « découverte » du site. Ce
processus, notamment pour un «gros » site, peut être extrêmement long. Ne parlons
pas des difficultés liées à la réindexation des modifications d’un site. Google
SiteMaps a pour principe de recenser, dans un fichier XML, l’ensemble des urls d’un
site, et éventuellement la date de modification de ces dernières. De ce point de vue,
Google SiteMaps est une bonne idée pour un moteur plus actuel et plus réactif.
Le fonctionnement de Google SiteMaps est très simple, et se déroule en trois temps :

Créer 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 généré sur votre site en respectant les
contraintes d’emplacements et de taille.

Soumettre le fichier SiteMap à Google.
Fig19 : Création fichier XML avec Yooda Map
- 29 -
ISAMM 2006
1.6. Hébergement 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 séries de chiffres difficiles à
mémoriser.
Un nom de domaine, est constitué de plusieurs éléments :

La racine : qui est en principe le nom de l’entreprise ou de son activité. Ce
nom peut être composé d’un ou plusieurs mots séparés ou non par un tiret,
web-2-com dans notre cas.

Une extension ou suffixe séparée de la racine par un point, exp : .net

L'ensemble accolé formant le nom de domaine, exp : web-2-com.net

Une adresse Internet formée par le nom de domaine précédé par les trois W
qui signifient World Wide Web. Pour notre cas l’adresse est la suivante : www.
web-2-com.net.
Notre site a été hébergé sur le serveur de l’Agence via un logiciel ftp client. Les
étapes d’une connexion ftp sont les suivantes :

Appeler le programme et ouvrir une session.
Fig20 : Connexion FTP
- 30 -
ISAMM 2006

Cliquer sur : file/connect.

Une 2ème fenêtre va s’ouvrir : Cliquer sur New sites profile.

Une 3ème fenêtre va s’ouvrir : Cela implique que l'on connaît le nom du serveur
et qu'on y a accès par un nom d'utilisateur et un mot de passe (ou
éventuellement en anonyme en cochant la case ad-hoc.)
Fig21 : Création compte FTP

Si la connexion est acceptée, deux fenêtres apparaissent. En général, la
fenêtre de gauche permet d'accéder aux fichiers en local et la fenêtre de
droite, d'accéder aux fichiers qui sont sur le serveur. Quant à la fenêtre du
haut, elle liste les commandes effectuées durant la session.
Fig22 : Chargement sur serveur distant
- 31 -

ISAMM 2006
Le système de navigation est similaire à celui du gestionnaire de fichiers
Windows.

Pour transférer un dossier ou un fichier, il faut le sélectionner. La flèche qui se
trouve au milieu, entre les deux fenêtres, est alors activée. Une fois que l'on
est sûr de se trouver dans le bon répertoire d'arrivée, il suffit d'appuyer sur
cette flèche pour effectuer le transfert.
- 32 -
ISAMM 2006
2. La réalisation du CD Crad
2.1. Réalisation du CD Card version Flash
2.1.1. Logiciels utilisés
Flash 8 : pour la création de l’animation.
Adobe Photoshop : pour le traitement des images.
IrfanView : pour la création de l’icône du CD que nous voulons afficher lors de
l’ouverture du CD Card.
IrfanView est une visionneuse compacte et très facile à utiliser. Elle permet de
visualiser rapidement une multitude de formats de fichiers graphique, vidéo 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 utilisés par les téléphones
Pour créer l’icône du CD, j’ai essayé d’utiliser le logo de l’Agence
mais l’image n’était pas trop lisible, pour ça nous avons opté pour le
mot « WEB 2 COM » avec les couleurs de l’Agence.
2.1.2. Autorun et fichier ico
L’Autorun est une spécification propre aux systèmes d’exploitation Windows qui
permet d’automatiser les procédures de lancement ou d’installation d’un programme.
Rappelons que nous pouvons désactiver temporairement la fonctionnalité Autorun en
gardant la touche Maj enfoncée au moment où nous insérons le disque. Les fichiers
suivants sont requis :

Un fichier nommé Autorun.inf

Un fichier exécutable.
Le fichier Autorun.inf doit être placé à la racine de notre CD. Nous pouvons créer
notre premier fichier Autorun.inf dans un éditeur de texte quelconque comme le Blocnotes Windows. Sa structure ressemble fortement à celle d’un fichier .ini avec des
- 33 -
ISAMM 2006
sections appelées "clés" et, à l’intérieur de chacune d’elles, un certain nombre de
commandes.
Voici le détail des commandes autorisées pour la section [Autorun] :

Defaulticon : définit l’icône par défaut pour l’application spécifiée.

Icon : définit le chemin vers le fichier icône contenu dans un fichier
exécutable. Ce sera le nom du fichier, suivi d’une virgule et du numéro d’index
ou le nom d'un fichier .ico. Cette icône s’affiche dans l’Explorateur à la place
de l’icône standard attribué au CD-Rom. Elle doit être placée dans le même
répertoire que le fichier exécutable défini par l’entrée Open.

Label : définit le texte qui sera affiché dans l’Explorateur quand le disque sera
inséré, par exemple label= Étiquette_Du_Disque.

Open : définit le nom et l’emplacement de l’application qui sera
automatiquement lancée. Il est possible d’ajouter les commutateurs propres à
l’application qui est spécifiée.

Shell : définit la commande par défaut. La variable verb correspondant à la
commande de menu. La syntaxe employée est shell=verb.

Shell\Verb : permet d’ajouter une commande personnalisée au raccourci
pointant vers le disque.
Voyez cet exemple :
shell\verb\command=Nom_Fichier.exe
shell\verb=Texte_Du_Menu
La première entrée associe la variable verb à une commande. Ce sera aussi
le texte qui sera affiché dans le raccourci. Nom_Fichier.exe représente
l’emplacement et le nom du fichier exécutable.
La deuxième entrée 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 possède 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 création des copies du CD Card pour les données aux clients de
l’Agence.
2.1.4. Impression
Après la gravure du CD Crad, nous avons crée la jaquette du CD pour l’imprimer par
la suite sur le CD.
Aperçu de la jaquette du CD Card
Fig23 : Jaquette du CD Card
- 35 -
ISAMM 2006
2.2. Réalisation 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 crée des fichiers d'aide du type Windows 98 et plus. Nous pouvons
donc crée des fichiers d'aide mais surtout éditer les projets obtenus après
décompilation d'un fichier HTML.
2.2.2. Étapes de réalisation
Pour la version CHM, les étapes de réalisation sont les suivantes :

Supprimer les codes java script pour les liens publicitaire de Google.

Insérer une frame dans la page index pour y insérer un fond musical, qui est
le même utilisé dans la version Flash du CD card. J’ai 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.
Paramétrage de conversion
Fig24 : Interface du logiciel HTML Help Workshop
- 36 -
ISAMM 2006
Une fenêtre de paramétrage apparaîtra pour
y enregistrer le nom du projet.
Fig25 : Paramétrage HTML Help Workshop
Prise d’écran du CD Card en CHM
Fig26 : Prise d’écran du CD Card en CHM
- 37 -
ISAMM 2006
3. Calendrier de réalisation
Notre projet s’est déroulé durant les deux mois de août et septembre 2006 et ce
selon le calendrier suivant :
Août 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
Préparation liens
Collecte d’images
Version anglaise et arabe
Animations
Hébergement
- 38 -
ISAMM 2006
CONCLUSION
Ce stage présente pour moi une réelle occasion d’apprendre et de faire un premier
pas vers le monde du multimédias, toujours en évolution.
Mon stage m’a permis ainsi de toucher à différentes techniques web tel que
l’hébergement et le référencement des sites web. De plus, j’ai pris connaissance des
différentes méthodes de marketing permettant la promotion d’une société sur le
web : création des bannières, des animations, l’échange des liens et l’e-mailing.
En outre, ce projet a été l’occasion d’appliquer les étapes du processus global de
développement d’une application informatique, plus spécifiquement une application
Web.
Enfin, j’estime que j’ai réussi à atteindre les objectifs tracés pour ce stage de fin
d’études du Mastère en Multimédias et Art de l’Image de l’ISAMM.
Par ailleur, j’ai eu l’occasion durant ce stage de participer à des activités de
l’entreprise en dehors de mon projet. J’ai contribué à des campagnes d’e-mailing en
réalisant la maquette graphique, la création du code HTML et l’envoi avec le logiciel
« Valen Emailer ». J’ai aussi travaillé sur le CD Crad de l’Agence matrimoniale
Suprême 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 utilisés pour le projet
Code pour modifier la couleur de la scroll barre d’un 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 contrôle 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 -