html5 introduction
TRANSCRIPT
Why you should upgrade to…
HTML5Praveen NairMicrosoft MVP, PMPhttp://www.ninethsense.com/
Buzz WordsResponsive Web Design
RWD
What is HTML5
HTML + JavaScript + CSS3
What is HTML5 Exam – 070-480
HTML + JavaScript + CSS3+ jQuery
Easy to start• Just <!DOCTYPE html>• No more - <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Self-validation of form elements<input type="email" placeholder="email address"
required />
Make elements editable<div contenteditable>Test</div>
Easier code maintenance• <section>• <header>• <footer>• <article>• <aside>• <nav>
Media<audio controls><source src=“test.mp3" type="audio/mpeg"></audio>
<video width="320" height="240" ><source src="movie.mp4" type="video/mp4"></video>
Web Storage• localStorage["bar"] = foo;• var foo = localStorage["bar"];
a lot of storage space on the client that persists beyond a page refresh and isn’t transmitted to the server
Geolocation• navigator.geolocation.getCurrentPosition(sho
wPosition);• function showPosition(position)
{// position.coords.latitude// position.coords.longitude; }
HTML4• Your old markup works still…
<CANVAS> API• “a resolution-dependent bitmap canvas that
can be used for rendering graphs, games graphics, or other visual images on the fly.”
WEB WORKER• No more long-running scripts which will freeze your browser. Run
your scripts in background.
w=new Worker(“workerfile.js");w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;};function stopWorker(){
w.terminate();}
Offline web applications• connect to the Internet• load a web page• disconnect from the Internet• work!
More input types<input type="search"><input type="number"><input type="range"><input type="color"><input type="tel"><input type="url">
<input type="date"><input type="month"><input type="week"><input type="time"><input type="datetime"><input type="datetime-local"><input type="email">
Server-Sent Eventsvar source=new EventSource(“test.aspx");source.onmessage=function(event){
alert(event.data);};
Drag-Drop• <img draggable="true">
SVG• <svg xmlns="http://www.w3.org/2000/svg"
version="1.1" height="190"><polygon points="100,10 40,180 190,60 10,60 160,180"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">< /svg>
Go MobileTechnology targeting not just PC, mobile
devices too…
Windows 8 Store Apps• Windows Application Development can be
done in HTML5… so HTML is no more just for web…
More…• WebSQL• MathML enhancements• WebSocket• MicroData
Browser compatibility
Most browsers supports HTML5. If not, they will support soon because they know they will die if not
Don’t Be Left Behind!• Start learning, if you have not started yet