Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile


Published on

1 Comment
  • facebook login authentication using html5 and jquery mobile,
    When i am clich facebook button in the jquerymobiole page the facebook login page will display in the same window POPUP
    How to create this in using Jquerymobile
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

  1. 1. Jon Cortez Regional Practice Director Custom App Dev & Mobility Neudesicbuilding mobile web apps usingASP.NET MVC, HTML5 &jQuery Mobile
  2. 2. Agenda Introduction ASP.NET MVC Mobile Development jQuery Mobile Conclusion Q&A
  3. 3. Introduction Who am I?  DLSU Alumni (Catch 92)  Currently lives in Seattle, WA  RPD for PacWest Region at Neudesic (  Area of focus is Custom Application Development and Mobility  Contact Info  Email:  LinkedIn:
  4. 4. Introduction Why mobile development?  Over a billion mobile devices with rich web capabilities  Study conducted on May 2011 shows that 90 of Top 200 sites have no mobile version  Mobile devices are becoming the primary way that most people access the web
  5. 5. Introduction Goals for this session  Introduce Mobile Web Development  Writing your first mobile web app using ASP.NET MVC, HTML5 and jQuery Mobile that targets multiple platforms and form factors (phones, tablets, desktop)  Spark interest in Mobile Web
  6. 6. Introduction Pre-requisites for this session  Familiarity with HTML and web development  Experience with ASP.NET development is important  Understanding of jQuery will be useful
  7. 7. ASP.NET MVC Microsoft ASP.NET Frameworks  ASP.NET Web Forms  ASP.NET MVC Web Forms  Original design from late 90s  Strongly typed compiled code replaced script  Abstract away the web  Click events replaced “POST” operations  Competes against other MVC frameworks  Struts  Ruby on Rails  Django
  8. 8. ASP.NET MVC ASP.NET MVC Design Goals  Does not replace Web Forms but provides an alternative framework  Still runs on ASP.NET  Caching, modules, master pages, providers, handlers, session state  Embrace the web  No illusions of state – no page lifecycle  Clean URLs and clean HTML  Extensible and pluggable framework  Pluggable view engines  Support for Dependency Injection  Testable  Maintains a strict separation of concern
  9. 9. ASP.NET MVC MVC Design Pattern ControllerModel View
  10. 10. ASP.NET MVC Development Tools  Visual Studio 2010 Premium Edition  IIS 7.5  SQL Server 2008 R2  Alternatively, free version via Web Platform Installer at  Visual Web Developer 2010 Express  IIS 7.5 Express  SQL Server 2008 R2 Express  ASP.NET MVC 3
  11. 11. ASP.NET MVC Demo:Your first ASP.NET MVC app
  12. 12. ASP.NET MVC Demo Business Requirements  Ability to post restaurant information  Ability to rate a restaurant  Ability to post a review of a restaurant Technical Requirements  Must run on IIS  Must use SQL Server  Must support major web browsers  Must be mobile-enabled
  13. 13. Mobile Development Mobile 2.0  Similar to the web boom in the 90’s  Most companies need/want a mobile app  Opportunity to still get in early  Evident on mobile platform: Windows 8 and Mac OS X Lion
  14. 14. Mobile DevelopmentUS Smartphone Market Share (Jun, 11) RIM iOS Android WM6/WP7 Palm Other
  15. 15. Mobile Development Native Client Mobile Web Monetization Skills Transfer Offline Multiple Platforms Performance No Deploy/UpdateDevice Features Run on Desktop
  16. 16. Mobile DevelopmentFunctionality Native Application Mobile Web (HTML5)Geo Location Yes YesLocal Storage Yes YesOffline Yes YesPhone Dialer Yes Yes (through URL)Maps Yes Web control onlyContacts YesCamera YesAccelerometer YesFile System YesPush Notifications Yes
  17. 17. Mobile Development Native  Develop using original platform tools  For iOS  Objective-C  Mac OS X  Cocoa Touch SDK  For Android  Java  Android Application Framework  Learning curve  No code reuse  Great user experience
  18. 18. Mobile Development Mobile Web  Use subset of HTML / JavaScript / CSS  Native mobile browser or hosted shell  Use of mobile JavaScript framework: jQuery Mobile, Sencha Touch, jQTouch, iUI, etc.  Write once, works anywhere  Downside  Common denominator  Hardware interaction  Can be slow  Doesn’t feel like a native app
  19. 19. Mobile Development Other approaches  Mono Touch / Mono for Android  PhoneGap  Appcelerator
  20. 20. jQuery Mobile What is jQuery Mobile?  A touch-optimized web framework  Developed by the jQuery project team  Focused on compatibility with a wide variety of smartphones and tablets  Current version is jQuery Mobile 1.0
  21. 21. jQuery Mobile Top 10 Features 1. Built on jQuery core for familiarity 2. Lightweight (~ 20K download size) 3. HTML Markup Configuraton – do a lot before writing any JavaScript 4. Progressive Enhancement – core functionality works on all base platform 5. Automatic Initialization – based on data-* attributes in HTML5 6. Accessibility – based on WAI-ARIA 7. Touch and mouse event support 8. UI Widgets – great selection of native looking controls 9. Themed Framework – support for alternative CSS 3.0 based themes 10. Broad Platform Support – works on a variety of smartphone and tablet devices
  22. 22. jQuery Mobile What you need to develop in jQuery Mobile  Your favorite IDE for HTML  Visual Studio, Eclipse, TextMate  A web browser capable of inspecting HTML elements / JavaScript debugging  Google Chrome, Safari, IE9  Device or emulator for testing your application  Mac (iOS Simulator), iPhone, iTouch, iPad if targeting iOS devices  Android device or Android Emulator
  23. 23. jQuery Mobile Getting Started  Create a regular web application  Include references to jQM CSS and JS files <link href="" rel="stylesheet" type="text/css" /> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script>  Include viewport reference <meta name="viewport" content="width=device-width, initial-scale=1" />  Create markup using HTML5 data-* attributes to define page, header, content, and footer
  24. 24. jQuery Mobile Demo:“Mobify” Chibog Reviews
  25. 25. Conclusion ASP.NET MVC + jQuery Mobile is a flexible, full-featured framework for building mobile web apps that target multiple platforms and form factors Investment and brand behind jQuery Mobile puts it in a good position to be the de facto standard framework Web developers can easily transition to mobile development
  26. 26. ResourcesASP.NET MVC - Mobile – http://jquerymobile.comMy blog –
  27. 27. Q&AQuestions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.