ИТмс-204, ИТмт-203, ПИм-204, ПИэ-203. «Web-дизайн». Осень 2023

Задание на осенний семестр 2023 г. для гр. ИТмс-204, ИТмт-203, ПИм-204, ПИэ-203.

Лекции 8 ч.

Лабораторные работы 48 ч.

Раздел 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 и др.)»



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