5568 sujets
Sémantique web et HTML
Salut,
<EDIT>j'ai retrouvé la discussion que je cherchais, un peu tard ...
[Liste GTA] Illustrer la structuration de l'information
En résumé :
- WDT / Information / Plan du document (il manque les alt)
- Opera - feuille de style personnalisée - "Table des matières" (idem)
- je m'amuse avec content, attr, :before, :after et visibility
Le script ci-dessous fait à peu près la même chose que la WDT en 20 étapes au lieu d'1 mais ... on peut l'adapter à ses besoins (par ex. obtenir les textes alternatifs des images faisant partie de titres !).
</EDIT>
à l'arrache complet un script jQuery d'une ligne pour extraire les titres sous forme de texte (uniquement) :
Testé sur http://www.alsacreations.com, il manque l'attribut alt du h1 (le lien-logo qui permet de retourner à l'accueil).
Pour les images, ce script extrait le contenu des attributs alt :
Pour utiliser ces scripts :
Étape 0 - se rendre sur la page dont on veut extraire les titres
Étape 1 - il faut jQuery
- si tu sais que jQuery est chargé par la page, passer à l'étape 2
- dans le doute tu peux utiliser un favlet/bookmarklet qui s'appelle jQuerify (à "installer" par drag-and-drop du lien >>jQuerify<< vers une barre d'outil libre de ton navigateur ou au pire dans le menu Marque-Pages/Favoris)
Tu cliques sur ce 'bouton' fraîchement installé quelque part dans ton navigateur et soit il ajoute jQuery à la page affichée soit il informe que jQuery vA.B.C est déjà chargé. Passer à l'étape 2
Étape 2 - il faut lancer le script
- ouvrir Firebug au premier onglet Console. Normalement il y a 2 zones
- dans la zone de droite, c/c l'un des scripts par ex. $(':header').text();
- appuyer sur le bouton Exécuter
- à gauche doit s'afficher le texte ou un message d'erreur
---
Je n'ai aucune version d'Opera actuellement installée mais regarde quand même dans les menus (feuilles de styles personnalisées ?) pour un affichage avec que les titres en N/B.
Pas sûr que ça t'aide car il y a le risque que le copier/coller copie aussi tout le texte entre chaque titre (comme s'il n'était pas caché).
Dis-moi plus précisément ce que tu recherches
Ex:
- une fonction PHP côté serveur qui traite automatiquement le HTML qui va être envoyé et y rajoute une liste imbriquée de tous les titres présents dans la page avec liens-ancre vers chacun et ajout d'id sur les titres par la même occasion)
- le script ci-dessus qui fonctionne sur n'importe quel site mais avec des ajouts comme 'entourer chaque titre de <li> et </li> pour gagner du temps', etc
et je pourrai adapter à tes besoins
Adesias,
Modifié par Felipe (15 Feb 2011 - 21:35)
<EDIT>j'ai retrouvé la discussion que je cherchais, un peu tard ...
[Liste GTA] Illustrer la structuration de l'information
En résumé :
- WDT / Information / Plan du document (il manque les alt)
- Opera - feuille de style personnalisée - "Table des matières" (idem)
- je m'amuse avec content, attr, :before, :after et visibility
Le script ci-dessous fait à peu près la même chose que la WDT en 20 étapes au lieu d'1 mais ... on peut l'adapter à ses besoins (par ex. obtenir les textes alternatifs des images faisant partie de titres !).
</EDIT>
à l'arrache complet un script jQuery d'une ligne pour extraire les titres sous forme de texte (uniquement) :
$(':header').text();Testé sur http://www.alsacreations.com, il manque l'attribut alt du h1 (le lien-logo qui permet de retourner à l'accueil).
Pour les images, ce script extrait le contenu des attributs alt :
$(':header img').attr('alt');Pour utiliser ces scripts :
Étape 0 - se rendre sur la page dont on veut extraire les titres
Étape 1 - il faut jQuery
- si tu sais que jQuery est chargé par la page, passer à l'étape 2
- dans le doute tu peux utiliser un favlet/bookmarklet qui s'appelle jQuerify (à "installer" par drag-and-drop du lien >>jQuerify<< vers une barre d'outil libre de ton navigateur ou au pire dans le menu Marque-Pages/Favoris)
Tu cliques sur ce 'bouton' fraîchement installé quelque part dans ton navigateur et soit il ajoute jQuery à la page affichée soit il informe que jQuery vA.B.C est déjà chargé. Passer à l'étape 2
Étape 2 - il faut lancer le script
- ouvrir Firebug au premier onglet Console. Normalement il y a 2 zones
- dans la zone de droite, c/c l'un des scripts par ex. $(':header').text();
- appuyer sur le bouton Exécuter
- à gauche doit s'afficher le texte ou un message d'erreur
---
Je n'ai aucune version d'Opera actuellement installée mais regarde quand même dans les menus (feuilles de styles personnalisées ?) pour un affichage avec que les titres en N/B.
Pas sûr que ça t'aide car il y a le risque que le copier/coller copie aussi tout le texte entre chaque titre (comme s'il n'était pas caché).
Dis-moi plus précisément ce que tu recherches
Ex:
- une fonction PHP côté serveur qui traite automatiquement le HTML qui va être envoyé et y rajoute une liste imbriquée de tous les titres présents dans la page avec liens-ancre vers chacun et ajout d'id sur les titres par la même occasion)
- le script ci-dessus qui fonctionne sur n'importe quel site mais avec des ajouts comme 'entourer chaque titre de <li> et </li> pour gagner du temps', etc
et je pourrai adapter à tes besoins
Adesias,
Modifié par Felipe (15 Feb 2011 - 21:35)
Salut Felipe,
merci, je n'avais pas pensé à la Webdevelopper Toolbar
Pour Opera j'ai trouvé comment procéder - d'ailleurs il y a des fonctionnalité pas inintéressantes et à peu prés équivalente à celles de la WDT.
ça serait l'idéal bien sûr, un script qui génère une liste UL, mais étant donné que c'est une action ponctuelle, je peux faire du copier/coller de chaque titre à partir du plan généré par la WDT, ça devrait être assez rapide. Le plus long reste l'ajout des ancres...
C'est très gentil de me le proposer mais si ça doit de prendre plus d'un quart d'heure - et que tu ne le réutilises pas pour vos projets -, je préfère le faire moi même, je voudrais pas te donner du boulot
Ceci dit ça pourrait se retrouver dans les outils d'Alsa
Modifié par Hermann (16 Feb 2011 - 10:48)
merci, je n'avais pas pensé à la Webdevelopper Toolbar
Pour Opera j'ai trouvé comment procéder - d'ailleurs il y a des fonctionnalité pas inintéressantes et à peu prés équivalente à celles de la WDT.
Felipe a écrit :
Dis-moi plus précisément ce que tu recherches
Ex:
- une fonction PHP côté serveur qui traite automatiquement le HTML qui va être envoyé et y rajoute une liste imbriquée de tous les titres présents dans la page avec liens-ancre vers chacun et ajout d'id sur les titres par la même occasion)...
et je pourrai adapter à tes besoins
ça serait l'idéal bien sûr, un script qui génère une liste UL, mais étant donné que c'est une action ponctuelle, je peux faire du copier/coller de chaque titre à partir du plan généré par la WDT, ça devrait être assez rapide. Le plus long reste l'ajout des ancres...
C'est très gentil de me le proposer mais si ça doit de prendre plus d'un quart d'heure - et que tu ne le réutilises pas pour vos projets -, je préfère le faire moi même, je voudrais pas te donner du boulot
Ceci dit ça pourrait se retrouver dans les outils d'Alsa
Modifié par Hermann (16 Feb 2011 - 10:48)
Yep, et puis ce genre d'ajout se fait assez rapidement avec une macro dans un éditeur de texte.
Pour des listes imbriquées il y a le problème de savoir quoi faire quand la hiérarchie des titres est pas respectée : si on passe de h1 à h4 sans h2 ni h3, on a des trous dans les listes
J'ai trouvé un autre moyen avec Firefox Accessibility Extension :
Navigation / Headings et là on peut rien sélectionner mais ... le bouton View Summary ouvre une nouvelle fenêtre avec un tableau HTML. Sans souci de alt comme précédemment.
Cadeau bonus (au moins dans Firefox) : maintenir la touche Ctrl enfoncée permet de sélectionner en mode colonne (ex: la colonne des titres seule ou Level (+Landmark) + texte des titres)
Pour des listes imbriquées il y a le problème de savoir quoi faire quand la hiérarchie des titres est pas respectée : si on passe de h1 à h4 sans h2 ni h3, on a des trous dans les listes
J'ai trouvé un autre moyen avec Firefox Accessibility Extension :
Navigation / Headings et là on peut rien sélectionner mais ... le bouton View Summary ouvre une nouvelle fenêtre avec un tableau HTML. Sans souci de alt comme précédemment.
Cadeau bonus (au moins dans Firefox) : maintenir la touche Ctrl enfoncée permet de sélectionner en mode colonne (ex: la colonne des titres seule ou Level (+Landmark) + texte des titres)
Felipe a écrit :De ce côté là ça va.
Yep, et puis ce genre d'ajout se fait assez rapidement avec une macro dans un éditeur de texte.
Pour des listes imbriquées il y a le problème de savoir quoi faire quand la hiérarchie des titres est pas respectée : si on passe de h1 à h4 sans h2 ni h3, on a des trous dans les listes
Felipe a écrit :
J'ai trouvé un autre moyen avec Firefox Accessibility Extension :
Navigation / Headings et là on peut rien sélectionner mais ... le bouton View Summary ouvre une nouvelle fenêtre avec un tableau HTML. Sans souci de alt comme précédemment.
Cadeau bonus (au moins dans Firefox) : maintenir la touche Ctrl enfoncée permet de sélectionner en mode colonne (ex: la colonne des titres seule ou Level (+Landmark) + texte des titres)
Je n'ai pas trouvé cette extension dans les add-ons de Firefox, c'est le nom exact?
Par contre il y a 2 extension expérimentales dont la Juicy Studio Accessibility Toolbar
EDIT
Je viens de trouver, c'est la toolbar conçu par Juicy Studio, qui d'ailleurs a l'air très utile.
Je lis une recommandation issue des WCAG 2 (mettre des H2 (de préférence) avant les bar de navigation).
Merci
Modifié par Hermann (16 Feb 2011 - 15:39)
Oui elle est pas facile à trouver avec des mots aussi génériques dans le nom
C'est https://addons.mozilla.org/fr/firefox/addon/accessibility-evaluation-toolb/ et elle crée un menu Accessibility (qu'on peut cacher dans les options)
edit: grumpf, https dans le lien = pas un lien ...
Modifié par Felipe (16 Feb 2011 - 20:18)
C'est https://addons.mozilla.org/fr/firefox/addon/accessibility-evaluation-toolb/ et elle crée un menu Accessibility (qu'on peut cacher dans les options)
edit: grumpf, https dans le lien = pas un lien ...
Modifié par Felipe (16 Feb 2011 - 20:18)
Felipe a écrit :Voila that's it
Oui elle est pas facile à trouver avec des mots aussi génériques dans le nom
C'est https://addons.mozilla.org/fr/firefox/addon/accessibility-evaluation-toolb/ et elle crée un menu Accessibility (qu'on peut cacher dans les options)
Le Ctrl+Clic sur les cellules de la colonne ne copie malheureusement pas le td – auquel cas j'aurais pu les remplacer via un remplacement massif – mais uniquement le texte.
Merci
Modifié par Hermann (17 Feb 2011 - 16:19)