Skip to main content
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
RICH LEARNING AHEAD
the “plan”
“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
<HTML5 ?>
what do these *platforms* have in common?
the rich webNew!Web 3D
HTML5
famously dead* proprietary platformsColdFusionPowerBuilderWinFormsFoxProOS/2VB6OS 9BeOS
when will HTML5 be “official?”
2022
<HTML5>
the basics<!DOCTYPE html>9 new “structure” tags16 new HTML elements13 new <input> types
compatible
 HTMLCSS++JavaScript
[browsers]
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
using ittoday
how do you use HTML5 today?
modernizer
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>  <!--[if lt IE 9]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  <![endif]--></head>
semantic datadata-*Valid approach to storing data in HTML<!--Store values in data-* attributes--><div id="mydiv" data-key="26" data-name="My product name">This product is an extremely popular choice.</div><!--Access values with JavaScript-->//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 /><!-- Single video --><video src="mymovie.mp4" width="320" height="240"></video><!-- Multiple encoded versions --><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> <!--Technique to support older browsers-->  <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>  <!--[if IE]>    <script src="excanvas.js"></script>  <![endif]--></head>Explorercanvas
svgvs canvas
stuff you can do todaystuff you can do tomorrow
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
CSS3
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
CSS3 Demos
mobile
considerationsBandwidthScreen SizeInteractionLook-and-feelReusability
320px980px
<meta>Rendering hints for mobile browsers<meta name="viewport" content="width=device-width, initial-scale=1.0">Optional: user-scalable=notarget-densitydpi=device-dpi (Android Only)<!--iOS specific--><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="apple-touch-icon" href="./apple-touch-icon.png" />
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;  }}
frameworks
javascriptjQuery
universal languageMobileDesktopServer (node.js)Devices
frameworksjQueryMooToolsYUIextJSDojoprototypeGoogle Trends
jQueryAvailable from numerous CDNSGoogle, Microsoft, TelerikjQuery APIBrowser VersionsJavaScriptEnginesJägerMonkeyV8NitroChakraEMCAScript “Standard”
HTML5 + JavaScriptAware & Dependent
should I use HTML5 today?
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.