Schedule

This schedule is web-based at facstaff.uww.edu/bertozze/270 and is subject to constant change. Regular small assignments may be added to this schedule by the instructor. These changes will always be announced in class before the assignments are due. However, students are responsible for checking this web page for information about assignments. All webbed assignments are due by 6pm Sunday night. Late assignments will not be accepted for credit. in the case of an emergency, arrangements must be made with the instructor and paper documentation must be provided.

Jump to week

1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16

week 1: january 19/21	Introduction to the class. Why are we here? Do we want to make things like this? shakeitbabe 2 Discussion of how to obtain a student web account so that you can turn your work in. And how to ftp or webdav your work to the server. Reading The difference between html and xhtml Castro chapters 1-4 By the end of the first week, you should have a 270 subdirectory in your www directory. You should have a page in the 270 directory entitled index.html which has your name on it. This page is where you will put links to all of the assignments that you turn in for the class. (Feel free to take the code for this page from one of the former classmates.) Due in class today: the first page of your design notebook should have the following text : "I have read the syllabus for Multimedia Production I, I have taken the quiz and I understand Prof. Bertozzi's expectations for the course." followed by your signature.
week 2 january 26	Today we will work on your resumes and talk about how to make good storyboards. links and lists: targeting named links: using the <a> tag what is the difference between a relative path and a full path?
week 2 january 28	quiz 1 Read: Castro chapters 5-7 graphics: basic photoshop; background images Nice resource to help you decide on site color scheme. Work on html and photoshop skills; practice linking here is my resume page with picture. Due by 6pm Sunday: Imagine that you have gotten your dream job. Make a simple resume that shows how you got there. Example. This should be posted to your 270 folder and linked to the index.html page. Check that the link works! Resume minimum contents: education, work experience, skills, goals. no contact information other than email address!! If you know some CSS, you can use styles to modify content. Then we'll add a small photoshop painting of you (in your dream job) and a background image. graphics part ii: optimization examples gif and jpg lovely use of animated gifs for storytelling. Simple animations are best made using small gif images. This week's assignment is an animated gif. Here are two examples done by former students: homepage animation by benjamin childers pac-man's realization by cortney williams Presentation: Bertozzi demo
week 3 february 2 top	read and do: Read the first two explanation pages and do the first tutorial. Work on image optimization and animated gifs. Discuss aesthetic and usability issues re. animation in gifs vs. animation in Flash. Begin stylesheet formatting: div and span tags. Today we will do our first formal usability test. Here are the questions. Presentation:
week 3 february 4	read: Krug introduction, chapters 1 and 2; Castro chapter 2 Due 6pm Sunday: gif animation linked to your 270 page; my example. photoshop and imagemaps: quiz 2 Take a look at Shelley Jackson's body. how can we use image maps as interesting forms of interactive navigation? Discuss differences between image maps and image slicing. graphic design: Typetester site use this to compare/contrast text styles Thinking with Type by Ellen Lupton site structure: What is information architecture? Cross-browser testing - a cross we have to bear Here is a very simple image map. This one is a more complicated image map. Presentation:
week 4 february 9	read: Storyboarding Explained Storyboarding is an extremely important part of interactive media design. The process allows you to clarify your own ideas, demonstrate concepts to your client and other members of the design team, and document the process. Here are the storyboards for this site. You know that your storyboards are complete if you could hand them to another web designer and that person could create the site exactly the way you want it to be. quiz 3 Presentation: Tyler T
week 4 february 11	read: Castro chapter 14 Due Sunday: select an image of something and make it into an image map. The links from the image map should work and go to actual pages or parts of pages. If you link to a separate pages, make sure you have links back. Tables and CSS layout table attributes: You can make things more complicated by nesting tables in tables. For an example of creative use of tables, see what scott mccloud has done with online comics. Discuss midterms and what is expected. You should be working on your storyboards which are due in two weeks. Midterms this semester will be on the topic of the effects of Facebook on human to human interaction. Your site should communicate a message to a specific audience. You will test the efficacy of your message in the usability test. Presentation: Keith N.
week 5 february 16	Work on formatting with tables. Contrast to formatting with CSS. Brainstorm for midterms. First in-class usability test today. Here are some sample general questions. Here is an example of a usability test with very specific questions. You should use something like this to test your sites. Presentation: Nick K.
week 5 february 18	read: castro chapters 14;16 quiz 4 usability testing: steve krug's usability evaluation tables part ii: safe layouts and intro to stylesheets cascading style sheets (css part i) css example for lecture another example. browser window dimensions Due by Sunday 6pm: Create a large graphic that could be used as the homepage for a website.Slice it and make specific areas of it hot so that they link to other pages. Here is an example. Presentation: Kyle A.
week 6 february 23 top	Tables and more complex stylesheets -work, work, work on midterm storyboards. Here are a couple of sample site structures: This one clings to the left margin of the browser, uses a table to hold the navigation, and uses css to position the content and colored bars This one has a floating center block that has navigation in a table on the top and two columns inside the center. This one has a fixed header and footer and navigation is held in a list that extends horizontally rather than vertically. This structure works for short pages. This one is a little more whimsical and uses a shape to tell a story. Discussion: storytelling How is web design related to storytelling and games? Write about this in your design notebook. quiz 5- tables Presentation: Alison M.
week 6 february 25	read: Castro chapter 15 midterm proposal with storyboards:due today must include all of the following elements: --one paragraph summary of the message, client and audience for the site (this is very important as you will be graded on how successfully you communicated your message to your audience) --your plan: how will you communicate the message? --information architecture: how will the web site be structured? one page of your storyboards should be a map of the whole site. --storyboards: each web site page sketched out on paper to show layout and design --css - you must have an external css page which controls all pages of the site, turn in your initial structure --usability study- how will you test the effectiveness of your work? Due 6pm Sunday: example. Here is a more complex example with external stylesheet. See the example. Page layout: frames sample frameset Dr. Lawler's web site frames of another flavor: inline frames iframes article @ webmonkey Here is an example of an iframe. design metaphors Why some metaphors work and others don't. Here are some examples. Presentations: Josh T.
week 7 march 2	Due Sunday: Frameset that tells a story... or that creates a structure you can use for the midterm Why do so few sites use standard frames anymore? Some do: stumbleupon for example. Work on midterm projects which are due next week (second class meeting of the week). Presentation: Jennifer H.
week 7 march 4	forms learn the difference between sending a form with cgi and sending it with e-mail. here's a form that uses cgi and uses javascript to validate the contents. source perl script found here. quiz 6- Krug usability and simple frames here's a serious form that uses e-mail and here is a lighter one. embedded media We used to embed quicktime and audio files in web pages in a variety of ways, but now it is almost always done with Flash. This is covered in great detail in the flash class. This is how to embed a swf file in a webpage. Due today: design notebooks for midterm check. Your notebooks should contain your complete storyboards for the midterm. These are worth 25% of your midterm grade. here is an interesting example of stylesheets. Presentation: Laurence L.
week 8 march 9 top	Develop a proposal for your final project which we will discuss in class. You must have a client for your final. I have a number of people who are interested in having sites made for them. Contact me if you need help finding a client. However it is your responsibility to make sure that you have a client so you may need to take some initiative to find one. Presentation: Alex S. and Danielle
week 8 march 11	due before class : midterms In class: midterm evaluations and critiques here is a link to the midterm evaluations you will use to review your fellow student's work. due next week: usability evaluation of your own site and written critiques of the 4 classmates after you on the class list. Here is the usabiility test I used to test the PowderMeister site. You should develop a similar (though simpler) test for your audience. Have 5-8 people take your usability test. Review your results and then summarize your findings. Your summary should include the following as well as any results specific to your topic: What worked best, What didn't work well, Was your message received in the manner in which you intended? Did users have problems with navigation? Didi they like the design? You should also discuss what you could do to improve your work. You will not, however, be expected to make the changes you recommend.
week 9 march 16	Study day due to Communciation advising day. Start thinking about final projects. Proposals are due the second class meeting in week 10. Proposals should include: ::typed:: 1-2 page written description that includes site info, intended audience, intention or purpose of the site, design and usability considerations, and key features. ::pencil on paper:: information architecture diagram storyboard sketches that clearly show the layout(s) you plan to use. You can do this in Photoshop if you prefer. The proposal should clearly demonstrate your plans for the site and how it will address the needs of your client. It should be signed by your client. It would be very wise for you to have a legal contract with your client. Presentation: Tyler W.
week 9 march 18	due before class : midterm evaluations posted to your website and a hard copy turned in in class. Turn in: the questions that you used, summary of results and what you learned from the test, how you could improve the site. read: Krug: chapter 3-5; Castro chapters 8-10 casscading style sheets resources webmonkey css tutorial cascading style sheets, level 2 guide to cascading style sheets to check your style sheet for problems. Presentation: Brad B.
week 10 march 30 top	Due Sunday by 6pm: Form laid out in a table - Feel free to develop a form that you can use in your final project. Here is an example. Work on more complex uses of CSS. Your final project MUST use CSS. quiz 7 Krug Chapter 5 and forms Presentation: Troy B.
week 10 april 1 lecture	Final proposals due: you present them to the class and discuss what you will do. read: Krug chapter 6; Castro chapters 8-11 css part ii use css for design elements A List Apart net effects atlas magazine How to negotiate with your client: building the contract. Presentation: Ryan A.
week 11 april 6	Work on CSS, final projects css formatting quiz 8 - more complex CSS beginning javascript samples Alert Get the current date Basic rollover Due by 6pm Sunday: basic javascript feature: Create 2-4 button rollovers or ask me about doing something else. You can either add this to your index page or make a new page and link it. Don't make them hard for me to find! Presentation: Tim R.
week 11 april 8	Krug chapter 7; Castro chapters 18-19 Use this page to study for the Javascript quiz. more javascript samples rollovers two ways personalize your page for a visitor pop up windows multiple rollovers Rollovers using a function Presentations: Derek P.
week 12 april 13 top	Due by 6pm Sunday: Create a site structure with linked (external) style sheets that you could use for your final. Here is an example, another and a 2 column drop down menu sample. Messing around with basic javascript--what might you need for your final project? Here is a menu with a subtext field that fills on rollover Here is a similar idea but has a table and captions to show items. quiz 9 -basic Javascript Presentation: Jeremy T.
week 12 april 15	Here is another possible structure for the final: Floating center with nav on the right is here. Presentations: Tyler L.
week 13 april 20	Due in class on Tuesday: Complete paper prototype for final project. This should be a paper version of your final that you can conduct a usability test with. We will do a sample test in class. You should also have a digital template ready: at least one html page and external CSS file that demonstrates how your interface works and what it will look like. Krug chapter 8; Castro chapters 18-19 javascript part ii: more rollovers this time slicing up large graphics this is a little more complicated and demonstrates how to change multiple frames with javascript. It is good practice for coding something like hangman geoff mcgregor's explanation of how math.round() and math.floor() work. random banner graphic Here is a way to change the content of a text field in a form. And this is a very useful method of loading text and images dynamically. This one is more elegant. Need a dropdown menu? Presentation: Katherine L.
week 13 april 22	javascript continued Here are two more examples to get you comfortable manipulating variables and functions: simple quiz simple pop up window example Set form text value with image map
week 14 april 27	Due Sunday at 6pm: Complex javascript. You can do rollovers that fill a text field, a quiz, popup windows, or some other use of complex javascript Krug chapter 9; Castro chapters 25-26 where do i register a new domain name? the accredited registrar directory this is a comprehensive listing of registrars compiled by internic. internic faq page (answers many questions about domain registration). choosing a domain name the basic cost for domain registration varies depending upon who you choose to work with, and any current offers or specials they offer. you will need to have an internet service provider (isp) in order to register your domain name. Some providers: network solutions godaddy phpwebhosting Review ways to make sure your work comes up in searches. See, Best Vernazza Apartment Vacation Rental as an example. meta tags <html> <head> <title>mime 2000</title> <meta name="description" content= "the mime program at indiana university is a content driven program designed to bring together talented individuals who are interested in all aspects of newmedia design and who understand that newmedia will not be designed by individuals but by groups of people talented in all sorts of areas such as fine arts, music, theater, computer science, communications, psychology, folklore, storytelling, marketing and computer science." > <meta name="keywords" content= "multimedia, education, training, multimedia, art, new media, masters degree, interactive storytelling. digital storytelling, interaction design, game design, virtual reality, information science, information architecture, computer science, communications, telecommunications" > </head> search engines and your url Take a look at the code of a page that ranks very high on a google search for the artist's name. how can i automatically submit the url of my web page to web search sites? iu knowledge base add your url to google suggest your url at yahoo! Presentations: Chris N.
week 14 april 29 top	quiz 10 Work on final projects. Save in a subdirectory called final with its own image folder. Presentations:
week 15 may 4	dynamic database-driven applications asp & asp.net coldfusion php mysql jsp (jakarta tomcat server) web-based multimedia macromedia contribute macromedia flash mx flash remoting ici design macromedia shockwave (director mx) Presentation:
week 15 may 6 top	due in class today: answers to the following questions in your design notebook how have you progressed as a designer since the beginning of the semester? do you feel that you acquired enough technical skills over the course of the semester? do you feel that you acquired enough usability skills over the course of the semester? which assignments were the most and the least helpful? any other comments that you have on the class would be appreciated. how successful was your final project? what areas of your final project need improvement? where does the final project need to go next? turn your notebooks in with all of the paperwork for your final project on TODAY so I have time to grade them. reminders for your final project: XHTML and CSS must validate! All pages must have appropriate meta tags Credit all sources for images/text/3rd party code you are using (if allowed) Credit yourself for building the site on all pages with link to bio/contact Make sure you cross browser/cross platform test before presentation day Have your client email me to help me grade your work - your relationship with your client is part of the final.
week 16 Final Presentations	You will be presenting final projects during our scheduled final exam time: 10am Tuesday May 11th. You must present your final project to get credit for it. Turn in all final materials: Usability studies, Peer evaluations, etc. to me at the conclusion of the final exam.

Multimedia Production I (Speech/Journ 270)

Elena Bertozzi 472-1725 or bertozze@uww.edu

Schedule

Introduction to the class.