From 55ddd4454665a3c66e3d5b186bc79048468d36e7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 15 Mar 2021 14:29:50 +0300 Subject: Auto fixes --- .../accessibility/css_and_javascript/index.html | 2 +- files/ru/learn/accessibility/html/index.html | 38 +++++++++--------- .../accessibility/what_is_accessibility/index.html | 10 ++--- .../available_text_editors/index.html | 2 +- .../design_for_all_types_of_users/index.html | 6 +-- .../how_much_does_it_cost/index.html | 12 +++--- files/ru/learn/common_questions/index.html | 4 +- .../set_up_a_local_testing_server/index.html | 10 ++--- .../thinking_before_coding/index.html | 4 +- .../upload_files_to_a_web_server/index.html | 8 ++-- .../what_are_hyperlinks/index.html | 4 +- .../what_is_a_domain_name/index.html | 10 ++--- .../common_questions/what_is_a_url/index.html | 6 +-- .../what_software_do_i_need/index.html | 4 +- .../advanced_styling_effects/index.html | 8 ++-- .../backgrounds_and_borders/index.html | 2 +- .../cascade_and_inheritance/index.html | 6 +-- .../css/building_blocks/cascade_tasks/index.html | 2 +- .../css/building_blocks/debugging_css/index.html | 2 +- .../fundamental_css_comprehension/index.html | 2 +- .../images_media_form_elements/index.html | 4 +- files/ru/learn/css/building_blocks/index.html | 2 +- .../selectors/attribute_selectors/index.html | 4 +- .../selectors/combinators/index.html | 4 +- .../learn/css/building_blocks/selectors/index.html | 2 +- .../type_class_and_id_selectors/index.html | 2 +- .../css/building_blocks/styling_tables/index.html | 22 +++++------ .../css/building_blocks/the_box_model/index.html | 16 ++++---- .../building_blocks/values_and_units/index.html | 6 +-- files/ru/learn/css/css_layout/flexbox/index.html | 2 +- files/ru/learn/css/css_layout/floats/index.html | 4 +- files/ru/learn/css/css_layout/grids/index.html | 2 +- files/ru/learn/css/css_layout/index.html | 4 +- .../learn/css/css_layout/introduction/index.html | 12 +++--- .../css_layout/multiple-column_layout/index.html | 4 +- .../ru/learn/css/css_layout/normal_flow/index.html | 2 +- .../ru/learn/css/css_layout/positioning/index.html | 2 +- .../practical_positioning_examples/index.html | 4 +- .../css/css_layout/responsive_design/index.html | 12 +++--- .../css/first_steps/getting_started/index.html | 4 +- .../first_steps/how_css_is_structured/index.html | 8 ++-- .../learn/css/first_steps/how_css_works/index.html | 2 +- .../using_your_new_knowledge/index.html | 2 +- .../learn/css/first_steps/what_is_css/index.html | 4 +- files/ru/learn/css/howto/css_faq/index.html | 4 +- files/ru/learn/css/index.html | 6 +-- files/ru/learn/css/styling_text/index.html | 2 +- .../css/styling_text/styling_links/index.html | 10 ++--- .../css/styling_text/styling_lists/index.html | 2 +- .../styling_text/typesetting_a_homepage/index.html | 2 +- .../forms/basic_native_form_controls/index.html | 6 +-- files/ru/learn/forms/form_validation/index.html | 2 +- .../how_to_build_custom_form_controls/index.html | 46 +++++++++++----------- .../forms/how_to_structure_a_web_form/index.html | 16 ++++---- .../sending_and_retrieving_form_data/index.html | 8 ++-- .../sending_forms_through_javascript/index.html | 6 +-- files/ru/learn/forms/your_first_form/index.html | 6 +-- .../css_basics/index.html | 4 +- .../dealing_with_files/index.html | 2 +- .../how_the_web_works/index.html | 4 +- .../learn/getting_started_with_the_web/index.html | 2 +- .../installing_basic_software/index.html | 6 +-- .../publishing_your_website/index.html | 4 +- .../the_web_and_web_standards/index.html | 4 +- .../author_fast-loading_html_pages/index.html | 2 +- files/ru/learn/html/howto/index.html | 2 +- .../html/howto/use_data_attributes/index.html | 4 +- files/ru/learn/html/index.html | 2 +- .../advanced_text_formatting/index.html | 2 +- .../creating_hyperlinks/index.html | 18 ++++----- .../introduction_to_html/debugging_html/index.html | 10 ++--- .../document_and_website_structure/index.html | 6 +-- .../getting_started/index.html | 10 ++--- .../html_text_fundamentals/index.html | 6 +-- .../ru/learn/html/introduction_to_html/index.html | 8 ++-- .../marking_up_a_letter/index.html | 6 +-- .../structuring_a_page_of_content/index.html | 6 +-- .../the_head_metadata_in_html/index.html | 10 ++--- .../adding_vector_graphics_to_the_web/index.html | 10 ++--- .../images_in_html/index.html | 10 ++--- .../mozilla_splash_page/index.html | 6 +-- .../other_embedding_technologies/index.html | 2 +- .../responsive_images/index.html | 24 +++++------ .../video_and_audio_content/index.html | 2 +- files/ru/learn/html/tables/advanced/index.html | 14 +++---- files/ru/learn/html/tables/basics/index.html | 8 ++-- .../html/tables/structuring_planet_data/index.html | 10 ++--- files/ru/learn/index.html | 2 +- .../javascript/asynchronous/async_await/index.html | 24 +++++------ .../javascript/asynchronous/concepts/index.html | 6 +-- .../javascript/asynchronous/introducing/index.html | 20 +++++----- .../asynchronous/timeouts_and_intervals/index.html | 36 ++++++++--------- .../build_your_own_function/index.html | 4 +- .../building_blocks/conditionals/index.html | 4 +- .../javascript/building_blocks/events/index.html | 12 +++--- .../building_blocks/image_gallery/index.html | 2 +- .../ru/learn/javascript/building_blocks/index.html | 2 +- .../building_blocks/looping_code/index.html | 20 +++++----- .../building_blocks/return_values/index.html | 32 +++++++-------- .../test_your_skills_colon__functions/index.html | 2 +- .../client-side_storage/index.html | 2 +- .../client-side_web_apis/introduction/index.html | 2 +- .../manipulating_documents/index.html | 4 +- .../first_steps/a_first_splash/index.html | 10 ++--- .../learn/javascript/first_steps/arrays/index.html | 2 +- .../learn/javascript/first_steps/math/index.html | 28 ++++++------- .../first_steps/silly_story_generator/index.html | 8 ++-- .../javascript/first_steps/strings/index.html | 2 +- .../first_steps/useful_string_methods/index.html | 2 +- .../first_steps/what_is_javascript/index.html | 8 ++-- .../first_steps/what_went_wrong/index.html | 2 +- files/ru/learn/javascript/howto/index.html | 2 +- .../ru/learn/javascript/objects/basics/index.html | 6 +-- files/ru/learn/javascript/objects/index.html | 2 +- .../javascript/objects/inheritance/index.html | 6 +-- files/ru/learn/javascript/objects/json/index.html | 2 +- .../objects/object-oriented_js/index.html | 2 +- .../objects/object_building_practice/index.html | 2 +- .../objects/object_prototypes/index.html | 4 +- .../business_case_for_performance/index.html | 12 +++--- .../apache_configuration_htaccess/index.html | 6 +-- .../learn/server-side/django/admin_site/index.html | 12 +++--- .../server-side/django/authentication/index.html | 8 ++-- .../learn/server-side/django/deployment/index.html | 30 +++++++------- .../django/development_environment/index.html | 10 ++--- .../django/django_assessment_blog/index.html | 14 +++---- files/ru/learn/server-side/django/forms/index.html | 30 +++++++------- .../server-side/django/generic_views/index.html | 22 +++++------ .../learn/server-side/django/home_page/index.html | 18 ++++----- files/ru/learn/server-side/django/index.html | 2 +- .../server-side/django/introduction/index.html | 12 +++--- .../ru/learn/server-side/django/models/index.html | 6 +-- .../learn/server-side/django/sessions/index.html | 8 ++-- .../server-side/django/skeleton_website/index.html | 4 +- .../ru/learn/server-side/django/testing/index.html | 26 ++++++------ .../tutorial_local_library_website/index.html | 2 +- .../django/web_application_security/index.html | 6 +-- .../displaying_data/author_list_page/index.html | 4 +- .../bookinstance_list_page/index.html | 4 +- .../date_formatting_using_moment/index.html | 4 +- .../flow_control_using_async/index.html | 10 ++--- .../displaying_data/genre_detail_page/index.html | 2 +- .../express_nodejs/displaying_data/index.html | 4 +- .../displaying_data/template_primer/index.html | 8 ++-- .../forms/delete_author_form/index.html | 10 ++--- .../server-side/express_nodejs/forms/index.html | 8 ++-- .../forms/update_book_form/index.html | 2 +- .../ru/learn/server-side/express_nodejs/index.html | 4 +- .../express_nodejs/introduction/index.html | 14 +++---- .../server-side/express_nodejs/mongoose/index.html | 30 +++++++------- .../server-side/express_nodejs/routes/index.html | 12 +++--- .../express_nodejs/skeleton_website/index.html | 14 +++---- .../tutorial_local_library_website/index.html | 2 +- .../first_steps/client-server_overview/index.html | 2 +- files/ru/learn/server-side/first_steps/index.html | 2 +- .../first_steps/introduction/index.html | 2 +- .../first_steps/website_security/index.html | 6 +-- files/ru/learn/server-side/index.html | 4 +- .../client-side_javascript_frameworks/index.html | 14 +++---- .../react_getting_started/index.html | 2 +- .../feature_detection/index.html | 2 +- .../cross_browser_testing/introduction/index.html | 6 +-- files/ru/learn/tools_and_testing/github/index.html | 14 +++---- 163 files changed, 634 insertions(+), 634 deletions(-) (limited to 'files/ru/learn') diff --git a/files/ru/learn/accessibility/css_and_javascript/index.html b/files/ru/learn/accessibility/css_and_javascript/index.html index 125e7e09af..d55d8b79b4 100644 --- a/files/ru/learn/accessibility/css_and_javascript/index.html +++ b/files/ru/learn/accessibility/css_and_javascript/index.html @@ -21,7 +21,7 @@ original_slug: Learn/Доступность/CSS_and_JavaScript Цели: - Приобрести хорошую осведомленность при использовании CSS и JavaScript в ваших web документах для максимального увелечения доступности и (not detract from it)-(привет я не понял как переводится эти слова так что помогите если понимаете). + Приобрести хорошую осведомленность при использовании CSS и JavaScript в ваших web документах для максимального увеличения доступности и (not detract from it)-(привет я не понял как переводится эти слова так что помогите если понимаете). diff --git a/files/ru/learn/accessibility/html/index.html b/files/ru/learn/accessibility/html/index.html index 2528edf2f3..36f8497f68 100644 --- a/files/ru/learn/accessibility/html/index.html +++ b/files/ru/learn/accessibility/html/index.html @@ -10,7 +10,7 @@ tags: - Семантика - Ссылки - Формы - - вспомагательные технологии + - вспомогательные технологии - доступность translation_of: Learn/Accessibility/HTML original_slug: Learn/Доступность/HTML @@ -54,7 +54,7 @@ original_slug: Learn/Доступность/HTML
  1. Легче разрабатывать — как сказано выше, вы получаете функционал «из коробки», плюс проще для восприятия.
    2. -
  2. Лучше для мобильных — семантический HTML легче по размеру, чем не семантический спаггети-код, и его легче сделать адаптивным.
    3. +
  3. Лучше для мобильных — семантический HTML легче по размеру, чем не семантический спагетти-код, и его легче сделать адаптивным.
  4. Хорошо для SEO — поисковики уделяют больше внимания ключевым словам внутри заголовков, ссылок и т.д., чем ключевым словам, помещённым в не семантический <div> и т.д., поэтому клиентам будет проще найти ваш сайт.
@@ -252,7 +252,7 @@ original_slug: Learn/Доступность/HTML <!-- здесь содержимое подвала --> </footer> -

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

+

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

На что ещё стоит обратить внимание при вёрстке — это использование семантических HTML5 элементов, которые можно увидеть в примере выше (смотрите секционирование содержания): вы можно верстать, используя только вложенные {{htmlelement("div")}} элементы, но лучше использовать соответствующие секционные элементы, чтобы обернуть вашу основную навигацию ({{htmlelement("nav")}}), футер ({{htmlelement("footer")}}), повторяющийся контент ({{htmlelement("article")}}) и т.д. Эти элементы предоставляют дополнительную семантику для скринридеров (и других инструментов), чтобы давать пользователю дополнительную информацию о контенте, по которому они перемещаются (смотрите статью Screen Reader Support for new HTML5 Section Elements для представления поддержки этих элементов с помощью скринридеров).

@@ -264,7 +264,7 @@ original_slug: Learn/Доступность/HTML

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

-

Одним из ключевых аспектов доступуности элементов интерфейса является то, что браузеры по умолчанию позволяют управлять ими с помощью клавиатуры. Вы можете проверить это, открыв в новой вкладке native-keyboard-accessibility.html (смотрите исходный код). Попробуйте понажимать клавишу Tab, после нескольких нажатий вы заметите, что фокус перемещается по всем фокусируемым элементам. Сфокусированные элеметы подсвечиваются браузерными стилями по умолчанию (в зависимости от браузера они немного разные), чтобы можно было понять, какой элемент в фокусе.

+

Одним из ключевых аспектов доступности элементов интерфейса является то, что браузеры по умолчанию позволяют управлять ими с помощью клавиатуры. Вы можете проверить это, открыв в новой вкладке native-keyboard-accessibility.html (смотрите исходный код). Попробуйте понажимать клавишу Tab, после нескольких нажатий вы заметите, что фокус перемещается по всем фокусируемым элементам. Сфокусированные элементы подсвечиваются браузерными стилями по умолчанию (в зависимости от браузера они немного разные), чтобы можно было понять, какой элемент в фокусе.

@@ -324,16 +324,16 @@ original_slug: Learn/Доступность/HTML

Добавление доступности с клавиатуры

-

Для добавления доступности с клавиатуры несоответствующим элементам придётся немного поработать (вы можете посмотреть пример, открыв  fake-div-buttons.html, а также исходный код). Мы дали нашим поддельным <div>-кнопкам возможность фокусироваться (в том числе через Tab), указав аттрибут tabindex="0":

+

Для добавления доступности с клавиатуры несоответствующим элементам придётся немного поработать (вы можете посмотреть пример, открыв  fake-div-buttons.html, а также исходный код). Мы дали нашим поддельным <div>-кнопкам возможность фокусироваться (в том числе через Tab), указав атрибут tabindex="0":

<div data-message="Это из первой кнопки" tabindex="0">Кликни меня!</div>
 <div data-message="Это из второй кнопки" tabindex="0">Меня тоже кликни!</div>
 <div data-message="Это из третьей кнопки" tabindex="0">И меня!</div>
-

Аттрибут {{htmlattrxref("tabindex")}} в первую очередь предназначен для того, чтобы менять порядок фокусируемых элементов в последовательной навигации (указанный в виде положительного целого числа). Это почти всегда — плохая идея, которая может вызвать большую путаницу. Используйте его, если он правда необходим, например, если визуальный порядок сильно отличается от исходного, и вы хотите более логичную последовательную навигацию. Есть два варианта значений tabindex:

+

Атрибут {{htmlattrxref("tabindex")}} в первую очередь предназначен для того, чтобы менять порядок фокусируемых элементов в последовательной навигации (указанный в виде положительного целого числа). Это почти всегда — плохая идея, которая может вызвать большую путаницу. Используйте его, если он правда необходим, например, если визуальный порядок сильно отличается от исходного, и вы хотите более логичную последовательную навигацию. Есть два варианта значений tabindex:

@@ -424,8 +424,8 @@ original_slug: Learn/Доступность/HTML

Теперь посмотрим на пример таблицы с панк-группами, где можно увидеть несколько вспомогательных средств:

@@ -459,17 +459,17 @@ original_slug: Learn/Доступность/HTML

Примечание: Вот почему вы никогда не должны включать текстовое содержимое в изображение — скринридеры просто не могут получить к нему доступ.Есть и другие недостатки — вы не можете выбрать его и скопировать/вставить. Просто не делайте этого!

-

Когда скринридер встретит второе изображение, он озвучит аттрибут alt полностью: «Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов».

+

Когда скринридер встретит второе изображение, он озвучит атрибут alt полностью: «Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов».

-

Это подчёркивает важность не только использования содержательных файловых имён в случаях отсутствия, так называемого, альтернативного текста, но также важность предоставления альтернативного текста в аттрибуте alt, где это возможно. Заметьте, что содержание аттрибута alt должно всегда предоставлять прямое представление изображения и то, что оно визуально передаёт. Любые личные знания или дополнительное описание не должны быть включены, так как это не принесёт пользы людям, которые не видели изображение ранее.

+

Это подчёркивает важность не только использования содержательных файловых имён в случаях отсутствия, так называемого, альтернативного текста, но также важность предоставления альтернативного текста в атрибуте alt, где это возможно. Заметьте, что содержание атрибута alt должно всегда предоставлять прямое представление изображения и то, что оно визуально передаёт. Любые личные знания или дополнительное описание не должны быть включены, так как это не принесёт пользы людям, которые не видели изображение ранее.

-

Также стоит учитывать, имеют ли изображения значение внутри вашего контента, или они исключительно для украшения без смысла. Если они декоративные, лучше оставить значение аттрибута alt пустым (смотрите «Пустые аттрибуты alt») или просто вставить их как фон с помощью CSS.

+

Также стоит учитывать, имеют ли изображения значение внутри вашего контента, или они исключительно для украшения без смысла. Если они декоративные, лучше оставить значение атрибута alt пустым (смотрите «Пустые атрибуты alt») или просто вставить их как фон с помощью CSS.

Примечание: Для более подробной информации об изображениях и лучших практиках читайте «Изображения в HTML» и «Адаптивные изображения».

-

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

+

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

@@ -479,7 +479,7 @@ original_slug: Learn/Доступность/HTML <p id="dino-label">Красный тираннозавр Mozilla ... </p> -

В этом случае мы вообще не используем аттрибут alt. Вместо этого мы представили наше описание изображения как обычный параграф, указали id, и потом использовали аттрибут aria-labelledby, сославшись на тот id. Это вынуждает скринридеры использовать параграф как альтернативный текст/описание изображения. Это особенно удобно, если вы хотите использовать один текст как описание для нескольких изображений, что невозомжно с помощью аттрибута alt.

+

В этом случае мы вообще не используем атрибут alt. Вместо этого мы представили наше описание изображения как обычный параграф, указали id, и потом использовали атрибут aria-labelledby, сославшись на тот id. Это вынуждает скринридеры использовать параграф как альтернативный текст/описание изображения. Это особенно удобно, если вы хотите использовать один текст как описание для нескольких изображений, что невозможно с помощью атрибута alt.

Примечание: aria-labelledby — часть спецификации WAI-ARIA, которая позволяет разработчиками добавлять, где требуется, дополнительную семантику разметке для улучшения доступности при использовании скринридеров. Чтобы узнать больше о том, как это работает, читайте статью «Основы WAI-ARIA».

@@ -487,7 +487,7 @@ original_slug: Learn/Доступность/HTML

Другие механизмы альтернативного текста

-

У изображений есть ещё один механизм для предоставления описательного текста. Например, есть аттрибут longdesc, который предназначен для указания отдельной веб-страницы, содержащей расширенное описание изображения:

+

У изображений есть ещё один механизм для предоставления описательного текста. Например, есть атрибут longdesc, который предназначен для указания отдельной веб-страницы, содержащей расширенное описание изображения:

<img src="dinosaur.png" longdesc="dino-info.html">
@@ -502,16 +502,16 @@ original_slug: Learn/Доступность/HTML

К сожалению, большинство скринридеров, кажется, пока ещё не умеют связывать заголовки фигур с  самими фигурами, но такая структура элементов удобна для CSS стилизации, к тому же, она предоставляет способ расположить описание рядом с изображением в исходнике.

-

Пустые аттрибуты alt

+

Пустые атрибуты alt

<h3>
   <img src="article-icon.png" alt="">
   Тираннозавр Рекс: король динозвров
 </h3>
-

Бывает, что  в дизайне страницы присутствуют изображения, но они исполняют декоративную роль. В примере выше вы можете заметить, что у изображения пустой аттрибут alt — это сделано, чтобы скринридер опознал изображение, но не стал озвучивать её описание (вместо этого, он бы озвучил её как «изображение», или аналогично).

+

Бывает, что  в дизайне страницы присутствуют изображения, но они исполняют декоративную роль. В примере выше вы можете заметить, что у изображения пустой атрибут alt — это сделано, чтобы скринридер опознал изображение, но не стал озвучивать её описание (вместо этого, он бы озвучил её как «изображение», или аналогично).

-

Причина, по которой стоит использовать пустой аттрибут alt, вместо того, чтобы просто его не указывать в том, что большинство скринридеров объявят весь URL-адрес изображения, если не указан alt. В пример выше изображение используется как украшение для связанного с ним заголовка. В таких случаях и случаях, когда изображение является украшением и не имеет ценное содержание, вы должны использовать пустой аттрибут alt. Другой вариант — использовать aria роль role="presentation". Это также предотвратит озвучивание скринридером альтернативного текста.

+

Причина, по которой стоит использовать пустой атрибут alt, вместо того, чтобы просто его не указывать в том, что большинство скринридеров объявят весь URL-адрес изображения, если не указан alt. В пример выше изображение используется как украшение для связанного с ним заголовка. В таких случаях и случаях, когда изображение является украшением и не имеет ценное содержание, вы должны использовать пустой атрибут alt. Другой вариант — использовать aria роль role="presentation". Это также предотвратит озвучивание скринридером альтернативного текста.

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

@@ -519,7 +519,7 @@ original_slug: Learn/Доступность/HTML

Заключение

-

Теперь вы должны хорошо разбираться в написании доступного HTML для большинства случаев. Наша статья про основы WAI-ARIA также заполнит пробелы в знаниях, но эта статья посвящена основам. Далее мы рассмотрим CSS и JavaScript, и как хорошое или плохое их использование влияет на доступность. 

+

Теперь вы должны хорошо разбираться в написании доступного HTML для большинства случаев. Наша статья про основы WAI-ARIA также заполнит пробелы в знаниях, но эта статья посвящена основам. Далее мы рассмотрим CSS и JavaScript, и как хорошо или плохое их использование влияет на доступность. 

{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}

diff --git a/files/ru/learn/accessibility/what_is_accessibility/index.html b/files/ru/learn/accessibility/what_is_accessibility/index.html index 53e198fd09..16207ced8b 100644 --- a/files/ru/learn/accessibility/what_is_accessibility/index.html +++ b/files/ru/learn/accessibility/what_is_accessibility/index.html @@ -93,7 +93,7 @@ original_slug: Learn/Доступность/What_is_accessibility

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

-

Управление элементами с помощью клавиатуры является обычным требованием, которое влияет на процесс веб-разработки — мы обсудим доступ с клавиатруы в последующих статьях модуля. Хорошая идея, чтобы попробовать пользоваться веб-сайтами, только с помощью клавиатуры, чтобы увидеть, что из этого выйдет и как это работает. Например, можно ли использовать клавишу Tab для перемещения между различными элементами управления веб-формы? Вы можете найти больше деталей об использовании клавиатуры в нашей секции Cross browser testing Using native keyboard accessibility.

+

Управление элементами с помощью клавиатуры является обычным требованием, которое влияет на процесс веб-разработки — мы обсудим доступ с клавиатуры в последующих статьях модуля. Хорошая идея, чтобы попробовать пользоваться веб-сайтами, только с помощью клавиатуры, чтобы увидеть, что из этого выйдет и как это работает. Например, можно ли использовать клавишу Tab для перемещения между различными элементами управления веб-формы? Вы можете найти больше деталей об использовании клавиатуры в нашей секции Cross browser testing Using native keyboard accessibility.

С точки зрения статистики, значительное количество людей имеют нарушения мобильности. Центры США по контролю и профилактике заболеваний Инвалидности и Функционирования (Неинституционализированные взрослые в возрасте 18 лет и старше) сообщают, что в США "Процент взрослых с любым физическим нарушением функционирования: 16,1%".

@@ -121,7 +121,7 @@ original_slug: Learn/Доступность/What_is_accessibility

С точки зрения статистики, опять же цифры значительны. Отчет Корнелльского университета О состоянии инвалидности за 2014 год (PDF, 511 КБ)(en) показывает, что в 2014 году 4,5% людей в США в возрасте 21-64 лет имели ту или иную форму когнитивной инвалидности.

-

Примечание: Страница о когнитивных расстройствах на WebAIM обепечивает полезное распространение этих идей, и это, безусловно, стоит прочитать.

+

Примечание: Страница о когнитивных расстройствах на WebAIM обеспечивает полезное распространение этих идей, и это, безусловно, стоит прочитать.

Реализация доступности в проекте

@@ -135,15 +135,15 @@ original_slug: Learn/Доступность/What_is_accessibility

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

-

При планировании проекта учитывайте тестирование доступности в своём режиме тестирования, как при тестировании любого другого важного сегмента целевой аудитории (например, настольный или мобильный браузер). Тестируйте на ранних этапах и часто, выполняя автоматические тесты, чтобы выявить программно обнаруживаемые отсутствующие функции (такие как отсутствующий альтернативный текст изображения или неправильная ссылка — см. Element relationships and context), и тестируйте с некоторыми нетрудоспособными групами пользователей, чтобы увидеть, насколько хорошо для них работают более сложные функции сайта. Например:

+

При планировании проекта учитывайте тестирование доступности в своём режиме тестирования, как при тестировании любого другого важного сегмента целевой аудитории (например, настольный или мобильный браузер). Тестируйте на ранних этапах и часто, выполняя автоматические тесты, чтобы выявить программно обнаруживаемые отсутствующие функции (такие как отсутствующий альтернативный текст изображения или неправильная ссылка — см. Element relationships and context), и тестируйте с некоторыми нетрудоспособными группами пользователей, чтобы увидеть, насколько хорошо для них работают более сложные функции сайта. Например:

  • Может ли мой виджет выбора даты использоваться людьми, использующими программы чтения с экрана?
  • Если контент обновляется динамически, знают ли об этом люди с ослабленным зрением?
    • -
  • Мои интефейсные кнопки доступны с помощью клавиатуры и сенсорного интерфейса?
    • +
  • Мои интерфейсные кнопки доступны с помощью клавиатуры и сенсорного интерфейса?
-

Вы можете и должны хранить заметку о потенциальных проблемных местах в контенте, которые будут нуждаться в доработке, чтобы сделать их доступыми, убедитесь, что они тщательно протестированы, и подумайте о решениях/альтернативах. Текстовый контент (как вы увидите в следующей статье) довольно прост, но как насчет вашего мультимедийного контента, и красивой 3D-графики? Вы должны смотреть на свой бюджет проекта и реально думать о том, какие решения у вас есть, чтобы сделать такой контент доступным? Вы можете заплатить за расшифровку всего вашего мультимедийного контента, это может быть дорогостоящим, но будет сделано.

+

Вы можете и должны хранить заметку о потенциальных проблемных местах в контенте, которые будут нуждаться в доработке, чтобы сделать их доступными, убедитесь, что они тщательно протестированы, и подумайте о решениях/альтернативах. Текстовый контент (как вы увидите в следующей статье) довольно прост, но как насчет вашего мультимедийного контента, и красивой 3D-графики? Вы должны смотреть на свой бюджет проекта и реально думать о том, какие решения у вас есть, чтобы сделать такой контент доступным? Вы можете заплатить за расшифровку всего вашего мультимедийного контента, это может быть дорогостоящим, но будет сделано.

Кроме того, будьте реалистами. "100% доступность" является недостижимым идеалом — вы всегда столкнетесь с каким-то случаем, который приводёт к тому, что определенный пользователь найдёт определенный контент трудным в использовании, но вы должны сделать столько, сколько сможете. Если вы планируете использовать трехмерную круговую диаграмму, созданную с помощью WebGL, вы можете включить таблицу данных в качестве доступного альтернативного представления данных. Или, вы можете просто включить таблицу и избавиться от 3D круговой диаграммы-таблица доступна для всех, быстрее кодировать, меньше ресурсов процессора, и проще в обслуживании.

diff --git a/files/ru/learn/common_questions/available_text_editors/index.html b/files/ru/learn/common_questions/available_text_editors/index.html index 37f18bfe7b..0a2c769828 100644 --- a/files/ru/learn/common_questions/available_text_editors/index.html +++ b/files/ru/learn/common_questions/available_text_editors/index.html @@ -203,7 +203,7 @@ translation_of: Learn/Common_questions/Available_text_editors

Активное изучение пока не доступно. Пожалуйста, рассмотрите возможность внести свой вклад.

-

Копай глебже

+

Копай глубже

Критерии выбора

diff --git a/files/ru/learn/common_questions/design_for_all_types_of_users/index.html b/files/ru/learn/common_questions/design_for_all_types_of_users/index.html index 8980f6ec00..8486ff757f 100644 --- a/files/ru/learn/common_questions/design_for_all_types_of_users/index.html +++ b/files/ru/learn/common_questions/design_for_all_types_of_users/index.html @@ -182,7 +182,7 @@ span.subheading { font-size:1rem; } /* исходный размер */

Изображения

-

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

+

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

  • Слабовидящие пользователи полагаются на средство чтения с экрана, которое может обрабатывать только текст.
    • @@ -193,7 +193,7 @@ span.subheading { font-size:1rem; } /* исходный размер */
    Декоративные изображения
    Они просто для украшения и не передают никакой полезной информации. Чаще всего их можно было бы заменить фоновым изображением. Убедитесь, что они имеют пустой атрибут alt: <img src="deco.gif" alt="">, чтобы они не засоряли текст.
    -
    Информационнные изоражения
    +
    Информационные изображения
    Они используются для передачи информации, отсюда и их название. Они могут, например, показать график, жест человека или любую другую информацию. Как минимум, вы должны предоставить соответствующий атрибут alt.
    @@ -205,7 +205,7 @@ span.subheading { font-size:1rem; } /* исходный размер */

    Аудио/видео

    -

    Также вам стоит предоставдять альтернативы мультимедийному контенту.

    +

    Также вам стоит предоставлять альтернативы мультимедийному контенту.

    Субтитры / закрытие субтитров
    diff --git a/files/ru/learn/common_questions/how_much_does_it_cost/index.html b/files/ru/learn/common_questions/how_much_does_it_cost/index.html index 315fcf623a..b830480208 100644 --- a/files/ru/learn/common_questions/how_much_does_it_cost/index.html +++ b/files/ru/learn/common_questions/how_much_does_it_cost/index.html @@ -42,7 +42,7 @@ translation_of: Learn/Common_questions/How_much_does_it_cost

    Редакторы изображений

    -

    Ваша система, вероятно, включает в себя простой редактор изображений или просмотрщик: Paint на Windows, Eye of Gnome на Ubuntu, Preview на Mac. Эти программы относительно ограничены, и в скоре вы захотите более развитый редактор, чтобы иметь возможность добавлять слои, накладывать эффекты и группировать объекты.

    +

    Ваша система, вероятно, включает в себя простой редактор изображений или просмотрщик: Paint на Windows, Eye of Gnome на Ubuntu, Preview на Mac. Эти программы относительно ограничены, и вскоре вы захотите более развитый редактор, чтобы иметь возможность добавлять слои, накладывать эффекты и группировать объекты.

    Редакторы могут быть бесплатными (GIMP, Paint.NET), относительно недорогими (PaintShop Pro, меньше чем $100), или иметь стоимость в пару сотен долларов (Adobe Photoshop).

    @@ -58,7 +58,7 @@ translation_of: Learn/Common_questions/How_much_does_it_cost

    Вам также потребуется возможность выгрузки файлов: с вашего жесткого диска на удаленный веб-сервер. Чтобы осуществить это, вам потребуется утилита для публикации, такая как (S)FTP client, RSync, или Git/GitHub.

    -

    Каждая операционная система включает (S)FTP клиент, как часть своего файлового менеджера. Проводник Windows, Nautilus (распрастраненный файловый менеджер Linux), и Mac Finder - все имеют такую функциональность. Однако, люди часто выбирают удаленные (S)FTP клиенты, для одновременного отображения локальных и удаленных каталогов и хранения паролей сервера.

    +

    Каждая операционная система включает (S)FTP клиент, как часть своего файлового менеджера. Проводник Windows, Nautilus (распространенный файловый менеджер Linux), и Mac Finder - все имеют такую функциональность. Однако, люди часто выбирают удаленные (S)FTP клиенты, для одновременного отображения локальных и удаленных каталогов и хранения паролей сервера.

    Если вы хотите установить (S)FTP клиент, то существует несколько, заслуживающих доверия, бесплатных вариантов: FileZilla, WinSCP для Windows, Cyberduck для Mac/Windows, и другие.

    @@ -118,14 +118,14 @@ translation_of: Learn/Common_questions/How_much_does_it_cost
    • У вас есть больше свободы, когда вы платите. Ваш веб-сайт только в ваших руках, и вы можете легко перейти от одного хостинг-провайдера к другому.
      • -
    • Бесплатные хостинги могут добавлять рекламные обьявления к вашему контенту, в обход вашего контроля.
      • +
    • Бесплатные хостинги могут добавлять рекламные объявления к вашему контенту, в обход вашего контроля.

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

    Некоторые люди выбирают смешанный подход. Например, их главный блог на платном хосте, с полным доменном именем, а неожиданный менее важный контент, на бесплатном хосте.

    -

    Профессиональные веб-сайты агенств и хостингов

    +

    Профессиональные веб-сайты агентств и хостингов

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

    @@ -136,13 +136,13 @@ translation_of: Learn/Common_questions/How_much_does_it_cost

  • Будете ли вы его обновлять регулярно? или это будет статический веб-сайт?
  • Должен ли веб-сайт подсоединяться к IT структуре вашей компании, чтобы собирать контент (например, внутренние данные)?
  • Хотите ли вы какую-нибудь уникальную функцию, которая сейчас в моде?
    • -
  • Хотите ли вы, чтобы агенство решало сложные проблемы пользователей {{Glossary("UX")}}?
    • +
  • Хотите ли вы, чтобы агентство решало сложные проблемы пользователей {{Glossary("UX")}}?

...и для хостинга:

    -
  • Хотите ли вы имет резервный сервер, если вдруг ваш упадет?
    • +
  • Хотите ли вы иметь резервный сервер, если вдруг ваш упадет?
  • Надежность 95%, или вам требуется круглосуточный сервис обслуживания?
  • Вам нужны высокопроизводительные, сверхчувствительные удаленные серверы или вам будет достаточно более медленной, машиной, предназначенной для совместного использования.
diff --git a/files/ru/learn/common_questions/index.html b/files/ru/learn/common_questions/index.html index 7fa9b16baf..99127001de 100644 --- a/files/ru/learn/common_questions/index.html +++ b/files/ru/learn/common_questions/index.html @@ -125,7 +125,7 @@ translation_of: Learn/Common_questions

Чтобы узнать о распространённых решениях большинства проблем в HTML / CSS / JavaScript, используйте следующие статьи:

diff --git a/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html b/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html index 0ab424414d..107fde3801 100644 --- a/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html +++ b/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html @@ -16,7 +16,7 @@ translation_of: Learn/Common_questions/set_up_a_local_testing_server Цель: -

Вы научитесь как установливать локальный тестовый сервер.

+

Вы научитесь как устанавливать локальный тестовый сервер.

@@ -26,20 +26,20 @@ translation_of: Learn/Common_questions/set_up_a_local_testing_server

На протяжении всего обучения, вы будете открывать примеры непосредственно в браузере — двойным кликом по HTML файлу, перетаскиванием файла в окно браузера, или через меню File > Open... и указывая необходимый HTML файл. Существует множество способов как это сделать.

-

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

+

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

Проблемы тестирования локальных файлов

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

    -
  • Они содержат ассинхронные запросы. Некоторые браузеры (включая Chrome) не будут запускать асинхронные запросы (см. Fetching data from the server), если вы просто запускаете пример из локального файла. Это связано с ограничениями безопасности (для получения дополнительной информации о безопасности в Интернете, ознакомьтесь с Website security).
    • +
  • Они содержат асинхронные запросы. Некоторые браузеры (включая Chrome) не будут запускать асинхронные запросы (см. Fetching data from the server), если вы просто запускаете пример из локального файла. Это связано с ограничениями безопасности (для получения дополнительной информации о безопасности в Интернете, ознакомьтесь с Website security).
  • Они имеют серверный язык. Серверные языки (например, PHP или Python) требуют специального сервера для интерпретации кода и предоставления результатов.

Запуск простого локального HTTP сервера

-

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

+

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

Для этого нужно:

@@ -51,7 +51,7 @@ translation_of: Learn/Common_questions/set_up_a_local_testing_server
  • Зайдите на python.org
  • В секции загрузок, выберите линк для Python "3.xxx".
  • Внизу страницы выберите Windows x86 executable installer и скачайте его.
    • -
  • Послезагрузки файла запустите его.
    • +
  • После загрузки файла запустите его.
  • На первой странице инсталлятора выберите чекбокс "Add Python 3.xxx to PATH".
  • Нажмите Install, затем нажмите Close когда установка закончится.
    • diff --git a/files/ru/learn/common_questions/thinking_before_coding/index.html b/files/ru/learn/common_questions/thinking_before_coding/index.html index 7d9243ac0d..f10459aee6 100644 --- a/files/ru/learn/common_questions/thinking_before_coding/index.html +++ b/files/ru/learn/common_questions/thinking_before_coding/index.html @@ -35,7 +35,7 @@ translation_of: Learn/Common_questions/Thinking_before_coding
  • Что и в каком порядке должно быть реализовано, чтобы достичь моих целей?
    • -

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

    +

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

    Активное Обучение

    @@ -169,7 +169,7 @@ translation_of: Learn/Common_questions/Thinking_before_coding

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

    -

    Во-вторых, написание плана порождает новые вопросы, которые тоже нуждаются в ответах. И, как правило, этих вопросов больше чем рассмотренно в этой статье. (К примеру, можете ли вы сделать что-то из плана самостоятельно, лучше попросить кого-то из знакомых или придётся прибегнуть к помощи третьих лиц?)

    +

    Во-вторых, написание плана порождает новые вопросы, которые тоже нуждаются в ответах. И, как правило, этих вопросов больше чем рассмотрено в этой статье. (К примеру, можете ли вы сделать что-то из плана самостоятельно, лучше попросить кого-то из знакомых или придётся прибегнуть к помощи третьих лиц?)

    Заключение

    diff --git a/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html b/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html index 2f156c3985..8bb146c8a3 100644 --- a/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html +++ b/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html @@ -77,9 +77,9 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server

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

      -
    1. Выбирите File > Site Manager... в главном меню.
      2. +
    2. Выберите File > Site Manager... в главном меню.
    3. В окне Site Manager, нажмите кнопку New Site, затем введите название сайта как demozilla в предоставленном месте.
      4. -
    4. Укражите SFTP-сервер вашего хоста в предоставленном поле: Host.
      5. +
    5. Укажите SFTP-сервер вашего хоста в предоставленном поле: Host.
    6. В раскрывающемся списке Logon Type: выберите Normal, затем введите предоставленные имя пользователя и пароль в соответствующие поля.
    7. Введите правильный порт и другую информацию.
    @@ -100,13 +100,13 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server
    • По центру левой панели вы можете видеть локальные файлы. Перейдите в каталог, в котором вы храните свой веб-сайт (например, mdn).
      • -
    • По центру правой панели вы увидете удаленные файли. Мы вошли в наш удаленный корень FTP (в данном случае: users/demozilla)
      • +
    • По центру правой панели вы увидеть удаленные файлы. Мы вошли в наш удаленный корень FTP (в данном случае: users/demozilla)
    • Вы можете пока игнорировать нижнюю и верхнюю панели. Соответственно, это журнал сообщений, показывающий состояние соединения между вашим компьютером и SFTP-сервером, и журнал в реальном времени каждого взаимодействия между вашим SFTP-клиентом и сервером.

    Загрузка на сервер

    -

    Наш пример инструкций для хостинга указывает нам следующее: "Чтобы опубликовать в Интернете, поместите свои файлы в каталог: Public/htdocs." Вам нужно перейти в указанный каталог на правой панели. Этот каталог фактически является корнем вашего веб-сайта, где находятся ваши index.html , откуда ваши файл и другие активы будуть отправлены.

    +

    Наш пример инструкций для хостинга указывает нам следующее: "Чтобы опубликовать в Интернете, поместите свои файлы в каталог: Public/htdocs." Вам нужно перейти в указанный каталог на правой панели. Этот каталог фактически является корнем вашего веб-сайта, где находятся ваши index.html , откуда ваши файл и другие активы будут отправлены.

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

    diff --git a/files/ru/learn/common_questions/what_are_hyperlinks/index.html b/files/ru/learn/common_questions/what_are_hyperlinks/index.html index 48cca09fde..2efee98239 100644 --- a/files/ru/learn/common_questions/what_are_hyperlinks/index.html +++ b/files/ru/learn/common_questions/what_are_hyperlinks/index.html @@ -37,7 +37,7 @@ original_slug: Learn/Understanding_links_on_the_web
  • {{Glossary("HTML")}}, формат документа, позволяющий встраивать гиперссылки
    • -

    Как вы видите, все в Вебе крутится вокруг документов и способах обеспечения доступа к ним. Первоначальная цель Веба заключалась в предоставлении легкого инструмента доступа к текстовым документам, их чтения и навигации по ним. С тех пор Веб эволюционировал в инструмент обеспечения доступа к изображениям, видео и бинарным данным, но все эти улучшения врядли были бы возможны без тех самых трёх китов, о которых говорил Тим. 

    +

    Как вы видите, все в Вебе крутится вокруг документов и способах обеспечения доступа к ним. Первоначальная цель Веба заключалась в предоставлении легкого инструмента доступа к текстовым документам, их чтения и навигации по ним. С тех пор Веб эволюционировал в инструмент обеспечения доступа к изображениям, видео и бинарным данным, но все эти улучшения вряд ли были бы возможны без тех самых трёх китов, о которых говорил Тим. 

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

    @@ -59,7 +59,7 @@ original_slug: Learn/Understanding_links_on_the_web
    Внутренняя ссылка
    -
    Ссылка между двумя веб-страницами, принадлежащими к одному веб-сайту. Без внутренных ссылок нет такого понятия как веб-сайт (конечно, если это не одностраничный сайт).
    +
    Ссылка между двумя веб-страницами, принадлежащими к одному веб-сайту. Без внутренних ссылок нет такого понятия как веб-сайт (конечно, если это не одностраничный сайт).
    Внешняя ссылка
    Ссылка с вашей веб-страницы на чью-либо другую веб-страницу. Без внешних ссылок не будет Веба, так как Веб — это сеть веб-страниц. Используйте внешние ссылки для того, чтобы предоставить информацию помимо той, что вы поддерживаете на вашем сайте. 
    Входящие ссылки
    diff --git a/files/ru/learn/common_questions/what_is_a_domain_name/index.html b/files/ru/learn/common_questions/what_is_a_domain_name/index.html index d5418ac073..f60b9b53cf 100644 --- a/files/ru/learn/common_questions/what_is_a_domain_name/index.html +++ b/files/ru/learn/common_questions/what_is_a_domain_name/index.html @@ -18,7 +18,7 @@ original_slug: Learn/Understanding_domain_names Необходимые знания: - Вы должны знать как работает Интернет и понимать устройтво устройство URL. + Вы должны знать как работает Интернет и понимать устройство устройство URL. Цель: @@ -31,7 +31,7 @@ original_slug: Learn/Understanding_domain_names

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

    -

    Каждый компьютер подключен к Интернету и может быть доступен через публичный {{Glossary("IP")}}-адрес, который состоит из 32 бит для IPv4 адреса (такие адреса обычно записываются в виде четырёх чисел от 0 до 255, разделённых точками (напр., 173.194.121.32) или 128 bit для IPv6 адреса (они обычно записываются в виде 8 групп по 4 шеснадцетиричных чисел, разделенных двоеточиями (напр, 2027:0da8:8b73:0000:0000:8a2e:0370:1337). Компьютеры могут легко обрабатывать эти адреса , но у живых людей уходит слишком много времени на использование таких адресов. IP-адреса также сложно запоминаются и часто меняются со временем. Для решения этой проблемы в Интернете используются человеко-читаемые адреса, называемые доменными именами.

    +

    Каждый компьютер подключен к Интернету и может быть доступен через публичный {{Glossary("IP")}}-адрес, который состоит из 32 бит для IPv4 адреса (такие адреса обычно записываются в виде четырёх чисел от 0 до 255, разделённых точками (напр.., 173.194.121.32) или 128 bit для IPv6 адреса (они обычно записываются в виде 8 групп по 4 шестнадцатеричных чисел, разделенных двоеточиями (напр., 2027:0da8:8b73:0000:0000:8a2e:0370:1337). Компьютеры могут легко обрабатывать эти адреса , но у живых людей уходит слишком много времени на использование таких адресов. IP-адреса также сложно запоминаются и часто меняются со временем. Для решения этой проблемы в Интернете используются человеко-читаемые адреса, называемые доменными именами.

    Активно изучаем

    @@ -41,7 +41,7 @@ original_slug: Learn/Understanding_domain_names

    Структура доменных имён

    -

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

    +

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

    Anatomy of the MDN domain name

    @@ -58,12 +58,12 @@ original_slug: Learn/Understanding_domain_names

    Кто владеет доменным именем?

    -

    Вы не можете “купить доменное имя”. Вы платите за право использовать доменное имя в течение одного или нескольких лет. Вы можете продлить это право и ваше продление будет иметь безусловный приоритет над заявками на домен от других желающих. Но вы никогда не владете доменным именем.

    +

    Вы не можете “купить доменное имя”. Вы платите за право использовать доменное имя в течение одного или нескольких лет. Вы можете продлить это право и ваше продление будет иметь безусловный приоритет над заявками на домен от других желающих. Но вы никогда не владеть доменным именем.

    Компании, называемые регистраторами, ведут реестры доменных имён, которые содержат техническую и административную информацию, связывающую вас и ваш домен.

    -

    Примечание: Для некоторых доменных имён регистратор может отсутстовать, реестр может не вестись. Например, все домены в зоне .fire используются компанией Amazon только в собственных нуждах.

    +

    Примечание: Для некоторых доменных имён регистратор может отсутствовать, реестр может не вестись. Например, все домены в зоне .fire используются компанией Amazon только в собственных нуждах.

    Как найти свободное доменное имя

    diff --git a/files/ru/learn/common_questions/what_is_a_url/index.html b/files/ru/learn/common_questions/what_is_a_url/index.html index 7cf4fe04d7..5c9716f463 100644 --- a/files/ru/learn/common_questions/what_is_a_url/index.html +++ b/files/ru/learn/common_questions/what_is_a_url/index.html @@ -13,7 +13,7 @@ translation_of: Learn/Common_questions/What_is_a_URL original_slug: Learn/Understanding_URLs ---
    -

    Данная статья описывает Единый локатор ресурсов или Uniform Resource Locators (URLs), объясняет, что это такое, и опиcывает его структуру. 

    +

    Данная статья описывает Единый локатор ресурсов или Uniform Resource Locators (URLs), объясняет, что это такое, и описывает его структуру. 

    @@ -37,7 +37,7 @@ original_slug: Learn/Understanding_URLs

    Активное обучение

    -

    Активного обучения пока не существует. Пожайлуста подумайте, возможно Вы сможете внести свой вклад.

    +

    Активного обучения пока не существует. Пожалуйста подумайте, возможно Вы сможете внести свой вклад.

    Подробная информация

    @@ -120,7 +120,7 @@ https://developer.mozilla.org/ru/search?q=URL
    /ru/docs/Learn
    -

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

    +

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

    diff --git a/files/ru/learn/common_questions/what_software_do_i_need/index.html b/files/ru/learn/common_questions/what_software_do_i_need/index.html index 8432ce45c3..bb0e3e1b5e 100644 --- a/files/ru/learn/common_questions/what_software_do_i_need/index.html +++ b/files/ru/learn/common_questions/what_software_do_i_need/index.html @@ -130,7 +130,7 @@ translation_of: Learn/Common_questions/What_software_do_I_need

    Просмотр веб-сайтов

    -

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

    +

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

    • Mozilla Firefox
      • @@ -141,7 +141,7 @@ translation_of: Learn/Common_questions/What_software_do_I_need

      Если вы ориентируетесь на определенную группу (например, техническую платформу или страну), возможно, вам придется протестировать ваш сайт с помощью дополнительных браузеров, таких как Opera, Konqueror, или UC Browser.

      -

      Но тестирование усложняется, потому что некоторые браузеры работают только в определенных операционных системах. Apple Safari работает на iOS и Mac OS, а Internet Explorer работает только в Windows. Поэтому лучше воспользоваться такими сервисами, как Browsershots или Browserstack. Browsershots предоставляет скриншоты вашего сайта, того как ваш сайт будет выглядить в различных браузерах. Browserstack фактически предоставляет вам полный удаленный доступ к виртуальным машинам, поэтому вы можете протестировать ваш сайт в наиболее распространенных средах. Кроме того, вы можете настроить свою собственную виртуальную машину, но это требует некоторого опыта. (Если вы следуете этому пути, Microsoft имеет инструменты для разработчиков, включая готовую к использованию виртуальую машину на modern.ie.)

      +

      Но тестирование усложняется, потому что некоторые браузеры работают только в определенных операционных системах. Apple Safari работает на iOS и Mac OS, а Internet Explorer работает только в Windows. Поэтому лучше воспользоваться такими сервисами, как Browsershots или Browserstack. Browsershots предоставляет скриншоты вашего сайта, того как ваш сайт будет выглядеть в различных браузерах. Browserstack фактически предоставляет вам полный удаленный доступ к виртуальным машинам, поэтому вы можете протестировать ваш сайт в наиболее распространенных средах. Кроме того, вы можете настроить свою собственную виртуальную машину, но это требует некоторого опыта. (Если вы следуете этому пути, Microsoft имеет инструменты для разработчиков, включая готовую к использованию виртуальную машину на modern.ie.)

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

      diff --git a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html index 174d980693..251a05fd63 100644 --- a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html +++ b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html @@ -36,7 +36,7 @@ translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects

      Блок-тень

      -

      {{cssxref("box-shadow")}} позволяет добавить одну и более тень к контейнеру. Как и text-shadow, box-shadows отлично поддерживаются брузерами, включая IE9+ и Edge. У пользователей ранних версий IE будет просто копия без тени, поэтому убедитесь, что контент с дизайном разборчив и без теней.

      +

      {{cssxref("box-shadow")}} позволяет добавить одну и более тень к контейнеру. Как и text-shadow, box-shadows отлично поддерживаются браузерами, включая IE9+ и Edge. У пользователей ранних версий IE будет просто копия без тени, поэтому убедитесь, что контент с дизайном разборчив и без теней.

      Вы можете найти примеры из стати на box-shadow.html (или в исходном коде).

      @@ -150,7 +150,7 @@ button:active {

      {{ EmbedLiveSample('Другие_опции_блок-теней', '100%', 70) }}

      -

      Мы стилизовали кнопку с помощью состояний focus, hover и active. Для кнопки по умолчанию установлены несколько простых чёрных теней плюс пара внутренних теней в противополжном углу кнопки для эстетичности.

      +

      Мы стилизовали кнопку с помощью состояний focus, hover и active. Для кнопки по умолчанию установлены несколько простых чёрных теней плюс пара внутренних теней в противоположном углу кнопки для эстетичности.

      При нажатии на кнопку первая тень становится внутренней, чтобы создать ощущение нажатия кнопки.

      @@ -302,14 +302,14 @@ article div:last-child {

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

      -

      Примечание: В Firefox Вы можеет использовать Инспектор фигур, чтобы редактировать фигуры.

      +

      Примечание: В Firefox Вы можете использовать Инспектор фигур, чтобы редактировать фигуры.

      Значение circle() — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте Обзор CSS-фигур на MDN.)

      -webkit-background-clip: text

      -

      Функция, о которой мы, кажется, упомянули в свйстве text для значения {{cssxref("background-clip")}}. Опция -webkit-text-fill-color: transparent; позволяет обрезать фоновые изображения под форму текста. Это неофициальный стандарт, но он был подключён во множестве браузеров. В данном контексте обязательно используется префикс -webkit- для любых браузеров:

      +

      Функция, о которой мы, кажется, упомянули в свойстве text для значения {{cssxref("background-clip")}}. Опция -webkit-text-fill-color: transparent; позволяет обрезать фоновые изображения под форму текста. Это неофициальный стандарт, но он был подключён во множестве браузеров. В данном контексте обязательно используется префикс -webkit- для любых браузеров:

      .text-clip {
   -webkit-background-clip: text;
diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
index c0e52dd232..861ec6f884 100644
--- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
+++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
@@ -32,7 +32,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
 
 
      Стилизация фона в CSS
      
 
-
      CSS cвойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство background в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.
      
+
      CSS свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство background в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.
      
 
 
      .box {
   background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
diff --git a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html
index 5d29314cea..dd52f08276 100644
--- a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html
+++ b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -51,7 +51,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
 
 
      Специфичность
      
 
-
      Cпецифичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. Различные типы селекторов ( селекторы элементов h1{...}, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность. По существу, это мера того, насколько специфическим будет отбор по селектору:
      
+
      Специфичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. Различные типы селекторов ( селекторы элементов h1{...}, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность. По существу, это мера того, насколько специфическим будет отбор по селектору:
      
 
 
        
  
      • Селектор элементов ( например h1 ) менее специфичен — он выберет все элементы этого типа на странице — поэтому получит меньше баллов.
        • 
@@ -74,7 +74,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
 
 
        {{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 
        
 
-
        Некоторые свойства не наследуются — например, если вы установили для элемента {{cssxref("width")}} равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы черезвычайно трудно использовать!
        
+
        Некоторые свойства не наследуются — например, если вы установили для элемента {{cssxref("width")}} равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы чрезвычайно трудно использовать!
        
 
 
        
 
        Примечание: На страницах справочника CSS свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: color property Specifications section.
        
@@ -90,7 +90,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
 
 
        Понимание наследования
        
 
-
        Итак, наследование. В примере ниже мы имеем {{HTMLElement("ul")}} с двумя уровнями неупорядоченных списков, вложенных в него. Мы устанавили для внешнего <ul> стиль границы, внутренние отступы и цвет шрифта.
        
+
        Итак, наследование. В примере ниже мы имеем {{HTMLElement("ul")}} с двумя уровнями неупорядоченных списков, вложенных в него. Мы установили для внешнего <ul> стиль границы, внутренние отступы и цвет шрифта.
        
 
 
        Цвет шрифта применён к прямому потомку, но также и к непрямому потомку — к прямому потомку <li> и к элементам внутри первого вложенного списка. Далее мы добавили класс special ко второму вложенному списку и применили к нему другой цвет шрифта. Теперь это свойство наследуется всеми его потомками.
        
 
diff --git a/files/ru/learn/css/building_blocks/cascade_tasks/index.html b/files/ru/learn/css/building_blocks/cascade_tasks/index.html
index d4f7440cb8..b7580f53e0 100644
--- a/files/ru/learn/css/building_blocks/cascade_tasks/index.html
+++ b/files/ru/learn/css/building_blocks/cascade_tasks/index.html
@@ -40,7 +40,7 @@ original_slug: Learn/CSS/Building_blocks/Каскад_задачи
 
        Если вы хотите, чтобы вашу работу оценили, или вы зашли в тупик и хотите попросить о помощи:
        
 
 
          
- 
        1. Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, CodePen, jsFiddle или Glitch. Вы можете сами написать код или использвать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.
          2. 
+ 
        2. Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, CodePen, jsFiddle или Glitch. Вы можете сами написать код или использовать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.
          3. 
  
        3. Напишите сообщение с просьбой оценить и/или помочь на форуме в категории "Обучение": MDN Discourse forum Learning category. Ваше сообщение должно включать:
   
            
    
          • Описательный заголовок, например, "Необходима оценка для теста 1 Каскад" ("Assessment wanted for Cascade skill test 1").
            • 
diff --git a/files/ru/learn/css/building_blocks/debugging_css/index.html b/files/ru/learn/css/building_blocks/debugging_css/index.html
index 1e78277f4b..ceb299bcab 100644
--- a/files/ru/learn/css/building_blocks/debugging_css/index.html
+++ b/files/ru/learn/css/building_blocks/debugging_css/index.html
@@ -138,7 +138,7 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS
 
 
            Поддерживаются ли свойство и значение браузером в котором вы тестируете?
            
 
-
            Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не "сломается", кроме того, что тот CSS не будет применен. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение "подсетки" (subgrid) {{cssxref("grid-template-columns")}}.
            
+
            Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не "сломается", кроме того, что тот CSS не будет применен. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение "подсветки" (subgrid) {{cssxref("grid-template-columns")}}.
            
 
 
            Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.
            
 
diff --git a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html
index 36f4767e10..2e47ff1cdf 100644
--- a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html
+++ b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html
@@ -8,7 +8,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
 
 
            {{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
            
 
-
            Вы многое прошли в этом модуле, и должно быть вас посетило это прекрасное чувство, что дошли до конца! Последний шаг перед тем, как двигаться дальше, это попытка пройти проверку по материалам модуля — это включает в себя ряд соответствующих упражнений, которые должны быть выполнены для того, чтобы создать заключительный проект — визитка, карточка игрока, профиль в социльной сети.
            
+
            Вы многое прошли в этом модуле, и должно быть вас посетило это прекрасное чувство, что дошли до конца! Последний шаг перед тем, как двигаться дальше, это попытка пройти проверку по материалам модуля — это включает в себя ряд соответствующих упражнений, которые должны быть выполнены для того, чтобы создать заключительный проект — визитка, карточка игрока, профиль в социальной сети.
    diff --git a/files/ru/learn/css/building_blocks/images_media_form_elements/index.html b/files/ru/learn/css/building_blocks/images_media_form_elements/index.html index 481cd28b58..21896e3f92 100644 --- a/files/ru/learn/css/building_blocks/images_media_form_elements/index.html +++ b/files/ru/learn/css/building_blocks/images_media_form_elements/index.html @@ -57,7 +57,7 @@ translation_of: Learn/CSS/Building_blocks/Images_media_form_elements

    Вы также можете попробовать значение fill, которое будет заполнять блок, но при этом не сохранять соотношение сторон.

    -

    Замещаемые элемнты в верстке

    +

    Замещаемые элементы в верстке

    При использовании различных методов верстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.

    @@ -127,7 +127,7 @@ textarea {

    Другие полезные настройки

    -

    В дополние к правилам отмеченых выше, вы должны также установить overflow: auto для <textarea> чтобы IE не отображал полосу прокрутки, когда в этом нет необходимости:

    +

    В дополнение к правилам отмеченных выше, вы должны также установить overflow: auto для <textarea> чтобы IE не отображал полосу прокрутки, когда в этом нет необходимости:

    textarea {
   overflow: auto;
diff --git a/files/ru/learn/css/building_blocks/index.html b/files/ru/learn/css/building_blocks/index.html
index 8f071e3f62..8f2b09449c 100644
--- a/files/ru/learn/css/building_blocks/index.html
+++ b/files/ru/learn/css/building_blocks/index.html
@@ -52,7 +52,7 @@ translation_of: Learn/CSS/Building_blocks
  
    Блоки в CSS
    
  
    Всё в CSS имеет форму блока, и понимание блоков позволяет Вам размещать элементы с помощью CSS или согласовывать их друг с другом. В этом уроке мы как следует рассмотрим CSS-блоки.
    
  
    Фон и границы
    
- 
    В этом уроке мы рассмотрим всякие интересные вещи, котроые Вы можете делать благодаря CSS-фонам и границам, — от добавления градиетнов и фоновых изображений до скругления углов, фонов и границ.
    
+ 
    В этом уроке мы рассмотрим всякие интересные вещи, которые Вы можете делать благодаря CSS-фонам и границам, — от добавления градиентов и фоновых изображений до скругления углов, фонов и границ.
    
  
    Изменение направления текста
    
  
    Раньше CSS развивался, чтобы лучше поддерживать разные режимы написания, включая справа налево или сверху вниз (как в японском языке). Мы рассмотрим их в этой статье.
    
  
    Перекрытие содержимого
    
diff --git a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html
index 3ac93f2012..de2d540a59 100644
--- a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html
@@ -69,7 +69,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors
 
 
      
  
    • Используя li[class], мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.
      • 
- 
    • li[class="a"] выбирает селектор с классом a, но не селектор с классом a в сочетании с другим, отделённым запятой, классом как частью зачения. Он выбирает второй пункт списка.
      • 
+ 
    • li[class="a"] выбирает селектор с классом a, но не селектор с классом a в сочетании с другим, отделённым запятой, классом как частью значения. Он выбирает второй пункт списка.
      • 
  
    • li[class~="a"] выберет класс a, а также значение, которое содержит класс a как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.
      • 
 
    
 
@@ -77,7 +77,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors
 
 
    Селекторы вхождения подстроки
    
 
-
    Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со стороки "box-", вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).
    
+
    Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со строки "box-", вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).
    diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.html b/files/ru/learn/css/building_blocks/selectors/combinators/index.html index 89cab04833..c5dcf8b0c1 100644 --- a/files/ru/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.html @@ -37,13 +37,13 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators

    Дочерний комбинатор

    -

    Дочерний комбинатор (>) помещается между двумя селекорами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <p>, которые являются дочерними элементами <article>, селетор пишется так:

    +

    Дочерний комбинатор (>) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <p>, которые являются дочерними элементами <article>, селектор пишется так:

    article > p

    Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <li>, которые являются прямыми потомками <ul>, и присвоить им верхнюю границу красного цвета.

    -

    Если вы уберёте символ >, указывающий на то, что это селектор с дочерним комбинатором, селетор превратится в селектор всех потомков (комбинатор - пробел) и все элементы <li> получат верхнюю границу красного цвета.

    +

    Если вы уберёте символ >, указывающий на то, что это селектор с дочерним комбинатором, селектор превратится в селектор всех потомков (комбинатор - пробел) и все элементы <li> получат верхнюю границу красного цвета.

    {{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

    diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html index b52ba93b52..dc1eae6b95 100644 --- a/files/ru/learn/css/building_blocks/selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/index.html @@ -35,7 +35,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы

    Что такое селекторы?

    -

    Вы уже встерчались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.

    +

    Вы уже встречались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.

    Some code with the h1 highlighted.

    diff --git a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html index 2d54a6bde3..6e182420c8 100644 --- a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -80,7 +80,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Se

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

    -

    В примере ниже у нас есть <div>, содержащий примечание. Серая граница применятеся когда блок имеет класс notebox. Если у блока есть также класс warning или danger, мы меняем {{cssxref("border-color")}}.

    +

    В примере ниже у нас есть <div>, содержащий примечание. Серая граница применяется когда блок имеет класс notebox. Если у блока есть также класс warning или danger, мы меняем {{cssxref("border-color")}}.

    Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему <div> не применён ни один стиль, так как он имеет только класс danger; ему нужен ещё и класс notebox, чтобы получить какую-нибудь стилизацию.

    diff --git a/files/ru/learn/css/building_blocks/styling_tables/index.html b/files/ru/learn/css/building_blocks/styling_tables/index.html index 4c39633b30..2dafd6f79b 100644 --- a/files/ru/learn/css/building_blocks/styling_tables/index.html +++ b/files/ru/learn/css/building_blocks/styling_tables/index.html @@ -28,7 +28,7 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables

    Типичная HTML таблица

    -

    Давайте начнем с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идет о обуви, погоде или сотрудниках; мы решили сделать этоболее интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:

    +

    Давайте начнем с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идет о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:

    <table>
   <caption>A summary of the UK's most famous punk bands</caption>
@@ -82,7 +82,7 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables
 
    В этой части обучения мы будем работать над тем чтобы стилизовать наш пример таблицы.
    
 
 
      
- 
    1. В начале неоюходимо сделать копию sample markup, загрузить оба изображения (noise и leopardskin), и вставить эти файлы в отдельную папку на вашем компьютере.
      2. 
+ 
    2. В начале необходимо сделать копию sample markup, загрузить оба изображения (noise и leopardskin), и вставить эти файлы в отдельную папку на вашем компьютере.
      3. 
  
    3. Следующее, это создать новый файл style.css и сохранить его в той же папке вместе с другими файлами.
      4. 
  
    4. Подключить CSS в HTML для этого разместить следующую строку в HTML внутри {{htmlelement("head")}}:
   
      <link href="style.css" rel="stylesheet" type="text/css">
      
@@ -125,9 +125,9 @@ th, td {
 
      Наиболее важные части следующие:
      
 
 
        
- 
      • Свойство {{cssxref("table-layout")}} со значением fixed как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда table-layout: fixed, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора thead th:nth-child(n) ({{cssxref(":nth-child")}}) ("Выберите n-ый дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине ее заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматиривает эту технику в статье Fixed Table Layouts.
        
+ 
      • Свойство {{cssxref("table-layout")}} со значением fixed как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда table-layout: fixed, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора thead th:nth-child(n) ({{cssxref(":nth-child")}}) ("Выберите n-ый дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине ее заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье Fixed Table Layouts.
        
   
        
-  Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет озывчивой (хотя для этого потребуется еще некоторая работа для правильного отображнения на экранах небольших размеров).
        • 
+  Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется еще некоторая работа для правильного отображения на экранах небольших размеров).
  
      • Свойство {{cssxref("border-collapse")}} со значением collapse это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить border-collapse: collapse;  рамки схлопываются в одну и так выглядит намного лучше: 
        • 
  
      • Мы установили {{cssxref("border")}} вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.
        • 
  
      • Мы установили {{cssxref("padding")}} на элементах {{htmlelement("th")}} и {{htmlelement("td")}} — это создает в талице воздух, который позволяет ей дышать, делая ее более понятной.
        • 
@@ -141,7 +141,7 @@ th, td {
 
 
        Теперь мы еще кое-что изменим.
        
 
-
        Во-первых, мы пойдем и найдем на Google Fonts шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотит, тогда вам понадобится заменить представленный {{htmlelement("link")}} элемент и изменить объявление {{cssxref("font-family")}} на выбраный вами Google Fonts шрифт.
        
+
        Во-первых, мы пойдем и найдем на Google Fonts шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный {{htmlelement("link")}} элемент и изменить объявление {{cssxref("font-family")}} на выбранный вами Google Fonts шрифт.
        
 
 
        Добавьте элемент {{htmlelement("link")}} в блок head вашего HTML, на строчку выше существующего элемента <link>:
        
 
@@ -210,7 +210,7 @@ thead th, tfoot th, tfoot td {
 
 
        Мы добавили {{cssxref("background-image")}} в {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и изменили {{cssxref("color")}} для всего текста внутри header и footer на белый (и еще {{cssxref("text-shadow")}}) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.
        
 
-
        Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания легкой приятной текстуры, а также установили этим элементамяркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают несколько фоновых изображений и линейные градиенты.
        
+
        Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания легкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают несколько фоновых изображений и линейные градиенты.
        
 
 
        Полосатая зебра
        
 
@@ -233,16 +233,16 @@ table {
 }
      -
    • Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательноость элементов. Так формула 2n-1 выберет все нечетные дочерние элементы (1, 3, 5 и т.д.), а формула 2n выберет все четные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова odd и even, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем четным и нечетным строкам разные (яркие) цвета.
      • +
    • Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула 2n-1 выберет все нечетные дочерние элементы (1, 3, 5 и т.д.), а формула 2n выберет все четные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова odd и even, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем четным и нечетным строкам разные (яркие) цвета.
    • Еще мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный .png с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.
      • -
    • И наконец мы установили для таблицы сплошной цвет фона, котрый обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор :nth-child.
      • +
    • И наконец мы установили для таблицы сплошной цвет фона, который обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор :nth-child.

    Этот взрыв цвета выглядит следующим образом:

    -

    То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и акдемической.

    +

    То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и академической.

    Стилизация заголовка

    @@ -264,7 +264,7 @@ table {

    Активное обучение: Стилизация вашей собственной таблицы

    -

    Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то зачительно более стильное и менее безвкусное чем наша таблица.

    +

    Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то значительно более стильное и менее безвкусное чем наша таблица.

    Стилизация таблицы быстрые советы

    @@ -272,7 +272,7 @@ table {
    • Сделайте свою разметку простой и гибкой, например, используя для этого проценты, что сделает дизайн более отзывчивым.
      • -
    • Используйте {{cssxref("table-layout")}}: fixed для более понятного поведения разметки, при этомлегко установить ширину столбцов, установив ширину {{cssxref("width")}} для заголовков таблицы ({{htmlelement("th")}}).
      • +
    • Используйте {{cssxref("table-layout")}}: fixed для более понятного поведения разметки, при этом легко установить ширину столбцов, установив ширину {{cssxref("width")}} для заголовков таблицы ({{htmlelement("th")}}).
    • Используйте {{cssxref("border-collapse")}}: collapse, которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.
    • Используйте {{htmlelement("thead")}}, {{htmlelement("tbody")}} и {{htmlelement("tfoot")}} чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это дает возможность накладывать стили друг на друга, если это необходимо.
    • Используйте полоски зебры, чтобы облегчить чтение между строк.
      • 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 74a40b9a33..27f451d650 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 @@ -8,7 +8,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model ---
      {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
      -
      Каждый элемент в CSS заключён в коробку (английское "box") и понимание поведения этих коробок — это ключ к умению создавать макеты с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы рассмотрим надлежащим образом коробочную модель CSS, так, чтобы вы могли решать более сложные здачи построения макетов, понимая, как она работает, и терминологию, которая к ней относится.
      +
      Каждый элемент в CSS заключён в коробку (английское "box") и понимание поведения этих коробок — это ключ к умению создавать макеты с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы рассмотрим надлежащим образом коробочную модель CSS, так, чтобы вы могли решать более сложные задачи построения макетов, понимая, как она работает, и терминологию, которая к ней относится.
      @@ -66,7 +66,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model

      Однако, мы можем изменить внутренний тип отображения, используя такие значения display как flex. Если мы установим display: flex; для элемента, внешний тип отображения примет значение block, но внутренний тип изменится на flex. Любые прямые дочерние элементы этой коробки станут гибкими (flex) объектами и будут размещены в соответствии с правилами, изложенными в спецификации Flexbox, о которой вы узнаете позже.

      -

      Примечание: Чтобы узнать больше о значениях display, и о том, как работают коробки при блочном или строчном расположении, посмотрите руководство MDN Блочное и cтрочное расположение.

      +

      Примечание: Чтобы узнать больше о значениях display, и о том, как работают коробки при блочном или строчном расположении, посмотрите руководство MDN Блочное и срочное расположение.

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

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

      В примере ниже, вы можете видеть 2 объекта. Оба имеют класс .box, который дает им одинаковые параметры width, height, margin, border, и padding. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.

      -

      Можете ли вы изменить размер второго объекта (добавляя CSS в класс .alternate) чтобы ишрина и высота совпали с первым блоком?

      +

      Можете ли вы изменить размер второго объекта (добавляя CSS в класс .alternate) чтобы ширина и высота совпали с первым блоком?

      {{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} 

      @@ -209,9 +209,9 @@ translation_of: Learn/CSS/Building_blocks/The_box_model

      {{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} 

      -

       Cхлопывание margin 

      +

       Схлопывание margin 

      -

      Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания полей. Если у вас есть два элемента, поля которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба зничения негативны, то сумма отрицательнных значений будет вычтена из общей суммы.

      +

      Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания полей. Если у вас есть два элемента, поля которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба значения негативны, то сумма отрицательных значений будет вычтена из общей суммы.

      В примере ниже имеется два абзаца. Первый абзац имеет ширину margin-bottom  50 пикселей. Ширина второго параграфа — margin-top 30 пикселей. Поля схлопываются так, что в результате  margin между двумя блоками составляет 50 пикселей, а не сумму значений отдельных значений margin.

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

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

      -

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

      +

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

      Вы можете установить ширину, стиль или цвет всех четырех границ сразу используя {{cssxref("border")}} свойства.

      @@ -238,7 +238,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
    • {{cssxref("border-left")}}
    -

    Для утановки ширины, стиля или цвета всех границ используйте:

    +

    Для установки ширины, стиля или цвета всех границ используйте:

    • {{cssxref("border-width")}}
      • @@ -302,7 +302,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
      • Применяются свойства width и height.
        • -
      • Использование padding, margin и border приведёт к тому, что другие элементы будут отодвинуты от нашего элемена.
        • +
      • Использование padding, margin и border приведёт к тому, что другие элементы будут отодвинуты от нашего элемента.

      Он не прервётся на новую строку и станет больше, чем его содержимое, только если вы явно не укажите свойства width и height.

      diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.html b/files/ru/learn/css/building_blocks/values_and_units/index.html index 7aa0744ad9..d64426b99e 100644 --- a/files/ru/learn/css/building_blocks/values_and_units/index.html +++ b/files/ru/learn/css/building_blocks/values_and_units/index.html @@ -22,7 +22,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units

      Что такое значение CSS?

      -

      В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например <color> или <length>. Если вы видите значение <color> как действительное для определенного свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечисленно на странице <color>.

      +

      В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например <color> или <length>. Если вы видите значение <color> как действительное для определенного свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице <color>.

      Note: You'll also see CSS values referred to as data types. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.

      @@ -146,7 +146,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units
    - + @@ -273,7 +273,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units

    И снова, попробуйте изменить значения, чтобы посмотреть, как варьируют цвета.

    -

    RGB и RGBA зачения

    +

    RGB и RGBA значения

    Третья схема, о которой мы здесь поговорим это RGB. Значения RGB это функция — rgb() — которой дается три параметра представляющих каналы красного, зеленого и синего значений цветов, во многом так же, как hex-значения. Отличие с RGB является то, что каждый канал представлен не двумя hex-цифрами, а десятичным числом между 0 и 255 — что отчасти проще в понимании.

    diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html index fcb1840af7..324f802c37 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.html +++ b/files/ru/learn/css/css_layout/flexbox/index.html @@ -90,7 +90,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox

    Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера.

    -

    Примечание: Вы можете также распологать flex элементы в обратном направлении, используя значения row-reverse и column-reverse. Попробуйте их тоже!

    +

    Примечание: Вы можете также располагать flex элементы в обратном направлении, используя значения row-reverse и column-reverse. Попробуйте их тоже!

    Перенос строк

    diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html index 4c4914cbe9..86ff3ac15d 100644 --- a/files/ru/learn/css/css_layout/floats/index.html +++ b/files/ru/learn/css/css_layout/floats/index.html @@ -77,7 +77,7 @@ translation_of: Learn/CSS/CSS_layout/Floats padding: 1em; } -

    Если вы сохраните и обнавите сейчас, то вы увидите нечто похожее на следующее:

    +

    Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на следующее:

    ЕдиницаОтосительна кОтносительна к
    -

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

    +

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

    • Нормальный поток
      • @@ -57,7 +57,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction

      Заметьте, что HTML элементы здесь отображаются точно в таком порядке, как и в исходном коде — первый параграф, за ним неупорядоченный список, затем второй параграф.

      -

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

      +

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

      Примечание: Направление, в котором отображается содержимое блока, называется Block Direction. Block Direction вертикально в языках типа Английского, имеющих горизонтальное направление письма. В языках, типа Японского, имеющих вертикальное направление письма, Block Direction горизонтально. Соответствующее Inline Direction отвечает за  направление отображения строковых элементов (таких как предложение).

      @@ -68,10 +68,10 @@ translation_of: Learn/CSS/CSS_layout/Introduction

      Методы CSS, которыми вы можете управлять разметкой элементов:

        -
      • Свойство {{cssxref("display")}} — Стандартные значениея  block, inline или inline-block могут изменять поведение элементов в обычном потоке (см.подробнее Types of CSS boxes). Также можно менять сами методы разметки такими значениями свойства display, как CSS Grid или Flexbox.
        • +
      • Свойство {{cssxref("display")}} — Стандартные значения  block, inline или inline-block могут изменять поведение элементов в обычном потоке (см.подробнее Types of CSS boxes). Также можно менять сами методы разметки такими значениями свойства display, как CSS Grid или Flexbox.
      • Floats — Применение значения {{cssxref("float")}} типа left может заставить элемент блочного типа "прилепить" содержимое к одной стороне элемента, как иногда изображения обволакиваются текстом на газетных страницах.
      • Свойство {{cssxref("position")}} — Позволяет точно контролировать положение блоков внутри других блоков. static позиционирование является стандартным, но также можно применять другие значения свойства, например фиксированное в углу экрана.
        • -
      • Макет Таблицы — свойства для разметки таблиц могут быть использованы и для нетабличных элеметов, с помощью display: table и соотвествующих свойств.
        • +
      • Макет Таблицы — свойства для разметки таблиц могут быть использованы и для нетабличных элементов, с помощью display: table и соответствующих свойств.
      • Multi-column layout — Многоколоночный макет поможет расположить содержимое столбцами, как в газетах.
      @@ -122,7 +122,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction

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

      -

      В качестве простого примера, добавим свойство {{cssxref("flex")}}  ко всем дочерним элементам, со значением 1. Это заставит все элементы растянуться и заполнить контейнер, не оставляя свободного места в конце строки. Если освободится дополнительное пространство, элементы растянутся; если доступное местро убавится - элементы сожмутся. Также, если вы добавите дополнительный элемент, остальные элементы  станут меньше, для того, чтобы все они были одного размера.

      +

      В качестве простого примера, добавим свойство {{cssxref("flex")}}  ко всем дочерним элементам, со значением 1. Это заставит все элементы растянуться и заполнить контейнер, не оставляя свободного места в конце строки. Если освободится дополнительное пространство, элементы растянутся; если доступное место убавится - элементы сожмутся. Также, если вы добавите дополнительный элемент, остальные элементы  станут меньше, для того, чтобы все они были одного размера.

    -

    Замечание: Перемещение фокуса по странице обычно осуществялется клавишей "tab", но не везде. Например в Safari циклический переход между ссылками на странице осуществляется по усмолчанию комбинацией Option+Tab.

    +

    Замечание: Перемещение фокуса по странице обычно осуществляется клавишей "tab", но не везде. Например в Safari циклический переход между ссылками на странице осуществляется по умолчанию комбинацией Option+Tab.

    Виджет в активном состоянии когда:
    @@ -51,7 +51,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets
    • пользователь кликает на него
    • пользователь нажимает клавишу Tab, и он получает фокус
      • -
    • виджет был в развернутом состоянии и позователь кликает на виджет.
      • +
    • виджет был в развернутом состоянии и пользователь кликает на виджет.
    Виджет в развернутом состоянии:
    @@ -81,9 +81,9 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets
  • когда курсор мыши находится над вариантом, он подсвечен и ранее подсвеченный вариант возвращается в его обычное состояние
    • -

    Для нашего примера остановимся на этом; но, если вы внимательный читатель, вы заметите, что некоторые реакции отсутствуют. Например, как вы думаете, что произойдет если пользователь нажмет клавишу "tab" когда виджет в развернутом состоянии? Ответом будет... ничего. OK, правильная реакция кажется очевидной, но поскольку она не определена в наших спецификациях, то очень легко пропустить реализацию этой реакции. Это особенно верно для командной работы, когда те, кто опеределяет какими должны быть реакции виджета сами не реализуют их.

    +

    Для нашего примера остановимся на этом; но, если вы внимательный читатель, вы заметите, что некоторые реакции отсутствуют. Например, как вы думаете, что произойдет если пользователь нажмет клавишу "tab" когда виджет в развернутом состоянии? Ответом будет... ничего. OK, правильная реакция кажется очевидной, но поскольку она не определена в наших спецификациях, то очень легко пропустить реализацию этой реакции. Это особенно верно для командной работы, когда те, кто определяет какими должны быть реакции виджета сами не реализуют их.

    -

    Другой забавный пример: что произойдет, если пользователь нажмет клавишу вверх или вниз когда виджет находитися в развернутом состоянии? Это немного сложнее. Если вы предположите, что активное и развернутое состояние полностью различны, то ответом снова будет "ничего не произойдет" , потому что мы не определили никаких взаимодействий с клавиатурой в открытом состоянии. С другой стороны, если вы предположите, что активное и развернутое состояние немного похожи, значение может изменится, но выбранный вариант точно не будет соответственно подсвечен, опять же потому, что мы не определили никаких действий с клавиатуры над вариантами когда виджет находится в развернутом состоянии (мы определили только то, что произойдет, когда виджет развернется, но ничего более).

    +

    Другой забавный пример: что произойдет, если пользователь нажмет клавишу вверх или вниз когда виджет находится в развернутом состоянии? Это немного сложнее. Если вы предположите, что активное и развернутое состояние полностью различны, то ответом снова будет "ничего не произойдет" , потому что мы не определили никаких взаимодействий с клавиатурой в открытом состоянии. С другой стороны, если вы предположите, что активное и развернутое состояние немного похожи, значение может изменится, но выбранный вариант точно не будет соответственно подсвечен, опять же потому, что мы не определили никаких действий с клавиатуры над вариантами когда виджет находится в развернутом состоянии (мы определили только то, что произойдет, когда виджет развернется, но ничего более).

    В нашем примере пропущенные спецификации очевидны, так что мы с ними справимся, но это может стать реальной проблемой для новых экзотических виджетов, когда никто не имеет ни малейшего представления о том как они должны реагировать. Всегда лучше потратить время на этом этапе дизайна, потому что если вы плохо определите, или забудете определить реакцию виджета, то будет очень сложно изменять ее, когда пользователи уже привыкнут. Если у вас есть сомнения - спросите мнения у окружающих, и, если позволяет бюджет,  не стесняйтесь выполнять пользовательские тесты. Этот процесс называется UX Design (Дизайн взаимодействия с пользователем). Если вы хотите узнать больше об этой теме, вам следует посетить следующие полезные ресурсы:

    @@ -102,7 +102,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets

    Теперь, когда основной функционал виджета определен, пора начать создание виджета. Первым делом определим его HTML структуру и придадим основную семантику. Вот все что нам нужно чтобы переделать элемент {{HTMLElement("select")}}:

    <!-- Это основной контейнер для нашего виджета.
-     Аттрибут tabindex позволяет пользователю переместить фокус на виджет.
+     Атрибут tabindex позволяет пользователю переместить фокус на виджет.
      Позже мы увидим, что лучше его установить через JavaScript. -->
 <div class="select" tabindex="0">
 
@@ -123,7 +123,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets
 
 </div>
    -

    Обратите внимание на использование имен классов: они описывают каждый соответствующий элемет независимо от фактически используемых базовых элементов HTML. Важно быть уверенными что нам не придется жестко привязывать наши CSS и JavaScript к HTML структуре,тогда мы сможем позже вносить изменения не нарушая код виджета. Например, если вы захотите создать эквивалент элемента {{HTMLElement("optgroup")}}.

    +

    Обратите внимание на использование имен классов: они описывают каждый соответствующий элемент независимо от фактически используемых базовых элементов HTML. Важно быть уверенными что нам не придется жестко привязывать наши CSS и JavaScript к HTML структуре,тогда мы сможем позже вносить изменения не нарушая код виджета. Например, если вы захотите создать эквивалент элемента {{HTMLElement("optgroup")}}.

    Создание внешнего вида с помощью CSS

    @@ -176,7 +176,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets

    Украшательства

    -

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

    +

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

    .select {
   /* Все размеры будут выражены в em по соображениям удобства
@@ -278,7 +278,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets
   background: #f0f0f0;
 }
    -

    Для вариантов нам нужно добавить класс highlight чтобы сделать возможным индентифицировать значение которе пользователь выберет (или выбрал).

    +

    Для вариантов нам нужно добавить класс highlight чтобы сделать возможным идентифицировать значение которе пользователь выберет (или выбрал).

    .select .option {
   padding: .2em .3em; /* 2px 3px */
@@ -332,7 +332,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets
  
  • Скрипт не загружается. Это один из самых распространенных случаев, особенно в мобильном мире, где сеть не очень надежная.
    • 
  
  • Скрипт глючит.Вы должны всегда учитывать эту возможность.
    • 
  
  • Скрипт конфликтует со сторонним скриптом. Это может случиться со скриптами отслеживания или любыми букмарклетами (bookmarklets), которые использует пользователь.
    • 
- 
  • Скрипт конфликтует с расширением браузера или зависит от него (такими как расширение NoScript в Firefox, или расширенние NotScripts в Chrome).
    • 
+ 
  • Скрипт конфликтует с расширением браузера или зависит от него (такими как расширение NoScript в Firefox, или расширение NotScripts в Chrome).
    • 
  
  • Пользователь использует устаревший браузер, и одна из требуемых функций не поддерживается. Это часто случается, когда вы используете передовые API.
    • 
 
 
@@ -556,7 +556,7 @@ window.addEventListener('load', function () {
   });
 });
    -

    В этот момент наш виджет будет изменятт состояние в соответствии с нашим дизайном, но не будет обновлять его значение. С этим мы разберемся дальше.

    +

    В этот момент наш виджет будет изменять состояние в соответствии с нашим дизайном, но не будет обновлять его значение. С этим мы разберемся дальше.

    @@ -580,7 +580,7 @@ window.addEventListener('load', function () {

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

    -

    Как было показано ранее, у нас есть стандартный виджет {{HTMLElement("select")}} в качестве запасного варианта для повышения доступности; поэтому мы просто синхронизируем его значение с нашим собственнным виджетом:

    +

    Как было показано ранее, у нас есть стандартный виджет {{HTMLElement("select")}} в качестве запасного варианта для повышения доступности; поэтому мы просто синхронизируем его значение с нашим собственным виджетом:

    // Эта функция обновляет отображенное значение и синхронизирует его со стандартным виджетом
 // Ей передается два параметра:
@@ -619,7 +619,7 @@ function getIndex(select) {
   return nativeWidget.selectedIndex;
 };
    -

    Исползуя эти две функции мы можем связать стандартный виджет с пользовательским:

    +

    Используя эти две функции мы можем связать стандартный виджет с пользовательским:

    // Мы обрабатываем привязку события при загрузке документа.
 window.addEventListener('load', function () {
@@ -663,7 +663,7 @@ window.addEventListener('load', function () {
   });
 });
    -

    В приведенном выше коде стоить отметить совйство tabIndex. Использование этого свойства необходимо чтобы стандартный виджет никогда не получил фокус, и чтобы убедиться, что наш пользовательский виджет получает фокус когда пользователь использует клавиатуру или мышь.

    +

    В приведенном выше коде стоить отметить свойство tabIndex. Использование этого свойства необходимо чтобы стандартный виджет никогда не получил фокус, и чтобы убедиться, что наш пользовательский виджет получает фокус когда пользователь использует клавиатуру или мышь.

    С этим мы закончили! Вот результат:

    @@ -687,24 +687,24 @@ window.addEventListener('load', function () {

    Делаем доступным

    -

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

    +

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

    К счастью существует решение, и оно называется ARIA. ARIA - аббревиатура для "Accessible Rich Internet Application" (Доступное всем интернет приложение), и представляет собой W3C спецификацию специально разработанную для того, что мы здесь делаем: делаем веб приложения и пользовательские виджеты ассистивными (доступными для людей с ограниченными возможностями). В основном, это набор атрибутов, которые расширяют HTML, чтобы мы смогли лучше описать роли, состояния и свойства, так что только что изобретенный элемент выглядит как будто он был тем стандартным, за которого он себя выдает. Использовать эти атрибуты очень просто, поэтому давайте сделаем это.

    -

    Аттрибут role

    +

    Атрибут role

    -

    Ключевой аттрибут используемый в ARIA - это role. Аттрибут role принимает значение, определяющее для чего используется элемент. Каждая роль определяет свои собственные требования и поведение. В нашем примере мы используем роль listbox. Это "составная роль" ("composite role"), т.е. элементы такой роли имеют потомков, у каждого из которых есть отдельная роль (в данном случае, как минимум один дочерний элемент с ролью option).

    +

    Ключевой атрибут используемый в ARIA - это role. Атрибут role принимает значение, определяющее для чего используется элемент. Каждая роль определяет свои собственные требования и поведение. В нашем примере мы используем роль listbox. Это "составная роль" ("composite role"), т.е. элементы такой роли имеют потомков, у каждого из которых есть отдельная роль (в данном случае, как минимум один дочерний элемент с ролью option).

    -

    Стоит также отметить что ARIA определяет роли, которые по умолчанию применяются к стандартной разметке HTML. Например, элемент {{HTMLElement("table")}} соответствует роли grid, а элемент {{HTMLElement("ul")}} соответствует роли list. Так как мы используем элемент {{HTMLElement("ul")}}, то нам необходимо убедиться что роль listbox нашего виджета заменит роль list элемента {{HTMLElement("ul")}}. С этой целью, мы будем использовать роль presentation. Эта роль разработана чтобы можно было отметить, что элемент не имеет особого значения, а используется исключительно чтобы представить информацию. Мы применим его к нашему элемету {{HTMLElement("ul")}}.

    +

    Стоит также отметить что ARIA определяет роли, которые по умолчанию применяются к стандартной разметке HTML. Например, элемент {{HTMLElement("table")}} соответствует роли grid, а элемент {{HTMLElement("ul")}} соответствует роли list. Так как мы используем элемент {{HTMLElement("ul")}}, то нам необходимо убедиться что роль listbox нашего виджета заменит роль list элемента {{HTMLElement("ul")}}. С этой целью, мы будем использовать роль presentation. Эта роль разработана чтобы можно было отметить, что элемент не имеет особого значения, а используется исключительно чтобы представить информацию. Мы применим его к нашему элементу {{HTMLElement("ul")}}.

    Чтобы ввести роль listbox нам нужно просто внести следующие изменения в HTML:

    -
    <!-- Мы добавили аттрибут role="listbox" в наш элемент верхнего уровня -->
+
    <!-- Мы добавили атрибут role="listbox" в наш элемент верхнего уровня -->
 <div class="select" role="listbox">
   <span class="value">Cherry</span>
-  <!-- Также мы добавили аттрибут role="presentation" в элемент ul -->
+  <!-- Также мы добавили атрибут role="presentation" в элемент ul -->
   <ul class="optList" role="presentation">
-    <!-- И мы добавили аттрибут role="option" во все элементы li -->
+    <!-- И мы добавили атрибут role="option" во все элементы li -->
     <li role="option" class="option">Cherry</li>
     <li role="option" class="option">Lemon</li>
     <li role="option" class="option">Banana</li>
@@ -719,7 +719,7 @@ window.addEventListener('load', function () {
 
 
    Атрибут aria-selected 
    
 
-
    Использовать только аттрибут role недостаточно. ARIA также предоставляет множество атрибутов состояний и свойств. Чем больше и уместнее вы их используете, тем ваш виджет будет более понятен для вспомогательных технологий. В нашем случае мы ограничимся использованием одного аттрибута: aria-selected.
    
+
    Использовать только атрибут role недостаточно. ARIA также предоставляет множество атрибутов состояний и свойств. Чем больше и уместнее вы их используете, тем ваш виджет будет более понятен для вспомогательных технологий. В нашем случае мы ограничимся использованием одного атрибута: aria-selected.
    
 
 
    Атрибут aria-selected используется для отметки текущего выбранного варианта; это позволяет ассистивным технологиям информировать пользователя о текущем выборе. Мы будем используя JavaScript динамически отмечать выбранный вариант каждый раз, когда пользователь его выбирает. С этой целью нам нужно пересмотреть нашу функцию updateValue():
    
 
@@ -772,7 +772,7 @@ window.addEventListener('load', function () {
  
  • и многие другие…
    • 
 
 
-
    Если вы хотите двигаться далее, то код в этом примере нуждается в некоторм улучшении прежде чем станет универсальным и многоразовым. Это упражнение, которое вы можете попробовать выполнить. Две подсказки, которые помогут вам в этом: первый аргумент всех наших функций одинаков, это значит что эти функции должны быть в одном контексте. Было бы разумным создать объект для совместного использования этого контекста. Также вам нужно сделать его функциональным; это значит, что ему необходимо одинаково хорошо работать с различными браузерами, чья соместимость с  Web стандартами  очень отличается. Повеселись!
    
+
    Если вы хотите двигаться далее, то код в этом примере нуждается в некотором улучшении прежде чем станет универсальным и многоразовым. Это упражнение, которое вы можете попробовать выполнить. Две подсказки, которые помогут вам в этом: первый аргумент всех наших функций одинаков, это значит что эти функции должны быть в одном контексте. Было бы разумным создать объект для совместного использования этого контекста. Также вам нужно сделать его функциональным; это значит, что ему необходимо одинаково хорошо работать с различными браузерами, чья совместимость с  Web стандартами  очень отличается. Повеселись!
    
 
 
    {{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
    
 
diff --git a/files/ru/learn/forms/how_to_structure_a_web_form/index.html b/files/ru/learn/forms/how_to_structure_a_web_form/index.html
index 97f8a42ad8..501767be92 100644
--- a/files/ru/learn/forms/how_to_structure_a_web_form/index.html
+++ b/files/ru/learn/forms/how_to_structure_a_web_form/index.html
@@ -42,7 +42,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form
 
    Внимание: Строго запрещается размещать форму внутри другой формы. Такое размещение может привести к непредсказуемому поведению форм, в зависимости от браузера. 
    
 
 
-
    Стоит учесть, что всегда можно использовать элементы формы вне {{HTMLElement("form")}}. Тогда по умолчанию этот элемент формы не имеет ничего общего со всеми формами. Вы можете связать его с формой с помощью аттрибута form. В HTML5 был представлен аттрибут form для элементов HTML форм, который позволяет  явно связать элемент с формой, даже если он не заключён внутри {{ HTMLElement("form") }}.
    
+
    Стоит учесть, что всегда можно использовать элементы формы вне {{HTMLElement("form")}}. Тогда по умолчанию этот элемент формы не имеет ничего общего со всеми формами. Вы можете связать его с формой с помощью атрибута form. В HTML5 был представлен атрибут form для элементов HTML форм, который позволяет  явно связать элемент с формой, даже если он не заключён внутри {{ HTMLElement("form") }}.
    
 
 
    Элементы <fieldset> и <legend>
    
 
@@ -82,7 +82,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form
 
 
    Элемент <label>
    
 
-
    В предыдущей статье мы увидели, что элемент {{HTMLElement("label")}} принято использовать для указания текстов-подсказок (лейблов) в HTML-формах. Это самый важный элемент для построения доступных форм — при правильной реализации скринридеры будут озвучивать текст-подсказку вместе со связанными элементами. Посмотрите на этот пример из предущей статьи:
    
+
    В предыдущей статье мы увидели, что элемент {{HTMLElement("label")}} принято использовать для указания текстов-подсказок (лейблов) в HTML-формах. Это самый важный элемент для построения доступных форм — при правильной реализации скринридеры будут озвучивать текст-подсказку вместе со связанными элементами. Посмотрите на этот пример из предыдущей статьи:
    
 
 
    <label for="name">Name:</label> <input type="text" id="name" name="user_name">
    
 
@@ -100,7 +100,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form
 
 
    Лейблы тоже кликабельны!
    
 
-
    Ещё одно преимущество при правильно установленных текстах-подсказках заключается в том, что по ним можно кликнуть для активации связанных с ними виджетов. Это поддерживается во всех браузерах. Это удобно как для текстовых полей ввода, в которых устанавливается фокус при клике на текст-посказку, так и для радио-кнопок и чекбоксов — область попадания такого элемента управления может быть очень маленькой, поэтому полезно сделать ее как можно больше.
    
+
    Ещё одно преимущество при правильно установленных текстах-подсказках заключается в том, что по ним можно кликнуть для активации связанных с ними виджетов. Это поддерживается во всех браузерах. Это удобно как для текстовых полей ввода, в которых устанавливается фокус при клике на текст-подсказку, так и для радио-кнопок и чекбоксов — область попадания такого элемента управления может быть очень маленькой, поэтому полезно сделать ее как можно больше.
    
 
 
    Например:
    
 
@@ -155,25 +155,25 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form
 
 
      
  
    • В первом примере лейбл не будет прочитан вместе с текстовым полем — получится лишь "edit text blank" и отдельно читаемые тексты-подсказки. Множественные элементы <label> могут быть неправильно интерпретированы программой чтения с экрана.
      • 
- 
    • Второй пример немного лучше — лейбл будет прочитан вместе с текстовым полем и будет звучать как "name star name edit text", однако тексты-подсказки всё ещё разделены. Это всё ещё немного сбивает с толку, но на этот раз ситуация немного лучше, потому что с текстовое поле связанао с текстом-подсказкой.
      • 
+ 
    • Второй пример немного лучше — лейбл будет прочитан вместе с текстовым полем и будет звучать как "name star name edit text", однако тексты-подсказки всё ещё разделены. Это всё ещё немного сбивает с толку, но на этот раз ситуация немного лучше, потому что с текстовое поле связано с текстом-подсказкой.
      • 
  
    • Третий пример — лучший, так как весь лейбл будет связан с текстовым полем и озвучен целиком, а при чтении текст будет звучать как "name star edit text".
      • 
 
    
 
 
    
-
    Примечение: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведет себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.
    
+
    Примечание: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведет себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.
    
 
    
 
 
    
 
    Примечание: Вы можете найти этот пример на GitHub required-labels.html (также можно посмотреть вживую). Запускайте пример, закомментировав остальные, иначе скриридеры не смогут правильно распознать контент, если у вас будет несколько лейблов и несколько текстовых полей с одинаковым ID!
    
 
    
 
-
    Частоиспользуемые с формами HTML-структуры
    
+
    Часто используемые с формами HTML-структуры
    
 
 
    Помимо структур, характерных только для HTML-форм, хорошо помнить, что формы — это просто HTML. Это означает, что вы можете использовать всю мощь HTML для структурирования HTML-формы.
    
 
 
    Как вы можете заметить в примерах, оборачивать лейбл и виджет формы в элемент {{HTMLElement("div")}} — это общепринятая практика. Элемент {{HTMLElement("p")}} также часто используется, как и HTML-списки (последние часто используются для структурирования множественных чекбоксом или радио-кнопок).
    
 
-
    В добавок к элементу {{HTMLElement("fieldset")}} часто используют HTML-заголовки (например, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}) и секционирование (например, {{HTMLElement("section")}}) для стуктурирования сложных форм.
    
+
    В добавок к элементу {{HTMLElement("fieldset")}} часто используют HTML-заголовки (например, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}) и секционирование (например, {{HTMLElement("section")}}) для структурирования сложных форм.
    
 
 
    Прежде всего, вам нужно найти стиль, который будет удобен именно вам для программирования и который также позволит создавать доступные и удобные формы.
    
 
@@ -185,7 +185,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form
 
 
      
  
    1. Для начала сделайте локальную копию пустого шаблона и CSS для нашей платёжной формы в новой директории на вашем компьютере.
      2. 
- 
    2. Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-елемента {{htmlelement("head")}}:
+ 
    3. Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-элемента {{htmlelement("head")}}:
   
      <link href="payment-form.css" rel="stylesheet">
      
  
      4. 
  
    4. Далее начните создавать свою форму с добавления внешнего элемента {{htmlelement("form")}}:
diff --git a/files/ru/learn/forms/sending_and_retrieving_form_data/index.html b/files/ru/learn/forms/sending_and_retrieving_form_data/index.html
index ec52c05e69..f8c265ffb2 100644
--- a/files/ru/learn/forms/sending_and_retrieving_form_data/index.html
+++ b/files/ru/learn/forms/sending_and_retrieving_form_data/index.html
@@ -25,7 +25,7 @@ original_slug: Learn/HTML/Forms/Отправка_и_Получение_данн
 
 
      Здесь мы обсудим, что происходит с данными при отправке формы.
      
 
-
      О клиенсткой/серверной архитектуре
      
+
      О клиентской/серверной архитектуре
      
 
 
      WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как Apache, Nginx, IIS, Tomcat, и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.A basic schema of the Web client/server architecture
      
 
@@ -244,7 +244,7 @@ if __name__ == "__main__":
 
 
      Атрибут {{htmlattrxref("enctype","form")}} 
      
 
-
      Этот атрибут позволяет конкретизировать значение в Content-Type HTTP заголовок, включенный в запрос, при генерировании отпавки формы. Этот заголовок очень важен, потому что указывает серверу, какой тип данных отправляется. По умолчанию это: application/x-www-form-urlencoded. На человеческом это значит: "Это форма с данными, которые были закодированы в URL параметры."
      
+
      Этот атрибут позволяет конкретизировать значение в Content-Type HTTP заголовок, включенный в запрос, при генерировании отправки формы. Этот заголовок очень важен, потому что указывает серверу, какой тип данных отправляется. По умолчанию это: application/x-www-form-urlencoded. На человеческом это значит: "Это форма с данными, которые были закодированы в URL параметры."
      
 
 
      Если хотите отправить файл, нужно сделать следующие три шага:
      
 
@@ -298,7 +298,7 @@ if __name__ == "__main__":
 
 
      Вброс HTTP-заголовка и email
      
 
-
      Эти виды атак могут проявляться, когда ваше приложение создает заголовки HTTP или электронные почтовые адреса на основании данных, введенных пользователем в форму. Такие атаки напрямую не повреждают сервер или пользовалей, однако создают уязвимость для таких угроз, как перехват сессии, или для фишинговых атак.
      
+
      Эти виды атак могут проявляться, когда ваше приложение создает заголовки HTTP или электронные почтовые адреса на основании данных, введенных пользователем в форму. Такие атаки напрямую не повреждают сервер или пользователей, однако создают уязвимость для таких угроз, как перехват сессии, или для фишинговых атак.
      
 
 
      Такие атаки являются самыми незаметными, но при этом могут превратить ваш сервер в зомби.
      
 
@@ -326,7 +326,7 @@ if __name__ == "__main__":
 
 
      См. также
      
 
-
      Если вы хотите узнать больше об обеспечении безопасности веб-приложений, вы можете использовать следущие источники информации:
      
+
      Если вы хотите узнать больше об обеспечении безопасности веб-приложений, вы можете использовать следующие источники информации:
      
 
 
        
  
      • Первые шаги в программирование веб-сайтов на стороне сервера
        • 
diff --git a/files/ru/learn/forms/sending_forms_through_javascript/index.html b/files/ru/learn/forms/sending_forms_through_javascript/index.html
index eddfcb8dcd..6a949fd237 100644
--- a/files/ru/learn/forms/sending_forms_through_javascript/index.html
+++ b/files/ru/learn/forms/sending_forms_through_javascript/index.html
@@ -16,7 +16,7 @@ original_slug: Learn/HTML/Forms/Sending_forms_through_JavaScript
 
 
        Отправка стандартной HTML формы, как описывалось в предыдущей статье, загружает URL-адрес, по которому были отправлены данные, это означает, что окно браузера перемещается с полной загрузкой страницы. Если избегать полную перезагрузку страницы, можно обеспечить более плавную работу, за счет предотвращения задержек в сети и возможных визуальных проблем (например, мерцания).
        
 
-
        Многие современные пользовательские интерфейсы используют HTML формы только для сбора пользовательского ввода, а не для для отправки данных. Когда пользователь пытатся отправить свои данные, приложение берет контроль и асинхронно передает данные в фоновом режиме, обновляя только ту часть всего интерфейса пользователя, которой требуется обновление.
        
+
        Многие современные пользовательские интерфейсы используют HTML формы только для сбора пользовательского ввода, а не для для отправки данных. Когда пользователь пытается отправить свои данные, приложение берет контроль и асинхронно передает данные в фоновом режиме, обновляя только ту часть всего интерфейса пользователя, которой требуется обновление.
        
 
 
        Асинхронная отправка произвольных данных обычно называется AJAX, что означает "Asynchronous JavaScript And XML" (Асинхронный JavaScript и XML).
        
 
@@ -25,14 +25,14 @@ original_slug: Learn/HTML/Forms/Sending_forms_through_JavaScript
 
        Объект {{domxref("XMLHttpRequest")}} (XHR) DOM может создавать HTTP-запросы, отправлять их, и получать их результат. Исторически, {{domxref("XMLHttpRequest")}} был разработан для получения и отправки XML в качестве формата обмена, который со временем был заменен на JSON. Но ни XML, ни JSON не вписываются в кодировку запроса данных формы. Данные формы (application/x-www-form-urlencoded) состоят из списка пар ключ/значение в кодировке URL. Для передачи бинарных данных, HTTP-запрос преобразуется в multipart/form-data.
        
 
 
        
-
        Замечание: Сейчас Fetch API часто используется вместо XHR — это современная, обновленная версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидете в этой статье можно заменить на Fetch.
        
+
        Замечание: Сейчас Fetch API часто используется вместо XHR — это современная, обновленная версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидите в этой статье можно заменить на Fetch.
        
 
        
 
 
        Если вы управляете фронтендом (кодом, который выполняется в браузере) и бэкендом (кодом, который выполняется на стороне сервера), вы можете отправлять JSON/XML и обрабатывать их как хотите.
        
 
 
        Но если вы хотите использовать сторонний сервис, то вам необходимо отправлять данные в формате, который требуется сервису.
        
 
-
        Так как нам следует отправлять подобные данные? Ниже обписаны различные необходимые вам техники.
        
+
        Так как нам следует отправлять подобные данные? Ниже описаны различные необходимые вам техники.
        
 
 
        Отправка данных формы
        
 
diff --git a/files/ru/learn/forms/your_first_form/index.html b/files/ru/learn/forms/your_first_form/index.html
index 4cb3f856d0..705c6fbeb9 100644
--- a/files/ru/learn/forms/your_first_form/index.html
+++ b/files/ru/learn/forms/your_first_form/index.html
@@ -116,7 +116,7 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма
 
 
          
  
        • В нашем простом примере мы используем {{HTMLelement("input/text")}} для первого поля ввода — значение по умолчанию для данного атрибута. Оно представляет однострочное текстовое поле, которое может принимать любые значения.
          • 
- 
        • Для второго поля ввода мы используем тип {{HTMLelement("input/email")}}, который представляет собой однострочное текстовое поле, которое принимает в качестве значения корректно составленный e-mail адрес. Он делает простое текстовое поле "умным", позволяя проверять введёные пользователем данные на корректность. Также это позволяет открывать более подходящие для ввода e-mail адреса клавиатуры (например, с символом @ при базовой раскладке) на устройствах с динамической клавиатурой, таких как смартфоны. Вы найдёте более подробную информацию про валидацию форм далее в статье Валидация формы.
          • 
+ 
        • Для второго поля ввода мы используем тип {{HTMLelement("input/email")}}, который представляет собой однострочное текстовое поле, которое принимает в качестве значения корректно составленный e-mail адрес. Он делает простое текстовое поле "умным", позволяя проверять введенные пользователем данные на корректность. Также это позволяет открывать более подходящие для ввода e-mail адреса клавиатуры (например, с символом @ при базовой раскладке) на устройствах с динамической клавиатурой, таких как смартфоны. Вы найдёте более подробную информацию про валидацию форм далее в статье Валидация формы.
          • 
 
        
 
 
        Последнее, но не менее важное, обратите внимание на разницу синтаксиса у HTML-элементов <input> и <textarea></textarea>. Это одна из странностей HTML. Тег <input> — это пустой элемент, то есть он не нуждается в закрывающем теге.  {{HTMLElement("textarea")}} — это непустой элемент, что говорит о том, что ему необходим закрывающий тег. Это важно при использовании одного из свойств форм: определения значения по умолчанию. Для определения начального значения для HTML-элемента {{HTMLElement("input")}} вам необходимо использовать атрибут value следующим образом:
        
@@ -161,7 +161,7 @@ original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма
 
 
        Красиво стилизовать формы достаточно сложно. Эта тема выходит за рамки этой статьи, поэтому на данный момент мы просто добавим некоторый CSS-код для приведения формы в нормальный вид.
        
 
-
        Сначала необходимо добавить HTML-элемент {{htmlelement("style")}} на вашу страницу внутрь тега head в HTML. Это должно выглядить следущим образом:
        
+
        Сначала необходимо добавить HTML-элемент {{htmlelement("style")}} на вашу страницу внутрь тега head в HTML. Это должно выглядеть следующим образом:
        
 
 
        <style>
 
@@ -249,7 +249,7 @@ button {
 
 
        Мы определяем имя name для каждого виджета формы. Указание имён важно как для браузера, так и для сервера: браузер узнаёт, какие имена дать каждой части данных, а сервер может получить эти данные, обратясь к ним по заданному имени. Данные форму отправляются на сервер в виде пары имя/значение.
        
 
-
        Чтобы проименовать данные, вам необходимо использовать атрибут name на каждом виджете формы, который будет собирать определённую часть информации. Давайте взглянем на код нашей формы ещё раз:
        
+
        Чтобы переименовать данные, вам необходимо использовать атрибут name на каждом виджете формы, который будет собирать определённую часть информации. Давайте взглянем на код нашей формы ещё раз:
        
 
 
        <form action="/my-handling-form-page" method="post">
   <div>
diff --git a/files/ru/learn/getting_started_with_the_web/css_basics/index.html b/files/ru/learn/getting_started_with_the_web/css_basics/index.html
index a091f49fc3..f5aec65b86 100644
--- a/files/ru/learn/getting_started_with_the_web/css_basics/index.html
+++ b/files/ru/learn/getting_started_with_the_web/css_basics/index.html
@@ -142,7 +142,7 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics
  
      • Прежде всего, вернитесь и найдите вывод из Google Fonts, который вы уже где-то сохранили. Добавьте элемент {{htmlelement("link")}} где-нибудь внутри шапки вашего index.html (снова, в любом месте между тегами <head> и </head>). Это будет выглядеть примерно так:
 
   
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        
-  Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницой и позволяет вам применять их к вашим HTML элементам используя свою собственную таблицу стилей.
        • 
+  Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет вам применять их к вашим HTML элементам используя свою собственную таблицу стилей.
  
      • Затем, удалите существующее правило в вашем style.css файле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит.
        • 
  
      • Добавьте следующие строки в нужное место, заменив строку placeholder актуальной font-family строкой, которую вы получили из Google Fonts. (font-family просто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку <html> является родительским элементом для всей страницы, и все элементы внутри него наследуют такой же font-size и font-family):
   
        html {
@@ -223,7 +223,7 @@ p, li {
 
          
  
        • width: 600px; — заставляет тело быть всегда 600 пикселей в ширину.
          • 
  
        • margin: 0 auto; — когда вы устанавливаете два значения для таких свойств как margin или padding, первое значение элемента влияет на верхнюю и нижнюю сторону (делает их 0 в данном случае), и второе значение на левую и правую сторону (здесь, auto является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано здесь.
          • 
- 
        • background-color: #FF9500; — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для {{htmlelement("html")}} элемента, но не стесняйтесь и эксперементируйте.
          • 
+ 
        • background-color: #FF9500; — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для {{htmlelement("html")}} элемента, но не стесняйтесь и экспериментируйте.
          • 
  
        • padding: 0 20px 20px 20px; — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.
          • 
  
        • border: 5px solid black; — просто устанавливает сплошную черную рамку шириной 5 пикселей со всех сторон тела.
          • 
 
        
diff --git a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html
index ec66653d61..1976fc08ea 100644
--- a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html
+++ b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html
@@ -64,7 +64,7 @@ translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
 
 
          
  
        1. Скопируйте изображение, которое вы выбрали ранее, в папку images.
          2. 
- 
        2. Откройте ваш файл index.html и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит - позже в этом руководстве мы рассмотрим сруктуры более подробно.
+ 
        3. Откройте ваш файл index.html и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит - позже в этом руководстве мы рассмотрим структуры более подробно.
   
          <!DOCTYPE html>
 <html>
   <head>
diff --git a/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.html
index 27175cb898..f3a8d0da2c 100644
--- a/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.html
+++ b/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.html
@@ -10,7 +10,7 @@ tags:
   - Infrastructure
   - Learn
   - TCP
-  - Инфраструтура
+  - Инфраструктура
   - Клиент
   - Новичку
   - Обучение
@@ -82,7 +82,7 @@ translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
 
 
          Пакеты
          
 
-
          Ранее мы использовали термин "пакеты", чтобы описать формат, в котором данные передаются от сервера к клиенту. Что мы имеем в виду? В основном, когда данные передаются через Интернет, они отправляются в виде тысячи мелких кусочков, так что множество разных пользователей могут скачивать один и тот же сайт одовременно. Если бы сайты отправлялись одним большим куском, тогда бы только один пользователь мог скачать его за один раз, и это, очевидно, сделало бы пользование интернетом не эффективным и не очень радостным.
          
+
          Ранее мы использовали термин "пакеты", чтобы описать формат, в котором данные передаются от сервера к клиенту. Что мы имеем в виду? В основном, когда данные передаются через Интернет, они отправляются в виде тысячи мелких кусочков, так что множество разных пользователей могут скачивать один и тот же сайт одновременно. Если бы сайты отправлялись одним большим куском, тогда бы только один пользователь мог скачать его за один раз, и это, очевидно, сделало бы пользование интернетом не эффективным и не очень радостным.
          
 
 
          Смотрите также
          
 
diff --git a/files/ru/learn/getting_started_with_the_web/index.html b/files/ru/learn/getting_started_with_the_web/index.html
index 8500828b35..73be1678c7 100644
--- a/files/ru/learn/getting_started_with_the_web/index.html
+++ b/files/ru/learn/getting_started_with_the_web/index.html
@@ -31,7 +31,7 @@ translation_of: Learn/Getting_started_with_the_web
 
 
          Установка базового программного обеспечения
          
 
-
          Когда речь заходит об инструментаx для создания веб-сайта, тут есть из чего выбрать. Если вы только начинаете, вас может смутить количество текстовых редакторов, фреймворков и инструментов тестирования. В главе Установка базового программного обеспечения мы покажем вам шаг за шагом, как установить только то программное обеспечение, которое вам понадобится для веб-разработки на начальном этапе.
          
+
          Когда речь заходит об инструментах для создания веб-сайта, тут есть из чего выбрать. Если вы только начинаете, вас может смутить количество текстовых редакторов, фреймворков и инструментов тестирования. В главе Установка базового программного обеспечения мы покажем вам шаг за шагом, как установить только то программное обеспечение, которое вам понадобится для веб-разработки на начальном этапе.
          
 
 
          Каким должен быть ваш веб-сайт?
          
 
diff --git a/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.html
index 2829c00c84..a8728f3cf7 100644
--- a/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.html
+++ b/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.html
@@ -4,7 +4,7 @@ slug: Learn/Getting_started_with_the_web/Installing_basic_software
 tags:
   - WebMechanics
   - Браузер
-  - Интрументы
+  - Инструменты
   - Начинающий
   - Новичку
   - Обучение
@@ -27,7 +27,7 @@ original_slug: Learn/Getting_started_with_the_web/Установка_базов
 
 
            
  
          • Компьютер. Может быть, это звучит очевидно для некоторых людей, но некоторые из вас читают эту статью с телефона или библиотечного компьютера. Для серьезной веб-разработки, лучше приобрести настольный компьютер (Windows, Mac или Linux).
            • 
- 
          • Текстовый редактор, чтобы писать код. Это может быть текстовый редактор (например, Visual Studio Code, Notepad++, Sublime Text, Atom, GNU Emacs, или VIM) или гибридный редактор (например, Dreamweaver or WebStorm). Офисные редакторы не подходят для этого, посколько они зависят от скрытых элементов, которые мешают движкам рендеринга, используемым веб-браузерами.
            • 
+ 
          • Текстовый редактор, чтобы писать код. Это может быть текстовый редактор (например, Visual Studio Code, Notepad++, Sublime Text, Atom, GNU Emacs, или VIM) или гибридный редактор (например, Dreamweaver or WebStorm). Офисные редакторы не подходят для этого, поскольку они зависят от скрытых элементов, которые мешают движкам рендеринга, используемым веб-браузерами.
            • 
  
          • Веб-браузеры, для тестирования кода. В настоящее время наиболее часто используемые браузеры это Firefox, Chrome, Opera, Safari, и Internet Explorer. Вы также должны тестировать ваш сайт на то, как он работает на мобильных устройствах и на любых старых браузерах, которые ваша целевая аудитория может все ещё широко использовать (например, IE 6-8). Lynx, текстовый веб-браузер для терминала, отлично подходит для того, чтобы увидеть, как ваш сайт воспринимается слабовидящими пользователями.
            • 
  
          • Графический редактор, такие как The Gimp, Paint.NET, или Photoshop, чтобы создавать изображения для ваших веб-страниц.
            • 
  
          • Система контроля версий, чтобы управлять файлами на сервере, для совместной работы над проектом с командой, обмениваться кодом и избегать редакторских конфликтов. Сейчас Git является наиболее популярным инструментом контроля версий, и репозиторий кода Github, основанный на Git, также является очень популярным.
            • 
@@ -54,7 +54,7 @@ original_slug: Learn/Getting_started_with_the_web/Установка_базов
 
 
 
            Прежде, чем идти дальше, вам следует установить, по крайней мере, два из этих браузеров, чтобы использовать их для тестирования.
            
diff --git a/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html
index 5f3d8ac09f..afa0a343df 100644
--- a/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html
+++ b/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -41,7 +41,7 @@ translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
 
            Советы по поиску хостингов и доменов
            
 
 
              
- 
            • Здесь мы не продвигаем какие-то конкретные хостинговые компании. Чтобы найти хостинг и регистратора доменных имен, просто поищите "веб-хостинг" и "доменные имена". Во всех таких сервисах есть функция, позволяющая вам проверить, доступно ли имя домена, или кто-то другой уже зарегестрировал его. 
              • 
+ 
            • Здесь мы не продвигаем какие-то конкретные хостинговые компании. Чтобы найти хостинг и регистратора доменных имен, просто поищите "веб-хостинг" и "доменные имена". Во всех таких сервисах есть функция, позволяющая вам проверить, доступно ли имя домена, или кто-то другой уже зарегистрировал его. 
              • 
  
            • Ваш домашний или рабочий {{Glossary("ISP", "Интернет-провайдер")}} может предоставлять хостинговые услуги для небольших веб-сайтов. Набор возможностей в таком случае может быть ограничен, но, тем не менее, он может отлично подойти для ваших первых экспериментов - свяжитесь с ними и узнайте! 
              • 
  
            • Также есть несколько бесплатных сервисов, таких как Neocities, Blogspot, и Wordpress. Опять же, вы получаете то, за что платите, но они идеально подходят для ваших первоначальных экспериментов. Бесплатные сервисы по большей части не требуют FTP-клиентов - вы можете перетаскивать ваши файлы напрямую в веб-интерфейсе.
              • 
  
            • Иногда компании предлагают одновременно и хостинг и домен.
              • 
@@ -83,7 +83,7 @@ translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
  
            • Прежде всего, установите Git на ваш компьютер. Это основная версия системы управления версий, поддерживающая GitHub.
              • 
  
            • Далее, создайте аккаунт в GitHub. Это просто и легко.
              • 
  
            • После того как вы зарегистрировались, войдите в github.com используя ваш логин и пароль.
              • 
- 
            • Далее, вам нужно создать новый репозиторий для ваших файлов. Нажмитре Плюс (+) в правом верхнем углу главной страницы GitHub, затем выберите New repository.
              • 
+ 
            • Далее, вам нужно создать новый репозиторий для ваших файлов. Нажмите Плюс (+) в правом верхнем углу главной страницы GitHub, затем выберите New repository.
              • 
 
        
 
 
        На этой странице, в поле Repository name, введите username.github.io, где username это ваше имя пользователя. Так, например, наш друг valerii15298 введёт valerii15298.github.io.
        
diff --git a/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
index 8791fab186..7c74a04194 100644
--- a/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
+++ b/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
@@ -23,13 +23,13 @@ original_slug: Learn/Getting_started_with_the_web/Веб_и_веб_станда
 
 
        К концу 1990-го года Тим Бернерс разработал все необходимые для запуска сети средства — HTTP, HTML, первый в мире веб браузер (WorldWideWeb), сервер HTTP и несколько веб страниц для наглядности.
        
 
-
        В течение нескольких последующих лет веб сеть расширялась, выпускались новые браузеры, были установлены тысячи серверов и созданны миллионы веб страниц. Как и обещали, достаточно краткая история.
        
+
        В течение нескольких последующих лет веб сеть расширялась, выпускались новые браузеры, были установлены тысячи серверов и созданы миллионы веб страниц. Как и обещали, достаточно краткая история.
        
 
 
        Стоит отметить, что в 1994 году TimBL основал консорциум Всемирной паутины (World Wide Web Consortium (W3C))  - организацию, связывающую множество компаний для сплочения усилий в области разработки веб технологий. После этого появились технологии, например, такие как CSS и JavaScript, которые преобразовали веб сеть в тот вид, в котором мы наблюдаем её сейчас.
        
 
 
        Веб-стандарты
        
 
-
        Веб-стандарты - это технологии, используемые для создания веб страниц. Стандарты существуют в виде технической документации (спецификаций), которая точно описывает как та, или иная технология должна работать. Документация никак не поможет изучить то, как пользоваться описываемыми в ней технологиями (вот почему существет сайт MDN Web Docs). Она используются разработчиками ПО для внендрения технологий (например, в веб браузеры).
        
+
        Веб-стандарты - это технологии, используемые для создания веб страниц. Стандарты существуют в виде технической документации (спецификаций), которая точно описывает как та, или иная технология должна работать. Документация никак не поможет изучить то, как пользоваться описываемыми в ней технологиями (вот почему существует сайт MDN Web Docs). Она используются разработчиками ПО для внедрения технологий (например, в веб браузеры).
        
 
 
        В качестве примера приведем стандарт HTML Living Standard. Он описывает как HTML (все элементы HTML, связанные с ними API и остальные близкие технологии) должны быть реализованы.
        
 
diff --git a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html
index a7b386098d..2c51073d15 100644
--- a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html
+++ b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.html
@@ -187,7 +187,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages
 
 
 
diff --git a/files/ru/learn/html/howto/index.html b/files/ru/learn/html/howto/index.html
index 65c138e103..c4f9f46583 100644
--- a/files/ru/learn/html/howto/index.html
+++ b/files/ru/learn/html/howto/index.html
@@ -45,7 +45,7 @@ original_slug: Learn/HTML/Рецепты
 
        Одной из главных причин по которым навигация в HTML страницах столь проста являются гиперссылки, которые могут которые возможно использоваться различными способами:
        
 
 
 
diff --git a/files/ru/learn/html/howto/use_data_attributes/index.html b/files/ru/learn/html/howto/use_data_attributes/index.html
index 9820e4e0f9..3fa918c42f 100644
--- a/files/ru/learn/html/howto/use_data_attributes/index.html
+++ b/files/ru/learn/html/howto/use_data_attributes/index.html
@@ -37,7 +37,7 @@ article.dataset.parent // "cars"
        
 
 
        Доступ в CSS
        
 
-
        Заметим, что data-атрибуты являются обычными HTML-аттрибутами, к которым можно получить доступ в CSS. Например, чтобы показать родительские данные о статье можно использовать генерируемый контент и CSS функцию {{cssxref("attr")}}:
        
+
        Заметим, что data-атрибуты являются обычными HTML-атрибутами, к которым можно получить доступ в CSS. Например, чтобы показать родительские данные о статье можно использовать генерируемый контент и CSS функцию {{cssxref("attr")}}:
        
 
 
        article::before {
   content: attr(data-parent);
@@ -54,7 +54,7 @@ article[data-columns='4']{
 
 
        Увидеть как это работает можно в примере на JSBin.
        
 
-
        Data-аттрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите скринкаст чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. Пример кода из скринкаста можно также посмотреть на JSBin.
        
+
        Data-атрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите скринкаст чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. Пример кода из скринкаста можно также посмотреть на JSBin.
        
 
 
        Проблемы
        
 
diff --git a/files/ru/learn/html/index.html b/files/ru/learn/html/index.html
index 75e8f2485b..0727a2b8bd 100644
--- a/files/ru/learn/html/index.html
+++ b/files/ru/learn/html/index.html
@@ -23,7 +23,7 @@ translation_of: Learn/HTML
 
 
          
  
        • "CSS (Каскадные таблицы стилей)", и как их использовать для оформления (стилизации) HTML-документа (например, изменение шрифта и его размера, добавление границы и теней для элементов, разбиение страницы на несколько столбцов, добавление анимации и других визуальных эффектов).
          • 
- 
        • "JavaScript", и как его использовать для придания динамической функциональности веб-страницам (например, определение вашего местоположения и отображение его на карте, создание элементов, которые будут появлятся/исчезать при нажатии на кнопку, сохранение данных пользователей локально на их компьютерах и многое другое).
          • 
+ 
        • "JavaScript", и как его использовать для придания динамической функциональности веб-страницам (например, определение вашего местоположения и отображение его на карте, создание элементов, которые будут появляться/исчезать при нажатии на кнопку, сохранение данных пользователей локально на их компьютерах и многое другое).
          • 
 
        
 
 
        Прежде чем приступить к этой теме, вы должны иметь хотя бы базовое представление об использовании компьютеров вообще и уметь "пассивно" использовать Интернет (т.е. уметь просматривать веб-страницы, быть потребителем контента). У вас должна быть базовая рабочая среда, описанная в разделе "Установка базового программного обеспечения", а также вы должны понимать, как создавать файлы и управлять ими, что подробно описано в разделе "Работа с файлами" — обе статьи являются частью нашего модуля для новичков  - "Начало работы с вебом".
        
diff --git a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html
index 2e34f4a80b..3e05c04ea4 100644
--- a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html
+++ b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html
@@ -424,7 +424,7 @@ textarea.onkeyup = function(){
 
        Я думаю, Почт. Грин сделал это на кухне с бензопилой.
        
 
 
        
-
        Примечание: Существует еще один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и <abbr>, но предназначен специально для акронимов (тип аббревитатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что <abbr>, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте <abbr>.
        
+
        Примечание: Существует еще один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и <abbr>, но предназначен специально для акронимов (тип аббревиатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что <abbr>, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте <abbr>.
        
 
        
 
 
        Активное обучение: выделение аббревиатуры
        
diff --git a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html
index d252a56e21..0ec868fd19 100644
--- a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html
+++ b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html
@@ -25,7 +25,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
    - + @@ -58,7 +58,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс

    Я создал ссылку на домашнюю страницу Mozilla.

    -

    Добавляем инфомацию через атрибут title

    +

    Добавляем информацию через атрибут title

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

    @@ -111,7 +111,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс

    Корень структуры — каталог  creating-hyperlinks. При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — index.html и contacts.html. На настоящем веб-сайте index.html был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определенного раздела веб-сайта).

    -

    В корне есть ещё два каталога —  pdfs и projects. У каждого из них есть один файл внутри — project-brief.pdf и index.html, соответсвенно. Обратите внимание на то, что вы можете довольно успешно иметь два index.html файла в одном проекте, пока они находятся в разных местах файловой системы.  Многие веб-сайты так делают. Второй index.html, возможно, будет главной лендинг-страницей для связанной с проектом информации.

    +

    В корне есть ещё два каталога —  pdfs и projects. У каждого из них есть один файл внутри — project-brief.pdf и index.html, соответственно. Обратите внимание на то, что вы можете довольно успешно иметь два index.html файла в одном проекте, пока они находятся в разных местах файловой системы.  Многие веб-сайты так делают. Второй index.html, возможно, будет главной лендинг-страницей для связанной с проектом информации.

    • @@ -130,7 +130,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс </p>
    • -

      Перемещение обратно в родительские каталоги: Если вы хотите подключить ссылку внутри projects/index.html, указывающую на pdfs/project-brief.pdf, вам нужно будет подняться на уровень каталога, затем спустится в каталог pdf. "Поднятся вверх на уровень каталога" обозначается двумя точками — .. — так, URL-адрес, который вы используете ../pdfs/project-brief.pdf:

      +

      Перемещение обратно в родительские каталоги: Если вы хотите подключить ссылку внутри projects/index.html, указывающую на pdfs/project-brief.pdf, вам нужно будет подняться на уровень каталога, затем спустится в каталог pdf. "Подняться вверх на уровень каталога" обозначается двумя точками — .. — так, URL-адрес, который вы используете ../pdfs/project-brief.pdf:

      <p>Ссылка на
   <a href="../pdfs/project-brief.pdf">краткое описание моего проекта</a>.
@@ -175,7 +175,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
 
 
      
  
      Относительный URL
      
- 
      Указывает расположение относительно файла, с которого вы связываетесь, это больше похоже на случай, который мы рассматривали в предыдущей секции. Для примера, если мы хотим указать со страницы http://www.example.com/projects/index.html на PDF файл, находящийся в той же директории, наш URL может быть просто названием файла —  project-brief.pdf — никакой дополнительной информации не требуется. Если PDF расположен в поддериктории pdfs внутри каталога projects, относительная ссылка будет pdfs/project-brief.pdf (аналогичный абсолютный URL был бы http://www.example.com/projects/pdfs/project-brief.pdf.).
      
+ 
      Указывает расположение относительно файла, с которого вы связываетесь, это больше похоже на случай, который мы рассматривали в предыдущей секции. Для примера, если мы хотим указать со страницы http://www.example.com/projects/index.html на PDF файл, находящийся в той же директории, наш URL может быть просто названием файла —  project-brief.pdf — никакой дополнительной информации не требуется. Если PDF расположен в поддиректории pdfs внутри каталога projects, относительная ссылка будет pdfs/project-brief.pdf (аналогичный абсолютный URL был бы http://www.example.com/projects/pdfs/project-brief.pdf.).
      
 
      
 
 
      Относительный URL будет указывать на различные места, в зависимости от того, где находится файл, в котором он используется, — например, если мы переместим наш файл index.html из каталога projects в корневой каталог веб-сервера (верхний уровень, не в директорию) , то относительный URL pdfs/project-brief.pdf будет вести на http://www.example.com/pdfs/project-brief.pdf, а не на http://www.example.com/projects/pdfs/project-brief.pdf.
      
@@ -219,7 +219,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
 
 
        
  
      • Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.
        • 
- 
      • Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговоаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчеркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).
        • 
+ 
      • Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчеркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).
        • 
  
      • Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.
        • 
  
      • Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.
        • 
 
      
@@ -235,7 +235,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
 
 
      Создавая ссылки на не HTML ресурсы — добавляйте описание
      
 
-
      Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте четкую формулировку, чтобы уменьшить путаницу. Отсуствие описания может раздражать пользователя. Приведем пример:
      
+
      Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте четкую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведем пример:
      
 
 
        
  
      • Если вы используете соединение с низкой пропускной способностью и вдруг нажмёте на ссылку без описания, начнётся загрузка большого файла.
        • 
@@ -292,7 +292,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
 
        An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items
        
 
 
        
-
        Если не удается сделать, или вы неуверены, что сделали верно, посмотрите наш вариант navigation-menu-marked-up.
        
+
        Если не удается сделать, или вы не уверены, что сделали верно, посмотрите наш вариант navigation-menu-marked-up.
        
 
        
 
 
        Ссылки электронной почты
        
@@ -304,7 +304,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
 
        <a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a>
 
        
 
-
        В результате полчим ссылку вида: Отправить письмо для nowhere.
        
+
        В результате получим ссылку вида: Отправить письмо для nowhere.
        
 
 
        Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле {{htmlattrxref("href", "a")}} оставить только "mailto:"), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки "Поделиться".
        
 
diff --git a/files/ru/learn/html/introduction_to_html/debugging_html/index.html b/files/ru/learn/html/introduction_to_html/debugging_html/index.html
index a48d53d1c2..e80ec52b6d 100644
--- a/files/ru/learn/html/introduction_to_html/debugging_html/index.html
+++ b/files/ru/learn/html/introduction_to_html/debugging_html/index.html
@@ -24,7 +24,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML
    - +
    Предварительные требования:Базовое знакомство с HTML, описаное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML.Базовое знакомство с HTML, описанное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML.
    Задача:
    Чему вы научитесь:Искать проблемы в HTML с помощю инструментов отладки.Искать проблемы в HTML с помощью инструментов отладки.
    @@ -33,7 +33,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML

    Во время написания какого-нибудь кода, обычно все идет хорошо, пока не появляется тот момент, когда вы совершаете ошибку. Итак, ваш код не работает, или работает не так, как вы задумывали. Если вы попытаетесь скомпилировать неработающую программу на языке Rust, компилятор укажет на ошибку:

    -

    A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.В данном случае, сообщение об ошибке понять относительно просто — "unterminated double quote string". Если вы внимательно посмотрите на println!(Hello, world!"); , то заметите, что здесь отсутсвует двойная кавычка. Разумеется, сообщения об ошибках могут становиться куда более сложными для понимания по мере роста вашего кода, и даже самые простые случаи могут показаться пугающими для тех, кто ничего не знает о Rust.

    +

    A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.В данном случае, сообщение об ошибке понять относительно просто — "unterminated double quote string". Если вы внимательно посмотрите на println!(Hello, world!"); , то заметите, что здесь отсутствует двойная кавычка. Разумеется, сообщения об ошибках могут становиться куда более сложными для понимания по мере роста вашего кода, и даже самые простые случаи могут показаться пугающими для тех, кто ничего не знает о Rust.

    Но не бойтесь отладки! Чтобы комфортно писать и отлаживать любой код, нужно понимать язык и его инструменты.

    @@ -50,7 +50,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML
  • Логические ошибки (Logic errors): Это ошибки, появляющиеся в том случае, если синтаксис корректен, но код не выполняет своего предназначения, то есть программа выполняется неверно. Такие исправлять сложнее, чем синтаксические, поскольку не выводится сообщений, указывающих место, где вы ошиблись.
    • -

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

    +

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

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

    @@ -86,7 +86,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML
  • У {{htmlelement("p","параграфа")}} и {{htmlelement("li","элемента списка")}} не закрыты теги. На изображении выше видно, что разметка не пострадала, так как браузеру легко сделать вывод о том, где заканчивается один элемент и начинается другой.
  • Первый {{htmlelement("strong")}} элемент также не имеет закрывающего тега. Это уже более проблематично, так как сложно сказать, где элемент должен заканчиваться. На деле, весь оставшийся текст был выделен жирным.
  • Следующая часть нарушает правила вложенности: <strong>strong <em>strong emphasised?</strong> what is this?</em>. В этом случае код тоже сложно проинтерпретировать по причине, описанной выше.
    • -
  • В атрибуте {{htmlattrxref("href","a")}} отсутсвует закрывающая двойная кавычка. Это послужило причиной крупной проблемы — ссылка не воспроизвелась вовсе.
    • +
  • В атрибуте {{htmlattrxref("href","a")}} отсутствует закрывающая двойная кавычка. Это послужило причиной крупной проблемы — ссылка не воспроизвелась вовсе.
  • Сейчас же посмотрим, как браузер сгенерировал собственную разметку, в противовес исходной разметке документа. Чтобы сделать это, воспользуемся инструментами разработчика. Если вы не знакомы с инструментами разработчика, потратьте несколько минут на Обзор инструментов разработки в браузерах.
    • @@ -101,7 +101,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML </strong> <em> what is this?</em> -
  • Ссылка с отсутсвующими двойными кавычками была удалена насовсем. Последний элемент списка будет выглядеть так: +
  • Ссылка с отсутствующими двойными кавычками была удалена насовсем. Последний элемент списка будет выглядеть так: 
    <li>
   <strong>Unclosed attributes: Another common source of HTML problems.
   Let's look at an example: </strong>
diff --git a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html
index 081d12edf3..7128fd4462 100644
--- a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html
+++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html
@@ -76,7 +76,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум
 
 
    Активное обучение: исследование кода для нашего примера
    
 
-
    Наш пример, представленный выше, содержит следующий код (Вы также можете найти пример в нашем репозитории Github). Мы хотели бы, чтобы Вы взгянули на приведенный выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.
    
+
    Наш пример, представленный выше, содержит следующий код (Вы также можете найти пример в нашем репозитории Github). Мы хотели бы, чтобы Вы взглянули на приведенный выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.
    
 
 
    <!DOCTYPE html>
 <html>
@@ -259,7 +259,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум
 
 
    Самостоятельная работа: создайте свою собственную карту сайта
    
 
-
    Приментие наш метод к своему сайту. О чем он будет?
    
+
    Применить наш метод к своему сайту. О чем он будет?
    
 
 
    
 
    Примечание: Сохраните свой код, он Вам ещё понадобится.
    
@@ -267,7 +267,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум
 
 
    Заключение
    
 
-
    Вы стали лучше понимаеть, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.
    
+
    Вы стали лучше понимать, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.
    
 
 
    Дополнительные материалы
    
 
diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.html b/files/ru/learn/html/introduction_to_html/getting_started/index.html
index 89f5077314..1a726362e6 100644
--- a/files/ru/learn/html/introduction_to_html/getting_started/index.html
+++ b/files/ru/learn/html/introduction_to_html/getting_started/index.html
@@ -4,7 +4,7 @@ slug: Learn/HTML/Introduction_to_HTML/Getting_started
 tags:
   - Guide
   - HTML
-  - Аттрибуты
+  - Атрибуты
   - Для начинающих
   - Комментарии
   - Пробелы
@@ -283,7 +283,7 @@ textarea.onkeyup = function(){
  
  • target: Атрибут target определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, target="_blank" отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.
    • 
 
 
-
    Измените строку текста ниже в поле Ввод так, чтобы она вела на ваш любимый вебсайт. Сначала добавьте элемент <a>затем атрибут href и атрибут title. Наконец, укажите атрибут target чтобы открыть ссылку на новой вкладке. Вы можете наблюдать сделанные изменения в реальном времени в поле Вывод. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута title, а при щелчке переходит по адресу в атрибуте href. Помните, что между именем элемента и каждым из атрибутов должен быть пробел.
    
+
    Измените строку текста ниже в поле Ввод так, чтобы она вела на ваш любимый веб-сайт. Сначала добавьте элемент <a>затем атрибут href и атрибут title. Наконец, укажите атрибут target чтобы открыть ссылку на новой вкладке. Вы можете наблюдать сделанные изменения в реальном времени в поле Вывод. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута title, а при щелчке переходит по адресу в атрибуте href. Помните, что между именем элемента и каждым из атрибутов должен быть пробел.
    
 
 
    Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у Вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.
    
 
@@ -677,7 +677,7 @@ textarea.onkeyup = function(){
 
 
    В HTML символы <, >, ", ' и & являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.
    
 
-
    Мы должны использовать ссылки-мнемоники  — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с ампресанда (&) и завершается точкой с запятой (;).
    
+
    Мы должны использовать ссылки-мнемоники  — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с амперсанда (&) и завершается точкой с запятой (;).
    
 
 
@@ -736,13 +736,13 @@ textarea.onkeyup = function(){
 
 <!-- <p>А теперь есть!</p> -->
 
-
    Как вы увидете ниже, первый параграф будет отображён на экране, а второй нет.
    
+
    Как вы увидите ниже, первый параграф будет отображён на экране, а второй нет.
    {{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}
    Подведение итогов
    
 
-
    Вы дошли до конца статьи — надемся, вам понравилось путешествие по основам HTML. На этом этапе вы уже должны немного разобраться, как выглядит язык, как он работает на базовом уровне и уметь описать несколько элементов и атрибутов. Сейчас идеальное время и место, чтобы продолжить изучать HTML. В последующих статьях мы рассмотрим некоторые из вещей, которые вы уже рассмотрели, но намного подробнее, а также представим некоторые новые функции языка. Оставайтесь с нами!
    
+
    Вы дошли до конца статьи — надеемся, вам понравилось путешествие по основам HTML. На этом этапе вы уже должны немного разобраться, как выглядит язык, как он работает на базовом уровне и уметь описать несколько элементов и атрибутов. Сейчас идеальное время и место, чтобы продолжить изучать HTML. В последующих статьях мы рассмотрим некоторые из вещей, которые вы уже рассмотрели, но намного подробнее, а также представим некоторые новые функции языка. Оставайтесь с нами!
    
 
    Примечание: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или CSS. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймете, HTML и CSS созданы друг для друга.
    
diff --git a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html
index 8ca79e314e..65704d6d4c 100644
--- a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html
+++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html
@@ -78,7 +78,7 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals
 
    Всё это действительно зависит от вас — что именно будут представлять собой элементы, пока существует иерархия. Вам просто нужно иметь в виду несколько хороших правил при создании таких структур.
    
 
 
      
- 
    • Предпочтительнее использовать <h1> только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки распологаются ниже его в иерархии.
      • 
+ 
    • Предпочтительнее использовать <h1> только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки располагаются ниже его в иерархии.
      • 
  
    • Убедитесь, что вы используете заголовки в правильном порядке в иерархии.  Не используйте <h3> для создания подзаголовков при одновременном использовании <h2> для представления под-подзаголовков — это не имеет смысла и приведет к странным результатам.
      • 
  
    • Из шести доступных уровней заголовка вы должны стремиться использовать не более трех на странице, если только вы не чувствуете, что это необходимо. Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации. В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.
      • 
 
    
@@ -238,7 +238,7 @@ textarea.onkeyup = function(){
 
 
    Почему мы нуждаемся в семантике?
    
 
-
    Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметoв; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зеленый свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)
    
+
    Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зеленый свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)
    
 
 
    В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид. В этом контексте элемент {{htmlelement ("h1")}} также является семантическим элементом, который даёт тексту, который он обёртывает,  роль (или значение) «заголовка верхнего уровня на вашей странице».
    
 
@@ -725,7 +725,7 @@ textarea.onkeyup = function(){
 
 
    Вложенные списки
    
 
-
    Вполне нормально вложить один список в другой. Возможно, вы захотите, чтобы один список распологался внутри другого. Давайте возьмем второй список из нашего примера рецепта:
    
+
    Вполне нормально вложить один список в другой. Возможно, вы захотите, чтобы один список располагался внутри другого. Давайте возьмем второй список из нашего примера рецепта:
    
 
 
    <ol>
   <li>Очистите чеснок от кожуры и крупно нарежьте.</li>
diff --git a/files/ru/learn/html/introduction_to_html/index.html b/files/ru/learn/html/introduction_to_html/index.html
index a90af38b71..c914c8ff27 100644
--- a/files/ru/learn/html/introduction_to_html/index.html
+++ b/files/ru/learn/html/introduction_to_html/index.html
@@ -22,7 +22,7 @@ original_slug: Learn/HTML/Введение_в_HTML
 
 
    Необходимые условия
    
 
-
    Чтобы начать изучение этого модуля, вам не нужны никакие знания HTML, но вы должны иметь хотя бы базовые навыки обращения с компьютером и навыки пассивного использования Веба (т.е просто смотря на него, потребляя контент). У вас должна быть базовая рабочая среда, описанная в разделе Установка базового програмного обеспечения), а также понимание, как создавать и управлять файлами, что подробно описано в статье Работа с файлами — обе статьи являются частью нашего модуля Начало работы с сетью.
    
+
    Чтобы начать изучение этого модуля, вам не нужны никакие знания HTML, но вы должны иметь хотя бы базовые навыки обращения с компьютером и навыки пассивного использования Веба (т.е просто смотря на него, потребляя контент). У вас должна быть базовая рабочая среда, описанная в разделе Установка базового программного обеспечения), а также понимание, как создавать и управлять файлами, что подробно описано в статье Работа с файлами — обе статьи являются частью нашего модуля Начало работы с сетью.
    
 
 
    
 
    Примечание: если вы работаете на компьютере/планшете/другом устройстве, с отсутствием возможности создания собственных файлов, вы можете испробовать примеры кода (большинство) в онлайн-редакторах кода, таких как JSBin или Thimble.
    
@@ -38,7 +38,7 @@ original_slug: Learn/HTML/Введение_в_HTML
  
    Что такое заголовок? Метаданные в HTML
    
  
    Заголовок HTML — это часть документа, которая не отображается в браузере при загрузке страницы. Он содержит информацию, такую как: страница {{htmlelement("title")}}, ссылки на {{glossary("CSS")}} (если вы хотите стилизовать свой HTML при помощи CSS), ссылки на пользовательские значки и метаданные (которые представляют собой данные о HTML, например, кто его написал или важные ключевые слова, которые описывают документ).
    
  
    Основы редактирования текста в HTML
    
- 
    Основной задачей HTML является придание тексту значения (также известно, как семантика), чтобы браузер знал, как его правильно отображать. В этой статье расматривается то, как использовать HTML, чтобы разбить блок текста на структуру из заголовков и абзацев, добавить акцент/значение слов, создать списки и многое другое.
    
+ 
    Основной задачей HTML является придание тексту значения (также известно, как семантика), чтобы браузер знал, как его правильно отображать. В этой статье рассматривается то, как использовать HTML, чтобы разбить блок текста на структуру из заголовков и абзацев, добавить акцент/значение слов, создать списки и многое другое.
    
  
    Создание гиперссылок
    
  
    Гиперссылки очень важны — ведь именно они делают интернет интернетом. В этой статье описан синтаксис, необходимый для создания ссылок, а также описано их наилучшее применение на практике.
    
  
    Углубленное форматирование текста
    
@@ -55,7 +55,7 @@ original_slug: Learn/HTML/Введение_в_HTML
 
 
    
  
    Разметка письма
    
- 
    Все мы рано или поздно учимся писать письма; также это полезеный тест, для проверки ваших навыков форматирования текста! Поэтому, в этом задании вам будет предоставлено письмо для разметки.
    
+ 
    Все мы рано или поздно учимся писать письма; также это полезный тест, для проверки ваших навыков форматирования текста! Поэтому, в этом задании вам будет предоставлено письмо для разметки.
    
  
    Структурируем страницу
    
  
    Этот тест проверит вашу способность использовать HTML для структурирования простой страницы, которая содержит шапку ("хедер") , нижний колонтитул ("футер"), меню навигации, основное содержимое и боковую панель.
    
 
    
@@ -64,5 +64,5 @@ original_slug: Learn/HTML/Введение_в_HTML
 
 
    
  
    Основы интернет-грамотности
    
- 
    Отличный фундаментальный курс Mozilla, который дает множество тестов, проверяющих знания, о которых мы говорили в модуле Введение в HTML. Учащиееся знакомятся с чтением, письмом и использованием сети в модуле из 6 частей. Откройте для себя основы Интернета через производство и сотрудничество.
    
+ 
    Отличный фундаментальный курс Mozilla, который дает множество тестов, проверяющих знания, о которых мы говорили в модуле Введение в HTML. Учащиеся знакомятся с чтением, письмом и использованием сети в модуле из 6 частей. Откройте для себя основы Интернета через производство и сотрудничество.
    
 
    
diff --git a/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html
index cb0956fa0b..4638bb8c24 100644
--- a/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html
+++ b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html
@@ -31,7 +31,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter
 
 
    Отправная точка
    
 
-
    Для начала задания, вы должны скачать текст, который вам надо отформатировать, и CSS стиль, который вы должны подключить к вашему HTML. Создайте .html файл используюя текстовый редактор, которым вы пользуетесь (или воспользуйтесь онлайн редактороми, таким как JSBin или Thimble).
    
+
    Для начала задания, вы должны скачать текст, который вам надо отформатировать, и CSS стиль, который вы должны подключить к вашему HTML. Создайте .html файл используя текстовый редактор, которым вы пользуетесь (или воспользуйтесь онлайн редакторами, таким как JSBin или Thimble).
    
 
 
    Описание проекта
    
 
@@ -42,7 +42,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter
 
      
  
    • Вы должны корректно структурировать весь документ, включив в него элементы doctype, и {{htmlelement("html")}}, {{htmlelement("head")}} и {{htmlelement("body")}}.
      • 
  
    • Письмо в целом должно быть размечено используя параграфы и заголовки, за исключением следующих пунктов - один заголовок верхнего уровня (начинается на "Re:") и три заголовка второго уровня.
      • 
- 
    • Даты начала семестра, изучения предметов и экзотических танцев должны быть помечены используя соответсвующие типы списков.
      • 
+ 
    • Даты начала семестра, изучения предметов и экзотических танцев должны быть помечены используя соответствующие типы списков.
      • 
  
    • Два адреса должны быть помещены внутри элементов {{htmlelement("address")}}. Каждая строка адреса должна находиться на новой строке, но не быть новым параграфом.
      • 
 
    
 
@@ -51,7 +51,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter
 
      
  
    • Имена отправителя и получателя (как и "Tel" и "Email") должны быть выделены жирным.
      • 
  
    • Четырем датам в документе необходимо выбрать правильные элементы содержащие машинно-читаемые даты.
      • 
- 
    • Первый адрес и первая дата в письме должны иметь аттрибут class со значением "sender-column"; CSS стиль, который вы добавите позже, позволит выравнять по правому боку, как оно и должно быть в классической разметке письма.
      • 
+ 
    • Первый адрес и первая дата в письме должны иметь атрибут class со значением "sender-column"; CSS стиль, который вы добавите позже, позволит выравнять по правому боку, как оно и должно быть в классической разметке письма.
      • 
  
    • Пять акронимов/аббревиатур в главном тексте письма должны быть размечены, чтобы предоставить подсказки для каждого акронима/аббревиатуры.
      • 
  
    • Шесть под/надстрочных элементов должны быть оформлены корректно в химической формуле, как и числа 103 и 104 (степень числа должна быть над числом).
      • 
  
    • Для разметки символов градуса и умножения воспользуйтесь справкой.
      • 
diff --git a/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
index 0dd009c3bc..3f0fe71917 100644
--- a/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
+++ b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
@@ -16,7 +16,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content
  
    
-   
+   
@@ -29,7 +29,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content
 
 
    Отправная точка
    
 
-
    Чтобы начать это, вы должны перейти и скачать архив содержаший все начальные активы. Архив содержит:
    
+
    Чтобы начать это, вы должны перейти и скачать архив содержащий все начальные активы. Архив содержит:
      
  
    • HTML, где вам нужно добавить структурную разметку.
      • 
@@ -52,7 +52,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content
 
      Вам необходимо добавить подходящую обертку для:
      
 
 
        
- 
      • Заголовока
        • 
+ 
      • Заголовка
        • 
  
      • Меню навигации
        • 
  
      • Основного содержимого
        • 
  
      • Приветственного текста
        • 
diff --git a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
index 9563f7edbe..01a807747e 100644
--- a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
+++ b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
@@ -71,7 +71,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
 
 
        Название страницы (title)
        
 
-
        Мы уже видели, как работает элемент {{htmlelement("title")}}: его используют для добавления заголовка (названия страницы) в документ. Элемент {{htmlelement("h1")}} тоже иногда назвают заголовком страницы. Но это разные вещи!
        
+
        Мы уже видели, как работает элемент {{htmlelement("title")}}: его используют для добавления заголовка (названия страницы) в документ. Элемент {{htmlelement("h1")}} тоже иногда называют заголовком страницы. Но это разные вещи!
        
 
 
          
  
        • Элемент {{htmlelement("h1")}} виден на странице, открытой в браузере, — его используют один раз на странице, чтобы выделить название содержимого. Это может быть название истории, заголовок новости или что-то в этом роде.
          • 
@@ -110,7 +110,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
 
 
          <meta charset="utf-8">
          
 
-
          В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . utf-8 — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-страницов, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:
          
+
          В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . utf-8 — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-странице, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:
          
 
 
          a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Если использовать, скажем, кодировку ISO-8859-1 (набор символов для латиницы), текст страницы испортится:
          
 
@@ -176,7 +176,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
 
 
          В сети вы найдете также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определенным сайтам (например, социальных сетей) специальной информации, которую они могут использовать.
          
 
-
          Например, Протокол Open Graph создан Facebook чтобы предоставить сайтам дополнительные возможности использования метеданных. В исходном коде MDN Web Docs вы можете найти строки:
          
+
          Например, Протокол Open Graph создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:
          
 
 
          <meta property="og:image" content="https://wiki.developer.mozilla.org/static/img/opengraph-logo.72382e605ce3.png">
 <meta property="og:description" content="Веб-документация на MDN предоставляет
@@ -185,7 +185,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
 продуктах Mozilla, как Инструменты разработчика Firefox.">
 <meta property="og:title" content="MDN Web Docs">
          
 
-
          Один из результатов добавления этих метеданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия (User eXperience, UX).
          
+
          Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия (User eXperience, UX).
          
 
 
          Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.У Twitter также есть собственный формат метаданных, с помощью которого  создается аналогичный эффект, при отображении URL сайта на twitter.com:
          
 
@@ -225,7 +225,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
 
 
          Подключение CSS и JavaScript
          
 
-
          Современные сайты используют {{glossary("CSS")}}, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через {{glossary("JavaScript")}}: видеоплееры, карты, игры. Обычно связянные стили добавляют на страницу через элемент {{htmlelement("link")}}, а скрипты — через элемент {{htmlelement("script")}} .
          
+
          Современные сайты используют {{glossary("CSS")}}, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через {{glossary("JavaScript")}}: видеоплееры, карты, игры. Обычно связанные стили добавляют на страницу через элемент {{htmlelement("link")}}, а скрипты — через элемент {{htmlelement("script")}} .
          
 
 
            
  
          • 
diff --git a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
index 9e6eb3707e..3d241796d9 100644
--- a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
+++ b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
@@ -20,7 +20,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
   
    
-   
+   
    
  
 
 
 
 
 
 
   
    
    Что нужно знать:Вам пондобятся навыки из всего курса. Особое внимание уделите разделу Структура документа и веб-сайта.Вам понадобятся навыки из всего курса. Особое внимание уделите разделу Структура документа и веб-сайта.
   
    
   
    
    Цель:
 
 
    
   
    
    Цель:Изучить как встроить SVG (векторное) изображение на вебстраницу.Изучить как встроить SVG (векторное) изображение на веб-страницу.
   
    
      
 
    
@@ -47,14 +47,14 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
 
    Two star images zoomed in, one crisp and the other blurry
    
 
 
    
-
    Примечание: Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и веркторным изображениями находится по ссылке: vector-versus-raster.html !
    
+
    Примечание: Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: vector-versus-raster.html !
    
 
    
 
 
    Более того, файлы векторных изображений намного меньше растровых, т.к. в них содержится алгоритмы построения вместо информации о каждом пикселе.
    
 
 
    Что такое SVG?
    
 
-
    SVG это язык на базе {{glossary("XML")}} для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае,  Вы можете использовать элементы для создания простых фигур, таких как {{svgelement("circle")}}(круг) и {{svgelement("rect")}}(прямоугольник). Более сложные SVG элементы включают {{svgelement("feColorMatrix")}} (разложение цвета с использованием матрицы), {{svgelement("animate")}} (анимация частей Вашего векторного изображения) и {{svgelement("mask")}} (примение маски к изображению.)
    
+
    SVG это язык на базе {{glossary("XML")}} для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае,  Вы можете использовать элементы для создания простых фигур, таких как {{svgelement("circle")}}(круг) и {{svgelement("rect")}}(прямоугольник). Более сложные SVG элементы включают {{svgelement("feColorMatrix")}} (разложение цвета с использованием матрицы), {{svgelement("animate")}} (анимация частей Вашего векторного изображения) и {{svgelement("mask")}} (применение маски к изображению.)
    
 
 
    В качестве простого примера, следующий код создает круг и прямоугольник:
    
 
@@ -134,7 +134,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
 background-image: url("image.svg");
 background-size: contain;
    
 
-
    Подобно методу <img>, описанному выше, вставка SVG с использлованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.
    
+
    Подобно методу <img>, описанному выше, вставка SVG с использованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.
    
 
 
    Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то данная статья укажет вам верное направление.
    
 
@@ -189,7 +189,7 @@ background-size: contain;

    Активное изучение: поиграйте с SVG

    -

    В этом разделе ативного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в областе Input, вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А еще вы можете посетить SVG Element Reference, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящен практике ваших исследовательских навыков и вашему развлечению.

    +

    В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области Input, вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А еще вы можете посетить SVG Element Reference, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящен практике ваших исследовательских навыков и вашему развлечению.

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

    diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html index 3bf7b57393..3dc16ecfd2 100644 --- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -28,7 +28,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM

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

    -

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

    +

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

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

    @@ -49,10 +49,10 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM 
    <img src="https://www.example.com/images/dinosaur.jpg">
    -

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

    +

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

    -

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

    +

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

    • вы не будете владеть изображением
      • @@ -112,7 +112,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM

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

      -

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

      +

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

      <img src="images/dinosaur.jpg"
      alt="The head and torso of a dinosaur skeleton;
@@ -126,7 +126,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
 
 
      Это хорошая практика, в результате страница загрузится быстрее и более гладко.
      
 
-
      Однако, вы не должны изменять размеры ваших изображений используя HTML аттрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы сталкнётесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное соотношение сторон. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу вэб-страницу.
      
+
      Однако, вы не должны изменять размеры ваших изображений используя HTML атрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнетесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное соотношение сторон. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу веб-страницу.
      
 
 
      
 
      Примечание: Если вам действительно нужно изменить размер изображения, вы должны использовать вместо этого CSS.
      
diff --git a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
index d3233346a2..8cbd9191df 100644
--- a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
+++ b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
@@ -35,7 +35,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla
 
 
      Описание проекта
      
 
-
      В этом задании мы представляем вам почти законченый сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углубленного ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:
      
+
      В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углубленного ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:
      
 
 
      Подготовка изображений
      
 
@@ -51,7 +51,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla
 
 
      Вместе с mdn.svg, эти изображения будут иконками для ссылок на другие ресурсы внутри секции further-info. Вы также дадите ссылку на логотип Firefox в шапке сайта. Сохраните все копии внутри той же папки, что и index.html.
      
 
-
      Затем создайте фоновую версию  red-panda.jpg шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распозновать их. Сохраните обе копии внутри той же папки, что и index.html.
      
+
      Затем создайте фоновую версию  red-panda.jpg шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распознавать их. Сохраните обе копии внутри той же папки, что и index.html.
      
 
 
      
 
      Note: Следует  обрабатывать JPG и PNG изображения, чтобы делать их как можно меньше по весу, при сохранении хорошего вида. tinypng.com - отличный сервис для этого.
      
@@ -65,7 +65,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla
 
 
      Внутри элемента {{htmlelement("article")}} (сразу после открывающего тэга), вставьте ролик с YouTube по ссылке https://www.youtube.com/watch?v=ojcNcvb1olg, используя подходящие инструменты YouTube для генерации кода. Видео должно быть 400px в ширину.
      
 
-
      Добавление отзывчивых изображений к ссылкам с доп. информацей
      
+
      Добавление отзывчивых изображений к ссылкам с доп. информацией
      
 
 
      Внутри {{htmlelement("div")}} с классом further-info вы найдёте четыре элемента {{htmlelement("a")}}  — каждый из которых ссылается на интересную страницу, связанную с Mozilla. Для завершения этой секции вам необходимо поместить элемент {{htmlelement("img")}} внутрь каждого элемента {{htmlelement("a")}} дополнив подходящими атрибутами {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}}.
      
 
diff --git a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
index 7ad838ef1b..7d32a65685 100644
--- a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
+++ b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
@@ -355,7 +355,7 @@ textarea.onkeyup = function(){
 
 
      Заключение
      
 
-
      Тема встраивания другого контента в веб-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить ее простым, знакомым способом, который сразу же станет актуальным, но все же намекает на некоторые из более сложных функций вовлеченных технологий. Начнем с того, что вы вряд ли будете использовать большое количество встраиваний стороннего контента, помимо встроенных карт и видео на своих страницах.
      
+
      Тема встраивания другого контента в веб-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить ее простым, знакомым способом, который сразу же станет актуальным, но все же намекает на некоторые из более сложных функций вовлеченных технологий. Начнем с того, что вы вряд ли будете использовать большое количество встраивании стороннего контента, помимо встроенных карт и видео на своих страницах.
      
 
 
      Существует много других технологий, которые включают в себя внедрение внешнего контента, помимо тех, которые мы обсуждали здесь. Мы видели некоторые из ранних статей, например {{htmlelement ("video")}}, {{htmlelement ("audio")}} и {{htmlelement ("img")}}, но есть и другие. Например, {{htmlelement ("canvas")}} для 2D-и 3D-графики, сгенерированной JavaScript, и {{SVGElement ("svg")}} для встраивания векторной графики. Мы рассмотрим SVG в следующей статье модуля.
      
 
diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html
index b65ec750e1..d08e65fc01 100644
--- a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html
+++ b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html
@@ -107,9 +107,9 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
  
    • Загрузит изображение из списка из srcset, которое имеет тот же размер, что и выбранный слот, или, если такого нет, то первое изображение, которое больше размера выбранного слота. 
      • 
 
 
-
      И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие (max-width: 480px) будет истинно, следовательно, будет выбран слот 440px, тогда будет загружено изображение elva-fairy-480w.jpg, так как свойство ширины (480w) наиболее близко значение 440px. Условно, изоображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.
      
+
      И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие (max-width: 480px) будет истинно, следовательно, будет выбран слот 440px, тогда будет загружено изображение elva-fairy-480w.jpg, так как свойство ширины (480w) наиболее близко значение 440px. Условно, изображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.
      
 
-
      Старые брузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута {{htmlattrxref("src", "img")}}.
      
+
      Старые браузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута {{htmlattrxref("src", "img")}}.
      
 
 
      
 
      Note: В описании элемента {{htmlelement("head")}} вы найдёте строку <meta name="viewport" content="width=device-width">: это заставляет мобильные браузеры адаптировать их реальный viewport width для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своего viewport width, вместо этого они загружают страницу в большем viewport width, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне. Мы расскажем вам об этом больше в будущем модуле.)
      
@@ -129,7 +129,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
 
 
      Переключения разрешений: Одинаковый размер, разные разрешения
      
 
-
      Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя srcset с x-дисриптором и без sizes — более простой синтаксис! Найти пример как это выглядит можно здесь srcset-resolutions.html (смотрите также the source code):
      
+
      Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя srcset с x-дескриптором и без sizes — более простой синтаксис! Найти пример как это выглядит можно здесь srcset-resolutions.html (смотрите также the source code):
      
 
 
      <img srcset="elva-fairy-320w.jpg,
              elva-fairy-480w.jpg 1.5x,
@@ -137,13 +137,13 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
      src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
 
      
 
-
      A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageВ данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называмое CSS-пикселями):
      
+
      A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageВ данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):
      
 
 
      img {
   width: 320px;
 }
      
 
-
      В этом случае, нет необходимости в sizes — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с srcset. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответсвтует) каждый CSS-пиксель, то будет загружено изображение elva-fairy-320w.jpg (применен x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение elva-fairy-640w.jpg. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.
      
+
      В этом случае, нет необходимости в sizes — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с srcset. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответствует) каждый CSS-пиксель, то будет загружено изображение elva-fairy-320w.jpg (применен x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение elva-fairy-640w.jpg. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.
      
 
 
      Художественное оформление
      
 
@@ -153,7 +153,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
 
 
      <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
      
 
-
      Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <video> и <audio>, элемент <picture> это обертка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождаении крайне важного элемента {{htmlelement("img")}}. Код responsive.html выглядит так:
      
+
      Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <video> и <audio>, элемент <picture> это обертка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента {{htmlelement("img")}}. Код responsive.html выглядит так:
      
 
 
      <picture>
   <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
@@ -163,8 +163,8 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
 
      
 
 
        
- 
      • Элемент <source> принимает атрибут media, который содержит медиа-условие; при помощи этих условий опредяется, какое изображение будет выведено. В данном случае, если ширина viewport'a составит 799px или меньше, будет выведено изображение первого элемента <source>. Если ширина составит 800px и более — второго.
        • 
- 
      • Атрибут srcset содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с <img> выше, <source> может принимать атрибуты srcset и sizes с несколько предопределенными изображниями. Так вы можете не только поместить группу изображений внутри элемента <picture>, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.
        • 
+ 
      • Элемент <source> принимает атрибут media, который содержит медиа-условие; при помощи этих условий определяется, какое изображение будет выведено. В данном случае, если ширина viewport'a составит 799px или меньше, будет выведено изображение первого элемента <source>. Если ширина составит 800px и более — второго.
        • 
+ 
      • Атрибут srcset содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с <img> выше, <source> может принимать атрибуты srcset и sizes с несколько предопределенными изображениями. Так вы можете не только поместить группу изображений внутри элемента <picture>, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.
        • 
  
      • Вы всегда должны использовать элемент <img>, с src и alt, прямо перед </picture>, иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент <source>) или браузер не поддерживает элемент <picture>.
        • 
 
      
 
@@ -173,12 +173,12 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
 
      Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen
      
 
 
      
-
      Примечание: Вам следует использовать атрибут media только при художественном оформлении; когда вы используюте media, не применяйте медиа-условия с атрибутом sizes.
      
+
      Примечание: Вам следует использовать атрибут media только при художественном оформлении; когда вы используете media, не применяйте медиа-условия с атрибутом sizes.
      
 
      
 
 
      Почему это нельзя сделать посредством CSS и JavaScript?
      
 
-
      Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решeния, как srcset. Например, вы не могли бы загрузить элемент <img>, потом определить ширину viewport'а при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.
      
+
      Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решения, как srcset. Например, вы не могли бы загрузить элемент <img>, потом определить ширину viewport'а при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.
      
 
 
        
 
      
@@ -210,7 +210,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
  
    • Напишите простую HTML-разметку.
      • 
  
    • Найдите широкоформатное пейзажное фото с какой-нибудь яркой деталью. Создайте веб-версию изображения посредством графического редактора, потом обрежьте его, чтобы крупнее выделить деталь, и создайте второе изображение (примерно 480px достаточно).
      • 
  
    • Используйте элемент <picture> для работы с художественно оформленной картинкой.
      • 
- 
    • Обозначьте несколько разных размеров для этой картикни.
      • 
+ 
    • Обозначьте несколько разных размеров для этой картинки.
      • 
  
    • Используйте srcset/size для описания переключения при смене размеров viewport'а
      • 
 
 
@@ -227,7 +227,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
  
    • Переключение разрешений: Проблема, при которой вы хотите использовать файлы изображений меньшего размера на устройствах с узким экраном, поскольку им не нужны огромные изображения, как на настольных дисплеях, а также дополнительно, что вы хотите использовать изображения разного разрешения для экранов с высокой/низкой плотностью. Эту проблему можно решить с помощью векторной графики (SVG изображений), и {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}} атрибуты.
      •
    -

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

    +

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

    Посмотрите так же

    diff --git a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index e37ffaabd4..84751810da 100644 --- a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -86,7 +86,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content

    Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные {{Glossary("Codec","кодеки")}}, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придется предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.

    -

    Примечание: Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года,  так что браузеры, которые не являются держетелями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.

    +

    Примечание: Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года,  так что браузеры, которые не являются держателями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.

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

    diff --git a/files/ru/learn/html/tables/advanced/index.html b/files/ru/learn/html/tables/advanced/index.html index 6314fedda1..e578557eb7 100644 --- a/files/ru/learn/html/tables/advanced/index.html +++ b/files/ru/learn/html/tables/advanced/index.html @@ -46,7 +46,7 @@ translation_of: Learn/HTML/Tables/Advanced
    1. Откройте расписание занятий школьного учителя по языку в конце статьи HTML таблицы основы, или сделайте копию нашего timetable-fixed.html файла.
      2. -
    2. Добвьте подходящий заголовок к таблице.
      3. +
    3. Добавьте подходящий заголовок к таблице.
    4. Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.
    @@ -58,18 +58,18 @@ translation_of: Learn/HTML/Tables/Advanced

    Когда таблицы становятся более сложными по структуре полезно дать им более структурированное определение. Отличный способ  сделать это используя {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и {{htmlelement("tbody")}}, которые позволяют вам разметить header, footer и body секции таблицы.

    -

    Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отбражаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.

    +

    Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.

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

    • Элементом <thead> нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете {{htmlelement("col")}}/{{htmlelement("colgroup")}} элемент, тогда заголовок должен находиться ниже его.
      • -
    • Элементом <tfoot> нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отбражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер все равно отобразит его внизу таблицы).
      • +
    • Элементом <tfoot> нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер все равно отобразит его внизу таблицы).
    • Элементом <tbody> необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).
    -

    Примечание: <tbody> всегда включен в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <tbody> и посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включениии, но вы должны, потому что это дает больше контроля над структурой таблицы и стилем.

    +

    Примечание: <tbody> всегда включен в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <tbody> и посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это дает больше контроля над структурой таблицы и стилем.

    Упражнение: Добавление структуры таблицы

    @@ -80,7 +80,7 @@ translation_of: Learn/HTML/Tables/Advanced
  • В первую очередь,  сделайте копию spending-record.html и minimal-table.css в новой папке.
  • Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка "SUM" которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.
  • Поместите очевидную строку заголовка внутрь <thead> элемента, строку "SUM" внутрь <tfoot> элемента и оставшийся контент внутрь <tbody> элемента.
    • -
  • Сохраните, презагрузите и вы увидите, что добавление элемента <tfoot> привело к тому,  что строка "SUM" опустилась к нижней части таблицы.
    • +
  • Сохраните, перезагрузите и вы увидите, что добавление элемента <tfoot> привело к тому,  что строка "SUM" опустилась к нижней части таблицы.
  • Далее, добавьте атрибут {{htmlattrxref("colspan","td")}}, чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.
  • Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в <head> вашего HTML документа вы увидите пустой элемент {{htmlelement("style")}}. Внутри этого элемента добавьте следующие строки CSS кода: 
    tbody {
@@ -349,13 +349,13 @@ tfoot {
  
 
 
-
    Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации програмными.
    
+
    Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации программными.
    
 
 
    В этой части статьи приводятся дополнительные способы которые делают таблицы более доступными.
    
 
 
    Использование заголовков столбцов и строк
    
 
-
    Скринридеры будут определять все заголовки и использовать их создавая програмные ассоциации между этими заголовками и ячейками к которым они относятся. Сочетание заголовков столбцов и строк будет определять и интерпретировать данные в каждой ячейке так, что пользователи скринридеров могут интерпретировать таблицу также как это делают зрячие пользователи.
    
+
    Скринридеры будут определять все заголовки и использовать их создавая программные ассоциации между этими заголовками и ячейками к которым они относятся. Сочетание заголовков столбцов и строк будет определять и интерпретировать данные в каждой ячейке так, что пользователи скринридеров могут интерпретировать таблицу также как это делают зрячие пользователи.
    
 
 
    Мы уже разобрали заголовки в предыдущей статье, смотри по ссылке Добавление заголовков с помощью элемента <th>.
    
 
diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html
index a393a80a84..15f766186a 100644
--- a/files/ru/learn/html/tables/basics/index.html
+++ b/files/ru/learn/html/tables/basics/index.html
@@ -117,10 +117,10 @@ translation_of: Learn/HTML/Tables/Basics
 
      
  
    1. Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением: Скринридеры (Screenreaders), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.
      2. 
  
    2. Таблицы создают путаницу тегов: Как уже упоминалось, оформление страниц с помощью таблиц дает более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
      3. 
- 
    3. Таблицы не реагируют автоматически на тип устройства: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходими принимать дополнительные меры.
      4. 
+ 
    4. Таблицы не реагируют автоматически на тип устройства: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.
      5. 
 
    
 
-
    Упражение: Ваша первая таблица
    
+
    Упражнение: Ваша первая таблица
    
 
 
    Итак, мы уже достаточно говорили о теории, теперь возьмем конкретный пример и построим таблицу.
    
 
@@ -290,7 +290,7 @@ translation_of: Learn/HTML/Tables/Basics
 
 
    Слияние нескольких строк или столбцов
    
 
-
    Иногда нам нужно, чтобы ячейки распротранялись на несколько строк или столбцов. Возьмем простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.
    
+
    Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмем простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.
    
 
 
    Исходная разметка выглядит так:
    
 
@@ -511,7 +511,7 @@ translation_of: Learn/HTML/Tables/Basics
 
    Заново создайте таблицу, проделав указанные ниже действия.
    
 
 
      
- 
    1. Сначала создайте локальную копию файла timetable.html в новой папке на вашем копьютере. Код HTML содержит таблицу, которую вы уже видели выше, но без информации о стиле.
      2. 
+ 
    2. Сначала создайте локальную копию файла timetable.html в новой папке на вашем компьютере. Код HTML содержит таблицу, которую вы уже видели выше, но без информации о стиле.
      3. 
  
    3. Добавьте элемент <colgroup> вверху таблицы, сразу же под тегом <table>, куда вы сможете вставлять элементы <col>.
      4. 
  
    4. Первые два столбца надо оставить без стиля..
      5. 
  
    5. Добавьте цвет фона для третьего столбца. Значением атрибута style будет  background-color:#97DB9A;
      6. 
diff --git a/files/ru/learn/html/tables/structuring_planet_data/index.html b/files/ru/learn/html/tables/structuring_planet_data/index.html
index ef5ff547c0..b7e8ab227d 100644
--- a/files/ru/learn/html/tables/structuring_planet_data/index.html
+++ b/files/ru/learn/html/tables/structuring_planet_data/index.html
@@ -31,14 +31,14 @@ translation_of: Learn/HTML/Tables/Structuring_planet_data
 
      Для того, чтобы начать аттестацию, скопируйте blank-template.html, minimal-table.css, и planets-data.txt в новую директорию на вашем компьютере.
      
 
 
      
-
      Примечание: В качестве альтарнативы, вы можете использовать такие сайты, как  JSBin или Glitch, чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять <script>/<style> элементы в HTML страницу.
      
+
      Примечание: В качестве альтернативы, вы можете использовать такие сайты, как  JSBin или Glitch, чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять <script>/<style> элементы в HTML страницу.
      
 
      
 
 
      Краткое описание проекта
      
 
 
      Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведенным инструкциям.
      
 
-
      Готовая таблица должна выглядить так:
      
+
      Готовая таблица должна выглядеть так:
      
 
 
      
 
@@ -49,12 +49,12 @@ translation_of: Learn/HTML/Tables/Structuring_planet_data
 
 
      Шаги для завершения
      
 
-
      Следующие шаги опистывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле planets-data.txt. Если у вас возникли проблемы с визуализацией данных, посмотрите приведенный выше пример или попробуйте нарисовать диаграмму.
      
+
      Следующие шаги описывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле planets-data.txt. Если у вас возникли проблемы с визуализацией данных, посмотрите приведенный выше пример или попробуйте нарисовать диаграмму.
      
 
 
        
- 
      1. Откройте вашу копию blank-template.html , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтинул (footer) для этого примера.
        2. 
+ 
      2. Откройте вашу копию blank-template.html , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтитул (footer) для этого примера.
        3. 
  
      3. Добавьте предоставленную подпись к вашей таблице ("Сaption" в конце planets-data.txt).
        4. 
- 
      4. Добавьте строку в заголовок таблицы, содержащуюю все заголовки столбцов.
        5. 
+ 
      5. Добавьте строку в заголовок таблицы, содержащую все заголовки столбцов.
        6. 
  
      6. Создайте все строки содержимого внутри тела таблицы, помня, что все заголовки строк должны быть семантически.
        7. 
  
      7. Убедитесь, что весь контент помещен в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.
        8. 
  
      8. Добавьте атрибуты, чтобы заголовки строк и столбцов были однозначно связаны со строками, столбцами или группами строк, для которых они выступают в качестве заголовков.
        9. 
diff --git a/files/ru/learn/index.html b/files/ru/learn/index.html
index b986457de7..58282e7a14 100644
--- a/files/ru/learn/index.html
+++ b/files/ru/learn/index.html
@@ -108,7 +108,7 @@ translation_of: Learn
 
 
        Если вы хотите оставаться с нами на связи, то лучший способ — отправить сообщение в наши списки рассылки или IRC-каналы. Мы хотели бы услышать от вас о том, что на нашем сайте что-то отсутствует или неправильно, запросы новых тем по обучению, просьбы помощи с аспектами, которые вы не понимаете, или что-то ещё.
        
 
-
        Если вам интересно создание или улучшение контента, посмотрите, как вы можете помочь, и оставайтесь на связи! Мы будем очень рады поговорить с вами, будь вы обучающийся, преподаватель, опытный веб-разработчик или кто-либо другой, заитересованный в улучшении обучения.
        
+
        Если вам интересно создание или улучшение контента, посмотрите, как вы можете помочь, и оставайтесь на связи! Мы будем очень рады поговорить с вами, будь вы обучающийся, преподаватель, опытный веб-разработчик или кто-либо другой, заинтересованный в улучшении обучения.
        
 
 
        Смотрите также
        
 
diff --git a/files/ru/learn/javascript/asynchronous/async_await/index.html b/files/ru/learn/javascript/asynchronous/async_await/index.html
index 8146dcfaa1..bef0f49847 100644
--- a/files/ru/learn/javascript/asynchronous/async_await/index.html
+++ b/files/ru/learn/javascript/asynchronous/async_await/index.html
@@ -86,7 +86,7 @@ hello().then(alert);

    Конечно, на практике код выше бесполезен, но в учебных целях он иллюстрирует синтаксис асинхронных функций. Теперь давайте перейдем к реальным примерам.

    -

    Переписываем Promises с ипользованием async/await

    +

    Переписываем Promises с использованием async/await

    Давайте посмотрим на пример из предыдущей статьи:

    @@ -154,15 +154,15 @@ myFetch().then((blob) => {

    Минуточку, а как это все работает ?

    -

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

    +

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

    -

    Внутри myFetch() находится код, который слегка напоминает версию на Promise, но есть важные отличия. Вместо того, чтобы писать цепочку блоков .then() мы просто использует ключевое слово await перед вызовом promise-based функции и присваиваем результат в переменную. Ключеовое слово await говорит JavaScript runtime приостановить код в этой строке, не блокируя остальной код скприта за пределами асинхронной функции. Когда вызов promise-based функции будет готов вернуть результат, выполнение продолжится с этой строки дальше.
    +

    Внутри myFetch() находится код, который слегка напоминает версию на Promise, но есть важные отличия. Вместо того, чтобы писать цепочку блоков .then() мы просто использует ключевое слово await перед вызовом promise-based функции и присваиваем результат в переменную. Ключевое слово await говорит JavaScript runtime приостановить код в этой строке, не блокируя остальной код скрипта за пределами асинхронной функции. Когда вызов promise-based функции будет готов вернуть результат, выполнение продолжится с этой строки дальше.

    Пример:

    let response = await fetch('coffee.jpg');
    -

    Значение Promise, которое вернет fetch() будет присвоено переменной response только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создается объект Blob из результата Promise. В этой строке, кстати, также используется await, потому что метод .blob() также возвращет Promise. Когда результат готов, мы возвращаем его наружу из myFetch().

    +

    Значение Promise, которое вернет fetch() будет присвоено переменной response только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создается объект Blob из результата Promise. В этой строке, кстати, также используется await, потому что метод .blob() также возвращает Promise. Когда результат готов, мы возвращаем его наружу из myFetch().

    Обратите внимание, когда мы вызываем myFetch(), она возвращает Promise, поэтому мы можем вызвать .then() на результате, чтобы отобразить его на экране.

    @@ -229,7 +229,7 @@ myFetch().then((blob) => {

    Await и Promise.all()

    -

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

    +

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

    Версия с async/await (смотрите live demo и source code), сейчас выглядит так:

    @@ -298,7 +298,7 @@ displayContent()

    Асинхронные функции с async/await бывают очень удобными, но есть несколько замечаний, о которых полезно знать.

    -

    Async/await позволяет вам писать код в синхронном стиле. Ключевое слово await блокирует приостанавливает выполнение ptomise-based функции до того момента, пока promise примет статуc fulfilled. Это не блокирует код за пределами вашей асинхронной функции, тем не менее важно помнить, что внутри асинхронной функции поток выполнения блокируется.
    +

    Async/await позволяет вам писать код в синхронном стиле. Ключевое слово await блокирует приостанавливает выполнение ptomise-based функции до того момента, пока promise примет статус fulfilled. Это не блокирует код за пределами вашей асинхронной функции, тем не менее важно помнить, что внутри асинхронной функции поток выполнения блокируется.

    Ваш код может стать медленнее за счет большого количества awaited promises, которые идут один за другим. Каждый await должен дождаться выполнения предыдущего, тогда как на самом деле мы хотим, чтобы наши Promises выполнялись одновременно, как если бы мы не использовали async/await.

    @@ -320,7 +320,7 @@ displayContent() ... } -

    В каждом примере функция записывает время начала исполнения и сколько времерни понадобилось на испольние  timeTest()  промисов, вычитая время в момент запуска функции из времени в момент разрешения обещаний:

    +

    В каждом примере функция записывает время начала исполнения и сколько времени понадобилось на исполнение  timeTest()  промисов, вычитая время в момент запуска функции из времени в момент разрешения обещаний:

    let startTime = Date.now();
 timeTest().then(() => {
@@ -329,7 +329,7 @@ timeTest().then(() => {
   alert("Time taken in milliseconds: " + timeTaken);
 })
    -

    Далее представленна асинхронная функция timeTest() различная для каждого из примеров.

    +

    Далее представлена асинхронная функция timeTest() различная для каждого из примеров.

    В случае с медленным примером slow-async-await.html, timeTest() выглядит:

    @@ -339,7 +339,7 @@ timeTest().then(() => { await timeoutPromise(3000); } -

    Здесь мы просто ждем все три  timeoutPromise() напрямую, блокируя выполнение на данного блока на 3 секунды прии каждом вызове. Все последующие вызовы вынуждены ждать пока разрешится предыдущий. Если вы запустите первый пример (slow-async-await.html) вы увидите alert сообщающий время выполнения около 9 секунд. 

    +

    Здесь мы просто ждем все три  timeoutPromise() напрямую, блокируя выполнение на данного блока на 3 секунды при каждом вызове. Все последующие вызовы вынуждены ждать пока разрешится предыдущий. Если вы запустите первый пример (slow-async-await.html) вы увидите alert сообщающий время выполнения около 9 секунд. 

    Во втором  fast-async-await.html примере, функция timeTest() выглядит как:

    @@ -353,9 +353,9 @@ timeTest().then(() => { await timeoutPromise3; } -

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

    +

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

    -

    Ниже мы ожидаем разрешения промисов из объекта в результат, так как они были запущенны одновременно, блокируя поток, то и разрешатся одновременно. Если вы запустите второй приимер вы увидите alert, сообщающий время выполнения около 3 секунд.

    +

    Ниже мы ожидаем разрешения промисов из объекта в результат, так как они были запущенны одновременно, блокируя поток, то и разрешатся одновременно. Если вы запустите второй пример вы увидите alert, сообщающий время выполнения около 3 секунд.

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

    @@ -363,7 +363,7 @@ timeTest().then(() => {

    Async/await class methods

    -

    В качестве последнего замечания, вы можете использовать  async  перед методами классов или объектов, вынуждая их возвращать promises. А также  await внутри методов объявленных такиим образом. Посмотрите на пример ES class code, который мы наблюдали в статье  object-oriented JavaScript,  и сравниете его с модифицированной (асинхронной) async версией ниже:

    +

    В качестве последнего замечания, вы можете использовать  async  перед методами классов или объектов, вынуждая их возвращать promises. А также  await внутри методов объявленных таким образом. Посмотрите на пример ES class code, который мы наблюдали в статье  object-oriented JavaScript,  и сравните его с модифицированной (асинхронной) async версией ниже:

    class Person {
   constructor(first, last, age, gender, interests) {
diff --git a/files/ru/learn/javascript/asynchronous/concepts/index.html b/files/ru/learn/javascript/asynchronous/concepts/index.html
index cd7f119acc..def7da8a78 100644
--- a/files/ru/learn/javascript/asynchronous/concepts/index.html
+++ b/files/ru/learn/javascript/asynchronous/concepts/index.html
@@ -35,7 +35,7 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts
 
 
    Multi-colored macOS beachball busy spinner
    
 
-
    Такое поведение удручает и говорит о неправильном использовании процессорного времени, к тому же современные компьютеры имеют процессоры с несколькими ядрами. Не нужно ничего ждать, вы можете передать следующую задачу свободному ядру процессора и когда она завершится, то сообщит вам об этом. Такой подход позволяет выполнять разные задачи одновременно, в этом и заключается задача асинхронности в программировании. Программная среда, которую вы используете (браузер в случае веб разработки), должна иметь возможность выполнять различного рода задачи ассинхронно.
    
+
    Такое поведение удручает и говорит о неправильном использовании процессорного времени, к тому же современные компьютеры имеют процессоры с несколькими ядрами. Не нужно ничего ждать, вы можете передать следующую задачу свободному ядру процессора и когда она завершится, то сообщит вам об этом. Такой подход позволяет выполнять разные задачи одновременно, в этом и заключается задача асинхронности в программировании. Программная среда, которую вы используете (браузер в случае веб разработки), должна иметь возможность выполнять различного рода задачи асинхронно.
    
 
 
    Блокировка кода
    
 
@@ -43,7 +43,7 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts
 
 
    Давайте рассмотрим несколько примеров, которые покажут, что именно значит блокировка.
    
 
-
    В нашем simple-sync.html примере (see it running live), добавим кнопке событие на клик, чтобы при нажатии на нее запускалась трудоемкая операция (рассчет 10000000 дат, и вывод последней рассчитанной даты на консоль) после чего в DOM добавляется еще один параграф:
    
+
    В нашем simple-sync.html примере (see it running live), добавим кнопке событие на клик, чтобы при нажатии на нее запускалась трудоемкая операция (расчет 10000000 дат, и вывод последней рассчитанной даты на консоль) после чего в DOM добавляется еще один параграф:
    
 
 
    const btn = document.querySelector('button');
 btn.addEventListener('click', () => {
@@ -106,7 +106,7 @@ alertBtn.addEventListener('click', () =>
 
 
    Каждая задача будет выполнена последовательно; только когда текущая задача завершится, следующая сможет начаться.
    
 
-
    Как мы говорили выше, большинство компьютеров теперь имеют процессор с несколькими ядрами, т.е. могут выполнять несколько задач одновременно. Языки программирования, поддерживающие многопоточность, могут использовать несколько ядер, чтобы выпонять несколько задач одновременно:
    
+
    Как мы говорили выше, большинство компьютеров теперь имеют процессор с несколькими ядрами, т.е. могут выполнять несколько задач одновременно. Языки программирования, поддерживающие многопоточность, могут использовать несколько ядер, чтобы выполнять несколько задач одновременно:
    
 
 
    Thread 1: Task A --> Task B
 Thread 2: Task C --> Task D
    
diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html
index 340938e010..7ba34475cf 100644
--- a/files/ru/learn/javascript/asynchronous/introducing/index.html
+++ b/files/ru/learn/javascript/asynchronous/introducing/index.html
@@ -85,13 +85,13 @@ btn.addEventListener('click', () => {
 let blob = response.blob();
 // display your image blob in the UI somehow
    
 
-
    Это проиходит потому что вы не знаете сколько времени займет загрузка картинки, следовательно, когда вы начнёте выполнять вторую строку кода, сгенерируется ошибка (возможно, переодически, возможно, каждый раз), потому что response еще не доступен. Вместо этого, ваш код должен дождаться возвращения response до того, как попытается выполнить дальнешие инструкции.
    
+
    Это происходит потому что вы не знаете сколько времени займет загрузка картинки, следовательно, когда вы начнёте выполнять вторую строку кода, сгенерируется ошибка (возможно, периодически, возможно, каждый раз), потому что response еще не доступен. Вместо этого, ваш код должен дождаться возвращения response до того, как попытается выполнить дальнейшие инструкции.
    
 
 
    Есть два типа стиля асинхронного кода, с которыми вы столкнетесь в коде JavaScript, старый метод — callbacks (обратные вызовы) и более новый —  promise (промисы, обещания). В следующих разделах мы познакомимся с каждым из них. 
    
 
 
    Асинхронные обратные вызовы
    
 
-
    Асинхронные обратные вызовы — это функции, которые определяются как агрументы при вызове функции, которая начнет выполнение кода на заднем фоне. Когда код на заднем фоне завершает свою работу, он вызвает функцию обратного вызова, оповещающую, что работа сделана, либо оповещающую о трудностях в завершении работы. Обратные вызовы — немного устраревшая практика, но они все еще употребляются в некоторых старомодных, но часто используемых API.
    
+
    Асинхронные обратные вызовы — это функции, которые определяются как аргументы при вызове функции, которая начнет выполнение кода на заднем фоне. Когда код на заднем фоне завершает свою работу, он вызывает функцию обратного вызова, оповещающую, что работа сделана, либо оповещающую о трудностях в завершении работы. Обратные вызовы — немного устаревшая практика, но они все еще употребляются в некоторых старомодных, но часто используемых API.
    
 
 
    Пример асинхронного обратного вызова вторым параметром {{domxref("EventTarget.addEventListener", "addEventListener()")}} (как мы видели выше):
    
 
@@ -105,7 +105,7 @@ let blob = response.blob();
 
 
    Первый параметр — тип прослушиваемого события, второй параметр — функция обратного вызова, вызываемая при срабатывании события.
    
 
-
    При передаче функциии обратного вызова как аргумента в другую функцию, мы передаем только ссылку на функцию как аргумент, следовательно колбэк функция не выполняется мгновенно. Где-то существует "обратный вызов" (отсюда и название), выполняющийся асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять функцию обратного вызова в нужный момент.
    
+
    При передаче функции обратного вызова как аргумента в другую функцию, мы передаем только ссылку на функцию как аргумент, следовательно колбэк функция не выполняется мгновенно. Где-то существует "обратный вызов" (отсюда и название), выполняющийся асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять функцию обратного вызова в нужный момент.
    
 
 
    Вы можете написать свою собственную функцию, содержащую функцию обратного вызова. Давайте взглянем на еще один пример, в котором происходит загрузка ресурсов через XMLHttpRequest API (запустите пример, и посмотрите исходный код):
    
 
@@ -131,11 +131,11 @@ function displayImage(blob) {
 
 loadAsset('coffee.jpg', 'blob', displayImage);
    -

    Мы создали  функцию displayImage(), которая представляет blob, переданный в нее, как обьект URL, и создает картинку, в которой отображается URL, добавляя ее в элемент документа <body>. Однако, далее мы создаем функцию loadAsset(), которая принимает функцию обратного вызова в качестве параметра, вместе с URL для получения данных и типом контента. Для получения данных из URL используется XMLHttpRequest (часто сокращается до аббревиатуры "XHR") , перед тем как передать ответ в функцию обратного вызова для дальнейшей обработки. В этом случае функция обратного вызова ждет, пока XHR закончит загрузку данных (используя обрабочик события onload) перед отправкой данных в функцию обратного вызова.

    +

    Мы создали  функцию displayImage(), которая представляет blob, переданный в нее, как объект URL, и создает картинку, в которой отображается URL, добавляя ее в элемент документа <body>. Однако, далее мы создаем функцию loadAsset(), которая принимает функцию обратного вызова в качестве параметра, вместе с URL для получения данных и типом контента. Для получения данных из URL используется XMLHttpRequest (часто сокращается до аббревиатуры "XHR") , перед тем как передать ответ в функцию обратного вызова для дальнейшей обработки. В этом случае функция обратного вызова ждет, пока XHR закончит загрузку данных (используя обработчик события onload) перед отправкой данных в функцию обратного вызова.

    Функции обратного вызова универсальны — они не только позволяют вам контролировать порядок, в котором запускаются функции и данные, передающиеся между ними, они также позволяют передавать данные различным функциям, в зависимости от обстоятельств. Вы можете выполнять различные действия с загруженным ответом, такие как  processJSON(), displayText(), и другие.

    -

    Заметьте, что не все функции обратного вызова асинхронны — некторые запускаются синхронно. Например, при использовании {{jsxref("Array.prototype.forEach()")}} для перебора элементов массива (запустите пример, и посмотрите исходный код):

    +

    Заметьте, что не все функции обратного вызова асинхронны — некоторые запускаются синхронно. Например, при использовании {{jsxref("Array.prototype.forEach()")}} для перебора элементов массива (запустите пример, и посмотрите исходный код):

    const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
 
@@ -162,12 +162,12 @@ gods.forEach(function (eachName, index){
 
    Заметка: Вы можете посмотреть законченную версию на github (посмотрите исходный код и запустите пример).
    • -

    В примере видно, как fetch() принимает один параметр — URL ресурса, который нужно  получить из сети, — и возвращает промис. Промис или обещание — это объект, представляющий асинхронную операцию, выполенную удачно или неудачно. Он представляет собой как бы промежуточное состояние. По сути, это способ браузера сказать: "я обещаю вернуться к вам с ответом как можно скорее," отсюда и название "обещание."

    +

    В примере видно, как fetch() принимает один параметр — URL ресурса, который нужно  получить из сети, — и возвращает промис. Промис или обещание — это объект, представляющий асинхронную операцию, выполненную удачно или неудачно. Он представляет собой как бы промежуточное состояние. По сути, это способ браузера сказать: "я обещаю вернуться к вам с ответом как можно скорее," отсюда и название "обещание."

    -

    Может пнадобиться много времени, чтобы привыкнуть к данной концепуии; это немного напоминает {{interwiki("wikipedia", "Кот Шрёдингера")}} в действии. Ни один из возможных результатов еще не произошел, поэтому операция fetch в настоящее время ожидает результата. Далее у нас есть три блока кода следующих сразу после fetch():

    +

    Может понадобиться много времени, чтобы привыкнуть к данной концепции; это немного напоминает {{interwiki("wikipedia", "Кот Шрёдингера")}} в действии. Ни один из возможных результатов еще не произошел, поэтому операция fetch в настоящее время ожидает результата. Далее у нас есть три блока кода следующих сразу после fetch():

      -
    • Два then() блока. Оба включают в себя функцию обратного, которая запустится, если предыдущая операция закончилась успешно, и каждая функция обратного вызова принимает на вход результат предыдущей успешно выполненной операции, таким образом вы можете выполнять операции последовательно. Каждый .then() блок возвращает новый promise, это значит что вы можете объеденять в цепочки (чейнить) блоки .then(), таким образом можно выполнить несколько асинхронных операций по порядку, одну за другой.
      • +
    • Два then() блока. Оба включают в себя функцию обратного, которая запустится, если предыдущая операция закончилась успешно, и каждая функция обратного вызова принимает на вход результат предыдущей успешно выполненной операции, таким образом вы можете выполнять операции последовательно. Каждый .then() блок возвращает новый promise, это значит что вы можете объединять в цепочки (чейнить) блоки .then(), таким образом можно выполнить несколько асинхронных операций по порядку, одну за другой.
    • catch() блок описывается в конце и будет запущен если какой-либо .then() блок завершится с ошибкой — это аналогично синхронному try...catch, ошибка становится доступной внутри catch(), что может быть использовано для сообщения пользователю о типе возникшей ошибки. Однако синхронный try...catch не будет работать с promise, хотя будет работать с async/await, с которыми вы познакомитесь позже.
    @@ -194,7 +194,7 @@ gods.forEach(function (eachName, index){

    Природа асинхронного кода

    -

    Давайте рассмотрим пример, который дополнительно иллюстрирует природу асинхронного кода, показывая, что может произойти, когда мы не полностью осознаем порядок выполнения кода, и проблемы, связанные с попыткой трактовать асинхронный код как синхронный. Следующий пример довольно похож на тот, что мы видели раньше (запустите пример, и посмотрте исходный код). Одно из отличий состоит в том, что мы включили ряд операторов {{domxref("console.log()")}} чтобы проиллюстрировать порядок, в котором, как вы думаете, будет выполняться код.

    +

    Давайте рассмотрим пример, который дополнительно иллюстрирует природу асинхронного кода, показывая, что может произойти, когда мы не полностью осознаем порядок выполнения кода, и проблемы, связанные с попыткой трактовать асинхронный код как синхронный. Следующий пример довольно похож на тот, что мы видели раньше (запустите пример, и посмотреть исходный код). Одно из отличий состоит в том, что мы включили ряд операторов {{domxref("console.log()")}} чтобы проиллюстрировать порядок, в котором, как вы думаете, будет выполняться код.

    console.log ('Starting');
 let image;
@@ -255,7 +255,7 @@ console.log("all done");

    Активное обучение: сделайте все это асинхронно!

    -

    Чтобы исправить проблемный пример с  fetch() и заставить все три сообщения console.log() появиться в желаемом порядке, вы можете также запустить третье сообщение console.log() асинхронно. Этого можно добиться, переместив его внутрь другого блока .then() присоединенного к концу второго, или просто переместив его внутрь второго блока  then(). Попробуйте иправить это сейчас..

    +

    Чтобы исправить проблемный пример с  fetch() и заставить все три сообщения console.log() появиться в желаемом порядке, вы можете также запустить третье сообщение console.log() асинхронно. Этого можно добиться, переместив его внутрь другого блока .then() присоединенного к концу второго, или просто переместив его внутрь второго блока  then(). Попробуйте исправить это сейчас..

    Заметка: Если вы застряли, вы можете найти ответ здесь (также можно посмотреть запущенный пример). Также вы можете найти много информации о промисах в нашем гайде Основные понятия асинхронного программирования позднее в этом модуле.

    diff --git a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html index 3edcaf64c8..7cd498d9a7 100644 --- a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html +++ b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html @@ -1,5 +1,5 @@ --- -title: 'Объединенный асинхронный JavaScript: Таймайты и интервалы' +title: 'Объединенный асинхронный JavaScript: Таймауты и интервалы' slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals original_slug: Learn/JavaScript/Asynchronous/Таймауты_и_интервалы @@ -35,7 +35,7 @@ original_slug: Learn/JavaScript/Asynchronous/Таймауты_и_интерва
    setInterval()
    Выполняет указанный блок кода несколько раз с определенным интервалом между каждым вызовом.
    requestAnimationFrame()
    -
    Современная версия setInterval (). Выполняут указанный блок кода перед тем, как браузер в следующий раз перерисовывает отображение, позволяя запускать анимацию с подходящей частотой кадров независимо от среды, в которой она выполняется.
    +
    Современная версия setInterval (). Выполняют указанный блок кода перед тем, как браузер в следующий раз перерисовывает отображение, позволяя запускать анимацию с подходящей частотой кадров независимо от среды, в которой она выполняется.

    Асинхронный код, установленный этими функциями, выполняется в основном потоке (по истечении указанного им таймера).

    @@ -176,7 +176,7 @@ clearInterval(myInterval);

    При работе с setTimeout () и setInterval () следует помнить о нескольких вещах. Давайте рассмотрим их.

    -

    Рекурсивые таймауты

    +

    Рекурсивные таймауты

    Есть еще один способ использования setTimeout (): вы можете вызвать его рекурсивно для повторного запуска одного и того же кода вместо использования setInterval ().

    @@ -253,14 +253,14 @@ draw();

    Идея состоит в том, чтобы определить функцию, в которой ваша анимация обновляется (например, ваши спрайты перемещаются, счет обновляется, данные обновляются или что-то еще). Затем вы вызываете его, чтобы начать процесс. В конце функционального блока вы вызываете requestAnimationFrame () со ссылкой на функцию, переданной в качестве параметра, и это дает браузеру указание вызвать функцию снова при следующей перерисовке дисплея. Затем он выполняется непрерывно, поскольку код рекурсивно вызывает requestAnimationFrame ().

    -

    Note: Если вы хотите выполнить простое постоянное анимирование DOM , CSS Анимация вероятно будет быстрее. Она высисляется непосредственно внутренним кодом браузера, а не JavaScript.

    +

    Note: Если вы хотите выполнить простое постоянное анимирование DOM , CSS Анимация вероятно будет быстрее. Она вычисляется непосредственно внутренним кодом браузера, а не JavaScript.

    Однако, если вы делаете что-то более сложное, включающее объекты, которые не доступны напрямую в the DOM (такие как 2D Canvas API или WebGL ), requestAnimationFrame() предпочтительный вариант в большинстве случаев.

    Как быстро работает ваша анимация?

    -

    Плавность анимации напрямую зависит от частоты кадров анимации и измеряется в кадрах в секунду (fps). Чем выше это число, тем плавнее будет выглядеть ваша анимация до точки.

    +

    Плавность анимации напрямую зависит от частоты кадров анимации и измеряется в кадрах в секунду (fps). Чем выше это число, тем плавное будет выглядеть ваша анимация до точки.

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

    @@ -317,7 +317,7 @@ draw();

    requestAnimationFrame () поддерживается в более поздних версиях браузеров, чем setInterval () / setTimeout (). Интересно, что он доступен в Internet Explorer 10 и выше.

    -

    Итак, если вам не тербуется поддержка старых версий IE, нет особых причин не использовать requestAnimationFrame().

    +

    Итак, если вам не требуется поддержка старых версий IE, нет особых причин не использовать requestAnimationFrame().

    Простой пример

    @@ -332,7 +332,7 @@ draw();

    Возьмите базовый HTML шаблон (такой как этот).

  • -

    Поместите пустой  {{htmlelement("div")}} елемент внутри элемента {{htmlelement("body")}}, затем добавьте внутрь символ ↻ . Этот символ будет действовать как spinner в нашем примере.

    +

    Поместите пустой  {{htmlelement("div")}} элемент внутри элемента {{htmlelement("body")}}, затем добавьте внутрь символ ↻ . Этот символ будет действовать как spinner в нашем примере.

  • Применитеpply следующий CSS к HTML шаблону (любым предпочитаемым способом). Он установ красный фон на странице, высоту <body> равную 100% высоты {{htmlelement("html")}} , и центрирует <div> внутри <body>, по горизонтали и вертикали.

    @@ -360,7 +360,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;
@@ -369,7 +369,7 @@ let rAF;
  • -

    Под предыдущим кодом вставьте функцию draw() соторая будет использоваться для хранения нашешо кода анимации, который включает параметр timestamp :

    +

    Под предыдущим кодом вставьте функцию draw() которая будет использоваться для хранения нашего кода анимации, который включает параметр timestamp :

    function draw(timestamp) {
 
@@ -411,7 +411,7 @@ let rAF;
 
    Note: Вы можете посмотреть рабочий образец на GitHub. ( исходный код.)
    • -

    Очbстка вызова  requestAnimationFrame() 

    +

    Очистка вызова  requestAnimationFrame() 

    Очистить вызов requestAnimationFrame () можно, вызвав соответствующий метод cancelAnimationFrame (). (Обратите внимание, что имя функции начинается с «cancel», а не «clear», как у методов «set ...».)

    @@ -436,7 +436,7 @@ let rAF;

    Регулировка анимации requestAnimationFrame() 

    -

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

    +

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

    Это было проблемой, например в анимации ходьбы, вдохновленной островом обезьян, из статьи Drawing Graphics:

    @@ -483,7 +483,7 @@ let rAF;

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

  • -

    Внутри пустого элемента {{htmlelement("script")}} на вашей старнице, начните с добавления следующих строк кода, котороые определяют некотороые переменные и константы, которые вам понадобятся в дальнейшем:

    +

    Внутри пустого элемента {{htmlelement("script")}} на вашей странице, начните с добавления следующих строк кода, которые определяют некоторые переменные и константы, которые вам понадобятся в дальнейшем:

    const spinner = document.querySelector('.spinner p');
 const spinnerContainer = document.querySelector('.spinner');
@@ -500,7 +500,7 @@ const result = document.querySelector('.result');
  • Ссылка на элемент {{htmlelement("div")}} содержащий спиннер, используемый для отображения и скрытия.
  • Счетчик поворотов. Он определяет, на сколько вы хотите показывать вращение спиннера на каждом кадре анимации.
  • Нулевое время начала. Это будет заполнено временем начала, когда счетчик начнет вращаться.
    • -
  • Неинициализировання переменная для последующего хранения вызова {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} который анимирует спиннер.
    • +
  • Неинициализированная переменная для последующего хранения вызова {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} который анимирует спиннер.
  • Ссылка на кнопку Start .
  • Ссылка на параграф результатов.
    • @@ -559,7 +559,7 @@ function start() { }
    -

    Note: Вы увидете, что этот пример вызывает setTimeout() без сохранения возвращаемого значения. (не  let myTimeout = setTimeout(functionName, interval).) 

    +

    Note: Вы увидите, что этот пример вызывает setTimeout() без сохранения возвращаемого значения. (не  let myTimeout = setTimeout(functionName, interval).) 

    Это прекрасно работает, если вам не нужно очищать интервал / тайм-аут в любой момент. Если вы это сделаете, вам нужно будет сохранить возвращенный идентификатор!

    @@ -602,11 +602,11 @@ function start() {
  • Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счетчика.
  • Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!"  чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.
  • Прикрепите к документу прослушиватель событий keydown . При нажатии любой кнопки запускается функция keyHandler().
    • -
  • Внутри keyHandler(), код включает обьект события в качестве параметра (представленного e) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для твета на определенные нажатия клавиш определенными действиями.
    • -
  • Установите для переменной isOver значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клваиши.
    • +
  • Внутри keyHandler(), код включает объект события в качестве параметра (представленного e) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для ответа на определенные нажатия клавиш определенными действиями.
    • +
  • Установите для переменной isOver значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клавиши.
  • Регистрация e.key в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.
  • Когда e.key принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда e.key это "l", отобразить сообщение о том, что Player 2 выиграл. (Note: Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для isOver значение true.
    • -
  • Только еслиf isOver равно true, удалите прослушиватель событий keydown с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете setTimeout() для вызова reset() через 5 секунд — как обьяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.
    • +
  • Только если isOver равно true, удалите прослушиватель событий keydown с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете setTimeout() для вызова reset() через 5 секунд — как объяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.
    • @@ -628,7 +628,7 @@ function start() { diff --git a/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html index e93334902a..a0e35bc998 100644 --- a/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -6,7 +6,7 @@ tags: - DOM - Изучение - Навигатор - - Новичек + - Новичок - Окно translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents --- @@ -106,7 +106,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
    -

    Обратите внимание, что, как и во многих вещах в JavaScript, существует множество способов выбора элемента и хранения ссылки на него в переменной. {{domxref("Document.querySelector()")}} - рекомендуемый современный подход, который считается удобным, потому что он позволяет вам выбирать элементы с помощью селекторов CSS. Вышеупомянутый запрос querySelector() будет соответствовать первому элементу {{htmlelement("a")}}, который появляется в документе. Если вы хотите совместить и делать что-то с несколькими элементами, вы можете использовать {{domxref ("Document.querySelectorAll()")}}, который соответствует каждому элементу документа, который соответствует селектору и сохраняет ссылки на них в массиве массиво-подобном объекте, называемом NodeList.

    +

    Обратите внимание, что, как и во многих вещах в JavaScript, существует множество способов выбора элемента и хранения ссылки на него в переменной. {{domxref("Document.querySelector()")}} - рекомендуемый современный подход, который считается удобным, потому что он позволяет вам выбирать элементы с помощью селекторов CSS. Вышеупомянутый запрос querySelector() будет соответствовать первому элементу {{htmlelement("a")}}, который появляется в документе. Если вы хотите совместить и делать что-то с несколькими элементами, вы можете использовать {{domxref ("Document.querySelectorAll()")}}, который соответствует каждому элементу документа, который соответствует селектору и сохраняет ссылки на них в массиве массива-подобном объекте, называемом NodeList.

    Существуют более старые методы для захвата ссылок на элементы, например:

    diff --git a/files/ru/learn/javascript/first_steps/a_first_splash/index.html b/files/ru/learn/javascript/first_steps/a_first_splash/index.html index 7d04a8b3af..8c4817891c 100644 --- a/files/ru/learn/javascript/first_steps/a_first_splash/index.html +++ b/files/ru/learn/javascript/first_steps/a_first_splash/index.html @@ -278,7 +278,7 @@ var resetButton;

    Операторы (Operators)

    -

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

    +

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

    Сохраните наш код и обновите страницу показанную в браузере. Откройте консоль JavaScript, если вы еще её не открыли, чтобы попробовать ввести текст из приведенных ниже примеров — введите каждую строчку из столбца "Пример", нажимая Enter после каждого из них, и посмотрите какие результаты они возвращают. Если у вас нет доступа к инструментам разработчика в браузере, вы всегда можете использовать простую встроенную консоль, показанную ниже:

    @@ -477,7 +477,7 @@ greeting;

    Условные выражения (Conditionals)

    -

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

    +

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

    Теперь, заменим вашу текущую функциюcheckGuess() на эту версию:

    @@ -515,14 +515,14 @@ greeting;
    • Первая строка (строка под номером 2 в коде выше) объявляет переменную с именем userGuess и устанавливает ее значение на то, что сейчас введено в текстовое поле. Мы также пропускаем это значение через встроенный метод Number(), чтобы убедится, что значение точно является числом.
      • -
    • Затем мы сталкиваемся с нашим первым блоком условного кода (строки 3–5 в коде выше). Блок условного кода позволяет выборочно запускать код в зависимости от того, является определенное условие истинным или нет. Он немного похож на функцию, но это не так. Простейшая форма условного блока начинается с ключевого слова if, за ним круглые скобки, за ними еще фигурные скобки. В круглые скобки мы добавляем проверку. Если проверка возвращает true, запускается код в фигурных скобках. Если нет, этот код пропускается и мы переходим к следующей части кода. В этом случае проверяется равна ли переменая guessCount числу 1 (то есть является ли это первой попыткой игрока или нет): +
    • Затем мы сталкиваемся с нашим первым блоком условного кода (строки 3–5 в коде выше). Блок условного кода позволяет выборочно запускать код в зависимости от того, является определенное условие истинным или нет. Он немного похож на функцию, но это не так. Простейшая форма условного блока начинается с ключевого слова if, за ним круглые скобки, за ними еще фигурные скобки. В круглые скобки мы добавляем проверку. Если проверка возвращает true, запускается код в фигурных скобках. Если нет, этот код пропускается и мы переходим к следующей части кода. В этом случае проверяется равна ли переменная guessCount числу 1 (то есть является ли это первой попыткой игрока или нет): 
      guessCount === 1
      Если это так, мы выводим параграф с содержанием "Previous guesses: ". Если нет, ничего не делаем.
      • -
    • Строка 6 добавяет текущее знаение userGuess  в конец параграфа guesses, плюс пустое пространство поэтому между каждыми показанными предположениями будет пробел.
      • +
    • Строка 6 добавляет текущее значение userGuess  в конец параграфа guesses, плюс пустое пространство поэтому между каждыми показанными предположениями будет пробел.
    • Следующий блок (строки 8–24 ) делает несколько проверок:
      • Первая конструкция  if(){ } проверяет, совпадает ли предположение пользователя с randomNumber установленному в верхней части нашего JavaScript. Если это так, игрок правильно догадался, и игра выиграна, поэтому мы показываем игроку поздравительное сообщение с приятным зеленым цветом, очищаем содержимое окна информации о минимуме / максимуме и запускаем функцию, называемую setGameOver (), которую мы обсудим позже.
        • -
      • Теперь мы добавили еще одну проверку после пердыдущей, используя конструкцию else if () {}. Эта конструкция проверяет, является ли этот ход последним ходом пользователя. Если это так, программа выполняет то же самое, что и в предыдущем блоке, но выведет сообщение с текстом GAME OVER.
        • +
      • Теперь мы добавили еще одну проверку после предыдущей, используя конструкцию else if () {}. Эта конструкция проверяет, является ли этот ход последним ходом пользователя. Если это так, программа выполняет то же самое, что и в предыдущем блоке, но выведет сообщение с текстом GAME OVER.
      • Последний блок, в конце нашего кода (else {}), содержит код, который запускается только в том случае, если ни один из двух других тестов не возвращает true (т. е. Игрок не догадался правильно, но у него еще остались  догадки). В этом случае мы говорим игроку, что он ошибся, затем мы выполняем еще один условный тест, чтобы проверить, было ли предположение больше или меньше ответа, показывая дополнительное сообщение.
      • diff --git a/files/ru/learn/javascript/first_steps/arrays/index.html b/files/ru/learn/javascript/first_steps/arrays/index.html index 1c575c759b..ecc2cacb19 100644 --- a/files/ru/learn/javascript/first_steps/arrays/index.html +++ b/files/ru/learn/javascript/first_steps/arrays/index.html @@ -466,7 +466,7 @@ body {

      {{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}

      -

      Практика: Топ 5 поисовых запросов

      +

      Практика: Топ 5 поисковых запросов

      Хорошим тоном, является использование методов массива, таких как {{jsxref ("Array.prototype.push ()", "push ()")}} и {{jsxref ("Array.prototype.pop ()", "pop ()") }} - это когда вы ведете запись активных элементов в веб-приложении. Например, в анимированной сцене может быть массив объектов, представляющих текущую отображаемую фоновую графику и вам может потребоваться только 50 одновременных отображений по причинам производительности или беспорядка. Когда новые объекты создаются и добавляются в массив, более старые могут быть удалены из массива для поддержания нужного числа.

      diff --git a/files/ru/learn/javascript/first_steps/math/index.html b/files/ru/learn/javascript/first_steps/math/index.html index 22a6945573..893720c23e 100644 --- a/files/ru/learn/javascript/first_steps/math/index.html +++ b/files/ru/learn/javascript/first_steps/math/index.html @@ -55,12 +55,12 @@ original_slug: Learn/JavaScript/Первые_шаги/Math
    • Бинарная — низкоуровневый язык компьютеров; нули и единицы (0 и 1);
    • Восьмеричная — 8-ми разрядная, использует 0–7 в каждом столбце;
    • Десятичная — 10-ти разрядная, использует 0-9 в каждом столбце;
      • -
    • Шестнадцатеричная — 16-ти разрядная, используюет 0–9 и потом a–f в каждом столбце. Вы, возможно, уже встречали эти числа, когда задавали цвет в CSS.
      • +
    • Шестнадцатеричная — 16-ти разрядная, используют 0–9 и потом a–f в каждом столбце. Вы, возможно, уже встречали эти числа, когда задавали цвет в CSS.

    Прежде чем взорвется ваш мозг, остановитесь прямо здесь и сейчас! 

    -

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

    +

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

    Во-вторых, в отличие от некоторых других языков программирования, JavaScript имеет только один тип данных для чисел, как вы догадались это {{jsxref("Number")}}. Это означает, независимо от типа чисел, с которыми вы работаете в JavaScript, обрабатывать вы их будете точно так же.

    @@ -198,7 +198,7 @@ num2 + num1 / 8 + 2;

    Замечание: инкремент и декремент часто используются в циклах, о которых вы узнаете позже. Например, если вы захотите пройтись по списку цен и добавить к каждой налог с продаж, вам придется в цикле обойти каждую цену и провести необходимые вычисления для учета налога. Инкремент будет использован для перехода на новую ячейку списка при необходимости. У нас есть несложный пример реализации такого списка - попробуйте и взгляните на код чтобы посмотреть, сможете ли вы найти инкременты! Мы взглянем на циклы поближе позже по ходу курса.

    -

    Давайте попробуем сыграть с этим в вашей консоли. Для начала заметим, что вы не можете использовать инкремент/декремент непосредсвенно к числу, что может показаться странным. Дело в том, что мы присваиваем к переменной новое обновленное число, а не просто вычисляем значение. Следующий пример приведет к ошибке:

    +

    Давайте попробуем сыграть с этим в вашей консоли. Для начала заметим, что вы не можете использовать инкремент/декремент непосредственно к числу, что может показаться странным. Дело в том, что мы присваиваем к переменной новое обновленное число, а не просто вычисляем значение. Следующий пример приведет к ошибке:

    3++;
    @@ -207,7 +207,7 @@ num2 + num1 / 8 + 2; 
    var num1 = 4;
 num1++;
    -

    Так, вторая странность! Если вы сделаете это, вы получите значение 4 - бразуер возвращает текущее число, после чего применяет к нему оператор инкремента. Вы можете удостовериться в том, что инкремент был применен, узнав значение переменной еще раз:

    +

    Так, вторая странность! Если вы сделаете это, вы получите значение 4 - браузер возвращает текущее число, после чего применяет к нему оператор инкремента. Вы можете удостовериться в том, что инкремент был применен, узнав значение переменной еще раз:

    num1;
    @@ -254,7 +254,7 @@ x = y; // x теперь содержит значение y (x == 4) -= Присваивание вычитания - Вычитает значение справа из переменной слева и возвращает новое зачение переменной + Вычитает значение справа из переменной слева и возвращает новое значение переменной x = 6;
    x -= 3;     x = 6;
    @@ -265,7 +265,7 @@ x = y; // x теперь содержит значение y (x == 4)

    Присваивание умножения

    - Умножает переменную слева на значение справа и возвращает новое зачение переменной + Умножает переменную слева на значение справа и возвращает новое значение переменной x = 2;
    x *= 3;     x = 2;
    @@ -274,7 +274,7 @@ x = y; // x теперь содержит значение y (x == 4) /= Присваивание деления - Делит переменную слева на значение справа и возвращает новое зачение переменной + Делит переменную слева на значение справа и возвращает новое значение переменной x = 10;
    x /= 5;     x = 10;
    @@ -285,7 +285,7 @@ x = y; // x теперь содержит значение y (x == 4)

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

    -

    Замьтете, что значение справа может быть как числом (константой), так и переменной, например:

    +

    Заметьте, что значение справа может быть как числом (константой), так и переменной, например:

    var x = 3; // x содержит значение 3
 var y = 4; // y содержит значение 4
@@ -297,7 +297,7 @@ x *= y; // x содержит значение 12

    Активное обучение: меняем размеры коробки

    -

    В этом упражнении вы будете пользоваться числами и операторами для работы с размерами коробки. Коробка рисуется с помощью API браузера, которое назывется Canvas API. Вам не следует беспокоиться о том, как это работает - просто сосредоточьтесь на математике. Ширина и высота коробки (в пикселях) определяются переменными x и y, которые изначально равны 50.

    +

    В этом упражнении вы будете пользоваться числами и операторами для работы с размерами коробки. Коробка рисуется с помощью API браузера, которое называется Canvas API. Вам не следует беспокоиться о том, как это работает - просто сосредоточьтесь на математике. Ширина и высота коробки (в пикселях) определяются переменными x и y, которые изначально равны 50.

    {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}

    @@ -306,15 +306,15 @@ x *= y; // x содержит значение 12

    В коде сверху, который вы можете изменять, под комментарием есть две строчки, с помощью которых вы можете увеличивать/уменьшать размеры коробки. Мы хотим, чтобы вы выполнили несколько заданий:

      -
    • Поменяйте строчку с размером x так, чтобы коробка была шириной 50px, причем 50 должно быть вычислено с помощью чисел 43 и 7 и арифмитического оператора.
      • +
    • Поменяйте строчку с размером x так, чтобы коробка была шириной 50px, причем 50 должно быть вычислено с помощью чисел 43 и 7 и арифметического оператора.
    • Поменяйте строчку с размером y так, чтобы коробка была высотой 75px, причем 75 должно быть вычислено с помощью чисел 25 и 3 и арифметического оператора.
    • Поменяйте строчку с размером y так, чтобы коробка была высотой 250, при этом 250 вычислено с помощью двух чисел и оператором взятия остатка (модуль).
      • -
    • Поменяйте строчку с размером y так, чтобы коробка была высотой 150px, причем 150 вычилено с помощью трех чисел и операторов вычитания и деления.
      • +
    • Поменяйте строчку с размером y так, чтобы коробка была высотой 150px, причем 150 вычислено с помощью трех чисел и операторов вычитания и деления.
    • Поменяйте строчку с размером x так, чтобы коробка была шириной 200px, при этом 200 вычислено с помощью числа 4 и оператора присваивания.
    • Поменяйте строчку с размером y так, чтобы коробка была высотой 200px, причем 200 вычислено с помощью чисел 50 и 3 и операторов умножения и присваивания сложения.
    -

    Не расстраивайтесть, если вы не поняли код сверху. Нажмите кнопку Reset для запуска программы снова. Если вы смогли ответить верно на все вопросы, попробуйте поэкспериментировать с кодом еще (или, например, предложить друзьям несколько заданий).

    +

    Не расстраивайтесь, если вы не поняли код сверху. Нажмите кнопку Reset для запуска программы снова. Если вы смогли ответить верно на все вопросы, попробуйте поэкспериментировать с кодом еще (или, например, предложить друзьям несколько заданий).

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

    @@ -405,7 +405,7 @@ function updateBtn() {

    Открыть в новом окне

    -

    Мы использовали оператор равенства внутри функции updateBtn(). В этом случае мы не проверяем пару математических выражений на равенcтво значений — мы просто смотрим, является ли текст на кнопке определенной строкой — что по сути является тем же самым. Если кнопка при нажатии содержит "Start machine", мы меняем содержимое метки на "Stop machine" и обновляем метку. Если же текст кнопки — "Stop machine", при нажатии мы возвращем все обратно. 

    +

    Мы использовали оператор равенства внутри функции updateBtn(). В этом случае мы не проверяем пару математических выражений на равенство значений — мы просто смотрим, является ли текст на кнопке определенной строкой — что по сути является тем же самым. Если кнопка при нажатии содержит "Start machine", мы меняем содержимое метки на "Stop machine" и обновляем метку. Если же текст кнопки — "Stop machine", при нажатии мы возвращаем все обратно. 

    Заметка: Такой элемент управления, который переключается между двумя состояниями, обычно называется тумблером. Он переключается между одним состоянием и другим: свет включен, свет выключен и т. д.

    @@ -418,7 +418,7 @@ function updateBtn() {

    В следующей статье мы изучим текст и то, как мы работаем с ним в JavaScript.

    -

    Примечание: если вам хочется узнать подробнее о том, как математика реализуется в JavaScript, вы можете посмотерть главный раздел JavaScript MDN. Статьи Числа и даты и Выражения и операторы - хороший вариант для начала.

    +

    Примечание: если вам хочется узнать подробнее о том, как математика реализуется в JavaScript, вы можете посмотреть главный раздел JavaScript MDN. Статьи Числа и даты и Выражения и операторы - хороший вариант для начала.

    {{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги")}}

    diff --git a/files/ru/learn/javascript/first_steps/silly_story_generator/index.html b/files/ru/learn/javascript/first_steps/silly_story_generator/index.html index 62576df3be..b59058d29a 100644 --- a/files/ru/learn/javascript/first_steps/silly_story_generator/index.html +++ b/files/ru/learn/javascript/first_steps/silly_story_generator/index.html @@ -7,8 +7,8 @@ tags: - Изучение - Испытание - Массивы - - НаписаниеКода - - НачальныйУровень + - Написание Кода + - Начальный Уровень - Операторы - Переменные - Проверка @@ -79,7 +79,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Создатель_глу

    Задайте переменные и функции:

      -
    1. В исходном текстовом документе скопируйте весь код под заголовком "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" и вставьте в начало файла main.js. Это даст вам три переменные, ссылающиеся на текстовое поле "Enter custom name" (customName),  кнопку "Generate random story" (randomize), и элемент снизу HTML страницы, куда будет помещена сама история {{htmlelement("p")}} (story), соответственно. Также у вас должна быть функцияrandomValueFromArray(), котрая принимает массив и случайным образом возвращает оттуда один из элементов.
      2. +
    2. В исходном текстовом документе скопируйте весь код под заголовком "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" и вставьте в начало файла main.js. Это даст вам три переменные, ссылающиеся на текстовое поле "Enter custom name" (customName),  кнопку "Generate random story" (randomize), и элемент снизу HTML страницы, куда будет помещена сама история {{htmlelement("p")}} (story), соответственно. Также у вас должна быть функцияrandomValueFromArray(), которая принимает массив и случайным образом возвращает оттуда один из элементов.
    3. Теперь взгляните на второй параграф исходного документа — "2. RAW TEXT STRINGS". Он содержит строки текста, которые будут использоваться как входные данные вашей программы. Вам следует поместить их внутрь переменных в файле main.js:
      1. Сохраните первую большую строку текста в переменную storyText.
        2. @@ -94,7 +94,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Создатель_глу
        1. Теперь возвращаемся к исходному текстовому файлу.
          2. -
        2. Скопируйте код под заголовком "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" и вставте его в конец файла main.js. Это: +
        3. Скопируйте код под заголовком "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" и вставьте его в конец файла main.js. Это:
          • Добавит обработчик события кликанья в переменную randomize,  Так что, когда кнопка будет нажата -  функция result() запустится.
          • Добавляет в код частично завершенную функцию result(). В течении оставшейся части испытания вам предстоит, заполняя строчки внутри этой функции, завершить ее и заставить работать должным образом.
            • diff --git a/files/ru/learn/javascript/first_steps/strings/index.html b/files/ru/learn/javascript/first_steps/strings/index.html index 9c769ff801..3bbdedaca4 100644 --- a/files/ru/learn/javascript/first_steps/strings/index.html +++ b/files/ru/learn/javascript/first_steps/strings/index.html @@ -8,7 +8,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Строки
            {{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}
            -

            Теперь мы обратим внимание на строки — в программировании так называют части текста. В этой статье мы рассмотрим все распростанённые вещи, которые вы должны действительно знать о строках при изучении JavaScript, например, создание строк, экранирование кавычек в строках и объединение строк вместе.

            +

            Теперь мы обратим внимание на строки — в программировании так называют части текста. В этой статье мы рассмотрим все распространенные вещи, которые вы должны действительно знать о строках при изучении JavaScript, например, создание строк, экранирование кавычек в строках и объединение строк вместе.

            diff --git a/files/ru/learn/javascript/first_steps/useful_string_methods/index.html b/files/ru/learn/javascript/first_steps/useful_string_methods/index.html index 552423bc8b..aa85c3309d 100644 --- a/files/ru/learn/javascript/first_steps/useful_string_methods/index.html +++ b/files/ru/learn/javascript/first_steps/useful_string_methods/index.html @@ -552,7 +552,7 @@ textarea.onkeyup = function(){ 
            MAN: Manchester Piccadilly
            -

            Мы бы рекоменовали реализовать это следующим образом:

            +

            Мы бы рекомендовали реализовать это следующим образом:

            1. Извлеките трехбуквенный код станции и сохраните его в новой переменной.
              2. diff --git a/files/ru/learn/javascript/first_steps/what_is_javascript/index.html b/files/ru/learn/javascript/first_steps/what_is_javascript/index.html index 68c9173c1f..2e0ff5a198 100644 --- a/files/ru/learn/javascript/first_steps/what_is_javascript/index.html +++ b/files/ru/learn/javascript/first_steps/what_is_javascript/index.html @@ -126,7 +126,7 @@ function updateName() {

              В этой главе мы рассмотрим код и увидим что же действительно происходит, когда на странице запускается JavaScript.

              -

              Давайте составим краткий бриф, что же происхоит когда мы загружаем страничку в браузере (первое упоминание в статье Как работает CSS). Когда вы загружаете страничку в браузере, вы запускаете ваш код (HTML, CSS и JavaScript) внутри исполняемой среды (внутри вкладки браузера). Это как будто фабрика берет сырьё (некий код) и выдает продукцию (веб-страничку).

              +

              Давайте составим краткий бриф, что же происходит когда мы загружаем страничку в браузере (первое упоминание в статье Как работает CSS). Когда вы загружаете страничку в браузере, вы запускаете ваш код (HTML, CSS и JavaScript) внутри исполняемой среды (внутри вкладки браузера). Это как будто фабрика берет сырьё (некий код) и выдает продукцию (веб-страничку).

              @@ -167,7 +167,7 @@ function updateName() {

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

              -

              С другой стороны, компилируемые языки преобразуются (компилируются) в другую форму, прежде чем они будут запущены компьютером. Например, C / C ++ компилируются в язык ассемблера, который затем запускается компьютером.

              +

              С другой стороны, ккомпилируемые языки преобразуются (компилируются) в другую форму, прежде чем они будут запущены компьютером. Например, C / C ++ компилируются в язык ассемблера, который затем запускается компьютером.

              Оба подхода имеют разные преимущества, которые на данном этапе мы обсуждать не будем.

              @@ -179,11 +179,11 @@ function updateName() {

              Слово динамический используется для описания и клиентского JavaScript, и серверного языка — это относится к возможности обновления отображения веб-страницы/приложения, чтобы показывать разные вещи в разных обстоятельствах, генерируя новый контент по мере необходимости. Серверный код динамически генерирует новый контент на сервере, например достает данные из базы данных, тогда как клиентский JavaScript динамически генерирует новое содержание внутри браузера на клиенте, например создает новую HTML таблицу, вставляя в нее данные полученные с сервера, затем отображает таблицу на веб-странице, которую видит пользователь. В этих двух контекстах значение немного отличается, но связано, и обычно оба подхода (серверный и клиентский) работают вместе.

              -

              Веб-страница без динамического обновления контента называется статической — она просто показывает один и тотже контент все время.

              +

              Веб-страница без динамического обновления контента называется статической — она просто показывает один и тот же контент все время.

              Как добавить JavaScript на вашу страницу?

              -

              JavaScript применяется к вашей HTML странице точно так же, как CSS. И если CSS использует элементы {{htmlelement("link")}} для внешних стилей и {{htmlelement("style")}} для встроеных в HTML, то для JavaScript нужен только один друг в HTML мире — элемент {{htmlelement("script")}}. Давайте узнаем, как это работает.

              +

              JavaScript применяется к вашей HTML странице точно так же, как CSS. И если CSS использует элементы {{htmlelement("link")}} для внешних стилей и {{htmlelement("style")}} для встроенных в HTML, то для JavaScript нужен только один друг в HTML мире — элемент {{htmlelement("script")}}. Давайте узнаем, как это работает.

              Внутренний JavaScript

              diff --git a/files/ru/learn/javascript/first_steps/what_went_wrong/index.html b/files/ru/learn/javascript/first_steps/what_went_wrong/index.html index 5e84e07e34..1e95ec1c25 100644 --- a/files/ru/learn/javascript/first_steps/what_went_wrong/index.html +++ b/files/ru/learn/javascript/first_steps/what_went_wrong/index.html @@ -149,7 +149,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Что_пошло_не_т

              Работаем через логику

              -

              Чтобы исправить это, давайте рассмотрим как работает строка. Первое, мы вызываем Math.random(), котрый генерирует случайное десятичное число, между 0 и 1, например 0.5675493843.

              +

              Чтобы исправить это, давайте рассмотрим как работает строка. Первое, мы вызываем Math.random(), который генерирует случайное десятичное число, между 0 и 1, например 0.5675493843.

              Math.random()
              diff --git a/files/ru/learn/javascript/howto/index.html b/files/ru/learn/javascript/howto/index.html index b3fa76b1cf..7286c9789f 100644 --- a/files/ru/learn/javascript/howto/index.html +++ b/files/ru/learn/javascript/howto/index.html @@ -85,7 +85,7 @@ translation_of: Learn/JavaScript/Howto

              Область действия

              -

              Помнините, что functions have their own scope —вы не можете получить доступ к значению переменной, установленному внутри функции извне функции, если вы не объявили переменную глобально (т. е. не внутри каких-либо функций), или return the value из функции.

              +

              Помните, что functions have their own scope —вы не можете получить доступ к значению переменной, установленному внутри функции извне функции, если вы не объявили переменную глобально (т. е. не внутри каких-либо функций), или return the value из функции.

              Запуск кода после оператора возврата

              diff --git a/files/ru/learn/javascript/objects/basics/index.html b/files/ru/learn/javascript/objects/basics/index.html index 41873c646b..43acd47b8d 100644 --- a/files/ru/learn/javascript/objects/basics/index.html +++ b/files/ru/learn/javascript/objects/basics/index.html @@ -139,7 +139,7 @@ person['name']['first']

              Запись элементов в объект

              -

              До сих пор мы рассмастривали только возврат (или получение) элементов объекта — Вы так же можете установить (обновить) значение элемента объекта просто объявив элемент, который Вы хотите установить (используя точечную или скобочную запись), например:

              +

              До сих пор мы рассматривали только возврат (или получение) элементов объекта — Вы так же можете установить (обновить) значение элемента объекта просто объявив элемент, который Вы хотите установить (используя точечную или скобочную запись), например:

              person.age = 45;
 person['name']['last'] = 'Cratchit';
              @@ -190,7 +190,7 @@ person[myDataName] = myDataValue;

              Вы, вероятно, задаетесь вопросом, что такое "this"? Ключевое слово this, ссылается на текущий объект, внутри которого пишется код — поэтому в нашем случае this равен объекту person. Но почему просто не написать person? Как Вы увидите в статье Object-oriented JavaScript for beginners (Объектно-ориентированный JavaScript для начинающих), когда мы начинаем создавать конструкторы и т.д., this очень полезен — он всегда будет гарантировать, что используется верное значение, когда контекст элемента изменяется (например, два разных экземпляра объекта person могут иметь разные имена, но захотят использовать свое собственное имя при приветствии.

              -

              Давайте проиллюстритуем, что мы имеем в виду, с упрощенной парой объектов person :

              +

              Давайте проиллюстрируем, что мы имеем в виду, с упрощенной парой объектов person :

              const person1 = {
   name: 'Chris',
@@ -241,7 +241,7 @@ const myVideo = document.querySelector('video');

              Поздравляем, Вы достигли конца нашей первой статьи о объектах JS, теперь у вас должно быть хорошее представление о том, как работать с объектами в JavaScript - в том числе создавать свои собственные простые объекты. Вы также должны понимать, что объекты очень полезны в качестве структур для хранения связанных данных и функциональности - если бы мы пытались отслеживать все свойства и методы в нашем объекте person как отдельные переменные и функции, это было неэффективно, и мы бы рисковали столкнуться с другими переменными и функциями с такими же именами. Объекты позволяют нам безопасно хранить информацию в своем собственном блоке, вне опасности.

              -

              В следующей статье мы начнем рассматривать теорию объектно-ориентированного программирования (OOП) и как эти техники могут быть использованны в JavaScript 

              +

              В следующей статье мы начнем рассматривать теорию объектно-ориентированного программирования (OOП) и как эти техники могут быть использованы в JavaScript 

              {{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

              diff --git a/files/ru/learn/javascript/objects/index.html b/files/ru/learn/javascript/objects/index.html index 08d6d2dc43..d01087d4c7 100644 --- a/files/ru/learn/javascript/objects/index.html +++ b/files/ru/learn/javascript/objects/index.html @@ -33,7 +33,7 @@ original_slug: Learn/JavaScript/Объекты
              Прототипы объектов
              Прототипы - это механизм, благодаря которому объекты в JavaScript наследуют функционал друг друга, но при этом они работают иначе по сравнению с механизмами наследования в классических объектно-ориентированных языках. В этой статье мы изучим эти отличия, объясним, как работает цепочка прототипов, и рассмотрим, как свойство прототипа может быть использовано для добавления методов к существующим конструкторам.
              Наследование в JavaScript
              -
              После знакомства с самыми жуткими подробностями OOJS, эта статья покажет, как создавать "дочерные" классы объектов (конструкторы), которые наследуют функционал от своих "родительских" классов. В дополнении, мы дадим Вам пару советов о том, где и когда можно использовать OOJS.
              +
              После знакомства с самыми жуткими подробностями OOJS, эта статья покажет, как создавать "дочерние" классы объектов (конструкторы), которые наследуют функционал от своих "родительских" классов. В дополнении, мы дадим Вам пару советов о том, где и когда можно использовать OOJS.
              Работа с JSON-данными
              Представление объектов в JavaScript (JavaScript Object Notation) (JSON) - это стандартный формат для представления структурированных данных в виде объектов JavaScript, который обычно используется для представления и передачи данных на веб-сайтах (т.е. передача некоторых данных от сервера к клиенту - таким образом они могут быть отображены на веб-странице). Вы довольно часто будете с этим сталкиваться, поэтому в данной статье мы предоставим вам все, что необходимо для работы с JSON с помощью JavaScript, в том числе доступ к элементам данных в объекте JSON и написания собственного JSON-кода.
              Практика построения объектов
              diff --git a/files/ru/learn/javascript/objects/inheritance/index.html b/files/ru/learn/javascript/objects/inheritance/index.html index fe473b0ef8..35e6f4a4df 100644 --- a/files/ru/learn/javascript/objects/inheritance/index.html +++ b/files/ru/learn/javascript/objects/inheritance/index.html @@ -96,7 +96,7 @@ original_slug: Learn/JavaScript/Объекты/Inheritance

              Это похоже на конструктор Person во многих отношениях, но здесь есть что-то странное, что мы не видели раньше - функцию call(). Эта функция в основном позволяет вам вызывать функцию, определенную где-то в другом месте, но в текущем контексте. Первый параметр указывает значение this, которое вы хотите использовать при выполнении функции, а остальные параметры - те, которые должны быть переданы функции при ее вызове.

              -

              Мы хотим, чтобы конструктор Teacher() принимал те же параметры, что и конструктор Person(), от которго он наследуется, поэтому мы указываем их как параметры в вызове call().

              +

              Мы хотим, чтобы конструктор Teacher() принимал те же параметры, что и конструктор Person(), от которого он наследуется, поэтому мы указываем их как параметры в вызове call().

              Последняя строка внутри конструктора просто определяет новое свойство subject, которое будут иметь учителя, и которого нет у Person().

              @@ -190,13 +190,13 @@ teacher1.subject; teacher1.greeting(); teacher1.farewell(); -

              Все должно работать нормально. Запросы в строках 1, 2, 3 и 6 унаследованны от общего конструктора Person() (класса). Запрос в строке 4 обращается к subject, доступному только для более специализированного конструктора (класса) Teacher(). Запрос в строке 5 получил бы доступ к методу greeting(), унаследованному от Person(), но Teacher() имеет свой собственный метод greeting() с тем же именем, поэтому запрос обращается к этому методу.

              +

              Все должно работать нормально. Запросы в строках 1, 2, 3 и 6 унаследованные от общего конструктора Person() (класса). Запрос в строке 4 обращается к subject, доступному только для более специализированного конструктора (класса) Teacher(). Запрос в строке 5 получил бы доступ к методу greeting(), унаследованному от Person(), но Teacher() имеет свой собственный метод greeting() с тем же именем, поэтому запрос обращается к этому методу.

              Примечание. Если вам не удается заставить это работать, сравните свой код с нашей готовой версией (см. также рабочее демо).

              -

              Методика, которую мы здесь рассмотрили, - это не единственный способ создания наследующих классов в JavaScript, но он работает нормально и это дает вам представление о том, как реализовать наследование в JavaScript.

              +

              Методика, которую мы здесь рассмотрели, - это не единственный способ создания наследующих классов в JavaScript, но он работает нормально и это дает вам представление о том, как реализовать наследование в JavaScript.

              Вам также может быть интересно узнать некоторые из новых функций {{glossary("ECMAScript")}}, которые позволяют нам делать наследование более чисто в JavaScript (см. Classes). Мы не рассматривали их здесь, поскольку они пока не поддерживаются очень широко в браузерах. Все остальные конструкторы кода, которые мы обсуждали в этом наборе статей, поддерживаются еще в IE9 или ранее и есть способы добиться более ранней поддержки, чем это.

              diff --git a/files/ru/learn/javascript/objects/json/index.html b/files/ru/learn/javascript/objects/json/index.html index 89de0661a8..68cc6c7fdd 100644 --- a/files/ru/learn/javascript/objects/json/index.html +++ b/files/ru/learn/javascript/objects/json/index.html @@ -267,7 +267,7 @@ request.send();
              1. Создаем несколько новых элементов: <article>, <h2>, три <p> и <ul>.
                2. -
              2. Установливаем <h2>, чтобы содержать name текущего героя.
                3. +
              3. Устанавливаем <h2>, чтобы содержать name текущего героя.
              4. Заполняем три абзаца своей secretIdentity, age и строкой, в которой говорится: «Суперспособности:», чтобы ввести информацию в список.
              5. Сохраняем свойство powers в другой новой переменной под названием superPowers - где содержится массив, в котором перечислены сверхспособности текущего героя.
              6. Используем другой цикл for, чтобы прокрутить сверхспособности текущего героя , для каждого из них мы создаем элемент <li>, помещаем в него сверхспособности, а затем помещаем listItem внутри элемента <ul> (myList) с помощью appendChild().
                7. diff --git a/files/ru/learn/javascript/objects/object-oriented_js/index.html b/files/ru/learn/javascript/objects/object-oriented_js/index.html index 7df73c5045..e5f44c9fb4 100644 --- a/files/ru/learn/javascript/objects/object-oriented_js/index.html +++ b/files/ru/learn/javascript/objects/object-oriented_js/index.html @@ -24,7 +24,7 @@ original_slug: Learn/JavaScript/Объекты/Object-oriented_JS
            diff --git a/files/ru/learn/javascript/objects/object_building_practice/index.html b/files/ru/learn/javascript/objects/object_building_practice/index.html index 778e83578e..b24628ef50 100644 --- a/files/ru/learn/javascript/objects/object_building_practice/index.html +++ b/files/ru/learn/javascript/objects/object_building_practice/index.html @@ -219,7 +219,7 @@ testBall.draw()
            • Устанавливает цвет заливки на полупрозрачный черный, затем рисует прямоугольник цвета по всей ширине и высоте холста, используя fillRect() (четыре параметра обеспечивают начальную координату, а ширину и высоту для рисованного прямоугольника ). Это позволяет скрыть рисунок предыдущего кадра до того, как будет нарисован следующий. Если вы этого не сделаете, вы увидите, как длинные змеи пробираются вокруг холста, а не шары! Цвет заливки устанавливается на полупрозрачный, rgba(0,0,0,0,25), чтобы позволить нескольким кадрам слегка просвечивать, создавая маленькие тропы за шариками по мере их перемещения. Если вы изменили 0.25 на 1, вы больше не увидите их. Попробуйте изменить это число, чтобы увидеть эффект, который он имеет.
              • -
            • Создает новый экземпляр нашего Ball(), используя случайные значения, сгенерированные с помощью нашей функции random(), затем push() на конец нашего массива шаров, но только в том случае, когда количество шаров в массиве меньше 25. Итак когда у нас есть 25 мячей на экране, больше не появляется шаров. Вы можете попробовать изменить число в balls.length < 25, чтобы получить больше или меньше шаров на экране. В зависимости от того, сколько вычислительной мощности имеет ваш компьютер / браузер, если указать несколько тысячь шаров, это может довольно существенно повлиять на производительность анимации. 
              • +
            • Создает новый экземпляр нашего Ball(), используя случайные значения, сгенерированные с помощью нашей функции random(), затем push() на конец нашего массива шаров, но только в том случае, когда количество шаров в массиве меньше 25. Итак когда у нас есть 25 мячей на экране, больше не появляется шаров. Вы можете попробовать изменить число в balls.length < 25, чтобы получить больше или меньше шаров на экране. В зависимости от того, сколько вычислительной мощности имеет ваш компьютер / браузер, если указать несколько тысяч шаров, это может довольно существенно повлиять на производительность анимации. 
            • перебирает все шары в массиве balls и запускает каждую функцию draw() и update() для рисования каждого из них на экране, а затем выполняет необходимые обновления по положению и скорости во времени для следующего кадра.
            • Выполняет функцию снова с помощью метода requestAnimationFrame() - когда этот метод постоянно запускается и передается одно и то же имя функции, он будет запускать эту функцию определенное количество раз в секунду для создания плавной анимации. Обычно это делается рекурсивно - это означает, что функция вызывает себя каждый раз, когда она запускается, поэтому она будет работать снова и снова.
            diff --git a/files/ru/learn/javascript/objects/object_prototypes/index.html b/files/ru/learn/javascript/objects/object_prototypes/index.html index a8487bf0e6..e488f1bdbc 100644 --- a/files/ru/learn/javascript/objects/object_prototypes/index.html +++ b/files/ru/learn/javascript/objects/object_prototypes/index.html @@ -8,7 +8,7 @@ tags: - Начинающий - ООП - Обучение - - Обьект + - Объект - Статья - прототип translation_of: Learn/JavaScript/Objects/Object_prototypes @@ -57,7 +57,7 @@ original_slug: Learn/JavaScript/Объекты/Object_prototypes

            Вернемся к примеру, когда мы закончили писать наш конструктор Person()- загрузите пример в свой браузер. Если у вас еще нет работы от последней статьи, используйте наш пример oojs-class-further-exercises.html (см. Также исходный код).

            -

            В этом примере мы определили конструкторную функцию, например:

            +

            В этом примере мы определили конструктору функцию, например:

            function Person(first, last, age, gender, interests) {
 
diff --git a/files/ru/learn/performance/business_case_for_performance/index.html b/files/ru/learn/performance/business_case_for_performance/index.html
index 2d7ffc7203..15c3dd82fc 100644
--- a/files/ru/learn/performance/business_case_for_performance/index.html
+++ b/files/ru/learn/performance/business_case_for_performance/index.html
@@ -20,7 +20,7 @@ translation_of: Learn/Performance/business_case_for_performance
            @@ -28,16 +28,16 @@ translation_of: Learn/Performance/business_case_for_performance

            Делайте производительность приоритетом

            -

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

            +

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

            Бюджеты производительности

            -

            Установка бюджетов веб-производительности поможет вам быть уверенным в том, что команда придерживается верного пути и содержит приложение в хорошем состоянии. Бюджет производительности - это набор ограничний, которые, например, указывают максимальное количество HTTP запросов с клиента, максимальный размер всех ресурсов, минимально допустимую частоту кадров на конкретных устройствах и т.д. Бюджет может быть применён к определенному ресурсу, типу ресурсов, всем ресурсам на странице, конкретному показателю или пороговому показателю за какой-то период времени. Бюджет отражает достижимые цели, будь то время, количество или правило.

            +

            Установка бюджетов веб-производительности поможет вам быть уверенным в том, что команда придерживается верного пути и содержит приложение в хорошем состоянии. Бюджет производительности - это набор ограничений, которые, например, указывают максимальное количество HTTP запросов с клиента, максимальный размер всех ресурсов, минимально допустимую частоту кадров на конкретных устройствах и т.д. Бюджет может быть применён к определенному ресурсу, типу ресурсов, всем ресурсам на странице, конкретному показателю или пороговому показателю за какой-то период времени. Бюджет отражает достижимые цели, будь то время, количество или правило.

            -

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

            +

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

            Ключевые показатели

            @@ -45,7 +45,7 @@ translation_of: Learn/Performance/business_case_for_performance
            Уровень конверсии
            -
            Процент от общего траффика, который выполняет какое-то конкретное действие, например, покупает товар или подписывается на новости. Когда приложение работает медленно, пользователи не могут завершить эти задачи. Это приводит к низкому показателю конверсии.
            +
            Процент от общего трафика, который выполняет какое-то конкретное действие, например, покупает товар или подписывается на новости. Когда приложение работает медленно, пользователи не могут завершить эти задачи. Это приводит к низкому показателю конверсии.
            Время на сайте
            Среднее время, которое пользователь проводит на вашем сайте. Когда производительность низкая, высока вероятность того, что пользователи закроют сайт прежде, чем он выдаст нужные результаты.
            Уровень лояльности клиентов
            @@ -57,7 +57,7 @@ translation_of: Learn/Performance/business_case_for_performance diff --git a/files/ru/learn/server-side/apache_configuration_htaccess/index.html b/files/ru/learn/server-side/apache_configuration_htaccess/index.html index fafabc17f8..12ff630a4b 100644 --- a/files/ru/learn/server-side/apache_configuration_htaccess/index.html +++ b/files/ru/learn/server-side/apache_configuration_htaccess/index.html @@ -5,7 +5,7 @@ translation_of: Learn/Server-side/Apache_Configuration_htaccess ---

            Название .htaccess происходит от "hypertext access". Это файл с расширением HTACCESS, который содержит различные настройки сервера apache. Он позволяет настраивать для текущей директории защиту паролем, редиректы и многое другое.

            -

            Доступ к файлу: файл htaccess  может быть открыт для редактивания любым текстовым редактором, таким как стандартный блокнот Windows, Vin, Sublime text editor или любым другим. Подсветка синтаксиса для файлов .htaccess встречается редко.

            +

            Доступ к файлу: файл htaccess  может быть открыт для редактирования любым текстовым редактором, таким как стандартный блокнот Windows, Vin, Sublime text editor или любым другим. Подсветка синтаксиса для файлов .htaccess встречается редко.

            Применение

            @@ -15,7 +15,7 @@ translation_of: Learn/Server-side/Apache_Configuration_htaccess Redirect 302 / http://example.com/ # Временное перенаправление на example.com -

            Блокирование: htaccess также может блокировать доступ с определенного IP адреса или диапазопа IP адресов. Блокирование часто используется, чтобы запретить доступ к директории для различных ботов и поисковых пауков.

            +

            Блокирование: htaccess также может блокировать доступ с определенного IP адреса или диапазона IP адресов. Блокирование часто используется, чтобы запретить доступ к директории для различных ботов и поисковых пауков.

            deny from 146.0.74.205                   # Блокирует все запросы с адреса 146.0.74.205
            @@ -33,6 +33,6 @@ ErrorDocument 500 /serverr.html  # Перенаправит пользоват

            Для дополнительной информации читайте статью Redirect your Traffic for Error Handling.

            -

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

            +

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

            MIME типы: смотрите статью correct MIME types для большей информации.

            diff --git a/files/ru/learn/server-side/django/admin_site/index.html b/files/ru/learn/server-side/django/admin_site/index.html index e8094df592..6cad300f10 100644 --- a/files/ru/learn/server-side/django/admin_site/index.html +++ b/files/ru/learn/server-side/django/admin_site/index.html @@ -74,7 +74,7 @@ admin.site.register(BookInstance)

            Для входа в админ-панель откройте ссылку /admin (например  http://127.0.0.1:8000/admin) и введите логин и пароль вашего нового суперпользователя  (вас перенаправят на login-страницу и потом обратно на /admin после ввода всех деталей).

            -

            В этой части сайта отображаются все наши модели, сгрупированные по установленному приложению. Вы можете кликнуть на названии модели, чтобы получить список всех связанных записей, далее можете кликнуть на этих записях, для их редактирования . Также можно непосредственно кликнуть на ссылку Add, расположенную рядом с каждой моделью, чтобы начать создание записи этого типа. 

            +

            В этой части сайта отображаются все наши модели, сгруппированные по установленному приложению. Вы можете кликнуть на названии модели, чтобы получить список всех связанных записей, далее можете кликнуть на этих записях, для их редактирования . Также можно непосредственно кликнуть на ссылку Add, расположенную рядом с каждой моделью, чтобы начать создание записи этого типа. 

            Admin Site - Home page

            @@ -104,13 +104,13 @@ admin.site.register(BookInstance)

            Admin Site - BookInstance Add

            -

            Создайте несколько экземпляров для каждой из ваших книг. Установите статус Available (доступен) для некоторых экземплров и On loan (выдан) для остальных. Если статус экземпляра not Available (недоступен), то также установите дату возврата (Due back).

            +

            Создайте несколько экземпляров для каждой из ваших книг. Установите статус Available (доступен) для некоторых экземпляров и On loan (выдан) для остальных. Если статус экземпляра not Available (недоступен), то также установите дату возврата (Due back).

            Вот и все!  Вы изучили как запустить и использовать админ-панель. Также были созданы записи для Book, BookInstance, Genre и Author, которые можно будет использовать после создания наших собственных представлений и шаблонов.

            "Продвинутая" конфигурация

            -

            Django выполняет неплохую работу по созданию базовой админ-панели используя информацию из зарегистрированых моделей:

            +

            Django выполняет неплохую работу по созданию базовой админ-панели используя информацию из зарегистрированных моделей:

            • каждая модель имеет список записей, каждая из которых идентифицируется строкой, создаваемой методом __str__() модели, и связана с представлением для ее редактирования. По умолчанию, в верхней части этого представления находится меню действий, которое может быть использовано для удаления нескольких записей за раз
              • @@ -141,7 +141,7 @@ admin.site.register(BookInstance)

              Регистрация класса ModelAdmin

              -

              Для измененения отображения модели в пользовательском интерфейсе админ-панели, необходимо определить класс ModelAdmin  (он описывает расположение элементов интерфейса, где Model - наименование модели) и зарегистрировать его для использования с этой моделью.

              +

              Для изменения отображения модели в пользовательском интерфейсе админ-панели, необходимо определить класс ModelAdmin  (он описывает расположение элементов интерфейса, где Model - наименование модели) и зарегистрировать его для использования с этой моделью.

              Давайте начнем с модели Author. Откройте файл admin.py в каталоге приложения (/locallibrary/catalog/admin.py). Закомментируйте исходную регистрацию (используя префикс #) этой модели:

              @@ -261,7 +261,7 @@ class BookInstanceAdmin(admin.ModelAdmin):

              Admin Site - Improved Author Detail

              -

              Примечание: Так же, вы можете использовать exclude атрибут для объявления списка атрибутов, которые будут исключены из формы (все остальные атрибутыв модели, будут отображаться). 

              +

              Примечание: Так же, вы можете использовать exclude атрибут для объявления списка атрибутов, которые будут исключены из формы (все остальные атрибуты в модели, будут отображаться). 

              Разделение на секции/Выделение подробного представления

              @@ -293,7 +293,7 @@ class BookInstanceAdmin(admin.ModelAdmin):

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

              -

              Вы можете это сделать, объявив inlines, и указав тип TabularInline (горизонтальное расположение) или  StackedInline (вертикальное расположение, так же как и в модели по умолчанию). Вы можете добавить  BookInstance информацию в подробное описание  Book , добавив строки, представленные ниже и распологающиеся рядом с  BookAdmin: 

              +

              Вы можете это сделать, объявив inlines, и указав тип TabularInline (горизонтальное расположение) или  StackedInline (вертикальное расположение, так же как и в модели по умолчанию). Вы можете добавить  BookInstance информацию в подробное описание  Book , добавив строки, представленные ниже и располагающиеся рядом с  BookAdmin: 

              class BooksInstanceInline(admin.TabularInline):
     model = BookInstance
diff --git a/files/ru/learn/server-side/django/authentication/index.html b/files/ru/learn/server-side/django/authentication/index.html
index 30e5df336b..de6551a12b 100644
--- a/files/ru/learn/server-side/django/authentication/index.html
+++ b/files/ru/learn/server-side/django/authentication/index.html
@@ -39,7 +39,7 @@ original_slug: Learn/Server-side/Django/Аутентификация
 
 
              Обзор
              
 
-
              Django предоставляет систему аутентификации и авторизации ("permission") пользователя, реализованную на основе фреймворка работы с сессиями, который мы рассматривали в предыдущей части. Система аутентификации и авторизации позволяет вам проверять учетные данные пользователей и определять какие действия какой пользователь может выполнять. Данный фреймворк включает в себя встроенные модели для Пользователей и Групп (основной способ применения прав доступа для более чем одного пользователя), непосредственно саму систему прав доступа (permissions)/флаги, которые определяют может ли пользователь выполнить задачу, с какой формой и отображением для авторизованых пользователей, а так же получить доступ к контенту с ограниченым доступом.
              
+
              Django предоставляет систему аутентификации и авторизации ("permission") пользователя, реализованную на основе фреймворка работы с сессиями, который мы рассматривали в предыдущей части. Система аутентификации и авторизации позволяет вам проверять учетные данные пользователей и определять какие действия какой пользователь может выполнять. Данный фреймворк включает в себя встроенные модели для Пользователей и Групп (основной способ применения прав доступа для более чем одного пользователя), непосредственно саму систему прав доступа (permissions)/флаги, которые определяют может ли пользователь выполнить задачу, с какой формой и отображением для авторизованных пользователей, а так же получить доступ к контенту с ограниченным доступом.
              
 
 
              
 
              Примечание: В соответствии с идеологией Django система аутентификации является очень общей и, таким образом, не предоставляет некоторые возможности, которые присутствуют в других системах веб-аутентификации. Решениями некоторых общих задач занимаются пакеты сторонних разработчиков, например, защита от подбора пароля (через стороннюю библиотеку OAuth).
              
@@ -77,7 +77,7 @@ MIDDLEWARE = [
 
 
              Создание пользователей и групп
              
 
-
              Вы уже создали своего первого пользователя когда мы рассматривали Административная панель сайта Django в части 4 (это был суперпользователь, созданный при помощи команды python manage.py createsuperuser). Наш суперпользователь уже авторизован и имеет все необходимые уровни доступа к данным и функциям, таким образом нам необходимо создать тестового пользователя для отработки соответствующей работы сайта. В качестве наиболее быстрого способа, мы будем использовать административную панель сайта для создания соответствующих групп и акканутов locallibrary.
              
+
              Вы уже создали своего первого пользователя когда мы рассматривали Административная панель сайта Django в части 4 (это был суперпользователь, созданный при помощи команды python manage.py createsuperuser). Наш суперпользователь уже авторизован и имеет все необходимые уровни доступа к данным и функциям, таким образом нам необходимо создать тестового пользователя для отработки соответствующей работы сайта. В качестве наиболее быстрого способа, мы будем использовать административную панель сайта для создания соответствующих групп и аккаунтов locallibrary.
              
 
 
              
 
              Примечание: Вы можете создавать пользователей программно, как показано ниже. Например, вам мог бы подойти данный способ в том случае, если вы разрабатываете интерфейс, который позволяет пользователям создавать их собственные аккаунты (вы не должны предоставлять доступ пользователям к административной панели вашего сайта).
              
@@ -117,7 +117,7 @@ user.save()
   
              
   Административная часть сайта создаст нового пользователя и немедленно перенаправит вас на страницу Change user (Изменение параметров пользователя) где вы можете, соответственно, изменить ваш username, а кроме того добавить информацию для дополнительных полей модели User. Эти поля включают в себя имя пользователя, фамилию, адрес электронной почты, статус пользователя, а также соответствующие параметры доступа (может быть установлен только флаг  Active). Ниже вы можете определить группу для пользователя и необходимые параметры доступа, а кроме того, вы можете увидеть важные даты, относящиеся к пользователю (дату подключения к сайту и дату последнего входа).Admin site - add user pt2
  
            • В разделе Groups, из списка Доступные группы выберите группу Library Member, а затем переместите ее в блок "Выбранные группы" (нажмите стрелку-"направо", находящуюся между блоками).Admin site - add user to group
              • 
- 
            • Больше нам не нужно здесь нечего делать, просто нажмите "Save"(Сохранить), и вы вернетесь к списку созданых пользователей.
              • 
+ 
            • Больше нам не нужно здесь нечего делать, просто нажмите "Save"(Сохранить), и вы вернетесь к списку созданных пользователей.
              • 
 
 
 
              Вот и все! Теперь у вас есть учетная запись «обычного члена библиотеки», которую вы сможете использовать для тестирования (как только добавим страницы, чтобы пользователи могли войти в систему).
              
@@ -674,7 +674,7 @@ class MyView(PermissionRequiredMixin, View):
 
 
              Подводим итоги
              
 
-
               Отличная работа - теперь вы создали веб-сайт, на котором участники библиотеки могут входить в систему и просматривать собственный контент, и библиотекари (с правом доступа) могут просматривать все заемные книги с их читатетелями. На данный момент мы все еще просто просматриваем контент, но те же принципы и методы используются, когда вы хотите начать изменять и добавлять данные.
              
+
               Отличная работа - теперь вы создали веб-сайт, на котором участники библиотеки могут входить в систему и просматривать собственный контент, и библиотекари (с правом доступа) могут просматривать все заемные книги с их читателями. На данный момент мы все еще просто просматриваем контент, но те же принципы и методы используются, когда вы хотите начать изменять и добавлять данные.
              
 
 
               В следующей статье мы рассмотрим, как вы можете использовать формы Django для сбора пользовательского ввода, а затем начнём изменять некоторые из наших сохраненных данных.
              
 
diff --git a/files/ru/learn/server-side/django/deployment/index.html b/files/ru/learn/server-side/django/deployment/index.html
index c4d3db599a..84601917b8 100644
--- a/files/ru/learn/server-side/django/deployment/index.html
+++ b/files/ru/learn/server-side/django/deployment/index.html
@@ -13,7 +13,7 @@ original_slug: Learn/Server-side/Django/Разворачивание
 
 
              {{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}
              
 
-
              Теперь, когда вы создали (и протестировали) свой шикарный сайт LocalLibrary, у вас скорее всего, есть желание разместить его на публичном веб-сервере, чтобы он стал доступен через интернет персоналу  и посетителям библотеки. Данная статья дает общее представление о том, каким образом подойти к поиску хостинга для рамещения сайта, а также, что нужно сделать чтобы подготовить свой сайт к публикации.
              
+
              Теперь, когда вы создали (и протестировали) свой шикарный сайт LocalLibrary, у вас скорее всего, есть желание разместить его на публичном веб-сервере, чтобы он стал доступен через интернет персоналу  и посетителям библиотеки. Данная статья дает общее представление о том, каким образом подойти к поиску хостинга для размещения сайта, а также, что нужно сделать чтобы подготовить свой сайт к публикации.
            Необходимые знания: -

            Базовая компьютерная грамотность, базовое понимание HTML и CSS, знакомство с основами JavaScript (см. Первые шаги и Cтруктурные элементы JavaScript) и основы OOJS (см. Введение в объекты).

            +

            Базовая компьютерная грамотность, базовое понимание HTML и CSS, знакомство с основами JavaScript (см. Первые шаги и Cструктурные элементы JavaScript) и основы OOJS (см. Введение в объекты).
            Задача: -

            Стать уверенным при объяснении клиентам и менедженту важности оптимизации производительности.

            +

            Стать уверенным при объяснении клиентам и менеджменту важности оптимизации производительности.
            @@ -50,7 +50,7 @@ original_slug: Learn/Server-side/Django/Разворачивание
            • Железо на котором будет запускаться сайт.
            • Операционную систему (Linux, Windows).
              • -
            • Языки программирования времени выполнения (скриптовые) и библотеки, которые использует ваш сайт.
              • +
            • Языки программирования времени выполнения (скриптовые) и библиотеки, которые использует ваш сайт.
            • Веб-сервер, используемый для обслуживания страниц и другого контента (Nginx, Apache).
            • Сервер приложений, который передает "динамические" запросы между сайтом Django и веб-сервером.
            • Базу данных, от которой зависит ваш сайт.
              • @@ -84,19 +84,19 @@ original_slug: Learn/Server-side/Django/Разворачивание
              • Насколько требовательным к вычислительным ресурсам является ваш сайт.
                • -
              • Уровень поддержки горизовантального (добавление большего количества машин) и вертикального масштабирования (переход на более мощное железо), а также стоимость всего этого.
                • +
              • Уровень поддержки горизонтального (добавление большего количества машин) и вертикального масштабирования (переход на более мощное железо), а также стоимость всего этого.
              • Где расположены дата-центры и, следовательно, откуда будет более быстрый доступ.
              • Время непрерывной работы хостинга, а также время и количество простоя.
                • -
              • Инструменты, которые предоставляются для управления сайтом — простота и безопастность их использвания (SFTP и FTP).
                • +
              • Инструменты, которые предоставляются для управления сайтом — простота и безопасность их использования (SFTP и FTP).
              • Встроенные фреймворки для мониторинга вашего сервера.
              • Ограничения. Некоторые хостинги могут блокировать некоторые сервисы (например, электронную почту) . Другие предлагают только определенное количество часов "живого времени" за определенную цену, или небольшое количество места для данных.
              • Преимущества. Некоторые провайдеры могут предложить бесплатные доменные имена и поддержку сертификатов SSL, которые, в других случаях, должны были бы купить.
              • Что будет при истечении времени использования "бесплатного" хостинга, какова "стоимость" миграции на более "дорогие" тарифы и так далее?
              -

              Хорошей новостью является то, что для того, чтобы начать существует достаточное количество компаний, которые предоставляют пробные "бесплатные" тарифы типа "evaluation" (для пробы), "developer" (разработка), или "hobbyist" (хобби). Всегда существуют ресурсы с ограниченым окружением, при использовании которых вам надо беспокоиться лишь о том, что они могут быть доступны лишь в течении определенного периода времени. Тем не менее, они являются отличным решением для тестирования сайтов с небольшим трафиком в реальном окружении, а также могут предоставлять простой доступ к платным ресурсам, в случае необходимости. Наиболее популярными провайдерами являются Heroku, Python Anywhere, Amazon Web Services, Microsoft Azure и так далее.

              +

              Хорошей новостью является то, что для того, чтобы начать существует достаточное количество компаний, которые предоставляют пробные "бесплатные" тарифы типа "evaluation" (для пробы), "developer" (разработка), или "hobbyist" (хобби). Всегда существуют ресурсы с ограниченным окружением, при использовании которых вам надо беспокоиться лишь о том, что они могут быть доступны лишь в течении определенного периода времени. Тем не менее, они являются отличным решением для тестирования сайтов с небольшим трафиком в реальном окружении, а также могут предоставлять простой доступ к платным ресурсам, в случае необходимости. Наиболее популярными провайдерами являются Heroku, Python Anywhere, Amazon Web Services, Microsoft Azure и так далее.

              -

              Многие провайдеры имеют "basic" (базовый) тариф, предоставляющий достаточный уровень вычислительной мощности с небольшим количеством ограничений. Digital Ocean и Python Anywhere являются примерами провайдеров, которые предлагают относительно недорой базовый тариф (от $5 до $10USD в месяц).

              +

              Многие провайдеры имеют "basic" (базовый) тариф, предоставляющий достаточный уровень вычислительной мощности с небольшим количеством ограничений. Digital Ocean и Python Anywhere являются примерами провайдеров, которые предлагают относительно недорогой базовый тариф (от $5 до $10USD в месяц).

              Примечание: Необходимо помнить, что цена не является единственным критерием выбора. Если ваш сайт успешен, то может так случиться, что масштабирование станет самым важным элементом вашего внимания при выборе услуг хостинга.

              @@ -104,7 +104,7 @@ original_slug: Learn/Server-side/Django/Разворачивание

              Подготовка веб-сайта к публикации

              -

              Скелет сайта был создан при помощи инструментов django-admin и manage.py, которые настроены таким образом, чтобы сделать разработку проще. Многие настройки файла проекта (определенных в settings.py) должны быть изменены перед публикацией сайта, либо из-за вопросов безопастности, либо производительности.

              +

              Скелет сайта был создан при помощи инструментов django-admin и manage.py, которые настроены таким образом, чтобы сделать разработку проще. Многие настройки файла проекта (определенных в settings.py) должны быть изменены перед публикацией сайта, либо из-за вопросов безопасности, либо производительности.

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

              @@ -190,7 +190,7 @@ with open('/etc/secret_key.txt') as f:

              Как работает Heroku?

              -

              Heroku запускает сайты Django внутри одного, или более,  изолированых друг от друга "Dynos", которые являются виртуальными Unix-контейнерами, предоставляющими необходимое окружение для вашего приложения. Данные dynos полностью изолированы и имеют эфемерную файловую систему ("короткоживущая" файловая система, которая полностью очищается и обновляется каждый раз, когда dyno перезапускается). Единственной сущностью, которую предоставляет dynos по умолчанию, является приложение по конфигурации переменных. Heroku внутри себя применяет балансировщик загрузки для распределения веб-трафика среди всех "веб"-dynos. Поскольку dynos изолированы, Heroku может масштабировать приложение горизонтально, просто добавляя больше dynos (хотя, конечно, у вас может появиться необходимость расширить базу данных для обработки дополнительных соединений).

              +

              Heroku запускает сайты Django внутри одного, или более,  изолированных друг от друга "Dynos", которые являются виртуальными Unix-контейнерами, предоставляющими необходимое окружение для вашего приложения. Данные dynos полностью изолированы и имеют эфемерную файловую систему ("короткоживущая" файловая система, которая полностью очищается и обновляется каждый раз, когда dyno перезапускается). Единственной сущностью, которую предоставляет dynos по умолчанию, является приложение по конфигурации переменных. Heroku внутри себя применяет балансировщик загрузки для распределения веб-трафика среди всех "веб"-dynos. Поскольку dynos изолированы, Heroku может масштабировать приложение горизонтально, просто добавляя больше dynos (хотя, конечно, у вас может появиться необходимость расширить базу данных для обработки дополнительных соединений).

              Файловая система эфемерна, поэтому вы не можете напрямую установить необходимые для вашего приложения сервисы (то есть, базы данных, очереди, системы кэширования, хранения, сервисы электронной почты и так далее). Взамен этого, Heroku предоставляет сервисы, доступные как независимые "дополнения" ("add-ons") либо от самой Heroku, или от сторонних разработчиков. В тот момент когда ваше приложение запускается в системе, dynos получает доступ к сервисам, используя информацию, содержащуюся в переменных настройки вашего приложения.

              @@ -239,17 +239,17 @@ with open('/etc/secret_key.txt') as f:
          • Нажмите кнопку Create repository, тем самым создав ваш репозиторий.
            • -
          • Перейдите на страницу вашего репозитория. Там нажмите на зелёную кнопку "Clone or download". Скопируйте URL  из текстового поляиз появившегося диалогового окна (Это будет похоже на: https://github.com/<your_git_user_id>/django_local_library.git). Здесь <your_git_user_id> - это будет ваш id пользователя git.
            • +
          • Перейдите на страницу вашего репозитория. Там нажмите на зелёную кнопку "Clone or download". Скопируйте URL  из текстового поля из появившегося диалогового окна (Это будет похоже на: https://github.com/<your_git_user_id>/django_local_library.git). Здесь <your_git_user_id> - это будет ваш id пользователя git.
            • -

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

            +

            Когда ваш репозиторий будет создан - загрузите его себе на компьютер, следуя инструкции, описанной ниже:

            1. Установите git себе на компьютер (Вы можете найти версию для своей платформы здесь).
            2. Откройте командную строку (или терминал) и выполните в нём следующую команду, используя ссылку, которую вы получили с github: 
              git clone https://github.com/<your_git_user_id>/django_local_library.git
              - Это создаст подпапку (с содержанием вашего репозитория и именем вашего репозитория) внутри папки, в котрой выполнялась команда.
              3. + Это создаст подпапку (с содержанием вашего репозитория и именем вашего репозитория) внутри папки, в которой выполнялась команда.
            3. Перейдите в эту папку: 
              cd django_local_library.git
              4. @@ -267,7 +267,7 @@ with open('/etc/secret_key.txt') as f: *.sqlite3
            4. -

              Откройте командную строку или терминал и используйте add команду с флагом -A. Эта комманда сохранит изменения в репозиторий:

              +

              Откройте командную строку или терминал и используйте add команду с флагом -A. Эта команда сохранит изменения в репозиторий:

              git add -A
              5. @@ -315,9 +315,9 @@ Changes to be committed:

              Gunicorn

              -

              Gunicorn рекомендуемый http сервер с Django на Heroku (Как указанов Procfile выше). Это чистый python http сервер для WSGI приложений  которые могут запускать множество параллельных python процессов в пределах одного динамического (посмотрите Deploying Python applications with Gunicorn для получения большей информации).

              +

              Gunicorn рекомендуемый http сервер с Django на Heroku (Как указано в Procfile выше). Это чистый python http сервер для WSGI приложений  которые могут запускать множество параллельных python процессов в пределах одного динамического (посмотрите Deploying Python applications with Gunicorn для получения большей информации).

              -

              Также нам не понадобится Gunicorn для обслушивания нашей LocalLibrary приложения в течение разработки, мы установим это так, чтобы он стал частью наших требований к Heroku для настройки на удаленном сервере.

              +

              Также нам не понадобится Gunicorn для обслуживания нашей LocalLibrary приложения в течение разработки, мы установим это так, чтобы он стал частью наших требований к Heroku для настройки на удаленном сервере.

              Установка Gunicorn локально в командной строке используя пакетный менеджер pip (которые мы установили когда настраивали среду разработки):

              @@ -504,7 +504,7 @@ git push origin master

              Загрузите и установите клиент Heroku, следуя инструкциям Heroku здесь.

              -

              После установки клиента вам будут дотупны команды. Например, чтобы получить справку о клиенте:

              +

              После установки клиента вам будут доступны команды. Например, чтобы получить справку о клиенте:

              heroku help
              diff --git a/files/ru/learn/server-side/django/development_environment/index.html b/files/ru/learn/server-side/django/development_environment/index.html index 6173f67714..fa1d2f14c7 100644 --- a/files/ru/learn/server-side/django/development_environment/index.html +++ b/files/ru/learn/server-side/django/development_environment/index.html @@ -95,7 +95,7 @@ translation_of: Learn/Server-side/Django/development_environment

              Замечание: Установленные в глобальную среду приложения Python потенциально могут конфликтовать друг с другом (т.е. если они зависят от разных версий одного и того же пакета).

              -

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

              +

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

              По этой причине опытные разработчики Python / Django часто предпочитают вместо этого запускать свои приложения Python в независимых виртуальных средах Python. Это позволяет разработчикам иметь несколько разных сред Django на одном компьютере. Команда разработчиков Django сама рекомендует использовать виртуальные среды Python!

              @@ -118,7 +118,7 @@ translation_of: Learn/Server-side/Django/development_environment 
              python3 -V
  Python 3.5.2
              -

              Однако, инструмент Python Package Index, при помощи которого вам нужно будет установаить пакеты для  Python 3 (включая Django), по умолчанию не установлен. Вы можете установить pip3 через терминал bash при помощи:

              +

              Однако, инструмент Python Package Index, при помощи которого вам нужно будет установить пакеты для  Python 3 (включая Django), по умолчанию не установлен. Вы можете установить pip3 через терминал bash при помощи:

              sudo apt-get install python3-pip
              @@ -240,7 +240,7 @@ source /usr/local/bin/virtualenvwrapper.sh
              -

              Замечание: Переменная VIRTUALENVWRAPPER_PYTHON указывает на обычное расположение Python3. Если virtualenv не работает во время тестирования, то вам следует проверить, находится ли интерпертатор Python в нужном расположении (и затем поменять его соответствующим образом в значении переменной).

              +

              Замечание: Переменная VIRTUALENVWRAPPER_PYTHON указывает на обычное расположение Python3. Если virtualenv не работает во время тестирования, то вам следует проверить, находится ли интерпретатор Python в нужном расположении (и затем поменять его соответствующим образом в значении переменной).

              Эти строки такие же, как в случае с Ubuntu, но файл загрузки в вашей домашней директории назван иначе - .bash_profile. 

              @@ -271,7 +271,7 @@ nano .bash_profile # Open the file in the nano text editor, within the terminal

              Установка виртуальной среды для Windows 10

              -

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

              +

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

              pip3 install virtualenvwrapper-win
              @@ -392,7 +392,7 @@ Quit the server with CONTROL-C.
            5. Руководство Django Часть 8: Авторизация пользователей и уровни доступа
            6. Руководство Django Часть 9: Работа с формами
            7. Руководство Django Часть 10: Тестирование веб-приложений Django
              8. -
            8. Руководство Django Часть 11: Разавертывание Django в производство
              9. +
            9. Руководство Django Часть 11: Развертывание Django в производство
            10. Безопасность веб-приложения Django
            11. DIY Мини-блог на Django
              12. diff --git a/files/ru/learn/server-side/django/django_assessment_blog/index.html b/files/ru/learn/server-side/django/django_assessment_blog/index.html index 1032992a3a..2846523f26 100644 --- a/files/ru/learn/server-side/django/django_assessment_blog/index.html +++ b/files/ru/learn/server-side/django/django_assessment_blog/index.html @@ -101,7 +101,7 @@ translation_of: Learn/Server-side/Django/django_assessment_blog
            - + @@ -436,7 +436,7 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path'

            Этот метод создан, потому что вы, на стороне "многим" данной связи, объявили поле ForeignKey (один-ко многим). Поскольку вы ничего не объявили на другой стороне ("один") данной модели (то есть, модель Book "ничего не знает" про модель BookInstance), то она не имеет никакой возможности (по умолчанию) для получения множества соответствующих записей. Для того, чтобы обойти эту проблему, Django конструирует соответствующую функцию "обратного просмотра" ("reverse lookup"), которой вы можете воспользоваться. Имя данной функции создается в нижнем регистре и состоит из имени модели, в которой был объявлен ForeignKey (то есть, bookinstance), за которым следует _set (то есть функция, созданная для Book будет иметь вид bookinstance_set()).

            -

            Примечание: Здесь мы используем  all() для получения всех записей (по умолчанию). Вы, наверное, могли бы использовать метод filter() для получения подмножетсва записей в коде, но, к сожалению, вы НЕ можете применить данный вызов в шаблоне, потому что вы не можете передать в нем (в шаблоне) аргументы в функцию.

            +

            Примечание: Здесь мы используем  all() для получения всех записей (по умолчанию). Вы, наверное, могли бы использовать метод filter() для получения подмножества записей в коде, но, к сожалению, вы НЕ можете применить данный вызов в шаблоне, потому что вы не можете передать в нем (в шаблоне) аргументы в функцию.

            Обратите внимание, что если вы не определяете порядок выдачи данных (в вашем отображении, или в модели), то сервер разработки "выкинет" сообщения об ошибках, похожие на следующие:

            @@ -558,7 +558,7 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path'
          • catalog/author/<id> — Детальная информация об авторе со значением первичного ключа равным <id>
            • -

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

            +

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

            Примечание:

            @@ -588,9 +588,9 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path'

            Поздравляем! Наш базовый функционал библиотеки готов! 

            -

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

            +

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

            -

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

            +

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

            Дополнительная информация

            diff --git a/files/ru/learn/server-side/django/home_page/index.html b/files/ru/learn/server-side/django/home_page/index.html index 0b6c236b76..df43a891ae 100644 --- a/files/ru/learn/server-side/django/home_page/index.html +++ b/files/ru/learn/server-side/django/home_page/index.html @@ -23,7 +23,7 @@ translation_of: Learn/Server-side/Django/Home_page
            - + @@ -55,7 +55,7 @@ translation_of: Learn/Server-side/Django/Home_page

            Перечислим URL-адреса, которые понадобятся для наших страниц:

              -
            • catalog/ — Домашняя/индексная странца.
              • +
            • catalog/ — Домашняя/индексная страница.
            • catalog/books/ — Список всех книг.
            • catalog/authors/ — Список всех авторов.
            • catalog/book/<id> — Детальная информация для определенной книги со значением первичного ключа равного <id>. Например, /catalog/book/3, для id = 3.
              • @@ -69,7 +69,7 @@ translation_of: Learn/Server-side/Django/Home_page

              Примечание: Django позволяет вам конструировать ваши URL-адреса любым, удобным для вас, способом — вы можете закодировать информацию в теле URL-адреса, как показано выше, или использовать URL-адрес типа GET (например, /book/?id=6). Независимо от ваших предпочтений, URL-адреса должны быть понятными, логичными и читабельными (посмотрите совет W3C здесь).

              - Документация Django рекомендует кодировать информацию в теле URL-адреса, на практике это приводит к лучшей стркутуре сайта.

              + Документация Django рекомендует кодировать информацию в теле URL-адреса, на практике это приводит к лучшей структуре сайта.

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

              @@ -84,7 +84,7 @@ translation_of: Learn/Server-side/Django/Home_page

              URL-преобразование

              -

              Когда мы создавали скелет сайта мы обновили locallibrary/urls.py так что всякий раз, когда начинается URL-адрес наш catalog/ получен и URLConf catalog.urls подлючен для обработки оставшейся части строки.

              +

              Когда мы создавали скелет сайта мы обновили locallibrary/urls.py так что всякий раз, когда начинается URL-адрес наш catalog/ получен и URLConf catalog.urls подключен для обработки оставшейся части строки.

              urlpatterns += [
     path('catalog/', include('catalog.urls')),
@@ -98,7 +98,7 @@ translation_of: Learn/Server-side/Django/Home_page
     path('', views.index, name='index'),
 ]
              -

              Эта функция path() определяет URL-паттерн (в данном случае это пустая строка:'' - мы поговорим чуть более подробно о них далее в данном руководстве) и функцию отображения, которая будет вызвана, если введенный адрес будет соответствать данному паттерну (views.index — это функция с именем index() в views.py).

              +

              Эта функция path() определяет URL-паттерн (в данном случае это пустая строка:'' - мы поговорим чуть более подробно о них далее в данном руководстве) и функцию отображения, которая будет вызвана, если введенный адрес будет соответствует данному паттерну (views.index — это функция с именем index() в views.py).

              Данная функция path(), кроме того, определяет параметр name, который уникально определяет это частное URL-преобразование. Вы можете использовать данное имя для "обратного" ("reverse") преобразования — то есть, для динамического создания URL-адреса, указывающего на ресурс, на которое указывает данное преобразование. Например, теперь, когда у нас имеется данное символическое имя, мы можем ссылаться на нашу домашнюю страницу при помощи создания следующей ссылки внутри какого-либо шаблона:

              @@ -142,7 +142,7 @@ def index(request): context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors}, ) -

              Первая часть функции отображения получает количество записей при помощи вызова функции objects.all() у атрибута objects, доступного для всех классов моделей. Похожим образом мы получаем список объектов BookInstance, которые имеют статус 'a' (Доступно). Вы можете найти дополнительную инофрмацию о работе с моделями в предыдущей части руководства (Руководство часть 3: Применение моделей > Поиск записей).

              +

              Первая часть функции отображения получает количество записей при помощи вызова функции objects.all() у атрибута objects, доступного для всех классов моделей. Похожим образом мы получаем список объектов BookInstance, которые имеют статус 'a' (Доступно). Вы можете найти дополнительную информацию о работе с моделями в предыдущей части руководства (Руководство часть 3: Применение моделей > Поиск записей).

              В конце функции index вызывается функция  render(), которая, в качестве ответа, создает и возвращает страницу HTML  (эта функция "оборачивает" вызовы нескольких функций, тем самым существенно упрощая процесс разработки). В качестве параметров ей передаются объект request  (типа HttpRequest), шаблон HTML-страницы с метками (placeholders), которые будут замещены данными,  а также переменной context (словарь Python, который содержит данные, которые и будут замещать метки в шаблоне). 

              @@ -163,7 +163,7 @@ def index(request):

              Например, базовый шаблон base_generic.html может выглядеть как показано ниже. Как вы видите, этот файл содержит некоторую "общую" структуру HTML, разделы для заголовка, панель навигации и содержимое, отмеченное тэгами шаблона block и endblock (показано жирным). Данные блоки могут быть пустыми, или иметь содержимое, которое будет использоваться "по умолчанию" всеми страницами-наследниками.

              -

              Примечание: Тэги шаблона подобны функциям, которые могут применяться для создания циклов по спискам, выполнять условные оперции и так далее. Кроме тэгов, язык шаблона позволяет использовать переменные (которые передаются в шаблон из отображения), а также шаблонные фильтры, которые переформатируют переменные (например, переводят строку в нижний регистр).

              +

              Примечание: Тэги шаблона подобны функциям, которые могут применяться для создания циклов по спискам, выполнять условные операции и так далее. Кроме тэгов, язык шаблона позволяет использовать переменные (которые передаются в шаблон из отображения), а также шаблонные фильтры, которые переформатируют переменные (например, переводят строку в нижний регистр).

              <!DOCTYPE html>
@@ -181,7 +181,7 @@ def index(request):
 
 
              Когда мы определяем шаблон для конкретного отображения, то в первую очередь мы объявляем базовый шаблон (при помощи тэга extends — смотрите код в следующем фрагменте). Если имеются блоки в базовом шаблоне, которые мы хотим заместить, тогда в нашем текущем шаблоне мы объявляем block/endblock и указываем соответствующее имя блока. 
              
 
-
              Например фрагмент кода, показанный ниже, демонстрирует применение тэга extends и переопределяет блок с именем content. Окончальный код HTML будет содержать все структуры базового файла шаблона (включая содержимое по умолчанию, которое мы указали в блоке title) и код блока content, который мы разместили в текущем файле шаблона.
              
+
              Например фрагмент кода, показанный ниже, демонстрирует применение тэга extends и переопределяет блок с именем content. Окончательный код HTML будет содержать все структуры базового файла шаблона (включая содержимое по умолчанию, которое мы указали в блоке title) и код блока content, который мы разместили в текущем файле шаблона.
              
 
 
              {% extends "base_generic.html" %}
 
@@ -332,7 +332,7 @@ def index(request):
 
              А теперь парочка заданий, чтобы проверить, насколько вы усвоили работу с запросами к моделям базы данных, взаимодействия с отображениями и шаблонами. 
              
 
 
                
- 
              1. В главном файле шаблона (base_generic.html) есть блок title. Переопределите этот блок в индексном шаблоне (index.html) и задейте новый заголовок для этой страницы.
                2. 
+ 
              2. В главном файле шаблона (base_generic.html) есть блок title. Переопределите этот блок в индексном шаблоне (index.html) и задайте новый заголовок для этой страницы.
                3. 
  
              3. Модифицируйте функцию отображения таким образом, чтобы получать из базы данных количество жанров и количество книг, которые содержат в своих заголовках какое-либо слово (без учета регистра), а затем передайте эти значения в шаблон.
                4. 
 
              
 
diff --git a/files/ru/learn/server-side/django/index.html b/files/ru/learn/server-side/django/index.html
index 7e167477b1..eca3307e36 100644
--- a/files/ru/learn/server-side/django/index.html
+++ b/files/ru/learn/server-side/django/index.html
@@ -15,7 +15,7 @@ translation_of: Learn/Server-side/Django
 
 
              Требования
              
 
-
              Перед началом работы с этим модулем вам не обязательно уже быть знакомым с Django. Вам бы пригодилось общее понимание того, что такое серверное веб-программирование и веб-фреймворки, почерпнутое, в идеале, из топиков другого нашего модуля Первые шаги серверного программирования вебсайтов.
              
+
              Перед началом работы с этим модулем вам не обязательно уже быть знакомым с Django. Вам бы пригодилось общее понимание того, что такое серверное веб-программирование и веб-фреймворки, почерпнутое, в идеале, из топиков другого нашего модуля Первые шаги серверного программирования веб-сайтов.
              
 
 
              Рекомендуется базовое понимание концепций программирования и языка Python, но это не обязательно для освоения основных понятий.
              
 
diff --git a/files/ru/learn/server-side/django/introduction/index.html b/files/ru/learn/server-side/django/introduction/index.html
index f2f6b957f7..94584856c9 100644
--- a/files/ru/learn/server-side/django/introduction/index.html
+++ b/files/ru/learn/server-side/django/introduction/index.html
@@ -61,7 +61,7 @@ original_slug: Learn/Server-side/Django/Введение
 
              Django продолжает расти и улучшаться с момента его первого релиза (1.0) в сентябре 2008 года до недавно выпущенной версии 3.1 (2020). В каждой версии добавлены новые функциональные возможности и исправлены ошибки, начиная от поддержки новых типов баз данных, шаблонизаторов и кэширования, до добавления «общих» функций просмотра и классов (уменьшающих объём кода, который разработчики должны писать для ряда программных задач).
              
 
 
              
-
              Заметка: Ознакомтесь с примечаниями к версии на сайте Django, чтобы увидеть что изменилось в последних версиях и как много работы было проделано, чтобы улучшить Django.
              
+
              Заметка: Ознакомьтесь с примечаниями к версии на сайте Django, чтобы увидеть что изменилось в последних версиях и как много работы было проделано, чтобы улучшить Django.
              
 
              
 
 
              Django — это процветающий совместный проект с открытым исходным кодом, в котором заняты многие тысячи пользователей и участников. Несмотря на то, что у него всё ещё есть некоторые особенности, которые отражают его происхождение, Django превратился в универсальный фреймворк, способный разрабатывать веб-сайты любого типа.
              
@@ -76,7 +76,7 @@ original_slug: Learn/Server-side/Django/Введение
 
 
              Является ли Django гибким?
              
 
-
              Веб-фрейморки часто можно поделить на "гибкие" и "негибкие".
              
+
              Веб-фреймворки часто можно поделить на "гибкие" и "негибкие".
              
 
 
              Негибкие - это те, у которых есть "правильный путь" для решения какой-либо конкретной задачи. Они часто поддерживают быстрое развёртывание в определенной области (решение проблем определенного типа), потому что правильный способ сделать что-либо обычно хорошо понимается и хорошо документируется. Однако они могут быть менее гибкими при решении проблем за пределами их основной сферы и, как правило, предлагают меньше вариантов того, какие компоненты и подходы они могут использовать.
              
 
@@ -86,7 +86,7 @@ original_slug: Learn/Server-side/Django/Введение
 
 
              Как выглядит код Django?
              
 
-
              На традиционном информационом веб-сайте веб-приложение ожидает HTTP-запросы от веб-браузера (или другого клиента). Когда запрос получен, приложение разрабатывает то, что необходимо на основе URL-адреса и, возможно, данных в POST или GET запросах. В зависимости от того, что требуется, далее он может читать или записывать информацию из базы данных или выполнять другие задачи, необходимые для удовлетворения запроса. Затем приложение вернёт ответ веб-браузеру, часто динамически создавая HTML-страницу для отображения в браузере, вставляя полученные данные в HTML-шаблон.
              
+
              На традиционном информационном веб-сайте веб-приложение ожидает HTTP-запросы от веб-браузера (или другого клиента). Когда запрос получен, приложение разрабатывает то, что необходимо на основе URL-адреса и, возможно, данных в POST или GET запросах. В зависимости от того, что требуется, далее он может читать или записывать информацию из базы данных или выполнять другие задачи, необходимые для удовлетворения запроса. Затем приложение вернёт ответ веб-браузеру, часто динамически создавая HTML-страницу для отображения в браузере, вставляя полученные данные в HTML-шаблон.
              
 
 
              Веб-приложения, написанные на Django, обычно группируют код, который обрабатывает каждый из этих шагов, в отдельные файлы:
              
 
@@ -110,7 +110,7 @@ original_slug: Learn/Server-side/Django/Введение
 
 
              Отправка запроса в правильное view (urls.py)
              
 
-
              Сопоставитель URL-адресов обычно содержится в файле urls.py. В примере ниже сопоставитель (urlpatterns) определяет список сопоставлений междумаршрутами (определёнными URL-шаблонами) и соотвествующими функциями отображения (view). Если получен HTTP-запрос, который имеет URL-адрес, соответствующий определённому шаблону, то затем будет вызвана связанная функция отображения (view) и передана в запрос.
              
+
              Сопоставитель URL-адресов обычно содержится в файле urls.py. В примере ниже сопоставитель (urlpatterns) определяет список сопоставлений междумаршрутами (определёнными URL-шаблонами) и соответствующими функциями отображения (view). Если получен HTTP-запрос, который имеет URL-адрес, соответствующий определённому шаблону, то затем будет вызвана связанная функция отображения (view) и передана в запрос.
              
 
 
              urlpatterns = [
     path('admin/', admin.site.urls),
@@ -158,7 +158,7 @@ def index(request):
 
 
              Определение данных модели (models.py)
              
 
-
              Веб-приложения Django обрабатывают и запрашивают данные через объекты Python, называемые моделями. Модели определяют структуру хранимых данных, включая типы полей и, возможно, их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст меток для форм и т. д. Определение модели не зависит от используемой базы данных — ваши модели будут работать в любой из них. После того как вы выбрали базу данных, которую хотите использовать, вам не нужно напрямую обращатся к ней — вы просто пишете свою структуру модели и другой код, а Django выполняет всю «грязную работу» по обращению к базе данных за вас.
              
+
              Веб-приложения Django обрабатывают и запрашивают данные через объекты Python, называемые моделями. Модели определяют структуру хранимых данных, включая типы полей и, возможно, их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст меток для форм и т. д. Определение модели не зависит от используемой базы данных — ваши модели будут работать в любой из них. После того как вы выбрали базу данных, которую хотите использовать, вам не нужно напрямую обращаться к ней — вы просто пишете свою структуру модели и другой код, а Django выполняет всю «грязную работу» по обращению к базе данных за вас.
              
 
 
              В приведённом ниже фрагменте кода показана очень простая модель Django для объекта Team. Класс Team наследуется от класса models.Model. Он определяет имя команды и командный уровень в качестве полей символов и задаёт максимальное количество символов, которые могут быть сохранены для каждой записи. Team_level может быть одним из нескольких значений, поэтому мы определяем его как поле выбора и предоставляем сопоставление между отображаемыми вариантами и хранимыми данными вместе со значением по умолчанию.
              
 
@@ -192,7 +192,7 @@ class Team(models.Model):
 
 
              Модель 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
 
diff --git a/files/ru/learn/server-side/django/models/index.html b/files/ru/learn/server-side/django/models/index.html
index 9ed7993e0b..b35461558d 100644
--- a/files/ru/learn/server-side/django/models/index.html
+++ b/files/ru/learn/server-side/django/models/index.html
@@ -116,7 +116,7 @@ class MyModelName(models.Model):
 
 
                
  
              • help_text: Предоставляет текстовую метку для HTML-форм (например, на сайте администратора), как описано выше.
                • 
- 
              • verbose_name: Удобо-читаемое имя для поля, используемого в поле метки. Если не указано, Django выведет по умолчанию подробное название от имени поля.
                • 
+ 
              • verbose_name: Удобочитаемое имя для поля, используемого в поле метки. Если не указано, Django выведет по умолчанию подробное название от имени поля.
                • 
  
              • default: Значение по умолчанию для поля. Это может быть значение или вызываемый объект, и в этом случае объект будет вызываться каждый раз, когда создается новая запись.
                • 
  
              • null: Если True, Django будет хранить пустые значения как NULL в базе данных для полей, где это уместно (CharField вместо этого сохранит пустую строку). По умолчанию используется значение False.
                • 
  
              • blank: Если True, поле может быть пустым в ваших формах. По умолчанию используется значение False, что означает, что проверка формы Django заставит вас ввести значение. Это часто используется с null = True, потому что если вы хотите разрешить пустые значения, вы также хотите, чтобы база данных могла представлять их соответствующим образом.
                • 
@@ -152,7 +152,7 @@ class MyModelName(models.Model):
     ordering = ["-my_field_name"]
     ...
              
 
-
              Одной из наиболее полезных функций этих метаданных является управление сотрировкой записей, возвращаемых при запросе типа модели. Вы можете сделать это, указав соответствия названия полей для сортировки, как показано выше. Порядок будет зависеть от типа поля (поля символов отсортированы в алфавитном порядке, а поля даты отсортированы в хронологическом порядке). Как показано выше, вы можете префикс имени поля минус-символом (-), чтобы изменить порядок сортировки.
              
+
              Одной из наиболее полезных функций этих метаданных является управление сортировка записей, возвращаемых при запросе типа модели. Вы можете сделать это, указав соответствия названия полей для сортировки, как показано выше. Порядок будет зависеть от типа поля (поля символов отсортированы в алфавитном порядке, а поля даты отсортированы в хронологическом порядке). Как показано выше, вы можете префикс имени поля минус-символом (-), чтобы изменить порядок сортировки.
              
 
 
              Например, если мы решили сортировать книги по умолчанию:
              
 
@@ -183,7 +183,7 @@ class MyModelName(models.Model):
 
              
 
 
              
-
              Примечание. Предполагется, что вы будете использовать URL-адреса, например / myapplication / mymodelname / 2, для отображения отдельных записей для вашей модели (где «2» - это идентификатор для определенной записи), вам нужно будет создать URL-карту, чтобы передать ответ и идентификатор «Образцовое представление модели» (которое будет выполнять работу, необходимую для отображения записи). Вышеуказанная функция reverse () может «перевернуть» ваш URL-адрес (в приведенном выше примере с именем «model-detail-view»), чтобы создать URL-адрес правильного формата.
              
+
              Примечание. Предполагается, что вы будете использовать URL-адреса, например / myapplication / mymodelname / 2, для отображения отдельных записей для вашей модели (где «2» - это идентификатор для определенной записи), вам нужно будет создать URL-карту, чтобы передать ответ и идентификатор «Образцовое представление модели» (которое будет выполнять работу, необходимую для отображения записи). Вышеуказанная функция reverse () может «перевернуть» ваш URL-адрес (в приведенном выше примере с именем «model-detail-view»), чтобы создать URL-адрес правильного формата.
              
 
 
              Конечно, для выполнения этой работы вам все равно придется писать сопоставление URL-адрес, просмотр и шаблон!
              
 
              
diff --git a/files/ru/learn/server-side/django/sessions/index.html b/files/ru/learn/server-side/django/sessions/index.html
index 8792653f11..82f4056cf3 100644
--- a/files/ru/learn/server-side/django/sessions/index.html
+++ b/files/ru/learn/server-side/django/sessions/index.html
@@ -19,7 +19,7 @@ original_slug: Learn/Server-side/Django/Сессии
 
 
              {{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django")}}
              
 
-
              Эта часть раширяет наш сайт LocalLibrary, добавляя счетчик посещений домашней страницы, реализованного при помощи сессий. Это относительно простой пример, но он демонстрирует то, как при помощи сессий реализовать анализ поведения анонимных пользователей на сайте.
              
+
              Эта часть расширяет наш сайт LocalLibrary, добавляя счетчик посещений домашней страницы, реализованного при помощи сессий. Это относительно простой пример, но он демонстрирует то, как при помощи сессий реализовать анализ поведения анонимных пользователей на сайте.
            List of all bloggers /blog/bloggers/ -

            Список блоггеров в системе:

            +

            Список блогеров в системе:

            • Доступный для всех пользователей с боковой панели сайта
              • @@ -140,7 +140,7 @@ translation_of: Learn/Server-side/Django/django_assessment_blog
            		Admin site /admin/<standard urls> -

            Админ-сайт должен быть включен, чтобы разрешить создание / редактирование / удаление сообщений в блогах, авторов блога и комментариев блога (это механизм для создания блоггеров в блогах):

            +

            Админ-сайт должен быть включен, чтобы разрешить создание / редактирование / удаление сообщений в блогах, авторов блога и комментариев блога (это механизм для создания блогеров в блогах):

            • В админ панеле должен отображаться список комментариев в строке (внизу каждого сообщения в блоге).
              • @@ -187,11 +187,11 @@ translation_of: Learn/Server-side/Django/django_assessment_blog

              List of all blogs

              -

              Список всех блоггеров

              +

              Список всех блогеров

               

              -

              Это ссылки на всех блоггеров в "All bloggers" по ссылке, которая на боковой панели. В этом случае мы можем увидеть на боковой панели, что ни один пользователь не вошел в систему.

              +

              Это ссылки на всех блогеров в "All bloggers" по ссылке, которая на боковой панели. В этом случае мы можем увидеть на боковой панели, что ни один пользователь не вошел в систему.

              List of all bloggers

              @@ -213,7 +213,7 @@ translation_of: Learn/Server-side/Django/django_assessment_blog

              Об авторе

              -

              Здесь отображается информация о блоггере вместе со списком его блогов.

              +

              Здесь отображается информация о блогере вместе со списком его блогов.

              Blogger detail page

              @@ -233,8 +233,8 @@ translation_of: Learn/Server-side/Django/django_assessment_blog
            • Запустите миграцию для новых моделей и создайте суперпользователя.
            • Используйте админ панель, чтобы создать какой-нибудь пример блога и комментарии в блогах.
              • -
            • Создайте представления, шаблоны, и URL-конфигурации для публикации блога и списка страниц блоггера.
              • -
            • Создайте представления, шаблоны, и URL-конфигурации для публикации блога и подробных страниц блоггера.
              • +
            • Создайте представления, шаблоны, и URL-конфигурации для публикации блога и списка страниц блогера.
              • +
            • Создайте представления, шаблоны, и URL-конфигурации для публикации блога и подробных страниц блогера.
            • Создайте страницу с формой для добавления новых комментариев (не забудьте сделать это доступным только для зарегистрированных пользователей!)
              • diff --git a/files/ru/learn/server-side/django/forms/index.html b/files/ru/learn/server-side/django/forms/index.html index 6a3d8db8f2..0557c10f54 100644 --- a/files/ru/learn/server-side/django/forms/index.html +++ b/files/ru/learn/server-side/django/forms/index.html @@ -98,7 +98,7 @@ translation_of: Learn/Server-side/Django/Forms
            • Очистка и валидация данных.
                -
              • Очистка данных  - это их проверка на наличие возможных значений, или вставок в поля ввода (то есть очистка - это удаление неправильных символов, которые потенциально могут использоваться для отправки вредоносного содержимого на сервер), с последующей конвертацией очищеных данных в подходящие типы данных Python.
                • +
              • Очистка данных  - это их проверка на наличие возможных значений, или вставок в поля ввода (то есть очистка - это удаление неправильных символов, которые потенциально могут использоваться для отправки вредоносного содержимого на сервер), с последующей конвертацией очищенных данных в подходящие типы данных Python.
              • Валидация проверяет, значения полей (например, правильность введенных дат, их диапазон и так далее)
              • @@ -107,7 +107,7 @@ translation_of: Learn/Server-side/Django/Forms
            • Когда все действия были успешно завершены, то перенаправление пользователя на другую страницу.
              • -

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

              +

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

              Примечание: Понимание того, как используется класс Form поможет вам когда мы будем рассматривать классы фреймворка Django, для работы с формами более "высокого уровня".

              @@ -115,7 +115,7 @@ translation_of: Learn/Server-side/Django/Forms

              HTML-форма обновления книги. Класс Form и функция отображения

              -

              Данная глава будет посвещена процессу создания страницы, которая позволит библиотекарям обновлять информацию о книгах (в частности, вводить дату возврата книги). Для того, чтобы сделать это мы создадим форму, которая позволит пользователям вводить значение дат. Мы проинициализируем поле датой, равной 3 неделям, начиная с текущего дня, и, для того, чтобы библотекарь не имел возможность ввести "неправильную" дату, мы добавим валидацию введенных значений, которая будет проверять, чтобы введенная дата не относилась к прошлому, или к слишком далекому будущему. Когда будет получена "правильная" дата мы запишем ее значение в поле  BookInstance.due_back.

              +

              Данная глава будет посвящена процессу создания страницы, которая позволит библиотекарям обновлять информацию о книгах (в частности, вводить дату возврата книги). Для того, чтобы сделать это мы создадим форму, которая позволит пользователям вводить значение дат. Мы проинициализируем поле датой, равной 3 неделям, начиная с текущего дня, и, для того, чтобы библиотекарь не имел возможность ввести "неправильную" дату, мы добавим валидацию введенных значений, которая будет проверять, чтобы введенная дата не относилась к прошлому, или к слишком далекому будущему. Когда будет получена "правильная" дата мы запишем ее значение в поле  BookInstance.due_back.

              Данный пример будет использовать отображение на основе функции, а также продемонстрирует работу с классом Form. Следующие разделы покажут изменения, которые вам надо сделать, чтобы продемонстрировать работу форм в проекте LocalLibrary.

              @@ -127,7 +127,7 @@ translation_of: Learn/Server-side/Django/Forms

              Синтаксис объявления для класса формы Form очень похож на объявление класса модели Model, он даже использует те же типы полей (и некоторые похожие параметры). Это существенный момент, поскольку в обоих случаях нам надо убедиться, что каждое поле управляет правильным типом данных, соответствует нужному диапазону (или другому критерию) и имеет необходимое описание для показа/документации.

              -

              Для того, чтобы создать класс с функционалом базового класса Form мы должны импорировать библиотеку forms, наследовать наш класс от класса Form, а затем объявить поля формы. Таким образом, самый простой класс формы в нашем случае будет иметь вид, показанный ниже:

              +

              Для того, чтобы создать класс с функционалом базового класса Form мы должны импортировать библиотеку forms, наследовать наш класс от класса Form, а затем объявить поля формы. Таким образом, самый простой класс формы в нашем случае будет иметь вид, показанный ниже:

              from django import forms
 
@@ -145,7 +145,7 @@ class RenewBookForm(forms.Form):
 
 
                
  
              • required: Если True, то данное поле не может быть пустым, или иметь значениеNone. Данное значение установлено по умолчанию.
                • 
- 
              • label: Тектовая метка, используемая для рендеринга поля в HTML-код. Если label не определена, то Django попытается создать ее значение при помощи имени поля, переводя первый символ в верхний регистр, а также заменяя символы подчеркивания пробелами (например, для переменной с именем renewal_date, будет создан следующий текст метки: Renewal date).
                • 
+ 
              • label: Текстовая метка, используемая для рендеринга поля в HTML-код. Если label не определена, то Django попытается создать ее значение при помощи имени поля, переводя первый символ в верхний регистр, а также заменяя символы подчеркивания пробелами (например, для переменной с именем renewal_date, будет создан следующий текст метки: Renewal date).
                • 
  
              • label_suffix: По умолчанию показывает двоеточие после текста метки (например, Renewal date:). Данный параметр позволяет вам указать любой суффикс по вашему желанию.
                • 
  
              • initial: Начальное значение для поля при показе формы.
                • 
  
              • widget: Применяемый виджет для поля.
                • 
@@ -185,7 +185,7 @@ class RenewBookForm(forms.Form):
 
 
                Необходимо отметить два важных момента. Первый это то, что мы получаем наши данные при помощи словаря self.cleaned_data['renewal_date'], а затем в конце возвращаем полученное значение, для проведения необходимых проверок. Данный шаг позволяет нам, при помощи валидаторов, получить "очищенные", проверенные, а затем, приведенные к стандартным типам, данные (в нашем случае к типу Python datetime.datetime).
                
 
-
                Второй момент касается того случая, когда наше значение "выпадает за рамки" и мы "выкидываем" исключение ValidationError, в котором указываем текст, который мы хотим показать на форме, для случая когда были введены неправильные данные. Пример, показанный выше, оборачивает данный текст при помощи функции перевода Django ugettext_lazy() (импортирумую через _()), которая может вам пригодиться, если вы планируете перевести ваш сайт в будущем.
                
+
                Второй момент касается того случая, когда наше значение "выпадает за рамки" и мы "выкидываем" исключение ValidationError, в котором указываем текст, который мы хотим показать на форме, для случая когда были введены неправильные данные. Пример, показанный выше, оборачивает данный текст при помощи функции перевода Django ugettext_lazy() (импортируемую через _()), которая может вам пригодиться, если вы планируете перевести ваш сайт в будущем.
                
 
 
                
 
                Примечание: Существует множество других методов и примеров валидации различных форм, которые можно найти в Формы и валидация поля (Django docs). Например, в случае, если у вас имеется много полей, которые зависят один от другого, вы можете переопределить функцию Form.clean() и, при необходимости, "выкинуть" ValidationError.
                
@@ -350,7 +350,7 @@ def renew_book_librarian(request, pk):
 
 
                Шаблон
                
 
-
                Создайте шаблон, на который ссылается наше отображение (/catalog/templates/catalog/book_renew_librarian.html) и скопируйте в него код, указаный ниже:
                
+
                Создайте шаблон, на который ссылается наше отображение (/catalog/templates/catalog/book_renew_librarian.html) и скопируйте в него код, указанный ниже:
                
 
 
                {% extends "base_generic.html" %}
 {% block content %}
@@ -371,7 +371,7 @@ def renew_book_librarian(request, pk):
 
 
                Большая его часть вам знакома из предыдущих частей руководства. Мы расширяем базовый шаблон, а затем замещаем блок содержимого content. У нас имеется возможность ссылаться на переменную \{{bookinst}} (и ее поля) поскольку мы передали ее в объект контекста при вызове функции render(). Здесь мы используем данный объект для вывода заголовка книги, дат ее получения и возврата.
                
 
-
                Код формы относительно прост. В первую очередь мы объявляем тэгform, затем определяем куда будут отправлены данные (action) и каким способом (method, в данном случае "HTTP POST") — если обратитесь к обзору раздела Формы HTML в верхней части данной страницы, то найдете там замечение, что пустое значние атрибута action, означает, что данные из формы будут переданы обратно по текущему URL-адресу данной страницы  (чего мы и хотим!). Внутри тэга формы мы объявляем кнопку submit при помощи которой мы можем отправить наши данные. Блок {% csrf_token %}, добавленный первой строкой внутри блока формы, является частью фреймворка Django и служит для борьбы с CSRF.
                
+
                Код формы относительно прост. В первую очередь мы объявляем тэгform, затем определяем куда будут отправлены данные (action) и каким способом (method, в данном случае "HTTP POST") — если обратитесь к обзору раздела Формы HTML в верхней части данной страницы, то найдете там замещение, что пустое значение атрибута action, означает, что данные из формы будут переданы обратно по текущему URL-адресу данной страницы  (чего мы и хотим!). Внутри тэга формы мы объявляем кнопку submit при помощи которой мы можем отправить наши данные. Блок {% csrf_token %}, добавленный первой строкой внутри блока формы, является частью фреймворка Django и служит для борьбы с CSRF.
                
 
 
                
 
                Примечание: Добавляйте {% csrf_token %} в каждый шаблон Django, в котором вы создаете форму для отправки данных методом POST. Это поможет уменьшить вероятность взлома вашего сайта злоумышленниками.
                
@@ -445,7 +445,7 @@ def renew_book_librarian(request, pk):
 
 
                
 
-
                Список всех книг с ссылками на странцу обновления данных:
                
+
                Список всех книг с ссылками на страницу обновления данных:
                
 
 
                
 
@@ -453,9 +453,9 @@ def renew_book_librarian(request, pk):
 
 
                Создание класса формы Form при помощи примера, описанного выше, является довольно гибким способом, позволяющим вам создавать формы любой структуры которую вы пожелаете, в связке с любой моделью, или моделями.
                
 
-
                Тем не менее, если вам просто нужна форма для отображения полей одиночной модели, тогда эта самая модель уже содержит большую часть информации, которая вам нужна для построения формы: сами поля, текстовые метки, дополнительный текст и так далее. И чтобы не воспроизводить информацию из модели для вашей формы, проще воспользоваться классом ModelForm, который помогает созадавать формы непосредственно из модели. Класс ModelForm может применяться в ваших отображениях точно таким же образом как и "классический" класс формы Form.
                
+
                Тем не менее, если вам просто нужна форма для отображения полей одиночной модели, тогда эта самая модель уже содержит большую часть информации, которая вам нужна для построения формы: сами поля, текстовые метки, дополнительный текст и так далее. И чтобы не воспроизводить информацию из модели для вашей формы, проще воспользоваться классом ModelForm, который помогает создавать формы непосредственно из модели. Класс ModelForm может применяться в ваших отображениях точно таким же образом как и "классический" класс формы Form.
                
 
-
                Базовая реализация ModelForm содержит тоже поле как и ваш предыдущий класс формы  RenewBookForm, что и показано ниже. Все что вам необходимо сделать, - внутри вашего нового класса добавить класс Meta и связать его с моделью model (BookInstance), а затем перечислить поля модели в поле fields которые должны быть включены в форму (вы можете включить все поля при помощи fields = '__all__', или можно вопользоваться полем exclude (вместо fields), чтобы определить поля модели, которые не нужно включать).
                
+
                Базовая реализация ModelForm содержит тоже поле как и ваш предыдущий класс формы  RenewBookForm, что и показано ниже. Все что вам необходимо сделать, - внутри вашего нового класса добавить класс Meta и связать его с моделью model (BookInstance), а затем перечислить поля модели в поле fields которые должны быть включены в форму (вы можете включить все поля при помощи fields = '__all__', или можно воспользоваться полем exclude (вместо fields), чтобы определить поля модели, которые не нужно включать).
                
 
 
                from django.forms import ModelForm
 from .models import BookInstance
@@ -510,10 +510,10 @@ class RenewBookModelForm(ModelForm):
 
 
                Обобщенные классы отображения для редактирования
                
 
-
                Алгоритм управления формой, который мы использовали в нашей функции отображения, является примером достаточно общего подхода к работе с формой. Django старается абстрагировать и упростить бульшую часть данной работы, путем широкого применения обобщенных классов отображений, которые служат для создания, редактирования и удаления отображений на основе моделей. Они не только управляют поведением отображения, но, кроме того, они из вашей модели автоматически создают класс формы  (ModelForm).
                
+
                Алгоритм управления формой, который мы использовали в нашей функции отображения, является примером достаточно общего подхода к работе с формой. Django старается абстрагировать и упростить большую часть данной работы, путем широкого применения обобщенных классов отображений, которые служат для создания, редактирования и удаления отображений на основе моделей. Они не только управляют поведением отображения, но, кроме того, они из вашей модели автоматически создают класс формы  (ModelForm).
                
 
 
                
-
                Примечание: В дополнение к отображениям для реактирования, описываемых здесь, существует также класс FormView, который по своему предназначению находится где-то между "простой" функцией отображения и другими обобщенными отображенями, то есть в каком-то смысле, в диапазоне: "гибкость" против "усилия при программировании". Применяя FormView, вы все еще нуждаетесь в создании класса Form, но вам не нужно реализовавыть весь "стандартный" функционал работы с формой. Вместо этого, вы должны просто реализовать функцию, которая будет вызвана в тот момент, когда станет понятно, что получаемые из формы данные, "правильные" (валидны).
                
+
                Примечание: В дополнение к отображениям для редактирования, описываемых здесь, существует также класс FormView, который по своему предназначению находится где-то между "простой" функцией отображения и другими обобщенными отображениями, то есть в каком-то смысле, в диапазоне: "гибкость" против "усилия при программировании". Применяя FormView, вы все еще нуждаетесь в создании класса Form, но вам не нужно реализовывать весь "стандартный" функционал работы с формой. Вместо этого, вы должны просто реализовать функцию, которая будет вызвана в тот момент, когда станет понятно, что получаемые из формы данные, "правильные" (валидны).
                
 
                
 
 
                В данном разделе мы собираемся  использовать обобщенные классы для редактирования, для того, чтобы создать страницы, который добавляют функционал создания, редактирования и удаления записей типа Author из нашей библиотеки — предоставляя базовый функционал некоторых частей административной части сайта (это может быть полезно для случаев, когда вам нужно создать административную часть сайта, которая, в отличие от стандартной, была бы более гибкой).
                
@@ -541,7 +541,7 @@ class AuthorDelete(DeleteView):
 
 
                Как вы видите, для создания отображений вам надо наследоваться от следующих классовCreateView, UpdateView и DeleteView (соответственно), а затем связать их с соответствующей моделью.
                
 
-
                Для случаев "создать" и "обновить" вам также понадобится определить поля для показа на форме (применяя тот же синтаксис, что и для ModelForm). В этом случае мы демонстриурем синтаксис и для показа "всех" полей, и перечисление их по отдельности. Также вы можете указать начальные значения для каждого поля, применяя словарь пар имя_поля/значение (в целях демонстрации, в нашем примере мы явно указываем дату смерти — если хотите, то вы можете удалить это поле). По умолчанию отображения перенаправляют пользователя на страницу "успеха", показывая только что созданные/отредатированные данные (записи в модели). В нашем случае это, созданная в предыдущей части руководства, подробная информация об авторе. Вы можете указать альтернативное перенаправление при помощи параметра success_url (как в примере с классом AuthorDelete).
                
+
                Для случаев "создать" и "обновить" вам также понадобится определить поля для показа на форме (применяя тот же синтаксис, что и для ModelForm). В этом случае мы демонстрируем синтаксис и для показа "всех" полей, и перечисление их по отдельности. Также вы можете указать начальные значения для каждого поля, применяя словарь пар имя_поля/значение (в целях демонстрации, в нашем примере мы явно указываем дату смерти — если хотите, то вы можете удалить это поле). По умолчанию отображения перенаправляют пользователя на страницу "успеха", показывая только что созданные/отредактированные данные (записи в модели). В нашем случае это, созданная в предыдущей части руководства, подробная информация об авторе. Вы можете указать альтернативное перенаправление при помощи параметра success_url (как в примере с классом AuthorDelete).
                
 
 
                Классу AuthorDelete не нужно показывать каких либо полей, таким образом их не нужно и декларировать. Тем не менее, вам нужно указать success_url, потому что, в данном случае, для Django не очевидно что делать после успешного выполнения операции удаления записи. Мы используем функцию reverse_lazy() для перехода на страницу списка авторов после удаления одного из них — reverse_lazy() это более "ленивая" версия reverse().
                
 
@@ -621,7 +621,7 @@ class AuthorDelete(DeleteView):
 
 
                Проверьте себя
                
 
-
                Создайте несколько форм создания, редактирования и удаления записей в модели Book. При желании, вы можете использовать теже структуры как и в случае с моделью Authors. Если ваш шаблон book_form.html является просто копией шаблона author_form.html, тогда новая страница "create book" будет выглядеть как на следующем скриншоте:
                
+
                Создайте несколько форм создания, редактирования и удаления записей в модели Book. При желании, вы можете использовать тоже структуры как и в случае с моделью Authors. Если ваш шаблон book_form.html является просто копией шаблона author_form.html, тогда новая страница "create book" будет выглядеть как на следующем скриншоте:
                
 
 
                
 
diff --git a/files/ru/learn/server-side/django/generic_views/index.html b/files/ru/learn/server-side/django/generic_views/index.html
index a208da38ed..8fc4223885 100644
--- a/files/ru/learn/server-side/django/generic_views/index.html
+++ b/files/ru/learn/server-side/django/generic_views/index.html
@@ -31,9 +31,9 @@ translation_of: Learn/Server-side/Django/Generic_views
 
 
                В данном руководстве мы завершим первую версию сайта LocalLibrary, с помощью добавления страницы перечисления и подробной информации о книгах и авторах (или, если быть более точными, мы покажем как вам реализовать соответствующие страницы для книг, а для авторов вы сможете сделать их самостоятельно!)
                
 
-
                Данный процесс похож на создание главной страницы сайта, который мы показывали в предыдущей части руководства. Нам все также надо создать URL-преобразования, отображения и шаблоны страниц. Основным отличием будет то, что для страниц подробной информации перед нами встанет дополнительная задача получения информации из паттерна URL-адреса и передачи ее отображению. Для этих страниц мы собираемся продемонстрировать совершенно другой тип отображения, основанный на применении  обобщеных классов отображения списка и детальной информации о записи. Это может существенно сократить количество кода, необходимого для отображения и сделает его (код) более простым для написания и поддержки.
                
+
                Данный процесс похож на создание главной страницы сайта, который мы показывали в предыдущей части руководства. Нам все также надо создать URL-преобразования, отображения и шаблоны страниц. Основным отличием будет то, что для страниц подробной информации перед нами встанет дополнительная задача получения информации из паттерна URL-адреса и передачи ее отображению. Для этих страниц мы собираемся продемонстрировать совершенно другой тип отображения, основанный на применении  обобщенных классов отображения списка и детальной информации о записи. Это может существенно сократить количество кода, необходимого для отображения и сделает его (код) более простым для написания и поддержки.
                
 
-
                Завершающая часть данного руководства будет посвещена демонстрации постраничного показа ваших данных (pagination) при применении обобщенного класса отображения списка.
                
+
                Завершающая часть данного руководства будет посвящена демонстрации постраничного показа ваших данных (pagination) при применении обобщенного класса отображения списка.
                
 
 
                Страница со списком книг
                
 
@@ -75,7 +75,7 @@ class BookListView(generic.ListView):
 
                Примечание: Этот, выглядящий странно, путь к файлу шаблона не является опечаткой — обобщенное отображение ищет файл шаблона /application_name/the_model_name_list.html (catalog/book_list.html, в данном случае) внутри директории приложения /application_name/templates/ (у нас - /catalog/templates/).
                
 
                
 
-
                Вы можете использовать атрибуты для того, чтобы изменить поведение по умолчанию. Например, вы могли бы указать другой файл шаблона, например, если в вашем распоряжении имеется несколько отображений, которые используют одну и ту же модель, или вам позарез захотелось бы использовать другое имя переменной шаблона, если book_list не является интуитивно понятным. Возможно, наиболее полезным вариантом является изменение/отфильтрование результата запроса к базе данных — таким образом, вместо перечисления всех книг вы могли бы показывать 5 наиболее популярных.
                
+
                Вы можете использовать атрибуты для того, чтобы изменить поведение по умолчанию. Например, вы могли бы указать другой файл шаблона, например, если в вашем распоряжении имеется несколько отображений, которые используют одну и ту же модель, или вам позарез захотелось бы использовать другое имя переменной шаблона, если book_list не является интуитивно понятным. Возможно, наиболее полезным вариантом является изменение/отфильтрованные результата запроса к базе данных — таким образом, вместо перечисления всех книг вы могли бы показывать 5 наиболее популярных.
                
 
 
                class BookListView(generic.ListView):
     model = Book
@@ -163,7 +163,7 @@ class BookListView(generic.ListView):
 
 
                Цикл For
                
 
-
                Шаблон использует тэги for и endfor для того, чтобы "пробежаться" по списку книг, как показано ниже. На каждой итерации (каждом цикле) в переменную шаблона book передается информация текущего эелемента списка.
                
+
                Шаблон использует тэги for и endfor для того, чтобы "пробежаться" по списку книг, как показано ниже. На каждой итерации (каждом цикле) в переменную шаблона book передается информация текущего элемента списка.
                
 
 
                {% for book in book_list %}
   <li> <!-- здесь код, который использует информацию из каждого элемента book списка--> </li>
@@ -220,7 +220,7 @@ urlpatterns = [
 
                В отличие от предыдущих преобразований, в данном случае мы применяем наше регулярное выражение (РВ) для сопоставления "настоящего паттерна", а не просто строки. Данное РВ сопоставляет любой URL-адрес, который начинается с book/, за которым до конца строки (до маркера конца строки - $) следуют одна, или более цифр. В процессе выполнения данного преобразования, оно "захватывает" цифры и передает их в функцию отображения как параметр с именем pk.
                
 
 
                
-
                Примечание: как было отмечено ранее, наш преоразуемый URL-адрес в реальности выглядит вот так catalog/book/<digits> (потому что мы находимся в приложении catalog, то подразумевается каталог /catalog/).
                
+
                Примечание: как было отмечено ранее, наш преобразуемый URL-адрес в реальности выглядит вот так catalog/book/<digits> (потому что мы находимся в приложении catalog, то подразумевается каталог /catalog/).
                
 
                
 
 
                
@@ -229,7 +229,7 @@ urlpatterns = [
 
 
                Отдельный пример с регулярными выражениями
                
 
-
                Паттерны регулярного выражения является невероятно мощным инструментом преобразования. Пока что, мы не очень много говорили о них, поскольку мы сопоставляли URL-адреса с простыми строками (а не паттернами), и потому что они не интуитивны и  пугающи для начинающих.
                
+
                Паттерны регулярного выражения является невероятно мощным инструментом преобразования. Пока что, мы не очень много говорили о них, поскольку мы сопоставляли URL-адреса с простыми строками (а не паттернами), и потому что они не интуитивны и  пугающий для начинающих.
                
 
 
                
 
                Примечание: Без паники! Мы будем рассматривать и использовать достаточно простые паттерны и при этом хорошо задокументированные!
                
@@ -277,7 +277,7 @@ urlpatterns = [
            (?P<name>...)Захват части паттерна (обозначеного через ...) как именованной переменной (в данном случае <name>). Захваченные значения передаются в отображение с определенным именем. Таким образом, ваше отображение должно объявить аргумент с тем же самым именем!Захват части паттерна (обозначенного через ...) как именованной переменной (в данном случае <name>). Захваченные значения передаются в отображение с определенным именем. Таким образом, ваше отображение должно объявить аргумент с тем же самым именем!
            [  ]
            Требования:Прочитать Введение в Django. Завершить изучение предыдущех частей руководства (включая Руководство часть 4: Django административный раздел сайта).Прочитать Введение в Django. Завершить изучение предыдущих частей руководства (включая Руководство часть 4: Django административный раздел сайта).
            Цель:
            @@ -48,7 +48,7 @@ original_slug: Learn/Server-side/Django/Сессии

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

            -

            Django использует куки (cookie), которые содержат специальный идентификатор сессии, который выделяет среди остальных, каждый браузер и соответствующую сессию. Реальные данные сессии, по умолчанию, хранятся в базе данных сайта (это более безопасно, чем сохранять данные в куки, где они могут быть уязвими для злоумышленников). Однако, у вас есть возможность настроить Django так, чтобы сохранять данные сессий в других местах (кэше, файлах, "безопасных" куки). Но все же хранение по умолчанию является хорошей и безопасной возможностью.

            +

            Django использует куки (cookie), которые содержат специальный идентификатор сессии, который выделяет среди остальных, каждый браузер и соответствующую сессию. Реальные данные сессии, по умолчанию, хранятся в базе данных сайта (это более безопасно, чем сохранять данные в куки, где они могут быть уязвимы для злоумышленников). Однако, у вас есть возможность настроить Django так, чтобы сохранять данные сессий в других местах (кэше, файлах, "безопасных" куки). Но все же хранение по умолчанию является хорошей и безопасной возможностью.

            Подключение сессий

            @@ -103,7 +103,7 @@ del request.session['my_car'] # и данные будут сохранены request.session['my_car'] = 'mini' -

            Если вы обновлете информацию внутри данных сессии, тогда Django не распознает эти изменения и не выполнит сохранение данных (например, если вы изменили "wheels" внутри переменной "my_car", как показано ниже). В таких случаях вам надо явно указывать, что сессия была изменена.

            +

            Если вы обновлять информацию внутри данных сессии, тогда Django не распознает эти изменения и не выполнит сохранение данных (например, если вы изменили "wheels" внутри переменной "my_car", как показано ниже). В таких случаях вам надо явно указывать, что сессия была изменена.

            # Объект сессии модифицируется неявно.
 # Изменения НЕ БУДУТ сохранены!
@@ -169,7 +169,7 @@ request.session['my_car']['wheels'] = 'alloy'
 
 
            Итоги
            
 
-
            Вы узнали как применять сессии для улучшения взаимодейстсвие с анонимными пользователями. 
            
+
            Вы узнали как применять сессии для улучшения взаимодействие с анонимными пользователями. 
            
 
 
            В наших следующих статьях мы рассмотрим фреймворк аутентификации и авторизации (разрешение доступа, permission), и покажем вам как поддерживать пользовательские аккаунты.
            
 
diff --git a/files/ru/learn/server-side/django/skeleton_website/index.html b/files/ru/learn/server-side/django/skeleton_website/index.html
index 48dda2c3b8..23ce6dcf85 100644
--- a/files/ru/learn/server-side/django/skeleton_website/index.html
+++ b/files/ru/learn/server-side/django/skeleton_website/index.html
@@ -153,7 +153,7 @@ cd locallibrary

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

            -

            Мы будем использовать базу данных SQLite для этого проекта, потому что не предпологаем большое количество одновременных запросов на неё, а ещё потому, что для её настройки совсем не надо ничего делать! Вы можете видеть, что база данных уже настроена в settings.py (подробная информация указана ниже):

            +

            Мы будем использовать базу данных SQLite для этого проекта, потому что не предполагаем большое количество одновременных запросов на неё, а ещё потому, что для её настройки совсем не надо ничего делать! Вы можете видеть, что база данных уже настроена в settings.py (подробная информация указана ниже):

            DATABASES = {
     'default': {
@@ -246,7 +246,7 @@ urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
 
 
            
-
            Заметка: Существуют различные способы дополнения списка urlpatterns (в примере мы просто добавляли объект, испольщуя оператор += чтобы чётко разделить изначальный и дописанный код). Вместо этого, мы могли бы добавить соотношения внутрь определения переменной:
            
+
            Заметка: Существуют различные способы дополнения списка urlpatterns (в примере мы просто добавляли объект, используя оператор += чтобы чётко разделить изначальный и дописанный код). Вместо этого, мы могли бы добавить соотношения внутрь определения переменной:
            
 
 
            urlpatterns = [   path('admin/', admin.site.urls),
 path('catalog/', include('catalog.urls')),path('',
diff --git a/files/ru/learn/server-side/django/testing/index.html b/files/ru/learn/server-side/django/testing/index.html
index 9b37d8b510..164f3a78fd 100644
--- a/files/ru/learn/server-side/django/testing/index.html
+++ b/files/ru/learn/server-side/django/testing/index.html
@@ -53,7 +53,7 @@ translation_of: Learn/Server-side/Django/Testing
  
            Регрессионное тестирование
            
  
            Тесты которые воспроизводят исторические ошибки (баги). Каждый тест вначале запускается для проверки того, что баг был исправлен, а затем перезапускается для того, чтобы убедиться, что он не был внесен снова с появлением новых изменений в коде.
            
  
            Интеграционные тесты
            
- 
            Проверка совместной работы групп компонентов. Данные тесты отвечают за совместную работу между компонентами, не обращяя внимания на внутренние процессы в компонентах. Они проводятся как для простых групп компонентов, так и для целых веб-сайтов.
            
+ 
            Проверка совместной работы групп компонентов. Данные тесты отвечают за совместную работу между компонентами, не обращая внимания на внутренние процессы в компонентах. Они проводятся как для простых групп компонентов, так и для целых веб-сайтов.
            
 
 
 
            
@@ -64,7 +64,7 @@ translation_of: Learn/Server-side/Django/Testing
 
 
            Тестирование сайта это сложная задача, потому что она состоит их нескольких логических слоев – от  HTTP-запроса и запроса к моделям, до валидации формы и их обработки, а кроме того, рендеринга шаблонов страниц.
            
 
-
            Django предоставляет фреймворк для создания тестов, построенного на основе иерархии классов, которые, в свою очередь, зависят от стандартной библиотеки Python  unittest. Несмотря на название, данный фреймворк подходит и для юнит-, и для интеграционного тестирования. Фреймворк Django добавляет методы API и инструменты, которые помогают тестировать как веб так и, специфическое для Django, поведение. Это позволяет вам имитировать URL-запросы, добавление тестовых данных, а также проводить проверку выходных данных ваших приложений. Кроме того, Django предоставляет API (LiveServerTestCase) и инструменты для применения различных фреймфорков тестирования, например вы можете подключить популярный фреймворк Selenium для имитации поведения пользователя в реальном браузере.
            
+
            Django предоставляет фреймворк для создания тестов, построенного на основе иерархии классов, которые, в свою очередь, зависят от стандартной библиотеки Python  unittest. Несмотря на название, данный фреймворк подходит и для юнит-, и для интеграционного тестирования. Фреймворк Django добавляет методы API и инструменты, которые помогают тестировать как веб так и, специфическое для Django, поведение. Это позволяет вам имитировать URL-запросы, добавление тестовых данных, а также проводить проверку выходных данных ваших приложений. Кроме того, Django предоставляет API (LiveServerTestCase) и инструменты для применения различных фреймворков тестирования, например вы можете подключить популярный фреймворк Selenium для имитации поведения пользователя в реальном браузере.
            
 
 
            Для написания теста вы должны наследоваться от любого из классов тестирования Django (или юниттеста)  (SimpleTestCase, TransactionTestCase, TestCase, LiveServerTestCase), а затем реализовать отдельные методы проверки кода (тесты это функции-"утверждения", которые проверяют, что результатом выражения являются значения True или False, или что два значения равны и так далее). Когда вы запускаете тест, фреймворк выполняет соответствующие тестовые методы в вашем классе-наследнике. Методы тестирования запускаются независимо друг от друга, начиная с метода настроек и/или завершаясь методом разрушения (tear-down), определенном в классе, как показано ниже.
            
 
@@ -85,10 +85,10 @@ translation_of: Learn/Server-side/Django/Testing
         self.assertTrue(False)
 
            
 
-
            Самый подходящий базовый класс для большинства тестов это django.test.TestCase.  Этот класс создает чистую базу данных перед запуском своих методов, а также запускает каждую функцию тестирования в его собственной транзакции. У данного класса также имеется тестовый Клиент, который вы можете использовать для имитации взаимодействия пользователя с кодом на уровне отображения. В следующих разделах мы сконцентритуемся на юнит-тестах, которые будут созданы на основе класса TestCase.
            
+
            Самый подходящий базовый класс для большинства тестов это django.test.TestCase.  Этот класс создает чистую базу данных перед запуском своих методов, а также запускает каждую функцию тестирования в его собственной транзакции. У данного класса также имеется тестовый Клиент, который вы можете использовать для имитации взаимодействия пользователя с кодом на уровне отображения. В следующих разделах мы сконцентрируемся на юнит-тестах, которые будут созданы на основе класса TestCase.
            
 
 
            
-
            Примечание: Класс django.test.TestCase очень удобен, но он может приводить к замедленной работе в некоторых случаях (не для каждого теста необходимо настраивать базу данных, или имитировать взаимодействие с отображеним). Когда вы познакомитесь с работой данного класса, то сможете заменить некоторые из ваших тестов на более простые классы тестирования.
            
+
            Примечание: Класс django.test.TestCase очень удобен, но он может приводить к замедленной работе в некоторых случаях (не для каждого теста необходимо настраивать базу данных, или имитировать взаимодействие с отображением). Когда вы познакомитесь с работой данного класса, то сможете заменить некоторые из ваших тестов на более простые классы тестирования.
            
 
            
 
 
            Что вы должны тестировать?
            
@@ -119,7 +119,7 @@ translation_of: Learn/Server-side/Django/Testing
 
 
            Ну что же, усвоив данную информацию, давайте перейдем к процессу определения и запуска тестов.
            
 
-
            Обзор стуктуры тестов
            
+
            Обзор структуры тестов
            
 
 
            Перед тем как мы перейдем к тому "что тестировать", давайте кратко взглянем на моменты где и как определяются тесты.
            
 
@@ -259,7 +259,7 @@ python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one
 
 
            Тестирование LocalLibrary
            
 
-
            Теперь, когда мы знаем как запустить наши тесты и что именно мы должны тестировать, давайте рассмртрим некоторые практические примеры.
            
+
            Теперь, когда мы знаем как запустить наши тесты и что именно мы должны тестировать, давайте рассмотрим некоторые практические примеры.
            
 
 
            
 
            Примечание: Мы не будем расписывать все тесты, а просто покажем вам пример того, как они должны работать и что еще вы можете с ними сделать.
            
@@ -467,7 +467,7 @@ class RenewBookFormTest(TestCase):
 
 
            Отображения
            
 
-
            Для проверки поведения отображения мы используем тестовый клиет Django Client. Данный класс действует как упрощенный веб-браузер который мы применяем для имитации  GET и POST запросов и проверки ответов. Про ответы мы можем узнать почти все, начиная с низкоуровневого HTTP (итоговые заголовки и коды статусов) и вплоть до применяемых шаблонов, которые используются для HTML-рендера, а также контекста, который передается в соответствующий  шаблон. Кроме того, мы можем отследить последовательность перенаправлений (если имеются), проверить URL-адреса и коды статусов на каждом шаге. Все это позволит нам проверить, что каждое отображение выполняет то, что ожидается.
            
+
            Для проверки поведения отображения мы используем тестовый клиент Django Client. Данный класс действует как упрощенный веб-браузер который мы применяем для имитации  GET и POST запросов и проверки ответов. Про ответы мы можем узнать почти все, начиная с низкоуровневого HTTP (итоговые заголовки и коды статусов) и вплоть до применяемых шаблонов, которые используются для HTML-рендера, а также контекста, который передается в соответствующий  шаблон. Кроме того, мы можем отследить последовательность перенаправлений (если имеются), проверить URL-адреса и коды статусов на каждом шаге. Все это позволит нам проверить, что каждое отображение выполняет то, что ожидается.
            
 
 
            Давайте начнем с одного из простейших отображений которое возвращает список всех авторов. Вы можете его увидеть по URL-адресу /catalog/authors/ (данный URL-адрес можно найти в разделе приложения catalog,  в файле настроек urls.py по имени  'authors').
            
 
@@ -537,7 +537,7 @@ resp = self.client.get(reverse('authors'))
 
 
            Отображения и регистрация пользователей
            
 
-
            В некоторых случаях вам нужно провести тесты отображений к которым имеют доступ только зарегистрированные пользователи. Например, LoanedBooksByUserListView очень похоже на наше предыдущее отображение, но доступно только для залогинившихся пользователей и показывает только те записи (BookInstance), которые соответствуют текущему пользователю, имеют статус 'on loan' (книга взята домой), а также забронированны.
            
+
            В некоторых случаях вам нужно провести тесты отображений к которым имеют доступ только зарегистрированные пользователи. Например, LoanedBooksByUserListView очень похоже на наше предыдущее отображение, но доступно только для залогинившихся пользователей и показывает только те записи (BookInstance), которые соответствуют текущему пользователю, имеют статус 'on loan' (книга взята домой), а также забронированы.
            
 
 
            from django.contrib.auth.mixins import LoginRequiredMixin
 
@@ -611,7 +611,7 @@ class LoanedBookInstancesByUserListViewTest(TestCase):
         self.assertTemplateUsed(resp, 'catalog/bookinstance_list_borrowed_user.html')
 
            
 
-
            Если пользователь не залогирован то, чтобы убедиться в том что отображение перейдет на страницу входа (логирования), мы используем метод assertRedirects, что продемонстрировано в методе test_redirect_if_not_logged_in(). Затем мы осуществляем вход для пользователя и проверям что полученный статус status_code равен 200 (успешно). 
            
+
            Если пользователь не залогирован то, чтобы убедиться в том что отображение перейдет на страницу входа (логирования), мы используем метод assertRedirects, что продемонстрировано в методе test_redirect_if_not_logged_in(). Затем мы осуществляем вход для пользователя и проверяем что полученный статус status_code равен 200 (успешно). 
            
 
 
            Остальные тесты проверяют, соответственно, что наше отображение показывает только те книги которые взяты текущим пользователем. Скопируйте код, показанный ниже, в нижнюю часть предыдущего класса.
            
 
@@ -715,7 +715,7 @@ def renew_book_librarian(request, pk):
 
 
            Нам надо проверить что к данному отображению имеют доступ только те пользователи, которые имеют разрешение типа can_mark_returned, а кроме того, что пользователи перенаправляются на страницу ошибки HTTP 404  если они пытаются обновить экземпляр книги  BookInstance, который не существует. Мы должны проверить что начальное значение формы соответствует дате через 3 недели в будущем, а также то, что если форма прошла валидацию, то мы переходим на страницу отображения книг "all-borrowed" (забронированных). Для тестов, отвечающих за проверку "провалов", мы также должны удостовериться что они отправляют соответствующие сообщения об ошибках.
            
 
-
            В нижнюю часть файла /catalog/tests/test_views.py добавьте класс тестрования (показан во фрагменте, ниже). Он создает двух пользователей и два экземпляра книги, но только один пользователь получает необходимый доступ к соответствующему отображению. Код, который "присваивает" соответствующий доступ, выделен в коде жирным:
            
+
            В нижнюю часть файла /catalog/tests/test_views.py добавьте класс тестирования (показан во фрагменте, ниже). Он создает двух пользователей и два экземпляра книги, но только один пользователь получает необходимый доступ к соответствующему отображению. Код, который "присваивает" соответствующий доступ, выделен в коде жирным:
            
 
 
            from django.contrib.auth.models import Permission # Required to grant the permission needed to set a book as returned.
 
@@ -750,7 +750,7 @@ class RenewBookInstancesViewTest(TestCase):
         return_date= datetime.date.today() + datetime.timedelta(days=5)
         self.test_bookinstance2=BookInstance.objects.create(book=test_book,imprint='Unlikely Imprint, 2016', due_back=return_date, borrower=test_user2, status='o')
            
 
-
            В нижнюю часть класса тестирования добавьте следующие методы (из следующего фрагмента). Они проверяют, что только пользователь с соответствущим доступом (testuser2) имеет доступ к отображению. Мы проверяем все случаи: когда пользователь не залогинился, когда залогинился, но не имеет соответствующего доступа, когда имеет доступ, но не является заемщиком книги (тест должен быть успешным), а также, что произойдет если попытаться получить доступ к книге BookInstance которой не существует. Кроме того, мы проверям то, что используется правильный (необходимый) шаблон.
            
+
            В нижнюю часть класса тестирования добавьте следующие методы (из следующего фрагмента). Они проверяют, что только пользователь с соответствующим доступом (testuser2) имеет доступ к отображению. Мы проверяем все случаи: когда пользователь не залогинился, когда залогинился, но не имеет соответствующего доступа, когда имеет доступ, но не является заемщиком книги (тест должен быть успешным), а также, что произойдет если попытаться получить доступ к книге BookInstance которой не существует. Кроме того, мы проверяем то, что используется правильный (необходимый) шаблон.
            
 
 
                def test_redirect_if_not_logged_in(self):
         resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}) )
@@ -817,7 +817,7 @@ class RenewBookInstancesViewTest(TestCase):
 
            
 
 
            
-
            Вместо перехода к отображению all-borrowed, добавленого в качестве домашнего задания, вы можете перенаправить пользователя на домашнюю страницу '/'. В таком случае, исправьте две последние строки тестового кода на код, показанный ниже. Присваивание follow=True, в запросе, гарантирует что запрос вернет окончательный URL-адрес пункта назначения (следовательно проверяется /catalog/, а не /).
            
+
            Вместо перехода к отображению all-borrowed, добавленного в качестве домашнего задания, вы можете перенаправить пользователя на домашнюю страницу '/'. В таком случае, исправьте две последние строки тестового кода на код, показанный ниже. Присваивание follow=True, в запросе, гарантирует что запрос вернет окончательный URL-адрес пункта назначения (следовательно проверяется /catalog/, а не /).
            
 
 
             resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future},follow=True )
  self.assertRedirects(resp, '/catalog/')
            
@@ -840,7 +840,7 @@ class RenewBookInstancesViewTest(TestCase):
         self.assertFormError(resp, 'form', 'renewal_date', 'Invalid date - renewal more than 4 weeks ahead')
            -

            Такие же способы тестрования могут применяться для проверок других отображений.

            +

            Такие же способы тестирования могут применяться для проверок других отображений.

            Шаблоны

            diff --git a/files/ru/learn/server-side/django/tutorial_local_library_website/index.html b/files/ru/learn/server-side/django/tutorial_local_library_website/index.html index 36ad7aa9cb..01b8cffe05 100644 --- a/files/ru/learn/server-side/django/tutorial_local_library_website/index.html +++ b/files/ru/learn/server-side/django/tutorial_local_library_website/index.html @@ -52,7 +52,7 @@ translation_of: Learn/Server-side/Django/Tutorial_local_library_website

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

            -

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

            +

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

            • В самом начале, мы создадим библиотеку, в которой пользователи смогут только просматривать доступные книги. Это позволит нам исследовать операции, которые присутствуют почти на каждом сайте: чтение и отображение информации из базы данных.
              • diff --git a/files/ru/learn/server-side/django/web_application_security/index.html b/files/ru/learn/server-side/django/web_application_security/index.html index 84448f9eb3..f88147798a 100644 --- a/files/ru/learn/server-side/django/web_application_security/index.html +++ b/files/ru/learn/server-side/django/web_application_security/index.html @@ -62,7 +62,7 @@ translation_of: Learn/Server-side/Django/web_application_security 
              <h1>Author: Boon&lt;script&gt;alert(&#39;Test alert&#39;);&lt;/script&gt;, David (Boonie) </h1>
              -

              Использование шаблонов Django защищает вас от большинтсва XSS атак. Однако существует возможность отключения данной защиты, при котором экранирование не будет автоматически применятся ко всем полям, которые не должны будут заполнятся пользователем(к примеру, поле help_text обычно заполняется не пользователем, поэтому Django не будет экранировать его значение).

              +

              Использование шаблонов Django защищает вас от большинства XSS атак. Однако существует возможность отключения данной защиты, при котором экранирование не будет автоматически применятся ко всем полям, которые не должны будут заполнятся пользователем(к примеру, поле help_text обычно заполняется не пользователем, поэтому Django не будет экранировать его значение).

              Так же XSS атаки могут быть осуществлены через другие ненадежные источники данных, такие как cookies, сторонние сервисы или загруженные файлы (и прочие источники, данные которых не были специально обработаны перед отображением на странице). Если вы отображаете данные из этих источников, вы должны добавить ваш собственный обработчик для "санитаризации" данных.

              @@ -74,7 +74,7 @@ translation_of: Learn/Server-side/Django/web_application_security

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

              -

              Для того, чтобы сделать это, хакер может создать HTML файл, подобный продемонстрированному ниже, который будет содержать форму создания автора (похожую на ту, что мы разрабатывали в предыдущих частях руководства), которая будет отправлена как только данный файл будет загружен в браузер. Хакер отправит данный файл всем Библиотекарям и будет ждать пока кто-либо из них откроет файл (он содержит только безобидную информацию, честно!). Если файл будет открыт любым залогиненным пользователм, с правами Библиотекаря - тогда форма будет  отправлена от его имени и создаст нового пользователя.

              +

              Для того, чтобы сделать это, хакер может создать HTML файл, подобный продемонстрированному ниже, который будет содержать форму создания автора (похожую на ту, что мы разрабатывали в предыдущих частях руководства), которая будет отправлена как только данный файл будет загружен в браузер. Хакер отправит данный файл всем Библиотекарям и будет ждать пока кто-либо из них откроет файл (он содержит только безобидную информацию, честно!). Если файл будет открыт любым залогиненным пользователем, с правами Библиотекаря - тогда форма будет  отправлена от его имени и создаст нового пользователя.

              <html>
 <body onload='document.EvilForm.submit()'>
@@ -116,7 +116,7 @@ translation_of: Learn/Server-side/Django/web_application_security
  
              Защита от Кликджекинга
              
  
              В данном виде атак атакующий перехватывает ввод на видимом слое страницы и перенаправляет их на скрытый слой под ним. Этот метод может быть использован к примеру для отображения официального сайта банка, с перехватом данных для входа в невидимом  <iframe>, который контролирует атакующий. Django содержит защиту от кликджекинга в виде промежуточного програмного обеспечения (middleware) X-Frame-Options, который поддерживается браузерами и может запретить отображение страницы внутри <iframe>.
              
  
              SSL/HTTPS
              
- 
              SSL/HTTPS может быть использован на веб-сервере для шифрования всего трафика между сервером и пользователем, включая данные входа, которые иначе будут отправлятся как обычный текст (который сможет прочитать любой перехвативший запрос человек). Использование HTTPS высоко рекомендовано. Если используется HTTPS, Django позволяет использовать следующие методы защиты:
              
+ 
              SSL/HTTPS может быть использован на веб-сервере для шифрования всего трафика между сервером и пользователем, включая данные входа, которые иначе будут отправляться как обычный текст (который сможет прочитать любой перехвативший запрос человек). Использование HTTPS высоко рекомендовано. Если используется HTTPS, Django позволяет использовать следующие методы защиты:
              
 
 
 
                
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html
index 2e1edbc625..30248ab32d 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html
@@ -48,12 +48,12 @@ block content
 
 
                Как это выглядит?
                
 
-
                Запустите приложение и откройте браузер с адресом http://localhost:3000/. Выберите ссылку All authors. Если все было сделано правильно, страница должна выглядеть примерно нак, как на следующем скриншоте.
                
+
                Запустите приложение и откройте браузер с адресом http://localhost:3000/. Выберите ссылку All authors. Если все было сделано правильно, страница должна выглядеть примерно так, как на следующем скриншоте.
                
 
 
                Author List Page - Express Local Library site
                
 
 
                
-
                Заметка: Представление дат продолжительности жизни автора выгядит безобразно! Это можно исправить, если использовать тот же подход , который применялся для списка BookInstance  (добавить в модель Author виртуальное свойство  продолжительности жизни).  Но в этот раз, однако, некоторые даты могут отсутствовать, и ссылки на несуществующие свойства игнорируются, если не задан строгий режим.  Метод moment() возврашает текущее время, и нежелательно, чтобы отсутствующие  даты форматировались как "сегодня". Один из способов состоит в том, чтобы форматирующая функция возвращала пустую строку, если дата не существует. Например:
                
+
                Заметка: Представление дат продолжительности жизни автора выглядит безобразно! Это можно исправить, если использовать тот же подход , который применялся для списка BookInstance  (добавить в модель Author виртуальное свойство  продолжительности жизни).  Но в этот раз, однако, некоторые даты могут отсутствовать, и ссылки на несуществующие свойства игнорируются, если не задан строгий режим.  Метод moment() возвращает текущее время, и нежелательно, чтобы отсутствующие  даты форматировались как "сегодня". Один из способов состоит в том, чтобы форматирующая функция возвращала пустую строку, если дата не существует. Например:
                
 
 
                return this.date_of_birth ? moment(this.date_of_birth).format('YYYY-MM-DD') : '';
                
 
                
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html
index 512e78d040..f098d493c0 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html
@@ -3,11 +3,11 @@ title: Список экземпляров книг
 slug: Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page
 ---
-
                Далее мы реализуем список всех имеющихся в библиотеке копий книги (BookInstance) . Эта страница должна включать название книги из Book,  с которой связаны экземпляры BookInstance (linked to its detail page), а такжде дополнительнцю информацию, имеющуюся в модели BookInstance, включая статус, издание, и уникальный идентификатор каждой копии. Уникальное значение идентификатора копии должно быть связано со страницей детальной информации BookInstance.
                
+
                Далее мы реализуем список всех имеющихся в библиотеке копий книги (BookInstance) . Эта страница должна включать название книги из Book,  с которой связаны экземпляры BookInstance (linked to its detail page), а также дополнительную информацию, имеющуюся в модели BookInstance, включая статус, издание, и уникальный идентификатор каждой копии. Уникальное значение идентификатора копии должно быть связано со страницей детальной информации BookInstance.
                
 
 
                Контроллер
                
 
-
                Функция контроллера списка BookInstance требуется для получения списка всех экземпляров некоторой книги, для получения информации, связанной с книгой, и для передачиполученного списка в шаблог для отображения.
                
+
                Функция контроллера списка BookInstance требуется для получения списка всех экземпляров некоторой книги, для получения информации, связанной с книгой, и для передачи полученного списка в шаблон для отображения.
                
 
 
                Откройте файл /controllers/bookinstanceController.js. Найдите экспортируемый метод bookinstance_list() контроллера и замените его следующим кодом (измененный код выделен жирным).
                
 
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html
index 58f297ce95..2180be7c4b 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html
@@ -3,9 +3,9 @@ title: Форматирование даты при помощи moment
 slug: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment
 ---
-
                По умолчанию отображение дат наших моделей некрасиво: Tue Dec 06 2016 15:49:58 GMT+1100 (AUS Eastern Daylight Time). В этом разделе мы покажем, как можно обновить страницу списка BookInstance List из предыдущего раздела, чтобы представитьполе due_date  в более удобном формате: December 6th, 2016. 
                
+
                По умолчанию отображение дат наших моделей некрасиво: Tue Dec 06 2016 15:49:58 GMT+1100 (AUS Eastern Daylight Time). В этом разделе мы покажем, как можно обновить страницу списка BookInstance List из предыдущего раздела, чтобы представить поле due_date  в более удобном формате: December 6th, 2016. 
                
 
-
                Подход, который будет использован, состоит в  создании виртуального свойства в модели BookInstance,  которое будет возращать отформатированную дату. Форматирование будет производиться с использованием moment, легковесной библиотеки JavaScript для разбора, проверки, изменения и форматирования дат.
                
+
                Подход, который будет использован, состоит в  создании виртуального свойства в модели BookInstance,  которое будет возвращать отформатированную дату. Форматирование будет производиться с использованием moment, легковесной библиотеки JavaScript для разбора, проверки, изменения и форматирования дат.
                
 
 
                
 
                Заметка: Можно применять moment для форматирования непосредственно в шаблонах Pug, а можно отформатировать строку в других местах. Использование виртуального свойства позволяет получить дату, отформатированную точно так же, как при помощи due_date. 
                
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html
index 32100db740..6fbd06bc3a 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html
@@ -9,13 +9,13 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us
 
                Код контроллера для некоторых страниц библиотеки будет зависеть от результатов многих асинхронных запросов, которые должны выполняться в определенном порядке или параллельно. Для того, чтобы управлять потоком выполнения, и выводить страницы, когда получена вся необходимая информация, будет использован async - известный модуль node.
                
 
 
                
-
                Note:  В JavaScript существует много других способов управления аснхронным поведением и потоком выполнения, включая такой относительно  новый элемент языка JacaScript как Promises (обещания, промисы).
                
+
                Note:  В JavaScript существует много других способов управления асинхронным поведением и потоком выполнения, включая такой относительно  новый элемент языка JacaScript как Promises (обещания, промисы).
                
 
                
 
-
                Модуль Async имеет массу полезных методов (см. документациюt the documentation). Вот некоторые наиболее важные функции:
                
+
                Модуль Async имеет массу полезных методов (см. документацию the documentation). Вот некоторые наиболее важные функции:
                
 
 
                  
- 
                • async.parallel() для осуществеления любых операций, которые должны выполняться параллельно.
                  • 
+ 
                • async.parallel() для осуществления любых операций, которые должны выполняться параллельно.
                  • 
  
                • async.series() если нужно иметь уверенность, что асинхронные операции выполняются последовательно.
                  • 
  
                • async.waterfall() для операций, которые должны выполняться последовательно, причем каждая операция зависит от результатов предыдущих операций.
                  • 
 
                
@@ -24,7 +24,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us
 
 
                Большинство методов, которые используются в  Express - асинхронные - вы определяете выполняемую операцию, передавая  callback-функцию. Метод завершается немедленно, а  callback-функция вызывается тогда, когда завершилась запрошенная операция. По соглашению, принятому в Express, callback-функция передает значение ошибки error  как первый параметр (или null при успехе) и результат функции (если есть) как второй параметр.
                
 
-
                Если контроллер должен выполнить только одну асинхронную операцию, чтобы получить информацию для представления страницы, то реализация проста - мы просто представляем шаблон в колбэке. Фрагмент кода (ниже) демонстрирует это для функции, которая подсчитывает количество элементов модкли SomeModel (применяя метод Mongoose count() ):
                
+
                Если контроллер должен выполнить только одну асинхронную операцию, чтобы получить информацию для представления страницы, то реализация проста - мы просто представляем шаблон в колбэке. Фрагмент кода (ниже) демонстрирует это для функции, которая подсчитывает количество элементов модели SomeModel (применяя метод Mongoose count() ):
                
 
 
                exports.some_model_count = function(req, res, next) {
 
@@ -37,7 +37,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us
 }
 
                
 
-
                Однако что, если требуется сделать множественные асинхронные запросы, и результат нельзя представить, пока не завершились все операции? Наивная реализация могла бы использовать "венок" запросов, запуская последующие запросы в колбэках предыдущих, и представляя ответ в последнем колбэке. Проблема такого подхода состоит в том, что запросы должны вапольняться последовательно, хотя, вероятно, было бы более эффективно выполнять их параллельно. Это также может привести к усложненному вложенному коду, что обычно называют адом обратных вызовов ( callback hell ).
                
+
                Однако что, если требуется сделать множественные асинхронные запросы, и результат нельзя представить, пока не завершились все операции? Наивная реализация могла бы использовать "венок" запросов, запуская последующие запросы в колбэках предыдущих, и представляя ответ в последнем колбэке. Проблема такого подхода состоит в том, что запросы должны выполняться последовательно, хотя, вероятно, было бы более эффективно выполнять их параллельно. Это также может привести к усложненному вложенному коду, что обычно называют адом обратных вызовов ( callback hell ).
                
 
 
                Намного лучше было бы выполнять все запросы параллельно, и иметь единственную callback-функцию, которая будет вызвана после того как все запросы выполнены. Именно такое выполнение операций модуль Async делает легким и простым!
                
 
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html
index be5bd57962..389ec457af 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html
@@ -3,7 +3,7 @@ title: Страница с подробностями жанров
 slug: Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page
 ---
-
                Страница "подробности" (detail) для жанров должна показывать информацию для отдельного жанра по его автоматически генерируему идентификатору _id. Должно быть показано название жанра и список книг этого жанра, со ссылками на страницу с детальной информацией для каждой книги.
                
+
                Страница "подробности" (detail) для жанров должна показывать информацию для отдельного жанра по его автоматически генерируем идентификатору _id. Должно быть показано название жанра и список книг этого жанра, со ссылками на страницу с детальной информацией для каждой книги.
                
 
 
                Controller
                
 
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/index.html
index bb2e804d2e..bbe11606e8 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/index.html
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/index.html
@@ -37,7 +37,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data
 
                Следующие подразделы проходят процесс добавления различных функций, необходимых для отображения необходимых страниц веб-сайта. Вы должны прочитать и проработать каждый из них по очереди, прежде чем перейти к следующему.
                
 
 
                  
- 
                1. Aсинхронное управление потоками с помощью async
                  2. 
+ 
                2. Асинхронное управление потоками с помощью async
                  3. 
  
                3. Пример шаблона
                  4. 
  
                4. Базовые шаблоны LocalLibrary
                  5. 
  
                5. Домашняя страница
                  6. 
@@ -60,7 +60,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data
 
                  Смотрите так же
                  
 
 
                    
- 
                  • Aссинхроный модуль (Асинхронные документация)
                    • 
+ 
                  • Асинхронный модуль (Асинхронные документация)
                    • 
  
                  • Использование механизмов шаблонов с Express (Express документация)
                    • 
  
                  • Pug (Pug документация)
                    • 
  
                  • Moment (Moment документация)
                    • 
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.html
index a89d5be145..449d197c96 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.html
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.html
@@ -9,7 +9,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer
 
 
                    В Express можно использовать много движков отображающих шаблонов ( template rendering engines). В этом руководстве для шаблонов будет использован Pug (ранее известный как Jade) . Это наиболее популярный в  Node язык шаблонов, который о себе заявляет так: чистый, чувствительный к пробелам синтаксис для написания HTML, на который сильно повлиял Haml.
                    
 
-
                    Разные языки шаблонов используют различные подходы для определения внешнего вида и разметки позиций для данных—некоторые используют HTML для определения внешнего вида, тогда как другие применяют различные форматы разметки, которые затем должы компилироваться в  HTML. Pug - второго типа; он использует представление (representation)  HTML, в котором первое слово в каждой строке обычно представляет элемент HTML, а отступы в следующих строках применяются, чтобы представить вложенные элементы. Результатом является определение страницы, которое транслируется непосредственно в HTML, и которое, вероятно, более краткое и легче читается.
                    
+
                    Разные языки шаблонов используют различные подходы для определения внешнего вида и разметки позиций для данных—некоторые используют HTML для определения внешнего вида, тогда как другие применяют различные форматы разметки, которые затем должны компилироваться в  HTML. Pug - второго типа; он использует представление (representation)  HTML, в котором первое слово в каждой строке обычно представляет элемент HTML, а отступы в следующих строках применяются, чтобы представить вложенные элементы. Результатом является определение страницы, которое транслируется непосредственно в HTML, и которое, вероятно, более краткое и легче читается.
                    
 
 
                    
 
                    Заметка: недостаток применения Pug - это чувствительность к отступам и пробелам (если добавить лишний пробел в "плохом" месте, можно получить невразумительный код ошибки). Однако, если ваши шаблоны уже действуют, их очень легко читать и поддерживать.
                    
@@ -109,7 +109,7 @@ p This line has an un-escaped string: !{'
              -

              Можно также выполнять циклы (итерации), применяя ситаксис each-in или while . Фрагмент кода (ниже)  содержит цикл по элементам массива, чтобы показать список элементов (отметим применение 'li=' для оценки "val" как переменной). Значение итератора val может быть также передано в шаблон как переменная!

              +

              Можно также выполнять циклы (итерации), применяя синтаксис each-in или while . Фрагмент кода (ниже)  содержит цикл по элементам массива, чтобы показать список элементов (отметим применение 'li=' для оценки "val" как переменной). Значение итератора val может быть также передано в шаблон как переменная!

              ul
   each val in [1, 2, 3, 4, 5]
@@ -119,7 +119,7 @@ else
 
 
              Расширение шаблонов
              
 
-
              Принято иметь общую структуру для всех страниц сайта, включая стандартную HTML-разметку для заголовка, футера, навигации и т.д. Вместо того, чтобы засталять разработчиков дублировать эти образцы на каждой странице, Pug позволяет объявить базовай шаблон, а затем модифицировать его, заменяя только те небольшие части, которые различны на каждой конкретной странице.
              
+
              Принято иметь общую структуру для всех страниц сайта, включая стандартную HTML-разметку для заголовка, футера, навигации и т.д. Вместо того, чтобы заставлять разработчиков дублировать эти образцы на каждой странице, Pug позволяет объявить базовой шаблон, а затем модифицировать его, заменяя только те небольшие части, которые различны на каждой конкретной странице.
              
 
 
              Например, базовый шаблон layout.pug, созданный в каркасе проекта, имеет такой вид:
              
 
@@ -131,7 +131,7 @@ html
   body
     block content
              -

              Тэг  block применен для отметки разделов контента, которые могут быть заменены в производных шаблона (если блок не переопределяется, будет использованиа его реализация в базовом классе).

              +

              Тэг  block применен для отметки разделов контента, которые могут быть заменены в производных шаблона (если блок не переопределяется, будет использования его реализация в базовом классе).

              Умолчание для  index.pug (созданный для каркаса проекта) показывает, как можно заменить базовый шаблон. Тэг extends идентифицирует базовый шаблон, который следует использовать, а затем мы используем  block section_name, чтобы отметить новый контент раздела, который мы заменяем.

              diff --git a/files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.html b/files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.html index 0e0fa6cdf3..a92d787ec6 100644 --- a/files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.html +++ b/files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.html @@ -5,11 +5,11 @@ translation_of: Learn/Server-side/Express_Nodejs/forms/Delete_author_form ---

              В этой статье показано, как определить страницу для удаления объектов Author.

              -

              Как описано в разделе  form design,  наша стратегия будет заключаться в том, чтобы разрешить удаление только объектов, на которые не ссылаются другие объекты(в этом случае это означает, что мы не позволим Author быть удаленным, если на него ссылается  Book). С точки зрения реализации это означает, что форма должна подтвердить, что нет никаких связанных книг, прежде чем автор будет удален. Если есть связанные книги, то они должны отображаться и быть удалены до того, как будеет удален объект Author.

              +

              Как описано в разделе  form design,  наша стратегия будет заключаться в том, чтобы разрешить удаление только объектов, на которые не ссылаются другие объекты(в этом случае это означает, что мы не позволим Author быть удаленным, если на него ссылается  Book). С точки зрения реализации это означает, что форма должна подтвердить, что нет никаких связанных книг, прежде чем автор будет удален. Если есть связанные книги, то они должны отображаться и быть удалены до того, как будет удален объект Author.

              Controller—get route

              -

              Откройте /controllers/authorController.js. Найдите экспротируемый метод контроллера  author_delete_get() и замените его на слдеующий код.

              +

              Откройте /controllers/authorController.js. Найдите экспортируемый метод контроллера  author_delete_get() и замените его на следующий код.

              // Отображать форму для удаления автора GET
 exports.author_delete_get = function(req, res, next) {
@@ -32,7 +32,7 @@ exports.author_delete_get = function(req, res, next) {
 
 };
              -

              TКонтроллер получает id экземпляра Author для удаления из параметра URL  (req.params.id). Он использует метод  async.parallel() , чтобы получить запись автра и паралельнно вс связанные книги. WКогда оба пораметра авершины, он рендерит страницу  author_delete.pug, передает значения для title, author, и author_books.

              +

              Контроллер получает id экземпляра Author для удаления из параметра URL  (req.params.id). Он использует метод  async.parallel() , чтобы получить запись автора и параллельно вс связанные книги. Когда оба параметра авершины, он рендерит страницу  author_delete.pug, передает значения для title, author, и author_books.

              Заметка: Если findById() не возвращает результатов, то автор отсутствует в базе данных. В этом случае удалять нечего, поэтому сразу выводим список всех авторов.

              @@ -85,7 +85,7 @@ exports.author_delete_post = function(req, res, next) {

              View

              -

              Создайте /views/author_delete.pug и скопируйет текст ниже.

              +

              Создайте /views/author_delete.pug и скопируйте текст ниже.

              extends layout
 
@@ -143,7 +143,7 @@ p
 
 
              Как это выглядит?
              
 
-
              Запустите приложение и откройте в вашем браузере  http://localhost:3000/. Затем раздел All authors , а затем укажите конктретного пользователя. Наконец, выберите ссылку Delete author.
              
+
              Запустите приложение и откройте в вашем браузере  http://localhost:3000/. Затем раздел All authors , а затем укажите конкретного пользователя. Наконец, выберите ссылку Delete author.
              
 
 
              Если у автора нет книг, вам будет представлена такая страница. После нажатия клавиши delete сервер удалит автора и перенаправит в список авторов
              
 
diff --git a/files/ru/learn/server-side/express_nodejs/forms/index.html b/files/ru/learn/server-side/express_nodejs/forms/index.html
index f877a6015c..6042d57b17 100644
--- a/files/ru/learn/server-side/express_nodejs/forms/index.html
+++ b/files/ru/learn/server-side/express_nodejs/forms/index.html
@@ -44,7 +44,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms
 
 
              Simple name field example in HTML form
              
 
-
              Определенные в  HTML формы собираются внутри тэга <form>...</form>, содержащего хтя ы один элемент input с type="submit".
              
+
              Определенные в  HTML формы собираются внутри тэга <form>...</form>, содержащего хотя ы один элемент input с type="submit".
              
 
 
              <form action="/team_name_url/" method="post">
     <label for="team_name">Enter name: </label>
@@ -52,7 +52,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms
     <input type="submit" value="OK">
 </form>
              
 
-
              Хотя здесь мы включили только одно (текстовое) поле для ввода имени команды, форма может содержать любое количество других элементов ввода и связанных с ними меток. Атрибут type определяет какой из виджетов будет выбран для отображения поля. Атрибуты name и id идентифицируют поле в JavaScript/CSS/HTML, а value определяет его первоначальное значение. Связанная с полем метка, задается с помощью тега label (располгается строкой выше и содержит в себе подпись "Enter name"). Связь метки и поля ввода устанавливается при помощи атрибута for, в котором указывается значение идентификатора поля (input id).
              
+
              Хотя здесь мы включили только одно (текстовое) поле для ввода имени команды, форма может содержать любое количество других элементов ввода и связанных с ними меток. Атрибут type определяет какой из виджетов будет выбран для отображения поля. Атрибуты name и id идентифицируют поле в JavaScript/CSS/HTML, а value определяет его первоначальное значение. Связанная с полем метка, задается с помощью тега label (располагается строкой выше и содержит в себе подпись "Enter name"). Связь метки и поля ввода устанавливается при помощи атрибута for, в котором указывается значение идентификатора поля (input id).
              
 
 
              Input submit будет отображаться в виде кнопки (по умолчанию) - он может быть нажат пользователем, чтобы загрузить данные, содержащиеся в других входных элементов на сервер (в данном случае, только team_name). Атрибуты формы определяют метод HTTP, используемый для отправки данных, и назначение данных на сервере (action):
              
 
@@ -140,7 +140,7 @@ body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(),
              -

              Note: Вы также можете добавить встроенные средства очистки, такие как trim(), как показано выше. Однако средства очитски, применяемые здесь, применяются только к шагу проверки. Если требуется очистить конечный результат, необходимо использовать отдельный метод очистки, как показано ниже.

              +

              Note: Вы также можете добавить встроенные средства очистки, такие как trim(), как показано выше. Однако средства очистки, применяемые здесь, применяются только к шагу проверки. Если требуется очистить конечный результат, необходимо использовать отдельный метод очистки, как показано ниже.

            • sanitizeBody(fields): Задает поле тела для очистки. затем операции очистки последовательно соединяются с этим методом. Например, операция очистки escape(), описанная ниже, удаляет символы HTML из переменной name, которые могут использоваться в атаках сценариев между сайтами JavaScript. @@ -206,7 +206,7 @@ router.post('/genre/create', genre_controller.genre_create_post);
              1. Форма для создания Genre — Определение нашей страницы для создания объектов Genre.
                2. -
              2. Форма для cоздания Author — Определение страницы для создания объектов Author.
                3. +
              3. Форма для создания Author — Определение страницы для создания объектов Author.
              4. Форма для создания Book — Определение страницы/формы для создания объектов Book.
              5. Форма для создания BookInstance — Определение страницы/формы для создания объектов BookInstance.
              6. Форма для удаления Author — Определение страницы для удаления объектов Author.
                7. diff --git a/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html b/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html index 16172605d1..ba6d79d71d 100644 --- a/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html +++ b/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html @@ -44,7 +44,7 @@ exports.book_update_get };                 -

                Контроллер получит id Book книги для обновления из параметра URL (req.params.id). Он использует метод async.parallel()чтобы получить указанную запись Book (pаполнение полей жанра и автора) и список всех объектов Author и Genre. Когда все операции завершены, он помечает выбранные жанры как отмеченные, а затем отображает их в book_form.pug, передает переменные itle, book, всех authors, и всеgenres.

                +

                Контроллер получит id Book книги для обновления из параметра URL (req.params.id). Он использует метод async.parallel()чтобы получить указанную запись Book (заполнение полей жанра и автора) и список всех объектов Author и Genre. Когда все операции завершены, он помечает выбранные жанры как отмеченные, а затем отображает их в book_form.pug, передает переменные itle, book, всех authors, и всеgenres.

                Controller—post route

                diff --git a/files/ru/learn/server-side/express_nodejs/index.html b/files/ru/learn/server-side/express_nodejs/index.html index 9c1f44a50f..48a631f4c3 100644 --- a/files/ru/learn/server-side/express_nodejs/index.html +++ b/files/ru/learn/server-side/express_nodejs/index.html @@ -19,7 +19,7 @@ translation_of: Learn/Server-side/Express_Nodejs

                Перед началом этого модуля вам необходимо представлять, что из себя представляет серверное программирование и веб-фреймворки, желательно из прочтения статей другого модуля Server-side website programming first steps. Знакомство с основными концепциями программирования и языком программирования JavaScript будет очень полезным, но оно не является обязательным для понимания базовых понятий этого модуля.

                -

                Заметка: Этот веб-сайт содержит множество источников для изучения JavaScript в контексте  разработки на стороне клиента: JavaScript, JavaScript Guide, JavaScript Basics, JavaScript (изучение). Ключевые особенности и коцепции языка JavaScript остаются сходными и для серверной разработки на Node.js и используемый материал достаточно релевантен. Node.js предоставляет additional APIs для обеспечения функционала, который полезен для "безбраузерной" разработки, т.е. для создания HTTP-сервера и доступа к файловой системе, но не поддерживает JavaScript APIs для работы с браузером и DOM.

                +

                Заметка: Этот веб-сайт содержит множество источников для изучения JavaScript в контексте  разработки на стороне клиента: JavaScript, JavaScript Guide, JavaScript Basics, JavaScript (изучение). Ключевые особенности и концепции языка JavaScript остаются сходными и для серверной разработки на Node.js и используемый материал достаточно релевантен. Node.js предоставляет additional APIs для обеспечения функционала, который полезен для "безбраузерной" разработки, т.е. для создания HTTP-сервера и доступа к файловой системе, но не поддерживает JavaScript APIs для работы с браузером и DOM.

                Это руководство обеспечит вас некоторой информацией о работе с Node.js и Express, но также существуют и другие многочисленные отличные ресурсы в Интернете и книгах — некоторые из них доступны из тем How do I get started with Node.js (StackOverflow) и What are the best resources for learning Node.js? (Quora).

                @@ -57,7 +57,7 @@ translation_of: Learn/Server-side/Express_Nodejs
                Установка LocalLibrary на PWS/Cloud Foundry
                -
                В этой статье представлена практическая демонстрация того, как установить LocalLibrary на облаке Pivotal Web Services PaaS — это полнофункциональная альтернатива с открытым исходным кодом для Heroku, облачного сервиса PaaS  используемого в части 7 этого учебника, представленного выше. PWS/Cloud Foundry опредленно стоит попробовать, если вы ищете альтернативу Heroku (или другому PaaS облачному сервису), или просто хотите попробовать что-то другое.
                +
                В этой статье представлена практическая демонстрация того, как установить LocalLibrary на облаке Pivotal Web Services PaaS — это полнофункциональная альтернатива с открытым исходным кодом для Heroku, облачного сервиса PaaS  используемого в части 7 этого учебника, представленного выше. PWS/Cloud Foundry определенно стоит попробовать, если вы ищете альтернативу Heroku (или другому PaaS облачному сервису), или просто хотите попробовать что-то другое.

                Изучите другие учебники

                diff --git a/files/ru/learn/server-side/express_nodejs/introduction/index.html b/files/ru/learn/server-side/express_nodejs/introduction/index.html index bbe40c95f7..74b857f880 100644 --- a/files/ru/learn/server-side/express_nodejs/introduction/index.html +++ b/files/ru/learn/server-side/express_nodejs/introduction/index.html @@ -35,7 +35,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction
              7. Он имеет очень активную стороннюю экосистему и сообщество разработчиков, которые всегда готовы помочь.
            -

            Вы можете изпользовать Node.js для создания простого веб сервера используя пакет Node HTTP. 

            +

            Вы можете использовать Node.js для создания простого веб сервера используя пакет Node HTTP. 

            Hello Node.js

            @@ -112,7 +112,7 @@ server.listen(port, hostname, () => {

            Насколько популярен Node/Express?

            -

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

            +

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

            Не существует какого-либо доступного и точного измерения популярности серверных фреймворков (хотя сайты, такие как Hot Frameworks, пытаются оценить популярность, используя такие механизмы, как подсчет количества проектов на GitHub и вопросов на StackOverflow для каждой платформы). Лучший вопрос заключается в том, достаточно ли популярны Node и Express, чтобы избежать проблем с непопулярными платформами. Они продолжают развиваться? Можете ли вы получить помощь, если вам это нужно? Есть ли у вас возможность получить оплачиваемую работу, если вы изучаете Express?

            @@ -120,19 +120,19 @@ server.listen(port, hostname, () => {

            Является ли Express ограничивающим?

            -

            Web-фрэймворки часто принято делить на "ограничивающие" и "неограничивающие".

            +

            Web-фреймворки часто принято делить на "ограничивающие" и "не ограничивающие".

            -

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

            +

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

            -

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

            +

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

            Express не ограничивающий. Вы можете вставить в цепочку обработки (middleware) запросов практически любое совместимые промежуточные компоненты, которые вам нравятся. Вы можете структурировать приложение в одном файле или в нескольких, использую любую структуру каталогов. Иногда вы можете чувствовать, что у вас слишком много вариантов!

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

            -

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

            +

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

            -

            Express предоставляет методы позволяющие указать, какая функция вызывается для конкретного HTTP запроса (GET, POST, SET, etc.), и URL шаблон ("Route"), а также методы позволяющие указать, какой механизм шаблона ("view") используется, где находятся шаблоныы файлов и какой шаблон использовать для вывода ответа. Вы можете использовать Express middleware для добавления поддержки файлов cookies, сеансов, и пользователей, получения POST/GET параметров, и т.д. Вы можете использовать любой механизм базы данных, поддерживаемый Node (Express не определяет поведение, связанное с базой данных).

            +

            Express предоставляет методы позволяющие указать, какая функция вызывается для конкретного HTTP запроса (GET, POST, SET, etc.), и URL шаблон ("Route"), а также методы позволяющие указать, какой механизм шаблона ("view") используется, где находятся шаблоны файлов и какой шаблон использовать для вывода ответа. Вы можете использовать Express middleware для добавления поддержки файлов cookies, сеансов, и пользователей, получения POST/GET параметров, и т.д. Вы можете использовать любой механизм базы данных, поддерживаемый Node (Express не определяет поведение, связанное с базой данных).

            В следующих разделах объясняются некоторые общие моменты, которые вы увидите при работе с кодом Express and Node.

            diff --git a/files/ru/learn/server-side/express_nodejs/mongoose/index.html b/files/ru/learn/server-side/express_nodejs/mongoose/index.html index c0e1785b9c..b20540d62f 100644 --- a/files/ru/learn/server-side/express_nodejs/mongoose/index.html +++ b/files/ru/learn/server-side/express_nodejs/mongoose/index.html @@ -7,7 +7,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose
            {{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}
            -

            В этой статье дается краткое введение в базы данных, и методика их использования в приложнениях Node/Express. Затем мы покажем, как можно использовать Mongoose для доступа к базе данных веб-сайта  LocalLibrary. Мы объясним, как объявляются схемы и модели объектов, укажем основные типы полей, и методику базовой валидации. В статье также кратко показаны  основные методы доступа к данным модели.

            +

            В этой статье дается краткое введение в базы данных, и методика их использования в приложениях Node/Express. Затем мы покажем, как можно использовать Mongoose для доступа к базе данных веб-сайта  LocalLibrary. Мы объясним, как объявляются схемы и модели объектов, укажем основные типы полей, и методику базовой валидации. В статье также кратко показаны  основные методы доступа к данным модели.

            @@ -24,7 +24,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose

            Обзор

            -

            Сотрудники библиотеки будут использовать сайт Local Library  для хранения информации о книгах и абонентах, а абоненты библиотеки будут использовать его для просмотра и поиска книг, для получения информации о доступных копиях, для резервирования или одалживния книг. Чтобы эффективно хранить и извлекать информацию, мы будем хранить ее в базе данных.

            +

            Сотрудники библиотеки будут использовать сайт Local Library  для хранения информации о книгах и абонентах, а абоненты библиотеки будут использовать его для просмотра и поиска книг, для получения информации о доступных копиях, для резервирования или одалживания книг. Чтобы эффективно хранить и извлекать информацию, мы будем хранить ее в базе данных.

            Express-приложения могут использовать различные базы данных, и есть несколько подходов, которые можно использовать для выполнения операций Create, Read, Update and Delete (CRUD) (создать, прочесть, обновить, удалить). В руководстве дан краткий обзор некоторых доступных опций, и детально рассмотрены некоторые механизмы работы.

            @@ -42,10 +42,10 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose
            • Использование родного языка запросов баз данных (т.е. SQL)
              • -
            • Использование объектной модели данных (ODM) или объектно-реляционной модели (ORM).  ODM / ORM представлют данные веб-сайта как объекты JavaScript, которые затем отображаются на поддерживающую базу данных. Некоторые ORM  привязаны к определенной базе данных, тогда как другие не зависят от конкретной базы данных.
              • +
            • Использование объектной модели данных (ODM) или объектно-реляционной модели (ORM).  ODM / ORM представляют данные веб-сайта как объекты JavaScript, которые затем отображаются на поддерживающую базу данных. Некоторые ORM  привязаны к определенной базе данных, тогда как другие не зависят от конкретной базы данных.
            -

            Наилучшую производительность можно получить с помощью SQL или другого языка запросов, поддерживаемого базой данных. Объектные модели (ODM) часто медленнее, потому что требуют перевода объектов в формат базы данных, при этом не обязательно будут использованы наиболее эффективные запросы к базе данных (особенно, если ODM предназначена для различных баз данных и должна идти на большие компромисы в смысле поддержки тех или иных функций базы данных).

            +

            Наилучшую производительность можно получить с помощью SQL или другого языка запросов, поддерживаемого базой данных. Объектные модели (ODM) часто медленнее, потому что требуют перевода объектов в формат базы данных, при этом не обязательно будут использованы наиболее эффективные запросы к базе данных (особенно, если ODM предназначена для различных баз данных и должна идти на большие компромиссы в смысле поддержки тех или иных функций базы данных).

            Преимущество применения ORM состоит в том, что программисты могут сосредоточиться на объектах JavaScript, а не  на семантике базы данных —  особенно, если требуется работать с разными базами данных (на одном или разных веб-сайтах). Они также дают очевидное место для валидации и проверки данных.

            @@ -60,7 +60,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose

            Популярные решения на момент написания статьи:

              -
            • Mongoose: -- это средство моделирование обьектов базы данных MongoDB,  предназначенное для асинхронной работы.
              • +
            • Mongoose: -- это средство моделирование объектов базы данных MongoDB,  предназначенное для асинхронной работы.
            • Waterline: ORM  фреймворка Sails (основан на Express) . Она предоставляет единый API для доступа к множеству баз данных, в том числе Redis, mySQL, LDAP, MongoDB, и Postgres.
            • Bookshelf: поддерживает как promise- так и традиционные callback- интерфейсы, поддержка транзакций, eager/nested-eager relation loading, полиморфные ассоциации, и поддержка, один к одному, один ко многим, и многие ко многим. Работает с PostgreSQL, MySQL, и SQLite3.
            • Objection: Делает настолько легким, насколько возможно, использование всей мощи SQL и движка базы данных ( поддерживает  SQLite3, Postgres, и MySQL).
              • @@ -77,7 +77,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose

              Применение Mongoose и MongoDb для LocalLibrary

              -

              В примере LocalLibrary (и до конца раздела) мы будем использовать Mongoose ODM для доступа к данным нашей библиотеки. Mongoose является интерфейсом для MongoDB, NoSQL-базы данных с открытым исходным кодом, в которой использована документо-ориентированная модель данных. В MongoDB «коллекции» и «документы» -- это аналоги «таблиц» и «строк» в реляционных БД.

              +

              В примере LocalLibrary (и до конца раздела) мы будем использовать Mongoose ODM для доступа к данным нашей библиотеки. Mongoose является интерфейсом для MongoDB, NoSQL-базы данных с открытым исходным кодом, в которой использована документов-ориентированная модель данных. В MongoDB «коллекции» и «документы» -- это аналоги «таблиц» и «строк» в реляционных БД.

              Это сочетание ODM и БД весьма популярно в сообществе Node, частично потому, что система хранения документов и запросов очень похожа на JSON и поэтому знакома разработчикам JavaScript.

              @@ -112,7 +112,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose

              Mongoose Library Model with correct cardinality

              -

              Заметка: В следующем разделе дан базовый пример, в котором объясняется, как задавать и как использовать модели. При чтении обратите внимание, как будут создаваться модели, приведенные на диагарамме.

              +

              Заметка: В следующем разделе дан базовый пример, в котором объясняется, как задавать и как использовать модели. При чтении обратите внимание, как будут создаваться модели, приведенные на диаграмме.

              Mongoose Справочник

              @@ -136,7 +136,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose

              Примечание: В примере для хранения базы данных мы используем облачный сервис sandbox tier ("песочницу"). This is suitable for development, and makes sense for the tutorial because it makes "installation" operating system independent (database-as-a-service is also one approach you might well use for your production database).

              -

              Подключенние к MongoDB

              +

              Подключение к MongoDB

              Mongoose требует подключение к MongoDB. Вы можете использовать require() и подключится к локальной БД при помощи mongoose.connect(), как показано ниже.

              @@ -509,7 +509,7 @@ SomeModel.find(callback_function);

              Мы уже немного понимаем,  что может делать Mongoose и как следует проектировать  модели. Теперь самое время начать работу над сайтом  LocalLibrary. Самое первое, что мы должны сделать - установить базу данных MongoDb, в которой будут храниться данные нашей   библиотеки.

              -

              В этом руководстве мы будем использовать базу данных в "песочнице" ("sandbox") - бесплатный облачный сервис, предоставляемый  mLab. Такая база не очень подходит для промышленных вебсайтов, поскольку не имеет избыточности, но она очень удобна для разработки и прототипирования. Мы используем ее, так как она бесплатна, ее легко установить, и потому что mLab - популярный поставщик  базы данных как сервиса, и это может быть разумным выбором для промышленной базы данных (на данный момент другие известные возможности включают Compose, ScaleGrid и MongoDB Atlas).

              +

              В этом руководстве мы будем использовать базу данных в "песочнице" ("sandbox") - бесплатный облачный сервис, предоставляемый  mLab. Такая база не очень подходит для промышленных веб-сайтов, поскольку не имеет избыточности, но она очень удобна для разработки и прототипирования. Мы используем ее, так как она бесплатна, ее легко установить, и потому что mLab - популярный поставщик  базы данных как сервиса, и это может быть разумным выбором для промышленной базы данных (на данный момент другие известные возможности включают Compose, ScaleGrid и MongoDB Atlas).

              Заметка: При желании можно установить БД  MongoDb локально, загрузив и установив подходящие для вашей системы двоичные файлы. В этом случае приводимые ниже инструкции не изменятся, за исключением URL базы данных, который нужно будет задать для установки соединения.

              @@ -535,7 +535,7 @@ SomeModel.find(callback_function);
              • -

                Выберите ближайщий к Вам регион и щелкните кнопку Continue.

                +

                Выберите ближайший к Вам регион и щелкните кнопку Continue.

              @@ -573,7 +573,7 @@ SomeModel.find(callback_function);

              Установка Mongoose

              -

              Откройте окно команд и перейдите в каталог, в котором создан  каркас вебсайта Local Library. Введите команду install, чтобы установить Mongoose (и ее зависимости), а также добавьте ее в файл package.json, если вы еще не сделали этого ранее, при чтении примера Mongoose Primer.

              +

              Откройте окно команд и перейдите в каталог, в котором создан  каркас веб-сайта Local Library. Введите команду install, чтобы установить Mongoose (и ее зависимости), а также добавьте ее в файл package.json, если вы еще не сделали этого ранее, при чтении примера Mongoose Primer.

              npm install mongoose
              @@ -594,7 +594,7 @@ db.on('error', console.error.bind(console, 'MongoDB connection error:'));

              Определение схемы LocalLibrary

              -

              Мы определим отдельный модуль для каждой модели как уже обсуждалось выше. Начнем с создания каталога для моделей в корне проекта (/models), после чего создадим отдельные файлы для кажой модели:

              +

              Мы определим отдельный модуль для каждой модели как уже обсуждалось выше. Начнем с создания каталога для моделей в корне проекта (/models), после чего создадим отдельные файлы для каждой модели:

              /express-locallibrary-tutorial  //the project root
   /models
@@ -716,7 +716,7 @@ module.exports = mongoose.model('BookInstance', BookInstanceSchema);
              • enum: Позволяет указать допустимые значения строки. В нашем случае используются, чтобы задать статус доступности книги (применение enum (перечисления) означает, что мы ходим предотвратить ошибочное написание и произвольные значения статуса)
                • -
              • default: определяет значание статуса по умолчанию (maintenance) при создании  экземпляра книги, и дату due_back возврата книги (now, сейчас). Отметьте, как используется функция  Date при установке даты!
                • +
              • default: определяет значение статуса по умолчанию (maintenance) при создании  экземпляра книги, и дату due_back возврата книги (now, сейчас). Отметьте, как используется функция  Date при установке даты!

              Все остальное знакомо по предыдущим схемам.

              @@ -762,7 +762,7 @@ module.exports = mongoose.model('BookInstance', BookInstanceSchema);

              Итог

              -

              В этой статье мы познакомились с БД и ОРМ (объектно-реляционными моделями) в системе Node/Express, узнали, как определяются схемы и модели Mongoose. Мы применили эти знания при проектировании и реализации моделей Book, BookInstance, Author и Genre для вебсайта LocalLibrary.

              +

              В этой статье мы познакомились с БД и ОРМ (объектно-реляционными моделями) в системе Node/Express, узнали, как определяются схемы и модели Mongoose. Мы применили эти знания при проектировании и реализации моделей Book, BookInstance, Author и Genre для веб-сайта LocalLibrary.

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

              @@ -770,7 +770,7 @@ module.exports = mongoose.model('BookInstance', BookInstanceSchema);
              • Database integration Интеграция БД (документация Express)
                • -
              • Mongoose website Вебсайт Mongoose (документация Mongoose)
                • +
              • Mongoose website Веб-сайт Mongoose (документация Mongoose)
              • Mongoose Guide Справочник Mongoose (документация Mongoose)
              • Validation Валидация (документация Mongoose)
              • Schema Types Типы в схемах (документация Mongoose)
                • diff --git a/files/ru/learn/server-side/express_nodejs/routes/index.html b/files/ru/learn/server-side/express_nodejs/routes/index.html index c8610eba1b..32d91f3752 100644 --- a/files/ru/learn/server-side/express_nodejs/routes/index.html +++ b/files/ru/learn/server-side/express_nodejs/routes/index.html @@ -112,7 +112,7 @@ app.use('/wiki', wiki); функции в цепочке промежуточных элементов.

                -

                Заметка: Фукции в Router - это промежуточный слой (middleware) are Express , что означает, что они должны или завершить (ответить на) запрос reqили вызвать следующую (next) функцию в цепочке. В нашем случае запрос завершается вызовом send(), поэтому аргумент next не нужен (и поэтому не указан).

                +

                Заметка: Функции в Router - это промежуточный слой (middleware) are Express , что означает, что они должны или завершить (ответить на) запрос reqили вызвать следующую (next) функцию в цепочке. В нашем случае запрос завершается вызовом send(), поэтому аргумент next не нужен (и поэтому не указан).

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

                @@ -177,7 +177,7 @@ app.use('/wiki', wiki);

                Маршруты, необходимые для библиотеки LocalLibrary

                -

                Те URL, котрые в итоге будут нужны для наших страниц, показаны ниже.  Слово object должно быть заменено на имя каждой из наших моделей (book, bookinstance, genre, author),  слово objects - множественное число для object, а id - уникальное значение для поля(_id), которое Mongoose создает по умолчанию для каждого экземпляра модели.

                +

                Те URL, которые в итоге будут нужны для наших страниц, показаны ниже.  Слово object должно быть заменено на имя каждой из наших моделей (book, bookinstance, genre, author),  слово objects - множественное число для object, а id - уникальное значение для поля(_id), которое Mongoose создает по умолчанию для каждого экземпляра модели.

                • catalog/ — Домашняя страница home/index.
                  • @@ -260,7 +260,7 @@ exports.author_update_post = function(req, res) {

                  В модуле сначала подключается (requires) модель, которая далее будет использована для получения данных и их обновления. Далее экспортируются функции для каждого URL, который мы хотим обрабатывать (операции create-создать, update-обновить и delete-удалить используют формы, следовательно, должны быть дополнительные методы для обработки post-запросов от форм - эти методы обсуждаются далее, в статье "forms article" ("формы")).

                  -

                  Все функции имеют стандартную форму функций среднего слоя Express , с арнументами для запроса, ответа и следующей (next) функции, которая должна быть вызвана, если метод не завершил цикл запроса (во всех приведенных в коде случаях - завершает!). Методы просто возвращают строку, информирующую о том, что соответствующая страница еще не создана. Если функция контроллера должна получить параметры маршрута, эти параметры будут выведены в строке сообщения (смотри выше req.params.id ).

                  +

                  Все функции имеют стандартную форму функций среднего слоя Express , с аргументами для запроса, ответа и следующей (next) функции, которая должна быть вызвана, если метод не завершил цикл запроса (во всех приведенных в коде случаях - завершает!). Методы просто возвращают строку, информирующую о том, что соответствующая страница еще не создана. Если функция контроллера должна получить параметры маршрута, эти параметры будут выведены в строке сообщения (смотри выше req.params.id ).

                  BookInstance controller

                  @@ -544,7 +544,7 @@ router.get('/bookinstances', book_instance_controller.bookinstance_list); module.exports = router; -

                  Модуль загружает Express и использует его для создания объекта Router . В маршутизаторе задаются маршруты и производится их экспорт.

                  +

                  Модуль загружает Express и использует его для создания объекта Router . В маршрутизаторе задаются маршруты и производится их экспорт.

                  Маршруты определяют в объекте маршрутизатора  или .get() или .post() методы. Все пути заданы как строки (образцы строк и регулярные выражения не использовались). Маршруты, которые взаимодействуют с конкретным ресурсом (скажем, с книгой), для получения из URL идентификатора объекта используют параметры путей.

                  @@ -554,7 +554,7 @@ router.get('/bookinstances', book_instance_controller.bookinstance_list);

                  Все новые маршруты заданы, а маршрут на начальную страницу остался без изменения. Давайте перенаправим его на новую страницу "index", которая создана в каталоге  '/catalog'.

                  -

                  Откройте /routes/index.js и замените существущий маршрут нприведенную ниже.

                  +

                  Откройте /routes/index.js и замените существующий маршрут приведенную ниже.

                  // GET home page.
 router.get('/', function(req, res) {
@@ -575,7 +575,7 @@ router.get('/', function(req, res) {
 var usersRouter = require('./routes/users');
 var catalogRouter = require('./routes/catalog');  //Import routes for "catalog" area of site
                  -

                  Далее, добавьте маршрут каталога в стек промежуточного слоя после других маршрутов (добавтьте третью строку после имеющихся двух):

                  +

                  Далее, добавьте маршрут каталога в стек промежуточного слоя после других маршрутов (добавить третью строку после имеющихся двух):

                  app.use('/', indexRouter);
 app.use('/users', usersRouter);
diff --git a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html
index ec18fa3988..a9c608d264 100644
--- a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html
+++ b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html
@@ -34,7 +34,7 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website
 
 
                  Применение генератора приложений
                  
 
-
                  Вы уже должны были устанавить express-generator, читая статью установка среды разработки Node. Напомним, что генератор установлен с помощью менеджера пакетов NPM, при выполнении команды:
                  
+
                  Вы уже должны были установить express-generator, читая статью установка среды разработки Node. Напомним, что генератор установлен с помощью менеджера пакетов NPM, при выполнении команды:
                  
 
 
                  npm install express-generator -g
 
                  
@@ -82,8 +82,8 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website
 
                  Как правило, следует выбрать шаблонизатор, который имеет весь необходимый вам функционал и обеспечивает вам высокую производительность - так же, как вы выбираете любой другой компонент! Некоторые критерии для сравнения шаблонизаторов:
                  
 
 
                    
- 
                  • Время до  получения результата — если ваша команда уже имела дело с шаблонизатором, то, скоре всего, продуктивнее будет использовать этот шаблонизатор. Если нет, тогда следует учесть  все относительные сложности изучения кандидатов в шаблонизаторы.
                    • 
- 
                  • Популярность и активность — проверьте популярность движка, возможно, у него есть активное сообщество. Очень важно иметь поддержку для движка, если у вас возникнут проблемы в течении жизни вебсайта.
                    • 
+ 
                  • Время до  получения результата — если ваша команда уже имела дело с шаблонизатором, то, скорее всего, продуктивнее будет использовать этот шаблонизатор. Если нет, тогда следует учесть  все относительные сложности изучения кандидатов в шаблонизаторы.
                    • 
+ 
                  • Популярность и активность — проверьте популярность движка, возможно, у него есть активное сообщество. Очень важно иметь поддержку для движка, если у вас возникнут проблемы в течении жизни веб-сайта.
                    • 
  
                  • Стиль — некоторые шаблонизаторы используют особую разметку для отображения вставленного контента внутри "обычного" HTML, а другие строят  HTML, используя специальный синтаксис (например, используя отступы или блочные имена).
                    • 
  
                  • Производительность и время интерпретации.
                    • 
  
                  • Особенности — следует выбирать движок  с учетом таких особенностей:
@@ -210,7 +210,7 @@ GET /favicon.ico 404 34.134 ms - 1335

                  Любые изменения, внесенные на веб-сайт Express, не будут отображаться до перезапуска сервера. Остановка (Ctrl-C) и перезапуск сервера каждый раз после внесения изменений быстро становится раздражающей, поэтому стоит автоматизировать перезапуск.

                  Одно из самых простых средств для этого --
                  - nodemon. Его обычно устанавливают глобально (так как это "инструмент"), но  сейчас мы устанавим его и будем применять локально как зависимость разработки, так что любые разработчики проекта получат его автоматически при установке приложения. Выполним следующую команду (предполагаем, что мы находимся в корневом каталоге):

                  + nodemon. Его обычно устанавливают глобально (так как это "инструмент"), но  сейчас мы установим его и будем применять локально как зависимость разработки, так что любые разработчики проекта получат его автоматически при установке приложения. Выполним следующую команду (предполагаем, что мы находимся в корневом каталоге):

                  npm install --save-dev nodemon
                  @@ -224,7 +224,7 @@ GET /favicon.ico 404 34.134 ms - 1335 -

                  В файле package.json проекта появится  новый раздел с этой зависимостью (на вашей машине номер версии nodemon может бытьдругим) :

                  +

                  В файле package.json проекта появится  новый раздел с этой зависимостью (на вашей машине номер версии nodemon может быть другим) :

                    "devDependencies": {
     "nodemon": "^1.11.0"
@@ -436,7 +436,7 @@ app.use(function(err, req, res, next) {
 });
                  -

                  Объект app приложения Express теперь полностью настроен. Остался последний шаг - добавить его к экпортируемым элементам модуля (это позволит импортировать его в файле /bin/www).

                  +

                  Объект app приложения Express теперь полностью настроен. Остался последний шаг - добавить его к экспортируемым элементам модуля (это позволит импортировать его в файле /bin/www).

                  module.exports = app;
                  @@ -495,7 +495,7 @@ block content

                  Сейчас создан каркас проекта Local Library. Мы проверили, что он запускается с использованием Node. Но главное, что вы поняли структуру проекта, и знаете, где и как добавить пути и представления для нашей локальной библиотеки.

                  -

                  Далее мы изменим каркас, чтобы он работал как библиотечный вебсайт

                  +

                  Далее мы изменим каркас, чтобы он работал как библиотечный веб-сайт

                  Смотри также

                  diff --git a/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html b/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html index 66954ba287..6a816405e4 100644 --- a/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html +++ b/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html @@ -65,7 +65,7 @@ original_slug: Learn/Server-side/Express_Nodejs/Учебник_сайт_local_li

                  По мере того, как вы работаете над учебником, мы предоставим вам соответствующие фрагменты кода для копирования и вставки в каждой точке, а также будет другой код, который, мы надеемся, вы расширите самостоятельно (с некоторыми рекомендациями).

                  -

                  Если вы застряли, вы можете найти полностью разработанную версию вебсайта на Github.

                  +

                  Если вы застряли, вы можете найти полностью разработанную версию веб-сайта на Github.

                  Резюме

                  diff --git a/files/ru/learn/server-side/first_steps/client-server_overview/index.html b/files/ru/learn/server-side/first_steps/client-server_overview/index.html index 7961d46a24..3d45e8b536 100644 --- a/files/ru/learn/server-side/first_steps/client-server_overview/index.html +++ b/files/ru/learn/server-side/first_steps/client-server_overview/index.html @@ -102,7 +102,7 @@ Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSC
                • Тип запроса (GET).
                • URL целевого ресурса (/en-US/search).
                • URL-параметры (q=client%2Bserver%2Boverview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev).
                  • -
                • Целевой/хост-вебсайт (developer.mozilla.org).
                  • +
                • Целевой/хост-веб-сайт (developer.mozilla.org).
                • Конец первой строки также содержит короткую строку, идентифицирующую версию протокола (HTTP/1.1).
                diff --git a/files/ru/learn/server-side/first_steps/index.html b/files/ru/learn/server-side/first_steps/index.html index 91512b5957..4f6b0b78f6 100644 --- a/files/ru/learn/server-side/first_steps/index.html +++ b/files/ru/learn/server-side/first_steps/index.html @@ -35,7 +35,7 @@ translation_of: Learn/Server-side/First_steps
                Введение в серверную часть
                -
                Добро пожаловать на курс программирования серверной части MDN для начинающих! В этой первой статье мы посмотрим на программирование серверной части на высоком уровне, отвечая на вопросы такие как: "что это такое?", "чем оно отличается от программирования клиентской части?" и "почему это настолько востребовано?". После прочтения этой статьи вы будуте понимать всю дополнительную мощь, доступную веб-сайтам посредством программирования на стороне сервера.
                +
                Добро пожаловать на курс программирования серверной части MDN для начинающих! В этой первой статье мы посмотрим на программирование серверной части на высоком уровне, отвечая на вопросы такие как: "что это такое?", "чем оно отличается от программирования клиентской части?" и "почему это настолько востребовано?". После прочтения этой статьи вы будете понимать всю дополнительную мощь, доступную веб-сайтам посредством программирования на стороне сервера.
                Обзор Клиент-Сервера
                Теперь, когда вы познакомились с целью и потенциальными преимуществами программирования серверной части, мы собираемся узнать в подробностях, что случится, когда сервер получит "динамический запрос" от браузера. Так как большинство программ серверной части обрабатывает запросы и ответы практически одинаково, это поможет вам понять, что нужно делать при написании собственного кода.
                Фреймворки серверной части
                diff --git a/files/ru/learn/server-side/first_steps/introduction/index.html b/files/ru/learn/server-side/first_steps/introduction/index.html index 7026f9ef60..fce539ec4a 100644 --- a/files/ru/learn/server-side/first_steps/introduction/index.html +++ b/files/ru/learn/server-side/first_steps/introduction/index.html @@ -142,7 +142,7 @@ translation_of: Learn/Server-side/First_steps/Introduction

                На заметку: Google Maps сохраняет вашу историю поиска и посещений. Часто посещаемые или часто вводимые в поиск локации выделяются больше, чем остальные.

                -

                Результаты поиска Google оптимизируются на основе прыдыдущего поиска.

                +

                Результаты поиска Google оптимизируются на основе предыдущего поиска.

                1.  Перейдите в поиск Google.
                  2. diff --git a/files/ru/learn/server-side/first_steps/website_security/index.html b/files/ru/learn/server-side/first_steps/website_security/index.html index 95fa361668..514d7490a5 100644 --- a/files/ru/learn/server-side/first_steps/website_security/index.html +++ b/files/ru/learn/server-side/first_steps/website_security/index.html @@ -37,7 +37,7 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность

                  Примечание: Это вводная статья, призванная помочь вам задуматься о безопасности веб-сайта, но она не является исчерпывающей.

                -

                Угрозы бесопасности сайта

                +

                Угрозы безопасности сайта

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

                @@ -52,7 +52,7 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность

                Уязвимости XSS делятся на отраженные и хранимые, в зависимости от того, как сайт возвращает внедренный код в браузер.

                  -
                • Отраженная XSS-уязвимость возникает, когда пользовательский контент, который передается на сервер, немедленно и без изменений возвращается для отображения в браузере. Любой скрипт в исходном пользовательском контенте запустится при загрузке новой страницы. Например, рассмотрим строку поиска по сайту, в которой поисковые слова закодированы как параметры URL, и эти слова отображаются вместе с результатами. Злоумышленник может создать поисковую ссылку, которая будет содержать вредоносный скрипт в качестве параметра (например: http://mysite.com?q=beer<script%20src="http://evilsite.com/tricky.js"></script>) и перслать его другому пользователю по электронной почте. Если целевой пользователь кликнет по этой «интересной ссылке», то скрипт выполнится при отображении результатов поиска. Как мы уже говорили, злоумышленник  таким образом получает всю информацию, необходимую ему для входа на сайт в качестве целевого пользователя, потенциального совершения покупок от имени пользователя или получения его контактной информации.
                  • +
                • Отраженная XSS-уязвимость возникает, когда пользовательский контент, который передается на сервер, немедленно и без изменений возвращается для отображения в браузере. Любой скрипт в исходном пользовательском контенте запустится при загрузке новой страницы. Например, рассмотрим строку поиска по сайту, в которой поисковые слова закодированы как параметры URL, и эти слова отображаются вместе с результатами. Злоумышленник может создать поисковую ссылку, которая будет содержать вредоносный скрипт в качестве параметра (например: http://mysite.com?q=beer<script%20src="http://evilsite.com/tricky.js"></script>) и переслать его другому пользователю по электронной почте. Если целевой пользователь кликнет по этой «интересной ссылке», то скрипт выполнится при отображении результатов поиска. Как мы уже говорили, злоумышленник  таким образом получает всю информацию, необходимую ему для входа на сайт в качестве целевого пользователя, потенциального совершения покупок от имени пользователя или получения его контактной информации.

                • Постоянная уязвимость XSS возникает, когда вредоносный скрипт хранится на веб-сайте, а затем снова отображается без изменений, чтобы другие пользователи могли выполнять его невольно.
                  Например, доска обсуждений, которая принимает комментарии, содержащие неизмененный HTML, может хранить вредоносный скрипт от злоумышленника. Когда комментарии отображаются, скрипт выполняется и может отправить злоумышленнику информацию, необходимую для доступа к учетной записи пользователя. Атака такого рода чрезвычайно популярна и мощна, потому что злоумышленник может даже не иметь прямого отношения к жертвам.
                  @@ -94,7 +94,7 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность -

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

                  +

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

                  Примечание: этот раздел в значительной степени основан на информации из Wikipedia.

                  diff --git a/files/ru/learn/server-side/index.html b/files/ru/learn/server-side/index.html index a26c014999..66645f65dd 100644 --- a/files/ru/learn/server-side/index.html +++ b/files/ru/learn/server-side/index.html @@ -18,13 +18,13 @@ translation_of: Learn/Server-side

                  Тема Динамические веб-сайты – серверное программирование состоит из ряда модулей, рассматривающих создание динамических веб-сайтов; сайтов, которые доставляют персонализированную информацию в ответ на HTTP запрос. Этот модуль предоставляет общее введение в серверное программирование, наряду со специальными руководствами начального уровня о том, как использовать Django (Python) и Express (Node.js/JavaScript) веб-фреймворки для создания простых приложений.

                  -

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

                  +

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

                  В современном мире веб-разработки крайне рекомендуется изучить разработку на стороне сервера.

                  Программа обучения

                  -

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

                  +

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

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

                  diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.html index f85eb11569..411829b839 100644 --- a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.html +++ b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -2,19 +2,19 @@ title: Понимание JavaScript-фреймворков для фронтенда slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks -original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймворки +original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_ффреймворки ---
                  {{LearnSidebar}}
                  -JavaScript-фреймворки являются неотъемлемой частью современной веб-разработки,
                  +JavaScript-ффреймворки являются неотъемлемой частью современной веб-разработки,
                  предоставляя разработчикам проверенные и протестированные
                  инструменты для создания масштабируемых и интерактивных веб-приложений. Многие
                  -
                  современные компании используют фреймворки для своих решений, поэтому многие задачи связанные с разработкой клиентской части веб-приложений теперь требуют опыта работы с ними.
                  +
                  современные компании используют ффреймворки для своих решений, поэтому многие задачи связанные с разработкой клиентской части веб-приложений теперь требуют опыта работы с ними.
                   
                  -

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

                  +

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

                  Этим набором статей мы постараемся дать вам удобную отправную точку, чтобы помочь вам начать изучать основы. Мы не стремимся научить вас всему, что вам нужно знать о React / ReactDOM, или Vue, или какой-то другой конкретной среде; Документация этих фреймворков отлично выполняют эту работу. Вместо этого мы хотим сделать шаг назад и сначала ответить на более фундаментальные вопросы, такие как:

                  @@ -22,13 +22,13 @@ JavaScript-фреймворки являются неотъемл
                • Почему я должен использовать фреймворк? Какие проблемы он решит?
                • Какие вопросы я должен задать себе при выборе определённого фреймворка?
                  Нужен ли мне какой-либо из них вовсе?
                  • -
                • Какими возможностями обладают фреймворки? Как они работают в целом и в чём отличия их имплементаций этих возможностей?
                  • +
                • Какими возможностями обладают ффреймворки? Как они работают в целом и в чём отличия их имплементаций этих возможностей?
                • Как они связаны с "ванильным" JavaScript, или HTML?
                -

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

                +

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

                -

                Начните прямо сейчас с "Введение в фронтенд фрейворки"

                +

                Начните прямо сейчас с "Введение в фронтенд фреймворки"

                Prerequisites

                diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html index 710fe7511f..96a5d924ea 100644 --- a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html +++ b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html @@ -17,7 +17,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв
            diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html index 8ddb3ea207..54632e2233 100644 --- a/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html +++ b/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html @@ -26,7 +26,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Feature_detection

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

            -

            Давайте подведем итоги и посмотрим на пример, который мы затронули в нашем документе Решение самых распространненых проблем JavaScript— Использование геолокации (который предоставляет доступные данные о местоположении для устройства, на котором работает веб-браузер) есть основная точка входа для его использования, свойство geolocation,  доступное на глобальном объекте Navigator. Следовательно, вы можете определить, поддерживает ли браузер геолокацию или нет, используя что-то вроде следующего:

            +

            Давайте подведем итоги и посмотрим на пример, который мы затронули в нашем документе Решение самых распространенных проблем JavaScript— Использование геолокации (который предоставляет доступные данные о местоположении для устройства, на котором работает веб-браузер) есть основная точка входа для его использования, свойство geolocation,  доступное на глобальном объекте Navigator. Следовательно, вы можете определить, поддерживает ли браузер геолокацию или нет, используя что-то вроде следующего:

            if ("geolocation" in navigator) {
   navigator.geolocation.getCurrentPosition(function(position) {
diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.html
index 96d31f156c..6057b46650 100644
--- a/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.html
+++ b/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.html
@@ -40,11 +40,11 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction
 
            Примечание: Статья сделаем веб доступным для всех предоставляет более полезную информацию о различных браузерах, которые используют люди, их доле рынка и связанных с этим проблемах совместимости браузеров.
            
 
 
-
            Мы должны поговорить немного о терминологии. Для начала, когда мы говорим о сайтах, "работающих кросс-браузерно", на самом деле мы говорим о том, что они должны обеспечивать приемлимое удобство использования в разных браузерах. Это нормально, если сайт выглядит немного по-разному в разных браузерах, главное он должен обеспечивать полную функциональность.В современных браузерах вы можете сделать что-то анимированным или использовать 3D, тогда как в старых браузерах вы можете лишь показать плоскую картинку, предоставляющую ту же информацию. Если владелец сайта доволен, вы сделали свое дело.
            
+
            Мы должны поговорить немного о терминологии. Для начала, когда мы говорим о сайтах, "работающих кросс-браузерной", на самом деле мы говорим о том, что они должны обеспечивать приемлемое удобство использования в разных браузерах. Это нормально, если сайт выглядит немного по-разному в разных браузерах, главное он должен обеспечивать полную функциональность.В современных браузерах вы можете сделать что-то анимированным или использовать 3D, тогда как в старых браузерах вы можете лишь показать плоскую картинку, предоставляющую ту же информацию. Если владелец сайта доволен, вы сделали свое дело.
            
 
 
            С другой стороны, плохо, когда сайт полноценно работает для обычных людей, но может быть совершенно недоступен для людей, имеющих проблемы со зрением, т.к. их приложения для чтения экрана не могут распознать информацию на сайте.
            
 
-
            Когда мы говорим "приемлимое количество браузеров", мы не говорим, что это должно быть 100% всех браузеров в мире — это почти невозможно. Вы можете собрать информацию о том, какими браузеры и устройства используют ваши пользователи (это мы обсудим во второй статье — см. Gotta test 'em all?), но это ничего не гарантирует. Как веб-разработчик, вы должны определить для себя несколько браузеров и устройств, на которых код должен работать полностью, но кроме этого, вы должны писать код так, чтобы и другие браузеры были способны максимально использовать ваш сайт (defensive coding). Это одна из самых больших проблем веб-разработки.
            
+
            Когда мы говорим "приемлемое количество браузеров", мы не говорим, что это должно быть 100% всех браузеров в мире — это почти невозможно. Вы можете собрать информацию о том, какими браузеры и устройства используют ваши пользователи (это мы обсудим во второй статье — см. Gotta test 'em all?), но это ничего не гарантирует. Как веб-разработчик, вы должны определить для себя несколько браузеров и устройств, на которых код должен работать полностью, но кроме этого, вы должны писать код так, чтобы и другие браузеры были способны максимально использовать ваш сайт (defensive coding). Это одна из самых больших проблем веб-разработки.
            
 
 
            
 
            Примечание: Мы разберем defensive coding позже в этом модуле.
            
@@ -52,7 +52,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction
 
 
            Почему возникают кросс-браузерные проблемы?
            
 
-
            Есть множество причин, почему возникают кросс-браузерные проблемы, и, заметьте, что сейчас мы говорим о проблемах, при которых некоторые вещи ведут себя по-разномув разных браузерах / устройствах / настройках просмотра. Прежде чем вы столкнетесь с проблемами браузера, вы должны исправить все ошибки в коде (см. Отладка HTML, Отладка CSS, and Что пошло не так? Устранение ошибок JavaScript из предыдущего раздела).
            
+
            Есть множество причин, почему возникают кросс-браузерные проблемы, и, заметьте, что сейчас мы говорим о проблемах, при которых некоторые вещи ведут себя по-разному в разных браузерах / устройствах / настройках просмотра. Прежде чем вы столкнетесь с проблемами браузера, вы должны исправить все ошибки в коде (см. Отладка HTML, Отладка CSS, and Что пошло не так? Устранение ошибок JavaScript из предыдущего раздела).
            
 
 
            Кросс-браузерные проблемы возникают потому-что:
            
 
diff --git a/files/ru/learn/tools_and_testing/github/index.html b/files/ru/learn/tools_and_testing/github/index.html
index addc19507d..acd5dc38c3 100644
--- a/files/ru/learn/tools_and_testing/github/index.html
+++ b/files/ru/learn/tools_and_testing/github/index.html
@@ -12,7 +12,7 @@ original_slug: Learn/Tools_and_testing/ГитХаб
 
 
            Все разработчики используют ту или иную систему контроля версий (СКВ, VCS), инструмент, позволяющий им взаимодействовать с другими разработчиками на проекте без угрозы того, что кто-то перезапишет чужую работу, а также вернуться к предыдущим версиям кода при обнаружении проблем позднее.
            
 
-
            Самая популярная СКВ (по крайней мере, среди веб-разработчиков) являюся Гит (Git), а также ГитХаб (GItHub) - сайт, обеспечивающий размещение ваших репозиториев и включащий инструменты для работы с ними. Цели этого модуля - дать вам необходимые знания о каждой из упомянутых СКВ.
            
+
            Самая популярная СКВ (по крайней мере, среди веб-разработчиков) являются Гит (Git), а также ГитХаб (GItHub) - сайт, обеспечивающий размещение ваших репозиториев и включающий инструменты для работы с ними. Цели этого модуля - дать вам необходимые знания о каждой из упомянутых СКВ.
            
 
 
            Обзор
            
 
@@ -20,15 +20,15 @@ original_slug: Learn/Tools_and_testing/ГитХаб
 
 
              
  
            • Редко, когда вы работаете с проектом полностью самостоятельно. Как только вы начинаете работать с другими людьми, возникает риск конфликта. Речь идет о ситуации, когда несколько человек пытается в одно и то же время обновить одну и ту же часть кода. Нужен определенный механизм, позволяющий управлять событиями и тем самым избежать потери результатов общей работы.
              • 
- 
            • Работая с проектому в одиночку или с другими, вы захотите иметь возможность иметь резервную копию кода на случай поломки вашего компьютера.
              • 
+ 
            • Работая с проектом в одиночку или с другими, вы захотите иметь возможность иметь резервную копию кода на случай поломки вашего компьютера.
              • 
  
            • Также у вас может возникнуть необходимость откатить изменения к более ранним версиям, если проблема обнаружена позднее. Конечно, это начать делать самостоятельно, сохраняя различные версии одного и того же файла, например myCode.js, myCode_v2.js, myCode_v3.js, myCode_final.js, myCode_really_really_final.js, и так далее, но это на самом деле ненадежный и порождающий ошибки способ.
              • 
- 
            • Различные члены команды могут захотеть создать собственные версии кода (в Гит такие версии именуются ветками), работать над новой фичей в этой версии, а затем контролируемо объединить эту версию (в ГитХабе используются пул реквесты - запросы на принятие изменений) с главной версией.
              • 
+ 
            • Различные члены команды могут захотеть создать собственные версии кода (в Гит такие версии именуются ветками), работать над новой фичей в этой версии, а затем контролируемо объединить эту версию (в ГитХабе используются пул реквизиты - запросы на принятие изменений) с главной версией.
              • 
 
            
 
 
            СКВ обеспечивают инструменты для решения всех вышеуказанных задач. Гит является примером СКВ, а ГитХаб - это сайт, обеспечивающий веб-интерфейс для работы с гит, а также множество полезных инструментов для работы с гит-репозиториями лично или в командах, такие как фиксация проблем с кодом, инструменты для проверки кода, инструменты для управления созданием продукта, например назначение задач и их статусов, и т.д.
            
 
 
            
-
            Важно: ГИТ на самом деле - распределенная система контроля версий, это значит что полная копия репозитория, содержащая всю кодовую базу сохраняется на твой компьютер (и кого-либо еще). Ты вносишь изменения в свою копию и затем отправляешь эти изменения обратно на сервер, на котором администратор решит соединять ли твои измеения  с оригиналом. 
            
+
            Важно: ГИТ на самом деле - распределенная система контроля версий, это значит что полная копия репозитория, содержащая всю кодовую базу сохраняется на твой компьютер (и кого-либо еще). Ты вносишь изменения в свою копию и затем отправляешь эти изменения обратно на сервер, на котором администратор решит соединять ли твои изменения  с оригиналом. 
            
 
            
 
 
            Подготовка
            
@@ -37,16 +37,16 @@ original_slug: Learn/Tools_and_testing/ГитХаб
 
 
              
  
            • Компьютер с установленной версией Git (посмотри страницу загрузки Git).
              • 
- 
            • Приложения для работы с Git. В зависимости от того как ты предпочитаешь работать, можешь использовать Git-кленты с графическим интерфейсом (мы рекомендуем GitHub Desktop, SourceTree или Git Kraken) или просто продолжай использовать окно терминала. Если честно, будет весьма полезно для тебя узнать основы использования git-команд в терминале, даже если ты собираешься работать через графический интерфейс.
              • 
+ 
            • Приложения для работы с Git. В зависимости от того как ты предпочитаешь работать, можешь использовать Git-клиенты с графическим интерфейсом (мы рекомендуем GitHub Desktop, SourceTree или Git Kraken) или просто продолжай использовать окно терминала. Если честно, будет весьма полезно для тебя узнать основы использования git-команд в терминале, даже если ты собираешься работать через графический интерфейс.
              • 
  
            • Аккаунт на GitHub. Если у тебя еще его нет, зарегистрируйся сейчас по указанной ссылке.
              • 
 
            
 
-
            Что касается предварительных знаний, вам не нужно разбираться в веб-разработке, Git / GitHub или VCS, чтобы приступить к этому модулю. Тем не менее, рекомендуется, чтобы вы разбирались в состоавлении кода, могли его писать и читать, а также сохранили пару строчек кода в своих репозиториях!
            
+
            Что касается предварительных знаний, вам не нужно разбираться в веб-разработке, Git / GitHub или VCS, чтобы приступить к этому модулю. Тем не менее, рекомендуется, чтобы вы разбирались в составлении кода, могли его писать и читать, а также сохранили пару строчек кода в своих репозиториях!
            
 
 
            Также желательно, чтобы у вас были некоторые базовые знания о терминале, например, перемещение между каталогами, создание файлов и изменение системного PATH.
            
 
 
            
-
            Важно: Github не единственный сайт / инструментарий который ты можешь использовать с Git. Есть и альтернативы, такие как GitLab, которые ты можешь попробовать, а также ты моежшь попробовать настроить свой собственный сервер Git и использовать вместо GitHub. Мы в этом курсе останвились на GitHub, чтобы показать один из рабочих способов.
            
+
            Важно: Github не единственный сайт / инструментарий который ты можешь использовать с Git. Есть и альтернативы, такие как GitLab, которые ты можешь попробовать, а также ты можешь попробовать настроить свой собственный сервер Git и использовать вместо GitHub. Мы в этом курсе остановились на GitHub, чтобы показать один из рабочих способов.
            
 
            
 
 
            Guides
            
-- 
cgit v1.2.3-54-g00ecf
            Что нужно знать: -

            HTML, CSS, и JavaScript, быть знакомым с терминалом/коммандной строкой.

            +

            HTML, CSS, и JavaScript, быть знакомым с терминалом/командной строкой.

            React использует синтаксис HTML-in-JavaScript под названием JSX (JavaScript и XML). Знание HTML и JavaScript поможет вам изучить JSX и лучше определить, связаны ли ошибки в вашем приложении с JavaScript или с более специфической областью React.