Backwards Compatible HTML5/CSS3 Apps in ASP.NET

bubblemessengerSecurity

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

85 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