HTML5 apps for iOS (and probably beyond)

HTML5 APPS FOR iOS
(and probably beyond)

by Andi Farr
aka @semiBad

andi@semibad.com
http://semibad.com

;(

WHY HTML5 APPS?
• ‘Install’ to device
• Cross-platform

• Perfect for small ideas
• Buildapps quickly and using simple and
familiar techniques
• Deploy instantly from any web space
• Potential for ‘dynamic’, personalised apps

UNFLappABLE

A very simple notecard
application to help me through my
ﬁrst time speaking!
Lives at unﬂappable.semibad.com
Optimised for use on an iPhone /
iPod Touch, but should work on
any device

UNFLappABLE

Login screen makes a simple AJAX
call and retrieves data from a
user’s online account
We store the JSON object locally,
and from this point we can access
the data whenever we like – even
without a network connection

UNFLappABLE

The app is a single HTML page,
divided into ‘views’ which the app
moves between
Plain Old Semantic HTML!
Most of what’s going on, happens
in the <head>
Uses jQuery, but only so I could
develop it quickly

DESIGNING IT
Design for touch – buttons
and interactive elements
are nice and big
Also, think about
how a user will hold
the device – the next
button is placed to be
easy for a user holding
in that orientation

DESIGNING IT
Uses a few image textures
for a smaller number of
requests, with CSS to style
the graphical elements

DESIGNING IT
iOS devices now support Futura
truetype @font-face Baskerville
embedding, but have
a surprisingly good Gill sans
selection of decent fonts Cochin
available by default American
Keep it lightweight – mobile / Typewriter
tablet devices are a lot less
powerful, even at the top end

STYLING IT UP
• CSS3 – more than just rounded
corners and drop shadows!
• Imageless gradients – saves
ﬁle size
• Multiplebackgrounds – adds
texture over bg gradient

background: url(/img/bg.png) top center,
-webkit-gradient(linear, left top, left bottom, from(#1feee7), to(#16a6a1));

STYLING IT UP

• Multiplebox-shadow
on ﬂat textured
elements – inset light
colours for highlights
• Use box-sizing to
change the box model
of an element – useful
for ﬂuid designs

STYLING IT UP
• Uses rgba() throughout for blended colours
and transform for ‘shufﬂing’ the menu
• :nth-child
cards a bit
#menu li:nth-child(3n+2) { -webkit-transform: rotate(0.7deg); }
#menu li:nth-child(3n+3) { -webkit-transform: rotate(-1deg); }

MEDIA QUERIES
Serve different stylesheets based on
different browser / device conﬁgurations

MEDIA QUERIES
• For this app, the main stylesheet
styles the app for iPhone / small
screen devices
• This depends on the project, but
using the simplest version is a good
fallback for older mobile devices
• It
also means that phones
download use the smallest
amount of bandwidth

MEDIA QUERIES
main.css contains a section
which restyles for landscape
orientation
/* landscape mode */

@media only screen and
(orientation:landscape) {

body { xxx: xxx }

}

MEDIA QUERIES
big.css is used for any
devices with a higher width
than 481px – desktop
browsers, iPads, etc.
<link href='/css/big.css' rel='stylesheet'
media='only screen and (min-device-
width: 481px)' />

HI RESOLUTION STYLES
Include using a min-device-pixels media query to
serve to high-DPI devices
<link href='/css/hi-res.css' rel='stylesheet'
media='only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2)' />

HI RESOLUTION STYLES
Add double-size graphics, then shrink them to the
proper size with background-size
Remember that these extra images take up a lot
of precious space
html {
background: url(/img/bg-hi.png) top center (50%, 50%);
}

footer {
background-image: url(/img/wood-hi.jpg);
background-size: cover;
}

APP CACHING
Your cache manifest is a simple ﬁle that tells the
browser to cache certain ﬁles
You specify it using a manifest attribute on your
opening <html> tag:

<html manifest=‘cache.manifest’>

APP CACHING
The browser will need to be told how to read it,
either in the .htaccess ﬁle or using a PHP
wrapper ﬁle (or similar):
AddType text/cache-manifest .manifest

You could quite easily write a backend script to
generate your manifest automatically

APP CACHING
This one is very simple – CACHE MANIFEST

it’s just a list of ﬁles that # unflappable : cache v0.17

need caching (I’ve cut /css/reset.css

some out here) /css/main.css
/css/big.css
/css/hi-res.css
Your ﬁle must start with
CACHE MANIFEST
/img/icon.png
/img/bg.png
/img/bg-hi.png
/img/brass.jpg
/img/brass-hi.jpg
/img/paper.jpg
/img/wood.jpg
/img/wood-hi.jpg

APP CACHING
Difﬁcult to debug – fails silently if missing
ﬁles or on bad syntax. Chrome dev tools are
your friend!

APP CACHING
5MB limit on cached apps –
keep an eye on ﬁle / data size
When you update, you must
change the manifest in some
way – usually incrementing a
version number is best
# unflappable : cache v0.946

LOCAL STORAGE
Simple key / value pairs
Essentially just persistent variables, speciﬁc to
your app / domain
localStorage items are always strings – you can
save objects into it by using JSON.stringify()
This app uses localStorage to store the JSON
object with all the presentation data in

LOCAL STORAGE
To set a localStorage variable:
localStorage.setItem(‘key’, ‘value’);

To retrieve a localStorage variable:
localStorage.getItem(‘key’);

And then delete it permanently:
localStorage.removeItem(‘key’)

LOCAL STORAGE
For more complex data storage, you can also
use WebSQL – client side SQL databases
Cross-browser support isn’t as wide, though iOS
supports it ﬁne

META TAGS & ICONS
A bunch of stuff in the <head> to set up
your app!
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />

<link rel="icon" href="/img/icon.png" />
<link rel="apple-touch-icon" href="/img/apple-icon.png" />
<link rel="apple-touch-icon" href="/img/apple-icon-hi.png" sizes="114x114" />

META TAGS & ICONS
The viewport meta tag lets you set how iOS (and
other devices) will handle resizing, scrolling, and
other detail
<meta
name="viewport"
content="width=device-width,
initial-scale=1,
maximum-scale=1,
user-scalable=0">

META TAGS & ICONS
The apple-mobile-web-app-capable meta tag tells
iOS to not display browser chrome when a user
runs this app from the home screen
<meta name="apple-mobile-web-app-capable" content="yes" />

META TAGS & ICONS
apple-mobile-web-app-status-bar-style allows you
to set the status bar colour
Default is the light bar, also black or black-
translucent
If you use black-translucent, your content will
have an extra 20px to ﬁll:

META TAGS & ICONS
Icons speciﬁed in the <head> are used on the
user’s home screen alongside native apps
Use a 72px icon for iPad, and a 114px icon for
Retina displays – if you have more than one,
specify which is which using the sizes attribute

<link rel="icon" href="/img/icon.png" />
<link rel="apple-touch-icon"
href="/img/apple-icon.png" />
<link rel="apple-touch-icon"
href="/img/apple-icon-hi.png" sizes="114x114" />

WHAT NEXT?
This is a very simple introduction to what HTML5
apps can do in the mobile space
A surprising amount of features are exposed to
mobile browsers
Canvas interactivity, video, audio, geolocation,
and the accelerometer are just a few things
which are available for your apps

WHAT NEXT?
Dive into HTML5 (Mark Pilgrim)
http://diveintohtml5.org
The HTML5 Doctor (various)
http://html5doctor.com
HTML5 Poker cheat sheet (by... me)
http://semibad.com/s/poker

THANK YOU
Please refrain from asking difﬁcult questions

@semibad
andi@semibad.com
http://semibad.com

HTML5 apps for iOS (and probably beyond)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (13)

En vedette

En vedette (6)

Similaire à HTML5 apps for iOS (and probably beyond)

Similaire à HTML5 apps for iOS (and probably beyond) (20)

Dernier

Dernier (20)

HTML5 apps for iOS (and probably beyond)

Notes de l'éditeur