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

Актуальность выбранной темы дипломной работы обусловлена тем, что в нынешнее время огромной конкуренции в сфере продаж систем «Умный дом» очень сложно удержать внимание потребителя без определенного понимания его психологии и грамотно выстроенного лендинга, состоящего из секций, которые должны подтолкнуть к заказу. Для правильного построения лендинга, который будет поддерживать интерес клиента до момента, пока он не нажмет кнопку «Заказать проект», требуется собственная система редактирования (управления) контента с готовым привлекательным интерфейсом редактора для повышения эффективности продаж, разработанная при помощи 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/