Dirk Jesse, à l'origine du «framework» HTML-CSS YAML, propose depuis mi-février un outil nommé YAML Debug. Ce dernier propose quelques fonctionnalités intéressantes proches de celles de l'extension Web Developer de Chris Pederick.
Un «bookmarklet» pour tous les navigateurs modernes
Un avantage de cet YAML Debug, c'est qu'il fonctionne comme un bookmarklet, c'est-à-dire un code JavaScript court enregistré comme marque-page (ou favoris ou signet) du navigateur. Pour la petite histoire, lorsqu'on se trouve sur une page et qu'on clique sur le marque page, le code JavaScript du bookmarklet va récupérer un script JavaScript plus imposant qui constitue l'application elle-même. Le script JS est exécuté directement dans la page web sur laquelle on travaille.
Ce fonctionnement lui permet de fonctionner avec de nombreux navigateurs récents: Firefox, Safari, Opera, et même Internet Explorer 7 dans une certaine mesure. C'est aussi le cas d'un outre outil disponible comme bookmarklet: Firebug lite (le petit frère de l'extension pour Firefox du même nom).
Installation de YAML Debug
Sur la page (en anglais) consacrée à YAML Debug, il faudra enregistrer le lien «YAML Debug» dans la colonne en haut à droite comme marque-page/favori/signet. Vous pouvez aussi le faire glisser directement vers votre barre de marque-pages.
Attention, ce lien n'est pas très visible dans la page! Il m'a bien fallu plusieurs minutes de lecture avant de comprendre comment on pouvait installer ce fichu logiciel! J'ai sans doute été nul sur ce coup-là (je l'admets volontiers), mais il y a clairement un problème ergonomique sur cette page (manque de call to action, comme on dit ;)). Enfin bref, vous êtes avertis et ne commettrez pas mon erreur.
Fonctionnalités
C'est un outil relativement simple, et le plus simple est encore de l'essayer et de faire le tour des fonctionnalités. Cela devrait vous prendre quelques minutes, une dizaine tout au plus.
YAML Debug fait penser non pas à Firebug, mais à certaines fonctions de Web Developer: il modifie l'affichage et les contenus de la page pour mettre en évidence le nom des balises HTML, la structure des div, etc.
/xmedia/doc/original/yamldebug1-540.png" alt="Aperçu de l'onglet Debug Options de YAML Debug" />
Il permet aussi de mettre en évidence quelques points en rapport avec l'accessibilité: attributs alt vides ou manquants (une distinction entre les deux aurait été utile…), présence d'attributs de rôle ARIA, etc. L'auteur nous avertit que YAML Debug n'est pas un outil de test ou de validation de l'accessibilité, mais ces quelques fonctionnalités sont appréciables.
YAML Debug permet enfin d'avoir accès directement aux différents fichiers CSS (dans la page, en fausse pop-up, avec coloration syntaxique!). On peut aussi, en cliquant sur le nom d'un fichier CSS, désactiver l'application des styles de ce fichier, ce qui peut être très utile dans certains cas.
Je n'en dis pas plus, et je vous invite à découvrir cet outil par vous-même.
Commentaires
J'ai rajouté le bookmarklet dans la page (apparaît ssi on est loggé comme admin) ca permet de l'utiliser quand on va tester ses pages à l'extérieur dans un cyber par exemple, et puis ça impressionne le client!
(et mes 2 kiwis?)
@dj DMSR : Comme je te l'ai expliqué la fois précédente, on ne peut pas vraiment exploiter une news proposée qui fait à peine 2 lignes, qui n'est pas balisée en HTML comme demandé et où on doit se taper tout le boulot de rédaction, ce que vient de faire Florent.
Si on veut être reconnu comme auteur d'une actualité, elle devrait pouvoir être mise en ligne telle quelle, ce qui était loin d'être le cas de ta proposition.
On va discuter du fait de t'attribuer 2 kiwiz quand-même pour l'effort, mais il faut vraiment comprendre qu'une actualité, ce n'est pas juste un lien vers un site ou deux. ;)
Merci Florent pour l'actu.
je viens de tester, c'est assez sympathique.
je diffuse.....
Aksel
Excellente idée que cet outil...
Par contre, je viens de le tester sur la page de cet article et il m'indique un beau "no doctype found" alors qu'on sait très bien que toutes les pages web d'Alsacréations comportent des doctypes impeccables. Y a donc encore un peu de fignolage à faire avant de quitter le mode beta. ^^
Salut
J'ai pas compris où et comment ça s'installait... :|
Merci de votre aide.
@ciboulette :
Bonjour, pour ma part, j'ai trouvé l'endroit où télécharger en lisant le titre "get the bookmarklet" et puis j'ai fais un clic droit sur le lien "YAML debug" juste en dessous pour l'ouvrir dans un onglet. L'outil s'est ouvert sur l'écran, ensuite, j'ai déplacé l'onglet ouvert dans ma barre d'outils pour en faire un bouton grâce auquel je peux y accéder facilement.
Voilà, y a rien de plus à faire. ;)
@ciboulette : tu peux aussi directement faire un glisser-déposer (drag'n'drop) du lien vers la barre d'outils de Firefox (ou vers le menu Marque-Pages) sans avoir à afficher le code JS.
@Florent V. : "Il permet aussi de mettre en évidence quelques points en rapport avec l'accessibilité: attributs alt vides ou manquants (une distinction entre les deux aurait été utile…)"
Ben euh si, c'est entouré d'une bordure rouge continue ou orange pointillée, cf les 2 dernières lignes de la CSS de YAML Debug
.yd-imagealt img[alt=""] { border: 4px #f90 dotted !important; } .yd-imagealt img:not([alt]) { border: 4px #f00 solid !important; }À tester sur un site peu respectueux des standards et de l'accessibilité pour plus d'effet