Евгений Колесников 3 mesiacov pred
rodič
commit
feeff95451

+ 50 - 0
articles/web_cs_01.md

@@ -0,0 +1,50 @@
+# Фреймворк ASP.NET Core MVC
+
+>Эта и следующие лекции взяты [отсюда](https://metanit.com/sharp/aspnetmvc/)
+
+Фреймворк ASP.NET Core MVC является частью платформы ASP.NET Core, его отличительная особенность - применение паттерна MVC. Преимуществом использования фрейморка ASP.NET Core MVC по сравнению с "чистым" ASP.NET Core является то, что он упрощает в ряде ситуаций и сценариев организацию и создание приложений, особенно это относится к большим приложениям.
+
+Стоит отметить, чам паттерн MVC не является исключительной особенностью ASP.NET Core MVC, данный паттерн появился еще в конце 1970-х годов в компании Xerox как способ организации компонентов в графическом приложение на языке Smalltalk и в настоящее время применяется во многих платформах и для различных языках программирования. Особенно популярен паттерн MVC в веб-приложениях.
+
+Концепция паттерна MVC предполагает разделение приложения на три компонента:
+
+- __Модель__ (model): описывает используемые в приложении данные, а также логику, которая связана непосредственно с данными, например, логику валидации данных. Как правило, объекты моделей хранятся в базе данных.
+
+    В MVC модели представлены двумя основными типами: модели представлений, которые используются представлениями для отображения и передачи данных, и модели домена, которые описывают логику управления данными.
+
+    Модель может содержать данные, хранить логику управления этими данными. В то же время модель не должна содержать логику взаимодействия с пользователем и не должна определять механизм обработки запроса. Кроме того, модель не должна содержать логику отображения данных в представлении.
+
+- __Представление__ (view): отвечают за визуальную часть или пользовательский интерфейс, нередко html-страница, через который пользователь взаимодействует с приложением. Также представление может содержать логику, связанную с отображением данных. В то же время представление не должно содержать логику обработки запроса пользователя или управления данными.
+
+- __Контроллер__ (controller): представляет центральный компонент MVC, который обеспечивает связь между пользователем и приложением, представлением и хранилищем данных. Он содержит логику обработки запроса пользователя. Контроллер получает вводимые пользователем данные и обрабатывает их. И в зависимости от результатов обработки отправляет пользователю определенный вывод, например, в виде представления, наполненного данными моделей.
+
+Отношения между компонентами паттерна можно описать следующей схемой:
+
+![](../img/web_intro_06.png)
+
+В этой схеме модель является независимым компонентом - любые изменения контроллера или представления никак не влияют на модель. Контроллер и представление являются относительно независимыми компонентами. Так, из представления можно обращаться к определенному контроллеру, а из контроллера генерировать представления, но при этом нередко их можно изменять независимо друг от друга.
+
+Такое разграничение компонентов приложения позволяет реализовать концепцию разделение ответственности, при которой каждый компонент отвечает за свою строго очерченную сферу. В связи с чем легче построить работу над отдельными компонентами. И благодаря этому приложение легче разрабатывать, поддерживать и тестировать отдельные компоненты. Допустим, если нам важна визуальная часть или фронтэнд, то мы можем тестировать представление независимо от контроллера. Либо мы можем сосредоточиться на бэкэнде и тестировать контроллер.
+
+## Первый проект на ASP.NET Core MVC в Visual Studio
+
+Для создания проекта на ASP.NET Core MVC мы можем выбрать любой тип проекта на ASP.NET Core и в нем уже добавлять необходимые компоненты. Однако для упрощения Visual Studio уже по умолчанию предоставляет для этого шаблон ASP.NET Core Web App (Model-View-Controller):
+
+![](../img/web_cs_01.png)
+
+Выберем данный шаблон для создания проекта. Дальше нам откроется окно для установки имени проекта. Допустим, проект будет называться HelloMvcApp:
+
+![](../img/web_cs_02.png)
+
+Структура проекта:
+
+![](../img/web_cs_03.png)
+
+- __wwwroot__: этот узел (на жестком диске ему соответствует одноименная папка) предназначен для хранения статических файлов - изображений, скриптов javascript, файлов css и т.д., которые используются приложением.
+- __Controllers__: папка для хранения контроллеров, используемых приложением. По умолчанию здесь уже есть один контроллер - Homecontroller
+- __Models__: каталог для хранения моделей. По умолчанию здесь создается модель ErrorviewModel
+- _Views_: каталог для хранения представлений. Здесь также по умолчанию добавляются ряд файлов - представлений
+
+appsettings.json: хранит конфигурацию приложения
+
+Program.cs: файл, который определяет входную точку в приложение ASP.NET Core

+ 295 - 0
articles/web_intro.md

@@ -0,0 +1,295 @@
+# Введение в веб-разработку: что это и зачем нужно
+
+>Взято [отсюда](https://sky.pro/wiki/html/vvedenie-v-veb-razrabotku-chto-eto-i-zachem-nuzhno/)
+
+## Что такое веб-разработка?
+
+Веб-разработка — это процесс создания и поддержания веб-сайтов и веб-приложений. Она включает в себя различные аспекты, такие как веб-дизайн, веб-программирование, управление базами данных и многое другое. Веб-разработка делится на две основные категории: фронтенд и бэкенд разработка. Эти две области тесно связаны, но выполняют разные функции. Важно понимать, что веб-разработка — это не просто написание кода, но и работа над улучшением пользовательского опыта, оптимизацией производительности и обеспечением безопасности веб-приложений.
+
+## Основные компоненты веб-разработки
+
+Веб-разработка состоит из нескольких ключевых компонентов, которые работают вместе для создания функционального и привлекательного веб-сайта:
+
+- __Веб-дизайн__: создание визуального интерфейса сайта. Это включает в себя выбор цветовой схемы, типографики, макета и других визуальных элементов, которые делают сайт привлекательным и удобным для пользователей.
+- __Веб-программирование__: написание кода для реализации функционала сайта. Это может включать в себя как фронтенд, так и бэкенд программирование, в зависимости от задач.
+- __Управление базами данных__: хранение и управление данными, которые используются на сайте. Это важный аспект, особенно для сайтов, которые работают с большим объемом данных, таких как интернет-магазины или социальные сети.
+- __Тестирование и отладка__: проверка сайта на наличие ошибок и их исправление. Тестирование может быть ручным или автоматизированным и включает в себя проверку функциональности, производительности и безопасности.
+- __SEO (поисковая оптимизация)__: улучшение видимости сайта в поисковых системах. Это включает в себя оптимизацию контента, структуры сайта и технических аспектов, чтобы сайт был легко найден пользователями через поисковые системы.
+
+## Фронтенд-разработка: что это и зачем нужно
+
+Фронтенд-разработка отвечает за внешний вид и интерактивность веб-сайта. Это та часть сайта, которую видит и с которой взаимодействует пользователь. Основные технологии, используемые во фронтенд-разработке, включают __HTML__, __CSS__ и __JavaScript__. Фронтенд-разработка также включает в себя работу с различными библиотеками и фреймворками, такими как __React__, __Angular__ и __Vue.js__, которые помогают упростить и ускорить процесс разработки.
+
+### Основные задачи фронтенд-разработчика
+
+- __Создание пользовательского интерфейса (UI)__: разработка визуальных элементов сайта, таких как кнопки, формы и меню. Это включает в себя не только создание отдельных элементов, но и их гармоничное сочетание для создания удобного и интуитивно понятного интерфейса.
+- __Обеспечение адаптивности__: создание сайтов, которые корректно отображаются на различных устройствах и экранах. Адаптивный дизайн позволяет пользователям комфортно пользоваться сайтом как на десктопах, так и на мобильных устройствах.
+- __Интерактивность__: добавление динамических элементов, таких как анимации и всплывающие окна. Это делает сайт более живым и интересным для пользователей, улучшая их опыт взаимодействия с сайтом.
+
+### Примеры технологий и инструментов
+
+- __HTML (HyperText Markup Language)__: основа любого веб-сайта, используется для создания структуры страниц. HTML позволяет создавать заголовки, абзацы, списки, таблицы и другие элементы, которые составляют контент страницы.
+- __CSS (Cascading Style Sheets)__: отвечает за стилизацию элементов HTML, таких как цвета, шрифты и макеты. CSS позволяет изменять внешний вид элементов, делая сайт более привлекательным и удобным для пользователей.
+- __JavaScript__: язык программирования, который добавляет интерактивность и динамическое поведение на сайт. JavaScript позволяет создавать сложные анимации, обрабатывать события пользователя и взаимодействовать с сервером без перезагрузки страницы.
+
+😉 Пример: Когда вы нажимаете на кнопку "Отправить" на форме обратной связи, это действие обрабатывается с помощью JavaScript. JavaScript может проверить введенные данные на наличие ошибок, отправить их на сервер и показать пользователю сообщение об успешной отправке.
+
+## Бэкенд-разработка: что это и зачем нужно
+
+Бэкенд-разработка отвечает за серверную часть веб-сайта, которая включает в себя серверы, базы данных и приложения. Бэкенд обеспечивает функциональность сайта, обрабатывая запросы от клиента и отправляя обратно нужные данные. Бэкенд-разработка также включает в себя работу с различными фреймворками и библиотеками, такими как __Django__, __Ruby on Rails__ и __Express.js__, которые помогают упростить и ускорить процесс разработки.
+
+### Основные задачи бэкенд-разработчика
+
+- __Управление базами данных__: создание, чтение, обновление и удаление данных. Это включает в себя работу с различными типами баз данных, такими как реляционные (MySQL, PostgreSQL) и нереляционные (MongoDB).
+- __Обработка запросов__: получение запросов от клиента и отправка ответов. Это может включать в себя обработку форм, выполнение бизнес-логики и генерацию динамического контента.
+- __Аутентификация и авторизация__: управление доступом пользователей к различным частям сайта. Это включает в себя проверку учетных данных пользователей, управление сессиями и обеспечение безопасности данных.
+
+### Примеры технологий и инструментов
+
+- __Серверные языки программирования__: такие как __PHP__, __Python__, __Ruby__, __Java__ и __Node.js__. Эти языки позволяют создавать серверные приложения, которые обрабатывают запросы от клиентов и взаимодействуют с базами данных.
+- __Базы данных__: __MySQL__, __PostgreSQL__, __MongoDB__ и другие. Базы данных используются для хранения и управления данными, которые используются на сайте.
+- __Фреймворки__: __Django__, __Ruby on Rails__, __Express.js__ и другие. Фреймворки помогают упростить и ускорить процесс разработки, предоставляя готовые решения для типичных задач.
+
+😉 Пример: Когда вы входите в свой аккаунт на сайте, ваши данные проверяются на сервере, и если они верны, вам предоставляется доступ к вашему профилю. Сервер обрабатывает запрос, проверяет учетные данные в базе данных и отправляет ответ обратно на фронтенд.
+
+## Различия между фронтенд и бэкенд разработкой
+
+Хотя фронтенд и бэкенд разработка тесно связаны, они выполняют разные функции и требуют различных навыков. Понимание этих различий поможет вам лучше ориентироваться в мире веб-разработки и выбрать направление, которое вам ближе.
+
+### Основные различия
+
+- __Фокус работы__: Фронтенд-разработка сосредоточена на пользовательском интерфейсе, в то время как бэкенд-разработка занимается серверной частью. Фронтенд-разработчики работают над тем, что видит и с чем взаимодействует пользователь, а бэкенд-разработчики обеспечивают функциональность и обработку данных.
+- __Технологии__: Фронтенд использует __HTML__, __CSS__ и __JavaScript__, а бэкенд — серверные языки программирования и базы данных. Фронтенд-разработчики также могут использовать различные библиотеки и фреймворки, такие как React, Angular и Vue.js, а бэкенд-разработчики — Django, Ruby on Rails и Express.js.
+- __Взаимодействие с пользователем__: Фронтенд-разработчики работают над тем, что видит и с чем взаимодействует пользователь, а бэкенд-разработчики обеспечивают функциональность и обработку данных. Фронтенд-разработка включает в себя создание визуальных элементов и добавление интерактивности, а бэкенд-разработка — работу с базами данных, обработку запросов и управление доступом пользователей.
+
+### Примеры взаимодействия
+
+- __Фронтенд__: Когда пользователь заполняет форму на сайте, фронтенд отвечает за отображение формы и валидацию данных на стороне клиента. Это может включать в себя проверку правильности введенных данных, отображение сообщений об ошибках и отправку данных на сервер.
+- __Бэкенд__: После отправки формы, данные отправляются на сервер, где бэкенд обрабатывает их, сохраняет в базу данных и отправляет ответ обратно на фронтенд. Это может включать в себя выполнение бизнес-логики, взаимодействие с базой данных и генерацию динамического контента.
+
+😉 Пример: Представьте себе интернет-магазин. Фронтенд отвечает за отображение товаров, корзины и оформления заказа, а бэкенд — за обработку заказов, управление запасами и обработку платежей. Когда пользователь добавляет товар в корзину, фронтенд обновляет интерфейс, а бэкенд сохраняет информацию о заказе в базе данных и проверяет наличие товара на складе.
+
+Таким образом, фронтенд и бэкенд разработка работают вместе, чтобы создать полноценный и функциональный веб-сайт. Понимание различий между ними поможет вам лучше ориентироваться в мире веб-разработки и выбрать направление, которое вам ближе. Независимо от того, выберете ли вы фронтенд или бэкенд, важно помнить, что обе эти области требуют постоянного обучения и совершенствования навыков, чтобы оставаться в курсе последних тенденций и технологий.
+
+## Фулстек-разработка
+
+В больших компаниях за разработку фронтенда и бэкенда отвечают разные специалисты. Но в стартапах часто нет возможности нанимать много сотрудников, поэтому задачи бэкендера и фронтендера может выполнять один человек — фулстек-разработчик.
+
+## [Основные языки фронтенда](https://purpleschool.ru/blog/HTML_CSS_JS)
+
+HTML, CSS и JavaScript - это основные языки, используемые в веб-разработке. Начинающим может быть сложно понять, что именно делают эти языки и как они работают вместе. В данной статье мы не будем погружаться в детали работы или использования каждого из трех основных языков программирования, а рассмотрим только основные аспекты и объясним их вклад в создание интерактивных веб-сайтов на примере написания простой страницы со счетчиком кликов.
+
+### HTML: структура страницы.
+
+Каждый раз заходя на любой сайт вы видите веб-страницу, которая состоит из блоков текста, картинок, кнопок и других элементов. Все эти элементы называются разметкой и описываются с помощью языка HTML (HyperText Markup Language) эта аббревиатура переводится как “язык гипертекстовой разметки”. Он представляет собой набор тегов, которые объявляют и описывают каждый элемент на странице. Браузеры интерпретируют HTML-код и отображают его в виде веб-страницы. Теги могут содержать в себе другие теги, формируя таким образом структуру страницы. Тег `<html>` является контейнером, который заключает в себе все содержимое веб-страницы. Внутри него находятся еще два обязательных тега: `<head>`, который содержит метаданные страницы (описание, название, ссылки на стили CSS, скрипты и др), которые не отображаются на самой странице и `<body>` в котором описывается видимое содержимое страницы. Создадим новый файл с названием `index.html`, после чего заполним его базовыми тегами. Код “пустой” страницы выглядит так:
+
+```
+<!DOCTYPE html>//тип документа
+<html lang="en">//открывающий тег страницы и указание языка
+  <head>//открывающий тег head
+    <meta charset="UTF-8" />//кодировка символов
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    //описание видимой части старницы 
+    <title>My document</title>//название страницы, отображаемое во вкладке браузера
+  </head>//закрывающий тег head
+  <body>//открывающий тег body
+    //здесь будет видимое содержимое
+  </body>//закрывающий тег body
+</html>//закрывающий тег страницы
+```
+
+Сейчас наша страница пуста и что бы ее наполнить, познакомимся с несколькими HTML-тегами:
+
+- `<div>` - универсальный блочный контейнер, который используется для группировки и структурирования других элементов на веб-странице.
+- `<h1>` - заголовок верхнего уровня на веб-странице. Он обычно используется для наиболее важных заголовков и имеет наибольший размер шрифта среди всех доступных уровней заголовков (от `<h1>` до `<h6>`).
+- `<p>` - используется для отображения отдельного параграфа текста на веб-странице. Он представляет блок текста, который обычно разделен на абзацы.
+- `<button>` - представляет кнопку, которая может быть нажата пользователем для выполнения определенного действия на веб-странице.
+
+```html
+<body>
+  <div>
+    <h1>Счетчик кликов</h1>
+    <p>Количество кликов: <span>0</span></p>
+    <button>Нажми на меня!</button>
+  </div>
+</body>
+```
+
+Открыв нашу страничку в браузере мы увидем результат:
+
+![](../img/web_intro_01.png)
+
+Наши теги расположились на странице в том порядке, в котором мы из указали в разметке, что видно по тексту, который мы поместили внутрь тегов. Текст внутри тега `<h1>` имеет больший шрифт, чем тот, что находится в `<p>` или `<span>`, наша кнопка нажимается и все это работает автоматически благодаря HTML. Каркас нашей страницы готов и следующим шагом мы сделаем ее более красивой.
+
+### CSS: стилизация элементов страницы
+
+Cascading Style Sheets (каскадные таблицы стилей) - это язык стилей, используемый для определения внешнего вида и оформления элементов на веб-страницах. С помощью CSS можно изменять стили текста, цвета, размеры, расположение элементов, а также добавлять анимацию и эффекты перехода.
+
+Стили можно описать прямо внутри тега, добавив атрибут __style__ с нужным значением: `<h1 style="color: blue">Счетчик кликов</h1>`
+
+Такой способ стилизации называется inline (инлайн) стилями потому что они описываются в строке с тегом. В данном примере мы указали для тега `<h1>` синий цвет текста и перейдя на нашу страницу мы увидем что цвет изменился только у него.
+
+![](../img/web_intro_02.png)
+
+Прописывать стили внутри тегов не очень удобно потому что они могут повторяться несколько раз на одной странице и для переиспользования CSCS кода существуют правила и селекторы для применения стилей к нескольким элементам HTML. Сегодня мы познакомимся с тремя из этих селекторов:
+
+- По тегу - выбирают элемент по названию тега.
+- По классу - выбирают элемент по значению, указанному атрибуте __class__ внутри тега.
+- По идентификатору - выбирают элемент по значению, указанному атрибуте __id__ внутри тега.
+
+Селекторы можно комбинировать что бы обратиться к конкретному элементу.
+
+Стили с селекторами можно описать прямо внутри HTML разметки в теге `<style>` или в отдельном файле с расширением css, после чего этот файл необходимо подключить внутри тега `<head>` страницы. На примере ниже мы опишем стили внутри разметки:
+
+```html
+<body>
+    <div class="container">//добавляем нашему div класс "container"
+        <h1 style="color: blue">Счетчик кликов</h1>//инлайн стили
+        <p>Количество кликов: <span>0</span></p>
+        <button id="button">//добавляем кнопке id "button"
+            Нажми на меня!
+        </button>
+    </div>
+    <style>//внутри этого тега можно описать стили
+        p {                  //селектор по тегу
+            color: red;      //задаем красный цвет внутри тега <p>
+        }
+        .container {         //селектор по классу
+            text-align: center; //задаем расположение текста посередине контейнера
+            margin-top: 100px;  //и отступ от верхнего края страницы в 100 пикселей
+        }
+        #button{             //селектор по идентификатору
+            background-color: blueviolet;
+            color: #fff;     //здесь мы задаем цвет текста с помощью кодировки, не словом
+            font-size: 16px; //задаем размер шрифта
+            padding: 10px 20px; //и внутренние отступы внутри кнопки
+        }
+        p span {            //комбинация селекторов
+            color: green; 
+        }
+    </style>
+</body>
+```
+
+В результате в браузере наша страничка изменит внешний вид:
+
+![](../img/web_intro_03.png)
+
+На примере выше можно отследить как изменились стили элементов страницы, но теперь она выглядит не очень эстетично поэтому удалим стили из разметки и перепишем их в отдельном css файле.
+
+```css
+/* styles.css */
+.container {
+  text-align: center;
+  margin-top: 100px;
+}
+
+p span {
+  font-size: 24px;
+  font-weight: bold; //задаем жирный шрифт для счетчика
+}
+
+#clickButton {
+  font-size: 16px;
+  padding: 10px 20px;
+  background-color: blue;
+  color: #fff;
+  border: none; //убираем рамку у кнопки
+  border-radius: 4px; //добавляем скругление краев кнопки
+  cursor: pointer; //при наведении на кнопку изменится курсор
+}
+```
+
+И подключим этот файл к нашей странице:
+
+```html
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="styles.css" /> //подключаем файл со стилями к странице
+  <title>My document</title>
+</head>
+```
+
+В итоге наша страница стала выглядеть намного лучше!
+
+![](../img/web_intro_04.png)
+
+### JavaScript: добавляем интерактивность
+
+HTML, как и CSS не являются языками программирования в полной мере. Они имеют множество признаков языков программирования, но оба крайне узконаправлены и не подойдут для других целей, кроме тех что описаны в их названии. JavaScript, в свою очередь является полноценным языком программирования и может использоваться практических во всех сферах разработки. Его отличительной особенностью является то, что он может исполняться прямо внутри браузера и получать доступ к элементам страницы. В этом разделе мы не будем описывать базовые концепции JavaScript, а просто продемонстрируем его работу в связке с HTML и CSS.
+
+Для начала создадим файл `script.js` и подключим его к нашей странице с помощью тега `<script>`. Код на JavaScript так же можно полностью описать внутри этого тега.
+
+```html
+<body>
+  <div class="container">
+    <h1>Счетчик кликов</h1>
+    <p>Количество кликов: <span>0</span></p>
+    <button id="clickButton">Нажми на меня!</button>
+  </div>
+  <script src="./script.js"></script>//прописываем тег и указываем а атрибуте src путь до файла
+</body>
+```
+
+Теперь перейдем к написанию кода на JavaScript, который оживит нашу страницу и при нажатии на кнопку наш счетчик начнет увеличиваться.
+
+```js
+// задаем начальное значение счетчика
+let counter = 0; 
+
+// получаем доступ к элементам по их идентификатору:
+const clickButton = document.getElementById("clickButton"); // доступ к кнопке
+const counterDisplay = document.getElementById("counter"); // доступ к span со счетчиком
+
+// добавляем слушатель, который отработает при нажатии кнопки
+clickButton.addEventListener("click", function () {
+  counter++; //увеличиваем значение счетчсика на 1 при каждом нажатии
+  counterDisplay.textContent = counter; //передаем это значение в наш span
+});
+```
+
+Теперь при нажатии на кнопку количество кликов будет расти. Не переживайте, если будучи незнакомым с JavaScript не смогли понять что происходит в коде. Как я уже писал выше, это полноценный язык программирования и на его изучение потребуется время. Данный пример просто демонстрация совместной работы HTML, CSS и JavaScript.
+
+Веб-разработка требует знания и умения использовать HTML, CSS и JavaScript. HTML используется для структурирования и разметки содержимого, CSS - для стилизации и оформления, а JavaScript - для добавления интерактивности и функциональности. Узнав основы каждого языка и их взаимодействие, вы будете готовы создавать красивые и функциональные веб-сайты.
+
+## Введение в ASP.NET Core
+
+### Что такое ASP.NET Core
+
+ASP.NET Core представляет технологию для создания веб-приложений на платформе .NET.
+
+### Архитектура и модели разработки
+
+Текущую архитектуру платформы ASP.NET Core можно выразить следующим образом:
+
+![](../img/web_intro_05.png)
+
+На самом верхнем уровне располагаются различные модели взаимодействия с пользователем. Это технологии построения пользовательского интерфейса и обработки ввода пользователя, как __MVC__, __Razor Pages__, __SPA__ (Single Page Application - одностраничные приложения с использованием Angular, React, Vue) и __Blazor__. Кроме того, это сервисы в виде встроенных HTTP API, библиотеки SignalR или сервисов GRPC.
+
+Все эти технологии базируются и/или взаимодействуют с чистым ASP.NET Core, который представлен прежде всего различными встроенными компонентами __middleware__ - компонентами, которые применяются для обработки запроса. Кроме того, технологии высшего уровня также взаимодействуют с различными расширениями, которые не являются непосредственной частью ASP.NET Core, как расширения для логгирования, конфигурации и т.д.
+
+И на самом нижнем уровне приложение ASP.NET Core работает в рамках некоторого веб-сервера, например, Kestrel, IIS, библиотеки HTTP.sys.
+
+Это вкратце архитектура платформы, теперь рассмотрим моделей разработки приложения ASP.NET Core:
+
+- Прежде всего это __базовый__ ASP.NET Core, который поддерживает все основные моменты, необходимые для работы соввременного веб-приложения: маршрутизация, конфигурация, логгирования, возможность работы с различными системами баз данных и т.д.. В ASP.NET Core 6 в фреймворк был добавлен так называемый __Minimal API__ - минимизированная упрощенная модель, который еще упростила процесс разработки и написания кода приложения. Все остальные модели разработки работаю поверх базового функционала ASP.NET Core
+- ASP.NET Core __MVC__ представляет в общем виде построения приложения вокруг трех основных компонентов - __Model__ (модели), __View__ (представления) и __Controller__ (контроллеры), где модели отвечают за работу с данными, контроллеры представляют логику обработки запросов, а представления определяют визуальную составляющую.
+
+    ![](../img/web_intro_06.png)
+
+- __Razor Pages__ представляет модель, при котором за обаботку запроса отвечают специальные сущности - страницы Razor Pages. Каждую отдельную такую сущность можно ассоциировать с отдельной веб-страницей.
+- ASP.NET Core __Web API__ представляет реализацию паттерна REST, при котором для каждого типа http-запроса (GET, POST, PUT, DELETE) предназначен отдельный ресурс. Подобные ресурсы определяются в виде методов контроллера Web API. Данная модель особенно подходит для одностраничных приложений, но не только.
+- __Blazor__ представляет фреймворк, который позволяет создавать интерактивные приложения как на стороне сервера, так и на стороне клиента и позволяет задействовать на уровне браузера низкоуровневый код WebAssembly.
+
+### Особенности платформы
+
+- ASP.NET Core работает поверх платформы .NET и, таким образом, позволяет задействовать весь ее функционал.
+- В качестве языков разработки применяются языки программирования, поддерживаемые платформой .NET. Официально встроенная поддержка для проектов ASP.NET Core есть у языков C# и F#
+- ASP.NET Core представляет кросс-платформенный фреймворк, приложения на котором могут быть развернуты на всех основных популярных операционных системах: Windows, Mac OS, Linux. И таким образом, с помощью ASP.NET Core мы можем как создавать кросс-платформенные приложения на Windows, на Linux и Mac OS, так и запускать на этих ОС.
+- Благодаря модульности фреймворка все необходимые компоненты веб-приложения могут загружаться как отдельные модули через пакетный менеджер Nuget.
+- Поддержка работы с большинством распространенных систем баз данных: MS SQL Server, MySQL, Postgres, MongoDB
+- ASP.NET Core характеризуется расширяемостью. Фреймворк построен из набора относительно независимых компонентов. И мы можем либо использовать встроенную реализацию этих компонентов, либо расширить их с помощью механизма наследования, либо вовсе создать и применять свои компоненты со своим функционалом.
+- Богатый инструментарий для разработки приложений. В качестве инструментария разработки мы можем использовать такую среду разработки с богатым функционалом, как Visual Studio от компании Microsoft.
+
+  Кроме того, имеющаяся оснастка .NET CLI позволяет создавать и запускать проекты ASP.NET в консоли. И таким образом, для написания кода можно использовать обычных текстовый редактор, например, Visual Studio Code.

BIN
img/web_cs_01.png


BIN
img/web_cs_02.png


BIN
img/web_cs_03.png


BIN
img/web_intro_01.png


BIN
img/web_intro_02.png


BIN
img/web_intro_03.png


BIN
img/web_intro_04.png


BIN
img/web_intro_05.png


BIN
img/web_intro_06.png


+ 5 - 0
readme.md

@@ -321,6 +321,11 @@ https://office-menu.ru/uroki-sql Уроки SQL
 
 ### Разработка веб приложений (ASP.NET)
 
+1. [Введение в веб-разработку](./articles/web_intro.md)
+1. [Введение в ASP.NET Core MVC](./articles/web_cs_01.md)
+
+<!-- https://metanit.com/sharp/aspnetmvc/1.1.php -->
+
 ### Разработка мобильных приложений (MAUI)
 
 1. [Что такое MAUI, создание мобильного приложения для Android используя VSC](./articles/cs_maui.md)