В прошлом уроке мы собрали первую карту веба. Браузер открывает страницу, HTML будет описывать ее структуру, CSS позже задаст внешний вид, JavaScript позже добавит поведение, а сервер и HTTP понадобятся для обмена данными. Пока это была карта ролей.

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

В этом курсе таким продуктом будет TaskBoard - учебный прототип сервиса для управления проектами и задачами. Представьте небольшой рабочий инструмент для команды: есть проекты, внутри проектов есть задачи, задачи движутся по доске, у каждой задачи есть статус, срок и описание. Мы не будем собирать все это сразу. Курс будет добавлять части постепенно, когда для них появится нужный инструмент.

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

Почему проект начинается с папки

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

Поэтому первый практический шаг TaskBoard - отдельная папка проекта. Ее удобно назвать taskboard-static.

Слово taskboard показывает, что внутри лежит наш учебный продукт. Слово static напоминает, что на этом этапе проект состоит из обычных файлов, которые браузер сможет открыть напрямую. Позже в курсе появятся поведение и учебные данные, но стартовая идея останется спокойной: есть папка, в ней лежат файлы проекта, браузер умеет открывать страницы из этой папки.

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

Статический прототип не пытается заменить настоящее приложение. У настоящего сервиса есть пользователи, хранение данных, права доступа, серверная логика и много технических деталей. Мы дойдем до карты этих вещей позже. Сейчас задача уже достаточная: подготовить чистое место, где TaskBoard сможет расти.

Какие экраны будут у TaskBoard

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

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

Вторая важная часть - список проектов. Команда может вести несколько направлений работы: сайт, внутренний инструмент, документацию, рекламную кампанию. Страница проектов помогает увидеть эти направления отдельно.

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

Четвертая часть - страница одной задачи. В карточке на доске места мало. Для подробностей нужен отдельный экран: описание, срок, исполнитель, комментарии, статус.

Позже появятся формы, оформление и поведение. Но уже сейчас видно, что TaskBoard не состоит из одной случайной страницы. Это небольшой продукт с несколькими связанными экранами. Поэтому проекту нужна папка, в которой этим экранам заранее найдется место.

Стартовая структура папки

К концу курса папка TaskBoard будет выглядеть примерно так:

taskboard-static/
  index.html
  projects.html
  board.html
  task.html
  css/
  js/
  data/
  assets/
  docs/

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

index.html будет главной страницей TaskBoard. Имя index часто используют для стартовой страницы папки или сайта. В следующем уроке мы впервые соберем такой файл правильно, но пока не будем разбирать его внутреннюю структуру.

projects.html будет страницей проектов. board.html будет доской задач. task.html будет страницей деталей одной задачи. Эти имена пока можно воспринимать как названия будущих экранов. Сами страницы появятся постепенно.

Папка css будет местом для оформления. Когда в блоке про CSS мы начнем задавать цвета, отступы и расположение блоков, файлы оформления будут лежать здесь.

Папка js будет местом для поведения страницы. Когда в блоке про JavaScript появятся действия пользователя, код для них будет лежать отдельно от страниц и оформления.

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

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

Папка docs будет хранить заметки о проекте. В конце курса там появится карта для будущего backend и короткая инструкция, как продолжить TaskBoard в следующем стеке.

Почему файлы раскладываются по ролям

В первом уроке мы разделили роли HTML, CSS и JavaScript. Папка проекта продолжает ту же идею на уровне файлов.

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

Такое разделение не требует от вас знания CSS или JavaScript прямо сейчас. Мы просто оставляем для них понятные места. Когда эти темы появятся, вам не придется перестраивать проект с нуля.

Есть и более практичная причина. Проекты редко остаются маленькими. Сегодня у вас одна страница и одна заметка. Через несколько уроков появятся несколько страниц, стили, изображения и данные. Если структура уже есть, новые файлы добавляются спокойно. Если структуры нет, каждый новый файл заставляет заново решать, куда его положить.

TaskBoard должен расти так, чтобы его можно было открыть через месяц и понять, что где лежит. Это важная часть разработки: хороший проект читается не только браузером, но и человеком.

Заметка README

Кроме папок, проекту полезна короткая заметка. В разработке такой файл часто называют README.md. Его открывают первым, когда хотят понять, что находится в папке.

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

README полезен даже в маленьком учебном проекте. Он помогает не потерять смысл папки. Через несколько уроков рядом появятся новые файлы, и короткое описание напомнит, что все они относятся к одному продукту.

На этом этапе README может быть обычным текстом. Если вы поставите в первой строке название TaskBoard, а ниже напишете несколько предложений, этого достаточно для учебной цели.

Что сделать сейчас

Практический результат этого урока - подготовленная папка проекта.

Создайте папку taskboard-static в удобном месте на компьютере. Внутри нее создайте пустые подпапки:

css/
js/
data/
assets/
docs/

Рядом с ними создайте файл README.md. Запишите в него короткое описание TaskBoard: учебный статический прототип сервиса для управления проектами и задачами. Ниже перечислите несколько будущих экранов: главная страница, проекты, доска задач, страница задачи.

Пока не создавайте index.html, projects.html, board.html и task.html, если задание отдельно этого не просит. Первый полноценный HTML-документ появится в следующем уроке. Сейчас важнее подготовить место и понять, зачем у каждого будущего файла будет своя роль.

После этого урока у вас должна остаться понятная стартовая точка: папка проекта, несколько пустых подпапок и короткое описание продукта. Это еще не интерфейс TaskBoard, но уже его рабочее место.