Desigining for Mobile Learning

Mobile Learning(mLearning)

[email protected]/NickFloro

Designing

starts at 2:45

Desiging Mobile Learning [email protected]

twitter.com/nickfloro 1 of 165 03/24/11

The Web Platform is AcceleratingDesiging Mobile Learning [email protected]


Graphics Location Storage Speed

Solving Developer ChallengesDesiging Mobile Learning [email protected]


480 million NewspapersDesiging Mobile Learning [email protected]


1.4 billion Internet usersDesiging Mobile Learning [email protected]


1.5 billion TV’sDesiging Mobile Learning [email protected]


1.7 billion Credit CardsDesiging Mobile Learning [email protected]


2.25 billion Tooth BrushesDesiging Mobile Learning [email protected]


4 billion Mobile PhonesDesiging Mobile Learning [email protected]


Develop oncePush everywhere





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?



Understanding the

Technology

















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



Sample Simulation with HTML 5



Web App



AppWeb



HTML 5CSS3 AJAX

JAVASCRIPT JQueryDesiging Mobile Learning [email protected]


ToolsDevelopment



Publish for iPhone



Publish for iPhone



Publish for iPhone



Publish for Android



Publish for Android

Publish for iPhone



labs.adobe.com/technologies/wallaby/



http://www.telestream.net/screen-flow/overview.htm








Text MessagingSMS Integration

Would you like to sell, hold or buy?

1. Sell

2. Buy

3. Hold



www.runrev.com







www.eclipse.org







www.gamesalad.com







Understand Design



Itʼs about communication and problem solving.



Design is how it works.



How do we start?



Sketches



Wireframes



www.balsamiq.com



http://www.e-learningguru.com




Sketchy & iMockUps







http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/







Pulse for iOS







Wireframes



Design• Focus on audience

• Content is key

• Transparent interface





Text



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











Advanced Core Language







HTML 4



HTML 5



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>



Improve Web Apps



Re-Address backwardcompatibility



Canvas & SVG



Drawing on the Web

Flash



Scalable Vector Graphics | SVGDesiging Mobile Learning [email protected]


Scalable Vector Graphics | SVGDesiging Mobile Learning [email protected]


Vector Graphics Scale & Look Great!Desiging Mobile Learning [email protected]




• Mozilla Download Center (FF)

• First Person Gifter (FF)

• Population Demo (FF)

• Bespin - HTML Editor (Safari)

• German Election Atlas (Safari)

Demoʼs



http://www.mozilla.com/en-US/firefox/stats/




http://htmlfive.appspot.com/static/gifter.html




http://vis.uell.net/gsvg/poppyr.html




































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?



HTML 5 Support

canvas / svg

video

geolocation

app cache

database

workers



Quake II - Browser Only







WebGL 3D graphics

HTML 5 CanvasHTML 5 Audio

HTML 5 Web Sockets

HTML 5 Local Storage



Video



Video Compression

Flash



 <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>



// HTML 5 makes<video> as easyas <img>// HTML 5 makes <video> as easy as <img>



HTML 5 OptionsVideo Compression

Flash H264MPEG 4

Ogg Theora WebM



Theora is named after Theora Jones, Edison Carter's Controller on the Max Headroom television program.



http://en.wikipedia.org/wiki/Theora_Jones




http://en.wikipedia.org/wiki/Edison_Carter




http://en.wikipedia.org/wiki/Max_Headroom_(TV_series)










<video src="http://example.com/myMovie.ogg" controls>Your browser does not support the video element.</video>

Embedding VideoDesiging Mobile Learning [email protected]


<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 [email protected]


http://jilion.com/sublime/video













HTML 5 Support

canvas / svg

video

geolocation

app cache

database

workers



geolocation







// the geolocation apibrings browser basedlocation to your apps





HTML 5 Support

canvas / svg

video

geolocation

app cache

database

workers

iPhone



app cache& database





// database and app cache store user data and app resources locally







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>



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]);});}



HTML 5 Support

canvas / svg

video

geolocation

app cache

database

workers

iPhone

mobile

mobile



web workers



HTML 5More Power



// web workers defines an API for runningbackground scripts



Bad Primes (FF 3.5)

Good Primes (FF 3.5)

Motion Tracker (FF)

Demo’sDesiging Mobile Learning [email protected]


http://htmlfive.appspot.com/static/primes-bad.html




http://htmlfive.appspot.com/static/primes-good.html




http://htmlfive.appspot.com/static/tracker1.html




Web Workers

<script>var worker = new Worker('worker.js');worker.onmessage = function (event) {console.log('Results: ' + event.data);};</script>



worker.js

function findPrimes() {// ... prime algorithm herepostMessage(nextPrime);}findPrimes();



HTML 5 Support

canvas / svg

video

geolocation

app cache

database

workers

iPhone

mobile

mobile



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 [email protected]




Forms

CSS 3

Effects/Transitions



Design for Flexibility



GamersBorn ≥ 1980



GamersBorn ≥ 1980

‣ 8-10 1+ hour/day

‣ teens 13+ hours week



GamersBorn ≥ 1980

‣ 43% females

‣ 5 hours a week



experiencesDesigning



us.wii.com



http://us.wii.com/experience_gallery.jsp










How should we

Design?



Focus on the

Audience1



is the keyContent

2



Transparent

Interface3Desiging Mobile Learning [email protected]








Keep it Simple





Design: Keep it Simple





Resources



Games1.Play

2.Watch others play

3.Experiment





Capture & Analyze



Using CoverFlow view and Preview of Graphics



Design Scrapbook: iPhoto | LittleSnapper









CSS3 for Web DesignersDan Cederholm | A Book Apart



www.istockphoto.com







www.uxmag.com



HTML 5



Introducing HTML5

Bruce Lawson(Voices That Matter)



html5doctor.com



http://www.caniuse.com/





html5demos.com



html5gallery.com



www.css3.info



www.thinkvitamin.com



www.TED.com







http://www.ted.com

http://www.ted.com

http://www.ted.com

http://www.ted.com

Nancy Durate Garr Reynolds



www.posterous.com







easily drag & drop anything into email







Posterous will automatically wrap and prep for web









Most urls YouTube, SlideShare will get a player



www.kesiev.com/akihabara/



Thank You

Nick Florosealworks interactive studios

[email protected]

twitter.com/NickFloro

Download the Presentation at:http://www.slideshare.net/nickfloro