Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Destacado
Destacado (8)
Similar a Be HTML5-ready today
Similar a Be HTML5-ready today (20)
Último
Último (20)
Be HTML5-ready today
- 1. HTML5 and related technologies
- 2. Oleksandr Khomenko twitter.com/okhomenko okhomenko@gmail.com I am from Ukraine and work in Petrosoft I’m from here
- 3. HTML5 and friends /by @rem (Remy Sharp)
- 4. Past. How did we get here?
- 13. Tons of candies!
- 14. HTML5 in 5 seconds
- 15. <!DOCTYPE html>
- 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"/>
- 18. <!DOCTYPE html> <html> <head> <meta charset=“utf-8”/>
- 20. nav
- 21. article
- 22. aside
- 23. hgroup
- 24. header
- 25. footer
- 26. time
- 28. document.createElement(“header”); document.createElement(“nav”); document.createElement(“aside”); … OR <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
- 29. CSS article, aside, figure, footer, header, hgroup, nav, section { display: block; }
- 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>
- 35. url
- 36. phone
- 37. number
- 39. datetime
- 40. month
- 41. Week
- 42. time
- 44. Video and audio
- 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>
- 47. controls
- 48. preload (auto, none, meta)
- 49. poster
- 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>
- 54. Support:
- 55. Geolocation API
- 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."); }
- 59. History API
- 61. Web Storage, Web SQL Databases
- 62. Drag n Drop
- 63. Web Sockets
- 64. In Chrome Frame we trust!
- 65. Resources html5doctor.com html5rocks.com diveintohtml5.org brucelawson.co.uk remysharp.com
Notas del editor
- Семантический 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