intprog/lw01/README.md

# Лабораторная работа №1 - Макет одностраничного сайта (Figma)

## Цель работы

Освоение средств прототипирования веб-приложений.

## Ход выполнения работы

1. Выбрать тематику своего будущего сайта.
2. Зарегистрироваться в Figma или аналоге (например, Lunacy).
3. Создать макет сайта согласно требованиям.

## Выбор тематики будущего веб-сайта

В рамках данного курса вам необходимо будет создать небольшое веб-приложение.

> Разработка таких приложений обычно делятся на 2 части: разработка presentation layer (frontend) и business logic layer (backend).
>
> Frontend - это то, как веб-приложение (или веб-сайт) выглядит для пользователя.
> То есть визуальные стили, шаблоны страниц и т.д.
>
> Backend - это то, как веб-приложение работает внутри.
> То есть взаимодействие веб-сервера с системами управления базами данных, обработка логики приложения и т.д.

В рамках данной лабораторной работы важно определиться с тематикой будущего сайта.

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

Примерный список тем для сайтов предыдущих лет:

1. Портал медицинского учреждения.
2. Книжный интернет-магазин.
3. Автосервис.
4. Электронный дневник школьника.
5. Электронный журнал в вузе.
6. Учёт продукции на складе.
7. Домашний бюджет.
8. Гостиница.
9. Учёт вычислительной техники.
10. Суши-бар.
11. Строительная фирма.
12. Фирма по ремонту компьютерной техники.
13. Библиотека.
14. Отдел кадров.
15. Доска объявлений.
16. Фотогалерея.
17. Форум.
18. Новостной блог.
19. Учёт состояния здоровья сотрудников предприятия.
20. Компьютерная игра.

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

## Регистрация в Figma

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

Например, [Figma](https://www.figma.com/).
Чтобы создавать свой макет, там надо зарегистрироваться (Sign up).
К сожалению, приложение работает только на английском языке.
Однако, оно запускается прямо в браузере (в отличие от того же Adobe XD, который работает только под mac или windows и стал платным).

> В качестве альтернативы можете использовать Lunacy, Sketch, Gimp.

## Требования к макету

1. Сайт должен быть выполнен в стиле langing-page, то есть являться одностраничным и состоять из блоков (о компании, цены, отзывы, обратная связи и т.п.).
   Допускается наличие нескольких вкладок на одной странице, но лучше блоки с информацией располагать друг под другом с общей навигацией по всей странице, например, в шапке.
2. Необходимо создать два frame: для desktop и для мобильного устройства (например, iPhone 16).
3. Обязательна для использования готовая дизайн система.
   Например, [Consta Design](https://consta.design/) ([figma](https://www.figma.com/community/file/853774806786762374)), [Ant Design](https://ant.design/) ([figma](https://www.figma.com/community/file/831698976089873405)) или [Material UI](https://mui.com/material-ui/) ([figma](https://www.figma.com/community/file/912837788133317724)).
4. Все элементы на frame-ах должны быть выполнены при помощи компонентов, скопированных из макета выбранной дизайн-системы.
   Если соблюдать это правило, дальнейшая вёрстка будет сильно проще.
5. Разрешается использовать нестандартные иконки, если их нет в дизайн-системе.
   Однако они должны быть добавлены в компонент корректно.
6. В вашем макете должны быть расположены следующие блоки:

- Блок с ссылками. Например, шапка сайта.
  Обычно за это отвечает группа компонентов *Navigation* или *NavBar*.
  Должна быть настроена интерактивность, чтобы при нажатии на ссылку пользователя переносило в нужную часть frame-а.
- Блок с карточками.
  В каждой карточке можно использовать svg-иконку или какое-либо иное изображение, в т.ч. растровое.
  Карточки необходимо расположить в несколько столбцов для desktop-версии.
  В мобильной версии обычно карточки располагаются друг под другом.
  Пример карточек: блок с анонсами новостей и событий.
  Обычно за это отвечает группа компонентов *Stack*, *Grid* и *Card*.
- Блок с формой.
  Элементы формы для desktop-версии можно расположить в несколько столбцов.
  Для мобильной - в один.
  Не забудьте кнопку отправки формы!
  Пример формы: обратная связь, подписка на новости, форма входа в систему.
  Обычно за это отвечает набор компонентов *Form*, *Input*, *Label*.

7. Обязательно файл с Вашим макетом должен быть переименован из `Untitled` в формат `Фамилия Имя, группа`.
8. Ваш page с двумя frame (см. п. 2) должен быть самым первым.

## Некоторые советы

- Чтобы создать свой frame в выбранной дизайн-системе в Figma, достаточно скопировать нужный макет к себе, создать новый Page (в меню слева), сделать его первым в списке всех страниц. После этого в панели инструментов (снизу) выбрать *Frame* (или нажать `F` на клавиатуре) и на панели справа выбрать тип нового фрейма. Он добавится на страницу автоматически.
- Для копирования компонентов необходимо найти нужную страницу с компонентами, затем выделить нужный компонент, скопировать его через `Ctrl-C` и вставить на свой frame через `Ctrl+V`.
- Для изменения свойств компонента (например, необходимо поменять вид кнопки или её текст) необходимо его выделить, и в панели *Design* (справа) сверху появится список свойств компонента, которые можно свободно менять.
- Это учебный макет. Он не должен выглядеть супер-круто и не должен содержать **всю** информацию, что была бы полезна на сайте выбранной вами темы. Ограничьтесь минимальным набором информации и полей ввода на форме.