MOBILE

DEVELOPMENT

SSSE 2013Dr. Christelle Scharff

Pace University

cscharff@pace.edu

https://github.com/ssse2013/ssse2013

https://github.com/ssse2013

WHAT DO YOU KNOW ABOUT

MOBILE DEVELOPMENT?

WHAT PHONE(S) DO YOU

OWN?

WHAT APPS DO YOU USE?

Mobile technologies

• SMS

• MMS

• Bluetooth

• QR codes

• NFC (Near Field Communication)

• Native applications (Java ME, Java for Android, Objective C, Silverlight, Python, C, C++…)

• Web applications (CSS, HTML, JavaScript, HTML5…)

• Mobile web sites (CSS, HTML, JavaScript, HTML5 …)• See http://m.pace.edu

• IVR (Interactive Voice Response)

• USIM

• USSD (e.g., #123#)

• Mobile TV

• etc

So many of

them!

Mobile platforms

• Blackberry

• Android

• iOS

• Windows Phone

• Symbian

• Series 40

• Bada

• Meego

• etcSo many of them!

A global and diverse market

Mobile development

Mobile apps

Mobile experience

Platforms

Devices

Users

Business models

iButterfly

• http://youtu.be/vEE6M0iW-Nw

MOBILE DEVELOPMENT:

HOW IS IT DIFFERENT? IS IT

REALLY DIFFERENT?• Ecosystem

• People

• Devices

• Platforms

• Process

• Usage

• UI / UX

• etc

WHAT IS A SUCCESSFUL

APP?

Native versus Web mobile development

• Native development• Develop using languages such as Java, Objective C etc that target a

specific platform

• Broader access to hardware features

• Faster, more powerful, more integration hardware/platform

• More attractive (native look and feel)

• Latest innovations

• Apps are installed on phones and released on the market

• Web development• Based on web technologies (HTML, CSS, and JavaScript)

• Permits multi-platform development

• Based on standards

• Apps need to be packaged to be installed on a phone (e.g., PhoneGap) and released on the market

• Differences of capabilities between native and web apps is decreasing rapidly

The

debate of

the purists

What is HTML5?

• HTML5 is everywhere and on all platforms• Desktops, phones, TVs…

• HTML5 is mobile (optimized)• Phones and tablets

• Size of UI components

• HTML5 is open• HTML is already known by lots of people

• Soon a standard of W3C (World Wide Web Consortium)

• HTML5 is capable• Networking, contacts, online / offline, input, videos and geolocation

capabilities

• HTML5 is flexible• Content (HTML)

• Style (CSS)

• Logic (JavaScript)

Mobile browsers

• Different types of browsers

• Focus navigation (highlight of the selected area), cursor navigation

(simulation of a cursor), touch navigation, multi-touch navigation (gestures)

• Zoom

• Basic zoom (font size only), smart zoom (images and pages as a whole)

• Reflow engines

• Reflowing the pages to a one-column scrollable

• Multi-page experience

• How many pages can be open at the same time?

• WebKit Engine

• Open source layout engine for web browsers that render HTML and CSS

and execute JavaScript

• Used in the current browsers (e.g., Android, iOS, Nokia S60…)

Mobile browsers (pre-installed)

• NetFront - low- and mid-level phones (Sony Ericsson, LG,

Samsung, ZTE)

• Myriad - low- and mid-level phones (Motorola, LG, Kyocera)

• Internet Explorer Mobile – The browser on Windows Phone 7 is

based on IE7 and IE8

• Safari on iOS – WebKit-based browser

• Nokia Series 40 browsers – WebKit-based browser for Series

40 6th

• Symbian browser – WebKit-based browser for Series 60

• BlackBerry browser – WebKit-based browser for OS 6.0 and

above

• Android browser - WebKit-based browser

Mobile browsers (user installed)

• Chrome for Android - Launched in February 20112

http://googleblog.blogspot.com/2012/02/introducing-chrome-

for-android.html

• Firefox mobile – Appeared in 2011 http://mozilla.com/mobile

• Opera – Downloadable for most platforms, full browser

http://www.opera.com/developer/tools/mobile/

• Opera Mini – Proxy browser that supports videos, Ajax, offline /

online… http://www.opera.com/developer/tools/mini/

• Bolt – Proxy browser for low-end phones and Blackberry

phones http://boltbrowser.com

• Skyfire – Proxy browser for Windows Mobile, Blackberry and

Nokia Series 60 phones http://skyfire.com

GO TO THE OPERA MINI

SIMULATOR ONLINE AND GO

TO A SPECIFIC URLhttp://www.opera.com/developer/opera-mini-simulator

WHAT MOBILE BROWSERS

ARE SUBSCRIBERS USING IN

THE US AND GLOBALLY?

Mobile browsers - statistics

• What mobile browsers are people using in different parts

of the world?

• http://gs.statcounter.com

Toolbox

Toolbox

• Notepad++

• Opera mobile emulator

• PhoneGap

• WinSCP (or equivalent)

• GitHub

HTML in one slide

• HTML = Hyper Text Markup Language

• Language based on tags and rendered by a browser

• Files with html extension

• index.html is the entry file in a web site

• Skeleton of an HTML page<html>

<head>

<title>

…

</title>

</head>

<body>

…

</body>

</html>

Open the tag

Close the tag

Tags

<p> … </p> - paragraph

<em> … </em> - italic

<b> … </b> - bold

<h1> … </h1> - level of title

(from 1 to 6)

<img src …> - image

<a> … </a> - link

<br /> - blank line

<ul> - list

<li> … </li>

<li> … </li>

</ul>

<div> … </div>

Html – cheat sheet

http://bit.ly/tZpQL

CREATE AN HTML FILE USING

NOTEPAD++ AND OPEN IT IN

GOOGLE CHROME

PUT THE FILE ON THE

SERVER AND OPEN IT IN A

MOBILE DEVICE

CSS in one slide• CSS = Cascading Style Sheets

• For the visual presentation of an HTML document (text color, size, style,

layout, gradients, opacity etc)

• Files with css extension

• Integrate CSS:• <style type="text/css">

body {color:red;}

</style>

• OR

• <link rel="stylesheet" href="file.css" type="text/css">

• Based on applying rules on specific elements (selectors). Rules assign values

to properties

• Example 1: body {color:red; font-style:italic;}

• Example 2:

<h1 class="loud">Hi!</h1>

<p id="low">How are you?</p>

<ul>

<li class="loud">Pizza</li>

<li>Soda</li>

</ul>

Class:.loud {font-style: bold;}

Id: #low{font-style:italic;}

(ids are unique)

CSS – cheat sheet

http://bit.ly/O0fMmZ

External file

Inline

CREATE AN HTML FILE AND A

CSS FILE TO STYLE IT

JavaScript in one slide

• JavaScript is a scripting language that permits to make pages more interactive for users

• Examples:• Form validation

• Show and hide elements

• Database interactions

• Animations

• Files with js extension

• Integrate JavaScript:<script type="text/javascript" charset="utf-8">

</script>

• OR<script type="text/javascript" src="file.js"></script>

Inline

External file

JavaScript – cheat sheet

http://bit.ly/ivbzJ

Example

<script type="text/javascript" charset="utf-8">

function showAlert(){

alert("Hello");

}

• </script>

<button type="button“ onclick="showAlert()">

Click me!

</button>

JQUERY MOBILE

What is jQuery mobile?• http://jquerymobile.com

• To help designers and developers create mobile web experiences

easily

• Separation of HTML, CSS and JavaScript

• To create unified user experiences across popular platforms

• Based on HTML5 and a powerful theme mechanism

• Lightweight code built with progressive enhancement

• Taking advantage of features detected within the browser

• Plugins available (e.g., maps and RSS feeds)

• Code can be packaged in a native app

• Sponsorship from Adobe, Mozilla Corporation, RIM, Nokia dotmobi

etc

Browser support

• Browsers

• Browsers’ support

jQuery mobile in the real world

jQuery mobile showcase

• See the samples

Anatomy of a page<!DOCTYPE html>

<html>

<head>

<title>Sample0 - Skeleton</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

</head>

<body>

<div data-role="page">

<div data-role="header">

<h1>Header</h1>

</div>

<div data-role="content">

<p>Body</p>

</div>

<div data-role="footer">

<h5>Footer</h5>

</div>

</div>

</body>

</html>

Header

Content

Footer

Viewport

CSS

JavaScript

CREATE YOUR FIRST

JQUERY MOBILE PAGE AND

OPEN IT IN GOOGLE

CHROME AND THEN IN A

MOBILE DEVICE

Data roles

• Markup elements can have roles (data-role)

• They add semantics to the document

• They permit also to add attributes to tags while

maintaining valid documents

• They are implicit contracts between the framework and

the developers

• data-role include page, header, content,

footer, navbar, button, controlgroup,

collapsible, collapsible-set, fieldcontain,

listview, dialog, slider, nojs

• http://jquerymobile.com/demos/1.2.0/docs/api/data-

attributes.html

Semantics

Button

<a href="#" data-role="button">Click me!</a>

Listview

<ul data-role="listview">

<li><a href="#">NYC</a></li>

<li><a href="#">Boston</a></li>

<li><a href="#">San Francisco</a></li>

</ul>

Data attributes

• Each UI component has data attributes associated to it

• Data attributes (data-*) permit to initialize and configure

widgets

• http://jquerymobile.com/demos/1.2.0/docs/api/data-

attributes.html

Button

<a href="#" data-role="button" data-

icon="arrow-up">Click me!</a>

Icons

Listview

<ul data-role="listview" data-inset="true" data-

filter="true">

<li><a href="#">NYC</a></li>

<li><a href="#">Boston</a></li>

<li><a href="#">San Francisco</a></li>

</ul>

Using multiple pages in a single document

…

…

Going to a particular page:

Pages have

unique ids

jQuery Mobile - Themes

• Introduced with the data-theme attribute and the letters

a, b, c and d…

• Can be customized using ThemeRoller

• http://jquerymobile.com

Navigation

<a href="page.html">Here</a>

<a href="page.html" data-rel="dialog">Here</a>

<a href="page.html" data-role="button">Here</a>

<a href="page.html" data-transition="flip">Here</a>

Your files need to be on

a server

Tabs

• A navbar widget is available with up to 5 tabs

• It is placed within the header or the footer

• It is defined using the data-role navbar and an unordered list (<ul> … </ul>)

• To initialize the state of the tab and restore it each time you come back to the page, use class= "ui-btn-active ui-state-persist"

• data-id permits to fix the navigation bar outside a transition and create a persistent navigation bar

Collapsibles

• Collapsibles are defined using the data-role collapsible container

• They are composed of a header (using h1 to h6) and then

any HTML code

• data-collapsed permits to set the state of the

collapsible to close (true) or open (false)

Collapsible sets (Accordion)

• Collapsible sets permit to group widgets and make them

behave like an accordion (so only one section can be

open at a time)

Forms

• Forms are wrapped into a form tag with attributes action

and method

<form action="form.php" method="post or

get">

...

<input type="submit" name="mysubmit"

value=“Submit" />

</form>

• Forms are composed of different UI components

introduced by labels

Forms

• All the UI elements of a form are contained in a fieldset to present the elements conveniently on the

screen<fieldset>

…

</fieldset>

• To improve the look-and-feel of a form each pair (label, UI component) should be in a div tag with data-role called

fieldcontain

Text inputs

• The type of the text can be:• text, password, email, tel, url, search, number,

date, datetime, time, datetime-local, month, week

• To require a value, use the required attribute

• To provide a value by default, use the placeholder

attribute

SHOWCASE OF THE

DIFFERENT UI ELEMENTS

Emails, SMS and phone calls

Adding scripts to a pageFor adding JavaScript to the

page

Waits for the HTML to load

For event management

$(‘#selector’).bind(‘event’,myData, functionName)

Maps - Configurations

• We need a plugin to use maps and interact with them in

jQuery Mobile

• Google maps v3 plugin for jQuery and jQuery Mobile

• http://code.google.com/p/jquery-ui-map/

• In the head of the HTML document we add the required

scripts

• We are ready to go!

Maps – Adding and using a map

Going native with Apache Cordova

• Apache Cordova is an HTML5 app platform that allows

you to develop native apps with web technologies and get

access to APIs and app stores

• It can be combined with UI frameworks such as jQuery

Mobile, Sensa Touch or Dojo mobile

• Apps are packaged as native apps using the platform

SDKs (iOS, Android, Blackberry, Windows Phone, Palm

WebOS, Bada, and Symbian)

• Install the plugin

• http://svn.codespot.com/a/eclipselabs.org/mobile-web-

development-with-phonegap/tags/r1.2/download

DEMO

References• http://jquerymobile.com

• http://view.jquerymobile.com/master/demos

• http://www.developer.nokia.com/Community/Wiki/JQueryMobile_for_

Windows_Phone

• http://cordova.apache.org/

• http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-

with-phonegap/tags/r1.2/download

• http://www.mobiledevelopersolutions.com/home/start/twominutetutoria

ls/tmt0

THANK YOU

CODE SAMPLES ARE

AVAILABLE AT

HTTPS://GITHUB.COM/SSSE2

013