Introduction
Historical Notes
2007
2009
iPhone changed what people expected from a
mobile phone
iPad created the tablet market
Platform fragmentation
5000 different mobile devices
all have preinstalled browsers
devices may have alternate browsers
~18 browsers in use:
Full browsers: equivalent of desktop; many use
WebKit rendering engine; rendered on device.
eg Safari, Android, IE mobile
Mini mobile: low powered devices, poor bandwidth;
web page rendered on server, compressed and sent to
device; no client side interactions.
eg Opera Mini, Bolt (Blackberry), Ovi (Nokia)
Either deal with multiplicity or accept limited market.
1
Introduction
2
Distinctive Features
Small screen
A large number of target devices: many screen sizes;
resolutions; generations of machines; computing
power. Heterogeneous
Keyboard limited – touch interface
Low power - both computing and electrical
A number of distinct operating systems
OSX – Android - Linux
Intermittent connection to a network
Location aware – optional but a large market
Information available from built in sensors
Device is not operated from a static position
laptop is portable, but used on table or lap
screen rotates
1
Introduction
3
Components(i)
Operators
Companies who provide the SIM cards.
Some of them install cellular towers and operate
the network. Own the physical infrastructure.
Some of them own no physical infrastructure but
rent resources from the owners
Networks
We tend to differentiate between phone
connections wifi connections and blue tooth
connections all are carried by wireless signals.
The phone connections are of various sorts and
various GSM - GPRS …
1
Introduction
4
Components(ii)
Devices
Handsets – and pads/tablets - not all are
designed to make calls. Target audience is very
large, but fragmented.
Operating System
OsX (iPads iPhones)
Windows Phone
Android – form of Linux – may be heavily
customised by Operator
01
Introduction
5
Components(ii)
Application Framework
Developer accesses application framework also
called API to create application
Java: many platforms support java, but diversity
of screen size and processor power presents a
challenge.
Flash Lite: AdobeFlash Lite is an application
framework that uses the Flash Lite and
ActionScript frameworks to create vector-based
applications.
Windows Mobile Applications: downloaded and
installed over the air or loaded via a cableconnected computer.
Cocoa Touch: API used to create native
applications for the iPhone and iPod touch.
Applications must be submitted and certified by
Apple before being included in the App Store.
Once in the App Store, applications can be
purchased, downloaded, and installed over the
air or via a cable-connected computer.
6
1
Introduction
Components(ii)
Application Framework
Android SDK: create native applications for any
device that runs the Android platform.
Applications in C/C++ or use a Java virtual
machine. Java more common in the mobile
ecosystem.
Web Runtimes (WRTs): Nokia, Opera, and Yahoo!
provide various Web Runtimes, or WRTs.
Frameworks for web apps – niche market
WebKit: a browser technology, so applications
can be created simply by using web technologies
such as HTML, CSS, and JavaScript.
Applications can be run and tested in any WebKit
browser, desktop, or mobile device
Web: only application framework that works
across virtually all devices and all platforms. In
the past limited functionality led to stagnation.
Currently demand to offer products and services
outside of operator control, and shorter
development cycles seeing a growth.
1
Introduction
7
Course Contents
Nothing on design – that was EE2260
Technology:
Could look at one of the proprietary frameworks
Apple … windows … android …
Step learning curve; limited market
Choose to do web based applications
html5, css, javascript
Leverage existing knowledge : you will need to
understand it better.
Limitations - gap in speed and functionality w.r.t.
native applications narrowing.
We will introduce the use of phoneGap
1
Introduction
8
Course Contents
We will introduce the use of phoneGap. Way of
creating native apps direct from web technology.
Single development - deploy of many platforms
1
Introduction
9
Course Contents
Using html5/css/javascript means debugging can be
performed in a standard web browser.
jQuery – a javascript framework designed for
manipulating web pages
jQueryMobile – framework which extends jQuery
specifically for mobile apps.
Description of the framework structure – not a
language class – ideas for practice in the workshops
Considerations for performance optimisation
1
Introduction
10
Course Organisation
1 Lecture / week
1 workshop per week – apply skills and concepts
discovered in the lectures (will not run all the way to
the end of the term)
Assessment: A number of questions in the combined
exam with EE2700 and EE2701.
An assignment again in conjunction with EE2700 and
EE2701.
1
Introduction
11
Web apps v native apps
What is the difference?
Why as a developer would you choose one or the
other?
From the design course you should have some idea of
the pros and cons
01
Introduction
12
Web apps v native apps
<m.mit.edu> <www.amazon.co.uk>
<www.google.co.uk>
Normal web page
if you know web technology you can develop
mobile
how do the sites know you are on a mobile?
But some additions
pinch to zoom
rotate screen
access (some) of the capabilities. GPS
phoneGap includes some native code – allows
you to access some utilities not available through
straight html5/css/javascript (eg addressbook)
Native apps - icons on the screen.
for icons do you need native apps?
1
Introduction
13
Web apps v native apps
Technology
Create responsive web sites
web sites that will work on desktops or mobile
devices. They respond to the browser and context in
which they are running
But also responsive in that they respond helpfully to
the user and provide a good user experience where
the web site responds rapidly to user requests.
Need to understand how a web site is technically
structured and how the browser goes about rendering
the page.
1
Introduction
14
html5 & css3
An evolving set of technologies
Sites hang around – browsers change – each with a
different modification date – backwards compatibility
is essential in web technologies
Browsers support set of features … compatible with
some of the technology
Features are separated and given their own logos
Semantics
Styling
Multimedia
Browsers support some set of html5
15
Offline
1
Introduction
Content
Consider a book.
It is a string of characters. The characters are grouped
in words and the words are grouped in sentences
Chapter 1 Variation Under Domestication
Causes of Variability Effects of Habit Correlation of Growth Inheritance Character of
Domestic Varieties Difficulty of distinguishing between Varieties and Species Origin of
Domestic Varieties from one or more Species Domestic pigeons, their Differences and Origin
Principle of Selection anciently followed, its Effects Methodical and Unconscious Selection
Unknown Origin of our Domestic Productions Circumstances favourable to Man's power of
Selection
When we look to the individuals of the same variety or sub-variety of our older cultivated plants
and animals, one of the first points which strikes us, is, that they generally differ much more
from each other, than do the individuals of any one species or variety in a state of nature. When
we reflect on the vast diversity of the plants and animals which have been cultivated, and
which have varied during all ages under the most different climates and treatment, I think we
are driven to conclude that this greater variability is simply due to our domestic productions
having been raised under conditions of life not so uniform as, and somewhat different from,
those to which the parent-species have been exposed under nature. There is, also, I think,
some probability in the view propounded by Andrew Knight, that this variability may be partly
connected with excess of food. It seems pretty clear that organic beings must be exposed during
several generations to the new conditions of life to cause any appreciable amount of variation;
and that when the organisation has once begun to vary, it generally continues to vary for many
generations. No case is on record of a variable being ceasing to be variable under cultivation.
Our oldest cultivated plants, such as wheat, still often yield new varieties: our oldest
domesticated animals are still capable of rapid improvement or modification.
It has been disputed at what period of time the causes of variability, whatever they may be,
generally act; whether during the early or late period of development of the embryo, or at the
instant of conception. Geoffroy St Hilaire's experiments show that unnatural treatment of the
embryo causes monstrosities; and monstrosities cannot be separated
1 Introduction
When it is published a layout is created which reflects
the efforts of the type setter to make the structure of
the information clear.
Here is an example of making the book available as a
web page
1 Introduction
Here is an alternative – layout.
More or less successful?
1 Introduction
The layout will also reflect the publishers wish to
establish a distinctive look.
1 Introduction
The layout will also reflect the publishers wish to
establish a distinctive look.
Here the precis at the top of the chapter has been
removed.
Why?
Is this a good idea?
1 Introduction
Side by side comparison of two similar ideas, but
actually very different effects.
Which is better?
1 Introduction
Markup
So the author provided the text, but it is the publisher
who decided how the book as laid out.
The layout was communicated to the typesetter via the
“markup”
The typesetter could layout the pages in accordance
with the house style.
Going from hardback to paperback, in principle, there
is no need to change the content (obviously) nor the
markup.
The paragraph
symbol, which you
get in microsoft
word when you are
reviewing a
document
¶
is a
typesettter’s
markup symbol.
All that happens is the markup is interpreted in a
different way.
When we produce web pages they are more flexible,
easier to maintain and easier to prepare for different
purposes if we separate the way content and the
structure from the way we are going to display that
content.
1 Introduction
html*
For the web we create a file to hold the content and to
document the structure – but not the layout.
The html file
A typical html file looks like this
<!DOCTYPE html>
<html>
<head>
<title>Page information</title>
</head>
<body>
Page contents – including markup
describing the role of the text
<h2>Variation under domestication</h2>
</body>
</html>
The browser then makes a decision on how to display
<h2> - the second level heavy. Font size, style,
colour,…
1 Introduction
presentation
CSS3 – allows you to separate the layout
instructions from the content and structure,
Good practice everywhere
Vital for mobile development
(It will be something on which I judge the
quality of your assignment)
A number of different style sheets can be
written for use in different contexts.
Can also make style sheets for visual
impairments – colour blind – or even to create
Braille or for a screen reader.
1 Introduction
CSS
A CSS file is just a set of css instructions
h2 {font-size:16px; font-family:verdana;}
value
selector
property
Property:value pairs
1 Introduction
CSS
<!DOCTYPE html>
<html>
<head>
<title>Page information</title>
<style>
body {background-color:yellow;}
h1
{font-size:36pt;}
h2
{color:blue; font-size:20pt}
p
{margin-left:50px;}
</style>
</head>
<body>
Page contents – including markup
describing the role of the text
CSS in the html
file – what you
should never do
<h2>Variation under domestication</h2>
</body>
</html>
1 Introduction
99Notes
External CSS file
The markup tags describe the role of different bits of
text in the file. Tags come in pairs which delimit their
start and
<h1>This is a top level header </h1>
The tags do not define:
how the page is laid out
or the look of the text.
That is determined by the browser unless you describe
what you want with a style sheet.
The style sheet should be in separate file
<head>
<title>Page of course Information</title>
<link rel=“stylesheet” href=“snazzy.css”
type = “text/css” />
</head>
href gives the address of the file. This one snazzy.css
is in the same directory as the html file.
It may be in another directory, in which case you must
give the directory path.
It may even be on another machine when you give the
url of the file.
1 Introduction
Parsing the file
Imagine being asked to draw out a web page
given the html.
<html>
<head>
Need to produce a
more complex file
Page information
</head>
<body>
Page contents – including markup
describing the role of the text
<h2>Variation under domestication</h2>
</body>
</html>
In order to create the web page you would need
to go through the whole file.
A web browser needs to do the same thing.
Identifying elements – sub-elements and
content.
It builds a suitable representation in memory.
1 Introduction
Building a model
There are many ways of representing a web page
in memory.
Early web browsers did it in many ways.
Once there is a model in memory it is possible to
manipulate it in interesting ways.
It provides a structure for interactive web pages.
All browsers should model the web page in the
same way.
If in addition they provide an API
(Application Programmer Interface) it becomes
easy for a web creator to make an “exciting web
page” which works on all browsers.
This is the DOM
Document Object Model
Not unique – but standard
1 Introduction