CC BY
43
Технічні науки______________________________________________
7 switches and 8 host in the Python languages, all this devices controlled by Floodlight controller through add flow entry for switches to teach switches how reach for each other and D-ITG program for generate traffic between devices. We show the results in graphs.
References
1. Khatri, V. Khatri vikramajeet analysis of openflow protocol in local area Net - degree programme in information technology [Text] / V. Khatri. - Tampere University of technology, 2013. - 74 p.
2. Open networking Foundation Software-Defined Networking [Text] / The New Norm for Networks, 2012.
3. OpenFlow-enabled SDN and Network Functions Virtualization [Text] / Open networking Foundation, 2014.
4. Hegr, T. OpenFlow Deployment and Concept Analysis [Text] / T. Hegr, L. Bohac, V. Uhlir, P. Chlumsky // Advances in Electrical and Electronic Engineering. - 2013. -Vol. 11, Issue 5. - P. 327-335. doi: 10.15598/aeee.v11i5.884
5. Octopress, M. T.-P. A Quarterly Technical Publication for Internet and Intranet Professionals [Text] / M. T.-P. Octopress. - A Quarterly Technical Publication for Internet and Intranet Professionals, 2013
6. Open Networking Foundation [Text] / OpenFlow Switch Specification, 2013. - P. 1-205.
7. Mininet Team-Powered by Octopress [Electronic resource] / Mininet Overview, 2014. - Available at: http://mininet.org/overview/
8. Openflow [Text] / Explain all the requirements to run Mininet, 2011.
9. Azodolmolky, S. Software Defined Networking with OpenFlow [Text] / S. Azodolmolky. - Packt Publishing, 2013. - 153 p.
10. Open Networking Foundation [Text] / OpenFlow Switch Specification. - 2014. - Vol. 4. - P. 1-171.
11. Kontesidou, G. Openflow Virtual Networking : A Flow - Based Network Virtualization Architecture Openflow Virtual Networking : A Flow-Based [Text] / G. Kontesidou,
K. Zarifis. - Royal Institute of Technology, 2009.
12. Technical Solution Guide [Text] / HP OpenFlow Protocol Overview, 2013. - 18 p.
13. Opendaylight [Electronic resource] / Available at: http://www. projectfloodlight.org/floodlight/
Scientific Journal «ScienceRise» №5/2(4)2014
14. Avallone, S. D-ITG Distributed Internet Traffic Generator [Text] / S. Avallone, S. Guadagno, D. Emma. -University’s di Napoli Federico II COMICS Lab, Department di Informatics Sistemistica, 2004. - 4 p.
Refernces
1. Khatri, V. (2013). Khatri vikramajeet analysis of openflow protocol in local area Net - degree programme in information technology. Tampere University of technology, 74.
2. Open networking Foundation Software-Defined Networking (2012). The New Norm for Networks.
3. OpenFlow-enabled SDN and Network Functions Virtualization (2014). Open networking Foundation.
4. Hegr, T., Bohac, L., Uhlir, V., Chlumsky, P. (2013). OpenFlow Deployment and Concept Analysis. Advances in Electrical and Electronic Engineering, 11 (5), 327-335. doi: 10.15598/aeee.v11i5.884
5. Octopress, M. T.-P. (2013). A Quarterly Technical Publication for Internet and Intranet Professionals. A Quarterly Technical Publication for Internet and Intranet Professionals.
6. Open Networking Foundation (2013). OpenFlow Switch Specification, 1-205.
7. Mininet Team-Powered by Octopress (2014). Mininet Overview. Available at: http://mininet.org/overview/
8. Openflow (2011). Explain all the requirements to run Mininet.
9. Azodolmolky, S. (2013). Software Defined Networking with OpenFlow. Packt Publishing, 153.
10. Open Networking Foundation (2014). OpenFlow Switch Specification, 4, 1-171.
11. Kontesidou, G., Zarifis, K. (2009). Openflow Virtual Networking : A Flow- Based Network Virtualization Architecture Openflow Virtual Networking : A Flow-Based. Royal Institute of Technology.
12. Technical Solution Guide (2013). HP OpenFlow Protocol Overview, 18.
13. Opendaylight. Available at: http://www.
projectfloodlight.org/floodlight/
14. Avallone, S., Guadagno, S., Emma, D. (2004). D-ITG Distributed Internet Traffic Generator. University’s di Napoli Federico II COMICS Lab, Department di Informatics Sistemistica, 4.
Рекомендовано до публікації д-р техн. наук Тіхонов В. І.
Дата надходження рукопису 13.11.2014
Taher Abdullah, PhD, Telecommunication systems department, Odessa National Academy of Telecommunications named after O. S. Popov, st. Blacksmith, 1, Odesa, Ukraine, 65000 E-mail: abidalla 2004@yahoo.com
УДК 004.925
DOI: 10.15587/2313-8416.2014.
ОБ ЭФФЕКТИВНОМ ИСПОЛЬЗОВАНИИ СОВРЕМЕННЫХ ТЕХНОЛОГИЙ СОЗДАНИЯ ИНТЕРАКТИВНЫХ ВЕБ-ДОКУМЕНТОВ
© И. Н. Егорова, А. С. Трофименко
Статья посвящена исследованию наиболее востребованных современных технологий разработки вебдокументов, таких как: API Canvas, WebGL, SVG и CSS3. Рассмотрены достоинства и недостатки каждой из технологий в визуальном представлении информации: анимации, интерфейсах, 2D и 3D графике. Проведен анализ областей их применения, разработаны рекомендации по наиболее эффективному их использованию для разработки интерактивных WEB-документов
Ключевые слова: веб-документ, интернет, интерактивность, разработка, спецификация, HTML5, SVG, векторная графика, WebGL
73
Технічні науки
Scientific Journal «ScienceRise» №5/2(4)2014
This article is devoted to research of the most demanded modern technologies of web-documents development such as: API Canvas, WebGL, SVG, CSS3. There are considered an advantages and disadvantages of each technology in a visual representation of information: animation, interface, 2D and 3D graphics. The analysis for fields of its application is conducted, developed the recommendations for the its most effective use for interactive web-documents development are given
Keywords: web-document, internet, interactivity, development, specification, HTML5, SVG, vector graphics, WebGL
1. Введение
Электронные издания успешно конкурирует с бумажными, а по скорости представления информации значительно превосходят их. Среди основных достоинств электронных ресурсов следует отметить отсутствие ограничений по объему текста, наглядность, возможность масштабирования текста и графики, максимально широкий охват аудитории, а также предоставление доступа к ресурсам непосредственно с рабочего места пользователя.
Дополнительные возможности по работе с электронными изданиями предоставляют издания, содержащие интерактивные элементы. Такие издания позволяют пользователю не только ознакомиться с опубликованной информацией, но и активно работать с ней, получая в считанные секунды результат. Особую актуальность среди инструментальных средств реализации интерактивных элементов приобретают способы визуального представления информации, такие как видео, анимация, 3Drрафика и др.
2. Постановка проблемы
Разработка современных интерактивных WEB-приложений представляет собой достаточно трудоемкую задачу. В реализации проектов могут быть задействованы десятки специалистов различного профиля. И несмотря на узкую специализацию, требуется осведомлённость об актуальных тенденциях развития и глубокое понимание современных технологий с целью их наиболее эффективного использования при создании интерактивных WEB-приложений.
Динамичное развитие технологий создания WEB-приложений ставит перед разработчиками проблему правильного выбора технологии разработки различных типов электронных ресурсов.
Целью данной работы является исследование современных технологий создания интерактивных веб-документов, анализ областей их применения и разработка рекомендаций по наиболее эффективному их использованию.
3. Литературный обзор
Все большую популярность приобретает технология <canvas> - одна из самых объёмных частей спецификации HTML5. Canvas представляет интерфейс прикладного программирования для двумерного рисования: линии, заливки, формы, текст и т. п. Application Programming Interface (API) Canvas основан на маршрутах, то есть изображает графические примитивы на холсте, создавая маршрут, а затем прорисовывая или заполняя этот маршрут.
Помимо рисования линий и форм, разработчики могут копировать изображения - фотографии, видео и другие элементы холста из других источников, кадрировав его или применив другие корректировки. Захват изображения из элемента <video> предлагает такие возможности, как
динамическая вставка содержимого в видео и распознавание лиц [1].
Что касается векторной графики, существует отдельный стандарт для описания изображений -SVG, базирующийся на XML, имеющий свою DOM (document object model) для работы через javascript. В рамках HTML5 определен специальный тег <svg> в дополнение к вставке в виде изображений и объектов
[2]. Позволяя делать inline-вставку svg-контента непосредственно в тело документа, открывается возможность работать с ним в том же контексте javascript, что и с другими элементами документа. В отличие от растровой, векторная графика не теряет качество при масштабировании благодаря тому, что отрисовка контура происходит заново при любом изменении размера документа.
Дополнительные возможности визуализации появились у разработчиков с выходом третьей версии CSS3 (Cascading Style Sheets). Новая версия предоставляет возможность анимации, которая отличается большей «плавностью» от анимации, созданной средствами jQuery. Такой эффект достигается благодаря реализации свойства transition, устанавливающего переход между двумя состояниями элемента, transform, позволяющего масштабировать, вращать, сдвигать, наклонять и
комбинировать виды трансформаций, а также animation - свойства, объявляющего факт анимации и имеющего подправила @-webkit-keyframes, которые позволяют описать анимацию CSS свойств в виде перечня ключевых кадров [3]. Таким образом, с помощью специальных CSS-правил объявляется, что некоторое свойство будет анимировано, и браузер самостоятельно обрабатывает анимацию.
Разработка 3D-графики на настольных приложениях длительное время осуществлялась с помощью сторонних плагинов, требующих техническую поддержку со стороны разработчиков во время работы ресурса. Реализация 3D-графики браузерами стала возможной благодаря технологии WebGL. В отличие от используемой на протяжении многих лет технологии Adobe Flash, новая технология является открытой, свободной от коммерческих лицензий и неуязвимой в плане безопасности, чего не скажешь о плагине Flash Player [5]. Благодаря этой технологии 3D-графика работает в режиме реального времени непосредственно за счет возможностей браузеров, без подключения сторонних плагинов, при этом не
74
Технічні науки
Scientific Journal «ScienceRise» №5/2(4)2014
принося в ущерб производительность приложения [6].
4. Исследование современных WEB-технологий
С целью определения эффективных областей применения в работе проведено исследование наиболее востребованных современных WEB-технологий.
Так, API Canvas предоставляет широкий набор инструментов для создания полнофункциональных программ векторной графики. Данный элемент применяется для создания разнообразных приложений, включая интерактивные фоны веб-
сайтов, элементы навигации, графические инструменты, полноценные приложения, игры и симуляторы.
Элемент Canvas обладает широкими возможностями и обычно демонстрируется на примере сложных анимаций или игр, однако, он может эффективно использоваться и для более простых целей. Например, Canvas - отличный инструмент для визуализации данных в вебприложениях с возможностью динамической загрузки новых данных и показа дополнительной информации в соответствующих областях графика (рис. 1).
Рис. 1. Визуализации данных с помощью Canvas
Несмотря на все многообразие, элемент Canvas имеет ряд ограничений. Так, масштабирование невозможно без потери качества. Единственным выходом является обновление и полная перерисовка в нужном масштабе. В качестве следующего ограничения необходимо отметить затруднения в работе с визуальными стилями и отдельными элементами, поскольку результирующий растр не позволяет выделять отдельные фигуры или текст. Доступ предоставляется исключительно к отдельным пикселам. Ещё одним ограничением является отсутствие поддержки в версиях IE младше 9-ой. Поэтому выбор элемента Canvas следует осуществлять с учетом целевой аудитории.
Интерес представляет также технология SVG (scalable vector graphics), которая может быть использована для динамичной отрисовки графики. Основным преимуществом SVG для разработки вебресурсов является возможность доступа ко всем объектам изображения, которые в свою очередь делятся на три типа: фигуры, изображения и текст
[4]. Помимо этого, при использовании SVG сокращается количество обращений к серверу, соответственно увеличивается скорость загрузки сайта и уменьшается число HTTP-запросов. К числу преимуществ технологии SVG следует отнести возможность задания визуальных стилей с помощью атрибутов, автоматическую обработку событий от мыши через DOM, возможность анимации с
помощью javascript, а также возможность редактирования в текстовом или графическом редакторе (InkScape или Adobe Illustrator).
Основные отличия рассмотренных технологий состоят в способах масштабирования и представления графики, а также формате. Эти различия необходимо учитывать с целью эффективного их использования для визуализации данных. Например, отрисовку графика функции целесообразно реализовать с помощью Canvas, а вывод подсказок (с определением объекта под указателем мыши), рационально осуществить с помощью SVG.
Следующей технологией, представляющей интерес при создании интерактивных WEB-приложений, является CSS. Использование этой технологии вместо JavaScript даёт существенный прирост производительности клиентской части. Однако, следует определить области наиболее эффективного использования CSS. Так, широкие возможности CSS3 привели к тому, что разработчики начали использовать эту технологию даже для рисования иллюстраций вместо использования SVG или Сanvas. В этом случае используются свойства градиентов и теней, которые в свою очередь используют альфа-каналы прозрачности RGBa. Такой подход нерационален, поскольку является более трудоемким. Кроме того, при комбинировании различных свойств версии CSS3 (например, opacity с box-shadow) могут возникать трудности с
75
Технічні науки
Scientific Journal «ScienceRise» №5/2(4)2014
отображением рядом браузеров. Следует учитывать, что нововведенные модули CSS3 в W3C по-прежнему находятся в состоянии “working draft”. Несмотря на то, что в последних версиях браузеров Firefox, Opera и Internet Explorer удалены префиксы для ряда свойств, что свидетельствует об
уверенности их производителей в будущем данных модулей, не рекомендуется использовать их для реализации важных составляющих сайта.
CSS3 незаменим для улучшения взаимодействия пользователя с интерфейсом. Чем больше работа интерфейса приближена к реальности, тем понятней он становится для пользователя. Разработчики анимируют даже самые простые действия, такие как: показ скрытых элементов, выпадающие меню, всплывающие информационные подсказки. Анимации помогают акцентировать внимание пользователя на элементах управления.
CSS3-анимацию целесообразно использовать в популярной технике параллакс-скроллинга (рис. 2), когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью при продвижении по странице, что создает эффект трехмерного пространства в веб-приложении [2].
Рис. 2. Пример применения параллакс-скроллинга на сайте
Подобный эффект в значительной степени увеличивает взаимодействие посетителей с сайтом.
Что касается технологии WebGL, то следует отметить, что пока не все графические карты поддерживают инструкции WebGL. Так, примером могут служить, встроенные видеокарты Intel, занимающие до 50 % рынка. Однако, по сравнению с Canvas, производительность которого ниже и отрисовка сложных сцен в реальном масштабе времени может быть затруднительна, WebGL отлича-ется более высокой производительностью в силу, в том числе и того, что сцены не генерируются заново при измененении кадра.
Таким образом, тенденции WEB-разработки свидетельствуют о широком распространении 3D-графики, что приведет, в свою очередь, к построению более мощных виртуальных миров в онлайн-играх, добавлению нового измерения в сервисах онлайн-карт (например, просмотр улиц), внедрению новых 2D и 3D интерфейсов в веб-приложениях и на веб-сайтах.
5. Рекомендации по наиболее эффективному использованию современных технологий создания интерактивных WEB-документов
На основе проведенного исследования современных WEB-технологий целесообразно разработать рекомендации по наиболеее эффективному их использованию.
Так, для целей разработки браузерных игр, где игровой процесс происходит непосредственно в окне браузера с полноценным 3D движком, целесообразно использовать технологию WebGL (рис. 3).
Рис. 3. Браузерная игра “Teach Me to Fly” в 3D формате, разработанная средствами WebGL
Как правило, целевая аудитория индустрии игр имеет оборудование, отвечающее минимальным требованиям, и использует современные версии браузеров.
Возможна реализация средствами WebGL презентаций на сайте, которые позволят продемонстрировать план объектов строительства, бутика или театра в формате 3D.
Технология SVG может быть использована для решения задач масштабирования графики или вывода интерфейса на большой экран, при условии, что количество объектов вывода невелико.
Что касается технологии Canvas, то ее целесообразно использовать для редактирования растровой графики, а также с целью наложения эффектов на графику или видео. Для решения задач генерирования растровой графики (визуализация данных, фракталы, графики функций), а также разработки 2D-mp также эффективно использовать технологию Canvas.
Технология CSS3 в сочетании с JavaScript эффективна для разработки параллакс-скроллинга, широко используемом для достижения эффекта прохождения компьютерной игры. СSS3
предоставляет широкие возможности в области реализации интерфейса и новых дизайнерских решений.
6. Выводы
Проведенное в работе исследование позволило определить области наиболее эффективного использования современных технологий разработки интерактивных Web-документов:
- так, технология WebGL рассматривается как
76
Технічні науки
Scientific Journal «ScienceRise» №5/2(4)2014
реальная альтернатива старым подходам, характеризуется надежной работой в современных браузерах и может быть использована для отображения 3D в Web;
- областью эффективного использования Canvas является растровая графика;
- SVG целесообразно использовать при работе с масштабируемой векторной графикой;
- CSS3 рационально применять для реализации интерфейса и плавного взаимодействия элементов управления.
Литература
1. Лоусон, Б. Изучаем HTML 5. Библиотека специалиста [Текст] / Б. Лоусон, Р. Шарп. - Спб.: Питер,
2011. - 253 с.
2. Лабберс, П. HTML 5 для профессионалов: мощные инструменты для разработки современных вебприложений [Текст] / П. Лабберс, Б. Олберс. - М.: ООО «И. Д. Вильямс», 2011 - 272 с.
3. Макфарланд, Д. Большая книга CSS3. 3-е издание [Текст] / Д. Макфрланд. - Спб.: Питер, 2014 - 608 с.
4. Дэйли, Д. Разработка веб-приложений с помощью SVG [Текст] / Д. Дэйли, Д. Фрост. - Нью-Йорк:
Майкрософт, 2012 - 294 с.
5. Введение в WebGL c помощью Three.js
[Электронный ресурс] / Режим доступа:
http://davidscottlyons.com/threejs/presentations/frontporch14/
6. Фрайн, Б. HTML5 и CSS3 Разработка сайтов для любых браузеров и устройств [Текст] / Б. Фрайн. - C^.: Питер, 2014. - 304 с.
References
1. Loyson, B., Sharp, R. (2011). Study HTML 5. Specialist Library. St. Petersburg, RU: Peter, 253.
2. Labbers, P., Olbers, B. (2011). HTML 5 for professionals: a powerful tool for the development of modern web applications. Moscow, RU: LCD «I. Williams», 272.
3. Macfarland, D. (2014). The Big Book CSS3, 3. St. Petersburg, RU: Peter, 608.
4. Dailey D., Frost, J. (2012). Building Web Applications with SVG, 1. New York, EN: Microsoft, 294.
5. Introduction into WebGL with Three.j. Available at: http://davidscottlyons.com/threejs/presentations/frontporch14/
6. Frain, B. (2014). Responsive Web Design with HTML5 and CSS3. St. Petersburg, RU: Peter, 304.
Рекомендовано до публікації д-р техн. наук Сінотін А. М.
Дата надходження рукопису 18.11.2014
Трофименко Анастасия Сергеевна, кафедра медиасистем и технологий, Харьковский национальный университет радиоэлектроники, пр. Ленина, 16, г. Харьков, Украина, 61166 Е-mail: nastya.trofimenko@gmail.com
Егорова Ирина Николаевна, кандидат технических наук, профессор, кафедра медиасистем и технологий, Харьковский национальный университет радиоэлектроники, пр. Ленина, 16, г. Харьков, Украина, 61166 Е-mail: tvicg@kture.kharkov.ua
УДК 665.53
DOI: 10.15587/2313-8416.2014.31499
ФРАКЦІОНУВАННЯ ЕФІРНОЇ ОЛІЇ DRACOCEPHALUM MOLDAVICA L. І ШЛЯХИ ВИКОРИСТАННЯ ФРАКЦІЙ У ХАРЧОВИХ ТЕХНОЛОГІЯХ
© Н. Е. Фролова. О. М. Усатюк, М. В. Карпутіна
У статті представлено результати дослідження режимів фракціонування ефірної олії Dracocephalum moldavica L., з якої отримано чотири фракції різного аромату. За характеристиками кожна фракція є самостійним натуральним ароматизатором для різних галузей харчової промисловості. Розроблено рецептуру ароматизованого спреду, в якій як натуральний ароматизатор використано другу фракцію розгонки. Комбінування фракцій у композиції дозволяє значно розширити асортимент натуральних ароматизаторів та ароматизованих харчових продуктів
Ключові слова: ефірна олія, змієголовник молдавський, фракціонування, фракції, натуральний ароматизатор, ароматизація.
The paper presents the research results of the modes of essential oil fractionation of Dracocephalum moldavica L., from which the four fractions of different flavour have been obtained. According to their characteristics each faction is an independent natural flavour for different sectors of the food industry. The recipe of flavoured spread with using the second distillation fraction as a natural flavour has been developed. Combining factions in the composition can significantly extend the range of natural flavours and flavored foods Keywords: essential oil, Dracocephalum moldavica L., fractionation, fractions, natural flavour, flavouring
1. Вступ
Обсяг виробництва ефірних олій у світі сягає 30 тис. т. на рік. Україна щорічно виробляє від 100 до 120 тонн ефірних олій на суму від 60 до 70 млн. грн.
[1]. Однак, більша частина ефірних олій вітчизняного виробництва експортуються і в значно меншій
кількості використовується всередині країни.
Частіше інших закуповують вітчизняні ефірні олії країни Євросоюзу. Це, в першу чергу, Франція, Англія, Голландія та Німеччина [2].
Ефірні олії використовують у парфумерно-косметичній, фармакологічній галузях, а також в
77
