jQTouch – Mobile Web Apps with HTML, CSS and JavaScript

jQTouch
Mobile Web Apps with
HTML, CSS & JavaScript

@philippbosch
February 18, 2010 – jsberlin

Hi, I’m Philipp.
• Freelance Web Developer

Hi, I’m Philipp.
• Working in Kreuzberg

Hi, I’m Philipp.
• Creating websites & web applications since 1995

Hi, I’m Philipp.
• Creating websites & web applications since 1995
• Been doing some mobile projects recently

Mobile Apps.
• Two different ways to develop for mobile devices:

Mobile Apps.
• «Native Apps»

Mobile Apps.
• «Native Apps»
• Objective-C (iPhone)

Mobile Apps.
• «Native Apps»
• Java (Android)

Mobile Apps.
• «Native Apps»
• Java (Android)
• «Web Apps»

Mobile Apps.
• «Native Apps»
• Java (Android)
• «Web Apps»
• HTML, CSS, JavaScript

Mobile Apps.
• «Native Apps»
• Java (Android)
• «Web Apps»
• HTML, CSS, JavaScript
• run on all devices with a web browser

Web Apps.
• Any regular website can be a web app.

Web Apps.
• Any regular website can be a web app.
• On the iPhone you can add web apps to the
home screen.

Voilà: jQTouch.
• Plugin for jQuery

Voilà: jQTouch.
• User interface elements (iPhone style)

Voilà: jQTouch.
• Themes

Voilà: jQTouch.
• Themes
• Automatic Navigation

Voilà: jQTouch.
• Themes
• Animations

Voilà: jQTouch.
• Themes
• Animations
• Supports mobile Webkit browsers (iPhone,
Android, Palm Pre, …)

How does it work?
• One HTML ﬁle.

How does it work?
• One HTML ﬁle.
• Inside the <body> element create a <div>
element for each panel of your app.

How does it work?
• One HTML ﬁle.
• Use class name conventions in your HTML, e.g.
div.toolbar, ul.rounded, a.back, …

How does it work?
• One HTML ﬁle.

• Add jqtouch.js, jqtouch.css, theme.css.

How does it work?
• One HTML ﬁle.

• Add jqtouch.js, jqtouch.css, theme.css.
• Call $.jQTouch().

<!doctype html>
<html>
<head>
<title>jsberlin</title>
<script src="jqtouch/jquery.1.3.2.min.js">…
<script src="jqtouch/jqtouch.min.js">…
<style type="text/css">
@import "jqtouch/jqtouch.min.css";
</style>
<style type="text/css">
@import "themes/jqt/theme.min.css";
</style>
<script>
$.jQTouch();
</script>
</head>
…

…
<body>
<div id="home">
<div class="toolbar"><h1>My app</h1></div>
<ul class="rounded">
<li><a href="#foo">Foo</a></li>
<li><a href="#bar">Bar</a></li>
</ul>
</div>
<div id="foo">
<div class="toolbar">
<h1>Foo</h1>
<a href="#" class="back">Back</a>
</div>
</div>
</body>
</html>

Animation.
• 8 built-in animations: slide, slideup,
dissolve, fade, flip, pop, swap and cube.

Animation.

• Use these as class names for links to another
panel (<a href="#foo" class="swap">).

Animation.


• Default is slide.

Animation.


• Default is slide.
• If you click on a back button the reverse
animation is applied automatically.

…
<div id="home">
<div class="toolbar"><h1>My app</h1></div>
<ul class="rounded">
<li><a href="#foo" class="flip">Foo</a></li>
<li><a href="#bar">Bar</a></li>
</ul>
</div>
…

Events.
• Five new events you can bind callbacks to:

Events.
• tap

Events.
• tap
• http://blog.jqtouch.com/post/205113875/

Events.
• tap

• pageAnimationStart

Events.
• tap

• pageAnimationEnd

Events.
• tap

• turn

Events.
• tap

• turn
• swipe

$('#mybutton').tap(function() {
// do something when the button is tapped on
});

$('#mypanel').bind('pageAnimationStart',
function(event, info) {
if (info.direction == 'in') {
populateThePanelWithAjaxData();
}
}
);

$('body').bind('turn', function(event, info) {
console.log(info.orientation);
// landscape or profile
});

$('#swipeme').bind('swipe',
function(event, info) {
console.log(info.direction);
// left or right
}
);

Init Options.
$.jqTouch({
icon: "path/to/homescreen-icon.png",
startupScreen: "path/to/startup-image.png",
statusBar: "default|black|black-translucent",
addGlossToIcon: true|false,
fixedViewport: true|false,
preloadImages: ["img1.png","img2.png", …],
...
});

Themes.
• Comes with two complete themes:

Themes.
• «apple» mimics the default iPhone look

Themes.
• «jqt» is based on «apple» but darkermore
universal

Themes.
universal
• Custom theming is easy: alter the CSS, throw in
some graphics and you're done.

Themes.
universal
• Custom theming is easy: alter the CSS, throw in
some graphics and you're done.
• Most graphical fx (gradients, round corners,
shadows) are CSS3-based, so no gfx needed.

Web apps: Pros.
• Ease of development.

Web apps: Pros.
• Cross-device compatibility.

Web apps: Pros.
• No AppStore approval needed.

Web apps: Pros.
• No AppStore approval needed.
• Easy updates.

Web apps: Cons.
• Only few APIs for device features available in JS.

Web apps: Cons.
• No AppStore.

Web apps: Cons.
• No AppStore.
• Hard to sell your app.

PhoneGap.
• Container for your web app.

PhoneGap.
• Enables you to create a native app with your
web app in it.

PhoneGap.
web app in it.
• Put it in the AppStore, Android Market, …

PhoneGap.
web app in it.
• Put it in the AppStore, Android Market, …
• Provides JS access to otherwise inaccessible
device APIs.

Device APIs in JS.
• Device • Camera
• Location • Vibrate
• Accelerometer • Sound
• Contacts • Telephony
• Orientation (if supported by the device)

PhoneGap.
• Supported platforms: iPhone, Android,
Blackberry, Symbian, Palm.

PhoneGap.
• Windows Mobile, N900/Maemo to be added.

PhoneGap.
• Windows Mobile, N900/Maemo to be added.
• Open Source (MIT license).

Summing it up.
Combine jQTouch with PhoneGap and the
possibilities of HTML 5 (Ofﬂine Cache,
localStorage/sessionStorage, client-side
databases) and you're gonna have a lot of fun.

Further reading.
• jQTouch » jqtouch.com

Further reading.
• PhoneGap » phonegap.com

Further reading.
• PhoneGap » phonegap.com
• Jonathan Stark: Building iPhone Apps with
HTML, CSS, and JavaScript » building-iphone-
apps.labs.oreilly.com

Thanks.
Slides available at » pb.io/talks/jqtouch/.

CC-BY

Thanks.
Slides available at » pb.io/talks/jqtouch/.
Tomorrow :)

CC-BY

jQTouch – Mobile Web Apps with HTML, CSS and JavaScript

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a jQTouch – Mobile Web Apps with HTML, CSS and JavaScript

Semelhante a jQTouch – Mobile Web Apps with HTML, CSS and JavaScript (20)

Último

Último (20)

jQTouch – Mobile Web Apps with HTML, CSS and JavaScript

Notas do Editor