Top Trends in elearning September 15 & 16, 2011 501 Is HTML5 Ready for elearning?
Is HTML5 Ready for elearning? Polls 1 and 3 2 Session 501 Is HTML5 Ready for elearning? Page 1
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 5 th 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
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
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
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
BROWSER Poll #13 12 Session 501 Is HTML5 Ready for elearning? Page 6
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
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
Mozilla Firefox 17 Microsoft Internet Explorer 18 Session 501 Is HTML5 Ready for elearning? Page 9
Motorola XOOM Tablet with Android OS 19 Overall Tests - Desktop 20 Session 501 Is HTML5 Ready for elearning? Page 10
Overall Tests Tablet 21 Overall Tests Mobile Phone 22 Session 501 Is HTML5 Ready for elearning? Page 11
EXAMPLES HTML5 Samples http://ie.microsoft.com/testdrive/default.html Session 501 Is HTML5 Ready for elearning? Page 12
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
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
ELEARNING DEVELOPMENT TOOLS Poll #14 30 Session 501 Is HTML5 Ready for elearning? Page 15
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
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
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
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
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-toiphone-from-captivate-5-and-elearning-suite-2.html Session 501 Is HTML5 Ready for elearning? Page 20
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
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
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-prototypetool-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
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
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 <div id= header >. Header content </div> <header>. Header content </header> Session 501 Is HTML5 Ready for elearning? Page 25
Tags <audio> <canvas> <footer> <header> <nav> <time> <video> tag defines sound content tag defines graphics tag defines a footer for a section or page tag defines a header for a section or page tag defines navigation links tag defines a date/time tag defines a video 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
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
Recommended Reading http://diveintohtml5.org/ 55 CODE Session 501 Is HTML5 Ready for elearning? Page 28
Canvas Example http://cii-ftp.com/online/html5/redbox.html Source Code <html> <body> <canvas id="mycanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> </canvas> <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); </script> </body> </html> Session 501 Is HTML5 Ready for elearning? Page 29
Head <html> <head> </head> </html> Elements inside <head> 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: <title>, <base>, <link>, <meta>, <script>, and <style>. Body <html> <head> </head> <body> The body element defines the document's body. The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. </body> </html> Session 501 Is HTML5 Ready for elearning? Page 30
Canvas <html> <head> </head> <body> <canvas id="mycanvas" width="200" height="100" </canvas> </body> </html> The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images. Specify the id, width, and height of the element Draw With JavaScript <script type="text/javascript"> Var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); </script> The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript. JavaScript uses the ID to find the canvas element. Session 501 Is HTML5 Ready for elearning? Page 31
Draw With JavaScript <script type="text/javascript"> Var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); </script> The getcontext("2d") object is a built-in HTML5 object, with many methods to draw paths, boxes, circles, characters, images, and more. Draw With JavaScript <script type="text/javascript"> Var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); </script> Draw a red rectangle. The fillstyle method makes it red. The fillrect method specifies the shape, position, and size. Session 501 Is HTML5 Ready for elearning? Page 32
Draw With JavaScript <script type="text/javascript"> Var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); </script> The fillrect method above had the parameters (0,0,150,75). This means: Draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0). The canvas' X and Y coordinates are used to position drawings on the canvas. SVG Example http://cii-ftp.com/online/html5/red_svg.html SVG stands for Scalable Vector Graphics Session 501 Is HTML5 Ready for elearning? Page 33
Source Code <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg> Canvas vs. SVG Think of the difference between canvas and svg as the difference between Photoshop and Illustrator (One deals with bitmaps and the other vector art With canvas, since you are drawing in bitmap, you can smudge, blur, burn, dodge your images easily. But since it's bitmap, you can't easily draw a line and then decide to reposition the line. You need to delete the old line and then draw a new line With svg, since you are drawing vectors, you can easily move, scale, rotate, reposition, flip your drawings. But since it's vectors, you can't easily blur the edges according to line thickness or seamlessly meld a red circle into a blue square. You need to simulate blurring by drawing intermediate polygons between objects Session 501 Is HTML5 Ready for elearning? Page 34
SVG Advantages SVG files can be read and modified by a large range of tools (e.g. notepad) SVG files are smaller and more compressible than JPEG and GIF images SVG images are scalable SVG images can be printed with high quality at any resolution SVG images are zoomable (and the image can be zoomed without degradation) Text in SVG is selectable and searchable (excellent for making maps) SVG works with Java technology SVG is an open standard SVG files are pure XML Video Example http://cii-ftp.com/online/html5/video_html5.html Session 501 Is HTML5 Ready for elearning? Page 35
Source Code <video controls="controls"> <source src="pr6.mp4" type='video/mp4; codecs="avc1.42e01e, mp4a.40.2"' /> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' /> <video> File vs. Video Formats One of the biggest sources of confusion about video is not realizing that the file format is completely different from the video format. So you're always dealing with two formats, not one Examples of file formats are.mp4,.flv, f4v,.ogv, or.avi. File formats are often called container formats because they're containers for the actual video The video format is the flavor of compression that's used on the video. This is often called a codec http://www.ibm.com/developerworks/web/library/wa-html5video/ Session 501 Is HTML5 Ready for elearning? Page 36
MP4 The movie.mp4 file is a container that can hold video encoded as either MPEG-4 or H.264. Flash A movie.flv (Flash) file could also hold H.264 video, or it could hold video encoded with vp6 or Sorenson Spark. But it can't hold MPEG-4 video. Session 501 Is HTML5 Ready for elearning? Page 37
Codec A codec encodes a data stream or signal for transmission, storage or encryption, or decodes it for playback or editing The process of decoding what s inside the video container file varies To know how to decode a movie, the player (which is your web browser in the case of HTML5 video) has to know with which codec the movie was encoded Video File Formats Each format holds at minimum one video track, and most likely, one audio track When you watch a movie online, your video player decodes both the audio and video and sends the information to your screen and speakers Session 501 Is HTML5 Ready for elearning? Page 38
Three Parts To Video 1. The file format that holds the video, like.mp4,.flv,.f4v,.ogv, or.avi 2. The video format (aka codec), like H.264, MPEG-4, or Theora 3. The player that makes it available to your site visitors, such as the Adobe Flash plugin, or the new <video></video> tag Codec-Neutral HTML5 doesn t care what format your video file is. Whether it s MP4, WMV, MOV, or whatever it s all the same to HTML5 You can use an incredibly simple set of tags to play video on your web app: <video></video> There are equivalent tags for pretty much any form of media You ll no longer have to worry about whether or not a device can handle a particular kind of file http://www.gomonews.com/html5-made-easy-what-it-is-and-what-itmeans-for-mobile/ 78 Session 501 Is HTML5 Ready for elearning? Page 39
SUMMARY Final Words For now, if you wish to deliver your interactive elearning on ipad (or iphone/itouch), consider HTML5 in the place of Flash Upgrade browsers to support HTML5 Check out the new HTML5 Rapid Development Tools and HTML5 demo websites Budget for gadgets tablets, smartphones, and ipads, so you can test on different platforms 80 Session 501 Is HTML5 Ready for elearning? Page 40
Other Cool Example Sites http://apple.com/html5 http://www.chromeexperiments.com/ http://html5rocks.com (Google site) Support http://www.apple.com/hotnews/thoughts-on-flash/ http://www.apple.com/html5/ When Can I Use HTML5 Doctor Introducing HTML5 Quirksmode covers HTML5 browser compatibility Wikipedia s HTML5 browser support guide Mobile Metrics report Session 501 Is HTML5 Ready for elearning? Page 41
Training https://learnable.com/courses/learn-html5-201 (it s $10!) http://blog.templatemonster.com/2010/10/07/html5- canvas-tutorials-2010/ http://blog.templatemonster.com/2010/06/16/25-html5- tutorials-techniques/ http://www.williammalone.com/articles/flash-vs-html5- canvas-drawing/?gclid=ciupku2li6scfwnetaodn1xxuq Books Developing with Web Standards Introducing HTML5 HTML5 for Web Designers Dive into HTML5 Session 501 Is HTML5 Ready for elearning? Page 42
Contact Info Debbie Richards Email: debbie@cre8iveii.com Website: http://www.cre8iveii.com/ Blog: http://cre8iveii.blogspot.com/ Tweets: http://twitter.com/cre8iveii 85 Session 501 Is HTML5 Ready for elearning? Page 43