Файл: Языки гипертекстовой разметки (Практическое применение языка разметки гипертекста HTML).pdf

В отличие от предыдущих стандартов, предназначенных в основном для разработчиков кода, HTML5 строго и подробно описывает поведение браузеров. Он требует от браузеров обрабатывать не только грамотный код, но и по возможности корректировать ошибки, вплоть до употребления отсутствующих в стандарте элементов. Например, HTML 5 не позволяет авторам кода использовать элементы nobr или marquee, но описывает, как браузер должен поступать, если они все-таки встретятся в документе. Это соответствует очередному генеральному принципу HTML5 - максимальной совместимости с уже существующим наполнением сети. Миллионы действующих сайтов не должны пострадать от появления нового языка и поддерживающих его браузеров [23, 66].

Ещё одна особенность нового стандарта: он описывает документ HTML в терминах объектной модели (DOM). Перед тем, как отображать веб-страницу, браузер формирует древовидную структуру её элементов и других объектов. Предыдущие стандарты стыдливо замалчивали этот этап, а HTML5, наоборот, во многом опирается именно на такое представление документа. Это позволяет включить в спецификацию объекты, свойства и методы DOM, которые широко используются с незапамятных времён, однако никогда не были стандартизованы: window.open(), alert(), prompt(), document.links, document.images, innerHTML, contentEditable и так далее. Наконец, в HTML 5 официально включён элемент embed [17, 31].

Однако HTML5 впитал не всё, что поддерживается в браузерах. Некоторые элементы, наоборот, удалены из стандарта: acronym, applet, basefont, big, center, dir, font, isindex, s, strike, tt, u. Убраны фреймы (frame, frameset, noframes), хотя остался элемент iframe. Нет больше атрибутов, которыми почти никто не пользовался (accesskey, longdesc и др.) или которыми не имеет смысла пользоваться (align, border, valign, cellpadding, cellspacing и др.). Некоторые старые элементы переосмыслены: например, i и b теперь обозначают разные формы смыслового выделения, а не курсив и полужирный шрифт; hr отвечает за разрыв в структуре документа. Элемент menu обрел вторую молодость и позволяет создавать настоящие меню, а address ущемлён в правах и предназначен строго для контактной информации в узком контексте [23, 81].

Наконец, в HTML5 добавилось много нового. Для статей, блогов, до-кументации и подобных материалов будут полезны элементы article и section, а также новая система заголовков и рубрикации. «Шапка» и «подвал», панель навигации и боковая панель обозначаются элементами header, footer, nav и aside. Для мультимедийного содержания появились элементы audio и video. Они внедряют в страницу соответствующий ресурс и обеспечивают стандартные элементы управления - кнопки запуска, паузы и остановки, проматывание, регулятор громкости. Для тех браузеров, где эти элементы не поддерживаются, HTML5 позволяет дополнить их альтернативным содержанием - например, роликом Flash, с помощью которого сейчас внедряется большинство аудио- и видеозаписей. В продвинутых браузерах полноценно сработает элемент audio или video, а во всех остальных - альтернативный ролик, так что все пользователи останутся довольны [16, 81].

Здесь проявляется ещё один генеральный принцип - новые возможности HTML5 должны создавать как можно меньше проблем в тех браузерах, где они не поддерживаются. Почти все новшества языка устроены так, что для старых браузеров можно обеспечить их реализацию с помощью альтернативного содержания, CSS, JavaScript и других технологий. Отдельного упоминания заслуживает элемент canvas, который предоставляет область для рисования изображений «на лету» средствами JavaScript. Собственно, массовый интерес к HTML 5 начался после того, как Firefox и Opera решили поддерживать этот элемент.

Формы в HTML5 изменились до неузнаваемости. Примитивные процедуры заполнения и отправки формы, описанные в прежних версиях HTML, уже сейчас никого не устраивают, поэтому разработчики сайтов выдумывают собственные расширения интерфейса, средства проверки, самодельные элементы управления. В HTML5 эта самодеятельность урегулирована стандартными элементами, атрибутами и интерфейсами DOM. В дополнение к обычным текстовым полям, появились поля для ввода определённых данных. Например, input type=«number» - это поле для ввода числа, а input type=«range» - ползунок для регулирования громкости или чего-то похожего. Атрибуты min, max и step определяют диапазон и точность допустимых значений в поле. Элемент datalist обеспечивает поле со списком, а элемент output - область для вывода динамически генерируемых результатов. Атрибут required для элемента управления обозначает, что этот элемент обязателен для заполнения, так что без него форма не будет отправлена. Атрибут autofocus позволяет установить фокус ввода в данный элемент. Метод checkValidity() проверяет правильность заполнения полей. До сих пор эти возможности имитировались на сайтах с помощью кустарных сценариев JavaScript [25, 71].

В стандарте предлагается элемент datagrid для организации динамических структур данных, элемент command для вызова пользовательских команд, элемент progress - индикатор хода выполнения операции, а также средства DOM для редактирования содержания прямо на веб-странице, перетаскивания, выделения, работы с буфером обмена и многого другого. Это отвечает общей тенденции развития Всемирной Паутины: если раньше сайты были чем-то вроде публикаций, то теперь они превратились в полноценные приложения, требующие функционального и удобного пользовательского интерфейса. Соответственно, новый HTML также должен стать не столько языком публикаций, сколько языком описания приложений [22, 89].

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

1) Повышенная безопасность. В настоящее время, используемый множеством WEB -сайтами тег iframe содержит в себе явную угрозу безопасности для пользовательской системы. Дело в том, что функцией этого тега является отображение контента с другого сайта, например в плане рекламы или сведений о состоянии каких-либо данных. Но если сайт, передающий такую информацию подвергнется взлому, появляется большая вероятность того, что злоумышленники через него направят вредоносный код на сайт-приемник, который и подвергнет его пользователей опасности заражения вирусом. В HTML5, чтобы избежать подобной ситуации для тегов iframe была спроектирована технология Sandbox. Благодаря ей, все скрипты, запускающиеся через iframe будут работать в специально ограниченной виртуальной среде, которая не выпустит результаты их работы за пределы браузера, а значит и не сможет поразить пользовательскую операционную систему. Даже если предположить, что запуск вируса посредством этого тега все же произойдет, какие-либо серьезные последствия он понести уже не сможет [25, 77].

2) Ввод данных. В HTML5 становится проще и безопаснее. Правильность введения данных контролируется в режиме реального времени непосредственно во время ввода. В HTML4.0 проверка ошибок и сообщение о них происходит уже после отправки документа, что может создавать проблемы пользователям.

3) Поддержка полноценной графики. До недавнего времени бесспор-ным лидером анимированной графики для браузеров была технология Flash. С появлением в новом HTML5 стандарте такого инструмента как canvas позиции Flash-графики будут, вероятно, сильно потеснены.

Суть такого мощного нововведения как canvas состоит в том, что для браузеров на экране выделяется специальное пространство, положение которого на веб-странице определяется разработчиком сайта. В этой области с помощью целого набора специальных графических HTML5 команд можно составлять графические изображения, в том числе и анимированные, практически любой сложности. Более того, для 3-D графики разрабатывается специальный набор команд аналогичных всемирно известному стандарту трехмерной графики OpenGL. Теперь браузер будет способен воспроизводить не только красивые двухмерные интерактивные приложения, но и полноценные трехмерные игры [24, 102].

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

4) Видео и аудио. Для того чтобы воспроизвести видео или аудио поток в браузере пользователю приходиться прибегать к помощи все той же Flash технологии, требуемые в HTML4.0.

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

HTML5 призван, наконец, избавить браузеры от этих дополнительных программ и дать им возможность полноценного воспроизведения аудио и видео контента своими силами. Для этого в HTML5 коде предусмотрены специальные теги, такие как <video> и <audio>. Впрочем, у этого нововведения имеются и свои недостатки, например отсутствие единого стандарта для видеокодеков, что не способствует пока широкому распространению этой удобной для пользователя и веб-разработчиков технологии [24, 81].

5) Многократное увеличение скорости работы. Сложно представить современные Web-сайты без большого числа интерактивных форм, видео и аудио вставок, анимированных графических элементов и разного рода оживляющих Web-сайты программ-скриптов. Конечно, мощности современных вычислительных машин вполне хватает, чтобы обрабатывать такое огромное количество элементов Web -страницы, но Интернет технологии не стоят на месте, и чем больше будет развиваться визуализация, интерактивность и качество медиа-информации, тем выше будут требования к «железу» пользователя.

Конечно же, проектировщики HTML5 не могли обойти эту проблему стороной. Новый стандарт обеспечивает поддержку многопоточности, которую именовали как Web Works. Таким образом, современные многоядерные системы получают возможность параллельно выполнять обработку скриптов и тем самым увеличить скорость работы сайта на несколько порядков в зависимости от его конструкции и сложности [25, 62].

6) Технология Web Storage. Пользователи комфортно работают с теми сайтами, которые способны сохранять изменения в настройках, например для внешнего вида рабочего пространства. Для того, чтобы сохранить какую-либо информацию о действиях пользователя сайт обычно пользуется технологией cookies, которая позволяет сохранять на компьютере посетителя текстовый файл со своими данными.

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

7) Структурные возможности HTML5. Делают структуру Web-документа более простой, а код чище. Новые семантические элементы header, nav, section, article, aside и footer могут использоваться вместо контейнеров div, применяющихся сейчас в HTML4.0. новые элементы позволяют более конкретно описывать заголовок, нижний колонтитул, колонки текста и другие. Эти нововведения могут использоваться для автоматической генерации оглавления и организации более эффективной и простой навигации по Web –странице [25, 75].

Вывод по второй главе: объединив на одной Web-страницы возможности HTML и HTML5, можно создать интерактивный сайт, на котором можно выполнять любые действия пользователя.

Глава 3. Практическое применение языка разметки гипертекста HTML

В качестве примера мною был создан обучающий сайт, который представляет собой широкую иерархию с элементами нелинейной структуры. Первый уровень иерархии составляют основные рубрики «Главная», «Описание программ», «Практические упражнения», «Видео-уроки», «Контакты». Данные наименования рублик выбраны в силу обучающей специализации сайта, на данном сайте будут размещены различные статьи и практические упражнения по работе в программах обработки компьютерной графики. Сам сайт будет называться «Обработка компьютерной графики».

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

- растровый графический редактор AdobePhotoshop;

- векторный графический редактор Inkscape;

- программа для 3D моделирования Autodesk 3ds Max.

Эти программы выбраны мною в силу того, что сайт будет ориентирован на тех, кто учится быть графическим дизайнером или любым другим, чья работа будет связана с компьютерной графикой. Соответственно с этим название моего обучающего сайта будет «Обработка компьютерной графики».

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

Notepad++ - это бесплатный текстовый редактор, предназначенный для работы с текстом и редактирования исходного кода компьютерной программы, сайта, веб-странички, компонентов системы и много другого [25, 54].

Созданные в редакторе Notepad++ Web-страницы сохранялись в формате .html и помещались в папку сайта «Обработка компьютерной графики». А пример исходного кода Web-страниц написанный в окне Notepad++ можно посмотреть в приложении 1.

В каждой Web-странице создавались перекрёстные ссылки, благодаря, которым много созданных Web-страниц были объединены в один сайт. Применение возможностей языка HTML5 особенно заметно в оформлении дизайна сайта. Сайт имеет горизонтальное меню, наводя курсор на пункты меню можно заметить плавное изменение цвета надписей. При переходе на страницы сайта каждый раз изменяется цвет оформления сайта. Обучающий сайт «Обработка компьютерной графики» имеет пять Web-страниц и каждая из этих Web-страниц имеет своё цветовое оформление.