Mse sept13 (3/3)

Mobile SoftwareMobile Software
EngineeringEngineering
By
Prof. Dr.Prof. Dr. O.P.VyasO.P.Vyas
DAAD Fellow (Germany), AOTS Fellow (Japan)DAAD Fellow (Germany), AOTS Fellow (Japan)
Indian Institute of Information TechnologyIndian Institute of Information Technology
AllahabadAllahabad
Mobile Software Engineering
Prof. O P Vyas Indian Institute of Information Technology, Allahabad

 Mobile Software: Evolution or Revolution
 Smartphone Vs Other Mobile DevicesSmartphone Vs Other Mobile Devices
 Mobile OS: Android OS, Windows Phone,Mobile OS: Android OS, Windows Phone, iOSiOS
 Mobile Software: Cross Device ApplicationsMobile Software: Cross Device Applications
 Mobile Apps Characteristics & Issues
 Software trends : Native Apps & Web AppsSoftware trends : Native Apps & Web Apps
 Mobile Information Architecture: PatternsMobile Information Architecture: Patterns
Mobile Software EngineeringMobile Software Engineering
2
 Mobile Information Architecture: PatternsMobile Information Architecture: Patterns
 Why Mobile SE ? Mobile SE Approaches
 Mobile SE trends : Usability Lifecycle & UX DesignMobile SE trends : Usability Lifecycle & UX Design
 Mobile Interaction Design: MobileMobile Interaction Design: Mobile IxDIxD PatternsPatterns
 Mobile Software Testing : Native & Web AppsMobile Software Testing : Native & Web Apps
 Mobile Web & Responsive Web Design
 Implementation issuesImplementation issues:: Software ProjectsSoftware Projects

Our Approach …Our Approach …
 Concepts of Mobile Software & need for EngineeringConcepts of Mobile Software & need for Engineering
approachapproach
 Significant issues: Mobile UX design, InformationSignificant issues: Mobile UX design, Information
ArchitectureArchitecture
 Implementations: Mobile Apps Design & DevelopmentImplementations: Mobile Apps Design & Development
 Responsive Web DesignResponsive Web Design Responsive Web DesignResponsive Web Design
 Tools & Frameworks:Tools & Frameworks: PhonegapPhonegap,, MosyncMosync && jQueryjQuery
 Modeling with UMLModeling with UML
 Tools & TechniquesTools & Techniques
Overview of Mobile Platform:
– Writing codes: Implementing using Tools & Framework
Tools : J2ME, Javascript, jQuery, HTML5,….. 3

Types of Mobile Apps
•• Native AppsNative Apps
A native app as one that is
specifically designed to
run on a device’s
operating system and
machine firmware, and
•• Web AppsWeb Apps
A Web app, or browser
application, is one in
which all or some parts
of the software are
downloaded from themachine firmware, and
typically needs to be
adapted for different
devices.
Ex. Address book,Address book,
calendar andcalendar and
calculatorcalculator
downloaded from the
Web each time it is run.
 It can usually be
accessed from all Web-
capable mobile devices.
Ex. Weather Widgets,Weather Widgets,
Social Networking andSocial Networking and
Online GamesOnline Games.
9/22/20134

Technical difference between the two?
• For instance, a native
application developed for
the iPhone will need to run
on its proprietary iOS
platform, or on Symbian
for many Nokia devices,
and so forth.
• One interesting point to note
is that while architectural
differences will likely remain
between a native and Web
application for some time, the
user experiences provided by
both interfaces are
increasingly blurred, as most
native apps utilize real-time
and so forth.
• A Web app, however, is
typically coded in a
browser-rendered
language such as HTML
combined with
JavaScript.
native apps utilize real-time
Web connectivity and Web
apps provide offline modes
that can be accessed without
network connectivity.
• As a result, some of these
apps are now referred to as
hybrid apps.
9/22/20135
Best practices for Mobile Apps development: http://www.w3.org/TR/mwabp/

Mobile SE approach or Business AppsMobile SE approach or Business Apps
Example Business Apps

User-Centered Mobile Design Life cycle
7

UX Design
8

Things To Know About UX Design
UX design is an amazing discipline, but it cannot, or will not,
accomplish certain things.
 UX Design Is Not One Size Fits All
– User experience design won’t work in every situation for every
user because, as human beings, we are all different.
– What works for one person might have the opposite effect on
another.
– And just as we can’t design a user experience, we can’t replicate
the user experience for one website exactly on another website.
User experiences will be different between websites or Mobile
Software. a design must be tailored to the goals, values,
production process and products of its website / Mobile
Software.
9

Things To Know About UX Design
 Can’t Be Directly Assessed With Traditional
Metrics
– You can’t determine the effectiveness of a user experience
design based solely on statistics such as page views, bounce
rates and conversion rates. We can make assumptions, and we
can ask users for anecdotal evidence, but we can’t install an
app (at least not yet) that automatically records user
experience statistics directly.experience statistics directly.
 Not the Same Thing as Usability
– User experience and usability have become synonymous, but
these two fields are clearly distinct. UX addresses how a user
feels when using a system, while usability is about the user-
friendliness and efficiency of the interface.
• Usability is big part of the user experience and plays a major role
in experiences that are effective and pleasant, but then human
factors science, psychology, information architecture and user-
centered design principles also play major roles.
10

Tasks And Techniques Of UX Designers
• UX designers perform various tasks at various points in the
process. Following are the few things that they deliver.
 Evaluation of Current System
 A/B Testing
 User Surveys
 Wireframes and Prototypes Wireframes and Prototypes
 User Flows
 Storytelling
 Design Patterns
 User Profiles and Personas
 Content Inventory
 Content Style Guides
11

Mobile Business Apps
Anatomy of Best AppsAnatomy of Best Apps

Mobile Apps uses cross technology
tools for particular application
domain…
From DatabaseDatabase, Cloud Computing,, Cloud Computing, Data MiningData Mining, to
Visualization TechniquesVisualization Techniques…..
Large number of different technology Solutions areLarge number of different technology Solutions are
being integrated in Business Appsbeing integrated in Business Apps……

Database for Mobile: SQLite
• SQLite is a relational database management system contained in a small
(~350 KB) C programming library.
• In contrast to other database management systems, SQLite is not a separate
process that is accessed from the client application, but an integral part of it.
• SQLite is a popular choice as embedded database for local/client storage in
application software such as web browsers.
• It is arguably the most widely deployed database engine, as it is used today by
several widespread browsers, operating systems, and embedded systems, among
others.others.
• SQLite has many bindings to programming languages.& source code in the public
domain.[
– Corona includes support for SQLite databases on all
platforms. This is based on the built-in sqlite support on
the iPhone, and a compiled version of SQLite on
Android. Note that this increases the size of the Android binary by 300K.
• SQLite is available in all versions of Android, iPhone, and iPad, as
well as in the Corona Simulator.

Cloud Computing for Mobile Apps
• Could Computing is providing very significant extension support
to Mobile Apps.
• Mobile Apps are getting immensely benefitted by using existing
Cloud platforms and tools- some public, some proprietary for
many Business Apps.
• Cloud-based development platforms in PaaS and IaaS public
clouds –clouds –
–– such assuch as Google, Amazon Web Services, Microsoft, andGoogle, Amazon Web Services, Microsoft, and
Salesforce.comSalesforce.com ---- are really in their awkward teenage years.are really in their awkward teenage years.
–– But they show cost savings and better efficiencies.But they show cost savings and better efficiencies.
–– The ability to quickly get applications into production and toThe ability to quickly get applications into production and to
scale those applications as required.scale those applications as required.
–– The ability to collaborate with other developers, architects,The ability to collaborate with other developers, architects,
and designers on the development of the applicationand designers on the development of the application.

Big Data AnalyticsBig Data Analytics
&&
Mobile AppsMobile AppsMobile AppsMobile Apps

What is Big Data?
• Big data is a popular term used to describe the exponential
growth and availability of data, both structured and unstructured.
• And big data may be as important to business – and society – as
the Internet has become.
– Why? More data may lead to moreMore data may lead to more
accurateaccurate analyses.
– More accurate analyses may lead to moreanalyses may lead to more– More accurate analyses may lead to moreanalyses may lead to more
confident decisionconfident decision making.
– And better decisions can mean greater
operational efficiencies, cost reductions and
reduced risk.
• As far back as 2001, industry analyst Doug Laney (currently with
Gartner) articulated the now mainstream definition of big data as
the three Vs: volume, velocity and varietythree Vs: volume, velocity and variety

Big Data Analytics
• Big Data analytics involves group of technologies for
– Data Analytics
– Business Intelligence
– Business Strategies– Business Strategies
• Lot of Big Data analytics are available on Cloud platforms.
Many popular must have Business apps are
making use of Big Data analytics.

Mobile Software Engineering can be worthwhile for Business productivity
Apps, which are critical to success of an enterprise.
 More and more organizations aim at leveraging mobile devices
and applications for their respective business……
The explosion of consumer appsapps can be seen in just about every
industry,
 And Mobile Business Apps are running rampant in the B2B worldB2B world as
well, including spaces such as:well, including spaces such as:
 Business Apps: CRM, ERP, HR systems
 Productivity: Docs, spreadsheets, presentations
 Retail: Location-intelligent Mobile Commerce
 Media: Magazines & newspapers going 100% digital
 Travel: Mobile bookings, check-ins, maps, deals, etc.
 Education: Tablets and apps in classrooms
 Healthcare: Patient records, physician notes, etc.
 Finance: Apps for real-time trading, portfolio analysis

Business App:Business App: CloudOnCloudOn
• CloudOn lets you run Microsoft
Office on the iPad.
• Available on: Android and iOS
• There are a few apps that run
Microsoft Office on the iPad and
Android tablets.
•• CloudOnCloudOn is popular because•• CloudOnCloudOn is popular because
– 1) it's free,
– 2) it supports many of
Office's more advanced
features,
– 3) it's designed to work
on a touch interface.

CloudOn: Features
• CloudOn lets you add Microsoft Office,
Adobe Reader, and several other apps
to your iPad through the use of cloud
computing.
• CloudOn also lets you use your cloud
storage accounts to handle your files.
• It installs easily.
• full power of applications like Microsoft
We used CloudOn for a while in
TestingTesting (you need to set up an
account, obviously).
We did experience some issues
with CloudOn crashing on
occasion, without any common
cause, but hopefully this will beOffice,
• the convenience of cloud storage and
more—all in your very own workspace
in the cloud.
• While you need to have decent
connectivity to take advantage of the
workspace remotely from your iPad,
this is a viable solution when you'reviable solution when you're
traveling or away from your maintraveling or away from your main
computerscomputers and need to access or
modify files quickly.
cause, but hopefully this will be
addressed quickly.
The ability to quickly access our
Dropbox account and edit a Word
document on the iPad was
fantastic, and the ability to then e-
mail that modified file to others
makes this an ideal tool for quick,
on-demand work when all you have
available is your iPad.

Business App: Box
• Box safely stores your files,
pics, and documents in the
CloudCloud.
• Price: Free
• Available on: Android,
BlackBerry, iOS, Mac,
Windows, and Windows PhoneWindows Phone
•• Very popular app, No list ofVery popular app, No list of mustmust--•• Very popular app, No list ofVery popular app, No list of mustmust--
have work appshave work apps is completeis complete
without Box !!without Box !!
•• Box letsBox lets you store files in theyou store files in the
cloud,cloud, share documents withshare documents with
coworkers, evencoworkers, even edit files withedit files with
other apps installedother apps installed on youron your
device.device.
•• Box is also way ahead of theBox is also way ahead of the
competition when it comes tocompetition when it comes to
securing work files, too.securing work files, too.

Box
• With 10GB free, Box makes
it easy to access and edit
your files, share content and
stay connected with your
team from anywhere on any
device.
• Share important files with
your coworkers
Box allows you to do all these things
and more!
More than 150,000 companies—
including 92% of the FORTUNE
500—rely on Box for simple, secure
content sharing.
Box for Android lets you:
* AccessAccess, view, edit, share andyour coworkers
* Have your presentation at
your fingertips
* Comment on documents on
the go
* View updates to your
spreadsheet instantly
* AccessAccess, view, edit, share and
manage files directly on your Android
phone or tablet
* SecureSecure your content with file-level
encryption, passcode and auto logout
when the app is closed
* Upload multiple imagesUpload multiple images, videos
and files from your SD card
* Save files to your SDSave files to your SD card for
offline access

Box Apps: Family of AppsBox Apps: Family of Apps

Mobile Apps: Roambi Analytics
 Mobile Business Intelligence
software for iPad and iPhone.
Connect with your business data
for secure mobile access
 If you've heard of "big data" and maybe
you've heard of "analytics."
 That's whereThat's where RoambiRoambi AnalyticsAnalytics
comes in.comes in.comes in.comes in.
 It lets you takeIt lets you take hardhard--toto--readread
datadata from anywhere andfrom anywhere and
transforms it into charts ortransforms it into charts or
graphsgraphs making that data moremaking that data more
meaningful, all on yourmeaningful, all on your iPhoneiPhone..
 Uses various Data AnalyticsUses various Data Analytics
approaches to covert data intoapproaches to covert data into
InsightInsight 25

Roambi Analytics
• This Business App makes use of various technologies like Cloud
Computing and Data Mining.
•• RoambiRoambi is Business Intelligence & Business Analytics App, which uses
recent data mining techniques for Analyzing the data, finding the hidden
trends and doing Predictive Analytics.
 The applications connect to popular information systems including Excel
or Salesforce.com and business intelligence systems such as Cognos
and corporate databases such as Microsoft SQL.[2]
• The app is currently used by over 20% of the Fortune 50 and has been
downloaded more than 600,000 times.
• Roambi’s platform allows users to upload their data (from Excel
spreadsheets, Salesforce.com, or other data) to the online Roambi
Publisher.[1]
• Users then select from pre-designed templates to deliver the data in
different forms (pie chart, graphs etc.)

 Still think that mobile apps are for games, music and
“entertainment purposes” only?
 Do you really think that mobile applications won’t be
relevant to a industry, a company, software teamrelevant to a industry, a company, software team and youryour
career as Software Engineercareer as Software Engineer,, a year from now?career as Software Engineercareer as Software Engineer,, a year from now?
 Think again.
27

Business AppsBusiness Apps
•• Google NowGoogle Now is one of the most innovative apps on any platform.
–– Rather than waiting for you to look for information, it monitorsRather than waiting for you to look for information, it monitors
your activity to try to predict what you need and when.your activity to try to predict what you need and when.
–– It then presents that information with a clean and conciseIt then presents that information with a clean and concise
interface.interface.

EvernoteEvernote..
Access anywhere.
Remember everything.
One of the most popular apps on the market, Evernote has evolved way
past just classic note-taking.
Evernote's extended family includes Penultimate, a hand-writing app for
taking notes on tablet; Web Clipper, which allows you to clip web pages
coupon-style; Peek, a notecard-like study aid; and Skitch, an image mark-
up tool.
Platforms: Android, iOS.
Cost: Free, $5 per month for premium features.

Mobile Apps development
• The high quality requirements of mobile business apps
require them to be thoroughly engineered.
• Unfortunately, today’s software engineering approaches are
often too heavy-weight to allow developing high-quality
mobile business apps in the context of mobile projects,
which often face
– small budgets,– small budgets,
– extremely limited effort, and
– short time-to-market requirements.
35

Process Models for Mobile Software
 Waterfall ModelWaterfall Model
 Spiral ModelSpiral Model
 Fountain ModelFountain Model
 Agile ProcessAgile Process
ModelModel
– Scrum approach &
other agile
techniques, e.g.,
testdriven Fountain ModelFountain Model testdriven
development,
 Mobile SoftwareMobile Software
ModelModel
 MM--BusinessBusiness
Procedure ModelProcedure Model
(2005)(2005)
 mConcApptmConcAppt (2011)(2011)
36

• The effectiveeffective and lightweightlightweight Mobile Software Engineering
approach uses
–– Requirement elicitationRequirement elicitation
–– Interaction designInteraction design
• Specify Interaction Design
• Communicate Interaction Design
–– Development of AppsDevelopment of Apps
–– Testing the AppTesting the App
• Software testing
• User Testing: Alpha & Beta testing
• App specific Testing

Requirement Elicitation in Apps
 Requirement ElicitationRequirement Elicitation
Functional requirementsFunctional requirements
NonNon--functional requirementsfunctional requirements
Domain requirementsDomain requirements
• Mobile Software Enginering Approach mConcApptmConcAppt combines
RE and UI and interaction designRE and UI and interaction design activities for mobile business
apps and produces a so called interaction concept as basis for
implementation and further activities.
• Method is user centred to provide high
usability and user experience

Functional and nonFunctional and non--functional requirementsfunctional requirements
 Functional requirementsFunctional requirements
 Statements of services the system should provide,
how the system should react to particular inputs and
how the system should behave in particular
situations.
 May state what the system should not do.
 NonNon--functional requirementsfunctional requirements NonNon--functional requirementsfunctional requirements
 Constraints on the services or functions offered by theConstraints on the services or functions offered by the
system such as timing constraints, constraints on thesystem such as timing constraints, constraints on the
development process, standards, etc.development process, standards, etc.
 Often apply to the system as a whole rather thanOften apply to the system as a whole rather than
individual features or services.individual features or services.
 Domain requirementsDomain requirements
 Constraints on the system from the domain ofConstraints on the system from the domain of
operationoperation
39
Chapter 4
Requirements

Functional requirements of AppFunctional requirements of App
DescribeDescribe functionalityfunctionality or servicesor services
proposed by App.proposed by App.
Depend on the type ofDepend on the type of AppApp, expected, expected
users and the type of system where theusers and the type of system where the
App is used.App is used.App is used.App is used.
Functional user requirements may beFunctional user requirements may be
highhigh--level statements of what thelevel statements of what the AppApp
should do.should do.
Functional system requirements shouldFunctional system requirements should
describe the services of andescribe the services of an AppApp in detail.in detail.
40
Chapter 4
Requirements

Non-functional requirements
 These define system properties and constraints
e.g. reliability, response time and storage
requirements.
Constraints are I/O device capability etc.
 Process requirements may also be specified mandating a
particular IDE, programming language or development method.particular IDE, programming language or development method.
 Non-functional requirements may be more critical than functional
requirements.
 If these are not met, the App may be
useless.
41
Chapter 4
Requirements

Elicit Requirements for Business App
• Aim of the activities of this phase is primarily
to prepare and conduct a requirements
elicitation workshop and to document the
elicited results.

• Validate Interaction Design:
validated by actual end
users.
• The app conception as whole is
iterative process.
• Elicit Requirements (gather of
requirements relevant for
interaction design).
•• Specify Interaction DesignSpecify Interaction Design:
comprise of actual development
of interaction concept in tight
collaboration with responsiblecollaboration with responsible
persons for other software
engineering disciplines.
•• Communicate InteractionCommunicate Interaction
Design:Design: to support collaboration,
show how evolution of steps of
interaction concept should be
communicated to roles involved in
app development.

Specify Interaction Design
Regarding the specification of
the interaction design
 it is mandatory that the
interaction designer himself is
a user of the addressed device
class and operating system.
To provide high-quality
results, it is not sufficient to
know operating systemknow operating system
programming guidelines.
When starting to design the
mobile business app,
it is a key influencing factor toinfluencing factor to
decide which functionality has todecide which functionality has to
be realized in the backendbe realized in the backend
systemsystem and which functionality
has to be on the mobile device.
Early communication of ideas
and sketches increases the
quality of the results.

Front End & Back End in AppsFront End & Back End in Apps
•• Regarding mobile business apps, theRegarding mobile business apps, the frontend,frontend,
which is usually represented by an appwhich is usually represented by an app, strongly, strongly
depends on the performance of the backenddepends on the performance of the backend
system.system.
•• This dependency may have aThis dependency may have a major impact on themajor impact on the
interaction design and creativeinteraction design and creative solutions might besolutions might beinteraction design and creativeinteraction design and creative solutions might besolutions might be
necessary.necessary.
•• Project management should be aware of theseProject management should be aware of these
special circumstances and solve conflictsspecial circumstances and solve conflicts
regarding the overall goals of the project as wellregarding the overall goals of the project as well
as provide prioritization between systemas provide prioritization between system
capabilitiescapabilities and financial budget.and financial budget.
•• App Testing needs to be accordingly conducted...App Testing needs to be accordingly conducted...

Mobile Software TestingMobile Software TestingMobile Software TestingMobile Software Testing

User testing
• User or customer testing is a stage in the testing process in
which users or customers provide input and advice on system
testing.
• User testing is essential, even when comprehensive system and
release testing have been carried out.
– The reason for this is that influences from
the user’s working environment have athe user’s working environment have a
major effect on the reliability, performance,
usability and robustness of a system.
These cannot be replicated in a testing
environment.
48Chapter 8 Software

Types of user testing
• Alpha testing
– Users of the software work with the
development team to test the software at
the developer’s site.
• Beta testing
– A release of the software is made available
to users to allow them to experiment and to
raise problems that they discover with the
system developers.
• Acceptance testing
– Customers test a system to decide whether
or not it is ready to be accepted from the 49Chapter 8 Software

User testing
• User or customer testing is a stage in the testing process inthe testing process in
which users or customers provide input and advicewhich users or customers provide input and advice on
system testing.
• User testing is essential, even when comprehensive system and
release testing have been carried out.
– The reason for this is that influences from
the user’s working environment have athe user’s working environment have a
major effect on the reliability,
performance, usability and robustness of a
system. These cannot be replicated in a
testing environment.

Types of user testingTypes of user testing
• Alpha testing
–– Users of the software work with the developmentUsers of the software work with the development
team to test the software at the developer’s site.team to test the software at the developer’s site.
• Beta testing
–– A release of the software is made available toA release of the software is made available to
users to allow them to experiment and to raiseusers to allow them to experiment and to raiseusers to allow them to experiment and to raiseusers to allow them to experiment and to raise
problems that they discover with the systemproblems that they discover with the system
developers.developers.
• Acceptance testing
–– Customers test a system to decide whether or notCustomers test a system to decide whether or not
it is ready to be accepted from the systemit is ready to be accepted from the system
developers and deployed in the customerdevelopers and deployed in the customer
environment. Primarily for custom systems.environment. Primarily for custom systems.

App TestingApp Testing

Functional TestingFunctional Testing

Developing Web AppsDeveloping Web Apps
Using Mobile Web

What is Mobile Web App
• A mobile web app is a mobile application that combines the
versatility of the web with the functionality of touch-enabled
devices.
• A Web app is typically coded in a browser-rendered language
such as HTML combined with JavaScript.
• HTML5 will be the new standard for HTML.
• The previous version of HTML, HTML 4.01, came in 1999. The• The previous version of HTML, HTML 4.01, came in 1999. The
web has changed a lot since then.
• HTML5 is still a work in progress. However, the major browsers
support many of the new HTML5 elements and APIs.

HTML 5
• Some rules for HTML5 were established:
–– New features should be based onNew features should be based on HTML,HTML,
CSS, DOM, and JavaScriptCSS, DOM, and JavaScript
–– Reduce the need for externalReduce the need for external pluginsplugins (like(like
Flash)Flash)Flash)Flash)
–– Better error handlingBetter error handling
–– More markup to replace scriptingMore markup to replace scripting
–– HTML5 should be device independentHTML5 should be device independent
–– The development process should be visibleThe development process should be visible
to the publicto the public

HTML5 - New Features
• Some of the most interesting new features in HTML5:
–– TheThe <canvas><canvas> element for 2D drawingelement for 2D drawing
–– TheThe <video><video> andand <audio><audio> elements for media playbackelements for media playback
–– Support for local storageSupport for local storage
–– New contentNew content--specific elements, likespecific elements, like <article>, <footer>,<article>, <footer>,
<header>, <<header>, <navnav>, <section>>, <section>
–– New form controls, like calendar, date, time, email,New form controls, like calendar, date, time, email, urlurl,,
searchsearch
• Browser Support for HTML5
– HTML5 is not yet an official standard, and no browsers have
full HTML5 support.
– But all major browsers (Safari, Chrome, Firefox, Opera,
Internet Explorer) continue to add new HTML5 features to
their latest versions.

CSS media features
• CSS with its various media features makes it convenient to
develop Mobile Web Apps.
– One of the most important features of style
sheets is that they specify how a documentspecify how a document
is to be presented on different mediais to be presented on different media:
– on the screen, on paper, with a speech– on the screen, on paper, with a speech
synthesizer, with a braille device, etc.

CSS Media typesCSS Media types
• The names chosen for CSS media types reflect target devices
for which the relevant properties make sense
• all Suitable for all devices.
• braille Intended for braille tactile feedback devices.
• embossed Intended for paged braille printers.
• handheld Intended for handheld devices (typically small screen,• handheld Intended for handheld devices (typically small screen,
limited bandwidth).
• projection Intended for projected presentations, for example
projectors.
• tv Intended for television-type devices (low resolution, color,
limited-scrollability screens, sound available)

Web Apps & Mobile Web FrameworkWeb Apps & Mobile Web Framework
• These days, Web-based Apps for mobile browsers have some
street cred—especially now that hip cat HTML5 and his sidekicks,
CSS3 and JavaScript, are in the house.
• Let’s see more mobile web app world closely by taking a mobile
framework—code tools designed to help you get your job done
quickly.
• As It’s an in-progress standard, We know that HTML5 clarifies and
improves upon the two-decade-old markup language, adding,improves upon the two-decade-old markup language, adding,
especially, support for web apps without putting much backward
compatibility at risk.
• HTML5 introduces new semantic elements like <section>,<section>,
<article>, <nav>, and <header>.<article>, <nav>, and <header>.
• It simplifies the syntax for some tags, gives us the power of media
with <audio> and <video> tags, and unleashes interactivity
through new JavaScript APIs like geolocationJavaScript APIs like geolocation and offline
storage.

Why use Mobile Web App frameworks?
• Let’s face it. Building complex, interactive web apps fromBuilding complex, interactive web apps from
scratchscratch—especially mobile web apps—can be a daunting
proposition.
• A web development framework—that is, a packaged collection of
interactive elements and code tools—can help give us a leg up.
• A framework can help us manage cross-platform inconsistencies
• A framework can help us make a website or app look mobile-
friendly.friendly.
– Mobile-oriented frameworks generally help alter
and style HTML elements to look and feel more
mobile, often saving us quite a lot of time.
• A framework can help us make a website or app feel mobile.
– Frameworks can take the drudgery out of
transitions and effects that make a website or app
feel more native, or, at least, consistent..

Choose and use Web frameworks with
care
• Frameworks are powerful mojo, but they also have some
drawbacks.
• Many are quite hefty, and can bloat your site’s payload by
hundreds of kilobytes.
• Some employ a kitchen-sink approach, including tons of widgets
and cutesy animations that not only are large in byte units, butand cutesy animations that not only are large in byte units, but
can cause serious performance woes on lesser devices.
• Finally, make sure you evaluate a framework’s device support.
• Some only support one or a few major, cutting-edge platforms.
–– jQueryjQuery Mobile Framework !!Mobile Framework !!

Mobile Web: jQuery Mobile
• jQuery Mobile is a touch-optimized web frameworkweb framework
(additionally known as a JavaScript library or a mobile
framework) currently being developed by the jQuery project
team.
• The development focuses on creating a framework compatible
with a wide variety of smartphones and tablet computers, made
necessary by the growing but heterogeneous tablet and
smartphone market.smartphone market.
• The jQuery Mobile framework is compatible with other mobile
app frameworks and platforms such as PhoneGap, Worklight[4]
and more.

jQueryjQuery MobileMobile
• Data Attributes used can be as follows:
– data-role – Specifies the role of the element, like
header, content, footer etc.
– data-position – specifies whether the element
should be fixed, in which case it will render at the
top (for header) or bottom (for footer)top (for header) or bottom (for footer)
– data-transition – specifies which transition to use
when loading new pages, can be set to: slide,
slideup, slidedown, pop, flip or fade
– data-theme – specifies which design theme to use
for elements within container, can be set to: a, b, c,
d, e

• Q: Are there other mobile frameworks out there?
• A: There are many coming every day. Some other mobile web frameworks
include Sencha Touch, Wink, iUI, DHTMLX Touch, and JQTouch..
• Q: What exactly makes up a mobile web framework?
• A: It depends on the framework, but most involve a combination of
JavaScript, CSS, and image (or other) assets to aid in the styling of the
mobile experience. Some frameworks also include a server-side component
to help generate (as opposed to adapt) content..
• Q: So, jQuery Mobile is a mobile version of the original jQuery library??
Mobile Web Framework
• Q: So, jQuery Mobile is a mobile version of the original jQuery library??
• A: jQuery Mobile builds on top of jQuery. It does not replace it. You’ll notice
that when we start building stuff with jQuery Mobile, the first JavaScript file
we include is the core jQuery library.
• Q: So, jQuery Mobile is a JavaScript development framework that
extends jQuery.
• A: Yes, there is JavaScript in the jQuery Mobile framework. But jQuery
Mobile is not a JavaScript framework. It’s bigger than that. It’s a user
interface framework. That means it also includes stylesheets, icons, and
other pieces of the puzzle.

• Q: Do we really need to use a framework??
• A: No, not at all! In fact, we encourage you to build applike mobile websites from
scratch. However, the nice thing about frameworks, and jQuery Mobile in particular,
is that they take care of a lot of obnoxious, platform-specific quirks and bugs for us.
Their team of devs has laserlike focus on the foibles of different mobile browsers.
• We have limited time and space here, folks. Trying to pull off what we need to do for
the Web App without a framework of any sort would be pretty hairy, not to mention
the chaos of extra testing that would be required (as we wouldn’t have that
underpinning of tested cross-platform support).
Mobile Web Framework
• Q: What exactly is Mobile Web App an Mobile app or Mobile Website?
• A: The subtleties of differentiation between app and site are so vague that the
answer sometimes seems almost arbitrary. Mobile App using mobile Website?
• Q: So, But what if it were a site? I couldn’t use jQuery Mobile then, right?
• A: jQuery Mobile is a user interface framework. It doesn’t care whether you call
what you’re making with it an app or a site. Its job is to make things feel usable
and not break across various mobile platforms, using a combination of CSS,
JavaScript, and HTML5..

Mse sept13 (3/3)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (15)

Similar a Mse sept13 (3/3)

Similar a Mse sept13 (3/3) (20)

Último

Último (20)

Mse sept13 (3/3)