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

Anthony Nelzin-Santos |
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.
Tags
#HTML5 #Chrome Experiments
avatar sebastiano | 
Propagande !! Flash est capable de faire mieux ! Mais comme c'est Google qui s'y est collé, on dira que c'est génial. :)
avatar Sephi-Chan | 
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
avatar pseudo714 | 
Marche pas bien avec safari 5. Ce n'est pas ça qui va pousser à l'adoption de htlm5. Peut-être de chrome.
avatar iDuck | 
@ pseudo714 Chez moi, ça marche très bien avec Safari 5.
avatar pseudo714 | 
@iDuck c'est peut-être à cause de mes extensions ou plug-ins.
avatar tempest | 
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 !
avatar ichp | 
@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.
avatar jibou | 
@ 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...
avatar MacDays | 
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 ? ;)
avatar Stalmicmac | 
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!
avatar fondoeil | 
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 !
avatar Un Vrai Type | 
@ 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...
avatar Sephi-Chan | 
[quote=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. [/quote] 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
avatar Ast2001 | 
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.
avatar seishiro | 
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.
avatar Sephi-Chan | 
Un peu de lecture pour ouvrir les yeux de ceux qui pensent que la partie vidéo de HTML5 va détrôner la partie vidéo de Flash : [url=http://www.interfacesriches.fr/2010/07/02/lindustrie-de-la-video-en-ligne-temoigne-en-faveur-de-flash/]L’industrie de la vidéo en ligne témoigne en faveur de Flash[/url]. Sephi-Chan
avatar Mabeille | 
ouai mise a part quelques machins qui ne se passent pas comme prévus ça lag un peu parfois (je suis sur i5 tout de même) l'idée de la démo est plutôt sympa. Mais je le redis dans flash il n'y a pas que la vidéo.
avatar kolibabe | 
bof et moi j'aime pas Arcade Fire… :-) ceci dit, ça rame sa race sur un MacBook classique, autant qu'avant avec le même genre de réalisation sous Flash. ceci dit l'idée de départ est sympa. j'attendrais de tester comparativement ça sur une nouvelle "grosse" machine web…
avatar pticoc | 
Je suis surpris que la démo ne se lance pas sur mon iPhone. Je pensais qu'il était justement supporter le html5 contrairement au flash... Peut être justement que cette démo en particulier est trop gourmande pour fonctionner sur un mobile tellement ils ont mit le paquet...?!
avatar nowonder | 
mon macbook pro i5 4go de ram plante 1 fois sur 2 lors de la lecture d'une vidéo Flash. Avec HTML 5 ou javascript, jamais. CQFD
avatar Ast2001 | 
Et je suis le seul pour lequel cette vidéo met mon processeur à genoux du début à la fin ? C'est la faute de mon Chrome sous Windows 7 ?
avatar ironseb | 
Mon MacBook C2D est complet à la rue sur cette démo. Et Jobs de nous expliquer que Flash est trop gourmand… Bref leur truc est vraiment loin d'être au point.
avatar Kako | 
Sur mon eeepc c'est pas fluide du tout, vivement que je commande mon macbook pro !!
avatar Macmmouth | 
[quote=pticoc]Je suis surpris que la démo ne se lance pas sur mon iPhone. Je pensais qu'il était justement supporter le html5 contrairement au flash... Peut être justement que cette démo en particulier est trop gourmande pour fonctionner sur un mobile tellement ils ont mit le paquet...?![/quote] Encore un qui a cru aux bobards de Steve Jobs. Comme c'est touchant.
avatar ricochet | 
Pas convaincu du tout ! Grâce à Istat Menus j'ai pu voir la montée impressionnante cpu, puis la roue infernale se mettre en route... iMac 3ghz (ATI Radeon HD 4850). J'ai forcé Safari 5 à quitter.
avatar mroo | 
Google des faux-Q, ils critiquaient le HTML5 sur Youtube il y'a qqs semaines...pfff
avatar Ast2001 | 
@mroo ils n'ont pas critiqué HTML 5, ils ont juste dit que pour l'instant l'expérimentation n'était pas concluante. Google est un défenseur acharné de HTML 5. Ce qui ne les empêche pas d'être réalistes et d'utiliser voire de promouvoir flash quand ils le jugent nécessaire.
avatar Chuckas | 
@ Macmmouth @ MacDays Rien a voir! ici il est claire que le processeur est solicité parfois avec une grande intensité, ce qu'on dis surtout avec html5 vs flash c'est que pour faire la même chose html5 est bien moins gourmand, personne n'a jamais dis que html 5 ne consommait rien non ? Alors oui html5 peut consommer beaucoup de processeurs dans certains grosses animations, mais il n'y a rien de plus normale.
avatar Sephi-Chan | 
[quote= mroo] Google des faux-Q, ils critiquaient le HTML5 sur Youtube il y'a qqs semaines...pfff [/quote] T'es vraiment pas un prix Nobel… Même si on supporte/aime une technologie, il faut la critiquer, sinon elle n'évolue pas (comme une marque qu'on aime) ! Ni Flash, ni HTML5 ne sont parfait. Flash a surement progressé grâce à la critique, et il en sera de même pour HTML5… Sephi-Chan
avatar mroo | 
@ Sephi-Chan : Le prix goncourt me suffit. Critiquer cette semaine, promouvoir la semaine d'après, c'est ce que j'appelle " passer du coq à l'âne" mon cher ami
avatar Sephi-Chan | 
@ Mroo : Mais tu as conscience que Flash et HTML5 ont chacun leurs qualités et leurs défauts ? Qu'est-ce qui te choque dans la promotion parallèle de deux technologies (qui ne sont pas opposées) en mettant en avant leurs forces respectives ? Sephi-Chan
avatar lennoyl | 
la video est très bien passée chez moi sous Webkit. Cela dit, j'ai commis l'erreur de cliquer sur la fenêtre principale et là, elle s'est mise devant les autres et je n'ai plus rien vu ^^ (je suis passé sur exposé pour voir la fin, mais les fenêtres n'étaient plus placées comme il fallait). Perso, même si j'ai apprécié la vidéo, je trouve inquiétant pour l'avenir du net que ça puisse ouvrir autant de fenêtres alors que l'option pour bloquer les popups était cochées. J'espère que les systèmes comme adblock se seront améliorés d'ici là. Après, je trouve que cette guerre HTML5/Flash est vraiment stupide. Les deux technologies n'ont pas à être en concurrence. HTML5 ne remplacera jamais Flash. Elle permettra juste d'éviter la lourdeur de Flash pour des taches simples (vidéos, effets visuels, ..etc..), mais pas pour des choses plus compliquées (où la lourdeur de Flash ne sera rien comparée à celle d'HTML5). Ces démos techniques sont sympathiques, mais comme la plupart des démos techniques, elles ne servent finalement pas à grand chose.
avatar NicolasO | 
De maniere interessante, la video est encodee en 2 formats et on accede a des videos differentes depuis Chrome/Safari ou Firefox... Vivement un WebM supporte partout.
avatar hartgers | 
J'ai trouvé la petite animation sympathique. Mon regret étant qu'on ait des fenêtres à la con qui s'ouvrent et pas plutôt un découpage astucieux de la fenêtre elle-même. Par contre je me demande comment on peut regarder ça sur un PC avec les hideux cadres de fenêtres de Windows 7... Je préfère les fenêtres sans bords de Mac OS, tiens !
avatar Almux | 
Oui... On peut aimer Flash... Mais là: c'est mieux! Pourquoi? Parce que Flash est supposé être "abouti" (depuis le temps), alors que l'HTML5 n'en est qu'au tout début! Cela me démange de retourner à l'école! Je me réjoui de mes prochains modules de cours en formation continue!! :)
avatar Orus | 
Ouahou, super sympa tout ça ! Bravo Google.
avatar Lecompas | 
@ Anthony N. @Sephi-Chan Défenseur de HTML5 oui, mais aussi de sa chapelle… voir le dernier paragraphe de [url=http://www.interfacesriches.fr/2010/08/31/google-a-lassaut-ditunes-et-dios-avec-html5/]cet article[/url]
avatar Oliange | 
Tout comme Apple et toutes les entreprises défendent leur chapelle. C'est à cause de ça qu'on a eu le MS, SD, xD, Compact Flash... C'est pour ça qu'on se mange du HDMI, DP, mini DP, USB, Firewire, eSATA... Chacun défend sa paroisse.
avatar Sephi-Chan | 
@Lecompas : Malgré le respect que j'ai pour Fred Cavazza sur certains sujets, si tu t'arrêtes à sa seule analyse des marques, tu n'es pas sorti de l'auberge. Sephi-Chan
avatar Lecompas | 
Mhm… moi, je ne m'arrête à rien. Je trouve juste ce point de vue intéressant. On en est encore aux hypothèses là. J'espère juste que ces «avancées» profiteront au plus grand nombre (si elles deviennent effectivement des standards). Qui vivra verra…
avatar expertpack | 
Tiens HTML/javascript seraient gourmand en ressources CPU. Steve aurait dit vrai ?
avatar BioSS | 
Le site tout moisi… Et pourquoi MacG ne montre pas les derniers sites flashs qui font 100 fois mieux en intégrant les photos facebook de ta vie, de tes amis, dans un film ou une histoire ?
avatar typhlo2007 | 
@BioSS : Comme quoi par exemple ? --- Sinon, ce site est génial ! dommage que street view n'est pas encore dispo pour la belgique (comme les voitures ne circulent que par beau temps, tout est ralentit ici xD)
avatar Vivid (non vérifié) | 
Bijour, C'est pratique pour piquer le code !

CONNEXION UTILISATEUR