Today's Class- Wednesay 12/2

Guys-
I'm sick as dog- I caught some bad bug along w/ my daughter. We were up puking all night.
I can not get into class. I'm so sorry.

Please hand-in your projects on disc to the Art Office.

Michelle

Final Hand-In

Last Day of Class- 12/3

Soft Critique
We will love at sites and see how things are looking.
Please be ready w/ HTML files to show class

FInal Hand-In
Due Wednesday December 10th on DIsc at the ART office in the Art Building on 5th Ave, 3rd floor, front desk. There is not time restriction other than the office closes at 5 pm. I will be picking up your work Thursday morning to grade projects.
Please refer to the Hand-In details in previous posting for what I am expecting from you all.

If you have questions please e-mail me.

Mid Project Crit/Discussion

I would like to share site designs with the class on Wednesday, Nov. 19th.
Please be prepared to show screen shots or PDFs of your site. Put files in the course folder or use a flash drive.

Final Project Hand-In Requirements

Portfolio Website

Required elements:

1. Three design proposals that explores the navigation structure in different layouts and functionality.

2. Select one design and further design the overall page layout with navigation and content/copy area in a Photoshop Document that contains all the sections of your site in folders and layers. I want to have the Photoshop document handed in for a grade with all the layers.

3. Website:
A. A page HTML template for your site.
B. All HTML pages produced in Dreamweaver for your site and image folder. Everyone will have a different number of pages depending on your site content.

Note: It is required to have produced the Homepage and a minimum of three additional HTML pages that are sections of your site.

Your final grade will include all three parts listed above as well as a overall grade for your design of the site.

It is not required to have the site live on a server. However, if you would like to see it live please use your Odin server space.

Uploading/ FTP Instructions

How to FTP to your Odin Server your Poem website

1. Using Fetch as the software, start up the application. A dialog box will prompt:


Hostname: odin.cc.pdx.edu
Username: your Odin account name here
Connection using: FTP
Password: your Odin account password here


2. This will give you access to your Odin server space and there will be folders listed in the window. Put your index.html file and image folder into a folder that already exists on your Odin server named “public_html”. Simply drag the files and image folder into the folder seen in Fetch window from your desktop or disc.


3. You can now check to see if your index.html Poem page works by opening a browser window and entering the URL: web.pdx.edu/~odin account name. Example: web.pdx.edu/~mtrudo.

OCT. 15 HOMEWORK

Find websites that fit into following categories:

- be able to tell us why you find it interesting

1. interesting interactivity
2. well designed [overall] site
3. interesting navigation design

We will talk about them on Monday.

Class ULR's for links

http://web.pdx.edu/~bellerud
http://web.pdx.edu/~jserres
http://web.pdx.edu/~jbmorgan
http://web.pdx.edu/~gardnert
http://web.pdx.edu/~lander
http://web.pdx.edu/~jchas
http://web.pdx.edu/~svincent
http://web.pdx.edu/~mcooper
http://web.pdx.edu/~oslene
http://web.pdx.edu/~dinhs
http://web.pdx.edu/~wolcott
http://web.pdx.edu/~meiners
http://web.pdx.edu/~vargasm
http://web.pdx.edu/~dkoenig
http://web.pdx.edu/~cbowerly
http://web.pdx.edu/~ditrapan
http://web.pdx.edu/~murrayj
http://web.pdx.edu/~agarwals
http://web.pdx.edu/~jdsmit
http://web.pdx.edu/~jsonder
http://web.pdx.edu/~schulerj
http://web.pdx.edu/~thomasoa
http://web.pdx.edu/~dylanp
http://web.pdx.edu/~tessw
http://web.pdx.edu/~strait

Project Two: Description

Description
I will be handing out to everyone two lines from an e.e.cumming poem called this mind made war. You will design an one page website with your two lines. You may use imagery. You are required to link to each of your classmates site from your one page website. I will be collecting URL names- your odin account- to distribute and share with everyone. Your Odin account address should be- http://web.pdx.edu/~[odin account name]. For example my address is:http://web.pdx.edu/~mtrudo.

Required Elements
Photoshop layered document
1. Design one page website in Photoshop: layered document

In Dreamweaver:
1. Make a image link
2. Make a map link
3. Make a rollover link
4. Make a HTML text link
5. Make links to all your classmate's websites

Learning Objectives for Project
• Introduce organizational strategies and systems for both art work, production and website server hosting
• Learn how to design and produce [compressing] graphics ready for Dreamweaver HTML site construction
• Learn concepts of making "tables" in Dreamweaver to build your website
• Learning the basic of Dreamweaver palettes, tools and functions
• Learn how to FTP files to a server for a live site



FTP- File Transfer Protocol
Everyone will FTP your site to your Odin account on the PSU server. We can access our accounts using a FTP software. If you are on a Mac, you will most likely use Fetch or Cyberduck software/utility. Goto http://www.uss.pdx.edu/ for more info and to download a FTP software. PC's have different software then a Mac. For PC users there is FileZilla and many other freeware available.

Project 2: Poem

e.e. cummings
this mind made war


this mind made war
being generous
this heart could dare)
unhearts can less

unminds must fear
because and why
what filth is here
unlives do cry

on him that shat
they shat encore
he laughed and spat
(this life could dare

freely to give
as gives a friend
not whose who slave
unselves to lend

for hope of hope
must coo or boo
may strut or creep
ungenerous who

ape deftly aims
they dare not share)
such make their names
(this poet made war

whose naught and all
sun are and moon
come fair comes foul
he goes alone

daring to dare
for joy of joy)
what stink is here
unpoets do cry

unfools unfree
undeaths who live
nor shall they be
and must they have

at him they fart
they fart full oft
(which mind with heart
he spat and laughed



with self with life
this poet arose
nor hate nor grief
can go where goes

this whyless soul
a loneliest road
who dares to stroll
almost this god

this surely dream
perhaps this ghost)
humbly and whom
for worst or best

(and proudly things
only which grow
and the rain’s wings
the birds of snow

things without name
beyond because
things over blame
things under praise

glad things or free
truly which live
always shall be
may never have)

do I salute
(by moon by sun
I deeply greet
This fool and man

October 8th

Today is another work day for our Blog, Flickr site, and Facebook/MySpace.

Make sure that you have the following components in each site:

Photos
Videos
Blog content entrees/content
Links to other sites
Links to your Flickr, Blog, and Facebook/MySpace so that anyone can find your other sites from anyone specific location.

• Add a Flickr badge to your Blog- goto http://www.flickr.com/badge.gne

Your site should have a concept for how you curated your content.

When you have all of this done, please send your site names/address to me [via this Blog] by commenting to this post.

October 6th

We will continue to work on our Blogs, Flicker and Facebook [or MySpace Site] in class. So today is a work day. I will be visiting everyone, one -on-one to check in with you and answer questions.

Thanks.

October 1 Class Agenda

Lets Review Demo:

Scanning art- High res and low res versions
resolution of images for web
color theory
------------------------------------------------
Breakout Session: Research
Find good examples of Blogs, Flicker, Facebook or MySpace

Discussion of online identities and communities.
--------------------------------------------------

Projects:
Blog: Make a Blog for one on the following people:

1. Dion Warwick
2. Paul Reubens
3. A famous animal- example-"Lassie"

Flicker: Make an online gallery of images

Facebook or MySpace:

Welcome back!

This is ART 341 Interactive Media.

Timeline

TimeLine

M September 29
Introductions to Course and Instructor

Project 1
W October 1
Presentation and discussion about Web ready tools- Blogs, Online Communities, Photo/Video archiving and sharing
Demos- Image scanning, image size, resolution, color theory
In-class working

M October 6
In Class working
Demos-
In class working

W October 8
Send Blog Info to Instructor to post for everyone to review before crit.
Demos-
In class working

M October 13
Critique and sharing of online projects

Projects 2
W October 15
Dreamweaver demo- Software Environment, HTML, File Organization Tips and Requirements
Poem line handout
Make first HTML page and FTP it to your ODIN server

M October 20
Demos-


W October 22
Demos-
In class working

M October 27
Demos-
In class working

W October 29
Critique and discussion


Project 3
M November 3
W November 5

M November 10
W November 12

M November 17
W November 19

M November 24
W November 26

M December 1
W December 3 Final Critique and Hand-In

Grading + Attendence

GRADING
Grades are derived from results for each of the following weighted elements against the scale below.

Web Environments; Facebook, Blog, Flicker 20%
Poetry Website 20%
Final Project 40%
Presentations 10%
Participation, Motivation, Attitude 10%

Grading Scale:
A 94% and above
A- 91-93%
B+ 87-90%
B 84-86%
B- 81-83%
C+ 77-80%
C 74-76%
C- 71-73%
D+ 67-70%
D 64-66%
D- 60-63%
F 59% and below

Attendance:
Attendance in class (as in life) is essential if you wish to do well. As a result, attendance is mandatory. Arriving late,
leaving early or failing to attend class will directly (and adversely) affect your grade as described below. Students are
allowed one excused absence per term to allow for illness or personal circumstances.

EACH UNEXCUSED ABSENCE WILL RESULT IN YOUR FINAL GRADE BEING REDUCED BY 5%.
Late Arrival = ½ Absence Early Departure = ½ Absence Each Full (1) Absence = 5% reduction in final grade

Syllubus

Art 341 Interactive Media l Fall 2008 MW 12-2.50 pm

COURSE OVERVIEW
This is a Studio Course in Digital Media that requires you to integrate practical and theoretical knowledge in the research and development of web pages. It is the first part of a two-term studio sequence in design for interactive media.

Description:
Interactive design for the web focuses on information architecture, navigation systems, and visual interfaces. HTML protyping and mockup and the use of visual design tools are integral to this course as are the creation and optimization of graphics in compressed formats. Experience with web production workflow will be gained through development of site projects. Topics include usability and the aesthetics of web media.

Prerequisites: Art 120, 210, successful completion of the Sophomore Review.

Objectives:
By the end of this course, students will have been exposed to practical and conceptual approaches to:

• Web page construction through coding in HTML.
• Preparation and optimization of web graphics using appropriate compressed formats.
• Color theory for web design.
• Web page and web site construction using visual page and site editors.
• Assembly of templates from prototype layouts and designs.
• Creation of web animations in optimized formats.
• Information design and the organization of content.
• Interaction design and organization of navigation systems. Site maps and flow charts.
• Screen design, including the use of type, layout, and color to support functionality and user experience.
• Web site file and directory management.
• Web-based portfolio project, including preparation of a design document.



References:
Textbooks are required but having a third party reference book can be helpful. There are many to chose from and sometime dependant on personal preference.

Hardware:
External memory devices are required. Either an USB Flash drive or an external removable hard drive.


Projects

1. Using the Web Environment
A. Flicker site- A photo archive

Required Elements:
Two pages of “Favorites” archive that relate to art and design.
Upload set of your own photos, drawings, or design related images that you made.

B. Facebook or MySpace
C. Create a Blog – Create an identity [Fictional]

Required Elements:
Post an YouTube video, a sound file, photos, drawing, links to articles, archive of daily journal entrees, post news article, links to other sites you like that are related to design.

Link all three sites together.

Projects objective and skills:
- Getting comfortable with the web and using tools that are already available to the public.
- Scanning and Import analog and digital elements.
- Learning how to communicate and dialog on the web.


2. Making a first site
Poetry webpage

Description
Design one line of a poem in Photoshop. Create each of the word elements of the one line poem so that each word is a link. Every word will be a link to another poem site made by a classmate. Using Photoshop, cut-up the page so that each word is a graphic element. Compress the graphic elements. Make one of your links an animated GIF in Photoshop. Import elements into Dreamweaver.

Skill sets covered for project:
- Designing in Photoshop- thinking about how to design and produce the design with the grid in mind.
- Production skills include cutting up graphics, compressing graphics and file formats, color theory.
- Making an animated GIF
- Learning Dreamweaver’s environments and making a one-page HTML page using tables.


3. Final Project
Portfolio website/ Gallery/ Self Promotional Environment
This site is your first personal portfolio site with a small navigation system with a minimum of four navigational sections. For example: Homepage, Design samples [organized in some fashion], Resume, Links

Required elements:
- Web site map
- Two web site homepage design proposals which explores site navigation system and an design aesthedic
- Site Template page
- Site protype/mockup in HTML using Dreamweaver
- Make links to your Facebook, Blog, and Flicker site
- FTP site to a server to have a live site- ODIN account.

Skill sets covered for project: Process
- Making a site map in Illustrator
- Researching different navigation systems
- Researching and exploring site designs for inspiration
- How to organize a project and documents
- Formatting text and using CSS