Your SlideShare is downloading. ×
Обзор возможностей HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Обзор возможностей HTML5

1,205
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,205
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. “ОБЗОР ВОЗМОЖНОСТЕЙ HTML5” Тромпак Виталий .NET Developer
  • 2. Преимущества:  Интерактивность  Улучшенная семантика  Улучшенная доступность  Улучшенное хранение данных  Автономный кэш  Улучшенные формы
  • 3. Структура документа HTML 5
  • 4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!doctype html> < meta charset="UTF-8">
  • 5. Новые теги <menu> <hgroup> <keygen> <ruby > <section> <nav> <mark> <rt> <figure> <dialog> <header> <wbr> <figcaption> <footer> <rt> <time>
  • 6. Новые теги <audio> <meter> <canvas> <video> <source> <audio> <output> <datalist> <details> <progress> <command>
  • 7. Атрибуты тега <audio> Autoplay Controls Src Loop Preload
  • 8. Атрибуты тега <video> Autoplay Controls Height Loop Width Preload Poster
  • 9. Теги которые не поддерживает HTML5 – acronym –frameset – applet –isindex – basefont –noframes – big –noscript –s – center –strike – dir –tt – font –u – frame
  • 10. Новые события относятся к тегу <body>:Атрибуты Описанияonafterprint Скрипт выполняется после того как документ напечатанonbeforeprint Скрипт выполняется до того как документ напечатанonbeforeonload Скрипт выполняется перед загрузкой документаonerror Скрипт выполняется при возникновении ошибкиonhaschange Скрипт выполняется, когда документ изменилсяonmessage Скрипт выполняется, когда сообщение срабатываетonoffline Скрипт выполняется, когда документ переходит в автономный режимononline Скрипт выполняется, когда документ поступает онлайнonpagehide Скрипт выполняется, когда окно скрытоonpageshow Скрипт выполняется, когда окно становится видимымonpopstate Скрипт выполняется, когда история окна изменяется
  • 11. Атрибуты Описанияonredo Скрипт выполняется, когда документ выполняет повторonresize Скрипт выполняется при изменении размеров окнаonstorage Скрипт запускается при загрузке документаonundo Скрипт выполняется, когда документ выполняет "отменить"onunload Скрипт выполняется, когда пользователь покидает документ
  • 12. События выполняются по действиям внутри HTML form. Атрибуты Описания oncontextmenu Скрипт выполняется, когда контекстное меню срабатывает onformchange Скрипт выполняется, когда форма изменена onforminput Скрипт выполняется, когда форма получает пользовательский ввод oninput Скрипт выполняется, когда элемент получает пользовательский ввод oninvalid Скрипт выполняется, когда элемент недействителен
  • 13. События мышкиАтрибуты Описанияondrag Скрипт выполняется при перетаскивании элементаondragend Скрипт выполняется по окончании перетаскивания элементаondragenter Скрипт выполняется, когда элемент перетащен в допустимую цельondragleave Скрипт выполняется, когда элемент покидает допустимую цельondragover Скрипт выполняется, когда элемент перетаскивают над допустимой целью паденияondragstart Скрипт выполняется в начале операции перетаскиванияondrop Скрипт выполняется, когда перетаскиваемый элемент отпущенonmousewheel Скрипт выполняется, когда колеса мышки вращаютсяonscroll Скрипт выполняется, когда полоса прокрутки элемента прокручивается
  • 14. События медиаАтрибуты Описанияoncanplay Скрипт выполняется, когда медиа может начать играть, но, возможно будет остановлено для буферизацииoncanplaythrough Скрипт выполняется, когда медиа может быть проиграно до конца, без остановок для буферизацииondurationchange Скрипт выполняется, когда длина медиа измениласьonemptied Скрипт выполняется, когда ресурс медиа элемента вдруг становится пустым (сетевые ошибки, ошибки при загрузке и т.д.)onended Скрипт выполняется, когда медиа дошло до концаonerror Скрипт выполняется при возникновении ошибки во время загрузки элементаonloadeddata Скрипт выполняется, когда данные медиа загрузилисьonloadedmetadata Скрипт выполняется, когда продолжительность и другие данные медиа-элемента загрузилисьonloadstart Скрипт выполняется, когда браузер начинает загружать медиа-данные
  • 15. Атрибуты Описанияonpause Скрипт выполняется, когда медиа приостановленоonplay Скрипт выполняется, когда медиа, собирается начать игратьonplaying Скрипт выполняется, когда медиа начинает игратьonprogress Скрипт выполняется, когда браузер получает медиа- данныеonratechange Скрипт выполняется, когда скорость проигрываемых медиа данных измениласьonreadystatechange Скрипт выполняется, когда готовое состояние изменилосьonseeked Скрипт выполняется, когда атрибут медиа-элемента seeking больше не true, и поиск закончилсяonseeking Скрипт выполняется, когда атрибут медиа-элемента seeking равен true, и поиск началсяonstalled Скрипт выполняется, когда есть ошибки в выборке данных медиа (тупик)
  • 16. Новые атрибуты  contenteditable  tabindex  draggable  hidden  spellcheck  contextmenu
  • 17. Атрибуты форм  Autocomplete Required  Novalidate Placeholder  Maxlength Autofocus  Pattern Step  Readonly  List
  • 18. JS: Geolocation APIif (navigator.geolocation) { // Работает }Функция getCurrentPositionnavigator.geolocation.getCurrentPosition( function(position) { console.log(position.coords.latitude, position.coords.longitude); });latitude (широта)longitude (долгота).Метод динамического слижения watchPosition .
  • 19. Хранение данных на стороне клиента localStorage - хранит данные без ограничения времени <script> localStorage.lastname="Lisa"; document.write(localStorage.lastname); </script> localStorage.clear(); - очистить всё хранилище sessionStorage - хранит данные одного сеанса <script> sessionStorage.lastname="Lisa"; document.write(sessionStorage.lastname); </script>
  • 20. HTML5 appcache<html manifest=manifest.appcache> CACHE MANIFEST CACHE: #images /images/image1.png /images/image2.png #pages /pages/page1.html /pages/page2.html #CSS /style/style.css #scripts /js/script.js FALLBACK: / /offline.html MIME для веб-сервера AddType text/cache-manifest .appcache
  • 21. History APIОсновные методы объекта History:window.history.lengthwindow.history.state: Возвращает текущий объект историиwindow.history.go(n)window.history.back() (-1)window.history.forward()window.history.pushState(data, title [, url]): Добавляет элементистории.window.history.replaceState(data, title [, url]): Обновляет текущийэлемент истории
  • 22. СсылкиПолезные источникиhttp://oxdef.info/papers/html5/index.htmlhttp://web.izjum.com/javascript-localstoragehttp://vkurseweba.ru/blog/html5-i-budushee-webhttp://xhtml.co.il/ru/http://htmlbook.ru/htmlОбратная связьVitalTrompak@gmail.comhttp://www.facebook.com/profile.php?id=100001799077813Блогhttp://dev.net.ua/blogs/vitaliitrompak/