Nouvelles démonstrations en HTML5

Christophe Laporte |
Concernant le HTML5, il a souvent été question de la balise vidéo qui offre la possiblité d’intégrer des vidéos et de se passer entre autres de Flash. Moins évoquée, la balise audio permet de faire également des choses assez intéressantes. David Humphrey de la fondation Mozilla a mis au point un lecteur audio, entièrement conçu en JavaScript et en HTML5, qui est capable d’appliquer en temps réel des filtres à de la musique.



Mieux encore, David Humphrey s’est également amusé à concevoir une animation 3D qui comme ce que proposent iTunes et bon nombre de lecteurs MP3 s’adapte à la musique.



Pour l’heure, toutes ces démonstrations fonctionnent à l’aide d’une version hackée de Firefox. À noter enfin cette animation de Spiderman assez impressionnante qui a été entièrement conçue en HTML5 et CSS3.


avatar jodido | 

les liens marchent po chez moi :(

avatar cdou59 | 

Je trouve ca quand même ... profondément débile excusez du terme , de vouloir a tout prix faire de l'animation riche et par exemple du jeu , en full HTML5 / JS / CSS. Le Html n'est PAS fait pour ca ... m'enfin c'que j'en dis moi hein ...
Ca me fait rire cette course contre Flash (qui est clairement visé par ce genre d'initiative). Coder un jeu en html/js ou coder un jeu en AS3 ... *soupir*

avatar 6nema | 

aucun liens actifs non plus...

avatar BAN | 
avatar Tucpasquic | 

Mettre des vidéos Flash pour parler HTML5, faut le faire :D

avatar Tucpasquic | 

"file:///var/mobile/Applications/0712D17E-FA00-4EBC-9EB6-40575B960D7F/MacGMobile.app/"

Problème de lien, effectivement.

avatar Almux | 

Et voilà! Juste pour faire râler les Flashfanboys! C'est malin!
Et bien, "ridicule" ou pas, cela montre que les possibilités sont là et qu'on va vraiment pouvoir se PASSER de Flash! Désolé cdou59... J'ai aussi beaucoup aimé faire plein de trucs jolis pour le web en Flash, mais il faut savoir évoluer avec son temps... même quand on devient vieux et que cela devient toujours plus difficile...

avatar liero | 

cdou59 : je suis d'accord avec toi sur le principe mais html ou flash permettent tout de même de créer facilement des jeux qui ne demandent pas beaucoup de ressources graphiques et bien sympa pour passer le temps (genre worldofsolitaire pour ceux qui aiment les jeux de carte ou des jeux de type asteroids ou mario).
En temps que développeur je préfère la version HTML5, JS, ...

avatar gto55 | 
avatar Ast2001 | 

@cdou59 Je suis sur la même longueur d'onde et je ne comprends pas un instant comment autant de personnes ici puissent imaginer que HTML 5 puisse remplacer le développement en Action Script.

Le modèle de développement est à des années lumière de celui de HTML + JS + CSS et il adresse d'un coup TOUS les navigateurs même les plus anciens pour autant que le player flash fonctionne dessus. Dans un cas on a un outil prévu dès le départ pour faire (entre autres) du vectoriel et de l'autre des couches et des objets (type canvas) plaqué sur une couche à la base servant à la présentation d'informations. Et puis HTML 5, c'est loin, voire très loin d'être une vraie norme...

avatar Christophe Laporte | 

lien corrigé

avatar GStepper | 

Très prometteur !!!

J'espère que cela va continuer dans ce sens !!! :)

avatar san lee | 

Je suis d'accord avec cdou59, le html5/css3/javascript, ce n'est vraiment pas fait pour ce genre d'animation ! Meme pour une banniere de site web, il vaut mieux utiliser du flash (quand la banniere ne demande pas de fonctionnalité).
Pour des lecteurs video, audio, etc ok, mais pour de l'animation pure, le flash reste quand meme bien meilleur.

avatar cdou59 | 

@Almux : "il faut savoir évoluer avec son temps" ...
Prend un cours d'action script 3 et tu verras que le Javascript tel qu'il est utilisé dans les demos HTML5 canvas fait doucement rire ...
Je suis absoluement daccord pour la non utilisation de flash pour : vidéo, site d'information etc, ou des effets visuels à la con (croyez pas que HTML5 va sauvez le web du michel du coin qui veut des animations immonde sur son site jaune moutarde hein , et pareil pour la pub au passage ... )

Mais arrêtez de vous borner l'esprit : Flash AS3 pour de l'application riche et du jeu ... la oui, 1 milliard de fois oui. En tant que développeur je n'ai pas envie de régresser, oui régresser a faire du JS sans POO. 'fin bon, les anti flash ont toujours raison donc bon :)

Et de toute façon, oui si il faut changer de techno je changerais, bien sur que oui .. sinon autant changer de métier ou de corps de métier !!!
Mais je changerais de techno si cela a un sens, désolé mais non je ne me vois pas faire de l'app riche ou du jeu en JAvascript (a moins que javascript évolue bien en ecmascript 4 ou meme plus comme son cousin actionscript) mais la encore les navigateurs seront a la ramasse (IE notamment)...

avatar captain13 | 

Et à quand Macgen en html 5 ?

avatar mediapress (non vérifié) | 

on pourrait aussi avoir des animations en flash ? histoires de voir aussi ses possibilités ?

non parce que là, si macgénération ne prend pas parti, il faut comparer et pas dire ce qu'il est possible de faire d'un logiciel et de ne pas montrer l'autre logiciel ?

non ?

les démos flash sont autrement plus professionnels que ça... :-)

avatar lepatron (non vérifié) | 

Bel effort de programmation, mais quand même, on est loin encore de flash.
J'ai essayé le truc sur mon iphone 3G et ca rame terriblement... mais bon, bel effort tout de même.

avatar Mabeille | 

@almux tu es démasqué [url]http://www.visionnart.ch/bio.php[/url]
y a marqué flash dans ton cv, t'es foutu :)
sans compter toute la série ADOBE hum hum...

avatar sebastiano | 

Je suis d'accord avec ceux qui estiment que les HTML & co ne sont pas fait pour ça ... mais faut voir dans cette news moins une utilisation normale de ces langages qu'une prouesse technique. Ce travail a été réalisé pour montrer jusqu'à quel point HTML5 peut être poussé. Un peu comme quand un constructeur automobile sort une Concept Car (et à ceux qui me sortiront que l'analogie auto/info n'est pas de mise : PROUT).

avatar youpla77 | 

Super la vidéo spiderman... L'anim prend entre 40 et 50% du cpu sur mon macbook, de plus la première fois ca rame et il manque des morceaux de bras ou de jambes à spiderman... La deuxième fois, c'est beaucoup mieux.
Quelqu'un peut essayer l'animation sur l'iPad ? Parcequ'en ayant vu une vidéo d'une autre démo HTML5 sur l'iPad ben c'est pas encore gagné...

avatar SimR69 | 

@cdou59> Le JavaScript est un langage orienté objet.

avatar Goldevil | 

Question bête. Steve Jobs a critiqué Flash notamment en écrivant que c'est une ancienne technologie qui ne supporte pas le multitouch. Bon, nous savons que c'est faux mais est-ce qu'en HTML5, il y a une mécanisme qui permet de gérer le multitouch ?

Autant l'architecture événementielle de Actionscript est très adapté à ce genre d'interface, autant je ne vois pas encore comment gérer en javascript par exemple deux doigts pour zoomer par exemple. Quelqu'un a déjà vu cela ?

Evidemment, ce genre de chose doit être gérée avec précaution par le développeur sous peine d'avoir un site inutilisable sur MacOS (à moins que quelqu'un a réussit à faire apparaître deux pointeurs de souris en branchant deux souris.)

avatar cdou59 | 

@SimR69 avec notion d'encapsulation, polymorphisme, héritage et tout le tintouin ? sans être obligé de faire de la bidouille (ou encore d'utiliser des library à la jquery ou consort ? ) je demande a voir :)

avatar lennoyl | 

Je ne comprends pas trop pourquoi des gens de la fondation Mozilla font déjà de la promo pour l'HTML5 alors que Firefox est, pour le moment, complètement à l'ouest dans ce domaine (par ex, le CSS3-man sous firefox, ce n'est pas une animation, c'est une succession d'images fixes qui changent toutes les 2 secondes ). Cela explique peut-être les videos en flash...^^

avatar Mabeille | 

@cdou59 ouai orienté objet mais de loin pas du niveau de java.

avatar SimR69 | 

+1 Sebastiano
Ce sont avant tout des proof of concept, et il ne faut pas oublier que les implémentations de HTML5 n'en sont qu'à leurs débuts. La course aux navigateurs aidera rapidement à optimiser les performances de ce genre d'applications natives.

Certes, le Flash peut faire beaucoup plus que tout ça, mais justement, c'est une technologie un peu trop polyvalente et souvent un peu trop bourrine pour les besoins qu'on a. En gros, quand on charge le plugin Flash c'est souvent un marteau pour écraser une mouche. Je veux dire par là que quand on peut se passer de l'utilisation d'un plugin propriétaire (une vidéo, une simple bannière), la solution native est souvent préférable.
Certes, le HTML n'a pas été conçu pour faire des animations. Mais à la base Flash n'a pas non plus été conçu pour lire des vidéos.

avatar TwFlash | 

Dans le fond, je suis de l'avis de cdou59.

Sauf que... Pourquoi "changer" quand on peut juste se créer de nouvelles compétences ? J'ai déjà commencé à affuter mon JS, je reste curieux sur les possibilités de l'HTML5... Il me tarde d'essayer de nouvelles choses avec.

Il vaux mieux savoir faire les deux ! Oui, je continuerai à conseiller à mes clients Flash, Flex et l'AS3 pour les jeux, pour les applications web et pour tout ce qui dépasse un certain degré de complexité, ou qui impose un travail en équipe. Il faut aussi compter avec AIR, qui je pense va prendre pas mal d'importance aussi.

Pour le reste : les sites, la vidéo (si HTML5 fais ses preuves et adopte un format universel), les petites animations... HTML5 !

Il faut s'attendre à voir une demande de travaux en HTML5 arriver en MASSE. Flash reste au top pour de nombreux aspect. Il ne va pas... mourir (ca me fait un peu rire) et je vais continuer à le conseiller pour de nombreux travaux.

Mais c'est le client qui choisira au final. Et j'ai pas envie de lui dire : "Ah, ça, je fais pas, désolé".

avatar GerFaut | 

@ cdou59 : intéressante ton argumentation. Alors, la question reste posée : quid d'un language à la Javascript aussi évolué qu'ActionScript, utilisable par des infographistes (c'est à dire qu'il ne faille pas forcément connaître le c ou le fortran pour s'en servir) et surtout non inféodé à une boite quelconque ? Le problème est qu'Adobe/Macromedia a une vieille expérience là dessus et que pour la rattraper il va falloir courir, courir... Et aussi qu'elle s'est bien gardé de rapprocher trop son ActionScript du JavaScript, ce dont il a été question à une époque et que tout le monde espérait. Tant que ce point ne sera pas résolu, Flash reste incontournable même si buggé et lourd pour certaines utilisations et même si certains s'escriment à démontrer le contraire et à essayer de restreindre son champ d'application.

avatar Mabeille | 

mon dieu a little jumpy???
la cata une image sur 4 et j'ai rien vu bref jumpy est un faible mot
alors tuer flash pour ça, je t'explique pas le gain extraordinaire
je préfère flash pour le coup... même si flash est propriétaire..... on s'en fiche pas mal à ce niveau de little jumpy..

avatar shenmue | 

Ce qu'il manque surtout c'est un Actionscript pour le HTML5. Il ne manque que ça. Car pour le reste vu la très faible optimisation des perfs de Flash (et i ne faut pas rêver il n'y aura pas de miracle par la suite), on ferait mieux d'attendre que le HTML5 évolue plutôt que de le dauber dans les coms à la vue de ce genre d"exploit".
Flash a beau être prévu "pour", c'est une vieille techno aujourd'hui qui plombe les perspectives concernant le mobile et n'améliore déjà pas franchement celles de nos micros habituels.
Tout cela sur HTML5 ressemble a du bidouillage, mais il ne faut pas se leurrer, Flash n'est plus la solution d'avenir.

avatar cdou59 | 

@GerFaut
Un langage quel qu'il soit, ne devrait pas être mis en main de non-développeur, c'est le meilleur moyen d'avoir des sites / applications lourdes non optimisées ou ce que tu veux. Et HTML 5 - js - css3 ne Réglera PAS ce soucis, c'est utopiste.
Comme il est utopiste de croire que toutes les boites web se forcent à optimiser chaque site sur chaque navigateur s'ils n'ont pas les ressources nécessaires ... le web est un enchevêtrement de "demande de client à l'arrache ... "

Vous allez bien rire quand le Web sera remplit de pub HTML5 que vous ne pourrez bloquer :) et qui rameront tellement que votre safari patinera.

Par exemple, l'animation spiderMan sous firefox (comme souligné par lennoyl) n'est qu'une succession d'images chargées brut de pomme dès l'ouverture de la page ... très optimisé hein ?

'fin bref, pour la vidéo, le contenu, ou encore l'audio OUi mille fois oui à l'HTML , mais l'animation pure / l'applicatif riche / le jeu , désolé mais JS reste un foutoir et un langage bien en dessous de l'as3.

avatar Frodon | 

@cdou59

Et pourtant l'animation 2D (Canvas) et 3D (WebGL) font partie des grands chantier d'HTML 5.

Pour AS 3 vs JS. AS 3 est un dérivé d'ECMAScript, tout comme JS. Donc si AS 3 sait faire ce qu'il sait faire, JS peut le faire sans problème.

Après y'a le JS de base, et toute les librairies, dont certaines qui ajoute des capacités objets (JQuery entre autres) et facilite grandement le développement en JS.

Mais l'animation ca ne se fait plus en JS en HTML 5. JS dans ce cas ne sert qu'à gérer les interactions et faire des mises à jour simple d'affichage. Certainement pas à faire de l'animation.

Pour l'animation c'est CSS 3 et Canvas.

avatar shenmue | 

@Gerfaut:"Le problème est qu'Adobe/Macromedia a une vieille expérience là dessus et que pour la rattraper il va falloir courir, courir..."

C'est vrai. Et pourquoi Apple ne se chargerait pas de cette tâche ?
Ils ont fait du bon boulot avec leur SDK du bon boulot avec le Webkit, ils ont sans doutes les compétences pour donner des outils ayant toute la puissance et la modularité de deux d'Adobe, mais basés en plus sur des technologies qui ne soient pas poussives.

avatar vernius | 

la démo spiderman tourne bien sous chrome , mais sous firefox c est lamentable, on dirait qu' on affiche une image toute les 2 secondes, enfin, on en est qu'au début

avatar SimR69 | 

@Mabeille> C'est saccadé sous Firefox, mais sur mon Chrome c'est très fluide. Donc tu vois, ça dépend des implémentations. Et comme le marché des navigateurs est fortement concurrentiel, les performances évoluent très vite. À l'inverse du Flash qui reste lourd et gourmand depuis très longtemps, là on aura des navigateurs qui voudront toujours faire plus vite les uns que les autres, et ce genre d'animations ne resteront pas saccadées très longtemps.

avatar vernius | 

je viens d essayer sur safari, ca marche mieux que chrome, j ai pas essayé sur opéra

avatar cdou59 | 

@shenmue
sproutcore ? ^^

avatar PA5CAL | 

L'animation de Spiderman en HTML5 pèse tout de même 3,3Mo (dont 1,5Mo de son et 1,6Mo d'images) pour une durée inférieure à la minute. J'espère qu'on peut mieux faire.

avatar ricchy | 

Spiderman est illisible avec safari Iphone, de plus il me quitte Safari.
Copie à revoir...

avatar sebastiano | 

@PA5CAL [05/05/2010 12:25]

"L'animation de Spiderman en HTML5 pèse tout de même 3,3Mo (dont 1,5Mo de son et 1,6Mo d'images) pour une durée inférieure à la minute. J'espère qu'on peut mieux faire."

C'est d'une évidence à faire peur, qu'on pourra mieux faire. Dans tout domaine de l'informatique il y a des pionniers aux bases branlantes.

avatar youpla77 | 

@ sebastiano : oui, tout ca va changer mais d'ici combien de temps ? Dans combien de temps HTML5 s'imposera, dans combien de temps tous les navigateurs supporteront pleinement HTML 5, dans combien de temps nous aurons des éditeurs HTML 5 permettant de faire ce type d'animation ?
Malheureusement AUJOURD'HUI c'est très loin d'être le cas et pour l'INSTANT pour faire ce genre de chose, c'est pas simple. Préparer l'avenir oui, mais pour l'instant c'est une partie du web qui n'est pas accessible.

avatar oomu | 

Canvas (le tag qui definit une zone de dessin) et jscript suffira à terme.

Css3 n'a pas pour but de remplacer flash.

avatar tyler_d | 

je m'en fou de cette gueguerre.
Mais je ne comprend pas les dev en Action Script qui ne comprennent pas qu'on puisse remettre en cause le flash et l'AS.
C'est vraiment oublier trop rapidement que l'histoire d'internet et de ces langages est très récente, et qu'il y a 10 ans à peine, personne ne connaissait l'AS....
Alors pourquoi est-il si dur d'imaginer que dans 5-10 ans, le flash n'existe plus ???

avatar youpla77 | 

@ tyler_d : les devs ne comprennent pas qu'on remette AS et Flash en question "maintenant" alors qu'il n'y a pas encore d'équivalent. Supprimer l'accès à une techno répandue (ce que fait apple) alors qu'on voit bien avec cet exemple de spiderman que l'HTML 5 n'est pas encore au point pour ce genre d'animation, c'est limite.
Si dans 5 ans, on peut faire la même chose que Flash aussi facilement, que ca marche partout ok, mais c'est pas encore le cas.

avatar sebastiano | 

@youpla77 [05/05/2010 12:56]

"@ sebastiano : oui, tout ca va changer mais d'ici combien de temps ? Dans combien de temps HTML5 s'imposera, dans combien de temps tous les navigateurs supporteront pleinement HTML 5, dans combien de temps nous aurons des éditeurs HTML 5 permettant de faire ce type d'animation ?
Malheureusement AUJOURD'HUI c'est très loin d'être le cas et pour l'INSTANT pour faire ce genre de chose, c'est pas simple. Préparer l'avenir oui, mais pour l'instant c'est une partie du web qui n'est pas accessible."

Exact, mais c'est pas pour maintenant ces normes, et il faut bien commencer un jour.

avatar tyler_d | 

@youpla77, je comprend, mais est ce qu'il ne faut pas "créer"/imposer une rupture pour les que les choses avancent ? Un peu comme la suppression de la disquette ? ou le non support d'un OS parce que trop "vieux" ?
Evidement, il y a dernière tout ça une histoire de gros sous...

avatar patrick mantout | 

c'est sur que c'est intéressant, mais franchement l'animation fait une taille de 430*330 pixels. Sous FireFox cela ne fonctionne pas du tout alors que j'ai un Mac de 3 Ghz et c'est oublier un peu vite que Flash ce n'est pas que de l'animation, c'est aussi du RIA de la connexion PHP, …
Dans les discussions, on confond Flash, Flex, AS3 et les bannières de pubs qui sont (pour la plupart) programmées avec les pieds et qui plombent littéralement le plaisir de surfer sur le Web.

Aujourd'hui, l'AS3 est très supérieur à l'HTML 5, peut-être dans 2 ou 3 ans, il sera dépassé, je ne sais pas. Mais en tout cas, aujourd'hui, c'est vraiment une grosse blague de le comparer à l'HTML 5.

avatar Un Vrai Type | 

@ youpla77 : Apple n' apas supprimé flash de mac OS X...
Apple dit juste que cette technologie ralentirai de manière sensible l'évolution de l'ère mobile.

Tout comme la disquette, le SCSI et l'ADB faisait chier son monde en 1998...

Bref.

Quand à aujourd'hui, mon plus gros client, une agence web, supprime flash des sites qu'ils nt vendu SOUS LE DEMANDE DES CLIENTS.
Je te rappelle que ces client n'ont pas d'iPad et que donc IL EXISTE D'AUTRE SOUCIS AVEC FLASH.

Pour en revenir à la news (qui ne concerne pas flash) merci de montrer autre chose que la balise vidéo :)
Ca change.

avatar Goldevil | 

@GerFaut : "Et aussi qu'elle s'est bien gardé de rapprocher trop son ActionScript du JavaScript, ce dont il a été question à une époque et que tout le monde espérait"

ActionScript et javascript sont tout les deux EcmaScript. Mais Actionscript correspond à une version plus récente et moderne qui apporte par exemple le typage des variables.

Mais il ne faut pas confondre la syntaxe du langage des librairies de base, du framework. Actionscript est bien plus orienté événementiel que Javascript et le framework de base est très riche et cohérent. En javascript on ne sait à quelle librairie AJAX se vouer sachant qu'elles ne supportent pas toujours très bien certains navigateurs et qu'elles sont parfois incompatibles entre-elles.

C'est toujours l'éternel problème. Un standard accepté par tous est difficile à obtenir et évolue difficilement car les différents contributeurs ont des intérêts différents voire opposés. Le HTML5 est un peu bloqué pour l'instant pour ces raisons là.
Par contre, une technologie contrôlée par une société, donc une équipe réduite avec des objectifs clairs peut faire des merveilles. Je pense par exemple aux frameworks Flex/Flash d'Adobe, à Cocoa d'Apple ou encore .Net de Microsoft. On a des API documentées, cohérentes et un environnement de développement de première classe.

avatar Goldevil | 

@shenmue : "Ce qu'il manque surtout c'est un Actionscript pour le HTML5".

Il existe et il s'appelle Javascript. D'ailleurs le moteur Javascript de Mozilla est basé sur une ancienne version du moteur ActionScript qu'Adobe a ouvert.

@shenmue : "Flash a beau être prévu "pour", c'est une vieille techno".
Pas du tout d'accord ! Mais alors pas du tout Flash a énormément évolué et permets plein de choses inaccessibles dans d'autres langages (binding de variables par exemple). Flash supporte pas mal de format très moderne comme le format video H.264 et le protocole AMF3 (ouvert) qui permet de considérablement accélérer la communication entre le client et le serveur.

Je n'ai rien de personnel contre toi, mais il faudrait que tu vérifie ce que tu avance.

Pages

CONNEXION UTILISATEUR