Essentials of HTML5 Joe Ganci elearning Joe Read my tool reviews in the Guild s Learning Solutions Magazine: http://www.learningsolutionsmag.com/authors/4/joe-ganci elearningjoe@joeganci.com joe@elearningjoe.com Newsletter: www.tinyurl.com/elearningjoe What is HTML5? 1. Simply, the new version of HTML. 2. HTML = Hypertext Markup Language. 3. BUT it really isn t just HTML. 1
What is HTML5? HTML CSS3 JavaScript Hypertext Markup Language Cascading Style Sheets NOT to be confused with Java! What is HTML5? 2
Flash vs. HTML5 Flash vs. HTML5 Flash is almost dead now. 3
Flash vs. HTML5 HTML5 is alive but HTML5 Compatibility HTML5test.com Google Chrome v36 4
HTML5 Compatibility HTML5test.com Firefox v29 HTML5 Compatibility HTML5test.com Internet Explorer v11 5
HTML5 Compatibility HTML5test.com Internet Explorer v9 Mobile Learning HTML5 is often confused with mobile delivery. They are not one and the same. However, since Steve Jobs forbade the use of Flash on iphones, ipods and ipads, HTML5 became even more important. 6
HTML5 Compatibility HTML5 Compatibility 7
HTML5 Compatibility HTML5 Compatibility 8
You Try It! Open each browser on your computer and navigate to www.htlm5test.com. Note the score you get and post in the chat window: Windows or Mac? Which browser? The score received Try it on your mobile devices too! HTML5 New, Important Features The canvas element Allows for precise placement of elements on the screen. Draw in 2D. The video element No outside plugin needed The audio element No outside plugin needed Scalable Vector Graphics (SVG) support Interactivity Drag and drop New input types, such as checking syntax for: Email addresses Date and time Telephone number URL and more Gelocation 9
Important Websites www.html5test.com www.theexpressiveweb.com www.html5rocks.com Example websites http://weavesilk.com/ http://www.findyourwaytooz.com/ Creating HTML5 elearning Power vs. Ease of Use 10
Creating HTML5 elearning The Challenge Creating HTML5 elearning The Challenge Or 11
Creating HTML5 elearning PowerPoint Creating HTML5 elearning - The PowerPoint Add-Ons Adobe Presenter 10 12
Creating HTML5 elearning - The PowerPoint Add-Ons Adobe Presenter 10 And you can run Flash Presenter files in ios using the Mobile Presenter Player, which interprets Flash. Creating HTML5 elearning - The PowerPoint Add-Ons Articulate Studio 13 13
Creating HTML5 elearning - The PowerPoint Add-Ons Articulate Studio 13 Creating HTML5 elearning - The PowerPoint Add-Ons ispring Suite 7 14
Creating HTML5 elearning - The PowerPoint Add-Ons ispring Suite 7 Creating HTML5 elearning - The PowerPoint Add-Ons Zenler Studio 15
Creating HTML5 elearning - The PowerPoint Add-Ons Zenler Studio Creating HTML5 elearning Products You Install Install? 16
Creating HTML5 elearning Products You Install Adobe Captivate Current Version: 8 http://www.adobe.com/products/captivate.edu.html Creating HTML5 elearning Products You Install Adobe Captivate 17
Creating HTML5 elearning Products You Install Articulate Storyline 2 Current Version: 2 Update 1 You can install on: Windows http://www.articulate.com/products/storyline-overview.php What is Articulate Storyline? Create polished interactive courses with Articulate Storyline, the only e-learning authoring software that grows with you. It s simple enough for beginners, powerful enough for experts. It s course authoring the easy way. A user interface that feels familiar, features you understand, characters at your fingertips, templates to get you started. Creating HTML5 elearning Products You Install Articulate Storyline 2 18
Creating HTML5 elearning Products You Install Lectora Inspire Lectora Inspire, an authoring tool that includes Lectora, Camtasia for Lectora, Snagit for Lectora, and Flypaper for Lectora in a single product. Lectora Inspire enables users to create, record, and capture content in a way intended to provide value, power, and ease-of-use. Inspire is the result of a partnership between Trivantis, TechSmith Corporation, and Flypaper Studio. Creating HTML5 elearning Products You Install Lectora Inspire Because it outputs HTML. This does not mean it takes full advantage of HTML5. 19
Creating HTML5 elearning Products You Install Harbinger Raptivity Raptivity is a first in class interactivity builder which allows an instructional designer and course developer to quickly and easily create engaging learning interactions. It empowers you to craft compelling content from the finest collection of 190+ interactions across categories like games, simulations, brainteasers, interactive diagrams, virtual worlds and many more. Get started by simply adding content to your interaction! Creating HTML5 elearning Products You Install Harbinger Raptivity Most interactions are available for HTML5. 20
Questions? Read my tool reviews in the Guild s Learning Solutions Magazine: http://www.learningsolutionsmag.com/authors/4/joe-ganci Write me at joe@elearningjoe.com 21