[Tutoriel Texte + quelques images]La validation W3C

Si vous avez des tutoriels à proposer c'est ici.

Modérateur: Mika56

Modérateur Niloo
Avatar de l’utilisateur
Messages: 1928
Enregistré le: Lun Aoû 25 2008 : 20:19
Localisation: Caudan (56)
Id Niloo: 2123

[Tutoriel Texte + quelques images]La validation W3C

Messagepar Mika56 » Mar Fév 10 2009 : 16:59

Bonjour,
Aujourd'hui, je vais vous apprendre à valider votre site aux normes W3C.

Qu'est-ce ?
Le W3C, World Wide Web Consortium, est un organisme crée en 1994 par Tim Berners-Lee. Le W3C est là pour une chose : des normes !
Le W3C a défini les normes de :
* ATAG (Authoring Tool Accessibility Guidelines)
* AWWW (Architecture of the World Wide Web)
* CC/PP (Composite Capabilities/Preferences Profiles)
* CGI (Common Gateway Interface)
* CSS (Cascading Style Sheet / Feuilles de style en cascade)
* DOM (Document Object Model)
* GRDDL (Gleaning Resource Descriptions from Dialects of Languages)
* HTML (HyperText Markup Language)
* MathML (Mathematics Markup Language)
* OWL (Web Ontology Language)
* RDF (Resource Description Framework)
* SMIL (Synchronized Multimedia Integration Language)
* PNG (Portable Network Graphics)
* RDFa (Resource Description Framework for HTML)
* SML (Service Modeling Language)
* InkML (Ink Markup Language )
* URL (Uniform Resource Locators)
* URI (Universal Resource Identifiers)
* XML Signature
* XML Encryption
* XProc (XML Pipeline Language)
* XML Processing Model
* SVG (Scalable Vector Graphics)
* SOAP( Simple Object Access Protocol)
* XForms
* XHTML (eXtensible HyperText Markup Language)
* XML (Extensible Markup Language)
* XPath
* XQuery
* XML Schema
* XSLT (Extensible Stylesheet Language Transformations)
* EXI (Efficient XML Interchange)
* HTTP (HyperText Transfer Protocol)
* PICS (Platform for Internet Content Selection)
* POWDER ( Protocol for Web Description Resources )
* XPointer (XML Pointer)

Ici, je vais vous parler de l'(x)HTML et du CSS. Après tout, vous avez votre site, et vous etes content, mais savez vous une chose : ?
Tous les navigateur n'utilisent pas le même moteur de rendu; Firefox utilise Gecko, Internet Explorer utilise Trident, Opera utilise Preso, et Sofari utilise KHTML (aussi appelé WebKit); ainsi, chaque navigateur affiche différemment chaque site (pas toujours très visible). L'un des moyens d'afficher la même chose partout, c'est de respecter toutes les normes.
"Mais les normes, y'en a plein non ? :? "
Et oui, mais bon, on ne va pas passer notre vie à les apprendre. Certains sites / plugins permettent de voir toutes les erreurs, et proposent parfois des correction.
Pour commencer, on va aller au plus logique : le correcteur W3C.

Correcteurs W3C
Le correcteur W3C html est disponible ici, le CSS ici.
La validation HTML n'est disponible qu'en anglais, tandis que le CSS est multi-langue.
Commençons par l'HTML.
Accédez à la page, trois onglets se proposent à vous :
  • Validate by URI
  • Validate by File Upload
  • Validate by Direct Input
Sélectionnez le premier pour valider une page web (pratique en cas de PHP), le deuxième pour envoyer votre page HTML au serveur (formulaire de fichier), le dernier pour pouvoir copier / coller votre code.
La page de résultat est toujours la même :
Soit votre page est valide :
Image

Soit elle ne l'est pas :
Image

Si votre page est valide, réjouissez-vous, vous n'avez plus rien à faire.
Dans le cas inverse, ce n'est pas grave, la plupart des erreurs se corrigent.
Il y a deux types d'erreurs :
  • Les avertissements
  • Les erreurs
Les avertissements sont peu important, les erreurs beaucoup plus. A la fin de ce tutoriel se trouve une liste des avertissements et erreurs les plus fréquentes.
Nota : La validation se fait après exécution PHP, les lignes ne sont donc pas forcement les mêmes.

La validation CSS est quelque peu différente, même si le formulaire est le même.
Après avoir accédé au site, les trois onglets sont toujours là, choisissez la méthode appropriée, puis validez.
Le résultat est bien différent, en même temps, c'ets du CSS, plus de l'HTML :P.
La différence principale, c'est que comme on peux séparer les styles, et bien, l'affichage est séparé par feuille de style.
Il n'existe à ma connaissance d'avertissements CSS, mais uniquement des erreurs. A la fin du document se trouve aussi une liste.

Plugins FireFox
HTML Validator
HTML Validator est, comme son nom l'indique pour les anglophones, un validateur HTML pour FireFox (bon, ça c'est pas dit dans le nom, d'accord...).
Pour le télécharger, cliquez ici pour les windowsiens, ici pour les linuxiens 32bits et ici pour les macintoshiens Intel (plus de liens). Vous devez autoriser le site à installer un module complémentaire si on vous le demande.
Après installation, une nouvelle fenêtre s'ouvre : "HTML Validator : choisissez votre algorithme". Personnellement, j'utilise les deux, pour un meilleur résultat. Si vous êtes très débutant, choisissez plutôt "HTML Tidy". Ensuite, et bien, ceux qui on l'œil verrons qu'un tout petit icône est apparu en bas à droite de FireFox. On va commencer par le rendre plus visible : cliquez droit dessus, puis faites "Option". Vous pouvez en premier lieu, rechanger votre algorithme. Le niveau d'accessibilité correspond au personnes malvoyantes, et au niveau à vérifier. Activer la validation dans le navigateur, je crois que c'est le but non ? Masquer l'icône, vous ne verrez pas la correction, pas très utile. "Afficher dans la barre d'état" : Uniquement l'icône permet de voir juste l'icône (par défaut à l'installation). Texte et icône affiche "* erreurs / * avertissements". "Double-cliquer sur l'icône de la barre d'état démarre" Code sourc de la page... pour afficher la source avec liste des erreurs, nettoyer... pour afficher une fenêtre de nettoyage, pas très utile ni fonctionnel.
Pour le code source, vous pouvez activer certains éléments, tout est assez clair, choisissez comme il vous convient.
On va maintenant prendre une page avec des avertissements et des erreurs : http://www.google.fr (et oui !)
En bas à droite, vous voyez ceci : "67 erreurs / 9 avertissements". Double cliquez dessus, vous voyez la source de la page, avec la liste des erreurs et avertissements.
Ils y a trois types d'"erreurs", les erreurs, les avertissements, et les infos. Les infos ici sont en plus par rapport au W3C, et vous permettent de savoir où était par exemple le debut du tag <div> que vous avez oublier de fermer.
A gauche se trouve donc la liste, avec, quand vous cliquez dessus, le source qui surligne l'erreur, et à droite, une aide (en anglais) sur l'erreur. Au dessus de la description se trouve un bouton "HTMLpedia", un wiki sur les erreurs HTML, pouvant vous aider en donnant des exemple, ou des liens vers des solutions.

FireBug
En cours de recherche... :lol:

Liste des avertissements et erreurs les plus fréquentes
Je vais commencer par lister quelques-uns des avertissements HTML, les plus fréquentes :
  • Unable to Determine Parse Mode! Le serveur n'a pas renvoyé de MimeType au client, ainsi, on ne sait pas s'il s'agit d'une page HTML, d'une image SVG, d'un arbre XML... Cet avertissement n'apparaitra normalement pas sur un bon hébergeur. Si cet avertissement apparait, contactez votre hebergeur ou ajoutez un MimeType à votre .htaccess
  • No DOCTYPE found! Vous ne définissez pas de DocType à votre document HTML. HTML seul n'existe pas, il y en a des 10enes de versions, avec chacune leurs normes. Voir choisir son DocType chez pompage.net
  • No Character Encoding Found! Falling back to UTF-8. Aucun encodage de caractère défini. Ajoutez
    Code: Tout sélectionner
    <meta http-equiv="Content-Type" content="text/html; charset=encodage" />
    dans vote en-tête (<head>), en remplaçant "encodage" par votre encodage (généralement, UTF-8 ou ISO-8859-1)
  • <a> attribute "href" lacks value la valeur "href" de votre balise a est vide

Pour les erreurs :
  • Required attribute "****" not specified l'attribut ****, qui est obligatoire à été oublié, généralement l'attribut type de la balise script
  • There is no attribute **** l'attribut **** utilisé n'existe pas / plus sur cette balise
  • Cannot generate system identifier for general entity **** Dans vos liens, vous ne devez pas faire "&type=1", mais "&amp;type=1". En effet, le "&" permet de créer des entités HTML, comme &eacute;. L'HTML cherche donc à créer l'entité &type qui n'existe pas...
  • Document type does not allow element **** here L'élément **** n'est pas autorisé ici, par exemple, une balise title dans le corps (body)
Là, vous avez la plupart des erreur ("Mais il se fou de notre gueule en plus..."), car, en effet, les erreurs sont souvent les mêmes mais sur des balises différentes.
Nota : Selon le validateur utilisé, certaines erreurs peuvent devenir de simple avertissements, et inverse

Voilà pour les erreurs que je qualifierais des "plus fréquentes". Si une autre erreur apparait, cherchez sa signification sur google.

Conclusion
Voilà, votre site est valide W3C, mais pourtant, il s'affiche mal sur Internet Explorer ?
Internet Explorer est LE soucis principal des webmasters. Microsoft, fidéle à son désire de contrôler tout, n'ajoute que les normes qu'il veux, et ainsi, les sites marchent à moitié.
Il existe de nombreux "hacks" pour Internet Explorer, peux-être aurez-vous la chance de trouver celui qui vous convient, peux-être pas.
N'oubliez pas de proposer, affichage correct ou non, à vos visiteurs de télécharger FireFox ou Opera, et pourquoi ne pas leurs faire une belle page de comparaison ?

Mika.

Ps : Ce tuto est un peux brouillons, je suis désolé, je compte le modifier un peu plus tard ;)
Ps 2 : Je crois que j'ai oublié certaines choses, je revois ça à la prochaine modification aussi ;)
Modérateur Niloo
Retrouvez l'info Niloo sur Facebook et Twitter
Image
The whole point of Pandora's Box is that once you've opened it, you can't close it again.
But when everything is over, when the worst has happened, there's still one thing left in Pandora's Box: hope.

Administrateur Niloo
Avatar de l’utilisateur
Messages: 8107
Enregistré le: Lun Oct 01 2007 : 20:12

Re: [Tutoriel Texte + quelques images]La validation W3C

Messagepar Nicolas » Mer Oct 28 2009 : 17:44

Merci c'est un bon début.

Petit Nouveau
Messages: 31
Enregistré le: Mer Oct 28 2009 : 17:39

Re: [Tutoriel Texte + quelques images]La validation W3C

Messagepar reno915 » Mer Oct 28 2009 : 18:02

je connaissais pas, au mois j'ai appris quelque chose de nouveau^^
je m'endormirai moins bête (si c'est possible) ce soir ^^

Membre Très Actif
Avatar de l’utilisateur
Messages: 506
Enregistré le: Ven Jan 04 2008 : 19:15

Re: [Tutoriel Texte + quelques images]La validation W3C

Messagepar jeuxvideodeouf » Mer Oct 28 2009 : 20:07

Il sert à rien ce tuto je connaissais tout
Cela éclairera le sujet concernant les normes W3C.

Retourner vers Tutoriels

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 0 invités