HTML5 & CSS3 : vers un web de qualité et d'utilisabilité - 1ère partie Vers une maturité du Web ?

Forum néo Médias nouveaux Métiers

Eric Emery - Natural-Net

  • Créateur Natural-net : spécialiste développement front end & accessibilité.

 

  • HTML5Créateur d'un service de création de sites Web de qualité à destination des entrepreneurs de taille petite et moyenne :
    Site Internet Qualité.

Développeur Front End ?

  • Il produit le code HTML, CSS, JS ensuite proposé aux internautes pour composer les pages web,
  • Il est responsable de l'interface de restitution web, de ses interactions,...
  • Il se situe au milieu de la chaine de production des sites et dialogue avec tous les corps de métiers du chef de projet au développeur back-end en passant par le dircteur artistique et le responsable SEO

Naissance du web

  • 1994 : création du  World Wide Web Consortium (W3C) qui comprend différentes sociétés prêtes à créer des standards et à faire des recommandations pour améliorer la qualité du web.
  • Netscape1995 : essor du 1er navigateur graphique stable de notoriété : Netscape Navigator 1.0
Disposer de navigateurs graphiques a nécessité la prise en compte de 2 aspects : le contenu (au sens données) d'une part, l'aspect, l'ergonomie et l'interactivité d'autre part.

Séparer forme et contenu

Depuis les initiatives de création de langages et standards ont eu pour finalité

> Séparation complète de la forme et du contenu (pour préserver l'efficacité de chacun),
> Prise en compte des conventions,
> Amélioration de la "lisibilité" et du potentiel de compréhension pour "L'homme" & "La machine"

Html5

  • L'initiative HTML5 date de 2007.
  • Les premiers sites codés en HTML5 sont apparus en France dès 2010.
    • HTML5Sémantisation plus précise du code html des pages web (granularité plus fine),
    • Apparition d'éléments structurant comme le <header>, <article>,...

    Mais HTML5, c'est aussi une intégration "native" de fonctionnalités multimédias habituellement externalisées (<video></video>,...)

Extraits enrichis : Microformats

MicroformatsD'autres initiatives ont émergé en parallèle pour apporter plus de sens au code HTML des pages Web...

Microformats.org est apparu en 2005.

Exemple : hcalendar pour définir un événement

Ajouter de la sémantique au balisage HTML pour passer du statut d'informations "lisibles par les machines" au statut de "compris par les machines"...

Extraits enrichis : microdonnées

S'il est possible de trouver un vocabulaire commun pour présenter un événement, une personne,... Il est également possible de le faire pour une fiche produit... qui sera mieux interprétée et exploitée par les moteurs de recherche.

Résutlat de recherche Google sur une page contenant des microdonnées, cliquez pour accéder au résultat

Exemple : validateur d'extraits enrichis Google sur une fiche produit type

Les progrès de CSS

La mise en forme (théoriquement) indépendante du contenu est gérée par les Cascading Style Sheets (CSS). La souplesse de mise en forme s'est largement accrue avec CSS3.

  • Substitution des éléments externes aux pages web :
  • Réelle adaptation aux supports de consultation (mediaqueries) :
    • Smart-phone, Tablettes, TV connectée,
    • Nouveaux supports pas encore créés,...

1 contenu, n mises en forme

Mediaqueries

Le principe est d'appliquer le même code html à tous les supports de consultation et de ne modifier que le format de restitution en fonction du support de consultation.

  • L'Internet classique a pris place dans les smart-phone, tablettes (navigateur web classique),
  • En fonction de paramètres comme la largeur de l'écran, le média, on distribue des surcharges CSS.

Oui, Oui, Oui,..!

Recourir à ces technologies dès maintenant est un plus :

  • Cela débouche finalement simplement sur une meilleure utilisabilité pour l'homme et pour la machine
  • Toutes ces technologies peuvent être utilisées dès maintenant en respectant les principes
    • de dégradation harmonieuse,
    • de non obstructivité.

Il faut garder à l'esprit que des aménagements seront à effectuer dans l'avenir du fait de la non stabilisation de ces technologies.

Un web plus qualitatif ?

Finalement, ces nouvelles technologies permettent d'envisager un web plus qualitatif, répondant mieux à nos attentes.

Elles témoignent

  • D'une meilleure maturité du web,
  • D'une auto-organisation structurante du web.

En route pour l'industrialisation ?

Le web se normalise, gagne en qualité, se structure, acquière en maturité,... Cela ouvre des portes à une vision plus industrielle du Web avec une structuration de la filière à termes...

09/03/11 - Editorial de Jean-Marc Vittori # Les échos (lire l'article)

"Un peu comme si nous étions en 1911, deux ans avant qu'Henry Ford ait l'idée d'employer l'électricité pour faire tourner une chaîne de montage [...] La révolution industrielle d'Internet commence à peine."