1. Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT workmanr1@southernct.edu Ed Media World Conference on Educational Media and Technology Denver, Colorado Wednesday, June 27, 2012 Room 3, 3:25 PM

2. Mobile App - Regicides in New Haven http://mo113.com/x.htm Digital Story Telling Applications Mobil Multimedia Multiplatform Location Aware (maps) Built in Assessment

3. The Structured Stories

4. Early Modern English History

5. Beheading Charles I - 1649

6. Multiplatform – jQuery Mobile http://jquerymobile.com/demos/1.1.0/

7. Featured jQuery Mobile http://jquerymobile.com/resourceshttp://jquerymobile.com/resources /

8. Stanford Mobile - Example Program College mobile site - http://m.stanford.edu/http://m.stanford.edu/

9. Firefox, Firebug > Open With Editor Tools > Web Developer > Firebug > Open With Editor

10. Editor – Notepad++ http://notepad-plus-plus.org/ Notepad++: a free source code editor which supports several programming languages running under the MS Windows environment

11. Google Maps John Dixwell (1607 – 18 March 1689)

12. Summary HTML5 http://www.w3schools.com/html5 jQuery Mobile – Multiplatform applications http://jquerymobile.com/resources Notepad++ -- Editor http://notepad-plus-plus.org/ Firefox, Firebug – copy edit code http://www.w3resource.com/web- development-tools/firebug-tutorials.php youTube Video http://www.youtube.com/ Google Maps https://maps.google.com/ PHP – Assessment Forms processing http://www.w3schools.com/php/default.asp SQL – Assessment Presentation http://www.w3schools.com/sql/default.asp

13. Assessment – Forms Processing

14. 1916 http://www.annefrank.org/en/Subsites/Timeline/#!/en/Subsites/Timeline/World-War-One-1914-1918/Theme- 1/1916/A-carrier-pigeon-with-a-camera-for-photo-reconnaissance-The-time-between-shots-can-be-set/

15. Location-Aware Browsing http://www.mozilla.org/en-US/firefox/geolocation/

16. Forms Processing Your Name:...

17. HML5 Mobil Features https://developers.google.com/mobile/build

18. Abstract HTML5 along with CSS and JavaScript (HTML5) has become the interactive multimedia application development tool of choice. A problem with HTML5 is that applications can quickly become very complex. Our approach to getting started with HTML5 has been to develop a series of structured digital story telling applications that can be created with a limited subset of HTML5. The story telling structure we use consists of timelines, maps, or hierarchical structures such as family trees, all with clickable buttons. Our HTML5 templates contain code for defining and locating buttons; controlling button events such as onmouseover and onmouseout, playing video and audio files, and displaying images. This presentation will be illustrated with examples of our applications working on desktops and mobile phones. The code used to create the applications and our experience teaching others will be discussed.