DVC Web Design- MULTM171 (Tuesday)

Final Projects

2006-12-10T12:15:00.000-08:00

Final projects must have all pages and subpages working for the multimedia.dvc.edu web page. The galller y does not have to work, but should be presented in such a way that you can describe to me how it should work.

for 11/14 .. javascript

2006-11-07T16:39:00.000-08:00

Using the following page as a starting point :

http://multimedia.dvc.edu/web/monday/form.htm

develop a (minimum) 5 question quiz that will tell the user what questions they got wrong and right when they press the submission button.

You are free to experiment with other implementations of javascript to provide interactivity with forms...or to adapth the code in the above link to give more detailed results.

At the very least come to class with the quiz questions formated inside of a form tag so we can work on the javascript in class.

for Election Day

2006-11-05T22:05:00.000-08:00

Create a folder on your web site called "backgrounds". In it you should have an index.htm file that links to 5 different experiments with creating page backgrounds.

Possibilities include:

repeat
x-repeat
y-repeat

a style class like the one below:

.seriousbusinessman {
margin: 0;
padding: 0;
position: fixed;
float: left;
top: 0;
left: 0;
width: 1000px;
height: 800px;
background-image: url(??????????);
border: 0px solid #ff0000;
}

where the ????? is replaced by the path to an image file.

You can also use a style with the "background-position"
property to position a background along the bottom:

i.e.

body {
background-image: url(images/bg.jpg);

background-repeat: repeat-x;

background-position: bottom;
}

Each experiment should use a different image that is
appropriate to the method used.

Repeat: A folder in your root directory named "backgrounds"...
containing an images directory and an index file that links to 5
other html documents that experiment with 5 different backgrounds.

Next week's class 10/17

2006-10-10T17:50:00.000-07:00

Create a single design of your homepage that uses the "disjointed rollover".

Get the tic-tac-toe page to work.

For next week (10/10)

2006-10-03T13:04:00.000-07:00

Develop 5 distinctly different designs for a single web site home page.

The Home page should include links to at least 4 other pages and should function as a "self-portrait". Use examples shown in class as a guide.

Also there will be a quiz on all material covered in the text through Chapter 11.

For 10/3

2006-10-03T13:03:00.000-07:00

Todays assignment was a re-design of your front page using fireworks and rollovers.

Next class 9/14

2006-09-26T13:49:00.000-07:00

Have a website created and uploaded to multimedia.dvc.edu that includes links to all the assignments you have done so far.

Page should link to the 1st page of your 10 flickr images, the table formatted with 10 images linked to each page, an html version of your 1 page report on web technology, the css formatting of a newspaper page, and a link to your blog.

Also read through Chapter 7 of the book.

For next week

2006-09-12T17:15:00.000-07:00

Complete the exercises in Chapter 6 and bring to class a section from a newspaper. Any section from any newspaper will do....

Late update

2006-09-11T14:28:00.000-07:00

Sorry for the late post, but, if you weren't aware already, you should know that there will be a quiz on Chapters 1 - 5 of the text on our September 12th class meeting. You also should have your ten images formated using a table as a navigation element.

i.e. 10 images scaled down to fit on one page. Each image should link to it's corresponding page. Bring this to class as a Dreamweaver site.

You also should have posted your research reports to your blog.

Second week assignment

2006-08-29T13:42:00.000-07:00

Develop a one page report on a web based technology.

Web based technology is any technology that interfaces with the internet.... podcasting, Voice over IP, web enabled phones, Instant Messaging, Blogging.....for example.... Explain to me..if you like..."What is Web 2.0?".... try to find a unique aspect of the technology you are reporting on so if there is any overlap your presentation will still be of interest.

In your report, be sure to include a description of how the technology works, who it works for, how many people are actually using it, how many people are expected to use it.... make sure to show some examples of how it works, and provide some historical information about how it came to exist.

For example "Podcasting developed for radio in the wake of Tivo's alteration of the landscape of television, as a way for people to hear radio shows they missed after the fact."

Prepare to present your report as an oral presentation to the class, and expect to have to answer questions.

Feel free to email me if you need help or visit me during office hours this week or next.

First assignments

2006-08-22T17:07:00.000-07:00

The first assignment is to create a 10 image html page with a written commentary that engages with the composition of the images and shows how they are related. See the Photo Story link on the side bar for an example of what I have in mind.

Here are some helpful links....

HTML cheatsheet:

http://www.webmonkey.com/webmonkey/reference/html_cheatsheet/

Color Codes

http://www.webmonkey.com/webmonkey/reference/color_codes/

First Day of Class

2006-08-21T13:33:00.000-07:00

Here is the syllabus for the first day of class....

Web Design
MULTM 171

Course Syllabus

Fall Semester 2006

Instructor: R. Lee Montgomery xt. 2593
E-mail: lee@multimedia.dvc.edu
Class Schedule: Lecture - Tuesday 2:00-4:50pm

The instructor will be available to assist Web Design students in the lab (Atc110), from `12:00-2:00pm on class days. For additional assistance or consultation please arrange to meet with the instructor during office hours.

OFFICE HOURS: In the lab (ATC-110 or A-303) or in FO235 at the following times:

M, 2-4pm / T 11-12/ W 1-2pm /Th 10am – noon
Appointments are preferred though not required.

DESCRIPTION:

Students will get an introduction to the concepts and techniques necessary to design effective and interesting web sites using HTML and XHTML and some basic javascript. In order to fully understand the issues that inform a strong web design, in addition to application based editors, students will be required to learn how to create sites using only a text editor and HTML coding. Simultaneously students will learn how to use WYSIWYG HTML editors through Macromedia’s Dreamweaver 8. At the conclusion of the class, students will also be expected to have an understanding of basic Unix and network operations related to the use of telnet and ftp. In order to develop strong web specific design skills, class time will be devoted to the discussion of conceptual issues relating to information architecture, hypertext navigation, and interface design.

REQUIRED TEXT:

Short, Daniel and Garo Greene [2006]. Macromedia Dreamweaver 8 Hands on Training. Peachpit Press.

REQUIRED SUPPLIES:

Students must have some form of storage to backup their files. Either a USB key drive, CD-r or CD-rw… DVDs… a portable hard drive/music player. Any storage medium that will allow you to have a duplicate of the files you store on the Multimedia servers.

EVALUATION:

50% of student grades will be determined by averaging grades on three evaluative class assignments and one final exam.

30% of student grades will be based on the completion of weekly exercises and occasional quizes based on the reading. These exercises will not be graded for skill or content, but will be checked only for completion. Grades will correspond to the percentage of weekly exercises completed as follows.

95 – 100% completed A
90 – 94% completed B
85 – 89% completed C
80 – 84% completed D

20% of student grades will be based on class participation. Students must attend class in order to effectively participate.

ATTENDANCE POLICY

Students are expected to attend all of every class meeting unless they have received prior permission from the instructor. Attendance will be taken at the beginning of each class meeting. Anyone absent when attendance is taken will be assumed absent from the class. If you are late to class it is your responsibility to make sure your attendance is acknowledged by talking to the instructor.

If a student misses two weeks of class without being excused, it can be assumed that the student is intending to drop the class. Because this class meets only once a week that means two absences will be grounds for the instructor to drop you from the class.

If you are intending to drop the class, it is your responsibility to drop the class. You should not assume that the instructor will automatically drop you because of absences. If you stop attending classes, you do not drop the class, and the instructor has not dropped you from the class; the instructor may be required to give you a grade of F for the class.

Course Schedule
(subject to change)

Fall Semester 2006

Week 1 (8/22)

Lecture: Syllabus Review... What is HTML and what is XHTML and how do they work?… File extensions (.html, .jpg, .gif) …local and remote…. View Source …. downloading other peoples pages/images….

Exercise: e-mail to instructor…. Begin a blog on blogger.

Week 2 (8/29)

Lecture: Basic design principles… Keeping track of files.... Unix directory structures and internet paths …. … page properties … linking.. Intro to Dreamweaver

Exercise: Research a web based technology for an oral presentation to the class. Oral presentations must be accompanied by a single page of written text.

Week 3 (9/5)

Lecture: Discussion of composition and interface design.

Exercise: Download 10 images from Flickr that you appreciate the composition of and be prepared to explain WHY you chose these images (in class presentation).

Week 4 (9/12)

Lecture: Class presentations.. review of basics of Dreamweaver.. prep for discussion of Cascading Style Sheets

Exercise: (Must have text by this time) Read through Chapter 5 (quiz)

Week 5 (9/19)

Lecture: Intro to Cascading Style Sheets … Begin discussion of Javascript and rollovers

Exercise: create a rollover menu for your picture gallery.

Week 6 (9/26)

Lecture: Quiz on Chapter 6 (CSS)… review of CSS… Typography

Exercise: Create a single page that appears unique with three different styles sheets. read through Chapter 10

Week 7 (10/3)

Lecture: Tiled graphics.. Tables, and Layers… the mighty div tag

Exercise: Develop a web design in an image editing program (either Photoshop, Fireworks or Adobe Illustrator) for a cartoon character or celebrity of your choice.

Week 8 (10/10)

Lecture: Review…plus additional Rollovers and XHTML… Code View tricks… the culture of the web

Exercise: Prepare a one page report about what kinds of web sites you visit and why. Be prepared to discuss how the content and design of the sites are related.

Some sites to discuss

2006-08-18T15:32:00.000-07:00

Personal Blogs:
Jerky Guy

Sad Girl

Happy Girl

Kurtis

Two political blogs:

http://atrios.blogspot.com/

http://www.talkingpointsmemo.com/

Two commercial designs:

http://www.netflix.com/Default

http://www.greencine.com/main

Miscelaneous creative approaches:

http://www.humanempire.com/

http://bull.miletic.info/

http://www.moma.org/

Photo story

2006-08-17T12:36:00.000-07:00

I like the abstraction of reality and facts. I particularly like abstraction when it obscures the original meaning of an image and allows for new truths to be revealed that may or may not have anything to do with the original. When documents serve the construction of new realities known as fiction we realize the true potential depth of our everyday experiences.

In a recent conversation with a group of friends visiting Hamburg from London via Sweden we discussed the history of revolutionary struggle in Germany through the Manifestos of Ulrike Meinhoff of the Red Army Faction of the 70's. After establishing the futility of armed revolt against economic and social policies we found reprehensible, I came to the conclusion that commercially distributed distopian science fiction was perhaps the only way to change the hearts and minds of a populace (myself included) utterly engaged in the entertainment complex of it's own oppressive regimes.

I believe in the power of distorting people's perspectives. I believe in the importance of re-evaluating the everyday every day as a way to understand anew how we relate to the things that surround us. Science fiction can be a lens through which we see the present either as a warning or a utopian hope. Science fiction is to narrative reality what Mylar can be to the photographic image.

Certain colors always asscoiate themselves with this notion of distopian science fiction for me. Perhaps the colors of Blade Runner are partially to blame... or cartoon notions of radioactivity..the nuclear green.... the red of the LED.... this image has the grain of artifice embedded in it. A sign of the technology that gave birth to it. The yellow suggests decay..the decay of a rotting piece of fruit left in the sun..... but the darkness proves that healthful yellow false... it is not sunshine.. .. all of this light is man made... there are robots in that darkness.

Blurring implies speed..and candy colors make for sickly sweet indulgence....... in the absence of clear form any imagined possibility is valid. Where will these images take you?

The turret of a metallic robotic castle. Cold hard metal and petrolium, the material of the future displacing man's appropriation of wood and animal power. rather than exploiting our surroundings we exploit AND destroy them.
Until eventually... slowly...in highly protracted fashion we destroy ourselves as the human footprint fades in a slow chemical burn...like the emulsion of a photograph slowly being gnawed away to reveal white paper....

Humanity leaves it's mark on the planet like a reflection in an oily Exxon pubble on the coast of Alaska.
The few survivors hide away in the remaining fascist metal structures reminded that this powerful order at one time meant that outside efficiency was at it's peak. "Mussolini made the train's run on time." Now this intimidating buildings protect us from the world we have destroyed. The world that now wants it's revenge.
Now... we are plastic people.