HTML 5. Развитие Web-Технологий презентация

Содержание

1. HTML 5. Развитие Web-Технологий
2. Развитие Web-Технологий 1991 HTML 1994 HTML 2
3. HTML 5 CSS HTML JavaScpript API
4. Отличия HTML 5 от HTML 4 Новые
5. Новые API Рисование 2D-картинок в реальном времени
6. HTML HTML 5
7. Новые элементы HTML 5
8. Microdata Зовут
9. Формы
10. Аудио+Видео
11. Canvas Создание bitmap изображения при помощи JavaScript.
12. Canvas 3D Mozilla Foundation Отображение трёхмерных изображений через HTML элемент canvas.
13. JAVASCRIPT API HTML 5
14. Поиск элементов По классу: var el =
15. Web SQL Database var db = window.openDatabase("Database
16. Cache API window.applicationCache.addEventListener('checking', updateCacheStatus, false);
17. Drag and drop document.addEventListener('dragstart', function(event) {
18. Geolocation if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position)
19. CSS HTML 5
20. Селекторы Новые селекторы: .row:nth-child(even) { background: #dde;
21. Шрифты и текст Встраиваемые в сайт шрифты:
22. Шрифты и текст Границы: div {
23. Шрифты и текст Отражения: header { -webkit-box-reflect: below 10px }
24. Шрифты и текст Web 2.0 текст c
25. Шрифты и текст
26. Форматирование Колонки: -webkit-column-count: 4; -webkit-column-rule: 1px solid #bbb; -webkit-column-gap: 2em;
27. Работа с цветом HSLA модель: color: hsla(
28. Background Множественные background’ы: div {
29. Границы div { border-radius: 14px; } Пример
30. Переходы и трансформации Transition: #box {
31. Переходы и трансформации #example { font-size: 40pt;
32. Коротко о главном CSS: Улучшенная типографика Трансформации
33. Браузеры http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML_5%29
34. А что с IE? Internet Explorer
35. Полезные ссылки http://apirocks.com/html5/html5.html#slide1 http://dev.w3.org/html5/spec/Overview.html http://html5demos.com/ http://html5gallery.com/ http://www.youtube.com/html5

Развитие Web-Технологий 1991 HTML 1994 HTML 2 1996 CSS + Java Script 1997 HTML 4 1998 CSS2 2000 XHTML 2002 Безтабличная верстка (div) 2005 AJAX 2009 HTML5

Слайд 1HTML 5

Слайд 2Развитие Web-Технологий
1991 HTML
1994 HTML 2
1996 CSS + Java Script
1997 HTML 4
1998

CSS2
2000 XHTML
2002 Безтабличная верстка (div)
2005 AJAX
2009 HTML5

Слайд 3HTML 5
CSS
HTML
JavaScpript API

Слайд 4Отличия HTML 5 от HTML 4
Новые правила лексического разбора;
Новые элементы — footer,

section, video, audio, progress, nav, meter, time, aside, canvas
Новые типы input-элементов;
Новые атрибуты;
Глобальные атрибуты — id, tabindex, repeat
Устаревшие элементы убраны — center, font, strike

Слайд 5Новые API
Рисование 2D-картинок в реальном времени
Контроль над проигрыванием медиафайлов, который может

использоваться, например, для синхронизации субтитров с видео
Хранение данных в браузере
Редактирование
Drag-and-drop
Работа с сетью
MIME - Multipurpose Internet Mail Extensions

Слайд 6HTML
HTML 5

Слайд 7Новые элементы
HTML 5

Page title
Page subtitle

menu list…

header
content

links…
© Copyright 2010

HTML 4

< div id=“nav”>menu list…

< div id=“section”>
< div id=“article”>
header

content

< div id=“aside”>links…

< div id=“footer”>
© Copyright 2010

Слайд 11Canvas
Создание bitmap изображения при помощи JavaScript.

var

canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext.stroke();

Слайд 14Поиск элементов
По классу:
var el = document.getElementById('section1'); el.focus();
var els = document.getElementsByTagName('div');

els[0].focus();
var els = document.getElementsByClassName('section'); els[0].focus();
По css селектору:
var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");

Слайд 24Шрифты и текст
Web 2.0 текст c помощью CSS

#example
{
font-size: 40pt;
font-family: Verdana;
text-align:center;
text-shadow:

rgba(0, 0, 0, 0.5) 0 4px 4px;
color: hsla( 210, 75%, 33%, 1.00);
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.5)));
}

The cake is a lie

Слайд 31Переходы и трансформации
#example
{
font-size: 40pt;
font-family: Verdana;
text-align:center;
text-shadow: rgba(0, 0, 0, 0.5) 0 4px

4px;
color: hsla( 210, 75%, 33%, 1.00);
-webkit-transition-property: opacity, font-size,-webkit-transform;
-webkit-transition-duration: 1.0s;
-webkit-transition-timing-function: ease-out;
}
#example:hover {
-webkit-transform: rotateZ(5deg);
opacity: 0.01;
font-size: 90pt;
}

HTML 5. Развитие Web-Технологий презентация

Содержание

Слайд 1HTML 5

Слайд 2Развитие Web-Технологий
1991 HTML
1994 HTML 2
1996 CSS + Java Script
1997 HTML 4
1998

Слайд 3HTML 5
CSS
HTML
JavaScpript API

Слайд 4Отличия HTML 5 от HTML 4
Новые правила лексического разбора;
Новые элементы — footer,

Слайд 5Новые API
Рисование 2D-картинок в реальном времени
Контроль над проигрыванием медиафайлов, который может

Слайд 6HTML
HTML 5

Слайд 7Новые элементы
HTML 5

Page title
Page subtitle

menu list…

header
content

links…
© Copyright 2010

HTML 4

Page title

Page subtitle

Слайд 8Microdata

Зовут меняИван.
Я учусь в

Слайд 9Формы

Слайд 10Аудио+Видео

Слайд 11Canvas
Создание bitmap изображения при помощи JavaScript.

var

Слайд 12Canvas 3D
Mozilla Foundation
Отображение трёхмерных изображений через HTML элемент canvas.

Слайд 13JAVASCRIPT API
HTML 5

Слайд 14Поиск элементов
По классу:
var el = document.getElementById('section1'); el.focus();
var els = document.getElementsByTagName('div');

Слайд 15Web SQL Database
var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {

Слайд 16Cache API
window.applicationCache.addEventListener('checking', updateCacheStatus, false);

Содержимое файла manifest.cache:

CACHE MANIFEST
# v

Слайд 17Drag and drop
document.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed = 'copy';

Слайд 18Geolocation
if (navigator.geolocation)
{ navigator.geolocation.getCurrentPosition(function(position)
{
var lat = position.coords.latitude;
var lng =

Слайд 19CSS
HTML 5

Слайд 20Селекторы
Новые селекторы:
.row:nth-child(even) { background: #dde; }
.row:nth-child(odd) { background: white; }

По

Слайд 21Шрифты и текст
Встраиваемые в сайт шрифты:

@font-face
{
font-family: 'Junction';
src: url(Junction02.otf);

Слайд 22Шрифты и текст
Границы:
div
{
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 1.00px;
}

Слайд 23Шрифты и текст
Отражения:
header
{
-webkit-box-reflect: below 10px
}

Слайд 24Шрифты и текст
Web 2.0 текст c помощью CSS

#example
{
font-size: 40pt;
font-family: Verdana;
text-align:center;
text-shadow:

Слайд 25Шрифты и текст

Слайд 26Форматирование
Колонки:

-webkit-column-count: 4;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

Слайд 27Работа с цветом
HSLA модель:
color: hsla( 110, 75%, 33%, 1.00);
Градиенты:
-webkit-gradient(radial, 430 50,

Слайд 28Background
Множественные background’ы:
div
{
background: url(src/zippy-plus.png) 10px center no-repeat,
url(src/gray_lines_bg.png) 10px center repeat-x;

Слайд 29Границы
div
{
border-radius: 14px;
}

Пример

Слайд 30Переходы и трансформации
Transition:
#box
{
-webkit-transition: margin-left 1s ease-in-out;
}
Transformation:
-webkit-transform: rotateZ(5deg);

Слайд 31Переходы и трансформации
#example
{
font-size: 40pt;
font-family: Verdana;
text-align:center;
text-shadow: rgba(0, 0, 0, 0.5) 0 4px

Слайд 33Браузеры
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML_5%29

Слайд 34А что с IE?

Internet Explorer 9? Возможно…

А сейчас – Google Frame

Слайд 35Полезные ссылки
http://apirocks.com/html5/html5.html#slide1
http://dev.w3.org/html5/spec/Overview.html
http://html5demos.com/
http://html5gallery.com/
http://www.youtube.com/html5

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

Что такое ThePresentation.ru?

HTML 5. Развитие Web-Технологий презентация

Содержание

Слайд 1HTML 5

Слайд 2Развитие Web-Технологий1991 HTML1994 HTML 21996 CSS + Java Script1997 HTML 41998

Слайд 3HTML 5CSSHTMLJavaScpript API

Слайд 4Отличия HTML 5 от HTML 4Новые правила лексического разбора;Новые элементы — footer,

Слайд 5Новые APIРисование 2D-картинок в реальном времениКонтроль над проигрыванием медиафайлов, который может

Слайд 6HTMLHTML 5

Слайд 7Новые элементыHTML 5 Page titlePage subtitlemenu list… headercontentlinks…© Copyright 2010HTML 4

Page title

Page subtitle

Слайд 8Microdata Зовут меняИван. Я учусь в

Слайд 9Формы

Слайд 10Аудио+Видео

Слайд 11CanvasСоздание bitmap изображения при помощи JavaScript. var

Слайд 12Canvas 3DMozilla FoundationОтображение трёхмерных изображений через HTML элемент canvas.

Слайд 13JAVASCRIPT APIHTML 5

Слайд 14Поиск элементовПо классу:var el = document.getElementById('section1'); el.focus(); var els = document.getElementsByTagName('div');

Слайд 15Web SQL Databasevar db = window.openDatabase("Database Name", "Database Version"); db.transaction(function(tx) {

Слайд 16Cache API window.applicationCache.addEventListener('checking', updateCacheStatus, false);Содержимое файла manifest.cache:CACHE MANIFEST # v

Слайд 17Drag and dropdocument.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed = 'copy';

Слайд 18Geolocationif (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude;var lng =

Слайд 19CSSHTML 5

Слайд 20СелекторыНовые селекторы:.row:nth-child(even) { background: #dde; } .row:nth-child(odd) { background: white; }По

Слайд 21Шрифты и текстВстраиваемые в сайт шрифты:@font-face { font-family: 'Junction'; src: url(Junction02.otf);

Слайд 22Шрифты и текстГраницы:div { -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 1.00px; }

Слайд 23Шрифты и текстОтражения:header{-webkit-box-reflect: below 10px}

Слайд 24Шрифты и текстWeb 2.0 текст c помощью CSS#example{font-size: 40pt;font-family: Verdana;text-align:center;text-shadow:

Слайд 25Шрифты и текст

Слайд 26ФорматированиеКолонки:-webkit-column-count: 4;-webkit-column-rule: 1px solid #bbb; -webkit-column-gap: 2em;

Слайд 27Работа с цветомHSLA модель:color: hsla( 110, 75%, 33%, 1.00);Градиенты:-webkit-gradient(radial, 430 50,

Слайд 28BackgroundМножественные background’ы:div { background: url(src/zippy-plus.png) 10px center no-repeat,url(src/gray_lines_bg.png) 10px center repeat-x;

Слайд 29Границыdiv{border-radius: 14px;}Пример

Слайд 30Переходы и трансформацииTransition:#box { -webkit-transition: margin-left 1s ease-in-out; } Transformation:-webkit-transform: rotateZ(5deg);

Слайд 31Переходы и трансформации#example{font-size: 40pt;font-family: Verdana;text-align:center;text-shadow: rgba(0, 0, 0, 0.5) 0 4px

Слайд 32Коротко о главномCSS:Улучшенная типографикаТрансформации и переходыНовые селекторыHTML:Новая разметкаНовые формыCanvas!МультимедияJavaScriptDrag & DropGeolocationХранение

Слайд 33Браузерыhttp://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML_5%29

Слайд 34А что с IE?Internet Explorer 9? Возможно…А сейчас – Google Frame

Слайд 35Полезные ссылкиhttp://apirocks.com/html5/html5.html#slide1http://dev.w3.org/html5/spec/Overview.htmlhttp://html5demos.com/http://html5gallery.com/http://www.youtube.com/html5

Похожие презентации

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

Что такое ThePresentation.ru?

Слайд 2Развитие Web-Технологий
1991 HTML
1994 HTML 2
1996 CSS + Java Script
1997 HTML 4
1998

Слайд 3HTML 5
CSS
HTML
JavaScpript API

Слайд 4Отличия HTML 5 от HTML 4
Новые правила лексического разбора;
Новые элементы — footer,

Слайд 5Новые API
Рисование 2D-картинок в реальном времени
Контроль над проигрыванием медиафайлов, который может

Слайд 6HTML
HTML 5

Слайд 7Новые элементы
HTML 5

Page title
Page subtitle

menu list…

header
content

links…
© Copyright 2010

HTML 4

Слайд 8Microdata

Зовут меняИван.
Я учусь в

Слайд 11Canvas
Создание bitmap изображения при помощи JavaScript.

var

Слайд 12Canvas 3D
Mozilla Foundation
Отображение трёхмерных изображений через HTML элемент canvas.

Слайд 13JAVASCRIPT API
HTML 5

Слайд 14Поиск элементов
По классу:
var el = document.getElementById('section1'); el.focus();
var els = document.getElementsByTagName('div');

Слайд 15Web SQL Database
var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {

Слайд 16Cache API
window.applicationCache.addEventListener('checking', updateCacheStatus, false);

Содержимое файла manifest.cache:

CACHE MANIFEST
# v

Слайд 17Drag and drop
document.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed = 'copy';

Слайд 18Geolocation
if (navigator.geolocation)
{ navigator.geolocation.getCurrentPosition(function(position)
{
var lat = position.coords.latitude;
var lng =

Слайд 19CSS
HTML 5

Слайд 20Селекторы
Новые селекторы:
.row:nth-child(even) { background: #dde; }
.row:nth-child(odd) { background: white; }

По

Слайд 21Шрифты и текст
Встраиваемые в сайт шрифты:

@font-face
{
font-family: 'Junction';
src: url(Junction02.otf);

Слайд 22Шрифты и текст
Границы:
div
{
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 1.00px;
}

Слайд 23Шрифты и текст
Отражения:
header
{
-webkit-box-reflect: below 10px
}

Слайд 24Шрифты и текст
Web 2.0 текст c помощью CSS

#example
{
font-size: 40pt;
font-family: Verdana;
text-align:center;
text-shadow:

Слайд 26Форматирование
Колонки:

-webkit-column-count: 4;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

Слайд 27Работа с цветом
HSLA модель:
color: hsla( 110, 75%, 33%, 1.00);
Градиенты:
-webkit-gradient(radial, 430 50,

Слайд 28Background
Множественные background’ы:
div
{
background: url(src/zippy-plus.png) 10px center no-repeat,
url(src/gray_lines_bg.png) 10px center repeat-x;

Слайд 29Границы
div
{
border-radius: 14px;
}

Пример

Слайд 30Переходы и трансформации
Transition:
#box
{
-webkit-transition: margin-left 1s ease-in-out;
}
Transformation:
-webkit-transform: rotateZ(5deg);

Слайд 31Переходы и трансформации
#example
{
font-size: 40pt;
font-family: Verdana;
text-align:center;
text-shadow: rgba(0, 0, 0, 0.5) 0 4px

Слайд 33Браузеры
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML_5%29

Слайд 34А что с IE?

Internet Explorer 9? Возможно…

А сейчас – Google Frame

Слайд 35Полезные ссылки
http://apirocks.com/html5/html5.html#slide1
http://dev.w3.org/html5/spec/Overview.html
http://html5demos.com/
http://html5gallery.com/
http://www.youtube.com/html5