Rpublique Algrienne Dmocratique et Populaire Ministre de lEnseignement Suprieur et de la Recherche Scientifique Facult des Sciences Exactes Dpartement dInformatique

Licence Professionnelle Activits et Techniques de Communication Option Animation et gestion des sites Web

Mmoire de fin de cycle

Thme
Conception et ralisation dun site Web dynamique pour le Thtre Rgional de Bejaa

Prsent par Melle MESSAOUDI Kahina

Promoteur Dr. TARI Abdelkamel

Promotion 2007/2008 i

Remerciements
Je commencerai ce rapport en ayant une pense sincre et trs spciale pour toutes les personnes qui mont aid et soutenu pendant cette priode dintgration au monde professionnel. Je remercie Thas production de mavoir accueilli en ces deux mois de stage qui ma permit de dcouvrir, apprendre, construire, me passionner pour ce secteur de la communication qui me plait particulirement. Merci pour la confiance et la latitude qui mont t accords. Jai t enchant de travailler avec lquipe de cette socit qui a montr une bienveillance et une sympathie notables mon gard. Jexprime ma grande gratitude et tout mon respect mon promoteur Dr A. Tari de mavoir suivi tout au long de mon stage. Je remercie vivement le jury davoir accepter de juger et de valoriser mon travail. Mes remerciement sadresse aussi a toute personne ayant contribue dune manire ou dune autre laboutissement 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 trs bons moments. Que toutes ces personnes, et celles qui ne sont pas nommment cites mais qui ont galement de prs ou de loin pris part ce travail, reoivent ici lassurance de ma gratitude.

Sommaire
Liste des figure...........................................................................................................5 Introduction................................................................................................................6 Phase I........................................................................................................................7 Etude pralable...........................................................................................................7 Et.................................................................................................................................7 Analyse de projet........................................................................................................7 I.1. Prsentation de la socit daccueil .....................................................................2 I.2. Prsentation du thtre ........................................................................................2 I.3. Logo du thtre ...................................................................................................3 I.4. Prsentation 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. Spcifications 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 Fonctionnalits ..................................................................................................................................13 II.3.1. Tlchargement 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 dcran ..................................................................................16 II.2.2.5. Maquette de la page daccueil.............................................................18 II.3. Modlisation UML ..................................................................................................................................21 II.3.1. Dfinition de lUML..................................................................................21 II.3.1.1. Diagramme de cas dutilisation ..........................................................................................................................21 II.3.1.2. Diagramme de squence ..........................................................................................................................23 II.3.1.3. Diagramme de classe ..........................................................................................................................26 Phase III....................................................................................................................28 Ralisation................................................................................................................28 III.1. Outils utiliss ..................................................................................................27 III.2. Langages utiliss .................................................................................................................................28 III.3. FrontOffice ..................................................................................................................................30 III.3.1. La page daccueil ..............................................................................................................................31 III.4. BackOffice ..................................................................................................................................32 III.4.1. Socle technique ..............................................................................................................................33 Phase IV....................................................................................................................37 Suivi du projet..........................................................................................................37 IV.1. Test et contrle ................................................................................................37 IV.2. Formation des usagers ....................................................................................37 IV.3. Rfrencement ................................................................................................37 IV.4. Hbergement ...................................................................................................38 Conclusion................................................................................................................40 Annexes....................................................................................................................41 Bibliographie .................................................................................................................................48

iii

Liste des figure

Figure 1: logo du Thtre Rgional de Bejaia............................................................3 Figure 2: Planning des tches.....................................................................................6 Figure 3: Analyse concurrentielle...............................................................................8 Figure 4: Arborescence du site.................................................................................13 Figure 5: Couleurs utiliss dans le site.....................................................................15 Figure 6: Gabarit dcran..........................................................................................18 Figure 7: Maquette de la page daccueil...................................................................19 Figure 8: Maquette de la page Child Show...............................................................20 Figure 9: Diagramme de cas dutilisation................................................................22 Figure 10: Diagramme de classe..............................................................................27 Figure 11: Page dintroduction.................................................................................31 Figure 12: Page dauthentification...........................................................................32 Figure 13: Page daccueil administrateur ...............................................................33 Figure 14: Gestion de la newslettr............................................................................35

iv

Introduction
Depuis plus de 10 ans, internet est devenu un moyen de communication incontournable. Ds que le besoin en communication dpasse celui d'une enseigne sur rue, le web un outil envisager en sus des mdias 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 prsent tout moment et nimporte ou, et d'tendre son espace de communication une couverture mondiale en prsentant des informations qui pourront voluer la demande. Dans ce contexte, la direction du thtre Rgional de Bejaia dsire avoir un outil dimage pour ses productions, ses moyens et son savoir-faire. L'objectif de ce rapport est de prsenter le droulement du stage que j'ai effectu au sein d'une socit de production audiovisuel "Thas production" pendant deux mois, dans le cadre de licence professionnelle en activits et techniques de communication, dont ma mission est la cration dun site web pour le Thtre Rgional de Bejaia. Le prsent trait dcrit le contexte du travail qui m'a t confie ainsi que son excution. Il sarticule autour de quatre parties principales, la premire prsente une tude pralable de projet et les objectifs fixs. La suivante sera consacre pour la conception o seront voqu les spcifications fonctionnelles, lergonomie et la charte graphique ainsi que la modlisation de notre systme, La troisime partie portera sur la ralisation du site savoir les technologies utiliss et la description de lespace administrateur et utilisateur. Enfin la quatrime partie sera accorde au suivi de projet.

Phase I

Etude pralable Et Analyse de projet

Phase I: Etude pralable et analyse de projet

Rapport de stage

Lanalyse du projet est la phase dclencheuse pour commencer la conception dun site en se posant de la faon la plus exhaustive les bonnes questions, elle sert rassembler les diffrents besoins engendrs pour la cration du site web : ce que contiendra le site et comment il devrait se prsenter. En effet, cette tude est une phase essentielle dans laquelle une rflexion globale est mene sur la socit daccueil ainsi que sur les diffrentes tches effectuer pour atteindre les objectifs attendus.

I.1. Prsentation de la socit daccueil

Thas Production est une socit de prestation de services, cre en 2003 Bejaia. Elle agit dans les diffrents aspects relevant du marketing avec un intrt particulier pour la communication sous toutes ses formes. Elle opre la fois en tant que socit de production, dans les domaines: Audiovisuel, Design graphique et MultiMedia, en tant quagence de conseil en communication : pour le diagnostic, llaboration et la mise en uvre dun plan de communication et en tant que rgie publicitaire qui commercialise des espaces sur diffrents mdias (TV, Radio, Presse crite et revues spcialises), etc. Ses principaux objectifs sont : Aider le client dfinir ses besoins pour la stratgie de communication. Promouvoir limage de marque du client auprs les consommateurs. Valoriser loffre 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 confirms de leurs produits.

I.2. Prsentation du thtre

Conu par larchitecte Albert MOREN, Le Thtre de Bejaia a t btis en 1936, sous la gestion de la municipalit FELIX BORG. Il dpendait de la municipalit de Bejaia, jusqu ce que la commune le cde au ministre de la culture en 1985. Il sera alors rig en Thtre Rgional ; le Thtre Rgional de Bejaia par le dcret excutif N 85-172 du 18 juin 1985. Le dmarrage des activits a eu lieu le 01 Fvrier 1986. 2

Phase I: Etude pralable et analyse de projet

Rapport de stage

I.3. Logo du thtre

Le thtre possde son propre logo illustr dans la figure 1, conu par lartiste Tahar Khelfaoui. Le logo est sous forme dun masque refltant le thtre et dont la structure reprsente les premires lettres en arabe composant le Thtre Rgional de Bejaa .

Figure 1: logo du Thtre Rgional de Bejaia

I.4. Prsentation du projet et son objectif

Le sujet de mon stage est la mise en place dun site web dynamique pour le Thtre Rgionale de Bejaia afin de : Vulgariser le contenu des programmes de TRB. Promouvoir le thtre auprs de linternaute (nouveau publique). Crer un espace Forum pour le quatrime art. Permettre un accs rapide aux informations.

Il devra aussi rpondre aux objectifs de la communication suivants: Cognitifs : faire connaitre le TRB travers le territoire national et international. Affectifs : faire aimer le thtre et ses productions. Pour atteindre cet objectif lorganisation doit tre plaisante et la structure du contenu renforcera la relation de proximit entre linstitution et le public, ce qui permettra de leurs confrer une image positive et attractive. Conatifs : faire agir le public : encourager le public des pratiques thtrale, et linciter se rendre dans le thtre. Cela se fera par linteractivit entre le public et le thtre en favorisant les brochures dinformation, les courriers lectroniques et les abonnements la newsletter.

Phase I: Etude pralable et analyse de projet

Rapport de stage

I.5. Perspectives
La direction du thtre souhaite que lhistorique du thtre soit mis en information ainsi que la mise jour du site en matire de la programmation et de linformation. Elle souhaite aussi que le site soit un espace de vie et dchange avec dautres activits qui se tiennent au niveau national et international.

I.6. Les acteurs du projet

Les diffrents acteurs de ce projet sont : Le directeur du Thtre Rgionale de Bejaia qui a pour rle de bien dfinir les besoins et de fournir les contenus de base (textes, brochures, logos, images, photos). Le directeur de Thas production qui veille au respect des dlais et valide les phases de choix (ergonomie, graphismes, contenus). Mlle Messaoudi kahina qui a pour rle de concevoir et raliser le site web, proposer un planning de ralisation en accord avec le client et de respecter les dlais. Le promoteur, Mr Tari Abdelkamel (enseignant luniversit de Bejaia) qui veille au bon droulement de ce projet.

I.7. La cible
Les personnes susceptibles d'tre intresses par notre site Web sont : Le public principal : Adeptes du thtre, tudiants, lycens. Le publique secondaire : Jeunes de huit quatorze ans.

I.8. Gestion de projet

La russite de tout projet web repose sur trois fondements essentiels : Une bonne formulation des besoins du client. La comprhension des besoins du client par le prestataire. La facilitation des changes et de la communication. Afin de garantir la russite de notre projet nous avons procder comme suit :

Phase I: Etude pralable et analyse de projet

Rapport de stage

La premire tape est une rflexion mene par le client au sujet de lide quil se fait de son projet. Une runion avant-projet tait organise pour dfinir les besoins. La seconde rside en llaboration dun cahier des charges dont le but est de montrer au client que ses besoins sont pris en charge. La dernire tape intervient tout au long de lvolution du projet, notamment lors des tapes suivantes : 1. 2. client. 3. client. 4. Prise en compte des remarques mises par le client. Demande de mise disposition de ressources documentaires / rponse du Proposition de la maquette et sa validation par le client. Ralisation de tests lors du dveloppement du site et les faire valider par le

Pour visualiser dans le temps les diverses tches composant notre projet, nous avons utilis le diagramme de Gantt1 qui est un outil standard de gestion de projets utilis pour planifier efficacement les tches et suivre ensuite leurs progressions. Il offre une reprsentation graphique du projet en planifiant les tches sur un calendrier [W1]. Le planning de notre projet est reprsent dans la figure ci-dessous, celui-ci tait dfini aprs avoir analys l'ensemble des besoins, puis imaginer des contextes d'utilisation, les estimations du temps ont tait obtenus par rapport limportance de chaque tche.

Tches

Dure dachvement

Recueil

des

attentes,

analyse

de Deux semaines

larborescence souhaite pour le site, laboration des grandes lignes de la charte graphique. Ralisation de deux maquette finale.
1

maquettes pour Une semaine

l'approche graphique et validation de la

: Voir Annexe 1

Phase I: Etude pralable et analyse de projet Validation de cahier des charges,

Rapport de stage

transformation de la maquette graphique en page HTML, cration de la suite des pages et intgration dans le socle Deux semaines technique. Cration et mise en place de larchitecture de la base de donnes, conception de la partie dynamique. Tests / Contrles, formation pour ladministrateur du site. Une semaine Trois semaines

Figure 2: Planning des tches.

I.9. Analyse concurrentielle

Lanalyse concurrentielle est une dmarche utilise trs frquemment dans le cycle de conception dun produit informatique. Elle consiste tudier les sites et applications que lon juge concurrents ou comparables, afin den extraire leurs aspects positifs et ngatifs, dviter ces derniers et de profiter des autres. Comme elle permet de s'inspirer de bases existantes, qui peuvent tre analyses d'un point de vue ergonomique pour mettre en place un site ayant une plus-value pour les futurs visiteurs et rpondre parfaitement aux attentes du client [W2]. Nous avons effectu une tude sur deux sites, lun est Tunisien et lautre Parisien2. Notre comparaison cest port sur ces sites afin de diffrencier le thtre arabe et le thtre franais dans leurs contenu ainsi que leurs stratgie dans la diffusion de linformation. Le tableau ci-dessous regroupe les informations issues de cette tude :

Site 1
2

Site 2

: voir annexe 2.

Phase I: Etude pralable et analyse de projet

Rapport de stage

Nom du site Adresse du site Date danalyse Public vis

Hamra, thtre de tous les arts www.theatrelhamra.com Juillet 2008 le jeune public, les partenaires, les artistes, jeunes professionnels issus des deux rgions : Arabe et Afrique. Al-kazart Franais, (Anglais, Arabe : en construction) HTML, JavaScript, Flash, PHP

Thtre des varits www.theatre-des-varietes.com 05 Juillet 2008 Adeptes du thtre.

auteurs Langue(s) utilise(s) Technologie utilise Accs au site

C4 Aquitaine Franais

HTML, JavaScript, Flash, PHP

Libre Barre de navigation verticale avec 4 rubriques, chaque rubrique contient un menu contextuel, une autre horizontale avec trois rubriques situes au pied de page. Simple

Libre Menu principale verticale comporte 5 rubriques, celle-ci se composent des sous menus. Un menu horizontal au bas de page comporte trois liens. Simple Les couleurs utilises sont : Blanc, marron, dor. usage de photos relles du thtre pour la charte graphique. La typologie est Verdana avec une taille de 8.5 px. Utilisation de la technologie Flash. Simple, informative

Hirarchisation/ Organisation

Style du langage

Mtaphore/ forme couleurs prdominantes sont le Graphique rouge, le noir et le dor. La typographie utilise est Verdana. Les images intgres refltent lobjectif du thtre. Prsence danimation dans la bannire. Type de navigation Simple 7

Phase I: Etude pralable et analyse de projet

Rapport de stage

interactivit de site Liens vers dautres sites

Oui Newsletter, Actualit, Formulaire contact. Oui (lien vers lagence qui a cre le site)

Actualit, Formulaire contact, moteur de recherche. Oui (lien vers lagence de conception et de dveloppement, lien vers l'hbergeur) 81 erreurs
Bon rfrencement

Norme W3C Rfrencement

14 erreurs Faible Ergonomie claire, bonne hirarchisation du contenu, navigation simple et facilit par le menu droulant.

Les lments positifs

La navigation est intuitive, Les animations utilises ont apport un dynamisme supplmentaire au site. Les balises Meta3 est Alt4 sont insres. Mise en page non adapte toutes les rsolutions. Police non respect pour toutes les pages. Lisibilit rduite par rapport la taille de la police des textes.

Les lments ngatifs

Les technologies employes ne sont pas conformes aux normes de W3C, ce qui a rduit laccs au site. Redondance dinformation (la rubrique News et la rubrique Programme amnent aux mmes informations), Prsence dune page vide (Partenaire) sans aucun commentaire. Le site est conu avec des cadres, ce qui peut empcher certains moteurs de recherche d'indexer ses pages et d'en lire le contenu.

Figure 3: Analyse concurrentielle

3 4

: Balise qui contient des mots cls. Les moteurs de recherche accordent de limportance cet lment. : Attribut de la balise <img>, il permet d'afficher du texte lorsque l'image ne peut tre affiche et donne la possibilit de communiquer alternativement avec les malvoyants.

Phase I: Etude pralable et analyse de projet

Rapport de stage

Cette premire tape a plac le projet dans une vue globale, elle nous a permis de cerner les besoins ncessaires, essentiels, fonctionnels et techniques afin de rpondre aux attentes attendues. Apres avoir tablit lanalyse de projet, nous sommes amnes dentamer la conception du site TRB en tenant compte des besoins de la direction, des objectifs fixs et de la concurrence afin dviter les points ngatifs et de profiter des points positifs.

Phase I: Etude pralable et analyse de projet

Rapport de stage

10

Phase II

Conception

Phase II : Conception

Rapport de stage

Une fois l'analyse des besoins termine et la pertinence du projet confirme, l'tape suivante est la conception qui consiste dfinir toutes les tapes techniques ncessaires sa ralisation, depuis la structuration des informations dans les diffrentes pages jusqu la ralisation de la charte graphique et la ralisation des pages elles-mmes. Elle englobe les spcifications fonctionnelles du site, la conception visuelle et la conception technique.

II.1. Spcifications fonctionnelles

Cette phase consiste dfinir les rubriques et leur contenu, la structure des pages et leur arborescence.

II.1.1. Contenus du site

Les visiteurs reviennent gnralement sur un site pour son contenu, plus que pour son design. Les tudes menes sur les internautes montrent que le facteur d'apprciation principal d'un site web est en premier lieu le contenu. Ainsi, un site simple avec un contenu fort intressant sera potentiellement bien plus visit qu'un site creux au graphisme soign. Aprs la rcolte des besoins, nous avons pu distinguer les diffrentes rubriques par rapport lobjectif du site et aux attentes de la direction. Notre site est compos de six rubriques principales, celle-ci permettra linternaute laccs aux informations recherches: 1. La rubrique Accueil contenant le spectacle laffiche et les spectacles prochainement laffiche, elle contient aussi une page dcrivant lhistorique du thtre. 2. Une rubrique Thtre listant ses diverses productions pour les diffrentes catgories (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 (thtre, musique, arts contemporain). 4. Une page Exposition programme des expositions et des vernissages au niveau des halls du TRB. 10

Phase II : Conception

Rapport de stage

5. Une page Archives aura pour but de mettre la disposition des visiteurs tout les archives du thtre. 6. Un page Contact contiendra les coordonnes du thtre et un formulaire de contact.

II.1.2. Composants additionnels

Le site comprend les composants suivants: 1. Une newsletter : cest une lettre d'information adresse par mail aux abonns. Lors de linscription, ladresse e-mail de labonn sera enregistre dans la base de donnes. 2. Un Forum: est un espace de discussion qui permet en temps rel de recueillir lavis des visiteurs du site, a savoir ce quil les motive a frquenter ce dernier, ce qui leur dplait ainsi que des suggestions damlioration. 3. Une syndication RSS (Really Simple Syndication) : est en ralit un fichier au format XML5, avec un schma (une structure) particulire. Les flux RSS sont une nouvelle manire de prsenter linformation sur le web. Traditionnellement, chaque site propose ses actualits sur une page web, accessible depuis un navigateur (Internet Explorer ou Firefox, par exemple). Pour suivre lactualit de sites multiples, il fallait donc visiter chacun dentre eux les uns aprs les autres. Et plus on visite de sites, plus a prend du temps. Et moins cest pratique. Le flux RSS (acronyme de Really Simple Syndication : distribution vraiment simple) vise rsoudre ce problme. Techniquement, il sagit dun petit fichier, mis jour par chaque site, dans lequel on ne trouve que les actualits, sans aucune mise en forme. Le fichier lui-mme nest 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 prsenter de manire simple et unifie au lecteur. Concrtement, a signifie quau lieu de visiter quinze sites pour voir les infos, il suffira de nen visiter quun seul, qui regroupera tout a sur une page unique. En clair : on se cre son petit fil dinfo personnel. En pratique, des navigateurs web comme Firefox ou Internet Explorer 7 permettent de grer directement les flux RSS, mais les fonctionnalits offertes sont peu pratiques. Il est galement possible dinstaller un logiciel supplmentaire pour la gestion de flux, mais de prfrence se
5

: voir exemple en annexe 5.

11

Phase II : Conception

Rapport de stage

tourner vers des sites spcialiss, accessibles partout et bien conus. Pour cette introduction, on prsentera les sites Netvibes et Google Reader , deux des plus utiliss, qui proposent chacun une prsentation diffrente de linformation [W12]. La version de RSS choisie est RSS 2.0 pour les raisons suivantes: Le format est stable (la spcification 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 reprsente les diffrentes pages de celui-ci, organises logiquement et hirarchiquement sous forme d'un arbre. La premire 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 mmorisation des pages sont ainsi plus facile, rapide et efficace [W3]. Aprs avoir fait la nomenclature des contenus du site et les regrouper par thmatique nous avons pu distingus les diverses rubriques de ce dernier. Ds lors que les principales rubriques sont identifies, nous avons dtermin leur organisation et leur dcoupage en sous-rubriques. La structure que nous avons donn notre site a permis dorganiser les donnes en gardant ses objectifs, elle a tait choisi afin de faciliter la navigation dans le site et permettre aux internautes laccs aux informations dune manire transparente en trois clics de souris. La figure ci-dessous illustre larborescence gnrale de notre site :

12

Phase II : Conception

Rapport de stage

Figure 4: Arborescence du site.

II.3. Services et Fonctionnalits

Le site devra permettre aux internautes certaines fonctionnalits comme :

II.3.1. Tlchargement de brochures PDF

Nous avons opt pour le format Portable Data File (PDF)6 pour le tlchargement des brochures spcifiques des spectacles. Ce format permet de proposer des fichiers mis en page de faon prcise, et imprimables sur toute plateforme.

: PDF, qui signifie Portable Document Format (traduit littralement par format portable de documents), est un format de fichier informatique cr par la socit Adobe Systems. Il est noter que c'est un format ouvert : ses spcifications sont publiques et utilisables librement.

13

Phase II : Conception

Rapport de stage

II.3.2. Espace interactif

Pour favoriser les dbats avec les internautes, nous allons intgrer au site un forum. Pour cela, nous allons utiliser un forum PHPBB. En effet, celui-ci intgre toutes les fonctions ncessaires la bonne marche dun forum sur internet. Il est scuris et open source.

II.2. Conception visuelle

La conception visuelle vise ltude du design ainsi que lergonomie d'un site.

II.2.1. Ergonomie et accessibilit

L'ergonomie d'un site se dtermine par le type de navigation entre les pages, l'intelligence de leur disposition et le placement des diffrents lments qui composent le site. Une bonne ergonomie offre une vue d'ensemble des informations et services offerts sur un site ds le premier coup d'il. Elle est principalement dicte par l'analyse de la structure des rubriques et menus et par la manire dont est pense l'interface de navigation [BAR03]. La cration graphique constitue un des facteurs importants de la visibilit du site. Il est donc important d'y apporter toute l'attention ncessaire, 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 dvelopp pour les anciennes versions des navigateurs web. Le format d'affichage est de 800 x 600 sadapte toutes les rsolutions. Une navigation adapte : laborer une navigation logique, simple et intuitive, la prsence d'une barre de navigation et le respect de la rgle des trois clics. Performance : Le temps d'affichage devra tre correct pour des liaisons bas dbit et la taille dune rapidement. Cest rgles d'ergonomie rend le site utilisable par le plus grand nombre de personnes avec un maximum de confort et d'efficacit. 14 page Web ne doit pas occuper plus de 40 Ko pour se charger

Phase II : Conception

Rapport de stage

II.2.2. la Charte graphique

La charte graphique est le document synthtique rcapitulant les rgles de prsentation des lments graphiques d'un site web, traduisant son identit visuelle, notamment la taille et la couleur de la police, des images et des boutons [W4]. Laspect visuel permet aussi de structurer les ides, de maintenir prsent lobjectif du site, denrichir la mise en page, davoir une cohrence visuelle qui guidera lusager tout au long de sa visite. Cette section comprend lensemble des lments visuels du site; les couleurs slectionnes, la typographie, les animations,

II.2.2.1. Orientation chromatique Le choix des couleurs est primordial lors de la conception dun site web. Pour que notre site soit en harmonie avec le thtre, nous avons choisi les couleurs suivantes dclines en charte graphique pour les arts dexpressions thtrales:

#8e0318

#ffffff

#b57e34

# c1180e

# 000000

Figure 5: Couleurs utiliss dans le site.

II.2.2.2. Orientation typographique Le choix des polices de caractre sera simplifi aux limites imposes par Internet. En effet, les navigateurs ne disposent pas tous des mmes listes de police de caractre car ils utilisent celles disponibles sur la machine o ils sont installs. Pour cela, il est recommand dutiliser des polices communes aux deux plates formes Mac et PC pour que laffichage soit assur par tous les navigateurs7. La police que nous avons utilise est Verdana dune taille 11 px pour les textes, et 12 px gras pour les titres. Elle tait choisie pour sa lisibilit lcran comme elle est trs utilise sur le web.
7

: Voir annexe 3.

15

Phase II : Conception

Rapport de stage

II.2.2.3. Animations Flash Les animations flash sont trs utilises car elles apportent un aspect vivant aux sites, leurs utilisation sont recommandes sans que cela ait un grand impacte sur le temps de chargement. Pour notre site, nous avons utilis des animations flash dans la page dintroduction ainsi que la bannire.

II.2.2.4. Gabarit dcran Une belle mise en page dcoule forcment d'un gabarit de maquette adquat. Le travail de mise en page est dlicat et prcis, il sappui sur le respect dun certain nombre de rgles typographiques. Le gabarit dcran de notre site se compose des parties suivantes :

16

Phase II : Conception

Rapport de stage

700px

106px

Logo

Bannire

Menu

Contenu

Pied de page

42px

Variable selon le contenu

17

Phase II : Conception

Rapport de stage

42px

Figure 6: Gabarit dcran.

Toutes les pages du site sont dveloppes selon ce modle. Le modle est organis en trois zones principales : Zone horizontale haute : comporte la bannire et le logo du thtre. 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 daccueil La phase de recueil des besoins est importante pour dfinir l'esprit du site afin d'laborer une ligne graphique cohrente avec les attentes du commanditaire. A partir du recueil des besoins, nous avons propos deux approches graphiques diffrentes pour la page d'accueil8. Aprs un assemblage des points positifs des approches proposs, nous avons labor la maquette finale du site en dfinissant la structure de la page d'accueil et l'enchanement des diffrentes pages. La maquette suivante donne une ide claire de la reprsentation de notre site :

: Voir annexe 4

18

Phase II : Conception

Rapport de stage

Figure 7: Maquette de la page daccueil.

Les zones haute et basse sont communes toutes les pages dcran, seule la zone centrale blanche variable. Excepte la page Child show qui changera compltement le design, la figure ci-dessous illustre cette dernire.

19

Phase II : Conception

Rapport de stage

Figure 8: Maquette de la page Child Show.

20

Phase II : Conception

Rapport de stage

II.3. Modlisation UML

Toute technique de modlisation doit prendre en compte, non seulement les lments pertinents propre au web, tels que les pages Web et les liens hypertextes, mais aussi leurs relations avec les lments darrire plan du systme, tels que les bases de donnes. Un modle est une abstraction de la ralit, il s'agit d'un processus qui consiste identifier les caractristiques intressantes d'une entit en vue d'une utilisation prcise. Il reflte des aspects importants de la ralit, il en donne donc une vue juste et pertinente afin de faciliter la comprhension du systme tudi, rduire sa complexit, le simuler, le reprsenter et reproduire ses comportements. La modlisation de notre systme est fonde sur lutilisation dun sous-ensemble ncessaire et suffisant du langage UML, savoir les diagrammes de cas dutilisation, le diagramme de classes et les diagrammes de squence.

II.3.1. Dfinition de lUML

UML (Unified Modeling Language) est un langage qui permet de traduire les modles et les conceptions de systmes dune faon oriente objet en fournissant un ensemble de symboles (notations) et de rgles qui rgissent lassemblage de ces symboles (syntaxe et smantique) [PAS03]. Le choix de ce langage est justifi par sa fiabilit et sa facilit dutilisation, de plus, elle permet de modliser de manire claire et prcise la structure et le comportement dun systme indpendamment de toute mthode ou de tout langage de programmation.

II.3.1.1. Diagramme de cas dutilisation Le diagramme de cas d'utilisation reprsente les cas d'utilisation, les acteurs et les relations entre eux, il permet d'identifier les possibilits d'interaction entre le systme et les acteurs [PAS03]. Les lments de base de ce diagramme sont :

21

Phase II : Conception Acteur : entit externe qui agit sur le systme.

Rapport de stage

Cas dutilisation : ensemble d'actions ralises par le systme, en rponse une action d'un acteur.
Pour notre systme nous retenons les acteurs : internaute et administrateur du site. Aprs avoir identifi les acteurs et leurs interactions avec le systme, nous somme amens laborer le diagramme de cas dutilisation suivant :

Linternaute

Ladministrateur

Figure 9: Diagramme de cas dutilisation.

22

Phase II : Conception II.3.1.2. Diagramme de squence

Rapport de stage

Le diagramme de squence est un diagramme dinteraction prsentant lordre chronologique des messages. Il reprsente un ensemble dobjets et de messages reus et envoys par ces objets. Cette reprsentation se ralise par cas dutilisation [PAS03]. Les cas dutilisation de notre systme reprsents par les diagrammes de squence sont : Lauthentification ainsi que la mise jour pour ladministrateur et labonnement au site pour lutilisateur.

Administrateur Atteindre

Page authentification

Page home admin

Demande dauthentification Saisir login et mot de passe

Crer

Rechercher Vrifier

Afficher un message derreur

Non OK

o u

OK

Afficher

Figure 10: Diagramme de squence Authentification .

23

Phase II : Conception

Rapport de stage

Administrateur Atteindre

Page home admin

Demande

Charger Charger la liste

Afficher

Afficher

Slectionne

Charger

Crer

Afficher Modifier info Crer Charger Afficher Enregistrer

Figure 11: Diagramme de squence Modifier les donnes

Administrateur Atteindre

Page home admin

Atteindre

Afficher

Saisir informations et validation

Enregistrer

Crer Charger

Afficher

Figure 12: Diagramme de squence Ajouter pice .

24

Phase II : Conception

Rapport de stage

Administrateur Atteindre

Page home admin

Demande

Charger Charger la liste

Afficher

Afficher

Demande suppression

Afficher message de confirmation

o u

Non OK Afficher OK Supprimer Charger Afficher Mettre jour

Figure 13: Diagramme de squence Supprimer pices .

25

Phase II : Conception

Rapport de stage

Utilisateur Atteindre

Page daccueil

Page rsultat

Saisir adresse mail

Envoyer Vrifier Enregistrer

Crer

Afficher

Figure 14: Diagramme de squence Sabonner au site.

II.3.1.3. Diagramme de classe Le diagramme de classe est gnralement considr comme le plus important dans la conception dune application. Il reprsente larchitecture conceptuelle du systme : Il dcrit les classes que le systme utilise, ainsi que les relations qui existent entre elles [PAS03]. La figure 15 illustre le diagramme de classe de notre systme :

26

Phase II : Conception

Rapport de stage

Figure 10: Diagramme de classe

Ltude conceptuelle du site nous servie structurer le contenu, dfinir laspect visuel de notre site et les stratgies labores pour atteindre les objectifs fixs et damener au bien notre projet. Nous allons abord dans la partie qui suit la phase dimplmentation qui prsentera les technologies utilises pour la cration des pages de notre site, et leurs utilits, comme elle prsente linteractivit du site pour le front et le back office.

27

Phase III

Ralisation

Phase III : Ralisation

Rapport de stage

Une fois la structure finalise et linterface de navigation entirement fonctionnelle, la phase dimplantation peut commencer. Cette section prsente les technologies dployes, leur fonctionnement et leur utilit comme elle dcrit lespace utilisateur et lespace administrateur.

III.1. Outils utiliss

Adobe Photoshop : est la solution de rfrence pour la conception et la production de graphiques Web professionnels. Il sagit du premier environnement de production permettant daborder et de rsoudre les dfis particuliers poss aux concepteurs et aux dveloppeurs de graphiques Web [W5]. Cet outil nous a permis la conception des maquettes graphiques et les retouches des images. Macromdia dreamweaver : Dreamweaver est un logiciel de cration de pages web performant et rput dans le monde professionnel. Ses aptitudes grer du code javascript de manire transparente allie la clart du code gnr en font l'outil privilgi des professionnels. Mais aussi, il est particulirement adapt pour l'intgration d'lments crs avec Fireworks, Flash ou dautres outils et sait grer les langages dynamiques et base de donnes [W5]. Nous avons utilis lditeur Dreamweaver pour la cration des pages de notre site. Toutes les pages du site devront tre valides par le W3C validator dont lurl est: http://validator.w3.org/ Macromdia flash : est une technologie multimdia base sur l'utilisation d'objets vectoriels et dveloppe initialement par Macromdia, puis rachet par Adobe. Il gnre des objets .swf qui peuvent tre intgrs des pages HTML. Il intgre un puissant langage de programmation ActionScript inspir de JavaScript et peut interfacer de nombreux types de bases de donnes. Ses aptitudes grer le son et la vido en font de plus l'outil rv des crateurs multimdia [W6].

27

Phase III : Ralisation

Rapport de stage

Ce logiciel nous a servi raliser la page Introduction, ainsi que quelque animation dans la bannire. PHPMyAdmin : Utilitaire permettant de grer des bases de donnes MySQL sur un serveur Web. Permet deffectuer toutes les tches ncessaires la mise en place et la maintenance dune base de donnes, savoir lajout, la modification, la suppression de tables et de donnes, avec un affichage simple et clair sous forme de listes et de tableaux [MAG04]. MySQL : est un systme de gestion de bases de donnes client/serveur open source. Ce SGBD est distribu sous licence GPL9 (gratuit) ou sous licence commerciale. Il est disponible pour de nombreux systmes dexploitation (Linux, Windoxs, Mac Os X). MySQL comporte un serveur, des clients et des outils dadministration [MAG04]. Le SQL dans "MySQL" signifie "Structured Query Language" : le langage standard pour les traitements de bases de donnes. Parmi ses avantages nous citons : Systme gratuit, open source, rapide et fiable. Application compte qui ralise toutes les gestions relatives aux donnes. Il est multi utilisateur, fonctionne en mode client/serveur (utilis avec PHP et associ un serveur apache). Apache: est un serveur web trs rpondu qui supporte le PHP. Sa conception modulaire le dote dune grande richesse fonctionnelle. IL sagit dune application fonctionnant, la base, sur les systmes dexploitation Unix, mais il a dsormais t port sur de nombreux systmes, dont Microsoft Windows [WWW8].

III.2. Langages utiliss

Pour accomplir cette phase dimplantation, nous avons fait appel aux diffrents langages suivant, notre choix est port sur ces langages pour notre adaptation leurs syntaxe et que ces langages sont les plus ddies pour le web.

: Type de licence qui autorise la modification et la redistribution des logiciels.

28

Phase III : Ralisation

Rapport de stage

HTML (Hyper Text Markup Language) : est un langage de description qui nous permet de dcrire laspect dun document, dy inclure des informations varies (textes, images, sons, animations, etc.) et dtablir des relations cohrentes entre ces informations grce 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 grs et excuts par le navigateur lui-mme sans devoir faire appel aux ressources du serveur. La dclaration de la fonction est faite dans l'en-tte, incluse dans une balise <script> </script>. Elle est ensuite appele dans le corps du texte par une balise de lien. Une des possibilits intressante du JavaScript consiste rcuprer des donnes 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 dfinir les spcifications de mise en forme de documents. Sa principale caractristique consiste diffrencier la structure (en gnrale dcrite en HTML ou XML) de la prsentation. Il peut grer la mise en forme de textes par des styles de classe (.class), il permet en outre la cration de blocs pouvant contenir textes ou images, qui seront librement dfinis en taille, position, couleurs, marges, visibilit etc... Cette caractristique fait du CSS un outil puissant pour contrler la mise en page. Il peut tre utilis en interne dans une page HTML, en ce cas, les styles seront dfinis dans l'entte entre des balises <style></style> mais de manire bien plus puissante, dans un fichier .css li, qui permettra alors le contrle de la prsentation de l'ensemble d'un site. Lavantage de leurs utilisation rside dans : Une stricte sparation du contenu HTML et des informations de mise en page. La modification des documents et ainsi facile. Un allgement du code-source des pages Web, et donc conomie de bande passante : une feuille de style n'est charge qu'une fois par un navigateur, qui l'applique sans dlai, si ncessaire, aux pages visites par la suite [JEA06].

29

Phase III : Ralisation

Rapport de stage

PHP : (HyperText Prprocesseur), initialement appel Personnal Home Page est un langage de programmation web gratuit et open source10, excut ct serveur, ce qui veut dire que cest le serveur (La machine qui hberge le site web en question) qui va interprter le navigateur. A la fois trs simple et performant, il a t dvelopp par la communaut Internet et est distribu sous forme de licence GNU11, ce qui lui a rapidement valu un succs considrable. Il s'interface facilement avec des bases de donnes type MySQL, mais peut aussi exploiter d'autres bases de donnes. Principalement exploit en couple avec un serveur Apache, il est portable sur de multiples plates-formes et un mme script peut fonctionner sur diffrents serveurs. Contrairement des langages gnraux (Perl, C, Java), il est uniquement ddi au dveloppement de pages web dynamiques [KEB05]. code PHP ensuite gnrer du code HTML comprhensible par le

III.3. FrontOffice
FrontOffice dsigne la partie visible pour linternaute, dont laccs est autoris tout le monde, il constitue un espace informatif de prsentation du thtre et ses productions. Laccs cet espace se fera par lintermdiaire dune introduction Flash qui comporte deux liens, un lien en flash et un autre en HTML pour ceux qui ne possdent pas le plug-in 12 Flash install sur leurs navigateurs. Cette figure reprsente la fin de lanimation.

10 11

: Les codes sont livrs aux utilisateurs. : 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 fonctionnalits

30

Phase III : Ralisation

Rapport de stage

Figure 11: Page dintroduction.

III.3.1. La page daccueil

La page daccueil est la page la plus importante du site, elle est la porte dentre au contenu du site et le sommaire synthtique qui donne une vue densemble du contenu disposition et affiche les outils de navigation. La page daccueil de notre site comprend un menu permettant daccder chacune des pages internes du site. Elle permet : Laccs lespace Forum. Labonnement la newsletter. Le tlchargement des brochures. De consulter les programmes du thtre. Contacter le Thtre en remplissant un formulaire correspondant dans la page contact.

31

Phase III : Ralisation

Rapport de stage

III.4. BackOffice
Le succs dun site Web rside dans la qualit, la pertinence et la frquence de mise jour de linformation, bref dans la gestion de son contenu. Pour faire face ses contraintes de ractivit, nous avons met a disposition de ladministrateur du site une interface graphique relie la base de donnes du site afin de pouvoir maitre jour son contenu. Laccs cette interface est restreint pour chaque personne devant y accder. Lurl htt://www.trbejaia.com/admin.php permet datteindre la page dauthentification qui est illustre dans la figure ci-dessous :

Figure 12: Page dauthentification.

Pour la scurit 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, ladministrateur accde son espace. La figure 18 prsente la page daccueil du compte administratif :

13

: L'algorithme MD5, pour Message Digest 5, est une fonction de hachage cryptographique qui permet d'obtenir l'empreinte numrique d'un fichier.

32

Phase III : Ralisation

Rapport de stage

Figure 13: Page daccueil administrateur .

Par le biais de cette dernire ladministrateur pourra effectuer les diffrentes gestions que nous aurons loccasion de les prsenter par la suite.

III.4.1. Socle technique

Le socle technique est constitu des diffrents Parmi ces modules nous citons : Gestion des contenus : La solution de gestion de contenu gre l'ensemble des contenus, aussi bien pour les pages dont le contenu volue beaucoup dans le temps (exemple page Accueil), que pour les pages rgulirement actualises (page Archive). 33 modules permettant de gnrer

dynamiquement le contenu du site et de rpondre l'ensemble des fonctionnalits demandes.

Phase III : Ralisation

Rapport de stage

Pour notre site deux types dattributs sont identifis : Les attributs de donnes type textes (nom de la pice, rsum, date de production,...). Les attributs d'lments associs (affiches, brochures, images, )

La rubrique Mise jour de linterface administrateur prsente toutes les rubriques mettre jour avec les liens vers leurs donnes. Cette dernire se compose dun tableau regroupant les informations principales des pices thtrales, expositions. Elle contient galement les liens vers toutes les actions possibles sur leurs donnes savoir : lajout, la modification ou la suppression. a. Lajout Lorsque ladministrateur du site veut ajouter une nouvelle pice, il na qu cliquer sur le lien de la rubrique correspondance, aprs il clique sur ajouter aux (spectacles, productions, archives, expositions.) et il arrive sur le formulaire de cration dune nouvelle pice. Ladministrateur devra alors saisir successivement, les informations relatives ces pices. Tous les champs doivent tre remplis pour garantir une efficacit optimale de linterface utilisateur. Une erreur JavaScript est leve lorsque lon dtecte un champ vide et oblige ladministrateur remplir entirement le formulaire. Ensuite, le systme enregistre les entres dans la base de donnes. Une fois lajout est fait, le serveur redirige automatiquement ladministrateur vers la page de gestion de la page mise jour. b. La modification Pour ce qui est de la modification, tous les champs dune pice sont modifiables. Cela permet une plus grande libert daction pour ladministrateur, qui peut tout moment mettre jour les donnes des spectacles. La page de modification se prsente de la mme manire que celle de lajout, lexception bien sr que le formulaire renvois les informations modifier.

34

Phase III : Ralisation c. La suppression

Rapport de stage

En ce qui concerne la suppression, une alerte JavaScript arrte ladministrateur pour quil confirme son action. Cela permet dviter les suppressions involontaires des pices thtrales. Si ladministrateur continu la suppression, alors le systme va rechercher et supprimer toutes les informations relatives la pice slectionne. Gestion de la newsletter : A travers linterface graphique illustre dans la figure 19, ladministrateur effectuera les fonctions suivantes : Ajouter des abonns. Supprimer des adresses email. Envoyer des newsletters.

Figure 14: Gestion de la newslettr.

35

Phase III : Ralisation

Rapport de stage

Gestion de Forum :

Le forum demande un peu de suivi, une prsence rgulire de la part de ladministrateur et certaines prises de positions ou censures des sujets dbattus. L'administrateur doit lancer de nouveaux sujets, poser des questions, rpondre aux autres, fliciter 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 prsence ainsi on apporte un soin tout particulier aux messages ngatifs afin de prouver tous quils tiennent leurs visiteurs.

Gestion des contacts :

Lorsque linternaute envois un message via le formulaire de la page contact, ses informations seront envoyer a une boite lectronique grce a la fonction mailto14 , la ou ladministrateur pourra grer les messages envoys ou de rpondre ceux-ci.

Cette partie nous a permis de prsenter les outils de dveloppement employs pour limplmentation de notre site ainsi que son interactivit. A ce stade, nous pouvons confirmer que nous avons achev la ralisation du site. Nous allons, prsent, nous focaliser sur le suivi de projet qui fera lobjet 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 dfinie, le design avanc, nous avons procd la premire publication de la maquette afin d'en tester sa ractivit en rel. Chaque phase majeure de dveloppement est ainsi publie pour permettre aux diffrents partenaires de valider l'avance des travaux.

IV.1. Test et contrle

Le test d'un site avant son ouverture au public est une preuve indispensable. Cette tape pourra dans un premier temps aider dceler les problmes d'incompatibilit d'interprtation qui se posent au travers des multiples plateformes, navigateurs et versions. Les premiers tests de compatibilit sont effectus au travers dun logiciel d'dition de page, Dreamweaver offre un rapport d'incompatibilits pour diffrentes 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 problmes 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 quelle 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 dassurer la gestion du contenu (modification, insertion ou suppression des informations, etc.) sans intervention externe. Les personnes formes ont une bonne connaissance des outils bureautiques et ont l'habitude d'utiliser Internet, mais n'ont pas de comptence particulire en informatique. Le temps ncessaire pour cette formation est de trois jours. En revanche, nous allons proposer une assistance d'accompagnement pour aider ladministrateur structurer et mettre en ligne la premire version du site.

IV.3. Rfrencement
On dsigne par "rfrencement" un ensemble de techniques visant indexer le contenu d'un site dans les bases de donnes des outils de recherche (moteurs, annuaires). 37

Phase III : Suivi du projet Les mthodes de rfrencement de sites sont : -

Rapport de stage

Le rfrencement "naturel" ou "traditionnel" : consiste optimiser les diffrentes pages de site web afin d'apparatre dans les top positions des rsultats de moteurs de recherche.

Positionnement publicitaire : consiste payer les moteurs de recherche pour obtenir un positionnement dans les espaces rservs cet effet [W10].

Le but du rfrencement est d'apporter une bonne visibilit un site. Cela passe par plusieurs mesures : Enregistrer l'adresse du site dans des annuaires Faire apparatre le site dans les pages de rsultat des moteurs de recherche. Augmenter le nombre des prospects. Avant de soumettre notre site web aux bases de donnes des diffrents moteurs de recherche nous devrions respecter quelques principes de base afin doptimiser lindexation de ses pages : Choix explicite de nom du domaine: il est important de le choisir avec prudence et rflexion car certains moteurs de recherche effectuant lindexation des sites en prenant en compte leur nom du domaine. Le nom de domaine choisi est www.trbejaia.com sa disponibilit tait vrifier sur www.thais-dz.net . Insertion des balises <META> pour les descriptions et les mots cls de chaque page. Les balises <IMG> doivent tre associes de lattribut ALT qui permet d'afficher du texte lorsque l'image ne peut tre affiche. Mettre un titre descriptif aux pages du site.

IV.4. Hbergement
L'hbergement dun site peut se dfinir comme la prestation d'un service visant rendre un site Web accessible sur Internet.

38

Phase III : Suivi du projet

Rapport de stage

Afin que les pages web soient visibles par tout le monde il faut quelles soient stockes sur un serveur. Ce sont des socits spcialises qui garantissent la meilleure accessibilit aux sites hbergs, grce aux moyens techniques et l'expertise dont elles disposent [W11]. Le choix de la solution d'hbergement pour le site du TRB est important. La solution retenue doit permettre de rpondre aux besoins d'volution du trafic du site tout en apportant : disponibilit, scurit et ractivit.

Le suivi du projet est la garantie du bon fonctionnement du site et de lensemble de ses fonctionnalits. Aprs lachvement de notre site nous avons labors les diffrents moyens pour le faire connaitre au grand public.

39

Conclusion gnrale

Conclusion
L'idal serait un monde o l'accs 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'accs l'information mais aussi donner tous la possibilit d'y participer, tel est le cadre de mon projet. La volont d'innovation inspire tous les jours par Internet a donc permis ce projet de voir le jour. Ce stage s'est avr tre une exprience 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 dacqurir une mthode de travail en passons de la thorie a la pratique, il ma galement permis de mieux connaitre mes gouts et aptitude et renforcer ma volont pour dcouvrir les arts de la communication Jespre avoir donn, au sein de Thas production et thtre Rgional de Bejaia, satisfaction dans le travail qui ma t confi.

40

Annexes

Annexes Annexe 1 : Diagramme de Gantt :

Temps

Juillet
S1 S2 S3 S4 S1

Aout
S2 S3 S4 S1

Septembre
S2 S3 S4

Tches
Analyse de projet et

dfinition des besoins Ralisation des maquettes Elaboration dun cahier des charges Ralisation de la partie statique Ralisation de la partie dynamique Test et contrle Formation des usagers Dure estime Temps de ralisation

Annexes 2 : Imprims cran des sites analyss :

Annexes Site1 : www.theatrelhamra.com

Site 2 : www.theatre-des-varietes.com

Annexes

Annexe 3 : Polices conseilles pour le web [W9] :

Annexes
Police Arial Arial Black Comic Sans MS Courier New Georgia Impact Symbol Times New Roman Trebuchet MS Verdana Webdings Fondeur Monotype Monotype Microsoft Monotype Microsoft Monotype Monotype Monotype Microsoft Microsoft Microsoft Caractristique Sans serif Sans serif, forte graisse Police fantaisie, sans serif Chasse fixe Empattements simples Sans serif Caractres grecs Empattements Sans serif Sans serif Icnes Usage Imprim, Web Imprim, Web Web Simulation listing Web Imprim, Web Imprim, Web Imprim, Web Web Web (petits caractres) Web

Annexe 4 : Maquettes proposes :

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 accder 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-mme (juste aprs <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 rsum de l'information. <pubDate> : Date de cette information.

Bibliographie

Bibliographie
[MAG04] Magali Contention, les bases de donnes 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] [PAS03] Jean engels, Xhtml et css cours et exercices, Groupe Eyrolles, 2006. Pascal Roques, Modliser 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