Monday, February 11, 2008

Layout Links

Box Model hack:

posted by springB @ 2:47 PM 0 comments

Friday, February 08, 2008

Classwork - EDLF 702 - 2/11/08

Tutorial : What are the Attributes of a Good Screencast?

Tutorial: In-Class Assignment

Task #1: Draft an Outline for Your Tutorial

  • Create a 1-page script for your tutorial.
  • Be mindful of the 2-minute length.

Usability: In-Class Review

  • Workshop 2 or 3 revised color schemes
  • What did they change visually?
  • What did they change in the CSS?
  • How can the color schemes still be improved?
  • What do students need to experiment?

posted by springB @ 4:52 PM 0 comments

Tutorial Assignment - EDLF 702 - 2/11/08

Tutorial Assignment

What do you need to know to make effective webpages? This is a complex question, but it can be broken down into many smaller topics.

Create a 2-minute tutorial (in Camtasia) for one of the topics below. Apply the attributes of a good screen tutorial. For example, use the tutorial to show what changing the code looks like.

Tutorial Topics:

  1. Absolute vs. Relative Pathing
  2. Anatomy of a Link - dissect a URL, how links work in browsers, link hierarchy
  3. Audacity - how to record audio
  4. Camtasia Screencast - how to create one
  5. Color Contrast - importance of high contrast
  6. DIVs vs. SPANs
  7. Download Files Manually - e.g., how to 'save as' out of a browser
  8. Download + Install LAME Encoder
  9. Dreamweaver's CSS Editor
  10. Embed Flash files in a Webpage
  11. External CSS vs. Embedded CSS - include tag styles
  12. Google Docs - how to share files
  13. Google Page Creator - how to make a new page
  14. Local vs. Remote Websites - e.g., set them up in Dreamweaver
  15. Navigation - importance of menu placement and consistency
  16. Padding vs. Margins vs. Borders
  17. Titles - page titles vs. HTML titles and metatags
  18. Upload Files Manually - e.g., the Flash player skin or the Scripts from Dreamweaver

posted by springB @ 3:06 PM 0 comments

Friday, February 01, 2008

EDLF 702 - Homework - 2/4/08

Usability - Homework Assignment

Task #1: Revise Portfolio CSS with New Color Scheme

After selecting a color scheme, revise your portfolio's CSS to incorporate it. Use this task to re-familiarize yourself with your CSS code and test the usability of your chosen colors.
  • So that you have a backup, first save a copy of your portfolio's CSS (the external style sheet) to this filename: 701_css.css .
  • Then, simply edit the Hex colors in your portfolio's CSS file.
  • Test how the colors look with your specific content.
  • Try the new colors in different DIVs, in different locations and amounts.

Task #2: Usability Testing

Test the compatability of your website in different browsers. Does the website look/work the same cross-browser, cross-platform?

  • Test in different browsers: IE6, IE7, Firefox, Netscape, Safari, etc.
  • Test on different monitors: full-size computer screen, laptop, overhead projector
  • Make a list of irregularities (DIVs shift, etc.) that need fixing (used for later CSS assignments)

posted by springB @ 5:04 PM 0 comments

EDLF 702 - In-Class Assignment - 2/4/08

Usability - In-Class Assignment

Task #1: Usability Testing

Test your existing website for readability and legibility.
  • Is text and content easy to read?
  • Is the color scheme easy on the eyes?
  • Are content blocks (boxes) and design easy to see?
  • Is it well-spaced? Is it aligned?
  • Does it follow the 7 guidelines found in the readability article?

Task #2: Select New Color Schemes

Using an online color tool, select 3 color schemes that are readable and legible. Choose one with warm colors, one with cold colors, and one to use in your portfolio.

Notes for the Generator:

  • Check the 'Reduce to "safe" colors' box
  • Click the 'Enter RGB' link to test colors from your website.
  • HEX codes display in the right-side column of the Generator. (Easy to copy/paste.)

posted by springB @ 2:01 PM 0 comments