Обзор Html 5

ОБЗОР HTML 5ПО СЛЕДАМ #HTML5CAMP

Сергей ЗвягинIngate Development

Ingate Development / TulaDev.NET 2

ЧТО ТАКОЕ HTML5?

19.02.2011


СЕМАНТИКА

19.02.2011


СЕМАНТИЧЕСКАЯ РАЗМЕТКАБыло Стало

19.02.2011

Страница свёрстана с использованием элементов div и присвоенных каждому из них классов CSS. Исходный код не отражает идеи дизайнера, он сложен для восприятия.

Страница свёрстана с использованием новых семантических элементов HTML5. Название каждого блока соответствует его цели на странице. Исходный код лёгок для восприятия.


СЕМАНТИЧЕСКАЯ РАЗМЕТКА• Теги не должны определять отображение• Главная цель тегов – смысловая нагрузка

• Разрешены перекрывающиеся теги• Бинарные атрибуты не имеют значений

19.02.2011


СЕМАНТИЧЕСКАЯ РАЗМЕТКА• Новые семантические теги:– <header>– <footer>– <article>– <section>– <nav>– <aside>– <figure>– <figcaption>– <progress> и другие

19.02.2011


СЕМАНТИЧЕСКАЯ РАЗМЕТКА• Уже существующие теги получили

семантический оттенокНапример:

– <i> - интонация– <strong> - важность– <b> - выделение без указания важности

19.02.2011


WEB FORMS 2.O

• Новые типы полей ввода:– range– search– color– email– url– date– time– tel и другие

• Спецификация НЕ описывает как они должны отображаться

19.02.2011


MICRODATA

• расширение текущего механизма микроформатов

• набор пар ключ-значение, добавленных в документ параллельно основному контенту

• нацелено на автоматизированные парсеры (напр., поисковые роботы)

19.02.2011


MICRODATA

Пример:<section itemscope itemtype="http://example.org/animals#cat"> <h1 itemprop="name http://example.com/fn">Hedral</h1> <p itemprop="desc"> Hedral is a male american domestic shorthair, with a fluffy <span itemprop="http://example.com/color">black</span> fur with <span itemprop="http://example.com/color">white</span> paws and belly. </p> <img itemprop="img" src="hedral.jpeg" alt=""

title="Hedral, age 18 months" /></section>

19.02.2011


CSS3 И СТИЛИЗАЦИЯ

19.02.2011


CSS3: ПРОЗРАЧНОСТЬ

Было

background-color: rgb(0,0,255);opacity: 0.5;

• Все потомки элемента наследуют свойство opacity

Стало

background-color:rgba(0,0,255,0.5);

• Прозрачность получит только фон конкретного элемента

19.02.2011


CSS3: ФОНОВЫЕ ИЗОБРАЖЕНИЯ

19.02.2011

• Указание размера фоновой картинки.backgroundsize { background: url(logo.gif); background-size: 203px 45px;}

• Использование нескольких фоновых картинок

.multiplebackgrounds { background: url(top.gif) top left no-repeat,

url(bottom.gif) bottom left no-repeat,

url(middle.gif) left repeat-y;}


CSS3: ГРАНИЦЫ И ТЕНИ

19.02.2011

• Закругленные углы.border_rounded { border: 2px solid #897048; border-radius: 5px;}

• Тени.border_shadow { box-shadow: 10px 10px 5px #888;}.text_shadow { text-shadow: 2px 2px 2px #ddccb5;}


CSS3: ТРАНСФОРМАЦИИ

19.02.2011

• Растягивание блоков.ui_resizable { resize: both;}

• Трансформация.transform_element a:hover { transform: scale(1.15) rotate(-5deg);}


WEB OPEN FONT FORMAT

19.02.2011

• Сжатый OpenType или TrueType шрифт• Нет возможности шифрования

Пример:@font-face {

font-family: 'MyFontFamily';src: url('myfont-webfont.eot?') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf')

format('truetype'), url('myfont-webfont.svg#name')format('svg');

}


3D, ГРАФИКА И ЭФФЕКТЫ

19.02.2011


SVG

19.02.2011

• Xml-подобный язык для визуального описания векторной графики

• Первый черновик спецификации создан аж в 1998 году

• Индексируется поисковыми машинами• 2 варианта анимации:

SMIL или CSS Transform


SVG

19.02.2011

Пример:<rect x="100" y="100« width="550" height="550« fill="#FAFAA2" stroke="#000«/><circle cx="100" cy="100" r="275« fill="#FAFAA2" stroke="#000«/><line x1="230" y1="570" x2="640" y2="490« stroke="#000«/>


SVG

19.02.2011

• DOM модель у SVG и HTML одинаковая• Следовательно можно изменять отдельные

блоки посредством JavaScript• Медиа-выражения позволяют добавлять

условные блоки


CANVAS

19.02.2011

• Набор API для создания и управления растровой графикой при помощи JavaScript

HTML:<canvas id="canvas"> width="600" height="600"></canvas>

JavaScript:var canvas = document.getElementyId('canvas').getContext('2d');canvas.rect( 25, 25, 550, 550 );canvas.fillStyle = '#FAFAA2';canvas.strokeStyle = '#000';canvas.lineWidth = 50;


WEBGL

19.02.2011

• Развитие эксперимента Canvas 3D• Графика аппаратно ускорена• Первая черновая спецификация стандарта

опубликована 10 декабря 2009 года


МУЛЬТИМЕДИА

19.02.2011


AUDIO И VIDEO

19.02.2011

• Не нужно никаких дополнительных кодеков, установленных программ или кода

• Набор воспроизводимых форматов ограничен

• Спецификация не предоставляет описания, как должны выглядеть элементы управления


AUDIO И VIDEO

19.02.2011

Поддержка разных форматов аудио различными браузерами:

ogg/vorbis + + - + -

mp3 + - + - +

wav + + - + +

AAC + - + - +

* Информация приведена для браузеров Opera 11, Firefox 4 beta, IE9 beta, Chrome 9, Safari 5


AUDIO И VIDEO

19.02.2011

Поддержка разных форматов видео различными браузерами:

ogg/theora + + - + -

H.264 + - + - +

WebM + + - + -

* Информация приведена для браузеров Opera 11, Firefox 4 beta, IE9 beta, Chrome 9, Safari 5


АВТОНОМНАЯ РАБОТА И ЛОКАЛЬНЫЕ ХРАНИЛИЩА

19.02.2011


OFFLINE & STORAGE

19.02.2011

• Offline Application Caching API• Web Storage• Indexed Database API• File API• Web SQL Database


HTML5 APP CACHE

19.02.2011

• Можно принудительно указать какие файлы кешируются браузером, а какие нет:

HTML:<!DOCTYPE HTML><html manifest="cache-manifest">...

Manifest File (text/cache-manifest):CACHE MANIFESTindex.htmlstyle/default.cssimages/logo.png

NETWORK:server.cgi


WEB STORAGE

19.02.2011

• Можно хранить состояние для сайта в течение короткого или длительного промежутка времени

• Используются объекты sessionStorage и localStorage

• Предполагается использовать как замену Cookies


INDEXED DB

19.02.2011

• Возможность хранения пар ключ-значение• Индексы, курсоры, транзакции…• 2 API для работы с базой: синхронный и

асинхронный


INDEXED DB

19.02.2011

• Пример:

var db = indexedDB.open('books', 'Book store', false);if (db.version !== '1.0') { var olddb = indexedDB.open('books', 'Book store'); olddb.createObjectStore('books', 'isbn'); olddb.createIndex('BookAuthor', 'books', 'author', false); olddb.setVersion("1.0"); }var index = db.openIndex('BookAuthor');var matching = index.get('fred');if (matching) report(matching.isbn, matching.name, matching.author);else report(null);


FILE API

19.02.2011

• Контроль процесса загрузки файла на сервер

• Можно работать с содержимым файла до отправки на сервер (объект FileReader)

• Возможность выбирать сразу несколько файлов


ВЗАИМОДЕЙСТВИЕ КЛИЕНТА И СЕРВЕРА

19.02.2011


WEB SOCKETS

19.02.2011

• протокол полнодуплексной двунаправленной связи поверх TCP соединения, предназначенный для обмена сообщениями между браузером и веб-сервером в режиме реального времени

• W3C занимается стандартизацией API Web Sockets, а IETF занимается утверждением протокола Web Socket


WEB SOCKETS

19.02.2011

• Пример:

<script> var webSocket = new WebSocket('ws://localhost/echo'); webSocket.onopen = function(event) { alert('onopen'); webSocket.send("Hello Web Socket!"); }; webSocket.onmessage = function(event) { alert('onmessage, ' + event.data); webSocket.close(); }; webSocket.onclose = function(event) { alert('onclose'); };</script>


SERVER-SENT EVENTS

19.02.2011

• Способ получения данных от сервера• Нет никакой обработки ошибок• Пример:

<event-source src="http://example.com/ticker.php" id="stock"><script type="text/javascript">document.getElementById('stock') .addEventListener('stock change', function () { var data = event.data.split('\n'); updateStocks(data[0], data[1], data[2]); }, false);</script>


ДОСТУП К УСТРОЙСТВАМ

19.02.2011


GEOLOCATION API

19.02.2011

• Позволяет определить местоположение пользователя

• Используется только с согласия пользователя

• Предоставляет 2 метода: можно узнать местоположение разово или подписаться на изменение местоположения


<DEVICE>

19.02.2011

• Доступ к веб-камере, микрофону, плееру, сканеру…

• Есть возможность захвата данных (объект StreamRecorder) и последующей работы с ними (например отправки на сервер посредством File API)

• На данный момент ни одна стабильная версия браузеров не поддерживает работу с тегом <device>


ПРОИЗВОДИТЕЛЬНОСТЬ

19.02.2011


WEB WORKERS

19.02.2011

• Перенос части клиентского кода в отдельный поток• При создании объекта Worker указывается путь к

исполняемому скрипту• Исполняемый скрипт вызывает метод postMessage• В этот момент у объекта Worker возникает событие

onmessage• Удобно использовать в сочетании с другими

рассмотренными ранее API: IndexedDB, WebSockets…


XHR LEVEL 2

19.02.2011

• Добавлено событие изменения прогресса• Поддерживается работа с бинарными

данными• Появилась поддержка кросс-доменных

запросов


NAVIGATION TIMING

19.02.2011

• На данный момент довольно сложно определить, почему страница загружается в браузере долго

• Профайлеры помогают не всегда• Navigation Timing – решение для измерения

скорости загрузки страницы• API предоставляет 2 объекта

performance.timing и performance.navigation


NAVIGATION TIMING

19.02.2011


ЭТО ВСЁ?

19.02.2011


ВОПРОСЫ

19.02.2011

ОБЗОР HTML 5

Сергей ЗвягинIngate Development

Twitter: @Bingo87

Специально для TulaDev.NET

Обзор Html 5

Technology