Building Smartphone Building Smartphone

Web Apps Web Apps
bikesh@itrain.com.my
iTrain Malaysia
SmartPhone SmartPhone??
efinition:
- Mobile Phone
- More computing ability and connectivity than
a Feature Phone
- Allows users to install and run advanced
applications base on a specific platform
- Runs complete operating system software
providing a platform for application
developers
- Its pretty much a handheld computer with a
built in phone
arket Share arket Share
artner: Share of 2010 Q1
smartphone sales to end
users by operating system
Web Web vs vs Native Apps Native Apps
O ative App:
Installed on the device and has access to the
hardware (i.e. camera, accelerometer ..)
evelopment Language
N iPhone - Objective-C
N Android - Java
N BlackBerry - Java
eployment
N Variations of App Stores
Price
N eveloper License
uration
N Month(s)
Web Web vs vs Native Apps Native Apps
O eb App:
user interface built with web technologies and
accessed via a url and optimized for the specifics of
the phone
evelopment Language
N HTML
N CSS
N Javascript
eployment
N URL!
Price
N Free
uration
N ays - eeks
Native Web Apps Native Web Apps
O ative eb App:
A web app deployed in a native wrapper
i.e Phoneap (www.phonegap.com)
App stores are not the future? App stores are not the future?
O .build for the eb.¨
Steve Jobs, CEO, Apple
O .even oogle was not rich enough to
support all of the different mobile
platforms from Apple´s AppStore to those
of the BlackBerry, indows Mobile,
Android and the many variations of the
okia platform.¨
Vic undotra, VP Engineering, oogle
Whats Whats makes this Possible? makes this Possible?
HTML 5
eb Storage
eb SQL atabase
eoLocation
CSS - radients/Rounded Corners.
Samples Samples
O oogle Buzz
O oogle Voice
O oogle Talk
O oogle Mail
Agenda Agenda
Basic iPhone Styling
- adding the iPhone CSS
- adding the iPhone Look and Feel
- adding basic behavior with jQuery
- adding a Home Screen icon
- orking with Full Screen Mode
Animation
- working with JQTouch
Client Side ata Storage
- saving user settings to localStorage
- saving data to sessionStorage
- client side databases
assive Crash Course in assive Crash Course in
HTCSS HTCSS
h1 class="loud">Hi there!/h1>
p id="highlight">Thanks for visiting my
web page./p>
p>I hope you like it./p>
ul>
li class="loud">Pizza/li>
li>Beer/li>
li>ogs/li>
/ul>
assive Crash Course in assive Crash Course in
HTCSS HTCSS
O .loud { font-style: italic; }
O #highlight { background-color: yellow; }
O head>
O title>My Awesome Page/title>
O link rel="stylesheet" href="screen.css"
type="text/css" />
O /head>
avascripts avascripts 101 101
var foods = ['Apples', 'Bananas', 'Oranges'];
for (var i in foods) {
if (foods[i] == 'Apples') {
alert(foods[i] + ' are my favorite!');
} else {
alert(foods[i] + ' are okay.');
}
}

html>
head>
title>My Awesome Page/title>
script type="text/javascript" charset="utf-8">
function sayHello() {
document.getElementById('foo').innerHTML =
'Hi there!';
}
/script>
/head>
body>
h1 id="foo" onclick ="sayHello()">Click me!/h1>
/body>
/html>
"uery "uery
html>
head>
title>My Awesome Page/title>
script type="text/javascript"
src="jquery.js">/script>
script type="text/javascript" charset="utf-8">
function sayHello() {
$('#foo').text('Hi there!');
}
/script>
/head>
body>
h1 id="foo" onclick="sayHello()">Click me!/h1>
/body>
/html>
A Basic Page A Basic Page
Adding an IPhone CSS Adding an IPhone CSS
O link rel="stylesheet" type="text/css"
href="iphone.css" media="only screen and
(max-width: 480px)" />
O link rel="stylesheet" type="text/css"
href="desktop.css" media="screen and (min-
width: 481px)" />
O !--[if IE]>
link rel="stylesheet" type="text/css"
href="explorer.css" media="all" />
![endif]-->
Scaling Scaling
Scaling Scaling
O meta name="viewport" content="user-
scalable=no, width=device-width" />
O If you don´t set the viewport width, the
page will be zoomed way out when it first
loads
iPhone ook and Feel iPhone ook and Feel
O Title bar
O Lists with round corners
O Finger friendly links (glossy buttons)
iPhone ook and Feel iPhone ook and Feel
body {
background-color: #ddd;
color: #222;
font-family: Helvetica;
font-size: 14px;
margin: 0;
padding: 0;
}
iPhone ook and Feel iPhone ook and Feel
#header h1 {
margin: 0;
padding: 0;
}
#header h1 a {
background-color: #ccc;
border-bottom: 1px solid #666;
color: #222;
display: block;
font-size: 20px;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;
}
iPhone ook and Feel iPhone ook and Feel
#header ul {
list-style: none;
margin: 10px;
padding: 0;
}
#header ul li a {
background-color: #FFFFFF;
border: 1px solid #999999;
color: #222222;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}
iPhone ook and Feel iPhone ook and Feel
#content, #sidebar {
padding: 10px;
}
#footer {
display: none;
}
Fancier iPhone ook and Feel Fancier iPhone ook and Feel
O Add a 1-pixel white drop shadow to the logo link
text, and a CSS gradient to the background
#header h1 a {
text-shadow: 0px 1px 0px #fff;
background-image: -webkit-gradient(linear, left
top, left bottom,
from(#ccc), to(#999));
}
O text-shadow parameters :
horizontal offset,
vertical offset,
Blur
Color
Fancier iPhone ook and Feel Fancier iPhone ook and Feel
O webkit-gradient
generate a gradient image on the fly
O parameters from left to right are as
follows:
the gradient type (can be linear or radial),
the starting point of the gradient (can be left
top, left bottom, right top, or right bottom),
the end point of the gradient
the starting color,
and the ending color.
Fancier iPhone ook and Feel Fancier iPhone ook and Feel
O Adding rounded menu corners
#header ul li:first-child a {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
#header ul li:last-child a {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
Adding behavior with Adding behavior with j"uery j"uery
Adding behavior with Adding behavior with j"uery j"uery
O Edit iPhone.css and hide the ul elements
#header ul.hide {
display: none;
}
Adding behavior with Adding behavior with j"uery j"uery
O Create the css for the leftButton (Menu)
#header div.leftButton {
position: absolute;
top: 7px;
left: 6px;
height: 30px;
font-weight: bold;
text-align: center;
color: white;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
line-height: 28px;
border-width: 0 8px 0 8px;
-webkit-border-image: url(images/button.png) 0 8 0 8;
}
Adding behavior with Adding behavior with j"uery j"uery
O Add the following to your HTML head>
O script type="text/javascript"
src="jquery.js">/script>
O script type="text/javascript"
src="iphone.js">/script>
Adding behavior with Adding behavior with j"uery j"uery
O Create a file called iPhone.js
if (window.inneridth && window.inneridth =
480) {
$(document).ready(function(){
$('#header ul').addClass('hide');
$('#header').append('div class="leftButton"
onclick="toggleMenu()">Menu/div>');
});
function toggleMenu() {
$('#header ul').toggleClass('hide');
$('#header .leftButton').toggleClass('pressed');
}
<
Adding behavior with Adding behavior with j"uery j"uery
O Add the following to your iphone.css
#header div.pressed {
-webkit-border-image:
url(images/button_clicked.png) 0 8 0 8;
}
Home Screen (Web Clip) Icon Home Screen (Web Clip) Icon
Full Screen ode Full Screen ode
O Claim back 104 pixels!
O meta name="apple-mobile-web-app-
capable" content="yes" />
O App will display in full screen mode when
launched from the eb Clip icon
Full Screen ode Status Bar Full Screen ode Status Bar
Startup Graphic Startup Graphic
Startup Graphic Startup Graphic
O hen an app is launched in full screen mode,
the user is presented with a screenshot of
the app while the first page is loading
O The screenshot is based on the last page
from the user´s previous visit, scrolled to
wherever you left off
O To add a custom startup graphic, create a
320px × 460px P file
O link rel="apple-touch-startup-image"
href="myCustomStartupraphic.png" />
Animation Animation
O EMO
Sample App
JQTouch
Animation Animation
O JQTouch
Open Source Jquery plugin
You can download the latest version of jQTouch
from http://jqtouch.com/
O Create a new index.htm file
ou can use a new folder
Ensure jqtouch, themes and images folder is
copied
Copy HTML code shown by instructor
Animation Animation
O Link Jqtouch library to your page
O link type="text/css" rel="stylesheet" media="screen"
href="jqtouch/jqtouch.css">
O link type="text/css" rel="stylesheet" media="screen"
href="themes/jqt/theme.css">
O script type="text/javascript" src="jqtouch/jquery.js">/script>
O script type="text/javascript"
src="jqtouch/jqtouch.js">/script>
O script type="text/javascript">
var jQT = $.jQTouch({
icon: 'kilo.png',
statusBar: 'black'
});
/script>
Client Side Storage Client Side Storage
O localStorage and sessionStorage are very
similar to cookies in that they allow you to
use JavaScript to set name/value pairs
O Unlike cookies it lives entirely in the
client.
localStorage localStorage
O ata is saved even after the window is
closed and is available to all windows (or
tabs) that are loaded from the same
source (must be the same domain name,
protocol,and port).
O This is useful for things like application
preferences.
sessionStorage sessionStorage
O ata is stored with the window object.
O Other windows/tabs are not aware of the
values, and the data is discarded when
the window/tab is closed.
O Useful for window-specific state like
active tab highlight, or the sort order of a
table
O Setting a value is as simple as:
localStorage.setItem('age', 40);
O Accessing a stored value is equally simple:
var age = localStorage.getItem('age');
O You can delete a specific key/value pair from
storage with:
localStorage.removeItem('age');
O Or, you can delete all key/value pairs like so:
localStorage.clear();
O Assuming that your keys are valid JavaScript
tokens , you can use this alternate syntax:
localStorage.age = 40 // Set the value of age
var age = localStorage.age; // et the value of
age
delete localStorage.age; // Remove age from
storage
O The localStorage and sessionStorage keys are
stored separately.
O If you use the same key name in each, they will
not conflict with each other
Save settings Save settings
$(document).ready(function(){
$('#settings form').submit(saveSettings);
});
function saveSettings() {
localStorage.age = $('#age').val();
localStorage.budget = $('#budget').val();
localStorage.weight = $('#weight').val();
jQT.goBack();
return false;
}
Client Side B Client Side B
O Allows developers to use a simple but
powerful JavaScript database API to store
persistent data in a relational format.
O evelopers can use standard SQL
statements to create tables.
O The JavaScript database API even
supports transactions.
Client Side B Client Side B
Client Side B Client Side B
O The current default on the iPhone is 5 MB.
O If it grows beyond this limit, the user will
automatically be asked to allow or deny
the size increase.
O If it increases, the database size limit will
be upped to 10 MB.
O If it denies the increase, a QUOTA_ERR
error will be returned.
O Use Safari eb Inspector to interact with
B
inks inks
O iTrain Malaysia
O www.facebook.com/itrain.malaysia
O www.itrain.com.my/iphone
O www.itrain.com.my/android
O iPhone eveloper User roup Malaysia
O (facebook group)
O Mobify.Me
O TestIphone.com
O developer.apple.com/iphone

Sign up to vote on this title
UsefulNot useful