HTML 5 + CSS 3 = une révolution pour les interfaces web

Voilà 20 ans que le web existe et presque 10 ans que le HTML n’a pas évolué et propose toujours la même structure et les mêmes balises. 10 ans c’est beaucoup, c’est la moitié de la “vie” du web. 10 ans c’est beaucoup, surtout lorsque l’on constate les révolutions qui ont eu lieu dans les usages du web ces 5 dernières années (partage de vidéos, réseaux sociaux, infos en temps réel…). Pas étonnant que des technologies propriétaires (Flash) se soient imposées (notamment sur la vidéo et les RIA) et que d’autres s’installent tranquillement pour combler un manque (notamment Google Gears pour l’accès hors ligne).

Bref, il était temps que le marché se réveille et c’est (presque) chose faite avec l’arrivée à maturation de HTML 5 et CSS 3. Pour faire simple, disons que nous avons franchi le point de bascule et que la route qui mène à une adoption de ces nouveaux standards n’est plus si longue. Pourquoi est-ce important de se soucier de ça ? Tout simplement parce que ces nouvelles spécifications vont changer beaucoup de choses dans la façon de concevoir et d’exploiter les interfaces web, des changements qui vont fortement impacter les différents métiers de la profession.

Autant vous prévenir tout de suite : les explications qui vont suivre sont une tentative de l’auteur de résumer et vulgariser un foutoir pas possible (qui provoquent d’innombrables querelles d’experts depuis des années : HTML 5 is a mess. Now what?) sans pour autant prendre partie car de toute façon les choses semblent visiblement s’améliorer. Je ne donne que mon interprétation, vous êtes libre de proposer la votre.

Commençons donc par nous intéresser à cette nouvelle version de HTML et pourquoi s’est-elle imposée face à XHTML (pour une explication plus détaillée c’est ici : XHTML 2 vs. HTML 5, et là : Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip).

HTML vs. XHTML

Au commencement il y avait donc le HTML 4 dont les spécifications ont été publiées en 1997. Une légère évolution a été publiée en 1999 avec le HTML 4.01. Puis le W3C a décidé de miser sur le langage XML (plus sophistiqué et surtout extensible) en proposant une reformulation du HTML avec les balises du XML, à savoir le XHTML 1.0. Tout l’intérêt de cette reformulation est de pouvoir marier la simplicité du HTML avec la puissance du XML (et ses nombreuses possibilités d’évolution).

Sur cette lancée, le W3C a alors lancé le chantier XHTML 2 pour faire une réécriture complète des spécifications et poser de nouvelles bases pour un langage plus puissant, plus robuste, plus évolutif… bref, un langage qui propulserait le web dans une autre dimension sans toutefois assurer de rétro-compatibilité. Hé oui… car il faut bien faire table rase pour pouvoir redémarrer sur des bases saines. Et c’est bien là le problème : ne pas assurer la rétro-compatibilité était inacceptable pour l’industrie (et notamment les éditeurs de navigateurs) qui ont alors décidé de lancer des travaux indépendant sous l’aile du WHATWG (Web Hypertext Application Technology Working Group). Ce groupe de travail a commencé à travailler sur les spécifications des Web Applications.

Après un bras de fer de plusieurs années (et un constat d’échec pour l’équipe de travail sur les spécifications XHTML 2), le W3C a fini par réintroduire les spécifications du WHATWG et de créer un groupe de travail officiel sur le HTML 5 tout en abandonnant l’autre chantier (RIP XHTML 2).

Par élimination il ne reste donc plus qu’un seul prétendant au titre de remplaçant du HTML 4, d’autant plus qu’il a reçu le soutien de qui vous savez (Google Bets Big on HTML 5). Nous sommes donc semble-t-il arriver à un consensus de l’industrie sur des spécifications qui ne sont pas aussi ambitieuses que celles d’XHTML 2 mais qui ont l’énorme mérite de faire avancer les choses (souvenez vous qu’il n’y a pas eu d’évolution en 12 ans).

Qu’est-ce qui va changer avec HTML 5 ?

Pour faire simple disons qu’avec HTML 5 nous allons quitter l’ère du web des documents pour enter dans celle du web des applications. L’ambition de cette nouvelle itération est donc de supprimer les balises obsolètes, d’en remplacer certaines et d’en introduire de nouvelles afin de donner une structure sémantique plus cohérente aux pages web.

De nouvelles API vont ainsi standardiser un certain nombre d’interactions :

  • L’accès hors ligne et le stockage sur le disque dur (pour une exploitation en mode déconnecté) ;
  • L’édition en ligne, le drag&drop ;
  • L’accès à l’historique de navigation…

Bref, tout ce qui nécessitait le recours à javascript ou à des technologies propriétaires sera désormais “livré d’origine”.

La grosse nouveauté est donc de proposer un nouveau schéma de structuration des données qui va venir remplacer les éléments en bloc et en ligne (cf. HTML5 se dévoile) :

Le "content model" de HTML 5
Le "content model" de HTML 5

Les spécifications manquent de précisions pour se faire une idée de ce nouveau schéma, d’autant plus que de nouvelles balises structurantes comme <template> et <datatemplate> ont été introduites.

Gros changement également avec un jeu de nouvelles balises permettant de mieux définir le contenu : <header>, <nav>, <article>, <aside> et <footer> :

Les nouvelles balises de structuration du contenu de HTML5
Les nouvelles balises de structuration du contenu de HTML5

C’est donc une petite révolution puisque ces nouvelles balises vont permettre une structuration beaucoup plus propre des pages, surtout pour les sites avec beaucoup de contenus (blogs, portails…). Plus d’infos ici : HTML5 and The Future of the Web.

Notons enfin l’apparition de balises très intéressantes comme <audio> et <video> pour les éléments multimédias, <canvas> pour les dessins vectoriels ou encore <datagrid> pour les tableaux de données. Ces nouvelles balises permettront de réduire la dépendance à des technologies propriétaires comme Flash. Juste un dernier mot sur les formulaires qui vont avoir de nouveau types de champs <input> comme date, time, number, range, email, url, search, color

Je pense qu’il n’est pas faux de dire qu’avec HTML 5 la séparation entre contenu, structure et présentation sera encore plus facilement gérable.

Quelles nouvelles possibilités pour CSS 3 ?

Précisions que du côté des feuilles de styles, les travaux autour des nouvelles spécifications CSS 3 sont beaucoup moins perturbés. Cela permet donc d’avancer plus vite. Quoi que… j’ai dans mes archives des articles sur le sujet datant de 2004 et 2005 : Des formulaires standardisés, CSS 3 : des templates pour structurer vos pages web et Formulaires : quand les CSS 3 vous changent la vie.

L’essentiel des travaux autour des CSS 3 a été de standardiser des propriétés pour réaliser des traitements graphiques qui nécessitaient auparavant des astuces :

  • Border-radius pour les coins arrondis ;
  • Text-shadow pour les ombres portées ;
  • Transparency et Opacity pour la transparance ;
  • Animation et Transition pour les animations (cf. Nicer Navigation with CSS Transitions, à regarder avec les dernières versions de Safari ou Chrome)…

Bref, il y a beaucoup de nouveautés à découvrir ici : 7 New Essential CSS 3 Techniques Revealed. Tout l’intérêt étant de pouvoir se passer d’images ou d’astuces pour pouvoir réaliser ce que l’on souhaite. Illustration avec ces jolis boutons :

De jolis boutons sans image avec CSS 3
De jolis boutons sans image avec CSS 3

Encore plus intéressant, toutes les propriétés concernant la mise en page et le positionnement : Presentation Levels, Template Layout, Multi-column Layout, Grid Positioning et Flexible Box Layout.

Le changement va être aussi spectaculaire que radical : là où il fallait tout un tas de <div> imbriqués, d’images, de tableaux… pour arriver à la mise en page et au traitement graphique souhaité (donc en alourdissant le code source), nous aurons bientôt une syntaxe bien plus lisible grâce à ces nouvelles propriétés.

Quels bénéfices et pour quand ?

Je vous propose de récapituler ce que nous venons de voir : un contenu mieux structuré et défini, une syntaxe allégée, des traitements graphiques standardisés… tout ceci va permettre d’avoir un code source beaucoup plus propre. Ceci est particulièrement important dans la mesure où les pages ne sont plus faites à la main pour des utilisateurs humains, mais générées par des systèmes de gestion de contenu et exploitées à la fois par des humains et des agents intelligents (via les balises descriptives ou microformats).

C’est donc une authentique révolution à laquelle nous allons assister… dans quelques années ! Hé oui, car même si les spécifications sont là, leur implémentation est fonction du bon vouloir des éditeurs de navigateurs et du taux de renouvellement par les utilisateurs.

Aujourd’hui le marché est encore dominé par un IE qui risque d’aggraver encore son retard avec ces nouvelles spécifications. Vient ensuite Firefox qui évolue vite (grâce à une communauté très active) mais qui est tout de même fortement ralenti par l’inertie des utilisateurs (surtout lorsque les parts de marché dépassent les 30 %).

Il est certain que les choses sont beaucoup plus simples pour Safari, Opera ou encore Chrome qui peuvent avancer à leur rythme (lire à ce sujet : Opera 10, Chrome 4, Firefox 4 : Vers des plateformes sociales et applicatives).

Donc au final, l’impact ne se fera pas ressentir avant quelques années. Sauf si un éditeur trouve le moyen de faire avancer les choses au forcing (au hasard Google avec son futur Wave qui tournera bien mieux sur Chrome).

Google Wave, une application en ligne taillée pour HTML 5 et Chrome
Google Wave, une application en ligne taillée pour HTML 5 et Chrome

Par contre, une fois que le parc de navigateurs aura été renouvelé, j’anticipe un gros changement au niveau de l’industrie du web avec une montée en puissance de profils comme les architectes front office (l’équivalent des DBA ou des architectes systèmes) chargés de concevoir des interfaces web cohérentes et surtout performantes (notamment dans la gestion des styles).

De même, j’anticipe une véritable révolution pour les outils de prototypage rapide dont l’intérêt était limité du fait du format de sortie (du HTML de base que ne pouvaient pas exploiter les équipes de production) et qui vont fortement bénéficier de cette épuration du code source et de la séparation structure / contenu /présentation.

Bref, j’ai l’impression de me répéter, le web a de très beaux jours devant lui avec ces nouvelles spécifications qui vont tranquillement nous amener vers des contenus mieux structurés (sémantisés) et des applications en ligne plus performantes et simples à créer / maintenir.

63 commentaires pour “HTML 5 + CSS 3 = une révolution pour les interfaces web”

  1. Posté par Nicolas F. a dit : le

    Très bon article. HTML5 n’est malheureusement pas pour aujourd’hui…

  2. Posté par Bouziane B. a dit : le

    tout a fait d’accord avec “Nicolas F.” c’est un tres bon article bien détaillés mais malheuresement pour nous pas pour demain …

    deja qu’IE est encore majoritaire en terme d’utilisateur, et qu’il viennes a peine de sortir la version 8 et ne gere toujours pas le css2 a 100% !! donc le css3 …

  3. Posté par Ludovic a dit : le

    Ca fait rêver, surtout CSS 3 pour le webdesign !

    J’ai l’impression que la limite entre le rôle d’un webdesigner et celui d’un intégrateur/développeur va devenir de plus en plus flou. Déjà que ces 2 là ont du mal à s’entendre… Un intégrateur avec une bonne maitrise des règles d’ergonomie et d’usabilité pourrait quasiment piquer le job d’un webdesigner sur des chartes graphiques modernes, qui sont de plus en plus épurées et allant à l’essentiel.
    J’ai hâte !

  4. Posté par Martin a dit : le

    Ah l’HTML5… L’arlésienne du web, ca me fait un peu penser à ces voitures volantes qu’on devait avoir en l’an 2000…

    Ceci dit, ca a l’air au point, pour le web2.0, mais est-ce que ces spécifications ne seront obsolètes avec le web² ?

    Pour être toujours adaptées au web, il faudrait faire évoluer tout cela un peu plus vite !

  5. Posté par Frédéric CAVAZZA a dit : le

    @ Ludovic > Non absolument pas. L’intégrateur est en charge de transformer une maquette graphique (photoshop, fireworks…) en page HTML. Il n’y a donc pas du tout de recouvrement dans les missions de chacuns. Là où l’intégrateur va prendre du galon c’est dans sa capacité à monter une architecture front office cohérente avec notamment les fermes de CSS.

    @ Martin > Le Web² repose sur de totue façon sur de l’HTML donc pas d’impact à prévoir, peut-être les applications mobiles de réalité augmentée seront-elles plus simples à créer.

    /Fred

  6. Posté par Yoann Grange a dit : le

    Super article.

  7. Posté par Conradson a dit : le

    Pour moi, le futur du web serait le tout “vectoriel” (du moins pour la majorité des designs). A l’heure actuelle, il n’est pas possible sur les navigateurs les plus utilisés d’intégrer des fonds vectoriel en CSS (seul Opera semble l’autoriser).

    Un design vectoriel aurait au minimum l’avantage d’être redimensionnable sans cet effet de “flou” que l’on retrouve sur le bitmap. En plus il serait très rapide à charger, et très simple à modifier (vu que rien n’est “aplatit, on peut modifier une couleur ou supprimer une partie de l’image vectorielle sans l’altérer).

    En fait, en ajoutant à ça le sprite CSS, on pourrait avoir un tous les éléments graphiques d’un site web sur une seule image vectorielle, qui pèserait seulement une dizaine de kilo-octet.

  8. Posté par bruno bichet a dit : le

    Excellente synthèse de l’apport de ces deux langages pour les interface de demain ou d’après-demain. Avec html5 la séparation entre forme et contenu devrait pouvoir être mieux assurée, mais on pourrait presque défendre le contraire ^^

  9. Posté par Julien a dit : le

    Article très clair et bien fait.

    je rajouterais aussi la composante sécurité, notamment les problèmes de same-origin policy, et la fonction digest() pour les mots de passe dans les formulaires [1].

    Les problèmes restent toujours peu de support des browsers [2] et peu d’applis de blogs ou autre avec des modèles html5 par défaut.

    [1] http://www.w3.org/TR/2009/PR-xforms11-20090818/#fn-digest
    [2] http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers

  10. Posté par Je veux devenir Mon Propre Patron » RT : HTML 5 + CSS 3 = une révolution pour les interfaces web a dit : le

    [...] Lu chez Fred Cavazza : HTML 5 + CSS 3 = une révolution pour les interfaces web. [...]

  11. Posté par Ludovic a dit : le

    Pour répondre aux commentaires,
    HTML5 (et CSS3) est déjà là. Si vous naviguez sur firefox 3.5, safari, chrome dernière version, certains sites utilisent déjà certaines balises à notre insu (et pas que labelisez HTML 5 test),

  12. Posté par Le Zla a dit : le

    Excellente conclusion notamment, qui laisse bien apparaitre l’émergence de nouveaux métiers du web.
    Certains sauront s’adapter face aux nouvelles générations et aux nouvelles idées, d’autres deviendront réellement des dinosaures du web avec l’utilisation de technos obsolète (en espérant que les propriétaires en face partie), comme aujourd’hui quelqu’un qui vous ferait un site trop gifs et tableaux. Mais avec une véritable différence technique derrière et pas seulement conceptrice.

  13. Posté par HTML 5 + CSS 3 = une révolution pour les interfaces web > FredCavazza.net « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit a dit : le

    [...] HTML 5 + CSS 3 = une révolution pour les interfaces web > FredCavazza.netfredcavazza.net [...]

  14. Posté par caslantienne a dit : le

    Conradson >> Bonne remarque mais attention le montage à partir d’images vectorielles est adapté pour des créas graphiques de type vectoriel. Le design bitmap est lui adapté pour des créas graphiques de type bitmap (par exemple une interface basée sur des photos de paysages et/ou quoi que ce soit d’autre)

    Conclusion : les deux axes existent et vont continuer d’exister, tout dépend ce que l’infographiste produit et fait valider par le client :)

  15. Posté par links for 2009-09-10 « Ikan66 a dit : le

    [...] HTML 5 + CSS 3 = une révolution pour les interfaces web > FredCavazza.net (tags: HTML5) [...]

  16. Posté par nitro a dit : le

    Pour moi, le futur du web serait le tout “vectoriel” (du moins pour IE6-7-8). A l’heure actuelle et ce depuis 1998, il est possible sur les navigateurs de MS® d’intégrer des fonds vectoriel en VML et CSS (seul l’éditeur en ligne PAGEDITORPRO semble l’autoriser). Des vidéos sur le sujet sont visibles sur ce blog http://nitroblog.mediasites.fr ainsi que sur http://www.svg-vml.net.

  17. Posté par POST’IT#1:Du changement avec le HTML 5 et le CSS3 « Le petit Cookiie déballe son sac! a dit : le

    [...] HTML 5 + CSS 3 = une révolution pour les interfaces web [...]

  18. Posté par Tijuan a dit : le

    1- “presque 10 ans que le HTML n’a pas évolué et propose toujours la même structure:”
    -> Ce qui est dramatique pour un navigateur comme IE qui en 10 ans ne tient toujours pas correctement la route et qu’il reste LE navigateur le plus utilisé.(j’ai pas pu m’empêcher)
    -> ce qui annonce aussi une véritable exploitation de HTML5 et CSS3 pas avant 4-5 ans ou alors avant mais au détriment d’un grand nombre d’utilisateurs

    2 – L’intégrateur pur qui s’était vu obligé d’ajouter le développement à son arc il y a quelques années revient effectivement en force.
    Il n’y a qu’à constater l’augmentation significative de services d’intégration comme psd2html, psd2markup, gettemplate et autres.

    3 – Beaucoup de frustrations en vue, beaucoup de choses qui vont rester dans les placards ou dans les labs le temps que toutes ces belles choses soient supportées par les principaux navigateurs qui sont clairement des preneurs d’otage de l’innovation. (oui, je sais, c’est long d’implémenter des spécifications correctement)

    4 – Ca va peut être faire sauter certains au plafond, mais je suis assez favorable à un navigateur unique et open source (même si j’ai également des centaines de raisons d’être contre ma propre idée).

    Merci pour cette synthèse claire sur un sujet aussi bouillant.

  19. Posté par Du bruit dans l’moteur : Numericâble, Ping, Yebol… | motrech a dit : le

    [...] “HTML 5 + CSS 3 = une révolution pour les interfaces web” : un très bon billet de Fred Cavazza faisant le point sur les avancées de HTML 5. Quel rapport avec les moteurs de recherche ? Tout simplement les nouvelles balises de structuration des pages disponibles dans HTML 5 et qui permettront ainsi d’identifier facilement les entêtes, les pieds de page, les bloc de navigatione et de contenu : HTML 5 une révolution pour les moteurs de recherche ! [...]

  20. Posté par Frédéric CAVAZZA a dit : le

    @ Tijuan > “un navigateur unique et open source” coupons la poire en deux et proposons plutôt un moteur de rendu unique et open source (Gecko ? Webkit ?) que les éditeurs pourraient implémenter avec plus ou moins de fonctionnalités par dessus.

    /Fred

  21. Posté par Thommas a dit : le

    “Pour moi, le futur du web serait le tout “vectoriel” (du moins pour la majorité des designs). A l’heure actuelle, il n’est pas possible sur les navigateurs les plus utilisés d’intégrer des fonds vectoriel en CSS (seul Opera semble l’autoriser).

    Un design vectoriel aurait au minimum l’avantage d’être redimensionnable sans cet effet de “flou” que l’on retrouve sur le bitmap. En plus il serait très rapide à charger, et très simple à modifier (vu que rien n’est “aplatit, on peut modifier une couleur ou supprimer une partie de l’image vectorielle sans l’altérer).”

    ça s’appelle Flash :P

  22. Posté par Thommas a dit : le

    On sent que cet article s’inscrit dans une dynamique lancée il y a 5 ans, et que dans 5 ans, on sera toujours en train d’en parler sans vraiment avoir d’utilisation universelle et massive …

    C’est pour ça que je comprend qu’à Adobe ils ne soient pas inquiets du tout :-)

    D’ici à ce qu’on fasse l’équivalent du Flex ou du javascript ultra poussé en HTML5/CSS3 … on peut encore patienter et voir venir :D

  23. Posté par Matplane a dit : le

    Très bon article de synthèse pour notamment rattraper un retard d’information sur le sujet.

    Je souhaitais ajouter quelques remarques :
    - La proposition (utopique) d’un seul moteur de rendu, serait une révolution très intéressante et un bon compromis à la fois pour les développeurs et pour les éditeurs.
    - A propos du “forcing” pour la migration vers une nouvelle version ou un nouveau navigateur, s’il pourrait se faire avec Google et sa “Wave”, il me semble qu’il pourrait arriver d’ailleurs : Youtube, Dailymotion, Facebook. En effet, actuellement les utilisateurs sont de grands “consommateurs” de vidéos sur le web (plus que de services type Wave, à vérifier, ce n’est que mon avis) et cette migration forcée pourrait venir de la balise vidéo qui apporte beaucoup plus de confort et d’accessibilité qu’actuellement avec Flash. Si les plates formes décidaient de migrer leurs players vers la balise vidéo alors la migration pourrait se faire rapidement. Les démonstrateurs, notamment celui de Dailymotion (http://www.dailymotion.com/openvideodemo) sont véritablement impressionnants. Bien sûr, si les services RIA + la vidéo étaient mis en place en HTML, alors la migration pourrait se faire plus rapidement. Mais tant qu’on ne sait pas que nous réserve Microsoft pour IE9, il sera difficile de se livrer à des pronostiques.
    - Je travaille actuellement sur le maquetage HTML + Ajax d’une grosse application RIA (actuellement sous OCX IE) et bien j’utilise déjà HTML 5 : doctype et certaines fonctionnalités comme le drag and drop qui sont déjà disponibles : IE 7+ FF 3.5 Safari 4 Chrome 4 Opéra 10. C’est un véritable plaisir de pouvoir programmer de telles fonctionnalités sans avoir recours à une framework JS lourde. Tout ceci pour dire qu’on peut déjà commencer à explorer tranquillement les fonctionnalités de HTML 5.

  24. Posté par Geeks Links du 8 septembre au 10 septembre | Les Incompris a dit : le

    [...] HTML 5 + CSS 3 = une révolution pour les interfaces web – [...]

  25. Posté par Frédéric CAVAZZA a dit : le

    @ Matplane > Attention je pense que la réelle difficulté pour la vidéo en ligne ne vient pas du player mais plutôt des serverus d’encodage et de streaming, sur ce dernier il y a d’ailleurs bataille entre Adobe et MS.

    /Fred

  26. Posté par Matplane a dit : le

    @ Fred > A mon avis il y a deux paramètres à prendre en compte pour le service de la vidéo en ligne :
    - le playeur (Flash / Silverlight / HTML5+JS)
    - le fichier video

    Si pour Flash on a du flv, pour le moment on peut mettre du ogg pour HTML5. Côté W3C, si j’ai bien suivi, la question du format du fichier pour la balise vidéo est plutôt libre, il suffit juste qu’il soit compatible avec un codec disponible côté client. Si on met un fichier video Open Source (ogg) les plates-formes de vidéos ne peuvent être gagnante. Certes il faut peut être réencoder ce qu’a envoyé l’utilisateur, mais c’est déjà ce qui se passe actuellement. Vu qu’ils ne se sont pas décidés à imposer un format de fichier vidéo pour cette balise, il faudra encoder le fichier plusieurs fois pour proposer différents formats et donc les héberger afin d’être sûr que le client puisse lire la vidéo.

    Je ne vois donc pas très bien le frein à l’expansion de cette balise (à part IE) et j’y vois même un moteur au développement du HTML5. J’ai l’impression que tout le monde aurait à y gagner d’enfin abandonner flash. Cependant, je ne pense pas qu’Adobe va rester les bras croisés…

    En définitive je suis pas sûr de bien comprendre ton argument contraire.

  27. Posté par fredcavazza a dit : le

    @ Metaplane > Nous disons la même chose : la bataille va se faire côté serveur et non côté client. Le gros frein est à mon avis les capacité de montée en charge et les garanties de disponibilité.

    /Fred

  28. Posté par Instant T, focus n°16 | Maxime-Viry.com a dit : le

    [...] HTML 5 + CSS 3 = une révolution pour les interfaces web, [...]

  29. Posté par toto a dit : le

    ça s'appelle SVG

  30. Posté par eleg a dit : le

    « dernier mot sur les formulaires qui vont avoir de nouveau types de champs <input> comme date, time, number, range, email, url, search, color… »

    @fred : Quand on a utlisé XForms, on pleure de cette pauvreté-là…

  31. Posté par Laurentj a dit : le

    Attention, il faut le préciser : XHTML n'est pas abandonné. La spécification de HTML5 est valable aussi pour XHTML5. Elle précise la différence syntaxique entre HTML5 et XHTML5. L'avantage de XHTML5, c'est qu'on pourra l'utiliser en y intégrant d'autres langages XML comme on le fait déjà avec XHTML 1.0 : MathML (affichage de formules mathématique), SVG, XForms etc…

  32. Posté par Jean-Baptiste Bourgoin (jeanbaptistebourgoin) 's status on Sunday, 13-Sep-09 13:24:35 UTC - Identi.ca a dit : le
  33. Posté par La web semaine 2009.37 « Clément DORION a dit : le

    [...] FredCavazza.net – Article sur HTML/CSS3 : Les futures évolutions du développement web. [...]

  34. Posté par Web semaine : 2009.37 « ClemBook a dit : le

    [...] FredCavazza.net – Article sur HTML/CSS3 : Les futures évolutions du développement web. [...]

  35. Posté par Gourmet a dit : le

    Bravo !
    On voit la main du maître.
    Simplement une remarque non pas sur l'article mais plus généralement sur le HTML.
    L'immense avantage du XML est qu'il doit être VALIDE voire conforme à un schéma.
    Le HTML n'a jamais eu besoin d'être validé et encore moins d'être conforme à un schéma ou une DTD (a quoi sert une DTD dans l'entête alors ?).
    En conséquence le HTML s'avère inexploitable, sauf à grand renfort de beautifiers, pour une recherche structurée.
    Si c'est la même chose en HTML5 *** pour-des-raisons-historiques *** je ne vois pas vraiment où est le progrès !

    db

  36. Posté par Lomig UNGER a dit : le

    salut, merci pour cet article très clair et au bon niveau de vulgarisation. Je n’ai ni les connaissances, ni le temps nécessaires pour suivre cela, et ton article me permet de me tenir à jour. Génial !

    Une question : CSS3 intègre-t-il une gestion des polices un peu plus détaillée ? J’avais cru comprendre cela, mais je n’ai pas vu trace de ça dans ton article. Le fait de n’être plus limité par les polices des différents OS est une richesse qui serait bien appréciable pour les webdesigners, non ?

  37. Posté par Caroder a dit : le

    Il est dès aujourd'hui possible d'implémenter HTML5 et CSS3 dans un site, compatible avec de multiples navigateurs et ainsi être prêt pour cette future (r)évolution.

    Pour ceux qui souhaite apprendre les techniques HTML5 et CSS3 pour les implémenter dès maintenant : http://dreamgratuit.canalblog.com/archives/2009/0

  38. Posté par WebGL, le nouveau standard de la 3D sur le web > FredCavazza.net a dit : le

    [...] En août, l’actualité s’accélère avec l’annonce du lancement de WebGL, un langage permettant de standardiser la 3D dans les navigateurs : Khronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet. Pas n’importe quelle 3D puisqu’il s’agit de 3D calculée par votre carte graphique et non votre processeur (de la 3D dites “accélérée”) et pas n’importe quelle standardisation puisque ces éléments 3D utiliseraient la balise <canvas> de HTML5 (cf. HTML 5 + CSS 3 = une révolution pour les interfaces web). [...]

  39. Posté par WebGL, le nouveau standard de la 3D sur le web « LocalLab : Foire aux Infos a dit : le

    [...] En août, l’actualité s’accélère avec l’annonce du lancement de WebGL, un langage permettant de standardiser la 3D dans les navigateurs : Khronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet. Pas n’importe quelle 3D puisqu’il s’agit de 3D calculée par votre carte graphique et non votre processeur (de la 3D dites “accélérée”) et pas n’importe quelle standardisation puisque ces éléments 3D utiliseraient la balise <canvas> de HTML5 (cf. HTML 5 + CSS 3 = une révolution pour les interfaces web). [...]

  40. Posté par Community-Chest » Bookmarks for septembre 12th from 19:47 to 19:55 a dit : le

    [...] HTML 5 + CSS 3 = une révolution pour les interfaces web > FredCavazza.net – Voilà 20 ans que le web existe et presque 10 ans que le HTML n'a pas évolué et propose toujours la même structure et les mêmes balises. 10 ans c'est [...]

  41. Posté par Black hattitude a dit : le

    La question est : est-ce que IE 6 supportera le HTML 5 ?

    Non je rigole :)

  42. Posté par MyToS a dit : le

    @fred > “proposons plutôt un moteur de rendu unique et open source (Gecko ? Webkit ?)”
    C’est évidemment déjà le cas, Safari + Chrome, tout deux utilisé sur iPhone et Android. le WebOS de Palm est lui aussi basé sur Webkit, et BlackBerry a racheté l’éditeur du navigateur sous Webkit de sa plateforme. Ce n’est bien entendu pas gagné vu que Windows Phone proposera IE, Nokia Maemo sera sous Fennec (Firefox pour mobile). Chrome/Safari ayant du mal a percé en desktop, on se retrouve avec un situation encore pire qu’il y a 10 ou 5 ans et les deux moteurs de rendu a gérer (IE + Gecko -> Netscape, Mozilla, Firefox, …) pour arriver aujourd’hui et demain avec au 3 vu que WebKit vient s’y rajouter.

    Je ne parlerais même pas de cette soi-disante norme HTML5 qui déjà en place comme tu l’a dit, et qui commence déjà a partir en sucette à la vue d’une API WebApp iPhone, et ses attributs HTML5 propriétaire iPhone et Safari.
    La guerre de celui qui a le plus gros pénis ne sera pas réglé par le W3C, qui a déjà montré mainte fois son inefficacité à faire adopter ses normes par les éditeurs… et quelque part tant mieux, c’est aussi a cause de ça qu’intégrateur HTML reste un vrai métier :)

  43. Posté par Kimoja a dit : le

    avec l'arrivé de google frame, le HTML5 et les css3 , vont bientôt atterrir sur nos écran.
    Y a plus qu'a tout réapprendre :)
    Très bonne articles!

  44. Posté par Les 6 profils du digital planner a dit : le

    [...] capables de vous expliquer le Web Squared ? Ou même simplement les révolutions induites par le html5 et CSS3 ? Moi je n’en connais pas. Et pour ceux qui pensent que ce n’est pas important, que ce [...]

  45. Posté par @_none00 a dit : le

    wave tournerai sous html5… fort à parier que de la puissance annoncée de cette appli suivra l'accélération de la mise en place du combo html5 css3

  46. Posté par lordjack a dit : le

    article genial merci

  47. Posté par As ArtNum » CSS CSS CSS a dit : le
  48. Posté par Html 5 & CSS 3 « Portfolio d'un Web designer – Quentin Simon a dit : le

    [...] Pour ceux qui ne seraient pas à l’aise avec la langue de Shakespeare, voici un article moins complet que les précédents mais quand même bien fait : http://www.fredcavazza.net/2009/09/10/html-5-css-3-une-revolution-pour-les-interfaces-web/ [...]

  49. Posté par Julien Gouesse a dit : le

    Thomas, t’es bien gentil avec ton Flash/Flex/ActionScript d’Adobe mais c’est 15 fois plus lent que des technologies pas strictement liées au web comme Java/JavaFX quand il s’agit de faire du calcul, benchmark à l’appui. L’implémentation propriétaire de Flash est moins stable hors de Windows et inexistante sur téléphone mobile.

  50. Posté par Interfaces riches > Réalité augmentée avec Silverlight 4 (et Unity 3D) a dit : le

    [...] semblerait donc que la prochaine étape soit de faire de la réalité augmentée sans plug-in avec HTML5 et WebGL. Mots-clés : réalité augmentée, [...]

  51. Posté par FredCavazza.net > Best-of 2009 a dit : le

    [...] HTML 5 + CSS 3 = une révolution pour les interfaces web ; [...]

  52. Posté par CSS3 : cacher une image dans HTML | Un café, mon bloc note... a dit : le

    [...] articles traitant de CSS3 : Expliquez-moi… Ce qu’apportera CSS3 HTML 5 + CSS 3 = une révolution pour les interfaces web Transformations en CSS3 Ombre portée CSS3 Ce que nous réserve CSS3 en [...]

  53. Posté par jpvincent a dit : le

    la geoloc, le drag&drop depuis le bureau, l’upload multiple, le tag video … tout ça n’est pas implémentable facilement et à mon avis il n’y a que les librairies JS qui peuvent permettre une transition en douceur en assurant la rétrocompatibilité :
    http://jpv.typepad.com/blog/2010/01/features-html5-appel-aux-armes-pour-les-librairies-js.html

    par contre concernant la partie markup qui est un préambule à toute autre implémentation HTML5, on peut déjà commencer dès maintenant en production, c’est ce que j’ai fait récemment :
    http://jpv.typepad.com/blog/2010/02/migrer-un-site-de-production-vers-html5.html

  54. Posté par Aux Armes Citoyens ! | Blog-Entrenet.com a dit : le

    [...] de l’HTML 5 : Les capacités accrues de cette version de l’html seront suffisantes pour développer des applications Web-Only. [...]

  55. Posté par Adobe Flash Platform and more! « dkor a dit : le

    [...] ¬ WebGL, le nouveau standard de la 3D sur le web, by Fred Cavazza, on 14th september 2oo9. ¬ HTML 5 + CSS 3 = une révolution pour les interfaces web, by Fred Cavazza, on 10th september [...]

  56. Posté par Diz_m a dit : le

    Le HTML 5 va permettre à tout a chacun de créer un site web avec un code et des balises simplifiées.

  57. Posté par FredCavazza.net > Vivement la fin du conflit entre Apple et Adobe a dit : le

    [...] les possibilités offertes par HTML5 sont grisantes (HTML 5 + CSS 3 = une révolution pour les interfaces web) mais il a fallu 10 ans au W3C pour passer d’HTML4 à HTML5. D’ici à ce que sorte [...]

  58. Posté par HTML 5 et CSS 3 en action « Trois Point Zéro – Actualité, ressources, tutoriels autour du web a dit : le

    [...] Un vieil article de Fred Cavazza sur les changements auxquels on doit s’attendre avec Css 3 et HTML 5 [...]

  59. Posté par FredCavazza.net > Mes 11 prédictions pour 2011 a dit : le

    [...] déjà eu l’occasion de m’exprimer sur les bénéfices d’HTML 5 (HTML 5 + CSS 3 = une révolution pour les interfaces web et les articles publiés sur InterfacesRiches.fr). Avec l’avènement des navigateurs de [...]

  60. Posté par La vie des intégrateurs, chapitre III : puis vint Html5 | Les intégristes a dit : le
  61. Posté par InterfacesRiches.fr > Flash et HTML5 ne sont pas concurrents a dit : le

    [...] et CSS3 offrent ainsi de nombreuses possibilités pour remplacer Flash par du code standard (HTML 5 + CSS 3 = une révolution pour les interfaces web), mais il faudra avant cela régler le problème de fragmentation des navigateurs : Les [...]

  62. Posté par InterfacesRiches.fr > Adobe lance Edge, un outil d’animation HTML5 a dit : le

    [...] Avec ce produit Adobe matérialise la posture qu’il défend depuis le début : Soutenir à la fois Flash et HTML5. Je suis en tout cas particulièrement enthousiasmé par cette Preview Release (je pense que vous l’aviez compris) et suis persuadé qu’elle peut potentiellement faire comprendre au marché à quel point les interfaces web que nous avons connues ces dix dernières années vont être amenées à évoluer (cf. HTML 5 + CSS 3 = une révolution pour les interfaces web). [...]

  63. Posté par Adobe recentre Flash sur le jeu et la vidéo HD « « InterfacesRiches.fr InterfacesRiches.fr a dit : le

    [...] grandement simplifier la création d’interfaces plus sophistiquées, surtout avec CSS3 (HTML 5 + CSS 3 = une révolution pour les interfaces web). Pour vous éviter une longue explication, disons qu’avec CSS3 et HTML5, le HTML va [...]