Réalisation du Site internet du FIMU 2010 Utilisation du Framework ...

Réalisation du Site internet du FIMU 2010Utilisation du Framework Python, DjangoTW52 : FIMU 2010Ré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 du site internet du FIMU 2010Rémy HUBSCHER & Anwar RHEMIMET4 juin 2010

2 FIMU 2010 - 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 FIMU 2010 - 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57FIMU 2010 - 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 FIMU 2010 - 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 durantle week-end du FIMU 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 du FIMU 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 du 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 du FIMU et à la mairie deBelfort qui s’occupe chaque année de rendre possible cet évènement unique.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 7

8 FIMU 2010 - Rémy Hubscher & Anwar Rhemimet

Première partieContexte du ProjetFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 9

Chapitre 1Le FIMUChaque année durant le week-end de la Pentecôte, la ville de Belfort et les étudiantsorganisent le Festival International de Musique Universitaire.Le FIMU concentre sur trois jours les aspirations de près de 2 700 musiciens et choristesamateurs à se produire 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 2010, le FIMU 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 du département,10. Scène du Lion,11. Centre chorégraphique,12. Centre de congrès Atria,13. Conservatoire,14. Le Théâtre Granit.Le FIMU, c’est aussi l’occasion de la rencontre entre les formations et le public toujoursplus nombreux.L’accès à l’ensemble des concerts du festival est totalement gratuit.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 11

12 FIMU 2010 - Rémy Hubscher & Anwar Rhemimet

Chapitre 2Les délaisAprès un premier rendez-vous avec la Mairie de Belfort le 19 mars 2010, nous avonspu définir les besoins et déterminer la charge de travail à réaliser ainsi que les priorités.L’équipe de communication du FIMU était impatiente de voir arriver le site internet.Il ne restait en effet que deux mois jour pour jour pour réaliser le projet.Pour respecter les délais du 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 duré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 du 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 2010.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 13

14 FIMU 2010 - Rémy Hubscher & Anwar Rhemimet

Chapitre 3L’hébergementLe sujet de notre TW indiquait l’utilisation de Python pour réaliser un site internet.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 du FIMU dans leurbase de données en échange de l’hébergement du site internet du FIMU.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/FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 15

16 FIMU 2010 - Rémy Hubscher & Anwar Rhemimet

Deuxième partieObjectifsFIMU 2010 - 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 besoinsdu cahier des charges et nous avons prévu une duré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 du cadre de développement ;3. Développement du module de page ;4. Mise en place de l’arborescence du site ;5. Mise en place du gestionnaire de fichiers ;6. Réalisation du 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 du module Météo ;13. Intégration des pages de streaming ;14. Intégration du module de galeries d’images ;15. Intégration de l’API Twitter ;16. Planning sur téléphone portable.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 19

4. Planning et répartition des tâches4.1 Tâches de AnwarFigure 4.1 – Diagramme de GANTT du 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 du cadre de développement2. Mise en place de l’arborescence du site3. Mise en place du gestionnaire de fichiers4. Réalisation du 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 du planning des concerts9. Réalisation des boutons d’accès rapide10. Mise en place du module Météo11. Intégration du module de galerie d’images12. Intégration de l’API Twitter20 FIMU 2010 - 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 du site internet du FIMU était l’occasion d’acquérir diverses compétencesen développement web.Le site du FIMU a été un challenge à tous les niveaux sur des points sensibles tels quela performance du serveur, lors de la montée en charge, la sécurité du site et l’ergonomie,gage du succès du projet.Partant de niveaux différents dans la réalisation de projets, nous nous sommes fixésdes objectifs de formation différents.FIMU 2010 - 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 du 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 internet.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 internet 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 internet dynamique.22 FIMU 2010 - 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 du semestrede printemps, début Mars alors que le site du FIMU 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 du site d’une année à l’autre.6.3 Le code du projetLe projet de site du FIMU est disponible ici http://fimu2010.googlecode.com/.Vous pouvez récupèrer le code avec Mercurial à l’aide de la commande suivante :hg clone http://fimu2010.googlecode.com/hg/ fimu2010N’hésitez pas à contacter Rémy Hubscher afin d’obtenirl’aide nécessaire à la prise en main du projet.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 23

6. Cadre de développement6.4 Cahier des charges de la maquette du siteChaque année, la charte graphique du FIMU est modifiée, nous avons négocié queles graphistes qui réalisent les affiches s’occupent dorénavent de fournir la maquette dudesign du 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 du FIMU ;3. Un menu sur deux niveaux imbriqués (Principal et secondaire) ;4. Une page d’accueil mettant en avant les différentes parties du site :– Les scènes en streaming ;– Le planning des concerts ;– La gazette du FIMU ;– 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 dudesign,3. Améliorer la documentation technique pour les étudiants suivants,4. Améliorer le manuel utilisateur pour les administratrices du site,5. Améliorer les modules existants et au besoin ajouter les nouveaux,6. Adapter la maquette pour une version pour téléphonie mobile du site.24 FIMU 2010 - Rémy Hubscher & Anwar Rhemimet

Troisième partieConceptionFIMU 2010 - 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 du FIMU 2010,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 du 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 du siteinternet.À titre indicatif, la réalisation d’un tel design coûte environ 800¿ HT.FIMU 2010 - 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 du designLe header sur la version du design 2010 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 FIMU 2010 - Rémy Hubscher & Anwar Rhemimet

Chapitre 8Arborescence des pages8.1 La problématiqueLe point central d’un site internet, 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-êtretraduisible 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 dusite.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 du site.En fonction du 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 du 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.FIMU 2010 - 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.siteduzero.com/tutoriel-3-38130-la-representation-intervallaire.html30 FIMU 2010 - Rémy Hubscher & Anwar Rhemimet

Chapitre 9Un site multilingue9.1 La problématiqueLe FIMU 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 FIMU. Nousavons donc désactiver cette fonctionnalité pendant le FIMU.Cependant, après le FIMU, 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-tagsFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 31

9. Un site multilingueFigure 9.1 – On remarque les onglets de langues en haut32 FIMU 2010 - Rémy Hubscher & Anwar Rhemimet

Chapitre 10La gestion des fichiers10.1 La problématiqueLe site du 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.FIMU 2010 - 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 FIMU 2010 - 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 du 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 du clic sur le marqueur de la scène sur la carte Google Maps.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 35

11. Les scènesFigure 11.1 – Affichage des scènes sur la carte Google Maps36 FIMU 2010 - Rémy Hubscher & Anwar Rhemimet

Chapitre 12Les groupes12.1 La problématiqueIl y a eu 141 groupes au FIMU 2010, 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 internet afin d’y écouter quelques extraits.12.3 Améliorations12.3.1 La ville de provenance du groupeIl faudrait aussi pouvoir renseigner la ou les villes des quelles viennent les membresdu 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.FIMU 2010 - 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 du groupe.Figure 12.1 – Affichage de la liste des groupes1. http://docs.djangoproject.com/en/dev/ref/generic-views/38 FIMU 2010 - 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 du 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.FIMU 2010 - 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 du 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 du 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 dur dans le code et il faudrait mettre en place un systèmepermettant de les calculer automatiquement.13.3.5 Les dates du FIMULe FIMU s’est déroulé du 21 au 24 mai 2010 mais les dates seront différentes en 2011.Les dates s’affichaient en dur 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 du footer depuis la base de données.13.3.6 La version mobileIl faut faire une vue d’affichage du 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 du 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 FIMU 2010 - Rémy Hubscher & Anwar Rhemimet

13.3 AméliorationsFigure 13.1 – Planning des concertsFIMU 2010 - 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 FIMU 2010 - 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 du FIMU.14.2 Notre solutionNous avons mis en place un module streaming permettant de générer automatiquementles pages de streaming en saisissant uniquement l’id ustream du 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 du flux (Diffusion Live !, Off)Pour le FIMU 2010, nous avons utilisé une page de texte standard en créant nousmême les liens vers les différentes pages streaming du 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.FIMU 2010 - 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 FIMU 2010 - 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.FIMU 2010 - 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 du 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éfixedu 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 du Lundi46 FIMU 2010 - 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 internet.16.2 Notre solutionOn sélectionne le logo du partenaire, son nom et son site internet 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 du redimensionnement automatique.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 47

16. Les partenairesFigure 16.1 – Page des partenaires du FIMU48 FIMU 2010 - 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 du ConservatoireFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 49

17. Le formulaire de contactFigure 17.2 – Papa Chango sur la scène de l’Arsenal50 FIMU 2010 - 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 FIMU 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 du 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.FIMU 2010 - 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 du 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 du compte @fimu2010.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 du FIMU.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 FIMU 2010 - Rémy Hubscher & Anwar Rhemimet

Chapitre 19Bandeau d’images19.1 La problématiqueLe FIMU c’est un mouvement inlassable de personnes, pendant la préparation etdurant 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 fonduenchaî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 du site FIMU.Vérifier que toutes les images de la galerie ont une taille strictement identique.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 53

19. Bandeau d’imagesFigure 19.1 – Le groupe Austin sur la scène de la République54 FIMU 2010 - 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 FIMU ?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 du FIMU.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 du site.Figure 20.1 – Affichage de la météoFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 55

20. Affichage de la météoFigure 20.2 – Tous types de groupes au FIMU56 FIMU 2010 - 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.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 57

21. Les boutons d’accès rapidesFigure 21.1 – Le FIMU c’est aussi 141 groupes et plus de 2300 musiciens58 FIMU 2010 - 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 internet 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 internet 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 du jeu : Le téléphone Arabe.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 59

22. L’interface d’administrationFigure 22.1 – Une partie administration permettant la modification de tous le contenudu site60 FIMU 2010 - 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 durant les4 jours du festival.Figure 23.1 – Statistiques du nombres de visites sur le mois du FimuRetrouvez l’analyse complète en annexe.FIMU 2010 - 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 FIMU 2010 - 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 %FIMU 2010 - 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 FIMU 2010 - Rémy Hubscher & Anwar Rhemimet

Quatrième partieBilansFIMU 2010 - 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 du 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 du mener ce projet du début à la fin en travaillant au sein d’une équipemotivée et efficace.Ce qui a permis, malgré les contraintes du temps, d’atteindre une grande partie desobjectifs du cahier des charges.24.2 Bilan TechniquePour réaliser ce projet, nous avons utilisé plusieurs logiciel.24.2.1 Pour la gestion du projetMercurial hébergé pour le partage des sources sur Google Code.http://fimu2010.googlecode.com/Je vous invite à récupèrer le projet.24.2.2 Pour la rédaction du rapportL A TEX nous a permis de réaliser le rapport que vous avez sous les yeux ainsi que notresupport de présentation.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 67

24. Bilans24.2.3 Pour la réalisation du site internetNous avons utilisé Django un framework de réalisation de site internet écrit en Python.Qui change la vie des programmeurs.24.2.4 Comment démarrer ?Récupèrer le projethg clone https://fimu2010.googlecode.com/hg/ fimu2010Installer 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 internet1. 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 FIMU 2010 - 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 du festival, des personnes fortintéressantes et à l’écoute de nos questions.Chaque année, le FIMU 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 module 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 internet 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 FIMUaux é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 du FIMU estune réussite.Il faut prendre contact avec l’équipe de la Bohème qui rédige la Gazette du FIMUafin de mettre en ligne les PDF de leurs écrits sur le site internet.Et la clé de la réussite, c’est de rester en contact avec les administrateurs du 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.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 69

70 FIMU 2010 - Rémy Hubscher & Anwar Rhemimet

ConclusionPour conclure, je dirais que ce FIMU 2010 a été une réussite sur le plan de la réalisationdu site internet.Des améliorations pour l’année prochaine telle que la mise en place du 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 du projet concernant l’hébergement 1Au niveau humain, ne pas oublier de motiver les étudiants de RE41 et de répondre àleurs questions lors du FIMU.De même, il est important de garder le contact avec les administrateurs du 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 13FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 71

Mots clésfimu – évènementiel – site internet – web – twitter – python – django – framework – javascriptgoogle maps api – google code – mercurialRémy HUBSCHER & Anwar RHEMIMETRapport de TW52 – Printemps 2010Ré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 du FIMU 2010.Plusieurs enjeux à ce projet comme notamment les délais très court, puisqu'entre la premièreréunion et le FIMU, ne se sont écoulé que deux mois (du 21 mars au 21 mai), ainsi qu'uneobligation de résultat.Des objectifs ambitieux, une réelle volonté d'apporter une solution durable à un problèmerécurent depuis bientôt 25 ans.Ce rapport est le compte rendu du travail mené à son terme par deux étudiants passionnés :Rémy Hubscher et Anwar Rhemimet.Il a pour but de permettre la poursuite du travail engagé.Trop souvent les équipent successives du site du FIMUrecommencent à zéro d'une année à l'autre.C'est pourquoi cette année, nous avons choisi de réaliser lesite internet en axant les développements sur la maintenancedu 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 du designsd'une année sur l'autre.Mairie de BelfortCellule des Festivals – Service CommunicationTour 41 – 90000 Belforthttp://www.fimu.com/