NM 320
INTERMEDIATE INTERACTIVE MEDIA (WEB DESIGN)
instructor: curt cloninger
email: curt at lab404 dot com
office: Zeis 214. Monday + Wednesday 2-3:30, or by appointment.
location: university of north carolina asheville
* indicates an offline media object

class-specific | resources | non-linear experiences | student sites


CLASS-SPECIFIC

intro
syllabus
rough project calendar
attendance and grading policies

major assignments
Non-Linear Site (HTML5/CSS3)
Responsive Site [OR option #2] (Responsive Design)

required texts
HTML5 for Web Designers (keith)
CSS3 for Web Designers (cederholm) [example code]
Responsive Web Design (marcotte)

optional texts
lynda.com video tutorials (via Ramsey Library)
Dive Into HTML5 (pilgrim)
Adaptive Web Design (gustafson)
JavaScript & JQuery (duckett)

handy reference
html tag reference
css reference
browser safe fonts
box model specifications
CSS3 transitions: property types and properties
sprite image rollover code sample

software/tools
lorem ipsum dummy text
prefix free
CSS Browser reset code (meyer)
firefogg [for converting to ogv]
the responsive calculator (robson)
TinyPNG
free ruler
text wrangler * brackets * sublime text * atom (text editors)
codePen * firebug (in-browser editors)
(addon bar + firesizer = firefox window resizer) * chrome window resizer * safari window resizer
cmap flowchart software


RESOURCES

Web Site Usability Basics (cloninger)
web design is dead (nouvel)

HTML5/CSS3/JAVASCRIPT
HTML5 readiness
HTML5 Please
when can i use
prefix free
HTML tags
CSS reference table
CSS3 transitions: property types and properties
javascript image rollover code [view source]
create a javascript pop-up window
create and center a pop-up window
CSS positioning 101 (stokes)
CSS Floats 101 (stokes)
CSS Browser reset code (meyer)
dragable elements script
CSS drop down menu code [view source]
lightbox 2
web putty
modernizr
Sass / LESS
p5.js
jScroll (infinite scrolling)
codrops playground (experimental code)

Web Video
Media formats for HTML audio and video
web video compression settings
Video on the Web (pilgrim)
firefogg [for converting to ogv]
ffmpeg2theora
Miro Video Converter

Web Typography
browser safe font list
CSS Font Stack
google web fonts
fontifier
font squirrel
interview with Jonathan Hoefler

Responsive Design
Responsive Web Design (marcotte)
robot or not * The Xanadu Hijack [responsive site examples]
Fluid Grids (marcotte)
Fluid Images (marcotte)
Creating a Mobile-First Responsive Web Design (frost)
frameworks (marcotte)
Responsive Design Fundamentals (williamson)
The Picture Element Comes of Age (zeldman)
Responsive Images in Practice (portis)
responsive widths * viewport sizes
Responsive Menu in Pure CSS
about reset CSS (meyer)
TUTORIALS:
full reset css template
basic css (pixel-based) template
basic css (em-based) template
xanadu hijack css (em-based)
2-column centered html template (jello layout)
2-column centered html template (jello/liquid layout - %-width sizing)
fully responsive (but not yet mobile-first)

Web Grid Systems
The Grid System: online grid system resources
CSS Grid Layout
designing with grid-based approach
960 grid system
gridding the 960 (moll)
Setting Type on the Web to a Baseline Grid (miner)
CSS Grid Positioning Module
Yahoo! UI Library: CSS Grids
baseline grid framework


NON-LINEAR EXPERIENCES

linear plot pyramid* (freytag)
3 non-linear "plot" structures* (meadows)
agency* (murray)
interaction and narrative lecture: interactive, storytelling, cross channel, user experience* (arnall)

michel gondry videos
come into my world
sugar water
the denial twist
bachelorette

hypertext literature
hypertext gardens* (bernstein)
victory garden [abridged] (moulthrop)
hyper hypertext* (saul)
grammatron (amerika)
hypertextual consciousness 1.0* (amerika)
clicking for godot* (rosenberg)
A Dark Journey Into A Killer's 'Personal Effects'* (hutchins/weisman)
++++++++++++++
surreal quizzes
Jane Dark's Emotion Criteria Exam (marcus)
NODATA (donwood/radiohead)
The Will Power Clinic (szyhalski)
starfish exams (stanton)
The 4th Replacement Search (elk)

hypermedia literature
my boyfriend came back from the war (lialina)
the hard way (ritchie)
graphik dynamo (armstrong/tippett)
the lair of the marrow monkey (loyer)
world of awe: traveler's journey (kanarek)
filmtext (amerika)
what we will (perring/waite/cayley/cape)
otnemem (webflow solutions/musth design)
requiem for a dream (hi-res)
how i was played by online caroline* (walker)
memex engine (lafia et al.)
guest house | rental house | terminal house (GUMP)
interactive short films

expressive characters/environments
JODI
Arcangel Constantini [automatic drawings]
snarg
the shy picture (reeders/macleod)
reverse flash back (jimpunk)

fugal narrative
a round in part: tracing the countours of fugal narrative (curator: cloninger)
geeks inadvertently making net art* (cloninger)


STUDENT SITES