Interface Programming 1
Interface Programming 1 provides a foundation of skills and principles necessary for students to create web standard compliant web sites using HTML, CSS, and Javascript.
SYLLABUS:
MAJOR ASSIGNMENT LIST:
| # |
Assignment: |
Due: |
| 1 |
Simple HTML web page |
Week 2 |
| 2 |
HTML page w/ linked CSS |
Week 3 |
| 3 |
HTML page w/ stylized DIV sections; DIV tests |
Week 4 |
| 4 |
Two HTML Pages: one long scrolling page + one fixed hight page |
Week 5 |
| 5 |
HTML page w/ Three Navigation systems using unordered lists, a:hover for top nav |
Week 6 |
| 6 |
Two image replacement techniques: rundle & leahy; HTML page w/ Leahy top nav |
Week 7 |
| 7 |
NMA Site Redesign - [MIDTERM] |
Week 10 |
| 8 |
Coded Web Site - [FINAL] |
Week 17 |
CALENDAR:
WEEKLY SCHEDULE + DIGITAL ASSETS:
Click on the top bar for each week to expand or collapse the contents, or you can expand all weeks or collapse all weeks.
Lesson:
Class examples + related links:
Assignment: Due: Week 2
- Set up a local folder system where you will work and test your site locally.
- Set up your class web page.
- Post your 1st assignment - simple HTML web page - on your class web page.
- Complete the three tutorials (links are below) on w3schools.com.
Lesson:
Class examples + related links:
Assignment: Due: Week 3
- Post your "HTML page w/ linked CSS file" assignment on your class web page.
- Read about the div block level element (links are below).
Lesson:
Class examples + related links:
Assignment: Due: Week 4
- Post a simple HTML page with div elements used to designate different sections of the site. Then use CSS to control simple presentation features such as div background color, margin, and padding. (Assignment #3)
- Conduct a few simple div tests and post them on your class web page.
Lesson:
Class examples + related links:
Assignment: Due: Week 5
- Continue creating div test pages and post them on your class web page.
- Create two pages: One long scrolling page that preserves normal flow and one short/fixed height page that breaks normal flow (all absolute positioning)
- Start looking ahead to the next lessons and assignments. Watch the video lessons for week 5 and begin Assignments #5 and #6. See if you can do them this week on your own.
Lesson:
Class examples + related links:
Assignment: Due: Week 6
- Assignment #5a: Starting with your long scrolling page layout, do a "save as" and implement three navigation systems using CSS to control three different unordered lists: Top Global nav, Side Sub nav, and a Bottom Footer nav
- Assignment #5b: Starting with your previous assignment (3 navigations systems using unordered lists), do a "save as" and use a:hover to create a rollover state for your top global nav.
Assignment: Due: Week 7
- Assignment #6a: Watch and complete the video lesson for assignment #6a on image replacement (Mike Rundle’s IR technique).
- Assignment #6b: Watch and complete the video lesson for assignment #6b on image replacement (Seamus Leahy’s IR technique).
Lesson:
Class examples + related links:
Assignment: Due:
- Catch up on all of your assignments.
- Start thinking of a design for your mid-term assignment: redesign of the NMA web site.
Lesson:
Class examples + related links:
Assignment: Midterm NMA Site CSS RedesignDue: Week 10
- Begin your midterm project by working on a new design for the NMA web site.
Lesson:
Class examples + related links:
- in-class example :: GIT - [url]
- in-class example :: SVA #1 - [url]
- in-class example :: SVA #2 - [url]
- in-class example :: UCLA - [url]
- in-class example :: Art Center - [url]
- in-class example :: Art Center's Media Design Program - [url]
- in-class example :: ANU CNMA - [url]
- in-class example :: UCSB art - [url]
- Graphic :: NMA Logo - [.ai]
- Background :: Vector Curves - 860K [.ai]
- Background :: Gritty #1 - 1280x960, 300dpi, 22MB [.psd]
- Background :: Light Effect #1 - 760x480, 72dpi, 10MB [.psd]
- Background :: Light Effect #2 - 760x480, 72dpi, 10MB [.psd]
- Background :: Light Effect #3 - 1024x768, 300dpi, 5MB [.psd]
- Background :: Light Effect #4 - 760x480, 72dpi, 16MB [.psd]
- Background :: NMA 2004 Design - 3083x2182, 250dpi, 16MB [.psd]
- Background :: Plants #1 - 800x600, 72dpi, 10MB [.psd]
- Background :: Plants #2 - 800x600, 72dpi, 16MB [.psd]
- Background :: Shapes #1 - 760x480, 72dpi, 7MB [.psd]
- Background :: Waves #1 - 1024x768, 300dpi, 5MB [.psd]
- Background :: Waves #2 - 1024x768, 300dpi, 5MB [.psd]
Assignment: Midterm NMA Site CSS RedesignDue: Week 10
- Finish the design for your NMA site redesign, then begin coding it. If you have not been able to complete your design, start coding and design as you go.
- When coding, be sure to start from the outside-in and top-down.
Lesson:
Class examples + related links:
Assignment: Midterm NMA Site CSS RedesignDue: Week 10
- Continue designing and coding your NMA web site.
- For next week, post your midterm site and add a link to it off of your class web page - then go to Laulima - in the Discussions area, add your name and the title of your midterm project as a "new topic" - then post a direct link to your midterm assignment (posted on your web site).
- Make sure that all pages are formatted well (gallery, news, etc).
- Post your final project designs from art 229 as jpgs on your class web page. For those who are not in Art 229, please post your personal design(s) for the site that you will be coding for your final project. Then go to Laulima - in the Discussions area, add your name and the title of your final project as a "new topic" - then post a direct link to your final project design(s) (jpgs posted on your web site). I will be providing feedback for final revisions before you begin coding.
Lesson:
Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17
- Over the break, finish your design that you will be coding for your final project.
- If your design is in good shape, you can begin coding it - as a "test" document. Keep in mind, that you may need to code several "test" html pages (ie. for the home page alone) - so be prepared to start over from scratch multiple times.
- ----- [ NO CLASS - SPRING BREAK ] -----
Lesson:
Class examples + related links:
Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17
- Begin coding your web site. Start by creating a folder structure to place your html and css documents.
Lesson:
Class examples + related links:
Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17
- Continue coding your web site. By now you should have a well coded home page. If you do not, use this week to finish your home page before moving on to the sub page template.
- If your home page is complete, be sure to test it on all browsers and both platforms before moving ahead to the sub page template. Don't forget PC IE6.
Lesson:
Class examples + related links:
Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17
- Continue coding your web site. By now you should be working on your sub pages and beginning to add in content.
- Be sure to test your site on all browsers and both platforms before moving ahead to the sub page template. Don't forget PC IE6
Lesson:
Class examples + related links:
Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17
- Continue coding your web site. By now you should be have a working 1st draft and have begun entering your content.
- Be sure to test your site on all browsers and both platforms before entering in final content. Don't forget PC IE6.
Lesson:
Class examples + related links:
Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17
- Using the list of bugs noted during the QA test session in class, update the list with your own list of tasks and known bugs. Then, prioritize your bugs starting with the critical bugs as the most important to be placed on the top of your task list.
- Fix ALL of your bugs and continue testing your site.
- Be sure to validate your site and test it on PC IE6!
- If you are close to finished with your site, ask yourself, "what can I do to make it better?"
