Рабочая программа учебной дисциплины графический дизайн и верстка сайтов москва 2021
 Скачать 323.71 Kb.
|
|
НЕГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ ЧАСТНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ МОСКОВСКИЙ ФИНАНСОВО-ПРОМЫШЛЕННЫЙ УНИВЕРСИТЕТ СИНЕРГИЯ ОМСКИЙ ФИЛИАЛ РАБОЧАЯ ПРОГРАММА УЧЕБНОЙ ДИСЦИПЛИНЫ ГРАФИЧЕСКИЙ ДИЗАЙН И ВЕРСТКА САЙТОВ Москва 2021 2 1. Цель изучения учебной дисциплины Графический дизайн и верстка сайтов Целью освоения учебной дисциплины является приобретение теоретических и практических навыков в области графического дизайна и верстки сайтов овладение знаниями по основным программным средствам создания дизайна веб-страниц; формирование навыков по верстке страниц с помощью HTML5 и CSS3; овладение знаниями по администрированию и технической поддержки сайтов Планируемые результаты освоения учебной дисциплины Формируемые компетенции Перечень планируемых результатов освоения дисциплины ПК 1.1 Способен создавать визуальный дизайн элементов графического пользовательского интерфейса Знать: − правила перспективы, колористики, композиции, светотени и изображения объема − требования целевых операционных систем и платформ к пиктограммами элементам управления − общие принципы анимации − правила типографского набора текста и верстки. Уметь: − оптимизировать интерфейсную графику под различные разрешения экрана − создавать графические документы в программах подготовки растровых изображений − создавать графические документы в программах подготовки векторных изображений − рисовать анимационные последовательности и раскадровку − подбирать графические метафоры, максимально точно соответствующие назначению разрабатываемого элемента управления − работать в границах заданного стиля. ПК 1.2 Способен создавать графические материалы для включения в графический пользовательский интерфейс Знать − основы верстки с использованием языков разметки − основы верстки с использованием языков описания стилей − основы программирования с использованием сценарных языков − технические требования к интерфейсной графике − техники и методики подготовки графических материалов. Уметь: − подготавливать графические материалы в программах подготовки растровых изображений − подготавливать графические материалы в программах подготовки векторных изображений. 3 3. Содержание учебной дисциплины Графический дизайн и верстка сайтов 3.1. Распределение учебного времени, выделенного на контактную работу обучающихся с преподавателем, на самостоятельную работу обучающихся и занятия с применением дистанционных образовательных технологий Наименование тем учебной дисциплины Общая трудоемкость, ч. Всего, ч. Контактная работа, ч Самостоятельная работа, ч Форма аттестации Лекции Лабораторные работы Практические, семинарские занятия и др. занятия 1 2 3 4 5 6 7 9 10 1. Тема 1. Основы разработки сайтов 12 - - - 8 4 - 2. Тема 2. Основы дизайна и графики 18 - - - 14 4 - 3. Тема 3. Основные инструменты работы с UI/UX аналитикой 18 - - - 14 4 - 4. Тема 4. Основы Adobe Photoshop 24 - - - 20 4 - 5. Тема 5. Верстка сайтов (HTML5+CSS3) 26 - - - 22 4 - 6. Тема 6. Разработка сайтов на основе CMS 22 - - - 18 4 - 7. Тема 7. Создание портфолио и подготовка к собеседованию 22 - - - 18 4 - Промежуточная аттестация - - - Зачёт Итого 142 - - - 114 28 - 4 3.2. Содержание тем учебной дисциплины Графический дизайн Тема 1. Основы разработки сайтов Введение. Принципы и понятия сайтов. Этапы разработки сайтов. Автоматизация разработки. Хостинг и DNS. Тема 2. Основы дизайна и графики Введение в компьютерную графику. Программные средства создания растровых изображений. Программные средства создания векторных объектов. Тема 3. Основные инструменты работы с UI/UX аналитикой Универсальные принципы дизайна. Проектирование дизайна (UX UI). Описание бизнес-требований. Тема 4. Основы Adobe Photoshop Понятие растрового изображения, рабочая область, основные инструменты и палитры программы Adobe Photoshop. Создание, открытие, сохранение файлов. Цветовые пространства. Координаты цвета. Инструменты выделения. Инструменты рисования и раскрашивания. Создание и использование градиентов. Создание кистей. Основные инструменты ретуши изображений. Методы коррекции. Корректирующие слои изображений. Тема 5. Верстка сайтов (HTML5+CSS3) Введение. Принципы и понятия сайтов. Этапы разработки сайтов. Автоматизация разработки. Хостинг и DNS. Введение вверстку. Работа с регистратором доменов. Работа с хостингом. Работа с почтой. Первый сайт основы. Разработка сайта. Шапка страницы. Разработка сайта. Сетка. Разработка сайта. Нижний колонтитул 5 Разработка сайта. Страницы-сателлиты. Разработка сайта. Адаптивный дизайн. Разработка сайта. Создание меню сайта. Тема 6. Разработка сайтов на основе CMS Выбор CMS. Установка и настройка CMS. Тема 7. Создание портфолио и подготовка к собеседованию Как и где искать работу начинающему специалисту Как создать портфолио Собеседование и подготовка к нему. 6 4. Учебно-методическое и информационное обеспечение учебной дисциплины 4.1 Перечень учебных изданий, информационно-справочных систем, Интернет-ресурсов № Основные источники 1. Митин АИ. Компьютерная графика справочно-методич. пособие / АИ. Митин, Н.В. Свертилова. – е изд, стер. – М Берлин ДиректМедиа, 2016. – 252 с. (Стр. 72-235) URL: http://biblioclub.ru/ 2. Шпаков ПС. Основы компьютерной графики учеб. пособие / ПС. Шпаков, ЮЛ. Юнаков, МВ. Шпакова; Сибирский Федеральный университет. – Красноярск Сибирский федеральный университет, 2014. – 398 с. (Стр. 6-166) URL: http://biblioclub.ru/ 3. Шульдова, С.Г. Компьютерная графика учебное пособие / С.Г. Шульдова. – Минск РИПО, 2020. – 301 сил, табл. (Стр. 95-202) URL: https://biblioclub.ru/ 4. Кэтрин Айсманн, Уэйн Палмер, Ретуширование и обработка изображений в Photoshop = Adobe Photoshop Restoration & Retouching. — е изд. М «Вильямс», 2007. — С. 560. 5. Ковешникова НА. Дизайн история и теория. – М Омега-Л, 2009 6. Мелихов Ю.Е., Малуев ПА. Дизайн в рекламе. М.:ООО Журнал Управление персоналом, 2006. № Дополнительные источники 1. Цветокоррекция. Электронный ресурс. – Режим доступа https://dic.academic.ru/. 2. Цветокоррекция в Фотошопе: 5 способов сделать коррекцию цвета. Электронный ресурс. – Режим доступа https://prophotos.ru/. 3. О цветокоррекции. Электронный ресурс. – Режим доступа https://helpx.adobe.com/. 4. Базовая цветокоррекция фотографий для новичков. Зачем она нужна и как ее делать. Электронный ресурс. – Режим доступа http://mediasvod.ru/. 5. Цветовая коррекция в Photoshop. Электронный ресурс. – Режим доступа https://compuart.ru/. 6. Основные понятия цветовой коррекции. Цветовой баланс. Электронный ресурс. – Режим доступа https://adobeps.ru/. 7. Заика, А. Цифровое фото и ретушь в Photoshop CS / А. Заика. СПб., 2006. C. 400. 8. Редактирование изображений. Электронный ресурс. – Режим доступа https://dic.academic.ru/. 9. Секреты гламурной ретуши фотографий. Электронный ресурс. – Режим доступа http://www.photo-revue.ru/. 10. 5 ошибок в ретуши, которые допускают новички. Электронный ресурс. – Режим доступа http://www.photo-revue.ru/. № Интернет ресурсы 1. Видеоматериал. Что такое растровая и векторная графика Что такое растровая и векторная графика. Чем они отличаются, какие у них преимущества. — https://www.youtube.com/ 2. Видеоматериал. История компьютерной графики. История распространения компьютерной графики в примерах. — https://www.youtube.com/ 3. Сайт журнала «КомпьюАрт». Статья «Pixelmator — популярный графический редактор под Mac». URL: https://compuart.ru/ 4. Официальный портал фирмы Adobe. Описание программы Adobe Photoshop. URL: https://www.adobe.com/ 5. Видеоматериал. Учим Photoshop за 1 час. Описание базовых функций Photoshop (фотошоп). — https://www.youtube.com/ 6. Видеоматериал. Мастер-класс по работе в Photoshop CC. Мастеркласс по работе в Photoshop CC (фильтры, слои, маски. — https://www.youtube.com/ 7 7. Сайт журнала «КомпьюАрт». Статья Н. Дубина Мобильные приложения для дизайнеров, художников и верстальщиков. URL: https://compuart.ru/ 8. Сайт журнала «КомпьюАрт». Статья Создание векторной заливки с фоновым узором в CorelDRAW» URL: https://compuart.ru/ 9. Официальный портал фирмы Adobe. Описание программы Adobe Illustrator. URL: https://www.adobe.com/ 10. Видеоматериал. Мини-курс «Adobe Illustrator для новичков. Что такое векторная графика, её сферы применения. Интерфейс программы Adobe Illustrator. — https://www.youtube.com/ 11. https://www.figma.com/ - Сайт для проектирования дизайн-макетов интерфейсов 12. https://www.figma.com/resources/assets/material-icons-outline/ - Плагин для использования иконок 13. http://figmadesign.ru/1-0-0-obzor-figma.html - Обзор Figma 14. http://figmadesign.ru/3-2-0-interfejs-redaktirovanija-fajla.html - Интерфейс редактирования файла 15. http://figmadesign.ru/3-3-0-panel-instrumentov-figma.html - Панель инструментов 16. Как начинающему дизайнеру создать себе портфолио Электронный ресурс. – Режим доступа https://awdee.ru 17. Пример портфолио Электронный ресурс. – Режим доступа http://www.minimallyminimal.com 18. Принципы организации портфолио дизайнера. Электронный ресурс. – Режим доступа https://habr.com/ru 19. Как правильно составить портфолио дизайнера, чтобы получить работу. Электронный ресурс. – Режим доступа https://yandex.ru 4.2 Учебно-методическое обеспечение учебной дисциплины Программа учебной дисциплины обеспечивается учебно-методической документацией. Внеаудиторная самостоятельная работа обучающихся методически обеспечена учебно-методическими материалами, входящими в состав учебно- методических комплексов. Каждый обучающийся имеет доступ к электронно-библиотечной системе. Электронно-библиотечная система обеспечивает возможность индивидуального доступа, для каждого обучающегося из любой точки, в которой имеется доступ к сети Интернет. 8 5. Материально-техническое обеспечение учебной дисциплины Материально-техническое обеспечение учебной дисциплины включает в себя Учебные аудитории для проведения занятий лекционного типа, практических занятий, текущего контроля и промежуточной аттестации мебель аудиторная (столы, стулья, доска аудиторная, стол преподавателя, стул преподавателя, персональный компьютер, мультимедийное оборудование проектор, экран, наглядные пособия. Помещение для самостоятельной работы обучающихся специализированная мебель и компьютерная техника с возможностью подключения к сети Интернет и обеспечением доступа в электронную информационно-образовательную среду Филиала. Для обучающихся в Филиале созданы условия для функционирования электронной информационно-образовательной среды, включающей в себя электронные информационные ресурсы, электронные образовательные ресурсы, телекоммуникационные технологии. Всем обучающимся предоставлен доступна образовательную платформу, которая обеспечивает освоение учебной дисциплины в полном объёме независимо от места и времени нахождения обучающихся. Обучающиеся обеспечены доступом к электронной информационно- образовательной среде Филиала из любой точки, в которой имеется доступ к сети Интернет. Лицензионное программное обеспечение − Microsoft Windows 7 pro; Операционная система Microsoft Windows 10 pro; Операционная система Microsoft Windows Server 2012 R2; Программное обеспечение Microsoft Office Professional 13; Программное обеспечение Microsoft Office Professional; Комплексная Система Антивирусной Защиты Kaspersky Total Security для бизнеса Russian Edition; Программа Adobe Photoshop; Программа Adobe Illustrator; Программа Adobe InDesign. 9 6. Методические указания для обучающихся В процессе освоения учебной дисциплины используются такие виды учебной работы, как лекция, практические работы, а также различные виды самостоятельной работы обучающихся по заданию преподавателя, направленные на развитие навыков использования профессиональной лексики, закрепление практических профессиональных знаний и умений. 6.1 Методические указания для обучающихся при работе над конспектом лекций вовремя проведения лекции Лекция – систематическое, последовательное, монологическое изложение преподавателем учебного материала, как правило, теоретического характера. В процессе лекций рекомендуется вести конспект, что позволит впоследствии вспомнить изученный учебный материал, дополнить содержание при самостоятельной работе с литературой, подготовиться к экзамену. Следует также обращать внимание на категории, формулировки, раскрывающие содержание тех или иных явлений и процессов, научные выводы и практические рекомендации, положительный опыт в ораторском искусстве. Желательно оставить в рабочих конспектах поляна которых делать пометки из рекомендованной литературы, дополняющие материал прослушанной лекции, а также подчеркивающие особую важность тех или иных теоретических положений. Любая лекция должна иметь логическое завершение, роль которого выполняет заключение. Выводы по лекции подытоживают размышления преподавателя по учебным вопросам. Формулируются они кратко и лаконично, их целесообразно записывать. В конце лекции, обучающиеся имеют возможность задать вопросы преподавателю по теме лекции. 6.2 Методические указания для обучающихся по выполнению практических работ Практические работы выполняются в соответствии с учебным планом при последовательном изучении тем учебной дисциплины. Прежде чем приступать к выполнению практической работы, обучающемуся необходимо − ознакомиться с соответствующими темами учебной дисциплины порекомендованной учебной литературе − ознакомиться с порядком проведения занятия, критериях оценки результатов работы − ознакомиться с заданием и сроках выполнения, о требованиях к оформлению и форме представления результатов − настроить под руководством преподавателя инструментальные средства, необходимые для проведения практической работы. Входе выполнения практической работы необходимо следовать технологическим инструкциям, использовать материал лекций, рекомендованных учебников, источников интернета, активно использовать помощь преподавателя на занятии. 10 6.3 Методические указания для обучающихся по организации самостоятельной работы Самостоятельная работа обучающихся направлена на самостоятельное изучение отдельных тем/вопросов учебной дисциплины. Самостоятельная работа является обязательной для каждого обучающегося, ее объем по дисциплине определяется учебным планом. При самостоятельной работе обучающиеся взаимодействуют с рекомендованными материалами при минимальном участии преподавателя. Работа с литературой (конспектирование. Самостоятельная работа с учебниками, учебными пособиями, научной, справочной и популярной литературой, материалами периодических изданий и Интернета, статистическими данными является наиболее эффективным методом получения знаний, позволяет значительно активизировать процесс овладения информацией, способствует более глубокому усвоению изучаемого материала, формирует у обучающихся свое отношение к конкретной проблеме. Изучая материал по учебной книге (учебнику, учебному пособию, монографии, и др, следует переходить к следующему вопросу только после полного уяснения предыдущего, фиксируя выводы и вычисления (конспектируя, в том числе те, которые в учебнике опущены или на лекции даны для самостоятельного вывода. Особое внимание обучающийся должен обратить на определение основных понятий учебной дисциплины. Надо подробно разбирать примеры, которые поясняют определения. Рекомендуется составлять опорные конспекты. Выводы, полученные в результате изучения учебной литературы, рекомендуется в конспекте выделять. При самостоятельном решении задач нужно обосновывать каждый этап решения, исходя из теоретических положений учебной дисциплины. Вопросы, которые вызывают у обучающегося затруднение при подготовке, должны быть заранее сформулированы и озвучены вовремя занятий в аудитории для дополнительного разъяснения преподавателем. Самостоятельная работа является обязательной для каждого обучающегося, ее объем по учебной дисциплине определяется учебным планом. При самостоятельной работе студенты руководствуются методическими рекомендациями по учебной дисциплине при минимальном участии преподавателя. 7. Оценочные материалы для текущего контроля успеваемости и промежуточной аттестации обучающихся по учебной дисциплине 1. Текущий контроль по учебной дисциплине проводится в форме устного опроса, выполнения практических работ, решения практических вопросов. 2. Промежуточная аттестация по учебной дисциплине проводится в форме зачета в виде автоматизированного тестирования. Тест включает в себя тестовые задания нескольких видов, предполагающих оценку различных аспектов профессиональной компетентности обучающихся. Количество заданий в тесте – 25. За каждый правильный ответ обучающемуся выставляется 4 балла. Время прохождения тестирования составляет не более 60 минут. 11 Для сопоставления пятибалльной системы оценки и балльной системы оценки приводится следующая шкала Максимальное количество баллов равно 100. Перевод полученных баллов в отметку производится следующим образом 90-100 баллов «отлично»/зачтено; 80-89 баллов очень хорошо»/зачтено; 70-79 баллов «хорошо»/зачтено; 50-69 баллов «удовлетворительно»/зачтено; менее 50 баллов «неудовлетворительно»/не зачтено. Типовые тестовые задания 1. Поставьте в соответствие область применения компьютерной графики и объект, используемый в данной области а) деловая б) научная в) иллюстративная г) конструкторская 1) график роста прибыли 2) диаграмма распределения светового потока 3) обложка журнала 4) чертеж детали. 2. Расположите в порядке возрастания разрешающие способности экрана количество точек экрана а) 640 наб на 600; в) 1024 наг на 1024. 3. Метод представления изображения в виде совокупности отрезков и дуг – это а) фрактальный б) растровый в) векторный г) пиксельный. 4. Если для создания реалистичной модели объекта используются геометрические примитивы (куб, шар, конус и при гладкие, так называемые сплайновые поверхности, то речь идет о … графике. 5. Расположите в хронологической последовательности ключевые события в истории компьютерной графики а) получено первое цифровое изображение в национальном бюро стандартов (США б) выходит первый, созданный на компьютере фильм Эдварда Зайека; в) Вольфганг Лайзер основывает Музей Цифрового Искусства 12 г) впервые в мире проводится персональная выставка работ по компьютерному искусству. 6. Чем, в традиционном представлении отличается веб-приложение от сайта а) традиционный сайт статичен, в то время как веб-приложение интерактивно всегда б) это целиком одинаковые вещи, в разных контекстах обозначающиеся по-разному; в) традиционный сайт всегда интерактивен, а веб-приложение статично г) веб-приложению для работы нужен интернета сайту он необязателен. К основным этапам создания сайтов не относится следующая работа а) первичная настройка рабочего места разработчика б) определение целей сайта и требований к нему в) разработка дизайн-макета; г) верстка дизайн-макета. 8. С чего следует начинать создание сайта ас определения целей сайта и требований к нему б) с разработки дизайн-макета; в) с написания ТЗ; г) дизайна приложения. 9. Какого раздела нет в классическом ТЗ: а) общих слов б) страницы с описанием в) описания контента. 10. Дизайн-макет сайта это а) нечто среднее между блочной схемой и прототипом выполненное графически б) текстовое описание страниц сайта/приложения; в) описание технических решений, применяемых при создании сайта г) блочное описание принципов взаимодействия элементов сайта/приложения. 11. Пиксель изображения растровой графики имеет такие характеристики, как а) размер, положение и цвет б) позиционирование, информация о цвете и информация о яркости в) расстояние, позиционирование и размер. 12. Разрешение – это а) величина, определяющая количество точек на единицу площади б) параметр, определяющий формат файла при хранении информации 13 в) система воспроизведения изображения. 13. Рабочая область программы Adobe Photoshop включает в себя а) инструменты выделения, кадрирования, рисования, ретуширования б) возможности кодирования цифровой информации, примитивы и инструменты работы с текстом в) панель инструментов, панель управления, палитры. 14. К палитрам программы можно отнести а) история, слои, образцы б) инструменты, находящиеся слева в рабочей области в) открывающееся меню каждого инструмента. 15. Параметры для инструментов в рабочей области отображаются а) различные в зависимости от выбранных инструментов б) одинаковые для выбранных инструментов в) одинаковые для одной группы инструментов. 16. Каждый инструмент, представленный в программе, является а) единственным в своей группе б) может иметь аналоги, представленные в палитре в) может иметь в группе несколько инструментов с разными свойствами. 17. Рабочая область программы а) всегда остается без изменений б) может быть изменена под конкретные цели и задачи в) может быть изменено основное меню. 18. Панель инструментов содержит а) инструменты для создания и редактирования изображений б) основные инструменты выделения и рисования в) инструменты ретуши, изменения цвета, коррекции. 19. Персонаж это а) собирательный образ пользователя сайта, представляющий один сегмент целевой аудитории сайта б) собирательный образ пользователей сайта, представляющий собой всю целевую аудиторию сайта в) собирательный образ пользователя товаров организации, для которой разрабатывается сайт г) собирательный образ пользователя сайта использующийся для настройки рекламной кампании. 20. Отличия различных сегментов аудитории сайта не касаются а) технической осведомленности работы сайтов б) целей пользователей 14 в) природы пользования сайтом г) поведенческих шаблонов. 21. Мы проектируем сайт для а) ключевого персонажа б) второстепенного персонажа в) главного персонажа г) основного пользователя. 22. По статистике на главную страницу сразу попадает … % пользователей а) 20; б) 50; в) 70; г) 40. 23. Контент это а) информационное наполнение сайта б) текстовое наполнение сайта в) код сайта г) материал, загруженный пользователем. 24. CMS это а) система управления содержимым (контентом); б) система написания сайта в) система адресации на сайте г) программа, для быстрого создания сайта. 25. Процесс создания универсального дизайна предполагает … шагов. а) 6; б) 7; в) 5. |