content
Содержание
- 2. Развитие Web-Технологий 1991 HTML 1994 HTML 2 1996 CSS + Java Script 1997 HTML 4 1998
- 3. HTML 5 CSS HTML JavaScpript API
- 4. Отличия HTML 5 от HTML 4 Новые правила лексического разбора; Новые элементы — footer, section, video,
- 5. Новые API Рисование 2D-картинок в реальном времени Контроль над проигрыванием медиафайлов, который может использоваться, например, для
- 6. HTML HTML 5
- 7. Новые элементы HTML 5 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();
- 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
- 15. Web SQL Database var db = window.openDatabase("Database Name", "Database Version"); db.transaction(function(tx) { tx.executeSql("SELECT * FROM test",
- 16. Cache API window.applicationCache.addEventListener('checking', updateCacheStatus, false); Содержимое файла manifest.cache: CACHE MANIFEST # v 1 CACHE: /src/logic.js /src/style.css
- 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,
- 19. CSS HTML 5
- 20. Селекторы Новые селекторы: .row:nth-child(even) { background: #dde; } .row:nth-child(odd) { background: white; } По атрибутам: input[type="text"]
- 21. Шрифты и текст Встраиваемые в сайт шрифты: @font-face { font-family: 'Junction'; src: url(Junction02.otf); } @font-face {
- 22. Шрифты и текст Границы: div { -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 1.00px; } Тени: header {
- 23. Шрифты и текст Отражения: header { -webkit-box-reflect: below 10px }
- 24. Шрифты и текст Web 2.0 текст c помощью CSS #example { font-size: 40pt; font-family: Verdana; text-align:center;
- 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,
- 28. Background Множественные 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
- 32. Коротко о главном CSS: Улучшенная типографика Трансформации и переходы Новые селекторы HTML: Новая разметка Новые формы
- 33. Браузеры http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML_5%29
- 34. А что с IE? Internet Explorer 9? Возможно… А сейчас – Google Frame для IE7/8
- 36. Скачать презентацию
< div id=“footer”>
© Copyright 2010