HeadingsMap, new Firefox extension

Accesibilidad y estándares web

HeadingsMap

by Rumoroso

First of all, this is the link to the extension in Firefox Add-ons.

The extension generates an index (or map) of any web document structured with headings (in the main document, and in frames and iframes that contains), indicating the level of the headings and its possible errors. By clicking on any of its items, you can access directly to the content of the page. I think it is useful to facilitate navigation to anyone and it also is useful for webdevelopers, for consultants and for auditors:

  • It shows the headings structure of the main content (first picture in this document) and of other document embedded through IFRAME element or those which are part of a series of FRAMES (FRAMESET).
  • It shows all headings in the document, including those hidden with CSS techniques or those without content.
  • It can warn when there are no headings in the document.
  • It can warn when there are skipping level in the headings structure (second picture in this document).
  • It is an index for acc_slide (or rumo_slides) and for HTML Slidy (W3C)

headingsMap

new example of the results in headingsMap

If the document includes frames, the panel can show differents sub-panels, one per frame, with their structure. If the document includes iframes, you can see their headings in the headings structure of the principal content, and optionally, it will show a line (or more) to see what of these are part of one document or other. You can choose this option by clicking with the secondary button of your mouse in the sidebar or in the icon in the statusbar.

If you want, you can choose and change this option (and more) through the options panel.

options panel

In the next picture, you can see the headings structure that the extension shows in the case of a document with an iframe and with incorrect skipping level (1 to 3).

vision de la extension

And here it is a picture that shows the situation in wich there is a frameset (frames collection).

vision de la extension

Do you think headingsMap is useful?… I’m waiting for your answer :)

20 respuestas a HeadingsMap, new Firefox extension

  1. Brandon dijo:

    Nice tool; I’ve been waiting for this for firefox 3. However, I’ve been trained to look for addon sidebars under “View->Sidebar,” as with addons like Delicious and Scrapbook.

  2. Rumoroso dijo:

    Hi Brandon. Thanks for your comment. I must admit that I forgot to include that option under that menu. I included it under “Tools” menu, but now, after your comment, I just change it and you will can find in both (tools and view->Sidebar).

    Thanks…

    pdt: The extension doesn’t include the option to uptate, so if you want, you will have to download it again…

  3. SS dijo:

    Nice one – I was looking for exactly this functionality! Couple of small gripes:
    * Seconding Brandon’s comment on View > Sidebar . The latest version on firefox addon site still doesn’t have that fix ….
    * The image for the Toolbar-button in customize menu doesn’t show up. It will be nice if this can be fixed (then I can use it with AllInOneSidebar ;) ).

    Eagerly awaiting the next version :)
    Cheers.
    [ PS: Had a quick peek at the code - looks like small problem with chrome urls and the css rule. Just for reference - some tutorials on toolbar buttons - hope you find them useful:
    http://www.borngeek.com/firefox/toolbar-tutorial/chapter-5/
    https://developer.mozilla.org/En/Creating_toolbar_buttons ]

  4. Rumoroso dijo:

    Hi SS. Thanks for your comment.

    I just upload a new version that includes the toolbar icon (your link was usefull) and the link on View->Sidebar. Now it is ok… (until next bug :) )

    Thanks…

  5. SS dijo:

    Rumoroso – the new version addresses both the points. Thanks again for the extension (y)

  6. Gio dijo:

    hello very very nice tool, where can it be downloaded from ?

  7. Rumoroso dijo:

    Hi, thanks for your comment. I just added a link to download the extension in this page, at the beginning. The link in “Firefox addons” will be available as son as possible (when they reviewed the last version of the extension).

    Until that momment, you can download and install from here… http://www.niquelao.net/wp-content/uploads/extensions/headingsMap/headingsmap.xpi

    Thanks

  8. Rumoroso dijo:

    Since now, the link in “Firefox addons” is available. Thanks…

  9. vinc17 dijo:

    Version 1.05.1 does not work with XHTML pages (application/xhtml+xml), such as http://www.w3.org/

  10. Rumoroso dijo:

    Hi vinc17. I didn’t see that problem till now. I revised the code and now it’s ok. The last version is in the sandbox on firefox addons. If you want to download it, you will have to login, but if you prefer, I can send you by mail.

    In any case, I would like to have your feedback about the solved problem.

    Thanks

  11. vinc17 dijo:

    Thanks for this quick fix. I confirm that problem is solved (I’ve tried on the w3 page and on my personal web pages, where I initially noticed the problem).

  12. Rumoroso dijo:

    Ok vinc17, thanks. The problem was a function that uses xpath. It didn’t work in documments served as “application/xhtml+xml”.

    Thanks again for your feedback

  13. Gianfranco dijo:

    !Ola Rumoroso!

    I’m not a graat expert so I’m unsure yor plug-in can do what I’m looking for: I’ve a large (160+) manual in html format and I’d like to print its pages just like any pdf document (the very boring alternative would of course be loading each page from each hyperlink and print them manually). It consists of an idex.html page with a number of links, each of which pointing to a page which usually leads to further pages… in a tree structure.

    I’ve not been able to find any utility/program/macro/function to accomplish this. Will HeadingsMap do the job? If not, do you have any clue where the hell I might find someting useful?

    Thanks for your time and congrats for your work :-)

    Gianfranco

  14. Rumoroso dijo:

    Hi Gianfranco.

    I’m sorry, but headingsmap can not help you in that job. This Firefox extension works with hierarchical structures made with head elements (h1 to h6) in each web document, and you need load a sequence of documents. We are talking about different hierarchical structures…

    I don’t know any function that could help you, sorry…

    pdt: i would like to know if you find the way to do that? Good luck :)

  15. Hauke Laging dijo:

    Hello,

    I often want to give an URL to somebody whichs leads him directly to the right position in the document, something like http://foo.bar/doc.html#itshere

    There is a very nice Add-on that shows the anchors in a document: https://addons.mozilla.org/de/firefox/addon/416

    This function could be integrated into HeadingsMap. You could offer a right-click menu that copies the URL for the selected heading (given it has a name=”" or id=”" attribute) to the clipboard.

    Hauke

  16. Brett Zamir dijo:

    Hi,

    Awesome extension!

    Had a request: could you allow certain text to be removed from headings? It’s kind of annoying that Wikipedia includes the text “[edit]” inside each heading tag, so it’d be great if it could be stripped out.

    Thanks!

  17. I guess that to get the mortgage loans from creditors you ought to present a great reason. But, one time I have received a commercial loan, just because I wanted to buy a bike.

  18. SEO dijo:

    Very nice add-on for firefox and very usefull for search engine optimizers, web developers and seo consultants

  19. WallaceM dijo:

    There seems to be a problem with the current version at Mozilla – won’t install in FF4.0Beta10
    Updated June 25, 2010 – version 1.05.7 ???

  20. John dijo:

    Hi, this extension crashes FF4 so I won’t be able to use it until it gets fixed.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>