HTML 5. Развитие Web-Технологий - презентация, доклад, проект скачать

Нажмите для полного просмотра!

HTML 5. Развитие Web-Технологий, слайд №1

HTML 5. Развитие Web-Технологий, слайд №2

HTML 5. Развитие Web-Технологий, слайд №3

HTML 5. Развитие Web-Технологий, слайд №4

HTML 5. Развитие Web-Технологий, слайд №5

HTML 5. Развитие Web-Технологий, слайд №6

HTML 5. Развитие Web-Технологий, слайд №7

HTML 5. Развитие Web-Технологий, слайд №8

HTML 5. Развитие Web-Технологий, слайд №9

HTML 5. Развитие Web-Технологий, слайд №10

HTML 5. Развитие Web-Технологий, слайд №11

HTML 5. Развитие Web-Технологий, слайд №12

HTML 5. Развитие Web-Технологий, слайд №13

HTML 5. Развитие Web-Технологий, слайд №14

HTML 5. Развитие Web-Технологий, слайд №15

HTML 5. Развитие Web-Технологий, слайд №16

HTML 5. Развитие Web-Технологий, слайд №17

HTML 5. Развитие Web-Технологий, слайд №18

HTML 5. Развитие Web-Технологий, слайд №19

HTML 5. Развитие Web-Технологий, слайд №20

HTML 5. Развитие Web-Технологий, слайд №21

HTML 5. Развитие Web-Технологий, слайд №22

HTML 5. Развитие Web-Технологий, слайд №23

HTML 5. Развитие Web-Технологий, слайд №24

HTML 5. Развитие Web-Технологий, слайд №25

HTML 5. Развитие Web-Технологий, слайд №26

HTML 5. Развитие Web-Технологий, слайд №27

HTML 5. Развитие Web-Технологий, слайд №28

HTML 5. Развитие Web-Технологий, слайд №29

HTML 5. Развитие Web-Технологий, слайд №30

HTML 5. Развитие Web-Технологий, слайд №31

HTML 5. Развитие Web-Технологий, слайд №32

HTML 5. Развитие Web-Технологий, слайд №33

HTML 5. Развитие Web-Технологий, слайд №34

HTML 5. Развитие Web-Технологий, слайд №35

Содержание ▲

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

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

Слайд 1

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

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

Слайд 3

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

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

Слайд 5

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

Новые API Рисование 2D-картинок в реальном времени Контроль над проигрыванием медиафайлов, который может использоваться, например, для синхронизации субтитров с видео Хранение данных в браузере Редактирование Drag-and-drop Работа с сетью MIME - Multipurpose Internet Mail Extensions

Слайд 6

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

HTML HTML 5

Слайд 7

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

Новые элементы HTML 5

Слайд 8

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

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

Слайд 9

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

Формы

Слайд 10

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

Аудио+Видео

Слайд 11

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

Canvas Создание 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();

Слайд 12

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

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

Слайд 13

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

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");

Слайд 15

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

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 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);

Слайд 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))); }); }

Слайд 19

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

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; }

Слайд 21

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

Шрифты и текст Встраиваемые в сайт шрифты: @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; }

Слайд 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: 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

Слайд 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, 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...$

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

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; }

Слайд 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 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 Хранение данных