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.
Designing & Developing mLearning using HTML5 #mlearncon
1. Nick@sealworks.com
Twitter.com/NickFloro
HTML5
Designing & Developing mLearning Using
Playing the mobile game? ibooks html5 hidesign mobilefn
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
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
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
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
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