Web-based Interactive Authoring

Attendance and Completed Homework:
Section 001
Section 002
Section 501

DIGM 240, Web-based Interactive Authoring, is a basic-level studio for exploration of the principles and techniques for creating effective interactive digital media rich web sites. Through a series of homework assignments and projects, students address real world production issues as they master fundamental design concepts. Includes aesthetics of human-computer interaction; hardware, software, bandwidth, project planning, budgeting, and management; and prototyping, testing, and revision management. Primary production tools include instruction in some of the industry's leading languages and tools for Internet authoring including HTML, XHTML, CSS, Javascript, and Dreamweaver.

Midterm Project

Basic hyperlink text based website including:

  1. home page
  2. resume
  3. art samples
  4. biography

All pages must have consistent navigation links and custom logo. At least one page of the site must validate XHTML 1.0 strict with no errors. Extra credit if no warnings.

Final Project

The student's website will be updated with graphics and stylized with CSS, and must include at least one extra section of student's choice:

  1. User survey or questionnaire
  2. Sound voice-overs or music
  3. Short quicktime movie.

All pages of the site must validate XHTML 1.0 strict and CSS with no errors (except multimedia page). Extra credit if no warnings.

Grading

  • Attendance: 1 absence = freebie, 2 unexcused absences = minus one letter grade, 3 unexcused absences = class failure!
  • 300 Homework: 5 assignments @ 60 points each.
  • 100 Midterm Project: (functionality, content, creativity)
  • 200 Final Project: (functionality, content, creativity), extra credit = 30
  • 100 Final Exam
  • 700 total / 7 = 100 percent course grade

Equipment

Week 1

09/27.. The History of the Internet

Course Overview
The Internet.. Created by Uncle Sam.. Owned by none! http://www.wdvl.com/Internet/History/
W3C Validation Service
Firefox / Web Developer extension / FireFTP
See "Web Standards" sing
What is XHTML/CSS
Some of what the intructor is looking for:
Specifications:
  • Files/e-mails are named appropriately
  • Assignments meet project size/color requirements
  • Assignments are completed on time
Content:
  • Homework contains all requested information
  • Quality/Legibility of thumbnails/comps
Creativity:
  • Level of detail in thinking
  • Variety of ideas explored
  • Focus on consistent strategy
Students should:
  • Attend ALL classes
  • Care about his/her work
  • Make progress in the medium
  • Help, cooperate and collaborate with his/her classmates
  • Take risks
  • Make mistakes
Student webshare accounts via drexel server
Setup c-shell account - http://www.drexel.edu/computeraccounts
Telnet into dunx1.irt.drexel.edu server
  • Create a directory public_html
  • Execute webshare command
Configure Dreamweaver to connect to student account on drexel server
Homework for week 1

Due midnight the night before next class:

Reading:
Web Designer's Reference: Chapters 1 thru 3
Dreamweaver CS3 How-Tos: Chapter 1 & 2
Submit via email to: jervis.thompson@drexel.edu, subject: "digm240hwk01s###jwt05" [replace ### with your class section number, replace jwt05 with your email account login]
A link to your update index.html page to include personal bio: what you enjoy doing, your current program of study at drexel, why you chose your field of study, how far along you are in the program, a brief explanation of your past experience with web design (before this class), including HTML, XHTML, CSS, graphics, etc. (There is no need to impress me, just be honest.) If you have use any other web technologies or web development packages, include that also. The link should look like: http://www.pages.drexel.edu/~twf23/digm240/
Website Logo: Develop a Logo that will be used for your website Minimum 8 thumbnail sketches in your notebook. Bring notebook to next class for review.
Week 2

10/04.. Typography & Color On the Web

Online Resources:
The Elements of typographic Style Applied to the Web
Web Style Guide to Typography
Usable Type Web Typography - Sources for Inspiration and Instruction
Typster or FontTester
Color Theory for Web Designers
Color Matters
Color Schemer
Color Jack Sphere
Kuler by Adobe
Tutorial: Images, Links & Navigation, and Intro to CSS:
CSS Reference | Fonts | Colors | w2 materials
Homework for week 2

Due midnight the night before next class:

Reading:
Web Designer's Reference: Chapters 4 & 5
Dreamweaver CS3 How-Tos: Chapter 5 &7
Submit via email to: jervis.thompson@drexel.edu, subject: "digm240hwk02s###jwt05" [replace ### with your class section number, replace jwt05 with your email account login]
resume.html
Build an online resume.
Use <ul> and anchor links for in-page navigation to major sections of the website. Create direct links to other websites where available (employers, hobbies, ec.) link to resume from index.html and create a link to return to index page.
CSS
link resume.hmtl and index.html to same extrenal style sheet and stylize text and background using css.
Website Logo
Post final logo to your "home page" a.k.a index.html
Website Design: Look & Feel
Develop 8 unique design layout comps in your notebook.
CSS Design Gallery References:.
Week 3

10/11.. The Internet and the modern artist

Lecture:
How to Evaluate a Website
Online Resources - Layout with CSS:
W3C on Positioning
W3C Visual Formatting Model
Position is Everything
Fixed Width Layouts
BrainJar: CSS Positioning
Flexible Layouts
CSS Layout Techniques
Sample - Layout with CSS:
Download raw files
Homework for week 3

Due midnight the night before next class:

Reading:
Web Designer's Reference: Chapters 8
Dreamweaver CS3 How-Tos: Chapter 4
Submit via email to: jervis.thompson@drexel.edu, subject: "digm240hwk03s###jwt05" [replace ### with your class section number, replace jwt05 with your email account login]
portfolio.html
Add portfolio.html to your website and create links to and from for index.html and resume.html.
Include jpg comps of 3 best website design.
Write a sentence or two explaining how you will organize your portfolio section.
Color Scheme
Update your master css file to utilize your color scheme.
Code clean up
Clean up the code on all of your pages.
Week 4

10/18.. Traditional Art Tools vs. Digital art tools

Lecture:
Tables with style.. view
Online Resources - Tables:
CSS Tables
Modern Solutions
CSS Table Gallery
Quirksmode
Verlee on Styled Tables
HTML and CSS Table Border Style Wizard
Unobtrusive Table Sort (Java)Script
Empty CSS templates
Homework for week 4

Due midnight the night before next class:

Reading:
Web Designer's Reference: Chapters 7
Dreamweaver CS3 How-Tos: Chapter 3
Submit via email to: jervis.thompson@drexel.edu, subject: "digm240hwk04s###jwt05" [replace ### with your class section number, replace jwt05 with your email account login]
extras.html
Add extras.html (or page title of your choice).
Must include tabular data chart, stylize data with css.
Add links to and from on all other pages, complete navigation between all pages we covered to date.
Week 5

10/25.. Web Accessibility

Lecture:
Wikipedia on Web Accessibility
Adobe on Accessibility
Section508.gov
A List Apart - What is Accessibility
Homework for week 5

Due midnight the night before next class:

Reading:
Web Designer's Reference: Chapters 10
Dreamweaver CS3 How-Tos: Chapter 8
Submit via email to: jervis.thompson@drexel.edu, subject: "digm240hwk05s###jwt05" [replace ### with your class section number, replace jwt05 with your email account login]
contact.html
Must include a Survey Form using mailto: script
Add links to and from on all other pages, complete navigation between all pages we covered to date.
Week 6

11/01.. Internet Limitations on interactivity

Midterm Review:
XHTML -- validation
Online Resources:
Postion is Everything
CSS postioning
Midterm due week 6
MidTerm Assignment:
Basic hyperlink text based website including:
  • home page
  • resume
  • art samples
  • biography
All pages must have consistent navigation links and custom logo.
At least one page of the site must validate XHTML 1.0 strict with no errors. Extra credit if no warnings..
Submit via email to: jervis.thompson@drexel.edu, subject: "digm240midterm_s###jwt05" [replace ### with your class section number, replace jwt05 with your email account login]
URL to your midterm "index.htm" page
Week 7

11/08.. Styling with Forms? -- IDMAa 2007 conference in Phildalphia -- FUEL gallery student showcase -- 249 arch street phila. pa 19106 (215)592-8400 -- 11:00 am to 5:00 pm, 7:30 pm to 9:30 pm

Online Resources - Forms:
Dreamweaver & CSS: Styling Form Elements
Fancy Form Design
Fun with Forms - *sample*
Web Based Forms: Modern Solutions
Form Styling with CSS - *sample*
Checklist Samples
CSS Forms - *sample*
Styling Form Controls
Homework for week 7

NONE.

Week 8

11/15.. The power of the internet

Midterm review
Online Resources - Adding Multimedia:
Bye Bye <EMBED>
QuickTime
Standards Compliant Web Audio & Video
Standards Compliant method to add MP3s to pages
Flash Satay
SWF Object
Inserting Flash Movies The Right Way
Homework for week 8

Due midnight the night before next class:

Reading:
Web Designer's Reference: Chapters 11
Dreamweaver CS3 How-Tos: Chapter 9
Submit via email to: jervis.thompson@drexel.edu, subject: "digm240hwk06s###jwt05" [replace ### with your class section number, replace jwt05 with your email account login]
Link to your web page that contains multimedia, must include: audio, video, or flash movie (.swf)
Link to your contact.html page, must include a Survey Form using mailto: script
Start prepping site for final
Week 9

11/29.. The Future of Interactivity on the internet

Topics:
Homework review
Javascripts/DHTML. Opening custom broswer windows with javascript.
Final Quiz - overview
Class critique
Final project review
Homework for week 9

Final project quality control, clean up, and cross platform troubleshooting.

Week 10

12/06.. For you: last class!

Topic:
Last call for questions
Final Quiz
Final project for week 10

Due midnight the night before next class:

Submit via email to: jervis.thompson@drexel.edu, subject: "digm240final_s###jwt05" [replace ### with your class section number, replace jwt05 with your email account login]
URL to your final "index.htm" page

Due the start of next class:

Submit by hand a zip MAC/WIN CDROM that contains ONLY a working copy of your complete web site.
How to burn true cross platform CDROM's. [view]