Designing & Developing mLearning using HTML5 #mlearncon
-
Upload
nick-floro -
Category
Technology
-
view
4.933 -
download
3
description
Transcript of Designing & Developing mLearning using HTML5 #mlearncon
![Page 1: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/1.jpg)
[email protected]/NickFloro
Designing & Developing mLearning Using
Playing the mobile game? ibooks html5 hidesign mobilefnTuesday, June 19, 2012
![Page 2: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/2.jpg)
1.6 billion Internet users
Tuesday, June 19, 2012
![Page 3: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/3.jpg)
1.5 billion TV’s
Tuesday, June 19, 2012
![Page 4: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/4.jpg)
4.2 billion Mobile Phones
Tuesday, June 19, 2012
![Page 5: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/5.jpg)
3.5 billion Tooth Brushes
Tuesday, June 19, 2012
![Page 6: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/6.jpg)
The Web Platform is Accelerating
Tuesday, June 19, 2012
![Page 7: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/7.jpg)
Graphics Location Storage Speed
Solving Developer Challenges
Tuesday, June 19, 2012
![Page 8: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/8.jpg)
What can we do with
HTML5Tuesday, June 19, 2012
![Page 9: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/9.jpg)
Tuesday, June 19, 2012
![Page 10: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/10.jpg)
Tuesday, June 19, 2012
![Page 11: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/11.jpg)
Tuesday, June 19, 2012
![Page 12: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/12.jpg)
Tuesday, June 19, 2012
![Page 13: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/13.jpg)
• network latency• input mechanism• memory
• form factor
• computational power
• context• battery
Tuesday, June 19, 2012
![Page 14: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/14.jpg)
Tuesday, June 19, 2012
![Page 15: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/15.jpg)
Tuesday, June 19, 2012
![Page 16: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/16.jpg)
Tuesday, June 19, 2012
![Page 17: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/17.jpg)
The mobile environmentsingle early failure = non-returning user
Tuesday, June 19, 2012
![Page 18: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/18.jpg)
The mobile environmentcrucial first 30-60 seconds usage
Tuesday, June 19, 2012
![Page 19: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/19.jpg)
The mobile environmentFewer options
Tuesday, June 19, 2012
![Page 20: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/20.jpg)
Tuesday, June 19, 2012
![Page 21: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/21.jpg)
App
Tuesday, June 19, 2012
![Page 22: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/22.jpg)
The Web PlatformTuesday, June 19, 2012
![Page 23: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/23.jpg)
Web App
Tuesday, June 19, 2012
![Page 24: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/24.jpg)
WebApp
Tuesday, June 19, 2012
![Page 25: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/25.jpg)
WebApp
HTML Javascript CSS API’s
Tuesday, June 19, 2012
![Page 26: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/26.jpg)
Tuesday, June 19, 2012
![Page 27: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/27.jpg)
Tuesday, June 19, 2012
![Page 28: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/28.jpg)
Tuesday, June 19, 2012
![Page 29: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/29.jpg)
Tuesday, June 19, 2012
![Page 31: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/31.jpg)
Tuesday, June 19, 2012
![Page 32: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/32.jpg)
Tuesday, June 19, 2012
![Page 33: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/33.jpg)
SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY
Tuesday, June 19, 2012
![Page 34: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/34.jpg)
HTML5 = JS + CSS3
Tuesday, June 19, 2012
![Page 35: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/35.jpg)
Create once and deliver everywhere...
Tuesday, June 19, 2012
![Page 36: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/36.jpg)
Next Generation Mobile Using Webkit
RIM Blackberry
iOSAndroid Windows Phone
Tuesday, June 19, 2012
![Page 37: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/37.jpg)
Tuesday, June 19, 2012
![Page 38: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/38.jpg)
Tuesday, June 19, 2012
![Page 39: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/39.jpg)
Tuesday, June 19, 2012
![Page 40: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/40.jpg)
Tuesday, June 19, 2012
![Page 41: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/41.jpg)
Which browser’s support HTML 5?
Chrome Safari Firefox Opera
Tuesday, June 19, 2012
![Page 42: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/42.jpg)
Internet Explorer 9 BETA
Which browser’s support HTML 5?
Chrome Safari Firefox Opera
Tuesday, June 19, 2012
![Page 43: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/43.jpg)
HTML 5in the works...
Tuesday, June 19, 2012
![Page 44: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/44.jpg)
Advanced Core Language
Tuesday, June 19, 2012
![Page 45: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/45.jpg)
Tuesday, June 19, 2012
![Page 46: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/46.jpg)
HTML 4
Tuesday, June 19, 2012
![Page 47: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/47.jpg)
HTML 5 - Introduces New Elements
Tuesday, June 19, 2012
![Page 48: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/48.jpg)
Improve Web Apps
Tuesday, June 19, 2012
![Page 49: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/49.jpg)
Tuesday, June 19, 2012
![Page 50: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/50.jpg)
Tuesday, June 19, 2012
![Page 51: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/51.jpg)
Tuesday, June 19, 2012
![Page 52: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/52.jpg)
Flow chart
CompatibilityTuesday, June 19, 2012
![Page 53: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/53.jpg)
Flow chart
Replaces:XHTML 1.0 & Dom2htmlwith new
API’sTuesday, June 19, 2012
![Page 54: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/54.jpg)
Improve Handling of Errors
Tuesday, June 19, 2012
![Page 55: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/55.jpg)
Tuesday, June 19, 2012
![Page 56: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/56.jpg)
Focus on the
AudienceTuesday, June 19, 2012
![Page 59: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/59.jpg)
Drawing on the Web
Flash
Tuesday, June 19, 2012
![Page 60: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/60.jpg)
Canvas & SVG
Tuesday, June 19, 2012
![Page 61: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/61.jpg)
Tuesday, June 19, 2012
![Page 62: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/62.jpg)
Scalable Vector Graphics | SVG
Tuesday, June 19, 2012
![Page 63: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/63.jpg)
Vector Graphics Scale & Look Great!
Tuesday, June 19, 2012
![Page 64: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/64.jpg)
Tuesday, June 19, 2012
![Page 65: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/65.jpg)
• Mozilla Download Center (FF)
• First Person Gifter (FF)
• Population Demo (FF)
• German Election Atlas (Safari)
Demo’s
Tuesday, June 19, 2012
![Page 66: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/66.jpg)
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
![Page 67: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/67.jpg)
HTML 5 Support
£ £ £ £canvas / svg
video
geolocation
app cache
database
workers
Tuesday, June 19, 2012
![Page 68: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/68.jpg)
Quake II - Browser Only
Tuesday, June 19, 2012
![Page 69: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/69.jpg)
Quake II - Browser Only
Tuesday, June 19, 2012
![Page 70: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/70.jpg)
Quake II - Browser Only
WebGL 3D graphics
HTML 5 CanvasHTML 5 Audio
HTML 5 Web Sockets
HTML 5 Local Storage
Tuesday, June 19, 2012
![Page 71: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/71.jpg)
Video
Tuesday, June 19, 2012
![Page 72: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/72.jpg)
Capture to delivery and beyondThe Production Process
Authoring DeliveryVideo / Audio Assets Compression
Tuesday, June 19, 2012
![Page 73: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/73.jpg)
Standards Are Everywhere
MPEG-1/
MPEG-4 audio
MPEG-2RedBook JPEGAC-3FM DVNTSC/
PAL
Tuesday, June 19, 2012
![Page 74: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/74.jpg)
Tuesday, June 19, 2012
![Page 75: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/75.jpg)
Tuesday, June 19, 2012
![Page 76: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/76.jpg)
Tuesday, June 19, 2012
![Page 77: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/77.jpg)
HTML 5 OptionsVideo Compression
FlashH264Adobe
H264 | MPEG 4Apple | Microsoft
WebMOgg Theora
Tuesday, June 19, 2012
![Page 78: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/78.jpg)
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
![Page 79: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/79.jpg)
www.longtailvideo.comTuesday, June 19, 2012
![Page 80: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/80.jpg)
Easy Access to VideoFlip $100 to $200
Tuesday, June 19, 2012
![Page 81: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/81.jpg)
Smart Phones
Tuesday, June 19, 2012
![Page 82: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/82.jpg)
Tuesday, June 19, 2012
![Page 84: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/84.jpg)
HTML 5 Support
£ £ £ ££ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
Tuesday, June 19, 2012
![Page 85: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/85.jpg)
geolocation
Tuesday, June 19, 2012
![Page 86: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/86.jpg)
Tuesday, June 19, 2012
![Page 87: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/87.jpg)
Tuesday, June 19, 2012
![Page 88: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/88.jpg)
Tuesday, June 19, 2012
![Page 89: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/89.jpg)
// the geolocation apibrings browser basedlocation to your apps
Tuesday, June 19, 2012
![Page 91: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/91.jpg)
HTML 5 Support
£ £ £ ££ £ £ ££ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
iPhone
Tuesday, June 19, 2012
![Page 92: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/92.jpg)
app cache& database
Tuesday, June 19, 2012
![Page 93: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/93.jpg)
Tuesday, June 19, 2012
![Page 94: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/94.jpg)
Tuesday, June 19, 2012
![Page 95: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/95.jpg)
HTML 5 Support
£ £ £ ££ £ £ ££ £ £ ££ £ £ ££ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
iPhone
mobile
mobile
Tuesday, June 19, 2012
![Page 96: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/96.jpg)
web workersTuesday, June 19, 2012
![Page 97: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/97.jpg)
HTML 5More Power
Tuesday, June 19, 2012
![Page 98: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/98.jpg)
// web workers defines an API for runningbackground scripts
Tuesday, June 19, 2012
![Page 99: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/99.jpg)
Bad Primes (FF 3.5)
Good Primes (FF 3.5)
Motion Tracker (FF)
Demo’s
Tuesday, June 19, 2012
![Page 100: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/100.jpg)
HTML 5 Support
£ £ £ ££ £ £ ££ £ £ ££ £ £ ££ £ £ ££ £ £ £
canvas / svg
video
geolocation
app cache
database
workers
iPhone
mobile
mobile
Tuesday, June 19, 2012
![Page 101: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/101.jpg)
FormsCSS 3
Effects/Transitions
JavaScript
Tuesday, June 19, 2012
![Page 102: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/102.jpg)
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
![Page 103: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/103.jpg)
How should we
Design?Tuesday, June 19, 2012
![Page 104: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/104.jpg)
Focus on the
Audience1
Tuesday, June 19, 2012
![Page 105: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/105.jpg)
is the keyContent
2Tuesday, June 19, 2012
![Page 106: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/106.jpg)
Transparent
Interface3
Tuesday, June 19, 2012
![Page 107: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/107.jpg)
Tuesday, June 19, 2012
![Page 108: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/108.jpg)
Tuesday, June 19, 2012
![Page 109: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/109.jpg)
Tuesday, June 19, 2012
![Page 110: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/110.jpg)
Keep it Simple
Tuesday, June 19, 2012
![Page 111: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/111.jpg)
Tuesday, June 19, 2012
![Page 112: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/112.jpg)
Design: Keep it Simple
Tuesday, June 19, 2012
![Page 113: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/113.jpg)
How do we start?
Tuesday, June 19, 2012
![Page 114: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/114.jpg)
Sketches
Tuesday, June 19, 2012
![Page 115: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/115.jpg)
Wireframes
Tuesday, June 19, 2012
![Page 117: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/117.jpg)
Sketchy & iMockUpsTuesday, June 19, 2012
![Page 118: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/118.jpg)
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
Tuesday, June 19, 2012
![Page 119: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/119.jpg)
www.uistencils.com
Tuesday, June 19, 2012
![Page 120: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/120.jpg)
Wireframes
Tuesday, June 19, 2012
![Page 121: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/121.jpg)
Design• Focus on audience
• Content is key
• Transparent interface
Tuesday, June 19, 2012
![Page 122: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/122.jpg)
Tuesday, June 19, 2012
![Page 123: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/123.jpg)
TextTuesday, June 19, 2012
![Page 124: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/124.jpg)
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
![Page 125: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/125.jpg)
Tuesday, June 19, 2012
![Page 126: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/126.jpg)
Tuesday, June 19, 2012
![Page 127: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/127.jpg)
Tuesday, June 19, 2012
![Page 128: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/128.jpg)
Design for Flexibility
Tuesday, June 19, 2012
![Page 129: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/129.jpg)
Tuesday, June 19, 2012
![Page 130: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/130.jpg)
Tuesday, June 19, 2012
![Page 131: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/131.jpg)
Tuesday, June 19, 2012
![Page 132: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/132.jpg)
Tuesday, June 19, 2012
![Page 133: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/133.jpg)
Tuesday, June 19, 2012
![Page 134: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/134.jpg)
Tuesday, June 19, 2012
![Page 135: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/135.jpg)
Tuesday, June 19, 2012
![Page 136: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/136.jpg)
Tuesday, June 19, 2012
![Page 137: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/137.jpg)
Tuesday, June 19, 2012
![Page 138: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/138.jpg)
Tuesday, June 19, 2012
![Page 139: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/139.jpg)
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
![Page 140: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/140.jpg)
Resources
Tuesday, June 19, 2012
![Page 141: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/141.jpg)
html5rocks.comTuesday, June 19, 2012
![Page 142: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/142.jpg)
lynda.comTuesday, June 19, 2012
![Page 143: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/143.jpg)
http://www.caniuse.com/Tuesday, June 19, 2012
![Page 144: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/144.jpg)
Tuesday, June 19, 2012
![Page 145: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/145.jpg)
tumultco.comTuesday, June 19, 2012
![Page 146: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/146.jpg)
animatable.comTuesday, June 19, 2012
![Page 147: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/147.jpg)
html5demos.comTuesday, June 19, 2012
![Page 148: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/148.jpg)
www.sencha.comTuesday, June 19, 2012
![Page 149: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/149.jpg)
www.css3.infoTuesday, June 19, 2012
![Page 150: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/150.jpg)
www.uxmag.comTuesday, June 19, 2012
![Page 151: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/151.jpg)
typekit.comTuesday, June 19, 2012
![Page 152: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/152.jpg)
CSS3 for Web DesignersDan Cederholm | A Book Apart
aBookApart.comTuesday, June 19, 2012
![Page 153: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/153.jpg)
RESPONSIVE WEB DESIGNETHAN MARCOTTE | A Book Apart
aBookApart.comTuesday, June 19, 2012
![Page 154: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/154.jpg)
HTML5 for Web DesignersJEREMY KEITH | A Book Apart
aBookApart.comTuesday, June 19, 2012
![Page 155: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/155.jpg)
Go Play, Experiment, Dream
AppleiOS
Tuesday, June 19, 2012
![Page 156: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/156.jpg)
Search Flickr.com for iPad UITuesday, June 19, 2012
![Page 157: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/157.jpg)
www.smashingmagazine.comTuesday, June 19, 2012
![Page 158: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/158.jpg)
Tuesday, June 19, 2012
![Page 159: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/159.jpg)
Tuesday, June 19, 2012
![Page 160: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/160.jpg)
Tuesday, June 19, 2012
![Page 161: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/161.jpg)
Tuesday, June 19, 2012
![Page 162: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/162.jpg)
Tuesday, June 19, 2012
![Page 163: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/163.jpg)
Pictures
Video
Blog
Audio
3D Models
Multiplayer Environment
ePortfolios
Course Management System
Micro-blogging
Explore
Tuesday, June 19, 2012
![Page 164: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/164.jpg)
Capture & AnalyzeTuesday, June 19, 2012
![Page 165: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/165.jpg)
Using CoverFlow view and Preview of GraphicsTuesday, June 19, 2012
![Page 166: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/166.jpg)
Design Scrapbook: iPhoto | LittleSnapperTuesday, June 19, 2012
![Page 167: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/167.jpg)
Tuesday, June 19, 2012
![Page 168: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/168.jpg)
Tuesday, June 19, 2012
![Page 169: Designing & Developing mLearning using HTML5 #mlearncon](https://reader034.fdocuments.net/reader034/viewer/2022052522/554d1e06b4c905c5208b489c/html5/thumbnails/169.jpg)
Thank You
Nick [email protected]
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Tuesday, June 19, 2012