RÃ©my HUBSCHER Anwar RHEMIMET - fimu2010

TW : Réalisation du site internet du FIMU 2010Rémy HUBSCHER & Anwar REHMIMET2 juin 2010

2 FIMU 2010 - Rémy Hubscher & Anwar Rhemimet

Table des matièresI Contexte du Projet 91 Le Fimu 112 Les délais 133 L’hébergement 15II Objectifs 174 Planning et répartition des tâches 195 Objectifs de formation 216 Cadre de développement 236.1 Problèmatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236.2 Objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236.3 Le code du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236.4 Cahier des charges de la maquette du site . . . . . . . . . . . . . . . . . 246.5 Opération à réaliser chaque année dans le cadre de cette TW . . . . . . . 24III Conception 257 Design 277.1 La problèmatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277.3 Les améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Arborescence des pages 29FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 3

TABLE DES MATIÈRES8.1 La problèmatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298.3 Les améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 Un site multilingue 319.1 La problèmatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319.3 Améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3110 La gestion des fichiers 3310.1 La problèmatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3310.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3310.3 À noter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3311 Les scènes 3511.1 La problèmatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3511.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3511.3 Amélioration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3512 Les groupes 3712.1 La problèmatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3712.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3712.3 Améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3713 Planning des concerts 3913.1 La problèmatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3913.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3913.3 Amélioration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3914 Le streaming 4114.1 La problèmatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4114.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4114.3 Améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4115 Les galeries d’images 4315.1 La problèmatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4315.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434 FIMU 2010 - Rémy Hubscher & Anwar Rhemimet

TABLE DES MATIÈRES15.3 Améliorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4416 Les partenaires 4516.1 La problèmatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4516.2 Notre solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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élioration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5723 Les statistiques de visites 5923.1 À quoi a servi notre travail ? . . . . . . . . . . . . . . . . . . . . . . . . . 59FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 5

RemerciementsNous souhaitons remercier toutes les personnes ayant participé à la réussite de notreTW.– 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é pour la mise en place despoints de streaming et du web café. Merci d’avoir été présent dans la bonne humeuret 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 cette évènement unique.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 7


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

Chapitre 1Le FimuFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 11


Chapitre 2Les délaisFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 13


Chapitre 3L’hébergementFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 15


Deuxième partieObjectifsFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 17

Chapitre 4Planning et répartition des tâchesFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 19


Chapitre 5Objectifs de formationFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 21


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.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.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é, 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 Twitter2. Un emplacement pour un bandeau d’images du FIMU3. 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 photos5. 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’acceptable.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 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 de la 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 on leferait dans OpenOffice.org WriterFIMU 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 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.2. 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.FIMU 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 photo auseins 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 avec TinyMCE afin de pouvoir faire un lien sur unfichier 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érite deces droits.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 33


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.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éliorationCe 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


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 desquelles viennent les membres dugroupes 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.1. 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 avions aucun concerts 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 demie-heure affichant45 minutes comme une heure pleine.Nous avons présenter les concerts dans un tableau à double entrée 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 ou avec plusieurs groupes.Il a fallu gérer les concerts conférences.13.3 Amélioration13.3.1 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 deproblème.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 39

13. Planning des concerts13.3.2 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 faudra mettre en place un systèmepermettant de les calculer automatiquement.13.3.3 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 telles que les boutons d’accès rapide, les textes du footer depuis la base de données.13.3.4 La version mobileIl faut faire une views 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

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 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 entre 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 utiliser une page de texte standard en créant nousmême les liens vers les pages streaming du site.14.3.2 Afficher une scène en streamingIl faudrait pouvoir lier un scène à un flux pour ainsi afficher un lien Regarder dansla liste des scènes.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 41


Chapitre 15Les galeries d’images15.1 La problèmatiqueAfficher une galerie d’image 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 pouvant spécifier àchaque fois un commentaire, mais ça obligé à 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 opter pour l’utilisation de django-filebrowser pour l’upload massifd’image, puis le redimenssionnement automatique de celle-ci en miniature et taille webpour le diaporama.Nous avons aussi développer un petit script multiplateforme Python avec une interfacePyQt permettant le redimenssionnement massif de toutes les images d’un dossier sur touteplateforme 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 sur le serveur.Ensuite la galerie est liées à un répertoire d’images.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 43

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 non donc aucun critères de tri. Il estpossible de les trier par nom par exemple.Il faudra donc faire un système permettant de renommer les images avec pour noml’ordre qu’on souhaite leur donner dans la galerie afin de pouvoir modifier l’ordre d’affichage.44 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.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 45


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.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 47


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 concert, ...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.Si 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 desFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 49

18. Flux d’actualités Twitterinformations 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 sur le 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 le cas.50 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 demander de mettre un bandeau d’image 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.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 51


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.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 53


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’acceder 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 55


Chapitre 22L’interface d’administration22.1 La problèmatiquePlus une personne demande à une autre de faire quelques choses, plus on perd detemps.Il est donc primordial dans un site internet que la personne qui a l’information puissela mettre à jour.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éliorationL’affichage des informations est toujours améliorable, il ne faut pas hésiter à l’utiliserafin de voir ce qui peut l’être.FIMU 2010 - Rémy Hubscher & Anwar Rhemimet 57


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 notre 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 706 visiteurs. Dont 21 969 visiteurs durant les4 jours du festival.Retrouvez l’analyse complète en annexeFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 59


Quatrième partieBilansFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 61

Chapitre 24Bilan pédagogiqueFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 63


Chapitre 25Bilan TechniqueFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 65


Chapitre 26Améliorations à développerFIMU 2010 - Rémy Hubscher & Anwar Rhemimet 67

Mots clésfimu – évènementiel – site internet – web – twitter – python – django – framework – javascriptRémy HUBSCHER & Anwar RHEMIMETRapport de TW – Printemps 2010RésuméAu cours de cette TW, 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èreet le FIMU, ne se sont écoulé que un mois (du 21 mars au 21 mai) ainsi qu'une obligation deré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ées sur l'autre.Mairie de BelfortCellule des Festivals – Service CommunicationTour 41 – 90000 Belforthttp://www.fimu.com/

RÃ©my HUBSCHER Anwar RHEMIMET - fimu2010

Create successful ePaper yourself

Delete template?

Save as template?