Essentials of HTML5 11/11/ Simply, the new version of HTML. 2. HTML = Hypertext Markup Language. 3. BUT it really isn t just HTML.

Size: px

Start display at page:

Download "Essentials of HTML5 11/11/2014. 1. Simply, the new version of HTML. 2. HTML = Hypertext Markup Language. 3. BUT it really isn t just HTML."

Elinor Pitts
7 years ago
Views:

1 Essentials of HTML5 Joe Ganci elearning Joe Read my tool reviews in the Guild s Learning Solutions Magazine: elearningjoe@joeganci.com joe@elearningjoe.com Newsletter: What is HTML5? 1. Simply, the new version of HTML. 2. HTML = Hypertext Markup Language. 3. BUT it really isn t just HTML. 1

2 What is HTML5? HTML CSS3 JavaScript Hypertext Markup Language Cascading Style Sheets NOT to be confused with Java! What is HTML5? 2

3 Flash vs. HTML5 Flash vs. HTML5 Flash is almost dead now. 3

4 Flash vs. HTML5 HTML5 is alive but HTML5 Compatibility HTML5test.com Google Chrome v36 4

5 HTML5 Compatibility HTML5test.com Firefox v29 HTML5 Compatibility HTML5test.com Internet Explorer v11 5

6 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

with mobile delivery. They are not one and the same.

7 HTML5 Compatibility HTML5 Compatibility 7

8 HTML5 Compatibility HTML5 Compatibility 8

9 You Try It! Open each browser on your computer and navigate to 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: addresses Date and time Telephone number URL and more Gelocation 9

HTML5 New, Important Features The canvas element Allows for precise placement of elements on the screen. Draw in 2D.

10 Important Websites Example websites Creating HTML5 elearning Power vs. Ease of Use 10

11 Creating HTML5 elearning The Challenge Creating HTML5 elearning The Challenge Or 11

12 Creating HTML5 elearning PowerPoint Creating HTML5 elearning - The PowerPoint Add-Ons Adobe Presenter 10 12

13 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

using the Mobile Presenter Player, which interprets Flash.

14 Creating HTML5 elearning - The PowerPoint Add-Ons Articulate Studio 13 Creating HTML5 elearning - The PowerPoint Add-Ons ispring Suite 7 14

15 Creating HTML5 elearning - The PowerPoint Add-Ons ispring Suite 7 Creating HTML5 elearning - The PowerPoint Add-Ons Zenler Studio 15

16 Creating HTML5 elearning - The PowerPoint Add-Ons Zenler Studio Creating HTML5 elearning Products You Install Install? 16

17 Creating HTML5 elearning Products You Install Adobe Captivate Current Version: 8 Creating HTML5 elearning Products You Install Adobe Captivate 17

18 Creating HTML5 elearning Products You Install Articulate Storyline 2 Current Version: 2 Update 1 You can install on: Windows 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

Create polished interactive courses with Articulate Storyline, the only e-learning authoring software that grows with you.

19 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

Lectora Inspire enables users to create, record, and capture content in a way intended to provide value, power, and ease-of-use.

20 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

It empowers you to craft compelling content from the finest collection of 190+ interactions across categories like games, simulations, brainteasers,

21 Questions? Read my tool reviews in the Guild s Learning Solutions Magazine: Write me at joe@elearningjoe.com 21

An Overview of HTML5 and Deciding When to Use It. Robby Robson, Ph.D. & Heather L. Jones, MCT Eduworks

An Overview of HTML5 and Deciding When to Use It Robby Robson, Ph.D. & Heather L. Jones, MCT Eduworks Learning Objectives At the end of this tutorial, you should be able to Describe the problems that HTML5