Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Todd Parker & Scott Jehl : jQuery Mobile Keynote 2011

4137f7daffde77fce06a26a1ac92f9bf?s=47 scottjehl
October 01, 2011
Design
15
3.2k

Todd Parker & Scott Jehl : jQuery Mobile Keynote 2011

The jQuery Mobile Keynote delivered at jQuery Conference Fall 2011 in Boston, MA.

4137f7daffde77fce06a26a1ac92f9bf?s=128

scottjehl

October 01, 2011
Tweet

More Decks by scottjehl

See All by scottjehl
4137f7daffde77fce06a26a1ac92f9bf?s=48 scottjehl
48
4.9k

Other Decks in Design

See All in Design
25448e5eb61d4fd7b35ed73d722f9ad9?s=48 sawa_zen
1
520
E9bc93cfc82dc07a1b3eca5a2394dbb6?s=48 fmerian
PRO
0
180
Acb24b2e81f0f7c3d6e7eda5e0a70be8?s=48 alvieave
1
130
Fc694de2505b503024a336d557c67b77?s=48 surmillon
0
350
Bdf445461753c32eb09fbf93bef32362?s=48 jtatelucas
0
230
3d895659a74acee6d37b3674f6f7b650?s=48 heewon
2
400
A8cc43c01d74d9e6c05542c3fddf9204?s=48 agirlwithapen
0
210
381ea09c5a26fb7d63ddfc3ccb1d746b?s=48 kgsi
0
310
97cd6dacd55edd934728a50a583e0507?s=48 depot_branding
0
110
A6164c2cb62281a24febe6f722775b98?s=48 miterashishohei
2
890
9105b00a46e39490dceece1a02593cbb?s=48 pointedge
0
900
E4d3bf2e52b00413efb34cc6e7433f3a?s=48 demarco
1
170

Featured

See All Featured
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
6
740
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
6
920
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
129
20k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
Ba530e786553390f3fb271848485681c?s=48 3n
169
23k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.6k
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
13
980
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
273
32k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
263
11k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
61
6.7k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
64
10k

Transcript

  1. Todd Parker & Scott Jehl filament group State of the

    Framework

  2. filament group We design engaging sites and applications that are

    simple to use and accessible to everyone.

  3. A quick restatement of goals & philosophy How’d we get

    here?

  4. The mobile web is massive

  5. http://itu.int/ITU-D/ict/material/FactsFigures2010.pdf People Billion 6.8 Subscriptions 5.3

  6. 35 Billion Devices on the internet Eric Schmidt DLD Conference

    2011 Keynote via http://tcrn.ch/hD4Owx

  7. They aren’t all iPhones...

  8. 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

  9. 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 [...]”
  10. None

  11. The goal

  12. ...and work especially well in capable browsers! Make it work

    everywhere.

  13. All Platforms 1 codebase

  14. iOS Android WebOS Blackberry WP7 Meego/Maemo Kindle 2 Nook Playbook

    Symbian Symbian

  15. Desktop too.

  16. Also here.

  17. Built on standards

  18. and jQuery core Mobile + Tablet UI Tools + utilities

  19. Familiar API, CDN delivery jquery.min.js jquery.mobile.min.js 31kb 10 - 25kb

  20. Progressive Enhancement

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

    Works Now with PushState! jquerymobile.com/test/docs/api/globalconfig.html

  22. Not the OS Design for the brand

  23. None

  24. Keep it accessible

  25. Touch, mouse, keyboard Touch & Mouse Events Mouse Events

  26. Load only what you need! Modular, Decoupled

  27. mobile to tablet to desktop One framework that adapts to

    context
  28. None

  29. One. Web.

  30. without being exclusive. Build rich experiences

  31. How to build a jQuery Mobile App

  32. Step 1. Make a regular website

  33. <!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>
  34. None

  35. Step 2. Add jQuery Mobile

  36. <!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>

  37. Set the zoom <meta name="viewport" content="width=device- width,initial-scale=1">

  38. None

  39. ...or something. Step 3 Go shopping

  40. How the heck?

  41. Introducing... The Navigation model

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

  43. After that, update the URL History, deep linking, bookmarking http://example.com/products.html

  44. ...or in older browsers Hash works as a fallback http://example.com/#/products.html

  45. Linking Pages

  46. How to link pages <DIV class=”click-me” url=”page.html”> This is a

    jQuery Mobile link! </DIV>

  47. WAT?

  48. Look familiar? <a href=”page.html”> This is a jQuery Mobile link!

    </a>

  49. Transitions

  50. Configuring Transitions <a href=”1.html” data-transition=”fade”> This is a jQuery Mobile

    link! </a>

  51. Regular forms; Hijax’d <form action="handler.php" method="post"> Don’t thank us; thank

    this guy >

  52. Transitions too! <form action="handler.php" method="post" data-transition=”slideup”>

  53. “Pages” in the page

  54. Page container <body> <div data-role="page"> <!-- page content goes here

    --> </div> </body>

  55. Page containers are.... • used to group “pages” in DOM

    • auto-generated for you • any kind of element you’d like

  56. Dialogs

  57. are pages <a href=”dialogs-1.result.html” data-rel=”dialog”> Open page as a dialog!

    </a>

  58. ...but not in history ...but they can be closed with

    back button

  59. Multipage documents

  60. <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

  61. <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

  62. Page Sections

  63. Page child roles header footer content

  64. <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

  65. 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

  66. Listviews

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

  68. Basic unordered list

  69. <ul data-role=”listview”> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul> Basic unordered

    list

  70. Basic unordered list

  71. <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

  72. List with links

  73. Etc.

  74. Buttons

  75. Headers, footers

  76. “Fixed” toolbars

  77. Form elements

  78. Collapsibles

  79. The jQM API

  80. $.mobile

  81. Navigation Scripting

  82. $.mobile.changePage

  83. Change pages via JS $.mobile.changePage(“about/us.html”);

  84. ...and back window.history.back();

  85. Submit form data $.mobile.changePage(“handler.php”, { type: "post", data: { "shipping":

    "Fast!" } });

  86. $.mobile.loadPage

  87. $.mobile.loadPage( "about/us.html" ); Load pages via JS

  88. <a href=”page.html” data-prefetch>Page</a> loadPage() from HTML

  89. Custom Events

  90. Page Events

  91. the new domready Introducing pagecreate

  92. Small code tidbit. $( “.ui-page” ).live( “pagecreate”, function(){ alert( “I’m

    created!” ); });

  93. pre-parse the markup here Also: pagebeforecreate

  94. pagebeforecreate $( “div” ).live( “pagebeforecreate”, function(){ alert( “I’m about to

    be created!” ); });

  95. Page Change Events

  96. All Page Change Events • pagebeforechange • pagebeforeshow • pagebeforehide

    • pageshow • pagehide • pageremove • pagechange

  97. Putting it all together

  98. FlipPics

  99. None

  100. http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/ About those pagination links...

  101. Milestones

  102. Alphas 1-3:

  103. Alpha 4

  104. None

  105. vmousedown | vmouseover | vmouseup | vmousemove | vmouseclick Virtualized

    Events

  106. Use ‘em like mouse events $( “a.toggleable” ).bind( “vclick”, function(){

    $(this) .next() .toggleClass( “hidden” ); });

  107. $.noConflict() for your HTML Data Attr Namespacing

  108. $.mobile.allowCrossDomainPages

  109. Also. • Configurable text strings (i18n) • Updating page titles

    • No more meta viewport injection

  110. Beta 1

  111. None

  112. Also. • URL bar hidden: iOS + Android • Smoother

    transitions • Improved URL Handling • Pinch zooming enabled • Auto Back buttons OFF

  113. Beta 2

  114. None

  115. Widget Decoupling • header/content/footer • collapsible • controlgroup • fieldcontain

    • fixheaderfooter • button • checkboxradio • select • slider • textinput • links theming • listview • navbar • grid

  116. Cleaner design

  117. Page wrapper: optional

  118. Gradients: More!

  119. New create event $( ...new markup that contains widgets... )

    .appendTo( ".ui-page" ) .trigger( "create" );

  120. Also. • DOM management • Data-prefetch • autoInitializePage • Configuration

    improvements

  121. Beta 3

  122. history.pushState

  123. pagebeforechange

  124. iOS5 Overflow & Fixies

  125. 1.0 RC1

  126. Well, ok.

  127. data-content-theme

  128. Search icon

  129. API docs

  130. What’s Next?

  131. 1.0 in weeks

  132. Theming is hard.

  133. Basic TR demo movie

  134. None

  135. Download Builder in the works! Also!

  136. Build, Contribute

  137. Demos & Docs jquerymobile.com/demos/1.0rc1/ Live dev snapshot jquerymobile.com/test/ Nightlies, Latest

    jquerymobile.com/latest/

  138. fork & contribute github.com/jquery/jquery-mobile

  139. Build your own $ git clone git://github.com/jquery/ jquery-mobile.git $ cd

    jquery-mobile $ make 1 2 3

  140. Thanks core team! • Kin Blas ( Adobe ) •

    John Bender ( Adobe ) • Ghislain Seguin ( Jive )

  141. Awesome sponsors are awesome filament group

  142. Thanks! Questions? @toddmparker @scottjehl