Your SlideShare is downloading. ×
What you need to know about HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

What you need to know about HTML5

1,442
views

Published on

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 …

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

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,442
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. What you need to know about
  • 2. IntroductionsBrian Beverly – Senior Art DirectorSerge 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 orreplacement is not completely accurate. Only a small portion of the HTML5technology is what could be though of as the Flash replacement.
  • 5. Key Features• Integrated APIs – video, audio, offline apps, dragand 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 areaddressable today with Flash technology• It is projected to have over 1 billionaddressable devices by the end of 2015.• More than 3 million developers• More than 400 million connected desktopsupdate to the new version of Flash Playerwithin six weeks of release.
  • 8. Timeline• April 2010 – Steve Jobs “Thoughts on Flash” letter• November 2011 – Adobe announces the stop ofFlash 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.comBrowser support by feature –http://caniuse.comWait… 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>lClosed 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>lClosed Format: <a href="__VIDEO__.MP4">"MP4"</a>Open Format: <a href="__VIDEO__.OGV">"Ogg"</a></p>
  • 14. Responsive DesignOne course for ALL of your devices!Responsive Design ExampleOne course for ALL of your devices!Responsive Design Example
  • 15. Legacy Content• Can I easily convert my Flash to HTML5?
  • 16. Questions?
  • 17. Contact UsBrian Beverlybrian.beverly@kineo.com@briandbeverlySerge Abellardserge.abellard@kineo.com@sergesaysFree Thinking (over 40 free reports and guides)www.kineo.com@kineo

×