CC BY
71
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-приложений требует усилий множества разработчиков узкой специализации. Несмотря на узкопрофильность, каждый из них должен
глубоко понимать тенденции современных технологий с целью их наиболее эффективного использования при создании интерактивных WEB-приложений. Среди средств, помогающих в разработке интерактивных WEB-приложений, можно отметить: Тег canvas (в переводе с англ. означает холст), введенный в HTML5, позволяющий быстро и эффективно работать с растровой и векторной графикой [4]. Данный элемент применяется для создания разнообразных приложений, включая элементы навигации, графические инструменты, полноценные приложения, аркадные и онлайн игры и симуляторы. Тег canvas создает область на веб-станице, которая может быть использована для отрисовки графики в режиме реального времени с помощью сценариев (например, с помощью языка JavaScript), а также может быть использован для создания часов, анимации и т. д.
Тег video позволяет вставлять видеофрагменты в WEB-страницы, управлять воспроизведением, пришел на замену старых видеоплееров, реализованных с помощью технологии Adobe Flash. Некоторые браузеры не
Interactive science | 13 • 2017
55
Педагогика
поддерживают видеофайлы некоторых форматов, поэтому необходимо предоставить видеофайл в нескольких форматах одновременно, для этого используются теги source, располагающиеся внутри элемента video. Любой текст внутри элемента video будет отображен браузером в том случае, когда сам элемент или формат используемого видеофайла не поддерживается браузером.
Тег svg позволяет рисовать векторные изображения в формате svg (Scalable Vector Graphics) [5], основанном на формате описания данных xml. Такие изображения выгодно отличаются тем, что не меняют своего качества при масштабировании. Так как данный формат является стандартным, возможно импортирование изображений из таких программных продуктов, как Inkscape и Adobe Illustrator. Также изображения доступны для изменения из javascript в виде dom (document object model).
CSS (Cascading Style Sheets), а именно третья версия данного инструмента, позволяет, кроме непосредственного управления стилями и блоками WEB-документа, также и создание анимации средствами браузера. С появлением CSS3 разработчики стали предпочитать этот инструмент canvas и svg для рисования иллюстраций [6]. Поддержка анимирования элементов с помощью браузера значительно ускоряет прорисовку и делает ее более плавной, чем реализация ее более старыми методами (например, с помощью jQuery). CSS анимацию целесообразно использовать для реализации популярной техники так называемого parallax scrolling [7], когда при прокручивании документа фон и содержимое перемещаются с разной скоростью, создавая эффект трехмерного пространства в WEB-приложении.
WebGL - реализация интерфейса доступа к видеокарте OpenGL, в частности, в версии OpenGL ES 2 для браузерного javascript позволяет отрисовывать трех-
мерные объекты практически неограниченной сложности [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
