designing & developing learning using html5 @ training 2014 #trg14

HTML5Nick [email protected]

Twitter.com/NickFloro

Designing & Developing Learning Using

Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

HTML5 02/05/14 1 of 114

Goals

goals


HTML5 02/05/14 2 of 114

share


HTML5 02/05/14 3 of 114

Experiment

experiment & play


HTML5 02/05/14 4 of 114

RapidTools LMS desktopFlash

Development PathsTraining 2014 Nick Floro | [email protected] trainingmagnetwork.com

HTML5 02/05/14 5 of 114

RapidTools

HTMLTools HTML5

LMS

mobile

desktopFlash

Development PathsTraining 2014 Nick Floro | [email protected] trainingmagnetwork.com

HTML5 02/05/14 6 of 114

What can we do with

HTML5


HTML5 02/05/14 7 of 114

html5demos.com


HTML5 02/05/14 8 of 114

html5demos.com


HTML5 02/05/14 9 of 114

html5demos.com


HTML5 02/05/14 10 of 114

html5demos.com


HTML5 02/05/14 11 of 114

Chrome


HTML5 02/05/14 12 of 114

Create and deliver everywhere.Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

HTML5 02/05/14 13 of 114

How did we get here?1992 to 2014


HTML5 02/05/14 14 of 114

SEMANTICS

CSS3

3D, GRAPHICS & EFFECTS

DEVICE ACCESS

PERFORMANCE & INTEGRATION

MULTIMEDIA

OFFLINE & STORAGECONNECTIVITY


HTML5 02/05/14 15 of 114

HTML5

Javascript CSS API’s


HTML5 02/05/14 16 of 114

Create a Road Map


HTML5 02/05/14 17 of 114

Create a Road Map

Content Development Delivery

tools devicesdesign


HTML5 02/05/14 18 of 114

Next Generation Mobile Using Browsers

iOSAndroid Windows Phone


HTML5 02/05/14 19 of 114


HTML5 02/05/14 20 of 114


HTML5 02/05/14 21 of 114


HTML5 02/05/14 22 of 114


HTML5 02/05/14 23 of 114

Which browser’s support HTML 5?

Chrome Safari Firefox Opera


HTML5 02/05/14 24 of 114

Internet Explorer 9 BETA

Which browser’s support HTML 5?

Chrome Safari Firefox Opera


HTML5 02/05/14 25 of 114

HTML 5in the works...


HTML5 02/05/14 26 of 114

Advanced Core Language


HTML5 02/05/14 27 of 114


HTML5 02/05/14 28 of 114

HTML 4Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

HTML5 02/05/14 29 of 114

HTML 5 - Introduces New ElementsTraining 2014 Nick Floro | [email protected] trainingmagnetwork.com

HTML5 02/05/14 30 of 114

Improve Web Apps


HTML5 02/05/14 31 of 114


HTML5 02/05/14 32 of 114

chalk.37signals.com


HTML5 02/05/14 33 of 114

http://www.e-learningguru.com





HTML5 02/05/14 34 of 114

Improve Handling of Errors


HTML5 02/05/14 35 of 114


HTML5 02/05/14 36 of 114

Drawing on the Web

Flash


HTML5 02/05/14 37 of 114

Canvas & SVG


HTML5 02/05/14 38 of 114


HTML5 02/05/14 39 of 114


HTML5 02/05/14 40 of 114

Scalable Vector Graphics | SVGTraining 2014 Nick Floro | [email protected] trainingmagnetwork.com

HTML5 02/05/14 41 of 114

Vector Graphics Scale & Look Great!Training 2014 Nick Floro | [email protected] trainingmagnetwork.com

HTML5 02/05/14 42 of 114


HTML5 02/05/14 43 of 114

• First Person Gifter (FF)

• Population Demo (FF)

• German Election Atlas (Safari)

• Mozilla Download Center (FF)

Demo’s


HTML5 02/05/14 44 of 114

http://htmlfive.appspot.com/static/gifter.html




http://vis.uell.net/gsvg/poppyr.html
























http://www.mozilla.com/en-US/firefox/stats/




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?


HTML5 02/05/14 45 of 114

HTML 5 Support

£ £ £ £ £canvas / svg

video

geolocation

app cache

database

workers


HTML5 02/05/14 46 of 114

Quake II - Browser Only


HTML5 02/05/14 47 of 114

Quake II - Browser Only

WebGL 3D graphics

HTML 5 CanvasHTML 5 Audio

HTML 5 Web Sockets

HTML 5 Local Storage


HTML5 02/05/14 48 of 114

Video


HTML5 02/05/14 49 of 114

Capture to delivery and beyondThe Production Process

Authoring DeliveryVideo / Audio Assets Compression


HTML5 02/05/14 50 of 114

Selecting a SizeGuidelines for Compression

320 x 240

512 x 384

640 x 480


HTML5 02/05/14 51 of 114


HTML5 02/05/14 52 of 114


HTML5 02/05/14 53 of 114


HTML5 02/05/14 54 of 114

HTML 5 OptionsVideo Compression

H264 | MPEG 4Apple | Microsoft

WebMOgg Theora

Google


HTML5 02/05/14 55 of 114

Tips & Hints• Video – Frame Rate: 15 fps– Data Rate Target 800-1200 kbs

• Audio– 16bit / 22khz / Mono / 64 kbs

• Delivery– Flash: H264 – HTML5: H264

Guidelines for Compression


HTML5 02/05/14 56 of 114

jwplayer.com


HTML5 02/05/14 57 of 114





Smart PhonesTraining 2014 Nick Floro | [email protected] trainingmagnetwork.com

HTML5 02/05/14 58 of 114

brightcove.com


HTML5 02/05/14 59 of 114





HTML 5 Support

£ £ £ £ ££ £ £ £ £

canvas / svg

video

geolocation

app cache

database

workers


HTML5 02/05/14 60 of 114

geolocation


HTML5 02/05/14 61 of 114


HTML5 02/05/14 62 of 114

You are entering research. Learn More>>


HTML5 02/05/14 63 of 114


HTML5 02/05/14 64 of 114


HTML5 02/05/14 65 of 114


HTML5 02/05/14 66 of 114

// the geolocation apibrings browser basedlocation to your apps


HTML5 02/05/14 67 of 114

www.seeknspell.com


HTML5 02/05/14 68 of 114

http://www.twitter.com




A C

R

O

P www.seeknspell.com

T


HTML5 02/05/14 69 of 114





C

R

O

P

A

www.seeknspell.com

T


HTML5 02/05/14 70 of 114





HTML 5 Support

£ £ £ £ ££ £ £ £ ££ £ £ £ £

canvas / svg

video

geolocation

app cache

database

workers


HTML5 02/05/14 71 of 114

app cache& database


HTML5 02/05/14 72 of 114


HTML5 02/05/14 73 of 114

// database and app cache store user data and app resources locally


HTML5 02/05/14 74 of 114


HTML5 02/05/14 75 of 114

HTML 5 Support

£ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ £

canvas / svg

video

geolocation

app cache

database

workers


HTML5 02/05/14 76 of 114

web workers


HTML5 02/05/14 77 of 114

HTML 5More Power


HTML5 02/05/14 78 of 114

// web workers defines an API for runningbackground scripts


HTML5 02/05/14 79 of 114

Bad Primes (FF 3.5)

Good Primes (FF 3.5)

Motion Tracker (FF)

Demo’sTraining 2014 Nick Floro | [email protected] trainingmagnetwork.com

HTML5 02/05/14 80 of 114

http://htmlfive.appspot.com/static/primes-bad.html




http://htmlfive.appspot.com/static/primes-good.html




http://htmlfive.appspot.com/static/tracker1.html




HTML 5 Support

£ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ £

canvas / svg

video

geolocation

app cache

database

workers


HTML5 02/05/14 81 of 114

TestingTraining 2014 Nick Floro | [email protected] trainingmagnetwork.com

HTML5 02/05/14 82 of 114

Test on Mobile− iOS 4.x - 6.x

− Android 2.x - 4.x

− Windows 8

− Tablet vs Phablet vs Phone

− Portrait vs Landscape

Test on Windows 8, 7, Vista, XP

- Internet Explorer 6, 7, 8, 9, 10

- Firefox 15-21 +

- Chrome 15 - 19 +

Test on OS X− Safari 4, 5+

− Firefox 15-21 +

− Chrome 20 - 26 +

Testing CodeTraining 2014 Nick Floro | [email protected] trainingmagnetwork.com

HTML5 02/05/14 83 of 114

Tools


HTML5 02/05/14 84 of 114

adobe.com


HTML5 02/05/14 85 of 114





Responsive DesignTraining 2014 Nick Floro | [email protected] trainingmagnetwork.com

HTML5 02/05/14 86 of 114

getskeleton.com


HTML5 02/05/14 87 of 114

http://getskeleton.com




twitter.github.io/bootstrap/


HTML5 02/05/14 88 of 114

http://twitter.github.io/bootstrap/




foundation.zurb.com


HTML5 02/05/14 89 of 114

http://foundation.zurb.com/




phonegap.com


HTML5 02/05/14 90 of 114





Design for Flexibility


HTML5 02/05/14 91 of 114


HTML5 02/05/14 92 of 114


HTML5 02/05/14 93 of 114


HTML5 02/05/14 94 of 114


HTML5 02/05/14 95 of 114


HTML5 02/05/14 96 of 114


HTML5 02/05/14 97 of 114


HTML5 02/05/14 98 of 114


HTML5 02/05/14 99 of 114


HTML5 02/05/14 100 of 114


HTML5 02/05/14 101 of 114

Resources


HTML5 02/05/14 102 of 114

w3schools.com


HTML5 02/05/14 103 of 114

html5rocks.com


HTML5 02/05/14 104 of 114

lynda.com


HTML5 02/05/14 105 of 114

Caniuse.com


HTML5 02/05/14 106 of 114


HTML5 02/05/14 107 of 114

html5demos.com


HTML5 02/05/14 108 of 114

www.sencha.com


HTML5 02/05/14 109 of 114

www.css3.info


HTML5 02/05/14 110 of 114

www.uxmag.com


HTML5 02/05/14 111 of 114

typekit.com


HTML5 02/05/14 112 of 114

Go Play, Experiment, Dream

Apple iOS


HTML5 02/05/14 113 of 114

Q & A

Nick [email protected]

twitter.com/NickFloro

Download the Presentation at:http://www.slideshare.net/nickfloro


HTML5 02/05/14 114 of 114

designing & developing learning using html5 @ training 2014 #trg14

Education