REDEFINING THE DOCUMENT

or how to develop e-learning

using web standards

Multimedia architect

E-learning developer since back in the days

Loves visuals and communications

Tech Lead at Creative Learning Solutions, Dare Mighty Things Inc.

Independent Consultant

HARLEY O’BRIEN

WE ARE NOT IN KANSAS ANYMORE

E-LEARNING: THE PREQUEL

E-LEARNING: NOW

E-LEARNING DEVELOPMENT

IS WEB DEVELOPMENT

Product

X

HTML 5

CSS

jQuery

• ________• ________• ________• ________• ________• ________• ________• ________• ________

MENU

MEDIA/CONTENT

FOOTER

BLACK BOX

• ________• ________• ________• ________• ________• ________• ________• ________• ________

• ________• ________• ________• ________• ________• ________• ________• ________• ________

• ________• ________• ________• ________• ________• ________• ________• ________• ________

dependent on players

monolithic

non responsive

minimal reusability

ADAPT TO ADAPTIVE

the response is responsive

CONTENT

FOOTER

MENU

HEADER

CONTENT

FOOTER

MENU

HEADER

CONTENT

FOOTER

MENU

HEADER

XML HTML5 CSS jQuery Media

• Text content

• Structure

• Semantics

• Navigation

• Layout

• Presentation

• Design

• Behaviors

• Effects

• UX

• Video

• Animation

• Interactivities

• Audio

• Text content

• Structure

• Back end

IT’S A MASHED UP WORLD

IT’S A MASHED UP WORLD

<iframe width="560" height="315”

src=http://www.youtube.com/embed/gtpTd3ywwiE

frameborder="0" allowfullscreen></iframe>

do not fear text

widgetize your media

small is beautiful

everything is relative

12

34

HANDS-ON TIME

QUESTIONS?

@harleyobrien

RESOURCESwww.jquerymobile.com

www.skydrive.com

www.adobe.com/edge

www.tumult.com/hype

www.pipwerks.com/downloads

www.jcasolutions.com/ssp