<div>Words (where expressions come to life.)

Are you looking for a word processor/text editor application on Apple's iPhone/iPod Touch devices that has nice mix of beautiful backgrounds, slick animation, familiar word processor functionalities available on PC & Mac, intuitive & user friendly UI then it is 'divWords' application that you've been looking for. 'divWords' or '<div>Words' is a word processor application that has easy to use & "What You See Is What You Get" editor.
The application has elegant file browser (aka File Explorer) & powerful word processor. Underneath these components is application's own unique filesystem which offers faster read & write & auto save feature. The Application exploits the powerful capabilities of iPhone/iPod Touch's web browser & taps into its powerful touch architecture to present unique environment where taking notes, noting down your expressions, thoughts or even list of shopping items is real fun.The word 'div' denotes to 'div' HTML element which is the basic building block of this application.

The Main features of this application are:
  • Powerful yet elegant word processor supporting various font-families & font styles.
  • Easy to use, artistic and most useful File Explorer.
  • Editor supporting rich features such as AutoSave, Word suggestion, spelling auto-correction and undo/redo operations for 20 past changes.
  • Animation-rich & easy to use user interface.
  • Offers still or screen-saver like exotic backgrounds for file.
  • Offers to choose a charming background/skin for File Explorer.

The current version of the application is 1.6.2 & is currently supported on Apple's iPhone & iPod Touch devices. The application in its normal size (320px x 460px) when launched on Apple's iPhone looks as shown on the right (Fig. 1).

divwords main image
Fig. 1

The application has 2 main user interfaces.

  1. File Explorer
  2. Word Processor
1. File Explorer

When user fires up the application, user is presented with the File Explorer (FileList view) user interface. See first figure on the far left below (Fig. 2). It has very easy to use user interface to work with the files. It allows creating, deleting, opening, closing & renaming of a file and it also allows to sort the files in the file list based on size, name, created date or modified date. With divwords application's version 1.2.0 & onwards user can even change the skin of the File Explorer.

Adding new file
In the File Explorer (FileList view), single tap on the square button bearing '+' sign, which is on the top left, invokes a view using which the user can add a new file. Fig. 3 below shows this 'Add New File' view. As you can see there, it also offers nice way of selecting background for the new file. User can click on '>' to open new view which offers various images, one of which can be used as background for the new file. This view which offers selection of various images to select a image from as background for the new file is shown in Fig. 4 below.

Edit mode of the File Explorer
Single tap on the 'Edit button' on top-right corner gets File Explorer into the 'Edit mode'; see Fig. 5 below. When the File Explorer gets into the 'Edit mode', 'Edit Control Bar' gets uncovered. This 'Edit Control Bar' situated just below top title/button bar has various controls to change the look & feel of the File Explorer (FileList view). This 'Edit Control Bar' slides in horizontal direction & with the current version of 1.6.2, it houses 2 controls.

  1. Sort control to allow user to change the sort order of the files listed in the file list.
  2. background control to change the background/skin of the File Explorer.
In short, in edit mode of the File Explorer user can
  • change the sort order of the files in the list
  • delete a file
  • rename a file
  • change the skin of the File Explorer

explorer main image
Fig. 2
explorer main image
Fig. 3
explorer main image
Fig. 4
explorer main image
Fig. 5

Opening a row in the file list for changes
In order to change the name of a file or delete a file, user has to open a row corresponding to the file for 'Edit' by unlocking it; see Fig. 6 on the far left below where single tap on circular red lock allows the user to delete or rename the file 'My shopping list 2010'.

Changing the name of the file
When a row, corresponding to the file, is open or unlocked for edit then a single tap on the file name in that row opens the filename for change. Then another tap in that edit box of filename invokes keyboard allowing user to change the name. See Fig. 7 below.

Deleting the file
When a row, corresponding to the file, is open or unlocked for edit then a single tap on the delete button prompts the user to confirm the delete operation. If user selects 'YES' then the file gets deleted from the file list as well as from the FileSystem. It should be noted that once user deletes the file, its gone; there is no way of recovering the deleted file; so user should be careful before selecting 'YES' in that confirm dialog box.

Changing the background/skin of the File Explorer (FileList view)
Now user can select suitable background/skin for the FileList view from available 6 different background/skin options. The 'Edit Control Bar' which gets exposed when the File Explorer is in 'Edit Mode', with version 1.2.0 & onward, houses one more control called 'Background Control'. User needs to slide 'Edit Control Bar' to the left to see this control; refer to Fig. 8 below which shows this control. This new control is horizontal lists of postal stamp sized various images; just click on any one to choose it as the background for the FileList view. Application, now with version 1.2.0 & onwards, by default uses 'snow' named background; user can change it per his/her need. The Fig. 9 on the far right below shows how the File Explorer view looks like when 'heart' background is picked up by the user. You can compare this Fig. 9 shown below with Fig. 2 shown above to get the feel of choosing different skins for the File Explorer.

explorer main image
Fig. 6
explorer main image
Fig. 7
explorer main image
Fig. 8
explorer main image
Fig. 9

Reporting total file count, total file size & last file opened
With App version 1.6.0 onwards, FileList view reports

  • Total number of files
  • Total size in bytes of all the files
  • Last file opened irrespective of if that file was changed or not when opened.
Normally this information is hidden & user needs to drag the FileList downward to see it. See Fig (9.b) below.

explorer main image
Fig. 9b

2. Word Processor

When a file is opened by clicking on '>' sign near the right edge of a file entry in the file list of explorer then that file gets opened in Word Processor view. The user interface then looks as shown below in Fig 10, first figure from left. Fig. 10 is where the file is opened but it is not open for edit yet & this helps user to work with the file without any fear that the file content may change inadvertently. Also here, care is taken to ensure that opened file gets full screen. This mode is called non-edit mode.

Changing the background of the open file
This non-edit mode, by the way, does allow user to change the background of the file. Fig 10, if looked at closely shows a small circular lock right in the middle of top button bar. A single tap on this circular lock slides the open file downward & that uncovers the control list which currently houses a control bar which can be used to change the background of the open file. Fig. 11, shows this control bar getting exposed right below the top button bar. This control bar houses various postal sized images & shows how background would look like once user selects it. User can tap on any one of these images to select it as a background. Word Processor changes the default font color, border color of the file, background color of the selected word(s), border color of selected word, etc. depending on which background user selects. Eg. If the user selected background is darkgrey then Word Processor selects 'white' as default font color & this will change the color of all the text in the open file to white provided user has not specifically marked it for some other color already. Fig.12, shows how the same file looks like when 'sky' named background is selected for the open file; compare this Fig. 12 with Fig. 10 to get the idea. Application offers variety of charming backgrounds that user can choose to suite his/her mood.

Choosing Screen Saver like background for the open file
Now with application version 1.5.0 onwards, the background of a file has become more exotic. Thats right, now user can choose *dynamic* or screen saver like background for his/her file. Imagine user writing or taking down notes on the file & the file has the beautiful sky in the background & puffy clouds are blowing from right to left in the background. Or consider this, the background of the file shows gorgeous tree full in fall foliage colors, shading its leaves & leaves while falling are floating around before hitting the ground. Now user has a privilege to write on a file with such animated backgrounds.
In current version of 1.6.2, there are 2 backgrounds those can provide this screen saver like animated background for a file & they are 'sky' & 'autumn'. Yes, 1.5.0 has introduced a new background 'autumn' (last in the list of the backgrounds) which supports this screen saver like theme & old 'sky' background is changed in this version to provide the animated background.

Various features supported by Word Processor
When the file page is touched (except it is panned up or down for reading) in non-edit mode then the file is opened in the edit mode. The edit mode user interface shown in Fig. 13 shows menu bar at top. User can use menus from this top menu bar to apply various styles to the selected text. Current version 1.6.2 of divWords allows user to make following style related changes to text.

  • Changing fonts.
  • Changing font-size.
  • Changing font-color.
  • Changing background-color of text.
  • Changing font-weight (making bold).
  • Changing text decoration (oblique, underline, strike-off)
  • Changing text-alignment of paragraph (to right, to left or to center).
  • Adding a graphical line.
  • Adding color to paragraph.
  • Adding border to paragraph.
User can apply above mentioned changes to a selected word or selection of the words or a paragraph of a selected word or the paragraphs of selection of the words. Whether it is selected word(s) or paragraph(s) that will be affected is decided by style being applied. Certain styles apply just to paragraph(s).

explorer main image
Fig. 10
explorer main image
Fig. 11
explorer main image
Fig. 12
explorer main image
Fig. 13

Single Tap
Single tap selects a word or part of a word depending on where touch occurred. Blue dotted border indicates selection, please see Fig. 13 above which shows a word 'rich ' being selected. Also top menu reflects the current style applied to selection made. Fig. 14, first figure from left below shows how top menu reflects which styles are applied to selected word 'express'.

Double Tap
Double tap selects a word which is being tapped (see Fig. 15, second figure from left below) & then from there user can change selection, to add or remove more words from selection.
The double tap selection can be expanded using the selector guards at the border of selection. When user moves a selector guard to change the selection a square text guide box appears just above the word which is being touched by a selector guard, see Fig. 16 below. This square text guide box shows the words without any style they might be carrying but shows them magnified so that user can make selection with a precision.

Long Press
Long press shows up similar square text guide box where words are magnified & listed without any style they are carrying. This helps user to position cursor anywhere in a word with a precision. First figure from the right, Fig. 17, below shows how longpress on word 'rich' shows up 'square text guide box' above word 'rich'.

explorer main image
Fig. 14
explorer main image
Fig. 15
explorer main image
Fig. 16
explorer main image
Fig. 17

Undo/Redo operations
Now with the Application's 1.4.0 version onwards, the word processor supports undo/redo operations on the file under edit mode. Under edit mode, single tap using two fingers, that's right, two fingers (preferably two fingers next to the thumb) invokes a simple button bar which has 3 buttons; it offers 'undo' button for undo operation (revert back original operation), 'redo' button for redo operation (redo original operation after reverting the change) & 'done' button to get done with this button bar. Please see Fig 18, below which shows how this 'undo button bar' looks like when first invoked & when there are no changes done to the file so nothing to undo or redo & hence both the buttons, undo & redo are disabled whereas done button is available.
What is more interesting is user can move this 'undo button bar' & keep it anywhere where user wants; this helps user to see how application performs 'undo' & 'redo' operation on a file without losing the 'undo button bar'. Please see Fig 19 below, here, 'undo button bar' is moved over to top menu bar while undo/redo operations are being done. Note that at this time enough changes are done to the file & some of them have been reverted back & that is why this button bar shows both, 'undo' & 'redo' buttons enabled.
Please note that this support is available only under edit mode for the Word Processor. If background of the file is changed under non-edit mode then that can not be reverted back using this undo/redo operation. In fact undo/redo is not supported under non-edit mode. The depth of the history for undo/redo operations is 20.

explorer main image
Fig. 18
explorer main image
Fig. 19
Terms & conditions