Wild wild web. html5 era

Wild Wild Web. Эра HTML5

Константин Кичинский
konkich@microsoft.com
@kichinsky
http://html5insight.ru

.тостер {веб-разработка} Microsoft

1
Шаблоны эволюции

.тостер {веб-разработка}

История веба
— это история
мультиэволюции.


1.1
Возникновение видов


Эволюция систем
постепенна, но не всегда мы
видим промежуточные шаги.


Эволюция живых систем
приводит к видовому
разнообразию.

Эволюция браузеров приводит
к... фрагментации!


Internet Explorer Chrome Safari Firefox Opera

100.00%
Ch16 Fx8
Ch15 Fx7 Op11.x
IE9
90.00%
Ch14
Sa5.1
80.00%

IE8
70.00%

60.00%

50.00%
Fx6

http://www.netmarketshare.com
40.00%

Fx5
30.00% Sa5 Fx4
Fx3.6
20.00%
IE7

10.00%
IE6 Ch13 Op10.x
Ch12 Sa4.1 Fx3.5
0.00% … Fx3 Op9.x
Sa4
Jul%
Feb%
Mar%
Apr%

Oct%
Aug%
Sep%
Jun%
May%

Ch5 Fx2

Эволюция сложнее, чем просто
переход от версии к версии.

Разнообразие браузеров
 4 версии IE
 11 версий Chrome
 8 версий Firefox
 5 версий Safari

http://www.netmarketshare.com
 3 версии Opera.x

 4 версии IE (6 – 9)
 13 версий Chrome (4 – 17)
 10 версий Firefox (3.0 – 10.0a)
 5 версий Safari (3.1 – 5.1)
 2 версии Webkit (533.17, 534.46) за 1 месяц
 15 версий Opera (9.64 – 12.00)
 2 версии Opera Mini (6.1, 6.24)
 1 версия Opera Mobile (9.80)
 1 версия Gecko (1.9)
 1 версия IE Mobile (9.0)
 и еще 8 не определено

Латимерия
(Целакант)

Старые браузеры будут всегда.


Для зоопарка нужны
стандарты.

Для старых версий нужна
разумность.


1.2
Усложнение организмов


Пример
Агенты и сигналы в ―HTML5‖


Усложнение организмов

Усложнение приложений

Web Workers
// UI Thread
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
$('result').text = event.data;
};

// worker.js
var n = getNextPrime();
postMessage(n);
Microsoft

Web Messaging
var channel = new MessageChannel();
1 worker.postMessage({code:"port"}, [channel.port2]);

3 channel.port1.onmessage = function (event) {
alert("Message is: " + event.data);
}
// Worker Thread
2 onmessage = function (event) {
if (event.data.code == "port") {
event.ports[0].postMessage("Port
received.");
}
}

Microsoft

Пример
Изоляция особей в ―HTML5‖


Изоляция сессий приложения

Web Storage
<label>
<input type="checkbox"
onchange="sessionStorage.insurance =
checked ? 'true' : ''">
I want insurance on this trip.
</label>

// js-code
if (sessionStorage.insurance) { ... }
Microsoft

Пример
Выход на сушу в ―HTML5‖


Океан сайтов и приложений

File API
var reader = new FileReader();
// Read file into memory as UTF-16
reader.readAsText(readFile, "UTF-16");
// Handle progress, success, and errors
reader.onprogress = updateProgress;
reader.onload = loaded;
reader.onerror = errorHandler;

//...
var fileString = evt.target.result;

Microsoft

Application Cache API
("AppCache")
CACHE MANIFEST
CACHE:
script/library.js
css/stylesheet.css
images/figure1.png
FALLBACK:
photos/ figure2.png
NETWORK:
figure3.png

=========
<!doctype html>
<html manifest="appcache.manifest">

Microsoft

2
Почему эра HTML5?


HTML5 vs. ―HTML5‖
 HTML5 = веб-стандарт
— http://www.w3.org/TR/html5/

 ―HTML5‖ = экосистема нового поколения
веб-стандартов

2.1
Дерево эволюции


Эволюция
веб-
стандартов

HTML5

XHTML 1.1 CSS 2.1
HTML 4.01

Эволюция
веб-
стандартов

Развитие
XML-
мира

2.2
Фундамент HTML5


Семантика вчера и сегодня
<div class="header">
<h1>...</h1>
<h2>...</h2>
</div>
<div class="section">
<div class="article">...</div>
</div>
<div class="sidebar">...</div>
<div class="footer">...</div>

Microsoft

Семантика сегодня и завтра
<header>
<h1>...</h1>
<h2>...</h2>
</header>
<section>
<article>...</article>
</section>
<aside>...</aside>
<footer>...</footer>

Microsoft

Семантика — это переход
к дифференциации клеток.
div header

div nav

div section

div section

div footer

2.3
Роль плагинов/расширений
в эволюции технологий


Заполнение пробелов?

Они похожи, но не одинаковы

Схожие
возможности
Уникальные
Схожие

Летучие
мыши
тоже
летают

Пример
Графика и видео в HTML5


Bing + HTML5 Video для фона

Вообще говоря,
плагины — это паразиты.

Однако это не означает,
что они бесполезны.

Сценарии развития

Симбиоз Включение Отказ
и соразвитие внутрь себя от плагина
(чистый ―HTML5‖)

Гены в
аппарате
Гольджи от
бактерий с
хлоропластами

2.4
Эволюция веб-стандартов


Эволюция может иметь
тупиковые ветки. Иногда они
закрепляются и их таскают с
собой всю жизнь.


Пример
Работа с данными в ―HTML5‖


Indexed DB
var oDB;
var dbReq = window.msIndexedDB.open("EventsDB");
dbReq.onsuccess = function( event ) {
oDB = event.target.result;
};

...
var events = [{ date: "281011", name: "Toster.Web" },
{ date: "301111", name: "HTML5Camp" } ];

var request = oDB.setVersion("1.0");
request.onsuccess = function( event ) {
var objectStore = oDB.createObjectStore("events",
{ keyPath: "name" });
objectStore.createIndex("date", "date", { unique: false });
for (i in events) { objectStore.add(events[i]); }
};

Microsoft

2.5
Практики и стандарты


Стандартизация — это не
столько придумывание
нового, сколько закрепление
удачного.


ECMAScript 5
var numbers = [31, 33, 35, 37, 39, 41];
var primes = numbers.filter(CheckPrimes);

function CheckPrimes(value, index, ar) {
...
}

Microsoft

Пример
Анимации и трансформации
в CSS3


CSS3 3D Transforms
div
{
-ms-transform: matrix3d(0.359127, -
0.469472, 0.806613, 0, 0.190951, 0.882948
, 0.428884, 0, -0.913545, 0,
0.406737, 0, 0, 0, 0, 1);
-ms-transform: translate3d(20px, -
60px, 50px);
}

Microsoft

CSS3 Animations
div:active {
-ms-animation-name: demo 5s ease 0s 2 normal;
}
@-ms-keyframes demo {
from {
-ms-animation-timing-function: ease;
}
50% {
background-color: purple;
-ms-animation-timing-function: ease-in;
-ms-transform: translate(20px,30px);
}
to {
background-color: blue;
}
}

Microsoft

2.6
Расширение ареала


Эволюция веб-стандартов
— это также упрощение
того, что обычно делается
страшными костылями.


Пример
Сетки и блоки в CSS3


CSS3 Grid
#myGrid {
display: -ms-grid;
-ms-grid-columns: 100px 1fr 2fr;
-ms-grid-rows: 50px 5em auto;
}

#item1 {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
#item2 {
-ms-grid-row: 2;
-ms-grid-column: 2;
}

Microsoft

3
— HTML5 — толстый клиент
или..?
— Или.


―HTML5‖ — это расширение
возможностей и ареала
для веб-разработчиков.


Десктоп тоже
эволюционирует, вбирая в себя
методы распространения веб-
сайтов.


Предки
дельфинов
похожи
на койотов

Internet Explorer 10 & HTML5
 http://ietestdrive.com
 http://dev.windows.com
 http://buildwindows.com
 http://msdn.com/ie/

Главная техническая
конференция Microsoft

• 160 докладов в 15 треках
• Самое большое число мировых
экспертов в истории

msteched.ru

Константин
Кичинский
konkich@microsoft.com
@kichinsky

http://html5camp.ru

Wild wild web. html5 era

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (15)

Ähnlich wie Wild wild web. html5 era

Ähnlich wie Wild wild web. html5 era (20)

Mehr von .toster

Mehr von .toster (20)

Wild wild web. html5 era

Hinweis der Redaktion