Top Trends in eLearning
September 15 & 16, 2011
501
Is HTML5 Ready for eLearning?
Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Is HTML5 Ready for eLearning?
Polls 1 and 3
2
Session 501 – Is HTML5 Ready for eLearning? – Page 1 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
What’s Covered in This Session?
In this session you will learn: . Why you should be interested in HTML5 . How to evaluate browsers for HTML5 . How to recognize HTML5 features in websites and web pages . What tools are available to develop HTML5-based eLearning projects . About key HTML5 features; including video, audio, and geolocation attributes
3
HTML5
. HTML5 is the 5th major rev of Hypertext Markup Language (HTML), which is the core language of the web
http://www.focus.com/images/view/11905/
Session 501 – Is HTML5 Ready for eLearning? – Page 2 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Why All the Excitement?
. Unlike laptops and desktops, key smartphones (and Apple products) do not support Adobe Flash . HTML5 has new tags that play video and audio in a browser without requiring a proprietary plugin such as Adobe's Flash, Microsoft's Silverlight, or Apple's QuickTime . With these capabilities, HTML5 is an alternate for Adobe Flash and the Adobe Flash plugin
http://www.learningsolutionsmag.com/articles/681/
Why All the Excitement?
. Makes it possible to design, develop, and publish once and display the published content via each device's browser . Reduces cost – 1 application for multiple devices
ELearning Guild Report: Mobile Learning: Landscape and Trends
Session 501 – Is HTML5 Ready for eLearning? – Page 3 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Where Can You Use HTML5?
. Web-based applications . Apps for mobile (iPhone, iPAD, Android) . A lot of web content currently in HTML • Video and audio • Articles, White Papers and eBooks (PDF.js in the works to replace PDF plug-in) • On-the-go training (Mobile learning)
HTML5: Desktop And Mobile Devices iPAD Desktop
iPHONE
Healthcare Sample: First Aid Fundamentals Navigate to this URL from your computer or mobile device. (Flash and Mobile Course) www.rapidintake.com/mobile3 8
Session 501 – Is HTML5 Ready for eLearning? – Page 4 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
PDF Reader in JavaScript
http://www.readwriteweb.com/archives/mozilla_working_on_pdfjs_will_render_pdfs_in_html5.php
9
Challenges for HTML5 Adoption
. Adobe Flash will be the dominant medium for eLearning content for a while • A lot of eLearning content is written in Flash and will remain that way • A lot of Flash programmers work on creating eLearning courses • Web developers will adopt HTML5/CSS3/JavaScript combination, but they are not necessarily content developers
http://www.raptivity.com/resources/insights/presentations-and-recorded-webinars
Session 501 – Is HTML5 Ready for eLearning? – Page 5 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
BROWSER
Poll #13
12
Session 501 – Is HTML5 Ready for eLearning? – Page 6 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Browser Functionality
. The browser’s main functionality is to present the web resource you choose, by requesting it from the server and displaying it on the browser window . The resource is usually an HTML document, but may also be a PDF, image, or other type . The location of the resource is specified by the user using a URI (Uniform Resource Identifier)
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
13
Browser Support
There are five major browsers used today: Internet Explorer, Firefox, Safari, Chrome, and Opera.
Session 501 – Is HTML5 Ready for eLearning? – Page 7 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Browser Support
Test how well the browser in your computer and handheld devices support HTML5.
400 point best…
http://html5test.com/
Google Chrome
16
Session 501 – Is HTML5 Ready for eLearning? – Page 8 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Mozilla Firefox
17
Microsoft Internet Explorer
18
Session 501 – Is HTML5 Ready for eLearning? – Page 9 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Motorola XOOM Tablet with Android OS
19
Overall Tests - Desktop
20
Session 501 – Is HTML5 Ready for eLearning? – Page 10 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Overall Tests –Tablet
21
Overall Tests – Mobile Phone
22
Session 501 – Is HTML5 Ready for eLearning? – Page 11 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
EXAMPLES
HTML5 Samples
http://ie.microsoft.com/testdrive/Default.html
Session 501 – Is HTML5 Ready for eLearning? – Page 12 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Tablet Reading Experience
http://www.publicintegrity.org/treesaver/tuna/00-toc.html
HTML5-based Book
20 Things I learned about the internet 26
Session 501 – Is HTML5 Ready for eLearning? – Page 13 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
HTML5-based Book
20 Things I learned about the internet 27
Zoom and Panning Example
http://ie.microsoft.com/testdrive/Graphics/OrganizationChart/Default.xhtml
28
Session 501 – Is HTML5 Ready for eLearning? – Page 14 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
ELEARNING DEVELOPMENT TOOLS
Poll #14
30
Session 501 – Is HTML5 Ready for eLearning? – Page 15 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
mLearning Studio
http://www.rapidintake.com/products/mobile/mobile-learning-studio/
Lectora Online
http://www.trivantis.com/lectora-online 32
Session 501 – Is HTML5 Ready for eLearning? – Page 16 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Claro
http://www.dominknow.com/samples.cfm 33
Raptivity HTML5 TurboPack
http://www.raptivity.com/Demo%20Courses/Interactivity%20Builder% 20Sample%20Course/Index.html?15
Session 501 – Is HTML5 Ready for eLearning? – Page 17 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Articulate Storyline (in Beta) A standalone desktop authoring tool
HTML Articulate Player with Video
http://elearningenhanced.com/products/html-articulate-player-video
Session 501 – Is HTML5 Ready for eLearning? – Page 18 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
HTML Articulate Player with Video
http://elearningenhanced.com/products/html-articulate-player-video
Screenr
http://www.screenr.com/
Session 501 – Is HTML5 Ready for eLearning? – Page 19 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Adobe Captivate
Publish To iPhone From Captivate 5
To deploy a Captivate course on an iPhone you need Adobe eLearning Suite 2, or both Adobe Captivate 5 and Adobe Flash Professional. You also need to install the ‘Packager for iPhone’ from Adobe Labs. 1. Get an iPhone developer certificate from Apple 2. Get Development Provisioning profile from Apple (a file that lets you test or distribute an iPhone application. You obtain provisioning profile files from Apple. A provisioning profile is assigned to a specific development certificate, an application ID, and one or more device IDs). More details here 3. Create a Captivate project for the iPhone form factor – 320 *480 4. While publishing the SWF, turn ON this option in the publish dialog – “Enable SWF for conversion to iPhone application”
http://blogs.adobe.com/captivate/2010/09/publish-to- iphone-from-captivate-5-and-elearning-suite-2.html
Session 501 – Is HTML5 Ready for eLearning? – Page 20 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
WEB DEVELOPMENT TOOLS
Adobe Dreamweaver CS5
. Dreamweaver CS5.5 incorporates native support for the new HTML5 structural elements and many of the CSS3 properties supported by the latest browsers . Part of the Adobe eLearning Suite
http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt1.html
Session 501 – Is HTML5 Ready for eLearning? – Page 21 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Aloha Editor
http://aloha-editor.org/index.php 43
Export FLA To HTML5
Wallaby . Code name for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML
http://labs.adobe.com/technologies/wallaby/
Session 501 – Is HTML5 Ready for eLearning? – Page 22 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Adobe® Edge
. A new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3
http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-prototype- tool-for-html5-/
Google Swiffy
Note: Swiffy currently does not convert SWF files larger than 1024 KB.
http://swiffy.googlelabs.com/ 46
Session 501 – Is HTML5 Ready for eLearning? – Page 23 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
UNDER THE HOOD
HTML5 Stack
. HTML5 – the markup language . CSS3 (the latest version of Cascading Style Sheets) – how it looks or is rendered . JavaScript – the programming language
Session 501 – Is HTML5 Ready for eLearning? – Page 24 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Areas Of Focus
. The markup part of HTML5: focused on developing web sites and pages . The API (application programming interface) part: focused on building web applications (think of Gmail as an example of a web application)
Features
. New structural and semantic markup • Such as header, footer, and nav elements . The new canvas element • Creating web based bitmap graphics using JavaScript . New native audio and video elements, and related elements and attributes • Embedding multimedia content that browsers can play without plugins
Session 501 – Is HTML5 Ready for eLearning? – Page 25 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Tags
Offline Web Application
. Enabling resources like HTML, CSS, and JavaScript to be cached, so that if a user goes offline, the browser will have kept these resources and the application can still be used, or even installed locally on a device . Sending events to a web application when the user goes on and offline
http://www.html5rocks.com/en/tutorials/offline/whats-offline/
Session 501 – Is HTML5 Ready for eLearning? – Page 26 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Geolocation API
function get_location() { navigator.geolocation.getCurrentPosition(show_map);}
. Allows a web site or application to ask the browser where a user is located (including longitude, latitude, and altitude; but also potentially the direction they are facing, and their speed) . Of course, whether the user wishes to share this information is at their discretion
http://diveintohtml5.org/detect.html#geolocation
Examples
. Sketching: http://mrdoob.com/projects/harmony/ . Drag and Drop: http://html5demos.com/drag . Demonstration of editable text and local Storage; edit text in the box, close the window, and then click the link again: http://html5demos.com/contenteditable . Geolocation: http://html5demos.com/geo
Session 501 – Is HTML5 Ready for eLearning? – Page 27 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Recommended Reading
http://diveintohtml5.org/
55
CODE
Session 501 – Is HTML5 Ready for eLearning? – Page 28 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Canvas Example
http://cii-ftp.com/online/html5/redbox.html
Source Code
Session 501 – Is HTML5 Ready for eLearning? – Page 29 Debbie Richards, Creative Interactive Ideas Top Trends in eLearning, September 15 & 16, 2011
Head
Elements inside
can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: