Fantastic 5: Use the Power of HTML5 for Good

Views:
 
Category: Education
     
 

Presentation Description

originally presented at eLearning Guild's DevLearn 2013 http://www.elearningguild.com/DevLearn/concurrent-sessions/session-details.cfm?session=4929 BOOM! HTML5 has exploded since its inception just a few short years ago. With all of the information and opinions on the web about HTML5, there are many questions about what HTML5 can do and what development techniques can be used to increase interactivity in eLearning and mobile content. This session will highlight exciting emerging HTML5 technologies—including many open-source tools—and will provide real-world, working examples of ways to harness HTML5’s vast power in your projects.

Comments

Presentation Transcript

Fantastic 5: Use the Power of HTML5 for Good:

Fantastic 5: Use the Power of HTML5 for Good Michael Sheyahshe Senior Associate | Software Developer

Contact & Connect :

Contact & Connect eLearnDevTech blog – http://elearndevtech.blogspot.com Twitter @mas_edev @damoEdev, eLearnDevGeek, @gardelearndev Podcast (*new) http://elearning-developers- toolbox.com or https://itunes.apple.com/us/podcast/elearning-developers-toolbox/ id726594701

Obligatory Background:

Research authority Childhood = pop culture junkie Comic 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:

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:

Emerging HTML5 technologies

Emerging HTML5 technologies:

Emerging HTML5 technologies

Emerging HTML5 technologies:

Emerging HTML5 technologies

Emerging HTML5 technologies:

Emerging HTML5 technologies

Emerging HTML5 technologies:

Emerging HTML5 technologies

How HTML5 Works :

How HTML5 Works

HTML5’s “Family”*:

HTML5’s “Family”* *sort of

Bubble, Bubble…:

Bubble, Bubble…

PowerPoint Presentation:

What’s In? <!DOCTYPE html> Canvas audio/video elements local storage What’s Out? Old L-O-N-G Doctype <frame>, < noframes >, & <applet> <font>, <strikethrough>, etc. now handled by CSS HTML4 HTML5

Implementing HTML5:

Implementing HTML5

Migration from HTML4:

Migration from HTML4 HTML5 HTML4

HTML5 Tips & Tricks:

Save time; save resources. HTML5 Tips & Tricks

Recycle / Reuse:

Recycle / Reuse Don’t re-invent the wheel…

Use Modernizr:

Use Modernizr Browser supports ? Use to offer maximum coverage http ://modernizr.com /

Lookout for BOMs:

Lookout for BOMs Ensure that text files are properly formatted

Open Source Tools for HTML5:

Get the most bang for your buck. Open Source Tools for HTML5

Responsive Design*:

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 / *don’t forget images

Gestures - HammerJS:

Gestures - HammerJS Small / free / robust http://eightmedia.github.com/hammer.js/

Real-time 3D – ThreeJS*:

Real-time 3D – ThreeJS * Example 3: Static image vs. 3D rotation *if your GFX card works

Interactive content - TouchSlider:

Interactive content - TouchSlider Quickly add gestures and touch controls to existing content http ://touchslider.com / Use as shortcut for digital comics

Swiffy:

Swiffy HTML5 Flash https://www.google.com/doubleclick/studio/swiffy /

Making HTML5 ‘Work’ :

Digital Comic Book Making HTML5 ‘Work’

How Digital Comics Handle Panels:

How Digital Comics Handle Panels

Cut it Out:

Cut it Out Use Photoshop to arrange Slice up full page / large info chunk into smaller ones

Panel by Panel View:

Panel by Panel View Use TouchSlider or similar code to scroll through panels via gestures

Full Page to Panels and Back:

Full Page to Panels and Back Use simple JavaScript toggle function to show/hide full page or panel view

Orient It:

Orient It Use JavaScript listen for orientation change toggle between landscape / portrait view

Example on iPad:

Example on iPad

Adding Gestures:

Using HammerJS Adding Gestures

Make JS calls:

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

Usual Suspects:

Usual Suspects

You can DIV it !!!:

You can DIV it !!! Finish what you start….

Last Call:

Last Call Place new function at HTML page bottom.

Learn by Example:

Learn by Example Look familiar? Hammer.js demo code

Important Bits:

Important Bits

Important Bits:

Important Bits

Make the Right Call:

Make the Right Call

Rinse & Repeat:

Rinse & Repeat

Finally…:

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

?’s:

?’ s

Contact & Connect :

Contact & Connect eLearnDevTech blog – http://elearndevtech.blogspot.com Twitter @mas_edev @damoEdev, eLearnDevGeek, @gardelearndev Podcast (*new) http://elearning-developers- toolbox.com or https://itunes.apple.com/us/podcast/elearning-developers-toolbox/ id726594701

authorStream Live Help