More documentation and diagrams

docs/Command Line Sketch.jpg.meta

@@ -0,0 +1,3 @@
+title: Command Line Sketch.jpg
+modifier: JeremyRuston
+type: image/png

docs/Main Screen Sketch.jpg.meta

@@ -0,0 +1,3 @@
+title: Main Screen Sketch.jpg
+modifier: JeremyRuston
+type: image/png

docs/View Switcher Sketch.jpg.meta

@@ -0,0 +1,3 @@
+title: View Switcher Sketch.jpg
+modifier: JeremyRuston
+type: image/png

tiddlywiki5/tiddlers/Introduction.tid

@@ -4,6 +4,10 @@ TiddlyWiki5 gains new capabilities through a [[completely rebuilt architecture|T
 
 TiddlyWiki5 also functions as the build system for earlier versions of TiddlyWiki, replacing the elderly Cook and Ginsu tools (see https://github.com/TiddlyWiki/cooker for details). See the CommandLineInterface for details.
 
+Learning more about TiddlyWiki5:
+* WaysToUseTiddlyWiki discusses the various configurations in which TiddlyWiki5 can be used
+* Some very rough UserInterfaceSketches showing where it is heading
+
 Some useful tiddlers for feature testing:
 * ClockTiddler showing automatic refreshing of tiddlers
 * ImageTests showing different ways of embedding images

tiddlywiki5/tiddlers/UserInterfaceSketches.tid

@@ -0,0 +1,35 @@
+title: UserInterfaceSketches
+modifier: JeremyRuston
+
+!Introduction
+At its core, TiddlyWiki is a representation transformation engine with a cunning line in selective live updating. The engine could be used to build many different user interface experiences. The role of the core UI is not to be all things to everyone, it is just to provide a beautiful and compelling interactive experience for the activities that experience has shown to be popular.
+
+!Principles
+* The best UI is transparent: just the content, no chrome unless you need it
+* Design for touch and mobile first, keyboard and mouse second, and play well with screenreaders
+
+!Sketches
+The basic idea is to preserve the page itself for the content, styled and arranged as the user wants. The interactive features necessary to use the application are overlaid when needed, and then get out of the way:
+
+[img[Main Screen Sketch.jpg]]
+
+Swiping in from the left of the screen reveals the primary navigation chooser, an explorable fisheye menu that gives you access to all your tiddlers, categorised and linked to make them easy to find.
+
+The sketch below shows the main screen layout along with the contents of the //view switcher//. This allows the user to select between different ways of looking at tiddlers:
+* As a packed mosaic of images and text (like the jQuery Masonry plugin)
+* As a row of stacks for Kanban type sorting activities
+* As a lines-n-boxes diagram, with a plugin mechanism for laying them out
+* As a screensaver, where random tiddlers float up the screen
+* As a timeline/calendar
+* As a stack of cards that are sorted one by one
+* As a horizontal row of columns
+* As a vertical stack of tiddlers (like classic TiddlyWiki)
+* As a zoomable user interface (like Cecily)
+* As a command line (see below)
+
+[img[View Switcher Sketch.jpg]]
+
+!Command Line
+The idea of the command line is to give people an environment that makes it easy to interactively process tiddlers, performing one-off imports and exports of data, or batch operations on many tiddlers at once. It was somewhat inspired by [[this wonderful experiment on reimagining the command line terminal|http://acko.net/blog/on-termkit/]].
+
+[img[Command Line Sketch.jpg]]

tiddlywiki5/tiddlers/WaysToUseTiddlyWiki.tid

@@ -0,0 +1,58 @@
+title: WaysToUseTiddlyWiki
+
+!Introduction
+TiddlyWiki5 will be deployable in a wide variety of different arrangements to suit different needs. The archetypal configurations are listed below along with a measure of how much complexity is involved in setting up each one -- once set up properly, the TiddlyWiki user experience should be consistent regardless of configuration.
+
+|!Name |!Description |!Barriers |
+|SelfContained |TiddlyWiki's familiar model of a self-contained HTML file containing application logic and application data, with the ability to save changes in most browsers |Low: you just need a browser |
+|ExplodedFolder |An extension of TiddlyWiki's classic model that explodes the single file into its constituent parts as separate files |Low: you just need a browser |
+|LocalHelperApp |Running TiddlyWiki5 as a node.js helper application on your PC |Medium: you need to install node.js, and run a batch file |
+|PrivateServerApp |Running TiddlyWiki5 as a node.js application on a cloud server |High: you need to understand how to install and maintain software on a server |
+|Component |Using TiddlyWiki5's representation transformation engine and user interface layer as components in a larger system |Very High: you need to be a reasonably experienced software developer |
+|CustomBrowser |Building a custom web browser around TiddlyWiki to let it work optimally on a particular platform |Very High: you need to be a pretty experienced software developer |
+
+!SelfContained Configuration
+This is the familiar form of TiddlyWiki: a single HTML file that runs in the browser containing both the application logic and your data. On many browsers you can edit your content and save your changes without any special add-ins. Even without the ability to save changes, this configuration offers compelling advantages as a content distribution medium by allowing you distribute a fully interactive web experience with just a dumb, reliable static web server.
+
+The SelfContained configuration performs well on the web. By packing all the required JavaScript, CSS and HTML into a single file we avoid the latency that comes from traditional websites bringing in external resources as they load in the browser.
+
+!ExplodedFolder Configuration
+This form lays out your data and the components of TiddlyWiki as separate files:
+{{{
+folder/
+	index.html
+	tiddlywiki.js
+	content/
+		MyTiddler1.tid
+		MyTiddler2.jpg
+		MyTiddler3.svg
+}}}
+You can just open the `index.html` in the browser. The content is lazily loaded as required. In some browsers you will be able to make changes to the data through the browser too
+
+The key advantage of this configuration is that it plays well with existing desktop PC file tools, including source code control systems like Git and Subversion.
+
+!LocalHelperApp Configuration
+This configuration uses node.js to enable TiddlyWiki5 to run as a local web server. This means that you interact with it from your browser, typically going to a URL like `127.0.0.1:8080`.
+
+On most operating systems, installing node.js is a single step operation - see http://nodejs.org/ for details. Once installed, running TiddlyWiki requires a simple command line that you can type in the terminal or assign to a shortcut:
+{{{
+node tiddlywiki myfolder/index.html
+}}}
+In this configuration, TiddlyWiki5 can store data in either a single SelfContained file, or in the ExplodedFolder layout.
+
+!PrivateServerApp Configuration
+TiddlyWiki5 can also be run under node.js on an Internet server hosted by a cloud provider such as Amazon or Joyent. In this configuration, your data is stored on a private computer in the cloud, and you access it securely using a browser. In this way you will be able to access your data from any device, including mobile devices.
+
+!Component Configuration
+Although TiddlyWiki5 can work as an HTTP server, it is not designed for large, high traffic installations. Instead, the representation transformation engine at the heart of TiddlyWiki5 can be used as a component within more elaborate HTTP servers to enable them to offer TiddlyWiki's flexible WikiText features.
+
+Work is underway to use TiddlyWiki5 within TiddlyWeb and TiddlySpace:
+
+https://github.com/cdent/tw5ikifier
+
+!CustomBrowser Configuration
+Many mobile platforms lack direct support in the browser to enable TiddlyWiki to save changes locally. One way around this is to use an online flavour of TiddlyWiki. A relatively straightforward option on many platforms is to write a custom application that embeds TiddlyWiki within a web browser control. For example, see these applications that work in this way with classic TiddlyWiki on iOS and Android:
+* [[AndTidWiki|https://market.android.com/details?id=de.mgsimon.android.andtidwiki]] for Android Devices
+* [[TWMobile|http://itunes.apple.com/gb/app/twmobile/id381945222?mt=8]] for iPad
+* [[TWEdit|http://itunes.apple.com/gb/app/twedit/id409607956?mt=8]] for iPhone, iPad and iPod Touch
+* [[tiddlyNotes|http://itunes.apple.com/us/app/tiddlynotes-lite/id465933435?mt=8]] for iPhone, iPad and iPod Touch

tiddlywiki5/tiddlywiki5.recipe

@@ -6,7 +6,9 @@ style: styles.css
 tiddler: tiddlers/*.tid
 tiddler: tiddlers/*.jpg
 tiddler: tiddlers/*.svg
-tiddler: ../docs/High Level Architecture.svg
+tiddler: ../docs/*.svg
+tiddler: ../docs/*.png
+tiddler: ../docs/*.jpg
 #tiddler: http://wikitext.tiddlyspace.com/fractalveg.jpg
 #	type: image/jpeg