Designing & Developing Learning Using HTML5 @ Training 2014 #trg14

HTML5Nick FloroNick@sealworks.com

Twitter.com/NickFloro

Designing & Developing Learning Using

Training 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com

HTML5 02/05/14 1 of 114

HTML5 02/05/14 2 of 114

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 | nick@sealworks.com trainingmagnetwork.com

HTML5 02/05/14 5 of 114

RapidTools

HTMLTools HTML5

mobile

desktopFlash

Development PathsTraining 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com

HTML5 02/05/14 6 of 114

What can we do with

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 | nick@sealworks.com 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

3D, GRAPHICS & EFFECTS

DEVICE ACCESS

PERFORMANCE & INTEGRATION

MULTIMEDIA

OFFLINE & STORAGECONNECTIVITY

HTML5 02/05/14 15 of 114

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 | nick@sealworks.com trainingmagnetwork.com

HTML5 02/05/14 29 of 114

HTML 5 - Introduces New ElementsTraining 2014 Nick Floro | nick@sealworks.com 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

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

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 | nick@sealworks.com trainingmagnetwork.com

HTML5 02/05/14 41 of 114

Vector Graphics Scale & Look Great!Training 2014 Nick Floro | nick@sealworks.com 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

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

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

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 | nick@sealworks.com trainingmagnetwork.com

HTML5 02/05/14 58 of 114

brightcove.com

HTML5 02/05/14 59 of 114

HTML 5 Support

£ £ £ £ ££ £ £ £ £

canvas / svg

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

P www.seeknspell.com

HTML5 02/05/14 69 of 114

www.seeknspell.com

HTML5 02/05/14 70 of 114

HTML 5 Support

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

canvas / svg

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

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 | nick@sealworks.com trainingmagnetwork.com

HTML5 02/05/14 80 of 114

HTML 5 Support

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

canvas / svg

geolocation

app cache

database

workers

HTML5 02/05/14 81 of 114

TestingTraining 2014 Nick Floro | nick@sealworks.com 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 | nick@sealworks.com trainingmagnetwork.com

HTML5 02/05/14 83 of 114

HTML5 02/05/14 84 of 114

adobe.com

HTML5 02/05/14 85 of 114

Responsive DesignTraining 2014 Nick Floro | nick@sealworks.com trainingmagnetwork.com

HTML5 02/05/14 86 of 114

getskeleton.com

HTML5 02/05/14 87 of 114

twitter.github.io/bootstrap/

HTML5 02/05/14 88 of 114

foundation.zurb.com

HTML5 02/05/14 89 of 114

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

Nick Florosealworks.comnick@sealworks.com

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

Webpage Designing With HTML5

Codemotion 2013 - Designing complex applications using html5 and knockoutjs

Developing a practical HTML5 magazine workflow

Intel® HTML5 Tools for developing mobile applicationsjuniorsoft.lescigales.org/docs/html5-tools.pdf · Intel® HTML5 Tools for developing mobile applications HTML5 is the new HTML

Designing and Developing for Accessibility

Designing & Developing Interactive Instructional Concepts

Designing and developing digital courses

Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa

Designing & developing iPhone apps

HTML5 and Designing a Rich Internet Experience

Developing a HTML5 Client With Lightswitch

WebNet Conference 2012 - Designing complex applications using html5 and knockoutjs

Chapter 11 Designing and Developing Resources: …eduscapes.com/treehouses/TN11multimedia.pdfChapter 11 - Designing and Developing Resources: Multimedia Materials 385 Chapter 11 Designing

GameLab - Developing Crossplatform Games in HTML5 and Java

GNOME.Asia 2015 : Developing HTML5 Applications for GNOME

Intel® HTML5 Tools for developing mobile applicationsocw.upj.ac.id/files/...INF207-Handout-Pemrogaman-Aplikasi-Mobile.pdf · Intel® HTML5 Tools for developing mobile applications

SPCA2013 - Developing HTML5 Solutions on Office 365

Developing and deploying a website with html5

Chapter 9 - Designing and Developing Resources: Projected ... · Chapter 9 - Designing and Developing Resources: Projected Materials. 305. Chapter 9. Designing and Developing Resources:

Developing and Designing a Lesson