ГУАП
КАФЕДРА № 41
ОТЧЕТ ЗАЩИЩЕН С ОЦЕНКОЙ
ПРЕПОДАВАТЕЛЬ
доцент, к.т.н. |
|
|
|
Е.Л.Турнецкая |
должность, уч. степень, звание |
|
подпись, дата |
|
инициалы, фамилия |
ОТЧЕТ О ПРАКТИЧЕСКОЙ РАБОТЕ №3 |
РАЗРАБОТКА ГРАФИЧЕСКОГО ИНТЕРФЕЙСА ПРОГРАММНОГО СРЕДСТВА |
по курсу: Программная инженерия |
|
|
РАБОТУ ВЫПОЛНИЛ
СТУДЕНТ ГР. № |
4016 |
|
|
|
А.П.Бородина М.О. Жовтяк А. И. Дербишева |
|
|
|
подпись, дата |
|
инициалы, фамилия |
Санкт-Петербург 2023
Цель работы.
Проектирование графического интерфейса компьютерного тренажера.
Ход работы
На первом этапе выполняется создание прототипа сайта. Для этого был выбран сервис для графической работы. Первым делом встал вопрос между Photoshop и Figma. Нами была выбрана Figma в силу следующих обстоятельств:
Figma делает упор именно на инструментах веб-дизайна;
Figma имеет возможность бесплатного пользования в отличие от грабительских цен компании Adobe, наша компания принципиально выступает за лицензионное ПО;
Приложение очень легко и не требовательное к ресурсам компьютера.
Для создания сайта викторин продумываются пять будущих шаблонов страниц:
Главная страница;
Описание теста;
Тест с вопросом;
Страница с информацией о сайте;
Результат теста.
Перед началом создания страниц мы создали пять макетов, которые будут опорой для начала верстки сайтов. Макеты создавались с упором на минимализм, на использовании одного главного цвета, отделения главной информации друг от друга с помощью «карточек», максимально простая навигация по сайту. Сайт предназначен для использования с компьютера.
Первая страница – главная, суть которой в выборе теста для прохождения. Макет представлен на рисунке 1.
Рисунок 1 – Макет главного сайта
Вторая страница – описание теста, где клиенту объясняется суть теста, его уровень сложности и предложение его пройти. Макет представлен на рисунке 2.
Рисунок 2 – Макет страницы теста
Третья страница – вопрос теста. Эта страница будет шаблоном для создания типового вопроса теста с предложением перейти к следующему вопросу. Макет представлен на рисунке 3.
Рисунок 3 – Макет страницы вопроса
Четвёртая страница – страница с описанием авторов, то есть нас и нашими целями. Ссылка на эту страницу расположена в шапке сайта. Макет страницы представлен на рисунке 4.
Рисунок 4 – Макет страницы с информацией о сайте
Последняя страница – финал теста, который предлагает ознакомиться с результатами теста. Также есть возможность пройти тест снова или же вернуться на главную страницу. Макет представлен на рисунке 5.
Рисунок 5 – Макет финала теста
Теперь для верстки появилась опора, на которую можно ориентироваться. Страницы, собранные вручную с помощью HTML и CSS представлены на рисунке 6-10 соответственно. HTML-коды этих страниц представлены в приложениях А-Д. CSS-код представлен в приложении Е.
Рисунок 6 – Сверстанная главная страница
Рисунок
7 – Сверстанная страница описания теста
Рисунок
8 – Сверстанная страница с вопросом
Рисунок 9 – Сверстанная страница автора
Рисунок
10 – Сверстанная страница описания
результата сайта
После выполнения работы задача о создании интерфейса отмечается выполненной дашборде Kaiten. Это представлено на рисунке 11.
Рисунок 11 – Отметка выполнения задачи
3. Вывод
В ходе практической работы нами была проделана огромная работа: были обсуждены элементы дизайна сайта, созданы его прототипы и в конечном итоге реализованы сами страница сайта с помощью HTML и CSS, которые будут уже использоваться в ходе реализации web-приложения.
В ходе работы возникли проблемы с версткой. Не удалось полностью повторить дизайн прототипа из-за неполного знания CSS.