Content uploaded by Pavel Smutný
Author content
All content in this area was uploaded by Pavel Smutný on Jul 13, 2018
Content may be subject to copyright.
Mobile development tools and cross-platform
solutions
Pavel Smutný
The Department of Control Systems and Instrumentation
VŠB – Technical university of Ostrava
Ostrava, Czech Republic
pavel.smutny@vsb.cz
Abstract—The usage of tablet and mobile devices has growing
potencial. The fragmented mobile landscape presents
considerable challenges around application development. The
key element for publishing software applications in Apple’s iOS
or Google’s Android operating system is to build them with
software development kit. HTML5 web apps are emerging as an
alternative. This paper deals with available frameworks, cross-
platform solutions, mobile development tools, summary of
mechanical engineering apps and development of mobile
dictionary of the English-Czech automatic control terms.
Keywords-mobile web; mobile frameworks; HTML5
I. INTRODUCTION
With exponential growth in the mobile device market over
the last several years, users are increasingly using smartphones
and tablets instead of desktop computers to access products and
services.
According to International Data Corporation (IDC) [1],
tablet shipments in Europe, the Middle East and Africa reached
more than 20 million units by the end of the year 2011. Usage
of tablet is mostly for entertainment purpose - business
purchases represent less than 10% of the entire tablet market.
Nevertheless the opportunity for growth and interest from
businesses is huge following the success of the Apple’s iPad.
Functionalities such as a responsive touch screen user-
interface, portability/design, and a plethora of business
application solutions that address specific vertical business
needs, are all factors that motivate the adoption and
demonstrate the value in businesses. Strong interest in adoption
of mobile devices is among IT services, professional services
industry and other sectors such as transport and storage,
utilities and distribution.
Tablets are already used across various sectors, including
healthcare [2], manufacturing, financial services, real estate
and retail. Hospitals are using tablets to facilitate information
sharing. From the emergency room to the boardroom, tablets
and other mobile devices are decreasing paper-based processes,
as well as improving communications, workflows and
efficiencies.
However, today's application offerings are often ported
from existing applications and do not translate smoothly to the
tablet because they were created without much consideration
for touch-enabled devices.
II. NATIVE APPS VS. CROSS-PLATFORM SOLUTIONS
Development for mobile devices often requires different
skill sets and familiarity with different runtime environments
than those more commonly used on desktop PCs.
Native applications for smartphones and tablets include
software written in Java for Android, Objective C for iPhone,
C++ for Symbian, and C++ for Windows Mobile. Programs
written for the device’s native runtime environment have rich
APIs and tend to be able to use all the facilities of the phone,
including sensors, media playback, file management, and
network access.
Distribution of the apps is often fragmented and
disorganized and many users are still unfamiliar with the
mechanisms available to download applications to their
devices. While some Smartphones and tablets such as the
iPhone/iPad, Android, Windows Phone platforms are
addressing this issue successfully, delivery to many other
devices is still problematic.
Developers of native applications must expect restrictions
and costs associated with developing and deploying to certain
platforms, such as needing an Apple developer license and
Apple’s approval to distribute applications to iTunes Apps
Store. Device fragmentation continues to be a problem for
developers with many different phone operating systems, and
programming APIs. Access to the device’s sensors such as
location and accelerometers can be restricted to certain
applications or programming languages.
An ideal goal would be the ability to write an application
once using a well-documented and supported language and set
of APIs and have this application instantly available to all
mobile devices irrespective of device or network. Emerging
web standards as HTML5 are one possible solution to the
problems outlined above, however makers of mobile
applications still need to find compromises and increased the
barriers to entry to this field. [3]
There is ongoing debate between developing native and
mobile web applications. Four different technical
configurations are available:
Native apps. These mobile applications are fast,
reliable, and powerful but are tied to a mobile platform.
That means developer must duplicate them using the
appropriate programming language in order to target
another mobile platform.
Hybrid apps. Development relies at frameworks and
these mobile apps offer a compromise because they
ensure cross-platform compatibility and can access the
mobile device’s hardware (camera, GPS or user’s
contacts).
Dedicated web app. A mobile web site which is
tailored to a specific platform or form factor.
Generic mobile app. A mobile web site designed to
match every web-enabled phone or tablet.
Context of the mobile application will drive decision for
choosing the best configuration. If mobile application is mainly
used to display and interact with online content or services, it is
better to avoid the native choice. However, if mobile
application is mainly used offline, a native app will offer a
better user experience.
III. MECHANICAL ENGINEERING APPS AT MOBILE DEVICES
The goal of The Department of Control Systems and
Instrumentation is to develop dictionary of the English-Czech
automatic control terms. To get a perspective about available
apps we collect, analyze, and summarize mechanical
engineering apps at mobile devices for students, teachers and
professionals.
From January 16 to 21, 2012, the Apple iTunes store and
Android Market was queried for mobile apps related to
mechanical engineering. This was performed using search
terms including mechanical engineering, engineering, CAD,
automation, robotics and using suggestion from stores (“Users
who installed this also installed” on Android Market or
“Customers Also Bought” on Apple iTunes store).
Methodology is based by Franko, O.I. & Bhola, S. [2], they
analyzed orthopedic applications for iPad. Each app summary
page was reviewed, and data were collected regarding the app’s
name, publication date, cost, average rating, and number of
ratings. After reviewing the summary and screenshots from
both app stores, a determination was also made regarding a
categorization for the app (educational, productivity, reference)
and the intended audience (students/teachers and
professionals).
Once data collection was complete, data were summarized,
tabulated, and presented using spreadsheet. A complete
analysis was performed comparing the relationship among app
characteristics, intended audience, and cost. Descriptive
statistics were used to report the data in the form of median and
standard deviation, and chi-squared analyses were performed
when comparing qualitative data between groups; P=.05 was
considered statistically significant.
A total of 49 mechanical engineering related applications
were identified using the search algorithm. Of them, 19 (39%)
had been updated in the prior 2 months and 29 (59%) had been
updated in the prior 6 months. On one side there were six apps
(12%) which had 0 reviews and same number of apps had more
than 500 reviews, 23 apps (47%) had >20 reviews from
consumers.
Both mobile apps stores - Apple iTunes store, Android
Market – use categories to sort apps. For example, top five
categories in Apple iTunes store are Games, Books,
Entertainment, Education and Lifestyle, which covers 56% of
all apps [13]. Mechanical engineering apps are mostly from
Productivity, Books & Reference and Education category. [Fig.
1]
Figure 1. Apps count by category from iTunes store and Android Market
From the 49 apps identified, 25 were primarily designed for
the general public or students (51%), 24 were designed for
mechanical engineering professionals (49%). The purpose of
applications for the general public and students were mostly
limited to educational information and reference information.
The average price for apps ranged from $0 to $179.99.
A single app that sold for the highest price was based on
a German dictionary, once excluded from the analysis, all apps
had a mean and median cost of $3.90 and $0.99, respectively.
The applications for the general public and students had a mean
and median cost of $5.10 and $1.99, on the other side apps for
mechanical engineering professionals had a much lower price –
mean cost of $1.80 and median cost were even free of charge.
IV. HTML5 MOBILE FRAMEWORKS
The context of the English-Czech automatic control terms
dictionary is mainly used to display and interact with online
content, therefore we decided to use HTML5 mobile
frameworks for development.
Developing web applications and mobile version of
websites for the mobile devices has its own sets of challenges
and techniques - user interface is optimized for fingers instead
of mouse cursors, fragmented platforms, there are usually the
bandwidth limitations. To help developers rapidly deploy
cross-platform mobile apps and websites, there is a wide range
of frameworks they can take advantage of. Common
characteristics of mobile web development frameworks
include:
Cross-platform: Support for multiple mobile device
platforms allows to deliver app to a wide range of users.
Lightweight: Due to current bandwidth limitations, a
stronger emphasis on lowering file weight is placed into
mobile web development frameworks.
Optimized for touchscreen devices: Fingers as input
devices instead of mouse cursors provide an extra set of
challenges in user interface design. Mobile web
development frameworks provide standard user interface
elements and event-handling specifically for mobile device
platforms.
Uses HTML5 and CSS3 standards: Most mainstream
mobile devices have web browsers that support HTML5
and CSS3, and so mobile web development frameworks
take advantage of new features available in these
upcoming W3C specifications for a better user experience.
List of available mobile frameworks includes:
Sencha Touch [4]
The open-source framework built specifically to leverage
HTML5, CSS3 and Javascript to its highest level of
power and flexibility, such as local-storage, video and
audio components supported. Besides, the framework also
offers data integration from variety of sources such as
AJAX, JSON and YQL.
jQTouch [5]
A jQuery plugin offers multiple of pre-installed themes,
with the features of offline mode viewing, geo-location
and screen transitions to create mobile web app for
iPhone, iPod Touch and Android devices.
jQuery Mobile [6]
Cross-platform & cross-device framework provides tools
to build dynamic touch interfaces that will adapt to a
range of device form factors. The system will include
both layouts (lists, detail panes, overlays) and a rich set of
form controls and user interface widgets (toggles, sliders,
tabs).
Wink [7]
Lightweight JavaScript toolkit offers the basic
functionalities from touch event handling to DOM
manipulation objects, mathematic libraries or CSS
transforms utilities.
M-Project [8]
The framework follows the model-view-controller (MVC)
software architecture pattern, has offline support
(automatic cache manifest generation) or DataProvider for
local and remote storage persistence.
Jo [9]
HTML5 lightweight Javascript framework creates
applications compatible with iOS, Android, BlackBerry,
supports HTML5 widgets.
Titanium [10]
A Javascript based interface to native code modules
included in the framework, it can store user preferences,
save data files, or implement the mobile version of a
cookie using SQL Lite and the iPhone or Android’s native
file system.
PhoneGap [11]
HTML5 application platform that allows to author native
applications with web technologies and get access to
native APIs and app stores. The resulting applications are
hybrid, meaning that they are neither truly native (all
layout rendering is done via the webview instead of
Objective-C or Corona apps) nor purely web based (many
of the functions would be supported by HTML5).
DHTMLX Touch [12]
HTML5/JavaScript framework contains a visual editor for
building mobile user interfaces, which help developers to
construct user interface with minimal coding.
Other frameworks work on similar principles: iUI, iWebkit,
WebAPP.net, Zepto.js, LungoJS, Joshfire.
After analyzing and summarizing various mobile
frameworks, The jQuery’s mobile framework was picked for
English-Czech automatic control terms dictionary.
V. HTML5 MOBILE APP - AUTOMATIC CONTROL TERMS
DICTIONARY
Web based dictionary of the English-Czech automatic
control terms proceeds from course book [14] and is intended
for bachelor and master students of automation and technical
cybernetics study program.
Dictionary is divided into three parts:
English-Czech dictionary of the fundamental
automatic control terms is devoted to basic and most
common terms from classic and current literature.
Commonly used abbreviations explain its origin and
describe Czech equivalent.
Dictionary of antonym terms provides help during
preparation of professional papers when use of antonym is
needed and it is not possible to find it in general
dictionary.
The first part of the dictionary was applied into web portal
e–Automatizace (http://www.e-automatizace.cz) which goal is
to create a starting point, a gateway to other resources on the
web from automation field for students and academic staff of
Faculty of Mechanical Engineering and other universities in
Czech Republic.
The English-Czech automatic control terms dictionary
includes also references into two other knowledge sources:
Ninjawords [15] is an English online dictionary and it
provides quick definition or list of definitions. It is based
on the Princeton WordNet project and also from
Wiktionary. Ninjawords allows user to look up multiple
words in the same search - separated by commas, and in
the URL. It comes also with a spell check and synonyms.
Wikipedia [16] is a multilingual, open content
encyclopaedia project.
Every term in dictionary at e-Automatizace portal contains
now:
Czech translation of term.
Service represented by icon to search quick English
definition of the term in Ninjawords website.
Service represented by icon to search encyclopedia article
in the English version of the Wikipedia website.
To create mobile web applications of the English-Czech
automatic control terms dictionary [17], a generic mobile app
build with touch mobile web development framework approach
was taken. The jQuery’s mobile framework [6] offers a unified
user interface system that works seamlessly across all popular
mobile device platforms and is focused on a lightweight
codebase built on progressive enhancement with a flexible,
easily themeable design. [Fig. 2]
This framework is set out to make easy for developers to
fast deploy mobile applications with a minimal learning curve.
The interface configuration is markup-driven, which means
that developer can create basic app interface using just HTML
language. It provides a series of custom events to detect mobile
and touch specific actions like tap, tap-and-hold, swipe, and
orientation change (i.e. rotating the device).
Initial steps to start deploy mobile applications with jQuery
Mobile includes:
Include the framework files in header of the webpage.
Use data attribute in HTML markup. The data-role
element specifies which block should be used for the
header, footer and content, all of which are inside the main
page wrapper.
ThemeRoller is a web-based tool that allows creating
custom themes without writing a single line of CSS.
Theme colors and textures are defined once in the
stylesheet and could be easily mixed, matched and
combined to achieve a wide range of visual effects.
Figure 2. The English-Czech automatic control terms dictionary running as
generic mobile app at wide variety of mobile devices
Mobile application of English-Czech automatic control
terms dictionary is available online [17] and was tested on
mobile phones with Android operation systems (version 2.1
and 2.3.4) and Apple tablet (iPad 2 with iOS 5.1 operation
system).
VI. CONCLUSION
The emergence of mobile devices over past years pushed
attention to more sophisticated mobile web apps. Ongoing
debate over future of mobile web include predictions, if native
applications going to be the dominant form of digital
interaction or new and developing browser technologies like
HTML5 make the mobile web preferable to apps.
Consuming content via a smartphone or a tablet, a native
app takes advantage of the deeper integrations of the device
like accelerometers, ingrained video capabilities, cameras and
location-based services. The mobile Web is used more often
for research and reference. Audience, content and context of
the mobile application are key indicators to decision for
choosing the best configuration.
A generic mobile app build with touch mobile web
development framework approach was taken to create mobile
web applications of the English-Czech automatic control terms
dictionary.
REFERENCES
[1] IDC press release, European Businesses Keen to Deploy Tablets and the
Adoption to Gain Momentum in 2012 - According to an IDC Enterprise
Tablet Study. [Online] 14 December 2011, Available
http://www.idc.com/getdoc.jsp?containerId=prUK23224711
[2] Franko, O.I. & Bhola, S. 2011, "iPad apps for orthopedic surgeons",
Orthopedics, vol. 34, no. 12, pp. 978-981.
[3] Melamed, T. & Clayton, B. 2010, "A Comparative Evaluation of
HTML5 as a Pervasive Media Platform", Mobile Computing,
Applications, and Services, Lecture Notes of the Institute for Computer
Sciences, Social Informatics and Telecommunications Engineering,
2010, Volume 35, Part 7, 307-325, DOI: 10.1007/978-3-642-12607-
9_20
[4] Sencha Touch. [Online] 16 January 2012, Available
http://www.sencha.com/products/touch/
[5] jQTouch. [Online] 16 January 2012, Available http://jqtouch.com/
[6] jQuery Mobile. [Online] 16 January 2012, Available
http://jquerymobile.com/
[7] Wink Toolkit. [Online] 16 January 2012, Available
http://www.winktoolkit.org/
[8] The M Project. [Online] 16 January 2012, Available http://the-m-
project.org/
[9] Jo. [Online] 16 January 2012, Available http://joapp.com/
[10] Titanium Mobile. [Online] 16 January 2012, Available
http://www.appcelerator.com/products/titanium-mobile-application-
development/
[11] PhoneGap. [Online] 16 January 2012, Available http://phonegap.com/
[12] DHTMLX Touch. [Online] 16 January 2012, Available
http://dhtmlx.com/touch/
[13] Application Category Distribution. [Online] 16 January 2012, Available
http://148apps.biz/app-store-metrics/?mpage=catcount
[14] Víteček, A. & Vítečková, M. 2006. Anglicko-český slovník základních
pojmů z oblasti automatického řízení. Ostrava: VŠB-TUO, 2006, 67 pp.
ISBN 80-248-1069-7.
[15] Ninjawords. [Online] 16 January 2012, Available http://ninjawords.com
[16] Wikipedia. [Online] 16 January 2012, Available
http://www.wikipedia.org
[17] The English-Czech automatic control terms dictionary. [Online] 16
January 2012, Available http://www.e-automatizace.cz/m/
