Kalyani - HTML5 on ASPNET

Transcript Kalyani - HTML5 on ASPNET

Backwards Compatible HTML5/CSS3 Apps in ASP.NET
Nik Kalyani, Founder/CEO, HyperCrunch, Inc.
my hometown
my company
CALIFORNIA
me
Nik
Kalyani
1994
Definiti, Inc.
(Technology Services)
1996
1998
2000
2002
2004
2006
2008
2010
2012
Sold
Co-founded
Founded
iWidgets, Inc.
(Venture Funded DotCom)
Folded
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
Highlights: HTML5 & CSS3
Overview
HTML 5
• Specifically designed for
web applications
CSS level 3
• Will make it easier to do
complex designs
• Nice to search engines
and screen readers
• Will look the same across
all browsers
• HTML 5 will update HTML
4.01, DOM Level 2
• 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() {
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, 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
Code
Download: http://www.kalyani.com
Resources
• http://html5doctor.com/
• http://www.html5test.com/
• My Blog: http://www.kalyani.com

Kalyani - HTML5 on ASPNET

Transcript Kalyani - HTML5 on ASPNET

Directory