Web-based Application
Development
Lecture 10
February 9, 2006
Anita Raja
The Web Wizard’s Guide to
Web Design
Chapter 4
Gathering 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



JPG – Joint Photographics Experts Group



Non-photographic images
Images with lines and areas of solid color
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 Sites
http://www.tlc-systems.com/webtips.shtml
The Web Wizard’s Guide to
Web Design
Chapter 5
Gathering 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 …
Radio
Buttons
Option Menu
Field
Text Box
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/def
ault.aspx
The Web Wizard’s Guide to
Web Design
Chapter 6
Selecting Tools, Organizing Files,
and Creating Templates
Basic Tools


“There must be fifty ways to make a
Web page.”
Three basic types of tools

WYSIWYG


Code editors


FrontPage, Dreamweaver
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