2. Mobile
today
• A
lot
of
really
great
native
apps
• A
lot
of
fun
native
apps
3. Native
apps
Positive
Negative
• Perfect
for
games
• Expensive
to
create
• Perfect
for
performance
• You
are
not
in
control
• Perfect
for
phone
access
• iOS
is
not
Windows
– Accelerometer
– iOS
– Camera
– Android
– Contacts
– Windows
Phone
– Geolocation
– Of<line
– Nokia
– …
– BlackBerry
• Perfect
for
sales
– HP
webOS
4. Alternatives
• Ignore
mobile
– Not
really
an
option
today
• Mobile
web
apps
• Hybrid
solution
• Some
apps
doesn’t
have
to
be
native
5. Web
development
W3C
Standards
Browsers
XHTML
1.0
Firefox
Chrome
Windows
|
Mac
|
Linux
Windows
|
Mac
|
Linux
HTML
5
IE
Safari
CSS
Windows
Windows
|
Mac
Opera
JavaScript
Windows
|
Mac
|
Linux
+
frameworks
6. Mobile
web
development
W3C
Standards
OMA
Standards
W3C
Mobile
XHTML
1.0
XHTML
MP
XHTML
Basic
version:
1.0,
1.1
&
1.2
version:
1.0
&
1.1
HTML
5
WAP
CSS
CSS
MP
CSS
JavaScript
+
frameworks
7. Let’s
build
a
mobile
web
app
<!DOCTYPE
html>
<html>
<head>
<title>Mobile
Demo</title>
</head>
<body>
<h1>Welcome
to
our
app</h1>
<p>This
is
our
very
first
mobile
web
app</p>
</body>
</html>
8. <!DOCTYPE
html>
<html>
<head>
<title>Mobile
Demo</title>
<meta
name=”viewport”
content=”width=device-‐width”
/>
<meta
name=”viewport”
content=”initial-‐scale=1.0”
/>
<meta
name=”viewport”
content=”user-‐scalable=no”
/>
<meta
name=”viewport”
content=”target-‐densitydpi=device-‐dpi”
/>
<meta
name=”HandheldFriendly”
content=”true”
/>
<meta
name=”MobileOptimized”
content=”width”
/>
</head>
<body>
<h1>Welcome
to
our
app</h1>
<p>This
is
our
very
first
mobile
web
app</p>
</body>
</html>
11. Creating
content
• Use
correct
syntax
and
markup
all
your
content
• Make
sure
it
works
without
JavaScript
and
CSS
• Make
all
controls
bigger
• Design
for
different
screen
sizes
• Avoid
tables
with
multiple
columns
and
forms
as
long
as
possible
• Find
a
framework
to
help
you!
12. Styling
content
• Use
external
CSS
for
styling
content
• Try
to
use
CSS3
instead
of
images
• Try
to
use
CSS
sprites
if
possible
<link
type=”text/css”
rel=”stylesheet”
media=”handheld”
href=”iphone.css”
/>
• Doesn’t
work
for
iPhone
and
Android!
13. Media
queries
<link
type=”text/css”
rel=”stylesheet”
media=”screen
and
(max-‐device-‐width:
480px)”
href=”iphone.css”
/>
@import
url(iphone.css)
screen
and
(max-‐device-‐width:
480px);
@media
screen
and
(max-‐device-‐width:
480px)
{
body
{
background-‐color:
red;
}
}
14. Media
queries
<link
type=”text/css”
rel=”stylesheet”
media=”screen
and
(max-‐device-‐width:
480px)”
href=”iphone.css”
/>
@import
url(iphone.css)
screen
and
(max-‐device-‐width:
480px);
@media
screen
and
(max-‐device-‐width:
480px)
{
body
{
background-‐color:
red;
}
}
@media
screen
and
(orientation:
landscape)
...
@media
screen
and
(-‐webkit-‐min-‐device-‐pixel-‐ratio:
2)
...
16. jQuery
Mobile
• Version
1.0
alpha
4.1
• Easy
to
learn
• Uses
progressive
enhancement
• Great
device
support
• Builds
on
popular
jQuery
• Uses
CSS3
for
effects
• Small
19. ...
<body>
<div
data-‐role=”page”
id=”index”>
<div
data-‐role=”header”>
<h1>Mobile
Demo</h1>
</div>
<div
data-‐role=”content”>
<h2>Welcome
to
our
app</h2>
<p>This
is
our
very
first
mobile
web
app</p>
</div>
</div>
</body>
</html>
24. OfHline
• HTML5:
Of<line
Application
Cache
– Use
a
manifest
<ile
to
de<ine
the
cache
CACHE
MANIFEST
#
v
=
1.0.0
jquery.mobile-‐1.0a4.1.min.css
jquery-‐1.5.2.min.js
jquery.mobile-‐1.0a4.1.min.js
images/ajax-‐loader.png
images/icon-‐search-‐black.png
images/icons-‐18-‐black.png
images/icons-‐18-‐white.png
images/icons-‐36-‐black.png
images/icons-‐36-‐white.png
index.html
25. OfHline
• HTML5:
Of<line
Application
Cache
– Use
a
manifest
<ile
to
de<ine
the
cache
<!DOCTYPE
html>
<html
manifest=”my_cached_files.manifest">
<head>
<title>Mobile
Demo</title>
<link
rel=”stylesheet”
href=”jquery.mobile-‐1.0a4.1.min.css”
/>
<script
type=”text/javascript”
src=”jquery-‐1.5.2.min.js”></script>
<script
type=”text/javascript”
src=”jquery.mobile-‐1.0a4.1.min.js”></script>
...
26. PhoneGap
• Use
HTML5
and
CSS3
to
create
your
application
• Use
JavaScript
to
implement
business
logic
• Use
PhoneGap
JavaScript
lib
to
access
native
features
• Deploy
to
multiple
platforms
– iOS,
Android,
BlackBerry,
webOS,
Symbian
(supported)
– Windows
Phone,
MeeGo,
Bada
(planned)
• Use
build
server
to
automate
process
27. Final
thoughts
• HTML5
has
huge
potential
• It’s
still
dif<icult
– Browsers
are
still
not
your
friend
– Testing
is
much
more
dif<icult
– Usability
is
essential
• jQuery
Mobile
is
still
in
alpha
mode
28. Thank
you
for
listening
http://demo.kemeny.se/
javaforum2011/
30. Links
(continued)
• W3C
HTML5
• Programming
the
mobile
web
http://www.w3.org/TR/html5 http://oreilly.com/catalog/9780596807795
• W3C
Media
Queries
• Designing
with
progressive
http://www.w3.org/TR/css3-‐mediaqueries
enhancement
http://www.<ilamentgroup.com/dwpe/
• W3C
XHTML
Basic
http://www.w3.org/TR/2010/REC-‐xhtml-‐basic-‐20101123
• Mobile
Web
Best
Practices
• W3C
CSS
Mobile
Pro<ile
http://http://www.w3.org/TR/mobile-‐bp
http://www.w3.org/TR/2008/CR-‐css-‐mobile-‐20081210
• Mobile
Web
Application
Best
Practices
• Open
Mobile
Alliance
http://http://www.w3.org/TR/mwabp
http://www.openmobilealliance.org