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

1 HTML 5

2 Развитие Web-Технологий 1991 HTML 1994 HTML CSS + Java Script 1997 HTML CSS 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 Page title Page subtitle menu list… header content links… © Copyright 2010 HTML 4 Page title Page subtitle menu list… header content links… © Copyright 2010

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"); 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-family: 'Junction'; src: url(Junction02.otf); { 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, , 0, , 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%

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

33 Браузеры

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

35 Полезные ссылки