Top Banner
INTRODUCTION TO MOBILE WEB PLATFORM Understand the mobile web development Discover the mobile web framework Understand the basic HTML5, PHP5 and CSS3 Understand Webapps Environment
71
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: chapter2

INTRODUCTION TO MOBILE WEB PLATFORM

• Understand the mobile web development• Discover the mobile web framework• Understand the basic HTML5, PHP5 and CSS3• Understand Webapps Environment

Page 2: chapter2

UNDERSTAND THE MOBILE WEB DEVELOPMENT

2.1

Page 3: chapter2

CURRENT TRENDS IN MOBILE COMMUNICATIONS TECHNOLOGIES AND SYSTEMS

Current trends on personal or enterprise computing clearly show that mobile

services and devices will play a large role on how we as users and businesses will

create, consume, and communicate in the future.

http://tonywoody.hubpages.com/hub/A Brief Overview of Mobile Computing‐ ‐ ‐ ‐ ‐

Page 4: chapter2

Mobile market share

Page 5: chapter2

Differences Desktop and Mobile Applications

• Mobile and embedded systems must balance compute power, battery life and cost. This means mobile platforms are constrained in terms of available resources such as:– CPU capabilities– memory capacity– memory bandwidth– power consumption– physical size.

Page 6: chapter2

• Some graphically rich applications are initially developed for desktop platforms and are later ported to embedded or mobile platforms.

• The reduction in available resources means that the application is unlikely to work at the same performance level as it does on the desktop platform

Page 7: chapter2

Existing technologies enabling the development of Mobile Applications

Read the enablingtechnologies word document

Page 8: chapter2

Mobile computing limitations

• Insufficient Bandwidth• Security Standards• Power consumption• Transmission interferences• Potential health hazards• Human interface with device

Page 11: chapter2

Lifecycle of a mobile apps

Page 12: chapter2

DISCOVER THE MOBILE WEB FRAMEWORK

2.2

Page 13: chapter2

jQuery Framework

• jQuery is a fast, small, and feature-rich JavaScript library.

• It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

• With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Page 14: chapter2

• Other jQuery Projects– jQuery user interface– jQuery mobile– Qunit js unit testing– Sizzle css selector engine

Page 15: chapter2

jQuery Mobile

• A cross – platform UI framework for creating webapps for touch – enabled smartphones and tablets, using only HTML5 standard code

Page 16: chapter2

Advantages

• Easy to learn and Quick to Iterate• Cross-platform & cross-device

• Slower Than Native• Limited Capabilities vs Native

Disadvantages

Page 17: chapter2

What jQuery Mobile Is Not

• jQuery Mobile is not a jQuery alternative for mobile browsers– To use jQuery Mobile, you need to include the

typical jQuery framework. – It is not a replacement; it is a UI layer on top of

jQuery.

Page 18: chapter2

What jQuery Mobile Is Not

• jQuery Mobile is not a webapp SDK– You can create the whole mobile experience with

jQuery Mobile but you will need some additional work to compile it as native apps.

Page 19: chapter2

What jQuery Mobile Is Not

• jQuery Mobile is not a framework for JavaScript lovers– Except in the case of certain advanced topics, you

won’t need any JavaScript code for jQuery Mobile to work.

Page 20: chapter2

What jQuery Mobile Is Not

• jQuery Mobile is not the solution for all mobile applications, websites, or games– jQuery Mobile is not the solution for all mobile

applications, websites, or games

Page 21: chapter2

Why jQuery Mobile?

Page 22: chapter2

Features

• Non-intrusive semantic html5 code• Open sourced• Lightweight• Multiplatform with progressive enhancement• Accessibility support• Customizable• Includes javascript api

Page 23: chapter2

You need to know

• Html5• Css3• Javascript• jQuery

Page 24: chapter2
Page 25: chapter2

Mobile and Tablet Device Categories

Page 26: chapter2

Mobile phones

• phones with call and SMS support• don’t have web browsers or connectivity • don’t have any installation possibilities• these phones don’t really interest us; we can’t

do anything for them right now.

Page 27: chapter2

Low-end mobile devices

• have web support• very basic browser• do not have touch support• limited memory• include only a very basic camera and a basic

music player.

Page 28: chapter2

Mid-end/high-end mobile devices

• mass-market option for a decent mobile web experience• maintain the balance between a good user experience

and moderate cost• also known as social devices, meaning that the users

access social sites, such as Facebook or Twitter via the mobile web

• typically offer a medium-sized screen, basic HTML-browser support, sometimes 3G, a decent camera, a music player, games, sometimes touch, and application support.

Page 29: chapter2

Smartphones• There are dozens of smartphone devices on the market, including iPhone,

Androidbased devices, webOS, Symbian, BlackBerry, and Windows Phone. This is the most difficult category to define.

• Why aren’t some mid-end and high-end devices considered “smart” enough to be in this category? The definition of smart evolves every year. Even the simplest mobile device on the market today would have been considered very smart 10 years ago.

• A smartphone, as defined today, has a multitasking identifiable operating system, a modern HTML5 browser, wireless LAN (WLAN, also known as WiFi) and 3G connections, a music player, and several of the following features:– GPS (Global Positioning System) or A-GPS (Assisted Global Positioning System)– Digital compass– Video-capable camera– TV out– Bluetooth– Touch support– 3D video acceleration– Accelerometer

Page 30: chapter2
Page 31: chapter2

Tablets• A tablet is a device with a large screen (between 6 and 11 inches), a

full HTML5 browser,• WLAN connection (WiFi), sometimes 3G, touch support, and all the

other features that we can find on a smartphone.• In this category, we can find many devices, including the following:

– Apple iPad– Samsung Galaxy Tab– BlackBerry PlayBook– Barnes and Noble Nook Color– Motorola Xoom– LG Optimus Pad– Amazon Fire– Sony S1 and S2

Page 32: chapter2

Operating Systems and BrowsersOperating system Creator Browser included Other browsers

iOS Apple Safari Opera Mini and pseudobrowsers

Android Google Android Browser Firefox, Opera Mini, AmazonSilk, Opera Mobile

Symbian Nokia Symbian Browser Opera Mini, Opera Mobile

webOS / Open webOS

HP (formerly Palm) webOS Browser

Windows Mobile Microsoft Internet Explorer Opera Mobile

MeeGo Nokia Micro Browser/NokiaBrowser

Firefox

BlackBerry OS RIM BlackBerry Browser Opera Mini

Bada Samsung Samsung Browser

S40 Nokia Nokia Browser

Page 33: chapter2

jQuery Mobile Compatibility

The jQuery Mobile 1.0 version is compatible with the following by-default browsers:

• iOS– Safari for iPhone, iPod Touch, and iPad from iOS 3.2

• Android OS– Android Browser phones and tablets

• BlackBerry OS– BlackBerry Browser for smartphones from 5.0 and for tablets

• Symbian– Nokia Browser for touch devices

Page 34: chapter2

• webOS– webOS Browser from webOS 1.4

• Bada– Bada Browser

• MeeGo– Micro Browser and Nokia Browser (included in Nokia N9)

• Windows Phone– Internet Explorer from Windows Phone/Mobile 6.5 and

Windows Phone 7.0

• Kindle– Browser from Kindle 3

Page 35: chapter2

jQuery Mobile is also compatible with the following third-party browsers:

• Opera Mini, fully supported from 5.0 on most devices

• Opera Mobile, fully supported from 10.0 on most devices

• Firefox Mobile

Page 36: chapter2

• A-grade– A browser with CSS3 media queries capability. These browsers

will be fully tested by the jQuery team. However, some features will be automatically disabled if the device does not support them. The framework provides a full experience with AJAX-based animations.

• B-grade– Browser has an enhanced experience but without AJAX

navigation features.• C-grade

– A browser incompatible with jQuery Mobile. This browser will not receive any CSS or JavaScript code from the framework, so the user will see a plain HTML file with the content

Page 37: chapter2

UNDERSTAND THE BASIC HTML5, PHP5 AND CSS3

2.3

Page 38: chapter2

HTML5

• evolving standard that includes changes to the HTML markup and lot of new APIs in JavaScript (yes, HTML5 is a lot about JavaScript APIs)

• include features inside browsers,including the W3C’s formal HTML5 standard, other W3C APIs, CSS3, and nonstandard extensions.

• You can check http://mobilehtml5.org for compatibility information for HTML5 in mobile browsers.

Page 39: chapter2

HTML5 Feature Areas

Page 40: chapter2

Semantics

Page 41: chapter2

Simplified DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html>

to

Page 42: chapter2

Simplified Character Set

<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>

<meta charset=utf-8 >

to

Page 43: chapter2

New HTML5 Elements

Page 44: chapter2

Obsolete Elements

Page 45: chapter2
Page 46: chapter2

CSS3

• CSS – Cascading Style Sheets• web-based markup language used to describe

the look and formatting of a website to the browser

• CSS3 simply refers to the latest version of CSS, with additional capabilities far beyond the scope of the first two generations

Page 47: chapter2

• Because of its modular structure, CSS3 allows developers to build content-rich web pages with relatively lightweight code requirements.

• That means fancier visual effects, better user interfaces and most importantly, cleaner pages that load faster than ever before.

• Simply put, CSS3 is the presentation layer of a web page that leads the charge for all of the other technologies buried within.

• CSS3 finally brings the promise of desktop-style layout to web pages, complete with graphic elements such as drop shadows, gradients, border effects, multi-column layouts and much more.

Page 48: chapter2

CSS3 Modules• CSS3 has been split into "modules". It contains the "old CSS

specification" (which has been split into smaller pieces). In addition, new modules are added.

• Some of the most important CSS3 modules are:– Selectors– Box Model– Backgrounds and Borders– Image Values and Replaced Content– Text Effects– 2D/3D Transformations– Animations– Multiple Column Layout– User Interface

Page 49: chapter2

Multimedia

Page 50: chapter2

Multimedia

• New HTML5 media elements– <audio> and <video>

• Native audio and video (no plugins required)– Programmable with javascript– Style with CSS

Page 51: chapter2

Example

Page 52: chapter2

Graphics and 3D

Page 53: chapter2

HTML5 Canvas and SVG

• Provide native drawing functionality– Previously possible only with plugins (Flash,

Silverlight)• Completely integrated into HTML5 documents– Can be styled with CSS– Can be controlled with javascript

• Use for animation, charts, images, pixel manipulation

• Canvas supports 2D and 3D (WebGL)

Page 54: chapter2

Device Access

Page 55: chapter2

Device Access Features

• Geolocation– Allows users to share their location for location

aware services• Drag and Drop• Filesystem API• Speech Input• Device Orientation (accelerometer)• Webcam (bar code, QR code scanning)

Page 56: chapter2

Example: Speech Input

Page 57: chapter2

PERFORMANCE

Page 58: chapter2

Web workers and performance

Page 59: chapter2

Offline and Storage

Page 60: chapter2

Offline Web Application

Page 61: chapter2

Web and Database Storage

Page 62: chapter2

Connectivity and Real Time

Page 63: chapter2

Connectivity Features

Page 64: chapter2

UNDERSTAND WEBAPPS ENVIRONMENT

2.4

Page 65: chapter2

Identify WebApps Environment

• To test the mobile webapp in different environments, we can use:– Real devices– Remote labs– Emulators– Simulators– Lot of friends

Page 66: chapter2

Emulators

• an emulator is a desktop application that emulates mobile device hardware and operating systems, allowing us to test and debug our applications and see how they are working

• allows us to run an operating system and applications on another operating system

• created by manufacturers and offered to developers for free, either standalone or bundled with the Software Development Kit (SDK) for native development.

Page 67: chapter2

Example

Page 68: chapter2

Simulators

• less complex application that simulates some of the behavior of a device, but does not emulate hardware and does not work over the real operating system

• Example:– iOS Simulator provides you with an iPad for free

inside your Mac

Page 69: chapter2

Example

Page 70: chapter2

Remote Labs

• A remote lab is a web service that allows us to use a real device remotely without being physically in the same place.

• It is a simple but very powerful solution that gives us access to thousands of real devices, connected to real networks all over the world, with a single click.

• You can think of it as a remote desktop for mobile phones.

Page 71: chapter2

• The most useful services on the market are the following– Keynote DeviceAnywhere (commercial)

• http://www.deviceanywhere.com

– Perfecto Mobile (commercial)• http://www.perfectomobile.com

– Nokia Remote Device Access for Symbian and MeeGo (free)• http://www.mobilexweb.com/go/rda

– Samsung Lab.Dev for Android (free)• http://www.mobilexweb.com/go/labdev