NPL REPORT DEM-ES 002 Software Support for Metrology – Good Practice Guide No. 14 Guidance and Tools for Interactive Web Pages S C Gardner April 2005 National Physical Laboratory | Hampton Road | Teddington | Middlesex | United Kingdom | TW11 0LW Switchboard 020 8977 3222 | NPL Helpline 020 8943 6880 | Fax 020 8943 6458 | www.npl.co.uk Software Support for Metrology Good Practice Guide No 14 Guidance and Tools for Interactive Web Pages S C Gardner Mathematics and Scientific Computing Group April 2005 ABSTRACT This guide describes good practice in the use of web technologies for the development of interactive web pages. The emphasis is on technologies appropriate for presentation of scientific content, including mathematics and data visualisation, and on technologies that make content easier to navigate on the web. © Crown copyright 2005 Reproduced by permission of the Controller of HMSO ISSN 1744–0475 National Physical Laboratory Hampton Road, Teddington, Middlesex, United Kingdom. TW11 0LW Extracts from this report may be reproduced provided the source is acknowledged and the extract is not taken out of context. We gratefully acknowledge the financial support of the UK Department of Trade and Industry (National Measurement System Policy Unit) Approved on behalf of the Managing Director, NPL, by Jonathan Williams, Knowledge Leader of the Electrical and Software team Contents 1. Introduction..................................................................................................................1 1.1 SSfM Web Site Project Description.......................................................................1 1.2 Scope – What are Interactive Web Pages? ...........................................................1 1.3 Servers and Clients .................................................................................................2 1.4 Browsers...................................................................................................................3 2. INTERACTIVE WEB PAGES – THE TECHNOLOGY.........................................4 2.1 Markup Languages.................................................................................................4 2.2 Generic Markup Formats.......................................................................................4 2.3 XML .........................................................................................................................4 2.4 Hypertext – HTML and XHTML..........................................................................5 2.4.1 The HTML language.................................................................................................5 2.4.2 XHTML ....................................................................................................................6 2.4.3 Hypertext and Hyperlinks .........................................................................................6 2.5 Cascading Style Sheets (CSS).................................................................................7 2.6 Multimedia.............................................................................................................11 2.6.1 Images .....................................................................................................................11 2.6.2 Vector Graphics ......................................................................................................12 2.6.3 Animation................................................................................................................12 2.6.4 Sound ......................................................................................................................14 2.6.5 Movies and Video ...................................................................................................14 2.6.6 Good Practice..........................................................................................................15 2.7 Client-Side Scripting.............................................................................................16 2.7.1 JavaScript................................................................................................................17 2.7.2 VBScript - Visual Basic Script ...............................................................................18 2.7.3 Good Practice..........................................................................................................19 2.8 Server-Side Scripting............................................................................................19 2.8.1 The Common Gateway Interface - CGI ..................................................................19 2.8.2 PHP .........................................................................................................................20 2.8.3 Server-Side JavaScript ............................................................................................20 2.8.4 Good Practice..........................................................................................................21 2.9 Java.........................................................................................................................21 2.10 XUL ........................................................................................................................23 2.11 XBL ........................................................................................................................24 2.12 XAML ....................................................................................................................25 2.13 Mathematical Symbols on Web Pages.................................................................25 2.14 VRML ....................................................................................................................26 2.15 X3D.........................................................................................................................27 2.16 U3D.........................................................................................................................27 2.17 The Document Object Model (DOM)..................................................................28 2.18 XSLT ......................................................................................................................28 2.19 ActiveX...................................................................................................................30 3. INTERACTIVE WEB PAGES - APPLICATIONS................................................31 i 3.1 Data Transformations...........................................................................................31 3.2 Charts and Graphs................................................................................................31 3.3 Interactive Models.................................................................................................32 3.4 Interactive Control and Data Acquisition Systems............................................33 3.5 Database Queries...................................................................................................33 3.6 Miscellaneous Web Page Enhancements.............................................................33 3.6.1 Site Navigation........................................................................................................34 3.6.2 Image galleries ........................................................................................................34 3.6.3 Image Maps.............................................................................................................34 4. TOOLS FOR BUILDING INTERACTIVE WEB PAGES....................................35 4.1 Hypertext – HTML ...............................................................................................35 4.1.1 HTML Code Editors ...............................................................................................35 4.1.2 WYSIWYG Editors ................................................................................................35 4.1.3 Hybrid Editors.........................................................................................................36 4.1.4 Document Conversion.............................................................................................36 4.2 Multimedia.............................................................................................................37 4.2.1 Images and Animation ............................................................................................37 4.2.2 Sound ......................................................................................................................37 4.2.3 Movies.....................................................................................................................37 4.3 Client Side Scripting .............................................................................................38 4.4 Server Side Scripting ............................................................................................38 4.5 Java.........................................................................................................................38 4.6 VRML ....................................................................................................................39 4.7 ActiveX...................................................................................................................39 5. THE FUTURE............................................................................................................40 5.1 Synchronised Multimedia -