Верстаем статический web-сайт с помощью Python3x, макет и фронтэнд

Продолжаем разрабатывать sitefish - web-приложение для статического web-сайта. В очередном выпуске поговорим о макете сайта и подготовим всё необходимое для фронтэнда. Клиентский код sitefish будет использовать некоторые сторонние библиотеки, и сейчас я покажу, как их разместить в структуре файлов и каталогов sitefish, дам по этому поводу все необходимые пояснения и сделаю очередной коммит в Git-репозиторий приложения.

Что такое макет сайта?

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

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

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

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

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

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

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

Макет sitefish

Не все web-мастера могут позволить себе услуги дизайнера, верстальщика, фронтэнд-программиста и так далее... Если web-разработка стала вашим хобби, а именно с этой точки зрения мы её обсуждаем в этом блоге, то всё придётся делать самому, собственными ручками. Поэтому далее в этом пространном изложении страницы sitefish я буду верстать по макету этого сайта - CodeJ, по-крайней мере буду придерживаться его в максимально возможной степени. Макет этот никогда не рисовался отдельно "на бумаге", ибо вёрстку html-страниц делал тоже я. И задачу верстальщику ставил тоже я. Макет sitefish существует только в моей голове, постоянно трансформируется и изменяется. Базируется этот макет на фронтэнд-фреймворке Bootstrap. Пока я использую его устаревшую версию =3.4.1, которая меня, впрочем, вполне устраивает. Настало время поговорить о фронтэнде sitefish и сторонних библиотеках для него...

CSS и JavaScript для sitefish

Библиотеки для фронтэнда можно размещать в проекте различными методами. Многие web-мастера пользуются для этого публичными CDN и подключают сторонний код непосредственно в разметке html. Такой вариант обычно позволяет сэкономить некоторое количество дискового пространства на сервере. Другие предпочитают полную и всеобъемлющую автономию, не связываются с публичными ресурсами, ибо трудно предсказать нагрузку на них, а значит, и доступность CDN ресурсов в каждый конкретный момент времени. В этом обзоре я пойду по второму пути.

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

$ cd ~/workspace/sitefish/

Замечание: далее все выполненные в этой демонстрации команды будут исполнены в этом терминале, внутри корневого каталога sitefish.

Для хранения сторонних библиотек для фронтэнда на сервере мне понадобится отдельный каталог в структуре каталогов sitefish, я обычно такому каталогу даю имя vendor и располагаю его в каталоге static базового каталога приложения. Создать этот каталог можно следующей командой.

$ mkdir sitefish/static/vendor

Иду на официальный сайт Bootstrap, нахожу и копирую в буфер обмена ссылку для скачивания дистрибутива версии 3.4.1. Имея такую ссылку, я могу загрузить архив с помощью wget прямо в своём рабочем терминале.

$ wget https://github.com/twbs/bootstrap/releases/download/v3.4.1/bootstrap-3.4.1-dist.zip

Распаковываю загруженный архив в только что созданный каталог с именем vendor, для этого в моей операционной системе установлена программа unzip.

$ unzip bootstrap-3.4.1-dist.zip -d sitefish/static/vendor/

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

Загруженный с сайта разработчика zip-архив больше не нужен, его можно удалить из корневого каталога sitefish.

Кроме этого, приложение будет использовать на фронтэнде jQuery и luxon - это сторонние библиотеки JavaScript. Их я загружу с помощью npm, который уже установлен на моей машине. О npm в этом блоге мы поговорим отдельно в последующих выпусках, ибо этот инструмент заслуживает пристального внимания. В Debian установить его можно с помощью пакетного менеджера apt.

При помощи npm загружаю дистрибутивы jQuery и luxon во временный каталог и копирую нужные проекту файлы в каталог с именем vendor. И вот как после всех предпринятых действий выглядит дерево каталога static в моём файловом менеджере.

Пока это всё, что мне потребуется на фронтэнде sitefish.

Git

В предыдущем выпуске этого блога я продемонстрировал настройку Git-репозитория sitefish, и поскольку структура каталогов приложения слегка изменилась, необходимо определённым образом отразить это в настройках Git.

Только что созданный каталог vendor содержит внутри текстовые файлы сторонних библиотек, и он не должен попасть в Git. Но чуть позднее, когда я буду развёртывать sitefish на сервер сети, я клонирую на сервер Git-репозиторий приложения с сервиса github.com, а это значит, что на сервере каталог со сторонними библиотеками для фронтэнда мне будет необходимо как-то восстановить. И чтобы сделать это было максимально просто, нужно уже сейчас предпринять некоторые действия.

В корневом каталоге sitefish создаю ещё один вложенный каталог - deployment.

$ mkdir deployment

Упаковываю в архив с именем vendor.tar.gz каталог с именем vendor и размещаю этот архив в только что созданном каталоге deployment. Для этого в своём рабочем терминале выполняю следующую команду.

$ tar cvzf deployment/vendor.tar.gz -C sitefish/static/ vendor

Если посмотреть на полученный архив в каком-нибудь графическом менеджере архивов, можно увидеть, что внутри архива лежит каталог с именем vendor.

Позже, при развёртывании приложения на сервер, восстановить каталог vendor можно будет вот такой простой командой.

$ tar xvaf deployment/vendor.tar.gz -C sitefish/static/

Чтобы не забыть это обстоятельство, создаю в каталоге deployment файл с именем README.md и в этот файл копирую текст команды.

Чтобы предотвратить обработку каталога vendor системой контроля версий на десктопе, открываю в текстовом редакторе файл .gitignore.

$ vim .gitignore

И добавляю в конец этого файла ещё одну строчку.

Сохраняю изменения в файл и покидаю текстовый редактор. Настало время добавить произведённые изменения в Git.

$ git add .

Теперь, если посмотреть на статус Git-репозитория, мы увидим, что в списке изменений каталог vendor не числится.

Можно сделать очередной commit.

$ git commit -m"Create vendor dir"

И отправить его на сервер github.com - по этой ссылке можно найти версию sitefish в редакции только что сделанного коммита.

$ git push origin main

Приложение готово к вёрстке страниц сайта.

Продолжение следует

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

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