Transcript typography and images

TYPOGRAPHY AND IMAGES
Multimedia and Interactivity Elements
 to learn how multimedia and interactive elements can
enhance your Web pages.
 Multimedia elements, including audio and video, add interest
and excitement to your site, whereas interactive elements
allow you to maintain a positive connection with your target
audience.
Multimedia Issues
 An entry or splash page is one common application of Web
page multimedia elements;
 popular browsers support the plug-ins needed to view and
play most multimedia elements
 drawbacks
 download time for visitors using slower connections
 the need for browser plug-ins
 the use of substantial bandwidth.
 might not be accessible for visitors with disabilities
 exceeds the expertise and budget of many designers
general guidelines for using multimedia
 Give site visitors a choice of high- or low-bandwidth content.
 List any necessary plug-ins and provide links to locations




where they can be acquired.
Provide text equivalents for all multimedia elements.
Offer low-bandwidth alternatives such as audio instead of
video.
Do not, for instance, waste bandwidth on an uninteresting
video clip with little action, when an audio clip alone will
convey the real content of value.
When developing original multimedia, break audio or video
files into short segments to create smaller files.
Animation
 Web page animation can be used effectively to catch
 a visitor’s attention
 demonstrate a simple process
 illustrate change over time
 Be selective when choosing ready-to-use animated elements
 Overused, cutesy elements will make your Web site look
amateurish
 Web page animation can take many forms, for example,
animated GIFs, Flash movies, avatars, and gadgets.
Animated GIFs
 An animated GIF is a single file in which separate images




within multiple animation frames are stored.
Displaying these animation frames in sequence over a specified
time interval, usually stated in frames-per-second or fps, gives
the illusion of movement or animation
Animated GIFs, like standard GIFs, include up to 256 colors
and support transparency.
popular browsers support animated GIFs without requiring a
browser plug-in.
Easy GIF Animator® and GIF Construction Set Professional,
Photoshop CS3
Guidelines
 Identify in sequential order the GIF images you want to




animate. Tweening- in which you only create a beginning
and an ending animation frame; the software creates all the
animation frames in between.
Specify the time interval between frames, typically in seconds
or fractions of a second.
Specify if animation should loop or repeat.
Set background transparency, if desired.
Test the animation and make color, transparency, timing, and
looping adjustments as necessary.
optimization
 Plan ahead to determine the essential animation effects you
want to achieve to limit the number of animation frames.
 Limit image colors for each frame to the same or similar
palette of colors selected from the available 256 colors.
 Crop unwanted pixels from the image.
 Use GIF animation or image editing software to optimize the
file for size and quality when saving or exporting it.
Adobe Flash CS3 and Microsoft
Silverlight
 powerful, effi cient software tool for creating sophisticated
Flash movies for use on the Web.
 Flash movies have
 wide browser
 operating system support
 can be used to create an entire Web site or to generate quick-
loading, scalable vector animations, which adjust to different
browser sizes without degrading quality
 Flash movies simulate motion using a fast-paced presentation of
changing static images.
 The changing images are recorded in frames along a timeline
Adobe Flash CS3 and Microsoft
Silverlight
 With frame-by-frame animation, the designer must change the
image manually
 With animation with tweening, the image is not changed manually
 Guidelines:
 Determine whether you have the necessary expertise and resources
to create or maintain a Web site containing Flash movies.
 Use Flash movies only if they contribute to your Web site’s purpose
 Indicate on your Web site the Flash player plug-in version needed for
a visitor to experience the Flash components optimally.
 If your site has a Flash introduction — a Flash movie entry or splash
page — provide an option to skip the Flash movie and view your
site’s home page.
 Microsoft Silverlight® is a relatively new browser plug-in
technology designed to play the multimedia content found in
rich interactive applications.
 Rich interactive applications (RIAs) are Web-based computer
applications that contain interactive multimedia elements.
Avatars
 gamers create avatars — alternative personas or virtual identities
for MMOGs(massively multiplayer online games ) or 3D virtual
worlds
 Sears and Lands End, provide visitors with avatars, called virtual
models, which are used to “try on” clothing before purchasing it
 avatars are used to welcome site visitors, provide a “virtual
salesperson” to promote products and services, personalize
customer support responses, direct visitors to specifi c Web site
pages, provide instructions for Web page tutorials, and so forth.
 SitePal or Media Semantics provide low-cost tools you can use to
quickly create an avatar and then copy and paste the HTML code
for the avatar to your site’s pages
Gadgets
 Web site gadgets are small code objects that provide dynamic
Web content: clocks, weather reports, breaking news
headlines, and so forth.
 To add a gadget, you can copy and paste HTML code to your
page from a source such as Google Gadgets
Audio and Video Elements
Audio Elements
 providing a Web page link to download an audio file
 embedding the audio file in the page’s HTML coding
Uses
 entertain visitors with background music
 deliver a personal message
 sell a product or service with testimonials
 can create your own audio files using RealNetworks’
RealProducer® or Audacity® (freeware) audio recording and
editing software
 Streaming audio- RealAudio, Windows Media, or QuickTime
EDITING AUDIO FILES
 help you make better choices when selecting audio files for
your Web site
 Guidelines:
 Keep recorded audio messages or music clips short
 Select a mono audio channel to reduce file size
 Use an 8 kHz sampling rate for voice-only audio and 22 kHz
sampling rate for music audio.
 Use an 8-bit audio fi le for voice and 16-bit audio fi le for music
Video Elements
 Downloadable or streaming video can create a powerful




impact
consider first simpler alternatives to video, such as animation
or audio
can download royalty-free video files from the Web
purchase them from an online store or on CD/DVD
create your own video files with a good quality digital
camcorder and video editing software, such as Adobe
Premiere Pro CS3®, Pinnacle Studio Ultimate version 11®,
or Windows Movie Maker® , installed with the Windows
Vista operating system.
EDITING VIDEO FILES
 frame size, frame rate, bit depth, compression scheme, and overall




video quality
The common frame sizes are 160 120 or 240 180 pixels; the frame
rate for Web video ranges from 10 to 15 frames per second (fps).
As with audio, the greater the number of bits or bit depth, the
bigger the file size. If you decrease a video segment from 16-bit to
8-bit, the file size will decrease significantly
Experiment with different settings to find a balance that is
acceptable.
You can define the general quality level of your video, which
automatically adjusts the compression. If you define the quality
between low and medium, you will achieve a good balance
between sufficient compression and video quality that is suitable
for the Web.
Interactive Elements
 JavaScript, Applets, and Servlets - creating interactive




elements, such as rollover buttons or games
contact pages and Web-based forms
allow visitors to submit information to a site publisher using
e-mail or directly to a database
Blogging is a powerful tool to promote interactivity
e-commerce sites encourage communication and promote
interactivity by using live chat
 To create attractive, usable Web-based forms, you should:
 Require that visitors complete fields containing essential







information before the form can be submitted.
Make text boxes large enough to hold the approximate number of
characters for a typical response.
Use check boxes to allow users to submit more than one response
to a query.
Provide space for additional comments or requests for further
information.
Use color to highlight and segment information.
Include a reset button so that the user can clear the form quickly
and reenter the information if necessary.
Add a button that allows the visitor to confirm the information he
or she has entered in the form.
Send an e-mail confirmation notice assuring the user that the form
data was received.
JavaScript, Applets, and Servlets
 JavaScript - used to create customized interactive Web pages
 inserted directly into a page’s HTML code
 Applets are small programs that are designed to execute in a
browser and are sent to a browser as a separate file together
with the related Web page
 a servlet executes from the server instead of executing
within the visitor’s browser.
Blogs
 Sites such as Blogger, WordPress, and Typepad provide tools




you can use to quickly create a blog hosted on your own
server or on the tool provider’s server.
entering an e-mail address and password,
selecting a layout template for your blog,
specifying where the blog is to be hosted.
You are then immediately ready to start posting to the new
blog
Live Chat
 Live chat allows visitors to ask questions about products or
services in real time.
 Web sites that offer live chat generally allow visitors to click
a button to activate the live chat feature and open a window
in which a text message can be typed.
 answered by in-house chat agents or outsourced chat agents
located in a call center.
 Businesses, such as Provide Support, CustomerReach,
BoldChat, and LivePerson offer chat software that can be
installed on your own servers or hosted live chat solutions.