PowerPoint slide deck - Kiefer Consulting, Inc.

sprocketexponentialΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

110 εμφανίσεις

Mobile Design Patterns

Eric Neff

Harkeerat Toor

Malcolm Nguyen

Kiefer Consulting, Inc. Mobile Division

Bit.ly/z5yjsz

PATTERNS VS. FRAMEWORKS

3 Ways

1.
Mobile Web

2.
Embedded Web

3.
Native



Use a mobile web site to track device
access and upgrade the busiest platforms

THE MATRIX

MOBILE WEB

HARKEERAT TOOR

What is Mobile Web?



Internet browsing on your phone


Mobile Web App


An HTML5 application


CSS3 to enhance the UI


JavaScript to add functionality


637 million compatible devices








Overview of Mobile Web


Cross Platform


Distribution


Frameworks


Examples


Development


Optimization


No Native Calls

Cross Platform


Develop once, run everywhere...?


Progressive Enhancement


Basic content/functionality is accessible to all web
browsers


Browser
sniffing and unobtrusive JavaScript


html5test.com



Distribution


App store


Good and bad


Host on your own servers


Instant updates


Internet Connectivity


Cache


URL Discoverability


Social distribution


Frameworks



jQuery

Mobile
-

http://jquerymobile.com/


jqTouch

-

http://jqtouch.com
/


Sencha

Touch
-

http://www.sencha.com/



jQuery

Mobile


jQuery

Framework ~20k


Themable


Markup driven



<div data
-
role="
page
”>

<div data
-
role="
header
">

<h1>Page Title</h1>

</div><!
--

/header
--
>

<div data
-
role="
content
">


<p>Page content goes here.</p>

</div>

<div data
-
role="
footer
">

<h4>Page Footer</h4>

</div>

</div>


iOS, Android, Win, Palm, BB, + …


jQTouch


jQuery

Plugin


WebKit

Enabled


CSS Selectors


iOS like formatting


Swipe Detection


Related to
Sencha



iOS
, Android, Win, BB


<div id="home”>

<div class="toolbar">

<h1>Page Title</h1>

</div>

</div>

<div id="info">

<div>

<h1>Info</h1> <a
href
="#home"
class="button back">Back</a>

</div>

<div class="info">

<p>Page Footer</p>

</div>

</div>

Sencha

Touch


JavaScript Framework ~ big


Script based layout


Supports Phone + Tablet





new
Ext.Application
({


launch: function() {


new
Ext.Panel
({


fullscreen
: true,


html: 'Hello World!'


});


}


});



iOS, Android, BB


Examples

Dailymotion

IKEA

BOX

Development


Not bound to developer toolkits and platform
-
specific SDK’s


Free to use any IDE


Developer experience


Easier to develop IF targeting multiple devices


Availability


More developers available

Optimization


Data transfer and browser rendering


Typically slower so keep downloads to a minimum


Externalize JavaScript and
CSS


Images


Get rid of as many as possible, and keep used
ones as lightweight as possible


Remove whitespace


jQuery

minify






No Native Calls


WebKit

support for “
tel
” markup


<
a
href
=”
tel
://444
-
4444”>


<
img

src
=”
phone.png
” alt = “Call Me” />


<
/a>


Access to the web

-
Send e
-
mails through server side scripts

-
Access to
geolocation

through HTML5


Still not native

EMBEDDED WEB

MALCOLM NGUYEN

Embedded Web


Pros


Branch off mobile web


90% Cross Platform


App Store


Native Access


Cons


Browser inconsistencies (Windows Phone 7)


At JavaScript’s Mercy


Vendors


Titanium
-

http://www.appcelerator.com
/


PhoneGap

-

http://www.phonegap.com
/

Appcelerator

Titanium


Tiered Access, Free Community Edition


JavaScript Compiles to Native Code


Better Performance


Native features (Camera/File/HTTP)

var

win =
Ti.UI.currentWindow
;


//
--

Create the sub windows

var

crusts =
Ti.UI.createWindow
();

var

toppings =
Ti.UI.createWindow
();

var

details =
Ti.UI.createWindow
();


//
--

We set the background here since this wont change

win.backgroundImage

= '../images/bg_main.png
';


//
--

Include our clock

Ti.include
('../includes/
clock.js
');

PhoneGap


Free to use, Pay for support


Xcode

and Eclipse integration


Huge list of supported devices


Acquired by Adobe


Uses HTML/CSS and JavaScript


Compatible with
JQuery

Mobile and
Sencha

Touch


Native

Calls

phonegap.com

Converting Web App to Embedded


Download PhoneGap


Reference
PhoneGap.Js

in HTML markup.


Call Native API




function
capturePhoto
() {







// Take picture using device camera and retrieve image as base64
-
encoded

string







navigator.
camera.getPicture
(
onPhotoDataSuccess
,
onFail
, { quality: 50 });





}

Plugins


Implement
PGPlugin

Class


Use
Phonegap.Exec

in JS


Allows use of Native Libraries.

NATIVE

ERIC NEFF

Native Code


iOS



Xcode


Developer.apple.com


Android


Eclipse


Developer.android.com


Windows Phone


Visual Studio


Create.msdn.com



Alternatives:


Mono


(Touch, Droid)


Requires Developer
Program


C# for both platforms


Mobile Web Example

Embedded Web
Example

Native Example

24 Years of
Experience

State and Local
Government

Private Sector



700+ IT Success
Stories

SharePoint ECM

Custom .NET

Web Solutions

Mobile Solutions


Dedication to
Your Success

Mentoring

Support

Edunars

TM

Local Conferences


Philanthropy

Powerhouse Science
Center

Christmas Promise

Collaboration
Experience
TM


Kiefer Consulting, Inc.

QUESTIONS?

To Do


Stop by our booth


Pick up our “Mobile Fact Sheet” poster


Enter to win an Android tablet


Talk with us about mobile, code, the weather


Thank You!


Eric Neff
eneff@kieferconsulting.com


Harkeerat Toor
htoor@kieferconsulting.com


Malcolm Nguyen
mnguyen@kieferconsulting.com


www.kieferconsulting.com