Mobile applications chapter 3

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

Mobile Strategy
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
When creating mobile web applications, we need to
remember that we can create browser-based apps, full-screen
web apps, or native web apps.

Context
Remember that a mobile user has a different context than a
desktop user. You should think about and define your users’
possible contexts:
• Where is the user?
• Why is the user accessing your mobile website?
• What is the user looking for?
• What can you offer from a mobile perspective to help solve the user’s
problem?
• Where will the user be when accessing your website? Walking on the
street, using public transportation, at the office, traveling as a tourist,
sitting on the couch watching TV?

Server-Side Adaptation
Using a server-side adaptation mechanism, you can reduce
the number of required versions to two: one for low-end and
mid-range devices and one for high-end devices and
smartphones.
• Low-end devices
Basic XHTML markup, maximum screen width of 176 pixels, basic CSS
support (text color, background color, font size), no JavaScript
• Mid-range devices
Basic XHTML markup, average screen width of 320 pixels, medium CSS
support (box model, images), basic JavaScript support (validation,
redirection, dialog windows)

Server-Side Adaptation
• High-end devices
XHTML or HTML 4 mark-up, average screen width of 240 pixels,
advanced CSS support (similar to desktops), Ajax and DOM support,
optional touch support, optional orientation change support (for an
average screen width of 320 pixels)
• Smartphones
HTML5, large screen size and high resolution, touch support, support for
CSS3 (animations, effects) and Ajax, local storage, geolocation
• Web app for smartphones
Same as smartphones, plus offline support, full-screen and icon
installation, native integration, and device APIs

Progressive Enhancement
Progressive enhancement is a simple but very powerful technique used in
web design that defines layers of compatibility that allow any user to
access the basic content, services, and functionality of a website and
provide an enhanced experience for browsers with better support of
standards.

Progressive Enhancement
Progressive enhancement has the following core principles:
• Basic content is accessible to all browsers.
• Basic functionality is accessible to all browsers.
• Semantic mark-up contains all content.
• Enhanced layout is provided by externally linked CSS.
• Enhanced behaviour is provided by unobtrusive, externally
linked JavaScript.
• End user browser preferences are respected.

Responsive Web Design
It’s a simple and powerful idea to provide one HTML document that
will automatically adapt (respond) on the client side to different
scenarios, usually meaning available screen size or current orientation
(landscape versus portrait).
RWD is implemented using CSS3 media queries (covered in Chapter
11), which allow the same HTML to automatically change the layout and
design in different conditions, so it can be used to separate between:
• Feature phones
• Smartphones
• Tablets
• Desktop browsers
• Smart TVs

Responsive Layout
RWD is usually accompanied by a fluid grid layout allowing
a site to adapt easily to different screen sizes. On the desktop
side, sometimes it’s common to have one or more fixed-width
layouts (such as for 800px wide, 1024px wide, or 1280px wide).

Responsive Images
Responsive images, also known as flexible images or fluid
images, make use of a group of techniques that may involve
CSS resizing (using the same original file), supplying different
image sizes on the server side, or cropping the images using
CSS to adapt to different screen sizes and orientations.

RESS
Responsive Web Design + Server Side Components (RESS)
incorporates the best of two worlds: RWD and server-side
adaptation. With this technique, we can decide on the best
version and/or compatible experience on the server side, and
then RWD on the client side will make the final adjustments,
such as having a fluid layout and reacting to different
orientations.

Basic of Mobile HTML5
HTML divided into two parts:
1. The Document Head
2. The Document Body

The Document Head
In Document Head Includes:
1. Title
2. Meta Tags
3. Script
4. Stylesheet (Internal or External Link)

The Document Body
In Document Body Includes:
1. Actual Content Document
2. Document Related Tags
3. Navigation
4. Forms
5. Media Tags

Main Structure
A typical mobile document will be divided into four main
sections:
1. Header
2. Main navigation
3. Content
4. Footer

HTML5 Mobile Boilerplate
Boilerplate means already implemented template.
The template includes:
• Meta tags, such as viewport and icon references
• normalize.css, an alternative to CSS reset (a way to
normalize defaults on different browsers)
• Some JavaScript libraries, such as Zepto.js and
Modernize (two libraries we will cover later in this book)
• A JavaScript helper class useful for some JavaScript-
based hacks, such as the iOS viewport bug fix
• High-performance and mobile-specific configuration
files for Apache

The Contents
1. List
- Ordered lists (ol tag)
- Unordered lists (ul tag)
- Definition lists (dl tag)
2. Tables
3. Frames
4. Links
5. Accessibility

HTML5 Form - Design
- General method="GET" or "POST" and action="serverScriptURL".
- Apply CSS and Script to Form
e.g.
<form action="formAction" method="post">
<input type="checkbox" name="accept" id="accept" value="yes">
<label for="accept">I accept terms and conditions</label>
</form>

HTML5 Form - Elements
An HTML5 mobile form can contain the following form elements:
• Single-line text boxes for different types of input
• Password boxes
• Multiline text boxes
• Date and time selectors
• Select lists for single selection
• Select lists for multiple selection
• Checkboxes
• Radio buttons
• File selectors
• Range selectors
• Noninteractive elements, such as hidden input fields

HTML5 Form - Buttons
HTML has five types of buttons:
Image map buttons
<input type="image">
Submit buttons
<input type="submit">
Clear buttons
<input type="reset">
Custom buttons
<input type="button">
Submit buttons with HTML support
<button></button>

HTML5 Form – Text Input Field
The possible input types we have are:
• Any-character textbox: <input type="text"> or just <input>
• Numeric textbox: <input type="number">
• Phone number textbox: <input type="tel">
• Email textbox: <input type="email">
• URL textbox: <input type="url">
• Any-character secure box: <input type="password">
• Search textbox: <input type="search">

HTML5 Form – Virtual Keyboard

HTML5 Form – Control Attributes
Placeholder:
A placeholder is a hint that is shown inside a text box until the user inserts
text in that field.
<input type="text" name=“url" placeholder=“e.g. http://mobilexweb.com">

HTML5 Form – Control Attributes
Autofocus:
Adding the autofocus Boolean attribute to a control tells the browser to
focus on that Element.
<input type="search" autofocus>

HTML5 Form – Validations
Input Validation Attributes:
required
A Boolean attribute that can be applied to any input type
min
Specifies the minimum valid value; can be applied to numeric (number or
range) or date input types
max
Specifies the maximum valid value; can be applied to numeric (number or
range) or date input types
pattern
Specifies a regular expression against which the input value should be
validated
step
Used for numeric (number or range) input types; specifies the legal number
intervals

HTML5 Form – Validations
Fig. 2.0: FigFirefox shows an error bubble when the
element is not valid—we can define the error text using
the nonstandard x-moz-errormessage attribute.

Mobile applications chapter 3

Related slideshows

More Related Content

Mobile applications chapter 3