Week Eleven
Special Announcement
Late Start
The Wedensday afternoon section (425:01) this week will start at 5 pm.
Work Due
Favicon
Use Google to find out how to make a favicon (e.g., 
) for your website.
Then make one. Add to website via Eden.
Topic for Second Text Page
Topics for the second Text Page must be approved by the end of this week. The Text Page will be due the class following Thanksgiving. So have a preferred idea and at least one back-up idea ready for discussion.
EWP - Flash Version
Style the page with your embedded movie using CSS and upload it to your drafts folder. Then create a link to the page in a reply to the "EWP - Flash movie" thread on the Class Forum.
The basic content requirements, as covered in class:
- 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.
And the basic functionality requirement:
- The movie/slideshow stops on the Author slide, does not loop.
- The author slide contains at least one (working) link to Home Page, Bio Page, or other page on the web.
- The movie plays on a webpage using the SWFobject embedding method.
Discussion
This Week's Items of Interest
Smashing Magazine: CSS-Based Navigation Menus: Modern Solutions and Navigation Menus: Trends and Examples.
Data Visualization: Modern Approaches
Sprint Widget Mosaic = Visualizing the Now!
Create an analogue clock [on your website] using only CSS!
More from Dynamic Drive: hover-activated CSS changes for navigation buttons.
Adding Simple JavaScript to your EWP or Visual Page
Let's take a look at this fairly simple HTML Swap Demo.
Next, let's take a look at these related HTML swap Demos: Three, Four, and Five.
Finally, here's a slightly more comlex application of the same basic code in combination with CSS: Six.
Basically, when triggered by a mouseover action, the script located the div element with the specified id (e.g., "right" in first demo) and replaces the HTML inside the div with the new HTML specified in the corresponding instance of the function.
Once you've tried the JS basics, you might want to work with the jQuery framework (see below) and one of the numerous jQuery slideshow plug-ins. On the latter: See for instance, 15 jQuery slideshow/gallery plugins.
More JavaScript: JS Libraries
Two good script library collections to start with:
- jQuery: "Write Less, Do More"
- Adobe Spry (works with Dreamweaver)
Again, you might start with the very short Huddleston intro chapter on JavaScript; or take a look at the W3 Schools JavaScript tutorial; then, move onto the libraries.
But remember to credit all scripts not of your own creation (or supplied directly by the instructor).
Visual Page
As discussed previously, the visual page focuses on the visual rather than the textual. The page, however, should have introductory and supplementary text. The page must relate to your site topic. It should contain roughly 14 non-copyright images, preferably of your own creation (or commission). You may use/present the images in a gallery, a timeline, a slideshow narrative, a tutorial, a tour, a pictorial encyclopedia entry, a dialogue, a Flash movie, etc.
Text in captions or elsewhere on the page should identify each image, and (where necessary) explain what we should appreciate in it.
Of some interest: Pure CSS Cross Browser Multi-Page Photograph Gallery.
Visual Page Examples from a Previous Semester
Note: The requirements for these differ slightly.
Visual Page Genre: Timeline
As discussed last week, making a timeline related to your project is one good possibility for either your second visual page or a supplementary page. Here are some examples of visually based and/or web-based timelines.
- Graham Roberts and Ben Sisario/The New York Times, Comparative Timeline for the new Guns 'n' Roses album, Chinese Democracy.
- Vonage Timeline (courtesy of John Abbott).
- For comparison: Another Mumbai Terror Attack (NON) Timeline
- New York Times, Highlights of a Cathedral's Rehabilitation (not exactly a timeline but suggestive of one)
- Another cathedral timeline.
- Yet another comparative timeline: The Times Square Time Ball.
- Interactive Flash Timeline: Don Cesar Resort
Some older examples from this class:
Activities
EWP: Javascript Version
There won't be time to make a proper EWP page. But we'll have some time in class to experiment with adding Javascript to the display of some of the images.
Midterm to Final Workshop
In-class time to work on revising the midterm and feedback pages.
Homework
Reading
TBA
Second Text Page Text
Second text. 1200-1600 words. Topic and genre must be discussed with and APPROVED by the instructor (via email is fine). Stapled, numbered pages. Serif font. 1.5 line spacing. As before: Include word count at the end.
Final Project
Revise midterm work and feedback page.
Remember: Your final project will need at least two supplementary pages whose topic and genre should also be discussed with the instructor.
Week Ten
Work Due
Feedback Page
Form/Feedback/User Survey Page. Post link to finished page in a reply to the "Feedback Page" thread on the Class Forum.
Flash Project
Complete the basic Flash version of your End of the World narrative. Again, the basic requirements 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.
Discussion
Post-Midterm Review: Part One
In which we critically review your midterm projects. First, we'll look at a few pages of each type to get a sense of some do's and don't's. Then we'll go through and collaboratively critique the projects as wholes.
As mentioned previously, much of the specific feedback on your midterms will come via this collaborative review. It is not something to miss.
One thing we'll need to focus on is naturalizing your sitenav links. That is: giving them logical and macro-genre-specific titles and a familiar order.
And again (because some of you are still, madly, doing this): DO NOT add, substract, or modify in any way the contents of your mid folder.
Now on to the review. . .
First, let's look at an About (the Author) page. And another one.
Next: a case of Site Navigation (and nav layout).
Next: a case of typography and text layout.
Next, let's look at a Book Review. And let's look at a second Book Review in terms of its typography and image presentation. And one more before we move on.
Finally, let's look at a Home Page.
Note: The Visual Grade on the Midterm does not include the Visual Page. Rather = it covers the visual content on your Home, Review, and About pages only.
Resources & Other Things of Interest
Good examples of web comic with extras: Rice Boy.
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.
Activities
EWP: Adobe Flash Version (Part 2)
Still to be done:
- Add stop and link(s) to your movie using Actionscript 3.0.
- Make a webpage to show your movie online. Use your previous EWP pages as models. All your EWP pages should go together as elements of the same project.
- Embed your movie in the new page using Swfobject.
- Upload your EWP movie (animated slideshow) to your drafts folder.
Embedding Flash in a web page using SWFObject. (For instructions for use, see the documentation.)
As for adding functionality via Actionscript, we'll cover a few things in class. To help us we'll refer to the Creating a button and Writing simple ActionScript tutorials from "Using Flash for the first time—Part 2: Adding symbols, animation, and ActionScript."
You should also refer to Digital Foundations, chapter 20, only online. It covers making stop and start buttons using Actionscript 3.0. For creating link buttons using Actionscript 3.0, refer to What happened to getUrl or a similar tutorial.
Favicon
If you want to take a break, use Google to find out how to make a favicon (e.g., ) for your website.
Then make one. This will give you a chance to practice more with Photoshop and pixel measurements.
Workshop: Fixing the Midterm
In-class workshop time to begin fixing, revising, perfecting your Home Page, Review Page, and other pages.
Homework
Reading
Huddleston pp. 8-9, and chapters 12 (Javascript) and 14 (specialized markup).
Smashing Magazine: CSS-Based Navigation Menus: Modern Solutions and Navigation Menus: Trends and Examples.
Of some interest: 7 reasons to avoid Flash (or Silverlight) like the plague when designing a website (Antezeta Web Marketing).
EWP: Adobe Flash Version
Complete for next week. Add stop and link(s) to your movie using Actionscript. Embed in a webpage using Swfobject. Style the page using CSS and upload to your drafts folder. Then create a link to the page in a reply to the "EWP - Flash movie" thread on the Class Forum.
Again: The basic requirements, as covered in class:
- 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.
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.