Your SlideShare is downloading. ×
0
Quick & Dirty              Mobile Web with              jQuery Mobile              TROY MILES - ROCKNCODER@GMAIL.COMSaturd...
SponsorsSaturday, November 10, 12
Our Agenda           3Saturday, November 10, 12
Our Agenda                   3                 Why Mobile Web?Saturday, November 10, 12
Our Agenda                   3              Why Mobile Web?              Why jQuery Mobile?Saturday, November 10, 12
Our Agenda                                  3              Why Mobile Web?              Why jQuery Mobile?             ...
Our Agenda                                  3              Why Mobile Web?              Why jQuery Mobile?             ...
Our Agenda                                     3                 Why Mobile Web?                 Why jQuery Mobile?     ...
Our Agenda                                     3                 Why Mobile Web?                 Why jQuery Mobile?     ...
Our Agenda                                     3                 Why Mobile Web?                 Why jQuery Mobile?     ...
Why Mobile Web?      4Saturday, November 10, 12
Why Mobile Web?                        4                 Mobile is Where Growth IsSaturday, November 10, 12
Why Mobile Web?                                                4              Mobile is Where Growth Is              20%...
Why Mobile Web?                                                4              Mobile is Where Growth Is              20%...
Why Mobile Web?                                                4              Mobile is Where Growth Is              20%...
Why Mobile Web?                                                                 4              Mobile is Where Growth Is ...
Why Mobile Web?                                                                    4              Mobile is Where Growth ...
Why Mobile Web?                                                                    4              Mobile is Where Growth ...
What is jQuery Mobile?                                                          5             A unified, HTML5-based user i...
Why jQuery Mobile?   6Saturday, November 10, 12
Why jQuery Mobile?    6                 Its FreeSaturday, November 10, 12
Why jQuery Mobile?          6              Its Free              Its Easy to LearnSaturday, November 10, 12
Why jQuery Mobile?          6              Its Free              Its Easy to Learn              It Extends HTML5Saturda...
Why jQuery Mobile?                            6              Its Free              Its Easy to Learn              It Ex...
Why jQuery Mobile?                               6                 Its Free                 Its Easy to Learn           ...
Why jQuery Mobile?                               6                 Its Free                 Its Easy to Learn           ...
4 Ways to Add Mobile   7Saturday, November 10, 12
4 Ways to Add Mobile                                     7                 Have Two Separate Sites                 Have ...
Have Two Separate Sites   8Saturday, November 10, 12
Have Two Separate Sites    8                 Easy To StartSaturday, November 10, 12
Have Two Separate Sites                                       8              Easy To Start              Difficult to Sha...
Have Two Separate Sites                                       8              Easy To Start              Difficult to Sha...
Have Two Separate Sites                                       8              Easy To Start              Difficult to Sha...
Have Two Separate Sites                                       8              Easy To Start              Difficult to Sha...
Have Two Separate Sites                                       8              Easy To Start              Difficult to Sha...
Have Two Separate Sites                                       8              Easy To Start              Difficult to Sha...
Have Single Site, With Separate   9       ControllersSaturday, November 10, 12
Have Single Site, With Separate                                         9       Controllers                 The Desktop &...
Have Single Site, With Separate                                      9       Controllers              The Desktop & Mobil...
Have Single Site, With Separate                                      9       Controllers              The Desktop & Mobil...
Have Single Site, With Separate                                      9       Controllers              The Desktop & Mobil...
Single Site, With Separate Views   10Saturday, November 10, 12
Single Site, With Separate Views                               10                 Code in the Controller Decides Which Vi...
Single Site, With Separate Views                            10              Code in the Controller Decides Which View to ...
Single Site, With Separate Views                            10              Code in the Controller Decides Which View to ...
Single Site, With Separate Views                            10              Code in the Controller Decides Which View to ...
Single Site, With Separate Views                                                10              Code in the Controller De...
Responsive Design    11Saturday, November 10, 12
Responsive Design                                           11                 A Single Site With Single Controller and V...
Responsive Design                                        11              A Single Site With Single Controller and Views  ...
Responsive Design                                        11              A Single Site With Single Controller and Views  ...
Responsive Design                                        11              A Single Site With Single Controller and Views  ...
Responsive Design                                           11                 A Single Site With Single Controller and V...
Responsive Design                                           11                 A Single Site With Single Controller and V...
Responsive Design                                                              11                 A Single Site With Sing...
Responsive Design Sites   12Saturday, November 10, 12
Responsive Design Sites                  12              http://bostonglobe.com/              http://2012.inspireconf.co...
Detecting A Mobile Device   13Saturday, November 10, 12
Detecting A Mobile Device                                                   13                 Nearly All Mobile Device D...
Detecting A Mobile Device                                                  13              Nearly All Mobile Device Detec...
Detecting A Mobile Device                                                      13              Nearly All Mobile Device D...
Detecting A Mobile Device                                                      13              Nearly All Mobile Device D...
Detecting A Mobile Device                                                         13                 Nearly All Mobile De...
Detecting A Mobile Device                                                         13                 Nearly All Mobile De...
Detecting A Mobile Device   14Saturday, November 10, 12
Detecting A Mobile Device                            14                 A website named: Detect Mobile BrowsersSaturday, ...
Detecting A Mobile Device                                      14              A website named: Detect Mobile Browsers   ...
Detecting A Mobile Device                                                       14              A website named: Detect M...
Detecting A Mobile Device                                                       14              A website named: Detect M...
Lets Get Dirty!     15Saturday, November 10, 12
Lets Get Dirty!                15                 jQuery At A GlanceSaturday, November 10, 12
Lets Get Dirty!             15              jQuery At A Glance              Make CopiesSaturday, November 10, 12
Lets Get Dirty!             15              jQuery At A Glance              Make Copies              Add Detection Code...
Lets Get Dirty!             15              jQuery At A Glance              Make Copies              Add Detection Code...
Lets Get Dirty!                               15                 jQuery At A Glance                 Make Copies         ...
Lets Get Dirty!                               15                 jQuery At A Glance                 Make Copies         ...
Lets Get Dirty!                               15                 jQuery At A Glance                 Make Copies         ...
Lets Get Dirty!                               15                 jQuery At A Glance                 Make Copies         ...
jQuery Mobile At A Glance   16Saturday, November 10, 12
jQuery Mobile At A Glance                             16                 jQuery Uses Attributes to Enhance MarkupSaturday...
jQuery Mobile At A Glance                                16              jQuery Uses Attributes to Enhance Markup        ...
jQuery Mobile At A Glance                                      16              jQuery Uses Attributes to Enhance Markup  ...
jQuery Mobile At A Glance                                       16              jQuery Uses Attributes to Enhance Markup ...
jQuery Mobile At A Glance                                          16                 jQuery Uses Attributes to Enhance M...
17              Let’s Get Dirty!Saturday, November 10, 12
Make Copies          18Saturday, November 10, 12
Make Copies                                              18                 Copy the HomeController to MobileControllerSa...
Make Copies                                           18              Copy the HomeController to MobileController        ...
Make Copies                                           18              Copy the HomeController to MobileController        ...
Add Detection Code   19Saturday, November 10, 12
Add Detection Code                 19                 Create a Named CommonSaturday, November 10, 12
Add Detection Code                                    19              Create a Named Common              Create a Class ...
Add Detection Code                                                        19              Create a Named Common          ...
Add Detection Code                                                        19              Create a Named Common          ...
Add Detection Code                                                            19              Create a Named Common      ...
Add Detection Code                                                          19              Create a Named Common        ...
Test It              20Saturday, November 10, 12
Test It                                                              20                 Our Website Should Now Be Able To...
Test It                                                           20              Our Website Should Now Be Able To Detec...
Test It                                                               20              Our Website Should Now Be Able To D...
Test It                                                               20              Our Website Should Now Be Able To D...
Test It                                                                  20                 Our Website Should Now Be Abl...
Test It                                                                  20                 Our Website Should Now Be Abl...
Add Mobile ViewPort and Meta-tags   21Saturday, November 10, 12
Add Mobile ViewPort and Meta-tags                     21                 Open Up the file _MobileLayoutPage.cshtmlSaturday...
Add Mobile ViewPort and Meta-tags                  21              Open Up the file _MobileLayoutPage.cshtml             ...
Add Mobile ViewPort and Meta-tags                  21              Open Up the file _MobileLayoutPage.cshtml             ...
Add Mobile ViewPort and Meta-tags                            21              Open Up the file _MobileLayoutPage.cshtml    ...
Add jQuery Mobile Files   22Saturday, November 10, 12
Add jQuery Mobile Files        22                 Add the CSS FilesSaturday, November 10, 12
Add jQuery Mobile Files        22              Add the CSS Files              Add the Script FilesSaturday, November 10,...
Convert Our Index Page   23Saturday, November 10, 12
Convert Our Index Page                       23                 Convert the <table> into a <ul>Saturday, November 10, 12
Convert Our Index Page                                         23              Convert the <table> into a <ul>           ...
Convert Our Index Page                                         23              Convert the <table> into a <ul>           ...
Convert Our Create Page   24Saturday, November 10, 12
Convert Our Create Page                  24                 Use Hints Instead of LabelsSaturday, November 10, 12
Convert Our Create Page               24              Use Hints Instead of Labels              Use JQM ButtonsSaturday, ...
Convert Our Create Page               24              Use Hints Instead of Labels              Use JQM Buttons          ...
Next Steps           25Saturday, November 10, 12
Next Steps                               25                 Convert the Remaining ViewsSaturday, November 10, 12
Next Steps                             25              Convert the Remaining Views              Replace HTML Pages With ...
Next Steps                             25              Convert the Remaining Views              Replace HTML Pages With ...
Next Steps                                                         25              Convert the Remaining Views           ...
Next Steps                                                       25              Convert the Remaining Views             ...
My Blog                                         26                  http://therockncoder.blogspot.com/Saturday, November 1...
Please Rate My Talk                    27                   http://spkr8.com/t/18331Saturday, November 10, 12
Summary                                        28                 Why Mobile Web?                 Why jQuery Mobile?    ...
Resources                                                                   29                 jQuery Mobile             ...
FeedbackSaturday, November 10, 12
Upcoming SlideShare
Loading in...5
×

Quick & Dirty Mobile Web with jQuery Mobile

3,576

Published on

Want to make your site support the mobile web quickly? In this talk I show how to quickly add mobile to an existing website with jQuery Mobile. I also cover an easy way to do mobile device detection and redirection.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,576
On Slideshare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
122
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Quick & Dirty Mobile Web with jQuery Mobile"

  1. 1. Quick & Dirty Mobile Web with jQuery Mobile TROY MILES - ROCKNCODER@GMAIL.COMSaturday, November 10, 12
  2. 2. SponsorsSaturday, November 10, 12
  3. 3. Our Agenda 3Saturday, November 10, 12
  4. 4. Our Agenda 3  Why Mobile Web?Saturday, November 10, 12
  5. 5. Our Agenda 3  Why Mobile Web?  Why jQuery Mobile?Saturday, November 10, 12
  6. 6. Our Agenda 3  Why Mobile Web?  Why jQuery Mobile?  4 Ways to Add Mobile to Your SiteSaturday, November 10, 12
  7. 7. Our Agenda 3  Why Mobile Web?  Why jQuery Mobile?  4 Ways to Add Mobile to Your Site  Detecting A Mobile DeviceSaturday, November 10, 12
  8. 8. Our Agenda 3  Why Mobile Web?  Why jQuery Mobile?  4 Ways to Add Mobile to Your Site  Detecting A Mobile Device  Let’s Get Dirty!Saturday, November 10, 12
  9. 9. Our Agenda 3  Why Mobile Web?  Why jQuery Mobile?  4 Ways to Add Mobile to Your Site  Detecting A Mobile Device  Let’s Get Dirty!  Next StepsSaturday, November 10, 12
  10. 10. Our Agenda 3  Why Mobile Web?  Why jQuery Mobile?  4 Ways to Add Mobile to Your Site  Detecting A Mobile Device  Let’s Get Dirty!  Next Steps  SummarySaturday, November 10, 12
  11. 11. Why Mobile Web? 4Saturday, November 10, 12
  12. 12. Why Mobile Web? 4  Mobile is Where Growth IsSaturday, November 10, 12
  13. 13. Why Mobile Web? 4  Mobile is Where Growth Is  20% of Internet Users in the US & UK are Mobile OnlySaturday, November 10, 12
  14. 14. Why Mobile Web? 4  Mobile is Where Growth Is  20% of Internet Users in the US & UK are Mobile Only  In Some African & Asian Markets it is Over 50%Saturday, November 10, 12
  15. 15. Why Mobile Web? 4  Mobile is Where Growth Is  20% of Internet Users in the US & UK are Mobile Only  In Some African & Asian Markets it is Over 50%  Twitter began Showing Ads in April 2012Saturday, November 10, 12
  16. 16. Why Mobile Web? 4  Mobile is Where Growth Is  20% of Internet Users in the US & UK are Mobile Only  In Some African & Asian Markets it is Over 50%  Twitter began Showing Ads in April 2012  Mobile is Now Responsible for more than 50% of its Ad RevenueSaturday, November 10, 12
  17. 17. Why Mobile Web? 4  Mobile is Where Growth Is  20% of Internet Users in the US & UK are Mobile Only  In Some African & Asian Markets it is Over 50%  Twitter began Showing Ads in April 2012  Mobile is Now Responsible for more than 50% of its Ad Revenue  A Campaign with P.F.Chang got 1 million clicks in its First 4 DaysSaturday, November 10, 12
  18. 18. Why Mobile Web? 4  Mobile is Where Growth Is  20% of Internet Users in the US & UK are Mobile Only  In Some African & Asian Markets it is Over 50%  Twitter began Showing Ads in April 2012  Mobile is Now Responsible for more than 50% of its Ad Revenue  A Campaign with P.F.Chang got 1 million clicks in its First 4 Days  70% of Those Clicks Came From MobileSaturday, November 10, 12
  19. 19. What is jQuery Mobile? 5 A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily theme-able design.  Requires jQuery.Saturday, November 10, 12
  20. 20. Why jQuery Mobile? 6Saturday, November 10, 12
  21. 21. Why jQuery Mobile? 6  Its FreeSaturday, November 10, 12
  22. 22. Why jQuery Mobile? 6  Its Free  Its Easy to LearnSaturday, November 10, 12
  23. 23. Why jQuery Mobile? 6  Its Free  Its Easy to Learn  It Extends HTML5Saturday, November 10, 12
  24. 24. Why jQuery Mobile? 6  Its Free  Its Easy to Learn  It Extends HTML5  It Supports a Wide Range of DevicesSaturday, November 10, 12
  25. 25. Why jQuery Mobile? 6  Its Free  Its Easy to Learn  It Extends HTML5  It Supports a Wide Range of Devices  It is Not Feature RichSaturday, November 10, 12
  26. 26. Why jQuery Mobile? 6  Its Free  Its Easy to Learn  It Extends HTML5  It Supports a Wide Range of Devices  It is Not Feature Rich  It is Not PerformantSaturday, November 10, 12
  27. 27. 4 Ways to Add Mobile 7Saturday, November 10, 12
  28. 28. 4 Ways to Add Mobile 7  Have Two Separate Sites  Have Single Site, With Separate Controllers  Single Site, With Separate Views  Responsive Design  And yes, there are other waysSaturday, November 10, 12
  29. 29. Have Two Separate Sites 8Saturday, November 10, 12
  30. 30. Have Two Separate Sites 8  Easy To StartSaturday, November 10, 12
  31. 31. Have Two Separate Sites 8  Easy To Start  Difficult to Share Code and Resources Between SitesSaturday, November 10, 12
  32. 32. Have Two Separate Sites 8  Easy To Start  Difficult to Share Code and Resources Between Sites  Quickly Can Become a Maintenance MonsterSaturday, November 10, 12
  33. 33. Have Two Separate Sites 8  Easy To Start  Difficult to Share Code and Resources Between Sites  Quickly Can Become a Maintenance Monster  Two Sites to DeploySaturday, November 10, 12
  34. 34. Have Two Separate Sites 8  Easy To Start  Difficult to Share Code and Resources Between Sites  Quickly Can Become a Maintenance Monster  Two Sites to Deploy  Two Databases to DeploySaturday, November 10, 12
  35. 35. Have Two Separate Sites 8  Easy To Start  Difficult to Share Code and Resources Between Sites  Quickly Can Become a Maintenance Monster  Two Sites to Deploy  Two Databases to Deploy  Two Sites to MaintainSaturday, November 10, 12
  36. 36. Have Two Separate Sites 8  Easy To Start  Difficult to Share Code and Resources Between Sites  Quickly Can Become a Maintenance Monster  Two Sites to Deploy  Two Databases to Deploy  Two Sites to Maintain  Two Sites to EnhanceSaturday, November 10, 12
  37. 37. Have Single Site, With Separate 9 ControllersSaturday, November 10, 12
  38. 38. Have Single Site, With Separate 9 Controllers  The Desktop & Mobile Sites Each Have Their Own ControllersSaturday, November 10, 12
  39. 39. Have Single Site, With Separate 9 Controllers  The Desktop & Mobile Sites Each Have Their Own Controllers  Allows for Some Sharing of ResourcesSaturday, November 10, 12
  40. 40. Have Single Site, With Separate 9 Controllers  The Desktop & Mobile Sites Each Have Their Own Controllers  Allows for Some Sharing of Resources  Only One DeploymentSaturday, November 10, 12
  41. 41. Have Single Site, With Separate 9 Controllers  The Desktop & Mobile Sites Each Have Their Own Controllers  Allows for Some Sharing of Resources  Only One Deployment  Bugs in the Controller or ViewSaturday, November 10, 12
  42. 42. Single Site, With Separate Views 10Saturday, November 10, 12
  43. 43. Single Site, With Separate Views 10  Code in the Controller Decides Which View to ShowSaturday, November 10, 12
  44. 44. Single Site, With Separate Views 10  Code in the Controller Decides Which View to Show  High Degree of Code SharingSaturday, November 10, 12
  45. 45. Single Site, With Separate Views 10  Code in the Controller Decides Which View to Show  High Degree of Code Sharing  Users Get Locked into an ExperienceSaturday, November 10, 12
  46. 46. Single Site, With Separate Views 10  Code in the Controller Decides Which View to Show  High Degree of Code Sharing  Users Get Locked into an Experience  Users Hate Getting StuckSaturday, November 10, 12
  47. 47. Single Site, With Separate Views 10  Code in the Controller Decides Which View to Show  High Degree of Code Sharing  Users Get Locked into an Experience  Users Hate Getting Stuck  Users Sometimes Want to View the Full Site on Their Smart PhoneSaturday, November 10, 12
  48. 48. Responsive Design 11Saturday, November 10, 12
  49. 49. Responsive Design 11  A Single Site With Single Controller and ViewsSaturday, November 10, 12
  50. 50. Responsive Design 11  A Single Site With Single Controller and Views  Site Uses CSS to Dynamically Resize ItselfSaturday, November 10, 12
  51. 51. Responsive Design 11  A Single Site With Single Controller and Views  Site Uses CSS to Dynamically Resize Itself  When Done Right It Looks AmazingSaturday, November 10, 12
  52. 52. Responsive Design 11  A Single Site With Single Controller and Views  Site Uses CSS to Dynamically Resize Itself  When Done Right It Looks Amazing  Difficult To Do RightSaturday, November 10, 12
  53. 53. Responsive Design 11  A Single Site With Single Controller and Views  Site Uses CSS to Dynamically Resize Itself  When Done Right It Looks Amazing  Difficult To Do Right  Has Performance IssuesSaturday, November 10, 12
  54. 54. Responsive Design 11  A Single Site With Single Controller and Views  Site Uses CSS to Dynamically Resize Itself  When Done Right It Looks Amazing  Difficult To Do Right  Has Performance Issues  The Scaling Is Done on the ClientSaturday, November 10, 12
  55. 55. Responsive Design 11  A Single Site With Single Controller and Views  Site Uses CSS to Dynamically Resize Itself  When Done Right It Looks Amazing  Difficult To Do Right  Has Performance Issues  The Scaling Is Done on the Client  Entire Site Sent To The Client, But Much of it May Not Be UsedSaturday, November 10, 12
  56. 56. Responsive Design Sites 12Saturday, November 10, 12
  57. 57. Responsive Design Sites 12  http://bostonglobe.com/  http://2012.inspireconf.com/  http://forefathersgroup.com/  http://www.thesearethings.com/Saturday, November 10, 12
  58. 58. Detecting A Mobile Device 13Saturday, November 10, 12
  59. 59. Detecting A Mobile Device 13  Nearly All Mobile Device Detection Algorithms Rely on the User AgentSaturday, November 10, 12
  60. 60. Detecting A Mobile Device 13  Nearly All Mobile Device Detection Algorithms Rely on the User Agent  The User Agent is a String Sent With Your Browser’s HTTP RequestSaturday, November 10, 12
  61. 61. Detecting A Mobile Device 13  Nearly All Mobile Device Detection Algorithms Rely on the User Agent  The User Agent is a String Sent With Your Browser’s HTTP Request  Information in the User Agent Identifies the Device, Browser, Version Numbers, etc.Saturday, November 10, 12
  62. 62. Detecting A Mobile Device 13  Nearly All Mobile Device Detection Algorithms Rely on the User Agent  The User Agent is a String Sent With Your Browser’s HTTP Request  Information in the User Agent Identifies the Device, Browser, Version Numbers, etc.  There are businesses which provide a service to map User Agents to devicesSaturday, November 10, 12
  63. 63. Detecting A Mobile Device 13  Nearly All Mobile Device Detection Algorithms Rely on the User Agent  The User Agent is a String Sent With Your Browser’s HTTP Request  Information in the User Agent Identifies the Device, Browser, Version Numbers, etc.  There are businesses which provide a service to map User Agents to devices  They cost anywhere from $40 to $400 a month and moreSaturday, November 10, 12
  64. 64. Detecting A Mobile Device 13  Nearly All Mobile Device Detection Algorithms Rely on the User Agent  The User Agent is a String Sent With Your Browser’s HTTP Request  Information in the User Agent Identifies the Device, Browser, Version Numbers, etc.  There are businesses which provide a service to map User Agents to devices  They cost anywhere from $40 to $400 a month and more  Luckily We Have a Free Way...Saturday, November 10, 12
  65. 65. Detecting A Mobile Device 14Saturday, November 10, 12
  66. 66. Detecting A Mobile Device 14  A website named: Detect Mobile BrowsersSaturday, November 10, 12
  67. 67. Detecting A Mobile Device 14  A website named: Detect Mobile Browsers  It Use Regular Expressions to Detect a Mobile DeviceSaturday, November 10, 12
  68. 68. Detecting A Mobile Device 14  A website named: Detect Mobile Browsers  It Use Regular Expressions to Detect a Mobile Device  It Provides Versions of Its Algorithm for: Apache, ASP, ASP.NET, ColdFusion, C#, IIS, JSP, JavaScript, Lasso, nginx, node.js, and moreSaturday, November 10, 12
  69. 69. Detecting A Mobile Device 14  A website named: Detect Mobile Browsers  It Use Regular Expressions to Detect a Mobile Device  It Provides Versions of Its Algorithm for: Apache, ASP, ASP.NET, ColdFusion, C#, IIS, JSP, JavaScript, Lasso, nginx, node.js, and more  The Algorithm gets Updated Every Few MonthsSaturday, November 10, 12
  70. 70. Lets Get Dirty! 15Saturday, November 10, 12
  71. 71. Lets Get Dirty! 15  jQuery At A GlanceSaturday, November 10, 12
  72. 72. Lets Get Dirty! 15  jQuery At A Glance  Make CopiesSaturday, November 10, 12
  73. 73. Lets Get Dirty! 15  jQuery At A Glance  Make Copies  Add Detection CodeSaturday, November 10, 12
  74. 74. Lets Get Dirty! 15  jQuery At A Glance  Make Copies  Add Detection Code  Test ItSaturday, November 10, 12
  75. 75. Lets Get Dirty! 15  jQuery At A Glance  Make Copies  Add Detection Code  Test It  Add Mobile ViewPort and Meta-tagsSaturday, November 10, 12
  76. 76. Lets Get Dirty! 15  jQuery At A Glance  Make Copies  Add Detection Code  Test It  Add Mobile ViewPort and Meta-tags  Add jQuery Mobile FilesSaturday, November 10, 12
  77. 77. Lets Get Dirty! 15  jQuery At A Glance  Make Copies  Add Detection Code  Test It  Add Mobile ViewPort and Meta-tags  Add jQuery Mobile Files  Convert Our Index PageSaturday, November 10, 12
  78. 78. Lets Get Dirty! 15  jQuery At A Glance  Make Copies  Add Detection Code  Test It  Add Mobile ViewPort and Meta-tags  Add jQuery Mobile Files  Convert Our Index Page  Convert Our Create PageSaturday, November 10, 12
  79. 79. jQuery Mobile At A Glance 16Saturday, November 10, 12
  80. 80. jQuery Mobile At A Glance 16  jQuery Uses Attributes to Enhance MarkupSaturday, November 10, 12
  81. 81. jQuery Mobile At A Glance 16  jQuery Uses Attributes to Enhance Markup  One of the Most Import Attributes is data-roleSaturday, November 10, 12
  82. 82. jQuery Mobile At A Glance 16  jQuery Uses Attributes to Enhance Markup  One of the Most Import Attributes is data-role  By default jQuery Mobile Will Use Ajax Not Page LoadSaturday, November 10, 12
  83. 83. jQuery Mobile At A Glance 16  jQuery Uses Attributes to Enhance Markup  One of the Most Import Attributes is data-role  By default jQuery Mobile Will Use Ajax Not Page Load  HTML list are Special in jQuery With Lots of FeaturesSaturday, November 10, 12
  84. 84. jQuery Mobile At A Glance 16  jQuery Uses Attributes to Enhance Markup  One of the Most Import Attributes is data-role  By default jQuery Mobile Will Use Ajax Not Page Load  HTML list are Special in jQuery With Lots of Features  jQuery Mobile is Very SemanticSaturday, November 10, 12
  85. 85. 17 Let’s Get Dirty!Saturday, November 10, 12
  86. 86. Make Copies 18Saturday, November 10, 12
  87. 87. Make Copies 18  Copy the HomeController to MobileControllerSaturday, November 10, 12
  88. 88. Make Copies 18  Copy the HomeController to MobileController  Copy _LayoutPage to _MobileLayoutPageSaturday, November 10, 12
  89. 89. Make Copies 18  Copy the HomeController to MobileController  Copy _LayoutPage to _MobileLayoutPage  Copy the ViewsSaturday, November 10, 12
  90. 90. Add Detection Code 19Saturday, November 10, 12
  91. 91. Add Detection Code 19  Create a Named CommonSaturday, November 10, 12
  92. 92. Add Detection Code 19  Create a Named Common  Create a Class Named DetectMobileBrowser.csSaturday, November 10, 12
  93. 93. Add Detection Code 19  Create a Named Common  Create a Class Named DetectMobileBrowser.cs  Create a static Method, IsMobile, With the Following Signature:Saturday, November 10, 12
  94. 94. Add Detection Code 19  Create a Named Common  Create a Class Named DetectMobileBrowser.cs  Create a static Method, IsMobile, With the Following Signature:  public static bool IsMobile(string u)Saturday, November 10, 12
  95. 95. Add Detection Code 19  Create a Named Common  Create a Class Named DetectMobileBrowser.cs  Create a static Method, IsMobile, With the Following Signature:  public static bool IsMobile(string u)  Add Call to IsMobile() to the Index Action of the HomeControllerSaturday, November 10, 12
  96. 96. Add Detection Code 19  Create a Named Common  Create a Class Named DetectMobileBrowser.cs  Create a static Method, IsMobile, With the Following Signature:  public static bool IsMobile(string u)  Add Call to IsMobile() to the Index Action of the HomeController  If Detected, Redirect to the Index Action of the MobileControllerSaturday, November 10, 12
  97. 97. Test It 20Saturday, November 10, 12
  98. 98. Test It 20  Our Website Should Now Be Able To Detect Mobile TrafficSaturday, November 10, 12
  99. 99. Test It 20  Our Website Should Now Be Able To Detect Mobile Traffic  Let’s Test ItSaturday, November 10, 12
  100. 100. Test It 20  Our Website Should Now Be Able To Detect Mobile Traffic  Let’s Test It  We Will Use the Chrome Browser With the Ultimate User Agent SwitcherSaturday, November 10, 12
  101. 101. Test It 20  Our Website Should Now Be Able To Detect Mobile Traffic  Let’s Test It  We Will Use the Chrome Browser With the Ultimate User Agent Switcher  Launch the Website, It Should Go To the Home pageSaturday, November 10, 12
  102. 102. Test It 20  Our Website Should Now Be Able To Detect Mobile Traffic  Let’s Test It  We Will Use the Chrome Browser With the Ultimate User Agent Switcher  Launch the Website, It Should Go To the Home page  Turn on the Ultimate User Agent SwitcherSaturday, November 10, 12
  103. 103. Test It 20  Our Website Should Now Be Able To Detect Mobile Traffic  Let’s Test It  We Will Use the Chrome Browser With the Ultimate User Agent Switcher  Launch the Website, It Should Go To the Home page  Turn on the Ultimate User Agent Switcher  Reload the Website, We Should Go to the Mobile Home pageSaturday, November 10, 12
  104. 104. Add Mobile ViewPort and Meta-tags 21Saturday, November 10, 12
  105. 105. Add Mobile ViewPort and Meta-tags 21  Open Up the file _MobileLayoutPage.cshtmlSaturday, November 10, 12
  106. 106. Add Mobile ViewPort and Meta-tags 21  Open Up the file _MobileLayoutPage.cshtml  Add the meta-tagsSaturday, November 10, 12
  107. 107. Add Mobile ViewPort and Meta-tags 21  Open Up the file _MobileLayoutPage.cshtml  Add the meta-tags  viewport, width=device-widthSaturday, November 10, 12
  108. 108. Add Mobile ViewPort and Meta-tags 21  Open Up the file _MobileLayoutPage.cshtml  Add the meta-tags  viewport, width=device-width  name=”apple-mobile-web-app-capable”, content=”yes”Saturday, November 10, 12
  109. 109. Add jQuery Mobile Files 22Saturday, November 10, 12
  110. 110. Add jQuery Mobile Files 22  Add the CSS FilesSaturday, November 10, 12
  111. 111. Add jQuery Mobile Files 22  Add the CSS Files  Add the Script FilesSaturday, November 10, 12
  112. 112. Convert Our Index Page 23Saturday, November 10, 12
  113. 113. Convert Our Index Page 23  Convert the <table> into a <ul>Saturday, November 10, 12
  114. 114. Convert Our Index Page 23  Convert the <table> into a <ul>  The data-role=”listview” Comes With Built In StylingSaturday, November 10, 12
  115. 115. Convert Our Index Page 23  Convert the <table> into a <ul>  The data-role=”listview” Comes With Built In Styling  Remove unnecessary elementsSaturday, November 10, 12
  116. 116. Convert Our Create Page 24Saturday, November 10, 12
  117. 117. Convert Our Create Page 24  Use Hints Instead of LabelsSaturday, November 10, 12
  118. 118. Convert Our Create Page 24  Use Hints Instead of Labels  Use JQM ButtonsSaturday, November 10, 12
  119. 119. Convert Our Create Page 24  Use Hints Instead of Labels  Use JQM Buttons  Theme ItSaturday, November 10, 12
  120. 120. Next Steps 25Saturday, November 10, 12
  121. 121. Next Steps 25  Convert the Remaining ViewsSaturday, November 10, 12
  122. 122. Next Steps 25  Convert the Remaining Views  Replace HTML Pages With AjaxSaturday, November 10, 12
  123. 123. Next Steps 25  Convert the Remaining Views  Replace HTML Pages With Ajax  Make the Site iOS FriendlySaturday, November 10, 12
  124. 124. Next Steps 25  Convert the Remaining Views  Replace HTML Pages With Ajax  Make the Site iOS Friendly  Add Home Page Icons (Android Supports These Too)Saturday, November 10, 12
  125. 125. Next Steps 25  Convert the Remaining Views  Replace HTML Pages With Ajax  Make the Site iOS Friendly  Add Home Page Icons (Android Supports These Too)  Add Splash PageSaturday, November 10, 12
  126. 126. My Blog 26 http://therockncoder.blogspot.com/Saturday, November 10, 12
  127. 127. Please Rate My Talk 27 http://spkr8.com/t/18331Saturday, November 10, 12
  128. 128. Summary 28  Why Mobile Web?  Why jQuery Mobile?  4 Ways to Add Mobile to Your Site  Detecting A Mobile Device  We Got Dirty  Next Steps  SummarySaturday, November 10, 12
  129. 129. Resources 29  jQuery Mobile http://jquerymobile.com/  jQuery Mobile ThemeRoller http://jquerymobile.com/themeroller/index.php  Detect Mobile Browsers http://detectmobilebrowsers.com/  Ultimate User Agent Switcher https://chrome.google.com/webstore/detail/ultimate-user-agent- switc/ljfpjnehmoiabkefmnjegmpdddgcdnpo  Window Resizer https://chrome.google.com/webstore/detail/window-resizer/ kkelicaakdanhinjdeammmilcgefonfhSaturday, November 10, 12
  130. 130. FeedbackSaturday, November 10, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×