SlideShare a Scribd company logo
1 of 35
Download to read offline
Мацех Маркіян
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-
сутності
Нижча продуктивність
Старший, але менше
сапорту
Canvas
Svg
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.
function beginCall() {
navigator.getUserMedia(‘audio, video’, onGotStream);
}
function onGotStream(stream) {/*do some logic*/}
Audio/video Capture
Device Access
Device Access
Geolocation!
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)// закінчити стеження
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
тим швидше він буде готовий до споживання
Висновки
ЗАПИТАННЯ

More Related Content

Similar to Html5 - ready yet?(ukr)

HTML5 SVG Graphics @ Javascript Directions
HTML5 SVG Graphics @ Javascript DirectionsHTML5 SVG Graphics @ Javascript Directions
HTML5 SVG Graphics @ Javascript DirectionsTiang Cheng
 
Web Development: Yesterday, Today, Tomorrow
Web Development: Yesterday, Today, TomorrowWeb Development: Yesterday, Today, Tomorrow
Web Development: Yesterday, Today, TomorrowVictor Haydin
 
ASP.Net Core Services
ASP.Net Core ServicesASP.Net Core Services
ASP.Net Core ServicesVictor Haydin
 
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...lisovvolod
 
10 asp.net
10 asp.net 10 asp.net
10 asp.net eleksdev
 
Web service lecture
Web service lectureWeb service lecture
Web service lectureeleksdev
 
"Laravel Tips & Tricks - 7 Steps to Dramatically Improve Performance", Yehor ...
"Laravel Tips & Tricks - 7 Steps to Dramatically Improve Performance", Yehor ..."Laravel Tips & Tricks - 7 Steps to Dramatically Improve Performance", Yehor ...
"Laravel Tips & Tricks - 7 Steps to Dramatically Improve Performance", Yehor ...Fwdays
 
Android Platform Architecture
Android Platform ArchitectureAndroid Platform Architecture
Android Platform ArchitecturePavel Bashmakov
 
Руйнуємо .NET Міфи
Руйнуємо .NET МіфиРуйнуємо .NET Міфи
Руйнуємо .NET МіфиSerhiy Kalinets
 
iPhone Objective-C Development (ukr) (2009)
iPhone Objective-C Development (ukr) (2009)iPhone Objective-C Development (ukr) (2009)
iPhone Objective-C Development (ukr) (2009)Anatoliy Okhotnikov
 
Тема_веб_15.pdf
Тема_веб_15.pdfТема_веб_15.pdf
Тема_веб_15.pdfgagip88662
 

Similar to Html5 - ready yet?(ukr) (20)

HTML5 SVG Graphics @ Javascript Directions
HTML5 SVG Graphics @ Javascript DirectionsHTML5 SVG Graphics @ Javascript Directions
HTML5 SVG Graphics @ Javascript Directions
 
Html5
Html5Html5
Html5
 
ASP.Net MVC
ASP.Net MVCASP.Net MVC
ASP.Net MVC
 
Web Development: Yesterday, Today, Tomorrow
Web Development: Yesterday, Today, TomorrowWeb Development: Yesterday, Today, Tomorrow
Web Development: Yesterday, Today, Tomorrow
 
ASP.Net basics
ASP.Net basics ASP.Net basics
ASP.Net basics
 
Coding for Future in Lutsk. JavaScript. Part 1
Coding for Future in Lutsk. JavaScript. Part 1Coding for Future in Lutsk. JavaScript. Part 1
Coding for Future in Lutsk. JavaScript. Part 1
 
ASP.Net Core Services
ASP.Net Core ServicesASP.Net Core Services
ASP.Net Core Services
 
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...
 
10 asp.net
10 asp.net 10 asp.net
10 asp.net
 
Flex 4 чи Html 5
Flex 4 чи Html 5Flex 4 чи Html 5
Flex 4 чи Html 5
 
Web service lecture
Web service lectureWeb service lecture
Web service lecture
 
HTML для дітей
HTML для дітейHTML для дітей
HTML для дітей
 
"Laravel Tips & Tricks - 7 Steps to Dramatically Improve Performance", Yehor ...
"Laravel Tips & Tricks - 7 Steps to Dramatically Improve Performance", Yehor ..."Laravel Tips & Tricks - 7 Steps to Dramatically Improve Performance", Yehor ...
"Laravel Tips & Tricks - 7 Steps to Dramatically Improve Performance", Yehor ...
 
Vue.js
Vue.jsVue.js
Vue.js
 
Android Platform Architecture
Android Platform ArchitectureAndroid Platform Architecture
Android Platform Architecture
 
Руйнуємо .NET Міфи
Руйнуємо .NET МіфиРуйнуємо .NET Міфи
Руйнуємо .NET Міфи
 
iPhone Objective-C Development (ukr) (2009)
iPhone Objective-C Development (ukr) (2009)iPhone Objective-C Development (ukr) (2009)
iPhone Objective-C Development (ukr) (2009)
 
12
1212
12
 
мова Html тест
мова Html тестмова Html тест
мова Html тест
 
Тема_веб_15.pdf
Тема_веб_15.pdfТема_веб_15.pdf
Тема_веб_15.pdf
 

More from Markiyan Matsekh

How we made Apple Watch Tesla App
How we made Apple Watch Tesla AppHow we made Apple Watch Tesla App
How we made Apple Watch Tesla AppMarkiyan Matsekh
 
Wearables Interaction Design
Wearables Interaction DesignWearables Interaction Design
Wearables Interaction DesignMarkiyan Matsekh
 
Wearables: the next level of mobility
Wearables: the next level of mobilityWearables: the next level of mobility
Wearables: the next level of mobilityMarkiyan Matsekh
 
Enterprise Mobility: Getting Trendy
Enterprise Mobility: Getting TrendyEnterprise Mobility: Getting Trendy
Enterprise Mobility: Getting TrendyMarkiyan Matsekh
 
PhoneGap - What It Actually Is
PhoneGap - What It Actually IsPhoneGap - What It Actually Is
PhoneGap - What It Actually IsMarkiyan Matsekh
 

More from Markiyan Matsekh (8)

How we made Apple Watch Tesla App
How we made Apple Watch Tesla AppHow we made Apple Watch Tesla App
How we made Apple Watch Tesla App
 
Wearables Interaction Design
Wearables Interaction DesignWearables Interaction Design
Wearables Interaction Design
 
Wearables: the next level of mobility
Wearables: the next level of mobilityWearables: the next level of mobility
Wearables: the next level of mobility
 
Enterprise Mobility: Getting Trendy
Enterprise Mobility: Getting TrendyEnterprise Mobility: Getting Trendy
Enterprise Mobility: Getting Trendy
 
PhoneGap - What It Actually Is
PhoneGap - What It Actually IsPhoneGap - What It Actually Is
PhoneGap - What It Actually Is
 
Big Mystification Theory
Big Mystification TheoryBig Mystification Theory
Big Mystification Theory
 
Client Web
Client WebClient Web
Client Web
 
Html5 - examples
Html5 - examplesHtml5 - examples
Html5 - examples
 

Html5 - ready yet?(ukr)