Download ¶

_Name:
• hitp'download, ¶

_GitHub-site:
Since version.2014.08.05.10.valuenames I published the code on GitHub.
• https://github.com/synagonism/hitp/.

To use the online files, use the files on the-project-page on GitHub.
• https://synagonism.github.io/hitp/hitp.html.
• https://synagonism.github.io/hitp/hitp.css.
• https://synagonism.github.io/hitp/hitp.js. ¶

_Synagonism-site:
• latest: hitp.html, hitp.css, hitp.js. ¶

HTML5 ¶

_Name:
• hitp'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'. ¶

html-file ¶

_Name:
• hitp-doc,
• hitp'html-file,
• hitp'file,
• 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'. ¶

IDs ¶

_Name:
• hitp'id, ¶

_Description:
The core concept (and first motive) 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 is an examples of the simple code we have to add to reach our goal.
<p id="idYyyy">...
  <a class="clsHide" 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 (the-id-link-symbol).
Clicking on this symbol, s|he can see the ID of this text and s|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. ¶

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.
Examples:
- 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. ¶

Links ¶

_Name:
• hitp'link, ¶

_Description:
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. ¶

Math formulas ¶

_Name:
• hitp'math, ¶

_Description:
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. ¶

css-class ¶

_Name:
• hitp'css'class
• hitp'cls, ¶

_Description:
Like the IDs, the name of all css-class begin with 'cls'.
Below is the code of the classes I am using. ¶

hitpcls.clsCenter {
  text-align: center;
} ¶

hitpcls.clsCenterBlock {
  display: block;
  margin-left: auto;
  margin-right: auto;
} ¶

hitpcls.clsCenterInline {
  display: block;
  text-align: center;
} ¶

hitpcls.clsBtn {
  border-radius: 5px;
  font-size: 12px;
  margin: 2px 0 5px 12px;
} ¶

hitpcls.clsBtn:hover {
  background: #e0f2f7;
  color: red;
} ¶

hitpcls.clsColorBlue {
  color: #0000ff;
} ¶

hitpcls.clsColorGreen {
  color: #008000;
} ¶

hitpcls.clsColorGreenBg {
  background-color: #008000;
} ¶

hitpcls.clsColorRed {
  color: #ff0000;
} ¶

hitpcls.clsColorYellow {
  color: #FFFF00;
} ¶

hitpcls.clsColorYellowBg {
  background-color: #FFFF00;
} ¶

hitpcls.clsEditor {
  background: transparent;
  color: #999999;
} ¶

hitpcls.clsFontGrExt {
  font-family: "Palatino Linotype";
} ¶

hitpcls.clsFontGrMg {
  font-family: MgPolNewTimes;
  font-size: 16px;
} ¶

hitpcls.clsFontSerif {
  font-family: Serif, "Times New Roman", Georgia;
} ¶

hitpcls.clsFontSansserif {
  font-family: SansSerif, "Microsoft Sans Serif", Arial, Dialog, Tahoma;
} ¶

hitpcls.clsFontMonospaced {
  font-family: Monospaced, "Courier New", Courier;
} ¶

hitpcls.clsFontScript {
  font-family: Script "Monotype Corsiva";
} ¶

hitpcls.clsFontDecorative {
  font-family: Wingdings;
} ¶

hitpcls.clsPagePb {
  display: block;
  text-align: right;
  color: green;
} ¶

hitpcls.clsHide {
  //misc attributes that hide id-link (¶) and expose it by hovering.
} ¶

hitpcls.clsSizeSmall {
  font-size: small;
} ¶

hitpcls.clsSizeSmallX {
  font-size: x-small;
} ¶

hitpcls.clsSizeMedium {
  font-size: large;
} ¶

hitpcls.clsSizeLarge {
  font-size: large;
  font-weight: bold;
} ¶

hitpcls.clsSizeLargeX {
  font-size: x-large;
  font-weight: bold;
} ¶

hitpcls.clsB {
  font-weight: bold;
} ¶

hitpcls.clsBU {
  font-weight: bold;
  text-decoration: underline;
} ¶

hitpcls.clsU {
  text-decoration: underline;
} ¶

css-file ¶

_Name:
• hitp'css-file,
• hitp'file.css, ¶

_Description:
You can download this file, or use the online one. ¶

JavaScript-file ¶

_Name:
• hitp'js-file,
• hitp'file.js, ¶

_Description:
You can download this file, or use the online one. ¶

Table-of-Contents ¶

_Name:
• hitp'toc,
• hitp'toc-tree, ¶

_Description:
When you are reading text on a computer screen you are losing your reading-position.
Hitp-webpages automatically create the table-of-contents tree (toc) of the-content of the-page and show 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-content.
- By clicking on the-toc, goes to that heading in the-content.
- By clicking|hovering on content, this content position is highlited in the-toc 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-content, the splitbar has a button that closes|opens the-toc with one click.
* The splitter changes width.

My previous approach was the creation of a Chrome extension, my Table-of-contents-crx which creates a toc on any page with headings only in Chrome. ¶

Link preview (popup) ¶

_Name:
• hitp'link-preview,
• hitp'popup,
• hitp'preview, ¶

_Description:
Another functionality that facilitates reading is the addition of pop-ups (previews) on interal (same-origin)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> ¶

hitp directory ¶

_Name:
• hitp'dir, ¶

_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,
• 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. ¶

hitp-title ¶

_Name:
• 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 ¶

_Name:
• 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. ¶

Concept-Index ¶

_Name:
• hitp'concept-index,
• hitp'index.concept, ¶

_Description:
Every text describes 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). ¶

Concept-Model ¶

_Name:
• hitp'concept-model,
• hitp'modelConcept, ¶

_Description:
Every text describes concepts and relations of concepts, which form a subjective MODEL (modelConcept) of reality.
More important than the-concept-index is the-modelConcept of the-text.
A crude example of a-modelConcept contains my hitp-page of the Keynes book 'The General Theory of Employment, Interest, and Money'. ¶

Name-Index ¶

_Name:
• hitp'name-index,
• hitp'index.name, ¶

_Description:
Β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 ¶

_Name:
• hitp'index.word,
• hitp'word-index, ¶

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

Firefox ¶

location.href {2013.08.16}:
FIXED
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}:
FIXED
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. ¶

Versioning ¶

_Name:
• hitp'versioning, ¶

_Description:
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 you are reading.
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. ¶