Course: Interface Programming 1
Term: Spring 2016, CRN: 33432
Instructor: Emmanuel Pilande
Email: epilande@hawaii.edu
Class Hours: Tuesday & Thursday, 800am – 1030am, Kopiko 202A
Office Hours: Tuesday & Thursday, 730am – 800am, Kopiko 202A
Intro to Front-end Web Development
ART 128 Interface Programming 1 provides a foundation of skills, techniques, and principles necessary for students to create visually effective user-friendly web sites. Through lessons, demonstrations, and hands-on exercises, this course aims to develop skills in writing HTML (hypertext markup language), CSS (cascading style sheets), and JavaScript in pursuit of creating web standard compliant web sites.
6 hours lecture/lab per week
Prerequisite(s): Art 112 with a grade of "C" or higher and satisfactory completion of the Interface Programming portfolio review or acceptance into a NMA AS specialization.
- Course Objectives & Competencies
- Course Content
- Topics addressed & content
- Texts
- Materials
- Instructor's Expectation
- Method of Instruction
- Method of Evaluation & Grading Policy
- Special Student Services
- Student Conduct Code
- This Class is a "Safe Zone"
- Schedule
- Office Hours
- Emergency Contact
Upon successful completion of ART 128, the student should be able to:
- Apply basic concepts and principles of the front-end interface programming technologies HTML, CSS, and JavaScript in the creation of web-standard compliant websites.
- Analyze and evaluate the source code of existing websites for the use of well-formed, semantic markup, cross-platform/cross-browser compatibility, validation, and accessibility issues.
- Apply knowledge of the theory, history, and principles of interface design in the creation new media art.
- Apply successful problem-solving skills utilizing industry standard applications, technologies, and techniques in the creative and technical production process.
- Communicate effectively, both visually and verbally, by presenting work, defending design decisions, and by participating as an active critic during group critiques.
- Synthesize the concepts and principles of interface design with interface programming in the creation of web sites that integrates conceptual thinking, technical execution, and aesthetic application.
The general framework for this course is determined by the stages of the creative web design process for web design projects, consisting of defining, drafting, designing, developing, and delivering web sites.
This course addresses the final two stages of this process:
The Definition Phase (i.e. defining the project)The Drafting Phase (i.e. drafting conceptual plans such as a site maps, wireframes, etc).The Design Phase (i.e. designing the user interface (UI) via design mockups)- The Development Phase (i.e. coding the front-end of the site via HTML & CSS)
- The Due Diligence Phase (i.e. testing the site to ensure quality assurance)
- Intro to Intermediate front-end web development (HTML, CSS, & JavaScript)
- HTML, CSS, and JavaScript syntax.
- Separating content from style/presentation using HTML and CSS.
- Manually hand-coding well-formed, semantic HTML, including proper use of titles, headings, lists, id's, and classes without the use of a WYSIWYG editor.
- Interface programming topics including CSS for layout/positioning (normal flow, absolute positioning, relative positioning, floating, etc), cross-browser compatibility, accessibility, and code validation.
- Interface programming techniques for common interface elements and design patterns including CSS pseudo classes (hover/rollover states), navigation and menu styles (styling lists), image replacement (IR), and controlling HTML/DHTML via Javascript/DOM scripting.
- Critical analysis of HTML, CSS, and JavaScript code used on contemporary Web sites.
- Going through the full design process of converting a visual interface design into a working, interactive interface.
- Quality Assurance Testing - problem-solving and troubleshooting HTML, CSS, and JavaScript by reading, understanding, and editing the code. Demonstrating an expanded vocabulary and an understanding of the importance of good front-end practices by presenting work, speaking about it articulately, defending coding decisions, and by participating as an active critic during group critiques.
- Synthesize all of the concepts and principles of front-end interface programming by creating websites that are robust, flexible, adaptable, and easy to maintain.
There are no required texts for this course. Readings will be supplied by the instructor on a week to week basis, in either paper handout form or online. Recommended, but not required texts:
-
HTML & CSS: Visual QuickStart Guide, 8th Edition. by Elizabeth Castro.
-
Designing With Web Standards, 3rd Edition. by Jeffrey Zeldman and Ethan Marcotte.
-
HTML & CSS: Design and Build Websites by Jon Duckett.
All students are required to have hosting space to post their assignments, internship documentation, and ultimately their final presentation. Students are required to purchase a hosting plan with a third party hosting provider. Past students have purchased hosting plans from hosting providers such as Bluehost 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 popular CMS options (Wordpress, Joomla, Drupal, etc), 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).
Additional materials may include an external hard drive or thumbnail drive with a minimum capacity of 4 GB.
Attendance and online class participation are important to succeed in this course. It is essential that you attend both face-to-face class meetings, arrive promptly, and remain for the full duration of the scheduled class periods. Time outside of class and at your internship location is required in order to meet the requirements of the class. All assignments are due by posting them online by the specified due date/time as specified on course schedule.
Please use the Laulima's online discussion feature for general questions that may benefit others or that others can answer (instead of email), and Laulima's private messages feature, as necessary.
The method of instruction will include individual feedback/instruction, lectures, demonstrations, class discussions, and critiques.
The methods of evaluation used in this course are broken down as follows:
- Projects & Assignments - 80%
- Class Participation - 20%
Students will be expected to participate as active class members. This includes attending all classes; meeting all project deadlines; completing production time outside of class and in the lab environment; and participating as dependable team members. During critiques, all students are required to participate as both presenters and critics.
Grading is based on projects and class participation during critiques and online. It is the responsibility of the student to take notes, plan accordingly, and turn in completed assignments on the due dates. Missing a deadline will result in a point reduction equivalent to a full letter grade, unless there is a valid medical reason or a family emergency. Class Participation is calculated based upon a student’s participation during critiques and online via Laulima in the discussion area. Projects may be revised and turned in again for re-grading.
Three major components of the class are worth 100-200 points each, with a total of 500 points for the course grade. The 500 Points for the final course grade can be broken down as follows:
- Site #1 (Week-by-Week, Step-by-Step Coding) - 200 Points
- 8 Steps (25 Points each)
- Site #2 (Midterm) - 100 Points
- Coded Site Due
- Site #3 (Final) - 100 Points
- Coded Site Due
- Class Participation - 100 Points
- Participation online via Laulima and at the critiques
Dividing the total 500 points by 5 will yield a more legible final course letter grade, dictated as follows:
- A (90–100)
- B (80–89)
- C (70–79)
- D (60–69)
- F (59–0)
If you are a student with a documented disability and have not voluntarily disclosed the nature of your disability so that we may coordinate the accommodations you need, you are invited to contact the Disability Support Services Office in Ilima 107, ph.734-9552, or email kapdss@hawaii.edu for assistance. For students whose primary disability is Deaf or hard of hearing, contact the KCC Deaf Center in Manono 102, ph. 734-9210 (V) or 447-1379 (videophone).
A college campus is a community with specific behavior expectations designed to allow all students, faculty, and staff to flourish. Please familiarize yourself with KCC's Student Conduct Code in the course catalog. You should know your rights and responsibilities on campus. The Student Conduct Code describes specific campus policies related to: drug and alcohol use, smoking, lethal weapons, sexual harassment and sexual assault, academic honesty, nondiscrimination, and family privacy.
In all campus environments, Disruptive Behavior will not be tolerated. This means: any speech or action that (1) is disrespectful, offensive, and/or threatening; (2) interferes with the learning activities of other students; (3) impedes the delivery of college services; and/or (4) has a negative impact in any learning environment.
Discriminatory or rude comments of any kind, particularly regarding gender, ethnicity, sexual orientation, or religion, will not be tolerated.
- Intro to the basics of front-end development (HTML & CSS)
- Key Deliverable: Coded Site #1.
- Applying the basics of front-end development via a provided design
- Key Deliverable: Coded Site #2.
- Applying the basics of front-end development via a custom design
- Ensure Quality assurance via due diligence and thorough testing.
- Reflect upon your experience and share your experience with others.
- Key Deliverables: Coded Final Site #3.
- Weeks 1
- Intro to the Course
- Weeks 2
- HTML & CSS
- Weeks 3
- Box Model & Block Elements
- Weeks 4
- Intro to CSS Positioning & IR
- Weeks 5
- Unordered List for Navigation
- Weeks 6
- Layout: Columns & Image Sprites
- Weeks 7
- Sub Pages
- Weeks 8
- Intro to Version Control
- Weeks 9-10
- Mid-term Project
- Weeks 11
- No Class – Spring Break
- Weeks 12-17
- Final Project
Office hours are held in the computer labs, not at my office. They are operated on a first-come-first-served basis and organized via a sign-up sheet on the whiteboard at the beginning of office hours.
This semester my office hours are:
- Tuesdays and Thursdays 7:30am-8:00am in Kopiko 202A
In the case of an emergency or if you are unable to get a hold of the instructor and have already tried contacting Chris via phone (808-734-9707) and email (epilande@hawaii.edu), you can next contact the Arts & Humanties department chair, Sharon Rowe, by phone (808-734-9282) or email (srowe@hawaii.edu).