Stephen Gilboy presented on creating web-based mobile apps with ASP.NET, HTML5, and jQuery Mobile. He discussed how jQuery Mobile simplifies creating mobile web apps that work across platforms by handling page transitions and responsive design. He demonstrated consuming JSON data with jQuery templating to populate pages, theming apps from the web.config, and going native with PhoneGap. The presentation provided an overview of building robust mobile apps using existing web development skills.

1. Slides: http://bit.ly/fladotnet_03_06
Going Mobile
Creating Web-based apps with ASP.NET, HTML5 and jQuery Mobile

2. Slides: http://bit.ly/fladotnet_03_06
Who Am I ?
Stephen Gilboy
• AuctionAnything.com
• ASP.NET/MS SQL
• jQuery/JavaScript
• Mobile Developer
• @MorningZ

3. Slides: http://bit.ly/fladotnet_03_06
Mobile Market

4. Slides: http://bit.ly/fladotnet_03_06
Let’s Go Mobile!
If we have time, we’ll talk about
going Native using Abode’s PhoneGap

5. Slides: http://bit.ly/fladotnet_03_06
Web Application

6. Slides: http://bit.ly/fladotnet_03_06
jQuery Mobile
http://www.jquerymobile.com
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
themeable design.

7. Slides: http://bit.ly/fladotnet_03_06
Platform Support
http://jquerymobile.com/original-graded-browser-matrix/

8. Slides: http://bit.ly/fladotnet_03_06
Anatomy of a “Page”
A page in jQuery Mobile (jQM) is <div> on
a single generated HTML page, think of it
like a stack of cards.
jQM takes care of the “stack” and the
page transitions automatically.
“data” properties define the jQM objects
<div id=“Home” data-role=“page”>

9. Slides: http://bit.ly/fladotnet_03_06
Demo Basic Page

10. Slides: http://bit.ly/fladotnet_03_06
Theme-able from Web.Config
Use a custom base class to be able to set
an “app wide” theme to your project
http://www.4guysfromrolla.com/articles/041305-1.aspx

11. Slides: http://bit.ly/fladotnet_03_06
Demo Base Class Theme
and more jQuery Mobile

12. Slides: http://bit.ly/fladotnet_03_06
Consuming data via JSON
Using the NewtonSoft JSON.Net Library, turn .NET objects
into JavaScript-consumable objects
http://james.newtonking.com/pages/json-net.aspx

13. Slides: http://bit.ly/fladotnet_03_06
Demo JSON.Net

14. Slides: http://bit.ly/fladotnet_03_06
JSON --> HTML
Using Microsoft’s jQuery Templating, turn the JSON into
HTML on your page in one single line of JavaScript
http://api.jquery.com/jquery.tmpl/

15. Slides: http://bit.ly/fladotnet_03_06
Demo Templating

16. Slides: http://bit.ly/fladotnet_03_06
Wrap Up
• Using your existing web skills,
you can create a robust mobile
application.
• jQuery Mobile does a lot of the
heavy lifting for you, simply
define some properties on the
DOM objects and jQuery takes
care of the rest !

17. Slides: http://bit.ly/fladotnet_03_06
Helpful Links
jQuery Mobile Docs and Demos
http://jquerymobile.com/demos/1.0.1/
jQuery Mobile Docs and Demos (upcoming functionality)
http://jquerymobile.com/demos/test/
James Newton-King’s JSON.Net library
http://james.newtonking.com/pages/json-net.aspx
28 HTML5 Features and Techniques (more “general” web stuff)
http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/

18. Slides: http://bit.ly/fladotnet_03_06
Contacting Me
• Email:
sgilboy@auctionanything.com
morningz@morningz.com
• LinkedIn:
morningz@morningz.com
• Twitter:
@MorningZ
• Link to this content:
http://bit.ly/fladotnet_03_06

19. Slides: http://bit.ly/fladotnet_03_06
Q&A