ELDC2012-Hi5

Views:
 
     
 

Presentation Description

Hi-5! Leveraging HTML5’s Power for Gaming/Simulation in Online Learning

Comments

Presentation Transcript

Hi-5! Leveraging HTML5’s Power for Gaming/Simulation in Online Learning:

Hi-5! Leveraging HTML5’s Power for Gaming/Simulation in Online Learning Michael Sheyahshe Senior Associate | Software Developer ICF International

Contact Us:

Contact Us eLearnDevTech blog – http://elearndevtech.blogspot.com ICF eLearnDev Conference website http://www.icfi.com/devcon Twitter @mas_edev, @eLearnDevGeek, @damoEdev, @gardelearndev, @ICFI

Introduction:

Introduction HTML5 (re)introduction What’s in it for you? My credentials…

Obligatory Background:

Obligatory Background Information Technology 15+ years @ academic level Specializing in: Animation Digital Media 3D Modeling / Games / Sims / etc. Current position ICF Software Developer Academic stuff Master of Fine Arts Bachelor of Arts – Film Research authority Childhood = pop culture junkie Comic books PLUS, media that celebrates notion of ‘superhero’: 1950s TV - Lone Ranger & Tonto 1960s TV - Batman 1970s TV – Six Million Dollar Man | Bionic Woman | Wonder Woman Japanese TV - Ultraman Author of book on pop culture (specifically on comic books)

Presentation Overview:

Presentation Overview Section 1: HTML5 Bits & Pieces Elements & code Section 2: Interactivity Going beyond ‘page turners’ Section 3: Mobility Online examples of how others are utilizing HTML5

Caveat :

Caveat Flash bash? No, of course not See also: Obligatory Background (above)

Section 1: HTML5 Bits & Pieces:

Section 1: HTML5 Bits & Pieces …not to be confused with ‘Baits & Pieces’

S1: HTML5 Bits & Pieces - Overview:

S1: HTML5 Bits & Pieces - Overview HTML5 elements Example code Why it matters

S1: HTML5 Bits & Pieces - Elements:

S1: HTML5 Bits & Pieces - Elements <section> & <figure> <audio> & <video> <source> <embed> Basically, external plug-in <DnD> <canvas>

S1: Code - <audio>:

S1: Code - <audio> <audio controls="controls"> <source src="myAudio.ogg" type="audio/ogg" /> <source src="myAudio.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> <video> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video>

S1: Code - <DnD>:

S1: Code - <DnD> <img id="myImg" src="myImg.png" draggable="true" ondragstart="drag(event)" /> Need JS to make it work: <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.preventDefault(); } </script>

S1: Code - <canvas>:

S1: Code - <canvas> <canvas id="myCanvas" width="200" height="100“ style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> Needs JS to work – circle ex.: <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(70,18,15,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); </script>

Canvas / SVG (?) Comparison:

Canvas SVG Resolution dependent No support for event handlers Poor text rendering capabilities Save the image as .png or .jpg Best suited for graphic-intensive games where many objects are redrawn frequently Resolution independent Support for event handlers Best suited for  applications  with large rendering areas (Google Maps) Slow rendering if complex (anything that uses the DOM a lot will be slow) Not suited for game applications 13 Canvas / SVG (?) Comparison

S1: Coding Reminders:

S1: Coding Reminders Code Reuse Think of code ‘objects’ as reusable containers Comment code for future use/users/coders

S1: HTML5 Bits & Pieces - Wrap-up:

S1: HTML5 Bits & Pieces - Wrap-up Important elements: A/V DnD Canvas ! Has great potential 2D/3D Questions? RaphaelJS

Section 2: Interactivity:

Section 2: Interactivity Power to the People, HTML5-style…

S2: Interactivity - Overview:

S2: Interactivity - Overview HTML5…Why? Keep participant(s) interest level up by intrigue Engaged = busy Allow ‘drill down’ for more info

S2: Interactivity - Examples:

S2: Interactivity - Examples Example 1: Static data vs. Customized

S2: Interactivity - Examples:

S2: Interactivity - Examples Example 2: Static objects vs. DnD

S2: Interactivity - Examples:

S2: Interactivity - Examples Example 3: Static image vs. 3D rotation

S2: Interactivity - Wrap-up:

S2: Interactivity - Wrap-up Intrigue, engage, & drill down Edit via text editor Questions

Section 3: HTML5 Mobility:

Section 3: HTML5 Mobility …catch it, if you can…

S3: Mobility - Overview:

S3: Mobility - Overview Think beyond desktop Leverage the ‘mobile’ of ‘mobile device’ GPS/location Camera Devices dilemma Different configuration Different allowables Target device specialties Ex. PNGs on iPad

S3: Mobility - Examples:

S3: Mobility - Examples Example 1: Sencha Touch http://www.sencha.com/products/touch/ What makes it cool? Extensive examples Based on Ext JS, jQTouch and Raphaël How can I use it? Download appropriate license and test

S3: Mobility - Examples:

S3: Mobility - Examples Example 2: j Query Mobile http://jquerymobile.com/ What makes it cool? Free/open source Extensive community/examples How can I use it? Download & play

S3: Mobility - Examples:

S3: Mobility - Examples Example 3: appMobi http://www.appmobi.com/ What makes it cool? Free w/ many other services XDK opens in browser Based on JQMobi How can I use it? Create account Download Play

S3: Mobility - Examples:

S3: Mobility - Examples Example 4 : PhoneGap http://phonegap.com/ What makes it cool? Many aforementioned use, built on, or utilize Extensive platform Author native applications How can I use it? See image Need native IDEs

S3: Mobility - Wrap-up:

S3: Mobility - Wrap-up Think beyond desktop Many options Consider time, resources, & learning curve Device differences & specialties Questions

function Summary() {important points}:

function Summary() {important points} S1 - audio, video, DnD, & canvas S2 - intrigue, engage, & drill down S3 - many choices for mobile dev

Questions?:

Questions?

Contact Us:

Contact Us eLearnDevTech blog – http://elearndevtech.blogspot.com ICF eLearnDev Conference website http://www.icfi.com/devcon Twitter @mas_edev, @eLearnDevGeek, @damoEdev, @gardelearndev, @ICFI

authorStream Live Help