Developing Structured Interactive Multimedia Applications with HTML5

Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CTworkmanr1@southernct.edu

Ed Media World Conference on Educational Media and TechnologyDenver, Colorado Wednesday, June 27, 2012Room 3, 3:25 PM

Mobile App - Regicides in New Haven

http://mo113.com/x.htm

• Digital Story Telling• Applications• Mobil• Multimedia• Multiplatform• Location Aware (maps)• Built in Assessment

The Structured Stories

Early Modern English History

<iframe width="560" height="315" src="http://www.youtube.com/embed/v500uw9qnDU" frameborder="0" allowfullscreen></iframe>

Beheading Charles I - 1649

Multiplatform – jQuery Mobile

http://jquerymobile.com/demos/1.1.0/

Featured jQuery Mobile

http://jquerymobile.com/resources /

Stanford Mobile - Example Program

College mobile site - http://m.stanford.edu/

Firefox, Firebug > Open With Editor

Tools > Web Developer > Firebug > Open With Editor

Editor – Notepad++

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

Google Maps

<li><a href="http://goo.gl/maps/SO19" rel="external">John Dixwell (1607 – 18 March 1689)</a></li>

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

Assessment – Forms Processing

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/

Location-Aware Browsing

http://www.mozilla.org/en-US/firefox/geolocation/

Forms Processing <form action="processForm.php" method="post" data-transition="pop">

<div data-role="fieldcontain"> <label for="senderName">Your Name:</label> <input type="text" name="senderName" id="senderName"> </div>

... <input type="submit" name="answers" id="answers" value="Submit Answers">

HML5 Mobil Features

https://developers.google.com/mobile/build

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.