Merge branch 'main' of github.com:vladdy-moses/ulstu-is-intprog-2022

2023-03-31 08:40:37 +04:00 · 2023-03-31 08:40:37 +04:00 · 3546dd4236
commit 3546dd4236
parent 86fb28202c 18166fa852
12 changed files with 576 additions and 4 deletions
--- a/README.md
+++ b/README.md
@ -17,9 +17,9 @@
 Обязательные лабораторные работы:

 * [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md)
-* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/TODO/README.md)
-* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/TODO/README.md)
-* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/TODO/README.md)
+* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md)
+* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md)
+* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/lw04/README.md)
 * [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/TODO/README.md)

 Лабораторные работы на выбор:
@ -27,7 +27,7 @@
 * [Лабораторная работа №F1 - Одностраничное приложение (React)](/TODO/README.md)
 * [Лабораторная работа №F2 - Получение данных через API (Fetch)](/TODO/README.md)
 * [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/TODO/README.md)
-* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/TODO/README.md)
+* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md)

 ## Правила допуска до экзамена

--- a/lw02/README.md
+++ b/lw02/README.md
@ -0,0 +1,218 @@
+# Лабораторная работа №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
@ -0,0 +1,97 @@
+# Лабораторная работа №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
@ -0,0 +1,171 @@
+# Лабораторная работа №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/lwB2/README.md
+++ b/lwB2/README.md
@ -0,0 +1,86 @@
+# Лабораторная работа №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;
+- зарегистрировать чат-бота;
+- подключить чат-бота к библиотеке и проверить, что обновления приходят;
+- попытаться хоть что-нибудь ответить самому себе через программу (хотя бы тем же самым сообщением);
+- дополнить обработку ответов уже тем, что описано выше в тексте лабораторной работы;
+- продемонстрировать работу.
+
+## Демонстрация работы
+
+Демонстрация работы предполагает запуск бота и проверку его ответов на сообщения преподавателя в режиме реального времени.