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

На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему HTML 5. Развитие Web-Технологий абсолютно бесплатно. Урок-презентация на эту тему содержит всего 35 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Презентации » Устройства и комплектующие » HTML 5. Развитие Web-Технологий


Оцените!
Оцените презентацию от 1 до 5 баллов!
Смотреть онлайн
Скачать
  • Тип файла:
    ppt / pptx (powerpoint)
  • Всего слайдов:
    35 слайдов
  • Для класса:
    1,2,3,4,5,6,7,8,9,10,11
  • Размер файла:
    159.16 kB
  • Просмотров:
    84
  • Скачиваний:
    1
  • Автор:
    неизвестен


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

№1 слайд
HTML
Содержание слайда: HTML 5
№2 слайд
Развитие Web-Технологий HTML
Содержание слайда: Развитие 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 CSS HTML JavaScpript API
Содержание слайда: HTML 5 CSS HTML JavaScpript API
№4 слайд
Отличия HTML от HTML Новые
Содержание слайда: Отличия HTML 5 от HTML 4 Новые правила лексического разбора; Новые элементы — footer, section, video, audio, progress, nav, meter, time, aside, canvas Новые типы input-элементов; Новые атрибуты; Глобальные атрибуты — id, tabindex, repeat Устаревшие элементы убраны — center, font, strike
№5 слайд
Новые API Рисование
Содержание слайда: Новые API Рисование 2D-картинок в реальном времени Контроль над проигрыванием медиафайлов, который может использоваться, например, для синхронизации субтитров с видео Хранение данных в браузере Редактирование Drag-and-drop Работа с сетью MIME - Multipurpose Internet Mail Extensions
№6 слайд
HTML HTML
Содержание слайда: HTML HTML 5
№7 слайд
Новые элементы HTML
Содержание слайда: Новые элементы HTML 5
№8 слайд
Microdata lt div item gt lt p
Содержание слайда: Microdata <div item> <p>Зовут меня<span itemprop='name'>Иван</span>.</p> <p>Я учусь в <span itemprop=‘institute'>МИЭМ</span></p> <p>на кафедре <span itemprop=‘a_department'>ИКТ</span>.</p> </div>
№9 слайд
Формы lt input type range min
Содержание слайда: Формы <input type='range' min='0' max='50' value='0'> <input autofocus type='search'> <input type='text' placeholder='Search inside'>
№10 слайд
Аудио Видео lt audio src quot
Содержание слайда: Аудио+Видео <audio src="sound.mp3" controls></audio> <video src='movie.mp4' autoplay controls ></video>
№11 слайд
Canvas Создание bitmap
Содержание слайда: 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 D Mozilla Foundation
Содержание слайда: Canvas 3D Mozilla Foundation Отображение трёхмерных изображений через HTML элемент canvas.
№13 слайд
JavaScriPT API HTML
Содержание слайда: JavaScriPT API HTML 5
№14 слайд
Поиск элементов По классу var
Содержание слайда: Поиск элементов По классу: 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
Содержание слайда: 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 lt html manifest
Содержание слайда: 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
Содержание слайда: Drag and drop document.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed = 'copy'; }, false);
№18 слайд
Geolocation if
Содержание слайда: 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
Содержание слайда: 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
Содержание слайда: Шрифты и текст Границы: 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 . текст c
Содержание слайда: Шрифты и текст 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 слайд
Форматирование Колонки lt
Содержание слайда: Форматирование Колонки: <article> -webkit-column-count: 4; -webkit-column-rule: 1px solid #bbb; -webkit-column-gap: 2em; </artcle>
№27 слайд
Работа с цветом HSLA модель
Содержание слайда: Работа с цветом 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 Множественные 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 px
Содержание слайда: Границы 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
Содержание слайда: Коротко о главном CSS: Улучшенная типографика Трансформации и переходы Новые селекторы HTML: Новая разметка Новые формы Canvas! Мультимедия JavaScript Drag & Drop Geolocation Хранение данных
№33 слайд
Браузеры
Содержание слайда: Браузеры
№34 слайд
А что с IE? Internet Explorer
Содержание слайда: А что с IE? Internet Explorer 9? Возможно… А сейчас – Google Frame для IE7/8
№35 слайд
Полезные ссылки http
Содержание слайда: Полезные ссылки 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
Скачать все slide презентации HTML 5. Развитие Web-Технологий одним архивом:
Скачать
Похожие презентации