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.5k
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
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
200
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
340
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
220
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
1.3k
TrollsTopia: Funtography- Part 1
kenijam
1
260
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
740
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
3
750
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
0
380
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
1.4k
UXデザイナーが肩書きの私がいまUXデザインにそんなに興味がない理由 #uxd2024(字幕入り配布版)
versionfive
7
2k
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
muture
0
490
Mitra Manual
nnidhz
0
140
Featured
See All Featured
A Philosophy of Restraint
colly
200
16k
A better future with KSS
kneath
231
17k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Practical Orchestrator
shlominoach
185
10k
Bash Introduction
62gerente
607
210k
Adopting Sorbet at Scale
ufuk
71
8.8k
A Modern Web Designer's Workflow
chriscoyier
689
190k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Music & Morning Musume
bryan
43
5.9k
Six Lessons from altMBA
skipperchong
24
3.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
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