||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:
- Reading the pages once more after printing, in order to mark the interesting passages.
- Own comments could be added only in handwritten form, or your secretary had to type them as a supplement.
If your colleagues were not personally present but reachable only e.g. by email, the paperwork grew even more:
- The printed pages (incl. your markings and comments) had to be typed in once more
- to be attached to your cover email.
(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.
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 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:
- click any point in the line you potentially want to return to later,
- press any key combination Shift-1 , Shift-2 , ..., Shift-9
- correspondingly, a temp. bookmark 1 .. 9 will appear at the left edge of this line.
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
- selecting the text to be modified
- 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 ":
- Select the text with the modification to unmark
- 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:
- select the text to be modified,
- click one of the buttons in the "Var:"-row,
- then a local dialog will be launched with inputs by which you can set the details of the modification.
- 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.)
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 top line is reflecting the selected text. Thus you can make sure that you really selected what you wanted. (Moreover, if you want to make any changes in the wording of the selected text, you can do it in this line.)
- Next is a list for the width of underlining. Those that you will need most frequently (1px, 2px, 3px) are directly accessible, a fourth option (4px) you can get by scrolling down the list and clicking " 4px " ("px" stands for "pixel", the smallest length unit your screen can display.)
The one you will probably need most of the time (2px) is predefined.
- The next list is offering you 6 Types of underlining (solid, dashed, dotted, double, groove, ridge)
- In this dialog there's a third list, by which you can choose the color of underlining.
- Beneath it are the OK- and the Esc-button.
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.
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:
- Select the text passage you want to transform to a link.
- Click the "Link"-button in the modify-menu.
- A local dialog is coming up with the following inputs:
- The top line ("Text:")
is reflecting the selected text. Thus you can make sure that you got
everything you wanted. If you want to change anything in that text, type
right into this line.
- The next line ("URL:") is prompting you for entering the address where to link to. In most cases this will be an Internet address ( http:/ ... ) or an address on your local computer "( C:/ ... " or similar).
If you want to link to an address on your local computer, remember that most browsers (except Internet Explorer, Google Chrome) require to prepend " file:/// ". (So the complete URL will be " file:///C:/ ... " or similar.)
- In the third line ("Title:") you can enter any text you want to pop up when the users of the resulting HTML-file move the cursor onto that link, hoping to get any information what this link will bring them.
- In the fourth line ("Target:") you'll find a list (of which only the top line is visible) offering you four options for the target of this link. (You can make this list visible by clicking onto its arrow-down button.)
The target you will need most frequently ("_blank") is pre-selected. So, in most cases you don't need to set it explicitely.
- At the bottom there are again the OK- and the Esc-button.
By this local dialog you can insert an image tag into the current document:
- Select any text within the block where the image is to be put in front. (One letter is enough.)
- Click the "Img"-button in the modify-menu.
- A local dialog is coming up with the following inputs:
- In the top line ("src:") , type the file name of the respective image file. (Remember that most browsers (except Internet Explorer, Google Chrome) require to prepend " file:/// ". So the complete URL will be " file:///C:/ ... " or similar.)
- In the second line ("alt:") , you can type in an alternate text for the image (appears when the image cannot be displayed)
- The third line ("heigth:") will take the height of the image (in pixels)
- The fourth line ("width:") will take the width of the image (in pixels)
- At the bottom there are again the OK- and the Esc-button.
If you want to insert your own comment, you can do so:
- 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.)
- Click the "Comment"-button in the modify-menu.
- A local dialog is coming up with the following inputs:
- The top input ("Title1:") is a small textarea where you can type in the leading title of your comment. In many cases this title (and perhaps "Title2:") will be all you want for comment. Then, just leave the other inputs empty.
- The second input ("Title2:") will be taken as the main title of your comment. It will be inserted centered, in a slightly larger font than Title1 , right before the body of your comment (if any) or right before the block surrounding the selected text.
- Then there is following a large textarea, where you can enter the body of your comment.
If a comment has a body (with or without Title1 and/or Title2) it is framed, with the current date and time in the upper-right corner.
- In all the textareas you can enter any amount of text. If it's
exceeding the current size, it scrolls down automatically - the top
lines move out of sight but are still there when your comment is
inserted in the document. Moreover, you can resize each textarea by
dragging its lower-right corner. And if that's not enough, you can resize the local dialog itself. (Once resized, a dialog will remain at this size when you launch it again later.)
- Finally, click the "OK"-button and the comment-dialog is closed, your comment is inserted right before the block containing the selected text. (Note that in 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!)
If you want to abort your comment, click the "Esc"-button (or press the Esc-key) and the comment-dialog is closed (without inserting your comment) .
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:
- 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.)
- Click the "HTML"-button in the modify-menu.
- 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.
- 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.
- 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!)
- 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:
- 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.)
- Click the new #-button in the modify-menu.
- A local dialog is coming up with the following inputs:
- The top input ("Title:") is a small text input where you can type in the title by which this bookmark will appear in the TOC-menu (when the document has been hardcoded and the hardcoded version has been loaded again).
- The second input ("Level:")
is a select input by which you can determine the group level of this
bookmark, if you want to integrate it into a hierarchy of grouped
sections. By default, this input is set to empty (i.e. the new bookmark will be without any level indicator), which is probably the setting needed for most new bookmarks. If needed, levels "1" and "2" are directly accessible. Levels "4" to "6" can be accessed by the scroll bar of this select.
- Finally, click the "OK"-button and the bookmark dialog is closed, your bookmark is inserted right before the block containing the selected text.
If you want to abort your bookmark dialog, click the "Esc"-button (or press the Esc-key) and the bookmark dialog is closed (without inserting your new bookmark) .
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:
- Click anywhere in the text area popping up when you click the menu item "Hardcode" in the modify-menu (just to make that text area getting the keyboard focus) .
- Press key combination Ctrl-A. All the text area will be selected now.
- Press key combination Ctrl-C. All the text area contents will be copied to clipboard.
- Go to any text editor, open a new document and press key combination Ctrl-V. The text area contents copied before will be pasted into your text editor. Now you can save it to disk, etc.
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.
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.
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:
- If the r-click was such that the meta menu is completely surrounded by the initial menu, it remains in place even when it is left by the mouse cursor, until the initial menu is also left. Then, both menus are closed. When openining the initial menu again, the meta menu is gone.
It was designed that way for making a multiple change between meta and initial menu possible - such as needed when marking several initial items.
When finished with all meta operations, the initial menu can be used as normal - disregarding the meta menu still open.
- Usually all suitable items of the meta menu are visible initially. If the screen space is reduced, however (e.g. when any sub-window is open) the meta menu is shrinked to a few items only, but it has a scroll bar then. By dragging the scroll bar, the items lying outside the menu can be made accessible.
- In the meta menu, the topmost line is " marked: 0 hidden: 0 " regardless of where the r-click was done.
The number behind marked: reflects the number of items in the initial menu that are currently marked (including items in closed groups, which are not visible currently!) The number behind hidden: reflects the number of items that are currently in the background.
It was designed that way for giving the users some orientation where items that are not visible currently have been left.
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.
- If Mark all is clicked now, all items are marked with ' *'.
(Also the items hidden in closed groups. You can see it when opening a closed group now.)
Markings remain in place, even when the initial menu is closed and opened again later.
- In addition, the number behind marked: changes to the total number of items in the initial menu.
- As well, the meta items are changed. Now
- Mark all is disabled
- Unmark all is enabled
- Moreover, a new meta item appears: Hide all marked . By it, the users can hide all items that are marked in the initial menu.
When doing that right after Mark all this would mean that only an empty initial menu is left - what seems to be useless in practice. In principle however, it's possible. (Our users should not feel being under an "enforced joy". After all, it might be possible that any user is finding a reasonable use one day of an empty initial menu!)
- When clicking Unmark all , all ' *'-markings are removed and the number behind marked: is set to 0 again.
- When clicking Hide all marked , all the items marked in the initial menu (in this case all items!) are hidden, and Unmark all is disabled.
It was designed that way for preventing users to unmark hidden items erroneously. - Then it would be fairly laborious to make them accessible again!
Mark , Unmark , Show all hidden
When any of the initial items was r-clicked, different items are presented in the meta menu:
- Mark : This meta item is disabled if the r-clicked initial item was marked already.
- Unmark : This meta item is disabled if the r-clicked initial item was not marked already.
After clicking Mark a third meta item comes up:
- Hide all marked : When clicking it, all items marked in the initial menu are hidden. Consequently, a fourth meta item becomes accessible:
- Show all hidden : When clicking it, all items marked and hidden before come up again. At the same time, Unmark is enabled again.
It was designed that way so that users cannot erroneously unmark hidden items (they would be accessible again after a reboot only, by which other parts of the document might be lost!) - or at least parts of a closed group.
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:
- 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.
- 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.
- 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!
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
- moving the mouse cursor onto the menu item you want to move to another place
- pressing the (left) mouse button - and keeping it pressed
- moving the mouse to the new place of the menu item
- releasing the mouse button (that's called the "dropping" of the dragged item)
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:
- Click the [+]-symbol of the receiving group (its [+] will turn to [-] then)
- Drag the group to become a sub-group of the receiving group (right to the place where you want it to be in the nbsp;receiving group )
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:
- Lauch the meta menu by r-clicking onto the menu in which you want to create your personal group (r-clicking outside the menu items!).
- In the meta menu popping up now, click New group .
- At first, the new group will be arranged at the bottom of the menu. (Move it up in the menu, if you want to have it at a more comfortable place.)
- Now, click the [+] of the new group . Thus it will change to [-]. (The group itself will also be opened - although you won't see it because it's empty.)
- Move/copy the item(s) and/or group header(s) into the new group. (For the first item you are dragging, the new group will be empty. But it's enough to 'drop' the dragged item right behind the item "New group" - when its preceded by [–], the dragged item will be placed within the group.)
- Finally, rename the new group to any name you ever want.
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.
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!
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.)
- 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!
- 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!
- 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.
- 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.