More Related Content Similar to Be HTML5-ready today Similar to Be HTML5-ready today (20) 16. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 31. What is that? <nav> <header> <h1>What do you plan to do on Friday’s evening?</h1> </header> <ul> <li><a href=“/menu/aval” data-title=“Raiffeisen Bank Aval”>Get money</a></li> <li><a href=“/menu/beerloga” data-title=“Drink till dawn”>Drink Beeeer!</a></li> </ul> </nav> <script> $(“nav a”).click(function(){ var cost = $(this).attr(“data-fullinfo”); alert(“You are going to ” + $(this).attr(“data-title”)); }); </script> 33. Autofocus: <form> <input name="q" autofocus> <input type="submit" value="Search"> </form> 45. Earlier and now: <object width="425" height="344"> <param name="movie" value="http://www.youtube.com/9sEI1AUFJKw" /> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <embed src="http://www.youtube.com/ 9sEI1AUFJKw" type="application/x-shockwave-flash width="425" height="344"> </embed> </object> HTML5 way: <video src=web.ogv></video> HTML5 way (+legacy browsers): <video src=format.ogv> Download the <a href=format.ogv>How to format c:</a> </video> 51. Common way: <video controls> <source src=format.ogv type=’video/ogg; codecs="theora, vorbis"'> <source src=formt.mp4 type=’video/mp4; codecs="avc1.42E01E, mp4a.40"> <p>Your browser doesn’t support video. Please download the video in <a href=format.ogv>Ogg</a></p> </video> 52. Common way (+legacy): <video controls> <source src=format.ogv type=’video/ogg; codecs="theora, vorbis"'> <source src=formt.mp4 type=’video/mp4; codecs="avc1.42E01E, mp4a.40"> <embed src="http://www.youtube.com/v/cmtcc94Tv3A" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> </video> 53. Steroids: <video> <source src=“format-low.ogv” media="(min-device-width: 800px)“> </video> 56. Get current location vargl = navigator.geolocation; gl.getCurrentPosition(displayPosition, displayError); function displayPosition(position) { alert(“Latitude: “ + position.coords.latitude + “, Longitude: “ + position.coords.longitude); } function displayError(positionError) { alert("error"); } gl.watchPosition(successCallback, errorCallback, options); 57. Get current location vargl = navigator.geolocation; gl.getCurrentPosition(displayPosition, displayError); function displayPosition(position) { alert(“Latitude: “ + position.coords.latitude + “, Longitude: “ + position.coords.longitude); } function displayError(positionError) { alert("error"); } gl.watchPosition(successCallback, errorCallback, options); 58. Fallback: vargl = null; function displayPosition(position) { alert(“Latitude: “ + position.coords.latitude + “, Longitude: “ + position.coords.longitude); } function displayError(positionError) { alert("error"); } try { if (typeof(navigator.geolocation) == 'undefined'){ gl = google.gears.factory.create('beta.geolocation'); } else { gl = navigator.geolocation; } } catch(e) {} if (gl) { gl.getCurrentPosition(displayPosition, displayError); } else { alert("Geolocation services are not supported by your web browser."); } Editor's Notes Семантический HTML.Центральная задача HTML5 это предоставить набор семантических элементов разработчику. Большый выбор тегов, атрибутов. App Cache, Local Storage, Indexed DB, File API GeoLocation and now being developing access to microphones, camera. WebSockets, Server-Sent Events Audio, video SVG, Canvas, WebGL, and CSS3 3D features Xhr2, webworkers Tons of candies
