HTML5 is rapidly becoming the program of choice when creating sophisticated eLearning. Although not yet fully defined, the major portions now in use provide increased capability when you understand what they do and how to use them. Participants in this session will learn what HTML5, and its core technologies, offers your team, when to adopt it in your solutions, and how to take advantage of HTML5 in developing content. You'll learn how you can use Canvas and SVG graphics for animation, graphics, and interactivity, how you can optimize HTML5's new-media formats and deliver them effectively to desktop and mobile devices, and how you can use geolocation in applications and Web courses.

1. Nick@sealworks.com
Twitter.com/NickFloro
HTML5
Designing & Developing mLearning Using
Playing the mobile game? ibooks html5 hidesign mobilefn
Tuesday, June 19, 2012

2. 1.6 billion Internet users
Tuesday, June 19, 2012

3. 1.5 billion TV’s
Tuesday, June 19, 2012

4. 4.2 billion Mobile Phones
Tuesday, June 19, 2012

5. 3.5 billion Tooth Brushes
Tuesday, June 19, 2012

6. The Web Platform is Accelerating
Tuesday, June 19, 2012

7. Solving Developer Challenges
Graphics Location Storage Speed
Tuesday, June 19, 2012

8. What can we do with
HTML5
Tuesday, June 19, 2012

9. Tuesday, June 19, 2012

10. Tuesday, June 19, 2012

11. Tuesday, June 19, 2012

12. Tuesday, June 19, 2012

13. • form factor
• network latency
• input mechanism
• memory
• computational power
• battery
• context
Tuesday, June 19, 2012

14. Tuesday, June 19, 2012

15. Tuesday, June 19, 2012

16. Tuesday, June 19, 2012

17. The mobile environment
single early failure = non-returning user
Tuesday, June 19, 2012

18. The mobile environment
crucial first 30-60 seconds usage
Tuesday, June 19, 2012

19. The mobile environment
Fewer options
Tuesday, June 19, 2012

20. Tuesday, June 19, 2012

21. App
Tuesday, June 19, 2012

22. The Web Platform
Tuesday, June 19, 2012

23. Web App
Tuesday, June 19, 2012

24. Web App
Tuesday, June 19, 2012

25. Web App
HTML Javascript CSS API’s
Tuesday, June 19, 2012

26. Tuesday, June 19, 2012

27. Tuesday, June 19, 2012

28. Tuesday, June 19, 2012

29. Tuesday, June 19, 2012

30. Pulse for Mobile
Tuesday, June 19, 2012

31. Tuesday, June 19, 2012

32. Tuesday, June 19, 2012

33. SEMANTICS DEVICE ACCESS
CSS3 MULTIMEDIA
CONNECTIVITY PERFORMANCE & 3D, GRAPHICS OFFLINE & STORAGE
INTEGRATION & EFFECTS
Tuesday, June 19, 2012

34. HTML5 = JS + CSS3
Tuesday, June 19, 2012

35. Create once and deliver everywhere...
Tuesday, June 19, 2012

36. Next Generation Mobile Using Webkit
Android iOS Windows Phone
RIM Blackberry
Tuesday, June 19, 2012

37. Tuesday, June 19, 2012

38. Tuesday, June 19, 2012

39. Tuesday, June 19, 2012

40. Tuesday, June 19, 2012

41. Which browser’s support HTML 5?
Chrome Safari Firefox Opera
Tuesday, June 19, 2012

42. Which browser’s support HTML 5?
Chrome Safari Firefox Opera
BETA
Internet Explorer 9
Tuesday, June 19, 2012

43. HTML 5
in the works...
Tuesday, June 19, 2012

44. Advanced
Core Language
Tuesday, June 19, 2012

45. Tuesday, June 19, 2012

46. HTML 4
Tuesday, June 19, 2012

47. HTML 5 - Introduces New Elements
Tuesday, June 19, 2012

48. Improve Web Apps
Tuesday, June 19, 2012

49. Tuesday, June 19, 2012

50. Tuesday, June 19, 2012

51. Tuesday, June 19, 2012

52. Flow chart
Compatibility
Tuesday, June 19, 2012

53. Flow chart
Replaces:
XHTML 1.0 & Dom2html
with new
API’s
Tuesday, June 19, 2012

54. Improve
Handling of Errors
Tuesday, June 19, 2012

55. Tuesday, June 19, 2012

56. Focus on the
Audience
Tuesday, June 19, 2012

57. Google Analytics
Tuesday, June 19, 2012

58. Google Analytics
Tuesday, June 19, 2012

59. Drawing on the Web
Flash
Tuesday, June 19, 2012

60. Canvas
& SVG
Tuesday, June 19, 2012

61. Tuesday, June 19, 2012

62. Scalable Vector Graphics | SVG
Tuesday, June 19, 2012

63. Vector Graphics Scale & Look Great!
Tuesday, June 19, 2012

64. Tuesday, June 19, 2012

65. Demo’s
• Mozilla Download Center (FF)
• First Person Gifter (FF)
• Population Demo (FF)
• German Election Atlas (Safari)
Tuesday, June 19, 2012

66. When Canvas or SVG?
SVG -> High level Canvas -> Low level
• Import/Export • No mouse interaction
• Easy UIs • High Animation
• Interactive • JS Centric
• Medium Animation • More Bookkeeping
• Tree of objects • Pixels
Tuesday, June 19, 2012

67. HTML 5 Support
canvas / svg
£ £ £ £
video
geolocation
app cache
database
workers
Tuesday, June 19, 2012

68. Quake II - Browser Only
Tuesday, June 19, 2012

69. Quake II - Browser Only
Tuesday, June 19, 2012

70. Quake II - Browser Only
WebGL 3D graphics
HTML 5 Canvas
HTML 5 Audio
HTML 5 Web Sockets
HTML 5 Local Storage
Tuesday, June 19, 2012

71. Video
Tuesday, June 19, 2012

72. The Production Process
Capture to delivery and beyond
Video / Audio Assets Compression Authoring Delivery
Tuesday, June 19, 2012

73. Standards Are Everywhere
NTSC/
RedBook FM MPEG-2 PAL AC-3 DV JPEG
MPEG-
1/
MPEG-
4 audio
Tuesday, June 19, 2012

74. Tuesday, June 19, 2012

75. Tuesday, June 19, 2012

76. Tuesday, June 19, 2012

77. Video Compression
HTML 5 Options
Flash H264 | MPEG 4 WebM
Ogg Theora
H264 Apple | Microsoft Google
Adobe
Tuesday, June 19, 2012

78. Guidelines for Compression
Tips & Hints
• Video
– Frame Rate: 15 fps
– Data Rate Target 800-1200 kbs
• Audio
– 16bit / 22khz / Mono / 64 kbs
• Delivery
– Flash: H264
– HTML5: H264
Tuesday, June 19, 2012

79. www.longtailvideo.com
Tuesday, June 19, 2012

80. Easy Access to Video
Flip $100 to $200
Tuesday, June 19, 2012

81. Smart Phones
Tuesday, June 19, 2012

82. Tuesday, June 19, 2012

83. brightcove.com
Tuesday, June 19, 2012

84. HTML 5 Support
canvas / svg
£ £ £ £
video
£ £ £ £
geolocation
app cache
database
workers
Tuesday, June 19, 2012

85. geolocation
Tuesday, June 19, 2012

86. Tuesday, June 19, 2012

87. Tuesday, June 19, 2012

88. Tuesday, June 19, 2012

89. // the geolocation api
brings browser based
location to your apps
Tuesday, June 19, 2012

90. O
C
A
R
T
P www.seeknspell.com
Tuesday, June 19, 2012

91. HTML 5 Support
canvas / svg
£ £ £ £
video
£ £ £ £
geolocation
£ £ £
iPhone £
app cache
database
workers
Tuesday, June 19, 2012

92. app cache
& database
Tuesday, June 19, 2012

93. Tuesday, June 19, 2012

94. Tuesday, June 19, 2012

95. HTML 5 Support
canvas / svg
£ £ £ £
video
£ £ £ £
geolocation
£ £ £
iPhone £
app cache
£ £ £ £
mobile
database
£ £ £ £
mobile
workers
Tuesday, June 19, 2012

96. Tuesday, June 19, 2012
web workers

97. HTML 5
More Power
Tuesday, June 19, 2012

98. // web workers defines
an API for running
background scripts
Tuesday, June 19, 2012

99. Demo’s
Bad Primes (FF 3.5)
Good Primes (FF 3.5)
Motion Tracker (FF)
Tuesday, June 19, 2012

100. HTML 5 Support
canvas / svg
£ £ £ £
video
£ £ £ £
geolocation
£ £ £
iPhone £
app cache
£ £ £ £
mobile
database
£ £ £ £
mobile
workers
£ £ £ £
Tuesday, June 19, 2012

101. CSS 3 Forms
JavaScript
Effects/Transitions
Tuesday, June 19, 2012

102. Test for Usability
Test on Windows 7, Vista, XP
• Internet Explorer 6, 7, 8, 9
• Firefox 3.5, 3.6, 4.0 +
• Opera 10
Test on OS X
− Safari 4
− Firefox 3.5, 3.6, 4.0 +
− Opera 10
Test Mobile
− iOS
− Android 2.x-4.x
− Blackberry, Windows 7 Phone
Tuesday, June 19, 2012

103. How should we
Design?
Tuesday, June 19, 2012

104. Focus on the
Audience
Tuesday, June 19, 2012
1

105. Content
2
is the key
Tuesday, June 19, 2012

106. Transparent
3
Interface
Tuesday, June 19, 2012

107. Tuesday, June 19, 2012

108. Tuesday, June 19, 2012

109. Tuesday, June 19, 2012

110. Keep it Simple
Tuesday, June 19, 2012

111. Tuesday, June 19, 2012

112. Design: Keep it Simple
Tuesday, June 19, 2012

113. How do we start?
Tuesday, June 19, 2012

114. Sketches
Tuesday, June 19, 2012

115. Wireframes
Tuesday, June 19, 2012

116. www.balsamiq.com
Tuesday, June 19, 2012

117. Sketchy & iMockUps
Tuesday, June 19, 2012

118. http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
Tuesday, June 19, 2012

119. www.uistencils.com
Tuesday, June 19, 2012

120. Wireframes
Tuesday, June 19, 2012

121. Design
• Focus on audience
• Content is key
• Transparent interface
Tuesday, June 19, 2012

122. Tuesday, June 19, 2012

123. Text
Tuesday, June 19, 2012

124. 1. Create Text
2. Make a selection
3. Invert select
4. Save alpha channel
Text
5. Deselect
6. Load Alpha Channel
7. Load Color
8. Offset
9. Apply Blur
10. Reposition
11. Save
12. If the copy changed, star
over
Tuesday, June 19, 2012

125. Tuesday, June 19, 2012

126. Tuesday, June 19, 2012

127. Tuesday, June 19, 2012

128. Design for Flexibility
Tuesday, June 19, 2012

129. Tuesday, June 19, 2012

130. Tuesday, June 19, 2012

131. Tuesday, June 19, 2012

132. Tuesday, June 19, 2012

133. Tuesday, June 19, 2012

134. Tuesday, June 19, 2012

135. Tuesday, June 19, 2012

136. Tuesday, June 19, 2012

137. Tuesday, June 19, 2012

138. Tuesday, June 19, 2012

139. Pixels & Aspect Ratio
Selecting a Size Android Xoom
1280 x 720
HTC Incredible
iPad 800 x 480
1024 x 768
iPhone 4
960 x Droid
854 x 480
iPhone
480 x 320
Tuesday, June 19, 2012

140. Resources
Tuesday, June 19, 2012

141. html5rocks.com
Tuesday, June 19, 2012

142. lynda.com
Tuesday, June 19, 2012

143. http://www.caniuse.com/
Tuesday, June 19, 2012

144. Tuesday, June 19, 2012

145. tumultco.com
Tuesday, June 19, 2012

146. animatable.com
Tuesday, June 19, 2012

147. html5demos.com
Tuesday, June 19, 2012

148. www.sencha.com
Tuesday, June 19, 2012

149. www.css3.info
Tuesday, June 19, 2012

150. www.uxmag.com
Tuesday, June 19, 2012

151. typekit.com
Tuesday, June 19, 2012

152. CSS3 for Web Designers
Dan Cederholm | A Book Apart
aBookApart.com
Tuesday, June 19, 2012

153. RESPONSIVE WEB DESIGN
ETHAN MARCOTTE | A Book Apart
aBookApart.com
Tuesday, June 19, 2012

154. HTML5 for Web Designers
JEREMY KEITH | A Book Apart
aBookApart.com
Tuesday, June 19, 2012

155. Go Play, Experiment, Dream
Apple
iOS
Tuesday, June 19, 2012

156. Search Flickr.com for iPad UI
Tuesday, June 19, 2012

157. www.smashingmagazine.com
Tuesday, June 19, 2012

158. Tuesday, June 19, 2012

159. Tuesday, June 19, 2012

160. Tuesday, June 19, 2012

161. Tuesday, June 19, 2012

162. Tuesday, June 19, 2012

163. Explore
Pictures
Blog
Video
Audio
Micro-blogging 3D Models
ePortfolios
Course Management System
Multiplayer Environment
Tuesday, June 19, 2012

164. Capture & Analyze
Tuesday, June 19, 2012

165. Using CoverFlow view and Preview of Graphics
Tuesday, June 19, 2012

166. Design Scrapbook: iPhoto | LittleSnapper
Tuesday, June 19, 2012

167. Tuesday, June 19, 2012

168. Tuesday, June 19, 2012

169. Thank You
Nick Floro
sealworks.com
nick@sealworks.com
twitter.com/NickFloro
Download the Presentation at:
http://www.slideshare.net/nickfloro
Tuesday, June 19, 2012