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.

"Web standards are the tools with which all of us can design and build sophisticated, beautiful sites that will work as well tomorrow as they do today."

Jeffrey Zeldman, Best-selling author, designer, and web standards evangelist.
From the book Desinging With Web Standards.

SYLLABUS:

MAJOR ASSIGNMENT LIST:

Assignment: Week: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Due:
1. Simple HTML Page Week 2
2. HTML + Linked CSS Week 3
3. DIV Sections + tests Week 4
4. Two IR techniques Week 5
5. Unordered List Navs Week 6
6. Columns + 7. Sprites Week 7
8. Completed Site Week 8
9. Midterm project Week 10
10. Final Project 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.

Week 1: Intro to the Course

Agenda:

  1. Introduction to the course
    • In this class we will go through in detail the late phases of the design process of planning and designing web sites.
  2. Game plan for the semester
    • Overview of the syllabus
    • Weekly and bi-weekly assignments
    • Two major projects (mid-term and final)
  3. We will take a look at student designs/interfaces from past years.

Presentation:

Class Overview - The Late Stages of the Design Process for Interface Design:

Class examples + related links:

Learning HTML & CSS - Resources:

The Power of CSS:

Class-related Links:

Some Hosting Options:

Other Related Resources:

HTML Coding: Common HTML Tags:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <p></p>
    <ul>
        <li></li>
    </ul>
    <ol>
        <li></li>
    </ol>
    <a href="#"></a>
</body>
</html>

Assignment: Due: Week 2

  1. Set up a local folder system where you will work and test your site locally.
  2. Set up your class web page. Please note that all students are required to have hosting space to post their designs, assignments, and ultimately their final web site. Students are required to purchase a hosting plan with a third party hosting provider. Past students have purchased hosting plans from Bluehost, iPage, Super Green Hosting, and GoDaddy (these are just a few of many hosting providers available). Plans should include ample disk space (ie. more than 2GB or unlimited), support for CGI, PHP, and MySQL, multiple domain hosting (to host more than one site), one-click install/support for Wordpress, Joomla, and Drupal (popular CMS options), and a low, competitive price (an example rate is around $3-$5/month � this is subject to change based upon current trends for hosting prices).
  3. Once your class web page is set up, email the url to the instructor.
  4. Post your 1st assignment - simple HTML web page - on your class web page.
  5. Complete the two tutorials (links are below) on w3schools.com.
Week 2: HTML & CSS

Agenda:

  1. Introductions to CSS
  2. Linking an HTML page to a Style Sheet
  3. Installing the Firefox Web Developer Toolbar
  4. Other Lessons:
    • Two ways to insert an image into an HTML page (img tag vs. css background property)
    • Time permitting, we may go ahead to next week's lessons.

Class examples + related links:

Inspiration:

Assignment related:

Helpful Debugging Resources:

CSS Syntax: 

selector {
	property: value;
}

Assignment: Due: Week 3

  1. Post your "HTML page w/ linked CSS file" assignment on your class web page.
  2. Read about div and section elements, and the difference between block level and inline elements (links are below).
Week 3: The Box Model & Div Block Level Elements

Agenda:

  1. Introductions to DIV's as block level elements used for layout
  2. The Box model
  3. Div tests

Class examples + related links:

Assignment: Due: Week 4

  1. 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)
  2. Conduct a few simple div tests and post them on your class web page.
Week 4: Intro to CSS Positioning &s IR

Agenda:

  1. Intro to CSS Positioning
    • Floats
    • Absolute vs. Relative positioning
  2. Two Image Replacement techniques:
    • Rundle Technique (for non-links)
    • Leahy Technique (for links)
  3. HTML5 shim
  4. More Div tests

Lesson:

  • IR (Image Replacement):
    • What is it?
      • A common practice where designers replace HTML text with an image.
    • How do you do it?
      • There are several techniques – I will show two (the Rundle technique and the Leahy Technique - see below)
        • The best techniques are those that work in all browsers and are accessible by screen readers.
      • Why?
        • Aesthetically, to allow designers to use any typeface they want without limited themselves to system fonts or copyright free/royalty free fonts.
        • TO USE IMAGES AND STILL BE ABLE TO MAKE YOUR SITE ACCESSIBLE!!
        • To allow Google and other search engines to be able to parse through and index your site.
        • To allow handicapped and disabled web users to be able to read ALL of the contents of your site, even images.
      • The code:
        • FOR NON-LINKS: Rundle technique 
          • text-indent: -9000px;
        • FOR LINKS: Leahy technique (on the "a" element) 
          • display: block;
top-padding: [height]px;
height: 0;
overflow: hidden;

Slideshow Presentation:

Class examples + related links:

Helpful Resources:

Assignment-related links:

Assignment: Due: Week 5

  1. Continue creating test pages and post them on your class web page.
  2. Watch the Image Replacement video lesson and complete assignment #4 that has two examples of image replacement.
  3. Go back to past assignments and add in the HTML5 shim code.
Week 5: Unordered Lists for Navigation

Agenda:

  1. Online class this week!
    • There are no in-class, face-to-face meetings this week. The labs will be open for you to use during class time. If you have any questions for me, please use Laulima's DIscussion Board area.
      • If it is a private question, you can either email me or use Laulima's "Private Messaage" feature within the DIscussion Board area.
      • If you are experiencing larger, Dreamweaver/code issues, either take screenshots of your problem and post a description of your problem on the discussion board, or zip up your files post them to Laulima's Drop Box for me to troubleshoot.

Lesson:

  1. Lesson: How to stylize lists for navigation: how to use lists to make three different navigation systems:
    • A header utility navigation
    • A horizontal top navigation
    • A footer navigation
  2. Lesson: a:hover for rollovers
    • Using in-line lists for navigation
      • use unordered lists
      • control the list-style type (set to “none” to remove the default bullet points)
      • control the position of the list items via floats or displaying them “inline”
      • control the visual formatting using margins, padding and borders
      • For further control:
        • make a class called “first” or “last”, then take away the border

Assignment-related links:

Assignment: Due: Week 6

  1. Continue creating test pages and post them on your class web page.
  2. Watch the Navigation using Unordered Lists video lesson and complete assignment #5 that has three examples of navigation using unordered lists.
Week 6: Columns + Sprites

Agenda:

  1. How to do multiple columns, stacked, in HTML via CSS.
  2. How to do CSS rollovers/hovers with sprites.
  3. How to do extend the background of your html page propoerly.

Assignment-related links:

Assignment: Due: Week 7

  1. Continue creating test pages and post them on your class web page.
  2. Watch the Columns video lesson and complete assignment #6 that has two examples of multiple columns.
  3. Try to go ahead and complete assignment #7 and assignment #8.
Week 7: Photoshop to HTML/CSS

Agenda:

  1. Work week to officially begin working on the midterm project.
  2. Review of past assignments/lessons, and in-class time to complete past assignments.
  3. Lesson:
    • The full Photoshop to HTML/CSS process.

Class examples + related links:

Assignment: Midterm NMA Site RedesignDue: Week 10

  1. Download the NMA 2.0 PSD, create a new directory entitled "midterm" then start coding the site using HTML, CSS, and an images folder.
Week 8: Mid-term Project

Agenda:

  1. Work week to continue working on the midterm project.
  2. Lesson:
    • Continuation of the full Photoshop to HTML/CSS process.
  3. Take advantage of 1-on-1 support in class to ask for help on how to go about coding your midterm site and how to fix specific bugs.

Class examples + related links:

Assignment: Midterm NMA Site RedesignDue: Week 10

  1. If you have not begun coding yet, then do so immediately.
  2. When coding, be sure to code from the outside-in and top-down. You want to make sure that you create a stable, robust framework that is flexibile/adaptable to different pages with varying amounts of content.
Week 9: Mid-term Project

Agenda:

  1. Last full work week to finish the midterm project, which is due next Thursday.
  2. Take advantage of 1-on-1 support in class to ask for help fixing bugs.
  3. Lesson:
    • How to create a sub page.

Assignment-related links:

Assignment: Midterm NMA Site RedesignDue: Week 10

  1. Watch the video lesson on How to Create a Sub Page (assignment #8b)
  2. Finish coding your NMA web site. Do as much as you can, working outside-in, top-down.
  3. Make sure that all content is formatted well. Pay attention to the negative space (ie. margins, padding, etc.)
  4. Final Project Tasks:
    • For your final project, if you are coding your design from ART 155/229, please post your ART 155/229 designs as jpgs on your class web page. For those who are not in ART 155/229, please speak to me about what you will be coding for the final project. Once approved, please post a link to your designs.
    • Once your final project designs are posted, go to our class work site on Laulima. In the Discussions area, add your name and the title of your final project as a "new topic" inside of the "Final Project" forum (just like how John Doe did) - then post a direct link to your final project design(s) (jpgs posted on your web site). In this discussion area we can provide feedback for final revisions before you begin coding.
Week 10: Mid-term Project

Agenda:

  1. Tuesday: last day to finish the midterm project.
    • Try to complete both the home page and one sub page (the about page).
  2. Take advantage of 1-on-1 support in class to ask for help fixing bugs.
  3. Midterm critique will take place on Thursday.
    • 5-7 minutes per person to present.
    • Tone will be informal (anecdotal).
    • Order will be determined via signup on the whiteboard on Thursday at 10:45am.

Critique Schedule:

Student Time
----- SETUP ----- 10:45-10:55
#1 10:55-11:00
#2 11:02-11:07
#3 11:09-11:14
#4 11:16-11:21
#5 11:23-11:28
----- 10 Min. BREAK ----- 11:30-11:40
#6 11:40-11:45
#7 11:47-11:52
#8 11:54-11:59
#9 12:01-12:06
#10 12:08-12:13
----- 10 Min. BREAK ----- 12:15-12:25
#11 12:25-12:30
#12 12:32-12:37
#13 12:39-12:44
#14 12:46-12:51
----- CLOSING REMARKS ----- 12:53-1:15

Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17

  1. There is no homework over break, but please consider the following:
    • Watch the video lesson on How to Create a Sub Page (assignment #8b) and post the completed the assignment as 8b.
    • Decide which design 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.
Week 11: NO CLASS - SPRING BREAK
  • ----- [ NO CLASS - SPRING BREAK ] -----
Week 12: Final Project

Agenda:

  1. Full Intro/Overview of the Final project.
  2. Lesson: Brief Intro to Javascript, JQuery, & Show/Hide Layers.

Class examples + related links:

Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17

  1. Begin coding your web site. Start by creating a folder structure to place your html, css, and image documents.
Week 13: Final Project

Agenda:

  1. In-class review of home page code.
  2. In-class working time to continue coding your site.
  3. Lesson: Drop-down/Fly-out Menus.

Class examples + related links:

Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17

  1. 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.
  2. 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.
Week 14: Final Project

Agenda:

  1. Work Week. Be sure to take advantage of in-class 1-1 support.
  2. Lesson: LightBox/Modal Boxes
  3. Lesson: Brief overview of HTML tables and their history as a layout technique

Class examples + related links:

Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17

  1. Continue coding your web site. By now you should be working on your sub pages and beginning to add in content.
  2. 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
Week 15: Final Project

Agenda:

  1. Work week & informal QA test week. Be sure to take advantage of in-class 1-1 support.
  2. Mini-lessons: Faux columns, Classes & ID's, Anchors, Styling forms, and transparency.

Class examples + related links:

Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17

  1. Continue coding your web site. By now you should be have a working 1st draft and have begun entering your content.
  2. Be sure to test your site on all browsers and both platforms before entering in final content. Don't forget PC IE6.
Week 16: Final Project

Agenda:

  1. Full work week. Be sure to take advantage of in-class 1-1 support.
  2. Announcements:
    • Please fill out the online eCafe student course evaluation form.
    • The final project is due next week Tuesday. There will be no class next week Thursday.
    • After the critique, any revisions to the final project will be due by the following Tuesday after the final critique.

Class examples + related links:

Assignment: FINAL HTML/CSS Coded Web SiteDue: Week 17

  1. If you haven't done so already, start a list of all of your outstanding bugs to date. Prioritize your bugs starting with the critical bugs as the most important to be placed on the top of your task list.
  2. Fix ALL of your bugs and continue testing your site.
  3. Be sure to validate your site and test it on PC IE6!
  4. If you are close to finished with your site, ask yourself, "what can I do to make it better?"
Week 17: Final Project

Agenda:

  1. Final critique on Tuesday.
    • 5-7 minutes per person to present.
    • Order will be determined via signup on the whiteboard on Tuesday at 10:45am.
  2. Announcements:
    • Please fill out the online eCafe student course evaluation form.
    • No class on Thursday
    • After the critique, any revisions to the final project are due by next week Tuesday.

Critique Schedule:

Student Time
----- SETUP ----- 10:45-10:55
#1 10:55-11:00
#2 11:02-11:07
#3 11:09-11:14
#4 11:16-11:21
#5 11:23-11:28
----- 10 Min. BREAK ----- 11:30-11:40
#6 11:40-11:45
#7 11:47-11:52
#8 11:54-11:59
#9 12:01-12:06
#10 12:08-12:13
----- 10 Min. BREAK ----- 12:15-12:25
#11 12:25-12:30
#12 12:32-12:37
#13 12:39-12:44
#14 12:46-12:51
----- CLOSING REMARKS ----- 12:53-1:15
Search:

Find it fast.

Class info:

Interface Programming 1
KCC | New Media Arts
Spring 2011
Iliahi 112
T :: 10:45 am - 1:15 pm
Instructor: Chris Gargiulo
Office: Olapa 225

Laulima:

Laulima is the online course management web site for the University of Hawai‘i. Login to visit this course's online resources such as the discussion board, chat room, and drop box.

Student sites:

Below is a list of student web pages for each student enrolled in this course.

Helpful Links:

Below is a list of online resources related to this course.

Digital files:

Below are links to project-related digital files/assts.

Past Final Projects:

Below is a list of completed web sites created in past classes in Interface Programming 1.

CSS Gallery Sites:

Below is a list of sites that showcase sites built using CSS.