From 65cc6eabd71b1bceccf6fd3d3d4970c2955f3784 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 10 Dec 2020 08:37:18 -0500 Subject: dump 2020-12-10 --- .../handling_different_text_directions/index.html | 24 ++-- .../css/building_blocks/the_box_model/index.html | 6 +- .../learn/html/multimedia_and_embedding/index.html | 26 ++-- .../index.html" | 72 +++++------ .../structuring_a_page_of_content/index.html" | 2 +- .../javascript/asynchronous/introducing/index.html | 4 +- .../index.html" | 18 +-- .../index.html" | 138 ++++++++++----------- .../first_steps/web_frameworks/index.html | 67 ++++++---- .../createhtmldocument/index.html | 111 +++++++++++++++++ files/ru/web/api/domimplementation/index.html | 82 ++++++++++++ .../ru/web/api/eventtarget/attachevent/index.html | 91 +------------- files/ru/web/api/formdata/index.html | 22 ++-- files/ru/web/api/mouseevent/ctrlkey/index.html | 6 +- files/ru/web/api/node/appendchild/index.html | 5 + .../reference/global_objects/generator/index.html | 107 +++------------- 16 files changed, 420 insertions(+), 361 deletions(-) create mode 100644 files/ru/web/api/domimplementation/createhtmldocument/index.html create mode 100644 files/ru/web/api/domimplementation/index.html (limited to 'files/ru') diff --git a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html index 708c8a9d39..f572aa9758 100644 --- a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html +++ b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html @@ -5,9 +5,9 @@ translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions ---
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
-

Many of the properties and values that we have encountered so far in our CSS learning have been tied to the physical dimensions of our screen. We create borders on the top, right, bottom, and left of a box, for example. These physical dimensions map very neatly to content that is viewed horizontally, and by default the web tends to support left-to-right languages (e.g. English or French) better than right-to-left languages (such as Arabic).

+

Многие свойства и значения, с которыми мы столкнулись до сих пор при изучении CSS, были привязаны к физическим размерам нашего экрана. Мы создаем границы, например, сверху, справа, снизу и слева от коробки.Эти физические размеры очень точно соответствуют контенту, который просматривается по горизонтали, и по умолчанию Интернет имеет тенденцию поддерживать языки с письмом слева направо (например, английский или французский) лучше, чем языки с письмом справа налево (например, арабский).

-

In recent years however, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called writing modes. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them now.

+

Однако в последние годы CSS развивался чтобы лучше поддерживать разную направленность контента, включая контент с направлением справа налево, а также контент сверху вниз (например, в японском языке) - эти разные направления называются режимами письма. По мере того, как вы продвигаетесь в обучении и начинаете работать с макетом, понимание режимов письма будет вам очень полезно, поэтому мы сейчас и познакомимся с ними.

@@ -16,29 +16,29 @@ translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions - - + +
Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:To understand the importance of writing modes to modern CSS.Цель:Понять важность режимов письма для современного CSS.
-

What are writing modes?

+

Какие бывают режимы письма?

-

A writing mode in CSS refers to whether the text is running horizontally or vertically. The {{cssxref("writing-mode")}} property lets us switch from one writing mode to another. You don't need to be working in a language which uses a vertical writing mode to want to do this — you could also change the writing mode of parts of your layout for creative purposes.

+

Режим письма в CSS определяет, идет ли текст по горизонтали или по вертикали. Свойство {{cssxref ("writing-mode")}} позволяет нам переключаться из одного режима письма в другой. Для этого вам не обязательно работать на языке, который использует режим вертикального письма - вы также можете изменить режим письма частей вашего макета для творческих целей.

-

In the example below we have a heading displayed using writing-mode: vertical-rl. The text now runs vertically. Vertical text is common in graphic design, and can be a way to add a more interesting look and feel to your web design.

+

В приведенном ниже примере заголовок отображается с использованием writing-mode: vertical-rl. Теперь текст идет вертикально. Вертикальный текст часто используется в графическом дизайне и может быть способом добавить более интересный вид вашему веб-дизайну.

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

-

The three possible values for the writing-mode property are:

+

Три возможных значения свойства  writing-mode:

-

So the writing-mode property is in reality setting the direction in which block-level elements are displayed on the page — either from top-to-bottom, right-to-left, or left-to-right. This then dictates the direction text flows in sentences.

+

Таким образом, свойство writing-mode на самом деле устанавливает направление, в котором элементы уровня блока отображаются на странице - сверху вниз, справа налево или слева направо. Это затем определяет направление движения текста в предложениях.

Writing modes and block and inline layout

diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.html b/files/ru/learn/css/building_blocks/the_box_model/index.html index f0a09df9f5..74a40b9a33 100644 --- a/files/ru/learn/css/building_blocks/the_box_model/index.html +++ b/files/ru/learn/css/building_blocks/the_box_model/index.html @@ -71,7 +71,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model

Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите flex, и другие внутренние значения, которые могут иметь ваши элементы, например grid.

-

Тем не менее, блочное и строчное расположение, это поведение web-элементов по умолчанию — как было сказано выше, это иногда называют нормальным потоком (normal flow), потому что при отсутствии какой-либо другой инструкций коробки имеют блочное или строчное расположение.

+

Тем не менее, блочное и строчное расположение, это поведение web-элементов по умолчанию — как было сказано выше, это иногда называют нормальным потоком (normal flow), потому что при отсутствии какой-либо другой инструкции коробки имеют блочное или строчное расположение.

Примеры разных типов отображения

@@ -145,7 +145,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model

Showing the size of the box when the alternate box model is being used.

-

По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установивите для него свойство box-sizing: border-box. С помощь этого вы говорите браузеру о том, что граница элемента определяется любыми размерами которые вы устанавливаете.

+

По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство box-sizing: border-box. С помощью этого вы говорите браузеру о том, что граница элемента определяется любыми размерами которые вы устанавливаете.

.box {
   box-sizing: border-box;
@@ -223,7 +223,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
Границы

 
-
Граница распологается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер границы прибавляется к значениям width и height бокса. Если вы используете альтернативную блочную модель, то размер границы уменьшает поле контента данного блока, так как значения границы входит в значения width и height.

+
Граница располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер границы прибавляется к значениям width и height бокса. Если вы используете альтернативную блочную модель, то размер границы уменьшает поле контента данного блока, так как значения границы входит в значения width и height.

 
 
Для слилизации границ существует большое количество различных свойств — имеется четыре границы,  и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.

 
diff --git a/files/ru/learn/html/multimedia_and_embedding/index.html b/files/ru/learn/html/multimedia_and_embedding/index.html
index 6cf2856997..5926902c75 100644
--- a/files/ru/learn/html/multimedia_and_embedding/index.html
+++ b/files/ru/learn/html/multimedia_and_embedding/index.html
@@ -5,14 +5,14 @@ translation_of: Learn/HTML/Multimedia_and_embedding
 ---
 
{{LearnSidebar}}

 
-
Мы уже прочли много текста в этом курсе. МНОГО текста. Но веб был бы скучным, если бы состоял только из текста, поэтому давайте посмотрим, как оживить веб при помощи более интересного контента! Этот модуль объясняет, как при помощи HTML вставлять мультимедиа в ваши web-страницы, включая разные способы вставки изображений, видео, аудио и также других страниц целиком.

+
Мы уже прочли много текста в этом курсе. МНОГО текста. Но веб был бы скучным, если бы состоял только из текста, поэтому давайте посмотрим, как оживить веб при помощи более интересного контента! Этот модуль объясняет, как при помощи HTML вставлять мультимедиа в ваши web-страницы, включая разные способы вставки изображений, видео, аудио, а также других страниц целиком.

 
 
Перед стартом

 
-
Перед изучением этого модуля, вам необходимо изучить азы HTML, изложенные во Введении HTML. Если вы не прошли этот модуль (или что-нибудь подобное), сначала пройдите его, затем возвращайтесь!

+
Перед изучением этого модуля, вам необходимо изучить азы HTML, изложенные во Введении в HTML. Если вы не прошли этот модуль (или подобный ему), сначала пройдите его, затем возвращайтесь!

 
 

-
Внимание: Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать сделать упражнения на программирование (большинство из) в онлайн сервисах, например в JSBin или Thimble.

+
Внимание: Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать сделать упражнения на программирование (большинство из них) в онлайн сервисах, например в JSBin или Thimble.

 

 
 
Руководство

@@ -22,17 +22,19 @@ translation_of: Learn/HTML/Multimedia_and_embedding
 

  
Изображения в HTML

  

- 
Можно рассматривать другие типы мультимедиа, но логично начать с простого элемента {{htmlelement("img")}}, используемого для встраивания простого изображения в веб-страницу. В этой статье мы увидим, как использовать его в целом, включая основы, подписывать ее используя {{htmlelement("figure")}} и как он взаимодействует с фоновым изображением CSS.

+ 
Можно рассматривать другие типы мультимедиа, но логично начать с простого элемента {{htmlelement("img")}}, используемого для встраивания простого изображения в веб-страницу. В этой статье мы увидим, как использовать его в целом, включая основы, подписывать его, используя {{htmlelement("figure")}}, и как он взаимодействует с фоновым изображением CSS.

  

  
Видео и аудио контент

- 
Далее мы увидим, как использовать HTML5-элементы {{htmlelement("video")}} и {{htmlelement("audio")}} для встраивания видео и аудио в наши страницы, включая основы, обеспечение доступа к файлам разного формата для различных браузеров, добавление надписей и субтитров, и как добавлять откаты для старых браузеров.

- 
От <object> до <iframe> — другие технологии встраивания

- 
В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все еще часто встречаемая.

- 
Добавление векторной графики в Веб

- 
Векторная графика может быть очень полезной в определенных ситуациях. В отличие от обычных форматов типа PNG/JPG, они не деформируются/пикселизируются при растяжении – они могут остаться гладкими при растягивании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.

+ 

+ 
Далее мы рассмотрим, как использовать элементы HTML5 {{htmlelement ("video")}} и {{htmlelement ("audio")}} для встраивания видео и аудио на наши страницы, включая основы, обеспечивая доступ к различным форматам файлов для разных браузеров, добавление подписей и субтитров, а также как добавить резервные копии для старых браузеров.

+ 

+ 
От <object> к <iframe> — другие технологии встраивания

+ 
В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все еще часто встречаемая.

+ 
Добавление векторной графики в Веб

+ 
Векторная графика может быть очень полезной в определенных ситуациях. В отличие от обычных форматов типа PNG/JPG, она не деформируются/пикселизируются при растяжении, она остаётся гладкой при масштабировании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.

  
Адаптивные изображения

  

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

+ 
В этой статье мы познакомимся с концепцией адаптивных изображений - изображений, которые хорошо работают на устройствах с сильно различающимися размерами экрана, разрешением и другими подобными характеристиками, и рассмотрим, какие инструменты предоставляет HTML для их реализации. Это помогает повысить производительность различных устройств. Адаптивные изображения - это всего лишь одна часть адаптивного дизайна, будущей темы CSS, которую вы должны изучить.

  

 

 
@@ -41,7 +43,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding
 
Следующая аттестация проверит ваше понимание основ HTML, изложенных в перечисленных выше статьях.

 
 

- 
Страница приветствия Mozilla

+ 
Страница приветствия Mozilla

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

 

 
@@ -52,6 +54,6 @@ translation_of: Learn/HTML/Multimedia_and_embedding
  
Карта изображения предоставляет способ разделить изображение на части, которые ссылаются на разные места (представьте себе географическую карту, которая показывает подробную информацию о каждой стране, когда вы кликаете на нее.) Эта технология иногда может быть полезной.

  
Основы Веб-грамотности 2

  

- 
Превосходный курс от фонда Mozilla , который освещает и проверяет некоторые навыки, полученные в модулеМультимедиа и встраивание. Погрузитесь глубже в основы верстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.

+ 
Превосходный курс от фонда Mozilla, который освещает и проверяет некоторые навыки, полученные в модуле Мультимедиа и встраивание. Погрузитесь глубже в основы верстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.

  

 
diff --git "a/files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html" "b/files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html"
index 930362d696..76b192dd4e 100644
--- "a/files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html"
+++ "b/files/ru/learn/html/multimedia_and_embedding/\320\270\320\267\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\270\321\217_\320\262_html/index.html"
@@ -13,51 +13,53 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
  
   
    Необходимы:
-   Базовые знания компьютера, установленное базовое ПО, базовые знания по работе с файлами,  (как описано в статье Getting started with HTML.)
+   Базовые знания компьютера, установленное базовое ПО, базовые знания по работе с файлами, знания основ HTML (как описано в статье Начало работы с HTML).
   
   
    Цель:
-   Научиться вставлять простые изображения в  HTML, приписывать их комментариями, и какое отношение HTML изображения имеют к фоновым изображениям CSS.
+   Узнать, как встраивать изображения в HTML, как добавлять к ним описания и как изображения HTML связаны с фоновыми изображениями CSS.
   
  
 
 
 
Как разместить картинку на странице?

 
-
Для того, что бы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду что, не содержит текста и закрывающего тега)  который требует минимум один атрибут для использования — src (произносится эс-ар-си, иногда говорят его полное название, со-о-рс). Атрибут src содержит путь к изображению которое вы хотите встроить в страницу, который может быть относительным или абсолютным URL, таким же образом, как для элемента {{htmlelement("a")}} значение атрибута href.

+
Чтобы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду что, не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — src (произносится эс-ар-си, иногда говорят его полное название, source). Атрибут src содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута href для элемента {{htmlelement("a")}}.

 
 

-
Примечание: Перед тем как продолжить, вы можете прочитать Быстрый пример про URL - адресс и путь чтобы обновить свою память про относительный и абсолютный URL - адресс.

+
Примечание: Перед тем как продолжить, вам стоит вспомнить про типы адресов URL, чтобы обновить в памяти про относительные и абсолютные адресса.

 

 
 
Например, если ваше изображение называется dinosaur.jpg, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:

 
 
<img src="dinosaur.jpg">

 
-
Если изображение было в поддиректории images , находящаяся внутри директории, в которой HTML страница (что рекомендует Google для индексации SEO целей), тогда вы можете встроить ее как:

+
Если изображение было в поддиректории images , находящаяся внутри той же директории, что и HTML страница (что рекомендует Google для индексации и целей SEO), тогда вы можете встроить его так:

 
 
<img src="images/dinosaur.jpg">

 
 
И так далее.

 
 

-
Примечание: Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому, давайте вашим изображениям смысловые имена; dinosaur.jpg лучше, чем img835.png.

+
Примечание: Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому присваивайте вашим изображениям смысловые имена: dinosaur.jpg лучше, чем img835.png.

 

 
 
Вы можете встроить изображение используя абсолютный URL, например:

 
 
<img src="https://www.example.com/images/dinosaur.jpg">

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

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

 
 

-
Внимание: Большиство изображений защищены. Не отображайте изображения на вашем сайте пока:

- 

- 1) вы не будете владеть изображением

- 2) у вас не будет письменного разрешения владельца изображения, или

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

- 

- Нарушение авторских прав является не законным. Кроме того, никогда не указывайте в своем атрибуте src ссылку на изображение, размещенную на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража чей-то пропускной способности не законно. Кроме того, это замедляет вашу страницу, оставляя вас без контроля над изображением; было ли оно удалено или случайно перемещено.

+
Внимание: Большиство изображений защищены. Не отображайте изображения на вашем сайте пока:

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

+
+
Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своем атрибуте src ссылку на изображение, размещенную на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу, не позволяя вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.

 

 
 
Наш код выше даст нам следующий результат:

@@ -65,22 +67,22 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 
A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

 
 

-
Примечание: Элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются заменяемые элементы. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. 

+
Примечание: Элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в Замещаемых элементах.

 

 
 

-
Примечание: Вы можете найти готовый пример здесь running on Github (see the source code too.)

+
Примечание: Вы можете найти готовый пример здесь running on Github (смотрите так же исходный код)

 

 
 
Альтернативный текст

 
-
Следующий атрибут, который мы рассмотрим, — alt. Предполагается, что значением атрибута является текстовое описание изображения; данный атрибут используется в ситуациях, когда изображение скрыто или его не удается отобразить. Чтобы продемонстрировать использование атрибута alt на практике, внесем изменения в код из предыдущего примера:

+
Следующий атрибут, который мы рассмотрим — alt. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута alt на практике, внесем изменения в код из предыдущего примера:

 
-
<img src="images/dinosaur.jpg"

-      alt="The head and torso of a dinosaur skeleton;

-           it has a large head with long sharp teeth">

+
<img src="images/dinosaur.jpg"
+     alt="Голова и туловище скелета динозавра;
+         у него большая голова с длинными острыми зубами">

 
-
Самый простой способ увидеть атрибут alt в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как dinosooooor.jpg, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута alt:

+
Самый простой способ увидеть атрибут alt в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как dinosooooor.jpg, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута alt:

 
 
The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.Итак, в каких случаях текст из атрибута alt может быть нам полезен? Приведем несколько примеров:

 
@@ -96,20 +98,20 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 
 
    
  
  • Декорация. Если изображение служит просто украшением и не является частью содержимого, добавьте пустой alt="". Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя. На самом деле, декоративные изображения не принадлежат вашему HTML. {{anch("CSS background images")}} должны быть использованы для вставки декораций, но, если это неизбежно, то лучшее решение - использовать alt="".
    • 
- 
  • Контент. Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий alt. Или даже лучше, в главном тексте, который все увидят. Не используйте alt , если можете обойтись без него. Насколько неудобно было бы для пользователя если бы параграфы были написаны дважды в главном контенте? Если изображение адекватно описано в основном тексте, можете просто использовать alt="".
    • 
- 
  • Ссылка. Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны предоставить accessible link text. В таком случае, вы сможете использовать элемент <a>  или атрибут alt . Старайтесь выбрать лучший вариант.
    • 
- 
  • Текст. Не пишите текст в изображениях. Если вашему заголовку понадобиться тень, то лучше используйте для этого CSS вместо добавления текста в изображение. Однако, если  действительно этого не избежать, то вам следует дополнить текст в атрибуте alt.
    • 
+ 
  • Контент. Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий alt. Или даже лучше, в главном тексте, который все увидят. Не используйте alt , если можете обойтись без него. Насколько неудобно было бы для пользователя, если бы параграфы были написаны дважды в главном контенте? Если изображение адекватно описано в основном тексте, можете просто использовать alt="".
    • 
+ 
  • Ссылка. Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны использовать четкие формулировки описания ссылок. В таком случае, вы сможете использовать элемент <a>  или атрибут alt . Старайтесь выбрать лучший вариант.
    • 
+ 
  • Текст. Не пишите текст в изображениях. Если вашему заголовку понадобится тень, то лучше используйте для этого CSS вместо добавления текста в изображение. Однако, если  действительно этого не избежать, то вам следует дополнить текст в атрибуте alt.
    • 
 

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

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

 
 

-
Примечание: Более подробную информацию, смотрите здесь Text Alternatives.

+
Примечание: Более подробную информацию, смотрите здесь Альтернативный текст.

 

 
 
Ширина и высота

 
-
Вы можете использовать атрибуты width и height, чтобы указать ширину и высоту вашего изображения . Ширину и высоту вашего избражение можете найти различными способами. Например на Mac можно использовать  Cmd + I  что  получить информацию по изображению. Повторяя наш пример, мы можем сделать так:

+
Вы можете использовать атрибуты width и height, чтобы указать ширину и высоту вашего изображения . Ширину и высоту вашего избражение можете найти различными способами. Например, на Mac можно использовать  Cmd + I  чтобы  получить информацию по изображению. Повторяя наш пример, мы можем сделать так:

 
 
<img src="images/dinosaur.jpg"
      alt="The head and torso of a dinosaur skeleton;
@@ -123,15 +125,15 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 
 
Это хорошая практика, в результате страница загрузится быстрей и более гладко.

 
-
Однако, вы не должны изменять размеры ваших изображений используя HTML аттрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнётесь с изображениями, которые выглядят зернистыми, размытыми, или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное соотношение сторон. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу вэб-страницу.

+
Однако, вы не должны изменять размеры ваших изображений используя HTML аттрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы сталкнётесь с изображениями, которые выглядят зернистыми, размытыми, или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное соотношение сторон. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу вэб-страницу.

 
 

-
Примечание: Если вам нужно задать размеры вашего изображения, взамен вы можете использовать CSS.

+
Примечание: Если вам нужно задать размеры вашего изображения, взамен вы можете использовать CSS.

 

 
 
Заголовок изображения

 
-
Как и для ссылок, вы можете также добавить атрибут title для изображений, чтобы обеспечить дополнительную подтверждающую информацию если это необходимо. В нашем примере, мы можем это сделать так:

+
Как и для ссылок, вы можете также добавить атрибут title для изображений, чтобы обеспечить дополнительную подтверждающую информацию если это необходимо. В нашем примере, мы можем это сделать так:

 
 
<img src="images/dinosaur.jpg"
      alt="The head and torso of a dinosaur skeleton;
@@ -148,7 +150,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 
 
Активное обучение: встраивание изображения

 
-
Наступила очередь немного поиграть! Этот раздел активного обучения поможет вам выполнить простое упражнение по  встраиванию. Вы будете обеспечены простым {{htmlelement("img")}} тэгом; мы хотели бы чтобы вы встроили изображение расположенное по следующей ссылке:

+
Наступила очередь немного поиграть! Этот раздел активного обучения поможет вам выполнить простое упражнение по встраиванию. Вы будете обеспечены простым {{htmlelement("img")}} тэгом; мы хотели бы чтобы вы встроили изображение расположенное по следующей ссылке:

 
 
https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

 
@@ -335,20 +337,20 @@ window.addEventListener("load", drawOutput);
 
 
{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

 
-
CSS background-images

+
Фоновые изображения CSS

 
-
Также альтернативой является использование css изображений (или JavaScript, но это совсем другая история). CSS-свойство {{cssxref("background-image")}} , и другие background-* свойства, применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:

+
Вы можете использовать CSS для встраивания изображений в веб-страницы (или JavaScript, но это совсем другая история). CSS-свойство {{cssxref("background-image")}} , и другие background-* свойства, применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:

 
 
p {
   background-image: url("images/dinosaur.jpg");
 }

 
-
Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же париться с HTML изображениями? Согласено вышесказанному, фоновые изображения CSS используются только в качестве украшения. Если вы хотите просто добавить что-нибудь красивое на вашу страницу, всё круто. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, и тп. Это звёздное время для HTML!

+
Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же возиться с HTML изображениями? Согласено вышесказанному, фоновые изображения CSS используются только в качестве украшения. Если вы просто хотите добавить что-то красивое на свою страницу, чтобы улучшить визуальные эффекты, это нормально. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, и тп. Это звёздное время для HTML!

 
 
Итог: если изображение имеет важность, в контексте содержимого вашей страницы, вам следует использовать HTML изображения. Если же картинка является банальной декорацией, используйте фоновые изображения CSS.

 
 

-
Замечание: Вы можете узнать больше о CSS background images в нашей теме о CSS.

+
Замечание: Вы можете узнать больше о фоновых изображениях CSS в нашей теме о CSS.

 

 
 
Вот и всё. Мы детально описали изображения и заголовки. В следующей статье мы перейдём на новый уровень, затронув тему встраивания видео и аудио в веб-страницу.

diff --git "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/structuring_a_page_of_content/index.html" "b/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/structuring_a_page_of_content/index.html"
index 7ade9310c1..b5bb7fa235 100644
--- "a/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/structuring_a_page_of_content/index.html"
+++ "b/files/ru/learn/html/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265_\320\262_html/structuring_a_page_of_content/index.html"
@@ -68,7 +68,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
 
Советы и подсказки

 
 
    
- 
  • Используйте W3C HTML validator для проверки вашего HTML; вы получите бонусные баллы, если он будет проверять как можно больше (строка «googleapis» используется для импорта пользовательских шрифтов на страницу из службы Google Fonts, она не проверяет, но не беспокойтесь об этом слишком много - валидатор - полезный инструмент, но 100% проверка является идеальным, а не полностью необходимым).
    • 
+ 
  • Используйте W3C HTML validator для проверки вашего HTML; вы получите бонусные баллы, если он будет проверять как можно больше (строка «googleapis» используется для импорта пользовательских шрифтов на страницу из службы Google Fonts, она не проверяет, но не беспокойтесь об этом слишком много - валидатор - полезный инструмент, но 100% проверка является идеальной, а не полностью необходимой).
    • 
  
  • Вам не нужно знать CSS, чтобы сделать эту оценку; вам просто нужно поместить предоставленный CSS внутри HTML-элемента.
    • 
  
  • Предоставленный CSS разработан таким образом, что при добавлении правильных структурных элементов в разметку они будут отображаться зелеными на отображаемой странице.
    • 
  
  • Если вы застряли и не можете понять, какие элементы куда помещать, часто помогает вывести простую блок-схему макета страницы и сделать надписи на элементах, которые, по вашему мнению, должны обернуть каждый блок.
    • 
diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html
index b25ca4037e..340938e010 100644
--- a/files/ru/learn/javascript/asynchronous/introducing/index.html
+++ b/files/ru/learn/javascript/asynchronous/introducing/index.html
@@ -105,7 +105,7 @@ let blob = response.blob();
 
 
    Первый параметр — тип прослушиваемого события, второй параметр — функция обратного вызова, вызываемая при срабатывании события.
    
 
-
    При передаче функциии обратного вызова как аргумента в другую функцию, мы передаем только ссылку на функцию как аргумент, следовательно коллбэк функция не выполняется мгновенно. Где-то существует "обратный вызов" (отсюда и название), выполняющийся асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять функцию обратногго вызова в нужный момент.
    
+
    При передаче функциии обратного вызова как аргумента в другую функцию, мы передаем только ссылку на функцию как аргумент, следовательно колбэк функция не выполняется мгновенно. Где-то существует "обратный вызов" (отсюда и название), выполняющийся асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять функцию обратного вызова в нужный момент.
    
 
 
    Вы можете написать свою собственную функцию, содержащую функцию обратного вызова. Давайте взглянем на еще один пример, в котором происходит загрузка ресурсов через XMLHttpRequest API (запустите пример, и посмотрите исходный код):
    
 
@@ -143,7 +143,7 @@ gods.forEach(function (eachName, index){
   console.log(index + '. ' + eachName);
 });

 
-
В этом примере мы перебираем массив с именами греческих богов и выводим индексы и значения в консоль. Ожидаемый параметр для forEach()  — это функцияобратного вызова, которая содержит два параметра: ссылку на имя массива и значения индексов. Однако эта функция не ожидает никаких действий — она запускается немедленно.

+
В этом примере мы перебираем массив с именами греческих богов и выводим индексы и значения в консоль. Ожидаемый параметр для forEach()  — это функция обратного вызова, которая содержит два параметра: ссылку на имя массива и значения индексов. Однако эта функция не ожидает никаких действий — она запускается немедленно.

 
 
Промисы

 
diff --git "a/files/ru/learn/javascript/asynchronous/\321\202\320\260\320\271\320\274\320\260\321\203\321\202\321\213_\320\270_\320\270\320\275\321\202\320\265\321\200\320\262\320\260\320\273\321\213/index.html" "b/files/ru/learn/javascript/asynchronous/\321\202\320\260\320\271\320\274\320\260\321\203\321\202\321\213_\320\270_\320\270\320\275\321\202\320\265\321\200\320\262\320\260\320\273\321\213/index.html"
index 00506c2a14..e3aa0c72b8 100644
--- "a/files/ru/learn/javascript/asynchronous/\321\202\320\260\320\271\320\274\320\260\321\203\321\202\321\213_\320\270_\320\270\320\275\321\202\320\265\321\200\320\262\320\260\320\273\321\213/index.html"
+++ "b/files/ru/learn/javascript/asynchronous/\321\202\320\260\320\271\320\274\320\260\321\203\321\202\321\213_\320\270_\320\270\320\275\321\202\320\265\321\200\320\262\320\260\320\273\321\213/index.html"
@@ -61,7 +61,7 @@ translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
 
Как следствие, такой код, как setTimeout (fn, 0), будет выполняться, как только стек будет пуст, а не сразу. Если вы выполните такой код, как setTimeout (fn, 0), но сразу после выполнения цикла, который насчитывает от 1 до 10 миллиардов, ваш обратный вызов будет выполнен через несколько секунд.

 
 
-
В слудующем примере, браузер будет ожидать две секунды перед тем как  выполнит анонимную функцию, тогда отобразит сообщение (живой пример, и исходный код):

+
В следующем примере, браузер будет ожидать две секунды перед тем как  выполнит анонимную функцию, тогда отобразит сообщение (живой пример, и исходный код):

 
 
let myGreeting = setTimeout(function() {
   alert('Hello, Mr. Universe!');
@@ -151,7 +151,7 @@ clearInterval(myInterval);

 
Несколько подсказок для вас:

 
 
    
- 
  • Вы можете структурировать и стилизовать разметку кнопок по своему усмотрению; просто убедитесь, что вы используете семантический HTML с ковычками, которые позволяют захватывать ссылки на кнопки с помощью JavaScript.
    • 
+ 
  • Вы можете структурировать и стилизовать разметку кнопок по своему усмотрению; просто убедитесь, что вы используете семантический HTML с кавычками, которые позволяют захватывать ссылки на кнопки с помощью JavaScript.
    • 
  
  • Вероятно, вы захотите создать переменную, которая начинается с 0, а затем увеличивается на единицу каждую секунду с использованием постоянного цикла.
    • 
  
  • Этот пример проще создать без использования объекта Date (), как мы это делали в нашей версии, но он будет менее точен - вы не можете гарантировать, что обратный вызов сработает ровно через 1000 мс. Более точным способом было бы запустить startTime = Date.now (), чтобы получить метку времени, когда пользователь нажал кнопку запуска, а затем выполнить Date.now () - startTime, чтобы получить количество миллисекунд после того, как была нажата кнопка запуска .
    • 
  
  • Вам также нужно рассчитать количество часов, минут и секунд как отдельные значения, а затем отображать их вместе в строке после каждой итерации цикла. На втором счетчике вы можете отработать каждую из них.
    • 
@@ -168,7 +168,7 @@ clearInterval(myInterval);

 
 
 

-
Note: Если вы застрали, вы можете увидеть нашу версию (см. также исходный код ).

+
Note: Если вы застряли, вы можете увидеть нашу версию (см. также исходный код ).

 

 
 
Что нужно помнить о setTimeout () и setInterval ()

@@ -359,7 +359,7 @@ div {
   
Разместите  {{htmlelement("script")}} элемент перед </body> .

  
  
  • 
-  
    Разместите следующий JavaScript код в  <script> . Здесь вы сохраняете ссылку на <div> внутри, устанавливаете дяпеременной rotateCount значение 0, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов requestAnimationFrame(), и устанавливатете для переменной startTime значение null, которая будет позже использоваться для хранения времени начала requestAnimationFrame().
    
+  
    Разместите следующий JavaScript код в  <script> . Здесь вы сохраняете ссылку на <div> внутри, устанавливаете дяпеременной rotateCount значение 0, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов requestAnimationFrame(), и устанавливаете для переменной startTime значение null, которая будет позже использоваться для хранения времени начала requestAnimationFrame().
    
 
   
    const spinner = document.querySelector('div');
 let rotateCount = 0;
@@ -368,7 +368,7 @@ let rAF;
 
    
  
    • 
  
  • 
-  
    Под предыдущим котом вставьте функцию draw() соторая будет использоваться для хранения нашешо кода анимации, который включает параметр timestamp :
    
+  
    Под предыдущим кодом вставьте функцию draw() соторая будет использоваться для хранения нашешо кода анимации, который включает параметр timestamp :
    
 
   
    function draw(timestamp) {
 
@@ -513,7 +513,7 @@ const result = document.querySelector('.result');
    
 }
  • -

    Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера просторо счетчика:

    +

    Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счетчика:

    function draw(timestamp) {
   if(!startTime) {
@@ -595,16 +595,16 @@ function start() {
   };
 }
    -

    Пройдите через это:

    +

    Выполните следующие инструкции:

      -
    1. Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужный процессы), и скройте контейнер счетчика.
      2. +
    2. Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счетчика.
    3. Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!"  чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.
    4. Прикрепите к документу прослушиватель событий keydown . При нажатии любой кнопки запускается функция keyHandler().
    5. Внутри keyHandler(), код включает обьект события в качестве параметра (представленного e) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для твета на определенные нажатия клавиш определенными действиями.
    6. Установите для переменной isOver значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клваиши.
    7. Регистрация e.key в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.
      8. -
    8. Когда e.key принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда e.key это "l", отобразить сообщение о том, что Player 2 выиграл. (Note: Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавишь, установите для isOver значение true.
      9. +
    9. Когда e.key принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда e.key это "l", отобразить сообщение о том, что Player 2 выиграл. (Note: Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для isOver значение true.
    10. Только еслиf isOver равно true, удалите прослушиватель событий keydown с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете setTimeout() для вызова reset() через 5 секунд — как обьяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.
    • diff --git "a/files/ru/learn/server-side/django/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" "b/files/ru/learn/server-side/django/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" index 1eaffac0cf..4bff707908 100644 --- "a/files/ru/learn/server-side/django/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" +++ "b/files/ru/learn/server-side/django/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" @@ -3,6 +3,7 @@ title: Django введение slug: Learn/Server-side/Django/Введение tags: - Python + - django - Вступление - Джанго - Начинающим @@ -13,13 +14,13 @@ translation_of: Learn/Server-side/Django/Introduction
    {{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
    -

    В первой статье о Django мы отвечаем на вопрос «Что есть Django?» и даём обзор того, что делает его особенным. Мы опишем основные функции, в том числе некоторые из расширенных функций, которые у нас не будет времени подробно рассмотреть в этом модуле. Мы также покажем вам некоторые основные строительные блоки приложения Django (хотя на данный момент у вас еще не будет среды разработки для тестирования).

    +

    В первой статье о Django мы отвечаем на вопрос «Что такое Django?» и даём обзор того, что делает его особенным. Мы опишем основные функции, в том числе некоторые из расширенных функций, которые у нас не будет времени подробно рассмотреть в этом модуле. Мы также покажем вам некоторые основные строительные блоки приложения Django (хотя на данный момент у вас ещё не будет среды разработки для тестирования).

    - + @@ -28,51 +29,49 @@ translation_of: Learn/Server-side/Django/Introduction
    Требования:Базовая компьютерная грамотность. Общее понимание server-side website programming, и в частности, механики client-server interactions in websites.Базовая компьютерная грамотность. Общее понимание server-side website programming, и в частности, механики client-server interactions in websites.
    Задача:
    -

    Что есть Django?

    +

    Что такое Django?

    -

    Django - это высокоуровневый Python веб-фреймворк, который позволяет быстро создавать безопасные и поддерживаемые веб-сайты. Созданный опытными разработчиками, Django берет на себя большую часть хлопот веб-разработки, поэтому вы можете сосредоточиться на написании своего веб-приложения без необходимости изобретать велосипед . Он бесплатный и с открытым исходным кодом, имеет активное процветающее сообщество, отличную документацию и множество вариантов как бесплатной, так и платной поддержки.

    +

    Django — это высокоуровневый Python веб-фреймворк, который позволяет быстро создавать безопасные и поддерживаемые веб-сайты. Созданный опытными разработчиками, Django берёт на себя большую часть хлопот веб-разработки, поэтому вы можете сосредоточиться на написании своего веб-приложения без необходимости изобретать велосипед. Он бесплатный и с открытым исходным кодом, имеет растущее и активное сообщество, отличную документацию и множество вариантов как бесплатной, так и платной поддержки.

    Django помогает писать программное обеспечение, которое будет:

    Полным
    -
    Django следует философии «Батарейки в комплекте» и предоставляет почти все, что разработчики могут захотеть сделать «из коробки». Поскольку все, что вам нужно, является частью единого «продукта», все это безупречно работает вместе, соответствует последовательным принципам проектирования, и имеет обширную и актуальную документацию.
    +
    Django следует философии «Всё включено» и предоставляет почти всё, что разработчики могут захотеть сделать «из коробки». Поскольку всё, что вам нужно, является частью единого «продукта», всё это безупречно работает вместе, соответствует последовательным принципам проектирования и имеет обширную и актуальную документацию.
    Разносторонним
    -
    Django может быть (и был) использован для создания практически любого типа веб-сайтов - от систем управления контентом и wiki до социальных сетей и новостных сайтов. Он может работать с любой клиентской средой и может доставлять контент практически в любом формате (включая HTML, RSS-каналы, JSON, XML и т.д.). Сайт, который вы сейчас читаете, создан с помощью Django!
    -
    Хотя оDjango предоставляет решения практически для любой функциональности, которая вам может понадобиться (например, для нескольких популярных баз данных, шаблонизаторов и т. д.), внутренне он также может быть расширен сторонними компонентами, если это необходимо.
    +
    Django может быть (и был) использован для создания практически любого типа веб-сайтов — от систем управления контентом и wiki до социальных сетей и новостных сайтов. Он может работать с любой клиентской средой и может доставлять контент практически в любом формате (включая HTML, RSS-каналы, JSON, XML и т. д.). Сайт, который вы сейчас читаете, создан с помощью Django!
    +
    Хотя Django предоставляет решения практически для любой функциональности, которая вам может понадобиться (например, для нескольких популярных баз данных, шаблонизаторов и т. д.), внутренне он также может быть расширен сторонними компонентами, если это необходимо.
    Безопасным
    -
    Django помогает разработчикам избежать многих распространенных ошибок безопасности, предоставляя фреймворк, разработанный чтобы «делать правильные вещи» для автоматической защиты сайта. Например, Django предоставляет безопасный способ управления учетными записями пользователей и паролями, избегая распространенных ошибок, таких как размещение информации о сеансе в файлы cookie, где она уязвима (вместо этого файлы cookie содержат только ключ, а фактические данные хранятся в базе данных) или непосредственное хранение паролей. вместо хэша пароля.
    -
    - Хэш пароля - это значение фиксированной длины, созданное путем обработки пароля через криптографическую хэш-функцию. Django может проверить правильность введенного пароля, пропустив его через хэш-функцию и сравнив вывод с сохраненным значением хэша. Благодаря «одностороннему» характеру функции, даже если сохраненное хэш-значение скомпрометировано, злоумышленнику будет сложно определить исходный пароль.
    -
    - Django, по умолчанию, обеспечивает защиту от многих уязвимостей, включая SQL-инъекцию, межсайтовый скриптинг, подделку межсайтовых запросов и кликджекинг (см.  Website security для получения дополнительной информации об этих атаках).
    +
    Django помогает разработчикам избежать многих распространённых ошибок безопасности, предоставляя фреймворк, разработанный чтобы «делать правильные вещи» для автоматической защиты сайта. Например, Django предоставляет безопасный способ управления учётными записями пользователей и паролями, избегая распространённых ошибок, таких как размещение информации о сеансе в файлы cookie, где она уязвима (вместо этого файлы cookie содержат только ключ, а фактические данные хранятся в базе данных) или непосредственное хранение паролей вместо хэша пароля.
    +
    Хэш пароля — это значение фиксированной длины, созданное путём обработки пароля через криптографическую хэш-функцию. Django может проверить правильность введённого пароля, пропустив его через хэш-функцию и сравнив вывод с сохранённым значением хэша. Благодаря «одностороннему» характеру функции, даже если сохранённое хэш-значение скомпрометировано, злоумышленнику будет сложно определить исходный пароль.
    +
    Django, по умолчанию, обеспечивает защиту от многих уязвимостей, включая SQL-инъекцию, межсайтовый скриптинг, подделку межсайтовых запросов и кликджекинг (см. Website security для получения дополнительной информации об этих атаках).
    Масштабируемым
    -
    Django использует компонентную “shared-nothing” архитектуру (каждая её часть  независима от других и, следовательно, может быть заменена, либо изменена). Четкое разделение между частями означает, что Django может масштабироваться при увеличении трафика путем добавления оборудования на любом уровне: серверы кэширования, серверы баз данных или серверы приложений. Одни из самых загруженных сайтов успешно масштабировали Django (например, Instagram и Disqus).
    +
    Django использует компонентную “shared-nothing” архитектуру (каждая её часть  независима от других и, следовательно, может быть заменена или изменена, если это необходимо). Чёткое разделение частей означает, что Django может масштабироваться при увеличении трафика, путём добавления оборудования на любом уровне: серверы кэширования, серверы баз данных или серверы приложений. Одни из самых загруженных сайтов успешно масштабировали Django (например, Instagram и Disqus, если назвать только два из них).
    Удобным в сопровождении
    -
    Код Django написан с использованием принципов и шаблонов проектирования, которые поощряют создание поддерживаемого и повторно используемого кода. В частности, в нем используется принцип «Don't Repeat Yourself» (DRY, не повторяйся), поэтому нет ненужного дублирования, что сокращает объем кода. Django также способствует группированию связанных функциональных возможностей в повторно используемые «приложения» и, на более низком уровне, группирует связанный код в модули (в соответствии с шаблоном Model View Controller (MVC)).
    +
    Код Django написан с использованием принципов и шаблонов проектирования, которые поощряют создание поддерживаемого и повторно используемого кода. В частности, в нём используется принцип «Don't Repeat Yourself» (DRY, «не повторяйся»), поэтому нет ненужного дублирования, что сокращает объём кода. Django также способствует группированию связанных функциональных возможностей в повторно используемые «приложения» и, на более низком уровне, группирует связанный код в модули (в соответствии с шаблоном Model View Controller (MVC)).
    Переносным
    -
    Django написан на Python, который работает на многих платформах. Это означает, что вы не привязаны к какой-либо конкретной серверной платформе и можете запускать приложения на многих версиях Linux, Windows и Mac OS X. Кроме того, Django хорошо поддерживается многими веб-хостингами, которые часто предоставляют определенную инфраструктуру и документацию для размещения сайтов Django.
    +
    Django написан на Python, который работает на многих платформах. Это означает, что вы не привязаны к какой-либо конкретной серверной платформе и можете запускать приложения на многих версиях Linux, Windows и Mac OS X. Кроме того, Django хорошо поддерживается многими веб-хостингами, которые часто предоставляют определённую инфраструктуру и документацию для размещения сайтов Django.

    Как он появился?

    -

    Django был разработан в период с 2003 по 2005 год командой, которая занималась созданием и обслуживанием газетных веб-сайтов. После создания нескольких сайтов, команда начала повторно использовать множество общего кода и шаблонов проектирования. Этот общий код эволюционировал в веб-фреймворк "Django", как open-source проект в Июле 2005 года.

    +

    Django был разработан в период с 2003 по 2005 год командой, которая занималась созданием и обслуживанием газетных веб-сайтов. После создания нескольких сайтов, команда начала повторно использовать множество общего кода и шаблонов проектирования. Этот общий код эволюционировал в веб-фреймворк, который превратился в проект "Django" с открытым исходным кодом в июле 2005 года.

    -

    Django продолжает расти и улучшаться с момента его первого релиза (1.0) в сентябре 2008 года до недавно выпущенной версии 2.0 (2017). В каждой версии добавлены новые функциональные возможности и исправлены ошибки, начиная от поддержки новых типов баз данных, шаблонизаторов и кэширования, до добавления «общих» функций и классов (уменьшающих объем кода, который разработчики должны писать для ряда задач).

    +

    Django продолжает расти и улучшаться с момента его первого релиза (1.0) в сентябре 2008 года до недавно выпущенной версии 3.1 (2020). В каждой версии добавлены новые функциональные возможности и исправлены ошибки, начиная от поддержки новых типов баз данных, шаблонизаторов и кэширования, до добавления «общих» функций просмотра и классов (уменьшающих объём кода, который разработчики должны писать для ряда программных задач).

    -

    Заметка: Ознакомтесь с примечаниями к версии на сайте Django, чтобы увидеть что изменилось в последних версиях, и как много работы было проделано чтобы улучшить Django.

    +

    Заметка: Ознакомтесь с примечаниями к версии на сайте Django, чтобы увидеть что изменилось в последних версиях и как много работы было проделано, чтобы улучшить Django.

    -

    Django - это процветающий совместный проект с открытым исходным кодом, в котором заняты многие тысячи пользователей и участников. Несмотря на то, что у него все еще есть некоторые особенности, которые отражают его происхождение, Django превратился в универсальную среду, способную разрабатывать веб-сайты любого типа.

    +

    Django — это процветающий совместный проект с открытым исходным кодом, в котором заняты многие тысячи пользователей и участников. Несмотря на то, что у него всё ещё есть некоторые особенности, которые отражают его происхождение, Django превратился в универсальный фреймворк, способный разрабатывать веб-сайты любого типа.

    Насколько популярен Django?

    -

    Нет никаких доступных и окончательных оценок популярности серверных фреймворков (хотя сайты, подобные Hot Framework, пытаются оценить популярность, используя такие механизмы, как подсчет количества проектов на GitHub и вопросов на StackOverflow для каждой платформы). Лучший вопрос - "Достаточно ли Django популярен, чтобы избежать проблем непопулярных платформ?". Продолжает ли он развиваться? Можете ли вы получить помощь, если вам это нужно? Найдёте ли вы работу, если вы изучите Django?

    +

    Нет никаких доступных и окончательных оценок популярности серверных фреймворков (хотя сайты наподобие Hot Framework и пытаются оценить популярность, используя такие механизмы, как подсчёт количества проектов на GitHub и вопросов на StackOverflow для каждой платформы). Лучший вопрос — «достаточно ли Django популярен», чтобы избежать проблем непопулярных платформ. Продолжает ли он развиваться? Можете ли вы получить помощь, если вам нужно? Найдёте ли вы оплачиваемую работу, если изучите Django?

    -

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

    +

    Основываясь на количестве крупных сайтов, которые используют Django, количестве участников и количестве людей, предоставляющих как бесплатную, так и платную поддержку, можно ответить: да, Django — популярный фреймворк!

    -

    Django используют такие крупные сайты, как Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, и Open Stack (источник: домашняя страница Django).

    +

    Django используют такие крупные сайты, как Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest и Open Stack (источник: обзорная страница Django).

    Является ли Django гибким?

    @@ -86,17 +85,17 @@ translation_of: Learn/Server-side/Django/Introduction

    Как выглядит код Django?

    -

    В традиционном информационом веб-сайте, веб-приложение ожидает запросов HTTP от веб-браузера (или другого клиента). Когда запрос получен, приложение разрабатывает то, что необходимо на основе URL-адреса и, возможно, информации в POST или в GET запросах. В зависимости от того, что требуется, он может читать или записывать информацию из базы данных или выполнять другие задачи, необходимые для удовлетворения запроса. Приложение затем вернет ответ веб-браузеру, часто динамически создавая страницу HTML для отображения браузера, вставляя полученные данные в HTML шаблон.

    +

    На традиционном информационом веб-сайте веб-приложение ожидает HTTP-запросы от веб-браузера (или другого клиента). Когда запрос получен, приложение разрабатывает то, что необходимо на основе URL-адреса и, возможно, данных в POST или GET запросах. В зависимости от того, что требуется, далее он может читать или записывать информацию из базы данных или выполнять другие задачи, необходимые для удовлетворения запроса. Затем приложение вернёт ответ веб-браузеру, часто динамически создавая HTML-страницу для отображения в браузере, вставляя полученные данные в HTML-шаблон.

    -

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

    +

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

    @@ -106,40 +105,37 @@ translation_of: Learn/Server-side/Django/Introduction
    -

    Далее разделы дадут Вам понимание того как выглядят основные части Django (мы их изучим более детально чуть позже на курсе, когда будет настраивать окружение разработчика). 

    +

    Следующие разделы дадут вам понимание того, как выглядят основные части Django (мы их изучим более детально чуть позже на курсе, когда будет настраивать окружение разработчика). 

    Отправка запроса в правильное view (urls.py)

    -

    Сопоставитель URL-адресов обычно хранится в файле urls.py. В примере ниже сопоставитель  (urlpatterns) определяет список соответствия между определенными URL-шаблонами и соотвествующими функциями отображения (view). Если полученный HTTP запрос подходит под определенный шаблон ( такой как r'^$', ниже), то будет вызвана ассоциированная функция отображения (такая как views.index) и передана в запрос.

    +

    Сопоставитель URL-адресов обычно содержится в файле urls.py. В примере ниже сопоставитель (urlpatterns) определяет список сопоставлений междумаршрутами (определёнными URL-шаблонами) и соотвествующими функциями отображения (view). Если получен HTTP-запрос, который имеет URL-адрес, соответствующий определённому шаблону, то затем будет вызвана связанная функция отображения (view) и передана в запрос.

    urlpatterns = [
-    url(r'^$', views.index),
-    url(r'^([0-9]+)/$', views.best),
-]
-
    + path('admin/', admin.site.urls), +  path('book/<int:id>/', views.book_detail, name='book_detail'), + path('catalog/', include('catalog.urls')), + re_path(r'^([0-9]+)/$', views.best), +] -
    -

    Note: Немного Python:

    +

    Объект urlpatterns является списком функций path() и/или re_path() (в Python списки определяются с помощью квадратных скобок, внутри которых элементы разделены запятыми и могут содержать необязательную завершающую запятую. Например: [item1, item2, item3,]).

    -
      -
    • Объект urlpatterns является списком функций url(). В Python, списки определяются с помощью квадратных скобок. Элементы разделены запятыми и могут содержать необязательную завершающую запятую. Например: [item1, item2, item3,].
      • -
    • Странный на вид синтаксис шаблона известен как регулярное выражение (regular expression). Мы о нем поговорим позже!
      • -
    • Второй аргумент функции url() это другая функция, которая будет вызвана, когда шаблон будет удачно сопоставлен. Обозначение views.index обозначает, что будет вызвана функция index(), которая может быть найдена в модуле под названием views (т.е. в файле views.py).
      • -
    -
    +

    Первый аргумент в обоих методах - маршрут (шаблон), который будет сопоставлен. В методе path() угловые скобки используются для определения частей URL-адреса, которые будут захвачены и переданы в функцию отображения (view) в качестве именованных аргументов. Функция re_path() использует гибкий подход к сопоставлению с шаблоном, известный как регулярное выражение. Мы поговорим об этом в следующей статье!

    + +

    Второй аргумент — это ещё одна функция, которая будет вызываться при сопоставлении шаблона. Обозначение views.book_detail указывает, что функция называется book_detail() и может быть обнаружена в модуле с именем views (т.е. внутри файла с именем views.py).

    Обработка запроса (views.py)

    -

    Отображения (views) - это сердце веб-приложения, принимающего HTTP-запросы от веб-клиентов и возвращающего HTTP-ответы.  В промежутке они собирают другие ресурсы платформы для доступа к базам данных, шаблонам визуализации и т. д.  

    +

    Отображения (views) — это сердце веб-приложения, принимающего HTTP-запросы от веб-клиентов и возвращающего HTTP-ответы. Между этим они используют другие ресурсы фреймворка для доступа к базам данных, шаблонам визуализации и т. д.  

    -

    В приведенном ниже примере показана минимальная функция представления index(), которая могла быть вызвана нашим преобразователем URL в предыдущем разделе. Как и все функции представления, она получает объект HttpRequest в качестве параметра (request) и возвращает объект HttpResponse. В этом случае мы ничего не делаем с запросом, и наш ответ просто возвращает жестко запрограммированную строку. Мы покажем вам запрос, который делает что-то более интересное в следующем разделе.

    +

    В приведённом ниже примере показана минимальная функция представления index(), которая могла быть вызвана нашим сопоставителем URL-адресов в предыдущем разделе. Как и все функции отображения (view), она получает объект HttpRequest в качестве параметра (request) и возвращает объект HttpResponse. В этом случае мы ничего не делаем с запросом, и наш ответ просто возвращает жёстко запрограммированную строку. Мы покажем вам запрос, который делает что-то более интересное в следующем разделе.

    ## filename: views.py (Django view functions)
 
 from django.http import HttpResponse
 
 def index(request):
-    # Получить HttpRequest - параметр запроса
+    # Получить HttpRequest — параметр запроса
     # Выполнить операции, используя информацию из запроса.
     # Вернуть HttpResponse
     return HttpResponse('Hello from Django!')
@@ -149,21 +145,21 @@ def index(request):
 
    Заметка: Немного Python:
    
 
 
      
- 
    • Модули Python это библиотеки функций, сохраненные в различных файлах, которые мы можем использовать в нашем коде. Здесь мы импортируем только объект HttpResponse из django.http модуля, таким образом мы можем использовать его в нашем отображении (view): from django.http import HttpResponse . Так же есть другие способы импортирования некоторых или всех объектов модуля.
      • 
- 
    • Функции объявляются с помощью ключевого слова def как показано выше, с именованными параметрами, перечисленными в скобках после имени функции; строка завершается двоеточием. Заметьте, что следующие строки содержат отступы.  Отступы важны, так как они определяют какие строки кода находятся внутри конкретного блока (обязательные отступы - это ключевая особенность Python и одна из причин, почему код на Python так легко читать).
      • 
+ 
    • Модули Python это библиотеки функций, сохранённые в различных файлах, которые мы можем использовать в нашем коде. Здесь мы импортируем только объект HttpResponse из модуля django.http чтобы использовать его в нашем отображении (view): from django.http import HttpResponse . Также есть другие способы импортирования некоторых или всех объектов модуля.
      • 
+ 
    • Функции объявляются с помощью ключевого слова def, как показано выше, с именованными параметрами, перечисленными в скобках после имени функции; строка завершается двоеточием. Заметьте, что следующие строки содержат отступы.  Отступы важны, так как они определяют, какие строки кода находятся внутри конкретного блока (обязательные отступы — это ключевая особенность Python и одна из причин, почему код на Python так легко читать).
      •
    -

    Отображения (View) обычно сохранены в файле views.py.

    +

    Отображения (view) обычно содержатся в файле views.py.

    Определение данных модели (models.py)

    -

    Веб-приложения Django обрабатывают и запрашивают данные через объекты Python, называемые моделями. Модели определяют структуру хранимых данных, включая типы полей и, возможно, их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст меток для форм и т. д. Определение модели не зависит от СУБД (MySQL или PostgreSQL) - ваши модели будут работать в любой из них. После того, как вы выбрали базу данных, которую хотите использовать, Вам не нужно напрямую обращатся к ней - вы просто пишете свою структуру модели и другой код, а Django обрабатывает всю грязную работу по обращению к базе данных за вас.

    +

    Веб-приложения Django обрабатывают и запрашивают данные через объекты Python, называемые моделями. Модели определяют структуру хранимых данных, включая типы полей и, возможно, их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст меток для форм и т. д. Определение модели не зависит от используемой базы данных — ваши модели будут работать в любой из них. После того как вы выбрали базу данных, которую хотите использовать, вам не нужно напрямую обращатся к ней — вы просто пишете свою структуру модели и другой код, а Django выполняет всю «грязную работу» по обращению к базе данных за вас.

    -

    В приведенном ниже фрагменте кода показана очень простая модель Django для объекта  Team . Класс Team наследуется от класса models.Model. Он определяет имя команды и командный уровень в качестве полей символов и задает максимальное количество символов, которые должны быть сохранены для каждой записи. Team_level может быть одним из нескольких значений, поэтому мы определяем его как поле выбора и предоставляем сопоставление между отображаемыми вариантами и хранимыми данными вместе со значением по умолчанию. 

    +

    В приведённом ниже фрагменте кода показана очень простая модель Django для объекта Team. Класс Team наследуется от класса models.Model. Он определяет имя команды и командный уровень в качестве полей символов и задаёт максимальное количество символов, которые могут быть сохранены для каждой записи. Team_level может быть одним из нескольких значений, поэтому мы определяем его как поле выбора и предоставляем сопоставление между отображаемыми вариантами и хранимыми данными вместе со значением по умолчанию.

    # filename: models.py
 
@@ -182,20 +178,20 @@ class Team(models.Model):
    -

    Заметка: Немного Python'а:

    +

    Заметка: Немного Python:

      -
    • Python поддерживает «объектно-ориентированное программирование», стиль программирования, в котором мы организуем наш код в объекты, которые включают связанные данные и функции для работы с этими данными. Объекты также могут наследовать / расширять / выводить из других объектов, позволяя совместное поведение между связанными объектами. В Python мы используем ключевое слово class , чтобы определить "скелет" для объекта. Мы можем создать несколько конкретных экземпляров типа объекта на основе модели в классе.
      +
    • Python поддерживает «объектно-ориентированное программирование», то есть стиль программирования, в котором мы организуем наш код в объекты, которые включают связанные данные и функции для работы с этими данными. Объекты также могут наследовать / расширять / выводить из других объектов, позволяя использовать одинаковое поведение между связанными объектами. В Python мы используем ключевое слово class, чтобы определить «скелет» для объекта. Мы можем создать несколько конкретных экземпляров типа объекта на основе модели в классе.

      - Так например, мы имеем класс Team, который происходит от класса Model. Это означает, что эта модель будет содержать все методы модели, но мы также можем дать ей специализированные возможности. В нашей модели мы определяем поля нашей базы данных, в которой будем хранить данные, присваивая им конкретные имена. Django использует эти определения, включая имена полей, для создания основной базы данных.
      • + Так, например, мы имеем класс Team, который происходит от класса Model. Это означает, что эта модель будет содержать все методы модели, но мы также можем дать ей специализированные возможности. В нашей модели мы определяем поля нашей базы данных, в которой будем хранить данные, присваивая им конкретные имена. Django использует эти определения, включая имена полей, для создания основной базы данных.

    Запросы данных (views.py)

    -

    Модель Django предоставляет простой API запросов для поиска в базе данных. Поиск может осуществляться по нескольким полям одновременно с использованием разных критериев (таких как exact, case-insensitive, greater than и т.д.), и может поддерживать сложные выражения (например, вы можете указать поиск в командах U11, у которых есть имя команды, начинающееся с «Fr» или заканчивается на «al»).

    +

    Модель Django предоставляет простой API запросов для поиска в базе данных. Поиск может осуществляться по нескольким полям одновременно, используя различные критерии (такие как exact («точный»), case-insensitive («без учёта регистра»), greater than («больше чем») и т. д.), и может поддерживать сложные выражения (например, вы можете указать поиск в командах U11, у которых есть имя команды, начинающееся с «Fr» или заканчивается на «al»).

    -

    Фрагмент кода показывает функцию view (обработчик ресурсов) для отображения всех команд U09. Жирная строка показывет как мы можем использовать модель API запросов для того, чтобы отфильтровать все записи где поле team_level в точности содержит текст 'U09' (обратите внимание, как эти критерии передаются функции filter() в качестве аргумента с именем поля и типом соответствия, разделенным двойным подчеркиванием: team_level__exact).

    +

    Фрагмент кода показывает функцию view (обработчик ресурсов) для отображения всех команд U09. Выделенная жирным строка показывет, как мы можем использовать модель API-запросов для того, чтобы отфильтровать все записи, где поле team_level в точности содержит текст 'U09' (обратите внимание, как эти критерии передаются функции filter() в качестве аргумента с именем поля и типом соответствия, разделённым двойным подчеркиванием: team_level__exact). 

    ## filename: views.py
 
@@ -211,36 +207,38 @@ def index(request):
 
    
 
    
 
-
    Данная функция использует функцию render() для того, чтобы создать HttpResponse, который будет отправлен назад браузеру. Эта функция является ярлыком; она создает HTML-файл, комбинируя указанный шаблон HTML и некоторые данные для вставки в шаблон (предоставляется в переменной с именем "context"). В следующем разделе мы  покажем как данные вставляются в шаблон для создания HTML-кода.
    
+
    Данная функция использует функцию render() для того, чтобы создать HttpResponse, который будет отправлен назад браузеру. Эта функция является ярлыком; она создаёт HTML-файл, комбинируя указанный HTML-шаблон и некоторые данные для вставки в шаблон (предоставляется в переменной с именем «context»). В следующем разделе мы  покажем как данные вставляются в шаблон для создания HTML-кода.
    
 
-
    Отображение данных (HTML templates)
    
+
    Вывод данных (HTML-шаблоны)
    
 
-
    Системы шаблонов позволяют указать структуру выходного документа, используя заполнители для данных, которые будут заполнены при создании страницы. Шаблоны часто используются для создания HTML, но также могут создавать другие типы документов. Django поддерживает как собственную систему шаблонов, так и другую популярную библиотеку Python под названием Jinja2 (она также может быть использована для поддержки других систем, если это необходимо).
    
+
    Системы шаблонов позволяют указать структуру выходного документа, используя заполнители для данных, которые будут вставлены при генерировании страницы. Шаблоны часто используются для создания HTML, но также могут создавать другие типы документов. Django «из коробки» поддерживает как собственную систему шаблонов, так и другую популярную библиотеку Python под названием Jinja2 (она также может быть использована для поддержки других систем, если это необходимо).
    
 
-
    Фрагмент кода показывает, как выглядит HTML-шаблон, вызванный функцией  render() из предыдущего раздела. Этот шаблон был написан в предположении, что во время рендеринга он будет иметь доступ к переменной списка, называемой youngest_teams (содержащейся в контекстной переменной внутри функции render() выше). Внутри скелета HTML мы имеем выражение, которое сначала проверяет, существует ли переменная youngest_teams, а затем выполняет итерацию в цикле for. На каждой итерации шаблон отображает значение team_name каждой команды в элементе {{htmlelement ("li")}}.
    
+
    Фрагмент кода показывает, как может выглядеть HTML-шаблон, вызванный функцией  render() из предыдущего раздела. Этот шаблон был написан с предположением, что во время отрисовки он будет иметь доступ к переменной списка, названной youngest_teams (содержащейся в контекстной переменной внутри функции render() выше). Внутри скелета HTML мы имеем выражение, которое сначала проверяет, существует ли переменная youngest_teams, а затем повторяет её в цикле for. При каждом повторе шаблон отображает значение team_name каждой команды в элементе {{htmlelement("li")}}.
    
 
-
    ## filename: best/templates/best/index.html
+
    ## filename: best/templates/best/index.html
 
 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Home page</title>
+</head>
 <body>
-
- {% if youngest_teams %}
+  {% if youngest_teams %}
     <ul>
-    {% for team in youngest_teams %}
-        <li>\{\{ team.team_name \}\}</li>
-    {% endfor %}
+      {% for team in youngest_teams %}
+        <li>\{\{ team.team_name \}\}</li>
+      {% endfor %}
     </ul>
-{% else %}
+  {% else %}
     <p>No teams are available.</p>
-{% endif %}
-
+  {% endif %}
 </body>
 </html>
    
 
-
    Что еще можно сделать?
    
+
    Что ещё можно сделать?
    
 
-
    В предыдущих разделах показаны основные особенности, которые вы будете использовать почти в каждом веб-приложении: сопоставление URL, представления, модели и шаблоны. Также Django предоставляет несколько других вещей:
    
+
    В предыдущих разделах показаны основные особенности, которые вы будете использовать почти в каждом веб-приложении: сопоставление URL-адресов, отображение, модели и шаблоны. Также Django предоставляет несколько других вещей:
    
 
 
      
  
    • Формы: HTML-формы используются для сбора пользовательских данных для обработки на сервере. Django упрощает создание, проверку и обработку формы.
      • 
@@ -254,6 +252,6 @@ def index(request):
 
 
      Поздравляем, вы завершили первый шаг в своем путешествии по Django! Теперь вы должны понимать основные преимущества Django, немного его истории, и примерно как может выглядеть каждая из основных частей приложения Django. Вы должны также изучить несколько вещей о языке программирования Python, включая синтаксис списков, функций и классов.
      
 
-
      Вы уже видели код на Django выше, но в отличие от клиентского кода вам нужно настроить среду разработки для ее запуска. Это наш следующий шаг
      
+
      Вы уже видели код на Django выше, но в отличие от клиентского кода вам нужно настроить среду разработки для её запуска. Это наш следующий шаг.
      
 
 
      {{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
      
diff --git a/files/ru/learn/server-side/first_steps/web_frameworks/index.html b/files/ru/learn/server-side/first_steps/web_frameworks/index.html
index af2b467d3f..9be015a4a6 100644
--- a/files/ru/learn/server-side/first_steps/web_frameworks/index.html
+++ b/files/ru/learn/server-side/first_steps/web_frameworks/index.html
@@ -1,6 +1,12 @@
 ---
-title: Выполняемые на сервере веб фреймворки
+title: Выполняемые на сервере веб-фреймворки
 slug: Learn/Server-side/First_steps/Web_frameworks
+tags:
+  - '-фреймворк'
+  - Ве
+  - Программирование серверной части
+  - Сервер
+  - начальный уровень
 translation_of: Learn/Server-side/First_steps/Web_frameworks
 ---
 
      {{LearnSidebar}}
      
@@ -30,7 +36,7 @@ translation_of: Learn/Server-side/First_steps/Web_frameworks
 
 
      В следующем разделе приводится более подробная информация о том, как веб-фреймворки могут облегчить разработку веб-приложений. Затем мы объясним некоторые критерии, которые вы можете использовать для выбора веб-фреймворка, а затем перечислим некоторые из ваших вариантов.
      
 
-
      Что может сделать веб-фреймворк для вас ?
      
+
      Что может сделать веб-фреймворк для вас?
      
 
 
      Веб-фреймворки предоставляют инструменты и библиотеки для упрощения общих операций веб-разработки. Вы не обязаны использовать веб-фреймворк на стороне сервера, но это настоятельно рекомендуется — это сделает вашу жизнь намного проще.
      
 
@@ -238,43 +244,52 @@ def youngest(request):
 
 
      Express — быстрый, непринуждённый, гибкий и минималистский веб-фреймворк для Node.js (node — это серверная среда для запуска JavaScript). Он обеспечивает надёжный набор функций для веб и мобильных приложений и предоставляет полезные HTTP-утилиты и middleware (промежуточные интерфейсы).
      
 
-
      Express чрезвычайно популярен, частично потому, что он облегчает миграцию клиентских веб-программистов JavaScript в разработку на стороне сервера, а частично потому, что он ресурсоэффективен (базовая среда узлов использует легкую многозадачность в потоке, а не порождает отдельные процессы для каждого новый веб-запрос).
      
- 
      
- Поскольку Express является минималистской веб-инфраструктурой, он не включает в себя все компоненты, которые вы, возможно, захотите использовать (например, доступ к базе данных и поддержка пользователей и сеансов предоставляются через независимые библиотеки). Есть много отличных независимых компонентов, но иногда бывает сложно решить, какой из них лучше всего подходит для конкретной цели!
      
- 
      
- Многие популярные серверные и полные стеки (включая серверные и клиентские) основаны на Express, включая Feathers, ItemsAPI, KeystoneJS, Kraken, LEAN-STACK, LoopBack, MEAN и Sails.
      
- 
      
- Многие крупные компании используют Express, в том числе: Uber, Accenture, IBM и т. Д. (Список приведен здесь).
      
+
      Express чрезвычайно популярен, частично потому, что он облегчает миграцию клиентских веб-программистов JavaScript в разработку на стороне сервера, а частично потому, что он ресурсоэффективен (базовая среда узлов использует легкую многозадачность в потоке, а не порождает отдельные процессы для каждого новый веб-запроса).
      
+
+
      Поскольку Express является минималистским веб-фреймворком, он не включает в себя все компоненты, которые вы, возможно, захотите использовать (например, доступ к базе данных и поддержка пользователей и сеансов предоставляются через независимые библиотеки). Есть много отличных независимых компонентов, но иногда бывает сложно решить, какой из них лучше всего подходит для конкретной цели! 
      
+
+
      На Express основаны многие популярные серверные фреймворки, а также фреймворки полного цикла (которые включают как серверную, так и клиентскую часть), в числе которых Feathers, ItemsAPI, KeystoneJS, Kraken, LoopBack, MEAN и Sails.
      
+
+
      Express используют многие крупные компании, в том числе: Uber, Accenture, IBM и т. д. (список приведён здесь).
      
 
 
      Ruby on Rails (Ruby)
      
 
-
      Rails (обычно называемый «Ruby on Rails») - это веб-фреймворк, написанный для языка программирования Ruby.
      
- 
      
- Rails следует очень похожей философии дизайна на Django. Как и Django, он предоставляет стандартные механизмы для маршрутизации URL, доступа к данным из базы данных, генерации HTML из шаблонов и форматирования данных как {{glossary ("JSON")}} или {{glossary ("XML")}}. Точно так же поощряется использование шаблонов проектирования, таких как DRY («не повторяйте себя» - пишите код только один раз, если это возможно), MVC (модель-представление-контроллер) и ряд других.
      
+
      Rails (обычно именуется «Ruby on Rails») — это веб-фреймворк, написанный для языка программирования Ruby.
      
+
+
      Rails следует очень похожей философии дизайна на Django. Как и Django, он предоставляет стандартные механизмы для маршрутизации URL-адресов, доступа к данным из базы данных, генерации HTML из шаблонов и форматирования таких данных как {{glossary ("JSON")}} или {{glossary ("XML")}}. Им точно так же поощряется использование шаблонов проектирования, таких как DRY («не повторяйте себя» — пишите код только один раз, если это возможно), MVC (модель-представление-контроллер) и ряд других.
      
  
      
- Конечно, есть много различий, связанных с конкретными проектными решениями и характером языков.
      
+ Конечно, в них существует и много различий, которые связаны с конкретными проектными решениями и природой самих языков.
      
  
      
- Rails использовался для крупных сайтов, в том числе: Basecamp, GitHub, Shopify, Airbnb, Twitch, SoundCloud, Hulu, Zendesk, Square, Highrise.
      
+ Rails использовался для крупных сайтов, в том числе: Basecamp, GitHub, Shopify, Airbnb, Twitch, SoundCloud, Hulu, Zendesk, Square, Highrise.
      
 
 
      ASP.NET
      
 
-
      ASP.NET - это веб-инфраструктура с открытым исходным кодом, разработанная Microsoft для создания современных веб-приложений и сервисов. С ASP.NET вы можете быстро создавать веб-сайты на основе HTML, CSS и JavaScript, масштабировать их для использования миллионами пользователей и легко добавлять более сложные возможности, такие как веб-API, формы поверх данных или коммуникации в режиме реального времени.
      
- 
      
- Одним из отличий для ASP.NET является то, что он построен на Common Language Runtime (CLR), что позволяет программистам писать код ASP.NET с использованием любого поддерживаемого языка .NET (C #, Visual Basic и т. д.). Как и многие продукты Microsoft, он обладает отличными инструментами (часто бесплатными), активным сообществом разработчиков и хорошо написанной документацией.
      
- 
      
- ASP.NET используется Microsoft, Xbox.com, Stack Overflow и многими другими.
      
+
      ASP.NET — это веб-фреймворк с открытым исходным кодом, разработанный Microsoft для создания современных веб-приложений и сервисов. С ASP.NET вы можете быстро создавать веб-сайты на основе HTML, CSS и JavaScript, масштабировать их для использования миллионами пользователей и легко добавлять более сложные возможности, такие как веб-API, формы поверх данных или коммуникации в режиме реального времени.
      
+
+
      Одним из отличий ASP.NET является то, что он построен на Common Language Runtime (CLR, «общеязыковая исполняющая среда»), что позволяет программистам писать код ASP.NET с использованием любого поддерживаемого языка .NET (C#, Visual Basic и т. п.). Как и многие продукты Microsoft, он обладает отличными инструментами (часто бесплатными), активным сообществом разработчиков и хорошо написанной документацией.
      
+
+
      ASP.NET используется Microsoft, Xbox.com, Stack Overflow и многими другими.
      
 
 
      Mojolicious (Perl)
      
 
-
      Mojolicious - это веб-фреймворк следующего поколения для языка программирования Perl.
      
- 
      
- Еще в первые дни Интернета многие люди изучали Perl из-за замечательной библиотеки Perl под названием CGI. Это было достаточно просто, чтобы начать, не зная много о языке и достаточно мощный, чтобы держать вас в курсе. Mojolicious реализует эту идею, используя новейшие технологии.
      
- 
      
- Некоторые из функций, предоставляемых Mojolicious: веб-инфраструктура в режиме реального времени, позволяющая легко превращать отдельные файловые прототипы в хорошо структурированные веб-приложения MVC; RESTful маршруты, плагины, команды, шаблоны Perl-ish, согласование контента, управление сеансами, проверка форм, структура тестирования, статический файловый сервер, обнаружение CGI / PSGI, поддержка Unicode первого класса; Реализация полного стека HTTP и WebSocket клиент / сервер с IPv6, TLS, SNI, IDNA, HTTP / SOCKS5 прокси, сокет домена UNIX, Comet (длинный опрос), поддержка активности, пул соединений, тайм-аут, cookie, поддержка нескольких частей и сжатия gzip; Парсеры и генераторы JSON и HTML / XML с поддержкой селекторов CSS; Очень чистый, портативный и объектно-ориентированный чистый Perl API без скрытой магии; Свежий код, основанный на многолетнем опыте, бесплатный и открытый исходный код.
      
+
      Mojolicious — это веб-фреймворк следующего поколения для языка программирования Perl.
      
+
+
      Ещё в первые дни Интернета многие люди изучали Perl из-за замечательной библиотеки Perl под названием CGI. Язык позволял довольно просто начать, не зная многого о языке, и был достаточно мощным, чтобы вы продолжали работу. Mojolicious реализует эту идею, используя новейшие технологии.
      
+
+
      Некоторые из функций, предоставляемых Mojolicious:
      
+
+
        
+ 
      • веб-инфраструктура в режиме реального времени, позволяющая легко превращать отдельные файловые прототипы в хорошо структурированные веб-приложения MVC.
        • 
+ 
      • RESTful маршруты, плагины, команды, шаблоны Perl-ish, согласование контента, управление сеансами, проверка форм, структура тестирования, статический файловый сервер, обнаружение CGI/PSGI, первоклассная поддержка Unicode.
        • 
+ 
      • Реализация полного стека HTTP и WebSocket клиент/сервер с IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 прокси, сокет домена UNIX, Comet (длинный опрос), поддержка активности, пул соединений, тайм-аут, cookie, поддержка нескольких частей и сжатия gzip.
        • 
+ 
      • Парсеры и генераторы JSON и HTML/XML с поддержкой селекторов CSS.
        • 
+ 
      • Очень чистый, портативный и объектно-ориентированный Perl API без скрытой магии.
        • 
+ 
      • Свежий код, основанный на многолетнем опыте, бесплатный и с открытым исходным кодом.
        • 
+
      
 
 
      Резюме
      
 
-
      Эта статья показала, что веб-фреймворки могут упростить разработку и поддержку кода на стороне сервера. Он также предоставил общий обзор нескольких популярных платформ и обсудил критерии выбора платформы веб-приложений. Теперь у вас должно быть хотя бы представление о том, как выбрать веб-фреймворк для собственной разработки на стороне сервера. Если нет, то не беспокойтесь - позже в курсе мы дадим вам подробные учебники по Django и Express, чтобы дать вам некоторый опыт работы с веб-фреймворком. 
      
+
      Эта статья показала, что веб-фреймворки могут упростить разработку и поддержку кода на стороне сервера. Она также предоставила общий обзор нескольких популярных платформ и обсудила критерии выбора платформы веб-приложений. Теперь у вас должно быть хотя бы представление о том, как выбрать веб-фреймворк для собственной разработки на стороне сервера. Если нет, то не беспокойтесь — позже в курсе мы дадим вам подробные учебники по Django и Express, чтобы дать вам некоторый опыт работы с веб-фреймворком. 
      
 
 
      Для следующей статьи в этом модуле мы немного изменим направление и рассмотрим веб-безопасность.
      
 
@@ -283,7 +298,7 @@ def youngest(request):
 
      В этом модуле
      
 
 
        
- 
      • Introduction to the server side
        • 
+ 
      • Introduction to the server side
        • 
  
      • Client-Server overview
        • 
  
      • Server-side web frameworks
        • 
  
      • Website security
        • 
diff --git a/files/ru/web/api/domimplementation/createhtmldocument/index.html b/files/ru/web/api/domimplementation/createhtmldocument/index.html
new file mode 100644
index 0000000000..51092a034b
--- /dev/null
+++ b/files/ru/web/api/domimplementation/createhtmldocument/index.html
@@ -0,0 +1,111 @@
+---
+title: DOMImplementation.createHTMLDocument()
+slug: Web/API/DOMImplementation/createHTMLDocument
+tags:
+  - API
+  - DOM Reference
+  - DOMImplementation
+  - Method
+  - Reference
+translation_of: Web/API/DOMImplementation/createHTMLDocument
+---
+
        {{ApiRef("DOM")}}
        
+
+
        Метод DOMImplementation.createHTMLDocument() создает новый HTML {{ domxref("Document") }}.
        
+
+
        Синтаксис
        
+
+
        const newDoc = document.implementation.createHTMLDocument(title)
        
+
+
        Параметры
        
+
+
        
+ 
        title  {{optional_inline}} (except in IE)
        
+ 
        {{domxref("DOMString")}}, содержащий заголовок для создания нового HTML-документа.
        
+
        
+
+
        Пример
        
+
+
        В этом примере создается новый HTML-документ и вставляется в {{HTMLElement("iframe")}} текущего документа.
        
+
+
        Вот HTML для этого примера:
        
+
+
        <body>
+  <p>Click <a href="javascript:makeDocument()">here</a> to create a new document and insert it below.</p>
+  <iframe id="theFrame" src="about:blank" />
+</body>
+
        
+
+
        Реализация JavaScript makeDocument() выглядит следующим образом:
        
+
+
        function makeDocument() {
+  let frame = document.getElementById("theFrame");
+
+  let doc = document.implementation.createHTMLDocument("New Document");
+  let p = doc.createElement("p");
+  p.innerHTML = "This is a new paragraph.";
+
+  try {
+    doc.body.appendChild(p);
+  } catch(e) {
+    console.log(e);
+  }
+
+  // Copy the new HTML document into the frame
+
+  let destDocument = frame.contentDocument;
+  let srcNode = doc.documentElement;
+  let newNode = destDocument.importNode(srcNode, true);
+
+  destDocument.replaceChild(newNode, destDocument.documentElement);
+}
+
        
+
+
        Код в строках 4-12 обрабатывает создание нового HTML-документа и вставку в него некоторого содержимого. Строка 4 использует createHTMLDocument() для создания нового HTML-документа, чей {{ HTMLElement("title") }} это "New Document". Строки 5 и 6 создают новый элемент абзаца с некоторым простым содержимым, а затем строки 8-12 обрабатывают вставку нового абзаца в новый документ.
        
+
+
        Строка 16 вытягивает contentDocument фрейма; это документ, в который мы будем вводить новое содержимое. Следующие две строки обрабатывают импорт содержимого нашего нового документа в контекст нового документа. Наконец, строка 20 фактически заменяет содержимое фрейма содержимым нового документа.
        
+
+
        Смотреть Видео Примеры
        
+
+
        Возвращаемый документ предварительно сконструирован со следующим HTML-кодом:
        
+
+
        <!doctype html>
+<html>
+<head>
+<title>title</title>
+</head>
+<body>
+</body>
+</html>
+
        
+
+
        Спецификации
        
+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
        СпецификацияСтатусКомментарий
        {{SpecName('DOM WHATWG', '#dom-domimplementation-createhtmldocument', 'DOMImplementation.createHTMLDocument')}}{{Spec2('DOM WHATWG')}}Первоначальное определение.
        
+
+
        Совместимость с браузерами
        
+
+
+
+
        {{Compat("api.DOMImplementation.createHTMLDocument")}}
        
+
+
        Смотрите также
        
+
+
          
+ 
        • Интерфейс {{domxref("DOMImplementation")}}, к которому он принадлежит.
          • 
+
        
diff --git a/files/ru/web/api/domimplementation/index.html b/files/ru/web/api/domimplementation/index.html
new file mode 100644
index 0000000000..f68c256376
--- /dev/null
+++ b/files/ru/web/api/domimplementation/index.html
@@ -0,0 +1,82 @@
+---
+title: DOMImplementation
+slug: Web/API/DOMImplementation
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+translation_of: Web/API/DOMImplementation
+---
+
        {{ ApiRef("DOM") }}
        
+
+
        Интерфейс DOMImplementation представляет собой объект, предоставляющий методы, которые не зависят от какого-либо конкретного документа. Такой объект возвращается свойством {{domxref("Document.implementation")}}.
        
+
+
        Свойства
        
+
+
        Этот интерфейс не имеет определенного свойства и не наследует его.
        
+
+
        Методы
        
+
+
        Нет унаследованного метода.
        
+
+
        
+ 
        {{domxref("DOMImplementation.createDocument()")}}
        
+ 
        Создает и возвращает {{domxref("XMLDocument")}}.
        
+ 
        {{domxref("DOMImplementation.createDocumentType()")}}
        
+ 
        Создает и возвращает {{domxref("DocumentType")}}.
        
+ 
        {{domxref("DOMImplementation.createHTMLDocument()")}}
        
+ 
        Создает и возвращает HTML {{domxref("Document")}}.
        
+ 
        {{domxref("DOMImplementation.hasFeature()")}}
        
+ 
        Возвращает {{domxref("Boolean")}}, указывающий, поддерживается ли данная функция или нет. Эта функция ненадежна и сохраняется только для целей совместимости: за исключением запросов, связанных с SVG, она всегда возвращает true. Старые браузеры очень непоследовательны в своем поведении.
        
+
        
+
+
        Спецификации
        
+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
        СпецификацияСтатусКомментарий
        {{SpecName('DOM WHATWG', '#domimplementation', 'DOMImplementation')}}{{Spec2('DOM WHATWG')}}
+    
        Removed the getFeature() method.
        
+     Added the createHTMLDocument() method.
        
+     Modified the return type of createDocument() from {{domxref("Document")}} to {{domxref("XMLDocument")}}.
        
+
+    
        Удален метод getFeature(). Добавлен метод createHTMLDocument(). Изменён тип возвращаемого значения createDocument() с {{domxref("Document")}} на {{domxref("XMLDocument")}}.
        
+   
        {{SpecName('DOM3 Core', 'core.html#ID-102161490', 'DOMImplementation')}}{{Spec2('DOM3 Core')}}Добавлен метод getFeature() (никогда не реализованный ни одним агентом пользователя).
        {{SpecName('DOM2 Core', 'core.html#ID-102161490', 'DOMImplementation')}}{{Spec2('DOM2 Core')}}Добавлены методы createDocument() и createDocumentType().
        {{SpecName('DOM1', 'level-one-core.html#ID-102161490', 'DOMImplementation')}}{{Spec2('DOM1')}}Первоначальное определение.
        
+
+
        Совместимость с браузерами
        
+
+
+
+
        {{Compat("api.DOMImplementation")}}
        
+
+
        Смотрите также
        
+
+
diff --git a/files/ru/web/api/eventtarget/attachevent/index.html b/files/ru/web/api/eventtarget/attachevent/index.html
index e7d6f423a4..3c34f1f843 100644
--- a/files/ru/web/api/eventtarget/attachevent/index.html
+++ b/files/ru/web/api/eventtarget/attachevent/index.html
@@ -1,93 +1,8 @@
 ---
 title: EventTarget.attachEvent()
 slug: Web/API/EventTarget/attachEvent
+tags:
+  - Junk
 translation_of: Web/API/EventTarget/addEventListener
 ---
-
        {{APIRef("DOM Events")}}
        
-
-
        {{ Non-standard_header() }}
        
-
-
        Кратко
        
-
-
        Проприетарная альтернатива методу {{domxref("EventTarget.addEventListener()")}} от Microsoft Internet Explorer.
        
-
-
        Синтаксис
        
-
-
        attached = target.attachEvent(eventNameWithOn, callback)
-
        
-
-
        
- 
        target
        
- 
        DOM элемент, на который требуется повесить "attachEvent()"
        
- 
        eventNameWithOn
        
- 
        Название ивента, начинающийся на "on" (так если бы это был колбэк атрибут), чей обработчик должен быть убран. Например, вам следует использовать "onclick" для установки обработчика для данного "click" ивента.
        
- 
        callback
        
- 
        Функция, вызываемая при появлении ивента на целевом элементе. Функция будет вызвана без аргументов, и с "this", ссылающимся на window object.
        
- 
        attached
        
- 
        Возвращает "true"если установка была успешна, иначе "false".
        
-
        
-
-
        Спецификации
        
-
-
        Не является частью спецификации.
        
-
-
        Microsoft содержит описание на MSDN.
        
-
-
        Браузерная совместимость
        
-
-
        {{ CompatibilityTable() }}
        
-
-
        
-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
        FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
        Базовая поддержка{{ CompatNo() }}{{ CompatNo() }}6 thru 10 [1]{{ CompatUnknown() }}{{ CompatNo() }}
        
-
        
-
-
        
-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
        FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
        Базовая поддержка{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}
        
-
        
-
-
        [1]: attachEvent() больше не поддерживается в IE11+. {{domxref("EventTarget.addEventListener()")}} поддерживается в IE9+.
        
-
-
        Смотрите так-же
        
-
-
          
- 
        • {{domxref("EventTarget.detachEvent()")}}
          • 
- 
        • {{domxref("EventTarget.fireEvent()")}}
          • 
-
        
+
        {{DOMxRef("EventTarget.addEventListener","EventTarget.addEventListener()")}}
        
diff --git a/files/ru/web/api/formdata/index.html b/files/ru/web/api/formdata/index.html
index 35ea12c24a..3553574ec7 100644
--- a/files/ru/web/api/formdata/index.html
+++ b/files/ru/web/api/formdata/index.html
@@ -29,18 +29,24 @@ translation_of: Web/API/FormData
 
        Методы
        
 
 
        
- 
        {{domxref("FormData.append")}}
        
+ 
        {{domxref("FormData.append()")}}
        
  
        Добавляет новое значение существующего поля объекта FormData, либо создаёт его и присваивает значение.
        
- 
        {{domxref("FormData.delete")}}
        
+ 
        {{domxref("FormData.delete()")}}
        
  
        Удаляет пару ключ-значение из объекта FormData.
        
- 
        {{domxref("FormData.get")}}
        
+ 
        {{domxref("FormData.get()")}}
        
  
        Возвращает первое значение ассоциированное с переданным ключом из объекта FormData.
        
- 
        {{domxref("FormData.getAll")}}
        
+ 
        {{domxref("FormData.getAll()")}}
        
  
        Возвращает массив всех значений ассоциированных с переданным ключом из объекта FormData.
        
- 
        {{domxref("FormData.has")}}
        
- 
        Возвращает булево значение касательно наличия в объекте FormData  конкретной пары ключ-значение.
        
- 
        {{domxref("FormData.set")}}
        
- 
        Устанавливает новое значение для существующего ключа объекта FormData, или добавляет пару ключ-значение, если таковой не обнаружено в объекте.
        
+ 
        {{domxref("FormData.has()")}}
        
+ 
        Возвращает булево значение касательно наличия в объекте FormData  конкретной пары ключ-значение.
        
+ 
        {{domxref("FormData.set()")}}
        
+ 
        Устанавливает новое значение для существующего ключа объекта FormData, или добавляет пару ключ-значение, если таковой не обнаружено в объекте.
        
+ 
        {{domxref("FormData.keys()")}}
        
+ 
        Возвращает {{jsxref("Iteration_protocols", "iterator")}} , который позволяет пройтись по всем ключам для каждой пары "ключ-значение" , содержащимся внутри обьекта FormData
        
+ 
        {{domxref("FormData.entries()")}}
        
+ 
        Возвращает {{jsxref("Iteration_protocols","iterator")}} который позволяет пройтись по всем парам "ключ-значение", содержащимся внутри обьекта FormData
        
+ 
        {{domxref("FormData.values()")}}
        
+ 
        Возвращает {{jsxref("Iteration_protocols", "iterator")}} , который позволяет пройтись по всем значениям , содержащимся в обьекте FormData
        
 
        
 
 
        
diff --git a/files/ru/web/api/mouseevent/ctrlkey/index.html b/files/ru/web/api/mouseevent/ctrlkey/index.html
index 6b8815d8da..96c98ae093 100644
--- a/files/ru/web/api/mouseevent/ctrlkey/index.html
+++ b/files/ru/web/api/mouseevent/ctrlkey/index.html
@@ -5,11 +5,11 @@ translation_of: Web/API/MouseEvent/ctrlKey
 ---
 
        {{APIRef("DOM Events")}}
        
 
-
        Свойство только для чтения MouseEvent.ctrlKey возращает true, когда клавиша Ctrl была нажата, а если нет - false.
        
+
        Свойство только для чтения MouseEvent.ctrlKey возвращает true, когда клавиша Ctrl была нажата, а если нет - false.
        
 
 
        Синтаксис
        
 
-
        var ctrlKeyPressed = instanceOfMouseEvent.ctrlKey
+
        var ctrlKeyPressed = instanceOfMouseEvent.ctrlKey
 
        
 
 
        Возвращаемое значение
        
@@ -18,7 +18,7 @@ translation_of: Web/API/MouseEvent/ctrlKey
 
 
        Пример
        
 
-
        <html>
+
        <html>
 <head>
 <title>Пример с ctrlKey</title>
 
diff --git a/files/ru/web/api/node/appendchild/index.html b/files/ru/web/api/node/appendchild/index.html
index 50af4e38da..e011179528 100644
--- a/files/ru/web/api/node/appendchild/index.html
+++ b/files/ru/web/api/node/appendchild/index.html
@@ -17,6 +17,11 @@ translation_of: Web/API/Node/appendChild
 
 
        Если данный дочерний элемент является {{domxref("DocumentFragment")}}, то все содержимое {{domxref("DocumentFragment")}} перемещается в дочерний список указанного родительского узла.
        
 
+
        
+
        Доступен новый API!
        
+ ParentNode.append() поддерживает несколько аргументов и добавляемые строки.
        
+
        
+
 
        Синтаксис
        
 
 
        var child = element.appendChild(child);
        
diff --git a/files/ru/web/javascript/reference/global_objects/generator/index.html b/files/ru/web/javascript/reference/global_objects/generator/index.html
index b5fe95a5bf..385792c2e0 100644
--- a/files/ru/web/javascript/reference/global_objects/generator/index.html
+++ b/files/ru/web/javascript/reference/global_objects/generator/index.html
@@ -16,17 +16,23 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Generator
 
 
        Генератор - это объект, возвращаемый {{jsxref("Statements/function*", "функцией-генератором", "", 1)}} и соответствующий как "Итерируемому" протоколу, так и протоколу "Итератор".
        
 
-
        Синтаксис
        
+
        Конструктор
        
 
-
        function* gen() {
+
        Этот объект не может быть инстанциирован напрямую. Вместо этого, экемпляр Generator может быть возвращён из функции-генератора:
        
+
+
        function* generator() {
   yield 1;
   yield 2;
   yield 3;
 }
 
-var g = gen(); // "Generator { }"
        
+const gen = generator(); // "Generator { }"
+
+console.log(gen.next().value); // 1
+console.log(generator().next().value); // 1
+console.log(generator().next().value); // 1
        
 
-
        Методы
        
+
        Методы экземпляра
        
 
 
        
  
        {{jsxref("Generator.prototype.next()")}}
        
@@ -41,7 +47,7 @@ var g = gen(); // "Generator { }"
        
 
 
        Бесконечный Итератор
        
 
-
        function* idMaker() {
+
        function* idMaker() {
     var index = 0;
     while(true)
         yield index++;
@@ -54,39 +60,7 @@ console.log(gen.next().value); // 1
 console.log(gen.next().value); // 2
 // ...
        
 
-
        Legacy generator objects
        
-
-
        Firefox (SpiderMonkey) also implements an earlier version of generators in JavaScript 1.7, where the star (*) in the function declaration was not necessary (you just use the yield keyword in the function body). However, legacy generators are deprecated. Do not use them; they are going to be removed ({{bug(1083482)}}).
        
-
-
        Legacy generator methods
        
-
-
        
- 
        Generator.prototype.next() {{non-standard_inline}}
        
- 
        Returns a value yielded by the {{jsxref("Operators/yield", "yield")}} expression. This corresponds to next() in the ES2015 generator object.
        
- 
        Generator.prototype.close() {{non-standard_inline}}
        
- 
        Closes the generator, so that when calling next() an {{jsxref("StopIteration")}} error will be thrown. This corresponds to the return() method in the ES2015 generator object.
        
- 
        Generator.prototype.send() {{non-standard_inline}}
        
- 
        Used to send a value to a generator. The value is returned from the {{jsxref("Operators/yield", "yield")}} expression, and returns a value yielded by the next {{jsxref("Operators/yield", "yield")}} expression. send(x) corresponds to next(x) in the ES2015 generator object.
        
- 
        Generator.prototype.throw()  {{non-standard_inline}}
        
- 
        Throws an error to a generator. This corresponds to the throw() method in the ES2015 generator object.
        
-
        
-
-
        Legacy generator example
        
-
-
        function fibonacci() {
-  var a = yield 1;
-  yield a * 2;
-}
-
-var it = fibonacci();
-console.log(it);          // "Generator {  }"
-console.log(it.next());   // 1
-console.log(it.send(10)); // 20
-console.log(it.close());  // undefined
-console.log(it.next());   // throws StopIteration (as the generator is now closed)
-
        
-
-
        Specifications
        
+
        Спецификации
        
 
 
@@ -103,73 +77,22 @@ console.log(it.next());   // throws StopIteration (as the generator is now close
   
-   
+   
        
  
        
    {{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}
    {{Spec2('ESDraft')}} 
   
        
          
 
        
 
-
        Browser compatibility
        
+
        Совместимость
        
 
-
        {{CompatibilityTable}}
        
 
-
        
-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
        FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
        Basic support{{CompatChrome(39.0)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
        
-
        
 
-
        
-
- 
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
- 
-
        FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
        Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(39.0)}}
        
-
        
+
        {{Compat("javascript.builtins.Generator")}}
        
 
 
        See also
        
 
 
        Legacy generators
        
 
 
          
- 
        • {{jsxref("Statements/Legacy_generator_function", "The legacy generator function", "", 1)}}
          • 
- 
        • {{jsxref("Operators/Legacy_generator_function", "The legacy generator function expression", "", 1)}}
          • 
- 
        • {{jsxref("StopIteration")}}
          • 
  
        • The legacy Iterator protocol
          • 
 
        
 
-- 
cgit v1.2.3-54-g00ecf