Обзор Html 5

1,844 views

Published on

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

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,844
On SlideShare
0
From Embeds
0
Number of Embeds
222
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Обзор Html 5

  1. 1. ОБЗОР HTML 5по следам #html5camp<br />Сергей Звягин<br />Ingate Development<br />
  2. 2. Что такое html5?<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />2<br />
  3. 3. Семантика<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />3<br />
  4. 4. Семантическая разметка<br />Было<br />Стало<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />4<br />Страница свёрстана с использованием элементов div и присвоенных каждому из них классов CSS. Исходный код не отражает идеи дизайнера, он сложен для восприятия.<br />Страница свёрстана с использованием новых семантических элементов HTML5. Название каждого блока соответствует его цели на странице. Исходный код лёгок для восприятия.<br />
  5. 5. Семантическая разметка<br />Теги не должны определять отображение<br />Главная цель тегов – смысловая нагрузка<br />Разрешены перекрывающиеся теги<br />Бинарные атрибуты не имеют значений<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />5<br />
  6. 6. Семантическая разметка<br />Новые семантические теги:<br /><header><br /><footer><br /><article><br /><section><br /><nav><br /><aside><br /><figure><br /><figcaption><br /><progress> и другие<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />6<br />
  7. 7. Семантическая разметка<br />Уже существующие теги получили семантический оттенок<br /> Например:<br /><i> - интонация<br /><strong> - важность<br /><b> - выделение без указания важности<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />7<br />
  8. 8. Web forms 2.o<br />Новые типы полей ввода:<br />range<br />search<br />color<br />email<br />url<br />date<br />time<br />telи другие<br />Спецификация НЕ описывает как они должны отображаться<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />8<br />
  9. 9. Microdata<br />расширение текущего механизма микроформатов<br />набор пар ключ-значение, добавленных в документ параллельно основному контенту<br />нацелено на автоматизированные парсеры (напр., поисковые роботы)<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />9<br />
  10. 10. Microdata<br />Пример:<br /><section itemscopeitemtype="http://example.org/animals#cat"><br /> <h1 itemprop="name http://example.com/fn">Hedral</h1><br /> <p itemprop="desc"><br />Hedral is a male american domesticshorthair, with a fluffy<br /><spanitemprop="http://example.com/color">black</span> fur with<br /><spanitemprop="http://example.com/color">white</span> paws and<br />belly.<br /></p><br /> <imgitemprop="img"src="hedral.jpeg" alt=""<br />title="Hedral, age 18 months"/><br /></section><br />19.02.2011<br />Ingate Development / TulaDev.NET<br />10<br />
  11. 11. CSS3 и стилизация<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />11<br />
  12. 12. CSS3: Прозрачность<br />Было<br />Стало<br />background-color: rgb(0,0,255);<br />opacity: 0.5;<br />Все потомки элемента наследуют свойство opacity<br />background-color:<br />rgba(0,0,255,0.5);<br />Прозрачность получит только фон конкретного элемента<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />12<br />
  13. 13. CSS3: фоновые изображения<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />13<br />Указание размера фоновой картинки<br />.backgroundsize {<br /> background: url(logo.gif);<br /> background-size: 203px 45px;<br />}<br />Использование нескольких фоновых картинок<br />.multiplebackgrounds {<br /> background: url(top.gif) top left no-repeat, url(bottom.gif) bottom left no-repeat,<br />url(middle.gif) left repeat-y;<br />}<br />
  14. 14. CSS3: Границы и тени<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />14<br />Закругленные углы<br />.border_rounded {<br />border: 2px solid #897048;<br />border-radius: 5px;<br />}<br />Тени<br />.border_shadow {<br />box-shadow: 10px 10px 5px #888;<br />}<br />.text_shadow {<br />text-shadow: 2px 2px2px #ddccb5;<br />}<br />
  15. 15. CSS3: трансформации<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />15<br />Растягивание блоков<br />.ui_resizable{<br /> resize: both;<br />}<br />Трансформация<br />.transform_elementa:hover {<br /> transform: scale(1.15) rotate(-5deg);<br />}<br />
  16. 16. Web Open Font Format<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />16<br />Сжатый OpenTypeили TrueType шрифт<br />Нет возможности шифрования<br />Пример:<br />@font-face {<br /> font-family: 'MyFontFamily';<br />src: url('myfont-webfont.eot?') format('eot'), <br />url('myfont-webfont.woff') format('woff'), <br />url('myfont-webfont.ttf') format('truetype'),<br />url('myfont-webfont.svg#name')format('svg');<br />}<br />
  17. 17. 3D, графика и эффекты<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />17<br />
  18. 18. SVG<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />18<br />Xml-подобный язык для визуального описания векторной графики<br />Первый черновик спецификации создан аж в 1998 году<br />Индексируется поисковыми машинами<br />2 варианта анимации: <br />SMIL или CSSTransform<br />
  19. 19. SVG<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />19<br /> Пример:<br /><rect<br />x="100" y="100«<br />width="550" height="550«<br />fill="#FAFAA2" stroke="#000«<br />/><br /><circle<br />cx="100" cy="100"r="275«<br />fill="#FAFAA2" stroke="#000«<br />/><br /><line<br />x1="230" y1="570" x2="640" y2="490«<br />stroke="#000«<br />/><br />
  20. 20. SVG<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />20<br />DOM модель у SVG и HTML одинаковая<br />Следовательно можно изменять отдельные блоки посредством JavaScript<br />Медиа-выражения позволяют добавлять условные блоки<br />
  21. 21. Canvas<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />21<br />Набор API для создания и управления растровой графикой при помощи JavaScript<br />HTML:<br /><canvas id="canvas"> width="600" height="600"></canvas><br />JavaScript:<br />varcanvas =<br />document.getElementyId('canvas').getContext('2d');<br />canvas.rect( 25, 25, 550, 550 );<br />canvas.fillStyle= '#FAFAA2';<br />canvas.strokeStyle= '#000';<br />canvas.lineWidth= 50;<br />
  22. 22. WebGL<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />22<br />Развитие эксперимента Canvas 3D<br />Графика аппаратно ускорена<br />Первая черновая спецификация стандарта опубликована 10 декабря 2009 года<br />
  23. 23. Мультимедиа<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />23<br />
  24. 24. Audio и Video<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />24<br />Не нужно никаких дополнительных кодеков, установленных программ или кода<br />Набор воспроизводимых форматов ограничен<br />Спецификация не предоставляет описания, как должны выглядеть элементы управления<br />
  25. 25. Audio и Video<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />25<br />Поддержка разных форматов аудио различными браузерами:<br />* Информация приведена для браузеров Opera 11, Firefox 4 beta, IE9 beta, Chrome 9, Safari 5<br />
  26. 26. Audio и Video<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />26<br />Поддержка разных форматов видео различными браузерами:<br />* Информация приведена для браузеров Opera 11, Firefox 4 beta, IE9 beta, Chrome 9, Safari 5<br />
  27. 27. Автономная работа и локальные хранилища<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />27<br />
  28. 28. Offline & sTORAGE<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />28<br />Offline Application Caching API<br />Web Storage<br />Indexed Database API<br />File API<br />Web SQL Database<br />
  29. 29. HTML5 App Cache<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />29<br />Можно принудительно указать какие файлы кешируются браузером, а какие нет:<br />HTML:<br /><!DOCTYPE HTML><br /><html manifest="cache-manifest"><br />...<br />Manifest File (text/cache-manifest):<br />CACHE MANIFEST<br />index.html<br />style/default.css<br />images/logo.png<br />NETWORK:<br />server.cgi<br />
  30. 30. Web Storage<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />30<br />Можно хранить состояние для сайта в течение короткого или длительного промежутка времени<br />Используются объекты sessionStorageи localStorage<br />Предполагается использовать как замену Cookies<br />
  31. 31. Indexed DB<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />31<br />Возможность хранения пар ключ-значение<br />Индексы, курсоры, транзакции…<br />2 API для работы с базой: синхронный и асинхронный<br />
  32. 32. Indexed DB<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />32<br />Пример:<br />vardb = indexedDB.open('books', 'Book store', false);<br />if (db.version !== '1.0') {<br />varolddb = indexedDB.open('books', 'Book store');<br />olddb.createObjectStore('books', 'isbn');<br />olddb.createIndex('BookAuthor', 'books', 'author', false);<br />olddb.setVersion("1.0"); <br />}<br />varindex = db.openIndex('BookAuthor');<br />var matching = index.get('fred');<br />if (matching)<br /> report(matching.isbn, matching.name, matching.author);<br />else<br /> report(null);<br />
  33. 33. File API<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />33<br />Контроль процесса загрузки файла на сервер<br />Можно работать с содержимым файла до отправки на сервер (объект FileReader)<br />Возможность выбирать сразу несколько файлов<br />
  34. 34. Взаимодействие клиента и сервера<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />34<br />
  35. 35. Web sockets<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />35<br />протокол полнодуплексной двунаправленной связи поверх TCP соединения, предназначенный для обмена сообщениями между браузером и веб-сервером в режиме реального времени<br />W3C занимается стандартизацией API Web Sockets, а IETF занимается утверждением протокола Web Socket<br />
  36. 36. Web sockets<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />36<br />Пример:<br /><script><br />varwebSocket = new WebSocket('ws://localhost/echo');<br />webSocket.onopen= function(event) {<br /> alert('onopen');<br />webSocket.send("Hello Web Socket!");<br /> };<br />webSocket.onmessage= function(event) {<br /> alert('onmessage, ' + event.data);<br />webSocket.close();<br /> };<br />webSocket.onclose= function(event) {<br /> alert('onclose');<br />};<br /></script><br />
  37. 37. Server-Sent Events<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />37<br />Способ получения данных от сервера<br />Нет никакой обработки ошибок<br />Пример:<br /><event-source src="http://example.com/ticker.php" id="stock"><br /><script type="text/javascript"><br />document.getElementById('stock')<br />.addEventListener('stock change',<br />function () {<br />var data = event.data.split('n');<br />updateStocks(data[0], data[1], data[2]);<br />}, false);<br /></script><br />
  38. 38. Доступ к устройствам<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />38<br />
  39. 39. Geolocation API<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />39<br />Позволяет определить местоположение пользователя<br />Используется только с согласия пользователя<br />Предоставляет 2 метода: можно узнать местоположение разово или подписаться на изменение местоположения<br />
  40. 40. <device><br />19.02.2011<br />Ingate Development / TulaDev.NET<br />40<br />Доступ к веб-камере, микрофону, плееру, сканеру…<br />Есть возможность захвата данных (объект StreamRecorder) и последующей работы с ними (например отправки на сервер посредством File API)<br />На данный момент ни одна стабильная версия браузеров не поддерживает работу с тегом <device> <br />
  41. 41. Производительность<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />41<br />
  42. 42. Web Workers<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />42<br />Перенос части клиентского кода в отдельный поток<br />При создании объекта Worker указывается путь к исполняемому скрипту<br />Исполняемый скрипт вызывает метод postMessage<br />В этот момент у объекта Worker возникает событие onmessage<br />Удобно использовать в сочетании с другими рассмотренными ранее API: IndexedDB, WebSockets…<br />
  43. 43. XHR level 2<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />43<br />Добавлено событие изменения прогресса<br />Поддерживается работа с бинарными данными<br />Появилась поддержка кросс-доменных запросов<br />
  44. 44. Navigation Timing<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />44<br />На данный момент довольно сложно определить, почему страница загружается в браузере долго<br />Профайлеры помогают не всегда<br />Navigation Timing – решение для измерения скорости загрузки страницы<br />API предоставляет 2 объекта performance.timing и performance.navigation<br />
  45. 45. Navigation Timing<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />45<br />
  46. 46. Это всё?<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />46<br />
  47. 47. Вопросы<br />19.02.2011<br />Ingate Development / TulaDev.NET<br />47<br />
  48. 48. Сергей Звягин<br />Ingate Development<br />Twitter: @Bingo87<br />Специально для TulaDev.NET<br />ОБЗОР HTML 5<br />

×