23 changed files with 9 additions and 1110 deletions
--- a/README.md
+++ b/README.md
@ -6,7 +6,7 @@
 1. Лабораторные работы выполняются в аудитории или дистанционно.
 2. Посещать лабораторные занятия обязательно только для сдачи работ.
-3. Лабораторная работа считается завершённой, если в [таблице с прогрессом](https://files.ulstu.ru/s/WidAoc9F8BwinRc) есть об этом отметка.
+3. Лабораторная работа считается завершённой, если в [таблице с прогрессом](https://disk.yandex.ru/i/P3tpkqqVJWgmKg) есть об этом отметка.
 4. Для выполнения п.3 необходимо показать преподавателю выполненное задание во время лабораторного занятия.
 5. Во время защиты лабораторной работы преподаватель может спрашивать или просить что-то исправить по теме Вашей работы.
 6. Иных отчётов помимо Вашего кода или других артефактов, необходимых для выполнения задания, предоставлять не надо.
@ -17,17 +17,17 @@
 Обязательные лабораторные работы:
 * [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md)
-* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md)
+* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/TODO/README.md)
-* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md)
+* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/TODO/README.md)
-* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/lw04/README.md)
+* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/TODO/README.md)
-* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/lw05/README.md)
+* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/TODO/README.md)
 Лабораторные работы на выбор:
-* [Лабораторная работа №F1 - Одностраничное приложение (React)](/lwF1/README.md)
+* [Лабораторная работа №F1 - Одностраничное приложение (React)](/TODO/README.md)
-* [Лабораторная работа №F2 - Получение данных через API (Fetch)](/lwF2/README.md)
+* [Лабораторная работа №F2 - Получение данных через API (Fetch)](/TODO/README.md)
-* [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/lwB1/README.md)
+* [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/TODO/README.md)
-* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md)
+* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/TODO/README.md)
 ## Правила допуска до экзамена
--- a/lw02/README.md
+++ b/lw02/README.md
@ -1,218 +0,0 @@
 # Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)
 ## Цели работы
 - Освоение основ интернет-вёрстки.
 - Освоение каскадных таблиц стилей в вебе (CSS3+).
 - Изучение основных селекторов и свойств CSS.
 ## Ход выполнения работы
 1. Изучение основополагающих принципов интернет-вёрстки: HTML-документ, элементы, теги, поток документа, таблицы, списки, ссылки, изображения.
 2. Изучение основных элементов веб-страницы: заголовок и тело документа, контейнер, абзац, заголовок текста, таблица, ссылка, изображение.
 3. Создание html-документа на основании фреймов из макета.
 4. Подключение к html-документу таблицы стилей.
 5. Изучение flexbox и использование для позиционирования элементов.
 6. Стилизация элементов страницы.
 7. Создание стилей для мобильного представления.
 ## Изучение принципов интернет вёрстки
 На этом этапе выполнения лабораторной работы необходимо усвоить, что такое интернет-вёрстка (похожа ли она на вёрстку газет, например), в чём отличие и схожесть HTML и обычного текстового документа, из чего состоит веб-страница внутри и по каким принципам обычно свёрстаны веб-сайты.
 См. следующий материал:
 - Введение в HTML - http://htmlbook.ru/samhtml/vvedenie-v-html
 - Про теги - http://htmlbook.ru/samhtml/tegi
 - Про историю проблем с вёрсткой - http://htmlbook.ru/samlayout
 - Про табличную вёрстку (сейчас считается устаревшим) - http://htmlbook.ru/samlayout/verstka-s-pomoshchyu-tablits/osobennosti-tablits
 - Про блочную вёрстку - http://htmlbook.ru/samlayout/blochnaya-verstka (и все страницы этого раздела)
 Также в источниках упоминается CSS или "каскадные таблицы стилей".
 Они нам также пригодятся.
 ## Изучение основных элементов веб-страницы
 Когда вы разберётесь в том, что такое вёртка веб-страниц, необходимо ознакомиться с тем, из каких элементов может состоять документ HTML (или наша веб-страница).
 Элементов много, но всё сводится к нескольким блочным (то есть блокам - заголовок, абзац, таблица, контейнер без явного смысла и др.) и строчным (изображение, всевозможные выделения текста, блок текста без явного смысла и др.) элементам.
 Для "пробы пера" можете использовать CodePen, песочницу для проверки вёрстки и не только - <https://codepen.io/pen/>.
 См. следующий материал:
 - HTML5 и CSS3 на примерах - https://webref.ru/layout/html5-css3
 - Справочник по HTML - http://htmlbook.ru/html
 ## Создание документа HTML
 На основании макета, выполненного в рамках лабораторной работы №1, необходимо добавить в HTML-документ элементы.
 Главный документ должен иметь название `index.html`.
 Если макетом планируется создание нескольких страниц, то они должны называться аналогичным образом на английском языке.
 Например, `orders.html`, `feedback.html` или `sitemap.html`.
 При вёрстке Вашего макета не бойтесь объединять элементы в контейнеры и присваивать им классы как общие на несколько блоков, так и индивидуальные под каждый блок.
 Также можно сначала добавлять элементы без стилизации, а затем уже приниматься за "наведение красоты".
 Или же сразу добавлять стили к только что созданным элементам.
 Пример сайта из материалов, сделанных на практике: <https://vladdy-moses.github.io/docker-designer>.
 Если посмотрите код страницы, то не увидите ничего сложного.
 ## Вставка картинок из макета
 В макете есть возможность выгружать группу элементов как изображение.
 Для этого в панели свойств есть меню "Export", где можно выбрать параметры выгрузки.
 Стоит обратить внимание на следующие особенности:
 - Если вы экспортируете иконку, где много векторной графики, т.е. графических примитивов (линий, фигур, заливки и проч.), то следует выбирать формат SVG.
 - Если вы экспортируете изображение, где есть растр, т.е сетка пикселей, то следует выбирать формат JPG.
 Также удобно называть слой с экспортируемым изображением на английском языке, т.к. название выгружаемого изображения будет с ним совпадать.
 Например, при экспорте слоя "site-logo" в формат SVG создастся файл `site-logo.svg`, который можно будет подключить к HTML-документу при помощи элемента `<img src="site-logo.svg" alt="Логотип" />`.
 ## Подключение каскадных таблиц стилей CSS и пример
 Подключение таблицы стилей в head-элементе страницы:
 ```html
 <link rel="stylesheet" href="style.css" />
 ```
 Пример таблицы стилей 1:
 ```css
 body {
  background-color: #eee;
  background-image: url(bg-1.png);
  color: #666;
  margin-top: 60px;
  margin-left: 1em;
  margin-right: 14pt;
  margin-bottom: 15px;
  /*same as "margin: 60px 14pt 15px 1em;"*/
  padding: 10px 50px;
  /*same as "padding: 10px 50px 10px 50px;"*/
  font-size: 14px;
  font-family: "Times New Roman", serif;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
 }
 .card {
  border-width: 10px;
  border-color: red;
  border-radius: 10px;
 }
 .card.test-3 {
  position: absolute;
  top: 0;
  left: 55px;
  right: -50px;
  bottom: 20px;
  z-index: 9;
 }
 .card.test-4 {
  position: fixed;
  right: 20px;
  bottom: 20px;
 }
 .test {
  background-color: red;
 }
 td.test-2 {
  background-color: coral;
 }
 .test.test-2 {
  background-color: brown;
 }
 thead .test,
 thead > tr.test > th {
  background-color: blue;
 }
 #main-container {
  background-color: aqua;
 }
 .test-5 {
  color: white;
 }
 .test-5 strong {
  color: red;
  display: block;
 }
 .test-6 {
  color: white;
  display: inline-block;
 }
 ```
 Пример таблицы стилей 2: <https://vladdy-moses.github.io/docker-designer/style.css>.
 Самоучитель по CSS можно найти по ссылке <http://htmlbook.ru/samcss>.
 Справочник по правилам CSS там же: <http://htmlbook.ru/css>.
 ## Flexbox
 Flexbox – новая система позиционирования элементов в CSS.
 С её помощью можно гибко настроить как положение элемента в контейнере, так и его поведение в зависимости от различных параметров, например, объёма содержимого.
 Подробнее можно ознакомиться по этой ссылке: <https://tproger.ru/translations/how-css-flexbox-works/>.
 Нам Flexbox поможет настроить положение отдельных элементов в контейнере для настольной и мобильной вёрстки.
 В лабораторной работе предполагается, что те места, где в макете содержимое расположено в несколько колонок, они будут стилизованы через Flexbox.
 ## Адаптивная вёрстка
 Адаптивность в стилизации — свойство адаптироваться под различные устройства.
 Логично предположить, что если одна и та же страница выглядит одинаково для различных устройств (смартфон, часы, компьютер, планшет, 4К-телевизор), то, скорее всего, она везде будет смотреться ужасно.
 Сейчас дизайнерам необходимо формировать несколько макетов для различных устройств, а верстальщикам - несколько вариантов вёрстки.
 Однако такой подход довольно трудозатратен, поэтому можно сделать одну вёрстку, но так, чтобы только при помощи стилей её можно было "подправить" под вид на конкретном устройстве.
 Это можно сделать при помощи `@media`-запросов.
 С помощью них можно указать, при каких условиях соблюдаются те или иные правила стилизации.
 Например, изменение главной линии, относительно которой встраивается меню сайта, для мобильных устройств можно переопределить следующим запросом:
 ```css
@media (max-width: 1020px) {
  nav {
    flex-direction: column;
  }
 }
 ```
 При помощи `display: none` можно полностью скрывать элементы при определённых условиях.
 Например, так можно скрывать меню для печати страницы или изображения для мобильных версий страниц.
 Все переопределённые элементы из примера, который разбирался на практике, можно найти тут: <https://vladdy-moses.github.io/docker-designer/style-mobile.css>.
 В лабораторной работе предлагается аналогичным образом дополнить некоторые правила для мобильного вида сайта, чтобы он был похож на соответствующий frame из макета.
 ## Дополнительные темы для самостоятельного изучения
 Если вам интересна интернет-вёрстка, можете изучить самостоятельно следующие темы:
 - Анимация в CSS3.
 - Переменные в CSS3.
 - Препроцессоры CSS: LESS, SASS/SCSS.
--- a/lw03/README.md
+++ b/lw03/README.md
@ -1,97 +0,0 @@
 # Лабораторная работа №3 - Динамика сайта (JavaScript)
 ## Цель работы
 Получение основных навыков программирования динамических веб-приложений при помощи языка JavaScript, подключения сторонних библиотек и средств веб-аналитики.
 ## Ход работы
 1. Вспомнить основные понятия в DOM-дереве.
 2. Изучить работу с формами в HTML.
 3. Изучить необходимость JavaScript.
 4. Изучить отладку JS в веб-браузере Google Chrome или Mozilla Firefox.
 5. Подключить JS-библиотеки к HTML-странице.
 6. Написать собственный сценарий (скрипт). Добавить обработку формы.
 ## Основные понятия в DOM-дереве
 Необходимо вспомнить про следующие понятия:
 - элементы, вложенность элементов;
 - аттрибуты, имя, идентификатор;
 - формы, поля ввода, кнопки;
 - события, передача событий.
 ## Формы в HTML
 Изучите работы с формами на ресурсе HTMLBOOK: <http://htmlbook.ru/samhtml5/formy>.
 Особенно обратите внимание на первые 6 страниц.
 Проверьте, что на ваших формах есть необходимые элементы: элемент form, поля ввода, кнопка в виде button или `<input type="submit" ... />`.
 Также убедитесь, что у полей ввода есть аттрибуты name, которые уникальны для каждого поля в рамках одной формы.
 ## Необходимость JavaScript и отладка приложений JS
 Сейчас страницы написанного вами сайта статичны - в них нет интерактивных элементов.
 Однако если вы зайдёте на популярные сайты, то можете увидеть, что они динамичны - на кнопки можно нажать, при клике на некоторые элементы появляются другие и т.п.
 Для этого используется язык программирования JavaScript, код которого (его называют _скриптами_ или _сценариями_) выполняется в браузере каждого пользователя вашего сайта.
 JavaScript — слаботипизированный мультипарадигменный язык программирования.
 Это означает, что в нём есть работа с типами данных, но от разработчика не требуется строгое соответствие типам (например, можно складывать числа со строками и ничего плохо не случится, как, к слову, и хорошего).
 Синтаксис JS похож на любой си-подобный язык (C / C++ / C#), однако при работе с ним особенно часто применяется асинхронный подход к обработке данных.
 Об этом стоит знать и помнить, если вы обмениваетесь данными с веб-сервером.
 Из-за особенностей связи и реализации бекенда (кода на серверной стороне) наши запросы могут обрабатываться медленно, и на момент ожидания мы не должны блокировать работу пользователя с нашим веб-сайтом.
 Если в desktop-приложениях при долгих операциях можно сделать, чтобы приложение "зависло" в ожидании какого-либо запроса, то в веб-приложениях это не допустимо (да и благодаря JavaScript невозможно).
 Единственные случаи, когда браузер может зависнуть - это от слишком больного DOM-дерева или неправильно написанного кода на JavaScript.
 Ознакомьтесь с основами этого интересного языка программирования в Учебнике JavaScript (главы Введение и Основы JavaScript): <https://learn.javascript.ru/>.
 Там же есть описание про средства отладки JS-кода при помощи консоли разработчика.
 Также про особенности слабой типизации в JavaScript и Ruby (есть и такой язык программирования) есть шуточный доклад: <https://www.destroyallsoftware.com/talks/wat>.
 Отметьте, как аудитория реагирует, когда докладчик в первый раз говорит "javascript" :)
 В качестве освоения консоли разработчика можете повторить примеры на JavaScript из доклада выше и убедиться в том, что JavaScript - интересный язык программирования.
 ## Подключение JavaScript-библиотек
 Ранее Вы подключали каскадные таблицы стилей к Вашему веб-сайту через `<link type="stylesheet" .../>`.
 Сценарии JavaScript подключаются немного иначе, через элемент `<script src="site.js"></script>`.
 Заметьте, что у этого элемента обязательно следует указывать закрывающий тег.
 Иначе работать не будет.
 Кстати, не все библиотеки нужно скачивать к себе рядом с сайтом.
 Можно воспользоваться CDN — сетями распространения контента.
 Подключите таким образом в элемент `head` библиотеку SweetAlert: <https://sweetalert.js.org/>.
 На момент написания задания это можно сделать при помощи элемента `<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>`.
 Посмотрите, какие красивые можно сделать сообщения о чём-либо на Вашем сайте!
 ## Написание собственного скрипта. Добавление обработки формы
 До этого Вы ознакомились с основами JavaScript.
 Также Вы попробовали поработать в консоли разработчика и написали там несколько команд (странно, что в этом языке нет `void Main() { }`, не так ли?).
 А ещё Вы подключили сторонние библиотеки (как минимум SweetAlert).
 Теперь Ваша задача следующая:
 - создать файл `site.js` рядом с index.html либо в отдельной папке _js_;
 - подключить файл на страницу сайта с формой по аналогии с другими библиотеками (только из атрибутов в `script` должен быть только `src`);
 - для примера написать в файле `alert('test');` и проверить, что теперь при входе на страницу с формой должно появляться сообщение;
 - убрать `alert`;
 - добавить поиск формы через `document.forms`;
 - добавить обработчик на `submit` через `.addEventListener`;
 - добавить `.preventDefault`, чтобы при сабмите (отправке) формы не перезагружалась страница сайта (такое поведение по умолчанию во всех браузерах);
 - добавить получение данных через `FormData`;
 - добавить отображение данных из формы ввода в консоль разработчика при помощи `console.log`;
 - добавить отображение сообщения о том, что данные записаны/заказ оформлен/регистрация прошла (смотря что у Вас) через sweet alert.
 - добавить sweet alert с ошибкой, если какие-либо данные на форме были введены некорректно.
  Например, пароль короткий или количество товара отрицательное.
 Для понимания `FormData` и методов работы с ним можете ознакомиться со следующим материалом: <https://www.valentinog.com/blog/formdata/>.
 Также там есть код по получению формы, добавлению обработчика и т.д.
 Про использование _SweetAlert_ пример кода можно увидеть на сайте этой библиотеки.
 Это нормальная практика для библиотек в вебе, когда прямо на сайте о них можно посмотреть пример их работы.
--- a/lw04/README.md
+++ b/lw04/README.md
@ -1,170 +0,0 @@
 # Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)
 ## Цель работы
 Изучение основных компонентов веб-сервера, локальная установка системы управления контентом (CMS).
 ## Ход работы
 1. Прочитать задание лабораторной работы до конца.
 2. Скачать и установить веб-сервер и систему управления базами данных (СУБД).
 3. Создать БД для системы управления контентом (CMS).
 4. Произвести установку CMS.
 5. Настроить CMS: подобрать тему, блоки, меню и категории записей.
 6. Заполнить CMS тестовыми записями.
 7. Оформить отчёт о выполнении лабораторной работы.
 ## Об оформлении отчёта
 В рамках выполнения лабораторной работы необходимо создавать скриншоты, демонстрирующие Ваши действия.
 Таким образом крайне рекомендуется перед началом выполнения работы создать документ в любом текстовом процессоре (Microsoft Word или Google Docs) и делать в нём скриншоты.
 Не стоит делать скриншот каждого клика мышкой или каждой экранной формы, но должно быть понимание, что эту работу делали Вы.
 _P.S. Есть множество средств сравнения изображений. Можете попытаться обмануть систему, но проще просто сделать работу :)_
 ## Установка веб-сервера и СУБД
 До этого Вы писали собственный сайт, который открывается в обычном браузере из памяти Вашего компьютера.
 Возможно, некоторые из Вас также разместили сайт на статический хостинг Github Pages.
 Теперь пришло время научиться устанавливать собственный веб-сервер и размещать сайт на нём.
 **Веб-сервер** - программное обеспечение, которое служит для отображения пользователям данных в вебе.
 Прежде всего идёт речь про HTML-разметку (не обязательно на сервере хранятся файлы *.html), CSS-стили, JS-скрипты, изображения, видео-материалы и т.д.
 Основная задача веб-сервера - реализация протоколов HTTP различных версий, которые отлично воспринимаются специальными клиентскими программами - **браузерами**.
 Существует множество веб-серверов.
 Самые популярные из них - Apache HTTP Server, Nginx, IIS.
 **Apache HTTP Server** - веб-сервер с открытым исходным кодом.
 Широко расширяем, легко запускается как на UNIX-подобных системах, так и на Windows.
 Славится не очень хорошими настройками по умолчанию.
 **Nginx** - отечественный веб-сервер также с открытым исходным кодом.
 Очень простой и гибкий.
 Обычно служит в качестве различных прокси-серверов.
 Например, пользователи со всего Интернета могут обращаться к веб-серверу nginx, а он внутри будет перенаправлять (проксировать) запросы к другому веб-серверу (например, тому же Apache).
 Такая связка используется очень много где и помогает распределить нагрузку и увеличить отказоустойчивость системы.
 **IIS** - веб-сервер от Microsoft для запуска ~~начинающих устаревать~~ веб-приложений на технологиях этой корпорации.
 Запускается только в Windows и жёстко связан с этой ОС (например, использует драйвер HTTP.sys).
 У IIS закрытая реализация, однако относительно удобное администрирование.
 Также IIS считается довольно быстрым веб-сервером как раз из-за жёсткой связи с Windows.
 _P.S. Современные приложения на технологиях Microsoft могут запускаться не только на IIS и Windows, и это прекрасно!_
 Веб-сервер по умолчанию может прослушивать специальный TCP-порт (80) и отдавать запрошенные файлы из конкретной папки на диске.
 Например, можно настроить, чтобы при запросе http://127.0.0.1:80/ открывался бы файл _C:\\htdocs\\index.html_, а при http://127.0.0.1:80/test.png файл _C:\\htdocs\\test.png_.
 Это самый простой способ работы сервера - отдавать статические файлы (по аналогии со статическим хостингом Github Pages).
 Более сложный режим работы веб-сервера - добавление логики по обработке пользовательских запросов.
 Это и есть т.н. backend или серверная часть веб-приложения.
 Веб-приложение должно быть разработано на каком-либо языке программирования и взаимодействовать с веб-сервером.
 Пример такого взаимодействия - протокол _FastCGI_.
 Самый популярный язык программирования в вебе - **PHP**.
 Вышло уже много версий этого языка, и до сих пор он не потерял свою популярность благодаря широкому сообществу, низкому порогу входа и простоте установки на веб-сервер.
 Вы могли слышать много баек про PHP-программистов, однако этот язык всё равно является самым популярным в вебе.
 Также неотъемлемой частью бекенда является система управления базами данных, где могут храниться данные о пользователях.
 Почти у каждого в макете сайта были формы входа, регистрации, оформления заказа.
 А где эти данные должны храниться?
 Как раз в базе данных.
 Можно самостоятельно установить СУБД, веб-сервер, подключить к последнему язык программирования, однако существуют специальные сборки таких средств для локальной разработки и отладки.
 Предлагаю установить среду разработки на PHP **XAMPP**: <https://www.apachefriends.org/ru/index.html>.
 > Внимание! На текущий момент (март 2023) лучше устанавливать XAMPP 8 с PHP 8 внутри.
 При установке не забудьте снять ненужные флажки:
 ![](xampp-1.png)
 > Если хотите получить графическую среду по управлению СУБД, выберите дополнительно "PhpMyAdmin".
 После установки среды разработки Вы сможете открыть панель управления:
 ![](xampp-2.png)
 Запустите веб-сервер и СУБД и проверьте, что сайт-приветствие открывается.
 ## Создание базы данных для CMS
 В мире веба не все сайты разрабатываются с нуля (как это делали вы в прошлых лабораторных работах).
 Если веб-сайт не очень сложный, например, состоящий из блога, пары изображений, пары страниц, и, может быть, страницы с заказом или оформлением доставки, то можно использовать готовые открытые разработки, настроенные под свои нужды.
 Выделяют класс таких систем - **систем управления контентом** (Content Management System, CMS).
 Благодаря им Вам не придётся самостоятельно создавать таблицы в базе данных, программировать работу с формами, их отображением и т.д.
 Самой популярной CMS является WordPress, и, вы не поверите, она написана на PHP!
 Устанавливать и конфигурировать WordPress относительно легко, поэтому займёмся этим в данной лабораторной работе.
 Полученные навыки позволяет установить любую другую CMS на Ваш выбор или выбор Вашего абстрактного заказчика.
 Однако перед тем, как создать собственный сайт на WordPress, необходимо создать базу данных.
 Перейдите в Shell из панели XAMPP.
 Введите команду `mysqladmin.exe -u root password %ваш-пароль%`, чтобы задать пароль системному пользователю _root_:
 ![](shell-1.png)
 Далее создадите БД при помощи команд `mysql  -u root -p` и `CREATE DATABASE wordpress;`:
 ![](shell-2.png)
 ## Установка WordPress
 Для установки WordPress скачайте архив с [официального сайта](https://ru.wordpress.org/) и распакуйте его в папку _C:\\xampp\\htdocs\\_:
 ![](wp-1.png)
 Далее перейдите в браузере по адресу <http://localhost/wordpress/> и начните установку.
 Введите в форму выбора БД данные, которые вы указали при её создании:
 ![](wp-2.jpg)
 Далее продолжите установку.
 После окончания установки и ввода данных Вашего будущего сайта у Вас должна открыться панель администрирования:
 ![](wp-3.jpg)
 В меню можно нажать на название сайта и перейти на него (ссылка есть выше).
 Взгляните на Ваш уже практически полностью настроенный сайт!
 Круто, не так ли?
 ## Настройка и заполнение CMS
 Изучите возможности WordPress.
 Существует возможность скачивать и устанавливать темы.
 Практически любую тему можно настроить под себя: выбрать цвета, шрифты, форму блоков с данными, контент шапки, подвала и т.д.
 Также можно определить записи и их категории.
 Вообще запись - основная сущность WordPress.
 Синоним - новость.
 Также в WordPress есть понятие "Страница".
 Пример страниц - контакты, "обо мне", "схема проезда" и т.д.
 Можно настроить меню, чтобы нужные новостные категории или страницы отображались в нём в определённом порядке.
 Можно устанавливать плагины.
 Существуют как бесплатные дополнения, так и платные.
 Один из самых популярных - _Contact Form 7_, позволяющий создавать формы обратной связи.
 Для выполнения данного пункта выберите тему, настройте меню, шапку, подвал сайта, а также главную страницу согласно своей тематике.
 Попробуйте добавить несколько записей и страниц.
 Заметьте, что это намного проще, чем делать сайт с нуля.
 ## Вопросы для рассуждения
 - Если CMS нетрудно настраивать и довольно легко сопровождать, почему нас учат основам вёрстки, таблиц стилей, браузерных скриптов?
 - Можно ли на CMS разработать социальную сеть?
 - Насколько быстрее будет работать сайт на CMS в отличие от написанного с нуля?
 - Как понять, когда следует использовать CMS, а когда начинать разработку "с чистого листа"?
 - Насколько безопасно использовать CMS? А собственный код? А если он ещё и написан не самым лучшим образом?
 - Что дешевле сопровождать - сайт на CMS или собственноручно написанный движок?
 - Насколько сложно сделать свою CMS? (Кстати, ваш ассистент в школе таким баловался ещё на PHP 4 или 5. Как хорошо, что этот код не сохранился...)
 - Как думаете, старый сайт политеха сделан на CMS? Отвечу сразу - [да, на разработанной в политехе же в 2005 году](http://www.sisadminov.net/main/view/article/16).
--- a/lw04/shell-1.png
+++ b/lw04/shell-1.png
--- a/lw04/shell-2.png
+++ b/lw04/shell-2.png
--- a/lw04/wp-1.png
+++ b/lw04/wp-1.png
--- a/lw04/wp-2.jpg
+++ b/lw04/wp-2.jpg
--- a/lw04/wp-3.jpg
+++ b/lw04/wp-3.jpg
--- a/lw04/xampp-1.png
+++ b/lw04/xampp-1.png
--- a/lw04/xampp-2.png
+++ b/lw04/xampp-2.png
--- a/lw05/README.md
+++ b/lw05/README.md
@ -1,197 +0,0 @@
 # Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core
 ## Цель работы
 Получить навыки в создании кросс-платформенного веб-приложения в среде ASP.NET Core при помощи открытых кросс-платформенных инструментов.
 ## Ход работы
 1. Установка Visual Studio Code.
 2. Установка .NET (Core) SDK.
 3. Создание простейшего веб-приложения.
 4. Настройка Visual Studio Code для отладки приложения.
 5. Изучение основных концепций ASP.NET Core.
 6. Изменение pipeline.
 7. Оформление кода и отчёта.
 ## Прочтите внимательно перед выполнением работы
 Для сдачи лабораторной работы необходимо показать работающее приложение, которое способно принимать запросы из браузера.
 ## Установка Visual Studio Code
 Visual Studio Code (VS Code) -- кросс-платформенный инструмент для разработки и не только.
 Очень грубо, VS Code можно считать очень прокаченным блокнотом с кучей плагинов.
 Плагины при этом могут быть различные: добавление иконок в дерево папок и файлов, добавление поддержки форматирования, отладки и запуска исходного кода, средства доступа к удалённым серверам, возможность работать с контейнерами и т.д.
 Скачать и установить Visual Studio Code можно с официального сайта: <https://code.visualstudio.com/>.
 При установке можете отказаться от добавления VS Code в контекстное меню и т.д.
 Единственное, что можете оставить - это добавление в PATH, если это, конечно, будет спрашиваться при установке.
 Почитать подробнее про PATH можно тут: <https://ru.wikipedia.org/wiki/PATH_(%D0%BF%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F)>.
 ## Установка .NET (Core) SDK
 Перед выполнением этого шага необходимо убедиться: вдруг на Вашем ПК уже установлено необходимое программное обеспечение.
 Для этого в консоли или командной строке (для Windows сейчас рекомендуется использовать PowerShell) следует набрать следующую команду:
 ```
 dotnet --list-sdks
 ```
 Если вывод будет содержать строку наподобие `7.0.202 [C:\Program Files\dotnet\sdk]` и номер версии будет из актуальных (на апрель 2023 это 6.0, 7.0), то всё хорошо.
 В противном случае необходимо произвести установку.
 Для этого необходимо установить .NET SDK (5.0 или 6.0) с официального сайта: <https://dotnet.microsoft.com/download>.
 > ASP.NET Core - это платформа для создания веб-приложений, использующих .NET.
 > C# - язык программирования, позволяющий работать с .NET.
 После установки SDK под свою систему и возможной перезагрузки компьютера выполните повторно команду из начала раздела.
 Теперь она должна выводить данные корректно.
 ## Создание простейшего веб-приложения
 Создавать простейшее веб-приложение на ASP.NET Core будем из консоли (командной строки).
 Во-первых, это даёт вам возможность поработать с командной строкой.
 Во-вторых, этот метод взаимодействия с утилитами / платформами / серверами является распространённым в профессиональной разработке и администрировании.
 В-третьих, где ещё, если не в нашем курсе? :)
 Создайте пустую папку где-нибудь на Вашем компьютере.
 Постарайтесь не использовать в пути до этой папки пробелы и отличные от английских букв и цифр символы.
 Перейдите в папку при помощи команды `cd`.
 Например, `cd d:\labworks\ip`.
 Иногда в windows требуется первой командой указать букву диска, например, `d:`, а потом уже делать _change directory (cd)_.
 После этого введите следующую команду:
 ```
 dotnet new web -n hw-app
 ```
 Что здесь происходит:
 * _dotnet_ - общая команда для работы с платформой .NET (dot - это "точка" по-английски);
 * _new_ - команда по созданию чего-то нового;
 * _web_ - шаблон для создания простейшего веб-приложения. Есть и другие шаблоны, их можете поискать самостоятельно или с помощью команды `dotnet new`;
 * _-n_ - начало аргумента _name_, то есть задание имени будущего веб-приложения;
 * _hw-app_ - название будущего приложения. Можете использовать своё название.
 В результате выполненных шагов в вашей папке создастся ещё одна папка, в которой будет примерно следующий набор файлов:
 ![](project-tree.png)
 Если у Вас также, то значит всё хорошо.
 ## Настройка Visual Studio Code для отладки приложения
 Теперь пришло время соединить предыдущие пункты.
 Для этого перейдите в консоли в папку с приложением.
 В примере выше это будет _d:\labworks\ip\hw-app_.
 После этого наберите команду `code .`.
 Это должно запустить Visual Studio Code с открытой папкой с проектом, т.е. в дереве файлов должны быть те же файлы, что и на снимке экрана выше.
 Если этого не произошло, Вы можете самостоятельно открыть папку через меню _File_ -> _Open Folder_.
 Если Вы зайдёте в файл _.csproj_, VS Code снизу справа предложит установить необходимые расширения для работы с такими файлами.
 Установите расширение _C#_.
 ![](vsc-extension-show.png)
 ![](vsc-extension-install.png)
 Возможно придётся перезагрузить VS Code.
 После этого возникнет подсказка о добавлении необходимых задач для найденного проекта на языке C#.
 Можете смело их добавить.
 ![](vsc-add-assets.png)
 В итоге должна создаться папка _.vscode_ с двумя файлами.
 Теперь, пока не вдаваясь в подробности кучи сгенерированного кода, зайдите в _Startup.cs_ и поставьте точку останова после `endpoints.MapGet("/",...`.
 ![](breakpoint-set.png)
 При нажатии на F5 у Вас должен запуститься веб-сервер: в _Debug Console_ снизу будет выведено много информации.
 Скорее всего у Вас одновременно с этим запустится веб-браузер с Вашим пока ещё пустым сайтом.
 Если этого не произошло, можете поискать ссылку вида <http://localhost:5000> в выводе консоли отладки самостоятельно.
 > _localhost_ - это домен локального ПК.
 > Никто другой Ваш сайт по такому адресу не увидит.
 Заметьте, что выполнение программы остановилось в точке останова:
 ![](breakpoint-catched.png)
 Если у вас всё работает похожим образом, значит всё настроено правильно.
 ## Изучение основных концепций ASP.NET Core
 Перед ознакомлением с основами ASP.NET Core, необходимо ознакомиться с основами построения веб-серверов.
 Как минимум надо вспомнить или узнать, что такое: протокол HTTP, запрос, ответ, тип запроса (GET, POST, PUT, ...) код ответа (200 OK, 404 NOT FOUND, 500, ...), составные части URL (схема, домен, путь, query-string, hash).
 После этого можно переходить к основам ASP.NET Core, которые хорошо изложены тут: <https://docs.microsoft.com/ru-ru/aspnet/core/introduction-to-aspnet-core?view=aspnetcore-7.0#recommended-learning-path>.
 Однако основные вещи изложу здесь, чтобы не заставлять вас сейчас читать столь сложный для понимания текст.
 ASP.NET Core, как и другие современные платформы для построения веб-приложений, использует принцип _pipeline_ - запрос от клиента (браузера) попадает в начало "конвейера", где затем каждый обработчик (практически любая функция на _C#_) может его или изменить, или пропустить без изменений, или остановить конвейер в зависимости от самого запроса.
 После прохождения всех обработчиков формируется ответ, который и возвращается клиенту (браузеру).
 Примеры обработчиков:
 * проверка, что запрос клиентом составлен правильно;
 * проверка доступа клиента к запрашиваемому ресурсу;
 * если по пути из запроса найден файл на веб-сервере, то можно его вернуть;
 * а если файл не найден, может какая-то подпрограмма может забрать обработку на себя?
 * "Хмм, всё, что начинается с /api, отдавайте мне, остальное мне не надо";
 * отрисовка красивых страниц об ошибках (например, 404, 403, 500 и т.д.), если прошлые обработчики сказали, что запрос был плохим;
 * обработчик-которые складывает с специальный файл информацию о запросах (логгер или служба/подсистема логирования).
 Как видите, обработчиков бывает много, но этот конвейер где-то надо настроить.
 В ASP.NET Core для этого существует класс _Startup.cs_ и метод _Configure_.
 Как раз в нём настраивается порядок следования обработчиков.
 В простейшем приложении порядок обработчиков такой:
 * если окружение, в котором запускается сайт, для разработки, то надо включить обработчик по отрисовке красивых страниц с подробностями ошибок;
 * необходимо включить обработчик, который сможет следить за тем, какие конкретно ресурсы запрашиваются;
 * включатся обработчик по сопоставлению путей из запросов другим обработчикам;
 * добавляется обработчик для _GET_-запросов по пути _/_: в ответ клиенту всегда пишется строка _"Hello World!"_.
 Можете самостоятельно поискать по коду, как описанные выше строки отображаются в исходный код на _C#_.
 Как видите, пока ничего сложного.
 Далее необходимо сопоставить наше веб-приложение (по сути это набор обработчиков запросов) с конкретным веб-сервером.
 Например, тем самым, что запускает ваше веб-приложение по адресу <http://localhost:5000>.
 Это делается в файле _Program.cs_ (знакомый файл?) в методе _Main_ (знакомый метод?).
 Здесь у нас настраивается хост: то есть та часть приложения, которая может предоставить доступ к вашему веб-приложения из внешнего мира.
 Другими словами, здесь и настраивается веб-сервер.
 ASP.NET Core использует лёгкий веб-сервер _Kestrel_, о котором Вы даже можете не знать.
 В этом, и в простоте настройки, и заключается его лёгкость.
 Таким образом, мы выяснили, что наше приложение - это набор обработчиков.
 Они настраиваются в _Startup.cs_ в специальном методе.
 Веб-сервер для доступа к нашему веб-приложению настраивается в _Program.cs_.
 Что находится в других файлах, можете изучить самостоятельно.
 Дам только наводку, что launchSettings необходимы для запуска веб-сервера, а appsettings - для настройки веб-приложения.
 ## Изменение pipeline
 После того, как вы научились запускать простейшее веб-приложение для отладки и изучили базовые понятия конвейерной обработки в ASP.NET Core, самое время этот конвейер немного поменять.
 Перед вами есть пример обработчика для _GET_-запросов по пути _/_.
 Предлагается сделать ещё как минимум несколько обработчиков для _GET_-запросов и проверить в браузере, как они будут работать.
 Например:
 * При запросе _/time_ (через браузер необходимо будет перейти по адресу <http://localhost:5000/time>) должно выводиться текущее время.
 * При запросе _/whoami_ должна выводиться информация о текущем браузере.
 * При запросе _/error_ должен возвращаться такой код статуса (`StatusCode`), который придёт в query-строке в параметре _status_. Если не придёт, то отдавать код статуса _200 OK_. Тогда запрос в адресной строке браузера будет выглядеть примерно как <http://localhost:5000/error?status=403> и в этом случае выводить якобы ошибку о том, что нет доступа к ресурсу. В Панели разработчика на вкладке "Сеть" должен возвращаться код из query-параметра. 
 Для работы с запросом пользователя для получения информации о браузере или параметрах этого запроса следует изучить использование переменной `context`, которая передаётся в обработчик.
 Там есть свойство `.Request`, которое должно Вам помочь.
--- a/lw05/breakpoint-catched.png
+++ b/lw05/breakpoint-catched.png
--- a/lw05/breakpoint-set.png
+++ b/lw05/breakpoint-set.png
--- a/lw05/project-tree.png
+++ b/lw05/project-tree.png
--- a/lw05/vsc-add-assets.png
+++ b/lw05/vsc-add-assets.png
--- a/lw05/vsc-extension-install.png
+++ b/lw05/vsc-extension-install.png
--- a/lw05/vsc-extension-show.png
+++ b/lw05/vsc-extension-show.png
--- a/lwB1/README.md
+++ b/lwB1/README.md
@ -1,52 +0,0 @@
 # Лабораторная работа №B1 - Изучение шаблона проектирования MVC
 ## Цель работы
 Понимание шаблона проектирования MVC и его применения при проектировании интернет-приложений.
 ## Ход выполнения работы
 Необходимо вспомнить, что говорилось на лекции про данный шаблон проектирования.
 Также крайне рекомендуется осознать материал отсюда:
 - <https://metanit.com/sharp/aspnet6/>;
 - <https://docs.microsoft.com/ru-ru/aspnet/core/mvc/overview?view=aspnetcore-7.0>.
 Что следует понять из представленных выше и, возможно, каких других статей:
 1. Какие есть компоненты в шаблоне MVC и как они зависят друг от друга.
 2. Как реализуется шаблон в ASP.NET Core.
 3. Как создавать контроллеры и представления для них.
 4. Где находится общий шаблон всех представлений и как его подключить.
 5. Как передаются параметры на действия контроллера.
 6. Что такое `wwwroot` и как использовать файлы из этой директории в веб-приложении.
 Что необходимо сделать для выполнения лабораторной работы:
 1. Создать приложение ASP.NET Core (Model-View-Controller).
   Можно создать как через `dotnet new mvc -o test-mvc-proj`, так и через интерфейс Visual Studio.
 2. Скопировать скрипты, изображения и таблицы стилей в `wwwroot`.
   Контент, который уже есть в этой папке, можно удалить.
 3. Заменить мастер-шаблон сайта на ваш шаблон из лабораторных работ по блоку front-end.
   Как вы могли заметить, в замечаниях преподаватель всегда старался указать, что все страницы вашего веб-сайта должны выглядеть похожим образом.
   Такой подход помогает потом "натянуть" вёрстку на веб-приложение как раз благодаря единому мастер-шаблону.
   Если же у Вас несколько разных видов дизайна сайта (например, отдельно для главной страницы и для других), можно сделать несколько мастер-шаблонов.
 4. Создать контроллеры и действия в них по смыслу тех страниц, что вы сверстали.
   Например, страницы входа и регистрации можно преобразовать в действия `Signin` и `Signup` в контроллере `Account` (класс будет называться `AccountController`).
   Страницы по заказу можно поместить в контроллер `Order`.
   Главная страница - это по умолчанию действие `Index` в контроллере `Home`.
   Страницы "О сайте", "Контакты" и аналогичные также рекомендуется размещать в контроллере `Home`.
 5. Создать представления, связанные с действиями контроллеров.
   Получить доступ к отображению представлений определённых действий можно следующим образом: `{адрес-сайта}/{контроллер}/{действие}`.
   Действие `Index` и контроллер `Home` можно опускать из адреса.
   Например, адрес сайта - <http://localhost:5000/> или <https://localhost:5001/>.
   В этом случае главную страницу можно открыть по адресам <http://localhost:5000/>, <http://localhost:5000/Home/> или <http://localhost:5000/Home/Index>.
   Страница регистрации тогда будет доступна по адресу <http://localhost:5000/Account/Signup> и никак иначе.
 6. Заполнить представления разметкой из статических файлов.
   Как можете догадаться, вставлять надо не полную разметку файла, а только отличающуюся у страниц часть для `RenderBody`.
 7. Изменить ссылки (в меню, на страницах сайта) на новые.
   Можно использовать новую возможность ASP.NET Core - TagHelpers.
   [Пример использования TagHelper для ссылок тут](https://docs.microsoft.com/ru-ru/aspnet/core/mvc/views/tag-helpers/built-in/anchor-tag-helper?view=aspnetcore-7.0#asp-controller).
 8. Ещё раз проверить, что сайт запускается.
 9. Продемонстрировать работу приложения на лабораторном занятии и ответить на вопросы преподавателя.
--- a/lwB2/README.md
+++ b/lwB2/README.md
@ -1,86 +0,0 @@
 # Лабораторная работа №B2 - Разработка чат-бота для Telegram
 ## Цель работы
 Понять концепцию построения чат-ботов на примере Telegram.
 ## Ход работы
 **Чат-бот** - программа, с которой можно общаться, будто вы общаетесь с живым (но может быть и не самым умным) собеседником.
 Чат-боты служат для различных целей: в качестве напоминателей (всяческие календари), подсказчиков ("не забудь заплатить за электричество!1"), информационных служб (например, "пробить авто по номеру" или "показать погоду в Ульяновске") и много чего ещё.
 Обычно чат-бот не умеет сам писать сообщения людям, только реагировать на сообщения от людей.
 Однако иногда допускается писать самостоятельно, если диалог с пользователем уже был когда-то инициирован.
 Существует множество архитектур по созданию чат-ботов для разных платформ.
 Мы же рассмотрим Telegram.
 Для создания нового бота необходимо... написать боту `@BotFather`!
 Он на английском языке предложит определить имя нового бота, его логин и выдаст в итоге ключ доступа к API (_token_).
 Там же будет написано, что этот ключ ни в коем случае нельзя передать кому-либо, поэтому при оформлении отчёта по этой работе, пожалуйста, **удаляйте _token_ из исходного кода и из скриншотов**.
 Список доступных методов для ботов Telegram перечислен здесь: <https://core.telegram.org/bots/api#available-methods>.
 Где-то там есть и описание того, как эти методы вызывать.
 Нам пока это не особо интересно, однако знать следующие вещи стоит:
 - бот получает обновления при помощи команды `getUpdates`.
  Эта команда позволяет возвращать те обновления, к которым имеет доступ чат-бот.
  Например, кто-то написал или отредактировал личное сообщение.
  Команда позволяет получать до 100 обновлений за один вызов.
 - при вызове команды обычно требуется объект какого-то формата на вход.
  Также обычно команда возвращает ответ в определённом формате.
  Параметры можно сериализовать в JSON-строку.
 - если кто-то пишет чат-боту сообщения, информация об этом состоит из следующих полей: <https://core.telegram.org/bots/api#message>.
  Как можете заметить, возвращается много информации, но там есть как минимум: ИД сообщения, текст сообщения, чат, из которого было получено сообщение, дата, прикреплённые аудио, фото и т.д.
 - если мы хотим отправить сообщение, следует вызвать метод `sendMessage`: <https://core.telegram.org/bots/api#sendmessage>.
  Там обязательно требуется указать ИД чата и текст нашего сообщения.
  Однако можно указать и другие поля, например, ИД сообщения, на который мы хотим ответить и список доп. кнопок для быстрых действий.
 Также первое сообщение боту от пользователя обычно `/start`, это также стоит помнить.
 Предположим, мы хотим написать диагностического бота, который будет реагировать на сообщения людей следующим образом:
 - на сообщение `/start` писать, что этот бот написан в качестве учебного материала и может выполнять следующие команды: ...
 - на сообщение `/who` выводит ИД чата, ИД сообщения, ИД отправителя, имя отправителя и дату отправки сообщения.
 - на сообщение `/rand %i %j` выводит случайное число между `%i` и `%j`.
  Или сообщение об ошибке, если `%j` меньше, чем `%i`.
 - при отправке голосового сообщения должен отвечать, что он "бумер" и не понимает голосовые сообщения.
 - при отправке картинки должен всегда осыпать пользователя комплиментами по поводу красоты того, что он прислал.
 Забавно?
 Ещё бы.
 Осталось реализовать.
 Ход выполнения видится следующим:
 1. Регистрация бота.
 2. Обработка получения обновлений.
 3. По каждому обновлению: если оно сообщение, то разбираем содержимое сообщения.
 4. После разбора содержимого формируем ответ.
 5. Отправляем ответ на сообщение.
 Вроде бы всё просто, однако одновременно с этим ничего и не понятно.
 Здесь нам придёт на помощь сообщество ИТ-специалистов, потому что многие стандартные решения уже были реализованы до нас (или нами).
 Например, далеко не полный список библиотек для построения ботов для Telegram:
 - для C# - <https://github.com/TelegramBots/Telegram.Bot>;
 - для Python - <https://github.com/python-telegram-bot/python-telegram-bot/wiki/Extensions-%E2%80%93-Your-first-Bot>;
 - для Java - <https://github.com/pengrad/java-telegram-bot-api>;
 - для Go - <https://github.com/go-telegram-bot-api/telegram-bot-api>.
 Ваши задачи на эту лабораторную работу:
 - определиться с любимым языком программирования;
 - найти популярную реализацию библиотеки для создания чат-бота в Telegram;
 - зарегистрировать чат-бота;
 - подключить чат-бота к библиотеке и проверить, что обновления приходят;
 - попытаться хоть что-нибудь ответить самому себе через программу (хотя бы тем же самым сообщением);
 - дополнить обработку ответов уже тем, что описано выше в тексте лабораторной работы;
 - продемонстрировать работу.
 ## Демонстрация работы
 Демонстрация работы предполагает запуск бота и проверку его ответов на сообщения преподавателя в режиме реального времени.
--- a/lwF1/README.md
+++ b/lwF1/README.md
@ -1,215 +0,0 @@
 # Лабораторная работа №F1 - Одностраничное приложение (React)
 ## Цель работы
 Освоение среды локальной фронтенд-разработки на базе NodeJS.
 Освоение языка программирования TypeScript.
 Освоение библиотеки React.
 ## Ход работы
 1. Развернуть локальную среду разработки для создания React-приложений.
 2. Создать шаблон React-приложения с использованием языка TypeScript.
 3. Изменить шаблон, добавив несколько компонентов с пропсами различного типа.
 ## Настройка среды разработки
 Необходимо установить следующий софт:
 1. NodeJS: <https://nodejs.org/en/download/>.
 2. Visual Studio Code: <https://code.visualstudio.com/download>.
 3. Google Chrome с расширением React Developer Tools: <https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ru>.
 Всё представленное ПО является бесплатным и свободным для некоммерческого использования.
 Чтобы проверить установку NodeJS, выполните в терминале следующие команды.
 Вывод должен быть похож на представленный ниже.
 ```bash
 $ node --version
 v16.13.2
 $ npx --version
 8.1.2
 ```
 > Если при выполнении команды отображается номер версии - всё хорошо.
 > Если нет, то, возможно, необходимо перезагрузить ПК и попробовать ещё раз.
 ## Создание первого React-приложения
 Для создания первого React-приложения выполните следующую команду: `npx create-react-app lwF1 --template=typescript`.
 Она запускает создание простейшего React-приложения с использованием TypeScript в папке lwF1.
 Собственно, приложение также будет называться lwF1. 
 В конце должно возникнуть сообщение `Happy hacking!`.
 Для выполнения данного желания необходимо перейти в созданный каталог (`cd lwF1`) и запустить VS Code в этой папке (`code .`).
 Если более подробно рассматривать CRA-шаблон, то можно выделить следующие файлы и каталоги:
 - `node_modules` - огромный каталог, где содержатся исходные тексты подключаемых библиотек.
 - `public` - изображения, манифесты и прочие статические файлы, которые необходимо для отображения нашего веб-приложения. Также содержит основной документ, куда будет внедряться наше React-приложение: `index.html`.
 - `src` - таблицы стилей и компоненты, связанные с нашим React-приложением.
 - `package-lock.json` - связь библиотек из `node_modules` с нашим приложением.
 - `package.json` - конфигурация приложения.
 - `tsconfig.json` - конфигурация компилятора TypeScript.
 Для запуска приложения необходимо в терминале (возможно запустить его прямо внутри VS Code) команду `npm run start`.
 Должен открыться браузер с анимированным логотипом реакта.
 Не завершая приложения, измените какой-нибудь текст в файле `src/App.tsx`, сохраните файл и убедитесь, что в браузере сайт автоматически изменился.
 ## Изучение TypeScript
 TypeScript -- это диалект ECMAScript, в котором добавлена строгая (насколько это возможно) типизация.
 Другими словами, это "JavaScript с типами".
 Чтобы понять, что это такое, можете посетить официальный сайт технологии: <https://www.typescriptlang.org/docs/handbook/intro.html>.
 Можно почитать эту страницу и другие до _Type Manipulation_.
 Также рассмотрите файл `src/App.tsx`.
 Благодаря TypeScript среда Visual Studio Code позволяет подсказывать атрибуты у элементов.
 Кстати, заметьте, что в tsx-файле (аналог js-файла) прямо внутри JS-кода расположена разметка HTML.
 Странно, не так ли?
 ## Изучение React
 Для понимания того, что такое React, рекомендуется ознакомиться с официальной документацией: <https://ru.reactjs.org/docs/getting-started.html> и <https://ru.reactjs.org/tutorial/tutorial.html>.
 Знакомство с React очень подробное и понятное.
 Вам стоит понять, чем разработка на React отличается от той разработки приложений, что была у вас до этого.
 ## Создание своих компонентов
 Когда вы разобрались, что такое компоненты, давайте добавим собственный.
 Предположим, мы хотим добавить компонент, который будет показывать кнопку со счётчиком нажатия.
 Для этого в папке `src` можно добавить файл `Counter.tsx` и написать туда следующий код:
 ```tsx
 import React from 'react'; // Подключение react.
 var Counter = () => {
    return (
        <div>Тут будет счётчик.</div>
    );
 };
 export default Counter;
 ```
 На текущий момент весь компонент - это один статический `<div>`-элемент с текстом "Тут будет счётчик" без какой-либо внутренней логики.
 Чтобы добавить только что созданный компонент в приложение, в `App.tsx` в начале добавьте ссылку на компонент (`import Counter from './Counter';`) и добавьте в разметку рендер компонента (`<Counter />`).
 Теперь поговорим про состояние нашего компонента.
 Так как у нас компонент-счётчик, то значение счётчика и есть наше "состояние".
 С состоянием можно работать через хук `useState`.
 Чтобы объявить состояние-число, необходимо в начале функции в нашем компоненте (до `return (`) объявить переменную счётчик и функцию по обновлению состояния.
 Также сразу заиспользуем переменную с состоянием в разметке нашего компонента:
 ```tsx
 import React from 'react';
 import { useState } from 'react'; // Подключаем ссылку на useState.
 var Counter = () => {
    var [ count, setCount ] = useState(0); // И используем. Значение по умолчанию - 0.
    return (
        <div>Значение счётчика: {count}.</div>
    );
 };
 export default Counter;
 ```
 Пока у нас нет логики по изменению состояния, поэтому всегда будет отображаться то число, которое указано в `useState`.
 Добавим же её!
 Сперва добавим кнопку в фукнцию рендера.
 Сразу установим событие по клику на кнопку:
 ```tsx
 return (
    <div>
        <div>Значение счётчика: {count}.</div>
        <button onClick={handleIncrease}>Прибавить 1</button>
    </div>
 );
 ```
 Этот код изначально работать не будет, так как не объявлена функция-обработчик `handleIncrease`.
 Добавим её (до `return (`):
 ```tsx
 var handleIncrease = () => {
    setCount(count + 1);
 };
 ```
 Код должен заработать!
 Как видите, компонент в реакте - это функция, которая обычно выполняет какую-либо логику и возвращает разметку (тот самый HTML внутри JS).
 Сам движок React следит за состояниями компонентов и отрисовку их разметки: элементов.
 Программирование клиентских приложений превращается от манипуляции с DOM-деревом в манипуляцию с состояниями и пропсами компонентов.
 А что же такое пропсы?
 ## Пропсы
 Давайте изменим пример.
 Пускай мы можем передать в компонент `Counter` начальное значение счётчика и шаг его изменения.
 Изменим код в `App.tsx`: `<Counter start={10} step={5} />`.
 Приложение пока не будет запускаться, потому что мы объявили значения атрибутов, которые не описали.
 Опишем же их!
 В `Counter.tsx` добавим перед объявлением блоков интерфейс и заиспользуем его в описании компонента:
 ```tsx
 interface CounterProps {
    start: number;
    step: number;
 }
 var Counter = (props: CounterProps) => {
 ```
 Теперь код работает, однако значения наших параметров игнорируются, потому что мы их не используем.
 Добавьте использование параметров самостоятельно.
 Теперь создадим отдельный компонент под кнопку.
 Это нужно, например, если на сайте все кнопки должны иметь одинаковое поведение и одинаковый внешний вид.
 Допустим, заглушка для кнопки будет такая:
 ```tsx
 import React from 'react';
 interface ButtonProps {
    text: string;
    onClick: () => any; // TODO: Что это за пропс?
 }
 var Button = (props: ButtonProps) => {
    return (
        <button onClick={/* ??? */}>{props.text}</button>
    );
 };
 export default Button;
 ```
 Вам необходимо самостоятельно понять, что за `onClick` и что необходимо прописать в разметке, чтобы оно заработало.
 Также следует заиспользовать компонент в `Counter.tsx` вместо `<button>...</button>`.
 ## Демонстрация работы
 Демонстрация работы производится на лабораторном занятии.
 Если у Вас есть навык по работе с git, рекомендуется выложить код в публичный репозиторий и тем самым продемонстрировать навык использования этой технологии.
 В этом случае добавьте, пожалуйста, файл `.gitignore`, контент которого можно взять [отсюда](https://github.com/github/gitignore/blob/master/Node.gitignore).
 Если же у Вас нет навыка работы с git, то можете сформировать архив с кодом лабораторной работы или напрямую загрузить исходные тексты в облачное хранилище, чтобы потом перенести их на лабораторные компьютеры.
 Однако помните при этом, что **необходимо удалить папку `node_modules`**.
 В ней содержатся исходные тексты всех подключённых библиотек (и библиотек, подключённым к библиотекам, и .... и так далее, в общем), которые на проверку отправлять не нужно.
 ## Сдача лабораторной работы
 На лабораторных ПК должен быть установлен NodeJS и VS Code.
 Поэтому React-приложение необходимо будет продемонстрировать вместе с его кодом.
--- a/lwF2/README.md
+++ b/lwF2/README.md
@ -1,66 +0,0 @@
 # Лабораторная работа №F2 - Получение данных через API (Fetch)
 ## Цель работы
 Освоить получение данных через fetch API и отображение данных на клиенте.
 ## Ход выполнения работы
 1. Найти документацию по интеграции с API Github.
 2. Изучить fetch API и Promise в Javascript.
 3. Создать приложение React с шаблоном TypeScript.
 4. Описать интерфейс репозитория Github и состояние компонента со списком репозиториев.
 5. Реализовать метод получения данных о репозиториях пользователя и сохранение их в состоянии.
 6. Релизовать отображение списка репозиториев.
 ## Документация API Github
 Описание ресурсоа API Github можно найти здесь: <https://docs.github.com/en/rest>.
 Пример данных со списком репозиториев пользователя _vladdy-moses_: <https://api.github.com/users/vladdy-moses/repos>.
 В качестве примера можно использовать любого пользователя, количество публичных репозиториев у которого больше трёх. 
 ## Метод получения данных
 В качестве базы будет использоваться приложение из л/р №F1.
 Пусть в `App.tsx` будут выводиться карточки со списком репозиториев.
 Для того, чтобы это сделать, надо:
 1. Объявить интерфейс с информацией о репозитории: названии, описании, ссылке на github.
 2. Создать асинхронный метод по получению данных от API при помощи fetch API.
 3. Добавить вывод от API в `console.log` и вызвать метод, чтобы убедиться, что он работает.
 Получение данных надо реализовать при помощи Fetch API.
 Информацию можно получить здесь: <https://developer.mozilla.org/ru/docs/Web/API/Fetch_API>.
 Пример функции:
 ```tsx
 let getData = () => {
    fetch(`https://api.github.com/users/vladdy-moses/repos`)
    .then(res => res.json())
    .then((res: GithubRepo[]) => {
        console.log(res);
    })
 };
 ```
 ## Добавление состояния и вывод данных на экран
 Проведите самостоятельно.
 В качестве состояния можете использовать массив элементов с интерфейсом `GithubRepo`.
 В работе №F1 состоянием счётчика было "текущее количество".
 В этой же работе состоянием компонента "приложение" будет "массив репозиториев, полученный через API".
 Должно получиться что-то наподобие этого:
 ![](example.png)
 ## Защита лабораторной работы
 Как и с л/р №F1, её работу необходимо продемонстрировать на лабораторном занятии.
--- a/lwF2/example.png
+++ b/lwF2/example.png