Beginning jQuery Mobile

1,385 views
1,305 views

Published on

Beginning jQuery Mobile presentation to jQuery LA on 28 August 2012.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,385
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
37
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Yes - blackberry use webkit too. Microsoft is the lone hold out\nImportant to note that webkit is not an open source browser, \nbut an open source browser engine kit. \nSafari and Chrome are not identical.\n
  • Test, test, test.\nAnalogs are a convenience tool but not a substitute for device testing. \n(turn phone side ways)\n
  • JavaScript is important to note because it explains a lot of its shortcomings.\nAll of these tools are free!\n
  • Very similar to WEINRE in function. I thought it was WEINRE version 2.0 or something at first\n
  • This is a must have if you are supporting the iPhone!\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Beginning jQuery Mobile

    1. 1. Beginning jQuery Mobile or Enough to Get You Started,but not Enough to Make You Dangerous
    2. 2. Who Am I?I am a Microsoft Certified Solution Developerand I’ve been developing software since 1979.Since 2009, I have been focused on developingmobile applications, for  iPhone, Android,Windows Phone 7, and the mobile web.
    3. 3. What We Won’t Cover• The Server Side• HTML5 in Depth• Validation• Device Apps
    4. 4. What We Will Cover• jQuery Mobile Intro.• How it Works• Form Elements• List Magic• Multi-Page Apps• Events
    5. 5. What We Will Cover• The Kernel• The ThemeRoller• Debugging• Performance Tips• Summary• Links
    6. 6. Quick Intro to jQuery MobileA unified, HTML5-based user interface systemfor all popular mobile device platforms, built onthe rock-solid jQuery and jQuery UIfoundation. Its lightweight code is built withprogressive enhancement, and has a flexible,easily theme-able design.
    7. 7. Demo #1
    8. 8. Page Structure• Header• Footer• Content Area
    9. 9. Header• Page Title• Left Button• Right Button
    10. 10. Footer• Title• Buttons
    11. 11. Content AreaThis is where your stuff goes.
    12. 12. How It Works• Dynamic DOM Manipulation• HTML5 Pseudo-Attributes• There is no free lunch
    13. 13. Dynamic DOM Manipulation• Show the Original Markup• Show the “Annotated” Markup
    14. 14. HTML5 Pseudo- Attributes• JQM Uses Pseudo-Attributes (data-)• Standard Browser Behavior - Ignore Unknown Attributes• Allows for Some Functionality on low-end browsers
    15. 15. Form Elements (aka widgets)• buttons• sliders• radio buttons• checkboxes• select menus• etc.
    16. 16. Lists• Basic Lists• Nested Lists• List Dividers• Split Lists• etc.
    17. 17. Multi-Page Apps• basic setup• transitions• passing data between pages
    18. 18. Events
    19. 19. Touch• tap• taphold• swipe• swipeleft• swiperight
    20. 20. Page• Page Load• Page Change• Page Transitions• Page Initialization• Page Remove• Layout
    21. 21. Page Load• pagebeforeload• pageload• pageloadfailed
    22. 22. Page Change• pagebeforechange• pagechange• pagechangefailed
    23. 23. Page Transition• pagebeforeshow• pageshow• pagebeforehide• pagehide
    24. 24. Page Create• pagebeforecreate• pagecreate• pageinit
    25. 25. Miscellaneous• pageremove• updatelayout• orientationchange
    26. 26. PerformanceTips• Watch the size of the DOM• Selectors • Narrow Them • Cache Them• Reference the active Page
    27. 27. Debugging• What’s the Problem?• Analogues• WEINRE & Adobe Shadow• iWebInspector• Opera Mobile Emulator
    28. 28. AnaloguesIn biochemistry, an analog is a substance thatis similar, but not identical, to another.For us, it is a browser that is similar, but notidentical, to the one we wish to test.
    29. 29. Analogues• iPhone - Safari• Android - Chrome• Windows Phone 7 - IE• Blackberry - Safari/Chrome
    30. 30. AnaloguesDon’t assume that if it works on the analog,it will work on the device. Always test on adevice.
    31. 31. WEINRE• Created by Patrick Mueller in JavaScript• WEb INspector REmote (pronounced like winery)• WebKit Only! (It uses built in hooks)• Allows for inspection of HTML/CSS• Remote console.log• NOT A DEBUGGER
    32. 32. Adobe Shadow• Chrome Extension + iOS app & Android app• WEINRE with a better UI• Inspection of HTML/CSS• Remote console.log• NOT A DEBUGGER
    33. 33. iWebInspector• Runs only on the iOS Simulator• Inspection of HTML/CSS• Remote console.log• True Remote Debugging
    34. 34. Opera Mobile Emulator• Runs using desktop Opera & Opera Mobile or Opera Mobile Emulator• Inspection of HTML/CSS• Remote console.log• True Remote Debugger
    35. 35. Sencha Touch 2.0
    36. 36. Sencha Touch 2.0<!DOCTYPE html><html><head> <title>Hello World</title> <script src="lib/touch/sencha-touch.js" type="text/javascript"></script> <script src="app/app.js" type="text/javascript"></script> <link href="lib/touch/resources/css/sencha-touch.css"rel="stylesheet" type="text/css" /></head><body></body></html>
    37. 37. Sencha Touch 2.0new Ext.Application({ launch: function() { new Ext.Panel({ fullscreen: true, dockedItems: [{xtype:toolbar, title:My First App}], layout: fit, styleHtmlContent: true, html: <h2>Hello World!</h2>I did it! }); }});
    38. 38. jQuery Mobile...• is free and open source• uses regular web programing paradigms• is easy
    39. 39. Useful URLs• http://jquerymobile.com/• http://www.JSLint.com• http://www.JSHint.com• http://people.apache.org/~pmuellr/weinre/ docs/1.x/1.5.0/
    40. 40. Useful URLs• http://labs.adobe.com/technologies/shadow/• http://www.iwebinspector.com/• http://www.opera.com/developer/tools/ mobile/
    41. 41. Books• jQuery Mobile Jon Reid Sebastopol, CA: O’Reilly Media Inc., 2011• Master Mobile Web Apps with jQuery Mobile 2nd ed. Matt Doyle Brighton, UK: Elated Communications Ltd, 2011

    ×