Upload
nick-floro
View
1.143
Download
0
Embed Size (px)
DESCRIPTION
Join us for a look at what HTML5 is and how people use it today to deliver the next generation of learning and applications. What can you learn from the buzz and new tools appearing in the consumer and corporate environments, and how can you take advantage of them to help your users learn? You'll learn what you need to consider in designing content as well as get technical guidelines. Get an introduction to five hot features in HTML 5 that you can start using today, and prepare for developing with the new standards. You will learn about seven challenges in order to make sure your first project a success as well as whether to launch a native app or web app.
Citation preview
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