Файл: История возникновения HTML 5 и Web-технологий.pdf

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

Данный язык программирования предоставляет обширные возможности по созданию игровых и веб-приложений, по работе с мультимедийным контентом, а также в сфере технологий веб-дизайна. Спецификой HTML5 является простая структура и чистота кода. Разметка страниц предыдущих версий HTML осуществлялась в основном при помощи элементов, которым присваивали классы class или идентификаторы id для наглядности разметки (например, <div id="header"). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.

Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div id="header", стало <header>). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению.

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

HTML5 дает возможность размещать медиа-элементы на веб-страницах без каких-либо сторонних программ и, таким образом, существенно облегчает работу с файлами мультимедиа. Изменения также затронули процесс ввода данных, который в пятом поколении языка программирования стал намного проще и удобнее. Что касается внешнего вида, то новый язык программирования существенно расширяет возможности оформления сайтов и приложений, за счѐт чего HTML5 игры и сайты станут ещѐ более оригинальными и интересными. Функции Canvas, добавленные в пятой версии HTML, позволяют размещать на сайтах небольшие HTML5 игры, анимацию и динамическую графику без использования дополнительных программ. К тому же данная функция позволяет создавать качественно новые HTML5игры и пользовательские интерфейсы. Несмотря на длительный срок существования и появление все новых технологий в веб-дизайне, HTML до сих пор остается одним из самых популярных инструментов разметки. Это обусловлено многочисленными достоинствами этого языка, которых со временем становится только больше.

---

Перечислим основные достоинства HTML5:

1. Возможность применения более простого кода по сравнению с предыдущими версиями, где div заменены усовершенствованными элементами nav, article, header, footer, aside и section.

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

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

4. Аrticle применяется для группировки записей, к которым относятся статьи, разного рода публикации, комментарии, записи блога. Представляет собой обособленный независимый блок, начинающийся, как правило, с заголовка и предназначенным для многократного применения. В article оборачивается семантически не зависимый элемент, который является самостоятельным и может быть показан на любой другой странице сайта не зависимо от контекста. Так же элемент может быть вынесен на другой сайт. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обѐртке элементом. Элемент целесообразно использовать только в том случае, когда его содержимое непосредственно указано в схеме документа. Типичный пример использования такого подхода, это новостные сайты. На сайте источника размещен блок article с описанием статьи, датой публикации, заголовком, автором и др. На сайте агрегаторе новостей работает бот собирающий такие статьи на разных ресурсах и размещает их на свое сайте со ссылкой на первоисточник.

5. Элемент section представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент div. В качестве содержимого может выступать абсолютно любой контент, который по смыслу может быть определен в один блок. Домашняя страница сайта также может быть поделена на секции – блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если его содержимое будет явно указано в схеме документа.

6. Элемент <aside> группирует содержимое, связанное с окружающим его контентом напрямую, но в то же время является независимым (т.е. удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: цифровые данные, цитаты, рекламные блоки, архивные записи.

---

7. Утонченные дизайнерские формы, позволяющие создавать эксклюзивный облик веб-сайта. В HTML5 удалось существенно улучшить пользовательский интерфейс, сделать его более функциональным, простым и интуитивно понятным. Валидация форм теперь доступна встроенными в HTML 5 средствами.

8. Возможность использования новых полей ввода для различных целей, включая поиск.

9. Усовершенствованная семантика HTML5 позволяет быстрее и проще различать футер, заголовки, панель навигации.

10. Использование элементов HTML5 позволяет сделать более удобным для восприятия семантическое ядро каждой страницы. Для реализации такой задумки теперь используются только стандартные коды.

11. Усовершенствованное юзабилити. Теперь возможно создание сайтов с HTML5, используя новые элементы, включая <canvas>, <audio>, <video>. Усовершенствованы возможности интеграции с содержимым SVG. Таким образом, при использовании новых элементов отпала необходимость в установке таких плагинов, как Flash. Музыку, чарты, видео и рисунки можно встраивать без привлечения сторонних программ, поскольку такая функция имеется в самом браузере. При желании можно использовать старую систему интеграции аудио- и видеофайлов.

12. Оптимизация структурирования документов. Для этого используются новые теги, например, <header>, <section> и <article>.

13. Улучшенное восприятие разметки страницы: теперь исходный код интуитивно понятен пользователю.

14. При помощи HTML5 удалось значительно улучшить клиентскую часть приложений. Для этого разработаны доски общений, вики и drag-n-drop.

15. Благодаря уменьшению размера куки разработчики смогли существенно увеличить скорость отклика страницы. В HTML5 этого удалось добиться за счет использования хранилищ данных localStorage и sessionStorage, которые стали качественной частичной заменой куки.

16. Geolocation API для определения местоположения, полученная информация может использоваться в веб-приложениях. HTML5 считается одним из самых лучших современных инструментов разметки, теперь только этот язык позволяет комфортно и быстро создавать веб-порталы.

С каждым днем все больше браузеров поддерживают основные функции HTML5. Основными нововведениями HTML5 являются:

• Figure – рисунок.

• Header – заголовок страницы.

• Section – крупный блок страницы.

• Footer – «Подвал» страницы.

• meta charset = «UTF-8» – обновление кодировки страницы.

• Nav – навигация по интернет-сайту.

• Aside – дополнительный контент в виде боковой колонки.

• Article – статья, часть основного контента.

---

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

Тег video позволит вставить в выбранное место страницы видеофайл. При помощи тега canvas появилась возможность размещения на страничках динамических изображений и карт. Для введения метрических данных используется тег meter, а для выделения даты и времени теперь применяется time. Подробная информация об объекте обозначается тегом details, процесс выполнения в динамике обозначен тегом progress.

Разрабатывая сайты с использованием HTML5, можно ощутить преимущества использования таких тегов, как menu, который служит для системы меню, и datagrid, который представляет собой таблицу, построенную через динамический источник данных. Тег command позволяет определить действие, которое осуществляется при активации объекта. Кроме того, в новую версию HTML добавлены формы полей, включая email, datetime, url, time, number, datetime-local и множество других. Разумеется, введение новых тегов во все браузеры, как и освоение новых данных специалистами, потребует определенного времени. Однако уже совсем скоро использование новых тегов HTML5 станет де-факто стандартом на рынке веб-разработки.

Помимо неоспоримых достоинств HTML5 следует сказать несколько слов и об имеющихся недостатках этого языка. К их числу можно отнести, прежде всего, недостаточную защиту данных. При использовании HTML5 на винчестере пользователя долгое время хранится большой объѐм данных, что позволяет злоумышленникам осуществлять несанкционированный доступ к ресурсам компьютера с целью сбора конфиденциальной информации. В отношении мультимедийного контента также имеются некоторые недостатки. С одной стороны, поддержка видео HTML5 позволяет воспроизводить мультимедийный контент на компьютерах и устройствах, которые не поддерживают Flash Player. Вместе с тем, в полной мере HTML5 всем этим потребностям пока не отвечает. Например, в HTML5 пока нет полноэкранного режима. Кроме того, имеются недостатки в использовании HTML5 для создания игр. Наконец, новый стандарт поддерживается пока не всеми браузерами.

Вместе с тем, недостатки новой версии языка программирования не снижают его востребованности даже среди таких гигантов, как YouTube, Google, Apple, Facebook и др., которые активно занимаются его популяризацией.

---

Выводы: в данной главе рассмотрены и систематизированы основные отличия HTML5 от предыдущих версий. HTML5 рассмотрен как эффективное средство для создания web-приложений.

4. Анализ проблемы обеспечения кроссбраузерности в HTML5 и пути ее решения

Сегодня существует большое количество веб-браузеров, которые отличаются как визуально, так и функционально. Для разработчика сайта функциональность браузера и его поддержка кроссбраузерности стоит на первом месте при создании сайта. Больше всего возникает проблем с использованием транформации, анимации, реагирования на клики мышкой или любой другой клавишей, которые прописаны с помощью html и css. Во избежание проблем с такими эффектами программисты от них или отказываются, или прописывают для каждого браузера соответствующую функцию. Так для прописи трансформации (transform) добавляют префикс -o- (Opera), -moz- (Mozilla FireFox), -ms- (Internet Explorer), -webkit- (Chrome) и т.д.

С появлением HTML5 проблема отображения сайтов временно обострилась. На конец 2018 года стандарт HTML 5 поддерживают практически все браузеры.

Другим фактором, который влияет на функцию кроссбраузерности, является применение различных CMS, фреймворков, которые без соблюдения соответствующих правил не смогут сохранять возможность сайта адаптироваться под различные расширения мониторов компьютеров или других устройств. Хорошим примером является разработка CSS-фреймворка Twitter Bootstrap с помощью HTML5, CSS, LESS и JavaScript, в котором предусмотрена адаптивная верстка и есть возможность сразу прописывать ссылки на фиксированные элементы Bootstrap с соответствующими свойствами. Совершенно противоположная ситуация с CMS: для обеспечения кроссбраузерности есть два варианта разработки сайта:

1) верстка под различные расширения при помощи медиа-запросов;

2) основываясь на расстояниях в %, а размеры элементов задавая через em: position: relative; left: 10%.

В ходе исследования проблемы нарушения кроссбраузерности HTML5 было установлено, что в определенной степени по вертикали можно избежать этой проблемы, применяя якоря и свойство overflow-y: hidden, что позволит разбить страницу на несколько страниц, по горизонтали - полностью отказавшись от прописывания пикселей и сцентрировав элементы в блоках вместе с самими блоками с помощью margin: 0 auto. Но сначала, перед разработкой сайта, необходимо определиться, из скольких блоков будет состоять сайт. Очень важно разбить правильно блоки. Чем больше блоков, тем больше вероятность, что они будут размещаться правильно, не нарушая заданных расстояний. Также было обнаружено, что элементы значительно проще размещать в блоках, собственноручно созданными с помощью php или javascript. Блокам можно задать padding, и тогда элементы не будут выходить за рамки блока.

---