Web-based Application Development Lecture 10 February 9, 2006 Anita Raja.
Post on 21-Dec-2015
215 Views
Preview:
Transcript
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
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 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
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 …
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
top related