-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprotoux-docs.html
236 lines (226 loc) · 8.82 KB
/
protoux-docs.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="">
<meta name="description" content="" >
<meta name="keywords" content="" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>
<!-- Make the world turn. -->
<script type="text/javascript" src="js/protoux.js"></script>
<!-- Prototype specific JS, CSS, etc. goes below. -->
<link href="css/protoux-css/docs.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--
Example components within a layout.
Change ID's to be unique.
Change href to point to components.
Include layouts via data-layout attribute.
-->
<header class="protoux">
<h1>ProtoUX</h1>
<p>An experimental, HTML-based wireframe and prototype framework for designers.</p>
</header>
<div class="page">
<section class="gs">
<h1>Getting Started</h1>
<div class="row box">
<div class="col span_1_of_2">
<h2>Designers</h2>
<ol>
<li>Use the latest version of <a href="https://www.google.com/chrome/browser/#eula">Chrome</a>.</li>
<li>Enable the experimental chrome flag: <br />
chrome://flags/#enable-experimental-web-platform-features</li>
<li>Download the <a href="https://thehub.thomsonreuters.com/docs/DOC-863582?sr=stream" target="_blank">ProtoUX.zip</a> and extract into a directory of your choosing. Copy this directory path.</li>
<li><a href="#iis">Setup IIS</a> for a localhost server.</li>
<li>Create your wireframes and prototype! <a href="http://www.sublimetext.com/">Sublime</a> and <a href="http://notepad-plus-plus.org/">Notepad++</a> are great, free editors.</li>
</ol>
</div>
<div class="col span_1_of_2">
<h2>Participants</h2>
<ol>
<li>Use the latest version of <a href="https://www.google.com/chrome/browser/#eula">Chrome</a>.</li>
<li>Enable the experimental chrome flag: <br />
chrome://flags/#enable-experimental-web-platform-features</li>
<li>Bug your designer for the URL to the prototype.</li>
</ol>
</div>
</div>
</section>
<br />
<br />
<div class="row">
<div class="col span_1_of_2">
<h1>Importing Partial .html Files</h1>
<div class="box">
<p>The cleanest method for importing partial HTML files into your page:</p>
<code><link is="ux-link" id="[*]" href="[*]" data-layout="[*]" rel="import"></code>
<p>Be sure to replace the [*] with a unique id for each import, the proper directory path to the import, and any optional layout class you want to be applied to the import.</p>
</div>
</div>
<div class="col span_1_of_2">
<h1>Building Partial .html Files</h1>
<div class="box">
<p>The root node of your partial .html files should have this structure:</p>
<code><div class="wrap"><br /><span class="tab"><-- Your HTML --></span><br /></div></code>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col span_1_of_2">
<h1>File Structure</h1>
<div class="box">
<p>The root directory of the ProtoUX zip file is shown below. Don't remove or change the required files or folders. Otherwise, go nuts however you want to organize your prototype.</p>
<p><img src="imgs/protoux-dirs-3.png" alt="ProtoUX file structure." /></p>
</div>
</div>
<div class="col span_1_of_2">
<h1>Layout</h1>
<div class="box">
<p>With standard HTML:</p>
<code><div class="row"><br /><span class="tab"><div class="col span_#_of_#"></span><br /><span class="tab"><span class="tab"><-- Your HTML --></span></span><br /><span class="tab"></div></span><br /></div></code>
<p>With link attributes:</p>
<code><div class="row"><br /><span class="tab"><link is="ux-link" id="[*]" href="[*]" data-layout="[col span_#_of_#]" rel="import"></span><br /></div></code>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col span_1_of_2">
<h1>Annotations</h1>
<div class="box">
<ux-annotation>An example annotation.</ux-annotation>
<p>Include any annotations within any parent container:</p>
<code><ux-annotation>Your annotation.</ux-annotation></code>
</div>
</div>
<div class="col span_1_of_2">
<h1>ProtoUX Control Bar</h1>
<div class="box">
<p>The ProtoUX control bar is included via the custom "ux-controlbar" tag at the bottom of the index.html file.</p>
<p>Toggle the bar visibility with the tilde (~) key.</p>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col span_1_of_2">
<h1>Wireframe CSS</h1>
<div class="box">
<p>Coming soon...</p>
</div>
</div>
<div class="col span_1_of_2">
<h1>Custom Elements</h1>
<div class="box">
<p>Coming soon...</p>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col span_1_of_2">
<h1 id="iis">IIS Setup (Win 7)</h1>
<div class="box">
<p>(not as scary as it looks)</p>
<ol>
<li>
Windows search for: "Internet Information Services (IIS) Manager" and open.
<ol>
<li>If you do not have IIS installed, it’s a windows feature that you can turn on:</li>
<li>Windows search for “Turn Windows features on or off”</li>
<li>Ensure that “internet information services” is checked</li>
</ol>
</li>
<li>Click the expand triangle underneath “connections” on the left until you see “sites”.</li>
<li>Click "sites"</li>
<li>Click "Add Web Site..." on the right "Actions" menu</li>
<li>Choose a site name</li>
<li>Paste the directory path where you prototype files live into the “physical path” input.</li>
<li>Click "Connect as...", select "Specific user:", click "Set...", enter your Windows username and password.</li>
<li>Click "Test Connection" and ensure all items in the results list is green/checked</li>
<li>Enter a port number that isn’t in use (84 used arbitrarily for this demo)</li>
<li>Click “OK”</li>
<li>Click on "Browse *:84 (http)" on the right side "actions" menu to ensure the site is started and working.</li>
</ol>
</div>
</div>
<div class="col span_1_of_2">
<h1>...</h1>
<div class="box">
<p>Coming soon...</p>
</div>
</div>
</div>
<br />
<br />
<hr />
<br />
<br />
<div class="row">
<div class="col span_2_of_3">
<h1>ProtoUX Change Log</h1>
<div class="box">
<p>2015.03.13</p>
<ul>
<li>Changes made for initial github commit.</li>
</ul>
</div>
<div class="box">
<p>2014.10.30</p>
<ul>
<li>You now have more freedom to organize your files and folders.</li>
<li>ProtoUX is now namespaced properly.</li>
<li>Fixed .box styling issue.</li>
</ul>
</div>
<div class="box">
<p>2014.10.13</p>
<ul>
<li>Extended link tags so that you don't have to type as much to import.</li>
<li>Restructured the file directory structure. Less clutter for you.</li>
<li>Started to consolidate ProtoUX resources to be "under the hood". Yet lesser clutter for you.</li>
<li>Created protoux-doc.html</li>
<li>Created protoux-examples.html</li>
<li>Began experimenting with new, custom tags: ux-tabs, ux-grid. Play at your own risk!</li>
</ul>
</div>
<div class="box">
<p>2014.09.30</p>
<ul>
<li>Initial release via <a href="https://thehub.thomsonreuters.com/groups/npd-ux-sandbox/blog/2014/09/30/html-imports-ux-workflows?sr=stream">HTML Imports & UX Workflows</a> article publishing.</li>
</ul>
</div>
</div>
<div class="col span_1_of_3">
<h1>ProtoUX In-Progress</h1>
<div class="box">
<ol>
<li>Setup centralized, accessible UX server for prototypes.</li>
<li>Put in a user warning to detect the webcomponent/import functionality.</li>
<li>Make better the layout responsiveness stuff.</li>
<li>The protoux-examples.html page should probably be less piecemeal.</li>
<li>Docs need more lipstick.</li>
<li>Love annotations more.</li>
<li>Continue testing custom ProtoUX elements with built-in functionality.</li>
<li>Continue updating the docs page as necessary.</li>
<li>Continue shoving things under the ProtoUX hood (consolidate dependent source files).</li>
</ol>
<hr />
<p>Questions, comments, desires? Email: [email protected]</p>
</div>
</div>
</div>
</div>
<!-- ProtoUX control bar. -->
<ux-controlbar></ux-controlbar>
</body>
</html>