From 841aae260382e2bf5ebb44d765d8c7301d27caab Mon Sep 17 00:00:00 2001 From: Alexey Istomin Date: Sat, 20 Mar 2021 18:37:44 +0300 Subject: Restore "ё" letter in Russian translation (#239) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(ru): restore ё letter * docs(ru): resolve conflicts * refactor(idea): remove ide folder --- .../accessibility/css_and_javascript/index.html | 2 +- files/ru/learn/accessibility/html/index.html | 2 +- files/ru/learn/accessibility/index.html | 6 +- .../learn/accessibility/wai-aria_basics/index.html | 8 +- .../accessibility/what_is_accessibility/index.html | 30 +++---- .../available_text_editors/index.html | 6 +- .../design_for_all_types_of_users/index.html | 26 +++--- .../index.html | 6 +- .../how_does_the_internet_work/index.html | 10 +-- .../how_much_does_it_cost/index.html | 32 +++---- files/ru/learn/common_questions/index.html | 8 +- .../index.html | 16 ++-- .../set_up_a_local_testing_server/index.html | 12 +-- .../thinking_before_coding/index.html | 26 +++--- .../upload_files_to_a_web_server/index.html | 10 +-- .../common_questions/using_github_pages/index.html | 20 ++--- .../what_are_hyperlinks/index.html | 8 +- .../what_is_a_domain_name/index.html | 8 +- .../common_questions/what_is_a_url/index.html | 8 +- .../what_is_a_web_server/index.html | 24 ++--- .../what_software_do_i_need/index.html | 10 +-- .../backgrounds_and_borders/index.html | 46 +++++----- .../cascade_and_inheritance/index.html | 28 +++--- .../css/building_blocks/debugging_css/index.html | 58 ++++++------ .../fundamental_css_comprehension/index.html | 22 ++--- .../handling_different_text_directions/index.html | 6 +- .../images_media_form_elements/index.html | 20 ++--- .../building_blocks/overflowing_content/index.html | 4 +- .../selectors/attribute_selectors/index.html | 6 +- .../selectors/combinators/index.html | 8 +- .../pseudo-classes_and_pseudo-elements/index.html | 22 ++--- .../type_class_and_id_selectors/index.html | 2 +- .../css/building_blocks/styling_tables/index.html | 28 +++--- .../css/building_blocks/the_box_model/index.html | 26 +++--- .../building_blocks/values_and_units/index.html | 28 +++--- files/ru/learn/css/css_layout/flexbox/index.html | 8 +- files/ru/learn/css/css_layout/floats/index.html | 24 ++--- files/ru/learn/css/css_layout/grids/index.html | 74 +++++++-------- files/ru/learn/css/css_layout/index.html | 24 ++--- .../learn/css/css_layout/introduction/index.html | 54 +++++------ .../css_layout/multiple-column_layout/index.html | 12 +-- .../ru/learn/css/css_layout/normal_flow/index.html | 10 +-- .../ru/learn/css/css_layout/positioning/index.html | 24 ++--- .../practical_positioning_examples/index.html | 8 +- .../css/css_layout/responsive_design/index.html | 30 +++---- .../css/first_steps/getting_started/index.html | 28 +++--- .../first_steps/how_css_is_structured/index.html | 8 +- .../learn/css/first_steps/how_css_works/index.html | 6 +- files/ru/learn/css/first_steps/index.html | 4 +- .../using_your_new_knowledge/index.html | 2 +- .../learn/css/first_steps/what_is_css/index.html | 14 +-- files/ru/learn/css/howto/index.html | 2 +- files/ru/learn/css/index.html | 6 +- .../learn/css/styling_text/fundamentals/index.html | 10 +-- files/ru/learn/css/styling_text/index.html | 4 +- .../css/styling_text/styling_links/index.html | 52 +++++------ .../css/styling_text/styling_lists/index.html | 30 +++---- .../styling_text/typesetting_a_homepage/index.html | 10 +-- .../ru/learn/css/styling_text/web_fonts/index.html | 20 ++--- files/ru/learn/forms/form_validation/index.html | 50 +++++------ .../how_to_build_custom_form_controls/index.html | 72 +++++++-------- .../forms/how_to_structure_a_web_form/index.html | 12 +-- files/ru/learn/forms/index.html | 4 +- .../sending_and_retrieving_form_data/index.html | 28 +++--- .../sending_forms_through_javascript/index.html | 10 +-- files/ru/learn/forms/styling_web_forms/index.html | 4 +- files/ru/learn/forms/your_first_form/index.html | 4 +- files/ru/learn/front-end_web_developer/index.html | 2 +- .../css_basics/index.html | 38 ++++---- .../dealing_with_files/index.html | 14 +-- .../how_the_web_works/index.html | 14 +-- .../html_basics/index.html | 28 +++--- .../learn/getting_started_with_the_web/index.html | 16 ++-- .../installing_basic_software/index.html | 2 +- .../javascript_basics/index.html | 20 ++--- .../publishing_your_website/index.html | 20 ++--- .../the_web_and_web_standards/index.html | 4 +- .../what_will_your_website_look_like/index.html | 6 +- .../author_fast-loading_html_pages/index.html | 22 ++--- files/ru/learn/html/howto/index.html | 4 +- files/ru/learn/html/index.html | 8 +- .../advanced_text_formatting/index.html | 28 +++--- .../creating_hyperlinks/index.html | 34 +++---- .../introduction_to_html/debugging_html/index.html | 16 ++-- .../document_and_website_structure/index.html | 24 ++--- .../getting_started/index.html | 22 ++--- .../html_text_fundamentals/index.html | 60 ++++++------- .../ru/learn/html/introduction_to_html/index.html | 8 +- .../marking_up_a_letter/index.html | 6 +- .../structuring_a_page_of_content/index.html | 12 +-- .../the_head_metadata_in_html/index.html | 12 +-- .../adding_vector_graphics_to_the_web/index.html | 24 ++--- .../images_in_html/index.html | 18 ++-- .../test_your_skills_colon__html_images/index.html | 2 +- .../learn/html/multimedia_and_embedding/index.html | 8 +- .../mozilla_splash_page/index.html | 6 +- .../other_embedding_technologies/index.html | 26 +++--- .../responsive_images/index.html | 12 +-- .../video_and_audio_content/index.html | 38 ++++---- files/ru/learn/html/tables/advanced/index.html | 24 ++--- files/ru/learn/html/tables/basics/index.html | 46 +++++----- files/ru/learn/html/tables/index.html | 2 +- .../html/tables/structuring_planet_data/index.html | 8 +- files/ru/learn/index.html | 2 +- .../javascript/asynchronous/async_await/index.html | 30 +++---- .../javascript/asynchronous/concepts/index.html | 22 ++--- .../javascript/asynchronous/introducing/index.html | 26 +++--- .../asynchronous/timeouts_and_intervals/index.html | 100 ++++++++++----------- .../build_your_own_function/index.html | 36 ++++---- .../building_blocks/conditionals/index.html | 60 ++++++------- .../javascript/building_blocks/events/index.html | 50 +++++------ .../building_blocks/functions/index.html | 40 ++++----- .../building_blocks/image_gallery/index.html | 8 +- .../building_blocks/looping_code/index.html | 76 ++++++++-------- .../building_blocks/return_values/index.html | 16 ++-- .../test_your_skills_colon__functions/index.html | 8 +- .../client-side_storage/index.html | 30 +++---- .../client-side_web_apis/fetching_data/index.html | 44 ++++----- .../javascript/client-side_web_apis/index.html | 6 +- .../client-side_web_apis/introduction/index.html | 2 +- .../manipulating_documents/index.html | 54 +++++------ .../third_party_apis/index.html | 18 ++-- .../first_steps/a_first_splash/index.html | 78 ++++++++-------- .../learn/javascript/first_steps/arrays/index.html | 30 +++---- .../learn/javascript/first_steps/math/index.html | 40 ++++----- .../first_steps/silly_story_generator/index.html | 26 +++--- .../javascript/first_steps/strings/index.html | 18 ++-- .../first_steps/useful_string_methods/index.html | 42 ++++----- .../javascript/first_steps/variables/index.html | 44 ++++----- .../first_steps/what_is_javascript/index.html | 38 ++++---- .../first_steps/what_went_wrong/index.html | 48 +++++----- files/ru/learn/javascript/howto/index.html | 6 +- files/ru/learn/javascript/index.html | 4 +- .../adding_bouncing_balls_features/index.html | 24 ++--- .../ru/learn/javascript/objects/basics/index.html | 26 +++--- files/ru/learn/javascript/objects/index.html | 4 +- .../javascript/objects/inheritance/index.html | 36 ++++---- files/ru/learn/javascript/objects/json/index.html | 32 +++---- .../objects/object-oriented_js/index.html | 18 ++-- .../objects/object_building_practice/index.html | 28 +++--- .../objects/object_prototypes/index.html | 42 ++++----- .../business_case_for_performance/index.html | 4 +- .../apache_configuration_htaccess/index.html | 4 +- .../learn/server-side/django/admin_site/index.html | 32 +++---- .../server-side/django/authentication/index.html | 58 ++++++------ .../learn/server-side/django/deployment/index.html | 82 ++++++++--------- .../django/development_environment/index.html | 24 ++--- .../django/django_assessment_blog/index.html | 16 ++-- files/ru/learn/server-side/django/forms/index.html | 96 ++++++++++---------- .../server-side/django/generic_views/index.html | 98 ++++++++++---------- .../learn/server-side/django/home_page/index.html | 44 ++++----- files/ru/learn/server-side/django/index.html | 12 +-- .../server-side/django/introduction/index.html | 10 +-- .../ru/learn/server-side/django/models/index.html | 58 ++++++------ .../learn/server-side/django/sessions/index.html | 16 ++-- .../server-side/django/skeleton_website/index.html | 2 +- .../ru/learn/server-side/django/testing/index.html | 88 +++++++++--------- .../django/web_application_security/index.html | 20 ++--- .../development_environment/index.html | 30 +++---- .../displaying_data/author_list_page/index.html | 6 +- .../displaying_data/book_list_page/index.html | 6 +- .../bookinstance_list_page/index.html | 4 +- .../date_formatting_using_moment/index.html | 2 +- .../flow_control_using_async/index.html | 20 ++--- .../displaying_data/genre_detail_page/index.html | 2 +- .../displaying_data/home_page/index.html | 20 ++--- .../express_nodejs/displaying_data/index.html | 4 +- .../displaying_data/template_primer/index.html | 14 +-- .../forms/create_bookinstance_form/index.html | 2 +- .../forms/delete_author_form/index.html | 10 +-- .../server-side/express_nodejs/forms/index.html | 26 +++--- .../forms/update_book_form/index.html | 4 +- .../ru/learn/server-side/express_nodejs/index.html | 8 +- .../express_nodejs/introduction/index.html | 62 ++++++------- .../server-side/express_nodejs/mongoose/index.html | 88 +++++++++--------- .../server-side/express_nodejs/routes/index.html | 40 ++++----- .../express_nodejs/skeleton_website/index.html | 30 +++---- .../tutorial_local_library_website/index.html | 2 +- files/ru/learn/server-side/first_steps/index.html | 6 +- .../first_steps/web_frameworks/index.html | 4 +- .../first_steps/website_security/index.html | 54 +++++------ files/ru/learn/server-side/index.html | 6 +- .../node_server_without_framework/index.html | 4 +- .../react_getting_started/index.html | 4 +- .../feature_detection/index.html | 48 +++++----- .../cross_browser_testing/html_and_css/index.html | 2 +- .../cross_browser_testing/index.html | 12 +-- .../cross_browser_testing/introduction/index.html | 16 ++-- files/ru/learn/tools_and_testing/github/index.html | 8 +- 189 files changed, 2142 insertions(+), 2142 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 d55d8b79b4..f262b3d161 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 bc6289bc1f..cf6f72f855 100644 --- a/files/ru/learn/accessibility/html/index.html +++ b/files/ru/learn/accessibility/html/index.html @@ -386,7 +386,7 @@ original_slug: Learn/Доступность/HTML

-

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

+

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

Примечание: Посмотреть на хорошие и плохие пример форм можно на good-form.html и bad-form.html.

diff --git a/files/ru/learn/accessibility/index.html b/files/ru/learn/accessibility/index.html index 36a072e071..ddaa937807 100644 --- a/files/ru/learn/accessibility/index.html +++ b/files/ru/learn/accessibility/index.html @@ -12,7 +12,7 @@ original_slug: Learn/Доступность ---
{{LearnSidebar}}
-

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

+

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

Прежде чем начать

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

Проверка знаний

-
Найди недочеты в доступности
-
В этом блоке представлен достаточно простой сайт, в котором, однако, есть множество недочетов в доступности. Необходимо найти их и починить.
+
Найди недочёты в доступности
+
В этом блоке представлен достаточно простой сайт, в котором, однако, есть множество недочётов в доступности. Необходимо найти их и починить.

Также советуем посмотреть

diff --git a/files/ru/learn/accessibility/wai-aria_basics/index.html b/files/ru/learn/accessibility/wai-aria_basics/index.html index 6155128bbd..e4bbc9d1f9 100644 --- a/files/ru/learn/accessibility/wai-aria_basics/index.html +++ b/files/ru/learn/accessibility/wai-aria_basics/index.html @@ -27,19 +27,19 @@ original_slug: Learn/Доступность/WAI-ARIA_basics

Что такое WAI-ARIA?

-

Давайте начнем с рассмотрения того, что такое WAI-ARIA и чем она может быть полезна.

+

Давайте начнём с рассмотрения того, что такое WAI-ARIA и чем она может быть полезна.

Новый набор проблем

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

-

Например, HTML5 ввел ряд семантических элементов, чтобы определить общую разметку страниц ( <nav>, <footer>и т.д.). До того как они были доступны, разработчики просто использовали <div> с идентификаторами или классами, например <div class="nav">, но это создавало проблемы, так как не было никакого простого способа найти определенный раздел страницы программным способом.

+

Например, HTML5 ввёл ряд семантических элементов, чтобы определить общую разметку страниц ( <nav>, <footer>и т.д.). До того как они были доступны, разработчики просто использовали <div> с идентификаторами или классами, например <div class="nav">, но это создавало проблемы, так как не было никакого простого способа найти определённый раздел страницы программным способом.

-

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

+

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

<a href="#hidden" class="hidden">Skip to navigation</a>
-

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

+

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

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

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

 

-

Что касается статистики: по оценкам Всемирной Организации Здравоохранения: "285 миллионов человек во всем мире страдают нарушениями зрения: 39 миллионов слепы и 246 имеют слабовидение." (см. Нарушения зрения и слепота). Это большая и значительная группа пользователей, которые просто упущены, потому что ваш сайт не закодирован должным образом — почти такой же размер, как и население Соединенных Штатов Америки.

+

Что касается статистики: по оценкам Всемирной Организации Здравоохранения: "285 миллионов человек во всем мире страдают нарушениями зрения: 39 миллионов слепы и 246 имеют слабовидение." (см. Нарушения зрения и слепота). Это большая и значительная группа пользователей, которые просто упущены, потому что ваш сайт не закодирован должным образом — почти такой же размер, как и население Соединённых Штатов Америки.

Люди с нарушениями слуха

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

Люди с ограниченными физическими возможностями 

-

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

+

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

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

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

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

-

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

+

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

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

@@ -113,12 +113,12 @@ original_slug: Learn/Доступность/What_is_accessibility
  • страницы не слишком длинные или плотные с точки зрения количества информации, представленной сразу.
  • язык, используемый на ваших страницах, настолько прост и удобен, насколько это возможно, и не полон ненужного жаргона и сленга.
  • важные моменты и контент выделены некоторым способом.
    • -
  • ошибки пользователя четко выделены, с подсказкой и предлагаемым решением.
    • +
  • ошибки пользователя чётко выделены, с подсказкой и предлагаемым решением.

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

    -

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

    +

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

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

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

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

    -

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

    +

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

    • Вы пытаетесь "модифицировать" доступность на существующем сайте, который имеет значительные проблемы в этом плане.
      • @@ -143,13 +143,13 @@ original_slug: Learn/Доступность/What_is_accessibility
    • Мои интерфейсные кнопки доступны с помощью клавиатуры и сенсорного интерфейса?
    -

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

    +

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

    -

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

    +

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

    -

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

    +

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

    -

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

    +

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

    Note: В нашей статье «Об общих проблемах доступности» рассматриваются особенности доступности, которые необходимо протестировать более подробно.

    @@ -160,7 +160,7 @@ original_slug: Learn/Доступность/What_is_accessibility
    • Думайте о доступности с самого начала проекта, тестируйте рано и часто. Как и любая другая ошибка, проблема доступности становится более дорогой, чтобы исправлять её позже.
    • Имейте в виду, что многие рекомендации по доступности выгодны всем, а не только пользователям с ограниченными возможностями. Например, семантическая разметка полезна не только для программ чтения с экрана, но и для быстрой загрузки и повышения производительности, так лучше для всех, особенно для мобильных устройств, и/или для медленных соединений.
      • -
    • Опубликуйте заявление о доступности на своем сайте и общайтесь с людьми, у которых есть проблемы.
      • +
    • Опубликуйте заявление о доступности на своём сайте и общайтесь с людьми, у которых есть проблемы.

    Руководство по доступности и закон

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

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

      -
    • Для начала, W3C опубликовал большой и очень подробный документ, который включает в себя очень точные, независимые от технологии критерии соответствия доступности. Они называются Рекомендациями по доступности веб-контента (Web Content Accessibility Guidelines — WCAG), и они никоим образом не являются кратким описанием. Критерии разделяются на четыре основные категории, которые определяют, как реализации можно сделать восприимчивыми, работоспособными, понятными и устойчивыми. Лучшее место, чтобы получить легкое представление и начать обучение это WCAG at a Glance. Нет необходимости изучать WCAG наизусть — знайте об основных проблемных областях и используйте различные методы и инструменты, чтобы выделить любые области, которые не соответствуют критериям WCAG (подробнее см. ниже).
      • +
    • Для начала, W3C опубликовал большой и очень подробный документ, который включает в себя очень точные, независимые от технологии критерии соответствия доступности. Они называются Рекомендациями по доступности веб-контента (Web Content Accessibility Guidelines — WCAG), и они никоим образом не являются кратким описанием. Критерии разделяются на четыре основные категории, которые определяют, как реализации можно сделать восприимчивыми, работоспособными, понятными и устойчивыми. Лучшее место, чтобы получить лёгкое представление и начать обучение это WCAG at a Glance. Нет необходимости изучать WCAG наизусть — знайте об основных проблемных областях и используйте различные методы и инструменты, чтобы выделить любые области, которые не соответствуют критериям WCAG (подробнее см. ниже).
    • В вашей стране также может быть предусмотрено специальное законодательство, регулирующее необходимость обеспечения доступности веб-сайтов, обслуживающих их население, например, Раздел 508 Закона о реабилитации в США, Федеральное постановление о безбарьерных информационных технологиях в Германии, Закон о равенстве в Великобритании, Accessibilità в Италии, Закон о дискриминации инвалидов в Австралии и т.д.

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

    -

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

    +

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

    Специальные API доступа

    @@ -190,11 +190,11 @@ original_slug: Learn/Доступность/What_is_accessibility
  • iOS: UIAccessibility
    • -

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

    +

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

    Заключение

    -

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

    +

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

    {{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

    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 0a2c769828..b9ef48555c 100644 --- a/files/ru/learn/common_questions/available_text_editors/index.html +++ b/files/ru/learn/common_questions/available_text_editors/index.html @@ -28,7 +28,7 @@ translation_of: Learn/Common_questions/Available_text_editors

    Summary

    -

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

    +

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

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

    @@ -43,7 +43,7 @@ translation_of: Learn/Common_questions/Available_text_editors
  • Имеет ли смысл мой текстовый редактор для меня?
    • -

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

    +

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

    Here are some popular editors:

    @@ -211,7 +211,7 @@ translation_of: Learn/Common_questions/Available_text_editors

    С какой ОС (операционной системой) я хочу работать?

    -

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

    +

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

    So first find out which OS you're using, and then check if a given editor supports your OS. Most editors specify on their website whether they support Windows or Mac, though some editors only support certain versions (say, only Windows 7 or later and not Vista). If you're running Ubuntu, your best bet is to search within the Ubuntu Software Center. In general, of course, the Linux/UNIX world is a pretty diverse place where different distros work with different, incompatible packaging systems. That means, if you've set your heart on an obscure text editor, you may have to compile it from source yourself (not for the faint-hearted).

    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 8486ff757f..7b3ceb5b95 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 @@ -29,15 +29,15 @@ translation_of: Learn/Common_questions/Design_for_all_types_of_users

    Краткое описание

    -

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

    +

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

    Более глубокое изучение

    Цветовой контраст

    -

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

    +

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

    -

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

    +

    {{Glossary("W3C")}} определяет хорошее сочетание цветов с помощью алгоритма, который вычисляет соотношение яркости между передним и задним планом. Расчёт может показаться довольно сложным, но мы можем положиться на инструменты, которые сделают эту работу за нас.

    Давайте загрузим и установим анализатор цветового контраста Paciello Group.

    @@ -64,7 +64,7 @@ translation_of: Learn/Common_questions/Design_for_all_types_of_users

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

    -

    Однако, на протяжении многих лет Internet Explorer категорически отображается 16 на 16 пикселей. В этом случае масштабирование ничего не дало, даже в последнем Internet Explorer 8, который нам все еще приходится обслуживать, потому что он все еще существует.

    +

    Однако, на протяжении многих лет Internet Explorer категорически отображается 16 на 16 пикселей. В этом случае масштабирование ничего не дало, даже в последнем Internet Explorer 8, который нам все ещё приходится обслуживать, потому что он все ещё существует.

    Относительные единицы

    @@ -74,14 +74,14 @@ translation_of: Learn/Common_questions/Design_for_all_types_of_users
    Процентные размеры: %
    -
    Этот блок сообщает вашему браузеру, что размер шрифта элемента должен составлять N% от предыдущего элемента, размер шрифта которого был выражен. Если родитель не найден, то размер шрифта по умолчанию в браузере считается базовым размером для расчета (обычно эквивалентным 16 пикселям).
    +
    Этот блок сообщает вашему браузеру, что размер шрифта элемента должен составлять N% от предыдущего элемента, размер шрифта которого был выражен. Если родитель не найден, то размер шрифта по умолчанию в браузере считается базовым размером для расчёта (обычно эквивалентным 16 пикселям).
    Em размеры: em
    Эта единица вычисляется так же, как и проценты, за исключением того, что вы вычисляете в частях 1, а не в частях 100. Говорят, что "em" - это ширина заглавной буквы “М” в алфавите (грубо говоря, буква “М” вписывается в квадрат).
    Rem размеры: rem
    Эта единица измерения пропорциональна размеру шрифта корневого элемента и выражается в виде частей, таких как em.
    -

    Предположим, что нам нужен базовый размер шрифта 16px и h1 (основной заголовок) в эквиваленте 32px, но если в пределах h1 мы найдем промежуток с классом подзаголовков, он тоже должен быть отрисован с размером шрифта по умолчанию (обычно 16px).

    +

    Предположим, что нам нужен базовый размер шрифта 16px и h1 (основной заголовок) в эквиваленте 32px, но если в пределах h1 мы найдём промежуток с классом подзаголовков, он тоже должен быть отрисован с размером шрифта по умолчанию (обычно 16px).

    Вот HTML, который мы используем:

    @@ -131,22 +131,22 @@ span.subheading { font-size:1rem; } /* исходный размер */

    Почему мне следует использовать пропорциональные единицы измерения?

    -

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

    +

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

    Мы бы посоветовали следующее:

    • Опишите шрифты в единицах rem, большинство браузеров будут очень довольны ими;
      • -
    • Пусть старые браузеры отображают шрифты со своим собственным внутренним движком. Браузерные движки будут игнорировать любое свойство или значение в CSS, если они не могут справиться с ними, так что ваш сайт все еще может быть непригодным для использования, если он не соответствует видению вашего дизайнера. Старые браузеры в любом случае находятся на пути к выходу из использования.
      • +
    • Пусть старые браузеры отображают шрифты со своим собственным внутренним движком. Браузерные движки будут игнорировать любое свойство или значение в CSS, если они не могут справиться с ними, так что ваш сайт все ещё может быть непригодным для использования, если он не соответствует видению вашего дизайнера. Старые браузеры в любом случае находятся на пути к выходу из использования.
    -

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

    +

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

    Длина строки

    -

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

    +

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

    Конечно, проблема не исчезает, когда мы переключаемся на интернет. Глаза читателя действуют как челнок, идущий от строки к строке. Чтобы сделать чтение проще для глаз людей, ограничьте ширину строки примерно 60 или 70 символами.

    @@ -197,7 +197,7 @@ span.subheading { font-size:1rem; } /* исходный размер */
    Они используются для передачи информации, отсюда и их название. Они могут, например, показать график, жест человека или любую другую информацию. Как минимум, вы должны предоставить соответствующий атрибут alt.
    -

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

    +

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

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

    @@ -209,14 +209,14 @@ span.subheading { font-size:1rem; } /* исходный размер */
    Субтитры / закрытие субтитров
    -
    Вы должны включить подписи в свое видео, чтобы угодить посетителям, которые не могут слышать звук. Некоторые пользователи имеют проблемы со слухом, не имеют функционирующих динамиков или работают в шумной среде (например, в поезде).
    +
    Вы должны включить подписи в своё видео, чтобы угодить посетителям, которые не могут слышать звук. Некоторые пользователи имеют проблемы со слухом, не имеют функционирующих динамиков или работают в шумной среде (например, в поезде).
    Расшифровка
    Субтитры работают только в том случае, если кто-то смотрит видео. Многие пользователи не имеют времени или не имеют соответствующего плагина или кодека. Кроме того, поисковые системы полагаются в основном на текст для индексации вашего контента. По всем этим причинам, пожалуйста, предоставьте текстовую расшифровку видео / аудиофайла.

    Сжатие изображения

    -

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

    +

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

    • Устанавливаемое программное обеспечение. ImageOptim (Mac), OptiPNG (все платформы), PNGcrush (DOS, Unix/Linux)
      • diff --git a/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html b/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html index 8cc55f9d12..449e24f887 100644 --- a/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html +++ b/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html @@ -7,7 +7,7 @@ translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_Ap

      Создание проекта Google Cloud Platform

      -

      Чтобы использовать инструменты Google для своего собственного сайта или приложения, вам нужно создать новый проект на Google Cloud Platform. Для этого требуется наличие учетной записи Google.

      +

      Чтобы использовать инструменты Google для своего собственного сайта или приложения, вам нужно создать новый проект на Google Cloud Platform. Для этого требуется наличие учётной записи Google.

      1. Перейдите на панель App Engine dashboard в консоли Google Cloud Platform и нажмите кнопку «Создать» (Create).
        2. @@ -17,7 +17,7 @@ translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_Ap
      2. Project ID: gaesamplesite
    -
  • Если вы еще не создали проект раньше, вам нужно будет выбрать, хотите ли вы получать обновления электронной почты или нет, соглашайтесь с Условиями обслуживания, а затем вы можете нажать кнопку «Создать», чтобы создать свой проект.
    • +
  • Если вы ещё не создали проект раньше, вам нужно будет выбрать, хотите ли вы получать обновления электронной почты или нет, соглашайтесь с Условиями обслуживания, а затем вы можете нажать кнопку «Создать», чтобы создать свой проект.

    • Создание приложения

    @@ -50,7 +50,7 @@ translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_Ap
  • Теперь вы готовы развернуть ваше приложение, т.е. загрузить его в App Engine: 
    gcloud app deploy
    • -
  • Введите число от одного до семи, чтобы выбрать регион, в котором вы хотите разместить свое приложение.
    • +
  • Введите число от одного до семи, чтобы выбрать регион, в котором вы хотите разместить своё приложение.
  • Нажмите Y для подтверждения.
  • Теперь перейдите по ссылке your-project-id.appspot.com, чтобы увидеть ваш сайт. Например, для проекта с ID gaesamplesite, перейдите по ссылке gaesamplesite.appspot.com.
    • diff --git a/files/ru/learn/common_questions/how_does_the_internet_work/index.html b/files/ru/learn/common_questions/how_does_the_internet_work/index.html index 225ee71401..267946416f 100644 --- a/files/ru/learn/common_questions/how_does_the_internet_work/index.html +++ b/files/ru/learn/common_questions/how_does_the_internet_work/index.html @@ -19,12 +19,12 @@ original_slug: Learn/How_the_Internet_works Необходимые знания: - Отсутствуют, но мы будем признательны, если вы сначала прочтете Материал о там как начать разрабатывать свой сайт + Отсутствуют, но мы будем признательны, если вы сначала прочтёте Материал о там как начать разрабатывать свой сайт Цель: -

    Вы изучите основы технической инфраструктуры Веба и поймете разницу между Вебом и интернетом. 

    +

    Вы изучите основы технической инфраструктуры Веба и поймёте разницу между Вебом и интернетом. 

    @@ -34,7 +34,7 @@ original_slug: Learn/How_the_Internet_works

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

    -

    История интернета не до конца ясна. Проект по созданию интернета был начат в 60-х годах как исследовательский проект при поддержке министерства обороны США, но уже в 80-е годы вырос в сеть, которую поддерживали и развивали множество университетов и частных компаний. Технологии, лежащие в основе интернета, также продолжали развиваться со временем, но основной принцип работы не сильно изменился: Интернет - это способ подключить компьютеры в единую сеть и убедиться, что даже при серьезных сбоях, они все равно найдут способ связаться друг с другом.

    +

    История интернета не до конца ясна. Проект по созданию интернета был начат в 60-х годах как исследовательский проект при поддержке министерства обороны США, но уже в 80-е годы вырос в сеть, которую поддерживали и развивали множество университетов и частных компаний. Технологии, лежащие в основе интернета, также продолжали развиваться со временем, но основной принцип работы не сильно изменился: Интернет - это способ подключить компьютеры в единую сеть и убедиться, что даже при серьёзных сбоях, они все равно найдут способ связаться друг с другом.

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

    @@ -74,7 +74,7 @@ original_slug: Learn/How_the_Internet_works

    Routers linked to routers

    -

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

    +

    Такая сеть уже очень похожа на то, что мы называем интернетом, но мы что-то упустили. Наша сеть построена для решения только наших задач. Но кроме неё есть и другие сети: наши друзья, соседи — кто угодно может создать свою сеть. Как же нам их объединить? Мы не можем протянуть кабели между нашим домом и всеми остальными сетями в мире. Чтобы решить эту проблему, мы можем воспользоваться уже существующими кабельными сетями. Ведь у нас дома уже есть кабели, например, электрические или телефонные. Телефонный провод уже соединяет ваш дом со всем остальным миром, так что он идеально подходит для решения нашей задачи. Чтобы подключить нашу сеть к глобальной сети с помощью телефонного провода, нам понадобится специальное оборудование, которое называется модем. Модем перекодирует информацию, поступающую из нашей сети в формат, который можно передавать через телефонную сеть, и наоборот, декодируют информацию из телефонной сети в формат, который распознают наши компьютеры.

    A router linked to a modem

    @@ -84,7 +84,7 @@ original_slug: Learn/How_the_Internet_works

    Поиск компьютера

    -

    Чтобы послать сообщение какому-то компьютеру, необходимо как-то обратиться к нему, выделить среди других. Поэтому каждый компьютер, подключенный к сети, имеет свой уникальный адрес для связи: этот адрес называют IP-адресом (IP — сокращение для Internet Protocol, протокол интернета). В зависимости от версии протокола IP этот адрес может записываться по-разному. Самая широко используемая версия интернет-протокола — версия 4. Адреса IPv4 обычно записываются в виде четырёх чисел, разделенных точками, например: 192.168.2.10.

    +

    Чтобы послать сообщение какому-то компьютеру, необходимо как-то обратиться к нему, выделить среди других. Поэтому каждый компьютер, подключённый к сети, имеет свой уникальный адрес для связи: этот адрес называют IP-адресом (IP — сокращение для Internet Protocol, протокол интернета). В зависимости от версии протокола IP этот адрес может записываться по-разному. Самая широко используемая версия интернет-протокола — версия 4. Адреса IPv4 обычно записываются в виде четырёх чисел, разделённых точками, например: 192.168.2.10.

    Такие адреса отлично подходят для компьютеров, но людям очень сложно их запоминать. Чтобы упростить себе жизнь, мы можем присвоить каждому IP-адресу псевдоним с понятным для человека именем. Такой псевдоним называют доменным именем. Например, google.com — доменное имя, которое является псевдонимом IP-адреса 173.194.121.32. Использование доменного имени — самый простой способ обратиться к компьютеру в интернете.

    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 b830480208..ccd18619af 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 @@ -1,5 +1,5 @@ --- -title: Насколько дорого обойдется сделать что-то с помощью Web? +title: Насколько дорого обойдётся сделать что-то с помощью Web? slug: Learn/Common_questions/How_much_does_it_cost tags: - Хостинг @@ -8,7 +8,7 @@ tags: translation_of: Learn/Common_questions/How_much_does_it_cost ---
    -

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

    +

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

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

    Для начала, мы предлагаем вам попробовать несколько редакторов, чтобы понять, какой из них подходит лучше вам. Если вы пишите лишь простые {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("Javascript")}}, используйте простой редактор.

    -

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

    +

    Цена не влияет на качество или полезность текстового редактора. Вам необходимо попробовать и решить какой из них отвечает вашим потребностям. К примеру, Sublime Text дешёвый, но поставляется с множеством бесплатных плагинов которые могут здорово расширить его функциональность.

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

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

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

    -

    Вы можете использовать любой из них, так как они имеют похожую функциональность, хотя некоторые из них настолько всеобъемлющие, что вы никогда не сможете использовать весь их функционал. Если в какой то момент вам необходимо обменяться проектами с другими дизайнерами, то вам следует выяснить, какие инструменты они используют. Редакторы могут экспортировать законченные проекты в стандартные форматы, но каждый редактор сохраняет текущие проекты в своем собственном, специализированном формате. Большинство изображений в интернете защищены авторским правом, так что лучше проверить лицензию файла, перед его использованием. Такие сайты, как Pixabay, предоставляют изображения под лицензией Creative Commons Zero, так что вы можете использовать, редактировать, и даже публиковать их после изменения, ради коммерческой выгоды.

    +

    Вы можете использовать любой из них, так как они имеют похожую функциональность, хотя некоторые из них настолько всеобъемлющие, что вы никогда не сможете использовать весь их функционал. Если в какой то момент вам необходимо обменяться проектами с другими дизайнерами, то вам следует выяснить, какие инструменты они используют. Редакторы могут экспортировать законченные проекты в стандартные форматы, но каждый редактор сохраняет текущие проекты в своём собственном, специализированном формате. Большинство изображений в интернете защищены авторским правом, так что лучше проверить лицензию файла, перед его использованием. Такие сайты, как Pixabay, предоставляют изображения под лицензией Creative Commons Zero, так что вы можете использовать, редактировать, и даже публиковать их после изменения, ради коммерческой выгоды.

    Медиа редакторы

    @@ -56,9 +56,9 @@ translation_of: Learn/Common_questions/How_much_does_it_cost

    Инструменты публикации

    -

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

    +

    Вам также потребуется возможность выгрузки файлов: с вашего жёсткого диска на удалённый веб-сервер. Чтобы осуществить это, вам потребуется утилита для публикации, такая как (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, и другие.

    @@ -76,22 +76,22 @@ translation_of: Learn/Common_questions/How_much_does_it_cost

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

    -

    Вам потребуется загружать контент на удаленный сервер (см. ниже Хостинг), а значит вам потребуется модем. Ваш {{Glossary("ISP", "провайдер")}} может предоставлять доступ в интернет вам за пару долларов в месяц, однако, это также зависит от места вашего проживания.

    +

    Вам потребуется загружать контент на удалённый сервер (см. ниже Хостинг), а значит вам потребуется модем. Ваш {{Glossary("ISP", "провайдер")}} может предоставлять доступ в интернет вам за пару долларов в месяц, однако, это также зависит от места вашего проживания.

    Доступ по провайдеру

    Убедитесь что у вас достаточная {{Glossary("Bandwidth", "скорость передачи данных")}}:

      -
    • Доступ с низкой пропускной способностью может быть приемлем для простого веб-сайта: изображения, тексты, немного CSS и JavaScript. Это, вероятно, обойдется вам в пару долларов, включая аренду модема.
      • -
    • С другой стороны, вам потребуется соединения с высокой пропускной способностью, такие как DSL, оптоволокно, если вы хотите более сложный веб-сайт с сотнями файлов, или если вы хотите предоставить доступ к тяжелым видео/аудио файлам напрямую с вашего веб-сервера. Это может стоить столько же, сколько при соединении с низкой пропускной способностью, а может вырасти до пары сотен долларов в месяц, за более профессиональные потребности.
      • +
    • Доступ с низкой пропускной способностью может быть приемлем для простого веб-сайта: изображения, тексты, немного CSS и JavaScript. Это, вероятно, обойдётся вам в пару долларов, включая аренду модема.
      • +
    • С другой стороны, вам потребуется соединения с высокой пропускной способностью, такие как DSL, оптоволокно, если вы хотите более сложный веб-сайт с сотнями файлов, или если вы хотите предоставить доступ к тяжёлым видео/аудио файлам напрямую с вашего веб-сервера. Это может стоить столько же, сколько при соединении с низкой пропускной способностью, а может вырасти до пары сотен долларов в месяц, за более профессиональные потребности.

    Хостинг

    Понимание пропускной способности

    -

    Хостинг-провайдеры взимают плату в зависимости от того, сколько {{Glossary("Bandwidth", "bandwidth")}} ваш веб-сайт потребил. Это зависит от того как много людей и бот-сканеров получали доступ к вашему контенту за определенный промежуток времени, и, как много серверного пространства этот контент занимает. Вот почему многие люди, обычно, размещают их видео на удаленных сервисах, таких как Youtube, Dailymotion, и Vimeo. Например, ваш провайдер может иметь план, который позволяет выдерживать до нескольких тысяч посетителей в день. Однако, будьте осторожны, так как это условие меняется от одного провайдера к другому. Возьмите за правило, что надежный, платный персональный хостинг может стоить около 10-15 долларов в месяц.

    +

    Хостинг-провайдеры взимают плату в зависимости от того, сколько {{Glossary("Bandwidth", "bandwidth")}} ваш веб-сайт потребил. Это зависит от того как много людей и бот-сканеров получали доступ к вашему контенту за определённый промежуток времени, и, как много серверного пространства этот контент занимает. Вот почему многие люди, обычно, размещают их видео на удалённых сервисах, таких как Youtube, Dailymotion, и Vimeo. Например, ваш провайдер может иметь план, который позволяет выдерживать до нескольких тысяч посетителей в день. Однако, будьте осторожны, так как это условие меняется от одного провайдера к другому. Возьмите за правило, что надёжный, платный персональный хостинг может стоить около 10-15 долларов в месяц.

    Заметьте, что не существует такого понятия, как "неограниченная пропускная способность". Если вы использовали огромное количество трафика, будьте готовы выплатить огромную сумму денег.

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

    Доменные имена

    -

    Ваше доменное имя должно быть приобретено через провайдера доменных имен (регистратор). Ваш хостинг-провайдер может также быть регистратором (1&1, Gandi, например, являются в одно и тоже время регистраторами и хостинг-провайдерами). Доменное имя обычно имеет стоимость в $5-15 за год. Эта цена варьируется в зависимости от:

    +

    Ваше доменное имя должно быть приобретено через провайдера доменных имён (регистратор). Ваш хостинг-провайдер может также быть регистратором (1&1, Gandi, например, являются в одно и тоже время регистраторами и хостинг-провайдерами). Доменное имя обычно имеет стоимость в $5-15 за год. Эта цена варьируется в зависимости от:

    • Местных обязательств: В некоторых странах домены верхнего уровня стоят дороже, так как разные страны устанавливают различные цены.
      • @@ -110,7 +110,7 @@ translation_of: Learn/Common_questions/How_much_does_it_cost

      Когда вы хотите опубликовать веб-сайт, вы можете сделать все самостоятельно: настроить базу данных (если требуется), Систему управления наполнением, или {{Glossary("CMS")}} (такую как Wordpress, Dotclear, spip, и тд.), загружать заранее подготовленные вами шаблоны.

      -

      Вы можете использовать среду хостинг-провайдера, примерно за 10-15 долларов в месяц, или подписаться напрямую к удаленному хостинг-сервису с предустановленным CMSs (такие как, Wordpress, Tumblr, Blogger). В последнем случае, вам не придется платить ни за что, но вы будете иметь меньше контроля над шаблонами и другими элементами.

      +

      Вы можете использовать среду хостинг-провайдера, примерно за 10-15 долларов в месяц, или подписаться напрямую к удалённому хостинг-сервису с предустановленным CMSs (такие как, Wordpress, Tumblr, Blogger). В последнем случае, вам не придётся платить ни за что, но вы будете иметь меньше контроля над шаблонами и другими элементами.

      Бесплатный хостинг vs. платный

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

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

    +

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

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

    @@ -142,9 +142,9 @@ translation_of: Learn/Common_questions/How_much_does_it_cost

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

      -
    • Хотите ли вы иметь резервный сервер, если вдруг ваш упадет?
      • -
    • Надежность 95%, или вам требуется круглосуточный сервис обслуживания?
      • -
    • Вам нужны высокопроизводительные, сверхчувствительные удаленные серверы или вам будет достаточно более медленной, машиной, предназначенной для совместного использования.
      • +
    • Хотите ли вы иметь резервный сервер, если вдруг ваш упадёт?
      • +
    • Надёжность 95%, или вам требуется круглосуточный сервис обслуживания?
      • +
    • Вам нужны высокопроизводительные, сверхчувствительные удалённые серверы или вам будет достаточно более медленной, машиной, предназначенной для совместного использования.

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

    diff --git a/files/ru/learn/common_questions/index.html b/files/ru/learn/common_questions/index.html index 99127001de..325d2791d6 100644 --- a/files/ru/learn/common_questions/index.html +++ b/files/ru/learn/common_questions/index.html @@ -78,7 +78,7 @@ translation_of: Learn/Common_questions

    Как загрузить файлы на веб-сервер?

    -
    В этой статье показано, как публиковать свой сайт в Интернете с помощью инструментов FTP - одним из самых распространенных способов сделать сайт общедоступным, чтобы другие пользователи могли получить доступ к нему со своих компьютеров.
    +
    В этой статье показано, как публиковать свой сайт в Интернете с помощью инструментов FTP - одним из самых распространённых способов сделать сайт общедоступным, чтобы другие пользователи могли получить доступ к нему со своих компьютеров.

    Как использовать GitHub Pages?

    @@ -105,7 +105,7 @@ translation_of: Learn/Common_questions

    Какова структура наиболее используемых макетов сайтов?

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

    Что такое удобство использования?

    @@ -125,7 +125,7 @@ translation_of: Learn/Common_questions

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

    diff --git a/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html index 38139a33b7..a7a189fb93 100644 --- a/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html +++ b/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -12,7 +12,7 @@ translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines original_slug: Learn/Pages_sites_servers_and_search_engines ---
    -

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

    +

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

    @@ -53,7 +53,7 @@ original_slug: Learn/Pages_sites_servers_and_search_engines

    Погружаемся глубже

    -

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

    +

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

    Веб-страница

    @@ -69,7 +69,7 @@ original_slug: Learn/Pages_sites_servers_and_search_engines

    Примечание: браузеры зачастую могут отображать некоторые документы в формате PDF файла или изображения, но термин веб-страница больше относится непосредственно к HTML-документам. До конца статьи, в данном случае, мы будем использовать понятие  документ.

    -

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

    +

    Все веб-страницы в сети имеют свой уникальный адрес. Чтобы получить доступ к нужной странице просто наберите её адрес в адресной строке Вашего браузера:

    Example of a web page address in the browser address bar

    @@ -95,17 +95,17 @@ original_slug: Learn/Pages_sites_servers_and_search_engines

    Веб-сервер

    -

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

    +

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

    -

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

    +

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

    Поисковая система

    -

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

    +

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

    -

    Наиболее популярные поисковые системы: Google, Bing, Yandex, DuckDuckGo, и многие другие. Некоторые из них универсальны, а какие-то ориентированы на определенную область. Используйте тот поисковик, который удобен Вам.

    +

    Наиболее популярные поисковые системы: Google, Bing, Yandex, DuckDuckGo, и многие другие. Некоторые из них универсальны, а какие-то ориентированы на определённую область. Используйте тот поисковик, который удобен Вам.

    -

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

    +

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

    Ниже пример того, как браузер Firerox по умолчанию отображает окно поиска Google на стартовой (домашней) странице:

    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 107fde3801..b83a09368d 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 @@ -22,15 +22,15 @@ 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).
      • @@ -62,7 +62,7 @@ translation_of: Learn/Common_questions/set_up_a_local_testing_server 
      python -V
    • -

      Система вернет Вам номер версии установленной программы. В случае успешного выполнения команды python -V  нужно перейти в директорию с вашим проектом, используя команду cd:

      +

      Система вернёт Вам номер версии установленной программы. В случае успешного выполнения команды python -V  нужно перейти в директорию с вашим проектом, используя команду cd:

      # include the directory name to enter it, for example
 cd Desktop
@@ -78,7 +78,7 @@ python -m http.server
 python -m SimpleHTTPServer
    • -

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

      +

      По умолчанию это приведёт к запуску содержимого каталога на локальном веб-сервере на порту 8000. Вы можете перейти на этот сервер, перейдя на URL-адрес localhost: 8000 в своём веб-браузере. Здесь вы увидите содержимое указанного каталога - щёлкните файл HTML, который вы хотите запустить.

      • @@ -91,7 +91,7 @@ python -m SimpleHTTPServer

      Модуль Python SimpleHTTPServer (python 2.0) http.server (python 3.0) полезен, но он не знает, как запускать код, написанный на таких языках, как Python, PHP или JavaScript. Чтобы справиться с этим, вам понадобится нечто большее - именно то, что вам нужно, зависит от языка сервера, который вы пытаетесь запустить. Вот несколько примеров:

        -
      • Для запуска кода на стороне сервера Python вам необходимо использовать веб-инфраструктуру Python. Вы можете узнать, как использовать структуру Django, прочитав Django Web Framework (Python). Flask также является хорошей (чуть менее тяжелой) альтернативой Django. Чтобы запустить это, ознакомьтесь с install Python/PIP, а затем установите Flask с помощью pip3 install flask. На этом этапе вы сможете запустить примеры Python Flask, используя, например, python3 python-example.py, затем перейдя на localhost: 5000 в свой браузер.
        • +
      • Для запуска кода на стороне сервера Python вам необходимо использовать веб-инфраструктуру Python. Вы можете узнать, как использовать структуру Django, прочитав Django Web Framework (Python). Flask также является хорошей (чуть менее тяжёлой) альтернативой Django. Чтобы запустить это, ознакомьтесь с install Python/PIP, а затем установите Flask с помощью pip3 install flask. На этом этапе вы сможете запустить примеры Python Flask, используя, например, python3 python-example.py, затем перейдя на localhost: 5000 в свой браузер.
      • Чтобы запустить серверный код Node.js (JavaScript), вам нужно использовать Node.js или фреймворк, построенный поверх него. Express - хороший выбор - см. Express Web Framework (Node.js/JavaScript).
      • Чтобы запустить PHP-серверный код, вам понадобится настройка сервера, которая может интерпретировать PHP. Хорошими вариантами для локального тестирования PHP являются MAMP (Mac и Windows), AMPPS (Mac, Windows, Linux) и LAMP (Linux, Apache, MySQL и PHP / Python / Perl). Это полные пакеты, которые создают локальные настройки, позволяющие запускать базы данных Apache, PHP и MySQL.
      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 f10459aee6..ab8ad9f053 100644 --- a/files/ru/learn/common_questions/thinking_before_coding/index.html +++ b/files/ru/learn/common_questions/thinking_before_coding/index.html @@ -27,7 +27,7 @@ translation_of: Learn/Common_questions/Thinking_before_coding

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

      -

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

      +

      Так что когда у вас появляется какая-то идея и желание воплотить её в web-сайте, вам необходимо ответить на 3 простых вопроса, и уже потом предпринимать что-либо иное :

      • Что я хочу в конце-концов получить?
        • @@ -39,7 +39,7 @@ translation_of: Learn/Common_questions/Thinking_before_coding

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

        -

        На данный момент этот раздел еще не готов. Вы можете помочь сообществу разработчиков, вступив в Please, consider contributing.

        +

        На данный момент этот раздел ещё не готов. Вы можете помочь сообществу разработчиков, вступив в Please, consider contributing.

        Более глубокое погружение

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

        Что же в конце концов я хочу получить?

        -

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

        +

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

        Представьте себя музыкантом. Должно быть, вы хотите:

        @@ -87,21 +87,21 @@ translation_of: Learn/Common_questions/Thinking_before_coding

        Как сайт поможет мне в достижении цели?

        -

        И так, у вас есть конкретная цель и вам кажется, что для ее достижения нужен веб-сайт. Вы уверены?

        +

        И так, у вас есть конкретная цель и вам кажется, что для её достижения нужен веб-сайт. Вы уверены?

        -

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

        +

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

        -

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

        +

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

        -

        Оставшиеся пять задач непосредственно связанны с музыкой. Конечно же, на данный момент уже достаточно сайтов, обладающих подобным функционалом, но в текущем контексте имеет смысл создать сайт, посвященный именно вам. Прежде всего, сайт - это лучший способ чтобы собрать все, что мы хотим опубликовать, в одном месте (для решения проблем под номерами 3, 5 и 6) и создать среду для взаимодействия между нами и публикой (для решения проблем 2 и 4). Если проще, то так как все эти задачи из одной области, содержание всего в одном месте (веб-сайте) поможет нам в достижении целей, а также поможет нашим поклонникам связаться с нами.

        +

        Оставшиеся пять задач непосредственно связанны с музыкой. Конечно же, на данный момент уже достаточно сайтов, обладающих подобным функционалом, но в текущем контексте имеет смысл создать сайт, посвящённый именно вам. Прежде всего, сайт - это лучший способ чтобы собрать все, что мы хотим опубликовать, в одном месте (для решения проблем под номерами 3, 5 и 6) и создать среду для взаимодействия между нами и публикой (для решения проблем 2 и 4). Если проще, то так как все эти задачи из одной области, содержание всего в одном месте (веб-сайте) поможет нам в достижении целей, а также поможет нашим поклонникам связаться с нами.

        -

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

        +

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

        Что и в какие сроки должно быть реализовано для достижения целей?

        -

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

        +

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

        -

        Как водится, лучше один раз увидеть, чем сто раз услышать, так что вернемся к нашему примеру:

        +

        Как водится, лучше один раз увидеть, чем сто раз услышать, так что вернёмся к нашему примеру:

        @@ -147,7 +147,7 @@ translation_of: Learn/Common_questions/Thinking_before_coding
      • Приготовить их
      • Разместить в магазине
      • Найти способ доставки
        • -
      • Определиться с платежной системой
        • +
      • Определиться с платёжной системой
      • Добавить способ делать заказы на вашем сайте
        • @@ -167,10 +167,10 @@ 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 8bb146c8a3..44b935aafb 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 @@ -55,7 +55,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server

        demozilla.examplehostingprovider.net

        -

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

        +

        Для загрузки файлов на этот аккаунт, пожалуйста, подключитесь через SFTP с использованием следующих учётных данных:

        • SFTP сервер: sftp://demozilla.examplehostingprovider.net
          • @@ -74,7 +74,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server

          Заметка: В зависимости от вашего хостинг-провайдера, когда вы впервые заходите на свой веб-адрес, большую часть времени вы будете видеть страницу, на которой написано что-то вроде этого: “This website is hosted by [Hosting Service].”

          -

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

          +

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

          1. Выберите File > Site Manager... в главном меню.
            2. @@ -92,7 +92,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server

            Заметка: Убедитесь, что ваш хостинг-провайдер предлагает SFTP (безопасный FTP) подключение к вашему хостинговому пространству. FTP по своей сути небезопасен, и вам не следует его использовать.

            -

            Здесь и там: локальный и удаленный просмотр

            +

            Здесь и там: локальный и удалённый просмотр

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

            @@ -100,7 +100,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server
            • По центру левой панели вы можете видеть локальные файлы. Перейдите в каталог, в котором вы храните свой веб-сайт (например, mdn).
              • -
            • По центру правой панели вы увидеть удаленные файлы. Мы вошли в наш удаленный корень FTP (в данном случае: users/demozilla)
              • +
            • По центру правой панели вы увидеть удалённые файлы. Мы вошли в наш удалённый корень FTP (в данном случае: users/demozilla)
            • Вы можете пока игнорировать нижнюю и верхнюю панели. Соответственно, это журнал сообщений, показывающий состояние соединения между вашим компьютером и SFTP-сервером, и журнал в реальном времени каждого взаимодействия между вашим SFTP-клиентом и сервером.
            @@ -108,7 +108,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server

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

            -

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

            +

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

            Как узнать, что они online?

            diff --git a/files/ru/learn/common_questions/using_github_pages/index.html b/files/ru/learn/common_questions/using_github_pages/index.html index d32300b1fe..b4d4c2e05c 100644 --- a/files/ru/learn/common_questions/using_github_pages/index.html +++ b/files/ru/learn/common_questions/using_github_pages/index.html @@ -7,19 +7,19 @@ translation_of: Learn/Common_questions/Using_Github_pages

            Публикация контента

            -

            GitHub - очень важное и полезное сообщество для участия, а Git/GitHub - очень популярная система управления версиями (version control system) - большинство технологических компаний теперь используют ее в своем рабочем процессе. GitHub имеет очень полезную функцию GitHub Pages, которая позволяет публиковать код сайта в прямом эфире в Интернете.

            +

            GitHub - очень важное и полезное сообщество для участия, а Git/GitHub - очень популярная система управления версиями (version control system) - большинство технологических компаний теперь используют её в своём рабочем процессе. GitHub имеет очень полезную функцию GitHub Pages, которая позволяет публиковать код сайта в прямом эфире в Интернете.

            Базовая установка Github

            1. Прежде всего, установите Git на свой компьютер. Это базовое программное обеспечение для управления версиями, GitHub работает поверх него.
              2. -
            2. Затем зарегистрируйтесь в учетной записи GitHub. Это просто и легко.
              3. +
            3. Затем зарегистрируйтесь в учётной записи GitHub. Это просто и легко.
            4. После того, как вы зарегистрировались, войдите в github.com с вашим именем пользователя и паролем.

            Подготовка кода для загрузки

            -

            Вы можете хранить любой код, который вам нравится, в репозитории Github, но для полнофункционального использования функции GitHub Pages ваш код должен быть структурирован как типичный веб-сайт, причем основной точкой входа является HTML-файл с именем index.html.

            +

            Вы можете хранить любой код, который вам нравится, в репозитории Github, но для полнофункционального использования функции GitHub Pages ваш код должен быть структурирован как типичный веб-сайт, причём основной точкой входа является HTML-файл с именем index.html.

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

            @@ -35,7 +35,7 @@ translation_of: Learn/Common_questions/Using_Github_pages

            В сторону интерфейсов командной строки

            -

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

            +

            Лучший способ загрузить код в Github - через командную строку - это окно, в котором вы вводите команды, чтобы делать такие вещи, как создавать файлы и запускать программы, а не щёлкать внутри пользовательского интерфейса. Он будет выглядеть примерно так:

            @@ -46,7 +46,7 @@ translation_of: Learn/Common_questions/Using_Github_pages

            Каждая операционная система поставляется с инструментом командной строки:

              -
            • Windows: Командная строка (Command Prompt) может быть получена нажатием клавиши Windows, набрав Command Prompt и выбрав ее из появившегося списка. Обратите внимание, что Windows имеет свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведенные ниже команды могут отличаться на вашем компьютере.
              • +
            • Windows: Командная строка (Command Prompt) может быть получена нажатием клавиши Windows, набрав Command Prompt и выбрав её из появившегося списка. Обратите внимание, что Windows имеет свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
            • OS X: Терминал (Terminal) можно найти в Applications > Utilities.
            • Linux: Обычно вы можете вытащить терминал с помощью Ctrl + Alt + T. Если это не сработает, найдите Terminal в панели приложений или меню.
            @@ -60,14 +60,14 @@ translation_of: Learn/Common_questions/Using_Github_pages
          2. На этой странице в поле Имя репозитория (Repository name) введите имя для своего репозитория, например my-repository.
          3. Также добавьте описание, чтобы сказать, что будет содержать ваш репозиторий. Ваш экран должен выглядеть так:
            4. -
          4. Нажмите Создать репозиторий (Create repository); это приведет вас к следующей странице:
            +
          5. Нажмите Создать репозиторий (Create repository); это приведёт вас к следующей странице:

          Загрузка файлов на GitHub

            -
          1. На текущей странице вас интересует раздел …or push an existing repository from the command line (...или нажмите существующий репозиторий из командной строки). Вы должны увидеть две строки кода, перечисленные в этом разделе. Скопируйте всю первую строку, вставьте ее в командную строку и нажмите Enter. Команда должна выглядеть примерно так: +
          2. На текущей странице вас интересует раздел …or push an existing repository from the command line (...или нажмите существующий репозиторий из командной строки). Вы должны увидеть две строки кода, перечисленные в этом разделе. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так: 
            git remote add origin https://github.com/chrisdavidmills/my-repository.git
            3. @@ -78,9 +78,9 @@ git commit -m 'adding my files to my repository'
          3. Наконец, нажмите код до GitHub, перейдя на веб-страницу GitHub, на которой вы находитесь, и введите в терминал вторую из двух команд, которые мы увидели  …or push an existing repository from the command line: 
            git push -u origin master
            4. -
          4. Теперь вам нужно создать ветвь gh-pages вашего repo; обновите текущую страницу и вы увидите страницу репозитория, как показано ниже. Вам нужно нажать кнопку, в которой говорится о Branch: master, введите gh-pages в текстовом вводе, затем нажмите синюю кнопку с надписью Create branch: gh-pages. Это создает специальную ветвь кода, называемую gh-pages, которая публикуется в специальном месте. URL-адрес принимает форму username.github.io/my-repository-name, поэтому в моем примере URL-адрес будет https://chrisdavidmills.github.io/my-repository. Отображаемая страница - это страница index.html.
            +
          5. Теперь вам нужно создать ветвь gh-pages вашего repo; обновите текущую страницу и вы увидите страницу репозитория, как показано ниже. Вам нужно нажать кнопку, в которой говорится о Branch: master, введите gh-pages в текстовом вводе, затем нажмите синюю кнопку с надписью Create branch: gh-pages. Это создаёт специальную ветвь кода, называемую gh-pages, которая публикуется в специальном месте. URL-адрес принимает форму username.github.io/my-repository-name, поэтому в моем примере URL-адрес будет https://chrisdavidmills.github.io/my-repository. Отображаемая страница - это страница index.html.
            6. -
          6. Перейдите на веб-адрес GitHub Pages на новой вкладке браузера, и вы должны увидеть свой сайт онлайн! Отправьте его по электронной почте своим друзьям и продемонстрируйте свое мастерство.
            7. +
          7. Перейдите на веб-адрес GitHub Pages на новой вкладке браузера, и вы должны увидеть свой сайт онлайн! Отправьте его по электронной почте своим друзьям и продемонстрируйте своё мастерство.
          @@ -89,7 +89,7 @@ git commit -m 'adding my files to my repository'

          Дальнейшее знание GitHub

          -

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

          +

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

          git add --all
 git commit -m 'another commit'
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 c53a95d6ac..e422ec2bd6 100644
--- a/files/ru/learn/common_questions/what_are_hyperlinks/index.html
+++ b/files/ru/learn/common_questions/what_are_hyperlinks/index.html
@@ -37,11 +37,11 @@ original_slug: Learn/Understanding_links_on_the_web
  
        • {{Glossary("HTML")}}, формат документа, позволяющий встраивать гиперссылки
          • 
 
 
-
          Как вы видите, все в Вебе крутится вокруг документов и способах обеспечения доступа к ним. Первоначальная цель Веба заключалась в предоставлении легкого инструмента доступа к текстовым документам, их чтения и навигации по ним. С тех пор Веб эволюционировал в инструмент обеспечения доступа к изображениям, видео и бинарным данным, но все эти улучшения вряд ли были бы возможны без тех самых трёх китов, о которых говорил Тим. 
          
+
          Как вы видите, все в Вебе крутится вокруг документов и способах обеспечения доступа к ним. Первоначальная цель Веба заключалась в предоставлении лёгкого инструмента доступа к текстовым документам, их чтения и навигации по ним. С тех пор Веб эволюционировал в инструмент обеспечения доступа к изображениям, видео и бинарным данным, но все эти улучшения вряд ли были бы возможны без тех самых трёх китов, о которых говорил Тим. 
          
 
 
          До Веба было весьма сложно получить доступ к документам и перемещаться от одного к другому. Став понятными для пользователя, URL-адреса уже сделали жизнь гораздо проще, но нам довольно сложно было печатать длинный URL каждый раз, когда мы хотели получить документ. Вот тут то гиперссылки и совершили революцию. Ссылка может связать любой текст с URL, так что пользователь может моментально достигнуть цели всего лишь активируя ссылку.
          
 
-
          По умолчанию голубого цвета и подчёркнутые, ссылки выделяются из общего текста. Кликните на ссылку, чтобы активировать ее, или, если вы используете клавиатуру, перейдите на ссылку при помощи Tab и нажмите Enter.
          
+
          По умолчанию голубого цвета и подчёркнутые, ссылки выделяются из общего текста. Кликните на ссылку, чтобы активировать её, или, если вы используете клавиатуру, перейдите на ссылку при помощи Tab и нажмите Enter.
          
 
 
          Example of a basic display and effect of a link in a web page
          
 
@@ -53,7 +53,7 @@ original_slug: Learn/Understanding_links_on_the_web
 
 
          Глубокое погружение
          
 
-
          Как мы определили, ссылка —  это строка, которая связана с URL. Мы используем ссылки, чтобы с легкостью перепрыгивать с одного документа на другой. Здесь существуют некоторые нюансы, которые важно рассмотреть: 
          
+
          Как мы определили, ссылка —  это строка, которая связана с URL. Мы используем ссылки, чтобы с лёгкостью перепрыгивать с одного документа на другой. Здесь существуют некоторые нюансы, которые важно рассмотреть: 
          
 
 
          Типы ссылок
          
 
@@ -66,7 +66,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 f60b9b53cf..2d77b02fcd 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
@@ -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
          
 
@@ -126,7 +126,7 @@ NOT FOUND
 
 
          Обновление DNS
          
 
-
          Базы данных DNS хранятся на каждом DNS-сервере по всему миру и эти серверы обращаются за обновлениями к нескольким серверам, называемым “authoritative name server” или “корневой DNS-сервер”. Когда ваш регистратор создаёт или обновляет информацию о зарегистрированном домене, она должна обновиться во всех DNS-базах. Каждый DNS-сервер хранит информацию о домене фиксированное количество времени, а затем автоматически обновляет её (DNS-сервер запрашивает корневой сервер снова). Соответственно, обновление баз занимает какое-то время, пока информация о новых или измененных доменах распространяется по Интернету.
          
+
          Базы данных DNS хранятся на каждом DNS-сервере по всему миру и эти серверы обращаются за обновлениями к нескольким серверам, называемым “authoritative name server” или “корневой DNS-сервер”. Когда ваш регистратор создаёт или обновляет информацию о зарегистрированном домене, она должна обновиться во всех DNS-базах. Каждый DNS-сервер хранит информацию о домене фиксированное количество времени, а затем автоматически обновляет её (DNS-сервер запрашивает корневой сервер снова). Соответственно, обновление баз занимает какое-то время, пока информация о новых или изменённых доменах распространяется по Интернету.
          
 
 
          
 
          Примечание: Это время часто называется время распространения. Тем не менее эта задержка не означает, что за это время доменное имя обновит само себя на всех серверах сверху донизу. Очень часто DNS-сервер, запрашиваемый вашим компьютером не знает конкретного домена и запрашивает о нём корневые DNS-сервера по мере требования.
          
@@ -134,7 +134,7 @@ NOT FOUND
 
 
          Как работает DNS-запрос?
          
 
-
          Как мы уже увидели, когда вы хотите, чтобы веб-страница отобразилась в вашем браузере, легче напечатать доменное имя, чем IP-адрес. Давайте разберем весь процесс:
          
+
          Как мы уже увидели, когда вы хотите, чтобы веб-страница отобразилась в вашем браузере, легче напечатать доменное имя, чем IP-адрес. Давайте разберём весь процесс:
          
 
 
            
  
          1. Напечатайте mozilla.org в адресной строке вашего браузера.
            2. 
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 5c9716f463..dfa4941a67 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
@@ -33,7 +33,7 @@ original_slug: Learn/Understanding_URLs
 
 
            Наряду с понятиями гипертекста и протокола HTTP, понятие URL является одной из основных концепций Всемирной паутины. Это механизм, используемый браузерами для получения любого опубликованного во Всемирной сети ресурса.
            
 
-
            URL обозначает Uniform Resource Locator. URL это лишь адрес, который выдан уникальному ресурсу в интернете. В теории, каждый корректный URL ведет на уникальный ресурс. Такими ресурсами могут быть HTML-страница, CSS-файл, изображение и т.д. На практике, существуют некоторые исключения, когда, например, URL ведет на ресурс, который больше не существует или который был перемещён. Поскольку ресурс, доступный по URL, а также сам URL обрабатываются веб-сервером, его владелец должен внимательно следить за размещаемыми ресурсами и связанными с ними URL.
            
+
            URL обозначает Uniform Resource Locator. URL это лишь адрес, который выдан уникальному ресурсу в интернете. В теории, каждый корректный URL ведёт на уникальный ресурс. Такими ресурсами могут быть HTML-страница, CSS-файл, изображение и т.д. На практике, существуют некоторые исключения, когда, например, URL ведёт на ресурс, который больше не существует или который был перемещён. Поскольку ресурс, доступный по URL, а также сам URL обрабатываются веб-сервером, его владелец должен внимательно следить за размещаемыми ресурсами и связанными с ними URL.
            
 
 
            Активное обучение
            
 
@@ -101,7 +101,7 @@ https://developer.mozilla.org/ru/search?q=URL

          Когда URL используется в документе, например в HTML-странице, ситуация отличается. Потому что браузер уже знает URL текущего документа и он может использовать эти сведения для дополнения недостающих частей любого адреса, указанного в документе. Простейший пример относительного URL - указание только адресной части URL. А если адрес в URL начинается с символа "/", браузер запросит ресурс от корня сервера, без отсылки к контексту текущего документа.

          -

          Разберем это на примерах.

          +

          Разберём это на примерах.

          Примеры абсолютных URL

          @@ -139,7 +139,7 @@ https://developer.mozilla.org/ru/search?q=URL 
          ../CSS/display
          -

          В этом случае, мы используем команду ../  — унаследованную из файловой системы UNIX — чтобы сказать браузеру, что он должен подняться на 1 директорию вверх. Соответственно, здесь мы хотим открыть URL: https://developer.mozilla.org/ru/docs/Learn/../CSS/display, который может быть упрощен до вида: https://developer.mozilla.org/ru/docs/CSS/display

          +

          В этом случае, мы используем команду ../  — унаследованную из файловой системы UNIX — чтобы сказать браузеру, что он должен подняться на 1 директорию вверх. Соответственно, здесь мы хотим открыть URL: https://developer.mozilla.org/ru/docs/Learn/../CSS/display, который может быть упрощён до вида: https://developer.mozilla.org/ru/docs/CSS/display

          @@ -158,5 +158,5 @@ https://developer.mozilla.org/ru/search?q=URL

          Следующие шаги

          diff --git a/files/ru/learn/common_questions/what_is_a_web_server/index.html b/files/ru/learn/common_questions/what_is_a_web_server/index.html index f2586aff5a..aedb2fffec 100644 --- a/files/ru/learn/common_questions/what_is_a_web_server/index.html +++ b/files/ru/learn/common_questions/what_is_a_web_server/index.html @@ -34,17 +34,17 @@ original_slug: Learn/Что_такое_веб_сервер

          Понятие «веб-сервер» может относиться как к аппаратной начинке, так и к программному обеспечению. Или даже к обеим частям, работающим совместно.

            -
          1. С точки зрения "железа", «веб-сервер» — это компьютер, который хранит файлы сайта (HTML-документы, CSS-стили, JavaScript-файлы, картинки и другие) и доставляет их на устройство конечного пользователя (веб-браузер и т.д.). Он подключен к сети Интернет и может быть доступен через доменное имя, подобное mozilla.org.
            2. -
          2. С точки зрения ПО, веб-сервер включает в себя несколько компонентов, которые контролируют доступ веб-пользователей к размещенным на сервере файлам, как минимум — это HTTP-сервер. HTTP-сервер — это часть ПО, которая понимает {{Glossary("URL","URL-адреса")}} (веб-адреса) и {{Glossary("HTTP")}} (протокол, который ваш браузер использует для просмотра веб-страниц).
            3. +
          3. С точки зрения "железа", «веб-сервер» — это компьютер, который хранит файлы сайта (HTML-документы, CSS-стили, JavaScript-файлы, картинки и другие) и доставляет их на устройство конечного пользователя (веб-браузер и т.д.). Он подключён к сети Интернет и может быть доступен через доменное имя, подобное mozilla.org.
            4. +
          4. С точки зрения ПО, веб-сервер включает в себя несколько компонентов, которые контролируют доступ веб-пользователей к размещённым на сервере файлам, как минимум — это HTTP-сервер. HTTP-сервер — это часть ПО, которая понимает {{Glossary("URL","URL-адреса")}} (веб-адреса) и {{Glossary("HTTP")}} (протокол, который ваш браузер использует для просмотра веб-страниц).
          -

          На самом базовом уровне, когда браузеру нужен файл, размещенный на веб-сервере, браузер запрашивает его через HTTP-протокол. Когда запрос достигает нужного веб-сервера ("железо"), сервер HTTP (ПО) принимает запрос, находит запрашиваемый документ (если нет, то сообщает об ошибке 404) и отправляет обратно, также через HTTP.

          +

          На самом базовом уровне, когда браузеру нужен файл, размещённый на веб-сервере, браузер запрашивает его через HTTP-протокол. Когда запрос достигает нужного веб-сервера ("железо"), сервер HTTP (ПО) принимает запрос, находит запрашиваемый документ (если нет, то сообщает об ошибке 404) и отправляет обратно, также через HTTP.

          Basic representation of a client/server connection through HTTP

          Чтобы опубликовать веб-сайт, необходим либо статический, либо динамический веб-сервер.

          -

          Статический веб-сервер, или стек, состоит из компьютера ("железо") с сервером HTTP (ПО). Мы называем это «статикой», потому что сервер посылает размещенные файлы в браузер «как есть».

          +

          Статический веб-сервер, или стек, состоит из компьютера ("железо") с сервером HTTP (ПО). Мы называем это «статикой», потому что сервер посылает размещённые файлы в браузер «как есть».

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

          @@ -56,17 +56,17 @@ original_slug: Learn/Что_такое_веб_сервер

          Погружаемся глубже

          -

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

          +

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

          Хостинг файлов

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

          -

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

          +

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

          • всегда запущен и работает
            • -
          • всегда подключен к Интернету
            • +
          • всегда подключён к Интернету
          • имеет неизменный IP адрес (не все {{Glossary("ISP", "провайдеры")}} предоставляют статический IP-адрес для домашнего подключения)
          • обслуживается третьей, сторонней компанией
          @@ -85,10 +85,10 @@ original_slug: Learn/Что_такое_веб_сервер
          Текстовый
          Все команды являются простым человекочитаемым текстом.
          Не сохраняет состояние
          -
          Ни клиент, ни сервер не помнят о предыдущих соединениях. Например, опираясь только на HTTP, сервер не сможет вспомнить введенный вами пароль или на каком шаге транзакции вы находитесь. Для таких задач, вам потребуется сервер приложения. (Мы остановимся на этих технологиях в следующих статьях.)
          +
          Ни клиент, ни сервер не помнят о предыдущих соединениях. Например, опираясь только на HTTP, сервер не сможет вспомнить введённый вами пароль или на каком шаге транзакции вы находитесь. Для таких задач, вам потребуется сервер приложения. (Мы остановимся на этих технологиях в следующих статьях.)
          -

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

          +

          HTTP задаёт строгие правила взаимодействия клиента и сервера. Мы рассмотрим сам протокол HTTP в технической статье немного позднее. Пока достаточно знать об этих правилах:

          • Исключительно клиенты могут производить HTTP-запросы, и только на сервера. Сервера способны только отвечать на HTTP-запросы клиента.
            • @@ -106,13 +106,13 @@ original_slug: Learn/Что_такое_веб_сервер

            Статический и Динамический контент

            -

            Грубо говоря, сервер может отдавать статическое или динамическое содержимое. «Статическое» означает «отдается как есть». Статические веб-сайты делаются проще всего, поэтому мы предлагаем вам сделать свой первый сайт статическим.

            +

            Грубо говоря, сервер может отдавать статическое или динамическое содержимое. «Статическое» означает «отдаётся как есть». Статические веб-сайты делаются проще всего, поэтому мы предлагаем вам сделать свой первый сайт статическим.

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

            -

            Возьмем для примера страницу, которую вы сейчас читаете. На веб-сервере, где она хостится, есть сервер приложения, который извлекает содержимое статьи из базы данных, форматирует его, добавляет в HTML-шаблоны и отправляет вам результат. В нашем случае, сервер приложения называется Kuma, написан он на языке программирования Python (используя фреймворк Django). Команда Mozilla создала Kuma для конкретных нужд MDN, но есть множество подобных приложений, построенных совершенно на других технологиях.

            +

            Возьмём для примера страницу, которую вы сейчас читаете. На веб-сервере, где она хостится, есть сервер приложения, который извлекает содержимое статьи из базы данных, форматирует его, добавляет в HTML-шаблоны и отправляет вам результат. В нашем случае, сервер приложения называется Kuma, написан он на языке программирования Python (используя фреймворк Django). Команда Mozilla создала Kuma для конкретных нужд MDN, но есть множество подобных приложений, построенных совершенно на других технологиях.

            -

            Существует так много серверов приложений, что довольно трудно предложить какой-то один. Некоторые серверы приложений заточены под определенные категории веб-сайтов, такие как блоги, вики-страницы или интернет-магазины; другие, называемые {{Glossary("CMS", "CMSs")}} (системы управления контентом), более универсальны. Если вы создаете динамический сайт, потратьте немного времени на выбор инструмента, который соответствует вашим потребностям. Если вы не хотите изучать веб-программирование (хотя это увлекательно само по себе!), то вам не нужно создавать свой собственный сервер приложения. Это будет изобретением очередного велосипеда.

            +

            Существует так много серверов приложений, что довольно трудно предложить какой-то один. Некоторые серверы приложений заточены под определённые категории веб-сайтов, такие как блоги, вики-страницы или интернет-магазины; другие, называемые {{Glossary("CMS", "CMSs")}} (системы управления контентом), более универсальны. Если вы создаёте динамический сайт, потратьте немного времени на выбор инструмента, который соответствует вашим потребностям. Если вы не хотите изучать веб-программирование (хотя это увлекательно само по себе!), то вам не нужно создавать свой собственный сервер приложения. Это будет изобретением очередного велосипеда.

            Следующие шаги

            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 bb0e3e1b5e..9dcefce216 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 @@ -34,7 +34,7 @@ translation_of: Learn/Common_questions/What_software_do_I_need

            Создание и редактирование веб-страниц

            -

            Для создания и редактирования веб-страниц необходим текстовый редактор. Тестовые редакторы создают и изменяют неотформатированные текстовые файлы. (Другие форматы, такие как {{Glossary("RTF")}}, позволяют добавить форматирование, такое как полужирное или подчеркивание. Эти форматы не подходят для написания веб-страниц.) Вам следует выбирать текстовый редактор с умом, так как вы будете активно работать с ним, при создании веб-сайта.

            +

            Для создания и редактирования веб-страниц необходим текстовый редактор. Тестовые редакторы создают и изменяют неотформатированные текстовые файлы. (Другие форматы, такие как {{Glossary("RTF")}}, позволяют добавить форматирование, такое как полужирное или подчёркивание. Эти форматы не подходят для написания веб-страниц.) Вам следует выбирать текстовый редактор с умом, так как вы будете активно работать с ним, при создании веб-сайта.

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

            @@ -97,7 +97,7 @@ translation_of: Learn/Common_questions/What_software_do_I_need

            Загрузка файлов в Интернете

            -

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

            +

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

        @@ -139,11 +139,11 @@ translation_of: Learn/Common_questions/What_software_do_I_need
      • Apple Safari
        • -

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

        +

        Если вы ориентируетесь на определённую группу (например, техническую платформу или страну), возможно, вам придётся протестировать ваш сайт с помощью дополнительных браузеров, таких как 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. Вы также можете обмениваться устройствами, если вы хотите протестировать на многих платформах, не тратя слишком много.

        +

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

        Следующие шаги

        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 c7c6b3549e..71587be09c 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 @@ -15,7 +15,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders ---
        {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
        -

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

        +

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

        @@ -40,13 +40,13 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders } -

        Мы вернемся к тому, как работает сокращение позже, а пока давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства background.

        +

        Мы вернёмся к тому, как работает сокращение позже, а пока давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства background.

        Фоновый цвет

        Свойство {{cssxref ("background-color")}} определяет цвет фона для любого элемента в CSS. Свойство принимает любой допустимый цвет <color>. background-color распространяется на сам контент и отступы от него (padding).

        -

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

        +

        В приведённом ниже примере мы использовали различные значения цвета, чтобы добавить цвет фона к блоку, заголовку и элементу {{htmlelement ("span")}}.

        Поиграйте с ними, используя любое доступное значение <color>.

        @@ -54,14 +54,14 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders

        Фоновое изображение

        -

        Свойство {{cssxref ("background-image")}} позволяет отображать изображение в качестве фона элемента. В приведенном ниже примере у нас есть два блока — в одном фоновое изображение больше, чем размеры блока, а в другом - маленькое изображение звезды.

        +

        Свойство {{cssxref ("background-image")}} позволяет отображать изображение в качестве фона элемента. В приведённом ниже примере у нас есть два блока — в одном фоновое изображение больше, чем размеры блока, а в другом - маленькое изображение звезды.

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

        {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 600)}}

        -

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

        +

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

        Свойство  background-repeat

        @@ -81,7 +81,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders

        Изменение размеров фонового изображения

        -

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

        +

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

        Вы также можете использовать ключевые слова:

        @@ -92,7 +92,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders

        Ниже я применил значения длины к размерам изображения. Глядите, как это исказило изображение.

        -

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

        +

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

        Попробуйте следующее.

        @@ -140,7 +140,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders background-position: top 20px; } -

        И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определенных краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова. Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:

        +

        И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова. Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:

        .box {
   background-image: url(star.png);
@@ -148,7 +148,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
   background-position: top 20px right 10px;
 }
        -

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

        +

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

        {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 480)}}

        @@ -176,15 +176,15 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders

        Примечание: Градиенты можно легко смешивать с обычными фоновыми изображениями.

        -

        Другие свойства background- * также могут иметь значения, разделенные запятыми,  как и background-image:

        +

        Другие свойства background- * также могут иметь значения, разделённые запятыми,  как и background-image:

        background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
 background-repeat: no-repeat, repeat-x, repeat;
 background-position: 10px 20px,  top right;
        -

        Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах. Выше, например, значение background-repeat для image1 будет no-repeat. Однако, что происходит, когда разные свойства имеют разное количество значений? Ответ заключается в том, что меньшее количество значений будет циклически повторяться - в приведенном выше примере есть четыре фоновых изображения, и только два значения background-position. Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться - image3 будет присвоено первое значение позиции, а image4 будет присвоено второе значение позиции.

        +

        Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах. Выше, например, значение background-repeat для image1 будет no-repeat. Однако, что происходит, когда разные свойства имеют разное количество значений? Ответ заключается в том, что меньшее количество значений будет циклически повторяться - в приведённом выше примере есть четыре фоновых изображения, и только два значения background-position. Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться - image3 будет присвоено первое значение позиции, а image4 будет присвоено второе значение позиции.

        -

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

        +

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

        {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 480)}}

        @@ -200,17 +200,17 @@ background-position: 10px 20px, top right;

        Свойство {{cssxref ("background-attachment")}} действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на background-attachment.html (также смотри исходный код здесь).

        -

        Использование сокращенного свойства background

        +

        Использование сокращённого свойства background

        Как я упоминал в начале этого урока, вы часто будете видеть фон, заданный с помощью свойства {{cssxref ("background")}}. Это сокращение позволяет вам одновременно устанавливать все различные свойства.

        -

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

        +

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

        -

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

        +

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

        • background-color можно указывать только после последней запятой.
          • -
        • Значения background-size могут быть включены только сразу после background-position, разделенные символом '/', например: center/80%. 
          • +
        • Значения background-size могут быть включены только сразу после background-position, разделённые символом '/', например: center/80%. 

        Посетите страницу MDN свойства {{cssref ("background")}}, чтобы увидеть полное описание.

        @@ -219,15 +219,15 @@ background-position: 10px 20px, top right;

        Доступность просмотра

        -

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

        +

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

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

        Границы

        -

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

        +

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

        -

        Мы можем установить границу для всех четырех сторон блока с помощью {{cssxref ("border")}}:

        +

        Мы можем установить границу для всех четырёх сторон блока с помощью {{cssxref ("border")}}:

        .box {
   border: 1px solid black;
@@ -259,7 +259,7 @@ background-position: 10px 20px,  top right;

        Примечание: Свойства границ top, right, bottom, и left также имеют сопоставленные логические свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается работы с разными направлениями текста.

        -

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

        +

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

        {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 640)}}

        @@ -285,12 +285,12 @@ background-position: 10px 20px, top right;

        Упражнение с границами и фоном

        -

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

        +

        Чтобы проверить свои новые знания, попробуйте создать следующее, используя фон и границы, используя приведённый ниже пример в качестве отправной точки:

          -
        1. Задайте рамку равную 5px black solid,  с закругленными углами 10px.
          2. +
        2. Задайте рамку равную 5px black solid,  с закруглёнными углами 10px.
        3. Добавить фоновое изображение (используйте URL balloons.jpg) и установите размер таким образом, чтобы он покрыл весь блок.
          4. -
        4. Задайте для <h2> полупрозрачный черный цвет фона и сделайте текст белым.
          5. +
        5. Задайте для <h2> полупрозрачный чёрный цвет фона и сделайте текст белым.

        {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 555)}} 

        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 b1adc206f7..dd8cf674a5 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 @@ -35,7 +35,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance

        CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей и первое слово "каскадные" является невероятно важным для понимания: то, как ведёт себя каскад — ключевой момент в понимании CSS.

        -

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

        +

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

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

        @@ -45,7 +45,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance

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

        -

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

        +

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

        {{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

        @@ -127,7 +127,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
        1. Второй элемент списка имеет класс my-class-1. Таким образом, цвет для следующего вложенного элемента a устанавливается по наследству. Как изменится цвет, если это правило будет удалено?
          2. -
        2. Понятно ли, почему третий и четвертый элементы a имеют именно такой цвет? Если нет, перечитайте описание значений, представленное выше.
          3. +
        3. Понятно ли, почему третий и четвёртый элементы a имеют именно такой цвет? Если нет, перечитайте описание значений, представленное выше.
        4. Какая из ссылок изменит цвет, если вы зададите новый цвет для элемента <a> — например: a { color: red; }?
        @@ -135,7 +135,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance

        Возврат всех исходных значений свойств

        -

        Стенографическое свойство CSS all можно использовать для того, чтобы присвоить одно из значений наследования к (почти) всем свойствам одновременно. Это одно из четырех значений (inherit, initial, unset, или revert). Это удобный способ для отмены изменений, внесённых в стили, для того, чтобы вы могли вернуться к стартовой точке перед внесением новых изменений.

        +

        Стенографическое свойство CSS all можно использовать для того, чтобы присвоить одно из значений наследования к (почти) всем свойствам одновременно. Это одно из четырёх значений (inherit, initial, unset, или revert). Это удобный способ для отмены изменений, внесённых в стили, для того, чтобы вы могли вернуться к стартовой точке перед внесением новых изменений.

        В примере ниже имеются два блока <blockquote>. Первый имеет стиль, который применён к самому элементу blockquote, второй имеет класс fix-this, который устанавливает значение all в unset.

        @@ -159,23 +159,23 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance

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

        -

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

        +

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

        Специфичность

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

        -

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

        +

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

        Здесь следует отметить, что, хотя мы думаем о селекторах и правилах, применяемых к объекту, который они выбирают, переписывается не всё правило, а только свойства, которые являются одинаковыми.

        -

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

        +

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

        {{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

        -

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

        +

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

        -

        Степень специфичности, которой обладает селектор, измеряется с использованием четырех различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы — четыре однозначные цифры в четырех столбцах:

        +

        Степень специфичности, которой обладает селектор, измеряется с использованием четырёх различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы — четыре однозначные цифры в четырёх столбцах:

        1. Тысячи: поставьте единицу в эту колонку, если объявление стиля находится внутри атрибута {{htmlattrxref("style")}} (встроенные стили). Такие объявления не имеют селекторов, поэтому их специфичность всегда просто 1000.
          2. @@ -253,7 +253,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
          • Первые два правила конкурируют за стилизацию цвета фона ссылки — второе выигрывает и делает фоновый цвет синим, потому что у него есть дополнительный селектор ID в цепочке: его специфичность 201 против 101.
            • -
          • Третье и четвертое правило конкурируют за стилизацию цвета текста ссылки — второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы. Таким образом, приоритетная специфичность составляет 113 против 104.
            • +
          • Третье и четвёртое правило конкурируют за стилизацию цвета текста ссылки — второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы. Таким образом, приоритетная специфичность составляет 113 против 104.
          • Правила 5–7 соревнуются за определение стиля границы ссылки при наведении курсора. Шестой селектор со специфичностью 23 явно проигрывает пятому со специфичностью 24 — у него в цепочке на один селектор элемента меньше. Седьмой селектор, однако, превосходит как пятый, так и шестой — он имеет то же количество подселекторов в цепочке, что и пятый, но один элемент заменён селектором класса. Таким образом, приоритетная специфичность 33 против 23 и 24.
          @@ -271,12 +271,12 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance

          {{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

          -

          Давайте пройдемся по этому примеру, чтобы увидеть, что происходит — попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:

          +

          Давайте пройдёмся по этому примеру, чтобы увидеть, что происходит — попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:

          1. Вы увидите, что применены значения {{cssxref("color")}} и {{cssxref("padding")}} третьего правила, но {{cssxref("background-color")}} — нет. Почему? Действительно, все три безусловно должны применяться, потому что правила, более поздние в порядке следования, обычно переопределяют более ранние правила.
            2. -
          2. Однако вышеприведенные правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.
            3. -
          3. Оба элемента имеют {{htmlattrxref("class")}} с названием better, но у второго также есть {{htmlattrxref("id")}} с названием winning. Поскольку ID имеют ещё более высокую специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом — селекторы ID очень специфичны, на что они и нацелены), красный цвет фона и однопиксельная черная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.
            4. +
          4. Однако вышеприведённые правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.
            5. +
          5. Оба элемента имеют {{htmlattrxref("class")}} с названием better, но у второго также есть {{htmlattrxref("id")}} с названием winning. Поскольку ID имеют ещё более высокую специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом — селекторы ID очень специфичны, на что они и нацелены), красный цвет фона и однопиксельная чёрная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.
          6. 2-й элемент получил красный цвет фона и отсутствие границы. Почему? Из-за объявления !important во втором правиле — размещение которого после border: none означает, что это объявление перевесит значение границы в предыдущем правиле, даже если ID имеет более высокую специфичность.
          @@ -316,7 +316,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance

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

          -

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

          +

          Обратитесь сюда, если вы столкнётесь со странными проблемами, когда стили применяются не так, как вы ожидаете. Это может быть проблемой специфичности.

          {{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

          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 ceb299bcab..6ba3afd75a 100644 --- a/files/ru/learn/css/building_blocks/debugging_css/index.html +++ b/files/ru/learn/css/building_blocks/debugging_css/index.html @@ -5,7 +5,7 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS ---
          {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
          -

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

          +

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

        @@ -24,9 +24,9 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS

        Как получить доступ к DevTools браузера

        -

        Статья What are browser developer tools это обновленное руководство объясняющее как получить доступ к инструментам разных браузеров и платформ. Хотя вы можете выбрать в основном разрабатывать в конкретном браузере и поэтому инструменты, включенные в этот браузер, будут вам знакомы больше всего, стоит знать, как получать доступ к инструментам и в других браузерах. Это поможет вам если вы наблюдаете разное отображение среди разных браузеров.

        +

        Статья What are browser developer tools это обновлённое руководство объясняющее как получить доступ к инструментам разных браузеров и платформ. Хотя вы можете выбрать в основном разрабатывать в конкретном браузере и поэтому инструменты, включённые в этот браузер, будут вам знакомы больше всего, стоит знать, как получать доступ к инструментам и в других браузерах. Это поможет вам если вы наблюдаете разное отображение среди разных браузеров.

        -

        Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools. Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править Grid Layouts, Flexbox, и Shapes. Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений примененных к элементам на вашей странице и для выполнения изменений к ним в редакторе.

        +

        Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools. Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править Grid Layouts, Flexbox, и Shapes. Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений применённых к элементам на вашей странице и для выполнения изменений к ним в редакторе.

        В этом уроке мы рассмотрим некоторые полезные функции Firefox DevTools для работы с CSS. Для того чтобы сделать это я буду использовать файл примера. Загрузите его в новой вкладке если хотите следовать и откройте ваш DevTools как описано в статье, ссылка на которую дана выше.

        @@ -34,55 +34,55 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS

        То, что может сбить с толку новичков в DevTools, — это разница между тем, что вы видите когда просматриваете источник веб-страницы или смотрите на HTML файл который поместили на сервер и то что вы видите на HTML панели DevTools. Хотя это выглядит примерно так же, как то, что вы видите через View Source, существуют некоторые отличия.

        -

        В визуализированном DOM браузер мог скорректировать некоторый плохо-написанный HTML за вас. Если вы неправильно закрыли элемент, например открывали <h2>, но закрыли </h3>, браузер поймет, что вы хотели сделать и HTML в DOM будет правильно закрывать <h2> с </h2>. Браузер также нормализует весь HTML,а DOM также покажет любые изменения сделанные через JavaScript.

        +

        В визуализированном DOM браузер мог скорректировать некоторый плохо-написанный HTML за вас. Если вы неправильно закрыли элемент, например открывали <h2>, но закрыли </h3>, браузер поймёт, что вы хотели сделать и HTML в DOM будет правильно закрывать <h2> с </h2>. Браузер также нормализует весь HTML,а DOM также покажет любые изменения сделанные через JavaScript.

        -

        View Source же для сравнения — это просто исходный код HTML, хранящийся на сервере. HTML дерево в вашем DevTools показывает, что именно браузер отображает в любой момент времени, что дает вам представление от том, что действительно происходит.

        +

        View Source же для сравнения — это просто исходный код HTML, хранящийся на сервере. HTML дерево в вашем DevTools показывает, что именно браузер отображает в любой момент времени, что даёт вам представление от том, что действительно происходит.

        -

        Инспекция примененного CSS

        +

        Инспекция применённого CSS

        Выбирать элемент на вашей странице можно либо правым/ctrl-кликом по нему и выбрав Inspect, либо выбрав его из дерева HTML в левой панели DevTools. Попробуйте выбрать элемент с классом box1; это первый элемент на странице с блоком, ограниченным рамками вокруг него.

        The example page for this tutorial with DevTools open.

        -

        Если вы посмотрите на Rules view справа от вашего HTML, вы должны увидеть свойства и значения CSS примененные к элементу. Вы увидите правила, напрямую примененные к классу box1 и также CSS который наследуется блоком от предков, в этом случае от <body>. Это полезно в случае, если вы видите, что применяется какой-либо CSS, который вы не ожидали. Вполне возможно, что он наследуется от родительского элемента и вам необходимо добавить правило, чтобы переписать его в контексте этого элемента.

        +

        Если вы посмотрите на Rules view справа от вашего HTML, вы должны увидеть свойства и значения CSS применённые к элементу. Вы увидите правила, напрямую применённые к классу box1 и также CSS который наследуется блоком от предков, в этом случае от <body>. Это полезно в случае, если вы видите, что применяется какой-либо CSS, который вы не ожидали. Вполне возможно, что он наследуется от родительского элемента и вам необходимо добавить правило, чтобы переписать его в контексте этого элемента.

        -

        Также полезна возможность расширения (развертывания) свойств коротких записей. В нашем примере используется короткая запись margin.

        +

        Также полезна возможность расширения (развёртывания) свойств коротких записей. В нашем примере используется короткая запись margin.

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

        -

        Вы можете переключать значения в Rules view в положение включено или выключено если эта панель активна — если навести на нее курсор мыши, появятся флажки. Снимите флажок правила, например, border-radius, и CSS перестанет применяться.

        +

        Вы можете переключать значения в Rules view в положение включено или выключено если эта панель активна — если навести на неё курсор мыши, появятся флажки. Снимите флажок правила, например, border-radius, и CSS перестанет применяться.

        -

        Вы можете использовать это чтобы делать сравнения по типу A/B, принимая решение если что-то выглядит лучше с примененным правилом или нет, а также это помогает в отладке — например если layout не в порядке и вы пытаетесь разобраться какое свойство является причиной проблемы.

        +

        Вы можете использовать это чтобы делать сравнения по типу A/B, принимая решение если что-то выглядит лучше с применённым правилом или нет, а также это помогает в отладке — например если layout не в порядке и вы пытаетесь разобраться какое свойство является причиной проблемы.

        Редактирование значений

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

        -

        Выбрав box1, кликните на образчик (маленький цветной круг) который показывает цвет, примененный к границе. Откроется панель выбора цвета и сможете попробовать некоторые другие цвета; это действие обновится на странице в режиме реального времени. Аналогичным образом вы можете изменить ширину или стиль границ.

        +

        Выбрав box1, кликните на образчик (маленький цветной круг) который показывает цвет, применённый к границе. Откроется панель выбора цвета и сможете попробовать некоторые другие цвета; это действие обновится на странице в режиме реального времени. Аналогичным образом вы можете изменить ширину или стиль границ.

        DevTools Styles Panel with a color picker open.

        Добавление нового свойства

        -

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

        +

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

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

        The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open

        -

        Примечание: Также существуют другие полезные функции в Rules view, например объявления с не валидными значениями зачеркнуты. Вы можете узнать больше в Examine and edit CSS.

        +

        Примечание: Также существуют другие полезные функции в Rules view, например объявления с не валидными значениями зачёркнуты. Вы можете узнать больше в Examine and edit CSS.

        Понимание модели блоков

        -

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

        +

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

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

        В этой панели одним из детальных свойств является свойство box-sizing, которое контролирует какую блочную модель использует элемент.

        -

        Сравните два блока с классами box1 и box2. Они оба имеют одинаковую ширину (400px) примененную к ним, однако box1 визуально шире. В layout panel вы можете увидеть, что он использует content-box. Это значение, которое принимает размер, который вы даете элементу и затем добавляет padding и ширину границ.

        +

        Сравните два блока с классами box1 и box2. Они оба имеют одинаковую ширину (400px) применённую к ним, однако box1 визуально шире. В layout panel вы можете увидеть, что он использует content-box. Это значение, которое принимает размер, который вы даёте элементу и затем добавляет padding и ширину границ.

        Элемент с классом box2 использует border-box, поэтому здесь padding и граница вычтены из размера, который вы дали элементу. Это означает, что пространство, занимаемое на странице блоком, соответствует указанному вами размеру — в нашем случае width: 400px.

        @@ -94,9 +94,9 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS

        Решение проблем специфичности

        -

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

        +

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

        -

        В нашем примере два слова обернуты в элемент <em>. Один отображается оранжевым, а второй ярко-розовым. В CSS мы применили:

        +

        В нашем примере два слова обёрнуты в элемент <em>. Один отображается оранжевым, а второй ярко-розовым. В CSS мы применили:

        em {
   color: hotpink;
@@ -111,7 +111,7 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS
 
 
        Как вы помните из урока каскад и наследование где мы обсуждали специфичность, селекторы классов являются более специфичными чем селекторы элементов, и поэтому это то значение которое применяется. DevTools может помочь вам найти такие проблемы, особенно если информация закопана где-то в дебрях огромной таблицы стилей.
        
 
-
        Проведите инспекцию <em> с классом .special и DevTools покажет вам что оранжевый это цвет который применяется, а также отобразит вам свойство color примененное к em зачеркнутым. Теперь вы можете видеть, что класс переопределяет селектор элемента. 
        
+
        Проведите инспекцию <em> с классом .special и DevTools покажет вам что оранжевый это цвет который применяется, а также отобразит вам свойство color применённое к em зачёркнутым. Теперь вы можете видеть, что класс переопределяет селектор элемента. 
        
 
 
        Selecting an em and looking at DevTools to see what is over-riding the color.
        
 
@@ -121,11 +121,11 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS
 
 
        Отладка проблем в CSS
        
 
-
        DevTools может помочь при решении проблем CSS, итак, когда вы окажетесь в ситуации, где CSS ведет себя не так, как вы ожидаете, как же вам следует решать эту проблему? Следующие шаги должны помочь.
        
+
        DevTools может помочь при решении проблем CSS, итак, когда вы окажетесь в ситуации, где CSS ведёт себя не так, как вы ожидаете, как же вам следует решать эту проблему? Следующие шаги должны помочь.
        
 
 
        Сделайте шаг назад
        
 
-
        Любая проблема кодирования может быть неприятной, особенно проблемы CSS, потому что зачастую вы не получаете каких-либо сообщений об ошибках чтобы найти решение в интернете. Если вы начинаете разочаровываться оторвитесь от проблемы на время — прогуляйтесь, попейте, пообщайтесь с коллегами или займите себя чем-нибудь другим на время. Иногда решение появляется магическим образом, когда вы перестаете думать об этой проблеме, а даже если нет, работать над ней гораздо проще, когда вы чувствуете себя отдохнувшими.
        
+
        Любая проблема кодирования может быть неприятной, особенно проблемы CSS, потому что зачастую вы не получаете каких-либо сообщений об ошибках чтобы найти решение в интернете. Если вы начинаете разочаровываться оторвитесь от проблемы на время — прогуляйтесь, попейте, пообщайтесь с коллегами или займите себя чем-нибудь другим на время. Иногда решение появляется магическим образом, когда вы перестаёте думать об этой проблеме, а даже если нет, работать над ней гораздо проще, когда вы чувствуете себя отдохнувшими.
        
 
 
        Валидны ли ваши HTML и CSS?
        
 
@@ -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.
        
 
@@ -146,26 +146,26 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS
 
 
        {{compat("css.shape-outside")}}
        
 
-
        Не переопределяется ли ваш CSS чем-нибудь еще?
        
+
        Не переопределяется ли ваш CSS чем-нибудь ещё?
        
 
-
        Это тот момент, когда изученная вами информация о специфичности придет вам на помощь. Если у вас имеется что-то более специфичное, что может переписывать то, что вы пытаетесь сделать, то вы можете вступить в очень расстраивающую игру пытаясь выяснить что же именно. Однако, как описано выше, DevTools покажет вам какой CSS применяется, и вы сможете решить, как сделать новый селектор достаточно специфичным чтобы переопределить его.
        
+
        Это тот момент, когда изученная вами информация о специфичности придёт вам на помощь. Если у вас имеется что-то более специфичное, что может переписывать то, что вы пытаетесь сделать, то вы можете вступить в очень расстраивающую игру пытаясь выяснить что же именно. Однако, как описано выше, DevTools покажет вам какой CSS применяется, и вы сможете решить, как сделать новый селектор достаточно специфичным чтобы переопределить его.
        
 
-
        Сделайте сокращенный контрольный пример проблемы
        
+
        Сделайте сокращённый контрольный пример проблемы
        
 
 
        Если проблема не решена шагами, описанными выше, тогда вам надо будет сделать своего рода расследование. Лучшее что можно сделать в этом случае это создать нечто известное как сокращенный контрольный пример. Возможность "уменьшить проблему" — действительно полезный навык. Он поможет вам найти проблемы как в вашем собственном коде, так в коде ваших коллег, а также позволит вам сообщать об ошибках и более эффективно обращаться за помощью.
        
 
-
        Сокращенный контрольный пример — это пример кода, который демонстрирует проблему самым простым способом с удалением несвязанного окружающего контента и стиля.  Это часто будет означать удаление проблемного кода из вашего макета (layout), чтобы сделать небольшой пример, который показывает только этот код или функцию.
        
+
        Сокращённый контрольный пример — это пример кода, который демонстрирует проблему самым простым способом с удалением несвязанного окружающего контента и стиля.  Это часто будет означать удаление проблемного кода из вашего макета (layout), чтобы сделать небольшой пример, который показывает только этот код или функцию.
        
 
-
        Создание сокращенного контрольного примера:
        
+
        Создание сокращённого контрольного примера:
        
 
 
          
- 
        1. Если ваша разметка генерируется динамически — например через CMS — сделайте статичную версию вывода, которая показывает проблему. Сайты обмена кодами как CodePen являются полезными для размещения сокращенных контрольных примеров, так как они доступны онлайн, и вы легко можете поделиться с коллегами. Вы можете начать просматривать страницу во View Source и скопировать HTML в CodePen, затем взять релевантный CSS и JavaScript и включить их тоже. После этого вы можете проверить очевидна ли проблема.
          2. 
+ 
        2. Если ваша разметка генерируется динамически — например через CMS — сделайте статичную версию вывода, которая показывает проблему. Сайты обмена кодами как CodePen являются полезными для размещения сокращённых контрольных примеров, так как они доступны онлайн, и вы легко можете поделиться с коллегами. Вы можете начать просматривать страницу во View Source и скопировать HTML в CodePen, затем взять релевантный CSS и JavaScript и включить их тоже. После этого вы можете проверить очевидна ли проблема.
          3. 
  
        3. Если удаление JavaScript не устраняет проблему, то не включайте JavaScript. Если же удаление JavaScript устраняет проблему, тогда удалите столько JavaScript, сколько сможете, оставляя все что вызывает проблему.
          4. 
- 
        4. Удалите весь HTML который не влияет на проблему. Удалите компоненты или даже главные элементы макета. Опять же постарайтесь добиться наименьшего количества кода, который все еще показывает проблему.
          5. 
+ 
        5. Удалите весь HTML который не влияет на проблему. Удалите компоненты или даже главные элементы макета. Опять же постарайтесь добиться наименьшего количества кода, который все ещё показывает проблему.
          6. 
  
        6. Удалите весь CSS который не влияет на проблему.
          7. 
 
        
 
-
        В процессе вы можете обнаружить что причиняет проблему или, хотя бы, сможете включать или выключать ее путем удаления чего-то конкретного. Стоит добавлять какие-то комментарии к вашему коду по ходу изучения вещей. Если вам надо попросить помощи, то они покажут человеку, помогающему вам что вы уже пытались сделать. Это может дать вам достаточно информации для поиска возможных проблем и обходных путей.
        
+
        В процессе вы можете обнаружить что причиняет проблему или, хотя бы, сможете включать или выключать её путём удаления чего-то конкретного. Стоит добавлять какие-то комментарии к вашему коду по ходу изучения вещей. Если вам надо попросить помощи, то они покажут человеку, помогающему вам что вы уже пытались сделать. Это может дать вам достаточно информации для поиска возможных проблем и обходных путей.
        
 
 
        If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.
        
 
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 2e47ff1cdf..eb4a2d4b0f 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
@@ -28,7 +28,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
 
        Чтобы начать проверку, вы должны:
        
 
 
          
- 
        • Перейти и скачать HTML файл для упражнения и связанный файл изображения, сохранить их в новую директорию на локальном компьютере. Если вы хотите использовать свой собственный файл изображения и вписать свое имя, то пожалуйста — только убедитесь, что изображение квадратное.
          • 
+ 
        • Перейти и скачать HTML файл для упражнения и связанный файл изображения, сохранить их в новую директорию на локальном компьютере. Если вы хотите использовать свой собственный файл изображения и вписать своё имя, то пожалуйста — только убедитесь, что изображение квадратное.
          • 
  
        • Скачайте текстовый файл с исходным CSS —  в нем содержится набор исходных селекторов и наборов правил, которые вы должны изучить и объединить, чтобы пройти часть этой проверки.
          • 
 
        
 
@@ -46,7 +46,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
  
      • Прежде всего, создайте новый файл в той же директории, что и ваши HTML и файл изображения. Назовите его как-нибудь образно, например style.css.
        • 
  
      • Подключите ваш CSS к вашему файлу HTML с помощью элемента <link>.
        • 
  
      • Первые два набора правил в исходном файле CSS ваши бесплатно! После того, как вы закончите радоваться своей удаче, скопируйте и вставьте их в верхнюю часть вашего нового файла CSS. Используйте их в качестве теста, чтобы убедиться, что ваш CSS правильно применяется к HTML.
        • 
- 
      • Над этими двумя правилами добавьте CSS-комментарий, что это набор общих стилей для всей страницы. "Общие стили страницы" подойдут. Также добавьте еще три комментария в нижней части CSS-файла, чтобы отметить стили, соответствующие для настройки контейнера карты, стили, соответствующие для верхнего и нижнего колонтитулов, а также стили, соответствующие для основного содержимого визитной карточки. Отныне новые стили, добавленные в таблицу стилей, должны быть размещены в соответствующем месте.
        • 
+ 
      • Над этими двумя правилами добавьте CSS-комментарий, что это набор общих стилей для всей страницы. "Общие стили страницы" подойдут. Также добавьте ещё три комментария в нижней части CSS-файла, чтобы отметить стили, соответствующие для настройки контейнера карты, стили, соответствующие для верхнего и нижнего колонтитулов, а также стили, соответствующие для основного содержимого визитной карточки. Отныне новые стили, добавленные в таблицу стилей, должны быть размещены в соответствующем месте.
        • 
 
 
 
        Позаботимся о селекторах и наборах правил, предоставленных в файле CSS:
        
@@ -55,9 +55,9 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
  
      • Далее мы хотели бы, чтобы вы посмотрели на четыре селектора и рассчитали специфичность для каждого из них. Запишите их где-нибудь, где они могут быть найдены позже, например, в комментарии в верхней части CSS.
        • 
  
      • Теперь пришло время сопоставить правильный селектор и правильный набор правил! У вас есть четыре пары селекторов и набора правил для сопоставления в ваших ресурсах CSS. Сделайте это сейчас и добавьте их в файл CSS. Вам нужно сделать:
   
          
-   
        • Задайте основному контейнеру карты фиксированную ширину/высоту, сплошной цвет фона, границу и радиус границы (закругленные углы!), помимо прочего.
          • 
-   
        • Задайте заголовку градиент фона, который идет от темного к светлому, плюс закругленные углы, которые вписываются в закругленные углы, заданные для главного контейнера карты.
          • 
-   
        • Задайте для футера градиент фона, переходящий от светлого к темному, а также скругленные углы, которые вписываются в скругленные углы контейнера основной карты.
          • 
+   
        • Задайте основному контейнеру карты фиксированную ширину/высоту, сплошной цвет фона, границу и радиус границы (закруглённые углы!), помимо прочего.
          • 
+   
        • Задайте заголовку градиент фона, который идёт от тёмного к светлому, плюс закруглённые углы, которые вписываются в закруглённые углы, заданные для главного контейнера карты.
          • 
+   
        • Задайте для футера градиент фона, переходящий от светлого к тёмному, а также скруглённые углы, которые вписываются в скруглённые углы контейнера основной карты.
          • 
    
        • Сместите изображение вправо, чтобы оно прилипло к правой стороне основного содержимого визитной карточки, и придайте ему максимальную высоту 100% (хитрый трюк, который гарантирует, что он будет растягиваться/сжиматься, чтобы оставаться на той же высоте, что и его родительский контейнер, независимо от того, какой высоты он становится).
          • 
   
        
  
        • 
@@ -69,14 +69,14 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
 
          
  
        • Напишите набор правил, предназначенный как для заголовка, так и для футера карты, задавая им вычисленную общую высоту 50 пикселей (включая высоту содержимого 30 пикселей и внутренние отступы (padding) 10 пикселей со всех сторон.) Но выразите это в ems.
          • 
  
        • margin по умолчанию, применяемый браузером к элементам <h2> и <p>, будет мешать нашему дизайну, поэтому напишите правило, которое устанавливает этот параметр для указанных элементов равным 0.
          • 
- 
        • Чтобы изображение не вылезало за пределы основного содержимого визитки (элемент <article>), нужно задать ему определенную высоту. Установите высоту <article> в 120px, но выраженную в ems. Также задайте ему полупрозрачный черный цвет фона, в результате получится чуть более темный оттенок, который позволяет цвету фона немного просвечивать красным цветом.
          • 
- 
        • Напишите набор правил, который задает тегу <h2> удобный размер шрифта 20px (но выраженный в ems) и соответствующую высоту строки, чтобы поместить ее в центр поля содержимого заголовка. Напомним, что высота окна содержимого (content box) должна быть 30px — это дает вам все числа, необходимые для вычисления высоты строки.
          • 
- 
        • Напишите набор правил, который задает тегу <p> внутри нижнего колонтитула удобный размер шрифта 15px (но выраженный в ems) и соответствующую высоту строки, чтобы поместить его в центр окна содержимого нижнего колонтитула. Напомним, что высота окна содержимого должна быть 30px — это дает вам все числа, необходимые для вычисления высоты строки.
          • 
+ 
        • Чтобы изображение не вылезало за пределы основного содержимого визитки (элемент <article>), нужно задать ему определённую высоту. Установите высоту <article> в 120px, но выраженную в ems. Также задайте ему полупрозрачный чёрный цвет фона, в результате получится чуть более тёмный оттенок, который позволяет цвету фона немного просвечивать красным цветом.
          • 
+ 
        • Напишите набор правил, который задаёт тегу <h2> удобный размер шрифта 20px (но выраженный в ems) и соответствующую высоту строки, чтобы поместить её в центр поля содержимого заголовка. Напомним, что высота окна содержимого (content box) должна быть 30px — это даёт вам все числа, необходимые для вычисления высоты строки.
          • 
+ 
        • Напишите набор правил, который задаёт тегу <p> внутри нижнего колонтитула удобный размер шрифта 15px (но выраженный в ems) и соответствующую высоту строки, чтобы поместить его в центр окна содержимого нижнего колонтитула. Напомним, что высота окна содержимого должна быть 30px — это даёт вам все числа, необходимые для вычисления высоты строки.
          • 
  
        • В качестве последнего штриха задайте параграфу внутри <article> соответствующее значение отступа (padding), чтобы его левый край выровнялся с тегом <h2> и нижним параграфом, и установите его цвет достаточно светлым, чтобы его было легко читать.
          • 
 
        
 
 
        
-
        Примечание: Имейте в виду, что второй набор правил устанавливает font-size: 10px; для элемента<html> — это означает, что для любых потомков <html> em будет равен 10px, а не 16px, как это задано по умолчанию. (Это, конечно, при условии, что у потомков, о которых идет речь, нет предков, находящихся в иерархии между ними и <html>, на которых установлен другой размер шрифта. Это может повлиять на необходимые значения, хотя в этом простом примере это не проблема).
        
+
        Примечание: Имейте в виду, что второй набор правил устанавливает font-size: 10px; для элемента<html> — это означает, что для любых потомков <html> em будет равен 10px, а не 16px, как это задано по умолчанию. (Это, конечно, при условии, что у потомков, о которых идёт речь, нет предков, находящихся в иерархии между ними и <html>, на которых установлен другой размер шрифта. Это может повлиять на необходимые значения, хотя в этом простом примере это не проблема).
        
 
        
 
 
        Другие вещи для размышления:
        
@@ -90,7 +90,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
 
 
          
  
        • Вам не нужно каким-либо образом редактировать HTML, за исключением подключения к нему CSS.
          • 
- 
        • При попытке определить значение em вам нужно представить определенную величину в пикселях. Подумайте о том, какой размер базового шрифта имеет корневой элемент (<html>), и на сколько его нужно умножить, чтобы получить желаемое значение. Это даст вам значение em, по крайней мере, в таком простом случае как этот.
          • 
+ 
        • При попытке определить значение em вам нужно представить определённую величину в пикселях. Подумайте о том, какой размер базового шрифта имеет корневой элемент (<html>), и на сколько его нужно умножить, чтобы получить желаемое значение. Это даст вам значение em, по крайней мере, в таком простом случае как этот.
          • 
 
        
 
 
        Образец
        
@@ -101,7 +101,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
 
 
        Проверка
        
 
-
        Если вы проходите эту проверку в рамках организованного курса, у вас должна быть возможность отдать свою работу своему учителю/наставнику для оценки. Если вы самообучаетесь, то вы можете получить руководство по оценке достаточно простым путем: спросив в теме обсуждения об этом упражнении, или в канале #mdn IRC на Mozilla IRC. Но сначала попробуйте выполнить упражнение — вы ничего не выиграете путем обмана!
        
+
        Если вы проходите эту проверку в рамках организованного курса, у вас должна быть возможность отдать свою работу своему учителю/наставнику для оценки. Если вы самообучаетесь, то вы можете получить руководство по оценке достаточно простым путём: спросив в теме обсуждения об этом упражнении, или в канале #mdn IRC на Mozilla IRC. Но сначала попробуйте выполнить упражнение — вы ничего не выиграете путём обмана!
        
 
 
        {{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
        
 
diff --git a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html
index f572aa9758..ee3148f113 100644
--- a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html
+++ b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html
@@ -5,7 +5,7 @@ translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions
 ---
 
        {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
        
 
-
        Многие свойства и значения, с которыми мы столкнулись до сих пор при изучении CSS, были привязаны к физическим размерам нашего экрана. Мы создаем границы, например, сверху, справа, снизу и слева от коробки.Эти физические размеры очень точно соответствуют контенту, который просматривается по горизонтали, и по умолчанию Интернет имеет тенденцию поддерживать языки с письмом слева направо (например, английский или французский) лучше, чем языки с письмом справа налево (например, арабский).
        
+
        Многие свойства и значения, с которыми мы столкнулись до сих пор при изучении CSS, были привязаны к физическим размерам нашего экрана. Мы создаём границы, например, сверху, справа, снизу и слева от коробки.Эти физические размеры очень точно соответствуют контенту, который просматривается по горизонтали, и по умолчанию Интернет имеет тенденцию поддерживать языки с письмом слева направо (например, английский или французский) лучше, чем языки с письмом справа налево (например, арабский).
        
 
 
        Однако в последние годы CSS развивался чтобы лучше поддерживать разную направленность контента, включая контент с направлением справа налево, а также контент сверху вниз (например, в японском языке) - эти разные направления называются режимами письма. По мере того, как вы продвигаетесь в обучении и начинаете работать с макетом, понимание режимов письма будет вам очень полезно, поэтому мы сейчас и познакомимся с ними.
        
 
@@ -24,9 +24,9 @@ translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions
 
 
        Какие бывают режимы письма?
        
 
-
        Режим письма в CSS определяет, идет ли текст по горизонтали или по вертикали. Свойство {{cssxref ("writing-mode")}} позволяет нам переключаться из одного режима письма в другой. Для этого вам не обязательно работать на языке, который использует режим вертикального письма - вы также можете изменить режим письма частей вашего макета для творческих целей.
        
+
        Режим письма в CSS определяет, идёт ли текст по горизонтали или по вертикали. Свойство {{cssxref ("writing-mode")}} позволяет нам переключаться из одного режима письма в другой. Для этого вам не обязательно работать на языке, который использует режим вертикального письма - вы также можете изменить режим письма частей вашего макета для творческих целей.
        
 
-
        В приведенном ниже примере заголовок отображается с использованием writing-mode: vertical-rl. Теперь текст идет вертикально. Вертикальный текст часто используется в графическом дизайне и может быть способом добавить более интересный вид вашему веб-дизайну.
        
+
        В приведённом ниже примере заголовок отображается с использованием writing-mode: vertical-rl. Теперь текст идёт вертикально. Вертикальный текст часто используется в графическом дизайне и может быть способом добавить более интересный вид вашему веб-дизайну.
        
 
 
        {{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}
        
 
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 21896e3f92..e8ee1914ce 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
@@ -5,7 +5,7 @@ translation_of: Learn/CSS/Building_blocks/Images_media_form_elements
 ---
 
        {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}
        
 
-
        В этом уроке мы рассмотрим, как обрабатываются определенные специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований и этот урок прольет свет на некоторые из этих основных вещей, которые вам нужно знать.
        
+
        В этом уроке мы рассмотрим, как обрабатываются определённые специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований и этот урок прольёт свет на некоторые из этих основных вещей, которые вам нужно знать.
        @@ -28,7 +28,7 @@ translation_of: Learn/CSS/Building_blocks/Images_media_form_elements

        Размер изображений (калибровка)

        -

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

        +

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

        В примере ниже у нас два блока, оба имеют размер по 200px:

        @@ -41,7 +41,7 @@ translation_of: Learn/CSS/Building_blocks/Images_media_form_elements

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

        -

        Как мы учили в нашем предыдущем уроке, распространенная техника — это сделать {{cssxref("max-width")}} изображения - 100%. Это позволит уменьшить размер изображения по отношению к блоку, но не увеличит его. Такой метод будет работать и с другими замещаемыми элементами такими как <video> или <iframe>.

        +

        Как мы учили в нашем предыдущем уроке, распространённая техника — это сделать {{cssxref("max-width")}} изображения - 100%. Это позволит уменьшить размер изображения по отношению к блоку, но не увеличит его. Такой метод будет работать и с другими замещаемыми элементами такими как <video> или <iframe>.

        Попробуйте добавить max-width: 100% к элементу <img> в примере выше. Вы увидите, что меньшее изображение останется неизмененным, а большее изображение станет меньше, чтобы заполнить блок.

        @@ -53,19 +53,19 @@ translation_of: Learn/CSS/Building_blocks/Images_media_form_elements

        {{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}

        -

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

        +

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

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

        -

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

        +

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

        -

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

        +

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

        Вы можете увидеть, как это происходит в примере ниже, где мы имеем grid-контейнер из двух столбцов и двух строк, который содержит 4 объекта. Все <div> элементы имеют цвет фона и растягиваются чтобы заполнить строки и столбцы. Однако, изображение не растягивается.

        {{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}

        -

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

        +

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

        Для того чтобы заставить изображение растянуться чтобы заполнить grid-ячейку, вы должны сделать что-то наподобие следующего:

        @@ -93,14 +93,14 @@ translation_of: Learn/CSS/Building_blocks/Images_media_form_elements

        {{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}

        -

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

        +

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

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

        Наследование и элементы форм

        -

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

        +

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

        button,
 input,
@@ -135,7 +135,7 @@ textarea {
 
 
        Собираем все вместе в "перезагрузку"
        
 
-
        В качестве последнего шага, мы можем обернуть различные свойства, обсуждаемые выше, в следующую «форму перезагрузки», чтобы обеспечить согласованную основу для работы. Это включает все элементы упомянутые в последних трех разделах:
        
+
        В качестве последнего шага, мы можем обернуть различные свойства, обсуждаемые выше, в следующую «форму перезагрузки», чтобы обеспечить согласованную основу для работы. Это включает все элементы упомянутые в последних трёх разделах:
        
 
 
        button,
 input,
diff --git a/files/ru/learn/css/building_blocks/overflowing_content/index.html b/files/ru/learn/css/building_blocks/overflowing_content/index.html
index 919bed3501..72bcc84f37 100644
--- a/files/ru/learn/css/building_blocks/overflowing_content/index.html
+++ b/files/ru/learn/css/building_blocks/overflowing_content/index.html
@@ -22,11 +22,11 @@ translation_of: Learn/CSS/Building_blocks/Overflowing_content
 
 
        Что такое overflow?
        
 
-
        Мы уже знаем что все в  CSS - блоки, и что мы можем ограничивать размер этих блоков присваивая им определенное значение посредством {{cssxref("width")}} и {{cssxref("height")}} (или {{cssxref("inline-size")}} и {{cssxref("block-size")}}). Overflow это то что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный блок. CSS дает нам различные инструменты для управления этим overflow, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с overflow достаточно часто когда пишите CSS, особенно когда глубже погрузитесь в CSS макет.
        
+
        Мы уже знаем что все в  CSS - блоки, и что мы можем ограничивать размер этих блоков присваивая им определённое значение посредством {{cssxref("width")}} и {{cssxref("height")}} (или {{cssxref("inline-size")}} и {{cssxref("block-size")}}). Overflow это то что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный блок. CSS даёт нам различные инструменты для управления этим overflow, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с overflow достаточно часто когда пишите CSS, особенно когда глубже погрузитесь в CSS макет.
        
 
 
        CSS пытается избежать "потери данных"
        
 
-
        Давайте начнем с рассмотрения двух примеров, которые демонстрируют как CSS ведет себя когда у вас overflow.
        
+
        Давайте начнём с рассмотрения двух примеров, которые демонстрируют как CSS ведёт себя когда у вас overflow.
        
 
 
        The first is a box that has been restricted in the block dimension by giving it a height. We have then added more content than there is space for in this box. The content is overflowing the box and laying itself rather messily over the paragraph below the box.
        
 
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 de2d540a59..4051be5c83 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
@@ -12,7 +12,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors
 ---
 
        {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}
        
 
-
        Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определенными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.
        
+
        Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определёнными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.
        @@ -120,14 +120,14 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors

        Чувствительность к регистру

        -

        Если вы хотите выбрать значения атрибута без учета регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учета регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.

        +

        Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.

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

        {{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

        -

        Примечание: Существует также более новое значение s, которое вызывает сопоставление с учетом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.

        +

        Примечание: Существует также более новое значение s, которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.

        Следующие шаги

        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 c5dcf8b0c1..1905482b84 100644 --- a/files/ru/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.html @@ -31,7 +31,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators 
        body article p
        -

        В приведенном ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом.box.

        +

        В приведённом ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом.box.

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

        @@ -53,7 +53,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators 
        p + img
        -

        Распространенный вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <h1>, и стилизуем его.

        +

        Распространённый вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <h1>, и стилизуем его.

        Если вы вставите какой-то другой элемент, например <h2> между <h1> и <p>, вы обнаружите, что абзац больше не соответствует селектору и поэтому не получает цвет фона и переднего плана, применяемый, когда элемент является соседним.

        @@ -65,7 +65,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators 
        p ~ img
        -

        В приведенном ниже примере мы выбираем все элементы <p>, которые идут после <h1>, и хотя в документе есть также <div>, тем не менее <p>, который идет после него, будет выбран.

        +

        В приведённом ниже примере мы выбираем все элементы <p>, которые идут после <h1>, и хотя в документе есть также <div>, тем не менее <p>, который идёт после него, будет выбран.

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

        @@ -85,7 +85,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators

        Двигаемся дальше

        -

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

        +

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

        {{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

        diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html index 8720c0a277..cea4ff52bc 100644 --- a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -47,7 +47,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p

        {{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

        -

        Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определенном состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:

        +

        Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определённом состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:

        • :last-child
          • @@ -80,7 +80,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p

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

          -

          Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть ее в <span> и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.

          +

          Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть её в <span> и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.

          Селектор псевдоэлемента ::first-line сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.

          @@ -103,13 +103,13 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p

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

          -

          Вы можете использовать их для вставки строки текста, как в приведенном ниже живом примере. Попробуйте изменить текстовое значение свойства {{cssxref("content")}} и вы увидите, как изменится результат. Можете также изменить псевдоэлемент ::before на ::after и увидите, что текст вставлен в конце элемента, а не в начале.

          +

          Вы можете использовать их для вставки строки текста, как в приведённом ниже живом примере. Попробуйте изменить текстовое значение свойства {{cssxref("content")}} и вы увидите, как изменится результат. Можете также изменить псевдоэлемент ::before на ::after и увидите, что текст вставлен в конце элемента, а не в начале.

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

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

          -

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

          +

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

          {{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

          @@ -137,7 +137,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p
        - + @@ -185,7 +185,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p - + @@ -209,7 +209,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p - + @@ -253,19 +253,19 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p - + - + - + - + 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 c110b26aa6..3249acf691 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 @@ -38,7 +38,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Se

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

        -

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

        +

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

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

        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 2dafd6f79b..cc6475421b 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>
@@ -125,12 +125,12 @@ 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")}} — это создает в талице воздух, который позволяет ей дышать, делая ее более понятной.
          • 
+ 
        • Мы установили {{cssxref("padding")}} на элементах {{htmlelement("th")}} и {{htmlelement("td")}} — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.
          • 
 
        
 
 
        На этом этапе наша таблица выглядит уже гораздо лучше:
        
@@ -139,9 +139,9 @@ 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>:
        
 
@@ -190,7 +190,7 @@ tfoot th {
 
 
        Графика и цвета
        
 
-
        И наконец-то графика и цвета! Наша таблица заполнена тем что имеет отношение к панкам, поэтому нам нужно придать ей яркий впечатляющий вид. Не беспокойтесь, вам не обязательно делать таблицу слишком кричащей — вы можете выбрать что-то более утонченное и со вкусом.
        
+
        И наконец-то графика и цвета! Наша таблица заполнена тем что имеет отношение к панкам, поэтому нам нужно придать ей яркий впечатляющий вид. Не беспокойтесь, вам не обязательно делать таблицу слишком кричащей — вы можете выбрать что-то более утончённое и со вкусом.
        
 
 
        Следующий шаг это добавить следующий CSS в ваш style.css файл в самом низу:
        
 
@@ -208,9 +208,9 @@ thead th, tfoot th, tfoot td {
 
 
        Опять же здесь нет ничего конкретно для таблиц, но стоит отметить несколько вещей.
        
 
-
        Мы добавили {{cssxref("background-image")}} в {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и изменили {{cssxref("color")}} для всего текста внутри header и footer на белый (и еще {{cssxref("text-shadow")}}) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.
        
+
        Мы добавили {{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,8 +233,8 @@ table {
 }
          -
        • Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула 2n-1 выберет все нечетные дочерние элементы (1, 3, 5 и т.д.), а формула 2n выберет все четные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова odd и even, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем четным и нечетным строкам разные (яркие) цвета.
          • -
        • Еще мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный .png с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.
          • +
        • Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула 2n-1 выберет все нечётные дочерние элементы (1, 3, 5 и т.д.), а формула 2n выберет все чётные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова odd и even, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем чётным и нечётным строкам разные (яркие) цвета.
          • +
        • Ещё мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный .png с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.
        • И наконец мы установили для таблицы сплошной цвет фона, который обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор :nth-child.
        @@ -258,7 +258,7 @@ table { letter-spacing: 1px; } -

        Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение bottom. В этом случае заголовок будет размещен внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке punk-bands-complete.html):

        +

        Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение bottom. В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке punk-bands-complete.html):

        @@ -274,14 +274,14 @@ table {
      • Сделайте свою разметку простой и гибкой, например, используя для этого проценты, что сделает дизайн более отзывчивым.
      • Используйте {{cssxref("table-layout")}}: fixed для более понятного поведения разметки, при этом легко установить ширину столбцов, установив ширину {{cssxref("width")}} для заголовков таблицы ({{htmlelement("th")}}).
      • Используйте {{cssxref("border-collapse")}}: collapse, которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.
        • -
      • Используйте {{htmlelement("thead")}}, {{htmlelement("tbody")}} и {{htmlelement("tfoot")}} чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это дает возможность накладывать стили друг на друга, если это необходимо.
        • +
      • Используйте {{htmlelement("thead")}}, {{htmlelement("tbody")}} и {{htmlelement("tfoot")}} чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это даёт возможность накладывать стили друг на друга, если это необходимо.
      • Используйте полоски зебры, чтобы облегчить чтение между строк.
      • Используйте {{cssxref("text-align")}} чтобы выровнять текст в {{htmlelement("th")}} и {{htmlelement("td")}} для более аккуратного и удобного оформления.

        • Заключение

        -

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

        +

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

        {{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}

        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 19fb0e66d7..96ba3fb315 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 @@ -99,7 +99,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model

        Что такое модель коробки CSS?

        -

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

        +

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

        Составляющие элемента

        @@ -151,7 +151,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model box-sizing: border-box; }         -

        Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространенным выбором среди разработчиков, установите свойство box-sizing для элемента <html>, затем настройте все элементы для наследования этого значения (inherit), как показано на фрагменте ниже. Если вы хотите понять, что стоит за этим, смотрите статью the CSS Tricks article on box-sizing.

        +

        Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространённым выбором среди разработчиков, установите свойство box-sizing для элемента <html>, затем настройте все элементы для наследования этого значения (inherit), как показано на фрагменте ниже. Если вы хотите понять, что стоит за этим, смотрите статью the CSS Tricks article on box-sizing.

        html {
   box-sizing: border-box;
@@ -166,7 +166,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
        Играем с блочными моделями
        
 
-
        В примере ниже, вы можете видеть 2 объекта. Оба имеют класс .box, который дает им одинаковые параметры width, height, margin, border, и padding. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.
        
+
        В примере ниже, вы можете видеть 2 объекта. Оба имеют класс .box, который даёт им одинаковые параметры width, height, margin, border, и padding. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.
        
 
 
        Можете ли вы изменить размер второго объекта (добавляя CSS в класс .alternate) чтобы ширина и высота совпали с первым блоком?
        
 
@@ -188,13 +188,13 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
        Поля, отступы и границы
        
 
-
        Вы уже видели свойства {{cssxref ("margin")}}, {{cssxref ("padding")}} и {{cssxref ("border")}} в работе в приведенном выше примере. Свойства, используемые в этом примере, являются общими и позволяют нам устанавливать все четыре стороны поля одновременно. Эти параметры также имеют эквивалентные свойства, которые позволяют индивидуально управлять разными сторонами поля.
        
+
        Вы уже видели свойства {{cssxref ("margin")}}, {{cssxref ("padding")}} и {{cssxref ("border")}} в работе в приведённом выше примере. Свойства, используемые в этом примере, являются общими и позволяют нам устанавливать все четыре стороны поля одновременно. Эти параметры также имеют эквивалентные свойства, которые позволяют индивидуально управлять разными сторонами поля.
        
  
        
  Давайте рассмотрим эти свойства более подробно.
        
 
 
        Поле внешнего отступа (margin)
        
 
-
        Margin это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него. Margin может быть как положительным, так и отрицательным. Негативное значение для внешнего отступа может привести к перекрытию некоторых элементов страницы. Независимо от того, используете ли вы стандартную или альтернативную блочную модель, margin всегда добавляется после расчета размера видимого бокса.
        
+
        Margin это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него. Margin может быть как положительным, так и отрицательным. Негативное значение для внешнего отступа может привести к перекрытию некоторых элементов страницы. Независимо от того, используете ли вы стандартную или альтернативную блочную модель, margin всегда добавляется после расчёта размера видимого бокса.
        
 
 
        Мы можем контролировать все поля элемента сразу, используя свойство {{cssxref ("margin")}}, или каждую сторону индивидуально, используя эквивалентные полные свойства:
        
 
@@ -219,7 +219,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
        {{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} 
        
 
-
        Существует ряд правил, которые определяют, когда поля уменьшаются, а когда нет. Для получения подробной информации см. margin collapsing. Главное, что нужно сейчас помнить, — это то, что происходит схлопывание полей. Если вы создаете пространство с полями и не получаете ожидаемого результата, вероятно, именно это и происходит. 
        
+
        Существует ряд правил, которые определяют, когда поля уменьшаются, а когда нет. Для получения подробной информации см. margin collapsing. Главное, что нужно сейчас помнить, — это то, что происходит схлопывание полей. Если вы создаёте пространство с полями и не получаете ожидаемого результата, вероятно, именно это и происходит. 
        
 
 
        Границы
        
 
@@ -227,9 +227,9 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
        Для стилизации границ существует большое количество различных свойств — имеется четыре границы,  и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.
        
 
-
        Вы можете установить ширину, стиль или цвет всех четырех границ сразу используя {{cssxref("border")}} свойства.
        
+
        Вы можете установить ширину, стиль или цвет всех четырёх границ сразу используя {{cssxref("border")}} свойства.
        
 
-
        Чтобы установить индивидуальные свойства для каждой из четырех сторон вы можете использовать:
        
+
        Чтобы установить индивидуальные свойства для каждой из четырёх сторон вы можете использовать:
        
 
 
          
  
        • {{cssxref("border-top")}}
          • 
@@ -263,13 +263,13 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
  
        • {{cssxref("border-left-color")}}
          • 
 
        
 
-
        В примере ниже мы использовали различные сокращенные и длинные способы создания границ. Поиграйте с различными свойствами чтобы проверить как вы поняли принципы их работы. MDN страницы свойств границ дадут вам информацию о различных стилях, которые вы можете использовать.
        
+
        В примере ниже мы использовали различные сокращённые и длинные способы создания границ. Поиграйте с различными свойствами чтобы проверить как вы поняли принципы их работы. MDN страницы свойств границ дадут вам информацию о различных стилях, которые вы можете использовать.
        
 
 
        {{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} 
        
 
 
        Padding
        
 
-
        Padding расположен между границей и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding, поэтому значения должны быть положительными или равными 0. Любой, примененный к вашим элементам фон, будет отображаться под областью padding, и поэтому он обычно используется чтобы отодвинуть контент от границы.
        
+
        Padding расположен между границей и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding, поэтому значения должны быть положительными или равными 0. Любой, применённый к вашим элементам фон, будет отображаться под областью padding, и поэтому он обычно используется чтобы отодвинуть контент от границы.
        
 
 
        Вы можете контролировать значение padding для всех сторон элемента, используя {{cssxref("padding")}} свойство, или для каждой стороны индивидуально, используя используя следующие свойства:
        
 
@@ -282,7 +282,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
        Если вы измените значения padding в классе .box в примере ниже, вы можете увидеть что это изменяет положение текста относительно поля.
        
 
-
        Вы также можете изменить padding в классе .container, который создает пространство между контейнером и боксом. Padding может быть изменен для любого элемента, и создать пространство между этой и любой другой границей внутри элемента.
        
+
        Вы также можете изменить padding в классе .container, который создаёт пространство между контейнером и боксом. Padding может быть изменён для любого элемента, и создать пространство между этой и любой другой границей внутри элемента.
        
 
 
        {{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} 
        
 
@@ -290,7 +290,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
        Всё, сказанное ранее, полностью применимо к блочным элементам. Некоторые из свойств могут быть также применены и к строчным (inline) элементам, например, элемент, создаваемый с помощью <span>.
        
 
-
        В приведенном ниже примере у нас есть <span> внутри абзаца, и мы применили к нему width, height, margin, border и padding. Вы можете видеть, что ширина и высота игнорируются. Вертикальные поля, отступы и границы соблюдаются, но они не изменяют отношения другого содержимого к нашему строчному элементу, и поэтому отступ и граница перекрывают другие слова в абзаце. Горизонтальные отступы, поля и границы соблюдаются и заставят другой контент отодвинуться от нашего элемента.
        
+
        В приведённом ниже примере у нас есть <span> внутри абзаца, и мы применили к нему width, height, margin, border и padding. Вы можете видеть, что ширина и высота игнорируются. Вертикальные поля, отступы и границы соблюдаются, но они не изменяют отношения другого содержимого к нашему строчному элементу, и поэтому отступ и граница перекрывают другие слова в абзаце. Горизонтальные отступы, поля и границы соблюдаются и заставят другой контент отодвинуться от нашего элемента.
        
 
 
        {{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} 
        
 
@@ -313,7 +313,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
        Это может быть полезно, когда вы хотите создать ссылку с большой областью попадания, добавив padding. <a> - это строчный элемент, такой же как <span>; вы можете использовать display: inline-block, чтобы разрешить установку отступов, что упростит пользователю переход по ссылке.
        
 
-
        Вы довольно часто видите это на панели навигации. Приведенная ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <a>, также мы хотим чтобы изменялся background-color при наведении курсора на <a>. Отступы перекрывают границу элемента <ul>. Это потому, что <a> является строчным элементом.
        
+
        Вы довольно часто видите это на панели навигации. Приведённая ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <a>, также мы хотим чтобы изменялся background-color при наведении курсора на <a>. Отступы перекрывают границу элемента <ul>. Это потому, что <a> является строчным элементом.
        
 
 
        Добавьте в правило display: inline-block с помощью селектора .links-list a, и вы увидите, как он решает эту проблему, заставляя другие элементы соблюдать отступы.
        
 
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 d64426b99e..2e32d47268 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.
        
@@ -40,7 +40,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units
 }
        -

        Значение в CSS это путь определения коллекции допустимых под-значений. То есть если вы видите <color> как примененный, то вам не надо озадачиваться какой из разных типов значения цвета может быть использован — ключевое слово, hex значение, функция rgb() и т.д. Вы можете воспользоваться любым доступным значением <color> при условии, что они поддерживаются вашим браузером. Страницы для всех значений на MDN дадут вам информацию о поддержке браузеров. Например, если вы посмотрите на страницу <color> то вы увидите раздел совместимости браузеров в котором перечислены различные типы значений цвета и их поддержка.

        +

        Значение в CSS это путь определения коллекции допустимых под-значений. То есть если вы видите <color> как применённый, то вам не надо озадачиваться какой из разных типов значения цвета может быть использован — ключевое слово, hex значение, функция rgb() и т.д. Вы можете воспользоваться любым доступным значением <color> при условии, что они поддерживаются вашим браузером. Страницы для всех значений на MDN дадут вам информацию о поддержке браузеров. Например, если вы посмотрите на страницу <color> то вы увидите раздел совместимости браузеров в котором перечислены различные типы значений цвета и их поддержка.

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

        @@ -69,13 +69,13 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units         @@ -140,7 +140,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units

        Единицы относительной длины

        -

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

        +

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

        {{ Cssxref(":active") }}Подходит, когда пользователь активирует (например, щелкает мышью) элемент.Подходит, когда пользователь активирует (например, щёлкает мышью) элемент.
        {{ Cssxref(":any-link") }}
        {{ Cssxref(":first-of-type") }}Соответствует элементу, который является первым определенного типа среди других дочерних элементов одного предка.Соответствует элементу, который является первым определённого типа среди других дочерних элементов одного предка.
        {{ Cssxref(":focus") }}
        {{ Cssxref(":indeterminate") }}Соответствует элементам пользовательского интерфейса, значение которых находится в неопределенном состоянии, обычно checkboxes.Соответствует элементам пользовательского интерфейса, значение которых находится в неопределённом состоянии, обычно checkboxes.
        {{ Cssxref(":in-range") }}
        {{ Cssxref(":nth-child") }}Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечетные числа.)Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.)
        {{ Cssxref(":nth-of-type") }}Соответствует элементам из списка дочерних элементов одного предка, имеющим определенный тип (например, элементы <p>) — дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечетные числа.)Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы <p>) — дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.)
        {{ Cssxref(":nth-last-child") }}Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечетные, считая с конца.)Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.)
        {{ Cssxref(":nth-last-of-type") }}Соответствует элементам из списка дочерних элементов одного предка, имеющим определенный тип (например, элементы <p>), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечетные, считая с конца.)Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы <p>), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.)
        {{ Cssxref(":only-child") }}
        <dimension> -

        <dimension> (измерение) это — <number> (число) с единицей измерения, прикрепленной к нему, например 45deg, 5s, или 10px. <dimension> — это зонт категорий, включающих в себя типы <length>, <angle>, <time>, и <resolution> (длина, угол, время и разрешение).

        +

        <dimension> (измерение) это — <number> (число) с единицей измерения, прикреплённой к нему, например 45deg, 5s, или 10px. <dimension> — это зонт категорий, включающих в себя типы <length>, <angle>, <time>, и <resolution> (длина, угол, время и разрешение).

        <percentage> -

        <percentage> (проценты) представляют собой долю некоторого другого значения, например 50%. Процентные значения всегда относительны по отношению к другому количеству, например длина элемента относительна к длине ее родительского элемента.

        +

        <percentage> (проценты) представляют собой долю некоторого другого значения, например 50%. Процентные значения всегда относительны по отношению к другому количеству, например длина элемента относительна к длине её родительского элемента.
        @@ -191,7 +191,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units

        Изучение на примере

        -

        В примере ниже вы можете увидеть, как некоторые относительные и абсолютные единицы длин ведут себя. Первый блок имеет {{cssxref("width")}} (ширину) установленную в пикселях. Как абсолютная единица эта ширина будет оставаться такой же неважно что еще измениться.

        +

        В примере ниже вы можете увидеть, как некоторые относительные и абсолютные единицы длин ведут себя. Первый блок имеет {{cssxref("width")}} (ширину) установленную в пикселях. Как абсолютная единица эта ширина будет оставаться такой же неважно что ещё измениться.

        Второй блок имеет ширину, установленную в единицах vw (ширина окна просмотра). Это значение относительно к ширине окна просмотра и таким образом 10vw это 10 процентов от ширины окна просмотра. Если вы измените ширину окна вашего браузера, размер блока должен измениться, однако этот пример встроен в страницу с использованием <iframe>, поэтому это не сработает. Для того чтобы увидеть это в действии вы должны открыть этот пример в отдельной вкладке браузера.

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

        em и rem

        -

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

        +

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

        HTML это набор вложенных списков — у нас имеется три списка в общей сложности и оба примера имеют одинаковый HTML. Единственное различие в том, что первый имеет класс ems, а второй класс rems.

        @@ -223,9 +223,9 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units

        В примере ниже два блока с размерами в процентах и два с размерами в пикселях имеющих одинаковые имена классов. Оба набора имеют ширину 200px и 40% соответственно.

        -

        Различие в том, что второй набор блоков находится внутри обертки которая имеет ширину 400 пикселей. Второй блок шириной в 200px имеет ту же ширину что и первый, но второй 40 процентный блок теперь имеет 40% от 400px — намного уже чем первый.

        +

        Различие в том, что второй набор блоков находится внутри обёртки которая имеет ширину 400 пикселей. Второй блок шириной в 200px имеет ту же ширину что и первый, но второй 40 процентный блок теперь имеет 40% от 400px — намного уже чем первый.

        -

        Попробуйте изменить ширину обертки (.wrapper) или процентное значение чтобы увидеть, как это работает.

        +

        Попробуйте изменить ширину обёртки (.wrapper) или процентное значение чтобы увидеть, как это работает.

        {{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

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

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

        -

        Стандартная система цветов доступная в современных компьютерах — это 24-битная система, которая позволяет отображать около 16.7 миллионов отдельных цветов через комбинацию различных красных, зеленых и синих каналов с 256 различными значениями каждого канала (256 x 256 x 256 = 16,777,216). Давайте взглянем на некоторые способы, с помощью которых мы можем определять цвет в CSS.

        +

        Стандартная система цветов доступная в современных компьютерах — это 24-битная система, которая позволяет отображать около 16.7 миллионов отдельных цветов через комбинацию различных красных, зелёных и синих каналов с 256 различными значениями каждого канала (256 x 256 x 256 = 16,777,216). Давайте взглянем на некоторые способы, с помощью которых мы можем определять цвет в CSS.

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

        @@ -259,13 +259,13 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units

        Ключевые слова цвета

        -

        Довольно часто в примерах как здесь, так и на других страницах в MDN вы будете видеть использование ключевых слов цвета, поскольку это простой и понятный способ определения цвета. Существует определенное количество этих ключевых слов и некоторые их них имеют довольно занимательные имена! Полный список вы можете посмотреть на странице значений <color> .

        +

        Довольно часто в примерах как здесь, так и на других страницах в MDN вы будете видеть использование ключевых слов цвета, поскольку это простой и понятный способ определения цвета. Существует определённое количество этих ключевых слов и некоторые их них имеют довольно занимательные имена! Полный список вы можете посмотреть на странице значений <color> .

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

        Шестнадцатеричные RGB значения

        -

        Следующий тип значения цвета, с которым вы сталкиваетесь вероятнее всего — это шестнадцатеричные коды. Каждое hex-значение состоит из символа решетки (#) за которым следуют 6 шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (представляющая 15) — то есть 0123456789abcdef. Каждая пара значений представляет один из каналов — красного, зеленого или синего цветов — и позволяет нам определять любой из 256 доступных значений для каждого (16 x 16 = 256).

        +

        Следующий тип значения цвета, с которым вы сталкиваетесь вероятнее всего — это шестнадцатеричные коды. Каждое hex-значение состоит из символа решётки (#) за которым следуют 6 шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (представляющая 15) — то есть 0123456789abcdef. Каждая пара значений представляет один из каналов — красного, зелёного или синего цветов — и позволяет нам определять любой из 256 доступных значений для каждого (16 x 16 = 256).

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

        @@ -275,13 +275,13 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units

        RGB и RGBA значения

        -

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

        +

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

        Давайте перепишем наш последний пример используя RGB цвета:

        {{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

        -

        А также вы можете использовать цвета RGBA — что работает в точности, как и цвета RGB и то есть вы можете использовать любое значение RGB, однако существует четвертое значение, которое представляет альфа канал цвета, которое контролирует мутность. Если вы установите это значение на 0, то это сделает цвет полностью прозрачным, тогда как 1 сделает его полностью мутным. Значения между дают вам разные уровни прозрачности.

        +

        А также вы можете использовать цвета RGBA — что работает в точности, как и цвета RGB и то есть вы можете использовать любое значение RGB, однако существует четвёртое значение, которое представляет альфа канал цвета, которое контролирует мутность. Если вы установите это значение на 0, то это сделает цвет полностью прозрачным, тогда как 1 сделает его полностью мутным. Значения между дают вам разные уровни прозрачности.

        Внимание: Настройка альфа канала в цвете имеет одно ключевое различие в использовании свойства {{cssxref("opacity")}} которое мы рассматривали ранее. когда вы используете мутность вы делаете элемент и все внутри него мутным, тогда как при использовании цвета RGBA вы делаете мутным только тот цвет который вы специфицируете.

        diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html index d67eedc31f..46e77bfe72 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.html +++ b/files/ru/learn/css/css_layout/flexbox/index.html @@ -28,7 +28,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox

        Почему Flexbox?

        -

        Долгое время единственными надёжными инструментами CSS верстки были такие способы как Float (обтекание) и позиционирование.

        +

        Долгое время единственными надёжными инструментами CSS вёрстки были такие способы как Float (обтекание) и позиционирование.

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

        @@ -44,7 +44,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox

        В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox. Чтобы начать, скачайте на компьютер стартовый файл — flexbox0.html с нашего Github репозитория — загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете посмотреть его вживую.

        -

        Вы увидите элемент {{htmlelement("header")}} с заголовком верхнего уровня внутри, и элемент {{htmlelement("section")}} содержащий три элемента {{htmlelement("article")}}. Мы будем использовать их для создания стандартного трехколоночного макета.

        +

        Вы увидите элемент {{htmlelement("header")}} с заголовком верхнего уровня внутри, и элемент {{htmlelement("section")}} содержащий три элемента {{htmlelement("article")}}. Мы будем использовать их для создания стандартного трёхколоночного макета.

        @@ -288,7 +288,7 @@ article:nth-of-type(3) { justify-content: space-around; } -

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

        +

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

        button {
   flex: 1;
@@ -309,6 +309,6 @@ article:nth-of-type(3) {
 
 
        Подытожим
        
 
-
        Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим еще один важный аспект макетов CSS - grid-системы.
        
+
        Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим ещё один важный аспект макетов CSS - grid-системы.
        
 
 
        {{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
        
diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html
index 86ff3ac15d..9fc55d47cf 100644
--- a/files/ru/learn/css/css_layout/floats/index.html
+++ b/files/ru/learn/css/css_layout/floats/index.html
@@ -26,7 +26,7 @@ translation_of: Learn/CSS/CSS_layout/Floats
 
 
        Свойство {{cssxref("float")}} вводилось для того, чтобы разработчики могли включать изображение, с обтеканием текста вокруг него слева или справа, как это часто используется в газетах.
        
 
-
        Но разработчики быстро осознали, что можно обтекать все что угодно, не только изображения, поэтому использование float расширилось, например для верстки забавных эффектов таких как drop-caps (буквица).
        
+
        Но разработчики быстро осознали, что можно обтекать все что угодно, не только изображения, поэтому использование float расширилось, например для вёрстки забавных эффектов таких как drop-caps (буквица).
        
 
 
        Floats очень часто использовались для создания макетов целых веб-страниц, отображающих несколько колонок информации, обтекаемых так, что колонки располагаются друг за другом (поведение по умолчанию предполагает, что колонки должны располагаются друг за другом, в том же порядке в котором они появляются в источнике). Доступны более новые, лучшие методы и поэтому использование floats для этих целей следует рассматривать как устаревшей техникой.
        
 
@@ -34,9 +34,9 @@ translation_of: Learn/CSS/CSS_layout/Floats
 
 
        Простой пример float
        
 
-
        Давайте выясним как использовать floats. Мы начнем с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый index.html файл на вашем компьютере, заполнив его простым шаблоном HTML, и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.
        
+
        Давайте выясним как использовать floats. Мы начнём с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый index.html файл на вашем компьютере, заполнив его простым шаблоном HTML, и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.
        
 
-
        Во-первых, мы начнем с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив все что там было до этого:
        
+
        Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив все что там было до этого:
        
 
 
        <h1>Simple float example</h1>
 
@@ -175,11 +175,11 @@ translation_of: Learn/CSS/CSS_layout/Floats
 
 
        {{ EmbedLiveSample('Float_2', '100%', 500) }}
        
 
-
        Линейные блоки нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все еще остается в полную ширину.
        
+
        Линейные блоки нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все ещё остаётся в полную ширину.
        
 
 
        Очистка обтекания
        
 
-
        Мы увидели, что обтекаемый объект удален из нормального потока и что другие элементы будут располагаться за ним, поэтому если мы хотим остановить перемещение следующего элемента нам необходимо очистить его; что достигается при помощи свойства {{cssxref("clear")}}.
        
+
        Мы увидели, что обтекаемый объект удалён из нормального потока и что другие элементы будут располагаться за ним, поэтому если мы хотим остановить перемещение следующего элемента нам необходимо очистить его; что достигается при помощи свойства {{cssxref("clear")}}.
        
 
 
        Добавьте класс cleared ко второму параграфу после обтекаемого элемента в ваш HTML из предыдущего примера. Далее добавьте следующий CSS:
        
 
@@ -243,9 +243,9 @@ translation_of: Learn/CSS/CSS_layout/Floats
  
      • both: очищает любые обтекаемые объекты, слева или справа.
        • 
 
 
-
        Очистка блоков обернутых вокруг обтекаемых элементов
        
+
        Очистка блоков обёрнутых вокруг обтекаемых элементов
        
 
-
        Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обернуты в {{htmlelement("div")}} с классом wrapper.
        
+
        Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обёрнуты в {{htmlelement("div")}} с классом wrapper.
        
 
 
        <div class="wrapper">
   <div class="box">Float</div>
@@ -313,11 +313,11 @@ translation_of: Learn/CSS/CSS_layout/Floats
 
 
        {{ EmbedLiveSample('Float_4', '100%', 600) }}
        
 
-
        И еще раз, так происходит потому, что обтекаемый объект изымается из нормального потока. Очистка следующего элемента не помогает с этой проблемой очистки блока, где вы хотите, чтобы нижняя часть блока обернула обтекаемый объект и оборачивающий контент даже если контент короче. Существует три потенциальных способа разобраться с этой проблемой, два из которых работают во всех браузерах, но при этом немного хитры и третий новый способ, который правильно справляется с этой ситуацией.
        
+
        И ещё раз, так происходит потому, что обтекаемый объект изымается из нормального потока. Очистка следующего элемента не помогает с этой проблемой очистки блока, где вы хотите, чтобы нижняя часть блока обернула обтекаемый объект и оборачивающий контент даже если контент короче. Существует три потенциальных способа разобраться с этой проблемой, два из которых работают во всех браузерах, но при этом немного хитры и третий новый способ, который правильно справляется с этой ситуацией.
        
 
 
        Clearfix hack
        
 
-
        Традиционно эта ситуация решалась с помощью так называемого «clearfix hack». Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и оберточный контент, а также настройки для очистки обоих.
        
+
        Традиционно эта ситуация решалась с помощью так называемого «clearfix hack». Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и обёрточный контент, а также настройки для очистки обоих.
        
 
 
        Добавьте следующий CSS в наш пример:
        
 
@@ -379,9 +379,9 @@ translation_of: Learn/CSS/CSS_layout/Floats
 
 
        Использование overflow
        
 
-
        Альтернативный метод — это задать свойство {{cssxref("overflow")}} для обертки (wrapper) на значение отличное от visible.
        
+
        Альтернативный метод — это задать свойство {{cssxref("overflow")}} для обёртки (wrapper) на значение отличное от visible.
        
 
-
        Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте overflow: auto к правилу для обертки. Блок снова должен быть очищен.
        
+
        Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте overflow: auto к правилу для обёртки. Блок снова должен быть очищен.
        
 
 
        .wrapper {
   background-color: rgb(79,185,227);
@@ -433,7 +433,7 @@ translation_of: Learn/CSS/CSS_layout/Floats
 
 
        {{ EmbedLiveSample('Float_6', '100%', 600) }}
        
 
-
        Этот пример работает путем создания того, что известно как Блочный Контекст Форматирования (block formatting context (BFC)). Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определенных случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за непреднамеренный последствий использования overflow.
        
+
        Этот пример работает путём создания того, что известно как Блочный Контекст Форматирования (block formatting context (BFC)). Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определённых случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за непреднамеренный последствий использования overflow.
        
 
 
        display: flow-root
        
 
diff --git a/files/ru/learn/css/css_layout/grids/index.html b/files/ru/learn/css/css_layout/grids/index.html
index 903cefd2be..931f326250 100644
--- a/files/ru/learn/css/css_layout/grids/index.html
+++ b/files/ru/learn/css/css_layout/grids/index.html
@@ -46,7 +46,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 
        Создание простых рамок сетки
        
 
-
        Мы начнем с рассмотрения того, как вы можете создать простую сетку для вашего проекта.
        
+
        Мы начнём с рассмотрения того, как вы можете создать простую сетку для вашего проекта.
        
 
 
        В настоящее время большинство макетов типа grid создаются с использованием поплавков (floats). Если вы прочитали нашу предыдущую статью о поплавках, вы уже видели, как мы можем использовать эту технику для создания раскладки нескольких столбцов, что является сущностью любой сетки, использующей этот метод.
        
 
@@ -58,7 +58,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 
        Давайте сначала создадим сетку, использующую столбцы фиксированной ширины.
        
 
-
        Начните с создания локальной копии нашего образца simple-grid.html файла, который содержит следующую разметку в своем теле.
        
+
        Начните с создания локальной копии нашего образца simple-grid.html файла, который содержит следующую разметку в своём теле.
        
 
 
        <div class="wrapper">
   <div class="row">
@@ -87,7 +87,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 
        
 
-
        В элементе {{htmlelement ("style")}} добавьте следующий код, который дает контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это дает нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. Changing the box model completely для большего объяснения).
        
+
        В элементе {{htmlelement ("style")}} добавьте следующий код, который даёт контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это даёт нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. Changing the box model completely для большего объяснения).
        
 
 
        * {
   box-sizing: border-box;
@@ -103,7 +103,7 @@ body {
   padding-right: 20px;
 }
        
 
-
        Теперь используйте контейнер строк, который обернут вокруг каждой строки сетки, чтобы очистить одну строку от другой. Добавьте следующее правило ниже предыдущего:
        
+
        Теперь используйте контейнер строк, который обёрнут вокруг каждой строки сетки, чтобы очистить одну строку от другой. Добавьте следующее правило ниже предыдущего:
        
 
 
        .row {
   clear: both;
@@ -111,9 +111,9 @@ body {
 
 
        Применение этого клиринга означает, что нам не нужно полностью заполнять каждую строку элементами, составляющими полные двенадцать столбцов. Строки будут разделены и не будут мешать друг другу.
        
 
-
        Желоба между колоннами шириной 20 пикселей. Мы создаем эти желоба в качестве поля в левой части каждого столбца, включая первый столбец, чтобы сбалансировать 20 пикселей прокладки в правой части контейнера. Таким образом, у нас есть 12 водосточных желобов - 12 x 20 = 240.
        
+
        Желоба между колоннами шириной 20 пикселей. Мы создаём эти желоба в качестве поля в левой части каждого столбца, включая первый столбец, чтобы сбалансировать 20 пикселей прокладки в правой части контейнера. Таким образом, у нас есть 12 водосточных желобов - 12 x 20 = 240.
        
 
-
        Нам нужно вычесть это из нашей общей ширины 960 пикселей, что дает нам 720 пикселей для наших столбцов. Если мы разделим это на 12, мы знаем, что каждый столбец должен быть 60 пикселей в ширину. Наш следующий шаг - создать правило для класса .col, плавающее влево, предоставив ему {{cssxref ("margin-left")}} из 20 пикселей для формирования желоба и {{cssxref ("width" )}} из 60 пикселей. Добавьте нижеследующее правило в CSS:
        
+
        Нам нужно вычесть это из нашей общей ширины 960 пикселей, что даёт нам 720 пикселей для наших столбцов. Если мы разделим это на 12, мы знаем, что каждый столбец должен быть 60 пикселей в ширину. Наш следующий шаг - создать правило для класса .col, плавающее влево, предоставив ему {{cssxref ("margin-left")}} из 20 пикселей для формирования желоба и {{cssxref ("width" )}} из 60 пикселей. Добавьте нижеследующее правило в CSS:
        
 
 
        .col {
   float: left;
@@ -147,10 +147,10 @@ body {
 .col.span11 { width: 860px; }
 .col.span12 { width: 940px; }
        
 
-
        С помощью этих классов мы можем теперь выкладывать разные столбцы ширины в сетке. Попробуйте сохранить и загрузить страницу в своем браузере, чтобы увидеть эффекты.
        
+
        С помощью этих классов мы можем теперь выкладывать разные столбцы ширины в сетке. Попробуйте сохранить и загрузить страницу в своём браузере, чтобы увидеть эффекты.
        
 
 
        
-
        Примечание: Если вам не удается заставить приведенный выше пример работать, попробуйте сравнить его с нашей готовой версией на GitHub (см. также запуск в режиме реального времени).
        
+
        Примечание: Если вам не удаётся заставить приведённый выше пример работать, попробуйте сравнить его с нашей готовой версией на GitHub (см. также запуск в режиме реального времени).
        
 
        
 
 
        Попробуйте изменить классы на своих элементах или даже добавить и удалить некоторые контейнеры, чтобы увидеть, как вы можете изменять макет. Например, вы можете сделать вторую строку следующим образом:
        
@@ -170,7 +170,7 @@ body {
 
 
        target / context = result
        
 
-
        Для нашей ширины столбца наша целевая ширина составляет 60 пикселей, а наш контекст  960 пикселей. Для расчета процента мы можем использовать следующее.
        
+
        Для нашей ширины столбца наша целевая ширина составляет 60 пикселей, а наш контекст  960 пикселей. Для расчёта процента мы можем использовать следующее.
        
 
 
        60 / 960 = 0.0625
        
 
@@ -200,7 +200,7 @@ body {
 
 
        Мы не только дали нам процент {{cssxref ("width")}}, мы также добавили свойство {{cssxref ("max-width")}}, чтобы остановить распространение макета.
        
 
-
        Затем обновите четвертое правило CSS (с селектором .col) следующим образом:
        
+
        Затем обновите четвёртое правило CSS (с селектором .col) следующим образом:
        
 
 
        .col {
   float: left;
@@ -209,7 +209,7 @@ body {
   background: rgb(255, 150, 150);
 }
        
 
-
        Теперь идет немного более трудоемкая часть - нам нужно обновить все наши правила .col.span, чтобы использовать проценты, а не ширину пикселей. Это занимает немного времени с калькулятором; чтобы сэкономить вам немного усилий, мы сделали это для вас ниже.
        
+
        Теперь идёт немного более трудоёмкая часть - нам нужно обновить все наши правила .col.span, чтобы использовать проценты, а не ширину пикселей. Это занимает немного времени с калькулятором; чтобы сэкономить вам немного усилий, мы сделали это для вас ниже.
        
 
 
        Обновите нижний блок правил CSS следующим образом:
        
 
@@ -231,14 +231,14 @@ body {
 
        Теперь сохраните свой код, загрузите его в браузере и попробуйте изменить ширину видового экрана - вы должны увидеть, что ширины столбцов хорошо меняются. Отлично!
        
 
 
        
-
        Примечание: Если вам не удается заставить приведенный выше пример работать, попробуйте сравнить его с нашей готовой версией на GitHub (см. также запуск в режиме реального времени).
        
+
        Примечание: Если вам не удаётся заставить приведённый выше пример работать, попробуйте сравнить его с нашей готовой версией на GitHub (см. также запуск в режиме реального времени).
        
 
        
 
 
        Более простые вычисления с использованием функции calc()
        
 
-
        Вы можете использовать функцию {{cssxref ("calc ()")}} для выполнения математики прямо внутри вашего CSS - это позволяет вставлять простые математические уравнения в ваши значения CSS, чтобы рассчитать, какое значение должно быть. Это особенно полезно, когда необходимо выполнить сложную математику и вы даже можете сделать расчет, который использует разные единицы, например «Я хочу, чтобы высота этого элемента всегда была на 100% от высоты родителя, минус 50 пикселей». См. этот пример из учебника API MediaRecorder.
        
+
        Вы можете использовать функцию {{cssxref ("calc ()")}} для выполнения математики прямо внутри вашего CSS - это позволяет вставлять простые математические уравнения в ваши значения CSS, чтобы рассчитать, какое значение должно быть. Это особенно полезно, когда необходимо выполнить сложную математику и вы даже можете сделать расчёт, который использует разные единицы, например «Я хочу, чтобы высота этого элемента всегда была на 100% от высоты родителя, минус 50 пикселей». См. этот пример из учебника API MediaRecorder.
        
 
-
        В любом случае, вернемся к нашим сетям! Любой столбец, который охватывает более одного столбца нашей сетки, имеет общую ширину 6,25%, умноженную на количество столбцов, спаренных плюс 2.08333333%, умноженное на количество желобов (которые всегда будут числом столбцов минус 1). Функция calc () позволяет нам делать это вычисление прямо внутри значения ширины, поэтому для любого элемента, охватывающего 4 столбца, мы можем это сделать, например:
        
+
        В любом случае, вернёмся к нашим сетям! Любой столбец, который охватывает более одного столбца нашей сетки, имеет общую ширину 6,25%, умноженную на количество столбцов, спаренных плюс 2.08333333%, умноженное на количество желобов (которые всегда будут числом столбцов минус 1). Функция calc () позволяет нам делать это вычисление прямо внутри значения ширины, поэтому для любого элемента, охватывающего 4 столбца, мы можем это сделать, например:
        
 
 
        .col.span4 {
   width: calc((6.25%*4) + (2.08333333%*3));
@@ -259,11 +259,11 @@ body {
 .col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
        
 
 
        
-
        Примечание: Вы можете увидеть нашу законченную версию в файле liquid-grid-calc.html (также см. ее в режиме реального времени).
        
+
        Примечание: Вы можете увидеть нашу законченную версию в файле liquid-grid-calc.html (также см. её в режиме реального времени).
        
 
        
 
 
        
-
        Примечание: Если вы не можете заставить это работать, возможно, это связано с тем, что ваш браузер не поддерживает функцию calc (), хотя он довольно хорошо поддерживается в браузерах - еще в IE9.
        
+
        Примечание: Если вы не можете заставить это работать, возможно, это связано с тем, что ваш браузер не поддерживает функцию calc (), хотя он довольно хорошо поддерживается в браузерах - ещё в IE9.
        
 
        
 
 
        Семантические и "несемантические" сетчатые системы
        
@@ -326,13 +326,13 @@ body {
 
 
        Также имейте в виду, что если содержимое элементов становится шире, чем занимаемые им строки, оно будет переполняться и выглядит как беспорядок.
        
 
-
        Самое большое ограничение этой системы состоит в том, что она по существу одномерна. Мы имеем дело со столбцами и охватываем элементы по столбцам, но не по строкам. С помощью этих старых методов компоновки очень сложно контролировать высоту элементов без явной установки высоты, и это тоже очень негибкий подход - он работает только, если вы можете гарантировать, что ваш контент будет определенной высоты.
        
+
        Самое большое ограничение этой системы состоит в том, что она по существу одномерна. Мы имеем дело со столбцами и охватываем элементы по столбцам, но не по строкам. С помощью этих старых методов компоновки очень сложно контролировать высоту элементов без явной установки высоты, и это тоже очень негибкий подход - он работает только, если вы можете гарантировать, что ваш контент будет определённой высоты.
        
 
 
        Flexbox grids?
        
 
-
        Если вы прочтете нашу предыдущую статью о flexbox, вы можете подумать, что flexbox - идеальное решение для создания сетчатой системы. В настоящее время доступно множество систем gridbox на основе flexbox и flexbox может решить многие из проблем, которые мы уже обнаружили при создании нашей сетки выше.
        
+
        Если вы прочтёте нашу предыдущую статью о flexbox, вы можете подумать, что flexbox - идеальное решение для создания сетчатой системы. В настоящее время доступно множество систем gridbox на основе flexbox и flexbox может решить многие из проблем, которые мы уже обнаружили при создании нашей сетки выше.
        
 
-
        Однако flexbox никогда не разрабатывался как сетчатая система и создает новый набор проблем при использовании в качестве одного. В качестве простого примера мы можем использовать тот же пример разметки, который мы использовали выше, и использовать следующий CSS для стилей классов-оболочек (wrapper), row и col классов:
        
+
        Однако flexbox никогда не разрабатывался как сетчатая система и создаёт новый набор проблем при использовании в качестве одного. В качестве простого примера мы можем использовать тот же пример разметки, который мы использовали выше, и использовать следующий CSS для стилей классов-оболочек (wrapper), row и col классов:
        
 
 
        body {
   width: 90%;
@@ -357,9 +357,9 @@ body {
   background: rgb(255,150,150);
 }
        
 
-
        Вы можете попробовать сделать эти замены в своем собственном примере или посмотреть на наш пример кода flexbox-grid.html (см. также он работает в режиме реального времени).
        
+
        Вы можете попробовать сделать эти замены в своём собственном примере или посмотреть на наш пример кода flexbox-grid.html (см. также он работает в режиме реального времени).
        
 
-
        Здесь мы превращаем каждую строку в гибкий контейнер. С сеткой на основе flexbox нам все еще нужны строки, чтобы мы могли иметь элементы, которые составляют менее 100%. Мы установили этот контейнер для display: flex.
        
+
        Здесь мы превращаем каждую строку в гибкий контейнер. С сеткой на основе flexbox нам все ещё нужны строки, чтобы мы могли иметь элементы, которые составляют менее 100%. Мы установили этот контейнер для display: flex.
        
 
 
        На .col мы устанавливаем первое значение свойства {{cssxref ("flex")}} ({{cssxref ("flex-grow")}}) до 1, чтобы наши объекты могли расти, второе значение ({{cssxref (" flex-shrink ")}}) до 1, поэтому элементы могут сокращаться, а третье значение ({{cssxref (" flex-basis ")}}) - auto. Поскольку наш элемент имеет набор {{cssxref ("width")}}, auto будет использовать эту ширину в качестве базового значения flex (flex-basis).
        
 
@@ -373,11 +373,11 @@ body {
 
 
        Flexbox является одномерным по дизайну. Он имеет дело с одним измерением - со строкой или столбцом. Мы не можем создать строгую сетку для столбцов и строк, что означает, что если мы будем использовать flexbox для нашей сетки, нам все равно нужно рассчитать проценты, как для плавающего макета.
        
 
-
        В вашем проекте вы все равно можете использовать сетку flexbox из-за дополнительных возможностей выравнивания и распределения пространства. Flexbox обеспечивает надплавки. Однако вам следует помнить, что вы все еще используете инструмент для чего-то другого, кроме того, для чего он предназначен. Таким образом, вы можете почувствовать, что он заставляет вас прыгать через дополнительные обручи, чтобы получить конечный результат, который вы хотите.
        
+
        В вашем проекте вы все равно можете использовать сетку flexbox из-за дополнительных возможностей выравнивания и распределения пространства. Flexbox обеспечивает надплавки. Однако вам следует помнить, что вы все ещё используете инструмент для чего-то другого, кроме того, для чего он предназначен. Таким образом, вы можете почувствовать, что он заставляет вас прыгать через дополнительные обручи, чтобы получить конечный результат, который вы хотите.
        
 
 
        Системы сторонних сетей
        
 
-
        Теперь, когда мы понимаем математику за нашими расчетами в сетке, мы находимся в хорошем месте, чтобы взглянуть на некоторые из сторонних сетевых систем, которые используются совместно. Если вы ищете «CSS Grid framework» в Интернете, вы найдете огромный список вариантов на выбор. В популярных структурах, таких как Bootstrap и Foundation, есть сетка. Существуют также автономные сетчатые системы, разработанные с использованием CSS или с использованием препроцессоров.
        
+
        Теперь, когда мы понимаем математику за нашими расчётами в сетке, мы находимся в хорошем месте, чтобы взглянуть на некоторые из сторонних сетевых систем, которые используются совместно. Если вы ищете «CSS Grid framework» в Интернете, вы найдёте огромный список вариантов на выбор. В популярных структурах, таких как Bootstrap и Foundation, есть сетка. Существуют также автономные сетчатые системы, разработанные с использованием CSS или с использованием препроцессоров.
        
 
 
        Давайте рассмотрим одну из этих автономных систем, поскольку она демонстрирует общие методы работы с сеткой. Сетка, которую мы будем использовать, является частью Skeleton, простой CSS-структуры.
        
 
@@ -462,28 +462,28 @@ body {
 
        Попробуйте сохранить свой HTML-файл и загрузить его в свой браузер, чтобы увидеть эффект.
        
 
 
        
-
        Примечание. Если вам не удается заставить этот пример работать, попробуйте сравнить его с нашим html-skeleton-finished.html - файлом (см. также в режиме реального времени).
        
+
        Примечание. Если вам не удаётся заставить этот пример работать, попробуйте сравнить его с нашим html-skeleton-finished.html - файлом (см. также в режиме реального времени).
        
 
        
 
 
        Если вы посмотрите в файле skeleton.css, вы увидите, как это работает. Например, у Skeleton определены следующие элементы стиля с добавленными к ним классами «три столбца».
        
 
 
        .three.columns { width: 22%; }
        
 
-
        Весь Skeleton (или любая другая структура сетки) выполняет настройку предопределенных классов, которые вы можете использовать, добавив их в свою разметку. Это точно так же, как если бы вы сами делали расчет этих процентов.
        
+
        Весь Skeleton (или любая другая структура сетки) выполняет настройку предопределённых классов, которые вы можете использовать, добавив их в свою разметку. Это точно так же, как если бы вы сами делали расчёт этих процентов.
        
 
-
        Как вы можете видеть, нам нужно написать очень мало CSS при использовании Skeleton. Он касается всех плавающих для нас, когда мы добавляем классы в нашу разметку. Именно эта способность нести ответственность за компоновку над чем-то еще, что делает использование рамки для сетчатой системы неотразимым выбором!
        
+
        Как вы можете видеть, нам нужно написать очень мало CSS при использовании Skeleton. Он касается всех плавающих для нас, когда мы добавляем классы в нашу разметку. Именно эта способность нести ответственность за компоновку над чем-то ещё, что делает использование рамки для сетчатой системы неотразимым выбором!
        
 
-
        Skeleton - это более простая сетка, чем некоторые из структур, с которыми вы можете столкнуться. Сетки в больших рамках, таких как Bootstrap и Foundation, предлагают больше функциональности и дополнительные точки останова для различной ширины экрана. Тем не менее, все они работают аналогичным образом - добавив определенные классы в свою разметку, вы можете контролировать, как элемент выложен с использованием предопределенной сетки.
        
+
        Skeleton - это более простая сетка, чем некоторые из структур, с которыми вы можете столкнуться. Сетки в больших рамках, таких как Bootstrap и Foundation, предлагают больше функциональности и дополнительные точки останова для различной ширины экрана. Тем не менее, все они работают аналогичным образом - добавив определённые классы в свою разметку, вы можете контролировать, как элемент выложен с использованием предопределённой сетки.
        
 
 
        Родные CSS Сетки с Grid Layout
        
 
-
        В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы еще не можем использовать встроенную сетевую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS (CSS Grid Layout Module).
        
+
        В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы ещё не можем использовать встроенную сетевую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS (CSS Grid Layout Module).
        
 
 
        В настоящее время вы можете использовать только те методы, которые мы покажем вам в браузерах, которые реализуют макет сетки CSS «за флагом» - это означает, что он в настоящее время реализован, но в экспериментальном состоянии, которое вам нужно включить.
        
 
-
        В Firefox, например, вам нужно перейти к URL-адресу about: config, выполнить поиск по предпочтению layout.css.grid.enabled и дважды щелкнуть его, чтобы включить CSS-сетки. Вы можете узнать, как использовать его в других браузерах, посетив Grid by Example.
        
+
        В Firefox, например, вам нужно перейти к URL-адресу about: config, выполнить поиск по предпочтению layout.css.grid.enabled и дважды щёлкнуть его, чтобы включить CSS-сетки. Вы можете узнать, как использовать его в других браузерах, посетив Grid by Example.
        
 
-
        Мы рассмотрели структуру Скелетной сетки выше - как и другие сторонние решетки и даже ручные сетки, для этого требуется добавить <div> для формирования строк, а затем указать количество столбцов, которые будут охватывать элементы в этих рядах.
        
+
        Мы рассмотрели структуру Скелетной сетки выше - как и другие сторонние решётки и даже ручные сетки, для этого требуется добавить <div> для формирования строк, а затем указать количество столбцов, которые будут охватывать элементы в этих рядах.
        
 
 
        С помощью CSS Grid Layout вы можете полностью указать свою сетку в CSS, не добавляя эти вспомогательные классы в разметку вообще. Давайте рассмотрим наш простой пример и посмотрим, как мы будем создавать тот же макет с помощью CSS Grid Layout.
        
 
@@ -510,7 +510,7 @@ body {
   <div class="col span2">16</div>
 </div>
        
 
-
        На этот раз у нас есть родительский <div> с классом обертки (wrapper), а затем все дочерние элементы просто появляются непосредственно внутри обертки - никаких элементов строки. Мы добавили класс к элементам, которые должны охватывать более одного столбца.
        
+
        На этот раз у нас есть родительский <div> с классом обёртки (wrapper), а затем все дочерние элементы просто появляются непосредственно внутри обёртки - никаких элементов строки. Мы добавили класс к элементам, которые должны охватывать более одного столбца.
        
 
 
        Теперь добавьте следующее в элемент {{htmlelement ("style")}}:
        
 
@@ -529,7 +529,7 @@ body {
 
 
        Здесь мы устанавливаем правило .wrapper, поэтому оно составляет 90% от ширины тела, с центром и имеет {{cssxref ("max-width")}} 960px.
        
 
-
        Теперь для свойств сетки CSS. Мы можем объявить сетку, используя значение grid свойства {{cssxref ("display")}}, установить желоб с свойством {{cssxref ("grid-gap")}}, а затем создать сетку из 12 столбцов равной ширине, используя {{cssxref ("grid-template-columns")}}, новую функцию repeat() и новую единицу, определенную для макета сетки - блок fr.
        
+
        Теперь для свойств сетки CSS. Мы можем объявить сетку, используя значение grid свойства {{cssxref ("display")}}, установить жёлоб с свойством {{cssxref ("grid-gap")}}, а затем создать сетку из 12 столбцов равной ширине, используя {{cssxref ("grid-template-columns")}}, новую функцию repeat() и новую единицу, определённую для макета сетки - блок fr.
        
 
 
        Блок fr представляет собой блок фракции - он описывает долю доступного пространства в контейнере сетки. Если все столбцы равны 1fr, каждый из них занимает равное количество места. Это устраняет необходимость вычислять проценты для создания гибкой сетки.
        
 
@@ -567,7 +567,7 @@ body {
 
 
        Попробуйте сохранить и обновить, и вы увидите, что контейнеры охватывают несколько столбцов, если это необходимо. Круто!
        
 
-
        Сетки CSS являются двумерными, так как макет растет и сжимается, элементы остаются выровненными по горизонтали и по вертикали.
        
+
        Сетки CSS являются двумерными, так как макет растёт и сжимается, элементы остаются выровненными по горизонтали и по вертикали.
        
 
 
        Вы можете проверить это, заменив последние 4 col <div> s следующим:
        
 
@@ -576,14 +576,14 @@ body {
 <div class="col span3">15this<br>is<br>less</div>
 <div class="col span2">16</div>
        
 
-
        Здесь мы намеренно добавили некоторые фрагменты строки ({{htmlelement ("br")}}), чтобы заставить некоторые из столбцов стать выше других. Если вы попытаетесь сохранить и обновить, вы увидите, что столбцы регулируют их высоту, как самый высокий контейнер, поэтому все остается аккуратным.
        
+
        Здесь мы намеренно добавили некоторые фрагменты строки ({{htmlelement ("br")}}), чтобы заставить некоторые из столбцов стать выше других. Если вы попытаетесь сохранить и обновить, вы увидите, что столбцы регулируют их высоту, как самый высокий контейнер, поэтому все остаётся аккуратным.
        
 
 
        Окончательный макет выглядит так:
        
 
 
        
 
 
        
-
        Примечание: Если вам не удается заставить этот пример работать, вы можете проверить свой код на нашу законченную версию (также смотрите, как она работает в прямом эфире).
        
+
        Примечание: Если вам не удаётся заставить этот пример работать, вы можете проверить свой код на нашу законченную версию (также смотрите, как она работает в прямом эфире).
        
 
        
 
 
        Другие полезные функции сетки CSS
        
@@ -609,7 +609,7 @@ body {
 
 
        Нам также не нужно использовать маржу для фальшивых желобов или явно рассчитать их ширину - сетка CSS имеет эту функциональность, встроенную прямо в свойство grid-gap.
        
 
-
        Мы просто касаемся поверхности того, что возможно с помощью CSS Grid Layout, но главное, что нужно понять в контексте этой статьи, это то, что вам не нужно создавать сетку с сеткой - она одна. Вы можете написать CSS, который помещает элемент непосредственно в предопределенную сетку. Это первый раз, когда это было возможно с помощью CSS и это улучшится, когда поддержка браузера закрепится.
        
+
        Мы просто касаемся поверхности того, что возможно с помощью CSS Grid Layout, но главное, что нужно понять в контексте этой статьи, это то, что вам не нужно создавать сетку с сеткой - она одна. Вы можете написать CSS, который помещает элемент непосредственно в предопределённую сетку. Это первый раз, когда это было возможно с помощью CSS и это улучшится, когда поддержка браузера закрепится.
        
 
 
        Активное обучение: Напишите свою собственную простую сетку
        
 
@@ -626,7 +626,7 @@ body {
 
 
        Резюме
        
 
-
        Прочитав эту статью, вы должны теперь понять, как grid-схемы и grid-структуры работают в CSS. Вы также заглянули в будущее сетки CSS и теперь должны понимать, что используемые нами grid-сетки - это, по сути, стоп-решение, пока у нас не будет широко распространенного способа достижения этого в CSS.
        
+
        Прочитав эту статью, вы должны теперь понять, как grid-схемы и grid-структуры работают в CSS. Вы также заглянули в будущее сетки CSS и теперь должны понимать, что используемые нами grid-сетки - это, по сути, стоп-решение, пока у нас не будет широко распространённого способа достижения этого в CSS.
        
 
 
        {{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
        
 
diff --git a/files/ru/learn/css/css_layout/index.html b/files/ru/learn/css/css_layout/index.html
index d5bc2e8e58..1fce962206 100644
--- a/files/ru/learn/css/css_layout/index.html
+++ b/files/ru/learn/css/css_layout/index.html
@@ -17,7 +17,7 @@ tags:
   - TopicStub
   - flexbox
   - float
-  - Верстка
+  - Вёрстка
   - Сетка
   - позиционирование
   - разметка страницы
@@ -43,7 +43,7 @@ translation_of: Learn/CSS/CSS_layout
 
 
        Руководство
        
 
-
        Эти разделы содержат инструкции по основным инструментам и методам верстки, доступным в CSS. На последнем уроке у Вас будет возможность оценить понимание пройденного материала посредством вёрстки веб-страницы.
        
+
        Эти разделы содержат инструкции по основным инструментам и методам вёрстки, доступным в CSS. На последнем уроке у Вас будет возможность оценить понимание пройденного материала посредством вёрстки веб-страницы.
        
 
 
        
  
        Введение в CSS вёрстку
        
@@ -54,26 +54,26 @@ translation_of: Learn/CSS/CSS_layout
 
 
        
  
        Flexbox
        
- 
        Flexbox - это метод одномерной верстки для размещения элементов в строках или столбцах. Элементы растягиваются, чтобы заполнить дополнительное пространство и сжимаются, чтобы поместиться в меньшее пространство. Данный раздел объясняет фундаментальные принципы.
        
+ 
        Flexbox - это метод одномерной вёрстки для размещения элементов в строках или столбцах. Элементы растягиваются, чтобы заполнить дополнительное пространство и сжимаются, чтобы поместиться в меньшее пространство. Данный раздел объясняет фундаментальные принципы.
        
  
        Grids
        
- 
        CSS Grid Layout - это двумерная система верстки для веб. Она позволяет вам размещать контент в строках и столбцах и имеет множество возможностей, которые упрощают построение сложных макетов. Этот раздел даст вам все, что нужно знать для начала работы с макетом страницы.
        
+ 
        CSS Grid Layout - это двумерная система вёрстки для веб. Она позволяет вам размещать контент в строках и столбцах и имеет множество возможностей, которые упрощают построение сложных макетов. Этот раздел даст вам все, что нужно знать для начала работы с макетом страницы.
        
  
        Floats
        
- 
        Изначально созданное для плавающих изображений внутри текстовых блоков, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания мульти-колоночной верстки веб-страниц. С появлением Flexbox и Grid оно вернулось к первоначальному предназначению, как объясняется в этом разделе.
        
+ 
        Изначально созданное для плавающих изображений внутри текстовых блоков, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания мульти-колоночной вёрстки веб-страниц. С появлением Flexbox и Grid оно вернулось к первоначальному предназначению, как объясняется в этом разделе.
        
 
        
 
 
        
  
        Позиционирование
        
  
        Позиционирование позволяет вам брать элементы из нормального потока и изменять их поведение, например, заставляет находиться друг под другом или всегда оставаться в одном и том же месте внутри окна просмотра браузера. В этом разделе объясняются различные значения {{cssxref("position")}} и способы их применения.
        
- 
        Мульти-колоночная верстка
        
- 
        Спецификация мульти-колоночной верстки дает вам способ размещения содержимого  в столбцах по аналогии с версткой газет.  Этот раздел объясняет, как использовать эту возможность.
        
- 
        Устаревшие методы верстки
        
- 
        Grid-системы - это очень распространенная возможность, используемая в CSS layouts, и до CSS Grid Layout они, как правило, реализовывались с помощью floats или других возможностей верстки. Вы представляете свою верстку в виде заданного числа столбцов (например, 4 или 6), а затем вы помещаете содержимое в эти воображаемые столбцы. В этом разделе мы рассмотрим, как работают эти старые методы, чтобы вы понимали, как они использовались, если столкнётесь со старыми проектами.
        
+ 
        Мульти-колоночная вёрстка
        
+ 
        Спецификация мульти-колоночной вёрстки даёт вам способ размещения содержимого  в столбцах по аналогии с вёрсткой газет.  Этот раздел объясняет, как использовать эту возможность.
        
+ 
        Устаревшие методы вёрстки
        
+ 
        Grid-системы - это очень распространённая возможность, используемая в CSS layouts, и до CSS Grid Layout они, как правило, реализовывались с помощью floats или других возможностей вёрстки. Вы представляете свою вёрстку в виде заданного числа столбцов (например, 4 или 6), а затем вы помещаете содержимое в эти воображаемые столбцы. В этом разделе мы рассмотрим, как работают эти старые методы, чтобы вы понимали, как они использовались, если столкнётесь со старыми проектами.
        
  
        Поддержка старыми браузерами
        
  
        
- 
        В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы верстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появления новых возможностей, для различных браузеров будут приоритетны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.
        
+ 
        В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы вёрстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появления новых возможностей, для различных браузеров будут приоритетны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.
        
  
        
- 
        Фундаментальное понятие верстки
        
- 
        Оценка ваших знаний различных методов верстки посредством вёрстки веб-страницы.
        
+ 
        Фундаментальное понятие вёрстки
        
+ 
        Оценка ваших знаний различных методов вёрстки посредством вёрстки веб-страницы.
        
 
        
 
 
        Смотрите также
        
diff --git a/files/ru/learn/css/css_layout/introduction/index.html b/files/ru/learn/css/css_layout/introduction/index.html
index 422a215b1c..218e2a5c19 100644
--- a/files/ru/learn/css/css_layout/introduction/index.html
+++ b/files/ru/learn/css/css_layout/introduction/index.html
@@ -7,7 +7,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction
 
 
        {{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}
        
 
-
        В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства {{cssxref("display")}}, и разберем некоторые концепции, которые будут рассмотрены в этой статье. 
        
+
        В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства {{cssxref("display")}}, и разберём некоторые концепции, которые будут рассмотрены в этой статье. 
        @@ -35,7 +35,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction
      • Многоколоночный макет
        • -

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

        +

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

        Normal flow

        @@ -63,7 +63,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction

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

        -

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

        +

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

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

        @@ -77,7 +77,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction

        Свойство display 

        -

        Значения свойства display являются главными методами верстки разметки страницы в CSS. Это свойство позволяет нам менять то, как что-то отображается по умолчанию. Каждый элемент по умолчанию имеет свойство display, влияющее на то, как этот элемент отображается. Например, параграфы на английском располагаются один под другим только потому что они имеют по умолчанию свойство  display: block. Если же вы создадите ссылку внутри параграфа, эта ссылка будет отображаться в общем потоке с остальным текстом, без переноса на новую строку. Это потому что у элемента {{htmlelement("a")}} по умолчанию установлено свойство display: inline.

        +

        Значения свойства display являются главными методами вёрстки разметки страницы в CSS. Это свойство позволяет нам менять то, как что-то отображается по умолчанию. Каждый элемент по умолчанию имеет свойство display, влияющее на то, как этот элемент отображается. Например, параграфы на английском располагаются один под другим только потому что они имеют по умолчанию свойство  display: block. Если же вы создадите ссылку внутри параграфа, эта ссылка будет отображаться в общем потоке с остальным текстом, без переноса на новую строку. Это потому что у элемента {{htmlelement("a")}} по умолчанию установлено свойство display: inline.

        Вы можете изменить дефолтное поведение display. К примеру,  {{htmlelement("li")}} отображается как display: block по умолчанию, это означает что элементы списка отображаются один за другим в нашем документе.Если мы изменим значение display на inline они будут отображаться друг за другом, как это делают слова в предложении. Тот факт, что вы можете изменить значение display для любого элемента означает, что вы можете выбирать HTML элементы по их семантическому значению, не беспокоясь о том как они будут выглядеть. То как они выглядят это то, что вы можете поменять.

        @@ -85,7 +85,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction

        Flexbox

        -

        Flexbox (сокращение от Flexible Box Layout) это модуль, разработанный для облегчения верстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство display: flex для родительского элемента тех элементов, к которым хотите применить этот тип верстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере.

        +

        Flexbox (сокращение от Flexible Box Layout) это модуль, разработанный для облегчения вёрстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство display: flex для родительского элемента тех элементов, к которым хотите применить этот тип вёрстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере.

        Разметка HTML, представленная ниже, состоит из элемента wrapper, включающего в себя три {{htmlelement("div")}} элемента. По умолчанию все они будут изображаться как блочные, один под другим.

        @@ -165,7 +165,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction

        В то время как flexbox предназначен для одномерной разметки, Grid Layout предназначен для двумерной — выстраивая предметы в ряды и столбцы.

        -

        Еще раз, вы можете переключиться на Grid Layout при помощи конкретного значения отображения — display: grid. Пример ниже использует разметку подобную примеру flex, а также мы определяем некоторые дорожки рядов и столбцов в родительском элементе, используя свойства {{cssxref("grid-template-rows")}} и {{cssxref("grid-template-columns")}} соответственно. Мы определили три столбца каждый по 1fr и два ряда по 100px. Мне не надо вводить какие-либо правила для дочерних элементов; они автоматически помещаются в ячейки, созданные нашей сеткой.

        +

        Ещё раз, вы можете переключиться на Grid Layout при помощи конкретного значения отображения — display: grid. Пример ниже использует разметку подобную примеру flex, а также мы определяем некоторые дорожки рядов и столбцов в родительском элементе, используя свойства {{cssxref("grid-template-rows")}} и {{cssxref("grid-template-columns")}} соответственно. Мы определили три столбца каждый по 1fr и два ряда по 100px. Мне не надо вводить какие-либо правила для дочерних элементов; они автоматически помещаются в ячейки, созданные нашей сеткой.

        -

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

        +

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

        Floats

        @@ -266,11 +266,11 @@ translation_of: Learn/CSS/CSS_layout/Introduction
        • left — Элемент выравнивается слева и другие элементы обтекают его справа.
        • right — Элемент выравнивается справа и другие элементы обтекают его слева.
          • -
        • none — Не задает float совсем. Это значение по умолчанию.
          • +
        • none — Не задаёт float совсем. Это значение по умолчанию.
        • inherit — Определяет, что значение свойства float должно быть унаследовано от родительского элемента.
        -

        В примере ниже мы задаем элементу <div> float - left и даем {{cssxref("margin")}} с правой стороны чтобы отталкивать текст от этого элемента. Это дает нам эффект того, что текст оборачивает этот блок и является большей частью того, что вам нужно знать о float, используемых в современном веб-дизайне.

        +

        В примере ниже мы задаём элементу <div> float - left и даём {{cssxref("margin")}} с правой стороны чтобы отталкивать текст от этого элемента. Это даёт нам эффект того, что текст оборачивает этот блок и является большей частью того, что вам нужно знать о float, используемых в современном веб-дизайне.

        @@ -31,7 +31,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто

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

        -

        Наша отправная точка содержит немного очень простого HTML; обертка с классом container внутри которого имеется заголовок и несколько параграфов.

        +

        Наша отправная точка содержит немного очень простого HTML; обёртка с классом container внутри которого имеется заголовок и несколько параграфов.

        {{htmlelement("div")}} с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств {{cssxref("column-count")}} или {{cssxref("column-width")}}. Какое значение вы дадите свойству column-count столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:

        @@ -40,7 +40,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто } -

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

        +

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

         - +
        Цель:Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнем вносить какие-либо изменения.Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнём вносить какие-либо изменения.
        -

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

        +

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

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

        @@ -36,11 +36,11 @@ original_slug: Learn/CSS/CSS_layout/Нормальный_поток

        По умолчанию содержимое элемента уровня блока составляет 100% от ширины его родительского элемента и столь же высок, как и его содержимое. Встроенные элементы высоки и широки, как их содержимое. Вы не можете установить ширину или высоту на встроенные элементы — они просто находятся внутри содержимого элементов блочного уровня. Если вы хотите контролировать размер встроенного элемента вам нужно настроить его так, чтобы он себя вёл как элемент блочного уровня при помощи display: block; (или даже,  display: inline-block;, который смешивает характеристики обоих.).

        -

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

        +

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

        -

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

        +

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

        -

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

        +

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

        Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:

        diff --git a/files/ru/learn/css/css_layout/positioning/index.html b/files/ru/learn/css/css_layout/positioning/index.html index 59669413f4..da8a00b79d 100644 --- a/files/ru/learn/css/css_layout/positioning/index.html +++ b/files/ru/learn/css/css_layout/positioning/index.html @@ -47,7 +47,7 @@ translation_of: Learn/CSS/CSS_layout/Positioning background: yellow; } -

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

        +

        И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!

        Примечание: Вы можете посмотреть живой пример на данном этапе на 1_static-positioning.html (см. исходный код).

        @@ -55,7 +55,7 @@ translation_of: Learn/CSS/CSS_layout/Positioning

        Относительное позиционирование

        -

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

        +

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

        position: relative;
        @@ -120,7 +120,7 @@ span {

        Абсолютное позиционирование

        -

        Абсолютное позиционирование дает совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:

        +

        Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:

        position: absolute;
        @@ -164,16 +164,16 @@ span {

        {{ EmbedLiveSample('Абсолютное_позиционирование', '100%', 420) }}

        -

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

        +

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

        Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} ведут себя по-другому с абсолютным позиционированием. Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха "содержащего элемента" и 30px от левого края (В этом случае "содержащий элемент" является исходным содержащим блоком. См. раздел ниже для дополнительной информации).

        -

        Примечание: Вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить top: 0; bottom: 0; left: 0; right: 0; и margin: 0; для вашего позиционируемого элемента и посмотрите, что произойдет! Потом снова все верните...

        +

        Примечание: Вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить top: 0; bottom: 0; left: 0; right: 0; и margin: 0; для вашего позиционируемого элемента и посмотрите, что произойдёт! Потом снова все верните...

        -

        Примечание: Да, margin-ы все еще влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.

        +

        Примечание: Да, margin-ы все ещё влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.

        @@ -186,7 +186,7 @@ span {

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

        -

        Позиционируемый элемент вложен в {{htmlelement ("body")}} в исходном HTML, но в конечном макете он расположен на 30px от верхнего и левого края страницы. Мы можем изменить контекст позиционирования — относительно какого элемента позиционируется позиционируемый элемент. Это делается путем установки позиционирования на одном из предков элемента — на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен). Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего body:

        +

        Позиционируемый элемент вложен в {{htmlelement ("body")}} в исходном HTML, но в конечном макете он расположен на 30px от верхнего и левого края страницы. Мы можем изменить контекст позиционирования — относительно какого элемента позиционируется позиционируемый элемент. Это делается путём установки позиционирования на одном из предков элемента — на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен). Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего body:

        position: relative;
        @@ -239,7 +239,7 @@ span {

        Введение в z-index

        -

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

        +

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

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

        @@ -250,11 +250,11 @@ span { right: 30px; } -

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

        +

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

        Можете ли вы изменить порядок наложения? Да, можете, используя свойство {{cssxref("z-index")}}. "z-index" это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для определения позиции для таких вещей, как фоновые изображения и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (во всяком случае, для языков, направленных слева на право).

        -

        У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (или что еще вам нравится иметь перед экраном). Значения {{cssxref("z-index")}} влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют z-index auto, что фактически равно 0.

        +

        У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (или что ещё вам нравится иметь перед экраном). Значения {{cssxref("z-index")}} влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют z-index auto, что фактически равно 0.

        Для того чтобы изменить порядок наложения, попробуйте объявить для вашего p:nth-of-type(1) правила:

        @@ -341,7 +341,7 @@ p:nth-of-type(1) { padding: 10px; } -

        top: 0; необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даем ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.

        +

        top: 0; необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даём ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.

        Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним. Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:

        @@ -401,7 +401,7 @@ p:nth-of-type(1) {

        position: sticky

        -

        Доступно другое значение позиции называемое position: sticky, которое несколько новее чем другие. По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определенной пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным.  Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определенной точки, а затем задерживать в верхней части страницы.

        +

        Доступно другое значение позиции называемое position: sticky, которое несколько новее чем другие. По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным.  Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определённой точки, а затем задерживать в верхней части страницы.

      -

      Итак, давайте начнем и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.

      +

      Итак, давайте начнём и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.

      Изменение цвета страницы

      @@ -218,14 +218,14 @@ p, li { border: 5px solid black; } -

      Теперь для {{htmlelement("body")}} элемента. Здесь есть немало деклараций, так что давайте пройдем через них всех по одному:

      +

      Теперь для {{htmlelement("body")}} элемента. Здесь есть немало деклараций, так что давайте пройдём через них всех по одному:

      • width: 600px; — заставляет тело быть всегда 600 пикселей в ширину.
      • margin: 0 auto; — когда вы устанавливаете два значения для таких свойств как margin или padding, первое значение элемента влияет на верхнюю и нижнюю сторону (делает их 0 в данном случае), и второе значение на левую и правую сторону (здесь, auto является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано здесь.
      • background-color: #FF9500; — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для {{htmlelement("html")}} элемента, но не стесняйтесь и экспериментируйте.
      • padding: 0 20px 20px 20px; — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.
        • -
      • border: 5px solid black; — просто устанавливает сплошную черную рамку шириной 5 пикселей со всех сторон тела.
        • +
      • border: 5px solid black; — просто устанавливает сплошную чёрную рамку шириной 5 пикселей со всех сторон тела.

      Позиционирование и стилизация нашего заголовка главной страницы

      @@ -244,10 +244,10 @@ p, li {

      Здесь, мы использовали одно довольно интересное свойство - это text-shadow, которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:

        -
      • Первое значение пикселей задает горизонтальное смещение тени от текста — как далеко она движется поперек: отрицательное значение должно двигать ее влево.
        • -
      • Второе значение пикселей задает вертикальное смещение тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить ее вверх.
        • -
      • Третье значение пикселей задает радиус размытия тени — большее значение будет означать более размытую тень.
        • -
      • Четвертое значение задает основной цвет тени.
        • +
      • Первое значение пикселей задаёт горизонтальное смещение тени от текста — как далеко она движется поперёк: отрицательное значение должно двигать её влево.
        • +
      • Второе значение пикселей задаёт вертикальное смещение тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить её вверх.
        • +
      • Третье значение пикселей задаёт радиус размытия тени — большее значение будет означать более размытую тень.
        • +
      • Четвёртое значение задаёт основной цвет тени.

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

      @@ -259,14 +259,14 @@ p, li { margin: 0 auto; } -

      В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать margin: 0 auto уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что еще. Элемент {{HTMLElement("body")}} является блочным, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются строчными элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью display: block;.

      +

      В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать margin: 0 auto уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что ещё. Элемент {{HTMLElement("body")}} является блочным, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются строчными элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью display: block;.

      -

      Примечание: Приведенные выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для {{HTMLElement("body")}} (600 пикселей). Если ваше изображение больше, тогда оно выйдет за границы {{HTMLElement("body")}} и займет пространство страницы. Чтобы исправить это, вы можете 1) уменьши ширину изображения используя графический редактор, или 2) изменить размер изображения используя CSS путем установки свойства {{cssxref("width")}} для <img> элемента меньшего значения (например 400 px;).

      +

      Примечание: Приведённые выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для {{HTMLElement("body")}} (600 пикселей). Если ваше изображение больше, тогда оно выйдет за границы {{HTMLElement("body")}} и займёт пространство страницы. Чтобы исправить это, вы можете 1) уменьши ширину изображения используя графический редактор, или 2) изменить размер изображения используя CSS путём установки свойства {{cssxref("width")}} для <img> элемента меньшего значения (например 400 px;).

      -

      Примечание: Не стоит беспокоиться, если вы еще не понимаете display: block; и различия между блочным/строчным. Вы поймете, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве display.

      +

      Примечание: Не стоит беспокоиться, если вы ещё не понимаете display: block; и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве display.

      Заключение

      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 1976fc08ea..1efcf60a76 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 @@ -20,16 +20,16 @@ translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
      {{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
      -

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

      +

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

      Где ваш веб-сайт должен располагаться на вашем компьютере?

      -

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

      +

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

      1. Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем web-projects (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.
        2. -
      2. Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите ее test-site (или как-то более творчески).
        3. +
      3. Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите её test-site (или как-то более творчески).

      Небольшое отступление о регистре и пробелах

      @@ -38,14 +38,14 @@ translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
      1. Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в test-site/MyImage.jpg, а затем в другом файле вы пытаетесь вызвать изображение как test-site/myimage.jpg, это может не сработать.
        2. -
      2. Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчеркиваниями: my-file.html лучше чем my_file.html.
        3. +
      3. Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчёркиваниями: my-file.html лучше чем my_file.html.
      -

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

      +

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

      Какую структуру должен иметь ваш веб-сайт?

      -

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

      +

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

      1. index.html: Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем index.html и сохраните его прямо внутри вашей папки test-site.
        2. @@ -55,7 +55,7 @@ translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
      -

      Примечание: На компьютерах под управлением Windows у вас могут возникнуть проблемы с отображением имен файлов, поскольку у Windows есть опция Скрывать расширения для известных типов файлов, включенная по умолчанию. Обычно вы можете отключить ее, перейдя в проводник, выбрать вариант Свойства папки... и снять флажок Скрывать расширения для зарегистрированных типов файлов, затем щёлкнуть OK. Для получения более точной информации, охватывающей вашу версию Windows, вы можете произвести поиск в Интернете.

      +

      Примечание: На компьютерах под управлением Windows у вас могут возникнуть проблемы с отображением имён файлов, поскольку у Windows есть опция Скрывать расширения для известных типов файлов, включённая по умолчанию. Обычно вы можете отключить её, перейдя в проводник, выбрать вариант Свойства папки... и снять флажок Скрывать расширения для зарегистрированных типов файлов, затем щёлкнуть OK. Для получения более точной информации, охватывающей вашу версию Windows, вы можете произвести поиск в Интернете.

      Файловые пути

      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 f3a8d0da2c..399bedd3dd 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 @@ -22,19 +22,19 @@ translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
      {{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
      -

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

      +

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

      -

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

      +

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

      Клиенты и серверы

      -

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

      +

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

        -
      • Клиенты являются обычными пользователями, подключенными к Интернету посредством устройств (например, компьютер подключен к Wi-Fi, или ваш телефон подключен к мобильной сети) и программного обеспечения, доступного на этих устройствах (как правило, браузер, например, Firefox или Chrome).
        • +
      • Клиенты являются обычными пользователями, подключёнными к Интернету посредством устройств (например, компьютер подключён к Wi-Fi, или ваш телефон подключён к мобильной сети) и программного обеспечения, доступного на этих устройствах (как правило, браузер, например, Firefox или Chrome).
      • Серверы - это компьютеры, которые хранят веб-страницы, сайты или приложения. Когда клиентское устройство пытается получить доступ к веб-странице, копия страницы загружается с сервера на клиентский компьютер для отображения в браузере пользователя.
      @@ -51,7 +51,7 @@ translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
      • Ваше Интернет-подключение: Позволяет отправлять и принимать данные по сети. Оно подобно улице между домом и магазином.
      • TCP/IP: Протокол Управления Передачей и Интернет Протокол являются коммуникационными протоколами, которые определяют, каким образом данные должны передаваться по сети. Они как транспортные средства, которые позволяют сделать заказ, пойти в магазин и купить ваши товары. В нашем примере, это как автомобиль или велосипед (или собственные ноги).
        • -
      • DNS: Система Доменных Имён напоминает записную книжку для веб-сайтов. Когда вы вводите веб-адрес в своем браузере, браузер обращается к DNS, чтобы найти реальный адрес веб-сайта, прежде чем он сможет его получить. Браузеру необходимо выяснить, на каком сервере живет сайт, поэтому он может отправлять HTTP-сообщения в нужное место (см. Ниже). Это похоже на поиск адреса магазина, чтобы вы могли попасть в него.
        • +
      • DNS: Система Доменных Имён напоминает записную книжку для веб-сайтов. Когда вы вводите веб-адрес в своём браузере, браузер обращается к DNS, чтобы найти реальный адрес веб-сайта, прежде чем он сможет его получить. Браузеру необходимо выяснить, на каком сервере живёт сайт, поэтому он может отправлять HTTP-сообщения в нужное место (см. Ниже). Это похоже на поиск адреса магазина, чтобы вы могли попасть в него.
      • HTTP: Протокол Передачи Гипертекста - это {{Glossary("Protocol", "протокол")}}, который определяет язык для клиентов и серверов, чтобы общаться друг с другом. Он, как язык, который вы используете, чтобы заказать ваш товар.
      • Файлы компонентов: сайт состоит из нескольких различных файлов, которые подобны различным отделам с товарами в магазине. Эти файлы бывают двух основных типов:
          @@ -66,9 +66,9 @@ translation_of: Learn/Getting_started_with_the_web/How_the_Web_works

          Когда вы вводите веб-адрес в свой браузер (для нашей аналогии - посещаете магазин):

            -
          1. Браузер обращается к DNS серверу и находит реальный адрес сервера, на котором "живет" сайт (Вы находите адрес магазина).
            2. +
          2. Браузер обращается к DNS серверу и находит реальный адрес сервера, на котором "живёт" сайт (Вы находите адрес магазина).
          3. Браузер посылает HTTP запрос к серверу, запрашивая его отправить копию сайта для клиента (Вы идёте в магазин и заказываете товар). Это сообщение и все остальные данные, передаваемые между клиентом и сервером, передаются по интернет-соединению с использованием протокола TCP/IP.
            4. -
          4. Если сервер одобряет запрос клиента, сервер отправляет клиенту статус "200 ОК", который означает: "Конечно, вы можете посмотреть на этот сайт! Вот он", а затем начинает отправку файлов сайта в браузер в виде небольших порций, называемых пакетными данными (магазин выдает вам ваш товар или вам привозят его домой).
            5. +
          5. Если сервер одобряет запрос клиента, сервер отправляет клиенту статус "200 ОК", который означает: "Конечно, вы можете посмотреть на этот сайт! Вот он", а затем начинает отправку файлов сайта в браузер в виде небольших порций, называемых пакетными данными (магазин выдаёт вам ваш товар или вам привозят его домой).
          6. Браузер собирает маленькие куски в полноценный сайт и показывает его вам (товар прибывает к вашей двери — новые вещи, потрясающе!).
          diff --git a/files/ru/learn/getting_started_with_the_web/html_basics/index.html b/files/ru/learn/getting_started_with_the_web/html_basics/index.html index ecfa21217d..c0265eeccc 100644 --- a/files/ru/learn/getting_started_with_the_web/html_basics/index.html +++ b/files/ru/learn/getting_started_with_the_web/html_basics/index.html @@ -18,7 +18,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics

          Что такое HTML на самом деле?

          -

          HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда {{Glossary("element", "элементов")}}, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определенным образом. Ограждающие {{Glossary("tag", "теги")}} могут сделать слово или изображение ссылкой на что-то еще, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмем следующую строку контента:

          +

          HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда {{Glossary("element", "элементов")}}, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие {{Glossary("tag", "теги")}} могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:

          Моя кошка очень раздражена
          @@ -35,8 +35,8 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics

          Главными частями нашего элемента являются:

            -
          1. Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, "p"), заключенного в открывающие и закрывающие угловые скобки.  Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
            2. -
          2. Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространенных ошибок начинающих и может приводить к странным результатам.
            3. +
          3. Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, "p"), заключённого в открывающие и закрывающие угловые скобки.  Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
            4. +
          4. Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
          5. Контент (Content): Это контент элемента, который в данном случае является просто текстом.
          6. Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.
          @@ -52,7 +52,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics
          1. Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
          2. Имя атрибута, за которым следует знак равенства.
            3. -
          3. Значение атрибута, заключенное с двух сторон в кавычки.
            4. +
          4. Значение атрибута, заключённое с двух сторон в кавычки.

          Вложенные элементы

          @@ -61,7 +61,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics 
          <p>Моя кошка <strong>очень</strong> раздражена.</p>
          -

          Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент {{htmlelement("p")}}, затем элемент {{htmlelement("strong")}}, потом мы должны закрыть сначала элемент {{htmlelement("strong")}}, затем {{htmlelement("p")}}. Приведенное ниже неверно:

          +

          Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент {{htmlelement("p")}}, затем элемент {{htmlelement("strong")}}, потом мы должны закрыть сначала элемент {{htmlelement("strong")}}, затем {{htmlelement("p")}}. Приведённое ниже неверно:

          <p>Моя кошка <strong>очень раздражена.</p></strong>
          @@ -69,7 +69,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics

          Пустые элементы

          -

          Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмем  элемент {{htmlelement("img")}}, который уже имеется в нашем HTML:

          +

          Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмём  элемент {{htmlelement("img")}}, который уже имеется в нашем HTML:

          <img src="images/firefox-icon.png" alt="Моё тестовое изображение">
          @@ -77,7 +77,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics

          Анатомия HTML документа

          -

          Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернемся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):

          +

          Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):

          <!DOCTYPE html>
 <html>
@@ -93,12 +93,12 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics
 
          Здесь мы имеем:
          
 
 
            
- 
          • <!DOCTYPE html> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включен для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
            • 
+ 
          • <!DOCTYPE html> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
            • 
  
          • <html></html> — элемент {{htmlelement("html")}}. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
            • 
  
          • <head></head> — элемент {{htmlelement("head")}}. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
            • 
  
          • <body></body> — элемент {{htmlelement("body")}}. В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то еще.
            • 
  
          • <meta charset="utf-8"> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
            • 
- 
          • <title></title> — элемент {{htmlelement("title")}}. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете ее в закладки/избранное.
            • 
+ 
          • <title></title> — элемент {{htmlelement("title")}}. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.
            • 
 
          
 
 
          Изображения
          
@@ -118,7 +118,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics
 
 
          
 
-
          Альтернативный текст - это "пояснительный текст". Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передает изображение. В этом примере наш текст "My test image" ("Моё тестовое изображение") не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет "The Firefox logo: a flaming fox surrounding the Earth" ("Логотип Firefox: огненный Лис вокруг Земли").
          
+
          Альтернативный текст - это "пояснительный текст". Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст "My test image" ("Моё тестовое изображение") не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет "The Firefox logo: a flaming fox surrounding the Earth" ("Логотип Firefox: огненный Лис вокруг Земли").
          
 
 
          Сейчас попробуйте придумать более подходящий альтернативный текст для вашего изображения.
          
 
@@ -132,7 +132,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics
 
 
          Заголовки
          
 
-
          Элементы заголовка позволяют вам указывать определенные части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков {{htmlelement("h1")}}–{{htmlelement("h6")}}, хотя обычно вы будете использовать не более 3-4 :
          
+
          Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков {{htmlelement("h1")}}–{{htmlelement("h6")}}, хотя обычно вы будете использовать не более 3-4 :
          
 
 
          <h1>Мой главный заголовок</h1>
 <h2>Мой заголовок верхнего уровня</h2>
@@ -151,7 +151,7 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics
 
 
          Списки
          
 
-
          Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространенными типами списков являются нумерованные и ненумерованные списки:
          
+
          Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:
          
 
 
            
  
          1. Ненумерованные списки - это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент {{htmlelement("ul")}}.
            2. 
@@ -201,11 +201,11 @@ translation_of: Learn/Getting_started_with_the_web/HTML_basics
 
            href сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference ("гипертекстовая ссылка").
    -

    Теперь добавьте ссылку на вашу страницу, если вы еще не сделали этого.

    +

    Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.

    Заключение

    -

    Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете посмотреть ее здесь):
    +

    Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете посмотреть её здесь):

    A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

    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 73be1678c7..f31d6ba696 100644 --- a/files/ru/learn/getting_started_with_the_web/index.html +++ b/files/ru/learn/getting_started_with_the_web/index.html @@ -25,9 +25,9 @@ translation_of: Learn/Getting_started_with_the_web

    История вашего первого веб-сайта

    -

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

    +

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

    -

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

    +

    Прорабатывая статьи, перечисленные ниже по порядку, вы пройдёте путь от нуля до создания своей первой веб-страницы. Ну что, давайте начнём!

    Установка базового программного обеспечения

    @@ -35,23 +35,23 @@ translation_of: Learn/Getting_started_with_the_web

    Каким должен быть ваш веб-сайт?

    -

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

    +

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

    Работа с файлами

    -

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

    +

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

    Основы HTML

    -

    Язык гипертекстовой разметки (Hypertext Markup Language, HTML) - это код, который вы используете для структурирования веб-содержимого и придания ему смысла и цели. Например, является ли мое содержимое набором абзацев, либо списком маркированных пунктов? Нужно ли вставить изображения на мою страницу? Есть ли у меня таблица данных? Не перегружая вас, статья Основы HTML предоставляет достаточно информации для вашего знакомства с HTML.

    +

    Язык гипертекстовой разметки (Hypertext Markup Language, HTML) - это код, который вы используете для структурирования веб-содержимого и придания ему смысла и цели. Например, является ли моё содержимое набором абзацев, либо списком маркированных пунктов? Нужно ли вставить изображения на мою страницу? Есть ли у меня таблица данных? Не перегружая вас, статья Основы HTML предоставляет достаточно информации для вашего знакомства с HTML.

    Основы CSS

    -

    Каскадные таблицы стилей (Cascading Stylesheets, CSS) - это код, который вы используете для стилизации своего веб-сайта. Например, хотите ли вы, чтобы текст был черным или красным? Где должно быть нарисовано содержимое на экране? Какие фоновые изображения и цвета должны быть использованы, чтобы украсить ваш веб-сайт? Основы CSS проведет вас через то, что вам нужно знать, чтобы начать.

    +

    Каскадные таблицы стилей (Cascading Stylesheets, CSS) - это код, который вы используете для стилизации своего веб-сайта. Например, хотите ли вы, чтобы текст был черным или красным? Где должно быть нарисовано содержимое на экране? Какие фоновые изображения и цвета должны быть использованы, чтобы украсить ваш веб-сайт? Основы CSS проведёт вас через то, что вам нужно знать, чтобы начать.

    Основы JavaScript

    -

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

    +

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

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

    @@ -59,7 +59,7 @@ translation_of: Learn/Getting_started_with_the_web

    Как работает Интернет

    -

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

    +

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

    Смотрите также

    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 a8728f3cf7..33b1095fa4 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 @@ -26,7 +26,7 @@ original_slug: Learn/Getting_started_with_the_web/Установка_базов

    Какие инструменты используют профессионалы?

      -
    • Компьютер. Может быть, это звучит очевидно для некоторых людей, но некоторые из вас читают эту статью с телефона или библиотечного компьютера. Для серьезной веб-разработки, лучше приобрести настольный компьютер (Windows, Mac или Linux).
      • +
    • Компьютер. Может быть, это звучит очевидно для некоторых людей, но некоторые из вас читают эту статью с телефона или библиотечного компьютера. Для серьёзной веб-разработки, лучше приобрести настольный компьютер (Windows, Mac или Linux).
    • Текстовый редактор, чтобы писать код. Это может быть текстовый редактор (например, 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, чтобы создавать изображения для ваших веб-страниц.
      • diff --git a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html index 5cdf99a8da..f5c2597f08 100644 --- a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html @@ -40,7 +40,7 @@ translation_of: Learn/Getting_started_with_the_web/JavaScript_basics

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

      -

      Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придется начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать "hello world!" пример (стандарт в начальных примерах программирования).

      +

      Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придётся начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать "hello world!" пример (стандарт в начальных примерах программирования).

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

      @@ -65,7 +65,7 @@ myHeading.textContent = 'Hello world!';

      Что произошло?

      -

      Итак, ваш заголовок текста был изменен на "Hello world!" с помощью JavaScript. Мы сделали это с помощью вызова функции {{domxref("Document.querySelector", "querySelector()")}}, захватив ссылку на наш заголовок и сохранив её в переменной, названной myHeading. Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.

      +

      Итак, ваш заголовок текста был изменён на "Hello world!" с помощью JavaScript. Мы сделали это с помощью вызова функции {{domxref("Document.querySelector", "querySelector()")}}, захватив ссылку на наш заголовок и сохранив её в переменной, названной myHeading. Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.

      После этого, вы устанавливаете значение переменной myHeading в {{domxref("Node.textContent", "textContent")}} свойство (которое представляет собой контент заголовка) "Hello world!".

      @@ -175,7 +175,7 @@ myVariable = 'Steve';

      Операторы

      -

      {{Glossary("operator")}} — это математический символ, который производит результат, основанный на двух значениях (или переменных). В приведенной ниже таблице вы можете увидеть некоторые из наиболее простых операторов, наряду с некоторыми примерами, которые опробуете в JavaScript консоли.

      +

      {{Glossary("operator")}} — это математический символ, который производит результат, основанный на двух значениях (или переменных). В приведённой ниже таблице вы можете увидеть некоторые из наиболее простых операторов, наряду с некоторыми примерами, которые опробуете в JavaScript консоли.

      @@ -199,7 +199,7 @@ myVariable = 'Steve'; @@ -242,7 +242,7 @@ myVariable = 'Steve';

      Условия

      -

      Условия — это кодовые структуры, которые позволяют вам проверять, истинно или ложно выражение, а затем выполнить другой код в зависимости от результата. Самая распространенная форма условия называется, if ... else. Например:

      +

      Условия — это кодовые структуры, которые позволяют вам проверять, истинно или ложно выражение, а затем выполнить другой код в зависимости от результата. Самая распространённая форма условия называется, if ... else. Например:

      var iceCream = 'chocolate';
 if (iceCream === 'chocolate') {
@@ -255,7 +255,7 @@ if (iceCream === 'chocolate') {
 
 
      Функции
      
 
-
      {{Glossary("Function", "Функции")}} - способ упаковки функциональности, которую вы хотите использовать повторно. Всякий раз, когда вам нужна определенная процедура, вы можете просто вызвать функцию по её имени, а не переписывать весь код каждый раз. Вы уже видели некоторые функции, описанные выше, например:
      
+
      {{Glossary("Function", "Функции")}} - способ упаковки функциональности, которую вы хотите использовать повторно. Всякий раз, когда вам нужна определённая процедура, вы можете просто вызвать функцию по её имени, а не переписывать весь код каждый раз. Вы уже видели некоторые функции, описанные выше, например:
      
 
 
        
  
      1. 
@@ -286,7 +286,7 @@ multiply(20,20);
 multiply(0.5,3);
      -

      Примечание: Инструкция return сообщает браузеру, что нужно вернуть переменную result из функции, которую можно будет использовать. Это необходимо потому, что переменные, определенные внутри функций, доступны только внутри этих функций. Это называется {{Glossary("Scope", "областью видимости")}} переменной. (Читайте больше об области видимости переменных.)

      +

      Примечание: Инструкция return сообщает браузеру, что нужно вернуть переменную result из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется {{Glossary("Scope", "областью видимости")}} переменной. (Читайте больше об области видимости переменных.)

      События

      @@ -351,7 +351,7 @@ myImage.onclick = function() {

      Добавление персонального приветственного сообщения

      -

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

      +

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

      1. В index.html, добавьте следующую строку перед элементом {{htmlelement("script")}}: @@ -368,7 +368,7 @@ var myHeading = document.querySelector('h1'); localStorage.setItem('name', myName); myHeading.textContent = 'Mozilla is cool, ' + myName; } - Эта функция содержит функцию prompt(), которая вызывает диалоговое окно, немного похожее на alert() кроме того, что prompt() просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает OK. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием localStorage, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию setItem() из localStorage для создания и хранения данных в свойстве под названием 'name', и устанавливаем это значение в переменную myName, которая содержит имя введенное пользователем. В конце мы устанавливаем textContent заголовку в виде строки и имени пользователя.
        2. + Эта функция содержит функцию prompt(), которая вызывает диалоговое окно, немного похожее на alert() кроме того, что prompt() просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает OK. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием localStorage, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию setItem() из localStorage для создания и хранения данных в свойстве под названием 'name', и устанавливаем это значение в переменную myName, которая содержит имя введённое пользователем. В конце мы устанавливаем textContent заголовку в виде строки и имени пользователя.
      2. Затем добавьте блок if ... else - мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке: 
        if(!localStorage.getItem('name')) {
   setUserName();
@@ -376,7 +376,7 @@ var myHeading = document.querySelector('h1');
        var storedName = localStorage.getItem('name'); myHeading.textContent = 'Mozilla is cool, ' + storedName; } - Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде !) чтобы проверить, существуют ли данные в пункте name. Если нет, то функция setUserName() запускается для их создания. Если данные существуют (то есть, пользователь установил его во время предыдущего посещения), мы извлекаем сохраненное имя, с помощью getItem() и устанавливаем textContent заголовку в виде строки плюс имя пользователя, так же, как мы делали внутри setUserName().
        3. + Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде !) чтобы проверить, существуют ли данные в пункте name. Если нет, то функция setUserName() запускается для их создания. Если данные существуют (то есть, пользователь установил его во время предыдущего посещения), мы извлекаем сохранённое имя, с помощью getItem() и устанавливаем textContent заголовку в виде строки плюс имя пользователя, так же, как мы делали внутри setUserName().
      3. Наконец, установите обработчик события onclick на кнопку. При нажатии кнопки запускается функция setUserName(). Это позволяет пользователю установить новое имя, всякий раз, когда он захочет, нажатием кнопки: 
        myButton.onclick = function() {
   setUserName();
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 afa0a343df..bf50ebe6c6 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
@@ -21,14 +21,14 @@ translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
 
 
        Какие существуют варианты?
        
 
-
        Публикация веб-сайта это не простая тема, главным образом, потому что существует много различных способов сделать это. В этой статье мы не стремимся документировать все возможные методы. Скорее, мы обсудим плюсы и минусы трех обширных стратегий с точки зрения новичка, а затем вы пройдете через один метод, который будет работать в настоящее время.
        
+
        Публикация веб-сайта это не простая тема, главным образом, потому что существует много различных способов сделать это. В этой статье мы не стремимся документировать все возможные методы. Скорее, мы обсудим плюсы и минусы трёх обширных стратегий с точки зрения новичка, а затем вы пройдёте через один метод, который будет работать в настоящее время.
        
 
 
        Получение хостинга и доменного имени
        
 
 
        Чтобы иметь больший контроль над контентом и внешним видом веб-сайта, большинство людей предпочитают покупать веб-хостинг и доменное имя:
        
 
 
          
- 
        • Хостинг — арендованное файловое пространство на веб-сервере хостинговой компании. Вы размещаете ваши файлы веб-сайта в этом пространстве, и веб-сервер выдает контент для веб-пользователей, которые запрашивают его.
          • 
+ 
        • Хостинг — арендованное файловое пространство на веб-сервере хостинговой компании. Вы размещаете ваши файлы веб-сайта в этом пространстве, и веб-сервер выдаёт контент для веб-пользователей, которые запрашивают его.
          • 
  
        • Доменное имя — уникальный адрес по которому люди могут найти ваш веб-сайт, например http://www.mozilla.org или http://www.bbc.co.uk. Вы можете арендовать доменное имя на столько лет, сколько захотите (минимум на 1 год) у регистратора доменов.
          • 
 
        
 
@@ -41,7 +41,7 @@ translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
 
        Советы по поиску хостингов и доменов
        
 
 
          
- 
        • Здесь мы не продвигаем какие-то конкретные хостинговые компании. Чтобы найти хостинг и регистратора доменных имен, просто поищите "веб-хостинг" и "доменные имена". Во всех таких сервисах есть функция, позволяющая вам проверить, доступно ли имя домена, или кто-то другой уже зарегистрировал его. 
          • 
+ 
        • Здесь мы не продвигаем какие-то конкретные хостинговые компании. Чтобы найти хостинг и регистратора доменных имён, просто поищите "веб-хостинг" и "доменные имена". Во всех таких сервисах есть функция, позволяющая вам проверить, доступно ли имя домена, или кто-то другой уже зарегистрировал его. 
          • 
  
        • Ваш домашний или рабочий {{Glossary("ISP", "Интернет-провайдер")}} может предоставлять хостинговые услуги для небольших веб-сайтов. Набор возможностей в таком случае может быть ограничен, но, тем не менее, он может отлично подойти для ваших первых экспериментов - свяжитесь с ними и узнайте! 
          • 
  
        • Также есть несколько бесплатных сервисов, таких как Neocities, Blogspot, и Wordpress. Опять же, вы получаете то, за что платите, но они идеально подходят для ваших первоначальных экспериментов. Бесплатные сервисы по большей части не требуют FTP-клиентов - вы можете перетаскивать ваши файлы напрямую в веб-интерфейсе.
          • 
  
        • Иногда компании предлагают одновременно и хостинг и домен.
          • 
@@ -52,7 +52,7 @@ translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
 
          Некоторые сервисы позволяют вам опубликовать сайт:
          
 
 
            
- 
          • GitHub - это "социальная сеть программистов". С помощью нее можно загружать репозитории с вашими разработками для хранения в Git - систему контроля версий. По умолчанию все разработки хранятся с открытым исходным кодом, а это значит, что ваш код будет доступен любому - участники могут по нему учиться либо же предлагать свои улучшения. Вы также можете объединяться с другими кодерами! Это очень большое и полезное сообщество, в чьи ряды лучше вступить, и Git/GitHub это очень популярная система контроля версий — большинство компаний сейчас использует ее для работы. GitHub имеет очень полезную функцию GitHub pages, с помощью которой вы сможете опубликовать ваш код (ваш сайт) в интернете.
            • 
+ 
          • GitHub - это "социальная сеть программистов". С помощью неё можно загружать репозитории с вашими разработками для хранения в Git - систему контроля версий. По умолчанию все разработки хранятся с открытым исходным кодом, а это значит, что ваш код будет доступен любому - участники могут по нему учиться либо же предлагать свои улучшения. Вы также можете объединяться с другими кодерами! Это очень большое и полезное сообщество, в чьи ряды лучше вступить, и Git/GitHub это очень популярная система контроля версий — большинство компаний сейчас использует её для работы. GitHub имеет очень полезную функцию GitHub pages, с помощью которой вы сможете опубликовать ваш код (ваш сайт) в интернете.
            • 
  
          • Google App Engine - это мощная платформа, которая позволяет создавать и запускать приложения в инфраструктуре Google — нужно ли вам создать многоуровневое веб-приложение с нуля или разместить статический веб-сайт. Смотрите как разместить ваш веб-сайт на Google App Engine чтобы узнать больше информации.
            • 
 
          
 
@@ -107,7 +107,7 @@ translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
 
          У всех операционных систем есть командная строка:
          
 
 
            
- 
          • Windows: Командная строка. Чтобы открыть её нажмите клавишу Windows, затем введите Командная строка в поле поиска, и выберите её в появившемся списке. Заметьте, что Windows имеет свои собственные соглашения команд, отличные от Linux и OS X, поэтому приведенные ниже команды могут отличаться на вашем компьютере.
            • 
+ 
          • Windows: Командная строка. Чтобы открыть её нажмите клавишу Windows, затем введите Командная строка в поле поиска, и выберите её в появившемся списке. Заметьте, что Windows имеет свои собственные соглашения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
            • 
  
          • OS X: Terminal можно найти в Приложения > Утилиты.
            • 
  
          • Linux: Обычно вы можете вытащить терминал с помощью Ctrl + Alt + T. Если это не сработает, найдите Терминал в панели приложений или меню.
            • 
 
          
@@ -115,14 +115,14 @@ translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
 
          Сначала это может показаться немного страшным, но не волнуйтесь - вы скоро освоите основы. Вы говорите компьютеру сделать что-то в терминале, введя команду и нажав Enter.
          
 
 
            
- 
          1. Укажите в командной строке каталог test-site (или другое название каталога, содержащего ваш сайт). Для этого используйте команду cd (т.е. «change directory»). Вот то, что вы наберете, если разместили свой веб-сайт в каталоге под названием test-site на рабочем столе:
+ 
          2. Укажите в командной строке каталог test-site (или другое название каталога, содержащего ваш сайт). Для этого используйте команду cd (т.е. «change directory»). Вот то, что вы наберёте, если разместили свой веб-сайт в каталоге под названием test-site на рабочем столе:
 
   
            cd Desktop/test-site
            
  
            3. 
  
          3. Когда командная строка указывает внутрь вашего каталога веб-сайта, введите следующую команду, которая сообщает инструменту git, чтобы он превратил каталог в репозиторий git:
   
            git init
            
  
            4. 
- 
          4. Далее вернемся к сайту GitHub. На текущей странице вас интересует раздел "…or push an existing repository from the command line". Вы должны увидеть две строки кода в этом разделе. Скопируйте всю первую строку, вставьте ее в командную строку и нажмите Enter. Команда должна выглядеть примерно так:
+ 
          5. Далее вернёмся к сайту GitHub. На текущей странице вас интересует раздел "…or push an existing repository from the command line". Вы должны увидеть две строки кода в этом разделе. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:
   
            git remote add origin https://github.com/bobsmith/bobsmith.github.io.git
            
  
            6. 
  
          6. Далее введите следующие две команды, нажимая Enter после каждой. Это подготовит код к загрузке на GitHub, и укажет Git управлять этими файлами.
@@ -132,7 +132,7 @@ git commit -m 'adding my files to my repository'
      4. Наконец, загрузите код на GitHub - вернитесь на веб-страницу GitHub, на которой вы находились, и введите в терминал команду: 
        git push -u origin master
        5. -
      5. Теперь, когда вы перейдете по веб-адресу, созданному в GitHub, в новом окне браузера (username.github.io), вы увидите ваш сайт онлайн! Разошлите ссылку вашим друзьям, пусть оценят ваше мастерство.
        6. +
      6. Теперь, когда вы перейдёте по веб-адресу, созданному в GitHub, в новом окне браузера (username.github.io), вы увидите ваш сайт онлайн! Разошлите ссылку вашим друзьям, пусть оценят ваше мастерство.
      @@ -141,7 +141,7 @@ git commit -m 'adding my files to my repository'

      Дальнейшее изучение GitHub

      -

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

      +

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

      git add --all
 git commit -m 'another commit'
@@ -163,7 +163,7 @@ git push
    • Что такое веб-сервер?
    • Что такое доменные имена?
    • Сколько стоит сделать что-то в Интернете?
      • -
    • Развертывание сайта: хороший курс от Codecademy, который забегает немного вперёд и показывает некоторые дополнительные техники.
      • +
    • Развёртывание сайта: хороший курс от Codecademy, который забегает немного вперёд и показывает некоторые дополнительные техники.
    • Cheap or Free Static Website Hosting, статья написанная Скоттом Мюрреем содержит некоторые полезные идеи о доступных сервисах.
      • 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 7c74a04194..e7ab712e26 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 @@ -31,7 +31,7 @@ original_slug: Learn/Getting_started_with_the_web/Веб_и_веб_станда

      Веб-стандарты - это технологии, используемые для создания веб страниц. Стандарты существуют в виде технической документации (спецификаций), которая точно описывает как та, или иная технология должна работать. Документация никак не поможет изучить то, как пользоваться описываемыми в ней технологиями (вот почему существует сайт MDN Web Docs). Она используются разработчиками ПО для внедрения технологий (например, в веб браузеры).

      -

      В качестве примера приведем стандарт HTML Living Standard. Он описывает как HTML (все элементы HTML, связанные с ними API и остальные близкие технологии) должны быть реализованы.

      +

      В качестве примера приведём стандарт HTML Living Standard. Он описывает как HTML (все элементы HTML, связанные с ними API и остальные близкие технологии) должны быть реализованы.

      Веб-стандарты создаются организациями стандартов — институтами, которые приглашают группы людей из различных компаний для согласования того, как технологии должны применяться наиболее эффективным образом в рассматриваемых случаях. Самая известная организация веб-стандартов - W3C. Существуют и другие: WHATWG (ответственны за модернизацию языка html), ECMA (выпускают стандарты языка ECMAScript, на котором построен JavaScript), Khronos (создают технологии для 3D графики, например WebGL).

      @@ -45,7 +45,7 @@ original_slug: Learn/Getting_started_with_the_web/Веб_и_веб_станда

      Не разорви сеть

      -

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

      +

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

      Being a web developer is good

      diff --git a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html index c6ef10460d..69be6b47d2 100644 --- a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -26,7 +26,7 @@ translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_l

      Перво-наперво: планирование

      -

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

      +

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

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

      @@ -71,7 +71,7 @@ translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_l

      Чтобы выбрать изображение, перейдите в Google Картинки и найдите что-нибудь подходящее.

        -
      1. Когда вы найдете изображение, которое хотели, щёлкните по нему.
        2. +
      2. Когда вы найдёте изображение, которое хотели, щёлкните по нему.
      3. Нажмите кнопку В полном размере (View image).
      4. На следующей странице, правым щелчком мыши на изображении (Ctrl + клик на Mac), выберите Сохранить изображение как... (Save Image As...), и выберите место для сохранения вашего изображения. В качестве альтернативы, скопируйте адрес изображения из адресной строки браузера для последующего использования.
      @@ -91,7 +91,7 @@ translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_l

      Чтобы выбрать шрифт:

        -
      1. Перейдите на Google Fonts и прокрутите список вниз, пока не найдете шрифт, который вам понравится. Вы также можете использовать элементы управления справа для дальнейшей фильтрации результатов.
        2. +
      2. Перейдите на Google Fonts и прокрутите список вниз, пока не найдёте шрифт, который вам понравится. Вы также можете использовать элементы управления справа для дальнейшей фильтрации результатов.
      3. Щёлкните по кнопке "плюс" рядом со шрифтом, который вы хотите выбрать.
      4. Щёлкните по кнопке "* Family Selected" на панели в нижней части страницы. ("*" зависит от того, сколько шрифтов вы выбрали)
      5. В всплывающем окне вы можете увидеть и скопировать строки кода, которые предоставляет Google, чтобы сохранить их позже в вашем текстовом редакторе.
        6. 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 2c51073d15..5cbf27d355 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 @@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages ---

        Эти советы основаны на общих знаниях и экспериментах.

        -

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

        +

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

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

        @@ -16,7 +16,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages

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

        -

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

        +

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

        Такие инструменты, как HTML Tidy , могут автоматически убирать начальные пробелы и лишние пустые строки из допустимого источника HTML. Другие инструменты могут «сжимать» JavaScript, переформатируя источник или запутывая источник и заменяя длинные идентификаторы на более короткие версии

        @@ -24,15 +24,15 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages

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

        -

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

        +

        В зависимости от настроек кэша браузера он может отправить запрос с заголовком If-Modified-Since для каждого ссылочного файла, спрашивая, был ли файл изменён с момента последней загрузки. Слишком много времени, затрачиваемое на запрос времени последнего изменения указанных файлов, может задержать первоначальное отображение веб-страницы, так как браузер должен проверить время изменения каждого из этих файлов перед отображением страницы.

        -

        Если вы часто используете фоновые изображения в своем CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кэширование одного изображения может помочь сократить время загрузки страницы.

        +

        Если вы часто используете фоновые изображения в своём CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кэширование одного изображения может помочь сократить время загрузки страницы.

        Используйте сеть доставки (и дистрибуции) содержимого (Content Delivery Network (CDN))

        -

        Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединенных Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.

        +

        Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединённых Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.

        -

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

        +

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

        Дальнейшее чтение:

        @@ -50,7 +50,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages

        Убедитесь, что любой контент, который может быть кэширован, кэширован и имеет подходящее время истечения.

        -

        В частности, обратите внимание на  заголовок Last-Modified. Это позволяет эффективно кэшировать страницы; с помощью этого заголовка агенту пользователя передается информация о файле, который он хочет загрузить, например, когда он был последний раз изменен. Большинство веб-серверов автоматически добавляют заголовок Last-Modified к статическим страницам (напр. .html, .css), на основе даты последнего изменения, хранящейся в файловой системе. С динамическими страницами (напр. .php, .aspx), это, конечно, не может быть сделано, и заголовок не отправляется.

        +

        В частности, обратите внимание на  заголовок Last-Modified. Это позволяет эффективно кэшировать страницы; с помощью этого заголовка агенту пользователя передаётся информация о файле, который он хочет загрузить, например, когда он был последний раз изменён. Большинство веб-серверов автоматически добавляют заголовок Last-Modified к статическим страницам (напр. .html, .css), на основе даты последнего изменения, хранящейся в файловой системе. С динамическими страницами (напр. .php, .aspx), это, конечно, не может быть сделано, и заголовок не отправляется.

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

        @@ -64,9 +64,9 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages

        Оптимально размещайте компоненты на странице

        -

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

        +

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

        -

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

        +

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

        Уменьшайте количество встроенных скриптов

        @@ -78,7 +78,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages

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

        -

        Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, HTML Tidy может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьезными ошибками разметки

        +

        Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, HTML Tidy может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьёзными ошибками разметки

        Разделяйте ваш контент

        @@ -136,7 +136,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages

        Сделайте сценарии JavaScript такими, чтобы они были совместимы как с async, так и с defer, и по возможности используйте async, особенно если у вас есть несколько тегов script.

        -

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

        +

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

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

        diff --git a/files/ru/learn/html/howto/index.html b/files/ru/learn/html/howto/index.html index c4f9f46583..79ecb8bac7 100644 --- a/files/ru/learn/html/howto/index.html +++ b/files/ru/learn/html/howto/index.html @@ -77,13 +77,13 @@ original_slug: Learn/HTML/Рецепты

        Необычные или продвинутые проблемы

        -

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

        +

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

        Формы

        -

        Форма это сложная HTML структура предназначенная для отправки данных с веб-страницы на веб-сервер. Мы призываем вас просмотреть наше полное посвященное руководство. Вот где вы должны начать:

        +

        Форма это сложная HTML структура предназначенная для отправки данных с веб-страницы на веб-сервер. Мы призываем вас просмотреть наше полное посвящённое руководство. Вот где вы должны начать:

        • Как создать простую Веб-форму
          • diff --git a/files/ru/learn/html/index.html b/files/ru/learn/html/index.html index 0727a2b8bd..724e99ac8a 100644 --- a/files/ru/learn/html/index.html +++ b/files/ru/learn/html/index.html @@ -19,7 +19,7 @@ translation_of: Learn/HTML

          Путь обучения (образовательная траектория)

          -

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

          +

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

          • "CSS (Каскадные таблицы стилей)", и как их использовать для оформления (стилизации) HTML-документа (например, изменение шрифта и его размера, добавление границы и теней для элементов, разбиение страницы на несколько столбцов, добавление анимации и других визуальных эффектов).
            • @@ -36,19 +36,19 @@ translation_of: Learn/HTML
            Введение в HTML
            -
            Этот модуль дает основу, которая позволит вам использовать важные понятия и синтаксис, вы рассмотрите применение HTML к тексту, узнаете как создать гиперссылки и как использовать HTML для структурирования веб-страницы.
            +
            Этот модуль даёт основу, которая позволит вам использовать важные понятия и синтаксис, вы рассмотрите применение HTML к тексту, узнаете как создать гиперссылки и как использовать HTML для структурирования веб-страницы.
            Мультимедиа и встраивание
            В этом модуле рассматривается использование HTML для подключения мультимедиа-контента к вашим веб-страницам, включая различные способы встраивания изображений, видео и аудио и даже других веб-страниц.
             
            HTML Таблицы
            Представление табличных данных на веб-странице в понятном, {{glossary("Accessibility", "доступном")}} образе, может стать проблемой. Этот модуль описывает основы табличной разметки, а также более сложные функции, такие как реализация подписок и резюме.
            HTML Формы
            -
            Формы - очень важная часть интернета, они  обеспечивают  большую часть функциональных возможностей, необходимых для взаимодействия с веб-сайтом, например, регистрация и вход в систему, отправка отзывов, покупка продуктов и многое другое. В этом модуле вы начнете с создания частей форм на стороне клиента.
            +
            Формы - очень важная часть интернета, они  обеспечивают  большую часть функциональных возможностей, необходимых для взаимодействия с веб-сайтом, например, регистрация и вход в систему, отправка отзывов, покупка продуктов и многое другое. В этом модуле вы начнёте с создания частей форм на стороне клиента.

            Решение общих HTML задач

            -

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

            +

            Использование HTML для решения общих задач содержит ссылки на разделы контента, объясняющего, как использовать HTML для решения очень распространённых проблем при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение содержимого, создание базовой формы и т.д.

            Смотрите также:

            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 3e05c04ea4..4f401ed57b 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 @@ -1,5 +1,5 @@ --- -title: Углубленное форматирование текста +title: Углублённое форматирование текста slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting tags: - Beginner @@ -215,9 +215,9 @@ textarea.onkeyup = function(){

            Блочные цитаты

            -

            Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть ее внутри элемента {{htmlelement ("blockquote")}}, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута {{htmlattrxref ("cite", "blockquote")}}.

            +

            Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть её внутри элемента {{htmlelement ("blockquote")}}, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута {{htmlattrxref ("cite", "blockquote")}}.

            -

            Например, следующая разметка берется из страницы элемента MDN <blockquote>:

            +

            Например, следующая разметка берётся из страницы элемента MDN <blockquote>:

            <p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block
 Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p>
            @@ -241,7 +241,7 @@ Quotation Element</em>) указывает на то, что заключ 
            <p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен
 для коротких цитат, не требующих прерывания абзаца</q>.</p>
            -

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

            +

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

            Элемент цитирования — <q> — предназначен для коротких цитат, не требующих прерывания абзаца.

            @@ -424,7 +424,7 @@ textarea.onkeyup = function(){

            Я думаю, Почт. Грин сделал это на кухне с бензопилой.

            -

            Примечание: Существует еще один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и <abbr>, но предназначен специально для акронимов (тип аббревиатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что <abbr>, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте <abbr>.

            +

            Примечание: Существует ещё один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и <abbr>, но предназначен специально для акронимов (тип аббревиатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что <abbr>, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте <abbr>.

            Активное обучение: выделение аббревиатуры

            @@ -560,7 +560,7 @@ textarea.onkeyup = function(){ <p>Крис Миллс, Манчестер, Жестокий Север, РФ</p> </address> -

            Однако следует помнить, что элемент {{htmlelement ("address")}} предназначен для разметки контактных данных человека, который написал HTML-документ, а не любого адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдет:

            +

            Однако следует помнить, что элемент {{htmlelement ("address")}} предназначен для разметки контактных данных человека, который написал HTML-документ, а не любого адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдёт:

            <address>
   <p>Автор страницы — <a href="../authors/chris-mills/">Крис Миллс</a>.</p>
@@ -570,7 +570,7 @@ textarea.onkeyup = function(){
 
 
            Иногда вам понадобится использовать надстрочный или подстрочный индекс при разметке таких вещей, как даты, химические формулы и математические уравнения, чтобы они имели правильное представление. Элементы {{htmlelement ("sup")}} и {{htmlelement ("sub")}} созданы для таких ситуаций.
            
 
-
            Приведем пример:
            
+
            Приведём пример:
            
 
 
            <p>Я просыпаюсь в 6<sup>35</sup> часов утра.</p>
 <p>Химическая формула кофеина: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
@@ -591,8 +591,8 @@ textarea.onkeyup = function(){
 
              
  
            • {{htmlelement("code")}}: Для разметки общих частей компьютерного кода.
              • 
  
            • {{htmlelement("pre")}}: Для сохранения пробелов (как правило, кодовых блоков) — если вы используете отступы или лишние пробелы внутри вашего текста, браузеры будут игнорировать его, и вы не увидите его на вашей отображаемой странице; если вы поместите текст в теги <pre></pre>, то ваши пробелы будут отображаться идентично тому, как вы видите текст в редакторе.
              • 
- 
            • {{htmlelement("var")}}: Для конкретной маркировки имен переменных.
              • 
- 
            • {{htmlelement("kbd")}}: Для маркировки вывода компьютерной программы. Для маркировки ввода клавиатуры (и других типов), введенного в компьютер.
              • 
+ 
            • {{htmlelement("var")}}: Для конкретной маркировки имён переменных.
              • 
+ 
            • {{htmlelement("kbd")}}: Для маркировки вывода компьютерной программы. Для маркировки ввода клавиатуры (и других типов), введённого в компьютер.
              • 
  
            • {{htmlelement("samp")}}: Для маркировки вывода компьютерной программы.
              • 
 
            
 
@@ -615,7 +615,7 @@ para.onclick = function() {
 <samp>PING mozilla.org (63.245.215.20): 56 data bytes
 64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
            
 
-
            Вышеприведенный код будет выглядеть так:
            
+
            Вышеприведённый код будет выглядеть так:
            
 
 
            {{ EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}
            
 
@@ -640,7 +640,7 @@ para.onclick = function() {
 
 
            Но эти разные формы не могут быть легко распознаны компьютерами — что, если вы хотите автоматически захватить даты всех событий на странице и вставить их в календарь? Элемент {{htmlelement ("time")}} позволяет прикрепить к этой цели однозначное машиночитаемое время / дату.
            
 
-
            В приведенном выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:
            
+
            В приведённом выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:
            
 
 
            <!-- Стандартная дата -->
 <time datetime="2020-01-20">20 Января 2020</time>
@@ -657,11 +657,11 @@ para.onclick = function() {
 <!-- Дата и время со смещением по часовому поясу -->
 <time datetime="2020-01-20T19:30+01:00">7.30pm, 20 Января 2020, — это 8.30pm во Франции.</time>
 <!-- Вызов номера недели -->
-<time datetime="2020-W04">Четвертая неделя 2020</time>
            
+<time datetime="2020-W04">Четвёртая неделя 2020</time>

            Заключение

            -

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

            +

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

            {{PreviousMenuNext ("Learn/HTML/Introduction_to_HTML/Create_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

            @@ -672,7 +672,7 @@ para.onclick = function() {
          • Что такое заголовок? Метаданные в HTML
          • Основы редактирования текста в HTML
          • Создание гиперссылок
            • -
          • Углубленное форматирование текста
            • +
          • Углублённое форматирование текста
          • Структура документа и веб-сайта
          • Отладка HTML
          • Разметка письма
            • 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 6c1090bd2e..67f1ba48b7 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 @@ -74,7 +74,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс

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

            -

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

            +

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

            Активное изучение: создаём собственную ссылку

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

            A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

            -

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

            +

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

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

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

            Фрагменты документа

            -

            Можно ссылаться на определенную часть документа HTML (известную как фрагмент документа), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут {{htmlattrxref("id")}} элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:

            +

            Можно ссылаться на определённую часть документа HTML (известную как фрагмент документа), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут {{htmlattrxref("id")}} элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:

            <h2 id="Почтовый_адрес">Почтовый адрес</h2>
            @@ -164,7 +164,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс

            Абсолютные и относительные URL-адреса

            -

            Два понятия, с которыми вы столкнетесь в Интернете, — это абсолютный URL и относительный URL:

            +

            Два понятия, с которыми вы столкнётесь в Интернете, — это абсолютный URL и относительный URL:

            Абсолютный URL
            @@ -189,14 +189,14 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
            -

            Используйте четкие формулировки описания ссылок

            +

            Используйте чёткие формулировки описания ссылок

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

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

            Взгляните на этот пример:

            @@ -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-фильма), добавляйте чёткую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведём пример:

            • Если вы используете соединение с низкой пропускной способностью и вдруг нажмёте на ссылку без описания, начнётся загрузка большого файла.
              • @@ -245,7 +245,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс

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

              <p><a href="http://www.example.com/large-report.pdf">
-  Скачать отчет о продажах (PDF, 10MB)
+  Скачать отчёт о продажах (PDF, 10MB)
 </a></p>
 
 <p><a href="http://www.example.com/video-stream/">
@@ -256,9 +256,9 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
   Играть в гонки (необходим Flash)
 </a></p>
              -

              Используйте атрибут download, когда создаете ссылку

              +

              Используйте атрибут download, когда создаёте ссылку

              -

              Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут download, чтобы создать имя файла по умолчанию для сохранения . Приведем пример ссылки для загрузки браузера Firefox 39:

              +

              Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут download, чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:

              <a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
    download="firefox-39-installer.exe">
@@ -267,7 +267,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
 
 
              Активное изучение: создание меню навигации
              
 
-
              Для этого упражнения мы хотим, чтобы вы создали ссылки на страницы в меню навигации в многостраничном сайте. Это один из распространенных способов создания сайта: на каждой странице используется одна и та же структура страниц, включая одно и то же меню навигации, поэтому при нажатии ссылок создается впечатление, что вы остаетесь в одном месте: меню остается на месте, а контент меняется.
              
+
              Для этого упражнения мы хотим, чтобы вы создали ссылки на страницы в меню навигации в многостраничном сайте. Это один из распространённых способов создания сайта: на каждой странице используется одна и та же структура страниц, включая одно и то же меню навигации, поэтому при нажатии ссылок создаётся впечатление, что вы остаётесь в одном месте: меню остаётся на месте, а контент меняется.
              
 
 
              Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите navigation-menu-start):
              
 
@@ -281,10 +281,10 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
 
              Что делать:
              
 
 
                
- 
              1. Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имен страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.
                2. 
+ 
              2. Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имён страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.
                3. 
  
              3. Создайте ссылки каждому элементу списка, ведущие на эти страницы.
                4. 
  
              4. Скопируйте созданное меню в каждую страницу.
                5. 
- 
              5. На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой прием помогает визуально определить, смотря на меню, в какой части сайта мы находимся.
                6. 
+ 
              6. На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой приём помогает визуально определить, смотря на меню, в какой части сайта мы находимся.
                7. 
 
              
 
 
              Когда закончите задание, посмотрите, как это должно выглядеть:
              
@@ -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.
              
 
              
 
 
              Ссылки электронной почты
              
@@ -345,7 +345,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперс
  
            • Что такое заголовок? Метаданные в HTML
              • 
  
            • Основы редактирования текста в HTML
              • 
  
            • Создание гиперссылок
              • 
- 
            • Углубленное форматирование текста
              • 
+ 
            • Углублённое форматирование текста
              • 
  
            • Структура документа и веб-сайта
              • 
  
            • Отладка HTML
              • 
  
            • Разметка письма
              • 
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 e80ec52b6d..0a64f58205 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
@@ -31,7 +31,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML
 
 
              Отладка — это не страшно
              
 
-
              Во время написания какого-нибудь кода, обычно все идет хорошо, пока не появляется тот момент, когда вы совершаете ошибку. Итак, ваш код не работает, или работает не так, как вы задумывали. Если вы попытаетесь скомпилировать неработающую программу на языке Rust, компилятор укажет на ошибку:
              
+
              Во время написания какого-нибудь кода, обычно все идёт хорошо, пока не появляется тот момент, когда вы совершаете ошибку. Итак, ваш код не работает, или работает не так, как вы задумывали. Если вы попытаетесь скомпилировать неработающую программу на языке 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.
              
 
@@ -43,7 +43,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML
 
 
              Толерантный код
              
 
-
              Так что же означает толерантный? В общих чертах, когда вы напортачили в коде, есть два типа ошибок, с которыми вы столкнетесь:
              
+
              Так что же означает толерантный? В общих чертах, когда вы напортачили в коде, есть два типа ошибок, с которыми вы столкнётесь:
              
 
 
                
  
              • Синтаксические ошибки (Syntax errors): Это ошибки в правильности написания, как это было выше, в примере с Rust. Такие обычно легко исправлять, в той мере, в какой вы знакомы с синтаксисом языка и знаете, что означают сообщения об ошибках.
                • 
@@ -94,7 +94,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML
  
              • Используя DOM инспектор, давайте рассмотрим детали нашего кода, чтобы увидеть, как браузер пытается исправить наши ошибки в HTML (мы обозреваем в Firefox; другой современный браузер должен выдать те же результаты):
   
                  
    
                • Параграфы и элементы списка получены с закрывающими тегами.
                  • 
-   
                • Было неочевидно, где элемент <strong> должен был закрыться, так что браузер обернул каждый отдельный блок текста своими собственными тегами strong, причем до самого низа документа!
                  • 
+   
                • Было неочевидно, где элемент <strong> должен был закрыться, так что браузер обернул каждый отдельный блок текста своими собственными тегами strong, причём до самого низа документа!
                  • 
    
                • Некорректная вложенность была исправлена браузером следующим образом:
     
                  <strong>strong
   <em>strong emphasised?</em>
@@ -115,7 +115,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML
 
 
                  Из примера выше ясно, что стоит проверять валидность HTML. В простом примере сверху можно просто просмотреть весь код и найти ошибки, но как быть с огромными, сложными страницами?
                  
 
-
                  Лучше всего проверить страницу в  сервисе валидации разметки. Его создал и поддерживает W3C — организация, которая занимается спецификациями HTML, CSS и других веб-технологий. Сервис проверит ваш HTML и составит отчет по ошибкам в нем.
                  
+
                  Лучше всего проверить страницу в  сервисе валидации разметки. Его создал и поддерживает W3C — организация, которая занимается спецификациями HTML, CSS и других веб-технологий. Сервис проверит ваш HTML и составит отчёт по ошибкам в нем.
                  
 
 
                  The HTML validator homepage
                  
 
@@ -138,10 +138,10 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML
 
 
                  Работа с сообщениями об ошибках
                  
 
-
                  Обычно сразу ясно, что значат сообщения, но иногда приходится постараться, чтобы понять, в чем дело. Сейчас мы пройдемся по всем ошибкам и разберем, что они значат. Обратите внимание, что в сообщениях указаны строка и столбец кода, чтобы ошибки было проще искать.
                  
+
                  Обычно сразу ясно, что значат сообщения, но иногда приходится постараться, чтобы понять, в чем дело. Сейчас мы пройдёмся по всем ошибкам и разберём, что они значат. Обратите внимание, что в сообщениях указаны строка и столбец кода, чтобы ошибки было проще искать.
                  
 
 
                    
- 
                  • "End tag li implied, but there were open elements" (2 instances): Нет явного закрывающего тега, хотя браузер догадывается, где он должен быть. Сообщение указывает на строку после той, на которой ожидался закрывающий тег, но вы найдете нужное место.
                    • 
+ 
                  • "End tag li implied, but there were open elements" (2 instances): Нет явного закрывающего тега, хотя браузер догадывается, где он должен быть. Сообщение указывает на строку после той, на которой ожидался закрывающий тег, но вы найдёте нужное место.
                    • 
  
                  • "Unclosed element strong":  Это очень простая ошибка — элемент {{htmlelement("strong")}} не закрыт, и сообщение указывает прямо на открывающий тег.
                    • 
  
                  • "End tag strong violates nesting rules": Элемент неправильно вложен — на этом уровне нет парного открывающего тега.
                    • 
  
                  • "End of file reached when inside an attribute value. Ignoring tag": Загадочное сообщение. Дело в том, что где-то (скорее всего, в конце документа) неправильно прописано свойство элемента, и конец файла оказался внутри этого свойства. В браузере не видно ссылки — скорее всего, проблема рядом с ней.
                    • 
@@ -155,7 +155,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML
  
                  • "Unclosed element ul": Странно, ведь элемент {{htmlelement("ul")}} закрыт. Настоящая проблема всё там же — элемент {{htmlelement("a")}} не закрыт из-за недостающей кавычки в свойстве.
                    • 
 
                  
 
-
                  Если некоторые ошибки кажутся вам странными, начните исправление с остальных и проверьте документ еще раз. Иногда одна ошибка ломает большую часть документа.
                  
+
                  Если некоторые ошибки кажутся вам странными, начните исправление с остальных и проверьте документ ещё раз. Иногда одна ошибка ломает большую часть документа.
                  
 
 
                  Когда вы увидите эту надпись, в вашем документе больше нет ошибок:
                  
 
@@ -174,7 +174,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML
  
                • Что такое заголовок? Метаданные в HTML
                  • 
  
                • Основы редактирования текста в HTML
                  • 
  
                • Создание гиперссылок
                  • 
- 
                • Углубленное форматирование текста
                  • 
+ 
                • Углублённое форматирование текста
                  • 
  
                • Структура документа и веб-сайта
                  • 
  
                • Отладка HTML
                  • 
  
                • Разметка письма
                  • 
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 7128fd4462..31119efc4a 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
@@ -39,11 +39,11 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум
  
                  Заголовок (колонтитул)
                  
  
                  Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.
                  
  
                  Навигационное меню
                  
- 
                  Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остается неизменной на всех страницах сайта — наличие непоследовательной навигации на Вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.
                  
+ 
                  Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта — наличие непоследовательной навигации на Вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.
                  
  
                  Основное содержимое
                  
- 
                  Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определенно будет меняться от страницы к странице!
                  
+ 
                  Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определённо будет меняться от страницы к странице!
                  
  
                  Боковая панель
                  
- 
                  Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьей, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.
                  
+ 
                  Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьёй, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.
                  
  
                  Нижний колонтитул (футер)
                  
  
                  Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для {{Glossary("SEO")}} целей, предоставляя ссылки для быстрого доступа к популярному контенту.
            @@ -56,7 +56,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум

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

            -

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

            +

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

            Заметка: Люди с дальтонизмом составляют около 8% мирового населения. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было 285 миллионов таких людей, а общая численность населения составляла около 7 миллиардов).

            @@ -76,7 +76,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум

            Активное обучение: исследование кода для нашего примера

            -

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

            +

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

            <!DOCTYPE html>
 <html>
@@ -108,7 +108,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум
         <li><a href="#">Контакты</a></li>
       </ul>
 
-       <!-- Форма поиска — это еще один распространенный нелинейный способ навигации по веб-сайту. -->
+       <!-- Форма поиска — это ещё один распространённый нелинейный способ навигации по веб-сайту. -->
 
        <form>
          <input type="search" name="q" placeholder="Search query">
@@ -162,7 +162,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум
   </body>
 </html>
            -

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

            +

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

            Подробнее об элементах HTML макета

            @@ -178,7 +178,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум
          • {{HTMLElement('footer')}} представляет собой группу конечного контента для страницы.
          -

          Несемантические обертки

          +

          Несемантические обёртки

          Иногда Вы будете сталкиваться с ситуацией, когда Вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда Вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, {{glossary("CSS")}} или {{glossary("JavaScript")}}. Для таких случаев в HTML есть элементы {{HTMLElement("div")}} и {{HTMLElement("span")}}. Вам следует использовать их с подходящим значением атрибута {{htmlattrxref('class')}} или {{htmlattrxref('id')}}, чтобы можно было легко получить к ним доступ.

          @@ -216,7 +216,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум

          Два элемента, которые Вы будете периодически использовать или захотите узнать о них: {{htmlelement("br")}} и {{htmlelement("hr")}}:

          -

          <br> создает разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда Вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:

          +

          <br> создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда Вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:

          <p>Жила-была девчушка Нелл,<br>
 Любившая писать HTML:<br>
@@ -230,7 +230,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум
  Её семантика ужасна была —
          
  Она и сама прочитать ничего не могла.
          
 
-
          <hr> создает горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:
          
+
          <hr> создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:
          
 
 
          <p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p>
 <hr>
@@ -249,7 +249,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум
 
 
            
  
          1. Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц. the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
            2. 
- 
          2. Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведенный раннее). Что находится в этих блоках?A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
            3. 
+ 
          3. Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведённый раннее). Что находится в этих блоках?A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
            4. 
  
          4. Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
            5. 
  
          5. Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод {{glossary("Card sorting")}}. The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
            6. 
  
          6. Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.
            7. 
@@ -284,7 +284,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Структура_докум
  
          7. Что такое заголовок? Метаданные в HTML
            8. 
  
          8. Основы редактирования текста в HTML
            9. 
  
          9. Создание гиперссылок
            10. 
- 
          10. Углубленное форматирование текста
            11. 
+ 
          11. Углублённое форматирование текста
            12. 
  
          12. Структура документа и веб-сайта
            13. 
  
          13. Отладка HTML
            14. 
  
          14. Разметка письма
            15. 
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 9fe76fed12..cfd2d251bb 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
@@ -36,7 +36,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы
 
 
            Что такое HTML?
            
 
-
            {{glossary("HTML")}} (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это язык разметки, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда {{glossary("Element", "элементов")}}, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определенный вид или срабатывало определенным способом. Встроенные {{glossary("Tag", "тэги")}} могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:
            
+
            {{glossary("HTML")}} (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это язык разметки, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда {{glossary("Element", "элементов")}}, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом. Встроенные {{glossary("Tag", "тэги")}} могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:
            
 
 
            Мой кот очень сердитый
            
 
@@ -65,7 +65,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Начало_работы
 
 
            Активное изучение: создание вашего первого HTML элемента
            
 
-
            Отредактируйте строку текста ниже в поле Ввод, обернув ее тегами <em> и </em> (вставьте <em> перед строкой, чтобы указать начало элемента, и </em> после нее, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.
            
+
            Отредактируйте строку текста ниже в поле Ввод, обернув её тегами <em> и </em> (вставьте <em> перед строкой, чтобы указать начало элемента, и </em> после неё, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.
            
 
 
            Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у Вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.
            
 
@@ -220,7 +220,7 @@ textarea.onkeyup = function(){
 
 
            <em>Первый</em><em>второй</em><em>третий</em>
 
-<p>четвертый</p><p>пятый</p><p>шестой</p>
+<p>четвёртый</p><p>пятый</p><p>шестой</p>
 
            
 
 
            {{htmlelement("em")}} — это строчный элемент, так что, как вы здесь видите, первые три элемента находятся на одной строке друг с другом без пробелов между ними. С другой стороны, {{htmlelement("p")}} — это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется CSS-оформлением по умолчанию, которое браузеры применяют к абзацам).
            
@@ -232,7 +232,7 @@ textarea.onkeyup = function(){
        -

        Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноименными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.

        +

        Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.

        @@ -268,7 +268,7 @@ textarea.onkeyup = function(){
        1. Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).
        2. Имя атрибута и следующий за ним знак равенства.
          3. -
        3. Значение атрибута, заключенное в кавычки.
          4. +
        4. Значение атрибута, заключённое в кавычки.

        Активное изучение: Добавление атрибутов в элемент

        @@ -279,7 +279,7 @@ textarea.onkeyup = function(){
        • href: В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит, когда вы по ней кликаете. Например, href="https://www.mozilla.org/".
          • -
        • title: Атрибут title описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведет. Например, title="The Mozilla homepage". Она появится в виде всплывающей подсказки, когда вы наведете курсор на ссылку.
          • +
        • title: Атрибут title описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведёт. Например, title="The Mozilla homepage". Она появится в виде всплывающей подсказки, когда вы наведёте курсор на ссылку.
        • target: Атрибут target определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, target="_blank" отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.
        @@ -412,7 +412,7 @@ textarea.onkeyup = function(){ -

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

        +

        Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо.  Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмём атрибут {{htmlattrxref("disabled", "input")}}, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.

        <input type="text" disabled="disabled">
        @@ -431,7 +431,7 @@ textarea.onkeyup = function(){ -

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

        +

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

        <a href=https://www.mozilla.org/>любимый веб-сайт</a>
        @@ -459,7 +459,7 @@ textarea.onkeyup = function(){ 
        <a href="http://www.example.com'>Ссылка к моему примеру.</a>
        -

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

        +

        Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:

        <a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
        @@ -745,7 +745,7 @@ textarea.onkeyup = function(){

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

        -

        Примечание: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или CSS. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймете, HTML и CSS созданы друг для друга.

        +

        Примечание: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или CSS. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймёте, HTML и CSS созданы друг для друга.

        Смотрите также

        @@ -765,7 +765,7 @@ textarea.onkeyup = function(){
      6. Что такое заголовок? Метаданные в HTML
      7. Основы редактирования текста в HTML
      8. Создание гиперссылок
        9. -
      9. Углубленное форматирование текста
        10. +
      10. Углублённое форматирование текста
      11. Структура документа и веб-сайта
      12. Отладка HTML
      13. Разметка письма
        14. 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 1adc27c159..d27868014a 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 @@ -31,7 +31,7 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals
      - +
      Они делают то, чего вы от них ожидаете в математике. -, *, / 9 - 3;
      - 8 * 2; // умножение в JS это звездочка
      + 8 * 2; // умножение в JS это звёздочка
      9 / 3;
      Задача:Изучить базовые способы разметки текста путем добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..Изучить базовые способы разметки текста путём добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..
      @@ -42,13 +42,13 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals

      An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

      -

      Упорядоченный контент делает чтение более легким и приятным.

      +

      Упорядоченный контент делает чтение более лёгким и приятным.

      -

      В HTML каждый абзац заключен в элемент {{htmlelement("p")}}, подобно:

      +

      В HTML каждый абзац заключён в элемент {{htmlelement("p")}}, подобно:

      <p>Я параграф, да, это я.</p>
      -

      Каждый заголовок заключен в элемент заголовка {{htmlelement("h1")}}:

      +

      Каждый заголовок заключён в элемент заголовка {{htmlelement("h1")}}:

      <h1>Я заголовок истории.</h1>
      @@ -62,9 +62,9 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals <p> Крис Миллс </ p> -<h2> Глава 1: Темная ночь </ h2> +<h2> Глава 1: Тёмная ночь </ h2> -<p> Это была темная ночь. Где-то кричала сова. Дождь обрушился на ... </ p> +<p> Это была тёмная ночь. Где-то кричала сова. Дождь обрушился на ... </ p> <h2> Глава 2: Вечное молчание </ h2> @@ -79,15 +79,15 @@ original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals
      • Предпочтительнее использовать <h1> только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки располагаются ниже его в иерархии.
        • -
      • Убедитесь, что вы используете заголовки в правильном порядке в иерархии.  Не используйте <h3> для создания подзаголовков при одновременном использовании <h2> для представления под-подзаголовков — это не имеет смысла и приведет к странным результатам.
        • -
      • Из шести доступных уровней заголовка вы должны стремиться использовать не более трех на странице, если только вы не чувствуете, что это необходимо. Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации. В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.
        • +
      • Убедитесь, что вы используете заголовки в правильном порядке в иерархии.  Не используйте <h3> для создания подзаголовков при одновременном использовании <h2> для представления под-подзаголовков — это не имеет смысла и приведёт к странным результатам.
        • +
      • Из шести доступных уровней заголовка вы должны стремиться использовать не более трёх на странице, если только вы не чувствуете, что это необходимо. Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации. В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.

      Зачем нам необходима структура?

      -

      Чтобы ответить на этот вопрос, давайте посмотрим на text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своем локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return  для перехода на следующую строку).

      +

      Чтобы ответить на этот вопрос, давайте посмотрим на text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return  для перехода на следующую строку).

      -

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

      +

      Однако, когда вы откроете документ в своём браузере, вы увидите, что текст выглядит как один большой кусок!

      A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

      @@ -238,7 +238,7 @@ textarea.onkeyup = function(){

      Почему мы нуждаемся в семантике?

      -

      Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зеленый свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)

      +

      Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зелёный свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)

      В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид. В этом контексте элемент {{htmlelement ("h1")}} также является семантическим элементом, который даёт тексту, который он обёртывает,  роль (или значение) «заголовка верхнего уровня на вашей странице».

      @@ -258,7 +258,7 @@ textarea.onkeyup = function(){

      Неупорядоченные

      -

      Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмем, к примеру, список покупок:

      +

      Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:

      молоко
 яйца
@@ -411,12 +411,12 @@ textarea.onkeyup = function(){
 
 
      Упорядоченные
      
 
-
      Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмем в качестве примера маршрут следования:
      
+
      Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:
      
 
 
      Двигайтесь до конца дороги
 Поверните направо
-Езжайте прямо через первые два перекрестка с круговым движением
-Поверните налево на третьем перекрестке
+Езжайте прямо через первые два перекрёстка с круговым движением
+Поверните налево на третьем перекрёстке
 Школа справа от вас, 300 метров вверх по дороге
      
 
 
      Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент {{htmlelement ("ol")}} (ordered list), а не <ul>:
      
@@ -424,8 +424,8 @@ textarea.onkeyup = function(){
 
      <ol>
    <li>Двигайтесь до конца дороги</li>
    <li>Поверните направо</li>
-   <li>Езжайте прямо через первые два перекрестка с круговым движением</li>
-   <li>Поверните налево на третьем перекрестке</li>
+   <li>Езжайте прямо через первые два перекрёстка с круговым движением</li>
+   <li>Поверните налево на третьем перекрёстке</li>
    <li>Школа справа от вас, в 300 метрах вверх по дороге</li>
 </ol>
      
 
@@ -444,8 +444,8 @@ textarea.onkeyup = function(){
 
 <textarea id="code" class="input" style="min-height: 200px; width: 95%">      Двигайтесь до конца дороги
 Поверните направо
-Езжайте прямо через первые два перекрестка с круговым движением
-Поверните налево на третьем перекрестке
+Езжайте прямо через первые два перекрёстка с круговым движением
+Поверните налево на третьем перекрёстке
 Школа справа от вас, 300 метров вверх по дороге</textarea>
 
 <div class="playable-buttons">
@@ -517,7 +517,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var htmlSolution = '<ol>\n<li>Двигайтесь до конца дороги</li>\n<li>Поверните направо</li>\n<li>Езжайте прямо через первые два перекрестка с круговым движением</li>\n<li>Поверните налево на третьем перекрестке</li>\n<li>Школа справа от вас, 300 метров вверх по дороге</li>\n</ol>';
+var htmlSolution = '<ol>\n<li>Двигайтесь до конца дороги</li>\n<li>Поверните направо</li>\n<li>Езжайте прямо через первые два перекрёстка с круговым движением</li>\n<li>Поверните налево на третьем перекрёстке</li>\n<li>Школа справа от вас, 300 метров вверх по дороге</li>\n</ol>';
 var solutionEntry = htmlSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -601,7 +601,7 @@ textarea.onkeyup = function(){
   Если вы хотите "грубый" хумус, измельчайте пару минут.
   Если вам нужен гладкий хумус, измельчайте дольше.
 
-  По вкусу вы также можете добавить в небольших количествах лимон с кориандром, перец чили, лайм с чипотле, хариссу с мятой или же шпинат с брынзой. Попробуйте и решите, что подойдет вам.
+  По вкусу вы также можете добавить в небольших количествах лимон с кориандром, перец чили, лайм с чипотле, хариссу с мятой или же шпинат с брынзой. Попробуйте и решите, что подойдёт вам.
 
   Хранение
 
@@ -725,7 +725,7 @@ textarea.onkeyup = function(){
 
 
      Вложенные списки
      
 
-
      Вполне нормально вложить один список в другой. Возможно, вы захотите, чтобы один список располагался внутри другого. Давайте возьмем второй список из нашего примера рецепта:
      
+
      Вполне нормально вложить один список в другой. Возможно, вы захотите, чтобы один список располагался внутри другого. Давайте возьмём второй список из нашего примера рецепта:
      
 
 
      <ol>
   <li>Очистите чеснок от кожуры и крупно нарежьте.</li>
@@ -757,14 +757,14 @@ textarea.onkeyup = function(){
 
      Акцент и важность
      
 
 
      
-
      В обиходе мы часто подчеркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде. HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространенных.
      
+
      В обиходе мы часто подчёркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде. HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространенных.
      
 
 
      
 
      
 
 
      Акцент
      
 
-
      Когда мы хотим добавить акцент в разговорный язык, мы подчеркиваем определенные слова, тонко изменяя смысл того, что мы говорим. Точно так же на письменном языке мы склонны подчеркивать слова, выделяя их курсивом. Например, следующие два предложения имеют разные значения.
      
+
      Когда мы хотим добавить акцент в разговорный язык, мы подчёркиваем определённые слова, тонко изменяя смысл того, что мы говорим. Точно так же на письменном языке мы склонны подчёркивать слова, выделяя их курсивом. Например, следующие два предложения имеют разные значения.
      
 
 
      Я рад, что ты не опоздал.
      
 
@@ -778,7 +778,7 @@ textarea.onkeyup = function(){
 
 
      Важное значение
      
 
-
      Чтобы подчеркнуть важные слова, мы склонны подчеркивать их в устной речи и выделять жирным на письменном языке. Например:
      
+
      Чтобы подчеркнуть важные слова, мы склонны подчёркивать их в устной речи и выделять жирным на письменном языке. Например:
      
 
 
      Эта жидкость очень токсична.
      
  
      
@@ -928,23 +928,23 @@ textarea.onkeyup = function(){
 
      Курсив, жирный шрифт, подчеркивание...
      
 
 
      
-
      Элементы, которые мы обсуждали до сих пор, имеют четкую привязку к семантике. Ситуация с {{htmlelement ("b")}}, {{htmlelement ("i")}} и {{htmlelement ("u")}} несколько сложнее. Они появились в эпоху, когда CSS  поддерживался плохо или вообще не поддерживался, чтобы люди могли писать жирный текст, курсив или подчеркнутый текст. Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.
      
+
      Элементы, которые мы обсуждали до сих пор, имеют чёткую привязку к семантике. Ситуация с {{htmlelement ("b")}}, {{htmlelement ("i")}} и {{htmlelement ("u")}} несколько сложнее. Они появились в эпоху, когда CSS  поддерживался плохо или вообще не поддерживался, чтобы люди могли писать жирный текст, курсив или подчёркнутый текст. Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.
      
 
 
      
 
      
 
 
      HTML5 переопределил <b>, <i> и <u> с новыми, несколько запутанными, семантическими ролями.
      
 
-
      Вот хорошее правило: предпочтительней использовать <b>, <i> или <u> для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчеркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.
      
+
      Вот хорошее правило: предпочтительней использовать <b>, <i> или <u> для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчёркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.
      
 
 
        
  
      • {{HTMLElement ('i')}} используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономические обозначения, технические термины, мысли ...
        • 
  
      • {{HTMLElement ('b')}} используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения ...
        • 
- 
      • {{HTMLElement ('u')}} используется для передачи значения, традиционно передаваемого подчеркиванием: имя собственное, орфографическая ошибка ...
        • 
+ 
      • {{HTMLElement ('u')}} используется для передачи значения, традиционно передаваемого подчёркиванием: имя собственное, орфографическая ошибка ...
        • 
 
      
 
 
      
-
      Предупреждение о подчеркивании: люди сильно ассоциируют подчеркивание с гиперссылками. Поэтому в Интернете лучше всего подчеркнуть только ссылки. Используйте элемент <u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчеркивания по умолчанию для чего-то более подходящего в Интернете. Пример ниже иллюстрирует, как это можно сделать.
      
+
      Предупреждение о подчёркивании: люди сильно ассоциируют подчёркивание с гиперссылками. Поэтому в Интернете лучше всего подчеркнуть только ссылки. Используйте элемент <u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете. Пример ниже иллюстрирует, как это можно сделать.
      
 
      
 
 
      <!-- Научные наименования -->
@@ -987,7 +987,7 @@ textarea.onkeyup = function(){
  
    • Что такое заголовок? Метаданные в HTML
      • 
  
    • Основы редактирования текста в HTML
      • 
  
    • Создание гиперссылок
      • 
- 
    • Углубленное форматирование текста
      • 
+ 
    • Углублённое форматирование текста
      • 
  
    • Структура документа и веб-сайта
      • 
  
    • Отладка HTML
      • 
  
    • Разметка письма
      • 
diff --git a/files/ru/learn/html/introduction_to_html/index.html b/files/ru/learn/html/introduction_to_html/index.html
index c914c8ff27..9d847f1dfe 100644
--- a/files/ru/learn/html/introduction_to_html/index.html
+++ b/files/ru/learn/html/introduction_to_html/index.html
@@ -41,17 +41,17 @@ original_slug: Learn/HTML/Введение_в_HTML
  
      Основной задачей HTML является придание тексту значения (также известно, как семантика), чтобы браузер знал, как его правильно отображать. В этой статье рассматривается то, как использовать HTML, чтобы разбить блок текста на структуру из заголовков и абзацев, добавить акцент/значение слов, создать списки и многое другое.
      
  
      Создание гиперссылок
      
  
      Гиперссылки очень важны — ведь именно они делают интернет интернетом. В этой статье описан синтаксис, необходимый для создания ссылок, а также описано их наилучшее применение на практике.
      
- 
      Углубленное форматирование текста
      
+ 
      Углублённое форматирование текста
      
  
      Существует множество других элементов HTML для редактирования текста, про которые мы вам не рассказали в статье Основы редактирования текста в HTML. Описанные здесь элементы менее известны, но о них также полезно знать. Здесь вы узнаете о разметке цитат, списках описания, компьютерном коде и другом сопутствующем тексте, нижнем и верхнем индексах, контактной информации и многом другом.
      
  
      Структура документа и веб-сайта
      
  
      Помимо определения отдельных частей страницы (таких как "абзац" или "изображение"), HTML также используется для определения отдельных зон веб-сайта (таких как "шапка", "меню навигации",  "столбец с основным содержимым".) В этой статье рассматривается, как планировать базовую структуру веб-сайта и писать HTML для представления этой структуры.
      
  
      Отладка HTML
      
- 
      Писать на HTML хорошо, но что, если что-то идет не так, и вы не можете найти место ошибки в коде? В этой статье вы познакомитесь с некоторыми инструментами, которые могут Вам помочь.
      
+ 
      Писать на 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 4638bb8c24..26d593df31 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
@@ -17,7 +17,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter
   
    Знания:
    
-    
      Перед выполнением этого задания вы должны пройти Начало работы с HTML, Что такое заголовок? Метаданные в HTML, Основы редактирования текста в HTML, Создание гиперссылок, и Углубленное форматирование текста.
      
+    
      Перед выполнением этого задания вы должны пройти Начало работы с HTML, Что такое заголовок? Метаданные в HTML, Основы редактирования текста в HTML, Создание гиперссылок, и Углублённое форматирование текста.
      
    
   
   
@@ -50,7 +50,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter
 
 
        
  
      • Имена отправителя и получателя (как и "Tel" и "Email") должны быть выделены жирным.
        • 
- 
      • Четырем датам в документе необходимо выбрать правильные элементы содержащие машинно-читаемые даты.
        • 
+ 
      • Четырём датам в документе необходимо выбрать правильные элементы содержащие машинно-читаемые даты.
        • 
  
      • Первый адрес и первая дата в письме должны иметь атрибут class со значением "sender-column"; CSS стиль, который вы добавите позже, позволит выравнять по правому боку, как оно и должно быть в классической разметке письма.
        • 
  
      • Пять акронимов/аббревиатур в главном тексте письма должны быть размечены, чтобы предоставить подсказки для каждого акронима/аббревиатуры.
        • 
  
      • Шесть под/надстрочных элементов должны быть оформлены корректно в химической формуле, как и числа 103 и 104 (степень числа должна быть над числом).
        • 
@@ -94,7 +94,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter
  
      • Что такое заголовок? Метаданные в HTML
        • 
  
      • Основы редактирования текста в HTML
        • 
  
      • Создание гиперссылок
        • 
- 
      • Углубленное форматирование текста
        • 
+ 
      • Углублённое форматирование текста
        • 
  
      • Структура документа и веб-сайта
        • 
  
      • Отладка HTML
        • 
  
      • Разметка письма
        • 
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 3f0fe71917..f5a62ee916 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
@@ -10,7 +10,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content
 
 
        {{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
        
 
-
        Разметить страницу так, чтобы к ней было просто применить CSS — первое, чему должен научиться будущий веб-разработчик. В этом задании вам придется подумать о том, как должна выглядеть страница, и подобрать подходящую семантическую разметку.
        
+
        Разметить страницу так, чтобы к ней было просто применить CSS — первое, чему должен научиться будущий веб-разработчик. В этом задании вам придётся подумать о том, как должна выглядеть страница, и подобрать подходящую семантическую разметку.
        
 
 
@@ -21,7 +21,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content
   
@@ -49,7 +49,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content
  
      • Нижний колонтитул, содержащий информацию об авторских правах и разработчиках.
        • 
 
-
        Вам необходимо добавить подходящую обертку для:
        
+
        Вам необходимо добавить подходящую обёртку для:
          
  
        • Заголовка
          • 
@@ -63,7 +63,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content
 
          Вы также должны:
          
 
 
            
- 
          • Примените предоставленный CSS к странице, добавив еще один элемент {{htmlelement ("link")}} чуть ниже существующего, указанного в начале.
            • 
+ 
          • Примените предоставленный CSS к странице, добавив ещё один элемент {{htmlelement ("link")}} чуть ниже существующего, указанного в начале.
            • 
 
          
 
 
          Советы и подсказки
          
@@ -71,7 +71,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content
 
            
  
          • Используйте W3C HTML validator для проверки вашего HTML; вы получите бонусные баллы, если он будет проверять как можно больше (строка «googleapis» используется для импорта пользовательских шрифтов на страницу из службы Google Fonts, она не проверяет, но не беспокойтесь об этом слишком много - валидатор - полезный инструмент, но 100% проверка является идеальной, а не полностью необходимой).
            • 
  
          • Вам не нужно знать CSS, чтобы сделать эту оценку; вам просто нужно поместить предоставленный CSS внутри HTML-элемента.
            • 
- 
          • Предоставленный CSS разработан таким образом, что при добавлении правильных структурных элементов в разметку они будут отображаться зелеными на отображаемой странице.
            • 
+ 
          • Предоставленный CSS разработан таким образом, что при добавлении правильных структурных элементов в разметку они будут отображаться зелёными на отображаемой странице.
            • 
  
          • Если вы застряли и не можете понять, какие элементы куда помещать, часто помогает вывести простую блок-схему макета страницы и сделать надписи на элементах, которые, по вашему мнению, должны обернуть каждый блок.
            • 
 
          
 
@@ -94,7 +94,7 @@ original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content
  
        • Что такое заголовок? Метаданные в HTML
          • 
  
        • Основы редактирования текста в HTML
          • 
  
        • Создание гиперссылок
          • 
- 
        • Углубленное форматирование текста
          • 
+ 
        • Углублённое форматирование текста
          • 
  
        • Структура документа и веб-сайта
          • 
  
        • Отладка HTML
          • 
  
        • Разметка письма
          • 
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 6c762e94ac..0635ec9342 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
@@ -60,14 +60,14 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
   </body>
 </html>
 
-
          Содержимое {{htmlelement("head")}}, в отличие от содержимого элемента {{htmlelement("body")}}, не отображается на странице. Задача <head> — хранить {{glossary("Metadata", "метаданные")}} документа. В приведенном выше примере <head> совсем небольшой:
          
+
          Содержимое {{htmlelement("head")}}, в отличие от содержимого элемента {{htmlelement("body")}}, не отображается на странице. Задача <head> — хранить {{glossary("Metadata", "метаданные")}} документа. В приведённом выше примере <head> совсем небольшой:
          
 
 
          <head>
   <meta charset="utf-8">
   <title>Моя тестовая страница</title>
 </head>
          
 
-
          Однако на больших страницах блок <head> может быть довольно объемным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое <head> с помощью инструментов разработчика. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнем.
          
+
          Однако на больших страницах блок <head> может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое <head> с помощью инструментов разработчика. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнем.
          
 
 
          Название страницы (title)
          
 
@@ -174,7 +174,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
 
 
          Другие виды метаданных
          
 
-
          В сети вы найдете также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определенным сайтам (например, социальных сетей) специальной информации, которую они могут использовать.
          
+
          В сети вы найдёте также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определённым сайтам (например, социальных сетей) специальной информации, которую они могут использовать.
          
 
 
          Например, Протокол Open Graph создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:
          
 
@@ -187,7 +187,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
 
 
          Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку 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:
          
+
          Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.У Twitter также есть собственный формат метаданных, с помощью которого  создаётся аналогичный эффект, при отображении URL сайта на twitter.com:
          
 
 
          <meta name="twitter:title" content="MDN Web Docs">
          
 
@@ -221,7 +221,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
 
 
          В комментариях указано, для чего используется каждая иконка — например, при добавлении страницы на домашний экран iPad будет использована иконка в высоком разрешении. 
          
 
-
          Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнетесь с ними при просмотре исходного кода других веб-сайтов.
          
+
          Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнётесь с ними при просмотре исходного кода других веб-сайтов.
          
 
 
          Подключение CSS и JavaScript
          
 
@@ -293,7 +293,7 @@ original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
  
        • Что такое заголовок? Метаданные в HTML
          • 
  
        • Основы редактирования текста в HTML
          • 
  
        • Создание гиперссылок
          • 
- 
        • Углубленное форматирование текста
          • 
+ 
        • Углублённое форматирование текста
          • 
  
        • Структура документа и веб-сайта
          • 
  
        • Отладка HTML
          • 
  
        • Разметка письма
          • 
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 3d241796d9..e6ce44bb9d 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
@@ -26,7 +26,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
 
        
  
        
    Цель:
    
-    
        Проверить знания структуры веб-страницы и ее перевода в разметку.
        
+    
        Проверить знания структуры веб-страницы и её перевода в разметку.
        
            		
   
        
          
 
 
 
        
 
 
        
-
        Примечание: Данная статья не научит Вас векторной графике, а даст понимание что это и как ее использовать в веб-документах.
        
+
        Примечание: Данная статья не научит Вас векторной графике, а даст понимание что это и как её использовать в веб-документах.
        
 
        
 
 
        Что такое векторная графика?
        
@@ -34,7 +34,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
 
        В веб-разработке Вы будете сталкиваться с двумя типами изображений - растровым и векторным:
        
 
 
          
- 
        • Растровое изображение задается сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)
          • 
+ 
        • Растровое изображение задаётся сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)
          • 
  
        • Векторное изображение  определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер  может вычислить как должно выглядеть изображение, когда выводится на экран.{{glossary("SVG")}} формат позволяет нам создавать векторную графику для использования в веб-документах.
          • 
 
        
 
@@ -56,7 +56,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
 
 
        SVG это язык на базе {{glossary("XML")}} для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае,  Вы можете использовать элементы для создания простых фигур, таких как {{svgelement("circle")}}(круг) и {{svgelement("rect")}}(прямоугольник). Более сложные SVG элементы включают {{svgelement("feColorMatrix")}} (разложение цвета с использованием матрицы), {{svgelement("animate")}} (анимация частей Вашего векторного изображения) и {{svgelement("mask")}} (применение маски к изображению.)
        
 
-
        В качестве простого примера, следующий код создает круг и прямоугольник:
        
+
        В качестве простого примера, следующий код создаёт круг и прямоугольник:
        
 
 
        <svg version="1.1"
      baseProfile="full"
@@ -75,7 +75,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
 
        Дополнительные преимущества SVG:
        
 
 
          
- 
        • Текст в векторном изображении остается машинописным (то есть доступным для поисковика, что улучшает {{glossary("SEO")}}).
          • 
+ 
        • Текст в векторном изображении остаётся машинописным (то есть доступным для поисковика, что улучшает {{glossary("SEO")}}).
          • 
  
        • SVG легко поддаются стилизации/программированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.
          • 
 
        
 
@@ -99,7 +99,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
 
 
        Быстрый путь: {{htmlelement("img")}}
        
 
-
        Чтобы встроить SVG используя элемент {{htmlelement ("img")}}, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут height или width (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы еще этого не делали, пожалуйста, прочтите Изображения в HTML.
        
+
        Чтобы встроить SVG используя элемент {{htmlelement ("img")}}, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут height или width (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы ещё этого не делали, пожалуйста, прочтите Изображения в HTML.
        
 
 
        <img
     src="equilateral.svg"
@@ -118,7 +118,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
 
 
          
  
        • Вы не можете изменять изображение с помощью JavaScript.
          • 
- 
        • Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своем SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)
          • 
+ 
        • Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своём SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)
          • 
  
        • Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например :focus).
          • 
 
        
 
@@ -128,7 +128,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi
 
 
        <img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
        
 
-
        Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведенном коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:
        
+
        Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведённом коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:
        
 
 
        background: url("fallback.png") no-repeat center;
 background-image: url("image.svg");
@@ -140,7 +140,7 @@ background-size: contain;
        
 
 
        Как включить SVG в ваш HTML код
        
 
-
        Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой прием иногда называют встраиванием SVG (SVG inline или inlining SVG). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <svg></svg> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:
        
+
        Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (SVG inline или inlining SVG). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <svg></svg> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:
        
 
 
        <svg width="300" height="200">
     <rect width="100%" height="100%" fill="green" />
@@ -150,7 +150,7 @@ background-size: contain;
        
 
        Плюсы
        
 
 
          
- 
        • Вставка вашего SVG путем SVG inline позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.
          • 
+ 
        • Вставка вашего SVG путём SVG inline позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.
          • 
  
        • Вы можете присваивать class-ы и id элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой атрибут представления SVG как свойство CSS.
          • 
  
        • SVG inline единственный метод, который позволяет вам использовать CSS-взаимодействия (как :focus) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей).
          • 
  
        • Вы можете разметить SVG как гиперссылку, обернув в элемент {{htmlelement("a")}}.
          • 
@@ -178,7 +178,7 @@ background-size: contain;
        
     <img src="triangle.png" alt="Triangle with three unequal sides" />
 </iframe>
        
 
-
        Это - определенно не самый лучший метод для выбора:
        
+
        Это - определённо не самый лучший метод для выбора:
        
 
 
        Минусы
        
 
@@ -189,7 +189,7 @@ background-size: contain;
      
 
 
      Активное изучение: поиграйте с SVG
      
 
-
      В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области Input, вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А еще вы можете посетить SVG Element Reference, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящен практике ваших исследовательских навыков и вашему развлечению.
      
+
      В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области Input, вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А ещё вы можете посетить SVG Element Reference, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящён практике ваших исследовательских навыков и вашему развлечению.
      
 
 
      Если Вы где-то застряли и ваш код не работает, Вы всегда можете начать сначала, нажав кнопку Reset.
      
 
@@ -324,7 +324,7 @@ textarea.onkeyup = function(){
 
 
      Заключение
      
 
-
      Эта статья предоставила вам краткий обзор по тому, что такое векторная графика и SVG, почему полезно знать о них и как внедрять SVG в вашу веб-страницу. Эта статья не является полным руководством по изучению SVG, а всего лишь указатель, чтоб вы знали что такое SVG, на случай, если вы встретите его во время странствий по Сети. Так что не переживайте, если вы еще не чувствуете себя экспертом в SVG. Ниже мы включили несколько ссылок, которые могут вам помочь, если вы хотите узнать больше о том, как это работает.
      
+
      Эта статья предоставила вам краткий обзор по тому, что такое векторная графика и SVG, почему полезно знать о них и как внедрять SVG в вашу веб-страницу. Эта статья не является полным руководством по изучению SVG, а всего лишь указатель, чтоб вы знали что такое SVG, на случай, если вы встретите его во время странствий по Сети. Так что не переживайте, если вы ещё не чувствуете себя экспертом в SVG. Ниже мы включили несколько ссылок, которые могут вам помочь, если вы хотите узнать больше о том, как это работает.
      
 
 
      В последней статье этого модуля мы будем исследовать адаптивные изображения в деталях, рассматривая инструменты HTML, которые позволяют делать ваши изображения так, чтоб они могли лучше работать на разных устройствах.
      
 
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 3dc16ecfd2..c9b088742d 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
@@ -60,7 +60,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
  
    • пока у вас не будет достаточно доказательств что изображение находится в открытом доступе.
      •
    -

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

    +

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

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

    @@ -77,7 +77,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM

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

    -

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

    +

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

    <img src="images/dinosaur.jpg"
      alt="Голова и туловище скелета динозавра;
@@ -85,14 +85,14 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
 
 
    Самый простой способ увидеть атрибут alt в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как dinosooooor.jpg, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута alt:
    
 
-
    The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.Итак, в каких случаях текст из атрибута alt может быть нам полезен? Приведем несколько примеров:
    
+
    The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.Итак, в каких случаях текст из атрибута alt может быть нам полезен? Приведём несколько примеров:
    
 
 
      
  
    • Пользователь с нарушением зрения использует устройство чтения с экрана, которое может читать вслух описание элементов веб-страницы. На самом деле, наличие текста в атрибуте alt для описания изображения может быть полезно для большинства пользователей.
      • 
  
    • В случае, если была допущена ошибка в имени файла или пути к нему (как было описано выше).
      • 
  
    • Браузер не поддерживает формат данного изображения. Некоторые люди до сих пор используют текстовые браузеры, такие как Lynx, которые вместо изображений отображают текст из атрибута alt.
      • 
  
    • Если вы хотите добавить возможность найти ваше изображение с помощью поисковых систем. Например, поисковые системы могут искать совпадения поисковых запросов с текстом атрибута alt.
      • 
- 
    • Если пользователи отключили отображение изображений на странице для уменьшения объема передаваемых данных и для сокрытия элементов, отвлекающих внимание. Это обычная практика для пользователей мобильных телефонов, а также в странах с маленькой пропускной способностью интернет-каналов и с высокой стоимостью интернет-трафика.
      • 
+ 
    • Если пользователи отключили отображение изображений на странице для уменьшения объёма передаваемых данных и для сокрытия элементов, отвлекающих внимание. Это обычная практика для пользователей мобильных телефонов, а также в странах с маленькой пропускной способностью интернет-каналов и с высокой стоимостью интернет-трафика.
      • 
 
    
 
 
    Что именно вы должны писать в атрибут alt? В первую очередь, это зависит от того, зачем изображение вообще находится на странице. Другими словами, что вы потеряете, если ваше изображение не появится:
    
@@ -100,7 +100,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
 
      
  
    • Декорация. Вы должны использовать {{anch ("Фоновые изображения CSS")}} для декоративных изображений, но если вы должны использовать HTML, добавьте пустой alt = "". Если изображение служит просто украшением и не является частью содержимого, добавьте пустой alt="". Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя.
      • 
  
    • Контент. Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий alt. Или даже лучше, в главном тексте, который все увидят. Не используйте alt , если можете обойтись без него. Насколько неудобно было бы для пользователя, если бы параграфы были написаны дважды в главном контенте? Если изображение адекватно описано в основном тексте, можете просто использовать alt="".
      • 
- 
    • Ссылка. Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны использовать четкие формулировки описания ссылок. В таком случае, вы сможете использовать элемент <a>  или атрибут alt . Старайтесь выбрать лучший вариант.
      • 
+ 
    • Ссылка. Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны использовать чёткие формулировки описания ссылок. В таком случае, вы сможете использовать элемент <a>  или атрибут alt . Старайтесь выбрать лучший вариант.
      • 
  
    • Текст. Не пишите текст в изображениях. Если вашему заголовку понадобится тень, то лучше используйте для этого CSS вместо добавления текста в изображение. Однако, если  действительно этого не избежать, то вам следует дополнить текст в атрибуте alt.
      • 
 
    
 
@@ -126,7 +126,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
 
 
    Это хорошая практика, в результате страница загрузится быстрее и более гладко.
    
 
-
    Однако, вы не должны изменять размеры ваших изображений используя HTML атрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнетесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное соотношение сторон. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу веб-страницу.
    
+
    Однако, вы не должны изменять размеры ваших изображений используя HTML атрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнётесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное соотношение сторон. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу веб-страницу.
    
 
 
    
 
    Примечание: Если вам действительно нужно изменить размер изображения, вы должны использовать вместо этого CSS.
    
@@ -143,7 +143,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
      height="341"
      title="A T-Rex on display in the Manchester University Museum">
    -

    Это дает нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:

    +

    Это даёт нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:

    The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

    @@ -241,7 +241,7 @@ window.addEventListener("load", drawOutput);

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

    -

    Лучшим решением будет использование элементов HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}}. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и четко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:

    +

    Лучшим решением будет использование элементов HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}}. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и чётко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:

    <figure>
   <img src="images/dinosaur.jpg"
@@ -262,7 +262,7 @@ window.addEventListener("load", drawOutput);
 
    Тег <figure> не является изображением. Он представляет собой независимый структурный элемент, который: 
    
 
 
      
- 
    • Передает смысл компактным, интуитивно понятным способом.
      • 
+ 
    • Передаёт смысл компактным, интуитивно понятным способом.
      • 
  
    • Может использоваться в различных местах страницы.
      • 
  
    • Предоставляет ценную информацию, поддерживающую основной текст.
      • 
 
    
diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html
index 00ef01d21d..ec9a11491f 100644
--- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html
+++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html
@@ -64,7 +64,7 @@ original_slug: >-
 
    Если вы хотите, чтобы ваша работа была оценена, или если вы застряли и хотите обратиться за помощью:
    
 
 
      
- 
    1. Поместите свою работу в онлайн-редактор, например CodePen, jsFiddle или Glitch. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведенных выше разделах.
      2. 
+ 
    2. Поместите свою работу в онлайн-редактор, например CodePen, jsFiddle или Glitch. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведённых выше разделах.
      3. 
  
    3. Напишите сообщение с просьбой об оценке и / или помощи в MDN Discourse forum Learning category. Ваш пост должен включать:
   
        
    
      • Описательный заголовок, например "Требуется оценка для проверки навыков 1 по основам изображений HTML".
        • 
diff --git a/files/ru/learn/html/multimedia_and_embedding/index.html b/files/ru/learn/html/multimedia_and_embedding/index.html
index 5926902c75..b2aecfbd25 100644
--- a/files/ru/learn/html/multimedia_and_embedding/index.html
+++ b/files/ru/learn/html/multimedia_and_embedding/index.html
@@ -29,9 +29,9 @@ translation_of: Learn/HTML/Multimedia_and_embedding
  
        Далее мы рассмотрим, как использовать элементы HTML5 {{htmlelement ("video")}} и {{htmlelement ("audio")}} для встраивания видео и аудио на наши страницы, включая основы, обеспечивая доступ к различным форматам файлов для разных браузеров, добавление подписей и субтитров, а также как добавить резервные копии для старых браузеров.
        
  
  
        От <object> к <iframe> — другие технологии встраивания
        
- 
        В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все еще часто встречаемая.
        
+ 
        В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все ещё часто встречаемая.
        
  
        Добавление векторной графики в Веб
        
- 
        Векторная графика может быть очень полезной в определенных ситуациях. В отличие от обычных форматов типа PNG/JPG, она не деформируются/пикселизируются при растяжении, она остаётся гладкой при масштабировании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.
        
+ 
        Векторная графика может быть очень полезной в определённых ситуациях. В отличие от обычных форматов типа PNG/JPG, она не деформируются/пикселизируются при растяжении, она остаётся гладкой при масштабировании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.
        
  
        Адаптивные изображения
        
  
        
  
        В этой статье мы познакомимся с концепцией адаптивных изображений - изображений, которые хорошо работают на устройствах с сильно различающимися размерами экрана, разрешением и другими подобными характеристиками, и рассмотрим, какие инструменты предоставляет HTML для их реализации. Это помогает повысить производительность различных устройств. Адаптивные изображения - это всего лишь одна часть адаптивного дизайна, будущей темы CSS, которую вы должны изучить.
        
@@ -44,7 +44,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding
 
 
        
  
        Страница приветствия Mozilla
        
- 
        В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвященную Mozilla!
        
+ 
        В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвящённую Mozilla!
        
 
        
 
 
        Смотри также
        
@@ -54,6 +54,6 @@ translation_of: Learn/HTML/Multimedia_and_embedding
  
        Карта изображения предоставляет способ разделить изображение на части, которые ссылаются на разные места (представьте себе географическую карту, которая показывает подробную информацию о каждой стране, когда вы кликаете на нее.) Эта технология иногда может быть полезной.
        
  
        Основы Веб-грамотности 2
        
  
        
- 
        Превосходный курс от фонда Mozilla, который освещает и проверяет некоторые навыки, полученные в модуле Мультимедиа и встраивание. Погрузитесь глубже в основы верстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.
        
+ 
        Превосходный курс от фонда Mozilla, который освещает и проверяет некоторые навыки, полученные в модуле Мультимедиа и встраивание. Погрузитесь глубже в основы вёрстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.
        
  
        
 
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 8cbd9191df..bfb1efb19a 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
@@ -30,12 +30,12 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla
 
        Сохраните изображения из папки originals тем же способом; возможно вы захотите сохранить их в другой папке пока не обработаете (некоторые из них) с помощью графического редактора.
        
 
 
        
-
        Note: Приведенный для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.
        
+
        Note: Приведённый для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.
        
 
        
 
 
        Описание проекта
        
 
-
        В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углубленного ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:
        
+
        В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углублённого ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:
        
 
 
        Подготовка изображений
        
 
@@ -77,7 +77,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla
 
        Note: Для проверки правильности работы srcset/sizes , вам нужно загрузить ваш сайт на сервер (используйте Github pages - простое и бесплатное решение). Затем  вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в Responsive images: useful developer tools.
    -

    Искусственно измененная красная панда

    +

    Искусственно изменённая красная панда

    Внутри элемента {{htmlelement("div")}} с классом red-panda, мы хотим поместить элемент {{htmlelement("picture")}} , который использует маленькое портретное изображение панды, если экран меньше или равен 600px, либо большое фоновое изображение.

    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 6963f6a873..5baed457cc 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 @@ -38,7 +38,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
    1. Сначала перейдите на Youtube и найдите понравившееся вам видео.
      2. -
    2. Под видео вы найдете кнопку «Поделиться» - нажмите, чтобы отобразить параметры совместного доступа.
      3. +
    3. Под видео вы найдёте кнопку «Поделиться» - нажмите, чтобы отобразить параметры совместного доступа.
    4. Выберите кнопку «Вставить», и вам будет предоставлен код <iframe> - скопируйте его.
    5. Вставьте его в поле ввода ниже и посмотрите на результат в Output.
    @@ -53,7 +53,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
  • Вставьте его в поле ввода ниже и посмотрите на результат в Output.
    • -

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

    +

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

    -

    Быстрый пример - попробуйте загрузить предыдущий пример, который мы показали выше, в ваш браузер (вы можете найти его живой пример на Github (см. Также исходный код). На самом деле, вы ничего не увидите на странице, т.к. если вы посмотрите в консоль в инструментах разработчика браузера, вы увидите сообщение, объясняющее вам, почему. В Firefox вы получите сообщение «Отказано в доступе» в связи с X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary не разрешает кадрирование. Это связано с тем, что разработчики, которые построили MDN, включили параметр на сервере, который обслуживает страницы веб-сайта, запрещая им внедряться внутри <iframe> (см. {{Anch ("Настройка директивы CSP")}} ниже). Суть здесь такова - целой странице MDN на самом деле нет смысла встраиваться в другие страницы - конечно, если вы не хотите сделать что-то вроде встраивания их на свой сайт и выставлять их как свои собственные; или пытаться украсть данные с помощью clickjacking, что очень плохо. Плюс, если все начнут это делать, вся дополнительная пропускная способность начнет стоить Mozilla больших денег.

    +

    Быстрый пример - попробуйте загрузить предыдущий пример, который мы показали выше, в ваш браузер (вы можете найти его живой пример на Github (см. Также исходный код). На самом деле, вы ничего не увидите на странице, т.к. если вы посмотрите в консоль в инструментах разработчика браузера, вы увидите сообщение, объясняющее вам, почему. В Firefox вы получите сообщение «Отказано в доступе» в связи с X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary не разрешает кадрирование. Это связано с тем, что разработчики, которые построили MDN, включили параметр на сервере, который обслуживает страницы веб-сайта, запрещая им внедряться внутри <iframe> (см. {{Anch ("Настройка директивы CSP")}} ниже). Суть здесь такова - целой странице MDN на самом деле нет смысла встраиваться в другие страницы - конечно, если вы не хотите сделать что-то вроде встраивания их на свой сайт и выставлять их как свои собственные; или пытаться украсть данные с помощью clickjacking, что очень плохо. Плюс, если все начнут это делать, вся дополнительная пропускная способность начнёт стоить Mozilla больших денег.

    Используйте только при необходимости

    @@ -237,8 +237,8 @@ textarea.onkeyup = function(){

    {{Glossary("HTTPS")}} это зашифрованная версия {{Glossary("HTTP")}}. Вы должны обслуживать свои веб-сайты, используя HTTPS, всегда, когда это возможно :

      -
    1. HTTPS уменьшает вероятность того, что контент был изменен по пути;
      2. -
    2. HTTPS запрещает доступ внедренного контента к контенту в вашем исходном документе и наоборот.
      3. +
    3. HTTPS уменьшает вероятность того, что контент был изменён по пути;
      4. +
    4. HTTPS запрещает доступ внедрённого контента к контенту в вашем исходном документе и наоборот.

    Использование HTTPS требует сертификат безопасности, что может обходиться в копеечку (хотя есть Let's Encrypt, что облегчает задачу). Если вы не можете его получить, вы можете отдавать свой родительский документ с помощью HTTP. Однако, из-за второго преимущества HTTPS во что бы то ни стало вы не должны внедрять сторонний контент с HTTP. (В лучшем случае ваш браузер выдаст угрожающее предупреждение.) Все уважаемые компании, которые делают контент доступным для внедрения через <iframe>, доступны через HTTPS - посмотрите URL-адреса внутри <iframe> src при встраивании, например, содержимого из Карт Google или Youtube.

    @@ -256,7 +256,7 @@ textarea.onkeyup = function(){

    Если это необходимо, вы можете добавлять разрешения один за другим (внутри значения атрибута sandbox="") — смотри {{htmlattrxref('sandbox','iframe')}} ссылка для всех доступных опций. Важно отметить, что вы никогда не должны добавлять атрибуты allow-scripts и allow-same-origin в свой sandbox атрибут одновременно — в таком случае, встроенный контент может обходить политику безопасности, которая запрещает сайтам выполнять скрипты и использовать JavaScript для отключения "песочницы" sandbox .

    -

    Примечание. "Песочница" не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определенный контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого {{glossary("domain")}} на ваш основной сайт.

    +

    Примечание. "Песочница" не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определённый контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого {{glossary("domain")}} на ваш основной сайт.

    Настройка директив CSP

    @@ -275,7 +275,7 @@ textarea.onkeyup = function(){

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

    -

    Тем не менее, вы вряд ли будете использовать эти элементы очень часто. Апплеты не использовались годами, Flash в настоящее время не очень популярен из-за ряда причин (см. {{Anch ("Случай с плагинами")}}, ниже), PDF-файлы, как правило, лучше открывать по ссылке, а другой контент - такой, как изображения и видео, могут обрабатываться намного проще. Плагины и эти методы внедрения действительно являются устаревшими технологиями, и мы упоминаем их здесь на случай, если вы столкнетесь с ними в определенных обстоятельствах, таких как интрасети или корпоративные проекты.

    +

    Тем не менее, вы вряд ли будете использовать эти элементы очень часто. Апплеты не использовались годами, Flash в настоящее время не очень популярен из-за ряда причин (см. {{Anch ("Случай с плагинами")}}, ниже), PDF-файлы, как правило, лучше открывать по ссылке, а другой контент - такой, как изображения и видео, могут обрабатываться намного проще. Плагины и эти методы внедрения действительно являются устаревшими технологиями, и мы упоминаем их здесь на случай, если вы столкнётесь с ними в определённых обстоятельствах, таких как интрасети или корпоративные проекты.

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

    @@ -343,7 +343,7 @@ textarea.onkeyup = function(){

    Дело против плагинов

    -

    Когда-то плагины были незаменимы в Интернете. Помните дни, когда вам приходилось устанавливать Adobe Flash Player для просмотра онлайн-фильма? И потом постоянно возникали раздражающие предупреждения об обновлении Flash Player и Java Runtime Environment. С тех пор веб-технологии стали намного надежнее. Почти всем сервисам пришло время прекратить доставлять контент с помощью плагинов и вместо этого использовать веб-технологии.

    +

    Когда-то плагины были незаменимы в Интернете. Помните дни, когда вам приходилось устанавливать Adobe Flash Player для просмотра онлайн-фильма? И потом постоянно возникали раздражающие предупреждения об обновлении Flash Player и Java Runtime Environment. С тех пор веб-технологии стали намного надёжнее. Почти всем сервисам пришло время прекратить доставлять контент с помощью плагинов и вместо этого использовать веб-технологии.

    -

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

    +

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

    -

    Еще одна такая ситуация - всегда популярный файл MP3. «Файл MP3» на самом деле является звуковой дорожкой MPEG-1 Audio Layer III (MP3), хранящейся в контейнере MPEG или MPEG-2. Это особенно интересно, поскольку, хотя большинство браузеров не поддерживают использование мультимедиа MPEG в элементах {{HTMLElement ("video")}} и {{HTMLElement ("audio")}}, они могут поддерживать MP3 из-за его популярности.

    +

    Ещё одна такая ситуация - всегда популярный файл MP3. «Файл MP3» на самом деле является звуковой дорожкой MPEG-1 Audio Layer III (MP3), хранящейся в контейнере MPEG или MPEG-2. Это особенно интересно, поскольку, хотя большинство браузеров не поддерживают использование мультимедиа MPEG в элементах {{HTMLElement ("video")}} и {{HTMLElement ("audio")}}, они могут поддерживать MP3 из-за его популярности.

    Аудиоплеер обычно воспроизводит аудиодорожку напрямую, например файл MP3 или Ogg. Для этого не нужны контейнеры.

    Поддержка медиафайлов в браузерах

    -

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

    +

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

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

    @@ -93,9 +93,9 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content

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

    -

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

    +

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

    -

    Так как мы это сделаем? Взгляните на следующий обновленный пример (и попробуйте живой пример):

    +

    Так как мы это сделаем? Взгляните на следующий обновлённый пример (и попробуйте живой пример):

    <video controls>
   <source src="rabbit320.mp4" type="video/mp4">
@@ -103,12 +103,12 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
   <p>Ваш браузер не поддерживает HTML5 видео. Вот <a href="rabbit320.mp4">ссылка на видео</a> взамен.</p>
 </video>
    -

    Здесь мы изъяли атрибут src  из нашего тега <video>, и вместо этого включали отдельные  элементы {{htmlelement("source")}}, каждый из которых ссылается на собственный источник. В этом случае браузер пройдется по элементам <source> и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек. Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.

    +

    Здесь мы изъяли атрибут src  из нашего тега <video>, и вместо этого включали отдельные  элементы {{htmlelement("source")}}, каждый из которых ссылается на собственный источник. В этом случае браузер пройдётся по элементам <source> и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек. Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.

    -

    Каждый элемент <source> также имеет атрибут type. Он не обязательный, но рекомендуется его включать — он содержит {{glossary("MIME type","MIME types")}} видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если type не включен, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.

    +

    Каждый элемент <source> также имеет атрибут type. Он не обязательный, но рекомендуется его включать — он содержит {{glossary("MIME type","MIME types")}} видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если type не включён, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.

    -

    Примечание: Наша статья о поддерживаемых медиаформатах описывает некоторые распространенные {{glossary("MIME type","MIME types")}}.

    +

    Примечание: Наша статья о поддерживаемых медиаформатах описывает некоторые распространённые {{glossary("MIME type","MIME types")}}.

    Другие параметры <video>

    @@ -136,12 +136,12 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
    {{htmlattrxref("loop","video")}}
    Этот атрибут позволяет воспроизводить видео (или аудио) снова, когда он заканчивается. Это также может раздражать, поэтому используйте тогда, когда это действительно необходимо.
    {{htmlattrxref("muted","video")}}
    -
    Этот атрибут заставляет проигрыватель воспроизводить звук, отключенный по умолчанию.
    +
    Этот атрибут заставляет проигрыватель воспроизводить звук, отключённый по умолчанию.
    {{htmlattrxref("poster","video")}}
    Этот атрибут принимает в качестве значения URL-адрес изображения, который будет отображаться до воспроизведения видео. Он предназначен для заставки к видео или рекламы.
    {{htmlattrxref("preload","video")}}
    -

    этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трех значений:

    +

    этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трёх значений:

    • "none" не буферизирует файл
      • @@ -151,7 +151,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
    -

    Вы можете найти приведенный выше пример для воспроизведения на Github (также просмотрите исходный код.) Обратите внимание, что мы не включили атрибут autoplay в live-версию - если видео начнет воспроизводиться, как только страница загрузится, вы не увидите заставку к видео!

    +

    Вы можете найти приведённый выше пример для воспроизведения на Github (также просмотрите исходный код.) Обратите внимание, что мы не включили атрибут autoplay в live-версию - если видео начнёт воспроизводиться, как только страница загрузится, вы не увидите заставку к видео!

    Элемент <audio> 

    @@ -178,11 +178,11 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
  • Он также не поддерживает атрибут​​​​​ poster опять же, из-за отсутствия визуального компонента. 
    • -

    Помимо этого, <audio> поддерживает все те же функции, что и <video> - просмотрите приведенные выше разделы для получения дополнительной информации о них.

    +

    Помимо этого, <audio> поддерживает все те же функции, что и <video> - просмотрите приведённые выше разделы для получения дополнительной информации о них.

    Отображение текстовых дорожек к видео

    -

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

    +

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

    -

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

    +

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

    субтитры
    -
    Переводы иностранного материала, для людей, которые не понимают слов, произнесенных в аудио.
    +
    Переводы иностранного материала, для людей, которые не понимают слов, произнесённых в аудио.
    титры
    Синхронизированные транскрипции диалога или описания значимых звуков, чтобы люди, которые не могут слышать звук, поняли что происходит.
    рассчитанные описания
    @@ -226,7 +226,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
    1. Сохраните его как .vtt- файл, в разумном месте.
      2. -
    2. Ссылка на файл .vtt с элементом {{htmlelement ("track")}}. <track> должен быть помещен в <audio> или <video>, но после элементов <source>. Используйте атрибут {{htmlattrxref ("kind", "track")}}, чтобы указать, являются ли реплики субтитрами, титрами или описаниями. Кроме того, используйте {{htmlattrxref ("srclang", "track")}}, чтобы сообщить браузеру, на каком языке вы записывали субтитры.
      3. +
    3. Ссылка на файл .vtt с элементом {{htmlelement ("track")}}. <track> должен быть помещён в <audio> или <video>, но после элементов <source>. Используйте атрибут {{htmlattrxref ("kind", "track")}}, чтобы указать, являются ли реплики субтитрами, титрами или описаниями. Кроме того, используйте {{htmlattrxref ("srclang", "track")}}, чтобы сообщить браузеру, на каком языке вы записывали субтитры.

    Вот пример:

    @@ -238,7 +238,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content </video> -

    Это приведет к просмотру видео с субтитрами, таким как:

    +

    Это приведёт к просмотру видео с субтитрами, таким как:

    Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

    @@ -250,7 +250,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content

    Активное обучение: Внедрение собственного аудио и видео

    -

    Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в наши дни позволяют очень легко записывать аудио и видео, и, если вы можете перенести их на свой компьютер, вы можете их использовать. Возможно, вам придется сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как Miro Video Converter и Audacity. Мы хотели бы, чтобы вы попробовали сделать это!

    +

    Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в наши дни позволяют очень легко записывать аудио и видео, и, если вы можете перенести их на свой компьютер, вы можете их использовать. Возможно, вам придётся сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как Miro Video Converter и Audacity. Мы хотели бы, чтобы вы попробовали сделать это!

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

    diff --git a/files/ru/learn/html/tables/advanced/index.html b/files/ru/learn/html/tables/advanced/index.html index e578557eb7..a98631d064 100644 --- a/files/ru/learn/html/tables/advanced/index.html +++ b/files/ru/learn/html/tables/advanced/index.html @@ -7,7 +7,7 @@ translation_of: Learn/HTML/Tables/Advanced
    {{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
    -

    Во второй статье этого модуля мы рассматриваем еще несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.

    +

    Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.

    @@ -24,7 +24,7 @@ translation_of: Learn/HTML/Tables/Advanced

    Добавление заголовка к таблице с помощью <caption>

    -

    Вы можете добавить заголовок для таблицы установив его в элементе {{htmlelement("caption")}} и этот элемент необходимо поместить внутрь  элемента {{htmlelement("table")}}. Причем вам нужно поместить его сразу после открытия тега <table>.

    +

    Вы можете добавить заголовок для таблицы установив его в элементе {{htmlelement("caption")}} и этот элемент необходимо поместить внутрь  элемента {{htmlelement("table")}}. Причём вам нужно поместить его сразу после открытия тега <table>.

    <table>
   <caption>Dinosaurs in the Jurassic period</caption>
@@ -42,7 +42,7 @@ translation_of: Learn/HTML/Tables/Advanced
 
 
    Упражнение: Добавление заголовка
    
 
-
    Давайте попробуем это, вернемся к примеру который мы ранее встретили в прошлой статье.
    
+
    Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.
    
 
 
      
  
    1. Откройте расписание занятий школьного учителя по языку в конце статьи HTML таблицы основы, или сделайте копию нашего timetable-fixed.html файла.
      2. 
@@ -69,7 +69,7 @@ translation_of: Learn/HTML/Tables/Advanced
 
 
 
      
-
      Примечание: <tbody> всегда включен в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <tbody> и посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это дает больше контроля над структурой таблицы и стилем.
      
+
      Примечание: <tbody> всегда включён в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <tbody> и посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.
      
 
      
 
 
      Упражнение: Добавление структуры таблицы
      
@@ -93,11 +93,11 @@ tfoot {
 }
    -
  • Сохраните, обновите и вы увидите результат. Если <tbody> и <tfoot> элементы не были установлены, то вам придется писать много сложных селекторов/правил для применения одного и того же стиля.
    • +
  • Сохраните, обновите и вы увидите результат. Если <tbody> и <tfoot> элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля.
    • -

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

    +

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

    Ваша готовая таблица должна выглядеть примерно так:

    @@ -284,7 +284,7 @@ tfoot {

    Таблицы для пользователей с ограниченными возможностями

    -

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

    +

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

    @@ -373,7 +373,7 @@ tfoot { </tr> </thead> -

    И у каждой строки может быть определен заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):

    +

    И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):

    <tr>
   <th scope="row">Haircut</th>
@@ -385,7 +385,7 @@ tfoot {
 
 
    Скринридер распознает разметку структурированную таким образом, что позволяют пользователям прочитать весь столбец или строку целиком.
    
 
-
    Атрибут scope имеет еще два возможных значения — colgroup и rowgroup. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу "Items sold..." в начале этого раздела статьи, вы увидите что ячейка с "Clothes" находится над ячейками "Trousers", "Skirts" и "Dresses". Все эти ячейки должны быть помечены как заголовки (<th>), но "Clothes"  заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому "Clothes" должна получить атрибут scope="colgroup", тогда как другие получат атрибут scope="col".
    
+
    Атрибут scope имеет ещё два возможных значения — colgroup и rowgroup. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу "Items sold..." в начале этого раздела статьи, вы увидите что ячейка с "Clothes" находится над ячейками "Trousers", "Skirts" и "Dresses". Все эти ячейки должны быть помечены как заголовки (<th>), но "Clothes"  заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому "Clothes" должна получить атрибут scope="colgroup", тогда как другие получат атрибут scope="col".
    
 
 
    Атрибуты id и headers
    
 
@@ -393,12 +393,12 @@ tfoot {
 
 
      
  
    1. Вы устанавливаете уникальный id для каждого<th> элемента.
      2. 
- 
    2. Вы устанавливаете атрибут headers для каждого <td> элемента. Каждый headers атрибут должен содержать список всех id , разделенный пробелами, ко всем <th> элементам которые действуют как заголовок для этой ячейки.
      3. 
+ 
    3. Вы устанавливаете атрибут headers для каждого <td> элемента. Каждый headers атрибут должен содержать список всех id , разделённый пробелами, ко всем <th> элементам которые действуют как заголовок для этой ячейки.
      4. 
 
    
 
 
    Это обеспечивает явное определение позиции для каждой ячейки вашей HTML таблицы, определяет заголовки столбцов и строк таблицы. Для того чтобы это работало реально хорошо таблице нужно определить и заголовки столбцов, и заголовки строк.
    
 
-
    Вернемся к нашему примеру с расчетом затрат, его можно переписать следующим образом:
    
+
    Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:
    
 
 
    <thead>
   <tr>
@@ -440,7 +440,7 @@ tfoot {
 
 
    Заключение
    
 
-
    Есть еще некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали все что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите Styling Tables.
    
+
    Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали все что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите Styling Tables.
    
 
 
    {{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
    
 
diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.html
index 15f766186a..08a1767593 100644
--- a/files/ru/learn/html/tables/basics/index.html
+++ b/files/ru/learn/html/tables/basics/index.html
@@ -30,7 +30,7 @@ translation_of: Learn/HTML/Tables/Basics
 
 
    A swimming timetable showing a sample data table
    
 
-
    Люди постоянно используют таблицы, причем уже давно, как показывает документ по переписи в США, относящийся к 1800 году:
    
+
    Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:
    
 
 
    A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.
    
 
@@ -38,7 +38,7 @@ translation_of: Learn/HTML/Tables/Basics
 
 
    Как работает таблица?
    
 
-
    Смысл таблицы в том, что она жесткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведенную ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.
    
+
    Смысл таблицы в том, что она жёсткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведённую ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.
    Items Sold August 2016
    @@ -68,7 +68,7 @@ translation_of: Learn/HTML/Tables/Basics - + @@ -94,18 +94,18 @@ translation_of: Learn/HTML/Tables/Basics
    Personal pronouns
    ♀ онаеееё
    o
    -

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

    +

    Если правильно представить таблицу HTML, интерпретировать её данные смогут даже люди, имеющие проблемы со зрением.

    Оформление таблиц

    -

    Исходный код HTML (HTML source code) вышеприведенной таблице есть в GitHub; посмотрите его и живой пример (look at the live example)! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведенный в GitHub пример информации о стиле не имеет.

    +

    Исходный код HTML (HTML source code) вышеприведённой таблице есть в GitHub; посмотрите его и живой пример (look at the live example)! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.

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

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

    -

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

    +

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

    Когда не надо использовать таблицы HTML?

    @@ -116,21 +116,21 @@ translation_of: Learn/HTML/Tables/Basics
    1. Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением: Скринридеры (Screenreaders), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.
      2. -
    2. Таблицы создают путаницу тегов: Как уже упоминалось, оформление страниц с помощью таблиц дает более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
      3. +
    3. Таблицы создают путаницу тегов: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
    4. Таблицы не реагируют автоматически на тип устройства: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.

    Упражнение: Ваша первая таблица

    -

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

    +

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

    1. Прежде всего, создайте локальную копию blank-template.html и minimal-table.css в новой папке на вашем компьютере.
    2. Содержимое любой таблицы заключается между двумя тегами : <table></table>. Добавьте их в тело HTML.
      3. -
    3. Самым маленьким контейнером в таблице является ячейка, она создается элементом <td> ('td' - сокращение от 'table data'). Введите внутри тегов table следующее: +
    4. Самым маленьким контейнером в таблице является ячейка, она создаётся элементом <td> ('td' - сокращение от 'table data'). Введите внутри тегов table следующее: 
      <td>Hi, I'm your first cell.</td>
      5. -
    5. Чтобы получить строку из четырех ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом: +
    6. Чтобы получить строку из четырёх ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом: 
      <td>Hi, I'm your first cell.</td>
 <td>I'm your second cell.</td>
 <td>I'm your third cell.</td>
@@ -138,7 +138,7 @@ translation_of: Learn/HTML/Tables/Basics
    -

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

    +

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

    Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент <tr> ('tr' - сокращение от 'table row'). Попробуем, как это получится.

    @@ -152,7 +152,7 @@ translation_of: Learn/HTML/Tables/Basics <td>I'm your fourth cell.</td> </tr> -
  • Теперь, когда одна строка уже есть, добавим еще — каждую строку надо вложить в дополнительный элемент <tr>, а каждая ячейка должна быть внутри элемента <td>.
    • +
  • Теперь, когда одна строка уже есть, добавим ещё — каждую строку надо вложить в дополнительный элемент <tr>, а каждая ячейка должна быть внутри элемента <td>.

    • В результате получится таблица, которая будет выглядеть примерно так:

    @@ -180,7 +180,7 @@ translation_of: Learn/HTML/Tables/Basics

    Добавление заголовков с помощью элементов <th>

    -

    Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмем следующий пример. Сначала исходный код:

    +

    Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:

    <table>
   <tr>
@@ -262,7 +262,7 @@ translation_of: Learn/HTML/Tables/Basics
  
 
 
-
    Проблема в том, что, хотя вы и можете представить, о чем идет речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.
    
+
    Проблема в том, что, хотя вы и можете представить, о чем идёт речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.
    
 
 
    Упражнение: заголовки
    
 
@@ -270,7 +270,7 @@ translation_of: Learn/HTML/Tables/Basics
 
 
      
  
    1. Сначала создайте локальную копию dogs-table.html и minimal-table.css в новой папке на вашем компьютере. HTML содержит пример Dogs, который вы уже видели выше.
      2. 
- 
    2. Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент <th> ('th' сокращение от 'table header'). Он работает в точности как <td>, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своем HTML все элементы <td>, содержащие заголовки, на элементы <th>.
      3. 
+ 
    3. Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент <th> ('th' сокращение от 'table header'). Он работает в точности как <td>, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своём HTML все элементы <td>, содержащие заголовки, на элементы <th>.
      4. 
  
    4. Сохраните HTML и загрузите его в браузер, и вы увидите, что заголовки теперь выглядят как заголовки.
      5. 
 
    
 
@@ -283,14 +283,14 @@ translation_of: Learn/HTML/Tables/Basics
 
    Мы уже частично ответили на этот вопрос — когда заголовки выделяются, легче искать данные и таблица выглядит лучше.
    
 
 
    
-
    Примечание: По умолчанию к заголовкам таблицы применяется определенный стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.
    
+
    Примечание: По умолчанию к заголовкам таблицы применяется определённый стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.
    
 
    
 
 
    Заголовки дают дополнительное преимущество — вместе с атрибутом scope (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно
    
 
 
    Слияние нескольких строк или столбцов
    
 
-
    Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмем простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.
    
+
    Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмём простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.
    
 
 
    Исходная разметка выглядит так:
    
 
@@ -372,7 +372,7 @@ translation_of: Learn/HTML/Tables/Basics
 
 
    И последняя возможность, о которой рассказывается в данной статье. HTML позволяет указать, какой стиль нужно применять к целому столбцу данных сразу — для этого применяют элементы  <col> и <colgroup>. Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде {{cssxref(":nth-child()")}} было бы слишком утомительно.
    
 
-
    Возьмем простой пример:
    
+
    Возьмём простой пример:
    
 
 
    <table>
   <tr>
@@ -389,7 +389,7 @@ translation_of: Learn/HTML/Tables/Basics
   </tr>
 </table>
    
 
-
    Что дает нам:
    
+
    Что даёт нам:
    
 
 
@@ -408,7 +408,7 @@ translation_of: Learn/HTML/Tables/Basics
  
    
  
 
    
 
-
    Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трех ячеек в столбце (в реальном проекте, возможно, придется вводить class на всех трех и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <col>. Элемент <col> задается в контейнере <colgroup> сразу же за открывающим тегом <table>. Эффект, который мы видели выше, можно задать так:
    
+
    Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трёх ячеек в столбце (в реальном проекте, возможно, придётся вводить class на всех трёх и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <col>. Элемент <col> задаётся в контейнере <colgroup> сразу же за открывающим тегом <table>. Эффект, который мы видели выше, можно задать так:
    
 
 
    <table>
   <colgroup>
@@ -429,7 +429,7 @@ translation_of: Learn/HTML/Tables/Basics
   </tr>
 </table>
    
 
-
    Мы определяем два "стилизующих столбца". Мы не применяем стиль к первому столбцу, но пустой элемент <col> ввести необходимо — иначе к первому столбцу не будет применен стиль.
    
+
    Мы определяем два "стилизующих столбца". Мы не применяем стиль к первому столбцу, но пустой элемент <col> ввести необходимо — иначе к первому столбцу не будет применён стиль.
    
 
 
    Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент <col> с атрибутом span, таким образом:
    
 
@@ -515,9 +515,9 @@ translation_of: Learn/HTML/Tables/Basics
  
  • Добавьте элемент <colgroup> вверху таблицы, сразу же под тегом <table>, куда вы сможете вставлять элементы <col>.
    • 
  
  • Первые два столбца надо оставить без стиля..
    • 
  
  • Добавьте цвет фона для третьего столбца. Значением атрибута style будет  background-color:#97DB9A;
    • 
- 
  • Задайте ширину для четвертого столбца. Значением атрибута style будет width: 42px;
    • 
+ 
  • Задайте ширину для четвёртого столбца. Значением атрибута style будет width: 42px;
    • 
  
  • Добавьте цвет фона для пятого столбца. Значением атрибута style будет background-color: #97DB9A;
    • 
- 
  • Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведет новый класс. Значениями атрибута style будут: background-color:#DCC48E; border:4px solid #C1437A;
    • 
+ 
  • Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведёт новый класс. Значениями атрибута style будут: background-color:#DCC48E; border:4px solid #C1437A;
    • 
  
  • Последние два дня выходные; значением атрибута style будет width: 42px;
    • 
 
 
diff --git a/files/ru/learn/html/tables/index.html b/files/ru/learn/html/tables/index.html
index 609f1b36fe..3f3d4e5cb8 100644
--- a/files/ru/learn/html/tables/index.html
+++ b/files/ru/learn/html/tables/index.html
@@ -5,7 +5,7 @@ translation_of: Learn/HTML/Tables
 ---
 
    {{LearnSidebar}}
    
 
-
    Структурирование табличных данных является в HTML самой обычной задачей, для этой цели есть множество элементов и атрибутов. С добавлением таблиц стилей (CSS) HTML с легкостью позволяет выводить в веб различные таблицы, например, расписание школьных уроков, график посещения бассейна, или статистические данные о ваших любимых динозаврах или футбольных командах. В данном разделе вы узнаете все, что вам потребуется для структурирования табличных данных с помощью HTML.
    
+
    Структурирование табличных данных является в HTML самой обычной задачей, для этой цели есть множество элементов и атрибутов. С добавлением таблиц стилей (CSS) HTML с лёгкостью позволяет выводить в веб различные таблицы, например, расписание школьных уроков, график посещения бассейна, или статистические данные о ваших любимых динозаврах или футбольных командах. В данном разделе вы узнаете все, что вам потребуется для структурирования табличных данных с помощью HTML.
    
 
 
    Необходимые условия
    
 
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 85c3d9dc91..78c6a63a01 100644
--- a/files/ru/learn/html/tables/structuring_planet_data/index.html
+++ b/files/ru/learn/html/tables/structuring_planet_data/index.html
@@ -36,7 +36,7 @@ translation_of: Learn/HTML/Tables/Structuring_planet_data
 
 
    Краткое описание проекта
    
 
-
    Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведенным инструкциям.
    
+
    Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведённым инструкциям.
    
 
 
    Готовая таблица должна выглядеть так:
    
 
@@ -49,16 +49,16 @@ translation_of: Learn/HTML/Tables/Structuring_planet_data
 
 
    Шаги для завершения
    
 
-
    Следующие шаги описывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле planets-data.txt. Если у вас возникли проблемы с визуализацией данных, посмотрите приведенный выше пример или попробуйте нарисовать диаграмму.
    
+
    Следующие шаги описывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле planets-data.txt. Если у вас возникли проблемы с визуализацией данных, посмотрите приведённый выше пример или попробуйте нарисовать диаграмму.
    
 
 
      
  
    1. Откройте вашу копию blank-template.html , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтитул (footer) для этого примера.
      2. 
  
    2. Добавьте предоставленную подпись к вашей таблице ("Caption" в конце planets-data.txt).
      3. 
  
    3. Добавьте строку в заголовок таблицы, содержащую все заголовки столбцов.
      4. 
  
    4. Создайте все строки содержимого внутри тела таблицы, помня, что все заголовки строк должны быть семантически.
      5. 
- 
    5. Убедитесь, что весь контент помещен в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.
      6. 
+ 
    6. Убедитесь, что весь контент помещён в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.
      7. 
  
    7. Добавьте атрибуты, чтобы заголовки строк и столбцов были однозначно связаны со строками, столбцами или группами строк, для которых они выступают в качестве заголовков.
      8. 
- 
    8. Добавьте черную рамку вокруг столбца, который содержит все заголовки строк с именами планет.
      9. 
+ 
    9. Добавьте чёрную рамку вокруг столбца, который содержит все заголовки строк с именами планет.
      10. 
 
    
 
 
    Подсказки и советы
    
diff --git a/files/ru/learn/index.html b/files/ru/learn/index.html
index 58282e7a14..521272d551 100644
--- a/files/ru/learn/index.html
+++ b/files/ru/learn/index.html
@@ -72,7 +72,7 @@ translation_of: Learn
  
    Производительность веб-приложений: делаем сайты быстрыми и отзывчивыми 
    
  
    Веб-производительность — это искусство обеспечения быстрой загрузки веб-приложений и их реагирования на действия пользователя, независимо от скорости соединения пользователя, размера экрана, сети или возможностей устройства.
    
  
    Инструменты и тестирование
    
- 
    В этой теме рассматриваются инструменты, которые разработчики используют для оптимизации своей работы, например: инструменты для кросс-браузерного тестирования, линтеры, средства форматирования, инструменты преобразования, системы контроля версий, инструменты развертывания и клиентские JavaScript-фреймворки.
    
+ 
    В этой теме рассматриваются инструменты, которые разработчики используют для оптимизации своей работы, например: инструменты для кросс-браузерного тестирования, линтеры, средства форматирования, инструменты преобразования, системы контроля версий, инструменты развёртывания и клиентские JavaScript-фреймворки.
    
  
    Серверное программирование веб-сайтов
    
  
    Даже если вы преимущественно интересуетесь фронтенд-разработкой, всё равно полезно знать, как работают серверы и функции, написанные на серверном коде. В этой теме представлены общие сведения о том, как работает серверная часть, и подробные руководства по созданию серверного приложения с использованием двух популярных фреймворков: Django (Python) и Express (Node.js).
    diff --git a/files/ru/learn/javascript/asynchronous/async_await/index.html b/files/ru/learn/javascript/asynchronous/async_await/index.html index bef0f49847..4c0c08ae33 100644 --- a/files/ru/learn/javascript/asynchronous/async_await/index.html +++ b/files/ru/learn/javascript/asynchronous/async_await/index.html @@ -11,7 +11,7 @@ translation_of: Learn/JavaScript/Asynchronous/Async_await
    {{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
    -

    В ECMAScript версии 2017 появились async functions и ключевое слово await (ECMAScript Next support in Mozilla). По существу, такие функции есть синтаксический сахар над Promises и Generator functions (ts39). С их помощью легче писать/читать асинхронный код, ведь они позволяют использовать привычный синхронный стиль написания. В этой статье мы на базовом уровне разберемся в их устройстве.

    +

    В ECMAScript версии 2017 появились async functions и ключевое слово await (ECMAScript Next support in Mozilla). По существу, такие функции есть синтаксический сахар над Promises и Generator functions (ts39). С их помощью легче писать/читать асинхронный код, ведь они позволяют использовать привычный синхронный стиль написания. В этой статье мы на базовом уровне разберёмся в их устройстве.

    @@ -41,7 +41,7 @@ hello();

    Функция возвращает "Hello" — ничего необычного, верно ?

    -

    Но что если мы сделаем ее асинхронной ? Проверим:

    +

    Но что если мы сделаем её асинхронной ? Проверим:

    async function hello() { return "Hello" };
 hello();
    @@ -63,16 +63,16 @@ hello();
    hello().then((value) => console.log(value))
    -

    или еще короче

    +

    или ещё короче

    hello().then(console.log)
    -

    Итак, ключевое слово async, превращает обычную функцию в асинхронную и результат вызова функции оборачивает в Promise. Также асинхронная функция позволяет использовать в своем теле ключевое слово await, о котором далее.

    +

    Итак, ключевое слово async, превращает обычную функцию в асинхронную и результат вызова функции оборачивает в Promise. Также асинхронная функция позволяет использовать в своём теле ключевое слово await, о котором далее.

    Ключевое слово await

    -

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

    +

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

    Вы можете использовать await перед любой функцией, что возвращает Promise, включая Browser API функции.

    @@ -84,7 +84,7 @@ hello(); hello().then(alert); -

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

    +

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

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

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

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

    -

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

    +

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

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

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

    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() на результате, чтобы отобразить его на экране.

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


    Чтобы обработать ошибки у нас есть несколько вариантов

    -

    Мы можем использовать синхронную try...catch структуру с async/await. Вот измененная версия первого примера выше:

    +

    Мы можем использовать синхронную try...catch структуру с async/await. Вот изменённая версия первого примера выше:

    async function myFetch() {
   try {
@@ -195,7 +195,7 @@ myFetch().then((blob) => {
 
 myFetch();
    -

    В блок catch() {} передается объект ошибки, который мы назвали e; мы можем вывести его в консоль, чтобы посмотреть детали: где и почему возникла ошибка.

    +

    В блок catch() {} передаётся объект ошибки, который мы назвали e; мы можем вывести его в консоль, чтобы посмотреть детали: где и почему возникла ошибка.

    Если вы хотите использовать гибридный подходы (пример выше), лучше использовать блок .catch() после блока .then() вот так:

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

    Await и Promise.all()

    -

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

    +

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

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

    @@ -284,9 +284,9 @@ displayContent() 
    let values = await Promise.all([coffee, tea, description]);
    -

    С помощью await мы ждем массив результатов всех трех Promises и присваиваем его в переменную values. Это асинхронный код, но он написан в синхронном стиле, за счет чего он гораздо читабельнее.
    +

    С помощью await мы ждём массив результатов всех трёх Promises и присваиваем его в переменную values. Это асинхронный код, но он написан в синхронном стиле, за счёт чего он гораздо читабельнее.

    - Мы должны обернуть весь код в синхронную функцию, displayContent(), и мы не сильно сэкономили на количестве кода, но мы извлекли код блока .then(), за счет чего наш код стал гораздо чище.

    + Мы должны обернуть весь код в синхронную функцию, displayContent(), и мы не сильно сэкономили на количестве кода, но мы извлекли код блока .then(), за счёт чего наш код стал гораздо чище.

    Для обработки ошибок мы добавили блок .catch() для функции displayContent(); Это позволило нам отловить ошибки в обоих функциях.

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

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

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

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

    @@ -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() выглядит как:

    diff --git a/files/ru/learn/javascript/asynchronous/concepts/index.html b/files/ru/learn/javascript/asynchronous/concepts/index.html index def7da8a78..cd87899ec3 100644 --- a/files/ru/learn/javascript/asynchronous/concepts/index.html +++ b/files/ru/learn/javascript/asynchronous/concepts/index.html @@ -29,7 +29,7 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts

    Что же такое Асинхронность?

    -

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

    +

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

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

    @@ -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', () => {
@@ -69,7 +69,7 @@ btn.addEventListener('click', () => {
 
    В нашем следующем примере, simple-sync-ui-blocking.html (посмотреть пример), мы сделаем что-нибудь более реалистичное, с чем вы сможете столкнуться на реальной странице. Мы заблокируем действия пользователя отрисовкой страницы. В этом примере у нас две кнопки:
    -

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

    +

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

    -

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

    +

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

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

    @@ -117,7 +117,7 @@ Thread 2: Task C --> Task D
    Main thread: Render circles to canvas --> Display alert()
    -

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

    +

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

      Main thread: Task A --> Task C
 Worker thread: Expensive task B
    @@ -128,18 +128,18 @@ Worker thread: Expensive task B

    Воркеры полезный инструмент, но у них есть свои ограничения. Самое существенное, заключается в том, что они не имеют доступа к {{Glossary("DOM")}} — вы не можете использовать воркер для обновления UI. Мы не можем отрисовать миллион наших точек  внутри воркера; он может только обработать большой объем информации.

    -

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

    +

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

    Main thread: Task A --> Task B
    -

    В этом примере, предположим Task A делает что-то вроде получения картинки с сервера а Task B затем делает что-нибудь с полученной картинкой, например, применяет к ней фильтр. Если запустить выполняться Task A и тут же попытаться выполнить Task B, то вы получите ошибку, поскольку картинка еще не будет доступна.

    +

    В этом примере, предположим Task A делает что-то вроде получения картинки с сервера а Task B затем делает что-нибудь с полученной картинкой, например, применяет к ней фильтр. Если запустить выполняться Task A и тут же попытаться выполнить Task B, то вы получите ошибку, поскольку картинка ещё не будет доступна.

      Main thread: Task A --> Task B --> |Task D|
 Worker thread: Task C -----------> |      |
    -

    Теперь, давайте предположим, что Task D использует результат выполнения обеих задач Task B и Task C. Если мы уверенны, что оба результата будут доступны одновременно, тогда не возникнет проблем, однако, часто это не так. Если Task D попытаться запустить, когда какого-то нужного ей результата еще нет, выполнение закончится ошибкой.

    +

    Теперь, давайте предположим, что Task D использует результат выполнения обеих задач Task B и Task C. Если мы уверенны, что оба результата будут доступны одновременно, тогда не возникнет проблем, однако, часто это не так. Если Task D попытаться запустить, когда какого-то нужного ей результата ещё нет, выполнение закончится ошибкой.

    -

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

    +

    Чтобы избежать подобных проблем, браузеры позволяют нам выполнять определённые операции асинхронно. Такие возможности, как Promises позволяют запустить некоторую операцию (например, получение картинки с сервера), и затем подождать пока операция не вернёт результат, перед тем как начать выполнение другой задачи:

    Main thread: Task A                   Task B
     Promise:      |__async operation__|
    @@ -150,7 +150,7 @@ Worker thread: Task C -----------> | |

    Заключение

    -

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

    +

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

    В этом модуле

    diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html index 75cae85c11..731c40dfa7 100644 --- a/files/ru/learn/javascript/asynchronous/introducing/index.html +++ b/files/ru/learn/javascript/asynchronous/introducing/index.html @@ -84,13 +84,13 @@ btn.addEventListener('click', () => { let blob = response.blob(); // display your image blob in the UI somehow -

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

    +

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

    -

    Есть два типа стиля асинхронного кода, с которыми вы столкнетесь в коде JavaScript, старый метод — callbacks (колбэки) и более новый —  promise (промисы, обещания). В следующих разделах мы познакомимся с каждым из них. 

    +

    Есть два типа стиля асинхронного кода, с которыми вы столкнётесь в коде JavaScript, старый метод — callbacks (колбэки) и более новый —  promise (промисы, обещания). В следующих разделах мы познакомимся с каждым из них. 

    Асинхронные колбэки

    -

    Асинхронные колбэки — это функции, которые определяются как аргументы при вызове функции, которая начнет выполнение кода на заднем фоне. Когда код на заднем фоне завершает свою работу, он вызывает колбэк-функцию, оповещающую, что работа сделана, либо оповещающую о трудностях в завершении работы. Обратные вызовы — немного устаревшая практика, но они все еще употребляются в некоторых старомодных, но часто используемых API.

    +

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

    Пример асинхронного колбэка вторым параметром {{domxref("EventTarget.addEventListener", "addEventListener()")}} (как мы видели выше):

    @@ -104,9 +104,9 @@ let blob = response.blob();

    Первый параметр — тип обрабатываемого события, второй параметр — колбэк-функция, вызываемая при срабатывании события.

    -

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

    +

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

    -

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

    +

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

    function loadAsset(url, type, callback) {
   let xhr = new XMLHttpRequest();
@@ -130,7 +130,7 @@ 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(), и другие.

    @@ -163,7 +163,7 @@ gods.forEach(function (eachName, index){

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

    -

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

    +

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

    @@ -178,9 +178,9 @@ clearInterval(myInterval);

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

    -

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

    +

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

    -

    В приведенном ниже примере используется рекурсивный setTimeout () для запуска переданной функции каждые 100 миллисекунд:

    +

    В приведённом ниже примере используется рекурсивный setTimeout () для запуска переданной функции каждые 100 миллисекунд:

    let i = 1;
 
@@ -190,7 +190,7 @@ setTimeout(function run() {
   setTimeout(run, 100);
 }, 100);
    -

    Сравните приведенный выше пример со следующим - здесь используется setInterval () для достижения того же эффекта:

    +

    Сравните приведённый выше пример со следующим - здесь используется setInterval () для достижения того же эффекта:

    let i = 1;
 
@@ -201,10 +201,10 @@ setInterval(function run() {
 
 
    Чем рекурсивный setTimeout () отличается от setInterval () ?
    
 
-
    Разница между двумя версиями приведенного выше кода невелика.
    
+
    Разница между двумя версиями приведённого выше кода невелика.
    
 
 
      
- 
    • Рекурсивный setTimeout () гарантирует такую же задержку между выполнениями. (Например, 100 мс в приведенном выше случае.) Код будет запущен, затем подождет 100 миллисекунд, прежде чем запустится снова, поэтому интервал будет одинаковым, независимо от того, сколько времени требуется для выполнения кода.
      • 
+ 
    • Рекурсивный setTimeout () гарантирует такую же задержку между выполнениями. (Например, 100 мс в приведённом выше случае.) Код будет запущен, затем подождёт 100 миллисекунд, прежде чем запустится снова, поэтому интервал будет одинаковым, независимо от того, сколько времени требуется для выполнения кода.
      • 
  
    • Пример с использованием setInterval () работает несколько иначе. Выбранный вами интервал включает время, затрачиваемое на выполнение кода, который вы хотите запустить. Предположим, что выполнение кода занимает 40 миллисекунд - тогда интервал составляет всего 60 миллисекунд.
      • 
  
    • При рекурсивном использовании setTimeout () каждая итерация может вычислять различную задержку перед запуском следующей итерации. Другими словами, значение второго параметра может указывать другое время в миллисекундах для ожидания перед повторным запуском кода.
      • 
 
    
@@ -215,7 +215,7 @@ setInterval(function run() {
 
 
    Использование 0 в качестве значения для setTimeout () позволяет планировать выполнение указанной колбэк-функции как можно скорее, но только после того, как будет запущен основной поток кода.
    
 
-
    Например, код приведенный ниже (рабочий код) выводит alert содержащий "Hello", затем alert содержащий "World" как только вы нажмете ОК в первом alert.
    
+
    Например, код приведённый ниже (рабочий код) выводит alert содержащий "Hello", затем alert содержащий "World" как только вы нажмёте ОК в первом alert.
    
 
 
    setTimeout(function() {
   alert('World');
@@ -250,7 +250,7 @@ alert('Hello');
    
 
 draw();
    -

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

    +

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

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

    @@ -264,13 +264,13 @@ draw();

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

    -

    Если у вас есть монитор с частотой обновления 60 Гц и вы хотите достичь 60 кадров в секунду, у вас есть около 16,7 миллисекунд (1000/60) для выполнения кода анимации для рендеринга каждого кадра. Это напоминание о том, что вам нужно помнить об объеме кода, который вы пытаетесь запустить во время каждого прохождения цикла анимации.

    +

    Если у вас есть монитор с частотой обновления 60 Гц и вы хотите достичь 60 кадров в секунду, у вас есть около 16,7 миллисекунд (1000/60) для выполнения кода анимации для рендеринга каждого кадра. Это напоминание о том, что вам нужно помнить об объёме кода, который вы пытаетесь запустить во время каждого прохождения цикла анимации.

    -

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

    +

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

    Чем отличается requestAnimationFrame() от setInterval() and setTimeout()?

    -

    Давайте поговорим еще немного о том, чем метод requestAnimationFrame () отличается от других методов, используемых ранее. Глядя на наш код сверху:

    +

    Давайте поговорим ещё немного о том, чем метод requestAnimationFrame () отличается от других методов, используемых ранее. Глядя на наш код сверху:

    function draw() {
    // Drawing code goes here
@@ -295,7 +295,7 @@ setInterval(draw, 17);

    Фактическому колбэку, переданному в функцию requestAnimationFrame (), также может быть задан параметр: значение отметки времени, которое представляет время с момента начала работы requestAnimationFrame ().

    -

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

    +

    Это полезно, поскольку позволяет запускать вещи в определённое время и в постоянном темпе, независимо от того, насколько быстрым или медленным может быть ваше устройство. Общий шаблон, который вы бы использовали, выглядит примерно так:

    let startTime = null;
 
@@ -321,7 +321,7 @@ draw();

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

    -

    Хватит теории! Давайте выполним упражнение с использованием requestAnimationFrame() . Создадим простую анимацию "spinner animation"—вы могли ее видеть в приложениях когда происходят задержки при ответе с сервера и т.п..

    +

    Хватит теории! Давайте выполним упражнение с использованием requestAnimationFrame() . Создадим простую анимацию "spinner animation"—вы могли её видеть в приложениях когда происходят задержки при ответе с сервера и т.п..

    Note: Для такой простой анимации, вам следовало бы использовать CSS . Однако такой вид анимации очень полезен для демонстрации requestAnimationFrame() , вы скорее всего будете использовать этот метод когда делаете что-то более сложное, например обновление отображения игры в каждом кадре.

    @@ -376,7 +376,7 @@ let rAF; }
  • -

    Внутри draw () добавьте следующие строки. Они определят время начала, если оно еще не определено (это произойдет только на первой итерации цикла), и установят для параметра rotateCount значение для поворота счетчика (текущая временная метка, возьмите начальную временную метку, разделенную на три, чтобы замедлиться):

    +

    Внутри draw () добавьте следующие строки. Они определят время начала, если оно ещё не определено (это произойдёт только на первой итерации цикла), и установят для параметра rotateCount значение для поворота счётчика (текущая временная метка, возьмите начальную временную метку, разделённую на три, чтобы замедлиться):

      if (!startTime) {
    startTime = timestamp;
@@ -396,7 +396,7 @@ let rAF;
   
    spinner.style.transform = `rotate(${rotateCount}deg)`;
  • -

    В самом низу внутри функции draw () вставьте следующую строку. Это ключ ко всей операции - вы устанавливаете для переменной, определенной ранее, активный вызов requestAnimation (), который принимает функцию draw () в качестве своего параметра. Это запускает анимацию, постоянно выполняя функцию draw () со скоростью, близкой к 60 FPS.

    +

    В самом низу внутри функции draw () вставьте следующую строку. Это ключ ко всей операции - вы устанавливаете для переменной, определённой ранее, активный вызов requestAnimation (), который принимает функцию draw () в качестве своего параметра. Это запускает анимацию, постоянно выполняя функцию draw () со скоростью, близкой к 60 FPS.

    rAF = requestAnimationFrame(draw);
    • @@ -421,13 +421,13 @@ let rAF;

    Активное обучение: запуск и остановка нашей анимации

    -

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

    +

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

    Подсказки:

    • Обработчик события щелчка можно добавить к большинству элементов, включая документ <body>. Имеет смысл поместить его в элемент <body>, если вы хотите максимизировать интерактивную область - событие всплывает до его дочерних элементов.
      • -
    • Вы захотите добавить переменную отслеживания, чтобы проверить, вращается ли счетчик или нет, очистив кадр анимации, если он есть, и снова вызвать его, если это не так.
      • +
    • Вы захотите добавить переменную отслеживания, чтобы проверить, вращается ли счётчик или нет, очистив кадр анимации, если он есть, и снова вызвать его, если это не так.
    @@ -436,9 +436,9 @@ let rAF;

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

    -

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

    +

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

    -

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

    +

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

    {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}

    @@ -466,13 +466,13 @@ let rAF;

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

    -

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

    +

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

    Активное обучение: игра на реакцию

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

    -

    При нажатии кнопки «Start» счетчик, подобный тому, что мы видели ранее, отображается в течение случайного промежутка времени от 5 до 10 секунд. По истечении этого времени появится сообщение «PLAYERS GO !!» - как только это произойдет, первый игрок, который нажмет свою кнопку управления, выиграет игру.

    +

    При нажатии кнопки «Start» счётчик, подобный тому, что мы видели ранее, отображается в течение случайного промежутка времени от 5 до 10 секунд. По истечении этого времени появится сообщение «PLAYERS GO !!» - как только это произойдёт, первый игрок, который нажмёт свою кнопку управления, выиграет игру.

    {{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}

    @@ -480,7 +480,7 @@ let rAF;
    1. -

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

      +

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

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

      @@ -498,8 +498,8 @@ const result = document.querySelector('.result');
      1. Ссылка на спиннер, чтобы вы могли его анимировать.
      2. Ссылка на элемент {{htmlelement("div")}} содержащий спиннер, используемый для отображения и скрытия.
        3. -
      3. Счетчик поворотов. Он определяет, на сколько вы хотите показывать вращение спиннера на каждом кадре анимации.
        4. -
      4. Нулевое время начала. Это будет заполнено временем начала, когда счетчик начнет вращаться.
        5. +
      5. Счётчик поворотов. Он определяет, на сколько вы хотите показывать вращение спиннера на каждом кадре анимации.
        6. +
      6. Нулевое время начала. Это будет заполнено временем начала, когда счётчик начнёт вращаться.
      7. Неинициализированная переменная для последующего хранения вызова {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} который анимирует спиннер.
      8. Ссылка на кнопку Start .
      9. Ссылка на параграф результатов.
        10. @@ -514,7 +514,7 @@ const result = document.querySelector('.result'); }
      10. -

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

        +

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

        function draw(timestamp) {
   if(!startTime) {
@@ -532,13 +532,13 @@ const result = document.querySelector('.result');
        }
      11. -

        Теперь пришло время настроить начальное состояние приложения при первой загрузке страницы. Добавьте следующие две строки, которые просто скрывают абзац результатов и контейнер счетчика с помощью display: none ;.

        +

        Теперь пришло время настроить начальное состояние приложения при первой загрузке страницы. Добавьте следующие две строки, которые просто скрывают абзац результатов и контейнер счётчика с помощью display: none ;.

        result.style.display = 'none';
 spinnerContainer.style.display = 'none';
      12. -

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

        +

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

        function reset() {
   btn.style.display = 'block';
@@ -547,7 +547,7 @@ spinnerContainer.style.display = 'none';
        }
      13. -

        Хорошо, хватит подготовки! Пришло время сделать игру доступной! Добавьте в свой код следующий блок. Функция start () вызывает draw (), чтобы запустить вращение спиннера и отобразить его в пользовательском интерфейсе, скрыть кнопку Start, чтобы вы не могли испортить игру, запустив ее несколько раз одновременно, и запускает вызов setTimeout (), который выполняется функция setEndgame () по прошествии случайного интервала от 5 до 10 секунд. Следующий блок также добавляет обработчик событий к вашей кнопке для запуска функции start () при ее нажатии.

        +

        Хорошо, хватит подготовки! Пришло время сделать игру доступной! Добавьте в свой код следующий блок. Функция start () вызывает draw (), чтобы запустить вращение спиннера и отобразить его в пользовательском интерфейсе, скрыть кнопку Start, чтобы вы не могли испортить игру, запустив её несколько раз одновременно, и запускает вызов setTimeout (), который выполняется функция setEndgame () по прошествии случайного интервала от 5 до 10 секунд. Следующий блок также добавляет обработчик событий к вашей кнопке для запуска функции start () при её нажатии.

        btn.addEventListener('click', start);
 
@@ -561,7 +561,7 @@ function start() {
   
        
   
        Note: Вы увидите, что этот пример вызывает setTimeout() без сохранения возвращаемого значения. (не  let myTimeout = setTimeout(functionName, interval).) 
        
 
-  
        Это прекрасно работает, если вам не нужно очищать интервал / тайм-аут в любой момент. Если вы это сделаете, вам нужно будет сохранить возвращенный идентификатор!
        
+  
        Это прекрасно работает, если вам не нужно очищать интервал / тайм-аут в любой момент. Если вы это сделаете, вам нужно будет сохранить возвращённый идентификатор!
        
   
        
 
   
        Конечным результатом предыдущего кода является то, что при нажатии кнопки «Start» отображается спиннер, и игроки вынуждены ждать произвольное количество времени, прежде чем их попросят нажать их кнопку. Эта последняя часть обрабатывается функцией setEndgame (), которую вы определите позже.
        
@@ -602,7 +602,7 @@ function start() {
    
      14. Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счетчика.
        15. 
    
      15. Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!"  чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.
        16. 
    
      16. Прикрепите к документу обработчик событий keydown . При нажатии любой кнопки запускается функция keyHandler().
        17. 
-   
      17. Внутри keyHandler(), код включает объект события в качестве параметра (представленного e) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для ответа на определенные нажатия клавиш определенными действиями.
        18. 
+   
      18. Внутри keyHandler(), код включает объект события в качестве параметра (представленного e) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для ответа на определённые нажатия клавиш определёнными действиями.
        19. 
    
      19. Установите для переменной isOver значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клавиши.
        20. 
    
      20. Регистрация e.key в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.
        21. 
    
      21. Когда e.key принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда e.key это "l", отобразить сообщение о том, что Player 2 выиграл. (Note: Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для isOver значение true.
        22. 
@@ -619,7 +619,7 @@ function start() {
 
 
        Заключение
        
 
-
        Вот и все — все основы асинхронных циклов и интервалов рассмотрены в статье. Вы найдете эти методы полезными во многих ситуациях, но постарайтесь не злоупотреблять ими! Поскольку они по-прежнему выполняются в основном потоке, тяжелые и интенсивные колбэки (особенно те, которые управляют DOM) могут действительно замедлить страницу, если вы не будете осторожны.
        
+
        Вот и все — все основы асинхронных циклов и интервалов рассмотрены в статье. Вы найдёте эти методы полезными во многих ситуациях, но постарайтесь не злоупотреблять ими! Поскольку они по-прежнему выполняются в основном потоке, тяжёлые и интенсивные колбэки (особенно те, которые управляют DOM) могут действительно замедлить страницу, если вы не будете осторожны.
        
 
 
        {{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
        
 
@@ -628,7 +628,7 @@ function start() {
    - +
    Задача:Научить создавать пользовательской функции и объяснить еще несколько полезных деталей.Научить создавать пользовательской функции и объяснить ещё несколько полезных деталей.
    @@ -31,7 +31,7 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function

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

    -

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

    +

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

    Примечание: Этот пример будет работать во всех современных браузерах, но стиль может выглядеть немного смешным в более старых браузерах. Мы рекомендуем вам выполнять это упражнение в современном браузере, таком как Firefox, Opera или Chrome.

    @@ -39,10 +39,10 @@ translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function

    Основная функция

    -

    Для начала давайте соберем основную функцию.

    +

    Для начала давайте соберём основную функцию.

    -

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

    +

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

      @@ -81,9 +81,9 @@ closeBtn.onclick = function() {

      В следующем разделе используется другая функция DOM API, называемая {{domxref ("Document.createElement()")}}, применяется для создания элемента {{htmlelement ("div")}} и сохраняет ссылку на него в переменной, называемой panel. Этот элемент будет внешним контейнером нашего окна сообщений.

      -

      Затем мы используем еще одну функцию DOM API, называемую {{domxref ("Element.setAttribute()")}}, чтобы установить атрибут class на нашей панели со значением msgBox. Это упрощает стилизацию элемента. Если вы посмотрите на CSS на странице, вы увидите, что мы используем селектор класса .msgBox для стилизации окна сообщения и его содержимого.

      +

      Затем мы используем ещё одну функцию DOM API, называемую {{domxref ("Element.setAttribute()")}}, чтобы установить атрибут class на нашей панели со значением msgBox. Это упрощает стилизацию элемента. Если вы посмотрите на CSS на странице, вы увидите, что мы используем селектор класса .msgBox для стилизации окна сообщения и его содержимого.

      -

      Наконец, мы вызываем функцию DOM с именем {{domxref ("Node.appendChild()")}} в переменной html, которую мы сохранили ранее, которая вкладывает один элемент в другой как его дочерний элемент. Указываем панель <div> как дочерний элемент, который мы хотим вложить внутрь элемента <html>. То есть, когда мы создаем какой-то элемент, он не просто будет отображаться на странице сам по себе, нам нужно указать, куда его поместить.

      +

      Наконец, мы вызываем функцию DOM с именем {{domxref ("Node.appendChild()")}} в переменной html, которую мы сохранили ранее, которая вкладывает один элемент в другой как его дочерний элемент. Указываем панель <div> как дочерний элемент, который мы хотим вложить внутрь элемента <html>. То есть, когда мы создаём какой-то элемент, он не просто будет отображаться на странице сам по себе, нам нужно указать, куда его поместить.

      var panel = document.createElement('div');
 panel.setAttribute('class', 'msgBox');
@@ -101,7 +101,7 @@ panel.appendChild(closeBtn);

      В заключении мы используем обработчик событий {{domxref ("GlobalEventHandlers.onclick")}}, чтобы при нажатии кнопки был запущен некоторый код для удаления всей панели со страницы, т.е. для закрытия окна сообщения.

      -

      Вкратце, обработчик onclick — это свойство, доступное для кнопки (или, фактически, для любого элемента страницы), которое можно установить в функцию, чтобы указать, какой код следует запускать при нажатии кнопки. Вы узнаете об этом больше в нашей статье о последующих событиях. Мы делаем обработчик onclick равным анонимной функции, которая содержит код, запускаемый при нажатии кнопки. Строка внутри функции использует функцию {{domxref ("Node.removeChild()")}} DOM API, чтобы указать, что мы хотим удалить определенный дочерний элемент внутри HTML — в данном случае панель <div>.

      +

      Вкратце, обработчик onclick — это свойство, доступное для кнопки (или, фактически, для любого элемента страницы), которое можно установить в функцию, чтобы указать, какой код следует запускать при нажатии кнопки. Вы узнаете об этом больше в нашей статье о последующих событиях. Мы делаем обработчик onclick равным анонимной функции, которая содержит код, запускаемый при нажатии кнопки. Строка внутри функции использует функцию {{domxref ("Node.removeChild()")}} DOM API, чтобы указать, что мы хотим удалить определённый дочерний элемент внутри HTML — в данном случае панель <div>.

      closeBtn.onclick = function() {
   panel.parentNode.removeChild(panel);
@@ -121,9 +121,9 @@ panel.appendChild(closeBtn);

      Теперь у вас есть определение функции, написанное в вашем элементе <script>, но оно ничего не будет делать в том виде, в каком оно есть.

        -
      1. Попробуйте написать следующую строку под своей функцией, чтобы вызвать ее: +
      2. Попробуйте написать следующую строку под своей функцией, чтобы вызвать её: 
        displayMessage();
        - Эта строка вызывает функцию, немедленно запуская ее. Когда вы сохраните код и перезагрузите его в браузере, вы увидите, что небольшое окно сообщения появляется сразу и только один раз.
        3. + Эта строка вызывает функцию, немедленно запуская её. Когда вы сохраните код и перезагрузите его в браузере, вы увидите, что небольшое окно сообщения появляется сразу и только один раз.

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

        @@ -132,7 +132,7 @@ panel.appendChild(closeBtn);

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

      4. Удалите предыдущую добавленную строку.
        5. -
      5. Затем мы выберем кнопку и сохраним ссылку на нее в переменной. Добавьте следующую строку в свой код, над определением функции: +
      6. Затем мы выберем кнопку и сохраним ссылку на неё в переменной. Добавьте следующую строку в свой код, над определением функции: 
        var btn = document.querySelector('button');
      7. Наконец, добавьте следующую строку ниже предыдущей: @@ -151,7 +151,7 @@ panel.appendChild(closeBtn);

        Улучшение функции с параметрами

        -

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

        +

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

        1. @@ -170,7 +170,7 @@ panel.appendChild(closeBtn); 
          msg.textContent = msgText;
          2. -
        2. И последнее, но не менее важное: теперь вам нужно обновить вызов функции, чтобы включить в него обновленный текст сообщения. Измените следующую строку: +
        3. И последнее, но не менее важное: теперь вам нужно обновить вызов функции, чтобы включить в него обновлённый текст сообщения. Измените следующую строку: 
          btn.onclick = displayMessage;

          к этому блоку:

          @@ -178,8 +178,8 @@ panel.appendChild(closeBtn); 
          btn.onclick = function() {
   displayMessage('Woo, this is a different message!');
 };
          - Если мы хотим указать параметры в круглых скобках для вызываемой нами функции, то мы не можем назвать ее напрямую, нам нужно поместить ее в анонимную функцию, чтобы она не находилась непосредственно в области видимости и, следовательно, не вызывалась немедленно. Теперь она не будет вызываться до нажатия кнопки.
          4. -
        4. Перезагрузите и протестируйте код еще раз, и вы увидите, что он по-прежнему работает, только теперь вы также можете изменять сообщение внутри параметра, чтобы отображать разные сообщения в окне.
          5. + Если мы хотим указать параметры в круглых скобках для вызываемой нами функции, то мы не можем назвать её напрямую, нам нужно поместить её в анонимную функцию, чтобы она не находилась непосредственно в области видимости и, следовательно, не вызывалась немедленно. Теперь она не будет вызываться до нажатия кнопки. +
        5. Перезагрузите и протестируйте код ещё раз, и вы увидите, что он по-прежнему работает, только теперь вы также можете изменять сообщение внутри параметра, чтобы отображать разные сообщения в окне.

        Более сложный параметр

        @@ -187,7 +187,7 @@ panel.appendChild(closeBtn);

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

          -
        1. Для начала, загрузите значки, необходимые для этого упражнения (warning и chat [тут черные иконки на черном фоне... тролли на GitHub]) из GitHub. Сохраните их в новой папке icons в том же месте, что и ваш HTML-файл. +
        2. Для начала, загрузите значки, необходимые для этого упражнения (warning и chat [тут чёрные иконки на чёрном фоне... тролли на GitHub]) из GitHub. Сохраните их в новой папке icons в том же месте, что и ваш HTML-файл.
          Примечание: иконки warning и chat были найдены на iconfinder.com, и разработаны Nazarrudin Ansyari. Спасибо! (Фактические страницы значков были перемещены или удалены.) 
          3. @@ -213,8 +213,8 @@ background-repeat: no-repeat; } else { msg.style.paddingLeft = '20px'; } - Здесь, если параметр msgType установлен как 'warning', отображается значок предупреждения, а цвет фона панели устанавливается красным. Если для него установлено значение'chat', отображается значок чата, а цвет фона панели становится голубым. Если параметр msgType не задан вообще (или задано что-то другое), тогда вступает в действие else {...}, а абзацу просто присваиваются заданные по умолчанию отступы, нет никакого значка, при этом не задается цвет фона окна сообщения. Это обеспечивает состояние по умолчанию, если не указан параметр msgType, что означает, что это необязательный параметр! -
        3. Давайте протестируем нашу обновленную функцию, попробуем обновить вызов displayMessage () из этого: + Здесь, если параметр msgType установлен как 'warning', отображается значок предупреждения, а цвет фона панели устанавливается красным. Если для него установлено значение'chat', отображается значок чата, а цвет фона панели становится голубым. Если параметр msgType не задан вообще (или задано что-то другое), тогда вступает в действие else {...}, а абзацу просто присваиваются заданные по умолчанию отступы, нет никакого значка, при этом не задаётся цвет фона окна сообщения. Это обеспечивает состояние по умолчанию, если не указан параметр msgType, что означает, что это необязательный параметр!
          4. +
        4. Давайте протестируем нашу обновлённую функцию, попробуем обновить вызов displayMessage () из этого: 
          displayMessage('Woo, this is a different message!');

          к одному из них:

          @@ -230,7 +230,7 @@ displayMessage('Brian: Hi there, how are you today?','chat');

          Вывод

          -

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

          +

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

          diff --git a/files/ru/learn/javascript/building_blocks/conditionals/index.html b/files/ru/learn/javascript/building_blocks/conditionals/index.html index a4f5a6e2bf..774d7f2745 100644 --- a/files/ru/learn/javascript/building_blocks/conditionals/index.html +++ b/files/ru/learn/javascript/building_blocks/conditionals/index.html @@ -15,7 +15,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals
          {{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
          -

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

          +

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

          @@ -34,13 +34,13 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals

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

          -

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

          +

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

          Оператор if ... else

          -

          Давайте глянем на наиболее распространенный тип условного оператора, который вы будете использовать в JavaScript — if ... else оператор.

          +

          Давайте глянем на наиболее распространённый тип условного оператора, который вы будете использовать в JavaScript — if ... else оператор.

          Базовый if ... else синтаксис

          @@ -59,7 +59,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals
        5. Условие для проверки (condition), расположено внутри круглых скобок (например "это значение больше другого значения?", или "это значение существует?"). Это условие использует операторы сравнения (comparison operators), которые мы изучим позже, и возвратит нам true или false.
        6. Внутри скобок { } расположен код, который будет выполняться только в том случае, если условие (condition) верно (true).
        7. Ключевое слово else (иначе).
          8. -
        8. Еще скобки { }, код внутри которых выполнится, только если условие не верно (не true).
          9. +
        9. Ещё скобки { }, код внутри которых выполнится, только если условие не верно (не true).

          10. Этот код довольно читабелен — он говорит "if (если)  condition (условие) возвращает true (истина), запусти код A, else (иначе) запусти B"

          @@ -74,7 +74,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals

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

          -

          И, наконец, иногда вы можете встретить код if...else без фигурных скобок в сокращенной форме:

          +

          И, наконец, иногда вы можете встретить код if...else без фигурных скобок в сокращённой форме:

          if (condition) code to run if condition is true
 else run some other code instead
          @@ -83,7 +83,7 @@ else run some other code instead

          Реальный пример

          -

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

          +

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

          var shoppingDone = false;
 
@@ -93,7 +93,7 @@ if (shoppingDone === true) {
   var childsAllowance = 5;
 }
          -

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

          +

          В этом коде, как показано, всегда будет shoppingDone равный false, что означает разочарование для нашего бедного ребёнка. Мы должны предоставить механизм для родителя, чтобы установить для переменной shoppingDone значение  true , если ребёнок помог с покупками.

          Примечание: Вы можете увидеть больше в полной версии этого примера на GitHub (также посмотреть как он работает вживую.)

          @@ -143,7 +143,7 @@ function setWeather() {
          1. Здесь у нас есть элемент HTML {{htmlelement("select")}} который позволяет нам выбирать разные варианты погоды и простой абзац.
            2. -
          2. В JavaScript мы создаем ссылки на элементы {{htmlelement("select")}} и {{htmlelement("p")}} и добавляем обработчик события элемента <select>, чтобы при его изменении значения запускалась функция setWeather().
            3. +
          3. В JavaScript мы создаём ссылки на элементы {{htmlelement("select")}} и {{htmlelement("p")}} и добавляем обработчик события элемента <select>, чтобы при его изменении значения запускалась функция setWeather().
          4. Когда функция будет запущена, первоначально мы определим значение переменной choice, которая равна выбранному значению в элементе  <select>. Затем мы используем условный оператор для отображения текста внутри абзаца в зависимости от того, какое значение у переменной  choice. Обратите внимание, как все условия проверяются в else if() {...} блоках, за исключением первого, который использует if() {...}блок.
          5. Последний выбор, внутри  else {...} блока, в основном является «последним средством» — код внутри него будет запущен, если ни одно из условий не будет true. В этом случае он служит для удаления текста из абзаца, если ничего не выбрано, например, если пользователь решает повторно выбрать опцию "--Сделайте выбор--" которая указана в начале.
          @@ -176,7 +176,7 @@ if (cheese) { console.log('Сегодня нет сыра для бутерброда.'); } -

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

          +

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

          var shoppingDone = false;
 
@@ -188,7 +188,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
 
 
          Вложенность if ... else
          
 
-
          Вполне нормально использовать один условный оператор if...else внутри другого — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать еще один набор вариантов в зависимости от температуры:
          
+
          Вполне нормально использовать один условный оператор if...else внутри другого — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать ещё один набор вариантов в зависимости от температуры:
          
 
 
          if (choice === 'sunny') {
   if (temperature < 86) {
@@ -228,7 +228,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
   console.log('Вероятно, можно в нем оставаться.');
 }
          
 
-
          Последний тип логического оператора НЕ, выраженный ! оператором, можно использовать для отрицания выражения. Давайте объединим его с ИЛИ в приведенном выше примере:
          
+
          Последний тип логического оператора НЕ, выраженный ! оператором, можно использовать для отрицания выражения. Давайте объединим его с ИЛИ в приведённом выше примере:
          
 
 
          if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
   console.log('Вероятно, можно в нем оставаться.');
@@ -236,7 +236,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
   console.log('Вы должны быстро покинуть дом.');
 }
          
 
-
          В этом фрагменте, если условие ИЛИ возвращает true, оператор НЕ будет отрицать это и выражение вернет false.
          
+
          В этом фрагменте, если условие ИЛИ возвращает true, оператор НЕ будет отрицать это и выражение вернёт false.
          
 
 
          Можно сочетать любое количество логических операторов, в любой последовательности и в любой комбинации. В следующем примере код в блоке будет выполняться только в том случае, если оба условия с ИЛИ возвращают true, а следовательно, и оператор И возвращает true:
          
 
@@ -244,13 +244,13 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
   // код выполняется
 }
          -

          Распространенной ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделенных операторами || (ИЛИ). Например.

          +

          Распространённой ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделённых операторами || (ИЛИ). Например.

          if (x === 5 || 7 || 10 || 20) {
   // выполнить код
 }
          -

          В данном примере условие в if(...)  всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придется выполнять полноценную проверку после каждого оператора ИЛИ:

          +

          В данном примере условие в if(...)  всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придётся выполнять полноценную проверку после каждого оператора ИЛИ:

          if (x === 5 || x === 7 || x === 10 ||x === 20) {
   // выполнить код
@@ -258,7 +258,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
 
 
          Оператор switch
          
 
-
          Выражения if...else отлично справляются с добавлением условного кода, однако они не лишены недостатков. Они хорошо подходят для ситуации, когда имеется всего пара вариантов развития событий, каждый из которых имеет блок с приемлемым количеством кода, а также в случаях, когда условие является довольно сложным и включает несколько логических операторов. Если же нам требуется всего лишь задать переменную для определенного выбранного значения или напечатать конкретную фразу при определенном условии, изученный нами синтаксис может оказаться довольно громоздким, особенно если имеется большое количество вариантов выбора.
          
+
          Выражения if...else отлично справляются с добавлением условного кода, однако они не лишены недостатков. Они хорошо подходят для ситуации, когда имеется всего пара вариантов развития событий, каждый из которых имеет блок с приемлемым количеством кода, а также в случаях, когда условие является довольно сложным и включает несколько логических операторов. Если же нам требуется всего лишь задать переменную для определённого выбранного значения или напечатать конкретную фразу при определённом условии, изученный нами синтаксис может оказаться довольно громоздким, особенно если имеется большое количество вариантов выбора.
          
 
 
          В этом случае нам поможет оператор switch – он принимает одно единственное выражение или значение, а затем просматривает ряд вариантов, пока не найдут вариант, соответствующий этому значению, после чего выполняет код, назначенный этому варианту. Вот пример использования этого оператора:
          
 
@@ -284,13 +284,13 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
  
        10. В скобках приводится выражение или значение.
          11. 
  
        11. Ключевое слово case, за которым следует вариант выбора (именно он проверяется на соответствие выражению или значению) и двоеточие.
          12. 
  
        12. Код, который будет выполняться, если вариант совпадает с выражением.
          13. 
- 
        13. Оператор break, за которым следует точка с запятой. Если вариант совпал с выражением или значением, браузер закончит выполнять блок кода, дойдя до оператора break, и перейдет к выполнению кода, расположенного после оператора switch.
          14. 
+ 
        14. Оператор break, за которым следует точка с запятой. Если вариант совпал с выражением или значением, браузер закончит выполнять блок кода, дойдя до оператора break, и перейдёт к выполнению кода, расположенного после оператора switch.
          15. 
  
        15. Вариантов выбора (пункты 3–5) может быть сколь угодно много.
          16. 
  
        16. Ключевое слово default используется точно также, как любой другой вариант выбора (пункты 3–5) за тем исключением, что после default нет других вариантов выбора, поэтому инструкция break не требуется, никакого кода дальше нет. Это вариант выбора по умолчанию, выбираемый, если ни один из других вариантов не совпал с выражением.
          17. 
 
 
 
          
-
          Примечание. Вариант выбора default может быть пропущен, если выражение гарантированно совпадет с одним из вариантов выбора. В противном случае вариант default необходим.
          
+
          Примечание. Вариант выбора default может быть пропущен, если выражение гарантированно совпадёт с одним из вариантов выбора. В противном случае вариант default необходим.
          
 
          
 
 
          Пример оператора switch
          
@@ -325,7 +325,7 @@ function setWeather() {
       para.textContent = 'На улице дождь. Возьмите плащ и зонт, и не гуляйте слишком долго';
       break;
     case 'snowing':
-      para.textContent = 'Идет снег - морозно! Лучше всего посидеть с чашкой горячего шоколада или слепить снеговика.';
+      para.textContent = 'Идёт снег - морозно! Лучше всего посидеть с чашкой горячего шоколада или слепить снеговика.';
       break;
     case 'overcast':
       para.textContent = 'Дождя нет, но небо серое и мрачное; он все может измениться в любую минуту, поэтому на всякий случай возьмите дождевик.';
@@ -343,15 +343,15 @@ function setWeather() {
 
 
          Тернарный оператор
          
 
-
          Это последний теоретический раздел данной статьи и мы перейдем к практическим упражнениям. Тернарный или условный оператор имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является true, и другое значение/выражение, если условие является false. Часто это очень удобная альтернатива блоку if...else, позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия true/false. Общая схема оператора:
          
+
          Это последний теоретический раздел данной статьи и мы перейдём к практическим упражнениям. Тернарный или условный оператор имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является true, и другое значение/выражение, если условие является false. Часто это очень удобная альтернатива блоку if...else, позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия true/false. Общая схема оператора:
          
 
 
          ( условие) ? выполнить этот код : выполнить этот код вместо первого
          
 
-
          Приведем простой пример:
          
+
          Приведём простой пример:
          
 
-
          var greeting = ( isBirthday ) ? 'С днем рождения, г-н Кузнецов! Хорошо Вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';
          
+
          var greeting = ( isBirthday ) ? 'С днём рождения, г-н Кузнецов! Хорошо Вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';
          
 
-
          У нас есть переменная isBirthday , если она true, мы отправляем посетителю поздравление с днем рождения; если нет – выдаем стандартное приветствие.
          
+
          У нас есть переменная isBirthday , если она true, мы отправляем посетителю поздравление с днём рождения; если нет – выдаём стандартное приветствие.
          
 
 
          Пример тернарного оператора
          
 
@@ -360,7 +360,7 @@ function setWeather() {
 
          <label for="theme">Выберите тему: </label>
 <select id="theme">
   <option value="white">Белая</option>
-  <option value="black">Черная</option>
+  <option value="black">Чёрная</option>
 </select>
 
 <h1>Это мой веб-сайт</h1>
          
@@ -381,9 +381,9 @@ select.onchange = function() {
 
 
          {{ EmbedLiveSample('Пример_тернарного_оператора', '100%', 300) }}
          
 
-
          Мы используем элемент {{htmlelement('select')}} для выбора темы (черная или белая), а также простой {{htmlelement('h1')}} для отображения заголовка веб-сайта. Кроме того, у нас есть функция update(), принимающая в качестве параметров (входных данных) два цвета. В качестве фона используется первый переданный цвет, а в качестве цвета текста – второй переданный цвет.
          
+
          Мы используем элемент {{htmlelement('select')}} для выбора темы (чёрная или белая), а также простой {{htmlelement('h1')}} для отображения заголовка веб-сайта. Кроме того, у нас есть функция update(), принимающая в качестве параметров (входных данных) два цвета. В качестве фона используется первый переданный цвет, а в качестве цвета текста – второй переданный цвет.
          
 
-
          Наконец, у нас есть обработчик событий onchange , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — select.value === 'black'. Если возвращается true, мы запускаем функцию update() с параметрами черного и белого, в результате чего получаем черный цвет фона и белый цвет текста. Если возвращается false, мы запускаем функцию update() с параметрами белого и черного, в результате чего цвета веб-сайта меняются на противоположные.
          
+
          Наконец, у нас есть обработчик событий onchange , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — select.value === 'black'. Если возвращается true, мы запускаем функцию update() с параметрами чёрного и белого, в результате чего получаем чёрный цвет фона и белый цвет текста. Если возвращается false, мы запускаем функцию update() с параметрами белого и чёрного, в результате чего цвета веб-сайта меняются на противоположные.
          
 
 
          
 
          Note: Вы можете найти этот пример на GitHub (также увидеть как он работает.)
          
@@ -602,8 +602,8 @@ textarea.onkeyup = function(){
 
 
            
  
          • Она должна принимать переменную choice в качестве входного выражения.
            • 
- 
          • Каждый элемент case должен содержать вариант выбора, соответствующий одному из доступных для выбора значений: белая, черная, лиловая, желтая или психоделическая тема.
            • 
- 
          • В блоке каждого элемента case необходимо вызывать функцию update(), которой передается два цвета: первый – это цвет фона, а второй – цвет текста. Помните, что значения цветов – это строковые значения, поэтому их нужно заключать в кавычки.
            • 
+ 
          • Каждый элемент case должен содержать вариант выбора, соответствующий одному из доступных для выбора значений: белая, чёрная, лиловая, жёлтая или психоделическая тема.
            • 
+ 
          • В блоке каждого элемента case необходимо вызывать функцию update(), которой передаётся два цвета: первый – это цвет фона, а второй – цвет текста. Помните, что значения цветов – это строковые значения, поэтому их нужно заключать в кавычки.
            • 
 
          
 
 
          Если допустили ошибку, используйте кнопку «Сброс», чтобы вернуться к исходному виду примера. Если у вас совсем ничего не получается, нажмите «Показать решение».
          
@@ -615,9 +615,9 @@ textarea.onkeyup = function(){
   <label for="theme">Выберите тему: </label>
   <select id="theme">
     <option value="white">Белая</option>
-    <option value="black">Черная</option>
+    <option value="black">Чёрная</option>
     <option value="purple">Лиловая</option>
-    <option value="yellow">Желтая</option>
+    <option value="yellow">Жёлтая</option>
     <option value="psychedelic">Психоделическая</option>
   </select>
 
@@ -732,7 +732,7 @@ updateCode();
 
 
          Заключение
          
 
-
          Это все, что вам нужно знать на данный момент об условных логических структурах! Уверены, вы хорошо разобрались в теоретическом материале и с легкостью справились с предложенными упражнениями. Если же что-то осталось для вас непонятным, перечитайте статью еще раз или свяжитесь с нами.
          
+
          Это все, что вам нужно знать на данный момент об условных логических структурах! Уверены, вы хорошо разобрались в теоретическом материале и с лёгкостью справились с предложенными упражнениями. Если же что-то осталось для вас непонятным, перечитайте статью ещё раз или свяжитесь с нами.
          
 
 
          См. также
          
 
diff --git a/files/ru/learn/javascript/building_blocks/events/index.html b/files/ru/learn/javascript/building_blocks/events/index.html
index 054bc58159..287430e632 100644
--- a/files/ru/learn/javascript/building_blocks/events/index.html
+++ b/files/ru/learn/javascript/building_blocks/events/index.html
@@ -30,14 +30,14 @@ original_slug: Learn/JavaScript/Building_blocks/События
 
 
          Серия удачных событий
          
 
-
          При возникновении события система генерирует сигнал, а также предоставляет механизм, с помощью которого можно автоматически предпринимать какие-либо действия (например, выполнить определенный код), когда происходит событие. Например, в аэропорту, когда взлетно-посадочная полоса свободна для взлета самолета, сигнал передается пилоту, и в результате они приступают к взлету.
          
+
          При возникновении события система генерирует сигнал, а также предоставляет механизм, с помощью которого можно автоматически предпринимать какие-либо действия (например, выполнить определённый код), когда происходит событие. Например, в аэропорту, когда взлётно-посадочная полоса свободна для взлёта самолёта, сигнал передаётся пилоту, и в результате они приступают к взлету.
          
 
 
          
 
 
          В Web события запускаются внутри окна браузера и, как правило, прикрепляются к конкретному элементу, который в нем находится. Это может быть один элемент, набор элементов, документ HTML, загруженный на текущей вкладке, или все окно браузера. Существует множество различных видов событий, которые могут произойти, например:
          
 
 
            
- 
          • Пользователь кликает мышью или наводит курсор на определенный элемент.
            • 
+ 
          • Пользователь кликает мышью или наводит курсор на определённый элемент.
            • 
  
          • Пользователь нажимает клавишу на клавиатуре.
            • 
  
          • Пользователь изменяет размер или закрывает окно браузера.
            • 
  
          • Завершение загрузки веб-страницы.
            • 
@@ -48,7 +48,7 @@ original_slug: Learn/JavaScript/Building_blocks/События
 
 
            Подробнее о событиях можно посмотреть в Справочнике по событиям.
            
 
-
            Каждое доступное событие имеет обработчик событий — блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определен на запуск в ответ на возникновение события, мы говорим, что мы регистрируем обработчик событий. Обратите внимание, что обработчики событий иногда называют слушателями событий (от англ. event listeners). Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Слушатель отслеживает событие, а обработчик — это код, который запускается в ответ на событие.
            
+
            Каждое доступное событие имеет обработчик событий — блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определён на запуск в ответ на возникновение события, мы говорим, что мы регистрируем обработчик событий. Обратите внимание, что обработчики событий иногда называют слушателями событий (от англ. event listeners). Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Слушатель отслеживает событие, а обработчик — это код, который запускается в ответ на событие.
            
 
 
            
 
            Примечание: Важно отметить, что веб-события не являются частью основного языка JavaScript. Они определены как часть JavaScript-API, встроенных в браузер.
            
@@ -77,9 +77,9 @@ btn.onclick = function() {
   document.body.style.backgroundColor = rndCol;
 }
          -

          В этом коде мы сохраняем ссылку на кнопку внутри переменной btn типа const, используя функцию {{domxref ("Document.querySelector()")}}. Мы также определяем функцию, которая возвращает случайное число. Третья часть кода — обработчик события. Переменная btn указывает на элемент <button> — для этого типа объекта существуют возникающие при определенном взаимодействии с ним события, а значит, возможно использование обработчиков событий. Мы отслеживаем момент возникновения события при щелчке мышью, связывая свойство обработчика события onclick с анонимной функцией, генерирующей случайный цвет RGB и устанавливающей его в качестве цвета фона элемента <body>.

          +

          В этом коде мы сохраняем ссылку на кнопку внутри переменной btn типа const, используя функцию {{domxref ("Document.querySelector()")}}. Мы также определяем функцию, которая возвращает случайное число. Третья часть кода — обработчик события. Переменная btn указывает на элемент <button> — для этого типа объекта существуют возникающие при определённом взаимодействии с ним события, а значит, возможно использование обработчиков событий. Мы отслеживаем момент возникновения события при щелчке мышью, связывая свойство обработчика события onclick с анонимной функцией, генерирующей случайный цвет RGB и устанавливающей его в качестве цвета фона элемента <body>.

          -

          Этот код теперь будет запускаться всякий раз, когда возникает событие при нажатии на элемент <button> — всякий раз, когда пользователь щелкает по нему.

          +

          Этот код теперь будет запускаться всякий раз, когда возникает событие при нажатии на элемент <button> — всякий раз, когда пользователь щёлкает по нему.

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

          @@ -101,7 +101,7 @@ btn.onclick = function() {

          Свойства обработчика событий

          -

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

          +

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

          const btn = document.querySelector('button');
 
@@ -125,7 +125,7 @@ btn.onclick = bgChange;

          Давайте теперь поэкспериментируем с другими свойствами обработчика событий.

          -

          Создайте локальную копию файла random-color-eventhandlerproperty.html и откройте ее в своем браузере. Это всего лишь копия простого примера про случайные цвета, который мы уже разобрали в этой статье. Теперь попробуйте изменить btn.onclick на следующие значения и понаблюдайте за результатами:

          +

          Создайте локальную копию файла random-color-eventhandlerproperty.html и откройте её в своём браузере. Это всего лишь копия простого примера про случайные цвета, который мы уже разобрали в этой статье. Теперь попробуйте изменить btn.onclick на следующие значения и понаблюдайте за результатами:

          • btn.onfocus и btn.onblur — Цвет изменится, когда кнопка будет сфокусирована или не сфокусирована (попробуйте нажать Tab, чтобы выбрать кнопку или убрать выбор). Эти свойства часто применяются для отображения информации о том, как заполнить поля формы, когда они сфокусированы, или отобразить сообщение об ошибке, если поле формы было заполнено с неправильным значением.
            • @@ -134,11 +134,11 @@ btn.onclick = bgChange;
          • btn.onmouseover и btn.onmouseout — Цвет будет меняться при наведении указателя мыши на кнопку или когда указатель будет отводиться от кнопки соответственно.
          -

          Некоторые события очень общие и доступны практически в любом месте (например, обработчик onclick может быть зарегистрирован практически для любого элемента), тогда как некоторые из них более конкретны и полезны только в определенных ситуациях (например, имеет смысл использовать onplay только для определенных элементов, таких как {{htmlelement ("video")}}).

          +

          Некоторые события очень общие и доступны практически в любом месте (например, обработчик onclick может быть зарегистрирован практически для любого элемента), тогда как некоторые из них более конкретны и полезны только в определённых ситуациях (например, имеет смысл использовать onplay только для определённых элементов, таких как {{htmlelement ("video")}}).

          Встроенные обработчики событий - не используйте их

          -

          Самый ранний из введенных в сеть Web методов регистрации обработчиков событий базируется на HTML атрибутах (встроенные обработчики событий):

          +

          Самый ранний из введённых в сеть Web методов регистрации обработчиков событий базируется на HTML атрибутах (встроенные обработчики событий):

          <button onclick="bgChange()">Press me</button>
          @@ -152,7 +152,7 @@ btn.onclick = bgChange;

          Примечание: Вы можете найти полный исходник кода из этого примера на GitHub (также взгляните на его выполнение).

          -

          Значение атрибута —  это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведенном выше примере вызывается функция, определенная внутри элемента {{htmlelement ("script")}} на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:

          +

          Значение атрибута —  это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведённом выше примере вызывается функция, определённая внутри элемента {{htmlelement ("script")}} на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:

          <button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
          @@ -182,7 +182,7 @@ for (var i = 0; i < buttons.length; i++) {

          Функции addEventListener() и removeEventListener()

          -

          Новый тип механизма событий определен в спецификации Document Object Model (DOM) Level 2 Events, которая предоставляет браузеру новую функцию — addEventListener(). Работает она аналогично свойствам обработчика событий, но синтаксис совсем другой. Наш пример со случайным цветом мог бы выглядеть и так:

          +

          Новый тип механизма событий определён в спецификации Document Object Model (DOM) Level 2 Events, которая предоставляет браузеру новую функцию — addEventListener(). Работает она аналогично свойствам обработчика событий, но синтаксис совсем другой. Наш пример со случайным цветом мог бы выглядеть и так:

          var btn = document.querySelector('button');
 
@@ -204,7 +204,7 @@ btn.addEventListener('click', bgChange);
          document.body.style.backgroundColor = rndCol; }); -

          Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция removeEventListener(), которая удаляет ранее добавленный обработчик. Это приведет к удалению набора обработчиков в первом блоке кода в этом разделе:

          +

          Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция removeEventListener(), которая удаляет ранее добавленный обработчик. Это приведёт к удалению набора обработчиков в первом блоке кода в этом разделе:

          btn.removeEventListener('click', bgChange);
          @@ -226,13 +226,13 @@ myElement.addEventListener('click', functionB);

          Какой механизм мне использовать?

          -

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

          +

          Из трёх механизмов определённо не нужно использовать атрибуты событий HTML. Как упоминалось выше, это устаревшая и плохая практика.

          Остальные два являются относительно взаимозаменяемыми, по крайней мере для простых целей

            -
          • Свойства обработчика событий имеют меньшую мощность и параметры, но лучше совместимость между браузерами (поддерживается еще в Internet Explorer 8). Вероятно, вам следует начать с них, когда вы учитесь.
            • -
          • События уровня 2 DOM (addEventListener() и т. д.) являются более мощными, но также могут стать более сложными и хуже поддерживаться (поддерживается еще в Internet Explorer 9). Вам также стоит поэкспериментировать с ними и стремиться использовать их там, где это возможно.
            • +
          • Свойства обработчика событий имеют меньшую мощность и параметры, но лучше совместимость между браузерами (поддерживается ещё в Internet Explorer 8). Вероятно, вам следует начать с них, когда вы учитесь.
            • +
          • События уровня 2 DOM (addEventListener() и т. д.) являются более мощными, но также могут стать более сложными и хуже поддерживаться (поддерживается ещё в Internet Explorer 9). Вам также стоит поэкспериментировать с ними и стремиться использовать их там, где это возможно.

          Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя removeEventListener(), и так же можно добавить несколько элементов-обработчиков того же типа к элементам. Например, вы можете вызвать addEventListener('click', function() {...}) для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:

          @@ -251,7 +251,7 @@ etc.

             Объекты событий

          -

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

          +

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

          function bgChange(e) {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
@@ -271,7 +271,7 @@ btn.addEventListener('click', bgChange);

          Примечание: Вместо e/evt/event можно использовать любое имя для объекта события, которое затем можно использовать для ссылки на него в функции обработчика событий. e/evt/event чаще всего используются разработчиками, потому что они короткие и легко запоминаются. И хорошо придерживаться стандарта.

          -

          e.target применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определенное действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как e.target, вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на  useful-eventtarget.html,а как он работает можно посмотреть здесь), мы создаем 16 элементов {{htmlelement ("div")}} с использованием JavaScript. Затем мы выберем все из них, используя {{domxref ("document.querySelectorAll()")}}, и с помощью цикла for выберем каждый из них, добавив обработчик onclick к каждому так, чтобы случайный цвет применялся к каждому клику:

          +

          e.target применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определённое действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как e.target, вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на  useful-eventtarget.html,а как он работает можно посмотреть здесь), мы создаём 16 элементов {{htmlelement ("div")}} с использованием JavaScript. Затем мы выберем все из них, используя {{domxref ("document.querySelectorAll()")}}, и с помощью цикла for выберем каждый из них, добавив обработчик onclick к каждому так, чтобы случайный цвет применялся к каждому клику:

          var divs = document.querySelectorAll('div');
 
@@ -281,7 +281,7 @@ for (var i = 0; i < divs.length; i++) {
   }
 }
          -

          Результат выглядит следующим образом (попробуйте щелкнуть по нему):

          +

          Результат выглядит следующим образом (попробуйте щёлкнуть по нему):

          -

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

          +

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

          Выход из цикла с помощью break

          -

          Если вы хотите выйти из цикла до завершения всех итераций, вы можете использовать оператор break . Мы уже встречались с ним в предыдущей статье, когда рассматривали оператор switch: когда происходит событие, соответствующее условию, прописанному ключевым словом case внутри оператора switch, условие break моментально выходит из конструкции switch и запускает следующий после нее код.

          +

          Если вы хотите выйти из цикла до завершения всех итераций, вы можете использовать оператор break . Мы уже встречались с ним в предыдущей статье, когда рассматривали оператор switch: когда происходит событие, соответствующее условию, прописанному ключевым словом case внутри оператора switch, условие break моментально выходит из конструкции switch и запускает следующий после неё код.

          Тоже самое и с циклами — условие break моментально закончит цикл и заставит браузер запустить следующий после цикла код.

          Предположим, в массиве данных мы хотим найти имена контактов и телефонные номера, а вернуть только номер, который мы нашли.
          - Начнем с разметки HTML: поле {{htmlelement("input")}} позволяет нам ввести имя для поиска, элемент (кнопка) {{htmlelement("button")}} для подтверждения поиска, и элемент {{htmlelement("p")}} для отображения результата:

          + Начнём с разметки HTML: поле {{htmlelement("input")}} позволяет нам ввести имя для поиска, элемент (кнопка) {{htmlelement("button")}} для подтверждения поиска, и элемент {{htmlelement("p")}} для отображения результата:

          <label for="search">Поиск по имени: </label>
 <input id="search" type="text">
@@ -370,16 +370,16 @@ btn.addEventListener('click', function() {
 
            
  
          1. Прежде всего у нас определены некоторые переменные: у нас есть массив с контактной информацией, каждый элемент которого это строка, содержащая в себе имя и номер телефона, которые разделены двоеточием.
            2. 
  
          2. Далее мы применяем обработчик события кнопки (btn), чтобы при её нажатии запускался код для поиска и отображения результатов.
            3. 
- 
          3. Мы сохраняем значение, введенное в текстовое поле, в переменную  searchName, затем очищаем введенный текст и снова фокусируемся на текстовом поле для нового поиска.
            4. 
- 
          4. Теперь перейдем к интересующей нас части — к циклу for:
+ 
          5. Мы сохраняем значение, введённое в текстовое поле, в переменную  searchName, затем очищаем введённый текст и снова фокусируемся на текстовом поле для нового поиска.
            6. 
+ 
          6. Теперь перейдём к интересующей нас части — к циклу for:
   
              
-   
            1. Мы начали счетчик с 0, запускаем цикл до тех пор, пока счетчик всё ещё меньше, чем contacts.length, а инкремент i увеличиваем на 1 после каждой итерации цикла.
              2. 
+   
            2. Мы начали счётчик с 0, запускаем цикл до тех пор, пока счётчик всё ещё меньше, чем contacts.length, а инкремент i увеличиваем на 1 после каждой итерации цикла.
              3. 
    
            3. Внутри цикла мы сначала разделяем текущий контакт (contacts[i]) на символе двоеточия, и сохраняем полученные два значения в массиве с  названием splitContact.
              4. 
-   
            4. Затем мы используем условный оператор, чтобы проверить, равно ли splitContact[0] (имя контакта) введенному searchName. Если это так, мы выводим строку в абзац, чтобы сообщить, каков номер контакта, и используем break для завершения цикла.
              5. 
+   
            5. Затем мы используем условный оператор, чтобы проверить, равно ли splitContact[0] (имя контакта) введённому searchName. Если это так, мы выводим строку в абзац, чтобы сообщить, каков номер контакта, и используем break для завершения цикла.
              6. 
   
            
  
            7. 
  
          7. 
-  
            После итерации (contacts.length-1), если имя контакта не совпадает с введенным именем в поисковом запросе, для текста абзаца устанавливается: «Контакт не найден.», и цикл продолжает повторяться.
            
+  
            После итерации (contacts.length-1), если имя контакта не совпадает с введённым именем в поисковом запросе, для текста абзаца устанавливается: «Контакт не найден.», и цикл продолжает повторяться.
            
  
            8. 
 
          
 
@@ -457,9 +457,9 @@ for (var i = 1; i <= num; i++) {
 
          {{ EmbedLiveSample('Hidden_code_4', '100%', 100) }}
          
 
 
            
- 
          1. В этом случае на входе должно быть число (num). Циклу for присваивается счетчик, начинающийся с 1 (поскольку в данном случае нас не интересует 0), условие выхода, которое говорит, что цикл остановится, когда счетчик станет больше входного num, а итератор добавляет 1 к счетчику каждый раз.
            2. 
- 
          2. Внутри цикла мы находим квадратный корень каждого числа с помощью Math.sqrt(i), а затем проверяем, является ли квадратный корень целым числом, проверяя, совпадает ли он с самим собой, когда он был округлен до ближайшего целого числа (это то, что Math.floor () делает с числом, которое передает).
            3. 
- 
          3. Если квадратный корень и округленный вниз квадратный корень не равны друг другу (! ==), значит квадратный корень не является целым числом, поэтому нас он не интересует.  В таком случае мы используем оператор continue, чтобы перейти к следующей итерации цикла без записи этого числа.
            4. 
+ 
          4. В этом случае на входе должно быть число (num). Циклу for присваивается счётчик, начинающийся с 1 (поскольку в данном случае нас не интересует 0), условие выхода, которое говорит, что цикл остановится, когда счётчик станет больше входного num, а итератор добавляет 1 к счётчику каждый раз.
            5. 
+ 
          5. Внутри цикла мы находим квадратный корень каждого числа с помощью Math.sqrt(i), а затем проверяем, является ли квадратный корень целым числом, проверяя, совпадает ли он с самим собой, когда он был округлён до ближайшего целого числа (это то, что Math.floor () делает с числом, которое передаёт).
            6. 
+ 
          6. Если квадратный корень и округлённый вниз квадратный корень не равны друг другу (! ==), значит квадратный корень не является целым числом, поэтому нас он не интересует.  В таком случае мы используем оператор continue, чтобы перейти к следующей итерации цикла без записи этого числа.
            7. 
  
          7. Если квадратный корень является целым числом, мы пропускаем блок if полностью, поэтому оператор continue не выполняется; вместо этого объединяется текущее значение i с пробелом в конце содержимого абзаца.
            8. 
 
          
 
@@ -484,9 +484,9 @@ while (exit-condition) {
 
 
          Здесь присутствуют те же три элемента и в том же порядке, что и в цикле for. Это важно, так как вам нужно определить инициализатор, прежде чем получится проверить, достиг ли цикл условия выхода.
          
 
-
          Окончательное условие выполняется после выполнения кода внутри цикла (итерация завершена), и оно выполняется только в том случае, если условие выхода еще не достигнуто.
          
+
          Окончательное условие выполняется после выполнения кода внутри цикла (итерация завершена), и оно выполняется только в том случае, если условие выхода ещё не достигнуто.
          
 
-
          Посмотрим еще раз пример со списком кошек с кодом переписанным под использование цикла while:
          
+
          Посмотрим ещё раз пример со списком кошек с кодом переписанным под использование цикла while:
          
 
 
          var i = 0;
 
@@ -501,7 +501,7 @@ while (i < cats.length) {
 }
          
 
 
          
-
          Примечание: цикл все еще работает так же, как и ожидалось - посмотрите, как он работает на GitHub (также посмотрите полный исходный код).
          
+
          Примечание: цикл все ещё работает так же, как и ожидалось - посмотрите, как он работает на GitHub (также посмотрите полный исходный код).
          
 
          
 
 
          Цикл do...while представляет собой вариацию структуры цикла while:
          
@@ -515,7 +515,7 @@ do {
 
 
          В этом случае инициализатор снова указывается прежде, чем цикл запускается. Ключевое слово do непосредственно предшествует фигурным скобкам, содержащим код для запуска и конечное выражение.
          
 
-
          Различие состоит в том, что условие выхода идет после всего остального, заключенное в скобки после ключевого слова while. В цикле do...while код внутри фигурных скобок всегда запускается один раз, прежде чем выполняется проверка, чтобы увидеть, должна ли она быть выполнена снова (в while и for проверка идет первой, поэтому код может быть не выполнен).
          
+
          Различие состоит в том, что условие выхода идёт после всего остального, заключённое в скобки после ключевого слова while. В цикле do...while код внутри фигурных скобок всегда запускается один раз, прежде чем выполняется проверка, чтобы увидеть, должна ли она быть выполнена снова (в while и for проверка идёт первой, поэтому код может быть не выполнен).
          
 
 
          Перепишем наш пример с кошками, чтобы использовать цикл do...while:
          
 
@@ -536,12 +536,12 @@ do {
 
 
 
          
-
          Замечание: Применяя циклы while and do...while , как и все циклы, убедитесь, что инициализатор повторяется так, чтобы он в конце концов достиг условия выхода. Если это не так, цикл будет продолжаться вечно, и либо браузер заставит его остановиться, либо произойдет сбой. Это называется доктор Стрэндж и Дормамму бесконечным циклом. 
          
+
          Замечание: Применяя циклы while and do...while , как и все циклы, убедитесь, что инициализатор повторяется так, чтобы он в конце концов достиг условия выхода. Если это не так, цикл будет продолжаться вечно, и либо браузер заставит его остановиться, либо произойдёт сбой. Это называется доктор Стрэндж и Дормамму бесконечным циклом. 
          
 
          
 
-
          Практическое упражнение:  запускаем обратный отсчет!
          
+
          Практическое упражнение:  запускаем обратный отсчёт!
          
 
-
          В этом упражнении мы хотим, чтобы вы написали простой отсчет времени запуска до поля вывода, от 10 до "Пуск!"  В частности, мы хотим, чтобы вы:
          
+
          В этом упражнении мы хотим, чтобы вы написали простой отсчёт времени запуска до поля вывода, от 10 до "Пуск!"  В частности, мы хотим, чтобы вы:
          
 
 
            
  
          • Цикл от 10 до 0. Мы предоставляем вам инициализатор: var i = 10;.
            • 
@@ -555,12 +555,12 @@ do {
  
          • Разные номера итераций требуют, чтобы в абзаце для каждой итерации помещался свой текст (вам понадобится условный оператор и несколько para.textContent = lines
            
   ):
   
              
-   
            • Если число равно 10, выведите в абзаце «Обратный отсчет 10».
              • 
+   
            • Если число равно 10, выведите в абзаце «Обратный отсчёт 10».
              • 
    
            • Если число равно 0, выведите в абзаце «Пуск!»
              • 
    
            • Для любого другого числа выведите в абзаце только число.
              • 
   
            
  
            • 
- 
          • Не забудьте включить итератор! Однако в этом примере мы ведем обратный отсчет после каждой итерации, а не вверх, поэтому вам не нужен i ++. Как выполнить итерацию вниз?
            • 
+ 
          • Не забудьте включить итератор! Однако в этом примере мы ведём обратный отсчёт после каждой итерации, а не вверх, поэтому вам не нужен i ++. Как выполнить итерацию вниз?
            • 
 
          
 
 
          Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Show solution», чтобы увидеть решение.
          
@@ -710,7 +710,7 @@ textarea.onkeyup = function(){
 
 
          Практическое упражнение:   Заполнение списка гостей
          
 
-
          Возьмите список имен, хранящихся в массиве, и поместите их в список гостей. Тут не всё так просто: мы не хотим приглашать Фила и Лолу, потому что они наглые и всё сожрут! У нас есть два списка. Один для тех, кого мы хотим пригласить, второй для тех, кого приглашать не нужно.
          
+
          Возьмите список имён, хранящихся в массиве, и поместите их в список гостей. Тут не всё так просто: мы не хотим приглашать Фила и Лолу, потому что они наглые и всё сожрут! У нас есть два списка. Один для тех, кого мы хотим пригласить, второй для тех, кого приглашать не нужно.
          
 
 
          Для этого нужно сделать следующее:
          
 
@@ -733,7 +733,7 @@ textarea.onkeyup = function(){
  
        17. admitted.textContent += — начало строки, которая объединит что-то до конца admitted.textContent.
          18. 
 
 
-
          Дополнительный бонусный вопрос - после успешного выполнения вышеупомянутых задач у вас останется два списка имен, разделенных запятыми, но они будут составлены некорректно: в конце каждого списка будет запятая. Сможете ли вы составить эти списки так, чтобы в конце каждой строки вместо запятой была точка. За помощью можно обратиться к статье «Полезные строковые методы».
          
+
          Дополнительный бонусный вопрос - после успешного выполнения вышеупомянутых задач у вас останется два списка имён, разделённых запятыми, но они будут составлены некорректно: в конце каждого списка будет запятая. Сможете ли вы составить эти списки так, чтобы в конце каждой строки вместо запятой была точка. За помощью можно обратиться к статье «Полезные строковые методы».
          
 
 
          Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Показать решение», чтобы увидеть решение.
          
 
@@ -749,7 +749,7 @@ textarea.onkeyup = function(){
 <h2>Editable code</h2>
 <p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
 <textarea id="code" class="playable-code" style="height: 400px;width: 95%">
-var people = ['Крис', 'Анна', 'Колин', 'Терри', 'Фил', 'Лола', 'Сем', 'Кай', 'Брюс'];
+var people = ['Крис', 'Анна', 'Колин', 'Терри', 'Фил', 'Лола', 'Сём', 'Кай', 'Брюс'];
 
 var admitted = document.querySelector('.admitted');
 var refused = document.querySelector('.refused');
@@ -818,7 +818,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var jsSolution = 'var people = [\'Крис\', \'Анна\', \'Колин\', \'Терри\', \'Фил\', \'Лола\', \'Сем\', \'Кай\', \'Брюс\'];\n\nvar admitted = document.querySelector(\'.admitted\');\nvar refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Пригласить: \';\nrefused.textContent = \'Не приглашать(!): \'\nvar i = 0;\n\ndo {\n if(people[i] === \'Фил\' || people[i] === \'Лола\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
+var jsSolution = 'var people = [\'Крис\', \'Анна\', \'Колин\', \'Терри\', \'Фил\', \'Лола\', \'Сём\', \'Кай\', \'Брюс\'];\n\nvar admitted = document.querySelector(\'.admitted\');\nvar refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Пригласить: \';\nrefused.textContent = \'Не приглашать(!): \'\nvar i = 0;\n\ndo {\n if(people[i] === \'Фил\' || people[i] === \'Лола\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
 var solutionEntry = jsSolution;
 
 textarea.addEventListener('input', updateCode);
diff --git a/files/ru/learn/javascript/building_blocks/return_values/index.html b/files/ru/learn/javascript/building_blocks/return_values/index.html
index 9ccd384929..9ff812f4a1 100644
--- a/files/ru/learn/javascript/building_blocks/return_values/index.html
+++ b/files/ru/learn/javascript/building_blocks/return_values/index.html
@@ -7,7 +7,7 @@ translation_of: Learn/JavaScript/Building_blocks/Return_values
 
 
          {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/События", "Learn/JavaScript/Building_blocks")}}
          
 
-
          Для нас в этом курсе имеется еще один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своем коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже. 
          
+
          Для нас в этом курсе имеется ещё один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своём коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже. 
          @@ -35,7 +35,7 @@ console.log(newString); // заменяет одну подстроку другой и возвращает // новую строку со сделанными заменами -

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

          +

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

          Если Вы посмотрите на функцию replace() на MDN reference page, вы увидите секцию под названием Return value.  Очень важно знать и понимать какие значения возвращаются функциями, так что мы пытаемся включать эту информацию везде, где это возможно.

          @@ -109,7 +109,7 @@ function factorial(num) { return num; }Ффункции squared() и cubed() довольно очевидны— они возвращают квадрат или куб переданного как параметр числа. Функция factorial() возвращает factorial переданного числа. -
        18. Далее мы добавим способ выводить нашу информацию введенным в  text input числе. Добавьте обработчик событий ниже существующих функций: +
        19. Далее мы добавим способ выводить нашу информацию введённым в  text input числе. Добавьте обработчик событий ниже существующих функций: 
          input.onchange = function() {
   var num = input.value;
   if (isNaN(num)) {
@@ -121,10 +121,10 @@ function factorial(num) {
   }
 }
          -

          Здесь мы создаем обработчик событий onchange  который срабатывает когда меняется когда новое значение вводится в text input и подтверждается (введите значение и, например, нажмите tab). Когда анонимная функция срабатывает, введенное в input значение сохраняется в переменной num .

          +

          Здесь мы создаём обработчик событий onchange  который срабатывает когда меняется когда новое значение вводится в text input и подтверждается (введите значение и, например, нажмите tab). Когда анонимная функция срабатывает, введённое в input значение сохраняется в переменной num .

        20. -

          Далее мы делаем условный тест — если введенное значение не является числом, мы выводим в параграф сообщение об ошибке . Тест смотрит возвращает ли выражение isNaN(num)  true. Мы используем функцию isNaN() чтобы проверить что значение переменной num не число — если так то функция возвращаетtrue, если нет- false.

          +

          Далее мы делаем условный тест — если введённое значение не является числом, мы выводим в параграф сообщение об ошибке . Тест смотрит возвращает ли выражение isNaN(num)  true. Мы используем функцию isNaN() чтобы проверить что значение переменной num не число — если так то функция возвращаетtrue, если нет- false.

        21. Если тест возвращает false, значение переменной numчисло, и поэтому мы выводим сообщение внутри параграфа о значениях квадрата, куба и факториала числа. Предложение вызывает  функции squared(), cubed() иfactorial() чтобы получить нужные значения. Сохраните Ваш код, загрузите его в браузере и посмотрите на то что получилось.

          @@ -135,7 +135,7 @@ function factorial(num) {

          Замечание:  Если у вас проблемы с работой данного примера, не стесняйтесь сверить ваш код с работающей версией finished version on GitHub (или смотрите живой пример), или спросите нас.

          -

          К этому моменту мы хотели бы чтобы вы написали парочку собственных функций и добавили их в библиотеку. Как на счет квадратного или кубического корня числа или длины окружности круга с длиной радиуса равной числу num?

          +

          К этому моменту мы хотели бы чтобы вы написали парочку собственных функций и добавили их в библиотеку. Как на счёт квадратного или кубического корня числа или длины окружности круга с длиной радиуса равной числу num?

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

          @@ -148,13 +148,13 @@ function factorial(num) {

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

          -

          Если в статье есть что-то что вы не поняли, не стесняйтесь перечитать статью еще раз или свяжитесь с нами для получения помощи.

          +

          Если в статье есть что-то что вы не поняли, не стесняйтесь перечитать статью ещё раз или свяжитесь с нами для получения помощи.

          Смотрите также

          • Функции более подробно — подробное руководство, охватывающее более продвинутую информацию, связанную с функциями.
            • -
          • Колбэк-функции в JavaScript — распространенный паттерн JavaScript для передачи функции в другую функцию как аргумент, который затем вызывается внутри первой функции.
            • +
          • Колбэк-функции в JavaScript — распространённый паттерн JavaScript для передачи функции в другую функцию как аргумент, который затем вызывается внутри первой функции.

          {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

          diff --git a/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html b/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html index 8bfb571bcb..d956d7bbc3 100644 --- a/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html +++ b/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html @@ -24,9 +24,9 @@ translation_of: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions'

          Управление структурой DOM: рекомендуется

          -

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

          +

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

          -

          Мы еще не обучали этому прямо в курсе, но вы увидите некоторые примеры, которые используют данную структуру, и мы хотели бы, чтобы вы провели некоторые исследования в отношении того, какие DOM API вам нужны, чтобы успешно ответить на эти вопросы. Хорошим началом будет наше учебное пособие Управление документами.

          +

          Мы ещё не обучали этому прямо в курсе, но вы увидите некоторые примеры, которые используют данную структуру, и мы хотели бы, чтобы вы провели некоторые исследования в отношении того, какие DOM API вам нужны, чтобы успешно ответить на эти вопросы. Хорошим началом будет наше учебное пособие Управление документами.

          Функции 1

          @@ -64,7 +64,7 @@ translation_of: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions'

          Функции 3

          -

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

          +

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

          1. Выполните рефакторинг (реорганизацию) кода, который отвечает за генерацию случайного числа в отдельную функцию random(), которая принимает в качестве параметров две общие границы, между которыми должно находиться случайное число и возвращает результат.
            2. @@ -87,7 +87,7 @@ translation_of: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions'

            Если же вы хотите, чтобы вашу работу проанализировали, или у вас проблема и вы хотите попросить о помощи:

              -
            1. Поместите свой код в онлайн-редактор CodePen, jsFiddle или Glitch с возможностью совместного использования. Вы можете написать код самостоятельно или использовать файлы с исходным кодом, ссылки на которые приведены в вышеприведенных разделах.
              2. +
            2. Поместите свой код в онлайн-редактор CodePen, jsFiddle или Glitch с возможностью совместного использования. Вы можете написать код самостоятельно или использовать файлы с исходным кодом, ссылки на которые приведены в вышеприведённых разделах.
            3. Напишите сообщение с просьбой о проведении анализа и/или помощи в категории MDN Discourse forum Learning category. Ваше сообщение должно включать в себя следующие пункты:
              • Описательный заголовок, например "Анализ для теста навыков: Функции 1".
                • diff --git a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html index da1f88f0aa..280493b6bd 100644 --- a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -76,7 +76,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage

                Некоторые современные браузеры поддерживают новое {{domxref("Cache")}} API. Этот API предназначен для хранения HTTP-ответов на конкретные запросы и очень полезен для таких вещей, как хранение ресурсов сайта в автономном режиме, чтобы впоследствии сайт можно было использовать без сетевого подключения. Cache обычно используется в сочетании с Service Worker API, однако это не обязательно.

                -

                Использование Cache и Service Workers - сложная тема, и мы не будем подробно останавливаться на ней в этой статье, хотя приведем простой пример {{anch("Offline asset storage")}} в разделе ниже.

                +

                Использование Cache и Service Workers - сложная тема, и мы не будем подробно останавливаться на ней в этой статье, хотя приведём простой пример {{anch("Offline asset storage")}} в разделе ниже.

                Хранение простых данных — web storage

                @@ -96,7 +96,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage

              • Все данные вашего веб-хранилища содержатся в двух объектоподобных структурах внутри браузера: {{domxref("Window.sessionStorage", "sessionStorage")}} и {{domxref("Window.localStorage", "localStorage")}}. Первый сохраняет данные до тех пор, пока браузер открыт (данные теряются при закрытии браузера), а второй сохраняет данные даже после того, как браузер закрыт, а затем снова открыт. Мы будем использовать второй в этой статье, так как он, как правило, более полезен.

                -

                {{domxref("Storage.setItem()")}} метод позволяет сохранить элемент данных в хранилище - он принимает два параметра: имя элемента и его значение. Попробуйте ввести это в свою консоль JavaScript (измените значение на свое собственное имя, если хотите!):

                +

                {{domxref("Storage.setItem()")}} метод позволяет сохранить элемент данных в хранилище - он принимает два параметра: имя элемента и его значение. Попробуйте ввести это в свою консоль JavaScript (измените значение на своё собственное имя, если хотите!):

                localStorage.setItem('name','Chris');
                • @@ -134,7 +134,7 @@ myName var myName = localStorage.getItem('name'); myName -

                Вы должны увидеть возвращенное имя элемента.

                +

                Вы должны увидеть возвращённое имя элемента.

              • Теперь закройте браузер и откройте его снова.

                @@ -155,7 +155,7 @@ myName

                Это имеет смысл - вы можете представить себе проблемы безопасности, которые могут возникнуть, если веб-сайты смогут видеть данные друг друга!

                -

                Более развернутый пример

                +

                Более развёрнутый пример

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

                @@ -173,7 +173,7 @@ myName

                Далее обратите внимание, как наш HTML ссылается на файл JavaScript с именем index.js (см. строку 40). Нам нужно создать его, и записать в него наш код JavaScript. Создайте файл index.js в том же каталоге, что и ваш HTML-файл.

              • -

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

                +

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

                // create needed constants
 const rememberDiv = document.querySelector('.remember');
@@ -195,7 +195,7 @@ form.addEventListener('submit', function(e) {
 });
              • -

                Теперь нам нужно добавить обработчик событий, функция-обработчик которого будет запускаться при нажатии кнопки «Say hello». В комментариях подробно объясняется, что делает каждый бит, но в сущности здесь мы берем имя, которое пользователь ввел в поле ввода текста, и сохраняем его в веб-хранилище с помощью setItem(), затем запускаем функцию nameDisplayCheck(), которая будет обрабатывать обновление фактического текста сайта. Добавьте это в конец: 

                +

                Теперь нам нужно добавить обработчик событий, функция-обработчик которого будет запускаться при нажатии кнопки «Say hello». В комментариях подробно объясняется, что делает каждый бит, но в сущности здесь мы берём имя, которое пользователь ввёл в поле ввода текста, и сохраняем его в веб-хранилище с помощью setItem(), затем запускаем функцию nameDisplayCheck(), которая будет обрабатывать обновление фактического текста сайта. Добавьте это в конец: 

                // run function when the 'Say hello' button is clicked
 submitBtn.addEventListener('click', function() {
@@ -263,7 +263,7 @@ function nameDisplayCheck() {
 
 
                Однако это обходится дорого: IndexedDB гораздо сложнее в использовании, чем Web Storage API.
                
 
-
                В этом разделе мы действительно только коснемся того, на что он способен, но мы дадим вам достаточно, чтобы начать.
                
+
                В этом разделе мы действительно только коснёмся того, на что он способен, но мы дадим вам достаточно, чтобы начать.
                
 
 
                Работа с примером хранения заметок
                
 
@@ -668,7 +668,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
 
 
                Оффлайн хранение данных
                
 
-
                Пример ниже показывает, как создать приложение, которое будет хранить данные большого объема в хранилище IndexedDB, избегая необходимости скачивать их повторно. Это важное улучшение пользовательского опыта, но есть одно замечание — основной HTML, CSS, и файлы JavaScript все еще нужно загружать каждый раз при запросе сайта, это значит, что данный пример не будет работать при отсутствии сетевого соединения.
                
+
                Пример ниже показывает, как создать приложение, которое будет хранить данные большого объёма в хранилище IndexedDB, избегая необходимости скачивать их повторно. Это важное улучшение пользовательского опыта, но есть одно замечание — основной HTML, CSS, и файлы JavaScript все ещё нужно загружать каждый раз при запросе сайта, это значит, что данный пример не будет работать при отсутствии сетевого соединения.
                
 
 
                
 
@@ -678,10 +678,10 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
 
 
                Когда worker перехватывает запрос, он может делать многие вещи (смотри идеи для использования сервис-воркеров), но классический пример это сохранение сетевых ответов и затем доступ к ним при запросе, вместо запросов по сети. В результате, это позволяет сделать веб-сайт полностью работающим в офлайне.
                
 
-
                Cache API это еще один механизм хранения данных на клиенте с небольшим отличием — он разработан для хранения HTTP ответов, и прекрасно работает с сервис-воркерами.
                
+
                Cache API это ещё один механизм хранения данных на клиенте с небольшим отличием — он разработан для хранения HTTP ответов, и прекрасно работает с сервис-воркерами.
                
 
 
                
-
                Note: Service workers и Cache доступны в большинстве современных браузеров. В момент написания статьи, Safari еще не имел реализации, но скоро должна быть.
                
+
                Note: Service workers и Cache доступны в большинстве современных браузеров. В момент написания статьи, Safari ещё не имел реализации, но скоро должна быть.
                
 
                
 
 
                Пример сервис воркера
                
@@ -703,12 +703,12 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
   }
                -

                Примечание: Путь к файлу sw.js указан относительно корня сайта, а не JavaScript файла, содержащего основной код. Полный путь - https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js. Корень -  https://mdn.github.io, и следовательно указываемый путь должен быть /learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js. Если вы хотите использовать данный пример на своем сервере, вы также должны изменить путь к скрипту. Это довольно запутанно, но обязано так работать по причинам безопасности.

                +

                Примечание: Путь к файлу sw.js указан относительно корня сайта, а не JavaScript файла, содержащего основной код. Полный путь - https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js. Корень -  https://mdn.github.io, и следовательно указываемый путь должен быть /learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js. Если вы хотите использовать данный пример на своём сервере, вы также должны изменить путь к скрипту. Это довольно запутанно, но обязано так работать по причинам безопасности.

                Устанавливаем сервис воркер

                -

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

                +

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

                Давайте взглянем на файл сервис-воркера sw.js. Вы можете видеть, что обработчик события install зарегистрирован на self. Ключевое слово self это способ ссылки на глобальную область видимости сервис-воркера из файла с сервис-воркером.

                @@ -733,11 +733,11 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {

                Отвечаем на последующие запросы

                -

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

                +

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

                -

                Это то, что делает вторая часть кода файла sw.js. Мы добавили еще один обработчик к сервис-воркеру в глобальной области видимости, который запускает функцию-обработчик при событии fetch. Это происходит всякий раз, когда браузер делает запрос ресурса в директорию, где зарегистрирован сервис-воркер.

                +

                Это то, что делает вторая часть кода файла sw.js. Мы добавили ещё один обработчик к сервис-воркеру в глобальной области видимости, который запускает функцию-обработчик при событии fetch. Это происходит всякий раз, когда браузер делает запрос ресурса в директорию, где зарегистрирован сервис-воркер.

                -

                Внутри обработчика, мы сначала выводим в консоль URL запрашиваемого ресурса. Затем отдаем особый ответ на запрос, используя метод {{domxref("FetchEvent.respondWith()")}}.

                +

                Внутри обработчика, мы сначала выводим в консоль URL запрашиваемого ресурса. Затем отдаём особый ответ на запрос, используя метод {{domxref("FetchEvent.respondWith()")}}.

                Внутри блока мы используем {{domxref("CacheStorage.match()")}} чтобы проверить, можно ли найти соответствующий запрос (т.е. совпадение по URL) в кэше. Обещание возвращает найденный ответ или undefined, если ничего не нашлось.

                diff --git a/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html index 63d9010aab..da373e930c 100644 --- a/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html @@ -14,7 +14,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data
                {{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
                -

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

                +

                Другой очень распространённой задачей в современных веб-сайтах и ​​приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки всей новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые делают это возможным, например XMLHttpRequest и API Fetch.

          22. @@ -41,7 +41,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data

          Это привело к созданию технологий, позволяющих веб-страницам запрашивать небольшие фрагменты данных (например, HTML, {{glossary("XML")}}, JSON или обычный текст) и отображать их только при необходимости, помогая решать проблему, описанную выше.

          -

          Это достигается с помощью таких API, как {{domxref("XMLHttpRequest")}} или - более новой - Fetch API. Эти технологии позволяют веб-страницам напрямую обрабатывать запросы HTTP для определенных ресурсов, доступных на сервере, и форматировать результирующие данные по мере необходимости перед их отображением.

          +

          Это достигается с помощью таких API, как {{domxref("XMLHttpRequest")}} или - более новой - Fetch API. Эти технологии позволяют веб-страницам напрямую обрабатывать запросы HTTP для определённых ресурсов, доступных на сервере, и форматировать результирующие данные по мере необходимости перед их отображением.

          Примечание: Вначале эта общая техника была известна как Асинхронный JavaScript и XML (Ajax), поскольку она, как правило, использовала {{domxref("XMLHttpRequest")}} для запроса данных XML. В наши дни это обычно не так (вы, скорее всего, будете использовать XMLHttpRequest или Fetch для запроса JSON), но результат все тот же, и термин «Ajax» по-прежнему часто используется для описания этой техники.

          @@ -60,7 +60,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data
          • Обновления страницы намного быстрее, и вам не нужно ждать перезагрузки страницы, а это означает, что сайт работает быстрее и воспринимается более отзывчивым.
            • -
          • Меньше данных загружается при каждом обновлении, что означает меньшее потребление пропускной способности. Это не может быть такой большой проблемой на рабочем столе в широкополосном подключении, но это серьезная проблема на мобильных устройствах и в развивающихся странах, которые не имеют повсеместного быстрого интернет-сервиса.
            • +
          • Меньше данных загружается при каждом обновлении, что означает меньшее потребление пропускной способности. Это не может быть такой большой проблемой на рабочем столе в широкополосном подключении, но это серьёзная проблема на мобильных устройствах и в развивающихся странах, которые не имеют повсеместного быстрого интернет-сервиса.

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

          @@ -75,14 +75,14 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data

          XMLHttpRequest

          -

          XMLHttpRequest (который часто сокращается до XHR) является довольно старой технологией сейчас - он был изобретен Microsoft в конце 1990-х годов и уже довольно долго стандартизирован в браузерах.

          +

          XMLHttpRequest (который часто сокращается до XHR) является довольно старой технологией сейчас - он был изобретён Microsoft в конце 1990-х годов и уже довольно долго стандартизирован в браузерах.

          1. -

            Чтобы начать этот пример, создайте локальную копию ajax-start.html и четырех текстовых файлов - verse1.txt, verse2.txt, verse3.txt и verse4.txt - в новом каталоге на вашем компьютере. В этом примере мы загрузим другое стихотворение (который вы вполне можете распознать) через XHR, когда он будет выбран в выпадающем меню.

            +

            Чтобы начать этот пример, создайте локальную копию ajax-start.html и четырёх текстовых файлов - verse1.txt, verse2.txt, verse3.txt и verse4.txt - в новом каталоге на вашем компьютере. В этом примере мы загрузим другое стихотворение (который вы вполне можете распознать) через XHR, когда он будет выбран в выпадающем меню.

          2. -

            Внутри элемента {{htmlelement("script")}} добавьте следующий код. В нем хранится ссылка на элементы {{htmlelement("select")}} и {{htmlelement("pre")}} в переменных и определяется {{domxref ("GlobalEventHandlers.onchange", "onchange")}} обработчика событий, так что, когда значение select изменяется, его значение передается вызываемой функции updateDisplay() в качестве параметра.

            +

            Внутри элемента {{htmlelement("script")}} добавьте следующий код. В нем хранится ссылка на элементы {{htmlelement("select")}} и {{htmlelement("pre")}} в переменных и определяется {{domxref ("GlobalEventHandlers.onchange", "onchange")}} обработчика событий, так что, когда значение select изменяется, его значение передаётся вызываемой функции updateDisplay() в качестве параметра.

            var verseChoose = document.querySelector('select');
 var poemDisplay = document.querySelector('pre');
@@ -100,7 +100,7 @@ verseChoose.onchange = function() {
 };
          3. -

            Мы начнем нашу функцию с создания относительного URL-адреса, указывающего на текстовый файл, который мы хотим загрузить и который понадобится нам позже. Значение элемента {{htmlelement("select")}} в любой момент совпадает с текстом внутри выбранного {{htmlelement("option")}} (если вы не укажете другое значение в атрибуте value) - например, «Verse 1». Соответствующий текстовый файл стиха является «verse1.txt» и находится в том же каталоге, что и файл HTML, поэтому будет использоваться только имя файла.

            +

            Мы начнём нашу функцию с создания относительного URL-адреса, указывающего на текстовый файл, который мы хотим загрузить и который понадобится нам позже. Значение элемента {{htmlelement("select")}} в любой момент совпадает с текстом внутри выбранного {{htmlelement("option")}} (если вы не укажете другое значение в атрибуте value) - например, «Verse 1». Соответствующий текстовый файл стиха является «verse1.txt» и находится в том же каталоге, что и файл HTML, поэтому будет использоваться только имя файла.

            Тем не менее, веб-серверы, как правило, чувствительны к регистру, и имя файла не имеет символа "пробела". Чтобы преобразовать «Verse 1» в «verse1.txt», нам нужно преобразовать V в нижний регистр, удалить пробел и добавить .txt в конец. Это можно сделать с помощью {{jsxref("String.replace", "replace ()")}}, {{jsxref("String.toLowerCase", "toLowerCase ()")}} и простой конкатенации строк. Добавьте следующие строки внутри функции updateDisplay():

            @@ -114,7 +114,7 @@ var url = verse + '.txt'; 
            var request = new XMLHttpRequest();
          4. -

            Затем вам нужно использовать метод {{domxref("XMLHttpRequest.open", "open()")}}, чтобы указать, какой HTTP request method использовать для запроса ресурса из сети и какой его URL-адрес. Мы просто используем метод GET здесь и задаем URL как нашу переменную url. Добавьте это ниже вашей предыдущей строки:

            +

            Затем вам нужно использовать метод {{domxref("XMLHttpRequest.open", "open()")}}, чтобы указать, какой HTTP request method использовать для запроса ресурса из сети и какой его URL-адрес. Мы просто используем метод GET здесь и задаём URL как нашу переменную url. Добавьте это ниже вашей предыдущей строки:

            request.open('GET', url);
            5. @@ -124,7 +124,7 @@ var url = verse + '.txt'; 
            request.responseType = 'text';
          5. -

            Получение ресурса из сети - это {{glossary("asynchronous")}} операция, означающая, что вам нужно дождаться завершения этой операции (например, ресурс возвращается из сети), прежде чем вы сможете сделать что-либо с этим ответом, иначе будет выброшена ошибка. XHR позволяет вам обрабатывать это, используя обработчик события {{domxref("XMLHttpRequest.onload", "onload")}} - он запускается при возникновении события {{event("load")}} (когда ответ вернулся). Когда это произойдет, данные ответа будут доступны в свойстве response (ответ) объекта запроса XHR.

            +

            Получение ресурса из сети - это {{glossary("asynchronous")}} операция, означающая, что вам нужно дождаться завершения этой операции (например, ресурс возвращается из сети), прежде чем вы сможете сделать что-либо с этим ответом, иначе будет выброшена ошибка. XHR позволяет вам обрабатывать это, используя обработчик события {{domxref("XMLHttpRequest.onload", "onload")}} - он запускается при возникновении события {{event("load")}} (когда ответ вернулся). Когда это произойдёт, данные ответа будут доступны в свойстве response (ответ) объекта запроса XHR.

            Добавьте следующее ниже вашего последнего дополнения. Вы увидите, что внутри обработчика события onload мы устанавливаем textContent poemDisplay (элемент {{htmlelement("pre")}}) в значение {{domxref("XMLHttpRequest.response", "request. response ")}}.

            @@ -133,7 +133,7 @@ var url = verse + '.txt'; };
          6. -

            Вышеприведенная конфигурация запроса XHR  фактически не будет выполняться до тех пор, пока мы не вызовем метод {{domxref("XMLHttpRequest.send", "send()")}}. Добавьте следующее ниже вашего предыдущего дополнения для вызова функции:

            +

            Вышеприведённая конфигурация запроса XHR  фактически не будет выполняться до тех пор, пока мы не вызовем метод {{domxref("XMLHttpRequest.send", "send()")}}. Добавьте следующее ниже вашего предыдущего дополнения для вызова функции:

            request.send();
            7. @@ -159,7 +159,7 @@ verseChoose.value = 'Verse 1';
            1. -

              Сделайте копию своего предыдущего готового каталога примеров. (Если вы не работали над предыдущим упражнением, создайте новый каталог и внутри него создайте копии xhr-basic.html и четырех текстовых файлов — verse1.txt, verse2.txt, verse3.txt и verse4.txt.)

              +

              Сделайте копию своего предыдущего готового каталога примеров. (Если вы не работали над предыдущим упражнением, создайте новый каталог и внутри него создайте копии xhr-basic.html и четырёх текстовых файлов — verse1.txt, verse2.txt, verse3.txt и verse4.txt.)

            2. Внутри функции updateDisplay() найдите код XHR:

              @@ -192,9 +192,9 @@ request.send();

              Прежде всего, мы вызываем метод {{domxref("WorkerOrWindowGlobalScope.fetch()", "fetch()")}}, передавая ему URL-адрес ресурса, который мы хотим получить. Это современный эквивалент {{domxref("XMLHttpRequest.open", "request.open()")}} в XHR, плюс вам не нужен эквивалент .send().

              -

              После этого вы можете увидеть метод {{jsxref("Promise.then", ".then()")}}, прикреплённый в конец fetch() - этот метод является частью {{jsxref("Promise","Promises")}} - современная функция JavaScript для выполнения асинхронных операций. fetch() возвращает обещание, которое разрешает ответ, отправленный обратно с сервера, - мы используем .then() для запуска некоторого последующего кода после того, как обещание будет разрешено, что является функцией, которую мы определили внутри нее. Это эквивалент обработчика события onload в XHR-версии.

              +

              После этого вы можете увидеть метод {{jsxref("Promise.then", ".then()")}}, прикреплённый в конец fetch() - этот метод является частью {{jsxref("Promise","Promises")}} - современная функция JavaScript для выполнения асинхронных операций. fetch() возвращает обещание, которое разрешает ответ, отправленный обратно с сервера, - мы используем .then() для запуска некоторого последующего кода после того, как обещание будет разрешено, что является функцией, которую мы определили внутри неё. Это эквивалент обработчика события onload в XHR-версии.

              -

              Эта функция автоматически передает ответ от сервера в качестве параметра, когда обещает fetch(). Внутри функции мы берем ответ и запускаем его метод {{domxref("Body.text", "text()")}}, который в основном возвращает ответ как необработанный текст. Это эквивалент request.responseType = 'text' в версии XHR.

              +

              Эта функция автоматически передаёт ответ от сервера в качестве параметра, когда обещает fetch(). Внутри функции мы берём ответ и запускаем его метод {{domxref("Body.text", "text()")}}, который в основном возвращает ответ как необработанный текст. Это эквивалент request.responseType = 'text' в версии XHR.

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

              @@ -204,7 +204,7 @@ request.send();

              Обещания немного запутывают первый раз, когда вы их встречаете, но не беспокойтесь об этом слишком долго. Через некоторое время вы привыкнете к ним, особенно, когда вы узнаете больше о современных JavaScript-API. Большинство из них в большей степени основаны на обещаниях.

              -

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

              +

              Давайте посмотрим на структуру обещаний сверху, чтобы увидеть, можем ли мы ещё немного понять это:

              fetch(url).then(function(response) {
   response.text().then(function(text) {
@@ -214,7 +214,7 @@ request.send();

              В первой строке говорится: «Получить ресурс, расположенный по адресу url» (fetch(url)) и «затем запустить указанную функцию, когда обещание будет разрешено» (.then(function() { ... })). «Resolve» означает «завершить выполнение указанной операции в какой-то момент в будущем». Указанная операция в этом случае заключается в извлечении ресурса с указанного URL (с использованием HTTP-запроса) и возврата ответа для нас, чтобы что-то сделать.

              -

              Фактически, функция, переданная в then(), представляет собой кусок кода, который не запускается немедленно - вместо этого он будет работать в какой-то момент в будущем, когда ответ будет возвращен. Обратите внимание, что вы также можете сохранить свое обещание в переменной и цепочку {{jsxref("Promise.then", ".then()")}} вместо этого. Ниже код будет делать то же самое:

              +

              Фактически, функция, переданная в then(), представляет собой кусок кода, который не запускается немедленно - вместо этого он будет работать в какой-то момент в будущем, когда ответ будет возвращён. Обратите внимание, что вы также можете сохранить своё обещание в переменной и цепочку {{jsxref("Promise.then", ".then()")}} вместо этого. Ниже код будет делать то же самое:

              var myFetch = fetch(url);
 
@@ -224,7 +224,7 @@ myFetch.then(function(response) {
   });
 });
              -

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

              +

              Поскольку метод fetch() возвращает обещание, которое разрешает HTTP-ответ, любая функция, которую вы определяете внутри .then(), прикованная к концу, будет автоматически передаваться как параметр. Вы можете вызвать параметр, который вам нравится - приведённый ниже пример будет работать:

              fetch(url).then(function(dogBiscuits) {
   dogBiscuits.text().then(function(text) {
@@ -258,15 +258,15 @@ myFetch.then(function(response) {
 
 
              Какой механизм следует использовать?
              
 
-
              Это действительно зависит от того, над каким проектом вы работаете. XHR существует уже давно и имеет отличную кросс-браузерную поддержку. Fetch and Promises, с другой стороны, являются более поздним дополнением к веб-платформе, хотя они хорошо поддерживаются в браузере, за исключением Internet Explorer и Safari (которые на момент написания Fetch были доступны в своем предварительный просмотр технологии).
              
+
              Это действительно зависит от того, над каким проектом вы работаете. XHR существует уже давно и имеет отличную кросс-браузерную поддержку. Fetch and Promises, с другой стороны, являются более поздним дополнением к веб-платформе, хотя они хорошо поддерживаются в браузере, за исключением Internet Explorer и Safari (которые на момент написания Fetch были доступны в своём предварительный просмотр технологии).
              
 
 
              Если вам необходимо поддерживать старые браузеры, тогда может быть предпочтительным решение XHR. Если, однако, вы работаете над более прогрессивным проектом и не так обеспокоены старыми браузерами, то Fetch может быть хорошим выбором.
              
 
-
              Вам действительно нужно учиться - Fetch станет более популярным, так как Internet Explorer отказывается от использования (IE больше не разрабатывается, в пользу нового браузера Microsoft Edge), но вам может понадобиться XHR еще некоторое время.
              
+
              Вам действительно нужно учиться - Fetch станет более популярным, так как Internet Explorer отказывается от использования (IE больше не разрабатывается, в пользу нового браузера Microsoft Edge), но вам может понадобиться XHR ещё некоторое время.
              
 
 
              Более сложный пример
              
 
-
              Чтобы завершить статью, мы рассмотрим несколько более сложный пример, который показывает более интересные применения Fetch. Мы создали образец сайта под названием The Can Store - это вымышленный супермаркет, который продает только консервы. Вы можете найти этот пример в прямом эфире на GitHub и посмотреть исходный код.
              
+
              Чтобы завершить статью, мы рассмотрим несколько более сложный пример, который показывает более интересные применения Fetch. Мы создали образец сайта под названием The Can Store - это вымышленный супермаркет, который продаёт только консервы. Вы можете найти этот пример в прямом эфире на GitHub и посмотреть исходный код.
              
 
 
              A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column.
              
 
@@ -289,7 +289,7 @@ myFetch.then(function(response) {
   }
 });
              -

              Это похоже на то, что мы видели раньше, за исключением того, что второе обещание находится в условном выражении. В этом случае мы проверяем, был ли возвращенный ответ успешным - свойство {{domxref("response.ok")}} содержит логическое значение, которое true, если ответ был в порядке (например, 200 meaning "OK") или false, если он не увенчался успехом.

              +

              Это похоже на то, что мы видели раньше, за исключением того, что второе обещание находится в условном выражении. В этом случае мы проверяем, был ли возвращённый ответ успешным - свойство {{domxref("response.ok")}} содержит логическое значение, которое true, если ответ был в порядке (например, 200 meaning "OK") или false, если он не увенчался успехом.

              Если ответ был успешным, мы выполняем второе обещание - на этот раз мы используем {{domxref("Body.json", "json()")}}, а не {{domxref("Body.text", "text()")}}, так как мы хотим вернуть наш ответ как структурированные данные JSON, а не обычный текст.

              @@ -300,7 +300,7 @@ myFetch.then(function(response) {
              1. Создание локальной копии файлов примеров (загрузка и распаковка the can-store ZIP file)
              2. Запустите код через веб-сервер (как описано выше, в {{anch("Serving your example from a server")}})
                3. -
              3. Измените путь к извлеченному файлу, например, «product.json» (т.е. убедитесь, что он написан неправильно)
                4. +
              4. Измените путь к извлечённому файлу, например, «product.json» (т.е. убедитесь, что он написан неправильно)
              5. Теперь загрузите индексный файл в свой браузер (например, через localhost:8000) и посмотрите в консоли разработчика браузера. Вы увидите сообщение в строке «Запрос сети для продуктов.json не удалось с ответом 404: Файл не найден»
              @@ -319,7 +319,7 @@ myFetch.then(function(response) {

              Это работает во многом так же, как и предыдущий, за исключением того, что вместо использования {{domxref("Body.json", "json()")}} мы используем {{domxref("Body.blob", "blob()")}} - в этом случае мы хотим вернуть наш ответ в виде файла изображения, а формат данных, который мы используем для этого - Blob - этот термин является аббревиатурой от« Binary Large Object »и может в основном использоваться для представляют собой большие файловые объекты, такие как изображения или видеофайлы.

              -

              После того как мы успешно получили наш blob, мы создаем URL-адрес объекта, используя {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Это возвращает временный внутренний URL-адрес, указывающий на объект, указанный в браузере. Они не очень читаемы, но вы можете видеть, как выглядит, открывая приложение Can Store, Ctrl-/щелкнуть правой кнопкой мыши по изображению и выбрать опцию «Просмотр изображения» (которая может немного отличаться в зависимости от того, какой браузер вы ). URL-адрес объекта будет отображаться внутри адресной строки и должен выглядеть примерно так:

              +

              После того как мы успешно получили наш blob, мы создаём URL-адрес объекта, используя {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Это возвращает временный внутренний URL-адрес, указывающий на объект, указанный в браузере. Они не очень читаемы, но вы можете видеть, как выглядит, открывая приложение Can Store, Ctrl-/щёлкнуть правой кнопкой мыши по изображению и выбрать опцию «Просмотр изображения» (которая может немного отличаться в зависимости от того, какой браузер вы ). URL-адрес объекта будет отображаться внутри адресной строки и должен выглядеть примерно так:

              blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4
              diff --git a/files/ru/learn/javascript/client-side_web_apis/index.html b/files/ru/learn/javascript/client-side_web_apis/index.html index b5e7493f19..ed8a1b0a19 100644 --- a/files/ru/learn/javascript/client-side_web_apis/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/index.html @@ -21,7 +21,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs ---
              {{LearnSidebar}}
              -

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

              +

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

              Прежде чем начать

              @@ -37,11 +37,11 @@ translation_of: Learn/JavaScript/Client-side_web_APIs
              Введение в различные web API
              -
              Прежде всего, мы начнем изучение API с основ - что это такое, как это работает, как вы используете их в своем коде и как они структурированы? Мы также рассмотрим, что представляют собой различные основные классы API, и как их можно использовать.
              +
              Прежде всего, мы начнём изучение API с основ - что это такое, как это работает, как вы используете их в своём коде и как они структурированы? Мы также рассмотрим, что представляют собой различные основные классы API, и как их можно использовать.
              Управление документами
              При написании веб-страниц и приложений Вы чаще всего будете управлять каким-либо образом веб-документами.  Обычно это делается с помощью Document Object Model (DOM), набора API-интерфейсов для управления HTML-разметкой и стилями, которые используют объект {{domxref ("Document")}}. В этой статье мы рассмотрим, как использовать DOM, а также некоторые интересные API, которые могут изменить рабочую среду интересными способами.
              Получение данных с сервера
              -
              Другой очень распространенной задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки абсолютно новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые позволяют это, например {{domxref("XMLHttpRequest")}} и Fetch API.
              +
              Другой очень распространённой задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки абсолютно новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые позволяют это, например {{domxref("XMLHttpRequest")}} и Fetch API.
              Сторонние API
              API, которые мы рассматривали до сих пор, встроены в браузер, но не все API встроены в браузер. Многие крупные веб-сайты и сервисы, такие как Google Maps, Twitter, Facebook, PayPal и т.д. предоставляют API-интерфейсы, позволяющие разработчикам использовать свои данные (например, показывать ваш Twitter-поток в вашем блоге) или сервисы (например, отображение пользовательских карт Google на вашем сайте, или с помощью входа в систему Facebook для входа в систему пользователей). В этой статье рассматривается различие между API браузера и сторонними API и показано типичное использование последнего.
              Рисование графики
              diff --git a/files/ru/learn/javascript/client-side_web_apis/introduction/index.html b/files/ru/learn/javascript/client-side_web_apis/introduction/index.html index 089ee32bab..322ff509a5 100644 --- a/files/ru/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/introduction/index.html @@ -43,7 +43,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction

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

                -
              • API браузера встроены в веб-браузер и способны использовать данные браузера и компьютерной среды для осуществления более сложных действий с этими данными. К примеру, API Геолокации (Geolocation API) предоставляет простые в использовании конструкции JavaScript для работы с данными местоположения, так что вы сможете, допустим, отметить свое расположение на карте Google Map. На самом деле, в браузере выполняется сложный низкоуровневый код (например, на C++) для подключения к устройству GPS (или любому другому устройству геолокации), получения данных и передачи их браузеру для обработки вашей программой, но, как было сказано выше, эти детали скрыты благодаря API.
                • +
              • API браузера встроены в веб-браузер и способны использовать данные браузера и компьютерной среды для осуществления более сложных действий с этими данными. К примеру, API Геолокации (Geolocation API) предоставляет простые в использовании конструкции JavaScript для работы с данными местоположения, так что вы сможете, допустим, отметить своё расположение на карте Google Map. На самом деле, в браузере выполняется сложный низкоуровневый код (например, на C++) для подключения к устройству GPS (или любому другому устройству геолокации), получения данных и передачи их браузеру для обработки вашей программой, но, как было сказано выше, эти детали скрыты благодаря API.
              • Сторонние API не встроены в браузер по умолчанию. Такие API и информацию о них обычно необходимо искать в интернете. Например, Twitter API позволяет размещать последние твиты (tweets) на вашем веб-сайте. В данном API определён набор конструкций, осуществляющих запросы к сервисам Twitter и возвращающих определённые данные.
              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 a0e35bc998..f9ce1ece00 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 @@ -31,9 +31,9 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

              Важные элементы веб-браузера

              -

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

              +

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

              -

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

              +

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

              @@ -49,7 +49,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

              Документ, загруженный в каждый из ваших вкладок браузера, представлен объектной моделью документа. Это представление «древовидной структуры», созданное браузером, которое позволяет легко получить доступ к структуре HTML с помощью языков программирования - например, сам браузер использует его для применения стиля и другой информации к правильным элементам, поскольку он отображает страницу, а разработчики (как Вы) могут манипулировать DOM с JavaScript после того, как страница была отображена.

              -

              Мы создали простую страницу примера в dom-example.html (см. также live). Попробуйте открыть это в своем браузере - это очень простая страница, содержащая элемент {{htmlelement("section")}}, внутри которого вы можете найти изображение и абзац со ссылкой внутри. Исходный код HTML выглядит так:

              +

              Мы создали простую страницу примера в dom-example.html (см. также live). Попробуйте открыть это в своём браузере - это очень простая страница, содержащая элемент {{htmlelement("section")}}, внутри которого вы можете найти изображение и абзац со ссылкой внутри. Исходный код HTML выглядит так:

              <!DOCTYPE html>
 <html>
@@ -73,23 +73,23 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
 
              Примечание. Эта диаграмма дерева DOM была создана с использованием Live DOM viewer Яна Хиксона.
          -

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

          +

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

          • Element node: элемент, как он существует в DOM.
          • Root node: верхний узел в дереве, который в случае HTML всегда является узлом HTML (другие словари разметки, такие как SVG и пользовательский XML, будут иметь разные корневые элементы)..
            • -
          • Child node: узел непосредственно внутри другого узла. Например, IMG является дочерним элементом SECTION в приведенном выше примере.
            • -
          • Descendant node (узел потомок): узел внутри дочернего элемента. Например, IMG является дочерним элементом SECTION в приведенном выше примере, и он также является потомком для родителя SECTION. IMG не является ребенком BODY, так как он находится на двух уровнях ниже дерева в дереве, но он является потомком BODY.
            • -
          • Parent node: узел, в котором текущий узел. Например, BODY является родительским узлом SECTION в приведенном выше примере.
            • -
          • Sibling nodes (одноуровневый узел): узлы, которые расположены на одном уровне в дереве DOM. Например, IMG и P являются братьями и сестрами в приведенном выше примере.
            • +
          • Child node: узел непосредственно внутри другого узла. Например, IMG является дочерним элементом SECTION в приведённом выше примере.
            • +
          • Descendant node (узел потомок): узел внутри дочернего элемента. Например, IMG является дочерним элементом SECTION в приведённом выше примере, и он также является потомком для родителя SECTION. IMG не является ребёнком BODY, так как он находится на двух уровнях ниже дерева в дереве, но он является потомком BODY.
            • +
          • Parent node: узел, в котором текущий узел. Например, BODY является родительским узлом SECTION в приведённом выше примере.
            • +
          • Sibling nodes (одноуровневый узел): узлы, которые расположены на одном уровне в дереве DOM. Например, IMG и P являются братьями и сёстрами в приведённом выше примере.
          • Text node: узел, содержащий текстовую строку.
          -

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

          +

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

          Активное обучение: основы управления структурой DOM

          -

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

          +

          Чтобы начать изучение по управлению структуры DOM, давайте начнём с практического примера.

          1. Возьмите локальную копию страницы dom-example.html page и изображение, которое вместе с ним.
            2. @@ -97,7 +97,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
          2. Чтобы управлять элементом внутри DOM, вам сначала нужно выбрать его и сохранить ссылку на него внутри переменной. Внутри вашего скриптового элемента добавьте следующую строку: 
            var link = document.querySelector('a');
            3. -
          3. Теперь у нас есть ссылка на элемент, хранящаяся в переменной, мы можем начать ее манипулировать с использованием доступных ему свойств и методов (они определены на таких интерфейсах, как {{domxref("HTMLAnchorElement")}} в случае {{htmlelement ("a")}}, его более общий родительский интерфейс {{domxref ("HTMLElement")}} и {{domxref("Node")}} - который представляет все узлы в DOM). Прежде всего, давайте изменим текст внутри ссылки, обновив значение свойства {{domxref("Node.textContent")}}. Добавьте следующую строку ниже предыдущей: +
          4. Теперь у нас есть ссылка на элемент, хранящаяся в переменной, мы можем начать её манипулировать с использованием доступных ему свойств и методов (они определены на таких интерфейсах, как {{domxref("HTMLAnchorElement")}} в случае {{htmlelement ("a")}}, его более общий родительский интерфейс {{domxref ("HTMLElement")}} и {{domxref("Node")}} - который представляет все узлы в DOM). Прежде всего, давайте изменим текст внутри ссылки, обновив значение свойства {{domxref("Node.textContent")}}. Добавьте следующую строку ниже предыдущей: 
            link.textContent = 'Mozilla Developer Network';
          5. Мы также должны изменить URL-адрес, на который указывает ссылка, чтобы он не попадал в неправильное место при нажатии. Добавьте следующую строку, опять внизу: @@ -111,8 +111,8 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

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

              -
            • {{domxref("Document.getElementById()")}}, который выбирает элемент с заданным значением атрибута id, например <p id="myId">Мой абзац</p>. Идентификатор передается функции как параметр, т.е. var elementRef = document.getElementById('myId').
              • -
            • {{domxref("Document.getElementsByTagName()")}}, который возвращает массив, содержащий все элементы на странице данного типа, например <p>, <a> и т.д. Тип элемента передается к функции в качестве параметра, то есть var elementRefArray = document.getElementsByTagName('p').
              • +
            • {{domxref("Document.getElementById()")}}, который выбирает элемент с заданным значением атрибута id, например <p id="myId">Мой абзац</p>. Идентификатор передаётся функции как параметр, т.е. var elementRef = document.getElementById('myId').
              • +
            • {{domxref("Document.getElementsByTagName()")}}, который возвращает массив, содержащий все элементы на странице данного типа, например <p>, <a> и т.д. Тип элемента передаётся к функции в качестве параметра, то есть var elementRefArray = document.getElementsByTagName('p').

            Эти два работают в более старых браузерах, чем современные методы, такие как querySelector(), но не так удобны. Осмотритесь и вы увидите, что ещё можно найти!

            @@ -123,7 +123,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

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

              -
            1. Возвращаясь к текущему примеру, давайте начнем с захвата ссылки на наш элемент {{htmlelement("section")}} - добавьте следующий код внизу существующего скрипта (сделайте то же самое с другими строками): +
            2. Возвращаясь к текущему примеру, давайте начнём с захвата ссылки на наш элемент {{htmlelement("section")}} - добавьте следующий код внизу существующего скрипта (сделайте то же самое с другими строками): 
              var sect = document.querySelector('section');
            3. Теперь давайте создадим новый абзац, используя {{domxref("Document.createElement()")}} и передадим ему текстовое содержимое так же, как и раньше: @@ -136,7 +136,7 @@ para.textContent = 'We hope you enjoyed the ride.';
            4. Наконец, для этой части, давайте добавим текстовый узел в абзац, где находится ссылка, чтобы оформить предложение красиво. Сначала мы создадим текстовый узел, используя {{domxref("Document.createTextNode()")}}: 
              var text = document.createTextNode(' — the premier source for web development knowledge.');
              5. -
            5. Теперь мы возьмем ссылку на абзац, в котором находится ссылка, и добавим к нему текстовый узел: +
            6. Теперь мы возьмём ссылку на абзац, в котором находится ссылка, и добавим к нему текстовый узел: 
              var linkPara = document.querySelector('p');
 linkPara.appendChild(text);
              7. @@ -152,7 +152,7 @@ linkPara.appendChild(text); 
              sect.appendChild(linkPara);
              -

              Это переводит абзац вниз в нижнюю часть раздела. Вы могли подумать, что это сделает вторую копию, но это не так - linkPara - ссылка на единственную копию этого абзаца. Если вы хотите сделать копию и добавить ее также, вам нужно будет использовать {{domxref("Node.cloneNode()")}}.

              +

              Это переводит абзац вниз в нижнюю часть раздела. Вы могли подумать, что это сделает вторую копию, но это не так - linkPara - ссылка на единственную копию этого абзаца. Если вы хотите сделать копию и добавить её также, вам нужно будет использовать {{domxref("Node.cloneNode()")}}.

              Удаление узла довольно просто, по крайней мере, когда у вас есть ссылка на удаляемый узел и его родительский элемент. В нашем случае мы просто используем {{domxref("Node.removeChild()")}}, например:

              @@ -168,7 +168,7 @@ linkPara.appendChild(text);

              Можно управлять стилями CSS с помощью JavaScript различными способами.

              -

              Для начала вы можете получить список всех таблиц стилей, прикрепленных к документу, с помощью {{domxref("Document.stylesheets")}}, который возвращает массив объектов {{domxref("CSSStyleSheet")}}. Затем вы можете добавлять / удалять стили по желанию. Однако мы не будем расширять эти функции, потому что они являются несколько архаичным и трудным способом манипулирования стилем. Есть гораздо более простые способы.

              +

              Для начала вы можете получить список всех таблиц стилей, прикреплённых к документу, с помощью {{domxref("Document.stylesheets")}}, который возвращает массив объектов {{domxref("CSSStyleSheet")}}. Затем вы можете добавлять / удалять стили по желанию. Однако мы не будем расширять эти функции, потому что они являются несколько архаичным и трудным способом манипулирования стилем. Есть гораздо более простые способы.

              Первый способ - добавить встроенные стили непосредственно на элементы, которые вы хотите динамически стилизовать. Это делается с помощью свойства {{domxref("HTMLElement.style")}}, которое содержит встроенную информацию о стиле для каждого элемента документа. Вы можете установить свойства этого объекта для непосредственного обновления стилей элементов.

              @@ -189,7 +189,7 @@ para.style.textAlign = 'center';

              Примечание: Обратите внимание на то, как версии свойств JavaScript стилей CSS пишутся в нижнем регистре верблюжьего стиля (lower camel case), в то время как версии свойств стилей CSS используют дефисы  (например, backgroundColor и background-color). Убедитесь, что вы не перепутали их, иначе это не сработает.

              -

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

              +

              Существует ещё один распространённый способ динамического управления стилями вашего документа, который мы рассмотрим сейчас.

              1. Удалите предыдущие пять строк, добавленных в JavaScript.
                2. @@ -204,17 +204,17 @@ para.style.textAlign = 'center'; } </style> -
              2. Теперь мы перейдем к очень полезному методу для общего манипулирования HTML - {{domxref("Element.setAttribute()")}} - это принимает два аргумента, атрибут, который вы хотите установить для элемента, и значение, которое вы хотите для его установки. В этом случае мы укажем имя класса выделения в нашем абзаце: +
              3. Теперь мы перейдём к очень полезному методу для общего манипулирования HTML - {{domxref("Element.setAttribute()")}} - это принимает два аргумента, атрибут, который вы хотите установить для элемента, и значение, которое вы хотите для его установки. В этом случае мы укажем имя класса выделения в нашем абзаце: 
                para.setAttribute('class', 'highlight');
              4. Обновите свою страницу, и вы не увидите изменений - CSS по-прежнему применяется к абзацу, но на этот раз, предоставив ему класс, который выбран нашим правилом CSS, а не как встроенные стили CSS.
              -

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

              +

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

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

              -

              В следующих параграфах мы рассмотрим еще несколько практических применений DOM API.

              +

              В следующих параграфах мы рассмотрим ещё несколько практических применений DOM API.

              Примечание. Вы можете найти наш пример finished version of the dom-example.html на GitHub (см. также live).

              @@ -222,14 +222,14 @@ para.style.textAlign = 'center';

              Активное обучение: динамический список покупок

              -

              До сих пор мы действительно смотрели на использование функций {{domxref("Node")}} и {{domxref("Document")}} для управления документами, но нет причин, по которым вы не можете получить данные из других источников и использовать его в пользовательском интерфейсе. Вспомните нашу простую демонстрацию maps-example.html из последней статьи - там мы извлекли некоторые данные о местоположении и использовали ее для отображения карты вашей области. Вам просто нужно убедиться, что ваши данные в правильном формате; JavaScript упрощает работу, чем многие другие языки, будучи слабо типизированным - например, числа автоматически преобразуются в строки, когда вы хотите распечатать их на экране.

              +

              До сих пор мы действительно смотрели на использование функций {{domxref("Node")}} и {{domxref("Document")}} для управления документами, но нет причин, по которым вы не можете получить данные из других источников и использовать его в пользовательском интерфейсе. Вспомните нашу простую демонстрацию maps-example.html из последней статьи - там мы извлекли некоторые данные о местоположении и использовали её для отображения карты вашей области. Вам просто нужно убедиться, что ваши данные в правильном формате; JavaScript упрощает работу, чем многие другие языки, будучи слабо типизированным - например, числа автоматически преобразуются в строки, когда вы хотите распечатать их на экране.

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

              Для начала создайте локальную копию наших демо-файлов window-resize-example.html и bgtile.png. Откройте его и посмотрите - вы увидите, что у нас есть элемент {{htmlelement("div")}}, который покрывает небольшую часть экрана, на который нанесена фоновая плитка. Мы будем использовать это, чтобы представить нашу область пользовательского интерфейса приложения.

                -
              1. Прежде всего, давайте возьмем ссылку на div, а затем возьмем ширину и высоту окна просмотра (внутреннее окно, где отображается ваш документ) и сохраните их в переменных - эти два значения удобно содержатся в {{domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}. Добавьте следующие строки внутри существующего элемента {{htmlelement("script")}}: +
              2. Прежде всего, давайте возьмём ссылку на div, а затем возьмём ширину и высоту окна просмотра (внутреннее окно, где отображается ваш документ) и сохраните их в переменных - эти два значения удобно содержатся в {{domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}. Добавьте следующие строки внутри существующего элемента {{htmlelement("script")}}: 
                var div = document.querySelector('div');
 var WIDTH = window.innerWidth;
 var HEIGHT = window.innerHeight;
                @@ -238,8 +238,8 @@ var HEIGHT = window.innerHeight; 
                div.style.width = WIDTH + 'px';
 div.style.height = HEIGHT + 'px';
                3. -
              3. Сохраните и попробуйте обновить браузер - теперь вы должны увидеть, что div становится таким же большим, как ваш видовой экран, независимо от того, какой размер экрана вы используете. Если теперь вы попытаетесь изменить размер окна, чтобы увеличить его, вы увидите, что div остается одного размера - мы устанавливаем его только один раз.
                4. -
              4. Как насчет того, чтобы мы использовали событие, чтобы размер div изменялся при изменении размера окна? Объект {{domxref("Window")}} имеет событие, имеющееся на нем с именем resize, которое запускается каждый раз при изменении размера окна - давайте обратимся к нему через обработчик событий {{domxref("Window.onresize")}} и повторяйте наш размерный код каждый раз, когда он изменяется. Добавьте нижеследующую часть кода: +
              5. Сохраните и попробуйте обновить браузер - теперь вы должны увидеть, что div становится таким же большим, как ваш видовой экран, независимо от того, какой размер экрана вы используете. Если теперь вы попытаетесь изменить размер окна, чтобы увеличить его, вы увидите, что div остаётся одного размера - мы устанавливаем его только один раз.
                6. +
              6. Как насчёт того, чтобы мы использовали событие, чтобы размер div изменялся при изменении размера окна? Объект {{domxref("Window")}} имеет событие, имеющееся на нем с именем resize, которое запускается каждый раз при изменении размера окна - давайте обратимся к нему через обработчик событий {{domxref("Window.onresize")}} и повторяйте наш размерный код каждый раз, когда он изменяется. Добавьте нижеследующую часть кода: 
                window.onresize = function() {
   WIDTH = window.innerWidth;
   HEIGHT = window.innerHeight;
@@ -260,14 +260,14 @@ div.style.height = HEIGHT + 'px';
                • Элемент должен появиться в списке.
                • Каждому элементу должна быть предоставлена кнопка, которую можно нажать, чтобы удалить этот элемент из списка.
                  • -
                • Вход должен быть опустошен и сфокусирован, чтобы вы могли ввести другой элемент.
                  • +
                • Вход должен быть опустошён и сфокусирован, чтобы вы могли ввести другой элемент.

                Готовое демо будет выглядеть примерно так:

                -

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

                +

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

                1. Для начала загрузите копию нашего начального файла shopping-list.html и скопируйте его где-нибудь. Вы увидите, что у него есть минимальный CSS, список с меткой, ввод и кнопка, пустой список и элемент {{htmlelement("script")}}. Вы будете делать все свои дополнения внутри скрипта.
                  2. diff --git a/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html index 4977fe99c7..69af264c07 100644 --- a/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html +++ b/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html @@ -27,7 +27,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs

                  Что такое сторонние API?

                  -

                  Сторонние API - это API, предоставляемые третьими лицами — как правило, такими компаниями, как Facebook, Twitter, or Google — чтобы вы могли получить доступ к их функциям с помощью JavaScript и использовать его на своем собственном сайте. Как мы показали в нашей вводной статье об API, одним из наиболее очевидных примеров является использование Google Maps APIs для отображения пользовательских карт на ваших страницах.

                  +

                  Сторонние API - это API, предоставляемые третьими лицами — как правило, такими компаниями, как Facebook, Twitter, or Google — чтобы вы могли получить доступ к их функциям с помощью JavaScript и использовать его на своём собственном сайте. Как мы показали в нашей вводной статье об API, одним из наиболее очевидных примеров является использование Google Maps APIs для отображения пользовательских карт на ваших страницах.

                  Давайте снова посмотрим на наш пример карты (см. исходный код на GitHub; см. это в действии),  и используем его для иллюстрации того, как сторонние API отличаются от API-интерфейсов браузера.

                  @@ -61,12 +61,12 @@ var myOptions = { var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); -

                  Здесь мы создаем новый объект LatLng, используя конструктор google.maps.LatLng(), который содержит широту и долготу местоположения, которое мы хотим показать, полученные из API геолокации. Затем мы создаем объект опций (myOptions), содержащий эту и другую информацию, связанную с отображением карты. Наконец, мы фактически создаем карту, используя конструктор google.maps.Map(), который принимает в качестве параметров элемент, на котором мы хотим нарисовать карту, и объект опций.

                  +

                  Здесь мы создаём новый объект LatLng, используя конструктор google.maps.LatLng(), который содержит широту и долготу местоположения, которое мы хотим показать, полученные из API геолокации. Затем мы создаём объект опций (myOptions), содержащий эту и другую информацию, связанную с отображением карты. Наконец, мы фактически создаём карту, используя конструктор google.maps.Map(), который принимает в качестве параметров элемент, на котором мы хотим нарисовать карту, и объект опций.

                  Это вся информация, которую API Карт Google требует для построения простой карты. Сервер, к которому вы подключаетесь, обрабатывает все сложные вещи, такие как отображение правильных фрагментов карты для отображаемой области и т. д.

                  -

                  Примечание: Некоторые API обрабатывают доступ к их функциям несколько иначе, требуя от разработчика сделать HTTP-запрос (см. Получение данных с сервера) на определенный шаблон URL для получения определенных данных. Они называются RESTful API, и мы покажем пример этого позже в статье.

                  +

                  Примечание: Некоторые API обрабатывают доступ к их функциям несколько иначе, требуя от разработчика сделать HTTP-запрос (см. Получение данных с сервера) на определённый шаблон URL для получения определённых данных. Они называются RESTful API, и мы покажем пример этого позже в статье.

                  Разрешения обрабатываются по-разному

                  @@ -77,15 +77,15 @@ var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
                  https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA
                  -

                  Параметр URL, указанный в конце URL-адреса, является ключом разработчика - разработчик приложения должен применять его для получения ключа, а затем включать его в свой код определенным образом, чтобы иметь доступ к функциям API. В случае с Картами Google (и другими API Google) вы подаете заявку на получение ключа на Google Cloud Platform.

                  +

                  Параметр URL, указанный в конце URL-адреса, является ключом разработчика - разработчик приложения должен применять его для получения ключа, а затем включать его в свой код определённым образом, чтобы иметь доступ к функциям API. В случае с Картами Google (и другими API Google) вы подаёте заявку на получение ключа на Google Cloud Platform.

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

                  + Требование к ключу заключается в том, что не каждый может использовать функциональность API без какой-либо подотчётности. Когда разработчик зарегистрировался для ключа, они затем известны поставщику API, и действие может быть предпринято, если они начинают делать что-то вредоносное с помощью API (например, отслеживать местоположение пользователей или пытаться спамить API с множеством запросов для остановки его работы, например). Самое простое действие - просто отменить их привилегии API.

                  Расширенный пример Карт Google

                  -

                  Теперь когда мы рассмотрели пример API Карт Google и посмотрели, как он работает, добавим еще несколько функций, чтобы показать, как использовать некоторые другие функции API.

                  +

                  Теперь когда мы рассмотрели пример API Карт Google и посмотрели, как он работает, добавим ещё несколько функций, чтобы показать, как использовать некоторые другие функции API.

                  1. @@ -96,7 +96,7 @@ var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    1. Перейдите в панель управления API-интерфейсом Google Cloud Platform.
                      2. -
                    2. Создайте новый проект, если у вас его еще нет.
                      3. +
                    3. Создайте новый проект, если у вас его ещё нет.
                    4. Нажмите кнопку Enable API.
                    5. Выберите Google Maps JavaScript API.
                    6. Нажмите кнопку Enable.
                      7. @@ -105,10 +105,10 @@ var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    -

                    Примечание: Получение ключей API, связанных с Google, может быть немного затруднительным: в Менеджере API Google Cloud Platform много разных экранов, и рабочий процесс может немного отличаться в зависимости от того, как у вас уже установлена ​​учетная запись. Если у вас возникнут проблемы с этим шагом, мы будем рады помочь — Свяжитесь с нами.

                    +

                    Примечание: Получение ключей API, связанных с Google, может быть немного затруднительным: в Менеджере API Google Cloud Platform много разных экранов, и рабочий процесс может немного отличаться в зависимости от того, как у вас уже установлена ​​учётная запись. Если у вас возникнут проблемы с этим шагом, мы будем рады помочь — Свяжитесь с нами.

                    2. -
                  2. Откройте исходный файл Карт Google, найдите строку INSERT-YOUR-API-KEY-HERE, и замените ее фактическим ключом API, который вы получили из панели управления Google Cloud Platform API Manager.
                    3. +
                  3. Откройте исходный файл Карт Google, найдите строку INSERT-YOUR-API-KEY-HERE, и замените её фактическим ключом API, который вы получили из панели управления Google Cloud Platform API Manager.

                  Adding a custom marker

                  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 9b719c4029..8ea9bbc299 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 @@ -23,7 +23,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash
          -

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

          +

          Вам не придётся сразу понимать весь код — мы только хотим познакомить вас с базовыми концепциями языка и дать представление о том, как работает JavaScript (и другие языки программирования). В дальнейших статьях вы изучите эти концепции более подробно!

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

          @@ -34,13 +34,13 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash

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

            -
          • Сначала вы разрабатываете логику (структуру, алгоритм выполнения) программы — общие задачи, что и в каких случаях она должна делать, как должна завершиться и т.д., т.е. создаете описание полного цикла её работы.
            • +
          • Сначала вы разрабатываете логику (структуру, алгоритм выполнения) программы — общие задачи, что и в каких случаях она должна делать, как должна завершиться и т.д., т.е. создаёте описание полного цикла её работы.
          • Затем определяете какие конструкции (возможности) языка вам понадобятся и как заставить их работать вместе — для последовательного выполнения всех этапов разработанной логики.
          -

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

          +

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

          -

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

          +

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

          Игра «Угадай число»

          @@ -159,12 +159,12 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash

          {{ EmbedLiveSample('Top_hidden_code', '100%', 320) }}

          -

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

          +

          Поиграйте в неё - познакомьтесь с игрой, прежде чем двигаться дальше.

          Давайте представим, что ваш босс дал вам следующую информацию для создания этой игры:

          -

          Я хочу чтобы ты создал простую игру по принципу "Угадай число". Игра должна случайным образом генерировать число от 0 до 100, затем игрок должен отгадать это число за 10 попыток. После каждой попытки игроку сообщают угадал он число или не угадал и если он ошибся, то ему сообщается, что загаданное число больше или меньше того, которое он ввел. Так же необходимо показывать игроку числа из его предыдущих попыток. Игра будет окончена, если игрок угадал число верно или если у него кончатся все попытки. После окончания игры игроку будет дана возможность сыграть в игру еще раз.

          +

          Я хочу чтобы ты создал простую игру по принципу "Угадай число". Игра должна случайным образом генерировать число от 0 до 100, затем игрок должен отгадать это число за 10 попыток. После каждой попытки игроку сообщают угадал он число или не угадал и если он ошибся, то ему сообщается, что загаданное число больше или меньше того, которое он ввёл. Так же необходимо показывать игроку числа из его предыдущих попыток. Игра будет окончена, если игрок угадал число верно или если у него кончатся все попытки. После окончания игры игроку будет дана возможность сыграть в игру ещё раз.

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

          @@ -173,7 +173,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash
        22. Сгенерировать случайное число между 1 и 100.
        23. Начать запись количества попыток игрока угадать число. Начать с 1.
        24. Предоставить попытку угадать игроку загаданное число.
          25. -
        25. Как только попытка угадать была отправлена, сначала записать ее где-нибудь, чтобы пользователь мог увидеть свои предыдущие попытки
          26. +
        26. Как только попытка угадать была отправлена, сначала записать её где-нибудь, чтобы пользователь мог увидеть свои предыдущие попытки
        27. Далее, проверить было ли это число верным.
        28. Если число верное:
            @@ -185,7 +185,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash
          1. Если число не верное и есть попытки:
            1. Сказать игроку, что он не угадал.
              2. -
            2. Разрешить ему использовать еще попытку.
              3. +
            3. Разрешить ему использовать ещё попытку.
            4. Повысить число попыток на 1.
            2. @@ -199,7 +199,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash
          2. Во время перезапуска игры убедиться, что игровая логика и пользовательский интерфейс полностью сбросились на начальные значения и далее перейти обратно к пункту 1.
          -

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

          +

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

          Подготовка

          @@ -216,7 +216,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash

          Добавление переменных для хранения данных

          -

          Давайте начнем. Прежде всего добавьте следующие строки внутри элемента  {{htmlelement("script")}} :

          +

          Давайте начнём. Прежде всего добавьте следующие строки внутри элемента  {{htmlelement("script")}} :

          var randomNumber = Math.floor(Math.random() * 100) + 1;
 
@@ -230,13 +230,13 @@ var guessField = document.querySelector('.guessField');
 var guessCount = 1;
 var resetButton;
          -

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

          +

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

          В нашем примере:

          • Первой переменной - randomNumber - присваивается случайное число от 1 до 100, вычисленное с использованием математического алгоритма.
            • -
          • Следующие три переменные сделаны для хранения ссылок на абзацы результатов в нашем HTML и используются для вставки значений в абзацы, приведенные далее в коде: +
          • Следующие три переменные сделаны для хранения ссылок на абзацы результатов в нашем HTML и используются для вставки значений в абзацы, приведённые далее в коде: 
            <p class="guesses"></p>
 <p class="lastResult"></p>
 <p class="lowOrHi"></p>
            @@ -245,7 +245,7 @@ var resetButton; 
            <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
 <input type="submit" value="Submit guess" class="guessSubmit">
            • -
          • Наши последние две переменные сохраняют количество догадок 1 (используется для отслеживания того, сколько догадок у игрока было), и ссылку на кнопку сброса, которая еще не существует (но позже).
            • +
          • Наши последние две переменные сохраняют количество догадок 1 (используется для отслеживания того, сколько догадок у игрока было), и ссылку на кнопку сброса, которая ещё не существует (но позже).
          @@ -260,7 +260,7 @@ var resetButton; alert('I am a placeholder'); } -

          Функции представляют собой многократно используемые блоки кода, написав один раз вы можете запускать их снова и снова, сохраняя нужный постоянно повторяющийся код. Это действительно полезно. Существует несколько способов определить функцию, но пока мы сосредоточимся на одном простом варианте. Здесь мы определили функцию используя ключевое слово function, за ним идет имя с двумя скобками после него. После этого мы добавляем две фигурные скобки ({ }). Внутри фигурных скобок содержится весь код, запускающийся всякий раз, когда вызываем функцию.

          +

          Функции представляют собой многократно используемые блоки кода, написав один раз вы можете запускать их снова и снова, сохраняя нужный постоянно повторяющийся код. Это действительно полезно. Существует несколько способов определить функцию, но пока мы сосредоточимся на одном простом варианте. Здесь мы определили функцию используя ключевое слово function, за ним идёт имя с двумя скобками после него. После этого мы добавляем две фигурные скобки ({ }). Внутри фигурных скобок содержится весь код, запускающийся всякий раз, когда вызываем функцию.

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

          @@ -270,7 +270,7 @@ var resetButton; 
          checkGuess();
          -

          Вы должны увидеть предупреждение, в котором говорится "I am a placeholder"; в нашем коде мы определили функцию, которая создает предупреждение, когда ее вызывают.

          +

          Вы должны увидеть предупреждение, в котором говорится "I am a placeholder"; в нашем коде мы определили функцию, которая создаёт предупреждение, когда её вызывают.

          Заметка: В дальнейшем вы намного больше узнаете о функциях.

          @@ -278,9 +278,9 @@ var resetButton;

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

          -

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

          +

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

          -

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

          +

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

        29. Мы расширяем наш базовый шаблон и переопределяем блок content.
        30. Мы используем условие if для показа того, или иного содержимого.
        31. Мы используем циклы for того, чтобы пробежаться по элементам (объектам) в соответствующих списках.
          32. -
        32. Мы получаем доступ к полям контекста при помощи "дот-нотации" (поскольку мы использовали обобщенный класс отображения детальной информации, то контекст имеет имя book; также можем использовать имя object)
          33. +
        33. Мы получаем доступ к полям контекста при помощи "дот-нотации" (поскольку мы использовали обобщённый класс отображения детальной информации, то контекст имеет имя book; также можем использовать имя object)

          34. Одной интересной вещью, которую мы не видели ранее, является функция book.bookinstance_set.all(). Данный метод является "автомагически"-сконструированным Django для того, чтобы вернуть множество записей BookInstance, связанных с данной книгой Book.

          @@ -433,7 +433,7 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path' <!-- итерации по каждой копии/экземпляру книги --> {% endfor %} -

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

          +

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

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

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

          Это случилось потому что, paginator object (далее объект постраничного вывода) ожидает видеть некую упорядоченность ORDER BY при запросе к базе данных. Без этого, он не сможет гарантировать правильный вывод полученных данных!

          -

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

          +

          Данное руководство пока не дошло до описания Pagination (пока, но скоро будет), и поскольку вы не можете использовать функцию sort_by() и передавать параметр (по той же причине, что и filter()) вы должны выбрать один из трёх вариантов дальнейших действий:

          1. Добавить атрибут ordering внутри Meta-класса объявленного в вашей модели.
            2. @@ -474,7 +474,7 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path'

            Конечно же, поле не обязательно должно иметь имя last_name: оно может быть любым.

            -

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

            +

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

          Как это теперь выглядит?

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

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

          -

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

          +

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

          Отображения

          @@ -507,13 +507,13 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path' model = Book paginate_by = 10 -

          Как только у вас появится более 10 записей в базе данных отображение начнет формировать постраничный вывод данных, которые он передает шаблону. К различным страницам данного вывода можно получить доступ при помощи параметров GET-запроса — к странице 2 вы можете получить доступ, используя URL-адрес: /catalog/books/?page=2.

          +

          Как только у вас появится более 10 записей в базе данных отображение начнёт формировать постраничный вывод данных, которые он передаёт шаблону. К различным страницам данного вывода можно получить доступ при помощи параметров GET-запроса — к странице 2 вы можете получить доступ, используя URL-адрес: /catalog/books/?page=2.

          Шаблоны

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

          -

          Откройте /locallibrary/catalog/templates/base_generic.html и, ниже блока content, вставьте блок (во фрагменте не выделен жирным), отвечающий за постраничный вывод. Данный код, в первую очередь, проверяет "включен" ли механизм постраничного вывода для данной страницы и если это так, то он добавляет ссылки next и previous,соответственно (а также, номер текущей страницы). 

          +

          Откройте /locallibrary/catalog/templates/base_generic.html и, ниже блока content, вставьте блок (во фрагменте не выделен жирным), отвечающий за постраничный вывод. Данный код, в первую очередь, проверяет "включён" ли механизм постраничного вывода для данной страницы и если это так, то он добавляет ссылки next и previous,соответственно (а также, номер текущей страницы). 

          {% block content %}{% endblock %}
 
@@ -564,7 +564,7 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path'
 
          Примечание:
          
 
 
            
- 
          • Когда вы создадите URL-преобразование для страницы списка авторов вам понадобится обновить ссылку All authors в базовом шаблоне. Следуйте тем же путем, который мы проделали когда обновляли ссылку All books.
            • 
+ 
          • Когда вы создадите URL-преобразование для страницы списка авторов вам понадобится обновить ссылку All authors в базовом шаблоне. Следуйте тем же путём, который мы проделали когда обновляли ссылку All books.
            • 
  
          • Когда вы создадите URL-преобразование для страницы с детальной информацией об авторе,  вы должны будете обновить шаблон детальной информации о книге (/locallibrary/catalog/templates/catalog/book_detail.html), таким образом, чтобы ссылка автора указывала на страницу с детальной информации о нем (а не быть пустой). Данная ссылка будет иметь вид как указано жирным во фрагменте ниже.
   
            <p><strong>Author:</strong> <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a></p>
 
            
@@ -588,15 +588,15 @@ url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path'
 
 
            Поздравляем! Наш базовый функционал библиотеки готов! 
            
 
-
            В данной статье мы изучили как применять обобщенные классы отображения списка и детальной информации, и использовать их для создания страниц отображения наших книг и авторов. Кроме того, мы многое узнали о паттернах преобразования, построенных на основе регулярных выражений, а также то, как вы можете передавать данные из URL-адреса в ваше отображение. Мы изучили несколько приемов применения шаблонов. В самом конце мы показали как осуществлять постраничный вывод списков, так, что наши списки управляются даже тогда, когда они содержат много записей.
            
+
            В данной статье мы изучили как применять обобщённые классы отображения списка и детальной информации, и использовать их для создания страниц отображения наших книг и авторов. Кроме того, мы многое узнали о паттернах преобразования, построенных на основе регулярных выражений, а также то, как вы можете передавать данные из URL-адреса в ваше отображение. Мы изучили несколько приёмов применения шаблонов. В самом конце мы показали как осуществлять постраничный вывод списков, так, что наши списки управляются даже тогда, когда они содержат много записей.
            
 
-
            В нашей следующей статье мы расширим нашу библиотеку, путем поддержки пользовательских аккаунтов,  и так образом продемонстрируем аутентификацию, разграничение уровней доступа, сессии и  формы.
            
+
            В нашей следующей статье мы расширим нашу библиотеку, путём поддержки пользовательских аккаунтов,  и так образом продемонстрируем аутентификацию, разграничение уровней доступа, сессии и  формы.
            
 
 
            Дополнительная информация
            
 
 
              
- 
            • Встроенные обобщенные классы отображения (Django docs)
              • 
- 
            • Обобщенный вид отображения (Django docs)
              • 
+ 
            • Встроенные обобщённые классы отображения (Django docs)
              • 
+ 
            • Обобщённый вид отображения (Django docs)
              • 
  
            • Введение в отображения на основе классов (Django docs)
              • 
  
            • Встроенные теги шаблона и фильтры (Django docs).
              • 
  
            • Постраничный вывод (Pagination) (Django docs)
              • 
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 df43a891ae..c5b6f2bbea 100644
--- a/files/ru/learn/server-side/django/home_page/index.html
+++ b/files/ru/learn/server-side/django/home_page/index.html
@@ -17,7 +17,7 @@ translation_of: Learn/Server-side/Django/Home_page
 
 
              {{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}
              
 
-
              Теперь мы готовы создать код нашей первой страницы — домашняя страница сайта LocalLibrary будет показывать количество записей в каждой модели, кроме того, она будет выводить боковую навигационную панель с ссылками на другие страницы сайта. В результате мы приобретем практический навык написания простых URL-преобразований и отображений, получения записей из базы данных и применения шаблонов.
              
+
              Теперь мы готовы создать код нашей первой страницы — домашняя страница сайта LocalLibrary будет показывать количество записей в каждой модели, кроме того, она будет выводить боковую навигационную панель с ссылками на другие страницы сайта. В результате мы приобретём практический навык написания простых URL-преобразований и отображений, получения записей из базы данных и применения шаблонов.
              
 
 
@@ -36,17 +36,17 @@ translation_of: Learn/Server-side/Django/Home_page
 
 
              Теперь, когда мы определили наши модели и создали несколько записей в них, пришло время написать код, который будет показывать данную информацию пользователям. И первое, что нам необходимо сделать это определиться какую информацию мы бы хотели показывать на наших страницах,  а затем определить соответствующие URL-адреса для получения соответствующих ресурсов. Затем нам надо создать url-преобразования, отображения (функции, или классы), а затем шаблоны страницы. 
              
 
-
              Диаграмма, представленная ниже,  демонстрирует главный поток данных и элементов, которые нужно реализовать для управления HTTP запросами и ответами. Поскольку мы уже создали модель, то нам остается создать следующее:
              
+
              Диаграмма, представленная ниже,  демонстрирует главный поток данных и элементов, которые нужно реализовать для управления HTTP запросами и ответами. Поскольку мы уже создали модель, то нам остаётся создать следующее:
                
- 
              • URL-преобразования для перехода по соответствующему URL-адресу (с учетом информации, передаваемой в данном адресе) к соответствующей функции отображения.
                • 
+ 
              • URL-преобразования для перехода по соответствующему URL-адресу (с учётом информации, передаваемой в данном адресе) к соответствующей функции отображения.
                • 
  
              • Функции отображения для запроса соответствующих данных из моделей, создание страниц HTML для показа этих данных и их отправку в клиент пользователя (в браузер).
                • 
  
              • Шаблоны, которые используются отображениями для рендеринга (отрисовки) данных.
                • 
 
              
 
-
              Как вы увидите в следующем разделе, у нас будет 5 страниц, которые мы немного опишем в данной статье. Данная статья, большей частью, будет сконцентрирована на реализации всего-лишь одной, домашней страницы нашего сайта (к другим страницам мы перейдем в других частях руководства). Это должно дать вам хорошее базовое представление о работе с URL-преобразованиями (связывании), отображениями и моделями.
              
+
              Как вы увидите в следующем разделе, у нас будет 5 страниц, которые мы немного опишем в данной статье. Данная статья, большей частью, будет сконцентрирована на реализации всего-лишь одной, домашней страницы нашего сайта (к другим страницам мы перейдём в других частях руководства). Это должно дать вам хорошее базовое представление о работе с URL-преобразованиями (связывании), отображениями и моделями.
              Определяем URL-адреса страниц
              
 
@@ -58,13 +58,13 @@ translation_of: Learn/Server-side/Django/Home_page
  
            • catalog/ — Домашняя/индексная страница.
            • catalog/books/ — Список всех книг.
            • catalog/authors/ — Список всех авторов.
              • 
- 
            • catalog/book/<id> — Детальная информация для определенной книги со значением первичного ключа равного <id>. Например, /catalog/book/3, для id = 3.
              • 
- 
            • catalog/author/<id> — Детальная информация для определенного автора со значением первичного ключа равного <id>. Например, /catalog/author/11, для автора с id = 11.
              • 
+ 
            • catalog/book/<id> — Детальная информация для определённой книги со значением первичного ключа равного <id>. Например, /catalog/book/3, для id = 3.
              • 
+ 
            • catalog/author/<id> — Детальная информация для определённого автора со значением первичного ключа равного <id>. Например, /catalog/author/11, для автора с id = 11.
              • Первые три URL-адреса используются для показа домашней страницы, а также списков книг и авторов. Они не кодируют никакой дополнительной информации и результат показа данных страниц будет полностью зависеть от того, что находится в базе данных  и, по сути, будет все время одним и тем же (при неизменной базе данных, конечно).
              
 
-
              Последние два URL-адреса применяются для показа детальной информации об определенной книге, или авторе — в себе они содержат соответствующее значение идентификатора (показан как <id>, выше). URL-преобразование получает данную информацию и передает ее в отображение, которое применяет ее для запроса к базе данных. Для кодирования и применения данной информации в вашем URL-адресе нам понадобится только одно url-преобразование, соответствующее отображение и шаблон страницы для показа любой книги (или автора). 
              
+
              Последние два URL-адреса применяются для показа детальной информации об определённой книге, или авторе — в себе они содержат соответствующее значение идентификатора (показан как <id>, выше). URL-преобразование получает данную информацию и передаёт её в отображение, которое применяет её для запроса к базе данных. Для кодирования и применения данной информации в вашем URL-адресе нам понадобится только одно url-преобразование, соответствующее отображение и шаблон страницы для показа любой книги (или автора). 
              
 
              Примечание: Django позволяет вам конструировать ваши URL-адреса любым, удобным для вас, способом — вы можете закодировать информацию в теле URL-адреса, как показано выше, или использовать URL-адрес типа GET (например, /book/?id=6). Независимо от ваших предпочтений, URL-адреса должны быть понятными, логичными и читабельными (посмотрите совет W3C здесь).
              
@@ -84,13 +84,13 @@ 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')),
 ]
              
 
-
              Примечание: всякий раз, когда Django сталкивается c  django.urls.include()  он отбрасывает часть совпавшего URL , и отправляет оставшуюся строку в включенный URLconf для дальнейшей обработки.
              
+
              Примечание: всякий раз, когда Django сталкивается c  django.urls.include()  он отбрасывает часть совпавшего URL , и отправляет оставшуюся строку в включённый URLconf для дальнейшей обработки.
              
 
 
              Внутри нашего каталога приложения откройте urls.py и поместите в него текст, отмеченный жирным, ниже. 
              
 
@@ -98,19 +98,19 @@ 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-адреса, указывающего на ресурс, на которое указывает данное преобразование. Например, теперь, когда у нас имеется данное символическое имя, мы можем ссылаться на нашу домашнюю страницу при помощи создания следующей ссылки внутри какого-либо шаблона:
              
 
 
              <a href="{% url 'index' %}">Home</a>.
              
 
 
              
-
              Примечание: Мы могли бы, конечно, жестко указать прямую ссылку (то есть, <a href="/catalog/">Home</a>), но тогда, если мы изменим адрес нашей домашней страницы (например на /catalog/index), то данные ссылки перестанут корректно работать. Применение "обратного" url-преобразования более гибкий и эффективный подход!
              
+
              Примечание: Мы могли бы, конечно, жёстко указать прямую ссылку (то есть, <a href="/catalog/">Home</a>), но тогда, если мы изменим адрес нашей домашней страницы (например на /catalog/index), то данные ссылки перестанут корректно работать. Применение "обратного" url-преобразования более гибкий и эффективный подход!
              
 
              
 
 
              Отображения (на основе функций)
              
 
-
              Отображение является функцией, которая обрабатывает HTTP-запрос, получает данные из базы данных (при необходимости), которые применяются для генерации страницы HTML. Затем функция отображения возвращает сгенерированную страницу пользователю в виде HTTP-ответа. В нашем случае, индексная функция демонстрирует этот процесс — она получает информацию о количестве записей Book, BookInstance, доступности BookInstance, а также записи Author из базы данных, затем передает эти записи в шаблон страницы, генерирует страницу и передает ее пользователю (клиенту пользователя, например браузеру).
              
+
              Отображение является функцией, которая обрабатывает HTTP-запрос, получает данные из базы данных (при необходимости), которые применяются для генерации страницы HTML. Затем функция отображения возвращает сгенерированную страницу пользователю в виде HTTP-ответа. В нашем случае, индексная функция демонстрирует этот процесс — она получает информацию о количестве записей Book, BookInstance, доступности BookInstance, а также записи Author из базы данных, затем передаёт эти записи в шаблон страницы, генерирует страницу и передаёт её пользователю (клиенту пользователя, например браузеру).
              
 
 
              Откройте catalog/views.py и отметьте для себя, что данный файл уже импортирует функцию render() - функцию, которая генерирует HTML-файлы при помощи шаблонов страниц и соответствующих данных. 
              
 
@@ -132,7 +132,7 @@ def index(request):
     num_instances=BookInstance.objects.all().count()
     # Доступные книги (статус = 'a')
     num_instances_available=BookInstance.objects.filter(status__exact='a').count()
-    num_authors=Author.objects.count()  # Метод 'all()' применен по умолчанию.
+    num_authors=Author.objects.count()  # Метод 'all()' применён по умолчанию.
 
     # Отрисовка HTML-шаблона index.html с данными внутри
     # переменной контекста context
@@ -144,13 +144,13 @@ def index(request):
 
 
              Первая часть функции отображения получает количество записей при помощи вызова функции objects.all() у атрибута objects, доступного для всех классов моделей. Похожим образом мы получаем список объектов BookInstance, которые имеют статус 'a' (Доступно). Вы можете найти дополнительную информацию о работе с моделями в предыдущей части руководства (Руководство часть 3: Применение моделей > Поиск записей).
              
 
-
              В конце функции index вызывается функция  render(), которая, в качестве ответа, создает и возвращает страницу HTML  (эта функция "оборачивает" вызовы нескольких функций, тем самым существенно упрощая процесс разработки). В качестве параметров ей передаются объект request  (типа HttpRequest), шаблон HTML-страницы с метками (placeholders), которые будут замещены данными,  а также переменной context (словарь Python, который содержит данные, которые и будут замещать метки в шаблоне). 
              
+
              В конце функции index вызывается функция  render(), которая, в качестве ответа, создаёт и возвращает страницу HTML  (эта функция "оборачивает" вызовы нескольких функций, тем самым существенно упрощая процесс разработки). В качестве параметров ей передаются объект request  (типа HttpRequest), шаблон HTML-страницы с метками (placeholders), которые будут замещены данными,  а также переменной context (словарь Python, который содержит данные, которые и будут замещать метки в шаблоне). 
              
 
 
              В следующем разделе мы более подробно поговорим о шаблонах и переменной контекста. Давайте создадим наш шаблон, чтобы показать уже что-нибудь пользователю!
              
 
 
              Шаблон
              
 
-
              Шаблон это текстовый файл, который определяет структуру и расположение данных в файле, кроме того, в нем размещают специальные метки (placeholders), которые используются для показа реального содержимого, то есть данных. По умолчанию Django ищет файлы шаблонов в директории с именем 'templates' внутри вашего приложения. Например, внутри индексной функции отображения, которую мы только что создали, вызов render() будет пытаться найти файл /locallibrary/catalog/templates/index.html и в случае неудачи сгенерирует ошибку о том, что файл не найден. Вы можете увидеть данную ошибку, если вы сохраните предыдущие изменения, затем перейдете в браузер и наберете в адресной строке 127.0.0.1:8000. В результате, в окно браузера будет выведено сообщение об ошибке "TemplateDoesNotExist at /catalog/" и некоторая другая информация.
              
+
              Шаблон это текстовый файл, который определяет структуру и расположение данных в файле, кроме того, в нем размещают специальные метки (placeholders), которые используются для показа реального содержимого, то есть данных. По умолчанию Django ищет файлы шаблонов в директории с именем 'templates' внутри вашего приложения. Например, внутри индексной функции отображения, которую мы только что создали, вызов render() будет пытаться найти файл /locallibrary/catalog/templates/index.html и в случае неудачи сгенерирует ошибку о том, что файл не найден. Вы можете увидеть данную ошибку, если вы сохраните предыдущие изменения, затем перейдёте в браузер и наберёте в адресной строке 127.0.0.1:8000. В результате, в окно браузера будет выведено сообщение об ошибке "TemplateDoesNotExist at /catalog/" и некоторая другая информация.
              
 
 
              
 
              Примечание: На самом деле, в зависимости от настроек проекта, Django просматривает несколько мест в поисках шаблона (поиск в директории приложения осуществляется по умолчанию!). Вы можете найти больше информации о шаблонах и форматах, которые они поддерживают, перейдя по ссылке Шаблоны (Django docs).
              
@@ -278,7 +278,7 @@ def index(request):
 
              Примечание: Переменные шаблона заключаются в двойные фигурные скобки (\{{ num_books }}) , а тэги шаблона (функции шаблона), помещаются в одинарные фигурные скобки со знаками процента ({% extends "base_generic.html" %}).
              
 
              
 
-
              Важно отметить, что данные переменные имеют имена, соответствующие именам передаваемых ключей из словаря переменной context, которая, в свою очередь, передается из отображения, во время вызова функции render() (смотри ниже). При отрисовке шаблона, вместо этих ключей будут подставлены, соответствующие им, значения.  
              
+
              Важно отметить, что данные переменные имеют имена, соответствующие именам передаваемых ключей из словаря переменной context, которая, в свою очередь, передаётся из отображения, во время вызова функции render() (смотри ниже). При отрисовке шаблона, вместо этих ключей будут подставлены, соответствующие им, значения.  
              
 
 
              return render(
     request,
@@ -288,7 +288,7 @@ def index(request):
 
 
              Ссылка на статические файлы их шаблонов
              
 
-
              Любой ваш проект с большой вероятностью будет использовать статические ресурсы, включая JavaScript, CSS и изображения. В связи с тем, что расположение этих файлов может быть неизвестно (или может измениться), Django позволяет вам в шаблоне указать относительное расположение данных файлов при помощи глобального значения STATIC_URL (по умолчанию, значение параметра STATIC_URL установлено в '/static/',  но вы можете выбрать любое другое значение, указав, например, сетевой ресурс, или что-то еще).
              
+
              Любой ваш проект с большой вероятностью будет использовать статические ресурсы, включая JavaScript, CSS и изображения. В связи с тем, что расположение этих файлов может быть неизвестно (или может измениться), Django позволяет вам в шаблоне указать относительное расположение данных файлов при помощи глобального значения STATIC_URL (по умолчанию, значение параметра STATIC_URL установлено в '/static/',  но вы можете выбрать любое другое значение, указав, например, сетевой ресурс, или что-то ещё).
              
 
 
              Внутри шаблона вы  вызываете функцию (тэг) load, которая загружает статическую библиотеку "static" (как показано ниже). После того как статическая библиотека загружена, вы можете использовать тэг шаблона static, который указывает относительный путь URL к интересующему вас файлу.
              
 
@@ -303,7 +303,7 @@ def index(request):
 
              
 
 
              
-
              Примечание: Фрагменты выше указывают пути расположения файлов, но Django не использует их по умолчанию. В процессе разработки сервер использует значения, указанные в глобальном файле URL-преобразований (/locallibrary/locallibrary/urls.py), который мы создали в части создание скелета сайта. В дальнейшем, в продакшене, вам нужно будет уточнить параметры расположения статических файлов. Мы вернемся к этому позже.
              
+
              Примечание: Фрагменты выше указывают пути расположения файлов, но Django не использует их по умолчанию. В процессе разработки сервер использует значения, указанные в глобальном файле URL-преобразований (/locallibrary/locallibrary/urls.py), который мы создали в части создание скелета сайта. В дальнейшем, в продакшене, вам нужно будет уточнить параметры расположения статических файлов. Мы вернёмся к этому позже.
              
 
              
 
 
              Для получения более подробной информации о работе со статическими файлами  обратитесь к документации по ссылке Управление статическими файлами (Django docs).
              
@@ -315,7 +315,7 @@ def index(request):
 
              <li><a href="{% url 'index' %}">Home</a></li>
 
              
 
-
              Данный тэг с именем url(), ищет в файле urls.py связанное значение переменной, указанной в качестве ее параметра 'index', а затем возвращает URL, который вы можете использовать для ссылки на соответствующие ресурсы.
              
+
              Данный тэг с именем url(), ищет в файле urls.py связанное значение переменной, указанной в качестве её параметра 'index', а затем возвращает URL, который вы можете использовать для ссылки на соответствующие ресурсы.
              
 
 
              Как теперь все это выглядит?
              
 
@@ -333,7 +333,7 @@ def index(request):
 
 
                
  
              1. В главном файле шаблона (base_generic.html) есть блок title. Переопределите этот блок в индексном шаблоне (index.html) и задайте новый заголовок для этой страницы.
                2. 
- 
              2. Модифицируйте функцию отображения таким образом, чтобы получать из базы данных количество жанров и количество книг, которые содержат в своих заголовках какое-либо слово (без учета регистра), а затем передайте эти значения в шаблон.
                3. 
+ 
              3. Модифицируйте функцию отображения таким образом, чтобы получать из базы данных количество жанров и количество книг, которые содержат в своих заголовках какое-либо слово (без учёта регистра), а затем передайте эти значения в шаблон.
                4. 
 
              
 
 
                
@@ -341,9 +341,9 @@ def index(request):
 
 
                Итог
                
 
-
                Мы создали домашнюю страницу для нашего сайта — HTML страница, которая показывает количество некоторых записей из базы данных и содержит ссылки на другие "все-еще-будут-созданы" страницы. Кроме того, мы изучили большое количество базовой информации об url-преобразованиях, отображениях, запросах к базе данных, используя наши модели, передачу информации из отображений в шаблоны, кроме того, создание и расширение шаблонов.
                
+
                Мы создали домашнюю страницу для нашего сайта — HTML страница, которая показывает количество некоторых записей из базы данных и содержит ссылки на другие "все-ещё-будут-созданы" страницы. Кроме того, мы изучили большое количество базовой информации об url-преобразованиях, отображениях, запросах к базе данных, используя наши модели, передачу информации из отображений в шаблоны, кроме того, создание и расширение шаблонов.
                
 
-
                В  следующей части, при помощи наших новых знаний, мы  создадим еще четыре страницы.
                
+
                В  следующей части, при помощи наших новых знаний, мы  создадим ещё четыре страницы.
                
 
 
                Смотрите также
                
 
diff --git a/files/ru/learn/server-side/django/index.html b/files/ru/learn/server-side/django/index.html
index 8993390384..76beccc18d 100644
--- a/files/ru/learn/server-side/django/index.html
+++ b/files/ru/learn/server-side/django/index.html
@@ -27,7 +27,7 @@ translation_of: Learn/Server-side/Django
 
 
                
  
                Введение в Django
                
- 
                В этой первой статье по Django мы ответим на вопрос "Что такое Django?" и сделаем обзор того, что делает этот веб-фреймворк особенным. Мы кратко рассмотрим основные особенности, включая некоторый продвинутый функционал, на котором у нас не будет возможности подробно остановиться в этом модуле. Мы также покажем вам некоторые из основных строительных блоков приложения Django, чтобы дать вам представление о том, что он может сделать, прежде чем вы перейдете к установке и начнете экспериментировать.
                
+ 
                В этой первой статье по Django мы ответим на вопрос "Что такое Django?" и сделаем обзор того, что делает этот веб-фреймворк особенным. Мы кратко рассмотрим основные особенности, включая некоторый продвинутый функционал, на котором у нас не будет возможности подробно остановиться в этом модуле. Мы также покажем вам некоторые из основных строительных блоков приложения Django, чтобы дать вам представление о том, что он может сделать, прежде чем вы перейдёте к установке и начнёте экспериментировать.
                
  
                Установка среды разработки Django
                
  
                Теперь, когда вы знаете, что такое Django, мы покажем вам, как установить и протестировать среду разработки Django для Windows, Linux (Ubuntu) и Mac OS X — какую бы операционную систему вы не использовали, эта статья должна дать вам понимание того, что вам потребуется, чтобы начать разработку Django-приложений .
                
  
                Учебник Django: Веб-сайт местной библиотеки
                
@@ -41,19 +41,19 @@ translation_of: Learn/Server-side/Django
  
                Учебник Django часть 5: Создание главной страницы 
                
  
                Теперь мы готовы добавить код для отображения нашей первой полной страницы — главной страницы сайта местной библиотеки, которая показывает, сколько записей у нас есть для каждого типа модели, и предоставляет ссылки на боковых панелях на другие наши страницы. По пути мы получим практический опыт написания основных карт и представлений URL, получения записей из базы данных и использования шаблонов.
                
  
                Учебник Django часть 6: Общий список и подробные представления
                
- 
                Это руководство расширяет наш сайт местной библиотеки, добавляя список и подробные страницы для книг и авторов. Здесь мы узнаем об общих представлениях на основе классов и покажем, как они могут уменьшить количество кода, который вы должны писать для случаев общего использования. Мы также перейдем к обработке URL-адресов более подробно, покажем, как выполнить базовое сопоставление шаблонов.
                
+ 
                Это руководство расширяет наш сайт местной библиотеки, добавляя список и подробные страницы для книг и авторов. Здесь мы узнаем об общих представлениях на основе классов и покажем, как они могут уменьшить количество кода, который вы должны писать для случаев общего использования. Мы также перейдём к обработке URL-адресов более подробно, покажем, как выполнить базовое сопоставление шаблонов.
                
  
                Учебник Django часть 7:  Структура сессий
                
  
                Это руководство расширяет наш сайт местной библиотеки, добавляя счётчик посещений домашней страницы. Это относительно простой пример, но он показывает, как вы можете использовать структуру сессии, чтобы обеспечить постоянное поведение анонимных пользователей на ваших собственных сайтах.
                
  
                Учебник Django часть 8: Авторизация и права пользователей
                
- 
                В этом уроке мы покажем вам, как разрешить пользователям входить на ваш сайт со своими учетными записями и как управлять тем, что они могут делать и видеть на основе того, зарегистрированы ли они или нет, и их допусках. В рамках этой демонстрации мы расширим сайт местной библиотеки, добавив страницы входа и выхода, а также страницы пользователей и персональные страницы для просмотра книг, которые были взяты на руки.
                
+ 
                В этом уроке мы покажем вам, как разрешить пользователям входить на ваш сайт со своими учётными записями и как управлять тем, что они могут делать и видеть на основе того, зарегистрированы ли они или нет, и их допусках. В рамках этой демонстрации мы расширим сайт местной библиотеки, добавив страницы входа и выхода, а также страницы пользователей и персональные страницы для просмотра книг, которые были взяты на руки.
                
  
                Учебник Django часть 9: Работа с формами
                
  
                В этом уроке мы покажем вам, как работать с HTML Forms в Django, и  в частности, самый простой способ писать формы для создания, обновления и удаления экземпляров модели. В рамках этой демонстрации мы расширим сайт местной библиотеки, чтобы библиотекари могли вносить новые книги, создавать, обновлять и удалять авторов, используя наши собственные формы (а не использовать приложение администратора).
                
  
                Учебник Django часть10: Тестирование веб-приложения Django
                
- 
                По мере роста веб-сайтов становится сложнее проверять вручную — требуется больше проверок, поскольку взаимодействие между компонентами усложняется, небольшое изменение в одной области может потребовать дополнительные тесты для проверки его влияния на другие области. Один из способов смягчить эти проблемы - написать автоматизированные тесты, которые можно легко и надежно запускать каждый раз, когда вы вносите изменения. В этом руководстве показано, как автоматизировать модульное тестирование вашего сайта с помощью тестовой среды Django.
                
+ 
                По мере роста веб-сайтов становится сложнее проверять вручную — требуется больше проверок, поскольку взаимодействие между компонентами усложняется, небольшое изменение в одной области может потребовать дополнительные тесты для проверки его влияния на другие области. Один из способов смягчить эти проблемы - написать автоматизированные тесты, которые можно легко и надёжно запускать каждый раз, когда вы вносите изменения. В этом руководстве показано, как автоматизировать модульное тестирование вашего сайта с помощью тестовой среды Django.
                
  
                Учебник Django часть 11: Деплой Django на продакшн
                
- 
                Теперь вы создали (и протестировали) удивительный сайт местной библиотеки, вам захочется установить его на общедоступный веб-сервер, чтобы к нему мог получить доступ персонал библиотеки и пользователи Интернета. В этой статье представлен обзор того, как вы можете найти хост для развертывания вашего веб-сайта и что вам нужно сделать, чтобы подготовить ваш сайт к выпуску.
                
+ 
                Теперь вы создали (и протестировали) удивительный сайт местной библиотеки, вам захочется установить его на общедоступный веб-сервер, чтобы к нему мог получить доступ персонал библиотеки и пользователи Интернета. В этой статье представлен обзор того, как вы можете найти хост для развёртывания вашего веб-сайта и что вам нужно сделать, чтобы подготовить ваш сайт к выпуску.
                
  
                Безопасность веб-приложений Django
                
- 
                Защита пользовательских данных является неотъемлемой частью любой разработки сайта. Ранее мы объяснили некоторые из наиболее распространенных угроз безопасности в статье Web security — Эта статья дает практическую демонстрацию того, как встроенные средства защиты Django справляются с такими угрозами.
                
+ 
                Защита пользовательских данных является неотъемлемой частью любой разработки сайта. Ранее мы объяснили некоторые из наиболее распространённых угроз безопасности в статье Web security — Эта статья даёт практическую демонстрацию того, как встроенные средства защиты Django справляются с такими угрозами.
                
 
                
 
 
                Задания
                
diff --git a/files/ru/learn/server-side/django/introduction/index.html b/files/ru/learn/server-side/django/introduction/index.html
index 29f854b94c..5bb12b1323 100644
--- a/files/ru/learn/server-side/django/introduction/index.html
+++ b/files/ru/learn/server-side/django/introduction/index.html
@@ -78,9 +78,9 @@ original_slug: Learn/Server-side/Django/Введение
 
 
                Веб-фреймворки часто можно поделить на "гибкие" и "негибкие".
                
 
-
                Негибкие - это те, у которых есть "правильный путь" для решения какой-либо конкретной задачи. Они часто поддерживают быстрое развёртывание в определенной области (решение проблем определенного типа), потому что правильный способ сделать что-либо обычно хорошо понимается и хорошо документируется. Однако они могут быть менее гибкими при решении проблем за пределами их основной сферы и, как правило, предлагают меньше вариантов того, какие компоненты и подходы они могут использовать.
                
+
                Негибкие - это те, у которых есть "правильный путь" для решения какой-либо конкретной задачи. Они часто поддерживают быстрое развёртывание в определённой области (решение проблем определённого типа), потому что правильный способ сделать что-либо обычно хорошо понимается и хорошо документируется. Однако они могут быть менее гибкими при решении проблем за пределами их основной сферы и, как правило, предлагают меньше вариантов того, какие компоненты и подходы они могут использовать.
                
 
-
                Напротив, у гибких фреймворков гораздо меньше ограничений на лучший способ склеивания компонентов для достижения цели или даже того, какие компоненты следует использовать. Они облегчают разработчикам использование наиболее подходящих инструментов для выполнения конкретной задачи, хотя и за счет того, что вам нужно самим найти эти компоненты.
                
+
                Напротив, у гибких фреймворков гораздо меньше ограничений на лучший способ склеивания компонентов для достижения цели или даже того, какие компоненты следует использовать. Они облегчают разработчикам использование наиболее подходящих инструментов для выполнения конкретной задачи, хотя и за счёт того, что вам нужно самим найти эти компоненты.
                
 
 
                Django «умеренно гибкий» и, следовательно, обеспечивает «лучшее из обоих миров». Он предоставляет набор компонентов для обработки большинства задач веб-разработки и один (или два) предпочтительных способа их использования. Однако такая архитектура Django означает, что вы обычно можете выбирать из нескольких различных опций или при необходимости добавлять поддержку для совершенно новых.
                
 
@@ -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
 
@@ -243,7 +243,7 @@ def index(request):
 
 
                  
  
                • Формы: HTML-формы используются для сбора пользовательских данных для обработки на сервере. Django упрощает создание, проверку и обработку формы.
                  • 
- 
                • Аутентификация пользователя и разрешения: Django включает надежную систему аутентификации и авторизации пользователей, которая была построена с учетом безопасности.
                  • 
+ 
                • Аутентификация пользователя и разрешения: Django включает надёжную систему аутентификации и авторизации пользователей, которая была построена с учётом безопасности.
                  • 
  
                • Кэширование: Создание динамического контента намного более интенсивно (и медленнее), чем обслуживание статического содержимого. Django обеспечивает гибкое кэширование, чтобы вы могли хранить всю или часть отображаемой страницы, для того, чтобы она не вызывалась повторно, за исключением случаев, когда это необходимо.
                  • 
  
                • Админ-панель: Административная панель в Django включена по умолчанию при создании приложения с использованием основного каркаса. Это упрощает управление админкой администраторам сайта для создания, редактирования и просмотра любых данных на вашем сайте.
                  • 
  
                • Сериализация данных (преобразование в последовательную форму): Django упрощает сериализацию и обслуживание ваших данных в таких форматах как XML или JSON. Это может быть полезно при создании веб-сервисов (веб-сайтов, которые исключительно служат для использования данных другими приложениями или сайтами и сами ничего не отображают) или при создании веб-сайта, на котором клиентский код обрабатывает весь рендеринг данных.
                  • 
@@ -251,7 +251,7 @@ def index(request):
 
 
                  Резюме
                  
 
-
                  Поздравляем, вы завершили первый шаг в своем путешествии по Django! Теперь вы должны понимать основные преимущества Django, немного его истории, и примерно как может выглядеть каждая из основных частей приложения Django. Вы должны также изучить несколько вещей о языке программирования Python, включая синтаксис списков, функций и классов.
                  
+
                  Поздравляем, вы завершили первый шаг в своём путешествии по Django! Теперь вы должны понимать основные преимущества Django, немного его истории, и примерно как может выглядеть каждая из основных частей приложения Django. Вы должны также изучить несколько вещей о языке программирования Python, включая синтаксис списков, функций и классов.
                  
 
 
                  Вы уже видели код на Django выше, но в отличие от клиентского кода вам нужно настроить среду разработки для её запуска. Это наш следующий шаг.
                  
 
diff --git a/files/ru/learn/server-side/django/models/index.html b/files/ru/learn/server-side/django/models/index.html
index 4aeb0d64bc..8fa353116b 100644
--- a/files/ru/learn/server-side/django/models/index.html
+++ b/files/ru/learn/server-side/django/models/index.html
@@ -45,14 +45,14 @@ translation_of: Learn/Server-side/Django/Models
 
 
                  Как только мы определились с нашими моделями и полями, нам нужно подумать об отношениях. Django позволяет вам определять отношения, как один к одному (OneToOneField), один ко многим (ForeignKey) и многие ко многим (ManyToManyField).
                  
 
-
                  Диаграмма ассоциации UML, приведённая ниже показывает модели, которые мы определили в этом случае (в виде блоков). Как и выше, мы создали модели для книги (общие сведения о книге), экземпляр книги (статус конкретных физических копий книги, доступных в системе) и автора.Мы также решили создать модель для жанра, чтобы можно было создавать / выбирать значения через интерфейс администратора. Мы решили не иметь модель для BookInstance: status - мы жестко закодировали значения (LOAN_STATUS), потому что мы не ожидаем их изменения. В каждом из полей вы можете увидеть имя модели, имена и типы полей, а также методы и их типы возврата.
                  
+
                  Диаграмма ассоциации UML, приведённая ниже показывает модели, которые мы определили в этом случае (в виде блоков). Как и выше, мы создали модели для книги (общие сведения о книге), экземпляр книги (статус конкретных физических копий книги, доступных в системе) и автора.Мы также решили создать модель для жанра, чтобы можно было создавать / выбирать значения через интерфейс администратора. Мы решили не иметь модель для BookInstance: status - мы жёстко закодировали значения (LOAN_STATUS), потому что мы не ожидаем их изменения. В каждом из полей вы можете увидеть имя модели, имена и типы полей, а также методы и их типы возврата.
                  
 
 
                  На диаграмме также показаны зависимости между моделями, включая их множители. Множители представляют собой числа на диаграмме, показывающие минимум и максимум единиц каждой модели, которые могут присутствовать в этой связи. Например, соединительная линия между ящиками показывает, что книга и жанр связаны между собой. Цифры, близкие к модели жанра, показывают, что у книги может быть один или несколько жанров (сколько угодно), а числа на другом конце строки рядом с моделью книги показывают, что у жанра может быть ноль или более связанных книг.
                  
 
 
                  LocalLibrary Model UML - v3
                  
 
 
                  
-
                  Примечание. В следующем разделе приведен базовый пример, поясняющий, как модели определяются и используются. Когда вы его прочитаете, подумайте, как мы построим каждую из моделей на диаграмме выше.
                  
+
                  Примечание. В следующем разделе приведён базовый пример, поясняющий, как модели определяются и используются. Когда вы его прочитаете, подумайте, как мы построим каждую из моделей на диаграмме выше.
                  
 
                  
 
 
                  Модель для начинающих
                  
@@ -61,7 +61,7 @@ translation_of: Learn/Server-side/Django/Models
 
 
                  Определение модели
                  
 
-
                  Модели обычно определяются в приложении models.py. Они реализуются как подклассы django.db.models.Model, и могут включать поля, методы и метаданные. В приведенном ниже фрагменте кода показана «типичная» модель, названная MyModelName:
                  
+
                  Модели обычно определяются в приложении models.py. Они реализуются как подклассы django.db.models.Model, и могут включать поля, методы и метаданные. В приведённом ниже фрагменте кода показана «типичная» модель, названная MyModelName:
                  
 
 
                  from django.db import models
 
@@ -95,18 +95,18 @@ class MyModelName(models.Model):
 
 
                  Поля
                  
 
-
                  Модель может иметь произвольное количество полей любого типа - каждый представляет столбец данных, который мы хотим сохранить в одной из наших таблиц базы данных. Каждая запись (строка) базы данных будет состоять из одного значения каждого поля. Давайте рассмотрим приведенный выше пример:
                  
+
                  Модель может иметь произвольное количество полей любого типа - каждый представляет столбец данных, который мы хотим сохранить в одной из наших таблиц базы данных. Каждая запись (строка) базы данных будет состоять из одного значения каждого поля. Давайте рассмотрим приведённый выше пример:
                  
 
 
                  my_field_name = models.CharField(max_length=20, help_text="Enter field documentation")
                  
 
-
                  Наш вышеприведенный пример имеет одно поле, называемое my_field_name, типа models.CharField — что означает, что это поле будет содержать строки буквенно-цифровых символов. Типы полей назначаются с использованием определенных классов, которые определяют тип записи, которая используется для хранения данных в базе данных, а также критерии проверки, которые должны использоваться, когда значения получены из формы HTML (то есть, что составляет действительное значение). Типы полей также могут принимать аргументы, которые дополнительно определяют, как поле хранится или может использоваться. В этом случае мы даем нашему полю два аргумента:
                  
+
                  Наш вышеприведённый пример имеет одно поле, называемое my_field_name, типа models.CharField — что означает, что это поле будет содержать строки буквенно-цифровых символов. Типы полей назначаются с использованием определённых классов, которые определяют тип записи, которая используется для хранения данных в базе данных, а также критерии проверки, которые должны использоваться, когда значения получены из формы HTML (то есть, что составляет действительное значение). Типы полей также могут принимать аргументы, которые дополнительно определяют, как поле хранится или может использоваться. В этом случае мы даём нашему полю два аргумента:
                  
 
 
                    
  
                  • max_length=20 — Указывает, что максимальная длина значения в этом поле составляет 20 символов.
                    • 
  
                  • help_text="Enter field documentation" — предоставляет текстовую метку для отображения, чтобы помочь пользователям узнать, какое значение необходимо предоставить, когда это значение должно быть введено пользователем через HTML-форму.
                    • 
 
                  
 
-
                  Имя поля используется для обращения к нему в запросах и шаблонах. В полях также есть метка, которая задается как аргумент (verbose_name), либо выводится путем заглавной буквы первой буквы имени переменной поля и замены любых символов подчеркивания пробелом (например, my_field_name будет иметь метку по умолчанию My field name).
                  
+
                  Имя поля используется для обращения к нему в запросах и шаблонах. В полях также есть метка, которая задаётся как аргумент (verbose_name), либо выводится путём заглавной буквы первой буквы имени переменной поля и замены любых символов подчёркивания пробелом (например, my_field_name будет иметь метку по умолчанию My field name).
                  
 
 
                  Порядок, в котором объявляются поля, будет влиять на их порядок по умолчанию, если модель отображается в форме (например, на сайте администратора), хотя это может быть переопределено.
                  
 
@@ -117,11 +117,11 @@ class MyModelName(models.Model):
 
                    
  
                  • help_text: Предоставляет текстовую метку для HTML-форм (например, на сайте администратора), как описано выше.
                    • 
  
                  • verbose_name: Удобочитаемое имя для поля, используемого в поле метки. Если не указано, Django выведет по умолчанию подробное название от имени поля.
                    • 
- 
                  • default: Значение по умолчанию для поля. Это может быть значение или вызываемый объект, и в этом случае объект будет вызываться каждый раз, когда создается новая запись.
                    • 
+ 
                  • default: Значение по умолчанию для поля. Это может быть значение или вызываемый объект, и в этом случае объект будет вызываться каждый раз, когда создаётся новая запись.
                    • 
  
                  • null: Если True, Django будет хранить пустые значения как NULL в базе данных для полей, где это уместно (CharField вместо этого сохранит пустую строку). По умолчанию используется значение False.
                    • 
  
                  • blank: Если True, поле может быть пустым в ваших формах. По умолчанию используется значение False, что означает, что проверка формы Django заставит вас ввести значение. Это часто используется с null = True, потому что если вы хотите разрешить пустые значения, вы также хотите, чтобы база данных могла представлять их соответствующим образом.
                    • 
  
                  • choices: Группа вариантов для этого поля. Если это предусмотрено, по умолчанию соответствующий виджет формы будет полем выбора с этими вариантами вместо стандартного текстового поля.
                    • 
- 
                  • primary_key: Если True, задает текущее поле в качестве первичного ключа для модели (первичный ключ - это специальный столбец базы данных, предназначенный для однозначной идентификации всех разных записей таблицы). Если в качестве первичного ключа не указано поле, Django автоматически добавит для этой цели поле.
                    • 
+ 
                  • primary_key: Если True, задаёт текущее поле в качестве первичного ключа для модели (первичный ключ - это специальный столбец базы данных, предназначенный для однозначной идентификации всех разных записей таблицы). Если в качестве первичного ключа не указано поле, Django автоматически добавит для этой цели поле.
                    • 
 
                  
 
 
                  Есть много других вариантов - вы можете просмотреть full list of field options here.
                  
@@ -133,7 +133,7 @@ class MyModelName(models.Model):
 
                    
  
                  • CharField Используется для определения строк фиксированной длины от короткой до средней. Вы должны указать max_length для хранения данных.
                    • 
  
                  • TextField используется для больших строк произвольной длины. Вы можете указать max_length для поля, но это используется только тогда, когда поле отображается в формах (оно не применяется на уровне базы данных).
                    • 
- 
                  • IntegerField это поле для хранения значений (целого числа) и для проверки введенных значений в виде целых чисел в формах.
                    • 
+ 
                  • IntegerField это поле для хранения значений (целого числа) и для проверки введённых значений в виде целых чисел в формах.
                    • 
  
                  • DateField и DateTimeField используются для хранения / представления дат и информации о дате / времени (как Python datetime.date и datetime.datetime, соответственно). Эти поля могут дополнительно объявлять (взаимоисключающие) параметры auto_now=True (для установки поля на текущую дату каждый раз, когда модель сохраняется), auto_now_add (только для установки даты, когда модель была впервые создана) и по умолчанию (чтобы установить дату по умолчанию, которую пользователь может переустановить).
                    • 
  
                  • EmailField используется для хранения и проверки адресов электронной почты.
                    • 
  
                  • FileField и ImageField используются для загрузки файлов и изображений соответственно ( ImageField просто добавляет дополнительную проверку, что загруженный файл является изображением). Они имеют параметры для определения того, как и где хранятся загруженные файлы.
                    • 
@@ -160,7 +160,7 @@ class MyModelName(models.Model):
 
 
                    Книги будут отсортированы по алфавиту по названию, от A-Z, а затем по дате публикации внутри каждого названия, от самого нового до самого старого.
                    
 
-
                    Другим распространенным атрибутом является verbose_name, подробное имя для класса в единственной и множественной форме:
                    
+
                    Другим распространённым атрибутом является verbose_name, подробное имя для класса в единственной и множественной форме:
                    
 
 
                    verbose_name = "BetterName"
                    
 
@@ -173,7 +173,7 @@ class MyModelName(models.Model):
 
                    def __str__(self):
     return self.field_name
                    
 
-
                    Другим распространенным методом включения в модели Django является get_absolute_url (), который возвращает URL-адрес для отображения отдельных записей модели на веб-сайте (если вы определяете этот метод, тогда Django автоматически добавит кнопку «Просмотр на сайте» на экранах редактирования записей модели на сайте администратора). Типичный шаблон для get_absolute_url () показан ниже.
                    
+
                    Другим распространённым методом включения в модели Django является get_absolute_url (), который возвращает URL-адрес для отображения отдельных записей модели на веб-сайте (если вы определяете этот метод, тогда Django автоматически добавит кнопку «Просмотр на сайте» на экранах редактирования записей модели на сайте администратора). Типичный шаблон для get_absolute_url () показан ниже.
                    
 
 
                    def get_absolute_url(self):
     """
@@ -183,9 +183,9 @@ 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-адрес, просмотр и шаблон!
                    
+
                    Конечно, для выполнения этой работы вам все равно придётся писать сопоставление URL-адрес, просмотр и шаблон!
                    
 
                    
 
 
                    Вы также можете определить любые другие методы, которые вам нравятся, и вызывать их из вашего кода или шаблонов (при условии, что они не принимают никаких параметров).
                    
@@ -209,7 +209,7 @@ a_record.save()
 
                    Примечание. Если вы не указали какое-либо поле в качестве primary_key, новая запись будет выдаваться автоматически, с идентификатором имени поля. Вы можете запросить это поле после сохранения указанной выше записи, и оно будет иметь значение 1.
                    
 
              
 
-
              Вы можете получить доступ к полям в этой новой записи с использованием синтаксиса точек и изменить значения. Вы должны вызвать save (), чтобы сохранить измененные значения в базе данных.
              
+
              Вы можете получить доступ к полям в этой новой записи с использованием синтаксиса точек и изменить значения. Вы должны вызвать save (), чтобы сохранить изменённые значения в базе данных.
              # Access model field values using Python attributes.
 print(a_record.id) #should return 1 for the first record.
@@ -221,10 +221,10 @@ a_record.save()
              Поиск записей
              
 
-
              Вы можете искать записи, соответствующие определенным критериям, используя атрибут объектов модели (предоставляемый базовым классом).
              
+
              Вы можете искать записи, соответствующие определённым критериям, используя атрибут объектов модели (предоставляемый базовым классом).
              
-
              Примечание. Объяснение того, как искать записи, используя «абстрактную» модель и имена полей, может быть немного запутанным. В приведенном ниже обсуждении мы будем ссылаться на модель книги с полями названия и жанра, где жанр также является моделью с единственным именем в поле.
              
+
              Примечание. Объяснение того, как искать записи, используя «абстрактную» модель и имена полей, может быть немного запутанным. В приведённом ниже обсуждении мы будем ссылаться на модель книги с полями названия и жанра, где жанр также является моделью с единственным именем в поле.
              
 
              Мы можем получить все записи для модели как объект QuerySet,  используя objects.all(). QuerySet - это итерируемый объект, означающий, что он содержит несколько объектов, которые мы можем перебирать / прокручивать.
              
@@ -238,22 +238,22 @@ a_record.save()
 number_wild_books = Book.objects.filter(title__contains='wild').count()
 
 
-
              Соответствующие поля и тип соответствия определяются в имени параметра фильтра, используя формат: field_name__match_type (обратите внимание на двойное подчеркивание между заголовком выше). Выше мы фильтруем заголовок с учетом регистра. Есть много других типов совпадений, которые вы можете сделать: icontains (без учета регистра), iexact (точное совпадение без учета регистра), exact (точное совпадение с учетом регистра ) и in, gt (больше), startswith и т. д смотреть полный список (Django Docs, [EN]).
              
+
              Соответствующие поля и тип соответствия определяются в имени параметра фильтра, используя формат: field_name__match_type (обратите внимание на двойное подчёркивание между заголовком выше). Выше мы фильтруем заголовок с учётом регистра. Есть много других типов совпадений, которые вы можете сделать: icontains (без учёта регистра), iexact (точное совпадение без учёта регистра), exact (точное совпадение с учётом регистра ) и in, gt (больше), startswith и т. д смотреть полный список (Django Docs, [EN]).
              
 
-
              В некоторых случаях вам нужно будет фильтровать поле, которое определяет отношение «один ко многим» к другой модели (например, ForeignKey). В этом случае вы можете «индексировать» поля в связанной модели с дополнительными двойными подчеркиваниями. Так, например, чтобы фильтровать книги с определенным жанровым рисунком, вам нужно будет указывать имя в поле жанра, как показано ниже:
              
+
              В некоторых случаях вам нужно будет фильтровать поле, которое определяет отношение «один ко многим» к другой модели (например, ForeignKey). В этом случае вы можете «индексировать» поля в связанной модели с дополнительными двойными подчёркиваниями. Так, например, чтобы фильтровать книги с определённым жанровым рисунком, вам нужно будет указывать имя в поле жанра, как показано ниже:
              books_containing_genre = Book.objects.filter(genre__name__icontains='fiction')  # Will match on: Fiction, Science fiction, non-fiction etc.
 
              
-
              Примечание: Вы можете использовать символы подчеркивания (__) для навигации по многим уровням отношений (ForeignKey / ManyToManyField) по своему усмотрению. Например, книга, имеющая разные типы, определяемая с использованием дополнительной связи «обложка», может иметь имя параметра: type__cover__name__exact = 'hard'.
              
+
              Примечание: Вы можете использовать символы подчёркивания (__) для навигации по многим уровням отношений (ForeignKey / ManyToManyField) по своему усмотрению. Например, книга, имеющая разные типы, определяемая с использованием дополнительной связи «обложка», может иметь имя параметра: type__cover__name__exact = 'hard'.
              
 
              Существует гораздо больше возможностей для запросов, включая обратные поиски от связанных моделей, цепочки фильтров, возврат меньшего набора значений и т. д. Для получения дополнительной информации см. Making queries (Django Docs, [EN]).
              Определение моделей LocalLibrary
              
 
-
              В этом разделе мы начнем определять модели для библиотеки. Откройте models.py (в / locallibrary / catalog /). Шаблон в верхней части страницы импортирует модуль моделей, который содержит базовый класс модели models.Model, от которого наследуются наши модели.
              
+
              В этом разделе мы начнём определять модели для библиотеки. Откройте models.py (в / locallibrary / catalog /). Шаблон в верхней части страницы импортирует модуль моделей, который содержит базовый класс модели models.Model, от которого наследуются наши модели.
              from django.db import models
 
@@ -261,7 +261,7 @@ number_wild_books = Book.objects.filter(title__contains='wild').count()
 
 
              Модель жанра
              
 
-
              Скопируйте приведенный ниже код модели Genre и вставьте его в нижнюю часть вашего файла models.py. Эта модель используется для хранения информации о категории книг - например, будь то художественная или документальная, роман или военно-историческая и т. д. Как уже упоминалось выше, мы создали жанр как модель, а не как свободный текст или список выбора, чтобы возможные значения могли управляться через базу данных, а не были закодированными.
              
+
              Скопируйте приведённый ниже код модели Genre и вставьте его в нижнюю часть вашего файла models.py. Эта модель используется для хранения информации о категории книг - например, будь то художественная или документальная, роман или военно-историческая и т. д. Как уже упоминалось выше, мы создали жанр как модель, а не как свободный текст или список выбора, чтобы возможные значения могли управляться через базу данных, а не были закодированными.
              
 
 
              class Genre(models.Model):
     """
@@ -275,11 +275,11 @@ number_wild_books = Book.objects.filter(title__contains='wild').count()
         """
         return self.name
              
 
-
              Модель имеет один CharField field (имя), которое используется для описания жанра (оно ограничено 200 символами и имеет некоторый help_text. В конце модели мы объявляем метод __str__(), который просто возвращает имя жанра, определенного конкретной записью. Verbose name не был определен, поэтому поле будет называться Name в формах.
              
+
              Модель имеет один CharField field (имя), которое используется для описания жанра (оно ограничено 200 символами и имеет некоторый help_text. В конце модели мы объявляем метод __str__(), который просто возвращает имя жанра, определённого конкретной записью. Verbose name не был определён, поэтому поле будет называться Name в формах.
              
 
 
              Модель книги
              
 
-
              Скопируйте модель книги ниже и снова вставьте ее в нижнюю часть файла. Модель книги представляет всю информацию о доступной книге в общем смысле, но не конкретный физический «экземпляр» или «копию» для временного использования. Модель использует CharField для представления названия книги и isbn (обратите внимание, как isbn указывает свой ярлык как «ISBN», используя первый неименованный параметр, поскольку в противном случае ярлык по умолчанию был бы «Isbn»). Модель использует TextField для summary, потому что этот текст, возможно, должен быть очень длинным.
              
+
              Скопируйте модель книги ниже и снова вставьте её в нижнюю часть файла. Модель книги представляет всю информацию о доступной книге в общем смысле, но не конкретный физический «экземпляр» или «копию» для временного использования. Модель использует CharField для представления названия книги и isbn (обратите внимание, как isbn указывает свой ярлык как «ISBN», используя первый неименованный параметр, поскольку в противном случае ярлык по умолчанию был бы «Isbn»). Модель использует TextField для summary, потому что этот текст, возможно, должен быть очень длинным.
              
 
 
              from django.urls import reverse #Used to generate URLs by reversing the URL patterns
 
@@ -313,13 +313,13 @@ class Book(models.Model):
 
 
              Жанр представляет из себя ManyToManyField, так что книга может иметь несколько жанров, а жанр может иметь много книг. Автор объявляется через ForeignKey, поэтому в каждой книге будет только один автор, но у автора может быть много книг (на практике книга может иметь несколько авторов, но не в такой реализации!)
              
 
-
              В обоих типах полей соответствующий класс модели объявляется как первый неименованный параметр, используя либо класс модели, либо строку, содержащую имя соответствующей модели. Вы должны использовать имя модели как строку, если связанный класс еще не был определен в этом файле до того, как он будет указан! Другими параметрами, представляющими интерес для поля автора, являются null=True, которое позволяет базе данных хранить значение Null , если автор не выбран, и on_delete = models. SET_NULL установит значение автора в Null, если связанная с автором запись будет удалена.
              
+
              В обоих типах полей соответствующий класс модели объявляется как первый неименованный параметр, используя либо класс модели, либо строку, содержащую имя соответствующей модели. Вы должны использовать имя модели как строку, если связанный класс ещё не был определён в этом файле до того, как он будет указан! Другими параметрами, представляющими интерес для поля автора, являются null=True, которое позволяет базе данных хранить значение Null , если автор не выбран, и on_delete = models. SET_NULL установит значение автора в Null, если связанная с автором запись будет удалена.
              
 
 
              Модель также определяет __str __ (), используя поле заголовка книги для представления книги. Окончательный метод get_absolute_url () возвращает URL-адрес, который можно использовать для доступа к подробной записи для этой модели (для этого нам нужно будет определить сопоставление URL-адресов, в котором содержится подробная информация о книге, и определить связанное представление и шаблон ).
              
 
 
              Модель BookInstance
              
 
-
              Затем скопируйте модель BookInstance (показано ниже) под другие модели. BookInstance представляет собой определенную копию книги, которую кто-то может брать взаймы, и включает информацию о том, доступна ли копия или в какой день она ожидается, «отпечаток» или сведения о версии, а также уникальный идентификатор книги в библиотеке. Теперь некоторые из полей и методов будут знакомы. Модель использует
              
+
              Затем скопируйте модель BookInstance (показано ниже) под другие модели. BookInstance представляет собой определённую копию книги, которую кто-то может брать взаймы, и включает информацию о том, доступна ли копия или в какой день она ожидается, «отпечаток» или сведения о версии, а также уникальный идентификатор книги в библиотеке. Теперь некоторые из полей и методов будут знакомы. Модель использует
              
 
 
                
  
              • ForeignKey для идентификации связанной книги (в каждой книге может быть много копий, но в копии может быть только одна книга).
                • 
@@ -361,7 +361,7 @@ class BookInstance(models.Model):
 
                  
  
                • UUIDField используется для поля id, чтобы установить его как primary_key для этой модели. Этот тип поля выделяет глобальное уникальное значение для каждого экземпляра (по одному для каждой книги, которую вы можете найти в библиотеке).
                  • 
  
                • DateField используется для данных due_back (при которых ожидается, что книга появится после заимствования или обслуживания). Это значение может быть blank или null (необходимо, когда книга доступна). Метаданные модели (Class Meta) используют это поле для упорядочивания записей, когда они возвращаются в запросе.
                  • 
- 
                • status - это CharField, который определяет список choice/selection. Как вы можете видеть, мы определяем кортеж, содержащий кортежи пар ключ-значение и передаем его аргументу выбора. Значение в key/value паре - это отображаемое значение, которое пользователь может выбрать, а ключи - это значения, которые фактически сохраняются, если выбрана опция. Мы также установили значение по умолчанию «m» (техническое обслуживание), поскольку книги изначально будут созданы недоступными до того, как они будут храниться на полках.
                  • 
+ 
                • status - это CharField, который определяет список choice/selection. Как вы можете видеть, мы определяем кортеж, содержащий кортежи пар ключ-значение и передаём его аргументу выбора. Значение в key/value паре - это отображаемое значение, которое пользователь может выбрать, а ключи - это значения, которые фактически сохраняются, если выбрана опция. Мы также установили значение по умолчанию «m» (техническое обслуживание), поскольку книги изначально будут созданы недоступными до того, как они будут храниться на полках.
                  • 
 
                
 
 
                Модель __str __ () представляет объект BookInstance, используя комбинацию его уникального идентификатора и связанного с ним заголовка книги.
                
@@ -370,7 +370,7 @@ class BookInstance(models.Model):
 
                Примечание. Немного Python:
                
 
 
                  
- 
                • Значение, возвращаемое __str __ (), является форматированной строкой. В строке мы используем % S для объявления 'placeholders'. После строки укажем %, а затем кортеж, содержащий значения, которые будут вставлены в заполнители. Если у вас просто один заполнитель, вы можете опустить кортеж - например, 'Мое значение:% S' % переменная.
                  
+ 
                • Значение, возвращаемое __str __ (), является форматированной строкой. В строке мы используем % S для объявления 'placeholders'. После строки укажем %, а затем кортеж, содержащий значения, которые будут вставлены в заполнители. Если у вас просто один заполнитель, вы можете опустить кортеж - например, 'Моё значение:% S' % переменная.
                  
   
                  
   Обратите также внимание на то, что, хотя этот подход совершенно применим, но он более не является предпочтительным. Начиная с Python 3, вы должны использовать метод format, например. '{0} ({1})'.format (self.id, self.book.title). Вы можете узнать больше об этом  здесь.
                  • 
 
                
@@ -420,7 +420,7 @@ python3 manage.py migrate
              
 
 
                
  
              • Должен ли «язык» ассоциироваться с Book, BookInstance или каким-либо другим объектом?
                • 
- 
              • Должны ли быть представлены разные языки с использованием модели, свободного текстового поля или жестко запрограммированного списка выбора?
                • 
+ 
              • Должны ли быть представлены разные языки с использованием модели, свободного текстового поля или жёстко запрограммированного списка выбора?
                • 
 
              
 
 
              После того, как вы решили, добавьте поле. Вы можете увидеть наше решение на Github here.
              
@@ -435,7 +435,7 @@ python3 manage.py migrate
              В этой статье мы узнали, как определять модели, а затем использовать эту информацию в разработке и внедрении соответствующих моделей для сайта LocalLibrary.
              
 
-
              На этом этапе мы отвлечемся от создания сайта и проверим Django Administration site. Этот сайт позволит нам добавить некоторые данные в библиотеку, которые мы можем отобразить с помощью наших (еще не созданных) представлений и шаблонов.
              
+
              На этом этапе мы отвлечёмся от создания сайта и проверим Django Administration site. Этот сайт позволит нам добавить некоторые данные в библиотеку, которые мы можем отобразить с помощью наших (ещё не созданных) представлений и шаблонов.
              Смотрите также
              
 
diff --git a/files/ru/learn/server-side/django/sessions/index.html b/files/ru/learn/server-side/django/sessions/index.html
index cccdb20266..22b6248b35 100644
--- a/files/ru/learn/server-side/django/sessions/index.html
+++ b/files/ru/learn/server-side/django/sessions/index.html
@@ -19,13 +19,13 @@ 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, добавляя счётчик посещений домашней страницы, реализованного при помощи сессий. Это относительно простой пример, но он демонстрирует то, как при помощи сессий реализовать анализ поведения анонимных пользователей на сайте.
              
  
 
 
 
 
 
 
  
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
              
-   
+   
@@ -44,7 +44,7 @@ original_slug: Learn/Server-side/Django/Сессии
 
 
              Что такое сессии?
              
 
-
              Все взаимодействия между браузерами и серверами осуществляются при помощи протокола HTTP, который не сохраняет свое состояние (stateless). Данный факт означает, что сообщения между клиентом и сервером являются полностью независимыми один от другого — то есть не существует какого-либо представления "последовательности", или поведения в зависимости от предыдущих сообщений. В результате, если вы хотите создать сайт который будет отслеживать взаимодействие с клиентом (браузером), вам нужно реализовать это самостоятельно.
              
+
              Все взаимодействия между браузерами и серверами осуществляются при помощи протокола HTTP, который не сохраняет своё состояние (stateless). Данный факт означает, что сообщения между клиентом и сервером являются полностью независимыми один от другого — то есть не существует какого-либо представления "последовательности", или поведения в зависимости от предыдущих сообщений. В результате, если вы хотите создать сайт который будет отслеживать взаимодействие с клиентом (браузером), вам нужно реализовать это самостоятельно.
              Сессии являются механизмом, который использует Django (да и весь остальной "Интернет") для отслеживания "состояния" между сайтом и каким-либо браузером. Сессии позволяют вам хранить произвольные данные браузера и получать их в тот момент, когда между данным браузером и сайтом устанавливается соединение. Данные получаются и сохраняются в сессии при помощи соответствующего "ключа".
              
 
@@ -68,9 +68,9 @@ MIDDLEWARE = [
 
 
              Применение сессий
              
 
-
              Вы можете получить доступ к переменной session, в соответствующем отображении, через параметр request (HttpRequest передается как первый аргумент в каждое отображение). Переменная сессии является связью с определенным пользователем (или, если быть более точным, связью с определенным браузером, который определяется при помощи идентификатора (id) сессии, получаемого из куки браузера).
              
+
              Вы можете получить доступ к переменной session, в соответствующем отображении, через параметр request (HttpRequest передаётся как первый аргумент в каждое отображение). Переменная сессии является связью с определённым пользователем (или, если быть более точным, связью с определённым браузером, который определяется при помощи идентификатора (id) сессии, получаемого из куки браузера).
              
 
-
              Переменная (или поле) session является объектом-словарем, который служит для чтения и записи неограниченное число раз. С ним вы можете выполнять любые стандартные операции, включая очистку всех данных, проверку наличия ключа, циклы по данным и так далее. Большую часть времени вы будете тратить на  обычные "словарные" операции - получения и установки значений.
              
+
              Переменная (или поле) session является объектом-словарём, который служит для чтения и записи неограниченное число раз. С ним вы можете выполнять любые стандартные операции, включая очистку всех данных, проверку наличия ключа, циклы по данным и так далее. Большую часть времени вы будете тратить на  обычные "словарные" операции - получения и установки значений.
              Ниже представлены фрагменты кода, которые показывают вам как получать, задавать и удалять некоторые данные при помощи ключа "my_car", связанного с текущей сессией (браузером). 
              
 
@@ -83,7 +83,7 @@ MIDDLEWARE = [
 my_car = request.session['my_car']
 
 # Получение значения сессии. Если значения не существует,
-# то вернется значение по умолчанию ('mini')
+# то вернётся значение по умолчанию ('mini')
 my_car = request.session.get('my_car', 'mini')
 
 # Передача значения в сессию
@@ -115,7 +115,7 @@ request.session['my_car']['wheels'] = 'alloy'
 
              
-
              Примечание: Вы можете изменить поведение сессий таким образом, чтобы они записывали любое свое изменение в базу данных и отправляли куки, при каждом запросе, путем установки SESSION_SAVE_EVERY_REQUEST = True, в файле настроек проекта (locallibrary/locallibrary/settings.py).
              
+
              Примечание: Вы можете изменить поведение сессий таким образом, чтобы они записывали любое своё изменение в базу данных и отправляли куки, при каждом запросе, путём установки SESSION_SAVE_EVERY_REQUEST = True, в файле настроек проекта (locallibrary/locallibrary/settings.py).
              
 
              Простой пример — получение числа визитов
              
@@ -141,7 +141,7 @@ request.session['my_car']['wheels'] = 'alloy'
             'num_visits':num_visits}, # num_visits appended
     )
 
-
              В первую очередь мы получаем значение 'num_visits' из сессии, возвращая 0, если оно не было установлено ранее. Каждый раз при получении запроса, мы увеличиваем данное значение на единицу и сохраняем его обратно в сессии (до следующего посещения данной страницы пользователем). Затем переменная num_visits передается в шаблон через переменную контекста context.  
              
+
              В первую очередь мы получаем значение 'num_visits' из сессии, возвращая 0, если оно не было установлено ранее. Каждый раз при получении запроса, мы увеличиваем данное значение на единицу и сохраняем его обратно в сессии (до следующего посещения данной страницы пользователем). Затем переменная num_visits передаётся в шаблон через переменную контекста context.  
              
 
              Примечание: Можно проверить наличие поддержки куки в браузере (для примера, смотрите Как использовать сессии), или разработать наш UI таким образом, чтобы это не имело значения.
              
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 3a2dfa47b7..f5e25a0b9c 100644
--- a/files/ru/learn/server-side/django/skeleton_website/index.html
+++ b/files/ru/learn/server-side/django/skeleton_website/index.html
@@ -336,7 +336,7 @@ python3 manage.py migrate
 
 
              Папка catalog/ содержит файлы контроллеров(views), моделей(models), и других частей приложения. Просмотрите эти файлы. 
              
 
-
              Как было написано выше, URL соотноситель для админ-панели был подключен в файле urls.py. Войдите в административную часть и посмотрите, что произойдёт (вы можете найти URL из соотношения выше).
              
+
              Как было написано выше, URL соотноситель для админ-панели был подключён в файле urls.py. Войдите в административную часть и посмотрите, что произойдёт (вы можете найти URL из соотношения выше).
              
 
 
                
 
              
diff --git a/files/ru/learn/server-side/django/testing/index.html b/files/ru/learn/server-side/django/testing/index.html
index 248141c498..7721c05dc1 100644
--- a/files/ru/learn/server-side/django/testing/index.html
+++ b/files/ru/learn/server-side/django/testing/index.html
@@ -18,7 +18,7 @@ translation_of: Learn/Server-side/Django/Testing
 
 
              {{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}
              
 
-
              Сайты, в процессе развития и разработки, становится все сложнее тестировать вручную. Кроме такого тестирования, сложными становятся внутренние взаимодействия между компонентами - внесение небольшого изменения в одной части приложения влияет на другие. При этом, чтобы все продолжало работать нужно вносить все больше и больше изменений и, желательно так, чтобы не добавлялись новые ошибки. Одним из способов который позволяет смягчить последствия добавления изменений, является внедрение в разработку автоматического тестирования - оно должно просто и надежно запускаться каждый раз, когда вы вносите изменения в свой код. Данное руководство рассматривает вопросы автоматизации юнит-тестирования вашего сайта при помощи фреймворка Django для тестов.
              
+
              Сайты, в процессе развития и разработки, становится все сложнее тестировать вручную. Кроме такого тестирования, сложными становятся внутренние взаимодействия между компонентами - внесение небольшого изменения в одной части приложения влияет на другие. При этом, чтобы все продолжало работать нужно вносить все больше и больше изменений и, желательно так, чтобы не добавлялись новые ошибки. Одним из способов который позволяет смягчить последствия добавления изменений, является внедрение в разработку автоматического тестирования - оно должно просто и надёжно запускаться каждый раз, когда вы вносите изменения в свой код. Данное руководство рассматривает вопросы автоматизации юнит-тестирования вашего сайта при помощи фреймворка Django для тестов.
              
 
 
              
  
   
              
    Требования:Завершить изучение всех предыдущих разделов, включая Django Руководство Часть 6: Обобщенные отображения списков и детальной информацииЗавершить изучение всех предыдущих разделов, включая Django Руководство Часть 6: Обобщённые отображения списков и детальной информации
   
              
   
              
    Цель:
 
 
 
 
 
 
 
 
 
 
              
@@ -37,7 +37,7 @@ translation_of: Learn/Server-side/Django/Testing
 
 
              LocalLibrary в настоящий момент содержит страницы для показа списков всех книг, авторов, подробной информации о книгах Book и авторах Author, а также страницу для обновления информации об экземпляре книги BookInstance и, кроме того, страницы для создания, обновления и удаления записей модели Author (и модели Book, в том случае, если вы выполнили домашнее задание в руководстве работа с формами). Даже в случае небольшого сайта, ручной переход на каждую страницу и беглая проверка того, что все работает как следует, может занять несколько минут. В процессе внесения изменений и роста сайта требуемое время для проведения проверок будет только возрастать. Если бы мы продолжили в том же духе, то в какой-то момент на проведение тестов мы тратили бы больше времени, чем на написание кода и внесение изменений.
              
 
-
              Автоматические тесты могут серьезно помочь нам справиться с этой проблемой! Очевидными преимуществами в таком случае являются значительно меньшие временные затраты на проведение тестов, их подробное выполнение, а кроме того, тесты имеют постоянную функциональность, или последовательность действий  (человек никогда не сможет тестировать так надежно!). В связи с быстротой их выполнения автоматические тесты можно выполнять более часто, а если они провалятся, то укажут на соответствующее место (где что-то пошло не так как ожидалось).
              
+
              Автоматические тесты могут серьёзно помочь нам справиться с этой проблемой! Очевидными преимуществами в таком случае являются значительно меньшие временные затраты на проведение тестов, их подробное выполнение, а кроме того, тесты имеют постоянную функциональность, или последовательность действий  (человек никогда не сможет тестировать так надёжно!). В связи с быстротой их выполнения автоматические тесты можно выполнять более часто, а если они провалятся, то укажут на соответствующее место (где что-то пошло не так как ожидалось).
              Кроме того, автоматические тесты могут действовать как первый "настоящий пользователь" вашего кода, заставляя вас строго следить за объявлениями и документированием поведения вашего сайта. Тесты часто являются основой для создания примеров вашего кода и документации. По этим причинам иногда некоторые процессы разработки программного обеспечения начинаются с определения тестов и их реализации, а уже после этого следует написание кода который должен иметь соответствующее поведение (так называемая разработка на основе тестов и на основе поведения).
              
 
@@ -45,13 +45,13 @@ translation_of: Learn/Server-side/Django/Testing
 
 
              Типы тестирования
              
 
-
              Существует несколько типов, уровней, классификаций тестов и тестовых приемов. Наиболее важными автоматическими тестами являются:
              
+
              Существует несколько типов, уровней, классификаций тестов и тестовых приёмов. Наиболее важными автоматическими тестами являются:
              
  
              Юнит-тесты
              
  
              Проверяют функциональное поведение для отдельных компонентов, часто классов и функций.
              
  
              Регрессионное тестирование
              
- 
              Тесты которые воспроизводят исторические ошибки (баги). Каждый тест вначале запускается для проверки того, что баг был исправлен, а затем перезапускается для того, чтобы убедиться, что он не был внесен снова с появлением новых изменений в коде.
              
+ 
              Тесты которые воспроизводят исторические ошибки (баги). Каждый тест вначале запускается для проверки того, что баг был исправлен, а затем перезапускается для того, чтобы убедиться, что он не был внесён снова с появлением новых изменений в коде.
              
  
              Интеграционные тесты
              
  
              Проверка совместной работы групп компонентов. Данные тесты отвечают за совместную работу между компонентами, не обращая внимания на внутренние процессы в компонентах. Они проводятся как для простых групп компонентов, так и для целых веб-сайтов.
              
 
              
@@ -62,11 +62,11 @@ translation_of: Learn/Server-side/Django/Testing
 
 
              Что Django предоставляет для тестирования?
              
 
-
              Тестирование сайта это сложная задача, потому что она состоит их нескольких логических слоев – от  HTTP-запроса и запроса к моделям, до валидации формы и их обработки, а кроме того, рендеринга шаблонов страниц.
              
+
              Тестирование сайта это сложная задача, потому что она состоит их нескольких логических слоёв – от  HTTP-запроса и запроса к моделям, до валидации формы и их обработки, а кроме того, рендеринга шаблонов страниц.
              Django предоставляет фреймворк для создания тестов, построенного на основе иерархии классов, которые, в свою очередь, зависят от стандартной библиотеки Python  unittest. Несмотря на название, данный фреймворк подходит и для юнит-, и для интеграционного тестирования. Фреймворк Django добавляет методы API и инструменты, которые помогают тестировать как веб так и, специфическое для Django, поведение. Это позволяет вам имитировать URL-запросы, добавление тестовых данных, а также проводить проверку выходных данных ваших приложений. Кроме того, Django предоставляет API (LiveServerTestCase) и инструменты для применения различных фреймворков тестирования, например вы можете подключить популярный фреймворк Selenium для имитации поведения пользователя в реальном браузере.
              
 
-
              Для написания теста вы должны наследоваться от любого из классов тестирования Django (или юниттеста)  (SimpleTestCase, TransactionTestCase, TestCase, LiveServerTestCase), а затем реализовать отдельные методы проверки кода (тесты это функции-"утверждения", которые проверяют, что результатом выражения являются значения True или False, или что два значения равны и так далее). Когда вы запускаете тест, фреймворк выполняет соответствующие тестовые методы в вашем классе-наследнике. Методы тестирования запускаются независимо друг от друга, начиная с метода настроек и/или завершаясь методом разрушения (tear-down), определенном в классе, как показано ниже.
              
+
              Для написания теста вы должны наследоваться от любого из классов тестирования Django (или юниттеста)  (SimpleTestCase, TransactionTestCase, TestCase, LiveServerTestCase), а затем реализовать отдельные методы проверки кода (тесты это функции-"утверждения", которые проверяют, что результатом выражения являются значения True или False, или что два значения равны и так далее). Когда вы запускаете тест, фреймворк выполняет соответствующие тестовые методы в вашем классе-наследнике. Методы тестирования запускаются независимо друг от друга, начиная с метода настроек и/или завершаясь методом разрушения (tear-down), определённом в классе, как показано ниже.
              class YourTestClass(TestCase):
 
@@ -85,7 +85,7 @@ translation_of: Learn/Server-side/Django/Testing
         self.assertTrue(False)
 
              
 
-
              Самый подходящий базовый класс для большинства тестов это django.test.TestCase.  Этот класс создает чистую базу данных перед запуском своих методов, а также запускает каждую функцию тестирования в его собственной транзакции. У данного класса также имеется тестовый Клиент, который вы можете использовать для имитации взаимодействия пользователя с кодом на уровне отображения. В следующих разделах мы сконцентрируемся на юнит-тестах, которые будут созданы на основе класса TestCase.
              
+
              Самый подходящий базовый класс для большинства тестов это django.test.TestCase.  Этот класс создаёт чистую базу данных перед запуском своих методов, а также запускает каждую функцию тестирования в его собственной транзакции. У данного класса также имеется тестовый Клиент, который вы можете использовать для имитации взаимодействия пользователя с кодом на уровне отображения. В следующих разделах мы сконцентрируемся на юнит-тестах, которые будут созданы на основе класса TestCase.
              
 
              Примечание: Класс django.test.TestCase очень удобен, но он может приводить к замедленной работе в некоторых случаях (не для каждого теста необходимо настраивать базу данных, или имитировать взаимодействие с отображением). Когда вы познакомитесь с работой данного класса, то сможете заменить некоторые из ваших тестов на более простые классы тестирования.
              
@@ -95,7 +95,7 @@ translation_of: Learn/Server-side/Django/Testing
 
 
              Вы должны тестировать все аспекты, касающиеся вашего кода, но не библиотеки, или функциональность, предоставляемые Python, или Django.
              
 
-
              Например, рассмотрим модель Author, определенную ниже. Вам не нужно проверять тот факт, что first_name и last_name были сохранены в базу данных как CharField, потому что за это отвечает непосредственно Django (хотя конечно, на практике  в течение разработки вы косвенно будете проверять данную функциональность). Тоже касается и, например, проверки того, что поле date_of_birth является датой, поскольку это тоже часть реализации Django.
              
+
              Например, рассмотрим модель Author, определённую ниже. Вам не нужно проверять тот факт, что first_name и last_name были сохранены в базу данных как CharField, потому что за это отвечает непосредственно Django (хотя конечно, на практике  в течение разработки вы косвенно будете проверять данную функциональность). Тоже касается и, например, проверки того, что поле date_of_birth является датой, поскольку это тоже часть реализации Django.
              
 
 
              Вы должны проверить текст для меток (First name, Last_name, Date of birth, Died), и размер поля, выделенного для текста (100 символов), потому что они являются частью вашей разработки и чем-то, что может сломаться/измениться в будущем.
              
 
@@ -117,11 +117,11 @@ translation_of: Learn/Server-side/Django/Testing
 
              Примечание: Проницательные читатели могут заметить, что мы можем некоторым образом ограничить дату рождения и смерти какими-то граничными значениями и выполнять проверку, чтобы дата смерти шла после рождения. В Django данное ограничение может быть добавлено к вашим классам форм (хотя вы и можете определить валидаторы для этих полей, они будут проявлять себя только на уровне форм, а не уровне модели).
              
 
              
 
-
              Ну что же, усвоив данную информацию, давайте перейдем к процессу определения и запуска тестов.
              
+
              Ну что же, усвоив данную информацию, давайте перейдём к процессу определения и запуска тестов.
              Обзор структуры тестов
              
 
-
              Перед тем как мы перейдем к тому "что тестировать", давайте кратко взглянем на моменты где и как определяются тесты.
              
+
              Перед тем как мы перейдём к тому "что тестировать", давайте кратко взглянем на моменты где и как определяются тесты.
              Django использует юнит-тестовый модуль - встроенный "обнаружитель" тестов, который находит тесты в текущей рабочей директории, в любом файле с шаблонным именем test*.py. Предоставляя соответствующие имена файлов, вы можете работать с любой структурой которая вас устраивает. Мы рекомендуем создать пакет для вашего тестирующего кода и, следовательно, отделить файлы моделей, отображений, форм и любые другие, от кода который будет использоваться для тестов. Например:
              
 
@@ -136,7 +136,7 @@ translation_of: Learn/Server-side/Django/Testing
 
              В проекте LocalLibrary создайте файловую структуру, указанную выше. Файл __init__.py должен быть пустым (так мы говорим Питону, что данная директория является пакетом). Вы можете создать три тестовых файла при помощи копирования и переименования файла-образца /catalog/tests.py.
              
-
              Примечание: Скелет тестового файла /catalog/tests.py был создан автоматически когда мы выполняли построение скелета сайта Django. Является абсолютно "легальным" действием - поместить все ваши тесты в данный файл, тем не менее, если вы проводите тесты "правильно", то вы очень быстро придете к очень большому и неуправляемому файлу тестирования.
              
+
              Примечание: Скелет тестового файла /catalog/tests.py был создан автоматически когда мы выполняли построение скелета сайта Django. Является абсолютно "легальным" действием - поместить все ваши тесты в данный файл, тем не менее, если вы проводите тесты "правильно", то вы очень быстро придёте к очень большому и неуправляемому файлу тестирования.
              
 
 
              Можете удалить данный файл, поскольку больше он нам не понадобится.
              
 
              
@@ -148,7 +148,7 @@ translation_of: Learn/Server-side/Django/Testing
 # Поместите ваш код тестов здесь
 
 
-
              Вы часто будете добавлять соответствующий тестовый класс для каждой модели/отображения/формы с отдельными методами проверки каждой отдельной функциональности. В каких-то случаях вы захотите иметь отдельный класс для тестирования какого-то особого варианта работы, или функционала, с отдельными функциями тестирования, которые будут проверять элемент/элементы данного варианта (например, мы можем создать отдельный класс тестирования для проверки того, что поле валидно, - функции данного класса будут проверять каждый неверный вариант использования). Опять же, структура файлов и пакетов полностью зависит от вас и будет лучше если вы будете ее придерживаться.
              
+
              Вы часто будете добавлять соответствующий тестовый класс для каждой модели/отображения/формы с отдельными методами проверки каждой отдельной функциональности. В каких-то случаях вы захотите иметь отдельный класс для тестирования какого-то особого варианта работы, или функционала, с отдельными функциями тестирования, которые будут проверять элемент/элементы данного варианта (например, мы можем создать отдельный класс тестирования для проверки того, что поле валидно, - функции данного класса будут проверять каждый неверный вариант использования). Опять же, структура файлов и пакетов полностью зависит от вас и будет лучше если вы будете её придерживаться.
              Добавьте тестовый класс, показанный ниже, в нижнюю часть файла. Данный класс демонстрирует как создать класс тестирования при помощи наследования от TestCase.
              
 
@@ -200,7 +200,7 @@ translation_of: Learn/Server-side/Django/Testing
 
 
              python3 manage.py test
              
 
-
              Таким образом мы найдем в текущей директории все файлы с именем test*.py и запустим все тесты (у нас имеются несколько файлов для тестирования, но на данный момент, только /catalog/tests/test_models.py содержит какие-либо тесты). По умолчанию, тесты сообщат что-нибудь, только в случае провала.
              
+
              Таким образом мы найдём в текущей директории все файлы с именем test*.py и запустим все тесты (у нас имеются несколько файлов для тестирования, но на данный момент, только /catalog/tests/test_models.py содержит какие-либо тесты). По умолчанию, тесты сообщат что-нибудь, только в случае провала.
              Запустите тесты из корневой папки сайта LocalLibrary. Вы должны увидеть вывод, который похож на следующий.
              
 
@@ -239,7 +239,7 @@ Destroying test database for alias 'default'...
              Следующий раздел показывает как запускать отдельные тесты и как контролировать процесс вывода информации.
              
 
-
              Еще больше тестовой информации
              
+
              Ещё больше тестовой информации
              Если вы желаете получать больше информации о тестах вы должны изменить значение параметра verbosity. Например, для вывода списка успешных и неуспешных тестов (и всю информацию о том, как прошла настройка базы данных) вы можете установить значение verbosity равным "2":
              
 
@@ -247,7 +247,7 @@ Destroying test database for alias 'default'...
              Доступными значениями для verbosity являются  0, 1 (значение по умолчанию), 2 и 3.
              
 
-
              Запуск определенных тестов
              
+
              Запуск определённых тестов
              Если вы хотите запустить подмножество тестов, тогда вам надо указать полный путь к вашему пакету, модулю/подмодулю, классу наследникуTestCase, или методу:
              
 
@@ -262,14 +262,14 @@ python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one
 
              Теперь, когда мы знаем как запустить наши тесты и что именно мы должны тестировать, давайте рассмотрим некоторые практические примеры.
              
-
              Примечание: Мы не будем расписывать все тесты, а просто покажем вам пример того, как они должны работать и что еще вы можете с ними сделать.
              
+
              Примечание: Мы не будем расписывать все тесты, а просто покажем вам пример того, как они должны работать и что ещё вы можете с ними сделать.
              
 
              Модели
              Как было отмечено ранее, мы должны тестировать все то, что является частью нашего кода, а не библиотеки/код, которые уже были протестированы командами разработчиков Django, или Python.
              
 
-
              Рассмотрим модель Author. Мы должны провести тесты текстовых меток всех полей, поскольку, даже несмотря на то, что не все они определены, у нас есть проект, в котором сказано, что все их значения должны быть заданы. Если мы не проведем их тестирование, тогда мы не будем знать, что данные метки действительно содержат необходимые значения. Мы уверены в том, что Django создаст поле заданной длины, таким образом наши тесты будут проверять нужный нам размер поля, а заодно и его содержимое.
              
+
              Рассмотрим модель Author. Мы должны провести тесты текстовых меток всех полей, поскольку, даже несмотря на то, что не все они определены, у нас есть проект, в котором сказано, что все их значения должны быть заданы. Если мы не проведём их тестирование, тогда мы не будем знать, что данные метки действительно содержат необходимые значения. Мы уверены в том, что Django создаст поле заданной длины, таким образом наши тесты будут проверять нужный нам размер поля, а заодно и его содержимое.
              class Author(models.Model):
     first_name = models.CharField(max_length=100)
@@ -283,9 +283,9 @@ python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one
     def __str__(self):
         return '%s, %s' % (self.last_name, self.first_name)
              
 
-
              Откройте файл /catalog/tests/test_models.py и замените все его содержимое кодом, приведенном во фрагменте для тестирования модели Author (фрагмент представлен ниже).
              
+
              Откройте файл /catalog/tests/test_models.py и замените все его содержимое кодом, приведённом во фрагменте для тестирования модели Author (фрагмент представлен ниже).
              
 
-
              В первой строке мы импортируем класс TestCase, а затем наследуемся от него, создавая класс с описательным именем (AuthorModelTest), оно поможет нам идентифицировать места провалов в тестах во время вывода информации на консоль. Затем мы создаем метод setUpTestData(), в котором создаем объект автора, который мы будем использовать в тестах, но нигде не будем изменять.
              
+
              В первой строке мы импортируем класс TestCase, а затем наследуемся от него, создавая класс с описательным именем (AuthorModelTest), оно поможет нам идентифицировать места провалов в тестах во время вывода информации на консоль. Затем мы создаём метод setUpTestData(), в котором создаём объект автора, который мы будем использовать в тестах, но нигде не будем изменять.
              from django.test import TestCase
 
@@ -385,7 +385,7 @@ AssertionError: 'Died' != 'died'
 
 
              Смысл проведения тестов для форм тот же, что и для моделей; надо проверить весь собственный код и другие особенности проекта, но не то, что касается фреймворка, или сторонних библиотек.
              
 
-
              В основном это означает, что вы должны протестировать то, что формы имеют соответствующие поля и что они показываются с соответствующими метками и вспомогательными текстами. Вам не надо проверять то, что Django правильно осуществляет валидацию полей (если только вы не создали свое собственное поле и валидацию) — то есть вам не надо проверять что, например, поле ввода электронного адреса принимает только электронного адреса. Но вы должны протестировать каждую дополнительную валидацию, которую вы добавляете для полей и любые сообщения, который ваш код генерирует в случае ошибок.
              
+
              В основном это означает, что вы должны протестировать то, что формы имеют соответствующие поля и что они показываются с соответствующими метками и вспомогательными текстами. Вам не надо проверять то, что Django правильно осуществляет валидацию полей (если только вы не создали своё собственное поле и валидацию) — то есть вам не надо проверять что, например, поле ввода электронного адреса принимает только электронного адреса. Но вы должны протестировать каждую дополнительную валидацию, которую вы добавляете для полей и любые сообщения, который ваш код генерирует в случае ошибок.
              
 
 
              Рассмотрим форму для обновления книг. Она имеет только одно поле обновления даты, которое будет иметь текстовую метку и вспомогательный текст, который вам надо проверить.
              
 
@@ -401,7 +401,7 @@ AssertionError: 'Died' != 'died'
         #Проверка, что дата не в прошлом.
         if data < datetime.date.today():
             raise ValidationError(_('Invalid date - renewal in past'))
-        #Если дата в "далеком" будущем (+4 недели)
+        #Если дата в "далёком" будущем (+4 недели)
         if data > datetime.date.today() + datetime.timedelta(weeks=4):
             raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
 
@@ -455,7 +455,7 @@ class RenewBookFormTest(TestCase):
 
 
              Первые две функции проверяют текст который должны содержать поля label и help_text. Доступ к полю мы получаем при помощи словаря (то есть, form.fields['renewal_date']). Отметим, что мы должны проверять содержит ли метка значение None, иначе в поле текста метки вы увидите "None".
              
 
-
              Оставшиеся функции проверяют валидность дат, то есть их нахождение внутри определенного интервала, а также невалидность для значений, которые находятся вне заданного интервала. Для получения исходного значения мы использовали функцию получения текущей даты (datetime.date.today()), а также функцию datetime.timedelta() (которая принимает определенное число дней, или недель). Затем мы просто создали форму, передавая ей наши данные и проверяя ее на валидность.
              
+
              Оставшиеся функции проверяют валидность дат, то есть их нахождение внутри определённого интервала, а также невалидность для значений, которые находятся вне заданного интервала. Для получения исходного значения мы использовали функцию получения текущей даты (datetime.date.today()), а также функцию datetime.timedelta() (которая принимает определённое число дней, или недель). Затем мы просто создали форму, передавая ей наши данные и проверяя её на валидность.
              
 
 
              
 
              Примечание: В данном примере мы не использовали ни базу данных, ни тестовый клиент. Рассмотрите модификацию этих тестов при помощи класса SimpleTestCase.
              
@@ -463,22 +463,22 @@ 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').
              
+
              Давайте начнём с одного из простейших отображений которое возвращает список всех авторов. Вы можете его увидеть по URL-адресу /catalog/authors/ (данный URL-адрес можно найти в разделе приложения catalog,  в файле настроек urls.py по имени  'authors').
              
 
 
              class AuthorListView(generic.ListView):
     model = Author
     paginate_by = 10
 
              
 
-
              Поскольку это обобщенное отображение списка, то почти все за нас делает Django. Если вы доверяете Django, то единственной вещью, которую вам нужно протестировать, является переход к данному отображению по указанному URL-адресу. Таким образом, если вы применяете методику TDD (test-driven development, разработка через тесты), то начните проект с написания тестов, которые будут проверять, что данное отображение выводит всех авторов и, к тому же, например, блоками по 10.
              
+
              Поскольку это обобщённое отображение списка, то почти все за нас делает Django. Если вы доверяете Django, то единственной вещью, которую вам нужно протестировать, является переход к данному отображению по указанному URL-адресу. Таким образом, если вы применяете методику TDD (test-driven development, разработка через тесты), то начните проект с написания тестов, которые будут проверять, что данное отображение выводит всех авторов и, к тому же, например, блоками по 10.
              
 
-
              Откройте файл /catalog/tests/test_views.py замените все его содержимое на следующий код теста для класса AuthorListView. Как и ранее, мы импортируем нашу модель и некоторые полезные классы. В методе setUpTestData() мы задаем число объектов класса Author которые мы тестируем при постраничном выводе.
              
+
              Откройте файл /catalog/tests/test_views.py замените все его содержимое на следующий код теста для класса AuthorListView. Как и ранее, мы импортируем нашу модель и некоторые полезные классы. В методе setUpTestData() мы задаём число объектов класса Author которые мы тестируем при постраничном выводе.
              
 
 
              from django.test import TestCase
 
@@ -525,15 +525,15 @@ class AuthorListViewTest(TestCase):
         self.assertTrue(resp.context['is_paginated'] == True)
         self.assertTrue( len(resp.context['author_list']) == 3)
              
 
-
              Все тесты используют клиент (принадлежащего классу TestCase, от которого мы наследовались) для имитации GET-запроса и получения ответа (resp). Первая версия проверяет заданный URL-адрес (заметьте, - просто определенный путь без указания домена), в то время как второй генерирует URL-адрес при помощи его имени, указанного в настройках.
              
+
              Все тесты используют клиент (принадлежащего классу TestCase, от которого мы наследовались) для имитации GET-запроса и получения ответа (resp). Первая версия проверяет заданный URL-адрес (заметьте, - просто определённый путь без указания домена), в то время как второй генерирует URL-адрес при помощи его имени, указанного в настройках.
              
 
 
              resp = self.client.get('/catalog/authors/')
 resp = self.client.get(reverse('authors'))
 
              
 
-
              Когда мы получаем ответ, то мы извлекаем код статуса, используемый шаблон, "включен" ли постраничный вывод, количество элементов в подмножестве (на странице) и общее число элементов.
              
+
              Когда мы получаем ответ, то мы извлекаем код статуса, используемый шаблон, "включён" ли постраничный вывод, количество элементов в подмножестве (на странице) и общее число элементов.
              
 
-
              Наиболее интересной переменной является resp.context, которая является объектом контекста, который передается шаблону из отображения. Он (объект контекста) очень полезен для тестов, поскольку позволяет нам убедиться, что наш шаблон получает все данные которые ему необходимы. Другими словами мы можем проверить, что мы используем правильный шаблон с данными, которые проделывают долгий путь проверок чтобы соответствовать данному шаблону.
              
+
              Наиболее интересной переменной является resp.context, которая является объектом контекста, который передаётся шаблону из отображения. Он (объект контекста) очень полезен для тестов, поскольку позволяет нам убедиться, что наш шаблон получает все данные которые ему необходимы. Другими словами мы можем проверить, что мы используем правильный шаблон с данными, которые проделывают долгий путь проверок чтобы соответствовать данному шаблону.
              
 
 
              Отображения и регистрация пользователей
              
 
@@ -543,7 +543,7 @@ resp = self.client.get(reverse('authors'))
 
 class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
     """
-    Обобщенный класс отображения списка взятых книг текущим пользователем
+    Обобщённый класс отображения списка взятых книг текущим пользователем
     """
     model = BookInstance
     template_name ='catalog/bookinstance_list_borrowed_user.html'
@@ -555,7 +555,7 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
 
              Добавьте тестовый код следующего фрагмента в /catalog/tests/test_views.py. В нем, для создания нескольких аккаунтов и  объектов BookInstance которые будут использоваться в дальнейших тестах, мы используем метод SetUp() (вместе с соответствующими книгами и другими записями). Половина книг бронируется  тестовыми пользователями, но в начале для них всех мы устанавливаем статус "доступно". Использование метода SetUp() предпочтительнее чем setUpTestData(), поскольку в дальнейшем мы будем модифицировать некоторые объекты.
              
 
 
              
-
              Примечание: Метод setUp() создает книгу с заданным языком Language, но ваш код может не включать в себя модель Language, поскольку это было домашним заданием. В таком случае просто закомментируйте соответствующие строки. Поступите также и в следующем разделе, посвященном RenewBookInstancesViewTest.
              
+
              Примечание: Метод setUp() создаёт книгу с заданным языком Language, но ваш код может не включать в себя модель Language, поскольку это было домашним заданием. В таком случае просто закомментируйте соответствующие строки. Поступите также и в следующем разделе, посвящённом RenewBookInstancesViewTest.
              
 
              
 
 
              import datetime
@@ -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 (успешно). 
              
 
 
              Остальные тесты проверяют, соответственно, что наше отображение показывает только те книги которые взяты текущим пользователем. Скопируйте код, показанный ниже, в нижнюю часть предыдущего класса.
              
 
@@ -678,7 +678,7 @@ class LoanedBookInstancesByUserListViewTest(TestCase):
 
 
              Тестирование форм и отображений
              
 
-
              Процесс тестирования отображений с формами немного более сложен, чем в представленных ранее случаях, поскольку вам надо протестировать большее количество кода: начальное состояние показа формы, показ формы и ее данных в случае ошибок, а также показ формы в случае успеха. Хорошей новостью является то, что мы применяем клиент для тестирования практически тем же способом, как мы делали это в случае отображений, которые отвечают только за вывод информации.
              
+
              Процесс тестирования отображений с формами немного более сложен, чем в представленных ранее случаях, поскольку вам надо протестировать большее количество кода: начальное состояние показа формы, показ формы и её данных в случае ошибок, а также показ формы в случае успеха. Хорошей новостью является то, что мы применяем клиент для тестирования практически тем же способом, как мы делали это в случае отображений, которые отвечают только за вывод информации.
              
 
 
              В качестве демонстрации давайте напишем некоторые тесты для отображения, которые отвечают за обновление книг(renew_book_librarian()):
              
 
@@ -694,7 +694,7 @@ def renew_book_librarian(request, pk):
     # Если это POST-запрос, тогда обработать данные формы
     if request.method == 'POST':
 
-        # Создать объект формы и заполнить ее данными из запроса (связывание/биндинг):
+        # Создать объект формы и заполнить её данными из запроса (связывание/биндинг):
         form = RenewBookForm(request.POST)
 
         # Проверка валидности формы:
@@ -706,7 +706,7 @@ def renew_book_librarian(request, pk):
             # переход по URL-адресу:
             return HttpResponseRedirect(reverse('all-borrowed') )
 
-    # Если это GET-запрос (или что-то еще), то создаем форму по умолчанию
+    # Если это GET-запрос (или что-то ещё), то создаём форму по умолчанию
     else:
         proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
         form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
@@ -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,}) )
@@ -796,7 +796,7 @@ class RenewBookInstancesViewTest(TestCase):
         self.assertTemplateUsed(resp, 'catalog/book_renew_librarian.html')
 
              
 
-
              Добавьте еще один тестовый метод, показанный ниже. Он проверяет что начальная дата равна трем неделям в будущем. Заметьте, что мы имеем возможность получить доступ к начальному значению из поля формы (выделено жирным).
              
+
              Добавьте ещё один тестовый метод, показанный ниже. Он проверяет что начальная дата равна трём неделям в будущем. Заметьте, что мы имеем возможность получить доступ к начальному значению из поля формы (выделено жирным).
              
 
 
                  def test_form_renewal_date_initially_has_date_three_weeks_in_future(self):
         login = self.client.login(username='testuser2', password='12345')
@@ -807,7 +807,7 @@ class RenewBookInstancesViewTest(TestCase):
         self.assertEqual(resp.context['form'].initial['renewal_date'], date_3_weeks_in_future )
 
              
 
-
              Следующий тест (тоже добавьте его в свой класс) проверяет что отображение, в случае успеха, перенаправляет пользователя к списку всех забронированных книг. Здесь мы показываем как при помощи клиента вы можете создать и передать данные в POST-запросе. Данный запрос передается вторым аргументом в пост-функцию и представляет из себя словарь пар ключ/значение.
              
+
              Следующий тест (тоже добавьте его в свой класс) проверяет что отображение, в случае успеха, перенаправляет пользователя к списку всех забронированных книг. Здесь мы показываем как при помощи клиента вы можете создать и передать данные в POST-запросе. Данный запрос передаётся вторым аргументом в пост-функцию и представляет из себя словарь пар ключ/значение.
              
 
 
                  def test_redirects_to_all_borrowed_book_list_on_success(self):
         login = self.client.login(username='testuser2', password='12345')
@@ -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/')
              
@@ -844,7 +844,7 @@ class RenewBookInstancesViewTest(TestCase):
 
 
              Шаблоны
              
 
-
              Django предоставляет API для тестирования, которое проверяет что функции отображения вызывают правильные шаблоны, а также позволяют убедиться, что им передается соответствующая информация. Кроме того, в Django имеется возможность использовать сторонние API для проверок того, что ваш HTML показывает то, что надо.
              
+
              Django предоставляет API для тестирования, которое проверяет что функции отображения вызывают правильные шаблоны, а также позволяют убедиться, что им передаётся соответствующая информация. Кроме того, в Django имеется возможность использовать сторонние API для проверок того, что ваш HTML показывает то, что надо.
              
 
 
              Другие рекомендованные инструменты для тестирования
              
 
@@ -853,7 +853,7 @@ class RenewBookInstancesViewTest(TestCase):
 
              Из всего множества сторонних инструментов тестирования, мы кратко опишем возможности двух:
              
 
 
                
- 
              • Coverage: Это инструмент Python, который формирует отчеты о том, какое количество кода выполняется во время проведения тестов. Это полезно для уточнения степени "покрытия" кода тестами.
                • 
+ 
              • Coverage: Это инструмент Python, который формирует отчёты о том, какое количество кода выполняется во время проведения тестов. Это полезно для уточнения степени "покрытия" кода тестами.
                • 
  
              • Selenium это фреймворк проведения автоматического тестирования в настоящем браузере. Он позволяет вам имитировать взаимодействие пользователя с вашим сайтом (что является следующим шагом в проведении интеграционных тестов).
                • 
 
              
 
@@ -871,7 +871,7 @@ class RenewBookInstancesViewTest(TestCase):
 
 
              Итоги
              
 
-
              Написание тестов не является ни весельем, ни развлечением и, соответственно, при создании сайтов часто остается напоследок (или вообще не используется). Но тем не менее, они являются действенным механизмом, который позволяет вам убедиться, что ваш код в находится безопасности, даже если в него добавляются какие-либо изменения. Кроме того, тесты повышают эффективность поддержки вашего кода.
              
+
              Написание тестов не является ни весельем, ни развлечением и, соответственно, при создании сайтов часто остаётся напоследок (или вообще не используется). Но тем не менее, они являются действенным механизмом, который позволяет вам убедиться, что ваш код в находится безопасности, даже если в него добавляются какие-либо изменения. Кроме того, тесты повышают эффективность поддержки вашего кода.
              
 
 
              В данном руководстве мы продемонстрировали вам принципы написания тестов для ваших моделей, форм и отображений. Мы кратко перечислили что именно необходимо тестировать, что обычно сложно выявить в самом начале разработки. Существует много аспектов которые необходимо изучить, но даже с тем что мы уже узнали, вы имеете возможность создавать эффективные юнит-тесты для значительного улучшения процесса разработки.
              
 
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 435982ac1f..9ceb8c74e2 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
@@ -7,7 +7,7 @@ translation_of: Learn/Server-side/Django/web_application_security
 
 
              {{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}
              
 
-
              Защита пользовательских данных - важная часть проектирования любого веб-сайта.Ранее мы рассматривали некоторые наиболее распространенные угрозы безопасности в теме Веб безопасность. В данной статье будет представлена практическая демонстрация того, как встроенные механизмы защиты Django's обрабатывают подобные угрозы.
              
+
              Защита пользовательских данных - важная часть проектирования любого веб-сайта.Ранее мы рассматривали некоторые наиболее распространённые угрозы безопасности в теме Веб безопасность. В данной статье будет представлена практическая демонстрация того, как встроенные механизмы защиты Django's обрабатывают подобные угрозы.
              
 
 
              
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
              
@@ -24,7 +24,7 @@ translation_of: Learn/Server-side/Django/web_application_security
 
 
              Обзор
              
 
-
              Тема Веб безопасность рассматривает значение безопасности веб-приложения для проектирования серверного приложения и некоторые из наиболее распространенных угроз, от которых вам может потребоваться защита. Одна из ключевых идей этой темы состоит в том, что практически все атаки будут успешны, если веб-приложение доверяет пользовательским данным (например данным из браузера).
              
+
              Тема Веб безопасность рассматривает значение безопасности веб-приложения для проектирования серверного приложения и некоторые из наиболее распространённых угроз, от которых вам может потребоваться защита. Одна из ключевых идей этой темы состоит в том, что практически все атаки будут успешны, если веб-приложение доверяет пользовательским данным (например данным из браузера).
              
 
              Важно: Наиболее важный урок, который вы должны усвоить, состоит в том - что никогда не стоит доверять переданным пользователем данным. Они включают в себя GET параметры в URL, тело POST запроса, HTTP заголовки, cookies, загруженные пользователем данные и т.д. Всегда проверяйте и обрабатывайте все входные данные. Всегда готовьтесь к худшему.
              
@@ -32,15 +32,15 @@ translation_of: Learn/Server-side/Django/web_application_security
 
 
              Хорошей новостью для всех разработчиков, использующих Django, является то, что большинство известных атак обрабатывается фреймворком! Статья Безопасность в Django (Django docs) описывает методы обеспечения безопасности Django и стратегии защиты веб-приложения разработанного на данном фреймворке.
              
 
-
              Распространенные угрозы/методы защиты
              
+
              Распространённые угрозы/методы защиты
              
 
 
              Мы не будем дублировать документацию Django и в данной статье продемонстрируем некоторые основные методы обеспечения безопасности в контексте разрабатываемого в данном руководстве приложения LocalLibrary.
              
 
 
              Межсайтовый скриптинг (XSS)
              
 
-
              XSS это термин, применяющийся для описания класса атак, позволяющего атакующему, через веб-сайт внедрить скрипты, которые будут выполнены на устройстве зашедшего на страницу пользователя. Часто это происходит через сохранение вредоносного кода в базе данных, откуда данный код будет возвращен и выполнен для запросившего некие данные пользователя (типичный пример - сохранение тега <script> с вредоносным кодом в комментарии, который может увидеть другой пользователь). Другой вектор атаки - в том чтобы сгенерировать определенную ссылку, при клике на которую пользователь запустит выполнение некоего замаскированного кода JavaScript в своем браузере.
              
+
              XSS это термин, применяющийся для описания класса атак, позволяющего атакующему, через веб-сайт внедрить скрипты, которые будут выполнены на устройстве зашедшего на страницу пользователя. Часто это происходит через сохранение вредоносного кода в базе данных, откуда данный код будет возвращён и выполнен для запросившего некие данные пользователя (типичный пример - сохранение тега <script> с вредоносным кодом в комментарии, который может увидеть другой пользователь). Другой вектор атаки - в том чтобы сгенерировать определённую ссылку, при клике на которую пользователь запустит выполнение некоего замаскированного кода JavaScript в своём браузере.
              
 
-
              Система шаблонов Django защищает от большинства XSS атак,  экранируя определенные символы, считающиеся "опасными" в HTML. Мы можем продемонстрировать это, попытавшись внедрить произвольный JavaScript код в наше приложение LocalLibrary через форму добавления автора, созданную в Руководство часть 9: Работа с формами.
              
+
              Система шаблонов Django защищает от большинства XSS атак,  экранируя определённые символы, считающиеся "опасными" в HTML. Мы можем продемонстрировать это, попытавшись внедрить произвольный JavaScript код в наше приложение LocalLibrary через форму добавления автора, созданную в Руководство часть 9: Работа с формами.
              
 
 
                
  
              1. Запустите веб-сайт, используя сервер разработки (python3 manage.py runserver).
                2. 
@@ -54,7 +54,7 @@ translation_of: Learn/Server-side/Django/web_application_security
   
            • Нажмите Submit для сохранения записи.
              • 
- 
            • После сохранения автора - он должен быть отображен, как показано ниже. Так как сработала защита от XSS - команда alert() не будет запущена. Вместо этого скрипт будет отображаться как обычный текст.Author detail view XSS test
              • 
+ 
            • После сохранения автора - он должен быть отображён, как показано ниже. Так как сработала защита от XSS - команда alert() не будет запущена. Вместо этого скрипт будет отображаться как обычный текст.Author detail view XSS test
              • Если вы посмотрите исходный HTML код, вы увидите, что "опасные" символы - например такие как скобки тегов - были заменены на их безопасные эквивалентные html сущности (к примеру > на &gt;)
              
@@ -64,7 +64,7 @@ translation_of: Learn/Server-side/Django/web_application_security
 
 
              Использование шаблонов Django защищает вас от большинства XSS атак. Однако существует возможность отключения данной защиты, при котором экранирование не будет автоматически применятся ко всем полям, которые не должны будут заполнятся пользователем(к примеру, поле help_text обычно заполняется не пользователем, поэтому Django не будет экранировать его значение).
              
 
-
              Так же XSS атаки могут быть осуществлены через другие ненадежные источники данных, такие как cookies, сторонние сервисы или загруженные файлы (и прочие источники, данные которых не были специально обработаны перед отображением на странице). Если вы отображаете данные из этих источников, вы должны добавить ваш собственный обработчик для фильтрации данных.
              
+
              Так же XSS атаки могут быть осуществлены через другие ненадёжные источники данных, такие как cookies, сторонние сервисы или загруженные файлы (и прочие источники, данные которых не были специально обработаны перед отображением на странице). Если вы отображаете данные из этих источников, вы должны добавить ваш собственный обработчик для фильтрации данных.
              Межсайтовая подделка запроса (CSRF)
              
 
@@ -93,9 +93,9 @@ translation_of: Learn/Server-side/Django/web_application_security
 </html>
 
 
-
              Запустите веб-сервер разработки и войдите в аккаунт супер-пользователя. Скопируйте приведенный выше текст в файл и затем откройте его в браузере. Вы должны получить CSRF ошибку, потому что у Django есть защита от атак данного вида!
              
+
              Запустите веб-сервер разработки и войдите в аккаунт супер-пользователя. Скопируйте приведённый выше текст в файл и затем откройте его в браузере. Вы должны получить CSRF ошибку, потому что у Django есть защита от атак данного вида!
              
 
-
              Механизм защиты заключается в том, что вы добавляете тег шаблона {% csrf_token %} в вашу форму. Этот токен будет отображен в вашем HTML как показано ниже, со значением, уникальным для каждого запрашивающего форму пользователя.
              
+
              Механизм защиты заключается в том, что вы добавляете тег шаблона {% csrf_token %} в вашу форму. Этот токен будет отображён в вашем HTML как показано ниже, со значением, уникальным для каждого запрашивающего форму пользователя.
              <input type='hidden' name='csrfmiddlewaretoken' value='0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW' />
 
              
@@ -138,7 +138,7 @@ translation_of: Learn/Server-side/Django/web_application_security
 
 
              Подводим итоги
              
 
-
              Django имеет методы обеспечения защиты от распространенных видов атак, включая XSS и CSRF атаки. В данной статье мы продемонстрировали, как различные виды атак обрабатываются Django на примере нашего приложения LocalLibrary. Мы так же кратко рассмотрели другие виды уязвимостей и методы защиты от них.
              
+
              Django имеет методы обеспечения защиты от распространённых видов атак, включая XSS и CSRF атаки. В данной статье мы продемонстрировали, как различные виды атак обрабатываются Django на примере нашего приложения LocalLibrary. Мы так же кратко рассмотрели другие виды уязвимостей и методы защиты от них.
              Это было очень краткое погружение в вопрос веб-безопасности. Мы крайне рекомендуем вам прочитать Безопасность в Django для более глубокого понимания.
              
 
diff --git a/files/ru/learn/server-side/express_nodejs/development_environment/index.html b/files/ru/learn/server-side/express_nodejs/development_environment/index.html
index 50a624c3cb..c0c188f731 100644
--- a/files/ru/learn/server-side/express_nodejs/development_environment/index.html
+++ b/files/ru/learn/server-side/express_nodejs/development_environment/index.html
@@ -35,7 +35,7 @@ translation_of: Learn/Server-side/Express_Nodejs/development_environment
  NPM также можно использовать для (глобальной) установки Express Application Generator, удобного инструмента для создания каркасных веб-приложений Express, которые следуют шаблону MVC. Генератор приложений является необязательным, поскольку вам не нужно использовать этот инструмент для создания приложений, использующих Express, или для приложений для создан Express, имеющих одинаковую архитектурную разметку или зависимости. Мы будем использовать его, потому что это значительно облегчает начало работы и продвигает модульную структуру приложения.
              
-
              Примечание: в отличие от некоторых других веб-сред, среда разработки не включает отдельный веб-сервер разработки. В Node / Express веб-приложение создает и запускает собственный веб-сервер!
              
+
              Примечание: в отличие от некоторых других веб-сред, среда разработки не включает отдельный веб-сервер разработки. В Node / Express веб-приложение создаёт и запускает собственный веб-сервер!
              
 
              Существуют и другие периферийные инструменты, которые являются частью типичной среды разработки, в том числе текстовые редакторы или IDE для редактирования кода и инструменты управления исходным кодом, такие как Git, для безопасного управления различными версиями вашего кода. Мы предполагаем, что вы уже установили подобные инструменты (в частности, текстовый редактор).
              
@@ -50,11 +50,11 @@ translation_of: Learn/Server-side/Express_Nodejs/development_environment
 
 
              Существует множество выпусков Node - более новые выпуски содержат исправления ошибок, поддержку более свежих версий стандартов ECMAScript (JavaScript) и улучшения API-интерфейсов Node.
              
  
              
- Как правило, вы должны использовать самый последний выпуск LTS (с долгосрочной поддержкой), поскольку он будет более стабильным, чем «текущий» выпуск, при этом все еще имея относительно недавние функции (и все еще активно поддерживается). Вы должны использовать Текущий выпуск, если вам нужна функция, которой нет в версии LTS.
              
+ Как правило, вы должны использовать самый последний выпуск LTS (с долгосрочной поддержкой), поскольку он будет более стабильным, чем «текущий» выпуск, при этом все ещё имея относительно недавние функции (и все ещё активно поддерживается). Вы должны использовать Текущий выпуск, если вам нужна функция, которой нет в версии LTS.
              
  
              
  Для Express вы всегда должны использовать последнюю версию.
              
 
-
              Как насчет баз данных и других зависимостей?
              
+
              Как насчёт баз данных и других зависимостей?
              Другие зависимости, такие как драйверы баз данных, механизмы шаблонов, механизмы аутентификации и т. д., Являются частью приложения и импортируются в среду приложения с помощью диспетчера пакетов NPM. Мы обсудим их в следующих статьях для конкретных приложений.
              
 
@@ -78,7 +78,7 @@ translation_of: Learn/Server-side/Express_Nodejs/development_environment
    
            • Нажмите кнопку, чтобы загрузить сборку LTS, которая «Рекомендуется для большинства пользователей».
              • 
- 
            • Установите Node, дважды щелкнув по загруженному файлу и следуя инструкциям по установке.
              • 
+ 
            • Установите Node, дважды щёлкнув по загруженному файлу и следуя инструкциям по установке.
              • Ubuntu 16.04
              
@@ -98,7 +98,7 @@ sudo apt-get install -y nodejs
              Проверка вашей установки Nodejs и NPM
              
 
-
              Самый простой способ проверить, установлен ли этот узел, - это запустить команду «версия» в своем терминале / командной строке и проверить, что возвращается строка версии:
              
+
              Самый простой способ проверить, установлен ли этот узел, - это запустить команду «версия» в своём терминале / командной строке и проверить, что возвращается строка версии:
              >node -v
 v8.11.3
              
@@ -137,7 +137,7 @@ server.listen(port, hostname, () => {
   
              Код импортирует модуль «http» и использует его для создания сервера (createServer ()), который обрабатывает HTTP-запросы на порту 3000. Затем сценарий выводит на консоль сообщение о том, какой URL-адрес браузера можно использовать для тестирования сервера. Функция createServer () принимает в качестве аргумента колбэк-функцию, которая будет вызываться при получении HTTP-запроса - она просто возвращает ответ с кодом состояния HTTP 200 («ОК») и простым текстом «Hello World».
              
-  
              Замечание: не беспокойтесь, если вы еще не совсем понимаете, что делает этот код! Мы объясним наш код более подробно, как только мы начнем использовать Express!
              
+  
              Замечание: не беспокойтесь, если вы ещё не совсем понимаете, что делает этот код! Мы объясним наш код более подробно, как только мы начнём использовать Express!
              
   
            • Запустите сервер, перейдя в тот же каталог, что и ваш файл hellonode.js в командной строке, и вызвав узел вместе с именем скрипта, например так:
@@ -153,7 +153,7 @@ Server running at http://127.0.0.1:3000/
 
              Помимо самого Node, NPM является наиболее важным инструментом для работы с приложениями Node. NPM используется для получения любых пакетов (библиотек JavaScript), которые необходимы приложению для разработки, тестирования и / или производства, а также может использоваться для запуска тестов и инструментов, используемых в процессе разработки.
              
 
 
              
-
              Замечание:  С точки зрения Node, Express - это просто еще один пакет, который вам нужно установить с помощью NPM, а затем установить его в своем собственном коде.
              
+
              Замечание:  С точки зрения Node, Express - это просто ещё один пакет, который вам нужно установить с помощью NPM, а затем установить его в своём собственном коде.
              
 
              
 
 
              Вы можете вручную использовать NPM для получения каждого необходимого пакета отдельно. Обычно мы вместо этого управляем зависимостями, используя простой текстовый файл с именем package.json. В этом файле перечислены все зависимости для конкретного «пакета» JavaScript, включая имя пакета, версию, описание, исходный файл для выполнения, производственные зависимости, зависимости разработки, версии Node, с которыми он может работать, и т. Д. Файл package.json должен содержать все, что нужно NPM для загрузки и запуска вашего приложения (если вы пишете библиотеку многократного использования, вы можете использовать это определение для загрузки пакета в репозиторий npm и сделать его доступным для других пользователей).
              
@@ -163,7 +163,7 @@ Server running at http://127.0.0.1:3000/
 
              Следующие шаги показывают, как вы можете использовать NPM для загрузки пакета, сохранить его в зависимостях проекта, а затем потребовать его в приложении Node.
              
 
 
              
-
              Замечание:  Здесь мы показываем инструкции для получения и установки пакета Express. Позже мы покажем, как этот пакет и другие уже указаны для нас с помощью Express Application Generator. Этот раздел предоставлен, потому что полезно понять, как работает NPM и что создается генератором приложений.
              
+
              Замечание:  Здесь мы показываем инструкции для получения и установки пакета Express. Позже мы покажем, как этот пакет и другие уже указаны для нас с помощью Express Application Generator. Этот раздел предоставлен, потому что полезно понять, как работает NPM и что создаётся генератором приложений.
              
 
              
 
 
                
@@ -225,7 +225,7 @@ app.listen(8000, () => {
 });
 
 
-  
                Этот код показывает минимальное веб-приложение Express «HelloWorld». Это импортирует модуль «экспресс» и использует его для создания сервера (приложения), который обрабатывает HTTP-запросы на порту 8000 и выводит на консоль сообщение, объясняющее, какой URL-адрес браузера можно использовать для тестирования сервера. Функция app.get () отвечает только на запросы HTTP GET с указанным URL-путем ('/'), в этом случае вызывая функцию для отправки нашего Hello World! сообщение.
                
+  
                Этот код показывает минимальное веб-приложение Express «HelloWorld». Это импортирует модуль «экспресс» и использует его для создания сервера (приложения), который обрабатывает HTTP-запросы на порту 8000 и выводит на консоль сообщение, объясняющее, какой URL-адрес браузера можно использовать для тестирования сервера. Функция app.get () отвечает только на запросы HTTP GET с указанным URL-путём ('/'), в этом случае вызывая функцию для отправки нашего Hello World! сообщение.
                
    
                
    Создайте файл с именем index.js в корне каталога приложения «myapp» и передайте ему содержимое, показанное выше.
                
  
@@ -239,7 +239,7 @@ Example app listening on port 8000
 
 
                Зависимости разработки
                
 
-
                Если зависимость используется только во время разработки, вы должны вместо этого сохранить ее как «зависимость разработки» (чтобы пользователям вашего пакета не приходилось устанавливать ее в производстве). Например, чтобы использовать популярный инструмент JavaScript Linting eslint, вы должны вызвать NPM, как показано ниже:
                
+
                Если зависимость используется только во время разработки, вы должны вместо этого сохранить её как «зависимость разработки» (чтобы пользователям вашего пакета не приходилось устанавливать её в производстве). Например, чтобы использовать популярный инструмент JavaScript Linting eslint, вы должны вызвать NPM, как показано ниже:
                
 
 
                npm install eslint --save-dev
                
 
@@ -284,7 +284,7 @@ npm run lint
 
 
                Установка Express Application Generator
                
 
-
                Инструмент Express Application Generator создает «скелет» приложения Express. Установите генератор, используя NPM, как показано (флаг -g устанавливает инструмент глобально, чтобы вы могли вызывать его из любого места):
                
+
                Инструмент Express Application Generator создаёт «скелет» приложения Express. Установите генератор, используя NPM, как показано (флаг -g устанавливает инструмент глобально, чтобы вы могли вызывать его из любого места):
                
 
 
                npm install express-generator -g
                
 
@@ -302,7 +302,7 @@ npm run lint
 
                NPM создаст новое приложение Express в подпапке вашего текущего местоположения, отображая процесс сборки на консоли. По завершении инструмент отобразит команды, которые необходимо ввести, чтобы установить зависимости Node и запустить приложение.
                
 
 
                
-
                Новое приложение будет иметь файл package.json в своем корневом каталоге. Вы можете открыть это, чтобы увидеть, какие зависимости установлены, включая Express и библиотеку шаблонов Jade:
                
+
                Новое приложение будет иметь файл package.json в своём корневом каталоге. Вы можете открыть это, чтобы увидеть, какие зависимости установлены, включая Express и библиотеку шаблонов Jade:
                
 
 
                {
   "name": "helloworld",
@@ -341,7 +341,7 @@ SET DEBUG=helloworld:* | npm start
 DEBUG=helloworld:* npm start
 
                
 
-
                Команда DEBUG создает полезное ведение журнала, что приводит к выводу, подобному показанному ниже.
                
+
                Команда DEBUG создаёт полезное ведение журнала, что приводит к выводу, подобному показанному ниже.
                
 
 
                >SET DEBUG=helloworld:* & npm start
 
@@ -354,7 +354,7 @@ DEBUG=helloworld:* npm start
 
 
                Express - Generated App Default Screen
                
 
-
                Мы поговорим больше о сгенерированном приложении, когда перейдем к статье о создании каркасного приложения.
                
+
                Мы поговорим больше о сгенерированном приложении, когда перейдём к статье о создании каркасного приложения.
                
 
 
                  
 
                
@@ -363,7 +363,7 @@ DEBUG=helloworld:* npm start
 
 
                Теперь на вашем компьютере установлена и запущена среда разработки Node, которую можно использовать для создания веб-приложений Express. Вы также увидели, как NPM можно использовать для импорта Express в приложение, а также как вы можете создавать приложения с помощью инструмента Express Application Generator и затем запускать их.
                
  
                
- В следующей статье мы начнем работу с учебным пособием по созданию полноценного веб-приложения с использованием этой среды и связанных инструментов.
                
+ В следующей статье мы начнём работу с учебным пособием по созданию полноценного веб-приложения с использованием этой среды и связанных инструментов.
                
 
 
                Смотрите также
                
 
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 15097717f0..219f5639b0 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
@@ -3,7 +3,7 @@ title: Список авторов. Тест - список жанров
 slug: Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page
 ---
-
                Страница списка авторов должна показывать список всех авторов, хранимых в БД, причем каждое имя автора должно быть связано со страницей подробностей для этого автора. Дата рождения автора и дата смерти должны выводиться в одной строке после имени автора.
                
+
                Страница списка авторов должна показывать список всех авторов, хранимых в БД, причём каждое имя автора должно быть связано со страницей подробностей для этого автора. Дата рождения автора и дата смерти должны выводиться в одной строке после имени автора.
                
 
 
                Контроллер
                
 
@@ -74,8 +74,8 @@ block content
   
  
  
              1. Отображающий шаблон должен быть назван genre_list.pug.
                2. 
- 
              2. Шаблону для отображения должны быть переданы переменные title (строка 'Genre List') и genre_list (the list of список жанров, который вернет колбэк-функция Genre.find().
                3. 
- 
              3. Представление должно соответствовать скриншоту, приведенному ранее (оно должно иметь структуру и формат, похожие на таковые в представлении списка авторов, за исключением, конечно, продолжительности жизни, так как для жанров даты не заданы).
                4. 
+ 
              4. Шаблону для отображения должны быть переданы переменные title (строка 'Genre List') и genre_list (the list of список жанров, который вернёт колбэк-функция Genre.find().
                5. 
+ 
              5. Представление должно соответствовать скриншоту, приведённому ранее (оно должно иметь структуру и формат, похожие на таковые в представлении списка авторов, за исключением, конечно, продолжительности жизни, так как для жанров даты не заданы).
                6. 
 
              
 
 
              Далее
              
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html
index fbbf8c9622..6bbab5a709 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html
@@ -3,7 +3,7 @@ title: Страница списка книг
 slug: Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page
 ---
-
              Далее мы реализуем нашу страницу списка книг. На этой странице должен отображаться список всех книг и их авторов в базе данных, причем каждое название книги является гиперссылкой на соответствующую страницу сведений о книге.
              
+
              Далее мы реализуем нашу страницу списка книг. На этой странице должен отображаться список всех книг и их авторов в базе данных, причём каждое название книги является гиперссылкой на соответствующую страницу сведений о книге.
              
 
 
              Контроллер
              
 
@@ -24,7 +24,7 @@ exports.book_list };
 
-
              Метод использует функцию моделиfind() для возврата всех объектов Book, выбрав для возврата только заголовок и автора, поскольку нам не нужны другие поля (он также вернет _id и виртуальные поля). Здесь мы также вызываем populate() on Book, указывая поле  author —это заменит сохраненный идентификатор автора книги полными сведениями об авторе.
              
+
              Метод использует функцию моделиfind() для возврата всех объектов Book, выбрав для возврата только заголовок и автора, поскольку нам не нужны другие поля (он также вернёт _id и виртуальные поля). Здесь мы также вызываем populate() on Book, указывая поле  author —это заменит сохранённый идентификатор автора книги полными сведениями об авторе.
              
 
 
              При успешном выполнении, колбэк передаст запрос на отрисовку шаблона book_list(.pug), передаст title иbook_list (список книг с автором) в качестве переменных.
              
 
@@ -46,7 +46,7 @@ block content
   else
     li There are no books.
 
-
              View расширит базовый шаблон layout.pug и переопределит block с именем 'content'. Он отображает  title который мы передали из контроллера (с помощью метода render() ), а затем перебирает переменную book_list  используя синтаксис each-in-else . Для каждой книги создается элемент списка, отображающий название книги в виде ссылки на страницу сведений о книге, за которой следует имя автора. Если в  book_list нет книг,  то выполняется else, и  отображается текст "нет книг".'
              
+
              View расширит базовый шаблон layout.pug и переопределит block с именем 'content'. Он отображает  title который мы передали из контроллера (с помощью метода render() ), а затем перебирает переменную book_list  используя синтаксис each-in-else . Для каждой книги создаётся элемент списка, отображающий название книги в виде ссылки на страницу сведений о книге, за которой следует имя автора. Если в  book_list нет книг,  то выполняется else, и  отображается текст "нет книг".'
              
 
 
              
 
              Заметка: Мы используем book.url  для предоставления ссылки на подробную запись для каждой книги (мы реализовали этот маршрут, но не страницу). Это виртуальное свойство модели Book , которая использует поле  _id для создания уникального URL.
              
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 6a924829bf..20b7d94f6a 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
@@ -9,7 +9,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_li
 
 
              Функция контроллера списка BookInstance требуется для получения списка всех экземпляров некоторой книги, для получения информации, связанной с книгой, и для передачи полученного списка в шаблон для отображения.
              
 
-
              Откройте файл /controllers/bookinstanceController.js. Найдите экспортируемый метод bookinstance_list() контроллера и замените его следующим кодом (измененный код выделен жирным).
              
+
              Откройте файл /controllers/bookinstanceController.js. Найдите экспортируемый метод bookinstance_list() контроллера и замените его следующим кодом (изменённый код выделен жирным).
              
 
 
              // Display list of all BookInstances.
 exports.bookinstance_list = function(req, res, next) {
@@ -30,7 +30,7 @@ exports.bookinstance_list Представление
 
-
              Создайте файл  /views/bookinstance_list.pug и скопируйте в него текст, приведенный ниже.
              
+
              Создайте файл  /views/bookinstance_list.pug и скопируйте в него текст, приведённый ниже.
              
 
 
              extends layout
 
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 2180be7c4b..84e9925d43 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
@@ -46,7 +46,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting
         //span  (Due: #{val.due_back} )
         span  (Due: #{val.due_back_formatted} )       
              
 
-
              Вот и все. Если вы перейдете к  All book-instances в боковом меню, вы должны увидеть все даты  в привлекательном формате!
              
+
              Вот и все. Если вы перейдёте к  All book-instances в боковом меню, вы должны увидеть все даты  в привлекательном формате!
              
 
 
               
              
 
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 f951a355e5..c09963fb70 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
@@ -6,7 +6,7 @@ tags:
   - Часть 5
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async
 ---
-
              Код контроллера для некоторых страниц библиотеки будет зависеть от результатов многих асинхронных запросов, которые должны выполняться в определенном порядке или параллельно. Для того, чтобы управлять потоком выполнения, и выводить страницы, когда получена вся необходимая информация, будет использован async - известный модуль node.
              
+
              Код контроллера для некоторых страниц библиотеки будет зависеть от результатов многих асинхронных запросов, которые должны выполняться в определённом порядке или параллельно. Для того, чтобы управлять потоком выполнения, и выводить страницы, когда получена вся необходимая информация, будет использован async - известный модуль node.
              
 
 
              
 
              Note:  В JavaScript существует много других способов управления асинхронным поведением и потоком выполнения, включая такой относительно  новый элемент языка JacaScript как Promises (обещания, промисы).
              
@@ -17,12 +17,12 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us
 
                
  
              • async.parallel() для осуществления любых операций, которые должны выполняться параллельно.
                • 
  
              • async.series() если нужно иметь уверенность, что асинхронные операции выполняются последовательно.
                • 
- 
              • async.waterfall() для операций, которые должны выполняться последовательно, причем каждая операция зависит от результатов предыдущих операций.
                • 
+ 
              • async.waterfall() для операций, которые должны выполняться последовательно, причём каждая операция зависит от результатов предыдущих операций.
                • 
 
              
 
 
              Почему это необходимо?
              
 
-
              Большинство методов, которые используются в  Express - асинхронные - вы определяете выполняемую операцию, передавая  колбэк-функцию. Метод завершается немедленно, а колбэк-функция вызывается тогда, когда завершилась запрошенная операция. По соглашению, принятому в Express, колбэк-функция передает значение ошибки error  как первый параметр (или null при успехе) и результат функции (если есть) как второй параметр.
              
+
              Большинство методов, которые используются в  Express - асинхронные - вы определяете выполняемую операцию, передавая  колбэк-функцию. Метод завершается немедленно, а колбэк-функция вызывается тогда, когда завершилась запрошенная операция. По соглашению, принятому в Express, колбэк-функция передаёт значение ошибки error  как первый параметр (или null при успехе) и результат функции (если есть) как второй параметр.
              
 
 
              Если контроллер должен выполнить только одну асинхронную операцию, чтобы получить информацию для представления страницы, то реализация проста - мы просто представляем шаблон в колбэке. Фрагмент кода (ниже) демонстрирует это для функции, которая подсчитывает количество элементов модели SomeModel (применяя метод Mongoose count() ):
              
 
@@ -37,9 +37,9 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us
 }
 
              
 
-
              Однако что, если требуется сделать множественные асинхронные запросы, и результат нельзя представить, пока не завершились все операции? Наивная реализация могла бы использовать "венок" запросов, запуская последующие запросы в колбэках предыдущих, и представляя ответ в последнем колбэке. Проблема такого подхода состоит в том, что запросы должны выполняться последовательно, хотя, вероятно, было бы более эффективно выполнять их параллельно. Это также может привести к усложненному вложенному коду, что обычно называют адом колбэков ( callback hell ).
              
+
              Однако что, если требуется сделать множественные асинхронные запросы, и результат нельзя представить, пока не завершились все операции? Наивная реализация могла бы использовать "венок" запросов, запуская последующие запросы в колбэках предыдущих, и представляя ответ в последнем колбэке. Проблема такого подхода состоит в том, что запросы должны выполняться последовательно, хотя, вероятно, было бы более эффективно выполнять их параллельно. Это также может привести к усложнённому вложенному коду, что обычно называют адом колбэков ( callback hell ).
              
 
-
              Намного лучше было бы выполнять все запросы параллельно, и иметь единственную колбэк-функцию, которая будет вызвана после того как все запросы выполнены. Именно такое выполнение операций модуль Async делает легким и простым!
              
+
              Намного лучше было бы выполнять все запросы параллельно, и иметь единственную колбэк-функцию, которая будет вызвана после того как все запросы выполнены. Именно такое выполнение операций модуль Async делает лёгким и простым!
              
 
 
              Параллельные асинхронные операции
              
 
@@ -47,7 +47,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us
 
 
              Первый аргумент в async.parallel() - это коллекция асинхронных функций, которые требуется выполнить (массив, объект или другой итерируемый элемент). Каждая функция получает колбэк-функцию callback(err, result) , которую она должна вызвать при завершении, с ошибкой err (может быть null) и, возможно, со значением результата results.
              
 
-
              Возможный второй аргумент для  async.parallel() - это callback -функция, которая должна быть вызвана после завершения всех функций, указанных в первом аргументе. Эта функция вызывается с аргументом ошибки и результатом - коллекцией результатов отдельных асинхронных операций. Тип коллекции - такой же, как и тип первого аргумента async.parallel (т.е. если передается массив асинхронных функций, итоговая колбэк-функция будет вызвана с массивом результатов). Если любая из параллельных функций сообщила об ошибке, сразу вызывается итоговая колбэк-функция, которая возвращает ошибку.
              
+
              Возможный второй аргумент для  async.parallel() - это callback -функция, которая должна быть вызвана после завершения всех функций, указанных в первом аргументе. Эта функция вызывается с аргументом ошибки и результатом - коллекцией результатов отдельных асинхронных операций. Тип коллекции - такой же, как и тип первого аргумента async.parallel (т.е. если передаётся массив асинхронных функций, итоговая колбэк-функция будет вызвана с массивом результатов). Если любая из параллельных функций сообщила об ошибке, сразу вызывается итоговая колбэк-функция, которая возвращает ошибку.
              
 
 
              Пример ниже показывает, как это работает в случае, когда первый аргумент является объектом. Как видно, результаты возвращаются в объекте с такими же именами свойств, как у переданных функций.
              
 
@@ -67,7 +67,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us
 
 
              Последовательные асинхронные операции
              
 
-
              Для выполнения нескольких асинхронных операций последовательно используется метод async.series() , при этом последующие функции не зависят от результатов предыдущих функций. Метод определяется и ведет себя так же, как и async.parallel().
              
+
              Для выполнения нескольких асинхронных операций последовательно используется метод async.series() , при этом последующие функции не зависят от результатов предыдущих функций. Метод определяется и ведёт себя так же, как и async.parallel().
              
 
 
              async.series({
   one: function(callback) { ... },
@@ -82,7 +82,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us
 );
              
 
 
              
-
              Заметка: Спецификация языка ECMAScript (JavaScript) устанавливает, что порядок  в перечислении объектов не определен, поэтому возможно, что функции не будут вызываться в том порядке, в котором вы их задали на всех платформах. Если порядок вызова действительно важен, вместо объекта следует передавать массив, как показано ниже.
              
+
              Заметка: Спецификация языка ECMAScript (JavaScript) устанавливает, что порядок  в перечислении объектов не определён, поэтому возможно, что функции не будут вызываться в том порядке, в котором вы их задали на всех платформах. Если порядок вызова действительно важен, вместо объекта следует передавать массив, как показано ниже.
              
 
              
 
 
              async.series([
@@ -105,7 +105,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us
 
 
              Выполнение нескольких асинхронных операций последовательно, когда каждая операция зависит от результатов предыдущих операций, осуществляется методом async.waterfall().
              
 
-
              Функции-callback, которая вызываются асинхронными функциями , содержит null как первый аргумент, и результаты в следующих аргументах. Каждая функция в последовательности (кроме первой) как аргументы использует результаты предыдущих функция, а колбэк-функция является последним аргументом. Когда  операции завершаются, вызывается финальная колбэк-функция, аргументы которой - объект err и результат последней операции. Как это работает, станет более ясным после рассмотрения примера - фрагмента кода, приведенного ниже ( пример взят из документации async):
              
+
              Функции-callback, которая вызываются асинхронными функциями , содержит null как первый аргумент, и результаты в следующих аргументах. Каждая функция в последовательности (кроме первой) как аргументы использует результаты предыдущих функция, а колбэк-функция является последним аргументом. Когда  операции завершаются, вызывается финальная колбэк-функция, аргументы которой - объект err и результат последней операции. Как это работает, станет более ясным после рассмотрения примера - фрагмента кода, приведённого ниже ( пример взят из документации async):
              
 
 
              async.waterfall([
   function(callback) {//первая функция в цепочке
@@ -126,7 +126,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us
 
 
              Установка async
              
 
-
              Установим модуль async при помощи менеджера пакетов NPM, чтобы использовать его в своем коде. Это делается обычным способом - откроем окно команд в корне проекта LocalLibrary и введем команду:
              
+
              Установим модуль async при помощи менеджера пакетов NPM, чтобы использовать его в своём коде. Это делается обычным способом - откроем окно команд в корне проекта LocalLibrary и введём команду:
              
 
 
              npm install 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 b3e40ff7a9..c62d6f9364 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
@@ -43,7 +43,7 @@ exports.genre_detail = function(req, res, next) {
 };
 
              
 
-
              Метод использует async.parallel() для параллельного запроса названия жанра и связанных с ним книг, причем колбэк-функция возвращает страницу, когда (если) оба запроса завершились успешно.
              
+
              Метод использует async.parallel() для параллельного запроса названия жанра и связанных с ним книг, причём колбэк-функция возвращает страницу, когда (если) оба запроса завершились успешно.
              
 
 
              The ID of the required genre record is encoded at the end of the URL and extracted automatically based on the route definition (/genre/:id). The ID is accessed within the controller via the request parameters: req.params.id. It is used in Genre.findById() to get the current genre. It is also used to get all Book objects that have the genre ID in their genre field: Book.find({ 'genre': req.params.id }).
              
 
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.html
index 2458131cd1..05b2dc3976 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.html
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.html
@@ -14,20 +14,20 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Home_page
 
              // GET catalog home page.
 router.get('/', book_controller.index);  //This actually maps to /catalog/ because we import the route with a /catalog prefix
              
 
-
              Параметр колбэк-функции определен в /controllers/bookController.js:
              
+
              Параметр колбэк-функции определён в /controllers/bookController.js:
              
 
 
              exports.index = function(req, res, next) {
     res.send('NOT IMPLEMENTED: Site Home Page');
 }
              
 
-
              Именно эту функцию контроллера мы расширим, чтобы получать информацию из моделей и затем отображать ее, используя шаблоны (представления).
              
+
              Именно эту функцию контроллера мы расширим, чтобы получать информацию из моделей и затем отображать её, используя шаблоны (представления).
              
 
 
              Контроллер
              
 
-
              Функция контроллера индекса должна получать информацию о том, сколько книг (Book), экземпляров книг (BookInstance), сколько из них доступно, сколько авторов (Author), жанров (Genre) имеется в БД, должна поместить эту информацию в шаблон, чтобы создать  HTML-страницу, после чего вернуть ее в  HTTP-ответе.
              
+
              Функция контроллера индекса должна получать информацию о том, сколько книг (Book), экземпляров книг (BookInstance), сколько из них доступно, сколько авторов (Author), жанров (Genre) имеется в БД, должна поместить эту информацию в шаблон, чтобы создать  HTML-страницу, после чего вернуть её в  HTTP-ответе.
              
 
 
              
-
              Заметка: Количество экземпляров в каждой модели вычисляется при помощи метода countDocuments() . Он вызывается для модели с возможным набором условий, необходимых для проверки соответствия первому аргументу и колбэк-функции второго аргумента (обсуждалось ранее в "Использование базы данных с Mongoose" Using a Database (with Mongoose)), причем можно вернуть также запрос Query, а затем выполнить его позже при помощи callback. Эта  колбэк-функция будет выполняться, когда БД вернет количество записей.  Значение ошибки (or null) будет первым параметром, а количество записей (или null, если была ошибка) -  вторым параметром.
              
+
              Заметка: Количество экземпляров в каждой модели вычисляется при помощи метода countDocuments() . Он вызывается для модели с возможным набором условий, необходимых для проверки соответствия первому аргументу и колбэк-функции второго аргумента (обсуждалось ранее в "Использование базы данных с Mongoose" Using a Database (with Mongoose)), причём можно вернуть также запрос Query, а затем выполнить его позже при помощи callback. Эта  колбэк-функция будет выполняться, когда БД вернёт количество записей.  Значение ошибки (or null) будет первым параметром, а количество записей (или null, если была ошибка) -  вторым параметром.
              
 
 
              SomeModel.countDocuments({ a_model_field: 'match_value' }, function (err, count) {
  // ... do something if there is an err
@@ -43,7 +43,7 @@ exports.index = function(req, res, next) {
  res.send('NOT IMPLEMENTED: Site Home Page');
 }
              
 
-
              Замените весь код, показанный выше, на следующий фрагмент кода. Первое, что он делает - импортирует (require())  все модели (выделено жирным).  Это требуется, поскольку они нужны для подсчета числа записей. Затем импортируется модуль async .
              
+
              Замените весь код, показанный выше, на следующий фрагмент кода. Первое, что он делает - импортирует (require())  все модели (выделено жирным).  Это требуется, поскольку они нужны для подсчёта числа записей. Затем импортируется модуль async .
              
 
 
              var Book = require('../models/book');
 var Author = require('../models/author');
@@ -76,7 +76,7 @@ exports.index = function(req, res) {
     });
 };
              
 
-
              Метод async.parallel() передает объект с функциями для получения количества элементов каждой модели. Все эти функции стартуют одновременно. Когда все они завершатся,  будет вызвана финальная колбэк-функция, в итоговом параметре которой содержится нужный нам результат (или ошибка).
              
+
              Метод async.parallel() передаёт объект с функциями для получения количества элементов каждой модели. Все эти функции стартуют одновременно. Когда все они завершатся,  будет вызвана финальная колбэк-функция, в итоговом параметре которой содержится нужный нам результат (или ошибка).
              
 
 
              При успешном завершении колбэк-функции она вызывает res.render(), у которой в качестве параметров - представление (шаблон)  'index' и объект, содержащий данные, которые следует поместить в шаблон (среди них - количества элементов в моделях). Данные представлены как пары ключ-значение, и могут быть получены в шаблоне по ключу.
              
 
@@ -86,7 +86,7 @@ exports.index = function(req, res) {
 
 
              Представление
              
 
-
              Откройте файл  /views/index.pug и замените его содержимое текстом, приведенным ниже
              
+
              Откройте файл  /views/index.pug и замените его содержимое текстом, приведённым ниже
              
 
 
              extends layout
 
@@ -108,7 +108,7 @@ block content
       li #[strong Authors:] !{data.author_count}
       li #[strong Genres:] !{data.genre_count}
              
 
-
              Представление несложное. Мы расширили базовый шаблон  layout.pug, переопределив блок (block) с именем 'content'. Первый заголовок h1 будет экранированным текстом - значением переменной title ,variable that  которая передается в функцию render() —заметьте, что применение 'h1='  говорит, что следующий текст рассматривается как выражение JavaScript. Затем расположен параграф, знакомящий с  LocalLibrary.
              
+
              Представление несложное. Мы расширили базовый шаблон  layout.pug, переопределив блок (block) с именем 'content'. Первый заголовок h1 будет экранированным текстом - значением переменной title ,variable that  которая передаётся в функцию render() —заметьте, что применение 'h1='  говорит, что следующий текст рассматривается как выражение JavaScript. Затем расположен параграф, знакомящий с  LocalLibrary.
              
 
 
              Под заголовком Dynamic content  мы проверяем, определена ли переданная из функции render() переменная error. Если да, отмечаем ошибку. Если нет, выводим ( как список) количества копий каждой модели, которые хранятся в переменной data.
              
 
@@ -118,12 +118,12 @@ block content
 
 
              Как это выглядит?
              
 
-
              Сейчас у нас есть все для того, чтобы показать страницу index. Запустите приложение и откройте браузер с адресом http://localhost:3000/. Если все задано правильно, ваш сайт должен иметь примерно такой вид, как на приведенном снимке экрана.
              
+
              Сейчас у нас есть все для того, чтобы показать страницу index. Запустите приложение и откройте браузер с адресом http://localhost:3000/. Если все задано правильно, ваш сайт должен иметь примерно такой вид, как на приведённом снимке экрана.
              
 
 
              Home page - Express Local Library site
              
 
 
              
-
              Заметка:  Элементы бокового меню использовать еще нельзя, так как адреса, представления и шаблоны для этих страниц еще не определены. Если вы попытаетесь их использовать, будет выведено сообщение об ошибке, например,  вида "NOT IMPLEMENTED: Book list" (НЕ РЕАЛИЗОВАНО: список книг), в зависимости от выбранного элемента меню.  Эти строковые литералы (которые будут замещены действительными данными) были заданы в различных файлах контроллеров в каталоге "controllers".
              
+
              Заметка:  Элементы бокового меню использовать ещё нельзя, так как адреса, представления и шаблоны для этих страниц ещё не определены. Если вы попытаетесь их использовать, будет выведено сообщение об ошибке, например,  вида "NOT IMPLEMENTED: Book list" (НЕ РЕАЛИЗОВАНО: список книг), в зависимости от выбранного элемента меню.  Эти строковые литералы (которые будут замещены действительными данными) были заданы в различных файлах контроллеров в каталоге "controllers".
              
 
              
 
 
              Next steps
              
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 bbe11606e8..4082c32f4a 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
@@ -7,7 +7,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data
 
 
              {{PreviousMenuNext("Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}
              
 
-
              Теперь мы готовы добавить страницы, на которых будут отображаться книги веб-сайта  LocalLibrary и другие данные. Страницы будут включать главную страницу, которая показывает сколько записей определенного типа мы имеем и отдельные страницы для детального просмотра записей. Попутно мы приобретем практический опыт в получении записей из баз данных и использовании шаблонов.
              
+
              Теперь мы готовы добавить страницы, на которых будут отображаться книги веб-сайта  LocalLibrary и другие данные. Страницы будут включать главную страницу, которая показывает сколько записей определённого типа мы имеем и отдельные страницы для детального просмотра записей. Попутно мы приобретём практический опыт в получении записей из баз данных и использовании шаблонов.
              
 
 
              • 
  
 
 
  
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
   
  
 
 
 
 
 
 
 
 
   
  
  
              
@@ -28,7 +28,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data
 
 
              Следующим шагом является обеспечение правильных реализаций для страниц, которые отображают информацию из библиотеки (мы рассмотрим реализацию страниц с формами для создания, обновления или удаления информации в последующих статьях). Это включает в себя обновление функций контроллера для извлечения записей с помощью наших моделей и определение шаблонов для отображения этой информации пользователям.
              
 
-
              Мы начнем с обзорных / основных тем, объясняющих, как управлять асинхронными операциями в функциях контроллера и как писать шаблоны с помощью Pug. Затем мы предоставим реализации для каждой из наших основных страниц" только для чтения " с кратким объяснением любых специальных или новых функций, которые они используют.
              
+
              Мы начнём с обзорных / основных тем, объясняющих, как управлять асинхронными операциями в функциях контроллера и как писать шаблоны с помощью Pug. Затем мы предоставим реализации для каждой из наших основных страниц" только для чтения " с кратким объяснением любых специальных или новых функций, которые они используют.
              
 
 
              В конце этой статьи вы должны иметь хорошее сквозное понимание того, как маршруты, асинхронные функции, представления и модели работают на практике.
              
 
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 449d197c96..7eeebc6e2a 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
@@ -17,7 +17,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer
 
 
              Конфигурация шаблона
              
 
-
              Когда создавался каркас (the skeleton website) веб-сайта LocalLibrary, он был настроен  на использование Pug . Можно было заметить, что модуль pug включен в зависимости в файле package.json, и установлен (app.set(...)) как движок представлений в файле app.js. Эта установка показывает,, что движок представлений -  pug, и что  Express должен искать шаблоны в подкаталоге /views.
              
+
              Когда создавался каркас (the skeleton website) веб-сайта LocalLibrary, он был настроен  на использование Pug . Можно было заметить, что модуль pug включён в зависимости в файле package.json, и установлен (app.set(...)) как движок представлений в файле app.js. Эта установка показывает,, что движок представлений -  pug, и что  Express должен искать шаблоны в подкаталоге /views.
              
 
 
              // View engine setup.
 app.set('views', path.join(__dirname, 'views'));
@@ -36,7 +36,7 @@ app.setПример файла шаблона (ниже) демонстрирует многие наиболее полезные черты  Pug.
              
 
-
              Сначала отметим, что файл отражает структуру типового HTML-файла, причем первое слов в (почти) каждой строке является элементом HTML, а отступы используются, чтобы показать вложенные элементы. Так, например, элемент body находится внутри элемента html, а элементы p  (параграфы) - внутри элемента body, и так далее. Невложенные элементы (т.е. индивидуальные параграфы) располагаются в отдельных строках.
              
+
              Сначала отметим, что файл отражает структуру типового HTML-файла, причём первое слов в (почти) каждой строке является элементом HTML, а отступы используются, чтобы показать вложенные элементы. Так, например, элемент body находится внутри элемента html, а элементы p  (параграфы) - внутри элемента body, и так далее. Невложенные элементы (т.е. индивидуальные параграфы) располагаются в отдельных строках.
              
 
 
              doctype html
 html(lang="en")
@@ -74,7 +74,7 @@ html(lang="en")
       each val in [1, 2, 3, 4, 5]
         li= val
              
 
-
              Атрибуты элементов определены в скобках после соответствующих элементов. В скобках располагается список пар имя атрибута=значение,причем элементы списка разделяются запятой или пробелом. Например:
              
+
              Атрибуты элементов определены в скобках после соответствующих элементов. В скобках располагается список пар имя атрибута=значение,причём элементы списка разделяются запятой или пробелом. Например:
              
 
 
                
  
              • script(type='text/javascript'), link(rel='stylesheet', href='/stylesheets/style.css')
                • 
@@ -83,7 +83,7 @@ html(lang="en")
 
 
                Значения всех атрибутов экранируются (т.е. такие символы как ">" заменяются эквивалентными кодами HTML как "&gt;") , чтобы предотвратить JavaScript инъекции и межсайтовые атаки.
                
 
-
                Если после тэга стоит знак = , следующий текст рассматривается как выражение JavaScript. Например, ниже в первой строке, содержимое тэга h1 будет переменной  title (которая определена в файле или передана в шаблон из Express). Во второй строке содержимое параграфа - это текстовая строка, соединенная с переменной  title . В каждом из случаев поведение по умолчанию - экранировать строки.
                
+
                Если после тэга стоит знак = , следующий текст рассматривается как выражение JavaScript. Например, ниже в первой строке, содержимое тэга h1 будет переменной  title (которая определена в файле или передана в шаблон из Express). Во второй строке содержимое параграфа - это текстовая строка, соединённая с переменной  title . В каждом из случаев поведение по умолчанию - экранировать строки.
                
 
 
                h1= title
 p= 'Evaluated and <em>escaped expression</em>:' + title
                
@@ -97,12 +97,12 @@ p This line has an un-escaped string: !{'plain text"). Например, дополнительный текст, приведенный ниже, будет показан в той же строке, что и предыдущий, но не будет относиться к ссылке.
                
+
                Можно использовать символ конвейера ('|') в начале строки, чтобы отметить простой текст ("plain text"). Например, дополнительный текст, приведённый ниже, будет показан в той же строке, что и предыдущий, но не будет относиться к ссылке.
                
 
 
                a(href='http://someurl/') Link text
 | Plain text
                
 
-
                Pug позволяет выполнять условные операции if, else , else if и unless— пример приведен ниже:
                
+
                Pug позволяет выполнять условные операции if, else , else if и unless— пример приведён ниже:
                
 
 
                if title
   p Переменная с именем "title" существует
@@ -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/create_bookinstance_form/index.html b/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html
index 13f409ea3c..f5b742715d 100644
--- a/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html
+++ b/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html
@@ -139,7 +139,7 @@ block content
 
 
                Как это выглядит?
                
 
-
                Запустите приложение и откройте в браузере  http://localhost:3000/. Затем выберите ссылку Create new book instance (copy). Если все настроено правильно, ваш сайт должен выглядеть примерно так, как показано на скриншоте. После того, как вы отправите валидный BookInstance, он должен быть сохранен, и вы попадете на страницу сведений.
                
+
                Запустите приложение и откройте в браузере  http://localhost:3000/. Затем выберите ссылку Create new book instance (copy). Если все настроено правильно, ваш сайт должен выглядеть примерно так, как показано на скриншоте. После того, как вы отправите валидный BookInstance, он должен быть сохранён, и вы попадёте на страницу сведений.
                
 
 
                
 
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 a92d787ec6..f03565426b 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,7 +5,7 @@ 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
                
 
@@ -32,7 +32,7 @@ exports.author_delete_get = function(req, res, next) {
 
 };
              
 
-
              Контроллер получает id экземпляра Author для удаления из параметра URL  (req.params.id). Он использует метод  async.parallel() , чтобы получить запись автора и параллельно вс связанные книги. Когда оба параметра авершины, он рендерит страницу  author_delete.pug, передает значения для title, author, и author_books.
              
+
              Контроллер получает id экземпляра Author для удаления из параметра URL  (req.params.id). Он использует метод  async.parallel() , чтобы получить запись автора и параллельно вс связанные книги. Когда оба параметра авершины, он рендерит страницу  author_delete.pug, передаёт значения для title, author, и author_books.
              
 
 
              
 
              Заметка: Если findById() не возвращает результатов, то автор отсутствует в базе данных. В этом случае удалять нечего, поэтому сразу выводим список всех авторов.
              
@@ -77,10 +77,10 @@ exports.author_delete_post = function(req, res, next) {
     });
 };              
 
-
              Сначала мы проверяем, что был предоставлен id (он отправляется через параметры тела формы, а не через версию в URL). Затем мы получаем автора и связанные с ним книги так же, как и для маршрута GET. Если книг нет, то удаляем объект автора и перенаправляем в список всех авторов. Если есть еще книги, то мы просто перерисовываем форму, передавая автора и список книг, которые нужно удалить.
              
+
              Сначала мы проверяем, что был предоставлен id (он отправляется через параметры тела формы, а не через версию в URL). Затем мы получаем автора и связанные с ним книги так же, как и для маршрута GET. Если книг нет, то удаляем объект автора и перенаправляем в список всех авторов. Если есть ещё книги, то мы просто перерисовываем форму, передавая автора и список книг, которые нужно удалить.
              
 
 
              
-
              Заметка: Мы можем проверить, возвращает ли вызов findbyid () какой-либо результат, и если нет, немедленно отобразить список всех авторов.Для краткости мы оставили код как есть выше (он все равно вернет список авторов, если id не будет найден, но это произойдет после findByIdAndRemove()).
              
+
              Заметка: Мы можем проверить, возвращает ли вызов findbyid () какой-либо результат, и если нет, немедленно отобразить список всех авторов.Для краткости мы оставили код как есть выше (он все равно вернёт список авторов, если id не будет найден, но это произойдёт после findByIdAndRemove()).
              
 
              
 
 
              View
              
@@ -128,7 +128,7 @@ block content
 
              Затем мы добавим элемент управления Delete в представление сведений об авторе (страница сведений-хорошее место для удаления записи).
              
 
 
              
-
              Note: В полном объеме контроль будет доступен только авторизованным пользователям. Однако на данный момент у нас нет системы авторизации!
              
+
              Note: В полном объёме контроль будет доступен только авторизованным пользователям. Однако на данный момент у нас нет системы авторизации!
              
 
              
 
 
              Откройте author_detail.pug и добавьте следующие строки внизу.
              
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 6042d57b17..8048ad020b 100644
--- a/files/ru/learn/server-side/express_nodejs/forms/index.html
+++ b/files/ru/learn/server-side/express_nodejs/forms/index.html
@@ -30,12 +30,12 @@ translation_of: Learn/Server-side/Express_Nodejs/forms
 
 
              HTML форма - это группа из одного или нескольких полей / виджетов на веб-странице, которая может использоваться для сбора информации от пользователей для отправки на сервер. Формы представляют собой гибкий механизм для сбора данных, вводимых пользователем, поскольку существуют подходящие входные данные форм, доступные для ввода различных типов данных-текстовые поля, флажки, переключатели, средства выбора даты и т. д. Формы также являются относительно безопасным способом обмена данными с сервером, поскольку они позволяют отправлять данные в запросах POST с защитой от подделки межсайтовых запросов.
              
 
-
              Работа с формами может быть сложной! Разработчику нужно написать HTML код для форм, валидацию и правильно анализировать введенные данные на сервере (и, возможно, также в браузере), отобразить форму с сообщениями об ошибках, чтобы сообщить пользователям о любых недопустимых полях, обработать данные, когда они были успешно отправлены, и, наконец, каким-то образом ответить пользователю о том, что результат успешен.
              
+
              Работа с формами может быть сложной! Разработчику нужно написать HTML код для форм, валидацию и правильно анализировать введённые данные на сервере (и, возможно, также в браузере), отобразить форму с сообщениями об ошибках, чтобы сообщить пользователям о любых недопустимых полях, обработать данные, когда они были успешно отправлены, и, наконец, каким-то образом ответить пользователю о том, что результат успешен.
              
 
 
              В этом уроке мы покажем вам, как вышеуказанные операции могут быть выполнены в Express. По пути мы расширим веб-сайт LocalLibrary, чтобы пользователи могли создавать, редактировать и удалять элементы из библиотеки.
              
 
 
              
-
              Заметка: Мы не рассматривали, как ограничить определенные маршруты аутентифицированными или авторизованными пользователями, поэтому на данный момент любой пользователь сможет вносить изменения в базу данных.
              
+
              Заметка: Мы не рассматривали, как ограничить определённые маршруты аутентифицированными или авторизованными пользователями, поэтому на данный момент любой пользователь сможет вносить изменения в базу данных.
              
 
              
 
 
              HTML Forms
              
@@ -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):
              
 
@@ -70,7 +70,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms
 
 
              Обработка форм использует все те же методы, которые мы изучили для отображения информации о наших моделях: маршрут отправляет запрос в функцию контроллера, которая выполняет все необходимые действия с базой данных, включая чтение данных из моделей, а затем генерирует и возвращает HTML-страницу. Что усложняет ситуацию, так это то, что сервер также должен иметь возможность обрабатывать данные, предоставленные пользователем, и повторно отображать форму с информацией об ошибках, если есть какие-либо проблемы.
              
 
-
              Блок-схема процесса обработки запросов формы показана ниже, начиная с запроса страницы, содержащей форму (показана зеленым цветом):
              
+
              Блок-схема процесса обработки запросов формы показана ниже, начиная с запроса страницы, содержащей форму (показана зелёным цветом):
              
 
 
              
 
@@ -79,7 +79,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms
 
                
  
              1. Отображение формы по умолчанию при первом запросе пользователем.
   
                  
-   
                • Форма может содержать пустые поля (например, если вы создаете новую запись), или она может быть предварительно заполнена начальными значениями (например, если вы изменяете запись или имеете полезные начальные значения по умолчанию).
                  • 
+   
                • Форма может содержать пустые поля (например, если вы создаёте новую запись), или она может быть предварительно заполнена начальными значениями (например, если вы изменяете запись или имеете полезные начальные значения по умолчанию).
                  • 
   
                
  
                2. 
  
              2. Получение данных, отправленных пользователем, обычно в запросе HTTP POST.
                3. 
@@ -98,7 +98,7 @@ translation_of: Learn/Server-side/Express_Nodejs/forms
 
                Перед сохранением данных формы их необходимо проверить и очистить:
                
 
 
                  
- 
                • Проверка проверяет, что введенные значения являются подходящими для каждого поля (расположены в правильном диапазоне, формат и т. д.) и что значения были предоставлены для всех обязательных полей.
                  • 
+ 
                • Проверка проверяет, что введённые значения являются подходящими для каждого поля (расположены в правильном диапазоне, формат и т. д.) и что значения были предоставлены для всех обязательных полей.
                  • 
  
                • Очистка удаляет / заменяет символы в данных, которые потенциально могут использоваться для отправки вредоносного содержимого на сервер.
                  • 
 
                
 
@@ -128,7 +128,7 @@ const { sanitizeBody } = require('express-validator/filter');
 
                Функции определяются следующим образом:
                
 
 
                  
- 
                • body(fields[, message]): Задает набор полей в теле запроса (параметр POST) для проверки, а также необязательное сообщение об ошибке, которое может отображаться в случае сбоя тестов. Критерии проверки последовательно связаны с методом body(). Например, первая проверка ниже проверяет, что поле" имя "не пустое и задает сообщение об ошибке" пустое имя", если оно не пустое. Второй тест проверяет, что поле age является допустимой датой, и с помощью optional() указывает, что пустые и пустые строки не пройдут проверку.
+ 
                • body(fields[, message]): Задаёт набор полей в теле запроса (параметр POST) для проверки, а также необязательное сообщение об ошибке, которое может отображаться в случае сбоя тестов. Критерии проверки последовательно связаны с методом body(). Например, первая проверка ниже проверяет, что поле" имя "не пустое и задаёт сообщение об ошибке" пустое имя", если оно не пустое. Второй тест проверяет, что поле age является допустимой датой, и с помощью optional() указывает, что пустые и пустые строки не пройдут проверку.
 
   
                  body('name', 'Empty name').isLength({ min: 1 }),
 body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(),
@@ -143,7 +143,7 @@ body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(),
   
                  Note: Вы также можете добавить встроенные средства очистки, такие как trim(), как показано выше. Однако средства очистки, применяемые здесь, применяются только к шагу проверки. Если требуется очистить конечный результат, необходимо использовать отдельный метод очистки, как показано ниже.
                  
   
              
  
- 
            • sanitizeBody(fields): Задает поле тела для очистки. затем операции очистки последовательно соединяются с этим методом. Например, операция очистки escape(), описанная ниже, удаляет символы HTML из переменной name, которые могут использоваться в атаках сценариев между сайтами JavaScript.
+ 
            • sanitizeBody(fields): Задаёт поле тела для очистки. затем операции очистки последовательно соединяются с этим методом. Например, операция очистки escape(), описанная ниже, удаляет символы HTML из переменной name, которые могут использоваться в атаках сценариев между сайтами JavaScript.
   
              sanitizeBody('name').trim().escape(),
 sanitizeBody('date').toDate(),
              
  
              • 
@@ -172,8 +172,8 @@ sanitizeBody('date').toDate(),
 
              Многие модели в библиотеке связаны / зависимы—например, книга требует автора, а также может иметь один или несколько жанров. Это поднимает вопрос о том, как мы должны обрабатывать случай, когда пользователь хочет:
              
 
 
                
- 
              • Создайте объект, если связанные с ним объекты еще не существуют (например, книга, в которой не определен объект автора).
                • 
- 
              • Удаление объекта, который все еще используется другим объектом (например, удаление жанра, который все еще используется книгой).
                • 
+ 
              • Создайте объект, если связанные с ним объекты ещё не существуют (например, книга, в которой не определён объект автора).
                • 
+ 
              • Удаление объекта, который все ещё используется другим объектом (например, удаление жанра, который все ещё используется книгой).
                • 
 
              
 
 
              Для этого проекта мы упростили реализацию, объявив, что форма может быть только:
              
@@ -184,12 +184,12 @@ sanitizeBody('date').toDate(),
 
 
 
              
-
              Note: Более" надежная " реализация может позволить создавать зависимые объекты при создании нового объекта и удалять любой объект в любое время (например, путем удаления зависимых объектов или путем удаления ссылок на удаленный объект из базы данных).
              
+
              Note: Более" надёжная " реализация может позволить создавать зависимые объекты при создании нового объекта и удалять любой объект в любое время (например, путём удаления зависимых объектов или путём удаления ссылок на удалённый объект из базы данных).
              
 
              
 
 
              Маршруты
              
 
-
              Чтобы реализовать наш код обработки форм, нам понадобятся два маршрута с одинаковым шаблоном URL. Первый (GET) маршрут используется для отображения новой пустой формы создания объекта. Второй маршрут (POST) используется для проверки введенных пользователем данных, а затем сохранения информации и перенаправления на страницу сведений (если данные верны) или повторного отображения формы с ошибками (если данные неверны).
              
+
              Чтобы реализовать наш код обработки форм, нам понадобятся два маршрута с одинаковым шаблоном URL. Первый (GET) маршрут используется для отображения новой пустой формы создания объекта. Второй маршрут (POST) используется для проверки введённых пользователем данных, а затем сохранения информации и перенаправления на страницу сведений (если данные верны) или повторного отображения формы с ошибками (если данные неверны).
              
 
 
              Мы уже создали маршруты для всех страниц создания нашей модели в  /routes/catalog.js (in a previous tutorial).  Например, жанровые маршруты показаны ниже:
              
 
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 ba6d79d71d..374c4a2590 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 (заполнение полей жанра и автора) и список всех объектов 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
              
 
@@ -128,7 +128,7 @@ exports.book_update_post }
 ];
 
-
              Это очень похоже на маршрут записи, используемый при создании Book. Сперва мы проверяем и очищаем данные книги  и используем их для создание нового объекта Book(устанавливая его значение _id в идентификатор объекта для обновления). Если есть ошибки, когда мы проверяем данные, то мы повторно представляем форму, дополнительно отображая данные, введенные пользователем, ошибки, а также списки жанров и авторов. Если ошибок нет, то мы вызываем Book.findByIdAndUpdate() для обновления документа Book, а затем перенаправить на страницу сведений.
              
+
              Это очень похоже на маршрут записи, используемый при создании Book. Сперва мы проверяем и очищаем данные книги  и используем их для создание нового объекта Book(устанавливая его значение _id в идентификатор объекта для обновления). Если есть ошибки, когда мы проверяем данные, то мы повторно представляем форму, дополнительно отображая данные, введённые пользователем, ошибки, а также списки жанров и авторов. Если ошибок нет, то мы вызываем Book.findByIdAndUpdate() для обновления документа Book, а затем перенаправить на страницу сведений.
              
 
 
              View
              
 
diff --git a/files/ru/learn/server-side/express_nodejs/index.html b/files/ru/learn/server-side/express_nodejs/index.html
index 48a631f4c3..21c9909faa 100644
--- a/files/ru/learn/server-side/express_nodejs/index.html
+++ b/files/ru/learn/server-side/express_nodejs/index.html
@@ -28,7 +28,7 @@ translation_of: Learn/Server-side/Express_Nodejs
 
 
              
  
              Введение в Express/Node
              
- 
              В первой статье об Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?" и дадим вам представление о том, что делает веб-фреймворк Express особенным. Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложений Express (хотя на данный момент у вас еще нет среды разработки, в которой можно ее протестировать).
              
+ 
              В первой статье об Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?" и дадим вам представление о том, что делает веб-фреймворк Express особенным. Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложений Express (хотя на данный момент у вас ещё нет среды разработки, в которой можно её протестировать).
              
  
              Настройка среды разработки Node (Express)
              
  
              
  
              Теперь, когда вы знаете, что такое Express, мы покажем вам, как настроить и протестировать среду разработки Node/Express в Windows, Linux (Ubuntu) и Mac OS X. Независимо от того, какую популярную операционную систему вы используете, эта статья даст вам то, что вам нужно, чтобы начать разработку приложений Express.
              
@@ -46,18 +46,18 @@ translation_of: Learn/Server-side/Express_Nodejs
  
              Учебник Express часть 4: Маршруты и контроллеры
              
  
              В этом уроке мы создадим маршруты (код обработки URL) с "фиктивным" обработчиком функций для всех конечных точек ресурсов, которые нам в конечном итоге понадобятся для сайта LocalLibrary. По завершении мы будем иметь модульную структуру нашего кода обработки маршрута, который мы можем расширить с помощью функций реального обработчика в следующих статьях. Мы также будем очень хорошо понимать, как создавать модульные маршруты, используя Express.
              
  
              Учебник Express часть 5: Отображение данных библиотеки
              
- 
              Теперь мы готовы добавить страницы, на которых будут отображаться книги веб-сайта LocalLibrary и другие данные. Страницы будут включать главную страницу, которая показывает сколько записей определенного типа мы имеем и отдельную страницу для детального просмотра записи. По пути мы получим практический опыт в получении записей из баз данных и использовании шаблонов.
              
+ 
              Теперь мы готовы добавить страницы, на которых будут отображаться книги веб-сайта LocalLibrary и другие данные. Страницы будут включать главную страницу, которая показывает сколько записей определённого типа мы имеем и отдельную страницу для детального просмотра записи. По пути мы получим практический опыт в получении записей из баз данных и использовании шаблонов.
              
  
              Учебник Express часть 6: Работы с формами
              
  
              В этой части мы покажем вам, как работать с HTML формами в Express, используя Pug, и в частности, как создавать, обновлять и удалять документы из базы данных.
              
  
              Учебник Express часть 7: Выкладка в production
              
- 
              Теперь когда вы создали восхитительный сайт LocalLibrary, вы захотите установить его на общедоступном сервере, чтобы он мог дать доступ персоналу библиотеки и пользователям в Интернет. В этой статье представлен обзор того, как вы можете найти хост для развертывания вашего сайта и что вам нужно сделать, чтобы подготовить ваш сайт к публикации.
              
+ 
              Теперь когда вы создали восхитительный сайт LocalLibrary, вы захотите установить его на общедоступном сервере, чтобы он мог дать доступ персоналу библиотеки и пользователям в Интернет. В этой статье представлен обзор того, как вы можете найти хост для развёртывания вашего сайта и что вам нужно сделать, чтобы подготовить ваш сайт к публикации.
              
 
              
 
 
              Смотрите также
              
 
 
              
  
              Установка 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 96f5db6121..36bf2f9eb9 100644
--- a/files/ru/learn/server-side/express_nodejs/introduction/index.html
+++ b/files/ru/learn/server-side/express_nodejs/introduction/index.html
@@ -5,7 +5,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction
 ---
 
              {{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
              
 
-
              В этой первой статье по Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?", и сделаем обзор того, что делает веб-фреймворк Express таким особенным. Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложения Express (хотя на данный момент у вас еще нет среды разработки, в которой можно ее протестировать).
              
+
              В этой первой статье по Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?", и сделаем обзор того, что делает веб-фреймворк Express таким особенным. Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложения Express (хотя на данный момент у вас ещё нет среды разработки, в которой можно её протестировать).
              
 
 
              
  
              
@@ -27,10 +27,10 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction
 
              С точки зрения веб-серверной разработки Node имеет ряд преимуществ:
              
 
 
                
- 
              • Отличная производительность! Node был разработан для оптимизации пропускной способности и масштабируемости в веб-приложениях и очень хорошо справляется со многими распространенными проблемами веб-разработки (например, веб-приложения реального времени).
                • 
+ 
              • Отличная производительность! Node был разработан для оптимизации пропускной способности и масштабируемости в веб-приложениях и очень хорошо справляется со многими распространёнными проблемами веб-разработки (например, веб-приложения реального времени).
                • 
  
              • Код написан на «обычном старом JavaScript», а это означает, что затрачивается меньше времени при написании кода для браузера и веб-сервера связанное с  «переключением технологий» между языками.
                • 
  
              • JavaScript является относительно новым языком программирования и имеет преимущества от улучшения дизайна языка по сравнению с другими традиционными языками для веб-серверов (например, Python, PHP, и т.д.). Многие другие новые и популярные языки компилируются/конвертируются в JavaScript, поэтому вы можете также использовать CoffeeScript, ClosureScript, Scala, LiveScript, etc.
                • 
- 
              • Менеджер пакетов Node (NPM) обеспечивает доступ к сотням тысяч многоразовых пакетов. Он также имеет лучшее в своем классе разрешение зависимостей и может также использоваться для автоматизации большинства инструментов построения.
                • 
+ 
              • Менеджер пакетов Node (NPM) обеспечивает доступ к сотням тысяч многоразовых пакетов. Он также имеет лучшее в своём классе разрешение зависимостей и может также использоваться для автоматизации большинства инструментов построения.
                • 
  
              • Он портативен, имеет версии для  Microsoft Windows, OS X, Linux, Solaris, FreeBSD, OpenBSD, WebOS, и NonStop OS. Кроме того, он имеет хорошую поддержку среди многих хостинг-провайдеров, которые часто предоставляют конкретную инфраструктуру и документацию для размещения сайтов, работающих на Node.
                • 
  
              • Он имеет очень активную стороннюю экосистему и сообщество разработчиков, которые всегда готовы помочь.
                • 
 
              
@@ -43,7 +43,7 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction
 
 
                
  
              1. Откройте терминал (в Windows окно командной строки)
                2. 
- 
              2. Создайте папку, куда вы хотите сохранить программу, к примеру test-node и перейдите в нее с помощью следующей команды:
                3. 
+ 
              3. Создайте папку, куда вы хотите сохранить программу, к примеру test-node и перейдите в неё с помощью следующей команды:
                4. 
 
              
 
 
              cd test-node
              
@@ -58,7 +58,7 @@ const http = require("http");
 const hostname = "127.0.0.1";
 const port = 8000;
 
-// Создаем HTTP-сервер
+// Создаём HTTP-сервер
 const server = http.createServer((req, res) => {
 
    // Устанавливаем HTTP-заголовок ответа с HTTP статусом и Content type
@@ -114,7 +114,7 @@ server.listen(port, hostname, () => {
 
 
              Популярность веб-фреймворка важна, поскольку она является индикатором того, будет ли она продолжаться, и какие ресурсы, вероятно, будут доступны с точки зрения документации, дополнительных библиотек и технической поддержки.
              
 
-
              Не существует какого-либо доступного и точного измерения популярности серверных фреймворков (хотя сайты, такие как Hot Frameworks, пытаются оценить популярность, используя такие механизмы, как подсчет количества проектов на GitHub и вопросов на StackOverflow для каждой платформы). Лучший вопрос заключается в том, достаточно ли популярны Node и Express, чтобы избежать проблем с непопулярными платформами. Они продолжают развиваться? Можете ли вы получить помощь, если вам это нужно? Есть ли у вас возможность получить оплачиваемую работу, если вы изучаете Express?
              
+
              Не существует какого-либо доступного и точного измерения популярности серверных фреймворков (хотя сайты, такие как Hot Frameworks, пытаются оценить популярность, используя такие механизмы, как подсчёт количества проектов на GitHub и вопросов на StackOverflow для каждой платформы). Лучший вопрос заключается в том, достаточно ли популярны Node и Express, чтобы избежать проблем с непопулярными платформами. Они продолжают развиваться? Можете ли вы получить помощь, если вам это нужно? Есть ли у вас возможность получить оплачиваемую работу, если вы изучаете Express?
              
 
 
              Как только мы посмотрим на список широкоизвестных компаний пользующихся Express, количество разработчиков участвующих в разработке Express, и громадному числу людей, которые занимаются поддержкой Express, то мы с уверенностью скажем -  Express поистине популярный фреймворк!
              
 
@@ -122,7 +122,7 @@ server.listen(port, hostname, () => {
 
 
              Web-фреймворки часто принято делить на "ограничивающие" и "не ограничивающие".
              
 
-
              Ограничивающими фреймворки считаются фреймворки, которые следуют "должным" ограничениям при выполнении отдельных задач. Довольно часто они ориентированы на ускоренную разработку в конкретной области  (решение задач определенного типа), поскольку должный подход  к произвольно выбранной задаче бывает не прост для понимания и плохо документирован. При этом они лишаются гибкости при решении задач выходящих за сферу их обычного применения, а так же проявляют тенденцию к ограничению выбора компонентов и подходов своего применения. 
              
+
              Ограничивающими фреймворки считаются фреймворки, которые следуют "должным" ограничениям при выполнении отдельных задач. Довольно часто они ориентированы на ускоренную разработку в конкретной области  (решение задач определённого типа), поскольку должный подход  к произвольно выбранной задаче бывает не прост для понимания и плохо документирован. При этом они лишаются гибкости при решении задач выходящих за сферу их обычного применения, а так же проявляют тенденцию к ограничению выбора компонентов и подходов своего применения. 
              
 
 
              Напротив, не ограничивающие фреймворки имеют гораздо меньше ограничений для связи компонентов, что бы достичь цели или ограничений в выборе используемых компонентов. Они облегчают разработчикам использование наиболее подходящих инструментов для выполнения конкретной задачи, но платой за это будет то, что вы самостоятельно должны найти такие компоненты.
              
 
@@ -130,7 +130,7 @@ server.listen(port, hostname, () => {
 
 
              Как выглядит код 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 не определяет поведение, связанное с базой данных).
              
 
@@ -158,15 +158,15 @@ app.listen(3000, function() {
 
 
              Первые две строки требуют () (импорт) модуля Express и создания приложения Express. Этот объект, который традиционно называется app, имеет методы для маршрутизации HTTP-запросов, настройки промежуточного программного обеспечения, рендеринга представлений HTML, регистрации механизма шаблонов и изменения параметров приложения, которые управляют поведением приложения (например, режим среды, чувствительны ли определения маршрута к регистру). , и т.д.)
              
 
-
              Средняя часть кода (три строки, начинающиеся с app.get) показывает определение маршрута. Метод app.get () указывает колбэк-функцию, которая будет вызываться всякий раз, когда есть HTTP-запрос GET с путем ('/') относительно корня сайта. Колбэк-функция принимает запрос и объект ответа в качестве аргументов и просто вызывает send () для ответа, чтобы вернуть строку «Hello World!»
              
+
              Средняя часть кода (три строки, начинающиеся с app.get) показывает определение маршрута. Метод app.get () указывает колбэк-функцию, которая будет вызываться всякий раз, когда есть HTTP-запрос GET с путём ('/') относительно корня сайта. Колбэк-функция принимает запрос и объект ответа в качестве аргументов и просто вызывает send () для ответа, чтобы вернуть строку «Hello World!»
              
 
-
              Последний блок запускает сервер через порт «3000» и печатает комментарий журнала в консоль. Когда сервер работает, вы можете перейти к localhost: 3000 в вашем браузере, чтобы увидеть возвращенный пример ответа.
              
+
              Последний блок запускает сервер через порт «3000» и печатает комментарий журнала в консоль. Когда сервер работает, вы можете перейти к localhost: 3000 в вашем браузере, чтобы увидеть возвращённый пример ответа.
              
 
 
              Импорт и создание модулей
              
 
 
              Модуль - это библиотека / файл JavaScript, который вы можете импортировать в другой код с помощью функции require () Node. Express сам по себе является модулем, как и промежуточное программное обеспечение и библиотеки баз данных, которые мы используем в наших приложениях Express.
              
  
              
- Приведенный ниже код показывает, как мы импортируем модуль по имени, используя в качестве примера платформу Express. Сначала мы вызываем функцию require (), определяя имя модуля в виде строки («express») и вызывая возвращенный объект для создания приложения Express. Затем мы можем получить доступ к свойствам и функциям объекта приложения.
              
+ Приведённый ниже код показывает, как мы импортируем модуль по имени, используя в качестве примера платформу Express. Сначала мы вызываем функцию require (), определяя имя модуля в виде строки («express») и вызывая возвращённый объект для создания приложения Express. Затем мы можем получить доступ к свойствам и функциям объекта приложения.
              
 
 
              var express = require('express');
 var app = express();
@@ -175,7 +175,7 @@ var app = express();
 
              Вы также можете создавать свои собственные модули, которые можно импортировать таким же образом.
              
 
 
              
-
              Совет: вы захотите создать свои собственные модули, потому что это позволяет вам организовать ваш код в управляемые части - монолитное однофайловое приложение трудно понять и поддерживать. Использование модулей также помогает вам управлять пространством имен, поскольку при использовании модуля импортируются только те переменные, которые вы явно экспортировали.
              
+
              Совет: вы захотите создать свои собственные модули, потому что это позволяет вам организовать ваш код в управляемые части - монолитное однофайловое приложение трудно понять и поддерживать. Использование модулей также помогает вам управлять пространством имён, поскольку при использовании модуля импортируются только те переменные, которые вы явно экспортировали.
              
 
              
 
 
              Чтобы сделать объекты доступными вне модуля, вам просто нужно назначить их объекту экспорта. Например, модуль square.js ниже представляет собой файл, который экспортирует методы area () и perimeter ():
              
@@ -216,7 +216,7 @@ console.log('The area of a square with a width of 4 is ' + square.area(4));
              
 
-
              В отличие от этого, асинхронный API - это тот, в котором API начнет операцию и сразу же вернется (до завершения операции). После завершения операции API будет использовать некоторый механизм для выполнения дополнительных операций. Например, приведенный ниже код выведет «Second, First», потому что хотя метод setTimeout () вызывается первым и возвращается немедленно, операция не завершается в течение нескольких секунд.
              
+
              В отличие от этого, асинхронный API - это тот, в котором API начнёт операцию и сразу же вернётся (до завершения операции). После завершения операции API будет использовать некоторый механизм для выполнения дополнительных операций. Например, приведённый ниже код выведет «Second, First», потому что хотя метод setTimeout () вызывается первым и возвращается немедленно, операция не завершается в течение нескольких секунд.
              
 
 
              setTimeout(function() {
    console.log('First');
@@ -224,9 +224,9 @@ console.log('Second');
 console.log('Second');
 
              
 
-
              Использование неблокирующих асинхронных API-интерфейсов еще более важно в Node, чем в браузере, поскольку Node - это однопоточная среда выполнения, управляемая событиями. «Однопоточный» означает, что все запросы к серверу выполняются в одном потоке (а не порождаются в отдельных процессах). Эта модель чрезвычайно эффективна с точки зрения скорости и ресурсов сервера, но это означает, что если любая из ваших функций вызывает синхронные методы, выполнение которых занимает много времени, они будут блокировать не только текущий запрос, но и любой другой запрос, обрабатываемый ваше веб-приложение.
              
+
              Использование неблокирующих асинхронных API-интерфейсов ещё более важно в Node, чем в браузере, поскольку Node - это однопоточная среда выполнения, управляемая событиями. «Однопоточный» означает, что все запросы к серверу выполняются в одном потоке (а не порождаются в отдельных процессах). Эта модель чрезвычайно эффективна с точки зрения скорости и ресурсов сервера, но это означает, что если любая из ваших функций вызывает синхронные методы, выполнение которых занимает много времени, они будут блокировать не только текущий запрос, но и любой другой запрос, обрабатываемый ваше веб-приложение.
              
  
              
- Есть несколько способов, которыми асинхронный API уведомляет ваше приложение о том, что оно завершено. Наиболее распространенный способ - зарегистрировать колбэк-функцию при вызове асинхронного API, который будет вызываться после завершения операции. Это подход, использованный выше.
              
+ Есть несколько способов, которыми асинхронный API уведомляет ваше приложение о том, что оно завершено. Наиболее распространённый способ - зарегистрировать колбэк-функцию при вызове асинхронного API, который будет вызываться после завершения операции. Это подход, использованный выше.
              
 
 
              
 
              Совет: Использование колбэков может быть довольно «грязным», если у вас есть последовательность зависимых асинхронных операций, которые должны выполняться по порядку, потому что это приводит к нескольким уровням вложенных колбэков. Эта проблема широко известна как «ад колбэков». Эту проблему можно решить с помощью хороших методов кодирования (см. Http://callbackhell.com/), использования такого модуля, как async, или даже перехода к функциям ES6, таким как Promises.
              
@@ -253,16 +253,16 @@ console.log('Second');
 
 
              Объект приложения Express также предоставляет методы для определения обработчиков маршрутов для всех других HTTP-глаголов, которые в основном используются одинаково: post (), put (), delete (), options (), trace (), copy ( ), lock (), mkcol (), move (), purge (), propfind (), proppatch (), unlock (), report (), mkactivity (), checkout (), merge ( ), m-search (), notify (), subscribe (), unsubscribe (), patch (), search () и connect ().
              
 
-
              Существует специальный метод маршрутизации app.all (), который будет вызываться в ответ на любой метод HTTP. Это используется для загрузки функций промежуточного программного обеспечения по определенному пути для всех методов запроса. В следующем примере (из документации Express) показан обработчик, который будет выполняться для запросов к / secret независимо от используемого глагола HTTP (при условии, что он поддерживается модулем http).
              
+
              Существует специальный метод маршрутизации app.all (), который будет вызываться в ответ на любой метод HTTP. Это используется для загрузки функций промежуточного программного обеспечения по определённому пути для всех методов запроса. В следующем примере (из документации Express) показан обработчик, который будет выполняться для запросов к / secret независимо от используемого глагола HTTP (при условии, что он поддерживается модулем http).
              
 
 
              app.all('/secret', function(req, res, next) {
   console.log('Accessing the secret section ...');
   next(); // pass control to the next handler
 });
              
 
-
              Маршруты позволяют сопоставлять определенные шаблоны символов в URL-адресе, извлекать некоторые значения из URL-адреса и передавать их в качестве параметров обработчику маршрута (в качестве атрибутов объекта запроса, передаваемого в качестве параметра).
              
+
              Маршруты позволяют сопоставлять определённые шаблоны символов в URL-адресе, извлекать некоторые значения из URL-адреса и передавать их в качестве параметров обработчику маршрута (в качестве атрибутов объекта запроса, передаваемого в качестве параметра).
              
  
              
- Часто полезно группировать обработчики маршрутов для определенной части сайта и получать к ним доступ с помощью общего префикса маршрута (например, сайт с вики может иметь все связанные с вики маршруты в одном файле и иметь к ним доступ с префиксом маршрута из / вики /). В Express это достигается с помощью объекта express.Router. Например, мы можем создать наш вики-маршрут в модуле с именем wiki.js, а затем экспортировать объект Router, как показано ниже:
              
+ Часто полезно группировать обработчики маршрутов для определённой части сайта и получать к ним доступ с помощью общего префикса маршрута (например, сайт с вики может иметь все связанные с вики маршруты в одном файле и иметь к ним доступ с префиксом маршрута из / вики /). В Express это достигается с помощью объекта express.Router. Например, мы можем создать наш вики-маршрут в модуле с именем wiki.js, а затем экспортировать объект Router, как показано ниже:
              
 
 
              // wiki.js - Wiki route module
 
@@ -304,7 +304,7 @@ app.use('/wiki', wiki);
              
 
 
              Большинство приложений используют стороннее промежуточное программное обеспечение для упрощения общих задач веб-разработки, таких как работа с файлами cookie, сессиями, аутентификацией пользователя, доступом к данным запросов POST и JSON, ведение журнала и т. д. Список пакетов промежуточного программного обеспечения, поддерживаемых командой Express, можно найти. (который также включает в себя другие популярные сторонние пакеты). Другие экспресс-пакеты доступны в диспетчере пакетов NPM.
              
  
              
- Для использования стороннего промежуточного программного обеспечения сначала необходимо установить его в свое приложение с помощью NPM. Например, чтобы установить промежуточное программное обеспечение средства регистрации HTTP-запросов morgan, вы должны сделать следующее:
              
+ Для использования стороннего промежуточного программного обеспечения сначала необходимо установить его в своё приложение с помощью NPM. Например, чтобы установить промежуточное программное обеспечение средства регистрации HTTP-запросов morgan, вы должны сделать следующее:
              
 
 
              $ npm install morgan
 
              
@@ -321,11 +321,11 @@ var app = express();
 
              Примечание. Промежуточное программное обеспечение и функции маршрутизации вызываются в том порядке, в котором они были объявлены. Для некоторого промежуточного программного обеспечения важен порядок (например, если промежуточное программное обеспечение сеанса зависит от промежуточного программного обеспечения cookie, то сначала должен быть добавлен обработчик cookie). Почти всегда случается так, что промежуточное ПО вызывается перед настройкой маршрутов, иначе ваши обработчики маршрутов не будут иметь доступа к функциям, добавленным вашим промежуточным ПО.
              
 
              
 
-
              Вы можете написать свои собственные функции промежуточного программного обеспечения, и вам, вероятно, придется это сделать (хотя бы для создания кода обработки ошибок). Единственное различие между функцией промежуточного программного обеспечения и обратным вызовом обработчика маршрута состоит в том, что функции промежуточного программного обеспечения имеют третий аргумент, следующий: какие функции промежуточного программного обеспечения должны вызываться, если они не завершают цикл запроса (когда вызывается функция промежуточного программного обеспечения, она содержит следующую функцию). это надо называть).
              
+
              Вы можете написать свои собственные функции промежуточного программного обеспечения, и вам, вероятно, придётся это сделать (хотя бы для создания кода обработки ошибок). Единственное различие между функцией промежуточного программного обеспечения и обратным вызовом обработчика маршрута состоит в том, что функции промежуточного программного обеспечения имеют третий аргумент, следующий: какие функции промежуточного программного обеспечения должны вызываться, если они не завершают цикл запроса (когда вызывается функция промежуточного программного обеспечения, она содержит следующую функцию). это надо называть).
              
 
-
              Вы можете добавить функцию промежуточного программного обеспечения в цепочку обработки с помощью app.use () или app.add (), в зависимости от того, хотите ли вы применить промежуточное программное обеспечение ко всем ответам или к ответам с определенным глаголом HTTP (GET, POST и т. д.). ). Маршруты задаются одинаково в обоих случаях, хотя маршрут необязателен при вызове app.use ().
              
+
              Вы можете добавить функцию промежуточного программного обеспечения в цепочку обработки с помощью app.use () или app.add (), в зависимости от того, хотите ли вы применить промежуточное программное обеспечение ко всем ответам или к ответам с определённым глаголом HTTP (GET, POST и т. д.). ). Маршруты задаются одинаково в обоих случаях, хотя маршрут необязателен при вызове app.use ().
              
  
              
- В приведенном ниже примере показано, как можно добавить функцию промежуточного программного обеспечения, используя оба метода, а также с / без маршрута.
              
+ В приведённом ниже примере показано, как можно добавить функцию промежуточного программного обеспечения, используя оба метода, а также с / без маршрута.
              
 
 
              var express = require('express');
 var app = express();
@@ -348,7 +348,7 @@ app.get('/', a_middleware_function);
 app.listen(3000);
              
 
 
              
-
              Совет по JavaScript: выше мы объявляем функцию промежуточного программного обеспечения отдельно, а затем устанавливаем ее в качестве колбэка. В нашей предыдущей функции обработчика маршрута мы объявили колбэк-функцию, когда она использовалась. В JavaScript любой подход является допустимым.
              
+
              Совет по JavaScript: выше мы объявляем функцию промежуточного программного обеспечения отдельно, а затем устанавливаем её в качестве колбэка. В нашей предыдущей функции обработчика маршрута мы объявили колбэк-функцию, когда она использовалась. В JavaScript любой подход является допустимым.
              
 
              
 
 
              Документация по Express содержит намного больше отличной информации по использованию и написанию промежуточного программного обеспечения Express.
              
@@ -360,7 +360,7 @@ app.listen(3000);
 
              app.use(express.static('public'));
 
              
 
-
              Любые файлы в публичном каталоге обслуживаются путем добавления их имени файла (относительно базового «публичного» каталога) к базовому URL. Так, например:
              
+
              Любые файлы в публичном каталоге обслуживаются путём добавления их имени файла (относительно базового «публичного» каталога) к базовому URL. Так, например:
              
 
 
              http://localhost:3000/images/dog.jpg
 http://localhost:3000/css/style.css
@@ -390,7 +390,7 @@ http://localhost:3000/media/cry.mp3
 
 
              Обработка ошибок
              
 
-
              Ошибки обрабатываются одной или несколькими специальными функциями промежуточного программного обеспечения, которые имеют четыре аргумента вместо обычных трех: (err, req, res, next). Например:
              
+
              Ошибки обрабатываются одной или несколькими специальными функциями промежуточного программного обеспечения, которые имеют четыре аргумента вместо обычных трёх: (err, req, res, next). Например:
              
 
 
              app.use(function(err, req, res, next) {
   console.error(err.stack);
@@ -400,7 +400,7 @@ http://localhost:3000/media/cry.mp3
 
 
              Они могут возвращать любой требуемый контент, но должны вызываться после всех других app.use () и маршрутизировать вызовы, чтобы они были последним промежуточным ПО в процессе обработки запросов!
              
  
              
- Express поставляется со встроенным обработчиком ошибок, который заботится обо всех оставшихся ошибках, которые могут возникнуть в приложении. Эта промежуточная функция обработки ошибок по умолчанию добавляется в конец стека функций промежуточного программного обеспечения. Если вы передаете ошибку в next () и не обрабатываете ее в обработчике ошибок, она будет обработана встроенным обработчиком ошибок; ошибка будет записана клиенту с трассировкой стека.
              
+ Express поставляется со встроенным обработчиком ошибок, который заботится обо всех оставшихся ошибках, которые могут возникнуть в приложении. Эта промежуточная функция обработки ошибок по умолчанию добавляется в конец стека функций промежуточного программного обеспечения. Если вы передаёте ошибку в next () и не обрабатываете её в обработчике ошибок, она будет обработана встроенным обработчиком ошибок; ошибка будет записана клиенту с трассировкой стека.
              
 
 
              
 
              Примечание. Трассировка стека не включена в производственную среду. Чтобы запустить его в производственном режиме, необходимо установить переменную среды NODE_ENV в «производство».
              
@@ -443,7 +443,7 @@ MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) {
 
 
              Механизмы шаблонов (в Express называемые «механизмами просмотра») позволяют указывать структуру выходного документа в шаблоне, используя заполнители для данных, которые будут заполняться при создании страницы. Шаблоны часто используются для создания HTML, но могут также создавать другие типы документов. В Express есть поддержка ряда шаблонных движков, и здесь есть полезное сравнение более популярных движков: Сравнение шаблонизаторов JavaScript: Jade, Mustache, Dust и More.
              
  
              
- В своем коде настроек приложения вы задаете механизм шаблонов для использования и место, где Express должен искать шаблоны, используя настройки «views» и «engine», как показано ниже (вам также нужно будет установить пакет, содержащий вашу библиотеку шаблонов). !)
              
+ В своём коде настроек приложения вы задаёте механизм шаблонов для использования и место, где Express должен искать шаблоны, используя настройки «views» и «engine», как показано ниже (вам также нужно будет установить пакет, содержащий вашу библиотеку шаблонов). !)
              
 
 
              var express = require('express');
 var app = express();
@@ -465,18 +465,18 @@ app.set('view engine', 'some_template_engine_name');
 
 
              Файловая структура
              
 
-
              Express не делает никаких предположений относительно структуры или компонентов, которые вы используете. Маршруты, представления, статические файлы и другая логика конкретного приложения могут находиться в любом количестве файлов с любой структурой каталогов. Хотя вполне возможно иметь все приложения Express в одном файле, обычно имеет смысл разделить ваше приложение на файлы на основе функций (например, управление учетными записями, блоги, доски обсуждений) и проблемной области архитектуры (например, модель, представление или контроллер, если вы случайно используете MVC architecture).
              
+
              Express не делает никаких предположений относительно структуры или компонентов, которые вы используете. Маршруты, представления, статические файлы и другая логика конкретного приложения могут находиться в любом количестве файлов с любой структурой каталогов. Хотя вполне возможно иметь все приложения Express в одном файле, обычно имеет смысл разделить ваше приложение на файлы на основе функций (например, управление учётными записями, блоги, доски обсуждений) и проблемной области архитектуры (например, модель, представление или контроллер, если вы случайно используете MVC architecture).
              
 
-
              В более поздней теме мы будем использовать Express Application Generator, который создает модульный каркас приложения, который мы можем легко расширить для создания веб-приложений.
              
+
              В более поздней теме мы будем использовать Express Application Generator, который создаёт модульный каркас приложения, который мы можем легко расширить для создания веб-приложений.
              
 
 
                
 
              
 
 
              Резюме
              
 
-
              Поздравляем, вы завершили первый шаг в своем путешествии Express / Node! Теперь вы должны понимать основные преимущества Express и Node, а также примерно то, как могут выглядеть основные части приложения Express (маршруты, промежуточное ПО, обработка ошибок и код шаблона). Вы также должны понимать, что с Express, который является непонятным фреймворком, то, как вы собираете эти части вместе, и библиотеки, которые вы используете, в значительной степени зависит от вас!
              
+
              Поздравляем, вы завершили первый шаг в своём путешествии Express / Node! Теперь вы должны понимать основные преимущества Express и Node, а также примерно то, как могут выглядеть основные части приложения Express (маршруты, промежуточное ПО, обработка ошибок и код шаблона). Вы также должны понимать, что с Express, который является непонятным фреймворком, то, как вы собираете эти части вместе, и библиотеки, которые вы используете, в значительной степени зависит от вас!
              
  
              
- Конечно, Express - это очень легкая платформа для веб-приложений, поэтому большая часть ее преимуществ и возможностей обеспечивается сторонними библиотеками и функциями. Мы рассмотрим это более подробно в следующих статьях. В нашей следующей статье мы рассмотрим настройку среды разработки Node, чтобы вы могли увидеть некоторый код Express в действии.
              
+ Конечно, Express - это очень лёгкая платформа для веб-приложений, поэтому большая часть её преимуществ и возможностей обеспечивается сторонними библиотеками и функциями. Мы рассмотрим это более подробно в следующих статьях. В нашей следующей статье мы рассмотрим настройку среды разработки Node, чтобы вы могли увидеть некоторый код Express в действии.
              
 
 
              Смотрите также
              
 
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 a761872f99..7bbcc23eb4 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,7 +42,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose
 
 
                
  
              • Использование родного языка запросов баз данных (т.е. SQL)
                • 
- 
              • Использование объектной модели данных (ODM) или объектно-реляционной модели (ORM).  ODM / ORM представляют данные веб-сайта как объекты JavaScript, которые затем отображаются на поддерживающую базу данных. Некоторые ORM  привязаны к определенной базе данных, тогда как другие не зависят от конкретной базы данных.
                • 
+ 
              • Использование объектной модели данных (ODM) или объектно-реляционной модели (ORM).  ODM / ORM представляют данные веб-сайта как объекты JavaScript, которые затем отображаются на поддерживающую базу данных. Некоторые ORM  привязаны к определённой базе данных, тогда как другие не зависят от конкретной базы данных.
                • 
 
              
 
 
              Наилучшую производительность можно получить с помощью SQL или другого языка запросов, поддерживаемого базой данных. Объектные модели (ODM) часто медленнее, потому что требуют перевода объектов в формат базы данных, при этом не обязательно будут использованы наиболее эффективные запросы к базе данных (особенно, если ODM предназначена для различных баз данных и должна идти на большие компромиссы в смысле поддержки тех или иных функций базы данных).
              
@@ -50,7 +50,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose
 
              Преимущество применения ORM состоит в том, что программисты могут сосредоточиться на объектах JavaScript, а не  на семантике базы данных —  особенно, если требуется работать с разными базами данных (на одном или разных веб-сайтах). Они также дают очевидное место для валидации и проверки данных.
              
 
 
              
-
              Совет:  Применение ODM / ORMs часто приводит к снижению затрат на разработку и обслуживание! Если Вы не очень хорошо знакомы с родным языком запросов или если производительность имеет первостепенное значение, следует серьезно рассмотреть возможность применения ODM.
              
+
              Совет:  Применение ODM / ORMs часто приводит к снижению затрат на разработку и обслуживание! Если Вы не очень хорошо знакомы с родным языком запросов или если производительность имеет первостепенное значение, следует серьёзно рассмотреть возможность применения ODM.
              
 
              
 
 
              Какую модель ORM/ODM следует использовать?
              
@@ -63,8 +63,8 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose
  
            • 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).
              • 
- 
            • Sequelize: Основанная на промисах ORM для Node.js и io.js. Поддерживает диалекты PostgreSQL, MySQL, MariaDB, SQLite и MSSQL, обладает надежной поддержкой транзакций, отношений, чтения копий и т.д.
              • 
+ 
            • Objection: Делает настолько лёгким, насколько возможно, использование всей мощи SQL и движка базы данных ( поддерживает  SQLite3, Postgres, и MySQL).
              • 
+ 
            • Sequelize: Основанная на промисах ORM для Node.js и io.js. Поддерживает диалекты PostgreSQL, MySQL, MariaDB, SQLite и MSSQL, обладает надёжной поддержкой транзакций, отношений, чтения копий и т.д.
              • 
  
            • 
   
              Node ORM2 -- это OR менеджер для NodeJS. Поддерживает MySQL, SQLite и Progress, помогает работать с БД, используя объектный подход.
              
  
              • 
@@ -73,7 +73,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose
  
 
 
-
              Как правило, при выборе решения следует учитывать как предоставляемые функции, так и  "деятельность сообщества" ( загрузки, вклад, отчеты об ошибках, качество документации, и т.д. ) . На момент написания статьи Mongoose являлась очень популярной ORM, и разумно, если вы выбрали MongoDB.
              
+
              Как правило, при выборе решения следует учитывать как предоставляемые функции, так и  "деятельность сообщества" ( загрузки, вклад, отчёты об ошибках, качество документации, и т.д. ) . На момент написания статьи Mongoose являлась очень популярной ORM, и разумно, если вы выбрали MongoDB.
              
 
 
              Применение Mongoose и MongoDb для LocalLibrary
              
 
@@ -97,11 +97,11 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose
 
 
              При проектировании моделей имеет смысл иметь отдельные модели для каждого «объекта» (группы связанных данных). В этом случае очевидными объектами являются книги, экземпляры книг и авторы.
              
 
-
              Можно также использовать модели для представления параметров списка выбора (например, как выпадающий список вариантов), вместо жесткого кодирования выбора на самом веб-сайте -  рекомендуется, когда не все параметры известны или могут быть изменены. Явный кандидат для модели такого типа -- это жанр книги (например, «Научная фантастика», «Французская поэзия» и т.д.),
              
+
              Можно также использовать модели для представления параметров списка выбора (например, как выпадающий список вариантов), вместо жёсткого кодирования выбора на самом веб-сайте -  рекомендуется, когда не все параметры известны или могут быть изменены. Явный кандидат для модели такого типа -- это жанр книги (например, «Научная фантастика», «Французская поэзия» и т.д.),
              
 
 
              Как только мы определились с моделями и полями, следует подумать об отношениях между ними.
              
 
-
              С учетом сказанного, UML-диаграмма связей (см. ниже) показывает модели, которые представлены как прямоугольники. Мы решили, что создадим модели для книги (общие сведения о книге), для экземпляра книги (состояние отдельных физических копий книги, доступных в системе) и для автора. Кроме того, у нас будет модель для жанра, чтобы эти значения можно было создавать динамически. Решено не создавать модель для  BookInstance:status — мы пропишем в коде необходимые значения, потому что не ожидаем их изменения. На элементах диаграммы показаны имя модели, имена и типы полей, имена методов и типы их результатов .
              
+
              С учётом сказанного, UML-диаграмма связей (см. ниже) показывает модели, которые представлены как прямоугольники. Мы решили, что создадим модели для книги (общие сведения о книге), для экземпляра книги (состояние отдельных физических копий книги, доступных в системе) и для автора. Кроме того, у нас будет модель для жанра, чтобы эти значения можно было создавать динамически. Решено не создавать модель для  BookInstance:status — мы пропишем в коде необходимые значения, потому что не ожидаем их изменения. На элементах диаграммы показаны имя модели, имена и типы полей, имена методов и типы их результатов .
              
 
 
              Также показаны отношения между моделями, включая множественные отношения. Числа на линиях связи показывают максимум и минимум  моделей, участвующих отношении. Например, линия между Book и Genre показывает, что Book и Genre связаны. Числа на этой линии рядом с моделью Book показывают, что жанр может быть связан с любым количеством книг, а числа на другом конце линии рядом с Genre отмечают, что книга может быть связана с любым количеством жанров.
              
 
@@ -112,7 +112,7 @@ translation_of: Learn/Server-side/Express_Nodejs/mongoose
 
              Mongoose Library Model  with correct cardinality
              
 
 
              
-
              Заметка: В следующем разделе дан базовый пример, в котором объясняется, как задавать и как использовать модели. При чтении обратите внимание, как будут создаваться модели, приведенные на диаграмме.
              
+
              Заметка: В следующем разделе дан базовый пример, в котором объясняется, как задавать и как использовать модели. При чтении обратите внимание, как будут создаваться модели, приведённые на диаграмме.
              
 
              
 
 
              Mongoose Справочник
              
@@ -158,14 +158,14 @@ db.on('error', console.error.bind(console, 'MongoDB connection error:'));
 
              При помощи mongoose.connection можно получить стандартный объект Connection. После подключения в экземпляре Connection возникает событие open (открыт).
              
 
 
              
-
              Tip: Если необходимо создать дополнительные подключения, можно использовать mongoose.createConnection(). При этом будут применены те же БД URI (хост, БД, порт, опции и т.д.), что и в connect() и будет возвращен объект Connection.
              
+
              Tip: Если необходимо создать дополнительные подключения, можно использовать mongoose.createConnection(). При этом будут применены те же БД URI (хост, БД, порт, опции и т.д.), что и в connect() и будет возвращён объект Connection.
              
 
              
 
 
              Определение и создание моделей
              
 
 
              Модели можно создать при помощи интерфейса Schema . Schema позволяет указать поля, которые будут в каждом документе, значения полей по умолчанию и требования по валидации. Кроме того, можно задать статические методы и методы-хелперы (от help), облегчающие работу с вашими типами данных, а также задать виртуальные свойства,  которые можно использовать как и обычные поля, но без влияния на данные в самой базе данных.
              
 
-
              Схемы "компилируются "  в окончательную модель методом  mongoose.model(). После создания модели ее можно использовать для поиска, создания, обновления и удаления объектов данного типа.
              
+
              Схемы "компилируются "  в окончательную модель методом  mongoose.model(). После создания модели её можно использовать для поиска, создания, обновления и удаления объектов данного типа.
              
 
 
              
 
              Заметка: Каждой модели соответствует коллекция документов в ДБ MongoDB. Документы будут содержать поля тех типов, которые заданы в модели Schema.
              
@@ -173,7 +173,7 @@ db.on('error', console.error.bind(console, 'MongoDB connection error:'));
 
 
              Определение схем данных
              
 
-
              Код ниже показывает, как можно задать простую схему. Сначала при помощи require() создается объект mongoose, затем конструктор Schema создает новый экземпляр схемы, при этом различные поля задаются как параметры конструктора.
              
+
              Код ниже показывает, как можно задать простую схему. Сначала при помощи require() создаётся объект mongoose, затем конструктор Schema создаёт новый экземпляр схемы, при этом различные поля задаются как параметры конструктора.
              
 
 
              //Требуется Mongoose
 var mongoose = require('mongoose');
@@ -212,7 +212,7 @@ var SomeModel = mongoose.model('SomeModel', SomeModelSchema );
              
 
 
              Типы схемы (поля)
              
 
-
              Схема может содержать любое количество полей, причем каждое поле будет полем документа, хранимого в БД MongoDB. Схема-пример содержит определения многих широко используемых типов полей.
              
+
              Схема может содержать любое количество полей, причём каждое поле будет полем документа, хранимого в БД MongoDB. Схема-пример содержит определения многих широко используемых типов полей.
              
 
 
              var schema = new Schema(
 {
@@ -228,12 +228,12 @@ var SomeModel = mongoose.model('SomeModel', SomeModelSchema );
              
   nested: { stuff: { type: String, lowercase: true, trim: true } }
 })
 
-
              Большинство типов в SchemaTypes (указаны после “type:” или после имен полей) достаточно очевидны. Исключения:
              
+
              Большинство типов в SchemaTypes (указаны после “type:” или после имён полей) достаточно очевидны. Исключения:
              
 
 
                
  
              • ObjectId: Представляет отдельный экземпляр модели в БД. Например, book может ссылаться на объект- автора. Поле будет содержать уникальный идентификатор (_id) отдельного объекта. При необходимости использования этой информации применяют метод populate().
                • 
  
              • Mixed: Произвольный тип в схеме.
                • 
- 
              • []: Массив элементов. В таких моделях можно выполнять JavaScript-операции для массивов (push, pop, unshift, etc.).  Выше показан пример массивы объектов неопределенного типа и массив строк, но можно использовать массив объектов любого типа.
                • 
+ 
              • []: Массив элементов. В таких моделях можно выполнять JavaScript-операции для массивов (push, pop, unshift, etc.).  Выше показан пример массивы объектов неопределённого типа и массив строк, но можно использовать массив объектов любого типа.
                • 
 
              
 
 
              Код содержит также два способа объявления полей:
              
@@ -325,7 +325,7 @@ awesome_instance.save(function (err) {
 
 
              Создание записей (а также обновления, удаления и запросы) - это асинхронные операции, поэтому следует предусмотреть колбэк-функцию, которая будет вызвана при завершении  операции. В API используется соглашение о первом аргументе, согласно которому первый аргумент колбэк-функции должен быть значением ошибки (или null). Если API возвращает некоторый результат, он должен быть вторым аргументом.
              
 
-
              Можно использовать метод create() для создании экземпляра модели при его сохранении. Тогда колбэк-функция вернет ошибку (или null) как первый аргумент и только что созданный экземпляр как второй аргумент.
              
+
              Можно использовать метод create() для создании экземпляра модели при его сохранении. Тогда колбэк-функция вернёт ошибку (или null) как первый аргумент и только что созданный экземпляр как второй аргумент.
              
 
 
              SomeModel.create({ name: 'also_awesome' }, function (err, awesome_instance) {
   if (err) return handleError(err);
@@ -348,7 +348,7 @@ console.log(awesome_instance.name); //вывод в консоль
 
 
              Поиск записей
              
 
-
              При поиске записей методами запросов, условия поиска следует задавать как документ JSON. Приведенный фрагмент кода (ниже) показывает, как в БД найти имена (name) и возраст (age) всех спортсменов-теннисистов. Соответствие будет определяться по одному полю (sport), но можно добавить критерии поиска, задав, например, регулярное выражение, или удалить все критерии, чтобы получить список всех спортсменов.
              
+
              При поиске записей методами запросов, условия поиска следует задавать как документ JSON. Приведённый фрагмент кода (ниже) показывает, как в БД найти имена (name) и возраст (age) всех спортсменов-теннисистов. Соответствие будет определяться по одному полю (sport), но можно добавить критерии поиска, задав, например, регулярное выражение, или удалить все критерии, чтобы получить список всех спортсменов.
              
 
 
              var Athlete = mongoose.model('Athlete', yourSchema);
 
@@ -364,7 +364,7 @@ Athlete.find({ 'sport': 'Tennis' }, 'name age', function (err, athletes) {
 
              Заметка: Все колбэк-функции в Mongoose используют образец callback(error, result). Если при выполнении запроса возникает ошибка, параметр error будет содержать объект error, а result будет null. При успешном запросе параметр error будет null, а result будет содержать результат запроса.
              
 
              
 
-
              Если не задать колбэк-функцию, API вернет переменную типа Query. Можно использовать объект запроса, чтобы создать и выполнить свой запрос (с колбэк-функцией) позже, при помощи метода exec().
              
+
              Если не задать колбэк-функцию, API вернёт переменную типа Query. Можно использовать объект запроса, чтобы создать и выполнить свой запрос (с колбэк-функцией) позже, при помощи метода exec().
              
 
 
              // найти всех теннисистов
 var query = Athlete.find({ 'sport': 'Tennis' });
@@ -404,7 +404,7 @@ query.exec(function (err, athletes) {
 
 
 
              
-
              Заметка: Есть также метод count(), который определяет количество записей, соответствующих условию. Он полезен при выполнении подсчетов без фактического извлечения записей.
              
+
              Заметка: Есть также метод count(), который определяет количество записей, соответствующих условию. Он полезен при выполнении подсчётов без фактического извлечения записей.
              
 
              
 
 
              Запросы полезны и во многих других случаях. Дополнительная информация - в Queries (документация Mongoose).
              
@@ -431,17 +431,17 @@ var storySchema = Schema({
 var Story  = mongoose.model('Story', storySchema);
 var Author = mongoose.model('Author', authorSchema);
              
 
-
              Можно сохранить ссылки в связанном документе, используя значение идентификатора _id. Ниже создается автор, затем   рассказ, и значение идентификатора id автора сохраняется в поле "author" рассказа.
              
+
              Можно сохранить ссылки в связанном документе, используя значение идентификатора _id. Ниже создаётся автор, затем   рассказ, и значение идентификатора id автора сохраняется в поле "author" рассказа.
              
 
 
              var bob = new Author({ name: 'Bob Smith' });
 
 bob.save(function (err) {
   if (err) return handleError(err);
 
-  //автор Bob создан, создаем рассказ
+  //автор Bob создан, создаём рассказ
   var story = new Story({
     title: "Bob goes sledding",
-    author: bob._id    // присваиваем полю значение идентификатора Боба. Идентификатор создается по умолчанию!
+    author: bob._id    // присваиваем полю значение идентификатора Боба. Идентификатор создаётся по умолчанию!
   });
 
   story.save(function (err) {
@@ -479,7 +479,7 @@ bob.save(function (err) {
 
 
              Одна схема (модель) - один файл
              
 
-
              Можно использовать любую структуру файлов при создании схем и моделей, однако мы настоятельно рекомендуем определять каждую схему модели в отдельном модуле (файле),  экспортируя метод для создания модели. Пример приведен ниже:
              
+
              Можно использовать любую структуру файлов при создании схем и моделей, однако мы настоятельно рекомендуем определять каждую схему модели в отдельном модуле (файле),  экспортируя метод для создания модели. Пример приведён ниже:
              
 
 
              // Файл: ./models/somemodel.js
 
@@ -499,7 +499,7 @@ module.exports = mongoose.model('SomeModel', SomeModelSchema );<
 
 
              You can then require and use the model immediately in other files. Below we show how you might use it to get all instances of the model.
              
 
-
              //Создаем модель SomeModel просто вызовом модуля из файла
+
              //Создаём модель SomeModel просто вызовом модуля из файла
 var SomeModel = require('../models/somemodel')
 
 // Используем объект SomeModel (модель) для поиска всех записей в SomeModel
@@ -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 базы данных, который нужно будет задать для установки соединения.
              
@@ -520,14 +520,14 @@ SomeModel.find(callback_function);
              
 
              После входа в систему вы увидите главную страницу home:
              
 
 
                
- 
              1. Щелкните Create New в разделе MongoDB Deployments для создания новой БД.
                2. 
+ 
              2. Щёлкните Create New в разделе MongoDB Deployments для создания новой БД.
                3. 
  
              3. Откроется экран Cloud Provider Selection -  раздела провайдера облака.
                
   MLab - screen for new deployment
                
 
   
                  
    
                • Выберите план SANDBOX (Free) из раздела Plan Type (тип плана). 
                  • 
    
                • Выберите любого провайдера в разделе Cloud Provider (провайдер облака). Разные провайдеры обслуживают разные регионы (показаны под выбранным типом плана).
                  • 
-   
                • Щелкните кнопку Continue.
                  • 
+   
                • Щёлкните кнопку Continue.
                  • 
   
                
  
                4. 
  
              4. Откроется экран выбора региона Select Region.
@@ -535,7 +535,7 @@ SomeModel.find(callback_function);
              
 
   
                
    
              • 
-    
                Выберите ближайший к Вам регион и щелкните кнопку Continue.
                
+    
                Выберите ближайший к Вам регион и щёлкните кнопку Continue.
                
    
                • 
   
              
  
@@ -554,17 +554,17 @@ SomeModel.find(callback_function);
              
 
   
                
    
              • 
-    
                Щелкните Submit Order (подтвердить заказ), чтобы создать БД.
                
+    
                Щёлкните Submit Order (подтвердить заказ), чтобы создать БД.
                
    
                • 
   
              
  
  
            • 
-  
              Вы вернетесь на главный (home) экран. Щелкните по вновь созданной базе, чтобы открыть экран с детальной информацией. Как видно, в БД нет коллекций (данных).
              
+  
              Вы вернётесь на главный (home) экран. Щёлкните по вновь созданной базе, чтобы открыть экран с детальной информацией. Как видно, в БД нет коллекций (данных).
              
    mLab - Database details screen
              
     
              
-   На форме выше обведен URL для соединения с вашей БДthat you need to use to access your database is displayed on the form above (shown for this database circled above). Чтобы его использовать, необходимо создать пользователя БД, который позже введет этот URL.
              
+   На форме выше обведён URL для соединения с вашей БДthat you need to use to access your database is displayed on the form above (shown for this database circled above). Чтобы его использовать, необходимо создать пользователя БД, который позже введёт этот URL.
              
  
              • 
- 
            • Щелкните по вкладке Users и выберите кнопку Add database user (добавить пользователя БД).
              • 
+ 
            • Щёлкните по вкладке Users и выберите кнопку Add database user (добавить пользователя БД).
              • 
  
            • Введите имя пользователя и пароль (дважды), затем нажмите Create (создать). Не отмечайте Make read only (только для чтения)!
              
   
              • 
 
@@ -573,14 +573,14 @@ SomeModel.find(callback_function);              
 
 
              Установка Mongoose
              
 
-
              Откройте окно команд и перейдите в каталог, в котором создан  каркас веб-сайта Local Library. Введите команду install, чтобы установить Mongoose (и ее зависимости), а также добавьте ее в файл package.json, если вы еще не сделали этого ранее, при чтении примера Mongoose Primer.
              
+
              Откройте окно команд и перейдите в каталог, в котором создан  каркас веб-сайта Local Library. Введите команду install, чтобы установить Mongoose (и её зависимости), а также добавьте её в файл package.json, если вы ещё не сделали этого ранее, при чтении примера Mongoose Primer.
              
 
 
              npm install mongoose
 
              
 
 
              Подключение к MongoDB
              
 
-
              Откройте /app.js (в корне проекта) и скопируйте приведенный ниже текст, в котором  объявляется объект приложения Express (после строки var app = express();). Замените строку url БД ('insert_your_database_url_here') тем URL, который представляет вашу БД  (т.е. используйте информацию, полученную от mLab).
              
+
              Откройте /app.js (в корне проекта) и скопируйте приведённый ниже текст, в котором  объявляется объект приложения Express (после строки var app = express();). Замените строку url БД ('insert_your_database_url_here') тем URL, который представляет вашу БД  (т.е. используйте информацию, полученную от mLab).
              
 
 
              //Устанавливаем соединение с mongoose
 var mongoose = require('mongoose');
@@ -590,11 +590,11 @@ mongoose.Promise = global.Promise;
 var db = mongoose.connection;
 db.on('error', console.error.bind(console, 'MongoDB connection error:'));
              
 
-
              Как указано ранее в примере Mongoose primer, этот код задает соединение по умолчанию с привязкой события ошибки error (так что ошибки будут выведены в консоль). 
              
+
              Как указано ранее в примере Mongoose primer, этот код задаёт соединение по умолчанию с привязкой события ошибки error (так что ошибки будут выведены в консоль). 
              
 
 
              Определение схемы LocalLibrary
              
 
-
              Мы определим отдельный модуль для каждой модели как уже обсуждалось выше. Начнем с создания каталога для моделей в корне проекта (/models), после чего создадим отдельные файлы для каждой модели:
              
+
              Мы определим отдельный модуль для каждой модели как уже обсуждалось выше. Начнём с создания каталога для моделей в корне проекта (/models), после чего создадим отдельные файлы для каждой модели:
              
 
 
              /express-locallibrary-tutorial  //the project root
   /models
@@ -606,7 +606,7 @@ db.on('error', console.error.bind(console, 'MongoDB connection error:'));
              
 
 
              Модель автора Author
              
 
-
              Скопируйте код схемы автора Author (приведен ниже) в файл ./models/author.js . В схеме определено, что у автора есть обязательные поля имени и фамилии типа String  длиной не более 100 символов, и поля типа Date дата рождения и дата смерти.
              
+
              Скопируйте код схемы автора Author (приведён ниже) в файл ./models/author.js . В схеме определено, что у автора есть обязательные поля имени и фамилии типа String  длиной не более 100 символов, и поля типа Date дата рождения и дата смерти.
              
 
 
              var mongoose = require('mongoose');
 
@@ -644,14 +644,14 @@ module.exports = mongoose.model('Author', AuthorSchema);
 
 
              
 
              Заметка: Объявить  в схеме URL как виртуальные свойства - хорошая идея,  т.к. URL отдельного элемента при необходимости изменения требует коррекции только в одном месте.
              
- Сейчас связь при помощи этого URL еще не работает, так как у нас еще нет кода, поддерживающего маршруты для экземпляров модели.  Мы построим его в следующей статье!
              
+ Сейчас связь при помощи этого URL ещё не работает, так как у нас ещё нет кода, поддерживающего маршруты для экземпляров модели.  Мы построим его в следующей статье!
              
 
              
 
 
              В конце модуля экспортируется модель.
              
 
 
              Модель книги Book
              
 
-
              Скопируйте код схемы Book (приведен ниже) в файл ./models/book.js. Большая часть кода подобна коду для модели автора — объявляется схема с рядом строковых полей, с виртуальным свойством URL для получения  URL конкретных книг, затем модель экспортируется.
              
+
              Скопируйте код схемы Book (приведён ниже) в файл ./models/book.js. Большая часть кода подобна коду для модели автора — объявляется схема с рядом строковых полей, с виртуальным свойством URL для получения  URL конкретных книг, затем модель экспортируется.
              
 
 
              var mongoose = require('mongoose');
 
@@ -682,12 +682,12 @@ module.exports = mongoose.model('Book', BookSchema);
 
 
                
  
              • author - это ссылка на единственный объект модели Author , обязательный элемент.
                • 
- 
              • genre (жанр) - ссылка на массив объектов модели Genre. Эта модель еще не объявлена!
                • 
+ 
              • genre (жанр) - ссылка на массив объектов модели Genre. Эта модель ещё не объявлена!
                • 
 
              
 
 
              Модель экземпляра книги BookInstance
              
 
-
              Наконец, скопируйте код схемы BookInstance (приведен ниже) в файл ./models/bookinstance.js. Схема BookInstance представляет конкретный экземпляр книги, которую можно одолжить на время, и содержит информацию о доступности экземпляров книги, о дате возврата одолженной книги, о деталях версии или печатного экземпляра.
              
+
              Наконец, скопируйте код схемы BookInstance (приведён ниже) в файл ./models/bookinstance.js. Схема BookInstance представляет конкретный экземпляр книги, которую можно одолжить на время, и содержит информацию о доступности экземпляров книги, о дате возврата одолженной книги, о деталях версии или печатного экземпляра.
              
 
 
              var mongoose = require('mongoose');
 
@@ -734,7 +734,7 @@ module.exports = mongoose.model('BookInstance', BookInstanceSchema);
              
  
            • Экспортируйте модель.
              • 
 
 
-
              Тестирование — создаем элементы БД
              
+
              Тестирование — создаём элементы БД
              
 
 
              Вот так. У нас теперь есть все модели для создания сайта!
              
 
@@ -764,7 +764,7 @@ module.exports = mongoose.model('BookInstance', BookInstanceSchema);
              
 
 
              В этой статье мы познакомились с БД и ОРМ (объектно-реляционными моделями) в системе Node/Express, узнали, как определяются схемы и модели Mongoose. Мы применили эти знания при проектировании и реализации моделей Book, BookInstance, Author и Genre для веб-сайта LocalLibrary.
              
 
-
              В конце мы испытали свои модели путем создания ряда элементов (при помощи автономного скрипта). В следующей статье мы рассмотрим создание страниц, на которых будут показаны эти элементы.
              
+
              В конце мы испытали свои модели путём создания ряда элементов (при помощи автономного скрипта). В следующей статье мы рассмотрим создание страниц, на которых будут показаны эти элементы.
              
 
 
              Смотрите также
              
 
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 14d65e989c..65169cf637 100644
--- a/files/ru/learn/server-side/express_nodejs/routes/index.html
+++ b/files/ru/learn/server-side/express_nodejs/routes/index.html
@@ -34,7 +34,7 @@ translation_of: Learn/Server-side/Express_Nodejs/routes
 
 
              В последней статье мы определили модели Mongoose  для взаимодействия с базой данных, и использовали (автономный) скрипт, который создал некоторые исходные записи библиотеки. Теперь можно написать код, чтобы представить эту информацию пользователям. Первое, что нужно сделать, это решить, какие возможности для отображения информации мы хотим иметь на наших страницах, а затем определить соответствующие URL-адреса для получения этих ресурсов. Затем нужно будет создать маршруты (обработчики URL-адресов) и представления (шаблоны) для отображения этих страниц.
              
 
-
              Приведенная ниже диаграмма напоминает об основном потоке данных и об элементах, которые необходимо реализовать при обработке HTTP-запроса/ответа. Кроме представлений и маршрутов на диаграмме показаны "контроллеры" - функции, которые отделяют код для маршрутизации запросов от кода, который фактически обрабатывает запросы.
              
+
              Приведённая ниже диаграмма напоминает об основном потоке данных и об элементах, которые необходимо реализовать при обработке HTTP-запроса/ответа. Кроме представлений и маршрутов на диаграмме показаны "контроллеры" - функции, которые отделяют код для маршрутизации запросов от кода, который фактически обрабатывает запросы.
              
 
 
              Поскольку модели уже созданы, основные элементы, которые следует создать, таковы:
              
 
@@ -48,13 +48,13 @@ translation_of: Learn/Server-side/Express_Nodejs/routes
 
 
              В итоге, у нас должны быть страницы для вывода списков  и  детальной информации по книгам, жанрам, авторам и экземплярам книг, а также страницы для создания, обновления и удаления записей. Это много для одной статьи. Поэтому большая часть этой статьи будет сосредоточена на настройке наших маршрутов и контроллеров для возврата "фиктивного" контента. Мы расширим методы контроллеров для работы с данными модели в следующих статьях .
              
 
-
              В первом разделе ниже приведен краткие основы того, как использовать промежуточное средство (middleware)  Express Router. Эти знания будут использованы в следующих разделах при настройке  маршрутов для LocalLibrary.
              
+
              В первом разделе ниже приведён краткие основы того, как использовать промежуточное средство (middleware)  Express Router. Эти знания будут использованы в следующих разделах при настройке  маршрутов для LocalLibrary.
              
 
 
              Маршруты - основы
              
 
 
              Маршруты - это часть кода Express, связывающая HTTP действия (GET, POST, PUT, DELETE, etc.), URL пути (шаблона), и функцию, которая обрабатывает этот шаблон.
              
 
-
              Есть несколько способов создания маршрутов. В этом уроке мы используем промежуточные запросы express.Router,  так как они позволяют группировать обработчики маршрутов для определенной части сайта и получать к ним доступ через общий префикс маршрута.  Все маршруты, связанные с библиотекой, будут сохранены в модуле "catalog", и если мы добавим маршруты для обработки учетных записей пользователей или других функций, мы сможем сгруппировать их отдельно.
              
+
              Есть несколько способов создания маршрутов. В этом уроке мы используем промежуточные запросы express.Router,  так как они позволяют группировать обработчики маршрутов для определённой части сайта и получать к ним доступ через общий префикс маршрута.  Все маршруты, связанные с библиотекой, будут сохранены в модуле "catalog", и если мы добавим маршруты для обработки учётных записей пользователей или других функций, мы сможем сгруппировать их отдельно.
              
 
 
              
 
              Заметка: Маршруты приложения Express уже кратко рассматривались в Express Introduction > Creating route handlers (Введение -> Создание обработчиков маршрутов).  Применение Router обеспечивает лучшую поддержку модульности (как обсуждается в первой подсекции ниже), а в остальном очень похоже на определение маршрутов непосредственно в объекте приложения Express.
              
@@ -97,11 +97,11 @@ module.exports = router;
 // ...
 app.use('/wiki', wiki);
              
 
-
              После этого два маршрута, определенные в нашем модуле маршрутов wiki, станут доступны из /wiki/ и /wiki/about/.
              
+
              После этого два маршрута, определённые в нашем модуле маршрутов wiki, станут доступны из /wiki/ и /wiki/about/.
              
 
 
              Функции Route
              
 
-
              В модуле выше определена пара типовых функций маршрута. Маршрут "about" (еще раз показан ниже) определен при помощи метода Router.get(), который отвечает только на  HTTP GET-запросы. Первый аргумент метода - URL-путь, а второй -  колбэк-функция, которая будет вызвана, если получен HTTP GET-запрос с указанным путем.
              
+
              В модуле выше определена пара типовых функций маршрута. Маршрут "about" (ещё раз показан ниже) определён при помощи метода Router.get(), который отвечает только на  HTTP GET-запросы. Первый аргумент метода - URL-путь, а второй -  колбэк-функция, которая будет вызвана, если получен HTTP GET-запрос с указанным путем.
              
 
 
              router.get('/about', function (req, res) {
   res.send('About this wiki');
@@ -117,7 +117,7 @@ app.use('/wiki', wiki);
              
 
              Выше у функции роутера только один колбэк-аргумент, но можно указать столько таких аргументов, сколько хотите, или указать массив колбэк-функций. каждая из функций - это элемент в цепочке промежуточного слоя, и они будут вызываться в порядке их добавления в цепочку (если предыдущая функция не завершит запрос).
              
 
 
-
              Здесь, когда приходит GET-запрос с путем ('/about') колбэк-функция при ответе вызывает send() , возвращая строку "About this wiki". Существует  ряд других методов ответа , завершающих цикл запрос-ответ. Например, можно вызвать res.json() , чтобы послать ответ JSON, или res.sendFile(), чтобы послать файл. Метод ответа, который будет использован чаще всего при построении нашей библиотеки - это  render(), создающий, на основе шаблонов и данных, и возвращающий  HTML-файлы —мы поговорим об этом подробнее в следующей статье!
              
+
              Здесь, когда приходит GET-запрос с путём ('/about') колбэк-функция при ответе вызывает send() , возвращая строку "About this wiki". Существует  ряд других методов ответа , завершающих цикл запрос-ответ. Например, можно вызвать res.json() , чтобы послать ответ JSON, или res.sendFile(), чтобы послать файл. Метод ответа, который будет использован чаще всего при построении нашей библиотеки - это  render(), создающий, на основе шаблонов и данных, и возвращающий  HTML-файлы —мы поговорим об этом подробнее в следующей статье!
              
 
 
              HTTP глаголы (действия)
              
 
@@ -125,7 +125,7 @@ app.use('/wiki', wiki);
              Кроме того, Router обеспечивает также методы маршрутизации для других HTTP глаголов, которые обычно используются точно таким же способом: post(), put(), delete(), options(), trace(), copy(), lock(), mkcol(), move(), purge(), propfind(), proppatch(), unlock(), report(), ​​​​​​ mkactivity(), checkout(), merge(), m-search(), notify(), subscribe(), unsubscribe(), patch(), search(), и connect().
              
 
-
              Например, код ниже делает то же, что и предыдущий, с путем /about, но отвечает на  HTTP POST-запросы.
              
+
              Например, код ниже делает то же, что и предыдущий, с путём /about, но отвечает на  HTTP POST-запросы.
              router.post('/about', function (req, res) {
   res.send('About this wiki');
@@ -156,7 +156,7 @@ app.use('/wiki', wiki);
              Параметры маршрутов
              
 
-
              Параметры маршрутов - это именованные сегменты URL , которые используются для выбора значений из указанной позиции  URL. Именованные сегменты начинаются двоеточием, после которого следует имя (например, /:your_parameter_name/.  Выбранные значения сохраняются в объекте req.params, причем имя параметра  используется как ключ (т.е. req.params.your_parameter_name).
              
+
              Параметры маршрутов - это именованные сегменты URL , которые используются для выбора значений из указанной позиции  URL. Именованные сегменты начинаются двоеточием, после которого следует имя (например, /:your_parameter_name/.  Выбранные значения сохраняются в объекте req.params, причём имя параметра  используется как ключ (т.е. req.params.your_parameter_name).
              Предположим, например, что URL содержит информацию о пользователях и книгах:  http://localhost:3000/users/34/books/8989. Можно извлечь эту информацию (см. ниже) в параметры userId и bookId пути:
              
 
@@ -170,14 +170,14 @@ app.use('/wiki', wiki);
              Имена параметров пути должны состоять из “символов слова” (A-Z, a-z, 0-9, и _).
              
-
              Заметка: URL /book/create будет соответствовать маршрутам вида /book/:bookId (и 'create' станет значением "bookId"). Будет использован первый маршрут, соответствующий введенному  URL, поэтому, если необходимо обрабатывать URL вида /book/create отдельно, обработчик этого маршрута должен быть расположен до маршрута /book/:bookId .
              
+
              Заметка: URL /book/create будет соответствовать маршрутам вида /book/:bookId (и 'create' станет значением "bookId"). Будет использован первый маршрут, соответствующий введённому  URL, поэтому, если необходимо обрабатывать URL вида /book/create отдельно, обработчик этого маршрута должен быть расположен до маршрута /book/:bookId .
              
 
              Для начала этих сведений достаточно - если потребуется, можно найти дополнительную информацию в документации  Express: Basic routing (основы маршрутизации) и Routing guide (руководство по маршрутизации).  В следующем разделе показано, как задать маршруты и контроллеры для нашей библиотеки LocalLibrary.
              Маршруты, необходимые для библиотеки 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.
                • 
@@ -190,7 +190,7 @@ app.use('/wiki', wiki);
 
 
                Первая домашняя страница и страницы со списками не кодируют никакой дополнительной информации. Хотя результаты, возвращаемые запросами, будут зависеть от типа модели и от содержимого БД, запросы для получения этой информации всегда будут одинаковы (подобно тому, как код для создания объектов всегда будет одним и тем же). 
                
 
-
                В противоположность этому, другие URL используются для работы с  определенными экземплярами документов и моделей— индивидуальность элементов кодируется в  URL (как <id> выше). Параметры путей используются для извлечения информации и передачи ее в обработчик пути (и в следующей статье мы применим этот прием для того, чтобы динамически определять, какую информацию следует получить из БД). By encoding the information in our URL we only need one route for every resource of a particular type (e.g. one route to handle the display of every single book item).
                
+
                В противоположность этому, другие URL используются для работы с  определёнными экземплярами документов и моделей— индивидуальность элементов кодируется в  URL (как <id> выше). Параметры путей используются для извлечения информации и передачи её в обработчик пути (и в следующей статье мы применим этот приём для того, чтобы динамически определять, какую информацию следует получить из БД). By encoding the information in our URL we only need one route for every resource of a particular type (e.g. one route to handle the display of every single book item).
                
 
 
                
 
                Заметка: Express позволяет строить URL любым способом, который вам нравится — можно кодировать информацию в теле  URL как показано выше или использовать URL GET -запрос с параметрами (например, /book/?id=6). Какой бы подход вы не применяли, URL должны быть ясными, логичными и читаемыми (ознакомьтесь с советами W3C).
                
@@ -198,11 +198,11 @@ app.use('/wiki', wiki);
 
 
                Далее мы создадим колбэк-функции обработчиков маршрутов и код маршрутов для всех указанных выше URL.
                
 
-
                Создаем колбэк-функции обработчиков маршрутов
                
+
                Создаём колбэк-функции обработчиков маршрутов
                
 
 
                Перед определением маршрутов сначала создадим фиктивные (каркасные) колбэк-функции, которые они будут вызывать. Эти функции будут храниться в отдельных модулях -"контроллерах" для моделей Book, BookInstance, Genre, и Author (можно использовать любую структуру моделей и файлов, но кажется, что выбранная обеспечивает приемлемую модульность нашего проекта).
                
 
-
                Начнем с создания каталога для контроллеров в корне проекта (/controllers), а затем создадим отдельные файлы (модули) контроллеров для работы с моделями:
                
+
                Начнём с создания каталога для контроллеров в корне проекта (/controllers), а затем создадим отдельные файлы (модули) контроллеров для работы с моделями:
                
 
 
                /express-locallibrary-tutorial  //корень проекта
   /controllers
@@ -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
                
 
@@ -358,7 +358,7 @@ exports.genre_update_post = function(req, res) {
 
 
                Контроллер книги
                
 
-
                Скопируйте следующий код в файл /controllers/bookController.js. Он построен по образцу других модулей контроллеров, но еще содержит функцию index() для вывода странички с приветствием:
                
+
                Скопируйте следующий код в файл /controllers/bookController.js. Он построен по образцу других модулей контроллеров, но ещё содержит функцию index() для вывода странички с приветствием:
                
 
 
                var Book = require('../models/book');
 
@@ -409,9 +409,9 @@ exports.book_update_post = function(req, res) {
 
 
                Создание модуля для маршрута catalog
                
 
-
                Далее мы создадим маршруты для всех URL, необходимых веб-сайту LocalLibrary, которые будут вызывать функции контроллеров, определенные в предыдущем разделе.
                
+
                Далее мы создадим маршруты для всех URL, необходимых веб-сайту LocalLibrary, которые будут вызывать функции контроллеров, определённые в предыдущем разделе.
                
 
-
                Каркас приложения уже содержит каталог ./routes, в котором есть маршруты для index и users. Внутри этого каталога создадим еще один файл маршрутов — catalog.js ( см. ниже).
                
+
                Каркас приложения уже содержит каталог ./routes, в котором есть маршруты для index и users. Внутри этого каталога создадим ещё один файл маршрутов — catalog.js ( см. ниже).
                
 
 
                /express-locallibrary-tutorial //the project root
   /routes
@@ -419,7 +419,7 @@ exports.book_update_post = function(req, res) {
     users.js
     catalog.js
                
 
-
                Скопируйте приведенный ниже код в файл /routes/catalog.js :
                
+
                Скопируйте приведённый ниже код в файл /routes/catalog.js :
                
 
 
                var express = require('express');
 var router = express.Router();
@@ -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) {
@@ -582,7 +582,7 @@ app.use('/users', usersRouter);
 app.use('/catalog', catalogRouter);  // Add catalog routes to middleware chain.
                
 
 
                
-
                Заметка: Мы добавили модуль каталога в путь'/catalog'.  Этот путь будет предшествовать всем путям, определенным в модуле каталога. Например, для доступа к списку книг URL будет таким: /catalog/books/.
                
+
                Заметка: Мы добавили модуль каталога в путь'/catalog'.  Этот путь будет предшествовать всем путям, определённым в модуле каталога. Например, для доступа к списку книг URL будет таким: /catalog/books/.
                
 
                
 
 
                Вот так. Теперь у нас есть пути и фиктивные функции, подготовленные для всех  URL, которые мы собираемся поддерживать на веб-сайте LocalLibrary.
                
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 1ed22246de..7f01cbf62e 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
@@ -73,7 +73,7 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website
 
 
                Какой движок представлений следует использовать?
                
 
-
                Express-generator дает возможность сконфигурировать несколько популярных движков, включая EJS, Hbs, Pug (Jade), Twig, и Vash, но по умолчанию  выбран Jade. Экспресс сразу после установки может поддерживать большое количество и других шаблонизаторов.
                
+
                Express-generator даёт возможность сконфигурировать несколько популярных движков, включая EJS, Hbs, Pug (Jade), Twig, и Vash, но по умолчанию  выбран Jade. Экспресс сразу после установки может поддерживать большое количество и других шаблонизаторов.
                
 
 
                
 
                Заметка: При желании использовать шаблонизатор, который не поддерживается генератором,  просмотрите  документацию Using template engines with Express  и документацию для нужного шаблонизатора.
                
@@ -86,7 +86,7 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website
  
              • Популярность и активность — проверьте популярность движка, возможно, у него есть активное сообщество. Очень важно иметь поддержку для движка, если у вас возникнут проблемы в течении жизни веб-сайта.
                • 
  
              • Стиль — некоторые шаблонизаторы используют особую разметку для отображения вставленного контента внутри "обычного" HTML, а другие строят  HTML, используя специальный синтаксис (например, используя отступы или блочные имена).
                • 
  
              • Производительность и время интерпретации.
                • 
- 
              • Особенности — следует выбирать движок  с учетом таких особенностей:
+ 
              • Особенности — следует выбирать движок  с учётом таких особенностей:
   
                  
    
                • Наследование макета: позволяет определить базовый шаблон и затем наследовать только те части, которые отличаются для конкретной страницы. Это, как правило, лучший подход, чем создание шаблонов путём включения нескольких необходимых компонентов или создания шаблона с нуля каждый раз.
                  • 
    
                • Поддержка «Include»: позволяет создавать шаблоны, включая другие шаблоны.
                  • 
@@ -207,7 +207,7 @@ GET /favicon.ico 404 34.134 ms - 1335
                • 
 
                Обеспечиваем
                
  перезапуск сервера при изменении файлов
                
 
-
                Любые изменения, внесенные на веб-сайт Express, не будут отображаться до перезапуска сервера. Остановка (Ctrl-C) и перезапуск сервера каждый раз после внесения изменений быстро становится раздражающей, поэтому стоит автоматизировать перезапуск.
                
+
                Любые изменения, внесённые на веб-сайт Express, не будут отображаться до перезапуска сервера. Остановка (Ctrl-C) и перезапуск сервера каждый раз после внесения изменений быстро становится раздражающей, поэтому стоит автоматизировать перезапуск.
                
 
 
                Одно из самых простых средств для этого --
                
  nodemon. Его обычно устанавливают глобально (так как это "инструмент"), но  сейчас мы установим его и будем применять локально как зависимость разработки, так что любые разработчики проекта получат его автоматически при установке приложения. Выполним следующую команду (предполагаем, что мы находимся в корневом каталоге):
                
@@ -254,7 +254,7 @@ GET /favicon.ico 404 34.134 ms - 1335
                
 
                DEBUG=express-locallibrary-tutorial:* npm run devstart
                
 
 
                
-
                Заметка: Сейчас после изменения любого файла проекта сервер будет перезапускаться (или можно самостоятельно перезапустить его, введя rs в командной строке). Вам все равно придется обновить страницу в браузере .
                
+
                Заметка: Сейчас после изменения любого файла проекта сервер будет перезапускаться (или можно самостоятельно перезапустить его, введя rs в командной строке). Вам все равно придётся обновить страницу в браузере .
                
 
 
                Теперь мы должны выполнять команду "npm run <scriptname>" а не просто  npm start, поскольку "start", это, по сути, команда NPM, сопоставленная сценарию в файле package.json. Можно заменить команду в сценарии "start", но, так как мы хотим использовать nodemon только во время разработки, разумно создать новую команду сценария.
                
 
                
@@ -265,7 +265,7 @@ GET /favicon.ico 404 34.134 ms - 1335
                
 
 
                Структура каталогов
                
 
-
                После установки зависимостей проект имеет такую структуру файлов (файлы - это элементы без префикса"/"). Файл package.json определяет имя файла с приложением, сценарии запуска, зависимости и др.  Сценарий запуска задает точку входа приложения, у нас -- файл JavaScript /bin/www. Этот файл настраивает некоторые обработчики ошибок приложения, а затем загружает  app.js для выполнения остальной работы. Пути приложения хранятся в отдельных модулях каталога routes/.  Шаблоны хранятся в каталоге /views.
                
+
                После установки зависимостей проект имеет такую структуру файлов (файлы - это элементы без префикса"/"). Файл package.json определяет имя файла с приложением, сценарии запуска, зависимости и др.  Сценарий запуска задаёт точку входа приложения, у нас -- файл JavaScript /bin/www. Этот файл настраивает некоторые обработчики ошибок приложения, а затем загружает  app.js для выполнения остальной работы. Пути приложения хранятся в отдельных модулях каталога routes/.  Шаблоны хранятся в каталоге /views.
                
 
 
                /express-locallibrary-tutorial
     app.js
@@ -321,7 +321,7 @@ GET /favicon.ico 404 34.134 ms - 1335
                
 
 
                  
  
                • body-parser: -- анализирует часть тела входящего запроса HTTP и облегчает извлечение из него различных частей. Например, мы можно читать POST-параметры.
                  • 
- 
                • cookie-parser: разбирает заголовок и заполняет req.cookies (по сути, дает удобный метод для доступа к информации cookie).
                  • 
+ 
                • cookie-parser: разбирает заголовок и заполняет req.cookies (по сути, даёт удобный метод для доступа к информации cookie).
                  • 
  
                • debug: небольшой отладчик, работающий по образцу методики отладки ядра node.
                  • 
  
                • morgan: средство логирования запросов HTTP для node.
                  • 
  
                • serve-favicon: средство обработки favicon (значка, используемого для представления сайта на вкладках браузера, закладках и т. д).
                  • 
@@ -336,7 +336,7 @@ GET /favicon.ico 404 34.134 ms - 1335
 
 
                  Файл www
                  
 
-
                  Файл /bin/www – это входная точка приложения. Сначала в файле создается объект основного приложения, расположенного в app.js — выполняется app=require(./app).
                  
+
                  Файл /bin/www – это входная точка приложения. Сначала в файле создаётся объект основного приложения, расположенного в app.js — выполняется app=require(./app).
                  
 
 
                  #!/usr/bin/env node
 
@@ -351,11 +351,11 @@ GET /favicon.ico 404 34.134 ms - 1335
                  
 
                  Заметка: require() -- это глобальная функция node  для импорта модулей в текущий файл.  Для модуля app.js указан относительный путь, а расширение файла по умолчанию (.js) опущено.
                  
 
                
 
-
                Оставшаяся часть кода настраивает порт сервера node для HTTP (определен в переменной среды или 3000, если не определен), и начинает обработку и протоколирование соединений и ошибок сервера. Сейчас вам не требуется дополнительных сведений о коде (все в этом файле шаблонно), но, при желании, его можно посмотреть.
                
+
                Оставшаяся часть кода настраивает порт сервера node для HTTP (определён в переменной среды или 3000, если не определён), и начинает обработку и протоколирование соединений и ошибок сервера. Сейчас вам не требуется дополнительных сведений о коде (все в этом файле шаблонно), но, при желании, его можно посмотреть.
                
 
 
                Файл app.js
                
 
-
                Этот файл создает объект приложения  express (с именемapp, по соглашению), настраивает приложение и промежуточное ПО, а затем экспортирует приложение из модуля. В приведенном ниже коде показаны только те части файла, которые создают и экспортируют объект приложения:
                
+
                Этот файл создаёт объект приложения  express (с именемapp, по соглашению), настраивает приложение и промежуточное ПО, а затем экспортирует приложение из модуля. В приведённом ниже коде показаны только те части файла, которые создают и экспортируют объект приложения:
                
 
 
                var express = require('express');
 var app = express();
@@ -382,10 +382,10 @@ var users = require('./routes/users');
 
                
 
 
                
-
                Заметка: Здесь мы только импортируем модули. В действительности эти пути еще не используются — это произойдет в файле несколько позже.
                
+
                Заметка: Здесь мы только импортируем модули. В действительности эти пути ещё не используются — это произойдёт в файле несколько позже.
                
 
                
 
-
                Далее, импортированные модули express применяются для создания объекта app, который потом устанавливает движки-шаблоны представления. Установка движков состоит их двух частей. В первой мы задаем значение 'view', указывая папку, в которой будут размещаться шаблоны (у нас это /views). Во второй мы задаем значение движка 'view engine', указывая на библиотеку шаблона (у нас — "pug").
                
+
                Далее, импортированные модули express применяются для создания объекта app, который потом устанавливает движки-шаблоны представления. Установка движков состоит их двух частей. В первой мы задаём значение 'view', указывая папку, в которой будут размещаться шаблоны (у нас это /views). Во второй мы задаём значение движка 'view engine', указывая на библиотеку шаблона (у нас — "pug").
                
 
 
                var app = express();
 
@@ -412,7 +412,7 @@ app.use('/users', users);
 
                
 
 
                
-
                Заметка: . пути, указанные выше ('/' и '/users') рассматриваются как префиксы путей, определенных в импортированных файлах. Так, например, если импортированный модуль users определяет путь для /profile, для доступа следует указать /users/profile.  Мы поговорим подробнее о путях в последующей статье.
                
+
                Заметка: . пути, указанные выше ('/' и '/users') рассматриваются как префиксы путей, определённых в импортированных файлах. Так, например, если импортированный модуль users определяет путь для /profile, для доступа следует указать /users/profile.  Мы поговорим подробнее о путях в последующей статье.
                
 
                
 
 
                Последняя в файле промежуточная библиотека добавляет методы обработки ошибок и ответов 404 от HTTP.
                
@@ -442,7 +442,7 @@ app.use(function(err, req, res, next) {
 
 
                Пути (Routes)
                
 
-
                Файл путей /routes/users.js приведен ниже (файлы путей имеют сходную структуру, поэтому нет необходимости приводить также index.js). Сначала загружается модуль Express, затем он используется для получения объекта express.Router. После этого для этого объекта задается путь, и, наконец, объект-роутер экспортируется из модуля (именно это позволяет импортировать файл в app.js):.
                
+
                Файл путей /routes/users.js приведён ниже (файлы путей имеют сходную структуру, поэтому нет необходимости приводить также index.js). Сначала загружается модуль Express, затем он используется для получения объекта express.Router. После этого для этого объекта задаётся путь, и, наконец, объект-роутер экспортируется из модуля (именно это позволяет импортировать файл в app.js):.
                
 
 
                var express = require('express');
 var router = express.Router();
@@ -455,7 +455,7 @@ var router = express.Router();
 module.exports = router;
 
                
 
-
                Путь определяет колбэк-функцию, которая будет вызвана, когда обнаружится HTTP GET-запрос корректного вида. Образец для сопоставления пути задается при импорте модуля -- ('/users') плюс что-то, определяемое в этом файле ('/'). Иными словами, этот путь будет использован, когда получен URL-запрос /users/.
                
+
                Путь определяет колбэк-функцию, которая будет вызвана, когда обнаружится HTTP GET-запрос корректного вида. Образец для сопоставления пути задаётся при импорте модуля -- ('/users') плюс что-то, определяемое в этом файле ('/'). Иными словами, этот путь будет использован, когда получен URL-запрос /users/.
                
 
 
                
 
                Совет: запустите сервер и задайте в браузере URL http://localhost:3000/users/. Вы должны увидеть сообщение: 'respond with a resource'.
                
@@ -473,7 +473,7 @@ router.get('/', function(req, res) {
 });
 
 
-
                Шаблон для пути '/' приведен ниже (файл index.pug). О синтаксисе мы поговорим позже. Сейчас важно знать, что переменная title со значением 'Express' помещена в определенное место шаблона.
                
+
                Шаблон для пути '/' приведён ниже (файл index.pug). О синтаксисе мы поговорим позже. Сейчас важно знать, что переменная title со значением 'Express' помещена в определённое место шаблона.
                
 
 
                extends layout
 
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 6a816405e4..57b1bcc18a 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
@@ -43,7 +43,7 @@ original_slug: Learn/Server-side/Express_Nodejs/Учебник_сайт_local_li
  
              • Использовать базу данных для хранения данных вашего приложения.
                • 
  
              • Создавать маршруты для запросов различной информации и шаблонов ("представлений") для рендеринга данных в виде HTML для отображения в браузере.
                • 
  
              • Работать с формами.
                • 
- 
              • Развертывать ваше приложение в производство.
                • 
+ 
              • Развёртывать ваше приложение в производство.
                • 
 
              Вы уже имеете знания о некоторых из этих тем и кратко касались других. К концу серии уроков вы должны знать достаточно, чтобы разрабатывать простые приложения Express самостоятельно.
              
diff --git a/files/ru/learn/server-side/first_steps/index.html b/files/ru/learn/server-side/first_steps/index.html
index 4f6b0b78f6..7e1c323a9e 100644
--- a/files/ru/learn/server-side/first_steps/index.html
+++ b/files/ru/learn/server-side/first_steps/index.html
@@ -15,7 +15,7 @@ translation_of: Learn/Server-side/First_steps
 ---
 
              {{LearnSidebar}}
              
 
-
              В этом модуле, посвященном программированию на стороне сервера, мы ответим на несколько фундаментальных вопросов о программировании серверной части: «что это такое?», «чем оно отличается от программирования клиентской части?» и «почему оно так полезно?». Затем последует обзор некоторых самых популярных веб-фреймворков для серверной части и руководство по выбору наиболее подходящего фреймворка для создания вашего первого сайта. Наконец, мы завершим этот модуль вводной статьей о безопасности веб-сервера.
              
+
              В этом модуле, посвящённом программированию на стороне сервера, мы ответим на несколько фундаментальных вопросов о программировании серверной части: «что это такое?», «чем оно отличается от программирования клиентской части?» и «почему оно так полезно?». Затем последует обзор некоторых самых популярных веб-фреймворков для серверной части и руководство по выбору наиболее подходящего фреймворка для создания вашего первого сайта. Наконец, мы завершим этот модуль вводной статьёй о безопасности веб-сервера.
              
 
 
              Прежде чем начать
              
 
@@ -41,9 +41,9 @@ translation_of: Learn/Server-side/First_steps
  
              Фреймворки серверной части
              
  
              Последняя статья рассказывает о том, что нужно делать веб-приложению серверной стороны для ответа на запросы от веб-браузера. Мы покажем здесь, как веб-фреймворки могут упростить эти задачи и поможем вам подобрать подходящий фреймворк для вашего первого серверного веб-приложения.
              
  
              Безопасность веб-сайта
              
- 
              Безопасность веб-сайта требует бдительности на всех этапах проектирования сайта и его использования. Эта вводная статья не сделает из вас гуру безопасности сайтов, но поможет узнать, какие первые важные шаги вы можете предпринять для повышения устойчивости вашего веб-приложения против наиболее распространенных угроз.
              
+ 
              Безопасность веб-сайта требует бдительности на всех этапах проектирования сайта и его использования. Эта вводная статья не сделает из вас гуру безопасности сайтов, но поможет узнать, какие первые важные шаги вы можете предпринять для повышения устойчивости вашего веб-приложения против наиболее распространённых угроз.
              
 
 
 
              Аттестация
              
 
-
              Этот "обзорный" модуль не содержит никакой аттестации, поскольку мы даже не прилагаем здесь для вас никакого кода. Мы действительно надеемся, что на текущем этапе у вас сформировалось четкое понимание того, какие виды функционала вы можете предоставить, используя программирование на стороне сервера, и вы уже приняли решение по поводу фреймворка, который вы будете использовать для создания вашего первого сайта.
              
+
              Этот "обзорный" модуль не содержит никакой аттестации, поскольку мы даже не прилагаем здесь для вас никакого кода. Мы действительно надеемся, что на текущем этапе у вас сформировалось чёткое понимание того, какие виды функционала вы можете предоставить, используя программирование на стороне сервера, и вы уже приняли решение по поводу фреймворка, который вы будете использовать для создания вашего первого сайта.
              
diff --git a/files/ru/learn/server-side/first_steps/web_frameworks/index.html b/files/ru/learn/server-side/first_steps/web_frameworks/index.html
index 29f5d6330c..25b9ec408e 100644
--- a/files/ru/learn/server-side/first_steps/web_frameworks/index.html
+++ b/files/ru/learn/server-side/first_steps/web_frameworks/index.html
@@ -235,7 +235,7 @@ def youngest(request):
 
 
              Flask — это микрофреймворк для Python.
              
  
              
- И хотя Flask минималистичен, он может создавать серьезные веб-сайты из коробки. Он содержит сервер разработки и отладчик, а также поддерживает шаблоны Jinja2, безопасные файлы cookie, модульное тестирование и диспетчеризацию запросов RESTful. У него хорошая документация и активное сообщество.
              
+ И хотя Flask минималистичен, он может создавать серьёзные веб-сайты из коробки. Он содержит сервер разработки и отладчик, а также поддерживает шаблоны Jinja2, безопасные файлы cookie, модульное тестирование и диспетчеризацию запросов RESTful. У него хорошая документация и активное сообщество.
              
 
 
              Flask стал чрезвычайно популярным, особенно для разработчиков, которым необходимо предоставлять веб-сервисы в небольших системах с ограниченными ресурсами (например, запуск веб-сервера на Raspberry Pi, контроллеры Drone и т. п.).
              
 
@@ -243,7 +243,7 @@ def youngest(request):
 
 
              Express — быстрый, непринуждённый, гибкий и минималистский веб-фреймворк для Node.js (node — это серверная среда для запуска JavaScript). Он обеспечивает надёжный набор функций для веб и мобильных приложений и предоставляет полезные HTTP-утилиты и middleware (промежуточные интерфейсы).
              
 
-
              Express чрезвычайно популярен, частично потому, что он облегчает миграцию клиентских веб-программистов JavaScript в разработку на стороне сервера, а частично потому, что он ресурсоэффективен (базовая среда узлов использует легкую многозадачность в потоке, а не порождает отдельные процессы для каждого новый веб-запроса).
              
+
              Express чрезвычайно популярен, частично потому, что он облегчает миграцию клиентских веб-программистов JavaScript в разработку на стороне сервера, а частично потому, что он ресурсоэффективен (базовая среда узлов использует лёгкую многозадачность в потоке, а не порождает отдельные процессы для каждого новый веб-запроса).
              
 
 
              Поскольку Express является минималистским веб-фреймворком, он не включает в себя все компоненты, которые вы, возможно, захотите использовать (например, доступ к базе данных и поддержка пользователей и сеансов предоставляются через независимые библиотеки). Есть много отличных независимых компонентов, но иногда бывает сложно решить, какой из них лучше всего подходит для конкретной цели! 
              
 
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 514d7490a5..1f976dd741 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
@@ -8,7 +8,7 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность
 
 
              {{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
              
 
-
              Безопасность сайта требует бдительности во всех аспектах дизайна и использования сайта. Эта вводная статья не сделает из вас гуру безопасности веб-сайта, но она поможет вам понять, откуда приходят угрозы, и что вы можете сделать, чтобы укрепить свое веб-приложение против наиболее распространенных атак.
              
+
              Безопасность сайта требует бдительности во всех аспектах дизайна и использования сайта. Эта вводная статья не сделает из вас гуру безопасности веб-сайта, но она поможет вам понять, откуда приходят угрозы, и что вы можете сделать, чтобы укрепить своё веб-приложение против наиболее распространённых атак.
              
 
 
              
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
              
@@ -18,20 +18,20 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность
   
   
-   
+   
              
  
              
    Цель:Понять самые распространенные угрозы безопасности веб-приложений. И что вы можете сделать, чтобы уменьшить риск взлома вашего сайта.Понять самые распространённые угрозы безопасности веб-приложений. И что вы можете сделать, чтобы уменьшить риск взлома вашего сайта.
   
              
                
 
              
 
 
              Что такое безопасность сайта?
              
 
-
              Интернет опасное место! Мы регулярно слышим о том, что веб-сайты становятся недоступными из-за атак типа отказано в обслуживании, или отображение измененной (и часто поврежденной) информации на их страницах. В других случаях миллионы паролей, адресов электронной почты и данные кредитных карт становились общедоступными, подвергая пользователей веб-сайта личному смущению или к финансовым рискам.
              
+
              Интернет опасное место! Мы регулярно слышим о том, что веб-сайты становятся недоступными из-за атак типа отказано в обслуживании, или отображение изменённой (и часто повреждённой) информации на их страницах. В других случаях миллионы паролей, адресов электронной почты и данные кредитных карт становились общедоступными, подвергая пользователей веб-сайта личному смущению или к финансовым рискам.
              
 
 
              Цель веб-безопасности заключается в предотвращении этих (или других) видов атак. Более формальным определением веб-безопасности является: способы защиты веб-сайтов от несанкционированного доступа, использования, изменения, уничтожения или нарушения работы.
              
 
-
              Для эффективной безопасности веб-сайта необходимо уделять особое внимание к разработке всего веб-сайта: к вашему веб-приложению, конфигурации веб-сервера, при написании политик создания и обновления паролей, а так же кода на стороне клиента. Хотя все это звучит очень зловеще, хорошая новость заключается в том, что если вы используете веб-фреймворк для серверной части, то он почти наверняка обеспечит «по умолчанию» надежные и продуманные механизмы защиты от ряда наиболее распространенных атак. Другие атаки можно смягчить с помощью конфигурации вашего веб-сервера, например, включив HTTPS. Наконец, есть общедоступные инструменты для сканирования уязвимостей, которые могут помочь вам определить, если вы допустили какие-либо очевидные ошибки.
              
+
              Для эффективной безопасности веб-сайта необходимо уделять особое внимание к разработке всего веб-сайта: к вашему веб-приложению, конфигурации веб-сервера, при написании политик создания и обновления паролей, а так же кода на стороне клиента. Хотя все это звучит очень зловеще, хорошая новость заключается в том, что если вы используете веб-фреймворк для серверной части, то он почти наверняка обеспечит «по умолчанию» надёжные и продуманные механизмы защиты от ряда наиболее распространённых атак. Другие атаки можно смягчить с помощью конфигурации вашего веб-сервера, например, включив HTTPS. Наконец, есть общедоступные инструменты для сканирования уязвимостей, которые могут помочь вам определить, если вы допустили какие-либо очевидные ошибки.
              
 
-
              В оставшейся части этой статьи мы рассмотрим более подробную информацию о некоторых самых распространенных угрозах и о простых шагах, которые вы можете предпринять, чтобы защитить свой сайт.
              
+
              В оставшейся части этой статьи мы рассмотрим более подробную информацию о некоторых самых распространённых угрозах и о простых шагах, которые вы можете предпринять, чтобы защитить свой сайт.
              
 
 
              
 
              Примечание: Это вводная статья, призванная помочь вам задуматься о безопасности веб-сайта, но она не является исчерпывающей.
              
@@ -39,25 +39,25 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность
 
 
              Угрозы безопасности сайта
              
 
-
              В этом разделе перечислены лишь некоторые из наиболее распространенных угроз веб-сайта и способы их устранения. Читая, обратите внимание на то, насколько успешны угрозы, когда веб-приложение доверяет, либо недостаточно параноидально относится к данным, поступающим из браузера.
              
+
              В этом разделе перечислены лишь некоторые из наиболее распространённых угроз веб-сайта и способы их устранения. Читая, обратите внимание на то, насколько успешны угрозы, когда веб-приложение доверяет, либо недостаточно параноидально относится к данным, поступающим из браузера.
              
 
 
              Межсайтовый скриптинг (XSS)
              
 
-
              XSS (Cross-Site Scripting - Межсайтовый скриптинг) это термин, используемый для описания типа атак, которые позволяют злоумышленнику внедрять вредоносный код через веб-сайт в браузеры других пользователей. Поскольку внедренный код поступает в браузер с сайта, он является доверенным и может выполнять такие действия, как отправка авторизационного файла cookieпользователя злоумышленнику. Когда у злоумышленника есть файл cookie, он может войти на сайт, как если бы он был пользователем, и сделать все, что может пользователь, например, получить доступ к данным кредитной карты, просмотреть контактные данные или изменить пароли.
              
+
              XSS (Cross-Site Scripting - Межсайтовый скриптинг) это термин, используемый для описания типа атак, которые позволяют злоумышленнику внедрять вредоносный код через веб-сайт в браузеры других пользователей. Поскольку внедрённый код поступает в браузер с сайта, он является доверенным и может выполнять такие действия, как отправка авторизационного файла cookieпользователя злоумышленнику. Когда у злоумышленника есть файл cookie, он может войти на сайт, как если бы он был пользователем, и сделать все, что может пользователь, например, получить доступ к данным кредитной карты, просмотреть контактные данные или изменить пароли.
              
 
 
              
 
              Примечание: Уязвимости XSS исторически встречались чаще, чем любые другие виды угроз безопасности.
              
 
              
 
-
              Уязвимости XSS делятся на отраженные и хранимые, в зависимости от того, как сайт возвращает внедренный код в браузер.
              
+
              Уязвимости 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, может хранить вредоносный скрипт от злоумышленника. Когда комментарии отображаются, скрипт выполняется и может отправить злоумышленнику информацию, необходимую для доступа к учетной записи пользователя. Атака такого рода чрезвычайно популярна и мощна, потому что злоумышленник может даже не иметь прямого отношения к жертвам.
                
+   Например, доска обсуждений, которая принимает комментарии, содержащие неизмененный HTML, может хранить вредоносный скрипт от злоумышленника. Когда комментарии отображаются, скрипт выполняется и может отправить злоумышленнику информацию, необходимую для доступа к учётной записи пользователя. Атака такого рода чрезвычайно популярна и мощна, потому что злоумышленник может даже не иметь прямого отношения к жертвам.
                
    
                
-   Хотя данные из запросов POST или GET являются наиболее распространенным источником уязвимостей XSS, любые данные из браузера потенциально уязвимы, такие как данные cookie, отображаемые браузером, или пользовательские файлы, которые загружаются и отображаются.
                
+   Хотя данные из запросов POST или GET являются наиболее распространённым источником уязвимостей XSS, любые данные из браузера потенциально уязвимы, такие как данные cookie, отображаемые браузером, или пользовательские файлы, которые загружаются и отображаются.
                
    
                
    Наилучшей защитой от уязвимостей XSS является удаление или отключение любой разметки, которая потенциально может содержать инструкции по запуску кода. Для HTML это включает такие элементы, как <script>, <object>, <embed> и <link>.
                
    
                
@@ -71,7 +71,7 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность
  
                
  Типы внедрения SQL включают внедрение SQL на основе ошибок, внедрение SQL на основе логических ошибок и внедрение SQL на основе времени.
                
  
                
- Эта уязвимость присутствует, если пользовательский ввод, который передается в базовый оператор SQL, может изменить смысл оператора. Например, следующий код предназначен для перечисления всех пользователей с определенным именем (userName), которое было предоставлено из формы HTML:
                
+ Эта уязвимость присутствует, если пользовательский ввод, который передаётся в базовый оператор SQL, может изменить смысл оператора. Например, следующий код предназначен для перечисления всех пользователей с определённым именем (userName), которое было предоставлено из формы HTML:
                
 
 
                statement = "SELECT * FROM users WHERE name = '" + userName + "';"
                
 
@@ -80,7 +80,7 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность
 
                SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
 
                
 
-
                Модифицированный оператор создает действительный оператор SQL, который удаляет таблицу пользователей и выбирает все данные из таблицы userinfo (которая раскрывает информацию о каждом пользователе). Это работает, потому что первая часть введенного текста (a ';) завершает исходное утверждение.
                
+
                Модифицированный оператор создаёт действительный оператор SQL, который удаляет таблицу пользователей и выбирает все данные из таблицы userinfo (которая раскрывает информацию о каждом пользователе). Это работает, потому что первая часть введённого текста (a ';) завершает исходное утверждение.
                
  
                
  Чтобы избежать такого рода атак, вы должны убедиться, что любые пользовательские данные, которые передаются в запрос SQL, не могут изменить природу запроса. Один из способов сделать это - экранировать все символы пользовательского ввода, которые имеют особое значение в SQL.
                
 
@@ -102,16 +102,16 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность
 
 
                Подделка межсайтовых запросов (CSRF)
                
 
-
                CSRF-атаки позволяют злоумышленнику выполнять действия, используя учетные данные другого пользователя, без его ведома или согласия.
                
+
                CSRF-атаки позволяют злоумышленнику выполнять действия, используя учётные данные другого пользователя, без его ведома или согласия.
                
 
-
                Этот тип атаки лучше всего пояснить на примере. Джон - злоумышленник, который знает, что определенный сайт позволяет пользователям, вошедшим в систему, отправлять деньги на указанную учетную запись, используя HTTP-запрос POST, который включает имя учетной записи и сумму денег. Джон создает форму, которая включает в себя его банковские реквизиты и сумму денег в виде скрытых полей, и отправляет ее по электронной почте другим пользователям сайта (с кнопкой «Отправить», замаскированной под ссылку на сайт «быстрого обогащения»).
                
+
                Этот тип атаки лучше всего пояснить на примере. Джон - злоумышленник, который знает, что определённый сайт позволяет пользователям, вошедшим в систему, отправлять деньги на указанную учётную запись, используя HTTP-запрос POST, который включает имя учётной записи и сумму денег. Джон создаёт форму, которая включает в себя его банковские реквизиты и сумму денег в виде скрытых полей, и отправляет её по электронной почте другим пользователям сайта (с кнопкой «Отправить», замаскированной под ссылку на сайт «быстрого обогащения»).
                
 
-
                Если пользователь нажимает кнопку отправки, на сервер будет отправлен HTTP-запрос POST, содержащий сведения о транзакции и любые файлы cookie на стороне клиента, которые браузер связал с сайтом (добавление связанных файлов cookie сайта в запросы является нормальным поведением браузера). Сервер проверит файлы cookie и использует их, чтобы определить, вошел ли пользователь в систему и имеет ли разрешение на совершение транзакции.
                
+
                Если пользователь нажимает кнопку отправки, на сервер будет отправлен HTTP-запрос POST, содержащий сведения о транзакции и любые файлы cookie на стороне клиента, которые браузер связал с сайтом (добавление связанных файлов cookie сайта в запросы является нормальным поведением браузера). Сервер проверит файлы cookie и использует их, чтобы определить, вошёл ли пользователь в систему и имеет ли разрешение на совершение транзакции.
                
 
 
                В результате любой пользователь, который нажимает кнопку Отправить во время входа на торговый сайт, совершает транзакцию. Джон становится богатым.
                
 
 
                
-
                Примечание: Уловка здесь в том, что Джону не нужен доступ к файлам cookie пользователя (или учетным данным). Браузер пользователя сохраняет эту информацию и автоматически включает ее во все запросы к соответствующему серверу.
                
+
                Примечание: Уловка здесь в том, что Джону не нужен доступ к файлам cookie пользователя (или учётным данным). Браузер пользователя сохраняет эту информацию и автоматически включает её во все запросы к соответствующему серверу.
                
 
                
 
 
                Один из способов предотвратить этот тип атаки - запросить сервером запросы POST, содержащие секрет, созданный пользователем для конкретного сайта. Секрет будет предоставлен сервером при отправке веб-формы, используемой для переводов. Такой подход не позволяет Джону создать свою собственную форму, потому что он должен знать секрет, который сервер предоставляет пользователю. Даже если он узнает секрет и создаст форму для конкретного пользователя, он больше не сможет использовать ту же форму для атаки на каждого пользователя.
                
@@ -120,11 +120,11 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность
 
 
                Прочие угрозы
                
 
-
                Другие распространенные атаки / уязвимости включают:
                
+
                Другие распространённые атаки / уязвимости включают:
                
 
 
                  
- 
                • Clickjacking. В этой атаке злоумышленник перехватывает клики, предназначенные для видимого сайта верхнего уровня, и направляет их на скрытую ниже страницу. Этот метод можно использовать, например, для отображения законного сайта банка, но захвата учетных данных для входа в невидимый {{htmlelement("iframe")}} , контролируемый злоумышленником. Clickjacking также можно использовать для того, чтобы заставить пользователя нажать кнопку на видимом сайте, но при этом на самом деле невольно нажимать совершенно другую кнопку. В качестве защиты ваш сайт может предотвратить встраивание себя в iframe на другом сайте, установив соответствующие заголовки HTTP.
                  • 
- 
                • Denial of Service (DoS). DoS обычно достигается за счет наводнения целевого сайта поддельными запросами, так что доступ к сайту нарушается для законных пользователей. Запросы могут быть просто многочисленными или по отдельности потреблять большие объемы ресурсов (например, медленное чтение или загрузка больших файлов). Защита от DoS обычно работает, выявляя и блокируя «плохой» трафик, пропуская при этом легитимные сообщения. Эти средства защиты обычно расположены перед веб-сервером или на нем (они не являются частью самого веб-приложения).
                  • 
+ 
                • Clickjacking. В этой атаке злоумышленник перехватывает клики, предназначенные для видимого сайта верхнего уровня, и направляет их на скрытую ниже страницу. Этот метод можно использовать, например, для отображения законного сайта банка, но захвата учётных данных для входа в невидимый {{htmlelement("iframe")}} , контролируемый злоумышленником. Clickjacking также можно использовать для того, чтобы заставить пользователя нажать кнопку на видимом сайте, но при этом на самом деле невольно нажимать совершенно другую кнопку. В качестве защиты ваш сайт может предотвратить встраивание себя в iframe на другом сайте, установив соответствующие заголовки HTTP.
                  • 
+ 
                • Denial of Service (DoS). DoS обычно достигается за счёт наводнения целевого сайта поддельными запросами, так что доступ к сайту нарушается для законных пользователей. Запросы могут быть просто многочисленными или по отдельности потреблять большие объёмы ресурсов (например, медленное чтение или загрузка больших файлов). Защита от DoS обычно работает, выявляя и блокируя «плохой» трафик, пропуская при этом легитимные сообщения. Эти средства защиты обычно расположены перед веб-сервером или на нем (они не являются частью самого веб-приложения).
                  • 
  
                • Directory Traversal (Файл и раскрытие). В этой атаке злоумышленник пытается получить доступ к частям файловой системы веб-сервера, к которым у него не должно быть доступа. Эта уязвимость возникает, когда пользователь может передавать имена файлов, содержащие символы навигации файловой системы (например, ../../). Решение состоит в том, чтобы очищать ввод перед его использованием.
                  • 
  
                • File Inclusion. В этой атаке пользователь может "случайно" указать файл для отображения или выполнения в данных, передаваемых на сервер. После загрузки этот файл может выполняться на веб-сервере или на стороне клиента (что приводит к XSS-атаке). Решение состоит в том, чтобы дезинфицировать ввод перед его использованием.
                  • 
  
                • Внедрение команд. Атаки с внедрением команд позволяют злоумышленнику выполнять произвольные системные команды в операционной системе хоста. Решение состоит в том, чтобы дезинфицировать вводимые пользователем данные до того, как их можно будет использовать в системных вызовах.
                  • 
@@ -143,20 +143,20 @@ original_slug: Learn/Server-side/First_steps/Веб_Безопасность
 
                  Вы можете предпринять ряд других конкретных шагов:
                  
 
 
                    
- 
                  • Используйте более эффективное управление паролями. Поощряйте регулярную смену надежных паролей. Рассмотрите возможность двухфакторной аутентификации для вашего сайта, чтобы в дополнение к паролю пользователь должен был ввести другой код аутентификации (обычно тот, который доставляется через какое-то физическое оборудование, которое будет иметь только пользователь, например, код в SMS, отправленном на его телефон).
                    • 
- 
                  • Настройте свой веб-сервер для использования HTTPS и HTTP Strict Transport Security (HSTS). HTTPS шифрует данные, передаваемые между вашим клиентом и сервером. Это гарантирует, что учетные данные для входа, файлы cookie, данные запросов POST и информация заголовка не будут легко доступны для злоумышленников.
                    • 
- 
                  • Следите за наиболее популярными угрозами (текущий список OWASP находится здесь) и в первую очередь устраняйте наиболее распространенные уязвимости.
                    • 
+ 
                  • Используйте более эффективное управление паролями. Поощряйте регулярную смену надёжных паролей. Рассмотрите возможность двухфакторной аутентификации для вашего сайта, чтобы в дополнение к паролю пользователь должен был ввести другой код аутентификации (обычно тот, который доставляется через какое-то физическое оборудование, которое будет иметь только пользователь, например, код в SMS, отправленном на его телефон).
                    • 
+ 
                  • Настройте свой веб-сервер для использования HTTPS и HTTP Strict Transport Security (HSTS). HTTPS шифрует данные, передаваемые между вашим клиентом и сервером. Это гарантирует, что учётные данные для входа, файлы cookie, данные запросов POST и информация заголовка не будут легко доступны для злоумышленников.
                    • 
+ 
                  • Следите за наиболее популярными угрозами (текущий список OWASP находится здесь) и в первую очередь устраняйте наиболее распространённые уязвимости.
                    • 
  
                  • Используйте инструменты сканирования уязвимостей, чтобы выполнить автоматическое тестирование безопасности на вашем сайте. Позже ваш очень успешный веб-сайт может также обнаруживать ошибки, предлагая вознаграждение за обнаружение ошибок, как это делает здесь Mozilla.
                    • 
- 
                  • Храните и отображайте только те данные, которые вам нужны. Например, если ваши пользователи должны хранить конфиденциальную информацию, такую как данные кредитной карты, отображайте часть номера карты только для того, чтобы он мог быть идентифицирован пользователем, и недостаточно, чтобы его мог скопировать злоумышленник и использовать на другом сайте. Самый распространенный шаблон в настоящее время - отображение только последних 4 цифр номера кредитной карты.
                    • 
+ 
                  • Храните и отображайте только те данные, которые вам нужны. Например, если ваши пользователи должны хранить конфиденциальную информацию, такую как данные кредитной карты, отображайте часть номера карты только для того, чтобы он мог быть идентифицирован пользователем, и недостаточно, чтобы его мог скопировать злоумышленник и использовать на другом сайте. Самый распространённый шаблон в настоящее время - отображение только последних 4 цифр номера кредитной карты.
                    • 
 
                  
 
-
                  Веб-фреймворки могут помочь смягчить многие из наиболее распространенных уязвимостей.
                  
+
                  Веб-фреймворки могут помочь смягчить многие из наиболее распространённых уязвимостей.
                  
 
 
                  Резюме
                  
 
-
                  В этой статье объясняется концепция веб-безопасности и некоторые из наиболее распространенных угроз, от которых ваш веб-сайт должен пытаться защититься. Самое главное, вы должны понимать, что веб-приложение не может доверять никаким данным из веб-браузера. Все пользовательские данные должны быть очищены перед отображением или использованием в SQL-запросах и вызовах файловой системы.
                  
+
                  В этой статье объясняется концепция веб-безопасности и некоторые из наиболее распространённых угроз, от которых ваш веб-сайт должен пытаться защититься. Самое главное, вы должны понимать, что веб-приложение не может доверять никаким данным из веб-браузера. Все пользовательские данные должны быть очищены перед отображением или использованием в SQL-запросах и вызовах файловой системы.
                  
 
-
                  Этой статьей вы подошли к концу этого модуля, охватывающего ваши первые шаги в программировании на стороне сервера. Мы надеемся, что вам понравилось изучать эти фундаментальные концепции, и теперь вы готовы выбрать веб-платформу и начать программировать.
                  
+
                  Этой статьёй вы подошли к концу этого модуля, охватывающего ваши первые шаги в программировании на стороне сервера. Мы надеемся, что вам понравилось изучать эти фундаментальные концепции, и теперь вы готовы выбрать веб-платформу и начать программировать.
                  
 
 
                  {{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
                  
 
diff --git a/files/ru/learn/server-side/index.html b/files/ru/learn/server-side/index.html
index 66645f65dd..ee1cb35976 100644
--- a/files/ru/learn/server-side/index.html
+++ b/files/ru/learn/server-side/index.html
@@ -26,7 +26,7 @@ translation_of: Learn/Server-side
 
 
                  Начинать с серверного программирования обычно легче, чем с разработки на стороне клиента, поскольку динамические веб-сайты склонны производить множество однообразных операций (извлекать данные из базы данных и помещать их на странице, подтверждать пользовательский ввод и сохранять его в базе данных, проверять пользовательские права и выполнение входа, и.т.д.) и сконструированы с использованием веб-фреймворков, которые выполняют эти и другие привычные веб-серверу операции с легкостью.
                  
 
-
                  Общее понимание концепций программирования (или определенного программного языка) будет полезным, но не обязательным. Сходным образом, опыт программирования на клиентской стороне не требуется, но базовое знание поможет вам успешнее взаимодействовать с разработчиками клиентской стороны веб-приложения - "фронтенда".
                  
+
                  Общее понимание концепций программирования (или определённого программного языка) будет полезным, но не обязательным. Сходным образом, опыт программирования на клиентской стороне не требуется, но базовое знание поможет вам успешнее взаимодействовать с разработчиками клиентской стороны веб-приложения - "фронтенда".
                  
 
 
                  Вам потребуется понимать "как работает веб". Мы рекомендуем вам сначала ознакомиться с темами:
                  
 
@@ -44,11 +44,11 @@ translation_of: Learn/Server-side
 
 
                  
  
                  Первые шаги в программировании веб-сайтов на стороне сервера
                  
- 
                  Этот модуль посвящен информации о технологиях программирования веб-сайтов на стороне сервера, попутно отвечая и на фундаментальные вопросы о серверном программировании — "что это такое", "чем оно отличается от программирования на стороне клиента", и "почему оно так востребовано" — и обозревая некоторые из наиболее популярных серверных веб-фреймворков, а также объясняя как выбрать подходящий для вашего сайта. Напоследок мы организуем вводный раздел о безопасности веб-сервера.
                  
+ 
                  Этот модуль посвящён информации о технологиях программирования веб-сайтов на стороне сервера, попутно отвечая и на фундаментальные вопросы о серверном программировании — "что это такое", "чем оно отличается от программирования на стороне клиента", и "почему оно так востребовано" — и обозревая некоторые из наиболее популярных серверных веб-фреймворков, а также объясняя как выбрать подходящий для вашего сайта. Напоследок мы организуем вводный раздел о безопасности веб-сервера.
                  
  
                  Веб-фреймворк Django (Python)
                  
  
                  Django является чрезвычайно популярным и полнофункциональным серверным веб-фреймворком, написанным на Python. Этот модуль объяснит почему Django настолько хороший серверный веб-фреймворк, как установить среду разработки и как с его помощью можно выполнять привычные задачи.
                  
  
                  Веб-фреймворк Express (Node.js/JavaScript)
                  
- 
                  Express - популярный веб-фреймворк, написанный на JavaScript и размещенный в среде окружения node.js. Модуль объясняет некоторые из ключевых преимуществ этой структуры, как настроить среду разработки и как выполнять общие задачи для веб-разработки и развертывания.
                  
+ 
                  Express - популярный веб-фреймворк, написанный на JavaScript и размещённый в среде окружения node.js. Модуль объясняет некоторые из ключевых преимуществ этой структуры, как настроить среду разработки и как выполнять общие задачи для веб-разработки и развертывания.
                  
  
                  Сервер на Node без фреймворков
                  
  
                  В этой статье представлен простой статический файловый сервер, построенный с использованием чистого Node.js, для тех из вас, кто не хочет использовать фреймворк.
                  
 
                  
diff --git a/files/ru/learn/server-side/node_server_without_framework/index.html b/files/ru/learn/server-side/node_server_without_framework/index.html
index 087627c20a..0a1a548668 100644
--- a/files/ru/learn/server-side/node_server_without_framework/index.html
+++ b/files/ru/learn/server-side/node_server_without_framework/index.html
@@ -5,7 +5,7 @@ translation_of: Learn/Server-side/Node_server_without_framework
 ---
 
                  {{LearnSidebar}}
                  
 
-
                  Здесь вы найдете описание простого статического сервера, который построен сугубо на Node.js без использования какого-либо фреймворка .
                  
+
                  Здесь вы найдёте описание простого статического сервера, который построен сугубо на Node.js без использования какого-либо фреймворка .
                  
 
 
                  Node.js может использовать множество фреймворков, которые могут помочь создать сервер
                  
 
@@ -81,4 +81,4 @@ console.log('Server running at http://127.0.0.1:8125/');

          Задание

          -

          Попробуйте добавить в этот код описание как работает этот код. Как вариант еще можно добавить функционал динамических запросов.

          +

          Попробуйте добавить в этот код описание как работает этот код. Как вариант ещё можно добавить функционал динамических запросов.

          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 418ad7f318..a5e7d74707 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 @@ -37,7 +37,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв

          Для создания веб-приложений разработчики используют React в тандеме с ReactDOM. React and ReactDOM часто обсуждаются в том же пространстве и используются для решения тех же проблем, что и другие настоящие фреймворки для веб-разработки. Когда мы ссылаемся на React как на «фреймворк», мы подразумеваем это разговорное понимание.

          -

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

          +

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

          Когда использовать

          @@ -45,7 +45,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв

          Хотя React можно использовать для небольших частей интерфейса, «зайти» в него не так просто, как, к примеру, в jQuery, или даже во Vue. Куда легче это сделать создав всё приложения с помощью React.

          -

          Кроме того, такие преимущества React-приложения, как написание интерфейсов с помощью JSX, требуют процесса компиляции. Добавление на сайт компилятора Babel приводит к более медленному выполнению кода, поэтому такие инструменты обычно настраиваются для процесса сборки. Да, возможно, у React есть серьезные требования к инструментарию, но этому можно освоить.

          +

          Кроме того, такие преимущества React-приложения, как написание интерфейсов с помощью JSX, требуют процесса компиляции. Добавление на сайт компилятора Babel приводит к более медленному выполнению кода, поэтому такие инструменты обычно настраиваются для процесса сборки. Да, возможно, у React есть серьёзные требования к инструментарию, но этому можно освоить.

          В этой статье основное внимание будет уделено использованию React для создания всего пользовательского интерфейса с помощью create-react-app, предоставляемого Facebook.

          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 5f3233d635..e96fcf7bf7 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 @@ -7,7 +7,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
          {{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Accessibility","Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}}
          -

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

          +

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

          @@ -24,9 +24,9 @@ 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) {
@@ -48,7 +48,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
 
 
          Вы можете написать тесты для функций CSS, протестировав существование element.style.property (например, paragraph.style.transform) в JavaScript.
          
 
-
          Классическим примером может быть проверка поддержки Flexbox в браузере; для браузеров, которые поддерживают новейшие спецификации Flexbox, мы могли бы использовать гибкую и надежную гибкую компоновку. Для браузеров, которые этого не делают, мы могли бы использовать плавающий макет, который работает нормально, хотя он немного более хрупкий и хакерский, и не такой привлекательный.
          
+
          Классическим примером может быть проверка поддержки Flexbox в браузере; для браузеров, которые поддерживают новейшие спецификации Flexbox, мы могли бы использовать гибкую и надёжную гибкую компоновку. Для браузеров, которые этого не делают, мы могли бы использовать плавающий макет, который работает нормально, хотя он немного более хрупкий и хакерский, и не такой привлекательный.
          
 
 
          Давайте реализуем что-то, что демонстрирует это, хотя мы пока оставим это простым.
          
 
@@ -71,13 +71,13 @@ if (testElem.style.flex !== undefined && testElem.style.flexFlow !== und
  
 
 
-
          Здесь мы берем ссылку на второй элемент <link> и создаем элемент <div> как часть нашего теста.  В нашем условном выражении мы проверяем, что свойства {{cssxref ("flex")}} и {{cssxref ("flex-flow")}} существуют в браузере. Обратите внимание, что представления JavaScript этих свойств, которые хранятся внутри объекта {{domxref ("HTMLElement.style")}}, используют нижний горбатый регистр, а не дефисы, для разделения слов.
          
+
          Здесь мы берём ссылку на второй элемент <link> и создаём элемент <div> как часть нашего теста.  В нашем условном выражении мы проверяем, что свойства {{cssxref ("flex")}} и {{cssxref ("flex-flow")}} существуют в браузере. Обратите внимание, что представления JavaScript этих свойств, которые хранятся внутри объекта {{domxref ("HTMLElement.style")}}, используют нижний горбатый регистр, а не дефисы, для разделения слов.
          
 
 
          
 
          Примечание: Если у вас возникли проблемы с выполнением этого, вы можете сравнить его с нашим кодом css-feature-detect-finished.html (см. Также живую версию).
          
 
          
 
-
          Когда вы сохраните все и опробуете свой пример, вы должны увидеть макет flexbox, примененный к странице, если браузер поддерживает современный flexbox, и макет float, если нет.
          
+
          Когда вы сохраните все и опробуете свой пример, вы должны увидеть макет flexbox, применённый к странице, если браузер поддерживает современный flexbox, и макет float, если нет.
          
 
 
          
 
          Примечание: Часто такой подход является излишним из-за незначительной проблемы с обнаружением функций - вы часто можете обойтись без использования префиксов нескольких поставщиков и свойств резервирования, как описано в разделе Поведение CSS-откат и Обработка префиксов CSS.
          
@@ -134,7 +134,7 @@ if (testElem.style.flex !== undefined && testElem.style.flexFlow !== und
          - + @@ -155,14 +155,14 @@ if (testElem.style.flex !== undefined && testElem.style.flexFlow !== und - +
          Если член в объектеПроверьте, существует ли определенный метод или свойство (обычно точка входа в использование API или другой функции, которую вы обнаруживаете) в его родительском объекте.Проверьте, существует ли определённый метод или свойство (обычно точка входа в использование API или другой функции, которую вы обнаруживаете) в его родительском объекте.

          if("geolocation" in navigator) { ... }

          Свойство на сохраняемое значение элементаСоздайте элемент в памяти, используя {{domxref ("Document.createElement()")}}, установите для свойства определенное значение, затем проверьте, сохраняется ли значение.Создайте элемент в памяти, используя {{domxref ("Document.createElement()")}}, установите для свойства определённое значение, затем проверьте, сохраняется ли значение. См. Dive into HTML5 <input> types detection.
          -

          Примечание: Двойное NOT в приведенном выше примере (!!) это способ заставить возвращаемое значение стать «правильным» логическим значением, а не {{glossary("Truthy")}}/{{glossary("Falsy")}} значение, которое может исказить результаты.

          +

          Примечание: Двойное NOT в приведённом выше примере (!!) это способ заставить возвращаемое значение стать «правильным» логическим значением, а не {{glossary("Truthy")}}/{{glossary("Falsy")}} значение, которое может исказить результаты.

          Страница Погружение в HTML5 Обнаружение функций HTML5 содержит гораздо больше полезных тестов для обнаружения функций, помимо перечисленных выше, и вы можете найти тест обнаружения функций для большинства вещей, выполнив поиск «обнаружение поддержки для ВАШИ-ФУНКЦИИ-ЗДЕСЬ» в своей любимой поисковой системе. Имейте в виду, однако, что некоторые функции, как известно, не обнаруживаются - см. список Modernizr Необнаруживаемые.

          @@ -175,7 +175,7 @@ if (testElem.style.flex !== undefined && testElem.style.flexFlow !== und // run JavaScript in here. } -

          В качестве примера, наша демо версия Snapshot использует ее для выборочного применения библиотеки Brick JavaScript и ее использования для обработки макета пользовательского интерфейса, но только для небольшого экрана (шириной 480 пикселей или меньше). Сначала мы используем атрибут media,чтобы применить CSS-код Brick к странице, только если ширина страницы составляет 480px или меньше:

          +

          В качестве примера, наша демо версия Snapshot использует её для выборочного применения библиотеки Brick JavaScript и её использования для обработки макета пользовательского интерфейса, но только для небольшого экрана (шириной 480 пикселей или меньше). Сначала мы используем атрибут media,чтобы применить CSS-код Brick к странице, только если ширина страницы составляет 480px или меньше:

          <link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 480px)">
          @@ -199,7 +199,7 @@ if (testElem.style.flex !== undefined && testElem.style.flexFlow !== und

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

          -

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

          +

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

          CSS

          @@ -207,10 +207,10 @@ if (testElem.style.flex !== undefined && testElem.style.flexFlow !== und
          1. Во-первых, создайте копию supports-feature-detect.html и supports-styling.css. Сохраните их как modernizr-css.html и modernizr-css.css.
            2. -
          2. Обновите ваш элемент {{htmlelement ("link")}} в своем HTML-коде, чтобы он указывал на правильный файл CSS (также следует обновить элемент {{htmlelement ("title")}} на что-то более подходящее!): +
          3. Обновите ваш элемент {{htmlelement ("link")}} в своём HTML-коде, чтобы он указывал на правильный файл CSS (также следует обновить элемент {{htmlelement ("title")}} на что-то более подходящее!): 
            <link href="modernizr-css.css" rel="stylesheet">
            4. -
          4. Над этим элементом <link> добавьте элемент {{htmlelement ("script")}}, чтобы применить библиотеку Modernizr к странице, как показано ниже. Это должно быть применено к странице перед любым CSS (или JavaScript), который может ее использовать. +
          5. Над этим элементом <link> добавьте элемент {{htmlelement ("script")}}, чтобы применить библиотеку Modernizr к странице, как показано ниже. Это должно быть применено к странице перед любым CSS (или JavaScript), который может её использовать. 
            <script src="modernizr-custom.js"></script>
          6. Теперь отредактируйте открывающий тег <html>, чтобы он выглядел так: @@ -268,7 +268,7 @@ blob-constructor cookies cors ...AND LOADS MORE VALUES!> clear: left; } -

            Так как же это работает? Поскольку все эти имена классов были помещены в элемент <html> вы можете настроить таргетинг на браузеры, которые поддерживают или не поддерживают функцию, используя определенные селекторы-потомки. Поэтому здесь мы применяем верхний набор правил только для браузеров, которые поддерживают flexbox, а нижний набор правил - только для браузеров, которые не поддерживают (no-flexbox).

            +

            Так как же это работает? Поскольку все эти имена классов были помещены в элемент <html> вы можете настроить таргетинг на браузеры, которые поддерживают или не поддерживают функцию, используя определённые селекторы-потомки. Поэтому здесь мы применяем верхний набор правил только для браузеров, которые поддерживают flexbox, а нижний набор правил - только для браузеров, которые не поддерживают (no-flexbox).

            Примечание: Имейте в виду, что все тесты функций HTML и JavaScript Modernizr также представлены в этих именах классов, так что вы можете свободно применять CSS выборочно в зависимости от того, поддерживает ли браузер функции HTML или JavaScript, если это необходимо.

            @@ -280,24 +280,24 @@ blob-constructor cookies cors ...AND LOADS MORE VALUES!>

            JavaScript

            -

            Modernizr также одинаково хорошо подготовлен для реализации функций обнаружения JavaScript. Это достигается за счет того, что глобальный объект Modernizr становится доступным для страницы, к которой он применяется, и содержит результаты функции, определяемой как свойства true/false.

            +

            Modernizr также одинаково хорошо подготовлен для реализации функций обнаружения JavaScript. Это достигается за счёт того, что глобальный объект Modernizr становится доступным для страницы, к которой он применяется, и содержит результаты функции, определяемой как свойства true/false.

            -

            Например, загрузите наш пример modernizr-css.html в своем браузере, затем попробуйте перейти на консоль JavaScript и набрать  Modernizr., а после некоторые из этих имен классов (они тоже здесь одинаковы). Например:

            +

            Например, загрузите наш пример modernizr-css.html в своём браузере, затем попробуйте перейти на консоль JavaScript и набрать  Modernizr., а после некоторые из этих имён классов (они тоже здесь одинаковы). Например:

            Modernizr.flexbox
 Modernizr.websqldatabase
 Modernizr.xhr2
 Modernizr.fetch
            -

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

            +

            Консоль вернёт значения true/false, чтобы указать, поддерживает ли ваш браузер эти функции или нет.

            Давайте посмотрим на пример, чтобы показать, как вы бы пользовали эти свойства.

            1. Прежде всего, сделайте локальную копию файла примера modernizr-js.html.
            2. Присоедините библиотеку Modernizr к HTML, используя элемент <script> , как мы делали в предыдущих демонстрациях. Поместите его над существующим элементом <script> который прикрепляет API Google Maps к странице.
              3. -
            3. Затем заполните текст-заполнитель YOUR-API-KEY во втором элементе <script> (как он есть сейчас) действительным ключом API Google Maps. Чтобы получить ключ, войдите в учетную запись Google, перейдите на страницу Получить ключ / Аутентификация затем нажмите синюю кнопку Get a Key и следуйте инструкциям.
              4. -
            4. Наконец, добавьте еще один элемент <script> внизу тела HTML (непосредственно перед тегом </body> ) и поместите следующий скрипт в теги: +
            5. Затем заполните текст-заполнитель YOUR-API-KEY во втором элементе <script> (как он есть сейчас) действительным ключом API Google Maps. Чтобы получить ключ, войдите в учётную запись Google, перейдите на страницу Получить ключ / Аутентификация затем нажмите синюю кнопку Get a Key и следуйте инструкциям.
              6. +
            6. Наконец, добавьте ещё один элемент <script> внизу тела HTML (непосредственно перед тегом </body> ) и поместите следующий скрипт в теги: 
              if (Modernizr.geolocation) {
 
   navigator.geolocation.getCurrentPosition(function(position) {
@@ -324,9 +324,9 @@ Modernizr.fetch

              Подведение итогов

              -

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

              +

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

              -

              Далее мы начнем изучать автоматизированное тестирование.

              +

              Далее мы начнём изучать автоматизированное тестирование.

              {{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Accessibility","Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}}

              @@ -335,9 +335,9 @@ Modernizr.fetch
              • Введение в кросс-браузерное тестирование
              • Стратегии проведения тестирования
                • -
              • Решение распространенных проблем HTML и CSS
                • -
              • Решение распространенных проблем JavaScript
                • -
              • Решение распространенных проблем доступности
                • +
              • Решение распространённых проблем HTML и CSS
                • +
              • Решение распространённых проблем JavaScript
                • +
              • Решение распространённых проблем доступности
              • Реализация функции обнаружения
              • Введение в автоматизированное тестирование
              • Настройка собственной среды автоматизации тестирования
                • diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html index 64ff9cafcc..7d16d4c70f 100644 --- a/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html +++ b/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html @@ -17,7 +17,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS Цель: - Иметь возможность находить распространенные кросс-браузерные проблемы HTML и CSS, использовать нужные инструменты и методы для их устранения + Иметь возможность находить распространённые кросс-браузерные проблемы HTML и CSS, использовать нужные инструменты и методы для их устранения diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/index.html index bdb268acb6..e5a66a7963 100644 --- a/files/ru/learn/tools_and_testing/cross_browser_testing/index.html +++ b/files/ru/learn/tools_and_testing/cross_browser_testing/index.html @@ -5,7 +5,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing ---
                {{LearnSidebar}}
                -

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

                +

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

                Предпосылки

                @@ -15,20 +15,20 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing
                Введение в кросс-браузерное тестирование
                -
                Этот модуль начинается с обзора темы кросс-браузерного тестирования и отвечает на такие вопросы, как «что такое кросс-браузерное тестирование?», «с какими наиболее распространенными типами проблем вы столкнетесь?» и «каковы основные подходы к тестированию, выявлению и устранению проблем?"
                +
                Этот модуль начинается с обзора темы кросс-браузерного тестирования и отвечает на такие вопросы, как «что такое кросс-браузерное тестирование?», «с какими наиболее распространёнными типами проблем вы столкнётесь?» и «каковы основные подходы к тестированию, выявлению и устранению проблем?"
                Стратегии проведения тестирования
                Затем мы углубимся в тестирование, рассматривая целевую аудиторию (например какие браузеры, устройства и другие сегменты должны проверяться), стратегии тестирования низкого уровня (получить себе множество устройств и некоторых виртуальных машин и делать специальные тесты, когда это необходимо), стратегии более высоких технологий (автоматизация, использование специальных тестовых приложений) и тестирование с помощью групп пользователей.
                Рассмотрим общие проблемы HTML и CSS
                -
                С набором сценариев, мы теперь рассмотрим общие кроссбраузерные проблемы, которые вы найдете в коде HTML и CSS, и какие инструменты можно использовать для предотвращения возникновения проблем или устранения возникающих проблем. Это включает в себя листинг кода, передачу префиксов CSS, использование инструментов браузера dev tools для устранения проблем, использование полифилов для добавления поддержки в браузеры, решение проблем с отзывчивым дизайном и многое другое.
                +
                С набором сценариев, мы теперь рассмотрим общие кроссбраузерные проблемы, которые вы найдёте в коде HTML и CSS, и какие инструменты можно использовать для предотвращения возникновения проблем или устранения возникающих проблем. Это включает в себя листинг кода, передачу префиксов CSS, использование инструментов браузера dev tools для устранения проблем, использование полифилов для добавления поддержки в браузеры, решение проблем с отзывчивым дизайном и многое другое.
                Рассмотрим общие проблемы JavaScript
                Теперь мы рассмотрим общие проблемы JavaScript в браузере и как их исправить. Это включает в себя информацию об использовании инструментов браузера для отслеживания и устранения неполадок, используя полифилы и библиотеки для решения проблем, получения современных функций JavaScript, работающих в старых браузерах, и многое другое.
                Рассмотрим общие проблемы доступности
                -
                Затем мы обращаем наше внимание на доступность, предоставляя информацию о распространенных проблемах, как сделать простое тестирование, и как использовать инструменты аудита/автоматизации для поиска проблем доступности.
                +
                Затем мы обращаем наше внимание на доступность, предоставляя информацию о распространённых проблемах, как сделать простое тестирование, и как использовать инструменты аудита/автоматизации для поиска проблем доступности.
                Внедрение свойства обнаружения
                -
                Свойство выявления включает в себя разработку того, поддерживает ли браузер определенный блок кода, и работает ли другой код, зависящий от того, делает он (или нет), чтобы браузер всегда мог обеспечить рабочую силу, а также сбои / ошибки в некоторых браузерах. В этой статье описывается, как написать собственную простую функцию выявления, как использовать библиотеку для ускорения реализации и встроенные функции для обнаружения функций, такие как  @supports.
                +
                Свойство выявления включает в себя разработку того, поддерживает ли браузер определённый блок кода, и работает ли другой код, зависящий от того, делает он (или нет), чтобы браузер всегда мог обеспечить рабочую силу, а также сбои / ошибки в некоторых браузерах. В этой статье описывается, как написать собственную простую функцию выявления, как использовать библиотеку для ускорения реализации и встроенные функции для обнаружения функций, такие как  @supports.
                Введение в автоматизированное тестирование
                Введение в автоматизированное тестирование
                - Вручную запускать тесты на нескольких браузерах и устройствах, несколько раз в день, может стать утомительным и трудоемким. Чтобы эффективно справляться с этим, вы должны ознакомиться с инструментами автоматизации. В этой статье мы рассмотрим, что доступно, как использовать задачи, а также основы использования коммерческих приложений для автоматизации тестирования браузера, таких как Sauce Labs и Browser Stack.
                + Вручную запускать тесты на нескольких браузерах и устройствах, несколько раз в день, может стать утомительным и трудоёмким. Чтобы эффективно справляться с этим, вы должны ознакомиться с инструментами автоматизации. В этой статье мы рассмотрим, что доступно, как использовать задачи, а также основы использования коммерческих приложений для автоматизации тестирования браузера, таких как Sauce Labs и Browser Stack.
                Настройка собственной среды автоматизации тестирования
                В этой статье мы научим вас, как установить свою собственную среду автоматизации и запустить собственные тесты с помощью Selenium / WebDriver и библиотеки тестирования, такой как selenium-webdriver для Node. Мы также рассмотрим, как интегрировать локальную тестовую среду с коммерческими приложениями, такими как те, которые обсуждались в предыдущей статье.
                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 6057b46650..4f02764c4f 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 @@ -9,7 +9,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction
                {{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}
                -

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

                +

                Эта статья начинает модуль с обзора темы кросс-браузерного тестирования, отвечая на такие вопросы как "что такое кросс-браузерное тестирование?", "с какими распространёнными проблемами можно столкнуться?" и "какие основные подходы для тестирования, обнаружения и исправления проблем существуют?"

                @@ -26,11 +26,11 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction

                Что такое кросс-браузерное тестирование?

                -

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

                +

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

                • Других браузерах. Не тех нескольких, которые вы регулярно используете, а о довольно старых, которые некоторые люди могут использовать до сих пор, и которые не поддерживают современные возможности CSS и JavaScript.
                  • -
                • Разных устройствах с разными возможностями, начиная от последних лучших планшетов, смартфонов и "умных" телевизоров, до дешевых устройств и самых старых смартфонов, в которых браузеры могут работать с ограниченными возможностями.
                  • +
                • Разных устройствах с разными возможностями, начиная от последних лучших планшетов, смартфонов и "умных" телевизоров, до дешёвых устройств и самых старых смартфонов, в которых браузеры могут работать с ограниченными возможностями.
                • Людях с инвалидностью, которые используют Web с помощью вспомогательных технологий, таких как скринридеры, или не используют мышь (некоторые используют только клавиатуру).
                @@ -40,24 +40,24 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction

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

                -

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

                +

                Мы должны поговорить немного о терминологии. Для начала, когда мы говорим о сайтах, "работающих кросс-браузерной", на самом деле мы говорим о том, что они должны обеспечивать приемлемое удобство использования в разных браузерах. Это нормально, если сайт выглядит немного по-разному в разных браузерах, главное он должен обеспечивать полную функциональность.В современных браузерах вы можете сделать что-то анимированным или использовать 3D, тогда как в старых браузерах вы можете лишь показать плоскую картинку, предоставляющую ту же информацию. Если владелец сайта доволен, вы сделали своё дело.

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

                Когда мы говорим "приемлемое количество браузеров", мы не говорим, что это должно быть 100% всех браузеров в мире — это почти невозможно. Вы можете собрать информацию о том, какими браузеры и устройства используют ваши пользователи (это мы обсудим во второй статье — см. Gotta test 'em all?), но это ничего не гарантирует. Как веб-разработчик, вы должны определить для себя несколько браузеров и устройств, на которых код должен работать полностью, но кроме этого, вы должны писать код так, чтобы и другие браузеры были способны максимально использовать ваш сайт (defensive coding). Это одна из самых больших проблем веб-разработки.

                -

                Примечание: Мы разберем defensive coding позже в этом модуле.

                +

                Примечание: Мы разберём defensive coding позже в этом модуле.

                Почему возникают кросс-браузерные проблемы?

                -

                Есть множество причин, почему возникают кросс-браузерные проблемы, и, заметьте, что сейчас мы говорим о проблемах, при которых некоторые вещи ведут себя по-разному в разных браузерах / устройствах / настройках просмотра. Прежде чем вы столкнетесь с проблемами браузера, вы должны исправить все ошибки в коде (см. Отладка HTML, Отладка CSS, and Что пошло не так? Устранение ошибок JavaScript из предыдущего раздела).

                +

                Есть множество причин, почему возникают кросс-браузерные проблемы, и, заметьте, что сейчас мы говорим о проблемах, при которых некоторые вещи ведут себя по-разному в разных браузерах / устройствах / настройках просмотра. Прежде чем вы столкнётесь с проблемами браузера, вы должны исправить все ошибки в коде (см. Отладка HTML, Отладка CSS, and Что пошло не так? Устранение ошибок JavaScript из предыдущего раздела).

                Кросс-браузерные проблемы возникают потому-что:

                  -
                • иногда браузеры содержат баги, или реализуют возможности по-разному. В настоящее время это не такая частая проблема, но когда IE4 и Netscape 4 конкурировали за право быть доминирующим браузером в 90-е, компании-разработчики браузеров умышленно реализовывали возможности по-своему в попытке получить конкурентное преимущество, что делало жизнь веб-разработчикам адом. Сейчас же браузеры гораздо жестче соблюдают стандарты, но различия и баги все же иногда возникают.
                  • +
                • иногда браузеры содержат баги, или реализуют возможности по-разному. В настоящее время это не такая частая проблема, но когда IE4 и Netscape 4 конкурировали за право быть доминирующим браузером в 90-е, компании-разработчики браузеров умышленно реализовывали возможности по-своему в попытке получить конкурентное преимущество, что делало жизнь веб-разработчикам адом. Сейчас же браузеры гораздо жёстче соблюдают стандарты, но различия и баги все же иногда возникают.
                • браузеры имеют разную степень поддержи современных технологий. Это неизбежно, когда вы имеете дело с новейшими функциями, которые браузеры только начинают осваивать, или если вы вынуждены поддерживать очень старые браузеры, которые более не дорабатываются или которые могли быть заморожены (то есть в них не добавляют новый функционал) задолго до того, как придумали новые возможности. Например, если вы хотите использовать передовые возможности JavaScript на вашем сайте, то они могут не работать в старых браузерах. Если вам нужна поддержка старых браузеров, вы можете конвертировать ваш код под старый синтаксис, используя специальные компиляторы.
                • некоторые устройства могут иметь ограничения, из-за которых сайт работает медленно или отображается неверно. Например, если сайт был спроектирован для просмотра на десктопных устройствах, он возможно будет выглядеть мелко и трудночитаемо на мобильных устройствах. Если ваш сайт содержит множество больших анимаций, это может быть хорошо на высокопроизводительных планшетах, но может быть вялым или резким на устройствах меньшей производительности.
                @@ -76,7 +76,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction

                Начальное планирование > Разработка > Тестирование > Исправление ошибок

                -

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

                +

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

                Начальное планирование

                diff --git a/files/ru/learn/tools_and_testing/github/index.html b/files/ru/learn/tools_and_testing/github/index.html index 3f7b569a9f..9b3f639f8e 100644 --- a/files/ru/learn/tools_and_testing/github/index.html +++ b/files/ru/learn/tools_and_testing/github/index.html @@ -19,16 +19,16 @@ original_slug: Learn/Tools_and_testing/GitHub

                СКВ являются основой для разработки программного обеспечения:

                  -
                • Редко, когда вы работаете с проектом полностью самостоятельно. Как только вы начинаете работать с другими людьми, возникает риск конфликта. Речь идет о ситуации, когда несколько человек пытается в одно и то же время обновить одну и ту же часть кода. Нужен определенный механизм, позволяющий управлять событиями и тем самым избежать потери результатов общей работы.
                  • +
                • Редко, когда вы работаете с проектом полностью самостоятельно. Как только вы начинаете работать с другими людьми, возникает риск конфликта. Речь идёт о ситуации, когда несколько человек пытается в одно и то же время обновить одну и ту же часть кода. Нужен определённый механизм, позволяющий управлять событиями и тем самым избежать потери результатов общей работы.
                • Работая с проектом в одиночку или с другими, вы захотите иметь возможность иметь резервную копию кода на случай поломки вашего компьютера.
                  • -
                • Также у вас может возникнуть необходимость откатить изменения к более ранним версиям, если проблема обнаружена позднее. Конечно, это начать делать самостоятельно, сохраняя различные версии одного и того же файла, например myCode.js, myCode_v2.js, myCode_v3.js, myCode_final.js, myCode_really_really_final.js, и так далее, но это на самом деле ненадежный и порождающий ошибки способ.
                  • +
                • Также у вас может возникнуть необходимость откатить изменения к более ранним версиям, если проблема обнаружена позднее. Конечно, это начать делать самостоятельно, сохраняя различные версии одного и того же файла, например myCode.js, myCode_v2.js, myCode_v3.js, myCode_final.js, myCode_really_really_final.js, и так далее, но это на самом деле ненадёжный и порождающий ошибки способ.
                • Различные члены команды могут захотеть создать собственные версии кода (в Git такие версии именуются ветками), работать над новой фичей в этой версии, а затем контролируемо объединить эту версию (в GitHub используются пул реквизиты - запросы на принятие изменений) с главной версией.

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

                -

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

                +

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

                Подготовка

                @@ -38,7 +38,7 @@ original_slug: Learn/Tools_and_testing/GitHub
                • Компьютер с установленной версией Git (посмотри страницу загрузки Git).
                • Приложения для работы с Git. В зависимости от того как ты предпочитаешь работать, можешь использовать Git-клиенты с графическим интерфейсом (мы рекомендуем GitHub Desktop, SourceTree или Git Kraken) или просто продолжай использовать окно терминала. Если честно, будет весьма полезно для тебя узнать основы использования git-команд в терминале, даже если ты собираешься работать через графический интерфейс.
                  • -
                • Аккаунт на GitHub. Если у тебя еще его нет, зарегистрируйся сейчас по указанной ссылке.
                  • +
                • Аккаунт на GitHub. Если у тебя ещё его нет, зарегистрируйся сейчас по указанной ссылке.

                Что касается предварительных знаний, вам не нужно разбираться в веб-разработке, Git / GitHub или VCS, чтобы приступить к этому модулю. Тем не менее, рекомендуется, чтобы вы разбирались в составлении кода, могли его писать и читать, а также сохранили пару строчек кода в своих репозиториях!

                -- cgit v1.2.3-54-g00ecf