Download - Html5 Introduction
![Page 1: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/1.jpg)
Why you should upgrade to…
HTML5Praveen NairMicrosoft MVP, PMPhttp://www.ninethsense.com/
![Page 2: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/2.jpg)
Buzz WordsResponsive Web Design
RWD
![Page 3: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/3.jpg)
What is HTML5
HTML + JavaScript + CSS3
![Page 4: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/4.jpg)
What is HTML5 Exam – 070-480
HTML + JavaScript + CSS3+ jQuery
![Page 5: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/5.jpg)
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">
![Page 6: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/6.jpg)
Self-validation of form elements<input type="email" placeholder="email address"
required />
![Page 7: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/7.jpg)
Make elements editable<div contenteditable>Test</div>
![Page 8: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/8.jpg)
Easier code maintenance• <section>• <header>• <footer>• <article>• <aside>• <nav>
![Page 9: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/9.jpg)
Media<audio controls><source src=“test.mp3" type="audio/mpeg"></audio>
<video width="320" height="240" ><source src="movie.mp4" type="video/mp4"></video>
![Page 10: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/10.jpg)
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
![Page 11: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/11.jpg)
Geolocation• navigator.geolocation.getCurrentPosition(sho
wPosition);• function showPosition(position)
{// position.coords.latitude// position.coords.longitude; }
![Page 12: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/12.jpg)
HTML4• Your old markup works still…
![Page 13: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/13.jpg)
<CANVAS> API• “a resolution-dependent bitmap canvas that
can be used for rendering graphs, games graphics, or other visual images on the fly.”
![Page 14: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/14.jpg)
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();}
![Page 15: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/15.jpg)
Offline web applications• connect to the Internet• load a web page• disconnect from the Internet• work!
![Page 16: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/16.jpg)
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">
![Page 17: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/17.jpg)
Server-Sent Eventsvar source=new EventSource(“test.aspx");source.onmessage=function(event){
alert(event.data);};
![Page 18: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/18.jpg)
Drag-Drop• <img draggable="true">
![Page 19: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/19.jpg)
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>
![Page 20: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/20.jpg)
Go MobileTechnology targeting not just PC, mobile
devices too…
![Page 21: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/21.jpg)
Windows 8 Store Apps• Windows Application Development can be
done in HTML5… so HTML is no more just for web…
![Page 22: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/22.jpg)
More…• WebSQL• MathML enhancements• WebSocket• MicroData
![Page 23: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/23.jpg)
Browser compatibility
Most browsers supports HTML5. If not, they will support soon because they know they will die if not
![Page 24: Html5 Introduction](https://reader036.vdocument.in/reader036/viewer/2022062513/554ea029b4c905fb7c8b45ff/html5/thumbnails/24.jpg)
Don’t Be Left Behind!• Start learning, if you have not started yet