Notes

Trouver,
chercher, empiler,
stocker, raconter,
jeter, older.

Fred

Escape 2016

2016 a semé pas mal d’embûches sur son passage. Donald Trump, le Brexit, Pokemon Go, plusieurs célébrités disparues… Il fallait tirer un trait sur tout ça. Pour cela on a imaginé un mini-jeu où le but est d’en finir au plus vite avec 2016, en l’explosant avec un Galaxy Note 7 pendant qu’il nous bombarde de mauvaises nouvelles. En termes techniques, le choix de la librairie a été rapide : on avait besoin d’un moteur de physique 2D (l’idée est de faire un jeu en scrolling horizontal), d’un générateur de particules (les visuels des mauvaises nouvelles) et d’une gestion simple des mouvements (contrôles au clavier) : Phaser.js paraissait tout a fait approprié.

Le prototype a été rapidement conçu mais des obstacles sont vite apparus. Pour diverses raisons, nous avons dû adapter Phaser.js avec des arrangements maison, puis il a fallu se mesurer à des problèmes d’égalité entre tailles d’écran (ça ne doit pas être plus facile sur un grand écran que sur un petit). Pour cela nous avons choisi de fixer la largeur du jeu et de nuancer quelques paramètres en fonction de la hauteur du navigateur.
Enfin, adapter le jeu aux appareils tactiles s’est révélé plus complexe que prévu. L’idée de départ était d’utiliser le gyroscope pour faire avancer le vaisseau, mais nous sommes vites revenus sur notre décision : bouger son téléphone dans tous les sens et spammer la touche de tir en même temps, c’est pas très user-friendly. Plan B, créer une interface avec des boutons de direction et de shoot. À un détail près : le multi-touch n’est pas natif dans les navigateurs web. Nous avons donc dû revoir les évènements de touch afin de permettre à l’utilisateur d’avancer et de tirer en même temps sur mobile. Après avoir géré ces problèmes en front et ajouté la gestion des scores en back, le jeu était fin-prêt pour le lancement, et 2017 est arrivé :)

Aujourd’hui, le record à battre est de 4.184 secondes et pas mal de joueurs se situent entre 6 et 10 secondes.

A vous de jouer !

 

escape2016

Gaëtan
2016

Un condensé non exhaustif de l’année

En 2016 on a mis le paquet sur les interactions, les animations, le graphisme qui donne envie de découvrir de l’information. Derrière chaque projet au rendu visuel se cachent des heures de réflexion, de recherche, de conseil, d’analyse, d’essais, de transformations, d’évolutions. Merci à nos clients pour la confiance qu’ils nous portent au fil des projets !

victor

Headlines Counter, l’état des lieux Trump vs Clinton après 120 jours

Nous comptabilisons quotidiennement depuis 120 jours sur us2016headlines.datagif.fr le nombre d’occurrences Trump et Clinton à la une d’une sélection de quelques sites médias américains et européens.

plan-de-travail-12

Pourquoi ? Par ce que nous avons voulu vérifier à quel point la parole de Trump est davantage relayée que celle de Clinton. Trump est davantage exposé que Clinton et nos observations ont dépassé nos spéculations.

Nous avons pu observer sur la période que le nombre de mentions de Donald Trump est en moyenne 90 % plus important que celui d’Hillary Clinton.

Cette surreprésentation de Trump prend des proportions très importantes dans le cas de média à sensation tel que le Daily Beast qui en moyenne mentionne chaque jour 6 fois plus Trump que Clinton.

plan-de-travail-12-copie-2

Le Daily Beast a presque effacé totalement Hillary Clinton de sa page d’accueil le 21 octobre en ne la mentionnant qu’une seule fois contre 27 mentions pour Trump.

plan-de-travail-12-copie-3

En France, le 7 octobre, BFMTV a mentionné Donald Trump 23 fois contre 0 pour Hillary Clinton.

plan-de-travail-12-copie-4

Deux jours plus tard c’est le LA Times qui présente une proportion importante de 144 mentions Trump contre 13 mentions Clinton.

Une surreprésentation qui atteint même des proportions stratosphériques pour un media lifestyle comme GQ qui mentionne  en moyenne Trump 685 % plus souvent que Clinton.

Cette suroccupation du nombre de mentions Trump concerne aussi des médias plus “classiques” comme le New York Times qui mentionne en moyenne 157 % plus souvent le candidat Trump. 

L’occupation de l’espace médiatique concerne aussi des média francophones comme Libération qui évoque Donald Trump 1 fois et demi plus que Hillary Clinton en moyenne.

En 120 jours d’observation, les 16 sites que nous observons ont mentionné 53 273 fois Donald Trump  contre 28 073 mentions d’Hillary Clinton. En résumé, Trump a occupé 1,9 fois plus d’espace sur les unes des médias que Clinton. Tout va bien.

plan-de-travail-12-copie-8

Quel que soit le résultat de l’élection nous allons continuer quotidiennement à comptabiliser le nombre de mentions de Trump et de Clinton pour observer si la tendance s’inversera en cas d’une victoire d’Hillary Clinton ou en cas d’une autre surprise.

À la prochaine !

 

Florent

Headlines counter, une bataille Clinton-Trump

Il se passe beaucoup, beaucoup, beaucoup de choses bien intéressantes dans cette campagne présidentielle US coté suivi de l’élection par les médias. Chacun y va de son dispositif qui va du plus simple (un brief quotidien) au plus compliqué (de looooongues pages joliment mises en forme bourrées d’infos et de data). Il y a quelques semaines on a fait une petite sélection de choses intéressantes, c’est disponible ici. Plus récemment on a découvert le débat avant le débat proposé par le Washington Post ou l’imposante galaxie Trump du Guardian. De notre coté nous observons (comme tout le monde) que tout le monde parle davantage de Trump que de Clinton. Nous avions donc envie de voir à quel point le bruit médiatique autour de Trump prend le pas sur Clinton. Nous comptabilisons donc quotidiennement depuis fin juin le nombre d’occurrences Trump et Clinton à la une d’une sélection de sites. En 70 jours, Clinton n’a dépassé que 3 fois Trump. C’est à consulter sur http://us2016headlines.datagif.fr, n’hésitez pas à réagir sur notre Twitter.

Joan

Hello, Dwight

Nous partageons souvent sur Slack des articles ou vidéos sur des nouveautés en développement, réflexions d’UX-UI ou inspirations en créa, et même pas mal de musique.
Mais dans le flot des conversations, on se retrouve parfois obligé de remonter assez haut pour retrouver le bon lien dont on discutait, ou réécouter le titre qui nous plaisait. Au final, personne ne prend le temps de sauvegarder ces quelques bons liens que l’on ne retrouve jamais au moment où l’on en a besoin.

Du coup, sans trouver la bonne recette IFTTT, nous avons décidé de créer un bot dans les channels réservés à ces partages (liens de dev, créa ou ux-ui et de musique) pour répondre à cette problématique de recherche. C’est comme cela que nous avons créé Dwight.
Dans les channels des bons liens, Dwight, récupère le lien et les potentiels tags que l’on aurait associés, attend quelques minutes les réactions-emoji de chacun, et envoie le tout à un Google Doc qui est chargé de conserver nos bons liens qualifiés par des tags et emoji (en attendant qu’on trouve où les stocker, c’est déjà pas mal).

Dans le channel musique, Dwight scanne les titres postés, et les ajoute dans une playlist Spotify s’il trouve le titre correspondant. Il duplique aussi sur Soundcloud, au cas où le titre serait une exclu à la plateforme.

Pour récupérer le nom du titre, Dwight passe par l’API de la plateforme dont le lien provient (et se limite pour l’instant à YouTube, SoundCLoud et Spotify – les quasi seuls liens que l’on s’échange).
Dwight tourne sous Node à qui on a appris à discuter avec les API de Slack, Google Drive, SoundCloud, Spotify et YouTube, le tout installé sur un Heroku.

Pour l’instant, le bot est assez transparent (et ne fait qu’indiquer l’enregistrement des liens avec des réactions-emoji), mais quelques améliorations viendront peut-être lui apporter un peu de personnalité.

En attendant, voici la playlist Spotify du bureau, agrégée par Dwight.

Dwight en action dans Slack

Joan
#stroke-dasharray

Un site de présentation de la saison 16/17 pour le Théâtre Dijon-Bourgogne

Nous travaillons depuis 4 ans maintenant avec le Théâtre Dijon-Bourgogne – scène nationale – sur la création de visuels et sur les déclinaisons sur l’ensemble des supports de communication. Pour annoncer la programmation de la saison 2016/2017 (et donc de l’ensemble des visuels) nous avons mis le site en pause pour présenter de façon éphémère les visuels des 20 nouvelles pièces.

Cette année, les illustrations sont au trait, nous étions donc tenté d’utiliser la technique d’animation de tracé SVG imaginée au départ par Polygon en 2013. À l’époque, aucune méthode ne permettait de produire une telle animation et de manière aussi fluide, mais suite à cette trouvaille, ce type d’effet a fleuri un peu partout.

Il consiste à jouer avec deux propriétés de bordure d’un tracé SVG, mais nécessite de calculer la longueur de ce tracé et de l’animer (en CSS ou en JS). Depuis, plusieurs librairies proposent de mettre en place cet effet, et nous en avons profité pour essayer vivus.js. Elle est encore en développement (et nous avons recensé quelques bugs), mais est déjà assez complète pour peu de ressources. Et après un peu de travail et de réglages sur l’ordre des tracés et leur timing, bim :

1

17

12

Le site et les visuels sont tous .

Aline
Conférence #US2016

Élections US 2016, la présentation

Courts, longs, pop, quizz, game, gif… Tous les formats de la session spéciale médias / élections US 2016 au Numa Paris sont à retrouver…ici

Aline
Conférence #US2016

Comment les sites médias américains sortent de leur zone de confort ?

On approche de la fin des primaires américaine. Il s’est passé pas mal de choses sympathiques sur les sites de news. Qui a le meilleur graphisme ? Qui a les meilleurs illus ? Un page de brief, est-ce que c’était une bonne idée ? Les formats longs, ça marche encore ? Retour de hype du gif ? Le 28 juin prochain, à 19 h, Datagif apporte sa (modeste) contribution aux élections US en participant à une session spéciale médias / élections US 2016 au Numa Paris.

Qu’est ce qui se fait de mieux outre-Atlantique à l’aide d’un panorama – non exhaustif – des expériences à retenir (dans la perspective de notre propre élection qui se profile à l’horizon 2017) ? On essaiera d’y répondre ; avec vous ?

Réservez votre place ici. Bien entendu, c’est GRATUIT.

Florent
Clickbait sur papier

Vous aimerez aussi

Sur les sites d’info, après avoir échappé à 1 arche, 4 bannières, 6 pavés et 3 expands, on tombe 99 fois sur 100 en fin d’articles sur de sublimes propositions de rebonds (par rangée de 3 ou 4 en général) comme « La vraie recette du meilleur flan » ou « Défiscalisez facilement avec la loi Pinel ». Ces articles de pub sponsorisée présentés comme de vrais articles interfèrent avec les lignes éditoriales et l’environnement graphique des sites. C’est assez formidable puisque tout les sites (gratuits ou payants) quelle que soit leur ligne éditoriale deviennent des clones. On s’est fait plaisir en compilant au gré des hasards des titres d’articles et des titres d’articles sponsos proposés ensemble. 200 pages pas du tout en vente, mais que vous pourrez consulter quand vous passerez nous voir au bureau !

Vous aimerez aussi_1_bis

Vous aimerez aussi_3_bis

Vous aimerez aussi_2_bis

Quelques page de plus sont ici

Florent
Gradient

La couleur du FN

C’est en travaillant sur la refonte du site de liberation.fr que nous nous sommes réellement penchés sur la question. C’est quoi, la couleur du FN ? Quelle couleur utiliser pour représenter le FN dans les infographies et les graphiques de résultats d’élections ?
Il y a des couleurs absolument évidentes pour certain partis, pour le FN ce n’est pas vraiment le cas. Doit-il être représenté en noir ? En marron ? En jaune ? Nous avons cherché et compilé la représentation colorielle du FN à l’écran et dans quelques journaux, ici même.
Cet archivage des couleurs n’est pas complet et est alimentée au fur et à mesure que nous trouvons de nouvelles sources, la plupart des archives n’étant pas en accès libre. Techniquement c’est simple, une fois un visuel de résultats trouvé, nous prenons à la pipette le code couleur hexadécimal.

Couleur1
Couleur3
Couleur4
Couleur5
Couleur2