hitp-webpage
html5.id.toc.preview format with
HTML5, IDs, Table-of-Contents, Link-preview

Description

HITP (html5.id.toc.preview) is a FORMAT (method) of publishing WEBPAGES (digital-texts | ebooks) with these advantages:
1) html5: no need for special programs to read them, as all machines have the needed browser (= html reader). Also html5-elements structure the text for humans and machines.
2) id: anyone can refer to ANY PART of them, because all their html-elements have IDs.
3) toc: automatically created expandable table-of-contents makes reading easy.
4) preview: same domain link-preview makes reading fast.
Knowledge of html is a prerequisite to read the rest of this page.

Name

Term.english:
• generic-specific-pair--webpage, {2013.09.01}
• html5.id.toc.preview-webpage,
• html5.id.toc.preview-page,
• html5IdTocPreview-webpage,
• hitp-webpage,
• hitp-webpage-application,
• hitp-web-page,
• hitp-page,
• title-value-pair-webpage,

Abbreviation:
• wpgHitp,
• hitp,
• hitpwpg,

HTML5

We use HTML5-elements to create the structure of a hitp-page. Every hitp-page contains an ordered-set of title-value-pairs which are implemented with 1 header, 1 optional footer, and many section html5-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 p-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.
{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.
{2014.01.09}: I found annoying the clicking-functionality because it sends the text at the top of the page. So now hovering a text, you see its position in the page-structure and clicking on ¶ or on ToC you see its address.

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://your-domain/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 MIT license, on GitHub. 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.

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 'clsPreview' on the links you want to trigger popups when the reader is hovering over them.
<a class="clsPreview" href="#idPreview">link-preview</a>

Page-structure

Every hitp-webpage is comprised of:
• one html-file with the main content and
• one optional directory with all other needed files.

hitp html-file

Name:
• hitp-doc,
• hitp-file,

Description:
The body-html-element of this file contains the information we want to publish in a ORDERED-SET of 'TITLE-VALUE-PAIRS'.

hitp directory

Description:
This directory contains all the extra files needed for the hitp-file.
Its name is the name of the hitp-file plus '.files'.

hitp title-value-pair

Name:
• hitp-title-value-pair,
• title-value-pair,
• tvp,

Description:
The information (content) of a hitp-page is structured for humans and machines.
The representation method I use I call it: 'title-value-pair' method.
Its name describes the methodology. All content is an ordered set of pairs that contain a hitp-title and a hitp-value.

Implementation:
A hitp-title-value-pair is implemented with the section, header or footer html-elements.

Depth_level:
The title-value-pairs of a page create a tree-structure. Then each title-value-pair has a 'depth-level' value in this structure. The root has a depth-level of zero. The deepest node has a dept-level of 6 because we use heading-html elements.
PROPOSAL: Because many documents use deeper depth-level than six (even though I do not think it is a good practice) I proposed on 2010.10.24 in public-html-comments@w3.org list to use all the single-digit numbers 0-9 as html headings.

header title-value-pair (required)

Description:
It is the first title-value-pair.
It contains the title of the webpage.

Implementation:
It is a header html-element with parts one h1-element for the title.

Depth_level:
0. This node is the ROOT in the tree-structure of the information published.

section title-value-pair (at least one)

Description:
These are the title-value-pairs that contain mainly the published information.

Implementation:
It is a section html-element with parts ONE h-element for the title.
Its value can contains other section-tvps of lesser depth-level in a tree-structure.

Depth_level:
It is a number 1, 2, 3, 4, 5, 6 indicating the heading html-element we use for its title AND the depth-level in the tree-structure of the information published.

footer title-value-pair (optional)

Description:
It needed sometimes as the last part of the information published.

Implementation:
It is a footer html-element.
EXCEPTION: It may have no hitp-title. Then it is assumed 'Footer'.

Depth_level:
1.

meta-info title-value-pair (required)

Description:
Usually the last tvp is meta-tvp with metadata about the hitp-webpage.

Implementation:
It is a section html-element.

Value:
• the author of the page.
• versioning info.
• page-path info.
• page visited info. etc.

Depth_level:
1.

hitp-title

Description:
A hitp-title is the 'name' (title) of a hitp-value-pair.
Denotes the type of information the hitp-value contains. In other words, the hitp-title is some generic-information and a hitp-value is a specific or instance of the hitp-title.

Implementation:
A hitp-title is implemented as a heading html-element OR as text that ends with ':' in the FIRST line of a paragraph. (IF we set '_' in the begining of a term we can distinguish it from same terms inside 'hitp-values').

hitp-value

Description:
A hitp-value contains structured (like an html list or table) or unstructured information (like sentences or phrases of a natural-language).
Recursively, it can contains other ordered-sets of title-value-pairs.

Implementation:
The main parts of hitp-values are html-paragraphs.
We can use and any other body-element except headings.
We can use div-elements to create substructures.

Page-path

By setting a paragraph with id "idMetaWebpage_path", the program sets its content as the first paragraph of the left navigation container, showing where the page fits in the site's-structure.
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 meta-info--title-value-pair.

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.

Misc attributes

CSS

CSSs separate content from presentation. We use a css-file for harmonization in the appearance of documents and for the toc creation. You need the following code to use it:
<link href="http://your-domain/hitp/hitp.css" rel="stylesheet" type="text/css" />
So, hitp.css and hitp.js is the code needed to create hitp pages, and is free (MIT license).

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 them.

Math formulas

Using MathJax we can have "beautiful math in all browsers". For example: x = b ± b 2 4 a c 2 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.

Download

At the "Meta Info" section may exist the option to dowload the hitp-page in a compressed file. Uncompress 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 the online files needed for reading it.

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.

Concept-Index

Every text describes relations of CONCEPTS.
We can create the concept-index of every text, which is another method to represent the SAME information with the text.
With a concept-index the READER can have direct access to the concept s|he is interesting and from there to any RELATED other concept.
If a concept-entry has the definition and the related attributes of the concept, the reader will understand quickly the text.
An example of html5IdTocPreview text with a concept-index is the greek-constitution (in greek).

Name-Index

Βy setting as ID on each name|term-entry the pattern "idIndex-term", the reader will have very quick access to the entries.
un.sna.2008.html is an example with a name-index.

Word-Index

The majority of programs today search a text for words and NOT names.
By pressing Ctrl+F or F3 you can search for words.

Evolution of proposal

{version.2014.08.05.10}: TYPENAMES | VALUENAMES:
With 'valuename' I mean a NAME (identifier) of a VARIABLE (= a name-value pair), that denotes the VALUE (type) with which it is associated.
Now ALL the custom names of my code are valuenames, with its FIRST-CHARACTER to denote its value|type:
- aName denotes array.
- bName denotes boolean.
- fName denotes function.
- nName denotes number.
- oName denotes object.
- rName denotes regular-expression.
- sName denotes string.
- xName denotes multiple-values.
This method is a SIMPLE method to make JavaScript a type language!!! This way we increase the readability of the source code.
I published my new code, with the MIT license (= do whatever you want, only mention my work), on GitHub at https://github.com/synagonism/hitp.

{version.2014.08.02.9}: NO jQuery:
I rewrote the code, by removing jQuery. Everything now is vanilla JavaScript.
Fixed: preview popup location.

{version.2014.01.09.8}: Table-of-contents:
Hovering a piece of text, you see its position on ToC. To see the address of the text you click on ¶.
With the previous functionality, you had to click on text to see its position.

{version.2013.11.06.7}: Tabs:
The page-structure is set under a tab.

{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.

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.

Browser compatibility

Hitp is tested only on Chrome and Firefox.

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.

:after psudo-element {2013.08.23}:
Inherits properties from its dependent element, like 'underline' which we cannot change.
WORKAROUND: I hide it when I hover the main element, but have other problems.

Firefox

location.href {2013.08.16}:
In contrast to Chrome, Firefox loses selected-text after setting value on 'location.href'.
WORKAROUND: first click to go to that location and then select-text from this location.

Back-Forward {2013.08.16}:
Clicking on buttons 'back', 'forward' shows the visited locations but does not go to that location.
WORKAROUND: click on the address-bar and hit enter.

License

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

The computer-code is under the MIT license, you can find it on GitHub.

Meta Info

VERSIONS:
• version.14.last.minor: index.html (2013.08.23.14 minor 2014.11.22.14.12)
• version.14.last.minorNo: 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: hitp-webpage ∈ synagonism.net

Support

Comments

comments powered by Disqus