Документ представляет обзор возможностей и новшеств HTML5, включая семантическую разметку, новые теги и API для работы с графикой, аудио и видео, а также локальное хранилище и веб-сокеты. Он подробно описывает изменения в CSS3 и использование JavaScript для создания интерактивных веб-приложений. Дополнительно рассматриваются вопросы производительности и доступ к устройствам, таким как веб-камеры и микрофоны.

1. ОБЗОР HTML 5по следам #html5campСергей ЗвягинIngate Development

2. Что такое html5?19.02.2011Ingate Development / TulaDev.NET2

3. Семантика19.02.2011Ingate Development / TulaDev.NET3

4. Семантическая разметкаБылоСтало19.02.2011Ingate Development / TulaDev.NET4Страница свёрстана с использованием элементов div и присвоенных каждому из них классов CSS. Исходный код не отражает идеи дизайнера, он сложен для восприятия.Страница свёрстана с использованием новых семантических элементов HTML5. Название каждого блока соответствует его цели на странице. Исходный код лёгок для восприятия.

5. Семантическая разметкаТеги не должны определять отображениеГлавная цель тегов – смысловая нагрузкаРазрешены перекрывающиеся тегиБинарные атрибуты не имеют значений19.02.2011Ingate Development / TulaDev.NET5

6. Семантическая разметкаНовые семантические теги:<header><footer><article><section><nav><aside><figure><figcaption><progress> и другие19.02.2011Ingate Development / TulaDev.NET6

7. Семантическая разметкаУже существующие теги получили семантический оттенок Например:<i> - интонация<strong> - важность<b> - выделение без указания важности19.02.2011Ingate Development / TulaDev.NET7

8. Web forms 2.oНовые типы полей ввода:rangesearchcoloremailurldatetimetelи другиеСпецификация НЕ описывает как они должны отображаться19.02.2011Ingate Development / TulaDev.NET8

9. Microdataрасширение текущего механизма микроформатовнабор пар ключ-значение, добавленных в документ параллельно основному контентунацелено на автоматизированные парсеры (напр., поисковые роботы)19.02.2011Ingate Development / TulaDev.NET9

10. MicrodataПример:<section itemscopeitemtype="http://example.org/animals#cat"> <h1 itemprop="name http://example.com/fn">Hedral</h1> <p itemprop="desc">Hedral is a male american domesticshorthair, with a fluffy<spanitemprop="http://example.com/color">black</span> fur with<spanitemprop="http://example.com/color">white</span> paws andbelly.</p> <imgitemprop="img"src="hedral.jpeg" alt=""title="Hedral, age 18 months"/></section>19.02.2011Ingate Development / TulaDev.NET10

11. CSS3 и стилизация19.02.2011Ingate Development / TulaDev.NET11

12. CSS3: ПрозрачностьБылоСталоbackground-color: rgb(0,0,255);opacity: 0.5;Все потомки элемента наследуют свойство opacitybackground-color:rgba(0,0,255,0.5);Прозрачность получит только фон конкретного элемента19.02.2011Ingate Development / TulaDev.NET12

13. CSS3: фоновые изображения19.02.2011Ingate Development / TulaDev.NET13Указание размера фоновой картинки.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;}

14. CSS3: Границы и тени19.02.2011Ingate Development / TulaDev.NET14Закругленные углы.border_rounded {border: 2px solid #897048;border-radius: 5px;}Тени.border_shadow {box-shadow: 10px 10px 5px #888;}.text_shadow {text-shadow: 2px 2px2px #ddccb5;}

15. CSS3: трансформации19.02.2011Ingate Development / TulaDev.NET15Растягивание блоков.ui_resizable{ resize: both;}Трансформация.transform_elementa:hover { transform: scale(1.15) rotate(-5deg);}

16. Web Open Font Format19.02.2011Ingate Development / TulaDev.NET16Сжатый 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');}

17. 3D, графика и эффекты19.02.2011Ingate Development / TulaDev.NET17

18. SVG19.02.2011Ingate Development / TulaDev.NET18Xml-подобный язык для визуального описания векторной графикиПервый черновик спецификации создан аж в 1998 годуИндексируется поисковыми машинами2 варианта анимации: SMIL или CSSTransform

19. SVG19.02.2011Ingate Development / TulaDev.NET19 Пример:<rectx="100" y="100«width="550" height="550«fill="#FAFAA2" stroke="#000«/><circlecx="100" cy="100"r="275«fill="#FAFAA2" stroke="#000«/><linex1="230" y1="570" x2="640" y2="490«stroke="#000«/>

20. SVG19.02.2011Ingate Development / TulaDev.NET20DOM модель у SVG и HTML одинаковаяСледовательно можно изменять отдельные блоки посредством JavaScriptМедиа-выражения позволяют добавлять условные блоки

21. Canvas19.02.2011Ingate Development / TulaDev.NET21Набор API для создания и управления растровой графикой при помощи JavaScriptHTML:<canvas id="canvas"> width="600" height="600"></canvas>JavaScript:varcanvas =document.getElementyId('canvas').getContext('2d');canvas.rect( 25, 25, 550, 550 );canvas.fillStyle= '#FAFAA2';canvas.strokeStyle= '#000';canvas.lineWidth= 50;

22. WebGL19.02.2011Ingate Development / TulaDev.NET22Развитие эксперимента Canvas 3DГрафика аппаратно ускоренаПервая черновая спецификация стандарта опубликована 10 декабря 2009 года

23. Мультимедиа19.02.2011Ingate Development / TulaDev.NET23

24. Audio и Video19.02.2011Ingate Development / TulaDev.NET24Не нужно никаких дополнительных кодеков, установленных программ или кодаНабор воспроизводимых форматов ограниченСпецификация не предоставляет описания, как должны выглядеть элементы управления

25. Audio и Video19.02.2011Ingate Development / TulaDev.NET25Поддержка разных форматов аудио различными браузерами:* Информация приведена для браузеров Opera 11, Firefox 4 beta, IE9 beta, Chrome 9, Safari 5

26. Audio и Video19.02.2011Ingate Development / TulaDev.NET26Поддержка разных форматов видео различными браузерами:* Информация приведена для браузеров Opera 11, Firefox 4 beta, IE9 beta, Chrome 9, Safari 5

27. Автономная работа и локальные хранилища19.02.2011Ingate Development / TulaDev.NET27

28. Offline & sTORAGE19.02.2011Ingate Development / TulaDev.NET28Offline Application Caching APIWeb StorageIndexed Database APIFile APIWeb SQL Database

29. HTML5 App Cache19.02.2011Ingate Development / TulaDev.NET29Можно принудительно указать какие файлы кешируются браузером, а какие нет:HTML:<!DOCTYPE HTML><html manifest="cache-manifest">...Manifest File (text/cache-manifest):CACHE MANIFESTindex.htmlstyle/default.cssimages/logo.pngNETWORK:server.cgi

30. Web Storage19.02.2011Ingate Development / TulaDev.NET30Можно хранить состояние для сайта в течение короткого или длительного промежутка времениИспользуются объекты sessionStorageи localStorageПредполагается использовать как замену Cookies

31. Indexed DB19.02.2011Ingate Development / TulaDev.NET31Возможность хранения пар ключ-значениеИндексы, курсоры, транзакции…2 API для работы с базой: синхронный и асинхронный

32. Indexed DB19.02.2011Ingate Development / TulaDev.NET32Пример:vardb = indexedDB.open('books', 'Book store', false);if (db.version !== '1.0') {varolddb = indexedDB.open('books', 'Book store');olddb.createObjectStore('books', 'isbn');olddb.createIndex('BookAuthor', 'books', 'author', false);olddb.setVersion("1.0"); }varindex = db.openIndex('BookAuthor');var matching = index.get('fred');if (matching) report(matching.isbn, matching.name, matching.author);else report(null);

33. File API19.02.2011Ingate Development / TulaDev.NET33Контроль процесса загрузки файла на серверМожно работать с содержимым файла до отправки на сервер (объект FileReader)Возможность выбирать сразу несколько файлов

34. Взаимодействие клиента и сервера19.02.2011Ingate Development / TulaDev.NET34

35. Web sockets19.02.2011Ingate Development / TulaDev.NET35протокол полнодуплексной двунаправленной связи поверх TCP соединения, предназначенный для обмена сообщениями между браузером и веб-сервером в режиме реального времениW3C занимается стандартизацией API Web Sockets, а IETF занимается утверждением протокола Web Socket

36. Web sockets19.02.2011Ingate Development / TulaDev.NET36Пример:<script>varwebSocket = 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>

37. Server-Sent Events19.02.2011Ingate Development / TulaDev.NET37Способ получения данных от сервераНет никакой обработки ошибокПример:<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>

38. Доступ к устройствам19.02.2011Ingate Development / TulaDev.NET38

39. Geolocation API19.02.2011Ingate Development / TulaDev.NET39Позволяет определить местоположение пользователяИспользуется только с согласия пользователяПредоставляет 2 метода: можно узнать местоположение разово или подписаться на изменение местоположения

40. <device>19.02.2011Ingate Development / TulaDev.NET40Доступ к веб-камере, микрофону, плееру, сканеру…Есть возможность захвата данных (объект StreamRecorder) и последующей работы с ними (например отправки на сервер посредством File API)На данный момент ни одна стабильная версия браузеров не поддерживает работу с тегом <device> 

41. Производительность19.02.2011Ingate Development / TulaDev.NET41

42. Web Workers19.02.2011Ingate Development / TulaDev.NET42Перенос части клиентского кода в отдельный потокПри создании объекта Worker указывается путь к исполняемому скриптуИсполняемый скрипт вызывает метод postMessageВ этот момент у объекта Worker возникает событие onmessageУдобно использовать в сочетании с другими рассмотренными ранее API: IndexedDB, WebSockets…

43. XHR level 219.02.2011Ingate Development / TulaDev.NET43Добавлено событие изменения прогрессаПоддерживается работа с бинарными даннымиПоявилась поддержка кросс-доменных запросов

44. Navigation Timing19.02.2011Ingate Development / TulaDev.NET44На данный момент довольно сложно определить, почему страница загружается в браузере долгоПрофайлеры помогают не всегдаNavigation Timing – решение для измерения скорости загрузки страницыAPI предоставляет 2 объекта performance.timing и performance.navigation

45. Navigation Timing19.02.2011Ingate Development / TulaDev.NET45

46. Это всё?19.02.2011Ingate Development / TulaDev.NET46

47. Вопросы19.02.2011Ingate Development / TulaDev.NET47

48. Сергей ЗвягинIngate DevelopmentTwitter: @Bingo87Специально для TulaDev.NETОБЗОР HTML 5