Retourner à l accueil
Icon Grip
Ouvrir le menu
Icon Grip
Ouvrir le menu
Iceberg stylisé bleu et gris
 

Parlement Européen

 

Webdesign & Infographies interactives

J'ai eu l'occasion de collaborer sur la refonte, entre 2011 et 2013, du siteweb du Parlement Européen. Et l'une des idées majeures dans ce type d'organisme, était de développer toutes les pages et les modules de manière authentique. C'est-à-dire qu'aucun addon, aucune solution pré-développée ou solution "toute-faite" ne pouvait être intégré au site web. Du code purement écrit pour le Parlement européen.

Galerie Art Collection

La première mission de conception était celle de la présentation des œuvres d'art appartenant au Parlement européen.

En collaboration avec mon collègue - surtout pour la partie JavaScript puisqu'à cette époque j'étais encore novice - nous avons développé une page de galerie interactive qui a pour but de présenter les œuvres répertoriées dans un fichier XML.

La page en question propose un diaporama numéroté avec un tri soit par artiste, soit par pays, et affiche le titre, le nom de l'artiste, son pays d'origine, et divers détails tels que l'outil employé ou ses dimensions.

Grâce à un habile développement en XML/XSLT, la galerie était également fonctionnelle sans le JavaScript. L'utilisation d'un fichier XML était la seule solution de stockage/transport de données puisqu'aucune DataBase ne pouvait faire l'objet de requêtes SQL - question de sécurité.

Elle répond également aux normes très strictes d'accessibilité pour les personnes ayant besoin d'une assitance matérielle - lecteur audio, keyboard - pour naviguer sur un siteweb. L'Europe représente tout de même plus de 550 milions de citoyens...

Cette galerie - tout comme la totalité du siteweb - était déclinée dans toutes les langues européennes officiellement reconues. A l'époque, il s'agissait de 22 langues différentes, dont certaines disposaient d'un alphabet bien différent du Latin que nous connaissont bien, tel que le cyrillique, ou le grec. Ce qui peut représenter un certain case-tête en matière d'ergonomie et de mise en page.

J'ai choisi d'exposer cette galerie dans l'état de sa création initiale dans la rubrique Archives de ce site, on peut donc la consulter à l'adresse art-collection/html/welcome.htm

Art Collection
Aperçu de la galerie Art Collection - Diaporama interactif
FAQ
Aperçu de la FAQ Art Collection - Boites interactives

La FAQ de la Art Collection

Adjointe à cette galerie, un traditionnelle FAQ a été mise en place afin de répondre à certaines questions que se poserait un internaute quant à la collection d'Art. Par exemple : qui sélectionne les œuvres de la collection ? quel est le budget annuel ou quel est son objectif ?

Tout comme la galerie, cette page est accessible depuis mes Archives à l'adresse art-collection/html/faq.htm

Le site web du Parlement européen est dénommé Europarl Galaxy et cette galerie fait l'objet d'une planète externe. Les autres sections tels que Les Députés, ou À propos du Parlement consituent quant à elles, les planètes internes. Elles sont directement liées à l'activité première du Parlement européen.

Ce que l'on peut constater sur ces pages, ce sont les exigences ergonomiques au niveau des Headers et Footers qui doivent comporter le même format, la même structure et un contenu relatif à leurs positions dans le site. On remarque aussi qu'à cette époque c'était encore l'ancien logo... et qu'il n'y avait pas la version linguistique Catalane :)


Citizens initiative
Aperçu de la page European Citizens' Initiative - Infographie interactive

European Citizens' Initiative

L'idée d'intégrer les cityoens de manière plus active dans les décisions du Parlement européen est arrivée en 2012, avec le projet European Citizens' Initiative.

Module CI
Aperçu du module European Citizens' Initiative - Infographie interactive

Cette infographie interactive est également accessible via mes Archives à l'adresse Citizen-initiative/home.htm. Notez bien qu'il vous faudra un navigateur qui comprend l'Action Script 3, et surtout le format SWF de Flash Player.

Développement dans Flash en Action Script 3

Une infographie interactive, développée dans Flash, regroupe les conditions, la procédure à suivre, les liens utiles, etc. pour mettre en place un projet d'initiative citoyenne. Le tout détaillé par un dessin animé convivial découpé en 8 chapitres.

Interactivité très accessible

Les différents panneaux sont cliquables sur la totalité de leur surface, et permettent donc de faciliter leurs transitions : un clic entraine simultanément l'ouverture du panneaux sélectionné et la fermeture / rétractation des autres panneaux.

Module 2
Aperçu du module European Citizens' Initiative - Infographie interactive
Chapitre 1
Aperçu du module European Citizens' Initiative - Infographie interactive

Tableau
Aperçu de la page Election observation - Tableau non-interactif

Election observation

Cette mission est de loin la plus complexe que j'ai mené au sein du Parlement européen. Un tableau listant pour chaque mission parlementaire, la nature des élections, le pays, les rapports dressés et la langue concernée... transformé en une infographie interactive sous forme de carte du monde.

Entièrement développée en JavaScript, cette infographie est classée par mission et par pays. Les sélections se font de quelque manière que ce soit : en cliquant sur le pays dans la carte ou en le sélectionnant dans la liste déroulante.

Le SVG et les HTML 5 n'étant pas encore suffisemment compatble pour le plus grand nombre, il a fallut "ruser" avec le principe des balises "map" et "area", ainsi que des images backgrounds pour les différentes périodes d'élection. Un sélecteur "d'id", paramètré en CSS, s'occupait de répartir les balises en positions absolues sur la carte et de gérer l'état "hover" dans le graphique.

Infographie
Aperçu de l'infographie Election observation - Résultat interactif

Après sélection de la mission et du pays, un panneau muni d'un petit scroll esthétique liste les différentes informations relatives à l'élection et présente - le cas échéant - un rapport dans la langue prédéfinie.

Cette infographie interactive, bien qu'ayant une allure simplifiée, a nécéssité près de 2 mois de développement. Je n'ai malheureusement pas encore posté cette infographie dans mes archives néanmoins, on y retrouve encore d'autres projets réalisés au sein du Parlement européen.

 

Partager :

Retourner à l accueil
Icon Grip
Ouvrir le menu
Icon Grip
Ouvrir le menu