Mobile Web - fen-om data

sprocketexponentialMobile - Wireless

Dec 10, 2013 (3 years and 6 months ago)

78 views




Page 1



Mobile Web
Written by Sandro Alberti; sandro@fen-om.com
Sandro is a Web designer/developer who enjoys educating others
about design, both in theory and practice.

INTRODUCTION
Sometimes, mobile devices require a fully-developed app. This helps to create a compact interface that
can be used for focused 'mobile' tasks (tasks that are easy to enjoy while on-the-run), and that can
leverage the technology that is only available on mobile devices (geo-location, gyroscope,
accelerometer, built-in camera, security/encryption,...). For more information on this topic, see my
tutorial: 'Mobile Apps'.

Sometimes, however, a mobile Web page can actually be used instead of a full-fledged app (since they
are easier to develop than apps, but can include much of the app experience and focus, and even some
capabilities like geo-location). Mobile Web pages can also be used as simplified ('mobile') versions of
regular ('desktop') Web pages.

THE BASIC MOBILE WEB PAGE
(note: the following instructions are based upon creating Web layouts that implement Responsive Layout; see the section on
320-and-up at the end of this document, for details on how to set this up effectively)

Size/Format: The primary goal of mobile style sheets is to alter the layout for a smaller display. First and
foremost this means reducing multi-column layouts to single columns (most mobile screens are narrow
and vertical). Next, simplify the layout, and save additional pixels by reducing margins and padding.

In order to scale Web page content to fit inside the viewport of mobile devices, use a <meta> tag that
was introduced by Apple and has since been picked up by other device manufacturers:

<meta name="viewport" content="width=320 ,user-scalable=false " />
(in this example, 320 pixels of the page will be visible across the width of the device, and disables the
ability to resize the page; when the screen is more than 320 pixels wide, the browser will expand the
content to fit the screen, which is fine if it's ok to just show the same content, scaled larger, on larger
screens; a little bit later we will see in more detail how this tag can be modified to work great across a
range of screen sizes and not just 320 pixels)

Content rules:
• Set the overall font for the document to Helvetica, which is the font used by most of the
applications on the iPhone. 14px is also a good text-copy size (otherwise the text feels a bit too
tiny).
• Reduce clutter throughout the page. If your site uses images for buttons or navigation, consider
replacing these with plain-text / CSS counterparts.

Improve readability by increasing the font
size of any small or medium-sized text.
• Since clicking is generally less precise on mobile devices, so make sure to increase the clickable
areas of any important buttons (or even text links) by setting
display: block
and adding
padding to the clickable elements.
• Since floated elements can cause problems for mobile layouts, do not use any floats.
• Add rounded corners to the navigation menus:

#header ul li:first-child a {




Page 2



-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
#header ul li:last-child a {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}

A few pages on my site have titles that are longer than can fit in the header bar. For the perfect,
clean iPhone look, truncate long page titles with a trailing ellipsis:
max-width: 160px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
• By default, Mobile Safari briefly displays a translucent gray box over clickable objects that have
been tapped. Removing it is easy and makes the app look much better. Mobile Safari supports a
property called
-webkit-tap-highlight-color
that allows you to change the default to
whatever color you like. To remove the highlight completely, set a transparent color:
-webkit-tap-highlight-color: rgba(0,0,0,0);

• Since most handheld devices include a phone, you can make phone numbers clickable (by
linking to tel: followed by the digits of the phone number):
<a href="tel:15032084566" class="phone-link">(503) 208-4566</a>


In forms, you can use HTML5 input types that allow mobile devices to display a contextual
keyboard that relates to the input type:
<input type="tel" />
<input type="email" />

(non-supportive browsers naturally degrade to view these special input types as
<input
type="text" />)
It's also useful to employ Safari-mobile-specific tags in form fields:
autocapitalize

Allows you to turn off the default autocapitalization feature.
autocorrect

Allows you to turn off the default spellcheck feature.
autocomplete

Allows you to turn off the autocomplete feature of Mobile Safari.

Special styling:
ORIENTATION:
It's possible to add certain styles based on the device orientation, using:

@import url("portrait.css") all and (orientation:portrait);
@import url("landscape.css") all and (orientation:landscape);

(here portrait.css styles will be added for vertical devices and the landscape.css will be added for
horizontal; note: these orientation media queries have not been adopted by all devices)

Media queries:
A more universal method for orientation detection are min and max-width media queries:

/* Portrait */
@media only screen and (min-width: 768px) and (orientation: landscape) {
body { opacity: 1; }
}

/* Landscape */
@media only screen and (min-width: 768px) and (orientation: landscape) {
body { opacity: 0; }



Page 3



}

Apart from detecting orientation, media queries are the standard method for detecting screen size (the
core of responsive-design solutions such as 320 and up).

In order for min and max-width to work on the iPhone we also need to set the viewport meta tag

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-
scale=1.0, initial-scale=1.0">

The <meta name="viewport"> tag uses device-width to set the width of the screen in CSS pixels at a
scale of 100%. The initial-scale property controls the zoom level when the page is first loaded.
maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom
the page in or out. Mobile Safari often just zooms the page when changing from portrait to landscape; If
web developers want their scale settings to remain consistent when switching orientations on the
iPhone, they must add a maximum-scale value to prevent this zooming. Similar to the width property,
there is also a corresponding one for height settings. You won’t find yourself using the height property
that often — it’s mostly useful for pages that should not scroll, or else, only scroll sideways. In addition,
you may want to specify the initial zoom factor for the viewing area. This is done through the initial-
scale property.

Another pair of useful, yet secondary, header tags are:
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">

The BlackBerry Browser supports the HandheldFriendly and viewport values to control whether the
browser is permitted to zoom in and out of content. MobileOptimized is mainly used by IE Mobile;
indicates what screen size the Web site was developed for.

HIDE URL BAR:
While the iPhone packs a lot of resolution into its relatively small screen, the address bar consumes
about 60 pixels of real estate by default when a page is loaded in MobileSafari. That is a quite a bit of
wasted space that can be regained by hiding the address bar with a little bit of Javascript (also, if you
hide the address bar, your design will end up feeling more like an app and less like a Web page). There
are a couple ways to accomplish this, the simplest way being adding Javascript to your
<body>
tag:

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);"></body>

Sometimes this doesn't work, though, and you have to resort to a full chunk of script in the head of your
code:

<script type="application/x-javascript">
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);

function hideURLbar(){
window.scrollTo(0,1);
}
</script>

WEB CLIP ICON:
Finally, when people bookmark your mobile page on an iPhone, iOS will automatically create a
bookmark icon ('web clip icon') on their iPhone desktop. Unfortunately the default bookmark icon is



Page 4



basically a condensed screen shot of the page, which doesn’t usually look very good. To provide a
specially-designed icon, save a 57 x 57 pixel PNG somewhere on your website (customIcon.png in this
example), then add this snippet within your
<head>
tag:

<link rel="apple-touch-icon" href="customIcon.png"/>

(
don’t worry about rounded corners or a glossy effect, iPhone will add those by default; if you don't
want gloss added automatically, use
apple-touch-icon-precomposed
instead of
apple-touch-icon
)

FULLY MOBILE WEB PAGES
Some elements can't be edited to fit the new mobile format, so it's best to hide them, using
display:none
:
#footer {
display: none;
}

To turn a desktop Web site into a mobile Web version, the most basic process is to switch from many
pages with navigation on top, to many simple pages connected to a navigation page. This is a 5-step
process:
1. Transfer your site navigation to an individual 'mobile menu' page consisting of a list of buttons in
vertical format. Could be something like this:
<div id="header">
<h1><a href="./">Illumina</a></h1>
<div id="utility">
<ul>
<li><a href="about.html">Log In</a></li>
<li><a href="blog.html">Search</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="desktop.html">MiSeq</a></li>
</ul>
</div>
</div>

2. In each page that the navigation links to (every page with content in the Web site), wrap the most
basic content to be displayed, in a <div> with id of your choice (in our example it's called: #hero):
<div id="hero">
<img class="left" src="http://www.illumina.com/images/products/miseq.jpg"
alt="Illumina MiSeq" vspace="5" hspace="15" />
<div class="left">
<h2>MiSeq Personal Sequencing System</h2>
<br />
<p>The MiSeq personal sequencing system delivers the fastest time to answer, a
revolutionary workflow, and the widest breadth of sequencing applications, all in a
compact and economical instrument. For results in hours, not days, MiSeq uses
TruSeq, Illumina's reversible terminator-based sequencing by synthesis chemistry in
combination with innovative engineering. Perform standard experiments such as
amplicon sequencing, clone checking and small genome sequencing with enhanced
performance, more quickly, and cost-effectively compared to capillary
electrophoresis (CE) sequencing. Gain access to powerful next-generation sequencing
applications such as highly multiplexed PCR amplicon sequencing, targeted
resequencing, ChIP-Seq, small RNA sequencing, and more. For current next-generation
sequencing users, complete smaller projects in a fraction of time and cost using
the MiSeq system.</p>
<p><br /></p><br />
<div class="applicationLinksWrap">
<p>
<b>Applications</b>:



Page 5



<span class="">
DNA Sequencing
</span>
<span class="">, Gene Regulation Analysis
</span>
<span class="">, Sequencing-Based Transcriptome Analysis
</span>
</p>
</div>
</div>
</div>

3. Create a 'control page'. The purpose of which will be to switch between menu and content pages:
(this is the page that will call the script in the next step, as well as the styles that follow)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Illumina</title>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" href="mobile.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="iphone.js"></script>
</head>

<body>
<div id="header"><h1>Illumina Mobile Web Site</h1></div>
<div id="container"></div>
</body>
</html>

4. Set up the JavaScript that takes care of connecting back and forth between navigation and pages, and
that displays only what is found inside the #content <div>. This is the script:
var hist = [];
var startUrl = 'index.html';
$(document).ready(function(){
loadPage(startUrl);
});
function loadPage(url) {
$('body').append('<div id="progress">Loading...</div>');
scrollTo(0,0);
if (url == startUrl) {
var element = ' #header ul';
} else {
var element = ' #hero';
}
$('#container').load(url + element, function(){
var title = $('h2').html() || 'Menu';
$('h1').html(title);
$('h2').remove();
$('.leftButton').remove();
hist.unshift({'url':url, 'title':title});
if (hist.length > 1) {
$('#header').append('<div class="leftButton">Back</div>');
$('#header .leftButton').click(function(){
$(e.target).addClass('clicked');
var thisPage = hist.shift();
var previousPage = hist.shift();
loadPage(previousPage.url);
});
}



Page 6



$('#container a').click(function(e){
var url = e.target.href;
if (url.match(/illumina.com/)) {
e.preventDefault();
loadPage(url);
}
});
$('#progress').remove();
});
}

5. Style all the pages.


MOBILE PAGE AS 'HTML APP'
(note: this section focuses on general styling and data rules to make our mobile Web pages begin to behave like 'html apps';
3rd-party software such as Scrollability, JQTouch, Sencha Touch, JQuery Mobile, iui, and Brightcove App Cloud allow you to go
even further; read more about these in the last sections of this document)

FULL-SCREEN APP MODE:
Add the following line of code and your web app will display in full screen mode when launched from a
Web Clip icon: (Safari Mobile navigation, both address bar and footer, is completely removed)

<meta name="apple-mobile-web-app-capable" content="yes" />

You can also control the look of the 20-pixel status bar at the top of the screen. You can set it to
black

or
black-translucent
(which makes it partially transparent and additionally removes it from the
document flow. In other words, your content will be shifted up by 20 pixels and behind the status bar):

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

In full-screen 'app' mode, Apple also allows us to define a startup graphic that will be displayed while the
page is loading. To add a custom startup graphic, create a 320px × 460px PNG file
(myCustomStartupGraphic.png in this example) and link it with this line in your document
<head>
:

<link rel="apple-touch-startup-image" href="myCustomStartupGraphic.png" />

CLIENT-SIDE DATA STORAGE:
At some point in your development of Web apps, you'll need to store a variety of data. With the advent
of HTML5, we can store data in localStorage, sessionStorage, as well as client-side databases.

localStorage and sessionStorage (collectively referred to as key/value storage) are very similar to cookies
in that they allow you to use JavaScript to set name/value pairs that you can then retrieve across
multiple page reloads. Unlike cookies, however, this data lives entirely in the client (so it’s feasible to
store much more data than you would want to with cookies).

localStorage: Data is saved even after the window is closed and is available to all windows (or tabs) that
are loaded from the same source (must be the same domain name, protocol, and port). Local Storage is
used if you want the data to be stored for more than a single session. A simple use case would be to
count the number of times a person has visited a Web page.




Page 7



sessionStorage: Data is stored with the window object. Other windows/tabs are not aware of the values,
and the data is discarded when the window/tab is closed. Session Storage has one purpose: To
remember all the data in your session, and forget it as soon you close the tab (or window) you are
working in. Sessionstorage is good for remembering basic things pertaining to one single login (such as
the fact that a user has provided a login password to gain access).

Setting a value for either is as simple as:

localStorage.setItem('age', 40);

or...

localStorage.age = 40;


Accessing a stored value is equally simple:

var age = localStorage.getItem('age');

You can delete a specific key/value pair from storage:

localStorage.removeItem('age');

Or, you can delete all key/value pairs:

localStorage.clear();

The following would be a typical use... A form submit button calls function saveSettings, which stores
values from 3 form fields (with IDs of #age, #budget, and #weight), and then sends the user 'back' away
from the completed form:

function saveSettings() {
localStorage.age = $('#age').val();
localStorage.budget = $('#budget').val();
localStorage.weight = $('#weight').val();
jQT.goBack();
return false;
}

These values could later be loaded/displayed onto 3 text fields, like this:

function loadSettings() {
$('#age').val(localStorage.age);
$('#budget').val(localStorage.budget);
$('#weight').val(localStorage.weight);
}



Client-Side Databases
The client-side database in particular opens up a world of possibilities for web-based application
developers. Developers can use standard SQL statements to create tables; to insert, update, select, and
delete rows; and so on. Here's a basic example:



Page 8




var db;

$(document).ready(function(){
$('#createEntry form').submit(createEntry);
$('#settings form').submit(saveSettings);
$('#settings').bind('pageAnimationStart', loadSettings);
$('#dates li a').click(function(){
var dayOffset = this.id;
var date = new Date();
date.setDate(date.getDate() - dayOffset);
sessionStorage.currentDate = date.getMonth() + 1 + '/' +
date.getDate() + '/' +
date.getFullYear();
refreshEntries();
});

var shortName = 'Kilo';
var version = '1.0';
var displayName = 'Kilo';
var maxSize = 65536;
db = openDatabase(shortName, version, displayName, maxSize);
db.transaction(
function(transaction) {
transaction.executeSql(
'CREATE TABLE IF NOT EXISTS entries ' +
' (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
' date DATE NOT NULL, food TEXT NOT NULL, ' +
' calories INTEGER NOT NULL);'
);
}
);
});

function createEntry() {
var date = sessionStorage.currentDate;
var calories = $('#calories').val();
var food = $('#food').val();
db.transaction(
function(transaction) {
transaction.executeSql(
'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);',
[date, calories, food],
function(){
refreshEntries();
jQT.goBack();
},
errorHandler
);
}
);
return false;
}

function refreshEntries() {
var currentDate = sessionStorage.currentDate;
$('#date h1').text(currentDate);
$('#date ul li:gt(0)').remove();
db.transaction(
function(transaction) {
transaction.executeSql(
'SELECT * FROM entries WHERE date = ? ORDER BY food;',
[currentDate],



Page 9



function (transaction, result) {
for (var i=0; i < result.rows.length; i++) {
var row = result.rows.item(i);
var newEntryRow = $('#entryTemplate').clone();
newEntryRow.removeAttr('id');
newEntryRow.removeAttr('style');
newEntryRow.data('entryId', row.id);
newEntryRow.appendTo('#date ul');
newEntryRow.find('.label').text(row.food);
newEntryRow.find('.calories').text(row.calories);
}
},
errorHandler
);
}
);
}


Let's go through this example, step by step:

First, define, a global variable, that will store the database connection.
var db;

Then, we define the database parameters. (note: database size limits ['maxSize'] are still being
implemented by browser vendors at this time, so some trial and error while testing your application is in
order. The current default on the iPhone is 5 MB).
var shortName = 'Kilo';
var version = '1.0';
var displayName = 'Kilo';
var maxSize = 65536;

With all these variables in place, you can create the database:
db = openDatabase(shortName, version, displayName, maxSize);

Next, with
executeSql
, create an
entries
table if one doesn’t already exist. (note: all database queries
must take place in the context of a 'transaction')
db.transaction(
function(transaction) {
transaction.executeSql(
'CREATE TABLE IF NOT EXISTS entries ' +
' (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
' date DATE NOT NULL, food TEXT NOT NULL, ' +
' calories INTEGER NOT NULL);'
);
}
);

Now, we can create individual entries (
function createEntry();
called by
$('#createEntry
form').submit(createEntry);
)

The first step in entry-creation is the definition of variables that we will use (date, calories, and food, in
this example; notice how date is actually defined by a value found inside sessionStorage; client-side
databases can certainly work in conjunction with sessionStorage and localStorage)

var date = sessionStorage.currentDate;
var calories = $('#calories').val();
var food = $('#food').val();




Page 10



Now, time to enter these 3 values into the database (again, like when we created the
entries
table,
above, with
executeSql
inside a transaction):
db.transaction(
function(transaction) {
transaction.executeSql(
'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);',
[date, calories, food],
function(){
refreshEntries();
jQT.goBack();
},
errorHandler
);
}
);
return false;
}

After entering the 3 values, the transaction calls function refreshEntires(), which displays all the
database values in a list.

OFFLINE APPLICATION CACHE:
This is another feature that allows Mobile Web pages to behave more like native apps, by local caching
of frequently-used assets. This makes the experience faster. The file that takes care of this is called a
'cache manifest', and is basically a text file that lists 'CACHE MANIFEST' followed by 'CACHE:' and any
assets to be cached in the user's mobile device (with absolute URLs, or paths relative to the location of
the cache manifest file):
CACHE MANIFEST
CACHE:
http://www.example.com/index.html
logo.jpg
scripts/demo.js
styles/screen.css

The file needs to have a .manifest extension and is called by a 'manifest' attribute in the html tag of your
main Web page, like:
<html manifest="demo.manifest">

Finally, your server must run a MIME type of
text/cache-manifest
.


Apart from specifying files to run locally, you can also force users to go online in order to view things.
You do this by adding 'NETWORK' followed by any assets to be viewable only online: (individual assets,
or whole folders)
NETWORK:
profile_pic.jpg
Images/

Finally, similar to NETWORK, there is the similar FALLBACK. In a similar way, FALLBACK also makes
resources available exclusively online, but, if there isn't a network connection, it uses a default local
resource as a backup. This example shows how an online profile picture would be replaced by a local
logo.jpg file if there is no Internet connection:

FALLBACK:
profile_pic.jpg logo.jpg




Page 11



Now, what happens when an _ ?


INTERACTIVITY:
iPhone apps have a number of distinctive animation characteristics that add context and meaning for
the user. For example, pages slide left as you drill down through links, and slide right as you navigate
back. Beyond making a Web page that addresses reduced screen resolution and to-the-point content,
there are some scripts out there, that will allow you to add extra interface options for Apple iOS devices
(and other mobile devices in a few cases). One the best things about building web apps is that we can be
reasonably sure that JavaScript is enabled.



Page 12



320-and-up: "The 'tiny screen first' responsive boilerplate" Originally, 320-and-up was meant to simply
provide different css styling for different screen sizes. It still does this, but has also added a wealth of
bonus features, including:
Styling helpers: Bootstrap styles, Font Awesome icons (you can see what these look like
here)
HTML5/ CSS3 updaters: Modernizr, Selectivizr
Testers: type tester, design tester
CSS manager: LESS

Although these other extra features are great for contemporary Web design, they are not really at the
core of what is needed for a responsive Web structure. So here we will be focusing mainly on the
primary multi-screen presentation features. As a matter of fact, 320-and-up is simply another way of
saying: "Responsive layout based on fluid and fixed elements that are defined by media query
breakpoints"

The way this program works is very simple: In conjunction with <meta name="viewport"> tag, through
media queries, it defines what should or should not be shown at various screen sizes (480px, 600px,
768px, 992px, and 1382px or greater; and, of course, 320px if none of these are active).
What are media queries? See 'media queries' (and the <meta name="viewport"> tag) in pages 2-3.

In order to make your Web page responsive based on 320-and-up, these go in your css file:
@media only screen and (min-width: 480px) {
/* 480 =================================================== */
}
@media only screen and (min-width: 600px) {
/* 600 =================================================== */
}
@media only screen and (min-width: 768px) {
/* 768 =================================================== */
}
@media only screen and (min-width: 992px) {
/* 992 =================================================== */
}
@media only screen and (min-width: 1382px) {
/* 1382 ================================================== */
}

And each will contain your unique styling for a particular screen size (or greater; in other words, if you
style a box to be red at 480px, but blue at 600px, it will remain blue up to 768px, 992px, and 1362px+):
.box {background-color: #ff0000;}
@media only screen and (min-width: 480px) {
/* 480 =================================================== */
.box {background-color: #0000ff;}
}

And if you want elements to appear or disappear depending on screen size? (the solution to make
content lighter and simpler on smaller screens) Simply alternate display styles (display:none to make an
element disappear, or display:block, display:inline, or other to make it appear) :
@media only screen and (min-width: 480px) {
/* 480 =================================================== */
.box {display:none;}
}





Page 13



General recommendations:
Liquid design: where possible, set widths to percentages instead of fixed values, to allow elements to
grow and shrink with screen size:
.box {width:50%;}
Orientation: Media-queries can also detect orientation, so you can combine the above with
orientation:portrait or orientation:landscape :
@media only screen and (min-width: 768px) and (orientation: landscape) {
/* 768 and in landscape mode ============================= */
}

You can also set up for the way a Web page should look when printed or with the range of new double-
resolution devices:
@media print {
/* Print =================================================== */
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--
moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
/* 2x =================================================== */
}


Download here:
http://stuffandnonsense.co.uk/projects/320andup





Page 14



Realizer: Demo your app on an iPhone or iPad without having to build it first.

Whether you're pitching your killer app ideas to investors or a client, or simply just brainstorming
something you've been thinking about for a while, Realizer enables you to quickly build a simple
interaction prototype from a series of images.

Download:
http://realizerapp.com



Page 15



Scrollability: This JavaScript allows for smooth screen transitions, such as what you get on the iPhone
desktop, when flipping from one screen to the next. Just "drop the single script into your page, add a
few CSS classes to scrollable elements, and scroll away."

Try this demo on your iPhone or iPad:
http://joehewitt.github.com/scrollability/example1.html

Download the script:
http://joehewitt.github.com/scrollability/



Page 16



Brightcove App Cloud: A complete platform enabling developers and business people to work together
at every stage of app development and growth. Build apps with HTML5 and JavaScript, and deliver cross-
platform apps that access native APIs and are distributed through the Apple and Android app stores
without having to learn platform-specific languages (use your favorite code editor!). Access native
camera, QR code scanning, GPS, orientation, and alert capabilities of each device through high
performance native containers. The system also allows you to connect/stream to existing content
services and repositories using RSS, JSON, or XML (called 'Smart Content Sources'). Jump start your app
development with provided pre-built sample code. Use the 'App Cloud Workshop' app to see exactly
how your app will look and perform on target devices. Locally cache and synchronize text, videos or PDF
content so that end users can use your app without connecting to the Internet. Integrate video into your
apps with Brightcove Video Cloud. Bonus feature: Dual-screen solution for Apple TV: Build multi screen
apps using built-in AirPlay APIs that send content to your Apple TV while displaying companion app
content on your iPad or iPhone.

There are 3 levels:
Core: This is free and allows for the implementation of unlimited apps! Only 5 Smart Content Sources,
though.
Pro: Starts at $99 per month. Adds targeted push notifications, analytics, unlimited Smart Content
Sources, image transcoding/caching, live-app dynamic reconfiguration, visual app set-up, native ads,
tech support.
Enterprise: Custom plans and advanced features.


Download:
http://www.brightcove.com/en/content-app-platform




Page 17



jQTouch: A JQuery plugin that works on iPhone and Android, and includes native Webkit animations,
built-in themes, swipe detection, and extensions (location, floaty, offline, and autotitles, photo gallery)

native Webkit animations
jQTouch comes with 8 page animations: (slideleft,slideright), slideup, dissolve, fade, (flipleft,flipright),
pop, swapleft, and (cubeleft,cuberight).

built-in themes
Themes included are: Apple (looking like the iPhone), and jQT (custom style based on Apple, but darker,
more universal looking). One can modify either of these core CSS files to build a completely custom UI.

swipe detection
Any element becomes 'swipe-able' with a little bit of code:
$(function(){
$('#swipeme').swipe( function(event, info){
console.log(info.direction);
});
});


extensions
• location: Included in the basic jQTouch installation. Provides access to geo-location features in
iPhone.
• floaty: Included in the basic jQTouch installation. Allows the user to create a “floaty” bar.
• offline: Included in the basic jQTouch installation. Using HTML5’s Cache Manifest feature, it is
possible to make jQTouch sites/apps run offline. Instructions for this are found here:

https://github.com/senchalabs/jQTouch/wiki/OfflineSupport
The offline extension is the JS debugger for offline capable apps.
• autotitles: Included in the basic jQTouch installation. Auto set the title in the toolbar from
referrer.
• photo gallery: Available at
http://code.google.com/p/jqextensions/wiki/JQTouchPhotoGallery

Based on the native iOS (iPhone OS) Photo Gallery, this extension enables swipe to slide, scaling
of photos, captioning, and a slideshow. Testing real-extension for applications.
• html5 database: Available at
http://www.position-absolute.com/articles/jqtouch-html5-database-api-extension/

Allows you to grab data from an HTML5 database, Allowing you to write faster and less bloated
code.
• add-to-homescreen message: Available at
http://cubiq.org/add-to-home-screen

• hardware-accelerated accordion: Available at
http://cubiq.org/accordion

• overflow scroll area: Available at
http://cubiq.org/iscroll-4

• fixed layer: Available at
http://cubiq.org/follow-along-floating-layer

• slide-in menu: Available at
http://cubiq.org/slide-in-menu

• dynamic height: Available at
www.golen.net/blog/jqtouch-dynamicheight-extension/




Page 18



• calendar: Available at
https://github.com/thingsinjars/jQTouch-Calendar


In any application of JQTouch, the HTML of the page basically amounts to a head with a title, and a body
with
<div>
children; something like this:

<html>
<head>
<title>Kilo</title>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>Kilo</h1>
</div>
</div>
<div id="about">
<div class="toolbar">
<h1>About</h1>
<a class="button back" href="#">Back</a>
</div>
<div>
<p>Kilo gives you easy access to your food diary.</p>
</div>
</div>
</body>
</html>

When initializing JQTouch, you can include many of the special features I've described previously (Web
clip icon with or without gloss, status-bar color, . You use JavaScript to initialize JQuery, like this:

<script type="text/javascript">
var jQT = $.jQTouch({
icon: 'customIcon.png',
addGlossToIcon: true,
statusBar: 'black'
fixedViewport: true,
fullScreen: true,
startupScreen: 'myCustomStartupGraphic.png'
});
</script>

Each
<div>
becomes a page ('panel') in the application (and makes a main panel navigation with a
button linking to each panel) by virtue of the fact that it is a direct descendant of the body. Inside each
panel <div>, there is a <div> with a class of toolbar (which becomes the navigation bar for the panel;
each with a link with the classes button and back, which tell jQTouch to make the button look and act
like a back button-- href="#" means "go back to the last panel"). You can also do it the other way
around: place all
<div>
s inside a master
<div>
(id='jqt' in this example), and in the first child
<div>

make a navigation panel out of an unordered list, with each button linking to a different subsequent
<div>
: (only the fist
<div>
, the navigation, will load in the beginning)

<html>
<head>
<title>Kilo</title>
</head>
<body>
<div id="jqt">



Page 19



<div id="home">
<ul>
<li class="arrow"><a href="#firstPanel">First</a></li>
<li class="arrow"><a href="#secondPanel">Second</a></li>
<li class="arrow"><a href="#thirdPanel">Third</a></li>
</ul>
</div>
<div id="firstPanel">
<div class="toolbar">
<h1>First Panel</h1>
<a class="button back" href="#home">Back</a>
</div>
</div>
<div id="secondPanel">
<div class="toolbar">
<h1>Second Panel</h1>
<a class="button back" href="#home">Back</a>
</div>
</div>
<div id="thirdPanel">
<div class="toolbar">
<h1>Third Panel</h1>
<a class="button back" href="#home">Back</a>
</div>
</div>
</div>
</body>
</html>

When transitioning between panels, the default animation is slide left-right. You can also use other
built-in animations by inserting the appropriate classes into buttons (.cube, .dissolve, .fade, .flip, .pop,
.slideup, .swap)

JQTouch also stylizes forms, when you use the <form> tag.


Try this demo on your mobile device:
http://data.fen-om.com/siggraph/podcasts_s2011_more/more_art.html

Download the script:
http://jqtouch.com/



Page 20




SenchaTouch: _
Download the script:
http://www.sencha.com/products/touch/



Page 21




jQuery Mobile: _
Download the script:
http://jquerymobile.com/



Page 22




iui: _
Download the script:
http://code.google.com/p/iui/







Page 23



USEFUL LINKS
Great review of Cache Manifest on 'Dive into HTML5':

http://diveintohtml5.org/offline.html
Nice article: Responsive Web Design: Layouts and Media Queries
http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries
Media queries for standard devices
http://css-tricks.com/snippets/css/media-queries-for-standard-devices