intprog/lw01
2023-02-17 10:56:14 +04:00
..
README.md Init 2023-02-17 10:56:14 +04:00

Лабораторная работа №1 - Создание макета сайта (Figma)

Цель работы

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

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

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

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

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

Разработка таких приложений обычно делятся на 2 части: разработка frontend и 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. Чтобы создавать свой макет, там надо зарегистрироваться (Sign up). К сожалению, приложение работает только на английском языке. Однако, оно запускается прямо в браузере (в отличие от того же Adobe XD, который работает только под mac или windows и стал платным).

В качестве альтернативы можете использовать Gimp, Adobe XD, Adobe Photoshop.

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

  1. Два frame: для desktop и для мобильного устройства (например, iPhone 14).
  2. На макете должны быть следующие блоки:
  • Блок с ссылками. Например, шапка сайта. Ссылки можно оформить в виде текста с подчёркиванием.
  • Блок с компонентами. На каждом компоненте можно использовать svg-иконку. Компоненты необходимо расположить в несколько столбцов для desktop-версии.
  • Блок с таблицей. Для мобильной версии можно добавить горизонтальную прокрутку.
  • Блок с формой. Элементы формы для desktop-версии можно расположить в несколько столбцов. Для мобильной - в один.
  1. Обязательно черновик должен быть переименован в формат Фамилия Имя, группа.

Сдача лабораторной работы

Для очной защиты достаточно показать работающий макет преподавателю.

В случае дистанционной сдачи л/р необходимо скинуть ссылку на макет (проверьте её в режиме инкогнито / приватного окна) в эту форму и написать об этом в чате telegram.