Skip to content
Newer
Older
100644 81 lines (62 sloc) 3.8 KB
fcd2c6e added first draft of docs
Jen Fong-Adwent authored Jun 11, 2012
1 # Overview - version 0.1
2
3 ## How It Works
4
0b230bd Improve documentation and fix tests.
Karthik Viswanathan authored Jul 19, 2012
5 Users create a project for each potential application/site they have in mind. Each project contains multiple screens, which represent pages or different views. After selecting a layout for a screen, users can add components—articles, forms, navigation, etc.— and their corresponding elements—headings, paragraphs, input boxes, links—as a means of wireframing the pages they would eventually like to create.
fcd2c6e added first draft of docs
Jen Fong-Adwent authored Jun 11, 2012
6
0b230bd Improve documentation and fix tests.
Karthik Viswanathan authored Jul 19, 2012
7 But wireframes are not limited to interaction at the inter-screen level. Through links and form submissions, they can also have intra-screen connections. For example, a contact form on one screen could submit to a thank you page represented by another screen. In this way, users are able to create a more complete mockup that not only mimics the final product's aesthetics, but also its interactions.
fcd2c6e added first draft of docs
Jen Fong-Adwent authored Jun 11, 2012
8
0b230bd Improve documentation and fix tests.
Karthik Viswanathan authored Jul 19, 2012
9 Once the site is complete, the project can be run as a demo or exported to a standalone node.js express application.
fcd2c6e added first draft of docs
Jen Fong-Adwent authored Jun 11, 2012
10
11 ## Technical Code Generation Process
12
13 HTML elements include: \<input type="text|radio|checkbox"\>, \<textarea\>, \<select\>, \<audio\>, \<video\>, \<img\>, \<header\>, \<footer\>. All other required elements are auto generated.
14
15 HTML elements require a name and optionally a boolean flag of whether it is required or not if an \<input\> or \<textarea\> element is used.
16
17 Web components include: a section, a generic form and authentication.
18
19 * Screens are created from a project (sitemap).
20 * HTML elements are embedded into either a section or generic form web component. The authentication component is an independent module that cannot have external dependencies.
21 * As elements are dragged and dropped, they generate the appropriate JSON data on the server. Proposed format below:
22
23 ```json
24 {
4e05aeb updated documentation with data structure
Jen Fong-Adwent authored Jun 15, 2012
25 "id": 1,
26 "title": "My Project",
27 "author": "test@test.org",
fcd2c6e added first draft of docs
Jen Fong-Adwent authored Jun 11, 2012
28 "screens": [
29 {
ba62cff json format cleanup and layout attr additions
Jen Fong-Adwent authored Jun 12, 2012
30 "name": "screen1",
31 "is_start": true,
32 "layout": "col4",
33 "components": [
34 {
35 "type": "authentication",
36 "layout": "row1"
37 },
38 {
39 "type": "form",
40 "action": "screen2",
41 "layout": "row2",
42 "elements": [
43 {
44 "type": "text_field",
45 "name": "first_name",
46 "required": true
47 }
48 ]
49 },
50 {
51 "type": "section",
52 "layout": "row3",
53 "elements": [
54 {
55 "type": "video",
56 "src": "http://test.com/test.ogv"
57 }
58 ]
59 }
60 ]
fcd2c6e added first draft of docs
Jen Fong-Adwent authored Jun 11, 2012
61 }
62 ]
63 }
64 ```
65
66 Notes on JSON attributes:
67
68 * Required auto-generates validators for fields if they are empty (specific formatting for email addresses are currently ignored)
69
70 After a sitemap is complete, compiling code consists of looping through all the screen objects starting with the one flagged "is_start": true. Only one can be true, the rest are set to false.
71
72 Each component generates a pre-written template of code - e.g. forms will generate a form (and include any child input fields) and authentication will generate a Browser ID login link and respective logout link. Pre-written templates may include back-end code alongside client-side views and CSS/JS files.
73
74 ## Client-side Template Structure
75
76 There will be four layouts to choose from that components and elements can be inserted into. Grid sample below:
77
78 ![Grid samples](http://dl.dropbox.com/u/1913694/napkin_flows/layout.png)
79
80 The CSS scaffold will ensure that all screens are responsive and all components and elements resize appropriately.
Something went wrong with that request. Please try again.