🗊Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация

Категория: Авто/мото
Нажмите для полного просмотра!
Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №1Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №2Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №3Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №4Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №5Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №6Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №7Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №8Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №9Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №10Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №11Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №12Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №13Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №14Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №15Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №16Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №17Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №18Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №19Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №20Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №21Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №22Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №23Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №24Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №25Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №26Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №27Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №28Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №29Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №30Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №31

Содержание

Вы можете ознакомиться и скачать Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация. Презентация содержит 31 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации


Слайд 1


Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №1
Описание слайда:

Слайд 2





Погружение в HTML5
Гайдар Магдануров
Microsoft
Описание слайда:
Погружение в HTML5 Гайдар Магдануров Microsoft

Слайд 3


Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №3
Описание слайда:

Слайд 4





Говорят «HTML5» 
— подразумевают…
HTML5
CSS3
SVG
ECMAScript5
JavaScript APIs
…
Описание слайда:
Говорят «HTML5» — подразумевают… HTML5 CSS3 SVG ECMAScript5 JavaScript APIs …

Слайд 5





HTML5
Описание слайда:
HTML5

Слайд 6





Структура документа
Упрощенный DOCTYPE
<!doctype html>
Разрешены перекрывающиеся теги
<b><i>Да, так можно, но не нужно!</b></i>
Не обязательны кавычки атрибутов
<div class=myClass>Можно, но …</div> 
Атрибуты без значений (binary)
<video controls>Наличие присутствия видео</video>
Описание слайда:
Структура документа Упрощенный DOCTYPE <!doctype html> Разрешены перекрывающиеся теги <b><i>Да, так можно, но не нужно!</b></i> Не обязательны кавычки атрибутов <div class=myClass>Можно, но …</div> Атрибуты без значений (binary) <video controls>Наличие присутствия видео</video>

Слайд 7





Структура документа
Не обязательны структурные теги…
<!doctype html>
<meta charset=utf-8>
<title>Моя Страница</title>
<p>Да, это корректный документ, но…</p> 
Документ может быть XML
Формат “XHTML5”, совместимый с XHTML1
Документ ~ сериализованный объект
Описание слайда:
Структура документа Не обязательны структурные теги… <!doctype html> <meta charset=utf-8> <title>Моя Страница</title> <p>Да, это корректный документ, но…</p> Документ может быть XML Формат “XHTML5”, совместимый с XHTML1 Документ ~ сериализованный объект

Слайд 8





Устаревшие элементы
<applet> — следует использовать <embed>
<acronym> — использовать <abbr>
<bgsound> — использовать <audio>
<dir> — использовать <ul>
<isindex> — использовать <form> и текстовое поле
<big> — следует использовать CSS
<basefont> — следует использовать CSS
Описание слайда:
Устаревшие элементы <applet> — следует использовать <embed> <acronym> — использовать <abbr> <bgsound> — использовать <audio> <dir> — использовать <ul> <isindex> — использовать <form> и текстовое поле <big> — следует использовать CSS <basefont> — следует использовать CSS

Слайд 9





Устаревшие элементы — 2
<blink> — следует использовать CSS/JS
<center> — следует использовать CSS
<font> — следует использовать CSS
<marquee> — дурацкая затея ранних IE…
<strike> — вместо этого <del>
<u> — следует использовать CSS
<tt> — следует использовать CSS
Описание слайда:
Устаревшие элементы — 2 <blink> — следует использовать CSS/JS <center> — следует использовать CSS <font> — следует использовать CSS <marquee> — дурацкая затея ранних IE… <strike> — вместо этого <del> <u> — следует использовать CSS <tt> — следует использовать CSS

Слайд 10





Отмененные элементы
<frame>, <frameset> и <noframe>
Не поддерживаются из-за проблем с удобством использования страницы
Рекомендуется использование <iframe> либо Ajax/JS
Описание слайда:
Отмененные элементы <frame>, <frameset> и <noframe> Не поддерживаются из-за проблем с удобством использования страницы Рекомендуется использование <iframe> либо 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
Описание слайда:
Отмененные атрибуты 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
Описание слайда:
Отмененные атрибуты — 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





Новая жизнь старых элементов
<ol> — устаревший HTML4, вернулся в HTML5
<dl> — испольование для имен/значений
<cite> — указание на название статьи/книги
<address> — контактная информация автора
<em> — выделение
<i> — «интонация» текста
<strong> — указание на важность
<b> — изменение стиля, без важности
<hr> — разбиение текста на уровне параграфа
<small> — мелкий шрифт (например, copyright)
Описание слайда:
Новая жизнь старых элементов <ol> — устаревший HTML4, вернулся в HTML5 <dl> — испольование для имен/значений <cite> — указание на название статьи/книги <address> — контактная информация автора <em> — выделение <i> — «интонация» текста <strong> — указание на важность <b> — изменение стиля, без важности <hr> — разбиение текста на уровне параграфа <small> — мелкий шрифт (например, copyright)

Слайд 14





Новые элементы форм
Строгая типизация и валидация ввода
Спецификация не описывает изображение
<input type='range' min='0' max='50' value='0' />
<input results='10' type='search' />
<input type='text' placeholder='Search inside' />
<input type='color' />
<input type='number' />
<input type='email' /> <input type='url' />
<input type='tel' />
<input type='date' /> <input type='time' /> 
<input type='month' /> <input type='week' />
Описание слайда:
Новые элементы форм Строгая типизация и валидация ввода Спецификация не описывает изображение <input type='range' min='0' max='50' value='0' /> <input results='10' type='search' /> <input type='text' placeholder='Search inside' /> <input type='color' /> <input type='number' /> <input type='email' /> <input type='url' /> <input type='tel' /> <input type='date' /> <input type='time' /> <input type='month' /> <input type='week' />

Слайд 15





Новые семантические элементы
<article> — самостоятельный блок контента
<section> — группировка контента
<nav> — элементы навигации
<aside> —   врезка
<hgroup> — группирует заголовки <hX>
<header> — заголовок страницы
<footer> — «подвал» страницы
<figure> — иллюстрация, диаграмма, изображение (выделенная область)
<figcaption> — подпись к иллюстрации
<mark> — выделение текста
Описание слайда:
Новые семантические элементы <article> — самостоятельный блок контента <section> — группировка контента <nav> — элементы навигации <aside> — врезка <hgroup> — группирует заголовки <hX> <header> — заголовок страницы <footer> — «подвал» страницы <figure> — иллюстрация, диаграмма, изображение (выделенная область) <figcaption> — подпись к иллюстрации <mark> — выделение текста

Слайд 16





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

Слайд 17





Новые контентные элементы
<audio> —аудио без плагинов
<video> — видео без плагинов 
<svg> — векторные изображения в XML
 Отдельный стандарт, в HTML5 включен тег
<math> —  математические формулы в формате MathML
 Отдельный стандарт, в HTML5 включен тег
<canvas> — поверхность «для рисования»
Описание слайда:
Новые контентные элементы <audio> —аудио без плагинов <video> — видео без плагинов <svg> — векторные изображения в XML Отдельный стандарт, в HTML5 включен тег <math> — математические формулы в формате MathML Отдельный стандарт, в HTML5 включен тег <canvas> — поверхность «для рисования»

Слайд 18





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

Слайд 19





Audio
Описание слайда:
Audio

Слайд 20





Video
Описание слайда:
Video

Слайд 21





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

Слайд 22





Audio и Video
Channel 9
Описание слайда:
Audio и Video Channel 9

Слайд 23





SVG
Описание слайда:
SVG

Слайд 24





Canvas
Описание слайда:
Canvas

Слайд 25





SVG и Canvas
IE9 Testdrive
Описание слайда:
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
Описание слайда:
Инструменты разработки 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
Описание слайда:
Узнать больше… Спецификация 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


Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №30
Описание слайда:

Слайд 31


Погружение в HTML5 Гайдар Магдануров MicrosoftHTML5 – что это? - презентация, слайд №31
Описание слайда:



Похожие презентации
Mypresentation.ru
Загрузить презентацию