Backwards Compatible HTML5/CSS3 Apps in ASP.NET
Nik Kalyani, Founder/CEO, HyperCrunch, Inc.
1996
1994
2008
2006
2004
2002
2010
2000
1998
2012
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
1996
1994
2008
2006
2004
2002
2010
2000
1998
2012
Co
-
founded
Sold
Founded
Folded
Co
-
founded
F
ounded
CALIFORNIA
m
e
m
y company
m
y hometown
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
•
<!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
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Comments 0
Log in to post a comment