Join us for a look at what HTML5 is and how people use it today to deliver the next generation of learning content and applications via browsers, native apps, and hybrid apps. You'll learn what you need to consider in designing content along with technical guidelines. Get an introduction to five hot features in HTML5 that you can start using today, and prepare for developing with the new standards. You’ll discover the five challenges you need to know in order to make sure your first app or delivery is a success and you’ll learn whether to launch a native app or web app. http://www.elearningguild.com/mlearncon/sessions/session-details.cfm?event=333&fromselection=doc.3773&session=6745

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

13. Chrome.AngryBirds.com

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

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

21. Big Data
Focus on the Audience

26. Advanced
Core Language

28. HTML 4

29. HTML 5 - Introduces New Elements

30. Flow chart
API’s
motion camera gps sensors

31. Canvas
& SVG

33. Scalable Vector Graphics | SVG

34. Vector Graphics Scale & Look Great!

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

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

38. Quake II - Browser Only

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

40. Media

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

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

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

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

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

46. jwplayer.com

47. geolocation

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

50. www.seeknspell.com

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

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

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

54. You are entering research.
Learn More>>

56. error
handling

59. Responsive

60. screen size, platform and orientation

61. Responsive Design
Desktop
Tablet
Phone

62. getBootStrap.com

65. Things to consider
Browser Support
Content
Technology
TimePerformance

66. Tools

67. adobe.com

68. PhoneGap.com

72. build.phonegap.com

73. Chrome
Developer Tools

76. BrowserStack.com

77. Design for Flexibility

89. Experiment
experiment

90. Resources

91. w3schools.com

92. html5rocks.com

93. lynda.com

94. CaniUse.com

95. CaniUse.com

96. tumultco.com

97. html5demos.com

98. jQuery.com

99. UXmag.com

100. SmashingMagazine.com

101. TypeKit.com

102. Go Play, Experiment, Dream
Apple
iOS

103. What ideas will you apply from today?

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