Презентация на тему "Погружение в HTML5"

Содержание

• 
  Слайд 1
  
• 
  Слайд 2

  Погружение в HTML5

  Гайдар Магдануров Microsoft

• 
  Слайд 3
  

  HTML5 – что это?

• 
  Слайд 4

  Говорят «HTML5» — подразумевают…

  HTML5 CSS3 SVG ECMAScript5 JavaScript APIs …

• 
  Слайд 5

  HTML5

• 
  Слайд 6

  Структура документа

  Упрощенный DOCTYPE Разрешены перекрывающиеся теги Да, так можно, но не нужно! Не обязательны кавычки атрибутов

  Можно, но …

  Атрибуты без значений (binary) Наличие присутствия видео

• 
  Слайд 7
  

  Не обязательны структурные теги…

  Да, это корректный документ, но…

  Документ может быть XML Формат “XHTML5”, совместимый с XHTML1 Документ ~сериализованный объект

• 
  Слайд 8

  Устаревшие элементы

  —следует использовать — использовать — использовать — использовать

  • — использовать и текстовое поле —следует использовать CSS —следует использовать CSS

• 
  Слайд 9

  Устаревшие элементы— 2

  — следует использовать CSS/JS — следует использовать CSS — следует использовать CSS — дурацкая затея ранних IE… —вместо этого — следует использовать CSS — следует использовать CSS
• 
  Слайд 10

  Отмененные элементы

  , и Не поддерживаются из-за проблем с удобством использования страницы Рекомендуется использованиелибо Ajax/JS

• 
  Слайд 11

  Отмененные атрибуты

  shapeи coordsдля тега a longdescдля тегов imgи iframe targetдля тега link nohrefдля тега area profileдля тега head versionдля тега html nameдля тега img (рекомендуется id) schemeдля тега meta archive, classid, codebase, codetype, declare и stиby для тега object valuetypeи typeдля тега param alignдля тегов caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, theadи tr

• 
  Слайд 12

  Отмененные атрибуты — 2

  alink, link, textи vlinkдля тега body backgroundдля тега body bgcolorдля тега table, tr, td, thи body borderдля тега tableи object cellpaddingи cellspacingдля тега table charи charoffдля тегов col, colgroup, tbody, td, tfoot, th, theadи tr clearдля тега br compactдля тегов dl, menu, olи ul frameдля тега table frameborderдля тега iframe heightдля тега tdи th axisи abbrдля тегов tdи th scopeдля тега td

• 
  Слайд 13

  Новая жизнь старых элементов

  1. — устаревший HTML4, вернулся в HTML5 — испольование для имен/значений — указание на название статьи/книги — контактная информация автора — выделение — «интонация» текста — указание на важность — изменение стиля, без важности — разбиение текста на уровне параграфа — мелкий шрифт (например, copyright)
• 
  Слайд 14

  Новые элементы форм

  Строгая типизация и валидация ввода Спецификация не описывает изображение

• 
  Слайд 15

  Новые семантические элементы

  — самостоятельный блок контента — группировка контента — элементы навигации —врезка — группирует заголовки — заголовок страницы — «подвал» страницы — иллюстрация, диаграмма, изображение (выделенная область) — подпись к иллюстрации — выделение текста
• 
  Слайд 16

  Семантические элементы

  IE9 Testdrive

• 
  Слайд 17

  Новые контентные элементы

  —аудио без плагинов —видео без плагинов — векторные изображения в XML Отдельный стандарт, в HTML5 включен тег —математические формулы в формате MathML Отдельный стандарт, в HTML5 включен тег —поверхность «для рисования»

• 
  Слайд 18

  Элементы Audioи Video

  Не требуются плагины Управление JavaScript Простое добавление тегов на страницу Нет DRM Нет простых средств управления загрузкой канала (привет, Silverlight!)

• 
  Слайд 19

  Audio

• 
  Слайд 20

  Video

• 
  Слайд 21

  Поддерживаемые кодеки

  В стандарте не прописаны Зависит от браузеров

• 
  Слайд 22

  Audio и Video

  Channel 9

• 
  Слайд 23

  SVG

• 
  Слайд 24

  Canvas

• 
  Слайд 25

  SVG и Canvas

  IE9 Testdrive

• 
  Слайд 26

  Инструменты разработки

• 
  Слайд 27
  

  Visual Studio 2010 Service Pack 1 Visual Studio HTML & SVG Extensions Internet Explorer 9 Developer Tools Modernizer HTML5 Boilerplate ai2Canvas

• 
  Слайд 28
  

  Всего понемногу

• 
  Слайд 29

  Узнать больше…

  Спецификация HTML 5 http://dev.w3.org/html5/spec/Overview.html Спецификация CSS 3 http://www.w3.org/TR/css3-roadmap/ Спецификация SVG http://www.w3.org/TR/SVG/ «Шпаргалка» про Canvas http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

• 
  Слайд 30
  
• 
  Слайд 31