Transcript Introducing HTML and XHTML

Introduction
CIS 136 Building Mobile Apps
1
What is a mobile app?
Computer program
Designed for small devices





Smartphones
Tablets
Other handhelds
Software distribution




2
“apps” available through distribution platforms
originally offered for general productivity and information
retrieval
public demand and the availability of developer tools drove
rapid expansion into other categories
History of the Smartphone
Great example of device convergence



A handheld computer integrated with a cellphone
IBM and BellSouth introduced first smartphone in 1994 called
the IBM Simon




2004 – PDS’s arrived with Palm Pilot, Blackberry, Pocket PC
2007 – Nokia released the N95
June29, 2007 – 1st version of the iPhone




3
Touch screen; 1MB ram, and a few apps
Disrupted the development world by stating no need for an app store
2008 Apple released iPhone 2 and an SDK and opened the app store
2008 – Google released Android OS for Google Nexus
2010 – Microsoft released Windows phone
Three main mobile OS’s today
March 2014
4
Popular mobile OS’s
5
Apps
Application Software
6
“Apps”
102 billion apps were
downloaded in 2013



91% of them free
generated
US$26 billion

7
up 44.4% on 2012's
US$18 billion
Considerations when building apps
Device determination
Constraints and features of the device





run on battery
have less powerful processors
have more features such as location detection and cameras
Building and testing issues



Budget
Emulators
Good User interface (UI) design is essential




8
User is the focus, and the app’s design is the interface to the device
limited attention span
Various form factors
Approaches to building apps
Web
Native
Hybrid



9
Web Apps vs. Native Apps vs Hybrid Apps

Web App







10
Website optimized for a smart phone
Not available on marketplace
Not installed
Easily designed/created using common tools
Runs in a browser
Can’t access hardware
Limited sophistication
Web Apps vs. Native Apps vs Hybrid Apps

Native App








11
Available on marketplace
Installed
Access to hardware
Written in higher level languages
Sell for $$
Pay to Publish
Slow development cycle
Different versions for different platforms
Web Apps vs. Native Apps vs Hybrid Apps

Hybrid App










12
Easily designed/created using common tools & languages
Available on marketplace
Installed
Access to hardware
Sell for $$
Pay to Publish
Quick development cycle
One version for different platforms
Uses bridging software to access native functions
Can be slow
Third Party Frameworks
Bridging Frameworks
13
Cross-platform Development for Hybrid Apps
Bridging software


Developers write their
mobile applications using
HTML, JavaScript and CSS.
These assets run in a
“WebView” inside a native
application container on
the target platform.

14
a web application packaged
within a native application
container where JavaScript
has access to device-level
APIs that normal web
applications would not
Phonegap






Originally created by Nitobi
 the name was changed to “Apache Cordova” when it was donated to the
Apache Software Foundation
 Adobe purchased Nitobi – including rights to the PhoneGap name – and
now distributes Cordova under that name
 Leverages HTML, JavaScript and CSS
Installs just like a native application, and is able to leverage app store
discoverability
Follows a plugin architecture
 access to native device APIs can be extended in a modular way.
Build in the cloud (Phonegap Build, Icenium, Kendo UI Mobile)
Integrates into known IDE’s as Brackets and Dreamweaver
Improvements in device hardware and WebView implementations have
improved performance
15
Titanium




Appcelerator’s Titanium provides a unified (across
devices) JavaScript API, coupled with native-platformspecific features
Developers write JavaScript and utilize a UI abstraction
(the Alloy MVC framework) that results in the use of
native UI components.
Native UI components is a performance win
Developer is required to manage target platform SDKs
locally
16
Sencha


Sencha Touch is an HTML5 mobile application framework for
building web applications that look and feel like native
applications
Apps built with Sencha Touch can be used with Apache
Cordova/PhoneGap or Sencha’s native packager


Variety of tools for cross platform app development such as
Sencha Architect, Sencha Animator



either will package the application in a native container and enable
access to select device-level APIs unavailable to traditional web apps
main product is Ext JS 5, which lets developers create HTML5 apps,
which can then be converted into native apps with PhoneGap
Suffers from the same performance pains
Requires custom plug-ins
17
User interface frameworks
18
UI Frameworks

Angular


Ionic



HTML5 mobile app development framework targeted at building hybrid
mobile apps
Uses Angular
Kendo UI Mobile ($$)

Build mobile app experiences using HTML and JavaScript that
automatically adapt to the native look-and-feel of different mobile
platforms
jQuery Mobile



Google - uses HTML as your template language and lets you extend
HTML's syntax to express your application's components clearly and
succinctly
An HTML5/CSS3-based user interface system designed to make
responsive web sites and apps
jQuery UI

19
a widget and interaction library
What we will be using in this class
20
There is a strong belief that HTML5 will rule
over time
21