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

Pedagogy

УДК 378

РС! 10.21661/Г-118243 М.А. Одинокая

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

Аннотация

В статье анализируются вопросы, связанные с технологиями использования интерактивных веб-документов, таких как canvas, CSS, SVG, WebGL, WebSocket. Рассмотрены их возможности и области применения для создания различных видов интерактивных веб-документов.

I Ключевые слова: web-приложение, веб-документ, разработка, HTML5, svg, canvas, CSS, WebGL, интерактивность, графика.

M.A. Odinokaya

About the effective usage of modern technologies of the creation of interactive web-documents

Abstract

The article focuses on the issues on usage of such interactive web-documents as canvas, CSS, SVG, WebGL, WebSocket. Special attention is given to the possibility and area of application to create different kinds of interactive web-documents.

I Keywords: web-application, web-document, development, HTML5, svg, canvas, CSS, WebGL, interactivity, graphics.

В современном мире всё большее значение приобретают электронные издания, пришедшие на замену бумажным. Среди факторов, обуславливающих возрастающий спрос на информацию в электронном виде можно отметить широкий охват аудитории, отсутствие ограничений на объем, простоту поиска, наглядность и интерактивность, возможность взаимодействия с пользователем [1]. Интерактивность при работе с электронными документами позволяет как знакомиться с информацией, так и активно работать с ней. Особенно актуальны среди интерактивных средств способы визуального представления информации, такие как видео, анимация, 3D-графика и др. Веб-документы, созданные с помощью новых стандартов, таких как НТМЬ5, позволяют реализовать все вышеперечисленные требования к интерактивности и наглядности представления информации.

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

Тег video позволяет вставлять видеофрагменты в WEB-страницы, управлять воспроизведением, пришел на замену старых видеоплееров, реализованных с помощью технологии Adobe Flash. Некоторые браузеры не

Interactive science | 13 • 2017

55

Педагогика

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

CSS (Cascading Style Sheets), а именно третья версия данного инструмента, позволяет, кроме непосредственного управления стилями и блоками WEB-документа, также и создание анимации средствами браузера. С появлением CSS3 разработчики стали предпочитать этот инструмент canvas и svg для рисования иллюстраций [6]. Поддержка анимирования элементов с помощью браузера значительно ускоряет прорисовку и делает ее более плавной, чем реализация ее более старыми методами (например, с помощью jQuery). CSS анимацию целесообразно использовать для реализации популярной техники так называемого parallax scrolling [7], когда при прокручивании документа фон и содержимое перемещаются с разной скоростью, создавая эффект трехмерного пространства в WEB-приложении.

мерные объекты практически неограниченной сложности [3] с поддержкой аппаратного ускорения. Инструменты для разработки игр Unity и Unreal Engine 4 поддерживают сборку проектов для WEB-платформы, таким образом, данная платформа практически готова для создания полноценных 3D игр.

WebSocket - протокол передачи данных предназначен для решения любых задач и снятия ограничения обмена данными между браузером и сервером, а также создания игр.WebSocket - протокол передачи данных позволяет пересылать любые данные, на любой домен, безопасно и без лишнего сетевого трафика. Данный протокол поверх http сессии пришел на замену AJAX [8]. В отличие от последнего позволяет снизить нагрузку на сервер, не посылая запросы о получении данных тогда, когда этих данных еще нет, в отличие от AJAX, который требует нового запроса для каждого получения информации, что нередко приводит к созданию нового соединения.

Приведенные в данной статье инструменты способствуют созданию красивых, удобных и насыщенных возможностями WEB-приложений, упрощают разработку более простыми методами. Приход в мир WEB-тех-нологий HTML5 привел к почти полному отказу от старых инструментов, таких как Adobe Flash, Java Applet и Microsoft Silverlight [2], которые имели проблемы с безопасностью, совместимостью с различными платформами и не были свободными. В настоящее время интерактивные WEB-страницы, созданные с использованием современных методов, могут работать на любых домашних, мобильных и стандартных платформах, таких как Smart TV, iPhone, Android, Windows Phone, Windows, Linux и MacOS, в любых доступных для них браузерах, разрешив проблемы с совместимостью.

Литература

1. Абрамян Г.В. Нормативно-правовая, инновационноисследовательская и ресурсно-технологическая модели совместной деятельности вуза с учреждениями региона в информационной среде / Г.В. Абрамян // Информатика: проблемы, методология, технологии: Материалы XVI Международной научно-методической конференции / Под редакцией А.А. Крыловецкого. - 2016. - С. 20-25.

2. Будущее за HTML иои прощай Flesh! [Электронный ресурс]. - Режим доступа: https://www.searchengines.ru/ buduschee za h.html (дата обращения: 11.01.2017).

3. Введение в WebGL c помощью Three.js [Электронный ресурс]. - Режим доступа: http://davidscottlyons.com/ threejs/presentations/fron (дата обращения: 11.01.2017).

4. Графика в HTML5 [Электронный ресурс]. - Режим доступа: https://www.w3.org/standards/webdesign/graphics (дата обращения: 11.01.2017).

5. Дэйли Д. Разработка веб-приложений с помощью SVG [Текст] / Д. Дэйли, Д. Фрост. - Нью-Йорк: Майкрософт, 2012. - 294 с.

6. Фрайн Б. HTML5 и CSS3 Разработка сайтов для любых браузеров и устройств [Текст] / Б. Фрайн. - СПб.: Питер, 2014. - 304 с.

7. How to Parallax Scrolling [Электронный ресурс]. - Режим доступа: http://www.w3schools.com/howto/howto_ css_parallax.asp (дата обращения: 10.01.2017).

8. WebSocket - полноценный асинхронный веб [Электронный ресурс]. - Режим доступа: https://habrahabr.ru/ post/79038/ (дата обращения: 11.01.2017).

56 Интерактивная наука | 13 • 2017