Interactive Client-Side Technologies

1. 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.

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 MMIS 656 / Interactive Client-Side Technologies

4. Dynamic HTML

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 MMIS 656 / Interactive Client-Side Technologies

9. Flash

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 MMIS 656 / Interactive Client-Side Technologies

18. DHTML Examples

19. Tutorial Examples • Shadow Text Style • Hot Air Balloon Animation • Drop Down Menu • Sliding Menu • Collapsible Menu • Dynamic Clipping MMIS 656 / Interactive Client-Side Technologies

20. Shadow Text Style Example Shadow Text Style Example

21. Hot Air Balloon Example Hot Air Balloon Example

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 MMIS 656 / Interactive Client-Side Technologies