• Save
When worlds Collide: HTML5 Meets the Cloud
Upcoming SlideShare
Loading in...5
×
 

When worlds Collide: HTML5 Meets the Cloud

on

  • 1,557 views

This is a 2012 conference presentation of David Pallmann, Windows Azure MVP and author and GM of Custom App Dev at Neudesic

This is a 2012 conference presentation of David Pallmann, Windows Azure MVP and author and GM of Custom App Dev at Neudesic

Statistics

Views

Total Views
1,557
Views on SlideShare
761
Embed Views
796

Actions

Likes
4
Downloads
0
Comments
0

26 Embeds 796

http://davidpallmann.blogspot.com 630
http://davidpallmann.blogspot.in 51
http://localhost 22
http://davidpallmann.blogspot.com.au 13
http://davidpallmann.blogspot.co.uk 12
http://davidpallmann.blogspot.fr 10
http://davidpallmann.blogspot.mx 9
http://davidpallmann.blogspot.com.es 7
http://davidpallmann.blogspot.kr 6
http://davidpallmann.blogspot.com.br 6
http://davidpallmann.blogspot.ca 3
http://davidpallmann.blogspot.it 3
http://davidpallmann.blogspot.com.ar 3
http://davidpallmann.blogspot.de 3
http://davidpallmann.blogspot.cz 2
http://davidpallmann.blogspot.co.at 2
http://davidpallmann.blogspot.se 2
http://davidpallmann.blogspot.sg 2
http://reader.googleusercontent.com 2
http://translate.googleusercontent.com 2
http://davidpallmann.blogspot.hu 1
http://davidpallmann.blogspot.jp 1
http://webcache.googleusercontent.com 1
http://davidpallmann.blogspot.be 1
http://davidpallmann.blogspot.ru 1
http://davidpallmann.blogspot.nl 1
More...

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…
Post Comment
Edit your comment

When worlds Collide: HTML5 Meets the Cloud When worlds Collide: HTML5 Meets the Cloud Presentation Transcript

  • 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
  • vs.
  • 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 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 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"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" type="text/css" href="~/../css/stylesheet_ie.css" /> <![endif]--> }
  • 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 <!-- begin - homepage promos --> <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 &raquo;</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 &raquo;</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 &raquo;</a> </div> </div> </div>
  • 3 Integrate Add Dynamic Content3C. Data Bind with Knockout <!-- begin - homepage promos --> <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 &raquo;</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 &raquo;</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 &raquo;</a> </div> </div> </div>
  • 3 Integrate Add Dynamic Content3C. Data Bind with Knockout <!-- begin - homepage promos --> <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 &raquo;</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 &raquo;</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 &raquo;</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 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