mse sept13 (3/3)

Mobile Software Mobile Software EngineeringEngineering

By

Prof. Dr. Prof. Dr. O.P.VyasO.P.VyasDAAD Fellow (Germany), AOTS Fellow (Japan)DAAD Fellow (Germany), AOTS Fellow (Japan)

Indian Institute of Information Technology Indian 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 Applications Mobile 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 Design Mobile SE trends : Usability Lifecycle & UX Design

Mobile Interaction Design: Mobile Mobile 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 Engineering Concepts of Mobile Software & need for Engineering approachapproach

Significant issues: Mobile UX design, Information Significant 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 the machine firmware, and

typically needs to be adapted for different devices.

Ex. Address book, Address book, calendar and calendar 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 and Social 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/20135Best 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 DesignUX 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 AppsAnatomy 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 are Large 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.



http://en.wikipedia.org/wiki/SQLite

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 as such as Google, Amazon Web Services, Microsoft, and Google, 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 to The 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 more More data may lead to more accurate accurate analyses.

– More accurate analyses may lead to more analyses may lead to more – More accurate analyses may lead to more analyses may lead to more confident decision confident 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 Business AppsMobile 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 world B2B 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 Testing Testing (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 be Office,

• 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're viable solution when you're traveling or away from your main traveling or away from your main computers computers 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 of Very popular app, No list of mustmust--•• Very popular app, No list of Very popular app, No list of mustmust--have work apps have work apps is complete is complete without Box !!without Box !!

•• Box lets Box lets you store files in the you store files in the cloud,cloud, share documents with share documents with coworkers, even coworkers, even edit files with edit files with other apps installedother apps installed on your on your device. device.

•• Box is also way ahead of the Box is also way ahead of the competition when it comes to competition 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 and your 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 SD Save files to your SD card for offline access



Box Apps: Family of AppsBox Apps: Family of AppsMobile Software Engineering


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 where That's where RoambiRoambi Analytics Analytics comes in. comes in. comes in. comes in.

It lets you take It lets you take hardhard--toto--read read data data from anywhere and from anywhere and transforms it into charts or transforms it into charts or graphs graphs making that data more making that data more meaningful, all on your meaningful, all on your iPhoneiPhone..

Uses various Data Analytics Uses various Data Analytics approaches to covert data into approaches 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 Cognosand 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 RoambiPublisher.[1]

• Users then select from pre-designed templates to deliver the data in different forms (pie chart, graphs etc.)



http://en.wikipedia.org/wiki/Roambi

http://en.wikipedia.org/wiki/Roambi

Mobile Business Apps

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 team relevant to a industry, a company, software team and your your 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 Now Google Now is one of the most innovative apps on any platform.

–– Rather than waiting for you to look for information, it monitors Rather 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 concise It 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 Process Agile Process ModelModel

– Scrum approach & other agile techniques, e.g., testdriven Fountain ModelFountain Model testdrivendevelopment,

Mobile Software Mobile Software ModelModel

MM--Business Business Procedure Model Procedure Model (2005)(2005)

mConcApptmConcAppt (2011)(2011)36




• The effectiveeffective and lightweight lightweight 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 design RE 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 the Constraints on the services or functions offered by the system such as timing constraints, constraints on the system such as timing constraints, constraints on the development process, standards, etc.development process, standards, etc.

Often apply to the system as a whole rather than Often 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 of Constraints on the system from the domain of operationoperation

39Chapter 4

Requirements engineering



Functional requirements of AppFunctional requirements of App

Describe Describe functionalityfunctionality or services or services proposed by App.proposed by App.

Depend on the type of Depend on the type of AppApp, expected , expected users and the type of system where the users and the type of system where the App is used.App is used.App is used.App is used.

Functional user requirements may be Functional user requirements may be highhigh--level statements of what the level statements of what the AppAppshould do.should do.

Functional system requirements should Functional system requirements should describe the services of an describe the services of an AppApp in detail.in detail.

40Chapter 4




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.

41Chapter 4




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 responsible collaboration with responsible persons for other software engineering disciplines.

•• Communicate Interaction Communicate 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 system know operating system programming guidelines.

When starting to design the mobile business app,it is a key influencing factor to influencing factor to decide which functionality has to decide which functionality has to be realized in the backend be 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, the Regarding 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 backend depends on the performance of the backend system. system.

•• This dependency may have a This dependency may have a major impact on the major impact on the interaction design and creative interaction design and creative solutions might be solutions might be interaction design and creative interaction design and creative solutions might be solutions might be necessary. necessary.

•• Project management should be aware of these Project management should be aware of these special circumstances and solve conflicts special circumstances and solve conflicts regarding the overall goals of the project as well regarding the overall goals of the project as well as provide prioritization between system as provide prioritization between system capabilities capabilities 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 a the 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 testing



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 system developers and deployed in the




User testing

• User or customer testing is a stage in the testing process in the testing process in which users or customers provide input and advice 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 a the 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 development Users 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 to A release of the software is made available to users to allow them to experiment and to raise users to allow them to experiment and to raise users to allow them to experiment and to raise users to allow them to experiment and to raise problems that they discover with the system problems that they discover with the system developers.developers.

• Acceptance testing

–– Customers test a system to decide whether or not Customers test a system to decide whether or not it is ready to be accepted from the system it is ready to be accepted from the system developers and deployed in the customer developers and deployed in the customer environment. Primarily for custom systems.environment. Primarily for custom systems.




App TestingApp TestingMobile Software Engineering


Functional TestingFunctional TestingMobile Software Engineering


Developing Web Apps Developing 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 on New features should be based on HTML, HTML, CSS, DOM, and JavaScriptCSS, DOM, and JavaScript

–– Reduce the need for external Reduce 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 visible The development process should be visible to the publicto the public



HTML5 - New Features

• Some of the most interesting new features in HTML5:

–– The The <canvas><canvas> element for 2D drawingelement for 2D drawing

–– The The <video> <video> and and <audio> <audio> elements for media playbackelements for media playback

–– Support for local storageSupport for local storage

–– New contentNew content--specific elements, like specific 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 document specify 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 geolocation JavaScript APIs like geolocation and offline storage.



Why use Mobile Web App frameworks?• Let’s face it. Building complex, interactive web apps from Building 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, but and 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 framework web 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.



http://en.wikipedia.org/wiki/JQuery_Mobile

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..

