[Tuto] Les validateurs (comment valider ses templates)

[dav.bo]

Introduction:
La présence d'erreurs dans le code HTML ou CSS peut en effet empêcher certains navigateurs web d'afficher la page ou en partie, ce qui peut être gênant a certains utilisateurs qui souhaitent visiter un site qui les intéressent, d'ou la nécessité d'utiliser des outils tel que des validateurs.


Que sont les validateurs:
Les vérificateurs de code sont des programmes ou des services web capables d'analyser une page HTML ou encore le CSS existante afin d'y détecter des erreurs de code.

Ou trouver ces validateurs:
On peut utiliser des outils validators avec ces liens:
HTML Tidy Online
W3C CSS Validator
W3C HTML Validator
WDG HTML Validator
Validateur W3C Multipages

On peut aussi utiliser des extensions pour ceux qui utilisent Firefox, qui s'intègre a votre navigateur:
Les extensions Firefox:

HTML Validator Le validateur est présent sous la forme d'une icône située à droite de la barre de statut, et vérifie toutes les pages sur lesquelles vous naviguez, vous signalant les erreurs de validation (que Tiny ne comprends pas) et les avertissements (pour lesquels Tiny vous signale de quelle façon y remédier).


Utilisation de l'extension HTML Validator:
Une fois activé (clic droit => activé), pendant votre navigation, le logo est vert = pas d'ereurs, un triangle apparait comme ceci:

Cela signifgie qu'il y a des erreurs sur votre page, faites deux clics gauche sur ce logo et sélectionné la ou se trouve les erreurs indiqués, une fenêtre s'ouvre, dans Erreurs et avertissements HTML, vous trouverez les renseignements necessaires en cliquant sur chaque erreurs dans cette fenêtre (line xxx), vous pouvez utilisez les options ou encore Nettoyer la page, cela peut aider.

Web Developer Web Developer est très utile pour la création de pages Web. Il vous permet de vérifier rapidement vos pages avec plein d'options à portée de souris. Deux clics suffisent à lancer une validation, à remplacer les images par leur texte alternatif ou à redimentionner la fenêtre pour simuler ce que d'autres pourraient voir.


Utilisation de l'extension Web Developer:
Pour lancer l'outil, cliquer sur Affichage/Barre d'outils/Barre d'outils Web Developer , la barre s'affichera comme sur ce screen:

Une fois la barre affiché (cette barre a d'autres fonctions, que je vous laisse découvrir), cliquer sur Outils/Valider Html , une page va s'ouvrir, attendez quelques instants, le temps que le validateur vérifie votre page, une fois fini, vous obtenez le résultat. Si des erreurs sont trouvés, il vous reste plus qu'à les corriger, quand la page est validé, vous obetenez ceci:

Faites de même pour votre .CSS, cliquez sur Outils/Valider CSS , la vérification se lance, si des erreurs sont présentes, corrigé les, pour que votre .CSS soit validé, vous devez avoir ceci:


Note: Certaines erreurs sont dues au php et non aux tpls. A savoir, aussi, qu' installer un mod, peut ne plus rendre votre site valide, pensez a revérifier, après l'installation de modules et corriger, si nécessaire.

Complément d'informations:
Feuilles de style CSS et HTML (by Stefan Münz / © 2003 Traduction Serge François)
Définir des formats CSS (by Stefan Münz / © 2003 Traduction Serge François)
Définir des formats globaux (by Stefan Münz / © 2003 Traduction Serge François)
Exercices de style avec (X)HTML et CSS (by Alsacreations)
Explication du CSS (by NRJ DESIGN)
Tutos sur le CSS (by Pompage Magazine)
Tutoriel CSS et autres (by aidenet.com)
CSS 3 (W3C.org - ENG)

Conclusion:

Même si vous avez créé la page web dans un éditeur web tel que FrontPage, DreamWeaver ou Adobe, il peut être utile de faire contrôler le résultat final par un vérificateur de code, afin de rendre compatible son site avec tout les navigateurs, une fois la prise en main, cela devient une habitude et devient assé rapide.
Vous trouverez subSilver en xhtml, ci-dessous, afin de faciliter la tache a ceux qui voudraient créer leur templates en xhtml valide, pour ceux qui souhaiteraient avoir un subSiver en HTML valide, vous disposez de tout le nécessaire, pour rendre votre tpl valide

Téléchargement : subSilver XHTML 1.0 Valide


Tuto et subSilver XHTML de dav.bo et Abble-=CoSa NoStrA=-

[dcz]

Ça, c'est une contribution fort utile.

Je pense que ça va faire des heureux, bravo

Une pierre de taille dans la croisade du W3c

L'extension Web developper est vraiment super, cela fait un moment que je ne m'en passe plus


++

[dav.bo]

Il est vrai que Web Developer est un sacré outil, qui a plus d'un tour dans son sac. La chance est que pour ceux qui maitrise pas très bien l'anglais, celui la est en FR (traduit, que l'outil).
J'ai mis le lien du tpl de mon site, mais il est aussi présent sur forums connus fr. Ce tuto est aussi valable pour CH (bien que les tpl de CH le seront bientot), les webring, les CMS, les sites normaux, htm, html, blog, ect...
phpBB 3 arrive, du moins est proche, donc ce tuto sera toujour valable, pour la création de templates ou encore pour d'autres.

[dav.bo]

ajout de complement d'informations

[dav.bo]

petite erreur de ma part, j'ai zappé le row3 dans le .css (me suis planté de css), j'ai donc remis l'archive à jour, pour ceux qui ont téléchargé l'archive, remplacer le subSilver.css.
++

[dcz]

Au fait, les anglophones se sont mis sur le coup d'un template sans tables, il va y avoir du style

[dav.bo]

Oui, j'ai vu et la c'est pas de la tarte, comme je t'avais dis, j'avais commencé et arrêtté, car l'arrivé de la v.3 est de plus en plus proche et préfère me consacrer dessus, par la suite, la plupart des erreurs sont du au id, qui se trouvent directement dans le php, notament, faq, viewtopic et la partie admin (qui je n'ai pas touché ou peu). Enfin, c'est vraiment pas fastoche et vraiment une autre histoire, sans tables.

++

[dav.bo]

Mis à jour pour la v.2.0.22

[dav.bo]

Mise à jour du template, correction des fichiers, par Abble au niveau de la validation :
posting_body.tpl
privmsg_body.tpl
groupcp_info_body.tpl
posting_topic_review.tpl