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

3. MMIS 656 / Interactive Client-Side Technologies2 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.

4. MMIS 656 / Interactive Client-Side Technologies3 Browser Support JavaScript and DHTML are built-in to the browser directly All others require a plug-in to function

5. Dynamic HTML

6. MMIS 656 / Interactive Client-Side Technologies5 Dynamic HTML Combination of four standards:  HTML 4.0 (or XHTML 1.0)  JavaScript  Cascading Style Sheets (CSS)  Document Object Model (DOM)

7. MMIS 656 / Interactive Client-Side Technologies6 A Review of CSS2 The position property The visibility property The overflow property The clip property Add JavaScript to create Dynamic HTML

8. MMIS 656 / Interactive Client-Side Technologies7 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

9. MMIS 656 / Interactive Client-Side Technologies8 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

10. Flash

11. MMIS 656 / Interactive Client-Side Technologies10 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

12. MMIS 656 / Interactive Client-Side Technologies11 Bitmap vs. Vector Images Bitmap Vector

13. MMIS 656 / Interactive Client-Side Technologies12 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.

14. MMIS 656 / Interactive Client-Side Technologies13 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.

15. MMIS 656 / Interactive Client-Side Technologies14 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.

16. MMIS 656 / Interactive Client-Side Technologies15 Working with Published Files It’s easiest to use Dreamweaver or GoLive Editing by hand, look at everything between the and 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

17. MMIS 656 / Interactive Client-Side Technologies16 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.

18. MMIS 656 / Interactive Client-Side Technologies17 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

19. DHTML Examples

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

21. Shadow Text Style Example

22. Hot Air Balloon Example

23. MMIS 656 / Interactive Client-Side Technologies22 Hiding Content Off-Screen: A Sliding Menu 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()

24. MMIS 656 / Interactive Client-Side Technologies23 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

25. MMIS 656 / Interactive Client-Side Technologies24 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

26. MMIS 656 / Interactive Client-Side Technologies25 Dynamic Clipping Control visible portion of content Use the clip property of the style object

27. MMIS 656 / Interactive Client-Side Technologies26 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