Html5 - ready yet?(ukr)

  • Published on
    07-Jul-2015

  • View
    2.972

  • Download
    0

Embed Size (px)

DESCRIPTION

Presentation about capabilities of html5 and when to start using them. Ehnanced and upgraded version of my previous presentation about html5 There are examples - right here http://www.slideshare.net/markiyanmatsekh/html5-examples-10660313

Transcript

<ul><li> 1. developer @ Eleks Ready yet? </li></ul> <p> 2. html5 + 3. HTML5? Wiki : HTML5 is a language for structuring and presenting content for the World Wide Web HTML5: - - - - , html - , So this is the problem that HTML5 set out to solve: to provide a standardized API, implemented natively and consistently in multiple browsers, without having to rely on third-party plugins. 4. SGML HTML 2.0 XHTML 2.0 XHTML 1.0 HTML 4.01 HTML5 HTML 5 GML GoodEvil Tim Berners-Lee WHATWG W3C 5. HTML5: 1. , 2. 3. : + 6. Semantics Offline &amp; Storage Device access Connectivity Multimedia 3D, Graphics, Effects Performance &amp; Integration CSS3 Styling 7. Semantics , 8. Semantics </p> <p> Forms 2.0 Microdata html js 9. CSS3 10. , javascript ( !) 3D (, ) ! =( CSS3 11. CSS3 12. Multimedia ! - - - API - ( ) jPlayer- jQuery 13. Graphics HTML ( exCanvas ) XML- , Canvas Svg 14. Graphics Canvas javascript API var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.beginPath(); ctx.moveTo(30, 30); ctx.lineTo(150, 150); ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); ctx.lineTo(30, 30); ctx.fill(); OpenGL? - WebGL. 15. function beginCall() { navigator.getUserMedia(audio, video, onGotStream); } function onGotStream(stream) {/*do some logic*/} Audio/video Capture Device Access 16. Device Access Geolocation! 17. Device Access Geolocation! navigator.geolocation.getCurrentPosition(callback); // function callback(geoPos) { var latitude = geoPos.coords.latitude; var longitude = geoPos.coords.longitude var street = geoPos.address.street;// } var watchID = navigator.geolocation.watchPosition(onUpdateLocation); navigator.geolocation.clearWatch(watchID)// 18. Mobile APIs ? Device Access 19. Connectivity 20. Connectivity 21. Connectivity + Http 22. Offline &amp; Storage AppCache LocalStorage FileSystem API indexedDB(+WebSQL) 23. Performance &amp; Integration XmlHttpRequest2 Web Workers Js optimization 24. , , Multiple file upload Drag and Drop History API Web Audio API 25. ***? 26. html5 ? Web Sockets Media History API Web storage CORS Canvas Facebook + + + + Google + + + Vkontakte + + Yandex + + + 27. ? 28. html5? 29. html5? 30. html5? 31. html5? 32. 33. html5 34. 35. </p>