King76 au Québec Des confidences, du Web, des logiciels libres et plus encore !

Site Web de la radio CKIAFM

En décembre dernier à l'occasion de l'assemblée générale de la radio CKIAFM j'ai signé pour deux ans au poste de responsable WEB au sein du conseil d'administration. Ça n'était vraiment pas prévu, un pur hasard va t'on dire, mais voilà maintenant 8 mois que je suis plutôt fier d'occuper ce poste car rien de plus plaisant que d'avoir le plein contrôle sur un projet (WEB) communautaire et utile aux citoyens.

Objectifs

Je me suis fixé rapidement plusieurs objectifs. Ainsi avant de me lancer dans la refonte du site Web, je voulais rapatrier le site Web actuel sur mon serveur et obtenir l'accès à la gestion des courriels (Google Apps). Cela à pris plus de 3 mois et quand j'ai enfin obtenu les accès j'ai mis en place une liste de discussion pour le Conseil d'administration ce qui permet aujourd'hui des échanges plus facilement ainsi que d'accéder aux archives si besoin. J'avais plusieurs autres projets comme la mise en place d'un espace Google Docs via une solution opensource, mais faute de temps je ne l'ai jamais fait, bref.

Au sein de la radio CKIAFM il faut dire que ca n'est pas la bonne période, plusieurs problèmes financiers mobilisent le petit conseil d'administration que nous sommes, notamment trouver du financement ou un local pour la rentrée 2011. Donc je dois l'avouer, je dois me débrouiller un peu tout seul pour tout ce qui est WEB et les tâches sont énormes. Avant de vous parler du site Web, il y a plusieurs autres dossiers auquels j'avais pensé : la mise en place d'une infrastructure libre, tel que les postes de travail sous Linux (en fait c'est plutôt l'idée de François Bedard que je soutenais avec sa COOP) ou bien encore remplacer la solution de diffusion "live" qui pourrait permettre la création et stockage des podcasts.. D'ailleurs je sais maintenant qu'il existe de très bonnes solutions libre, j'ai vu le tout fonctionner aux RMLL avec l'équipe de Radio RMLL et Alban Peignier (Tryphon) notamment.

La communauté

Juste avant de vous parler du site Web, il faut que je vous parle du site communautaire que j'ai mis en place en début d'année, il est accessible via l'adresse : http://communaute.ckiafm.org/ mais connu de personne car pas lancé officiellement. C'est un site Web propulsé grâce à WordPress et Buddypress. Site qui m'a d'ailleurs permis de lancer la communauté en accessibilité Web http://www.zerozerohuit.com à partir de la coquille de CKIA mais ceci est une autre histoire. Il y a donc ce site qui a pour but d'offrir aux producteurs des émissions de CKIA une plateforme d'échanges avec leurs auditeurs et qu'il faudrait publiciser un peu avant tout aux producteurs et ensuite aux auditeurs, un autre dossier que je dois m'occuper avant de lancer le site Web.

Le site Web

Revenons au site Web de CKIAFM. C'est un vieux site qui est très difficile à maintenir à jour, je l'ai vécu en voulant faire quelques ajustements (ajouter de la publicité Google ainsi qu'un bloc Like Box), il faut modifier plusieurs fichiers HTML à la main (la bonne époque de Dreamweaver). En pensant à la refonte du site Web, je me suis demandé quel CMS utilisé. J'avais le choix entre TYPO3 et TYPO3 le seul CMS que je maitrise vraiment (oublions Xoops pour ce genre de projet). Mais comme je voulais me faire aider par d'autres personnes, je me suis retourné vers une communauté plus active (il n'y a plus de regroupement du groupe TYPO3 depuis longtemps malheureusement). C'est ainsi que j'ai pris contact avec la communauté de Drupal lors des Drupal Meetup en début d'année et plus précisement avec Nicolas Fruit avec qui j'ai pu présenter une première carte heuristique des fonctionnalités que je souhaitais retrouver sur le site Web.

Carte heuristique du futur site Web de CKIA

Finalement lors de la rencontre mensuelle du 14 juin j'ai pu présenter au groupe un organigramme mieux structuré que vous pouvez consulter à l'adresse http://www.gliffy.com/publish/2623032/. On y retrouve plusieurs sections du site actuel mais plusieurs nouvelles sections en m'inspirant des autres sites de radio communautaire ou commercial. J'ai omis volontaire une section podcast avancée, car la structure en place actuellement à la radio ne permet pas d'enregistrer et de transformer facilement toutes les émissions dans des fichiers diffusables du style MP3 (ou OGG).

Après cet organigramme, j'avais prévu de commencer le site Web cet été, mais faute de temps (j'ai commencé une cure de désintoxication de l'ordinateur héhé) je n'ai fais qu'installer Drupal (version 6 et 7) sur mon ordinateur et commencer à sélectionner quelques modules. Puis voulant bien faire les choses comme je le ferais dans le cadre de mon travail, je me suis attaqué finalement à la création des Wireframes (maquettes) de plusieurs pages du futur site. Ayant déjà eu l'expérience avec le logiciel Balsamiq Mockups j'ai gardé ce dernier qui permet de réaliser des maquettes rapidement sans faire quelque chose de trop pointu avec Axure par exemple (noter que ces deux logiciels ne sont pas libre, il en existe (Pencil) mais je n'ai jamais approfondi d'avantage).

Voici donc les maquettes en "fil de fer" que j'ai terminé il y a quelques jours :

Page d'accueil

Page d'accueil

Pour réaliser cette page d'accueil je me suis inspiré principalement de la page d'accueil du site de www.telequebec.tv. J'aime l'affichage des prochaines émissions à venir sur la grille horaire ainsi que mettre en avant via une image des émissions prévues dans les jours à venir. J'espère que cela donnera envie aux internautes de découvrir ces émissions. On y trouve les dernières actualités, un sondage et quelques blocs "à méditer" comme la météo ou les concours du moment. J'ai également mis les derniers billets du blogue du site communautaire parce qu'il est fort probable que ce soit via ce site que les nouvelles des émissions circulent ou pour ceux n'ayant pas de blogue indépendant pour leur émission.

Enfin un pied de page, comme on peut le voir sur le site de Radio Canada se trouvera en bas de toutes les pages pour contacter la radio et retrouver les pages principales du site. Je laisserais la place pour une publicité de Google et la zone pour faire un don (un peu bas m'a t'on dit).

Ah oui ! Pour le haut de la page, un menu classique mais une zone pour pouvoir écouter la radio en direct, un bouton permettra d'ouvrir une nouvelle fenêtre (pop-up) pour pouvoir écouter tout en continuant de naviguer sur le site.

Page des actualités

Page des actualités

Cette page reprend les actualités de la page d'accueil mais en pleine page, on peut naviguer ainsi dans les archives mais surtout effectuer un filtre par émission via un menu déroulant disponible en haut de la page. Les actualités devraient en effet pouvoir être catégorisé pour chaque émission (tout en gardant une catégorie générale pour tout ce qui se passe à la radio), cela permettra également d'afficher les nouvelles sur chaque fiche d'émission.

À droite, on retrouve un nuage de mot si on veut ajouter un second niveau de classement pour les nouvelles cela pourrait s'avérer très pratique.

Page des contenus

Page des contenus

La page de contenu est plutôt classique, le titre en évidence et le contenu au centre. N'ayant pas d'idée sur quoi mettre au niveau du titre, j'ai laissé le lien vers la grille de programmation. Dans la colonne de droite je dois encore définir le contenu que l'on retrouvera de manière générique sur plusieurs des pages du site, à savoir l'émission qui joue actuellement ou les deux, trois émissions à venir et à ne pas rater. Il est essentiel de garder de la place pour les partenaires de la radio donc de la publicité ciblée dans cette colonne. Est-ce nécessaire de garder le LIKE BOX de Facebook ?

La grille de programmation

La grille de programmation

Voici sans doute la section la plus importante du site puisqu'on est censé y trouver l'ensemble des émissions via une grille horaire. Je me suis inspiré du site de Radio-Canada même si faut l'avouer leur grille est pas super belle. On peut y naviguer par jour de la semaine et je souhaite mettre en évidence via une légende les émissions en rediffusion ainsi que l'émission qui joue actuellement. Ce calendrier dans l'idéal devrait pouvoir changer d'une semaine à l'autre notamment s'il y a des émissions spéciales ou lors de la programmation d'été ou hiver qui est changée. Je ne l'ai pas indiqué tout dépendant de comment la programmation se fera, mais la semaine en cours est affichée en haut, il suffirait d'ajouter les flèches de navigation pour passer d'une semaine à l'autre.

A droite on peut télécharger la grille complète au format PDF et on retrouve l'émission actuellement en cours.

La description de chaque émission est succinte : le titre, un cours résumé et la liste des animateurs.

J'ai cherché à mettre en avant quelque part sur cette page si c'était la programmation d'été ou d'hiver, on retrouve donc cette information en bas de page.

Détail d'une émission

Détail d'une émission

En cliquant sur une émission de la grille de programmation on affiche le détail d'une émission, c'est ce que l'on retrouve sur cette maquette. Dans la partie du haut on retrouve le titre de l'émission (attention pour les longs titres !) et un bouton de retour, tout dépendant d'ou l'on vient, de la grille de programmation ou la liste des émissions.

Vient ensuite la description complète et exhaustive de l'émission et l'image que l'on retrouve sur la page d'accueil qui défilerait. Ici elle serait fixe bien sûr. Au dessus de la description, des raccourcis permettent d'accéder plus précisement à du contenu qui peut se trouver en bas de page, mais ceci reste du contenu optionnel.

Vient ensuite des informations pertinentes sur l'émissions : diffusion et rediffusion, l'équipe d'animation au complet avec leur poste entre parenthèse (ici l'exemple d'un collectif), plus tout un tas d'informations qui peuvent être cliquables et renverrait vers une page filtrant les émissions par mots clés ou par type musical.

Les deux blocs du bas sont optionnels et s'afficheraient si l'information existe : Soit les nouvelles disponibles sur le site pour l'émission (filtre) ou un feed RSS d'un blogue ou site externe, cela reste à déterminer. En dessous les podcasts que l'on peut créer à partir d'un feed RSS ou mieux encore quand la radio pourra fournir les propres podcasts.

Pour réaliser cette page je me suis inspiré du site de CKRL ainsi que celui de Radio Canada.

Liste des émissions

Liste des émissions

Un autre moyen de parcourir le site autre que par la grille de programmation ce ferait par la liste des émissions. Un filtre en haut de la page permettra de faire apparaitre la liste de toutes les émissions (une cinquantaine je dirais) ou de filtrer pour une lettre en particulière : A, B, C, etc...

Un menu permettait également de filtrer les émissions par thématique (musicale, politique, théatre, etc..). Si les catégories imposées ne suffisent pas, un nuage de mot appara avec les mots rattachés aux émissions. Je me rend compte que je n'ai pas prévu de filtre par style musical, mais l'option reste quand même disponible dans la fiche détaillée d'une émission, il ne faut pas trop surcharger l'interface non plus

J'ai rajouté une légende pour indiquer les émissions qui sont également disponibles en rediffusion, je ne sais pas si cela serait indiqué via un icône ou un code couleur, cela reste à voir. Un autre signe distinctif permettrait d'indiquer les émissions qui ne sont plus en ondes pour la saison en cours, car j'aimerais garder en archive toutes les émissions, ne serait ce que pour pouvoir accéder encore aux nouvelles ou bien au podcast le cas échéant.

Liste des émissions (filtrées)

Liste des émissions (filtrées)

J'ai représent enfin une dernière maquette qui permet de voir le résultat d'une liste d'émission filtrée en fonction de la catégorie. Rien de particulier la dedans et l'on pourrait également imaginer la même chose lors d'un filtre par mot clé.

Liste des événements

Événements à venir + détail

(mise à jour du 25 août) Je viens d'ajouter deux nouvelles maquettes de la section des événements très inspirés de ce que l'on retrouve actuellement sur le site Web de la radio www.ckiafm.org. La liste des prochains événements est mise en avant avec des images très large, je trouve ca très attrayant d'avoir une beau photo montage de l'événement et un petit résumé. Un lien permet d'aller à la page de détail ou l'on pourra trouver de plus amples informations et des photos. Ces photos devraient à mon sens se trouver sur un compte Flick pour la radio, cela permettrait une gestion des commentaires et une porte d'entrée pour découvrir les événements de la radio.

Dans la colonne de droite j'hésite entre mettre en avant l'émission actuellement en onde ou bien l'événement du moment à ne pas rater !

Détail d'un événement

Prochaines étapes

Voici donc la présentation de mes derniers travaux que j'ai réalisé ces dernières semaines. Finalement après un appel à tous lancé sur mon compte Twitter et Google+ pour chercher un/e graphiste pour m'aider à mettre tout ceci en couleur et  j'ai obtenu une réponse positive de Louise Bluteau-Marceau qui s'est proposé de m'aider bénévolement. Louise sort tout juste d'une maitrise en design d'interfaces et en attendant de se trouver un travail va m'aider à réviser les maquettes et proposer un visuel.

J'ai vraiment de la chance d'être tombé sur cette fille comme ça parce que d'habitude c'est moi qui me débrouille comme je peux en partant souvent d'un thème existant et en changeant quelques couleurs (voir le résultat avec le site de La voix du libre).

Je pourrais faire une mise à jour de mon billet lorsque nous nous seront rencontré dans les prochains jours.

Et enfin, lorsque les maquettes seront prêtes il faudra passer à la programmation, comme je l'ai dit un peu plus haut j'ai commencé à regarder certains modules pour Drupal, comme par exemple un module pour faire défiler les photos sur la page d'accueil. Mais le plus compliqué ca va être de monter la grille de programmation et la liste des émissions, le tout rattaché aux nouvelles, etc...

Sauf qu'il est fort probable que tout ces travaux soient fait par quelqu'un d'autre. Car hier j'ai appris que des étudiants du Cegep St-Foy se cherchaient des projets d'études, il ne me reste plus qu'a les convaincre et peut être une piste pour développer plus qu'un site Web ? Par exemple un outil capable d'enregistrer chacune des émissions, les encoder, les stocker et les diffuser sur le site Web ?

Mise à jour du 25 août 2011 : La réponse a été négative, il me reste plus qu'a m'y mettre

Affaire à suivre..