1 / 15

Backwards Compatible HTML5/CSS3 Apps in ASP.NET

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.

kenley
Download Presentation

Backwards Compatible HTML5/CSS3 Apps in ASP.NET

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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

  3. Agenda Highlights: HTML5 and CSS3 Code Q and A

  4. Highlights: HTML5 & CSS3

  5. 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)

  6. HTML5: New DocType <!DOCTYPE html> Works now in all browsers for “standards mode” start using it!

  7. Structural Elements <header> <nav> <article> <aside> <section> <footer> <summary> <details>

  8. 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>

  9. 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'; }

  10. 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>

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

  12. 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

  13. CodeDownload: http://www.kalyani.com

  14. Resources http://html5doctor.com/ http://www.html5test.com/ My Blog: http://www.kalyani.com

More Related