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

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
HTML 5. Развитие Web-Технологий, слайд №1HTML 5. Развитие Web-Технологий, слайд №2HTML 5. Развитие Web-Технологий, слайд №3HTML 5. Развитие Web-Технологий, слайд №4HTML 5. Развитие Web-Технологий, слайд №5HTML 5. Развитие Web-Технологий, слайд №6HTML 5. Развитие Web-Технологий, слайд №7HTML 5. Развитие Web-Технологий, слайд №8HTML 5. Развитие Web-Технологий, слайд №9HTML 5. Развитие Web-Технологий, слайд №10HTML 5. Развитие Web-Технологий, слайд №11HTML 5. Развитие Web-Технологий, слайд №12HTML 5. Развитие Web-Технологий, слайд №13HTML 5. Развитие Web-Технологий, слайд №14HTML 5. Развитие Web-Технологий, слайд №15HTML 5. Развитие Web-Технологий, слайд №16HTML 5. Развитие Web-Технологий, слайд №17HTML 5. Развитие Web-Технологий, слайд №18HTML 5. Развитие Web-Технологий, слайд №19HTML 5. Развитие Web-Технологий, слайд №20HTML 5. Развитие Web-Технологий, слайд №21HTML 5. Развитие Web-Технологий, слайд №22HTML 5. Развитие Web-Технологий, слайд №23HTML 5. Развитие Web-Технологий, слайд №24HTML 5. Развитие Web-Технологий, слайд №25HTML 5. Развитие Web-Технологий, слайд №26HTML 5. Развитие Web-Технологий, слайд №27HTML 5. Развитие Web-Технологий, слайд №28HTML 5. Развитие Web-Технологий, слайд №29HTML 5. Развитие Web-Технологий, слайд №30HTML 5. Развитие Web-Технологий, слайд №31HTML 5. Развитие Web-Технологий, слайд №32HTML 5. Развитие Web-Технологий, слайд №33HTML 5. Развитие Web-Технологий, слайд №34HTML 5. Развитие Web-Технологий, слайд №35
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему HTML 5. Развитие Web-Технологий. Доклад-сообщение содержит 35 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1


HTML 5
Описание слайда:
HTML 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
Описание слайда:
Развитие Web-Технологий 1991 HTML 1994 HTML 2 1996 CSS + Java Script 1997 HTML 4 1998 CSS2 2000 XHTML 2002 Безтабличная верстка (div) 2005 AJAX 2009 HTML5

Слайд 3


HTML 5 CSS HTML JavaScpript API
Описание слайда:
HTML 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
Описание слайда:
Отличия 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
Описание слайда:
Новые API Рисование 2D-картинок в реальном времени Контроль над проигрыванием медиафайлов, который может использоваться, например, для синхронизации субтитров с видео Хранение данных в браузере Редактирование Drag-and-drop Работа с сетью MIME - Multipurpose Internet Mail Extensions

Слайд 6


HTML HTML 5
Описание слайда:
HTML HTML 5

Слайд 7


Новые элементы HTML 5
Описание слайда:
Новые элементы HTML 5

Слайд 8


Microdata <div item> <p>Зовут меня<span itemprop='name'>Иван</span>.</p> <p>Я учусь в <span itemprop=‘institute'>МИЭМ</span></p> <p>на кафедре <span itemprop=‘a_department'>ИКТ</span>.</p> </div>
Описание слайда:
Microdata <div item> <p>Зовут меня<span itemprop='name'>Иван</span>.</p> <p>Я учусь в <span itemprop=‘institute'>МИЭМ</span></p> <p>на кафедре <span itemprop=‘a_department'>ИКТ</span>.</p> </div>

Слайд 9


Формы <input type='range' min='0' max='50' value='0'> <input autofocus type='search'> <input type='text' placeholder='Search inside'>
Описание слайда:
Формы <input type='range' min='0' max='50' value='0'> <input autofocus type='search'> <input type='text' placeholder='Search inside'>

Слайд 10


Аудио+Видео <audio src="sound.mp3" controls></audio> <video src='movie.mp4' autoplay controls ></video>
Описание слайда:
Аудио+Видео <audio src="sound.mp3" controls></audio> <video src='movie.mp4' autoplay controls ></video>

Слайд 11


Canvas Создание bitmap изображения при помощи JavaScript. <canvas id="canvas" width="838" height="220"></canvas> <script> 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(); </script>
Описание слайда:
Canvas Создание bitmap изображения при помощи JavaScript. <canvas id="canvas" width="838" height="220"></canvas> <script> 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(); </script>

Слайд 12


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

Слайд 13


JavaScriPT API HTML 5
Описание слайда:
JavaScriPT API HTML 5

Слайд 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");
Описание слайда:
Поиск элементов По классу: 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");

Слайд 15


Web SQL Database var db = window.openDatabase("Database Name", "Database Version"); db.transaction(function(tx) { tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback); });
Описание слайда:
Web SQL Database var db = window.openDatabase("Database Name", "Database Version"); db.transaction(function(tx) { tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback); });

Слайд 16


Cache API <html manifest="manifest.cache"> window.applicationCache.addEventListener('checking', updateCacheStatus, false); Содержимое файла manifest.cache: CACHE MANIFEST # v 1 CACHE: /src/logic.js /src/style.css /src/background.png
Описание слайда:
Cache API <html manifest="manifest.cache"> window.applicationCache.addEventListener('checking', updateCacheStatus, false); Содержимое файла manifest.cache: CACHE MANIFEST # v 1 CACHE: /src/logic.js /src/style.css /src/background.png

Слайд 17


Drag and drop document.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed = 'copy'; }, false);
Описание слайда:
Drag and drop document.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed = 'copy'; }, false);

Слайд 18


Geolocation if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; map.setCenter(new GLatLng(lat, lng), 13); map.addOverlay(new GMarker(new GLatLng(lat, lng))); }); }
Описание слайда:
Geolocation if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; map.setCenter(new GLatLng(lat, lng), 13); map.addOverlay(new GMarker(new GLatLng(lat, lng))); }); }

Слайд 19


CSS HTML 5
Описание слайда:
CSS HTML 5

Слайд 20


Селекторы Новые селекторы: .row:nth-child(even) { background: #dde; } .row:nth-child(odd) { background: white; } По атрибутам: input[type="text"] { background: #eee; } Отрицание: :not(.box) { color: #00c; } :not(span) { display: block; }
Описание слайда:
Селекторы Новые селекторы: .row:nth-child(even) { background: #dde; } .row:nth-child(odd) { background: white; } По атрибутам: input[type="text"] { background: #eee; } Отрицание: :not(.box) { color: #00c; } :not(span) { display: block; }

Слайд 21


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

Слайд 22


Шрифты и текст Границы: div { -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 1.00px; } Тени: header { text-shadow: rgba(64, 64, 64, 0.5) 2px 2px 1px; }
Описание слайда:
Шрифты и текст Границы: div { -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 1.00px; } Тени: header { text-shadow: rgba(64, 64, 64, 0.5) 2px 2px 1px; }

Слайд 23


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

Слайд 24


Шрифты и текст Web 2.0 текст c помощью CSS <!doctype html> <head> <style> #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))); } </style> </head> <body> <div id="example"> The cake is a lie </div> </body>
Описание слайда:
Шрифты и текст Web 2.0 текст c помощью CSS <!doctype html> <head> <style> #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))); } </style> </head> <body> <div id="example"> The cake is a lie </div> </body>

Слайд 25


Шрифты и текст
Описание слайда:
Шрифты и текст

Слайд 26


Форматирование Колонки: <article> -webkit-column-count: 4; -webkit-column-rule: 1px solid #bbb; -webkit-column-gap: 2em; </artcle>
Описание слайда:
Форматирование Колонки: <article> -webkit-column-count: 4; -webkit-column-rule: 1px solid #bbb; -webkit-column-gap: 2em; </artcle>

Слайд 27


Работа с цветом HSLA модель: color: hsla( 110, 75%, 33%, 1.00); Градиенты: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000)) Прозрачность: color: rgba(255, 0, 0, 0.75);
Описание слайда:
Работа с цветом HSLA модель: color: hsla( 110, 75%, 33%, 1.00); Градиенты: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000)) Прозрачность: color: rgba(255, 0, 0, 0.75);

Слайд 28


Background Множественные background’ы: div { background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 10px center repeat-x; } Изменение размеров background: Contain Cover 100%
Описание слайда:
Background Множественные background’ы: div { background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 10px center repeat-x; } Изменение размеров background: Contain Cover 100%

Слайд 29


Границы div { border-radius: 14px; }
Описание слайда:
Границы div { border-radius: 14px; }

Слайд 30


Переходы и трансформации Transition: #box { -webkit-transition: margin-left 1s ease-in-out; } Transformation: -webkit-transform: rotateZ(5deg);
Описание слайда:
Переходы и трансформации 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 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; }
Описание слайда:
Переходы и трансформации #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; }

Слайд 32


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

Слайд 33


Браузеры
Описание слайда:
Браузеры

Слайд 34


А что с IE? Internet Explorer 9? Возможно… А сейчас – Google Frame для IE7/8
Описание слайда:
А что с IE? Internet Explorer 9? Возможно… А сейчас – Google Frame для IE7/8

Слайд 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
Описание слайда:
Полезные ссылки 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

Скачать

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