KCC | New Media Arts

Kapi‘olani Community College, University of Hawai‘i

Spring 2006 Faculty Web Site

Home » Spring 2006 - Art 128

Art 128 - Interface Programming 1

ART 128 Interface Programming 1 provides the foundation of skills and principles necessary for students to create visually effective Web sites. Through lectures, demonstrations, and hands-on exercises, this course develops skills in writing HTML, hypertext markup language; understanding the fundamentals of JavaScript to add greater control over Web page and site design for cross-browser dynamic Web pages; and an Introduction to Cascading Style Sheets and DHTML which combines HTML, JavaScript, Style Sheets, Absolute Positioning, Plug-Ins, and DOM.

SYLLABUS:

ART 128 - Syllabus - 91 K [.doc]

SCHEDULE + DIGITAL ASSETS:

Week 1:

in-class presentation :: week1a - 117 K [.ppt]
in-class example :: css zen garden - [url]
in-class exercise :: skills survey - 43 K [.doc]
homework assignment :: html tutorial - [url]
----------------------------------------------------
in-class presentation :: week1b - 308 K [.ppt]
homework example :: html markup alone - [url]
video tutorial :: dw site setup - 1.5MB [.swf]

Week 2:

in-class presentation :: week2a - 632 K [.ppt]
in-class example :: bull terrier site - [url]
homework example :: html with styles in the header - [url]
homework example :: html with a linked style sheet - [url]
in-class exercise :: linked style sheet - [.css]
----------------------------------------------------
in-class presentation :: week2b - 78 K [.ppt]
in-class example :: vtwelve design studio - [url]
homework example :: chris G's UH student site example - [url]

Week 3:

in-class presentation :: week3a - 112 K [.ppt]
in-class example :: suspire media site - [url]
homework example :: div elements - [url]
video tutorial :: week3a assignment - 35MB [.swf]
----------------------------------------------------
in-class presentation :: week3b - 172 K [.ppt]
in-class example :: firefox web developer tool - [url]
homework example :: div testing document - [url]
video tutorial :: how to configure dw's new documents - 4MB [.swf]
video tutorial :: div testing document - 55MB [.swf]

Week 4:

in-class presentation :: week4a - 103 K [.ppt]
in-class example :: nick rigby's guide to css positioning - [url]
homework example :: relative positioning - [url]
homework example :: absolute positioning - [url]
video tutorial :: week3a bug fix - 12MB [.swf]
video tutorial :: week4a relative positioning - 8MB [.swf]
video tutorial :: week4a absolute positioning - 18MB [.swf]
----------------------------------------------------
in-class presentation :: week4b - 78 K [.ppt]
in-class example :: a list apart - [url]
in-class example :: stop design - [url]
in-class example :: glish.com/css - [url]

Week 5:

in-class presentation :: week5a - 103 K [.ppt]
in-class example :: css vault - [url]
in-class example :: style gala - [url]
in-class example :: weekly standards - [url]
homework example :: in-line list footer nav - [url]
video tutorial :: week5a in-line footer nav - 10MB [.swf]
----------------------------------------------------
in-class presentation :: week5b - 148 K [.ppt]
in-class example :: e|portfolio site (rsmart version) - [url]
in-class example :: e|portfolio site (cg version) - [url]
article :: pure css horizonatal nav - [url]
homework example :: in-line list footer nav - [url]
video tutorial :: week5b in-line top nav - 10MB [.swf]

Week 6:

in-class presentation :: week6a - 92 K [.ppt]
in-class example :: KCC - [url]
in-class example :: NCC - [url]
in-class example :: Middlebury - [url]
----------------------------------------------------
in-class presentation :: week6b - 113 K [.ppt]
article :: facts and opinion about fir - [url]
article :: using background-image to replace text - [url]
article :: flaw with using background-image to replace text - [url]
article :: accessible image replacement - [url]
homework example :: week6b FIR image-text replacement - [url]
video tutorial :: week6b FIR image-text replacement - 9MB [.swf]
homework example :: week6b css image rollovers - [url]
video tutorial :: week6b css image rollovers - 11MB [.swf]

Week 7:

in-class presentation :: week7a - 99 K [.ppt]
in-class example :: GIT - [url]
in-class example :: RISD - [url]
in-class example :: SVA - [url]
in-class example :: UCLA - [url]
----------------------------------------------------
in-class presentation :: week7b - 116 K [.ppt]
midterm assignment :: nma web site css redesign - 40 K [.doc]
in-class example :: art center's media design program - [url]
in-class example :: ANU CNMA - [url]
in-class example :: UCSB art - [url]

Week 8:

in-class presentation :: week8a - 74 K [.ppt]
in-class lesson :: comp #1 image - 125 K [.jpg]
in-class example :: comp # 1 coded (in progress) - [url]
----------------------------------------------------
in-class presentation :: week8b - 93 K [.ppt]
Updated HTML files - 34K [.zip]

Week 9:

in-class presentation :: week9a - 79 K [.ppt]
in-class example :: W3C HTML Validation - [url]
in-class example :: Other HTML Validation #1 - [url]
in-class example :: Other HTML Validation #2 - [url]
in-class example :: Other HTML Validation #3 - [url]
in-class example :: W3C CSS Validation - [url]
in-class example :: Section 508 Validation - [url]

Week 10:

in-class presentation :: week10a - 85 K [.ppt]
mid-term grading sheet :: nma css redesign - 48 K [.doc]
----------------------------------------------------
in-class presentation :: week10b - 72 K [.ppt]

Week 11:

in-class presentation :: week11a - 112 K [.ppt]
article :: an objective look at tables vs. css - [url]
in-class example :: intro to xhtml - [url]
in-class example :: difference between xhtml and html - [url]
in-class example :: xhtml syntax - [url]
----------------------------------------------------
in-class presentation :: week11b - 104 K [.ppt]

Week 12: NO CLASS - SPRING BREAK

Week 13:

in-class presentation :: week13a - 120 K [.ppt]
lesson example :: transparent bg images - [url]
----------------------------------------------------
in-class presentation :: week13b - 76 K [.ppt]
lesson example :: table for data - [url]
lesson example :: centering using tables + css - [url]
lesson example :: centering using css only - [url]

Week 14:

in-class presentation :: week14a - 138 K [.ppt]
lesson example :: iframes - [url]
lesson example :: forms - [url]
in-class example :: w3schools's iframe page - [url]
in-class example :: w3schools's html form page - [url]
in-class example :: 456bereastreet.com's styling forms article - [url]
----------------------------------------------------
in-class presentation :: week14b - 87 K [.ppt]

Week 15:

in-class presentation :: week15a - 84 K [.ppt]
lesson example :: show/hide layers article - [url]
lesson example :: show/hide layers student example #1 - [url]
lesson example :: show/hide layers student example #2 - [url]
lesson example :: show/hide layers simple example #1 - [url]
lesson example :: show/hide layers simple example #2 - [url]
----------------------------------------------------
in-class presentation :: week15b - 139 K [.ppt]

Week 16:

in-class presentation :: week16a - 90 K [.ppt]
----------------------------------------------------
in-class presentation :: week16b - 132 K [.ppt]
final grading sheet :: coded site - 44 K [.doc]

Week 17:

in-class presentation :: week17a - 68 K [.ppt]
lesson example :: douglas bowman presentation on tables vs. css - [url]

Class Information:

Art 128
Interface Programming 1
KCC | New Media Arts
Spring 2006
Kopiko 202
T,Th :: 1:45 pm - 4:15 pm
Instructor: Chris Gargiulo
Office: Olapa 225
Email: gargiulo [at] hawaii.edu

Student Sites:

Student Example Site

Midterm Files: