УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

ЗИЭ-402, ЗИТм-401. «Web-программирование» Весна-осень 2021. «Web-дизайн» Осень 2020

Дисциплина «Web-программирование»

Задание к осенней сессии 2021

1. Выполнить курсовую работу  – создать сайт на любой CMS на свободную тему.

Курсовая работа должна быть размещена на бесплатном хостинге. Рекомендуется хостинг https://beget.com/ru/free-hosting

Этапы работы:

Этап 1. Выбрать тему сайта, создать структуру сайта, можно в виде вложенного списка. 

Минимальная структура:

  • Главная страница с адаптивным слайдером
  • Раздел 1
    • раздел 1.1
    • раздел 1.2
  • Раздел 2
    • раздел 2.1
    • раздел 2.2
  • Контакты с формой обратной связи и картой Google или Яндекс.
  • Карта сайта для пользователей.
  • Карта сайта для поисковых систем.

Этап 1. Собрать контент для сайта: тексты, фото, видео.

Этап 2. Создать прототипы страниц. Прототипов должно быть два: для главной страницы и для типовой. При проектировании дизайна предусмотреть наличие адаптивного слайдера на главной странице.

Ознакомительные материалы по прототипам можно скачать по адресу https://yadi.sk/d/50wX34eQwJvJkA 

Видео взято с курсов повышения квалификации, поэтому может быть отвлечение ведущего на аудиторию. Вы можете воспользоваться любыми другими обучающими материалами.

Прототип можно сделать в цветном или черно-белом варианте, в графической программе или аккуратно от руки на выбор. Обязательно должны быть подписи к блокам. Примеры прототипов приведены ниже. Щелкните по изображению для увеличения.

Прототип сайта

Этап 3.  Согласно прототипам создать дизайны в Figma. Для этого необходимо зарегистрироваться на сайте Figma.com

Технологии Figma изучить самостоятельно. Обучающие материалы можно скачать по адресу https://yadi.sk/d/UbaEJrsltCUMww

Видео взято с курсов повышения квалификации, поэтому может быть отвлечение ведущего на аудиторию. Вы можете воспользоваться любыми другими обучающими материалами.

Этап 4.  По дизайнам в Figma создать два HTML шаблона (для главной страницы и для типовой), адаптивные под различные устройства. Технологию адаптивной верстки выбрать самостоятельно (Flex, Bootstrap, медиазапросы или др.).

Этап 5. Реализовать HTML-шаблоны на CMS по выбору.

Этап 6. Реализовать структуру сайта и наполнить сайт контентом.

Одним из важнейших критериев при оценке сайта будет проверка возможности работать контент-менеджеру без HTML-кода. Т.е. все тексты, изображения, видео должны иметь возможность вставки на сайт без использования знаний HTML.

Этап 7. Написать пояснительную записку. Скачать требования к оформлению ПЗ

______________________

Весна 2021

Домашняя контрольная работа на весенний семестр 2021 г.

1. Изучить язык программирования PHP. Обучающие материалы – бесплатный видеокурс Михаила Русакова
https://blog.myrusakov.ru/freephp7.html
Сдавать эти уроки не надо, только для самостоятельного обучения.

2. Выполнить контрольную работу.
- методические указания к контрольной работе есть в Timeline, также Вы можете скачать их здесь;
- обучающие материалы к контрольной работе – видеокурс Михаила Русакова по ссылке https://yadi.sk/d/qCYCs5N1peDE6Q

3. Выполненную контрольную работу разместить на бесплатном хостинге, например  на https://beget.com/ru/free-hosting, в Timeline прикрепить саму работу в соответствующую ячейку и ссылку на бесплатный хостинг, где размещено задание.

4. Лабораторные работы - выполнить урок 5 из раздела  Учебные курсы – Уроки PHP и MySQL. Работу разместить на бесплатном хостинге, например  на https://beget.com/ru/free-hosting

5. ЗАЧЕТ С ОЦЕНКОЙ - тест по PHP в системе Таймлайн. Теорию к зачету можно скачать здесьДля допуска к зачету необходимо сдать домашнюю контрольную работу и урок 5. В тесте 25 вопросов, дается 70 минут, одна попытка. Оценка выставляется по результатам теста:

- 55-70% - удовлетоврительно;

- 71-85% - хорошо;

- 86-100% - отлично.

_________________

Осень 2020 - установочные лабораторные работы 4 ч.

Выполнить уроки 1, 2, 3 из раздела Учебные курсы – Уроки PHP и MySQL.


Дисциплина «Web-дизайн»

Осенний семестр 2020 г. - 6 ч. лабораторных  работ, ЭКЗАМЕН.

Для допуска к экзамену необходимо сдать следующие контрольные точки:

1. Задание 1 из домашней контрольной работы.

2. Задание 2 из домашней контрольной работы.

3. Контрольное задание из урока по созданию анимации на HTML5 и CSS3. Контрольное задание сформулировано в конце урока по ссылке Учебные курсы – Уроки HTML5 и CSS3 – Общий урок. CSS анимация. Предварительно надо выполнить сам урок, чтобы научиться создавать анимацию. Сдавать преподавателю урок не надо, только контрольное задание.

ЭКЗАМЕН

Тестирование по HTML и CSS. Тест будет открыт на экзамене.

__________________________________________________

Домашняя контрольная работа по дисциплине «Web-дизайн»

К осенней сессии 2020 г. выполнить домашнюю контрольную работу. Методические указания к контрольной работе можно скачать здесь.

Контрольная работа по дисциплине «Web-дизайн» включает два задания:

Задание 1. Создание web-сайта средствами статических технологий HTML и CSS. В качестве обучающих материалов по технологиями HTMl и CSS Вы можете использовать уроки из раздела  Учебные курсы – Уроки HTML и CSSСайт разместить на бесплатном хостинге, например на https://beget.com/ru/free-hosting

Задание 2. Верстка web-сайта средствами системы управления контентом (CMS) с использованием контента, собранного для задания 1. Сайт разместить на бесплатном хостинге, например на https://beget.com/ru/free-hosting

Вариант контрольной работы определяется по двум последним цифрам номера зачетной книжки из приложения 1.

Согласно варианту контрольной работы определяется тема web-сайта из приложения 2.

Минимальные требования к web-сайтам

Требования к web-сайту в задании 1

  1. Разработанный web-сайт должен включать не менее пяти web-страниц, связанных гиперссылками.
  2. Сайт необходимо писать «вручную» в текстовом редакторе типа Notepad++ или т.п.
  3. Макет сайта должен быть выполнен методом блочной верстки с использованием тега DIV.
  4. Использование web-сайта должно быть доступно в локальном режиме.
  5. Сайту нужно подобрать доменное имя (www.zagorod.ru, www.myhouse.com и т.п). Свободно доменное имя или нет, можно проверить средствами специального сервиса для определения доменных имен, например, на сайте www.webnames.ru. Регистрировать доменное имя не надо.
  6. На каждой странице web-сайта должна присутствовать навигационная панель (глобальная навигация).
  7. С каждой страницы сайта должен быть обеспечен переход (установлена гиперссылка) на головную (начальную) страницу сайта.
  8. Сайт должен иметь название («Каталог загородной недвижимости», «Магазин игрушек», «Кафе 21-й век» и т.п.).
  9. Каждая страница сайта должна содержать логотип и название предприятия.  Обычно изображение логотипа одновременно является гиперссылкой перехода на главную страницу.
  10. Величину каждой web-страницы по высоте рекомендуется делать не более чем два экрана.
  11. Форматирование всех элементов должно осуществляться средствами CSS. Обязательно наличие внешней таблицы стилей с описанием элементов, общих для всех страниц сайта (заголовки, фоны, форматирование абзацев). Локальное форматирование допускается в минимальном количестве.
  12. Внизу на каждой странице сайта должна быть указана контактная информация.
  13. Сайт должен содержать страницу «Карта сайта».
  14. Все рисунки должны быть выполнены с замещающим текстом alt. 
  15. Размер шрифта сайта должен быть в пределах 10–12 пт. для оформления текста. Размер шрифта для оформления заголовков, названия страниц и т.д. не оговаривается. 
  16. В программный код сайта должны быть обязательно включены скрипты (часы, календарь, различные эффекты, меню и т.п.). Всего должно быть 2–3 скрипта. Один из используемых скриптов должен быть счетчиком посетителей сайта.
  17. В код сайта должны быть включены методы продвижения сайта в Интернет (title, H1–H6, META (content, keywords), strong и другие).

Требования к  web-сайту в задании 2

  1. Web-сайт должен быть выполнен на свободно-распространяемом (бесплатном) программном обеспечении. Рекомендуется CMS Joomla.
  2. В качестве контента web-сайта должна быть использована информация, собранная для web-сайта в задании 1 (тексты, изображения, баннеры и др.)
  3. В качестве дизайна web-сайта использовать шаблон на выбор из бесплатно-распространяемых в сети Интернет.
  4. В административной части сайта должны быть созданы не менее трех пользователей с разными правами (включая администратора сайта).
  5. На всех страницах сайта должны присутствовать модули поиска и обратной связи, остальные модули можно выбрать по желанию.
  6. Все остальные требования к web-сайту смотреть в пунктах 1, 5, 6, 7, 8, 9, 10, 12, 13, 17, 18 раздела «Требования к web-сайту в задании 1».




Темы ВКР

Для групп «Информационные технологии в медиаиндустрии»

  • Интернет-магазин средствами системы управления контентом (CMS по выбору Joomla, WordPress, MODx и др.)
  • Web-сайт компании средствами системы управления контентом (CMS по выбору Joomla, Wordpress, MODx и др.)

Для групп «Компьютерные технологии»

  • Web-сайт компании средствами системы управления контентом (CMS по выбору Joomla, Wordpress, MODx и др.) + электронное руководство
  • ЭУП «Создание сайта средствами CMS MODx Revolution»
  • ЭУП «Создание сайта средствами CMS MODx Evolution»
  • ЭУП «Создание сайта средствами CMS Drupal»
  • ЭУП «Создание интернет-магазина средствами CMS MODx»
  • ЭУП «Создание интернет-магазина средствами CMS Wordpress»
  • ЭУП «Создание интернет-магазина средствами CMS OpenCart (или ocStore)»
  • ЭУП «Адаптивная верстка web-сайта»
  • ЭУП «Создание сайта средствами PHP и MySQL»
  • ЭУП «Язык jQuery»
  • ЭУП «Верстка многостраничных изданий в Adobe InDesign»
  • ЭУП «Графический редактор Adobe Illustrator»
  • ЭУП «SEO-оптимизация и продвижение сайта в сети Интернет»
  • ЭУП «Препроцессор Less - динамический язык стилей»
  • ЭУП «Фреймворк Yii»
  • ЭУП «Дизайн сайтов в программе Figma»

Для групп «Информационная безопасность»

  • Обеспечение безопасности веб-сайта компании (создание сайта + безопасность)
  • ЭУП «Web-программирование и защита в среде Интернет»
  • ЭУП «Средства защиты web-сайта на CMS (WordPress, Joomla, MODx и др.)»



Информация для студентов РГППУ