Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers

Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers Todd Anglin, Chief EvangelistTelerikE: anglin@telerik.com | T: @toddanglin

IntroductionsTodd AnglinChief Evangelist, TelerikMicrosoft MVPASP InsiderPresident NHDNUG & O’Reilly AuthorTelerikWatch.com@toddanglin

“Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.”-Steve Jobs April, 2010

what do these *platforms* have in common?

famously dead* proprietary platformsColdFusionPowerBuilderWinFormsFoxProOS/2VB6OS 9BeOS

when will HTML5 be “official?”

the basics<!DOCTYPE html>9 new “structure” tags16 new HTML elements13 new <input> types

Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers

which browsers matter?99%of internet browses withIE, FF, Safari, Chrome, or Opera

browser supportBetter, but not perfectKnow your users. Know your browsers.

fixing IEThree options:Shiv itKill itTarget it

Because some browsers run on many different operating systems, there can be a tendency to use a 'least common denominator' approach to implementing HTML5. By using more of the underlying operating system, and taking advantage of the power of the whole PC, IE9 enables developers to do more with HTML5.“”-Dean HachamovitchGeneral Manager, IE Team

html5test.com?Updated March 2011

in the future, browsers compete on speed, not on features

HTML5 Test + IE9Testing old browsers

ModernizrShiv’r + InspectorSimple way to check feature supportConditional JS and CSS.multiplebgs div p { /* properties for browsers that support multiple backgrounds */}.no-multiplebgs div p { /* optional fallback properties for browsers that don't */}if (Modernizr.canvas) { //Canvas supported}if (Modernizer.cssColumns){ //Columns supported}//Etc...*Don’t use with IE HTML5shiv. One or the other.

progressiveenhancementgracefuldegradation

stuff you can do todaystuff you can do tomorrow

semantic tagstag: <header> <footer> <nav> <article> <hgroup><header> <hgroup> <h1>My Site</h1> <h2>My site tag line</h2> </hgroup></header><article> <header> <h1>An article title</h1> <header></article><footer><p>Copyright 1987</p></footer>support: IE9, FF3.5, Safari, Chrome, Opera

enriching VS ExperienceAdd Intellisense & Schema Validation to Visual Studio editorhttp://bit.ly/vsHTML5http://bit.ly/vsSVG

fixing IE<head> <meta charset="utf-8" /> <title>My Weblog</title> </head>

semantic datadata-*Valid approach to storing data in HTML<div id="mydiv" data-key="26" data-name="My product name">This product is an extremely popular choice.</div>//Using DOM's getAttribute() propertyvarkey = mydiv.getAttribute("data-key") //returns "26" //OR Using JavaScript's dataset property**var key = mydiv.dataset.key //returns "26"support: IE9, FF3.5, Safari, Chrome, Opera

videotag: <video /><video src="mymovie.mp4" width="320" height="240"></video><video width="320" height="240" controls> <source src="mymovie.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="mymovie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></video>support: IE9, FF3.6, Safari, Chrome, Opera

video for all browsersMultiple encodingsGraceful degradation<video width="320" height="240" controls> <source src="mymovie.ogv"> <source src="mymovie.mp4"> <object data="videoplayer.swf"> <param name="flashvars" value="mymovie.mp4"> HTML5 and Flash video not supported </object></video>

WebMRoyalty FreeVP8/Vorbissupport: IE9*, FF3.5, Safari*, Chrome, Opera

input types*tag: time, date, search, email, etc.Web Forms 2.0 HTML5 Forms<form> <input type="email" autofocus="autofocus" placeholder="Enter your email" /></form>support: Safari, FF4*, Chrome, Opera

browser autofocusImproved usabilitySupported in Safari, Chrome, Opera (so far)<form name="f"> <input id="q" autofocus>  <script> if (!("autofocus" in document.createElement("input"))) {document.getElementById("q").focus(); } </script> <input type="submit" value="Go"></form>

geolocationopt-in user feature to share physical positionnavigator.geolocation.getCurrentPosition(callback);function callback(position){varlat = position.coords.latitude;varlng = position.coords.longitude;varacc = position.coords.accuracy;}support: IE9, Safari, FF3.5, Chrome, Opera

local storagesessionStorage = per windowlocalStorage = per browser<script>sessionStorage.setItem('value', this.value);localStorage.setItem('value', this.value);sessionStorage.getItem(‘value’);sessionStorage.clear();localStorage.clear();</script>5 MB limitsupport: IE9, FF3.5, Safari, Chrome, Opera

messagingsend cross-document (and domain) local messages//Sender (http://example.com)varo = $('iframe')[0];o.contentWindow.postMessage('Hello world','http://b.example.org/');//Receiver (http://b.example.org)window.addEventListener('message', receiver, false);function receiver(e) { if (e.origin == 'http://example.com') alert(e.data);}support: IE8, FF3.5, Safari, Chrome, Opera

canvastag: <canvas /><canvas id=“b" width="300" height="225"></canvas>function draw_b() {varb_canvas = document.getElementById("b");varb_context = b_canvas.getContext("2d");b_context.fillRect(50, 25, 150, 100);}support: IE*, FF3, Safari, Chrome, Opera

fixing IE<head> </head>Explorercanvas

offlinetag: <html manifest="html5demo.manifest">MIME type: text/cache-manifestCACHE MANIFEST# Files you want cached for your app to work offlinemyLogo.jpg//Interacting with cachewindow.applicationCache.update();alert(window.applicationCache.status);support: FF3.5, Safari, Chrome,Opera 10.6

web socketsapi: WebSocketws = new WebSocket("ws://localhost:8282/test”);ws.onopen = WSonOpen;ws.onmessage = WSonMessage;ws.onclose = WSonClose;ws.onerror = WSonError;function WSonMessage(event) { $(“#myDiv”).html(event.data);};support: IE9**, Safari 5, Chrome, FF4*, Opera 11*

web sqlapi: openDatabasedb= openDatabase("html5demos", "1.0", "HTML 5 Database API example", 200000);if (db) {db.transaction(function(tx) {tx.executeSql("CREATE TABLE IF NOT EXISTS tweets (id REAL UNIQUE, text TEXT, created_atTEXT, screen_name TEXT, mention BOOLEAN)", [], callback); });}db.transaction(function (tx) {tx.executeSql('SELECT * FROM tweets WHERE mention = ? AND id > ? ORDER BY id DESC', [mention, latest], callbackFunc);});“This specification has reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.” –W3Csupport: Safari, Chrome, Opera

indexedDBJavaScript API for indexed local storagevar request = window.indexedDB.open("CandyDB", "My candy store database");request.onsuccess= function(event) {vardb = event.result; if (db.version != "1") { // User's first visit, initialize database. ... }}support: IE9*, FF4, (Chrome)

web workersbackground threads for JavaScriptvar worker = new Worker('worker.js');worker.onmessage= function (event) {$('#result').innerHTML= event.data;};//Worker communicates viapostMessage([value]);support: FF3.5, Safari, Chrome,Opera

CSS HistoryCSS3Improve consistency & power of styling languageCSS: Plagued by implementation bugs & inconsistencies

What’s CSS3?Extensions for CSS2.1Add functionality, refine definitions

leveling the playing fieldCSS ResetBrowsers ship with built-in styles – zero them out!Enable newer features in older browsershttp://html5reset.orghttp://html5boilerplate.com

Browser Prefixes-webkit-moz-o-ms“standard” way browsers implement custom features.

custom fontsBiggest Problem?Licensing!@font-face { font-family: Delicious; src: url('Delicious-Roman.otf') format(“opentype”); } //Usageh3 { font-family: Delicious, sans-serif; }

Web Font ProvidersSolve the licensing problemHost the TTF/OTF font filesProvide easy-to-use codehttp://code.google.com/webfontshttp://webfonts.fonts.comhttp://typekit.com/libraries

rounded cornersEasy corner controlExpect GD for older browsers (IE)-moz-border-radius: 5px 5px 5px 5px; //Optionally ”explicit”-webkit-border-radius: 5px;border-radius: 5px;//Can also control specific cornersborder-bottom-left-radius:0px;border-bottom-right-radius:0px;

drop shadowsExactly like it soundsbox-shadow: <hShift> <vShift> <size> <color>;-moz-box-shadow: 2px 2px2px #333;-webkit-box-shadow: 2px 2px2px #333;box-shadow: 2px 2px2px #333;

text shadowsUniform across supported browsers!text-shadow: <h offest> <v offset> <blur size> <color>;text-shadow: 2px 2px2px #333;//You can apply multiple shadowstext-shadow: 2px 2px2px #333, 2px 2px 3px #CCC;

BackgroundsMore options, more powermultiple backgroundsresize backgroundsbackground clipping/*Background size*/-webkit-background-size: 137px 50px;-o-background-size: 137px 50px;background-size: 137px 50px;/*Multiple Backgrounds*/background: url(top.gif) top left no-repeat,url(bottom.gif) bottom left no-repeat,url(middle.gif) left repeat-y;/*Background origin*/background-origin: border;/*Other options: padding or content*/

GradientsNot CSS3!But useful and desirableCan be “shived” to support all browsers

LESS for CSSUse LESS to write less CSSVariables, operations, mix-ins, nested rules/*Variables*/@primaryColor: #383939;background-color: @primaryColor;/*Mix-ins!!*/.roundedCorners (@radius: 12px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius;}#page { background-color: @primaryColor; .roundedCorners; }

animating with CSSAnimate by setting CSS propertiesWorks when JS is disabled#id_of_element { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }

the One-OffsFeatures waiting for friends

considerationsBandwidthScreen SizeInteractionLook-and-feelReusability

media queriesTarget styles to specific devices…And features!/*These two rules do the same thing*/@media all and (min-width:500px) { … } @media (min-width:500px) { … }/*Multiple conditions*/@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; }}

universal languageMobileDesktopServer (node.js)Devices

frameworksjQueryMooToolsYUIextJSDojoprototypeGoogle Trends

jQueryAvailable from numerous CDNSGoogle, Microsoft, TelerikjQuery APIBrowser VersionsJavaScriptEnginesJägerMonkeyV8NitroChakraEMCAScript “Standard”

HTML5 + JavaScriptAware & Dependent

The consumer should be able to decide which technologies they want to use, but a multi-platform world is definitely where the world is headed.-ShantanuNarayen April, 2010

The future of the web is HTML5.-Dean Hachamovitch April, 2010

Your Feedback is ImportantPlease fill out a session evaluation form drop it off at the conference registration desk.Thank you!telerikwatch.com@toddanglinanglin@telerik.com

ResourcesQuoteshttp://www.apple.com/hotnews/thoughts-on-flash/http://www.dailytech.com/Adobes+CEO+Responds+to+Steve+Jobs+Rant+about+Flash/article18267.htmhttp://blogs.msdn.com/ie/archive/2010/04/29/html5-video.aspxHTML5 Resourceshttp://www.w3.org/TR/html5-diff/#backwards-compatiblehttp://html5demos.com/http://ishtml5ready.comhttp://caniuse.comhttp://html5readiness.comhttp://html5test.comhttp://www.browserscope.org/http://www.html5rocks.com/HTML5 Demoshttp://9elements.com/io/projects/html5/canvas/http://html5demos.com/http://www.chromeexperiments.com/CSS3 Demoshttp://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.htmlhttp://anthonycalzadilla.com/css3-ATAT/index.htmlIE9 Downloadhttp://ie.microsoft.com/testdrive/

CSS3 ResourcesLESS CSS “framework” + tutorialhttp://designshack.co.uk/articles/css/using-less-js-to-simplify-your-css3LESS T4 Template from Phil Haackhttp://haacked.com/archive/2009/12/02/t4-template-for-less-css.aspxLESS VS CSS code highlightinghttp://visualstudiogallery.msdn.microsoft.com/en-us/dd5635b0-3c70-484f-abcb-cbdcabaa9923

Slide TitlePlease use this template for your slidesPlease DO NOT change the format of this templatePlease DO NOT use special formatting such as shadowing for code or images, or shadows behind boxes, etc. Please DO NOT use layers or slides because the text is unreadable when printed as handouts for students. Please send completed slides to erik@devconnections.comFilename for slides should be: lastname_conference_sessionnum_sessiontitle.ppt Please zip all files before sending them. Include sample code for the attendee disk in a subfolder.

Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers (20)

More from Todd Anglin (9)

Recently uploaded (20)

Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers

Editor's Notes