diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..23109ec --- /dev/null +++ b/.gitignore @@ -0,0 +1,21 @@ +# Project +_site +.sass-cache + +# Linux / Unix +!.gitkeep +!.gitignore +*~ + +# Mac OS +.DS_Store +.AppleDouble +.LSOverride +Icon +._* +.Spotlight-V100 +.Trashes + +# Windows +Thumbs.db +Desktop.ini diff --git a/404.md b/404.md new file mode 100644 index 0000000..a27f956 --- /dev/null +++ b/404.md @@ -0,0 +1,7 @@ +--- +title: 404 Not Found +permalink: /404.html +layout: page +--- + +

Страница не найдена. Вернуться на главную →

diff --git a/_config.local.yml b/_config.local.yml new file mode 100644 index 0000000..2b2a9f9 --- /dev/null +++ b/_config.local.yml @@ -0,0 +1,5 @@ +# URL +baseurl: "" +# URL for static files +assets_url: "/assets" +pictures_url: "/pictures" diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..b3b20ea --- /dev/null +++ b/_config.yml @@ -0,0 +1,40 @@ +# Basic +name: "Web технологии" + +# URL +baseurl: "/tp-stepic" +permalink: /:title/ + +# Markdown +markdown: kramdown + +# Sass +sass: + style: :compressed + +# URL for static files +assets_url: "/tp-stepic/assets" +pictures_url: "/tp-stepic/pictures" + +# these files will be copied to destination +keep_files: ["assets", "node_modules", "pdf", "pictures"] + +# Collections +collections: + lessons: + output: true + permalink: /:name/ + +# Scopes +defaults: + - + scope: + path: "" + type: "lessons" + values: + layout: "lesson" + +# Site info +author: + name: "Дмитрий Смаль" + url: "https://github.com/mialinx/" diff --git a/_layouts/lesson.html b/_layouts/lesson.html new file mode 100644 index 0000000..66bf208 --- /dev/null +++ b/_layouts/lesson.html @@ -0,0 +1,43 @@ + + + + {{ site.name }} + + + + + + + + +
+

{{ site.name }}

+

+ {% comment %} prev/next page [hack for old jekyll v2.4.0 on GH pages] {% endcomment %} + {% assign lessons = site.lessons | sort:'num' %} + + {% for lesson in lessons %}{% if lesson.num == page.num %} + + {% unless forloop.first%}{% assign prev_i = forloop.index0 | minus: 1 %} + ← + {% endunless %} + + {{ page.num }}. {{ page.title }} + + {% unless forloop.last %}{% assign next_i = forloop.index0 | plus: 1 %} + → + {% endunless %} + + {% endif %}{% endfor %} +

+

{{ site.author.name }}

+
+ + {{ content }} + +
+ + + + + diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 0000000..762eaf0 --- /dev/null +++ b/_layouts/page.html @@ -0,0 +1,22 @@ + + + + + + {% if page.title %}{{ page.title }}{% else %}{{ site.name }}{% endif %} + + + +
+
+

+ {{ site.name }} +

+ +
+ {{ content }} +
+ + diff --git a/lesson-1/index.html b/_lessons/lesson-01.html similarity index 72% rename from lesson-1/index.html rename to _lessons/lesson-01.html index f18cb18..cfef304 100644 --- a/lesson-1/index.html +++ b/_lessons/lesson-01.html @@ -1,41 +1,30 @@ - - - - Web технологии - - - - - - - - -
-

Web технологии

-

Дмитрий Смаль

-
- -
+--- +num: 1 +title: Архитектура Web приложений +description: "Понятие URL и документа. Виды документов: HTML, CSS, JS, JSON. Абсолютные и относительные URL. Правила разрешения URL-ов. Гиперссылки. Клиент-серверная архитектура." +--- + +
+

Web технологии

-
+
+
-
+
+

Web технологии

+
+
-
- -
+
+

О чем этот курс ?

  • Общая архитектура WWW
    • @@ -44,9 +33,11 @@

    О чем этот курс ?

  • Актуальные технологии и ПО
  • «Best practices»
-
+
+
-
+
+

Какие знания потребуются ?

  • Общие навыки программирование
    • @@ -54,22 +45,27 @@

    Какие знания потребуются ?

  • Использование Linux - на уровне пользователя
  • Желательно: опыт HTML верстки
-
+
+
-
+
+

Что останется за рамками курса ?

  • Сетевые технологии
  • Все используемые языки программирования
  • Frontend разработка
-
+
+
-
+

Internet vs WWW

-
+
+
-
+
+

Internet

Internet - глобальная сеть передачи данных

Протоколы

@@ -79,23 +75,30 @@

Протоколы

  • TCP - надежная последовательная передача данных
  • IP - глобальная адресация, передача в гетерогенной среде
    • -
    +
    +
    -
    +
    +

    World Wide Web

    WWW - множество взаимосвязанных документов, располагающихся на машинах подключенных к Internet

    WWW - набор протоколов, серверного и клиентского ПО, позволяющих получать доступ к документам

    -
    +
    +
    -
    - -
    +
    +
    + +
    +
    -
    +

    Документы

    -
    +
    +
    -
    +
    +

    Типы документов (MIME-типы)

    @@ -116,9 +119,11 @@

    Типы документов (MIME-типы)

    Расширения файлов играют второстепенную роль

    -
    +
    +
    -
    +
    +

    text/html

    -
    +
    +
    -
    +
    +

    text/css

    -
    +
    +
    -
    +
    +

    text/xml

    -
    +
    +
    -
    +
    +

    application/json

    -
    +
    +
    -
    +
    +

    Документы могут быть

    • Статические @@ -190,13 +207,16 @@

      Документы могут быть

    -
    +
    +
    -
    +

    URL

    -
    +
    +
    -
    +
    +

    URL - unified resource locator

    http://server.org:8080/path/doc.html?a=1&b=2#part1
      @@ -207,9 +227,11 @@

      URL - unified resource locator

    • a=1&b=2 - опции запроса
    • part1 - якорь, положение на странице
    -
    +
    +
    -
    +
    +

    Абсолютные и относительные URL

    • http://server.org/1.html - абсолютный
      • @@ -219,9 +241,11 @@

      Абсолютные и относительные URL

    • ?a=1&b=2 - относительный (от URL текущего документа)
    • #part2 - относительный (в пределах текущего документа)
    -
    +
    +
    -
    +
    +

    Правила разрешения URL

    https://site.com/path/page.html - основной документ
    + http://wikipedia.org = http://wikipedia.org
    @@ -230,21 +254,26 @@

    Правила разрешения URL

    + another.html = https://site.com/path/another.html
    + ?full=1 = https://site.com/path/page.html?full=1
    + #chapter2 = https://site.com/path/page.html#chaprer2
    -
    +
    +
    -
    +

    Как документы могут ссылаться друг на друга?

    -
    +
    +
    -
    +
    +

    HTML - гиперссылки

    Список товаров в корзине

    -
    +
    +
    -
    +
    +

    HTML - формы

    - - - -
    + + +
    +
    -
    +
    +

    CSS - ресурсы

    -
    +
    +
    -
    +
    +

    JavaScript - прямое указание URL

    -
    +
    +
    -
    +

    Клиент-серверная архитектура

    -
    +
    +
    -
    +
    +

    Клиент-серверная архитектура

    Web-клиенты работают на компьютерах конечных пользователей. - Задача Web-клиентов состоит в получении и отображении документов.

    + Задача Web-клиентов состоит в получении и отображении документов.

    Web-сервера работают (как правило) на серверах в датацентрах. - Их задача заключается в хранении (или генерации) и отдачи документов.

    -
    - -
    - -
    - -
    + Их задача заключается в хранении (или генерации) и отдачи документов.

    +
    +
    + +
    +
    + +
    +
    + +
    +

    Преимущества подхода

    • Открытый протокол
      • @@ -323,12 +362,7 @@

      Преимущества подхода

    • Прозрачный способ взаимодействия приложений
    • Распределенная и масштабируемая система
    -
    +
    +
    - -
    - - - - - + diff --git a/lesson-2/index.html b/_lessons/lesson-02.html similarity index 71% rename from lesson-2/index.html rename to _lessons/lesson-02.html index 120655a..9d4dfb4 100644 --- a/lesson-2/index.html +++ b/_lessons/lesson-02.html @@ -1,25 +1,16 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    - -
    +--- +num: 2 +title: Web-клиенты +description: "Консольные утилиты. Telnet. Библиотеки в ЯП. libcurl, urllib. Браузер. Фичи браузера: куки, сессии, Referer. Основной сценарий работы. Классические web приложения. One-page приложения." +--- + +

    Web клиенты

    -
    +
    +
    -
    +
    +

    Разновидности web-клиентов

    • Библиотеки в ЯП: libcurl, urllib, и т.д.
      • @@ -32,9 +23,11 @@

      Разновидности web-клиентов

    -
    +
    +
    -
    +
    +

    Особенности библиотек web-клиентов

    • Предоставляют максимум опций для работы с HTTP
      • @@ -42,9 +35,11 @@

      Особенности библиотек web-клиентов

    • Перенаправления, куки - опционально

    Назначение: используются внутри других программ для простой работы c HTTP

    -
    +
    +
    -
    +
    +

    Пример использования urllib

    -
    +
    +
    -
    +
    +

    Назначение консольных клиентов

    • Автоматизация в shell-скриптах
    • Создание "статической копии сайта"
    • Отладка web-приложений
    -
    +
    +
    -
    +
    +

    Telnet

    Telnet - это простейшее средство отладки. telnet открывает tcp соединение - и связывает его с консолью, позволяя общаться с web-сервером напрямую с клавиатуры.

    -
    + и связывает его с консолью, позволяя общаться с web-сервером напрямую с клавиатуры.

    +
    +
    -
    +
    +
    -
    +
    +
    -
    +
    +

    Еще примеры отладки

    GET запрос к серверу с отображением всех заголовков:
    curl -vv 'http://api.site.com/method/?arg=1'

    POST запрос к серверу с авторизацией и передачей доп. заголовков:
    curl -vv -d 'arg=1' -H'X-Token: 123' 'http://api.site.com/method/'

    -
    +
    +
    -
    +

    Браузер

    -
    +
    +
    -
    +
    +

    Основное назначение - отображение HTML страниц.
    - Однако, возможности современных браузеров огромны.
    - Существуют операционные системы и 3D-игры, работающие внутри браузеров!

    + Однако, возможности современных браузеров огромны.
    + Существуют операционные системы и 3D-игры, работающие внутри браузеров!

    www.evolutionoftheweb.com

    -
    +
    +
    -
    +
    +

    Сценарий работы web приложения

    • Пользователь вводит URL
      • @@ -123,13 +131,17 @@

      Сценарий работы web приложения

    • Пользователь переходит по гиперссылке или отправляет форму
    • Цикл повторяется
    -
    +
    +
    + +
    +
    + +
    +
    -
    - -
    - -
    +
    +

    Сценарий работы современного приложения

    • Браузер загружает Web страницу, ресурсы и отображает ее
      • @@ -138,13 +150,17 @@

      Сценарий работы современного приложения<
    • Пользователь взаимодействуюет с UI, что приводит к вызову JavaScript обработчиков
    • JavaScript обновляет данные на сервере или загружает новые данные, используя AJAX

    -
    +
    +
    -
    - -
    +
    +
    + +
    +
    -
    +
    +

    Особенности современных Web-приложений

    • UI находится на 1 или нескольких страницах (one-page)
      • @@ -153,11 +169,5 @@

      Особенности современных Web-приложений

    • Используется шаблонизация в JavaScript
    • Application сервер возвращает чистые данные (JSON или XML, а не HTML)
    -
    - -
    - - - - - +
    +
    diff --git a/lesson-3/index.html b/_lessons/lesson-03.html similarity index 82% rename from lesson-3/index.html rename to _lessons/lesson-03.html index a838ccb..3c42793 100644 --- a/lesson-3/index.html +++ b/_lessons/lesson-03.html @@ -1,25 +1,17 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    +--- +num: 3 +title: HTML - Основы разметки +description: "DOCTYPE. Картинки, стили, скрипты и другие ресурсы. Блочные и строчные тэги. Таблицы и списки. Гиперссылки и формы." +--- -
    +
    +

    HTML

    -
    +
    +
    -
    +
    +
    -
    +
    +
    -
    +
    +

    Особенности HTML разметки

    • Произвольный регистр: <BR> == <br>
      • @@ -48,9 +42,11 @@

      Особенности HTML разметки

    • Перестановки тэгов: <b><i></b></i>
    • «Свои» тэги: <magic></magic>
    -
    - -
    +
    +
    + +
    +

    Особенности XHTML разметки

    • Только нижний регистр тэгов
      • @@ -61,37 +57,47 @@

      Особенности XHTML разметки

    • id вместо name
    • Необходим DOCTYPE
    -
    +
    +
    -
    +
    +

    DOCTYPE

    DOCTYPE уточняет тип содержимого, указывает HTML парсеру как правильно разбирать данный документ.

    XHTML 1.1

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> -
    +
    +
    -
    +
    +

    DOCTYPE

    HTML 4 Transitional

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    HTML5

    <!DOCTYPE html> -
    - -
    +
    +
    + +
    +

    HTML тэги

    -
    +
    +
    -
    +
    +

    Тэги верхнего уровня

    • html - обертка
    • head - заголовок страницы, не отображается
    • body - тело страницы, то, что видит пользователь
    -
    +
    +
    -
    +
    +

    Тэги внутри head

    • title - отображается в заголовке окна браузера
      • @@ -100,9 +106,11 @@

      Тэги внутри head

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    -
    +
    +
    -
    +
    +

    Тэги внутри head (2)

    • link - указание связанных ресурсов, например CSS
      @@ -113,21 +121,27 @@

      Тэги внутри head (2)

      <script src="./jquery.js" charset="windows-1251" async></script>
    -
    +
    +
    -
    +
    +

    Рекомендацим по link и script

    Загрузку CSS (тэг link) рекомендуется ставить в тэге head, а загрузку JavaScript (тэг script) - наоборот ближе к концу странице. Это повышает скорость отрисовки страницы.

    -
    +
    +
    -
    +
    +

    Блочные и строчные тэги

    -
    +
    +
    -
    +
    +

    Блочные тэги

    • h1 - h6 ― различные уровни заголовков
      • @@ -137,16 +151,20 @@

      Блочные тэги

    • blockquote ― цитирование длинного блока текста
    • div ― абстрактный блочный контейнер
    -
    +
    +
    -
    +
    +

    Пример

    Верстка этого слайда сделана в HTML и является отличным примером использования блочных тэгов.

    Подзаголовок

    Хотя из-за стилей оформления презентации это не так очевидно.

    -
    +
    +
    -
    +
    +

    Строчные тэги

    • a ― гиперссылки
      • @@ -157,26 +175,35 @@

      Строчные тэги

    • sup ― верхний индекс
    • span ― абстрактный строчный контейнер
    -
    +
    +
    -
    +
    +

    Списки и таблицы

    -
    +
    +
    -
    +
    +

    Списки в HTML

    ul, ol, li - маркированные списки

    -
    +
    +
    -
    +
    +

    Таблицы в HTML

    -
    +
    +
    -
    +
    +

    Таблицы в HTML

    - -
    + +
    +
    -
    +
    +

    Гиперссылки

    -
    +
    +
    -
    +
    +

    Гиперссылки

    -
    + +
    +
    -
    +
    +

    Аттрибуты формы

    • action - URL, на который будет отправлена форма
      • @@ -264,9 +306,11 @@

      Аттрибуты формы

      Если форма содержит поля для ввода файлов, то должно быть multipart/form-data
    -
    +
    +
    -
    +
    +

    application/x-www-form-urlencoded

    Это способ кодирования данных формы для передачи через URL.
    @@ -279,13 +323,17 @@

    application/x-www-form-urlencoded

    В закодированном виде это буде выглядеть так: id=3&name=%D0%92%D0%B0%D1%81%D1%8F&friend=4&friend=5

    -
    +
    +
    -
    +
    +

    Поля ввода данных

    -
    +
    +
    -
    +
    +

    Элементы ввода формы

    • input - универсальное поле, может быть: @@ -299,9 +347,11 @@

      Элементы ввода формы

    • textarea - многострочное поле ввода
    • select,option - выпадающий список
    -
    +
    +
    -
    +
    +

    Атрибуты элементов ввода

    - - - - +
    +
    diff --git a/lesson-4/index.html b/_lessons/lesson-04.html similarity index 71% rename from lesson-4/index.html rename to _lessons/lesson-04.html index e948d59..88f2ec6 100644 --- a/lesson-4/index.html +++ b/_lessons/lesson-04.html @@ -1,33 +1,27 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    +--- +num: 4 +title: CSS +description: "Синтаксис, селекторы, псевдоклассы и псевдоэлементы, приоритеты стилей и каскадирование, основные стили, позиционирование, box-model." +--- -
    +
    +

    CSS

    -
    +
    +
    -
    +
    +

    Как задать оформление страницы ?

    HTML, в отличие от XML, обладает семантикой, т.е. браузер знает как отображать тот или иной HTML тэг. В HTML есть тэги для управления внешним видом (color, font, big, ...), но их возможности явно недостаточны.

    Решение - описывать внешний вид отдельно от структуры документа c помощью языка Cascading Style Sheets.

    -
    +
    +
    -
    +
    +

    Синтаксис CSS

    -
    - -
    +
    +
    + +
    +

    Где могут быть заданы стили?

    • Встроенные в браузер стили
      • @@ -55,9 +51,11 @@

      Где могут быть заданы стили?

    • Стили могут быть привязаны к конкретному тэгу
      <img style="margin: 3px" src="...">
    -
    +
    +
    -
    +
    +

    Какие бывают стили ?

    • width, height ― размеры элемента
      • @@ -68,13 +66,17 @@

      Какие бывают стили ?

    • font ― управление шрифтом
    • text-align ― выравнивание текста
    -
    +
    +
    -
    +
    +

    CSS селекторы

    -
    +
    +
    -
    +
    +

    Классы и идентификаторы

    -
    +
    +
    -
    +
    +

    Наследование и приоритеты

    -
    +
    +
    -
    +
    +

    Наследование стилей

    Не все стили наследуются.

    -
    +
    +
    -
    +
    +

    Приоритеты стилей

    В случае, если два разных стиля конфликтуют между собой, применяется тот, что обладает большей специфичностью. Если специфичность двух стилей совпадает, применяется тот, что расположен ниже в HTML/CSS коде.

    Указание в значение стиля флага !important позволяет перекрыть проверку специфичности.

    -
    +
    +
    -
    +
    +

    Правила расчета специфичности

    • id – 100
      • @@ -184,14 +202,18 @@

      Правила расчета специфичности

    • тэги и псевдоэлементы – 1

    Так, например, селектор ul.info ol + li обладает специфичностью 13, - а селектор li.red.level специфичностью 21 балл

    -
    + а селектор li.red.level специфичностью 21 балл

    +
    +
    -
    +
    +

    Отображение элементов

    -
    +
    +
    -
    +
    +

    Режимы отображения элементов

    • display: none ― элемент невидим, не занимает места
      • @@ -199,9 +221,11 @@

      Режимы отображения элементов

    • display: inline ― элемент занимает минимальную ширину, и не прерывает строку, игнорирует width, height
    • display: inline-block ― блочный элемент, но не разрывает строку, примерно как img
    -
    +
    +
    -
    +
    +

    DIV vs. SPAN

    @@ -211,7 +235,7 @@

    DIV vs. SPAN

    ONE 2
    -
    +
    +
    -
    +
    +

    float & clear

    - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor iaculis massa. Fusce sollicitudin purus viverra erat sollicitudin placerat sit amet ut diam. Vivamus malesuada tristique elit. Proin nec eros tempor.

    float: left - всплывание влево, float: right - всплывание вправо, clear: both - отменяет всплывание, «проводит черту»

    -
    +
    +
    -
    +
    +

    float & clear

    - -
    +
    +
    +

    Что включает в себя Bootstrap?

    +
      +
    • Шаблон страниц
      • +
    • Сетка
      • +
    • Современные «стили по умолчанию»
      • +
    • Верстка: таблицы, формы, списки, кнопки, …
      • +
    • Компоненты: навигация, меню, пагинатор, …
      • +
    • JavaScript плагины
      • +
    +
    +
    -
    - - - - - +
    +
    +

    Сетка Bootstrap

    + + +
    +
    diff --git a/lesson-5/index.html b/_lessons/lesson-05.html similarity index 71% rename from lesson-5/index.html rename to _lessons/lesson-05.html index 8fa1185..e399ba6 100644 --- a/lesson-5/index.html +++ b/_lessons/lesson-05.html @@ -1,25 +1,17 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    - -
    +--- +num: 5 +title: Сетевые протоколы +description: "DNS. Домены и зоны, делегирование. Рекурсивные запросы. TCP. Понятие порта. TCP handshake. TCP клиент и сервер. TLS." +--- + +
    +

    Как происходит HTTP запрос ?

    -
    +
    +
    -
    +
    +

    Как происходит HTTP запрос ?

    • Браузер анализирует введенный URL и извлекает имя хоста
      • @@ -30,43 +22,59 @@

      Как происходит HTTP запрос ?

    • Браузер закрывает соединение (для HTTP/1.0)
    • Далее процесс парсинга и отображения документа ...
    -
    +
    +
    -
    - -
    +
    +
    + +
    +
    -
    +
    +

    DNS

    -
    +
    +
    -
    +
    +

    Domain Name System

    DNS - это распределенная база данных, хранящая информацию о доменах, в первую очередь - отображение доменных имен на IP адреса машин, обслуживающих эти домены

    -
    + отображение доменных имен на IP адреса машин, обслуживающих эти домены

    +
    +
    -
    +
    +

    Пространство доменных имен

    - -
    + +
    +
    -
    +
    +

    Домены и зоны

    База DNS разделена на зоны. Каждая зона находится под единым административным контролем. - Проще говоря обслуживается одной организацией.

    + Проще говоря обслуживается одной организацией.

    Хранение информации о доменах более высокого уровня может быть делегировано другим зонам.

    -
    - -
    - -
    - -
    - -
    - -
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +

    Что содержит зона DNS сервера ?

    • A - IPv4 адрес(а) для данного домена
      • @@ -74,32 +82,40 @@

      Что содержит зона DNS сервера ?

    • NS - адрес(a) DNS серверов обслуживающих данную зону
    • MX - адрес(а) почтовых серверов для данного домена
    -
    +
    +
    -
    +
    +

    TCP

    -
    +
    +
    -
    +
    +

    Зачем нужен TCP ?

    TCP - протокол, обеспечивающий надежную последовательную доставку данных. - Фактически, TCP предоставляет интерфейс, похожий на файловый ввод/вывод для сетевых соединений.

    + Фактически, TCP предоставляет интерфейс, похожий на файловый ввод/вывод для сетевых соединений.

    • Надежная доставка
    • Полнодуплексная передача
    • Контроль потока - защита от переполнения
    -
    +
    +
    -
    +
    +

    TCP порты

    TCP порт - это «адрес» сетевого соединения в пределах одного хоста. TCP порты позволяют поддерживать множество открытых соединений на одной машине.

    Номер порта - целое число, не больше 65535. Порты ниже 1024 требуют привилегий суперпользователя для использования.

    -
    +
    +
    -
    +
    +

    Стандартные TCP порты

    • 20,21 - FTP
      • @@ -108,14 +124,18 @@

      Стандартные TCP порты

    • 80 - HTTP
    • 443 - HTTPS
    -
    +
    +
    -
    +
    +

    Установление TCP соединения

    - -
    + +
    +
    -
    +
    +

    Пример TCP клиента

    -
    +
    +
    -
    +
    +

    Пример TCP сервера

    -
    +
    +
    -
    +
    +

    Как правильно читать данные из сокета ?

    -
    +
    +
    -
    +
    +

    Как правильно записывать данные в сокет ?

    -
    +
    +
    -
    +
    +

    TLS

    -
    +
    +
    -
    +
    +

    TLS - Transport Layer Security

    TLS (а ранее SSL) - криптографический протокол, обеспечивающий безопасную передачу данных между хостами в Internet.

      @@ -185,14 +215,18 @@

      TLS - Transport Layer Security

    • Шифрование и сжатие передаваемой информации
    • Защита от подмены и проверка целостности сообщений
    -
    - -
    +
    +
    + +
    +

    Установление TLS соединения

    - -
    + +
    +
    -
    +
    +
    • ClientHello - клиент указывает желаемые опции соединения
    • ServerHello - сервер подтверждает опции соединения
      • @@ -201,19 +235,13 @@

      Установление TLS соединения

    • ClientKeyExchange - клиент отправляет серверу ключ симметричного шифрования (или параметры для его генерации)
    • Finished - сервер подтверждает завершение рукопожатия
    -
    +
    +
    -
    +
    +

    Неутешительный вывод

    Установление TCP и TLS соединения требует существенного времени. Минимум 1 RTT для TCP соединения и 1-2 RTT для TLS соединения.

    Под RTT понимается Round Trip Time - время, необходимое для передачи IP дейтаграммы к серверу и обратно.

    -
    - - - -
    - - - - - +
    +
    diff --git a/lesson-6/index.html b/_lessons/lesson-06.html similarity index 79% rename from lesson-6/index.html rename to _lessons/lesson-06.html index 0e59131..c0a4922 100644 --- a/lesson-6/index.html +++ b/_lessons/lesson-06.html @@ -1,25 +1,17 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    - -
    +--- +num: 6 +title: Протокол HTTP +description: "Назначение и ключевые особенности. Синтаксис запроса и ответа. Методы запросов. HTTP заголовки. Коды ответа. Управление соединением." +--- + +
    +

    HTTP

    -
    +
    +
    -
    +
    +

    Какие задачи решает HTTP?

    • Передача документов
      • @@ -30,13 +22,17 @@

      Какие задачи решает HTTP?

    • Согласование содержимого (negotiation)
    • Управление соединением
    -
    +
    +
    -
    - -
    +
    +
    + +
    +
    -
    +
    +

    Ключевые особенности HTTP

    • Работает поверх TCP/TLS
      • @@ -45,9 +41,11 @@

      Ключевые особенности HTTP

    • Текстовый протокол
    • Расширяемый протокол
    -
    +
    +
    -
    +
    +

    HTTP/1.0 запрос

    Перевод строки - \r\n

    -
    +
    +
    -
    +
    +

    HTTP/1.1 запрос

    -
    +
    +
    -
    +
    +

    HTTP/1.1 ответ

    -
    +
    +
    -
    +
    +

    HTTP запрос состоит из

    • строка запроса @@ -98,9 +102,11 @@

      HTTP запрос состоит из

    • заголовки
    • тело запроса
    -
    +
    +
    -
    +
    +

    HTTP методы

    • GET - получение документа
      • @@ -111,9 +117,11 @@

      HTTP методы

    • CONNECT, TRACE, OPTIONS - используются редко (*)
    • COPY, MOVE, MKCOL - расширения WebDAV (*)
    -
    +
    +
    -
    +
    +

    HTTP ответ состоит из

    • строка ответа @@ -126,9 +134,11 @@

      HTTP ответ состоит из

    • заголовки
    • тела ответа - документ
    -
    +
    +
    -
    +
    +

    HTTP коды ответа

    • 1xx - информационные
      • @@ -137,9 +147,11 @@

      HTTP коды ответа

    • 4xx - ошибка на стороне клиента
    • 5xx - ошибка на стороне сервера
    -
    +
    +
    -
    +
    +

    HTTP коды ответа (1)

    • 200 OK - запрос успешно выполнен
      • @@ -148,9 +160,11 @@

      HTTP коды ответа (1)

    • 302 Found - повторить запрос по другому URL
    • 304 Not Modified - документ не изменился, использовать кеш
    -
    +
    +
    -
    +
    +

    HTTP коды ответа (2)

    • 400 Bad Request - неправильный синтаксис запроса
      • @@ -161,9 +175,11 @@

      HTTP коды ответа (2)

    • 502 Bad Gateway - проксируемый сервер отвечает с ошибкой
    • 504 Gateway Timeout - проксируемый сервер не отвечает
    -
    +
    +
    -
    +
    +

    Заголовки HTTP (общие)

    Для управления соединением и форматом сообщения (документа)

      @@ -174,9 +190,11 @@

      Заголовки HTTP (общие)

    • Connection - управление соединением
    • Upgrade - смена протокола
    -
    +
    +
    -
    +
    +

    Заголовки HTTP запросов

    • Authorization - авторизация, чаще всего логин/пароль
      • @@ -186,9 +204,11 @@

      Заголовки HTTP запросов

    • If-Modified-Since - условный GET запрос
    • Accept-* - согласование (negotiation) содержимого
    -
    +
    +
    -
    +
    +

    Заголовки HTTP ответов

    • Location - новый URL документа при перенаправлениях
      • @@ -197,23 +217,31 @@

      Заголовки HTTP ответов

    • Date - Дата на сервере, для согласования кешей
    • Server - описание web-сервера, название и версия
    -
    +
    +
    -
    +
    +

    HTTP/1.1 управление соединением

    -
    +
    +
    -
    - -
    +
    +
    + +
    +
    -
    +
    +

    Общие принципы

    Протокол HTTP/1.0 предполагает закрытие TCP соединения сразу после ответа сервера.

    Протокол HTTP/1.1 предполагает удержание TCP соединения, если не было заголовка Connection: close.

    -
    +
    +
    -
    +
    +

    Логика управления в HTTP/1.1

    Соединение должно быть закрыто, если:

      @@ -222,12 +250,5 @@

      Логика управления в HTTP/1.1

    • по истечении таймаута (обычно небольшой, около 10с)

    Иначе соединение остается открытым для последующих запросов. -

    - - -
    - - - - - +
    +
    diff --git a/lesson-7/index.html b/_lessons/lesson-07.html similarity index 74% rename from lesson-7/index.html rename to _lessons/lesson-07.html index e8c0d25..bfe67a2 100644 --- a/lesson-7/index.html +++ b/_lessons/lesson-07.html @@ -1,29 +1,23 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    +--- +num: 7 +title: Web-сервера +description: "Файлы и процессы сервера. Внутренняя архитектура сервера. Примеры конфигурации. Понятие location. Методы обработки сетевых соединений." +--- -
    +
    +

    Web сервера

    -
    +
    +
    -
    - -
    +
    +
    + +
    +
    -
    +
    +

    Запуск web сервера

    • Команда на запуск
      @@ -36,9 +30,11 @@

      Запуск web сервера

    • Запуск дочерних процессов/потоков (*)
    • Готов к обработке запроса
    -
    +
    +
    -
    +
    +

    Файлы web сервера

    • Конфиг /etc/nginx/nginx.conf
      @@ -48,9 +44,11 @@

      Файлы web сервера

    • Error-лог /var/log/nginx/error.log
    • Access-лог /var/log/nginx/access.log
    -
    +
    +
    -
    +
    +

    Процессы web сервера

    • Master (root, 1 процесс) @@ -67,13 +65,17 @@

      Процессы web сервера

    -
    +
    +
    -
    - -
    +
    +
    + +
    +
    -
    +
    +

    Модульная архитектура

    • web сервер – не монолитный
      • @@ -82,44 +84,52 @@

      Модульная архитектура

    • Дополнительные директивы, контексты
    • Примеры: mod_mime, mod_mime_magic, mod_autoindex, mod_rewrite, mod_cgi, mod_perl, mod_gzip
    -
    +
    +
    -
    +
    +

    Конфигурация web сервера

    -
    +
    +
    -
    +
    +

    Терминология

    virtual host, вирт. хост - секция конфига web сервера, отвечающая за обслуживание определенного домена

    location - секция конфига, отвечающая за обслуживание определенной группы URL

    -
    +
    +
    -
    +
    +
    -
    +
    +
    -
    +
    +

    Секции и директивы

    • http ― конфигурация для HTTP сервера
      • @@ -130,9 +140,11 @@

      Секции и директивы

    • error_log ― лог ошибок сервера
    • access_log ― лог запросов
    -
    +
    +
    -
    +
    +

    Приоритеты location в nginx

    • location = /img/1.jpg
      • @@ -141,9 +153,11 @@

      Приоритеты location в nginx

    • location /img/
    При одинаковом приоритете используется тот location, что находится выше в конфиге. -
    +
    +
    -
    +
    +

    Отдача статических документов

    /2015/10/ae2b5.png → /www/images/2015/10/ae2b5.png
    /sitemap/index.xml → /home/www/generated/index.xml
    -
    +
    +
    -
    +
    +

    Атрибуты файлов и процессов

    @@ -176,26 +192,30 @@

    Атрибуты файлов и процессов

    -
    +
    +
    -
    +
    +

    Как узнать атрибуты ?

    -
    +
    +
    -
    +
    +

    Проверка доступа

    Для того, чтобы открыть файл, необходимо иметь права на чтение r самого файла и на исполнение x директорий, в которых он находится. Наличие прав проверяется следующим образом: @@ -205,13 +225,17 @@

    Проверка доступа

  • Иначе -rw-r--r--

    • -
    +
    +
    -
    +
    +

    Модели обработки сетевых соединений

    -
    +
    +
    -
    +
    +

    Простейший TCP сервер

    -
    +
    +
    -
    +
    +

    Блокирующий ввод-вывод

    - -
    + +
    +
    -
    +
    +

    Решение проблемы

    • множество потоков - multithreading
    • множество процессов - prefork, pool of workers
    • комбинированный подход
    -
    +
    +
    -
    +
    +

    Плюсы и минусы prefork

    простота разработки @@ -250,9 +280,11 @@

    Плюсы и минусы prefork

    большое потребление памяти: 1 клиент = 1 процесс проблема с долгоживущими соединениями

    -
    +
    +
    -
    +
    +

    Плюсы и минусы multithreading

    По сравнению с prefork,
    @@ -260,14 +292,18 @@

    Плюсы и минусы multithreading

    требует аккуратной работы с памятью как следствие, накладывает ограничение на выбор библиотек

    -
    +
    +
    -
    +
    +

    Неблокирующий ввод-вывод

    - -
    + +
    +
    -
    +
    +

    Мультиплексирование

    -
    +
    +
    -
    +
    +

    Event-driven разработка

    • множество открытых файлов
    • select, kqueue, epoll, aio...
    • последовательное исполнение → события
    -
    +
    +
    -
    +
    +

    Плюсы и минусы

    быстро, программа не блокируется @@ -303,9 +343,11 @@

    Плюсы и минусы

    тяжело программировать использование блокирующих вызовов все портит

    -
    +
    +
    -
    +
    +

    Кто есть кто

    • Apache – prefork, worker, threads, С
      • @@ -314,12 +356,5 @@

      Кто есть кто

    • Nginx, Lighttpd – асинхронные, С
    • Node.JS, Tornado – асинхронные, языки высокого уровня
    -
    - -
    - - - - - - +
    +
    diff --git a/lesson-8/index.html b/_lessons/lesson-08.html similarity index 73% rename from lesson-8/index.html rename to _lessons/lesson-08.html index e31089d..b3e0b34 100644 --- a/lesson-8/index.html +++ b/_lessons/lesson-08.html @@ -1,30 +1,24 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    - -
    +--- +num: 8 +title: Архитектура frontend - backend +description: "Задачи frontend сервера . Reverse proxy. Проксирование запросов. Application сервера. Протоколы CGI, FastCGI, WSGI." +--- + +
    +

    Frontend и Backend

    -
    +
    +
    -
    +
    +

    Общая архитектура

    - -
    + +
    +
    -
    +
    +

    Задачи Frontend (web) сервера

    • отдача статических документов
      • @@ -34,9 +28,11 @@

      Задачи Frontend (web) сервера

    • сборка SSI
    • авторизация, SSL, нарезка картинок, gzip
    -
    +
    +
    -
    +
    +

    Reverse proxy

    • frontend (медленно) читает запрос от клиента
      • @@ -46,13 +42,17 @@

      Reverse proxy

    • frontend (медленно) возвращает ответ клиенту
    Результат: backend занят минимально возможное время. -
    +
    +
    -
    +
    +

    Настройка проксирования в nginx

    -
    - -
    +
    +
    + +
    +

    Настройка проксирования в nginx

    -
    +
    +
    -
    +
    +

    Настройка upstream в nginx

    -
    +
    +
    -
    +
    +

    Application сервер

    -
    +
    +
    -
    +
    +

    Backend (application) сервер

    Роль application сервера заключается в исполнении бизнес-логики приложения и генерации динамических документов.

    На каждый HTTP запрос application сервер запускает некоторый обработчик в приложении. Это может быть функция, класс или программа, в зависимости от технологии.

    -
    +
    +
    -
    +
    +

    Протоколы запуска приложения

    • Servlets и др. специализированные API
      • @@ -102,13 +110,17 @@

      Протоколы запуска приложения

    • SCGI
    • PSGI, WSGI, Rack
    -
    +
    +
    -
    +
    +

    CGI

    -
    +
    +
    -
    +
    +

    CGI - Common Gateway Interface

    • Метод, QueryString, заголовки запроса - через переменные окружения
      • @@ -117,13 +129,17 @@

      CGI - Common Gateway Interface

    • HTTP код ответа передается через псевдозаголовок Status
    • Поток ошибок STDERR направляется в лог ошибок сервера
    -
    +
    +
    -
    - -
    +
    +
    + +
    +
    -
    +
    +

    Переменные окружения CGI

    • REQUEST_METHOD - метод запроса
      • @@ -134,37 +150,49 @@

      Переменные окружения CGI

    • HTTP_COOKIE - Заголовок Cookie
    • HTTP_ANY_HEADER_NAME - любой другой HTTP заголовок
    -
    +
    +
    -
    +
    +

    FastCGI и SCGI

    -
    +
    +
    -
    +
    +

    FastCGI и SCGI

    Основная проблема CGI - низкая производительность. Протоколы FastCGI и SCGI призваны решить эту проблему путем демонизации приложения. Иногда это возможно сделать даже без изменения кода CGI приложения.

    -
    +
    +
    -
    - -
    +
    +
    + +
    +
    -
    +
    +

    WSGI

    -
    +
    +
    -
    +
    +

    WSGI - актуальный протокол

    WSGI, PSGI, Rack - протоколы вызова функции обработчика из application сервера. - Сам application server при этом может выполняться в отдельном процессе или совпадать с web сервером. - Как правило, при использовании этих протоколов в качестве application сервера выступает отдельный легковесный процесс. -

    -
    + Сам application server при этом может выполняться в отдельном процессе или совпадать с web сервером. + Как правило, при использовании этих протоколов в качестве application сервера выступает отдельный легковесный процесс. +

    +
    +
    -
    +
    +

    WSGI - обработчик

    -
    +
    +
    -
    +
    +

    Web Server Gateway Interface

    • Обработчик - функция или класс (callable)
      • @@ -189,9 +219,11 @@

      Web Server Gateway Interface

    • Тело ответа возвращается в виде списка (iterable) из обработчика
    • Поток ошибок должен быть направлен в file-handle wsgi.stderr
    -
    +
    +
    -
    +
    +

    Переменные environ

    • CGI-like переменные: REQUEST_URI, ...
      • @@ -202,14 +234,18 @@

      Переменные environ

    • wsgi.multithreaded - ...
    • wsgi.multiprocess - ...
    -
    +
    +
    -
    +
    +

    Развертывание WSGI

    - -
    + +
    +
    -
    +
    +

    Что ложится на приложение ?

    • Анализ PATH_INFO и выбор конкретного обработчика
      • @@ -223,11 +259,5 @@

      Что ложится на приложение ?

    • Вывод правильных заголовков ответа
    -
    - -
    - - - - - +
    +
    diff --git a/lesson-9/index.html b/_lessons/lesson-09.html similarity index 68% rename from lesson-9/index.html rename to _lessons/lesson-09.html index 65972b2..bd084b6 100644 --- a/lesson-9/index.html +++ b/_lessons/lesson-09.html @@ -1,25 +1,17 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    - -
    +--- +num: 9 +title: MVC фреймворки (1) +description: "Компоненты MVC. Django как пример MVC фреймворка. Структура Django проекта. Модульность в Djnago: приложения. Конфигурация проектов. Маршрутизация URL. Обратная маршрутизация URL." +--- + +
    +

    Web приложения

    -
    +
    +
    -
    +
    +

    Основные типы запросов

    • Запросы статических документов
      • @@ -29,9 +21,11 @@

      Основные типы запросов

    • Запросы к API сайта
    • Персистентные соединения
    -
    +
    +
    -
    +
    +

    Основные задачи

    • Маршрутизация URL
      • @@ -41,17 +35,23 @@

      Основные задачи

    • Работа с базами данных
    • Генерация HTML страницы или JSON ответа
    -
    +
    +
    -
    +
    +

    MVC

    -
    +
    +
    -
    - -
    +
    +
    + +
    +
    -
    +
    +

    Роли компонентов MVC

    • Router - выбор конкретного controller по URL
      • @@ -59,13 +59,17 @@

      Роли компонентов MVC

    • Controller - работа с HTTP, связь controller и view
    • View - генерация HTML или другого представления
    -
    +
    +
    -
    - -
    +
    +
    + +
    +
    -
    +
    +

    Плюсы фреймворков

      Готовая архитектура @@ -75,13 +79,17 @@

      Плюсы фреймворков

      Проще найти программистов Проще обучать программистов
    -
    +
    +
    -
    +
    +

    Django

    -
    +
    +
    -
    +
    +

    Соглашение о именовании

    @@ -90,9 +98,11 @@

    Соглашение о именовании

    MVCDjango
    Controllerviews
    Viewtemplates
    -
    +
    +
    -
    +
    +

    Структура проекта

    django-admin startproject project - создание проекта. -
    +
    +
    -
    +
    +

    Основные файлы проекта

    • manage.py - скрипт управления проектом
      • @@ -118,54 +130,64 @@

      Основные файлы проекта

    • project/wsgi.py - WSGI приложение, точка входа
    • crm - Django - приложение
    -
    +
    +
    -
    +
    +

    Структура не-open-source проекта

    -
    +
    +
    -
    +
    +

    Django приложения

    -
    +
    +
    -
    +
    +

    Django приложения

    Приложения - способ распространения кода в Django инфраструктуре. - В случае, если вы не планируете публиковать ваш код, приложения - это просто способ логической организации кода.

    + В случае, если вы не планируете публиковать ваш код, приложения - это просто способ логической организации кода.

    ./manage.py startapp crm - создание нового приложения с именем crm. Нужно вызывать из директории проекта.

    -
    +
    +
    -
    +
    +

    Структура приложения

    -
    - -
    + ├── templates + ├── static + ├── templatetags + ├── management + │ └── commands + ├── migrations + ├── models.py + ├── tests.py + ├── urls.py + └── views.py + +
    +
    + +
    +

    Основные файлы приложения

    • models.py - файл с моделями, бизнес-логика
      • @@ -176,13 +198,17 @@

      Основные файлы приложения

    • static - CSS, JavaScript, картинки
    • migrations - миграции для обновления базы данных
    -
    +
    +
    -
    +
    +

    Конфигурация Django

    -
    +
    +
    -
    +
    +

    Конфиг - просто python модуль

    -
    +
    +
    -
    +
    +

    Пути в конфиге

    - Проблемы: -
      -
    • Проект может быть развернут в любой директории
      • -
    • Несколько копий проекта на одном сервере
      • -
    - Решения: -
      -
    • Абсолютные пути в каждом конфиге
      • -
    • Переменные окружения, $PROJECT_PATH
      • -
    • Относительные пути
      • -
    -
    - -
    + Проблемы: +
      +
    • Проект может быть развернут в любой директории
      • +
    • Несколько копий проекта на одном сервере
      • +
    + Решения: +
      +
    • Абсолютные пути в каждом конфиге
      • +
    • Переменные окружения, $PROJECT_PATH
      • +
    • Относительные пути
      • +
    +
    +
    + +
    +

    Относительные пути

    -
    +
    +
    -
    +
    +

    Паттерн local_settings.py

    -
    +
    +
    -
    +
    +

    Маршрутизация URL

    -
    +
    +
    -
    +
    +

    Порядок поиска контроллера

    • Django начинает поиск с файла ROOT_URLCONF из настроек
    • Загрузив файл, Django использует переменную urlpatterns
    • Django проходит по всем паттернам до первого совпадения
      • -
    • Если совпадения не найдено - будет возвращен код 404 Not Found
      • -
    -
    +
  • Если совпадения не найдено - будет возвращен код 404 Not Found
    • + +
    +
    -
    +
    +

    Маршрутизация в проекте

    -
    +
    +
    -
    +
    +

    Маршрутизация в приложении

    -
    +
    +
    -
    +
    +

    Используемые функции

    • url - для передачи именованных параметров
    • patterns - для добавления префикса к именам
    • include - включение одного urls.py внутрь другого
    -
    +
    +
    -
    +
    +

    Особенности маршрутизации в Django

    • Слеш (/) в начале роутов не указывается
      • @@ -302,9 +346,11 @@

      Особенности маршрутизации в Django

    • Можно и нужно создавать именованные роуты
    • Одно действие – один роут – один контроллер
    -
    +
    +
    -
    +
    +

    Reverse routing

    В python коде: В шаблоне: - -
    - -
    - - - - - - + {% endraw %} +
    +
    diff --git a/lesson-10/index.html b/_lessons/lesson-10.html similarity index 79% rename from lesson-10/index.html rename to _lessons/lesson-10.html index 8522d92..4ed3a37 100644 --- a/lesson-10/index.html +++ b/_lessons/lesson-10.html @@ -1,25 +1,17 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    - -
    +--- +num: 10 +title: MVC фреймворки (2) +description: "Контроллеры в Django. Объекты HttpRequest и HttpResponse. Получение GET и POST параметров. Работа с HTTP заголовками в Django. Декораторы. Шаблонизация в Django. Наследование шаблонов. Context processors." +--- + +
    +

    Django Views

    -
    +
    +
    -
    +
    +

    Django Views

    Контроллеры в Django - это обычные функции, которые: @@ -28,9 +20,11 @@

    Django Views

  • возвращают объект django.http.HttpResponse

    • -
    +
    +
    -
    +
    +

    Django Views

    -
    +
    +
    -
    +
    +

    Захват параметров из URL

    -
    +
    +
    -
    +
    +

    Захват параметров из URL (2)

    -
    +
    +
    -
    +
    +

    HttpRequest и HttpResponse

    -
    +
    +
    -
    +
    +

    HttpRequest

    • request.method - метод запроса
      • @@ -89,9 +91,11 @@

      HttpRequest

    • request.session - словарь-сессия (*)
    • request.user - текущий пользователь (*)
    -
    +
    +
    -
    +
    +

    HttpResponse

    -
    +
    +
    -
    +
    +

    Специальные типы ответов

    -
    +
    +
    -
    +
    +

    Получение GET и POST параметров

    -
    +
    +
    -
    +
    +

    GET и POST - объекты QueryDict

    /path/?id=3&id=4&id=5

    Получение множественных значений @@ -149,9 +159,11 @@

    GET и POST - объекты QueryDict

    qs = request.GET.urlencode() # qs is 'id=3&id=4&id=5' -
    +
    +
    -
    +
    +

    Получение и установка HTTP заголовков

    -
    +
    +
    -
    +
    +

    Получение и установка Cookie

    -
    +
    +
    -
    +
    +

    Декораторы

    -
    +
    +
    -
    +
    +

    Декораторы в Python

    Декоратор – функция, преобразующая одну функцию в другую.

    -
    +
    +
    -
    +
    +

    Декораторы в Django

    -
    +
    +
    -
    +
    +

    Правильный подход

    Необходимо отделить данные (контекст) от представления (шаблона). Для этого используются шаблонизаторы.

    -
      - Разделение работы web-мастера и программиста - Повторное использование HTML кода - Более чистый python код -
    -

    -
    +
      + Разделение работы web-мастера и программиста + Повторное использование HTML кода + Более чистый python код +
    +

    +
    +
    -
    +
    +

    Синтаксис шаблонов

    - -
    + {% endraw %} +
    +
    -
    +
    +

    Вызов шаблонизатора

    -
    - -
    +
    +
    + +
    +

    Возможности шаблонизатора

    -
      +
        {% raw %}
      • {% for item in list %}{% endfor %} - итерация по списку
      • {% if var %}{% endif %} - условное отображение
      • {% include "tpl.html" %} - включение подшаблона
      • {{ var }} - вывод переменной
      • {{ var|truncatechars:9 }} - применение фильтров
      • {# comment #}, {% comment %}{% endcomment %} - комментарии
        • -
      -
    + {% endraw %} +
    +
    -
    +
    +

    Доступ к свойствам и методам

    Через точку можно получить свойство, метод, ключ либо индекс объекта: - + {% endraw %} Передавать параметры методам запрещено: - -
    + {% endraw %} +
    +
    -
    +
    +

    Особенности шаблонизатора

    • Шаблоны автоматически экранируют HTML сущности
    • Шаблонизатор можно расширять своими фильтрами и тэгами
    -
    +
    +
    -
    +
    +

    Наследование шаблонов

    -
    +
    +
    -
    - -
    +
    +
    + +
    +
    -
    +
    +

    Базовый шаблон base.html

    -
    +
    +
    -
    +
    +

    Шаблон главной страницы

    - -
    + {% endraw %} +
    +
    -
    +
    +

    Context processors

    -
    +
    +
    -
    +
    +

    Context processors

    Context processors - это функции, которые вызываются перед отрисовкой шаблона и могут добавить данных в контекст.

    Настройка TEMPLATE_CONTEXT_PROCESSORS: @@ -373,18 +423,13 @@

    Context processors

  • django.core.context_processors.static (STATIC_URL)
  • django.contrib.auth.context_processors.auth (user, perms)
    • -
    +
    +
    -
    +
    +

    Когда не вызываются context processors ?

    render(request, template_name, context) - вызывает.

    render_to_response(template_name, context) - не вызывает.

    -
    - -
    - - - - - - +
    +
    diff --git a/lesson-11/index.html b/_lessons/lesson-11.html similarity index 79% rename from lesson-11/index.html rename to _lessons/lesson-11.html index c176666..f96c129 100644 --- a/lesson-11/index.html +++ b/_lessons/lesson-11.html @@ -1,25 +1,17 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    - -
    +--- +num: 11 +title: Реляционные базы данных +description: "Работа с СУБД. Реляционная модель данных. Проектирование баз данных. Работа с СУБД в Python. Работа с СУБД в Django. Понятие ORM, модели Django. Описание таблиц и связей в модели Django. Типы полей в моделях." +--- + +
    +

    Реляционные базы данных

    -
    +
    +
    -
    +
    +

    Решаемые проблемы

    • Структура хранения
      • @@ -29,21 +21,27 @@

      Решаемые проблемы

    • Атомарные операции - транзакции
    • Язык управления базой и данными - SQL
    -
    +
    +
    -
    +
    +

    Реляционная модель данных

    Данные хранятся в виде таблиц. У каждой таблицы фиксированное число столбцов. Все данные в столбце одного типа.

    - -
    + +
    +
    -
    +
    +

    Проектирование базы данных

    Основная задача проектирования - сокращение избыточности и дублирования данных.

    Существуют формальные правила проверки схемы базы данных на «правильность» - нормальные формы базы данных.

    -
    +
    +
    -
    +
    +

    Проектирование на практике

    • Логическое разделение сущностей
      • @@ -52,13 +50,17 @@

      Проектирование на практике

    • Связи N:M реализуются через промежуточную таблицу
    • Атрибут с фиксированным числом значений – внешняя таблица либо поле типа enum
    -
    +
    +
    -
    +
    +

    Базы данных в Python

    -
    +
    +
    -
    +
    +

    Подключение к базе

    Полное интерфейса для работы с СУБД в PEP-0249

    -
    +
    +
    -
    +
    +

    Выполнение запросов

    -
    +
    +
    -
    +
    +

    Вставка многих записей

    -
    +
    +
    -
    +
    +

    Placeholders

    -
    +
    +
    -
    +
    +

    Базы данных в Django

    -
    +
    +
    -
    +
    +

    Прямой доступ к базе

    -
    +
    +
    -
    +
    +

    Полезные утилиты

    • ./manage.py validate - проверить структуру моделей
      • @@ -148,9 +162,11 @@

      Полезные утилиты

    • ./manage.py shell - запустить python shell
    • ./manage.py dbshell - запустить клиент базы данных
    -
    +
    +
    -
    +
    +

    Django Models

    ORM - Object relational mapping - библиотек предоставляющая объектно-ориентированный интерфейс к реляционной базе данных. Django Models - библиотека ORM в Djnago. @@ -161,9 +177,11 @@

    Django Models

    объект моделистрока таблицы QuerySetзапрос -
    +
    +
    -
    +
    +

    ORM vs SQL

    -
    +
    +
    -
    +
    +

    Модели Django

    -
    +
    +
    -
    +
    +

    Типы полей

    @@ -206,9 +228,11 @@

    Типы полей

    DjangoMySQL
    DateFieldDATE
    DateTimeFieldDATETIME
    -
    +
    +
    -
    +
    +

    Свойства полей

    • blank - поле может быть пустым
      • @@ -220,13 +244,17 @@

      Свойства полей

    • default - значение по-умолчанию
    • choices - варианты значений
    -
    +
    +
    -
    +
    +

    Связи между моделями

    -
    +
    +
    -
    +
    +

    Связи между моделями

    -
    +
    +
    -
    +
    +

    Реализация в СУБД

    - -
    + +
    +
    -
    +
    +

    Ограничения внешних ключей

    Применимо к полям типа ForeignKey, OneToOneField
      @@ -256,9 +288,11 @@

      Ограничения внешних ключей

    • SET NULL → models.SET_NULL
    • NO ACTION → models.DO_NOTHING
    -
    +
    +
    -
    +
    +

    Использование отношений в коде

    -
    - -
    - - - - - - +
    +
    diff --git a/lesson-12/index.html b/_lessons/lesson-12.html similarity index 75% rename from lesson-12/index.html rename to _lessons/lesson-12.html index d4d477d..28ca7ba 100644 --- a/lesson-12/index.html +++ b/_lessons/lesson-12.html @@ -1,25 +1,17 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    - -
    +--- +num: 12 +title: API моделей Django +description: "Создание и изменение объектов. Загрузка данных из базы. QuerySet. ModelManagers. Расширение ModelManagers. Миграции баз данных." +--- + +
    +

    Django Models API

    -
    +
    +
    -
    +
    +

    Создание и изменение объектов

    -
    +
    +
    -
    +
    +

    Создание объектов со связями

    -
    +
    +
    -
    +
    +

    Загрузка объекта из базы

    -
    +
    +
    -
    +
    +

    Выборка нескольких объектов

    -
    +
    +
    -
    +
    +

    QuerySets

    -
    +
    +
    -
    +
    +

    QuerySet

    QuerySet - объекты, представляющие собой запрос к базе данных. Именно запрос, а не его результаты. QuerySet являются ленивыми (lazy) объектами. Это значит, что запрос осуществляется не в момент создания QuerySet, а в момент итерации по нему, либо вызова метода, возвращающего результат.

    -
    +
    +
    -
    +
    +

    Chaining

    -
    +
    +
    -
    +
    +

    Методы QuerySet (chaining)

    • filter,exclude - фильтрация, в SQL это WHERE
      • @@ -121,9 +127,11 @@

      Методы QuerySet (chaining)

    • distinct - выборка уникальных значений
    • select_related,prefetch_related - выборка из нескольких таблиц
    -
    +
    +
    -
    +
    +

    Методы QuerySet (результат)

    • create - создание нового объекта
      • @@ -133,26 +141,32 @@

      Методы QuerySet (результат)

    • count - выборка количества COUNT(*)
    • get_or_create - выборка объекта или его создание
    -
    +
    +
    -
    +
    +

    Синтаксис условий в QuerySet

    В методах filter и exclude: -

      -
    • field = value - точное совпадение
      • -
    • field__contains = value - суффикс оператора LIKE
      • -
    • field__isnull, field__gt, field__lte
      • -
    • relation__field = value - условие по связанной таблице
      • +
        +
      • field = value - точное совпадение
        • +
      • field__contains = value - суффикс оператора LIKE
        • +
      • field__isnull, field__gt, field__lte
        • +
      • relation__field = value - условие по связанной таблице
      • category__title__contains = "Perl"
      Названия полей и таблиц не могут содержать __!

      -
    +
    +
    -
    +
    +

    ModelManager

    -
    +
    +
    -
    +
    +

    ModelManager

    В модели содержатся методы для работы с одним объектом (одной строкой). @@ -160,9 +174,11 @@

    ModelManager

    ModelManager «по-умолчанию» содержит все те же методы что QuerySet и используется для создания QuerySet объектов связанных с данной моделью.

    -
    +
    +
    -
    +
    +

    ModelManager «по-умолчанию»

    -
    +
    +
    -
    +
    +

    Свой ModelManager

    -
    +
    +
    -
    +
    +

    RelatedManager

    -

    RelatedManager связан с конкретным объектом Post и во все выборки будет добавлять условие post=p1 -

    +

    RelatedManager связан с конкретным объектом Post и во все выборки будет добавлять условие post=p1

    +
    +
    -
    +
    +

    Методы RelatedManager

    • create(**kwargs) - создание нового тэга, связанного с постом
      • @@ -216,19 +238,25 @@

      Методы RelatedManager

    • remove(t2) - отвязка существующего тэга t2 от текущего поста
    • clear() - очистка списка тэгов у текущего поста
    -
    +
    +
    -
    +
    +

    Миграции

    -
    +
    +
    -
    +
    +

    Миграции

    Миграция - это процедура изменения схемы базы данных для приведения ее в соответствие с моделями.

    Начиная с версии 1.7 Django поддерживает миграции на уровне фреймворка.

    -
    +
    +
    -
    +
    +

    Django миграции

    • ./manage.py makemigrations - анализ изменений в моделях и создание миграций.
      • @@ -237,9 +265,11 @@

      Django миграции

      прямые и обратные миграции на практике часто неудобные или недостаточные
    -
    +
    +
    -
    +
    +

    Свои миграции

    project/migration/2015-08-08-more-post-fields.py -
    +
    +
    -
    +
    +

    Best practices

    -
    +
    +
    -
    +
    +

    Fat controller

    Типичная проблема начинающих разработчиков - размещение логики в контроллерах. - Это плохое решение, у которого есть имя - антипаттерн Fat Controller.
    - Размещение логики в контроллере лишает вас возможности использовать ее повторно. - Всю бизнес-логику приложения следует размещать в моделях. + Это плохое решение, у которого есть имя - антипаттерн Fat Controller.
    + Размещение логики в контроллере лишает вас возможности использовать ее повторно. + Всю бизнес-логику приложения следует размещать в моделях.

    -
    - -
    - - - - - - +
    +
    diff --git a/lesson-13/index.html b/_lessons/lesson-13.html similarity index 75% rename from lesson-13/index.html rename to _lessons/lesson-13.html index 72b8c1a..78926e0 100644 --- a/lesson-13/index.html +++ b/_lessons/lesson-13.html @@ -1,25 +1,17 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    +--- +num: 13 +title: Отображение данных +description: "Отображение страницы объекта. 404-страницы. Отображение связанных сущностей. Отображение списка объектов. Постраничное отображение. Progressive loading." +--- -
    +
    +

    Типичные сценарии web-приложений

    -
    +
    +
    -
    +
    +

    Типичные сценарии

    • Отображение объекта
      • @@ -29,13 +21,17 @@

      Типичные сценарии

    • Запуск фоновых процессов
    • Интеграция с внешними системами
    -
    +
    +
    -
    +
    +

    Отображение объекта

    -
    +
    +
    -
    +
    +

    Маршрут в urls.py

    -
    +
    +
    -
    +
    +

    Использование shortcut'ов

    -
    +
    +
    -
    +
    +

    Связанные сущности

    -
    +
    +
    -
    +
    +

    Связанные сущности

    - -
    + {% endraw %} +
    +
    -
    +
    +

    Методы в моделях

    -
    +
    +
    -
    +
    +

    Отображение списка объектов

    -
    +
    +
    -
    +
    +

    Постраничное отображение

    -
    +
    +
    -
    +
    +

    Шаблон paginator

    - -
    + {% endraw %} +
    +
    -
    +
    +

    django.core.paginator.Paginator

    Свойства

      @@ -182,9 +196,11 @@

      Методы

      • page(n) - получить n-тый объект Page
      -
    +
    +
    -
    +
    +

    django.core.paginator.Page

    Свойства

      @@ -197,9 +213,11 @@

      Методы

    • next_page_number()/previous_page_number()
    • start_index()/end_index() - номера первого и последнего объектов на странице
    -
    +
    +
    -
    +
    +

    Best practices

    • Проверять валидность параметров page и limit
      • @@ -207,9 +225,11 @@

      Best practices

    • Ограничивать максимальное значение limit <= 1000
    • Обрабатывать «пустую» последнюю страницу
    -
    +
    +
    -
    +
    +
    -
    +
    +
    -
    +
    +

    Progressive loading

    -
    +
    +
    -
    +
    +

    Progressive loading

    Постраничная загрузка хорошо работает в тех случаях, когда легко определить число объектов, подходящих под поисковый запрос. Другими словами - когда можно составить эффективный SQL запрос.

    Иногда это сделать сложно, например: «отображать все посты в порядке добавления, но не больше одного поста из одной категории подряд».

    -
    +
    +
    -
    +
    +

    Свой ModelManager

    - +

    -
    +
    +
    -
    +
    +

    view и шаблон

    - -
    - -
    - - - - - - + {% endraw %} +
    +
    diff --git a/_lessons/lesson-14.html b/_lessons/lesson-14.html new file mode 100644 index 0000000..d6ea86d --- /dev/null +++ b/_lessons/lesson-14.html @@ -0,0 +1,310 @@ +--- +num: 14 +title: Обработка форм +description: "GET и POST формы. Общий сценарий обработки. Перенаправления в HTTP. Описание форм в Django. Типы полей в формах Django. Валидация данных. Использование форм в контроллерах и шаблонах. CSRF" +--- + +
    +
    +

    Обработка форм

    +
    +
    + +
    +
    +

    GET / POST формы

    +

    + GET - метод для получения данных. GET запросы могут быть закешированны промежуточными серверами. + GET должен применяться только в поисковых формах. +

    +

    + POST - метод для изменения данных. POST запросы никогда не кешируются промежуточными серверами. + POST должен применяться в формах, изменяющих данные на сервере. +

    +
    + +
    +
    +

    Общий сценарий обработки

    + +
    +
    + +
    +
    +

    Best practice

    +
      +
    • Всегда проверять пользовательские данные
      • +
    • Для форм, изменяющих данные, использовать метод POST
      • +
    • Не заставлять вводить данные повторно
      • +
    • Сообщать об ошибках детально - по полям
      • +
    • Сообщать об успешном сохранении формы
      • +
    • При успешном сохранении делать перенаправление
      • +
    +
    +
    + +
    +
    +

    HTTP Redirect

    +
    +
    + +
    +
    +

    Перенаправления в HTTP

    + +
    +
    + +
    +
    +

    Перенаправления в HTTP

    +
      +
    • 302 Found - временное перенаправление
      • +
    • 301 Moved Permanently - постоянное перенаправление (кешируется в браузере)
      • +
    • Location: url - URL для повторного запроса. Может быть как абсолютным, так и относительным.
      • +
    +
    +
    + +
    +
    +

    Перенаправления в Django

    + +
    +
    + +
    +
    +

    Django forms

    +
    +
    + +
    +
    +

    Описание форм

    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +

    Типы полей

    +
      +
    • BooleanField - флажок
      • +
    • CharField - текстовое поле ввода
      • +
    • EmailField - текстовое поле, Email
      • + +
    • ChoiceField - выбор из нескольких вариантов
      • +
    • DateField - выбор даты
      • +
    • DateTimeField - выбор даты и времени
      • +
    • FileField - загрузка файлов
      • +
    +
    +
    + +
    +
    +

    Валидация данных

    +
      +
    • По типу поля, например EmailField
      • +
    • clean_xxx - доп. проверка поля xxx, может изменить значение
      • +
    • clean - доп. проверка всех полей формы
      • +
    +

    + Методы clean и clean_xxx должны использовать self.cleaned_data + для получения данных формы и поднять ValidationError в случае некорректных данных. +

    + +
    +
    + +
    +
    +

    Использование во view

    + +
    +
    + +
    +
    +

    Использование в шаблонах

    + {% raw %} + + + + {% endraw %} +
    +
    + +
    +
    + +
    +
    + +
    +
    +

    Model forms

    + +

    Метод save уже определен и сохраняет модель Meta.model

    +
    +
    + +
    +
    +

    Безопасность

    +
    +
    + +
    +
    +

    Проверка пользователя

    + +
    +
    + +
    +
    +

    Проверка пользователя (2)

    + +
    +
    + +
    +
    +

    Cross Site Resource Forgery

    + +
    +
    + +
    +
    +

    Методы борьбы с CSRF

    +
      +
    • Проверка метода @require_POST
      • +
    • Проверка заголовка Referer
      • +
    • Проверка CSRF-токенов
      • +
    + +
    +
    diff --git a/lesson-15/index.html b/_lessons/lesson-15.html similarity index 78% rename from lesson-15/index.html rename to _lessons/lesson-15.html index 0878bb3..9f7d01b 100644 --- a/lesson-15/index.html +++ b/_lessons/lesson-15.html @@ -1,41 +1,39 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    - -
    +--- +num: 15 +title: Сессии и Авторизация +description: "Basic HTTP Authorization. Механизм Cookie. Установка и получение cookie в HTTP. Авторизация с использованием cookie. Сценарий входа: login. Сценарий проверки сессии. Middleware в Django. Безопасное хранение паролей. Безопасность сессий." +--- + +
    +

    Авторизация в Web-приложениях

    -
    +
    +
    -
    +
    +

    Авторизация в Web-приложениях

    HTTP - stateless протокол, т.е. не предполагает поддержания соединения между клиентом и сервером. - Это значит, что сервер не может связать информацию о пользователе с конкретным соединением и вынужден - загружать ее при каждом запросе.

    -
    + Это значит, что сервер не может связать информацию о пользователе с конкретным соединением и вынужден + загружать ее при каждом запросе.

    +
    +
    -
    +
    +

    Basic HTTP Authorization

    -
    +
    +
    -
    +
    +

    Basic HTTP Authorization

    - -
    + +
    +
    -
    +
    +

    Заголовки и коды ответа

    • 401 Unauthorized - для доступа к ресурсу нужна авторизация
      • @@ -45,9 +43,11 @@

      Заголовки и коды ответа

    • 403 Forbidden - логин/пароль не подходят
    • REMOTE_USER - CGI переменная с именем авторизованного пользователя
    -
    +
    +
    -
    +
    +

    Достоинства и недостатки

      Простота и надежность @@ -57,13 +57,17 @@

      Достоинства и недостатки

      Невозможно изменить дизайн формы входа Невозможно «сбросить» авторизацию
    -
    +
    +
    -
    +
    +

    Cookies

    -
    +
    +
    -
    +
    +

    Cookies

    Cookies - небольшие фрагменты данных, которые браузер хранит на стороне клиента и передает на сервер при каждом запросе. Cookies привязаны к доменам, поэтому @@ -72,9 +76,11 @@

    Cookies

    состояния (state management) в протоколе HTTP и, в частности, для авторизации.

    -
    +
    +
    -
    +
    +

    Атрибуты Cookie

    • name=value - имя и значение cookie
      • @@ -84,9 +90,11 @@

      Атрибуты Cookie

    • Secure - cookie должна передаваться только по https
    • HttpOnly - cookie не доступна из JavaScript
    -
    +
    +
    -
    +
    +

    Установка и удаление Cookies

    Для удаления cookie, сервер устанавливает Expires в прошлом.

    -
    +
    +
    -
    +
    +

    Получение Cookies

    При каждом запросе браузер выбирает подходящие cookies и отправляет только их значения.

    -
    +
    +
    -
    +
    +

    Правила выбора Cookies

    Пусть URL=http://my.app.site.com/blog/post/12
    Браузер выберет все cookies, у которых: @@ -125,9 +137,11 @@

    Правила выбора Cookies

  • Не стоит флага Secure
    • -
    +
    +
    -
    +
    +

    Работа с cookie в Django

    -
    +
    +
    -
    +
    +

    Cookie-based авторизация

    -
    +
    +
    -
    +
    +

    Cookie-based авторизация

    - -
    + +
    +
    -
    +
    +

    Необходимые модели

    -
    +
    +
    -
    +
    +

    Вход на сайт

    - URL = /login/ -

      -
    • Клиент отправляет login / password на сервер
      • -
    • Сервер проверяет login / password и создает сессию
      • -
    • Сервер устанавливает cookie, содержащий ключ сессии
      • -
    • Сервер делает перенаправление на целевую страницу
      • -
    + URL = /login/ +
      +
    • Клиент отправляет login / password на сервер
      • +
    • Сервер проверяет login / password и создает сессию
      • +
    • Сервер устанавливает cookie, содержащий ключ сессии
      • +
    • Сервер делает перенаправление на целевую страницу
      • +

    -
    +
    +
    -
    +
    +
    -
    +
    +
    -
    +
    +
    -
    +
    +
    -
    +
    +

    Проверка сессии

    При запросе по любому URL: @@ -234,9 +262,11 @@

    Проверка сессии

    Как правило, для проверки сессии используются middleware.

    -
    +
    +
    -
    +
    +

    Middleware в Django

    Middleware - это Python класс, в котором есть один из указанных ниже методов. Список всех активных middleware указан в настройке MIDDLEWARE_CLASSES. @@ -247,9 +277,11 @@

    Middleware в Django

  • process_exception(request, exception)

    • -
    +
    +
    -
    +
    +
    -
    +
    +
    -
    +
    +

    Выход из приложения

    Для выхода из приложения достаточно удалить объект сессии:

    -
    +
    +
    -
    +
    +

    Встроенная авторизация Django

    -
    +
    +
    -
    +
    +

    django.contrib.sessions

    Предоставляет поддержку сессий, в том числе анонимных. - Позволяет хранить в сессии произвольные данные, а не только ID пользователя. - Позволяет хранить сессии в различных хранилищах, например Redis или Memcached. + Позволяет хранить в сессии произвольные данные, а не только ID пользователя. + Позволяет хранить сессии в различных хранилищах, например Redis или Memcached.

    -
    +
    +
    -
    +
    +

    django.contrib.auth

    Предоставляет готовую модель User, готовую систему разделения прав, view для регистрации / входа / выхода. Используется другими приложениями, например django.contrib.admin @@ -312,13 +352,17 @@

    django.contrib.auth

    else: pass # анонимный пользователь -
    +
    +
    -
    +
    +

    Безопасность

    -
    +
    +
    -
    +
    +

    Безопасность паролей

    Главная задача - максимально затруднить доступ злоумышленника к исходному паролю пользователя. @@ -329,9 +373,11 @@

    Безопасность паролей

  • Защита от перебора в форме логина, например captcha

    • -
    +
    +
    -
    +
    +

    Безопасность сессий

    Основное направление атаки - кража cookie, хранящей ключ сессии, т.е. кража авторизации. @@ -344,12 +390,5 @@

    Безопасность сессий

  • Запрос пароля при критических действиях: смене пароля и т.д.

    • -
    - -
    - - - - - - +
    +
    diff --git a/lesson-16/index.html b/_lessons/lesson-16.html similarity index 78% rename from lesson-16/index.html rename to _lessons/lesson-16.html index 5e24258..b44b60d 100644 --- a/lesson-16/index.html +++ b/_lessons/lesson-16.html @@ -1,34 +1,28 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    - -
    +--- +num: 16 +title: Технология AJAX +description: "AJAX на стороне клиента. AJAX запросы с использованием jQuery. Передача HTML и JSON в AJAX запросах. Особенности контроллеров для AJAX. Cross Origin Resource Sharing." +--- + +
    +

    AJAX

    -
    +
    +
    -
    +
    +

    Asynchronous JavaScript And XML

    AJAX - технология загрузки данных / отправки форм без обновления WEB страницы.

    - XML - совершенно не обязателен, возможны отправка и прием данных любого типа. - Чаще всего вместо XML используется HTML либо JSON для загрузки сырых данных. + XML - совершенно не обязателен, возможны отправка и прием данных любого типа. + Чаще всего вместо XML используется HTML либо JSON для загрузки сырых данных.

    -
    - -
    +
    +
    + +
    +

    AJAX на стороне клиента

    -
    +
    +
    -
    +
    +

    AJAX при помощи jQuery

    -
    +
    +
    -
    +
    +

    Особенности и ограничения AJAX

    • Same Origin Policy - AJAX запросы можно отправлять только на свой домен. В современных браузерах есть CORS.
      • @@ -69,9 +67,11 @@

      Особенности и ограничения AJAX

    • AJAX на стороне сервера не отличим от обычного запроса. jQuery добавляет заголовок X-Requested-With: XMLHttpRequest
    • Результаты запроса передаются в JavaScript функцию поэтому стандартные методы обработки ошибок - не работают.
    -
    +
    +
    -
    +
    +

    Загрузка HTML данных

    В blog/comments.html отображается только HTML код комментариев, без окружающей страницы.

    -
    +
    +
    -
    +
    +

    Обмен данными в JSON

    -
    +
    +
    -
    +
    +

    HttpResponseAjax

    -
    +
    +
    -
    +
    +

    Использование HttpResponseAjax

    -
    +
    +
    -
    +
    +

    Проверка авторизации в AJAX

    -
    +
    +
    -
    +
    +

    CORS

    -
    +
    +
    -
    +
    +

    Cross Origin Resource Sharing

    Браузер выполняет AJAX запросы даже к чужому домену, но в этом случае не вызывает функцию-callback в JavaScript, т.е. - не дает использовать данные, загруженные с чужого домена.

    + не дает использовать данные, загруженные с чужого домена.

    CORS позволяет серверу явно разрешить использование данных при кросс-доменных запросах.

    -
    +
    +
    -
    +
    +

    Cross Origin Resource Sharing

    - -
    + +
    +
    -
    +
    +

    Заголовки CORS

    • Origin - указывает URL запрашивающего приложения
      • @@ -181,9 +197,11 @@

      Заголовки CORS

      origin должен либо совпадать с загловком Origin в запросе, либо *.
    • Access-Control-Allow-Credentials - позволяет использовать данные, если были переданы cookies.
    -
    +
    +
    -
    +
    +

    Использование CORS

    Не следует разрешать CORS для всех запросов (*).
    @@ -193,9 +211,11 @@

    Использование CORS

  • Проверка домена по списку доверенных

    • -
    +
    +
    -
    +
    +

    CORS на клиенте

    -
    +
    +
    -
    +
    +

    CORS на сервере

    -
    - -
    - - - - - - +
    +
    diff --git a/lesson-17/index.html b/_lessons/lesson-17.html similarity index 78% rename from lesson-17/index.html rename to _lessons/lesson-17.html index 9985a52..dfcea16 100644 --- a/lesson-17/index.html +++ b/_lessons/lesson-17.html @@ -1,25 +1,17 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    +--- +num: 17 +title: Real-time сообщения +description: "Общая архитектура. Polling. Long-polling (comet). Server-push. WebSocket. Механизм обновления (Upgrade) соединений." +--- -
    +
    +

    Real Time сообщения

    -
    +
    +
    -
    +
    +

    Примеры использования

    • Чаты и мессенджеры
      • @@ -28,15 +20,19 @@

      Примеры использования

    • Push уведомления
    • Сетевой обмен в играх на HTML
    -
    - -
    +
    +
    + +
    +

    Архитектура

     

    - -
    + +
    +
    -
    +
    +

    Решения

    • Polling - периодический опрос сервера
      • @@ -44,18 +40,24 @@

      Решения

    • Server Push - бесконечный запрос
    • WebSocket - специализированный протокол
    -
    +
    +
    -
    +
    +

    Polling

    -
    +
    +
    -
    +
    +

    Polling - периодический опрос

    - -
    + +
    +
    -
    +
    +

    Polling на клиенте

    -
    +
    +
    -
    +
    +

    Polling на сервере

    -
    +
    +
    -
    +
    +

    Плюсы и минусы Polling

      Простота и надежность реализации @@ -99,18 +105,24 @@

      Плюсы и минусы Polling

      Избыточное число HTTP запросов RPS=CCU/N Ограничение по числу пользователей
    -
    +
    +
    -
    +
    +

    Comet

    -
    +
    +
    -
    +
    +

    Comet - долгоживущие запросы

    - -
    + +
    +
    -
    +
    +

    Comet на клиенте

    -
    +
    +
    -
    +
    +

    Comet на сервере

    В технологии comet сервер должен поддерживать одновременно открытыми большое количество соединений, @@ -137,9 +151,11 @@

    Comet на сервере

    классический application-сервер в роли comet-сервера. Для comet-сервера необходима отдельная технология, например nginx + mod_push.

    -
    +
    +
    -
    +
    +

    Nginx + mod_push

    -
    +
    +
    -
    +
    +

    Отправка сообщений

    -
    +
    +
    -
    +
    +

    Плюсы и минусы Comet

      Поддержка всеми браузерами @@ -187,18 +207,24 @@

      Плюсы и минусы Comet

      Избыточные HTTP запросы Half-duplex
    -
    +
    +
    -
    +
    +

    Server push

    -
    +
    +
    -
    +
    +

    Server push - бесконечный запрос

    - -
    + +
    +
    -
    +
    +

    Server push на клиенте

    -
    +
    +
    -
    +
    +

    WebSocket

    -
    +
    +
    -
    +
    +

    WebSocket

    - -
    + +
    +
    -
    +
    +

    WebSocket handshake

    -
    +
    +
    -
    +
    +

    WebSocket на стороне клиента

    -
    +
    +
    -
    +
    +

    WebSocket на стороне сервера

    -
    +
    +
    -
    +
    +

    Плюсы и минусы WebSocket

      Минимальный объем трафика @@ -289,12 +327,5 @@

      Плюсы и минусы WebSocket

      Требуется специальный WebSocket-сервер Плохо работает с прокси-серверами
    -
    - -
    - - - - - - +
    +
    diff --git a/css/highlight/agate.css b/assets/css/highlight/agate.css similarity index 100% rename from css/highlight/agate.css rename to assets/css/highlight/agate.css diff --git a/css/highlight/androidstudio.css b/assets/css/highlight/androidstudio.css similarity index 100% rename from css/highlight/androidstudio.css rename to assets/css/highlight/androidstudio.css diff --git a/css/highlight/arta.css b/assets/css/highlight/arta.css similarity index 100% rename from css/highlight/arta.css rename to assets/css/highlight/arta.css diff --git a/css/highlight/ascetic.css b/assets/css/highlight/ascetic.css similarity index 100% rename from css/highlight/ascetic.css rename to assets/css/highlight/ascetic.css diff --git a/css/highlight/atelier-cave.dark.css b/assets/css/highlight/atelier-cave.dark.css similarity index 100% rename from css/highlight/atelier-cave.dark.css rename to assets/css/highlight/atelier-cave.dark.css diff --git a/css/highlight/atelier-cave.light.css b/assets/css/highlight/atelier-cave.light.css similarity index 100% rename from css/highlight/atelier-cave.light.css rename to assets/css/highlight/atelier-cave.light.css diff --git a/css/highlight/atelier-dune.dark.css b/assets/css/highlight/atelier-dune.dark.css similarity index 100% rename from css/highlight/atelier-dune.dark.css rename to assets/css/highlight/atelier-dune.dark.css diff --git a/css/highlight/atelier-dune.light.css b/assets/css/highlight/atelier-dune.light.css similarity index 100% rename from css/highlight/atelier-dune.light.css rename to assets/css/highlight/atelier-dune.light.css diff --git a/css/highlight/atelier-estuary.dark.css b/assets/css/highlight/atelier-estuary.dark.css similarity index 100% rename from css/highlight/atelier-estuary.dark.css rename to assets/css/highlight/atelier-estuary.dark.css diff --git a/css/highlight/atelier-estuary.light.css b/assets/css/highlight/atelier-estuary.light.css similarity index 100% rename from css/highlight/atelier-estuary.light.css rename to assets/css/highlight/atelier-estuary.light.css diff --git a/css/highlight/atelier-forest.dark.css b/assets/css/highlight/atelier-forest.dark.css similarity index 100% rename from css/highlight/atelier-forest.dark.css rename to assets/css/highlight/atelier-forest.dark.css diff --git a/css/highlight/atelier-forest.light.css b/assets/css/highlight/atelier-forest.light.css similarity index 100% rename from css/highlight/atelier-forest.light.css rename to assets/css/highlight/atelier-forest.light.css diff --git a/css/highlight/atelier-heath.dark.css b/assets/css/highlight/atelier-heath.dark.css similarity index 100% rename from css/highlight/atelier-heath.dark.css rename to assets/css/highlight/atelier-heath.dark.css diff --git a/css/highlight/atelier-heath.light.css b/assets/css/highlight/atelier-heath.light.css similarity index 100% rename from css/highlight/atelier-heath.light.css rename to assets/css/highlight/atelier-heath.light.css diff --git a/css/highlight/atelier-lakeside.dark.css b/assets/css/highlight/atelier-lakeside.dark.css similarity index 100% rename from css/highlight/atelier-lakeside.dark.css rename to assets/css/highlight/atelier-lakeside.dark.css diff --git a/css/highlight/atelier-lakeside.light.css b/assets/css/highlight/atelier-lakeside.light.css similarity index 100% rename from css/highlight/atelier-lakeside.light.css rename to assets/css/highlight/atelier-lakeside.light.css diff --git a/css/highlight/atelier-plateau.dark.css b/assets/css/highlight/atelier-plateau.dark.css similarity index 100% rename from css/highlight/atelier-plateau.dark.css rename to assets/css/highlight/atelier-plateau.dark.css diff --git a/css/highlight/atelier-plateau.light.css b/assets/css/highlight/atelier-plateau.light.css similarity index 100% rename from css/highlight/atelier-plateau.light.css rename to assets/css/highlight/atelier-plateau.light.css diff --git a/css/highlight/atelier-savanna.dark.css b/assets/css/highlight/atelier-savanna.dark.css similarity index 100% rename from css/highlight/atelier-savanna.dark.css rename to assets/css/highlight/atelier-savanna.dark.css diff --git a/css/highlight/atelier-savanna.light.css b/assets/css/highlight/atelier-savanna.light.css similarity index 100% rename from css/highlight/atelier-savanna.light.css rename to assets/css/highlight/atelier-savanna.light.css diff --git a/css/highlight/atelier-seaside.dark.css b/assets/css/highlight/atelier-seaside.dark.css similarity index 100% rename from css/highlight/atelier-seaside.dark.css rename to assets/css/highlight/atelier-seaside.dark.css diff --git a/css/highlight/atelier-seaside.light.css b/assets/css/highlight/atelier-seaside.light.css similarity index 100% rename from css/highlight/atelier-seaside.light.css rename to assets/css/highlight/atelier-seaside.light.css diff --git a/css/highlight/atelier-sulphurpool.dark.css b/assets/css/highlight/atelier-sulphurpool.dark.css similarity index 100% rename from css/highlight/atelier-sulphurpool.dark.css rename to assets/css/highlight/atelier-sulphurpool.dark.css diff --git a/css/highlight/atelier-sulphurpool.light.css b/assets/css/highlight/atelier-sulphurpool.light.css similarity index 100% rename from css/highlight/atelier-sulphurpool.light.css rename to assets/css/highlight/atelier-sulphurpool.light.css diff --git a/css/highlight/brown_paper.css b/assets/css/highlight/brown_paper.css similarity index 100% rename from css/highlight/brown_paper.css rename to assets/css/highlight/brown_paper.css diff --git a/css/highlight/brown_papersq.png b/assets/css/highlight/brown_papersq.png similarity index 100% rename from css/highlight/brown_papersq.png rename to assets/css/highlight/brown_papersq.png diff --git a/css/highlight/codepen-embed.css b/assets/css/highlight/codepen-embed.css similarity index 100% rename from css/highlight/codepen-embed.css rename to assets/css/highlight/codepen-embed.css diff --git a/css/highlight/color-brewer.css b/assets/css/highlight/color-brewer.css similarity index 100% rename from css/highlight/color-brewer.css rename to assets/css/highlight/color-brewer.css diff --git a/css/highlight/dark.css b/assets/css/highlight/dark.css similarity index 100% rename from css/highlight/dark.css rename to assets/css/highlight/dark.css diff --git a/css/highlight/darkula.css b/assets/css/highlight/darkula.css similarity index 100% rename from css/highlight/darkula.css rename to assets/css/highlight/darkula.css diff --git a/css/highlight/default.css b/assets/css/highlight/default.css similarity index 100% rename from css/highlight/default.css rename to assets/css/highlight/default.css diff --git a/css/highlight/docco.css b/assets/css/highlight/docco.css similarity index 100% rename from css/highlight/docco.css rename to assets/css/highlight/docco.css diff --git a/css/highlight/far.css b/assets/css/highlight/far.css similarity index 100% rename from css/highlight/far.css rename to assets/css/highlight/far.css diff --git a/css/highlight/foundation.css b/assets/css/highlight/foundation.css similarity index 100% rename from css/highlight/foundation.css rename to assets/css/highlight/foundation.css diff --git a/css/highlight/github-gist.css b/assets/css/highlight/github-gist.css similarity index 100% rename from css/highlight/github-gist.css rename to assets/css/highlight/github-gist.css diff --git a/css/highlight/github.css b/assets/css/highlight/github.css similarity index 100% rename from css/highlight/github.css rename to assets/css/highlight/github.css diff --git a/css/highlight/googlecode.css b/assets/css/highlight/googlecode.css similarity index 100% rename from css/highlight/googlecode.css rename to assets/css/highlight/googlecode.css diff --git a/css/highlight/hybrid.css b/assets/css/highlight/hybrid.css similarity index 100% rename from css/highlight/hybrid.css rename to assets/css/highlight/hybrid.css diff --git a/css/highlight/idea.css b/assets/css/highlight/idea.css similarity index 100% rename from css/highlight/idea.css rename to assets/css/highlight/idea.css diff --git a/css/highlight/ir_black.css b/assets/css/highlight/ir_black.css similarity index 100% rename from css/highlight/ir_black.css rename to assets/css/highlight/ir_black.css diff --git a/css/highlight/kimbie.dark.css b/assets/css/highlight/kimbie.dark.css similarity index 100% rename from css/highlight/kimbie.dark.css rename to assets/css/highlight/kimbie.dark.css diff --git a/css/highlight/kimbie.light.css b/assets/css/highlight/kimbie.light.css similarity index 100% rename from css/highlight/kimbie.light.css rename to assets/css/highlight/kimbie.light.css diff --git a/css/highlight/magula.css b/assets/css/highlight/magula.css similarity index 100% rename from css/highlight/magula.css rename to assets/css/highlight/magula.css diff --git a/css/highlight/mono-blue.css b/assets/css/highlight/mono-blue.css similarity index 100% rename from css/highlight/mono-blue.css rename to assets/css/highlight/mono-blue.css diff --git a/css/highlight/monokai.css b/assets/css/highlight/monokai.css similarity index 100% rename from css/highlight/monokai.css rename to assets/css/highlight/monokai.css diff --git a/css/highlight/monokai_sublime.css b/assets/css/highlight/monokai_sublime.css similarity index 100% rename from css/highlight/monokai_sublime.css rename to assets/css/highlight/monokai_sublime.css diff --git a/css/highlight/obsidian.css b/assets/css/highlight/obsidian.css similarity index 100% rename from css/highlight/obsidian.css rename to assets/css/highlight/obsidian.css diff --git a/css/highlight/paraiso.dark.css b/assets/css/highlight/paraiso.dark.css similarity index 100% rename from css/highlight/paraiso.dark.css rename to assets/css/highlight/paraiso.dark.css diff --git a/css/highlight/paraiso.light.css b/assets/css/highlight/paraiso.light.css similarity index 100% rename from css/highlight/paraiso.light.css rename to assets/css/highlight/paraiso.light.css diff --git a/css/highlight/pojoaque.css b/assets/css/highlight/pojoaque.css similarity index 100% rename from css/highlight/pojoaque.css rename to assets/css/highlight/pojoaque.css diff --git a/css/highlight/pojoaque.jpg b/assets/css/highlight/pojoaque.jpg similarity index 100% rename from css/highlight/pojoaque.jpg rename to assets/css/highlight/pojoaque.jpg diff --git a/css/highlight/railscasts.css b/assets/css/highlight/railscasts.css similarity index 100% rename from css/highlight/railscasts.css rename to assets/css/highlight/railscasts.css diff --git a/css/highlight/rainbow.css b/assets/css/highlight/rainbow.css similarity index 100% rename from css/highlight/rainbow.css rename to assets/css/highlight/rainbow.css diff --git a/css/highlight/school_book.css b/assets/css/highlight/school_book.css similarity index 100% rename from css/highlight/school_book.css rename to assets/css/highlight/school_book.css diff --git a/css/highlight/school_book.png b/assets/css/highlight/school_book.png similarity index 100% rename from css/highlight/school_book.png rename to assets/css/highlight/school_book.png diff --git a/css/highlight/solarized_dark.css b/assets/css/highlight/solarized_dark.css similarity index 100% rename from css/highlight/solarized_dark.css rename to assets/css/highlight/solarized_dark.css diff --git a/css/highlight/solarized_light.css b/assets/css/highlight/solarized_light.css similarity index 100% rename from css/highlight/solarized_light.css rename to assets/css/highlight/solarized_light.css diff --git a/css/highlight/sunburst.css b/assets/css/highlight/sunburst.css similarity index 100% rename from css/highlight/sunburst.css rename to assets/css/highlight/sunburst.css diff --git a/css/highlight/tomorrow-night-blue.css b/assets/css/highlight/tomorrow-night-blue.css similarity index 100% rename from css/highlight/tomorrow-night-blue.css rename to assets/css/highlight/tomorrow-night-blue.css diff --git a/css/highlight/tomorrow-night-bright.css b/assets/css/highlight/tomorrow-night-bright.css similarity index 100% rename from css/highlight/tomorrow-night-bright.css rename to assets/css/highlight/tomorrow-night-bright.css diff --git a/css/highlight/tomorrow-night-eighties.css b/assets/css/highlight/tomorrow-night-eighties.css similarity index 100% rename from css/highlight/tomorrow-night-eighties.css rename to assets/css/highlight/tomorrow-night-eighties.css diff --git a/css/highlight/tomorrow-night.css b/assets/css/highlight/tomorrow-night.css similarity index 100% rename from css/highlight/tomorrow-night.css rename to assets/css/highlight/tomorrow-night.css diff --git a/css/highlight/tomorrow.css b/assets/css/highlight/tomorrow.css similarity index 100% rename from css/highlight/tomorrow.css rename to assets/css/highlight/tomorrow.css diff --git a/css/highlight/vs.css b/assets/css/highlight/vs.css similarity index 100% rename from css/highlight/vs.css rename to assets/css/highlight/vs.css diff --git a/css/highlight/xcode.css b/assets/css/highlight/xcode.css similarity index 100% rename from css/highlight/xcode.css rename to assets/css/highlight/xcode.css diff --git a/css/highlight/zenburn.css b/assets/css/highlight/zenburn.css similarity index 100% rename from css/highlight/zenburn.css rename to assets/css/highlight/zenburn.css diff --git a/css/index.css b/assets/css/lesson.css similarity index 70% rename from css/index.css rename to assets/css/lesson.css index d9b061a..0461b19 100644 --- a/css/index.css +++ b/assets/css/lesson.css @@ -21,5 +21,8 @@ img.center { display: block; margin: auto; } plus, minus { display: list-item; list-style-type: none; } -plus:before { display: inline; content: "➕"; font-weight: bold; margin-right: 0.5em; color: green } -minus:before { display: inline; content: "➖"; font-weight: bold; margin-right: 0.5em; color: red } +plus:before { display: inline; content: "➕"; margin-right: 0.5em; color: green } +minus:before { display: inline; content: "➖"; margin-right: 0.5em; color: red } + +.link-no-line { background: none; } +.link-no-color { color: rgb(85, 85, 85); } diff --git a/assets/css/page.scss b/assets/css/page.scss new file mode 100644 index 0000000..c9c130d --- /dev/null +++ b/assets/css/page.scss @@ -0,0 +1,430 @@ +--- +--- + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; +} + +html { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 18px; + font-weight: 300; + line-height: 1.6; + + @media (min-width: 38em) { + font-size: 20px; + } +} + +body { + color: #515151; + background-color: #fff; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +a { + color: #268bd2; + text-decoration: none; + + &:hover, + &:focus { + text-decoration: underline; + } +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: .5rem; + font-weight: 600; + line-height: 1.1; + color: #333; + letter-spacing: -.025rem; +} + +h1 { + font-size: 2rem; +} + +h2 { + font-size: 1.6rem; +} + +h3 { + font-size: 1.3rem; +} + +h4, h5, h6 { + font-size: 1rem; +} + +p { + margin: 0 0 1rem; +} + +ul, ol, dl { + margin-top: 0; + margin-bottom: 1rem; +} + +dt { + font-weight: bold; +} + +dd { + margin-bottom: .5rem; +} + +ul { + list-style: inside circle; + padding-left: 0; + + li { + margin-bottom: .25rem; + } + + ul, + ol { + margin-top: .25rem; + margin-bottom: .5rem; + } +} + +ol { + list-style: inside decimal; + padding-left: 0; + + li { + margin-bottom: .25rem; + } + + ul, + ol { + margin-top: .25rem; + margin-bottom: .5rem; + } +} + +p + h1, +p + h2, +p + h3, +ul + h1, +ul + h2, +ul + h3, +ol + h1, +ol + h2, +ol + h3 { + margin-top: 1.5rem; +} + +hr { + border: 0; + border-top: .5px solid #eee; + border-bottom: .5px solid #eee; + margin: 1.5rem auto; +} + +strong { + color: #333; + font-weight: 600; +} + +abbr { + font-size: 85%; + font-weight: bold; + color: #555; +} + +abbr[title] { + cursor: help; + border-bottom: 1px dotted #e5e5e5; +} + +blockquote { + padding: 0 0 0 1.5rem; + margin: 0 2rem 1rem 0; + color: #999; + border-left: .5rem solid #e5e5e5; + + p:last-child { + margin-bottom: 0; + } +} + +code, +pre { + font-family: Menlo, Monaco, "Courier New", monospace; +} + +code { + padding: .25em .5em; + font-size: 85%; + color: #bf616a; + background-color: #f9f9f9; + border-radius: 3px; +} + +pre { + display: block; + margin-top: 0; + margin-bottom: 1rem; + padding: 1rem; + font-size: .8rem; + line-height: 1.4; + white-space: pre; + white-space: pre-wrap; + word-break: break-all; + // word-wrap: break-word; + background-color: #f9f9f9; +} + +pre code { + padding: 0; + font-size: 100%; + color: inherit; + background-color: transparent; +} + +.highlight { + margin-bottom: 1rem; + border-radius: 4px; +} + +.highlight pre { + margin-bottom: 0; +} + +.gist .gist-file { + font-family: Menlo, Monaco, "Courier New", monospace !important; +} + +.gist .markdown-body { + padding: 15px; +} + +.gist pre { + padding: 0; + background-color: transparent; +} + +.gist .gist-file .gist-data { + font-size: .8rem !important; + line-height: 1.4; +} + +.gist code { + padding: 0; + color: inherit; + background-color: transparent; + border-radius: 0; +} + +img { + display: block; + max-width: 100%; + margin: 0 0 1rem; + border-radius: 5px; +} + +table { + margin-bottom: 1rem; + width: 100%; + border: 1px solid #e5e5e5; + border-collapse: collapse; +} + +td, +th { + padding: .25rem .5rem; + border: 1px solid #e5e5e5; +} + +tbody tr:nth-child(odd) td, +tbody tr:nth-child(odd) th { + background-color: #f9f9f9; +} + +.lead { + font-size: 1.25rem; +} + +.container { + max-width: 38rem; + padding: 2rem 1.5rem; + margin-left: auto; + margin-right: auto; + + @media (min-width: 38rem){ + padding: 5rem 1rem; + } +} + +.masthead { + + &-title { + font-weight: 300; + + a { + color: #333; + + &:hover, + &:focus { + text-decoration: none; + } + } + + span { + color: #ddd; + } + + } + + &-title--small { + margin-bottom: .75rem; + font-size: .75rem; + font-weight: 600; + + a { + color: #333; + + &:hover, + &:focus { + text-decoration: none; + } + } + } + + .masthead-nav { + margin-bottom: 2rem; + + a { + color: #aaa; + font-weight: 300; + -webkit-transition: all .2s ease; + -moz-transition: all .2s ease; + transition: all .2s ease; + + &:hover, + &:focus { + color: #333; + text-decoration: none; + } + + + a { + margin-left: .25rem; + } + } + } + +} + +.page { + &-title { + margin-bottom: 2rem; + } +} + +.post { + &-title { + margin-bottom: .25rem; + } + &-date { + margin-bottom: 2rem; + font-size: .75rem; + } +} + +.list { + &-post-title { + margin-bottom: .25rem; + + a { + color: #333; + + &:hover, + &:focus { + text-decoration: none; + } + } + } + &-post-date { + margin-bottom: 1rem; + font-size: .75rem; + } +} + +.projects-list { + a { + color: #333; + } +} + +.highlight .hll { background-color: #ffffcc } +.highlight .c { color: #999988; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .k { color: #000000; font-weight: bold } /* Keyword */ +.highlight .o { color: #000000; font-weight: bold } /* Operator */ +.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ +.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #999999 } /* Generic.Heading */ +.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */ +.highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ +.highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ +.highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #d01040 } /* Literal.String */ +.highlight .na { color: #008080 } /* Name.Attribute */ +.highlight .nb { color: #0086B3 } /* Name.Builtin */ +.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ +.highlight .no { color: #008080 } /* Name.Constant */ +.highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ +.highlight .ni { color: #800080 } /* Name.Entity */ +.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nl { color: #990000; font-weight: bold } /* Name.Label */ +.highlight .nn { color: #555555 } /* Name.Namespace */ +.highlight .nt { color: #000080 } /* Name.Tag */ +.highlight .nv { color: #008080 } /* Name.Variable */ +.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #d01040 } /* Literal.String.Backtick */ +.highlight .sc { color: #d01040 } /* Literal.String.Char */ +.highlight .sd { color: #d01040 } /* Literal.String.Doc */ +.highlight .s2 { color: #d01040 } /* Literal.String.Double */ +.highlight .se { color: #d01040 } /* Literal.String.Escape */ +.highlight .sh { color: #d01040 } /* Literal.String.Heredoc */ +.highlight .si { color: #d01040 } /* Literal.String.Interpol */ +.highlight .sx { color: #d01040 } /* Literal.String.Other */ +.highlight .sr { color: #009926 } /* Literal.String.Regex */ +.highlight .s1 { color: #d01040 } /* Literal.String.Single */ +.highlight .ss { color: #990073 } /* Literal.String.Symbol */ +.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #008080 } /* Name.Variable.Class */ +.highlight .vg { color: #008080 } /* Name.Variable.Global */ +.highlight .vi { color: #008080 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ diff --git a/js/highlight.pack.js b/assets/js/highlight.pack.js similarity index 100% rename from js/highlight.pack.js rename to assets/js/highlight.pack.js diff --git a/js/init.js b/assets/js/init.js similarity index 100% rename from js/init.js rename to assets/js/init.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..8cc283f --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ +--- +layout: page +--- +
    + {% assign items = site.lessons | sort:'num' %} + {% for lesson in items %} +
    +

    + {{ lesson.num }}. {{ lesson.title }} +

    +
    + {{ lesson.description }} + ↓ pdf +
    +
    + {% endfor %} +
    diff --git a/lesson-14/index.html b/lesson-14/index.html deleted file mode 100644 index ab6e004..0000000 --- a/lesson-14/index.html +++ /dev/null @@ -1,283 +0,0 @@ - - - - Web технологии - - - - - - - - -
    -

    Web технологии

    -

    Дмитрий Смаль

    -
    - -
    -

    Обработка форм

    -
    - -
    -

    GET / POST формы

    -

    - GET - метод для получения данных. GET запросы могут быть закешированны промежуточными серверами. - GET должен применяться только в поисковых формах. -

    -

    - POST - метод для изменения данных. POST запросы никогда не кешируются промежуточными серверами. - POST должен применяться в формах, изменяющих данные на сервере. -

    - -
    -

    Общий сценарий обработки

    - -
    - -
    -

    Best practice

    -
      -
    • Всегда проверять пользовательские данные
      • -
    • Для форм, изменяющих данные, использовать метод POST
      • -
    • Не заставлять вводить данные повторно
      • -
    • Сообщать об ошибках детально - по полям
      • -
    • Сообщать об успешном сохранении формы
      • -
    • При успешном сохранении делать перенаправление
      • -
    -
    - -
    -

    HTTP Redirect

    -
    - -
    -

    Перенаправления в HTTP

    - -
    - -
    -

    Перенаправления в HTTP

    -
      -
    • 302 Found - временное перенаправление
      • -
    • 301 Moved Permanently - постоянное перенаправление (кешируется в браузере)
      • -
    • Location: url - URL для повторного запроса. Может быть как абсолютным, так и относительным.
      • -
    -
    - -
    -

    Перенаправления в Django

    - -
    - -
    -

    Django forms

    -
    - -
    -

    Описание форм

    - -
    - -
    - -
    - -
    -

    Типы полей

    -
      -
    • BooleanField - флажок
      • -
    • CharField - текстовое поле ввода
      • -
    • EmailField - текстовое поле, Email
      • - -
    • ChoiceField - выбор из нескольких вариантов
      • -
    • DateField - выбор даты
      • -
    • DateTimeField - выбор даты и времени
      • -
    • FileField - загрузка файлов
      • -
    -
    - -
    -

    Валидация данных

    -
      -
    • По типу поля, например EmailField
      • -
    • clean_xxx - доп. проверка поля xxx, может изменить значение
      • -
    • clean - доп. проверка всех полей формы
      • -
    -

    - Методы clean и clean_xxx должны использовать self.cleaned_data - для получения данных формы и поднять ValidationError в случае некорректных данных. -

    - -
    - -
    -

    Использование во view

    - -
    - -
    -

    Использование в шаблонах

    - - - -
    - -
    - -
    - -
    -

    Model forms

    - -

    Метод save уже определен и сохраняет модель Meta.model

    -
    - -
    -

    Безопасность

    -
    - -
    -

    Проверка пользователя

    - -
    - -
    -

    Проверка пользователя (2)

    - -
    - -
    -

    Cross Site Resource Forgery

    - -
    - -
    -

    Методы борьбы с CSRF

    -
      -
    • Проверка метода @require_POST
      • -
    • Проверка заголовка Referer
      • -
    • Проверка CSRF-токенов
      • -
    - -
    - -
    - - - - - - diff --git a/lesson-1/lesson1.pdf b/pdf/lesson-01.pdf similarity index 100% rename from lesson-1/lesson1.pdf rename to pdf/lesson-01.pdf diff --git a/lesson-2/lesson2.pdf b/pdf/lesson-02.pdf similarity index 100% rename from lesson-2/lesson2.pdf rename to pdf/lesson-02.pdf diff --git a/lesson-3/lesson3.pdf b/pdf/lesson-03.pdf similarity index 100% rename from lesson-3/lesson3.pdf rename to pdf/lesson-03.pdf diff --git a/lesson-4/lesson4.pdf b/pdf/lesson-04.pdf similarity index 100% rename from lesson-4/lesson4.pdf rename to pdf/lesson-04.pdf diff --git a/lesson-5/lesson5.pdf b/pdf/lesson-05.pdf similarity index 100% rename from lesson-5/lesson5.pdf rename to pdf/lesson-05.pdf diff --git a/lesson-6/lesson6.pdf b/pdf/lesson-06.pdf similarity index 100% rename from lesson-6/lesson6.pdf rename to pdf/lesson-06.pdf diff --git a/lesson-7/lesson7.pdf b/pdf/lesson-07.pdf similarity index 100% rename from lesson-7/lesson7.pdf rename to pdf/lesson-07.pdf diff --git a/lesson-8/lesson8.pdf b/pdf/lesson-08.pdf similarity index 100% rename from lesson-8/lesson8.pdf rename to pdf/lesson-08.pdf diff --git a/lesson-9/lesson9.pdf b/pdf/lesson-09.pdf similarity index 100% rename from lesson-9/lesson9.pdf rename to pdf/lesson-09.pdf diff --git a/lesson-10/lesson10.pdf b/pdf/lesson-10.pdf similarity index 100% rename from lesson-10/lesson10.pdf rename to pdf/lesson-10.pdf diff --git a/lesson-11/lesson11.pdf b/pdf/lesson-11.pdf similarity index 100% rename from lesson-11/lesson11.pdf rename to pdf/lesson-11.pdf diff --git a/lesson-12/lesson12.pdf b/pdf/lesson-12.pdf similarity index 100% rename from lesson-12/lesson12.pdf rename to pdf/lesson-12.pdf diff --git a/lesson-13/lesson13.pdf b/pdf/lesson-13.pdf similarity index 100% rename from lesson-13/lesson13.pdf rename to pdf/lesson-13.pdf diff --git a/lesson-14/lesson14.pdf b/pdf/lesson-14.pdf similarity index 100% rename from lesson-14/lesson14.pdf rename to pdf/lesson-14.pdf diff --git a/lesson-15/lesson15.pdf b/pdf/lesson-15.pdf similarity index 100% rename from lesson-15/lesson15.pdf rename to pdf/lesson-15.pdf diff --git a/lesson-16/lesson16.pdf b/pdf/lesson-16.pdf similarity index 100% rename from lesson-16/lesson16.pdf rename to pdf/lesson-16.pdf diff --git a/lesson-17/lesson17.pdf b/pdf/lesson-17.pdf similarity index 100% rename from lesson-17/lesson17.pdf rename to pdf/lesson-17.pdf diff --git a/lesson-1/pictures/hypelinks.xml b/pictures/lesson-01/hypelinks.xml similarity index 100% rename from lesson-1/pictures/hypelinks.xml rename to pictures/lesson-01/hypelinks.xml diff --git a/lesson-1/pictures/hyperlinks.png b/pictures/lesson-01/hyperlinks.png similarity index 100% rename from lesson-1/pictures/hyperlinks.png rename to pictures/lesson-01/hyperlinks.png diff --git a/lesson-1/pictures/network.png b/pictures/lesson-01/network.png similarity index 100% rename from lesson-1/pictures/network.png rename to pictures/lesson-01/network.png diff --git a/lesson-1/pictures/network.xml b/pictures/lesson-01/network.xml similarity index 100% rename from lesson-1/pictures/network.xml rename to pictures/lesson-01/network.xml diff --git a/lesson-2/pictures/classic_web.png b/pictures/lesson-02/classic_web.png similarity index 100% rename from lesson-2/pictures/classic_web.png rename to pictures/lesson-02/classic_web.png diff --git a/lesson-2/pictures/classic_web.xml b/pictures/lesson-02/classic_web.xml similarity index 100% rename from lesson-2/pictures/classic_web.xml rename to pictures/lesson-02/classic_web.xml diff --git a/lesson-2/pictures/modern_web.png b/pictures/lesson-02/modern_web.png similarity index 100% rename from lesson-2/pictures/modern_web.png rename to pictures/lesson-02/modern_web.png diff --git a/lesson-2/pictures/modern_web.xml b/pictures/lesson-02/modern_web.xml similarity index 100% rename from lesson-2/pictures/modern_web.xml rename to pictures/lesson-02/modern_web.xml diff --git a/lesson-3/pictures/table.png b/pictures/lesson-03/table.png similarity index 100% rename from lesson-3/pictures/table.png rename to pictures/lesson-03/table.png diff --git a/lesson-4/pictures/boxmodel.png b/pictures/lesson-04/boxmodel.png similarity index 100% rename from lesson-4/pictures/boxmodel.png rename to pictures/lesson-04/boxmodel.png diff --git a/lesson-4/pictures/boxmodel.xml b/pictures/lesson-04/boxmodel.xml similarity index 100% rename from lesson-4/pictures/boxmodel.xml rename to pictures/lesson-04/boxmodel.xml diff --git a/lesson-4/pictures/grid1.png b/pictures/lesson-04/grid1.png similarity index 100% rename from lesson-4/pictures/grid1.png rename to pictures/lesson-04/grid1.png diff --git a/lesson-4/pictures/lorem.jpeg b/pictures/lesson-04/lorem.jpeg similarity index 100% rename from lesson-4/pictures/lorem.jpeg rename to pictures/lesson-04/lorem.jpeg diff --git a/lesson-5/pictures/dnsreq.png b/pictures/lesson-05/dnsreq.png similarity index 100% rename from lesson-5/pictures/dnsreq.png rename to pictures/lesson-05/dnsreq.png diff --git a/lesson-5/pictures/dnsreq.xml b/pictures/lesson-05/dnsreq.xml similarity index 100% rename from lesson-5/pictures/dnsreq.xml rename to pictures/lesson-05/dnsreq.xml diff --git a/lesson-5/pictures/domains.png b/pictures/lesson-05/domains.png similarity index 100% rename from lesson-5/pictures/domains.png rename to pictures/lesson-05/domains.png diff --git a/lesson-5/pictures/domains.xml b/pictures/lesson-05/domains.xml similarity index 100% rename from lesson-5/pictures/domains.xml rename to pictures/lesson-05/domains.xml diff --git a/lesson-5/pictures/stack.png b/pictures/lesson-05/stack.png similarity index 100% rename from lesson-5/pictures/stack.png rename to pictures/lesson-05/stack.png diff --git a/lesson-5/pictures/stack.xml b/pictures/lesson-05/stack.xml similarity index 100% rename from lesson-5/pictures/stack.xml rename to pictures/lesson-05/stack.xml diff --git a/lesson-5/pictures/tcp.png b/pictures/lesson-05/tcp.png similarity index 100% rename from lesson-5/pictures/tcp.png rename to pictures/lesson-05/tcp.png diff --git a/lesson-5/pictures/tcp.xml b/pictures/lesson-05/tcp.xml similarity index 100% rename from lesson-5/pictures/tcp.xml rename to pictures/lesson-05/tcp.xml diff --git a/lesson-5/pictures/telnet.png b/pictures/lesson-05/telnet.png similarity index 100% rename from lesson-5/pictures/telnet.png rename to pictures/lesson-05/telnet.png diff --git a/lesson-5/pictures/tls.png b/pictures/lesson-05/tls.png similarity index 100% rename from lesson-5/pictures/tls.png rename to pictures/lesson-05/tls.png diff --git a/lesson-5/pictures/tls.xml b/pictures/lesson-05/tls.xml similarity index 100% rename from lesson-5/pictures/tls.xml rename to pictures/lesson-05/tls.xml diff --git a/lesson-5/pictures/zones.png b/pictures/lesson-05/zones.png similarity index 100% rename from lesson-5/pictures/zones.png rename to pictures/lesson-05/zones.png diff --git a/lesson-5/pictures/zones.xml b/pictures/lesson-05/zones.xml similarity index 100% rename from lesson-5/pictures/zones.xml rename to pictures/lesson-05/zones.xml diff --git a/lesson-6/pictures/netflow.png b/pictures/lesson-06/netflow.png similarity index 100% rename from lesson-6/pictures/netflow.png rename to pictures/lesson-06/netflow.png diff --git a/lesson-6/pictures/netflow.xml b/pictures/lesson-06/netflow.xml similarity index 100% rename from lesson-6/pictures/netflow.xml rename to pictures/lesson-06/netflow.xml diff --git a/lesson-6/pictures/netflow2.png b/pictures/lesson-06/netflow2.png similarity index 100% rename from lesson-6/pictures/netflow2.png rename to pictures/lesson-06/netflow2.png diff --git a/lesson-6/pictures/netflow2.xml b/pictures/lesson-06/netflow2.xml similarity index 100% rename from lesson-6/pictures/netflow2.xml rename to pictures/lesson-06/netflow2.xml diff --git a/lesson-7/pictures/cycle.png b/pictures/lesson-07/cycle.png similarity index 100% rename from lesson-7/pictures/cycle.png rename to pictures/lesson-07/cycle.png diff --git a/lesson-7/pictures/cycle.xml b/pictures/lesson-07/cycle.xml similarity index 100% rename from lesson-7/pictures/cycle.xml rename to pictures/lesson-07/cycle.xml diff --git a/lesson-7/pictures/io.png b/pictures/lesson-07/io.png similarity index 100% rename from lesson-7/pictures/io.png rename to pictures/lesson-07/io.png diff --git a/lesson-7/pictures/io.xml b/pictures/lesson-07/io.xml similarity index 100% rename from lesson-7/pictures/io.xml rename to pictures/lesson-07/io.xml diff --git a/lesson-7/pictures/nonblock.png b/pictures/lesson-07/nonblock.png similarity index 100% rename from lesson-7/pictures/nonblock.png rename to pictures/lesson-07/nonblock.png diff --git a/lesson-7/pictures/nonblock.xml b/pictures/lesson-07/nonblock.xml similarity index 100% rename from lesson-7/pictures/nonblock.xml rename to pictures/lesson-07/nonblock.xml diff --git a/lesson-7/pictures/servers.png b/pictures/lesson-07/servers.png similarity index 100% rename from lesson-7/pictures/servers.png rename to pictures/lesson-07/servers.png diff --git a/lesson-8/pictures/cgi.png b/pictures/lesson-08/cgi.png similarity index 100% rename from lesson-8/pictures/cgi.png rename to pictures/lesson-08/cgi.png diff --git a/lesson-8/pictures/cgi.xml b/pictures/lesson-08/cgi.xml similarity index 100% rename from lesson-8/pictures/cgi.xml rename to pictures/lesson-08/cgi.xml diff --git a/lesson-8/pictures/fastcgi.png b/pictures/lesson-08/fastcgi.png similarity index 100% rename from lesson-8/pictures/fastcgi.png rename to pictures/lesson-08/fastcgi.png diff --git a/lesson-8/pictures/fastcgi.xml b/pictures/lesson-08/fastcgi.xml similarity index 100% rename from lesson-8/pictures/fastcgi.xml rename to pictures/lesson-08/fastcgi.xml diff --git a/lesson-8/pictures/front_back.png b/pictures/lesson-08/front_back.png similarity index 100% rename from lesson-8/pictures/front_back.png rename to pictures/lesson-08/front_back.png diff --git a/lesson-8/pictures/front_back.xml b/pictures/lesson-08/front_back.xml similarity index 100% rename from lesson-8/pictures/front_back.xml rename to pictures/lesson-08/front_back.xml diff --git a/lesson-8/pictures/wsgi.png b/pictures/lesson-08/wsgi.png similarity index 100% rename from lesson-8/pictures/wsgi.png rename to pictures/lesson-08/wsgi.png diff --git a/lesson-8/pictures/wsgi.xml b/pictures/lesson-08/wsgi.xml similarity index 100% rename from lesson-8/pictures/wsgi.xml rename to pictures/lesson-08/wsgi.xml diff --git a/lesson-9/pictures/frameworks.png b/pictures/lesson-09/frameworks.png similarity index 100% rename from lesson-9/pictures/frameworks.png rename to pictures/lesson-09/frameworks.png diff --git a/lesson-9/pictures/mvc.png b/pictures/lesson-09/mvc.png similarity index 100% rename from lesson-9/pictures/mvc.png rename to pictures/lesson-09/mvc.png diff --git a/lesson-9/pictures/mvc.xml b/pictures/lesson-09/mvc.xml similarity index 100% rename from lesson-9/pictures/mvc.xml rename to pictures/lesson-09/mvc.xml diff --git a/lesson-10/pictures/mockup.png b/pictures/lesson-10/mockup.png similarity index 100% rename from lesson-10/pictures/mockup.png rename to pictures/lesson-10/mockup.png diff --git a/lesson-11/pictures/db.png b/pictures/lesson-11/db.png similarity index 100% rename from lesson-11/pictures/db.png rename to pictures/lesson-11/db.png diff --git a/lesson-11/pictures/db.xml b/pictures/lesson-11/db.xml similarity index 100% rename from lesson-11/pictures/db.xml rename to pictures/lesson-11/db.xml diff --git a/lesson-11/pictures/table.png b/pictures/lesson-11/table.png similarity index 100% rename from lesson-11/pictures/table.png rename to pictures/lesson-11/table.png diff --git a/lesson-11/pictures/table.xml b/pictures/lesson-11/table.xml similarity index 100% rename from lesson-11/pictures/table.xml rename to pictures/lesson-11/table.xml diff --git a/lesson-14/pictures/csrf.png b/pictures/lesson-14/csrf.png similarity index 100% rename from lesson-14/pictures/csrf.png rename to pictures/lesson-14/csrf.png diff --git a/lesson-14/pictures/csrf.xml b/pictures/lesson-14/csrf.xml similarity index 100% rename from lesson-14/pictures/csrf.xml rename to pictures/lesson-14/csrf.xml diff --git a/lesson-14/pictures/forms.png b/pictures/lesson-14/forms.png similarity index 100% rename from lesson-14/pictures/forms.png rename to pictures/lesson-14/forms.png diff --git a/lesson-14/pictures/forms.xml b/pictures/lesson-14/forms.xml similarity index 100% rename from lesson-14/pictures/forms.xml rename to pictures/lesson-14/forms.xml diff --git a/lesson-14/pictures/redirect.png b/pictures/lesson-14/redirect.png similarity index 100% rename from lesson-14/pictures/redirect.png rename to pictures/lesson-14/redirect.png diff --git a/lesson-14/pictures/redirect.xml b/pictures/lesson-14/redirect.xml similarity index 100% rename from lesson-14/pictures/redirect.xml rename to pictures/lesson-14/redirect.xml diff --git a/lesson-15/pictures/basic.png b/pictures/lesson-15/basic.png similarity index 100% rename from lesson-15/pictures/basic.png rename to pictures/lesson-15/basic.png diff --git a/lesson-15/pictures/basic.xml b/pictures/lesson-15/basic.xml similarity index 100% rename from lesson-15/pictures/basic.xml rename to pictures/lesson-15/basic.xml diff --git a/lesson-15/pictures/cookieauth.png b/pictures/lesson-15/cookieauth.png similarity index 100% rename from lesson-15/pictures/cookieauth.png rename to pictures/lesson-15/cookieauth.png diff --git a/lesson-15/pictures/cookieauth.xml b/pictures/lesson-15/cookieauth.xml similarity index 100% rename from lesson-15/pictures/cookieauth.xml rename to pictures/lesson-15/cookieauth.xml diff --git a/lesson-16/pictures/cors.png b/pictures/lesson-16/cors.png similarity index 100% rename from lesson-16/pictures/cors.png rename to pictures/lesson-16/cors.png diff --git a/lesson-16/pictures/cors.xml b/pictures/lesson-16/cors.xml similarity index 100% rename from lesson-16/pictures/cors.xml rename to pictures/lesson-16/cors.xml diff --git a/lesson-17/pictures/arch.png b/pictures/lesson-17/arch.png similarity index 100% rename from lesson-17/pictures/arch.png rename to pictures/lesson-17/arch.png diff --git a/lesson-17/pictures/arch.xml b/pictures/lesson-17/arch.xml similarity index 100% rename from lesson-17/pictures/arch.xml rename to pictures/lesson-17/arch.xml diff --git a/lesson-17/pictures/comet.png b/pictures/lesson-17/comet.png similarity index 100% rename from lesson-17/pictures/comet.png rename to pictures/lesson-17/comet.png diff --git a/lesson-17/pictures/comet.xml b/pictures/lesson-17/comet.xml similarity index 100% rename from lesson-17/pictures/comet.xml rename to pictures/lesson-17/comet.xml diff --git a/lesson-17/pictures/polling.png b/pictures/lesson-17/polling.png similarity index 100% rename from lesson-17/pictures/polling.png rename to pictures/lesson-17/polling.png diff --git a/lesson-17/pictures/polling.xml b/pictures/lesson-17/polling.xml similarity index 100% rename from lesson-17/pictures/polling.xml rename to pictures/lesson-17/polling.xml diff --git a/lesson-17/pictures/push.png b/pictures/lesson-17/push.png similarity index 100% rename from lesson-17/pictures/push.png rename to pictures/lesson-17/push.png diff --git a/lesson-17/pictures/push.xml b/pictures/lesson-17/push.xml similarity index 100% rename from lesson-17/pictures/push.xml rename to pictures/lesson-17/push.xml diff --git a/lesson-17/pictures/ws.png b/pictures/lesson-17/ws.png similarity index 100% rename from lesson-17/pictures/ws.png rename to pictures/lesson-17/ws.png diff --git a/lesson-17/pictures/ws.xml b/pictures/lesson-17/ws.xml similarity index 100% rename from lesson-17/pictures/ws.xml rename to pictures/lesson-17/ws.xml