projet de fin d’études - web 2 com agence de … · l’objectif de ce stage effectué à...

Ministère de l’Enseignement supérieur Université de La Mannouba de la recherche scientifique et de la Technologies Institut Supérieur des Arts Multimédias

Travail réalisé par : Encadré par : SOUMAYA ATTIA M. Nobel El Houssine BOUBAKER

Année universitaire 2002-2003

Projet de fin d’études

Site Web Agence de Webmarketing

WEB 2 COM

www.web-2-com.net

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

- 1 -

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


- 2 -

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.


- 3 -

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.


- 4 -

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


- 5 -

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.


- 6 -

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


- 7 -

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.


- 8 -

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.


- 9 -

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.


- 10 -

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


- 11 -

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


- 12 -

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 Utilisation Taille Verdana Pour le corps du texte 9 px Monotype corsiva Pour le message publicitaire de l’Agence 16 px Brush Script MT Pour les titres 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


- 13 -

Accueil

Présentation

Prestations&Services

FAQ

Contact

Accueil

Informations légales

Email

E-mailing

Référencement

Positionnement

Conception sites web


Conception des sites web et développement des applications Intranet




E-mail marketing

Gestion de contenu


CD Rom & CD Card

Bannières Publicitaires

CAO / DAO & Impression

Analyse Des Données

Assistance Technique

Testimoniaux

Outils Gratuits

Nos Publications

Nos Références


- 14 -

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.


- 15 -

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.


- 16 -

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


- 17 -

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.


- 18 -

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.


- 19 -

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

Fig12 : Bannière 2 proposée pour le site web

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

Fig13 : Bannière 3 proposée pour le site web 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 :


- 20 -

Fig14 : Bannière finale du site web

Maquette de la version finale du site web

Fig15 : Maquette finale du site web


- 21 -

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 Utilisation Taille Verdana Pour le corps du texte 12 px Monotype corsiva Pour le message publicitaire de l’Agence 23 px Brush Script MT Pour les titres 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


- 22 -

Accueil

Accueil

Services Contactez Nous

Présentation Informations légales Testimoniaux


Conception des sites web développement des applications Intranet




E-mail marketing

Gestion de contenu



- 23 -

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.


- 24 -

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



- 25 -

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


- 26 -

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


- 27 -

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.


- 28 -

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 :

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.

User-agent: * Disallow:


- 29 -

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


- 30 -

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


- 31 -

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


- 32 -

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.


- 33 -

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

notes Windows. Sa structure ressemble fortement à celle d’un fichier .ini avec des


- 34 -

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.


- 35 -

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 :

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

[autorun] open=cd-web2com.exe icon=web-2-com.ico


- 36 -

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.

Fig24 : Interface du logiciel HTML Help Workshop

Paramétrage de conversion


- 37 -

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


- 38 -

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 Septembre 2006 1ère

semaine 2ème

semaine 3ème

semaine 4ème

semaine 1ère

semaine 2ème

semaine 3ème

semaine 4ème

semaine

Contenu textuel

Préparation liens

Collecte d’images

Version anglaise et arabe

Animations

Hébergement


- 39 -

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

thalasso.com.


- 40 -

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

- 41 -

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

- 42 -

</script> <!--[if !mso]> <style> v\:* { behavior: url(#default#VML) } o\:* { behavior: url(#default#VML) } .shape { behavior: url(#default#VML) } </style>

Code pour créer une animation teste dans la barre d’état d’un navigateur

<script language="JavaScript">function infoscroll(seed,looped){var text1 = "WEB 2 COM - Agence de Webmarketing "; var text2 = " Le leader en stratégies de communication & de commerce sur Internet"; var msg=text1+text2;var putout = " "; var c = 1; if (looped > 10) { window.status="<Merci !>"; } else if (seed > 100) { seed--; var cmd="infoscroll(" + seed + "," + looped + ")"; timerTwo=window.setTimeout(cmd,100); } else if (seed <= 100 && seed > 0) { for (c=0 ; c < seed ; c++) { putout+=" "; } putout+=msg.substring(0,100-seed); seed--; var cmd="infoscroll(" + seed + "," + looped + ")"; window.status=putout; timerTwo=window.setTimeout(cmd,100); } else if (seed <= 0) { if (-seed < msg.length) { putout+=msg.substring(-seed,msg.length); seed--; var cmd="infoscroll(" + seed + "," + looped + ")"; window.status=putout; timerTwo=window.setTimeout(cmd,100); // 100 } else { window.status=" "; looped += 1; var cmd = "infoscroll(100," + looped + ")"; timerTwo=window.setTimeout(cmd,75); // 75

- 43 -

} } } // -->  </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); _root.mySound3 = new Sound(_level2); _root.mySound4 = new Sound(_level3); _root.mySound5 = new Sound(_level4); 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); _root.mySound3.setVolume(maxvolume); _root.mySound4.setVolume(maxvolume); _root.mySound5.setVolume(maxvolume); }

projet de fin d’études - web 2 com agence de … · l’objectif de ce stage effectué à...

Documents