diff options
Diffstat (limited to 'files/ru')
6 files changed, 121 insertions, 97 deletions
diff --git a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index 1b7cfb7af6..e37ffaabd4 100644 --- a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -7,13 +7,13 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div> -<p class="summary">Теперь, когда мы спокойно добавляем простые изображения на веб-страницу, сделаем следующий шаг — начнём добавлять видео и аудиоплееры в ваши HTML-документы! В этой статье вы увидите, как это делать с элементами {{htmlelement("video")}} и {{htmlelement("audio")}} ; а в завершение посмотрите, как добавить титры и субтитры к вашим видео.</p> +<p class="summary">Теперь, когда мы спокойно добавляем простые изображения на веб-страницу, сделаем следующий шаг — начнём добавлять видео и аудиоплееры в ваши HTML-документы! В этой статье вы увидите, как это делать с элементами {{htmlelement("video")}} и {{htmlelement("audio")}} ; а в завершение посмотрите, как добавить титры и субтитры к вашим видео.</p> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">Предпосылки:</th> - <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового ПО</a>, базовые знания <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">работа с файлами</a>, знакомство с основами HTML (как описано в <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Начало работы с HTML</a>) и <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a>.</td> + <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового ПО</a>, базовые знания <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">работа с файлами</a>, знакомство с основами HTML (как описано в <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Начало работы с HTML</a>) и <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a>.</td> </tr> <tr> <th scope="row">Задача:</th> @@ -24,14 +24,14 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <h2 id="Аудио_и_видео_в_Интернете">Аудио и видео в Интернете</h2> -<p>Веб-разработчики хотели использовать видео и аудио в Интернете в течение длительного времени, начиная с начала 2000-х годов, когда пропускная способность сети стала достаточной, чтобы поддерживать любое видео (видеофайлы намного больше, чем текст, или даже изображения). На раннем этапе базовые веб-технологии, такие как HTML, не имели возможности вставлять видео и аудио в Интернет, поэтому запатентованные технологии (или плагины), такие как Flash (а затем и Silverlight), стали популярными для обработки такого контента. Такая технология работала нормально, но у нее было много недостатков, включавших плохую работу с функционалом HTML и CSS, проблемы безопасности и проблемы доступности.</p> +<p>Веб-разработчики хотели использовать видео и аудио в Интернете в течение длительного времени, начиная с начала 2000-х годов, когда пропускная способность сети стала достаточной, чтобы поддерживать любое видео (видеофайлы намного больше, чем текст, или даже изображения). На раннем этапе базовые веб-технологии, такие как HTML, не имели возможности размещения на сайтах видео и аудио контента, поэтому запатентованные технологии (или плагины), такие как Flash (а затем и Silverlight), стали популярными для обработки такого контента. Такая технология работала нормально, но у неё было много недостатков, включавших плохую работу с функционалом HTML и CSS, проблемы безопасности и проблемы доступности.</p> -<p>Самостоятельное решение решило бы большую часть этого, если сделано правильно. К счастью, несколько лет спустя в спецификации {{glossary ("HTML5")}} были добавлены такие функции, с элементами {{htmlelement("video")}} и{{htmlelement("audio")}}, и некоторые новые {{glossary("JavaScript")}} {{glossary("API", "API")}} для их управления. Мы не будем рассматривать JavaScript здесь - только необходимые основы, которые могут быть достигнуты с помощью HTML.</p> +<p>Собственное решение устранило бы большую часть этой проблемы, если бы оно было реализовано правильно. К счастью, несколько лет спустя в спецификации {{glossary ("HTML5")}} были добавлены такие функции, с элементами {{htmlelement("video")}} и {{htmlelement("audio")}}, и некоторые новые {{glossary("JavaScript")}} {{glossary("API", "API")}} для их управления. Мы не будем рассматривать JavaScript здесь - только необходимые основы, которые могут быть достигнуты с помощью HTML.</p> -<p>Мы не будем учить вас, как создавать аудио- и видеофайлы - для этого требуется совершенно другой набор навыков. Мы предоставили вам образцы аудио- и видеофайлов и пример кода для вашего собственного эксперимента, на случай, если у вас нет под рукой собственных.</p> +<p>Мы не будем учить вас, как создавать аудио и видеофайлы - для этого требуется совершенно другой набор навыков. Мы предоставили вам образцы аудио и видеофайлов и пример кода для вашего собственного эксперимента, на случай, если у вас нет под рукой собственных.</p> <div class="note"> -<p><strong>Примечание</strong>: Прежде чем вы начнете здесь, вы также должны знать, что есть немало {{glossary("OVP","OVPs")}} (провайдеров онлайн-видео) вроде <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a> и <a href="https://vimeo.com/">Vimeo</a>, а также онлайн аудио-провайдеров вроде <a href="https://soundcloud.com/">Soundcloud</a>. Такие компании предлагают удобный и простой способ размещения и потребления видео, поэтому вам не нужно беспокоиться о огромном потреблении полосы пропускания. OVP даже обычно предлагают готовый код для встраивания видео и аудио в ваши веб-страницы. Если вы пойдёте по этому пути, то сможете избежать некоторых трудностей, которые мы обсуждаем в этой статье.</p> +<p><strong>Примечание</strong>: Прежде всего, вы также должны знать, что есть немало {{glossary("OVP","OVPs")}} (провайдеров онлайн-видео) вроде <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a> и <a href="https://vimeo.com/">Vimeo</a>, а также онлайн аудио-провайдеров вроде <a href="https://soundcloud.com/">Soundcloud</a>. Такие компании предлагают удобный и простой способ размещения и потребления видео, поэтому вам не нужно беспокоиться об огромном потреблении трафика. OVP даже обычно предлагают готовый код для встраивания видео и аудио в ваши веб-страницы. Если вы пойдёте по этому пути, то сможете избежать некоторых трудностей, которые мы обсуждаем в этой статье.</p> </div> <h3 id="Элемент_<video>">Элемент <video></h3> @@ -48,7 +48,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <dt>{{htmlattrxref("src","video")}}</dt> <dd>Точно так же, как для элемента {{htmlelement("img")}} , атрибут <code>src</code> (source — источник) содержит путь к видео, которое вы хотите внедрить. Он работает точно так же.</dd> <dt>{{htmlattrxref("controls","video")}}</dt> - <dd>Пользователи должны иметь возможность контролировать воспроизведение видео и аудио (особенно это важно для людей, которые больны <a href="https://ru.wikipedia.org/wiki/%D0%AD%D0%BF%D0%B8%D0%BB%D0%B5%D0%BF%D1%81%D0%B8%D1%8F">эпилепсией</a>). Вы должны либо использовать атрибут <code>controls</code>, чтобы использовать встроенный в браузер интерфейс управления или создать собственный интерфейс, используя соответствующие <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a>. Как минимум, интерфейс должен включать способ запуска и остановки медиа-носителя и регулировки громкости.</dd> + <dd>Пользователи должны иметь возможность контролировать воспроизведение видео и аудио (особенно это важно для людей, которые больны <a href="https://ru.wikipedia.org/wiki/%D0%AD%D0%BF%D0%B8%D0%BB%D0%B5%D0%BF%D1%81%D0%B8%D1%8F">эпилепсией</a>). Вы должны либо использовать атрибут <code>controls</code>, чтобы использовать встроенный в браузер интерфейс управления или создать собственный интерфейс, используя соответствующие <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a>. Как минимум, интерфейс должен включать способ запуска и остановки медиа-носителя и регулировки громкости.</dd> <dt>Параграф внутри тегов <code><video></code></dt> <dd>Это называют <strong>резервный контент</strong> — он будет отображаться, если браузер, показывающий страницу, не поддерживает элемент <code><video></code>, позволяя нам обеспечить поддержку для старых версий браузеров. Это может быть все, что вы захотите; в нашем примере мы предоставили прямую ссылку на видеофайл, поэтому пользователь может хотя бы получить к нему доступ, независимо от того, какой браузер он используют.</dd> </dl> @@ -57,14 +57,16 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p> -<p>Вы можете <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">посмотреть живой пример</a> (взгляните также на <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">исходный код</a>).</p> +<p>Вы можете <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">посмотреть живой пример</a> (взгляните также на <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">исходный код</a>).</p> <h3 id="Поддержка_нескольких_форматов">Поддержка нескольких форматов</h3> -<p>Присутствует одна проблема с приведенным выше примером, которую вы, возможно, уже заметили, если пытались получить доступ к прямой ссылке выше с помощью браузера, такого как Safari или Internet Explorer. Видео не будет играть!</p> +<p>Присутствует одна проблема с приведенным выше примером, которую вы, возможно, уже заметили, если пытались получить доступ к прямой ссылке выше с помощью браузера, такого как Safari или Internet Explorer. Видео не будет воспроизводиться!</p> <p>Давайте кратко рассмотрим терминологию. Форматы, такие как MP3, MP4 и WebM, называются <strong>форматами контейнеров</strong>. Они содержат различные части, которые составляют всю песню или видео — например, звуковую дорожку, видеодорожку (в случае видео) и метаданные для описания представленного носителя.</p> +<p>Например, файл WebM, содержащий фильм, имеет основную видеодорожку и одну дорожку с альтернативным ракурсом, плюс аудио для английского и испанского языков, в дополнение к аудио для дорожки с комментариями на английском языке. Также включены текстовые дорожки, содержащие закрытые субтитры для художественного фильма, испанские субтитры для фильма и английские субтитры для комментариев.</p> + <p>Аудио и видео треки также находятся в разных форматах, например:</p> <ul> @@ -73,19 +75,27 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <li>Более старый контейнер Ogg имеет тенденцию идти с аудио Ogg Vorbis и видео Ogg Theora. Поддерживалось главным образом в Firefox и Chrome, но было вытеснено более качественным форматом WebM.</li> </ul> -<p>Звуковой проигрыватель обычно воспроизводит звуковую дорожку напрямую, например, файл MP3 или Ogg.</p> +<p>Есть несколько особых случаев. Например, для некоторых типов аудио данные кодека часто хранятся без контейнера или с упрощенным контейнером. Одним из таких примеров является кодек FLAC, который чаще всего хранится в файлах FLAC, которые представляют собой просто необработанные дорожки FLAC.</p> -<div class="note"> -<p><strong>Примечание</strong>: Всё не так просто, вы можете увидеть это в нашей <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">таблице совместимости видео и аудио кодеков</a>. Кроме того, многие браузеры мобильных платформ могут воспроизводить неподдерживаемый формат, передавая его системному медиа-проигрывателю. Так случается и в наше время.</p> -</div> +<p>Еще одна такая ситуация - всегда популярный файл MP3. «Файл MP3» на самом деле является звуковой дорожкой MPEG-1 Audio Layer III (MP3), хранящейся в контейнере MPEG или MPEG-2. Это особенно интересно, поскольку, хотя большинство браузеров не поддерживают использование мультимедиа MPEG в элементах {{HTMLElement ("video")}} и {{HTMLElement ("audio")}}, они могут поддерживать MP3 из-за его популярности.</p> + +<p>Аудиоплеер обычно воспроизводит аудиодорожку напрямую, например файл MP3 или Ogg. Для этого не нужны контейнеры.</p> -<p>Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные <strong>{{Glossary("Codec","Codecs")}}</strong>, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в двоичные цифры и обратно. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придется предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования носителя, он просто не сможет играть.</p> +<h4 id="Поддержка_медиафайлов_в_браузерах">Поддержка медиафайлов в браузерах</h4> + +<p>Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные {{Glossary("Codec","кодеки")}}, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придется предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.</p> <div class="note"> -<p><strong>Примечание:</strong> Возможно, вам интересно, как сложилась такая ситуация. <strong>MP3 </strong> (для аудио) и <strong>MP4/H.264</strong> (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года, и H.264 самое меньшее до 2027 года, так что браузеры, которые не являются держетелями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.</p> +<p><strong>Примечание:</strong> Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года, так что браузеры, которые не являются держетелями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.</p> </div> -<p>Так как мы это сделаем? Взгляните на следующий <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">обновленный пример</a> ( а также <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">живой пример</a>):</p> +<p>Все становится немного сложнее, потому что каждый браузер не только поддерживает свой набор форматов файлов-контейнеров, но и каждый из них поддерживает свой выбор кодеков. Чтобы максимизировать вероятность того, что ваш веб-сайт или приложение будет работать в браузере пользователя, вам может потребоваться предоставить каждый медиафайл, который вы используете, в нескольких форматах. Если ваш сайт и браузер пользователя не используют общий медиаформат, ваши медиа просто не будут воспроизводиться.</p> + +<p>Из-за сложности обеспечения возможности просмотра мультимедийных файлов вашего приложения в любой комбинации браузеров, платформ и устройств, которые вы хотите использовать, выбор наилучшего сочетания кодеков и контейнера может оказаться сложной задачей. Смотрите <a href="/en-US/docs/Web/Media/Formats/Containers#Choosing_the_right_container">выбор подходящего контейнера</a> для получения помощи по выбору формата файла контейнера, наиболее подходящего для ваших нужд; аналогичным образом смотрите <a href="/en-US/docs/Web/Media/Formats/Video_codecs#Выбор_видеокодека">выбор видеокодека</a> и <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">выбор аудиокодека</a> для помощи в выборе первых медиакодеков, которые будут использоваться для вашего контента и вашей целевой аудитории.</p> + +<p>Еще одна вещь, о которой следует помнить: мобильные браузеры могут поддерживать дополнительные форматы, не поддерживаемые их настольными эквивалентами, точно так же, как они могут не поддерживать все те же форматы, что и настольная версия. Вдобавок ко всему, как настольные, так и мобильные браузеры могут быть спроектированы так, чтобы разгрузить обработку воспроизведения мультимедиа (либо для всех мультимедиа, либо только для определенных типов, которые он не может обрабатывать внутренне). Это означает, что поддержка мультимедиа частично зависит от того, какое программное обеспечение установил пользователь.</p> + +<p>Так как мы это сделаем? Взгляните на следующий <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">обновленный пример</a> (и попробуйте <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">живой пример</a>):</p> <pre class="brush: html notranslate"><video controls> <source src="rabbit320.mp4" type="video/mp4"> @@ -116,20 +126,20 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>На выходе получим нечто, подобное этому:</p> -<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">Новые параметры:</p> +<p><strong><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;"></strong>Новые параметры:</p> <dl> - <dt>{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}</dt> - <dd>Вы можете контролировать размер видео либо с помощью этих атрибутов, либо с помощью {{Glossary("CSS")}}. В обоих случаях видео поддерживают собственное соотношение ширины и высоты — известное как <strong>соотношение сторон</strong>. Если соотношение сторон не поддерживается установленными вами размерами, видео будет увеличиваться, чтобы заполнить пространство по горизонтали, а заполненному пространству по умолчанию будет задан сплошной цвет фона.</dd> - <dt>{{htmlattrxref("autoplay","video")}}</dt> + <dt><strong>{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}</strong></dt> + <dd>Вы можете контролировать размер видео либо с помощью этих атрибутов, либо с помощью {{Glossary("CSS")}}. В обоих случаях видео поддерживают собственное соотношение ширины и высоты — известное как соотношение сторон. Если соотношение сторон не поддерживается установленными вами размерами, видео будет увеличиваться, чтобы заполнить пространство по горизонтали, а заполненному пространству по умолчанию будет задан сплошной цвет фона.</dd> + <dt><strong>{{htmlattrxref("autoplay","video")}}</strong></dt> <dd>Этот атрибут позволяет сразу начать воспроизведение звука или видео, пока остальная часть страницы загружается. Вам не рекомендуется использовать автовоспроизведение видео (или аудио) на ваших сайтах, потому что пользователи могут найти это действительно раздражающим.</dd> - <dt>{{htmlattrxref("loop","video")}}</dt> + <dt><strong>{{htmlattrxref("loop","video")}}</strong></dt> <dd>Этот атрибут позволяет воспроизводить видео (или аудио) снова, когда он заканчивается. Это также может раздражать, поэтому используйте тогда, когда это действительно необходимо.</dd> - <dt>{{htmlattrxref("muted","video")}}</dt> + <dt><strong>{{htmlattrxref("muted","video")}}</strong></dt> <dd>Этот атрибут заставляет проигрыватель воспроизводить звук, отключенный по умолчанию.</dd> - <dt>{{htmlattrxref("poster","video")}}</dt> + <dt><strong>{{htmlattrxref("poster","video")}}</strong></dt> <dd>Этот атрибут принимает в качестве значения URL-адрес изображения, который будет отображаться до воспроизведения видео. Он предназначен для заставки к видео или рекламы.</dd> - <dt>{{htmlattrxref("preload","video")}}</dt> + <dt><strong>{{htmlattrxref("preload","video")}}</strong></dt> <dd> <p>этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трех значений:</p> @@ -164,15 +174,15 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Он занимает меньше места, чем видеоплеер, поскольку нет визуального компонента - вам просто нужно отображать элементы управления для воспроизведения звука. Другие отличия от видео HTML5 заключаются в следующем:</p> <ul> - <li>Элемент {{htmlelement ("audio")}} не поддерживает атрибуты width / height - опять же, нет визуального компонента, поэтому присваивать ширину или высоту не к чему.</li> - <li>Он также не поддерживает атрибут <code>poster</code>- опять же, из-за отсутствия визуального компонента. </li> + <li>Элемент {{htmlelement ("audio")}} не поддерживает атрибуты <code>width</code> и <code>height</code> - опять же, нет визуального компонента, поэтому присваивать ширину или высоту не к чему.</li> + <li>Он также не поддерживает атрибут <code>poster</code> опять же, из-за отсутствия визуального компонента. </li> </ul> <p>Помимо этого, <code><audio></code> поддерживает все те же функции, что и <code><video></code> - просмотрите приведенные выше разделы для получения дополнительной информации о них.</p> <h2 id="Отображение_текстовых_дорожек_к_видео">Отображение текстовых дорожек к видео</h2> -<p>Теперь мы обсудим немного более продвинутую концепцию, о которой очень полезно знать. Многие люди не могут или не хотят слышать аудио / видео контент, который они находят в Интернете, по крайней мере, в определенное время. Например:</p> +<p>Теперь мы обсудим немного более продвинутую концепцию, о которой очень полезно знать. Многие люди не могут или не хотят слышать аудио или видео контент, который они находят в Интернете, по крайней мере, в определенное время. Например:</p> <ul> <li>У многих людей есть слуховые нарушения (более известные как слабослышащие или глухие).</li> @@ -180,20 +190,20 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <li>Люди, которые не говорят на языке из видео, могут захотеть увидеть текстовую расшифровку или даже перевод, чтобы помочь им понять медиа-контент.</li> </ul> -<p>Разве было бы неплохо иметь возможность предоставить этим людям транскрипцию слов, произносимых в аудио / видео? Благодаря HTML5 видео, вы можете, с форматом <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> и элементом {{htmlelement ("track")}}.</p> +<p>Разве было бы неплохо иметь возможность предоставить этим людям транскрипцию слов, произносимых в аудио или видео? Благодаря HTML5 вы можете это сделать с форматом <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> и элементом {{htmlelement ("track")}}.</p> <div class="note"> -<p><strong>Замечание</strong>: "Транскрибировать" значит записывать устную речь в форме письменной.Получившийся в результате текст есть 'расшифровка'.</p> +<p><strong><strong>Замечание</strong>: </strong>"Транскрибировать" значит записывать устную речь в виде текста. Полученный текст представляет собой «стенограмму».</p> </div> -<p>WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле / позиционировании. Эти текстовые строки называются <strong>репликами</strong>, и вы можете отображать разные типы для разных целей, наиболее распространенными являются:</p> +<p>WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле/позиционировании. Эти текстовые строки называются репликами, и вы можете отображать разные типы для разных целей, наиболее распространенными являются:</p> <dl> - <dt>субтитры</dt> + <dt><strong>субтитры</strong></dt> <dd>Переводы иностранного материала, для людей, которые не понимают слов, произнесенных в аудио.</dd> - <dt>титры</dt> + <dt><strong>титры</strong></dt> <dd>Синхронизированные транскрипции диалога или описания значимых звуков, чтобы люди, которые не могут слышать звук, поняли что происходит.</dd> - <dt>рассчитанные описания</dt> + <dt><strong>рассчитанные описания</strong></dt> <dd>Текст для преобразования в аудио, чтобы обслуживать людей с нарушениями зрения.</dd> </dl> @@ -232,15 +242,15 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p><img alt='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."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> -<p>Подробнее читайте в разделе <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">добавление титров и субтитров к видео HTML5</a>. Вы можете <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">найти пример</a>, который соответствует этой статье в Github, написанной Ян Девлином (см. также <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">исходный код</a>). В этом примере используется JavaScript, позволяющий пользователям выбирать между различными субтитрами. Обратите внимание, что для включения субтитров вам нужно нажать кнопку «CC» и выбрать вариант - английский, немецкий или испанский.</p> +<p>Подробнее читайте в разделе <a href="/ru/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">добавление титров и субтитров к видео HTML5</a>. Вы можете <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">найти пример</a>, который соответствует этой статье в Github, написанной Яном Девлином (см. также <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">исходный код</a>). В этом примере используется JavaScript, позволяющий пользователям выбирать между различными субтитрами. Обратите внимание, что для включения субтитров вам нужно нажать кнопку «CC» и выбрать вариант - английский, немецкий или испанский.</p> <div class="note"> -<p><strong>Примечание</strong>: Текстовые треки также помогут вам с {{glossary ("SEO")}}, так как поисковые системы особенно преуспевают в работе с текстом. Текстовые треки даже позволяют поисковым системам напрямую связываться с местом, происходящим в видео.</p> +<p><strong><strong>Примечание</strong>: </strong>Текстовые треки также помогут вам с {{glossary ("SEO")}}, так как поисковые системы особенно преуспевают в работе с текстом. Текстовые треки даже позволяют поисковым системам напрямую связываться с местом, происходящим в видео.</p> </div> <h3 id="Активное_обучение_Внедрение_собственного_аудио_и_видео">Активное обучение: Внедрение собственного аудио и видео</h3> -<p>Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в эти дни позволяют легко записывать аудио и видео, и если вы можете перенести их на на свой компьютер, вы можете его использовать. Возможно, вам придется сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> и <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Мы хотели бы, чтобы вы попробовали сделать это!</p> +<p>Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в наши дни позволяют очень легко записывать аудио и видео, и, если вы можете перенести их на свой компьютер, вы можете их использовать. Возможно, вам придется сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> и <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Мы хотели бы, чтобы вы попробовали сделать это!</p> <p>Если у вас нет какого-либо видео или аудио, вы можете свободно пользоваться нашими <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">образцами аудио и видео файлов</a> для выполнения этого упражнения. Вы также можете использовать наш образец кода для справки.</p> @@ -248,7 +258,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <ol> <li>Сохраните аудио и видео файлы в новом каталоге на вашем компьютере.</li> - <li>Создайте новый HTML файл в том же каталоге, и назвать его <code>index.html</code>.</li> + <li>Создайте новый HTML файл в том же каталоге и назовите его <code>index.html</code>.</li> <li>Добавьте элементы <code><audio></code> и <code><video> </code>на страницу; чтобы они отображали элементы управления браузером по умолчанию.</li> <li>Введите оба варианта элемента <code><source></code>, чтобы браузеры находили оптимальный формат звука, который он поддерживает и загружает. Они должны включать <code>type</code> атрибуты.</li> <li>Дайте элементу <code><video></code> заставку, которая будет отображаться до начала воспроизведения видео. Получайте удовольствие, создавая свою собственную заставку к видео.</li> diff --git a/files/ru/learn/html/multimedia_and_embedding/добавление_r_graphics_to_the_web/index.html b/files/ru/learn/html/multimedia_and_embedding/добавление_r_graphics_to_the_web/index.html index 10ab133f74..a3a445dfc7 100644 --- a/files/ru/learn/html/multimedia_and_embedding/добавление_r_graphics_to_the_web/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/добавление_r_graphics_to_the_web/index.html @@ -57,7 +57,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_th <p>В качестве простого примера, следующий код создает круг и прямоугольник:</p> -<pre class="brush: html"><svg version="1.1" +<pre class="brush: html notranslate"><svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> @@ -100,7 +100,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_th <p>Чтобы встроить SVG используя элемент {{htmlelement ("img")}}, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут <code>height</code> или <code>width</code> (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы еще этого не делали, пожалуйста, прочтите <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a>.</p> -<pre class="brush: html"><img +<pre class="brush: html notranslate"><img src="equilateral.svg" alt="triangle with all three sides equal" height="87px" @@ -125,23 +125,23 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_th <p>Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в <code>src</code> атрибуте и использовать {{htmlattrxref("srcset", "img")}} атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае <span class="tlid-translation translation" lang="ru"><span title="">SVG будут загружаться только поддерживающими браузерами - старые же браузеры будут загружать PNG:</span></span></p> -<pre class="brush: html"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> +<pre class="brush: html notranslate"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> <p>Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведенном коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:</p> -<pre class="brush: css"><code>background: url("fallback.png") no-repeat center;</code> +<pre class="brush: css notranslate"><code>background: url("fallback.png") no-repeat center;</code> background<code>-image: url("image.svg"); background-size: contain;</code></pre> <p>Подобно методу <code><img></code>, описанному выше, вставка SVG с использлованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.</p> -<p>Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">данная сатья укажет вам верное направление</a>.</p> +<p>Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">данная статья укажет вам верное направление</a>.</p> <h3 id="Как_включить_SVG_в_ваш_HTML_код">Как включить SVG в ваш HTML код</h3> <p>Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой прием иногда называют встраиванием SVG (<strong>SVG inline</strong> или <strong>inlining SVG</strong>). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <code><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:</p> -<pre class="brush: html"><svg width="300" height="200"> +<pre class="brush: html notranslate"><svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> </svg> </pre> @@ -173,7 +173,7 @@ background-size: contain;</code></pre> <p>Вот краткий обзор:</p> -<pre class="brush: html"><iframe src="triangle.svg" width="500" height="500" sandbox> +<pre class="brush: html notranslate"><iframe src="triangle.svg" width="500" height="500" sandbox> <img src="triangle.png" alt="Triangle with three unequal sides" /> </iframe></pre> @@ -195,7 +195,7 @@ background-size: contain;</code></pre> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html"><h2>Live output</h2> +<pre class="brush: html notranslate"><h2>Live output</h2> <div class="output" style="min-height: 50px;"> </div> @@ -220,7 +220,7 @@ background-size: contain;</code></pre> <input id="solution" type="button" value="Show solution" disabled> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { font-family: sans-serif; } @@ -240,7 +240,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -323,7 +323,7 @@ textarea.onkeyup = function(){ <h2 id="Заключение">Заключение</h2> -<p>Эта статья предоставила вам краткий обзор по тому, что такое векторная графика и SVG, почему полезно знать о них и как внедрять SVG в вашу веб-страницу. Эта статья не является полным руколводством по изучению SVG, а всего лишь указатель, чтоб вы знали что такое SVG, на случай, если вы встретите его во время странствий по Сети. Так что не переживайте, если вы еще не чувствуете себя экспертом в SVG. Ниже мы включили несколько ссылок, которые могут вам помочь, если вы хотите узнать больше о том, как это работает.</p> +<p>Эта статья предоставила вам краткий обзор по тому, что такое векторная графика и SVG, почему полезно знать о них и как внедрять SVG в вашу веб-страницу. Эта статья не является полным руководством по изучению SVG, а всего лишь указатель, чтоб вы знали что такое SVG, на случай, если вы встретите его во время странствий по Сети. Так что не переживайте, если вы еще не чувствуете себя экспертом в SVG. Ниже мы включили несколько ссылок, которые могут вам помочь, если вы хотите узнать больше о том, как это работает.</p> <p>В последней статье этого модуля мы будем исследовать адаптивные изображения в деталях, рассматривая инструменты HTML, которые позволяют делать ваши изображения так, чтоб они могли лучше работать на разных устройствах.</p> diff --git a/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html b/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html index 76b192dd4e..d96558e3da 100644 --- a/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/изображения_в_html/index.html @@ -24,7 +24,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <h2 id="Как_разместить_картинку_на_странице">Как разместить картинку на странице?</h2> -<p>Чтобы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду что, не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — <code>src</code> (произносится <em>эс-ар-си</em>, иногда говорят его полное название, <em>source</em>). Атрибут <code>src</code> содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута <code>href</code> для элемента {{htmlelement("a")}}.</p> +<p>Чтобы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду, что не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — <code>src</code> (произносится <em>эс-ар-си</em>, иногда говорят его полное название, <em>source</em>). Атрибут <code>src</code> содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута <code>href</code> для элемента {{htmlelement("a")}}.</p> <div class="note"> <p><strong>Примечание</strong>: Перед тем как продолжить, вам стоит вспомнить про <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок#Абсолютные_и_относительные_URL-адреса">типы адресов URL</a>, чтобы обновить в памяти про относительные и абсолютные адресса.</p> @@ -48,7 +48,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <pre class="brush: html notranslate"><img src="https://www.example.com/images/dinosaur.jpg"></pre> -<p>Но это бесмыссленно, так как он просто заставляет браузер делать больше работы, запрашивая IP-адрес от DNS-сервера все снова, и т.д. Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.</p> +<p>Но это бесмыссленно, так как он просто заставляет браузер делать больше работы, запрашивая каждый раз IP-адрес от DNS-сервера. Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.</p> <div class="warning"> <p><strong>Внимание:</strong> Большиство изображений защищены. Не отображайте изображения на вашем сайте пока:</p> @@ -59,7 +59,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <li>пока у вас не будет достаточно доказательств что изображение находится в открытом доступе.</li> </ul> -<p>Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своем атрибуте <code>src</code> ссылку на изображение, размещенную на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу, не позволяя вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.</p> +<p>Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своем атрибуте <code>src</code> ссылку на изображение, размещенное на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу и не позволяет вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.</p> </div> <p>Наш код выше даст нам следующий результат:</p> @@ -67,11 +67,11 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> <div class="note"> -<p><strong>Примечание</strong>: Элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в <a href="/ru/docs/Web/CSS/Замещаемый_элемент">Замещаемых элементах</a>.</p> +<p><strong>Примечание</strong>: Такие элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в <a href="/ru/docs/Web/CSS/Замещаемый_элемент">Замещаемых элементах</a>.</p> </div> <div class="note"> -<p><strong>Примечание</strong>: Вы можете найти готовый пример здесь <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">running on Github</a> (смотрите так же <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">исходный код</a>)</p> +<p><strong>Примечание</strong>: Вы можете найти готовый пример этого раздела, <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">размещённый на Github</a> (смотрите также <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">исходный код</a>).</p> </div> <h3 id="Альтернативный_текст">Альтернативный текст</h3> @@ -97,7 +97,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <p>Что именно вы должны писать в атрибут <code>alt</code>? В первую очередь, это зависит от того, <em>зачем</em> изображение вообще находится на странице. Другими словами, что вы потеряете, если ваше изображение не появится:</p> <ul> - <li><strong>Декорация. </strong>Если изображение служит просто украшением и не является частью содержимого, добавьте пустой <code>alt=""</code>. Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя. На самом деле, декоративные изображения не принадлежат вашему HTML. {{anch("CSS background images")}} должны быть использованы для вставки декораций, но, если это неизбежно, то лучшее решение - использовать <code>alt=""</code>.</li> + <li><strong>Декорация. </strong>Вы должны использовать {{anch ("Фоновые изображения CSS")}} для декоративных изображений, но если вы должны использовать HTML, добавьте пустой alt = "". Если изображение служит просто украшением и не является частью содержимого, добавьте пустой <code>alt=""</code>. Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя.</li> <li><strong>Контент.</strong> Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий<em> </em><code>alt</code>. Или даже лучше, в <em>главном</em> тексте, который все увидят. Не используйте <code>alt</code> , если можете обойтись без него. Насколько неудобно было бы для пользователя, если бы <em>параграфы</em> были написаны дважды в <em>главном контенте</em>? Если изображение адекватно описано в основном тексте, можете просто использовать <code>alt=""</code>.</li> <li><strong>Ссылка.</strong> Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок#Используйте_четкие_формулировки_описания_ссылок">использовать четкие формулировки описания ссылок</a>. В таком случае, вы сможете использовать элемент <code><a></code> или атрибут <code>alt</code> . Старайтесь выбрать лучший вариант.</li> <li><strong>Текст.</strong> Не пишите текст в изображениях. Если вашему заголовку понадобится тень, то лучше используйте для этого <a href="/ru/docs/Web/CSS/text-shadow">CSS</a> вместо добавления текста в изображение. Однако, если <em>действительно этого не избежать</em>, то вам следует дополнить текст в атрибуте <code>alt</code>.</li> @@ -106,12 +106,12 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <p>По существу, главная идея здесь это предоставить нечто полезное, для случая когда изображения не видны. Это гарантирует что все пользователи не упустят ничего из содержимого страницы. Попробуйте отключить изображения в своём браузере и посмотрите как всё выглядит. Вы вскоре выясните насколько полезным является альтернативный текст, если изображения не видны.</p> <div class="note"> -<p><strong>Примечание</strong>: Более подробную информацию, смотрите здесь <a href="/ru/docs/Learn/Доступность/HTML#Альтернативный_текст">Альтернативный текст</a>.</p> +<p><strong>Примечание</strong>: Более подробную информацию, смотрите здесь: <a href="/ru/docs/Learn/Доступность/HTML#Альтернативный_текст">Альтернативный текст</a>.</p> </div> <h3 id="Ширина_и_высота">Ширина и высота</h3> -<p>Вы можете использовать атрибуты <code>width</code> и <code>height</code>, чтобы указать ширину и высоту вашего изображения . Ширину и высоту вашего избражение можете найти различными способами. Например, на Mac можно использовать <kbd>Cmd</kbd> + <kbd>I</kbd> чтобы получить информацию по изображению. Повторяя наш пример, мы можем сделать так:</p> +<p>Вы можете использовать атрибуты <code>width</code> и <code>height</code>, чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего избражение можете найти различными способами. Например, на Mac можно использовать <kbd>Cmd</kbd> + <kbd>I</kbd> чтобы получить информацию по изображению. Повторяя наш пример, мы можем сделать так:</p> <pre class="brush: html notranslate"><img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; @@ -123,17 +123,17 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> -<p>Это хорошая практика, в результате страница загрузится быстрей и более гладко.</p> +<p>Это хорошая практика, в результате страница загрузится быстрее и более гладко.</p> -<p>Однако, вы не должны изменять размеры ваших изображений используя HTML аттрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы сталкнётесь с изображениями, которые выглядят зернистыми, размытыми, или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное <a href="https://en.wikipedia.org/wiki/Aspect_ratio_(image)">соотношение сторон</a>. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу вэб-страницу.</p> +<p>Однако, вы не должны изменять размеры ваших изображений используя HTML аттрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы сталкнётесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное <a href="https://en.wikipedia.org/wiki/Aspect_ratio_(image)">соотношение сторон</a>. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу вэб-страницу.</p> <div class="note"> -<p><strong>Примечание</strong>: Если вам нужно задать размеры вашего изображения, взамен вы можете использовать <a href="/ru/docs/Learn/CSS">CSS</a>.</p> +<p><strong>Примечание</strong>: Если вам действительно нужно изменить размер изображения, вы должны использовать вместо этого <a href="/ru/docs/Learn/CSS">CSS</a>.</p> </div> <h3 id="Заголовок_изображения">Заголовок изображения</h3> -<p>Как и для <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок">ссылок</a>, вы можете также добавить атрибут <code>title</code> для изображений, чтобы обеспечить дополнительную подтверждающую информацию если это необходимо. В нашем примере, мы можем это сделать так:</p> +<p>Как и для <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Создание_гиперссылок">ссылок</a>, вы также можете добавить атрибут <code>title</code> для изображений, чтобы при необходимости предоставить дополнительную информацию. В нашем примере мы могли бы сделать это так:</p> <pre class="brush: html notranslate"><img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; @@ -142,17 +142,17 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML height="341" title="A T-Rex on display in the Manchester University Museum"></pre> -<p>Это даст нам подсказку, также как и в ссылках:</p> +<p>Это дает нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:</p> <p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p> -<p>Нет необходимости писать заголовки изображений. Зачастую лучше включить такого рода вспомогательную информацию в основной текст статьи, чем прикреплять её к изображению. Однако, они полезны в некоторых обстоятельствах; например, в галереях изображений когда у вас нет места для их заголовков.</p> +<p>Однако это не рекомендуется - <code>title</code> имеет ряд проблем с доступностью, в основном из-за того, что поддержка программ чтения с экрана очень непредсказуема, и большинство браузеров не будут отображать её, если вы не наведёте курсор мыши (например, нет доступа для пользователей клавиатуры). Зачастую лучше включить такого рода вспомогательную информацию в основной текст статьи, чем прикреплять её к изображению. Однако, она полезна в некоторых обстоятельствах; например, в галереях изображений, когда у вас нет места для их заголовков.</p> <h3 id="Активное_обучение_встраивание_изображения">Активное обучение: встраивание изображения</h3> <p>Наступила очередь немного поиграть! Этот раздел активного обучения поможет вам выполнить простое упражнение по встраиванию. Вы будете обеспечены простым {{htmlelement("img")}} тэгом; мы хотели бы чтобы вы встроили изображение расположенное по следующей ссылке:</p> -<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p> +<p><a href="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg">https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</a></p> <p>Ранее мы говорили никогда не используйте горячие ссылки на изображения с других серверов, данный случай только для целей обучения, итак мы позволим вам пренебречь этим один разок.</p> @@ -160,11 +160,11 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <ul> <li>Добавили любой альтернативный текст, и проверили как это работает внеся ошибку в ссылку на изображение.</li> - <li>Установите правильную <code>ширину</code> и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">высоту</span></font> (подсказка; это 200px по ширине и 171px по высоте), после поэкспериментируйте с другими значениями, чтобы увидеть какой будет эффект.</li> - <li>Установите <code>заголовок</code> для изображения.</li> + <li>Установите правильные значения <code>width</code> и <code>height</code> (подсказка: это 200px по ширине и 171px по высоте), после поэкспериментируйте с другими значениями, чтобы увидеть какой будет эффект.</li> + <li>Установите <code>title</code> для изображения.</li> </ul> -<p>Если вы сделаете ошибку, вы всегда можете сбросить его используя кнопку <em>Reset</em>. Если вы реально не будете понимать что делать, нажмите кнопку <em>Show solution</em>, чтобы увидеть ответ:</p> +<p>Если вы сделаете ошибку, вы всегда можете очистить код, используя кнопку <em>Reset</em>. Если вы реально не будете понимать как сделать, нажмите кнопку <em>Show solution</em>, чтобы увидеть ответ:</p> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> @@ -238,9 +238,9 @@ window.addEventListener("load", drawOutput); <p>A T-Rex on display in the Manchester University Museum.</p> </div></pre> -<p>Это нормально. Это содержит всё что вам нужно, и красиво стилизуется с помощью CSS. Но есть проблема: здесь нет ничего, что семантически связывает изображение с его заголовком, и это может вызвать сложности для читателей. Например, когда у вас есть 50 изображений и заголовков, какой заголовок идёт вместе с каким изображением?</p> +<p>Это нормально. Это содержит всё что вам нужно, и красиво стилизуется с помощью CSS. Но, есть проблема: здесь нет ничего, что семантически связывает изображение с его заголовком, и это может вызвать сложности для читателей. Например, когда у вас есть 50 изображений и заголовков, какой заголовок идёт вместе с каким изображением?</p> -<p>Лучшим решением будет использование HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}} элементов. Они были созданы исключительно для этой цели: предоставление семантического контейнера для иллюстраций, и прозрачного связывания иллюстрации с её заголовком. Наш пример выше, мог быть переписан как то так:</p> +<p>Лучшим решением будет использование элементов HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}}. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и четко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:</p> <pre class="notranslate"><figure> <img src="images/dinosaur.jpg" @@ -252,13 +252,13 @@ window.addEventListener("load", drawOutput); <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption> </figure></pre> -<p>{{htmlelement("figcaption")}} элемент говорит браузерам, и вспомогательной технологии, что заголовок описывает содержимое {{htmlelement("figure")}} элемента.</p> +<p>Элемент {{htmlelement("figcaption")}} говорит браузерам и вспомогательной технологии, что заголовок описывает содержимое элемента {{htmlelement("figure")}}.</p> <div class="note"> -<p><strong>Замечание</strong>: С точки зрения доступности, заголовки и {{htmlattrxref('alt','img')}} имеют различные предназначения. Заголовки помогают даже тем,кто имеет возможность просматривать изображение, тогда как {{htmlattrxref('alt','img')}} предусматривает замену функционала отсутствующего изображения. Таким образом, заголовки и <code>alt</code> не подразумевают под собой одни и те же вещи, потому что оба используются браузером при отсутствии изображения. Попробуйте отключить изображения в своём браузере, чтобы увидеть как это выглядит.</p> +<p><strong>Замечание</strong>: С точки зрения доступности, заголовки и {{htmlattrxref('alt','img')}} имеют различные предназначения. Заголовки помогают даже тем, кто имеет возможность просматривать изображение, тогда как {{htmlattrxref('alt','img')}} обеспечивает замену функционала отсутствующего изображения. Таким образом, заголовки и <code>alt</code> не подразумевают под собой одни и те же вещи, потому что оба используются браузером при отсутствии изображения. Попробуйте отключить изображения в своём браузере, чтобы увидеть как это выглядит.</p> </div> -<p> Тег <figure> не является изображением. Он представляет собой независимый структурный элемент, который: </p> +<p>Тег <figure> не является изображением. Он представляет собой независимый структурный элемент, который: </p> <ul> <li>Передает смысл компактным, интуитивно понятным способом.</li> @@ -270,14 +270,14 @@ window.addEventListener("load", drawOutput); <h3 id="Активное_изучение_создание_<figure>">Активное изучение: создание <figure></h3> -<p>В этом разделе активного изучения, мы хотели бы, чтобы вы взяли текст из предыдущего раздела активного изучения, и преобразовали его в <figure>:</p> +<p>В этом разделе активного изучения мы хотели бы, чтобы вы взяли текст из предыдущего раздела активного изучения и преобразовали его в <figure>:</p> <ul> <li>Оберните его в {{htmlelement("figure")}} элемент.</li> <li>Скопируйте текст из атрибута <code>title</code>, удалите атрибут <code>title</code>, и вбейте текст в элемент {{htmlelement("figcaption")}}.</li> </ul> -<p>В случае допущения ошибки, вы всегда можете набрать код повторно нажав кнопку <em>Reset</em>. Если вы застряли, нажмите кнопку <em>Show solution</em> ,чтобы увидеть ответ:</p> +<p>В случае допущения ошибки, вы всегда можете набрать код повторно, нажав кнопку <em>Reset</em>. Если вы застряли, нажмите кнопку <em>Show solution</em>, чтобы увидеть ответ:</p> <div class="hidden"> <h6 id="Playable_code_2">Playable code 2</h6> @@ -339,20 +339,26 @@ window.addEventListener("load", drawOutput); <h2 id="Фоновые_изображения_CSS">Фоновые изображения CSS</h2> -<p>Вы можете использовать CSS для встраивания изображений в веб-страницы (или JavaScript, но это совсем другая история). CSS-свойство {{cssxref("background-image")}} , и другие <code>background-*</code> свойства, применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:</p> +<p>Вы можете использовать CSS для встраивания изображений в веб-страницы (или JavaScript, но это совсем другая история). Параметры CSS {{cssxref("background-image")}} и другие <code>background-*</code> применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:</p> <pre class="brush: css notranslate">p { background-image: url("images/dinosaur.jpg"); }</pre> -<p>Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же возиться с HTML изображениями? Согласено вышесказанному, фоновые изображения CSS используются только в качестве украшения. Если вы просто хотите добавить что-то красивое на свою страницу, чтобы улучшить визуальные эффекты, это нормально. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, и тп. Это звёздное время для HTML!</p> +<p>Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же возиться с HTML изображениями? Как указано выше, фоновые изображения CSS предназначены только для украшения. Если вы просто хотите добавить что-то красивое на свою страницу, чтобы улучшить визуальные эффекты, это нормально. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, они невидимы для программ чтения с экрана. Вот где блистают HTML-изображения!</p> <p>Итог: если изображение имеет важность, в контексте содержимого вашей страницы, вам следует использовать HTML изображения. Если же картинка является банальной декорацией, используйте фоновые изображения CSS.</p> <div class="note"> -<p><strong>Замечание</strong>: Вы можете узнать больше о <a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">фоновых изображениях CSS</a> в нашей теме о <a href="/en-US/docs/Learn/CSS">CSS</a>.</p> +<p><strong>Замечание</strong>: Вы можете узнать больше о <a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">фоновых изображениях CSS</a> в нашей теме о <a href="/ru/docs/Learn/CSS">CSS</a>.</p> </div> -<p>Вот и всё. Мы детально описали изображения и заголовки. В следующей статье мы перейдём на новый уровень, затронув тему встраивания видео и аудио в веб-страницу.</p> +<h2 id="Проверьте_свои_навыки!">Проверьте свои навыки!</h2> + +<p>Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше. Смотрите <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images">Проверьте знания по изображениям в HTML</a>.</p> + +<h2 id="Резюме">Резюме</h2> + +<p>На этом пока все. Мы подробно рассмотрели изображения и их заголовки. В следующей статье мы рассмотрим, как использовать HTML для встраивания видео и аудио на веб-страницы.</p> <p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p> diff --git a/files/ru/learn/javascript/asynchronous/async_await/index.html b/files/ru/learn/javascript/asynchronous/async_await/index.html index 751e08b45e..9882acfa58 100644 --- a/files/ru/learn/javascript/asynchronous/async_await/index.html +++ b/files/ru/learn/javascript/asynchronous/async_await/index.html @@ -1,6 +1,10 @@ --- title: Making asynchronous programming easier with async and await slug: Learn/JavaScript/Asynchronous/Async_await +tags: + - Асинхронность + - Гайд + - Для новичков translation_of: Learn/JavaScript/Asynchronous/Async_await --- <div>{{LearnSidebar}}</div> @@ -150,7 +154,7 @@ myFetch().then((blob) => { <h3 id="Минуточку_а_как_это_все_работает">Минуточку, а как это все работает ?</h3> -<p>Вы могли заметить, что мы обернули наш код в функцию и сделали ее асинхронной с помощью acync. Это было обязательно - нам надо создать контейнер, внутри которого будет запускаться асинхронный код и будет возмоность дождаться его результата с помощью await, не блокируя остальной код нашег скрипта.</p> +<p>Вы могли заметить, что мы обернули наш код в функцию и сделали ее асинхронной с помощью acync. Это было обязательно - нам надо создать контейнер, внутри которого будет запускаться асинхронный код и будет возмоность дождаться его результата с помощью await, не блокируя остальной код нашего скрипта.</p> <p>Внутри <code>myFetch()</code> находится код, который слегка напоминает версию на Promise, но есть важные отличия. Вместо того, чтобы писать цепочку блоков <code>.then()</code> мы просто использует ключевое слово <code>await</code> перед вызовом promise-based функции и присваиваем результат в переменную. Ключеовое слово <code>await</code> говорит JavaScript runtime приостановить код в этой строке, не блокируя остальной код скприта за пределами асинхронной функции. Когда вызов promise-based функции будет готов вернуть результат, выполнение продолжится с этой строки дальше.<br> <br> @@ -225,7 +229,7 @@ myFetch().then((blob) => { <h2 id="Await_и_Promise.all">Await и Promise.all()</h2> -<p>Как вы помните, асинхронные функции построены поверх <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, поэтому они совместимы со всеми возможностями последних. Мы легко можем подождать выполнение <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code>, присвоить результат в переменную и все это сделать используя синхронный стиль. Опять, вернемся к <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">an example we saw in our previous article</a>. Откройте пример в соседней вкладке, чтобы лучше понять разницу.</p> +<p>Как вы помните, асинхронные функции построены поверх <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, поэтому они совместимы со всеми возможностями последних. Мы легко можем подождать выполнение <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code>, присвоить результат в переменную и все это сделать используя синхронный стиль. Опять, вернемся к <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">примеру, рассмотреному в предыдущей статье</a>. Откройте пример в соседней вкладке, чтобы лучше понять разницу.</p> <p>Версия с async/await (смотрите <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), сейчас выглядит так:</p> @@ -300,7 +304,7 @@ displayContent() <br> Есть подход, который позволяет обойти эту проблему - сохранить все выполняющиеся Promises в переменные, а уже после этого дожидаться (awaiting) их результата. Давайте посмотрим на несколько примеров.</p> -<p>We've got two examples available — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) and <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Both of them start off with a custom promise function that fakes an async process with a <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> call:</p> +<p>Мы подготовили два примера — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) и <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Они оба начинаются с функции возвращающей promise, имитирующей асинхронность процессов при помощи вызова <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>:</p> <pre class="brush: js notranslate">function timeoutPromise(interval) { return new Promise((resolve, reject) => { @@ -310,13 +314,13 @@ displayContent() }); };</pre> -<p>Then each one includes a <code>timeTest()</code> async function that awaits three <code>timeoutPromise()</code> calls:</p> +<p>Далее в каждом примере есть асинхронная функция <code>timeTest()</code> ожидающая три вызова <code>timeoutPromise()</code>:</p> <pre class="brush: js notranslate">async function timeTest() { ... }</pre> -<p>Each one ends by recording a start time, seeing how long the <code>timeTest()</code> promise takes to fulfill, then recording an end time and reporting how long the operation took in total:</p> +<p>В каждом примере функция записывает время начала исполнения и сколько времерни понадобилось на испольние <code>timeTest()</code> промисов, вычитая время в момент запуска функции из времени в момент разрешения обещаний:</p> <pre class="brush: js notranslate">let startTime = Date.now(); timeTest().then(() => { @@ -325,9 +329,9 @@ timeTest().then(() => { alert("Time taken in milliseconds: " + timeTaken); })</pre> -<p>It is the <code>timeTest()</code> function that differs in each case.</p> +<p>Далее представленна асинхронная функция <code>timeTest()</code> различная для каждого из примеров.</p> -<p>In the <code>slow-async-await.html</code> example, <code>timeTest()</code> looks like this:</p> +<p>В случае с медленным примером <code>slow-async-await.html</code>, <code>timeTest()</code> выглядит:</p> <pre class="brush: js notranslate">async function timeTest() { await timeoutPromise(3000); @@ -335,9 +339,9 @@ timeTest().then(() => { await timeoutPromise(3000); }</pre> -<p>Here we simply await all three <code>timeoutPromise()</code> calls directly, making each one alert for 3 seconds. Each subsequent one is forced to wait until the last one finished — if you run the first example, you'll see the alert box reporting a total run time of around 9 seconds.</p> +<p>Здесь мы просто ждем все три <code>timeoutPromise()</code> напрямую, блокируя выполнение на данного блока на 3 секунды прии каждом вызове. Все последующие вызовы вынуждены ждать пока разрешится предыдущий. Если вы запустите первый пример (<code>slow-async-await.html</code>) вы увидите alert сообщающий время выполнения около 9 секунд. </p> -<p>In the <code>fast-async-await.html</code> example, <code>timeTest()</code> looks like this:</p> +<p>Во втором <code>fast-async-await.html</code> примере, функция <code>timeTest()</code> выглядит как:</p> <pre class="brush: js notranslate">async function timeTest() { const timeoutPromise1 = timeoutPromise(3000); @@ -349,17 +353,17 @@ timeTest().then(() => { await timeoutPromise3; }</pre> -<p>Here we store the three <code>Promise</code> objects in variables, which has the effect of setting off their associated processes all running simultaneously.</p> +<p>В данном случае мы храмим три объекта <code>Promise</code> в переменных, каждый из которых может разрешиться независимо от других.</p> -<p>Next, we await their results — because the promises all started processing at essentially the same time, the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over 3 seconds!</p> +<p>Ниже мы ожидаем разрешения промисов из объекта в результат, так как они были запущенны одновременно, блокируя поток, то и разрешатся одновременно. Если вы запустите вроторой приимер вы увидите alert, сообщающий время выполнения около 3 секунд.</p> -<p>You'll have to test your code carefully, and bear this in mind if performance starts to suffer.</p> +<p>Важно не забывать о быстродействии применяя await, проверяйте количество блокировок.</p> -<p>Another minor inconvenience is that you have to wrap your awaited promises inside an async function.</p> +<p> + </p><h2 id="Asyncawait_class_methods">Async/await class methods</h2> -<h2 id="Asyncawait_class_methods">Async/await class methods</h2> -<p>As a final note before we move on, you can even add <code>async</code> in front of class/object methods to make them return promises, and <code>await</code> promises inside them. Take a look at the <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code we saw in our object-oriented JavaScript article</a>, and then look at our modified version with an <code>async</code> method:</p> +<p>В качестве последнего замечания, вы можете использовать <code>async</code> перед методами классов или объектов, вынуждая их возвращать promises. А также await внутри методов объявленных такиим образом. Посмотрите на пример <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code, который мы наблюдали в статье object-oriented JavaScript</a>, и сравниете его с модифицированной (асинхронной) <code>async</code> версией ниже:</p> <pre class="brush: js notranslate">class Person { constructor(first, last, age, gender, interests) { @@ -383,19 +387,19 @@ timeTest().then(() => { let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre> -<p>The first class method could now be used something like this:</p> +<p>Первый метод класса теперь можно использовать таким образом:</p> <pre class="brush: js notranslate">han.greeting().then(console.log);</pre> -<h2 id="Browser_support">Browser support</h2> +<h2 id="Browser_support_Поддержка_браузерами">Browser support (Поддержка браузерами)</h2> <p>One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.</p> <p>If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.</p> -<h2 id="Conclusion">Conclusion</h2> +<h2 id="Заключение">Заключение</h2> -<p>And there you have it — async/await provide a nice, simplified way to write async code that is simpler to read and maintain. Even with browser support being more limited than other async code mechanisms at the time of writing, it is well worth learning and considering for use, both for now and in the future.</p> +<p>Вот пожалуй и все - async/await позволяют писать асинхронный код, который легче читать и поддерживать. Даже учитывая, что поддержка со стороны браузеров несколько хуже, чем у promise.then, все же стоит обратить на него внимание.</p> <p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p> diff --git a/files/ru/web/css/url/index.html b/files/ru/web/css/url/index.html index da5bae7c33..82965bf827 100644 --- a/files/ru/web/css/url/index.html +++ b/files/ru/web/css/url/index.html @@ -5,7 +5,8 @@ tags: - Адрес - Типы данных - относительный адрес -translation_of: Web/CSS/url +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url --- <div>{{CssRef}}</div> diff --git a/files/ru/web/mathml/примеры/mathml_pythagorean_theorem/index.html b/files/ru/web/mathml/примеры/mathml_pythagorean_theorem/index.html index 7a8599e2e0..185702052e 100644 --- a/files/ru/web/mathml/примеры/mathml_pythagorean_theorem/index.html +++ b/files/ru/web/mathml/примеры/mathml_pythagorean_theorem/index.html @@ -9,6 +9,9 @@ tags: - Math education - MathML - NeedsBeginnerUpdate + - Гайд + - Начинающий + - Пример translation_of: Web/MathML/Examples/MathML_Pythagorean_Theorem --- <p>Сейчас мы докажем Теорему Пифагора:</p> |