Download pdf - Html5 - ready yet?(ukr)

Мацех Маркіян 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.»

http://en.wikipedia.org/wiki/World_Wide_Web

ІСТОРІЯ

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тим швидше він буде готовий до споживання

Висновки

ЗАПИТАННЯ