CC BY
87
Input data for the method is a set of well-known testing techniques. As part of the solution of the problem a set of characteristics is formed and evaluated by the group of experts in the field.
In this paper, a method for the optimal set of accounting methods for effective testing of web resources based on a survey of experts in the field, is proposed.
To solve this problem we must solve some specific issues:
- finding the optimal set of test methods for specific cases of the website based on a survey of experts in the field of testing and applying multi-criteria optimization;
- developing an algorithm of test methods to ensure the highest quality web resource
Keywords: software, testing, Pareto optimization, testing method
Представлено аналтичне дослиджен-ня новттх технологш WEB-дизайну, ана-лiз основних алгоритмiв просування сайтiв та гх практична реалiзацiя у виглядi тте-рактивного мультимедшного навчального поыбника «HTML5/CSS3, JavaScript/SEO. Розробка сучасних сайmiв»
Ключовi слова: ттернет-технологи, динамiчна графша, ттерфейс, методи пошуковог оптимiзацiг, ранжування сай-тiв
□-□
Представлено аналитическое исследование новейших технологий WEB-дизайна, анализ основных алгоритмов продвижения сайтов и их практическая реализация в виде интерактивного мультимедийного обучающего пособия «HTML5/CSS3, JavaScript/SEO. Разработка современных сайтов»
Ключевые слова: интернет-технологии, динамическая графика, интерфейс, методы поисковой оптимизации, ранжирование сайтов -□ □-
УДК 004.89
ИССЛЕДОВАНИЕ НОВЕЙШИХ ВЕБ-ТЕХНОЛОГИЙ И АЛГОРИТМОВ ПРОДВИЖЕНИЯ САЙТОВ
И.Н. Егорова
Кандидат технических наук, доцент Кафедра мультимедийных систем и технологий* Контактный тел.: (057) 702-13-78 E-mail: irinaiegorova@gmail.com Е.А. Бондаренко Кафедра медиасистем и технологий* Контактный тел.: 099-420-88-64 Е-mail: lena.guz@mail.ru *Харьковский национальный университет радиоэлектроники пр. Ленина, 16, г. Харьков, Украина, 61166
1. Введение
Технологии создания клиентского интерфейса, а именно HTML5, CSS3, JavaScript,- представляют большой интерес в области современной WEB-разработки, так как позволяют значительно расширить функциональные возможности WEB-страниц, поддерживают работу с новейшими мультимедийными приложениями, при этом сохраняя легкость чтения кода пользователем и ясность исполнения компьютером.
HTML5 - является перспективным направлением развития интернет-технологий. Семантическая разметка, структурные теги, динамическая графика, геолокация, добавление видео без использования сторонних плагинов, таких как Flash и QuickTime - вот то, что позволило создать новый ориентир в сфере разработки клиентского интерфейса, как для Web, так и для мобильных приложений.
Такое многообразие новых возможностей особенно в сфере web -графики порождает ряд вопросов об особенностях их применения, и в частности:
©
- интеграция с давно прижившимися web-техно-логиями;
- целесообразность использования динамической графики средствами HTML5 в том или ином проекте,
- возможности современных браузеров в поддержке столь перспективного направления web-проектиро-вания;
- пути решения проблемы восприятия HTML5-тех-нологий некоторыми браузерами (InternetExplorer).
Даже самый красивый, информационно-полезный и удобный сайт, разработанный в соответствии с новейшими тенденциями и технологиями web - проектирования, нуждается в соответствующем продвижении.
Поисковая оптимизация представляет собой комплекс мер для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей.
Обычно чем выше позиция сайта в результатах поиска, тем больше заинтересованных посетителей его посетит.
Процесс определения порядка согласно рангу и релевантности, результат которого пользователь видит, получая ответ поисковой системы на свой запрос, называется ранжированием.
При этом каждая поисковая система проводит ранжирование по своим принципам в зависимости от определенных факторов.
Соответственно, возникает необходимость определения наиболее рационального и эффективного способа поисковой оптимизации сайта таким образом, чтобы учесть особенности используемых фильтров и алгоритмов ранжирования ведущих поисковых систем.
Таким образом, работа, направленная на аналитическое исследование новейших технологий Web-про-ектирования и анализ основных алгоритмов продвижения сайтов, представляется актуальной.
2. Цель и задачи исследования
Целью работы является исследование новейших технологий WEB-проектирования, анализ основных алгоритмов продвижения сайтов и их практическая реализация в виде интерактивного мультимедийного обучающего пособия «HTML5/CSS3/ JavaScript/SEO. Разработка современных сайтов».
Предметом исследования в работе являются технологии WEB-проектирования HTML5/CSS3/ JavaScript и методы поисковой оптимизации SEO.
Объектом исследования являются web-технологии и поисковая оптимизация сайтов.
Для достижения поставленной цели необходимо решить целый комплекс задач.
Так, проведение анализа возможностей языка HTML5, предоставляемых Web-разработчику, предполагает следующие этапы:
- анализ обновленной структуры HTML-кода, определение преимуществ новых элементов объектной модели документа (DOM);
- обзор возможностей создания динамических страниц посредством HTML5;
- осуществление сравнения методов и технологий создания интерактивной Web-графики в HTML5 - Canvas и SVG (Scalable Vector Graphics);
- определение наиболее целесообразных сфер применения технологий Canvas и SVG для Web-проек-тирования и разработка рекомендаций для новых и опытных разработчиков по применению той или иной модели графики в HTML5;
- анализ поддержки браузерами функциональных возможностей HTML5, а именно CSS3 свойств и селекторов, HTML5 форм ввода, атрибутов и аудио/видео кодеков, а также внедренного контента, такого как canvas, audio, video.
Анализ методик поисковой оптимизации и алгоритмов продвижения WEB - сайтов предполагает следующие этапы:
- анализ методов поисковой оптимизации (белая, серая, черная);
- исследование механизма ранжирования поисковых систем;
- анализ ключевых факторов ранжирования;
- обзор разновидностей фильтров поисковой системы Google и анализ механизмов их работы;
- определение наиболее оптимального алгоритма поисковой оптимизации на основе проведенного аналитического исследования.
3. Исследование методов динамической графики, предоставляемых HTML5
В контексте данного исследования особое внимание хотелось бы обратить на методы проектирования web-графики, а именно - Canvas и Scalable Vector Graphics (SVG).
HTML эволюционирует, обеспечивая улучшенную и более насыщенную стандартную графику, что способствует повышению качества взаимодействия с пользователями. Это дает веб-разработчикам возможность использовать веб-технологии на основе стандартов для создания насыщенных графикой интерактивных сайтов и приложений, не прибегая к специализированным технологиям, или написать код для конкретного браузера.
Canvas и SVG - это две независимые технологии, хорошо дополняющие друг друга, хотя и различные по своей природе и происхождению.
Canvas - это растровый холст, на котором можно рисовать через специальный API для JavaScript, предоставляющий базовые возможности: отрисовку примитивов и текста, побитовый доступ к изображению, вывод изображений и афинные преобразования контекста отрисовки.
Язык SVG используется для описания масштабируемой векторной графики, которая представляет собой модель графики с сохранением отображаемых данных, она сохраняется в памяти модели, которой можно управлять с помощью результатов выполнения кода при повторном рендеринге. Этот принцип работы отличается от непосредственного режима (Canvas). Хотя SVG может выступать в виде изолированного файла, внимание первоначально уделяется его естественной интеграции с HTML.
Преимущества использования HTML5 Canvas:
- высокая производительность при отрисовке любых 2D объектов;
- стабильная производительность - всё есть пиксель. Производительность падает только при увеличении разрешения изображения;
- можно сохранить полученное изображение в PNG или JPG файл;
- лучше всего подходит для создания растровой графики (например, в играх, фракталов и т.п.), редактирования изображений и операций, требующих манипулирования на уровне пикселей.
Преимущества использования SVG:
- нет зависимости от разрешения - SVG лучше подходит для кроссплатформенных пользовательских интерфейсов, так как позволяет масштабировать изображение при различных разрешениях экрана;
- SVG очень хорошо поддерживает анимацию. Элементы могут быть анимированы с использованием описательного синтаксиса или с помощью JavaScript;
- можно получить полный контроль над каждым элементом, используя SVG DOM API в JavaScript;
- SVG хранится в формате XML, что предоставляет больше возможностей браузерам по обеспечению до-
ступности SVG документов по сравнению с элементом canvas. Таким образом, SVG выглядит лучшим решением для пользовательских интерфейсов веб-приложений.
Недостатки использования HTML5 Canvas:
- отрисовка основана на пикселях;
- не существует API для анимации. Вам придется прибегать к использованию таймеров и других событий для обновления канвы;
- слабые возможности по рендерингу текста;
- возможно, не самый лучший выбор, когда доступность имеет решающее значение. Канва предоставляет вам поверхность для рисования в выбранном контексте (2D и 3D). Можно указать альтернативный контент внутри элемента canvas, который будет показан браузером при невозможности отображения графики. Кроме того, вы можете выполнить проверку доступности выбранного Canvas API с помощью JavaScript. На основе этого вы можете обеспечить различную функциональность для пользователей браузеров с разной поддержкой HTML 5 Canvas;
- HTML 5 Canvas не подходит для создания вебсайтов или интерфейсов веб-приложений, так как пользовательские интерфейсы обычно должны быть динамическими и интерактивными, а Canvas требует от вас постоянной перерисовки каждого элемента в интерфейсе.
Недостатки использования SVG:
- низкая скорость рендеринга при увеличении сложности документа (рисунка), так как используется модель DOM
- скорее всего, SVG не подходит для таких приложений как игры. Возможно лучшим выбором будет комбинация HTML Canvas + SVG.
4. Исследование методов поисковой оптимизации
Поисковая оптимизация представляет собой комплекс мер для поднятия позиций сайта в результатах выдачи поисковых систем по запросам пользователей.
Методы поисковой оптимизации можно разделить на три класса: белую, серую и чёрную оптимизацию.
Белая оптимизация - оптимизаторская работа над ресурсом без применения официально запрещённых каждой поисковой системой методов раскрутки ресурса - без влияния на поисковые алгоритмы сайтов.
К серой поисковой оптимизации можно отнести добавление большого количества ключевых слов в текст страницы, зачастую в ущерб читабельности для человека.
К чёрной оптимизации относятся все методы, которые противоречат правилам поисковых систем. Ранжирование - это процесс определения порядка согласно рангу, респектабельности или релевантности, результат которого пользователь видит, получая ответ поисковой системы на свой запрос.
Основной задачей SEO-оптимизации является учет внутренних и внешних факторов ранжирования и определение совокупности методов, позволяющих попасть в начало списка выдачи в результате ранжирования поисковыми системами. При этом каждая поисковая система проводит ранжирование по своим принципам. Существуют различные поисковые фильтры,
целью которых является отсеивание некачественных сайтов. Данные фильтры постоянно совершенствуются и видоизменяются.
Определение основных факторов ранжирования поисковых систем и их весового коэффициента в процессе определения релевантности web-ресурса, а также аналитическое исследование механизмов работы поисковых фильтров являются залогом качественно и продуктивной SEO-оптимизации.
Ключевыми факторами ранжирования сайтов поисковой системой Google являются:
- траст и авторитетность домена. Факторы, которые могут уменьшить авторитетность домена: покупка и продажа, плохое, неестественный стиль роста, спам в комментариях, недостаточно разных ссылок, скудный или спамный;
- анкоры с внешних ссылок;
- ключевые слова в контенте. Контентом могут быть не только статьи, но и любая, в данном случае, текстовая составляющая документа, отображаемая в нём читателю;
- вес страниц, PageRank это числовая величина - мера "важности" страницы в поисковой системе Google. Зависит от числа внешних ссылок на данную страницу и от их веса (важности).
5. Практическая реализация результатов исследования
Практическая реализация, основанная на результатах проведенного аналитического исследования, представляет собой интерактивное пособие. Данное интерактивное пособие позволяет пользователю не только осуществить обзор наиболее интересных функциональных возможностей HTML5/CSS3 и JavaScript, но также стать непосредственным участником процесса формирования Web-графики - динамически модифицировать специально подготовленные фрагменты кода с целью изменения визуального отображения графических (статичных и анимационных) элементов.
Основными особенностями данного интерактивного пособия являются:
- теоретический обзор, представляющий собой экскурс в историю формирования языка гипертекстовой разметки вплоть до его последней версии - HTML5;
- структурированный анализ функциональных возможностей HTML5, позволяющих проектировать динамическую графику на страницах Web-сайтов и приложений;
- подборка обучающих интерактивных примеров графических Web-элементов, имеющих наибольшее практическое применение в сфере проектирования динамической Web-графики.
Программная реализация практической части включает создание клиентской и серверной частей. Разработка серверной части осуществляется с использованием технологий PHP и MySQL. PHP - мощный язык написания сценариев, обладающий рядом преимуществ по сравнению с аналогами: высокая производительность, наличие интерфейсов для СУБД, устойчивая поддержка объектно-ориентированного программирования, доступность исходного кода. MySQL является высокопроизводительной и надежной СУБД, которая хорошо интегрируется с РНР и ори-
ентирована на реализацию динамических Internet-приложений. Для создания клиентской части интерактивного обучающего пособия используются такие технологии, как HTML5, CSS3, JavaScript, jQuery, обеспечивая необходимую интерактивность, удобство и визуальную привлекательность продукта.
Данное пособие ориентировано на пользователей, знакомых с языком гипертекстовой разметки, имеющих опыт работы со скриптовым языком JavaScript и базовыми знаниями объектно-ориентированного программирования.
Планируемый срок службы данного интерактивного пособия является ограниченным, так как с течением времени новизна изложенных в нем материалов может потерять свою актуальность в связи с выходом в свет их обновленных версий, или с появлением новых, более совершенных технологий.
6. Выводы
В работе проведено исследование особенностей языка HTML5, наиболее важных его новшеств; проанализирована совершенно новая парадигма HTML5, не признающая подключаемых модулей; описан элемент Canvas HTML5; рассмотрено понятие масштабируемой векторной графики (SVG).
Осуществлено исследование поисковой оптимизации, определены ее основные методы, рассмотрены механизмы ранжирования сайтов поисковыми системами.
На основе анализа технологий производства динамической графики можно сделать вывод о сфере их применения. HTML 5 Canvas следует использовать для редактирования изображений: обрезки, изменения размеров, фильтров; создания растровой графики: визуализации данных, создания фракталов и графиков функций; анализа изображений: создания гистограмм и т.п.; создания игровой графики, такой как спрайты и фоны.
SVG следует использовать для создания пользовательских интерфейсов веб-приложений, независимых от разрешения экрана; высокоинтерактивных аними-рованных пользовательских интерфейсов; графиков и диаграмм; редактирования векторных изображений.
Основой для эффективного продвижения сайтов поисковых системах является учет факторов ранжирования. На примере анализа факторов поисковой системы Google, можно прийти к выводу, что достижение траста и авторитетность домена, обеспечение анкоров с внешних ссылок, использование ключевых слов в контенте, получение высокого веса страницы (PageRank) не противоречащее внутренним правилам поисковой системы является залогом высоких позиций сайта в выдаче результатов запроса.
Литература
1. Кошик А. Веб-аналитика 2.0 на практике. Тонкости и лучшие методики [Текст] / А. Кошик - «Диалектика», 2011- 528с.
2. Ледфорд Дж. Google Analytics 2.0 (Гугл Аналитикс): анализ веб-сайтов. Счётчик посещений и статистика сайта. Второе издание [Текст] / Дж. Ледфорд, М. Э. Тайлер - «Диалектика», 2008- 368с.
3. Дронов В.А. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. [Текст] / В.А. Дронов. - СПб.: БХВ-Петербург, 2011. - 416 с
4. Пилгрим М. Погружение в HTML5 [Текст] / М. Пилгрим - СПб: BHV, 2011. - 304с.
Abstract
Technologies for creation user interface, namely HTML5, CSS3, JavaScript, - are of great interest in modern WEB-design, because they can significantly extend the functionality of WEB-pages, supports the latest multimedia applications, while maintaining ease of reading the code for developer and clarity of performance for computers and devices. Search engine optimization is a set of measures to raise the site positions in search engine results for a particular search users. There is a need to determine the most efficient and effective way to search engine optimization so as to take into account the features of the filters used and the ranking algorithms of the leading search engines. Thus, the work aimed to an analytical study of the latest technology Web-design and analysis of the basic algorithms of promotion of sites seems to be actual. The aim of the analytical study conducted in the Master's work is the implementation of the comparison of methods and technologies for creating interactive Web-graphics in HTML5 - Canvas and SVG (Scalable Vector Graphics) and determine the most appropriate applications of technology in the Canvas and SVG Web-design and development of recommendations for new and experienced developers for use of a particular model of graphics in HTML5. As well as identifying key ranking factors Veduchi search, analysis of the mechanism of the search filters and determining the optimal algorithm of search engine optimization on the basis of the analytical study. Practical implementation based on Trials conducted an interactive multimedia training manual «HTML5/CSS3, JavaScript. Development of modern sites"
Keywords: Internet technology, dynamic graphics, user interface, search engine optimization, ranking sites
