introduction to mobile web

10
Microsoft / web ® WebCamps Online Twitter: Follow @webcamps Hashtag #devamps [Speaker] / [Twitter] Website: http://www.devcamps.ms/web What are web camps? Web Developer Camps are free, fun, no-fluff events for developers, by developers. You learn from experts in a low-key, interactive way and then get hands-on time to apply what you’ve learned.

Upload: lohith-gn

Post on 28-Nov-2014

402 views

Category:

Technology


1 download

DESCRIPTION

quick introduction to mobile web development using asp.net mvc

TRANSCRIPT

Page 1: Introduction to mobile web

Microsoft /web

®

WebCamps OnlineTwitter: Follow @webcampsHashtag #devamps[Speaker] / [Twitter]

Website: http://www.devcamps.ms/web

What are web camps?Web Developer Camps are free, fun, no-fluff events for developers, by developers. You learn from experts in a low-key, interactive way and then get hands-on time to apply what you’ve learned.

Page 2: Introduction to mobile web

Microsoft /web

®

Building For The Mobile Web

[Speaker][Company]

Page 3: Introduction to mobile web

Agenda

Adaptive rendering in ASP.NET 4.5 and ASP.NET MVC 4

Display Modes

Mobile Template and jQuery Mobile

Page 4: Introduction to mobile web

Adaptive Rendering

demo…

Page 5: Introduction to mobile web

Microsoft /web

®

Mobile Web Development

Adaptive Renderin

g

Display Modes

Mobile Template

MostlyDesktop

MostlyMobile

Page 6: Introduction to mobile web

Display Modes

demo…

Page 7: Introduction to mobile web

Custom Modes: Views\Shared\_Layout.WinPhone.cshtml

DisplayModeProvider.Instance.Modes.Insert(0,new DefaultDisplayMode(“WinPhone"){ ContextCondition = (

c => c.Request.UserAgent.IndexOf(“Windows Phone OS") > 0)

});

Page 8: Introduction to mobile web

Microsoft /web

®

Windows Phone DisplayMode Example

Same URLDifferent viewBased on custom view

mode criteria

Page 9: Introduction to mobile web

Mobile Template

demo…

Page 10: Introduction to mobile web

Microsoft /web

®

Resources

http://www.asp.net/mobilehttp://aka.ms/mvc4-adaptive-renderinghttp://aka.ms/mvc4-mobile-tutorial