Post on 09-May-2015
description
transcript
HTML5Nick@sealworks.comTwitter.com/NickFlorosealworks.com
Understanding
How it Will Improve Our Learning
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 1 of 129
App
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 2 of 129
The Web Platform
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 3 of 129
Web App
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 4 of 129
WebApp
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 5 of 129
WebApp
HTML Javascript CSS API’s
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 6 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 7 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 8 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 9 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 10 of 129
Pulse for Mobile
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 11 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 12 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 13 of 129
What can we do with
HTML5
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 14 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 15 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 16 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 17 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 18 of 129
HTML5 = JS + CSS3
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 19 of 129
SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 20 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 21 of 129
The Web Platform is Accelerating
2002WebKit
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 22 of 129
Next Generation Mobile Using Webkit
RIM BlackberryiOSAndroid
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 23 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 24 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 25 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 26 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 27 of 129
Graphics Location Storage Speed
Solving Developer ChallengesLearning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 28 of 129
Which browser’s support HTML 5?
Chrome Safari Firefox Opera
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 29 of 129
Internet Explorer 9 BETA
Which browser’s support HTML 5?
Chrome Safari Firefox Opera
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 30 of 129
HTML 5in the works...
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 31 of 129
Advanced Core Language
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 32 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 33 of 129
HTML 4Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 34 of 129
HTML 5 - Introduces New ElementsLearning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 35 of 129
Improve Web Apps
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 36 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 37 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 38 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 39 of 129
Flow chart
Compatibility
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 40 of 129
Flow chart
Replaces:XHTML 1.0 & Dom2htmlwith new
API’s
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 41 of 129
Improve Handling of Errors
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 42 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 43 of 129
Drawing on the Web
Flash
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 44 of 129
Canvas & SVG
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 45 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 46 of 129
Scalable Vector Graphics | SVGLearning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 47 of 129
Vector Graphics Scale & Look Great!Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 48 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 49 of 129
• Mozilla Download Center (FF)
• First Person Gifter (FF)
• Population Demo (FF)
• German Election Atlas (Safari)
Demo’s
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 50 of 129
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?
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 51 of 129
HTML 5 Support
£ £ £ £canvas / svg
video
geolocation
app cache
database
workers
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 52 of 129
Quake II - Browser Only
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 53 of 129
Quake II - Browser Only
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 54 of 129
Quake II - Browser Only
WebGL 3D graphics
HTML 5 CanvasHTML 5 Audio
HTML 5 Web Sockets
HTML 5 Local Storage
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 55 of 129
Video
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 56 of 129
Capture to delivery and beyondThe Production Process
Authoring DeliveryVideo / Audio Assets Compression
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 57 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 58 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 59 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 60 of 129
HTML 5 OptionsVideo Compression
FlashH264Adobe
H264 | MPEG 4Apple | Microsoft
WebMOgg Theora
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 61 of 129
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
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 62 of 129
www.longtailvideo.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 63 of 129
Easy Access to VideoFlip $100 to $200
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 64 of 129
brightcove.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 65 of 129
HTML 5 Support
£ £ £ ££ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 66 of 129
geolocation
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 67 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 68 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 69 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 70 of 129
// the geolocation apibrings browser basedlocation to your apps
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 71 of 129
A C
R
O
P Twww.seeknspell.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 72 of 129
HTML 5 Support
£ £ £ ££ £ £ ££ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
iPhone
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 73 of 129
app cache& database
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 74 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 75 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 76 of 129
HTML 5 Support
£ £ £ ££ £ £ ££ £ £ ££ £ £ ££ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
iPhone
mobile
mobile
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 77 of 129
web workers
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 78 of 129
HTML 5More Power
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 79 of 129
// web workers defines an API for runningbackground scripts
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 80 of 129
Bad Primes (FF 3.5)
Good Primes (FF 3.5)
Motion Tracker (FF)
Demo’sLearning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 81 of 129
HTML 5 Support
£ £ £ ££ £ £ ££ £ £ ££ £ £ ££ £ £ ££ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
iPhone
mobile
mobile
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 82 of 129
FormsCSS 3
Effects/Transitions
JavaScript
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 83 of 129
Test on Windows 7, Vista, XP• Internet Explorer 6, 7, 8, 9• Firefox 3.5, 3.6, 4.0 +• Chrome 5 - 17
Test on OS X− Safari 4− Firefox 3.5, 3.6, 4.0 +11− Chrome 5 - 17
Test Mobile− iOS 4 & 5− Android 2.x-4.x− Blackberry, Windows 7 Phone
Test for UsabilityLearning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 84 of 129
Google Analytics
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 85 of 129
Google Analytics
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 86 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 87 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 88 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 89 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 90 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 91 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 92 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 93 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 94 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 95 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 96 of 129
Android Xoom1280 x 720
HTC Incredible800 x 480iPad
1024 x 768
iPhone 4960 x 640
iPhone480 x 320
Droid854 x 480
Form FactorsLearning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 97 of 129
Design for Flexibility
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 98 of 129
Thank You
Nick Florosealworks interactive studios
nick@sealworks.comwww.sealworks.com
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 99 of 129
Resources
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 100 of 129
html5rocks.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 101 of 129
www.thinkvitamin.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 102 of 129
http://www.caniuse.com/
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 103 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 104 of 129
labs.adobe.com/technologies/wallaby/
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 105 of 129
tumultco.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 106 of 129
animatable.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 107 of 129
html5demos.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 108 of 129
www.sencha.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 109 of 129
www.css3.info
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 110 of 129
www.uxmag.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 111 of 129
diveintohtml5.info
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 112 of 129
CSS3 for Web DesignersDan Cederholm | A Book Apart
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 113 of 129
www.gamesalad.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 114 of 129
Go Play, Experiment, Dream
AppleiOS
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 115 of 129
Search Flickr.com for iPad UI
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 116 of 129
www.smashingmagazine.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 117 of 129
www.longtailvideo.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 118 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 119 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 120 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 121 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 122 of 129
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 123 of 129
www.launchcycle.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 124 of 129
Pictures
Video
Blog
Audio
3D Models
Multiplayer Environment
ePortfolios
Course Management System
Micro-blogging
ExploreLearning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 125 of 129
Thank You
Nick Florosealworks interactive studios
nick@sealworks.comwww.sealworks.com
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 126 of 129
www.twitter.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 127 of 129
www.lrnchat.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 128 of 129
www.TED.com
Learning Solutions : Nick@sealworks.com Intro to HTML5
LaunchCycle.com - The simple way to manage projects. 03/27/12 129 of 129