Empfohlen
Weitere Àhnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Andere mochten auch
Andere mochten auch (8)
Ăhnlich wie Be HTML5-ready today
Ăhnlich wie Be HTML5-ready today (20)
KĂŒrzlich hochgeladen
KĂŒrzlich hochgeladen (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
Hinweis der Redaktion
- ĐĄĐ”ĐŒĐ°ĐœŃĐžŃĐ”ŃĐșĐžĐč 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