|
Национальный исследовательский университет «Высшая школа экономики»
Программа дисциплины "Интерактивный дизайн" для направления
072500.62 «Дизайн» подготовки бакалавра
|
Правительство Российской Федерации
Федеральное государственное автономное образовательное учреждение высшего профессионального образования
"Национальный исследовательский университет
"Высшая школа экономики"
Отделение дизайна
Программа дисциплины «Интерактивный дизайн»
для направления 072500.62 «Дизайн»
подготовки бакалавра
Авторы программы:
Сковородников П.Ю., ассистент,
pskovorodnikov@hse.ru
Дубейковский С.В., ассистент,
sdubeykovsky@hse.ru
Утверждена УС МИЭМ НИУ ВШЭ «16» октября 2012 г.
Ученый секретарь В.П. Симонов ________________________ [подпись]
Москва, 2012
Настоящая программа не может быть использована другими подразделениями университета и другими вузами без разрешения кафедры-разработчика программы.
Настоящая программа учебной дисциплины устанавливает минимальные требования к знаниям и умениям студента и определяет содержание и виды учебных занятий и отчетности.
Программа предназначена для преподавателей, ведущих данную дисциплину, учебных ассистентов и студентов направления 072500.62 "Дизайн", изучающих дисциплину «Интерактивный дизайн».
Программа разработана в соответствии с:
ФГОС 072500.62 "Дизайн"
Образовательных программ для направления 072500.62 "Дизайн"
Рабочим учебным планом университета для направления 072500.62 "Дизайн" утвержденным в 2012 г.
Цели освоения дисциплины
Основная цель курса – овладение знаниями и навыками проектирования разнообразных интернет ресурсов. В рамках данной дисциплины рассматриваются, как технические составляющие проектирования сайтов: изучение интернет технологий, языков разметки сайтов, техники создания сайтов, понимания принципов работы сети Интернет и веб-ресурсов в ней, получение опыта разработки элементов или целиков веб-ресурсов. Но также рассматривается и творческая составляющая, в частности овладевание творческими навыками, композицией, созданием художественного образа, проектное мышление.
Компетенции обучающегося, формируемые в результате освоения дисциплины
В результате освоения дисциплины студент должен:
Знать:
типы веб-ресурсов;
стили веб-дизайна;
принципы работы сайта;
существующие веб-технологии.
разрабатывать веб-сайты и их элементы;
использовать языки разметки сайтов (HTML, CSS);
использовать Flash-технологии при разработки сайтов;
интегрировать в верстку сайтов клиентские скрипты (JavaScript).
Иметь навыки (приобрести опыт):
создания дизайна веб-сайтов;
интеграции дизайна веб-сайта с фирменным стилем компании.
В результате освоения дисциплины студент осваивает следующие компетенции:
Компетенция
|
Код по ФГОС/ НИУ
|
Дескрипторы – основные признаки освоения (показатели достижения результата)
|
Формы и методы обучения, способствующие формированию и развитию компетенции
|
осознаёт сущность и значение информации в развитии современного общества
|
ОК-14
|
Знание основных современных технологий и умение их использовать. Понимание значения и типов информации.
|
Практические занятия, сбор и анализ информации.
|
разрабатывает проектную идею, основанную на концептуальном, творческом подходе к решению дизайнерской задачи; возможные приёмы гармонизации форм, структур, комплексов и систем; комплекс функциональных, композиционных решений
|
ПК-3
|
Умение использовать основные современные технологии для разработки проектной идеи. Решение дизайнерской задачи при создании веб-сайтов и их частей, с использование различных веб-технологий.
|
Практические занятия, сбор и анализ информации.
|
Место дисциплины в структуре образовательной программы
Дисциплина относится к вариативной части профессионального цикла и является дисциплиной по выбору. Для изучения курса требуется знание информатики на уровне среднего образования. Необходимо обладать знаниями по композиции, уметь использовать графические редакторы Adobe Photoshop и Adobe Illustrator. Формируемые навыки в ходе освоения компьютерных технологий на всех этапах дальнейшего обучения являются необходимым средством для выполнения творческих заданий по специальности.
Тематический план учебной дисциплины
3 курс, 1 модуль
№
|
Название раздела
|
Всего часов
|
Аудиторные часы
|
Самостоятельная работа
|
Лекции
|
Семинары
|
Практические занятия
|
Раздел 1. Основы создания сайтов
|
1
|
Концепция веб-сайта.
|
58
|
|
|
12
|
46
|
2
|
Типы веб-сайтов.
|
58
|
|
|
12
|
46
|
3
|
Стили веб-сайтов.
|
58
|
|
|
12
|
46
|
4
|
Влияние фирменного стиля на сайт.
|
58
|
|
|
12
|
46
|
5
|
Типографика на веб-сайтах.
|
58
|
|
|
12
|
46
|
6
|
Макетные сетки на веб-сайтах.
|
60
|
|
|
14
|
46
|
7
|
Композиция веб-ресурсов.
|
62
|
|
|
14
|
48
|
Раздел 2. Проектирование сайтов
|
1
|
Основы интерактивных веб-сайтов.
|
62
|
|
|
14
|
48
|
2
|
Готовые решения для интерактивных веб-сайтов.
|
62
|
|
|
14
|
48
|
3
|
Проектирование личного сайта-портфолио.
|
62
|
|
|
14
|
48
|
4
|
Проектирование промо-сайта.
|
62
|
|
|
14
|
48
|
Раздел 3. Web-дизайн, проектирование web-сайта
|
1.
|
Обзор различных типов web-сайтов в (домашние страницы, порталы, промо-сайты, социальные сети, интернет магазины и т.д.).
|
62
|
|
|
14
|
48
|
2.
|
Общий подход при создании и редизайне web-сайтов.
|
62
|
|
|
14
|
48
|
3.
|
Развитие визуального оформления web-сайтов от текстовых страниц до динамических приложений.
|
62
|
|
|
14
|
48
|
4.
|
Разработка структуры web-сайта с точки зрения контента и сайта.
|
62
|
|
|
14
|
48
|
Раздел 4. Web-дизайн, проектирование сайтов
|
1.
|
Проектирование корпоративного сайта
|
62
|
|
|
14
|
48
|
2.
|
Проектирование портала
|
62
|
|
|
14
|
48
|
3.
|
Проектирование интернет-магазина
|
62
|
|
|
14
|
48
|
4.
|
Проектирование промо-сайта
|
62
|
|
|
14
|
48
|
|
Итого
|
900
|
|
|
256
|
644
|
Формы контроля знаний студентов
Тип контроля
|
Форма контроля
|
4 год
|
Параметры **
|
1
|
2
|
3
|
4
|
|
Текущий (неделя)
|
Контрольная
работа
|
|
|
|
|
|
|
|
|
|
|
Эссе
|
|
|
|
|
|
Реферат
|
|
|
|
|
|
Коллоквиум
|
|
|
|
|
|
Домашнее задание
|
|
|
|
|
|
Промежуточный
|
Зачёт
|
|
|
|
|
|
Экзамен
|
*
|
|
|
|
|
Итоговый
|
Зачёт
|
|
|
|
|
|
Экзамен
|
|
|
*
|
|
Выполнение задания по проектированию веб-сайта.
|
1.1Критерии оценки знаний, навыков
Экзамен. На экзамене студент должен отчитаться о выполненных на занятиях курса заданиях, а также продемонстрировать работающий проект, включающий в себя сайт выложенный в сеть Интернет.
В процессе оценивания рассматриваются знания и умения студента об технически качественно сделанных сайтах и заданиях, а также оценивается качество художественных, композиционных, цветовых и дизайнерских решений в проектировании им сайта.
Оценки по всем формам текущего контроля выставляются по 10-ти балльной шкале.
1.2Порядок формирования оценок по дисциплине
Итоговая оценка по дисциплине складывается из суммы оценок за промежуточный контроль и итоговый.
Итоговая оценка по учебной дисциплине складывается из следующих элементов:
Выполненные задания на практических занятиях.
Выполненные задания на зачете.
На просмотрах оценивается: качество выполненных работ; наличие всех заданий и полнота их выполнения.
Итоговая оценка выводится по формуле средней взвешенной с учетом введенных весов.
В ведомость проставляется итоговая оценка.
Вес зачета в итоговой оценке – 0,6 (k); самостоятельная работа (промежуточный контроль по выполнению домашнего задания) - 0,4 (k1).
Оценку за самостоятельную работу студента преподаватель выставляет в рабочую ведомость. Накопленная оценка по 10-ти балльной шкале за самостоятельную работу определяется перед промежуточным контролем – Онакопл.
Оценка за зачет выставляется в результате итогового просмотра - Оэкз/зач.
Таким образом, итоговая оценка рассчитывается по формуле
Орезульт = k1* Онакопл + k *·Оэкз/зач
Например, оценка за экзамен- 8 баллов; за самостоятельную работу - 6, тогда итоговая оценка (ИО) складывается следующим образом:
ИО = 6*0,4 + 8*0,6 = 2,4+ 4,8 = 7,2 – округляем по правилам округления чисел и получаем итоговую оценку –7.
В ведомость проставляем итоговую оценку – 7.
На пересдаче студенту не предоставляется возможность получить дополнительный балл для компенсации оценки за текущий контроль.
Оценка за итоговый контроль блокирующая, при неудовлетворительной итоговой оценке она равна результирующей.
Содержание дисциплины
Раздел 1. Основы создания сайтов
Тема 1. Концепция веб-сайта.
История создания и развития сети Интернет. Структура сети Интернет. Типы веб-ресурсов. Принципы работы сайтов. Хостинг. Домены. DNS. Структура веб-сайта. Функциональность веб-ресурса.
Задание 1. Сбор и анализ информации о сети Интернет, сайтах и Веб-технологиях. Дискуссия о современных проблемах сети Интернет и веб-ресурсах.
Форма отчетности: ответы на вопросы в устной форме.
Тема 2. Типы веб-сайтов.
Типизация сайтов. Влияние функциональности сайтов на их тип. Проблематика существующих типов веб-сайтов.
Тема 3. Стили веб-сайтов.
Существующие стили веб-сайтов. Отличия концепций стилей. Проблематика стандартизации стилей веб-сайтов.
Тема 4. Влияние фирменного стиля на сайт.
Основы фирменного стиля. Использование элементов фирменного стиля при проектировании сайта.
Тема 5. Типографика на веб-сайтах.
Основы типографики. Шрифт. Особенности и отличия типографики для печатной продукции и мультимедиа, мониторов и веб-ресурсов.
Задание 1. Выполнение практических заданий по использованию шрифтов и текстовых композиций применительно к вебу.
Форма отчетности: выполнение практических заданий.
Тема 6. Макетные сетки на веб-сайтах.
Основы макетных сеток. Отличия и особенности макетных сеток для веб-ресурсов и мультимедиа, от сеток печатных изданий. Bootstrap и аналоги.
Задание 1. Создание ряда страниц концепций с использованием макетных сеток.
Форма отчетности: выполнение практических заданий.
Тема 7. Композиция веб-ресурсов.
Основы композиции веб-сайтов. Отличия композиции веб-сайтов от композиции печатных изданий. Особенности мультимедиа композиции. Использование анимации и интерактивности в композиции.
Задание 1. Проектирование ряда композиционных решений веб-сайтов.
Форма отчетности: выполнение практических заданий.
Раздел 2. Проектирование сайтов
Тема 1. Основы интерактивных веб-сайтов.
Основы JavaScript. Добавление JavaScript в html-страницу: локальное, на всю страницу, в виде внешнего файла. Интеграция и настройка готовых скриптов. Понятие переменной, цикла, оператора условия, функции в JavaScript.
Задание 1. Создание html-страницы с использованием JavaScript для кнопок.
Задание 2. Создание html-страницы с часами на JavaScript.
Задание 3. Создание html-страницы со сменными баннерами на JavaScript.
Задание 4. Создание html-страницы с галереей на JavaScript.
Форма отчетности: выполнение практических заданий.
Тема 2. Готовые решения для интерактивных веб-сайтов.
Структура HTML страницы, базовые знания. Теги для размещения текста. Единицы измерения в Веб-технологиях(px, pt, %, em и др.). Понятие тега и атрибута. Базовые теги. Теги для размещения текста.
Задание 1. Создание html-страницы с разными типами меню на JavaScript.
Задание 2. Создание html-страницы с разными типами меню на JavaScript.
Задание 3. Создание html-страницы с технологией ajax.
Задание 4. Создание html-страницы с галереей и использованием скрипта FancyBox.
Форма отчетности: выполнение практических заданий.
Тема 3. Проектирование личного сайта-портфолио
Создание комплекта эскизов сайта от руки, далее качественно проработанных в программах Adobe Illustrator и Adobe Photoshop, для дальнейшей верстки сайта в Adobe Dreamweaver. Сайт должен в себя включать готовые скриптовые решения.
Задание 1. Создание личного сайта-портфолио. Сайт должен включать в себе технологии HTML, CSS, JavaScript. Размер сайта 3-5 html-страниц.
Форма отчетности: готовый сайт-портфолио.
Тема 4. Проектирование промо-сайта
Создание комплекта эскизов сайта от руки, далее качественно проработанных в программах Adobe Illustrator и Adobe Photoshop, для дальнейшей верстки сайта в Adobe Dreamweaver. Сайт должен в себя включать готовые скриптовые решения.
Задание 1. Создание промо-сайта. Сайт должен включать в себе технологии HTML, CSS, JavaScript. Размер сайта 3-5 html-страниц.
Форма отчетности: готовый промо-сайт.
Раздел 3. Web-дизайн, проектирование web-сайта
Тема 1. Обзор различных типов web-сайтов в (домашние страницы, порталы, промо-web-сайт, блоги и т.д.).
Рассмотрения фактора useability (простоты использования) в процессе разработки и функционировании Интернет-сайтов.
Задание 1. Создание презентации с обзором различных типов web-сайтов в (домашние страницы, порталы, промо-web-сайт, блоги и т.д.).
Форма отчётности: проект сайта и презентация (количество слайдов 10–15 шт).
Тема 2. Общий подход при создании и редизайне web-сайтов.
Работа в команде, распределение обязанностей, последовательность разработки. Описание этапов процесса разработки. Сбор информации, изучение аудитории, анализ отрасли, подготовка брифа.
Задание 1. Создание презентации с обзором web-сайтов после редизайна.
Форма отчётности: проект сайта и презентация (количество слайдов 10–15 шт).
Тема 3. Развитие визуального оформления web-сайтов от текстовых страниц до динамических приложений.
Различные подходы и принципы. Шаблоны сайтов. Программные пакеты, используемые при разработке.
Задание 1. Создание презентации с анализом 4 web-сайтов.
Форма отчётности: проект, презентация, формат А3 горизонтальный, количество слайдов 10–15 шт.
Тема 4. Разработка структуры web-сайта с точки зрения контента и типа web-сайта.
Задание 1. Создание макета web-сайта портфолио.
Форма отчётности: проект и презентация (количество слайдов 10–15 шт).
Раздел 4. Web-дизайн, проектирование сайтов
Тема 1. Проектирование корпоративного сайта
Создание комплекта эскизов сайта от руки, далее качественно проработанных в программах Adobe Illustrator и Adobe Photoshop, для дальнейшей верстки сайта в Adobe Dreamweaver. Сайт должен в себя включать готовые скриптовые решения.
Задание 1. Создание корпоративного сайта. Сайт должен включать в себе технологии HTML, CSS, JavaScript.
Форма отчетности: готовый сайт.
Тема 2. Проектирование корпоративного портала
Создание комплекта эскизов сайта от руки, далее качественно проработанных в программах Adobe Illustrator и Adobe Photoshop, для дальнейшей верстки сайта в Adobe Dreamweaver. Сайт должен в себя включать готовые скриптовые решения.
Задание 1. Создание портала. Портал должен включать в себе технологии HTML, CSS, JavaScript.
Форма отчетности: готовый портал.
Тема 3. Проектирование интернет-магазина
Создание комплекта эскизов интернет-магазина от руки, далее качественно проработанных в программах Adobe Illustrator и Adobe Photoshop, для дальнейшей верстки сайта в Adobe Dreamweaver. Интернет-магазин должен в себя включать готовые скриптовые решения.
Задание 1. Создание интернет-магазина.
Форма отчетности: готовый интернет-магазин.
Тема 4. Проектирование промо-сайта
Создание комплекта эскизов сайта от руки, далее качественно проработанных в программах Adobe Illustrator и Adobe Photoshop, для дальнейшей верстки сайта в Adobe Dreamweaver. Сайт должен в себя включать готовые скриптовые решения.
Задание 1. Создание промо-сайта. Сайт должен включать в себе технологии HTML, CSS, JavaScript.
Форма отчетности: готовый сайт.
Образовательные технологии
При реализации учебной работы предусмотрены следующие формы проведения занятий: изучение теоретического материала по дисциплине (знакомство с основными терминами и понятиями); выполнение практических заданий по разделам дисциплины; разбор практических задач.
Оценочные средства для текущего контроля и аттестации студента
1.3Тематика заданий текущего контроля
Текущий контроль осуществляется в виде просмотров выполненных работ по темам дисциплины. В ходе данного контроля оценивается качество и количество работ, выполненных студентом.
1.4Вопросы для оценки качества освоения дисциплины
Самопроверка студентов может быть осуществлена по следующим вопросам:
1. Современные веб-технологии.
2. Языки разметки страниц.
3. Клиентские скриптовые языки.
4. Изменение параметров текста средствами CSS.
5. Типология сайтов.
6. Стилистика сайтов.
7. Типы графических файлов используемых при создании веб ресурсов.
9. Оптимизация графических файлов.
10. Типографика и шрифт в веб-сайтах.
Учебно-методическое и информационное обеспечение дисциплины
Основная литература
-
HTML и XHTML. Подробное руководство (HTML & XHTML: The Definitive Guide) Автор: Чак Муссиано и Билл Кеннеди Издательство: Символ-Плюс ISBN 978-5-93286-104-2, 5-93286-104-5, 0-596-52732-2; 2011 г.
-
CSS. Каскадные таблицы стилей. Подробное руководство (Cascading Style Sheets: The Definitive Guide) Автор: Эрик А. Мейер Издательство: Символ-Плюс ISBN 978-5-93286-107-3, 5-93286-107-X, 0-596-52773-0; 2008 г.
-
Большая книга CSS (CSS: The Missing Manual: New edition) Автор: Дэвид Макфарланд Издательство: Питер, O'Reilly ISBN 978-5-49807-501-3, 978-0596802448; 2011 г.
Дополнительная литература
HTML5. Рецепты программирования (HTML5 Cookbook) Автор: Кристофер Шмитт, Кайл Симпсон Издательство: Питер, O'Reilly ISBN 978-5-459-01265-1; 2012 г.
HTML5. Недостающее руководство Автор: Мэтью Мак-Дональд Издательство: БХВ-Петербург ISBN 978-5-9775-0805-6, 978-1-449-30239-9; 2012 г.
Справочники, словари, энциклопедии
. http://www.w3.org/
. http://www.htmlbook.ru/
Материально-техническое обеспечение дисциплины
Практические занятия проводятся в компьютерном классе оборудованном проектором и персональными компьютерами для каждого студента, с установленным программным обеспечением Adobe Dreamweaver и Adobe Photoshop.
|
