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

Transcription

1 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 Travail réalisé par : Encadré par : SOUMAYA ATTIA M. Nobel El Houssine BOUBAKER Année universitaire

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

3 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

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

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

6 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 Points Forts - Diversité des rubriques. - Contenu clair et bien présenté dans une structure de tableau

7 - L utilisation des formes rectangulaires et de la couleur bleue pour donner une image de sérieux à l Agence Points faibles - Les versions anglaise et arabe sont des liens vers un autre site - 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

8 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

9 2.1. Points Forts - Contenu clair et bien présenté dans une structure de tableau. - 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 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 -

10 En analysant le site de l Agence ES2i, nous avons pu dégager quelques points forts et quelques faiblesses Points Forts - Contenu clair et bien présenté. - Harmonie des couleurs. - Diversité des rubriques. - La page est centrée sur la fenêtre du navigateur Points faibles - L existence d espace vide. - Site en une seule langue. - 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

11 4.1. Points Forts - Contenu clair et bien présenté dans une structure de tableau. - Harmonie des couleurs. - Diversité des rubriques 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é. - Site en une seule langue. - 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 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 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

12 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 Une navigation aisée avec des liens simples et personnalisés 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

13 Utilisation des couleurs significatives et qui reflètent l'aspect fonctionnel de l'application 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)

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

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

16 Accueil Présentation ing Accueil Prestations&Services Assistance et préparation des cahiers de charges Référencement Informations légales FAQ Conception des sites web et développement des applications Intranet Soumission des sites web Positionnement Conception sites web Contact Référencement professionnel CD Rom & CD Card Positionnement publicitaire Bannières Publicitaires marketing CAO / DAO & Impression Gestion de contenu Analyse Des Données Analyse statistique et modélisation économétrique Assistance Technique Testimoniaux Outils Gratuits Nos Publications Nos Références

17 1.2. Conception Graphique du Site Web La réalisation du site a débuté en août 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 : 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

18 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

19 - L image d un client pour la rubrique Testimoniaux. Maquette 2 Fig7 : Maquette 2 proposée pour le site web 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

20 Maquette 3 Fig8 : Maquette 3 proposée pour le site web 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

21 Maquette 4 Fig9 : Maquette 4 proposée pour le site web 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

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

23 Fig14 : Bannière finale du site web Maquette de la version finale du site web Fig15 : Maquette finale du site web

24 2. Conception du CD Card 2.1. Synopsis du CD Card Objectif du CD Card Avoir un support promotionnel à présenter aux clients actuels et futurs Cibles du CD Card Les clients actuels de l Agence Les partenaires de l Agence Les prospects 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 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

25 Accueil Accueil Présentation Informations légales Testimoniaux Services Assistance et préparation des cahiers de charges Contactez Nous Conception des sites web développement des applications Intranet Soumission des sites web Référencement professionnel Positionnement publicitaire marketing Gestion de contenu Analyse statistique et modélisation économétrique

26 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

27 Maquette 2 Fig16 : Maquette 2 du CD Card 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 Fig17 : Maquette 3 du CD Card

28 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

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

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

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

32 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

33 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

34 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

35 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

36 2. La réalisation du CD Crad 2.1. Réalisation du CD Card version Flash 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 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