internet

Google démontre les possibilités du HTML5 sur un air d'Arcade Fire

par Anthony Nelzin le 31.08.2010 à 07:00
Autre défenseur de la plateforme HTML5, Google a mis en place une démonstration des capacités des technologies formant le futur des standards du Web en mettant en images un morceau d'Arcade Fire, We Used to Wait. The Wilderness Downtown est un film interactif faisant partie des Chrome Experiments, fonctionnant sous Chrome, mais aussi sous Safari 5 ou tout autre navigateur dont l'implémentation de la plateforme HTML5 est convenable.

Dock
La plupart des technologies de cette plateforme sont utilisées : la balise audio du HTML5 joue le morceau et joue le rôle de tête de lecture sur laquelle tous les autres éléments sont calés. La balise video sert à afficher les différentes vidéos, qui s'ouvrent dans des fenêtres différentes dont le placement et la taille, relatifs à la taille de l'écran, sont définis par du JavaScript. Le but étant de suivre une personne courant à travers une ville évoquant votre enfance (vous pouvez choisir la ville au début du clip interactif), Google utilise l'API Google Maps pour afficher des vues 2D et Street View, vues qui sont ensuite dynamiquement transformées (zoom, coloration, déplacement, etc.). Le SVG est utilisé pour une partie où on peut dessiner ou taper du texte. Enfin, dès qu'une animation doit être calculée et affichée en temps réel, c'est évidemment l'élément Canvas qui est utilisé.

Il est intéressant de garder un œil sur le processeur le long de la démonstration. Comme on pouvait s'y attendre, l'utilisation de Canvas demande des ressources : on observe quelques pics à 100 % d'un cœur de notre iMac Core i5 2010 sur quelques secondes pendant le rendu d'un vol d'oiseaux ou du placement d'arbres sur une carte. Mais le reste de la démonstration est étonnamment économe : jamais le processeur n'a ensuite dépassé les 15 % de charge, y compris lors de la manipulation en SVG ou de transformations CSS complexes. Une autre démonstration de la polyvalence et des capacités de la plateforme HTML5, qui reste encore largement à exploiter.

|  |  

Découvrez le nouvel iPad sur l'Apple Store
3
2
1
Vos réactions (44 réactions)
sebastiano [31/08/2010 07:35] via MacG Mobile

Propagande !! Flash est capable de faire mieux ! Mais comme c'est Google qui s'y est collé, on dira que c'est génial. :)
Sephi-Chan [31/08/2010 07:37]

C'est vraiment sympa ! À défaut d'avoir la puissance de la machine (les grosses animations HTML/Javascript ont vite raison des petites machines), on a l'originalité.

Par contre, je trouve dommage qu'on résume HTML5 à de la vidéo et de l'animation, c'est aussi des tas de choses beaucoup plus simples mais super pour les développeurs (et par extension, les utilisateurs). Les Websockets, les nouveaux attributs (un champ de texte en input type="email" affichera le clavier adapté aux emails dans l'iPhone par exemple, l'attributs placeholder pour afficher du texte jusqu'à la prise de focus d'un champ de texte), etc.


Sephi-Chan
pseudo714 [31/08/2010 07:40]

Marche pas bien avec safari 5. Ce n'est pas ça qui va pousser à l'adoption de htlm5. Peut-être de chrome.
iDuck [31/08/2010 07:51]

@ pseudo714

Chez moi, ça marche très bien avec Safari 5.
pseudo714 [31/08/2010 08:21]

@iDuck c'est peut-être à cause de mes extensions ou plug-ins.
tempest [31/08/2010 08:33]

Je trouve cette démo tout simplement hallucinante !!! La démonstration et le savoir-faire technique me laisse sur le cul. Autant en Flash rien ne m'épate autant là on sent du boulot de programmation. Bon c'est sur chez Google ils ont du monde et de la came pour mettre dans le clip mais le résultat est sidérant. Awesome !
ichp [31/08/2010 08:39]

@sebastiano

Au moins quand Google fait une démo, il l'a rend disponible pour tous les navigateurs implémentant HTML5 contrairement à d'autres !

@Sephi-Chan

Websocket ne change rien à l'expérience utilisateur. C'est juste un standard pour les appels asynchrones pour les développeurs. Donc difficile à concrétiser dans des démos techniques.
jibou [31/08/2010 08:43]

@ pseudo714

Dans les préférences de safari, dans 'onglets', ouvrir les nouvelles fenêtres dans des onglets -> "Automatique" et non "toujours"

Et là çà marche...
MacDays [31/08/2010 08:53]

Euh, c'est super tout ça, mais il y a quand même quelque chose qui me chiffonne.

Dès le départ, Google avertit que "this film is processor intensive".

Mais euh... C'est pas justement ce que tout le monde (avec, au premier rang, les Jobs' Groupies) reprochait à Flash d'être "processor intensive", en vantant les mérites de HTML5 comme le remède miracle à ce trop-plein de surchauffe ?

Et là, on nous explique que pour faire la même chose, il va falloir consommer autant de proc ?

C'est intéressant, mais ça s'appelle un peu du foutage de gueule, non ? ;)
stalmicmac [31/08/2010 09:01] via MacG Mobile

En tant que nouveau "partenaire" d'Adobe pour une implémentation correcte de Flash sur Androïd, je vois mal Google dire: voilà ce qui entraînera la fin de Flash. Regardez comme c'est léger, rapide et économe. Ils se doivent de se retenir un peu!
fondoeil [31/08/2010 09:06]

Démo vraiment très sympa. Beaucoup plus fluide sur Safari 5.0.1 que sur Chrome 5.0.375.127 chez moi... Superbe ! Dommage que le haut des fenêtres reste visible et que les caractères accentués ou la ponctuation ne soient pas gérés, mais l'utilisation et la transformation des vues satellite Google pour coller au scénario sont bluffantes. Idem pour les oiseaux qui se posent sur le dessin... Ça donne envie de voir la suite !
Un Vrai Type [31/08/2010 09:15]

@ MacDays : Comparé à une simple vidéo sur un code duo 1ghz, au moins, c'est fluide.
Ensuite :
Je remarque que mon processeur a chauffé, certes, mais pas du tout le disque dur ! Incroyable, je peux laisser ma main posée sur le "capot" de mon macbook pro (de 2007).

Globalement, c'est plus fluide, ça chauffe moins j'entends moins les ventilos qu'avec UNE SIMPLE VIDEO FLASH.

Donc oui, c'est processeur intensive, mais je me rends compte à l'instant que le soucis avec flash, c'est peut-être l'activité disque dur... Ca mérite de tester, toujours est-il que ça prouve que Flash marche mal sur Mac OS X. Point barre.

Et pour ta gouverne, ça fait depuis mon passage de Mac OS 8 à (linux puis) Mac OS X que je le dis. Soit depuis 2003... Alors essaye d'être un poil objectif au lieu d'insulter les gens de groupie. Au moins, je peux t'affirmer ici que l'expérience de cette démonstration est nettement plus motivante qu'un simple film en flash...
Sephi-Chan [31/08/2010 09:17]

Posté par ichp

@Sephi-Chan

Websocket ne change rien à l'expérience utilisateur. C'est juste un standard pour les appels asynchrones pour les développeurs. Donc difficile à concrétiser dans des démos techniques.


Je pense que ça va changer un peu l'expérience utilisateur en ajoutant un peu plus de réactivité dans les applications Web d'aujourd'hui. Il était jusque là impossible pour Javascript d'établir une connexion persistante et full-duplex entre un client et un serveur, maintenant oui.

Certes, il y avait des alternatives avec le long-polling (avec des solutions comme [url=http://www.ape-project.org/]Ajax Push Engine[/url] ou XMLSocket de Flash), mais elles sont bien plus coûteuses que l'utilisation des WebSockets, maintenant, ces solutions ne seront plus qu'un fallback pour les navigateurs à la traîne.

WebSocket est un protocole, mais c'est aussi [url=http://dev.w3.org/html5/websockets/#the-websocket-interface]un objet Javascript[/url] (à l'image de Regexp ou String) implémenté dans Safari 5, Chrome 5 et Firefox 4.

Et c'est au contraire très simple à concrétiser sous forme d'une démonstration technique : il y a l'éternel chat, la carte du monde qui affiche la provenance des personnes qui la visitent en temps réel, etc.

Et ça ne change pas le fond des choses : HTML5 (tout comme Flash), ce n'est pas que de la vidéo. C'est bien normal que les ignorants (et les crétins) ne cessent de comparer Flash à la vidéo de HTML5 si vous ne leur mettez que ça sous la dent.


Sephi-Chan
Ast2001 [31/08/2010 09:27]

C'est sympa mais sur mon Portable HP sous W7, le ventilateur se met en marche du début à la fin alors qu'habituellement je ne l'entends jamais.
seishiro [31/08/2010 09:28]

c'est pas si gourmand en CPU. Avec une VM qui tourne déjà plus cette vidéo j'ai rien vu d'alarmant.
Très fluide sur Firefox et Safari.
3
2
1



Réagir

Cinq consignes avant de réagir :
  1. Rester dans le cadre de la dépêche. Pour des discussions plus générales, vous pouvez utiliser nos forums.
  2. Développer son argumentation. Les messages dont le seul but est de mettre de l'huile sur le feu seront modifiés ou effacés sans préavis par la rédaction.
  3. Respecter les acteurs de l'informatique et les autres lecteurs. Les messages agressifs, vulgaires, haineux, etc. seront modifiés ou effacés sans préavis par la rédaction.
  4. Pour toute remarque concernant le contenu de l'article, pour nous signaler une erreur, une faute d'orthographe, une omission, merci de nous contacter exclusivement par e-mail.
  5. Relisez-vous, et pour les utilisateurs de Safari profitez de l'aide du navigateur : activez le menu édition > Orthographe > Vérifier l'orthographe lors de la frappe.