Thuyết trình về HTML5

HTML5 Presenter: Tuan Anh Nguyen Computer Network & Communication University of Information Technology What is HTML5      HTML: Hypertext Markup Language 1991: Tim Berners-Lee proposes 1 st Spec for HTML 1999: HTML4.0.1 HTML5 will be the new standard of HTML HTML5 is work in progress (but some browsers have implemented its features) References: http://www.w3schools.com/html5/ How HTML5 is constructed  HTML5 is a cooperation between the W3C and the Web Hypertext Application Technology Working Group (WHATWG).  Some rules for HTML5 were established:       New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the public Example of HTML5 document This is HTML5 ! Very simple Title of the document The content of the document...... HTML5 new features       The element for 2D drawing The and elements for media playback Support for local storage New content-specific elements, like , , , , New form controls, like calendar, date, time, email, url, search Browser Support for HTML5: Chrome, Firefox, IE, Opera, Safari,…  http://html5test.com Html5test.com Tag Description Defines an article Defines content aside from the page content Isolates a part of text that might be formatted in a different direction from other text outside it New Elements in HTML5 Defines a command button that a user can invoke Defines additional details that the user can view or hide  New Semantic/Structure Defines a visible Elements heading for a element Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. Defines a caption for a element Defines a footer for a document or section Specifies an introduction, or a group of navigation elements for a document Groups a set of to elements when a heading has multiple levels Defines marked/highlighted text Defines a scalar measurement within a known range (a gauge) Defines navigation links Represents the progress of a task Defines a ruby annotation (for East Asian typography) Defines an explanation/pronunciation of characters (for East Asian typography) Defines what to show in browsers that do not support ruby annotations New Media elements Tag Description Defines sound content Defines a video or movie Defines multiple media resources for and Defines a container for an external application or interactive content (a plug-in) Defines text tracks for and New Canvas Tag Description Used to draw graphics, on the fly, via scripting (usually JavaScript) New form elements Tag Description Specifies a list of pre-defined options for input controls Defines a key-pair generator field (for forms) Defines the result of a calculation Removed Elements  The following HTML 4.01 elements are removed from HTML5:  , , ,  , , ,  , , , , HTML5 Video  To show a video clip in HTML5, very simple: Your browser does not support the video tag. Video formats and Browser Support Browser MP4 WebM Ogg Internet Explorer 9 YES NO NO Firefox 4.0 NO YES YES Google Chrome 6 YES YES YES Apple Safari 5 YES NO NO Opera 10.6 NO YES YES HTML5 Video Tags Tag Description Defines a video or movie Defines multiple media resources for media elements, such as and Defines text tracks in mediaplayers HTML5 - Methods, Properties, and Events Methods Properties Events play() currentSrc play pause() currentTime pause load() videoWidth progress canPlayType videoHeight error duration timeupdate ended ended error abort paused empty muted emptied seeking waiting volume loadedmetadata height HTML5 Audio  HTML5 Audio Your browser does not support the audio element. Browser MP3 Wav Ogg Internet Explorer 9 YES NO NO Firefox 4.0 NO YES YES Google Chrome 6 YES YES YES Apple Safari 5 YES YES NO Opera 10.6 NO YES YES HTML5 Drag and Drop  Drag and Drop is part of HTML5 standard  Browser support How to drag & drop  Set attribute   The dataTransfer.setData() method sets the data type and the value of the dragged data  function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }  function allowDrop(ev) {ev.preventDefault();} function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id);} function drop(ev){ var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)) ; ev.preventDefault(); } Try this: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop Code explain  Get the dragged data with the dataTransfer.getData("Text") method. This method will return any data that was set to the same type in the setData() method    The dragged data is the id of the dragged element ("drag1") Append the dragged element into the drop element Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop) HTML5 Canvas   Canvas is used to draw graphics Create canvas:   Draw with Javascript var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); Understanding Cordinates Another Example Your browser does not support the canvas element. var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(70,18,15,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); HTML5 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 attribute in SVG files can be animated SVG is a W3C recommendation SVG Advantages       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 resolution SVG images are zoomable (and the image can be zoomed without degradation) Example HTML5 Geolocation  Geolocation API is used to get the geographical position of a user.  Since this can compromise user privacy, the position is not available unless the user approves it.  Browsers support:  Click the button to get your coordinates: Try It var x=document.getElementById("demo"); function getLocation(){ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosi tion);} else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude; } Demo explain     Check if Geolocation is supported If supported, run the getCurrentPosition() method. If not, display a message to the user If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter ( showPosition )  The showPosition() function gets the displays the Latitude and Longitude Handling Errors and Rejections 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; } } Display on 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=""; } The getCurrentPosition() Method Property Description coords.latitude The latitude as a decimal number coords.longitude The longitude as a decimal number coords.accuracy The accuracy of position coords.altitude coords.altitude The altitude in meters above the mean sea level coords.speed The speed in meters per second coords.heading The heading as degrees clockwise from North timestamp The date/time of the response Geolocation object  watchPosition() - Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car).  clearWatch() - Stops the watchPosition() method. Geolocation object (cont.) var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude; } HTML5 Web Storage   Web storage? i.e. web pages can store data locally within the user's browser. There are two new objects for storing data on the client:  localStorage - stores data with no expiration date  sessionStorage - stores data for one session if(typeof(Storage)!=="undefined”) { // Yes! localStorage and sessionStorage support! } else { // Sorry! No web storage support.. }  if(typeof(Storage)!=="undefined") { localStorage.lastname="Smith"; document.getElementById("result").innerHTML="Last name: " + localStorage.lastname; } Else { document.getElementById("result").innerHTML="Sorry, your browser does not support web storage..."; } Button Clicked n time(s)  If the browser is closed, start the same URL, the button count continues at last number, i.e., counter is not reset if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1; } else { localStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s)."; The sessionStorage Object  The counter is reset if the session is closed. 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."; HTML5 Application Cache   A web application is cached, and accessible without an internet connection. Application cache gives an application three advantages:    Offline browsing - users can use the application when they're offline Speed - cached resources load faster Reduced server load - the browser will only download updated/changed resources from the server Example: cached Application Get Date and Time Try opening this page, then go offline, and reload the page. The script and the image should still work. The Manifest File  The manifest file is a simple text file, which tells the browser what to cache (and what to never cache).  The manifest file has three sections:  CACHE MANIFEST - Files listed under this header will be cached after they are downloaded for the first time  NETWORK - Files listed under this header require a connection to the server, and will never be cached  FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible Example of Manifest file CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /offline.html Updating the Cache  Once an application is cached, it remains cached until one of the following happens:  The user clears the browser's cache  The manifest file is modified (see tip below)  The application cache is programmatically updated HTML5 Web Workers  When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.  A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background. Check Web Worker Support if(typeof(Worker)!=="undefined") { // Yes! Web worker support! // Some code..... } else { // Sorry! No Web Worker support.. } Create a WW file: demoWW.js var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); Create a Web Worker Object   w = new Worker(“demoWW.js”); Then w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; };  When the web worker posts a message, the code within the event listener is executed. The data from the web worker is stored in event.data.  w.terminate(); [...]... height HTML5 Audio  HTML5 Audio Your browser does not support the audio element Browser MP3 Wav Ogg Internet Explorer 9 YES NO NO Firefox 4.0 NO YES YES Google Chrome 6 YES YES YES Apple Safari 5 YES YES NO Opera 10.6 NO YES YES HTML5 Drag and Drop  Drag and Drop is part of HTML5. ..Removed Elements  The following HTML 4.01 elements are removed from HTML5:  , , ,  , , ,  , , , , HTML5 Video  To show a video clip in HTML5, very simple: ... NO Firefox 4.0 NO YES YES Google Chrome 6 YES YES YES Apple Safari 5 YES NO NO Opera 10.6 NO YES YES HTML5 Video Tags Tag Description Defines a video or movie Defines multiple media resources for media elements, such as and Defines text tracks in mediaplayers HTML5 - Methods, Properties, and Events Methods Properties Events play() currentSrc play pause()... ondragover="allowDrop(event)"> Try this: http://www.w3schools.com /html5/ tryit.asp?filename=tryhtml5_draganddrop Code explain  Get the dragged data with the dataTransfer.getData("Text") method This method will return any data that was set to the same type in the setData() method ... is the id of the dragged element ("drag1") Append the dragged element into the drop element Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop) HTML5 Canvas   Canvas is used to draw graphics Create canvas:   Draw with Javascript var c=document.getElementById("myCanvas");... c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(70,18,15,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); HTML5 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... xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> HTML5 Geolocation  Geolocation API is used to get the geographical position of a user  Since this can compromise user privacy, the position is not available unless the user approves it  Browsers support:... else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude; } HTML5 Web Storage   Web storage? i.e web pages can store data locally within the user's browser There are two new objects for storing data on the client:  localStorage - stores data with no expiration ... http://www.w3schools.com /html5/ How HTML5 is constructed  HTML5 is a cooperation between the W3C and the Web Hypertext Application Technology Working Group (WHATWG)  Some rules for HTML5 were established:...What is HTML5      HTML: Hypertext Markup Language 1991: Tim Berners-Lee proposes st Spec for HTML 1999: HTML4.0.1 HTML5 will be the new standard of HTML HTML5 is work in progress... More markup to replace scripting HTML5 should be device independent The development process should be visible to the public Example of HTML5 document This is HTML5 ! Very simple