Обзорный доклад Сергея Звягина о HTML 5

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

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

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

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

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

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

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

8. Web forms 2.o Новые типы полей ввода: range search color email url date time telи другие Спецификация НЕ описывает как они должны отображаться 19.02.2011 Ingate Development / TulaDev.NET 8

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

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 and belly. </p> <imgitemprop="img"src="hedral.jpeg" alt="" title="Hedral, age 18 months"/> </section> 19.02.2011 Ingate Development / TulaDev.NET 10

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

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

13. CSS3: фоновые изображения 19.02.2011 Ingate Development / TulaDev.NET 13 Указание размера фоновой картинки .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.2011 Ingate Development / TulaDev.NET 14 Закругленные углы .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.2011 Ingate Development / TulaDev.NET 15 Растягивание блоков .ui_resizable{ resize: both; } Трансформация .transform_elementa:hover { transform: scale(1.15) rotate(-5deg); }

16. Web Open Font Format 19.02.2011 Ingate Development / TulaDev.NET 16 Сжатый 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.2011 Ingate Development / TulaDev.NET 17

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

19. SVG 19.02.2011 Ingate Development / TulaDev.NET 19 Пример: <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« />

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

21. Canvas 19.02.2011 Ingate Development / TulaDev.NET 21 Набор API для создания и управления растровой графикой при помощи JavaScript HTML: <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. WebGL 19.02.2011 Ingate Development / TulaDev.NET 22 Развитие эксперимента Canvas 3D Графика аппаратно ускорена Первая черновая спецификация стандарта опубликована 10 декабря 2009 года

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

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

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

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

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

28. Offline & sTORAGE 19.02.2011 Ingate Development / TulaDev.NET 28 Offline Application Caching API Web Storage Indexed Database API File API Web SQL Database

29. HTML5 App Cache 19.02.2011 Ingate Development / TulaDev.NET 29 Можно принудительно указать какие файлы кешируются браузером, а какие нет: HTML: <!DOCTYPE HTML> <html manifest="cache-manifest"> ... Manifest File (text/cache-manifest): CACHE MANIFEST index.html style/default.css images/logo.png NETWORK: server.cgi

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

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

32. Indexed DB 19.02.2011 Ingate Development / TulaDev.NET 32 Пример: 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 API 19.02.2011 Ingate Development / TulaDev.NET 33 Контроль процесса загрузки файла на сервер Можно работать с содержимым файла до отправки на сервер (объект FileReader) Возможность выбирать сразу несколько файлов

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

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

36. Web sockets 19.02.2011 Ingate Development / TulaDev.NET 36 Пример: <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 Events 19.02.2011 Ingate Development / TulaDev.NET 37 Способ получения данных от сервера Нет никакой обработки ошибок Пример: <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(''); updateStocks(data[0], data[1], data[2]); }, false); </script>

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

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

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

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

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

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

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

45. Navigation Timing 19.02.2011 Ingate Development / TulaDev.NET 45

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

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

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