Memoire

République Algérienne Démocratique et Populaire
Ministère de l’Enseignement Supérieur et de la Recherche Scientifique

Faculté des Sciences Exactes
Département d’Informatique
Licence Professionnelle
Activités et Techniques de Communication
Option « Animation et gestion des sites Web »
Mémoire de fin de cycle
Thème
Conception et réalisation d’un site Web
dynamique pour le Théâtre Régional de
Bejaïa
Présenté par
Melle MESSAOUDI Kahina
Promoteur
Dr. TARI Abdelkamel
Promotion 2007/2008
i
Remerciements
Je commencerai ce rapport en ayant une pensée sincère et très spéciale pour
toutes les personnes qui m’ont aidé et soutenu pendant cette période d’intégration
au monde professionnel.
Je remercie
Thaïs production de m’avoir accueilli en ces deux mois de stage qui m’a permit
de découvrir, apprendre, construire, me passionner pour ce secteur de la
communication qui me plait particulièrement. Merci pour la confiance et la latitude
qui m’ont été accordés. J’ai été enchanté de travailler avec l’équipe de cette société
qui a montré une bienveillance et une sympathie notables à mon égard.
J’exprime ma grande gratitude et tout mon respect à mon promoteur Dr A. Tari

de m’avoir suivi tout au long de mon stage.
Je remercie vivement le jury d’avoir accepter de juger et de valoriser mon

travail.
Mes remerciement s’adresse aussi a toute personne ayant contribuée d’une

manière ou d’une autre à l’aboutissement de mon travail, ma famille, mes amis et
en particulier Hasniou Abdeslame.
Enfin, un mot amical à Ben Achour Farida, la stagiaire ayant eu son bureau en
face du mien, avec qui j'ai partagé des très bons moments.
Que toutes ces personnes, et celles qui ne sont pas nommément

citées mais qui ont également de près ou de loin pris part à ce
travail, reçoivent ici l’assurance de ma gratitude.
i
Sommaire
Liste des figure...........................................................................................................5
Introduction................................................................................................................6
Phase I........................................................................................................................7
Etude préalable...........................................................................................................7
Et.................................................................................................................................7
Analyse de projet........................................................................................................7
I.1. Présentation de la société d’accueil .....................................................................2
I.2. Présentation du théâtre ........................................................................................2
I.3. Logo du théâtre ...................................................................................................3
I.4. Présentation du projet et son objectif ..................................................................3
I.5. Perspectives .........................................................................................................4
I.6. Les acteurs du projet............................................................................................4
I.7. La cible ................................................................................................................4
I.8. Gestion de projet .................................................................................................4
I.9. Analyse concurrentielle .......................................................................................6
Phase II.....................................................................................................................11
Conception................................................................................................................11
II.1. Spécifications fonctionnelles ...........................................................................10
II.1.1. Contenus du site

..............................................................................................................................10
II.1.2. Composants additionnels
..............................................................................................................................11
II.2. Arborescence des pages................................................................................12
II.3. Services et Fonctionnalités

..................................................................................................................................13
II.3.1. Téléchargement de brochures PDF
..............................................................................................................................13
II.3.2. Espace interactif
..............................................................................................................................14
II.2. Conception visuelle
..................................................................................................................................14
II.2.1. Ergonomie et accessibilité
..............................................................................................................................14
II.2.2. la Charte graphique
..............................................................................................................................15
ii
II.2.2.1. Orientation chromatique
..........................................................................................................................15
II.2.2.2. Orientation typographique
..........................................................................................................................15
II.2.2.3. Animations Flash
..........................................................................................................................16
II.2.2.4. Gabarit d’écran ..................................................................................16
II.2.2.5. Maquette de la page d’accueil.............................................................18
II.3. Modélisation UML
..................................................................................................................................21
II.3.1. Définition de l’UML..................................................................................21
II.3.1.1. Diagramme de cas d’utilisation
..........................................................................................................................21
II.3.1.2. Diagramme de séquence
..........................................................................................................................23
II.3.1.3. Diagramme de classe
..........................................................................................................................26
Phase III....................................................................................................................28
Réalisation................................................................................................................28
III.1. Outils utilisés ..................................................................................................27
III.2. Langages utilisés
.................................................................................................................................28
III.3. FrontOffice
..................................................................................................................................30
III.3.1. La page d’accueil
..............................................................................................................................31
III.4. BackOffice
..................................................................................................................................32
III.4.1. Socle technique
..............................................................................................................................33
Phase IV....................................................................................................................37
Suivi du projet..........................................................................................................37
IV.1. Test et contrôle ................................................................................................37
IV.2. Formation des usagers ....................................................................................37
IV.3. Référencement ................................................................................................37
IV.4. Hébergement ...................................................................................................38
Conclusion................................................................................................................40
Annexes....................................................................................................................41
Bibliographie
.................................................................................................................................48
iii
Liste des figure
Figure 1: logo du Théâtre Régional de Bejaia............................................................3

Figure 2: Planning des tâches.....................................................................................6
Figure 3: Analyse concurrentielle...............................................................................8
Figure 4: Arborescence du site.................................................................................13
Figure 5: Couleurs utilisés dans le site.....................................................................15
Figure 6: Gabarit d’écran..........................................................................................18
Figure 7: Maquette de la page d’accueil...................................................................19
Figure 8: Maquette de la page Child Show...............................................................20
Figure 9: Diagramme de cas d’utilisation................................................................22
Figure 10: Diagramme de classe..............................................................................27
Figure 11: Page d’introduction.................................................................................31
Figure 12: Page d’authentification...........................................................................32
Figure 13: Page d’accueil administrateur ...............................................................33

Figure 14: Gestion de la newslettr............................................................................35
iv
Introduction
Depuis plus de 10 ans, internet est devenu un moyen de communication

incontournable. Dés que le besoin en communication dépasse celui d'une enseigne
sur rue, le web un outil à envisager en sus des médias classiques. Que ce soit pour
dynamiser une entreprise, utiliser un support de publicité permanent et instantané,
faire de la vente en direct ou simplement échanger des informations, il permet
d'être présent à tout moment et n’importe ou, et d'étendre son espace de
communication à une couverture mondiale en présentant des informations qui
pourront évoluer à la demande.
Dans ce contexte, la direction du théâtre Régional de Bejaia désire avoir un

outil d’image pour ses productions, ses moyens et son savoir-faire.
L'objectif de ce rapport est de présenter le déroulement du stage que j'ai

effectué au sein d'une société de production audiovisuel "Thaïs production" pendant
deux mois, dans le cadre de licence professionnelle en activités et techniques de
communication, dont ma mission est la création d’un site web pour le Théâtre
Régional de Bejaia.
Le présent traité décrit le contexte du travail qui m'a été confiée ainsi que
son exécution. Il s’articule autour de quatre parties principales, la première
présente une étude préalable de projet et les objectifs fixés. La suivante sera
consacrée pour la conception où seront évoqué les spécifications fonctionnelles,
l’ergonomie et la charte graphique ainsi que la modélisation de notre système, La
troisième partie portera sur la réalisation du site à savoir les technologies utilisés et
la description de l’espace administrateur et utilisateur. Enfin la quatrième partie
sera accordée au suivi de projet.
1
Phase I
Etude préalable
Et
Analyse de projet
Phase I: Etude préalable et analyse de projet Rapport de stage
L’analyse du projet est la phase déclencheuse pour commencer la conception d’un site en
se posant de la façon la plus exhaustive les bonnes questions, elle sert à rassembler les
différents besoins engendrés pour la création du site web : ce que contiendra le site et
comment il devrait se présenter.
En effet, cette étude est une phase essentielle dans laquelle une réflexion globale est menée
sur la société d’accueil ainsi que sur les différentes tâches à effectuer pour atteindre les
objectifs attendus.
I.1. Présentation de la société d’accueil

Thaïs Production est une société de prestation de services, créée en 2003 à Bejaia. Elle
agit dans les différents aspects relevant du marketing avec un intérêt particulier pour la
communication sous toutes ses formes. Elle opère à la fois en tant que société de production,
dans les domaines: Audiovisuel, Design graphique et MultiMedia…, en tant qu’agence de
conseil en communication : pour le diagnostic, l’élaboration et la mise en œuvre d’un plan de
communication et en tant que régie publicitaire qui commercialise des espaces sur différents
médias (TV, Radio, Presse écrite et revues spécialisées), etc. Ses principaux objectifs sont :
• Aider le client à définir ses besoins pour la stratégie de communication.

• Promouvoir l’image de marque du client auprès les consommateurs.
• Valoriser l’offre du client et soigner son packaging.
• Accompagner le client dans ses messages internes et externes.
• Toucher et convaincre les cibles de ses annonceurs à devenir clients potentiels
et consommateurs confirmés de leurs produits.
I.2. Présentation du théâtre

Conçu par l’architecte Albert MOREN, Le Théâtre de Bejaia a été bâtis en 1936, sous la
gestion de la municipalité FELIX BORG.
Il dépendait de la municipalité de Bejaia, jusqu’à ce que la commune le cède au ministère de
la culture en 1985. Il sera alors érigé en Théâtre Régional ; le Théâtre Régional de Bejaia par
le décret exécutif N° 85-172 du 18 juin 1985. Le démarrage des activités a eu lieu le 01
Février 1986.
2
I.3. Logo du théâtre

Le théâtre possède son propre logo illustré dans la figure 1, conçu par l’artiste Tahar
Khelfaoui. Le logo est sous forme d’un masque reflétant le théâtre et dont la structure
représente les premières lettres en arabe composant le Théâtre Régional de Bejaïa
‫المســـرح الجهــــوي بجـــــــايــــة‬ .
Figure 1: logo du Théâtre Régional de Bejaia
I.4. Présentation du projet et son objectif

Le sujet de mon stage est la mise en place d’un site web dynamique pour le Théâtre
Régionale de Bejaia afin de :
• Vulgariser le contenu des programmes de TRB.
• Promouvoir le théâtre auprès de l’internaute (nouveau publique).
• Créer un espace Forum pour le quatrième art.
• Permettre un accès rapide aux informations.
Il devra aussi répondre aux objectifs de la communication suivants:
Cognitifs : faire connaitre le TRB à travers le territoire national et international.
Affectifs : faire aimer le théâtre et ses productions. Pour atteindre cet objectif
l’organisation doit être plaisante et la structure du contenu renforcera la relation de
proximité entre l’institution et le public, ce qui permettra de leurs conférer une image
positive et attractive.
Conatifs : faire agir le public : encourager le public à des pratiques théâtrale, et
l’inciter à se rendre dans le théâtre. Cela se fera par l’interactivité entre le public et le
théâtre en favorisant les brochures d’information, les courriers électroniques et les
abonnements à la newsletter.
3
I.5. Perspectives
La direction du théâtre souhaite que l’historique du théâtre soit mis en information ainsi
que la mise à jour du site en matière de la programmation et de l’information.
Elle souhaite aussi que le site soit un espace de vie et d’échange avec d’autres activités qui se
tiennent au niveau national et international.
I.6. Les acteurs du projet

Les différents acteurs de ce projet sont :
• Le directeur du Théâtre Régionale de Bejaia qui a pour rôle de bien définir les besoins
et de fournir les contenus de base (textes, brochures, logos, images, photos).
• Le directeur de Thaïs production qui veille au respect des délais et valide les phases de
choix (ergonomie, graphismes, contenus).
• Mlle Messaoudi kahina qui a pour rôle de concevoir et réaliser le site web, proposer un
planning de réalisation en accord avec le client et de respecter les délais.
• Le promoteur, Mr Tari Abdelkamel (enseignant à l’université de Bejaia) qui veille au
bon déroulement de ce projet.
I.7. La cible
Les personnes susceptibles d'être intéressées par notre site Web sont :
Le public principal : Adeptes du théâtre, étudiants, lycéens.
Le publique secondaire : Jeunes de huit à quatorze ans.
I.8. Gestion de projet

La réussite de tout projet web repose sur trois fondements essentiels :
• Une bonne formulation des besoins du client.
• La compréhension des besoins du client par le prestataire.
• La facilitation des échanges et de la communication.
Afin de garantir la réussite de notre projet nous avons procéder comme suit :
4
La première étape est une réflexion menée par le client au sujet de l’idée qu’il se fait de son
projet. Une réunion avant-projet était organisée pour définir les besoins.
La seconde réside en l’élaboration d’un cahier des charges dont le but est de montrer au client
que ses besoins sont pris en charge.
La dernière étape intervient tout au long de l’évolution du projet, notamment lors des étapes
suivantes :
1. Proposition de la maquette et sa validation par le client.
2. Réalisation de tests lors du développement du site et les faire valider par le
client.
3. Demande de mise à disposition de ressources documentaires / réponse du
client.
4. Prise en compte des remarques émises par le client.
Pour visualiser dans le temps les diverses tâches composant notre projet, nous avons
utilisé le diagramme de Gantt1 qui est un outil standard de gestion de projets utilisé pour
planifier efficacement les tâches et suivre ensuite leurs progressions. Il offre une
représentation graphique du projet en planifiant les tâches sur un calendrier [W1].
Le planning de notre projet est représenté dans la figure ci-dessous, celui-ci était défini
après avoir analysé l'ensemble des besoins, puis imaginer des contextes d'utilisation, les
estimations du temps ont était obtenus par rapport à l’importance de chaque tâche.
Tâches Durée d’achèvement
Recueil des attentes, analyse de

l’arborescence souhaitée pour le site,
Deux semaines
élaboration des grandes lignes de la
charte graphique.
Réalisation de deux maquettes pour
l'approche graphique et validation de la
Une semaine
maquette finale.
1
: Voir Annexe 1
5
Validation de cahier des charges,

transformation de la maquette graphique
en page HTML, création de la suite des
Deux semaines
pages et intégration dans le socle
technique.
Création et mise en place de l’architecture
de la base de données, conception de la
Trois semaines
partie dynamique.
Tests / Contrôles,
formation pour l’administrateur du site.
Une semaine
Figure 2: Planning des tâches.
I.9. Analyse concurrentielle
L’analyse concurrentielle est une démarche utilisée très fréquemment dans le cycle de
conception d’un produit informatique. Elle consiste à étudier les sites et applications que l’on
juge concurrents ou comparables, afin d’en extraire leurs aspects positifs et négatifs, d’éviter
ces derniers et de profiter des autres. Comme elle permet de s'inspirer de bases existantes, qui
peuvent être analysées d'un point de vue ergonomique pour mettre en place un site ayant une
plus-value pour les futurs visiteurs et répondre parfaitement aux attentes du client [W2].
Nous avons effectué une étude sur deux sites, l’un est Tunisien et l’autre Parisien2. Notre
comparaison c’est porté sur ces sites afin de différencier le théâtre arabe et le théâtre français
dans leurs contenu ainsi que leurs stratégie dans la diffusion de l’information.
Le tableau ci-dessous regroupe les informations issues de cette étude :
Site 1 Site 2
2
: voir annexe 2.
6
Nom du site Hamra, théâtre de tous les arts Théâtre des variétés
Adresse du site www.theatrelhamra.com www.theatre-des-varietes.com
Date d’analyse Juillet 2008 05 Juillet 2008
Public visé le jeune public, les partenaires, les Adeptes du théâtre.

artistes, jeunes professionnels
issus des deux régions : Arabe et
Afrique.
auteurs Al-kazart C4 Aquitaine
Langue(s) Français, (Anglais, Arabe : en Français

utilisée(s) construction)
Technologie HTML, JavaScript, Flash, PHP HTML, JavaScript, Flash, PHP

utilisée
Accès au site Libre Libre
Barre de navigation verticale avec Menu principale verticale

4 rubriques, chaque rubrique comporte 5 rubriques, celle-ci se
Hiérarchisation/ contient un menu contextuel, une composent des sous menus.
Organisation autre horizontale avec trois Un menu horizontal au bas de page
rubriques situées au pied de page. comporte trois liens.
Style du langage Simple Simple
Métaphore/ forme couleurs prédominantes sont le Les couleurs utilisées sont : Blanc,
Graphique rouge, le noir et le doré. marron, doré.
La typographie utilisée est usage de photos réelles du théâtre
Verdana. pour la charte graphique.
Les images intégrées reflètent La typologie est Verdana avec une
l’objectif du théâtre. Présence taille de 8.5 px.
d’animation dans la bannière. Utilisation de la technologie Flash.
Type de
navigation Simple Simple, informative
7
interactivité de Oui Newsletter, Actualité, Actualité, Formulaire contact,

site Formulaire contact. moteur de recherche.
Liens vers Oui (lien vers l’agence qui a crée Oui (lien vers l’agence de
d’autres sites le site) conception et de développement,
lien vers l'hébergeur)
Norme W3C 14 erreurs 81 erreurs
Référencement Faible Bon référencement
Ergonomie claire, La navigation est intuitive,

Les éléments bonne hiérarchisation du contenu, Les animations utilisées ont
positifs apporté un dynamisme
navigation simple et facilité par le supplémentaire au site.
menu déroulant. Les balises Meta3 est Alt4 sont
insérées.
Les technologies employées ne Mise en page non adaptée à toutes

sont pas conformes aux normes de les résolutions.
W3C, ce qui a réduit l’accès au
Les éléments site. Police non respecté pour toutes les
négatifs pages.
Redondance d’information (la
rubrique News et la rubrique Lisibilité réduite par rapport à la
Programme amènent aux mêmes taille de la police des textes.
informations),
Présence d’une page vide

(Partenaire) sans aucun
commentaire.
Le site est conçu avec des cadres,

ce qui peut empêcher certains
moteurs de recherche d'indexer ses
pages et d'en lire le contenu.
Figure 3: Analyse concurrentielle
3
: Balise qui contient des mots clés. Les moteurs de recherche accordent de l’importance à cet élément.
4
: Attribut de la balise <img>, il permet d'afficher du texte lorsque l'image ne peut être affichée et donne la
possibilité de communiquer alternativement avec les malvoyants.
8
Cette première étape a placé le projet dans une vue globale, elle nous a permis de cerner
les besoins nécessaires, essentiels, fonctionnels et techniques afin de répondre aux attentes
attendues.
Apres avoir établit l’analyse de projet, nous sommes amènes d’entamer la conception du
site TRB en tenant compte des besoins de la direction, des objectifs fixés et de la concurrence
afin d’éviter les points négatifs et de profiter des points positifs.
9
10
Phase II
Conception
Phase II : Conception Rapport de stage
Une fois l'analyse des besoins terminée et la pertinence du projet confirmée, l'étape
suivante est la conception qui consiste à définir toutes les étapes techniques nécessaires à sa
réalisation, depuis la structuration des informations dans les différentes pages jusqu’à la
réalisation de la charte graphique et la réalisation des pages elles-mêmes.
Elle englobe les spécifications fonctionnelles du site, la conception visuelle et la
conception technique.
II.1. Spécifications fonctionnelles
Cette phase consiste à définir les rubriques et leur contenu, la structure des pages et leur
arborescence.
II.1.1. Contenus du site
Les visiteurs reviennent généralement sur un site pour son contenu, plus que pour son
design. Les études menées sur les internautes montrent que le facteur d'appréciation principal
d'un site web est en premier lieu le contenu. Ainsi, un site simple avec un contenu fort
intéressant sera potentiellement bien plus visité qu'un site creux au graphisme soigné.
Après la récolte des besoins, nous avons pu distinguer les différentes rubriques par
rapport à l’objectif du site et aux attentes de la direction.
Notre site est composé de six rubriques principales, celle-ci permettra à l’internaute l’accès
aux informations recherchées:
1. La rubrique « Accueil » contenant le spectacle à l’affiche et les spectacles

prochainement à l’affiche, elle contient aussi une page décrivant l’historique du
théâtre.
2. Une rubrique « Théâtre » listant ses diverses productions pour les différentes
catégories (Professionnel, Amateur, One man-Show, Child-Show)
3. Une rubrique « Spectacles » listant les spectacles de la grande et petite salle, ainsi les
programmes des ateliers (théâtre, musique, arts contemporain).
4. Une page « Exposition » programme des expositions et des vernissages au niveau des
halls du TRB.
10
5. Une page « Archives » aura pour but de mettre à la disposition des visiteurs tout les
archives du théâtre.
6. Un page « Contact » contiendra les coordonnées du théâtre et un formulaire de
contact.
II.1.2. Composants additionnels
Le site comprend les composants suivants:
1. Une newsletter : c’est une lettre d'information adressée par mail aux abonnés. Lors de
l’inscription, l’adresse e-mail de l’abonné sera enregistrée dans la base de données.
2. Un Forum: est un espace de discussion qui permet en temps réel de recueillir l’avis des
visiteurs du site, a savoir ce qu’il les motive a fréquenter ce dernier, ce qui leur déplait ainsi
que des suggestions d’amélioration.
3. Une syndication RSS (Really Simple Syndication) : est en réalité un fichier au format
XML5, avec un schéma (une structure) particulière.
Les flux RSS sont une nouvelle manière de présenter l’information sur le web.
Traditionnellement, chaque site propose ses actualités sur une page web, accessible depuis un
navigateur (Internet Explorer ou Firefox, par exemple). Pour suivre l’actualité de sites
multiples, il fallait donc visiter chacun d’entre eux les uns après les autres. Et plus on visite de
sites, plus ça prend du temps. Et moins c’est pratique. Le flux RSS (acronyme de Really
Simple Syndication : distribution vraiment simple) vise à résoudre ce problème.
Techniquement, il s’agit d’un petit fichier, mis à jour par chaque site, dans lequel on ne trouve
que les actualités, sans aucune mise en forme. Le fichier lui-même n’est pas fait pour être lu
par un être humain, mais par un logiciel. Lequel pourra centraliser et trier les informations en
provenance de multiples flux RSS (et donc de multiples sites) et les présenter de manière
simple et unifiée au lecteur.
Concrètement, ça signifie qu’au lieu de visiter quinze sites pour voir les infos, il suffira de
n’en visiter qu’un seul, qui regroupera tout ça sur une page unique. En clair : on se crée son
petit fil d’info personnel.
En pratique, des navigateurs web comme Firefox ou Internet Explorer 7 permettent de gérer
directement les flux RSS, mais les fonctionnalités offertes sont peu pratiques. Il est également
possible d’installer un logiciel supplémentaire pour la gestion de flux, mais de préférence se
5
: voir exemple en annexe 5.
11
tourner vers des sites spécialisés, accessibles partout et bien conçus. Pour cette introduction,
on présentera les sites « Netvibes et Google Reader », deux des plus utilisés, qui proposent
chacun une présentation différente de l’information [W12].
La version de RSS choisie est RSS 2.0 pour les raisons suivantes:
• Le format est stable (la spécification des autres versions de RSS change).
• Le format est simple (la syntaxe est plus lisible)
• Le format est bien reconnu.
II.2. Arborescence des pages
L'arborescence d'un site représente les différentes pages de celui-ci, organisées

logiquement et hiérarchiquement sous forme d'un arbre. La première page doit être la page
d'accueil (la racine), et les autres pages apparaissent ensuite dans un ordre logique.
L'arborescence aide l'internaute à comprendre la structure du site. La consultation et la
mémorisation des pages sont ainsi plus facile, rapide et efficace [W3].
Après avoir fait la nomenclature des contenus du site et les regrouper par thématique
nous avons pu distingués les diverses rubriques de ce dernier.
Dès lors que les principales rubriques sont identifiées, nous avons déterminé leur organisation
et leur découpage en sous-rubriques.
La structure que nous avons donné à notre site a permis d’organiser les données en gardant
ses objectifs, elle a était choisi afin de faciliter la navigation dans le site et permettre aux
internautes l’accès aux informations d’une manière transparente en trois clics de souris.
La figure ci-dessous illustre l’arborescence générale de notre site :
12
Figure 4: Arborescence du site.
II.3. Services et Fonctionnalités
Le site devra permettre aux internautes certaines fonctionnalités comme :
II.3.1. Téléchargement de brochures PDF
Nous avons opté pour le format Portable Data File (PDF)6 pour le téléchargement des
brochures spécifiques à des spectacles. Ce format permet de proposer des fichiers mis en page
de façon précise, et imprimables sur toute plateforme.
6
: PDF, qui signifie Portable Document Format (traduit littéralement par format portable de documents), est un
format de fichier informatique créé par la société Adobe Systems.
Il est à noter que c'est un format ouvert : ses spécifications sont publiques et utilisables librement.
13
II.3.2. Espace interactif
Pour favoriser les débats avec les internautes, nous allons intégrer au site un forum. Pour
cela, nous allons utiliser un forum «PHPBB». En effet, celui-ci intègre toutes les fonctions
nécessaires à la bonne marche d’un forum sur internet. Il est sécurisé et open source.
II.2. Conception visuelle
La conception visuelle vise l’étude du design ainsi que l’ergonomie d'un site.
II.2.1. Ergonomie et accessibilité
L'ergonomie d'un site se détermine par le type de navigation entre les pages, l'intelligence
de leur disposition et le placement des différents éléments qui composent le site. Une bonne
ergonomie offre une vue d'ensemble des informations et services offerts sur un site dés le
premier coup d'œil. Elle est principalement dictée par l'analyse de la structure des rubriques et
menus et par la manière dont est pensée l'interface de navigation [BAR03].
La création graphique constitue un des facteurs importants de la visibilité du site. Il est

donc important d'y apporter toute l'attention nécessaire, car c'est à ce niveau qu'il faut prendre
en compte les contraintes pour que le site offre un niveau d'accessibilité optimum pour tous
les types de publics et notamment :
• Compatibilité avec les outils du marché : Le site devra être développé pour les
anciennes versions des navigateurs web.
• Le format d'affichage est de 800 x 600 s’adapte à toutes les résolutions.
• Une navigation adaptée : Élaborer une navigation logique, simple et intuitive, la
présence d'une barre de navigation et le respect de la règle des trois clics.
• Performance : Le temps d'affichage devra être correct pour des liaisons à bas débit et
la taille d’une page Web ne doit pas occuper plus de 40 Ko pour se charger
rapidement.
C’est règles d'ergonomie rend le site utilisable par le plus grand nombre de personnes avec un
maximum de confort et d'efficacité.
14
II.2.2. la Charte graphique
La charte graphique est le document synthétique récapitulant les règles de présentation

des éléments graphiques d'un site web, traduisant son identité visuelle, notamment la taille et
la couleur de la police, des images et des boutons [W4].
L’aspect visuel permet aussi de structurer les idées, de maintenir présent l’objectif du site,
d’enrichir la mise en page, d’avoir une cohérence visuelle qui guidera l’usager tout au long de
sa visite.
Cette section comprend l’ensemble des éléments visuels du site; les couleurs
sélectionnées, la typographie, les animations,…
II.2.2.1. Orientation chromatique
Le choix des couleurs est primordial lors de la conception d’un site web. Pour que notre
site soit en harmonie avec le théâtre, nous avons choisi les couleurs suivantes déclinées en
charte graphique pour les arts d’expressions théâtrales:
#8e0318 #ffffff #b57e34 # c1180e # 000000
Figure 5: Couleurs utilisés dans le site.
II.2.2.2. Orientation typographique
Le choix des polices de caractère sera simplifié aux limites imposées par Internet. En
effet, les navigateurs ne disposent pas tous des mêmes listes de police de caractère car ils
utilisent celles disponibles sur la machine où ils sont installés. Pour cela, il est
recommandé d’utiliser des polices communes aux deux plates formes Mac et PC pour que
l’affichage soit assuré par tous les navigateurs7.
La police que nous avons utilisée est « Verdana » d’une taille « 11 px » pour les textes, et
« 12 px gras » pour les titres. Elle était choisie pour sa lisibilité à l’écran comme elle est très
utilisée sur le web.
7
: Voir annexe 3.
15
II.2.2.3. Animations Flash
Les animations flash sont très utilisées car elles apportent un aspect vivant aux sites, leurs
utilisation sont recommandées sans que cela ait un grand impacte sur le temps de chargement.
Pour notre site, nous avons utilisé des animations flash dans la page d’introduction
ainsi que la bannière.
II.2.2.4. Gabarit d’écran
Une belle mise en page découle forcément d'un gabarit de maquette adéquat. Le travail de
mise en page est délicat et précis, il s’appui sur le respect d’un certain nombre de règles
typographiques. Le gabarit d’écran de notre site se compose des parties suivantes :
16
700px
106px Logo Bannière
Menu
Contenu
Pied de page
42px
Variable
selon le
contenu
17
42px
Figure 6: Gabarit d’écran.
Toutes les pages du site sont développées selon ce modèle.

Le modèle est organisé en trois zones principales :
• Zone horizontale haute : comporte la bannière et le logo du théâtre.
• Zone centrale : constitue le corps de la page, contient le menu de
navigation et le contenu des pages.
• Zone horizontale basse : comprend un copyright.
II.2.2.5. Maquette de la page d’accueil
La phase de recueil des besoins est importante pour définir l'esprit du site afin d'élaborer
une ligne graphique cohérente avec les attentes du commanditaire. A partir du recueil des
besoins, nous avons proposé deux approches graphiques différentes pour la page d'accueil8.
Après un assemblage des points positifs des approches proposés, nous avons élaboré la
maquette finale du site en définissant la structure de la page d'accueil et l'enchaînement des
différentes pages.
La maquette suivante donne une idée claire de la représentation de notre site :
8
: Voir annexe 4
18
Figure 7: Maquette de la page d’accueil.
Les zones haute et basse sont communes à toutes les pages d’écran, seule la zone centrale
blanche variable. Excepte la page « Child show » qui changera complètement le design, la
figure ci-dessous illustre cette dernière.
19
Figure 8: Maquette de la page Child Show.
20
II.3. Modélisation UML
Toute technique de modélisation doit prendre en compte, non seulement les éléments
pertinents propre au web, tels que les pages Web et les liens hypertextes, mais aussi leurs
relations avec les éléments d’arrière plan du système, tels que les bases de données.
Un modèle est une abstraction de la réalité, il s'agit d'un processus qui consiste à
identifier les caractéristiques intéressantes d'une entité en vue d'une utilisation précise. Il
reflète des aspects importants de la réalité, il en donne donc une vue juste et pertinente afin de
faciliter la compréhension du système étudié, réduire sa complexité, le simuler, le représenter
et reproduire ses comportements.
La modélisation de notre système est fondée sur l’utilisation d’un sous-ensemble

nécessaire et suffisant du langage UML, à savoir les diagrammes de cas d’utilisation, le
diagramme de classes et les diagrammes de séquence.
II.3.1. Définition de l’UML
UML (Unified Modeling Language) est un langage qui permet de traduire les modèles et
les conceptions de systèmes d’une façon orientée objet en fournissant un ensemble de
symboles (notations) et de règles qui régissent l’assemblage de ces symboles (syntaxe et
sémantique) [PAS03].
Le choix de ce langage est justifié par sa fiabilité et sa facilité d’utilisation, de plus, elle
permet de modéliser de manière claire et précise la structure et le comportement d’un système
indépendamment de toute méthode ou de tout langage de programmation.
II.3.1.1. Diagramme de cas d’utilisation
Le diagramme de cas d'utilisation représente les cas d'utilisation, les acteurs et les
relations entre eux, il permet d'identifier les possibilités d'interaction entre le système et les
acteurs [PAS03]. Les éléments de base de ce diagramme sont :
21
• Acteur : entité externe qui agit sur le système.

• Cas d’utilisation : ensemble d'actions réalisées par le système, en réponse à une
action d'un acteur.
Pour notre système nous retenons les acteurs : internaute et administrateur du site.
Après avoir identifié les acteurs et leurs interactions avec le système, nous somme amenés à
élaborer le diagramme de cas d’utilisation suivant :
L’internaute
L’administrateur
Figure 9: Diagramme de cas d’utilisation.
22
II.3.1.2. Diagramme de séquence
Le diagramme de séquence est un diagramme d’interaction présentant l’ordre

chronologique des messages. Il représente un ensemble d’objets et de messages reçus et
envoyés par ces objets. Cette représentation se réalise par cas d’utilisation [PAS03].
Les cas d’utilisation de notre système représentés par les diagrammes de séquence sont :
L’authentification ainsi que la mise à jour pour l’administrateur et l’abonnement au site pour
l’utilisateur.
Administrateur Page home admin

Page authentification
Atteindre
Demande
d’authentification
Saisir login et mot

de passe Créer Rechercher
Vérifier
o OK
Afficher un
message d’erreur Non OK u
Afficher
Figure 10: Diagramme de séquence « Authentification ».
23

Atteindre
Demande Charger
Charger
la liste
Afficher Afficher
Sélectionne Charger Créer
Afficher
Modifier info
Créer Enregistrer
Charger
Afficher
Figure 11: Diagramme de séquence « Modifier les données »

Atteindre
Atteindre
Afficher
Saisir informations et validation Enregistrer

Créer
Charger
Afficher
Figure 12: Diagramme de séquence « Ajouter pièce ».
24

Atteindre
Demande Charger
Charger
la liste
Afficher Afficher
Demande suppression
Afficher message de confirmation
o Non OK
u
Afficher
OK Supprimer
Mettre à
jour
Charger
Afficher
Figure 13: Diagramme de séquence « Supprimer pièces ».
25
Page résultat
Utilisateur Page d’accueil
Atteindre
Envoyer
Saisir adresse mail
Vérifier
Enregistrer
Créer
Afficher
Figure 14: Diagramme de séquence « S’abonner au site».
II.3.1.3. Diagramme de classe
Le diagramme de classe est généralement considéré comme le plus important dans la

conception d’une application. Il représente l’architecture conceptuelle du système : Il décrit
les classes que le système utilise, ainsi que les relations qui existent entre elles [PAS03].
La figure 15 illustre le diagramme de classe de notre système :
26
Figure 10: Diagramme de classe
L’étude conceptuelle du site nous à servie à structurer le contenu, définir l’aspect visuel
de notre site et les stratégies élaborées pour atteindre les objectifs fixés et d’amener au bien
notre projet.
Nous allons abordé dans la partie qui suit la phase d’implémentation qui présentera les
technologies utilisées pour la création des pages de notre site, et leurs utilités, comme elle
présente l’interactivité du site pour le front et le back office.
27
Phase III
Réalisation
Phase III : Réalisation Rapport de stage
Une fois la structure finalisée et l’interface de navigation entièrement fonctionnelle, la

phase d’implantation peut commencer.
Cette section présente les technologies déployées, leur fonctionnement et leur utilité
comme elle décrit l’espace utilisateur et l’espace administrateur.
III.1. Outils utilisés

 Adobe Photoshop : est la solution de référence pour la conception et la production de
graphiques Web professionnels. Il s’agit du premier environnement de production
permettant d’aborder et de résoudre les défis particuliers posés aux concepteurs et aux
développeurs de graphiques Web [W5].
Cet outil nous a permis la conception des maquettes graphiques et les retouches des images.
 Macromédia dreamweaver : Dreamweaver est un logiciel de création de pages web

performant et réputé dans le monde professionnel. Ses aptitudes à gérer du code
javascript de manière transparente alliée à la clarté du code généré en font l'outil
privilégié des professionnels. Mais aussi, il est particulièrement adapté pour
l'intégration d'éléments créés avec Fireworks, Flash ou d’autres outils et sait gérer les
langages dynamiques et base de données [W5]. Nous avons utilisé l’éditeur
Dreamweaver pour la création des pages de notre site.
Toutes les pages du site devront être validées par le W3C validator dont l’url est:
http://validator.w3.org/
 Macromédia flash : est une technologie multimédia basée sur l'utilisation d'objets
vectoriels et développée initialement par Macromédia, puis racheté par Adobe. Il
génère des objets .swf qui peuvent être intégrés à des pages HTML. Il intègre
un puissant langage de programmation ActionScript inspiré de JavaScript et peut
interfacer de nombreux types de bases de données. Ses aptitudes à gérer le son et
la vidéo en font de plus l'outil rêvé des créateurs multimédia [W6].
27
Ce logiciel nous a servi à réaliser la page Introduction, ainsi que quelque animation dans la
bannière.
 PHPMyAdmin : Utilitaire permettant de gérer des bases de données MySQL sur un
serveur Web. Permet d’effectuer toutes les tâches nécessaires à la mise en place et à la
maintenance d’une base de données, à savoir l’ajout, la modification, la suppression de
tables et de données, avec un affichage simple et clair sous forme de listes et de
tableaux [MAG04].
 MySQL : est un système de gestion de bases de données client/serveur open source.

Ce SGBD est distribué sous licence GPL9 (gratuit) ou sous licence commerciale. Il est
disponible pour de nombreux systèmes d’exploitation (Linux, Windoxs, Mac Os X).
MySQL comporte un serveur, des clients et des outils d’administration [MAG04].
Le SQL dans "MySQL" signifie "Structured Query Language" : le langage standard
pour les traitements de bases de données.
Parmi ses avantages nous citons :
- Système gratuit, open source, rapide et fiable.
- Application compète qui réalise toutes les gestions relatives aux données.
- Il est multi utilisateur, fonctionne en mode client/serveur (utilisé avec
PHP et associé à un serveur apache).
 Apache: est un serveur web très répondu qui supporte le PHP. Sa conception
modulaire le dote d’une grande richesse fonctionnelle. IL s’agit d’une application
fonctionnant, à la base, sur les systèmes d’exploitation Unix, mais il a désormais été
porté sur de nombreux systèmes, dont Microsoft Windows [WWW8].
III.2. Langages utilisés
Pour accomplir cette phase d’implantation, nous avons fait appel aux différents langages
suivant, notre choix est porté sur ces langages pour notre adaptation à leurs syntaxe et que ces
langages sont les plus dédies pour le web.
9
: Type de licence qui autorise la modification et la redistribution des logiciels.
28
• HTML (Hyper Text Markup Language) : est un langage de description qui nous
permet de décrire l’aspect d’un document, d’y inclure des informations variées (textes,
images, sons, animations, etc.) et d’établir des relations cohérentes entre ces
informations grâce aux liens hypertextes [JEA06].
• Le JavaScript : est un langage de programmation orienté objet de type script,
principalement utilisé dans les pages Web. Ses scripts sont gérés et exécutés par le
navigateur lui-même sans devoir faire appel aux ressources du serveur.
La déclaration de la fonction est faite dans l'en-tête, incluse dans une balise <script>
</script>. Elle est ensuite appelée dans le corps du texte par une balise de lien.
Une des possibilités intéressante du JavaScript consiste à récupérer des données sur
l'internaute et à les écrire sur sa machine sous forme de cookies afin de personnaliser
ses prochaines visites [WWW7].
• Les feuilles de styles : Le CSS ou Cascading Style Sheets permet de définir les
spécifications de mise en forme de documents. Sa principale caractéristique consiste à
différencier la structure (en générale décrite en HTML ou XML) de la présentation.
Il peut gérer la mise en forme de textes par des styles de classe (.class), il permet en
outre la création de blocs pouvant contenir textes ou images, qui seront librement
définis en taille, position, couleurs, marges, visibilité etc... Cette caractéristique fait du
CSS un outil puissant pour contrôler la mise en page.
Il peut être utilisé en interne dans une page HTML, en ce cas, les styles seront
définis dans l'entête entre des balises <style></style> mais de manière bien plus
puissante, dans un fichier .css lié, qui permettra alors le contrôle de la présentation de
l'ensemble d'un site.
L’avantage de leurs utilisation réside dans :
• Une stricte séparation du contenu HTML et des informations de mise en page.
La modification des documents et ainsi facile.
• Un allègement du code-source des pages Web, et donc économie de bande
passante : une feuille de style n'est chargée qu'une fois par un navigateur, qui
l'applique sans délai, si nécessaire, aux pages visitées par la suite [JEA06].
29
 PHP : (HyperText Préprocesseur), initialement appelé Personnal Home Page est un

langage de programmation web gratuit et open source10, exécuté côté serveur, ce qui
veut dire que c’est le serveur (La machine qui héberge le site web en question) qui va
interpréter le code PHP ensuite générer du code HTML compréhensible par le
navigateur.
A la fois très simple et performant, il a été développé par la communauté Internet et est
distribué sous forme de licence GNU11, ce qui lui a rapidement valu un succès
considérable. Il s'interface facilement avec des bases de données type MySQL, mais
peut aussi exploiter d'autres bases de données.
Principalement exploité en couple avec un serveur Apache, il est portable sur de
multiples plates-formes et un même script peut fonctionner sur différents serveurs.
Contrairement à des langages généraux (Perl, C, Java), il est uniquement dédié au
développement de pages web dynamiques [KEB05].
III.3. FrontOffice
FrontOffice désigne la partie visible pour l’internaute, dont l’accès est autorisé à tout le
monde, il constitue un espace informatif de présentation du théâtre et ses productions.
L’accès à cet espace se fera par l’intermédiaire d’une introduction Flash qui comporte deux
liens, un lien en flash et un autre en HTML pour ceux qui ne possèdent pas le plug-in 12
Flash installé sur leurs navigateurs. Cette figure représente la fin de l’animation.
10
: Les codes sont livrés aux utilisateurs.
11
: Type de licence qui autorise la modification et la redistribution des logiciels.
12
: Un plugin de l'anglais to plug in (brancher), parfois traduit en module externe, module d'extension ou
plugiciel, est un logiciel tiers venant se greffer à un logiciel principal afin de lui apporter de
nouvelles fonctionnalités
30
Figure 11: Page d’introduction.
III.3.1. La page d’accueil
La page d’accueil est la page la plus importante du site, elle est la porte d’entrée au
contenu du site et le sommaire synthétique qui donne une vue d’ensemble du contenu à
disposition et affiche les outils de navigation. La page d’accueil de notre site comprend un
menu permettant d’accéder à chacune des pages internes du site. Elle permet :
• L’accès à l’espace Forum.

• L’abonnement à la newsletter.
• Le téléchargement des brochures.
• De consulter les programmes du théâtre.
• Contacter le Théâtre en remplissant un formulaire correspondant dans la page
contact.
31
III.4. BackOffice
Le succès d’un site Web réside dans la qualité, la pertinence et la fréquence de mise à jour
de l’information, bref dans la gestion de son contenu.
Pour faire face à ses contraintes de réactivité, nous avons met a disposition de l’administrateur
du site une interface graphique reliée à la base de données du site afin de pouvoir maitre à
jour son contenu.
L’accès à cette interface est restreint pour chaque personne devant y accéder.
L’url htt://www.trbejaia.com/admin.php permet d’atteindre la page d’authentification qui est
illustrée dans la figure ci-dessous :
Figure 12: Page d’authentification.
Pour la sécurité du compte administrateur nous avons crypté le mot de passe avec la fonction
de hachage MD513.
Une fois que le bon login et mot de passe sont introduits dans les champs du texte,
l’administrateur accède à son espace. La figure 18 présente la page d’accueil du compte
administratif :
13
: L'algorithme MD5, pour Message Digest 5, est une fonction de hachage cryptographique qui permet d'obtenir
l'empreinte numérique d'un fichier.
32
Figure 13: Page d’accueil administrateur .
Par le biais de cette dernière l’administrateur pourra effectuer les différentes gestions que
nous aurons l’occasion de les présenter par la suite.
III.4.1. Socle technique
Le socle technique est constitué des différents modules permettant de générer

dynamiquement le contenu du site et de répondre à l'ensemble des fonctionnalités demandées.
Parmi ces modules nous citons :
• Gestion des contenus :

La solution de gestion de contenu gère l'ensemble des contenus, aussi bien pour les pages
dont le contenu évolue beaucoup dans le temps (exemple page Accueil), que pour les pages
régulièrement actualisées (page Archive).
33
Pour notre site deux types d’attributs sont identifiés :

• Les attributs de données type textes (nom de la pièce, résumé, date de
production,...).
• Les attributs d'éléments associés (affiches, brochures, images, …)
La rubrique « Mise à jour » de l’interface administrateur présente toutes les rubriques à

mettre à jour avec les liens vers leurs données. Cette dernière se compose d’un tableau
regroupant les informations principales des pièces théâtrales, expositions….
Elle contient également les liens vers toutes les actions possibles sur leurs données à savoir :
l’ajout, la modification ou la suppression.
a. L’ajout
Lorsque l’administrateur du site veut ajouter une nouvelle pièce, il n’a qu’à cliquer sur le
lien de la rubrique correspondance, après il clique sur « ajouter aux (spectacles, productions,
archives, expositions….) » et il arrive sur le formulaire de création d’une nouvelle pièce.
L’administrateur devra alors saisir successivement, les informations relatives à ces pièces.
Tous les champs doivent être remplis pour garantir une efficacité optimale de l’interface
utilisateur. Une erreur JavaScript est levée lorsque l’on détecte un champ vide et oblige
l’administrateur à remplir entièrement le formulaire. Ensuite, le système enregistre les entrées
dans la base de données.
Une fois l’ajout est fait, le serveur redirige automatiquement l’administrateur vers la page de
gestion de la page mise à jour.
b. La modification
Pour ce qui est de la modification, tous les champs d’une pièce sont modifiables. Cela
permet une plus grande liberté d’action pour l’administrateur, qui peut à tout moment mettre à
jour les données des spectacles. La page de modification se présente de la même manière que
celle de l’ajout, à l’exception bien sûr que le formulaire renvois les informations à modifier.
34
c. La suppression
En ce qui concerne la suppression, une alerte JavaScript arrête l’administrateur pour qu’il
confirme son action. Cela permet d’éviter les suppressions involontaires des pièces théâtrales.
Si l’administrateur continu la suppression, alors le système va rechercher et supprimer toutes
les informations relatives à la pièce sélectionnée.
• Gestion de la newsletter :
A travers l’interface graphique illustrée dans la figure 19, l’administrateur effectuera les
fonctions suivantes :
• Ajouter des abonnés.
• Supprimer des adresses email.
• Envoyer des newsletters.
Figure 14: Gestion de la newslettr.
35
• Gestion de Forum :
Le forum demande un peu de suivi, une présence régulière de la part de l’administrateur

et certaines prises de positions ou censures des sujets débattus.
L'administrateur doit lancer de nouveaux sujets, poser des questions, répondre aux autres,
féliciter les membres, tout afin d'inciter les internautes à participer. Il ne s'agit pas de passer sa
vie sur le forum mais de montrer sa présence ainsi on apporte un soin tout particulier aux
messages négatifs afin de prouver à tous qu’ils tiennent à leurs visiteurs.
• Gestion des contacts :
Lorsque l’internaute envois un message via le formulaire de la page contact, ses

informations seront envoyer a une boite électronique grâce a la fonction « mailto14 », la ou
l’administrateur pourra gérer les messages envoyés ou de répondre à ceux-ci.
Cette partie nous a permis de présenter les outils de développement employés pour
l’implémentation de notre site ainsi que son interactivité.
A ce stade, nous pouvons confirmer que nous avons achevé la réalisation du site. Nous
allons, à présent, nous focaliser sur le suivi de projet qui fera l’objet de la prochaine partie.
14
: Mailto : Protocole utilisé sur Internet pour l'envoie du courrier électronique
36
Phase IV
Suivi du projet
Phase III : Suivi du projet Rapport de stage
Une fois la structure définie, le design avancé, nous avons procédé à la première
publication de la maquette afin d'en tester sa réactivité en réel. Chaque phase majeure de
développement est ainsi publiée pour permettre aux différents partenaires de valider l'avancée
des travaux.
IV.1. Test et contrôle

Le test d'un site avant son ouverture au public est une épreuve indispensable.
Cette étape pourra dans un premier temps aider à déceler les problèmes d'incompatibilité
d'interprétation qui se posent au travers des multiples plateformes, navigateurs et versions.
Les premiers tests de compatibilité sont effectués au travers d’un logiciel d'édition de page,
Dreamweaver offre un rapport d'incompatibilités pour différentes version de nombreux
navigateurs. La commande du menu "FICHIER / VERIFIER LA PAGE de cet éditeur
permettent un audit assez complet du code, des liens et des problèmes de compatibilité.
Le site est effectivement tester en ligne sur un outil propos un audit technique des sites.
Le test est fait sur http://www.w3france.com/support/tester_site_web.php
IV.2. Formation des usagers

Une formation sera assuré à l'administration du site afin qu’elle soit en mesure de mettre
en ligne l'ensemble du contenu et d'utiliser toutes les fonctions retenues dans le cadre du socle
technique. La solution technique qui sera retenue permettra d’assurer la gestion du contenu
(modification, insertion ou suppression des informations, etc.) sans intervention externe. Les
personnes formées ont une bonne connaissance des outils bureautiques et ont l'habitude
d'utiliser Internet, mais n'ont pas de compétence particulière en informatique. Le temps
nécessaire pour cette formation est de trois jours.
En revanche, nous allons proposer une assistance d'accompagnement pour aider

l’administrateur à structurer et mettre en ligne la première version du site.
IV.3. Référencement
On désigne par "référencement" un ensemble de techniques visant à indexer le contenu
d'un site dans les bases de données des outils de recherche (moteurs, annuaires).
37
Les méthodes de référencement de sites sont :

- Le référencement "naturel" ou "traditionnel" : consiste à optimiser les différentes
pages de site web afin d'apparaître dans les « top » positions des résultats de moteurs
de recherche.
- Positionnement publicitaire : consiste à payer les moteurs de recherche pour obtenir un
positionnement dans les espaces réservés à cet effet [W10].
Le but du référencement est d'apporter une bonne visibilité à un site. Cela passe par
plusieurs mesures :
• Enregistrer l'adresse du site dans des annuaires

• Faire apparaître le site dans les pages de résultat des moteurs de recherche.
• Augmenter le nombre des prospects.
Avant de soumettre notre site web aux bases de données des différents moteurs de
recherche nous devrions respecter quelques principes de base afin d’optimiser l’indexation de
ses pages :
• Choix explicite de nom du domaine: il est important de le choisir avec prudence et

réflexion car certains moteurs de recherche effectuant l’indexation des sites en prenant
en compte leur nom du domaine.
Le nom de domaine choisi est www.trbejaia.com sa disponibilité était vérifier sur
www.thais-dz.net .
• Insertion des balises <META> pour les descriptions et les mots clés de chaque page.
• Les balises <IMG> doivent être associées de l’attribut ALT qui permet d'afficher du
texte lorsque l'image ne peut être affichée.
• Mettre un titre descriptif aux pages du site.
IV.4. Hébergement
L'hébergement d’un site peut se définir comme la prestation d'un service visant à rendre
un site Web accessible sur Internet.
38
Afin que les pages web soient visibles par tout le monde il faut qu’elles soient stockées sur un
serveur. Ce sont des sociétés spécialisées qui garantissent la meilleure accessibilité aux sites
hébergés, grâce aux moyens techniques et à l'expertise dont elles disposent [W11].
Le choix de la solution d'hébergement pour le site du TRB est important. La solution retenue
doit permettre de répondre aux besoins d'évolution du trafic du site tout en apportant :
disponibilité, sécurité et réactivité.
Le suivi du projet est la garantie du bon fonctionnement du site et de l’ensemble de ses

fonctionnalités. Après l’achèvement de notre site nous avons élaborés les différents moyens
pour le faire connaitre au grand public.
39
Conclusion générale
Conclusion
« L'idéal serait un monde où l'accès à l'information serait possible pour tous et un monde
non plus centré sur la volonté d'avoir mais la volonté de savoir »
Nicolas Lossky
Faciliter l'accès à l'information mais aussi donner à tous la possibilité d'y participer, tel
est le cadre de mon projet. La volonté d'innovation inspirée tous les jours par Internet a donc
permis à ce projet de voir le jour.
Ce stage s'est avéré être une expérience à la fois enrichissante d'un point de vue personnel
par la rencontre de nombreuses personnes mais aussi enrichissante d'un point de vue
professionnel en me permettant d’acquérir une méthode de travail en passons de la théorie a la
pratique, il m’a également permis de mieux connaitre mes gouts et aptitude et à renforcer ma
volonté pour découvrir les arts de la communication
J’espère avoir donné, au sein de Thaïs production et théâtre Régional de Bejaia,

satisfaction dans le travail qui m’a été confié.
40
Annexes
Annexes
Annexe 1 : Diagramme de Gantt :

Temps Juillet Aout Septembre
Tâches
S1 S2 S3 S4 S1 S2 S3 S4 S1 S2 S3 S4
Analyse de projet et
définition des besoins
Réalisation des
maquettes
Elaboration d’un cahier
des charges
Réalisation de la partie
statique
Réalisation de la partie
dynamique
Test et contrôle
Formation des usagers
Durée estimée
Temps de réalisation
Annexes 2 : Imprimés écran des sites analysés :

Annexes
Site1 : www.theatrelhamra.com
Site 2 : www.theatre-des-varietes.com
Annexes
Annexe 3 : Polices conseillées pour le web [W9] :

Annexes
Police Fondeur Caractéristique Usage

Arial Monotype Sans serif Imprimé, Web
Arial Black Monotype Sans serif, forte graisse Imprimé, Web
Comic Sans MS Microsoft Police fantaisie, sans serif Web
Courier New Monotype Chasse fixe Simulation listing
Georgia Microsoft Empattements simples Web
Impact Monotype Sans serif Imprimé, Web
Symbol Monotype Caractères grecs Imprimé, Web
Times New Roman Monotype Empattements Imprimé, Web
Trebuchet MS Microsoft Sans serif Web
Verdana Microsoft Sans serif Web (petits caractères)
Webdings Microsoft Icônes Web
Annexe 4 : Maquettes proposées :

Annexes
Annexe 5: Exemple de flux RSS

Annexes
<?xml version="1.0" encoding="ISO-8859-1"?>

<rss version="2.0">
<channel>
<title>Mon site web</title>

<link>http://monsiteweb.com</link>
<description>Les news de mon site web</description>
<item>
<title>Un site web pour partager ses signets</title>
<link>http://del.icio.us</link>
<guid isPermaLink="true">http://del.icio.us</guid>
<description>Le site http://del.icio.us permet de
partager vos signets et d'y accéder où que vous soyez.</description>
<pubDate>Wed, 5 Aug 2005 19:30:00 GMT</pubDate>
</item>
<item>
<title>Enfin un flux RSS !</title>
<link>http://monsiteweb.com/rss.html</link>
<guid
isPermaLink="true">http://monsiteweb.com/rss.html</guid>
<description>Un flux RSS a été installé sur mon site.
Vous pouvez le consulter avec votre logiciel favori.</description>
<pubDate>Wed, 3 Aug 2005 15:17:00 GMT</pubDate>
</item>
</channel>
</rss>
En vert, les informations sur le flux lui-même (juste après <channel>):
• <title> : Le titre de votre flux (ou le nom de votre site web).

• <link> : Le lien vers votre site web.
• <description> : La description de votre flux (exemple: "Les mises à jour de mon site")
En rouge: Ensuite viennent chacune des informations (dans chaque <item>):
• <title> : Titre de l'information.

• <link> : Lien vers la page web correspondante.
• <guid> : Un identifiant unique de votre information. Vous pouvez mettre le texte que
vous voulez: L'important est qu'il soit unique (qu'on ne le retrouve pas dans un autre
<item>). Cela permet de distinguer les <item> entre eux.
• <description> : Texte descriptif ou résumé de l'information.
• <pubDate> : Date de cette information.
Bibliographie
Bibliographie
[MAG04] Magali Contention, les bases de données et Internet avec PHP et MySQL, Edition
DUNOD, Paris 2004.
[KEB05] Kebir Mohamed Ines, formation au langage PHP/MYSQL, Edition TUNIS 2005.
[BAR03] C. Barroca, Graphisme et Ergonomie des sites web, Edition DUNOD, 2003.
[JEA06] Jean engels, Xhtml et css cours et exercices, Groupe Eyrolles, 2006.
[PAS03] Pascal Roques, Modéliser un site e-commerce, Edition EYROLLES, 2003.
Webographie
[W1] http://gestion.de.projet.free.fr
[W2] http://www.ergolab.net
[W3] http://www.graphic-evolution.fr
[W4] www.commentcamarche.net
[W5] http://webyo.net
[W6] http://www.incaformations.com
[W7] http://www.toutjavascript.com
[W8] http://www.apache.org
[W9] http://cerig.efpg.inpg.fr
[W10] http://www.e-visibilite.com
[W11] http://www.websiteout.fr
[W12] http://www.ecrans.fr/Mode-d-emploi-Les-flux-RSS

Memoire

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Memoire

Hochgeladen von

Copyright:

Verfügbare Formate

République Algérienne Démocratique et Populaire

Ministère de l’Enseignement Supérieur et de la Recherche Scientifique

Mémoire de fin de cycle

Melle MESSAOUDI Kahina

Dr. TARI Abdelkamel

J’exprime ma grande gratitude et tout mon respect à mon promoteur Dr A. Tari

Je remercie vivement le jury d’avoir accepter de juger et de valoriser mon

Mes remerciement s’adresse aussi a toute personne ayant contribuée d’une

Que toutes ces personnes, et celles qui ne sont pas nommément

II.1.1. Contenus du site

II.3. Services et Fonctionnalités

Figure 1: logo du Théâtre Régional de Bejaia............................................................3

Figure 13: Page d’accueil administrateur ...............................................................33

Depuis plus de 10 ans, internet est devenu un moyen de communication

Dans ce contexte, la direction du théâtre Régional de Bejaia désire avoir un

L'objectif de ce rapport est de présenter le déroulement du stage que j'ai

I.1. Présentation de la société d’accueil

• Aider le client à définir ses besoins pour la stratégie de communication.

I.2. Présentation du théâtre

I.3. Logo du théâtre

Figure 1: logo du Théâtre Régional de Bejaia

I.4. Présentation du projet et son objectif

Il devra aussi répondre aux objectifs de la communication suivants:

Cognitifs : faire connaitre le TRB à travers le territoire national et international.

I.6. Les acteurs du projet

I.8. Gestion de projet

Tâches Durée d’achèvement

Recueil des attentes, analyse de

Validation de cahier des charges,

Figure 2: Planning des tâches.

I.9. Analyse concurrentielle

Le tableau ci-dessous regroupe les informations issues de cette étude :

Adresse du site www.theatrelhamra.com www.theatre-des-varietes.com

Date d’analyse Juillet 2008 05 Juillet 2008

Public visé le jeune public, les partenaires, les Adeptes du théâtre.

auteurs Al-kazart C4 Aquitaine

Langue(s) Français, (Anglais, Arabe : en Français

Technologie HTML, JavaScript, Flash, PHP HTML, JavaScript, Flash, PHP

Accès au site Libre Libre

Barre de navigation verticale avec Menu principale verticale

Style du langage Simple Simple

interactivité de Oui Newsletter, Actualité, Actualité, Formulaire contact,

Norme W3C 14 erreurs 81 erreurs

Référencement Faible Bon référencement

Ergonomie claire, La navigation est intuitive,

Les technologies employées ne Mise en page non adaptée à toutes

Présence d’une page vide

Le site est conçu avec des cadres,

II.1. Spécifications fonctionnelles

II.1.1. Contenus du site

1. La rubrique « Accueil » contenant le spectacle à l’affiche et les spectacles

II.1.2. Composants additionnels

Le site comprend les composants suivants:

• Le format est simple (la syntaxe est plus lisible)

• Le format est bien reconnu.

II.2. Arborescence des pages

L'arborescence d'un site représente les différentes pages de celui-ci, organisées

Figure 4: Arborescence du site.

II.3. Services et Fonctionnalités

Le site devra permettre aux internautes certaines fonctionnalités comme :

II.3.1. Téléchargement de brochures PDF

II.3.2. Espace interactif

II.2. Conception visuelle