Backwards Compatible HTML5/CSS3 Apps in ASP.NET Nik Kalyani, Founder/CEO, HyperCrunch, Inc.

Nik Kalyani Definiti, Inc. (Technology Services) iWidgets, Inc. (Venture Funded DotCom) DotNetNuke Corp. (Venture Funded O/S CMS) HyperCrunch, Inc. (Stealth Mode) Award Recognition: Microsoft MVP ASP.NET Co-founded Sold Founded Folded Co-founded Founded CALIFORNIA memy company my hometown stuff I did

Agenda Highlights: HTML5 and CSS3 Code Q and A

Highlights: HTML5 & CSS3

Overview HTML 5 Specifically designed for web applications Nice to search engines and screen readers HTML 5 will update HTML 4.01, DOM Level 2 CSS level 3 Will make it easier to do complex designs Will look the same across all browsers CSS 3 will update CSS level 2 (CSS 2.1)

HTML5: New DocType Works now in all browsers for “standards mode” start using it!

Structural Elements

HTML5: Audio & Video Native Audio Element Native Video Element Download movie

HTML5: Canvas - 2D Drawing function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } img.src = 'images/backdrop.png'; }

HTML5: Form Elements New Input Types tel, search, url, , datetime, date, month, week, time, datetime-local, number, range, color New Elements

HTML5: DOM APIs Geo-location Structured Client-side Storage Cross-document Messaging Drag and Drop

CSS3 Attributes opacity, rgb, hsla background-size, background-image border-color, border-image, border-radius, box-shadow text-overflow, text-shadow, column-width, column-gap

Code Download:

Resources My Blog: