jQuery Mobile Keynote - UK Conference

4ec3e17536d217f2367be3aebb72a72b?s=47 toddparker
February 11, 2012

jQuery Mobile Keynote - UK Conference

4ec3e17536d217f2367be3aebb72a72b?s=128

toddparker

February 11, 2012
Tweet

Transcript

  1. jQuery UK jQuery Mobile filament group

  2. hi there. Todd Parker Project Lead, jQuery Mobile Partner, Filament

    Group Inc.
  3. Open source

  4. Sponsor & design lead

  5. jQuery Mobile An introduction

  6. Mobile-first UI tools

  7. None
  8. UI Elements

  9. AJAX Nav

  10. Project Goals No browser left behind.

  11. 10+ Billion Web enabled mobile devices on the internet Source:

    ITU, Mark Lipacis, Morgan Stanley Research.
  12. (They aren’t all iPhones) 4.01 12.3 17.1 18.17 19.95 22.07

    Opera iPhone / iPod Touch Android Nokia BlackBerry Netfront July 2011 World Mobile Browsers http://gs.statcounter.com/#mobile_browser-ww-monthly-201103-201103-bar
  13. All Platforms 1 codebase

  14. and for everyone Make it work everywhere

  15. iOS Android WebOS Blackberry WP7 Meego Symbian Kindle/Nook reader +

    tablets Playbook Symbian Bada
  16. Desktop too

  17. 50+ devices in our lab

  18. Built on web standards

  19. Progressive Enhancement

  20. Responsive Web Design Image by Brad Frost

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

    Works
  22. Don’t break the web. Now with PushState! jquerymobile.com/test/docs/api/globalconfig.html

  23. Keep it accessible

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

  25. Web to Native

  26. ...to App Stores

  27. Themable, Brandable

  28. None
  29. None
  30. None
  31. ...or native if you want http://taitems.github.com/iOS- Inspired-jQuery-Mobile-Theme/

  32. Pretty cool.

  33. Inspiration http://www.jqmgallery.com

  34. Getting Started Developer accessibility

  35. Make a regular website 1 STEP

  36. <!DOCTYPE html> <html> <head> <title>Welcome!</title> </head> <body> <h1>Welcome!</h1> <p><a href="contact.html">Send

    me a note!</a></p> </body> </html>
  37. None
  38. Add jQuery Mobile 2 STEP

  39. <!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>
  40. <!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>
  41. Automagic-ness Ajaxify links + forms = transitions Enhance all form

    elements Wrap contents a ‘page’ container *
  42. None
  43. Data- attributes Easy config in HTML

  44. HTML5 data- attributes data-foo="whatever"

  45. Links, Ajaxified <a href="page.html">Link</a>

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

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

  48. Single vs. multiple One page per HTML doc OR Multiple

    page containers within a single HTML doc
  49. Pre-load <a href="page.html" data-prefetch="true">Link</a>

  50. Transitions <a href="page.html" data-transition="flip">Link</a>

  51. Transitions <a href="page.html" data-transition="flip">Link</a>

  52. Dialog <a href="page.html" data-rel="dialog">Link</a>

  53. Button <a href="page.html" data-role="button">Button</a>

  54. Icon <a href="page.html" data-role="button" data-icon="star"> Button</a>

  55. Theme swatch <a href= "page.html" data-role="button" data-theme="b"> Button</a>

  56. Listviews

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

  58. Basic unordered list

  59. <ul data-role="listview"> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul> Add role

  60. Read-only listview

  61. <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> Add links
  62. Linked listview

  63. <ul data-role="listview" data-filter="true" data-inset="true"> <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> Filter + inset
  64. List with links

  65. Etc.

  66. Forms

  67. Native

  68. Auto enhanced

  69. <label for="search">Search Input:</ label> <input type="search" name="password" id="search" value="" data-role="none"

    /> Opt out
  70. <label for="search" class="ui-hidden-accessible">Search Input:</label> <input type="search" name="password" id="search" value="" data-role="none"

    /> Hide labels accessibly
  71. Page regions

  72. Anatomy of a page header footer content

  73. <body> <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div><!--

    /page --> </body> Page sections
  74. <body> Nothing at all. </body> What’s required?

  75. <body> <div data-role="page"> Nothing at all. </div><!-- /page --> </body>

    We add this for you
  76. <body> <div data-role="page"> <div data-role="content"> Nothing at all. </div> </div><!--

    /page --> </body> Want some padding?
  77. <body> <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div><!--

    /page --> </body> Toolbars
  78. Taking it further

  79. Rich API

  80. Rich API

  81. FlipPics

  82. None
  83. Coming soon 1.1 late February

  84. New loader design

  85. Transition re-vamp

  86. New types

  87. New types

  88. Default: fade Fail 3D transform test = fade ONLY (Android

    2.x)
  89. Chrome will save us!

  90. Chrome will save us!

  91. True fixed toolbars

  92. CSS position:fixed - iOS 5 - Android 2.2, 2.3, 3.0

    (honeycomb), 4.0 (ICS) - Blackberry 7, PlayBook 1+ - Firefox mobile 6 - WebOS 2+ - Kindle Fire - Kindle 3 - Nook Color 1 & 2 (tablet) - All modern desktop browsers (Safari, Firefox, Opera, Chrome, IE, etc.) Brad Frost
  93. ...with native scrolling (fall back to scrolling bars with the

    page)
  94. Wow

  95. Forms in bars

  96. forms: data-mini

  97. ...buttons too

  98. Adorable!

  99. slider: data-highlight

  100. data-enhance="false" data-ajax="false" Hands off!

  101. iOS orientation bug

  102. touchOverflow no more

  103. AMD

  104. Preview jquerymobile.com/test

  105. What's next? 1.2 and beyond

  106. Download builder

  107. Bug fixes

  108. Popup

  109. Fetchlinks

  110. Overflow regions

  111. Responsive layouts

  112. Ecosystem Tools & Resources

  113. Adobe CS 5.5

  114. Tools

  115. Tools

  116. Tools

  117. Tools http://codiqa.com/jqueryuk

  118. Tools

  119. Books

  120. Resources www.jquerymobile.com/resources

  121. Wrapping up

  122. Awesome sponsors filament group

  123. Go team! Scott Jehl, Filament Group Mat Marquis, Filament Group

    John Bender, Adobe Kin Blas, Adobe Ghislain Gesuin, Jive Software Anne-Gaelle Colom, Univ. of Westminster Gabriel Schulhof, Intel Sergey Grebnov, Microsoft Jason Scott, RIM ...and countless others!
  124. @jquerymobile Stay in the loop jquerymobile.com/blog

  125. Get Involved github.com/jquery/jquery-mobile

  126. Support the project Test devices (ICS!) Financial donations Sponsor developer

    time
  127. Thanks!