HTML5 XP session 16 tủ tài liệu bách khoa

Proprietary platforms are those which are designed and developed by the mobile device manufacturers.. These platforms are developed for specific devices and are not supported on all pla

Session: 16

Building a Mobile Web

Application

These application software are also known as apps

The most commonly used apps are mobile browsers that display the Web pages

Ÿ   manufacturers.

Ø  High-end Mobile Devices

Ÿ  

Ÿ  

Ÿ  

Ø  Smartphones

Ÿ  

Ÿ  

A mobile device platform is similar to a software platform

It is basically responsible to interact with the device hardware and run software/services

on the mobile device

The mobile platforms are categorized as proprietary and open source

Proprietary platforms are those which are designed and developed by the mobile device manufacturers

These platforms are developed for specific devices and are not supported on all

platforms

Open source platforms are those which are freely available to the users

The users can download the source code and alter them as per their requirements

•  It is a mobile OS developed by Apple Inc and was initially referred to as iPhone OS

•  It is derived from Mac OS X, which is based on the UNIX platform

iOS

•  It is an open source mobile OS developed for mobile phones

•  It includes a user interface framework, libraries, and component tools

Symbian

•  It is a mobile OS that runs on top of the Windows Mobile platform

Low-end mobile devices 128 x 160 or 128 x 128

Mid-end mobile devices 176 x 220 or 176 x 208

High-end devices 240 x 320

Smartphones 240 x 480, 480 × 320, 640 × 480, or 960 × 640

The resolution of mobile devices is measured in terms of the physical dimensions of the screen

The screen dimensions are either measured diagonally in terms of inches/centimeters or

in terms of width and height

The relation between the physical dimension and resolution is termed as Pixels per Inch (PPI) or Dots per Inch (DPI)

The higher DPI results in good print-quality graphics on the mobile device

Ÿ  

Manufacturer Model Screen

Size

Resolution (in pixels)

Type

Apple iPhone 3GS 3.5” 480×320 Smartphone Apple iPhone 4S 3.5” 960×640 Smartphone Blackberry Torch 9810 3.2” 640×480 Smartphone

Samsung Galaxy S 4G 4” 480×800 Smartphone Samsung Galaxy S II 4.52” 800×480 Smartphone Nokia Lumia 800 3.7” 480x800 Smartphone

Smartphones and tablets can switch between landscape and portrait views to present the better viewing of a Web page

This rotation capability of changing the view from landscape to portrait or vice-versa is due to the hardware accelerators available in the phones

A mobile Web site must be aware of these rotations and should provide a good user experience in both the orientations

Ÿ  

Ø  Perspective

Ÿ  

Ÿ  

Ÿ  

Some of the possible users’ contexts are as follows:

Ø  Enhancement

Ÿ  

Ÿ  

Ÿ  

Some of the core principles for enhancing mobile Web sites are as follows:

Ø  Use of Web Standards

Ÿ  

Ÿ  

Ÿ  

Ÿ  

•  The Web sites with pop-up windows makes the site impractical to work with

•  Also, all mobile browsers do not provide support for them

Pop-up windows

•  The use of graphics increases download time of the pages

•  Also, they can obstruct the layout of the old mobile browsers, resulting in incorrect display of the page

Use of graphics

•  Many mobile devices do not provide the support for frames due to usability problems

•  Also, the HTML5 new specification does not provide the support for frames

Use of frames

Ÿ  

A Web page contains the following sections:

small-screen handheld devices.

BlackBerry and others

Windows Mobile and Windows Phone

Meta Tag Description Supported Mobile

Safari running on iOS

Ÿ  

Ÿ  

<link rel=”alternate” media=”handheld” href=”http://mysite.com” />

Ø  Viewport Meta Tag

Ÿ  

Ÿ  

Ÿ  

Ÿ  

width Defines the horizontal size of the viewport

Attribute Description Value

minimum-scale Defines the minimum zoom scale of the viewport Floating value between 0.1 to n

maximum-scale Defines the maximum zoom scale of the

viewport

Floating value between 0.1 to n

user-scalable Allows scaling of application on the

mobile devices That is, users can zoom in and out in the application

impossibility, leaving developers nostalgic for the days when they only had to support legacy browsers </p>

</section>

</body>

</html>

Ÿ  

Ÿ  

Ÿ  

Ÿ  

Ÿ   follows: Ø  Layouts

Ÿ  

Ÿ  

<li><a title=”2D and 3D” href=”animation_3d.html”

accesskey=”2”>2D &amp; 3D Animation </a></li>

<li><a title=”3D Animation” href=”animation_2d.html”

accesskey=”3”>Animation &amp; 3D</a></li>

</ul>

</NAV>

</body> </html>

Ÿ  

<!DOCTYPE html>

<head>

<title> Mobile Application </title>

<meta name=”viewport” content=”width=device-width,minimum- scale=1.0,maximum-scale=1.0”/>

</head>

<body>

<HEADER>

<SECTION><img src=”logo.png” border=”1” alt=”Arena

Animation” title=”Arena Animation Home”/> <b> Animation | Multimedia </b>

</SECTION>

<NAV><ul>

<li><a title=”Comprehensive Animation”

href=”#”>Comprehrensive Animation Pro</a></li>

<li><a title=”2D and 3D” href=”#”>2D &amp; 3D Animation </a></li>

<li><a title=”3D Animation” href=”#”>Animation &amp; 3D</a>

<p> Arena Animation is leader in animation and multimedia

education with the widest network of centers across the country Over a span of 14 years, 250,000 students and professionals have, through Arena, found their calling in animation, graphics, print publishing, web designing & films

</p>

</SECTION>

<FOOTER>

<p>

<a href=”tel:+91 22 2827 2300”>Contact us </a> <br/>

Copyright &copy; 2012 Aptech Ltd.</p>

</FOOTER>

</body>

</html>

Ÿ  

Ÿ  

Most modern mobile browsers support following features of CSS3:

Ÿ  

<!DOCTYPE html>

<head>

<title> Mobile Application </title>

<meta name=”viewport” content=”width=device-width”/> <style>

border-left:1px solid #c4bbe7;

border-right:1px solid #c4dbe7;

border-top:1px solid #c4dbe7;

border-bottom:2px solid #c4dbe7; }

print publishing, web designing & films

</p>

</SECTION>

<FOOTER>

<p>

<a href=”tel:+91 22 2827 2300”>Contact us </a> <br/>

Copyright &copy; 2012 Aptech Ltd

</p>

</FOOTER>

</body>

</html>

Ÿ   applied.

Ø  Media Queries for Browser Detection

Ÿ  

Ÿ   follows:

Design of a mobile Web site should be simple to fit on small screens

Avoid horizontal scrolling as some phones do not support horizontal scrolling and hide the content on the screen

Use buttons, instead of providing many tiny links, as this can annoy the mobile users Create cookies to store the user’s choice for viewing the full version of the site

Avoid creating complex forms with many input fields, as data entry can be difficult on mobile devices compared to the desktops

Limit the use of images due to bandwidth restrictions on mobile devices

Add mobile specific functionalities, such as built-in GPS facility or call-in action links

Use of good foreground and background colors is important as they makes the sites readable on small screens

Select the technologies that are compatible with old mobile devices

Also, provide alternatives for functionalities, such as cookies, tables, style sheets, fonts, colors, and so on

Avoid use of pop-up windows, tables for layout, frames, and image maps in the mobile Web site design