HTML5 Beyond the Hype
-
Upload
nick-floro -
Category
Education
-
view
2.405 -
download
1
Transcript of HTML5 Beyond the Hype
HTML5Nick [email protected]
Twitter.com/NickFloro
Beyond the Hype
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 1 of 201
Goals
goals
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 2 of 201
share
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 3 of 201
Experiment
experiment
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 4 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 5 of 201
Resources
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 6 of 201
Stats
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 7 of 201
7 billion people on earth.
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 8 of 201
2.2 billion Internet usersDevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 9 of 201
1.5 billion TV’sDevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 10 of 201
Currently over 6.2 billion cellphone subscriptions.
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 11 of 201
There are only 3.5 billion toothbrushes.
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 12 of 201
1992 to 2002DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 13 of 201
2002 to 2012DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 14 of 201
The Web Platform is AcceleratingDevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 15 of 201
Graphics Location Storage Speed
Solving Developer ChallengesDevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 16 of 201
What can we do with
HTML5
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 17 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 18 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 19 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 20 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 21 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 22 of 201
Create and deliver everywhere.DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 23 of 201
The Web Platform
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 24 of 201
Web App
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 25 of 201
WebApp
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 26 of 201
WebApp
HTML Javascript CSS API’s
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 27 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 28 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 29 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 30 of 201
Pulse Mobile App
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 31 of 201
Pulse Mobile App
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 32 of 201
Chrome.AngryBirds.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 33 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 34 of 201
SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 35 of 201
HTML5 = JS + CSS3
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 36 of 201
Next Generation Mobile Using Browsers
RIM Blackberry
iOSAndroid Windows Phone
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 37 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 38 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 39 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 40 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 41 of 201
Which browser’s support HTML 5?
Chrome Safari Firefox Opera
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 42 of 201
Internet Explorer 9 BETA
Which browser’s support HTML 5?
Chrome Safari Firefox Opera
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 43 of 201
Internet Explorer 6-8 28% No
Google Chrome 24% Yes
Mozilla Firefox 23% Yes
Internet Explorer 9 9% Yes
Apple Safari 4% Yes
iPhone / iPad 4% Yes
Opera 2% Yes
Google Android 2% Yes
Other 4% No
Market Share HTML5 Support
Browser Stats 2012DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 44 of 201
HTML 5in the works...
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 45 of 201
Advanced Core Language
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 46 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 47 of 201
HTML 4DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 48 of 201
HTML 5 - Introduces New ElementsDevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 49 of 201
Improve Web Apps
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 50 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 51 of 201
chalk.37signals.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 52 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 53 of 201
Flow chart
Compatibility
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 54 of 201
Flow chart
Replaces:XHTML 1.0 & Dom2htmlwith new
API’s
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 55 of 201
Improve Handling of Errors
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 56 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 57 of 201
Focus on the
Audience
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 58 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 59 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 60 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 61 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 62 of 201
Drawing on the Web
Flash
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 63 of 201
Canvas & SVG
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 64 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 65 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 66 of 201
Scalable Vector Graphics | SVGDevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 67 of 201
Vector Graphics Scale & Look Great!DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 68 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 69 of 201
• First Person Gifter (FF)
• Population Demo (FF)
• German Election Atlas (Safari)
• Mozilla Download Center (FF)
Demo’s
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 70 of 201
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?
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 71 of 201
HTML 5 Support
£ £ £ £ £canvas / svg
video
geolocation
app cache
database
workers
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 72 of 201
Quake II - Browser Only
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 73 of 201
Quake II - Browser Only
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 74 of 201
Quake II - Browser Only
WebGL 3D graphics
HTML 5 CanvasHTML 5 Audio
HTML 5 Web Sockets
HTML 5 Local Storage
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 75 of 201
Video
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 76 of 201
Capture to delivery and beyondThe Production Process
Authoring DeliveryVideo / Audio Assets Compression
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 77 of 201
Standards Are Everywhere
MPEG-1/
MPEG-4 audio
MPEG-2RedBook JPEGAC-3FM DVNTSC/
PAL
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 78 of 201
PixelsGuidelines for Compression
DV 720 x 486
720P 1280 x 720
HD 1080i 1920 x 1080
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 79 of 201
Content PlacementGuidelines for Compression
320 x 240
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 80 of 201
Selecting a SizeGuidelines for Compression
320 x 240
512 x 384
640 x 480
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 81 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 82 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 83 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 84 of 201
Frame RateGuidelines for Compression
29.97 fps 15 fps
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 85 of 201
Guidelines for Compression2 Pass Variable Bit Rate
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 86 of 201
Guidelines for Compression2 Pass Variable Bit Rate
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 87 of 201
HTML 5 OptionsVideo Compression
FlashH264Adobe
H264 | MPEG 4Apple | Microsoft
WebMOgg Theora
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 88 of 201
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
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 89 of 201
www.longtailvideo.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 90 of 201
Smart PhonesDevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 91 of 201
brightcove.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 92 of 201
HTML 5 Support
£ £ £ £ ££ £ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 93 of 201
geolocation
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 94 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 95 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 96 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 97 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 98 of 201
// the geolocation apibrings browser basedlocation to your apps
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 99 of 201
www.seeknspell.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 100 of 201
A C
R
O
P www.seeknspell.com
T
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 101 of 201
C
R
O
P
A
www.seeknspell.com
T
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 102 of 201
HTML 5 Support
£ £ £ £ ££ £ £ £ ££ £ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 103 of 201
app cache& database
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 104 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 105 of 201
// database and app cache store user data and app resources locally
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 106 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 107 of 201
HTML 5 Support
£ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 108 of 201
web workers
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 109 of 201
HTML 5More Power
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 110 of 201
// web workers defines an API for runningbackground scripts
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 111 of 201
Bad Primes (FF 3.5)
Good Primes (FF 3.5)
Motion Tracker (FF)
Demo’sDevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 112 of 201
HTML 5 Support
£ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ ££ £ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 113 of 201
FormsCSS 3
Effects/Transitions
JavaScript
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 114 of 201
Test on Windows 8, 7, Vista, XP• Internet Explorer 6, 7, 8, 9
• Firefox 4.0, 10-13 +
• Chrome 15 - 19 +
Test on OS X− Safari 4, 5+
− Firefox 4.0, 10-13 +
− Chrome 15 - 19 +
Test on Mobile− iOS 4.x - 6.x
− Android 2.x - 4.x
− Blackberry, Windows 7-8 Phone
− Tablet vs Phone
Testing CodeDevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 115 of 201
How should we
Design?
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 116 of 201
Focus on the
Audience1
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 117 of 201
is the keyContent
2
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 118 of 201
Transparent
Interface3
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 119 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 120 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 121 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 122 of 201
Keep it Simple
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 123 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 124 of 201
Design: Keep it Simple
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 125 of 201
How do we start?
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 126 of 201
Sketch
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 127 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 128 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 129 of 201
Wireframes
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 130 of 201
www.balsamiq.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 131 of 201
Sketchy & iMockUps
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 132 of 201
KeynoteKungFu.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 133 of 201
http://goo.gl/kMn4b
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 134 of 201
www.uistencils.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 135 of 201
Wireframes
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 136 of 201
Design• Focus on audience
• Content is key
• Transparent interface
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 137 of 201
Design for Flexibility
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 138 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 139 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 140 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 141 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 142 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 143 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 144 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 145 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 146 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 147 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 148 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 149 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 150 of 201
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 7682048 x 1536
iPhone 4960 x 640
iPhone480 x 320
Droid854 x 480
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 151 of 201
Technology is a tool.
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 152 of 201
Determining a PlanWhat’s Next
Strategy Team Skills
Work Flow
Team Skills
Tools
Challenges
Delivery
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 153 of 201
How do we handle?Projects
Current Content New Projects
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 154 of 201
Resources
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 155 of 201
Resources
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 156 of 201
html5rocks.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 157 of 201
lynda.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 158 of 201
teamtreehouse.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 159 of 201
Caniuse.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 160 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 161 of 201
tumultco.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 162 of 201
animatable.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 163 of 201
html5demos.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 164 of 201
html5gallery.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 165 of 201
jquery.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 166 of 201
www.sencha.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 167 of 201
www.css3.info
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 168 of 201
www.uxmag.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 169 of 201
diveintohtml5.info
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 170 of 201
typekit.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 171 of 201
CSS3 for Web DesignersDan Cederholm | A Book Apart
aBookApart.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 172 of 201
RESPONSIVE WEB DESIGNETHAN MARCOTTE | A Book Apart
aBookApart.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 173 of 201
HTML5 for Web DesignersJEREMY KEITH | A Book Apart
aBookApart.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 174 of 201
www.gamesalad.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 175 of 201
www.kesiev.com/akihabara/
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 176 of 201
www.kesiev.com/akihabara/
http://bit.ly/dfCTw3 — Great presentation on HTML5 written IN HTML5. View it in Chrome for best results.http://bit.ly/bheBOx — "How to Make All Browsers Render HTML5 Mark-up Correctly - Even IE6". It's a good overview of how to get browsers to behave, but doesn't go into much detail beyond that.http://bit.ly/cnFDoq — Sample code on how to get <video> to work for everyone (with a fallback for MSIE).http://bit.ly/9TUF4j — Sublime video (for consistent UI in <video> tags, with Flash fallback)http://bit.ly/buBmp6 — Basic tutorial on using the SQLite-compatible database in your browser.http://bit.ly/csCqFG — An overview of all forms of client-side storage.http://bit.ly/aZ4cBu — "HTML 5: Features you want desperately but still can't use". Great talk by Ian Hickson from 2008. It's a little out of date now, but there are lots of great demos in there.http://bit.ly/bi29bT — Mark Pilgrim's HTML5 Book "Dive Into HTML5".http://bit.ly/dkbgAZ — Modernizr is a JS tool that helps you detect support for HTML5 features.http://bit.ly/aFfJng — Nice chart of feature support by browser.http://bit.ly/br04am — IE7.js and IE8.js, which I mentioned in my talk, help make MSIE perform more like a standards-compliant browser.http://bit.ly/bwoI4N — Nissan Leaf product page, made using "HTML5" (technically it's still XHTML, but it's using a lot of JS/SVG/etc to skip the need for Flash in many places).
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 177 of 201
Go Play, Experiment, Dream
AppleiOS
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 178 of 201
Search Flickr.com for iPad UI
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 179 of 201
smashingmagazine.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 180 of 201
www.longtailvideo.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 181 of 201
Screencasts 101 Mini-Session
www.jingproject.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 182 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 183 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 184 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 185 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 186 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 187 of 201
Pictures
Video
Blog
Audio
3D Models
Multiplayer Environment
ePortfolios
Course Management System
Micro-blogging
ExploreDevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 188 of 201
Gamers
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 189 of 201
Capture & Analyze
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 190 of 201
Using CoverFlow view and Preview of Graphics
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 191 of 201
Design Scrapbook: iPhoto | LittleSnapper
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 192 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 193 of 201
wordpress.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 194 of 201
open
over 11,500
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 195 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 196 of 201
evernote.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 197 of 201
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 198 of 201
Don’t Settle
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 199 of 201
launchcycle.com
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 200 of 201
Q & A
Nick [email protected]
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
DevLearn12 : HTML5 presented by Nick Floro [email protected]
LaunchCycle.com - The simple way to manage projects. 11/05/12 201 of 201