Wave

17 janvier 2023 par

Une extension affichant le plan d’une page web et dont vous ne pourrez plus vous passer

Si vous me lisez régulièrement, vous savez que j’aime comprendre mais également trouver des solutions dans l’emploi autant de chromeOS que tout ce qui concerne les outils de Google. Cela a été le cas, en trouvant une solution pour relier des hauts-parleurs Nest Audio à la Chromecast Google TV. A ce sujet, la documentation officielle de Google ne propose pas de solution. Bon, pour revenir à nos propos, il ne s’agit pas ici d’une nouvelle découverte. Loin de là. Il s’agit d’une extension qui m’a emballé dès son emploi. Et pour cause, voici une extension affichant le plan d’une page web et dont vous ne pourrez plus vous passer. Et quand je dis que vous ne pourrez plus vous en séparer je pèse mes mots. C’est l’extension qui va vous permettre de mieux travailler, mais également voir en quelques secondes tous les chapitres et autres articles proposés dans une page web. 

A la découverte des balises des pages web

Avant de s’intéresser à l’extension que je vous propose d’utiliser, nous allons voir tout d’abord sur quel principe elle fonctionne. Aujourd’hui, toute page web que ce soit l’article d’un site web comme celui que vous lisez, d’une web application, ou toute autre application utilisant un navigateur web est basée sur le HTML. Abrégé du HyperText Markup Language, il s’agit en l’espèce d’un langage de balisage conçu pour permettre la représentation des pages web. Une partie des pages de ChromeOS fonctionne avec des pages Html, comme tout site web. 

Tout site commence avec la balise <html> et se termine par la balise </html>. Cette balise va indiquer ainsi au navigateur web qu’il s’agit d’une page web. Entre ces deux balises va venir s’insérer d’autres balises, concernant autant le texte qui sera en italique, en gras, ou souligné. On pourra aussi trouver des URL appelé aussi liens hypertextes, permettant d’être renvoyé vers d’autres pages web. Enfin pour tout ce qui concerne le texte d’un article, des balises peuvent indiquer les titres avec des grosseurs différentes. C’est ce que l’on appelle les titres de section 

Une balise pour chaque titre

Pour vous donner un ordre d’idée, voici les balises qui en compte six, permettant d’avoir des titres de différentes grosseurs : 

<h1>Titre de niveau 1</h1>

<h2>Titre de niveau 2</h2>

<h3>Titre de niveau 3</h3>

<h4>Titre de niveau 4</h4>

<h5>Titre de niveau 5</h5>

<h6>Titre de niveau 6</h6>

Ce qui donne :

Une extension affichant le plan d'une page web et dont vous ne pourrez plus vous passer
Il s’agit une image du résultat, car ce que l’on appelle la feuille de style, n’affichait pas ce que vous voyez ci-dessus, prenant le pas sur cette partie du code brut que je vous présente ci-dessus.

Porter le regard

Comme on le constate cette représentation visuelle permet de donner au lecteur une attention particulière suivant le titre et son positionnement dans le texte. Plus concrètement, pour cet article que vous lisez, comme tous ceux qui vous sont proposés, il commence par un titre en H1, continue dans les titres de sections en H2, ensuite en H3. Il arrive que l’on retrouve un titre en H4 quand il s’agit de vous donner un lien commençant par A lire aussi ou une information particulière. C’est le cas dans cet article, à vous de trouver l’emplacement. Enfin on clôture habituellement de nouveau un titre en H1 suivi occasionnellement par un titre en H2. 

La fonction des titres

Les titres ne sont pas là pour être uniquement joli. Ils ont surtout pour but d’identifier un sujet. Ainsi, si à la place du titre actuel de l’article “Une extension affichant le plan d’une page web et dont vous ne pourrez plus vous passer”, je l’avais remplacé par “Différence de la culture du bégonia en milieu urbain et rural”, auriez-vous su que je vous présentais une extension ? Je ne pense pas ! Affichant le plan d’une page web ? Encore moins ! Le titre doit donc être court et naturel. Également reconnaissable par le plus grand nombre car s’appuyant sur les principes suivants : 

  • il est susceptible d’être recherché dans un moteur de recherche, 
  • il doit pouvoir être compréhensible par le plus grand nombre de personnes et non à  certains experts du sujet traité dans l’article,
  • il ne doit pas avoir le même titre qu’un article traitant d’un autre sujet,
  • sa longueur ne doit pas en faire un “roman”,
  • il devra être cohérent avec les sujets traités dans le site ou il est hébergé. Ainsi, vous ne trouverez pas sur le site mychromebook, d’articles sur la culture du bégonia. A moins que celle-ci s’effectue par le biais d’un Chromebook. 

On sait maintenant à quoi servent les balises

Pour résumer, il existe un certain nombre de balises permettant d’avoir des titres de sections dans une page web. Que ce soit à la page d’accueil d’un site, d’un article, ou même une page de résultat de recherche. On peut donc dire, que toutes les pages web que vous visualisez sont balisées. Des balises que l’on retrouve aussi dans les courriers électroniques que vous recevez. Cela concerne autant celui de votre voisin, vous invitant à venir manger la galette des rois que la newsletter mensuelle du site mychromebook.fr. 

L’extension Simple Outliner

L’extension Simple Outliner s’appuie donc sur les balises H1, H2, H3 et H4 pour afficher le plan de la page web que vous consultez. Cela permet ainsi d’aller à une section d’un article qui vous intéresse. Pour cela, si vous avez remarqué un titre se trouvant en bas de page du plan, en cliquant sur ce dernier, la partie contenant le titre en question s’affiche. La encore par le biais d’une balise appelée lien ancré. A la différence d’une URL qui renvoie vers une autre page, le lien ancré renvoie sur un endroit de la page, appelé point d’ancrage. Ce point d’ancrage pouvant également se trouver sur une autre page, mais à la différence d’une URL qui renvoie sur le haut de la page, le point d’ancrage renvoie à un endroit précis d’une page. 

Une adaptation suivant le contenu

Mais le plan de la page web qu’affiche Simple Outliner s’adapte en fonction de la position de la barre de défilement du navigateur web. Dans la fenêtre flottante qui vient s’afficher, sera présenté une partie seulement de tous les titres. Suivant le positionnement du curseur de la barre de défilement la taille mais également le contenu de la fenêtre changera. De plus, les principaux titres du plan apparaissent avec la couleur violette (voir image ci-dessous).

Une extension affichant le plan d'une page web et dont vous ne pourrez plus vous passer

Suivant l’affichage des titres, celui le plus haut apparent dans la page prendra la couleur violette. (voir ci-dessous). 

Une extension affichant le plan d'une page web et dont vous ne pourrez plus vous passer

Une barre de défilement est bien sûr disponible suivant le nombre de titres présent dans la page du plan de la page web.

Pour afficher ou faire disparaître la fenêtre du plan de la page, il suffira de cliquer sur l’icône qui s’affiche lors de l’installation de l’extension.

Une extension affichant le plan d'une page web et dont vous ne pourrez plus vous passer
Extension active
Une extension affichant le plan d'une page web et dont vous ne pourrez plus vous passer
Extension inactive

De même en cliquant sur l’icône de l’extension via un clic droit, une fenêtre s’affiche permettant de réinitialiser la position de la fenêtre. Concernant le positionnement de la fenêtre, vous pouvez la poser sur la page à l’emplacement que vous désirez. Il vous suffit de cliquer une fois sur le bandeau de cette page flottante pour la porter à l’emplacement voulu, mais uniquement dans la page du navigateur web Google Chrome. 

La fenêtre de l'extension
La fenêtre de l’extension

Pour permettre l’affichage du plan de la page web dans la fenêtre opérer de la manière suivante : 

  • clic droit sur l’icône de l’extension positionnée face à l’omnibox
  • dans la fenêtre, cliquer sur Options,
  • dans la fenêtre qui s’affiche, cliquez sur le bouton radio All Page (voir image ci-dessous),
  • la sauvegarde s’effectue automatiquement. 
Une partie de la fenêtre des options de l'extension
Une partie de la fenêtre des options de l’extension

Au niveau des informations à retenir : 

  • vous pouvez demander que l’extension se souvienne de la position de la fenêtre d’une page web à une autre,
  • vous pouvez demander que les résultats des applications de flux RSS Inoreader et Feedly, soient pris en compte au niveau de la fenêtre du plan de la page. (voir image ci-dessous)
Une autre partie des options de l'extension
Une autre partie des options de l’extension

Installer l’extension Simple Outliner

Pour installer l’extension Simple Outliner, cliquer sur le lien ci-dessous.

Simple Outliner / 智能网页大纲
Simple Outliner / 智能网页大纲
Développeur: lcomplete
Prix: Gratuit

Une nouvelle fenêtre s’affiche indiquant les actions entreprises par l’extension (voir image ci-dessous).

Fenêtre d'information de l'extension
Fenêtre d’information de l’extension

Une nouvelle icône s’affiche face à l’omnibox. 

Pratiques en matière de confidentialité

  • L’éditeur a indiqué qu’il ne collecterait et n’utiliserait pas vos données

Une extension affichant le plan d’une page web et dont vous ne pourrez plus vous passer

Cette extension permet donc d’afficher le plan d’une page web à partir des titres qu’elle contient. Cela permet ainsi à partir d’une page de résultats du moteur de recherche Google, d’afficher uniquement les titres des pages web. Ceci offrant ainsi un gain de temps dans une recherche. Par ce biais, la recherche d’informations devient plus rapide, si l’on se base que sur le titre. En tout cas, pour ce début d’année 2023, cette extension est pour moi un vrai bonheur de l’avoir découvert, comme de l’utiliser chaque jour. C’est bien simple, j’aurais bien du mal à m’en passer. 

Soutenir MyChromebook.fr

Chrome Os cache bien des secrets ! L’équipe de mychromebook.fr vous propose des guides d’aide au démarrage et à la manipulation de ce système d’exploitation.

Acheter nos guides

Le CKB SHOW est soutenu par ses auditeurs. Débloquez des avantages et rémunérez L’équipe de Mychromebook pour son travail avec Patreon !

Devenez VIP Tipeee

Articles similaires

25 septembre 2018 par

Des onglets à l’heure de Chrome

Le temps. Le temps. Comme il semble qu’il nous file entre les doigts autant connaître ce qui s’en va. Pour cela, j’ai découvert l’extension CaretTab. Sa fonction ? Vous donner l’heure bien sûr mais comme vous le désirez dans l’affichage.

Lire l'article

1 commentaire(s) au sujet de "Une extension affichant le plan d’une page web et dont vous ne pourrez plus vous passer"

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

%d blogueurs aiment cette page :