09/03/10

jQuery, HTML5 et CSS3 sont le Biactol™ du Web ^_^v

Comment, jQuery va tuer Flash ? La question peut paraitre surprenante, mais force est de constater que Javascript a fait du chemin depuis  `window.open()` ! Les bibliothèques comme jQuery ou Prototype ont par ailleurs permis l’émergence de plugins, de scripts qui se sont attachés à améliorer l’expérience utilisateurs jusqu’à concurrencer Flash sur son terrain de prédilection : la création d’animation pour créer des interfaces immersives afin de capter l’attention du visiteur.

T’aime pas Flash ?

Pas vraiment. La raison est simple : lorsqu’on regarde la plupart des sites réalisés avec Flash, on s’aperçoit que tout ou presque se fait au détriment de l’expérience utilisateur (en terme d’ergonomie, d’accessibilité), tandis que la plupart du temps, les effets jQuery sont là pour apporter un certain confort à l’utilisateur.

HTML5 vs Flash ?

Probablement : HTML5 arrive doucement mais sûrement et les balises `audio`, `video`, `canvas` ainsi que l’enregistrement locale de données structurées seront des atouts qui permettront de guérir le web de ses problèmes de peau ;)

CSS3 vs Photshop ?

Encore plus surprenant, on peut même se demander dans quelle mesure les possibilités graphiques de CSS3  nous permettront-elles de se passer de Photoshop pour effectuer de nombreuses opérations comme les coins arrondis (`border-radius`), les effets d’opacité (`opacity`), les arrière-plan multiples, les ombres portées (`box-shadow`), les effets de textes (`text-shadow`), les polices exotiques (`@font-face`), les dégradés (`gradient`), les animations (effets de transition avec `transition-property`), etc.

Un peu de lecture pour la route



11 commentaires pour “jQuery, HTML5 et CSS3 sont le Biactol™ du Web ^_^v”

  1. Conradson dit :

    Je ne crois pas que JQuery va tuer Flash, je pense même que JQuery et les bibliothèque d’effets vont « dépérir » au fur et à mesure que le HTML et le CSS vont permettre de réaliser des effets de base.

    Pour ma part, le futur du web c’est tout en vectoriel, utilisation du SVG en CSS (comme déjà possible dans Safair/Chrome et Opera), et effets en CSS3 et HTML5.

    Restera le Javascript pour gérer le DOM, et des bibliothèque de sélecteur comme DOMAssistant seront alors suffisantes.

  2. jpvincent dit :

    oui HTML5 dans les browser + les librairies JS vont remplacer Flash et le cantonner à certaines spécialités comme des jeux, l’export en application bureau ou mobile

    mais pour avoir immédiatement HTML5, c’est pas gagné, et il n’y a vraiment que les faiseurs de librairies JS qui peuvent aider les développeurs d’aujourd’hui. Ironiquement, la plupart des fallbacks HTML5 seront forcément fait en flash :)
    http://jpv.typepad.com/blog/2010/01/features-html5-appel-aux-armes-pour-les-librairies-js.html

  3. Bruno Bichet dit :

    @Conradson — Je ne le pense pas :

    D’une part parce qu’au minimum, les librairies Javascript seront toujours nécessaires pour assurer la compatibilité des « effets » HTML5 et CSS3 (il y aura toujours un mauvais élève pour prendre la relève d’IE6).
    D’autre part, on ne parle pas du même web. Je pense que le vectoriel sera intéressant pour avoir des infographies, des graphiques ou tout autre effet visuel, mais les sites qui proposent du contenu (le web, c’est surtout beaucoup de texte) n’en feront sans doute pas un usage démentiel.

    @jpvincent — Merci pour ton lien : je viens de l’ajouter dans l’article ;) Contrairement à ce que laisse penser cet article, je pense que Flash a sa place dans certains cas, notamment en ce qui concerne les vidéos.

  4. Conradson dit :

    Une grosse partie des graphismes trouvé sur le web (hors photographie) est faisable en effet CSS3, et/ou en vectoriel. En terme d’optimisation, c’est énorme car une image vectorielle ne prend pas beaucoup de place, se compresse bien (vu que c’est des formules mathématiques) et est zoomable à l’infini. De plus, on peut encore optimiser en utilisant le Sprite CSS (tous les graphismes sur un seul SVG).

    Mais effectivement les bibliothèques d’effets ont de beaux jours devant elles, ne serait-ce pour la transition HTML4/HTML5, mais je n’ai pas parlé d’un futur immédiat : c’est plus une vision à 5 ans.

  5. Victor Brito dit :

    En ce qui concerne Flash, il est possible de réaliser du Flash accessible. J’invite à visionner la conférence d’Aurélien Levy et Sébastien Delorme sur WCAG 2.0, Flash, PDF et JavaScript lors de Paris Web 2009 et à considérer le carrousel en Flash de la page d’accueil de Groupama (site ayant obtenu le label Accessiweb niveau Argent en octobre 2009) pour s’en convaincre.

  6. Skoua dit :

    Avant que HTML5/CSS3 n’arrivent au niveau des sites du FWA ( http://www.thefwa.com/ ), on aura eu le temps de tester la beta de Internet Explorer 26. :D

    C’est vrai que ces technologies vont influencer l’utilisation de Flash au quotidien mais de là à le remplacer je pense que ça va prendre plus de temps qu’on ne le pense (5 ans MINIMUM, je dirais plutôt 10).

  7. kalooni dit :

    Dieu t’entende ! En tout cas je milite pour çà … Un de mes clients veut mettre des maps gmap dans du flash … je vois pas l’intérêt :(

  8. damino dit :

    Je ne suis pas developpeur mais si je fais un peu ma tambouille mais il me semble que pour certaines animations Flash reste pour le moment interessant. Je ne veux pas parler d’animations liées à l’ergonomie ni à la navigation mais bien à des animations graphiques pour illustrer un site.

  9. pixelboy dit :

    @Victor Brito : je ne comprend pas très bien comment le flash de la hp Groupama est accessible, j’ai beau regarde le code source, je n’y vois qu’une inclusion de flash classique, avec le fameux

    <

    p>Cette animation requiert le plug-in Flash et Javascript

    Tu veux bien développer ?

    Quant au débat qui nous intéresse ici :
    @bruno : t’es un peu démago pour le coup ^^
    @all: si l’on parle de plus en plus du html comme d’un flash killer, c’est parce qu’avec des demos comme celle-ci http://www.andrew-hoyer.com/experiments/cloth ou encore celle-ci http://www.lionel.me/blocs/ et http://anthonycalzadilla.com/css3-ATAT/index.html, html et JavaScript commencent à grignoter sur les plates-bandes de Flash. Mais, la force de flash réside dans sa portabilité, et ca, ca ne risque pas d’etre le cas pour les specs techniques html/css/js.

  10. Victor Brito dit :

    @pixelboy : Le carrousel en Flash de la page d’accueil de Groupama est accessible, en ce sens que les boutons Flash qui s’y trouvent sont accessibles et atteignables au clavier, lorsqu’on utilise la touche de tabulation et que les boutons en forme de pictogramme comportent une alternative textuelle explicitant leur rôle, alternative qui est lue par les lecteurs d’écran. Pour tester l’accessibilité d’une animation en Flash, je te recommande l’outil aDesigner (disponible uniquement sous Windows).

  11. KaKtusSs dit :

    Si Flash se résumait à la vidéo, l’audio et le dessin… Je suis toujours étonné de voir que les gens qui critiquent Flash à tort et à travers sont en fait ceux qui ne maîtrisent pas l’outil. Est-ce une réaction frustrée, un complèxe d’infériorité ? Avec Flash, tout comme avec l’HTML, on peut faire le meilleur comme le pire. La technologie n’est pas responsable de tous les maux, c’est la façon dont on s’en sert qui compte. Je ne suis pas persuadé que cette mode de vouloir éviter Flash à tout prix en le remplacant par du jquery (ou autre) soit plus accessible ou ergonomique. Autant je trouve que le flash est souvent utilisé à mauvais escient, autant je trouve que d’user et d’abuser de javascript dans tous les sens n’est pas une solution élégante. Pour l’html5, ce qui me dérange, c’est que la prise en charge est différente pour chaque browser. Alors que tout le monde se bat actuellement pour établir des standards ouverts, on est à contre-courant. Le développeur web sera-t-il condamné à vie à perdre son temps à rendre compatible son code avec tous les browsers ? Pour moi, une technologie qui me complique la vie plutôt que de me faire gagner du temps, je n’appelle pas ça une alternative sérieuse, mais une grande blague.

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »