Upload
harley
View
30
Download
1
Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
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.
MMIS 656 / Interactive Client-Side Technologies
2
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
3
Browser Support
JavaScript and DHTML are built-in to the browser directly
All others require a plug-in to function
Dynamic HTML
MMIS 656 / Interactive Client-Side Technologies
5
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
6
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
7
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
8
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
Flash
MMIS 656 / Interactive Client-Side Technologies
10
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
11
Bitmap vs. Vector Images
Bitmap Vector
MMIS 656 / Interactive Client-Side Technologies
12
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
13
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
14
Publishing the Flash Movie
A web page with Flash requires:A “SWF” fileAn HTML page
Use File > Publish instruct Flash to create the SWF and HTML files.
MMIS 656 / Interactive Client-Side Technologies
15
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
16
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
17
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
DHTML Examples
MMIS 656 / Interactive Client-Side Technologies
19
Tutorial Examples
Shadow Text Style Hot Air Balloon Animation Drop Down Menu Sliding Menu Collapsible Menu Dynamic Clipping
Shadow Text Style Example
Shadow Text Style Example
Hot Air Balloon Example
Hot Air Balloon Example
MMIS 656 / Interactive Client-Side Technologies
22
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
23
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
24
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
25
Dynamic Clipping
Control visible portion of content Use the clip property of the style object
MMIS 656 / Interactive Client-Side Technologies
26
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