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
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.4k
1人歩きする営業資料作成
yutoshukuya
2
150
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
500
Wolf and the seven goatkids
_limex_
PRO
0
460
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
560
Installing and Running decksh/pdfdeck
ajstarks
1
490
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
390
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.8k
Designing UIs without a UI designer
strongeron
0
130
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
260
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
640
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
1
400
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Designing the Hi-DPI Web
ddemaree
276
33k
Design by the Numbers
sachag
274
18k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Automating Front-end Workflow
addyosmani
1357
200k
The Invisible Side of Design
smashingmag
294
49k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
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