Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Todd Parker & Scott Jehl : jQuery Mobile Keynote 2011
Search
scottjehl
October 01, 2011
Design
14
3.4k
Todd Parker & Scott Jehl : jQuery Mobile Keynote 2011
The jQuery Mobile Keynote delivered at jQuery Conference Fall 2011 in Boston, MA.
scottjehl
October 01, 2011
Tweet
Share
More Decks by scottjehl
See All by scottjehl
Responsive & Responsible
scottjehl
48
5.2k
Other Decks in Design
See All in Design
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
230
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
7.8k
UIをもたらすコンテクストの考察
securecat
9
2.5k
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
B/43プラスカードができるまで
putchomsmartbank
0
470
Ride or Die Animatics
warwatkar
0
140
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.9k
TrollsTopia: Funtography- Part 1
kenijam
1
210
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
280
Design Leadership in Challenging Times
morganepeng
3
300
Featured
See All Featured
Done Done
chrislema
178
15k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Building an army of robots
kneath
300
41k
Bash Introduction
62gerente
604
210k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
How GitHub (no longer) Works
holman
304
140k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Code Reviewing Like a Champion
maltzj
514
39k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Building Applications with DynamoDB
mza
88
5.6k
Transcript
Todd Parker & Scott Jehl filament group State of the
Framework
filament group We design engaging sites and applications that are
simple to use and accessible to everyone.
A quick restatement of goals & philosophy How’d we get
here?
The mobile web is massive
http://itu.int/ITU-D/ict/material/FactsFigures2010.pdf People Billion 6.8 Subscriptions 5.3
35 Billion Devices on the internet Eric Schmidt DLD Conference
2011 Keynote via http://tcrn.ch/hD4Owx
They aren’t all iPhones...
July 2011 World Mobile Browsers 4.01 12.3 17.1 18.17 19.95
22.07 Opera iPhone / iPod Touch Android Nokia BlackBerry Netfront http://gs.statcounter.com/#mobile_browser-ww-monthly-201103-201103-bar
Tim Berners-Lee July 1996 “Anyone who slaps a ‘this page
is best viewed with Browser X’ label on a web page appears to be yearning for the bad old days [...]”
None
The goal
...and work especially well in capable browsers! Make it work
everywhere.
All Platforms 1 codebase
iOS Android WebOS Blackberry WP7 Meego/Maemo Kindle 2 Nook Playbook
Symbian Symbian
Desktop too.
Also here.
Built on standards
and jQuery core Mobile + Tablet UI Tools + utilities
Familiar API, CDN delivery jquery.min.js jquery.mobile.min.js 31kb 10 - 25kb
Progressive Enhancement
Don’t break the web. Bookmark / Refresh Friendly URLS History
Works Now with PushState! jquerymobile.com/test/docs/api/globalconfig.html
Not the OS Design for the brand
None
Keep it accessible
Touch, mouse, keyboard Touch & Mouse Events Mouse Events
Load only what you need! Modular, Decoupled
mobile to tablet to desktop One framework that adapts to
context
None
One. Web.
without being exclusive. Build rich experiences
How to build a jQuery Mobile App
Step 1. Make a regular website
<!DOCTYPE html> <html> <head> <title>My Web App</title> <style>body {text-align: center;
}</style> </head> <body> <h1>Welcome to my site!</h1> <p><a href=”contact.html”>Contact</a></p> </body> </html>
None
Step 2. Add jQuery Mobile
<!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>
Set the zoom <meta name="viewport" content="width=device- width,initial-scale=1">
None
...or something. Step 3 Go shopping
How the heck?
Introducing... The Navigation model
Listen, intercept, handle w/ Ajax products.html <div data-role=”page”> TAP
After that, update the URL History, deep linking, bookmarking http://example.com/products.html
...or in older browsers Hash works as a fallback http://example.com/#/products.html
Linking Pages
How to link pages <DIV class=”click-me” url=”page.html”> This is a
jQuery Mobile link! </DIV>
WAT?
Look familiar? <a href=”page.html”> This is a jQuery Mobile link!
</a>
Transitions
Configuring Transitions <a href=”1.html” data-transition=”fade”> This is a jQuery Mobile
link! </a>
Regular forms; Hijax’d <form action="handler.php" method="post"> Don’t thank us; thank
this guy >
Transitions too! <form action="handler.php" method="post" data-transition=”slideup”>
“Pages” in the page
Page container <body> <div data-role="page"> <!-- page content goes here
--> </div> </body>
Page containers are.... • used to group “pages” in DOM
• auto-generated for you • any kind of element you’d like
Dialogs
are pages <a href=”dialogs-1.result.html” data-rel=”dialog”> Open page as a dialog!
</a>
...but not in history ...but they can be closed with
back button
Multipage documents
<body> <div data-role="page" id="home"></div> <div data-role="page" id="products"></div> <div data-role="page" id="services"></div>
<div data-role="page" id="about"></div> <div data-role="page" id="contact"></div> </body> ID’d sections
<p>Hello world</p> <ul data-role="listview"> <li><a href="#products">Products</a></li> <li><a href="#services">Services</a></li> <li><a href="#about">About
us</a></li> <li><a href="#contact">Contact</a></li> </ul> ...and local anchor links
Page Sections
Page child roles 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 child roles
pros / cons •May lend a “native” app feel. •Useful
in certain simple UI situations: full-page photo galleries, etc. •Often translate poorly to desktop. •Only feel “native” to iOS users •Uncanny Valley
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> Basic unordered
list
Basic unordered list
<div data-role="content"> <p>Hello world</p> <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> </div><!-- /content --> List with links
List with links
Etc.
Buttons
Headers, footers
“Fixed” toolbars
Form elements
Collapsibles
The jQM API
$.mobile
Navigation Scripting
$.mobile.changePage
Change pages via JS $.mobile.changePage(“about/us.html”);
...and back window.history.back();
Submit form data $.mobile.changePage(“handler.php”, { type: "post", data: { "shipping":
"Fast!" } });
$.mobile.loadPage
$.mobile.loadPage( "about/us.html" ); Load pages via JS
<a href=”page.html” data-prefetch>Page</a> loadPage() from HTML
Custom Events
Page Events
the new domready Introducing pagecreate
Small code tidbit. $( “.ui-page” ).live( “pagecreate”, function(){ alert( “I’m
created!” ); });
pre-parse the markup here Also: pagebeforecreate
pagebeforecreate $( “div” ).live( “pagebeforecreate”, function(){ alert( “I’m about to
be created!” ); });
Page Change Events
All Page Change Events • pagebeforechange • pagebeforeshow • pagebeforehide
• pageshow • pagehide • pageremove • pagechange
Putting it all together
FlipPics
None
http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/ About those pagination links...
Milestones
Alphas 1-3:
Alpha 4
None
vmousedown | vmouseover | vmouseup | vmousemove | vmouseclick Virtualized
Events
Use ‘em like mouse events $( “a.toggleable” ).bind( “vclick”, function(){
$(this) .next() .toggleClass( “hidden” ); });
$.noConflict() for your HTML Data Attr Namespacing
$.mobile.allowCrossDomainPages
Also. • Configurable text strings (i18n) • Updating page titles
• No more meta viewport injection
Beta 1
None
Also. • URL bar hidden: iOS + Android • Smoother
transitions • Improved URL Handling • Pinch zooming enabled • Auto Back buttons OFF
Beta 2
None
Widget Decoupling • header/content/footer • collapsible • controlgroup • fieldcontain
• fixheaderfooter • button • checkboxradio • select • slider • textinput • links theming • listview • navbar • grid
Cleaner design
Page wrapper: optional
Gradients: More!
New create event $( ...new markup that contains widgets... )
.appendTo( ".ui-page" ) .trigger( "create" );
Also. • DOM management • Data-prefetch • autoInitializePage • Configuration
improvements
Beta 3
history.pushState
pagebeforechange
iOS5 Overflow & Fixies
1.0 RC1
Well, ok.
data-content-theme
Search icon
API docs
What’s Next?
1.0 in weeks
Theming is hard.
Basic TR demo movie
None
Download Builder in the works! Also!
Build, Contribute
Demos & Docs jquerymobile.com/demos/1.0rc1/ Live dev snapshot jquerymobile.com/test/ Nightlies, Latest
jquerymobile.com/latest/
fork & contribute github.com/jquery/jquery-mobile
Build your own $ git clone git://github.com/jquery/ jquery-mobile.git $ cd
jquery-mobile $ make 1 2 3
Thanks core team! • Kin Blas ( Adobe ) •
John Bender ( Adobe ) • Ghislain Seguin ( Jive )
Awesome sponsors are awesome filament group
Thanks! Questions? @toddmparker @scottjehl