diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/mdn/contribute/howto | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/ru/mdn/contribute/howto')
12 files changed, 812 insertions, 0 deletions
diff --git a/files/ru/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/ru/mdn/contribute/howto/convert_code_samples_to_be_live/index.html new file mode 100644 index 0000000000..12970e3f48 --- /dev/null +++ b/files/ru/mdn/contribute/howto/convert_code_samples_to_be_live/index.html @@ -0,0 +1,30 @@ +--- +title: Как "оживить" примеры кода +slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live +translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live +--- +<div>{{MDNSidebar}}</div><p class="summary">MDN имеет систему «<a href="/ru/docs/MDN/Contribute/Editor/Live_samples">живых примеров</a>», где пример кода, показанный на странице, служит для отображения вывода этого же примера. Однако во многих существующих статьях есть примеры кода, которые еще не используют эту систему, и их необходимо преобразовать.</p> + +<p><span class="seoSummary">Живые примеры, позволяющие продемонстрировать работу кода, делают документацию более динамичной и наглядной. В этом руководстве описывается, как "оживить" существующие примеры.</span></p> + +<dl> + <dt><strong>Где это необходимо сделать?</strong></dt> + <dd>В статьях с тегом <a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a></dd> + <dt><strong>Что вам нужно знать, чтобы начать?</strong></dt> + <dd> + <ul> + <li>Понимание HTML, CSS и/или JavaScript, в зависимости от примера кода.</li> + <li>Способность использовать макросы <a href="/ru/docs/MDN/Contribute/Tools/KumaScript">KumaScript</a> в статьях MDN.</li> + </ul> + </dd> + <dd><strong>Что нужно для этого сделать?</strong></dd> + <dd> + <ol> + <li>Выберите статью из списка статей с тегами <a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a>, где есть пример кода, с понятной, для вас функцией.</li> + <li>Преобразуйте пример кода, чтоб он стал "живым".</li> + <li>Удалите любой код или изображение, которые использовались для наглядного примера вывода результата работы кода.</li> + </ol> + </dd> +</dl> + +<p>Подробнее об создании и редактировании живых примеров, см. <a href="/ru/docs/MDN/Contribute/Editor/Live_samples">Использование системы живых примеров</a></p> diff --git a/files/ru/mdn/contribute/howto/create_an_mdn_account/index.html b/files/ru/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..99857a600a --- /dev/null +++ b/files/ru/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,42 @@ +--- +title: Как создать MDN аккаунт +slug: MDN/Contribute/Howto/Create_an_MDN_account +tags: + - Документация + - Начинающий + - Руководство +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +<div>{{MDNSidebar}}</div> + +<p><span class="seoSummary">Чтобы вносить любые изменения в контент на MDN, вам будет нужен MDN профиль (для чтения и поиска сайту он не нужен). Данное руководство поможет вам создать ваш MDN профиль.</span></p> + +<div class="pull-aside"> +<div class="moreinfo"><strong>Дл чего MDN нужен адрес моей электронной почты?</strong><br> +<br> +Адрес вашей электронной почты используется для восстановления аккаунта. Иногда адрес может понадобиться администраторам MDN, чтобы написать вам по вопросам, связанным с вашим аккаунтом либо с вашей активностью на данном сайте.<br> +<br> +Кроме того, вы можете дополнительно подписаться на уведомления (например, <a href="/en-US/docs/MDN/Contribute/Howto/Watch_a_page">when specific pages are changed</a>) и сообщения (например, если вы решите присоединиться к нашей команде бета-тестирования, то сможете получать по электронной почте сведения о новых возможностях сайта, которые нужно протестировать).<br> +<br> +Адрес вашей электронной почты никогда не будет показан на MDN и будет использоваться только согласно нашей <a href="https://www.mozilla.org/privacy/websites/">политике конфиденциальности</a>.<br> + +<div class="note">Если вы вошли в MDN через аккаунт GitHub, и вы используете режим "noreply" в настройках почтового адреса на GitHub, вы <em>не получите</em> сообщений (включая оповещения от страниц, на которые вы подписаны) от MDN.</div> +</div> +</div> + +<ol> + <li>В верхней части каждой страницы MDN есть кнопка с надписью <strong>Войти</strong>. Наведите курсор мыши на неё (или нажмите на неё, если вы на мобильном устройстве), чтобы отобразить список сервисов, которые мы поддерживаем для регистрации в MDN.</li> + <li>Выберите аккаунт для того, чтобы <strong>Войти в систему</strong>. Сейчас доступны GitHub и Google. Обратите внимание, что если вы выберете GitHub, то ссылка на ваш GitHub-профиль будет отображаться на публичной странице вашего профиля MDN.</li> + <li>Следуйте инструкциям, чтобы подключить выбранную учетную запись к MDN (например, форма для входа через GitHub будет выглядеть как на картинке ниже).</li> + <li>После того, как служба аутентификации вернет вас на сайт MDN, вам будет предложено ввести имя пользователя MDN и адрес электронной почты. <em>Ваше имя пользователя будет отображаться публично, чтобы при вкладе в развитие сообщества было видно ваше авторство. Не используйте свой адрес электронной почты в качестве имени пользователя<strong>.</strong></em></li> + <li>Нажмите <strong>Создать мой профиль MDN</strong>.</li> + <li>Если адрес электронной почты, указанный в шаге 4, не то же самый, который вы используете на выбранном для аутентификации сервисе, то проверьте свою электронную почту и нажмите на ссылку в письме с подтверждением, которое мы выслали вам.</li> +</ol> + +<p>Это всё! Теперь у вас есть аккаунт MDN, и вы можете сразу начать редактировать контент сообщества!</p> + +<p>Нажмите на своё имя в верхней части любой страницы MDN, чтобы увидеть свой профиль. В профиле нажмите <strong>Редактировать</strong>, если хотите внести изменения или дополнения.</p> + +<div class="note"> +<p>Новые имена пользователей не могут содержать пробелы или символ"@". Выбирая имя, помните, что оно будет отображаться публично, чтобы было видно, что именно вы проделали ту или иную работу.</p> +</div> diff --git a/files/ru/mdn/contribute/howto/do_a_technical_review/index.html b/files/ru/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..ba395e2669 --- /dev/null +++ b/files/ru/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,57 @@ +--- +title: Как сделать технический обзор +slug: MDN/Contribute/Howto/Do_a_technical_review +tags: + - Guide + - Howto + - MDN Meta + - Как сделать + - Руководство +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +<div>{{MDNSidebar}}</div> + +<p class="summary"><strong>Технический обзор</strong> заключается в рассмотрении технической точности и полноты статьи и её корректировки, если это необходимо. Если автор статьи хочет, чтобы кто-нибудь ещё проверил техническое содержание статьи, то он ставит пометку "Технический обзор" при редактировании. Часто автор связывается с определённым инженером для выполнения технического обзора, но кто-либо с техническими знаниями и опытом в теме также может сделать это.</p> + +<p><span class="seoSummary">Эта статья описывает, как выполнить технический обзор, тем самым гарантируя точность содержания MDN.</span></p> + +<dl> + <dt>В чём задача?</dt> + <dd>Обзор и исправление статей на техническую точность и полноту.</dd> + <dt>Где это необходимо сделать?</dt> + <dd>В конкретных статьях, которые отмечены как требующие <a href="/ru/docs/needs-review/technical" title="/ru/docs/needs-review/technical">технического обзора</a>.</dd> + <dt>Что Вы должны знать, чтобы выполнить задачу?</dt> + <dd> + <ul> + <li>Экспертные знания в теме, которую Вы обозреваете.</li> + <li>Возможность редактирования статьи на MDN.</li> + </ul> + </dd> + <dt>Какие действия нужно выполнить, чтобы сделать это?</dt> + <dd> + <ol> + <li>Выберите статью для обзора: + <ol> + <li>Перейдите к списку страниц, которые нуждаются в <a href="/ru/docs/needs-review/technical" title="/ru/docs/needs-review/technical">техническом обзоре</a>. В этом списке перечислены все страницы, для которых был запрошен технический обзор.</li> + <li>Выберите страницу, с темой которой Вы очень хорошо знакомы.</li> + <li>Нажмите на ссылку статьи, чтобы загрузить страницу.</li> + </ol> + </li> + <li><a id="core-steps" name="core-steps"></a>Прочитайте статью, обращая пристально внимание на технические детали: Верна ли статья? Чего-то не хватает? Не стесняйтесь переключаться на другую статью, если выбранная не устраивает Вас.</li> + <li>Если ошибок нет, то Вам не нужно редактировать статью, чтобы отметить её как просмотренную. Посмотрите на окно "быстрого обзора" в левой боковой панели страницы:<br> + <br> + Выберите флажок <strong>Технический</strong> и нажмите <strong>Обзор завершен</strong>.</li> + <li>Если Вы нашли ошибки, которые нужно исправить: + <ol> + <li>Нажмите кнопку <strong>Редактировать</strong> в верхней части страницы; она переместит Вас в <a href="/ru/MDN/Contribute/Editor" title="/ru/MDN/Contribute/Editor">редактор MDN</a>.</li> + <li>Исправьте неверную техническую информацию и добавьте важную информацию, которая отсутствует.</li> + <li>Введите <strong>Комментарий к ревизии</strong> в нижней части статьи, который описывает, что Вы сделали, например, "<em>Технический обзор закончен"</em>. Если Вы исправляли информацию, добавьте это в Ваш комментарий, например, "<em>Технический обзор: исправлено описание параметров</em>".</li> + <li><em>Отмените</em> флажок <strong>Технический</strong> под <strong>Требуется проверка?</strong>.</li> + <li>Нажмите кнопку <strong>Сохранить изменения</strong>.</li> + </ol> + </li> + </ol> + </dd> +</dl> + +<p>Поздравляем! Вы только что завершили свой первый технический обзор! Спасибо вам за вашу помощь! </p> diff --git a/files/ru/mdn/contribute/howto/do_an_editorial_review/index.html b/files/ru/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..eab3b47fde --- /dev/null +++ b/files/ru/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,52 @@ +--- +title: Как сделать редакционный обзор +slug: MDN/Contribute/Howto/Do_an_editorial_review +tags: + - Guide + - Howto + - MDN Meta + - Как сделать + - Руководство +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +<div>{{MDNSidebar}}</div><p class="summary"><strong>Редакционный обзор заключается в исправлении опечаток и орфографических, грамматических, оборотных или текстовых ошибок в статье</strong>. Не все участники обладают лингвистическими навыками, но, благодаря их знаниям, появляются чрезвычайно полезные статьи, которые нуждаются в техническом редактировании и исправлении; это делается в редакционном обзоре.</p> + +<p><span class="seoSummary">Эта статья описывает выполнение редакционного обзора для поддержания точности содержания MDN.</span></p> + +<dl> + <dt>В чём задача?</dt> + <dd>Техническое редактирование и исправление статей, которые отмечены как требующие редакционного обзора.</dd> + <dt>Где это необходимо сделать?</dt> + <dd>В конкретных статьях, которые отмечены как требующие <a href="/ru/docs/needs-review/editorial">редакционного обзора</a>.</dd> + <dt>Что Вы должны знать, чтобы выполнить задачу?</dt> + <dd>Вы должны иметь хорошие грамматические и орфографические навыки в русском языке.</dd> + <dt>Какие действия нужно выполнить, чтобы сделать это?</dt> + <dd> + <ol> + <li>Выберите статью для обзора: + <ol> + <li>Перейдите к списку страниц, которые нуждаются в <a href="/ru/docs/needs-review/editorial">редакционном обзоре</a>. В этом списке перечислены все страницы, для которых был запрошен редакционный обзор.</li> + <li>Выберите страницу.</li> + <li>Нажмите на ссылку статьи, чтобы загрузить страницу.</li> + </ol> + </li> + <li><a id="core-steps" name="core-steps"></a>Прочитайте статью, обращая пристальное внимание на опечатки и орфографические, грамматические или оборотные ошибки. Не стесняйтесь переключаться на другую статью, если выбранная не устраивает Вас.</li> + <li>Если ошибок нет, то Вам не нужно редактировать статью, чтобы отметить её как прошедшую корректуру. Посмотрите на окно "быстрого обзора" в левой боковой панели страницы:<br> + <img alt=""><br> + Выберите флажок <strong>Редакционный</strong> и нажмите <strong>Обзор завершен</strong>.</li> + <li>Если Вы нашли ошибки, которые нужно исправить: + <ol> + <li>Нажмите кнопку <strong>Редактировать</strong> в верхней части страницы; она переместит Вас в <a href="/ru/MDN/Contribute/Editor">редактор MDN</a>.</li> + <li>Исправьте все опечатки и орфографические, грамматические или оборотные ошибки, которые Вы видите.</li> + <li>Введите <strong>Комментарий ревизии</strong> в нижней части статьи; что-то вроде '<em>Редакционный обзор: исправлены опечатки, грамматика и орфография</em>'.</li> + <li>Снимите флажок <strong>Редакционный</strong> под <strong>Требуется проверка?.</strong></li> + <li>Нажмите кнопку <strong>Сохранить изменения</strong>.</li> + </ol> + </li> + </ol> + + <div class="note"> + <p>Из-за соображений производительности Ваши правки могут не сразу появиться на странице.</p> + </div> + </dd> +</dl> diff --git a/files/ru/mdn/contribute/howto/index.html b/files/ru/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..04a6f5e8e6 --- /dev/null +++ b/files/ru/mdn/contribute/howto/index.html @@ -0,0 +1,13 @@ +--- +title: Руководства "Как сделать" +slug: MDN/Contribute/Howto +tags: + - Landing + - MDN Meta +translation_of: MDN/Contribute/Howto +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/ru/docs/MDN")}}</div> + +<p>Эти статьи являются пошаговым руководством для достижения специфических целей при участии в MDN.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/ru/mdn/contribute/howto/report_a_problem/index.html b/files/ru/mdn/contribute/howto/report_a_problem/index.html new file mode 100644 index 0000000000..a0817f8271 --- /dev/null +++ b/files/ru/mdn/contribute/howto/report_a_problem/index.html @@ -0,0 +1,24 @@ +--- +title: Как сообщить о проблеме в MDN +slug: MDN/Contribute/Howto/Report_a_problem +tags: + - MDN Мета + - Инструкция + - Руководство +translation_of: MDN/Contribute/Howto/Report_a_problem +--- +<div>{{MDNSidebar}}</div> + +<p>Время от времени вы можете столкнуться с проблемами при использовании MDN. Будь то проблема с инфраструктурой сайта или ошибка в содержании документации, вы можете либо попытаться исправить ее самостоятельно, либо сообщить о проблеме. В то время как первое предпочтительнее, последнее иногда является лучшим, что вы можете сделать, и это тоже хорошо.</p> + +<h2 id="Ошибки_в_документации_или_запросы">Ошибки в документации или запросы</h2> + +<p><span class="tlid-translation translation" lang="ru"><span title="">Очевидно, поскольку MDN - это вики, лучшее, что вы можете сделать, - это исправить обнаруженные проблемы самостоятельно.</span> <span title="">Но, возможно, вы не знаете ответа или у вас уже истекает срок выполнения вашего собственного проекта или чего-то в этом роде, и вам нужно описать проблему, чтобы кто-то мог рассмотреть ее позже.</span></span></p> + +<p>Способ сообщить о проблеме с документацией – подача <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&projects=mdn/sprints/2&labels=user-report">заявки</a>. Шаблон проблемы содержит разделы для получения информации, необходимой для начала работы по устранению проблемы. Не стесняйтесь удалять любую часть шаблона, которая не полезна или не имеет отношения к вашей проблеме</p> + +<p>Конечно, наше писательское сообщество занято, поэтому иногда самый быстрый способ решить проблему с документацией – это исправить ее самостоятельно. Дополнительные сведения см. в разделе <a href="/ru/docs/MDN/Contribute/Creating_and_editing_pages">создание и редактирование страниц</a>.</p> + +<h2 id="Ошибки_сайта_или_предложения_функционала">Ошибки сайта или предложения функционала</h2> + +<p><a href="/ru/docs/MDN/Kuma" title="/en-US/docs/Project:MDN/Kuma">Kuma</a> – платформа, разработанная Mozilla для веб-сайта MDN, находится в состоянии непрерывного развития. Наши разработчики, а также ряд добровольных участников, постоянно вносят улучшения. Если вы видите ошибку, или у вас есть проблема с сайтом, или даже есть <span class="tlid-translation translation" lang="ru"><span title="">предложение по поводу чего-то, что могло бы сделать программу более интересной</span></span>, вы можете использовать <a href="https://github.com/mdn/kuma/issues/new">форму заявки Kuma</a> для подачи отчета. Вы также можете использовать эту форму для сообщения о проблемах с производительностью сайта, хотя есть вероятность, что средства мониторинга производительности уже уведомили соответствующих людей.</p> diff --git a/files/ru/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html b/files/ru/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html new file mode 100644 index 0000000000..a695bb3e97 --- /dev/null +++ b/files/ru/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html @@ -0,0 +1,145 @@ +--- +title: Как создавать записи в глоссарии и как на них ссылаться +slug: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary +tags: + - MDN Meta + - Глоссарий + - Запись глоссария + - Инструкция + - Как сделать + - Определение + - Словарная статья + - Термин +translation_of: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary +--- +<div>{{MDNSidebar}}</div> + +<p>Здесь вы можете прочитать о том, как создавать новые записи в <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary">глоссарии веб-документов MDN</a>, как их оформлять, а также как правильно создавать ссылки на записи глоссария.</p> + +<p>MDN <a href="/ru/docs/Словарь">глоссарий</a> (словарь) – это место, где мы определяем все термины, жаргон и аббревиатуры, которые вы можете встретить, когда читаете о вебе и веб-разработке на MDN. Скорее всего, исчерпывающим этот словарь не станет никогда, ведь веб меняется постоянно. Вы можете помочь поддерживать глоссарий в актуальном состоянии, добавляя в него новые записи и исправляя ошибки. </p> + +<p>Делать вклад в словарь – это простой способ сделать веб понятнее для всех. Вам не нужно иметь высокий уровень технического мастерства для написания словарных статей. Статьи глоссария должны оставаться простыми и понятными.</p> + +<h2 id="Как_писать_записи">Как писать записи</h2> + +<p>Ищете темы, которые нуждаются в записи глоссария? Посмотрите <a href="https://developer.mozilla.org/en-US/docs/Glossary#Contribute_to_the_glossary">список незадокументированных терминов</a> в конце <a href="https://developer.mozilla.org/en-US/docs/Glossary">целевой страницы глоссария</a>. Щелкните любую из этих ссылок, чтобы начать новую страницу глоссария для элемента, на который вы нажали; затем выполните нижеуказанные действия.</p> + +<p>Если же у вас уже есть идея для новой записи в глоссарии, просто нажмите на кнопку "Сделать новую запись в глоссарии" (см. ниже) так, чтобы она открылась в новой вкладке, а затем выполните нижеуказанные действия.</p> + +<div class="align-center"><a class="button ignore-external mega positive" href="/en-US/docs/new?parent=4391">Сделать новую запись в глоссарии</a> + +<div></div> +</div> + +<h3 id="Шаг_1_Выберите_термин_которому_хотите_дать_определение">Шаг 1: Выберите термин, которому хотите дать определение</h3> + +<p>Первое, что нужно сделать, это выбрать термин, о котором писать. Если вы не знаете, какие термины нуждаются в определениях, вы можете <a href="https://developer.mozilla.org/en-US/docs/Glossary#Contribute_to_the_glossary">проверить наш список предложений</a>. Просто нажмите на термин и начните писать. Если вы уже авторизованы в системе, то вы попадете в Редактор MDN.</p> + +<h3 id="Шаг_2_Дайте_краткое_определение">Шаг 2: Дайте краткое определение</h3> + +<p>Первый абзац любой страницы глоссария – это простое и краткое определение/описание термина (желательно не длиннее двух предложений). Удостоверьтесь, что любой, кто читает определение, сможет сразу понять определяемый термин.</p> + +<div class="note"> +<p><strong>Замечание:</strong><span id="result_box" lang="ru"><span class="hps"> Пожалуйста, не</span> <span class="hps">копируйте </span><span class="hps">определения</span> <span class="hps">из других</span> источников <span class="hps">(особенно</span> <span class="hps">из</span> <span class="hps">Википедии</span><span>,</span> <span class="hps">поскольку её</span> <span class="hps">спектр</span> <span class="hps">лицензионных</span> <span class="hps">версий</span> <span class="hps">меньше</span><span>,</span> <span class="hps">и, таким образом,</span> <span class="hps">несопоставим</span> <span class="hps">с </span><span class="hps">MDN</span><span>)</span><span>.</span> Ваша запись должна быть уникальной, а не скопированной. </span></p> +</div> + +<h4 id="Как_создать_хорошую_запись_глоссария">Как создать <em>хорошую</em> запись глоссария</h4> + +<p>Если это необходимо, можете добавить несколько дополнительных абзацев, но будьте осторожны – так можно и увлечься, и вот вы уже пишете огромную статью. Написать полноценную статью – это прекрасно, но, пожалуйста, не помещайте ее в глоссарий. Если вы не уверены, где разместить свою статью, не стесняйтесь обратиться за помощью и <a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Join_our_mailing_lists">обсудить</a> это.</p> + +<p>Вот несколько простых рекомендаций, которые стоит применять при написании записей в глоссарий:</p> + +<ul> + <li>Если для описания термина вы используете другие термины или аббревиатуры, то делайте ссылки и на их определения. Чаще всего, это будут простые ссылки на другие страницы глоссария (см. <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary#How_to_use_the_Glossary_macro">Как использовать макрос глоссария</a> ниже). Для самых важных терминов, напрямую связанных с описываемым термином, лучше делать ссылку на основную статью MDN WebDocs по этой теме.</li> + <li>Используйте подходящие связанные термины (со ссылками) в вашей записи, но только если уверены, что это не затруднит восприятие. Наличие хорошей сети связанных, полезных ссылок может сделать страницу или набор страниц намного более простыми в использовании.</li> + <li>Подумайте о том, что бы вы ввели в поисковую систему, если бы хотели найти эту страницу. Попробуйте использовать все эти ключевые слова в записи, но постарайтесь сделать это так, чтобы запись при этом не утратила смысл, не стала слишком длинной или трудной для чтения.</li> +</ul> + +<h4 id="Отредактируйте_всплывающие_подсказки">Отредактируйте всплывающие подсказки</h4> + +<p>Как и в случае с большинством ссылок MDN, наведение курсора мыши на ссылку глоссария покажет краткое описание страницы (в данном случае краткое описание определения термина). По умолчанию подсказка представляет собой весь первый абзац статьи, но в большинстве случаев такое описание может оказаться слишком большим.</p> + +<p>Вы можете сами указать фрагмент текста, который в дальнейшем будет использоваться как текст всплывающей подсказки при ссылке на вашу запись. Выберите одно или два предложения в записи, которые лучше всего описывают термин, а затем добавьте к ним стиль "SEO Summary" (резюме). Это действие не только создаст текст подсказки, но и определит текст, который будет отправлен в Google и другие поисковые системы, когда они запросят краткое резюме, описывающее содержимое страницы. Таким образом, вашу запись будет легче находить с помощью поисковиков.</p> + +<div class="blockIndicator note"> +<p>Примечание: В идеале, резюме должно содержать около 150-160 символов. Лучше меньше, да лучше. </p> +</div> + +<h3 id="Шаг_3_Добавьте_ссылки">Шаг 3: Добавьте ссылки</h3> + +<p>Заканчиваться запись в глоссарии всегда должна разделом "Узнать больше". Этот раздел должен содержать ссылки, которые помогут читателю подробнее изучить вопрос: узнать больше деталей, научиться использовать соответствующие технологии и так далее.</p> + +<p><span id="result_box" lang="ru"><span class="hps">Мы рекомендуем </span><span class="hps">сортировать</span> <span class="hps">ссылки</span> <span class="hps">по трем группам</span><span>:</span></span></p> + +<p><em><strong>Общие знания</strong></em><br> + Ссылки, которые предоставляют информацию более общего характера, например, ссылка на<a href="http://wikipedia.org/"> Википедию </a>– это хорошая отправная точка.</p> + +<p><strong><em>Технический справочник</em></strong><br> + Ссылки на более подробную техническую информацию, на MDN или в другом месте.</p> + +<p><em><strong>Узнать больше</strong></em><br> + Ссылки на учебные пособия, упражнения, примеры или любые другие материалы, которые помогают читателю научиться использовать технологию, стоящую за определенным термином.</p> + +<h2 id="Что_делать_если_у_термина_несколько_значений">Что делать, если у термина несколько значений</h2> + +<p>Иногда один и тот же термин может иметь разные значения в зависимости от контекста. Чтобы избежать возможных разночтений и путаницы, следуйте этим рекомендациям:</p> + +<ul> + <li>На основной странице записи, посвященной термину, должны быть перечислены все его возможные значения. Это делается с помощью макроса {{TemplateLink("GlossaryDisambiguation")}}.</li> + <li>Для каждого значения должна быть создана отдельная подстраница.</li> +</ul> + +<p>Пример:</p> + +<p>У англоязычного термина <em>signature</em> как минимум три значения: одно в контексте безопасности, второе – подпись функции, и третье – подпись в контексте электронной почты. Вот как оформлена запись глоссария в этом случае:</p> + +<ol> + <li>Основная страница <a href="/en-US/docs/Glossary/Signature">Glossary/Signature</a> – это страница с перечислением всех значений термина. Она оформлена с помощью макроса {{TemplateLink("GlossaryDisambiguation")}}.</li> + <li>На подстранице <a href="/en-US/docs/Glossary/Signature/Security">Glossary/Signature/Security</a> дано определение термина signature в контексте безопасности.</li> + <li>Подстраница <a href="/en-US/docs/Glossary/Signature/Function">Glossary/Signature/Function</a> посвящена значению "подпись функции".</li> + <li>И, наконец, третья подстраница <a href="/en-US/docs/Glossary/Signature/Email">Glossary/Signature/Email</a> посвящена тому, что такое подпись в контексте электронной почты.</li> +</ol> + +<h2 id="Как_использовать_макрос_Glossary">Как использовать макрос \{{Glossary}}</h2> + +<p>Глоссарий становится полезнее и используется чаще, когда к записям можно перейти по ссылкам из других документов. Чтобы обеспечить читателям такую возможность, используйте макрос {{TemplateLink("Glossary")}}:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Макрос</th> + <th scope="col">Результат</th> + <th scope="col">Примечание</th> + </tr> + </thead> + <tbody> + <tr> + <td>\{{Glossary("browser")}}</td> + <td>{{Glossary("browser")}}</td> + <td> + <p>В случае, когда текст ссылки – это сам термин, то он и будет аргументом макроса (регистр значения не имеет).</p> + </td> + </tr> + <tr> + <td>\{{Glossary("browser", "Web browser")}}</td> + <td>{{Glossary("browser","Web browser")}}</td> + <td>Если хотите использовать другой текст ссылки, укажите его как второй аргумент.</td> + </tr> + <tr> + <td>\{{Glossary("browser", "Web browser", 1)}}</td> + <td>{{Glossary("browser","Web browser",1)}}</td> + <td>Если хотите, чтобы ссылка отображалась как стандартная ссылка, а не как всплывающая подсказка, то укажите <code>1</code> как третий аргумент.</td> + </tr> + </tbody> +</table> + +<p>Ссылки, созданные с помощью макроса \{{Glossary}}, отображаются в виде всплывающей подсказки, содержащей соответствующий абзац глоссария, или SEO summary (как редактировать такие всплывающие подсказки, см. выше). </p> + +<h3 id="Рекомендации_по_использованию_макроса">Рекомендации по использованию макроса</h3> + +<p>Во многих случаях совершенно безопасно использовать макрос на MDN. Однако, есть несколько случаев, когда нужно использовать его с острожностью:</p> + +<ul> + <li>Если видите уже существующую (правильную, уместную) ссылку на какую-либо статью MDN, <strong>не редактируйте её с помощью макроса. </strong>Иными словами, не меняйте уже существующую ссылку на глоссарий-ссылку.</li> + <li>Внутри одного раздела статьи используйте не больше одного макроса \{{Glossary}} для каждого определяемого термина. (Подсказка, как распознать разделы статьи: у каждого раздела всегда есть заголовок).</li> +</ul> diff --git a/files/ru/mdn/contribute/howto/добавить_или_обновить_данные_о_браузерной_совместимости/index.html b/files/ru/mdn/contribute/howto/добавить_или_обновить_данные_о_браузерной_совместимости/index.html new file mode 100644 index 0000000000..5b31ce215e --- /dev/null +++ b/files/ru/mdn/contribute/howto/добавить_или_обновить_данные_о_браузерной_совместимости/index.html @@ -0,0 +1,34 @@ +--- +title: Как добавить или обновить данные о браузерной совместимости +slug: MDN/Contribute/Howto/Добавить_или_обновить_данные_о_браузерной_совместимости +tags: + - MDN Meta + - Руководство +translation_of: MDN/Contribute/Howto/Add_or_update_browser_compatibility_data +--- +<div>{{MDNSidebar}}{{IncludeSubnav("/ru/docs/MDN")}}</div> + +<p class="summary"><span class="seoSummary">Если вы знаете информацию о браузерной совместимости с веб-функциями — или вы хотите помочь и можете провести некоторые исследования или эксперименты — вы можете помочь обновить MDN <a class="external external-icon" href="https://github.com/mdn/browser-compat-data/" rel="noopener">База данных о браузерной совместимости</a> (BCD).</span></p> + +<dl> + <dt>Где это нужно сделать?</dt> + <dd> + <p>Есть несколько способов как вы можете улучшить информацию о браузерной совместимости на MDN:</p> + + <ul> + <li>Добавить данные о веб-функциях, ещё не включённых в BCD репозиторий</li> + <li>Обновить существующие данные новой информацией на основе либо изменениях в новых версиях браузеров, исправления ошибок в существующих данных, либо обновления о данных функциях</li> + <li>Отправить pull request по адресу <a class="external external-icon" href="https://github.com/mdn/browser-compat-data/issues" rel="noopener">BCD проблемы на Github</a>.</li> + </ul> + </dd> + <dt>Что вам нужно знать, чтобы выполнить задачу?</dt> + <dd> + <ul> + <li>Знакомство с Github</li> + <li>Знакомство с JSON</li> + <li>Информация о чём-либо или возможность проверить совместимость функций веб-стандартов в различных браузерах. Вы также можете конвертировать "старые" таблицы совместимости в формат JSON.</li> + </ul> + </dd> + <dt>Какие шаги нужно сделать, чтобы выполнить задачу?</dt> + <dd>Подробнее о том как обновить <a class="glossaryLink" href="https://developer.mozilla.org/ru/docs/Словарь/JSON" title="JSON: The JavaScript Object Notation (JSON) — это формат обмена данными. Хотя это и не строгое подмножество, JSON очень напоминает подмножество JavaScript синтаксиса. Несмотря на то, что многие языки программирования поддерживаю JSON, JSON особенно для JavaScript приложений, включая веб-сайты и браузерные расширения.">JSON</a> файлы в BCD репозитории на Github, смотри нашу статью <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Compatibility_tables">таблицы совместимости</a>. Для списка проблем по которым конкретно ищется помощь ищите <a class="external external-icon" href="https://github.com/mdn/browser-compat-data/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22" rel="noopener">Github проблемы с тегом "Help Wanted"</a>.</dd> +</dl> diff --git a/files/ru/mdn/contribute/howto/как_оптимизировать_страницы/index.html b/files/ru/mdn/contribute/howto/как_оптимизировать_страницы/index.html new file mode 100644 index 0000000000..26d5101d9d --- /dev/null +++ b/files/ru/mdn/contribute/howto/как_оптимизировать_страницы/index.html @@ -0,0 +1,41 @@ +--- +title: Как оптимизировать страницы +slug: MDN/Contribute/Howto/Как_оптимизировать_страницы +translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +--- +<div>{{MDNSidebar}}</div><p><span class="seoSummary">Вы можете заняться оптимизацией любой страницы на MDN, для поисковой оптимизации страницы, вы можете выбрать любую страницу: пусть то будет Лендинговая страница или подсказки.</span> Это должен быть текст, который связан по смыслу с контентом страницы. Все слова должны быть уникальными и не должны встречаться в тексте.</p> + +<p> </p> + +<dl> + <dt>Что необходимо сделать?</dt> + <dd>Выделить ключевые слова и написать оптимизированную (SEO) статью .</dd> + <dt><strong>Где это нужно сделать?</strong></dt> + <dd>На любых страницах, которые еще не оптимизированы, либо на страницах, которые не достаточно хорошо оптимизированы.</dd> + <dt><strong>Необходимые знания и навыки для выполнения этого задания?</strong></dt> + <dd>Навыки использования MDN редактора; владение Английским языком на уровне - native; умение писать SEO-статьи.</dd> + <dt><strong>Что необходимо для этого сделать?</strong></dt> + <dd> + <ol> + <li>Выбрать страницу, на которой необходимо провести оптимизацию: + <ol> + <li>На этой странице <a href="/en-US/docs/MDN/Doc_status">MDN</a> выберите раздел, в котором вы сильны (например, HTML):<br> + <img alt="" src="https://mdn.mozillademos.org/files/8681/sections.png" style="height: 130px; width: 504px;"></li> + <li>На <a href="/en-US/docs/">этой странице</a>, нажмите <strong>СТРАНИЦЫ</strong> (<strong>Pages)</strong> в разделе <strong>Резюме</strong> (<strong>Summary)</strong>. В этом разделе вы увидите индекс всех страниц. Так же вы увидите ссылки на страницы (слева), а тэги и SEO - статьи справа:<br> + <img alt="" src="https://mdn.mozillademos.org/files/8675/pages.png" style="height: 82px; width: 361px;"></li> + <li>Выберите страницу, которую необходимо оптимизировать:<br> + <img alt="" src="https://mdn.mozillademos.org/files/8677/summary.png" style="height: 38px; width: 296px;"></li> + <li>Кликните на ссылку, чтобы перейти на эту страницу.</li> + </ol> + </li> + <li>Нажмите кнопку <strong>Правка (Edit)</strong>, чтобы открыть MDN редактор.</li> + <li>Составьте одно - два предложения в качестве SEO-статьи. При необходимости отредактируйте уже существующую статью.</li> + <li>Выберите текст, который будет использован в качестве SEO.</li> + <li>На панели инструментов выберите виджет <em>Styles.</em> Выберите <strong>SEO Summary</strong>. (В исходном коде страницы будет создано {{HTMLElement("span")}} элемент с <code>class="seoSummary"</code> вокруг выделенного текста.)<br> + <img alt="" src="https://mdn.mozillademos.org/files/8679/styles.png" style="height: 231px; width: 403px;"></li> + <li>Сохраните свои изменения, желательно с комментариями. Для облегчения понимания ваших трудов другим участникам.</li> + </ol> + </dd> +</dl> + +<p> </p> diff --git a/files/ru/mdn/contribute/howto/метки_javascript_страниц/index.html b/files/ru/mdn/contribute/howto/метки_javascript_страниц/index.html new file mode 100644 index 0000000000..0c0ed4eca9 --- /dev/null +++ b/files/ru/mdn/contribute/howto/метки_javascript_страниц/index.html @@ -0,0 +1,74 @@ +--- +title: Как пометить страницы JavaScript +slug: MDN/Contribute/Howto/Метки_JavaScript_страниц +tags: + - Guide + - Howto + - JavaScript + - MDN Meta +translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages +--- +<div>{{MDNSidebar}}</div><p class="summary"><strong>Маркировка</strong> состоит из добавления метаданных на страницы, чтобы связанный контент можно было сгруппировать, например, в инструменте поиска.</p> + +<dl> + <dt>Где это нужно сделать?</dt> + <dd>Внутри определенных <a href="/en-US/docs/Web/JavaScript/Doc_status#No_tags">JavaScript-страниц без тегов</a></dd> + <dt>Что вам нужно знать, чтобы выполнить эту задачу?</dt> + <dd>Базовые знания JavaScript, например, знание метода или свойства.</dd> + <dt>Каковы шаги для этого?</dt> + <dd> + <ol> + <li>Выберите одну из страниц в списке, указанном выше.</li> + <li>Нажмите ссылку на статью, чтобы загрузить страницу.</li> + <li>После загрузки страницы, нажмите кнопку <strong>EDIT</strong> рядом с нее названием; это перенесет вас в редактор MDN.</li> + <li>Как минимум тег <code>JavaScript</code> нужно добавить. Так же здесь список возможных тегов для добавления: + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Тег</th> + <th scope="col">Какие страницы использовать</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>Method</code></td> + <td>методы</td> + </tr> + <tr> + <td><code>Property</code></td> + <td>свойства</td> + </tr> + <tr> + <td><code>prototype</code></td> + <td>прототипы</td> + </tr> + <tr> + <td>Object type name</td> + <td>методы объекта; например String.fromCharCode должен иметь тег <code>String</code></td> + </tr> + <tr> + <td><code>ECMAScript6</code> и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Experimental</span></font></td> + <td>возможности (фичи) которые были добавлены в новой версии ECMAScript</td> + </tr> + <tr> + <td><code>Deprecated</code></td> + <td>устаревшие функции (использование которых не рекомендуется, но поддерживается)</td> + </tr> + <tr> + <td><code>Obsolete</code></td> + <td>устаревшие функции (которые больше не поддерживаются в современных браузерах)</td> + </tr> + <tr> + <td>others</td> + <td>См. <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">Стандарты тегов MDN </a>для других возможных меток</td> + </tr> + </tbody> + </table> + </li> + <li>Сохранить с комментарием.</li> + <li>Готово!</li> + </ol> + </dd> +</dl> + +<p> </p> diff --git a/files/ru/mdn/contribute/howto/привязка_github_аккаунта/index.html b/files/ru/mdn/contribute/howto/привязка_github_аккаунта/index.html new file mode 100644 index 0000000000..a627bdde50 --- /dev/null +++ b/files/ru/mdn/contribute/howto/привязка_github_аккаунта/index.html @@ -0,0 +1,116 @@ +--- +title: Как привязать GitHub аккаунт к вашему MDN профилю +slug: MDN/Contribute/Howto/Привязка_GitHub_аккаунта +tags: + - Documentation + - MDN + - MDN Meta + - MDN Project +translation_of: Archive/MDN/Howto_Link_a_Github_account +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/ru/docs/MDN")}}</div> + +<div class="note"> +<p><strong>Note: </strong>Support for Persona logins on MDN was disabled on November 1, 2016. The method for adding a Github account to your profile therefore no longer works. If you didn't add a GitHub login to your MDN account before we disabled Persona logins, please <strong>file an <a class="external external-icon" href="https://mzl.la/accounthelp">"Account Help" bug</a> </strong>on Bugzilla. For further reading about the end of life of Persona, see: <a href="https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers">Persona shutdown guidelines</a>.</p> +</div> + +<p><span class="seoSummary">Поскольку 1 ноября 2016 г. система авторизации Mozilla <a href="https://login.persona.org/">Persona</a> будет отключена, всем пользователеям, которые хотят вносить вклад в MDN понадобится другой способ входа на MDN.<br> + В настоящее время, единственная альтернатива, которую мы поддерживаем - GitHub, так что вам понадобится <a href="https://github.com/">GitHub</a> аккаунт, чтобы входить и редактировать MDN после этой даты. Эта статья описывает, как добавить авторизацию через GitHub к вашему профилю MDN.</span></p> + +<div class="warning"> +<p>Вы должны сделать это до 1 ноября 2016, иначе вы больше не сможете входить на MDN!</p> +</div> + +<h2 id="Обзор">Обзор</h2> + +<p>Добавление авторизации через GitHub к вашему аккаунту осуществить не трудно. Мы рассмотрим всё детально, но сначала, вот список шагов:</p> + +<ol> + <li><a href="/ru/docs/MDN/Signing_in">Войдите в ваш MDN аккаунт.</a></li> + <li>Перейдите на страницу <a href="/ru/users/account/connections">присоединённые аккаунты</a>.</li> + <li>Добавьте авторизацию через GitHub.</li> +</ol> + +<h2 id="Подробная_инструкция">Подробная инструкция</h2> + +<p>Ниже представлено пошаговое руководство о том, как сделать все необходимое для того, чтобы авторизоваться через GitHub.</p> + +<h3 id="Войдите_в_свой_MDN_аккаунт">Войдите в свой MDN аккаунт</h3> + +<ol> + <li>В верхней части каждой страницы MDN расположен блок авторизации. Он отображает доступные методы авторизации: <strong>Persona </strong>и <strong>GitHub</strong>.<br> + <img alt="Sign in box on MDN, showing Persona and Github." src="https://mdn.mozillademos.org/files/13426/Mozilla_Developer_Network_-__Private_Browsing_.png" style="border-style: solid; border-width: 1px; height: 140px; width: 425px;"></li> + <li>Выберите <strong>Persona</strong>, и войдите, используя свой логин и пароль. Если вы получаете ошибку о том, что система вас не узнаёт, убедитесь, что вы ввели адрес электронной почты, который вы использовали при входе на MDN через Persona. Если у вас по-прежнему есть проблемы, посмотрите раздел {{anch("Persona_не_помнит_меня", "Persona не помнит меня")}}.</li> +</ol> + +<h3 id="Перейдите_на_страницу_присоединённые_аккаунты">Перейдите на страницу "присоединённые аккаунты"</h3> + +<p>Просто щёлкните по кнопке ниже.</p> + +<p>Или выполните следующее:</p> + +<ol> + <li>Щёлкните по вашему имени пользователя вверху любой страницы MDN. (Там же, где был блок <strong>Авторизации</strong>, когда вы входили). Откроется ваш профиль.</li> + <li>Откройте меню, щёлкнув по "шестерёнке", и выберите <strong>Присоединённые аккаунты</strong>.<br> + <img alt='Gear menu in profile, showing the "Account connections" option' src="https://mdn.mozillademos.org/files/13428/SheppyWork___MDN_-__Private_Browsing_.png" style="height: 217px; width: 219px;"></li> +</ol> + +<h3 id="Добавление_авторизации_через_GitHub">Добавление авторизации через GitHub</h3> + +<p>На странице "Присоединённые аккаунты", есть уже присоединённые к профилю MDN внешние аккаунты. Если GitHub в этом списке - поздравляем! Всё готово! Но проверьте, что помните ваш пароль, выйдя с MDN и войдя снова через GitHub.</p> + +<p>Если GitHub ещё нет в списке, то поищите список привязанных аккаунтов. Вы найдёте раздел под названием <strong>Подключить новый аккаунт</strong>, в котором будут перечислены возможные типы аккаунтов, которые можно привязать к вашему профилю MDN. Выглядит он примерно так:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13430/Account_Connections___MDN_-__Private_Browsing_.png" style="height: 79px; width: 476px;"></p> + +<p>Чтобы добавить GitHub:</p> + +<ol> + <li>Щёлкните <strong>Присоединить GitHub</strong>. MDN свяжется с GitHub и запросит разрешение на связывание аккаунтов. Если у вас еще нет аккаунта на GitHub, вам будет предложено создать его:<br> + <img alt="Screenshot of GitHub sign in window." src="https://mdn.mozillademos.org/files/13444/GitHub_Sign_In.png" style="height: 447px; width: 356px;"></li> + <li>Если в вашем аккаунте GitHub включена двухфакторная авторизация, то вам будет предложено ввести код:<br> + <img alt="Screenshot of GitHub's Two-factor authentication window." src="https://mdn.mozillademos.org/files/13460/GitHub_-_Where_software_is_built.png" style="height: 448px; width: 361px;"></li> + <li>После входа в аккаунт GitHub, вам будет предложено разрешить связь между GitHub и MDN<br> + (если у вас ещё нет разрешения по какой-либо причине). Эта страница показана ниже.<br> + <img alt='Screenshot of GitHub "Authorize application" window.' src="https://mdn.mozillademos.org/files/13456/Authorize_Mozilla_Developer_Network.png" style="height: 420px; width: 766px;"><br> + Щёлкните по зелёной кнопке <strong>Authorize application</strong>, чтобы предоставить разрешение доступа MDN к вашему аккаунту на GitHub. В случае успешной привязки - появится сообщение:<br> + <img alt="Account successfully created." src="https://mdn.mozillademos.org/files/13454/Edit_Your_Profile___MDN.png" style="height: 57px; width: 646px;"></li> +</ol> + +<p>Теперь вы не только можете использовать GitHub для входа на MDN, а уже вошли, используя ваш аккаунт GitHub! Теперь вы готовы к отключению Persona. Убедитесь, что обновили пароль в ваших менеждерах для паролей, если необходимо.</p> + +<h2 id="Устранение_проблем">Устранение проблем</h2> + +<p>Если сталкиваетесь с проблемами, когда пытаете добавить ваш GitHub аккаунт к вашему профилю, то надеемся, что советы по устранению проблем ниже помогут. Если они не помогают, пожалуйста, не стесняйтесь попросить у нас помощи на <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs</a>.</p> + +<h3 id="Ошибка_Не_удалось_найти_профиль_соответствующий_аккаунту">Ошибка: Не удалось найти профиль соответствующий аккаунту</h3> + +<p>Если вы пытаетесь присоединить GitHub аккаунт к вашему профилю и получаете ошибку "Could not find profile matching account", то может быть несколько возможных проблем. Если у вас есть несколько аккаунтов на GitHub, то может возникнуть некоторая путаница; GitHub может не сообщить ожидаемого адреса электронной почты MDN при попытке привязки аккаунта, что является причиной этой ошибки. Другие сбои в этом процессе также могут быть причиной этой ошибки.</p> + +<p>Один из способов обойти эту проблему: откройте новую приватную вкладку в вашем браузере; в Firefox, например, выберите "Новое приватное окно" в Меню->Файл (или нажмите <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> [<kbd>Cmd</kbd>-<kbd>Shift</kbd>-<kbd>P</kbd> на Mac]). Зайдите на MDN, <a href="/ru/docs/MDN/Signing_in">войдите в свой MDN аккаунт</a>, а затем попытайсь снова привязать ваш GitHub аккаунт к профилю, как описано выше.</p> + +<p>Также, убедитесь, что пытаетесь войти через Persona.</p> + +<h3 id="Моя_привязка_GitHub_не_отображается_на_странице_присоединённых_аккаунтов.">Моя привязка GitHub не отображается на странице присоединённых аккаунтов.</h3> + +<p>Это может просходить из-за кеширования. Перезагрузите страницу или попробуйте выйти и войти снова, чтобы решить эту проблему.</p> + +<h3 id="Persona_не_помнит_меня">Persona не помнит меня</h3> + +<p>Если когда вы пытаетесь войти через Persona, чтобы добавить ваш GitHub аккаунт в ваш MDN профиль, вы получаете сообщение "Your email address is new to us", то это, вероятно, потому что прошло слишком много времени с того момента, когда вы последний раз входили через Persona, поэтому они удалили ваш адрес электронной почты из их системы. Это случается после некоторого периода времени; окно входа Persona выгдядит так:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13765/unknown-to-persona.png" style="height: 533px; width: 800px;"></p> + +<p>Если это произошло, ваш нужно просто следовать инструкциям Persona, чтобы создать пароль для этого адреса электронной почты. MDN ничего не удаляет; главное, чтобы адрес совпал. Придёт письмо, чтобы подтвердить, что это ваш адрес электронной почты, скорее всего от <code>no-reply@persona.org</code>. Если у вас установлены фильтры спама, оно может попасть в папку "Спам".</p> + +<p>Как только вы установите пароль для адреса электронной почты, который вы использовали для входа на MDN, ваш доступ на MDN будет восстановлен. Теперь вы можете следовать шагам в разделе {{anch("Подробная_инструкция", "Подробная инструкция")}}, чтобы добавить ваш аккаунт GitHub в ваш профиль MDN.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/MDN/Contribute/Howto/Create_an_MDN_account">Как создать MDN аккаунт</a></li> + <li><a href="/ru/docs/MDN/Getting_started">MDN - быстрый старт!</a></li> + <li><a href="/ru/docs/MDN/Contribute/Howto">Руководства "Как сделать"</a></li> +</ul> diff --git a/files/ru/mdn/contribute/howto/создай_интерактивное_упражнение_для_помощи_в_изучении_веба/index.html b/files/ru/mdn/contribute/howto/создай_интерактивное_упражнение_для_помощи_в_изучении_веба/index.html new file mode 100644 index 0000000000..5488b77d10 --- /dev/null +++ b/files/ru/mdn/contribute/howto/создай_интерактивное_упражнение_для_помощи_в_изучении_веба/index.html @@ -0,0 +1,184 @@ +--- +title: Как создать интерактивное обучающее упражнение +slug: >- + MDN/Contribute/Howto/Создай_интерактивное_упражнение_для_помощи_в_изучении_веба +translation_of: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>При изучении веба, важно полагаться на активном обучающем контенте. Такой контент создан для помощи в изучении чего-либо проактивно. Это может быть упражнения, живые взламываемые примеры, задачи к исполнению, оценки и т.д. Вкратце, всё что может помочь кому-либо в активном понимании чего-либо.</p> + +<p>Нет прямого способа для создания такого контента. Например существует много сторонних инструментов которые помогут в создании живых примеров (см: <a href="https://jsfiddle.net/" rel="external">JSFiddle</a>, <a href="https://codepen.io/">CodePen</a>, <a href="http://dabblet.com/">Dabblet</a>, и т.д.) которые вы можете ссылаться из MDN статей. Если вы хотите создать более продвинутые упражнения, то можете воспользоваться <a href="https://thimble.mozilla.org" rel="external">Thimble</a> из проекта WebMaker.</p> + +<p>На данный момент MDN не имеет лёгкого инструмента для пометки автора такого контента. Однако, если вы являетесь программистом, то можете возпользоваться текущими MDN функциями для создания своего активного обучающего контента. Читайте далее для того чтобы узнать как это сделать.</p> + +<h2 id="MDN_live_samples">MDN live samples</h2> + +<p>MDN has a very cool feature called <strong>live samples</strong>. It's a mechanism that turns any HTML, CSS, and JavaScript code inside an MDN page into its executed equivalent. Before using it, you should read over <a href="/en-US/docs/MDN/Contribute/Editor/Live_samples">Using the live sample system</a>, which is our complete documentation for building them. While they're easy to do, there are quirks and tricks you'll learn along the way.</p> + +<p>What is interesting is that it's really easy to tweak that feature to use it in order to embed any kind of tool or utility you want into an MDN page.</p> + +<h3 id="Hidden_code">Hidden code</h3> + +<p>The first way to use a code sample to create active learning content is to edit the page where you want to add your content. Use the Live Sample feature to create your content as you wish. Don't bother with the code complexity you could write; just create what you need. Once your content is ready, just switch to the editor code view and surround your code with a simple {{HTMLElement('div')}} element with the class <code>hidden</code>. By doing so, your code won't be displayed but your live sample remains accessible and displayable.</p> + +<p>Let's see a simple example:</p> + +<div class="moreinfo"> +<p>Click on the following square to randomly change its color or just type a hexadecimal code color</p> + +<div class="hidden"> +<h4 id="hidden_code_example">hidden code example</h4> + +<h5 id="HTML">HTML</h5> + +<pre class="brush: html"><div class="square"> + #<input class="color"> +</div></pre> + +<h5 id="CSS">CSS</h5> + +<pre class="brush: css">body { + padding: 10px; + margin : 0; +} + +.square { + width : 80px; + height : 80px; + padding: 10px; + background-color: black; + color: white; + text-align: center; +} + +.color { + width: 60px; + text-transform: uppercase; +} +</pre> + +<h5 id="JS">JS</h5> + +<pre class="brush: js">function setColor(color) { + document.querySelector('.square').style.backgroundColor = '#' + color; + document.querySelector('.color').value = color; +} + +function getRandomColor() { + var color = Math.floor(Math.random() * 16777215); + return color.toString(16); +} + +function getInputColor() { + var value = document.querySelector('.color').value; + var color = Number('0x' + color); + if (color === +color) { + return color.toString(16); + } + return value; +} + +document.addEventListener('click', function () { + setColor(getRandomColor()); +}); + +document.addEventListener('keyup', function () { + setColor(getInputColor()); +}); +</pre> +</div> +{{EmbedLiveSample('hidden_code_example', 120, 120)}}</div> + +<p>If you take a look at that page HTML code with the MDN editor, you'll see the exact following HTML code:</p> + +<pre class="brush: html"><div class="moreinfo"> +<p>Click on the following square to randomly change its color or just type an hexadecimal code color</p> + +<div class="hidden"> +<h4 id="hidden_code_example">hidden code example</h4> + +<h5 id="HTML">HTML</h5> + +<pre class="brush: html"> +&lt;div class="square"&gt; + #&lt;input class="color"&gt; +&lt;/div&gt;</pre> + +<h5 id="CSS">CSS</h5> + +<pre class="brush: css"> +body { + padding: 10px; + margin : 0; +} + +.square { + width : 80px; + height : 80px; + padding: 10px; + background-color: black; + color: white; + text-align: center; +} + +.color { + width: 60px; + text-transform: uppercase; +} +</pre> + +<h5 id="JS">JS</h5> + +<pre class="brush: js"> +function setColor(color) { + document.querySelector('.square').style.backgroundColor = '#' + color; + document.querySelector('.color').value = color; +} + +function getRandomColor() { + var color = Math.floor(Math.random() * 16777215); + return color.toString(16); +} + +function getInputColor() { + var value = document.querySelector('.color').value; + var color = Number('0x' + color); + if (color === +color) { + return color.toString(16); + } + return value; +} + +document.addEventListener('click', function () { + setColor(getRandomColor()); +}); + +document.addEventListener('keyup', function () { + setColor(getInputColor()); +}); +</pre> +</div> + +\{{EmbedLiveSample('hidden_code_example', 120, 120)}} +</div></pre> + +<p>You can see a more advance example of such a tweak on <a href="/en-US/docs/Web/API/Canvas_API#JavaScript">the Canvas API page</a>.</p> + +<h3 id="Code_from_outside_the_page">Code from outside the page</h3> + +<p>The previous example is okay if you want to embed basic active learning content. However, if you want to deal with complex code, it can become a bit awkward to deal with that <code>hidden</code> class wrapper.</p> + +<p>So another option is to write the code of your learning content on an MDN page and then embed it into another page. To do this we can use the {{TemplateLink("EmbedDistLiveSample")}} macro instead of the {{TemplateLink("EmbedLiveSample")}} macro.</p> + +<p>Let's how that sample looks when configured as if it were being embedded from a remote origin:</p> + +<div class="moreinfo"> +<p>Click on the following square to randomly change its color or just type a hexadecimal code color</p> +{{EmbedLiveSample('The_example', 120, 120, '', 'MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example')}}</div> + +<p>This time, if you take a <a href="/en-US/docs/MDN/Contribute/Editor/Source_mode">look at that page's HTML using the MDN editor</a>, you'll see no hidden code. If you want to see the code, just go to <a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example">the page that hosts it</a>.</p> + +<p>You can see a more advanced example of this usage in our <a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets">HTML Form tutorial</a>, which uses this technique to allow experimentation with forms.</p> |