Transcript Web Site Design and Planning

Interactive Client-Side
Technologies
MMIS 656 Web Design Technologies
Acknowledgements:
Estrella, S. (2003). The Web Wizard’s Guide to DHTML
and CSS. Boston: Addison Wesley.
Client-Side Interaction




Dynamic HTML
JavaScript
Flash and Shockwave
Java Applet
 All of these allow for interactivity of the
web page with the user directly without
a message to the server.
MMIS 656 / Interactive Client-Side Technologies
2
Browser Support


JavaScript and DHTML are built-in to
the browser directly
All others require a plug-in to function
MMIS 656 / Interactive Client-Side Technologies
3
Dynamic HTML
Dynamic HTML

Combination of four standards:




HTML 4.0 (or XHTML 1.0)
JavaScript
Cascading Style Sheets (CSS)
Document Object Model (DOM)
MMIS 656 / Interactive Client-Side Technologies
5
A Review of CSS2





The position property
The visibility property
The overflow property
The clip property
Add JavaScript to create Dynamic
HTML
MMIS 656 / Interactive Client-Side Technologies
6
The Document Object Model




Internal road map of
objects on a web
page
Hierarchical model
of web browser
objects
Old DOMs for
Netscape, Microsoft
New browsers use
the standard DOM
by W3C
MMIS 656 / Interactive Client-Side Technologies
7
Animating with DHTML





Create the HTML
Absolute position your objects
Be aware of z-index stacking
Call an init() function in the onload
handler
Store generic functions in an external
library
MMIS 656 / Interactive Client-Side Technologies
8
Flash
What is Flash?





A tool for enriching a Web site or web
page
Vector-based program
Rich animation with smaller file sizes
Easier than other tools for creating
interactive content
Integrates other media like sound and
bitmap images
MMIS 656 / Interactive Client-Side Technologies
10
Bitmap vs. Vector Images
Bitmap
MMIS 656 / Interactive Client-Side Technologies
Vector
11
A Tour of the Flash Program



The Stage is where the movie is
composed.
The Timeline defines what
happens/changes over time.
Frames display the screen at a particular
point in time.
MMIS 656 / Interactive Client-Side Technologies
12
Frames and the Timeline


Add a keyframe wherever you want a
change to occur in the movie.
Standard frames fill the space between
keyframes and add time to the movie.
MMIS 656 / Interactive Client-Side Technologies
13
Publishing the Flash Movie


A web page with Flash requires:
A “SWF” file
An HTML page
Use File > Publish instruct Flash to
create the SWF and HTML files.
MMIS 656 / Interactive Client-Side Technologies
14
Working with Published Files




It’s easiest to use Dreamweaver or GoLive
Editing by hand, look at everything between
the <OBJECT> and </OBJECT> tags.
Test in a web browser is most accurate test.
Use an FTP program to post the Flash SWF
and HTML files to the web
MMIS 656 / Interactive Client-Side Technologies
15
Flash over Dynamic HTML






Flash gives more control over animations.
Flash animations look the same on all
browsers and platforms.
Flash files embed any fonts needed for
display of highly stylized text.
Flash works better with sound and video.
Flash is a little easier to learn than DHTML
There are versions of the Flash plug-in for
obsolete browsers.
MMIS 656 / Interactive Client-Side Technologies
16
Dynamic HTML over Flash

Works better with the browser’s back button.

DHTML text can be searched and selected.
DHTML requires only a text editor.
Flash files require a plug-in.
DHTML integrates well with HTML.
DHTML is often better for navigation.
DHTML works anywhere on the page





MMIS 656 / Interactive Client-Side Technologies
17
DHTML Examples
Tutorial Examples






Shadow Text Style
Hot Air Balloon Animation
Drop Down Menu
Sliding Menu
Collapsible Menu
Dynamic Clipping
MMIS 656 / Interactive Client-Side Technologies
19
Shadow Text Style Example
Shadow Text Style Example
Hot Air Balloon Example
Hot Air Balloon Example
Hiding Content Off-Screen:
A Sliding Menu






Create two side-by-side divs
The left div contains links
The right div opens and closes the menu
Absolute position both divs to hide left div
off-screen
Add scripting to move right div on screen
Enhance with setCursor() and
setBackground()
MMIS 656 / Interactive Client-Side Technologies
22
Drop-Down Menus





Simulate GUI Menus
Absolute position limits placement to
top
Use relative position for topmost div
Drop-down menu in an invisible nested
div
Enhance with color and cursor
changes
MMIS 656 / Interactive Client-Side Technologies
23
Collapsible Menus
•
•
•
•
•
Simulate hierachical file trees
Set display to none to hide menu
Set display to block to show menu
Enhance with text node substitution
Enhance with cursor and color
changes
MMIS 656 / Interactive Client-Side Technologies
24
Dynamic Clipping


Control visible portion of content
Use the clip property of the style object
MMIS 656 / Interactive Client-Side Technologies
25
Summary



Interactive pages can be downloaded
to the client efficiently using DHTML
and Flash
DHTML can be tedious to implement,
but works without a plug-in
Flash is easier to do animation (esp.
with sound) but requires a plug-in
MMIS 656 / Interactive Client-Side Technologies
26