Réalisation du Site internet du FIMU 2010 Utilisation du Framework ...
Réalisation du Site internet du FIMU 2010 Utilisation du Framework ...
Réalisation du Site internet du FIMU 2010 Utilisation du Framework ...
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
Réalisation <strong>du</strong> <strong>Site</strong> <strong>internet</strong> <strong>du</strong> <strong>FIMU</strong> <strong>2010</strong><strong>Utilisation</strong> <strong>du</strong> <strong>Framework</strong> Python, DjangoTW52 : <strong>FIMU</strong> <strong>2010</strong>Rémy HUBSCHERAnwar RHEMIMETDépartement Informatique de l'UTBMMairie de BelfortCellule des Festivals Service CommunicationTour 41 – 90000 Belforthttp://www.fimu.com/Tutrice de stageMme Sylvia FIOLSITuteur à l'UTBMDr Maxime WACKAssistantesMlle Emilie DUMAINMlle Mathilde VERNIER
TW52 : Réalisation <strong>du</strong> site <strong>internet</strong> <strong>du</strong> <strong>FIMU</strong> <strong>2010</strong>Rémy HUBSCHER & Anwar RHEMIMET4 juin <strong>2010</strong>
2 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
TABLE DES MATIÈRES7.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257.3 Les améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 Arborescence des pages 278.1 La problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278.3 Les améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 Un site multilingue 299.1 La problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299.3 Améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2910 La gestion des fichiers 3110.1 La problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3110.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3110.3 À noter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3111 Les scènes 3311.1 La problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3311.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3311.3 Améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3312 Les groupes 3512.1 La problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3512.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3512.3 Améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3513 Planning des concerts 3713.1 La problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3713.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3713.3 Améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3714 Le streaming 4114.1 La problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4114.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4114.3 Améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
TABLE DES MATIÈRES15 Les galeries d’images 4315.1 La problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4315.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4315.3 Améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4416 Les partenaires 4516.1 La problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4516.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4516.3 Améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4517 Le formulaire de contact 4717.1 La problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4717.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4718 Flux d’actualités Twitter 4918.1 La problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4918.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4918.3 Améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4919 Bandeau d’images 5119.1 La problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5119.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5119.3 Améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5120 Affichage de la météo 5320.1 Quel temps fait-il ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5320.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5321 Les boutons d’accès rapides 5521.1 La problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5521.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5521.3 Améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5522 L’interface d’administration 5722.1 La problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5722.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5722.3 Améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 5
TABLE DES MATIÈRES23 Les statistiques de visites 5923.1 À quoi a servi notre travail ? . . . . . . . . . . . . . . . . . . . . . . . . . 5923.2 Analyse Détaillée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60IV Bilans 6324 Bilans 6524.1 Bilan pédagogique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6524.2 Bilan Technique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6524.3 Bilan Humain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6724.4 Les recettes de la réussite . . . . . . . . . . . . . . . . . . . . . . . . . . 676 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
RemerciementsNous souhaitons remercier toutes les personnes ayant participé à la réussite de notreUV de TW52.– M. Maxime WACK pour avoir encadré cette UV et pour avoir été à nos côtés <strong>du</strong>rantle week-end <strong>du</strong> <strong>FIMU</strong> et la réalisation de ce projet.– Mlle Sylvia FIOLSI pour nous avoir expliqué les besoins et nous avoir fait parvenir,toujours dans les temps, les informations nécessaires à notre projet.– Mlle Emilie DUMAIN et Mathilde VERNIER pour avoir rapidement pris en mainl’administration développée, ajouté le contenu au site, nous avoir signalé les petitsbugs sans nous mettre la pression et sans baisser les bras. Merci pour votredisponibilité les filles.– L’équipe des étudiants de RE41 qui sont venus nous prêter main forte pendant leweek-end <strong>du</strong> <strong>FIMU</strong> afin de tenir les points d’animations et de prévenir le public desmodifications de programmes. Ils nous ont aussi bien aidés pour la mise en placedes points de streaming et <strong>du</strong> web café. Merci d’avoir été présents dans la bonnehumeur et d’avoir supporté nos ordres et contre-ordres.Un remerciement tout particulier à l’équipe organisatrice <strong>du</strong> <strong>FIMU</strong> et à la mairie deBelfort qui s’occupe chaque année de rendre possible cet évènement unique.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 7
8 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Première partieContexte <strong>du</strong> Projet<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 9
Chapitre 1Le <strong>FIMU</strong>Chaque année <strong>du</strong>rant le week-end de la Pentecôte, la ville de Belfort et les étudiantsorganisent le Festival International de Musique Universitaire.Le <strong>FIMU</strong> concentre sur trois jours les aspirations de près de 2 700 musiciens et choristesamateurs à se pro<strong>du</strong>ire et à faire connaître leur pratique. Ils sont représentants de leurécole ou bande de copains,”fous de musique” qui se retrouvent dans le festival pour leurplaisir, en véhiculant l’esprit de fête et d’indépendance propre au monde étudiant.Pour cette édition <strong>2010</strong>, le <strong>FIMU</strong> regroupe 141 formations ou orchestres issus d’universitésou de conservatoires venant de 30 pays ainsi que 14 Scènes en salle ou en pleinair, situées dans la Vieille Ville de Belfort :1. Salle des Fêtes,2. Chambre de Commerce,3. Scène de la République,4. Le Kiosque,5. Cathédrale Saint Christophe,6. Hôtel de Ville,7. L’Arsenal,8. Chapiteau Jazz,9. Hôtel <strong>du</strong> département,10. Scène <strong>du</strong> Lion,11. Centre chorégraphique,12. Centre de congrès Atria,13. Conservatoire,14. Le Théâtre Granit.Le <strong>FIMU</strong>, c’est aussi l’occasion de la rencontre entre les formations et le public toujoursplus nombreux.L’accès à l’ensemble des concerts <strong>du</strong> festival est totalement gratuit.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 11
12 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 2Les délaisAprès un premier rendez-vous avec la Mairie de Belfort le 19 mars <strong>2010</strong>, nous avonspu définir les besoins et déterminer la charge de travail à réaliser ainsi que les priorités.L’équipe de communication <strong>du</strong> <strong>FIMU</strong> était impatiente de voir arriver le site <strong>internet</strong>.Il ne restait en effet que deux mois jour pour jour pour réaliser le projet.Pour respecter les délais <strong>du</strong> travail, nous avons utilisé des méthodes de gestion deprojets très efficaces.Afin de planifier notre travail et de se répartir les tâches, nous avons fixé une <strong>du</strong>réeprévue pour chaque opération et en les classant des plus prioritaires aux plus facultatives.Pour que notre travail soit réalisé dans les meilleures conditions, nous avons fixé unedate pour que nous puissions avoir une première version <strong>du</strong> site le mois suivant.Nous devions respecter le planning au plus serré puisque le projet avait une obligationde réussite et que les délais étaient très court.Nous avons présenté notre projet à l’équipe le 20 avril en expliquant aux administratricescomment utiliser l’administration pour commencer à saisir le contenu.Le site a ouvert au public le 29 avril <strong>2010</strong>.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 13
14 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 3L’hébergementLe sujet de notre TW indiquait l’utilisation de Python pour réaliser un site <strong>internet</strong>.Le site précédent était en PHP et utilisait Drupal comme Gestionnaire de Contenu.Après avoir contacté l’hébergeur EniX, ils augmentaient leurs tarifs de 16¿ à 50¿ parmois pour mettre en place un hébergement Python.Nous avons donc mis en place un partenariat avec SuperServices, la société éditricede SuperMenu.fr afin de mettre en avant les restaurants partenaires <strong>du</strong> <strong>FIMU</strong> dans leurbase de données en échange de l’hébergement <strong>du</strong> site <strong>internet</strong> <strong>du</strong> <strong>FIMU</strong>.Il faudra veiller à maintenir ce partenariat l’année prochaine en contactant M. LaurentRupert le gérant de SuperServices 1 .1. http://www.superservices.fr/ - http://www.supermenu.fr/<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 15
16 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Deuxième partieObjectifs<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 17
Chapitre 4Planning et répartition des tâchesPour bien mener notre travail, nous avons défini la liste des tâches selon les besoins<strong>du</strong> cahier des charges et nous avons prévu une <strong>du</strong>rée pour chaque réalisation.Concernant l’organisation et la répartition des différentes tâches à réaliser, nous avonsutilisé un diagramme de GANTT pour modéliser la planification de tâches nécessaires àla réalisation de notre site. (cf. fig 4.1 page 18)Voici la liste des tâches que nous avons prévue classé par priorité dans le cahier descharges :1. Un design respectueux de la charte graphique des autres supports de communication2. Mise en place <strong>du</strong> cadre de développement ;3. Développement <strong>du</strong> mo<strong>du</strong>le de page ;4. Mise en place de l’arborescence <strong>du</strong> site ;5. Mise en place <strong>du</strong> gestionnaire de fichiers ;6. Réalisation <strong>du</strong> formulaire de contact ;7. Intégration d’un annuaire de partenaires ;8. Mise en place des scènes sur une carte Google Maps ;9. Mise en place de la liste des groupes ;10. Moteur de recherche multicritères sur les groupes ;11. Réalisation des boutons d’accès rapides ;12. Mise en place <strong>du</strong> mo<strong>du</strong>le Météo ;13. Intégration des pages de streaming ;14. Intégration <strong>du</strong> mo<strong>du</strong>le de galeries d’images ;15. Intégration de l’API Twitter ;16. Planning sur téléphone portable.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 19
4. Planning et répartition des tâches4.1 Tâches de AnwarFigure 4.1 – Diagramme de GANTT <strong>du</strong> projet1. Un design respectueux de la charte graphique des autres supports de communication2. Maquettage des écrans (Recherche dans les groupes, formulaire de contact, planningdes concerts)3. Planning sur téléphone portable4. Intégration d’un annuaire de partenaires Réalisé par Rémy5. Intégration des pages de streaming Réalisé par Rémy4.2 Tâches Rémy1. Mise en place <strong>du</strong> cadre de développement2. Mise en place de l’arborescence <strong>du</strong> site3. Mise en place <strong>du</strong> gestionnaire de fichiers4. Réalisation <strong>du</strong> formulaire de contact5. Mise en place des scènes sur une carte Google Maps6. Mise en place de la liste des groupes7. Moteur de recherche multicritères sur les groupes8. Gestion <strong>du</strong> planning des concerts9. Réalisation des boutons d’accès rapide10. Mise en place <strong>du</strong> mo<strong>du</strong>le Météo11. Intégration <strong>du</strong> mo<strong>du</strong>le de galerie d’images12. Intégration de l’API Twitter20 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 5Objectifs de formationAtteindre un résultat de qualité nécessite la découverte de nouvelles technologies, dansun premier temps, et la maîtrise après un premier contact.La réalisation <strong>du</strong> site <strong>internet</strong> <strong>du</strong> <strong>FIMU</strong> était l’occasion d’acquérir diverses compétencesen développement web.Le site <strong>du</strong> <strong>FIMU</strong> a été un challenge à tous les niveaux sur des points sensibles tels quela performance <strong>du</strong> serveur, lors de la montée en charge, la sécurité <strong>du</strong> site et l’ergonomie,gage <strong>du</strong> succès <strong>du</strong> projet.Partant de niveaux différents dans la réalisation de projets, nous nous sommes fixésdes objectifs de formation différents.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 21
5. Objectifs de formation5.1 Objectifs pour Anwar1. Utiliser un outil de gestion de codes sources tel que Mercurial pour travailler àplusieurs sur un même projet informatique ;2. Mettre en place un design dans le respect des règles <strong>du</strong> W3C ;3. Mettre en place un design pour la téléphonie mobile ;4. Utiliser L A TEX pour réaliser un rapport et un support de présentation ;5. Étudier l’ergonomie de la saisie des informations multilingue dans l’administration ;6. Mettre en place une applet Flash sur un site <strong>internet</strong>.5.2 Objectifs pour Rémy1. Étudier et exploiter l’API Twitter afin d’afficher les résultats de recherche directementsur le site ;2. Utiliser un framework Javascript pour mettre en place un galerie d’images et unbandeau défilant ;3. Étudier l’envoi d’email depuis un site <strong>internet</strong> sans qu’ils ne soient considéré commeSPAM ;4. Mettre en place des URL internationnalisés pour un meilleur référencement ;5. Configurer un système de cache des pages efficaces pour la monté en charge d’unsite <strong>internet</strong> dynamique.22 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 6Cadre de développement6.1 ProblématiqueL’un des problèmes majeurs de cette TW, c’est qu’elle commence au début <strong>du</strong> semestrede printemps, début Mars alors que le site <strong>du</strong> <strong>FIMU</strong> devrait déjà être en ligne depuisdébut septembre, afin de lancer le recrutement des groupes et des bénévoles.C’est donc un travail dans l’urgence demandant un cadre de développement sérieuxaux échéances strictes.Ce projet a été réalisé tous les ans depuis 20 ans par un groupe d’étudiants qui ontchaque année développé des solutions différentes.6.2 ObjectifNotre objectif principal cet année, a été de mettre en place un cadre de développementpermettant de trouver une solution à ce problème et donc de permettre une évolutionnaturelle <strong>du</strong> site d’une année à l’autre.6.3 Le code <strong>du</strong> projetLe projet de site <strong>du</strong> <strong>FIMU</strong> est disponible ici http://fimu<strong>2010</strong>.googlecode.com/.Vous pouvez récupèrer le code avec Mercurial à l’aide de la commande suivante :hg clone http://fimu<strong>2010</strong>.googlecode.com/hg/ fimu<strong>2010</strong>N’hésitez pas à contacter Rémy Hubscher afin d’obtenirl’aide nécessaire à la prise en main <strong>du</strong> projet.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 23
6. Cadre de développement6.4 Cahier des charges de la maquette <strong>du</strong> siteChaque année, la charte graphique <strong>du</strong> <strong>FIMU</strong> est modifiée, nous avons négocié queles graphistes qui réalisent les affiches s’occupent dorénavent de fournir la maquette <strong>du</strong>design <strong>du</strong> site afin qu’il s’intégre correctement à la charte graphique des autres supportsde communication.Cette maquette devra contenir :1. Un emplacement pour le flux Twitter ;2. Un emplacement pour un bandeau d’images <strong>du</strong> <strong>FIMU</strong> ;3. Un menu sur deux niveaux imbriqués (Principal et secondaire) ;4. Une page d’accueil mettant en avant les différentes parties <strong>du</strong> site :– Les scènes en streaming ;– Le planning des concerts ;– La gazette <strong>du</strong> <strong>FIMU</strong> ;– Les restaurants ;– Les galeries de photos.5. Une page de contenu présentant l’affichage de la galerie d’images.6.5 Opération à réaliser chaque année dans le cadrede cette TWChaque année, il faut donc adapter le site avec les nouveaux élèments :1. Découper la maquette en HTML/CSS valide et propre et l’intégrer au site,2. Lier les blocks menus, twitter, photos afin qu’ils apparaissent au bons endroits <strong>du</strong>design,3. Améliorer la documentation technique pour les étudiants suivants,4. Améliorer le manuel utilisateur pour les administratrices <strong>du</strong> site,5. Améliorer les mo<strong>du</strong>les existants et au besoin ajouter les nouveaux,6. Adapter la maquette pour une version pour téléphonie mobile <strong>du</strong> site.24 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Troisième partieConception<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 25
Chapitre 7Design7.1 La problématiqueLe design a été pour nous, la chose la plus difficile à mettre en place.En effet, cela fait appel à des qualités artistiques qu’un informaticien n’a pas forcément.7.2 Notre solutionNous avons donc repris les couleurs de l’affiche afin d’essayer de faire quelque chosed’ergonomique.Le résultat était bien loin d’être parfait, mais il était acceptable.Il y a 4 parties à ce design :1. Le header de la page qui reprend l’affiche <strong>du</strong> <strong>FIMU</strong> <strong>2010</strong>,2. La barre de menu qui affiche au survol un menu secondaire,3. La zone de contenu qui s’adapte au contenu à présenter,4. Le footer qui affiche les coordonnées ainsi que le lien vers l’administration une foisconnecté.7.3 Les améliorations7.3.1 La réalisation <strong>du</strong> designNous avons demandé à ce que les graphistes qui s’occupent de faire les affiches, lesplannings ainsi que différents supports de communication réalise la maquette <strong>du</strong> site<strong>internet</strong>.À titre indicatif, la réalisation d’un tel design coûte environ 800¿ HT.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 27
7. DesignIl faudra cependant faire la découpe en HTML/CSS de la maquette qui vous serafournie (au format PNG de préférence).7.3.2 Proportion <strong>du</strong> designLe header sur la version <strong>du</strong> design <strong>2010</strong> est bien trop grand. Nous avons été obligé defaire ainsi pour ne pas distordre les personnages de l’affiche.Il faudra donc veiller à ce qu’il soit plus petit la prochaine fois afin de mieux s’adapteraux petits écrans.D’autre part, le fait de superposer la galerie et le flux twitter sur l’image n’est pasune bonne solution. Il faudra prévoir un agencement permettant d’afficher tout cela demanière harmonieuse.Figure 7.1 – Le design global28 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 8Arborescence des pages8.1 La problématiqueLe point central d’un site <strong>internet</strong>, ce sont les pages.Nous souhaitions que le site soit entièrement multilingue.De plus, afin d’améliorer le référencement, les adresses URL des pages devaient-êtretra<strong>du</strong>isible tout en gardant la possibilité de passer d’une langue à une autre en restantsur la même page.Enfin, les pages devaient pouvoir être affiché dans des menus avec un titre court etdans les titres de fenêtres avec un titre long pour un meilleur référencement.Le tout devant évidement être configurable entièrement depuis l’administration <strong>du</strong>site.8.2 Notre solutionChaque page possède un titre et un titre spécifique pour les menus. Un systèmed’onglets permet de remplir le contenu d’une page dans les différentes langues <strong>du</strong> site.En fonction <strong>du</strong> titre, un champ slug est renseignée avec l’url de la page dans la bonnelangue.Des checkbox permettent d’afficher la page dans le menu primaire ou secondaire.Il est possible d’imbriquer les pages les unes dans les autres en sélectionnant une pageparent.Afin de permettre à des non programmeurs de renseigner le contenu <strong>du</strong> site, nousavons mis en place un éditeur WYSIWYG 1 .1. What You See Is What You Get : Éditeur HTML permettant de modifier le texte comme dansn’importe quel logiciel de traitement de texte.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 29
8. Arborescence des pages8.3 Les améliorationsDans l’urgence, nous avons donné à chaque menu un champ order donnant l’ordrede la page dans le menu par rapport aux autres pages d’une même rubrique.Il faut améliorer le formulaire de réorganisation des menus en utilisant la représentationintervalaire 2 des arbres dans une base de données.L’app django-mptt peut-être utilisé à cet effet.Figure 8.1 – Représentation intervalaire d’un arbre en SQL2. http://www.site<strong>du</strong>zero.com/tutoriel-3-38130-la-representation-intervallaire.html30 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 9Un site multilingue9.1 La problématiqueLe <strong>FIMU</strong> est, comme son nom l’indique, un festival international.Il est nécessaire d’avoir un site multilingue.9.2 Notre solutionNous avons utilisé django-multilingual qui permet de définir certains champs commeétant internationnalisé.Il est ainsi possible de rajouter des langues à la volée sans avoir à modifier la base dedonnées.Par faute de temps, la saisie des textes en anglais n’a pu se faire avant le <strong>FIMU</strong>. Nousavons donc désactiver cette fonctionnalité pendant le <strong>FIMU</strong>.Cependant, après le <strong>FIMU</strong>, les textes ont été ajouté et nous avons donc réactivé lafonctionnalité.9.3 AméliorationsNous souhaitions avoir le site en Arabe, mais nous avons été confronté au problèmed’écriture de droite à gauche.Il faut donc mettre en place un bouton dans TinyMCE afin de pouvoir sélectionnerle sens d’écriture.Il faut aussi être en mesure lors de l’activation de cette langue d’ajouter un style CSSsur la page signaler au navigateur d’écrire de droite à gauche.Django permet de faire cela en utilisant LANGUAGE BIDI 1 .1. http://docs.djangoproject.com/en/dev/topics/i18n/internationalization/#other-tags<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 31
9. Un site multilingueFigure 9.1 – On remarque les onglets de langues en haut32 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 10La gestion des fichiers10.1 La problématiqueLe site <strong>du</strong> festival nécessitait la possibilité de proposer en téléchargement un certainnombre de fichiers (Le dossier de presse, les affiches, le formulaire d’inscription desbénèvoles, les PDF de la Gazette, ...)Il fallait aussi être en mesure de mettre en ligne un nombre important de photos ausein d’une galerie très rapidement.10.2 Notre solutionNous avons donc mis en place django-filebrowser ainsi que djang-grappelli afinde permettre la gestion des fichiers sur le serveur ainsi que l’upload massif de plusieursfichiers à la fois.Nous avons interfacé le navigateur de fichiers avec TinyMCE afin de pouvoir faire unlien sur un fichier ou encore ajouter une image dans une zone de texte.10.3 À noterIl arrive que parfois le fichier uploadé n’ai pas les droits de lecture. Il faut veiller à ceque le répertoire contenant le fichier ai les bons droits afin que les fichiers créés héritentde ces droits.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 33
10. La gestion des fichiersFigure 10.1 – Navigation dans le gestionnaire de fichiersFigure 10.2 – Upload multiple d’un répertoire34 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 11Les scènes11.1 La problématiqueAfin de présenter aux visiteurs les différentes scènes, rien de tel que de les afficher surun plan.11.2 Notre solutionNous avons choisi d’utiliser l’API Google Maps afin de sélectionner dans l’administrationl’emplacement géographique de la scène dans la vieille ville et de présenter les scènessur le site.Lors <strong>du</strong> clic sur une scène dans la liste des scènes, la carte se recentre sur la scène enquestion.11.3 AméliorationsCe qu’il faudrait faire c’est un planning de la scène. De la même manière qu’il estpossible d’afficher le planning d’un groupe et celui d’une journée, il serait intéressant depouvoir afficher le planning de la scène et les concerts à venir.Il faut ensuite ajouter un lien voir le programme à côté de chaque scène dans la listedes scènes ou lors <strong>du</strong> clic sur le marqueur de la scène sur la carte Google Maps.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 35
11. Les scènesFigure 11.1 – Affichage des scènes sur la carte Google Maps36 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 12Les groupes12.1 La problématiqueIl y a eu 141 groupes au <strong>FIMU</strong> <strong>2010</strong>, il faut pouvoir retrouver un groupe afin d’avoirune description plus précise ou bien connaitre les prochains concerts où le retrouver.12.2 Notre solutionNous avons ajouté les groupes par genres, avec leur code de groupe permettant defaire le lien avec les autres systèmes d’informations de la cellule des festivals.Chaque groupe a donc un nom et une description ainsi qu’un ou plusieurs pays.Il est ainsi possible de retrouver tous les groupes d’un pays ou d’un genre.D’autre part, lors de l’affichage d’un groupe, il est possible de lister les lieux et horairesde ses prochains concerts.On peut aussi se rendre sur son site <strong>internet</strong> afin d’y écouter quelques extraits.12.3 Améliorations12.3.1 La ville de provenance <strong>du</strong> groupeIl faudrait aussi pouvoir renseigner la ou les villes des quelles viennent les membres<strong>du</strong> groupes car on aimerait les afficher dans le programme.12.3.2 La pagination de la liste des groupesNous n’avons pas mis de pagination dans la liste des groupes, mais d’un point de vueergonomique c’est une fonctionnalité intéressante pour ne pas décourager le lecteur.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 37
12. Les groupesIl est ainsi bien plus intéressant de lui présenter 8 pages de 20 groupes chacune plutôtque les 141 groupes sur une seule page.Il faut utiliser pour ce faire la vue générique object list 1 .12.3.3 La galerie de photosIl serait intéressant de pouvoir lier une galerie de photos d’un concert à un groupeafin de faire apparaitre les galeries sur la page de présentation <strong>du</strong> groupe.Figure 12.1 – Affichage de la liste des groupes1. http://docs.djangoproject.com/en/dev/ref/generic-views/38 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 13Planning des concerts13.1 La problématiqueL’un des grands challenges dans un site web c’est d’afficher correctement les plannings.Ici nous n’avions aucun concert se chevauchant, cependant des concerts de 30m, 45m,1h, 1h30, 2h, 3h, 4h.13.2 Notre solutionNous avons délibérément choisi de faire un niveau de détail à la demi-heure affichant45 minutes comme une heure pleine.Nous avons présenté les concerts dans un tableau à doubles entrées avec la scène àgauche et l’horaire en tête.Le clic sur un concert permettait de voir la description <strong>du</strong> groupe.Il a fallu gérer les concerts sans groupes.Il a fallu gérer les concerts conférences.13.3 Améliorations13.3.1 Les concerts à plusieurs groupesNous n’avons pas gérer la possibilité d’avoir des concerts avec plusieurs groupes.13.3.2 Le logo des scènes sur le programmeIl serait bien d’ajouter le logo des scènes sur le planning comme c’est le cas sur leplanning papier.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 39
13. Planning des concerts13.3.3 Les concerts après minuitNous n’avons pas gérer les concerts commençant après 23h30, en effet lors <strong>du</strong> tri deshoraires 00h00 est avant 14h00 ce qui engendrait un gros problème d’affichage.Il faudra donc faire une fonction de tri de la pile des concerts prenant en compte ceproblème.13.3.4 Plage des concerts par joursLors <strong>du</strong> développement de ce planning, il est apparu que les plages de concerts sontdifférentes d’un jour à l’autre.Le vendredi à 20h30 - 00h, le Samedi à 14h00-00h00, le Dimanche de 13h30 à 01h00,le Lundi de 14h00 à 22h30.Les plages ont été définies en <strong>du</strong>r dans le code et il faudrait mettre en place un systèmepermettant de les calculer automatiquement.13.3.5 Les dates <strong>du</strong> <strong>FIMU</strong>Le <strong>FIMU</strong> s’est déroulé <strong>du</strong> 21 au 24 mai <strong>2010</strong> mais les dates seront différentes en 2011.Les dates s’affichaient en <strong>du</strong>r dans le design sur le header, je les ai retiré pour que çane pose pas de problème en septembre prochain.Il faudrait mettre en place un système de widget afin de pouvoir modifier les zones detexte tels que les boutons d’accès rapide, les textes <strong>du</strong> footer depuis la base de données.13.3.6 La version mobileIl faut faire une vue d’affichage <strong>du</strong> planning adapté aux très petites configurations.En effet, il est impossible de lire le planning depuis un téléphone portable.Il faudra travailler l’affichage <strong>du</strong> planning sur téléphone mobile pour l’an prochain.Ainsi que la navigabilité entre le planning, les groupes et le retour intuitif au planning.40 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
13.3 AméliorationsFigure 13.1 – Planning des concerts<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 41
13. Planning des concertsFigure 13.2 – Les menus des restaurants partenaires en version ordinateur de bureauFigure 13.3 – Les menus des restaurants partenaires en version mobile42 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 14Le streaming14.1 La problématiqueCette année, Reda BERRADA a choisi d’utiliser les services de ustream.tv pour fairele streaming.L’avantage étant la possibilité de voir le nombre de personnes regardant le flux, deregarder le flux depuis un téléphone portable ou encore de communiquer avec les autresauditeurs via un chat social.Il fallait intégré le chat social ainsi que la vidéo sur le site <strong>du</strong> <strong>FIMU</strong>.14.2 Notre solutionNous avons mis en place un mo<strong>du</strong>le streaming permettant de générer automatiquementles pages de streaming en saisissant uniquement l’id ustream <strong>du</strong> flux.14.3 Améliorations14.3.1 Liste des fluxIl faudrait mettre en place une page permettant d’afficher la liste des flux ainsi que lestatus <strong>du</strong> flux (Diffusion Live !, Off)Pour le <strong>FIMU</strong> <strong>2010</strong>, nous avons utilisé une page de texte standard en créant nousmême les liens vers les différentes pages streaming <strong>du</strong> site.14.3.2 Afficher une scène en streamingIl faudrait pouvoir lier une scène à un flux pour ainsi afficher un lien Regarder dansla liste des scènes.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 43
14. Le streamingFigure 14.1 – La page de la scène de la république avec la scène en streaming en hautet le chat social en bas44 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 15Les galeries d’images15.1 La problématiqueAfficher une galerie d’images des miniatures et un diaporama avec les photos agrandies.Pouvoir présenter plusieurs galeries sur une même page.15.2 Notre solutionIl y avait la solution d’ajouter les images dans des galeries en permettant de spécifierà chaque fois un commentaire, mais ça obligait à entrer les images une à une.Lorsqu’on ajoute une ou deux photos par jours, c’est une solution envisageable, maislorsqu’on souhaite mettre en ligne 2000 photos sur 3 jours ce n’est pas une solutionraisonnable.Nous avons donc opté pour l’utilisation de django-filebrowser pour l’upload massifd’images, puis le redimensionnement automatique de celle-ci en miniature et taille webpour le diaporama.Nous avons aussi développé un petit script multiplateforme Python avec une interfacePyQt permettant le redimensionnement massif de toutes les images d’un dossier sur toussystèmes avant l’upload.Ainsi les images en 10M pixels de l’appareil sont converties en fichier de moins de100ko plus adapté au web et ce avant upload vers le serveur.Ensuite la galerie est liée à un répertoire d’images.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 45
15. Les galeries d’images15.3 Améliorations15.3.1 Lier une galerie à un groupeIl faudrait pouvoir lier une galerie à un groupe afin d’afficher les photos d’un groupesur la page de description <strong>du</strong> groupe.15.3.2 L’ordre des imagesLes images sont récupèrées dans le répertoire et n’ont donc aucun critères de tri. Ilest possible de les trier par nom par exemple.Il faudra donc faire un système permettant de renommer les images avec pour préfixe<strong>du</strong> nom le numéro d’ordre qu’on souhaite leur donner dans la galerie afin de pouvoirmodifier l’ordre d’affichage.Figure 15.1 – Galerie <strong>du</strong> Lundi46 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 16Les partenaires16.1 La problématiqueAfficher une liste des partenaires avec leur logo et un lien vers leur site <strong>internet</strong>.16.2 Notre solutionOn sélectionne le logo <strong>du</strong> partenaire, son nom et son site <strong>internet</strong> et on affiche celadans un tableau.16.3 AméliorationsRéfléchir à une présentation des logos afin de ne pas mettre en avant certains logospar rapport à d’autres lors <strong>du</strong> redimensionnement automatique.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 47
16. Les partenairesFigure 16.1 – Page des partenaires <strong>du</strong> <strong>FIMU</strong>48 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 17Le formulaire de contact17.1 La problématiquePouvoir envoyer le mail à plusieurs personnes, pouvoir modifier les adresses de contactdans l’administration.17.2 Notre solutionOn ajoute les adresses à la section contenant le formulaire de contact.Figure 17.1 – Papa Chango sur la scène <strong>du</strong> Conservatoire<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 49
17. Le formulaire de contactFigure 17.2 – Papa Chango sur la scène de l’Arsenal50 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 18Flux d’actualités Twitter18.1 La problématiquePlusieurs intérêts :1. Permettre aux gens de communiquer sur le <strong>FIMU</strong> pour présenter des photos, desinfos, ...2. Permettre à l’organisation de communiquer sur les modifications de plannificationdes concerts, ...18.2 Notre solutionNous avons mis en place une fonction permettant de récupèrer tous les tweets correspondantà une recherche grâce à la Search API JSON de Twitter.Seulement les deux derniers tweets sont récupèré et un lien permet de les voir tous.18.3 Améliorations18.3.1 AffichageDans le design 2011, prévoir un affichage <strong>du</strong> flux spécifique qui ne soit pas dans leheader.18.3.2 Chargement AJAXÀ l’heure actuelle le flux twitter se charge en python sur toutes les pages ce qui ralenticonsidèrablement le chargement de la page puisque le serveur doit faire une requête surtwitter pour générer le contenu d’une page.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 51
18. Flux d’actualités TwitterSi on le fait en ajax, cela permettra de mettre à jour la liste des tweets sans rechargerla page, mais aussi de charger les informations twitter uniquement après affichage desinformations recherchées par l’utilisateur.À l’heure actuelle, le problème n’est pas critique car les pages <strong>du</strong> site sont mises encache 15 minutes. Ainsi, il y a une requête sur twitter une fois par page toute les 15minutes, ce qui est acceptable.18.3.3 Mise en valeur des tweets de l’organisationIl serait important de signaler aux utilisateurs les tweets officieux des autres utilisateurset les tweets officiels de l’organisation envoyés à l’aide <strong>du</strong> compte @fimu<strong>2010</strong>.Une première solution est de changer la couleur de ces tweets.Une seconde consiste à faire un flux des tweet officiel et un pour les tweets des autresutilisateurs.Ce sera surement vraiment nécessaire lorsque l’an prochain les utilisateurs seront plusnombreux à twitter à propos <strong>du</strong> <strong>FIMU</strong>.Pour informations, nous avons eu environ 300 tweets sur les 3 jours. Les tweets officielsrestaient donc suffisament longtemps pour apparaître.Il suffit d’avoir 3 fois plus de tweets pour que ce soit bien moins vrai.Figure 18.1 – Flux twitter en haut à droite et bandeau défilant en bas à droite.52 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 19Bandeau d’images19.1 La problématiqueLe <strong>FIMU</strong> c’est un mouvement inlassable de personnes, pendant la préparation et<strong>du</strong>rant l’évènement.On nous a donc demandé de mettre un bandeau d’images défilantent.19.2 Notre solutionNous avons donc créer une galerie bandeau où il était facile d’ajouter et de supprimerdes images.Ensuite nous avons utilisé un script JQuery pour faire défiler les images en fon<strong>du</strong>enchaîné.19.3 AméliorationsPrévoir dans la maquette un emplacement pour afficher le panneau défilant de manièreergonomique non superposées à l’image d’entête <strong>du</strong> site <strong>FIMU</strong>.Vérifier que toutes les images de la galerie ont une taille strictement identique.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 53
19. Bandeau d’imagesFigure 19.1 – Le groupe Austin sur la scène de la République54 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 20Affichage de la météo20.1 Quel temps fait-il ?C’est une des questions que les gens se posent le plus lors d’un évènement. Fait-ilsuffisament beau pour venir au <strong>FIMU</strong> ?C’est aussi un moyen de faire venir les gens sur le site. Ils savent que s’ils veulent lamétéo de Belfort, ils peuvent venir sur le site <strong>du</strong> <strong>FIMU</strong>.20.2 Notre solutionNous avons ajouté sur la page d’accueil un widget météo gratuit fournis par MétéoFrance.Nous avons adapté le style d’affichage pour le mettre dans les couleurs <strong>du</strong> site.Figure 20.1 – Affichage de la météo<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 55
20. Affichage de la météoFigure 20.2 – Tous types de groupes au <strong>FIMU</strong>56 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 21Les boutons d’accès rapides21.1 La problématiqueMettre en avant certaines informations.21.2 Notre solutionIl est apparu que des personnes envoient des mails pour demander le programme alorsqu’il était en ligne. De même pour les affiches ou le dossier de presse.Nous avons donc mis en place de gros boutons rouges sur la page d’accueil pourpermettre aux visiteurs d’accéder directement à la page recherchée.Les boutons sont passé de Téléchargez le formulaire bénévole à Regardez leprogramme puis Scènes en StreamingEnfin nous en avons mis 3 avec Télécharger la Gazette, Regardez les photos etSuperMenus des restos.21.3 AméliorationsIl faudrait pouvoir modifier le contenu et le lien de ces boutons depuis l’administration.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 57
21. Les boutons d’accès rapidesFigure 21.1 – Le <strong>FIMU</strong> c’est aussi 141 groupes et plus de 2300 musiciens58 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 22L’interface d’administration22.1 La problématiquePlus une personne demande à une autre de faire quelques choses, plus on perd detemps et plus on déforme l’information. 1Il est donc primordial dans un site <strong>internet</strong> que la personne qui a l’information puissela mettre à jour directement.22.2 Notre solutionL’interface d’administration complète permet au service communication de la celluledes festivals de mettre en ligne toutes les informations sur le site <strong>internet</strong> dans toutes leslangues.Chaque information doit y être modifiable et c’est ce que nous avons mis en place àquelques détails prêt, décrit dans les Améliorations de ce rapport.22.3 AméliorationsL’affichage des informations est toujours améliorable, il ne faut pas hésiter à l’utiliserafin de voir ce qui peut être amélioré.1. C’est le principe <strong>du</strong> jeu : Le téléphone Arabe.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 59
22. L’interface d’administrationFigure 22.1 – Une partie administration permettant la modification de tous le contenu<strong>du</strong> site60 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Chapitre 23Les statistiques de visites23.1 À quoi a servi notre travail ?Lorsqu’on investi autant d’heures de travail pour 3 jours, on est en droit de ce demanderqu’elle est la portée de son travail.Voici quelques chiffres.23.1.1 Nombres de visiteursLe site aura été ouvert seulement un mois à l’heure où j’écris ce rapport.Et pourtant, il y a déjà eu 45 939 visiteurs. Dont 21 969 visiteurs <strong>du</strong>rant les4 jours <strong>du</strong> festival.Figure 23.1 – Statistiques <strong>du</strong> nombres de visites sur le mois <strong>du</strong> FimuRetrouvez l’analyse complète en annexe.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 61
23. Les statistiques de visites23.2 Analyse Détaillée23.2.1 Fidélité des visiteursLes visiteurs sont venus une fois sur le site pour 66 % d’entres eux et plusieurs foispour les 33 % restants.23.2.2 La place des téléphones portablesIl y a eu 1 300 visites depuis des téléphones portables.23.2.3 Les langues des visiteurs étaient principalementLangue PourcentageFrançais 90 %Anglais 4 %Allemand 2 %Espagnol 1,5 %Italien 1 %23.2.4 Les mots clefs1. fimu2. belfort3. programme4. festival62 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
23.2 Analyse Détaillée23.2.5 Les navigateursNavigateur Part de marchéInternet Explorer 43 %Mozilla Firefox 39 %Safari 8 %Chrome 8 %Opera 1 %Figure 23.2 – Part de marché des navigateurs23.2.6 Les systèmes d’exploitationOSPart de marchéMicrosoft Windows 87 %Mac OS X 8 %Linux 2 %iPhone 2 %Android 0,5 %23.2.7 Pages vuesAdresse PourcentageProgrammation 33 %Accueil 20 %Streaming 5 %Photos 4 %<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 63
23. Les statistiques de visitesFigure 23.3 – Part de marché des systèmes d’exploitation23.2.8 Téléchargement de la GazetteJour Nombre de téléchargementsSamedi 2 492Dimanche 2 481Lundi 2 037Total 7 010Dont 6715 téléchargements depuis Windows !Figure 23.4 – Plus de 40 000 visites depuis la France64 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
Quatrième partieBilans<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 65
Chapitre 24Bilans24.1 Bilan pédagogiqueNous avons pu concevoir et mettre en œuvre un site web opérationnel selon les besoinsdemandés, le client a été très satisfait de notre travail.Les statistiques <strong>du</strong> nombre des personnes qui ont visité notre site signifient que l’objectifété atteint.Il reste à noter que l’interface mobile n’a pu être développée faute de temps.La réalisation de ce site fut pour nous une expérience enrichissante à plusieurs niveauxpuisque nous avons <strong>du</strong> mener ce projet <strong>du</strong> début à la fin en travaillant au sein d’une équipemotivée et efficace.Ce qui a permis, malgré les contraintes <strong>du</strong> temps, d’atteindre une grande partie desobjectifs <strong>du</strong> cahier des charges.24.2 Bilan TechniquePour réaliser ce projet, nous avons utilisé plusieurs logiciel.24.2.1 Pour la gestion <strong>du</strong> projetMercurial hébergé pour le partage des sources sur Google Code.http://fimu<strong>2010</strong>.googlecode.com/Je vous invite à récupèrer le projet.24.2.2 Pour la rédaction <strong>du</strong> rapportL A TEX nous a permis de réaliser le rapport que vous avez sous les yeux ainsi que notresupport de présentation.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 67
24. Bilans24.2.3 Pour la réalisation <strong>du</strong> site <strong>internet</strong>Nous avons utilisé Django un framework de réalisation de site <strong>internet</strong> écrit en Python.Qui change la vie des programmeurs.24.2.4 Comment démarrer ?Récupèrer le projethg clone https://fimu<strong>2010</strong>.googlecode.com/hg/ fimu<strong>2010</strong>Installer les dépendancesPour une mise en place sans configuration, on peut utiliser sqlite3 :sudo aptitude install python-pysqlite2 sqlite3 python-imagingPour une mise en place plus stable, on peut utiliser MySQL, mais il faudra créer unutilisateur :sudo aptitude install python-mysqldb mysql-server mysql-client python-imagingInstaller Django 1.21. Télécharger la dernièrer version de Django-1.2 stable : http://www.djangoproject.com/download/2. Décompresser l’archive : tar zxf Django-1.2.1.tar.gz3. Installer le Django : sudo python setup.py installLancer le site <strong>internet</strong>1. Copier le fichier settings.py.exemple en settings.py et le modifier au besoinpour la connexion MySQL2. Générer la base de données initiales : python manage.py syncdb3. Accepter de créer un compte admin4. Lancer le serveur de développement : python manage.py runserver5. Se connecter sur : http://localhost:8000/ et http://localhost:8000/admin/C’est bon vous êtes prêts !Obtenir de l’aide1. Pour la documentation : http://docs.djangoproject.com/en/1.2/2. Pour la communauté francophone : http://www.django-fr.org/3. IRC : irc.freenode.net/#django et irc.freenode.net/#django-fr4. Mail : remy.hubscher@ionyse.com68 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
24.3 Bilan Humain24.3 Bilan HumainCe fût un projet motivant mettant en actions de nombreuses personnes sur le terrain.Lors de l’évènement, nous avons pris part à la gestion des équipes d’animation deGI02 suivant l’UV de RE41.Nous avons travaillé avec le service communication <strong>du</strong> festival, des personnes fortintéressantes et à l’écoute de nos questions.Chaque année, le <strong>FIMU</strong> est un moment fort pour nous et c’est aussi grâce à toutesles personnes de l’organisation, aux bénévoles et à la mairie. Merci de continuer à nousfaire vibrer au son de la musique.24.4 Les recettes de la réussiteConcernant les améliorations techniques, elles sont présenté pour chaque mo<strong>du</strong>le dansce rapport.Au niveau de l’organisation, nous avons fait des progrès par rapport à l’année précédente.Il faut absolument vérifier que Numéricable n’oublie pas l’an prochain de cabler lesbornes <strong>internet</strong> pour le streaming des scènes. (Donc prendre rendez-vous avec eux levendredi.)Il faut que les étudiants de cette TW52 présente ce qui doit être fait pendant le <strong>FIMU</strong>aux élèves de RE41 afin de les motiver à venir participer aux points d’informations.L’utilisation de Twitter comme moyen de communication direct au sein <strong>du</strong> <strong>FIMU</strong> estune réussite.Il faut prendre contact avec l’équipe de la Bohème qui rédige la Gazette <strong>du</strong> <strong>FIMU</strong>afin de mettre en ligne les PDF de leurs écrits sur le site <strong>internet</strong>.Et la clé de la réussite, c’est de rester en contact avec les administrateurs <strong>du</strong> site, ense rendant sur les lieux au moins une fois par semaine pour vérifier que tout ce passe bienet répondre aux questions techniques.<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 69
70 <strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet
ConclusionPour conclure, je dirais que ce <strong>FIMU</strong> <strong>2010</strong> a été une réussite sur le plan de la réalisation<strong>du</strong> site <strong>internet</strong>.Des améliorations pour l’année prochaine telle que la mise en place <strong>du</strong> site en plusieurslangues Français et Anglais au minimum ainsi que la mise en place d’une interfacespécifique pour téléphone portable.Au niveau technique, la rédaction d’un manuel utilisateur et d’une documentationtechnique afin de mettre en avant les réponses à votre questionnement pour les futurs.Prendre contact dès le début <strong>du</strong> projet concernant l’hébergement 1Au niveau humain, ne pas oublier de motiver les étudiants de RE41 et de répondre àleurs questions lors <strong>du</strong> <strong>FIMU</strong>.De même, il est important de garder le contact avec les administrateurs <strong>du</strong> site.Nous restons à votre disposition pour toute question par email.Merci de nous avoir lu jusqu’ici et bon courage !1. Avec M. Laurent Rupert voir 3 page 13<strong>FIMU</strong> <strong>2010</strong> - Rémy Hubscher & Anwar Rhemimet 71
Mots clésfimu – évènementiel – site <strong>internet</strong> – web – twitter – python – django – framework – javascriptgoogle maps api – google code – mercurialRémy HUBSCHER & Anwar RHEMIMETRapport de TW52 – Printemps <strong>2010</strong>RésuméAu cours de cette TW52, nous avons eu l'occasion de travailler à la réalisation d'un siteévènementiel très populaire à Belfort : Le site <strong>du</strong> <strong>FIMU</strong> <strong>2010</strong>.Plusieurs enjeux à ce projet comme notamment les délais très court, puisqu'entre la premièreréunion et le <strong>FIMU</strong>, ne se sont écoulé que deux mois (<strong>du</strong> 21 mars au 21 mai), ainsi qu'uneobligation de résultat.Des objectifs ambitieux, une réelle volonté d'apporter une solution <strong>du</strong>rable à un problèmerécurent depuis bientôt 25 ans.Ce rapport est le compte ren<strong>du</strong> <strong>du</strong> travail mené à son terme par deux étudiants passionnés :Rémy Hubscher et Anwar Rhemimet.Il a pour but de permettre la poursuite <strong>du</strong> travail engagé.Trop souvent les équipent successives <strong>du</strong> site <strong>du</strong> <strong>FIMU</strong>recommencent à zéro d'une année à l'autre.C'est pourquoi cette année, nous avons choisi de réaliser lesite <strong>internet</strong> en axant les développements sur la maintenance<strong>du</strong> code afin de permettre aux futurs développeurs decomprendre le code de pouvoir en corriger les bugs et d'yajouter de nouvelles fonctionnalités très simplement et ainsi den'avoir plus qu'à mettre en place les modifications <strong>du</strong> designsd'une année sur l'autre.Mairie de BelfortCellule des Festivals – Service CommunicationTour 41 – 90000 Belforthttp://www.fimu.com/