Chapter Six

Mobile Application
Development

1
 Outline
• Mobile Application Architecture
• Intro to the Mobile Web
• W3C Standards, Device Recognition
• Mobile Web Design Tools
• Introduction to Mobile Python
• Introduction to Java and MIDP2.0
5.6
• Application Development and Deployment

2
 What is mobile Web?
• As of 2024, there are approximately
8.31 billion mobile users globally,
and 57 % of the world’s population
uses internet on their own device
• With the rise of mobile devices, it
has become increasingly important
to have websites and applications
optimized for mobile use
• Mobile web refers to browsing the
internet using a web browser on a
mobile device, such as a smartphone
or tablet.
3
 What is mobile Web?
• This can include accessing
websites, searching for
information, and using web-based
applications
• The main difference between mobile
web and mobile web apps is that
mobile web refers to accessing
websites through a web browser,
while mobile web apps are web-based
applications that provides an
interactive features similar to a
native app
4
 What is mobile Web?
Here are some examples:
Mobile web:
• Using a web browser such as Google
Chrome, Safari, or Firefox on your
smartphone to search for
information on Google
• Checking your email using the web-
based version of Gmail
• Visiting a news website, such as
CNN or BBC, to read the latest
headlines
• Using the Twitter mobile web app
to browse tweets and post updates
5
 What is mobile Web?
Here are some examples:
Mobile web apps:
• Using the Google Maps web app to get
directions and search for nearby
locations
• Accessing the Spotify web app to
stream music on your mobile device
• Both mobile web and mobile web apps
offer a way to access the internet and
web-based content on mobile devices.
However, mobile web apps provide a
more app-like experience, while mobile
web is more focused on browsing
websites 6
 Mobile Web vs. Web App vs.
Mobile App
Category Mobile Web App Mobile App
Web
Platform Accessible Accessed through a Installed on
via web web browser, but a mobile
browser on designed to work device and
a mobile like an app accessed
devices through an
app icon
Developmen Designed to Designed to work Developed
t be like an app, with specifically
responsive additional for the
to mobile features such as mobile
devices offline platform
functionality and
push notifications
User May require Offers an app-like Provides a 7
experience more experience, but it smooth and
Mobile Web vs. Web App vs. Mobile App
Category Mobile Web Web App Mobile App

Performanc Can be May be Provides

e slower due slower than fast and
to internet a native responsive
connectivit app, but can performance
y and still offer
reliance on good
web performance
browsers
Access Accessible Accessible You must
to anyone through a download
with a web browser and install
mobile and internet it on a
device and connectivity mobile
internet device 8
Mobile Web vs. Web App vs. Mobile App
Category Mobile Web App Mobile App
Web
Features Limited to Can offer It offers
what can be additional features
accomplishe features, including
d through a such as access to
web browser offline device
functionality hardware
and push (camera,
notifications microphone,
etc.)
Maintenance Easier to The Requires
maintain as maintenance regular
you can is simple, as updates and
change the you can maintenance
website easily change
9
a web app
 Mobile Web vs. Web App vs.
Mobile App
• Each type of application has its
strengths and weaknesses, and the
choice between mobile web, web
apps, and mobile apps will depend
on the application’s specific needs
and its users

10
 What is Mobile Web Design?
• It refers to designing and creating
websites optimized for viewing and
interacting with mobile devices like
smartphones and tablets.
• Mobile web design considers the smaller
screen size, touch-based interactions of
mobile devices, varying screen
resolutions, and internet connectivity
speeds
• Here are different elements considered
in mobile-first web design:
• Responsive design: A mobile website must be
designed using multiple responsive design
techniques to ensure that it can adapt to
different screen sizes and orientations 11
What is Mobile Web Design?
• Simplified navigation: Mobile users must
find what they want on a website. Mobile
web design should simplify navigation and
minimize the clicks required to access
the content
• Optimized content: Mobile web design
should optimize content for mobile
devices, including using smaller images
and simplified layouts to reduce load
times and improve user experience
• Touch-based interactions: Mobile devices
rely on touch-based interactions, so
mobile web design should consider how
users interact with the website using
touch gestures 12
 What is Mobile Web Design?
• Fast load times: Mobile web design
should optimize for fast load times,
including reducing the size of
images and using caching techniques
• With more and more people using
smartphones and tablets for quick
internet access, mobile web design
has become a highly important
aspect of web design

13
Responsive Frameworks for Building
Mobile Web and Mobile Web
Applications
Responsive frameworks are a collection of pre-
written code and stylesheets that make
creating responsive websites and applications
that work well on mobile devices easier.
Here are some popular responsive frameworks
for building mobile web and mobile web
applications:
1. Bootstrap: It offers a wide range of pre-
built components, such as navigation bars,
modals, forms, and typography, as well as a
grid system for creating responsive layouts.
It also comes with various CSS and JavaScript
plugins and utilities for adding interactivity
and functionality to your web pages.
14
Responsive Frameworks for Building
Mobile Web and Mobile Web
Applications
One of the benefits of using Bootstrap is
that it is designed to be mobile-first,
meaning that its components and layout are
optimized for use on mobile devices. This
makes it an excellent choice for building
mobile web and mobile web applications.
2. Materialize: It is an open-source CSS
and JavaScript framework for building
responsive and modern web applications. It
is based on Google’s Material Design
guidelines, which provide a set of design
principles and guidelines for creating user
interfaces that are visually appealing and
intuitive to use. 15
Responsive Frameworks for Building
Mobile Web and Mobile Web
Applications
Materialize is easy to get started with, and it
provides comprehensive documentation and a
variety of templates and examples to help you
get started quickly. It also has a large
community of developers who contribute to its
development and provide support to other users.
3. Ionic: Ionic is a popular framework for
building mobile web and hybrid mobile
applications. It provides a range of responsive
design components, including grids, typography,
and navigation, that can be used to build
mobile-friendly applications. It is built on top
of AngularJS, a popular JavaScript framework,
and provides a range of features, such as native
app integration and offline support.
16
Responsive Frameworks for Building
Mobile Web and Mobile Web
Applications
4. Semantic UI: Semantic UI is a front-
end framework that provides multiple
responsive design components. It
includes pre-built templates and themes
that can be customized to fit specific
design needs. It also offers a range of
customization options, such as theming
and modularization.
These frameworks can be highly
effective in helping you achieve the
desired performance of your
application.
17
 How to Optimize your Mobile Web Application for Performance?

• Optimizing the performance of a mobile web

application is crucial for providing a
good user experience and improving
engagement
• Here are some tips for optimizing your
mobile web application for performance:
1.Large images can slow down the performance
of your mobile web application. Ensure to
compress images to reduce their file size
without compromising quality. Use
compressed images with the appropriate
file format and dimensions to reduce the
size of your web pages and improve loading
speed. 18
 How to Optimize your Mobile Web Application for Performance?

2. Use lazy loading to delay the loading of

non-critical content, such as images and
videos, until the user scrolls to that part of
the page.
3. A CDN can fasten up the delivery of your
mobile web application’s content by caching it
in multiple locations worldwide. This can
reduce the time it takes for your application
to load, especially for users far from your
server.
4. Each mobile web application’s HTTP request
can slow down performance. Minimize the number
of HTTP requests by combining multiple
resources, such as CSS and JavaScript files,
into a single file 19
 How to Optimize your Mobile
Web Application for
Performance?
5.Caching can help to speed up your
mobile web application by storing
frequently accessed data on the user’s
device or in the browser cache. It can
reduce the number of requests to be made
to the server
6. Optimize your mobile web
application’s code and minimize the size
of your HTML, CSS, and JavaScript files
by removing unnecessary code and
optimizing loops and conditionals. Use
asynchronous loading for scripts to
avoid blocking the rendering of the page
20
 How to Optimize your Mobile
Web Application for
Performance?
7.The time it takes for your server to
respond to requests can impact your
mobile web application’s performance.
Optimize your server response time by
using a content delivery network,
optimizing your database queries, and
using a caching layer
8.Use responsive design to optimize
your web pages for different screen
sizes and devices.
9.Regularly test your mobile web
application’s performance using tools
21
 W3C Standards
• The W3C (World Wide Web Consortium) is an
international organization that creates
standards for the World Wide Web
• The W3C is committed to improving the web
by setting and promoting web-based
standards
• The W3C's goal is to create technical
standards and guidelines for web
technologies worldwide
• These standards are intended to keep a
consistent level of technical quality and
compatibility concerning the World Wide
Web
22
 History
• World Wide Web Consortium was founded by Tim
Berners-Lee in October 1994 at the
Massachusetts Institute of Technology, with the
support of DARPA(Défense Advanced Research
Projects Agency) and CERN
• The main vision of W3C was to standardize the
technologies as well as the protocols that are
used to build the web
• It also tried to encourage the organizations to
adopt the new standards defined by the World
Wide Web Consortium
• In the next few years, the W3C thus published
various recommendations such as the format of
PNG images, CSS(versions 1 and 2), etc

23
The History of W3C

24
 Purpose of the W3C
• W3C is designed to bring interested parties
together from different areas of IT to work
on developing web standards
• The W3C also focuses on
developing protocols and guidelines that
help ensure the growth and longevity of the
web
• Developing new standards is a consensus-
based process by different teams in the
W3C, as these standards are intended to
help ensure quality for web-based
developers and end users

25
 W3C standards
• W3C standards describe a range of recommended
programming languages to generally accepted
principles in web services and open
architectures.
• Web design and application standards are
following:
 Common Gateway Interface (CGI)
 CSS
 Document Object Model (DOM)
 Extensible HTML (XHTML)
 Extensible Markup Language (XML)
 Gleaning Resource Descriptions from Dialects
of Languages (GRDDL)
 HTML
 JavaScript Object Notation for Linked Data
26
(JSON-LD)
 W3C standards
Resource Description Framework (RDF)
Simple Object Access Protocol (SOAP)
SPARQL Protocol and RDF Query
Language (SPARQL)
Speech Recognition Grammar
Specification (SRGS)
Speech Synthesis Markup Language
(SSML)
Scalable Vector Graphics (SVG)
VoiceXML (VXML)
Web Real-Time Communications
(WebRTC) 27
 Advantages
• W3C enables the easier
maintenance of the W3C validated
websites
• It provides a consistent and
defined look for all the W3C
validated websites
• It standardizes the validated
websites so that they are
accessible to different devices
• It enables faster browser
interaction
28
 Disadvantages
• W3C validation is a timely
process and thus the time for
full validation depends on the
website code
• W3C validation exercises have
costs associated with them
• Sometimes translation issues
arise in W3C validation of
websites

29
 Introduction to Mobile Python

• Mobile Python refers to the use of the

Python programming language for developing
applications and tools that run on mobile
devices. While Python is traditionally used
for web, desktop, and server-side
development, several frameworks and tools
allow developers to create mobile
applications using Python. These tools
typically enable the creation of native or
cross-platform mobile apps.
• Key Tools for Mobile Python Development:
1.Kivy
a. A Python library for developing multi-
touch applications.
b. Open-source and cross-platform (supports
30
iOS, Android, Windows, macOS, and Linux)
 Introduction to Mobile Python

c. Good for creating games and custom

GUI applications.
d. Example: A mobile app with a dynamic,
touch-friendly interface.
2. BeeWare
e. A suite of tools for developing cross-
platform native applications.
f. Allows Python code to run as a native
app on iOS, Android, and desktop
platforms.
g. Includes the Toga library for
building native UI components.
h. Example: A productivity app that looks
and feels native on all platforms. 31
 Introduction to Mobile Python

3. Pyqtdeploy
a. Used for deploying PyQt applications
to mobile devices.
b. Converts Python apps into standalone
executables for platforms like
Android and iOS.
4. SL4A (Scripting Layer for Android)
c. Allows Python scripts to run on
Android devices.
d. Provides access to Android APIs like
SMS, Bluetooth, and GPS.
e. Example: Quick automation scripts for
an Android phone.
32
 Introduction to Mobile Python

5. Chaquopy
a. A plugin for Android Studio to
integrate Python code in Android
apps.
b. Allows combining Python with Java for
hybrid development.
6. PySide (Qt for Python)
c. Python bindings for the Qt framework.
d. Can be used to build GUI applications
for multiple platforms, including
mobile.

33
 Introduction to Mobile Python

• Advantages of Mobile Python:

• Ease of Learning: Python's
simplicity and readability make it
easy for new developers.
• Cross-Platform: Tools like Kivy and
BeeWare allow apps to run on
multiple platforms.
• Extensive Libraries: Access to
Python's rich ecosystem of
libraries.

34
 Introduction to Mobile Python

• Limitations:
• Performance: Python is slower compared to
natively compiled languages like Swift,
Kotlin, or Java.
• Ecosystem: Limited direct support for
mobile development compared to languages
like JavaScript (React Native), Dart
(Flutter), or Kotlin.
• App Store Acceptance: Some methods require
extra effort to meet app store guidelines.
• Mobile Python is an excellent choice for
quick prototypes, educational projects, or
scenarios where Python's ecosystem and
features outweigh its performance drawbacks.
35
36