Файл: Выпускная квалификационная работа разработка вебсайта для рекламного агентства rocont Погадаев Вячеслав Олегович.docx

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

Примеры таких программ:

notepad++;
aptana Studio;
sublime text;
brakets.

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

1.5.2 Графические редакторы

При создании прототипа и макета веб-сайта можно воспользоваться графическими редакторами это программы, позволяющие работать с графикой (создавать, редактировать различные изображения). Так же, как и текстовые редакторы, они бывают с различными функционалами и разным применением. К простому редактору в первую очередь относиться WindowsPains. К сложным графическим редакторам, которые работают с растровой графикой относятся AdobePhotoshop и Gimp. Для векторной графики используется AbodeIllustrator, Figma, CorelDraw. Также можно использовать онлайн-сервис wireframe.cc для создания прототипа веб-сайта. В нем можно набросать структуру веб-сайта, обозначиться расположение ключевых элементов их размеры, примерные цвета.

1.5.3 Локальные сервера

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

Локальный сервер OpenServerPanel — это портативная серверная платформа и программная среда, созданная специально для веб-разработчиков с учётом их рекомендаций и пожеланий. Программный комплекс имеет богатый набор серверного программного обеспечения, удобный, многофункциональный продуманный интерфейс

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

Локальный сервер AMPPS — это сборник приложений, которые создают целую библиотеку для работы веб-мастера. Каждое приложение можно установить, протестировать и использовать в своих целях, причем делать это очень быстро. Данная сборка имеет свои плюсы и преимущества перед другими. Стоит отметить поддержку распространенных CMS, веб-форумов, блог-платформ, фотогалерей, досок объявлений и другое. Количество доступных приложений насчитывает более 200 штук.

Локальный сервер Denwer — это комфортные условия при удаленной работе сразу над несколькими независимыми проектами и возможность размещения на флеш-накопителе. Кроме того, эмулятор веб-сервера Denwer может быть использован для создания собственного хостинга, а также при создании баз данных для веб-сайтов, используя при этом язык SQL.

2. Разработка веб-сайта

2.1 Разработка прототипа веб-сайта

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

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

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

Рисунок 2 – Линейная структура веб-сайта

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

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

Рисунок 3 – Линейная структура с ответвлениями веб-сайта
Древовидная структура — это древовидная структура является наиболее универсальным вариантом и именно ее вы будете применять в 99% случаев. Смысл в том, что для каждого направления у вас будет своя ветка, для каждой услуги или товара у вас будет отдельное ответвление. То есть, те самые привычные нам разделы и подразделы. Эта структура позволяет передавать дополнительный вес как на главную, так и на разделы (каждая страница раздела будет ссылаться не только на главную, но и на свой раздел, достаточно настроить хлебные крошки. Пример древовидной структуры веб-сайта приведен на рисунке 4.

Рисунок 4 – Древовидная структура с ответвлениями веб-сайта

Блочная структура — это когда все страницы ссылаются на несколько других, которые равнозначны между собой. Такую структуру неплохо применять для конкретного продукта, когда каждую страницу можно использовать, как описание какого-то отдельного свойства/достоинства и их совокупностей. С распределением веса здесь все вполне неплохо, страницы уже перелинкованы и отдают свой вес на главную, что позволяет продвигать ее более эффективно. Но такая структура весьма специфична и применять ее можно далеко не везде. Пример блочной структуры веб-сайта приведен на рисунке 5.

Рисунок 5 – Блочная структура веб-сайта

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

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

Сюда включаются:

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

Главная страница веб-сайта является, важнейший страницей на веб-сайте. Именно после впечатления главной страницы потенциальный покупать решит оставаться на веб-сайте или нет. Любая главная страница должна отвечать нескольким требованиям:

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

Остальные страницы веб-сайта должны быть объединены общим дизайном на них должны быть элементы меню ссылки на главную страницу и название ресурса. В остальных моментах страницы не должны дублироваться, то есть иметь уникальное содержание. Пример структуры страниц веб-сайта компании «Rocont»приведен на рисунке 6.

Рисунок 6 – Структура страниц веб-сайта компании «Rocont»

Веб-сайт должен поддерживаться на всех популярных сегодня операционных системах – Windows, Linux, Android, IOS. Также он должен корректно отображаться во всех популярных браузерах и на всех разрешениях экранов. Для того применяется адаптивная верстка, которая позволяет веб-сайту менять размеры и расположение своих элементов в зависимости от того на экране какого разрешения он отображается. К тому же веб-сайты с использованием адаптивной верстки становятся поисковыми системами на более высокие позиции.После того как определены основные моменты внешнего вида веб-сайта можно приступить к ее прототипу. Разработка прототипа будет проводиться в онлайн-сервисе wireframe.cc.

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