Your SlideShare is downloading. ×
Going Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Going Mobile

494
views

Published on

Use your existing ASP.NET/Visual Studio skill set to go Mobile !

Use your existing ASP.NET/Visual Studio skill set to go Mobile !

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
494
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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