Post on 07-Jul-2015
description
Мацех Маркіян developer @ Eleks
Ready yet?
ПЛАН ПРЕЗЕНТАЦІЇ
• Вступ
• Історія
• Детальніше про фічі
• Як і чому юзають html5
• Висновки
• Запитання + приклади
ЩО ТАКЕ 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.»
ІСТОРІЯ
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
CSS3 Styling
Semantics “Мєлачь, но пріятна”
Semantics
<!Doctype html>
<div data-myattr=“yello!” />
<script src=“script.js”></script>
Forms 2.0
Microdata
слабші вимоги до синтаксису
html аналог стандартних дій js
враховані особливості середовища рендерингу
CSS3
Вбудований функціонал, який раніше досягався через javascript
Шрифти (тепер можна
користуватися власними!)
3D
(просто, як двері)Анімації
Змінні! Слабий супорт=(
CSS3
CSS3
Multimedia
Нарешті!
- Теги <audio> і <video> з очікуваним функціоналом
- Вбудований програвач
- API для управління потоком зі скриптів
- Працює у всіх сучасних браузерах (правда не без проблем з форматами)
jPlayer- зручна бібліотека для jQuery
Graphics
Растрова графіка
Ніякої інформації про створені об’єкти з боку HTML
Вища продуктивність
Повний сапорт(з exCanvas для ІЕ)
Векторна графіка
Всі елементи записуються як XML-сутності
Нижча продуктивність
Старший, але менше сапорту
Can
vasS
vg
GraphicsCanvas 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.
function beginCall() {
navigator.getUserMedia(‘audio, video’, onGotStream);
}
function onGotStream(stream) {/*do some logic*/}
Audio/video Capture
Device Access
Device AccessGeolocation!
Device AccessGeolocation!
navigator.geolocation.getCurrentPosition(callback); // тут вискакує попапкаfunction callback(geoPos) {
var latitude = geoPos.coords.latitude;var longitude = geoPos.coords.longitudevar street = geoPos.address.street;// не на всіх браузерах
}
var watchID = navigator.geolocation.watchPosition(onUpdateLocation);navigator.geolocation.clearWatch(watchID)// закінчити стеження
Mobile APIs ?Device Access
Connectivity
Connectivity
Він не справляється з поставленими задачами
Connectivity
+
• Двосторонній зв’язок• Новий протокол• Невелика свобода на
транспортному рівні• Складнощі для сервера
• Односторонній зв’язок• Надбудова над Http• Налагодження транспортного
рівня• Простіша реалізація
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 + +
Yandex + + +
Що можна юзати сьогодні?
Чому потрібно знати html5?
Чому потрібно знати html5?
Чому потрібно знати html5?
Чому потрібно знати html5?
Висновки
Висновки
Чим більше ВИ використовуєте html5тим швидше він буде готовий до споживання
Висновки
ЗАПИТАННЯ