§ 1. HTML 5 API’S Знакомство
§ 1. HTML 5 API’S Знакомство с технологиями и интерфейсом прикладного программирования
HTML 1. 0 • История языка HTML началась в 1991 году, когда сэр Тим Бёрнерс Ли представил миру HTML 1. 0, в котором тогда описывалось всего лишь 20 тегов. Спецификации для языка HTML 1. 0 не существовало. • Сэр Тимоти Джон Бернерс-Ли — британский учёный, изобретатель URI, URL, HTTP, HTML, создатель Всемирной паутины (совместно с Робертом Кайо) и действующий глава Консорциума Всемирной паутины. Автор концепции семантической паутины • URI = URL + URN • URI = http: //handynotes. ru/2009/09/uri-url-urn. html • URL = http: //handynotes. ru • URN = /2009/09/uri-url-urn. html
W 3 C • В 1994 году был создан W 3 C — World Wide Web Consortium (Консорциум Всемирной паутины), который в 1996 году создаёт HTML 2. 0, а также спецификацию для него. W 3 C — это специальная структура, которая развивает и создаёт различные веб-технологии, в неё может войти любая организация или частное лицо, заинтересованное в развитии интернета. • http: //www. w 3. org/Consortium/join • В январе 1997 года, W 3 C создает HTML 3. 2, затем в декабре того же года HTML 4. 0, а в декабре 1999 года у HTML 4. 01.
XHTML 1. 0 • В 2000 году был разработан язык XHTML 1. 0, он должен был стать переходным звеном между языками HTML и XML. Задача языка XHTML 1. 0 состояла в том чтобы вытеснить из вёрстки все теги и атрибуты форматирования, а также приучить разработчиков сайтов к строгому синтаксису • В 2001 году, W 3 C создаёт XHTML 1. 1 который полностью становится подобием языка XML, браузер Internet Explorer который занимал 95% рынка его не поддерживал. • В 2002 году, W 3 C начал разрабатывать XHTML 2. 0, язык решили делать с нуля, что привело к проблемам совместимости с предыдущими версиями языков HTML и XHTML
Появление HTML 5 • История HTML 5 начинается в 2004 году, когда большая часть видных деятелей веб-индустрии, а также крупных компаний таких как (Google, Mozilla, Opera, Apple и Microsoft), создают свою собственную рабочую группу под названием WHATWG (возглавил её программист — Ян Хиксон). • Перед тем как начать работать над HTML 5, рабочая группа WHATWG создала две спецификации: Web Forms 2. 0 (веб-формы) и Web Apps 1. 0 (веб-приложения). Затем эти две спецификации сделали частью спецификации HTML 5.
XHTML 2. 0 • В 2006 году W 3 C всё еще продолжает работать над XHTML 2. 0. В том же году руководитель консорциума сэр Тим Бёрнерс Ли написал в своём блоге, что работа над XHTML 2. 0 видимо не будет иметь смысла, поскольку разработчики сайтов не желают создавать свои проекты по XML типу, а желают новых версий HTML. Поэтому в этом же году W 3 C начал разработку своей версии HTML 5 (пишется через пробел), в её основе лежали наработки рабочей группы WHATWG.
Cпецификацтия HTML 5 • В 2009 году W 3 C прекратил развитие XHTML 2. 0 и начал разрабатывать HTML 5 (решили писать без пробела) уже совместно с WHATWG. • К 2012 -му году, практически все современные браузеры в мире, начинают понимать язык HTML 5, хотя еще и остаются некоторые теги которые браузеры пока не понимают. • На данный момент, работа над языком HTML 5 продолжается, создаются новые теги и технологии, всё это добавляется в спецификацию, сама спецификация HTML 5 была опубликовна (28 октября 2014 г. ). • В будущем, решили не давать цифровых версий для HTML, если будут добавляться какие-либо новшества то их просто будут внедрять в существующую спецификацию, а сам язык называть просто HTML.
2015 • Unity 5 Ships and Brings One Click Web. GL Export to Legions of Game Developers • Вышел Unreal Engine 4. 7 с поддержкой HTML 5 и Web. GL • In 2015, You. Tube has realized that Flash is not the best solution for web video, full stop. • Open. Tok 2. 0 leverages Web. RTC, a technology that makes it possible to communicate in real-time natively in the browser • As your ambassador to real-time communications, we’ve stayed on top of that ever-changing ecosystem. That’s why we have some important news to share with you – The Open. Tok 1. 0 platform will no longer be supported as of January 5 th, 2015.
2015 • Revolve Robotics CTO, Ilya Polykov, and CEO, Marcus Rosenthal spoke about their integration of Open. Tok and Kubi. • Double Robotics Built on top of Tok. Box’s Open. Tok platform Double uses live audio and video communications allowing remote users to drive and operate the telepresence robot. Double’s system is built in i. OS and through the low latency that Web. RTC provides gives full control to the remote user.
Перечень технологий WHATWG (1 из 4) • HTML 5 Markup Простой doctype Объявление кодировки Наиболее интересные элементы: 1) Семантические
Перечень технологий WHATWG (2 из 4) • HTML 5 Audio - часть спецификации HTML 5, предназначенная для работы с аудио в веб-браузерах без помощи плагинов. Включает в себя воспроизведение, синтез и запись звука, также описывает методы распознавания речи. Элемент
Перечень технологий WHATWG (3 из 4) • Drag&Drop - реализуется новым атрибутом draggable и рядом событий на каждый этап действий по перемещению объектов: dragstart, dragenter, dragleave, dragover, drop, dragend • Web. Messaging – технология позволяющая отправлять кросс- доменные сообщения. Текстовое сообщение может быть отправлено фрейму в окне отправителя, родительскому окну или окну которое было открыто с помощью Java. Script.
Перечень технологий WHATWG (4 из 4) • Web. Workers - реализации фоновых вычислений. Обычная практика выполнения клиентских сценариев в единственном потоке хороша ровно до того момента, пока не надо произвести действительно серьезных и тяжелых вычислений • Web. Socket — протокол полнодуплексной связи поверх TCP- соединения, предназначенный для обмена сообщениями между браузером и веб-сервером в режиме реального времени. Этот протокол делает возможным более тесное взаимодействие между браузером и web сайтом, способствуя распространению live content и созданию real-time игр.
Храним данные на клиенте (1 из 3) • Web. Storage— это программные методы и протоколы веб- приложения, используемые для хранения данных в веб-браузере. • Постоянное хранилище данных похоже на куки, но со значительно расширенной ёмкостью и без хранения информации в заголовке HTTP запроса. • Существуют два основных типа веб-хранилища: локальное хранилище (local. Storage) и сессионное хранилище (session. Storage).
Храним данные на клиенте (2 из 3) • Web SQL Database - программные методы для хранения данных в базе данных на стороне клиента, получить доступ к которым можно с помощью языка SQL. • Используемая СУБД - SQLite. • Web SQL Database не является часть стандарта, но поддерживается в Google Chrome, Opera, Safari, Android Browser.
Храним данные на клиенте (3 из 3) • Indexed. DB – стандарт хранения больших объемов структурированных данных на клиенте – был ожидаем также как и Web. Socket (ну может самую малость меньше). • Indexed. DB - это хранилище объектов или, если хотите, объектная СУБД для веб. По сути, это те же таблицы, типы данных, транзакции, курсоры, но вместо языка запросов здесь применяются методы доступа.
App. Cache – управляем кэшированием вплоть до полного offline (1 из 2) • Кэширование в браузере – совершенно необходимый в современном мире механизм, который еще менее надежен и предсказуем, чем вышеупомянутые HTTP cookie. HTML 5 предполагает технологию кэширования ресурсов, в которой процесс целиком и полностью контролируем разработчиком. Это кэш приложений ( App. Cache) и API доступа к нему, позволяющий манипулировать загрузкой ресурсов и доступа к ним, в том числе в отсутствие связи с сервером. Управление кэшированием в App. Cache осуществляется посредством деклараций в файле манифеста. Это простой текстовый файл, расположенный в месте, доступном для веб-приложени.
App. Cache – управляем кэшированием вплоть до полного offline (2 из 2) • . . . • CACHE MANIFEST # 2012 -02 -21 v 1. 0. 0 /theme. css /logo. gif /main. js NETWORK: login. asp FALLBACK: /html/ /offline. html
File. System API • С помощью File. System API и File API веб приложение может создавать, читать, просматривать и записывать файлы находящиеся в области пользовательской «песочницы» . • Описание API разбито на следующие секции: Чтение и управление файлами: File/Blob, File. List, File. Reader • Создание и запись: Blob. Builder, File. Writer • Работа с директориями и права доступа: Directory. Reader, File. Entry/Directory. Entry, Local. File. System
Resource Description Framework (1 из 2) • Resource Description Framework (RDF, «среда описания ресурса» ) — это разработанная консорциумом Всемирной паутины модель для представления данных, в особенности — метаданных. RDF представляет утверждения о ресурсах в виде, пригодном для машинной обработки. RDF является частью концепции семантической паутины.
Resource Description Framework (2 из 2) • Ресурсом в RDF может быть любая сущность — как информационная (например, веб-сайт или изображение), так и неинформационная (например, человек, город или некое абстрактное понятие). Утверждение, высказываемое о ресурсе, имеет вид «субъект — предикат — объект» и называется триплетом. Утверждение «небо голубого цвета» в RDF-терминологии можно представить следующим образом: субъект — «небо» , предикат — «имеет цвет» , объект — «голубой» . Для обозначения субъектов, отношений и объектов в RDF используются URI. • Множество RDF-утверждений образует ориентированный граф, в котором вершинами являются субъекты и объекты, а рёбра отображают отношения
Здравствуйте! Я Здравствуйте! Я
•
Selectors API • Selectors API состоит всего из двух методов. Первый – query. Selector, получает в качестве аргумента строку с любым корректным CSS (или j. Query) – селектором и возвращает соответствующий элемент • Второй метод – query. Selector. All – отличается только тем, что возвращает массив DOM-элементов
Графика (1 of 4) • CSS 3 — каскадные таблицы стилей третьего поколения — активно разрабатываемая спецификация СSS. Представляет собой формальный язык, реализованный с помощью языка разметки. Самая масштабная редакция по сравнению с CSS 1, CSS 2 и CSS 2. 1. Главной особенностью CSS 3 является возможность создавать анимированные элементы без использования JS, поддержка линейных и радиальных градиентов, теней, сглаживания и многое другое.
http: //cssanimate. com/
Графика (2 of 4) • Canvas 2 D элемент HTML 5, предназначенный для создания растрового двухмерного изображения при помощи скриптов, обычно на языке Java. Script • SVG (от англ. Scalable Vector Graphics —масштабируемая векторная графика) — язык масштабируемой векторной графики, созданный Консорциумом всемирной паутины (W 3 C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML
Графика (3 of 4) • SVG – это векторная графика, Canvas представляет растовые изображения • SVG – возможность масштабирования и индексации • Canvas – работа с отдельными пикселями изображения, манипуляции с видео. • можно сказать, что сфера применения SVG – это ифографика, диаграммы, схемы, графики, иллюстрации, в то время как сфера действия canvas – видеоигры, обработка фотографий, «веб- живопись» .
http: //idevelop. ro/ascii-camera/
http: //snapsvg. io/
http: //snapsvg. io/
Графика (4 of 4) • Web. GL (Web-based Graphics Library) —программная библиотека для языка программирования Java. Script, позволяющая создавать на Java. Script интерактивную 3 D-графику, функционирующую в широком спектре совместимых с ней веб- браузеров. За счёт использования низкоуровневых средств поддержки Open. GL, часть кода на Web. GL может выполняться непосредственно на видеокартах. Web. GL — это контекст элемента canvas
http: //airtightinteractive. com/demos/js/webcammesh/
http: //armsglobe. chromeexperiments. com/
http: //playcanv. as/p/a. P 0 oxh. Ur
http: //playcanv. as/p/QYR 6 c. Q 4 L
Mouse Lock/Pointer Lock API • Mouse Lock/ Pointer Lock API Само название этого API, не так давно внедренного в Mоzilla Firefox, может вызвать недоумение и вопрос «А зачем? » . Но это только если вы не работаете в игровой индустрии. Этот механизм позволяет создателям игр получить полный контроль над мышью, например скрыть штатный курсор, обеспечить собственную обработку перемещения мыши.
Animation Timing API • Animation Timing (request. Animation. Frame). Предоставляет контроль над анимацией, точнее, над вызовами функции, ее осуществляющей. Мы можем останавливать процесс в тот момент, когда вкладка браузера с анимацией невидима, можем синхронизировать анимацию с различными событиями и процессами. Можем попросту экономить, сокращая количество вызовов, что благоприятно скажется на состоянии заряда батареи мобильного устройства
Network Information API • Network Information API предоставляет информацию о доступном сетевом соединении. Применяться такая информация может, например, в видеоиграх, при трансляции видеосигнала, доставке «тяжелого» контента, – в общем, везде, где необходимо учитывать пропускную канала • (реализовано только в Fire. Fox)
Prerendering • Prerendering – отрисовываем страницы заранее. Если вы когда- либо проектировали веб-ресурс, то знаете, что всегда есть ссылки, переход по которым для пользователя более чем вероятен. Хотите, чтобы страницы по ним открывались мгновенно? Тогда новый механизм, внедренный Google в своем браузере, – для вас. Все, что нужно, чтобы веб-страница была сгенерирована и построена еще до ее открытия, – разместить в секции
Диагностика производительности (1 из 2) • Navigation Timing API предоставляет данные для измерения производительности веб-сайта. • Список измеренных в миллисекундах событий: navigation. Start, unload. Event. End, redirect. Start, redirect. End, fetch. Start, domain. Lookup. End, connect. Start, connect. End, secure. Connection. Start, request. Start, response. End, dom. Loading, dom. Interactive, dom. Content. Loaded. Event. Start, dom. Content. Loaded. Event. End, dom. Complete, load. Event. Start, load. Event. End
Диагностика производительности (2 из 2) • User Timing api – определяет интерфейс который позволяет разработчикам измерять производительность их приложений давая им доступ высокоточным временным меткам. • Date. now() – разная точность в разных браузерах • performance. mark("start. Task 1"); • do. Task 1(); // Some developer code • performance. mark("end. Task 1"); var perf. Entries = performance. get. Entries. By. Type("mark");
Math. ML • Math. ML (от англ. Mathematical Markup Language — «язык математической разметки» ) — это язык разметки на основе XML для представления математических символов и формул в документах WWW. Math. ML рекомендован математической группой W 3 C. • x = frac{-b pm sqrt{b^2 - 4 ac}}{2 a}
Web Open Font Format • Web Open Font Format (WOFF) — расширение формата шрифта Open. Type или True. Type со сжатием и полностью совпадаюшим с оригиналом, что позволяет оставить неизменным механизм отрисовки. Также формат включает дополнительные метаданные, в которые производитель шрифта может включить информацию об использовании шрифта. Эта информация не влияет на то как этот шрифт будет загружен, но позволяет определить происхождение этого шрифта, так заинтересовавшийся шрифтом использованным на веб-странице может проследить какой шрифт использован.
Где это я? • Geolocation API – это инструмент, призванный определять географические координаты физического устройства, на котором запущен браузер. navigator. geolocation. get. Current. Position(function(position){ alert("Широта – "+ position. coords. longitude+ " Долгота – "+position. coords. latitude) });
http: //html 5 demos. com/geo
Touch events • Touch events – поддержка сенсорных интерфесов. • Touch. Event, Touch. List
Battery Status API (1 из 2) • Battery Status – API Наверное, само существование такого программного интерфейса в историческом 2004 году довело бы членов консорциума W 3 C до инфаркта, но все меняется очень быстро, и сегодня, спустя всего 8 лет, возможность доступа из Java. Script-кода к аккумуляторам планшета или коммуникатора — просто веление времени. Применений этой технологии можно придумать много — переключение на менее нагруженный 3 D- графикой интерфейс при недостаточном заряде батареи, автосохранение введенного текста при рискованном «времени жизни» , просто оповещение пользователя о низком заряде
Battery Status API (2 из 2) • navigator. battery. Он обладает следующими свойствами: • level – определяет уровень заряда батареи (от нуля до единицы); charging – показывает подключение к зарядному устройству (true/false); • charging. Time – количество времени, оставшегося до полной зарядки; • discharging. Time – оставшееся время работы от батареи
Ambient Light Events • Теплый ламповый API – Ambient Light Events Этот API, предназначенный для определения освещенности, тоже не сложен – задачи на него возложены довольно узкие и конкретные. Он представлен двумя объектами. • Light, предоставляет информацию об уровне рассеянного освещения (в люксах, lx). • Второй объект Light. Level и событие Device. Light. Event. Init предоставляют ту же информацию, но в именованных уровнях освещенности, а именно – «dim» , «normal» или «bright» .
Proximity Events • Proximity Events – речь всего лишь идет о датчике приближения устройства. Интерфейс Device. Proximity. Event предоставляет информацию о расстоянии между таким датчиком и соседним объектом
History API • Контроль истории посещений вообще и кнопки Back в частности всегда был несбыточной мечтой веб-разработчика, и вот теперь она стала реальностью. Новое History API для DOM-объекта Histoty предоставляет следующие методы: history. go(n) – перемещение по истории посещений. В случае отрицательного значения n – переход назад, иначе – вперед; history. back() – перемещение, как при нажатии кнопки Back или history. go(-1); history. forward() – перемещение, как при нажатии кнопки Forward или history. go(1).
Nofications API • Notifications API – это механизм всплывающих оповещений, причем всплывают они вне браузера и вообще довольно удобны, но реализованы они пока только в одном браузере Google Chrome
XMLHttp. Request 2 • XMLHttp. Request 2, или, точнее, XMLHttp. Request Level 2, – это тот самый, ответственный за AJAX-функционал объект XMLHttp. Request, оснащенный новыми возможностями. Все они – по сути, исправления недостатков предыдущей реализации компонента, имеющей уже огромные заслуги перед вебом, но, увы, неидеальной. Прежде всего нормальная работа с XMLHttp. Request заканчивалась там, где надо было выполнить кроссдоменный запрос.
Web Speech API – счастье, когда тебя понимают • Web Speech API пока не очень сложен (особенно в реализованной части), но все необходимое для нашей задачи там присутствует. Прежде всего это три метода, названия которых избавляют от необходимости объяснять их назначение: start(); stop(); abort(); • Список прилагающихся к объекту событий вполне достаточен для работы. Вот основные: start – начало работы «распознавателя» речи; end – завершение работы; result – вернул результат; nomatch – «распознаватель» сработал правильно, но распознать ничего не смог; error – ошибка в работе «распознавателя» .
Захват мультимедиа • navigator. get. User. Media(), предоставляет веб-приложениям доступ к видеокамере и микрофону. • Функция захвата данных мультимедиа – прекрасный пример совместной работы различных API в HTML 5. Она используется вместе с другими элементами HTML 5:
http: //html 5 demos. com/gum
Web. RTC (1 из 3) • Web. RTC (англ. real-time communications — коммуникации в реальном времени) — проект с открытым исходным кодом, предназначенный для организации передачи потоковых данных между браузерами или другими поддерживающими его приложениями по технологии точка-точка. Его включение в рекомендации W 3 C поддерживается Google Chrome, Mozilla и Opera • После встраивания Web. RTC в Chrome, Mozilla Firefox (а возможно ещё и в ряд других популярных браузеров), браузеры могут составить конкуренцию Skype
Web. RTC (2 из 3) • В Web. RTC используются два аудиокодека G 711 и OPUS а также видеоформат VP 8 (Web. M) • Технология Web. RTC делает возможным общение через окно браузера, необходимо лишь отправить собеседнику ссылку на ресурс, что значительно упрощает процесс участия в видеоконференциях. • В начале 2013 года осуществлён первый видеозвонок между Chrome и Firefox
Web. RTC (3 из 3) • Применение технологии выходит за рамки peer-to-peer между браузерами и широко используется на серверной стороне, главным образом для того чтобы обеспечить совместимость с другими сигнальными и коммуникационными протоколами и кодеками. С помощью сервера можно организовывать Web. RTC трансляции не только из браузеров, но и со стационарных IP- камер, использующих протокол RTSP/RTP и видеокодек H. 264. • Существует несколько готовых реализаций Web. RTC-серверов. Для ASP. NET доступен Nu. Get под наименованием XSockets. Samples. Web. RTC
Список литературы • Сухов К. HTML 5 – путеводитель по технологии. – М. : ДМК Пресс, 2013. – 352 с. • DIVE INTO HTML 5 BY MARK PILGRIM http: //www. jesusda. com/docs/ebook_manual_en_dive-into- html 5. pdf • http: //www. w 3 schools. com/ • http: //www. html 5 rocks. com/ru/ • https: //ru. wikipedia. org/wiki/HTML 5 • http: //www. webrtc. org/