Week 06

October 2, 2008 — Jamie

week 06 - spry widget assignment due, review final project assignment, more spry widgets, web critiques

Your spry widget assignment is due this week. Upload the zipped file with your complete folder to the “Dropbox” on the smconline.org site by noon, Friday, October 3.

This week I have outlined additional useful information regarding the spry framework. There is no assignment this week but please be sure to read through all the notes. I also advise you to take time to go through the web site critique information.

Your final project will be due by midnight on Friday, October 17. Please let me know if you have any questions about the final project.

Final Project
The focus of this project is to create a complete, portfolio quality web site. You are to redesign the web site for a company that currently has a web site. Designing a personal web site is not allowed:

  • Argyle Design (www.argyle-design.com). This company designs and engineers products as a service for their clients. The company is an industrial design company with projects such as — phones, consumer electronics, cable boxes, medical equipment, computers, etc. The company expertise in both design and engineering

Your new web site design should have a strong design aesthetic that reflects a new attitude and look and feel for the site that you create. The site design should also reflect a strong technical sophistication.

Your design should be original, but you may borrow content from the existing site — you may use images and text from the sites you’re redesigning, or from any other product design or industrial design company site. Your site should consist of:

  • 6 complete pages and placeholder pages for the rest of the pages. (Must use site map provided and create one page for each of the 6 section a,b,c,d,e,& g)
  • A sub navigation for “what we do” and “portfolio sections.”
  • A strong visual design
  • A theme and visual concept that carries through the site
  • A clear navigation system
  • An effective and clear system of displaying the company’s portfolio
  • A design that works well on 1024×728 displays (i.e. navigation & primary content inside 990×560)
  • 6 pages that have complete content, including photos and text.
  • You must use some html text in the site
  • Yahoo directories of product design & architecture companies:
  • Product_Design

Previous student work

This student work is presented as examples of good work done in previous sections of this course. Of course, as beginning designers working with limited experience and time, the students did not make “perfect” sites from either a design or technology perspective. In particular, many sites suffer from the following problems that future students should try to avoid:

  • Sites take too long to download, often because of too many rollover images.
  • Heavy reliance on graphic text, when HTML text would be faster downloading and easier to maintain. More HTML text should be used, but this can require a more sophisticated approach to page layout than is covered in this course.

NEW REQUIREMENT FOR FINAL: You must make use of royalty free images for your project. (Note that the examples of student work below do not reflect this new requirement.) You can NOT use images from the actual Argyle Design web site. You may use your own original artwork and/or photography if you prefer.

Student 1
Student 2
Student 3


Final Project checklist

1. Did you research the project and determine a specific look and feel for your site?
2. Did you successfully create a strong, visually effective site?
3. Did you follow the specified dimensions based on a 1024 x 728 monitor resolution?
4. Did you create your site using a combination of divs and tables?
5. Did you design effective main navigation and sub-navigation for your portfolio section?
6. Did you title your pages, insert rollovers, and highlight navigation?
7. Did you use HTML text in your site?
8. Did you create and use only one CSS file for your site?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


Spry framework for Ajax

The Spry framework is a JavaScript library that provides web designers with the ability to build web pages that offer richer experiences to their site visitors. With Spry, you can use HTML, CSS, and a minimal amount of JavaScript to incorporate XML data into your HTML documents, create widgets such as accordions and menu bars, and add different kinds of effects to various page elements. The Spry framework is designed so that markup is simple and easy to use for those who have basic knowledge of HTML, CSS, and JavaScript.

Please read: Chapter 10 from our textbook “Adding Effects and Interactivity with Spry” (pages 237-248)
Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos)

Widgets and Menus

Spry widgets include Menu Bars, tabbed panels, accordion effects, and collapsible panels.

The Spry widgets can be edited in the Property inspector. For example, if you create a Menu Bar, you can assign text and links to menu options in the Property inspector. But, in general, you cannot do much, if any, formatting for Spry widgets in the Property inspector. Instead, you format Spry widgets by editing style sheets that get generated by Dreamweaver whenever you create a Spry widget

There are a few things to be aware of when you create Spry widgets:

  • Documents must be saved before you insert Spry widgets.
  • Spry widgets generate lots of CSS styles and JavaScript files, and these files are saved every time you save a page with a Spry widget.
  • You control basic features of the Spry widget, like text and links, in the Property inspector. But you format Spry widgets (elements like font, text color, background color, and so on) in the CSS Styles panel by editing the CSS style for the Spry widget.

Exercise: I encourage you to go through the spry tutorials on this Adobe page. The tutorials will give you a better understanding about how the various sprys work. http://www.adobe.com/devnet/dreamweaver/articles/spry_simulations.html

Following the directions from page 238-240 in our textbook, try inseting a Tabbed Panel into a HTML page.
Be sure to be aware of the 3 things outlined in the notes above. Use the notes below to style the Tabbed Panel.

Use the CSS Styles Panel to Format Tabbed Panels. You can change the background color of tabbed panel elements in the CSS Styles panel:

  • To change the background color for a hovered-over tab, choose the .Tabbed PanelsTabHover style in the CSS Styles panel, and choose a background color from the background-color property.
  • To change the background color for a selected tab, choose the .TabbedPanels TabSelected style in the CSS Styles panel, and choose a background color from the background-color property.
  • To change the background color for a tabbed content area, select that tab in the Document window, choose the .Tabbed PanelsContentGroup style in the CSS Styles panel, and choose a background color from the background-color property. Format the content of tabbed panels the same way as formatting text or images.


Spry Effects

Effects animate your page and make page elements react to visitor actions by changing location or size or appearance. Editing effects requires some ability to work in the Behaviors panel.

Demonstration of Spry effects:
http://labs.adobe.com/technologies/spry/demos/effects/index.html

Additional Spry Resources:

Additional Spry Demos:
http://labs.adobe.com/technologies/spry/demos/index.html

Spry Widget videos:
Creating menus with Spry Widgets

Working with the Spry Accordian widget

Using the Spry framwork for Ajax

Adobe site: All things Spry:
http://www.adobe.com/devnet/spry/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Web sites to critique:
What makes a good site?

Here’s an interesting exercise because I want you to look at sites that all use the same HTML but are styled differently using CSS.

CSS Zen Garden: The sites below are all a part of a web site called CSS Zen Garden.

“The CSS Zen Garden is a World Wide Web development resource. The goal of the site is to showcase what is possible with CSS-based design. Style sheets contributed by graphic designers from around the world are used to change the visual presentation of a single HTML file, producing hundreds of different designs. Aside from reference to an external CSS file, the HTML markup itself never changes. All visual differences are the result of the CSS (and supporting imagery).”

Please take a look at the following styles all contributed by different designers. Take note of the similar content but how all designers have created an unique design.

Using our Criteria for discussion below, which designs are most successful and why?

Dead or Alive:
http://www.csszengarden.com/?cssfile=009/009.css

The Question Why:
http://www.csszengarden.com/?cssfile=040/040.css

Si6:
http://www.csszengarden.com/?cssfile=044/044.css

Punkass:
http://www.csszengarden.com/?cssfile=101/101.css

Contempo Finery:
http://www.csszengarden.com/?cssfile=151/151.css

Business Style:
http://www.csszengarden.com/?cssfile=175/175.css

Here is a link to all the designs on the CSS Zen Garden site: http://www.mezzoblue.com/zengarden/alldesigns/

Criteria for discussion

  • Look & feel / Attitude of site
    Does the design or “look and feel” of the site represent the attitude of the company/client?
  • Use of color
    Does the use of color effectively communicate the attitude and “look and feel?” Using red and black for the color palette for a web site communicates something different than using a light blue and white color palette.
  • Composition / layout
    Does the layout of the site effectively accommodate the content? Is there room for text and images? Is the navigation in an easily accessible location?
  • Typography
    Is the type on the site readable? Is there a good mix of font size and font weight to communicate hierarchy for the content?
  • Content
    Is the content well-written? Is there HTML content on the site. (You want to avoid creating web pages where text is inserted as image files.)
  • User experience
    Is the site easy to navigate? Is it east to find content on the site?
  • Navigation
    Is the navigation well-organized. Is the navigation consistent from page to page?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

There are no assignments that need to be turned in this week. You should take the time to do the exercises in the class notes above. You should be working on your Final Projects.

copyright © 2006-2008, jamie cavanaugh

Posted in Uncategorized. Comments Off