- Course: ART 258 | Kapiolani Community College, New Media Arts
- Class: KOA 103 T/R: 10:45am–1:15pm
- Instructor: Mike King, [[email protected]](mailto: [email protected])
- Need help?
- It sends message digests to people who aren't active in the room, so feel free to ask a question even if no one's around.
- Look through and create issues for projects
Table of Contents
- Course Info
- Course Objectives
- Course Content
- Texts
- Materials
- Method of Instruction
- Method of Evaluation
- Instructor’s Expectations & Student Responsibilities
- Instructor’s Absence
- Attendance
- Grading Policy
- Important Campus Dates
- Grading System
- Special Student Services (SSSO)
- Student Conduct Code
- This Class is a “Safe Zone”
- Schedule
- Midterm Project
- Final Project
- Weekly Schedule
- Week 1: Intro to Course & Front-end Tools
- Week 2: Review of Basic Web Development Techniques
- Week 3: Continue Review of Web Development Practices
- Week 4: CSS Authoring (Sass)
- Week 5: CSS Architecture & Frameworks
- Week 6: Marketing Websites
- Week 7–9: Studio (Midterm Project)
- Week 10: Midterm Due & Critique
- Week 11: JavaScript Part 1
- Week 12: JavaScript Part 2
- Week 13: JavaScript Part 3
- Week 14: Digital Products / Web Applications
- Week 15–16: Studio (Final Project)
- Week 17: Final Due & Critique
- Additional Educational Resources
- License
- ART 258 Interface Programming II (3 credits)
- 6 hours lecture/lab per week
Prerequisite: ART 128 with a grade of “C” or higher; approval of the Interface Programming II portfolio review or acceptance into a NMA-AS specialization.
ART 258 Interface Programming II builds upon the foundation level HTML, CSS, and Javascript concepts introduced in ART 128 Interface Programming I.
Through lessons, demonstrations, and hands-on-exercise, this course aims to develop intermediate skills in contemporary interface programming practices. Weekly topics will address emerging and popular interface programming techniques and technologies.
Upon successful completion of ART 258, the student should be able to:
- Apply intermediate level and advanced concepts and principles of interface programming in the creation of interactive interfaces and applications.
- Utilize emerging and contemporary markup, styling, and scripting technologies to create effective interactive client-based interfaces.
- Apply knowledge of the theory, history, and principles of interface design in the creation of new media art.
- Apply successful problem-solving skills utilizing industry standard applications, vocabulary, 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 credit during group critiques.
- Synthesize the concepts and principles of interface programming with emergent technologies in the creation of interactive interfaces that integrate conceptual thinking, technical execution, and aesthetic application.
- Demonstrate professional communication within a team by working together to achieve solutions that best fit a magnitude of problems
- Development of graphically unified page and website design demonstrating the design principles of balance, rhythm, emphasis, contrast, variation, repetition, and unity
- Evaluation of successful usage of web standards and CSS
- Exploration of intermediate-advanced HTML and CSS techniques
- Understanding of responsive web design and development techniques
- Exploration of typographic characteristics using CSS in web design
- Exploration of time-based design using CSS animations
- Understand the role and necessity for JavaScript within the web design process and its relationship to other web technologies (HTML/CSS)
- Analyze samples of interactive HTML5 (JavaScript-based) web applications on the Internet
- Demonstrate the ability to research topics in interactive programming and be able to analyze and apply basic computer programming techniques using JavaScript
- Explain accessibility, cross-platform, and browser related issues with regard to JavaScript
- Analyze the possibilities and limitations of JavaScript (client/server)
- Learn basic JavaScript techniques by creating small interactive web components
- Learn the different methods for manipulating and displaying multimedia content (text, image, and sound) in JavaScript
- Implement a fully-featured, interactive web application using HTML/CSS/JavaScript.
- A thorough understanding of version control, why its important and its usage through Git and GitHub
- CSS authoring & architecture using Sass preprocessing
- Understanding of how to create a CSS frameworks
- Prototyping / Agile development techniques
- Preparation of assets optimized for website display on cross-platforms through build processes
- Analysis and demonstration of usability & accessibility, cross-platform and browser related issues with regard to web standards and CSS
There are no required texts for this course. Readings will be supplied by the instructor and/or student(s) on a week to week basis online.
The primary software packages used in this class are Github Desktop, Atom, Prepros, and Google Chrome, which will be installed on all computers in the KOA 103 class room. All of the listed development software is either free or provides a free trial with no time limit, so students working on personal computers can follow along without purchasing anything.
Students will be required to use design software as part of assignments, so use of Adobe design products (Photoshop/Illustrator/Fireworks) is expected. Adobe Creative Cloud will be installed on all computers in the KOA 103 class room.
Students are also welcome to use other types of design and development software (not provided) such as Bohemian Coding Sketch ($99), Google Web Designer (free), Brackets (free), or Sublime Text ($70).
All students are required to register for a free Github account to host their assignments, mid-term, and final website. Students are also recommended to sign-up for a free Codepen account, as certain class exercises and examples will be showcased using this tool.
While not required, it is recommended that you purchase a cheap sketchbook and a set of black and/or grayscale pencils/pens/markers for initial sketching and ideation.
Additionally, backup media (such as external hard drives or a USB flash drive) or an online file storage solution (Google Drive or DropBox) is recommended.
The method of instruction will include lectures, studio demonstrations, project development, individual instruction, group discussions, and critiques. Examples are presented when important to describe course content. Class projects and procedures are the focus of many course discussions.
While the content of this course will be focused on front-end web development, assignments and projects will be evaluated based on their visual presentation as well as their functionality.
Students will be expected to create usable interfaces based on user-centered design techniques presented in this course, as well as creative branding and visual designs using the foundational principles taught in the pre-requisite courses for the New Media Arts—Interface Design specialization.
Students will demonstrate their conceptual understanding of project assignments by creating preliminary sketches and drawings and by meeting each projects technical specifications. Students may also be asked to show their understanding by submitting clearly written, well-conceptualized statements, and by showing strong group communication skills during critiques.
Each student will be expected to create resources (sketches, creative briefs, coded interfaces, digital designs, etc.) based on project guidelines. Additionally, they will complete tutorials and projects that demonstrate their ability to execute specific software and coding techniques. The quality of these techniques and materials will be assessed in the final grade evaluation based on the successful application of the technology in working interactive models.
Students will be expected to participate as active class members. This includes attending classes; meeting all project deadlines; completing production time outside of class in the lab environment; and participating as dependable team members. During critiques, students are expected to participate as both presenters and active critics.
Lectures, demonstrations and general class participation are an important aspect of this course. For all instructional activities, students are responsible for meeting all of the instructor’s attendance and assignment requirements. Failure to do so may affect their final grade. For unexcused absences, students need to make arrangements with other class members regarding information. Since this is a college course, time outside of class will need to be consistently spent on projects to meet the requirements of the class.
In all college-related activities, including instruction, students must abide by the college’s codes and regulations, refraining from behavior that interferes with the rights and safety of others in the learning environment. If students file a grievance, they are fully responsible for providing proof they have been wronged.
Please have your cell phone on silent during class and provide your own headphones if you will be listening to music so you do not distract others.
In the event of the instructor’s absence, college policy requires students to wait 15 minutes before leaving.
Each student is responsible for the material presented in class, therefore regular attendance is expected. In order to keep up with all lessons and the general pace of the class it is essential that you arriving promptly and remain for the scheduled class period. Leaving class early without permission will result in an absence marked for that class period. Three tardies will equal one unexcused absence. Consistent lateness and absences may result in a lower grade for the semester due to any missed opportunities for graded class participation sessions during class critiques. If you are absent for medical reasons, please provide a note from your doctor or nurse. If there is a severe family problem, a long-term personal illness, or something else that may interfere with the course, please discuss this with me as early as possible. So long as I know about any potential problems in advance, there is usually a solution. Please do not wait until it is too late so as to avoid any repercussions to your grade.
Grading is based on assignments, projects, and class participation during critiques. It is the responsibility of the student to collect handouts, take notes, complete and turn in assignments on due dates. Make-up assignments will be administered only in cases where there is a valid medical reason accompanied by a doctor’s note. The assigned projects must be turned in on the due date. Missing a deadline will result in a full letter grade reduction for that project unless there is a valid medical reason or a family emergency. Projects may be revised and turned in again for re-grading. Class participation will be considered in the evaluation of the final grade. Disruptive or argumentative behavior will result in a lower grade during final grade evaluation or dismissal from class.
Note: Any student missing the final semester critique or not turning in a final project without prior permission will have a full letter grade taken off the final semester grade.
Please visit the KCC Academic Calendar for more information.
All projects are worth 100 points each.
- A (90–100)
- B (80–89)
- C (70–79)
- D (60–69)
- F (0–59)
If you are a student with a documented disability and have not voluntarily disclosed the nature of your disability and the support you need, you are invited to contact the Disability Support Services Office, `Iliahi 113, 734-9552 , or email [email protected] for assistance.
Extended time in a minimal distraction environment is an appropriate accommodation based on a student's disability. If you do have a disability and have not voluntarily disclosed the nature of your disability and support that you, you are invited to contact the Disability Support Services Office, (DSSO) 734-9552 (V/TTY), Ilima 103 for assistance.
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.
The instructor reserves the right to ask a student to leave the classroom at any point if a student exhibits behavior that is not in accordance with the KCC Student Conduct Code.
Discriminatory or rude comments of any kind, particularly regarding gender, ethnicity, sexual orientation, or religion, will not be tolerated.
Students will be learning the basics of responsive web design by completing weekly exercises using a template design provided by the instructor. For the midterm, students will customize, or “reskin,” this template into a custom designed, responsive web site.
Students will go through the full development process of planning, prototyping, and building one working web application throughout the second half of the semester.
- Introduction to course
- Introduction to new development tools & concepts
- Review of basic HTML/CSS web development concepts:
- Grid / Layout
- CSS Positioning
- Review of intermediate web development concepts:
- Web components
- Web Typography
- Cleaning up of prototype
- Introduction to Sass
- Variables
- Nesting
- Partials / Import
- Mixins
- Extend / Inheritance
- Operators
- Introduction to CSS architecture
- Developing custom CSS framework
- Grids
- Responsive web design (#RWD)
- CSS media queries
- Utility classes
- Buttons / Call-to-actions
- Grids
- Midterm project announced:
- Responsive website
- Enhancing prototype UI/UX
- Studio time to work on midterm
- Final project announced:
- Interactive web application
- Introduction to web programming using JavaScript
- Browser developer console
- Operations
- Variables
- Data Types/Structures (Objects/Arrays)
- Functions
- Conditionals (If/Else)
- Loops (For/While)
- Document Object Model (DOM)
- Events
- Storage
No Class: Thursday, November 26
- Creating basic, interactive products:
- Simple game app
- Audio player / digital instrument
- Productivity app
- Studio time to work on final
Final projects due with presentations and critique
This work and all other materials under https://github.com/kcc-nma-art258/ are licensed under a Creative Commons Attribution 4.0 International License