|Date||Readings||Topics||Classwork & Assignments|
|25th September||•HTML4, XHTML, HTML5;
•Moving in: Open Web acct.
•Using (TeraTerm Pro) to Dante account
•Using WinScp to down/upload from home or lab (Mac=Fugu)
•Adding an icon
•Using Pico to edit on site.
|27 September||Franz, 1-19;||
•Differences of four major browsers and their developer tools.
•customizing a browser
•Four extensions and a bookmarklet for FF [+]
|Lesson #1. Using Typetester|
|2 October||Franz, c.2
The Tragedy of Misuse: Why You Hate Comic Sans, Kadavy, 38-45
|•Basic Text Page
•The skinny on
| •Writing with (MS:NotePad++) (Mac:TextWrangler)
|4 October||Franz, c.3||Lesson #3|
|9 October||Franz, c.4||Gibson text||Lesson #4|
|11 October||Hypertext Interlude:
What Happens When You HREF?
| •Hyperlink anchors
•links to fragments
•Title and Target attributes
|Project #1. Due 16 October[+]
It is a truism that words take on specific associations (
For this assignment, find a poem (or lyrics to a song), copy it onto a new page, and add links as was done in the following projects:
Specifically, your project should have:
In the end, your completed assignment should be one that someone surfing the web would want to read – just like any other good text.
|16 October||Franz, c.5||Page layout and design: alignment||Lesson #5|
|18 October||Franz, c.6
||Lesson #6 (Film Series, Part 1)|
|23 October||Franz, c. 7& 8||Lesson #7 & 8(Film Series, Part 2 &3)|
|25 October||Franz, c. 9||Lesson #9 (Film Series, Part 4)|
|30 October||•Franz, c.10
•Zebra Striping with JQuery
|Example of Sorter||•Lesson #10
•Project #2.Restyle a Page. Due 6 November[+]
For this assignment, you should choose an already more or less finished page—your own or someone else's—and redesign its layout keeping content the same. You should use the powers of style sheets to size and position elements, assign colors, borders, white space, fonts (faces, sizes, styles, weight, line-height). You do not need to get fancy with dynamic tricks, but you should make substantial use of the resources of style sheets to make two alternative layouts controlled by two external stylesheets. You can link one page version with one stylesheet to the next one with the other sheet, and a link to the original page should be provided. For this assignment, put your style comment describing what you are trying to do on a separate page.
Criteria: you should make substantial use of the style attributes available and you should make designs that fall within the tasteful-striking range and are appropriate to the page's purpose and audience.
The CSS Validator will probably be useful or indispensable for this project. Good rules of thumb for external stylesheets:
|1 November||•Franz, c. 11
|Multiple Voices||Lesson 11 (Recipe, Part 1)|
|6 November||•Franz, c. 12
•fixed, liquid, and elastic designs
• scaling images
|Lesson 12: (Recipe, Part 2)|
|8 November|| •Franz, c. 13
•The Rhetoric of Chunking and Linking
•Use of breadcrumbs (2002)
e-passagen: a machine for thinking
|Lesson #13 (Recipe, Part 3)|
•The White Teeth of London and compare
•One Text: Many Stories Henry Miller's Paris
||Site Structures and Traversals||Project #3. Analysis and Critique of City site. Due 27 November[+]
This project asks you to compare and contrast online cartographies of either Henry Miller's Paris or Charles Dickens' London. The overarching interest is in how key places are portrayed in text and image(by various individuals--the author, the site-maker, another source), the use and function of maps, and how the key places are linked together via site structure and hypertext. General themes are:
Your analysis should include map of the sites: Nestor can be very helpful here, both to make a complete map and also as a record of how you actually navigated through a site. (Here is the Nestor map for Fragments, Splinters, etc. in millerwalks.) (The Simon Callow clip is included to underline the difference between choices you make when browsing and the more passive sit back and watch of video.) Your analysis should include an assessment of strengths and weaknesses of the different sites and your overall preference, as well as any suggestions you might have about enhancing the experience of the site.
The product should be a website which both cites features of the analyzed texts and links to other parts of them. For images you can use full URLs rather than downloading the images.
•Franz, c. 15
•Using Google Webfonts (and ubuntu-bare)
•Google Font Combinations
|27 November||Franz cc. 16-17|
|29 November||Franz, c. 18|| •Curt Cloninger, 10
•Demo of opacities etc.
•Project #4 Analysis of a Web Style Due 12/6 [+]
The purpose of this assignment is to test how robust and stable descriptions of particular web styles are by choosing one style, finding and analyzing examples, and executing your report in the style you choose to analyze. Note that many of the sites which are examples for Cloninger and Lennartz have undergone one or more remakes, and may or may not continue to exemplify the style they once did. So one point to establish for the style you investigate is how entrenched it is on the sites that use it and how able to undergo variation and modification while still in the recognizable style. You should test definition of the style by checking several sites and finding other examples. Also, styles are trendy, and for some of these, their trend may have passed, leaving them as relics.
You should have a plan, list of examples, and general claim (something to show) by the last class. This report could be the skeleton of your final draft. In addition, the final draft should be done in the style you are analyzing.
|4 December||Sven Lennartz, grunge styles
30 Beautiful Examples
35 Beautiful Grunge Sites
|6 December||•CSS3 Transitions, Transformations, etc.
•CSS3 Demo Project
|Project #4 Plan due|