Device Detection, Client-side Detection, Server-side Detection, Device Interaction, Images, Video, Audio, Debugging and Performance, Content Delivery, Native and Installed Web Apps.

1. Mobile Applications
Chapter 4
BY
MR. A. B. MOMIN
ASSISTANT PROFESSOR
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
ATS’S, SANJAY BHOKARE GROUP OF INSTITUTES, MIRAJ

2. Client Side Detection
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Client side (in the browser), detect features, provide fallbacks.
• HTML, from its origins, has included a beautiful fallback
mechanism that has helped the Web to grow without big
incompatibilities.

3. Assumptions
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• If an element is known but one or more of its attributes are unknown, the element will
be rendered properly and the unknown attributes will just be ignored.
• If a CSS selector or CSS at-rule is unknown, the whole declaration will be ignored.
• If a CSS selector is valid but a style is unknown, only that definition will be ignored.
• If a CSS selector and a style are valid, but the value for the style is unknown, only that
definition will be ignored.
• If the same CSS style on the same element is declared more than once, the last valid
declaration will be used.

4. Fallbacks
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• HTML Fallbacks
• CSS Fallbacks
• Javascript Fallbacks

5. Server Side Detection
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Server side detection is based on web server.
Fig. 4.1: When the user is accessing our website via a cloud-based browser or a transcoder, we will not
receive the request directly from the user’s mobile device.

6. Mobile User Agent
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Mozilla/5.0 (SymbianOS/9.2; U; Series60/3.1 NokiaN95/20.0.015 Pro file/MIDP-2.0
Configuration/CLDC-1.1) AppleWebKit/413 (KHTML, like Gecko) Safari/413
• Nokia3510i/1.0 (05.30) Profile/MIDP-1.0 Configuration/CLDC-1.0
• Mozilla/5.0 (Linux; U; Android 4.0.4; en-gb; GT-I9300 Build/IMM76D) AppleWebKit/534.30
(KHTML, like Gecko) Version/4.0 Mobile Safari/ 534.30
• BlackBerry8100/4.2.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 Vendor ID/125
• Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like
Gecko) Version/6.0 Mobile/10A405 Safari/8536.25
• Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM;
Touch; NOKIA; Lumia 920)
• Mozilla/5.0 (Linux; Android 4.1.1; Nexus 7 Build/JRO03D) AppleWebKit/535.19 (KHTML, like
Gecko) Chrome/18.0.1025.166 Safari/535.19
• UP.Browser/3.04-TS14 UP.Link/3.4.4

7. How to read header
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
In Java Servlets or JSP, we read a header using:
request.getHeader("header_key")
And in PHP:
$_SERVER["header_key_large"]
In ASP.NET with C# or Visual Basic, we have a Headers collection and public members
for most of the common headers:
// This is the C# version
Request.Headers["header_key"]
' This is the VB version
Request.Headers("header_key")

8. Header Key or Field
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
User-Agent: The name of the browser or platform that originated the request
Accept: A comma-separated values (CSV) list of MIME types accepted
by the browser
Accept-Charset: A CSV list of charsets accepted by the browser (e.g., ISO-8859-1,
UTF-8)
Accept-Language: A CSV list of preferred languages in the browser
Accept-Charset: A CSV list of compression methods available for the response
(e.g., gzip, deflate)

9. Images
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Insert image using <img> tag in html.
• Use SVG(Scalable Vector Graphics), canvas element and CSS for handle images.
• Standard format for image: .jpeg, .gif, .png
• Support animation format, 3D format, animation png.
Using the img Element:
• Buttons
• Icons for links or menus
• Backgrounds
• Visual separators
• Titles

10. Image format compatibility table
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE

11. Video
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Serving video content to mobile devices is very important for many portals and content
providers.
• We can provide multimedia content in three formats:
• Downloadable content
• On-demand streaming content
• Live streaming content
• Containers and Codecs
• Video and audio files come with two technologies: a container format and one or more codecs
inside.
• The container is what you usually see more frequently: the file extension, such as .mov or .mpeg.
• The HTML5 video Element:
<video width="300" height="200" src="video.mp4"></video>

12. Video Layout in browser
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE

13. HTML5 Video Compatibility Table
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE

14. Audio
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
Audio is another media element that we can use in our mobile websites. HTML5 includes
a new audio element that is almost the same as the video element in terms of attributes and
compatibility.
While some mobile browsers support WAV and Vorbis audio files, they all work well with the MP3 audio
format. Therefore, we can usually use only one source definition with the MP3 audio file, such as:
<audio width="300" height="50" controls src="audio.mp3">
Audio playing not available.
<a href="audio.mp3">Download the file</a>
</audio>

15. HTML5 Audio Compatibility Table
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE

16. UI Frameworks
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Sencha Touch
• jQuery Mobile
• Enyo
• Montage
• iUI
• jQTouch

17. Sencha Touch
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Sencha Touch is a JavaScript-based framework for mobile app development.
• It has a free commercial license and it is compatible with iOS, Android, BlackBerry 7/10, and
Windows Phone 8.
• Sencha provide sencha sdk platform for make app.
• It supports 50 components and built in MVC with javascript.
• A basic “Hello World” application in Sencha Touch will look like this:
Ext.application({
name: 'Sencha Touch Demo’,
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [
{
title: 'Hello World’,
iconCls: 'home’,
html: 'Welcome to Sencha Touch’
}]});}});

18. jQuery Mobile
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• jQuery Mobile is a cross-platform UI framework optimized for touch smartphones.
• jQuery Mobile works over jQuery and it manages only the user interface of our web apps.
• jQuery Mobile is compatible with more than 10 different platforms, including all the modern smartphone
and tablet browsers.
• jQuery Mobile manages a series of rich controls, as well as page navigation and transitions using CSS3
animations.
• It is compatible with Apache Cordova/PhoneGap apps.
• Example:
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Hello World</h1>
<a href="#">Action</a>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li>Option 1
<li>Option 2
<li>Option 3
<li>Option 4
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="e">
<h4>O'Reilly Media</h4>
</div>
</div>

19. Enyo
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Enyo is a cross-device (desktop, tablet, and phone), cross-platform web app UI framework.
• The framework originated with the HP Palm team from webOS, but after the open sourcing of
that platform the Enyo effort was converted to a multiplatform solution, including support for
iOS, Android, Firefox, Chrome, Windows Phone, BlackBerry, and more.
• Enyo is modular and component-based and the basic core is only 25 KB zipped, making it a
mobile-optimized framework.
• It has a range of useful widgets, including image carousels and date pickers, and we can
encapsulate our own controls really easily.

20. Montage
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Montage is a complete web app development framework, including a client-side Java‐Script
library and a server-side Node.js library.
• One of the big advantages of Montage is the usage of a two-way data binding mechanism
using custom HTML5 data.
• It also includes components and templates, data persistence, and event management.
• Montage is an open source project created by Motorola Mobility, now owned by Google.
• One of the key targets of Montage is Apache Flex (formerly Adobe Flex) developers trying to
move into the HTML5 world.

21. iUI
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• iUI was one of the first libraries developed for iPhone-style application development.
• iUI is a very simple-to-use, nonintrusive JavaScript library, including CSS and assets (generally
backgrounds) that emulate the native iPhone application controls, animations, and application
workflow.
• The main features are:
• No JavaScript coding required
• Extends the behavior of standard HTML markup
• Overrides links and forms with Ajax requests
• Updates the page with smooth iPhone transitions with no code
• Other advanced features that iUI supports include:
• Modal dialog pop-ups
• Form designs
• Emulation of native form controls
• Stripped tables
• Right (>) toolbar button

22. jQTouch
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• jQTouch is a jQuery plug-in for iPhone web development that produces similar results to iUI,
but with more powerful graphics and animations.
• It does require some JavaScript code to initialize the page.
• The supported features include:
• Native WebKit animations using jQuery methods
• Callback events
• Flexible themes
• Swipe detection
• Extensions: floaty bar, geolocation, offline capability
• Visual controls
• Animations