Transcript MOBILE WEB

Evolution
•Traditional Web access through fixed line services.
•Mobile Web – access web from hand held devices through
wireless network or mobile network.
•Advent of Wireless Application protocol (WAP) in 1998
by Open Mobile Alliance (OMA).
•WAP 1.0 defined WML & WML Script.
• WAP 2.0, in 2002, introduced
XHTML Mobile Profile and WAP CSS (or) Wireless CSS .
•Today’s mobile browsers render with HTML, JavaScript, CSS
and HTML5
• Similar to Desktop Web Development uses
HTML, CSS and JavaScript.
• Mostly uses Progressive Enhancement design
Approach which involves
– well-structured HTML markup
– Styling using CSS
– interactive features (behavior) using JavaScript.
Mobile Website
- Access through web browser
- Application logic on Server side
or as
Java Script Code on Client side
Offline Web Applications (Mobile Widget)
- Downloadable form like native app
- Chromeless browser
- Perception of standalone app
• Exploit mobile-specific functions provided by HTML, CSS and
JavaScript for a much richer user experience
• Special attentions to mobile device scaled down capabilities
such as
-
Screen size
Network speed
CPU power
Browser engine
Nature of interruptions
Features for Friendly Mobile
•
•
•
•
•
•
•
•
•
Device Detection
View Port Meta Tag
CSS Media Queries
Orientation Detection
Touch and Gesture Events
Open Native Applications
Device APIS
Browser Fragmentations
Data Optimization
- Determined from the User-Agent field transmitted as an HTTP
header from the browser.
User-Agent of iPhone with iOS 5.0 is
Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X)
AppleWebKit/534.46 (KHTML, like Gecko)
Version/5.1 Mobile/9A334 Safari/7534.48.3
- WURFL (Wireless Universal Resource FiLe)
offers a device database in XML format
and API libraries in both Java and PHP.
• A Viewport is a rectangular viewing region
• Tells the browser how to behave when it renders
the webpage
• Viewport properties
– width, height, and initial-scale
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
• Informs browsers that the site is optimized for
mobile.
CSS Media Queries
• Media queries is a CSS3 extension to media types that allows us far
greater control over rendering across different devices
• It is a logical expression, evaluating to true or false, that tests one or
more features of the output device to which the CSS is to be applied.
• Can be used in
– <link> tags
– @import at-rule, and
– @media at-rule.
• Example that applies to hand-held devices, but only if the viewport
width is at least 20em:
@media handheld and (min-width:20em) {
⋮ one or more rule sets…
}
Orientation Detection
• Ability to switch between landscape and portrait modes
• Detect screen orientation and orientation changes
On iOS and Android,
– window.onorientationchange event
– querying window.orientation for the angle.
On Smart phone browsers that do not support device
- window.onsize event and
- distinguish portrait vs. landscape modes by checking
window.screen.height and window.screen.width
Touch and Gesture Events
• iOS provides Gesture Events access to predefined
gestures containing scaling and rotation information
• W3C’s three basic Touch Events
– touchstart: a finger is placed on a Document Oject
Model (DOM) element;
– touchmove: a finger is dragged along a DOM element;
– touchend: a finger is removed from a DOM element.
• Gesture Events and Touch Events are sent during a multi-touch
sequence.
• HTML links to launch phone calls or SMS functions
<a href="tel:01234567890">Call us</a>
<a href="sms:01234567890">Text us</a>
• iOS application binds to a custom URL scheme and uses it to
launch from either a browser or from another application.
• Android, Intent can be registered as part of an HTTP URL or
be activated from a MIME type.
W3C Working Group on Device APIs and Policy aims
to create specifications for device JavaScript APIs,
such as file, contacts, calendar, messaging, media
capture and system information.
Browser Fragmentations
• Key challenges is to ensure support for all different
browsers.
• Low-end browsers to high-end smart phone browsers are
capable to render full desktop websites.
• Proxy based render content and logic on the server side.
• Challenges in Fragmentation effects required debugging
make tweaking to support on every different Java ME
device.
Write once run everywhere never really materialized for mobile
Data Optimization
• Wireless data services have relatively limited
bandwidth and higher latency compared to its
fixed Internet counterpart.
• Good practice to remove indentations and other
unneeded empty spaces from HTML.
• Minifying JavaScript serves code obfuscation.
• Combine multiple CSS or JavaScript files to
reduce the number of HTTP requests
HTML5
Major new features:
• Better semantic tags such as <article>, <section>,
<nav>, <menu>, and <footer>, <video> and
<audio> tags.
• DOM Storage, which can be considered as an
extension of the cookie function.
• Application Cache (or AppCache) allows
developers to specify which files the browser
should cache and make available to offline users.
WebKit
• WebKit is an open source browser engine
originally developed by Apple and licensed
through them LGPL and BSD licenses.
• Users:
Safari on iOS;
Android browser;
New browser on Blackberry;
Adds many extensions to CSS
• Those extensions start with -webkit-. For
example, thefollowing device-pixel-ratio
Media Query can be used to target the style
for high pixel density displays
• <link rel=’stylesheet’ href=’highRes.css’
media=’only screen and(-webkit-min-devicepixel-ratio: 2)’ />
Apps comparison:
Web Apps:
• They are easy to deploy
• They are cross platform
• Web apps are both cheaper
and faster to develop and
maintain,
• Web app developers more
easily available
Native Apps:
• Performance
• Access to special features
• Monetization
• Superior architecture
Hybrid Apps:
• “Hybrid apps, like native apps, run on the
device, and are written with web technologies
(HTML5, CSS and JavaScript).
• Hybrid apps run inside a native container, and
leverage the device’s browser engine (but not
the browser) to render the HTML and process
the JavaScript locally. “
Courtesy of definition:” http://www.icenium.com”
Comparison:
• Native vs Web vs Hybrid
Offline Web Application Tools
• HTML5 APPCACHE:AppCache is a new feature of HTML5. It
uses a manifest (a simple text file) to determine which
resources in the web application should be cached by the
browser
• W3CWIDGET:The goal of W3C Widget Packaging and
Configuration specification is to propose a standard
method for building and packaging widgets.
• WAC:
The Wholesale Applications Community (WAC) is an open global
alliance that is creating a unified and open platform based on
standard Web applications.
MOBILEWEB APPLICATION
FRAMEWORKS
• jQuery Mobile is based on jQuery and jQuery UI foundation. It
provides a set of easy-to-use APIs for DOMtraversing and
manipulation,event handling, animation, advanced effects
and AJAX (the Asynchronous JavaScript and XMLprogramming
methods).
• SenchaTouch is the mobile counterpart to the Ext JS
framework. It provides a rich set of UI components, storage
and data binding facilities using JSON and HTML5 offline
storage, and more.
DEVELOPMENT TOOLS
• Unlike native application development,
MobileWeb application development does not
have “official IDEs.”
• Used:
Notepad++, Aptana Studio,Selenium , weinre
References:
•
•
•
•
•
•
•
http://reference.sitepoint.com/css/mediaqueries
http://en.wikipedia.org/wiki
http://developer.apple.com/library/ios/#featuredarticles/iPhoneURLScheme_Reference/Articl
es/MailLinks.html
http://www.icenium.com/community/blog/icenium-team-blog/2012/06/14/what-is-ahybrid-mobile-apphttp://www.mrc-productivity.com/blog/2012/03/hybrid-vs-native-vs-mobile-webcomparison-chart/
Wikipedia
Mobile platforms and development pdf
Quiz
1.
Mobile Widget is rendered and executed within a Chromeless browser
a. True
b. False
2. Viewport metatag is used to set the viewport
a. width
b. initial scale
c. maximum scale
d. all of the above
3. Gesture Events and Touch Events are sent during a multi-touch sequence.
a. True
b. False
4. Will Magnifying JavaScript serves code obfuscation ?
a. Yes
b. NO
5) New features of HTML5
a)<h2>,<video>
b)<audio>,<video>
c)a and b
6)WebKit was a Apple’s brainchild
a)True
b)False
7)Match the following:
i)Mobile Web (d)
ii)Native ©
iii)Hybrid (b)
iv)All
a) Web view embedded in native app
b) Use either programming languages only or
scripting languages only or both
c) specific platform
d) Easier to get developers
8) ____________ provides a rich set of UI components, storage and data binding facilities
using JSON and HTML5 offline storage, and more.
a)Jquery
b)WAC
c)Google
d)None of the above