Backwards Compatible HTML5/CSS3 Apps in ASP.NET

bubblemessengerSecurity

Nov 5, 2013 (3 years and 10 months ago)

89 views

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