developing structured interactive multimedia applications with html5 robert workman, hrvoje podnar...
TRANSCRIPT
Developing Structured Interactive Multimedia Applications with HTML5
Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, [email protected]
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.