going mobile #1 - asp.net and jquery mobile

Going Mobile #1Going Mobile #1

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/codecamp_jqm

http://bit.ly/wcmia_mobile_keynote

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



Mobile MarketMobile MarketMobile MarketMobile Market



Let’s Go Mobile!Let’s Go Mobile!Let’s Go Mobile!Let’s Go Mobile!

Next session we’ll discuss using HTML/CSS/JS as a “Native” app using PhoneGap



Web ApplicationWeb ApplicationWeb ApplicationWeb ApplicationSlides: http://bit.ly/codecamp_jqm


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.



Platform SupportPlatform SupportPlatform SupportPlatform Supporthttp://jquerymobile.com/original-graded-browser-matrix/



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



Demo Basic PageDemo Basic PageDemo Basic PageDemo Basic Page



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



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



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



Demo JSON.NetDemo JSON.NetDemo JSON.NetDemo JSON.Net



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 !



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/codecamp_jqmhttp://bit.ly/codecamp_jqm

http://codex.wordpress.org/XML-RPC_wp



http://wordpress.org/extend/plugins/json-api/other_notes/




http://daniloercoli.wordpress.com/2010/05/10/xml-rpc-library-for-wordpress/



http://blog.5ubliminal.com/posts/remote-control-wordpress-blog-xmlrpc-api/











http://blog.5ubliminal.com/posts/remote-control-wordpress-blog-xmlrpc-api/

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/codecamp_jqmhttp://bit.ly/codecamp_jqm


Q & AQ & AQ & AQ & A


going mobile #1 - asp.net and jquery mobile

Technology