Creating Web Documents Week 5 continued Legal issues

Creating Web Documents: Week 5 continued Legal issues postings Metaphor Image maps and Image slicing Animation Shop Homework: Begin to plan project II

Legal/Ethical issues • Postings – Note: this is required! It is also required to respond and post again to this Forum.

Review: HTML • Details matter – names of files • simplify names: no punctuation, no spaces, all lower -case • Need to 'close' quotation marks, html tags • Proof-read: spelling does matter. • Legibility of text – against background image, against color. – Large[r] size font does help

File management • References in the html file (href, src) can be – external: • http: // – internal (on the same computer) • simplest is in same folder: just file name: src="bird. gif" • in subfolder of this folder: src="birds/bird. gif" • in parent folder: src=". . /bird. gif" • in subfolder of parent folder: src=". . /pictures/bird. gif"

Metaphor • What is a metaphor? • Metaphors for web site are terms that convey what the experience is supposed to simulate or include. – We ‘visit’ a web site. This is a metaphor. – Commerce sites speak of the ‘shopping cart’. – ‘Chat room’ conveys the idea that the participants are ‘in a room’ together.

Metaphors, cont. • For your projects (and your work), you may make use of existing metaphors or develop your own to guide your work and, possibly, show to your audience. • Features that make ‘visiting’ a web site more involving are – – Metaphor (idea plus the content and links) Image maps and image slicing Animation Sound

Remember • You, the creator/designer/author, make the Web site • The user/client/visitor exerts some control, but all based on what you have established.

Image map exercise Complete if not finished last class • Download an image • Use Paint Shop Pro to get coordinates of 3 distinct areas • Also use Paint Shop Pro to copy and paste those same areas to make 3 (new) image files to be used • Create html file with image map and original plus 3 new images.

Image slicing • Image. Ready in Photo. Shop has facility to create ‘image slicing’. This divides an image into parts according to a grid. The parts are made the contents of cells in a table. Certain of the cells are links

clickable clickable Image. Ready produces 16 image files + html code with a table with a tags in table cells

Animation • An animated gif is a sequence of images that is shown in succession. • Paint Shop Pro and others produce animated gifs from a sequence of images you have produced. – Also facility for producing extra images for transitions between your original images, such as fading. Also text over the image.

Animation exercise • Create or acquire 4 images. • Start Animation Shop (from Paint Shop Pro) • Use wizard. Stick with default settings. Include 4 images. • Make animation. Save. Notice time required for downloading.

Project II • Pick your topic and pick your team. – Need to get my approval. – Need to announce on Course. Info ASAP. – Due 3/24 (after Spring vacation). • Must have clearly stated purpose and audience. • Technical features (must serve purpose of project) – a scanned photograph you make or digital photograph you take or original drawing (or significantly modified graphic) – Must include original animation – Must include image map or image sliced set of links. – At least 3 HTML files (3 pages). – Table and frames. – (Sound would be nice but not required. )

Topics • Ethical/Legal issue • Topic for another course • Web site you are already working on or want to work on. • ? ? Take the time to finalize your decision on project.

Review of required postings • Report on viewing site from different platforms • Legal/ethical issue: define issue AND give your reasoned position • Response to someone else's posting • Description of your Project II: include description of audience and purpose