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
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 2 of 114
Experiment
experiment & play
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
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
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 7 of 114
html5demos.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 8 of 114
html5demos.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 9 of 114
html5demos.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 10 of 114
html5demos.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 11 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
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 14 of 114
SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 15 of 114
HTML5
Javascript CSS API’s
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 16 of 114
Create a Road Map
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 17 of 114
Create a Road Map
Content Development Delivery
tools devicesdesign
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 18 of 114
Next Generation Mobile Using Browsers
iOSAndroid Windows Phone
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 19 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 20 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 21 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 22 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 23 of 114
Which browser’s support HTML 5?
Chrome Safari Firefox Opera
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 24 of 114
Internet Explorer 9 BETA
Which browser’s support HTML 5?
Chrome Safari Firefox Opera
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 25 of 114
HTML 5in the works...
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 26 of 114
Advanced Core Language
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 27 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
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
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 31 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 32 of 114
chalk.37signals.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 33 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 34 of 114
Improve Handling of Errors
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 35 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 36 of 114
Drawing on the Web
Flash
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 37 of 114
Canvas & SVG
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 38 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 39 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
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
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 43 of 114
• First Person Gifter (FF)
• Population Demo (FF)
• German Election Atlas (Safari)
• Mozilla Download Center (FF)
Demo’s
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
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?
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 45 of 114
HTML 5 Support
£ £ £ £ £canvas / svg
video
geolocation
app cache
database
workers
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 46 of 114
Quake II - Browser Only
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
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
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 48 of 114
Capture to delivery and beyondThe Production Process
Authoring DeliveryVideo / Audio Assets Compression
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 50 of 114
Selecting a SizeGuidelines for Compression
320 x 240
512 x 384
640 x 480
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 51 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 52 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 53 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 54 of 114
HTML 5 OptionsVideo Compression
H264 | MPEG 4Apple | Microsoft
WebMOgg Theora
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
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
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 56 of 114
jwplayer.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.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
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 59 of 114
HTML 5 Support
£ £ £ £ ££ £ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 60 of 114
geolocation
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 61 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 62 of 114
You are entering research. Learn More>>
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 63 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 64 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 65 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 66 of 114
// the geolocation apibrings browser basedlocation to your apps
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 67 of 114
www.seeknspell.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 68 of 114
A C
R
O
P www.seeknspell.com
T
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 69 of 114
C
R
O
P
A
www.seeknspell.com
T
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 70 of 114
HTML 5 Support
£ £ £ £ ££ £ £ £ ££ £ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 71 of 114
app cache& database
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 72 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 73 of 114
// database and app cache store user data and app resources locally
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 74 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 75 of 114
HTML 5 Support
£ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 76 of 114
web workers
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 77 of 114
HTML 5More Power
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 78 of 114
// web workers defines an API for runningbackground scripts
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
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
HTML 5 Support
£ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
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
adobe.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.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
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 87 of 114
twitter.github.io/bootstrap/
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 88 of 114
foundation.zurb.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 89 of 114
phonegap.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 90 of 114
Design for Flexibility
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 91 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 92 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 93 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 94 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 95 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 96 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 97 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 98 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 99 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 100 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 101 of 114
Resources
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 102 of 114
w3schools.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 103 of 114
html5rocks.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 104 of 114
lynda.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 105 of 114
Caniuse.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 106 of 114
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 107 of 114
html5demos.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 108 of 114
www.sencha.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 109 of 114
www.css3.info
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 110 of 114
www.uxmag.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 111 of 114
typekit.com
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 112 of 114
Go Play, Experiment, Dream
Apple iOS
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 113 of 114
Q & A
Nick [email protected]
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Training 2014 Nick Floro | [email protected] trainingmagnetwork.com
HTML5 02/05/14 114 of 114