Project and LRO Assignments
- Project 1: Critical Analysis and Re-design of a Web Site
- project 1 overview
- site inventory and analysis
- site prototype
- final re-design
- Project 2: Designing with CSS
- project 2 overview
- designing your new professional site
- designing your portfolio
- creating your CSS journal
- Project 3: Designing with the CSS Zen Garden
- project 3 overview
- Learning Record Online
- Midterm Description
Daily Assignments
For Monday, 8 May and Wednesday, 10 May
Zen Garden Final drafts are due by noon on Monday, 8 May. Please see comments on your rough draft and notes for your final designs. Comments will be online by 5:00pm on Friday; I will email the class when they are online.
Final LROs are due by noon on Wednesday, 10 May. The final LRO is just like the midterm LR except that you will be taking into considerion the entire semester's worth of work when completing Part B2 and Part C2. Please note that you will be completing Part B2 and Part C2; do not write over what you wrote in Part B1 and Part C1. Please place a copies of B2 and C2 in their respective folders, and then add the text, along with your new work samples and observations to your midterm learning record document. Please save that Learning Record document: "lastname-final-lro.rtf" and place it in the "FinalDocument" folder.
When adding a Work Sample be sure to fill in each part of the form: Date, Title, Assignment (if not assignment, select "Unassigned Work"), Format (rtf document, email, forum posting, etc.), location (teacher folder, posted online, etc). In the "FinalDocument" folder, please also create a new folder, and call it "Samples-of-Work." Place inside that folder the actual work samples -- do not repaste the text that is included with the LR document.
There is only one new requirement for the final LRO: in addittion to the many observations your choose to include, please include all observations that discuss collaboration in some way. Including the collaboration-related observations in addition to your other observations will not affect your grade in any way.
For Thursday, 4 May
Some time in the next week, please bring to class a blank CD so you can burn all your teacher folder personal and project-related files. Some time during the summer, contents of the teacher folder will be archived, and you will no longer have access to them. By burning them on to a CD, you will have them for as long as you'd like. And if you have created your files using relative links, you will be able to simply upload them onto any server and the links will still work.
For you Zen Garden rough draft, please have a working version of the page so we can present them in class. By "working version," I mean that it should enclude at least the following:
- all divisions should be in their place
- 75% of all images you wish to use should be in place
- if you are having trouble with position something, come with questions and know exactly where you want it
- design the page according to Zen Garden file structure -- no styles or images folder; all files are in the same folder
In short, your page should look and feel like an entry an entry that needs some (not massive) revision. I will be providing written comments on your rough drafts.
For Thursday, 27 April
There are two parts to this assignment:
- In class on Tuesday, two packets were handed out (and this assignment was started): one containing the sample css zen garden html code, the other containing the style sheets for two CSS Zen Garden Designs: Tranquille and South of the Border (see what South of the Border looks like). If you were not in class -- or do not have the documents -- please print them out on your own.
For Thursday, I would like you to complete the following (hopefully with your partner[s]):
- read through the HTML code carefully, comparing each element to that in each of the two style sheets
- read through each of the two style sheets (read "tranquille" first, as that is the original sample), circling all the CSS tags that are unfamiliar to you
- choose three of those tags and look online to find out their function (I suggest starting with W3C Schools and the CSS Zen Garden Resources Guide)
- sketch out the design of Tranquille as it appears on the web, labelling each major element with its CSS equivalent (for example, the bottom right image is part of:
body {You do not have to write out all the code; just label the section "body" so you understand how it relates to the CSS. If you have time to get to "South of the Border" as well, please do so.
font: 8pt/16pt georgia;
color: #555753;
background: #fff url(blossoms.jpg) no-repeat bottom right;
margin: 0px;
}
-
Bobby van der Sluis:
One hard lesson I have learned is that you should never ever start any design without a good and clear concept.Please read carefully the following short blog-entry discussions of these designers' design experiences with CSS Zen Garden, paying particular attention to each designer's process:
- douglas bowman — design
- douglas bowman — coding
- mike pick — design
- andy budd — design
- bobby van der sluis — design & coding
When complete, please make a list of the 5 or so Zen Garden designs you especially like and the 5 you don't care for. From that list of 10, make a list of 3-5 features that you'd like to try to incorporate into your design and 3-5 that you're certain you don't want to. Remember that the features found in the special effects section are to be avoided.
If you have yet to decide on a sktech you are happy with, come up with two pencil sketches of your design per group member. For example, if you have two people in your group, you should have 4 pencil sketches. Complete these sketches individually and bring them to class with you, along with your lists of likes and dislikes. In class you'll meet with your group to come up with a pencil sketch that unites your ideas.
Please also bring to class (either online or print) images that are thinking about using in your site. All images will need to be scanned into the computer by Tuesday, May 2 (as will your final pencil sketch), so if you have time this weekend, get a head start and scan in any image that is not already online. I recommend scanning at 300dpi (and if the image is a photo, saving it as *.jpg, and if its something other than a photo, saving it as *.gif); you can always lower the resolution later.
For Tuesday, 25 April
This assignment will get us started on the Zen Garden project. Please complete the following by classtime on Thursday:
- read the information on the CSS Zen Garden home page
- read the CSS Zen Garden FAQ
- browse through the past designs so you get an idea of what themes have been covered (please do look at the special effects section, but please note that the effects displayed in this section are off-limits for our designs; in the past students have attempted to replicate them and have struggled and spent many long hours only to end up frustrated)
- come up with a list of five themes you'd be interested in pursuing and bring them to class to discuss with your partner(s)
- from the five themes, sketch out 5 basic layouts - one for each theme
In class, you will meet with your partner(s) to finalize the theme you've chosen, announce it to the class, and create a detailed sketch of the page.
For Friday, 31 March and Tuesday, April 11
Please complete chapters 5, 6, 7, 8 (you do not need to complete chapter 8, but if you choose to it will be counted as extra credit and I will remove one absence) in Adobe Photoshop CS2 Classroom in a Book by 5:00pm on Friday, 31 March.
Please complete chapters 9, 10, 11, 12 (you do not need to complete chapter 12, but if you choose to it will be counted as extra credit and I will remove one absence) in Adobe Photoshop CS2 Classroom in a Book by 10:00pm Tuesday, April 11.
For Thursday, 30 March and Friday, 31 March
For Thursday, 30 March, please read in Meyer chapters 7 - 9, which cover css boxes, padding and borders, and backgrounds. Chapter 7 is a very important chapter so please pay careful attention.
Please complete chapters 5, 6, 7, 8 (you do not need to do complete chapter 8, though you can if you'd like) in Adobe Photoshop CS2 Classroom in a Book by 5:00pm on Friday, 31 March.
And don't forget to post to the CSS Journal. . . .
For Tuesday, 28 March
Please read in Meyer chapters 3 - 6.
Begin working on chapters 5, 6, 7, 8 in Photoshop cs2: Classroom in a book as they are due on Thursday, 30 March by midnight.
For Thursday, 23 March
Please read in Cascading Style Sheets: The Definitive Guide by Eric Meyer: Preface, Chapters 1 and 2, and What are Web Standards and Why Should I Use Them?
. We will be talking about style sheets and Web Standards in class on Thursday.
For Thursday, 9 March and Friday, 10 March
Please make sure you have completed chapters 1 - 4 in Photoshop CS2 Classroom in a Book by classtime on Thursday, 9 March.
Midterm LROs are due Friday, 10 March, no later than 7:00pm. It is vital that your LRO not be late. Please post all questions to the LRO Discussion Topic, and check others’ questions before posting your own. I will check the forum frequently.
For Thursday, 2 March, Tuesday, 7 March, and Thursday, 9 March
Please read Goto and Colter: Chapter 5 for Thursday, 2 March.
Class will be cancelled on Thursday, 2 March, though I strongly suggest that your group use the course time to meet in Parlin 102 to work on the Prototype, which is due on Tuesday, 7 March.
Please complete chapters 2, 3, and 4 in Photoshop CS Classroom in a Book by 10:00am Thursday, 9 March.
For Tuesday, 28 February
For the assignment, I would like you to find 5 images of varying complexity. If you consider an image containing only the word "home" to be simple, the banner image on this web page moderately complex, and "Landscape with the Fall of Icarus" by Breughal to be complex, you can understand what is meant by "varying complexity." (See W.H. Auden's poem, "Musee des Beaux Arts" in response to painting, if you'd like.) Please use the ideas discussed in Chapter 6 to write ALT text for each image. There should be 1 simple image, 2 moderate images, and 2 complex images. For the two most complex images, please write long descriptions for them, and code them in the manner discussed in the text. Put all of the images in one HTML page, constructed as described in chapter 5, and link it off your home page. We'll discuss them on Monday.
Please also add the following to your personal home page ("index.html" page):
- TITLE tags to all images and links
- ALT text to all images
- a correct DOCTYPE and language
- skip to navigation links (if you think they are necessary)
- ACCESSKEYS for the 3 most popular links
Please have both the ALT text images and the home page work completed by 10:00am Tuesday, 28 February.
Please bring Photoshop CS2: Classroom in a Book with you to class.
Please read and complete chapter 1 Adobe Photoshop CS2 Classroom in a Book by 10:00am, Tuesday, 28 February. If you do not own a copy of Photoshop CS2, dont worry: Chapter 1 does not require CS2 and you can complete the assignment in Parlin 102.
I have placed all of the lessons files in the teacher folder so you do not need to install them on computers in the CWRL. If you are completing the assignment on a computer that is not part of the CWRL, you will need to install the files yourself. Note that you must be using Photoshop CS2; no other version will work. You can see how to install the files yourself on page 3.
The book is going to ask you to save over some of the files. Please do not save over them. Instead, save all files to the Desktop, and then drag them into your own folder in the "photoshop-work" folder in the teacher folder. Please put your work in the correct folder; you will have to create a folder for each lesson.
On page 3 you will also see instructions for installing the Adobe fonts suggested for completion of the assignments. I have placed the required fonts folder ("CIB Font Installer") in the teacher folder. All you need to do is drag and drop the folder in: C:\Program Files\Common Files\Adobe\Fonts. This must be completed before you open Photoshop CS2. If you have already opened it, just close it down and start it up again after you install the fonts.
Please complete chapters 2, 3, and 4 in Photoshop CS Classroom in a Book by 10:00am Tuesday, 7 Thursday, 9 March.
For Thursday, 23 February
We can call this assignment "My Two Days without a Mouse" because I would like you to spend the next two days -- between class Tuesday and class Thursday -- without using your mouse (or laptop touchpad). This means whenever you are browsing the web, building web pages, or anything else on the computer that does not require you to have something completed for school or work (although it would be great to see if you could complete an assignment or task without the mouse, too).
I'd like you to comment on your mouse-less computing experiences on the discussion forum by 10:00 am Thursday 6 February. Your commentary should describe the tasks you were attempting, the problems you faced, and whether or not you were able to complete the task. Discuss how it felt not to have the mouse at your disposal and how that changes your idea of computer use.
Please also read Clark: Chapters 5 - 8. And don't forget about those observations!!
For Tuesday, 21 February
Please read in Clark, Chapters 1-4, Appendix A (read chapter 3 first).
Your group's site inventory and analysis is due by classtime. Please place all documents in your group's folder. And make sure that you have saved all Visio docs in .pdf or .gif formats as well as .vsd.
Please bring a set of headphones with you to class. You will need them to listen to JAWS.
For Thursday, 16 February
If you have no done so already, please read Neilson: Chapters 3 and 9, and post a response to the following topic on the Neilson Readings 2 Forum Topic:
Discuss the content of the Blanton Museum site and how you think it might change as a result of Neilson's discussion of content in relation to usability in chapters 3 and 9. Please post your response by 10:00 am, Thursday, 16 February. Postings should be equal to one half page, single space, in Mocrosoft Word, Times New Roman, font size 12, one inch margins.
Please also read Neilson Chapter 6 in preparation for beginning the section on accessibility, which will start next Tuesday, the 21st.
Please also note that next week we will starting to learn Photoshop, so if you have not yet ordered Adobe Photoshop CS2 Classroom in a Book, and you don't want to pay bookstore prices, you are running out of time. . . .
For Tuesday, 14 February
Thinking in terms of your Neilson readings, please post a response to the following topic on the Neilson Readings 1 Forum Topic:
Using the Neilson's theories on usability, discuss the usability of the Blanton Museum site versus the usability of one other museum web site. Please do not use the same site as the other members of your group, but think critically about certain aspects you may be focusing on, or are most interested in. Your posting is due by 10:00 am, 14 February. You may also use the ideas in the suggested Alertbox reading listed on the inventory analysis page or the online readings section of the course Web site.
Please read Neilson chapters 3 and 6, and, if you have time, the following fascinating articles:
The Best of Eyetrack III: What We Saw When We Looked Through Their Eyes, which reports a study that "observed 46 people for one hour as their eyes followed mock news websites and real multimedia content." Really cool stuff, and can you believe that this is the way the report found people viewed web pages?
Compare that agianst this visual of how people read web pages from a Neilson usability presentation page:
And then read Eye-Tracking studies- Usability holy grail?, which provides a more skeptical review of eye-tracking technology.
Please meet with your group members to work on Project 1, and come up with 5 questions you would ask the webmaster of the Blanton Museum web site. The questions can range from the goals of the site to audience to reasons why certain sections of the site function the way they do. To help coming up with the 5 questions, your group may want to start a list of all the questions that you have about the site itself. Questions no doubt come up when discussing the site (and thinking about the site) and it may help you keep track of all your questions if you write them down. Please post the 5 questions you have settled upon to your group's discussion forum by 10:00am Tuesday, 14 February. In class, we will discuss the questions.
For Thursday, 9 February
Please read Neilson: Ch 2, and Ch 4, pgs 162 - 224; Goto: Chapter 4. While not required, I suggest you read in Goto: Chapter 8 "Testing for Usability," as it mkes a nice companion to Neilson and will help you think about the idea of perhaps doing some user testing if you feel you have the time.
Please also start getting into the nitty gritty of the project, using some of the tools described in Web Re-Design, thinking about the web site in terms of Neilson's ideas on usability.
For Thursday, 2 February and Tuesday, 7 February
For Thursday, 2 February, please complete your personal home page by 10:00pm. See below for specifics. Be sure to save your home page as "index.html" and upload it to your folder using SSH. Do not use a WYSiWYG, like Dreamweaver or Frontpage. You must code the page by hand using HTML-kit, Taco, or another HTML editor.
Please also create a backup using webspace. Note that webspace works best using Internet Explorer on a PC. Using IE will allow you to use the very helpful web folder feature.
For Tuesday, 7 February, please read in Goto Chapter 3 by classtime.
Please complete in your LRO Parts A1 and A2, and your first two Observations by 10:00 am, Tuesday, 7 February.
For Tuesday, 31 January
Please read the Introduction, Chapter 1 and 2, in Web ReDesign 2.0: Workflow that Works, by Kelly Goto and Emily Colter. These chapters will introduce you to the book and the redesign process that will inform the work we will do in Project 1. After reading the chapters, post a response to the forum topic entitled, What is it about the web . . . ? Responses should be equivalent to 1/2 page of single space text, and should be posted by 10:00pm, Monday, 30 January.
Please download from bevoware SSH for PC or MacSSH for Mac to your personal computer. Please also download HTML-kit for PC or Taco for Mac (links on the right). Using SSH or MacSSH connect to the server using the connection information given in class. Begin working on your personal page, which is due Thursday, February 2. Your home page can be modelled on the sample home page we discussed in class, and must contain at the very least the following features:
- an image
- a brief statement about yourself
- copyright information
- the following links:
- course page
- link to your webspace page, if you have one
- at least 3 pages that you visit often
All images that you use on your web page, if they are not your own, can only be used with permission of the artist or photographer, unless otherwise noted. You can download free images from stock.xcnhg and FreeFoto without getting permission from the photographer. istockphoto has images for $1.50 or less.
Several of you have yet to sign up for the course email list or complete the first assignment: 5 questions about the Learning Record posted to the Learning Record Discussion forum. See below assignments for details. Even if you registered late and/or were not able to find the classroom on the first few days, you are still required to complete the work.
For Thurday, 26 January
Read through the Learning Record information web site, especially the pages for students, and the Guided Tour for Students. Then come up with 5 written questions you have about the Learning Record process. Post your questions to the course Learning Record Discussion Topic by 10:00 pm, Wednesday, 25 January (there is a forum on the Learning Record site; please do not use that one). We will be using your questions to frame our discussion of the LRO on Thursday.
For Tuesday, 24 January
To be completed in class on 19 January:
Please make sure you have all the required materials listed on the syllabus. Read computer classroom etiquette (pop-up will open).
If you do not already have a UT email account, you are required to have one for this course. You are required to have a UT email account because yahoo, hotmail, and other web-based emails do not have the ability to handle the size of the attachment files we will be using in the course. They also regularly filter out as spam important emails from tools we will be using; if you do not have a UT email account, you will not get the necessary information. You can register for UT email at http://mail.utexas.edu, by following the instructions. (Note: When selecting a username, choose one that will professionally represent you. Employers who are receiving your resume via email who take more seriously one like, 'jsmith@mail.utexas.edu' than 'designman@mail.utexas.edu.')
Join the Class Listserve. To join, send an email with no subject to majordomo@lists.cwrl.utexas.edu. In the text of the email, please copy the following: subscribe STS311-wolff@lists.cwrl.utexas.edu. You will then get a confirmation email from the system. Follow the instructions in the email you receive. After that, you will be on the list. Note: You must use a UT email address, or you will not get the email back from the system.
Register for the Class Forums. To create an account, click on "Log In" at the top right of the screen. Then choose the Register tab and fill in your user name and e-mail address. Your username must be in the following format: "firstname_lastname" (for example, bill_wolff). Your email address must be your UT email address. Accounts that do not follow this configuration will be deleted. Within a few minutes, your e-mail address will receive a message with your password and instructions, so make sure it is accurate. If you do not see receive an e-mail with the subject "Account details for ______," please email Bill. Follow the instructions in the email to log in and change your password.
I know this a lot of registrations, but they have to be done, and done early. Their functions in the class will become clearer as you use them.
To be completed in class or at home:
Please read "Getting Started with HTML" and "More Advanced Features" by Dave Raggett, and "Intro to HTML" by WebMonkey. These are short essays that will introduce you to HTML and what HTML looks like. We'll get started coding HTML in class on Thursday.