Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar...
-
Upload
myra-pearson -
Category
Documents
-
view
216 -
download
0
Transcript of Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar...
![Page 1: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/1.jpg)
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
![Page 2: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/2.jpg)
Mobile App - Regicides in New Haven
http://mo113.com/x.htm
• Digital Story Telling• Applications• Mobil• Multimedia• Multiplatform• Location Aware (maps)• Built in Assessment
![Page 3: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/3.jpg)
The Structured Stories
![Page 4: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/4.jpg)
Early Modern English History
<iframe width="560" height="315" src="http://www.youtube.com/embed/v500uw9qnDU" frameborder="0" allowfullscreen></iframe>
![Page 5: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/5.jpg)
Beheading Charles I - 1649
![Page 6: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/6.jpg)
Multiplatform – jQuery Mobile
http://jquerymobile.com/demos/1.1.0/
![Page 7: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/7.jpg)
Featured jQuery Mobile
http://jquerymobile.com/resources /
![Page 8: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/8.jpg)
Stanford Mobile - Example Program
College mobile site - http://m.stanford.edu/
![Page 9: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/9.jpg)
Firefox, Firebug > Open With Editor
Tools > Web Developer > Firebug > Open With Editor
![Page 10: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/10.jpg)
Editor – Notepad++
http://notepad-plus-plus.org/ Notepad++: a free source code editor which supports several programming languages running under the MS Windows environment
![Page 11: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/11.jpg)
Google Maps
<li><a href="http://goo.gl/maps/SO19" rel="external">John Dixwell (1607 – 18 March 1689)</a></li>
![Page 12: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/12.jpg)
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
![Page 13: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/13.jpg)
Assessment – Forms Processing
![Page 14: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/14.jpg)
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/
![Page 15: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/15.jpg)
Location-Aware Browsing
http://www.mozilla.org/en-US/firefox/geolocation/
![Page 16: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/16.jpg)
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">
![Page 17: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/17.jpg)
HML5 Mobil Features
https://developers.google.com/mobile/build
![Page 18: Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.](https://reader035.fdocuments.in/reader035/viewer/2022081520/5697bfc11a28abf838ca48bf/html5/thumbnails/18.jpg)
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.