PRE-WORKSHOP

Building Dynamic Interactive Web Pages with Dynamic HTML, JavaScript, XML and Flash (client-side techniques)

Paul Gobée
Leiden University Medical Center, the Netherlands

Abstract

Dynamic graphical interaction on a web page like changing of images or parts of images, dragging objects, smooth transitions from opaque to transparent, interactive sound or animation and all changes on a web page without reloading it, call for client-side techniques. Client-side means that the code runs on the user’s machine and not on a server.

The main available web-based client-side techniques are Flash, Dynamic HTML (DHTML) and Java-applets. XML can serve as client-side database. These techniques can also be applied in combination, interacting with one another. This workshop will demonstrate the vivid possibilities of client-side dynamic web page building, focussing mainly on DHTML.

           
DHTML is the semi-official umbrella name for the combined use of a number of W3C standards: HTML, the Document Object Model (DOM) and Cascading Style Sheets (CSS), all driven by a scripting language like JavaScript. DHTML is a layer on top of HTML allowing for interaction with and manipulation of all elements (like texts, images, animations, forms, etc) in a web page that has already been loaded and displayed. The fact that DHTML consists of W3C standards and the code is straightforward text, legible and editable with any text-editor without the need for a third-party tool, makes it favourable in the view of this workshop’s author, to commercial techniques with the code hidden in a proprietary file-format like FlashÒ.

           
Assembling web pages dynamically, contrary to hard-coding web pages, also allows for run-time page construction dependant on the actual situation (e.g the desired language or pedagogical context) and allows for separation of texts, styling and scripts and centralized storage of reusable elements, speeding up site development and facilitating maintenance.

The workshop will first give a broad overview of what is possible with client sided web programming (introduction). The main part will consist of learning the basics of DHTML with hands-on exercises illustrating general principles. Finally, some special issues will be touched to give a view on the powerful advanced capacities using client-side techniques.

 

Introduction (theory)

• Pros and cons of client-side versus server-side web techniques
• Available client-side techniques
• What is DHTML?
  
  

Learning basic DHTML (hands-on)

• CSS: applying styles on elements, classes, ID’s, inline or external, inheritance
• DOM: addressing, querying and manipulating of elements in a web page
• Events and event-driven programming
• Overview of main DHTML properties, methods and events

 

A number of special issues will be touched (theory)

• Combining DHTML and Flash
• Using XML as a web based client side database
• Dynamic run-time web-page construction
• The need for a programming layer between your page specific code and the browser specific input/output code to cope for different browsers, decrease vulnerability and increase production speed

 

Required prior knowledge:

One should be well acquainted with HTML and have at least a basic understanding of programming principles, preferably some experience with programming.

 

Benefit to participants:

You will:

 

Want more?….

If you want to take home a number of useful directly applicable techniques to get your program ‘alive’ quickly, also take the afternoon workshop of Ulrich Woerman on DHTML. This combines perfectly with this workshop.

 

Author

The workshop’s author has four years experience in the topics presented. A demo of his work can be viewed on www.medfac.leidenuniv.nl/cask [see section ‘demo’] (to be moved soon to the e-learning section of www.boerhaavenet.nl)

 

Paul Gobée

LUMC, dept. of Anatomy & Embryology

P.O. Box 9602

2300 RC Leiden

the Netherlands

Phone: +31 (0)71 5276673

Fax: +31 (0)71 5276680

mailto:o.p.gobee@lumc.nl

Website: http://www.medfac.leidenuniv.nl/cask