En 2012, le marché numérique de la musique est en pleine forme alors que les ventes physiques ne cessent de chuter. L’économie des festivals est elle encore florissante. Greencopper, entreprise basée à Montréal, qui propose depuis 2009 de développer, en natif, des applications Smartphone pour assurer la promotion des grands rassemblements musicaux en Europe, aux États-Unis et au Canada, avait eu le nez creux : elle a progressivement gagné la confiance du milieu et des sponsors et son catalogue compte aujourd’hui plus de 50 applications regroupant les principaux festivals de musiques actuelles de France. Un succès rapide au sein d’un marché en développement.

Miser sur l’expertise

Greencopper est constituée d’une petite équipe de 14 personnes, travaillant entre Montréal et Rennes. L’entreprise a acquis en trois ans d’existence un savoir-faire unique, reconnu par les organisateurs de festivals : en France, leur concurrence se limite désormais à quelques agences freelance, aux États-Unis, l’entreprise rivalise avec Xomo, qui développe, entre autres, l’application du festival geek et musique SXSW. Une réussite liée à l’adaptation : des concerts urbains aux énormes scènes de plein air, l’application proposée doit répondre à des attentes précises correspondant au lieu et au public. La stratégie principale de l’entreprise, présentée par Cécile Martin, directrice marketing, repose toutefois sur une logique de centralisation :

Nous mutualisons les besoins des professionnels. Nous vendons d’abord une licence de base à 3000 euros, comprenant le développement en natif et la maintenance, puis nous proposons une grille de tarifs pour l’ajout de services. Ces coûts peuvent être pris en charge par des partenaires privés. Les années suivantes, nous ne facturons que le coût de développement de nouvelles fonctionnalités ajoutées par les organisateurs, comme le push par exemple. Le but du jeu est de simplifier au maximum les démarches pour les responsables communication et de supporter toutes les contraintes techniques.

L’autre atout de Greencopper est sa connaissance du terrain. D’abord festivaliers avant de devenir prestataires de services, les différents membre de l’équipe assistent aux événements, cherchent de nouvelles idées à partir de leurs propres expériences et rencontrent directement leurs clients. Un lien de proximité très apprécié des organisateurs selon Lénaïc Jaguin, responsable communication du festival Rennais Les Tombées de la Nuit :

Greencopper anticipe en partie nos besoins et travaille directement avec les organisateurs et ses partenaires. L’entreprise prend totalement en charge un des moyens de promotion les plus importants aujourd’hui en matière de visibilité et d’interactivité, ce qui nous permet de réaliser des économies d’échelle. Chaque année nous pouvons également discuter de nouvelles fonctionnalités proposées par Greencopper qui apportent toujours une plus-value.

Après s’être imposée dans un marché émergent, Greencopper s’attache maintenant à fidéliser les utilisateurs en proposant des contenus impliquant davantage les publics. Un objectif qu’elle partage avec les organisateurs.

Page d'accueil des applications Rock En Seine de 2010 à 2012 (Capture d'écran)

Le prolongement communautaire

Le taux d’équipement en Smartphone en France est sur une courbe ascendante. Les applications mobiles, déjà largement utilisées par les festivaliers pour le partage de photos et de vidéo, semblent aussi être un outil prompt à la constitution d’une communauté. Lier la navigation du public aux réseaux sociaux est par exemple une des possibilités déjà expérimentées par les festivals. Dans son application 2011, téléchargée environ 40 000 fois, Rock en Seine proposait aux spectateurs de joindre leur compte Facebook au service de géolocalisation. Fleur Richard, responsable de la communication du festival, est prête à continuer dans cette direction :

Nous aimerions également aller plus loin avec l’application. Nous avons pensé à lier les tweets des festivaliers qui utilisent l’application avec un compte officiel et diffuser cette timeline sur les écrans géants. Nous n’avons pas encore l’effectif nécessaire pour gérer et modérer ce compte pour l’instant, mais c’est une idée que nous aimerions développer, à terme.

La seconde option pour animer la communauté de festivaliers est la gamification, actuellement étudiée chez l’un des principaux partenaires de Greencopper, SFR. Sander Cisinski, directeur du sponsoring, des partenariats et du programme jeunes talents de SFR, explique :

Nous aimerions développer l’aspect ludique de ces applications en proposant des rencontres ponctuelles avec les artistes sur les sites de festival ou bien des chasses au trésor. Il s’agirait d’enrichir le volet géolocalisation, de faire participer le public, de lui donner un autre rôle pendant les concerts.

La piste privilégiée par la FNAC, autre partenaire de l’éditeur d’application, est de proposer un service de billetterie complet, au-delà de la musique live et du volet communautaire des festivals, afin d’exploiter le potentiel du M-commerce, au cas où la fréquentation s’essouffle.

Les avantages retirés de ces API par les professionnels en termes de visibilité et de communication semblent évidents mais la réception de l’offre est plus difficile à apprécier. Si l’on isole les festivaliers utilisateurs d’iOS, représentant tout de même 55 à 60 % de l’activité de Greencopper, les étoiles et commentaires de l’AppStore ne peuvent donner qu’une idée partielle du taux de satisfaction des publics. Greencopper a constaté que le taux de mise à jour moyen est d’environ 40% : les applications restent souvent sur le téléphone des usagers, en attendant le festival suivant.

Bonjour et bienvenue sur Vendredi c’est Graphism !

Geoffrey

Allez, on commence la semaine avec cette animation, vous allez adorez ces droïdes, qui, comme seule façon de résoudre leurs désaccords, se mettent à danser sur de la musique dubstep. Ce court métrage d’animation 3D a été réalisé sur le logiciel 3D de Luxology. Leur travail a consisté à la modélisation, le surfaçage, le texturage, l’animation, le rendu et les effets tels que la physique et l’éclairage volumétrique. Les personnages et l’environnement ne sont pas trop complexes à créer, mais conserver la qualité et la finesse des lumières et des textures en synchronisant tout ce petit monde avec la piste musicale a dû être une autre paire de manches !

Cliquer ici pour voir la vidéo.

Le making off en images :

source

On continue avec Geospire qui est une exposition interactive présentée au Musée géologique d’Oslo. L’exposition est conçue et construite par Voy et a été développée en collaboration avec le Musée d’histoire naturelle d’Oslo et la section inter-media de l’Université d’Oslo. L’exposition vise à sensibiliser les écoliers sur ​​les roches et les paysages typiques d’Oslo. Entre des ateliers, des objets et des films, le musée géologique est rempli d’objets merveilleux avec une collection de plus de 2 millions de fossiles, des spécimens de roches et de minéraux. Cependant, les visiteurs ne sont pas autorisés à toucher ces éléments généralement conservés derrière une vitre. Geospire permet ainsi de créer de nouvelles activités éducatives pour les groupes d’écoliers afin d’apprendre la géologie par le toucher au travers d’objets physiques tels que des maquettes de paysages et des échantillons de roches.

En images :

En vidéo :

Cliquer ici pour voir la vidéo.

source

Hop, voici une infographie qui nous raconte l’histoire du html5 et notamment son but qui vise à parfaire le langage précédent par l’amélioration de la programmation et ses nouveautés tout en étant compatible et compréhensible par les dispositifs actuels et les navigateurs Web. Cette infographie explique ainsi la compatibilité avec les différents navigateurs existants mais également les enjeux pour la téléphonie mobile.

source

On continue avec une petite vidéo de Google qui est passée inaperçue. Elle présente une nouvelle façon de pouvoir communiquer avec des amis ou en famille dans votre propre langue. C’est désormais à portée de main avec Google Input Tools.. Disponible dans les services de Google, sur Chrome ou sur les téléphones Android et Windows…. Un beau projet, très prometteur pour lequel il vous faudra rester à l’écoute pour l’arrivée des nouvelles langues sur de nombreuses plateformes.

Cliquer ici pour voir la vidéo.

source

Les étudiants d’aujourd’hui sont de plus en plus en contact avec leur téléphone haute technologie. Et avec la montée rapide de l’accès Internet mobile, beaucoup sont en mesure d’accéder à des ressources dont ils ont besoin pour étudier. Mais voilà, selon les études que la graphiste Jen Rhee a mis en avant, cet accès facile pourrait très bien être à la fois une bénédiction et une malédiction :

Des conversations bruyantes à des moments inopportuns, des SMS désagréables à un moment délicat, aux toilettes, au lit, en voiture… Bref, cette infographie nous présente donc l’absence de « bonnes manières mobiles ».

source

Hine Mizushima est né et a grandi à Tokyo, au Japon où il a travaillé en tant qu’artiste et illustrateur. Il n’y est pas resté longtemps et a voyagé à Rome, Paris ou New York. Il réalise ainsi des marionnettes, du stop-motion, le tout avec des petits personnages, monstres, animaux, paysages en feutre. Un univers coloré, simple et onirique :)

source

C’est le mini-buzz de cette semaine, le site préféré de tous les français vient de changer de design. Et oui, sncf.fr a été refait ! Un nouveau design, une grille, une belle typo… Mais… voilà qu’une radio démarre (parfois!) tout seule quand on arrive sur le site. On a cette drôle de sensation d’être transporté de son ordinateur vers une gare. Curieux !

Le nouveau site :

Le WTF !!

Pour découvrir cette superbe radio ça se passe sur le site de la SNCF.

source

Pour le mot de la fin, je vous invite à Bordeaux pour cette superbe expo d’architecture, à Londres, au Fashion and Textile Museum,  ou encore au Point Ephémère pour voir ce collectif d’artistes ! Côté dataviz, le Guardian a publié les droits des homosexuels aux Etats-Unis, Etats par Etats et en attendant vendredi prochain, moi je retourne célébrer la fin de l’ACTA ! ;-)

Bonne fin de semaine et gardez l’oeil ouvert !

Geoffrey

Fond d'écran "Steampunk" du jeu Nitrome

Jouer à des jeux sur votre navigateur web peut aujourd’hui vous valoir un certain dédain de la part des hardcore gamers ou de joueurs sur console.

Ce serait pourtant un peu dur par rapport à l’industrie du jeu. D’une part, parce que le succès phénoménal de certains jeux web sociaux (on pense bien sûr à Farmville) a permis de prouver la viabilité de leurs modèles économiques et de celle de l’utilisation de technologies web au service du jeu, comme le Flash ou l’intégration au sein de Facebook. D’autre part, parce que certains studios de jeux web comme Nitrome ont su créer des univers graphiques travaillés qui n’ont pas à rougir face à des titres classiques reconnus.

Et le mouvement continue : grâce à l’avènement de technologies émergentes comme le HTML5, les Websockets ou le WebGL, le jeu web est peut-être promis à un avenir radieux. Ces technologies pourraient même, à terme, ériger le navigateur web en véritable plate-forme de jeu universelle et standardisée.

Exigence

Le HTML est le standard de formatage des données pour le web : totalement ouvert et reconnu par tous les navigateurs, il rend de bons et loyaux services depuis l’invention du web en 1991 en structurant les pages et en y décrivant les différents éléments qu’elle contient – image, lien ou paragraphe de texte par exemple. Mais pour les jeux et animations, il fallait jusqu’à présent avoir recourt à des technologies propriétaires et nécessitant l’installation d’un plug-in, une extension au navigateur, comme le célèbre Flash d’Adobe.

Dernière mouture du HTML, le HTML5 change la donne. Instituée par le W3C (l’organisme chargé de standardiser le web) et bien qu’encore officiellement en phase d’étude, cette nouvelle norme est opérationnelle et les professionnels l’implémentent déjà depuis plusieurs mois dans leurs projets web. Parmi les innovations que propose le HTML 5, la nouvelle balise <canvas> est l’une des plus prometteuses. Elle permet aux développeurs web d’insérer dans leur page une surface sur laquelle il est possible de tracer des formes et de les animer. Dans cette zone peuvent par exemple figurer des jeux qui n’utilisent pas de plug-in externe, et donc reconnus par tous les navigateurs, y compris sur les téléphones mobiles.

Comme souvent en informatique, c’est le jeu vidéo qui, par sa grande exigence technique, est un des meilleurs moteurs et vitrines de l’innovation. La fondation Mozilla n’a pas dérogé à cette règle en présentant avec le studio Little Workshop le 27 avril, un jeu multi-joueurs en temps réel dans une seule page web, BrowserQuest. Histoire de démontrer ce qu’il est possible de faire en utilisant le HTML5, le Javascript et les Websockets. Militante historique de l’open-source, la fondation Mozilla, a également mis à disposition de tous le code de BrowserQuest.

Contournement

Non content d’animer une page web sans plug-in grâce au HTML5, BrowserQuest fait aussi de celle-ci un jeu multijoueurs en temps réel. Ceci est rendu possible grâce à une autre nouvelle technologie : les Websockets.

Jusqu’à présent, pour qu’une page web affichée sur votre navigateur mette à jour son contenu en fonction de l’action d’autres internautes, il fallait que le navigateur réclame à nouveau au serveur web la page mise à jour. Ces requêtes client-serveur unidirectionnelles sont inhérentes au protocole de communication historique du web, le HTTP. Ainsi, pour concevoir une page comportant un chat de discussion, les développeurs devaient jusqu’à présent utiliser des technologies de contournement complexes, ou n’utilisant pas le protocole HTTP.

Les Websockets rendent cette fois possible une communication bidirectionnelle en temps réel entre le navigateur et le serveur qui héberge la page. En clair, les Websockets peuvent par exemple permettre la création de jeux multi-joueurs sur une simple page web, sur laquelle des milliers de joueurs sont connectés, influant sur son contenu en temps réel. Une belle promesse technique pour les jeux massivement en ligne.

Accélération

Le WebGL est le troisième larron des nouveaux standards qui changent le jeu web. Développé par Khronos Group et Mozilla, cette technologie permet d’afficher de la 3D en temps réel sur une page web, là aussi sans plug-in à télécharger. Vous utilisez déjà WebGL lorsque vous affichez les immeubles de GoogleMaps en 3D, par exemple.

Jeu BrowserQuest par la Fondation Mozilla

La grande innovation de WebGL repose surtout dans l’utilisation de l’accélération matérielle de l’ordinateur de l’internaute. À l’instar des jeux classiques, le WebGL permet au web de profiter lui aussi des formidables optimisations offertes par l’architecture des microprocesseurs des cartes graphiques pour l’affichage d’un environnement en 3D.  Si le fait de relier le web à une couche informatique de si bas niveau en inquiète certains (Microsoft ne souhaite pas encore implémenter le WebGL pour des raisons de sécurité), elle représente néanmoins une petite révolution technique. On se plaît déjà à imaginer un Call of Duty directement dans son navigateur web.

Convergence

L’arrivée de ces nouveaux standards ne bénéficiera pas qu’aux internautes joueurs. À l’heure actuelle, un studio de jeu qui vise le marché le plus large possible doit développer une version de son jeu pour iPhone en langage Objective-C, une version pour Android en langage Java, une version web en Javascript… Au vu de l’importance croissante du marché jeu mobile, ces portages multiples constituent une barrière rédhibitoire pour les petits studios qui souhaitent se lancer dans l’aventure de la création d’un jeu.

HTML5, Websockets et WebGL offrent l’espoir aux développeurs de produire des jeux sur tous les navigateurs et surtout cross-devices. BrowserQuest est ainsi compatible avec la plupart des navigateurs web récents comme Firefox, Chrome ou Safari, mais également sur iPhone, iPad et sur la version Android de Firefox.

Le navigateur web prend décidément de plus en plus des allures de système d’exploitation. Si l’on ne peut que se réjouir de la standardisation et de l’ouverture technique qu’il offre aux créateurs de jeux, il faut cependant espérer que cela n’impose pas à l’ensemble du jeu vidéo la faiblesse artistique auxquels les jeux web et mobiles nous habituent parfois…

Bonjour à toutes et à tous :)

Nous y sommes, c’est la fin de semaine, c’est vendredi et c’est… Graphism ! Aujourd’hui, on ne perd pas une miette de l’actualité graphique, visuelle et artistique avec de la danse & une kinect, un jeu d’aventure en html5, avec des affiches mal conçues, avec un piano à fabriquer soi-même ou encore avec un jeu qui va vous permettre de créer des couples typographiques ! On terminera sur un WTF à la sauce Batman, pour notre plus grand plaisir ;)

Allez, on commence notre semaine, avec les artistes Daniel Franke et Cedric Kiefer qui ont utilisé une Kinect pour enregistrer les mouvements d’un danseur qui réalise une performance corporelle sur une musique électronique (“Machinefabriek”). À partir de cette captation, les deux artistes ont enchaîné les images pour créer un nuage de points en 3D du corps du danseur. Avec ses 22.000 points, ce nuage mouvant ressemble tantôt à une tempête de sable, tantôt à des membres fragiles. Un beau moment, très élégant.

Cliquer ici pour voir la vidéo.

source

Cette semaine, j’ai passé beaucoup de temps sur ce site, ou plutôt sur ce jeu… oui, je l’avoue, je m’y suis immergé ! Mozilla a fait équipe avec les deux compères de LittleWorkshop (que je salue au passage ) pour développer un jeu d’aventure appelé BrowserQuest. Ce jeu est construit uniquement avec des technologies web basées sur des normes html5 et est conçu et notamment les… WebSockets (le protocole WebSocket vise à développer un canal de communication bidirectionnel, client/serveur).

Il y a deux ans, quand je travaillais avec Mozilla, j’avais justement pu expérimenter la puissance de cette technologie pour réaliser des démos assez impressionnantes en terme de rapidité et de synchronicité entre le navigateur Firefox mobile et sa version desktop.

Pour les plus techniques, BrowserQuest est donc codé avec JavaScript et HTML5 et utilise l’élément Canvas HTML5 pour représenter un monde tout en pixels et peuplé de monstres, de chevaliers, de squelettes, etc.

> et ça se passe sur ce site :)

En images :

En vidéo :

Cliquer ici pour voir la vidéo.

source

Cette semaine fut également l’occasion pour moi de découvrir cette bien drôle galerie Flickr, plus précisément la galerie Flickr de Jason Fried. Jason adore prendre des photos de « signes sur les signes », comprenez de pancartes sur des pancartes. Le fait de sur-signifier quelque chose est le symptôme d’une mauvaise conception, d’un mauvais design. En effet, si le signe est bien pensé et bien conçu il se suffit à lui-même.

Et le pire c’est que j’en croise tous les jours…

source & source

Allez on enchaîne avec un bien drôle de piano ! Ce synthétiseur  fonctionne avec du papier et permet de jouer ainsi avec 12 touches, simplemais efficace :) Chacune d’elles déclenche un ton et une petite lumière de type LED. Pour la partie technique, ces touches sont  un ensemble de capteurs capacitifs réalisés en ruban de cuivre et contrôlés par un Arduino.  Le résultat donne un clavier totalement artisanal mais qui fonctionne plutôt bien !

Cliquer ici pour voir la vidéo.

source & source

merci Sony

Nous avons eu l’occasion il y a quelque jours, de découvrir la dernière réalisation d’Aura Seltzer, une jeune designer américaine qui étudie actuellement au MICA  Son projet de fin d’étude s’intitue « Type Connection » et se présente sous la forme d’un jeu en ligne en html, vraiment bien réalisé. Ce jeu a pour but d’apprendre à optimiser les meilleures combinaisons typographiques possibles. Là où le jeu est décalé, c’est qu’il puise son inspiration dans les sites de rencontre mais d’une façon nettement plus élégante.

source

On termine avec un WTF placé sous le signe de … Batman ! La vie quotidienne n’est pas toujours passionnante, et bien si vous êtes un super-héros, elle l’est tout autant :) L’illustratrice Sarah Johnson a ainsi imaginé les aventures WTF de Batman sous forme de gif animé et l’on constate avec une certaine satisfaction qu’en vérité, être un super-héro, c’est quand même un drôle de problème au quotidien ;-)

source

Pour le mot de la fin, je vous laisse avec un immense graphiste que j’ai eu la chance d’avoir comme professeur il y a quelques années. Rencontre avec Pierre Bernard, fondateur de l’Atelier de Création Graphique, un fabuleux studio de graphisme français :)

Cliquer ici pour voir la vidéo.

Bonne fin de semaine et… à vendredi prochain pour de nouvelles aventures, avec ou sans Batman !

Geoffrey

Bonjour… et bienvenue pour un numéro de “Vendredi c’est Graphism” d’hiver !

Et oui, la nuit va commencer à tomber plus tôt et les gens à s’enrhumer. Je vous conseille de rester bien au chaud et de lire “Vendredi c’est Graphism” ;-). Surtout qu’au programme de cette semaine, je vous propose de l’expérimentation HTML5 “Lights”, une dataviz signée Facebook, de la musique.. mais sous forme de livre ou un clip dessiné 100% à la main, image par image ! On continuera notre revue de la semaine avec du pixel art et un gros WTF à base de porte ! N’importe quoi ;-)

C’est bon, vous y êtes, c’est Vendredi et c’est… Graphism ! :-)

Geoffrey

Allez, on commence tout de suite avec le site de la semaine. Je suis tombé il y a quelques jours sur cette expérience visuelle, musicale et interactive pour le dernier morceau « Lights », de Ellie Goulding. Les effets et les possibilités interactives de cette expérience musicale sont assez impressionnantes, personnellement, (et c’est rare), j’ai regardé et écouté le site jusqu’au bout. Le geek qui se cache en nous reconnaîtra également les possibilités du webGL… un sacré travail signé par l’agence HelloEnjoy!

> Le site se visite par ici

Et en attendant, voilà quelques écrans clefs du site, c’est bluffant !

source

Pour la grand conférence des développeurs de Facebook, les designers de l’agence “Obscura Digital” se sont livrés à la création d’une installation de visualisation de données in situ, qui reliait physiquement les personnes entre elles. Les gens pouvaient ainsi se connecter à leur profil Facebook et voir comment ils pouvaient être liés à d’autres personnes au travers d’une visualisation circulaire projetée sur le sol.

Une fois “connectés” à d’autres personnes, cette visualisation radiale présentait ce que l’on appelle un “graphe social”. Les amis communs, les intérêts, les lieux de travail, les écoles, les lieux de vie, etc. servaient donc d’information pour relier les gens entre eux. Un jeu amusant, inquiétant ou alors une prouesse technologique ? En tout cas, l’interface radiale, ça en jette ! ;-)

Cliquer ici pour voir la vidéo.

Merci Fabrice

Allez hop, on passe  de l’expérience visuelle à l’expérience sonore avec le travail vraiment intéressant d’Emmanuel Martinet, un étudiant diplômé de l’Esad de Strasbourg. Emmanuel a ainsi réalisé quatre livres contenant chacun des effets sonores, le volume général de la musique, des boucles, etc. Grâce à une caméra qui filme l’ensemble par dessus, les pages des livres sont reconnues puis traitées de façon informatique afin de jouer des sons, de la musique.

Un beau mariage entre livre et musique qui vient réenchanter la relation de ces deux médiums.

Cliquer ici pour voir la vidéo.

source

On continue et on s’arrête sur un petit moment d’émotion visuelle avec un clip dessiné tout à la main, image par image, pour le dernier morceau de “We Cut Corners” : Pirate’s Life. Ce clip s’inscrit vraiment dans une tendance du retour à la main, au tracé, à la ligne claire et au final… au dessin. Bref, ce n’est pas pour me déplaire, mais je me tais et je vous laisse apprécier.

Cliquer ici pour voir la vidéo.

source

Aaaah, les amoureux des jeux vidéos 8 et 16 bits vont être ravis aujourd’hui ! Je viens en effet de dénicher un site intitulé “Title Scream” et je vous avoue que depuis tout à l’heure mon enfance défile devant mes yeux ! En effet, ce site regroupe un nombre impressionnant de “Title screen”, les écrans de démarrage des vieux jeux vidéo à l’époque des premières consoles. D’un point de vue graphique c’est assez bluffant car avec des couleurs et une taille restreintes et du dessin en “pixel art” (pixel par pixel), on retrouve parfois des scènes et des images incroyables !

> visiter titlescream.com

On termine avec le WTF de la semaine et avec un homme qui nous explique, étape par étape, comment passer une porte… WTF ! Chaque élément est précis et mesuré, il ne vous faudra donc pas se tromper lorsque l’on reproduira le geste. Une vidéo qui n’est certes pas dans notre langue mais, rassurez-vous, tout se passe dans le visuel, le geste, l’expérience… un vrai travail de designer en quelque sorte ! ;-)

Cliquer ici pour voir la vidéo.

Pour ce petit mot de la fin pour vous remercier de l’accueil qui a été fait la semaine dernière pour le numéro spécial “HTML5″ de Vendredi c’est Graphism, et également pour la nouvelle version de Graphism.Fr, mon blog. Et pour celles et ceux qui seraient encore un peu curieux après cette lecture, je vous invite à imaginer ce que l’avenir (le présent ?) nous réserve en matière d’interface tactile, en matière de téléphone mobile, ou en matière de HTML5 ;-)

Bon week-end et… à la semaine prochaine !

Geoffrey

Hello à vous les curieux !

J’espère que vous avez passé une bonne semaine, que vous vous êtes bien remis du numéro un peu triste de vendredi dernier, bref aujourd’hui on tourne la page avec ce numéro de “Vendredi c’est Graphism” spécial… html et notamment html5 ! En effet, l’actualité est riche cette semaine et vous le savez peut-être, j’ai pas mal travaillé avec Mozilla, fervent défenseur des technologies web, libres et ouvertes… Hier, je me suis dis qu’il était donc temps de faire un numéro spécial HTML5 ! :-)

Alors j’arrête tout de suite les puristes, je ne parlerai pas uniquement de créations réalisées avec HTML5, mais également de projets utilisant les technologies html modernes (par là pour savoir de quoi je parle).

Au programme cette semaine, de la typographie, de la visualisation de données, une interface tactile, une autre musicale, un visualiseur de skin Minecraft, la sortie du dernier Ubuntu et un wtf html très étrange !

Bon vendredi…et bon “Graphism” !

Geoffrey

Allez, c’est parti et on commence avec un jeu tout particulièrement créé pour les amoureux de la typo.. il s’agit de « Kern Type », un jeu pour tester vos facultées à régler le kerning (crénage en français) d’un mot. Un bon gros jeu de « geek » de typo en quelque sorte. Mais bon, avant tout, voici la définition du kerning

« Le crénage (kerning) ou réglage de l’Approche est l’ajustement de l’espace entre les lettres d’une police à chasse variable. Dans une police bien crénée, l’espace optique entre deux lettres est identique, quelle que soit la paire de lettres considérée. Dans une fonte de caractère créée dans les règles de l’art, le crénage est fait manuellement par le fondeur pour toutes les paires de caractères une à une. Dans le cas contraire, les logiciels de gestion de fonte peuvent le faire automatiquement, mais cela donne un moins bon résultat » [wikipedia]

Voilà le résultat visuel… j’ai essayé de bien créner, et sur d’autres, je me suis volontairement décalé pour vous montrer les différences. En attendant… vous pouvez vous amuser sur ce site !

source

Voici une interface Linux / HTML5 qui fonctionne en multi-touch et qui va vous permettre de lire vos flux rss sur écran géant ou simplement sur votre ordinateur. Réalisé par Pliage, Pascal Chirol et le talentueux Douglas Edric Stanley, le projet s’appelle “CITY MEDIA”. Né en 2009, ce projet est le fruit d’un travail collectif entre développeurs, artistes et opérateurs culturels, réunis par l’envie de repenser la place des médias dans la ville et d’en rendre l’usage plus immersif, plus humain et plus sensible.

Ce projet prend la forme d’un grand écran interactif tactile, installé dans l’espace public, qui peut être activé par plusieurs personnes à la fois, agissant de concert ou de manière indépendante. Ses contenus sont d’ordre informatif, culturels, touristiques, mais aussi artistiques, ludiques… Ce projet est inspiré d’une expérimentation menée à Helsinki. C’est un nouveau média urbain de communication, de service et d’échange entre les habitants et les visiteurs de la ville.

Et voilà le résultat ainsi que l’interface tactile géante !

Cliquer ici pour voir la vidéo.

Cliquer ici pour voir la vidéo.

source / source

On continue avec de la visualisation de données interactive et en html5 ! Créée par D3 (une société de production numérique basée à Sao Paolo), le projet Circiel Of Trust se base sur Google Plus et vous montre graphiquement votre réseau de relations ! C’est un moyen intéressant de voir la façon dont chaque personne est reliée à nous et ainsi, construire un schéma visuel de ce drôle d’environnement social qu’est Google Plus.

Si vous voulez tester, ça se passe sur circleoftrust

source

On enchaîne sur Plink, 100% musical et 100% html5 et qui se décrit comme une expérience musicale multijoueur avec une interface utilisateur assez simple et plutôt intuitive. Il vous suffit donc de cliquer et de déplacer votre souris pour générer des sons, (et pourquoi pas de la musique? ), tout ceci en temps réel et en ligne. Mais ce n’est pas tout, il faut savoir que sur Plink, vous n’êtes pas seul et vous allez pouvoir jouer de ces sons avec d’autres internautes connectés en même temps en ligne. À tester donc ! ;)

Cliquer ici pour voir la vidéo.

source

Vous n’êtes sans doute pas passé à côté du phénomène Minecraft, ce jeu qui vous plonge dans un monde créé dynamiquement et composé de cubes représentant du sable, des cours d’eau, de la pierre, des arbres, etc. Le concept de base est tel que le joueur peut modifier ce monde à volonté… un peu comme pour des legos ! Et bien, Djazz, un jeune développeur a créé ce “visualiseur” de personnage Minecraft. Vous allez pouvoir concevoir une petite image, la mettre en ligne sur le site et… voir votre personnage prendre vie, tout simplement !

source

Allez, on reste dans le jeu vidéo avec une grosse actualité également, il s’agit de Google qui lance un service intitulé “PlayN”, une plate-forme de développement pour les jeux qui génère du HTML5, du Flash, etc. PlayN est une bibliothèque multi-plateforme de jeu qui va donc vous permettre de créer un jeu basé sur un langage unique (du java) mais qui s’exécute en HTML5, Java, Android et Flash. L’idée de créer un langage unique pour diffuser son programme sur différentes plateformes sans se compliquer la vie n’est pas nouveau.. cependant, ici c’est Google qui s’en occupe et c’est orienté jeu vidéo ! Je suis donc très très curieux de voir ce que tout cela va donner !

Cliquer ici pour voir la vidéo.

Merci Sylvain

Hier la toute nouvelle version du un système d’exploitation libre, Ubuntu est sortie ! Et pour fêter cela, la société Canonical propose à tous les internautes de “tester” un peu cette nouvelle version, très visuelle, très graphique, mais directement… dans votre navigateur en html5 ! tester cette nouvelle version (allégée!) d’Ubuntu depuis votre navigateur.

Et pour le WTF de la semaine, il s’agit d’une expérience web, qui, même si elle n’est pas nouvelle, reste assez incroyable! Réalisé par un jeune russe, ce site vous propose du WTF en barre à grand coup de gif animés, d’interfaces modulaires, de radio boutons,  et ça se passe sur toliademidov.ru

Et pour le petit mot de la fin, je vous invite à aller encore plus loin dans le html5 et le graphisme avec notamment le site fabuleuxe de mrdoob.com, celui de chromeexperiments.com et également des demos.mozilla.org !

Excellente fin de semaine à toutes et à tous,

Geoffrey

Si vous vous êtes perdus dès le deuxième mot, n’hésitez pas à visiter le bref glossaire en bas de l’article.

Pourquoi tous les développeurs fantasment sur le CSS3?

Avant le CSS3, c’est-à-dire encore aujourd’hui, les développeurs étaient contraints à une foultitude d’acrobaties pour obtenir le résultat escompté. La principale embûche répond au doux nom de «compatibilité crossbrowser». Sur l’ensemble des navigateurs utilisés dans le monde, l’hégémonie d’Internet Explorer est incontestable.

Or, avant sa version 8, le navigateur de Microsoft présente des fonctionnalités très critiquables: il ne comprend pas le langage standardisé sur lequel s’entend la grande majorité des autres navigateurs.

Ces standards, consultables sur le site du W3C (World Wide Web Consortium) sont indispensables, car ils permettent une harmonisation du langage tant dans la sémantique de l’écriture que dans le formatage des documents ou encore le choix des processus à employer pour telle ou telle fonction.

Tant que tous les développeurs et tous les navigateurs ne parleront pas la même langue, on ne pourra pas prétendre à une réelle transversalité du développement et ainsi garantir un affichage identique sur toutes les machines. En attendant, les développeurs s’échinent à trouver des aménagements pour répondre aux disparités de chaque navigateur.

CSS3, le flash killer

Mais notre ami développeur ne s’arrête pas là. Lorsqu’un graphiste lui envoie la maquette d’un site Internet, la plupart du temps il lui faut la tronçonner pour isoler chaque élément qu’il intégrera ensuite avec une ligne de code. L’image ci-dessous est celle utilisée sur apple.com pour afficher les différents états de sa barre de navigation. La première ligne est l’état normal, la deuxième est l’état quand la souris survole chaque onglet, la troisième quant on clique sur un onglet, et la quatrième quand on est sur la page demandée. Testez-vous même!

Avec la nouvelle version du CSS, il est possible de spécifier directement en code les dégradés, les ombres, les reflets et les arrondis: on n’aura donc plus à charger d’images, ce qui allègera considérablement la taille des sites et leur temps de chargement.

D’autre part, vous avez surement remarqué que fleurissent depuis plusieurs mois les petites animations qui améliorent l’expérience utilisateur d’un site.

Il y a quatre ans, on aurait très certainement utilisé du flash. Au détriment de tous les utilisateurs dont l’ordinateur est démodé, la connexion Internet mauvaise, ou le logiciel obsolète. Aujourd’hui, c’est réalisé en javascript, grâce à des librairies toute prêtes qui comportent la plupart des fonctions de base et qu’il suffit d’activer avec une ligne de code.

Mais là encore, tous les navigateurs ne réagissent pas de la même manière, et le temps de chargement est alourdit. Alors rêvons, parce que, demain, toutes les animations seront réalisables en CSS directement, sans passer par une application tierce. C’est techniquement déjà possible, mais on ne peut pas s’en contenter parce que trop peu de gens y auraient accès. En Chine, plus de 80% des internautes utilisent encore un navigateur incompatible. Affaire à suivre.

HTML5, du sens et la simplicité

Pour pousser la découverte du HTML5, les plus courageux se plongeront dans la lecture de ce très clair article de Lachlan Hunt, rédacteur chez A List Apart. Traduit de l’anglais pas Sylvain Jorge Do Mardo.

Glossaire

CSS : Le CSS est un langage de codage informatique utilisé dans la construction de sites internet. Il permet de spécifier simplement l’apparence et la disposition des différents éléments qui constituent le site, couleur, typographie, taille des textes et sections… Toutes ces informations sont enregistrées dans un fichier nommé généralement style.css.

ex :

Pour définir comme blanc la couleur de fond de la section appelée “article”.

#article{ background : white; }

HTML : Le HTML est un langage de codage informatique utilisé dans la construction de sites internet. Il permet de construire et hiérarchiser la structure d’une page de site internet grâce à l’emploi de “balises”, et il définit le contenu à afficher.

ex :

Pour afficher un gros titre suivi d’un paragraphe de texte.

<h1>Gros Titre</h1>

<p>Paragraphe de Texte</p>

ex :#article{ background : white; }ex :<h1>Gros Titre</h1><p>Paragraphe de Texte</p>

Une fois n’est pas coutume, nous vous proposons aujourd’hui une traduction qui non seulement ne parle pas de logiciel libre mais qui en plus provient de CNN, et même pire que cela, de sa section Money !

Et pourtant il nous semble pointer du doigt une possible évolution d’Internet, celle de son éclatement sous la pression des smartphones et autres objets connectés tels ces nouvelles liseuses et tablettes dont on vante tant les futurs mérites.

Une évolution possible mais pas forcément souhaitable car c’est alors toute la neutralité du Net qui vacille puisque les trois couches qui définissent le réseau d’après Lessig se trouvent ensemble impactées.

l’iPad ou le Kindle en sont des exemples emblématiques car ce sont des ordinateurs (la couche « physique ») dont Apple et Amazon contrôlent à priori les protocoles et les applications (la couche « logique ») et peuvent filtrer à leur guise les fichiers (la couche des « contenus »).

L’article s’achève sur une note optimiste quant au HTML5 et au souci d’interopérabilité. Encore faudrait-il avoir affaire à des utilisateurs suffisamment sensibilisés sur ces questions^[1].

Hier encore on nous demandait : T’es sous quel OS, Windows, Mac ou Linux ? Aujourd’hui ou tout du moins demain cela pourrait être : T’es sous quel navigateur, Firefox, Internet Explorer ou Chrome ?

Et après-demain on se retrouvera à la terrasse des cafés wi-fi, on regardera autour de nous et on constatera, peut-être un peu tard, qu’à chaque objet différent (netbook, smartphone, iPad, Kindle et leurs clones…) correspond un Internet différent !

La fin de l’Internet tel que nous le connaissons, grâce à l’iPad et aux autres

End of the Web as we know it, thanks to iPad and others

Julianne Pepitone – 3 février 2010 – CNNMoney.com
(Traduction Framalang : Martin et Goofy)

Pendant plusieurs années, l’Internet a été relativement simple : tout le monde surfait sur le même réseau.

Plus on s’avance vers 2010, plus l’idée d’un même Internet « taille unique » pour tous devient un souvenir lointain, à cause de l’arrivée de l’iPhone, du Kindle, du BlackBerry, d’Android, et bien sûr du fameux iPad.

La multiplication des gadgets mobiles allant sur Internet s’accompagne à chaque fois d’un contenu spécifique pour chaque appareil. Par exemple, l’application populaire pour mobile Tweetie permettant de se connecter à Twitter n’est disponible que pour l’iPhone, alors que l’application officielle pour Gmail ne l’est que pour Android. Et si vous achetez un e-book pour le Kindle d’Amazon, vous ne pourrez pas forcément le lire sur d’autres lecteurs électroniques.

En même temps de plus en plus de contenus en ligne sont protégés par un mot de passe, comme la plupart des comptes sur Facebok et certains articles de journaux.

C’est un Internet emmêlé qui est en train de se tisser. Simplement, le Web que nous connaissions est en train d’éclater en une multitude de fragments. C’est la fin de l’âge d’or, selon l’analyste de Forrester Research Josh Bernoff, qui a récemment formulé le terme de « éclaternet » pour décrire ce phénomène (NdT : the splinternet).

« Cela me rappelle au tout début d’Internet la bataille de fournisseurs d’accès entre AOL et CompuServe » dit Don More, du fond de capital risque Updata, une banque d’investissement conseillère dans les technologies émergentes de l’information. « Il y aura des gagnants et des perdants ».

Dans ces premiers temps du Web, les utilisateurs accédaient aux contenus en utilisant des systèmes spécifiques ; ainsi les abonnés de chez AOL ne pouvaient voir que les contenus AOL. Puis le World Wide Web est devenu une plateforme ouverte. Maintenant les appareils nomades sont à noueau en train de morceler le Web.

D’après Bernoff, « Vous ne pouvez plus recoller les morceaux, la stabilité qui a aidé le Web à prendre forme s’en est allée, et elle ne reviendra plus ».

Des angles morts

Quand les utilisateurs d’appareils mobiles choisissent d’acheter un iPhone, un Motorola avec Android, un BlackBerry ou d’autres, ils sont effectivement en train d’opter pour certains types de contenus ou au contraire d’en abandonner d’autres, puisque toutes les applications ne sont pas disponibles sur tous ces gadgets.

D’après Don More de Updata, ce phénomène est en train de mettre le contenu dans des « communautés fermés ». Les fabricants de ces appareils peuvent (et ils le font) prendre et choisir quelles applications fonctionneront avec leur machine, en rejetant celles qui pourraient être en concurrence avec leurs propre produits, ou bien celles qu’ils estiment n’être pas à la hauteur.

Par exemple, Apple a rejeté l’application Google Voice sur l’iPhone, qui aurait permis aux utilisateurs d’envoyer gratuitement des messages et d’appeler à l’étranger à faible coût.

Et les limitations ne s’arrêtent pas seulement aux applications. Une affaire d’actualité : Le nouvel iPad ne prend pas en charge le lecteur Flash d’Adobe, ce qui empêchera les utilisateurs d’accéder à de nombreux sites.

Bernoff ajoute : « bien que (cette tendance) ne soit pas nécessairement mauvaise pour les consommateurs, ils devraient prendre conscience qu’ils sont en train de faire un choix. Quoi qu’ils choisissent, certains contenus ne leur seront pas disponibles ».

Des choix difficiles

Les entreprises qui créent les applications sont maintenant confrontées à des choix difficiles. Quels appareils choisiront-elles de prendre en charge ? Combien d’argent et de temps devront-elles prendre pour que leurs contenus fonctionnent sur ces gadgets ?

Quel que soit le choix des développeurs, il leur manquera toujours une partie des consommateurs qu’ils pouvaient auparavant toucher lorsque le Web était un seul morceau.

Sam Yagan, co-fondateur du site de rencontres OKCupid.com, ajoute : « quand nous avons commencé notre projet, jamais nous avons pensé que nous aurions à faire face à un tel problème. Réécrire un programme pour un téléphone différent c’est une perte de temps, d’argent, et c’est un vrai casse-tête ».

D’après Yagan, OkCupid emploie 14 personnes, et son application pour l’iPhone a nécessité 6 mois de travail pour être développée. L’entreprise envisage de créer une application pour Android, ce qui prendra environ 2 mois.

« C’est un énorme problème de répartition des ressources, surtout pour les petites entreprises », explique Yagan, « Nous n’avons tout simplement pas assez de ressources pour mettre 5 personnes sur chaque appareil qui sort ».

Chris Fagan, co-fondateur de Froogloid, une société qui propose un comparateur pour le commerce électronique, dit que son entreprise a choisi de se spécialiser sur Android, car il marche avec plusieurs téléphones comme le Droid, Eris, ou G1.

Selon Fagan « les consommateurs sont en train de perdre des choix possibles, et les entreprises sont en train de souffrir de ces coûts supplémentaires ». Mais il ajoute que la popularité en plein essor des applications signifie que les entreprises continueront à en concevoir malgré leur coût.

Et après ?

Comme un Internet plus fragmenté devient chose courante, Bernoff de Forrester pense qu’il y aura un contrecoup : une avancée pour rendre le contenu sur mobile plus uniforme et interopérable.

La solution pourrait bien être la nouvelle version du langage Web qui arrive à point nommé, le HTML5, qui d’après Bernoff pourrait devenir un standard sur les appareils nomades dans quelques années. Par exemple, le HTML5 permet de faire fonctionner des animations sur les sites Web sans utiliser le Flash.

Mais l’arrivée de n’importe quelle nouvelle technologie déclenchera une lutte pour la contrôler. Don More de Updata s’attend à voir « une bataille sans merci entre les entreprises (pas seulement Apple et Google, mais aussi Comcast, Disney et tous ceux qui s’occupent des contenus). Que ce soit les applications, les publicités, les appareils… tout le monde est en train d’essayer de contrôler ces technologies émergentes ».

Évidemment, personne ne peut prévoir le futur du Web. Mais Bernoff est au moins sûr d’une chose.

« Nous ne connaissons pas ce que seront les tous nouveaux appareils en 2011. Mais ce qui est certain, c’est que l’Internet ne fonctionnera plus comme on l’a connu. »