jQuery Mobile Keynote - UK Conference

jQuery UK jQuery Mobile ﬁlament group

hi there. Todd Parker Project Lead, jQuery Mobile Partner, Filament
Group Inc.

Open source

Sponsor & design lead

jQuery Mobile An introduction

Mobile-first UI tools

UI Elements

AJAX Nav

Project Goals No browser left behind.

10+ Billion Web enabled mobile devices on the internet Source:
ITU, Mark Lipacis, Morgan Stanley Research.

(They aren’t all iPhones) 4.01 12.3 17.1 18.17 19.95 22.07
Opera iPhone / iPod Touch Android Nokia BlackBerry Netfront July 2011 World Mobile Browsers http://gs.statcounter.com/#mobile_browser-ww-monthly-201103-201103-bar

All Platforms 1 codebase

and for everyone Make it work everywhere

iOS Android WebOS Blackberry WP7 Meego Symbian Kindle/Nook reader +
tablets Playbook Symbian Bada

Desktop too

50+ devices in our lab

Built on web standards

Progressive Enhancement

Responsive Web Design Image by Brad Frost

Don’t break the web. Bookmark / Refresh Friendly URLS History
Works

Don’t break the web. Now with PushState! jquerymobile.com/test/docs/api/globalconfig.html

Keep it accessible

Touch, mouse, keyboard Touch & Mouse Events Mouse Events

Web to Native

...to App Stores

Themable, Brandable

...or native if you want http://taitems.github.com/iOS- Inspired-jQuery-Mobile-Theme/

Pretty cool.

Inspiration http://www.jqmgallery.com

Getting Started Developer accessibility

Make a regular website 1 STEP

<!DOCTYPE html> <html> <head> <title>Welcome!</title> </head> <body> <h1>Welcome!</h1> <p><a href="contact.html">Send
me a note!</a></p> </body> </html>

Add jQuery Mobile 2 STEP

<!DOCTYPE html> <html> <head> <title>My Web App</title> <style>body { text-align:
center; }</style> <meta name="viewport" content="width=device-width,initial- scale=1"> <link rel="stylesheet" href="jquery.mobile.min.css"> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script> </head> <body> <h1>Welcome to my Site!</h1> <p><a href="contact.html" data-role="button">Contact</a></p> </body> </html>

Automagic-ness Ajaxify links + forms = transitions Enhance all form
elements Wrap contents a ‘page’ container *

Data- attributes Easy config in HTML

HTML5 data- attributes data-foo="whatever"

Links, Ajaxified <a href="page.html">Link</a>

Listen, intercept, handle w/ Ajax products.html <div data-role="page"> TAP

Single vs. multiple One page per HTML doc OR Multiple
page containers within a single HTML doc

Pre-load <a href="page.html" data-prefetch="true">Link</a>

Transitions <a href="page.html" data-transition="flip">Link</a>

Dialog <a href="page.html" data-rel="dialog">Link</a>

Button <a href="page.html" data-role="button">Button</a>

Icon <a href="page.html" data-role="button" data-icon="star"> Button</a>

Theme swatch <a href= "page.html" data-role="button" data-theme="b"> Button</a>

Listviews

<ul> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul> A Regular UL

Basic unordered list

<ul data-role="listview"> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul> Add role

Read-only listview

<ul data-role="listview"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> <li><a href="about.html">About us</a></li> <li><a
href="contact.html">Contact</a></li> </ul> Add links

Linked listview

<ul data-role="listview" data-filter="true" data-inset="true"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> <li><a href="about.html">About
us</a></li> <li><a href="contact.html">Contact</a></li> </ul> Filter + inset

List with links

Native

Auto enhanced

<label for="search">Search Input:</ label> <input type="search" name="password" id="search" value="" data-role="none"
/> Opt out

<label for="search" class="ui-hidden-accessible">Search Input:</label> <input type="search" name="password" id="search" value="" data-role="none"
/> Hide labels accessibly

Page regions

Anatomy of a page header footer content

<body> <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div> </body> Page sections

<body> Nothing at all. </body> What’s required?

<body> <div data-role="page"> Nothing at all. </div> </body>
We add this for you

<body> <div data-role="page"> <div data-role="content"> Nothing at all. </div> </div> </body> Want some padding?

<body> <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div> </body> Toolbars

Taking it further

Rich API

FlipPics

Coming soon 1.1 late February

New loader design

Transition re-vamp

New types

Default: fade Fail 3D transform test = fade ONLY (Android
2.x)

Chrome will save us!

True fixed toolbars

CSS position:fixed - iOS 5 - Android 2.2, 2.3, 3.0
(honeycomb), 4.0 (ICS) - Blackberry 7, PlayBook 1+ - Firefox mobile 6 - WebOS 2+ - Kindle Fire - Kindle 3 - Nook Color 1 & 2 (tablet) - All modern desktop browsers (Safari, Firefox, Opera, Chrome, IE, etc.) Brad Frost

...with native scrolling (fall back to scrolling bars with the
page)

Forms in bars

forms: data-mini

...buttons too

Adorable!

slider: data-highlight

data-enhance="false" data-ajax="false" Hands off!

iOS orientation bug

touchOverflow no more

Preview jquerymobile.com/test

What's next? 1.2 and beyond

Download builder

Bug fixes

Fetchlinks

Overflow regions

Responsive layouts

Ecosystem Tools & Resources

Adobe CS 5.5

Tools http://codiqa.com/jqueryuk

Resources www.jquerymobile.com/resources

Wrapping up

Awesome sponsors ﬁlament group

Go team! Scott Jehl, Filament Group Mat Marquis, Filament Group
John Bender, Adobe Kin Blas, Adobe Ghislain Gesuin, Jive Software Anne-Gaelle Colom, Univ. of Westminster Gabriel Schulhof, Intel Sergey Grebnov, Microsoft Jason Scott, RIM ...and countless others!

@jquerymobile Stay in the loop jquerymobile.com/blog

Get Involved github.com/jquery/jquery-mobile

Support the project Test devices (ICS!) Financial donations Sponsor developer
time

Thanks!

jQuery Mobile Keynote - UK Conference

jQuery Mobile Keynote - UK Conference

More Decks by toddparker

Other Decks in Technology

Featured

Transcript