Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

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

Содержание

Погружение в HTML5Гайдар МагдануровMicrosoft
Погружение в HTML5Гайдар МагдануровMicrosoft HTML5 – что это? Говорят «HTML5»  — подразумевают…HTML5CSS3SVGECMAScript5JavaScript APIs… HTML5 Структура документаУпрощенный DOCTYPEРазрешены перекрывающиеся тегиДа, так можно, но не нужно!Не обязательны кавычки Структура документаНе обязательны структурные теги…Моя СтраницаДа, это корректный документ, но… Документ может Устаревшие элементы — следует использовать — использовать — использовать — использовать — Устаревшие элементы — 2 — следует использовать CSS/JS — следует использовать CSS Отмененные элементы, и Не поддерживаются из-за проблем с удобством использования страницыРекомендуется использование либо Ajax/JS Отмененные атрибутыshape и coords для тега alongdesc для тегов img и iframetarget Отмененные атрибуты — 2alink, link, text и vlink для тега body background Новая жизнь старых элементов — устаревший HTML4, вернулся в HTML5 — испольование Новые элементы формСтрогая типизация и валидация вводаСпецификация не описывает изображение Новые семантические элементы — самостоятельный блок контента — группировка контента — элементы Семантические элементыIE9 Testdrive Новые контентные элементы —аудио без плагинов — видео без плагинов — векторные Элементы Audio и VideoНе требуются плагиныУправление JavaScriptПростое добавление тегов на страницуНет DRMНет Audio Video Поддерживаемые кодекиВ стандарте не прописаныЗависит от браузеров Audio и VideoChannel 9 SVG Canvas SVG и CanvasIE9 Testdrive Инструменты разработки Инструменты разработкиVisual Studio 2010 Service Pack 1Visual Studio HTML & SVG ExtensionsInternet Инструменты разработкиВсего понемногу Узнать больше…Спецификация HTML 5http://dev.w3.org/html5/spec/Overview.htmlСпецификация CSS 3http://www.w3.org/TR/css3-roadmap/Спецификация SVGhttp://www.w3.org/TR/SVG/ «Шпаргалка» про Canvashttp://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
Слайды презентации

Слайд 2 Погружение в HTML5
Гайдар Магдануров
Microsoft

Погружение в HTML5Гайдар МагдануровMicrosoft

Слайд 3 HTML5
– что это?

HTML5 – что это?

Слайд 4 Говорят «HTML5» — подразумевают…
HTML5
CSS3
SVG
ECMAScript5
JavaScript APIs

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

Слайд 5 HTML5

HTML5

Слайд 6 Структура документа
Упрощенный DOCTYPE

Разрешены перекрывающиеся теги
Да, так можно,

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

но не нужно!
Не обязательны кавычки атрибутов
Можно, но …


Атрибуты без значений (binary)



Слайд 7 Структура документа
Не обязательны структурные теги…


Моя Страница
Да,

Структура документаНе обязательны структурные теги…Моя СтраницаДа, это корректный документ, но… Документ

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

Документ может быть XML
Формат “XHTML5”,

совместимый с XHTML1
Документ ~ сериализованный объект



Слайд 8 Устаревшие элементы
— следует использовать
— использовать

Устаревшие элементы — следует использовать — использовать — использовать — использовать


— использовать
— использовать
— использовать

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



Слайд 9 Устаревшие элементы — 2
— следует использовать CSS/JS

Устаревшие элементы — 2 — следует использовать CSS/JS — следует использовать

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

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

Слайд 10 Отмененные элементы
, и
Не поддерживаются из-за проблем

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

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


Слайд 11 Отмененные атрибуты
shape и coords для тега a
longdesc для

Отмененные атрибутыshape и coords для тега alongdesc для тегов img и

тегов 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

Отмененные атрибуты — 2alink, link, text и vlink для тега body

для тега 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 Новая жизнь старых элементов
— устаревший HTML4, вернулся

Новая жизнь старых элементов — устаревший HTML4, вернулся в HTML5 —

в HTML5
— испольование для имен/значений
— указание на

название статьи/книги
— контактная информация автора
— выделение
— «интонация» текста
— указание на важность
— изменение стиля, без важности

— разбиение текста на уровне параграфа
— мелкий шрифт (например, copyright)

Слайд 14 Новые элементы форм
Строгая типизация и валидация ввода
Спецификация не

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

описывает изображение

/>









Слайд 15 Новые семантические элементы
— самостоятельный блок контента

Новые семантические элементы — самостоятельный блок контента — группировка контента —

группировка контента
— элементы навигации
— врезка

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

Слайд 16 Семантические элементы
IE9 Testdrive

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

Слайд 17 Новые контентные элементы
—аудио без плагинов
— видео

Новые контентные элементы —аудио без плагинов — видео без плагинов —

без плагинов
— векторные изображения в XML
Отдельный

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

Слайд 18 Элементы Audio и Video
Не требуются плагины
Управление JavaScript
Простое добавление

Элементы Audio и VideoНе требуются плагиныУправление JavaScriptПростое добавление тегов на страницуНет

тегов на страницу
Нет DRM
Нет простых средств управления загрузкой канала

(привет, Silverlight!)

Слайд 21 Поддерживаемые кодеки
В стандарте не прописаны
Зависит от браузеров

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

Слайд 22 Audio и Video
Channel 9

Audio и VideoChannel 9

Слайд 24 Canvas

Canvas

Слайд 25 SVG и Canvas
IE9 Testdrive

SVG и CanvasIE9 Testdrive

Слайд 26 Инструменты разработки

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

Слайд 27 Инструменты разработки
Visual Studio 2010 Service Pack 1
Visual Studio

Инструменты разработкиVisual Studio 2010 Service Pack 1Visual Studio HTML & SVG

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/
«Шпаргалка»

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

про Canvas
http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html


  • Имя файла: pogruzhenie-v-html5.pptx
  • Количество просмотров: 109
  • Количество скачиваний: 0