HTML5Nick Floro Nick@sealworks.com
Twitter.com/NickFloro
Designing Mobile with
Web | Hybrid | App
What can we do with
HTML5
Create and deliver everywhere.
WebApp
HTML Javascript CSS API’s
Chrome.AngryBirds.com
SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY
Internet Explorer 9BETA
Which browser’s support HTML 5?
Chrome Safari Firefox Opera
Big DataFocus on the Audience
Advanced Core Language
HTML 5 - Introduces New Elements
Flow chartAPI’smotion camera gps sensors
Scalable Vector Graphics | SVG
Vector Graphics Scale & Look Great!
• First Person Gifter (FF)
• Population Demo (FF)
• German Election Atlas (Safari)
Demo’s
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?
Quake II - Browser Only
Quake II - Browser Only
WebGL 3D graphics
HTML 5 CanvasHTML 5 Audio
HTML 5 Web Sockets
HTML 5 Local Storage
// HTML 5 makes <video> as easy as <img>// HTML 5 makes <video> as easy as <img>
<video controls><source src="foo.webm" type="video/ogg"><source src="foo.mp4">Your browser does not support the video element.</video>
var v = document.getElementsByTagName("video")[0];v.play();
Embedding Video
Capture to delivery and beyondThe Production Process
Authoring DeliveryVideo / Audio Assets Compression
WebMGoogle
H264 | MPEG 4Apple | Microsoft
mp4
Formats to choose from:Select a format for delivery
Win
H264
Tips & Hints
Compression– Frame Rate: 15 fps– Key Frames: 4 x fps– Average Data Rate Target 400-1200 kbs– 2 Pass Variable Bit Rate
MPEG4: H264
Flash: H264
Guidelines for Compression
// the geolocation api brings browser based location to your apps
www.seeknspell.com
A C
R
O
Pwww.seeknspell.com
T
C
R
O
P
A
www.seeknspell.com
T
// the geolocation api brings browser based location to your apps
You are entering research. Learn More>>
screen size, platform and orientation
Responsive Design
Desktop
Tablet
Phone
Things to consider
Browser Support
Content
Technology
TimePerformance
build.phonegap.com
Chrome Developer Tools
Design for Flexibility
Experiment
experiment
SmashingMagazine.com
Go Play, Experiment, Dream
Apple iOS
What ideas will you apply from today?
Thank You
Nick Floronick@sealworks.comtwitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro