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
3d895659a74acee6d37b3674f6f7b650?s=48 heewon
1
400
9b32c41cb126732f3d05f1323078e037?s=48 seleliao
1
460
37228dc025342eeadeb18bf1c2976a7a?s=48 fixel_admin
0
260
B178bf6ab8dcf16d726d0a4479d0d6a2?s=48 jvmal
0
180
92151711459a4e3a191f791238f6259d?s=48 chiemitaki
0
1.2k
1439b2421bf9af4d7353a76c5355b6d6?s=48 diegoa4863
1
460
196a4242eecbd120dcb4cd9a80899e34?s=48 benholliday
1
140
3256ba9ce1e999ba1d724d49ff8227b2?s=48 akitumn
1
310
3ed98d0c9704e28a7da4d5d7ea9c320f?s=48 roudakov
0
310
6cd6d27974516edf96ebd359dd980ab5?s=48 lindatart
1
200
1db31cd7a801c73129dbce8163a49b08?s=48 sevendex
0
150
3c75ad9ccb3cca4b81b9b887ba6101bb?s=48 ray110
1
700

Featured

See All Featured
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
36k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
400k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.6k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.3k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
37
4.5k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
55
3k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.1k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
3.8k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
263
11k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
248
21k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
350
20k

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