going mobile
DESCRIPTION
Use your existing ASP.NET/Visual Studio skill set to go Mobile !TRANSCRIPT
Going MobileGoing Mobile
Creating Web-based apps with ASP.NET, HTML5 and jQuery MobileCreating Web-based apps with ASP.NET, HTML5 and jQuery Mobile
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Who Am I ?Who Am I ?Who Am I ?Who Am I ?
• AuctionAnything.comAuctionAnything.com• ASP.NET/MS SQLASP.NET/MS SQL• jQuery/JavaScriptjQuery/JavaScript• Mobile DeveloperMobile Developer
• @MorningZ@MorningZ
Stephen GilboyStephen GilboyStephen GilboyStephen Gilboy
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Mobile MarketMobile MarketMobile MarketMobile Market
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Let’s Go Mobile!Let’s Go Mobile!Let’s Go Mobile!Let’s Go Mobile!
If we have time, we’ll talk about going Native using Abode’s PhoneGap
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Web ApplicationWeb ApplicationWeb ApplicationWeb ApplicationSlides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
jQuery MobilejQuery MobilejQuery MobilejQuery Mobilehttp://
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.
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Platform SupportPlatform SupportPlatform SupportPlatform Supporthttp://jquerymobile.com/original-graded-browser-matrix/
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Anatomy of a “Page”Anatomy of a “Page”Anatomy of a “Page”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”>
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Demo Basic PageDemo Basic PageDemo Basic PageDemo Basic Page
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Theme-able from Theme-able from Web.ConfigWeb.Config
Theme-able from Theme-able from Web.ConfigWeb.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
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Demo Base Class ThemeDemo Base Class Themeand more jQuery Mobileand more jQuery MobileDemo Base Class ThemeDemo Base Class Themeand more jQuery Mobileand more jQuery Mobile
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Consuming data via JSONConsuming data via JSONConsuming data via JSONConsuming data via JSONUsing the NewtonSoft JSON.Net Library, turn .NET
objects into JavaScript-consumable objects
http://james.newtonking.com/pages/json-net.aspx
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Demo JSON.NetDemo JSON.NetDemo JSON.NetDemo JSON.Net
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
JSON --> HTMLJSON --> HTMLJSON --> HTMLJSON --> HTMLUsing Microsoft’s jQuery Templating, turn the JSON into
HTML on your page in one single line of JavaScript
http://api.jquery.com/jquery.tmpl/
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Demo TemplatingDemo TemplatingDemo TemplatingDemo Templating
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Wrap UpWrap UpWrap UpWrap Up
• Using your existing web Using your existing web skills, you can create a skills, you can create a robust mobile application.robust mobile application.
• jQuery Mobile does a lot of jQuery Mobile does a lot of the heavy lifting for you, the heavy lifting for you, simply define some simply define some properties on the DOM properties on the DOM objects and jQuery takes care objects and jQuery takes care of the rest !of the rest !
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Helpful LinksHelpful LinksHelpful LinksHelpful Links
jQuery Mobile Docs and Demoshttp://jquerymobile.com/demos/1.0.1/
jQuery Mobile Docs and Demos (upcoming functionality)http://jquerymobile.com/demos/test/
James Newton-King’s JSON.Net libraryhttp://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/
jQuery Mobile Docs and Demoshttp://jquerymobile.com/demos/1.0.1/
jQuery Mobile Docs and Demos (upcoming functionality)http://jquerymobile.com/demos/test/
James Newton-King’s JSON.Net libraryhttp://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/
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Contacting MeContacting MeContacting MeContacting Me
• Email:Email:[email protected]@[email protected]@morningz.com
• LinkedIn:LinkedIn:[email protected]@morningz.com
• Twitter: Twitter: @MorningZ@MorningZ
• Link to this content:Link to this content:http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06
Q & AQ & AQ & AQ & A
Slides: http://bit.ly/fladotnet_03_06http://bit.ly/fladotnet_03_06