государственное автономное профессиональное образовательное учреждение Чувашской Республики «Межрегиональный центр компетенций – Чебоксарский электромеханический колледж» Министерства образования и молодежной политики Чувашской Республики
Дисциплина, МДК
МДК 08.01 Проектирование и разработка
интерфейсов пользователя
КУРСОВОЙ ПРОЕКТ
Разработка, продвижение и оптимизация форума по
трилогии игр, книг, сериалов «The Witcher» КП.Ир5-18.11.МДК.08.01.00.ПЗ
Выполнил студент 4 курса, группы Ир5-18
Петров Даниил Михайлович.
(Фамилия И. О.) (подпись) (чч.мм.гггг)
Преподаватель Федорова Л.В.
(Фамилия И. О.)
Защищен
(чч.мм.гггг)
с оценкой Подпись Федорова Л.В.
(подпись) (расшифровка подписи)
2021
СОДЕРЖАНИЕ
Введение 3
1 Аналитическая часть 5
1.1 Анализ предметной области 5
1.2 Составление портрета целевой аудитории 7
1.3 Анализ рынка программных продуктов 8
1.4 Выбор программного обеспечения для разработки сайта 14
2 Конструкторская часть 16
2.1 Разработка структуры сайта 16
2.2 Прототипирование сайта 17
2.3 Создание макета дизайна сайта 18
3 Технологическая часть 22
3.1 Техническая реализация проекта 22
3.2 Технология обработки контента 26
3.3 Тестирование проекта 28
3.4 Продвижение проекта 30
Заключение 33
Список использованных источников 34
Приложение А – Техническое задание по проекту 35
ВВЕДЕНИЕ
Данный дипломный проект посвящен разработке сайта–форума по играм, киноадаптациям книг «Ведьмак».
Для решения проблемы поиска достоверной информации существуют сайты с определенными тематиками и соответствующим содержимым (программирование, кулинария, медицина и др.). Благодаря тому, что чаще всего информация, которая на них опубликована, составлена компетентными людьми, такую информацию можно считать достоверной. Но одинаковых по тематике сайтов очень много, они различны по интерфейсу, способу использования и возможностей доступа (к примеру, чтобы скачивать файлы необходимо регистрироваться)
Объединив информацию по различным тематикам и обеспечив простоту поиска, пользователю дается возможность оставлять свой комментарий и получать бонусы за хороший и достоверный ответ, тем самым упрощается задача в долгом суммировании материала и отыскивании нужной информации на просторах Интернета. Любой веб – сервис является услугой, будь то веб–почта или хранение документов, но, как и любая другая технология, он имеет довольно четко очерченную среду применения.
Существует множество тематических агрегаторов обзоров, такие как:
– Ответы@mail.ru, направленный на организацию системы вопрос–ответ в различных сферах;
– Afisha.ru, направленный на обзоры событий, которые происходят в городе, определённых мест и другое;
– Mobile–review.com, направленный на обзоры мобильных телефонов и техники;
– Imdb.com, направленный на обзоры фильмов в мире.
Данный проект объединяет лучшие качества этих сервисов, а также предоставляет возможности создания обзоров в любых отраслях и темах. Что позволит большему количеству аудитории использовать разрабатываемый web–сервис.
Данный проект является по своей сути инновацией, чья практическая значимость очень велика. Представьте себе, насколько легче будет принять решение о покупке, скажем, автомобиля, если компетентный в данном вопросе пользователь четко и ясно разъяснит Вам о плюсах и минусах интересующей Вас модели.
Цель выполнения курсового проекта состоит в том, чтобы произвести разработку сайта–форума, а так же привлечения аудитории на данный сайт
Для осуществления обозначенной цели служат следующие задачи:
–Проанализировать предметную область конкурентов и целевой аудитории;
– Разработать структуру и дизайн проекта;
– Сверстать по разработанному макету сайт;
– разработать серверную часть сайта;
– Оптимизировать сайт под поисковые системы ;
1 Аналитическая часть
Не смотря на огромное внешнее разнообразие форумов, в основе их лежат единые принципы организации, администрирования, модерирования и пр. Также разнообразию форумов не способствует и то, что в Интернете широко распространены бесплатные заготовки, на основе которых за минимальное время, практически не имея знаний о языках программирования, можно разместить на своем сайте форум любой сложности, радующий глаз своей красотой и функциональностью. Таким образом, у рядового пользователя сложилось уже определенное мнение о том, как должен выглядеть форум и какие возможности он должен предоставлять. В этом случае представляется неразумным отступать от канонов – необычный внешний вид, оригинальное расположение элементов управления, – все это может лишь отпугнуть пользователя. Так как в рамках дипломной работы трудно конкурировать с профессиональными программными продуктами, разрабатывающимися десятком программистов в течение нескольких лет, было решено не гнаться за дополнительными функциями, а сосредоточить внимание на интуитивно понятном интерфейсе, максимальной производительности и определенном уровне безопасности.
1.1 Анализ предметной области
Целью дипломного проекта является проектирование и разработка форума “Игры и фильмы, созданные по мотивам из книг”
Веб–форум это рыночная площадь в стиле того самого Foro Romano, в честь которого форумы названы, здесь люди друг с другом разговаривают, спорят, ругаются, торгуются и в любую минуту могут перейти к другой группке людей, или к третьей, потом вернуться назад, обширное сообщество людей, в котором проявляются умения и знания в определенной области.
Общение в наше время уверенно уходит во всемирную сеть. Такова сейчас мировая тенденция. Точно так же, как и в реальности, в интернете существуют свои правила, которые люди обязаны соблюдать. В нашем мире, где каждому человеку нужна помощь, нужно уметь правильно преподать решение проблемы. Для этого потребуется, в первую очередь, показать все достоинства сайта, чтобы пользователь действительно заинтересовался вашим сайтом. Для обсуждения и решения определенных вещей идеально подходит всемирная паутина. В интернете наверняка есть целевая аудитория, которая разбирается в определенном теме лучше чем кто–либо.
Веб–форумы выручают многих людей, которые в определенный период своей жизни столкнулись с ситуацией, на которой нету ответов и подсказок. Посетители сайта связующее звено между участниками, средство, с помощью которого пользователями могут ознакомиться с ранее решенными вопросами, но так же и пользователь в любое время сможет в любой момент решить свою проблему.
Часто веб–форумы используются в качестве, источника информации и, соответственно, в целях общения. Онлайн–аудитория каждый год увеличивается. Люди все больше начинают осознавать, что в интернете перед человечеством открываются необъятные возможности. Сегодня Всемирная сеть это не только платформа для развлечений, но и для обсуждения нужной информации.
Веб–форум можно сравнивать с клубом по интересам в котором каждый сможет:
обменяться стратегией боя;
выяснить где можно загрузить обновление к игре;
узнать кто является главным антагонистом;
услышать критику новой сборки и получить твердое подтверждение от умов интернета;
1.2 Составление портрета целевой аудитории
Вася – 14 лет, учится в школе, проживает в городе.
Доходы: деньги дают родители.
Заядлый игроман постоянно играет во что–то, следует трендам из интернета постоянно обсуждает игры. По задумке сайт даст Васе информацию о игре «Ведьмак» подсказки, гайды, как играть за персонажа. Он сможет использовать данный сайт сам так чтобы в нем было все понятно и доступно. Вася не сможет запутается, но если запутается, то он обратиться за помощью к родителям. Предпочитает игры данной трилогии и жанр данной игры .
Олеся – 18 лет, студентка, проживает в городе.
Доходы: просит деньги у родителей, подрабатывает в интернете.
Очень часто смотрит адаптации сериалов и фильмов, зарисовки авторов, просматривает все на телефоне, чтобы было комфортнее смотреть использует оптимизированные сайты. Сайт прост для чтения с телефона, добавления информации и просмотра видео, Олесе будет просто освоиться, и пользоваться сайтом. По той причине что наш дизайн прост и удобен, на нем присутствует нужная информация, а так же оптимизирован она будет использовать наш сайт. Отдает предпочтение фильмам и сериалам, иногда читает придуманные другими пользователями истории о вселенной «Ведьмак».
Аркадий – 30 лет, работает фотографом, проживает в городе.
Доходы: зарабатывает деньги сам.
Любитель почитать книги и посмотреть фильмы по своему компьютеру и планшету. Благодаря дизайну сайта удобно находить нужное он сможет найти книгу в считанные клики. Скачать или открыть сайт, на котором проигрывается нужный ему фильм. Аркадий будет пользоваться сайтом т.к он стилизован и даже взрослый человек поймет куда нужно перейти. Предпочитает книги и фильмы, иногда просматривает новые адаптации.
1.3 Анализ рынка программных продуктов
На сегодняшний день быть конкурентоспособным онлайн важнее, чем когда–либо. Большинство потребителей используют интернет для поиска информации о продуктах, услугах или компаниях до принятия решения о покупке. Поэтому крайне важно выделяться среди других веб–форумов
Конкурентоспособность сайта может быть выяснена лишь путем сравнения с другими сайтами похожей тематики.
Необходимо проанализировать аналоги создаваемого ресурса, и выявить требования создаваемого сайта для увеличения вероятности успешной деятельности.
Есть четыре основные сферы, по которым следует провести оценку. Понимание каждой из этих областей даст четкое представление о том, как будет выглядеть сайт и какие функции он должен выполнять. Остановимся только на тех факторах, которые существенно влияют на достижение бизнес–целей.
Пользовательский опыт:
Хорошо ли организован сайт?
Структура сайта интуитивно понятна?
Пользователю легко и быстро найти нужную информацию?
Приятный ли дизайн?
Контент:
Был ли контент эффективным и информативным?
Текст легко читается?
Информация интересна пользователю. Она конкретна и без излишеств?
Сайт не содержит опечаток, грамматических ошибок и плохо написанного контента?
Техническая сторона:
Сайт быстро загружается?
Сайт адаптивен, имеет мобильную версию сайта?
Не было ошибок или глюков?
Отсутствие битых ссылок?
Маркетинговая сторона:
Есть ли на сайте призывы к действию, возникает желание совершить заказ?
Говорит ли сайт на языке выгод покупателя?
Наличие акций, скидок, программ лояльности? Какая ценовая политика (дорого, дешево, средне)?
Наличие гарантий?
Высокое качество продукции, услуги?
Для анализа необходимо выбрать не менее трех конкурентов, чтобы иметь достаточный диапазон для оценки, но не более пяти чтобы сосредоточится на самых крупных.
Проведен сравнительный анализ разрабатываемого сайта–портфолио с аналогичными ресурсами на рынке. В ходе анализа были выделены следующие сайты:
1.1 Веб–форум cdprojektred (Рисунок 2.1).
The Witcher Series | Forums – CD PROJEKT RED
Рисунок 2.1 – Веб–форум cdprojektred На данном форуме идет обсуждения игры «Ведьма», основные новости, информация от создателей.
Достоинства данного сайта:
структура сайта интуитивно понятна, пользователь легко и быстро может найти нужную информацию;
дизайн сайта очень приятный, оттенки серого и черного очень гармонично смотрятся на фоне изображения, присутствует фильтрация тем;
контент сайта информативен и полезен для пользователя;
Первое на что обращает внимание пользователь вкладка панелей и обсуждения тем, что помогает пользователю ориентироваться на сайте;
Мобильная версия адаптивна, блоки не наезжают друг на друга, глаза не разбегаются все компактно, если спустится к «подвалу» сайта, то можно подняться по навигационным стрелочкам к началу страницы. Есть скрытое меню навигации. Рекламы на сайте нету, есть кнопка смены языка на (Польский, Немецкий, Русский, Португальский, Испанский, Японский, Итальянский);
Недостатки данного сайта:
Некоторые фото в темах не прогружены и их невозможно скачать. Сайт иногда вылетел с ошибкой «503 Backend fetch failed»
2.2.2 Веб–форум Обсуждение игры The Witcher Ведьмак (Рисунок 2.2).
The Witcher – Форум Игромании (igromania.ru) Данный сайт является полноценным форумом о «Ведьмаке»
Достоинства данного сайта:
Структура сайта понятна, но за счёт простоты сайта, разобраться с функционалом не так просто;
Текст читается легко, используются простые и подходящие шрифты;
Загрузка сайта происходит не долго, рекламы на сайте нету, присутствует защита от ботов, защита капчи;
Можно сменить язык форума на английский, регистрация рабочая;
Недостатки данного сайта:
На сайте отсутствует форма обратной связи, сайт не адаптивен под мобильные устройства;
Интерфейс выглядит отталкивающим, загружать изображение на сайт нельзя, дизайн сайта простой и выглядит непривлекательно;
Рисунок 2.2 – Веб–форум cdprojektred
2.2.3 Форум Об The Witcher (Рисунок 2.3).
Ведьмачий форум (ucoz.net)
Рисунок 2.3 – Форум Об The Witcher ucoz.net
Данный сайт предоставляет информацию о новостях, играх, книгах и пользовательский сервис «Ведьмака»
Достоинства данного сайта:
Дизайн приятный, интерфейс простой, интуитивно понятно, куда нужно нажимать;
Сайт содержит, всю необходимую для посетителя, информацию, на главном экране есть кнопка призыва к действиям;
Есть система отзывов, большинство положительных, есть кнопки обратной связи, можно добавлять изображения на сайт;
Недостатки данного сайта:
Не везде один и тот же шрифт, текст маленький, в некоторых местах сливается с фоном темы;
Некоторые изображения не открываются на сайте, нету сохранение выбранной темы, отсутствует форма регистрации;
2.2.4 Сайт игр, форум посвященный The Witcher (Рисунок 2.3).
Witcher, the – Форумы – обсуждение, помощь, проблемы.
По которым есть разные форумы по игровым жанрам и тематикам, так же на нем есть форум посвященный «Ведьмаку»
2.2.4 Форум Об The Witcher
Достоинства данного сайта:
Дизайн простой ничем не отличается, интерфейс приятный;
Сайт содержит, полезную информацию для посетителя;
На главном экране расположены кнопки призыва к действию;
Сайт частично адаптивный, присутствует скрытое меню навигации;
В подвале присутствует кнопочка к поднятию к главному экрану;
Есть кнопка обратной связи, контакты, регистрация полностью рабочая, есть система бонусов;
Недостатки данного сайта:
Есть реклама на сайте, при адаптации некоторые блоки съезжают;
Дизайн хоть и приятен глазу, но скучноват, из–за чего пользователь вряд ли захочет посетить сайт еще раз, задний фон экрана не подходит по тематике форума;
1.4 Выбор программных средств для разработки сайта
Для создания логотипа проекта будет использоваться растровый редактор Adobe Photoshop, так как он является самым функциональным, понятным и удобным средством из известных мне.
Разработка дизайн макетов будет выполняться в онлайн редакторе Figma. Для оптимизации работы в программе будут использоваться библиотеки цветов, компоненты и фреймы, так же группировка, которая поможет быстро и без проблем выравнивать элементы.
При верстке сайта будет использоваться программа Visual Studio Code последней версии, так как она представляет собой очень удобный редактор кода, является кроссплатформенным, обширным инструментом и прост в использовании. В то же время в нем загружены плагины, умные функции комбинация клавиш и многое другое, что поможет при написании кода.
Код верстки сайта будет написан при помощи языка разметки гипертекста HTML, который является основой построения любого сайта.
Чтобы не засорять HTML код, и использовать больше возможностей при создании внешнего вида HTML страницы будут использоваться каскадные таблицы стилей CSS. CSS–стили помогут быстро и просто создавать и изменять стили элементов веб–страниц и пользовательских интерфейсов.
Фреймворк Bootstrap 4 будет использоваться для упрощения верстки и создания адаптивной, под разные устройства, версии сайта. Bootstrap 4 содержит большое количество стилей, шаблонов, постраничных дизайнов, которые существенно облегчат создание сайта.
Для создания серверной стороны сайта будет использоваться СУБД MySQL, программа phpMyAdmin, фреймворк Laravel, программная среда OSPanel и язык программирования PHP. Выводы Проведён целевой анализ платформ, подобных проектируемой, и техническое задание на создание сайта, сформулированы требования к создаваемому сайту, выбраны технологии для проектирования.
2 Конструкторская часть
Разработка сайта это трудоёмкий процесс, требующий чёткого и грамотного планирования. В тексте проектной части пояснительной записки требуется показать следующие аспекты разработки сайта:
Разработку структуры сайта;
Разработку эскизов сайта;
Разработку прототипов сайта;
Разработку дизайн–макетов сайта;
Верстку сайта;
Разработку на стороне сервера;
Программирование на стороне клиента;
Оптимизацию сайта.
Разработка сайта начинается с разработки структуры сайта.
2.1 Разработка структуры сайта
Структура сайта это система несвязанности страниц сайта по четко формированной логической схеме, структуру можно обозначить как иерархию всех страниц сайта и их принадлежности друг к другу. Формирую структуру учитывается примерное поведение пользователя при посещении сайта. От правильного составления структуры зависит то, сможет ли пользователь найти нужную информацию и то, на сколько удобно пользователю будет взаимодействовать с сайтом. На Рисунке 3.1 представлены структурная схема сайта, которая учитывает всю специфику разрабатываемого приложения.
Существует несколько основных видов:
Линейная структура;
Линейная структура с ответвлениями;
Древовидная структура;
Решетчатая структура.
Для данного проекта была выбрана древовидная структура сайта.
Рисунок 3.1 Структурная схема сайта
2.2 Прототипирование сайта
Прототип – это базовый макет сайта, который визуализирует расположение всех элементов и функций. Он позволяет наглядно проиллюстрировать все задумки, а также сразу внести некоторые правки, сократив тем самым трудозатраты при отрисовке графических макетов. Прототипирование является полезным этапом при создании графического макета сайта. С его помощью можно визуально представить как будет выглядеть сайт, как будет реализовано взаимодействие с пользователем, как будут работать элементы интерфейса. Используя прототип (Рисунок 3.3) можно оценить на сколько удобным и полезным будет сайт для пользователя.
Хорошо продуманный прототип является важным этапом в разработке сайта. Он позволяет экономить время, бюджет и трудозатраты, исключая и минимизируя лишние корректировки на этапе дизайна и верстки.
Рисунок 3.3 – Прототип главной страницы сайта
2.3 Создание макета дизайна сайта
В соответствии с разработанной структурой, эскизом, прототипом и техническим заданием был разработан дизайн-макет главной страницы сайта (Рисунок 3.4).Блок содержит все основные структурные элементы, переход по которым осуществляется с помощью гиперссылок.
Рисунок 3.4 – Дизайн макет главной страницы сайта Аналогичным образом были созданы дизайн-макеты внутренних страниц
2.4 Сбор семантического ядра
Семантическое ядро сайта (семантика) — это список ключевых слов и словосочетаний, приводящих на сайт целевых посетителей, используются для продвижения сайта в поисковых системах. Запросы в семантическом ядре (СЯ) разделяется по частотности, конкуренции и коммерческой составляющей, семантика позволяет понять распределение поискового спроса и сформировать правильную для продвижения структуру сайта.
Определив вектор SEO-продвижения, можно переходить к формированию костяка семантического ядра. Сбор базовых ключевых слов необходим для корректного проектирования структуры будущего сайта и не позволит увести сайт от основной тематики.
Для сбора семантики сайта чаще всего используется Яндекс.Wordstat или Планировщик ключевых слов Google, обладающий схожим функционалом. Сначала разберем, как собрать семантическое ядро сайта с помощью сервиса от Яндекс. Заходим на сайт Wordstat и вбиваем ключевые слова по нашему сайту.
Выполнил поиск по ключевым словам, задал подчиненность страницам, проанализировал статистику по словам через сайт wordstat.
Visual Studio Code (VS Code) — редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб– и облачных приложений. Включает в себя отладчик, инструменты для работы с Git, подсветку синтаксиса, IntelliSenseи средства для рефакторинга. Имеет широкие возможности для кастомизации: пользовательские темы, сочетания клавиш и файлы конфигурации.
Рисунок 1.1 Visual Studio Code Многие возможности Visual Studio Code недоступны через графический интерфейс, зачастую они используются через палитру команд или JSON–файлы (например, пользовательские настройки). Палитра команд представляет собой подобие командной строки, которая вызывается сочетанием клавиш. VS Code также позволяет заменять кодовую страницу при сохранении документа, символы перевода строки и язык программирования текущего документа. С 2018 года появилось расширение Python для Visual Studio Code с открытым исходным кодом. Оно предоставляет разработчикам широкие возможности для редактирования, отладки и тестирования кода. Посредством встроенного в продукт пользовательского интерфейса можно загрузить и установить несколько тысяч расширений только в категории «programming languages» (языки программирования). Также расширения позволяют получить более удобный доступ к программам, таким как Docker, Git и другие. В расширениях можно найти линтеры кода, темы для редактора и поддержку синтаксиса отдельных языков.
3.1.2 HyperText Markup Language
HTML (от англ. HyperText Markup Language) (Рисунок 1.2) – язык разметки гипертекста. Это основа построения любого сайта, при изучении темы сайтостроения. HTML не стоит путать с языками программирования, он создан специально для разметки веб–страниц. Именно язык разметки дает браузеру необходимые инструкции о том, как отображать тексты и другие элементы страницы на экране.
Разметка документа начинается с тега и заканчивается закрывающим тегом . HTML–документ состоит из двух разделов – заголовка – между тегами и содержательной части – между тегами … , имеется набор свойств, такие как – цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция подключает внешние файлы к документу HTML, в том числе стили CSS.
Если HTML представляет собой скелет (структура) сайта, то CSS – это набор правил, которые отвечают за то, как это будет выглядеть, а именно, какой будет шрифт (размер, цвет, толщина), как будут располагаться элементы на сайте друг относительно друга и т.п. Поэтому HTML и CSS довольно тесно связаны между собой.
Помимо того, что CSS значительно упрощает форматирование документа, он еще и код загрязняет меньше и обладает большими возможностями, нежели те же HTML теги. С помощью каскадных таблиц стилей вы сможете изменить цвет документа, настроить его размер, тип, установить фон и многое другое.
Рисунок 1.3 CSS код
3.1.4 JavaScript
JavaScript – это мультипарадигменный язык программирования, который обычно применяется в качестве встраиваемого инструмента для программного доступа к различным объектам приложений. С точки зрения веб–разработки, без знаний этой технологии невозможно заниматься созданием современных интерактивных сайтов. Язык JS – это то, что «оживляет» разметку страниц (HTML) и пользовательский функционал (CMS) сайтов. С помощью этого языка реализуется возможность реакции страницы или отдельных ее элементов на действия посетителя. Сегодня JavaScript является базовым языком программирования для браузеров. Он полностью совместим с операционными системами Windows, Linux, Mac OS, а также всеми популярными мобильными платформами.
Рисунок 1.4 CSS код
3.2 Технологии обработки контента
Для создания и обработки контента были выбраны следующие программные средства:
3.2.1 Adobe Photoshop CC 2020
Adobe Photoshop – многофункциональный графический редактор, разрабатываемый и распространяемый компанией Adobe Systems (см. рисунок 1.6). В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты (см. рисунок 1.7). Продукт является лидером рынка в области коммерческих средств редактирования растровых изображений и наиболее известной программой разработчика.
Хотя изначально программа была разработана как редактор изображений для полиграфии, в данное время она широко используется и в веб–дизайне. Photoshop также прижился в кругах разработчиков компьютерных игр.
Photoshop поддерживает многие современные цветовые модели или способы описания цветов изображения.
Рисунок 1.5 Photoshop 2020
3.2.2 Figma
Figma (Рисунок 1.6) – кросс–платформенный онлайн–сервис для дизайнеров интерфейсов и веб–разработчиков. Разработка интерфейсов происходит в онлайнприложении.
У Figma две ключевые особенности: доступ к макету прямо из окна браузера и возможность совместной работы над документами.
Основные преимущества этого сервиса:
– Многопользовательский режим;
– Хранение файлов в облаке;
– Кросс–платформенность;
– Компоненты;
– Наличие фреймов;
– Плагины;
– Десктопное приложение и Figma Mirror для смартфонов;
– Импорт скетч–файлов.
Рисунок 1.6 – Интерфейс программы «Figma» Выводы
Изучены преимущества и недостатки технологий, которые могут использоваться при проектировании сайта–портфолио.
3.3 Тестирование проекта
Валидатор позволяет следить за правильным отображением сайта в разных браузерах. Например, если не закрыть тэг или где-то сделать опечатку в коде, в дальнейшем одна и та же страница может отображаться в разных браузерах по-разному. Также CSS-стили могут отображаться не так, как необходимо. Для проверки валидности сайта мной был использован сервис validator.w3.org.
При переходе на validator.w3.org перед нами откроется страница, на которой есть 3 вкладки. На первой вкладке «Validate by URI» можно проверить валидность сайта, размещенного в интернет, на второй «Validate by File Upload» — загрузить файл с компьютера, и на третьей «Validate by Direct Input» — вставить содержимое файла непосредственно в форму для ввода.
Валидатор вывел, что никаких ошибок или предупреждений на разработанном сайте не было обнаружено (см. рисунок 3.6-3.7).
Рисунок 3.6 – Загрузка в валидатор
Рисунок 3.7 – Проверка ошибок в валидаторе
Вывод: в ходе проведения технологической части был свёрстан сайт, протестирован в валидаторе.
3.4 Продвижение проекта
Рисунок 3.8 – Анализ внешний и внутренних ссылок. 2. Стратегия.
Буду подстраивать сайт под регионы или страны которые пользуются большей популярностью по тематике, проанализирую конкурентов и выявлю у них лучшие ключи, ссылки и то откуда они берут трафик, просмотрю посещаемость, возраст, траст.
Основным способом продвижения ресурса являются:
обмен линками — ресурсы со сходной тематикой обмениваются бэклинками по взаимной договорённости;
получение ссылок из каталогов — требует регистрации в разных каталогах;
продажа контента с бэклинками на специальных биржах;
закупка — эффективный, но весьма затратный способ, требующий тщательного и взвешенного подбора сайта донора;
из социальных сетей — считается очень действенным способом привлечение целевой аудитории, хотя сами линки для индексации закрыты.
анализ динамики — поиск временных точек резких изменений количества ссылок и определение их причин;
анализ их типов и поиск спамных;
анализ анкорных и безанкорных ссылок, а также коммерческих слов в анкорах, уровня их заспамленности;
оценка качества доноров и поиск надёжных ресурсов для размещения бэклинков;
анализ ссылочного профиля основных конкурентов.
Дальше подбор донорских сайтов.
Для измерения трастовости используются следующие показатели:
MozTrust.
Трастовость целевой страницы согласно данным Moz.
Majestic Trust Flow.
Для оценки рейтинга и авторитетности сайта подойдут такие метрики:
MozRank.
Ahrefs Rank.
Позиция сайта в рейтинге Ahrefs, который рассчитывается на базе объёма и качества ссылочного профиля. Чем выше позиция, тем меньше число.
Ahrefs Domain Rating.
Рейтинг домена согласно сервису Ahrefs.
SEMrush Rank.
1. Нужно включить Яндекс Метрику и Google Analytics. 2. Уменьшить объем страниц, чтобы загрузка была быстрее, сократить код, очистка кэша.
Минимизируйте HTTP-запросы
Сократите и объедините количество файлов.
Используйте асинхронную загрузку для файлов CSS и JavaScript.
Отложите загрузку JavaScript.
Минимизируйте время до первого байта.
Сократите времени ответа сервера.
Включите сжатие
3. Добавить раздел ENG/RUS, чтобы англоговорящие люди могли пользоваться сайтом.
4. Продвигать такой обширный сервис и сайт.
В ТВ рекламе.
Соц. сетях (реклама в ВК, инст)
5. Также можно указывать ссылки на сайт в социальных сетях.
ЗАКЛЮЧЕНИЕ
Всем известно, что мировая тенденция не стоит на месте, а появление новых направлений в фильмах, книгах, играх приводит к популяризации вселенной «Ведьмака». В ходе исследования были рассмотрены задачи, связанные с созданием интернет-портала с описанием персонажей, подробными обучающими советами и информацией о книгах.
В ходе моего курсового проекта был создан сайт на котором люди смогли бы проводить время и получать полезную инфомрацию. Были получены навыки анализа предметной области, использования различных программных обеспечений и навыки UI/UX дизайнера. Интернет-портал создан путем разработки структуры и дизайна проекта по разработанному техническому заданию.
При выполнении были проанализированы различные ПО, что привело к выбору лучшего, при помощи оценки преимуществ и недостатков.
В дальнейшем планируется выпустить сайт в открытый доступ для пользователей и продвигать сайт. Но для этого необходимо купить рекламу, собрать аудиторию и набрать популярность. Далее планируется расширить сайт добавить форму исправления ошибок и добавление информации от пользователей, добавить систему форума. Разработка интернет-портала дает возможность создания своего проекта который интересен не только мне, но и другим посетителям сайта. Немаловажно и то, что данный проект позволил увеличить теоретические знания о HTML,JS и CSS.
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
1. Киселев С. В. Веб-дизайн учеб. пособие для студ. учреждений сред. проф. образования / С. В. Киселев – 6-е изд., стер. – М: Издательский центр «Академия», 2015. – 64 с.
2. Плаксина А. А. Кастомизация: что это такое и почему она в моде? / А. А. Плаксина. – Москва: Изд-во телеканала РБК, 18 июня 2019. – URL: https://style.rbc.ru/items/5cda7a2d9a7947768c157a28 (дата обращения: 01.04.2021)
7. Интернет-сервис для публикации и размещения статических сайтов: [сайт]. – 2021 – URL: https://app.netlify.com (дата обращения: 17.04.2021) 8. Plunnovia: [сайт]. – 2021 – URL: https://plunnovia-test.netlify.app (дата обращения: 17.04.2021)
ПРИЛОЖЕНИЕ А
Таблица 3.1 – Техническое задание на разработку сайта
Общие сведения
Назначение документа
Настоящее Техническое задание определяет требования и порядок разработки интернет- форума по трилогии игр, книг, сериалов «The Witcher»
V
Заказчик
Федорова Людмила Васильевна — преподаватель МЦК-ЧЭМК.
Исполнитель
Петров Даниил Михайлович
Основание для разработки сайта
Основанием для разработки сайта является техническое задание.
Плановые сроки начала и окончания работ по созданию сайта
Начало работ: 01.12.2021
Окончание работ: 20.05.2022
Содержание и длительность отдельных этапов работ приведены в разделе настоящего ТЗ. Сроки, состав и очередность работ являются ориентировочными и могут изменяться по согласованию с Заказчиком.
Порядок оформления и предъявления результатов работ
Работы по созданию сайта производятся и принимаются поэтапно.
По окончании каждого из этапов работ, перечисленных в разделе настоящего ТЗ, Исполнитель представляет Заказчику соответствующие результаты и при необходимости вносятся коррективы.
Назначение и цели создания сайта
Назначение сайта
Сайт предназначен для ознакомления и поиска нужной информации пользователям в определенной теме
Для работы с сайтом от пользователей не должно требоваться специальных технических навыков, за исключением общих навыков работы с стандартным веб-браузером.
Требования к разграничению доступа
Информация, размещаемая на сайте, является общедоступной.
Пользователей сайта можно разделить на 3 группы в соответствии с правами доступа:
посетители;
редактор;
администратор.
Посетители имеют доступ только к общедоступной части сайта.
Редактор может редактировать материалы разделов.
Администратор может вносить изменения в код.
Продолжение таблицы 3.1
Основные требования к сайту
Структура сайта
Сайт должен состоять из следующих разделов:
Главная страница;
Форум;
Созданная тема
Ведьмак 1;
Ведьмак 2;
Ведьмак 3;
Книги;
Сериал;
Обратная связь;
Отзывы и Контакты;
Школа ведьмака;
Карта и Фракции;
Персонажи;
Блог.
Навигация
Пользовательский интерфейс сайта должен обеспечивать понятное представление размещенной на нем информации, быстрый и логичный переход к страницам. Навигационные элементы должны обеспечивать однозначное понимание пользователем их смысла: ссылки на страницы должны быть снабжены заголовками, условные обозначения соответствовать общепринятым. Система должна обеспечивать навигацию по всем доступным пользователю ресурсам и отображать соответствующую информацию. Меню должно представлять собой текстовый блок (список гиперссылок).
При выборе какого-либо из пунктов меню пользователем должна загружаться соответствующая ему информационная страница.
Наполнение сайта (контент)
Наполнение информацией должно проводиться с использованием типовых шаблонов страниц сайта.
В рамках разработки сайта исполнитель должен проанализировать, обработать, дополнить, исправить исходную информацию и обеспечить ее ввод в сайт. Названия файлов должны отображать содержимое контента. Графический материал должен предоставляться в формате JPG, PNG, GIF. Исполнитель должен обеспечить обработку иллюстраций для приведения их в соответствие с техническими требованиями и HTML-верстку подготовленных материалов. При сдаче сайта заказчику необходимо предоставить дополнительные материалы (исходники текстов, изображений, тестов, видео материалов и т. п.) на электронном носителе для дальнейшего сопровождения.
Типовые статические страницы
Типовые страницы могут изменяться, редактироваться или дополняться в программном коде сайта.
Для каждой типовой статической страницы в программном коде сайта заполняются такие поля: заголовок, полный текст страницы (количество сопроводительных иллюстраций в нём не ограничено, количество символов в одной статье – не ограничено).
Продолжение таблицы 3.1
Требования к размещению файлов
сайт должен иметь полноценную локальную версию, следовательно весь контент должен быть структурирован и находиться в соответствующих папках с проектом.
Требования к дизайну
Общие требования
Стиль сайта можно описать как современный, деловой. В качестве фонового цвета рекомендуется использовать белый и черный с элементами красного оттенка. Оформление сайта должно быть современным и понятным пользователям.
Оформление не должно ущемлять информативность: хотя на сайте и должно быть довольно много блоков и интуитивно понятных объектов, он должен быть удобен пользователям в плане навигации и интересен для многократного посещения.
Типовые навигационные и информационные элементы
Шапка сайта
Шапка сайта должна содержать поиск, логотип и навигацию, а также смена фоновой темы сайта, вход или регистрация в аккаунт. Логотип является ссылкой на главную страницу веб-форума.
Основное поле контента
Основное поле контента должно располагаться в центре страницы. В этом поле отображается основное содержание выбранного раздела. Стилевое оформление материалов и их элементов (ссылок, заголовков, основного текста, изображений, форм, таблиц и т.п.) должно быть единым для всех страниц сайта. Контент визуально должен делиться на три колонки.
Подвал
В подвале должна располагаться информация о правообладателях.
Эскизы страниц
Типовая страница
В верхней части типовой страницы должна располагаться шапка и навигационное меню сайта; центральная часть страницы представляет собой основную контентную область.
В контентной области типовой страницы должны содержаться информация о заданном разделе сайта.
Требования к информационному обеспечению
Требования к языкам программирова-ния
Для реализации страниц должны использоваться языки HTML5 и CSS3. Исходный код должен разрабатываться в соответствии со стандартами W3C (HTML 5.0).
Для реализации интерактивных элементов клиентской части должен использоваться язык JavaScript
Требования к лингвистическому обеспечению
Сайт должен быть выполнен на русском и английском языке.
Требования к программному обеспечению
Программное обеспечение клиентской части должно удовлетворять следующим требованиям:
Веб-браузер: Google, Яндекс, Microsoft Edge, Opera, Mozilla.
Включенная поддержка JavaScript
Продолжение таблицы 3.1
Порядок контроля и приемки сайта
Виды, состав, объем и методы испытаний
Сдача-приемка выполненных работ должна осуществляться при предъявлении Исполнителем комплектов соответствующих материалов и документов. Тестирование сайта проводятся силами Исполнителя.
Общие требования к приемке сайта
Приемка сайта должна проводиться Исполнителем и Заказчиком.
Требования к составу и содержанию работ по вводу сайта в эксплуатацию
Для создания условий функционирования, при которых гарантируется соответствие создаваемого сайта требованиям настоящего Технического задания и возможность его эффективной работы, с Заказчиком должен быть проведен определенный комплекс мероприятий (проверена функциональность сайта и соответствие контента требованиям ТЗ).
Передача сайта осуществляется на электронном носителе.
Скачать 5.81 Mb.
государственное автономное профессиональное образовательное учреждение 
СОДЕРЖАНИЕ
Рисунок 3.1 Структурная схема сайта
