HTML Css Javascript

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?

HTML Css Javascript

Uploaded by

Copyright:

Available Formats

HTML Css Javascript

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Css Javascript

Uploaded by

Copyright:

Available Formats

HTML5, CSS3, Javascript

for Mobile Web

Well, you could build native,

The Web Is An Option...

Mobile browsers are

progressing fast and

But there are limitations

more capable than web apps

Native apps run faster and

HyperText Markup Language

Only give the content and structure of the document,

leave visualization to the browser

Trend towards separating content from

runs like a website (WebView).

framework that supports 7 mobile platforms

Build in the Adobe Cloud

Supply your paid ($99 /year) Apple Developer

Account info for iOS use.

Use WebKit Based Browser

Most App interfaces will only function on WebKit

Android and Blackberry with

web development on the iPhone,

company website to a mobile interpretation of it.

Use your App version hosted on the internet!

Server Side Programming

Server side programming

What are dynamic pages used for?

Web Page Lifecycle

Client Side Programming

Why is JavaScript important?

Microsofts version called Jscript (the language is the

User may disable JavaScript due to security fears

Client-side programming important for web because

submit button more interactivity

Tightly integrated with browser

Adding JavaScript to a page

Document Object Model

JavaScript can be traversed and modified

The document as a tree

What are web services?

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

Specific to web services

adding a class attribute

Structure and appearance should be separated!

after DOM is created and before images are loaded:

JQuery Changes DOM

Have you met JSON?

lightweight data-interchange format. It

You might also like