View
1.612
Download
2
Category
Preview:
Citation preview
Mobile Learning(mLearning)
Nick@sealworks.comTwitter.com/NickFloro
Designing
starts at 2:45
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 1 of 165 03/24/11
The Web Platform is AcceleratingDesiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 2 of 165 03/24/11
Graphics Location Storage Speed
Solving Developer ChallengesDesiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 3 of 165 03/24/11
480 million NewspapersDesiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 4 of 165 03/24/11
1.4 billion Internet usersDesiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 5 of 165 03/24/11
1.7 billion Credit CardsDesiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 7 of 165 03/24/11
2.25 billion Tooth BrushesDesiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 8 of 165 03/24/11
4 billion Mobile PhonesDesiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 9 of 165 03/24/11
Develop oncePush everywhere
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 10 of 165 03/24/11
7 Questions to Define the Project
What is the goal?
What are the learning objectives?
Who is the audience and how will they use it?
What is the timetable?
Current technology or solution in place?
What is the budget?
Does the content exist?
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 12 of 165 03/24/11
Understanding the
Technology
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 13 of 165 03/24/11
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 768
iPhone 4960 x 640
iPhone480 x 320
Droid854 x 480
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 21 of 165 03/24/11
Sample Simulation with HTML 5
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 22 of 165 03/24/11
HTML 5CSS3 AJAX
JAVASCRIPT JQueryDesiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 25 of 165 03/24/11
ToolsDevelopment
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 26 of 165 03/24/11
Publish for iPhone
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 27 of 165 03/24/11
Publish for iPhone
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 28 of 165 03/24/11
Publish for iPhone
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 29 of 165 03/24/11
Publish for Android
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 30 of 165 03/24/11
Publish for Android
Publish for iPhone
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 31 of 165 03/24/11
labs.adobe.com/technologies/wallaby/
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 32 of 165 03/24/11
Text MessagingSMS Integration
Would you like to sell, hold or buy?
1. Sell
2. Buy
3. Hold
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 35 of 165 03/24/11
www.runrev.com
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 36 of 165 03/24/11
www.eclipse.org
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 37 of 165 03/24/11
www.gamesalad.com
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 38 of 165 03/24/11
Understand Design
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 39 of 165 03/24/11
Itʼs about communication and problem solving.
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 40 of 165 03/24/11
Design is how it works.
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 41 of 165 03/24/11
How do we start?
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 42 of 165 03/24/11
www.balsamiq.com
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 45 of 165 03/24/11
Sketchy & iMockUps
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 46 of 165 03/24/11
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 47 of 165 03/24/11
Pulse for iOS
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 48 of 165 03/24/11
Design• Focus on audience
• Content is key
• Transparent interface
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 50 of 165 03/24/11
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
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 53 of 165 03/24/11
Advanced Core Language
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 58 of 165 03/24/11
The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.
<body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer></body>
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 63 of 165 03/24/11
Improve Web Apps
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 64 of 165 03/24/11
Re-Address backwardcompatibility
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 65 of 165 03/24/11
Drawing on the Web
Flash
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 67 of 165 03/24/11
Scalable Vector Graphics | SVGDesiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 68 of 165 03/24/11
Scalable Vector Graphics | SVGDesiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 69 of 165 03/24/11
Vector Graphics Scale & Look Great!Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 70 of 165 03/24/11
• Mozilla Download Center (FF)
• First Person Gifter (FF)
• Population Demo (FF)
• Bespin - HTML Editor (Safari)
• German Election Atlas (Safari)
Demoʼs
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 72 of 165 03/24/11
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?
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 73 of 165 03/24/11
HTML 5 Support
canvas / svg
video
geolocation
app cache
database
workers
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 74 of 165 03/24/11
Quake II - Browser Only
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 75 of 165 03/24/11
Quake II - Browser Only
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 76 of 165 03/24/11
Quake II - Browser Only
WebGL 3D graphics
HTML 5 CanvasHTML 5 Audio
HTML 5 Web Sockets
HTML 5 Local Storage
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 77 of 165 03/24/11
Video Compression
Flash
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 79 of 165 03/24/11
<!-- flash movie & bullets --> <div id="flashholder"> <div id="flash"> <script language="javascript"> if (AC_FL_RunContent == 0) { alert("This page requires AC_RunActiveContent.js."); } else { AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0', 'width', '320', 'height', '310', 'src', '../FLV_Player', 'quality', 'high', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'align', 'middle', 'play', 'true', 'loop', 'true', 'scale', 'showall', 'wmode', 'window', 'devicefont', 'false', 'id', 'FLV_Player', 'bgcolor', '#ffffff', 'name', 'FLV_Player', 'menu', 'true', 'allowFullScreen', 'false', 'allowScriptAccess','always', 'movie', '../FLV_Player', 'salign', '' ); //end AC code } </script> <noscript>
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 80 of 165 03/24/11
// HTML 5 makes<video> as easyas <img>// HTML 5 makes <video> as easy as <img>
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 81 of 165 03/24/11
HTML 5 OptionsVideo Compression
Flash H264MPEG 4
Ogg Theora WebM
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 82 of 165 03/24/11
Theora is named after Theora Jones, Edison Carter's Controller on the Max Headroom television program.
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 83 of 165 03/24/11
<video src="http://example.com/myMovie.ogg" controls>Your browser does not support the video element.</video>
Embedding VideoDesiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 85 of 165 03/24/11
<video controls><source src="foo.ogg" type="video/ogg"><source src="foo.mp4">Your browser does not support the video element.</video>
var v = document.getElementsByTagName("video")[0];v.play();
Embedding VideoDesiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 86 of 165 03/24/11
http://jilion.com/sublime/video
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 87 of 165 03/24/11
HTML 5 Support
canvas / svg
video
geolocation
app cache
database
workers
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 91 of 165 03/24/11
// the geolocation apibrings browser basedlocation to your apps
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 95 of 165 03/24/11
HTML 5 Support
canvas / svg
video
geolocation
app cache
database
workers
iPhone
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 97 of 165 03/24/11
app cache& database
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 98 of 165 03/24/11
// database and app cache store user data and app resources locally
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 100 of 165 03/24/11
App CacheList resources that you want to take offline
CACHE MANIFEST/static/stickies.html/media/deleteButton.png/media/deleteButtonPressed.png/css/stickies.css/js/stickies.js<body manifest="./cache.manifest"></body>
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 103 of 165 03/24/11
Databasevar db = window.openDatabase("NoteTest", "1.0","Example DB",200000);function saveMe(id, text, timestamp, left, top, zIndex) {db.transaction(function (tx) {tx.executeSql("INSERT INTO WebKitStickyNotes "+ "(id, note, timestamp, left, top, zindex) "+ "VALUES (?, ?, ?, ?, ?, ?)",[id, text, timestamp, left, top, zIndex]);});}
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 104 of 165 03/24/11
HTML 5 Support
canvas / svg
video
geolocation
app cache
database
workers
iPhone
mobile
mobile
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 105 of 165 03/24/11
HTML 5More Power
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 107 of 165 03/24/11
// web workers defines an API for runningbackground scripts
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 108 of 165 03/24/11
Bad Primes (FF 3.5)
Good Primes (FF 3.5)
Motion Tracker (FF)
Demo’sDesiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 109 of 165 03/24/11
Web Workers
<script>var worker = new Worker('worker.js');worker.onmessage = function (event) {console.log('Results: ' + event.data);};</script>
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 110 of 165 03/24/11
worker.js
function findPrimes() {// ... prime algorithm herepostMessage(nextPrime);}findPrimes();
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 111 of 165 03/24/11
HTML 5 Support
canvas / svg
video
geolocation
app cache
database
workers
iPhone
mobile
mobile
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 112 of 165 03/24/11
Test on Windows 7, Vista• Internet Explorer 6, 7, 8, 9
• Firefox 3, 3.5, 3.6
• Opera 10
Test on OS X− Safari 4− Firefox 3.5, 3.6− Opera 10
Test Mobile− iPhone− Android− Blackberry, Windows 7 Phon
Test for UsabilityDesiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 113 of 165 03/24/11
Forms
CSS 3
Effects/Transitions
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 115 of 165 03/24/11
Design for Flexibility
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 116 of 165 03/24/11
GamersBorn ≥ 1980
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 117 of 165 03/24/11
GamersBorn ≥ 1980
‣ 8-10 1+ hour/day
‣ teens 13+ hours week
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 118 of 165 03/24/11
GamersBorn ≥ 1980
‣ 43% females
‣ 5 hours a week
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 119 of 165 03/24/11
experiencesDesigning
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 120 of 165 03/24/11
us.wii.com
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 121 of 165 03/24/11
How should we
Design?
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 125 of 165 03/24/11
Focus on the
Audience1
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 126 of 165 03/24/11
is the keyContent
2
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 127 of 165 03/24/11
Transparent
Interface3Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 128 of 165 03/24/11
Keep it Simple
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 132 of 165 03/24/11
Design: Keep it Simple
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 134 of 165 03/24/11
Games1.Play
2.Watch others play
3.Experiment
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 137 of 165 03/24/11
Capture & Analyze
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 139 of 165 03/24/11
Using CoverFlow view and Preview of Graphics
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 140 of 165 03/24/11
Design Scrapbook: iPhoto | LittleSnapper
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 141 of 165 03/24/11
CSS3 for Web DesignersDan Cederholm | A Book Apart
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 145 of 165 03/24/11
www.istockphoto.com
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 146 of 165 03/24/11
Introducing HTML5
Bruce Lawson(Voices That Matter)
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 149 of 165 03/24/11
html5doctor.com
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 150 of 165 03/24/11
http://www.caniuse.com/
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 151 of 165 03/24/11
html5demos.com
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 153 of 165 03/24/11
html5gallery.com
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 154 of 165 03/24/11
www.thinkvitamin.com
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 156 of 165 03/24/11
www.TED.com
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 157 of 165 03/24/11
Nancy Durate Garr Reynolds
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 158 of 165 03/24/11
www.posterous.com
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 159 of 165 03/24/11
easily drag & drop anything into email
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 160 of 165 03/24/11
Posterous will automatically wrap and prep for web
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 161 of 165 03/24/11
Most urls YouTube, SlideShare will get a player
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 163 of 165 03/24/11
www.kesiev.com/akihabara/
Desiging Mobile Learning Nick@sealworks.com
twitter.com/nickfloro 164 of 165 03/24/11
Recommended