Web Page Refinements

| previous tutorial | ACG home | Instructor home | Class home | List of tutorials | this is the last tutorial |

Before beginning the project

• If you are working in the ACG Lab click to read these important notes before you start the tutorial. This section of the directions contains information that pertains specifically to the way the ACG Lab operates. It may not apply if you work on the project elsewhere.

Tutorial Goals

However, these pages are also a useful basis for building up your online portfolio. As such, you may want to give some thought to how you can help your audience find and enjoy your work.

In this final handout, you will find some basic suggestions for improving the usability of your web site. Following the links provided will lead to additional insights.

Suggested Improvements

1. Make sure your page really works
   • Web browsers try their best to display web pages, even when the markup is incorrect. However, their guesses may differ, or yield a complete scramble.
   • Make sure to test your work on a variety of platforms (operating system and web browser combinations).
   • Use one of the automated verification services to ensure that what you created is correct to begin with. This eliminates browser guesswork (though it does not eliminate browser bugs--so extensive testing is still necessary).
     • The World Wide Web Consortium (W3C, the main standards body for the Web) has a list of its validators as part of its QA Toolbox.
2. State technical requirements
   • Web browser with direct support for GIF and JPEG (otherwise pictures-as-links won't work)
   • Should work on any platform, but you may want to mention which operating systems and browsers you used for testing.
   • <A HREF="http://quicktime.apple.com/">requires QuickTime plugin</A>
   • <A HREF="http://www.macromedia.com/shockwave/download/">requires Shockwave (Director and Flash) plugins</A>
3. Make the site friendly to the disabled
   • See the Center for Applied Special Technology (CAST) site for Universal Design for Learning research.
   • The Cynthia Says portal provides auromated compliance verification.
   • The W3C publishes Web Content Accessibility Guidelines.
   • The U.S. Federal law requiring web accessibility is section 508 of the Rehabilitation Act.
   • Check your page in black and white. See WWW Colors and Black & White Monitors, by Jason Harrison.
     • This is an easily fixed but often overlooked issue--not everyone has a color display, and not everyone sees colors.
     • In the example below, the highlighting is clearly visible in color--but the one on the second word nearly disappears on black & white monitors.
       • This is a paragraph with two highlighted words: this is the first and this is the second one.
     • For a more precise simulation of color blindness, Vischeck has a free service at http://www.vischeck.com/vischeck/vischeckURL.php, showing you just what your site looks like to users with various types of color vision impairments.
4. Explain operation of less-familiar items
   • Zooming in/out of Flash map
     • Bringing up the contextual menu on the picture (Control-click on Macs, right-button-click on PCs) allows you to zoom in and out.
     • Zooming-in automatically switches to the grabber hand cursor--allowing you to slide the image up/down, left/right.
     • 'Show All' resets the picture to the initial view. 'High Quality' turns anti-aliasing on/off.
   • QuickTime movie controller
   • QT VR panning and zooming
5. State file sizes
   • In the Finder, select the file icon for your distribution file (e.g., the edited and compressed JPEG file, not the original TIFF scan)
   • File-->Get Info
   • Use the size number in bytes--the size in K is influenced by the way the disk is organized (allocation block size).
6. Add return links
   • Return to top within page
     • Add a label to the heading for your table of contents:
       <A NAME="toc">Table of Contents</A>
     • Add a return link at the end of each section of your page:
       <A HREF="#toc">return to top</A>
   • Return to homepage from other pages you created (important if viewer jumped directly to the secondary page from another site)
     • Add a link with URL equal to the filename of your homepage (assumes that all of your pages are kept in the same folder/directory):
       <A HREF="sample_s.html">return to my homepage</A>
   • Consider embedding return links in the Flash map, Director animation, and QuickTime VR as well. The ACG advanced class in Multimedia authoring is a good place to find out how.
7. Include document URL in body of page
   • important if someone obtains hardcopy of your page, and is interested enough to want to see the original on the web.
   • The standard format encloses the URL in angle brackets. Use named entities:
     • < is represented by &lt;
     • > is represented by &gt;
8. Revision date
   • Show with frequent updates that your site is worth a repeat visit.
   • Use the standard ISO 8601 format, such as '2000-12-10' (avoids ambiguity between US and European formats). For further details, see Markus Kuhn's paper on date/time standardization.
9. Contact info
   • If you create a link, make sure to also repeat the address in the visible text so it won't be lost in hardcopy
     • <A HREF="mailto:sample@simple.com">sample@simple.com</A>
   • Note that nowadays a 'mailto' link is no longer advisable, since it exposes your email address to spammers (senders of unsolicited mail).
10. Copyright issues (USA)
    • Regardless of notices or registration, you automatically own the copyright to anything you create.
      • Conversely, anything you might consider copying is very likely the copyrighted property of someone else.
      • For a straightforward discussion of the basics, see Brad Templeton's essay 10 Big Myths about copyright explained
    • Copyright notices, registration--to be able to realistically defend your rights in court.
      • Forms and further info at the U.S. Copyright Office.
    • Screen all your postings for infringing materials.
      • Add a disclaimer, with contact info for sending notices of infringement.
11. Promoting site
    • META tags in HEAD container
      • Author, keywords, description, publisher
      • See these handouts' source code for examples (use the browser's View-->Page Source command).
    • Search engine submissions
      • further info at SelfPromotion.com URL Registration ShareService
      • Check compliance with search engine rules using VSE Be Found
    • Domain name registration
      • further info at the InterNIC site of the U.S. Department of Commerce.

| return to top |

Notes

HTML Entities

• Entities are a way to encode text characters which would otherwise not be allowed in standard HTML.
• See the W3C Advanced HTML Guide at http://www.w3.org/MarkUp/Guide/Advanced.html for info on encoding additional characters.

| return |

Information specific to the ACG Lab

• The web server that hosted your pages during the course of the semester is located behind a firewall. In other words, nobody can see your work from the Internet.
  • Since everything we did complies with the prevailing standards on the Web, you can transfer your files to any Internet-accessible host computer. Some changes may be required to conform with the policies of the specific site.
  • Registered students can have their web pages hosted by Fullerton College. Find out more at http://fcnet.fullcoll.edu/. This link will take you to the FCNet support page. Important: posting web pages on the FCNet servers is not required or in any way supported by the instructor of this class.

return

| previous tutorial | return to top | this is the last tutorial |

This page's markup is valid.

This page's stylesheet is valid.

This page is accessible to the disabled.

Created 2000-12-05. Last modified 2005-11-04. This document originally at <http://www.sanedraw.com/LEARN/OVERVIEW/OV160MAC/INDEX.HTM> Copyright 2005 by Sandro Corsi.