Научни трудове на Съюза на учените в България-Пловдив, серия Б. Естествени и хуманитарни науки, т. XVIII, ISSN 1311-9192 (Print), ISSN 2534-9376 (On-line), 2018. Scientific researches of the Union of Scientists in Bulgaria-Plovdiv, series B. Natural Sciences and the Humanities, Vol. XVIII, ISSN 1311-9192 (Print), ISSN 2534-9376 (On-line), 2018.
СОФТУЕРНО ПРИЛОЖЕНИЕ ЗА ГЕНЕРИРАНЕ НА МОБИЛНИ ВЕРСИИ НА УЕБ СТРАНИЦИ
Тодор Рачовски, Емил Хаджиколев, Станка Хаджи колева Пловдивски университет „П. Хилендарски"
SOFTWARE APPLICATION FOR GENERATING MOBILE VERSIONS OF WEBPAGES
Todor Rachovski, Emil Hadzhikolev, Stanka Hadzhikoleva Plovdiv University „Paisii Hilendarski"
Abstract: The paper reviews some software applications for analysis and automated generation of mobile versions of websites. It presents the architecture of a software application for automated generation of mobile versions of "desktop" webpages. The paper describes the main components of the created prototype Mobiles Online.
Keywords: responsive design, mobile design, mobile versions of "desktop" webpages
УВОД
Терминът отзивчив уеб дизайн (Responsive Web Design) е въведен от Ethan Marcotte (Marcotte, 2010). Визира уеб сайтове, които без промяна на изграждащия ги код се визуализират еднакво добре на различни устройства, с различна разделителна способност -мобилни телефони, таблети, персонални компютри, лаптопи и др. Въпреки че понятието отзивчив дизайн придобива популярност относително скоро - след 2012 година, сега -няколко години по-късно, изграждането на нови уеб сайтове, които не притежават подобни възможности, се счита за голям пропуск.
Необходимостта от технология за адаптивно представяне на сайтове се поражда още с навлизането на първите по-известни браузъри Netscape (1994 г.) и Internet Explorer (1995 г.) (Wikipedia, 2017). Те поддържат собствени характеристики за форматиране на определени стандартни HTML-елементи, което в някои случаи води до разлики в представянията на страниците.
Усъвършенстването на стандартите HTML и CSS (съотв. за задаване структурата на уеб страниците и за стиловото им представяне) и стремежа за спазването им от съвременните браузъри значително улесни работата на разработчиците на сайтове. Техните усилия се насочиха от поддръжката на специфични решения за различни браузъри към изграждането на ефектни и визуално привлекателни сайтове. Основен проблем в този период се явява изграждането на десктоп сайтове, които се визуализират еднакво добре на екрани за компютри и лаптопи с различни разделителни способности. Решенията са „фиксиран", „еластичен", „течен" дизайн и др., които понякога предполагат съществуването на минимални размери за определени HTML елементи (Kim, 2013), (Mohorovicic, 2013).
Масовото навлизане на таблетите и смартфони (iPhone - 2007 г.; смартфони с операционна система Android - 2008 г. и др.) в ежедневието, както и използваните в тях
браузъри налагат преосмисляне на начините за създаване на сайтове. Много от създадените по-рано уеб страници не изглеждат добре на по-малките екрани на новите мобилни устройства. Често срещани проблеми са: малки и нечетими букви; необходимост от хоризонтално скролиране на страниците; невъзможност за визуализиране на Flash, Java и други обекти; много малки или много големи обекти (картинки, рекламни блокове и др.) с фиксирани размери и др. Новосъздадените сайтове трябва да поддържат по-семпъл дизайн със стилови (а не графични) ефекти, а съдържанието да се визуализира еднакво добре на десктоп и на мобилни браузъри.
Често използвано решение, когато вече съществува десктоп версия на сайт, е създаването на самостоятелна мобилна олекотена версия. Основен недостатък при този подход е необходимостта от паралелна поддръжка на две уеб приложения.
Друг възможен подход е реализация на сайт с отзивчив дизайн. Това предполага създаване на сайт, който автоматично разпознава устройството, разделителната му способност и ориентацията му - пейзаж (landscape) или портрет (portrait), и представя по най-подходящия начин съдържанието му. Изграждането на подобно решение се осъществява чрез използването на медийните заявки (media queries) както и на другите възможности на стандарта CSS3 (Nebeling & Norrie, 2013), (Baturay & Birtane, 2013). Основни принципи и шаблони за създаване на отзивчив уеб дизайн са описани в книгите на Marcotte „Responsive Web Design" (Marcotte, 2011) и „Responsive Design: Patterns & Principles" (Marcotte, 2015). В World Wide Web Consortium се работи в насока създаване на стандартизирани техники, улесняващи изграждането на сайтове с отзивчив дизайн. Това включва допълнения към стиловите модули на CSS3, както и създаването на нови модули (CSS Multi-column Layout Level 1), очакващи одобрение и бъдеща интеграция в браузърите (W3C, 2017).
Основна задача на „мобилната ера" е - как създадените по-рано десктоп сайтове да бъдат представени добре в мобилните устройства. Изграждането на мобилна версия на съществуващ сайт не винаги е приоритет или желание на собственика. Причина за това са както неочакваните допълнителни разходи за създаването и поддръжката й, така и неразбиране на необходимостта от съществуването й за по-добро класиране на сайта в търсачките.
Съществуват редица софтуерни инструменти за автоматизирано създаване на мобилна версия на сайт. В общия случай на сървъра, на който се намира сайта, се качват допълнителни модули, които извършват конвертирането и съхраняват генерираната мобилна версия на сайта. Този тип приложения извършват автоматизираното или с помощта на софтуерен съветник изграждане на мобилна версия на десктоп уеб страница на няколко стъпки: разпознаване на менюто; избор на подходящ мобилен изглед; създаване на мобилни стилове; добавяне на плъгини.
В настоящата статия е направен кратък обзор на съществуващи софтуерни инструменти за анализ и преобразуване на десктоп уеб страници в мобилни. Представена е работата по изграждане на приложението Mobiles Online, което създава динамично мобилни версии на уеб страници. Описани са архитектурата, основните компоненти и функционалности на реализирания софтуерен прототип. Приложението е изградено като прокси услуга, като скрива от потребителите всички детайли по анализа и имплементирането на мобилен дизайн на указана уеб страница.
ПРИЛОЖЕНИЯ ЗА АНАЛИЗ И ПРЕОБРАЗУВАНЕ НА УЕБ СТРАНИЦИ В МОБИЛНИ
Разработчиците на уеб сайтове разполагат с множество безплатни инструменти за анализ на готовността на уеб страница за визуализация в мобилни устройства. Голяма част от тези инструменти дават насоки и ресурси за подобряването им. Google предлага безплатен инструмент за анализ на уеб страници, наречен Mobile-Friendly Test Tool. Той прави проверка дали дадена уеб страницата е с отзивчив дизайн и при необходимост посочва ресурси с информация за оптимизирането му. Основните критерии, които тества са:
използване на Flash, конфигуриране на изглед (Viewport), фиксирана ли е ширината на изгледа на уеб страницата, съдържанието оразмерено ли е според изгледа, размера на шрифта подходящ ли е, контролите за управление и навигация разположени ли са по подходящ начин. WompMobile е друг инструмент, който анализира 4 основни компонента: отзивчивост на дизайна, бързина при зареждане на страницата, използване на ускорени мобилни страници (Accelerated Mobile Page), използване на страницата за електронна търговия. mobiReady тества 38 показателя, маркира слабостите в дизайна и дава информация и препоръки за отстраняването на всеки проблем. Mobile SEO изпълнява тестове за проверка за отзивчив дизайн, скорост, достъпност за Google, автоматични пренасочвания и др. Приложението предоставя детайлна информация за грешките. Mobile Friendly Check се отличава с това, че предоставя по-подробна информация за грешки в дизайна и детайли за тях. Приложението посочва кои стилове и HTML елементи са проблемни.
Има разработени редица софтуерни инструменти, които напълно или частично автоматизират процеса по създаване на мобилна версия на даден сайт. Едни от най-популярни са софтуерните приложения на Duda - Responsive website builder и Mobile site builder. Първото приложение позволява на потребителите да създават визуално уеб сайтове с отзивчив дизайн, чрез drag-and-drop технология. Второто приложение дава възможност на потребителите да създават мобилна версия на съществуващ уебсайт. Потребителят трябва да въведе URL адреса на своя десктоп сайт, за да създаде мобилна версия. Новосъздаденият сайт за мобилни устройства може да бъде променян с HTML и CSS, или чрез използване на визуалния drag-and-drop редактор. Могат да бъдат променени различни аспекти на дизайна - навигационно меню, стилове, цветови схеми, шрифтове, заглавна част (header), съдържание, галерии, снимки и др. Сайтовете, създадени чрез Duda са съвместими с всички смартфони. Мобилните сайтове се синхронизират автоматично с техните десктоп версии. bMobilized е конкурентно приложение за автоматичното изграждане на мобилна версия на вече съществуваща страница. То използва множество алгоритми за интерпретиране на структурата и съдържанието на уеб страница. След генериране на мобилна страница, тя може да бъде редактирана ръчно или програмно. Ръчното редактиране на съдържанието се извършва визуално, чрез предоставените от платформата инструменти (икони, менюта, персонализация на стиловете на страницата, смяна на цветове и шрифтове и др), а програмното - чрез редактиране на HTML, CSS и JavaScript код. Други приложения за изграждане на мобилни версии на уеб страници са Snapmobl, Mobify, goMobi и т.н. Детайлно актуално проучване на съществуващите софтуерни инструменти за автоматизиран анализ и генериране на мобилни версии на уеб сайтове е представено в (Rachovski и кол., 2017).
ПРИЛОЖЕНИЕ MOBILES ONLINE ЗА ГЕНЕРИРАНЕ НА МОБИЛНИ ВЕРСИИ НА УЕБ СТРАНИЦИ
Mobiles Online е приложение, което има за цел улесни потребителите на мобилни устройства, като генерира мобилни версии на уеб страниците, в зависимост от параметрите на конкретното използвано мобилно устройство. То служи като посредник между клиентския агент (десктоп или мобилен уеб браузър) и реалния сървър, на който се хоства целевата уеб страница (фиг.1). Потребителят задава заявка за уеб страница, като изписва адреса й в Mobiles Online. Заявката се препредава към целевия уеб сървър, който връща оригиналната HTML страница. Mobiles Online обработва получените данни и генерира мобилна версия на страницата, която предоставя на клиента. Mobiles Online работи като прокси сървър, който със знанието на клиента променя начина на визуализация на желаното от него съдържание.
Основните дейности в процеса на работа на приложението са следните:
1. Потребителят стартира в браузъра уеб приложението Mobiles Online.
2. Потребителят въвежда URL адрес на уеб страница в поле „Търсене" (фиг.2).
3. Указаният адрес се валидира и ако е невалиден, на клиента се връща съобщение за грешка.
4. Извлича се съдържанието на изисквания ресурс. Ако съдържанието е невалиден HTML документ, на клиента се връща съобщение за грешка.
5. HTML парсер извършва анализ и обработка на информацията и изгражда йерархичен обектен модел на елементите на уеб страницата.
6. Генерира се модел на документа, подходящ за мобилно стилизиране:
• всички елементи на йерархичния обектен модел се подлагат на специфична обработка - премахват се стилове и елементи, заменят се елементи, добавят се нови „мобилни" елементи и др.;
• генерира се представяне на уеб страницата в JSON формат, подходящо за визуализиране чрез различни стилове;
• хипервръзките се пренаписват така, че изпълнението им да се извършва отново от приложението Mobiles Online.
7. Върху създаденият модел на уеб страницата се прилага стил, съобразен с параметрите на извикващото я мобилно устройство.
8. Към браузъра на потребителя се връща генерираната мобилна версия.
За апробиране на предложената технология е
създаден прототип, достъпен на адрес http://mobiles.studentschool.eu. Към настоящия момент са реализирани основните
функционалности на
приложението и се провеждат експерименти с цел
подобряването му.
АРХИТЕКТУРА НА MOBILES ONLINE
Архитектурата (фиг.3) на създадения прототип Mobiles Online е многослойна и включва: база данни, слоеве за управление на базата данни, бизнес логика, уеб услуги и презентационен слой.
В базата данни се съхраняват генерираните мобилни страници, журнал за грешки и статистически данни. За да се гарантира по-голяма гъвкавост и скалируемост, и възможност за запис на данни без предварително дефинирана схема, е подходящо използването на нерелационни бази данни. Това гарантира стабилност на приложението и при бързо нарастване на обема на съхраняваните данни.
Слоят за управление на базата данни е базиран на концепцията на ORM технологията (Object-relational mapping) за конвертиране на данни чрез използване на
Эдпрк» ILJRL
H Г TP NTTPS
Omaefip Mflftiflna страница
л
■ I L . . Л
Заявил iWL адрес ) HTTP HTTPS
UdiBOÉic Serve*
ib
Öniiwp (HTIvfL шщ ч JKVTKTWI стрл-iuuaj
Sirvii
3fö
■ -
Фиг. 1. Процес на работа на Mobiles Online
îittps' 1 mi'plovd iv. bg/pflgcs
ftl..TrnjTCKII A НП 1111 IL КЧГ
Фиг. 2. Стартиране на процеса на конвертиране
бизнес логика съдържа извършват
Лаптоп
Смартфон
Таблет
PC
обектно-ориентирани езици за програмиране. Той съдържа информация за осъществяване на достъп на приложението до базата данни, представяния на информация от базата данни във вид на класове и обекти и др. Слоят създава "виртуална" обектна база данни, която може лесно да бъде манипулирана чрез средствата на конкретен език за програмиране, без да е необходима допълнителна обработка.
Слоят за компонентите, които
същинската работа по изграждане на мобилната страница. Основен компонент в него е HTML парсера, който извършва анализ на оригиналната уеб страница, създава йерархичен обектен модел, оптимизира обектите на уеб страницата и изгражда междинна не-стилизирана версия на уеб страницата. HTML парсерът от своя страна съдържа два отделни модула -синтактичен анализатор и семантичен анализатор.
Слоят за уеб услуги получава от слоя за бизнес логика обработената информация, преобразува я в JSON формат и я предава за последваща обработка на презентационния слой. Този слой дефинира интерфейси за достъп до уеб услугите и скрива детайлите на бизнес процеса за изграждане на JSON-
файла. Дава възможност за достъп на трети страни до JSON-файловете, респективно и за прилагане на разработени от други доставчици стилове.
Презентационният слой е отговорен за избора и използването на подходящ CSS стил за изгражданата мобилна страница, в зависимост от използваното мобилно устройство.
СИНТАКТИЧНИ АНАЛИЗАТОРИ НА HTML ДОКУМЕНТИ
За извличане на информация от уеб документ може да се използва XML/HTML анализатор (парсер). С такъв разполага почти всеки програмен език. Между двата стандарта - XML и HTML има значими разлики (показани в таблица 1), което поражда необходимостта от анализ и индивидуални решения. Важно е да отбележим, че XML документите задължително трябва да притежават валидна структура - напр. всеки отварящ таг трябва да има съответен коректно поставен затварящ таг. За разлика от тях, HTML страниците може да не са описани съвсем коректно. В случай на некоректен HTML документ (липса на затварящи тагове, неправилно вложени елементи, поставени на неправилно място тагове и др.), браузърите се опитват да изградят коректно съдържание, което визуализират, без да уведомяват потребителите за възникналите грешки. Поради тази толерантност, много от създадените преди години уеб страници не съдържат валиден HTML. Некоректното структуриране на HTML документ може да доведе до проблеми при
презентационен слой t
Спой эа уеб услуги
т
Спой за бизнес логика t
Спой за »правление на базата данни База от данни
Фиг. 3. Архитектура на Mobiles Online
HTML XML
Цел на езика Стилизация на информация в уеб Обмен на данни между приложения
Синтаксис Без синтактична релация на имената и създаването на персонални атрибути Таговете съдържат информация за съдържанието
Тагове Използване на стандартни тагове без персонализация Използване не персонални тагове
Таблица 1. Основни разлики между HTML и XML
Подобно на браузърите, HTML парсерите „се опитват" да генерират коректен йерархичен обектен модел на документ, дори и той да не е напълно валиден.
При анализ на XML/HTML има два подхода, реализирани чрез съответни парсери -DOM (Document Object Model) и SAX (Simple API for XML). При Document Object Model (DOM) парсерите се създава йерархичен обектен модел на документа, който впоследствие може да бъде манипулиран (DOM Standard, 2017). Simple API for XML (SAX) е събитийно ориентирана технология. При обхождане на документа се генерират събития (за начало и край елементи, наличие на атрибути и др.). Указани събития (напр. за началото или край на конкретен елемент, конкретен атрибут и др.) могат да бъдат обработени чрез реализирани от програмиста функционалности (SAX Standard, 2014).
При избор на парсер трябва да се отчетат някои съществени различия. При DOM, създаденият обектен модел може многократно да бъде обхождан и манипулиран. При SAX обхождането е еднократно и по-бързо, но документа трудно може да се променя. Недостатък на DOM е по-бавното създаване на обектния модел и големия обем заета от него памет.
СИНТАКТИЧЕН АНАЛИЗАТОР НА MOBILES ONLINE
Стандартните DOM парсери създават „тежки" обектни модели, които в някои случаи налагат излишна обработка на данни. Тъй като в нашия случай част от елементите не е нужно да бъдат анализирани и обработвани, сме разработили олекотен DOM парсер. Основните дейности, които извършва, са:
• анализ на HTML тагове и създаване на йерархичен обектен модел с елементи от тип DOMNode;
• извличане на различните HTML атрибути;
• премахване на CSS тагове;
• премахване на JavaScript тагове и скриптове.
Някои от по-важните HTML елементи, обработвани от приложението са
представени в табл.2._
HTML таг Описание
<header> Съдържа цялата информация относно заглавната част на страницата. Обикновено в нея се поставят заглавието и мета данните на страницата.
<footer> Съдържа информацията относно долна част на страница.
<title> Заглавие на страницата.
<meta> Мета данни от като автор, ключови думи и др.
<span> Използва се за групиране на елементи на ред.
<div> Използва се за разделител на елементи.
<input> Поле за вход.
<form> Форма.
<img> Описание на снимки.
<nav> Навигационно меню.
<а> Хипервръзки.
Таблица 2. Основни HTML тагове
Генерирането на DOM обектния модел се извършва рекурсивно и се състои от множество йерархично организирани DOM възли от тип DOMNode. Например, при извличане на тялото на HTML документа се започва от търсене на съдържанието между отварящия и затварящия body-таг, като то се явява обект от 1-во ниво. В съдържанието на тялото се търсят и извличат всички елементи от следващото 2-ро ниво и т. н.
DOMNode обектите имат следните основни полета:
• Name - текущ HTML таг;
• Attributes - колекция от атрибути, съдържащи се в текущият HTML таг;
• Inner - съдържанието между началния и крайния таг;
• EndSlash - променлива, която показва дали HTML тага завършва с „/".
Основни функции на парсера са:
• ParseTag - по зададено име таг, връща списък с възли от съответния тип;
• ParseAttribute - по зададено име на атрибут, връща списък с възли съдържащи съответния атрибут;
• ParseNext - извършва обхождане до следващия елемент.
След първоначалното генериране на DOM модела, той се преобразува до модел, подходящ за мобилно представяне чрез отзивчив дизайн. В повечето случай това е свързано с премахването на почти всички CSS стилизации и целият JavaScript код. Определени елементи е необходимо да се обработят допълнително, за да се определят коректно атрибутите или съдържанието им. Примери за това са:
• Мета таг <meta>. Освен ясно декларираните атрибути, които са определени в стандарта на езика, всеки програмист може да добави допълнителни такива. За да извлечем допълнителните атрибути използваме следния регулярен израз: <meta .*?>|<META .*?> .
• Хипервръзка <a>. Примерен регулярен израз за обработката му е <a .*(href=\""(.*)\"")>(.*?)\<Va\>. В този случай, при намирането на елемента извличаме и хипервръзката, с цел по-лесната следваща обработка.
СЕМАНТИЧЕН АНАЛИЗАТОР НА MOBILES ONLINE
Основен проблем при анализ на десктоп страници е разпознаването на навигационните менюта. Съществуват множество различни подходи, реализирани от програмистите в различни периоди от развитието на уеб. В HTML5 менютата се описват в таг <nav>, но при по-рано създадените уеб страници такъв HTML елемент не е съществувал. Върху оригиналната версия на DOM обекта (преди премахване на стиловете) прилагаме евристични алгоритми за определяне на различни организации на менюта:
• обхождане на таг <nav>;
• обхождане на таг <div> с css class „nav";
• обхождане на таг <div> с css class „menu";
• обхождане на таг <ul> и <ol> с css class „menu" и др.
По-добър, също евристичен подход, е свързан с проследяването на няколко вътрешни хипервръзки и генерирането на обектен модел за съответните им страници. Множеството на съдържащите се във всички модели хипервръзки в повечето случаи определя менюто на сайта. За съжаление, това решение изисква повече памет и процесорно време. Бъдещи проблеми като нарастващ брой заявки, голям обем съхранявани данни и тежки операции по конвертирането могат да бъдат разрешени с използването на облачен хостинг или друга децентрализирана система от сървъри.
ЗАКЛЮЧЕНИЕ
Адаптирането на създадените преди „мобилната ера" сайтове към съвременните изисквания за отзивчив дизайн е едно от основните предизвикателства пред разработчиците на уеб сайтове. Най-общо задачата може да се реши по два начина - пълно пренаписване на уеб сайта с цел изграждане на отзивчив дизайн или създаване на нова, мобилна версия на сайта. Компромисен вариант за потребителите на такива сайтове е използването на приложения - обвивки, които по зададен адрес на уеб страница автоматизирано генерират мобилна версия на уеб страницата, подходяща за разглеждане през конкретното използвано устройство.
Създаденият от нас прототип Mobiles Online, достъпен на адрес http://mobile.studentschool.eu, решава тази задача по съществено нов начин. Той се явява прокси сървър, който посредничи между клиента и реално заявените ресурси. Желаната страница се конвертира автоматично и невидимо за потребителя до мобилна версия, в която хипервръзките са пренаписани, така че се обръщат към адреси през прокси приложението.
Основна идея за бъдещо развитие на представената технология е преобразуването й до плъгин към мобилните браузъри, който може да бъде стартиран по желание на потребителя. При това, всяка заявка към уеб адрес автоматично ще бъде пренасочвана към приложението без нуждата от първоначалното му зареждане в браузъра.
Благодарности: Работата е частично финансирана от проект СП17-ФМИ-005 „Студентска школа за ИКТ иновации в бизнеса и обучението" и проект МУ17-ФМИ-007 „ИКТ в помощ на научните изследвания по математика и информатика и приложенията им" към Фонд „Научни изследвания" при Пловдивския университет „П. Хилендарски".
ЛИТЕРАТУРА
Baturay, М., Birtane, М., (2013), Responsive Web Design: A New Type of Design for Web-based Instructional Content, Procedia - Social and Behavioral Sciences, Vol. 106, pp. 22752279.
bMobilized. <http://www.bmobilized.com> (accessed 28.10.2017).
DOM Standard, (2017), <https://dom.spec.whatwg.org/> (accessed 28.10.2017).
Duda. <https://www.duda.co> (accessed 28.10.2017).
goMobi. <https://www.gomobi.info> (accessed 28.10.2017).
Google. Mobile-Friendly Test Tool. <https://search.google.com/test/mobile-friendly> (accessed 28.10.2017).
Kim, B., (2013), Responsive web design, discoverability, and mobile challenge, <https://journals.ala.org/index.php/ltr/article/view/4507> (accessed 28.10.2017).
Marcotte, Е., (2010), Ethan Marcotte Blog, <https://ethanmarcotte.com> (accessed 28.10.2017).
Marcotte, E., (2011), Responsive Web Design, A Book Apart Publ., ISBN: 9780984442577.
Marcotte, E., (2015), Responsive Design: Patterns & Principles, A Book Apart Publ., ISBN: 978-1937557331.
Mobify. <https://www.mobify.com> (accessed 28.10.2017).
Mobile Friendly Check. <https://www.seocentro.com/tools/seo/mobile-friendly.html> (accessed 28.10.2017).
Mobile SEO. <https://varvy.com/mobile/> (accessed 28.10.2017).
mobiReady. <https://ready.mobi/> (accessed 28.10.2017).
Mohorovicic, S., (2013), Implementing responsive web design for enhanced web presence, 36th International Convention on Information & Communication Technology Electronics & Microelectronics (MIPRO), 20-24 May 2013, Opatija, Croatia.
Nebeling M., Norrie M., (2013), Responsive Design and Development: Methods, Technologies and Current Issues. Web Engineering. ICWE 2013. Lecture Notes in Computer Science, vol 7977. Springer, Berlin, Heidelberg.
Rachovski, T., S. Hadzhikoleva, E. Hadzhikolev, (2017), Conceptual Model of an Application for Automated Generation of Webpage Mobile Versions, Tem Journal Vol.6, No.4, 2017 (in print).
Rachovski, T, St. Hadzhikoleva, E. Hadzhikolev, (2017), Software Tools for Automated Analysis and Generation of Website Mobile Versions, International Conference on Technics, Technologies and Education ICTTE 2017, Yambol, Bulgaria, October 19-20, 2017 (in print).
SAX Standard, (2004), <http://www.saxproject.org/> (accessed 28.10.2017).
Snapmobl. <https://snapmobl.com/en/>(accessed 28.10.2017).
Wikipedia, (2017), Web browser, <https://en.wikipedia.org/wiki/Web_browser> (accessed 28.10.2017).
WompMobile. <http://www.wompmobile.com> (accessed 28.10.2017).
W3C (2017), CSS Multi-column Layout Module Level 1, W3C Working Draft, <https://www.w3.org/TR/css-multicol-1/> (accessed 28.10.2017).