backwards compatible html5/css3 apps in asp.net
Post on 16-Feb-2016
40 Views
Preview:
DESCRIPTION
TRANSCRIPT
Backwards Compatible HTML5/CSS3 Apps in ASP.NET
Nik Kalyani, Founder/CEO, HyperCrunch, Inc.
19961994 2008200620042002 201020001998 2012
NikKalyani
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
19961994 2008200620042002 201020001998 2012
Co-founded Sold
Founded Folded
Co-founded
Founded
CALI
FORN
IA
me my company
my hometown
stuff I did
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 Typestel, 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
• Attributesopacity, 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
top related