ВИТмс-201, ВИТмс-201С. «Web-дизайн». Весна 2023

Задание на весенний семестр 2023 г. для гр. ВИТмс-201 и ВИТмс-201С

Лекции: у гр. ВИТмс-201 – 8 ч. (4 пары), у гр. ВИТмс-201С – 6 ч. (три пары)

Лабораторные работы: у гр. ВИТмс-201 – 22 ч. (11 пар), у гр. ВИТмс-201С – 14 ч. (7 пар)

Экзамен.

Зачетная неделя: у гр. ВИТмс-201 – с 22 по 28 мая, у гр. ВИТмс-201С – с 15 по 21 мая.

Сессия: у гр. ВИТмс-201 – с 29 мая по 18 июня, у гр. ВИТмс-201С – с 22 мая по 4 июня.

ЛЕКЦИИ

Формат проведения лекций – вебинар и конспектирование по раздаточным материалам, которые прикреплены в Таймлайн.  Конспект писать от руки. Фото конспекта поместить в документ Word и этот документ прикрепить в Таймлайн. Конспекты сдавать в срок, указанный в Таймлайн. При нарушении срока снимается 1 балл.

ЛАБОРАТОРНЫЙ ПРАКТИКУМ

Раздел 1. Из раздела Учебные курсы – HTML и CSS выполнить уроки 1–9. Для изучения курса предварительно скачайте папку CD с материалами к урокам (141 Мб). Все работы прикреплять в Таймлайн в соответствующие точки. Сдавать в срок, указанный в Таймлайн. При нарушении срока балл за сдачу в срок не выставляется.

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

2.1 Изучите метод верстки web-страниц на Flexbox. Ниже даны ссылки на теоретический материал и на тренажер:

  • https://tproger.ru/translations/how-css-flexbox-works/
  • https://html5book.ru/css3-flexbox/
  • https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox
  • Тренажер по флексбоксу  https://flexboxfroggy.com/#ru

2.2 Установите современный текстовый редактор для web-разработки на выбор (если он у Вас не установлен):

- SublimeText и все необходимые плагины (инструкцию см. на этой странице)
- можете воспользоваться портабельной версией SublimeText можно скачать здесь.
- или установите Visual Studio Code. Скачайте архив с инструкциями. Инструкцию по настройке Visual Studio Code см. в файле «Настройка_VSC_структура_HTML-5.mkv». В этом же файле см. как использовать VSC и создание структуры документа HTML-5.
Клавиатурные сокращения для плагина EMMET см. в соответствующих файлах.

2.3 Для выполнения ЛР 10-13 в аудитории при себе всегда иметь наушники, чтобы можно было просмотреть видео.

ЛР 10 – Выполните урок по основам верстки на Flexbox. Для этого сначала скачайте архив по ссылке. 
-  Выполните урок из видео 1_Flexbox_часть_1.mkv и 1_Flexbox_часть_2.mkv. Для задания в конце второй части исходные файлы расположены в папке 1 lesson cleer.
- Все файлы необходимо сохранить для защиты в аудитории.

ЛР 11  – Выполните видеоуроки по верстке лендинга средствами Flexbox:
- часть 1 скачайте по этой ссылке (файл «Flex_landing_Часть_1.mkv»)
- часть 2 скачайте по этой ссылке (файл «Flex_landing_Часть_2.mkv»)
- материалы (фото, тексты) для выполнения задания скачайте по этой ссылке (папка Content)
- все файлы необходимо сохранить для защиты в аудитории.

ЛР 12  – Выполните видеоурок по адаптивной верстке на Flexbox.
- для этого скачайте файл «Flexbox_adaptiv.mkv»
- все файлы необходимо сохранить для защиты в аудитории.

ЛР 13  – Верстка по макету Figma
- зарегистрируйтесь в сервисе Figma (figma.com)
- скопируйте себе макет https://www.figma.com/file/ShL4U22HRytQWtlFVwnpIc/Game-Landing
- сделайте верстку этого макета по уроку, который скачайте по этой ссылке
- все файлы необходимо сохранить для защиты в аудитории.

 Все работы прикреплять в Таймлайн в соответствующие точки. Сдавать в срок, указанный в Таймлайн. При нарушении срока балл за сдачу в срок не выставляется.

После выполнения работ по Flex-верстке повторите следующие свойства:

1. Flex-контейнер

display: flex;

display: inline-flex;

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

flex-flow: row nowrap;    

Выравнивание flex-элементов

justify-content: flex-start;

justify-content: flex-end;

justify-content: space-between;

justify-content: space-around;

align-items: stretch;

align-items: flex-start;

align-items: flex-end;

align-items: baseline;

align-items: center;

align-content: stretch;

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space- around;

align-self: auto;

align-self: stretch;

align-self: flex-start;

align-self: flex-end;

align-self: baseline;

align-self: center; 

Порядок элементов

order: …; 

Управление шириной flex-элемента

flex-basis:   ;

flex-grow: ;

flex-shrink: ;

flex: 0 1 auto;

В конце семестра – ЭКЗАМЕН в виде тестирования

  • 86-100 баллов – «Отлично»
  • 71-85 балла – «Хорошо»
  • 55-70 баллов – «Удовлетворительно»

 




Темы ВКР

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

  • Интернет-магазин средствами системы управления контентом (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 и др.)»



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