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

jQuery Mobile Keynote - UK Conference

toddparker
February 11, 2012

jQuery Mobile Keynote - UK Conference

toddparker

February 11, 2012
Tweet

More Decks by toddparker

Other Decks in Technology

Transcript

  1. jQuery UK
    jQuery Mobile
    filament group

    View full-size slide

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

    View full-size slide

  3. Sponsor & design lead

    View full-size slide

  4. jQuery Mobile
    An introduction

    View full-size slide

  5. Mobile-first UI tools

    View full-size slide

  6. Project Goals
    No browser left behind.

    View full-size slide

  7. 10+ Billion
    Web enabled
    mobile devices on
    the internet
    Source: ITU, Mark Lipacis, Morgan Stanley Research.

    View full-size slide

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

    View full-size slide

  9. All Platforms
    1 codebase

    View full-size slide

  10. and for everyone
    Make it work
    everywhere

    View full-size slide

  11. iOS Android WebOS
    Blackberry WP7
    Meego
    Symbian
    Kindle/Nook
    reader + tablets
    Playbook
    Symbian
    Bada

    View full-size slide

  12. 50+ devices in our lab

    View full-size slide

  13. Built on web standards

    View full-size slide

  14. Progressive Enhancement

    View full-size slide

  15. Responsive Web Design
    Image by Brad Frost

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. Keep it accessible

    View full-size slide

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

    View full-size slide

  20. Web to Native

    View full-size slide

  21. ...to App Stores

    View full-size slide

  22. Themable, Brandable

    View full-size slide

  23. ...or native if you want
    http://taitems.github.com/iOS-
    Inspired-jQuery-Mobile-Theme/

    View full-size slide

  24. Pretty cool.

    View full-size slide

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

    View full-size slide

  26. Getting Started
    Developer accessibility

    View full-size slide

  27. Make a regular website
    1
    STEP

    View full-size slide




  28. Welcome!


    Welcome!
    Send me
    a note!


    View full-size slide

  29. Add jQuery Mobile
    2
    STEP

    View full-size slide




  30. My Web App
    body { text-align: center; }






    Welcome to my Site!
    Contact


    View full-size slide




  31. My Web App
    body { text-align: center; }






    Welcome to my Site!
    Contact


    View full-size slide

  32. Automagic-ness
    Ajaxify links + forms = transitions
    Enhance all form elements
    Wrap contents a ‘page’ container *

    View full-size slide

  33. Data- attributes
    Easy config in HTML

    View full-size slide

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

    View full-size slide

  35. Links, Ajaxified
    Link

    View full-size slide

  36. Listen, intercept, handle w/ Ajax
    products.html

    TAP

    View full-size slide

  37. Listen, intercept, handle w/ Ajax
    products.html

    TAP

    View full-size slide

  38. Single vs. multiple
    One page per HTML doc
    OR
    Multiple page containers
    within a single HTML doc

    View full-size slide

  39. Pre-load
    data-prefetch="true">Link

    View full-size slide

  40. Transitions
    data-transition="flip">Link

    View full-size slide

  41. Transitions
    data-transition="flip">Link

    View full-size slide

  42. Dialog
    data-rel="dialog">Link

    View full-size slide

  43. Button
    data-role="button">Button

    View full-size slide

  44. Icon
    data-role="button" data-icon="star">
    Button

    View full-size slide

  45. Theme swatch
    data-role="button" data-theme="b">
    Button

    View full-size slide


  46. Products
    Services
    About us
    Contact

    A Regular UL

    View full-size slide

  47. Basic unordered list

    View full-size slide


  48. Products
    Services
    About us
    Contact

    Add role

    View full-size slide

  49. Read-only listview

    View full-size slide


  50. Products
    Services
    About us
    Contact

    Add links

    View full-size slide

  51. Linked listview

    View full-size slide

  52. data-inset="true">
    Products
    Services
    About us
    Contact

    Filter + inset

    View full-size slide

  53. List with links

    View full-size slide

  54. Auto enhanced

    View full-size slide

  55. Search Input:
    label>
    id="search" value="" data-role="none" />
    Opt out

    View full-size slide

  56. class="ui-hidden-accessible">Search
    Input:
    id="search" value="" data-role="none" />
    Hide labels accessibly

    View full-size slide

  57. Page regions

    View full-size slide

  58. Anatomy of a page
    header
    footer
    content

    View full-size slide



  59. ...
    ...
    ...


    Page sections

    View full-size slide


  60. Nothing at all.

    What’s required?

    View full-size slide



  61. Nothing at all.


    We add this for you

    View full-size slide




  62. Nothing at all.



    Want some padding?

    View full-size slide



  63. ...
    ...
    ...


    Toolbars

    View full-size slide

  64. Taking it further

    View full-size slide

  65. Coming soon
    1.1 late February

    View full-size slide

  66. New loader design

    View full-size slide

  67. Transition re-vamp

    View full-size slide

  68. Default: fade
    Fail 3D transform test = fade ONLY (Android 2.x)

    View full-size slide

  69. Chrome will save us!

    View full-size slide

  70. Chrome will save us!

    View full-size slide

  71. True fixed toolbars

    View full-size slide

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

    View full-size slide

  73. ...with native scrolling
    (fall back to scrolling bars with the page)

    View full-size slide

  74. Forms in bars

    View full-size slide

  75. forms: data-mini

    View full-size slide

  76. ...buttons too

    View full-size slide

  77. slider: data-highlight

    View full-size slide

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

    View full-size slide

  79. iOS orientation bug

    View full-size slide

  80. touchOverflow
    no more

    View full-size slide

  81. Preview
    jquerymobile.com/test

    View full-size slide

  82. What's next?
    1.2 and beyond

    View full-size slide

  83. Download builder

    View full-size slide

  84. Overflow regions

    View full-size slide

  85. Responsive layouts

    View full-size slide

  86. Ecosystem
    Tools & Resources

    View full-size slide

  87. Adobe CS 5.5

    View full-size slide

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

    View full-size slide

  89. Resources
    www.jquerymobile.com/resources

    View full-size slide

  90. Awesome sponsors
    filament group

    View full-size slide

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

    View full-size slide

  92. @jquerymobile
    Stay in the loop
    jquerymobile.com/blog

    View full-size slide

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

    View full-size slide

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

    View full-size slide