Основы Web-дизайна бренд-коммуникаций

Основы Web-дизайна бренд-коммуникаций
Микитьянц К.С., Твердохлеб И.В.
Правительство Российской Федерации
Государственное образовательное бюджетное учреждение высшего
профессионального образования
Научно-исследовательский Университет – Высшая школа экономики
Санкт-Петербургский филиал
Кафедра менеджмента
Программа учебной дисциплины
«Основы Web-дизайна бренд-коммуникаций»
Для направления 080507.62 «Менеджмент»
Для специальности 080507.65 «Менеджмент организации»
Курс V
Автор: д.э.н., проф. Микитьянц К.С.
Автор: преп. Твердохлеб И.В.
Согласовано УМО
__________________
«____»____________2011
Одобрено на заседании кафедры
Зав. Кафедрой менеджмента
____________________________
«____» _________________ 2011
Утверждено Советом Факультета
____________________________
Председатель Совета Факультета
__________________
«____»____________2011
Санкт-Петербург
2011
1
Основы Web-дизайна бренд-коммуникаций
Микитьянц К.С., Твердохлеб И.В.
I. Пояснительная записка.
Данная дисциплина рассчитана на широкую аудиторию студентов, и предполагается, что в результате
её изучения каждый из них сможет самостоятельно разрабатывать интернет-магазины на основе
специализированной системы управления контентом Simpla CMS и проектировать интерфейсы для
корпоративных сайтов и интернет-магазинов.
Целью дисциплины «Основы Web-дизайна бренд-коммуникаций» является усвоение
студентами основных понятий и принципов юзабилити web-интерфейсов, приобретение знаний о
технологиях web-дизайна.
Основные задачи дисциплины:
 знать основы языка гипертекстовой разметки HTML, каскадных таблиц стилей CSS;
 уметь разрабатывать эффективную логическую структуру и контент веб-сайтов, учитывающие психологические и
лингвистические особенности, характерные для демографического состава целевой аудитории Интернета
 научиться работать в системе управления контентом интернет-магазина Simpla CMS, создавать
шаблоны дизайна веб-страниц, размещать текстовый и мультимедиа контент на страницах сайта,
публиковать вебсайты в сети Интернет;
 понимать психологическую специфику и особенности поведения потребителей в Интернете.
Полученные знания и умения понадобятся при изучении других дисциплин специализации.
Характеристика сферы и объектов профессиональной деятельности (слушателя), изучившего дисциплину
«Основы Web-дизайна бренд-коммуникаций».
- специалист может осуществлять полноценное проектирование интерфейсов корпоративных сайтов и
интернет-магазинов бизнес-субъектов;
- специалист должен быть подготовлен к профессиональным аспектам работы по данной специализации в
рекламных, маркетинговых и сбытовых службах предприятия, в частности, для осуществления юзабилити-аудита
существующих веб-сайтов или разработки новых веб-проектов.
Формы работы студентов: посещение лекций, работа на семинарских и практических занятиях,
выполнение домашних заданий.
Виды контроля:
- текущий контроль: самостоятельная работа на практических занятиях и выполнение домашних
заданий по участию в деловой игре «Разработка интернет-магазина с использованием системы
управления контентом Simpla CMS»;
- итоговый контроль: зачёт (проводится в виде теста)
Итоговое оценивание знаний проводится по накопительной системе:
результирующая оценка рассчитывается по накопительной системе за работу в течение модуля:
 участие в лекционных занятиях (вес задания - 0,2);
 работа на практических и семинарских занятиях (вес заданий - 0,5);
 выполнение домашней работы по наполнению каталога товаров и редактированию шаблонов
дизайна веб-страниц (вес задания - 0,3)
Итоговая оценка рассчитывается путем суммирования:
- накопленной оценки (вес 0,6)
- оценки, полученной на зачёте (вес 0,4)
Итоговая оценка по 10-балльной шкале преобразуется в оценку по двухбалльной системе («зачтенонезачтено») и проставляется в зачетную ведомость.
Система преобразования оценок:
1-4 – «не зачтено»
5-10 – «зачтено»
2
Основы Web-дизайна бренд-коммуникаций
Микитьянц К.С., Твердохлеб И.В.
II. Содержание программы.
1. Вводная лекция. Предмет и содержание дисциплины.
2. Основы языка гипертекстовой разметки HTML
Структура HTML-документа. Теги и их атрибуты. Базовые элементы веб-страницы и принципы блочной
разметки. Работа с текстом и списками. Вставка гиперссылок и организация меню навигации по страницам.
3. Знакомство с CSS (каскадные таблицы стилей) — языком описания внешнего вида HTML-страниц
Подключение таблици стилей CSS в коде HTML-документа. Присвоение стилей и идентификаторов
HTML-тегам. CSS-свойства, их значения и синтаксис CSS-кода. Работа со справочниками CSS-свойств.
4. Размещение веб-сайта на сервере хостинг-провайдера
Основы работы с протоколом передачи файлов FTP, реляционными базами MySQL. Инсталлирование
скрипта интернет-магазина на основе Simpla CMS на сервере. Базовая настройка интернет-магазина.
5. Создание шаблонов дизайна веб-страниц. Редактирование контента сайта через панель
управления администратора.
Редактирование и создание шаблонов дизайна на основе технологий Smarty, HTML и CSS. Работа в
межплатформенном редакторе контента TinyMCE. Создание статической страницы на сайте.
Редактирование текста, интеграция изображений и мультимедиаконтента на страницы сайта. Создание
дерева категорий и товарных брендов каталога. Создание характеристик и свойств для товарных групп.
Настройка фильтрации товаров по свойствам. Наполнение каталога интернет-магазина товарами.
6. Юзабилити-анализ интерфейса веб-сайта.
Изучение правил построения пользовательских интерфейсов. Юзабилити-рекомендации, повышающие
эффективность продаж через интернет-магазин. Инструменты для мониторинга и анализа поведения
посетителей на сайте (Вебвизор, Google Analytics, Яндекс.Метрика). Способы верстки веб-интерфейсов
для кроссбраузерного отображения сайта.
III. ТЕМАТИКА ЗАДАНИЙ ПО РАЗЛИЧНЫМ ФОРМАМ ТЕКУЩЕГО КОНТРОЛЯ:
3.1. Тематика семинарских и практических занятий
План практических и семинарских занятий включает в себя 6 занятий по проведению деловой игры
«Разработка интернет-магазина с использованием системы управления контентом Simpla CMS»:
1. Практическое занятие №1. Деловая игра «Разработка интернет-магазина с использованием системы
управления контентом Simpla CMS».Часть 1. Разработка креативной концепции рекламного дизайна интернетмагазина фирмы.
2. Практическое занятие №2. Деловая игра «Разработка интернет-магазина с использованием системы
управления контентом Simpla CMS».Часть 2. Разработка логической структуры сайта
3. Практическое занятие №3. Деловая игра «Разработка интернет-магазина с использованием системы
управления контентом Simpla CMS».Часть 3. Публикация сайта в Интернете путём инсталляции скрипта
интернет-магазина на сервере хостинг-провайдера Spaceweb, используя возможность регистрации
доменного имени и аккаунта с бесплатным 2-недельным тестовым периодом.
4. Практическое занятие №4. Деловая игра «Разработка интернет-магазина с использованием системы
управления контентом Simpla CMS».Часть 3. Разработка шаблонов оформления веб-страниц сайта. Интеграция
логотипа, настройка дизайна кнопок, фонов, ссылок, меню и других элементов навигации.
5. Практическое занятие №5. Деловая игра «Разработка интернет-магазина с использованием системы
управления контентом Simpla CMS».Часть 5. Создание статических информационных веб-страниц сайта.
Добавление записей в блоге. Редактирование контента с помощью встроенного редактора TinyMCE:
добавление текста, изображений и мультимедиа-контента.
6. Практическое занятие №6. Деловая игра «Разработка интернет-магазина с использованием системы
управления контентом Simpla CMS».Часть 6. Проведение юзабилити-анализа интерфейса интернет-магазина.
Составление списка недостатков и ошибок пользовательского интерфейса. Постановка задач,
направленных на усовершенствование юзабилити сайта, в системе управления задачами и проектами
«Мегаплан таск-менеджер».
3
Основы Web-дизайна бренд-коммуникаций
Микитьянц К.С., Твердохлеб И.В.
4.
5.
3.2. Задания для контрольной работы.
Поставить свой логотип, отредактировав основной шаблон оформления веб-страниц.
Изменить общее колориметрическое оформление шаблонов (фон, цвет ссылок, дизайн кнопок и других
навигационных элементов).
Создать в каталоге 4 категории товаров. Для каждой категории присвоить свойства товарной категории.
Настроить фильтрацию списка товаров по свойствам. Добавить в каждую категорию минимум по 4 товара с
фотографиями, описаниями и заполненными свойствами.
Создать 2 страницы с индивидуальным контентом.
Добавить на страницу «Контакты» интерактивную карту, используя сервис Яндекс.Карты.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
Где в HTML-документе подключается таблица стилей?
FTP – это.
Тегом нумерованного списка является:
Протоколы межсерверных соединений.
Для задания стороны выравнивания элемента используется тег:
Для отступа содержимого документа от его полей используется свойство:
Для задания отступа края (границы) элемента от других элементов используется свойство:
Тегом назначения гиперссылки является:
MySQL – это:
Гарнитура шрифта задается свойством:
Размер шрифта задается свойством:
Цвет шрифта задается свойством:
Тегами назначения заголовков являются:
Тег <div> - это:
Адрес гиперссылки задается в параметре:
1.
2.
3.
3.3. Примеры вопросов для теста.
IV. ПОРЯДОК ФОРМИРОВАНИЯ ОЦЕНОК ПО ДИСЦИПЛИНЕ
Преподаватель оценивает работу студентов на семинарских и практических занятиях: активность студентов в
деловых играх, дискуссиях, правильность решения задач на при разборе кейсов. Оценки за работу на семинарских и
практических занятиях преподаватель выставляет в рабочую ведомость. Накопленная оценка по 10-ти балльной шкале
за работу на семинарских и практических занятиях определяется перед промежуточным или итоговым контролем –
Оаудиторная.
Преподаватель оценивает самостоятельную работу студентов: правильность выполнения домашних работ, задания
для которых выдаются на семинарских занятиях. Оценки за самостоятельную работу студента преподаватель
выставляет в рабочую ведомость. Накопленная оценка по 10-ти балльной шкале за самостоятельную работу
определяется перед промежуточным или итоговым контролем – Осам. работа.
Накопленная оценка за текущий контроль учитывает результаты студента по текущему контролю следующим
образом:
Онакопленная= 0,6 * Отекущий + 0,2 * Оауд + 0,2 * Осам.работа
где
РУП
Отекущий
рассчитывается как взвешенная сумма всех форм текущего контроля, предусмотренных в
Отекущий = 0,25·Одз1 + 0,25·Одз2 + 0,25·Одз3 + 0,25·Одз4
Способ округления накопленной оценки текущего контроля: в пользу студента.
Результирующая оценка за дисциплину рассчитывается следующим образом:
Орезульт = 0,6 * Онакопл + 0,4 * Озач
4
Основы Web-дизайна бренд-коммуникаций
Микитьянц К.С., Твердохлеб И.В.
Способ округления накопленной оценки промежуточного (итогового) контроля в форме зачета: в пользу студента.
На зачете студент может выполнить к пересдаче домашнее задание, которая оценивается в 1 балл.
ВНИМАНИЕ: оценка за итоговый контроль блокирующая, при неудовлетворительной итоговой оценке она равна
результирующей.
V. УЧЕБНО-МЕТОДИЧЕСКОЕ ОБЕСПЕЧЕНИЕ ДИСЦИПЛИНЫ
4.1. Базовый учебник
1. Сьюзан Уэйншенк «Интуитивный веб-дизайн». Эксмо ISBN 978-5-699-44264-5; 2011 г.
2. Дмитрий Кирсанов «Веб-дизайн: книга Дмитрия Кирсанова». Символ-Плюс ISBN 593286-003-0; 2006 г.
4.2. Дополнительная литература
1. Патрик Макнейл «Веб-дизайн. Идеи. Секреты. Советы». Питер ISBN 978-5-459-00650-6,
978-1600619724; 2012 г.
2. Сьюзан Уэйншенк «100 главных принципов дизайна». Питер ISBN 978-5-459-01077-0,
978-0321767530; 2012 г.
3. Алан Купер, Роберт Рейман, Дэвид Кронин «Алан Купер об интерфейсе. Основы
проектирования взаимодействия». Символ-Плюс ISBN 978-5-93286-132-5, 978- 0-47008411-3; 2009 г.
4. Алан Купер «Психбольница в руках пациентов»: Издательство: Символ-Плюс ISBN
978-5-93286-168-4, 0-672-31649-8; 2009 г.
Практич
Лекции
Наименование темы
Всего
№
Всего
Аудиторные
занятия
Самост. работа
VI. ТЕМАТИЧЕСКИЙ РАСЧЁТ ЧАСОВ.
5 КУРС
1
2
Вводная лекция. Предмет и содержание дисциплины.
Основы языка гипертекстовой разметки HTML.
3
15
1
5
1
3
2
2
10
3
Знакомство с CSS (каскадные таблицы стилей) — языком 17
7
3
4
10
описания внешнего вида HTML-страниц.
4
Размещение веб-сайта на сервере хостинг-провайдера.
17
7
3
4
10
5
Создание шаблонов дизайна веб-страниц. Редактирование 15
5
3
2
10
контента сайта через панель управления администратора.
5
Основы Web-дизайна бренд-коммуникаций
6
Микитьянц К.С., Твердохлеб И.В.
Юзабилити-анализ интерфейса веб-сайта.
Домашнее задание
15
13
Подготовка к зачету
13
Итого
108
5
3
2
10
13
13
30
16
14
78
Автор программы: __________________ /Микитьянц К.С./
Автор программы: __________________ /Твердохлеб И.В./
6