Digital Media Instructor (RSS)240: Intro to Interactive Media
DIGM 240, Intro to Interactivity, 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
Each student creates, posts, and maintains an interactive web site [800×600 max resolution]. The web site will contain a student created logo; and at a minimum, a one web page autobiography, at least one web page of favorite hobbies with active links to related web pages that popup in a separate browser window. The site will also contain at least one web page with the student’s resume. At least one web page containing a hyperlink email contact, to the student creator. All web pages must have consistent, student created, navigation buttons that allow the user to get to any web page within three mouse clicks. Student web site should have a similar look and feel on Mac (Safari & FireFox) and Windows (FireFox & IE) and should validate as XHTML 1.0 Transitional/Strict.
Final
Students will upgrade their web site to include advance features i.e.. User survey or questionnaire page, sound voice-overs or music page, a short quicktime movie page, student’s portfolio page. Students will insure that their entire web site is functional, and has a similar look and feel on Mac (Safari & FireFox) and Windows (FireFox & IE). All pages of students web site MUST validate via CSS & XHTML 1.0 Transitional/Strict with zero errors, unless validation errors are approved by your instructor via email prior to the due date.
Grading
- 20% Class attendance & participation
- 20% Homework (functionality, content, creativity)
- 30% Midterm (functionality, content, creativity)
[10, 10, 10] - 30% Final (functionality, content, creativity)
[10, 10, 10]
Equipment
- HTML for the World Wide Web with XHTML and CSS: (Visual Quick Start Guide, Fifth Edition)
- Macromedia Dreamweaver MX 2004 for Windows and Macintosh (Visual QuickStart Guide)
- At least one ZIP Diskette — (External firewire hard drive optional)
- Headphones (If you want to listen to music while you work!)
09/25.. 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 with Web Developer extension
- Drexel online textbook resources
- See “Web Standards” sing
- 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
websharecommand
- Create a directory
- Configure Dreamweaver to connect to student account on drexel server
Due midnight the night before next class:
- Submit via email to: jeremy@drexel.edu, subject: “digm240hwk01s###jwt” [replace ### with your class section number, replace jwt with your initials]
- Three web site urls that you really like with a short paragraph explaining why.
- Attached custom student logo and navigation buttons (Draft 01) 800×600 in jpeg format, filesize 100k or less.
- Final grade extra credit questions:
- Submit two printed copies [NOT handwritten] at the start of next class. Include your name, date due, 3 extra credit questions, correct answers, and page references] based on the following reading:
- Read “HTML4 for the world wide web”
- Introduction
- Chapter 1: Web Page Building Blocks
- Chapter 2: Working with Web Page Files
- Chapter 3: Basic XHTML Sturucture
- Read “Dreamweaver MX / 2004 for Win & Mac”
- Introduction
- Chapter 1: Getting Started
- Chapter 2: Setting Up a Local Site
- Chapter 3: Basic Web Pages
10/02.. Interactivity on the Internet
- Online Resources:
- A List Apart for people that make web sites
- Quality Tips for Web Masters
- A Web Standards Checklist
- htmldog.com - A Good Practice Guide to XHTML and CSS
- Topics:
- HTML: Elements, Attributes, Values, Block, Inline, Special Symbols, Absolute URLS, Relative URLS, DOCTYPE, (X)HTML, CSS, Propertys, Values, File naming conventions, File extensions, DOCTYPE, meta, encoding,
head, body, title, h1, h2, h3, h4, h5, h6, p, align, div, id, class, color - Dreamweaver tools:
Preferences, Panels, Inspectors, Document window, Toolbar, Files Panel, FTP,Basic Web Page, color, upload, view online
Due midnight the night before next class:
Create and post a “mybio.htm” page that describes who you are, where your from, where you what to go in life, what your hobbies are, etc, etc. Using the tags & atrributes covered in class to enhance your web page so that it is “pleasing” to the eye.
- Submit via email to: jeremy@drexel.edu, subject: “digm240hwk02s###jwt” [replace ### with your class section number, replace jwt with your initials]
- URL to your “mybio.htm” page
- Attached custom student logo and navigation buttons together on a page with layout considerations (Draft 02) in jpeg format, size 100k or less
- Final grade extra credit questions:
- Submit two printed copies [NOT handwritten] at the start of next class. Include your name, date due, 3 extra credit questions, correct answers, and page references] based on the following reading:
- Read “HTML4 for the world wide web”
- Chapter 4: Basic (X)HTML Formatting
- Chapter 5: Creating Web Images
- Chapter 6: Using Images
- Read “Dreamweaver MX / 2004 for Win & Mac”
- Chapter 4: Editing Code
- Chapter 5: Working with images
10/16.. The Internet and the modern artist
- Online Resources:
- Create a color palette from a photo.
- Online Color Palette Generators.
- Why Color Matter.
- Topics:
- Monospaced, Image formats (gif, jpg, png), Resolution, Speed, Transparency, Animation, RGB, CMYK, optimization techniques
b, i, big, small, pre, blockquote, sup, sub, ins, del, abbr, color, size, img, src, alt, width, height, align, br, hr
Due midnight the night before next class:
Update and post a "mybio_enhanced.htm" page with at least 2 images, and at least one horizontal rule. One image can be on a line by it self, but the other MUST have wrapping text.
- Submit via email to: jeremy@drexel.edu, subject: “digm240hwk03s###jwt” [replace ### with your class section number, replace jwt with your initials]
- URL to your “mybio_enchanced.htm” page
- Attached custom student logo and navigation buttons/with rollovers (Draft 03) in jpeg format, size 150k or less.
- Final grade extra credit questions:
- Submit two printed copies [NOT handwritten] at the start of next class. Include your name, date due, 3 extra credit questions, correct answers, and page references] based on the following reading:
- Read “HTML4 for the world wide web”
- Chapter 7: Links
- Read “Dreamweaver MX / 2004 for Win & Mac”
- Chapter 6: Working with Links
10/23.. Traditional Art Tools vs. Digital art tools
- Topics:
a, href, border, anchor, target, http, ftp, news, mail, accesskey, tabindex- Image maps, Rollover images
- Introduction to Style Sheets
Due midnight the night before next class:
Using the topics cover thus far, create "index.htm", "mybio.htm", "resume.htm", "hobbies.htm", and "portfolio.htm" pages. All pages do not have to be completed; however, the user should be able to get to any one of these web pages from any other web page via consistent navigation buttons and or text links.
- Submit via email to: jeremy@drexel.edu, subject: “digm240hwk04s###jwt” [replace ### with your class section number, replace jwt with your initials]
- URL to your "index.htm" page
- Final grade extra credit questions:
- Submit two printed copies [NOT handwritten] at the start of next class. Include your name, date due, 3 extra credit questions, correct answers, and page references] based on the following reading:
- Read “HTML4 for the world wide web”
- Chapter 8: Creating Styles
- Chapter 9: Applying Styles
- Chapter 10: Formatting with Styles
- Read “Dreamweaver MX / 2004 for Win & Mac”
- Chapter 8: Fonts and Characters
- Chapter 11: Stylin’ with Style Sheets
10/30.. Creativity and Technology
- Online Resources:
- All you wanted to know about Web type but were afraid to ask, by Joe Gillespie
- What is Accessibility for Section 508?, by Jim Thatcher
- Topics:
- selector, declaration, property, value, Class, ID, External/Internal Style Sheets, Comments, font-family, italic, bold, size, line-height, color, background, spacing, align, text-transform, text-decoration.
- Box Model, margin, padding, border, content area, space, position: absolute, fixed, relative, background, foreground, width, height, auto, overflow, float, vertical-align.
- Final grade extra credit questions:
- Submit two printed copies [NOT handwritten] at the start of next class. Include your name, date due, 3 extra credit questions, correct answers, and page references] based on the following reading:
- Read “HTML4 for the world wide web”
- Chapter 11: Layout with Styles
- Chapter 13: Lists
- Chapter 14: Tables
- Read “Dreamweaver MX / 2004 for Win & Mac”
- Chapter 9: Paragraphs and Block Formatting
- Chapter 12: Tables
11/06.. Internet Limitations on interactivity
- Online Resources:
- Postion is Everything
- CSS postioning
- MidTerm Assignment:
- Modify your multi page web site. Using tags and topics covered in class, cleanup and beautify your “index.htm”, “mybio.htm”, “resume.htm”, “hobbies.htm”, and “portfolio.htm” pages. All of these linked pages HAVE to be completed. The web user should be able to navigate too any one of these web pages with three mouse clicks or less.
- Submit via email to: jeremy@drexel.edu, subject: “digm240midterm_s###jwt” [replace ### with your class section number, replace jwt with your initials]
- URL to your midterm "index.htm" page
- Final grade extra credit questions:
- Submit two printed copies [NOT handwritten] at the start of next class. Include your name, date due, 3 extra credit questions, correct answers, and page references] based on the following reading:
- Read “HTML4 for the world wide web”
- Chapter 16: Forms
- Read “Dreamweaver MX / 2004 for Win & Mac”
- Chapter 15: Filling out Forms
11/13.. Who owns my work?
- Topics:
- table, tr, td, border, width, height, align, float, , align, valign, bgcolor, background, cellspacing, cellpadding, padding, border-spacing, colspan, rowspan, nowrap.
- form, method, action, input type, name, size, maxlength, password, textarea, wrap, value, checked, list/menu, multiple, hidden, button, reset, post, get, nothing, readonly.
Due midnight the night before next class:
Create and post a unique user questionaire or survey form "qsform.htm".
- Submit via email to: jeremy@drexel.edu, subject: “digm240hwk05s###jwt” [replace ### with your class section number, replace jwt with your initials]
- URL to your "qsform.htm" page
- Final grade extra credit questions:
- Submit two printed copies [NOT handwritten] at the start of next class. Include your name, date due, 3 extra credit questions, correct answers, and page references] based on the following reading:
- Read “HTML4 for the world wide web”
- Sound (reference index)
- Video (reference index)
- Read “Dreamweaver MX / 2004 for Win & Mac”
- Sound (reference index)
- Video (reference index)
11/20.. The power of the internet
- Sample pages:
- CSS method to add Quicktime movie to a page (WIN IE requires click to activate).
- Javascript Method to add Quicktime movie to a page.
- Trouble shooting with instructor
- Topics:
- Sound tags that work with Internet broswers on MAC and WINDOWS platforms.
- Video tags that work with Internet broswers on MAC and WINDOWS platforms.
Final grade extra credit questions:
- Submit two printed copies [NOT handwritten] at the start of next class. Include your name, date due, 3 extra credit questions, correct answers, and page references] based on the following reading:
- Read “HTML4 for the world wide web”
- Chapter 19: JavaScripts Essentials
- Read “Dreamweaver MX / 2004 for Win & Mac”
- Chapter 16: Behavior Modification
11/27.. The Future of Interactivity on the internet
- Topics:
- Javascripts/DHTML. Opening custom broswer windows with javascript. Passing parameters in javascript.
- Final project review
12/04.. For you: last class!
- Final Project turn in, and class crit:
Due midnight the night before next class:
- Submit via email to: jeremy@drexel.edu, subject: “digm240final_s###jwt” [replace ### with your class section number, replace jwt with your initials]
- 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]