View
33
Download
0
Category
Tags:
Preview:
DESCRIPTION
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. Obligatory Background. - PowerPoint PPT Presentation
Citation preview
Fantastic 5: Use the Power of
HTML5 for Good
Michael Sheyahshe
Senior Associate | Software Developer
Contact & Connect
eLearnDevTech blog –
http://elearndevtech.blogspot.com
@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
@mas_edev
@damoEdev, eLearnDevGeek, @gardelearndev
Recommended