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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Going Mobile

513

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
513
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

×