designing html5 mobile learning for browser, native, and hybrid app #mlearncon15
TRANSCRIPT
What can we do with
HTML5
html5demos.com
html5demos.com
html5demos.com
html5demos.com
Chrome
Create and deliver everywhere.
The Web Platform
WebApp
HTML Javascript CSS API’s
SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY
Internet Explorer 9BETA
Which browser’s support HTML 5?
Chrome Safari Firefox Opera
Big DataFocus on the Audience
Advanced Core Language
HTML 4
HTML 5 - Introduces New Elements
Flow chartAPI’smotion camera gps sensors
Canvas & SVG
Scalable Vector Graphics | SVG
Vector Graphics Scale & Look Great!
• 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
Quake II - Browser Only
WebGL 3D graphics
HTML 5 CanvasHTML 5 Audio
HTML 5 Web Sockets
HTML 5 Local Storage
Media
// HTML 5 makes <video> as easy as <img>// HTML 5 makes <video> as easy as <img>
<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
geolocation
// the geolocation api brings browser based location to your apps
// the geolocation api brings browser based location to your apps
You are entering research. Learn More>>
error handling
Responsive
screen size, platform and orientation
Responsive Design
Desktop
Tablet
Phone
Things to consider
Browser Support
Content
Technology
TimePerformance
Tools
Chrome Developer Tools
Design for Flexibility
Experiment
experiment
Resources
w3schools.com
html5rocks.com
lynda.com
CaniUse.com
CaniUse.com
tumultco.com
html5demos.com
jQuery.com
UXmag.com
SmashingMagazine.com
TypeKit.com
Go Play, Experiment, Dream
Apple iOS
What ideas will you apply from today?
Thank You
Nick [email protected]/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro