Шубенкова І. А., Кухарєв С. О., Поповська А. В. Модуль оптимізації макета в структурі текстового онлайн редактора // Міжнародний науковий журнал "Інтернаука". — 2018. — №8.
Технічні науки
УДК 004.738.1
Шубенкова Ірина Анатоліївна
кандидат фізико-математичних наук,
доцент кафедри математичних методів системного аналізу
Інститут прикладного системного аналiзу
Національного технічного університету України
«Київський політехнічний інститут імені Ігоря Сікорського»
Шубенкова Ирина Анатольевна
кандидат физико-математических наук,
доцент кафедры математических методов системного анализа
Институт прикладного системного анализа
Национального технического университета Украины
«Киевский политехнический институт имени Игоря Сикорского»
Shubenkova Iryna
Candidate of Physico-Mathematical Sciences,
Associate Professor of Department of the Mathematical Methods of System Analysis
Institute for Applied System Analysis of National Technical University of Ukraine
“Igor Sikorsky Kyiv Polytechnic Institute”
Кухарєв Сергій Олександрович
асистент кафедри математичних методів системного аналізу
Інститут прикладного системного аналiзу
Національного технічного університету України
«Київський політехнічний інститут імені Ігоря Сікорського»
Кухарев Сергей Александрович
ассистент кафедры математических методов системного анализа
Институт прикладного системного анализа
Национального технического университета Украины
«Киевский политехнический институт имени Игоря Сикорского»
Kukharyev Sergyi
Assistant of Department of the Mathematical Methods of System Analysis of
Institute for Applied System Analysis of National Technical University of Ukraine
“Igor Sikorsky Kyiv Polytechnic Institute”
Поповська Анна Василівна
магістрант кафедри математичних методів системного аналізу
Інституту прикладного системного аналiзу
Національного технічного університету України
«Київський політехнічний інститут імені Ігоря Сікорського»
Поповская Анна Васильевна
магистрант кафедры математических методов системного анализа
Института прикладного системного анализа
Национального технического университета Украины
«Киевский политехнический институт имени Игоря Сикорского»
Popovska Anna
Master Degree Student of Department of the
Mathematical Methods of System Analysis of
Institute for Applied System Analysis of National Technical University of Ukraine
“Igor Sikorsky Kyiv Polytechnic Institute”
МОДУЛЬ ОПТИМІЗАЦІЇ МАКЕТА В СТРУКТУРІ ТЕКСТОВОГО ОНЛАЙН РЕДАКТОРА
МОДУЛЬ ОПТИМИЗАЦИИ МАКЕТА В СТРУКТУРЕ ТЕКСТОВОГО ОНЛАЙН РЕДАКТОРА
THE LAYOUT OPTIMIZATION MODULE IN THE STRUCTURE OF ONLINE TEXT EDITOR
Анотація. HTML макет, згенерований текстовими онлайн редакторами за результатами форматування тексту користувачами, є зазвичай перевантаженим надлишковими елементами й атрибутами та має недоліки в побудові логічної структури DOM-дерева. Дана стаття присвячена дослідженню аспектів HTML макету, що можуть бути оптимізовані, виробленню рекомендацій до алгоритмів оптимізації та їх програмній реалізації. У статті викладено в скороченому вигляді основні аспекти сучасного стану даної проблеми, що може стати корисним для студентів, аспірантів та фахівців профілю інформаційних технологій в плані розширення знань в напрямку вивчення оптимізаційних алгоритмів та удосконалення роботи у сфері веб-розробок.
Ключові слова: HTML макет, оптимізація HTML, SEO, розмітка, верстка, текстовий онлайн редактор.
Аннотация. HTML макет, сгенерированный текстовыми онлайн редакторами по результатам форматирования текста пользователями, является обычно перегруженным избыточными элементами и атрибутами и имеет недостатки в построении логической структуры DOM-дерева. Данная статья посвящена исследованию аспектов HTML макета, которые могут быть оптимизированы, выработке рекомендаций к алгоритмам оптимизации и их программной реализации. В статье изложены в сокращенном виде основные аспекты современного положения по данной проблематике, что может стать полезным для студентов, аспирантов и специалистов профиля информационных технологий в плане расширения знаний в направлении изучения оптимизационных алгоритмов и усовершенствования работы в сфере веб-разработок.
Ключевые слова: HTML макет, оптимизация HTML, SEO, разметка, верстка, текстовый онлайн редактор.
Summary. The HTML layout generated by online text editors upon users’ text formatting results is usually overloaded with redundant elements and attributes, and has drawbacks in organizing logical structure of the DOM tree. This article is devoted to the investigating of aspects of the HTML layout that can be optimized, the development of recommendations for optimization algorithms and their program realization. The article outlines the main aspects of the current state of the problem, which may be useful for students, postgraduates and specialists in the field of information technologies in terms of expanding knowledge in the field of studying optimization algorithms and improving performance in the web development area.
Key words: HTML layout, HTML optimization, SEO, layout, online text editor.
HTML макети, створені в результаті роботи текстових онлайн редакторів, відрізняються від макетів веб-ресурсів, розроблених фахівцями. Вони, як правило, не містять помилок, зокрема відсутніх закриваючих тегів та ін., та відповідають (не завжди) рекомендаціям сучасних специфікацій. Однак, HTML код таких макетів є дуже часто невиправдано перебільшеним за рахунок надмірного застосування повторюваних та / або недоцільних елементів, атрибутів, а також не має належної структурованості.
Оптимізація HTML макету в роботі текстових онлайн редакторів має особливе значення, оскільки текст коригується та форматується користувачем «на льоту», постійно змінюючи при цьому HTML макет, за допомогою якого відображається редагований текст. При цьому, як правило, при збільшенні форматування HTML макет тільки збільшується за рахунок нових коректур користувача, а попередньо створені елементи HTML макету не редагуються або не видаляються, навіть коли вони більше не мають вплив на відображення представлення тексту для користувача.
Проведений аналіз макетів, згенерованих такими найсучаснішими та найпрогресивнішими веб-сервісами, як Word Online, Dropbox Paper, Google Docs, Zoho Writer, свідчать про те, що всі макети веб-документів для кожного з редакторів є специфічними, вони мають різні закладені алгоритми побудови та організації DOM-дерева. І, одночасно, всі вони мають різні аспекти, що можуть бути оптимізовані, зокрема:
Дане дослідження було б неповним без аналізу наявних інструментів з оптимізації HTML. Розглянутий функціонал таких інструментів, як Tidy, Jevix, HTML Cleaner, HTML-покращувачів (HTML-beautifiers) передбачає, в основному, «технічні» функції стискання, такі як видалення пробільних символів або, навпаки, коректне розставлення відступів для кращої читабельності коду, додавання відсутніх закриваючих тегів, виправлення інших помилок. Такий функціонал звісно має значний оптимізаційний ефект, але не працює з логічною перебудовою та внутрішньою структурою DOM-дерева. Найбільш потужним та багатофункціональним інструментом із досліджених є бібліотека Tidy. Однак, навіть її головним завданням є саме виправлення наявних та очевидних помилок, валідація та забезпечення коректності коду, а не логічний аналіз та оптимізаційна перебудова HTML макету.
На сьогодні вже наявні деякі теоретико-практичні роботи по даній темі. В основному, вони стосуються SEO (Search Engine Optimization), де серед інших рекомендацій авторами вироблені рекомендації до оптимального HTML макету [1]. Так, Керівництво по пошуковій оптимізації від Google [2], однією з рекомендацій відзначає необхідність використання оптимальної структури сайту, при якій контент буде впорядковано і користувачеві буде легко в ньому орієнтуватися. Правило простоти дизайну, відзначене Беном Хеніком [3], включає в себе такі вимоги як, найменша кількість елементів розмітки, найкоротші запити, скорочення кількості нефункціональних елементів та інші. Однією з вартих уваги та реалізованих під час програмування Модуля оптимізації HTML макету (далі – «Модуль») є рекомендація, відзначена Джеремі Кейсом (Jeremy Keith), щодо уникнення застосування депрекованих (застарілих) елементів [4]. Дані роботи, безперечно є важливим підґрунтям даного дослідження, втім вони не є повними та не завершені практичною реалізацією оптимізаційних механізмів засобами програмування.
Проведені дослідження стали підґрунтям для вироблення рекомендацій до алгоритму оптимізації макету, а саме:
Вироблені в рамках дослідження рекомендації становитимуть логічну основу для розробки архітектури та здійснення програмної реалізації Модуля оптимізації макету.
Модуль оптимізації макету є прикладною програмою, що виконує конкретну прикладну задачу – коректування та реорганізацію структури DOM-дерева у відповідності до закладеної логіки.
При розробці Модуля оптимізації макету перевагу надано найбільш вдалим та сучасним інструментам. Обрана мова програмування JavaScript є однією з найбільш потужних інструментів веб-програмування, що має багато переваг. Оскільки більшість текстових онлайн редакторів мають архітектуру клієнт-сервер, однією з таких переваг є можливість програмної реалізації закладених алгоритмів як на стороні клієнта так і на стороні сервера.
Використання бібліотеки jQuery, головним фокусом якої є взаємодія JavaScript та HTML, також обумовлене можливістю легкої трансформації програмного коду з front-end до back-end.
Програмна платформа Node js є незалежною від операційної системи та обслуговується з допомогою обраної вище мови програмування. npm (аббр. node package manager) - це стандартний менеджер пакетів, що автоматично встановлюється разом з Node.js. В реєстрі npm на час написання даної статті налічується 650 тисяч пакетів. Для інтеграції Модуля оптимізації макету до текстових онлайн редакторів використовується Gulp. Gulp - це утиліта з потокової збірки проектів, це таск-менеджер для автоматичного виконання часто повторюваних завдань (наприклад, мініфікації, тестування, об'єднання файлів), також написаний на мові програмування JavaScript.
Також одним з найсучасніших інструментів, що забезпечують найвищу зручність організації роботи з програмним додатком є Docker. Docker – це програмне забезпечення для автоматизації розгортання і управління додатками в середовищі віртуалізації на рівні операційної системи. Дозволяє «упакувати» додаток з усім його оточенням і залежностями в контейнер, який може бути перенесений на будь-яку Linux-систему з підтримкою cgroups в ядрі, а також надає середовище з управління контейнерами.
Завдяки застосуванню зазначених технологій Модуль оптимізації макета є надзвичайно маневровим елементом, що може бути інтегровано не тільки до текстових онлайн редакторів, але і після його адаптації до будь-якого веб-ресурсу, що потребуватиме відповідний функціонал.
Модуль розроблено на базі об’єктно орієнтованого програмування у функціональному стилі. І власне сам Модуль являє собою клас, що називається optimizeHTML. Клас optimizeHTML включає в себе:
Елемент для конфігурації даних – config, має поля що можуть редагуватись адміністратором текстового онлайн-редактора та має наступну структуру:
Корегуючи конфігураційні параметри, можна досягати різних результатів залежно від поставленої задачі.
Модуль оптимізації включає в себе наступну послідовність 4х основних функцій:
«Під-операції», викладені вище, також для зручності винесені в окремі функції, по-перше, для більш лаконічної організації розроблюваного програмного коду, по-друге, для заощадження розміру коду, оскільки вони викликаються по декілька разів і для поточного і для попереднього елементів.
HTML код сприймається Модулем як текстовий рядок. В першій функції скрипти виконуються над рядком, в основній функції рядок трансформується (парситься) у набір елементів DOM-дерева. На виході після опрацювання отримуємо HTML код як рядок.
Проведені успішні тестування роботи Модуля оптимізації макету. В якості вхідних даних використовувались реальні згенеровані текстовими онлайн редакторами макети веб-документів, створених користувачами. Для тестування були обрані найбільш потужні веб-ресурси сучасності, такі як Word Online, Dropbox Paper, Google Docs. Тестування підтвердило ефективність та правильність функціонування розробленого додатку. На рисунку 1 представлено Скріншот з результатом роботи Модуля оптимізації макета. Результат має дві частини: стильову з класами, яким корелюють відповідні CSS-властивості та власне вихідний HTML код.
Рис. 1. Скріншот результату роботи Модуля оптимізації макета
Рис. 2. Порівняння параметрів вхідного та оптимізованого макетів Word Online
Рис. 3. Порівняння параметрів вхідного та оптимізованого макетів Dropbox Paper
Рис. 4. Порівняння параметрів вхідного та оптимізованого макетів Google Docs
Порівняння параметрів на рисунках 2-4 вхідного та оптимізованого HTML макетів очевидно свідчить про значний оптимізаційний ефект.
Завдяки програмній реалізації алгоритмів в Модулі оптимізації макету розмір оптимізованих HTML документів зменшуються на розмір, що становить від 37% до понад 400% від початкового.
Програмний продукт є зрозумілим у використанні, легко інтегрується до текстових онлайн-редакторів, коректно відпрацьовує подані в якості вхідних даних тести. Модуля оптимізації макету становить міцну технологічну платформу для його подальшого розвитку та адаптації з метою оптимізації макетів будь-яких веб-ресурсів, представлених у Всесвітній мережі.
Література