To coincide with the release of our “Quick Guide to Planning for a Multi-Device World” in April 2013, we also ran a very popular free webinar on "What you need to know about HTML5" which looked at: • The fundamental features of HTML5 • The top reasons why your organization should consider HTML5 • Progressive information on the HTML5 timeline • Evaluating which authoring tools output to HTML5 & which browsers support HTML5 • Creative tips for converting your legacy content • Why your organization should consider a responsive design framework View the webinar recording and download the guide here: http://www.kineo.com/elearning-reports/free-guide-html5-planning-for-a-multi-device-world.html

1. What you need to know about

2. Introductions
Brian Beverly – Senior Art Director
Serge Abellard – Senior Developer

3. Who is in the room?
• Industry
• Role
• Are you using HTML5 now?
• Why?

4. What is ?
• Latest version of HTML
• Combines several technologies
• CSS3, Javascript, Jquery, etc.
• Backwards compatible
*HTML5 and Flash are two different technologies. Labeling it as a flash killer or
replacement is not completely accurate. Only a small portion of the HTML5
technology is what could be though of as the Flash replacement.

5. Key Features
• Integrated APIs – video, audio, offline apps, drag
and drop, geolocation, etc.
• Form elements – date/color pickers, validation,
number steppers, mobile integration
• Canvas (for images)
• Vector Graphics
• Easily editable
• Multiple platforms

6. Why do we need it?
• The eLearning industry relies on Flash
• Increased web access via mobile devices
• Does this mean Flash is dead?

7. Flash Stats
• More than 500 million devices are
addressable today with Flash technology
• It is projected to have over 1 billion
addressable devices by the end of 2015.
• More than 3 million developers
• More than 400 million connected desktops
update to the new version of Flash Player
within six weeks of release.

8. Timeline
• April 2010 – Steve Jobs “Thoughts on Flash” letter
• November 2011 – Adobe announces the stop of
Flash mobile player and focus on HTML5
• ~2014 - HTML5 Specification will be complete
(developers given green light early 2011)

9. Tools
• Articulate Storyline
• Adobe Captivate 6
• Flash CS6
• Dreamweaver
• Adobe Edge
• Claro
• Adobe InDesign
• Lectora*
• Toolbook*
• Many more
*Always relied on HTML & Javascript

10. Wait… what about the browser issues?
• Will it work at your organization? Maybe not…

11. *This changes all the time! Search online for the latest version.
HTML5 Compatibility Test –
http://html5test.com
Browser support by feature –
http://caniuse.com
Wait… what about the browser issues?

12. Video embedding much easier?
<video src=“myvideo.mp4” width=“320” height=“240” preload controls><video src=“myvideo.mp4” width=“320” height=“240” preload controls>

13. Video embedding much easier?
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="flashvars"
value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customize this bit all you want -->
<p> <strong>Download Video:</strong>l
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="flashvars"
value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customize this bit all you want -->
<p> <strong>Download Video:</strong>l
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>

14. Responsive Design
One course for ALL of your devices!
Responsive Design Example
One course for ALL of your devices!
Responsive Design Example

15. Legacy Content
• Can I easily convert my Flash to HTML5?

16. Questions?

17. Contact Us
Brian Beverly
brian.beverly@kineo.com
@briandbeverly
Serge Abellard
serge.abellard@kineo.com
@sergesays
Free Thinking (over 40 free reports and guides)
www.kineo.com
@kineo