Отличия HTML5 от предыдущих версий

Размещено на http://www.allbest.ru

Оглавление

ВВЕДЕНИЕ

ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ СИСТЕМЫ HTML5

1.1 История появления HTML5

1.2 Состав HTML5

1.3 Основные особенности HTML5

Глава 2. ОТЛИЧИЯ HTML5 ОТ ПРЕДЫДУЩИХ ВЕРСИЙ. СРАВНИТЕЛЬНЫЙ АНАЛИЗ ПЛЮСОВ И МИНУСОВ

2.1 Преимущества HTML5

2.2 Недостатки HTML5

2.3 Использование секционных элементов HTML5

2.4 Геолокация

2.5 HTML5 видео

2.6 Сравнение браузеров

ЗАКЛЮЧЕНИЕ

ВВЕДЕНИЕ

Со времён языка разметки HTML4.1 прошло более 14 лет и на сегодняшний момент Html5 официально признан от 28 октября 2014 года. Сейчас во всю используется данный язык во всемирной паутине, но множество сайтов ещё не перешло на новый стандарт.

Первые задумки нового языка разметки веб-страниц появились в 2004 году, как раз на момент создания крупных деятелей веб-индустрии, таких как (Apple, Microsoft, Google и Mozilla).

Перед самим созданием HTML 5 компанией WHATWG создавались две спецификации Web Forms 2.0 и Web Apps 1.0, которые в следствие объединили и сделали частью спецификации языка HTML 5. С 2009 года к разработке присоединилась World Wide Web Consortium (W3C), который возглавляет британский учёный и один из изобретателей всемирной паутины Сэр Тимоти Джон Бернерс-Ли. Тогда же решили писать HTML5 без пробела.

HTML5 стремиться сделать интернет сайты более семантически правильными, более интерактивными, более динамическими и быстрыми, стереть привычные рамки между предыдущими версиями HTML, так же он включает в себя функции, которые в более ранних версиях требовали Flash или Javascript, в связи с этим событием разработка сайтов должна упроститься, так же подразумевается кроссплатформенность.

Самые знаменитые возможности у нового языка - это появление таких тегов как aside, footer, header, nav и article, и полная поддержка новых типов полей ввода в формах, включая атрибут phone и email, обеспечивающих правильную валидацию, а также ряд новых медиа-элементов (audio, video, canvas), позволяющих динамически менять или рисовать контент.

Целью данной курсовой работы является изучение структуры HTML5.

Предметом курсовой работы является практика реализации сайтов на системе HTML5.

Объектом курсовой работы является стандарт HTML5.

Задачами курсовой работы является:

- изучение теоретических основ системы HTML5;

- анализ основных особенностей HTML5;

- изучение преимуществ и недостатков;

- исследование перспектив развития HTML5.

Структура курсовой работы:

Курсовая работа состоит из введения, двух глав, заключения и списка литературы.

ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ СИСТЕМЫ HTML5

1.1 История появления HTML5

История появления языка кроется в далёком 1969 году. Чарльз Гольдфарб, работавший в IBM, впервые создал прототип языка для разметки технической документации, названный в последствии GML. В 1986 году язык приобрёл статус международного стандарта и стал называться SGML, что означает Standard Generalized Markup Language. На этом этапе создатели старались избавиться от проблем отображения текста в различных программах, компьютерных платформ и устройствах вывода. SGML ещё не готовая система разметки текста, а лишь метаязык, позволяющий строить подобные системы для конкретных обстоятельств. Этот стандарт может установить правила определения новых элементов и структурных взаимоотношений между ними, а также указать синтаксис записи элементов разметки. Но для полноценной разметки документов необходимо приложение SGML, которое включает в себя набор элементов, представляющих формальное описание структуры документа.

Популярность SGML так и не набрал до 1991 года. Им заинтересовались сотрудники Европейского института физики частиц (CERN), занимавшиеся в то время созданием системы передачи гипертекстовой информации через интернет. Тогда же язык был переименован в язык разметки гипертекста HTML (Hyper Text Markup Language). HTML 1.2 обновлённый на июнь 1993 года имел уже в себе более 40 тегов, из которых лишь три могли применяться для определения физических параметров представления документа.

В апреле 1994 года языком занялся Консорциум Всемирной паутины (World Wide Web Consortium) сокращённо W3C, созданный в том же году. На тот момент 1994-1995 года членами W3C были исключительно университеты и научные учреждения. Появляется спецификация языка HTML 2.0 в которой реализован механизм форм для отсылки информации с компьютера пользователя на сервер, но окончательно она была утверждена в сентябре 1995 года.

Работа над HTML 3 началась в марте 1995 года и первая версия включала в себя множество нововведений таких как вставка обтекаемых текстом картинок, создание таблиц, математических формул и примечаний. Эта версия уже имела поддержку иерархических спецификаций (CSS). Система формально независима от HTML, имеет свой синтаксис и позволяет задавать параметры представления любого тега HTML, но CSS ещё далёк до завершения.

Корпорация Microsoft профинансировав W3C и наполнив его людскими ресурсами получила право едва ли не решающего голоса в этой организации. Проект HTML 3 заморозили и вместо него в очень краткие сроки создаётся проект HTML 3.2, который описывает большинство расширений Microsoft. HTML 3.2 утверждается в январе 1997 года.

В декабре 1997 года принят стандарт HTML 4.0, который заметно обогатился визуальными тегами. Обеспечилась и доступность многоязычных документов в различных средах. На этот момент в стандарте проведено чёткое разделение логических и визуальных тегов. Появляется объектная модель страницы (Document Object Model), элементами которой можно манипулировать посредствам скриптовых языков таких как JavaScript. HTML вместе с Document Object Model и JavaScript позволяли загруженной интернет странице изменять свой внешний вид в соответствии с действиями пользователя. 24 декабря 1999 года появляется HTML 4.01, являющийся последней редакцией четвёртой версии.

В начале 2004 года группа разработчиков начала рассматривать HTML совершенно с другой стороны и вместо того, чтобы исправить уже имеющуюся программу они сосредоточились на том, чего в ней не хватало современным разработчикам для реализаций своих идей.

В итоге всех трудов, HTML зародился как инструмент отображения документов и только с появлением языка сценариев JavaScript HTML преобразовался в систему для разработки веб-приложений. С помощью HTML, на тот момент были разработаны поисковые движки, интернет магазины и многое другое. Но беспокойство у веб-разработчиков всё равно оставалось, ведь разработать полноценный сайт, стоило огромных усилий со стороны разработчиков.

Разработчики web-браузеров из компаний таких как Opera Software и Mozilla Fuondation, не заставили себя долго ждать, всем хотелось расширить возможности XHTML, но когда попытки не увенчались успехом, компании Opera, Mozilla и Apple создали рабочую группу по технологиям гипертекстовых web приложений сокращённо WHATWG, с целью работы над новыми решениями языка.

Группа WHATWG ставила перед собой задачу постепенного расширения языка, в ходе которого были созданы две спецификации расширений: Web Applications 1.0 и Web Forms 2.0. В итоге спецификации «эволюционировали» и появился HTML5.

1.2 Состав HTML5

Браузеров, как таковых имеющих поддержку HTML5 на сегодняшний момент не существует, есть лишь некие, постепенно расширяющиеся возможности HTML5, которые и включены в состав современных браузеров, поскольку язык ещё не полностью признан. На этой стадии существует и отрицательная сторона этого языка и она заключается в сложности веб разработчиков «угадать» поддерживает ли выбранный браузер всю реализованную ими функциональность веб сайта.

Итак, приведём список и краткое описание основных категорий функциональных возможностей, охватываемых в HTML5:

Ядро HTML5.

Эта часть содержит новые семантические элементы, улучшенные элементы управления для веб-форм, поддержку видео и аудио, а также холст для рисования на JavaScript.

Ранние возможности HTML5.

В самом начале, в первичной спецификации HTML5, использовались возможности, требующие JavaScript, но самыми выдающимися являются приложения, работающие в автономном режиме, локальное хранение данных и конечно же обмен сообщениями.

Возможности HTML5.

Это возможности нового поколения, включающих геолокацию и CSS3, изначально они не были стандартом HTML5.

Из-за перехода поддержки HTML от одной организации W3C к другой WHATWG, а потом обратно, возникла довольно необычайная ситуация. С технической точки зрения организация W3C отвечала за определение, что именно является официальным HTML5, а что наоборот. И в то же самое время группа WHATWG не прекращала свою работу, разрабатывая и придумывая всё новые возможности языка. На сегодняшний день она предпочитает называть его не HTML5, а просто HTML, объясняя это тем, что HTML будет продолжать и в будущем в качестве «живого» языка.

Так как HTML является «живым» языком, то веб страница никогда не устареет и не перестанет работать в более поздних версиях. Так же для HTML никогда не потребует номер версии, а веб разработчикам не понадобится в будущем обновлять свою разметку от одной версии языка к другой, что бы она работала на новых браузерах.

Преимуществом этого стандарта является возможность в любое время, добавлять в язык HTML новые элементы языка, тем самым давая разработчикам браузеров выбор, использовать ли новые элементы в своих продуктах либо отказаться от них, посчитав их нецелесообразными, так же возможности не будут привязаны к какому-либо стандарту HTML.

1.3 Основные особенности HTML5

Самой важной задачей языка стал вопрос реализации правильного интегрирования мультимедийного контента, исключающего в дальнейшем использования дополнительных плагинов в веб браузерах, таких как Adobe Flash Player и другие. Заменяя их на довольно привычные веб разработчику теги.

Canvas

Рассмотрим функцию «Canvas» в переводе «Холст». В данном языке он предназначен для создания растрового изображения при помощи JavaScript. Используется для создания простеньких векторных изображений, непосредственно прописываемых в самом HTML, было это до недавнего времени, на сегодняшний момент можно использовать полноценные 3D сцены у себя на сайте, с обновлёнными браузерами Google, Firefox и другими. Blend4Web если вкратце, то это открытая платформа для создания трёхмерных веб-приложений, открытый релиз которой прошёл в марте 2014 года. И в качестве основного инструмента в ней используется Blender -популярный пакет 3D моделирования с открытым исходным кодом.

Для того, чтобы не было задержек в браузере используется поддержка многопоточности.

Cookies

Полностью меняется и способ хранения информации по новой технологии Web Storage на клиентской стороне храниться до 10 Мбайт данных. В Cookies информация хранится в специальной базе данных, что позволяет хранить не только частичную информацию о сайтах, но и специальные веб-приложений, способствующих работать без подключения к интернету.

IFrame

В новом теге IFrame по сравнению со старым Frame используется фильтр Sandbox, который ограничивает действие скриптов с внешних веб-сайтов, что обеспечивает наибольшую безопасность от вирусов.

Video

В HTML5 элемент <video> предназначен для вставки видео на вашу страничку без использования сторонних плагинов, наподобие Apple QuickTime, Adobe Flash. Тег так настроен, что вам остаётся выбрать лишь видео файл, который будет размещён на вашем сайте, поддерживающий HTML5, и браузеры сами выберут тот формат, с которым они работают.

Для браузеров, не поддерживающих HTML5 и полностью игнорируют этот тег, следует указать браузеру проигрывать видео файл через сторонний плагин, названный выше, это решение не использует JavaScript, тем самым работая во всех браузерах.

Локальное хранилище

Локальное хранилище, позволяющая сайтам сохранять информацию на локальном компьютере, и обращаться к нему в дальнейшем. Стоит учесть, что хранилище хоть и входит в спецификацию HTML5, но отделено от неё, разбитое на отдельные кусочки, для уменьшения его размера. О безопасности такого хранилища не стоит беспокоиться, изменить или просматривать ваши данные в хранилище могут лишь те, кто имеет непосредственный доступ к компьютеру либо сайты, которые могут прочитать или модифицировать собственные значения, к другим данным в хранилище у них нет прав.

Геолокация

Геолокация это способ узнать, где вы находитесь, конечно же по усмотрению можно делиться этой информацией со своими друзьями. В HTML5 геолокация была стандартизирована и отделена и всё же о ней стоит упомянуть, как о части развития веб-технологий.

Form

В полях ввода произошли различные добавления новых полей, после тега <form>. Перечислим их:

<input type="search"> для поиска

<input type="number"> для ввода чисел

<input type="range"> ползунок

<input type="color"> для выбора цвета

<input type="tel"> для телефонного номера

<input type="url"> для веб-адресов

<input type="email"> для почтовых адресов

<input type="date"> для выбора календарной даты

<input type="month"> для месяца

<input type="week"> для недели

<input type="time"> для времени

<input type="datetime"> для указания даты и времени

<input type="datetime-local"> для местной даты и времени

Подсказывающий текст

Это небольшое изменение для формы, подсказывающий текст для тега <input>. Текст не отображается внутри поля, пока оно не будет очищенно или не получит фокус и при щелчке в поле, подсказывающий текст исчезает.

Автофокус форм

Веб сайты используют JavaScript для автоматического перемещения фокуса к первому элементу формы. К примеру, на сайте Google.ru автофокус перемещён на форму для ввода поискового запроса, и пользователям уже не приходится каждый раз наводить на него курсор. Ранее автофокус писался на JavaScript, теперь же для форм в HTML достаточно применить атрибут autofocus. Разработчики браузеров могут предложить пользователям возможность отключить в настройках автофокус.

Микроданные

Микроданные это обычный способ добавить дополнительную семантику на веб-страницу. В HTML5 входит не только стандарт микроданных, но и функции DOM (в основном для браузеров, позволяющий получить доступ непосредственно к коду HTML страницы). Но если необходимо получить доступ и управлять микроданными через DOM, нужно проверить поддерживает ли ваш браузер соответствующий API.

Новая технология Web Forms 2.0. обеспечивает более быструю и качественную обработку, введённую пользователем данных, при этом количество тегов заметно увеличено.

Глава 2. ОТЛИЧИЯ HTML5 ОТ ПРЕДЫДУЩИХ ВЕРСИЙ. СРАВНИТЕЛЬНЫЙ АНАЛИЗ ПЛЮСОВ И МИНУСОВ

2.1 Преимущества HTML5

HTML5 привлёк к себе огромное внимание веб-разработчиков. И так отличия HTML5 от его предшественников.

Новые возможности этого стандарта предназначены для создания интерактивных веб-приложений с максимальным использованием мультимедийного контента, работы с программными интерфейсами и структурирования документов. язык интерактивный веб приложение

Структурные возможности HTML5 создают структуру веб-документа более простой и понятной, а код намного «чище». Вместо контейнеров div, использующихся в HTML 4.01 можно использовать такие теги как header «заголовок», nav «навигация», section «раздел документа», article «содержимое сайта», aside «содержимое сайта» и footer «подвал сайта».

Новые элементы позволяют лучше описывать верхний и нижние колонтитулы, блоки сайта, текста и другие части веб-сайта. Эти нововведения используются для генерации оглавления и организации более эффективной и простой навигации по веб-странице, не засоряя при этом код другими второстепенными тегами. Приведём примеры:

Пример 1. Вместо громоздкой записи HTML4.01: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,

в HTML5 это будет выглядеть гораздо короче:

<!DOCTYPE html>.
Пример 2. В HTML4 для создания заголовка необходим код:

<div id="header">

<h1>Мой заголовок</h1>

<p class="tagline">текст</p>

</div>

В HTML5 используется элемент <header> вместо <div id="header">:

<header>

<h1>Заголовок</h1>

<p class="tagline"> свой текст </p>

</header>

Как видим, код становится проще и понятнее.

Мультимедийные возможности в HTML5 исключают использование Adobe Flash и других сторонних программ. Для добавления музыкальных и видео файлов можно воспользоваться любым браузером, поддерживающим HTML5, когда в HTML 4.0 и HTML 4.01 необходимо наличие дополнительных программ.

Ввод данных в формах HTML5 стал намного безопасней, правильность данных контролируется непосредственно во время ввода, тогда, как в HTML 4 проверка правильности введённых данных осуществляется уже после отправки документа, что не создаёт определённые неудобства пользователям.

Текст и изображение в HTML5 становятся единым целым, что заметно увеличивает количество возможностей и позволяет создавать весьма впечатляющие, красочные веб-сайты без сторонних скриптов.

Анимации и графика. Здесь разработчики могут воспользоваться функцией Canvas, которая способна заменить Adobe Flash и подобные ему дополнительные программы. Появляется возможность разместить на своём сайте анимацию, графические элементы и даже небольшие игры, непосредственно на веб-сайте.

Преимущества для конечного пользователя. Здесь произошёл ряд полезных изменений:

- Не требуется установка многочисленных сторонних программ.

- Совместимость HTML5 в отличие от своих предшественников, доработана. Он совместим не только на персональных компьютерах и ноутбуках, но ещё и с планшетами, смартфонами, современными моделями DVD плееров, телевизоров, консолей, которые обеспечивают доступ к интернет ресурсам.

- В HTML5 единый стандарт отображения контента, независимо от типа браузера.

2.2 Недостатки HTML5

Adobe на фоне становления HTML5

На сегодняшний день хоть в HTML5 и есть нововведения, которые позволят заменить некоторые дополнительные программы как Adobe Flash, не стоит говорить об окончательном уходе этого знаменитого продукта за ненадобностью. Например, вот что говорят разработчики игр о недостатках в HTML5, явно мешающих использовать язык разметки в этом направлении:

Не каждый веб-браузер поддерживает игры, созданные в HTML5.

Присутствует некая медлительность работы игр, созданных в HTML5.

Открытость кода, что неприемлемо для платных игр.

Неудобство в отсутствии удобных и привычных инструментов для создания игр, и особенно в создании анимации.

Неудобство в создании векторной графики.

Платформу Flash используют при создании сложной анимации, разработки интерфейсов, в создании сложной рекламы в трёхмерной графике. Она постоянно совершенствуется и эволюционирует.

Philippe Le Hegaret - руководитель направления компании W3C отмечает, что в ближайшее и довольно длительное время технологии HTML5 и Adobe Flash продолжат свое сосуществование, поскольку резко отказаться от Flash не получится.

В HTML5 существуют некоторые недостатки. Имеется уязвимость в области защиты информации. Такую уязвимость создаёт сравнительно большой, в сравнениями с предшественниками, файл cookie, что представляет собой данные, сохраняемые веб-страницами и приложениями о информации пользователя на жёстком диске.

Эксперты убеждены, что если большой объём cookie будет храниться в течение длительного времени, то веб-сайты, обращаясь к нему через JavaScript после загрузки страницы, способны незаметно для пользователя собирать информацию и передавать данные владельцу сайта, что само по себе неприемлемо.

Мультимедийный контент в отношении к HTML5, который так же не позволяет сделать окончательный выбор. Как отметили в официальном блоге YouTube, поддержка видео в HTML5 воспроизводит мультимедийный контент сайта на PC и других устройствах, имеющих поддержку интернета, которые не имеют поддержки Flash Player. Однако в полной степени стандарт HTML5 всем этим потребностям не отвечает. В нём имеются не только недостатки, касающихся воспроизведения видео, но и создания игр и векторной графики. Но не смотря на всю эту критику со стороны веб- разработчиков, новый стандарт стоит внимания.

2.3 Использование секционных элементов HTML5

В HTML5 вместо старых <div> предлагает использовать набор секционных элементов. Проанализировав огромную кучу сайтов в интернете разработчики HTML5 пришли к единому выводу, что в большинстве случаев разметка страницы состоит из элементов, приведённых ниже.

Элемент main отражает главное содержание вашей веб-страницы. Оно должно быть уникальным и не повторяться в других областях сайта.

Возможно использовать лишь один элемент <main> и его нельзя помещать внутри элементов <aside>, <article>, <footer>, <header> или <nav>.

Пример:

<body>

<header>

<div id="logo">Фильмы</div>

<nav>...</nav>

</header>

<main role="main">

<h1> Лучшее </h1>

<p> …</p>

</main>

</body>

Атрибут роли ARIA role=”main”, указывает на важность этого документа программам, которые не поддерживают этот элемент (некоторые скринридеры)

Элемент article содержит часть информации, которая может быть вырвана из текста страницы без потери смысла. В качестве такой информации могут служить: статья в блоге, новость, какой-либо комментарий.

Пример:

<article>

<header>

<h1> статья</h1>

<p>Опубликовано: 15 ноября 2014</p>

</header>

<p>…</p>

</article>

Так же можно вкладывать элементы <article> один в другой. Всё это будет связанно с внешним элементом <article>.

Элемент section используется для представления секции или группы контента. Он похож на <article>, но здесь допускается отсутствие смысла содержимого внутри этого элемента вне контекста страницы. В этом случае рекомендуется применять теги h1…h6 для обозначения темы группы (секции).

Пример:

<section>

<h2>Заголовок страницы</h2>

<p>...</p>

</section>

Элемент nav отлично подходит для основной навигации по сайту, постам или оглавлению. Разметка у ссылок на сайте упрощает навигацию, хотя и не требуется при использовании этого элемента.

Пример:

<nav>

<ul>

<li><a href="# ">Главная</a>

<li><a href="www.yandex.ru ">Яндекс</a>

<li><a href="www.google.com">Гугл</a>

</ul>

</nav>

Элемент aside предназначен для выделения содержимого, связанного с окружающим контентом, но которое может рассматриваться и отдельно. К такому содержимому могут относиться цитаты, боковые сноски, как в книгах и другие.

Пример:

<article>

<header>

<h1>Покупка акций газпром </h1>

<p>Опубликовано: 10.11.2014</p>

</header>

<p>...</p>

<aside>

<h1>Заголовок статьи</h1>

<p>Данные о держателях акций</p>

</aside>

</article>

Элемент header обычно представлен на веб-сайтах в виде заголовка или каких-либо метаданных, относящихся к контенту, к примеру дата публикации.

Пример:

<header>

<h1>Путешествие к центру земли</h1>

<p>Опубликовано: 10 ноября 2014</p>

</header>

Элемент footer в основном используется для такой информации о разделе, как авторские права, сторонние ссылки, автор.

Пример:

<footer>

ВКонтакте © 2014

</footer>

Элемент address предназначен не для разметки почтовых адресов, а для отображения контактной информации о авторе, статье либо веб-страницы.

Этот элемент часто используют внутри тега <footer>, который расолагается внутри элемента <article>.

Пример:

<address>

Контакты <a href="mailto:Smaksim.2012@yandex.ru">Макс</a>

</address>

Подводя итоги можно подчеркнуть, что использование секционных элементов HTML5 для разметки веб-страниц имеет ряд преимуществ таких как придание семантического значения своей страницы, облегчающего компьютерным программам (скринридерам) работу по идентификации ключевых элементов содержания и навигации по сайту. Помогает разработчикам быстрее разобраться в HTML коде, понять к какому контенту относится тот или иной блок сайта.

2.4 Геолокация

Это информация о вашем местонахождении и к тому же обмен этой информации со своими друзьями. Существует несколько способов определить местоположение:

По IP адресу с подключением к беспроводной сети. По такому принципу определяется местонахождение мобильного телефона во время разговора.

GPS - это специальное оборудование, вычисляющее долготу и широту на основе данных, посылаемых спутниками.

В определении вашего местонахождения нет ничего страшного. В API геолокации говорится прямо, что браузеры не имеют права отправлять информацию местонахождения на сайты без специального разрешения пользователя.

Простейшее использование API геолокации:

function get_location() {

navigator.geolocation.getCurrentPosition(show_map);

}

Здесь нет проверки и других дополнительных функций.

В Mozilla Firefox вызов функции getCurrentPosition() приведёт к выводу вот такой информационной панели в верхней части вашего браузера.

Так как она является безусловной, то нет способа её обойти. Блокируемой, и нет вероятности, что веб-сайт определит местонахождение, пока панель ждёт вашего ответа.

На данном этапе у нас есть результат, возвращаемой getCurrentPosition().Информация выглядит следующим образом:

function show_map(position) {

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

}

Функция вызывается с единственным параметром, но с двумя свойствами объекта. Это timestamp и coords. Timestamp содержит дату и время, когда было вычислено место, а coords имеет свойства:

latitude, longitude - В градусах.

altitude, accuracy, altitudeAccuracy - В метрах.

Heading - Градусы по часовой стрелке от севера.

Speed - В метрах в секунду.

Рекомендуется использовать latitude, longitude, accuracy в остальных случаях возможно возвращение null, в зависимости от используемого устройства.

Обработка ошибок.

Всегда может произойти непредвиденное, так как геолокация весьма сложна. Что если оборвётся связь или пользователь попросту не захочет, чтобы приложение узнала его местонахождение?

navigator.geolocation.getCurrentPosition (show_map, handle_error)

Второй аргумент функции getCurrentPosition() и есть функция обработки ошибок, на случай если что то пойдёт не так.

function handle_error(err) {

if (err.code == 1) {}}

Свойство code принимает значения:

PERMISSION_DENIED (1) пользователь нажал на кнопку «Не сообщать» или запретил доступ к своему местоположению;

POSITION_UNAVAILABLE (2) если сеть не работает или нет связи со спутниками;

TIMEOUT (3) если сеть работает, но вычисление положения занимает слишком много времени.

UNKNOWN_ERROR (0) если что-нибудь еще пойдет не так.

Поддержка геолокации.

Во многих популярных телефонах существует два метода определения местонахождения. Первый метод не точный, но быстрый. Он вычисляет положение на основе различных операторных вышек по близости. Метод не требует GPS оборудования.

Второй же способ определяет ваше местоположение с точностью до нескольких метров, используя GPS-оборудование. Огромным недостатком является изрядное потребление электроэнергии, поэтому устройства чаще всего отключают этот чип, пока он не требуется.

На примере можно рассмотреть поиск местоположения на Google Maps на iPhone и других поддерживаемых устройствах. Сначала мы видим большой круг, который уточняет местоположение путём ближайших операторных вышек, после уточнения идёт получение точных координат через спутники GPS.

У функции getCurrentPosition() есть необязательный третий аргумент, объект PositionOptions. Его свойства могут быть не заданы или заданы как все, так и по одному.

Свойства:

 EnableHighAccuracy - если true, то устройство пользователя поддерживает функцию и соглашается указать своё местонахождение, а дальше устройство пытается обеспечить высокую точность. False обеспечивает нахождение не точной позиции.

 Timeout - высчитывает время в миллисекундах, в течение которого приложение будет ожидать для получения данных. Таймер не начинает отсчёт, пока сам пользователь не даст разрешение об определении его местонахождения. Он следит за сетью, а не за пользователем.

MaximumAge - позволяет устройству отправлять данные о местонахождении незамедлительно из закэшированной раннее позиции.

Если требуется постоянный поиск геолокации, то используют функцию watchPosition(), которая имеет ту же структуру, что и getCurrentPosition(). Она имеет две функции, для успеха и ошибок. Так же может включать в себя и необязательный объект PositionOptions, имеющий те же свойства, описанные раннее. Разница лишь в том, что функция будет вызываться каждый раз при смене положения пользователя и нет необходимости постоянного опроса позиции, устройство само определит оптимальный интервал опроса и вызовет функцию при изменении местоположения.

Сама функция watchPosition() возвратит число, которое следует где-то хранить. Что бы остановить слежение за пользователем, то вызывается метод clearWatch() и передаётся ему это число.

2.5 HTML5 видео

При запуске видео в браузере, браузер воспроизводит его через сторонние плагины, такие как всем известный Flash, RealPlayer или QuickTime. Плагины были отлично интегрированы с браузером, и некоторые даже не догадываются о этом, пока не пытаются посмотреть видео на платформе, которая не имела поддержки плагина.

Как бы мы поступили, если бы не знали о существовании HTML5.

Существовало несколько способов добавить видео на веб-страницу:

Использовался элемент <object>, который представлял из себя универсальный контейнер для внешних объектов. Недостатками это метода была малая степень интерактивности и взаимодействия с другими элементами этой веб-страницы.

Второй подход напрямую связан с использованием подключаемого дополнительного модуля браузера, такого как Flash или Silverlight. Хотя и подобные технологии позволяли создавать или использовать уже готовый видеоплеер, видеофайлы нуждались в кодировке, а html-код становился громоздким.

Стив Джобс в апреле 2010 года отдал своё предпочтение HTML5, упомянув, что Flash «уже не нужен», что несомненно повлияло на решения веб-разработчиков. Перспективы HTML5 в видео и создания веб-сайтов выглядят довольно позитивно.

Отличия HTML5 от Flash.

Первое, на что стоит обратить внимание, это применимость в мобильной среде и наличие семантической среде. На сегодняшний момент распространенно использование мобильных устройств для выхода в интернет, покупки в интернет магазинах и развлечения что отлично подходит для открытой структуры HTML5. Flash готовиться занять своё почётное место в прошлом.

SEO оптимизация. Применение в мобильной среде является очевидным преимуществом, но не единственным над Flash. Структура сайта, созданного при помощи Flash для поисковиков представляет из себя «чёрный ящик» с непонятным содержимым, тогда как HTML5 позволяет заглянуть внутрь поисковым системам и тем самым индексировать страницу для лучших поисковых запросов.

Разметка.

HTML5 предлагает вам два способа подключения видео на веб-страницу и оба они связанны с элементом <video>, к тому же очень похоже на добавление картинки через тег <img scr="..">.

Пример: <video src="vi.webm"> </video>

И подобно изображению, вы всегда должны указать атрибуты width и height в теге <video>. Атрибуты могут не совпадать с высотой и шириной видео, которую вы указали в процессе кодирования. И в этом нет ничего страшного, браузер будет центрировать видео внутри прямоугольника, заданного тегом <video>, пропорции видео не будут затронуты.

Пример: <video src="vi.webm" height="240" width="320"> </video>

По умолчанию для элемента <video> не добавляются элементы управления. Можно создать собственные элементы с использованием CSS, HTML и JavaScript. Для этого существуют такие методы как pause (), play () и свойства currentTime, muted и volume. Всё это пригодится для создания собственного интерфейса.

Но для того что бы браузер выводил встроенные элементы управления, необходимо в тег <video> включить атрибут controls.

Пример: <video src=" vi.webm" width="320" height="240" controls> </video>

Пример видео со встроенными элементами управления в браузере Google Chrome версии 39

И прежде чем двигаться дальше, рассмотрим два дополнительных атрибута, которые пригодятся при создании полноценного сайта с видео. Атрибут preload сообщает браузеру, что начать загрузку видео необходимо сразу же после загрузки страницы. В основном это используется для важной информации. Но что бы не тратить сетевой трафик впустую, можно установить preload как none.
Вот пример видео, которое начинает загрузку, но не воспроизводит, после загрузки станицы:

<video src="vi.webm" width="320" height="240" preload></video>

А вот пример видео, которое не загружается при загрузке страницы:

<video src="vi.webm" width="320" height="240" preload="none"></video>

Атрибут autoplay делает именно то, как и звучит. Загрузка видео начинается при загрузке страницы и воспроизводит его при возможности. Рекламодатели от этого в восторге, в то время как другие это просто ненавидят.

Пример автоматического воспроизведения на сайте:

<video src="vi.webm" width="320" height="240" autoplay> </video>

Но что делать, если у вас не один, а целых три видеофайла с разными форматами: OGV, MP4 и WebM? HTML5 может сделать ссылки на все три файла с помощью такого элемента как <source>. Один элемент <video> может содержать несколько и более тегов <source>. Браузер проходится по списку источников по порядку и выберет то, что он может воспроизвести.

И для того, чтобы не тратить сетевой трафик впустую, пока браузер пытается воспроизвести каждое видео, следует сообщить браузеру информацию о каждом видео. Это делается внутри тега <source> с помощью атрибута type. Посмотрим на примере, как это выглядит.

<video width="320" height="240" controls>
<source src="vi.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="vi.mp4" type=''video/mp4; codecs="avc1.42E01E, mp4a.40.2">
<source src="vi.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

Разберём подробнее. Элемент <video> определяет не ссылку на видеофайл, а высоту и ширину видео. Внутри элемента <video> есть три элемента <source>, каждый из которых ссылается на отдельный видеофайл с атрибутом src. Атрибут type даёт информацию о видеоформате.

Тип атрибута состоит из трёх частей: формат самого файла, видеокодек и аудиокодек. Для видеофайла .ogv форматом контейнера будет ogg, в примере он выглядит следующим образом «video/ogg» и является MIME-тип для видеофайлов ogg. Видеокодек Theora и аудиокодек Vorbis. Само значение должно быть заключено в кавычки, для этого необходимо использовать различные виды кавычек, чтобы окружить значение целиком.

Пример: type='video/ogg; codecs="theora, vorbis"'

Достоинством всех сложностей будет то, что браузер проверит атрибут type в первую очередь, а дальше определит, сможет ли он воспроизвести видеофайл. Если браузер решит, что не сможет его воспроизвести, то не будет, даже частично, скачивать его. Несомненно получится сэкономить на пропускной способности.

MIME-тип. Вы сколько угодно можете быть разочарованы неправильно настроенным веб-сервером, на котором у вас располагается сайт с видео, которое никак не хочет запускаться, но на локальном компьютере идёт без претензий. Скорее всего это ошибка в MIME-типах.

Всё рассказанное выше является лишь частью того, как правильно залить видео на сайт. Нужно убедиться, что ваш веб-сервер включает в HTTP-заголовок Content-Type соответствующий ему MIME-тип.

Если вы используете веб-сервер Apache или его производные, то сможете пользоваться директивой AddType в httpd.conf или файле .htaccess.В случае использования другого веб-сервера, необходимо обратиться к его документации о том, как установить HTTP-заголовок Content-Type для определённых типов файлов.

Пример:

«AddType video/mp4 .mp4

AddType video/ogg .ogv

AddType video/webm .webm».

Все три строки предназначены для видео в соответствующих контейнерах. Следует установить это один раз и забыть. В случае если эти директивы не указаны, видео может не проигрываться, даже если включены MIME-типы в атрибуте type вашего HTML кода.

2.6 Сравнение браузеров

Сравнение и анализ популярных браузеров Chrome 39, Opera 24, Firefox 32 по мнению сайта www.html5test.com

	Chrome 39	Opera 24	Firefox 32
Элементы Интерактивные элементы	Частичная	Частичная
Типы полей input type=date input type=time keygen
Поля Проверка полей CSS селекторы			Частичная
Микроданные
Вход Доступ к веб-камере Контроль геймпада Указатель события
Видео Видеоэлемент DRM поддержка Поддержка субтитров Поддержка изображений Поддержка MPEG-4 Поддержка H.264 Поддержка Ogg Theora Поддержка WebM с VP8 Поддержка WebM с VP9
Аудио Аудиоэлемент Web Audio API Распознавание речи Поддержка AAC Поддержка MP3 Ogg Vorbis поддержка Ogg Opus поддержка WebM с Vorbis поддержка WebM с Opus поддержка
2D графика Canvas
3D графика WebGL WebGL 2
Анимация window.requestAnimationFrame
Web Socket
HTML редактирование CSS селекторы API
Проверка орфографии
История и навигация
Web-приложения Кэш приложений
Хранение базы данных Web SQL Database

По итогам сравнения трёх браузеров, Chrome набрал наибольшее количество баллов в поддержке новых элементов HTML5.

Заключение

Подводя итоги можно с уверенностью сказать, что разработчики HTML5 заметно потрудились над тем, чтобы начинающим и уже опытным веб-разработчикам стало гораздо проще использовать язык в создании достаточно функциональных и красочных, привлекающих внимание, веб-сайтов. И несмотря на малозначительные недостатки в области хранения данных на локальных дисках язык достаточно лёгок в усвоении и чище по сравнению со своими предшественниками.

Пояснения:

Консорциум всемирной паутины (англ. World Wide Web Consortium, W3C) -- организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. Консорциум возглавляет сэр Тимоти Джон Бернерс-Ли, автор множества разработок в области информационных технологий.

WHATWG (англ. Web Hypertext Application Technology Working Group) -- это быстрорастущее сообщество людей, заинтересованных в развитии Интернета. Оно было основано в 2004 году производителями браузеров: Apple, Mozilla Foundation и Opera Software. Основным направлением сообщества является развитие HTML и API, необходимого для веб-приложений. Причина создания подобного сообщества заключается в отсутствии заинтересованности в HTML и явном пренебрежении к реальным потребностям пользователей со стороны W3C, которое уже довольно давно отказалось от HTML в пользу XML. На данный момент идёт разработка HTML5. В январе 2011 года WHATWG приняла решение отказаться от упоминания версии HTML5, заменив её простым названием HTML, по которому стандарт определяется по мере его развития.

Размещено на Allbest.ru