Les enjeux d'un site web sont multiples et sa compatibilité ainsi que sa qualité comptent parmi les premiers critères de sa réussite, tant au niveau quantitatif (trafic, nombre de commandes) que qualitatif.
comment créer un sit web de qualité : Compatibilité pour faire site web Compatibilité au maroc il faut une creation site web qui répondre à un besoin Pour être de qualité, un site doit être à la fois Utile
Pour être de qualité, un site doit être à la fois Utile (répondre à un besoin) et Utilisable (par tous). Les principes universels de qualité peuvent être regroupés dans trois grandes parties, s'appliquant pour tous les sites web quel que soit leur thème (ludique, sobre, académique, artistique), leur concept (professionnel, commercial, associatif, amateur,...), leur objectif et le public visé.
Les langages du web (HTML, XHTML, XML, CSS,...) reposent sur des normes et des Standards. Les organisations de normalisation, comme le W3C, créent un consensus à travers ces groupes et ces experts pour maintenir et développer des principes architecturaux cohérents. Utiliser une norme permet la compatibilité du langage, de bénéficier des dernières innovations mais aussi de s'assurer de la pérennité des documents dans le futur.
Les normes actuelles sont HTML 4.01, XHTML 1.0, XHTML 1.1 et HTML5 (le W3C a arrêté ses travaux sur XHTML2 et les a recentrés sur HTML5), chacune de ces versions étant tout à fait utilisable à l'heure actuelle.
De ces normes découlent plusieurs avantages importants :
- Utiliser les dernières technologies standard vous assure un site web fait pour durer, tout au long de l'évolution des langages et des navigateurs
- La norme est universelle et votre site sera compatible avec tous les navigateurs respectant cette norme. Fini les codes propriétaires qui ne fonctionnent que sous certains navigateurs ou systèmes d'exploitation !
- Des coûts et du temps de maintenance réduits. en effet, la rigueur du XHTML permettent une lecture facile du code et une mise à jour très simple du design et de la mise en forme, celle-ci étant séparée du contenu.
- Un design accessible. L'accessibilité aux divers handicaps (visuels, moteurs, auditifs, ...) a été intégrée dans un nombre important de normes. Un site doit pouvoir être disponible pour des utilisateurs aux demandes toujours plus importantes (voir partie suivante)
- Allègement du code et accélération des pages avec la séparation du contenu (HTML) et de la présentation (CSS).
Le XHTML repose sur le HTML (il ne lui rajoute rien mais lui retire certaines balises et attributs) ni plus, ni moins. La grande différence du XHTML avec son jumeau HTML est que sa syntaxe ne souffre d'aucune souplesse.
Pourquoi alors avoir créé le XHTML si c'est pareil à du HTML ? Pour habituer les webdesigners à la rigidité syntaxique du XML. Mais le XHTML n'est pas uniquement destiné à servir de transition, il reste un langage à part qui suit lui-aussi des évolutions. HTML5 est reparti sur les bases de HTML avec un peu plus de souplesse et de simplicité dans la syntaxe.
La sémantique
La sémantique d'un objet, c'est son sens, ce pour quoi il est fait. Pour des questions d'Accessibilité (aux handicaps par exemple) et de maintenance , il est recommandé d'utiliser chaque balise de façon sémantiquement correcte.
Exemple imagé : Quand vous buvez une soupe, vous utilisez une cuillère à soupe. Après, si vous tombez à cours, vous pouvez toujours vous rattraper en utilisant une cuillère à café. Ca sera moins pratique mais vous arriverez quand même à boire votre soupe. Le problème, c'est qu'elle risque d'être froide avant que vous l'ayez terminée. Pour le (X)HTML, c'est pareil. Pour définir un titre, on utiilise la balise <h1>
, mais on pourrait arriver au même résultat VISUEL avec un <p font-face=7><b>
. Seulement, c'est plus long à écrire, cela ne signifie pas la même chose dans la structure du document, et lorsque vous aurez à changer tous vos titres, vous mettrez nettement plus de temps que si vous aviez simplement à modifier UNE feuille de style.
Dans le respect des règles, il y a non seulement l'aspect syntaxique, déjà souvent rapelé par divers sites, mais également l'aspect sémantique, trop souvent oublié. Il est tout a fait possible de faire un site rempli de tableaux pour la mise en page qui passera sans problème au validateur. Or un tableau est conçu initialement pour afficher des données... tabulaires (un forum par exemple) et non pour faire la présentation de sa page.
Feuilles de styles
L'idéal est d'abandonner toute balise de mise en forme pour n'utiliser que les les éléments porteurs de sens ( h1
, p
, nav
, footer
, etc.). Ainsi, fini les <font>
, <center>
et autres aberrations !
Evidemment, ces balises devront être associées à des feuilles de style pour pouvoir mettre en forme les pages.
Exemple : <div style="font-family:verdana,arial; font-weight:bold; color:red;">
ou mieux : <div class="erreur">
.
Note : Les balises <div>
sont des balises neutres servant de conteneurs, de blocs. Ils désignent une boite rectangulaire invisible.
Généralement, la balise <div>
est assimilée au concept de "calque" (surtout sur les éditeurs html comme Dreamweaver).
Un calque est un <div>
qui a été positionné avec la propriété position:absolute
, position:relative
ou position:fixed
.
Mais rien ne nous oblige à imposer cette propriété de position, on peut souvent s'en passer en plaçant les <div>
les uns par rapport aux autres grâce à la propriété margin
.
Pourquoi valider le code HTML ?
Le HTML 2 date de 1994 et la version 3.2 de 1996. Elles ont évolué peu à peu vers HTML 4 et XHTML 1.x qui sont des standards du web pour ne pas aller à l'encontre des principes d'Internet (libre accès aux données, interopérabilité). Le W3C a ainsi publié plusieurs spécifications que tout un chacun se doit de respecter pour rester au maximum dans le cadre de ces standards, qui garantissent d'être compris par les navigateurs.
Faire un site aux normes, revient à prendre en compte deux points :
- Dire quelle version de HTML ou de XHTML on utilise (On doit pour cela déclarer au début du document HTML un doctype)
- Se conformer à cette norme : on peut pour cela utiliser les Validateurs du W3C, en sachant que le Validateurs ne font pas tout : un document peut être valide sans pour autant être propre sémantiquement parlant.
Le validateur (X)HTML : http://validator.w3.org/ et http://validator.nu/
Le validateur CSS : http://jigsaw.w3.org/css-validator/
Bien entendu, rien n'oblige un développeur à se conformer à une norme, mais cela présente plusieurs avantages : assurance que le site ne sera pas dégradé dans le futur, affichage correct sur un plus large panel de navigateurs, meilleure accessibilité...