diff options
| author | Alexey Istomin <webistomin@gmail.com> | 2021-03-20 18:37:44 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-03-20 18:37:44 +0300 |
| commit | 841aae260382e2bf5ebb44d765d8c7301d27caab (patch) | |
| tree | 81a92c25f6dc02e5f119131785d721db79fc3455 /files/ru/learn/html/multimedia_and_embedding | |
| parent | 730fea852ff827ca034fe17c84288c95d270ec92 (diff) | |
| download | translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.gz translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.bz2 translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.zip | |
Restore "ё" letter in Russian translation (#239)
* docs(ru): restore ё letter
* docs(ru): resolve conflicts
* refactor(idea): remove ide folder
Diffstat (limited to 'files/ru/learn/html/multimedia_and_embedding')
8 files changed, 67 insertions, 67 deletions
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 </table> <div class="note"> -<p><strong>Примечание</strong>: Данная статья не научит Вас векторной графике, а даст понимание что это и как ее использовать в веб-документах.</p> +<p><strong>Примечание</strong>: Данная статья не научит Вас векторной графике, а даст понимание что это и как её использовать в веб-документах.</p> </div> <h2 id="Что_такое_векторная_графика">Что такое векторная графика?</h2> @@ -34,7 +34,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p>В веб-разработке Вы будете сталкиваться с двумя типами изображений - растровым и векторным:</p> <ul> - <li>Растровое изображение задается сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)</li> + <li>Растровое изображение задаётся сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)</li> <li>Векторное изображение определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер может вычислить как должно выглядеть изображение, когда выводится на экран.{{glossary("SVG")}} формат позволяет нам создавать векторную графику для использования в веб-документах.</li> </ul> @@ -56,7 +56,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a> это язык на базе {{glossary("XML")}} для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае, Вы можете использовать элементы для создания простых фигур, таких как {{svgelement("circle")}}(круг) и {{svgelement("rect")}}(прямоугольник). Более сложные SVG элементы включают {{svgelement("feColorMatrix")}} (разложение цвета с использованием матрицы), {{svgelement("animate")}} (анимация частей Вашего векторного изображения) и {{svgelement("mask")}} (применение маски к изображению.)</p> -<p>В качестве простого примера, следующий код создает круг и прямоугольник:</p> +<p>В качестве простого примера, следующий код создаёт круг и прямоугольник:</p> <pre class="brush: html notranslate"><svg version="1.1" baseProfile="full" @@ -75,7 +75,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <p>Дополнительные преимущества SVG:</p> <ul> - <li>Текст в векторном изображении остается машинописным (то есть доступным для поисковика, что улучшает {{glossary("SEO")}}).</li> + <li>Текст в векторном изображении остаётся машинописным (то есть доступным для поисковика, что улучшает {{glossary("SEO")}}).</li> <li>SVG легко поддаются стилизации/программированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.</li> </ul> @@ -99,7 +99,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <h3 id="Быстрый_путь_htmlelementimg">Быстрый путь: {{htmlelement("img")}}</h3> -<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> +<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 notranslate"><img src="equilateral.svg" @@ -118,7 +118,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <ul> <li>Вы не можете изменять изображение с помощью JavaScript.</li> - <li>Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своем SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)</li> + <li>Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своём SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)</li> <li>Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например <code>:focus</code>).</li> </ul> @@ -128,7 +128,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphi <pre class="brush: html notranslate"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> -<p>Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведенном коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:</p> +<p>Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведённом коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:</p> <pre class="brush: css notranslate"><code>background: url("fallback.png") no-repeat center;</code> background<code>-image: url("image.svg"); @@ -140,7 +140,7 @@ background-size: contain;</code></pre> <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> +<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 notranslate"><svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> @@ -150,7 +150,7 @@ background-size: contain;</code></pre> <h4 id="Плюсы_2">Плюсы</h4> <ul> - <li>Вставка вашего SVG путем <strong>SVG inline </strong>позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.</li> + <li>Вставка вашего SVG путём <strong>SVG inline </strong>позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.</li> <li>Вы можете присваивать <code>class</code>-ы и <code>id</code> элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо <span class="tlid-translation translation" lang="ru"><span title="">внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой</span></span> <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Presentation_attributes">атрибут представления SVG </a>как свойство CSS.</li> <li><strong>SVG inline </strong>единственный метод, который позволяет вам использовать CSS-взаимодействия (как <code>:focus</code>) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей).</li> <li>Вы можете разметить SVG как гиперссылку, обернув в элемент {{htmlelement("a")}}.</li> @@ -178,7 +178,7 @@ background-size: contain;</code></pre> <img src="triangle.png" alt="Triangle with three unequal sides" /> </iframe></pre> -<p>Это - определенно не самый лучший метод для выбора:</p> +<p>Это - определённо не самый лучший метод для выбора:</p> <h4 id="Минусы_3">Минусы</h4> @@ -189,7 +189,7 @@ background-size: contain;</code></pre> <h2 id="Активное_изучение_поиграйте_с_SVG">Активное изучение: поиграйте с SVG</h2> -<p>В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области <em>Input,</em> вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А еще вы можете посетить <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящен практике ваших исследовательских навыков и вашему развлечению.</p> +<p>В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области <em>Input,</em> вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А ещё вы можете посетить <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящён практике ваших исследовательских навыков и вашему развлечению.</p> <p>Если Вы где-то застряли и ваш код не работает, Вы всегда можете начать сначала, нажав кнопку <em>Reset</em>.</p> @@ -324,7 +324,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/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 <li>пока у вас не будет достаточно доказательств что изображение находится в открытом доступе.</li> </ul> -<p>Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своем атрибуте <code>src</code> ссылку на изображение, размещенное на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу и не позволяет вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.</p> +<p>Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своём атрибуте <code>src</code> ссылку на изображение, размещённое на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу и не позволяет вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.</p> </div> <p>Наш код выше даст нам следующий результат:</p> @@ -77,7 +77,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <h3 id="Альтернативный_текст">Альтернативный текст</h3> -<p>Следующий атрибут, который мы рассмотрим — <code>alt</code>. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута <code>alt</code> на практике, внесем изменения в код из предыдущего примера:</p> +<p>Следующий атрибут, который мы рассмотрим — <code>alt</code>. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута <code>alt</code> на практике, внесём изменения в код из предыдущего примера:</p> <pre class="notranslate"><img src="images/dinosaur.jpg" alt="Голова и туловище скелета динозавра; @@ -85,14 +85,14 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <p>Самый простой способ увидеть атрибут <code>alt</code> в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как <code>dinosooooor.jpg</code>, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута <code>alt</code>:</p> -<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;">Итак, в каких случаях текст из атрибута <code>alt</code> может быть нам полезен? Приведем несколько примеров:</p> +<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;">Итак, в каких случаях текст из атрибута <code>alt</code> может быть нам полезен? Приведём несколько примеров:</p> <ul> <li>Пользователь с нарушением зрения использует <a href="https://en.wikipedia.org/wiki/Screen_reader">устройство чтения с экрана</a>, которое может читать вслух описание элементов веб-страницы. На самом деле, наличие текста в атрибуте <code>alt</code> для описания изображения может быть полезно для большинства пользователей.</li> <li>В случае, если была допущена ошибка в имени файла или пути к нему (как было описано выше).</li> <li>Браузер не поддерживает формат данного изображения. Некоторые люди до сих пор используют текстовые браузеры, такие как <a href="https://en.wikipedia.org/wiki/Lynx_%28web_browser%29">Lynx</a>, которые вместо изображений отображают текст из атрибута <code>alt</code>.</li> <li>Если вы хотите добавить возможность найти ваше изображение с помощью поисковых систем. Например, поисковые системы могут искать совпадения поисковых запросов с текстом атрибута <code>alt</code>.</li> - <li>Если пользователи отключили отображение изображений на странице для уменьшения объема передаваемых данных и для сокрытия элементов, отвлекающих внимание. Это обычная практика для пользователей мобильных телефонов, а также в странах с маленькой пропускной способностью интернет-каналов и с высокой стоимостью интернет-трафика.</li> + <li>Если пользователи отключили отображение изображений на странице для уменьшения объёма передаваемых данных и для сокрытия элементов, отвлекающих внимание. Это обычная практика для пользователей мобильных телефонов, а также в странах с маленькой пропускной способностью интернет-каналов и с высокой стоимостью интернет-трафика.</li> </ul> <p>Что именно вы должны писать в атрибут <code>alt</code>? В первую очередь, это зависит от того, <em>зачем</em> изображение вообще находится на странице. Другими словами, что вы потеряете, если ваше изображение не появится:</p> @@ -100,7 +100,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <ul> <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> Если вы помещаете изображение в {{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> </ul> @@ -126,7 +126,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM <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> @@ -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"></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> @@ -241,7 +241,7 @@ window.addEventListener("load", drawOutput); <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" @@ -262,7 +262,7 @@ window.addEventListener("load", drawOutput); <p>Тег <figure> не является изображением. Он представляет собой независимый структурный элемент, который: </p> <ul> - <li>Передает смысл компактным, интуитивно понятным способом.</li> + <li>Передаёт смысл компактным, интуитивно понятным способом.</li> <li>Может использоваться в различных местах страницы.</li> <li>Предоставляет ценную информацию, поддерживающую основной текст.</li> </ul> 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: >- <p>Если вы хотите, чтобы ваша работа была оценена, или если вы застряли и хотите обратиться за помощью:</p> <ol> - <li>Поместите свою работу в онлайн-редактор, например <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведенных выше разделах.</li> + <li>Поместите свою работу в онлайн-редактор, например <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведённых выше разделах.</li> <li>Напишите сообщение с просьбой об оценке и / или помощи в <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваш пост должен включать: <ul> <li>Описательный заголовок, например "Требуется оценка для проверки навыков 1 по основам изображений HTML".</li> 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 <p>Далее мы рассмотрим, как использовать элементы HTML5 {{htmlelement ("video")}} и {{htmlelement ("audio")}} для встраивания видео и аудио на наши страницы, включая основы, обеспечивая доступ к различным форматам файлов для разных браузеров, добавление подписей и субтитров, а также как добавить резервные копии для старых браузеров.</p> </dd> <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От <object> к <iframe> — другие технологии встраивания</a></dt> - <dd>В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все еще часто встречаемая.</dd> + <dd>В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все ещё часто встречаемая.</dd> <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Добавление_r_graphics_to_the_Web">Добавление векторной графики в Веб</a></dt> - <dd>Векторная графика может быть очень полезной в определенных ситуациях. В отличие от обычных форматов типа PNG/JPG, она не деформируются/пикселизируются при растяжении, она остаётся гладкой при масштабировании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.</dd> + <dd>Векторная графика может быть очень полезной в определённых ситуациях. В отличие от обычных форматов типа PNG/JPG, она не деформируются/пикселизируются при растяжении, она остаётся гладкой при масштабировании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a></dt> <dd> <p>В этой статье мы познакомимся с концепцией адаптивных изображений - изображений, которые хорошо работают на устройствах с сильно различающимися размерами экрана, разрешением и другими подобными характеристиками, и рассмотрим, какие инструменты предоставляет HTML для их реализации. Это помогает повысить производительность различных устройств. Адаптивные изображения - это всего лишь одна часть адаптивного дизайна, будущей темы CSS, которую вы должны изучить.</p> @@ -44,7 +44,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding <dl> <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/заставка_Mozilla">Страница приветствия Mozilla</a></dt> - <dd>В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвященную Mozilla!</dd> + <dd>В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвящённую Mozilla!</dd> </dl> <h2 id="Смотри_также">Смотри также</h2> @@ -54,6 +54,6 @@ translation_of: Learn/HTML/Multimedia_and_embedding <dd>Карта изображения предоставляет способ разделить изображение на части, которые ссылаются на разные места (представьте себе географическую карту, которая показывает подробную информацию о каждой стране, когда вы кликаете на нее.) Эта технология иногда может быть полезной.</dd> <dt><a href="https://learning.mozilla.org/en-US/activities/web-lit-basics-two/">Основы Веб-грамотности 2</a></dt> <dd> - <p>Превосходный курс от фонда Mozilla, который освещает и проверяет некоторые навыки, полученные в модуле <em>Мультимедиа и встраивание</em>. Погрузитесь глубже в основы верстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.</p> + <p>Превосходный курс от фонда Mozilla, который освещает и проверяет некоторые навыки, полученные в модуле <em>Мультимедиа и встраивание</em>. Погрузитесь глубже в основы вёрстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.</p> </dd> </dl> 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 <p>Сохраните изображения из папки <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> тем же способом; возможно вы захотите сохранить их в другой папке пока не обработаете (некоторые из них) с помощью графического редактора.</p> <div class="note"> -<p><strong>Note</strong>: Приведенный для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.</p> +<p><strong>Note</strong>: Приведённый для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.</p> </div> <h2 id="Описание_проекта">Описание проекта</h2> -<p>В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углубленного ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:</p> +<p>В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углублённого ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:</p> <h3 id="Подготовка_изображений">Подготовка изображений</h3> @@ -77,7 +77,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla <p><strong>Note</strong>: Для проверки правильности работы <code>srcset</code>/<code>sizes</code> , вам нужно загрузить ваш сайт на сервер (используйте <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> - простое и бесплатное решение). Затем вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в <a href="/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">Responsive images: useful developer tools</a>.</p> </div> -<h3 id="Искусственно_измененная_красная_панда">Искусственно измененная красная панда</h3> +<h3 id="Искусственно_изменённая_красная_панда">Искусственно изменённая красная панда</h3> <p>Внутри элемента {{htmlelement("div")}} с классом <code>red-panda</code>, мы хотим поместить элемент {{htmlelement("picture")}} , который использует маленькое портретное изображение панды, если экран меньше или равен 600px, либо большое фоновое изображение.</p> 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 <ol> <li>Сначала перейдите на Youtube и найдите понравившееся вам видео.</li> - <li>Под видео вы найдете кнопку «Поделиться» - нажмите, чтобы отобразить параметры совместного доступа.</li> + <li>Под видео вы найдёте кнопку «Поделиться» - нажмите, чтобы отобразить параметры совместного доступа.</li> <li>Выберите кнопку «Вставить», и вам будет предоставлен код <iframe> - скопируйте его.</li> <li>Вставьте его в поле ввода ниже и посмотрите на результат в Output.</li> </ol> @@ -53,7 +53,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies <li>Вставьте его в поле ввода ниже и посмотрите на результат в Output.</li> </ol> -<p>Если вы допустили ошибку, вы всегда можете сбросить ее с помощью кнопки «Сброс». Если вы действительно застряли, нажмите кнопку «Показать решение», чтобы увидеть ответ.</p> +<p>Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки «Сброс». Если вы действительно застряли, нажмите кнопку «Показать решение», чтобы увидеть ответ.</p> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> @@ -179,7 +179,7 @@ textarea.onkeyup = function(){ <p>Итак, это было легко и весело, не так ли? Элементы {{htmlelement ("iframe")}} предназначены для размещения других веб-документов в текущем документе. Это отлично подходит для включения стороннего контента на ваш сайт, который, возможно, не имеет прямого контроля и не хочет реализовывать вашу собственную версию - например, видео от поставщиков онлайн-видео, системы комментариев, такие как Disqus, карты от поставщиков онлайн-карт, рекламных баннеров и т. д. Живые редактируемые примеры, которые вы использовали в этом курсе, реализованы с помощью <iframe>.</p> -<p>Есть несколько серьезных {{anch("Проблемы безопасности", "Проблем безопасности")}} при использовании <iframe>, которые мы обсудим ниже, но это не значит, что вы не должны использовать их на своих сайтах - они просто требуют некоторых знаний и тщательного обдумывания. Давайте рассмотрим код немного подробнее. Скажем, вы хотите добавить глоссарий MDN на одну из своих веб-страниц. Вы можете попробовать что-то вроде этого:</p> +<p>Есть несколько серьёзных {{anch("Проблемы безопасности", "Проблем безопасности")}} при использовании <iframe>, которые мы обсудим ниже, но это не значит, что вы не должны использовать их на своих сайтах - они просто требуют некоторых знаний и тщательного обдумывания. Давайте рассмотрим код немного подробнее. Скажем, вы хотите добавить глоссарий MDN на одну из своих веб-страниц. Вы можете попробовать что-то вроде этого:</p> <pre class="notranslate"><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" width="100%" height="500" frameborder="0" @@ -193,7 +193,7 @@ textarea.onkeyup = function(){ <dl> <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt> - <dd>Если установлено, <iframe> может быть помещен в полноэкранный режим с использованием полноэкранного API (что несколько выходит за рамки этой статьи).</dd> + <dd>Если установлено, <iframe> может быть помещён в полноэкранный режим с использованием полноэкранного API (что несколько выходит за рамки этой статьи).</dd> <dt>{{htmlattrxref('frameborder','iframe')}}</dt> <dd>Если установлено значение 1, это указывает браузеру нарисовать границу между этим фреймом и другими фреймами, что является поведением по умолчанию. 0 удаляет границу. Использование этого на самом деле не рекомендуется, так как тот же эффект можно улучшить, используя {{cssxref ('border')}}: none; в {{Glossary ('CSS')}}.</dd> <dt>{{htmlattrxref('src','iframe')}}</dt> @@ -201,7 +201,7 @@ textarea.onkeyup = function(){ <dt>{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}</dt> <dd>Эти атрибуты определяют ширину и высоту, в которых вы хотите использовать iframe.</dd> <dt>Резервный контент</dt> - <dd>Точно так же, как и другие подобные элементы, такие как {{htmlelement ("video")}}, вы можете включить резервный контент между тегами открытия и закрытия <iframe> </ iframe>, которые появятся, если браузер не поддерживает < IFRAME>. В этом случае мы включили ссылку на страницу. Вряд ли вы столкнетесь с таким браузером, который не поддерживает <iframe> в наше время.</dd> + <dd>Точно так же, как и другие подобные элементы, такие как {{htmlelement ("video")}}, вы можете включить резервный контент между тегами открытия и закрытия <iframe> </ iframe>, которые появятся, если браузер не поддерживает < IFRAME>. В этом случае мы включили ссылку на страницу. Вряд ли вы столкнётесь с таким браузером, который не поддерживает <iframe> в наше время.</dd> <dt>{{htmlattrxref('sandbox','iframe')}}</dt> <dd>Этот атрибут, который работает в более современных браузерах, чем остальные функции <iframe> (например, IE 10 и выше). Он запрашивает повышенные настройки безопасности. Об этом мы расскажем в следующем разделе.</dd> </dl> @@ -212,7 +212,7 @@ textarea.onkeyup = function(){ <h3 id="Проблемы_безопасности">Проблемы безопасности</h3> -<p>Выше мы упомянули о проблемах безопасности. Давайте рассмотрим это чуть подробнее. Мы не ожидаем, что вы всё поймете с первого раза. Мы просто хотим сообщить вам о проблеме и предоставить ссылку, чтобы вы могли вернуться к ней, когда станете более опытными и начнете рассматривать использование iframe в своих экспериментах и работе. Кроме того, нет необходимости бояться и не использовать <iframe> - вам просто нужно быть осторожным. Продолжим...</p> +<p>Выше мы упомянули о проблемах безопасности. Давайте рассмотрим это чуть подробнее. Мы не ожидаем, что вы всё поймёте с первого раза. Мы просто хотим сообщить вам о проблеме и предоставить ссылку, чтобы вы могли вернуться к ней, когда станете более опытными и начнёте рассматривать использование iframe в своих экспериментах и работе. Кроме того, нет необходимости бояться и не использовать <iframe> - вам просто нужно быть осторожным. Продолжим...</p> <p>Разработчики браузеров и веб-разработчики на горьком опыте усвоили, что iframe - частая цель (официальный термин: вектор атаки) плохих людей в Интернете (часто называемых хакерами, или, более точно, крекерами) для атаки при попытке злонамеренно изменить ваши веб-страницы или обманом заставить посетителей делать то, чего они не хотят, например, раскрыть конфиденциальную информацию вроде имени пользователя и пароли. Чтобы избежать этого, авторы спецификаций и разработчики браузеров разработали различные механизмы безопасности для обеспечения защиты <iframe>, лучшие из которых мы рассмотрим ниже.</p> @@ -220,7 +220,7 @@ textarea.onkeyup = function(){ <p>{{interwiki('wikipedia','Clickjacking')}} – это один из видов обычной атаки iframe, когда хакеры внедряют невидимый iframe в ваш документ (или внедряют ваш документ на свой собственный вредоносный веб-сайт) и используют его для захвата взаимодействия пользователей. Это обычный способ ввести пользователей в заблуждение или украсть конфиденциальные данные.</p> </div> -<p>Быстрый пример - попробуйте загрузить предыдущий пример, который мы показали выше, в ваш браузер (вы можете найти его живой пример на Github (см. Также исходный код). На самом деле, вы ничего не увидите на странице, т.к. если вы посмотрите в консоль в инструментах разработчика браузера, вы увидите сообщение, объясняющее вам, почему. В Firefox вы получите сообщение <em>«Отказано в доступе» в связи с X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary не разрешает кадрирование</em>. Это связано с тем, что разработчики, которые построили MDN, включили параметр на сервере, который обслуживает страницы веб-сайта, запрещая им внедряться внутри <iframe> (см. {{Anch ("Настройка директивы CSP")}} ниже). Суть здесь такова - целой странице MDN на самом деле нет смысла встраиваться в другие страницы - конечно, если вы не хотите сделать что-то вроде встраивания их на свой сайт и выставлять их как свои собственные; или пытаться украсть данные с помощью clickjacking, что очень плохо. Плюс, если все начнут это делать, вся дополнительная пропускная способность начнет стоить Mozilla больших денег.</p> +<p>Быстрый пример - попробуйте загрузить предыдущий пример, который мы показали выше, в ваш браузер (вы можете найти его живой пример на Github (см. Также исходный код). На самом деле, вы ничего не увидите на странице, т.к. если вы посмотрите в консоль в инструментах разработчика браузера, вы увидите сообщение, объясняющее вам, почему. В Firefox вы получите сообщение <em>«Отказано в доступе» в связи с X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary не разрешает кадрирование</em>. Это связано с тем, что разработчики, которые построили MDN, включили параметр на сервере, который обслуживает страницы веб-сайта, запрещая им внедряться внутри <iframe> (см. {{Anch ("Настройка директивы CSP")}} ниже). Суть здесь такова - целой странице MDN на самом деле нет смысла встраиваться в другие страницы - конечно, если вы не хотите сделать что-то вроде встраивания их на свой сайт и выставлять их как свои собственные; или пытаться украсть данные с помощью clickjacking, что очень плохо. Плюс, если все начнут это делать, вся дополнительная пропускная способность начнёт стоить Mozilla больших денег.</p> <h4 id="Используйте_только_при_необходимости">Используйте только при необходимости</h4> @@ -237,8 +237,8 @@ textarea.onkeyup = function(){ <p>{{Glossary("HTTPS")}} это зашифрованная версия {{Glossary("HTTP")}}. <span id="result_box" lang="ru"><span>Вы должны обслуживать свои веб-сайты, используя HTTPS, всегда, когда это возможно</span></span> :</p> <ol> - <li>HTTPS уменьшает вероятность того, что контент был изменен по пути;</li> - <li>HTTPS запрещает доступ внедренного контента к контенту в вашем исходном документе и наоборот.</li> + <li>HTTPS уменьшает вероятность того, что контент был изменён по пути;</li> + <li>HTTPS запрещает доступ внедрённого контента к контенту в вашем исходном документе и наоборот.</li> </ol> <p>Использование HTTPS требует сертификат безопасности, что может обходиться в копеечку (хотя есть <a href="https://letsencrypt.org/">Let's Encrypt</a>, что облегчает задачу). Если вы не можете его получить, вы можете отдавать свой родительский документ с помощью HTTP. Однако, из-за второго преимущества HTTPS <em>во что бы то ни стало</em> вы не должны внедрять сторонний контент с HTTP. (В лучшем случае ваш браузер выдаст угрожающее предупреждение.) Все уважаемые компании, которые делают контент доступным для внедрения через <iframe>, доступны через HTTPS - посмотрите URL-адреса внутри <iframe> src при встраивании, например, содержимого из Карт Google или Youtube.</p> @@ -256,7 +256,7 @@ textarea.onkeyup = function(){ <p>Если это необходимо, вы можете добавлять разрешения один за другим (внутри значения атрибута <code>sandbox=""</code>) — смотри {{htmlattrxref('sandbox','iframe')}} ссылка для всех доступных опций. Важно отметить, что вы <em>никогда</em> не должны добавлять атрибуты <code>allow-scripts</code> и <code>allow-same-origin</code> в свой <code>sandbox</code> атрибут одновременно — в таком случае, встроенный контент может обходить политику безопасности, которая запрещает сайтам выполнять скрипты и использовать JavaScript для отключения "песочницы" sandbox .</p> <div class="note"> -<p>Примечание. "Песочница" не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определенный контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого {{glossary("domain")}} на ваш основной сайт.</p> +<p>Примечание. "Песочница" не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определённый контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого {{glossary("domain")}} на ваш основной сайт.</p> </div> <h4 id="Настройка_директив_CSP"><span id="result_box" lang="ru"><span>Настройка директив CSP</span></span></h4> @@ -275,7 +275,7 @@ textarea.onkeyup = function(){ <p><span id="result_box" lang="ru"><span><strong>Примечание</strong>. <strong>Плагин </strong>- это программное обеспечение, обеспечивающее доступ к контенту, который браузер не может читать изначально.</span></span></p> </div> -<p>Тем не менее, вы вряд ли будете использовать эти элементы очень часто. Апплеты не использовались годами, Flash в настоящее время не очень популярен из-за ряда причин (см. {{Anch ("Случай с плагинами")}}, ниже), PDF-файлы, как правило, лучше открывать по ссылке, а другой контент - такой, как изображения и видео, могут обрабатываться намного проще. Плагины и эти методы внедрения действительно являются устаревшими технологиями, и мы упоминаем их здесь на случай, если вы столкнетесь с ними в определенных обстоятельствах, таких как интрасети или корпоративные проекты.</p> +<p>Тем не менее, вы вряд ли будете использовать эти элементы очень часто. Апплеты не использовались годами, Flash в настоящее время не очень популярен из-за ряда причин (см. {{Anch ("Случай с плагинами")}}, ниже), PDF-файлы, как правило, лучше открывать по ссылке, а другой контент - такой, как изображения и видео, могут обрабатываться намного проще. Плагины и эти методы внедрения действительно являются устаревшими технологиями, и мы упоминаем их здесь на случай, если вы столкнётесь с ними в определённых обстоятельствах, таких как интрасети или корпоративные проекты.</p> <p><span id="result_box" lang="ru"><span>Если вам нужно внедрить контент плагина, ниже исчерпывающая информация, которая вам понадобится:</span></span></p> @@ -343,7 +343,7 @@ textarea.onkeyup = function(){ <h3 id="Дело_против_плагинов"><span class="short_text" id="result_box" lang="ru"><span>Дело против плагинов</span></span></h3> -<p>Когда-то плагины были незаменимы в Интернете. Помните дни, когда вам приходилось устанавливать Adobe Flash Player для просмотра онлайн-фильма? И потом постоянно возникали раздражающие предупреждения об обновлении Flash Player и Java Runtime Environment. С тех пор веб-технологии стали намного надежнее. Почти всем сервисам пришло время прекратить доставлять контент с помощью плагинов и вместо этого использовать веб-технологии.</p> +<p>Когда-то плагины были незаменимы в Интернете. Помните дни, когда вам приходилось устанавливать Adobe Flash Player для просмотра онлайн-фильма? И потом постоянно возникали раздражающие предупреждения об обновлении Flash Player и Java Runtime Environment. С тех пор веб-технологии стали намного надёжнее. Почти всем сервисам пришло время прекратить доставлять контент с помощью плагинов и вместо этого использовать веб-технологии.</p> <ul> <li><strong>Расширьте свою досягаемость для всех</strong>. У каждого есть браузер, но плагины используются все реже, особенно среди мобильных пользователей. Поскольку Web в значительной степени можно использовать без плагинов, люди предпочли бы просто перейти на сайты ваших конкурентов, чем установить плагин.</li> @@ -355,7 +355,7 @@ textarea.onkeyup = function(){ <h2 id="Заключение">Заключение</h2> -<p>Тема встраивания другого контента в веб-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить ее простым, знакомым способом, который сразу же станет актуальным, но все же намекает на некоторые из более сложных функций вовлеченных технологий. Начнем с того, что вы вряд ли будете использовать большое количество встраивании стороннего контента, помимо встроенных карт и видео на своих страницах.</p> +<p>Тема встраивания другого контента в веб-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить её простым, знакомым способом, который сразу же станет актуальным, но все же намекает на некоторые из более сложных функций вовлечённых технологий. Начнём с того, что вы вряд ли будете использовать большое количество встраивании стороннего контента, помимо встроенных карт и видео на своих страницах.</p> <p>Существует много других технологий, которые включают в себя внедрение внешнего контента, помимо тех, которые мы обсуждали здесь. Мы видели некоторые из ранних статей, например {{htmlelement ("video")}}, {{htmlelement ("audio")}} и {{htmlelement ("img")}}, но есть и другие. Например, {{htmlelement ("canvas")}} для 2D-и 3D-графики, сгенерированной JavaScript, и {{SVGElement ("svg")}} для встраивания векторной графики. Мы рассмотрим SVG в следующей статье модуля.</p> diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html index 654c0496b0..3f4ad83e69 100644 --- a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -33,7 +33,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p>Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">посмотреть демо-пример</a> и найти <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">исходный код</a> на Github.) Мы не будем подробно рассматривать CSS, скажем только следующее:</p> <ul> - <li>Содержимому тега <code>main</code> задана максимальная ширина 1200 пикселей. Если окно браузера выше этой ширины, то содержимое сайта остается на 1200 пикселей и центрирует себя в доступном пространстве. Если окно браузера ниже этой ширины, содержимое устанавливается в 100% от ширины экрана.</li> + <li>Содержимому тега <code>main</code> задана максимальная ширина 1200 пикселей. Если окно браузера выше этой ширины, то содержимое сайта остаётся на 1200 пикселей и центрирует себя в доступном пространстве. Если окно браузера ниже этой ширины, содержимое устанавливается в 100% от ширины экрана.</li> <li>Изображение в шапке всегда будет оставаться в центре тега header вне зависимости от ширины браузера. Если сайт будет просматриваться на узких экранах, то важные детали в центре изображения (люди) все равно будут видны. Все, что выходит за пределы ширины экрана будет скрыто. Высота шапки 200 пикселей.</li> <li>Изображения в содержимом заданы так, что если ширина body становится меньше чем ширина изображения, то изображения начинают сжиматься и остаются всегда внутри body и не выступают за его пределы.</li> </ul> @@ -46,7 +46,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <p>Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется <strong>resolution switching problem</strong> — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">векторную графику</a>, растровое изображение становится зернистым и выглядит ужасно, если оно отображается в размере большем, чем оригинальный (тогда как векторное изображение нет). В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате трафика — пользователи мобильных устройств будут грузить большое изображение для компьютера, вместо маленького для их устройства. Идеально было бы иметь несколько файлов в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к веб-сайту.</p> -<p>Сложность в том, что для некоторых устройств с большим разрешением экрана нужны изображения большего чем ожидается размера, чтобы четче отображалось. По сути это всё одна задача в разных условиях.</p> +<p>Сложность в том, что для некоторых устройств с большим разрешением экрана нужны изображения большего чем ожидается размера, чтобы чётче отображалось. По сути это всё одна задача в разных условиях.</p> <p>Можно предположить, что векторные изображения могли бы решить эти проблемы. В какой-то степени это так. У них небольшой вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее создать векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера подходят больше. </p> @@ -143,7 +143,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images width: 320px; }</pre> -<p>В этом случае, нет необходимости в <code>sizes</code> — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с <code>srcset</code>. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответствует) каждый CSS-пиксель, то будет загружено изображение <code>elva-fairy-320w.jpg</code> (применен x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение <code>elva-fairy-640w.jpg</code>. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.</p> +<p>В этом случае, нет необходимости в <code>sizes</code> — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с <code>srcset</code>. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответствует) каждый CSS-пиксель, то будет загружено изображение <code>elva-fairy-320w.jpg</code> (применён x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение <code>elva-fairy-640w.jpg</code>. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.</p> <h3 id="Художественное_оформление">Художественное оформление</h3> @@ -153,7 +153,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <pre class="brush: html notranslate"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></pre> -<p>Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code> и <code><audio></code></a>, элемент <code><picture></code> это обертка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента {{htmlelement("img")}}. Код <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> выглядит так:</p> +<p>Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code> и <code><audio></code></a>, элемент <code><picture></code> это обёртка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента {{htmlelement("img")}}. Код <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> выглядит так:</p> <pre class="brush: html notranslate"><picture> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> @@ -164,7 +164,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <ul> <li>Элемент <code><source></code> принимает атрибут <code>media</code>, который содержит медиа-условие; при помощи этих условий определяется, какое изображение будет выведено. В данном случае, если ширина viewport'a составит 799px или меньше, будет выведено изображение первого элемента <code><source></code>. Если ширина составит 800px и более — второго.</li> - <li>Атрибут <code>srcset</code> содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с <code><img></code> выше, <code><source></code> может принимать атрибуты <code>srcset</code> и <code>sizes</code> с несколько предопределенными изображениями. Так вы можете не только поместить группу изображений внутри элемента <code><picture></code>, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.</li> + <li>Атрибут <code>srcset</code> содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с <code><img></code> выше, <code><source></code> может принимать атрибуты <code>srcset</code> и <code>sizes</code> с несколько предопределёнными изображениями. Так вы можете не только поместить группу изображений внутри элемента <code><picture></code>, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.</li> <li>Вы всегда должны использовать элемент <code><img></code>, с <code>src</code> и <code>alt</code>, прямо перед <code></picture></code>, иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент <code><source>)</code> или браузер не поддерживает элемент <code><picture></code>.</li> </ul> @@ -185,7 +185,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images <h3 id="Смело_используйте_современные_форматы_изображений">Смело используйте современные форматы изображений</h3> -<p>Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удается сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.</p> +<p>Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удаётся сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.</p> <p><code><picture></code> позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута <code>type</code>, браузер сразу определит файлы такого типа как неподдерживаемые:</p> 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 d37ae96622..c6cf6331fd 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 @@ -61,7 +61,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <h3 id="Поддержка_нескольких_форматов">Поддержка нескольких форматов</h3> -<p>Присутствует одна проблема с приведенным выше примером, которую вы, возможно, уже заметили, если пытались получить доступ к прямой ссылке выше с помощью браузера, такого как Safari или Internet Explorer. Видео не будет воспроизводиться!</p> +<p>Присутствует одна проблема с приведённым выше примером, которую вы, возможно, уже заметили, если пытались получить доступ к прямой ссылке выше с помощью браузера, такого как Safari или Internet Explorer. Видео не будет воспроизводиться!</p> <p>Давайте кратко рассмотрим терминологию. Форматы, такие как MP3, MP4 и WebM, называются <strong>форматами контейнеров</strong>. Они содержат различные части, которые составляют всю песню или видео — например, звуковую дорожку, видеодорожку (в случае видео) и метаданные для описания представленного носителя.</p> @@ -75,15 +75,15 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <li>Более старый контейнер Ogg имеет тенденцию идти с аудио Ogg Vorbis и видео Ogg Theora. Поддерживалось главным образом в Firefox и Chrome, но было вытеснено более качественным форматом WebM.</li> </ul> -<p>Есть несколько особых случаев. Например, для некоторых типов аудио данные кодека часто хранятся без контейнера или с упрощенным контейнером. Одним из таких примеров является кодек FLAC, который чаще всего хранится в файлах FLAC, которые представляют собой просто необработанные дорожки FLAC.</p> +<p>Есть несколько особых случаев. Например, для некоторых типов аудио данные кодека часто хранятся без контейнера или с упрощённым контейнером. Одним из таких примеров является кодек FLAC, который чаще всего хранится в файлах FLAC, которые представляют собой просто необработанные дорожки FLAC.</p> -<p>Еще одна такая ситуация - всегда популярный файл MP3. «Файл MP3» на самом деле является звуковой дорожкой MPEG-1 Audio Layer III (MP3), хранящейся в контейнере MPEG или MPEG-2. Это особенно интересно, поскольку, хотя большинство браузеров не поддерживают использование мультимедиа MPEG в элементах {{HTMLElement ("video")}} и {{HTMLElement ("audio")}}, они могут поддерживать MP3 из-за его популярности.</p> +<p>Ещё одна такая ситуация - всегда популярный файл MP3. «Файл MP3» на самом деле является звуковой дорожкой MPEG-1 Audio Layer III (MP3), хранящейся в контейнере MPEG или MPEG-2. Это особенно интересно, поскольку, хотя большинство браузеров не поддерживают использование мультимедиа MPEG в элементах {{HTMLElement ("video")}} и {{HTMLElement ("audio")}}, они могут поддерживать MP3 из-за его популярности.</p> <p>Аудиоплеер обычно воспроизводит аудиодорожку напрямую, например файл MP3 или Ogg. Для этого не нужны контейнеры.</p> <h4 id="Поддержка_медиафайлов_в_браузерах">Поддержка медиафайлов в браузерах</h4> -<p>Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные {{Glossary("Codec","кодеки")}}, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придется предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.</p> +<p>Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные {{Glossary("Codec","кодеки")}}, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придётся предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.</p> <div class="note"> <p><strong>Примечание:</strong> Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года, так что браузеры, которые не являются держателями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.</p> @@ -93,9 +93,9 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <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>Ещё одна вещь, о которой следует помнить: мобильные браузеры могут поддерживать дополнительные форматы, не поддерживаемые их настольными эквивалентами, точно так же, как они могут не поддерживать все те же форматы, что и настольная версия. Вдобавок ко всему, как настольные, так и мобильные браузеры могут быть спроектированы так, чтобы разгрузить обработку воспроизведения мультимедиа (либо для всех мультимедиа, либо только для определённых типов, которые он не может обрабатывать внутренне). Это означает, что поддержка мультимедиа частично зависит от того, какое программное обеспечение установил пользователь.</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> +<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"> @@ -103,12 +103,12 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Ваш браузер не поддерживает HTML5 видео. Вот <a href="rabbit320.mp4">ссылка на видео</a> взамен.</p> </video></pre> -<p>Здесь мы изъяли атрибут <code>src</code> из нашего тега <code><video></code>, и вместо этого включали отдельные элементы {{htmlelement("source")}}, каждый из которых ссылается на собственный источник. В этом случае браузер пройдется по элементам <code><source></code> и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек. Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.</p> +<p>Здесь мы изъяли атрибут <code>src</code> из нашего тега <code><video></code>, и вместо этого включали отдельные элементы {{htmlelement("source")}}, каждый из которых ссылается на собственный источник. В этом случае браузер пройдётся по элементам <code><source></code> и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек. Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.</p> -<p>Каждый элемент <code><source></code> также имеет атрибут <code>type</code>. Он не обязательный, но рекомендуется его включать — он содержит {{glossary("MIME type","MIME types")}} видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если <code>type</code> не включен, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.</p> +<p>Каждый элемент <code><source></code> также имеет атрибут <code>type</code>. Он не обязательный, но рекомендуется его включать — он содержит {{glossary("MIME type","MIME types")}} видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если <code>type</code> не включён, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.</p> <div class="note"> -<p><strong>Примечание</strong>: Наша <a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">статья о поддерживаемых медиаформатах</a> описывает некоторые распространенные {{glossary("MIME type","MIME types")}}.</p> +<p><strong>Примечание</strong>: Наша <a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">статья о поддерживаемых медиаформатах</a> описывает некоторые распространённые {{glossary("MIME type","MIME types")}}.</p> </div> <h3 id="Другие_параметры_<video>">Другие параметры <video></h3> @@ -136,12 +136,12 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <dt><strong>{{htmlattrxref("loop","video")}}</strong></dt> <dd>Этот атрибут позволяет воспроизводить видео (или аудио) снова, когда он заканчивается. Это также может раздражать, поэтому используйте тогда, когда это действительно необходимо.</dd> <dt><strong>{{htmlattrxref("muted","video")}}</strong></dt> - <dd>Этот атрибут заставляет проигрыватель воспроизводить звук, отключенный по умолчанию.</dd> + <dd>Этот атрибут заставляет проигрыватель воспроизводить звук, отключённый по умолчанию.</dd> <dt><strong>{{htmlattrxref("poster","video")}}</strong></dt> <dd>Этот атрибут принимает в качестве значения URL-адрес изображения, который будет отображаться до воспроизведения видео. Он предназначен для заставки к видео или рекламы.</dd> <dt><strong>{{htmlattrxref("preload","video")}}</strong></dt> <dd> - <p>этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трех значений:</p> + <p>этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трёх значений:</p> <ul> <li><code>"none"</code> не буферизирует файл</li> @@ -151,7 +151,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content </dd> </dl> -<p>Вы можете найти приведенный выше пример для воспроизведения <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">на Github</a> (также <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">просмотрите исходный код</a>.) Обратите внимание, что мы не включили атрибут <code>autoplay</code> в live-версию - если видео начнет воспроизводиться, как только страница загрузится, вы не увидите заставку к видео!</p> +<p>Вы можете найти приведённый выше пример для воспроизведения <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">на Github</a> (также <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">просмотрите исходный код</a>.) Обратите внимание, что мы не включили атрибут <code>autoplay</code> в live-версию - если видео начнёт воспроизводиться, как только страница загрузится, вы не увидите заставку к видео!</p> <h3 id="Элемент_<audio>">Элемент <audio> </h3> @@ -178,11 +178,11 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <li>Он также не поддерживает атрибут <code>poster</code> опять же, из-за отсутствия визуального компонента. </li> </ul> -<p>Помимо этого, <code><audio></code> поддерживает все те же функции, что и <code><video></code> - просмотрите приведенные выше разделы для получения дополнительной информации о них.</p> +<p>Помимо этого, <code><audio></code> поддерживает все те же функции, что и <code><video></code> - просмотрите приведённые выше разделы для получения дополнительной информации о них.</p> <h2 id="Отображение_текстовых_дорожек_к_видео">Отображение текстовых дорожек к видео</h2> -<p>Теперь мы обсудим немного более продвинутую концепцию, о которой очень полезно знать. Многие люди не могут или не хотят слышать аудио или видео контент, который они находят в Интернете, по крайней мере, в определенное время. Например:</p> +<p>Теперь мы обсудим немного более продвинутую концепцию, о которой очень полезно знать. Многие люди не могут или не хотят слышать аудио или видео контент, который они находят в Интернете, по крайней мере, в определённое время. Например:</p> <ul> <li>У многих людей есть слуховые нарушения (более известные как слабослышащие или глухие).</li> @@ -196,11 +196,11 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <p><strong><strong>Замечание</strong>: </strong>"Транскрибировать" значит записывать устную речь в виде текста. Полученный текст представляет собой «стенограмму».</p> </div> -<p>WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле/позиционировании. Эти текстовые строки называются репликами, и вы можете отображать разные типы для разных целей, наиболее распространенными являются:</p> +<p>WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле/позиционировании. Эти текстовые строки называются репликами, и вы можете отображать разные типы для разных целей, наиболее распространёнными являются:</p> <dl> <dt><strong>субтитры</strong></dt> - <dd>Переводы иностранного материала, для людей, которые не понимают слов, произнесенных в аудио.</dd> + <dd>Переводы иностранного материала, для людей, которые не понимают слов, произнесённых в аудио.</dd> <dt><strong>титры</strong></dt> <dd>Синхронизированные транскрипции диалога или описания значимых звуков, чтобы люди, которые не могут слышать звук, поняли что происходит.</dd> <dt><strong>рассчитанные описания</strong></dt> @@ -226,7 +226,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <ol> <li>Сохраните его как <code>.vtt</code>- файл, в разумном месте.</li> - <li>Ссылка на файл <code>.vtt</code> с элементом {{htmlelement ("track")}}. <code><track></code> должен быть помещен в <code><audio></code> или <code><video></code>, но после элементов <code><source></code>. Используйте атрибут {{htmlattrxref ("kind", "track")}}, чтобы указать, являются ли реплики <code>субтитрами</code>, <code>титрами</code> или <code>описаниями</code>. Кроме того, используйте {{htmlattrxref ("srclang", "track")}}, чтобы сообщить браузеру, на каком языке вы записывали субтитры.</li> + <li>Ссылка на файл <code>.vtt</code> с элементом {{htmlelement ("track")}}. <code><track></code> должен быть помещён в <code><audio></code> или <code><video></code>, но после элементов <code><source></code>. Используйте атрибут {{htmlattrxref ("kind", "track")}}, чтобы указать, являются ли реплики <code>субтитрами</code>, <code>титрами</code> или <code>описаниями</code>. Кроме того, используйте {{htmlattrxref ("srclang", "track")}}, чтобы сообщить браузеру, на каком языке вы записывали субтитры.</li> </ol> <p>Вот пример:</p> @@ -238,7 +238,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content </video> </pre> -<p dir="ltr" id="tw-target-text">Это приведет к просмотру видео с субтитрами, таким как:</p> +<p dir="ltr" id="tw-target-text">Это приведёт к просмотру видео с субтитрами, таким как:</p> <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> @@ -250,7 +250,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <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> |