When worlds Collide: HTML5 Meets the Cloud

David PallmannGM Custom App Dev, Neudesichttp://davidpallmann.blogspot.com@davidpallmann

2 RevolutionsThe HTML5 revolutionThe Cloud revolutionInteractions & SynergiesWalkthrough: Creating a Mobile & Global App

Front-End Back-End

HTML5Lingua franca Mobilityfor desktop & Front-End Tablets and mobile web phones applications Power ExperiencesMore capable Compelling, devices & touch-orientedbrowser h/w experiences acceleration

Web just keeps growing in importanceRising experiences & expectationsOn our devicesSocialEverywherePart of our lifestyle

Web just keeps growing in importanceRising experiences & expectationsOn our devicesSocialEverywherePart of our your customers’ & employees’lifestyle

HTML5CSS3JavaScriptSVG100+!

Video & Audio without pluginsCanvas & Scalable Vector Graphics w/o pluginsNew semantic tagsGeolocationCSS3, including custom fonts, rounded cornersDrag and dropCanvas – 2D drawing, WebGL – 3D graphicsNew form elementsHTML manifest (app caching) & offline storageHardware acceleration in modern browsers

Advanced Shading VideoWebGL Water CSS public online HTML5 sites

Joy Defines the Future (BMW) Angry BirdsCanvas Mol Tron Legacy public online HTML5 sites

Source: Shutterstock.com #86494345 Source: Shutterstock.com #72009739

Unified mobile development accounts for muchof the HTML5 momentum327M wireless devices in US CTIA Wireless Association1 billion wireless devices worldwide iSuppliIDC: wireless web will outpace desktop web by2015 ComputerworldResponsive web design: adaptive, fluid layoutMobile-first design, progressive enhancement

A Compelling Experiencecompelling • immersive • multimediaanimated • interactive • responsiveRelevant to Your Lifeintegrates with social networks • uses locationUbiquitousruns on PC browser, tablet, phoneadaptive layout • touch, mouse or keyboardMaintains Continuityuse multiple devices • identity • state • dataConstant Availabilitydisconnected operation • sync

works on phones works on tabletshttp://www.astronautdesigns.com/demo/responsive/

SocialCloud Computing Social network Elastic scale, Back-End content, consumption- interactions & based pricing web identity CDNs Marketplaces Content App stores, Delivery data Networks marketplaces

Elastic ScaleConsumption-based PricingCommitment-free / Easy-in, Easy-outSelf-serve / On-demandManaged / Platform-as-a-ServiceApplication & Data Protected through Redundancy3 9’s SLA (99.9%)

App Clouds Media Clouds Data Clouds Social Clouds

Elastic Scalescale larger/smaller as neededUniversalworldwide presence • universal accesscan run in multiple data centers • CDNHighly Availableredundancy • resilient • failoverDecentralizeddistributed • combine multiple serviceslessened emphasis on locking / transactions

Service Role in a Modern Web SolutionWindows Azure Compute Hosting of web serversWindows Azure Blob Storage Media (images, video) & other file storageWindows Azure Table Storage Server-side storage of data / session stateSQL Azure Database Server-side storage of relational dataWindows Azure Traffic Manager Traffic routing across multiple deploymentsContent Delivery Network Use of edge cache network to serve contentCache Service Server-side performance improvementsSQL Azure Data Sync Data sync across multiple deploymentsAccess Control Service Identity federationService Bus Back end processing / integrationWindows Azure Connect Cloud-Enterprise connectivity

Front-End Back-End

I can use a I can use atraditional traditional or HTML5 or cloud front-end back-end here here

HOMOGENOUS FRONT END DEDICATED BACK END WEB SERVER DATABASE SERVER Web Application SQL DESKTOP Web Services Server BROWSER IIS Windows Server

HETEROGENEOUS FRONT END DECENTRALIZED BACK END Platform DESKTOP Application Services BROWSER CLOUD Business Data Stores Services TABLET Identity IP Directories Services PHONE PARTNER Partner Data Stores Services

Client-Server CoordinationData StorageIdentityState ManagementSynchronizationCachingLocationSocial

ElasticityLocationSocial

VM VM VM VM VM

http://outsidetheboxpizza.com

Mobility gives us location independence:take the web with youMobile web apps can use your current locationMap integration

Content Delivery Network serves contentefficiently based on localeTraffic Manager routes users to a deploymentbased on locate

http://responsive-tours.com

NotificationsView ContentPost Content

Sign-in with web providerIdentity federation (Access Control Service)Back-end social network integration

Outside-the-box-Pizza: client-side socialResponsive Tours: server-side social identity

2 Web Platform Neudesic Web Template1 Design Comps Adobe Creative Suite HTML5, CSS, Media Client: Open Standards Server: MS Web Platform 3 Integrate Dynamic Content DB / Storage Responsive Web Design Data Binding Map Integration7 Global Worldwide Deployment Multiple Data Centers 4 Cloud-Ready Windows Azure Web Role / Instances Traffic Management Local Dev/Test 6 Deployed Elastic Scale Azure Data Center 5 Secured Single Sign-on Web / Domain ID AZURE WEB ROLE

1 Design Design Web Site Front-end & Create Assets1A. Used an Adobe Dreamweaver HTML5 sample already set up for Responsive Web Design

1 Design Design Web Site Front-end & Create Assets1B. Customize Content in Dreamweaver – Page Title, Logo, Marquee Text,

1 Design Design Web Site Front-end & Create Assets1C. Hand-off to developer – assets are HTML5, CSS, JavaScript, image files

2 Adapt Template-based Web Project2A. Create Project from Neudesic Web Template

2 Adapt Template-based Web Project2B. Insert front-end markup/styling/code/images from designer • Move where some files are to match the templates organization • Change paths in the HTML and CSS to match file relocation and use ASP.NET ~ path convention • Segment HTML and insert into appropriate areas of the home view (Index.cshtml)

2 Adapt Template-based Web Project2B. Insert front-end markup/styling/code/images from designer @* Optional : Include additional stylesheets *@ @section StylesTop { <link rel="stylesheet" type="text/css" href="~/../css/stylesheet.css" /> <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max- width:550px)" href="~/../css/screen_small.css"> <link rel="stylesheet" type="text/css" media="only screen and (min-width:551px) and (max- width:800px)" href="~/../css/screen_medium.css">  }

2 Adapt Template-based Web Project2C. Final result is a web project we can run out of VS2010 with F5 – looks no diff from Step 1

3 Integrate Add Dynamic Content3A. Create a Database for Promotional Data

3 Integrate Add Dynamic Content3B. Retrieve Content in the MVC Project public class HomeController : Controller public class Promo { { // public string Title; // GET: /Home/ public string Text; public string ImageURL; public ActionResult Index() } { LoadPromos(); return View(); } private void LoadPromos() { Dictionary<string, Promo> Promos = new Dictionary<string, Promo>(); try { using (SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager .ConnectionStrings["Tours"].ConnectionString)) { ...get the data, add to Promos collection... } } catch (SqlException ex) { // TODO: log exception } ViewBag.Promos = Promos; } }

3 Integrate Add Dynamic Content3C. Embed Content with Razor  <div class="home_promo_container"> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["1"].ImageURL));"> <h2 data-bind="text: PromoTitle1"></h2> <p data-bind="text: PromoText1"/> <a class="button" href="#">Learn more »</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["2"].ImageURL));"> <h2 data-bind="text: PromoTitle2"></h2> <p data-bind="text: PromoText2"/> <a class="button" href="#">Learn more »</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["3"].ImageURL));"> <h2 data-bind="text: PromoTitle3"></h2> <p data-bind="text: PromoText3"/> <a class="button" href="#">Learn more »</a> </div> </div> </div>

3 Integrate Add Dynamic Content3C. Data Bind with Knockout  <div class="home_promo_container"> <div class="home_promo"> <div class="home_promo_content" style="background- image:url(images/@(ViewBag.Promos["1"].ImageURL));"> <h2 data-bind="text: PromoTitle1"></h2> <p data-bind="text: PromoText1"/> <a class="button" href="#">Learn more »</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background- image:url(images/@(ViewBag.Promos["2"].ImageURL));"> <h2 data-bind="text: PromoTitle2"></h2> <p data-bind="text: PromoText2"/> <a class="button" href="#">Learn more »</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background- image:url(images/@(ViewBag.Promos["3"].ImageURL));"> <h2 data-bind="text: PromoTitle3"></h2> <p data-bind="text: PromoText3"/> <a class="button" href="#">Learn more »</a> </div> </div> </div>

3 Integrate Add Dynamic Content3C. Data Bind with Knockout  <div class="home_promo_container"> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["1"].ImageURL));"> <h2 data-bind="text: PromoTitle1"></h2> <p data-bind="text: PromoText1"/> <a class="button" href="#">Learn more »</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["2"].ImageURL));"> <h2 data-bind="text: PromoTitle2"></h2> <p data-bind="text: PromoText2"/> <a class="button" href="#">Learn more »</a> </div> </div> <div class="home_promo"> <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["3"].ImageURL));"> <h2 data-bind="text: PromoTitle3"></h2> <p data-bind="text: PromoText3"/> <a class="button" href="#">Learn more »</a> </div> </div> </div>

3 Integrate Add Dynamic Content3D. Site with Data Binding

4 Cloud-Ready Set up for Windows Azure – Local Test/Dev in Simulator4A. Add Windows Azure Project

4 Cloud-Ready Set up for Windows Azure – Local Test/Dev in Simulator4B. Set Instance Counts <?xml version="1.0" encoding="utf-8"?> <ServiceConfiguration serviceName="ResponsiveSiteAzure" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/Servic eConfiguration" osFamily="1" osVersion="*"> <Role name="ResponsiveSite"> <Instances count="4" /> <ConfigurationSettings> <Setting name="Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString " value="UseDevelopmentStorage=true" /> </ConfigurationSettings> </Role> </ServiceConfiguration>

4 Cloud-Ready Set up for Windows Azure – Local Test/Dev in Simulator4C. Run locally in Windows Azure Simulation Environment

5 Secured Sign-in with web Identities5A. Configure Access Control Service in Windows Azure

5 Secured Sign-in with web Identities5B. Instrument for identity with Windows Identity Foundation

5 Secured Sign-in with web Identities5C. Retrieve Claims private void LoadClaims() { ViewBag.Welcome = "Welcome Back!"; var principal = Thread.CurrentPrincipal; var identity = principal.Identity as IClaimsIdentity; var claims = identity.Claims; ViewBag.Claims = claims; string displayName = null; if (claims != null) { string claimType; foreach (Claim claim in claims) { claimType = claim.ClaimType; if (claimType.EndsWith("/nameidentifier")) { displayName = claim.Subject.Name; break; } } if (!String.IsNullOrEmpty(displayName)) { ViewBag.Welcome = "Welcome back, " + displayName; } } }

6 Deployed Deployed to Windows Azure Data Center6A. Move Promotional Item Images to Blob Storage http://responsive.blob.core.windows.net/images/homepage_promo_1.jpg http://responsive.blob.core.windows.net/images/homepage_promo_2.jpg http://responsive.blob.core.windows.net/images/homepage_promo_3.jpg

6 Deployed Deployed to Windows Azure Data Center6B. Change Promotional Image URLs to use Blob Storage <div class="home_promo_content" style="background-image:url( http://responsive.blob.core.windows.net/images/@(ViewBag.Promos["1"].ImageURL) );">

6 Deployed Deployed to Windows Azure Data Center6C. Package and Publish

6 Deployed Deployed to Windows Azure Data Center6D. Access in the Cloud at http://responsive.cloudapp.net

7 Global Deployed Globally to US and Hong Kong with Traffic Management7A. Turn on CDN

7 Global Deployed Globally to US and Hong Kong with Traffic Management7B. Change Promotion Item Image URLs to use CDN URL Prefix <div class="home_promo_content" style="background-image:url( http://az99258.vo.msecnd.net/images/@(ViewBag.Promos["1"].ImageURL) );">

7 Global Deployed Globally to US and Hong Kong with Traffic Management7C. Deploy to Multiple Data Centers

7 Global Deployed Globally to US and Hong Kong with Traffic Management7D. Manage Traffic

7 Global Deployed Globally to US and Hong Kong with Traffic Management7E. Access at http://responsive-tours.com (http://responsive.ctp.trafficmgr.com) Friendly Domain http://responsive-tours.com Windows Azure Traffic Manager http://responsive.ctp.trafficmgr.com South Central US Western Europe East Asia http://responsive-us http://responsive-europe http:// responsive-asia .cloudapp.net .cloudapp.net .cloudapp.net Windows Azure Access Control Service Web Identity Sign-in

7 GlobalDeployed Globally to US and Hong Kong with Traffic Management http://responsive-tours.com

8-Part Tutorialhttp://davidpallmann.blogspot.com/2011/12/mobile-global-in-7-steps-with-html5-mvc.htmlSource Code on CodePlexhttp://responsivetours.codeplex.comOnline Demohttp://responsive-tours.com

David PallmannGM Custom App Dev, Neudesichttp://davidpallmann.blogspot.com@davidpallmann

http://davidpallmann.blogspot.com	577
http://davidpallmann.blogspot.in	29
http://davidpallmann.blogspot.com.au	11
http://davidpallmann.blogspot.com.es	2
http://localhost	2
http://reader.googleusercontent.com	2
http://translate.googleusercontent.com	2
http://webcache.googleusercontent.com	1
http://davidpallmann.blogspot.ca	1
http://davidpallmann.blogspot.de	1
http://davidpallmann.blogspot.co.uk	1
http://davidpallmann.blogspot.fr	1

When worlds Collide: HTML5 Meets the Cloud

by David Pallmann on Jan 30, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 630

Statistics

When worlds Collide: HTML5 Meets the Cloud — Presentation Transcript