SitePen branded version of Dojo Offline - same build as Dojo Offline, just branded to connote SitePen's collaboration, creation, and sponsorship of Dojo Offline. Default templates include reference to SPOT, so end-users will see this name in web applications that use SPOT (similar to how Flash and Java are branded development tools)
Open source Dojo Offline - Same as SPOT just the open source name.
First is a mockup of an offline-enabled Gmail using SPOT. The offline UI developed for Gmail is meant to be tailorable and generic, a drop in widget/UI for SPOT-enabled applications.
The following is supported offline:
If you have never installed SPOT for any website or for Gmail you will see the following:
The user is basicly informed that they can download SPOT. If you click the "Learn More" link, a popup appears with a web page with the following text; this will of course be styled, and can be tailored and branded for individual apps that use SPOT:
See SPOT Run...
...even if you're offline
SPOT is the SitePen Offline Toolkit (SPOT), a free open source utility that makes it easy for your favorite web applications to work, even if you're offline. Now you can access your data even when away from the network!
To get started:
The download link in the text will automatically select the correct install for the platform the user is working from, while the individual links under "Windows", "Linux", will are anchor links that jump to a single download page where a user can do a manual download of packages. The first step, the 'Download' step, will have the words '(Already Installed)' to the left if the user has already installed SPOT in the past.
Note that this page will be generic across SPOT applications, and can be customized for individual applications.
Here is what Gmail looks like after SPOT has been installed:
The little green ball next to the 'Offline Info' is green when the user is online, and red when the user is offline.
The 'Learn How' link is still present in case the user had SPOT installed from a previous web site. When they navigate to the Learn How page shown earlier, they will see '(Already Installed)' next to the download SPOT step, but they can now drag a unique hyperlink to their desktop to start this web application, even if offline.
The Synchronize button will do two-way synchronization. More on this later.Under this button is a status area for sync messages, which is currently blank.
There is also a timestamp on when the last sync occured, in this case "Yesterday at 9 AM". Under this are the number of unique, new or modified items that might be in the user's local cache but which are not available remotely; this is shown with the '3 modified offline items' text.
Finally, the Configure button will open in place to show configuration buttons (explained later), while the SitePen button is SitePen branding to indicate SitePen's collaboration and creation of SPOT.
By default, when the user first signs into Gmail, Gmail automatically starts synchronizing, downloading the 100 most recent emails into the local cache, uploading any offline emails written offline, and downloading the UI into SPOT if this is the first time Gmail has been accessed with SPOT installed:
Status messages appear below the button, which changes into the text "Synchronizing...". The status messages give the percentage of completion so far, along with various messages. A Cancel button appears to the right of the button, which can be pressed to cancel and the ongoing operation.
Various status messages can appear. Here are some more in this example, moving forward in time:
If successful, the user will see the Success message:
For this release of SPOT, complicated merges through a UI is not supported. Instead, the server must make a best-case decision based on its application-domain of how to merge data; for example, if the timestamp on a user's modified local document is greater than the one on the server, the server will simply take the user's new document. The server can choose to maintain a history of older documents to perhaps back out of an automatic merge, but this is outside the domain of SPOT for now. If an automatic merge appears, the text '(details)' will appear next to the Success message:
If a user clicks the "(details)" link, a popup window will appear with text returned by the server that indicates how merging might have occurred, similar to the log the Palm Pilot software uses after a sync (which also does automatic merges, btw). This should be terse and not confusing, such as "The document 'foobar' was changed on the server, but your version is newer -- yours was used."
If an error occurs, the error message appears:
If the 'details' link is clicked, a popup window also appears with details on the error.
If the user is not on the network and they press the synchronization button, a message will appear that you are not on the network in the status area.
When the Configuration link is pressed in the Offline Info widget, an inline configuration screen will appear:
The 'Enable offline' checkbox can be used to completely turn off offline ability; if turned off, everything below it will turn off.
'Synchronize automatically' controls whether the web app synchronizes on page load, and whether it periodically checks the network in the background to upload local changes. If off, the user must always press the Synchronize button to initiate two-way communication.
These two checkboxes are generic across SPOT applications; an app can choose to have the 'Sychronize automatically' option be off for their particular domain, such as for a web-based book reading application.
Application specific offline configuration follows; in general, this controls the kind and amount of material to bring offline. In this case, it is the number of newest emails that are synced.
The 'Empty' button will clear the cache after the user confirms, while the 'Storage Settings' link only appears if the Dojo Storage provider being used supports a configuration screen (hasSettings()). This will pop up the underlying storage providers storage configuration screen; Flash, for example, will pop up it's own storage dialog, which the user can use to restrict or allow more space for this web application's offline needs.
Individual emails or ranges of emails can be selected, and the 'More actions..." pull down at the top of Gmail can be selected, where the option 'Download Offline' appears. This can be used to bring specific emails into your offline cache that are perhaps older.
Since Gmail has threaded discussions based on subject, any emails referenced by the first 100 downloaded will also be downloaded to support reading through this discussion. Also, attachments will be downloaded into the offline proxy, unless they are above a certain size.
Finished on paper but not drawn on the computer yet - basicly same widget as GMail's Offline Info, but on the right-hand side of the page in the Blogger Dashboard. On page load, automatically downloads last 10 blog posts, including images used in those posts. Individual blog posts indicate next to them if they have been locally modified ("modified offline"). If a blog post is not downloaded offline yet, the link "Download Offline" appears, which when clicked changes into 'Downloading...' while the Offline Info widget shows downloading progress.
Finished on paper but not drawn on the computer yet. The main Google Docs page that lists your docs and spreadsheets is modified to have the Dojo Offline widget on the left hand side of the page. Google Docs will automatically download your 20 most recent documents into the cache, or those that are less than 1 month old, when you first sign in. The Dojo Offline widget will show this synchronizing activity, just like the GMail example does. Next to files that are modified locally appears the text '(modified offline)', while files that are not offline have the link '(Download Offline)' next to them. When clicked, this link does the same as the Blogger example -- which when clicked changes into 'Downloading...' while the Offline Info widget shows downloading progress.
Finished on paper but not drawn on the computer yet. Most corporate portals have a "My Dashboard" page, which the Offline Info widget slots into very neatly. On individual pages where the Offline Info widget doesn't appear, such as viewing a specific corporate document, expense report, contact, sales lead, etc., on the upper-right of this item appears the link "Download Item". When clicked, this changes inline into a small synchronizing widget, saying "Downloading..." and reporting the percentage of finishing and status messages. It closes with the same kind of Successful or Error message as the standard Offline Info widget.
In this way, a corporate portal's users can download the data that makes sense to them. The portal software would set suitable defaults for what kind of data to automatically download, such as the last 2 weeks and next 2 months of calendar data, etc. The Configuration inline screen in the Offline Info widget would provide more control for the end-user for these different data types, such as "[3 Months] of My Calendar" where the [] is a text field.