Week Nine
Work Due
Ideas
Ideas for your second text page and at least one of the supplementary pages.
Discussion
Relating to the Midterm
A few things relating to the recently occurring midterm will be discussed, including:
- Using relative links for sitenav and images (or risk not passing the final)
- Using site names and not URLs as linking terms
- Changing your mid folder contents after submitting (don't!)
- Keeping essential content within the Safe Area for 1024 x 768 px resolution
- Making sure the book review and other writing is long enough (minimal length): in which the "inc" grade and its terrible consequences are explained
- Ordering your sitenav links
- Making book titles look like book titles
- Using small images for thumbnails – or having an unhappy future
Resources & Novelties
For adding secure email links to your website, consider using The Hivelogic Enkoder.
Simple but effective design: Kristine Janssen's Portfolio.
A web project from the early modern internet: The Great Chicago Fire & the Web of Memory.
For ideas: Best of CSS Design 2008 (Web Designers Wall). And related to this: Large Background Websites (something I mentioned earlier in the semester).
Tom Phillips, 20 Sites n Years
Vintage Home Page designs (or, Raiding the Public Domain for Inspiration): Web 2.0 style is all about making our web pages look very "now" (or ten minutes ago, things moving cable-quickly as they do). But think about the possibility of moving, designing, in the opposite direction, 1907 rather than 2007. For instance, take a look at these fantastic Inland Printer covers from way back in the last century. Design is very time-sensitive, thus dates remarkably quickly. This can be a danger, but you should also see it as a resource, something to exploit, esp. if your project has a historical dimension.
Novelty Site Navigation: web.Burza – Superhero Edition.
Visual Page Review
In which we review your Visual Pages. For example: A Visual Guide to Touring and James Whale's Monsters.
I recommend creating a subnav link to the TOP of the visual area of the visual page, i.e. the point at which to best view the gallery (or whatever) at 1024 x 768 px res. Users will find this helpful.
Feedback/User Survey Page
Some functions of the Feeback Page:
- Give you ideas (and content) for the site.
- Help you fix the site.
- Get them to feel involved in the site, to bond with your site.
The Feedback Page has four main aspects: content in the form of well-defined questions; structure in XHTML using the form element and its various sub-elements; presentation through CSS and CRAP; and functionality through scripting.
The first draft of the Feedback Page will need to ask at least eight questions of your user. Basic biographical and demographic questions, such as age, location, and gender, do not count towards these eight questions (but ask them if you want). The questions should be divided into at least three sections (i.e, fieldsets) and use at least three different input types.
The feeback page is basically a page using a form element with multiple fieldsets. I'll introduce forms a little in class; but you'll need to work with Huddleston and the HTML Dog site. See the beginner and advanced form tutorials on the website and chapter 11 in Huddleston.
Use CSS and the CRAP principles to style your form and make it easy to use. Note: For the midterm, you do not need to have a working form (i.e., not has to happen to the information when the user submits it).
MAKE SURE that you are organizing your feedback page with FIELDSETS and LEGENDS. This makes the page easier to read (scan), better looking, and easier to style and re-style as needed.
Here is a feedback page for a Spike Lee site. What works here? And what doesn't?
If you want interesting content from your site user, avoid yes/no type questions. Or questions with one word or phrase answers.
Not: Did you learn something about women in racing that you never knew before? (y/n)
But: What did you learn about women in racing that you never knew before?
Not (simply): What was the first video game you remember playing?
But: What do you remember about the first video game you played?
Use follow-up questions: e.g., "How long did it take you to master the game?"
You can also include feedback questions on specific pages. For example, on the review page:
"Disagree with any of my book reviews? Left me know!"
Activities
Feedback Page
Using (and revising) your Feedback Questions, and with reference to the foregoing class discussion, begin to build a Feedback/Survey Page for your Final Project. We'll use a bit of class time to get started. Complete for homework.
EWP: Adobe Flash Version
The next stage of your evolving EWP will use Flash. I provide several tutorials below. However: the Digital Foundations chapters cover much of what you'll need to know for the assignment and you should refer to these as needed.
First, two points of Flash-related common sense:
- Use Flash to make only things you can't make using XHTML + CSS.
- Don't make your entire site in Flash.
Flash Ads
Some examples: HP Brand campaign: HP Digital Photography
To begin, let's take a look at a typical set of online advertising guidelines (Business World).
The Google AdWords Advertising Policies goes into a bit more detail.
From these guidelines we see that a max. length of 15 seconds is a convention and one that we'll follow for this assignment.
Other Non-Ad Flash Examples
- Animated banner: Tutor Ming
- Animated interface: Deitch Projects home page
- Animated interface: Northern Lights Post home page
Flash Tutorials
- Smashing Magazine's list of Best Flash Tutorials. For example: High-tech city animation
- Using Flash for the first time: Part 1: Building a banner
- Using Flash for the first time: Part 2: Adding symbols, animation, and ActionScript
- Best practices for Advertising with Flash.
- Flash Slideshow Image Gallery tutorial at Layers Magazine.
- Simple Stick Man tutorial (stick figure animation)
- Lukamaras.com is a good source of Flash tutorials and ideas for different features of your banner/ad. For instance:
- Lukamaras.com: Creating funny, dynamic dialogue balloons in Flash
- Lukamaras.com: Creating a 360 degree panoramic view ad banner
- Lukamaras.com: Making a movie clip chase another movie clip by using a motion guide
Lukamaras.com has a special section of banner (and banner ad) tutorials.
The in-depth tutorial Creating a flash ad banner from start to finish will form the basis of this assignment — with a few modifications.
Homework
Reading
Again: Burrough and Mandiberg, chapters 18 and 19 are the Flash chapters.
Also, be sure to look through the online Flash tutorials, esp. those on Smashing Magazine's list of Best Flash Tutorials.
Feedback Page
Finish making your Form/Feedback/User Survey Page. Post link to finished page in a reply to the "Feedback Page" thread on teh Class Forum.
Flash Project
Complete the basic Flash version of your End of the World narrative. Essentially, this is an animated slideshow. The basic requirements, as covered in class, are as follows:
- Title and credit "slide".
- At least seven of your EWP images plus titles and captions. These should not blink on and then blink off. Rather, as demonstrated in class, they should fade in and out. Or animate in and out in some other way.
- Concluding slide: "The End" or something like that.
- Author slide with picture, name, and three sentence "about" bio. This is your actual last slide, the one on which your movie should stop.
- Sound is optional, as are any other features or effects.
Next week we'll add some Actionscript to stop your movie from looping indefinitely and to create a link from your Author slide to your Bio Page (or any page of your choosing). We'll also cover how to embed a Flash movie in a web page.
Week Eight
Special Announcement
There will be no formal class meeting this week, but there is still work due, new work to do online, and work to do for next week (see below). And the printouts of screen views of your three midterm pages (stapled, with your name) should be left by the end of Wednesday either in my mailbox in the Murray Hall mailroom or under my office door in Loree (room 010).
Use the time you would have spent in class to complete the last part of the midterm, the Visual Page, due online in your "mid" folder, this Friday, October 30, by 6 PM.
I will be on the College Avenue campus both Tuesday and Thursday afternoon. I won't have definite office hours but should have some available time. If anyone wants to meet, send me an email.
Work Due
(Note: This is work that remains due this week even though we're not meeting in class.)
Printed Pages from the Midterm
As noted above: Printed screen views of your three midterm pages (stapled, with your name) should be left by the end of Wednesday, Oct. 28, either in my mailbox in the Murray Hall mailroom or under my office door in Loree (room 010).
EWP Gallery 2
Post a link in the "EWP Gallery 2" thread on the Class Forum.
Feedback Questions
Post these questions to the "Feedback Questions" thread on the Class Forum.
Visual Page
Again, due Friday, online in your "mid" folder, by 6 PM.
The Visual Page should include 12-18 captioned images. These should be images of your own creation or fully credited out-of-copyright images. If you are using images not of your own creation, you need to be doing something new and interesting with them (and should probably, it is strongly advised, clear this use with the instructor). You may use such images in an analysis of them, for instance, or you may present them in a new and transformative context. A simple gallery of images not of your own creation will not count as an acceptable Visual Page for this course.
As before: Captions should consist of titles, short descriptions of the subject matter, and, where necessary, source/credit name and link.
The Visual Page must also have an introduction. Captions and intro should add up to about 300 words.
Update: Don't just think about the topic; think about the GENRE of the page, the format, the presentation. Here, again, finding examples in magazines and other picture-intensive media is useful and important.
Moreover,as you work on your page, consider the following questions: What will you be trying to do with the images? Showing changes over time? Showing differences and similarities? Telling a story? Imitating/parodying a different genre (like the celebrity photo articles I mentioned)?
Other places to look for ideas: Browse Edward Tufte's website. Or, for the graphically ambitious among you, take a look at Data Visualization: Modern Approaches.
What Lies Ahead
Next week (Week Nine)
We'll review the Visual Pages; work on the User Survey (Feedback) Page; and start two weeks of work with Flash. We'll move rather quickly through the Flash basics, so I strongly urge you to spend time with reviewing the chapters in Digital Foundations.
The following week (Week Ten)
We'll continue to work with Flash, building a Flash version of the EWP. We'll also do some work with Javascript and review the midterms and work at revising ("perfecting") the review and feedback pages.
What Else Lies Ahead
Upcoming parts of the Final Project:
- A second page of writing, at least 1200 words. In Salway and Martinec's terms, where image is subordinate to text. Examples: critical essay, interview, project proposal, tutorial, project blog, text-heavy timeline, guided tour (with some illustrations).
- A page where, in Salway and Martinec's terms, either (1) text is subordinate to image or (2) where the relation between text and image is equal. The default genre for this page is a visually complex comparative timeline, examples of which we'll look at next week. (Timeline might be a project timeline, a learning to cook timeline, a plot timeline for new readers of a webcomic, etc.)
- At least two supplementary pages (e.g., a page of mini reviews, FAQ page, multimedia page, game page, user quiz page, fan art page, recipes with commentary).
- At least one significant use of Flash animation (we'll start looking at Flash next week in class)
- At least two significant uses of Javascript (see Huddleston, chapter 12)
Homework
Reading
Digital Foundations, Chapters 18-20. Introduces Flash.
Optional: If you're interested working with Dreamweaver, take a look at chapters 15-17.
More Visual Page ideas (?): Data Visualization: Modern Approaches.
LINK DESIGN with CSS: List of 10+ usability-conscious link styles.
Interview example: Liz Danzico, Telling stories using data: An interview with Jonathan Harris.
Interview example: Garrett Boge, Interview with Micharel Twyman.
Interview example: Catherine Spaeth, Abstract Comics: An interview with Andrei Molotiu.
Ideas
Ideas for your second text page and at least one of the supplementary pages.
Week Seven
Work Due
Review Page
Complete first draft using the hreview microformat, with images, banner, pullquote, sidebar blurbs, etc. Save to "drafts" folder and post a link in a reply to the "Review Page" thread on the Class Forum.
Home Page
Complete rough draft saved to your "drafts" folder. Should contain all the essential features covered in the previous class.
Discussion
Things of Interest and Another Thing
More on Using Images
A student asked: Is it possible for me to take pictures of the book I reviewed?
It depends on the specific use you're making of the images.
If you are talking about HOW THE BOOK LOOKS (its design, its reader-friendliness) then taking pictures of the book would be useful and informative for your reader.
However = if you're talking about, e.g., a painting discussed in the book, then it would be better to find a good reproduction of the image online and then cite the source, as discussed in class.
Again: only use photos taken of the the book to illustrate the design or organization of the book (e.g., to show how it's easy to use, or a very attractive book, or has a confusing layout); not to illustrate the content of the book (e.g., images reproduced in the book).
And here is an article on image use for us to look at: Varieties of Visual Metaphor.
Upcoming Work
Part 2 of the midterm is the first visual page, as discussed last week. We'll go over requirements for this page, and I'll clarify the due date.
- Midterm
- EWP - Gallery 2
- Visual Page 1
- Form/Survey Page
- EWP - Flash version
- Visual Page 2
- Supplementary Pages
- Text Page 2
In class we'll discuss the requirements for the first Visual Page. To a degree, these will depend on the specific genre of your page. We'll also go over the requirements for the new Author (or Bio) page. Again, these reqs will depend on the function of the page: an Author/Editor page for a web magazine will differ from one for an online portfolio.
Review Page Review and Discussion
For this we'll go to the Class Forum.
Activities
EWP - Dynamic Gallery
Also known as: "Adding Dynamism to a Gallery Page."
So far we've constructed a simple visual page: a gallery page showing details from an imaginary end of civilization. Today we'll look at one way to add some dynamic complexity to the gallery page. This method uses CSS. Over the next few weeks, we'll look at other methods.
The source for this method is the Dynamic Drive CSS Image Gallery.
Here is the class demo with the Dynamic Drive CSS integrated into it. Note that I'm no longer using the float method to structure the thumbnail gallery.
- End of the World (CSS gallery version)
- End of the World CSS (CSS gallery version)
This demo will give us a chance to look at how you should credit special code you locate online; thus, how you might avoid the problem of code plagiarism.
Validate Your Review Page
That's right: check the validity of your Review Page HTML. If your page fails to validate, then fix it.
Revising the (Book) Review
Some things to consider when revising your review text(s):
- Transition sentence between reviews (for multiple reviews).
- Trimming the final text; remove about 15-25% of the words. But don't sacrifice substance. Just try to reduce wordiness, of which there is alwasy PLENTY in a first draft.
- To offset this loss of mass: add quotes from the text (and/or from the product's website; or from other critics and reviewers). There MUST be quotes in your final review. Quotes from websites should end with a citation that links to the source. Quotes from a book should cite the page number. Again, follow Hacker on this.
- Also, add examples to illustrate your claims.
Which brings us to the next bit of revision.
In class writing exercise: (1) Compose a brief paragraph in which you discuss the intended audience of the book (or game, etc.) under review (i.e., who did the author have in mind when he or she wrote the book; not necessarily the same as your audience) and explain whether or not (or to what extent), you believe, the book will satisfy the expectations of that audience. For example: Does it tell them what they would want to learn? Does it do so in an accessible way?
(2) Write a second short paragraph in which you tell us about the author(s) of the book under review; or about the company responsible for the product under review.
When you've finished copy and add your paragraph to your reply to the Review Page thread on the Class Forum.
Here is one example:
From Ink on Paper to the Internet should appeal to news junkies in New Jersey. That includes the thousands of people employed in the state's newspaper industry and the many avid readers of newspapers and internet news. But I am afraid some of them will be disappointed because the crucial question is whether newspapers will survive in the age of the internet. And the author of the book, Rutgers University journalism professor emeritus Jerome Aumente, does not answer it.
Aumente certainly has the qualifications to write such a sweeping assessment of the profession. He created the Journalism Resources Institute at Rutgers University, which trained thousands of journalists over several decades. He was the founding chair of the university's journalism department. He has traveled all over the world defending the rights of journalists. But that makes him an industry insider. And what is missing in this book are the views of outside experts, which would likely be much more pessimistic.
Midterm Workshop
Open workshop time for the midterm.
Work on revising your Review and Site Author pages and begin to build your Home page. Again, here are the HTML and CSS we developed last week. Elaborate, modify, customize, and improve (as needed) for your continued use.
Revise your review text and links blurbs. Insofar as possible: Your original review text should be chunked and trimmed by 15-25%. You'll then add new material in response to my feedback and today's discussion. Unrevised review and blurb texts will weaken the midterm by at least one letter grade. As will your failing to turn in a PRINTED COPY prior to the midterm.
Again: Your Home Page should have the following features: (1) website title in the form of a graphic; (2) focal image or visual theme; (3) sitenav; and (4) introductory text. Footer content of some kind is optional but strongly suggested. The San Gregorio General Store offers one model for this.
Use Adobe Kuler and other color resources to give your website a stable and attractive color scheme, one that goes with your topic and enhances the readability of your content.
Remember that for the midterm, CSS for all the pages should come from a SINGLE external .css file.
Give a distinct id name to the body tag of each of your pages. This will allow you to write page-specific CSS rules by combining ID selection with descendant selectors.
Finally, to clarify what was discussed last week: all pages (home, review, author, visual, and any others you might add) need to have SITE navigation. Site navigation should be in the same place on ALL pages, except (possibly)on the home page (if it functions as a more graphically focused cover/title page rather than a simple introduction page). And all pages should have a banner identifying the website. The banner can be tailored to each page or (for the midterm only) be a general banner. (The final will need to have different banners at least for each main section of the website.)
Homework
Reading
Huddleston on Forms, other reading TBA
Midterm
The complete first stage of the midterm is due this Friday, October 23, at 6 PM. All parts of the midterm should be collected in a new "mid" folder inside your "425" folder on Eden. When your work is ready, post a link to your "mid" folder in a reply to the "Midterm" thread on the Class Forum.
Update: As discussed in class, you should make no changes to the contents of your "mid" folder once you've submitted the midterm. If you need to make a change, contact the instructor first.
Note: The Author page should include at least three paragraphs of text about yourself. One of those paragraphs should describe some of your other work (for this class and elsewhere) and link to any work online (at least to your first Bio Page, your FRP, and the first version of your EWP Gallery).
Also bring printed versions of your three midterm pages (Home, Review, and Author) to the next class. All I'll need is one printed page worth of screen view for each web page. I'll use these to give you some feedback on your page designs.
Note: The Visual Page will be due next Friday and will complete the midterm. I'll discuss some of its reqs in class and post some more specifics by next week.
EWP - Dynamic Gallery
Complete this second version of your EWP Gallery Page. This is due for next week. Save to your drafts folder.
Feedback Questions for Form Page
For the next class, provide the following:
- What are three things you know about your model site user? (E.g., for a site on Early Japanese Mystery Novels: You know that your model user doesn't read Japanese.)
- Four to Six questions your likely site user might have when they find your site, say, on Google. What are looking to learn, to do, to track down?
- Eight questions you have for your likely site user once they've visited your site. These need to be real, topic-related, substantive questions. Not general questions, like age? gender? country of birth? They should be questions that would help you shape and improve your site, esp. that would get your user to feel involved in the development of your site, that would make them perhaps, even, site fans. Among other things: try to get stories, ideas, etc. from your user, content that you can ADD to your site.
These last eight questions will become part of your Feedback Page. Again: They should NOT be demographic questions.
Post your questions to the "Feeback Questions" thread on the Class Forum. Also, turn in a printed copy of your questions in class.
Week Six
Work Due
FRP
The complete version of your FRP is due by the start of today's class. We'll take a look at these in class. Make sure that link in the FRP thread on the Class Forum is to the most up-to-date version of your FRP. Modify your response if the URL has changed.
EWP Gallery
Upload finished version to drafts folder. Post link in a response to the "EWP Gallery" thread on the Class Forum.
Review Text (Writing Assignment)
Electronic copy in your hw folder on Eden, printed copy for instructor.Stapled. Numbered pages. Include word count at the end.
Discussion
Midterm Prototype
The midterm prototype will be due next Friday. It will consist of at least three pages: a Home Page for your site, a complete Review Page, and an About [the site author = you] Page with links to other work, projects, etc. [at least your FRP and EWP Gallery for now]. There may be one or two other pages due at a slightly later date as "part two" of the midterm. Probably there will be a Visual Page (e.g., portfolio of work, character and setting designs for a webcomic, photo documentation of a physical project, screenshot gallery for a digital project, visual narrative). But more on this later.
All the pages should share a main CSS file.
We will discuss the midterm and its requirements in today's class.
More Web Typography
Smashing Magazine has this useful survey: Typographic Design Survey.
And we should look at this as well: Bloggingheads.
Using Images
Your Book Review page should have THREE or more images in addition to the (optional) cover image of the book under review and/or an author photo.
As we set up last week, each image should have a caption identifying/describing the image and identifying creator and source of the image (if you are not its creator). For online sources, let the identifying name of the source website double as a link to the source.
In addition to a standard "figure div class, you might specify standard "left" and "right" classes of floating div for the two offset image positions (if you plan to use these). Set the float directions for each div and use margins or padding to put space between the image and surrounding text.
Note: As stated above, you do not need to float images to the left or right. Wide images often work best inside or between paragraphs of text as part of the vertical flow of content. For example: Giornale Nuovo on Erik Desmazieres.
Small images: Unless it is essential to your page design, you should not center small images on your page.
Large images: If you need your user to view a very large image, put the image on a second page and create a link to it on your feature page.
Keep data size of the images on your pages as small as you can; preferably under 50 KB (large images obviously will be larger but still aim for the lower KBs). If necessary, re-save iamges for the web at a smaller data size.
Here is a demonstration of revising page design in order to use an image informatively with text.
Examples
Some examples of writing online: article from Wired Mag online; article on Harvey Kurtzman; and Jos Buivenga, Calluna – a text typeface with flow.
Home Page: Introduction
As noted already, your midterm will need to have a Home Page. The page should establish the general "look" of your site. It should be constructed around a focal image or design and needs to give your user an overview of the site architecture (main pages, content, nav options, etc.)
The HP Rule: Main page design, introductory content, and site navigation must fit in the active graphic space.
Older Examples:
- Brian Kane
- Dam, Stuhltrager Gallery
- Zembla (Vladimir Nabokov site)
- Vladimir Nabokov Museum
- Vladimir Nabokov Library
- Meyerweb
- British Museum
- San Gregorio General Store
Fancy Examples:
We should also take a look at Home Pages from some previous final projects.
Activities
Byline Adjustment
A change to the byline format implemented last week.
Book Review Page: Layout Exercise
Next we'll begin to build a skeleton layout for your Book Review Page.
First: lets review both the basic and special requirements for the Review Page.
Next: Let's take a quick look at the structure of one of the book review examples from last week: PHP and MySQL by Example.
Another book review example: Ellen Lupton's Thinking with Type.
Finally: for sidebar links see how Maud Newton does it in the sidebar on her blog.
And a second look at Veerle's list of approved links.
Next, let's look at the hReview microformat we'll use to structure our reviews.
Now to the demo/exercise itself:
On your friendly local desktop: create a new HTML page based on the basic XHTML template we've been using. Also: create an external CSS file and include clearfix CSS. Save these files as "review.htm" and "project.css," or something similar. You may want to copy over some of the basic CSS from your frp.css or ewp.css files as well to speed things up.
Next, we'll go through three quick demos. First, we'll use the float property to set up a two-column content area, one for the blurbs and one for the review and images. Second, we'll use the hReview microformat to set up the basic structure for our review within the #content div. Third, we'll see how we can use a definition list to markup the product information for the book(s) under review (see also Huddleston 80-81 and using a definition list to markup product information).
Homework
Reading
Huddleston, Chapter 11. On Forms.
Structural Naming Convention in CSS.
Book Review Page
Finish building first COMPLETE draft of this page. The page should include a site banner, Believer-style book info, a pullquote, and a links sidebar, as discussed in class.
Update: These are versions of the HTML and CSS fopr the Review Page that we put together in class. They should be used, if needed, for reference and as starting points for your own designs.
Home Page
Build a simple home page for your final project with all of the standard features we discussed in class. Make links to six other pages on your site (even though only one of these exists so far).
Note: Much of the next class will be an open workshop where you'll be able to ask me questions as you revise these pages.
Update: The home page REQUIRES:
- a title logo (i.e, text graphic);
- a representative image that also might help to structure the page;
- site navigation that provides a contents overview of the site and also indicates the current page;
- introductory text of five to ten sentences;
- footer with (possibly) copyright informationn and (required) source information for images and any other visible (or audible)( content on the page not of the site author's own creation.
Note: The introductory text should include (among other things) at least a one sentence statement of the site's purpose, and describe some highlights and important features of the site (and provide in-text links to these).
For ideas, and other desireable features, look at the linked examples above and any other sites you frequent. What works? What fails to work?
Week Five
Work Due
- Nine Links Blurbs – Printed copy for instructor. Save electronic to HW folder.
- Further Reading Page – Page should now have working subnav, revised CSS, and three images with captions. You do not need to post a new link via the "Further Reading Page" thread on the Class Forum. Just check that your response continues to link to the most up-to-date version of your FRP.
Work Due Summary
| Assignment | Due Date | Drafts Folder | HW Folder | Printed | Class Forum |
|---|---|---|---|---|---|
| Linking Questions | Week 2 | x | |||
| Bio Page | Week 2 | x | x | ||
| Bio page + CSS + text graphic | Week 3 | x | x | ||
| FRP Prep | Week 3 | x | |||
| End of the World images | Week 3 | x | |||
| End of the World text | Week 3 | x | x | ||
| Proposal + book choices | Week 4 | x | |||
| FRP + CSS + banner | Week 4 | x | x | ||
| FRP + subnav + 3 images w/ captions | Week 5 | x | x | ||
| 9 link blurbs (text only) | Week 5 | x | x | ||
| Review text (1200+ words) | Week 6 | x | x | ||
| Three images for review | Week 6 | x | |||
| End of the World static image gallery | Week 6 | x | x |
Assignments should be submitted in the specified space/format by the specified date. At this point, late and missing work will begin to have a real effect on your grade.
Work whose only marked format/space is the Class Forum should be submitted there. If both Class Forum and another space/format are marked, then only a link to the second space (e.g., the file in your "drafts" folder) should be on the Class Forum.
Discussion
Plagiarism, Image Use, & Copyright
Let's take a look at the Writing Program's plagiarism policy and the Business and Technical Writing Program plagiarism guidelines.
As the Business and Technical Writing Program plagiarism guidelines make clear, using the code or design of a page that you find online generally counts as plagiarism, even if you credit the source. For the purpose of this class, this includes using any free page code and design templates you may find online or in an editing program like Dreamweaver.
You may use brief tutorial code you find online (e.g., from a tutorial that tells you how to make an image swap or a pullquote, things like the examples on the HTML Dog website and in the book).
You also may use prewritten Javascript that you find online, but you should discuss this with me (at least the first time you do this) and you must credit the source of the script in a comment in your code.
Image Use: Wherever possible use images of your own creation or images that are in the public domain. When you use an image under copyright, try to get permission from the image's owner. At the very least, credit the source of the image. (We will return to this matter again in the coming weeks.)
Finally, as stated in the class policies, if you miss this discussion in class, be sure to speak to me about these issues as soon as possible. I do not lie: They are very important.
Example of Terms of (Image) Use: National Gallery UK.
Now let's take a look at The Commons on Flickr (not the same as Creative Commons, which we'll discuss as well).
FRP Review
Let's visit the Class Forum and take a look at some of your Further Reading Pages. In terms of content, we'll want to look at quality of sources and consistency of the bibliographical formatting. In terms of presentation and design, we'll want to focus on legibility and CRAP principles. Finally, in terms of code, we'll want to check for economy and error-free-ness.
Let's start with this Spore FRP Example.
Website Examples
We'll regularly examine the good points and problems of interesting websites. These two were posted to the Class Forum.
Review of Web Typography Reading
Typedia: Anatomy of a Typeface.
Code Style: Build better CSS font stacks
Ross Shannon, Web Typography (overview)
Oliver Reichenstein, Web Design is 95% Typography
Michael Owens, 6 Ways To Improve Your Web Typography
Web 2.0 Style
Here is a pretty terrible old web page: Wondermints fan site.
And here is an article on Current Web Style.
And here is an example of that style: Net Squared website.
And here is a related Web 2.0 How To tutorial.
CRAP Design Review 2
We didn't have a chance to look at this last properly last week, so we'll go over the CRAP principles design demonstration.
Genre Analysis: Book Review
The product or event review is an important and widely used genre of web writing. It provides content of interest to a wide range of users; is often a good way to attract attention to your website, no matter the topic of the site; is a way of entering into dialogue (directly or indirectly) with other web authors; and is a rich method for adding context for your site (to your project, your work, etc.) by presenting, in the form of a review, relations between the content of your site and one or more other products.
Let's look closely at some online book reviews.
- Sander Bauman reviews Book review: The Wayfinding Handbook and Book review: Identity 2.0.
- Cal Evans reviews PHP and MySQL by Example.
- Stephen Baker reviews Say Everything: How Blogging Began, What It's Becoming, and Why It Matters by Scott Rosenberg (BusinessWeek).
- Nate Cavalieri reviews Desert Gothic by Don Waters (Believer).
- Karan Mahajan reviews All About H. Hatterr by G. V. Desani (Believer).
Note: Supplying access to a chapter list/table of contents for the book via a link (e.g., to the publisher's website) or other supplementary device is a good EXTRA feature for a book review, and one I recommend; but it should NOT be included in the body the review, as Evans does in his review.
Activities
Adding a Byline to Your FRP
Adding a byline to your FRP will introduce you to the concept (and technique) of Microfromats. You'll creat a byline that reads "Prepared by [your name]" under the the title/main header. This byline will use the hcard microformat.
Adding GOOD Typography to Your Bibliography
Revise bibliographical items as needed in light of the above discussion of web typography and information design. At minimum: Book titles need to be visually distinct from the other information and article titles should be in quotes. However:" Do not underline book titles; this will make them look like LINKS.
EWP Part 2: Static Image Gallery
This exercise, to be started in class and completed as homework for next week, will give you further practice with float-based layout, image presentation (via the "figure" div format), and CSS in general.
You'll construct an End of the World image gallery using your nine images and related text. To help with this, you'll follow Tutorial 4 on Max Design's Floatutorial, but with some modifications (discussed in class).
- On your local desktop: create a new HTML page based on the basic XHTML template we've been using. Also: create an external CSS file and include clearfix CSS. Save these files as "ewp_gallery.htm" and "ewp_gallery.css," or something similar. You may want to copy over some of the basic CSS from your frp.css file as well to speed things up.
- Copy the 260px versions of your photos to an "images" folder on the desktop.
- Inside the #content div of your page, markup your images and captions (legends) using the "figure" format we used for your FRP. Adjust the CSS property values to accommodate the 260px image width.
- Following and adapting the MaxDesign thumbnail gallery tutorial, arrange your images in a 3 by 3 grid. Note several differences:
- Your div class is the larger "figure" (or "picture"), not "thumbnail"
- Your images are 260px wide, not 60px.
- Your figure div uses a p for its caption; therefore you won't need a line break after the image.
- You're using XHTML and therefore need to close your img and br tags with a slash before the second bracket. Don't be sloppy and skip this step.
- Add an introduction to your EWP project to the #content div. Follow this with a byline using the hcard microformat we used for the FRP.
- Using a cropped large-scale version of one of your images; or a new image, make a banner for the gallery page (in the h1 in the #header div).
- Upload the finished page to your drafts folder on Eden.
- Check the permissions, and rest.
- Finally: You can place all your images inside a div with class="gallery" and use the width of that div, rather than the line break, to force your floating images to wrap onto second and third lines.
Homework
Reading
Your review book(s).
On web-writing style: Writing for the Web by Jakob Nielsen.
Andrew Salway and Radan Martinec, Some Ideas for Modelling Image-Text Combinations (PDF).
As we discussed, the Book Review is a genre of non-fiction writing and the Book Review Page, an emerging genre of web page. To get a better sense of what writing for a genre, or within a particular genre, might involve, take a look at "Writing in a Genre" (from Hot Text!: Web Writing that Works).
FRP
Finish working on your FRP. Upload final version to Eden. Make sure that link in FRP thread on Class Forum is to the most up-to-date version of your FRP.
EWP Part 2
If you didn't finish this in class: finish the activity for next week; upload to drafts. Post link in a response to the "EWP 2" thread on the Class Forum.
Review Text (Writing Assignment)
The text for you review(s) is due next week. Write and revise your review text. Text should be at least 1200 words. A printed, stapled copy will be due at the start of the next class.
Your text should have a descriptive but catchy title. It should also have a "Central Question" (or similar feature) under the title, as we saw in the Cavalieri and Mahajan reviews (and other reviews in the Believer).
Also include a list of TOPICS DISCUSSED in your review (at least ten), as seen in this article, also from The Believer.
Divide the text into at least five sections, each with its own heading. Make the headings specific and descriptive (do NOT use simple, minimally descriptive headings like "Intro," "Summary," "Evaluation," "Conclusion").
In a separate section following or preceeding your review: Include product information (e.g., author, title, publisher, date of pub., number of pages, number of illustrations, etc.).
Also: select and quote three separate REPRESENTATIVE sentences from the book; i.e., sentences that convey the style and content of the book.
Make sure that your review tells us some things about the author (other books, other work, interesting background), and about the books intended audience (i.e., what kinds of reader is this book intended for).
Include an accurate WORD COUNT at the end of your text. Word count should EXCLUDE long (block) quotes from the book
Formatting: 1.5 line spacing; numbered pages; SERIF font (no monospaced or sans-serif fonts). Staple your pages.
In addition to the printed copy, upload a digital copy of the text to your "hw" folder.
Review Images
Find or create at least three WIDE, good-sized images to illustrate your review. These should not be pictures of the cover or the author(s) of the book. Upload these images to your "hw" folder, along with your review text.