-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathnotes.html
More file actions
358 lines (354 loc) · 10.3 KB
/
notes.html
File metadata and controls
358 lines (354 loc) · 10.3 KB
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
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sketching With Code 2016</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="./img/apple-touch-icon.png">
<link rel="icon" type="image/png" href="./img/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="./img/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="./manifest.json">
<link rel="mask-icon" href="./img/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./css/normalize.min.css">
<link rel="stylesheet" href="./css/boilerplate.css">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="fixed-width">
<p>Readings introduce materials.
Lectures cover questions from the reading.
Start problem sets in class.
Problem sets are due next class.</p>
<p><a href="https://www.scullinsteel.com/apple2/#dos33master">https://www.scullinsteel.com/apple2/#dos33master</a></p>
<p> 09-07 semester starts</p>
<pre><code> 01 - 09-13 intro / git ⬅ git resources
02 - 09-20 git / html / linking / publishing ⬅ Reading EJ Intro
03 - 09-27 html, css, behaviors, code-pen ⬅ EJ 12, 13 ½
04 - 10-04 gestalt principles, svg js in dom
05 - 10-11 js: in the dom ⬅ EJ 1, 2, 16
06 - 10-18 js: variables, types, loops, canvas ⬅ EJ 3
07 - 10-25 ★ js: functions, random, timing 1 ⬅ EJ 4
08 - 11-01 js: arrays, objects
09 - 11-08 js: external functions & libraries. ⬅ EJ5
10 - 11-15 js: interaction: JSON callbacks.
11 - 11-22 js: libraries: jquery, lowdash
12 - 11-29 js: libraries: d3
13 - 12-06 js: libraries: threejs
14 - 12-13 ★ FINAL PRESENTATIONS.
</code></pre><p>Visual Inspiration:
Twitter Accounts to troll:</p>
<p> 14 days</p>
<p> ARTE 5901.04 Sketching With Code 2016-SWC</p>
<p> 4 main topics 3 days each? + 1</p>
<p>Exercise: How to sketch / actual sketching / benefits of sketching / anyone can sketch.
Thinking visually & interactively, modeling with pencil.</p>
<p>01: Intro: Set expectations and meet each other. How to communicate. Shape of the course.</p>
<ul>
<li><p>In class</p>
<ul>
<li>review syllabus<ul>
<li>draw map of course</li>
</ul>
</li>
<li>communication expectations / guidelines</li>
<li>post office hours / slack / email</li>
<li>about me</li>
<li>about students</li>
<li>sketches:<ul>
<li>Yourself as a pokemon or baseball card</li>
<li>Yourself as a busines card</li>
<li>Map of where you are right now (physically)</li>
<li>Mind map</li>
<li>share the 1 sketch you find most interesting</li>
</ul>
</li>
<li>about problem sets<ul>
<li>file naming convention <code>2016-SWC/01/index.html</code></li>
<li>other PS expectations</li>
</ul>
</li>
<li>Git & Github review & discussion and demo<ul>
<li>unixy things<ul>
<li>commandline</li>
<li>paths structures, directories, wildcards</li>
<li>ls</li>
</ul>
</li>
<li>git from the command line<ul>
<li>clone / add / commit / push / log /diff </li>
</ul>
</li>
<li>git gui clients<ul>
<li>github cient</li>
<li>stree</li>
<li>looking at file history</li>
<li>looking at differences</li>
</ul>
</li>
<li>a few words on good commit style</li>
<li>ignoring files with git</li>
<li>configuration options</li>
<li>github pages for publishing</li>
</ul>
</li>
</ul>
</li>
<li><p>PS:</p>
<ul>
<li>read: (handout) How to critique.</li>
<li>watch: <a href="http://bit.ly/2bvuszy">git & github for poets</a></li>
<li>create github account</li>
<li>create github repo <ARTE-5901></li>
<li>first github page ARTE-5901/01/index.html<ul>
<li>should include</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>02: HTML CSS (dom).</p>
<ul>
<li>Lecture<ul>
<li>Q & A about Git and git problems</li>
<li>Editors and editing files<ul>
<li>webstorm</li>
<li>atom</li>
<li>vs code</li>
<li>alternates (vim / emacs / …)</li>
</ul>
</li>
</ul>
</li>
<li><p>CSS & HTML</p>
<ul>
<li>What they are / how they work together.</li>
<li>How network requests happen</li>
<li>How browsers render things</li>
<li>Debugging and getting help<ul>
<li>trying things in code pen</li>
<li>browser debugging</li>
<li>Stack overflow</li>
</ul>
</li>
</ul>
</li>
<li><p>PS:</p>
<ul>
<li>ARTE-5901/02/index.html</li>
<li>repo name should be <ARTE-5901></li>
<li>Put up a github pages page.</li>
</ul>
</li>
</ul>
<p>03: SVG & JS: Gestalt Principles of design (overview).</p>
<ul>
<li>CSS & HTML<ul>
<li>What they are / how they work together.</li>
<li>How network requests happen</li>
<li>How browsers render things</li>
<li>Debugging: How to look at what the browser is doing.</li>
<li>Intro to code-pen.</li>
</ul>
</li>
<li>PS:<ul>
<li>Link to code-pen.</li>
<li>Better Hello world page. (sketches multiple)</li>
<li>Giving attribution / stack exchange something.</li>
</ul>
</li>
</ul>
<p>04: HTML CSS: Gestalt Principles of design (overview).</p>
<p>05: Javascript: Program flow, Dom manipulation, Debugging.</p>
<pre><code>* Canvas drawing. (SVG or Canvas)
* Program flow
* Javsript in the browser: How it loads &etc.
</code></pre><p>06: Javascript: simple variables & loops. The HTML canvas, random numbers.
07: Javascript: Build your own functions(!)
08: Javascript: Interactions / Puppetry
09: Javascript: Better timing and animation. Including libraries.
10: Javascript: ThreeJS
11: Study the masters (copy code?)
12: Javascript: Other tools
13: Final presentations.</p>
<ul>
<li>Software development from 30K feet.<ul>
<li>Compilation examples C => ASM => Obj code.</li>
<li>Similar in web development, at a higher level of abstraction</li>
</ul>
</li>
</ul>
<h2 id="technical-topics-">Technical Topics:</h2>
<ul>
<li>Getting help<ul>
<li><a href="http://stackoverflow.com/">stack overflow</a></li>
<li><a href="https://developer.mozilla.org/en-US/">MDN</a></li>
<li>Slack<ul>
<li>Visual Inspiration</li>
<li>General</li>
<li>Gallery</li>
</ul>
</li>
</ul>
</li>
<li>Git / github / code-pen</li>
<li>HTML & CSS<ul>
<li>HTML basics.<ul>
<li>Including other resources</li>
<li>Paths</li>
<li>How markup represents content</li>
<li>Boilerplate</li>
<li>Key elements<ul>
<li>Head</li>
<li>Body</li>
<li>Div</li>
<li>Span</li>
</ul>
</li>
</ul>
</li>
<li>CSS<ul>
<li>Selectors<ul>
<li>Specificity</li>
<li>Cascades</li>
</ul>
</li>
<li>Styling<ul>
<li>Layout</li>
<li>Type</li>
<li>Colors</li>
<li>Animation</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Javascript<ul>
<li>Linear evaluation</li>
<li>Web API's (part of the DOM)<ul>
<li>DOM Interaction<ul>
<li>Querying and updating without jQuery</li>
<li>Handling Events</li>
</ul>
</li>
<li>The Canvas API</li>
<li>Others (later)</li>
</ul>
</li>
<li>Basics<ul>
<li>Boiler plate in a web document</li>
<li>Loading JS files, evaluating JS.</li>
<li>Syntax, formatting and nitpicking</li>
</ul>
</li>
<li>Elements of programming:<ul>
<li>Variables:<ul>
<li>Simple variable 'types': strings & numbers.</li>
<li>Pass by value vs Pass by reference</li>
</ul>
</li>
<li>Functions:<ul>
<li>Defining functions</li>
<li>Calling functions</li>
<li>Passing functions</li>
<li>Return values</li>
</ul>
</li>
<li>Complex types:<ul>
<li>Arrays</li>
<li>Objects</li>
<li>Functions as types</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>Design Topics / Themes:</p>
<ul>
<li>Gestalt Principles of Design<ul>
<li>Based on principles of cognition and the layers of the visual cortex. How external stimuli are translated to meaning. (George Mather)</li>
<li><a href="http://mediaediting.wikispaces.asu.edu/file/view/graphics.pdf">Visual elements</a>:<ul>
<li>Dot</li>
<li>Line</li>
<li>Shape</li>
<li>Direction</li>
<li>Tone</li>
<li>Color</li>
<li>Texture</li>
<li>Scale</li>
<li>Dimension</li>
<li>Movement (implied / real)</li>
</ul>
</li>
<li><a href="https://en.wikipedia.org/wiki/Principles_of_grouping">Gestalt LAWS</a> of perception (grouping)<ul>
<li>Proximity</li>
<li>Similarity</li>
<li>Closure</li>
<li>Good Continuation</li>
<li>Common Fate</li>
<li>Good Form</li>
</ul>
</li>
<li><a href="http://mediaediting.wikispaces.asu.edu/file/view/graphics.pdf">Sharpening vs Leveling</a> along a perceptual axis:<ul>
<li>Contrasting Vs. Harmonious</li>
<li>Balance ⟷ nstability </li>
<li>Asymmetry ⟷ Symmetry</li>
<li>Irregularity ⟷ Regularity</li>
<li>Complexity ⟷ Simplicity</li>
<li>Fragmentation ⟷ Unity</li>
<li>Spontaneity ⟷ Predictability</li>
<li>Activeness ⟷ Stasis</li>
<li>Variation ⟷ Consistency</li>
<li>Distortion ⟷ Accuracy</li>
<li>Depth ⟷ Flatness</li>
<li>Juxtaposition ⟷ Singularity</li>
<li>Randomness ⟷ Sequentiality</li>
<li>Sharpness ⟷ Diffusion</li>
</ul>
</li>
</ul>
</li>
<li>Randomness & Accidents<ul>
<li>Raku (Wester style)</li>
<li>Wabi-sabi <a href="https://en.wikipedia.org/wiki/Wabi-sabi">https://en.wikipedia.org/wiki/Wabi-sabi</a></li>
<li>Kintsugi <a href="https://en.wikipedia.org/wiki/Kintsugi">https://en.wikipedia.org/wiki/Kintsugi</a></li>
<li><a href="http://www.fastcodesign.com/3052333/the-value-of-randomness-in-art-and-design">Randomness in art and design</a></li>
<li><a href="https://www.random.org/">Random service</a></li>
</ul>
</li>
<li>Lying, Cheating, and stealing like an artist:<ul>
<li>The secret of painting</li>
<li>The secret of photography</li>
<li>Steeling and attribution</li>
<li>The technology and art</li>
<li>The importance of the frame</li>
</ul>
</li>
</ul>
<h3 id="project-ideas-">Project ideas:</h3>
<ul>
<li>Hello world html</li>
<li>Present a info-sheet on a certain CSS attribute.</li>
<li>Create a skelleton document for HTML assignments.</li>
<li>Secret message, encoded, subliminal message.</li>
<li>misuse of HTML and CSS</li>
<li>Screen reader</li>
<li>1,10,100 squares circles in code</li>
<li>100,1000,1000 dots / lines</li>
<li>Redo the work of a famous early computer artist.</li>
<li>Exquisite corpse drawing program (person 1 creates a function that takes (x,y,z, radom parameter)</li>
<li>Random number generation</li>
<li>Geometry explainer </li>
<li>Stuff from Golan</li>
<li>Interpret isntructions from Casey Raes</li>
</ul>
</div>
</body>
</html>