HTML5, CSS3, Javascript

for Mobile Web

Pengembangan Aplikasi Perangkat Bergerak
Aryo Pinandito, ST, M.MT

Well, you could build native,

but...
Which platforms do you choose?
How many codebases do you want to (or even can

you) support?
How long will it take to build native on N number of
platforms?
How much effort will be duplicated?
What if you bet on the wrong platform?
Who writes the code? Hire out? Retrain/retool
yourself or your devs?

The Web Is An Option...

...and should be preferred
when feasible

Mobile browsers are

progressing fast and

converging around WebKit

But there are limitations

Native apps are inherently

more capable than web apps

Native apps run faster and

smoother on resource
constrained devices

Common Components
Web documents
Server-side programming
Client-side programming
Web services
jQuery

Web Documents

HyperText Markup Language

Disagreement about HTML's role

Only give the content and structure of the document,

leave visualization to the browser

Browsers vary (graphical, text based, mobile devices)
User preferences vary (some people like larger fonts)
Environment varies (screen sizes, fonts available, etc.)
But authors want to control what the document looks
like

Trend towards separating content from

presentation
Cascading Style Sheets presentation information
only
HTML documents contain little formatting

Many Choices
Build a Native app (for specific platform) that

runs like a website (WebView).

Build a Native bare bone app that connects to a
website. The app is actually located on the
website (Sencha, jQTouch, jQuery Mobile, etc.)
Build your app in the Cloud and dont mess with
Xcode or Eclipse (PhoneGap).
Build your app using a third party dev tool.

PhoneGap (phonegap.com)
Easily create apps with the only free open source

framework that supports 7 mobile platforms

Build apps in the cloud so the entire app is in a
www directory.
No Java, Objective-C programming language skills
required.

Build in the Adobe Cloud

https://build.phonegap.com/
ZIP your www directory
Upload it to the server
After a few minutes, download your .apk or other
app files for installation on your devices

Supply your paid ($99 /year) Apple Developer

Account info for iOS use.

NO compiling or using of ANY app development
build tools on your local system.

Use WebKit Based Browser

Every browser is backed by a rendering engine to
draw the HTML/CSS web page.
IE Trident
Firefox/Sea Monkey Gecko
Opera Presto
Safari/Chrome WebKit

Most App interfaces will only function on WebKit

based browsers.

Sencha
Build mobile apps for iPhone,

Android and Blackberry with

HTML5
Commercial and open source
Sencha Touch Library versions
(Free).
Sencha Touch is available free o
charge for commercial and ope
source application developmen
Full service IDE app building
tools Not Free
Plug-ins for Eclipse, iPhone
libraries - Free

jQT (jqtjs.com)
Zepto/jQuery plugin for mobile

web development on the iPhone,

Android, iPod Touch, and other
devices.
Native WebKit Animations
Image Preloading
Callback Events
Flexible Themes - MIT Licensed
Swipe Detection - Extensions

Dashcode

jQuery Mobile
(jquerymobile.com)
jQuery Mobile isnt a

full application
framework like
SproutCore or Sencha
Touch, but the new
initiative does aim to
bring more native
controls to mobile web
apps.
Not supported on all
browsers.
http://jquerymobile.com/gbs

The Redirect
Its not a bad idea to also redirect your main

company website to a mobile interpretation of it.

Use your App version hosted on the internet!

Server Side Programming

Web Programming

Server side programming

Short history
CGI separate programs launched by web server
They produce an HTML document as output
They receive arguments as input
Strong isolation, bad performance
Programs embedded inside web page (php, ASP, JSP)
Program executed inside web server process

What are dynamic pages used for?

Personalizing based on user identity
Interacting with databases (e.g. online banking)
Web applications (e.g. web based email)
Separate database keeps persistent data

Web Page Lifecycle

Server
Client
1. Request
dynamic page/
content (PHP, JSP,
ASP, CFM, CGI)
2. Request static
page/content
(HTML, JPG,
PNG)

Request 1
REQUEST
Request 2

dynamic
content?

Yes

No
Response 2
Static content
(HTML, PNG,
JPG)

Response 1

Dynamically
generated
content

Processing

DB

Client Side Programming

Why is JavaScript important?

Web pages can contain JavaScript programs executed
inside the browser
Supported by all major browsers

Microsofts version called Jscript (the language is the

same)

User may disable JavaScript due to security fears

This is default for some newer versions of Internet Explorer

Client-side programming important for web because

Can promptly validate user input
Can update the web page without postback to server
Allows page to react to user actions other than pushing a

submit button more interactivity

Can be used to create interaction and navigation for mobile
applications

What is JavaScript?
Interpreted, object-oriented programming language
with dynamic typing
Introduced by Netscape with Netscape 2.0 in 1995
Standardized as ECMAScript by ECMA (European
Computer Manufacturers Association)
Not related to Java other than the name

Tightly integrated with browser

Can handle many types of events generated by the
normal interaction between user and browser
Can modify the internal objects based on which the
browser renders the web page

Adding JavaScript to a page

Using the <script> </script> tag
Text between tags is JavaScript program
Can specify external file using src attribute
Executed as the document is loading
Value of an attribute such as onclick
This type of code is called event handler
Executed when event happens
Can define event handlers for almost any HTML
element in page

Document Object Model

Describes how the document object from

JavaScript can be traversed and modified

Represented as tree structure
Can add new elements to the page
Can change attributes of existing elements
DOM has levels 0-3 and many sub-standards
The DOM interface used in other contexts with
other languages (C++, Java, python, etc.)

The document as a tree

<html>
document
<head>
<title>A Document</title>
<html>
</head>
<body>
<head>
<body>
<h1>A web page</h1>
<p>A <i>simple</i>
<title>
<h1>
paragraph</p>
</body>
A document
A web page
</html>
<p>
A

<i>
simple

paragraph

Web Services

What are web services?

A form of remote procedure call (RPC): your app (the client)

asks another computer (the server) to run a procedure for you

Parameters sent over the network from client to server
Results sent over network from server to client
Why would you ever want to do a remote procedure call?
Data needed for answer not (easily) accessible in app
You want to re-use existing procedures that run in a
different environment than your app
Your device lacks the resources (i.e. processor capacity,
memory, network connection speed) to compute the result
There are many other forms of RPC older than web services
CORBA, DCOM, SunRPC, RMI

Specific to web services

They run over http
Procedure call is in an http request
Result is in an http response
They use XML (or XML like) code to
Encode responses
Encode requests (sometimes)
Describe the procedures (incl. arguments and results)
Client and server often use different languages
Client may be JavaScript code in browser AJAX
Client and server are often in different organizations

JQuery
Powerful JavaScript library
Access parts of a page using CSS or XPath-like

expressions
Modify the appearance of a page
Alter the content of a page
Change the users interaction with a page
Rich library of methods for AJAX development (AJAX
= Asynchronous JavaScript and XML)
With jQuery and AJAX, you can request text, HTML,
XML, or JSON from a remote server using both HTTP
Get and HTTP Post.

Basic JQuery
Selecting part of a document is a fundamental

operation
A JQuery object is a wrapper for a selected group of
DOM nodes
$() function is a factory method that creates JQuery
objects
$(dt) is a JQuery object containing all the dt
elements in the document

Basic JQuery
.addClass() method changes the DOM nodes by

adding a class attribute

The class attribute is a special CSS construct
that provides a visual architecture independent of
the element structures
$(dt).addClass(emphasize) will change all
occurrences of <dt> to <dtclass=emphasize>

Basic JQuery
To make this change, put it in a function and call it
when the document has been loaded and the DOM
is created. Example Function:

function doEmph() {
$(dt).addClass(emphasize)
}
<body onLoad=doEmph()>

Structure and appearance should be separated!

Basic JQuery
JQuery provides an independent scheduling point

after DOM is created and before images are loaded:

$(document).ready(doEmph);
No HTML changes required. All done in the script.
Better solution:

$(document).ready(function(){
$(dt).addClass(emphasize)

});
<html><head>
<script src="jquery.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>

JQuery Changes DOM

.attr({name, value})
sets a new attribute (or many)
$(<i>hello</i>)
Creates a new element
$(<i>hello</i>).insertAfter(div.chapter p);
Creates element and inserts it into the document
.html() or .text() or .empty()
will replace matched elements with newly created elements

Have you met JSON?

JSON (JavaScript Object Notation) is a

lightweight data-interchange format. It

is easy for humans to read and write. It
is easy for machines to parse and
generate.
Based on a subset of JavaScript
JSON is a text format that is completely
language independent but uses
conventions that are familiar to
programmers of the C-family of
languages, including C, C++, C#, Java,
JavaScript, Perl, Python, and many
others.
These properties make JSON an ideal
data-interchange language.

Questions?