Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers


Published on

HTML5 and CSS3 have arrived. Are you ready to start adopting these technologies in your web projects? Jump start your understanding of the new rich standards and arm yourself with essential techniques for making the most of HTML5 and CSS3 today. In this half-day workshop, you will learn everything you need to know to effectively start leveraging HTML5 and CSS3 in ASP.NET applications. Learn how HTML5 and CSS3 are removing limits from web design. Discover tools and techniques for adopting HTML5 and CSS3 while still supporting older browsers. Leave with the essential knowledge needed to embrace HTML5 and CSS3 in your next ASP.NET project!

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Going off-template for better instructional effectiveness
  • Talk about the major “platforms” for the web. Introduce the players.
  • Looking for people to identify that Flash, Silverlight, and HTML5 are all competing to deliver the rich web
  • Ian Hickson of Google, Inc. is the editor of HTML5Fun facts:- It takes about 10 years to build a nuclear power plant ( Deposit $10/day for 12 years @ 8% = $73,000 (
  • he HTML5 specification will not be considered finished before there are at least two complete implementations of the specification. Living Standard:
  • Mozilla’s take on IE9: older IE: on MSFT take down of testable browsers: old IE option: MSFT option for testing old IE:
  • IE: choices: Hack it – Force features with JS shivsSupport it – Provide gracefully degraded experienceKill it – Provide message indicating no or limited support
  • Sun Spider benchmark test:
  • http://www.modernizr.com
  • methods of access:- Via Attributes ( “dataset” (plug-in required today:
  • Chrome H.264 from MSFT:’s pull of H.264:
  • WebM support via a plug-in: on WebM:
  • Forms 2 (old spec – now Forms in HTML5): input types: browser input types: browser forms 2.0:
  • lat, long, acc are guranteed. Other values might be available, including altitude, altitudeAccuracy, heading, speedCan force maximum age for cached geolocation objectsCan handle errors and make repeat location calls using navigatior.geolocation.watchPosition(successCallback, errorCallback, {maximumAge:time})Google Maps API v3 Reference: to use on all apps that are free to consumers – no API keys needed)
  • articles:Great comparison: (IDEA: progressive enhancement techniques — for example, IE8 and earlier versions show a table of data whereas supported browsers show an animated pie chart.)SVG Bridge for all browsers: Bridge for IE: canvas example: is DOM-based. All elements exist in DOM. Thus, you can attach event handlers. CON: Many objects can hurt perf.CANVAS is PIXEL-based. All elements rendered quickly, but not part of DOM. CON: Harder to interact.
  • (Good practical tips)Inspect appcache in Chrome: chrome://appcache-internals/Stephen Walther on using ASP.NET to serve Cache manifest: IIS Express manifest type:\\Users\\{YOU}\\Documents\\IISExpress\\config\\applicationHost.configComment out the .manifest mime type (sorry ClickOnce!)Add the following line: <mimeMapfileExtension=".manifest" mimeType="text/cache-manifest" />Can also override in IIS7+ config (integrated pipeline):<system.webServer> <staticContent> <mimeMapfileExtension=".manifest" mimeType="text/cache-manifest" /> </staticContent> </system.webServer>Application Cache API:
  • Example code for .NET WebSockets: demo: on Sockets: disabled by default in FF and Opera: sockets in Opera 11: opera:config#UserPrefs|EnableWebSocketsEnabling sockets in FF4: about:config -> network.websocket.override-security-block;trueIE9 can do WebSockets via a prototype Silverlight hack: vs. traditional polling performance: party sockets solution for older browsers:
  • WebSql is not proceeding: of web local storage: Tech is IndexedDB: back to a server database: Web Stroage Portability Layer:
  • Kills Google Gears comparison by Mozilla to formerWebDatabase approach:
  • worker
  • Mac: Shipped in March 20009 style sheet languages proposed in early 90sLanguages:1996:JavaScript Style Sheets (JSSS) – Netscape1994: Cascading HTML Style Sheets (CHSS)1994: Stream-based Style Sheet Proposal (SSP)
  • New CSS3 featuresCSS3 principlesShow example of CSS3 in actionList of all CSS properties:
  • Microsoft Extensions: specific prefixes:
  • @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5IE relied on proprietary Embedded Open Type (.eot)Old school solutions involved things like sIFR ( browsers finally support TTF and OTFResources:
  • Making fonts compatible with IE requires some work-around:
  • Fix “bleeding” in Webkit with: -webkit-background-clip: padding-box;
  • IMAGES FROM: visual CSS gradient generator: Visual gradient creator: explanation: black;background: -moz-linear-gradient(top, black, white);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white)); /*You can also make gradient stops*/-moz-linear-gradient( top,rgb(214,24,166) 0%,rgb(255,51,200) 50%,rgb(255,77,240) 87%)
  • Great tutorial: site: .less with IIS Express:C:\\Program Files (x86)\\IIS Express>appcmd set config /section:staticContent /+[fileExtension='.less',mimeType='text/css']
  • CSS3 Animation Examples:
  • Full list of -moz extensions:
  • General discussion of best practices: (a bit old, from 2007, but some good concepts)
  • of viewport and older mobile meta tags:
  • for targeting iPhone:
  • comparison:
  • Good presentation:
  • ×