Example can be found here http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_imgWebGL is based on the use of the canvashttp://js13kgames.com/games/johnny-smiter-13th-knight/index.html
Example can be found here http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation
Video tag reference is http://www.w3schools.com/tags/tag_video.asphttp://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_posterhttp://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop
Audio tag reference http://www.w3schools.com/tags/tag_audio.aspThe HTML5 DOM has methods, properties, and events for the <audio> and <video> elements.For more information visit http://www.w3schools.com/tags/ref_av_dom.asp
Web Storage uses two kinds of storage local storage and session storageExample can be found here http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_local_clickcount
1) 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 timeNETWORK - Files listed under this header require a connection to the server, and will never be cachedFALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible CACHE MANIFEST# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsNETWORK:login.aspFALLBACK:/html/ /offline.html2) Example http://www.w3schools.com/html/tryhtml5_html_manifest.htm3) If you wanted to update cache you either update manifest file or call window.applicationCache.update()
For example on web workers visit http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webworker
Input list example http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_datalistOutput example http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_output
New attributes for <form>:autocompleteNovalidateNew attributes for <input>:autocompleteautofocusformformactionformenctypeformmethodformnovalidateformtargetheight and widthlistmin and maxmultiplepattern (regexp)placeholderrequiredstep<Video >:AutoplayLoopControlsWidthHeightPosterSrcPreload<Audio>:AutoplayLoopControlsSrcPreload
What is HTML51) HTML5 will be the new standard forHTML.2) HTML5 is a cooperation between theWorld Wide Web Consortium (W3C) and theWeb Hypertext Application TechnologyWorking Group (WHATWG).
New Features in HTML51) Canvas2) Geo Location3) Video and Audio4) Web storage5) Application Cache6) Server sent events7) Web Workers8) New Form Input types9) New Form Elements10) New Form Attributes
Canvas• canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element. var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);• To get canvas reference visit this link http://www.w3schools.com/tags/ref_canvas.asp
Geo Location• The HTML5 Geo location API is used to get the geographical position of a user.• We user the navigator object to get current position of the application.• To get more information visit http://www.w3schools.com/html/html5_geolocatio n.asp navigator.geolocation.getCurrentPosition(showPosition); navigator.geolocation.watchPosition(showPosition);
Video Element1) HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element. Browser MP4 WebM Ogg Internet YES NO NO Explorer 9+ Chrome 6+ YES YES YES Firefox 3.6+ NO YES YES Safari 5+ YES NO NO Opera 10.6+ NO YES YES
Sound Element1) HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element. Internet Explorer YES NO NO 9+ Chrome 6+ YES YES YES Firefox 3.6+ NO YES YES Safari 5+ YES YES NO Opera 10+ NO YES YES
Web StorageWith HTML5, web pages can store data locallywithin the users browser.Earlier, this was done with cookies. However, WebStorage is more secure and faster. The data is notincluded with every server request, but usedONLY when asked for. It is also possible to storelarge amounts of data, without affecting thewebsites performance.The data is stored in key/value pairs, and a webpage can only access data stored by itself.
Application Cache1. HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.2. Application cache gives an application three advantages: 1. Offline browsing - users can use the application when theyre offline 2. Speed - cached resources load faster 3. Reduced server load - the browser will only download updated/changed resources from the server3. To enable application cache, include the manifest attribute in the documents <html> tag.
Server Sent Events1. A server-sent event is when a web page automatically gets updates from a server.2. 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.3. Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.4. The EventSource object is used to receive server- sent event notifications5. Each time an update is received, the onmessage event occurs
New Form Input typesHtml 5 provide new input types like 1. color 2. date 3. datetime 4. datetime-local 5. email 6. month 7. number 8. range 9. search 10.tel 11. time 12.url 13. week
New Form ElementsHTML5 has the following new formelements: 1. <datalist> 2. <keygen> 3. <output>
Form AttributesHtml5 added new attribute to new and existing html tagslike video , audio , form and input tags
Other Features of HTML51) Communication API2) Web Socket API
HTML5 with MVCThere are MVC toolkits that supports HTML5like :ASP.net MVC HTML5 ToolkitKendu UI