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 Keynot...
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.3k
Other Decks in Design
See All in Design
TUNAG BOOK 2024
stmn
0
290
portfolio
amitnk
1
120
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
870
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
680
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
1
760
ZOZO CDO Office Design
zozodevelopers
PRO
1
360
Haruki_Konaka_Portforio.pdf
haruki556
0
550
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
110
圧縮デザインスプリントによるオンボーディングの体験設計事例
hassy_pixiv
0
130
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
370
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
260
アフォーダンスとシグニファイア
ryokanakai
0
300
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
What's new in Ruby 2.0
geeforr
342
31k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Designing for humans not robots
tammielis
249
25k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
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