РАЗРАБОТКА САЙТА ДЛЯ ТРАНСПОРТНОЙ КОМПАНИИ

СОДЕРЖАНИЕ 2
ВВЕДЕНИЕ 3
ГЛАВА I. ТЕОРЕТИЧЕСКИЕ И МЕТОДОЛОГИЧЕСКИЕ ОСНОВЫ РАЗРАБОТКИ ВЕБ-САЙТА ДЛЯ КОММЕРЧЕСКОЙ ОРГАНИЗАЦИИ 4
1.1. Основные понятия и типы веб-сайтов 4
1.2. Структура веб-сайтов 6
1.3. Характеристики типового веб-сайта организации 10
1.4. Публикация сайта 13
1.5. Примеры веб-сайтов компаний, реализующих аренду спецтехники 15
ГЛАВА II. ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА САЙТА ДЛЯ ТРАНСПОРТНОЙ КОМПАНИИ «AUTOASTORIA» 18
2.1. Техническое задание на разработку веб-сайта 18
2.2. Структура сайта 20
2.3. Отрисовка макетов страниц 22
2.4. Выбор средств разработки 23
2.5. Этапы создания сайта 24
ЗАКЛЮЧЕНИЕ 38
СПИСОК ЛИТЕРАТУРЫ 39
ПРИЛОЖЕНИЕ 1 41
ПРИЛОЖЕНИЕ 2 48

ГЛАВА II. ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА САЙТА ДЛЯ ТРАНСПОРТНОЙ КОМПАНИИ «AUTOASTORIA»
2.1. Техническое задание на разработку веб-сайта
Создание веб-сайта включает в себя три основных этапа: получение технического задания (кратко – ТЗ) от заказчика, непосредственное написание кода и проверка сайта на веб-сервере и оптимизация.
ИП «Симонов», обратившийся к нам с заказом на разработку сайта, предоставил следующее ТЗ к разработке сайта:
Общие сведения о проекте:
Сайт организации, занимающейся сдачей в аренду спецтехники. Тип сайта:
Так как задача разрабатываемого сайта предоставить информацию о транспортной компании, о видах поставляемого транспорта и о стоимости услуг, мною выбран тип сайта - сайт-визитка.
Сайт-визитка, как правило, имеет уникальный, но понятный интерфейс и функциональный дизайн и состоит из нескольких страниц (от 5 до 15); отлично подходит для организаций, которые хотят разместить информацию о себе и предоставляемых услугах в сети Интернет.
...

1.1. Основные понятия и типы веб-сайтов
Веб-сайт (с английского «web-site»: «web» - это паутина или сеть, а «site»
• это локация, положение) – это специальным образом структурированная информация, которая размещается на сервере и открыта к пользованию для людей в бесплатном доступе, после авторизации или же в закрытом доступе.
Все сайты в совокупности составляют собой Всемирную паутину, объединяющую в единое целое все части информации мирового общества. Протокол HTTP (Hyper Text Transfer Protocol) [8] – это протокол, который был специально разработан для того, чтобы позволить клиенту иметь доступ к сайтам на серверах.
Сайт представляет собой коллекцию различных файлов – страниц в специальном формате. Страницы сайта являются текстовыми файлами, состоящими из команд HTML (Hyper Text Markup Language – язык разметки гипертекста).
...

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

1.3. Характеристики типового веб-сайта организации
Сайт, который представляет некоторую организацию или компанию, называется корпоративным или официальным. Официальный сайт обычно имеет следующие разделы:
◦ информация об организации;
◦ каталог продукции;
◦ информация о последних новостях;
◦ направления деятельности;
◦ предоставляемые услуги;
◦ контактная информация;
◦ отзывы довольных клиентов.
Сайты организаций относятся к типу информационных сайтов, что является довольно распространенным типом сайтов. Ими пользуются организации, предприятия, индивидуальные предприниматели, юридические и физические лица для предоставления информации большой аудитории. Назначение и наполненность сайта зависят от той информации, с которой человек или организация хотят поделиться с миром. Такие сайты, безусловно, имеют актуальность создания для любой организации.
...

1.4. Публикация сайта
Хостинг – это, чаще всего, онлайн услуга, которая помогает владельцам публиковать свои сайты в сети интернет. Когда мы пользуемся услугой хостинга – мы берем в аренду место на сервере, который поддерживает работу нашего сайта, хранит в себе все документы, файлы и данные. Для многих начинающих владельцев сайтов выбор хостинга – это непомерно сложная задача, так как сейчас существует огромное количество хостингов – разной стоимости и различных тарифов. Но и среди такого большого количества есть немало недобропорядочных владельцев хостингов. Сейчас на рынке хост-услуг существует пять видов хостинга:
▪ виртуальный хостинг;
▪ виртуальный выделенный сервер;
▪ выделенный физический сервер;
▪ облачный хостинг;
▪ colocation.
Виртуальный хостинг – это сервер, который располагает в себе сразу много сайтов. Они все с равными возможностями и используют одинаковые ПО.
...

1.5. Примеры веб-сайтов компаний, реализующих аренду спецтехники
Прежде, чем создать собственный сайт, рассмотрим и проанализируем сайты организаций, которые занимаются арендой спецтехники и предоставлением услуг, связанных со спецтехникой.
1) Сайт строительной компании ВолгаПродМонтаж [19].

Рис.1.6. Сайт vpm.ru

Первое, что бросается в глаза нам, как потенциальным клиентам – это скудность цветов, не выделенные ссылки и бледный шрифт. К преимуществам можно отнести навигационную панель, а также доступную основную информация, которую посетитель видит на главной странице.
2) Сайт казанской компании ДорСнаб [13].

Рис.1.7. Сайт dorsnab116.ru
На главной странице располагается основная информация, ссылка обратного звонка, понятная навигационная панель. Но единый стиль нарушен ярко-красным шрифтом, отсутствием разметки на сайте, некачественным изображением.
3) Сайт компании RusGrand [14].

Рис.1.8. Сайт spectehnikart.ru ч.1

Рис.1.9. Сайт spectehnikart.
...

2.1. Техническое задание на разработку веб-сайта
Создание веб-сайта включает в себя три основных этапа: получение технического задания (кратко – ТЗ) от заказчика, непосредственное написание кода и проверка сайта на веб-сервере и оптимизация.
ИП «Симонов», обратившийся к нам с заказом на разработку сайта, предоставил следующее ТЗ к разработке сайта:
Общие сведения о проекте:
Сайт организации, занимающейся сдачей в аренду спецтехники. Тип сайта:
Так как задача разрабатываемого сайта предоставить информацию о транспортной компании, о видах поставляемого транспорта и о стоимости услуг, мною выбран тип сайта - сайт-визитка.
Сайт-визитка, как правило, имеет уникальный, но понятный интерфейс и функциональный дизайн и состоит из нескольких страниц (от 5 до 15); отлично подходит для организаций, которые хотят разместить информацию о себе и предоставляемых услугах в сети Интернет.
Сайты-визитки обычно отличаются простым дизайном, на них обязательно присутствует логотип организации.
...

2.4. Выбор средств разработки
Для создания сайта был выбран язык разметки HTML, каскадные таблицы стилей CSS для описания внешнего вида сайта.
В качестве среды разработки выбран редактор Atom.
Преимущества среды Atom. Главное и основное преимущество атома – это бесплатный доступ ко всем функционалам редактора. Разработчики из Github-а [6] создали этот редактор для своей целевой аудитории, чтобы облегчить написание кода. Редактор полностью можно персонализировать под себя и свои нужды. В этом помогут различные пакеты, которые можно скачать
с официального сайта [2]. Приложение идеально подстроено для веб- разработки – оно поддерживает HTML, CSS и JavaScript, а также стоит отметить интеграцию с Node.js. Редактор «тяжелее», чем Notepad или Sublime Text, но любой компьютер всё равно с лёгкостью может «потянуть» приложение и работать без запинок.

2.5.
...

2.5. Этапы создания сайта Верстка веб-страниц
На данном этапе происходит верстка сайта при помощи HTML [17], его проверка и оптимизация к различным устройствам, прописывание мобильной версии сайта.
Верстка собирает в одно целое и преобразовывает текстовую информацию, графическое оформление и программное обеспечение, и представляет сайт в том виде, в котором далее его будет видеть пользователь.
Основываясь на макете, была создана главная страница – index.html:

Рис.2.7. Главная страница сайта
После этого происходит добавление стилей, прописывание классов и заполнение страницы styles.css [16], отвечающей за них. Пример проделанной работы над шапкой сайта:

Рис.2.8. Шапка сайта

На следующем шаге была проработана навигационная панель – был добавлен выпадающий список. Были использованы атрибуты transform, transition, opacity и visibility.

Рис.2.9. Навигационная панель
Аналогичным образом были созданы все 9 страниц сайта, наполнены стилями и контентом.
...

1. A new image format for the Web [Электронный ресурс]. - Режим доступа: https://developers.google.com/speed/webp/, свободный (Дата обращения 08.06.2019)
2. Atom [Электронный ресурс]. - Режим доступа: https://atom.io/,
свободный (Дата обращения 07.06.2019)
3. Balsamiq [Электронный ресурс]. - Режим доступа: https://balsamiq.com/, свободный (Дата обращения 07.06.2019)
4. Bootstrap [Электронный
доступа: https://getbootstrap.com/, ресурс].
свободный -
(Дата Режим
обращения
07.06.2019)
5. Denwer [Электронный ресурс]. - Режим доступа: http://www.denwer.ru/, свободный (Дата обращения 08.06.2019)
6. GitHub [Электронный ресурс]. - Режим доступа: https://github.com/,
свободный (Дата обращения 07.06.2019)
7. Google Maps [Электронный ресурс]. - Режим доступа: https://goo.gl/maps/ZKyVoh2vATe9riJf9, свободный (Дата обращения 08.06.2019)
8. HTML [Электронный ресурс]. - Режим
доступа: https://ru.wikipedia.org/wiki/HTML, свободный (Дата обращения 08.06.2019)
9. CSS3 Media Queries [Электронный ресурс]. -
Режим доступа: https://www.w3.org/TR/css3-mediaqueries/, свободный (Дата обращения 08.06.2019)
10. RedConnect [Электронный ресурс]. - Режим
доступа: https://redconnect.ru/, свободный (Дата обращения 09.06.2019)

11. Use Ability [Электронный ресурс]. - Режим доступа: http://webstudio2u.net/ru/design-web/93-useability.html, свободный (Дата обращения 05.06.2019)
12. Аренда спецтехники в Нижнекамске и Набережных Челнах [Электронный ресурс]. - Режим доступа: https://autoastoria.ru/, свободный (Дата обращения 08.06.2019)
13. ДорСнаб [Электронный ресурс]. - Режим доступа: http://dorsnab-tat.ru/,
свободный (Дата обращения 06.06.2019)
14. РусГранд [Электронный ресурс]. - Режим доступа: https://spectehnikart.ru/, свободный (Дата обращения 06.06.2019)
15. Сводная статистика зоны .RU [Электронный ресурс]. - Режим доступа: https://statonline.ru/, свободный (Дата обращения 08.06.2019)
16. Справочник по HTML [Электронный ресурс]. - Режим доступа: http://htmlbook.ru/html, свободный (Дата обращения 08.06.2019)
17. Справочник CSS [Электронный ресурс]. - Режим
доступа: http://htmlbook.ru/css, свободный (Дата обращения 08.06.2019) 18.Статистика Интернета на 2019 год [Электронный ресурс]. – Режим
доступа: https://www.web-canape.ru/business/vsya-statistika-interneta-na-
2019-god-v-mire-i-v-rossii/, свободный (Дата обращения 05.06.2019) 19.Строительная компания [Электронный ресурс]. - Режим
доступа: https://www.vpm.ru/, свободный (Дата обращения 06.06.2019)