Публикации Проектирование и разработка интерфейсов пользователя

Всероссийский сборник статей и публикаций института развития образования, повышения квалификации и переподготовки.

Язык издания: русский
Периодичность: ежедневно
Вид издания: сборник
Версия издания: электронное сетевое
Публикация: Проектирование и разработка интерфейсов пользователя
Автор: Гуськова Екатерина Олеговна

Государственное бюджетное профессиональное образовательное учреждение «Нижегородский Губернский колледж»Методическая комиссия «Информатика и вычислительная техника» Допущен к защите:преподаватель _____________ Н.С. Тараканова, П.А. Васильева «28»__мая__2022г.ОТЧЕТ ПО УЧЕБНОЙ ПРАКТИКЕПМ.08 Разработка дизайна веб-приложенийРуководитель: __________ Н.С. Тараканова, П.А. Васильева Студент: _______________ Гуськова Е.О. Специальность, группа: 09.02.07, 22В Нижний Новгород2022 г.СодержаниеВведениеОсновной целью учебной практики является закрепление теоретических знаний, полученных во время обучения.Задачами в период прохождения практики являются:Восстановление стилей css. Добавление изображений на сайт. Добавление анимации. Адаптивная вёрстка на мобильный телефон.Разработка дизайна, учитывая удобство пользования интерфейсом. Создание мобильной версии.Создание многостраничного сайта. Связывание необходимых страниц между собой. Добавление адаптивности для мобильной версии. Добавление анимации на различные элементы.Подготовка теории на свободную тему.Осуществление задания по добавлению адаптивности на сайт с помощью медиа-запросов. Модуль 08.01 Проектирование и разработка интерфейсовТеоретическая частьВеб-разработкаВеб-разработка – создание веб-сайта или веб-приложения, основными этапами которого являются веб-дизайн, вёрстка страниц, программирование на стороне клиента и сервера, с помощью языков разметки, языков программирования и языка описания внешнего вида страницы.Как упростить вёрстку в html и cssРазработка веб-сайтов, вёрстка страниц занимает немало времени. Хотелось бы представить несколько плагинов, которые могут ускорить процесс разработки, сделать её более эффективной.1 плагин – Emmet: позволяет использовать сокращения кода вместо того, чтобы писать целые конструкции. Этот плагин уже встроен в VSCode.Например, достаточно ввести буквы bgc и нажать клавишу Tab, после этого код автоматически развернётся в background-color (рис.1.1).Рис.1.1Или можно ввести буквы df нажать клавишу Tab или Enter, после этого код автоматически развернётся в display:flex(рис.1.2).Рис.1.2Буквы jcc разворачиваются в justify-content: center(рис.1.3).Рис.1.3Буквы aic разворачиваются в align-items: center (рис.1.4).Рис.1.4Также этот плагин позволяет сразу создать блок и его класс. Например, прописываем тег div, через точку прописываем его class container (рис.2.1), и Emmet разворачивает тег с соответствующим классом(рис2.2).Рис.2.1Рис.2.22 плагин – CSS Peek: показывает всплывающее окошко с CSS во время работы над HTML. Это упрощает работу и позволяет не искать нужное свойство среди множества классов в большом CSS-файле(рис.3.1)Рис.3.13 плагин – Prettier– code formatter и Beautify: Приводят код в структурный вид. Позволяют форматировать html, css, js и другие файлы.Также хотела бы добавить то, что, если нужно написать много одинаковых элементов, например, ссылок (a), то можно написать a*и количество этих элементов (рис.4.1) после чего нажать Tab (рис.4.2).Рис.4.1Рис.4.2Практическая частьБыло осуществлено задание вёрстка сайта по макету. (рис.1, рис.2)Рис.1Рис.2Было осуществлено задание по добавлению адаптивности на сайт с помощью медиа-запросов. Реализованы планшетная (рис.3) и мобильная версии (рис.4, рис.5)Рис.3Рис.4Рис.5Было выполнено задание по восстановлению стилей css. Добавление изображений на сайт (рис.6, рис.7). Добавление анимации. Адаптивная вёрстка на мобильный телефон (рис.8, рис.8.1, рис.8.2).Рис.6Рис.7Рис.8Рис.8.1Рис.8.2Была реализована разработка четырёхстраничного сайта по макету (рис10., рис.11, рис.12, рис.13, рис.14). Связывание необходимых страниц между собой. Добавление адаптивности для мобильной версии (рис.15, рис.16, рис.17, рис.18, рис.19, рис.20). Добавление анимации на различные элементы.Рис.10Рис.11Рис.12Рис.13Рис.14Рис.15Рис.16Рис.17Рис.18Рис.19Рис.20ЗаключениеВ результате учебной практики были закреплены теоретические знания, полученные во время обучения.Была реализована разработка четырёхстраничного сайта по макету. Связывание необходимых страниц между собой. Добавление адаптивности для мобильной версии. Добавление анимации на различные элементы.Выполнено задание по восстановлению стилей css. Добавление изображений на сайт. Добавление анимации. Адаптивная вёрстка на мобильный телефон.Было осуществлено задание по добавлению адаптивности на сайт с помощью медиа-запросов. Реализованы планшетная и мобильная версии.Осуществлено восстановление CSS-свойств по скриншоту.Реализована разработка дизайна, учитывая удобство пользования интерфейсом и создана мобильная версия.Также выполнение задание по созданию многостраничного сайта и его адаптивной версии.Используемые источники