Web-based Application Development

Lecture 10

February 9, 2006

Anita Raja

The Web Wizard’s Guide to Web Design

Chapter 4Gathering and Preparing Text,

Numbers, and Images

Listing the Elements After design then what? Content

Text Graphics Pictures Sounds Videos Logos

Listing the Elements

Remember your flow chart? List the elements on each page

Preparing Text Sources of text

Corporations: PR, Comm. Dept. Brochures, flyers, internal documents, press

releases, annual reports Printed documents (scan to retrieve text) Retrieve from existing Web pages

View source Copy from screen

Retrieve from person responsible

Preparing Text Editing

Word processing formats are not Web formats Can’t use same techniques for formatting Remove:

Carriage returns Tabs Columns Indents Justifications

Preparing Text

Editing (cont.) Place content in plain text form Eliminate unusual formatting or styles CHECK SPELLING AND GRAMMAR!

Writing for the Web

Reader’s expectations: Fast, convenient, interactive

Web writing tips: Keep it short, essentials only Pyramid structure

1st paragraph: who, what, where, why, when If they’re interested they’ll read on Tell more of the story in subsequent paragraphs

Writing for the Web

Web writing tips (cont.) Use subheadings that describe the content Use bullets to express separate but parallel ideas

Omit transitional phrases Conserves space Faster reading

Provide links to relevant materials not essential to your immediate purpose

Writing for the Web

Gettysburg Address Written to be … ? The Web isn’t just a magazine you read on a

screen Use methods appropriate to your medium

Preparing Numbers

A couple of standards: Spell out numbers up to nine Use numerals for 10 and above Use comma separators

When using spreadsheets: Keep labels short Eliminate blank rows and columns Save as tab-delimited text file

Preparing Numbers

Tables Reference, look-up

Graphs Trends over time, comparisons, distributions Save as images

Preparing Images

Photography Brightly lit subjects photograph better Indirect lighting Fill frame with subject Small groups Avoid distracting backgrounds Don’t photograph text Candid vs. posed

Preparing Images

Formats (see here also): GIF – Graphics Interchange Format

Non-photographic images Images with lines and areas of solid color

JPG – Joint Photographics Experts Group Photographs Blended images with complex colors and shapes

PNG – Portable Network Graphics

Preparing Images

Compression Smaller in size but … Does not contain full information on every pixel 320 x 240 pixel image

225,000 bytes uncompressed … 33 seconds over 56K 27,000 bytes compressed……. 3 seconds over 56K

Preparing Images

GIF “Lossless” for simple images

Line drawings Simple cartoons

Only stores 8 bits pixel (256 color) Uses LZW compression algorithm patented by

Unisys Technically, must pay royalties when using GIF

Preparing Images

JPEG “Lossy” technique Decompressed image not same as original Exploits human vision characteristics

Small changes in brightness more easily perceived than small changes in color

Can trade off size for image quality Stores 24 bits per pixel (16 million color)

Preparing Images

PNG Compresses better than GIF Lossless Supports 48-bit true color Format readable by all apps the same

Preparing Images

Copyright Identify author of every element used No copyright registration or notice is required Authors own their work automatically (Registration is a good idea for settling legal

claims) “Fair use” exception – students in class settings,

works in the public domain, others

Assignment Hands-On Exercise #2, p. 103 Reformat a magazine or newspaper article for Web

use Create the Web page and post it to your personal

Web space as “Lengel-Ch-4.html” Only the text is required but you may include

graphics, photos, etc. Turn in a hardcopy of the original article.

Resources

Web Content Accessibility Guidelines: http://www.w3.org/TR/WAI-WEBCONTENT/

What makes a great web site? http://www.webreference.com/greatsite.html

Art and the Zen of Web Siteshttp://www.tlc-systems.com/webtips.shtml

The Web Wizard’s Guide to Web Design

Chapter 5Gathering and Preparing

Multimedia Elements

Animation

Images that “move” Attracts viewer’s eye May be distracting rather than

enhancing

Animation

Creating Photoshop GIF Construction Set Apple Quicktime Player Pro Macromedia

Fireworks Flash Director

Animation

Basic technique Create/import images Arrange in sequence over time & space Determine size, speed, transitions Save in Web-compatible form

Animation

Displaying Not every browser supports every format Plug-ins may be required Some user may not be comfortable

downloading or installing Characteristics of target audience help

determine choices

Sound

Sound is continuous

Sound Problem: cannot express

continuous data in a digital medium

Instead – sample Take a reading every so

often Record the reading at that

point

Sound

Sample rates Telephone: 8 kHz CD: 44 kHz

The data ends up being a long series of numbers

44,000 per second for a CD sound track

Sound

Problem – Lots of numbers take lots of time

1 CD track contains 25MB 210,000,000 bits Over a 56K modem – about an hour! Solution: compress

Sound

Codec: compressor-decompressor Algorithm used to:

Compress sound files before they are sent to user Decompress them before they are played

Streaming Sound is transmitted to user continuously instead

of in a single file Requires special server and user plug-in

Sound

Streaming choices: RealAudio QuickTime Windows Media

Video

Frame rate TV: 30 frames per second (fps) Web: 12-15 fps Connection controls – cable/DSL vs. dial-up

Compression Frame of 320 x 240 pixels = 76,000 pixels 1,228,000 bits at 16 bits per pixel At 15 fps, one minute = 1,105,920,000 bits!

Preparing Forms and Databases

One-way communication with users Collect feedback Survey Request services

Form elements …

Field

Radio Buttons

Text Box

Option Menu

Assignment Hands-On Exercise #4, p. 122 Add an appropriate sound or video file

to the Web page you created in the previous assignment

Post the new page to your personal Web space as “Lengel-Ch-5.html”

Resources

Apple QuickTime:http://www.apple.com/quicktime/

RealNetworks: http://www.realnetworks.com/

Windows Media:http://www.microsoft.com/windows/windowsmedia/default.

aspx

The Web Wizard’s Guide to Web Design

Chapter 6Selecting Tools, Organizing Files,

and Creating Templates

Basic Tools

“There must be fifty ways to make a Web page.”

Three basic types of tools WYSIWYG

FrontPage, Dreamweaver Code editors

HomeSite, BBEdit “Save as HTML…”

Basic Tools

Using WORD … Limited design choices Very little control over HTML generated No ability to see underlying HTML “Save as … ” pitfall

Basic Tools

WYSIWYG Editors Pages look one way but the HTML acts another Images appear in the editor but … There are only links in the code Result: organization of files, images, etc. is

crucial

Directing the Action

So far the designer has acquired: Purpose of the site/page(s) Description of the target audience Sketch/prototype of the Web page List of functions for each page List of elements

Create an appropriate directory structure

Directing the Action Folders for:

HTML Images Videos Sounds

Pro: keeps things organized Con: must re-create same structure on

the Web server used

Templates, Tables, and Frames

Template – a page that contains all the common elements but none of the content.

Create using Table Frameset