Анализ современного состояния и тенденций в разработке сайтов спортивной тематики

Размещено на http://www.allbest.ru/

Статья по теме:

Анализ современного состояния и тенденций в разработке сайтов спортивной тематики

А.К. Тарасов, М.Б. Суханов, Санкт-Петербургский государственный университет промышленных технологий и дизайна

Исследована частота применения различных ИТ-технологий создания сайтов спортивной тематики. Выявлены тенденции, рассмотрены достоинства и недостатки создания таких сайтов.

Ключевые слова: сайты спортивной тематики, web-сайт, фреймворк, CMS, SaaS, HTML, CSS, JavaScript, PHP

The frequency of application of various it technologies for creating sports-related websites is studied. Tendencies are revealed, advantages and disadvantages of creation of such sites are considered.

Keywords: sports websites, website, framework, CMS, SaaS, HTML, CSS, JavaScript, PHP

В современном обществе, где повсеместно используются различные информационные технологии, невозможно представить спортивные организации без своих собственных сайтов.

Наличие данных интернет-ресурсов дает ряд очевидных преимуществ:

демонстрация уровня успешности и престижности организации;

создание ей необходимого уровня конкурентоспособности;

предоставление возможности наиболее полно описывать определённый вид деятельности и реализуемые услуги;

организация эффективной взаимосвязи с пользователями интернет-ресурса (которыми выступают болельщики и спортсмены, клиенты и журналисты).

При создании популярного веб-сайта спортивной тематики важнейшую роль играет качество работ по web-разработке и web-дизайн, поскольку создание внешнего вида и функционала сайта являются наилучшими маркетинговыми средствами для привлечения новых пользователей и клиентов, повышения уровня позиционирования.

Раньше разработка веб-сайта в сети Интернет основывалась на написании кода с применением различных языков разметки и программирования (HTML, CSS, JavaScript, PHP и т. д.). Однако развитие информационных технологий стимулировало к возникновению различных платформ для разработки сайтов, что помогло существенно упростить их создание. Соответственно, в настоящий момент наиболее актуальная проблема при создании сайтов и web-приложений связана с выбором инструмента и технологии для разработки.

Выбор платформы напрямую влияет на качество и скорость реализации необходимого функционала, а также на дальнейшее развитие web-проекта. На текущий момент выделяют три наиболее популярные платформы [1] для создания сайтов:

Системы управления сайтом (Content Management Systems, CMS);

фреймворк;

SaaS (SoftwareasaService - программное обеспечение как услуга).

Соответственно, перед разработчиками сайтов встает проблема выбора

технологий, которые в перспективе будут являться оптимальным решением для реализации веб-проектов.

В проведенном исследовании было проанализовано 63 сайта спортивной тематики, которые были сгруппированы по следующим категориям:

Рис. 1 - Частота использования технологий CMS, фреймворков, SaaS при разработке сайтов спортивной тематики

Виды спорта;

Стадионы;

Фитнес-центры;

Спортивные издания и новостные порталы.

Согласно данным, представленным на рис. 1, при реализации сайтов спортивной тематики наибольшей популярностью среди разработчиков и владельцев ресурсов пользуется технология CMS(51%).

Данная тенденция объясняется тем, что описанные системы управления являются универсальными, то есть с помощью них предоставляется возможность сборки как информационных сайтов, так и интернет-магазинов или порталов. Также несомненное преимущество данной технологии заключается в том, что у разработчиков есть возможности для модернизации сайтов путем изменения кода.

С незначительным отставанием от CMSпо популярности идет технология фреймворк (49%). Фреймворк в веб-разработке - это программный продукт, который позволяет упростить создание и поддержку технически сложного или нагруженного проекта благодаря наличию только базовых программных модулей, а все специфичные для проекта компоненты реализуются разработчиком на их основе. Используя данный функционал, достигается высокая скорость разработки без влияния на высокую производительность и надёжность решений, что выгодно отличает решения, реализованные с помощью технологии фреймворк, от CMSи самописных систем.

При создании сайтов спортивной тематики, рассмотренных в исследовании, не применялась технология SaaS. SaaS-платформы (SoftwareasaService - программное обеспечение как услуга) - это способ предоставления ПО на арендной основе. Соответственно, при использовании данной технологии пропадает необходимость в покупке CMS или заказе на разработку, необходимо только провести работы по конфигурации выданного поставщиком сайта под свои потребности и ежемесячно осуществлять абонентскую плату.

Решения, которые разрабатываются на данных платформах, имеют шаблонный дизайн (как правило, с не очень высоким качеством), что негативно сказывается на имидже компании в связи с отсутствием уникальности. Более того, SaaS ограничены жесткими рамками функциональных возможностей (отсутствует возможность для настройки продукта под индивидуальные пожелания), что не позволяет масштабировать систему. Еще одним отрицательным фактором является низкая производительность, соответствующая сайтам на виртуальном хостинге, которые для работы используют неоптимизированную коробочную CMS. Совокупность вышеописанных недостатков стало основной причиной по которой разработчики и владельцы ресурсов стали значительно реже использовать данную технологию для реализации сайтов.

В определенный момент, когда разработчик сталкивается с необходимостью принять решение о выборе технологии для создания сайта спортивной тематики (CMS, SaaSили фреймворк), перед ним возникает непростая задача - из множества решений, которые представлены на рынке, выбрать наиболее подходящее и применимое к реализуемому проекту.

Если более подробно говорить о CMS(рис. 2), то наибольшим спросом пользуются три решения:

1С-Битрикс (9 сайтов спортивной тематики, реализованных по данной технологии - 14,29% от общего количества сайтов, рассмотренных в исследовании);

WordPress (8 сайтов - 12,7%);

Drupal (6 сайтов - 9,52%).

CMS

Рис. 2 - Частота использования CMS при разработке сайтов спортивной тематики

Если говорить о системе 1С Битрикс [2] как о лидере среди CMS систем при разработке сайтов спортивной тематики и одном из лидеров на рынке в целом, то она имеет ряд преимуществ и недостатков.

Основными преимуществами данной CMS системы являются:

Использование готовой системы интернет-магазина с интеграцией с 1С при условии покупки редакции «Бизнес» и возможности для настройки 1С в зависимости от необходимости;

Возможность организации работы сайта на уровне готовых компонентов, контроля заказов и хранения информации о продукции или услугах в программе 1С;

Использование режима редактирования контента на стороне пользователя благодаря включения режима правок;

Применение большого выбора стандартных настроек из готового пакета;

Наличие относительно удобного внутреннего текстового редактора;

Упрощение продвижения сайта благодаря наличию seo-модуля;

Предотвращение хакерских атак и попыток взлома сайтов за счет более сильной по сравнению с бесплатными cms система безопасности.

К недостатка системы 1CБитрикс можно отнести:

Реализация дополнительных компонентов и сторонних модулей осуществляется посредством внутреннего магазина (marketplace) и в основном за деньги;

Низкая отказоустойчивость в связи с проблемами по выдержки больших нагрузок на простых хостингах;

Необходимость раз в год осуществления платного обновления системы по лицензии с возможностью некорректной работы системы после обновления;

Высокая стоимость услуг специалистов по Bitrixв связи с нехваткой компетентных программистов по данному продукту;

Интерфейс внутренней административной панели удобен в первую очередь программистам, а не непосредственно пользователям.

Еще одним из лидеров рейтинга является Wordpress[3], который представляет собой систему управления контентом с открытым исходным кодом, которая написана на языке PHP. Ключевой отличительно особенностью от описанного ранее 1CБитрикса является его бесплатность.

Помимо вышесказанного к основным преимуществам Wordpress относят:

Наличие достаточно большого выбора шаблонов для настройки;

Возможность быстрой установки;

Использование понятной и простой админ-панель управления;

Расширение за счет большого выбора доступных дополнений и плагинов;

Наличие большого количества открытой информации по работе с продуктом благодаря его популярности;

Наличие возможности внесения изменений в код шаблона;

Достаточная защищенность системы от заражений в связи с оперативной работой разработчиков по устранению уязвимостей и простой системе установки официальных обновлений.

К недостаткам Wordpress стоит причислить следующее:

Наличие достаточно весомой нагрузки на сервер, что возможно уменьшить за счет сокращения количеств установленных плагинов до необходимого минимума и размещения блога на качественном хостинге;

Проблемы с низкой скоростью загрузки сайта, которые частично устраняются благодаря оптимизации базы данных и использования плагина для кэширования страниц;

Ограниченность набора базовых функций;

Возможность дублирования страниц и изображений на сайте;

Наличие большого количества тем с ошибками и некачественных дополнений;

Возможность относительного недоверия поисковых систем к сайтам на бесплатных CMS системах.

Таким образом, на начальном этапе возможности ваших ресурсов ограничиваются набором функций, заложенных в основу движка с и установленных шаблонов. Благодаря использованию плагинов расширяются функциональные возможности системы, однако их слишком большое количество уменьшает скорость работы сайта. В случае с бесплатной CMS системой данная проблема решается за счет внесения изменений в файлы шаблона, добавление новых функции посредством редактирования кода, что требует соответствующих навыков или услуги специалистов.

сайт технология спортивный тематика

Рис. 3 - Частота использования фреймворков при разработке сайтов спортивной тематики

Основная тенденция при реализации сайтов спортивной тематики заключается в использовании технологий фреймворк, а именно в применение двух наиболее популярных в настоящее время - Angularи Bootstrap, рис. 3.

Лидирующий JSфреймворкAngular[4] представляет собой технологию, которая предоставляет возможность использовать инструменты для создания веб-приложений, а также задает дизайн приложений и организацию кода, при этом поддерживается на различных платформах (веб, мобильных устройств, нативных десктопах).

Основные преимущества Angular:

В Angularиспользуются не только инструменты, но и шаблоны дизайна с целью создания обслуживаемых проектов, что позволяет избежать путаницы с классами и методами, с которыми могут возникнуть сложности с правкой и тестирование, благодаря чему код становится удобно структурирован;

Построение Angularосновано на TypeScript, полагающегося на ES6, в связи с чем отсутствует необходимость в полном изучении новых языков. За счет этого пользователю становится доступна функция типа статической типизации, интерфейсы, классы, пространства имен, декораторы и т.д.;

Angular содержит большое количество инструментов для создания приложений, а за счет использования директив, HTML элементы могут становиться динамически. Form Control позволяет усилить формы представляет многочисленные правила валидации. Например, можно осуществлять отправку асинхронных HTTP запросов различных типов и настройку маршрутизации.

В Angular практически полностью отсутствует жесткая связь между компонентами приложения, т.е. компоненты разъединены, а легкая замена компонентов осуществляется по аналогии с NodeJS;

Angular делает акцент на проведении тестов, благодаря чему он проходит тщательное тестирование и осуществляет поддержку юнит тестов и сквозных тестов с использования инструментов типа Jasmineи Protractor.

Таким образом, Angular представляет собой не просто фреймворк, а платформу разработки приложений для веба, мобильных устройств и десктопов.

К сожалению, Angular является довольно большим и сложным фреймворком со своей философией. Для его грамотного использования пользователю необходимо быть знакомым с множеством дополнительных технологий:

Знать TypeScript или, в крайнем случае, писать код на современном JS (ES6), который реже используется;

Понимать AngularCLI для ускорения процесса разработки;

Знать npmдля установки Angular и различных компонентов;

Осуществлять настройку taskrunners типа Gulp или Grunt для выполнения действий перед развертыванием приложений в production;

Понимать и уметь использовать минификаторы типа UglifyJS и упаковщики типа Webpack;

Применять инструменты отладки типа Augury для возможности отлаживать код во время разработки приложений;

Осуществлять тестирование приложение Angular за счет самых популярных инструментов для проведения тестов - Jasmine(фреймворк для тестирования) и Protractor(для сквозного тестирования).

Стоит обратить внимание, что использование Angular для приложений может быть излишним в зависимости от размера объекта. Если он небольшой, без сложного UI и взаимодействий, есть вероятность, что больше подойдет обычный JS. В связи с этим ключевым становится оценка всех требований, функций новый приложений и дедлайнов перед принятием финальных решений о применении JSфреймворка.

Идущий на втором месте Bootstrap[5] основан на применении готовых стилей и скриптов, которые можно использования всего лишь за счет прописывания необходимых стилевых классов и атрибутов html-элементов.

Основные преимущества Bootstrap:

Bootstrapкак фреймворк позволяет очень просто реализовывать возможности кроссбраузерности и адаптивности;

Верстка на bootstrap осуществляется в разы быстрее, а благодаря единообразию кода любой участник команды может вносить правки в ваш код;

Наличие большого количества русскоязычных сообществ и грамотной документации на русском языке, благодаря чему для Bootstrap возникло множество новых шаблонов с переделанным дизайном для всех основных элементов.

К ключевым недостаткам Bootstrap можно отнести следующие моменты:

В связи с тем, что в Bootstrap заложен весь возможный функционал, то при самостоятельной реализации только необходимый задачи появляется избыточность кода. При этом данную проблему возможно решить за счет выбора загрузки необходимых компонентов фреймворка в CSS-файл;

Второй недостаток заключается в шаблонном дизайне элементов, но данную проблему возможно решить при кастомизации компонентов фреймворка под себя взамен использования только готовых компонентов.

При создании сайтов важно учитывать ряд факторов, влияющих на их популярность. В связи с этим необходимо обращать внимание на позицию сайтов в различных мировых рейтингах, а также на технологии их создания.

Одним из наиболее известных и популярных рейтингов сайтов является AlexaRank[6], представляющий собой статистическую систему построения рейтинга вебресурсов, которая основывается на учете количества посетителей и просмотров web-страниц за последние 3 месяца. Стоит отметить, что система ранжирования строится таким образом, что показатель 1 является максимально возможным показателем (т.е. чем ниже рейтинг вашего сайте в AlexaRank, тем это лучше).

Рейтинг AlexaRank наиболее актуален для тех, кто стремится к монетизации своего веб-ресурса благодаря размещению на нем рекламных блоков и продажи мест под ссылки.

Рекламодатели и пользователи услуг бирж ссылок, выбирая площадки для размещения новых объявлений (не учитывается контекстная и тизерная реклама) обращают внимание на AlexaRank наравне с его тИЦ (тематический индекс цитирования Яндекса) и PR(от англ. Page-страница, Rank-ранг, показывает авторитет каждой отдельной страницы сайта в поисковой системе Google). Стоит учитывать, в связи с официальным прекращением обновления PR, в ближайшее время выбор площадок будет основываться на двух показателях, одним из которых станет AlexaRank.

Для понижения рейтинга в AlexaRank, а, значит, для улучшения позиций, необходимо выполнения ряда действий:

Установить расширения со счетчиком AlexaRank в свой браузер и запрос на осуществление аналогичных действий как можно большего количества посетителей целевого сайта;

Привлекать иностранных посетителей благодаря созданию языковой версии сайта с высокой вероятностью того, что среди них будет много пользователей с необходимым установленным расширением;

Привлекать на сайт посетителей, связанных со сферой сайтостроения и продвижения сайтов.

Рис. 4 - Технологии, используемые при создании сайтов спортивной тематики с рейтингом Alexa Rank <= 50000

Всего в исследовании представлено 19 сайтов (30,16% от общего количества сайтов, рассмотренных в исследовании), имеющие рейтинг согласно AlexaRank меньший либо равный 50000 по состоянию на 04.12.2018, рис. 4.

Как видно из рис. 4, наибольшее представительство среди сайтов, имеющих рейтинг согласно AlexaRank меньший либо равный 50000, имеют сайты, разработанные на фреймворке Angular(6 сайтов - 9,52%). В том числе сайт популярного спортивного издания Marca (https://www.marca.com/), занимающий в AlexaRank наивысшее место среди всех сайтов спортивной тематики, рассмотренных в исследовании - 459 место - был создан с применением данной технологии. 6 сайтов было реализовано с применением CMSDrupal и фреймворка Bootstrap(по 3 сайта (4,76%) с использованием каждой из технологии), что ползволяет сделать вывод о том, что для реализации качественного и популярного сайта данные технологии являются хорошим решением.

Из полученных результатов видно, что большинство спортивных сайтов (12 из 19) с высоким рейтингом AlexRank были созданы с применением технологии фреймворк, и лишь 7 - с CMS.

Таким образом, можно сделать выводы, что технологии CMS и фреймворк практически в равной степени популярны при выборе решения для создания сайтов спортивной тематики, что нельзя сказать о технологии SaaS, по который не был реализован ни один сайт из 63, рассмотренных в исследовании. Установлено, что большинство сайтов, занимающих высокие места согласно мировым рейтинговым система сайтов, были созданы с применением технологии фреймворк, которая хоть и является более сложной, но в то же время отличается максимальной гибкостью.

Список литературы

1. Рындина А.С. Выбор платформы для разработки web-сайта // Вестник современных исследований. 2017. № 10-1 (13). С. 103-107.

2. Плюсы и минусы разработки сайта на Битрикс. URL: https://itargency.ru/stati/plusy-minusy-bitrix(дата обращения: 05.03.2019)

3. Преимущества и недостатки Ворд пресс. URL: https://pro-wordpress.ru/poleznoe/preimushhestva-i-nedostatki-vordpress.php (дата обращения: 06.03.2019)

4. Введение в Angular. URL:https://webformyself.com/vvedenie-v-angular-chto-eto-za-frejmvork-i-zachem-ego-ispolzovat(дата обращения: 07.03.2019)

5. Что такое Bootstrap. URL: https://webformyself.com/chto-takoe-bootstrap(дата обращения: 07.03.2019)

6. SEOАкадемия. URL: https://seo-akademiya.com/baza-znanij/osnovyi-seo/alexa- rank-sajta(дата обращения: 08.03.2019)

7. Ryndina A.S. Vyborplatformydlyarazrabotki web-sajta// Vestniksovremennyhissledovanij. 2017. No 10-1 (13). 103-107 pp. (in Rus.).

8. PlyusyiminusyrazrabotkisajtanaBitriks. URL: https://itargency.ru/stati/plusy-minusy-bitrix[Pros and cons of developing site on Bitrix].

9. PreimushchestvainedostatkiWordpress. URL: https://pro-wordpress.ru/poleznoe/preimushhestva-i-nedostatki-vordpress.php [Advantages and disadvantages of Wordpress]. (date accessed: 06.03.2019)

10. Vvedenie v Angular. URL: https://webformyself.com/vvedenie-v-angular-chto-eto- za-frejmvork-i-zachem-ego-ispolzovatr [Introduction to Angular].

11. Chtotakoe Bootstrap. URL: https://webformyself.com/chto-takoe-bootstrap [What is Bootstrap]. (date accessed: 07.03.2019)

12. SEO Akademiya. URL: https://seo-akademiya.com/baza-znanij/osnovyi-seo/alexa- rank-sajta [SEO Academy]. (date accessed: 08.03.2019)

Размещено на Allbest.ru