Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 17,131 views

 

Statistics

Views

Total Views
17,131
Views on SlideShare
17,131
Embed Views
0

Actions

Likes
0
Downloads
101
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Jon Cortez Regional Practice Director Custom App Dev & Mobility Neudesicbuilding mobile web apps usingASP.NET MVC, HTML5 &jQuery Mobile
  • Agenda Introduction ASP.NET MVC Mobile Development jQuery Mobile Conclusion Q&A
  • Introduction Who am I?  DLSU Alumni (Catch 92)  Currently lives in Seattle, WA  RPD for PacWest Region at Neudesic (www.neudesic.com)  Area of focus is Custom Application Development and Mobility  Contact Info  Email: jcortez@gmail.com  LinkedIn: http://www.linkedin.com/in/jcortez
  • 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
  • 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
  • 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
  • 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
  • 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
  • ASP.NET MVC MVC Design Pattern ControllerModel View
  • 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 http://www.microsoft.com/web/downloads/platform.aspx  Visual Web Developer 2010 Express  IIS 7.5 Express  SQL Server 2008 R2 Express  ASP.NET MVC 3
  • ASP.NET MVC Demo:Your first ASP.NET MVC app
  • 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
  • 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
  • Mobile DevelopmentUS Smartphone Market Share (Jun, 11) RIM iOS Android WM6/WP7 Palm Other
  • Mobile Development Native Client Mobile Web Monetization Skills Transfer Offline Multiple Platforms Performance No Deploy/UpdateDevice Features Run on Desktop
  • 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
  • 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
  • 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
  • Mobile Development Other approaches  Mono Touch / Mono for Android  PhoneGap  Appcelerator
  • 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
  • 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
  • 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
  • jQuery Mobile Getting Started  Create a regular web application  Include references to jQM CSS and JS files <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" 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
  • jQuery Mobile Demo:“Mobify” Chibog Reviews
  • 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
  • ResourcesASP.NET MVC - http://www.asp.net/mvcjQuery Mobile – http://jquerymobile.comMy blog – http://joncortez.azurewebsites.net
  • Q&AQuestions?