Мацех Маркіян
developer @ Eleks
Ready yet?
ПЛАН ПРЕЗЕНТАЦІЇ
• Вступ
• Історія
• Детальніше про фічі
• Як і чому юзають html5
• Висновки
• Запитання + приклади
ЩО ТАКЕ HTML5?
Wiki каже:
HTML5 is a language for structuring and presenting content for the World Wide Web
HTML5:
- давно...
ІСТОРІЯ
SGML
HTML 2.0
XHTML 2.0
XHTML 1.0
HTML 4.01
HTML5
HTML 5
GML
GoodEvil
Tim Berners-Lee
WHATWG
W3C
ЗМІНИ
Основні принципи при розробці HTML5:
1. Підтримувати те, що вже існує
2. Мостити натоптані дороги
3. Пріоритети:
• К...
Зміни
Semantics
Offline & Storage
Device access
Connectivity
Multimedia
3D, Graphics, Effects
Performance & Integration
CS...
Semantics “Мєлачь, но пріятна”
Semantics
<!Doctype
html>
<div data-
myattr=“yello!” />
<script src=“script.js”>
</script>
Forms 2.0
Microdata
слабші вимо...
CSS3
Вбудований
функціонал, який
раніше досягався
через javascript
Шрифти (тепер
можна
користуватися
власними!)
3D
(просто, як ...
CSS3
Multimedia
Нарешті!
- Теги <audio> і <video> з очікуваним функціоналом
- Вбудований програвач
- API для управління потоком...
Graphics
Растрова графіка
Ніякої інформації про
створені об’єкти з боку
HTML
Вища продуктивність
Повний сапорт(з
exCanvas ...
Graphics
Canvas javascript API
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fill...
function beginCall() {
navigator.getUserMedia(‘audio, video’, onGotStream);
}
function onGotStream(stream) {/*do some logi...
Device Access
Geolocation!
Device Access
Geolocation!
navigator.geolocation.getCurrentPosition(callback); // тут вискакує попапка
function callback(g...
Mobile APIs ?
Device Access
Connectivity
Connectivity
Він не
справляється з
поставленими
задачами
Connectivity
+
• Двосторонній зв’язок
• Новий протокол
• Невелика свобода на
транспортному рівні
• Складнощі для сервера
•...
Offline & Storage
AppCache
LocalStorage
FileSystem API
indexedDB(+WebSQL)
Performance & Integration
XmlHttpRequest2 Web Workers
Js optimization
Все решта,
або те, що не помістилося в попередні пункти
Multiple file upload
Drag and Drop
History API
Web Audio API
***ШО?
Як юзають html5 сьогодні?
Web
Sockets
Media History
API
Web
storage
CORS Canvas
Facebook + + + +
Google + + +
Vkontakte + ...
Що можна юзати сьогодні?
Чому потрібно знати html5?
Чому потрібно знати html5?
Чому потрібно знати html5?
Чому потрібно знати html5?
Висновки
Висновки
Чим більше ВИ використовуєте html5
тим швидше він буде готовий до споживання
Висновки
ЗАПИТАННЯ
Upcoming SlideShare
Loading in...5
×

Html5 - ready yet?(ukr)

2,978

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,978
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 - ready yet?(ukr)

  1. 1. Мацех Маркіян developer @ Eleks Ready yet?
  2. 2. ПЛАН ПРЕЗЕНТАЦІЇ • Вступ • Історія • Детальніше про фічі • Як і чому юзають html5 • Висновки • Запитання + приклади
  3. 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. 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. 5. ЗМІНИ Основні принципи при розробці HTML5: 1. Підтримувати те, що вже існує 2. Мостити натоптані дороги 3. Пріоритети: • Користувачі • Девелопери + дизайнери • Реалізатори браузерів • Розробники документації • Здоровий глузд
  6. 6. Зміни Semantics Offline & Storage Device access Connectivity Multimedia 3D, Graphics, Effects Performance & Integration CSS3 Styling
  7. 7. Semantics “Мєлачь, но пріятна”
  8. 8. Semantics <!Doctype html> <div data- myattr=“yello!” /> <script src=“script.js”> </script> Forms 2.0 Microdata слабші вимоги до синтаксису html аналог стандартних дій js враховані особливості середовища рендерингу
  9. 9. CSS3
  10. 10. Вбудований функціонал, який раніше досягався через javascript Шрифти (тепер можна користуватися власними!) 3D (просто, як двері) Анімації Змінні! Слабий супорт=( CSS3
  11. 11. CSS3
  12. 12. Multimedia Нарешті! - Теги <audio> і <video> з очікуваним функціоналом - Вбудований програвач - API для управління потоком зі скриптів - Працює у всіх сучасних браузерах (правда не без проблем з форматами) jPlayer- зручна бібліотека для jQuery
  13. 13. Graphics Растрова графіка Ніякої інформації про створені об’єкти з боку HTML Вища продуктивність Повний сапорт(з exCanvas для ІЕ) Векторна графіка Всі елементи записуються як XML- сутності Нижча продуктивність Старший, але менше сапорту Canvas Svg
  14. 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. 15. function beginCall() { navigator.getUserMedia(‘audio, video’, onGotStream); } function onGotStream(stream) {/*do some logic*/} Audio/video Capture Device Access
  16. 16. Device Access Geolocation!
  17. 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. 18. Mobile APIs ? Device Access
  19. 19. Connectivity
  20. 20. Connectivity Він не справляється з поставленими задачами
  21. 21. Connectivity + • Двосторонній зв’язок • Новий протокол • Невелика свобода на транспортному рівні • Складнощі для сервера • Односторонній зв’язок • Надбудова над Http • Налагодження транспортного рівня • Простіша реалізація
  22. 22. Offline & Storage AppCache LocalStorage FileSystem API indexedDB(+WebSQL)
  23. 23. Performance & Integration XmlHttpRequest2 Web Workers Js optimization
  24. 24. Все решта, або те, що не помістилося в попередні пункти Multiple file upload Drag and Drop History API Web Audio API
  25. 25. ***ШО?
  26. 26. Як юзають html5 сьогодні? Web Sockets Media History API Web storage CORS Canvas Facebook + + + + Google + + + Vkontakte + + Yandex + + +
  27. 27. Що можна юзати сьогодні?
  28. 28. Чому потрібно знати html5?
  29. 29. Чому потрібно знати html5?
  30. 30. Чому потрібно знати html5?
  31. 31. Чому потрібно знати html5?
  32. 32. Висновки
  33. 33. Висновки Чим більше ВИ використовуєте html5 тим швидше він буде готовий до споживання
  34. 34. Висновки
  35. 35. ЗАПИТАННЯ
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×