#1 : Les technologies qui continueront de façonner le Web en 2010

serie_techno_web_episode_1

L’année 2009 touche bientôt à sa fin. Le web est un organisme vivant en constante évolution, qui nous réserve encore de belles (ou mauvaises) surprises pour l’avenir. Dans tous les cas, la machine est en marche et certaines technologies web actuelles continueront de façonner le web durant l’année à venir.

Dans cet article je vais mettre en lumière deux « langages », déjà en place, en constant développement et de plus en plus utilisés, HTML 5 et CSS3. Cet article est le premier d’une série présentant les dernières technologies web.

1. HTML 5/CSS 3 :

HTML5 :

Vous en avez sûrement entendu parler, ici et là sur différents blogs et autres sites spécialisés. Quelle question, comment passer à coté de HTML 5 ? Il est dors et déjà adopté par de plus en plus de créateurs de sites depuis le début de cette année. En juillet dernier, le W3C annonçait l’abandon du développement de XHTML2 au profit de HTML5. Le langage HTML4 n’a pas connu de grande évolution depuis son lancement en 1997. Son successeur est doucement mais sûrement entrain de changer nos manières de créer un site.

Rappelons-le, HTML5 intègre directement des éléments structurel de base, comme les balises <header>, <nav>, <section>, <article>, <aside>, <footer>. Elles permettent de limiter l’abus de balises structurelles comme <div id= »header »></div> par exemple. L’image ci-dessous montre la structure de base de ce que peut-être une page écrite avec HTML5.

Structure du HTML5

HTML5 gère également mieux la relation avec Javascript et offre de nouvelle possibilité pour créer des applications web. Je pense notamment aux API audio et vidéo qui simplifient énormément l’insertion de médias. Les navigateurs ne sont pas tous encore au point, mais cela rend l’intégration de vidéo plus facile que jamais. Voici un exemple d’utilisation de la balise vidéo : <video width= »575″ height= »275″ src= »video_wdtrends.avi »>. Vous remarquerez l’absence de balise auto-fermante comme en XHTML. Elle peut être rajoutée sans souci mais n’est pas obligatoire pour que le code soit syntaxiquement correct.

Autre amélioration que je trouve vraiment très utile, le syntaxe du Doctype HTML5 : <! DOCTYPE html>. Vraiment simple et court, le W3C à fait le bon choix pour faciliter la tâche lors de l’écriture de la première ligne d’une page HTML.

Doctype

Consultez ce document utile, HTML5 Cheat Sheet, quatre pages en PDF pour connaitre toutes les balises disponibles dans HTML5 (y compris celles qui étaient déjà présentes dans HTML4).

CSS3 :

La norme CSS3 est en travaux depuis déjà plusieurs années. Avant même que la version 2.1 soit achevée, CSS3 était au cœur de différents débats sur le web. Quoi qu’il en soit, on trouve de plus en plus de sites avec un webdesign stylisés avec des feuilles de style CSS3. Cette nouvelle version contient de nouvelles propriétés pour réaliser des traitements graphiques qui nécessitait avant d’utiliser des images ou d’autres astuces visuelles. Voici quelques-unes de ces nouvelles propriétés :

  • Text-shadow permet de créer des ombres portées.
  • Border-raduis pour des coins arrondis.
  • Opacity pour la transparence d’un élément.
  • @font-face pour incorporer des polices de caractère.

Le plus intéressant sont toutes les propriétés concernant la mise en page et le positionnement. Elles sont toutes décrites présicement par le W3C : Presentation Levels, Template Layout, Multi-column Layout, Grid Positioning et Flexible Box Layout

Voici un exemple de site utilisant CSS3 :

Header avec CSS 3

Sur la capture ci-dessus avec Firefox 3.5.6 on peut voir fonctionner la propriété text-shadow sur le message de bienvenue. Sur la capture ci-dessous avec Internet Explorer 8 le texte est écrit sans la propriété CSS3.

header_sans_css3

On peut vraiment ce demander si l’internaute remarquera vraiment les différentes nouvelles mises en page. En tout cas pour le webdesigner, CSS 3 est un outil réellement bénéfique qui permet de vraiment programmer proprement et créer des designs pas vus auparavant.

Pour rester à la page CSS3.info permet de suivre l’actualité et l’avancement de la nouvelle norme de feuilles de style.

Conclusion :

Véritable révolution ou évolution mineure dans la façon de créer un site web ? Avec un contenu mieux organisé, une syntaxe plus claire et allégée, des standards pour les traitements graphiques, l’avenir du web semble être désormais en marche. Reste à savoir si l’évolution des navigateurs permettra d’exploiter totalement toutes ces technologies. Ils seront déterminants pour faire exploser le couple HTML5/CSS3 dans les prochains mois ou seulement dans quelques années…Affaire à suivre !

Pour en savoir plus sur le CSS 3 et le HTML 5 css3gallery.net propose plus de 70 tutoriels sur ces nouveaux standards.

Le prochain article de la série de traitera des librairies Javascript.

6 commentaires

Répondre Spartan Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*