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
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
Notepad++ -- Editor
http://jquerymobile.com/resources
Firefox, Firebug – copy edit code
http://www.w3resource.com/webdevelopment-tools/firebug-tutorials.php
youTube Video
Google Maps
PHP – Assessment Forms
processing
SQL – Assessment Presentation
http://www.youtube.com/
http://notepad-plus-plus.org/
https://maps.google.com/
http://www.w3schools.com/php/default.asp
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/Theme1/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.