RAPPORT DE PROJET CREATION SITE WEB POUR L'ASSOCIATION PETITS PRINCES DE L'OUED

 
CONTINUER À LIRE
RAPPORT DE PROJET CREATION SITE WEB POUR L'ASSOCIATION PETITS PRINCES DE L'OUED
BA Alioune                                                 DEMIRKOL Sadek

                    RAPPORT DE PROJET

        CREATION SITE WEB POUR
    L’ASSOCIATION PETITS PRINCES DE
                L’OUED

                                Tuteurs du projet :

                         Julien LORRAIN – Thomas SERMIER

Licence Pro SIL CDOOAM                                       2012/2013

                                                                         1
RAPPORT DE PROJET CREATION SITE WEB POUR L'ASSOCIATION PETITS PRINCES DE L'OUED
BA Alioune                                                                                 DEMIRKOL Sadek

                                            SOMMAIRE

REMERCIEMENTS ........................................................................................... 3
  I.   INTRODUCTION .................................................................................... 4
     1. Présentation de l’association ................................................................. 5
     2. Présentation du projet ........................................................................... 5
  II. CONTEXTE DU PROJET ........................................................................... 6
  III. CONCEPTION ........................................................................................ 7
     1. Langages et choix des outils utilisés ....................................................... 7
     2. Base de données .................................................................................... 9
     3. Les différentes étapes du développement ............................................ 10
        A. La Programmation …………………………………………………………………………………………………………..10
        B. Le Design …………………………………………………………………………………………………………………………13
    4. Résultats obtenus................................................................................. 15
    5. Problèmes rencontrés .......................................................................... 16
  IV. PROPOSITIONS D’AMELIORATION .......................................................17
  V. PLANNING PREVISIONNEL ET REEL .......................................................18
  VI. CONCLUSION .......................................................................................19
  VII. ANNEXES .............................................................................................20
    1. Webographie ....................................................................................... 20
    2. Cahier des charges site internet – Petits princes de l’oued ................... 21

                                                                                                            2
RAPPORT DE PROJET CREATION SITE WEB POUR L'ASSOCIATION PETITS PRINCES DE L'OUED
BA Alioune                                                                      DEMIRKOL Sadek

REMERCIEMENTS

     Nous tenons particulièrement à remercier dans un premier temps, nos tuteurs de projet
LORRAIN Julien et SERMIER Thomas Ingénieurs informatiques au laboratoire informatique
de l’UFR Sciences et Techniques de Besançon pour leur disponibilité et leurs précieux
conseils tant sur la partie conception que sur la partie rédaction du rapport qui nous ont permis
de mener à bien ce projet.

      Nous remercions également Mr François BONNEVILLE, enseignant, de par sa
disponibilité à répondre à toutes les questions liées à la réalisation de certaines
fonctionnalités.

      Nos remerciements sont adressés aussi à toute l’équipe pédagogique de la licence pro,
notamment pour l’ensemble des connaissances acquises qui nous ont permis de réaliser ce
projet.

                                                                                               3
RAPPORT DE PROJET CREATION SITE WEB POUR L'ASSOCIATION PETITS PRINCES DE L'OUED
BA Alioune                                                                      DEMIRKOL Sadek

         I.    INTRODUCTION

       Dans le cadre de notre projet de la licence pro SIL, nous avons choisi la réalisation d’un
site internet d’une association créée dans un esprit humanitaire, écologique et sportif par
Claire Delteil et Rémy Schwartzler dans le désert marocain : Petits princes de l’Oued.
       Nous avons une idée en tête quand notre responsable pédagogique nous a parlé de
projet à réaliser par binôme. L’idée était la création d’une application Web et ainsi choisir la
proposition de M. LORRAIN Julien et de M. SERMIER Thomas qui proposaient aux étudiants
de réaliser un site Internet pour cette association.
       Le but est également d’apprendre à gérer un projet professionnel de la reformulation
du cahier des charges jusqu’à sa réalisation complète en respectant les exigences du client.
       Vous verrez également dans ce projet une application directe des compétences
acquises au cours de notre licence professionnelle notamment en ce qui concerne les
langages PHP, HTML et CSS.
       Le projet s’est déroulé en trois étapes :
       - La définition du projet qui consiste à éditer un cahier des charges fonctionnel avec le
client. Dans notre cas ce dernier étant déjà fait, nous devrons faire une reformulation de
celui-ci avec le client.
       - La conception et la réalisation du projet : nous évoquerons dans cette partie le choix
des outils et des langages utilisés pour la réalisation du site, la base de données créée pour
stocker les différentes informations, du développement proprement dit le codage, le design
du site. Nous parlerons aussi des résultats obtenus, des problèmes rencontrés lors de la
conception et enfin nous proposons quelques idées d’amélioration du site.
       - Le planning : celui-ci nous a permis de mesurer l’avancement de nos travaux et
l’atteinte de nos objectifs.
       Nous ne parlerons pas de la mise en ligne du site car cette partie a été gérée par M.
LORRAIN Julien et de M. SERMIER Thomas.
       Dans les lignes qui suivent nous allons détailler le développement de chacune de ces
parties en étant le plus précis possible pour que le lecteur de ce rapport soit éclairé sur les
différentes étapes de ce travail qui demande beaucoup de temps et qui tout de même est
vraiment passionnant.

                                                                                               4
BA Alioune                                                                   DEMIRKOL Sadek

   1. Présentation de l’association

     C’est une association loi 1905 qui a pour but de participer au 16e raid 4L Trophy 2013.

     4L Trophy est un raid humanitaire dans le désert marocain mené par des étudiants
venus de toute l’Europe à bord de Renault 4L. Les maîtres mots de la compétition : DONNER
en contribuant au développement du système éducatif marocain par l’apport de dons et de
matériel scolaire SE DEPASSER dans cette grande aventure pour avancer quelques soient les
obstacles RESPECTER la terre d’accueil qu’est le Maroc et son environnement.

     Tous les ans, une dizaine d’équipages sélectionnés par DELOITTE 4L Eco Challenge vont
encore plus loin dans leur engagement. Leur objectif ? Mener à bien un projet à visée
écologique comme l’installation de panneaux solaires et de puits, la plantation d’arbres, la
réduction de l’empreinte écologique du rallye, etc. Petits Princes de l’Oued souhaite relever
ce Challenge et leur projet est actuellement en cours de conception.

   2. Présentation du projet

      Pour assurer la communication de leur équipe (Petits Princes de l’Oued) pendant
l’évènement 4LTrophy, l’association a émis le désir de créer un site Web dans le but
d’informer son public des différentes actualités et de se faire connaître et attirer des
sponsors. Un site Web attractif, dynamique et interactif, autant pour son administration que
pour son utilisation, est alors nécessaire au bon fonctionnement et à la communication
interne et externe d’une telle structure.

                                                                                               5
BA Alioune                                                                    DEMIRKOL Sadek

       II.     CONTEXTE DU PROJET

     Afin d’effectuer ce projet, un cahier des charges nous a été fourni.

      Celui-ci est assez explicite, non seulement il nous donne les données nécessaires au
site mais il indique également la manière dont ils doivent être disposées. L’association veut
un site Internet basique composé, premièrement, d’une page d’accueil composée d’articles
et d’asides et présentant l’association et le 4L Trophy. Puis d’une seconde page, Journal de
bord, qui doit regrouper tous les articles de l’équipe à la manière d’un blog avec un affichage
par ordre chronologique. La troisième page concerne l’équipe, on y présente les deux
chauffeurs de l’association ainsi que leur équipe. Dans la quatrième page, la page sponsors, y
figure un message permettant d’attirer de nouveaux sponsors, une seconde partie avec les
logos des sponsors actuels et un tableau récapitulatif des dons reçus. Enfin, nous terminons
par une simple page contact avec les informations relatives à l’association.

     Ensuite, nous retrouvons dans le cahier des charges une petite charte graphique
concernant les couleurs à employer et la mise en forme de la police de caractères.

     Le cahier des charges se termine finalement par une simple demande concernant le
nom de domaine du site.

                                                                                             6
BA Alioune                                                                           DEMIRKOL Sadek

        III.      CONCEPTION

      Dans cette partie, nous allons détailler les étapes du développement du site, les
langages et le choix des outils dans un premier temps, puis un descriptif de la base de
données, les étapes de la programmation avec son design, un aperçu du résultat obtenu et
enfin les principales difficultés rencontrées.

    1. Langages et choix des outils utilisés

       HTML/CSS

       Le HTML (« HyperText Mark-Up Language ») est un langage dit de « balisage » ou de
« structuration » permettant la conception de pages web avec des balises de formatage. Les balises
permettent d'indiquer la façon dont doivent être présentés le document et les liens qu'il établit avec
d'autres documents.

     Le CSS (« Cascading Style Sheets » : feuilles de style en cascade) est un langage informatique
complétant le HTML. Alors que le HTML structure la page Web, le CSS va la mettre en forme en y
apportant du style.

       PHP/MySQL

      Le PHP est un langage de script exécuté du côté serveur (comme les scripts CGI, ASP, ...) et non
du côté client (un script écrit en JavaScript ou une applet Java s'exécute sur son ordinateur...). La
syntaxe du langage provient de celles du langage C, du Perl et de Java. Ses principaux atouts en font
un des langages web le plus utilisé :

              Une grande communauté de développeurs partageant des centaines de milliers
               d'exemples de script PHP ;
              La gratuité et la disponibilité du code source ;
              La simplicité d'écriture de scripts ;
              La possibilité d'inclure le script PHP au sein d'une page HTML
              L'intégration au sein de nombreux serveurs web (Apache, Microsoft IIS, etc.).

      C’est également un langage simple à utiliser avec des bases de données (de nombreux SGBD
sont supportés, mais le plus utilisé avec ce langage est MySQL, un SGBD gratuit disponible sur de
nombreuses plateformes : Unix, Linux, Windows, MacOs X, …) ;

                                                                                                      7
BA Alioune                                                                             DEMIRKOL Sadek

       JavaScript

       Le JavaScript est un langage de script incorporé dans un document HTML. Historiquement il
s'agit même du premier langage de script pour le Web. Ce langage est un langage de programmation
qui permet d'apporter des améliorations au langage HTML en permettant d'exécuter des
commandes du côté client, c'est-à-dire au niveau du navigateur et non du serveur web.

       WampServer

      « WampServer est une plate-forme de développement Web sous Windows pour des
applications Web dynamiques à l’aide du serveur Apache2, du langage de scripts PHP et d’une base
de données MySQL. Il possède également PHPMyAdmin pour gérer plus facilement vos bases de
données. »

     Nous avons décidé d’utiliser WampServer car c’est un logiciel que nous avons déjà utilisé et c’est
celui que nous connaissons le mieux. De plus il est régulièrement mis à jour et propose le français
parmi ses langues d’utilisation.

       Opera Mobile Emulator

      Opera Mobile Emulator est un logiciel gratuit créé par Opera Software. Il permet d’émuler le
navigateur Opera avec la résolution d’écran de différents terminaux mobiles tels que des tablettes ou
des Smartphones.

      Il nous a été très utile lors de la mise en place design, nous permettant de visualiser le site web
sur de petits écrans. Nous avons ainsi pu faire quelques réajustements.

                                                                                                        8
BA Alioune                                                                             DEMIRKOL Sadek

    2. Base de données

     Comme pour tout site web, la réalisation de celui-ci a requis la création d’une base de
données.

       Dans notre cas, il nous a tout d’abord fallu créer des identifiants pour la gestion administrateur
du site. L’inscription des visiteurs au site n’étant pas requis, nous avons tous simplement créer une
table « Admin » avec un champ pour le pseudonyme et un autre pour le mot de passe.

      Puis, lorsque nous avons commencé le journal de bord, nous avions tout d’abord seulement
créé une table pour les articles qui était composé du titre, du contenu, du chemin de l’image, de la
date, de l’heure et d’un id. Mais, nous avons par la suite rajouté la possibilité d’insérer plusieurs
images. Il nous a donc fallu rajouter une seconde table qui contenait seulement les chemins des
images que nous avons identifiés par l’identifiant de l’article et celui de l’image. Finalement, nous
avons intégré la possibilité de commenter les articles ce qui nous a valu une troisième table
commentaire avec un pseudo, le mail, son message, sa date et l’heure.

       Enfin, nous avons une dernière table concernant le tableau récapitulatif des dons perçus par
l’association avec le nom du donateur et le montant.

                                                                                                       9
BA Alioune                                                                              DEMIRKOL Sadek

    3. Les différentes étapes du développement

             A. L A PROGRAMMATION

      Nous avons dans un premier temps mis en place la structure du site en créant les cinq pages
du menu avec pour chacune sa mise en forme par des cadrages basiques en fonction des articles et
asides regroupés par section. Cette première partie est principalement axée sur le côté HTML
quasiment sans aucun design, par exemple, le menu était seulement composé de simples liens avec
pour chaque page, l’insertion des textes et des images fournis par le cahier des charges.

        Ensuite, dans un second temps, nous avons attaqués la programmation en PHP avec l’ajout des
fonctionnalités en commençant par la création des articles dans la page journal de bord. Cette page
liste tous les articles, en limitant le nombre d’articles à 5 par pages, avec leur image, leur titre et les
200 premiers caractères de l’article. Nous avons utilisé cette même méthode pour afficher le dernier
article directement sur la page d’accueil. L’utilisateur qui veut consulter l’article en entier aura la
possibilité de lire la suite grâce à un lien cliquable.

         Afin que l’administrateur puisse gérer les articles, celui-ci doit se connecter avec ses
identifiants pour pouvoir ajouter un ou plusieurs articles. Nous avons également créé la possibilité de
modifier ou supprimer les articles soit directement depuis la liste soit lors de la visualisation de
l’article complet.

      L’ajout et la modification des articles se font par le biais d’un formulaire. De plus pour la
modification, le formulaire récupère les informations de l’article à modifier dans les champs
correspondants.

                                                                                                        10
BA Alioune                                                                             DEMIRKOL Sadek

      Puis, nous avons mis en place le tableau récapitulatif des dons (Opération 1€=1Km). Pour cela,
un tableau de deux colonnes, une pour les noms des donateurs et l’autre pour les kilomètres
correspondant aux montants perçus, a été inséré dans la page soutien/sponsors.

       Pour la gestion administrateur du tableau, nous avons utilisé le même principe que pour les
articles avec la possibilité d’ajouter ou de modifier un don à l’aide d’un formulaire ou de le
supprimer.

      Dans le cas où le nombre de dons reçus est trop important, nous avons limité la hauteur du
tableau et en insérant une « scroll bar » (ascenseur) pour faire défiler la listes des dons.

      La gestion des articles, plus particulièrement la partie concernant les images n’étant pas
optimale, il nous a fallu revenir dessus. Il faut tout d’abord savoir que les images ne sont pas stockées
directement dans la base de données ; celle-ci ne contient que le lien de l’image. En effet, à cette
étape du projet pour ajouter un article, il fallait entrer le lien courant de l’image dans une zone de
texte du formulaire après avoir préalablement copié l’image dans le dossier de destination.

      Il nous a donc fallu, en premier lieu, gérer le téléchargement du fichier à partir des dossiers
personnels vers le serveur.

      Toutefois, nous voulions ajouter une nouvelle fonctionnalité à la gestion des articles : la
possibilité d’y insérer plusieurs images. Pour cela, une nouvelle table était requise car le nombre
d’images devant être géré dynamiquement, il n’était pas possible de le faire avec une seule table.

      Ne connaissant pas le nombre d’images qui figurera sur chaque article, nous avons fait en
sorte que le formulaire d’ajout (ou de modification) d’un article ne contienne au départ seulement
qu’un champ parcourir. A l’aide du langage JavaScript, nous avons créé un lien permettant d’insérer
un nombre indéfini de champs pour ainsi pouvoir ajouter plusieurs images.

      Quant à l’affichage du résultat, du côté de la liste des articles il n’y eu aucun changement,
l’image figurant à côté de chaque article est le premier à avoir été ajouté. Pour l’affichage complet
d’un article, s’il y a plusieurs images, celles-ci sont toutes affichées en dessous du texte.

                                                                                                      11
BA Alioune                                                                      DEMIRKOL Sadek

      Dans le cahier des charges, il nous a été demandé, si nous avions le temps, de créer la
possibilité de commenter les articles. Premièrement, nous avons créé la table commentaire. Mais
comme le site ne prévoyait pas la possibilité de s’enregistrer et de se connecter, il nous a tout
simplement fallu insérer un champ proposant au visiteur de s’identifier par un pseudonyme et un
mail.

     Le formulaire et tous les commentaires ont finalement été placés en-dessous de l’article
complet.

                                                                                              12
BA Alioune                                                                        DEMIRKOL Sadek

             B. L E DESIGN

      Comme nous l’avons mentionné dans la partie programmation, en créant les pages, nous
avons fait une mise en forme basique avec des cadrages pour délimiter les différentes zones de
chaque page. Nous avons choisi de commencer avec un design basique, de développer les différentes
fonctionnalités pour finir avec une mise en forme finale.

       Sur ce premier design, nous distinguons trois parties séparées, l’en-tête (header), le corps
composé de sections et d’asides et le bas de page (footer). L’ensemble possédait un encadrement et
était fixe, en partant des conteneurs jusqu’aux contenus. Nous avons pour cela paramétré les
hauteurs et largeurs avec des valeurs en pixels.

      Le header contenait le logo de l’association avec son nom, le temps de recevoir la bannière
destinée à y figurer. Dans le header, on retrouve également le menu créé à partir de simples liens.

       Pour le bas de page, le cahier des charges proposait le copyright avec le nom des webmasters
et un lien vers la page contact.

      Voici le design de départ :

                                                                                                13
BA Alioune                                                                              DEMIRKOL Sadek

        Après avoir fini la conception de toutes les fonctionnalités prévues, nous avons utilisé, comme
indiqué dans le cahier des charges, pour le design final des couleurs qui nous semblent mieux
adaptées avec le fond uni. Pour le menu, nous avons ajouté une bande marron, de sorte que si
l’utilisateur passe la souris dessus, la page demandée se met en vert et informe ce dernier de la page
activée.

        Avec le logiciel Photoshop, nous avons utilisé la couleur sable du fond pour créer un dégradé
que nous avons insérer sur toutes les pages de sorte à pouvoir visualiser les textes avec une réelle
facilité de lecture pour l’internaute.

      Puisque dans les différentes pages du site le logo n’apparaît pas, une page entière avec le logo
cliquable a été ajoutée, celle-ci renvoie à la page d’accueil par le biais d’un lien.

       L’en-tête a été finalisé avec la bannière. Pour le titre, nous avons gardé le nom de l’association
et y ajouter celui de l’évènement.

      Le bas de page (footer) étant bref nous avons réduit la police du texte avec une bande en
couleur également marron créé à l’aide d’image qui s’adapte avec le fond uni.

       Afin que l’affichage du site se fasse de manière dynamique par rapport à la résolution de
l’écran de l’utilisateur et pour adapter le site sur tout support (tablette, mobile..), nous avons modifié
les valeurs du fichier CSS de la largeur, la hauteur et des marges en pourcentages pour chacun des
éléments structurant le site web.

       Ainsi nous avons pu effectuer nos différents tests sur différents navigateurs et en réduisant
leur taille. Cependant, le site n’étant pas encore ligne, nous ne pouvions pas effectuer nos tests sur
les terminaux mobiles à notre disposition. Après quelques recherches sur internet, nous avons trouvé
le logiciel Opera Mobile Emulator qui nous a permis de terminer nos tests.

                                                                                                       14
BA Alioune                                                                     DEMIRKOL Sadek

   4. Résultats obtenus

      Après beaucoup d’investissement, nous sommes satisfaits du résultat obtenu qui nous paraît
être en adéquation avec le cahier des charges. Néanmoins ce site peut encore énormément évoluer
grâce à l’ajout de nouvelles fonctionnalités. Ceci dépend des souhaits de l’association.

                                                                                             15
BA Alioune                                                                             DEMIRKOL Sadek

    5. Problèmes rencontrés

        Programmation

        Les principaux problèmes rencontrés étaient principalement dus à des erreurs d’inattention.

       Le seul problème qui mériterait d’être cité concernait le téléchargement des images pour les
articles. Pendant la conception de cette fonctionnalité, nous avons fait nos tests avec de petits
fichiers pas très lourds bien que nous avons limité la taille des images pouvant être téléchargées à
5Mb. Mais lorsque des articles réels devant figurer sur le site nous ont été remis avec leurs images, le
volume de certains d’entre eux dépassait 5 Mb. Nous avons donc rehaussé cette limite à 10Mb. Mais
le transfert de l’image fut tout de même refusé. C’est seulement après quelques recherches que
nous avons découvert que WampServer avait également sa propre limite.

      Dans ce projet, nous avons des fonctionnalités qui sont similaires par exemple l’ajout, la
suppression et la modification des articles ou des dons. Nous avons mis beaucoup de temps à
développer la partie modification. Nous sommes arrivés après avoir parcouru beaucoup de tutoriels
à réussir cette fonctionnalité, il restait juste l’adaptation du code pour la gestion des dons.

        Design

       Pour effectuer les cadrages basiques du 1er design, il nous a fallu parcourir beaucoup de
tutoriels (voir webographie) sur le CSS pour arriver aux objectifs attendus.

       Concernant le design, la principale difficulté était liée à l’adaptation du site pour tout support
(mobile, tablette …). De plus, le nombre important de sections ou de tableaux a rendu cette tâche
plus difficile.

                                                                                                      16
BA Alioune                                                                            DEMIRKOL Sadek

       IV.      PROPOSITIONS D’AMELIORATION

      Un site Internet nécessite toujours une amélioration qui est liée à l’évolution de la société et
des nouveaux modes de vie. Concernant ce site plusieurs fonctionnalités peuvent être apportées,
nous parlerons dans les lignes qui suivent de certaines qui nous viennent en tête.

      D’abord dans la page « Journal de Bord » avec les articles commentés, un reCaptcha peut être
mis en place pour être sûr que c’est bien un humain qui cherche à ajouter un commentaire et non
pas un robot qui cherche à envoyer des spammes.

       Puisque l’objectif est d’attirer des sponsors qui peuvent venir de partout. Aussi le rallye est
international et se déroule à l’étranger, nous pensons que la possibilité de récupérer les adresses IP
des visiteurs de tout coin qui permettrait d’établir des données, serait intéressant pour l’association.

       Dans les forums sur internet, nous pouvons constater l’existence de commentaires de tout
type. Il serait aussi important d’ajouter un autre point celui d’ajouter la possibilité de supprimer
tous commentaires injurieux.

      Le rallye étant international avec des participants venant de partout, il serait aussi intéressant
de concevoir le site en plusieurs langues.

                                                                                                     17
BA Alioune                                                                         DEMIRKOL Sadek

        V.      PLANNING PREVISIONNEL ET REEL

      L’association souhaitait un site internet basique pour informer son public et attirer des
nouveaux sponsors. Mais nous voulions prendre un maximum de temps pour effectuer de manière
optimale la programmation et le design tout en essayant de tenir les délais. A ce niveau, nous avons,
plus ou moins, pu finir toutes les fonctionnalités dans le temps que nous nous étions donnés.

Semaine réel                    46 47 48 49 50 51 1 2 3 4 5 6 7 8 9 10
semaine n°

 Contexte cahier des charges

       Base de données

  Développement et Design

Test sur différents terminaux
       et navigateurs

             Rapport

         Soutenance

                                                                                      réalisation   Prévision

                                                                                                    18
BA Alioune                                                                              DEMIRKOL Sadek

       VI.      CONCLUSION

       Le projet de création de site Web pour cette association n’a pas été aussi difficile du fait que
cette dernière voulait un site basique qui a pour objectifs d’informer son public et attirer des
sponsors. S’il y’a un point qu’il fallait réussir tout de même c’est la partie « administrateur » pour que
les responsables puissent administrer son site Internet sans aucun problème.

       Nous avons durant la réalisation de ce projet appliqué directement les connaissances acquises
en cours. Pour réaliser un travail aussi important, nous avons fait beaucoup de recherches
(bibliographie ou webographie) pour atteindre nos objectifs.

       Nous avons été aussi conscients que ce site peut évoluer dans l’avenir et donc il faut vraiment
au niveau du développement faire un travail précis et clair afin de faciliter le travail de la personne
qui le reprendra.

       Nous avons réussi de manière efficace l’association de plusieurs langages. Pour arriver à ce
résultat, nous avons fait preuve de beaucoup de patience pour arriver à coder correctement. La
discussion entre collègues de promotion a été aussi bénéfique pour la réalisation de certaines parties
du code. La répartition du travail a été efficace car ça nous a permis de respecter les délais de
réalisation.

      Ce projet a été vraiment passionnant et nous sommes fiers de cette réalisation.

                                                                                                       19
BA Alioune                                                                    DEMIRKOL Sadek

       VII.    ANNEXES

             1. Webographie

       Langages utilisés : texte -> inspiré de Wikipédia
       Langages utilisés : image PHP -> source Site du zéro
       Choix des outils : description WampServer -> source WampServer.com
       Pour les tutoriels nous nous sommes fait aider des sites suivants :
           o Site du zéro
           o Développez.com
           o PHP débutant
           o Le manuel PHP en ligne

                                                                                         20
BA Alioune                                                               DEMIRKOL Sadek

             2. Cahier des charges site internet – Petits princes de l’oued

L'objectif du site
Présenter notre association et notre projet à un public le plus large possible afin de
nous faire connaître et attirer les sponsors.

Informer le public et les gens qui nous suivent régulièrement de l’avancée de notre
projet. Cela prendra la forme d'une page « journal de bord » où nous pouvons poster
régulièrement des articles avec photo correspondant à nos actualités.
Si les articles peuvent être commentables comme sur un blog ca peut être chouette.
Sinon on s'en tiendra au facebook pour entretenir une relation avec les gens.

Les contenus
Nombre de pages estimées : 5 pages
   1 accueil
   1 journal de bord
   1 présentation de l'équipage
   1 soutient/sponsors
   1 contact
L'arborescence

DETAIL DES PAGES :
=> Page d'acceuil :

Schéma de la page principale d'accueil : voir schéma site joint.

                H EADER :
   -   Le logo en haut à gauche (non encore disponible, en cours de numérisation)
   -    avec 5 liens (contenu détaillé ci-dessous)
          o Accueil qui est la page principale
           divisé en articles et aside
                  Présentation du 4L trophy
                  Présentation de notre projet humanitaire
                  Présentation de notre projet écolo etc.
          o Journal de bord :
                  Page nouvelle avec nos articles au jour le jour, il nous faut donc
                    une possibilité de se connecter au site pour poster un article.
          o Equipage :
                  Page nouvelle avec une présentation simple de notre équipe
                    technique et de nous
                  environ 10 photos
                  nos motivations

                                                                                         21
BA Alioune                                                               DEMIRKOL Sadek

             o sponsors /soutient :
                   pourquoi nous soutenir ?
                   les logos de nos sponsors
                   opération 1€, 1km :
                          sous forme de tableau avec 1 colonne de km et 1 colonne
                            nom de la personne qui a payé pour la réalisation de ce
                            km. (6000km) – doit pouvoir être actualisable à chaque
                            fois que l’on reçoit un don.
                   Budget prévisionnel
             o Contact :
                   Page simple avec adresse siège social etc.

                B ANNIERE
L’esprit de la bannière c’est de mettre en avant le dernier article que l’on aura posté
sur « journal de bord ». Une photo, le titre de l’article et un bouton cliquable qui
renvoie sur l’article complet.

                A RTICLE
   1) Qui sommes nous ?
Petits Princes de l'Oued est une association loi 1901 créée dans un esprit
humanitaire, écologique et sportif par Claire Delteil et Rémy Schwartzler. Elle a
notamment pour but de participer au 16ème raid 4L Trophy 2013.

association loi 1901 = > cliquable et envoi vers 1 document pdf (ci-joint :
« association loi 1901.pdf ») si possible.

   2) Qu’est-ce que le 4L Trophy ?
C'est un raid humanitaire dans le désert marocain mené par des étudiants venus de
toute l'Europe à bord de Renault 4L. Les maîtres mots de la compétition :
DONNER en contribuant au développement du système éducatif marocain par
l’apport de dons et de matériel scolaire
SE DEPASSER dans cette grande aventure pour avancer quelques soient les
obstacles
RESPECTER la terre d'accueil qu'est le Maroc et son environnement

   3) Une asso d’esprit écolo ?
Tous les ans, une dizaine d'équipages sélectionnés par DELOITTE 4L Eco
Challenge vont encore plus loin dans leur engagement.
Leur objectif? Mener à bien un projet à visée écologique comme l'installation de
panneaux solaires et de puits, la plantation d'arbres, la réduction de l'empreinte
écologique du rallye, etc.
Petits Princes de l'Oued souhaite relever ce Challenge et leur projet est actuellement
en cours de conception.

                                                                                      22
BA Alioune                                                               DEMIRKOL Sadek

              A SIDE

Le 4L Trophy en Chiffres :

1350 4L conduites par 2700 étudiants sont lancées pendant 10 jours sur 6000 km
de route et de piste jusqu'à Marrakech. Une équipe technique de plus de 200
personnes dont 50 mécaniciens travaillant jour et nuit sur le bivouac.
En 2012 l'opération a permis la création de 3 salles de classes, 3 blocs sanitaires, et
la collecte de 63 tonnes de matériel scolaire, relayé par l'association Enfants du
Désert. C'est ainsi que depuis 15 ans, plus de 70000 enfants ont été scolarisés
dans de bonnes conditions.

              FOOTER

Copyright Petits prince de l’oued.

Webmaster : Julien Lorrain (si t’es ok pour que ton nom apparaisse là)

Nous contacter (lien cliquable qui renvoie sur la page Contact)

=> Page journal de bord :

Possibilité de poster des articles qui se retrouveraient tous sur la même page avec
un affichage dans ordre chronologique type blog; séparés les uns des autres par un
encadrement simple.

=> Page équipage :

aside gauche : une photo de Claire (« photo_claire ») avec un mini texte

aside droite : une photo de Rémy (« photo_rémy ») avec un mini texte

au centre :

    article 1 : photo de l'équipage total + texte
    article 2 : Coach sportif
    article 3 : VP info
    article 4 : VP Folk
    article 5 : VP Design
    article 6 : VP Com'
    article 7 : VP Logistique

                                                                                     23
BA Alioune                                                               DEMIRKOL Sadek

    article 8 : VP Relation internationales
    article 9 : Membre d'honneur

=> Page sponsors :

aside 1 droite : budget prévisionnel : image réduite cliquable et agrandissable si
possible. (« image_budget »)

aside 2 droite (en dessous du 1) : opération 1€ = 1km :

sous forme de tableau avec 1 colonne de km et 1 colonne nom de la personne qui a
payé pour la réalisation de ce km. (6000km) – doit pouvoir être actualisable à chaque
fois que l’on reçoit un don.

article 1 : pourquoi nous soutenir?

Le 4L Trophy est une grande aventure sportive mais également une importante

expédition humanitaire. Nous pouvons vous permettre de partager ses valeurs
de sérieux, de solidarité et de générosité et de participer à un projet de
renommée internationale et à un événement incontournable de la vie
étudiante, animé par la motivation incontestable d'étudiants soutenus par
l'expérience de professionnels.
De plus le 4L Trophy est un événement médiatique de grande importance

qui vous permettrait de véhiculez votre image sur les routes franc-comtoises,
françaises, espagnoles et marocaines au moyen d'un support publicitaire
dynamique et original, notre 4L elle-même , et ce autant avant la course que
pendant le raid.

Article 2 : logos de nos sponsors

images qui seront ajoutée sans texte au fur et à mesure.

=> Page contact :

                               Petits Princes de l'Oued

                     Siège social : 3 route de Lyon, 25720 Beure

                       Mail : petitsprincesdeloued@gmail.com

                                      Claire Delteil

                                                                                     24
BA Alioune                                                            DEMIRKOL Sadek

                                      0679061414

                                    Rémy Schwartzler

                                      0666701355

             Pour plus d'information sur le 4L Trophy : www.4ltrophy.com

Charte graphique
Fond uni : (couleur sable) background-color:#FFFFCC

Police :
   - Tous les titres d’article/aside :
         o Color : maroon
         o Trebuchet
         o Taille : gros
   - Les boutons de nav :
         o trébuchet
         o Noir
         o Quand on passe la souris dessus ca les souligne et les met en maroon
         o Taille : moyen
   - Texte d’article :
         o Trébuchet
         o Noir
         o Taille : petit

Le nom du site
Si possible petitsprincesdeloued.

Nom de domaine .fr, .com, .net, etc comme c'est possible.

                                                                                 25
Vous pouvez aussi lire