ЦЭ-301. «Цифровые платформы разработки информационных систем». Весна 2023

Учебные часы

Лекции 16 ч.

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

Курсовая работа.

Экзамен.

Зачетная неделя с 5 по 11 июня.

Сессия с 12 июня по 2 июля.



Задание по дисциплине на весенний семестр 2023 г.

ЛЕКЦИИ

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

В лекциях могут быть тестовые вопросы, которые будут в итоговом экзаменационном тесте.  Эти вопросы надо прорешать и сравнить с правильным ответом в конце лекции. При несовпадении с правильным ответом тестовый вопрос рекомендуется прорешать заново. Таким образом вы на протяжении семестра готовитесь к итоговому экзаменационному тестированию.

 

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

Раздел 1. HTML и CSS. Из раздела Учебные курсы – HTML и CSS выполнить уроки 1-7 и 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-12 в аудитории при себе всегда иметь наушники, чтобы можно было просмотреть видео.

ЛР 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)

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

ЛР 12  – Верстка по макету 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;

Раздел 3. Серверные технологии. PHP и MySql

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

Для этого надо зарегистрироваться на хостинге и при необходимости изучить справочные материалы по хостингу в разделе https://beget.com/ru/kb/manual (Руководство по панели управления)

ВНИМАНИЕ! Регистрируйтесь по тому адресу, который приведен выше, т.к. это тариф бесплатный и не ограничен по времени. При регистрации по другой ссылке вы можете попасть на платный тариф с ограниченным по времени бесплатным периодом, обычно он составляет 30 дней.

1. Выполнить уроки 1, 2, 3, 5 по PHP и MySql из раздела Учебные курсы - Уроки PHP и MySQL. Все уроки должны быть размещены на бесплатном хостинге. Прислать ссылку в Таймлайн. 

2. Пройти тест по урокам PHP и MySQL 1, 2, 3, 5 в системе Таймлайн. 

3. Выполнить контрольную работу 1 по PHP "Шаблон сайта" по вариантам. Варианты по фамилиям см. внизу этой страницы. Варианты HTML-шаблонов скачайте здесь. Работу вложить в Таймлайн.

Требования к контрольной работе 1:

HTML-шаблон сайта перевести на PHP. Требования к php-сайту:

- блоки сайта, общие для всех страниц сайта должны включаться в web-страницу с использованием функции include() или require();
- включаемых блоков должно быть не менее трех: верхнее меню, боковое меню, подвал;
- на php-сайте создать не менее трех взаимосвязанных гиперссылками страниц с разным содержимым основного (изменяемого) контента.

4. Выполнить контрольную работу 2 по PHP и MySQL по вариантам. Варианты можно скачать здесь. Работу разместить на бесплатном хостинге.  Прислать ссылку в Таймлайн.

Раздел 4. Изучить CMS Revolution

Выполнить все уроки из раздела «Уроки MODx Revolution». Сайт должен быть размещен на бесплатном хостинге. Уроки сдавать сразу все восемь – прислать ссылку в Таймлайн.

 Раздел 5. КУРСОВАЯ РАБОТА – создание сайта на свободную тему на CMS Revolution

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

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

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

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

Собрать контент для сайта: тексты, фото, видео. Каждая страница должна быть не менее 1,5 экрана.

Этап 2. Шаблоны дизайна сайта

2.1 Подобрать шаблон Figma для дизайна своего сайта. Шаблон должен быть достаточно сложным, поэтому обязательно шаблон согласовать с преподавателем.

2.2 Шаблон скопировать себе в аккаунт. Сделать копию шаблона у себя в аккаунте, чтобы сохранить исходник. Дальше работаете с копией.

2.3 При необходимости внести изменения в копию шаблона согласно идее своего сайта (добавить блоки, изменить цвета, картинки и т.п.). Не допускается упрощение шаблона, утвержденного с преподавателем.

2.4 Создайть адаптивные HTML-шаблоны на Flexbox на основе утвержденного макета. Шаблонов должно быть два: для главной страницы и для типовой страницы.

Требования к адаптивному шаблону:

– HTML-шаблоны необходимо писать в ручную в web-редакторе (Notepad++, VS Code, SublimeText или т.п.);

– HTML-шаблоны должен иметь различное расположение блоков на экранах разной ширины – не менее трех диапазонов разрешения экрана. Разрешения экрана выбрать самостоятельно. Если в макете Figma нет дизайнов для разных экранов, то предварительно необходимо доделать эти дизайны в Figma;

– все тексты должны быть текстами, а не картинками, чтобы текст на web-странице можно было выделить мышью;

– в HTML-шаблон главной страницы включить адаптивный слайдер. Слайдер можно найти в Интернет или в разделе Web-дизайн – Слайдеры этого сайта;

– при необходимости часть элементов дизайна HTML-шаблона можно скрыть на маленьком экране;

– окончательный вариант должен быть максимально похож на исходник.

Этап 3. Реализация сайта на CMS

3.1 Реализовать HTML-шаблоны на CMS MODX Revolution. Это называется «посадить» шаблон на CMS.

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

3.3. Рекомендуется создавать сайт локально (на ноутбуке или стационарном компьютере), а затем перенести на хостинг. Это важно, т.к. у вас появится опыт переноса сайта на CMS с компьютера на хостинг, что является важным умением для веб-разработчика.

Как перенести сайт на MODx Revolution с компьютера на хостинг, является исследовательским заданием для самостоятельного изучения. За него выставляются отдельные баллы. 

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

3.4 Прислать ссылку на сайт в Таймлайн. 

Этап 4. Презентация и пояснительная записка

4.1 Написать пояснительную записку к курсовой работе. Требования можно скачать здесь. Объем не менее 25 стр.

4.2 Создать презентацию к курсовой работе. Образец можно скачать здесь.

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

 В конце семестра – ЭКЗАМЕН – тест по теоретическому материалу (PHP), который вы освоили на лекциях. 

Те студенты, которые сдают все в срок, оценку получают автоматически (без экзамена).

Действует рейтинговая система. 

Критерии оценки:

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

 

Варианты

1. Агеева Татьяна Васильевна (вариант 1)
2. Биккинина Вероника Эдуардовна (вариант 2)
3. Зенкова Анастасия Сергеевна (вариант 3)
4. Климова Марина Евгеньевна (вариант 4)
5. Коржавина Анна Денисовна (вариант 5)
6. Ляшенко Андрей Константинович (вариант 6)
7. Мажитов Вячеслав Равильевич (вариант 7)
8. Маркин Даниил Сергеевич (вариант 8)
9. Наговицин Дмитрий Сергеевич (вариант 9)
10. Наумов Никита Васильевич (вариант 10)
11. Першин Игнат Алексеевич (вариант 11)
12. Попова Екатерина Александровна (вариант 12)
13. Рубцов Даниил Владимирович (вариант 13)
14. Сабиров Виталий Ринатович (вариант 14)
15. Седунов Иван Сергеевич (вариант 15)
16. Хохлова Виктория Витальевна (вариант 16)
17. Шайсламов Никита Евгеньевич (вариант 17)
18. Шуров Даниил Александрович (вариант 18)
19. Шушарин Лев Евгеньевич (вариант 19)
20. Юзбашиев Семрал Рашад оглы (вариант 20)
21. Юкляевских Егор Дмитриевич (вариант 21)

 




Темы ВКР

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

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



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