Intégration des standards W3C sur un site Web existant: Comment ?

Intégration des standards W3C sur un site Web existant: Comment ?

Retour rapide sur les avantages des standards du W3C

  • Coûts d'exploitation moins élevés (particulièrement la bande passante)
  • Coûts de maintenance et de développement moins élevés
    • Séparation structure / présentation / comportement
    • Simplicité
    • Moins de tests
  • Technologies en évolution (surtout XML, intégration aux systèmes de données avec XSLT)
  • Meilleure accessibilité (handicapés, moteurs de recherche, gadgets)
  • Meilleure utilisabilité (téléchargement plus rapide)

Le passage du code propriétaire aux standards Web est aux interfaces Web ce que le passage de la programmation procédurale à l'orienté objet a été aux systèmes d'entreprise.

Il est important de bien comprendre la séparation de la structure, de la présentation et du comportement pour retirer le maximum des standards Web.

Structure : paragraphes, sections, listes, entêtes, tableaux

Présentation : polices, positionnement, alignement, couleurs

Comportement : cliques, chargement

Objectifs d'un projet de standardisation

Point de vue développeur

  • Garder vos acquis
  • Améliorer la qualité
  • Message aux architectes : le choix des technologies client est aussi importante que les technologies côté serveur
  • Établir des normes de développement d'applications Web
  • Mettre à jour les connaissances de l'équipe

Note : le mandat n'inclut pas l'amélioration de l'ergonomie du site, même si l'utilisation des standards peut aider.

Les outils du développeur

  • Les fureteurs les plus conformes aux standards + IE6
  • Extensions aux fureteurs : examineur du DOM, dévermineur javascript, renifleurs d'entêtes HTTP
  • Des validateurs de code HTML et de CSS. Au minimum ceux du W3C
  • Éditeurs : de Notepad à WSAD
  • Livres, références
  • Le Web!!!

La validation doit faire partie de l'assurance qualité

Choisir ses standards

HTML 4.01 :

  • Courbe d'apprentissage un peu plus courte
  • Plus simple à intégrer sur de gros sites existants

XHTML :

  • Intégration aux systèmes basés sur XML
  • Beaucoup plus évolutif
  • Renforce plus les bonnes pratiques
  • XHTML 1.0 est très bien supporté, mais pas XHTML 1.1

Le DOCTYPE : Strict, Transitionnel ou Frameset ?

  • Frameset : n'est pas conseillé pour des raison d'accessibilité et difficulté de maintenance.
  • Strict : renforce les meilleures pratiques, mais il est difficile de tout faire en Strict (popop).
  • Transitionnel : à utiliser si Strict est trop difficile. Mieux pour les grands sites avec peu de ressources. Si vous devez supporter en pixel parfait IE5 et IE5.5 dans une moindre mesure.

Pourquoi le DOCTYPE ?

  • Les fureteurs utilisent des moteurs de rendu différents selon le DOCTYPE
  • Affecte la vitesse d'affichage
  • Permet la validation

Choisir ses standards (suite)

CSS : Aucun fureteur n'est 100% conforme. La plupart de CSS1 et une bonne partie de CSS2 sont utilisables. Le choix d'un standard CSS n'est pas mutuellement exclusif. CSS2 est compatible de façon descendante au CSS1, simplifiant ainsi la validation.

Javascript : Presque tous les fureteurs sont compatibles avec les dernières versions de Javascript. Attention au DOM (Document Object Model) et Netscape 4.x (try catch). Pour certaines foncitonnalités, il est nécessaire de cacher certains scripts à certains fureteurs.

DOM (Document Object Model): certaines extensions propriétaires sont trop utiles et répendues pour être ignorés ex : "innerHTML". Elles n'affectent pas la validation du site, elles ne sont donc pas déconseillés complètement. Les fureteurs conventionnels supportent presques tous le DOM Level 1.

Notez qu'il est déconseillé de baser l'utilisation d'un site Web sur le javascript, particulièrement pour l'accès aux documents Web.

Choix standard vs fureteur planché : La question ne se pose plus lorsqu'on utilise les standards. L'important est de comprendre l'avantage de visuels différents selon des clients différents. Avec les standards W3C, chaque clients (fureteur conventionnel, voix, texte seulement, cellulaire, organisateur électronique, très vieux fureteur, imprimante, aura le rendu qui lui sera la plus approprié.

Pourquoi essayer d'avoir le visuel au pixel parfait quand le Web n'est pas fait pour cela, ou quand Netscape 4.X est trop lent et impose des limites?

Choisir son encodage : UTF-8 ou ISO-8859-1 ?

Présentation du site exemple

http://c-rdi.qc.ca : Le carrefour des ressources didactiques informatisé.

Point de vue code le site n'est pas si mal en point, car les pages sont simples et ne sont pas très lourdes.

Sans aucune modification, la validatrice refuse de faire son travail!

En ajoutant l'encodage, la validatrice du W3C donne beaucoup d'erreurs. Il ne faut pas perdre espoir!

Première étape : Retirer et remplacer les structures inutiles

Enlever:

  • Tous les tableaux
  • Les balises font, br
  • Remplacer b par strong et i par em
  • Les images spacer.gif
  • Espaces, tabulations et   en surnombre
  • Les paramètres dans les url doivent passer de & à &

Pour XHTML

  • Terminer les balises (chaque p a son /p)
  • Tout en minuscule
  • Les balises sans terminaison doivent se terminer par />
  • Les attributs doivent avoir une valeur (selected="selected")
  • Toutes les balises script et styles doivent se retrouver à l'intérieur de la balise head
  • <!--//<![CDATA[ //]]>--> pour les scripts

L'intégration à votre environnement serveur (PHP, Java, .NET ou autre) se fait de façon continue.

Attention aux gestionnaires de contenu!

Première étape : Validation et problématiques

  • Certaines structures sont manquantes p, div
  • Certains caractères sont illégaux en ISO-8859-1 (apostrophes, typographie)
  • Entités HTML
  • On découvre que plusieurs fonctionnalités prises pour acquises ne sont plus acceptables. Cela peut parfois causer des problèmes d'architecture.
  • Impact sur l'architecture
  • Dans certains cas, il est possible qu'un changement de standard soit nécessaire
  • Utiliser ou non une méthode décrite dans un standard : ne pas induire en erreur les utilisateurs qui possèdent des logiciels ne supportant pas cette méthode.
  • Souvent impossible d'utiliser la déclaration XML (IE4.5 sur Mac et mode "quirk" IE6). Nécessite l'ajout du meta http-quiv content-type;caracter encoding. Problématique pour les analyseurs XML.
  • Envoyer des pages différentes selon le clients (http user-agent) ? Coûteux, mais maximise les avantages pour les fureteurs plus récents.

Deuxième étape : Ajout de structure sémantique dans le HTML

  • Réfléchir à la structure du document, les entêtes, paragraphes, sections
  • Division du site en section
  • Les images décoratrices, sont-elles des fonds ? (background)
  • Ajouter les entêtes, div, span
  • Mettre en commentaires les images ne servant qu'à décorer

Quels sont les entêtes de votres site ?

Y-a-t-il de vrais tableaux ?

L'utilisation des paragraphes est-elle bonne?

Les listes

Pensez à la sémantique...

Note : l'ordre des éléments pourrait être amélioré.

Troisième étape : Ajout du CSS – Polices et couleurs

  • Créer le CSS
  • link ou @import ?
  • @media
  • Ajout de span et ou div si nécessaire
  • Organiser le CSS

Quatrième étape : Ajout du CSS – Positionnement et images de fond

Le modèle de boîte

Choisir le positionnement : Dans la mesure du possible, une modification de positionnement ou de grandeur d'un élément ne devrait pas demander une modification à un autre.

  • Absolu : le plus simple et le plus versatile. Peut parfois causer des problèmes d'accessibilité. La compatibilité avec les vieux fureteurs est assez bonne
  • Relatif : ne pas utiliser. Difficile à maintenir et rend tout dépendant.
  • Marges négatives : simple et fonctionne avec Netscape 4.x – Problème de dépendance entre objets.
  • float : le plus puissant, mais le plus difficile à utiliser

Attention au padding, les fureteur ne le gèrent pas tous de la même façon (mode quirk et mode standard, voir DOCTYPE)

Quatrième étape : Validation et problématiques

Interprétation différente des standards : particulièrement IE5.0 et IE5.5, mais aussi les autres

  • Modèle de boîte et les modes "quirk"
  • Rigidité de Mozilla / Netscape 7.x (MIME type de css, xml mal formé)
  • Compatibilité descendante pour Netscape 4.x (si nous voulons utiliser toutes ses capacités), IE4.5 pour MacOS9
  • Centrer les interfaces utilisateurs (nécessite plusieurs div pour assurer la compatibilité descendante à IE5)

Stratégie de tests

Tests unitaires

  • Validatrice W3C : Un minimum (HTML et CSS)
  • Tester au moins sur 2 ou 3 fureteurs (Mozilla, Internet Explorer, Opera)

Tests intégrés et acceptation

Étant donné la nature plus formelle de ces tests, il est possible de tester sous plusieurs fureteurs et de documenter ces tests

  • Internet Explorer 5.0, 5.5 et 6.0 sous Windows
  • Mozilla 1.0, et la dernière version disponible, sous Windows et MAC (+ Linux si le temps le permet)
  • Netscape 4.x, sous Windows ou Mac, pour s'assurer qu'un utilisateur ait accès à l'information
  • Si possible, Internet Explorer 4.5 sous MacOS9, Internet Explorer 5.0 sous MacOSX
  • Lynx, pour tester l'accessibilité

Il est évident que les plate-formes plus utilisés seront plus testés

L'expérience démontre que le développement d'un site avec Mozilla, mais extensivement testé sur Internet Explorer, donne de très bon résultats avec un minimum de tests.

La validation du site par la validatrice du W3C doit faire partie d'un critère d'acceptation

Trucs et astuces

Typographie

La section General Punctiation Block de Unicode contient plusieurs guillemets, apostrophes et tirets très utiles

  • Grand tiret (–): ne pas utiliser &#150;, mais plutôt &#8211;
  • Le tiret insécable (‑): &8209;, malheureusement non supporté par Netscape 4.x
  • Apostrophe (’): &#8217;

Utilisation de standards

  • En insérant une commande spéciale dans le CSS, il est possible de donner deux informations de modèle de boîte à IE5.0, IE5.5 et aux autres. Le fameux hack css. Celui-ci est très répandu.
  • L'utilisation de la méta commande CSS @print pour l'impression de documents
  • Feuille de styles alternatives
  • Menus et listes
  • Design de colonnes

Accessibilité – où commencer ?

Ressources:

  • WAI du W3C, priorité 1, 2 et 3
  • Validation: Bobby et Cynthia
  • Lynx: pourquoi pas? c'est un début

Pour commencer:

  • Utiliser des attributs alt significatifs
  • Utiliser avec modération les accesskey (attention, certains caractères sont déjà utilisés)
  • Utilisation de grandeurs relatives ou en pourcentage plutôt que fixes
  • S'assurer que le javascript n'est pas nécessaire à l'utilisation du site, et de façon plus générale l'utilisation de la souris ne doit pas être nécessaire
  • Ajouter un lien pour passer au travers les menus rapidement
  • Attention aux plugiciels

Copyright 2004 Benoit Piette, certains droits réservés. Remerciements à l'équipe du W3Québec.

Point suivant>> <<Point précédent >Table des matières <