forked from karlstolley/wd
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1095 lines (1078 loc) · 43.1 KB
/
index.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
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
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>COM381/530: Standards-Based Web Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="screen.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('html').addClass('hasjs');
// Get the current time as a Unix timestamp
currentTime = new Date();
currentTime = Math.round(currentTime.getTime() / 1000);
// Highlight the current and next wek
var futureWeeks = []
$('.week').each(function() {
weekTime = $(this).attr('data-expires');
if ((weekTime - currentTime) > 0) {
futureWeeks.push($(this));
}
});
futureWeeks[0].addClass('is-current is-visible');
futureWeeks[0].attr('id','current-week');
futureWeeks[1].addClass('is-next is-visible');
$('.week.is-next').append('<p><a id="show-calendar" href="#current-week">Show Full Calendar</a></p>');
$('#show-calendar').click(function() {
$(this).hide();
$('.week').addClass('is-visible');
$('.week').last().append('<p><a id="hide-calendar" href="#current-week">Hide Full Calendar</a></p>');
$('#hide-calendar').click(function() {
$('#show-calendar').show();
$(this).remove();
$('.week').removeClass('is-visible');
});
});
// Show/hide content
$('h2.label').append(' »')
$('h2.label').click(function() {
$(this).toggleClass('is-active');
$(this).next('.content').toggleClass('is-visible');
});
$('h2.label.calendar').click(function() {
$('.week').addClass('is-visible');
$(this).click(function() {
$('.week').toggleClass('is-visible');
});
});
});
</script>
<script type="text/javascript" src="//use.typekit.net/njk3tye.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="page">
<div id="header">
<h1>Standards-Based Web Design</h1>
<p class="tagline">
A course in the theory & applied practice of modern web writing and design. Meets Monday
nights, 6:25-9:05pm.
</p>
</div>
<div id="calendar">
<h2 class="label calendar">Calendar</h2>
<ol>
<li class="week" data-expires="1359424800">
<h3>Week 1: Welcome, Tech Setup; Writing XHTML & CSS <small>January 14</small></h3>
<div class="agenda">
<h4>In Class</h4>
<ol>
<li>Review course policies & schedule</li>
<li>Introduce <a href="#projects">first project</a></li>
<li>
<a href="https://github.com/karlstolley/lab/wiki">Lab setup</a>: Editor,
<code>htdocs/</code> directory; Firefox + plugins
</li>
<li>XHTML & CSS basics</li>
</ol>
</div>
<div class="assigned">
<h4>For Next Class (January 28)</h4>
<dl>
<dt>To Read</dt>
<dd>
<ol>
<li>Stolley, <cite>How to Design and Write Web Pages</cite>: Ch. 1-5, 12, 9</li>
<li>John Maeda, <cite>Laws of Simplicity</cite>: Laws 1, 2, 3, 4, 5, 6 & 10</li>
<li>Wilson Miner, <a href="http://www.alistapart.com/articles/settingtypeontheweb">Setting Type on the Web</a></li>
<li>37signals, <a href="http://gettingreal.37signals.com/"><cite>Getting Real</cite></a>
(Free PDF book): “Build Less” (p. 13); “What’s Your Problem?” (p. 14); Words (all
sections, p. 115)
</li>
</ol>
</dd>
<dt>To Do</dt>
<dd>
<ol>
<li>
Set up your computer with an editor of choice; Unix-style line endings (LF) and
UTF-8 (Unicode) character encoding; two-space tab insertions
</li>
<li>
Sign up for <a href="http://github.com">a GitHub account</a>
</li>
<li>
Sign up for a <a href="http://twitter.com/">Twitter account</a>
</li>
<li>
(During week of January 21) Post to Campfire site: 1 Law of Simplicity you’ve put
into practice + your Twitter username
</li>
<li>
(During week of January 21) Email draft of Project 1 XHTML to Stolley for comments
</li>
</ol>
</dd>
</dl>
</div>
<h3 class="bye-week">Week 2: No Class (MLK) <small>January 21</small></h3>
</li>
<li class="week" data-expires="1360029600">
<h3>Week 3: Simplicity; Clean Markup, Typographic Grids <small>January 28</small></h3>
<div class="agenda">
<h4>In Class</h4>
<ol>
<li>Reading discussion (Simplicity, Getting Real)</li>
<li>Q&A about XHTML & CSS</li>
<li>Source formatting/clean markup</li>
<li>CSS Reset vs. CSS Normalize</li>
<li>Typographic grids</li>
</ol>
</div>
<div class="assigned">
<h4>For Next Class</h4>
<dl>
<dt>To Read</dt>
<dd>
<ol>
<li>Maeda: Laws 7, 8 & 9 and Keys 1, 2, & 3</li>
<li>Stolley: Ch. 10, 13, 16</li>
<li>
<cite>Getting Real</cite>: “Interface First” (p. 92); “Epicenter Design” (p. 94);
“Copywriting is Interface Design” (p. 101); “Less Software” (p. 104); “Optimize
for Happiness” (p. 107)
</li>
</ol>
</dd>
<dt>To Do</dt>
<dd>
<ol>
<li>
Finish Project 1; send near-final draft to Stolley before Thursday 1/31 if you
want any more feedback
</li>
<li>
Prepare Project 1 presentation (5 mins. max)
</li>
</ol>
</dd>
</dl>
</div>
</li>
<li class="week" data-expires="1360634400">
<h3>Week 4: Project 1 Due; Version Control, HTML5 <small>February 4</small></h3>
<div class="agenda">
<h4>In Class</h4>
<ol>
<li>Project 1 Presentations</li>
<li>Git & GitHub setup</li>
<li>Introduction to version control</li>
<li>Project 1 into Git repository for Project 1 submission; tagged <code>p1</code></li>
<li>Project 1 posted to GitHub; URL and memo emailed to Stolley</li>
<li>XHTML 1.0 Strict to HTML5</li>
</ol>
</div>
<div class="assigned">
<h4>For Next Class</h4>
<dl>
<dt>To Read</dt>
<dd>
<ol>
<li>
Al Shaw, <a href="http://www.alistapart.com/articles/get-started-with-git/">Get Started with Git</a>
</li>
<li>
Swicegood, <cite>Pragmatic Version Control Using Git</cite>: Preface; “Version
Control the Git Way”; “Creating Your First Project”; and “Adding and Committing:
Git Basics” (chapters 1,3,4/print; chapters 3,5,6/ePub)
</li>
<li>
Stolley: Ch. 6; 11, 14, 15, 17
</li>
<li>
Jeremy Keith, <a href="http://html5forwebdesigners.com/">HTML5 for Web Designers</a>:
<a href="http://html5forwebdesigners.com/semantics/index.html">Semantics</a> and
<a href="http://html5forwebdesigners.com/today/index.html">Using HTML5 Today</a>
</li>
<li>
Wroblewski, <cite>Mobile First</cite>: Part 1
</li>
</ol>
</dd>
<dt>To Do</dt>
<dd>
<ol>
<li>Set up Git & GitHub SSH keys on your computer; add public key to GitHub</li>
<li>Clone your Project 1 repository, created in class, to your computer</li>
<li>
Decide whether to continue Project 1 repo, or start anew (all submissions and
questions from here on out will be via Git/GitHub), for Project 2
</li>
</ol>
</dd>
</dl>
</div>
</li>
<li class="week" data-expires="1361239200">
<h3>Week 5: Accessibility; Agile, Mobile-first Design <small>February 11</small></h3>
<div class="agenda">
<h4>In Class</h4>
<ol>
<li>Reading discussion</li>
</ol>
</div>
<div class="assigned">
<h4>For Next Class</h4>
<dl>
<dt>To Read</dt>
<dd>
<ol>
<li>Stolley: Ch. 7</li>
<li>Wroblewski: Part 2</li>
<li>
Swicegood: “Understanding and Using Branches”; “Working with Git’s History”
(chapters 5 and 6/print; chapters 7 and 8/ePub)
</li>
<li>
Khoi Vinh, <cite>Ordering Disorder</cite>: Ch. 1 and 2
</li>
<li>
Browse <a href="http://mediaqueri.es/">mediaqueri.es</a>; use mobile devices
and/or narrow browser windows
</li>
</ol>
</dd>
<dt>To Do</dt>
<dd>
<ol>
<li>Begin working mobile-first techniques and principles into your project</li>
</ol>
</dd>
</dl>
</div>
</li>
<li class="week" data-expires="1361844000">
<h3>Week 6: Usability; Responsive Design & Grid-Based Layout <small>February 18</small></h3>
<div class="agenda">
<h4>In Class</h4>
<ol>
<li>Reading discussion</li>
</ol>
</div>
<div class="assigned">
<h4>For Next Class</h4>
<dl>
<dt>To Read</dt>
<dd>
<ol>
<li>Stolley: Ch. 8; 20</li>
<li>Vinh: Ch. 3-5</li>
<li>Ethan Marcotte, <cite>Responsive Web Design</cite>: Ch. 1, 2, & 4</li>
<li>
Swicegood: “Working with Remote Repositories”; “Organizing Your Repository”;
“Beyond the Basics” (chapters 7, 8, 9/print; chapters 9, 10, 11/ePub)
</li>
<li>
Grid systems: Look at <a href="http://960.gs/">960.gs</a>,
<a href="http://978.gs/">978.gs</a>; search Google for other grid systems,
especially responsive ones
</li>
</ol>
</dd>
<dt>To Do</dt>
<dd>
<ol>
<li>Work on grid-based, responsive design sketches</li>
</ol>
</dd>
</dl>
</div>
</li>
<li class="week" data-expires="1362448800">
<h3>Week 7: Sustainability; SMACSS <small>February 25</small></h3>
<div class="agenda">
<h4>In Class</h4>
<ol>
<li>Reading discussion</li>
</ol>
</div>
<div class="assigned">
<h4>For Next Class</h4>
<dl>
<dt>To Read</dt>
<dd>
<ol>
<li>Marcotte: Ch. 3</li>
<li>
Jonathan Snook, <a href="http://smacss.com/">Scalable and Modular Architecture for CSS</a>:
<a href="http://smacss.com/book/categorizing">Categorizing CSS Rules</a>,
<a href="http://smacss.com/book/type-base">Base Rules</a>,
<a href="http://smacss.com/book/type-layout">Layout Rules</a>,
<a href="http://smacss.com/book/type-module">Module Rules</a>,
<a href="http://smacss.com/book/applicability">Depth of Applicability</a>
</li>
<li>Retina readings (TBA)</li>
</ol>
</dd>
<dt>To Do</dt>
<dd>
<ol>
<li>Research retina displays; go to the Apple store and try one?</li>
</ol>
</dd>
</dl>
</div>
</li>
<li class="week" data-expires="1363053600">
<h3>Week 8: Retina Displays; CSS3, Web Fonts <small>March 4</small></h3>
<div class="agenda">
<h4>In Class</h4>
<ol>
<li>Reading Discussion</li>
</ol>
</div>
<div class="assigned">
<h4>For Next Class</h4>
<dl>
<dt>To Read</dt>
<dd>
<ol>
<li>Dan Cederholm, <cite>CSS3 for Web Designers</cite>: Ch. 1-5</li>
</ol>
</dd>
<dt>To Do</dt>
<dd>
<ol>
<li>Look for design elements that can be replaced with CSS3</li>
</ol>
</dd>
</dl>
</div>
</li>
<li class="week" data-expires="1364263200">
<h3>Week 9: Hosting & Posting, Testing & Tweaking <small>March 11</small></h3>
<div class="agenda">
<h4>In Class</h4>
<ol>
<li>Reading discussion</li>
</ol>
</div>
<div class="assigned">
<h4>For Next Class (March 25)</h4>
<dl>
<dt>To Read</dt>
<dd>
<ol>
<li>Marcotte: Ch. 5</li>
<li>Stolley: Ch. 23, 24</li>
</ol>
</dd>
<dt>To Do</dt>
<dd>
<ol>
<li>Develop a browser- and device-testing strategy</li>
</ol>
</dd>
</dl>
</div>
<h3 class="bye-week">Week 10: No Class (Spring Break) <small>March 18</small></h3>
</li>
<li class="week" data-expires="1364868000">
<h3>Week 11: Work Week <small>March 25</small></h3>
<div class="agenda">
<h4>In Class</h4>
<ol>
<li>Unstructured project work-time</li>
</ol>
</div>
<div class="assigned">
<h4>For Next Class</h4>
<dl>
<dt>To Do</dt>
<dd>
<ol>
<li>Finish Project 2; prepare presentation</li>
</ol>
</dd>
</dl>
</div>
</li>
<li class="week" data-expires="1365472800">
<h3>Week 12: Project 2 Due; Presentations <small>April 1</small></h3>
<div class="agenda">
<h4>In Class</h4>
<ol>
<li>Project Presentations</li>
<li>Introduce Project 3</li>
</ol>
</div>
<div class="assigned">
<h4>For Next Class</h4>
<dl>
<dt>To Read</dt>
<dd>
<ol>
<li>Stolley, Ch. 19</li>
<li>More JavaScript, jQuery, & DOM readings (TBA)</li>
</ol>
</dd>
<dt>To Do</dt>
<dd>
<ol>
<li>Pitch Project 3 enhancement to Stolley via email</li>
</ol>
</dd>
</dl>
</div>
</li>
<li class="week" data-expires="1366077600">
<h3>Week 13: JavaScript, jQuery, & the DOM <small>April 8</small></h3>
<div class="agenda">
<h4>In Class</h4>
<ol>
<li>Reading discussion</li>
</ol>
</div>
<div class="assigned">
<h4>For Next Class</h4>
<dl>
<dt>To Read</dt>
<dd>
<ol>
<li>Server-side scripting readings (TBA)</li>
</ol>
</dd>
<dt>To Do</dt>
<dd>
<ol>
<li>TBA</li>
</ol>
</dd>
</dl>
</div>
</li>
<li class="week" data-expires="1366682400">
<h3>Week 14: Server-side Scripting <small>April 15</small></h3>
<div class="agenda">
<h4>In Class</h4>
<ol>
<li>Reading discussion</li>
</ol>
</div>
<div class="assigned">
<h4>For Next Class</h4>
<dl>
<dt>To Read</dt>
<dd>
<ol>
<li>SASS readings?</li>
</ol>
</dd>
<dt>To Do</dt>
<dd>
<ol>
<li>TBA</li>
</ol>
</dd>
</dl>
</div>
</li>
<li class="week" data-expires="1367287200">
<h3>Week 15: Work Week and/or SASS <small>April 22</small></h3>
<div class="agenda">
<h4>In Class</h4>
<ol>
<li>Work time</li>
</ol>
</div>
<div class="assigned">
<h4>For Next Class</h4>
<dl>
<dt>To Do</dt>
<dd>
<ol>
<li>Finish Site Enhancement Project</li>
</ol>
</dd>
</dl>
</div>
</li>
<li class="week" data-expires="1368496800">
<h3>Week Sixteen: Site Enhancement Project Presentations <small>April 29</small></h3>
<h4>In Class</h4>
<ol>
<li>Presentations</li>
</ol>
</li>
<li class="week" data-expires="1368496800">
<h3>Finals Week</h3>
<h4>Site Enhancement Project due to instructor by 5:00pm on May 8, 2013</h4>
</li>
</ol>
</div>
<div id="instructor">
<h2 class="label">Instructor</h2>
<ul class="content">
<li><a href="http://karlstolley.com/">Prof. Karl Stolley</a></li>
<li>[email protected]</li>
<li>karlstolley on <a href="http://twitter.com/karlstolley">Twitter</a>,
<a href="https://alpha.app.net/karlstolley">App.net</a>, &
<a href="http://kik.com/">Kik</a>.
</li>
<li>Office in Siegel Hall 218</li>
<li>Office hours on Mondays, 4pm to 5pm & by appointment</li>
</ul>
</div>
<div id="projects">
<h2 class="label">Projects</h2>
<div class="content">
<h3>Project 1: Website Foundations <small>Due February 4</small></h3>
<p>
This project will be an introduction to standards-based web design. You will be creating two
valid, well-formed XHTML 1.0 Strict web pages: your resume or curriculum vitae, and one item
from your professional portfolio.
</p>
<p>
Both of your pages will be styled via two stylesheets written in CSS: one for screen
(<code>media="screen"</code>) and one for print (<code>media="print"</code>). For this
project, you only have to style basic page typography and colors. (You will work on more
advanced layout and design matters in the Professional Web Presence project.)
</p>
<h4>Project Goals</h4>
<ul class="goals">
<li>
Develop a clean, effective web-writing style: both in your text content, and in your
source code
</li>
<li>
Begin to develop a foundation in XHTML for accurately describing the structure of text
</li>
<li>
Begin to develop a foundation in CSS for describing the typography and color of content
structured in XHTML
</li>
</ul>
<h4>Deliverables & Milestones</h4>
<ol class="deliverables">
<li>
2 XHTML files (resume/vita and portfolio page) and 2 CSS files (screen and print) draft by
1/24; final on 2/4)
</li>
<li>
A self-critique memo that evaluates your project and your progress in the class to this
point (2-3 paragraphs; due 2/4 via email or as a <code>README.md</code> in your GitHub
repository for the project)
</li>
<li>
A GitHub repository of your files, tagged as <code>p1</code> (we will do this together in
class on 2/4)
</li>
</ol>
<h4>Requirements</h4>
<dl class="requirements">
<dt>Your XHTML pages must:</dt>
<dd>
<ul>
<li>Validate against the XHTML 1.0 Strict DOCTYPE</li>
<li>
Use only valid, structural tags (e.g., headers, paragraphs, and lists) and
<code>class</code>/<code>id</code> attributes
</li>
<li>
Be hand-written and original; do not use Dreamweaver’s WYSIWYG editor or any pre-made
templates, although you can start with
<a href="http://gist.github.com/544075">this bare-bones skeletal XHTML file</a>
</li>
<li><strong>Not</strong> use tables, except for tabular data (if you have any)</li>
<li>Validate against the <a href="http://validator.w3.org/">W3C Markup Validation Service</a></li>
</ul>
</dd>
<dt>Your CSS files must:</dt>
<dd>
<ul>
<li>
Be built over the top of a reset CSS file, such as the
<a href="http://developer.yahoo.com/yui/reset/">Yahoo! Reset-Min CSS</a>
</li>
<li>
Use only valid CSS 1 & 2 selectors, properties, and attributes (CSS3 will be
covered in the next project)
</li>
<li>
Be loaded into your XHTML pages via the <code><link></code> tag in the head area
(no inline styles via the <code>style=""</code> attribute or embedded in the head with
the <code><style></code> tag) using the appropriate <code>media</code> attribute
value.
</li>
<li>
Be hand-written and original; do not use Dreamweaver’s CSS property dialog boxes or
any pre-made templates, although you should use the
<a href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">Yahoo! reset-min.css</a>
file.
</li>
<li>
Validate against the
<a href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a>
</li>
</ul>
</dd>
</dl>
<h3>Project 2: Professional Web Presence <small>Due April 1</small></h3>
<p>
This is the major project of Standards-Based Web Design: the creation of your full
professional web presence in a way that will allow you to continue to add to and revise the
site into the future. Your site should include a content-rich overview page (no splash
pages), an “about me”/biography page, your resume or vita, and at least 5 pages of portfolio
items. You will also use CSS to add a compelling layout to your pages, enhance your
navigation, and increase the accessibility and usability of your pages. DOM scripting might
also be a part of your pages in a way that progressively enhances either their visual
presentation or interactivity.
</p>
<p>
At least two students will present each night of class prior to 4/1; if at least two
students do not volunteer, the instructor will just call on people to present. Always come
prepared to show new work to the class.
</p>
<h4>Deliverables & Milestones</h4>
<ol class="deliverables">
<li>
<strong>Your complete site</strong> at your own openly-available URL (preferably
yourname.com; due 4/1)
</li>
<li>
<strong>Your site’s Git repository</strong>, hosted at GitHub.com (updated regularly;
final due 4/1)
</li>
<li>
<strong>A self-critique memo</strong> that evaluates your project and your progress in
the class to this point (due 4/1 via email or as a <code>README.md</code> in your
GitHub repository for the project)
</li>
<li>
<strong>Final presentation</strong> of your project (due 4/1)
</li>
<li>
At least <strong>one in-progress presentation</strong> of your work to the class (due
before 4/1)
</li>
</ol>
<h4>Requirements</h4>
<dl class="requirements">
<dt>Your site must:</dt>
<dd>
<ul>
<li>
Be hosted and appear at your own openly-available URL (preferably
<code>yourname.com</code>)
</li>
<li>
Have its source hosted at GitHub or another Git-based project host; if you opt to
protect your repository, the instructor must be given access for grading purposes
</li>
<li>
Use a meaningful, search-engine-friendly URL structure
</li>
</ul>
</dd>
<dt>Your pages must:</dt>
<dd>
<ul>
<li>
Display appropriately (though not necessarily exactly the same) in Lynx, Firefox,
Safari (or Google Chrome, if you have no Mac access), Opera, and Internet Explorer 8+
(IE);
</li>
<li>
Use responsive web design techniques (e.g., media queries, scalable images, flexible
layouts) to display on mobile, tablet, and desktop devices
</li>
<li>
Use pixel-doubled images for retina displays
</li>
<li>
Make use of conditional comments to load CSS for IE, when necessary
</li>
</ul>
</dd>
<dt>Your HTML must:</dt>
<dd>
<ul>
<li>
Feature semantic markup in a sensible source order (structured for content, not
presentation/design)
</li>
<li>
Include accessibility features, such as links for skipping to navigation or content
sections
</li>
<li>
Use the HTML5 DOCTYPE
</li>
<li>
Use valid, structural tags (e.g., headers, paragraphs, and lists) and
<code>class</code>/<code>id</code> attributes, written in XHTML-Strict style;
new, well-supported HTML5 semantic tags are acceptable
</li>
<li>
Be hand-written and original; do not use Dreamweaver’s WYSIWYG editor or any pre-made
templates, although you can start with the
<a href="http://sustainablewebdesign.com/book/rpk/">Rapid Prototyping Kit</a> or
another site foundation/grid system of your choice (seek approval from instructor
first)
</li>
<li>
<strong>Not</strong> use tables, except for tabular data (if you have any)
</li>
<li>
Validate as HTML5 against the
<a href="http://validator.w3.org/">W3C Markup Validation Service</a>
</li>
</ul>
</dd>
<dt>Your CSS must:</dt>
<dd>
<ul>
<li>
Be built over the top of a reset CSS file, such as the
<a href="http://developer.yahoo.com/yui/reset/">Yahoo! Reset-Min CSS</a> or a
CSS normalization file
</li>
<li>
Use only valid CSS 1 & 2 and widely-supported CSS3 selectors, properties,
and attributes (CSS3 should only be used on the experience layer, and with all
necessary vendor prefixes; see the Cederholm book)
</li>
<li>Not use hacks; use conditional comments instead</li>
<li>
Be loaded into your HTML pages via the <code><link></code> tag in the head area
(no inline styles via the <code>style=""</code> attribute or embedded in the head with
the <code><style></code> tag) using the appropriate <code>media</code> attribute
value.
</li>
<li>
Be hand-written and original; do not use of Dreamweaver's CSS property dialog boxes or
any pre-made templates, although you should use the <a class="ext"
href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">Yahoo! reset-min.css</a>
file.
</li>
<li>
Make use of media-queries for responsive design across mobile, tablet, desktop, and
other screens
</li>
<li>
Validate against the <a class="ext" href="http://jigsaw.w3.org/css-validator/">W3C CSS
Validation Service</a> (at least all CSS 1 & 2; consider segregating CSS3 with
vendor prefixes to its own file)
</li>
</ul>
</dd>
<dt>If you include any JavaScript/DOM Scripting, it must:</dt>
<dd>
<ul>
<li>
Be built using jQuery, MooTools, or another actively developed, standards-compliant
library/framework
</li>
<li>
Adhere to progressive enhancement design principles (in other words, your site must
still work in JavaScript-less environments)
</li>
<li>
Not throw any errors (e.g., in the Web Developer plugin)
</li>
</ul>
</dd>
</dl>
<h4>Project Goals</h4>
<ul class="goals">
<li>
Establish a solid and sound representation of yourself and your skills, based on your
career or field of study/area of expertise
</li>
<li>
Organize and style your professional site using responsive design techniques for maximum
rhetorical effect under particular viewing conditions (mobile, tablet, desktop)
</li>
<li>
Learn to prepare and organize appropriate materials to represent yourself on the web
</li>
<li>
Learn to use CSS to control the layout and design of HTML pages, using grid-based
design methods for layout and typography
</li>
<li>
Use, if necessary, JavaScript on the DOM to progressively enhance your pages for
JavaScript-capable browsers and devices
</li>
<li>
Learn to develop your site in a baseline browser, test in other browsers, and use
conditional comments to address the oddities of Internet Explorer
</li>
<li>
Use a version control system (Git) for agile incremental development of your site,
including feature branches for experimentation and parallel development
</li>
</ul>
<h3>Project 3: Website Enhancement <small>Due April 1</small></h3>
<p>
For project three, you will extend your website from project two in some way. Full
project description TBA.
</p>
<h4>Deliverables & Milestones</h4>
<p>TBA</p>
<h4>Requirements</h4>
<p>TBA</p>
<h4>Project Goals</h4>
<p>TBA</p>
<h3>(COM530 Students Only) Project 4: TBA</h3>
<p>
Description TBA.
</p>
<h4>Deliverables & Milestones</h4>
<p>TBA</p>
<h4>Requirements</h4>
<p>TBA</p>
<h4>Project Goals</h4>
<p>TBA</p>
</div>
</div>
<div id="policies">
<h2 class="label">Policies</h2>
<div class="content">
<ol>
<li>
<h3>Course Description</h3>
<p>
This course introduces the theory and practice of standards-based web design and
development. The course focuses on an agile, incremental approach to building
accessible, usable, and sustainable web pages that work across all modern browsers and
web-enabled mobile devices. Beyond web design, the course provides a rhetorical and
technological foundation for quickly establishing competencies in other areas of digital
communication, such as web application development.
</p>
</li>
<li>
<h3>Course Goals</h3>
<ul>
<li>
Learn to create, prepare, and maintain web- and audience-appropriate text and media
</li>
<li>
Learn to structure web pages that are both valid and well-formed according to the
Extensible Hypertext Markup Language (XHTML) and HTML5
</li>
<li>
Learn to create page designs using the Cascading Style Sheet (CSS) design language
</li>
<li>
Understand and implement web standards from the World Wide Web Consortium (W3C), Ecma,
ISO, and other standards-issuing groups
</li>
<li>
Understand and apply progressive enhancement and responsive design in web development
</li>
<li>
Develop an agile approach to web writing and design, supplemented by the use of a
version control system (Git)
</li>
<li>
Apply course concepts and adjust/extend course projects to fit your own academic and
professional interests
</li>
</ul>
</li>
<li>
<h3>Materials and Technologies</h3>
<h4>Required Texts</h4>
<ul>
<li>
Cederholm, D. (2010). <cite>CSS3 for web designers</cite>. New York, NY: A Book Apart. (available for purchase from <a href="http://www.abookapart.com/products/css3-for-web-designers">A Book Apart</a>)
</li>
<li>
Maeda, J. (2006). <cite>The laws of simplicity: Design, business, technology, life</cite>. Cambridge, MA: The MIT Press.
</li>
<li>
Marcotte, E. (2011). <cite>Responsive web design</cite>. New York, NY: A Book Apart. (available for purchase from <a href="http://www.abookapart.com/products/responsive-web-design">A Book Apart</a>)
</li>
<li>
Stolley, K. (2011). <cite>How to design and write web pages today</cite>. Santa Barbara, CA: Greenwood Press.
</li>
<li>
Swicegood, T. (2008). <cite>Pragmatic version control using Git</cite>. Pragmatic Bookshelf. (available at the bookstore or as an ebook from <a href="http://pragprog.com/titles/tsgit/pragmatic-version-control-using-git">Pragmatic Bookshelf</a>
</li>
<li>
Vinh, K. (2011). <cite>Ordering disorder: Grid principles for web design</cite>. Berkeley, CA: New Riders.
</li>
<li>
Wroblewski, L. (2012) <cite>Mobile first</cite>. New York, NY: A Book Apart. (available for purchase from <a href="http://www.abookapart.com/products/mobile-first">A Book Apart</a>)
</li>
<li>
Plus other electronic books, articles, and materials linked to from the course
calendar
</li>
</ul>
<h4>Required Technologies</h4>
<ul>
<li>Ad-free, commercially hosted Web space that you control and the domain of your name</li>
<li>A <a href="https://github.com/">GitHub</a> account (free/public or pay/private)</li>
<li>A private/public RSA key pair (we will create these in class if you don't yet have them)</li>
<li>Firefox, Google Chrome, and other non-Internet Explorer browsers</li>
<li><a href="http://www.apachefriends.org/en/xampp.html">XAMPP</a> or a similar web server for testing, installed on a USB stick or your computer</li>
<li>A sketchbook</li>
</ul>
<h4>Recommended Technologies</h4>
<ul>
<li>A Ubuntu installation (or Ubuntu Live CD) to run Ubuntu Linux on your own computer</li>
<li>A Twitter account</li>
<li>A Delicious or Diigo account for social bookmarking</li>
</ul>
</li>
<li>
<h3>Grading Policy: COM381 Students</h3>
<ul>
<li>Project 1: 20pts</li>
<li>Project 2: 50pts</li>
<li>Project 3: 10pts</li>
<li>Class Participation: 20pts</li>
<li>TOTAL: 100pts</li>
</ul>
<p>A = 90+ pts; B = 80-89pts; C = 70-79pts; D = 60-69pts; E =< 59 pts</p>
<h4>Grading Criteria</h4>
<ul>
<li>
A - Student has turned in all required components of a project, the work is
exceptional in quality, and reflects the student’s dedication to adjusting the project
to his or her own interests.
</li>
<li>
B - Student has turned in all required components of a project, and the work is
exceptional for undergraduate work.
</li>
<li>
C - Student has turned in all required components of a project and submitted work that
is acceptable as undergraduate level.
</li>
<li>
D - Student has turned in all required components of a project, but the work is below
undergraduate level.
</li>
<li>
E - Student has not turned in all required components of a project.
</li>
</ul>
</li>
<li>
<h3>Grading Policy: COM530 Students</h3>
<ul>
<li>Project 1: 20pts</li>
<li>Project 2: 50pts</li>
<li>Project 3: 10pts</li>
<li>Project 4: 10pts</li>
<li>Class Participation: 10pts</li>
<li>TOTAL: 100pts</li>
</ul>
<p>A = 90+ pts; B= 80-89pts; C=70-79pts; E =< 69 pts</p>
<h4>Grading Criteria</h4>
<ul>
<li>
A - Student has turned in all required components of a project, the work is
exceptional in quality, and reflects the student's dedication to adjusting the project
to his or her own interests.
</li>
<li>
B - Student has turned in all required components of a project and submitted work that