designing html5 mobile learning for browser, native, and hybrid app #mlearncon15
TRANSCRIPT
SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY
• First Person Gifter (FF)
• Population Demo (FF)
• German Election Atlas (Safari)
Demo’s
SVG -> High level • Import/Export • Easy UIs • Interactive • Medium Animation • Tree of objects
Canvas -> Low level • No mouse interaction • High Animation • JS Centric • More Bookkeeping • Pixels
When Canvas or SVG?
Quake II - Browser Only
WebGL 3D graphics
HTML 5 CanvasHTML 5 Audio
HTML 5 Web Sockets
HTML 5 Local Storage
<video controls><source src="foo.webm" type="video/ogg"><source src="foo.mp4">Your browser does not support the video element.</video>
var v = document.getElementsByTagName("video")[0];v.play();
Embedding Video
Capture to delivery and beyondThe Production Process
Authoring DeliveryVideo / Audio Assets Compression
WebMGoogle
H264 | MPEG 4Apple | Microsoft
mp4
Formats to choose from:Select a format for delivery
Win
H264
Tips & Hints
Compression– Frame Rate: 15 fps– Key Frames: 4 x fps– Average Data Rate Target 400-1200 kbs– 2 Pass Variable Bit Rate
MPEG4: H264
Flash: H264
Guidelines for Compression
Thank You
Nick [email protected]/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro