Move the mouse cursor onto the box "TOC" and
a menu with the table of contents will drop down.
It will always be available in the upper left corner
of the screen, wherever you go to on this web site.
            Move the mouse cursor onto the box "HTML" and a menu with
buttons for modification of the HTML source will drop down.
It will always be available in the upper right corner of the screen,
wherever you go to on this web site.

 idUIF  - Introduction

idUIF  is the first software for UIF-building by which you can  interactively  modify HTML-files right on screen, and have a  dynamic  Table of Contents (TOC) that you will always have right at hand  (in the upper left screen corner)  wherever you go to on the web site.

The "i" stands for "interactive": For the first time, the users can not only  (passively)   read  the content of a web site, but also  (actively - for themselves only)  modify it, e.g. by marking interesting text passages  (by underlining, printing in bold letters, etc.)  or inserting  own comments  - before printing it out, e.g. for archiving it, to discuss it with colleagues, or send it by email.

Till now, this required some paperwork:

If your colleagues were not personally present but reachable only e.g. by email, the paperwork grew even more:

(Isn't that absurd: Originally, the basic information was in a machine readable form already. - But the fact is, in a  global working community  email is the only way you can contact your colleagues!)

The "d" stands for "dynamic".  Till now, it was like that: the Table of Contents (TOC) of a web site was only  statically  available  (usually at top of a web site) . So the users again and again had to jump back, when they wanted to jump to another section.  (That is, if they hadn't forgotten meanwhile  what they were looking for!) 

Another solution with a static TOC was  that all the main titles were displayed on each page - occupying a large part of the screen, of course. So, for the actual content only a small part was left.  (With today's computers this might still be all right, but with the coming tablet computers with small screens this will be a real problem!) 

For the details, the users had to jump back to the main section. Often only to see that this was not what they were interested in. So they had to jump back again …

On professionally used web sites, who knows how many orders have been lost by this -
when the visitors' interests were waning before they had found what they were looking for!

With idUIF, however, in the upper left screen corner there is a small "anchor" moving along whenever the users are going to another place of the web site.
When the users are moving the mouse cursor up to the upper left screen corner, a menu with the Table of Contents is dropping down - being closed again, when a title in the TOC is clicked  (or when the mouse is moved out of the menu) . Thus, the users can jump  from anywhere  directly  to any section  of the web site.

Within the menu, as well, the TOC is not static: The main sections are sub-divided into "groups"  (group headers preceded by the symbol [+]) . Groups can have sub-groups of their own.  (Basically, the nesting level of sub-groups is unlimited. Thus, any number of details can be packed into a small menu.)  So, the users can read through the titles without haste before jumping to a section.

In the latest version of  idUIF  recurring users can even  lump together titles  meeting their interests  to a "personal group" - and hide all the other titles in the background.  (That's particularly interesting for a work of reference, in which such users tend to look up the same topics again and again - so, all the other titles would just be distracting!)  - Or, looking at it from the other side: Companies with a large range of offerings will be interested to give the visitors to their web site the feeling:  "You can get just about 'everything' from us; however, you can tailor our web site to your personal interests!" )

The Table of Contents is created automatically, if the author is complying with some simple rules.

 (That's very useful with web sites of a rather volatile nature - such as this software documentation: Thanks to this "AutoTOC"-feature I can write about the traits of a new version at any place of this web site. Next time the users are starting up their browsers on it, the  AutoTOC  will create the new titles at the right place of the TOC, I don't even have to care about it!) 

idUIF = cross-browser fit

From the very beginning,  idUIF  was kept cross-browser fit. Meaning, whatever browser you are using, my software will always deliver the same results.  (Though, it turned out that not all browsers are equally easy to handle, when it comes to delicate handling such as when moving/copying menu items.) 

This might not be a problem when online communication is done within rather small communities with a common headquarter. But if you want to provide it to an unmanageable number of users  (or use it in the public domaine) , this could become really tough!

Get your own experience with  idUIF !

While you were reading this, you had  idUIF  right before your very eyes all the time.


Look in the upper-left screen corner - the little box in a green frame, labelled "TOC"  (you might hardly see it between all those black-on-white lines!) . That's the 'anchor' of the dynamic user interface. When you move the mouse cursor up to it, a menu will drop down with all the titles of sections in this document.

Section Grouping

Not all of the menu items are visible, initially. Some items are marked with "[+]". When you click onto such a marking, the corresponding group will be opened  (the marking "[+]" will turn to "[-]") . When you click onto a marking "[-]", the group will be closed  (the marking "[-]" will turn back to "[+]") . In each case, the scrolling of the document remains the same.
If you want to jump to the header of the group  (or any of the sub-headers within the group)  you should click onto its text.

To make the menu handling easier, the markings as well as the menu items are highlighted when the mouse cursor is hovering over them.

On every jump, the  anchor  of this menu will be scrolling along.  (That's why it is called "dynamic".)  So - at any time, wherever you are in the document, you can jump directly to any other section, without the detour of jumping to a static menu first.

Sub-items can in turn be headers of sub-groups. The level of grouping is infinite  (though, in practice, more than 5 or 6 levels will hardly make sense) . Thus, a 'table of contents' can have virtually any number of sections, even within a small menu.

When many groups are opened at the same time, the menu would grow such that the bottom items would move out of sight. Before that, the menu will develop scroll bars. By dragging them, the bottom items can be made accessible again.

If you think, the menu has been bloated too much and is showing too many sub-items, you can close a group by clicking its header  (its marking "[-] turns to "[+]" then) . If this group is containing sub-groups, they will remain opened or closed, just as they were when you closed their parent group.  (If the menu had scroll bars, after closing a group they might be gone - to appear again when the menu is growing once more.) 

Temporary bookmarks

Temporary bookmarks is a feature that's unique to  idUIF.   (If there is something similar in the Internet, I have not seen it yet.)  They remain effective for the current session only. When the document is reloaded  (by pressing F5) , they are gone.

To use them:

When you later want to return to this line, press any key  1  ..  9.  The line you marked before with the corresponding temp. bookmark  will be scrolled into view, at the top edge of the screen.

Temporary bookmarks are very valuable when you want to carefully compare a number of text passages at different locations. It seems not exaggerated to claim that substantial e-communication is hardly possible without temporary bookmarks.


Now, look in the upper-right screen corner. There's another little green box, labelled "HTML". When you move your mouse cursor up to it, another menu is opened with a number of buttons, each one with a symbol of an interactivity-operation ("U" for underlining, "B" for making bold, " I " for making italic, etc.).

With deeply nested or overlapping markings, it's all too easy to get unexpected results. Often, just changing the sequence of markings would yield a very different outcome.
In practical use, nested or overlapping markings will rarely be needed. But once you need them, you should know that you can easily end up with "shooting yourself in the foot"!

Looking more closely, you will notice two rows of buttons, one with the designation "Fix:", the other row with "Var:".

Fix: " are all those operations that are triggered by
  1. selecting the text to be modified
  2. clicking one of the buttons in the "modify"-Menu
     U  (underline),  B  (bold),   I   italic),   A   (big),  A  (small),  “”  (smart quotes) ,  BR  (line break) ,  NBR  (No line break within selection),  Excerpt  (Launch selected text in a new window),  HR  (horizontal line),  sub  (subscript),  super  (superscript),  Unmark  (remove markups),   #  (custom bookmark),  PRE  (preformatted text)

Then the selected text is modified right away. If the result is not what you wanted, click " Undo " beneath the "Var"-row and the document will be the same as before the latest markup operation. You might even decide that you clicked  Undo  overly hasty, that the result was not so bad. Then you can click " Redo " (beneath "Undo"), and the result of your latest modification will be restored.

"Undo" works for the latest modification only. If you want to undo a modification that was done some time ago, you can do that by " Unmark ":

  1. Select the text with the modification to unmark
  2. click "Unmark"

Watch out, however: It is all too easy to unmark also a modification you wanted to keep!

Then there is another row of buttons.

Var: "

The buttons in this row should be used as follows:

  1. select the text to be modified,
  2. click one of the buttons in the "Var:"-row,
  3. then a  local dialog  will be launched with inputs by which you can set the details of the modification.
  4. Finally, click the dialog's OK "-button if you are finished with the settings and want the modification to be executed, or the Esc "-button if you changed your mind and want to leave the dialog without execution.  (Correspondingly, you can press the ENTER- or the ESC-key.) 
Local Dialogs

The  local dialog  is a concept that was developed specifically for  idUIF  in order to make it cross-browser fit and avoid needing a whole bunch of sub-windows. With  local dialogs  , everything is assembled in one file  (idUIF.js) . Thus, one line ( <SCRIPT src="idUIF.js"></SCRIPT> ) is all that's needed to equip any HTML-document with  idUIF .

A  local dialog  can be handled just like a sub-window. Depending on the mouse cursor, you can

When you "drag"  (= press the mouse button and move the mouse)  you can move the dialog in any direction, until you release the mouse button.
(This will be possible only when you click the dialog in its header line. )
Resize in north-south direction:
When you "drag"  (= press the mouse button and move the mouse)  you can resize the dialog in NS-direction, until you release the mouse button.
(This cursor will appear only when you move the cursor onto the upper or lower horizontal edge of the dialog.)
Resize in east-west direction:
When you "drag"  (= press the mouse button and move the mouse)  you can resize the dialog in EW-direction, until you release the mouse button.
(This cursor will appear only when you move the cursor onto the left or right vertical edge of the dialog.)
Resize in north east - south west direction:
When you "drag"  (= press the mouse button and move the mouse)  you can resize the dialog in NESW-direction, until you release the mouse button.
(This cursor will appear only when you move the cursor onto the upper-right or lower-left corner of the dialog.)
Resize in north west - south east direction:
When you "drag"  (= press the mouse button and move the mouse)  you can resize the dialog in NWSE-direction, until you release the mouse button.
(This cursor will appear only when you move the cursor onto the upper-left or lower-right corner of the dialog.)

If the dialog is comprising more inputs than can be displayed at once, it has scroll bars. The inputs that are not visible you can make accessible by dragging the scroll bars.

The top line (if any) can be changed by typing into it directly.

A setting can be activated by clicking onto its option. Its background color then changes to blue.

If it's the last setting you want to change in this dialog, you can double-click it. Then the dialog is closed and its action is executed with the new settings.

Once in focus, settings can be changed also by up- or down-button.

To change from one input to the next, you can press the Tab-key. To change in the opposite direction, press Shift+Tab-key.

If you prefer, you can close the dialog by clicking the OK-button or pressing the ENTER-key as well  (except in  comment  dialog or  HTML  dialog) . Then the dialog's operation is executed.

If you want to abort the dialog, click the Esc-button or press the Esc-key. Then the dialog's operation is NOT executed.

Using Local Dialogs

Take, for example, the  U  "-dialog  (for "variable underlining") :

When you click that button right away, an alert box will remind you: " Nothing selected! " - So, select the text you want to be underlined, then click the  U  "-button

The corresponding local dialog will come up then.

The  local dialogs  for inline- and for block-operations are basically the same but with many other settings.  (Some of them you might be surprised to find here!)  Initially only those for framing are visible, the others are accessible by scroll bars or resizing the dialog.

Link Dialog

If you want to make a text passage to a link  (to an Internet site, or to a file stored on your local computer)  you can do so by:

  1. Select the text passage you want to transform to a link.
  2. Click the "Link"-button in the modify-menu.
  3. A  local dialog  is coming up with the following inputs:
Img Dialog

By this local dialog you can insert an image tag into the current document:

  1. Select any text within the block where the image is to be put in front.  (One letter is enough.) 
  2. Click the "Img"-button in the modify-menu.
  3. A  local dialog  is coming up with the following inputs:
Comment Dialog

If you want to insert your own comment, you can do so:

  1. In the block before which you want to have your comment inserted, select any piece of text.  (No matter which one, one letter is enough.) 
  2. Click the "Comment"-button in the modify-menu.
  3. A  local dialog  is coming up with the following inputs:
HTML Dialog

That's the most powerful dialog in  idUIF  - yet, also the one by which you can completely ruin your document  if you are not quite familiar with HTML.  (So, one might argue, does it really make sense to provide a tool that's so open to erroneous or even intentional misuse? - Well, that's a question left to the individual applier!) 

It can be used as follows:

  1. Select the text passage whose HTML you want to modify.  (It might also have images or similar included. Then you will see  how this was implemented in HTML.) 
  2. Click the "HTML"-button in the modify-menu.
  3. A  local dialog  opens up in the middle of the screen. It has only one textarea, in which the selected text  (incl. its markups, if any)  is displayed.
  4. For not making it too intimidating, it was kept small initially. If you want to make it larger, just drag in the lower-right corner of the textarea. The dialog will automatically grow.
  5. In this textarea you can modify the HTML source code as you like.  (If you do anything wrong here, the browser will simply ignore it, or even crash!) 
  6. When you are finished, click the "OK"-button  (or press the ENTER-key)  and the HTML dialog is closed, your modified HTML will replace the selected text.
    If you want to abort that dialog, click the "Esc"-button  (or press the Esc-key)  and the HTML-dialog is closed  (without inserting your comment) .

Note that in the HTML Dialog (just like the Comment Dialog) you cannot close by pressing the ENTER-key - this would be taken as a line break in the textarea that's in focus currently!

New Bookmark Dialog
In  idUIF  you can insert a bookmark to a text already existing (by the  Fix: -operation  # ) as well as a completely new bookmark:
  1. In the block before which you want to have your new bookmark inserted, select any piece of text.  (No matter which one, one letter is enough.) 
  2. Click the new #-button in the modify-menu.
  3. A  local dialog  is coming up with the following inputs:

Setting bookmarks is good for integrating an e-document into a major body of information, as well as making a certain text passage directly accessible via TOC-menu. So, for effective e-communication with many separate documents among many people  you will need to set bookmarks either unobtrusively by  #  or even quite prominently visible by new #


By this operation you can get access to the  soft code  generated by  idUIF   (bookmarks assigned by AutoTOC, plus your HTML-modifications - if any) .

For storing it:

The hardcoded version of your document you will need if you want to archive your document, send it to other people, etc. This could be one step in a long development process.

For closing the text area, it's enough to click "Esc"  (or press the  Esc -key) 


If you are not satisfied with the outcome of your HTML-modification, just click menu item "Undo"  (or click the key combination  Ctrl-Z) .  The situation before your latest HTML-modification will be restored.


In working creatively, it might happen sometimes  that after undoing an HTML-modification you are overcome by doubts: "Perhaps this was not so bad?" - Then you just need to click menu item "Redo"  (or click the key combination  Shift+Ctrl-Z) .  and the result before your latest undoing will be restored.

Exit Warning

When you modified the HTML  (even if you have undone it meanwhile!) , when you try to exit the web site  (or simply press  F5 )  a warning box will pop up, saying something like

This page is asking you to confirm that you want to leave -
data you have entered may not be saved.

This warning was built for reminding you that your modifications are not saved yet. In case of a mere printout this might be no problem - but if you want to keep your modifications in machine-readable format, you should save now!

Menu Configuration by User

 idUIF  is the first UIF-software  (software for building a user interface)  by which the users themselves can determine what they want to see in a menu:

By clicking with the  right  mouse-key  (short: "r-click")  they can get a "meta menu" stretching across the menu to be configured  (the "initial menu")  In the meta menu all the operations are offered that are  (basically)  possible at this point in time.  (Those operations that are possible but would yield an empty result are  disabled .)  When one of the  (not disabled)  meta items is clicked, the corresponding modification is executed in the initial menu.

By dragging menu items they can move/copy items. By this, combined with the functionality of  New group  and  Rename  in the meta menu, all users can rearrange the menu to their own taste.

Meta menu

The meta menu is lauchend on every r-click in the initial menu  (except if this was declared as " nomodify ", such as the HTML-menu in the upper-right corner of the screen).  According to the place in the initial menu that was r-clicked, the meta menu is behaving differently:

Hide/Show Items

This group has different contents, depending on the place that was r-clicked in the initial menu:
 Mark all ,  Unmark all ,  Hide all marked 
When r-clicked outside of the items in the initial menu, only operations are possible referring to all items in common, i.e.  Mark all  and  Unmark all .  Mark all  is disabled when all items are marked.  Unmark all  is disabled when all items are not marked.
 Mark ,  Unmark ,  Show all hidden 

When any of the initial items was r-clicked, different items are presented in the meta menu:

After clicking  Mark  a third meta item comes up:


By a clever combination of r-clicks onto and outside of initial items much work can be avoided:

E.g. if you want to pick only a few out of many items, the best way to do it is:

  1. R-click onto the menu (outside of items!)
     Then you get a meta menu with an item "Mark all". By it, with a single click you can mark a great many of initial items. 
  2. Now r-click one after the other of the few items you want to pick out, and click  "Unmark"  in the meta menu.
     The item r-clicked will be unmarked then. 
  3. When all the desired items are unmarked, r-click the initial menu again  (outside of items!)  and in meta menu click  Hide all marked 
     All the undesired items will be hidden then. 

Similarly, the items hidden now can be made accessible again later.

Caution should be used, however, if you want to pick out some  groups  of items: By  Mark all ,  Unmark  of Group Headers and  Hide all marked  only the group headers are remaining, the groups however are empty!
In such a case it will be better to mark the group headers of those groups that are undesired. By  Hide all marked  then only the headers are hidden but that's enough: The items in these groups are not accessible anymore!

New Group

Apart from the group  Hide/Show Items  the meta menu has the permanent item  New Group  when it's called by r-clicking the initial menu outside the menu items.

When  New Group  is clicked, an item  [+] New group  appears at the bottom of the initial menu. By dragging, it can be moved to any other place in the menu  (or even hidden as a sub-group in another group) .

If you want to fill the initially empty group, don't forget to open it at first by clicking its marker [+]. Although you won't see it  (since it is empty, just the marker turns to [-])  the group is open then, and ready to receive items. From now on, the new group will behave like any other group in the menu.


When the meta menu was launched by r-clicking onto any of its items, it has the permanent item  Rename . When you click this item, in the initial menu the item that was r-clicked is replaced by a text input whose value is the initial item's text.  (Depending on your browser, this text may be selected. Be aware of that: When you type in any character now, the whole text is gone!) 

The handling of a text input is the same as you are accustomed to from any text editor  (incl. arrow keys, backspace, etc.)  - When you are finished with entering the new name, press the ENTER-key. The text input is replaced then by its latest text value.

A frequent use of  Rename  will be, when you created a  New Group  and want to give it a meaningful name. - However, even with the names of permanent items it might be useful:

Create a your personal group by copying permanent items into it. Then it might be helpful to add a few cues to their names that will help you to quickly grasp their effects when clicking them. - Of course, you can rename an item later as well, with your experiences reflected by a part of the new name.

Move Items by Dragging

 idUIF  is the first software for UIF-design which offers users the possibility to re-arrange menu items, simply by dragging them.  (Although exact dragging is not so easy with some browsers - rather kind of a puzzle!) 

"To drag" is the computer people's jargon for

The place where you "drop" the dragged item determines where it will be placed after dragging: When dragging top-down, it will be placed* right  behind  the item that was visible above the cursor when you release the mouse. When dragging bottom-up, it will be placed* right  above  the item that was visible beneath the cursor when you release the mouse.

*Placing an item means, it will either be  copied  to the new place, if you press the Control-key during dragging. Otherwise it will be  moved , i.e. it disappears from its old place and re-appears at the new place.

When dragging a group header  (no matter whether the group is closed [+] or open [-])  the total group will be moved with it.
Thus you can create a group with sub-groups:

When dragging an item into an  open  group, it will become a member of this group  (so its indentation will change) .
When dragging an item to behind a group header of a  closed  group  (indicated by the symbol [+]) , it will be placed behind the total group  (i.e. its group level will be the same as before, its indentation will be unchanged) .

Copy Items by Dragging

Just as easy  (well, "easy" - depending on your browser!)  as you can  move  a menu item, you can also  copy  it to another place: just keep the Control-key pressed during dragging!

In combination with the operation  New group  in the meta menu this can be used to create your  personal group . If you are working within a group of several people, all of them working alternatingly with the same HTML-application on the computer, this will make its UIF much more user-friendly:

Business Outlook

The current  idUIF-software is, of course, not more than a "proof of concept". Just to show you that this new methode of e-communication   can   be implemented with today's computers already, not to mention future hardware improvements.  (E.g. the new carbon-nanotube hardware might soon call for better software!)  And to give you a feeling of how it is to assimilate online information right on screen.

The next step will be to adapt the software to tablet computers with touchscreens.

So, in a few years it might be possible to hold a brainstorming in the park, with your partners not even being personally present. They are connected to you via wireless Internet.
You are disseminating your proposals online, they are evaluating them right on screen, copying their contributions to another tab of their browser and responding via email within minutes. Though they might be sitting in another continent - with a tablet on their lap, operating it with one or two fingers.

Thus,  idUIF  could become part of the sixth Kondratiev wave,
giving rise to global "creative industries"!

Thus, a company joining in the development of  idUIF  would not only meet its original obligation of  making money  for its financers, but also perform a  moral  task:  Pushing the world ahead  into the 21. century!

Potential Customers

 idUIF-software might be interesting for the following segments of customers.  (Of course, this segmentation is rather virtual -  in real life, hardly any of these customers will belong to one segment only. But this might give you an idea of how my marketing will be targeted.)
  1. Manufacturers of browsers, email clients, etc.:
    They might be interested to integrate  idUIF  in their own products, in such a way as to make them "perfect tools" for disseminating online information.
    Getting such companies onboard would mean opening the way to really "paperless" online-communication!
  2. Big multinational companies:
    They are doing their internal management communication  online  for many years now. And they will clearly be interested in having it received and processed as efficiently as possible. If an email message could be responded to right on screen, they would of course welcome it!
  3. Providers of online services:
    In  idUIF  they might see a chance to make themselves known as providing the most innovative technology for e-communication to their services.
  4. Public Content producers,
    especially those who will be interested in their contents being analyzed precisely.
    In this segment it is particularly useful that the  idUIF-software was kept cross-browser fit from the very beginning. Here the users are in the public sector, the appliers have no control of what browsers they are using. - Well, they don't need to: They are just sending out contents from their servers as they always did. The only difference is one additional line of code in their HTML:   <script src="idUIF.js"></script>   Everything else is done automatically, as long as the users are on-line. 

I would not be able to recommend it with a clear conscience if I wouldn't have used it myself: When archiving articles of Spiegel Online and other online magazins, I need to markup them and insert comments and links. That's what I'm doing with my  idUIF-software on a daily base.