Un Jour en France / Allemagne

Un Jour en France / Allemagne

Organisation: Arte (France)

Publication Date: 01/15/2016

Description

France and Germany, the two biggest countries in western Europe, also are the historical basis for the European Union. They share a common border, and a common history. But today, how do they compare to each other? What are their similarities? What are their respective singularities? Do they tend to grow more and more similar to each other, or are they going separate ways? To answer this question, Point du Jour decided to watch France and Germany from above. The audiovisual shot a series of 12 documentary films in which it used lots of planes and drones video shots done above the two countries. This led to an original way to paint a contemporary portrait of the giant neighbors. And in order to accompany the documentaries' broadcast, Arte and Point du Jour commissioned The Pixel Hunt for a web project. Together with WeDoData, TPH imagined a website that follows the doc's structure, both thematically and as it is organized over the course of one day. But instead of adopting a bird's-eye view on France and Germany, the web project tries to gather as much data on them as possible, and to present them in the clearest, most meaningful way possible. This is our way to take a step back - or rather a step up - and draw attention on the most specific similarities and variances we discovered when we dug into all the numbers we could find. The site is split in three parts. The main part, the "dashboard", is composed of a series of tiles, presenting data in the form of various dataviz. There are 5 different tiles types, and the 90 dataset are distributed in 7 categories. The site's second part is a second screen experiment, that is designed to accompany the airing of the 2 main documentaries on Arte. And the last part is an interactive replay section, which allows the user to watch the 12 documentaries up to 60 days after their airing date, and enhanced with second-screen type quizzes. The main aimed audience for this project is Arte's, and the website's 100% available in both French and German. But of course, everyone who wants to learn about the two country's main metrics may check it. Depending of the time of the connexion, a different section of the site is put on top, and each of them is composed in a mix of infographics and "poscard" pictures - in fact screenshots from the documentaries. We selected the data in order to both appeal to a public of curious citizens and people who are very interested in France-Germany relationships.

What makes this project innovative? What was its impact?

There are several specific points that make our project innovative : - geolocalisation. As the user starts browsing the site, she is requested to give her location. If she does so, a part of the dashboard's data tiles adapt to this information. She'll be able to know whether she lives close to a nuclear plant or a UNESCO cultural site, she'll see how her region compares to others in terms of agricultural surface area, time spent in traffic jam, and what not. - Second screen. Geolocalisation also is supported during the second screen experiment. Thus, a "good" answer to a question may vary depending on where you live. For instance, in one of the documentaries, there's a section about restaurants. The second screen then asks you whether there's more or less restaurants per 10000 people in your city (should you live somewhere in France or Germany, of course), compared to average. Depending on the data were you live, the correct answer will be different. In the end of the experiment, the players will also be able to compare their performances to the rest of the participants', and learn whether the French or the Germans did best. - tiles type. On the site's dashboard, we worked hard on providing diversity. Some tiles work as counters that start as soon as you connect to the site (How many glasses of wine have been drunk ? How many planes took off ?), other redefine geography (Which city is closest to Paris, should you compare museum attendance instead of kilometers ?), others use internationally known landmarks (how high is your town compared to the Eiffel Tower ?), others are presented as duels between France and Germany (who's the best in business creation ? And in car production ?)... We really wanted all those numbers to become more significant to the public, and designed our tiles to reach that goal.

Technologies used for this project:

The main challenge developing this project was double: it had to be web native (Arte didn't want the users to download an app) and responsive (from cellphones to desktop computer). This is part of the reason why we decided to organize our site's main dashboard in tiles. We then were able to present it with tiles in a column (for very narrow screens such as cellphones in portrait mode) or in rows (up to 3 tiles for each row). To develop this, we used a classic combo of HTML5, CSS3 and javascript. The development's heavy part relied on the javascript, so we decided to use BackboneJS, a framework we already used before and were comfortable with. We also used a variety of libraries to get the visual effects we wanted to run smoothly cards flipping, tiles wall reassembling, and what not. We faced some performance issues on iOS devices (mainly old iPads), but we're very pleased with the way the site runs on desktops and Android tablets and phones. We also had a technical challenge for the second screen experience. Doing that outside an app and in a web browser can be very painful. In the past, we had developed a project that ran 100% on the client side and used the device's internal clock to trigger questions appearance. We went through a lot of issues using that solution, mainly because of devices going to energy saving mode and then losing track of time - or them simply being set on a wrong time. So this time, we used Node.js and let the server handle the question appearance timing. This was a very good solution, fixing all of our previous problems.

Video

Follow this project
Wait
Comment

Comments (0)

You have to be connected to contribute

You have to be connected to follow

Leave this project and no longer be informed about this project

By joining this project, you will be informed by email when an update or a new contribution is posted on the website.

Thank you for your active participation !
Best,

The GEN Community Team