Fantastic 5: Use the Power of

HTML5 for Good

Michael Sheyahshe

Senior Associate | Software Developer

Contact & Connect

eLearnDevTech blog –

http://elearndevtech.blogspot.com

Twitter

@mas_edev

@damoEdev, eLearnDevGeek, @gardelearndev

Research authority

Childhood = pop culture junkieComic books PLUS, media that celebrates notion of ‘superhero’:

1950s TV - Lone Ranger & Tonto

1960s TV - Batman

1970s TV – Six Million Dollar Man | Bionic Woman | Wonder Woman

Japanese TV - Ultraman

Author of book on pop culture (specifically on comic books)

Information Technology

16+ years @ academic level, specializing in:

Animation

Digital Media

3D Modeling / Games / Sims / etc.

Current position

ICF Software Developer

Academic stuff

Master of Fine Arts

Bachelor of Arts – 1) Film 2) Native Studies

Obligatory Background

Overview

Emerging HTML5 technologies

How these HTML5 tools work

How to implement the HTML5 tools

Tips and tricks to use HTML5 tools

Various open-source code and tools to use

Overall development techniques to increase interactivity

Emerging HTML5

technologies

How HTML5 Works

HTML5’s “Family”*

*sort of

HTML4

HTML5

Implementing HTML5

Migration from HTML4

HTML5

HTML4

Save time; save resources.HTML5 Tips & Tricks

Recycle / Reuse

Don’t re-invent the wheel…

Use Modernizr

Browser supports?

Use to offer maximum coverage

http://modernizr.com/

Lookout for BOMsEnsure that text files are properly formatted

Get the most bang for your buck.

Open Source Tools for

HTML5

Responsive Design

Think beyond desktop

Leverage the ‘mobile’ of ‘mobile device’

GPS/location

Camera

Devices dilemma

Different configuration

Target device specialties

Ex. PNGs on iPad

http://html5up.net/

http://html5templates.com/

Gestures - HammerJS

Small / free / robust

http://eightmedia.github.com/hammer.js/

Real-time 3D - ThreeJSExample 3: Static image vs. 3D rotation

Interactive content - TouchSlider

Quickly add gestures and touch controls to existing content

http://touchslider.com/

Swiffy

HTML5

Flash

https://www.google.com/doubleclick/studio/swiffy/

Digital Comic Book

Making HTML5 ‘Work’

How Digital Comics Handle Panels

Cut it Out

Use Photoshop to arrange

Slice up full page / large info chunk into smaller

ones

Panel by Panel ViewUse TouchSlider or similar code to scroll through panels via

gestures

Full Page to Panels and BackUse simple JavaScript toggle function to show/hide full page or

panel view

Orient It

Use JavaScript

listen for orientation change

toggle between landscape / portrait view

Example on iPad

Using HammerJSAdding Gestures

Make JS calls

Note: Lectora used, but can work for almost any HTML content

Usual Suspects

You can DIV it !!!

Finish what you start….

Last CallPlace new function at HTML page bottom.

Learn by Example

• Look familiar?

• Hammer.js demo code

Important Bits

Important Bits

Make the Right Call

Rinse & Repeat

Finally…

HTML5 now…

Easily convert HTML4 docs to HTML5

Flash to HTML5?

…but THINK ahead

Device/Design layout

User interaction/gestures

…and always have a backup plan (esp for IE)

“If IE…”

Modernizr

Contact & Connect

eLearnDevTech blog –

http://elearndevtech.blogspot.com

Twitter

@mas_edev

@damoEdev, eLearnDevGeek, @gardelearndev