2. What is HTML5? HTML5 will be the new standard for HTML. The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then. HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.

3. 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.

6. Minimum HTML5 Document Title of the document The content of the document......

7. Video HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the element.

8. Example Your browser does not support the video tag.

9. Video Formats and Browser Support BrowserMP4WebMOgg Internet Explorer 9YESNO Firefox 4.0NOYES Google Chrome 6YES Apple Safari 5YESNO Opera 10.6NOYES

10. HTML5 Video Tags TagDescription Defines a video or movie Defines multiple media resources for media elements, such as and Defines text tracks in mediaplayers

11. HTML5 - Methods, Properties, and Events MethodsPropertiesEvents play()currentSrcplay pause()currentTimepause load()videoWidthprogress canPlayTypevideoHeighterror durationtimeupdate ended errorabort pausedempty mutedemptied seekingwaiting volumeloadedmetadata height width

12. DEMO http://www.craftymind.com/factory/html5video/Canv asVideo.html http://www.craftymind.com/factory/html5video/Canv asVideo.html http://mrdoob.github.com/three.js/examples/canvas_ materials_video.html http://mrdoob.github.com/three.js/examples/canvas_ materials_video.html

13. Video + DOM There are methods for playing, pausing, and loading, for example. There are properties (e.g. duration, volume, seeking) that you can read or set. There are also DOM events that can notify you, for example, when the element begins to play, is paused, is ended, etc.

14. Example … Your browser does not support HTML5 video. var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } ¡K. …

15. HTML5 - Methods, Properties, and Events MethodsPropertiesEvents play()currentSrcplay pause()currentTimepause load()videoWidthprogress canPlayTypevideoHeighterror durationtimeupdate ended errorabort pausedempty mutedemptied seekingwaiting volumeloadedmetadata height width

16. DEMO http://sublimevideo.net/

17. Audio Until 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 element.

18. Example Your browser does not support the audio element.

19. Audio Formats and Browser Support BrowserMP3WavOgg Internet Explorer 9 YESNO Firefox 4.0NOYES Google Chrome 6 YES Apple Safari 5YES NO Opera 10.6NOYES

20. HTML5 Audio Tags TagDescription Defines sound content Defines multiple media resources for media elements, such as and

21. DEMO http://www.speakker.com/

22. Canvas The HTML5 element is used to draw graphics, on the fly, via scripting (usually JavaScript). The element is only a container for graphics, you must use a script to actually draw the graphics. A canvas is a drawable region defined in HTML code with height and width attributes. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

23. Canvas 2D var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext.stroke();

24. Canvas API

25. Canvas 3D(WebGL) var gl = document.getElementById("canvas").getContext("experimental- webgl"); gl.viewport(0, 0, canvas.width, canvas.height);...

26. Canvas 3D Plane http://www.html5canvastutorials.com/webgl/html5- canvas-webgl-plane-with-three-js/

27. WebGL API http://www.nihilogic.dk/labs/webgl_cheat_sheet/Web GL_Cheat_Sheet.htm

28. DEMO http://www.benjoffe.com/code/ http://alteredqualia.com/canvasmol/

29. 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

30. 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)

31. Example Example 網頁 http://slides.html5rocks.com/#inline-svg

32. Attributes of the tag preserveAspectRatio style version viewbox xmlns="http://www.w3.org /2000/svg" The xmlns attribute declares the namespace for all of the SVG elements. Since the xmlns attribute is inherited by child elements and descendants, it does not need to be coded on other tags in the content of the svg element, unless they are in a different namespace such as the HTML namespace.namespaceHTML namespace

33. Attributes of the tag cx, cy center rradius Attributes of the tag x1, y1 x2, y2

34. Attributes of the tag fx, fy r spreadMet hod Attributes of the tag x,yx,y width, height

35. Attributes of the tag offset stylestop-color: stop-opacity:

36. DEMO http://www.deltaxml.com/attachment/130- dxml/tiger.svg http://www.deltaxml.com/attachment/130- dxml/tiger.svg

37. Geolocation The HTML5 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.

38. Example Click the button to get your coordinates: Try It 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 + " Longitude: " + position.coords.longitude; }

39. DEMO http://html5example.net/static/demo/current- location.html http://html5example.net/static/demo/current- location.html

40. Offline / 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 affecting the website's performance. The data is stored in key/value pairs, and a web page can only access data stored by itself.

41. LocalStorage and SessionStorage There are two new objects for storing data on the client: localStorage - stores data with no expiration date sessionStorage - stores data for one session

42. LocalStorage Example http://portal.csie.thu.edu.tw:8066/html5/localstorage. html http://portal.csie.thu.edu.tw:8066/html5/localstorage. html localStorage.clickcount=Number(localStorage.clickc ount)+1; document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

43. SessionStorage: Example http://portal.csie.thu.edu.tw:8066/html5/sessionstora ge.html http://portal.csie.thu.edu.tw:8066/html5/sessionstora ge.html sessionStorage.clickcount=Number(sessionStorage.c lickcount)+1; document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

44. Application Cache HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection. Application cache gives an application three advantages: 1. Offline browsing - users can use the application when they're offline 2. Speed - cached resources load faster 3. Reduced server load - the browser will only download updated/changed resources from the server

45. Application Cache: Example Get Date and Time Try opening this page, then go offline, and reload the page. The script and the image should still work.

46. demo_html.appcache CACHE MANIFEST demo_time.js img_logo.gif

47. The Manifest File 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

48. 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.

49. Web Workers: Example var w; function startWorker() { if(typeof(Worker)!=="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(); }

50. Server-Sent Events A server-sent event is when a web page automatically gets updates from a server. This was also possible before, but the web page would have to ask if any updates were available. With server- sent events, the updates come automatically.

51. Server-Sent Events: Example Getting server updates if(typeof(EventSource)!=="undefined") { var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + " "; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events..."; }