1.
HTML5
Nick Floro
Nick@sealworks.com
Twitter.com/NickFloro
Designing Mobile with
Web | Hybrid | App

2.
What can we do with
HTML5

3.
html5demos.com

4.
html5demos.com

5.
html5demos.com

6.
html5demos.com

7.
Chrome

8.
Create and deliver everywhere.

9.
The Web Platform

10.
WebApp
HTML Javascript CSS API’s

11.
Chrome.AngryBirds.com

12.
SEMANTICS
CSS3
3D, GRAPHICS
& EFFECTS
DEVICE ACCESS
PERFORMANCE &
INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY

13.
Internet Explorer 9
BETA
Which browser’s support HTML 5?
Chrome Safari Firefox Opera

14.
Big Data
Focus on the Audience

15.
Advanced
Core Language

16.
HTML 4

17.
HTML 5 - Introduces New Elements

18.
Flow chart
API’s
motion camera gps sensors

19.
Canvas
& SVG

20.
Scalable Vector Graphics | SVG

21.
Vector Graphics Scale & Look Great!

22.
• First Person Gifter (FF)
• Population Demo (FF)
• German Election Atlas (Safari)
Demo’s

23.
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?

24.
Quake II - Browser Only

25.
Quake II - Browser Only
WebGL 3D graphics
HTML 5 Canvas
HTML 5 Audio
HTML 5 Web Sockets
HTML 5 Local Storage

26.
Media

27.
// HTML 5 makes
<video> as easy
as <img>
// HTML 5 makes <video> as easy as <img>

28.
<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

29.
Capture to delivery and beyond
The Production Process
Authoring DeliveryVideo / Audio Assets Compression

30.
WebM
Google
H264 | MPEG 4
Apple | Microsoft
mp4
Formats to choose from:
Select a format for delivery
Win

31.
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

32.
jwplayer.com

33.
geolocation

34.
// the geolocation api
brings browser based
location to your apps

35.
www.seeknspell.com

36.
A
C
R
O
P www.seeknspell.com
T

37.
C
R
O
P
A
www.seeknspell.com
T

38.
// the geolocation api brings browser
based location to your apps

39.
You are entering research.
Learn More>>

40.
error
handling

41.
Responsive

42.
screen size, platform and orientation

43.
Responsive Design
Desktop
Tablet
Phone

44.
getBootStrap.com

45.
Things to consider
Browser Support
Content
Technology
TimePerformance

46.
Tools

47.
adobe.com

48.
PhoneGap.com

49.
build.phonegap.com

50.
Chrome
Developer Tools

51.
BrowserStack.com

52.
Design for Flexibility

53.
Experiment
experiment

54.
Resources

55.
w3schools.com

56.
html5rocks.com

57.
lynda.com

58.
CaniUse.com

59.
CaniUse.com

60.
tumultco.com

61.
html5demos.com

62.
jQuery.com

63.
UXmag.com

64.
SmashingMagazine.com

65.
TypeKit.com

66.
Go Play, Experiment, Dream
Apple
iOS

67.
What ideas will you apply from today?

68.
Thank You
Nick Floro
nick@sealworks.com
twitter.com/NickFloro
Download the Presentation at:
http://www.slideshare.net/nickfloro