ARTM3210 HTML Toolbox

Description

Assuming basic competency in Web site design, HTML Toolbox will explore intermediate level Web design and development skills through site planning and structure, design, programing, creating templates and site administration. Through lectures, demonstrations, studio problems and critique, students will investigate responsive layouts for desktop and mobile devices, open-source content management tools, modular development, and interactivity through forms and jQuery.

Objectives

The student will (1) develop a website that implements WC3 standard cascading style sheets (CSS) and more advanced HTML coding; (2) demonstrate an ability to use popular web standards and design tools, collaborate on site development and troubleshoot markup languages; and (3) think critically about accessibility issues, programming & design aesthetics, and information structure.

Skills assumed and practiced

(1) Site design and development

  • Register an Internet domain and evaluate web-hosting services
  • Upload website-related files using FTP
  • Manage source and site files

(2) Editing and coding techniques

  • Hand code functional web pages using the basic syntax of HTML
  • Create hyperlinks and rollovers to navigate within, between, and beyond web pages
  • Edit vector and raster graphics for optimal image quality and download speed
  • Use industry-standard web development software applications, including Text Wrangler, Dreamweaver, and Fireworks

(3) Critical thinking, problem solving, and aesthetics

  • Raise technical, procedural and philosophical questions that lead to improvements in efficiency, impact and propriety of web sites and web development
  • Identify and troubleshoot coding, optimization, file management, registration, hosting, and browser problems
  • Articulate and apply basic principles of design in developing and evaluating websites
  • Give and receive criticism that improves function of a website and that respects the dignity of clients and colleagues

Skills to be mastered

(1) Site design and development

  • Organize information architecture for a multi-page site
  • Manage templates, source and site files

(2) Editing and coding techniques

  • Hand code functional web pages using the more advanced HTML
  • Write clean and functional Cascading Style Sheets (CSS)
  • Design and create contact forms
  • Optimize tiling vector and raster graphics for use with CSS
  • Develop greater proficiency in the use of Text Wrangler, Dreamweaver, as well as, Illustrator and Photoshop

(3) Critical thinking, problem solving, and aesthetics

  • Suggest answers, as well as raise questions, for technical, procedural and philosophical questions lead to improvements in efficiency, impact and propriety of web sites and web development
  • Identify and troubleshoot problems in CSS, forms, and image sprites and their integration in HTML
  • Articulate and apply basic and experimental principles of design in developing and evaluating websites
  • Give and receive criticism that improves the form and function of a website and that respects the dignity of clients and colleagues

Required Materials

  • Sketchbook
  • Thumbdrive that is at least 8 gigs
  • The Zen of CSS Design:Visual Enlightenment for the Web by Dave Shea, Molly E. Holzschlag

Structure

Every other week will begin with a lecture or demonstration, then transition into a class discussion or studio activity. There will be weekly experiments and bi-weekly challenges that will need to be completed and uploaded to the class’s web server before the start of each class.

Final Project 25%

There will be one final project assigned this semester. It accounts for 25% of your final grade. The Final is due at the beginning of the class during finals week. A late final project will not be accepted and receive an automatic F.

CSS Zen Gardens 25%

There will be at least 3 CSS Zen Garden projects during the course. These will focus on combining skills and techniques picked up through experiments. Additional projects or tests maybe assigned by the instructor. These projects will account for 25% of your final grade.

Weekly Experiments 10%

Experiments will be short assignments dealing with a single topic. Each of the topics will range from purely technical challenges to issues of design aesthetics. Experiments must be uploaded to your personal web space and a link posted to the class blog. Experiments will account for 10% of your final grade.

Student Challenges 10%

Students will design challenges for each other throughout the semester. Designed challenges will be scored 1-5 for aesthetics and technical merit. Completed challenges will be scored 1-3 for technical merit,  aesthetics and efficiency. Everyone must design one challenge, and complete a minimum of 4, any more that are completed will be applied to your grade as extra credit.

Student Demos 15%

Each student will have to do a 10 to 15 minute technical demo. The demo should outline a problem you were attempting to solve, then explain how you came to that solution. Demo notes must be posted to the course blog as a tutorial that those outside the class may learn from. Your demo will account for 15% of your final grade.

Demo Topics may include, but are not limited to:

  • Using sprites
  • Using Photoshop or Fireworks to create an image that repeats seamlessly
  • CSS3 effects: gradients, shadows, transformations
  • Using Multiple backgrounds, borders, shadows
  • The power of CSS’s float declaration
  • Embedding non-websafe fonts with the @font-face rule and Google Fonts
  • Embedding Video or Audio with HTML 5
  • CSS drop down menus
  • jQuery drop down menus
  • Using jQuery to create a scrolling page

Critique and Participation 15%

Critiques play a crucial role in graphic design practice. Group and individual meetings take place through out the semester. Students encounter numerous situations where it becomes necessary to evaluate, work and rework projects in order to achieve the highest possible standards. Verbal and written skills are important, students are required to explain and write about their design decisions in front of the instructor, clients, and peers.

Unless otherwise specified, each project will be turned in by uploading to the class web server. Everyone will use a uniform folder structure and naming system. All projects and exercises are due at the beginning of the class for which the critique is assigned.

Critiques and class discussions, will become helpful tools only through your participation. Participation in class will count for 15% of your final grade.