La technologie DeepZoom accessible avec Ajax

Bon d’accord je sais ça fait beaucoup d’acronymes mais je peux vous assurer que ça en vaut la peine. Microsoft Lab vient juste de publier un module DeepZoom (une technologie de zoom sur-puissant qui repose sur SeaDragon) à encapsuler dans vos pages web (ne faisant donc pas appel au plug-in Silverlight) : Seadragon Ajax. Et en prime ils proposent même un player : Embed the Viewer.

L’impression de plongeon est tout simplement stupéfiante.

Comme une démo vient bien mieux que de longs paragraphes, je vous propose de jouer avec le module en question : Seadragon: zoom deeply in the world of Ajax.

District Montréal, découvrir Montréal autrement

Logo District Montréal

District Montréal est un projet que j’admire beaucoup. Même s’il s’agit d’un projet en ligne depuis plusieurs mois, il est toujours intéressant d’en parler.

District Montréal regroupe avant tout des centaines et des centaines de photos de Montréal. L’idée est de faire découvrir l’immensité et la richesse des diversités et des multiples beautés de la ville de Montréal.

Site Web District Montréal

Mais qu’est-ce qui rend District Montréal exceptionnel ?

Le concept “humain” est ce qui rend District Montréal enrichissant. Le projet est réel. Les gens de Montréal sont invités à toucher les photos, voire marcher dessus dans le Centre Eaton, au centre-ville de Montréal.

Site Web District Montréal

Crédits : Chantal Barbin

Site Web District MontréalCrédits : Chantal Barbin

C’est une œuvre d’art immense qui n’existerait pas sans la participation des photographes amateurs qui s’amusent à partager leurs photos directement à partir de l’interface. De plus, les utilisateurs sont en mesure de télécharger leur photos à partir de Facebook et de Flickr, ce qui est très intéressant.

À noter : Il peut y avoir près de 28 millions de visiteurs au Centre Eaton durant une année, ce qui en fait une place de choix pour exposer des photos.

Découvrir Montréal autrement !

Comme vous pouvez le voir, l’interface du site Web de District Montréal, développé en flash, n’apporte rien de nouveau. Elle est dotée d’une navigation souvent utilisée pour les sites Web en flash… On y retrouve même la possibilité de voir les photos selon plusieurs critères : les districts, l’évocation, le genre, l’happening, etc..

 Menu Site Web District Montréal

Qu’en est-il de l’ergonomie Web ?

Site Web District Montréal

Je reproche d’abord le même problème que dans le site de Vinotinto. Quelques informations, dont le choix de la langue ainsi que le “login” devraient, à mon avis, se retrouver en haut.

Je trouve également qu’il y aurait place à amélioration pour certaines options. Prenez par exemple le mode “plein écran”. Lorsqu’il est actif, la mention ” plein écran” est toujours présente. Il aurait été intéressant de reformuler celle-ci ou encore de penser à y ajouter un visuel qui ferait comprendre à l’utilisateur qu’il peut quitter ce mode. Vous remarquerez d’ailleurs qu’il est possible de le faire présentement en appuyant sur “Echap”. (une fonction du navigateur internet). À mon avis, ça ne devrait pas être le cas. Ça doit être une fonction disponible sur le site.

L’option “login” est aussi un point que j’aurais peaufiné. Pour faciliter l’inscription sur le site Web, j’aurais remplacé “login” par deux items, soit “inscription” et “connection”. Qu’en pensez-vous ?

Ce que j’en retiens ?

Que… malgré tout, il n’y a pas seulement la navigation et l’ergonomie Web qui peuvent rendre une interface riche ! :)

P.-S. Je serais intéressée à connaître votre opinion de District Montréal. Existe-t-il un projet de ce genre en Europe ?

Les gagnants des MAX Awards 2008

Comme chaque année à l’occasion de la grande messe d’Adobe (MAX), un concours est organisée pour récompenser les plus belles interfaces. Les gagnants de l’édition 2008 ont été annoncés en fin de semaine : Adobe Announces 2008 MAX Awards Winners.

Dans la catégorie Advertising & Branding : Hapiness Factory de Coca-Cola, une incroyable immersion au pays imaginaire du bonheur (autres finalistes : Fracture de LucasArts et le fameux Color Visualizer de Shewin-Williams).

Le site Happiness Factory

Dans la catégorie Enterprise : Nasdaq pour son application Market Relpay dédiée aux traders :

L'application riche du Nasdaq

Dans la catégorie Mobile : Succubus Vertigo (pas d’URL) avec un incroyable jeu en 3D.

Phase de jeu de Succubus Vertigo

Dans la catégorie RIA : Scrapblog (mention honorable pour EarthBrowser) :

Un exemple de Scrapblog

Voici donc une très belle moisson d’interfaces riches de qualité. Et n’oubliez pas qu’il y a également un concours européen pour les MAX Europe Awards 2008.

Flash devient une marque ombrelle et autres annonces d’Adobe

C’est à San Francisco que vient de s’ouvrir l’édition 2008 de MAX, la grande messe d’Adobe, et les annonces se succèdent. Je vous propose donc un petit résumé.

Flash à tous les étages

Avant il y avait Flash, Flex, AIR… à partir de maintenant il n’y aura plus que Flash. C’est en substance la nouvelle posture de communication d’Adobe qui souhaite simplifier l’accès à des technologies peut visibles du grand public comme Flex ou AIR en les englobant dans la Flash Platform :

Le schéma est un peu indigeste mais cette stratégie a du sens dans la mesure où l’offre commençait à ne plus être très lisible. Plus d’infos ici : Flash Is Now A Platform, AIR Gets An Upgrade, And Adobe Puts A Catalyst In Gumbo.

Nouvelle version pour AIR (oups !)

Au passage vous noterez que la version 1.5 de AIR est disponibles. Heu… suis-je encore autorisé à parler de AIR ?

Bon toujours est-il que l’on nous annonce de meilleurs performances, une gestion plus fine de la mémoire et le support de Flash 10 / Webkit : Adobe AIR 1.5 (”Cosmo”) builds now in Flex SDK Nightly builds.

Version mobile pour Flash 10

Adobe et ARM unissent leurs forces pour porter Flash 10 et AIR sur les terminaux mobiles équipés d’une architecture ARMV- et ARMv7, c’est à dire… heu… et bien en fait je ne sais pas à quels terminaux ça correspond (en tout cas pas l’iPhone).

Bon de toute façon les démos n’ont pas encore eu lieu, mais c’est assurément une très bonne chose notamment pour la popularisation des Rich Mobile Application. Plus d’infos ici : Flash 10 for Mobile Devices.

Thermo devient Flash Catalyst

Thermo sort de l’ombre et récupère un nom grand public “conforme” à la nouvelle politique de gamme : Flash Catalyst. En deux mots ce nouvel outil permet de faire le pont entre deux métiers jusqu’alors fâchés : les designeurs et les développeurs. Avec Flash Catalyst la promesse est de laisser la main aux designeurs pour ajouter une première couche d’interactivité à leur création. Plus d’infos ici : The Flash Platform (again) and Hello Flash Catalyst.

Traduction :

  1. Vous prenez vos fichiers Photoshop, Illustrator ou Fireworks ;
  2. Vous les importez dans Flash Catalyst ;
  3. Vous définissez une fonction / un comportement à vos éléments graphiques (“ça c’est un bouton”, “ça c’est un champ texte”…) ;
  4. Vous testez votre prototype (puisque c’est ce que votre design est devenu) ;
  5. Vous le transmettez aux développeurs qui finissent le travail.

Voilà, c’est merveilleux, tout le monde est content. Tout le monde sauf moi, le concepteur. Car c’est encore tout une partie de la chaîne de production d’un site web ou d’une application en ligne qui est toujours ignorée par les éditeurs : avec quoi les concepteurs peuvent-ils bien travailler pour faire leurs arborescences, scénarios d’utilisations, parcours-client et maquettes fonctionnelles ?

Personnellement je suis persuadé que Fireworks serait la solution idéale pour les concepteurs (puisque de toute façon il n’y a pas la place pour 3 produits “graphiques” dans la gamme). Il suffirait “juste” de la simplifier et surtout de faire en sorte qu’il sache gérer les tableaux de données.

Mais bon j’aurais l’occasion d’en reparler…

Cocomo pour faire des applications sociales riches en mode Saas

“Applications sociales riches en mode Saas“, hé hé hé ça vous la coupe autant de buzzword, non ? Pour faire simple, disons que Cocomo désigne une série de composants (des briques logicielles) qui permettent de créer plus rapidement des applications à vocation sociales qui seront hébergées sur la plateforme Acrobat.com.

Plus d’infos ici : CoCoMo – Collaboration for Every Developer.

Voilà donc une très belle série d’annonces, vivement la suite (car la semaine ne fait que débuter) !

Cross-branding et univers immersif pour Renault et Electronic Arts

Après Citroën et son concept car GT Concept que l’on a pu découvrir au Salon de l’auto (et en exclusivité dans Gran Turismo 5 Prologue), c’est au tour de Renault de s’appuyer sur les jeux vidéos pour faire du cross-brandging. Je voudrais donc vous parler ce soir de cet incroyable mini-site qui met en scène à la fois l’univers de Need for Speed Undercover et la nouvelle Megane Coupé : Agent M09.

Ce mini-site se présente sous la forme d’une succession de scènes animées particulièrement réalistes (du moins dans le style jeux vidéo) :

Les écrans de Agent M09

Il y a également des vidéos du jeu avec des évènements interactifs (cliquer au bon moment ou jeux d’adresse) :

La vue immersive de M09

L’effet d’immersion est donc utilisé à plein potentiel pour pouvoir mettre en valeur à la fois le jeu vidéo et la voiture. (via BadBadBlog)

Dans le même style il y a également ce mini-site très intéressant pour Far Cry 2 où l’immersion à été poussée encore plus loin : Far Cry 2 Experience 2. Vous êtes ainsi confronté à une vidéo en plein écran du jeu :

La vidéo immersive de Far Cry 2 Experience

Le principe est que vos choix influent sur votre profil :

Les choix de Far Cry 2 Experience

Voilà donc deux très bons exemples d’univers immersifs pour faire la promotion d’un jeu vidéo. Une bonne pratique à suivre.

Expérimentations conceptuelles et physiques

Je souhaiterais vous faire découvrir aujourd’hui deux sites expérimentaux très… expérimentaux (vous comprendrez). Soit parce qu’ils cassent complètement les codes de conception, soit parce qu’ils adoptent une approche graphique disruptive… soit les deux !

Nous avons donc en premier lieu le mini-site Design and the Elastic Mind du MoMA qui se présente sous la forme d’une mosaïque de concepts rangés par catégories (dans des colonnes). Les concepts sont liés entre eux et lorsque vous cliquez sur une entrée, les liens vers les autres concepts s’affichent. De plus la page est animée par des courbes qui passent sur l’écran pour vous faire découvrir des concepts de façon aléatoire :

L'interface métaphorique du MoMA
L'interface métaphorique du MoMA

Cette interface est en fait censée représenter la métaphore du tag et de son mode de navigation par rebond. (Merci à Thierry pour le lien)

Autre exemple avec le site de Nuuro, un groupe de musique électro où les différents contenus sont représentés par des éléments qui tombent et s’entrechoquent au sein d’une même page :

La page d'accueil de Nuuro
La page d'accueil de Nuuro

Il est possible de “réorganiser” la page en faisant du drag&drop avec les différents éléments et on peut même écouter les albums en cliquant dessus (ce sont les galettes noires), les petites boules de couleur s’animent alors en fonction du tempo :

Mais quel bordel sur cette page !
Mais quel bordel sur cette page !

Il y a un côté hypnotique pour cette page où on ne se lasse pas de voir les éléments rebondir et se comporter selon les lois de la physique. (via Hebiflux)

Rien à redire, ces deux exemples sont une très bonne source d’inspiration pour une utilisation disruptive des interfaces riches. Vous aimez ?

Vos RIAs en dehors du navigateur avec Silverlight 3 ?

Alors que la V.2 de Silverlight vient à peine de sortir, on nous parle déjà de Silverlight 3 et d’une évolution majeure : Silverlight 3: The Next Fit Client?

Évolution majeure ? Oui car il serait ainsi question de faire de Silverlight non pas un plug-in pour navigateur mais un environnement d’exécution indépendant, quelque chose à mi-chemin entre Adobe Centrale (qui permettait de faire tourner du Flash dans une fenêtre indépendante) et AIR (cf. Microsoft lays out Silverlight ambitions).

Voici donc une hypothèse d’évolution tout à fait intéressante car Silverlight est un produit fini contrairement à WPF qui est un socle technologique très puissant mais lourd (et exclusive à Windows). Cet hypothétique Silverlight 3 se positionnerait donc comme une alternative légère qui pourrait servir à faire tourner tout un tas d’applications riches (RIA) sur différents terminaux cibles.

Et ça tombe bien car Microsoft est en train de progressivement migrer son offre sous forme de RIA (notamment avec ses très ambitieux projets Azure et Mesh) et parce que Microsoft vise un grand nombre de terminaux : desktop (Windows, Mac ou Linux), netbook, mobile, console de jeux, set-top box, baladeurs numériques… Ce Silverlight serait donc une sorte de sur-couche, comme un pseudo-système d’exploitation.

ça ne vous rappelle rien ? JavaFX peut-être… Effectivement l’approche est à peu près similaire, tout comme celle d’Adobe avec Open Screen Project (dans une moindre mesure).

Vous vous doutez donc que les répercussions de cette nouvelle approche seraient énormes, elles porterait le débat des RIAs à un niveau supérieur, là où il y a de très grosses sommes d’argent en jeux. Mais avant de tirer des conclusions hâtives j’aimerais bien avoir une confirmation officielle de la part de Microsoft quand à ses intentions car pour le moment il est surtout question de pouvoir faire du streaming de contenus vidéo HD : Silverlight 3 to Support Streaming HD Flash Video.

Chirstophe ? Dick ?

Élections américaines et innovations technologiques

Vous êtes sûrement nombreux à avoir suivi les élections américaines cette semaine sur les chaines françaises, qui avaient pour l’occasion chacune sorti un habillage aux couleurs de la bannière étoilée.

Pour les chaines américaines c’était l’occasion de rivaliser d’innovations technologiques. CNN a frappé fort en utlisant un hologramme sur leur plateau, représentant une journaliste en direct de Chicago.

Pour cela, ils ont utilisé la technologie proposée par Vizrt, et 35 caméras HD filmant la journaliste.

Il y avait également lors de cette soirée, un grand Touch Screen pour illustrer les résutats en direct.

Touch Screen CNN
Touch Screen sur CNN

Enfin ils ont utilisé la réalité augmenté pour représenter le sénat, plutôt impressionant.

Les interfaces riches (et tactiles) deviendraient-elles mainstream ?