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