Name ¶

_Term.english:
• html5.id.toc.preview-webpage,
• html5.id.toc.preview-page,
• html5IdTocPreview-webpage,
• hitp-webpage,
• hitp-webpage-application,
• hitp-web-page,
• hitp-page, ¶

_Abbreviation:
• wpgHitp,
• hitp,
• hitpwpg, ¶

HTML5 (page-structure) ¶

We use HTML5-elements to create the structure of a hitp-page. Every hitp-page has 1 <header>-element, 1 optional <footer>-element, and many <section>-elements.
• The header-element is the first body-element with 1 h1-element that serves the title of the document.
• The optional footer-element is the before last element without a heading-element.
• Every section-element includes 1 heading-element and other non heading-elements, mainly html-paragraph-elements. Also a section-element includes other sections-elements with ordered-headings in the form h1, h2, h3, ... The last section-element has a h1-element with content 'Meta Info'. ¶

IDs ¶

The core concept of our proposal is the addition of ID attributes on all elements of an HTML text.
For example:
<h1 id="idXxxx">...
<p id="idYyyy">...
Now we can refer to any part of the document!!! ¶

The IDs must be unique.
You can use as ID whatever you want. We sugest to begin with "id" in order to be distinguished from other words in the text and do not contain spaces. For example:
id, idHeader, idIndex-income, ... ¶

The IDs must be visible to the reader.
The reader, in order to refer to any part of the document, must know the ID of this part of the file. This can be done by adding a hidden element in this part of the file that will be visible when the mouse is over this text. But if this hidden-element is and a link-element, then the reader could copy the address of this part of the file from the address-bar of his browser. Here are some examples of the simple code we have to add to reach our goal.
<h1 id="idXxxx">...
  <a class="hide" href="#idXxxx">¶</a></h1>
or
<p id="idYyyy">...
  <a class="hide" href="#idYyyy">¶</a></p>
With this code, when the reader has the mouse over an HTML-element (a part text), at the end appears the ¶ symbol. Putting the mouse over this symbol, s|he can see the ID of this text and clicking on this symbol he can copy from the address-bar the address of this particular part of the text. The paragraph you are reading now has the feature we are talking about and you can experiment with it.
NEW {2013.04.04}: By clicking on a heading|paragraph goes to that element and the reader sees the address. This is done with javascript code. We could have and the "manual" way with the ¶ symbol in case the code does not work in old browsers and also with the apperance of the this symbol the reader understands the functionality of the html-element. ¶

ID Patterns.
If the author of a doc uses patterns to write the IDs of a text-file, it helps the reader to quickly identifies the parts of the file. Example:
- idA4 (article)
- idA4P2 (paragraph)
- idP2 (Part)
- idP2C2 (Chapter)
NOTATION: the id of a heading is the id of its section-element plus H1, H2, etc. This way we can link and preview the part of the doc with this heading. ¶

Table-of-Contents ¶

When you are reading text on a computer screen you are losing your reading-position.
Hitp-docs automatically create the table-of-contents (toc) of the text that shows your reading-position.
HOW: you need to add the following code inside the head element:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="http://synagonism.net/hitp/hitp.js"></script>
The attributes of my toc (hitp.js) are:
* It is expandable.
* There is two-way communication between the toc and the text.
- By clicking on the toc, goes to that heading and the user can copy the address of any section of an article.
- By clicking on a the text, in the toc is highlited this section and its parents are only expanded, giving to the reader the big picture of the position s|he is reading. Thus the toc improves the readability of big articles.
* If the user needs more space for the text, the splitbar has a button that closes|opens the toc with one click.
* The splitter changes width.
* By setting the "page-path" paragraph, as in this file at the end of the text, the javascript-code displays it at the begining of the toc. Thus the reader has always visible the position of the file in the structure of the site.
NOTE:
a) the javascript code is FREE under the LGPLv3 license. I don't feel a js expert, I'm interesting in functionality. Please report improvements in the code.
b) my previous approach was the creation of a Chrome extension, my Table-of-contents-crx which creates a toc on any page with heading only in Chrome. ¶

CSS ¶

CSSs separate content from presentation. We use a css-file for harmonization in the appearance of documents and for the toc creation.
You must have this file (together with hitp.js) in a local directory or link to it online. ¶

Links ¶

By setting IDs in all elements of a text, we can refer to any part of a document. Then we can use links in all places in a text we refer to another place inside a document or outside of it. Law-texts are full of references. Find the references it is difficult and sometimes impossible. If the references are "one click away", then reading law will become easier. ¶

Index ¶

Html5.id.toc.preview-files (what we are proposing here) improve the functionality of the indexes of text-files because we have the capability to refer|link, from the index, to any part of the text (because we use IDs) and preview these parts. ¶

Link preview (popup) ¶

Another functionality that facilitates reading is the addition of pop-ups (previews) on interal links with destination relatively small chunks of text. This is espacially usefull for footnotes, abbreviations, definitions, index items, paragraphs etc.
HOW: you only have to add the class 'popupTrigger' on the links you want to trigger popups when the reader is hovering over them.
<a class="popupTrigger" href="#idPreview">link-preview</a> ¶

Page-path ¶

By setting a paragraph with id "idMetaWebpage_path", the program sets its content as the first paragraph of the left splitter pane.
NOTE: If the document does not contain this paragraph, the program sets the title-element as page-path. I set this paragraph as the last paragraph of the document. ¶

Site-structure ¶

Every hitp-page, except of presenting its own structure, presents and its site-structure in a pull-down menu.
HOW: You have to add ONCE in the root-directory of the site the file 'hitpmenu.html' with the site-structure in the form of an unordered-html-list. Of cource, modifying this file, all the hitp-pages will present the changes. ¶

Versioning ¶

We can have a simple versioning paradigm on hitp-pages by setting the date on its file-name plus one or more numbers indicating how many times changes have occured, ie 'index.2013.05.15.3.html' (= version 3 of index.html on 2013.05.15).
Having and a file with only the file-name but with the LAST version we can always have access to the last version. From internal links we can have access to previous dated versions. As example look this file.
Evolution is a continuous entity. Every author 'subjectively' desides when to call a page 'version'. The last version can hold and minor changes we do not think important to hold records on these. ¶

Math formulas ¶

Using MathJax we can have "beautiful math in all browsers". For example: $x=\frac{-b\pm \; <!--pm,\; PlusMinus,\; plusmn-->\sqrt{b^2-4\; <!--it,\; InvisibleTimes-->a\; <!--it,\; InvisibleTimes-->c}}{2\; <!--it,\; InvisibleTimes-->a}$
HOW:
1. we need to add the following code inside the head element:
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> and
2. create the math-code. An easy method is from the online site ShareMath. ¶

Examples ¶

The site presents many examples with our proposal. Actually I'm writing the site with this proposal. Reading the code of these examples and seeing its behavior, is the best way to understand what really we are proposing.
• ebook-examples.
• law-examples.
• standard-examples. ¶

Download ¶

At the "Meta Info" section may exist the option to dowload the text in a zipped file. Unzip the file in a directory you want. Then double click the html file. ¶

File structure:
The html5.id.toc.preview-format is comprised of:
1) an html-file with the text-content and
2) maybe a directory with all other, IF needed, files such as pictures, audio, video, css, etc. The name of the directory is the same with the name of the html-file plus the '.files' extension.
If there is a compressed file to download, then this includes and online files needed for reading it. ¶

Evolution of proposal ¶

{version.2013.08.21.6}: Site-structure:
Now each hitp-webpage presents and its site-structure except of its own structure. ¶

{version.2013.07.15.5}: ToC Algorithm:
I wrote a new smaller specific algorithm that creates the ToC of a hitp-page.
The previous was the one of html5-outliner-chrome-extension.
Also I enclosed the code in one literal object, the 'HITP'.
I allow gaps in headings like: h1, h2, h4 because existing docs use this pattern. ¶

{version.2013.06.27.4}: Name:
I change the name of the proposal from html5.id.toc to html5.id.toc.preview (= html5IdTocPreview)
in order to include all its main attributes.
Abbreviation: ebkHitp, hitp. ¶

{version.2013.04.14.3}: Link Preview:
HTML5.ID.TOC.PREVIEW: Another feature that facilitates reading-productivity. ¶

{version.2013.04.01.2}: Table of Contents:
HTML5.ID.ToC: Adding a few lines of javascript code the static-pages are becoming dynamic ('applications!') but this facilitates reading. This way the 'electronic-text' begins to have more advantantages than 'printed-text'. Other forms of 'electronic-text' which merely digitize printed-text are inferior to 'printed-text'. ¶

{version.2011.02.17.1}: first publication:
HTML5.ID: the goal of my first try was to show a simple method of a text-format we can read in a ubiquitous web-browser that anyone can REFER to any part of it. The main types of texts I had in my mind were law-texts. ¶

Problem (issue) ¶

overflow-x:visible, overflow-y:auto {2013.08.23}:
I needed this combination to display the site-menu, but I found that it does not work even in the new flexbox layout.
WORKAROUND: hovering on the menu, it displays only the left navigation container. ¶

License ¶

This webpage's work is FREE under
the creative commons
Attribution 3.0 Unported (CC BY 3.0) license. ¶

Meta Info ¶

VERSIONS:
• version.14.last.minor: index.html (2013.08.23.14 minor 2013.08.23.14)
• version.14.last: index.2013.08.23.14.html (site-structure)
• version.13.previous: index.2013.08.20.13.html (name webpage)
• version.12.previous: index.2013.06.29.12.html (new-dir-hitp)
• version.11.previous: /hit/index.2013.06.26.html (new-name)
• version.10.previous: /hit/index.2013.06.18.html (no-doc.ready)
• version.9.previous: /hit/index.2013.06.01.html (synagonism.net)
• version.8.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.05.29.html (concept-index)
• version.7.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.05.15.html (math)
• version.6.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.04.14.html (link-preview)
• version.5.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.04.01.html (toc)
• version.4.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.03.31.html (counter)
• version.3.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.03.28.html (¶ right)
• version.2.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.01.16.html
• version.1.published: /gym-eleous.ioa.sch.gr/textid/index.2011.02.17.html
• Created: 2011.02.15 ¶

This page was visited times since 2013.05.30. ¶

Page-path: html5.id.toc.preview ∈ synagonism.net

Comments