Projet Web Les restaurants de Compiègne. Cherif Yaya Alexis Koutero 14 juin 2008

Transcription

1 Projet Web Les restaurants de Compiègne Cherif Yaya Alexis Koutero 14 juin

2 Cherif Yaya Alexis Koutero TABLE DES MATIÈRES Table des matières 1 Introduction 3 2 Synopsis Concept Publique cible Objectifs Cahier des charges Concept et objectifs Publique cible Structure de la navigation Structuration et charte graphique Structuration Charte graphique Formes d interactivité Choix techniques Resources médias Conclusion 12 Bibliographie 13 Liste des figures 13 2 SI28 - UTC

3 Cherif Yaya Alexis Koutero 1 INTRODUCTION 1 Introduction Ce document présente les principaux aspects d un projet de site internet intitulé «Les restaurants de Compiègne». C est dans le cadre d une Unité de Valeur de l Université de Technologie de Compiègne que ce développement est effectué. Cette unité présente un tour de table des différentes facettes que peut revêtir un projet multimédia. Le propos de ce rapport n est donc pas de résumer le contenu de cet enseignement mais bien de mettre à nu et de justifier les raisonnements qui nous ont amené au site qui nous occupe aujourd hui. Vous y trouverez une première ébauche du concept ainsi que quelques pistes de réflexions préalable au développement technologique du site. C est en quelque sorte un condensé du concept. Plus loin, vous mettrez la main sur un descriptif détaillé du projet. Ce descriptif offre également l occasion de justifier nos choix et d ouvrir des pistes de réflexion qui nous semblent pertinentes. 3 SI28 - UTC

4 Cherif Yaya Alexis Koutero 2 SYNOPSIS 2 Synopsis 2.1 Concept Pour toute personne qui vient d arriver à Compiègne, qu il soit étudiant ou touriste, la ville lui est inconnue et lui paraît des plus banale. Toute fois, Compiègne regorge de petites merveilles qu il convient de découvrir. Entre autre, la région possède un bon nombre de restaurants et bistrots en tout genres. L idée est donc de présenter le Compiègne gastronomique à toute personne étrangère à la région. Le concept n est pas de dresser une liste de touts les restaurants comme il en existe déjà tant, mais plutôt du faire découvrir grâce à des parcours thématiques. Via un regroupement sémantique et parfois quelque peu arbitraire, le néophyte se verra offrir ainsi un regroupement d établissements bon marché, un autre sur les cuisines du monde ou encore sur des restaurants atypiques. Un forum serra également disponible pour que tout un chacun puisse déposer son avis sur un endroit qu il a particulièrement apprécié ou pour en déconseiller un. 2.2 Publique cible Cette expérience multimédia s adresse donc tout d abord aux personnes étrangères à la région compiègnoise. La désignation de «personne» recouvre un large éventail d individus : le touriste, le nouvel étudiant à l UTC, les hommes d affaires de passages ou encore les compiègnois qui désirent découvrirent quelques nouveaux établissements. Le projet s adresse donc à un publique assez large. 2.3 Objectifs L idée est donc de développer un nouvel outil multimédia permettant de découvrir les établissements gastronomiques. Cet outil ce veux sobre, simple d utilisation et convivial. 4 SI28 - UTC

5 3 Cahier des charges Le cahier des charges a pour but d affiner notre projet. Nous préciserons ici avec plus de détails le synopsis et nous introduirons également de nouveaux aspects. 3.1 Concept et objectifs L idée est toujours de développer un site internet regroupant les restaurants de Compiègne et offrant une approche différente des sites classiques listant simplement les établissements. Toute fois, nous avons dus revoir nos objectifs faute de temps. En effet, nous voulions offrir une approche orientée sur la sémantique grâce à des «parcours initiatiques» regroupant les restaurants par types de cuisine, par ambiances, ou simplement par critère arbitraire. Après un «Brain Storming» intensif, nous avons décidé d orienter notre site vers une production du contenu de la part de l utilisateur. Production du contenu, une bien belle formulation pour dire que notre invité vas pouvoir laisser des commentaires sur un restautant qui lui aura plut ou non, soumettre un nouveau restaurant si celui-ci ne se trouve pas dans la base ou encore donnere son avis sur le site ou sur autre chose qui lui tient à coeur. Le site comporte ainsi une certaine interactivité et incite les internautes à participer à la vie de celui-ci. L objectif est donc assez claire : développer un site Web communautaire sur le compiègnois gastronomique qui devras contenir entre autre : une liste des établissements une fonction de recherche une partie pour rédiger des commentaires sur un restaurant une partie qui permet à l internaute de proposer un restaurant un livre d or pour commenter le site Le concept étant posé, nous allons pouvoir définir quel publique ou quelle genre de personne en particulier tend à cibler notre projet. 3.2 Publique cible Nous l avons déjà définis précédemment, mais par «utilisateur», «internaute», «la personne» ou tout autre nom nous entendons une personne quelconque. Le site Web a pour ambition d être publié sur Internet, donc d être accessible par une très grande communauté. Néanmoins, le site s adresse aux internautes un minimum intéressés par Compiègne et ses établissements gastronomiques. Le terme de «publique cible» regroupe ainsi sous son étendard une population d individus assez large : l homme d affaire, l étudiant, le compiègnois, le touriste,...cependant, ils ont tous pour point commun d être de fin gourmet, de s intéresser et de s impliquer dans le compiègnois gastronomique. Désormais sous savons à qui s adresse et que fait notre site. Par la suite, nous allons nous attacher à définir les différentes parties du sites que nous sommes amener à concevoir : la structure de navigation, la structure de la page et sa charte graphique, l interactivité et enfin nous nous interrogerons sur les ressources médias impliquées ainsi que des choix technologiques effectués. 5 SI28 - UTC

6 3.3 Structure de la navigation Pour un site Web, la navigation est un point clé auquel il faut accorder une grande attention. En effet, celle-ci va définir comment l internaute naviguera entre les différentes pages du site, et donc par extension comment il aura accès au contenus. Pour notre projet, la navigation ce veut classique, simple et pratique. Une navigation classique. L idée est de reprendre ce que l on peut trouver sur de nombreux sites afin que l utilisateur ne soit pas complètement désorienté. On trouve ainsi une bannière, un menu déroulant sur la gauche de l écran et un corps de page pour afficher le contenu. Une navigation simple. Le site n ayant pas de prétention artistique particulière, l interface restera simple, avec un menu et quelques liens par page. La structure est ainsi facilement compréhensible et n implique pas l affichage du cheminement par exemple. Cette simplicité repose sur les mêmes raisons que le point précédant. Une navigation pratique. Une navigation pratique permet de trouver l information rapidement. Le site doit permettre de trouver un restaurant rapidement car il se veut consultatif. Un mari attentionné doit être capable de trouver un restaurant pour inviter sa femme en quelques clics pour ne pas la faire attendre. La structuration présente de ce fait les différents aspect de la navigation «arborecsente» et de la navigation «base de données». C est dans ce sens que le menu est développé sur deux niveaux distincts. Le premier correspond aux grandes parties du site : l accueil (point d entrée) les restaurants le livre d or les auteurs Le second niveau n est cependant valable que pour la partie restaurant et présente les fonctionnalités de type «base de données» : consultation recherche insertion commentaire La structure de la navigation peut donc facilement se résumer par le schéma suivant : 6 SI28 - UTC

7 Fig. 1 Structure de la navigation Cette structuration met en évidence deux fonctionnalités que nous avons précédemment définies : la consultation et la recherche. Ces deux parties sont critiques dans le sens où le site propose une forme de listing des restaurants, il faut donc bien pouvoir les consulter ou en rechercher un en particulier. La consultation est implémentée sous la forme d un «catalogue». Une page type présente les différentes caractéristiques d un restaurant : le nom le type de cuisine l adresse le téléphone un prix moyen 7 SI28 - UTC

8 une description une photo les commentaires des derniers utilisateurs De l autre côté, nous avons définis trois critères de recherche qui nous semblais les plus pertinents. Cependant, il se peut que quelques fins gourmets désirent trouver des critères plus pointus ou spécifiques qui nous auraient échappé. Ils peuvent donc laisser un commentaire sur le site et nous en tiendrons conte. Ces critères peuvent donc être utilisés de façons indépendante ou combinée permettant ainsi une recherche affinée : le nom le type de cuisine le prix la note A ce stade du projet, nous savons quel utilisateur va utiliser quelle fonction de notre site et où il va la trouver. Il s agit à présent de qualifier l aspect graphique, de quelle façon les différentes parties vont s affichées à l écran. 3.4 Structuration et charte graphique Nous avons déjà quelque peu évoqué la structuration du site au niveau sémantique. Cette partie a pour but de définir l aspect visuel du site. Cet aspect peut se découper en deux parties complémentaires : la structuration d une page et la charte graphique Structuration Nous avons déjà parlé de la structure de la navigation un peu plus haut. Nous allons exposer ici en particulier la structure de la page, à savoir comment celle-ci s affiche à l écran de l internaute. De facture classique mais sobre, la structure se compose de trois parties : le «header» le menu le corps de la page 8 SI28 - UTC

9 Fig. 2 Structure de la page Le «header» informe l internaute sur quel site il se trouve. Il comporte un logo et le titre du site : «Les restaurants de Compiègne». Il définit ainsi en partie l esprit et la charte graphique du site par son aspect essentiellement esthétique. C est un élément important car il permet d un côté l identification rapide du site et d un autre côté de se faire une première idée sur la qualité du site et de son contenu. Malheureusement, l équipe ne comportant pas d infographiste digne de ce nom, la bannière est relativement simple et un peu trop épurée. Le menu quand a lui se trouve à gauche de l écran. Il permet de se déplacer rapidement d une page à l autre et de visualiser la structure sousjacente du site. Ainsi, il annonce en quelque sorte le contenu que l utilisateur est amené à visualiser. C est pourquoi il doit être pensé en profondeur sans toute fois prendre le pas sur le «header» ou le corps de la page. Ces deux dernières parties sont identiques pour toutes les pages du site afin qu il y ait une forte unité à travers le site à l inverse du corps. Le corps de la page change est rechargé à chaque fois. En effet, comme l indique son nom, cette partie permet d afficher le contenu de la page. Elle présente alternativement du texte, des images ou encore des formulaires, c est pourquoi il est assez difficile de l inscrire dans une généralité. Les trois parties forment comme des blocs bien distincts à l écran, il est donc facile de les trouver et de les identifiés rapidement ce qui joue en faveur d une simplicité d emploi. Cette facilité doit être soutenue par un design sobre pour nous inscrire davantage dans la philosophie que nous nous efforçons de suivre jusqu à présent Charte graphique Celle-ci défini le design et la présentation générale d un site internet. Notre projet, comme nous l avons dis, est sobre et épuré. Nous utilisons ainsi un nombre restreint de couleurs et peu de police d écriture. Le tout dans le respect de l idée de base. 9 SI28 - UTC

10 Les couleurs Nous utilisons principalement 4 couleurs : le blanc, le gris, le bordeaux et le noir : Le blanc est la couleur de fond par défaut. Il permet de garder un esprit Fig. 3 Tableau des couleurs classique et sobre tout en permettant de distinguer distinctement les différents éléments du site. Dans l ensemble, c est une couleur assez appréciée et possède un côté pratique non négligeable. En effet, une police noire sur fond blanc est une des combinaisons des plus efficaces. Le contraste très prononcé permet une identification rapide des caractères et une lecture aisée sans fatigué l oeil. Le bureau quand à lui évoque la gastronomie et la restauration en rappelant la couleur du vin rouge. Celui-ci est très ancré dans la tradition française et permet ainsi d influer une ambiance reconnaissable par beaucoup d utilisateurs. Le gris met en valeur les liens hypertextes lorsque la souris passe dessus. Cette couleur n a pas pour but d évoquer quelque chose de particulier ici mais elle a l avantage de se marier relativement bien aux trois autres couleurs et ainsi obtenir une ambiance sobre et épurée. L utilisation d un nombre réduit de couleurs permet de garder une cohérence du site et de ne pas surcharger l écran. La navigation s en retrouve facilitée car on reconnaît facilement les éléments principaux de la navigation (le menu et les liens) et elle n est pas perturbée par des flashes de couleurs ou des clignotement à travers toute la page. La police Le choix de la police s inscrit dans le même cheminement logique que les couleurs. Le noir permet une lecture agréable comme nous l avons dis. La police de l ensemble du site est le verdana. Elle est sans sérif et améliore la lisibilité à l écran. Nous avons choisis cette police car, tout en restant lisible, elle est Fig. 4 La police du site : le Verdana simple et neutre. Simple dans le sens où les lettres n ont pas d ornements ou des fioritures à caractère décoratif. Et neutre, car le verdana n inspire pas de sentiments forts, au plus ce style évoque la modernité mais rien de plus transcendant. L oeil et l esprit peuvent se concentrer sur le contenu du site qui est soutenu par un design simple. 10 SI28 - UTC

11 3.5 Formes d interactivité Le site offre principalement deux types d interactivités : une interactivité de navigation et une de production. De navigation, comme beaucoup de site web, notre projet offre la possibilité de naviguer entre des pages grâce à des liens hypertextes. Aucun effet artistique ou sémantique n est recherché ici. Nous visons encore une fois la simplicité et l ergonomie du site pour une utilisation efficace et intuitive. L interactivité de production ce retrouve au coeur du site. L idée est de constituer une structure de base pour permettre à l internaute avisé de comprendre le principe du site. Le projet serra par la suite autosuffisant dans le sens où les utilisateurs ont la possibilité d alimenter la base des restaurants. Il est également possible de laisser des commentaires, de dire son avis sur un établissement en particulier, de le noter et ainsi établir un classement de popularité. Le site est aussi appelé à évoluer, de nombreuses améliorations seront possibles, quelles soient proposées par un internaute ou par les auteurs. L idée de communauté sur Compiègne est ainsi mise en valeur dans le sens où tout un chacun peut produire du sens et faire partager son expérience. 3.6 Choix techniques La confection d un site web peut requérir de nombreuses compétences techniques ainsi que l intervention de beaucoup de langages différents. Ces différents langages peuvent intervenir dans des moments et des niveaux du projet très variés. Pour notre site, nous avons utilisé quatre langages : le HTML : c est le langage de base de tout document web classique, il permet un structuration simple mais efficace du contenu. le CSS : associé au HTML, le CSS permet de définir le design et les propriétés graphiques des différents élément structurant du HTML. Le contenu et le design sont ainsi clairement définis et séparé pour une meilleure conception et une maintenance plus aisée. le PHP : c est le premier langage Web qui permet de dynamiser un site. Interprété au niveau du serveur, il rend possible d une façon assez simple la communication avec une base de données. l Ajax : c est un ensemble de technologies qui permettent de rendre les sites Web plus dynamiques et réactifs. L expérience Web est beaucoup plus fluide car l utilisateur reste sur une page unique qui se recharge. 3.7 Resources médias Après avoir réviser nos objectifs, les ressources médias s avèrent être toujours les mêmes : un guide de Compiègne pour la partie gastronomique et internet également pour les restaurants mais aussi pour la partie technique et design. 11 SI28 - UTC

12 Cherif Yaya Alexis Koutero 4 CONCLUSION 4 Conclusion Des premiers balbutiements du projet au prototype final, le projet a beaucoup évolué. Cependant, il reste ce qu il est : un prototype. En ce sens beaucoup d évolutions sont possible mais je pense que nous sommes assez satisfait de notre travail. Une de la grande difficulté fût de trouver les petites choses qui ferraient que notre site soit différent et ressorte du lot pour donner envie aux personnes d aller y jeter un oeil. Je pense qu en mettant en avant l aspect communautaire et participatif, le projet ce détache clairement des autres site de classement que l on peut rencontrer fréquemment sur le net. D un autre côté, ce fut également l occasion d apprendre à mener à bien un projet multimédia ainsi que ses caractéristiques. Dans le contexte technologique actuel, ces connaissances sont importantes car le réseau internet est amener à prendre de plus en plus de place dans la vie du quotidiens. Et il est bon de savoir juger, de se forger une opinion par ses propres moyens, et ce dans tout les domaines, afin de faire des choix en adéquation avec la vie que l on veut se forger. Cela demande toute fois un certain travail, comme beaucoup d autre chose d ailleurs... Labor omnia vincit improbus SI28 - UTC

13 Cherif Yaya Alexis Koutero TABLE DES FIGURES Références [1] Serge Bouchardon, Cours SI28, [2] Site du Zéros, http :// [3] Zen Garden, http :// Table des figures 1 Structure de la navigation Structure de la page Tableau des couleurs La police du site : le Verdana SI28 - UTC