Mat Marquis - JQuery Mobile

2,831 views

Published on

On April 11th, 2012, Mat Marquis gave a presentation to the ABCD WWW group on An Introduction to jQuery Mobile.

Learn how to use jQuery Mobile to build dynamic HTML5-based web sites
and apps that work on all popular mobile platforms. We’ll go over the
basics of using the framework and discuss ways we can use it to create
compelling experiences that span smartphone, tablet, and desktop
devices from a single unified codebase.

Mat "Wilto" Marquis is a designer-slash-developer working at Filament
Group in Boston. Mat is a member of the jQuery Mobile team, technical
editor at A List Apart, and an active member of the open source
community. He's probably flipping out about something on Twitter as we
speak.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Mat Marquis - JQuery Mobile

  1. 1. filament groupjQuery Mobile HarvardWWW
  2. 2. Hello.Mat MarquisFilament Group Inc.
  3. 3. filament groupEngaging experiences,accessible to everyone.
  4. 4. Authors
  5. 5. Open source contributors
  6. 6. Sponsor & design lead
  7. 7. jQuery Mobile In a nutshell
  8. 8. Mobile UI framework
  9. 9. UI Elements
  10. 10. AJAX Nav
  11. 11. Project Goals No browser left behind.
  12. 12. 10+ Billion Web enabled mobile devices on the internetSource: ITU, Mark Lipacis, Morgan Stanley Research.
  13. 13. (They aren’t all iPhones)22.07 19.95 18.17 July 2011 World Mobile Browsers http://gs.statcounter.com/#mobile_browser-ww-monthly-201103-201103-bar 17.1 Opera iPhone / iPod Touch 12.3 Android Nokia BlackBerry Netfront 4.01
  14. 14. 1 codebaseAll Platforms
  15. 15. Make it workeverywhereand for everyone
  16. 16. iOS Android Blackberry WebOS WP 7/7.5 Symbian SymbianMeego/Maemo Playbook Kindle/Nook
  17. 17. Desktop too
  18. 18. 50+ devices in our lab
  19. 19. Built on standards
  20. 20. Progressive Enhancement
  21. 21. Don’t break the web.History Works Bookmark / Refresh Friendly URLS
  22. 22. Don’t break the web.PushState jquerymobile.com/test/docs/api/globalconfig.html
  23. 23. Keep it accessible
  24. 24. Touch, mouse, keyboard Touch & Mouse Events Mouse Events
  25. 25. Web to Native
  26. 26. To App Stores
  27. 27. Themable, Brandable http://jquerymobile.com/themeroller/
  28. 28. ...or native if you want http://taitems.github.com/iOS- Inspired-jQuery-Mobile-Theme/
  29. 29. Getting started withjQuery Mobile
  30. 30. Step 1.Make a regular website
  31. 31. <!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>
  32. 32. Step 2.Add jQuery Mobile
  33. 33. <!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>
  34. 34. <!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>
  35. 35. Markup config
  36. 36. Links, Ajaxified<a href="page.html">Link</a>
  37. 37. Listen, intercept, handle w/ Ajax TAP products.html <div data-role=”page”>
  38. 38. Listen, intercept, handle w/ Ajax TAP products.html <div data-role=”page”>
  39. 39. Transitions<a href="page.html"data-transition="flip">Link</a>
  40. 40. Transitions<a href="page.html"data-transition="flip">Link</a>
  41. 41. Dialog<a href="page.html"data-rel="dialog">Link</a>
  42. 42. Button<a href="page.html"data-role="button">Button</a>
  43. 43. Icon<a href="page.html"data-role="button" data-icon="star">Button</a>
  44. 44. Theme swatch<a href="page.html"data-role="button" data-theme="b">Button</a>
  45. 45. Listviews
  46. 46. A Regular UL<ul> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li></ul>
  47. 47. Basic unordered list
  48. 48. Add role<ul data-role="listview"> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li></ul>
  49. 49. Read-only listview
  50. 50. Add links<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>
  51. 51. Linked listview
  52. 52. Filter + inset<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>
  53. 53. List with links
  54. 54. Etc.
  55. 55. Forms
  56. 56. Native
  57. 57. Auto enhanced
  58. 58. Opt out <label for="search">Search Input:</label> <input type="search" name="password"id="search" value="" data-role="none" />
  59. 59. Hide accessibly <label for="search"class="ui-hidden-accessible">Search Input:</label> <input type="search" name="password"id="search" value="" data-role="none" />
  60. 60. Page regions
  61. 61. Anatomy of a page header content footer
  62. 62. Page sections<body> <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div><!-- /page --></body>
  63. 63. Metric ton ofResources
  64. 64. Adobe CS 5.5
  65. 65. Tools
  66. 66. Tools
  67. 67. Tools
  68. 68. Toolshttp://codiqa.com/jqueryuk
  69. 69. Tools
  70. 70. Books
  71. 71. Putting it all together
  72. 72. FlipPics
  73. 73. Creating Themes
  74. 74. Basic TR demo movie
  75. 75. Awesome sponsorsfilament group
  76. 76. filamentgroup.com @filamentgroup github.com/filamentgroupjquerymobile.com @jquerymobile github.com/jquery/jquery-mobile
  77. 77. Thanks!

×