Html5
•
2 likes•390 views
The document discusses HTML5 and provides an agenda for an HTML5 training session. It introduces HTML5 and covers new HTML5 elements, the <canvas> element for drawing graphics, and how to draw paths, boxes, circles and text on the canvas using JavaScript. It also briefly mentions HTML5 features for media, storage, and forms.
Report
Share
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (13)
Similar to Html5
Similar to Html5 (20)
Recently uploaded
Recently uploaded (20)
Html5
- 1. HTML5 Mehdi Jalal Trainer: Cresco Solu4on So5ware Developer: NETLINKS Email: mehdi@netlinks.af Skype: mehdijalal01 Afghanistan Workforce Development Program
- 3. Agenda • HTML5 Introduc4on • HTML5 New Elements • HTML5 Canvas • HTML5 SVG • HTML5 Drag/Drop • HTML5 Geoloca4on • HTML5 Video • HTML5 Audio • HTML5 Input Types
- 4. Agenda • HTML5 Form Elements • HTML5 Form ASributes • HTML5 Seman4c Elements • HMTL5 Web Storage • HMTL5 Applica4on Cache • HMTL5 Web Workers
- 5. HTML5 Introduc4on • What is HTML5? – HTML5 will be the standard for HTML – HTML 4.01 came in 1999. Web changed a lot! – HTML5 is s4ll work in progress – Major browsers support HTML5 elements & API • How Did HTML5 Get Started? – Coopera4on between World Wide Web Consor4um (W3C) and Web Hypertext Applica4on Technology Working Group (WHATWG)
- 6. HTML5 Introduc4on • The HTML5 <!DOCTYPE> – There is only one <!DOCTYPE> declara4on. Simple <!DOCTYPE html>
- 7. HTML5 Introduc4on • Minimum HTML5 Document <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
- 8. HTML5 Introduc4on • HTML5 New Features – The <canvas> element for 2D drawing – The <video> and <audio> elements for media playback – Support for local storage – New content-‐specific elements, like <ar4cle>, <footer>, <header>, <nav>, <sec4on> – New form controls, like calendar, date, 4me, email, url, search
- 9. HTML5 Introduc4on • Browser Support for HTML5 – Not full standard! – No browser has full support – In a con4nuous development (Chrome, Safari, Internet Explorer, Firefox, Opera)
- 11. HTML5 New Elements • Use of internet changed a lot since HTML 4.01 (1999) • Several HTML 4.01 elements are obsolete, never used or never used the way they were intended • To beSer handle todays internet, HTML5 brings new changes: New elements for drawing graphics, adding media content, beSer page structure, beSer form handling, and several APIs to drag/drop elements, find Geoloca4on, include web storage, applica4on cache, web workers, etc.
- 17. HTML5 New Elements • Removed Elements – <acronym> – <applet> – <basefont> – <big> – <center> – <dir> – <font> – <frame> – <frameset> – <noframes> – <strike> – <S>
- 18. HTML5 Canvas • The <canvas> element is used to draw graphics, on the fly, on a web page. • What is Canvas? – The HTML5 <canvas> element is used to draw graphics, on the fly, via scrip4ng (usually JavaScript). – The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. – Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.
- 19. HTML5 Canvas • Browser Support – Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element. – Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element. • Crea4ng a Canvas <canvas id="myCanvas" width="200" height="100"></canvas>
- 20. HTML5 Canvas • Tip: You can have mul4ple <canvas> elements on one HTML page. • Canvas example: <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
- 21. HTML5 Canvas • Draw Onto The Canvas With Javascript <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
- 22. HTML5 Canvas • Canvas Coordinates • This means: Start at the upper-‐le5 corner (0,0) and draw a 150x75 pixels rectangle.
- 23. HTML5 Canvas • Canvas Paths – To draw straight lines on a canvas, we will use the following two methods: • moveTo(x,y) defines the star4ng point of the line • lineTo(x,y) defines the ending point of the line – To actually draw the line, we must use one of the "ink" methods, like stroke(). var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();
- 24. HTML5 Canvas • To draw a circle on a canvas, we will use the following method: – arc(x,y,r,start,stop) • To actually draw the circle, we must use one of the "ink" methods, like stroke() or fill(). var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();
- 25. HTML5 Canvas • To draw text on a canvas, the most important property and methods are: – font -‐ defines the font proper4es for text – fillText(text,x,y) -‐ Draws "filled" text on the canvas – strokeText(text,x,y) -‐ Draws text on the canvas (no fill) Using fillText(): var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50);
- 26. HTML5 Canvas Using strokeText(): var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);
- 27. HTML5 SVG • HTML5 has support for inline SVG. • What is SVG? – SVG stands for Scalable Vector Graphics – SVG is used to define vector-‐based graphics for the Web – SVG defines the graphics in XML format – SVG graphics do NOT lose any quality if they are zoomed or resized – Every element and every aSribute in SVG files can be animated – SVG is a W3C recommenda4on
- 28. HTML5 SVG • Advantages of using SVG over other image formats (like JPEG and GIF) are: – SVG images can be created and edited with any text editor – SVG images can be searched, indexed, scripted, and compressed – SVG images are scalable – SVG images can be printed with high quality at any resolu4on – SVG images are zoomable (and the image can be zoomed without degrada4on)
- 29. HTML5 SVG • Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support inline SVG. • Embed SVG Directly Into HTML Pages <!DOCTYPE html> <html> <body> <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> </body> </html>
- 30. HTML5 SVG • Differences Between SVG and Canvas – SVG is a language for describing 2D graphics in XML. – Canvas draws 2D graphics, on the fly (with a JavaScript). – SVG is XML based, which means that every element is available within the SVG DOM. You can aSach JavaScript event handlers for an element. – In SVG, each drawn shape is remembered as an object. If aSributes of an SVG object are changed, the browser can automa4cally re-‐render the shape. – Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgoSen by the browser. If its posi4on should be changed, the en4re scene needs to be redrawn, including any objects that might have been covered by the graphic.
- 31. HTML5 Canvas
- 32. HTML5 Drag & Drop • Drag and drop is a part of the HTML5 standard. • Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different loca4on. • In HTML5, drag and drop is part of the standard, and any element can be draggable. • Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support drag and drop.
- 33. HTML5 Drag & Drop <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69”> </body> </html>
- 34. HTML5 Geoloca4on • HTML5 Geoloca4on is used to locate a user's posi4on. • The HTML5 Geoloca4on API is used to get the geographical posi4on of a user. • Since this can compromise user privacy, the posi4on is not available unless the user approves it. • Browser Support – Internet Explorer 9+, Firefox, Chrome, Safari and Opera support Geoloca4on. – Note: Geoloca4on is much more accurate for devices with GPS, like iPhone.
- 35. HTML5 Geoloca4on <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML="Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
- 36. HTML5 Geoloca4on function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } }
- 37. HTML5 Geoloca4on • Displaying the result in a map function showPosition(position) { var latlon=position.coords.latitude +","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/ staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; }
- 38. HTML5 Video • Many modern websites show videos. HTML5 provides a standard for showing them. • Un4l now, there has not been a standard for showing a video/movie on a web page. • Today, most videos are shown through a plug-‐in (like flash). However, different browsers may have different plug-‐ins. • HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element. • Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <video> element. – Note: Internet Explorer 8 and earlier versions, do not support the <video> element.
- 39. HTML5 Video <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
- 40. HTML5 Video <!DOCTYPE html> <html> <body> <script> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; } </script> </body> </html>
- 41. HTML5 Audio • HTML5 provides a standard for playing audio files. • Un4l now, there has not been a standard for playing audio files on a web page. • Today, most audio files are played through a plug-‐in (like flash). However, different browsers may have different plug-‐ins. • HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element. • Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <audio> element. – Note: Internet Explorer 8 and earlier versions, do not support the <audio> element.
- 42. HTML5 Audio • HTML5 Audio – How it Works <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/ mpeg"> Your browser does not support the audio element. </audio>
- 43. HTML5 Audio
- 44. HTML5 Input Types • HTML5 has several new input types for forms. These new features allow beSer input control and valida4on. – color – date – date4me – date4me-‐local – email – month – number – range – search – tel – 4me – url – week • Note: Not all major browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields.
- 45. HTML5 Form Elements • HTML5 has the following new form elements: – <datalist> – <keygen> – <output> • Note: Not all major browsers support all the new form elements. However, you can already start using them; If they are not supported, they will behave as regular text fields.
- 46. HTML5 Form Elements • <datalist> – HTML5 <datalist> Element – The <datalist> element specifies a list of pre-‐ defined op4ons for an <input> element. – The <datalist> element is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-‐down list of pre-‐defined op4ons as they input data. – Use the <input> element's list aSribute to bind it together with a <datalist> element.
- 47. HTML5 Form Elements <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
- 48. HTML5 Form Elements • <keygen> – The purpose of the <keygen> element is to provide a secure way to authen4cate users. – The <keygen> tag specifies a key-‐pair generator field in a form. – When the form is submiSed, two keys are generated, one private and one public. – The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client cer4ficate to authen4cate the user in the future.
- 49. HTML5 Form Elements <form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>
- 50. HTML5 Form Elements • <output> – The <output> element represents the result of a calcula4on (like one performed by a script). <form oninput="x.value=parseInt(a.value) +parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>
- 51. HTML5 New Form Elements • HTML5 has several new aSributes for <form> and <input>. • New aSributes for <form>: – autocomplete – Novalidate • New aSributes for <input>: – autocomplete – autofocus – form – formac4on – formenctype – formmethod – formnovalidate – formtarget – height and width – list – min and max – mul4ple – paSern (regexp) – placeholder – required – step
- 52. HTML5 Seman4c Elements • What Are Seman4c Elements? – A seman4c element clearly describes its meaning to both the browser and the developer. – Examples of non-‐seman4c elements: <div> and <span> -‐ Tells nothing about its content. – Examples of seman4c elements: <form>, <table>, and <img> -‐ Clearly defines its content. – Internet Explorer 9+, Firefox, Chrome, Safari and Opera supports the seman4c elements described in this chapter.
- 54. HTML5 Web Storage • What is HTML5 Web Storage? – With HTML5, web pages can store data locally within the user's browser. – Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affec4ng the website's performance. – The data is stored in key/value pairs, and a web page can only access data stored by itself. – Web storage is supported in Internet Explorer 8+, Firefox, Opera, Chrome, and Safari.
- 55. HTML5 Web Storage • localStorage and sessionStorage – There are two new objects for storing data on the client: • localStorage -‐ stores data with no expira4on date • sessionStorage -‐ stores data for one session – Before using web storage, check browser support for localStorage and sessionStorage: if(typeof(Storage)!=="undefined") { // Yes! localStorage and sessionStorage support! // Some code..... } else { // Sorry! No web storage support.. }
- 56. HTML5 Web Storage • The localStorage Object – The localStorage object stores the data with no expira4on date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. localStorage.lastname="Smith"; document.getElementById("result").innerHTML ="Last name: " + localStorage.lastname;
- 57. HTML5 Web Storage • The sessionStorage Object – The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window. if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
- 58. HTML5 Applica4on Cache • With HTML5 it is easy to make an offline version of a web applica4on, by crea4ng a cache manifest file. • HTML5 introduces applica4on cache, which means that a web applica4on is cached, and accessible without an internet connec4on. • Applica4on cache gives an applica4on three advantages: – Offline browsing -‐ users can use the applica4on when they're offline – Speed -‐ cached resources load faster – Reduced server load -‐ the browser will only download updated/changed resources from the server
- 59. HTML5 Applica4on Cache <!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html> CACHE MANIFEST /theme.css /logo.gif /main.js CACHE MANIFEST /theme.css /logo.gif /main.js FALLBACK: /html/ /offline.html
- 60. HTML5 Web Workers • A web worker is a JavaScript running in the background, without affec4ng the performance of the page. • When execu4ng scripts in an HTML page, the page becomes unresponsive un4l the script is finished. • A web worker is a JavaScript that runs in the background, independently of other scripts, without affec4ng the performance of the page. You can con4nue to do whatever you want: clicking, selec4ng things, etc., while the web worker runs in the background.
- 61. HTML5 Web Workers <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <br><br> <script> var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script>
- 62. HTML5 Web Workers var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); Demo_workers.js
- 64. QUESTIONS?