Download to read offline
Uploaded byMarkiyan Matsekh
Html5 - ready yet?(ukr)
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
Html5 - ready yet?(ukr)
- 1. Мацех Маркіян developer @Eleks Ready yet?
- 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 XHTML1.0 HTML 4.01 HTML5 HTML 5 GML GoodEvil Tim Berners-Lee WHATWG W3C
- 5. ЗМІНИ Основні принципи прирозробці HTML5: 1. Підтримувати те, що вже існує 2. Мостити натоптані дороги 3. Пріоритети: • Користувачі • Девелопери + дизайнери • Реалізатори браузерів • Розробники документації • Здоровий глузд
- 6. Зміни Semantics Offline & Storage Deviceaccess Connectivity Multimedia 3D, Graphics, Effects Performance & Integration CSS3 Styling
- 7. Semantics “Мєлачь, нопріятна”
- 8. Semantics <!Doctype html> <div data- myattr=“yello!” /> <scriptsrc=“script.js”> </script> Forms 2.0 Microdata слабші вимоги до синтаксису html аналог стандартних дій js враховані особливості середовища рендерингу
- 9.
- 10. Вбудований функціонал, який раніше досягався черезjavascript Шрифти (тепер можна користуватися власними!) 3D (просто, як двері) Анімації Змінні! Слабий супорт=( CSS3
- 11.
- 12. Multimedia Нарешті! - Теги <audio>і <video> з очікуваним функціоналом - Вбудований програвач - API для управління потоком зі скриптів - Працює у всіх сучасних браузерах (правда не без проблем з форматами) jPlayer- зручна бібліотека для jQuery
- 13. Graphics Растрова графіка Ніякої інформаціїпро створені об’єкти з боку HTML Вища продуктивність Повний сапорт(з exCanvas для ІЕ) Векторна графіка Всі елементи записуються як XML- сутності Нижча продуктивність Старший, але менше сапорту Canvas Svg
- 14. Graphics Canvas javascript API varcanvas = 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.
- 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 ? DeviceAccess
- 19.
- 20.
- 21. Connectivity + • Двосторонній зв’язок •Новий протокол • Невелика свобода на транспортному рівні • Складнощі для сервера • Односторонній зв’язок • Надбудова над Http • Налагодження транспортного рівня • Простіша реалізація
- 22. Offline & Storage AppCache LocalStorage FileSystemAPI indexedDB(+WebSQL)
- 23. Performance & Integration XmlHttpRequest2Web 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.