Создание сайта «Умный дом»

Актуальность выбранной темы дипломной работы обусловлена тем, что в нынешнее время огромной конкуренции в сфере продаж систем «Умный дом» очень сложно удержать внимание потребителя без определенного понимания его психологии и грамотно выстроенного лендинга, состоящего из секций, которые должны подтолкнуть к заказу. Для правильного построения лендинга, который будет поддерживать интерес клиента до момента, пока он не нажмет кнопку «Заказать проект», требуется собственная система редактирования (управления) контента с готовым привлекательным интерфейсом редактора для повышения эффективности продаж, разработанная при помощи Wagtail (CMS).

Цель данной работы заключается в создании одностраничного сайта лендинг пейдж с собственной системой редактирования (управления) контента для повышения эффективности продаж систем «Умный дом».

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

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

В четвертой главе будет описано создание проекта и разработка приложения (сайта) с использованием Wagtail (CMS) и языка Python 3; установка шаблона главной страницы сайта в приложение (сайт); связывание стилей, ресурсов и ссылок шаблона в приложении, создание моделей блоков и панелей для редактирования данных блоков в соответствии с блочной моделью сайта на языке Python; в административной панели Wagtail (CMS) добавление данных, ресурсов и ссылок в соответствующие панели моделей приложения (сайта); вывод данных из моделей в шаблон приложения (сайта) при помощи шаблонизатора Jinja; изменение структуры и стилей шаблона в соответствии с блочной моделью сайта.

В пятой главе будет продемонстрирован перенос готового приложения (сайта) в облачную платформу Divio.

ВВЕДЕНИЕ..................................................................................................... 3

1  Постановка задачи....................................................................................... 5

2  Лендинг. Обзор предложений конкурентов и целевой аудитории............ 6

2.1  Лендинг................................................................................................... 6

2.2  Обзор предложений конкурентов........................................................ 11

2.3  Обзор целевой аудитории.................................................................... 14

3  Разработка и наполнение блочной модели сайта...................................... 16

3.1  Проработка блочной модели сайта...................................................... 16

3.2  Выбор шаблона и дизайна................................................................... 21

3.3  Продающий текст и контент................................................................. 22

3.4  Элементы навигации............................................................................. 25

4  Разработка проекта на Wagtail (CMS)....................................................... 26

4.1  Создание проекта и приложения на Wagtail (CMS)............................ 26

4.2  Установка шаблона главной страницы................................................ 30

4.3  Создание моделей блоков и панелей редактирования данных на языке Python 32

4.4  Добавление данных, ресурсов и ссылок в административной панели Wagtail (CMS)       40

4.5  Вывод данных в шаблон при помощи шаблонизатора Jinja.............. 44

4.6  Изменение структуры и стилей шаблона в соответствии с блочной моделью сайта       47

5  Перенос готового сайта в облачную платформу Divio............................ 59

ЗАКЛЮЧЕНИЕ............................................................................................. 60

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ..................................... 61

ПРИЛОЖЕНИЕ А......................................................................................... 62

ПРИЛОЖЕНИЕ Б.......................................................................................... 65

ПРИЛОЖЕНИЕ В......................................................................................... 71

ПРИЛОЖЕНИЕ Г.......................................................................................... 76

ПРИЛОЖЕНИЕ Д......................................................................................... 77

ПРИЛОЖЕНИЕ Е......................................................................................... 78

1.     Wagtail’s documentation [Электронный ресурс]. URL: https://docs.wagtail.io/

2.     Python 3.8.3 documentation [Электронный ресурс]. URL: https://docs.python.org/3/

3.     Jinja 2 documentation [Электронный ресурс]. URL: https://jinja.palletsprojects.com/en/2.11.x/

4.     Дженнифер Роббинс HTML5, CSS3 и JavaScript. Исчерпывающее руководство. 4-ое издание. 2014

5.     Wagtail Tutorial #6: Import Bootstrap Theme Into Wagtail Project [Электронный ресурс]. URL: https://www.accordbox.com/blog/wagtail- tutorials-6-import-theme-wagtail-blog/

6.     Начало работы с Bootstrap 4 [Электронный ресурс]: URL: https://bootstrap-4.ru/docs/4.0/getting-started/introduction/

7.     My             Project            [Электронный            ресурс]:            URL: https://gomockingbird.com/projects/l2u3vl9/4gXVnC

8.     Bootstrap         Guides          [Электронный          ресурс]:          URL: https://startbootstrap.com/guides/#

9.     Font Awesome CDN [Электронный ресурс]: URL: https://fontawesome.ru/get-started/

10.   Google Font [Электронный ресурс]: URL: https://fonts.google.com/