Презентация для доклада "HTML5. Уже пора?!" на конференции Tabtabus

Дмитрий Поляков, Smolfun.ru

Уже пора?!

Немного истории

  • 1991 — создание языка HTML
  • 1995 — HTML 2.0
  • 1996 — CSS + JavaScript
  • 1997 — HTML 4.0
  • 1997 — CSS2
  • 2000 — xHTML
  • 2002 — отказ от табличной верстки, первый шаг обратно к семантике
  • 2005 — AJAX
  • 2009 — HTML5

Что нового?

  • Семантика
  • Автономная работа
    и хранение данных
  • Доступ к устройству
  • Новые способы коммуникации
  • Мультимедиа
  • 2D,3D графика и эффекты
  • Производительность и интеграция
  • CSS3

Семантика

Семантика дает представление о структуре документа и позволяет людям и программам более полно управлять данными.
В HTML5 добавлено множество семантических тегов, а также поддержка RDFa, микроформатов и микроданных.

Семантика

Микроформаты

				<section itemscope itemtype="http://schema.org/Person">
					<span itemprop="name">Дмитрий Поляков</span>
					<span itemprop="jobTitle">Веб-технолог</span>
					<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
					<span itemprop="addressLocality">Смоленск</span></div>
					<span itemprop="telephone">(425) 123-4567</span>
					<a href="mailto:dima@my-html.ru" itemprop="email">dima@my-html.ru</a>
					<a href="http://my-html.ru" itemprop="url">my-html.ru</a>
				</section>  			
			

Семантика

Микроформаты

Семантика

Ссылки

Автономная работа
и хранение данных

  • Кэш приложений
  • localStorage
  • web SQL & indexed database
  • события в режиме подключения
    и автономном режиме

Автономная работа
и хранение данных

Примеры

Доступ к устройству

В пятой редакции языка появились чрезвычайно мощные API (File API, History API, Webaudio API и пр.) для взаимодействия с бинарными данными и локальной файловой системой пользователя.

Помимо прочего, File API дает возможность синхронно/асинхронно считывать файлы, записывать файлы во временные каталоги, рекурсивно читать каталоги с файлами, нативный Drag`n`Drop, а также загружать бинарные данные с помощью Ajax.

Доступ к устройству

Примеры

Доступ к устройству

Новые способы коммуникации

Более эффективное подключение устраняет задержки в чате, делает игры динамичнее и улучшает взаимодействие.

А веб-сокеты и отправка событий с сервера позволяют доставлять данные к клиенту наиболее эффективным образом.

Мультимедиа

С помощью новых API можно обращаться к данным временной шкалы и состояния файлов в сети и работать с ними. Вскоре будут выпущены дополнения к API, которые позволят считывать исходные данные из аудиофайлов и вести в них запись (API звуковых данных), а также работать с подписями к видео (API контроля времени).

2D,3D графика и эффекты

На сегодняшний день доступно множество новых функций: двумерный элемент canvas, WebGL, SVG, трехмерные преобразования CSS и SMIL

Мультимедиа

Примеры

Производительность и интеграция

  • Кэширование HTTP, данных на сервере и клиенте
  • Аппаратное ускорение
  • Уменьшение количества соединений
  • Предварительная выборка ссылок (prefetch)
  • и т.д.

CSS3

Технология поддерживает целый ряд новых функций и расширений, в том числе двумерные преобразования, переходы, трехмерные преобразования, веб-шрифты, Media Queries и многое другое.

CSS3

Примеры

HTML5. Уже пора!

Дмитрий Поляков, smolfun.ru

Презентация: dpolyakov.github.com/html5