150 likes | 279 Views
Backwards Compatible HTML5/CSS3 Apps in ASP.NET . Nik Kalyani, Founder/CEO, HyperCrunch, Inc. m y hometown. m e. m y company. Nik Kalyani. CALIFORNIA. 1994. 1996. 1998. 2000. 2002. 2004. 2006. 2008. 2010. 2012. stuff I did. Sold. Co-founded.
E N D
Backwards Compatible HTML5/CSS3 Apps in ASP.NET Nik Kalyani, Founder/CEO, HyperCrunch, Inc.
my hometown me my company Nik Kalyani CALIFORNIA 1994 1996 1998 2000 2002 2004 2006 2008 2010 2012 stuff I did Sold Co-founded Definiti, Inc.(Technology Services) Folded Founded iWidgets, Inc.(Venture Funded DotCom) Co-founded DotNetNuke Corp.(Venture Funded O/S CMS) Founded HyperCrunch, Inc.(Stealth Mode) Award Recognition:Microsoft MVP ASP.NET 1994 1996 1998 2000 2002 2004 2006 2008 2010 2012
Agenda Highlights: HTML5 and CSS3 Code Q and A
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 <!DOCTYPE html> Works now in all browsers for “standards mode” start using it!
Structural Elements <header> <nav> <article> <aside> <section> <footer> <summary> <details>
HTML5: Audio & Video Native Audio Element <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </audio> Native Video Element <video src="video.ogv" controls poster="poster.jpg"> <a href="video.ogv">Download movie</a> </video>
HTML5: Canvas- 2D Drawing function draw() { varctx = document.getElementById('canvas').getContext('2d'); varimg = 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, email, datetime, date, month, week, time, datetime-local, number, range, color • New Elements <datalist> <meter> <progress> <output>
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
Resources http://html5doctor.com/ http://www.html5test.com/ My Blog: http://www.kalyani.com