Оглавление
ВВЕДЕНИЕ
ГЛАВА 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 без пробела.стремиться сделать интернет сайты более семантически правильными, более интерактивными, более динамическими и быстрыми, стереть привычные рамки между предыдущими версиями 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.
.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» в переводе «Холст». В данном языке он предназначен для создания растрового изображения при помощи JavaScript. Используется для создания простеньких векторных изображений, непосредственно прописываемых в самом HTML, было это до недавнего времени, на сегодняшний момент можно использовать полноценные 3D сцены у себя на сайте, с обновлёнными браузерами Google, Firefox и другими. Blend4Web если вкратце, то это открытая платформа для создания трёхмерных веб-приложений, открытый релиз которой прошёл в марте 2014 года. И в качестве основного инструмента в ней используется Blender -популярный пакет 3D моделирования с открытым исходным кодом.
Для того, чтобы не было задержек в браузере используется поддержка многопоточности.
Полностью меняется и способ хранения информации по новой технологии Web Storage на клиентской стороне храниться до 10 Мбайт данных. В Cookies информация хранится в специальной базе данных, что позволяет хранить не только частичную информацию о сайтах, но и специальные веб-приложений, способствующих работать без подключения к интернету.
В новом теге IFrame по сравнению со старым Frame используется фильтр Sandbox, который ограничивает действие скриптов с внешних веб-сайтов, что обеспечивает наибольшую безопасность от вирусов.
В HTML5 элемент <video> предназначен для вставки видео на вашу страничку без использования сторонних плагинов, наподобие Apple QuickTime, Adobe Flash. Тег так настроен, что вам остаётся выбрать лишь видео файл, который будет размещён на вашем сайте, поддерживающий HTML5, и браузеры сами выберут тот формат, с которым они работают.
Для браузеров, не поддерживающих HTML5 и полностью игнорируют этот тег, следует указать браузеру проигрывать видео файл через сторонний плагин, названный выше, это решение не использует JavaScript, тем самым работая во всех браузерах.
Локальное хранилище
Локальное хранилище, позволяющая сайтам сохранять информацию на локальном компьютере, и обращаться к нему в дальнейшем. Стоит учесть, что хранилище хоть и входит в спецификацию HTML5, но отделено от неё, разбитое на отдельные кусочки, для уменьшения его размера. О безопасности такого хранилища не стоит беспокоиться, изменить или просматривать ваши данные в хранилище могут лишь те, кто имеет непосредственный доступ к компьютеру либо сайты, которые могут прочитать или модифицировать собственные значения, к другим данным в хранилище у них нет прав.
Геолокация
Геолокация это способ узнать, где вы находитесь, конечно же по усмотрению можно делиться этой информацией со своими друзьями. В HTML5 геолокация была стандартизирована и отделена и всё же о ней стоит упомянуть, как о части развития веб-технологий.
В полях ввода произошли различные добавления новых полей, после тега <form>. Перечислим их:
<input type="search"> для поиска
<input type="number"> для ввода чисел
<input type="range"> ползунок
<input type="color"> для выбора цвета
<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 ОТ ПРЕДЫДУЩИХ ВЕРСИЙ.
СРАВНИТЕЛЬНЫЙ АНАЛИЗ ПЛЮСОВ И МИНУСОВ
.1 Преимущества 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"
"#"786733.files/image001.gif">
Так как она является безусловной, то нет способа её обойти. Блокируемой, и нет вероятности, что веб-сайт определит местонахождение, пока панель ждёт вашего ответа.
На данном этапе у нас есть результат, возвращаемой getCurrentPosition().Информация выглядит следующим образом:show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
}
Функция вызывается с единственным параметром, но с двумя свойствами объекта. Это timestamp и coords. Timestamp содержит дату и время, когда было вычислено место, а coords имеет свойства:, longitude - В градусах., accuracy, altitudeAccuracy - В метрах.- Градусы по часовой стрелке от севера.- В метрах в секунду.
Рекомендуется использовать latitude, longitude, accuracy в остальных случаях возможно возвращение null, в зависимости от используемого устройства.
Обработка ошибок.
Всегда может произойти непредвиденное, так как геолокация весьма сложна. Что если оборвётся связь или пользователь попросту не захочет, чтобы приложение узнала его местонахождение?.geolocation.getCurrentPosition (show_map, handle_error)
Второй аргумент функции getCurrentPosition() и есть функция обработки ошибок, на случай если что то пойдёт не так.handle_error(err) {(err.code == 1) {}}
Свойство code принимает значения:_DENIED (1) пользователь нажал на кнопку «Не сообщать» или запретил доступ к своему местоположению;_UNAVAILABLE (2) если сеть не работает или нет связи со спутниками;(3) если сеть работает, но вычисление положения занимает слишком много времени._ERROR (0) если что-нибудь еще пойдет не так.