designing & developing mlearning using html5 #mlearncon
DESCRIPTION
HTML5 is rapidly becoming the program of choice when creating sophisticated eLearning. Although not yet fully defined, the major portions now in use provide increased capability when you understand what they do and how to use them.Participants in this session will learn what HTML5, and its core technologies, offers your team, when to adopt it in your solutions, and how to take advantage of HTML5 in developing content. You'll learn how you can use Canvas and SVG graphics for animation, graphics, and interactivity, how you can optimize HTML5's new-media formats and deliver them effectively to desktop and mobile devices, and how you can use geolocation in applications and Web courses.TRANSCRIPT
[email protected]/NickFloro
Designing & Developing mLearning Using
Playing the mobile game? ibooks html5 hidesign mobilefnTuesday, June 19, 2012
1.6 billion Internet users
Tuesday, June 19, 2012
1.5 billion TV’s
Tuesday, June 19, 2012
4.2 billion Mobile Phones
Tuesday, June 19, 2012
3.5 billion Tooth Brushes
Tuesday, June 19, 2012
The Web Platform is Accelerating
Tuesday, June 19, 2012
Graphics Location Storage Speed
Solving Developer Challenges
Tuesday, June 19, 2012
What can we do with
HTML5Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
• network latency• input mechanism• memory
• form factor
• computational power
• context• battery
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
The mobile environmentsingle early failure = non-returning user
Tuesday, June 19, 2012
The mobile environmentcrucial first 30-60 seconds usage
Tuesday, June 19, 2012
The mobile environmentFewer options
Tuesday, June 19, 2012
Tuesday, June 19, 2012
App
Tuesday, June 19, 2012
The Web PlatformTuesday, June 19, 2012
Web App
Tuesday, June 19, 2012
WebApp
Tuesday, June 19, 2012
WebApp
HTML Javascript CSS API’s
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY
Tuesday, June 19, 2012
HTML5 = JS + CSS3
Tuesday, June 19, 2012
Create once and deliver everywhere...
Tuesday, June 19, 2012
Next Generation Mobile Using Webkit
RIM Blackberry
iOSAndroid Windows Phone
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Which browser’s support HTML 5?
Chrome Safari Firefox Opera
Tuesday, June 19, 2012
Internet Explorer 9 BETA
Which browser’s support HTML 5?
Chrome Safari Firefox Opera
Tuesday, June 19, 2012
HTML 5in the works...
Tuesday, June 19, 2012
Advanced Core Language
Tuesday, June 19, 2012
Tuesday, June 19, 2012
HTML 4
Tuesday, June 19, 2012
HTML 5 - Introduces New Elements
Tuesday, June 19, 2012
Improve Web Apps
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Flow chart
CompatibilityTuesday, June 19, 2012
Flow chart
Replaces:XHTML 1.0 & Dom2htmlwith new
API’sTuesday, June 19, 2012
Improve Handling of Errors
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Focus on the
AudienceTuesday, June 19, 2012
Drawing on the Web
Flash
Tuesday, June 19, 2012
Canvas & SVG
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Scalable Vector Graphics | SVG
Tuesday, June 19, 2012
Vector Graphics Scale & Look Great!
Tuesday, June 19, 2012
Tuesday, June 19, 2012
• Mozilla Download Center (FF)
• First Person Gifter (FF)
• Population Demo (FF)
• German Election Atlas (Safari)
Demo’s
Tuesday, June 19, 2012
SVG -> High level• Import/Export• Easy UIs• Interactive• Medium Animation• Tree of objects
Canvas -> Low level• No mouse interaction• High Animation• JS Centric• More Bookkeeping• Pixels
When Canvas or SVG?
Tuesday, June 19, 2012
HTML 5 Support
£ £ £ £canvas / svg
video
geolocation
app cache
database
workers
Tuesday, June 19, 2012
Quake II - Browser Only
Tuesday, June 19, 2012
Quake II - Browser Only
Tuesday, June 19, 2012
Quake II - Browser Only
WebGL 3D graphics
HTML 5 CanvasHTML 5 Audio
HTML 5 Web Sockets
HTML 5 Local Storage
Tuesday, June 19, 2012
Video
Tuesday, June 19, 2012
Capture to delivery and beyondThe Production Process
Authoring DeliveryVideo / Audio Assets Compression
Tuesday, June 19, 2012
Standards Are Everywhere
MPEG-1/
MPEG-4 audio
MPEG-2RedBook JPEGAC-3FM DVNTSC/
PAL
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
HTML 5 OptionsVideo Compression
FlashH264Adobe
H264 | MPEG 4Apple | Microsoft
WebMOgg Theora
Tuesday, June 19, 2012
Tips & Hints• Video – Frame Rate: 15 fps– Data Rate Target 800-1200 kbs
• Audio– 16bit / 22khz / Mono / 64 kbs
• Delivery– Flash: H264 – HTML5: H264
Guidelines for Compression
Tuesday, June 19, 2012
www.longtailvideo.comTuesday, June 19, 2012
Easy Access to VideoFlip $100 to $200
Tuesday, June 19, 2012
Smart Phones
Tuesday, June 19, 2012
Tuesday, June 19, 2012
HTML 5 Support
£ £ £ ££ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
Tuesday, June 19, 2012
geolocation
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
// the geolocation apibrings browser basedlocation to your apps
Tuesday, June 19, 2012
HTML 5 Support
£ £ £ ££ £ £ ££ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
iPhone
Tuesday, June 19, 2012
app cache& database
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
HTML 5 Support
£ £ £ ££ £ £ ££ £ £ ££ £ £ ££ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
iPhone
mobile
mobile
Tuesday, June 19, 2012
web workersTuesday, June 19, 2012
HTML 5More Power
Tuesday, June 19, 2012
// web workers defines an API for runningbackground scripts
Tuesday, June 19, 2012
Bad Primes (FF 3.5)
Good Primes (FF 3.5)
Motion Tracker (FF)
Demo’s
Tuesday, June 19, 2012
HTML 5 Support
£ £ £ ££ £ £ ££ £ £ ££ £ £ ££ £ £ ££ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
iPhone
mobile
mobile
Tuesday, June 19, 2012
FormsCSS 3
Effects/Transitions
JavaScript
Tuesday, June 19, 2012
Test on Windows 7, Vista, XP• Internet Explorer 6, 7, 8, 9
• Firefox 3.5, 3.6, 4.0 +
• Opera 10
Test on OS X− Safari 4− Firefox 3.5, 3.6, 4.0 +− Opera 10
Test Mobile− iOS− Android 2.x-4.x− Blackberry, Windows 7 Phone
Test for Usability
Tuesday, June 19, 2012
How should we
Design?Tuesday, June 19, 2012
Focus on the
Audience1
Tuesday, June 19, 2012
is the keyContent
2Tuesday, June 19, 2012
Transparent
Interface3
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Keep it Simple
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Design: Keep it Simple
Tuesday, June 19, 2012
How do we start?
Tuesday, June 19, 2012
Sketches
Tuesday, June 19, 2012
Wireframes
Tuesday, June 19, 2012
Sketchy & iMockUpsTuesday, June 19, 2012
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
Tuesday, June 19, 2012
www.uistencils.com
Tuesday, June 19, 2012
Wireframes
Tuesday, June 19, 2012
Design• Focus on audience
• Content is key
• Transparent interface
Tuesday, June 19, 2012
Tuesday, June 19, 2012
TextTuesday, June 19, 2012
Text1. Create Text2. Make a selection3. Invert select4. Save alpha channel5. Deselect6. Load Alpha Channel7. Load Color8. Offset9. Apply Blur10. Reposition11. Save12. If the copy changed, start
over
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Design for Flexibility
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 768
iPhone 4960 x
iPhone480 x 320
Droid854 x 480
Tuesday, June 19, 2012
Resources
Tuesday, June 19, 2012
html5rocks.comTuesday, June 19, 2012
lynda.comTuesday, June 19, 2012
http://www.caniuse.com/Tuesday, June 19, 2012
Tuesday, June 19, 2012
tumultco.comTuesday, June 19, 2012
animatable.comTuesday, June 19, 2012
html5demos.comTuesday, June 19, 2012
www.sencha.comTuesday, June 19, 2012
www.css3.infoTuesday, June 19, 2012
www.uxmag.comTuesday, June 19, 2012
typekit.comTuesday, June 19, 2012
CSS3 for Web DesignersDan Cederholm | A Book Apart
aBookApart.comTuesday, June 19, 2012
RESPONSIVE WEB DESIGNETHAN MARCOTTE | A Book Apart
aBookApart.comTuesday, June 19, 2012
HTML5 for Web DesignersJEREMY KEITH | A Book Apart
aBookApart.comTuesday, June 19, 2012
Go Play, Experiment, Dream
AppleiOS
Tuesday, June 19, 2012
Search Flickr.com for iPad UITuesday, June 19, 2012
www.smashingmagazine.comTuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Pictures
Video
Blog
Audio
3D Models
Multiplayer Environment
ePortfolios
Course Management System
Micro-blogging
Explore
Tuesday, June 19, 2012
Capture & AnalyzeTuesday, June 19, 2012
Using CoverFlow view and Preview of GraphicsTuesday, June 19, 2012
Design Scrapbook: iPhoto | LittleSnapperTuesday, June 19, 2012
Tuesday, June 19, 2012
Tuesday, June 19, 2012
Thank You
Nick [email protected]
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Tuesday, June 19, 2012