designing & developing mlearning using html5 #mlearncon

[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


4.2 billion Mobile Phones


3.5 billion Tooth Brushes


The Web Platform is Accelerating


Graphics Location Storage Speed

Solving Developer Challenges


What can we do with

HTML5Tuesday, June 19, 2012

• network latency• input mechanism• memory

• form factor

• computational power

• context• battery


The mobile environmentsingle early failure = non-returning user


The mobile environmentcrucial first 30-60 seconds usage


The mobile environmentFewer options


App


The Web PlatformTuesday, June 19, 2012

Web App


WebApp


WebApp

HTML Javascript CSS API’s


Pulse for MobileTuesday, June 19, 2012

http://www.e-learningguru.com


SEMANTICS

CSS3

3D, GRAPHICS & EFFECTS

DEVICE ACCESS

PERFORMANCE & INTEGRATION

MULTIMEDIA

OFFLINE & STORAGECONNECTIVITY


HTML5 = JS + CSS3


Create once and deliver everywhere...


Next Generation Mobile Using Webkit

RIM Blackberry

iOSAndroid Windows Phone


Which browser’s support HTML 5?

Chrome Safari Firefox Opera


Internet Explorer 9 BETA

Which browser’s support HTML 5?

Chrome Safari Firefox Opera


HTML 5in the works...


Advanced Core Language


HTML 4


HTML 5 - Introduces New Elements


Improve Web Apps


Flow chart

CompatibilityTuesday, June 19, 2012

Flow chart

Replaces:XHTML 1.0 & Dom2htmlwith new

API’sTuesday, June 19, 2012

Improve Handling of Errors


Focus on the

AudienceTuesday, June 19, 2012

Google AnalyticsTuesday, June 19, 2012



Drawing on the Web

Flash


Canvas & SVG


Scalable Vector Graphics | SVG


Vector Graphics Scale & Look Great!


• Mozilla Download Center (FF)

• First Person Gifter (FF)

• Population Demo (FF)

• German Election Atlas (Safari)

Demo’s


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

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

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

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


Quake II - Browser Only

WebGL 3D graphics

HTML 5 CanvasHTML 5 Audio

HTML 5 Web Sockets

HTML 5 Local Storage


Video


Capture to delivery and beyondThe Production Process

Authoring DeliveryVideo / Audio Assets Compression


Standards Are Everywhere

MPEG-1/

MPEG-4 audio

MPEG-2RedBook JPEGAC-3FM DVNTSC/

PAL


HTML 5 OptionsVideo Compression

FlashH264Adobe

H264 | MPEG 4Apple | Microsoft

WebMOgg Theora

Google


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


www.longtailvideo.comTuesday, June 19, 2012



Easy Access to VideoFlip $100 to $200


Smart Phones


brightcove.comTuesday, June 19, 2012



HTML 5 Support

£ £ £ ££ £ £ £

canvas / svg

video

geolocation

app cache

database

workers


geolocation


// the geolocation apibrings browser basedlocation to your apps


A C

R

O

P Twww.seeknspell.com


http://www.twitter.com

http://www.twitter.com

HTML 5 Support

£ £ £ ££ £ £ ££ £ £ £

canvas / svg

video

geolocation

app cache

database

workers

iPhone


app cache& database


HTML 5 Support

£ £ £ ££ £ £ ££ £ £ ££ £ £ ££ £ £ £

canvas / svg

video

geolocation

app cache

database

workers

iPhone

mobile

mobile


web workersTuesday, June 19, 2012

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


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

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

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

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

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

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

HTML 5 Support

£ £ £ ££ £ £ ££ £ £ ££ £ £ ££ £ £ ££ £ £ £

canvas / svg

video

geolocation

app cache

database

workers

iPhone

mobile

mobile


FormsCSS 3

Effects/Transitions

JavaScript


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


How should we

Design?Tuesday, June 19, 2012

Focus on the

Audience1


is the keyContent

2Tuesday, June 19, 2012

Transparent

Interface3


Keep it Simple


Design: Keep it Simple


How do we start?


Sketches


Wireframes


www.balsamiq.comTuesday, June 19, 2012



Sketchy & iMockUpsTuesday, June 19, 2012



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




www.uistencils.com


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

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

Wireframes


Design• Focus on audience

• Content is key

• Transparent interface


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


Design for Flexibility


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


Resources


html5rocks.comTuesday, June 19, 2012

lynda.comTuesday, June 19, 2012

http://www.caniuse.com/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


HTML5 for Web DesignersJEREMY KEITH | A Book Apart


Go Play, Experiment, Dream

AppleiOS


Search Flickr.com for iPad UITuesday, June 19, 2012

www.smashingmagazine.comTuesday, June 19, 2012

Pictures

Video

Blog

Audio

3D Models

Multiplayer Environment

ePortfolios

Course Management System

Micro-blogging

Explore


http://elgg.org/index.php

http://elgg.org/index.php

Capture & AnalyzeTuesday, June 19, 2012

Using CoverFlow view and Preview of GraphicsTuesday, June 19, 2012

Design Scrapbook: iPhoto | LittleSnapperTuesday, June 19, 2012

Thank You

Nick [email protected]

twitter.com/NickFloro

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


designing & developing mlearning using html5 #mlearncon

Technology