initial commit

10 files changed, 1580 insertions, 0 deletions

diff --git a/files/ru/learn/common_questions/available_text_editors/index.html b/files/ru/learn/common_questions/available_text_editors/index.html
new file mode 100644
index 0000000000..37f18bfe7b
--- /dev/null
+++ b/files/ru/learn/common_questions/available_text_editors/index.html
@@ -0,0 +1,309 @@
+---
+title: Как выбрать текстовый редактор?
+slug: Learn/Common_questions/Available_text_editors
+translation_of: Learn/Common_questions/Available_text_editors
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+
+<div class="summary">
+<p>In this article we highlight some things to think about when installing a text editor for web development.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>
+    <p>Вы уже должны знать о <a href="/en-US/Learn/What_software_do_I_need">различных программах, необходимых для создания веб-сайта.</a></p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>
+    <p>Узнать, как выбрать текстовый редактор, который наилучшим образом соответствует вашим потребностям в качестве веб-разработчика.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Веб-сайт состоит в основном из текстовых файлов, поэтому для веселого и приятного процесса разработки вы должны выбрать свой текстовый редактор с умом.</p>
+
+<p>Огромное количество вариантов немного ошеломляет, так как текстовый редактор настолько важен для компьютерных наук (да, веб-разработка - это компьютерная наука). В идеале вы должны попробовать столько редакторов, сколько сможете, и почувствовать, что соответствует вашему рабочему процессу. Но мы дадим вам несколько советов для начала.</p>
+
+<p>Вот основные вопросы, на которые вы должны ответить:</p>
+
+<ul>
+ <li>С какой ОС (операционной системой) я хочу работать?</li>
+ <li>Какие технологии я хочу использовать?</li>
+ <li>Какие основные функции я ожидаю от моего текстового редактора?</li>
+ <li>Хочу ли я добавить дополнительные функции в мой текстовый редактор?</li>
+ <li>Нужна ли мне поддержка / помощь при использовании моего текстового редактора?</li>
+ <li>Имеет ли смысл мой текстовый редактор для меня?</li>
+</ul>
+
+<p>Обратите внимание, что мы не упомянули цену. Очевидно, что это тоже важно, но стоимость продукта мало связана с его качеством или возможностями. Существует большая вероятность, что вы найдете подходящий текстовый редактор бесплатно.</p>
+
+<p>Here are some popular editors:</p>
+
+<table class="standard-table" style="height: 522px; width: 917px;">
+ <thead>
+  <tr>
+   <th scope="col">Редактор</th>
+   <th scope="col">Лицензия</th>
+   <th scope="col">Цена</th>
+   <th scope="col">ОС</th>
+   <th scope="col">Поддержка</th>
+   <th scope="col">Док.</th>
+   <th scope="col">Расширяемый</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://atom.io/">Atom</a></td>
+   <td>MIT/BSD</td>
+   <td style="text-align: center;">Free</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="https://discuss.atom.io/categories" rel="external">Forum</a></td>
+   <td><a href="https://atom.io/docs/latest/">Online Manual</a></td>
+   <td style="text-align: center;"><a href="https://atom.io/packages">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://brackets.io/" rel="external">Brackets</a></td>
+   <td>MIT/BSD</td>
+   <td style="text-align: center;">Free</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="https://groups.google.com/forum/#!forum/brackets-dev" rel="external">Forum</a>, <a href="http://webchat.freenode.net/?channels=brackets" rel="external">IRC</a></td>
+   <td><a href="https://github.com/adobe/brackets/wiki" rel="external">GitHub Wiki</a></td>
+   <td style="text-align: center;"><a href="https://ingorichter.github.io/BracketsExtensionTweetBot/" rel="external">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="https://panic.com/coda/" rel="external">Coda</a></td>
+   <td>Closed source</td>
+   <td style="text-align: center;">$99</td>
+   <td>Mac</td>
+   <td><a href="https://twitter.com/panic">Twitter</a>, <a href="https://panic.com/qa" rel="external">Forum</a>, <a href="mailto:coda@panic.com">E-mail</a></td>
+   <td><a href="https://panic.com/coda/#book">eBook</a></td>
+   <td style="text-align: center;"><a href="https://panic.com/coda/plugins.php">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.codelobster.com">CodeLobster</a></td>
+   <td>Closed source</td>
+   <td style="text-align: center;">Free</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://www.codelobster.com/forum/index.php" rel="external">Forum</a>, <a href="mailto:support@codelobster.com">E-mail</a></td>
+   <td>No end user doc</td>
+   <td style="text-align: center;">Yes</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.gnu.org/software/emacs/" rel="external">Emacs</a></td>
+   <td>GPL 3</td>
+   <td style="text-align: center;">Free</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://www.gnu.org/software/emacs/manual/efaq.html" rel="external">FAQ</a>, <a href="http://mail.gnu.org/mailman/listinfo/help-gnu-emacs" rel="external">Mailing list</a>, <a href="news://gnu.emacs.help" rel="external">News Group</a></td>
+   <td><a href="http://www.gnu.org/software/emacs/manual/html_node/emacs/index.html">Online Manual</a></td>
+   <td style="text-align: center;">Yes</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.macrabbit.com/espresso/">Espresso</a></td>
+   <td>Closed source</td>
+   <td style="text-align: center;">$75</td>
+   <td>Mac</td>
+   <td><a href="http://www.macrabbit.com/support/" rel="external">FAQ</a>, <a href="mailto:support@macrabbit.com">E-mail</a></td>
+   <td>No end user doc,<br>
+    but <a href="http://wiki.macrabbit.com/">plug-in doc</a></td>
+   <td style="text-align: center;">Yes</td>
+  </tr>
+  <tr>
+   <td><a href="https://wiki.gnome.org/Apps/Gedit">Gedit</a></td>
+   <td>GPL</td>
+   <td style="text-align: center;">Free</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://mail.gnome.org/mailman/listinfo/gedit-list" rel="external">Mailing list</a>, <a href="irc://irc.gnome.org/%23gedit">IRC</a></td>
+   <td><a href="https://help.gnome.org/users/gedit/stable/">Online Manual</a></td>
+   <td style="text-align: center;"><a href="https://wiki.gnome.org/Apps/Gedit/PluginsLists">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://komodoide.com/komodo-edit/" rel="external">Komodo Edit</a></td>
+   <td>MPL</td>
+   <td style="text-align: center;">Free</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://forum.komodoide.com/" rel="external">Forum</a></td>
+   <td><a href="http://docs.activestate.com/komodo/8.5/" rel="external">Online Manual</a></td>
+   <td style="text-align: center;"><a href="http://komodoide.com/resources/addons/">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.notepad-plus-plus.org/" rel="external">Notepad++</a></td>
+   <td>GPL</td>
+   <td style="text-align: center;">Free</td>
+   <td>Windows</td>
+   <td><a href="http://sourceforge.net/p/notepad-plus/discussion/">Forum</a></td>
+   <td><a href="http://npp-wiki.tuxfamily.org/index.php?title=Main_Page" rel="external">Wiki</a></td>
+   <td style="text-align: center;"><a href="http://npp-wiki.tuxfamily.org/index.php?title=Plugin_Central" rel="external">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.pspad.com/">PSPad</a></td>
+   <td>Closed source</td>
+   <td style="text-align: center;">Free</td>
+   <td>Windows</td>
+   <td><a href="http://gogogadgetscott.info/pspad/dotazy.htm">FAQ</a>, <a href="http://forum.pspad.com/" rel="external">Forum</a></td>
+   <td><a href="http://gogogadgetscott.info/pspad/">Online Help</a></td>
+   <td style="text-align: center;"><a href="http://www.pspad.com/en/pspad-extensions.php">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.sublimetext.com/" rel="external">Sublime Text</a></td>
+   <td>Closed source</td>
+   <td style="text-align: center;">$70</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://www.sublimetext.com/forum/viewforum.php?f=3" rel="external">Forum</a></td>
+   <td><a href="http://www.sublimetext.com/docs/3/">Official</a>,<a href="http://docs.sublimetext.info/en/latest/index.html"> Unofficial</a></td>
+   <td style="text-align: center;"><a href="https://sublime.wbond.net/">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://macromates.com/" rel="external">TextMate</a></td>
+   <td>Closed source</td>
+   <td style="text-align: center;">$50</td>
+   <td>Mac</td>
+   <td><a href="https://twitter.com/macromates">Twitter</a>, <a href="http://webchat.freenode.net/?channels=textmate">IRC</a>, <a href="http://lists.macromates.com/listinfo/textmate" rel="external">Mailing list</a>, <a href="mailto:tm-support@macromates.com">E-mail</a></td>
+   <td><a href="http://manual.macromates.com/en/">Online Manual</a>, <a href="http://wiki.macromates.com/Main/HomePage" rel="external">Wiki</a></td>
+   <td style="text-align: center;"><a href="http://wiki.macromates.com/Main/Plugins" rel="external">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.barebones.com/products/textwrangler/" rel="external">TextWrangler</a></td>
+   <td>Closed source</td>
+   <td style="text-align: center;">Free</td>
+   <td>Mac</td>
+   <td><a href="http://www.barebones.com/support/textwrangler/faqs.html" rel="external">FAQ</a>, <a href="https://groups.google.com/forum/#!forum/textwrangler">Forum</a></td>
+   <td><a href="http://ash.barebones.com/TextWrangler_User_Manual.pdf" rel="external">PDF Manual</a></td>
+   <td style="text-align: center;">No</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.vim.org/" rel="external">Vim</a></td>
+   <td><a href="http://vimdoc.sourceforge.net/htmldoc/uganda.html#license" rel="external">Specific open license</a></td>
+   <td style="text-align: center;">Free</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="http://www.vim.org/maillist.php#vim" rel="external">Mailing list</a></td>
+   <td><a href="http://vimdoc.sourceforge.net/">Online Manual</a></td>
+   <td style="text-align: center;"><a href="http://www.vim.org/scripts/script_search_results.php?order_by=creation_date&amp;direction=descending" rel="external">Yes</a></td>
+  </tr>
+  <tr>
+   <td><a href="https://code.visualstudio.com/download">Visual Studio Code</a></td>
+   <td><a href="https://github.com/microsoft/vscode">Open Source</a> under MIT licence/ Specific licence for product</td>
+   <td style="text-align: center;">Free</td>
+   <td>Windows, Mac, Linux</td>
+   <td><a href="https://code.visualstudio.com/docs/supporting/faq">FAQ</a>     </td>
+   <td><a href="https://code.visualstudio.com/docs">Documentation</a></td>
+   <td style="text-align: center;"><a href="https://marketplace.visualstudio.com/VSCode">Yes</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Активное_изучение">Активное изучение</h2>
+
+<p><em>Активное изучение пока не доступно. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Пожалуйста, рассмотрите возможность внести свой вклад</a>.</em></p>
+
+<h2 id="Копай_глебже">Копай глебже</h2>
+
+<h3 id="Критерии_выбора">Критерии выбора</h3>
+
+<p>Итак, более подробно, о чем вы должны думать, когда выбираете текстовый редактор?</p>
+
+<h4 id="С_какой_ОС_операционной_системой_я_хочу_работать">С какой ОС (операционной системой) я хочу работать?</h4>
+
+<p>Конечно, это Ваш выбор. Однако некоторые редакторы доступны только для определенных ОС, поэтому, если Вам нравится переключаться вперед и назад, это сузит возможности. Любой текстовый редактор может выполнить работу, если он работает в вашей системе, но кроссплатформенный редактор облегчает переход с ОС на ОС.</p>
+
+<p>So first find out which OS you're using, and then check if a given editor supports your OS. Most editors specify on their website whether they support Windows or Mac, though some editors only support certain versions (say, only Windows 7 or later and not Vista). If you're running Ubuntu, your best bet is to search within the Ubuntu Software Center. In general, of course, the Linux/UNIX world is a pretty diverse place where different distros work with different, incompatible packaging systems. That means, if you've set your heart on an obscure text editor, you may have to compile it from source yourself (not for the faint-hearted).</p>
+
+<h4 id="What_kind_of_technologies_do_I_want_to_manipulate">What kind of technologies do I want to manipulate?</h4>
+
+<p>Generally speaking, any text editor can open any text file. That works great for writing notes to yourself, but when you're doing web development and writing in {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("JavaScript")}}, you can produce some pretty large, complex files. Make it easier on yourself by choosing a text editor that understands the technologies you're working with. Many text editors help you out with features like</p>
+
+<ul>
+ <li><strong>Code coloring. </strong>Make your file more legible by color-coding keywords based on the technology you're using.</li>
+ <li><strong>Code completion. </strong>Save you time by auto-completing recurring structures (for example, automatically close HTML tags, or suggesting valid values for a given CSS property).</li>
+ <li><strong>Code snippets. </strong>As you saw when starting a new HTML document, many technologies use the same document structure over and over. Save yourself the hassle of retyping all this by using a code snippet to pre-fill your document.</li>
+</ul>
+
+<p>Most text editors now support code coloring, but not necessarily the other two features. Make sure in particular that your text editor color-codes {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("JavaScript")}}.</p>
+
+<h4 id="What_kind_of_basic_features_do_I_expect_from_my_text_editor">What kind of basic features do I expect from my text editor?</h4>
+
+<p>It depends on your needs and plans. These functionalities are often helpful:</p>
+
+<ul>
+ <li>Search-and-replace, in one or multiple documents, based on {{Glossary("Regular Expression", "regular expressions")}} or other patterns as needed</li>
+ <li>Quickly jump to a given line</li>
+ <li>View two parts of a large document separately</li>
+ <li>View HTML as it will look in the browser</li>
+ <li>Select text in multiple places at once</li>
+ <li>View your project's files and directories</li>
+ <li>Format your code automatically with code beautifier</li>
+ <li>Check spelling</li>
+</ul>
+
+<h4 id="Do_I_want_to_add_extra_features_to_my_text_editor">Do I want to add extra features to my text editor?</h4>
+
+<p>An extensible editor comes with fewer built-in features, but can be extended based on your needs.</p>
+
+<p>If you aren't sure which features you want, or your favorite editor lacks those features out of the box, look for an extensible editor. The best editors provide many plugins, and ideally a way to look for and install new plugins automatically.</p>
+
+<p>If you like <em>lots </em>of features and your editor is slowing down because of all your plugins, try using an IDE (integrated development environment). An IDE provides many tools in one interface and it's a bit daunting for beginners, but always an option if your text editor feels too limited. Here are some popular IDEs:</p>
+
+<ul>
+ <li><a href="http://www.aptana.com/">Aptana Studio</a></li>
+ <li><a href="https://eclipse.org/" rel="external">Eclipse</a></li>
+ <li><a href="http://komodoide.com/" rel="external">Komodo IDE</a></li>
+ <li><a href="https://netbeans.org/" rel="external">NetBeans IDE</a></li>
+ <li><a href="http://www.visualstudio.com/" rel="external">Visual Studio</a></li>
+ <li><a href="https://www.jetbrains.com/webstorm/" rel="external">WebStorm</a></li>
+</ul>
+
+<h4 id="Do_I_need_supporthelp_while_using_my_text_editor">Do I need support/help while using my text editor?</h4>
+
+<p>Always good to know if you can get help or not when using software. For text editors, check for two different kinds of support:</p>
+
+<ol>
+ <li>User-oriented content (FAQ, manual, online help)</li>
+ <li>Discussion with developers and other users (forum, email, IRC)</li>
+</ol>
+
+<p>Use the written documentation when you're learning how to use the editor. Get in touch with other users if you're troubleshooting while installing or using the editor.</p>
+
+<h4 id="Does_my_text_editors_look-and-feel_matter_to_me">Does my text editor's look-and-feel matter to me?</h4>
+
+<p>Well, that's a matter of taste, but some people like customizing every bit of the UI (user interface), from colors to button positions. Editors vary widely in flexibility, so check beforehand. It's not hard to find a text editor that can change color scheme, but if you want hefty customizing you may be better off with an IDE.</p>
+
+<h3 id="Install_and_set_up">Install and set up</h3>
+
+<p>Installing a text editor is usually quite straightforward. The method varies based on your platform but it shouldn't be too hard:</p>
+
+<ul>
+ <li><strong>Windows. </strong>The developers will give you an <code>.exe</code> or <code>.msi</code> file. Sometimes the software comes in a compressed archive like <code>.zip</code>, <code>.7z</code>, or <code>.rar</code>, and in that case you'll need to install an additional program to extract the content from the archive. Windows supports <code>.zip</code> by default.</li>
+ <li><strong>Mac. </strong>On the editor's website you can download a <code>.dmg</code> file. Some text editors you can find directly in the Apple Store to make installation even simpler.</li>
+ <li><strong>Linux. </strong>In the most popular distros you can start with your graphical package manager (Ubuntu Software Center, mintInstall, GNOME Software, &amp;c.). You can often find a <code>.deb</code> or <code>.rpm</code> file for prepackaged software, but most of the time you'll have to use your distro's repository server or, in worst case scenario, compile your editor from source. Take the time to carefully check the installation instructions on the text editor's website.</li>
+</ul>
+
+<p>When you install a new text editor, your OS will probably continue to open text files with its default editor until you change the <em>file association. </em>These instructions will help you specify that your OS should open files in your preferred editor when you double-click them:</p>
+
+<ul>
+ <li>Windows
+  <ul>
+   <li><a href="http://windows.microsoft.com/en-us/windows-8/choose-programs-windows-uses-default" rel="external">Windows 8</a></li>
+   <li><a href="http://windows.microsoft.com/en-us/windows/change-default-programs#1TC=windows-7" rel="external">Windows 7</a></li>
+   <li><a href="http://pcsupport.about.com/od/fixtheproblem/f/chdefprogram.htm">older systems</a></li>
+  </ul>
+ </li>
+ <li><a href="http://osxdaily.com/2013/08/08/change-default-application-open-files-mac-os-x/" rel="external">Mac OS X</a></li>
+ <li>Linux
+  <ul>
+   <li><a href="http://askubuntu.com/questions/289337/how-can-i-change-file-association-globally" rel="external">Ubuntu Unity</a></li>
+   <li><a href="https://help.gnome.org/users/gnome-help/stable/files-open.html.en" rel="external">GNOME</a></li>
+   <li><a href="http://doc.opensuse.org/documentation/html/openSUSE_113/opensuse-kdeuser/cha.kde.cust.html#pro.kde.cust.system.fileass">KDE</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>Now that you have a good text editor, you could take some time to finalize <a href="/en-US/Learn/Set_up_a_basic_working_environment">your basic working environment</a>, or, if you want to play with it right away, write <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">your very first web page</a>.</p>
diff --git a/files/ru/learn/common_questions/design_for_all_types_of_users/index.html b/files/ru/learn/common_questions/design_for_all_types_of_users/index.html
new file mode 100644
index 0000000000..8980f6ec00
--- /dev/null
+++ b/files/ru/learn/common_questions/design_for_all_types_of_users/index.html
@@ -0,0 +1,224 @@
+---
+title: 'Как создать дизайн, подходящий для всех пользователей?'
+slug: Learn/Common_questions/Design_for_all_types_of_users
+tags:
+  - Дизайн
+  - Мобильность
+  - Начинающий
+  - доступность
+translation_of: Learn/Common_questions/Design_for_all_types_of_users
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+
+<div class="summary">
+<p>Эта статья содержит основные советы, которые помогут вам создавать веб-сайты для любого типа пользователей.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Перед началом:</th>
+   <td>Сначала вам следует прочитать <a href="/en-US/Learn/What_is_accessibility">What is accessibility?</a>, поскольку мы не рассматриваем здесь <strong>доступность </strong>подробно.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Универсальный дизайн означает дизайн для всех, независимо от инвалидности или технических ограничений. В этой статье перечислены наиболее важные характеристики для универсального дизайна.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Краткое_описание">Краткое описание</h2>
+
+<p>Когда вы создаете веб-сайт, одна из главных проблем, которую нужно учитывать, - это универсальный дизайн: доступность для всех пользователей независимо от инвалидности, технических ограничений, культуры, местоположения и так далее.</p>
+
+<h2 id="Более_глубокое_изучение">Более глубокое изучение</h2>
+
+<h3 id="Цветовой_контраст">Цветовой контраст</h3>
+
+<p>Чтобы сделать ваш текст читаемым, используйте цвет текста, который хорошо контрастирует с цветом фона. Сделайте его особенно легким для чтения текста, чтобы помочь слабовидящим людям и людям, использующим свои телефоны на улице.</p>
+
+<p>{{Glossary("W3C")}} определяет хорошее сочетание цветов с помощью алгоритма, который вычисляет соотношение яркости между передним и задним планом. Расчет может показаться довольно сложным, но мы можем положиться на инструменты, которые сделают эту работу за нас.</p>
+
+<p>Давайте загрузим и установим <a href="http://www.paciellogroup.com/resources/contrastanalyser/">анализатор цветового контраста</a> Paciello Group.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: в качестве альтернативы вы можете найти ряд инструментов проверки контраста в интернете, таких как <a href="http://webaim.org/resources/contrastchecker/">проверка цветового контраста</a> WebAIM. Мы предлагаем локальную проверку, потому что она поставляется в комплекте с экранным цветоподборщиком, чтобы узнать значение цвета.</p>
+</div>
+
+<p>Например, давайте протестируем цвета на этой странице и посмотрим, как мы справляемся с анализатором цветового контраста:</p>
+
+<p><img alt="Colour contrast on this page: excellent!" src="https://mdn.mozillademos.org/files/9671/colour-contrast.png" style="height: 575px; width: 799px;"></p>
+
+<p>Коэффициент контрастности яркости между текстом и фоном составляет 8,30:1, что превышает минимальный стандарт (4,5: 1) и должно позволить многим слабовидящим людям читать эту страницу.</p>
+
+<h3 id="Размер_шрифта">Размер шрифта</h3>
+
+<p>Вы можете указать размер шрифта на веб-сайте либо в относительных, либо в абсолютных единицах.</p>
+
+<h4 id="Абсолютные_единицы">Абсолютные единицы</h4>
+
+<p>Абсолютные единицы измерения не рассчитываются пропорционально, а относятся к размеру, так сказать, набранному в камне, и выражаются большую часть времени в пикселях (<code>px</code>). Например, если в вашем CSS вы объявите это:</p>
+
+<pre>body { font-size:16px; }
+</pre>
+
+<p>... вы говорите браузеру, что бы ни случилось, размер шрифта должен быть 16 пикселей. Современные браузеры обходят это правило, делая вид, что вы просите "16 пикселей, когда пользователь устанавливает коэффициент масштабирования 100%".</p>
+
+<p>Однако, на протяжении многих лет Internet Explorer категорически отображается 16 на 16 пикселей. В этом случае масштабирование ничего не дало, даже в последнем Internet Explorer 8, который нам все еще приходится обслуживать, потому что он все еще существует.</p>
+
+<h4 id="Относительные_единицы">Относительные единицы</h4>
+
+<p>Также называемые пропорциональными единицами, относительные единицы вычисляются относительно родительского элемента. Относительные единицы измерения более дружелюбны к доступности, потому что они уважают настройки в системе пользователя.</p>
+
+<p>Относительные единицы обычно выражаются в <code>em</code>, <code>%</code> и <code>rem</code>:</p>
+
+<dl>
+ <dt>Процентные размеры: <code>%</code></dt>
+ <dd>Этот блок сообщает вашему браузеру, что размер шрифта элемента должен составлять N% от предыдущего элемента, размер шрифта которого был выражен. Если родитель не найден, то размер шрифта по умолчанию в браузере считается базовым размером для расчета (обычно эквивалентным 16 пикселям).</dd>
+ <dt>Em размеры: <code>em</code></dt>
+ <dd>Эта единица вычисляется так же, как и проценты, за исключением того, что вы вычисляете в частях 1, а не в частях 100. Говорят, что "em" - это ширина заглавной буквы “М” в алфавите (грубо говоря, буква “М” вписывается в квадрат).</dd>
+ <dt>Rem размеры: <code>rem</code></dt>
+ <dd>Эта единица измерения пропорциональна размеру шрифта корневого элемента и выражается в виде частей, таких как em.</dd>
+</dl>
+
+<p>Предположим, что нам нужен базовый размер шрифта 16px и h1 (основной заголовок) в эквиваленте 32px, но если в пределах h1 мы найдем <code>промежуток </code>с классом <code>подзаголовков</code>, он тоже должен быть отрисован с размером шрифта по умолчанию (обычно 16px).</p>
+
+<p>Вот HTML, который мы используем:</p>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Эксперимент с размером шрифта&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+    &lt;h1&gt;Это наш главный заголовок
+        &lt;span class="subheading"&gt;Это подзаголовок&lt;/span&gt;
+    &lt;/h1&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>CSS на основе процентов будет выглядеть следующим образом:</p>
+
+<pre>body { font-size:100%; } /* 100% от базового размера шрифта браузера, поэтому в большинстве случаев он будет отображаться как 16 пикселей*/
+h1 { font-size:200%; } /* в два раза больше размера тела, таким образом, 32 пикселя */
+span.subheading { font-size:50%; } /* половина размера h1, таким образом, 16 пикселей, чтобы вернуться к исходному размеру */
+</pre>
+
+<p>Та же проблема выражена и с ems:</p>
+
+<pre>body { font-size:1em; } /* 1em = 100% от базового размера браузера, так что в большинстве случаев это будет выглядеть как 16 пикселей */
+h1 { font-size:2em; } /* в 2 раза больше размера тела, так что 32 пикселя */
+span.subheading { font-size:0.5em; } /* половина размера h1, таким образом, 16 пикселей, чтобы вернуться к исходному размеру */
+</pre>
+
+<p>Как вы можете видеть, математика быстро становится сложной, когда вам нужно следить за родителем, родителем родителя, родителем родителя родителя и так далее. (Большинство проектов выполняется в пиксельном программном обеспечении, поэтому математику должен выполнять человек, кодирующий CSS).</p>
+
+<p>Теперь о <code>rem</code>. Эта единица измерения относится к размеру корневого элемента, а не к какому-либо другому родительскому элементу. CSS можно переписать таким образом:</p>
+
+<pre>body { font-size:1em; } /* 1em = 100% от базового размера браузера, так что в большинстве случаев это будет выглядеть как 16 пикселей */
+h1 { font-size:2rem; } /* в 2 раза больше размера тела, так что 32 пикселя */
+span.subheading { font-size:1rem; } /* исходный размер */
+</pre>
+
+<p>Так ведь проще, правда? Это работает как в Internet Explorer 9, так и в любом другом поддерживаемом браузере, поэтому, пожалуйста, не стесняйтесь использовать этот способ.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Вы можете заметить, что Opera Mini не поддерживает размер шрифта в rem. В конечном итоге он будет устанавливать свой собственный размер шрифта, так что не утруждайте себя кормлением его единицами шрифта.</p>
+</div>
+
+<h4 id="Почему_мне_следует_использовать_пропорциональные_единицы_измерения">Почему мне следует использовать пропорциональные единицы измерения?</h4>
+
+<p>Потому что вы не знаете, когда браузер придет в себя и откажется увеличивать текст, размер которого выражается в пикселях. Кроме того, проверьте статистику вашего сайта: вы можете получать визиты из старых браузеров.</p>
+
+<p>Мы бы посоветовали следующее:</p>
+
+<ul>
+ <li>Опишите шрифты в единицах rem, большинство браузеров будут очень довольны ими;</li>
+ <li>Пусть старые браузеры отображают шрифты со своим собственным внутренним движком. Браузерные движки будут игнорировать любое свойство или значение в CSS, если они не могут справиться с ними, так что ваш сайт все еще может быть непригодным для использования, если он не соответствует видению вашего дизайнера. Старые браузеры в любом случае находятся на пути к выходу из использования.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: ваш пробег может варьироваться. Если вам нужно угодить старым браузерам, вам придется использовать ems и сделать немного больше математики.</p>
+</div>
+
+<h3 id="Длина_строки">Длина строки</h3>
+
+<p>Существует давняя дискуссия о длине строки в интернете, но вот история. Еще в те времена, когда у нас были газеты, Печатники понимали, что глаза читателя будут с трудом переходить от одной строки к другой, если строки будут слишком длинными. Какое же решение? Столбцы.</p>
+
+<p>Конечно, проблема не исчезает, когда мы переключаемся на интернет. Глаза читателя действуют как челнок, идущий от строки к строке. Чтобы сделать чтение проще для глаз людей, ограничьте ширину строки примерно 60 или 70 символами.</p>
+
+<p>Для этого вы можете указать размер контейнера вашего текста. Давайте рассмотрим этот HTML:</p>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Эксперимент с размером шрифта&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;div class="container"&gt;
+    &lt;h1&gt;Это наш главный заголовок
+        &lt;span class="subheading"&gt;Это наш подзаголовок&lt;/span&gt;
+    &lt;/h1&gt;
+
+    &lt;p&gt;[длинный текст, который занимает много строк]&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>У нас есть <code>div</code> с классом <code>container</code>. Мы можем стилизовать <code>div</code> либо для установки его ширины (используя свойство <code>width</code>), либо для его максимальной ширины, чтобы он никогда не становился слишком большим (используя свойство <code>max-width</code>). Если вам нужен эластичный/адаптивный веб-сайт, и вы не знаете, какова ширина браузера по умолчанию, вы можете использовать свойство <code>max-width</code>, чтобы разрешить до 70 символов в строке и не более:</p>
+
+<pre>div.container { max-width:70em; }</pre>
+
+<h3 id="Альтернативный_контент_для_изображений_аудио_и_видео">Альтернативный контент для изображений, аудио и видео</h3>
+
+<p>Веб-сайты часто включают в себя разные вещи, помимо обычного текста.</p>
+
+<h4 id="Изображения">Изображения</h4>
+
+<p>Изобажения могут быть декоративными или информационными, но нет гарантий, что пользователь сможет увидеть их. Например,</p>
+
+<ul>
+ <li>Слабовидящие пользователи полагаются на средство чтения с экрана, которое может обрабатывать только текст.</li>
+ <li>Ваши читатели могут использовать очень строгую интрасеть, которая блокирует изображения, исходящие из {{Glossary("CDN")}}.</li>
+ <li>Ваши читатели могут отключить изображения для экономии пропускной способности, особенно на мобильных устройствах (см. ниже).</li>
+</ul>
+
+<dl>
+ <dt>Декоративные изображения</dt>
+ <dd>Они просто для украшения и не передают никакой полезной информации. Чаще всего их можно было бы заменить фоновым изображением. Убедитесь, что они имеют пустой атрибут <code>alt</code>: <code>&lt;img src="deco.gif" alt=""&gt;</code>, чтобы они не засоряли текст.</dd>
+ <dt>Информационнные изоражения</dt>
+ <dd>Они используются для передачи информации, отсюда и их название. Они могут, например, показать график, жест человека или любую другую информацию. Как минимум, вы должны предоставить соответствующий атрибут <code>alt</code>.</dd>
+</dl>
+
+<p>Если изображение может быть описано кратко, вы можете предоставить атрибут <code>alt </code>и ничего больше. Если изображение не может быть описано кратко, вам придется либо предоставить тот же контент в другой форме на той же странице (например, дополнить круговую диаграмму таблицей, содержащей те же данные), либо прибегнуть к атрибуту <code>longdesc</code>. Значение этого атрибута представляет собой URL-адрес, указывающий на ресурс, явно описывающий в деталях содержимое изображения.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: использование и даже существование <code>longdesc </code>обсуждается уже довольно давно. Пожалуйста, обратитесь к <a href="http://www.w3.org/TR/html-longdesc/">расширению описания изображений</a> W3C (longdesc) для получения полного объяснения и подробных примеров.</p>
+</div>
+
+<h4 id="Аудиовидео">Аудио/видео</h4>
+
+<p>Также вам стоит предоставдять альтернативы мультимедийному контенту.</p>
+
+<dl>
+ <dt>Субтитры / закрытие субтитров</dt>
+ <dd>Вы должны включить подписи в свое видео, чтобы угодить посетителям, которые не могут слышать звук. Некоторые пользователи имеют проблемы со слухом, не имеют функционирующих динамиков или работают в шумной среде (например, в поезде).</dd>
+ <dt>Расшифровка</dt>
+ <dd>Субтитры работают только в том случае, если кто-то смотрит видео. Многие пользователи не имеют времени или не имеют соответствующего плагина или кодека. Кроме того, поисковые системы полагаются в основном на текст для индексации вашего контента. По всем этим причинам, пожалуйста, предоставьте текстовую расшифровку видео / аудиофайла.</dd>
+</dl>
+
+<h3 id="Сжатие_изображения">Сжатие изображения</h3>
+
+<p>Некоторые пользователи могут выбрать отображение изображений, но все еще имеют ограниченную пропускную способность, особенно в развивающихся странах и на мобильных устройствах. Если вы хотите создать успешный сайт, пожалуйста, сожмите ваши изображения. Существуют различные инструменты, которые помогут вам, как онлайн, так и локально:</p>
+
+<ul>
+ <li><strong>Устанавливаемое программное обеспечение.</strong> <a href="https://imageoptim.com/">ImageOptim</a> (Mac), <a href="http://optipng.sourceforge.net/">OptiPNG</a> (все платформы), <a href="http://pmt.sourceforge.net/pngcrush/">PNGcrush</a> (DOS, Unix/Linux)</li>
+ <li><strong>Онлайн инструменты.</strong> Yahoo's <a href="https://imgopt.com/">smushit</a>!, <a href="http://tools.dynamicdrive.com/imageoptimizer/">Онлайн-оптимизатор изображений Dynamic</a> drive (который может автоматически преобразовываться из одного формата в другой, если он более эффективен с пропускной способностью)</li>
+</ul>
diff --git a/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html b/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html
new file mode 100644
index 0000000000..8cc55f9d12
--- /dev/null
+++ b/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html
@@ -0,0 +1,60 @@
+---
+title: Как разместить свой сайт в Google App Engine
+slug: Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine
+translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine
+---
+<p class="summary"><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web &amp; Mobile Backends in Any Language  |  Google Cloud Platform">Google App Engine</a> - это мощная платформа, которая позволяет создавать и запускать приложения в инфраструктуре Google - нужно ли создавать многоуровневое веб-приложение с нуля или размещать статический веб-сайт. Вот пошаговое руководство по размещению вашего сайта в Google App Engine.</p>
+
+<h2 id="Создание_проекта_Google_Cloud_Platform">Создание проекта Google Cloud Platform</h2>
+
+<p>Чтобы использовать инструменты Google для своего собственного сайта или приложения, вам нужно создать новый проект на Google Cloud Platform. Для этого требуется наличие учетной записи Google.</p>
+
+<ol>
+ <li>Перейдите на панель <a href="https://console.cloud.google.com/projectselector/appengine">App Engine dashboard</a> в консоли Google Cloud Platform и нажмите кнопку «Создать» (<em>Create</em>).</li>
+ <li>Введите название проекта, отредактируйте свой ID проекта и отметьте его. Для этого урока используются следующие значения:
+  <ul>
+   <li>Project name: <em>GAE Sample Site</em></li>
+   <li>Project ID: <em>gaesamplesite</em></li>
+  </ul>
+ </li>
+ <li>Если вы еще не создали проект раньше, вам нужно будет выбрать, хотите ли вы получать обновления электронной почты или нет, соглашайтесь с Условиями обслуживания, а затем вы можете нажать кнопку «Создать», чтобы создать свой проект.</li>
+</ol>
+
+<h2 id="Создание_приложения">Создание приложения</h2>
+
+<p>Каждый проект Cloud Platform может содержать одно приложение App Engine. Давайте подготовим приложение для нашего проекта.</p>
+
+<ol>
+ <li>Нам понадобится образец приложения для публикации. Если у вас его нет, загрузите и распакуйте это <a href="http://gaesamplesite.appspot.com/downloads.html">sample app</a>..</li>
+ <li>Посмотрите на структуру образца приложения - папка <code>website</code> содержит содержимое вашего сайта, а <code>app.yaml</code> - ваш файл конфигурации приложения.
+  <ul>
+   <li>Ваш веб-сайт должен войти в папку <code>website</code>, а его целевую страницу нужно называть <code>index.html</code>, но кроме того, она может принимать любую форму.</li>
+   <li>Файл <code>app.yaml</code> - это файл конфигурации, который сообщает App Engine, как сопоставлять URL-адреса вашим статическим файлам. Вам не нужно его редактировать.</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="Публикация_приложения">Публикация приложения</h2>
+
+<p>Каждый проект Cloud Platform может содержать одно приложение App Engine. Давайте подготовим приложение для нашего проекта.</p>
+
+<ol>
+ <li>Нажмите кнопку Активировать Google Cloud Shell в верхней части окна консоли.<br>
+  <img alt="Activate Google Cloud Shell button" src="https://mdn.mozillademos.org/files/15041/activate-google-cloud-shell-button.png" style="height: 47px; margin: 1em 0; width: 1279px;"></li>
+ <li>Откройте редактор кода с панели инструментов Cloud Shell.<br>
+  <img alt="Code Editor from Cloud Shell toolbar" src="https://mdn.mozillademos.org/files/15940/Screen%20Shot%202018-05-09%20at%2023.13.21.png" style="height: 590px; width: 3000px;"></li>
+ <li>С помощью drag and drop разместите папку <code>sample-app</code> в левой панели редактора кода.</li>
+ <li>Вернитесь обратно в Cloud Shell и введите следующую команду для перехода в директорию вашего приложения:
+  <pre class="brush:bash no-line-numbers notranslate" style="margin: 1em 0;">cd sample-app</pre>
+ </li>
+ <li>Теперь вы готовы развернуть ваше приложение, т.е. загрузить его в App Engine:
+  <pre class="brush:bash no-line-numbers notranslate" style="margin: 1em 0;">gcloud app deploy</pre>
+ </li>
+ <li>Введите число от одного до семи, чтобы выбрать регион, в котором вы хотите разместить свое приложение.</li>
+ <li>Нажмите <code>Y</code> для подтверждения.</li>
+ <li>Теперь перейдите по ссылке <em>your-project-id</em>.appspot.com, чтобы увидеть ваш сайт. Например, для проекта с ID <em>gaesamplesite, </em>перейдите по ссылке <a href="http://gaesamplesite.appspot.com/">gaesamplesite.appspot.com</a>.</li>
+</ol>
+
+<h2 id="See_also">See also</h2>
+
+<p>Чтобы узнать больше, смотрите <a href="https://cloud.google.com/appengine/docs/">Google App Engine Documentation</a>.</p>
diff --git a/files/ru/learn/common_questions/how_much_does_it_cost/index.html b/files/ru/learn/common_questions/how_much_does_it_cost/index.html
new file mode 100644
index 0000000000..315fcf623a
--- /dev/null
+++ b/files/ru/learn/common_questions/how_much_does_it_cost/index.html
@@ -0,0 +1,159 @@
+---
+title: Насколько дорого обойдется сделать что-то с помощью Web?
+slug: Learn/Common_questions/How_much_does_it_cost
+tags:
+  - Хостинг
+  - начинающему
+  - стоимость
+translation_of: Learn/Common_questions/How_much_does_it_cost
+---
+<div class="summary">
+<p>Веб-разработка обходится не так дешево, как вам может показаться. В этой статье мы обсудим, как много вам потребуется потратить и почему.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Прежде чем приступить:</th>
+   <td>Вам следует уже иметь представление о том, <a href="/en-US/Learn/What_software_do_I_need">какое программное обеспечение вам нужно</a>, различия между веб-страницей, веб-сайтом, и тд, а также о том, <a href="/en-US/Learn/Understanding_domain_names">что из себя представляет доменное имя</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Рассмотреть весь процесс создания веб-сайта и оценить расходы на каждом шаге.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Резюме">Резюме</h2>
+
+<p><span class="seoSummary">Запуск сайта может вам обойтись в сущее ничто, однако, ваши расходы могут достичь и критических значений. В этой статье мы обсудим, как дорого может что-либо стоить, и как вам получить то, за что вы заплатили (или не платили). </span></p>
+
+<h2 id="Программное_обеспечение">Программное обеспечение</h2>
+
+<h3 id="Текстовые_редакторы">Текстовые редакторы</h3>
+
+<p>Вероятно, у вас уже есть текстовый редактор: например, блокнот на Windows, Gedit на Linux, TextEdit на Mac. Но вам будет легче писать код, если вы выберете редактор, который имеет подсветку синтаксиса и поможет вам наладить структуру кода.</p>
+
+<p>Многие редакторы бесплатны, например, <a href="https://atom.io/">Atom</a>, <a href="http://brackets.io/">Brackets</a>, <a href="http://bluefish.openoffice.nl/">Bluefish</a>, <a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a>, <a href="http://eclipse.org/">Eclipse</a>, <a href="https://netbeans.org/">Netbeans</a>, и <a href="https://code.visualstudio.com/">Visual Studio Code. </a>Некоторые, такие как <a href="http://www.sublimetext.com/">Sublime Text</a>, вы можете использовать в пробном режиме сколько угодно, но при этом, будете получать рекомендации о возможности приобретения. Некоторые, такие как <a href="https://www.jetbrains.com/phpstorm/">PhpStorm</a>, могут стоить от нескольких десятков до 200 долларов, в зависимости от выбранного плана. Наконец, есть те из них, такие как <a href="http://www.visualstudio.com/">Microsoft Visual Studio</a>, которые могут стоить сотни или даже тысячи долларов; хотя Visual Studio Community бесплатна для индивидуальных разработчиков или проектов с открытым исходным кодом. Часто, у платных редакторов есть также пробные версии.</p>
+
+<p>Для начала, мы предлагаем вам попробовать несколько редакторов, чтобы понять, какой из них подходит лучше вам. Если вы пишите лишь простые {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("Javascript")}}, используйте простой редактор.</p>
+
+<p>Цена не влияет на качество или полезность текстового редактора. Вам необходимо попробовать и решить какой из них отвечает вашим потребностям. К примеру, Sublime Text дешевый, но поставляется с множеством бесплатных плагинов которые могут здорово расширить его функциональность.</p>
+
+<h3 id="Редакторы_изображений">Редакторы изображений</h3>
+
+<p>Ваша система, вероятно, включает в себя простой редактор изображений или просмотрщик: Paint на Windows, Eye of Gnome на Ubuntu, Preview на Mac. Эти программы относительно ограничены, и в скоре вы захотите более развитый редактор, чтобы иметь возможность добавлять слои, накладывать эффекты и группировать объекты.</p>
+
+<p>Редакторы могут быть бесплатными (<a href="http://www.gimp.org/">GIMP</a>, <a href="https://www.getpaint.net/">Paint.NET</a>), относительно недорогими (<a href="http://www.paintshoppro.com/">PaintShop Pro</a>, меньше чем $100), или иметь стоимость в пару сотен долларов (<a href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a>).</p>
+
+<p>Вы можете использовать любой из них, так как они имеют похожую функциональность, хотя некоторые из них настолько всеобъемлющие, что вы никогда не сможете использовать весь их функционал. Если в какой то момент вам необходимо обменяться проектами с другими дизайнерами, то вам следует выяснить, какие инструменты они используют. Редакторы могут экспортировать законченные проекты в стандартные форматы, но каждый редактор сохраняет текущие проекты в своем собственном, специализированном формате. Большинство изображений в интернете защищены авторским правом, так что лучше проверить лицензию файла, перед его использованием. Такие сайты, как <a href="https://pixabay.com/">Pixabay</a>, предоставляют изображения под лицензией Creative Commons Zero, так что вы можете использовать, редактировать, и даже публиковать их после изменения, ради коммерческой выгоды.</p>
+
+<h3 id="Медиа_редакторы">Медиа редакторы</h3>
+
+<p>Если вы хотите встроить видео или аудио в ваш веб-сайт, то вы можете встроить онлайн сервисы (например, YouTube, Vimeo, или Dailymotion), или встроить ваши собственные видео (см. ниже расходы на пропускную способность).</p>
+
+<p>Для аудиофайлов, вы можете найти бесплатное программное обеспечение (<a href="http://audacity.sourceforge.net/?lang=en">Audacity</a>, <a href="http://www.wavosaur.com/">Wavosaur</a>), либо заплатить пару сотен долларов (<a href="http://www.sonycreativesoftware.com/soundforge">Sony Sound Forge</a>, <a href="http://www.adobe.com/products/audition.html">Adobe Audition</a>). Подобным образом, видеоредакторы могут быть бесплатными (<a href="http://www.pitivi.org/">PiTiVi</a>, <a href="http://www.openshot.org/">OpenShot</a> для Linux, <a href="https://www.apple.com/mac/imovie/">iMovie</a> для Mac), менее чем $100 (<a href="https://www.adobe.com/us/products/premiere-elements.html">Adobe Premiere Elements</a>), либо иметь стоимость в пару сотен долларов (<a href="https://www.adobe.com/products/premiere.html">Adobe Premiere Pro</a>, <a href="http://www.avid.com/US/products/family/Media-Composer">Avid Media Composer</a>, <a href="https://www.apple.com/final-cut-pro/">Final Cut Pro</a>). Программное обеспечение, поставляемое с вашей цифровой камерой может, также, удовлетворить все ваши нужды.</p>
+
+<h3 id="Инструменты_публикации">Инструменты публикации</h3>
+
+<p>Вам также потребуется возможность выгрузки файлов: с вашего жесткого диска на удаленный веб-сервер. Чтобы осуществить это, вам потребуется утилита для публикации, такая как (S)<a href="/en-US/docs/Glossary/FTP">FTP client</a>, <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a>, или <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p>
+
+<p>Каждая операционная система включает (S)FTP клиент, как часть своего файлового менеджера. Проводник Windows, Nautilus (распрастраненный файловый менеджер Linux), и Mac Finder - все имеют такую функциональность. Однако, люди часто выбирают удаленные (S)FTP клиенты, для одновременного отображения локальных и удаленных каталогов и хранения паролей сервера.</p>
+
+<p>Если вы хотите установить (S)FTP клиент, то существует несколько, заслуживающих доверия, бесплатных вариантов: <a href="https://filezilla-project.org/">FileZilla</a>, <a href="http://winscp.net/">WinSCP</a> для Windows, <a href="https://cyberduck.io/">Cyberduck</a> для Mac/Windows, <a href="https://en.wikipedia.org/wiki/List_of_FTP_server_software">и другие</a>.</p>
+
+<p>Из-за того, что FTP по своей природе небезопасен, вам следует использовать SFTP — безопасную, зашифрованную версию FTP, которую большинство хостинговых сайтов будут предлагать вам по умолчанию  — или другое безопасное решение, такое как Rsync, работающее через SSH.</p>
+
+<h2 id="Браузеры">Браузеры</h2>
+
+<p>У вас уже есть браузер либо вы можете  загрузить его бесплатно. Если необходимо, загрузите Firefox <a href="https://www.mozilla.org/en-US/firefox/all/">отсюда</a> или Google Chrome <a href="https://www.google.com/chrome/browser/">отсюда</a>.</p>
+
+<h2 id="Веб-доступ">Веб-доступ</h2>
+
+<h3 id="Компьютер_модем">Компьютер / модем</h3>
+
+<p>Вам необходим компьютер. Расходы могут сильно варьироваться, в зависимости от вашего бюджета и места проживания. Чтобы опубликовать простой сайт, вам нужен компьютер, способный хотя бы запустить редактор и веб-браузер, таким образом порог вхождения довольно низок.</p>
+
+<p>Конечно же, вам необходим более мощный компьютер, если вы хотите проектировать сложные конструкции, править фотографии или создавать аудио и видеофайлы.</p>
+
+<p>Вам потребуется загружать контент на удаленный сервер (<em>см. ниже Хостинг</em>), а значит вам потребуется модем. Ваш {{Glossary("ISP", "провайдер")}} может предоставлять доступ в интернет вам за пару долларов в месяц, однако, это также зависит от места вашего проживания.</p>
+
+<h3 id="Доступ_по_провайдеру">Доступ по провайдеру</h3>
+
+<p>Убедитесь что у вас достаточная {{Glossary("Bandwidth", "скорость передачи данных")}}:</p>
+
+<ul>
+ <li>Доступ с низкой пропускной способностью может быть приемлем для простого веб-сайта: изображения, тексты, немного CSS и JavaScript. Это, вероятно, обойдется вам в пару долларов, включая аренду модема.</li>
+ <li>С другой стороны, вам потребуется соединения с высокой пропускной способностью, такие как DSL, оптоволокно, если вы хотите более сложный веб-сайт с сотнями файлов, или если вы хотите предоставить доступ к тяжелым видео/аудио файлам напрямую с вашего веб-сервера. Это может стоить столько же, сколько при соединении с низкой пропускной способностью, а может вырасти до пары сотен долларов в месяц, за более профессиональные потребности.</li>
+</ul>
+
+<h2 id="Хостинг">Хостинг</h2>
+
+<h3 id="Понимание_пропускной_способности">Понимание пропускной способности</h3>
+
+<p>Хостинг-провайдеры взимают плату в зависимости от того, сколько {{Glossary("Bandwidth", "bandwidth")}} ваш веб-сайт потребил. Это зависит от того как много людей и бот-сканеров получали доступ к вашему контенту за определенный промежуток времени, и, как много серверного пространства этот контент занимает. Вот почему многие люди, обычно, размещают их видео на удаленных сервисах, таких как Youtube, Dailymotion, и Vimeo. Например, ваш провайдер может иметь план, который позволяет выдерживать до нескольких тысяч посетителей в день. Однако, будьте осторожны, так как это условие меняется от одного провайдера к другому. Возьмите за правило, что надежный, платный персональный хостинг может стоить около 10-15 долларов в месяц.</p>
+
+<div class="note">
+<p>Заметьте, что не существует такого понятия, как "неограниченная пропускная способность". Если вы использовали огромное количество трафика, будьте готовы выплатить огромную сумму денег.</p>
+</div>
+
+<h3 id="Доменные_имена">Доменные имена</h3>
+
+<p>Ваше доменное имя должно быть приобретено через провайдера доменных имен (регистратор). Ваш хостинг-провайдер может также быть регистратором (<a href="https://www.1and1.com/">1&amp;1</a>, <a href="https://www.gandi.net/?lang=en">Gandi</a>, например, являются в одно и тоже время регистраторами и хостинг-провайдерами). Доменное имя обычно имеет стоимость в $5-15 за год. Эта цена варьируется в зависимости от:</p>
+
+<ul>
+ <li>Местных обязательств: В некоторых странах домены верхнего уровня стоят дороже, так как разные страны устанавливают различные цены.</li>
+ <li>Сервисов, ассоциированных с доменным именем: некоторые регистраторы предоставляют защиту от спама, скрывая ваш почтовый адрес и адрес электронной почты за их собственными адресами: почтовый адрес может быть под покровительством регистратора, и ваш электронный адрес может быть скрыт под псевдонимом регистратора.</li>
+</ul>
+
+<h3 id="Самодельный_хостинг_vs._хостинг_“из_коробки”">Самодельный хостинг vs. хостинг “из коробки”</h3>
+
+<p>Когда вы хотите опубликовать веб-сайт, вы можете сделать все самостоятельно: настроить базу данных (если требуется), Систему управления наполнением, или {{Glossary("CMS")}} (такую как <a href="http://wordpress.org/">Wordpress</a>, <a href="http://dotclear.org/">Dotclear</a>, <a href="http://www.spip.net/en_rubrique25.html">spip</a>, и тд.), загружать заранее подготовленные вами шаблоны.</p>
+
+<p>Вы можете использовать среду хостинг-провайдера, примерно за 10-15 долларов в месяц, или подписаться напрямую к удаленному хостинг-сервису с предустановленным CMSs (такие как, <a href="http://wordpress.com/">Wordpress</a>, <a href="https://www.tumblr.com/">Tumblr</a>, <a href="https://www.blogger.com/">Blogger</a>). В последнем случае, вам не придется платить ни за что, но вы будете иметь меньше контроля над шаблонами и другими элементами.</p>
+
+<h3 id="Бесплатный_хостинг_vs._платный">Бесплатный хостинг vs. платный</h3>
+
+<p>Вы могли бы задать вопрос, почему мне следует платить за хостинг, когда существует так много бесплатных сервисов?</p>
+
+<ul>
+ <li>У вас есть больше свободы, когда вы платите. Ваш веб-сайт только в ваших руках, и вы можете легко перейти от одного хостинг-провайдера к другому.</li>
+ <li>Бесплатные хостинги могут добавлять рекламные обьявления к вашему контенту, в обход вашего контроля.</li>
+</ul>
+
+<p>Лучше обратиться к платному хостингу, чем полагаться на бесплатный, так как большинство платных сайтов гарантируют бесперебойную работу и позволяют с легкостью управлять файловой структурой. Большинство хостинг-провайдеров предоставят вам огромную скидку для старта.</p>
+
+<p>Некоторые люди выбирают смешанный подход. Например, их главный блог на платном хосте, с полным доменном именем, а неожиданный менее важный контент, на бесплатном хосте.</p>
+
+<h2 id="Профессиональные_веб-сайты_агенств_и_хостингов">Профессиональные веб-сайты агенств и хостингов</h2>
+
+<p>Если вы хотите профессиональный веб-сайт, вы можете обратиться в агентство по веб-разработке, чтобы оно сделало его для вас.<br>
+ <br>
+ Здесь перечислены расходы, зависящие сразу от нескольких факторов:</p>
+
+<ul>
+ <li>Это простой веб-сайт с парой страничек текста? Или более сложный, с около тысячей страниц?</li>
+ <li>Будете ли вы его обновлять регулярно? или это будет статический веб-сайт?</li>
+ <li>Должен ли веб-сайт подсоединяться к IT структуре вашей компании, чтобы собирать контент (например, внутренние данные)?</li>
+ <li>Хотите ли вы какую-нибудь уникальную функцию, которая сейчас в моде?</li>
+ <li>Хотите ли вы, чтобы агенство решало сложные проблемы пользователей {{Glossary("UX")}}?</li>
+</ul>
+
+<p>...и для хостинга:</p>
+
+<ul>
+ <li>Хотите ли вы имет резервный сервер, если вдруг ваш упадет?</li>
+ <li>Надежность 95%, или вам требуется круглосуточный сервис обслуживания?</li>
+ <li>Вам нужны высокопроизводительные, сверхчувствительные удаленные серверы или вам будет достаточно более медленной, машиной, предназначенной для совместного использования.</li>
+</ul>
+
+<p>В зависимости от ответа на эти вопросы, ваш сайт может обойтись вам в тысячи или даже сотни тысяч долларов.</p>
+
+<h2 id="Следующие_шаги">Следующие шаги</h2>
+
+<p>На данный момент у вас есть понимание того, во сколько вам может обойтись ваш сайт, так что настало время проектирования веб-сайта и <a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">настройки вашего рабочего пространства.</a></p>
+
+<ul>
+ <li>Прочитайте о том, <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">как выбрать и установить текстовый редактор</a>.</li>
+ <li>Если вы больше сфокусированы на проектировании, взгляните на <a href="/en-US/Learn/Anatomy_of_a_web_page">анатомию веб-страницы</a>.</li>
+</ul>
diff --git a/files/ru/learn/common_questions/index.html b/files/ru/learn/common_questions/index.html
new file mode 100644
index 0000000000..7fa9b16baf
--- /dev/null
+++ b/files/ru/learn/common_questions/index.html
@@ -0,0 +1,131 @@
+---
+title: Распространённые вопросы
+slug: Learn/Common_questions
+tags:
+  - Веб
+  - Механика Веба
+  - распространённые вопросы
+translation_of: Learn/Common_questions
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Данный раздел создан для обеспечения ответами на распространённые вопросы, которые могут возникнуть и которые не обязательно являются основным материалом при изучении веб-технологий (например, обучающих статей по <a href="/ru/docs/Learn/HTML">HTML</a> или <a href="/ru/docs/Learn/CSS">CSS</a>). Ниже приведённые статьи созданы для самостоятельной работы над их содержимым.</p>
+
+<h2 id="Как_работает_Всемирная_паутина">Как работает Всемирная паутина?</h2>
+
+<p>Данный раздел покрывает "механику" Всемирной паутины — вопросы, относящиеся к общим знаниям о экосистеме Всемирной паутины и тому, как эта экосистема работает.</p>
+
+<dl>
+ <dt>
+ <h3 id="Как_работает_Интернет"><a href="/ru/docs/Learn/Common_questions/How_does_the_Internet_work">Как работает Интернет?</a></h3>
+ </dt>
+ <dd><strong>Интернет</strong> - основа Всемирной паутины; техническая инфраструктура, благодаря которой возможно существование Всемирной паутины. Выражаясь проще, Интернет - это большая сеть компьютеров, которые "общаются" друг с другом. В данной статье обсуждается, как он (Интернет) работает на базовом уровне.</dd>
+ <dt>
+ <h3 id="В_чём_разница_между_веб-страницей_веб-сайтом_веб-сервером_и_поисковым_движком"><a href="/ru/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">В чём разница между веб-страницей, веб-сайтом, веб-сервером и поисковым движком?</a></h3>
+ </dt>
+ <dd>В этой статье мы рассмотрим различные связанные с вебом концепции: веб-страницы, веб-сайты, веб-сервера и поисковые движки. Новички в вебе часто путают или неправильно используют данные термины. Давайте узнаем, что они означают!</dd>
+ <dt>
+ <h3 id="Что_такое_URL"><a href="/ru/docs/Learn/Common_questions/What_is_a_URL">Что такое URL?</a></h3>
+ </dt>
+ <dd>Наряду с понятиями <a href="/ru/docs/Glossary/Hypertext">гипертекста</a> и <a href="/ru/docs/Glossary/HTTP">протокола HTTP</a>, понятие <a href="/ru/docs/Glossary/URL">URL</a> является одной из основных концепций Всемирной паутины. Это механизм, используемый <a href="/ru/docs/Glossary/Browser">браузерами</a> для получения любого опубликованного во Всемирной сети ресурса.</dd>
+ <dt>
+ <h3 id="Что_такое_доменное_имя"><a href="/ru/docs/Learn/Common_questions/What_is_a_domain_name">Что такое доменное имя?</a></h3>
+ </dt>
+ <dd>Доменные имена являются ключевой частью инфраструктуры сети Интернет. С их помощью обеспечивается удобочитаемый адрес для любого веб-сервера, доступного в сети Интернет.</dd>
+ <dt>
+ <h3 id="Что_такое_веб-сервер"><a href="/ru/docs/Learn/Common_questions/What_is_a_web_server">Что такое веб-сервер?</a></h3>
+ </dt>
+ <dd>Термин «<a href="/ru/docs/Glossary/Server">веб-сервер</a>» может относиться к оборудованию или программному обеспечению (ПО), которое предоставляет клиентам доступ к веб-сайтам через сеть Интернет, или к ним обоим (оборудованию и ПО),  работающим вместе. В этой статье мы рассмотрим, как работают веб-серверы и то, почему они важны.</dd>
+ <dt>
+ <h3 id="Что_такое_гиперссылки"><a href="/ru/docs/Learn/Common_questions/What_are_hyperlinks">Что такое гиперссылки?</a></h3>
+ </dt>
+ <dd>В этой статье мы рассмотрим, что такое <a href="/ru/docs/Glossary/Hyperlink">гиперссылки</a> и почему они важны.</dd>
+</dl>
+
+<h2 id="Инструменты_и_настройка">Инструменты и настройка</h2>
+
+<p>Вопросы, связанные с инструментами / программным обеспечением, которое вы можете использовать для создания веб-сайтов.</p>
+
+<dl>
+ <dt>
+ <h3 id="Сколько_стоит_сделать_что-то_в_Интернете"><a href="/ru/docs/Learn/Common_questions/How_much_does_it_cost">Сколько стоит сделать что-то в Интернете?</a></h3>
+ </dt>
+ <dd>Когда вы запускаете веб-сайт, вы можете ничего не потратить, или ваши расходы могут быть достаточно высокими. В этой статье мы обсудим, сколько всё стоит и что вы получаете за то, за что вы платите (или не платите).</dd>
+ <dt>
+ <h3 id="Какое_ПО_мне_необходимо_для_создания_веб-сайта"><a href="/ru/docs/Learn/Common_questions/What_software_do_I_need">Какое ПО мне необходимо для создания веб-сайта?</a></h3>
+ </dt>
+ <dd>В этой статье мы объясним, какие программные компоненты необходимы вам при редактировании, выгрузке или просмотре веб-сайта.</dd>
+ <dt>
+ <h3 id="Какие_текстовые_редакторы_доступны"><a href="/ru/docs/Learn/Common_questions/Available_text_editors">Какие текстовые редакторы доступны?</a></h3>
+ </dt>
+ <dd>В этой статье мы выделили некоторые моменты, которые следует учитывать при выборе и установке текстового редактора для веб-разработки.</dd>
+ <dt>
+ <h3 id="Что_такое_Инструменты_разработчика_браузера"><a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">Что такое "Инструменты разработчика" браузера?</a></h3>
+ </dt>
+ <dd>Каждый браузер имеет набор инструментов разработчика для отладки HTML, CSS и другого веб-кода. В этой статье объясняется, как использовать основные функции из инструментов разработчика вашего браузера.</dd>
+ <dt>
+ <h3 id="Как_убедиться_в_том_что_веб-сайт_работает_правильно"><a href="/ru/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">Как убедиться в том, что веб-сайт работает правильно?</a></h3>
+ </dt>
+ <dd>Итак, вы опубликовали свой сайт в Интернете - очень хорошо! Но уверены ли вы в том, что он работает правильно? В этой статье приведены некоторые основные шаги по устранению неполадок.</dd>
+ <dt>
+ <h3 id="Как_настроить_локальный_сервер_тестирования"><a href="/ru/docs/Learn/Common_questions/set_up_a_local_testing_server">Как настроить локальный сервер тестирования?</a></h3>
+ </dt>
+ <dd>
+ <div>
+ <p>В этой статье объясняется, как настроить простой локальный сервер тестирования на вашем компьютере, и основы его использования.</p>
+ </div>
+ </dd>
+ <dt>
+ <h3 id="Как_загрузить_файлы_на_веб-сервер"><a href="/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server">Как загрузить файлы на веб-сервер?</a></h3>
+ </dt>
+ <dd>В этой статье показано, как публиковать свой сайт в Интернете с помощью инструментов FTP - одним из самых распространенных способов сделать сайт общедоступным, чтобы другие пользователи могли получить доступ к нему со своих компьютеров.</dd>
+ <dt>
+ <h3 id="Как_использовать_GitHub_Pages"><a href="/ru/docs/Learn/Common_questions/Using_GitHub_Pages">Как использовать GitHub Pages?</a></h3>
+ </dt>
+ <dd>В этой статье представлено базовое руководство по публикации контента с использованием функции <strong>gh-pages</strong> сайта GitHub.</dd>
+ <dt>
+ <h3 id="Как_разместить_сайт_в_Интернете_при_помощи_платформы_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Как разместить сайт в Интернете при помощи платформы Google App Engine?</a></h3>
+ </dt>
+ <dd>Ищете место для размещения вашего сайта? Здесь представлено пошаговое руководство по размещению вашего сайта с помощью платформы Google App Engine.</dd>
+ <dt>
+ <h3 id="Какие_существуют_инструменты_для_отладки_сайта_и_увеличения_его_производительности"><a href="/ru/docs/Tools/Performance">Какие существуют инструменты для отладки сайта и увеличения его производительности?</a></h3>
+ </dt>
+ <dd>В этом группе статей рассказывается, как использовать инструменты разработчика в браузере Firefox для отладки и повышения производительности вашего веб-сайта, а именно инструменты для проверки использования памяти, просмотра дерева вызовов <a href="/ru/docs/Glossary/JavaScript">JavaScript</a>, количества отображаемых узлов <a href="/ru/docs/Glossary/DOM">DOM</a> и т. д.</dd>
+</dl>
+
+<h2 id="Дизайн_и_удобство_использования">Дизайн и удобство использования</h2>
+
+<p>В этом разделе перечислены вопросы, связанные с эстетикой, структурой страницы, техниками для достижения удобства пользованием сайта и т. д.</p>
+
+<dl>
+ <dt>
+ <h3 id="С_чего_мне_следует_начать_создание_дизайна_веб-сайта"><a href="/ru/docs/Learn/Common_questions/Thinking_before_coding">С чего мне следует начать создание дизайна веб-сайта?</a></h3>
+ </dt>
+ <dd>В этой статье рассматривается крайне важный первый шаг каждого проекта: определение того, чего вы хотите достичь с его помощью.</dd>
+ <dt>
+ <h3 id="Какова_структура_наиболее_используемых_макетов_сайтов"><a href="/ru/docs/Learn/Common_questions/Common_web_layouts">Какова структура наиболее используемых макетов сайтов?</a></h3>
+ </dt>
+ <dd>При разработке страниц вашего сайта хорошо иметь представление о наиболее распространенных макетах. В этой статье приведены некоторые типичные макеты веб-сайтов, а также части, которые входят в каждый макет.</dd>
+ <dt>
+ <h3 id="Что_такое_удобство_использования"><a href="/ru/docs/Learn/Common_questions/What_is_accessibility">Что такое удобство использования?</a></h3>
+ </dt>
+ <dd>В этой статье представлены основные концепции достижения удобства пользования веб-страницами.</dd>
+ <dt>
+ <h3 id="Как_разрабатывать_сайты_для_всех_категорий_пользователей"><a href="/ru/docs/Learn/Common_questions/Design_for_all_types_of_users">Как разрабатывать сайты для всех категорий пользователей?</a></h3>
+ </dt>
+ <dd>В этой статье приводятся основные методы, которые помогут вам создавать веб-сайты для любого пользователя.</dd>
+ <dt>
+ <h3 id="Какие_средства_HTML_используются_для_обеспечения_удобства_использования"><a href="/ru/docs/Learn/Common_questions/HTML_features_for_accessibility">Какие средства HTML используются для обеспечения удобства использования?</a></h3>
+ </dt>
+ <dd>В этой статье описываются специфические особенности HTML, которые могут использоваться для того, чтобы сделать веб-страницу более доступной для людей с различными нарушениями.</dd>
+</dl>
+
+<h2 id="Вопросы_по_HTML_CSS_и_JavaScript">Вопросы по HTML, CSS и JavaScript</h2>
+
+<p>Чтобы узнать о распространённых решениях большинства проблем в HTML / CSS / JavaScript, используйте следующие статьи:</p>
+
+<ul>
+ <li><a href="/ru/docs/Learn/HTML/Howto">Использование HTML для решения распространённных проблем</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Howto">Использование CSS для решения распространённых проблем </a></li>
+ <li><a href="/ru/docs/Learn/JavaScript/Howto">Использование JavaScript для решения распрстранённых проблем</a></li>
+</ul>
diff --git a/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html b/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html
new file mode 100644
index 0000000000..0ab424414d
--- /dev/null
+++ b/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html
@@ -0,0 +1,97 @@
+---
+title: Как настроить локальный сервер для тестирования?
+slug: Learn/Common_questions/set_up_a_local_testing_server
+translation_of: Learn/Common_questions/set_up_a_local_testing_server
+---
+<div class="summary">
+<p>Эта статья объясняет как установить простой локальный тестовый сервер на Вашем компьютере, а так же основы его использования.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Требования:</th>
+   <td>Сначала Вам необходимо изучить <a href="/en-US/docs/Learn/How_the_Internet_works">как работает интернет</a>, а также <a href="/en-US/docs/Learn/What_is_a_Web_server">что такое веб-сервер</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>
+    <p>Вы научитесь как установливать локальный тестовый сервер.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Локальные_и_удаленные_файлы">Локальные и удаленные файлы</h2>
+
+<p>На протяжении всего обучения, вы будете открывать примеры непосредственно в браузере — двойным кликом по HTML файлу, перетаскиванием файла в окно браузера, или через меню <em>File</em> &gt; <em>Open...</em> и указывая необходимый HTML файл. Существует множество способов как это сделать.</p>
+
+<p>Если веб-адрес начинается с <code>file://</code> в котором далее прописан путь к файлу на вашем локальном жестком диске, значит используется локальный файл. В противоположность этому, если вы откроете на просмотр один из наших примеров, расположенных на GitHub (или пример расположенный на любом другом удаленном сервере), веб-адресс будет начинаться с <code>http://</code> или <code>https://</code>, что означает что файл был получен через HTTP.</p>
+
+<h2 id="Проблемы_тестирования_локальных_файлов">Проблемы тестирования локальных файлов</h2>
+
+<p>Некоторые примеры могут не запуститься, если вы попробуете открыть их как локальные файлы. Это может произойти по нескольким причинам, самые распространенные из которых:</p>
+
+<ul>
+ <li><strong>Они содержат ассинхронные запросы.</strong> Некоторые браузеры (включая Chrome) не будут запускать асинхронные запросы (см. <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a>), если вы просто запускаете пример из локального файла. Это связано с ограничениями безопасности (для получения дополнительной информации о безопасности в Интернете, ознакомьтесь с <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>).</li>
+ <li><strong>Они имеют серверный язык.</strong> Серверные языки (например, PHP или Python) требуют специального сервера для интерпретации кода и предоставления результатов.</li>
+</ul>
+
+<h2 id="Запуск_простого_локального_HTTP_сервера">Запуск простого локального HTTP сервера</h2>
+
+<p>Чтобы обойти проблему ассинхронных запросов, нам нужно протестировать такие примеры, запустив их через локальный веб-сервер. Один из самых простых способов сделать это для наших целей - использовать модуль <code>SimpleHTTPServer</code> Python.</p>
+
+<p>Для этого нужно:</p>
+
+<ol>
+ <li>
+  <p>Установить Python. Если Вы пользуетесь Linux или Mac OS X, все уже готово в Вашей системе. Если Вы пользователь Windows, Вы можете скачать установочный файл с домашней страницы Python:</p>
+
+  <ul>
+   <li>Зайдите на <a href="https://www.python.org/">python.org</a></li>
+   <li>В секции загрузок, выберите линк для Python "3.xxx".</li>
+   <li>Внизу страницы выберите <em>Windows x86 executable installer</em> и скачайте его.</li>
+   <li>Послезагрузки файла запустите его.</li>
+   <li>На первой странице инсталлятора выберите чекбокс "Add Python 3.xxx to PATH".</li>
+   <li>Нажмите <em>Install</em>, затем нажмите <em>Close</em> когда установка закончится.</li>
+  </ul>
+ </li>
+ <li>
+  <p>Откройте командную строку (Windows)/ (OS X/Linux). Для проверки установки Python введите следующую команду:</p>
+
+  <pre class="brush: bash notranslate">python -V</pre>
+ </li>
+ <li>
+  <p>Система вернет Вам номер версии установленной программы. В случае успешного выполнения команды <code>python -V </code> нужно перейти в директорию с вашим проектом, используя команду <code>cd</code>:</p>
+
+  <pre class="brush: bash notranslate"># include the directory name to enter it, for example
+cd Desktop
+# use two dots to jump up one directory level if you need to
+cd ..</pre>
+ </li>
+ <li>
+  <p>Введите команду для запуска сервера в том каталоге:</p>
+
+  <pre class="brush: bash notranslate"># If Python version returned above is 3.X
+python -m http.server
+# If Python version returned above is 2.X
+python -m <code>SimpleHTTPServer</code></pre>
+ </li>
+ <li>
+  <p>По умолчанию это приведет к запуску содержимого каталога на локальном веб-сервере на порту 8000. Вы можете перейти на этот сервер, перейдя на URL-адрес <code>localhost: 8000</code> в своем веб-браузере. Здесь вы увидите содержимое указанного каталога - щелкните файл HTML, который вы хотите запустить.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание</strong>. Если у вас уже есть что-то на порту 8000, вы можете выбрать другой порт, запустив команду сервера, за которой следует альтернативный номер порта, например: <code>python -m http.server 7800</code> (Python 3.x) или <code>python -m SimpleHTTPServer 7800</code> (Python 2.x). Затем вы можете получить доступ к своему контенту на <code>localhost: 7800</code>.</p>
+</div>
+
+<h2 id="Запуск_серверных_языков_локально">Запуск серверных языков локально</h2>
+
+<p>Модуль Python <code>SimpleHTTPServer (python 2.0) http.server (python 3.0)</code> полезен, но он не знает, как запускать код, написанный на таких языках, как Python, PHP или JavaScript. Чтобы справиться с этим, вам понадобится нечто большее - именно то, что вам нужно, зависит от языка сервера, который вы пытаетесь запустить. Вот несколько примеров:</p>
+
+<ul>
+ <li>Для запуска кода на стороне сервера Python вам необходимо использовать веб-инфраструктуру Python. Вы можете узнать, как использовать структуру Django, прочитав <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> также является хорошей (чуть менее тяжелой) альтернативой Django. Чтобы запустить это, ознакомьтесь с <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">install Python/PIP</a>, а затем установите Flask с помощью <code>pip3 install flask</code>. На этом этапе вы сможете запустить примеры Python Flask, используя, например, <code>python3 python-example.py</code>, затем перейдя на <code>localhost: 5000</code> в свой браузер.</li>
+ <li>Чтобы запустить серверный код Node.js (JavaScript), вам нужно использовать Node.js или фреймворк, построенный поверх него. Express - хороший выбор - см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li>
+ <li>Чтобы запустить PHP-серверный код, вам понадобится настройка сервера, которая может интерпретировать PHP. Хорошими вариантами для локального тестирования PHP являются <a class="external external-icon" href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac и Windows), <a class="external external-icon" href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux) и <a href="https://www.linux.com/learn/easy-lamp-server-installation">LAMP</a> (Linux, Apache, MySQL и PHP / Python / Perl). Это полные пакеты, которые создают локальные настройки, позволяющие запускать базы данных Apache, PHP и MySQL.</li>
+</ul>
diff --git a/files/ru/learn/common_questions/thinking_before_coding/index.html b/files/ru/learn/common_questions/thinking_before_coding/index.html
new file mode 100644
index 0000000000..7d9243ac0d
--- /dev/null
+++ b/files/ru/learn/common_questions/thinking_before_coding/index.html
@@ -0,0 +1,176 @@
+---
+title: Как начать разрабатывать свой сайт?
+slug: Learn/Common_questions/Thinking_before_coding
+tags:
+  - Включает активное обучение
+  - Для начинающих
+  - Необходимое Схематично
+  - Планирование
+translation_of: Learn/Common_questions/Thinking_before_coding
+---
+<p class="summary">Эта статья покрывает первый и крайне важный шаг в создании любого проекта: определить, что вы хотите получить.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>Никаких</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Научиться определять цели, которые позволят дать направление вашему web-проекту.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Определение_идеи_проекта">Определение идеи проекта</h2>
+
+<p><span class="seoSummary">Большинство людей, начиная свой web-проект, фокусируются прежде всего на технической его стороне. Безусловно, вы должны иметь представление о технической стороне своей работы, но гораздо важнее сперва узнать, что вы хотели бы получить в результате. Конечно это кажется очевидным, однако слишком много проектов не доживают до релиза не из-за отсутствия технических знаний, но из-за отсутствия целей и видения.</span></p>
+
+<p>Так что когда у вас появляется какая-то идея и желание воплотить ее в web-сайте, вам необходимо ответить на 3 простых вопроса, и уже потом предпринимать что-либо иное :</p>
+
+<ul>
+ <li>Что я хочу в конце-концов получить?</li>
+ <li>Каким образом web-сайт поможет мне в достижении моих целей?</li>
+ <li>Что и в каком порядке должно быть реализовано, чтобы достичь моих целей?</li>
+</ul>
+
+<p>Совокупность и анализ ответов на эти вопросы поможет определить <em>идею проекта</em>, которая является <strong>необходимым</strong> первым шагом в достижении ваших целей, вне зависимости от того, имеется ли у вас опыт разработки или же вы новичек.</p>
+
+<h2 id="Активное_Обучение">Активное Обучение</h2>
+
+<p><em>На данный момент этот раздел еще не готов. Вы можете помочь сообществу разработчиков, вступив в <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<h2 id="Более_глубокое_погружение">Более глубокое погружение</h2>
+
+<p>Проект никогда не начинается с реализации. Музыканты никогда не делали бы музыку, пока не решили, что же они хотят сыграть, аналогию можно провести к художникам, писателям, и web-разработчикам. Реализация второстепенна.</p>
+
+<p>Технические навыки безусловно важны. Музыканты обязаны владеть своим инструментом. Но даже хороший музыкант никогда не создаст хорошую музыку не имея идеи. Следовательно, прежде чем переходить к вашей любимой IDE, вы должны отойти немного назад и детально представить, что же вы на самом деле хотите сделать.</p>
+
+<p>Часовая конференция-обсуждение с вашими друзьями - хорошее начало, но не совсем рациональное. Лучше будет спокойно сесть и структурировать всю информацию, это позволит вам получить наиболее адекватное представление пути к реализации вашей идеи. Для этого вам нужны лишь только листочек, ручка и немного времени для ответа на следующие вопросы.</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Имеется неисчислимое множество способов, как сформулировать идею проекта. К сожалению, мы не можем собрать здесь все сразу (и даже увесистой книги не хватит). То, что мы представляем в этой статье - это простой способ выполнить шаги, которые профессионалы называют <a href="http://en.wikipedia.org/wiki/Ideation_(idea_generation)">Project Ideation</a>, <a href="http://en.wikipedia.org/wiki/Project_planning">Project Planning</a> и <a href="http://en.wikipedia.org/wiki/Project_management">Project Management</a>.</p>
+</div>
+
+<h3 class="highlight-spanned" id="Что_же_в_конце_концов_я_хочу_получить"><span class="highlight-span">Что же в конце концов я хочу получить?</span></h3>
+
+<p>Этот вопрос наиболее остро нуждается в ответе, поскольку ответ является решающим в дальнейших действиях. Лучше всего подойдет список целей, которых вы хотите достичь. Это может быть что угодно: интернет-магазин, выражение политических взглядов, расширение круга общения, организация концертов, коллекционирование картинок с котиками, или что угодно еще, что вы хотите получить.</p>
+
+<p>Представьте себя музыкантом. Должно быть, вы хотите:</p>
+
+<ul>
+ <li>Предоставить людям возможность прослушать ваше творчество.</li>
+ <li>Создать интернет-магазин.</li>
+ <li>Наладить контакт с другими музыкантами.</li>
+ <li>Поговорить о музыке.</li>
+ <li>Обучать своему творчеству с помощью видео-уроков.</li>
+ <li>Публиковать фото вашего кота.</li>
+ <li>Найти нового друга (подругу).</li>
+</ul>
+
+<p>Когда вы получили такой список, необходимо упорядочить его согласно приоритетам. Разместим цели в порядке убывания важности:</p>
+
+<ol>
+ <li>Найти нового друга (подругу).</li>
+ <li>Предоставить людям возможность прослушать ваше творчество.</li>
+ <li>Поговорить о музыке.</li>
+ <li>Наладить контакт с другими музыкантами.</li>
+ <li>Создать интернет-магазин.</li>
+ <li>Обучать своему творчеству с помощью видео-уроков.</li>
+ <li>Публиковать фото вашего кота.</li>
+</ol>
+
+<p>Выполнив это простое упражнение, написав ваши цели и отсортировав их, вам будет гораздо легче принимать решения. (Нужно ли мне добавить какие-то возможности, использовать эти или иные сервисы, создавать именно <em>такой</em> дизайн?)</p>
+
+<p>Теперь, когда вы получили приоритетный список ваших целей, имеет смысл перейти к следующему вопросу.</p>
+
+<h3 class="highlight-spanned" id="Как_сайт_поможет_мне_в_достижении_цели"><span class="highlight-span">Как сайт поможет мне в достижении цели?</span></h3>
+
+<p>И так, у вас есть конкретная цель и вам кажется, что для ее достижения нужен веб-сайт. Вы уверены?</p>
+
+<p>Вернемся к нашему примеру. У нас есть 5 задач, связанных с музыкой, одна из области личной жизни (поиск своей пары), и ни с чем не связанные фото кота. Есть ли смысл создавать сайт, который способен удовлетворить всем этим требованиям? Так ли это необходимо? В конце концов, десятки уже существующих web-сервисов способны помочь вам в достижении ваших целей.</p>
+
+<p>Поиск пары - главная задача, и более разумно использовать уже существующие ресурсы, чем создавать свой. Почему? Мы потратим больше времени на создание и поддержание сайта чем на поиск своей потенциальной пары. Пока эта цель сохраняет наибольший приоритет, логичнее тратить время и силы на использование (освоение) существующего инструмента, чем начинать его создание с нуля. Аналогично, существует достаточное количество сайтов, которые уже предоставляют возможность демонстрации фотографий, чтобы на создание еще одного можно было очень коротко ответить: это того не стоит.</p>
+
+<p>Оставшиеся пять задач непосредственно связанны с музыкой. Конечно же, на данный момент уже достаточно сайтов, обладающих подобным функционалом, но в текущем контексте имеет смысл создать сайт, посвященный именно вам. Прежде всего, сайт - это лучший способ <em>чтобы собрать все</em>, что мы хотим опубликовать, в одном месте (для решения проблем под номерами 3, 5 и 6) и создать среду для взаимодействия между нами и публикой (для решения проблем 2 и 4). Если проще, то так как все эти задачи из одной области, содержание всего в одном месте (веб-сайте) поможет нам в достижении целей, а также поможет нашим поклонникам связаться с нами.</p>
+
+<p>Как способен сайт помочь мне решить мои проблемы? Ответив на это, вы найдете наилучшее решение для себя и убережетесь от траты усилий впустую.</p>
+
+<h3 class="highlight-spanned" id="Что_и_в_какие_сроки_должно_быть_реализовано_для_достижения_целей"><span class="highlight-span">Что и в какие сроки должно быть реализовано для достижения целей?</span></h3>
+
+<p>Теперь, когда вы уже узнали, что вам на самом деле нужно, настало время составить план, раскладывающий ваши цели на небольшие выполнимые шаги. Еще нужно помнить, что все ваши планы не есть догмы. Они постоянно эволюционируют вместе с изменением курса проекта. К примеру, если вы вдруг вспомните о чем-то ранее неучтенном, или просто измените свое видение проекта.</p>
+
+<p>Как водится, лучше один раз увидеть, чем сто раз услышать, так что вернемся к нашему примеру:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Цель</th>
+   <th scope="col">План по достижению</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">Предоставить людям доступ к вашему творчеству</td>
+   <td>
+    <ol>
+     <li>Записать музыку</li>
+     <li>Опубликовать ваши аудиозаписи в сети (Можете ли вы использовать для этого существующие сервисы?)</li>
+     <li>Предоставить людям доступ к вашей музыке в некоторых частях вашего сайта</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Обсудить вашу музыкальную деятельность</td>
+   <td>
+    <ol>
+     <li>Написать несколько статей для затравки обсуждений</li>
+     <li>Определить, как должны быть оформлены статьи</li>
+     <li>Опубликовать готовые тексты на вашем сайте (Как это делается?)</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Познакомиться с коллегами по цеху</td>
+   <td>
+    <ol>
+     <li>Предоставить людям способ связаться с вами (Email? Соц. сеть? Номер телефона? Письмо?)</li>
+     <li>Определить, как люди могут узнать эти данные на вашем сайте</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Создать интернет-магазин</td>
+   <td>
+    <ol>
+     <li>Приготовить их</li>
+     <li>Разместить в магазине</li>
+     <li>Найти способ доставки</li>
+     <li>Определиться с платежной системой</li>
+     <li>Добавить способ делать заказы на вашем сайте</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Обучать музыке в своих видео-уроках</td>
+   <td>
+    <ol>
+     <li>Записать видео-уроки</li>
+     <li>Разместить видео в онлайне (И снова: стоит ли использовать для этого уже готовые платформы?)</li>
+     <li>Предоставить людям доступ к видео на вашем сайте (проинформировать)</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>Два важных замечания.</strong></p>
+
+<p>Во-первых, некоторые из этих задач не привязаны к интернету (к примеру, запись музыки или написание статей). И очень часто такие "офлайн" вещи играют большую роль в достижении целей, чем сам сайт. В продажах, к примеру, гораздо большее значение и тяжелую реализацию представляют решения вопросов доставки, оплаты и налогообложения, чем непосредственная реализация сайта с возможностью оформления заказов.</p>
+
+<p>Во-вторых, написание плана порождает новые вопросы, которые тоже нуждаются в ответах. И, как правило, этих вопросов больше чем рассмотренно в этой статье. (К примеру, можете ли вы сделать что-то из плана самостоятельно, лучше попросить кого-то из знакомых или придётся прибегнуть к помощи третьих лиц?)</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Как стало понятно, простая мысль "А не сделать ли мне сайт?" порождает очень много работы, и при каждом следующем обдумывании она только растет. В скором она может стать очень большой, но это не повод для паники. Вы не обязаны отвечать на <em>все </em>вопросы, а также выполнять каждый пункт плана. Что действительно имеет значение, так это ваше видение результата и понимание целей. Однажды создав идею, вам нужно определиться, как и когда ее реализовать. Разбивайте большие задачи на меньшие и более выполнимые. И каждая выполненная задача приблизит вас к грандиозному успеху.</p>
diff --git a/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html b/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html
new file mode 100644
index 0000000000..2f156c3985
--- /dev/null
+++ b/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html
@@ -0,0 +1,168 @@
+---
+title: Как загрузить файлы на веб-сервер
+slug: Learn/Common_questions/Upload_files_to_a_web_server
+translation_of: Learn/Common_questions/Upload_files_to_a_web_server
+---
+<div class="summary">
+<p>Данная статья покажет, как можно опубликовать сайт в Интернет с помощью инструментов передачи файлов(file transfer tools).</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>
+    <p>Вы должны знать <a href="https://developer.mozilla.org/ru/docs/Learn/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D0%B2%D0%B5%D0%B1_%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80">что такое веб-сервер</a> и <a href="https://developer.mozilla.org/ru/docs/Learn/Understanding_domain_names">как работают доменные имена</a>. Также вы должны знать, <a href="https://developer.mozilla.org/ru/docs/Learn/Common_questions/set_up_a_local_testing_server">как установить базовую среду</a> и <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web">как написать простую веб-страницу</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>
+    <p>Научиться передавать файлы на сервер используя различные доступные инструменты передачи файлов(file transfer tools).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сводка">Сводка</h2>
+
+<p>Если вы создали простую веб-страницу (для примера смотрите <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a>), вы, вероятно, захотите отобразить её онлайн, на веб-сервере. В данной статье мы обсудим как сделать это, используя различные доступные настройки, такие как SFTP клиенты, RSync и GitHub.</p>
+
+<h2 id="SFTP_Безопасный_Протокол_Передачи_Файлов">SFTP (Безопасный Протокол Передачи Файлов)</h2>
+
+<p>Существуют различные варианты SFTP клиентов. В нашем примере мы будем использовать <a href="https://filezilla-project.org/">FileZilla</a>, тк он бесплатен и подходит для Windows, macOS и Linux. Чтобы установить менеджер перейдите на страницу загрузки <a href="https://filezilla-project.org/download.php?type=client">FileZilla downloads page</a>, нажмите на кнопку загрузки, затем установите пакет из установочного файла обычным способом.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Конечно, есть много других вариантов. Смотрите <a href="/en-US/Learn/How_much_does_it_cost#Publishing_tools.3A_FTP_client">Publishing tools</a> для других способов.</p>
+</div>
+
+<p>Откройте приложение FileZilla; Вы должны увидеть что-то вроде этого:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15767/filezilla-ui.png" style="display: block; height: 451px; margin: 0px auto; width: 690px;"></p>
+
+<h3 id="Вход_в_систему">Вход в систему</h3>
+
+<p>В этом примере мы предположим, что наш хостинг-провайдер (сервис, на котором находится наш HTTP веб сервер) является фиктивной компанией "Example Hosting Provider", чьи URL адреса выглядят следующим образом: <code>mypersonalwebsite.examplehostingprovider.net</code>.</p>
+
+<p>Сейчас мы создали аккаунт и получили от хостинг-провайдера следующую информацию:</p>
+
+<blockquote>
+<p>Поздравляем с созданием аккаунта на сервисе "Example Hosting Provider".</p>
+
+<p>Ваш аккаунт: <code>demozilla</code></p>
+
+<p>Ваш сайт доступен по адресу:</p>
+
+<p><code>demozilla.examplehostingprovider.net</code></p>
+
+<p>Для загрузки файлов на этот аккаунт, пожалуйста, подключитесь через SFTP с использованием следующих учетных данных:</p>
+
+<ul>
+ <li>SFTP сервер: <code>sftp://demozilla.examplehostingprovider.net</code></li>
+ <li>Имя пользователя: <code>demozilla</code></li>
+ <li>Пароль: <code>quickbrownfox</code></li>
+ <li>Порт: <code>5548</code></li>
+ <li>Для публикации в интернет, поместите ваши файлы в папку <code>Public/htdocs</code> .</li>
+</ul>
+</blockquote>
+
+<p>Давайте сначала посмотрим на  <code>http://demozilla.examplehostingprovider.net/</code> — как вы можете видеть, то здесь пока ничего нет:</p>
+
+<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="border-style: solid; border-width: 1px; display: block; height: 233px; margin: 0 auto; width: 409px;"></p>
+
+<div class="note">
+<p><strong>Заметка</strong>: В зависимости от вашего хостинг-провайдера, когда вы впервые заходите на свой веб-адрес, большую часть времени вы будете видеть страницу, на которой написано что-то вроде этого: “This website is hosted by [Hosting Service].”</p>
+</div>
+
+<p>Чтобы подключить SFTP клиент к удаленному серверу, выполните следующие действия:</p>
+
+<ol>
+ <li>Выбирите <em>File &gt; Site Manager...</em> в главном меню.</li>
+ <li>В окне <em>Site Manager</em>, нажмите кнопку <em>New Site</em>, затем введите название сайта как <strong>demozilla</strong> в предоставленном месте.</li>
+ <li>Укражите SFTP-сервер вашего хоста в предоставленном поле: Host.</li>
+ <li>В раскрывающемся списке <em>Logon Type: </em>выберите <em>Normal</em>, затем введите предоставленные имя пользователя и пароль в соответствующие поля.</li>
+ <li>Введите правильный порт и другую информацию.</li>
+</ol>
+
+<p>Ваше окно должно выглядеть как показано ниже:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15769/site-manager.png" style="display: block; height: 561px; margin: 0px auto; width: 684px;"></p>
+
+<p>Теперь нажмите <em>Connect</em> для подключения к SFTP-серверу.</p>
+
+<p>Заметка: Убедитесь, что ваш хостинг-провайдер предлагает SFTP (безопасный FTP) подключение к вашему хостинговому пространству. FTP по своей сути небезопасен, и вам не следует его использовать.</p>
+
+<h3 id="Здесь_и_там_локальный_и_удаленный_просмотр">Здесь и там: локальный и удаленный просмотр</h3>
+
+<p>После подключения ваш экран должен выглядеть примерно так (мы подключились к нашему собственному примеру, чтобы дать вам представление):<img alt="" src="https://mdn.mozillademos.org/files/15768/connected.png" style="border-style: solid; border-width: 1px; display: block; height: 199px; margin: 0px auto; width: 700px;"></p>
+
+<p>Давайте посмотрим, что вы видите:</p>
+
+<ul>
+ <li>По центру левой панели вы можете видеть локальные файлы. Перейдите в каталог, в котором вы храните свой веб-сайт (например, <code>mdn</code>).</li>
+ <li>По центру правой панели вы увидете удаленные файли. Мы вошли в наш удаленный корень FTP (в данном случае: <code>users/demozilla</code>)</li>
+ <li>Вы можете пока игнорировать нижнюю и верхнюю панели. Соответственно, это журнал сообщений, показывающий состояние соединения между вашим компьютером и SFTP-сервером, и журнал в реальном времени каждого взаимодействия между вашим SFTP-клиентом и сервером.</li>
+</ul>
+
+<h3 id="Загрузка_на_сервер">Загрузка на сервер</h3>
+
+<p>Наш пример инструкций для хостинга указывает нам следующее: "Чтобы опубликовать в Интернете, поместите свои файлы в каталог: <code>Public/htdocs</code>." Вам нужно перейти в указанный каталог на правой панели. Этот каталог фактически является корнем вашего веб-сайта, где находятся ваши <code>index.html</code> , откуда ваши файл и другие активы будуть отправлены.</p>
+
+<p>После того, как вы нашли правильный удаленный каталог для размещения файлов, чтобы загрузить файлы на сервер, вам необходимо переместить их с левой панели на правую.</p>
+
+<h3 id="Как_узнать_что_они_online">Как узнать, что они online?</h3>
+
+<p>Пока все хорошо, но действительно ли файлы в сети? Вы можете перепроверить, перейдя на ваш сайт (например, <code>http://demozilla.examplehostingprovider.net/</code>) в вашем браузере:</p>
+
+<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="border-style: solid; border-width: 1px; display: block; height: 442px; margin: 0 auto; width: 400px;"></p>
+
+<p>И вуаля! Наш сайт работает!</p>
+
+<h2 id="Rsync">Rsync</h2>
+
+<p>{{Glossary("Rsync")}} is a local-to-remote file synchronizing tool, which is generally available on most Unix-based systems (like macOS and Linux), but Windows versions exist too.</p>
+
+<p>It is seen as a more advanced tool than SFTP, beause by default it is used on the command line. A basic command looks like so:</p>
+
+<pre class="brush: bash notranslate">rsync [-options] SOURCE user@x.x.x.x:DESTINATION</pre>
+
+<ul>
+ <li><code>-options</code> is a dash followed by a one or more letters, for example <code>-v</code> for verbose error messages, and <code>-b</code> to make backups. You can see the full list at the <a href="https://linux.die.net/man/1/rsync">rsync man page</a> (search for "Options summary").</li>
+ <li><code>SOURCE</code> is the path to the local file or directory that you want to copy files over from.</li>
+ <li><code>user@</code> is the credentials of the user on the remote server you want to copy files over to.</li>
+ <li><code>x.x.x.x</code> is the IP address of the remote server.</li>
+ <li><code>DESTINATION</code> is the path to the location you want to copy your directory or files to on the remote server.</li>
+</ul>
+
+<p>You'd need to get such details from your hosting provider.</p>
+
+<p>For more information and further eamples, see <a href="https://www.atlantic.net/hipaa-compliant-cloud-hosting-services/how-to-use-rsync-copy-sync-files-servers/">How to Use Rsync to Copy/Sync Files Between Servers</a>.</p>
+
+<p>Of course, it is a good idea to use a secure connection, like with FTP. In the case of Rsync, you specify SSH details to make the connection over SSH, using the <code>-e</code> option. For example:</p>
+
+<pre class="brush: bash notranslate">rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION</pre>
+
+<p>You can find more details of what is needed at <a href="https://www.digitalocean.com/community/tutorials/how-to-copy-files-with-rsync-over-ssh">How To Copy Files With Rsync Over SSH</a>.</p>
+
+<h3 id="Rsync_GUI_tools">Rsync GUI tools</h3>
+
+<p>As with other command line tools, GUI tools also exist for Rsync, for those who are not as comfortable with using the command line. <a href="https://acrosync.com/mac.html">Acrosync</a> is one such tool, and it is available for Windows and macOS.</p>
+
+<p>Again, you would have to get the connection credentials from your hosting provider, but this way you'd have a GUI to enter them in.</p>
+
+<h2 id="GitHub">GitHub</h2>
+
+<p>GitHub allows you to publish websites via <a href="https://pages.github.com/">GitHub pages</a> (gh-pages).</p>
+
+<p>We've covered the basics of using this in the <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a> article from our <a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the Web</a> guide, so we aren't going to repeat it all here.</p>
+
+<p>However, it is worth knowing that you can also host a website on GitHub, but use a custom domain with it. See <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Using a custom domain with GitHub Pages</a> for a detailed guide.</p>
+
+<h2 id="Other_methods_to_upload_files">Other methods to upload files</h2>
+
+<p>The FTP protocol is one well-known method for publishing a website, but not the only one. Here are a few other possibilities:</p>
+
+<ul>
+ <li><strong>Web interfaces</strong>. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service.</li>
+ <li><strong>{{Glossary("WebDAV")}}</strong>. An extension of the {{Glossary("HTTP")}} protocol to allow more advanced file management.</li>
+</ul>
diff --git a/files/ru/learn/common_questions/using_github_pages/index.html b/files/ru/learn/common_questions/using_github_pages/index.html
new file mode 100644
index 0000000000..d32300b1fe
--- /dev/null
+++ b/files/ru/learn/common_questions/using_github_pages/index.html
@@ -0,0 +1,100 @@
+---
+title: Как использовать GitHub Pages?
+slug: Learn/Common_questions/Using_Github_pages
+translation_of: Learn/Common_questions/Using_Github_pages
+---
+<p class="summary"><a href="https://github.com/">GitHub</a> является сайтом «социального кодирования». Он позволяет загружать репозитории кода для хранения в системе управления версиями <a href="http://git-scm.com/">Git</a>. Затем вы можете сотрудничать с проектами кода, а система по умолчанию открыта с открытым исходным кодом, что означает, что любой человек в мире может найти ваш код GitHub, использовать его, учиться на нем и улучшать его. Вы можете сделать это и с кодом других людей! В этой статье представлено основное руководство по публикации контента с использованием функции gh-pages Github.</p>
+
+<h2 id="Публикация_контента">Публикация контента</h2>
+
+<p>GitHub - очень важное и полезное сообщество для участия, а Git/GitHub - очень популярная система управления версиями (<a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">version control system</a>) - большинство технологических компаний теперь используют ее в своем рабочем процессе. GitHub имеет очень полезную функцию <a href="https://pages.github.com/">GitHub Pages</a>, которая позволяет публиковать код сайта в прямом эфире в Интернете.</p>
+
+<h3 id="Базовая_установка_Github">Базовая установка Github</h3>
+
+<ol>
+ <li>Прежде всего, <a href="https://git-scm.com/downloads">установите Git</a> на свой компьютер. Это базовое программное обеспечение для управления версиями, GitHub работает поверх него.</li>
+ <li>Затем <a href="https://github.com/">зарегистрируйтесь в учетной записи GitHub</a>. Это просто и легко.</li>
+ <li>После того, как вы зарегистрировались, войдите в <a href="https://github.com">github.com</a> с вашим именем пользователя и паролем.</li>
+</ol>
+
+<h3 id="Подготовка_кода_для_загрузки">Подготовка кода для загрузки</h3>
+
+<p>Вы можете хранить любой код, который вам нравится, в репозитории Github, но для полнофункционального использования функции GitHub Pages ваш код должен быть структурирован как типичный веб-сайт, причем основной точкой входа является HTML-файл с именем <code>index.html</code>.</p>
+
+<p>Другое, что вам нужно сделать, прежде чем двигаться дальше - это инициализировать вашу кодовую директорию как репозиторий Git. Сделать это:</p>
+
+<ol>
+ <li>Направьте командную строку в каталог вашего <code>test-site</code> (или то, что вы назвали каталогом, содержащим ваш сайт). Для этого используйте команду <code>cd</code> (т.е. "<em>c</em>hange <em>d</em>irectory" - «каталог изменений»). Вот что вы набрали, если бы вы разместили свой сайт в каталоге, называемом <code>test-site</code> на рабочем столе:
+
+  <pre class="brush: bash">cd Desktop/test-site</pre>
+ </li>
+ <li>Когда командная строка указывает внутри вашего каталога веб-сайта, введите следующую команду, которая сообщает инструменту <code>git</code>, чтобы он превратил каталог в репозиторий git:
+  <pre class="brush: bash">git init</pre>
+ </li>
+</ol>
+
+<h4 id="В_сторону_интерфейсов_командной_строки">В сторону интерфейсов командной строки</h4>
+
+<p>Лучший способ загрузить код в Github - через командную строку - это окно, в котором вы вводите команды, чтобы делать такие вещи, как создавать файлы и запускать программы, а не щелкать внутри пользовательского интерфейса. Он будет выглядеть примерно так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p>
+
+<div class="note">
+<p><strong>Примечание</strong><strong>:</strong> Вы также можете использовать <a href="https://git-scm.com/downloads/guis">графический пользовательский интерфейс Git </a>для выполнения одной и той же работы, если вам неудобно работать с командной строкой.</p>
+</div>
+
+<p>Каждая операционная система поставляется с инструментом командной строки:</p>
+
+<ul>
+ <li><strong>Windows: Командная строка</strong> (<strong>Command Prompt)</strong> может быть получена нажатием клавиши Windows, набрав <em>Command Prompt</em> и выбрав ее из появившегося списка. Обратите внимание, что Windows имеет свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведенные ниже команды могут отличаться на вашем компьютере.</li>
+ <li><strong>OS X: Терминал</strong> (<strong>Terminal)</strong> можно найти в <em>Applications &gt; Utilities</em>.</li>
+ <li><strong>Linux: </strong>Обычно вы можете вытащить терминал с помощью <em>Ctrl + Alt + T</em>. Если это не сработает, найдите <strong>Terminal</strong> в панели приложений или меню.</li>
+</ul>
+
+<p>Сначала это может показаться немного пугающим, но не волнуйтесь - вы скоро почувствуете основы. Вы говорите компьютеру что-то делать в терминале, введя команду и нажав Enter, как показано выше.</p>
+
+<h3 id="Создание_repo_для_вашего_кода">Создание repo для вашего кода</h3>
+
+<ol>
+ <li>Затем вам нужно создать новое repo для ваших файлов. Нажмите «Плюс» (+) в правом верхнем углу главной страницы GitHub и выберите «Новый репозиторий» (<em>New Repository</em>).</li>
+ <li>На этой странице в поле Имя репозитория (<em>Repository name</em>) введите имя для своего репозитория, например <em>my-repository</em>.</li>
+ <li>Также добавьте описание, чтобы сказать, что будет содержать ваш репозиторий. Ваш экран должен выглядеть так:<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12143/create-new-repo.png" style="display: block; height: 548px; margin: 0px auto; width: 800px;"></li>
+ <li>Нажмите Создать репозиторий (<em>Create repository</em>); это приведет вас к следующей странице:<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12141/github-repo.png" style="display: block; height: 520px; margin: 0px auto; width: 800px;"></li>
+</ol>
+
+<h3 id="Загрузка_файлов_на_GitHub">Загрузка файлов на GitHub</h3>
+
+<ol>
+ <li>На текущей странице вас интересует раздел <em>…or push an existing repository from the command line</em> (...или нажмите существующий репозиторий из командной строки). Вы должны увидеть две строки кода, перечисленные в этом разделе. Скопируйте всю первую строку, вставьте ее в командную строку и нажмите Enter. Команда должна выглядеть примерно так:
+
+  <pre class="copyable-terminal-content js-zeroclipboard-target"><span class="user-select-contain">git remote add origin <span class="js-live-clone-url">https://github.com/chrisdavidmills/my-repository.git</span></span></pre>
+ </li>
+ <li>Затем введите следующие две команды, нажав Enter после каждого из них. Они готовят код для загрузки в GitHub и просят Git управлять этими файлами.
+  <pre class="brush: bash">git add --all
+git commit -m 'adding my files to my repository'</pre>
+ </li>
+ <li>Наконец, нажмите код до GitHub, перейдя на веб-страницу GitHub, на которой вы находитесь, и введите в терминал вторую из двух команд, которые мы увидели  <em>…or push an existing repository from the command line</em>:
+  <pre class="brush: bash">git push -u origin master</pre>
+ </li>
+ <li>Теперь вам нужно создать ветвь gh-pages вашего repo; обновите текущую страницу и вы увидите страницу репозитория, как показано ниже. Вам нужно нажать кнопку, в которой говорится о <em>Branch: <strong>master</strong></em>, введите <em>gh-pages</em> в текстовом вводе, затем нажмите синюю кнопку с надписью <em>Create branch: gh-pages</em>. Это создает специальную ветвь кода, называемую gh-pages, которая публикуется в специальном месте. URL-адрес принимает форму <em>username.github.io/my-repository-name</em>, поэтому в моем примере URL-адрес будет <em>https://chrisdavidmills.github.io/my-repository</em>. Отображаемая страница - это страница index.html.<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12145/repo-site.png" style="display: block; margin: 0 auto;"></li>
+ <li>Перейдите на веб-адрес GitHub Pages на новой вкладке браузера, и вы должны увидеть свой сайт онлайн! Отправьте его по электронной почте своим друзьям и продемонстрируйте свое мастерство.</li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание:</strong> Если вы застряли, страница <a href="https://pages.github.com/">GitHub Pages homepage</a> также очень полезна.</p>
+</div>
+
+<h3 id="Дальнейшее_знание_GitHub">Дальнейшее знание GitHub</h3>
+
+<p>Если вы хотите сделать больше изменений на своем тестовом сайте и загрузить их на GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам нужно ввести следующие команды (нажав Enter после каждого), чтобы вставить эти изменения в GitHub:</p>
+
+<pre>git add --all
+git commit -m 'another commit'
+git push</pre>
+
+<p>Вы можете заменить <em>another commit</em> более подходящим сообщением, чтобы описать, какое изменение вы только что сделали.</p>
+
+<p>Мы едва коснулись Git. Чтобы узнать больше, начните с <a href="https://help.github.com/index.html">GitHub Help site</a>.</p>
diff --git a/files/ru/learn/common_questions/what_software_do_i_need/index.html b/files/ru/learn/common_questions/what_software_do_i_need/index.html
new file mode 100644
index 0000000000..8432ce45c3
--- /dev/null
+++ b/files/ru/learn/common_questions/what_software_do_i_need/index.html
@@ -0,0 +1,156 @@
+---
+title: Какое программное обеспечение необходимо для создания веб-сайта?
+slug: Learn/Common_questions/What_software_do_I_need
+translation_of: Learn/Common_questions/What_software_do_I_need
+---
+<div class="summary">
+<p>В этой статье мы изложим какие программные компоненты вам понадобятся при редактировании, загрузке или просмотре веб-сайта.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>Вы должны уже знать <a href="/ru/docs/Learn/Pages_sites_servers_and_search_engines">разницу между веб-страницами, веб-сайтами, веб-серверами и поисковыми системами.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Узнать, какие программные компоненты вам понадобятся при редактировании, загрузке или просмотре веб-сайта.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Аннотация">Аннотация</h2>
+
+<p>Вы можете бесплатно загрузить большинство программ, необходимых для веб-разработки. Мы предоставим несколько ссылок в этой статье. Вам понадобятся инструменты: 1) создания и редактирования веб-страниц, 2) загружать файлы на ваш веб-сервер, 3) просматривать ваш веб-сайт.</p>
+
+<p>Почти все операционные системы по умолчанию включают текстовый редактор и просмоторщик веб-сайтов (называемый браузером). Поэтому обычно вам нужно приобрести лишь программное обеспечение для передачи файлов на ваш веб-сервер.</p>
+
+<h2 id="Активное_изучение">Активное изучение</h2>
+
+<p><em>Пока нет активного обучения. </em><a href="/ru/docs/MDN/Getting_started">Пожалуйста, подумайте о том, чтобы внести свой вклад.</a></p>
+
+<h2 id="Копай_глубже">Копай глубже</h2>
+
+<h3 id="Создание_и_редактирование_веб-страниц">Создание и редактирование веб-страниц</h3>
+
+<p>Для создания и редактирования веб-страниц необходим текстовый редактор. Тестовые редакторы создают и изменяют неотформатированные текстовые файлы. (Другие форматы, такие как <strong>{{Glossary("RTF")}}</strong>, позволяют добавить форматирование, такое как полужирное или подчеркивание. Эти форматы не подходят для написания веб-страниц.) Вам следует выбирать текстовый редактор с умом, так как вы будете активно работать с ним, при создании веб-сайта.</p>
+
+<p>Все настольные операционные системы поставляются с основным текстовым редактором. Они просты, но не имеют специальных возможностей для кодирования веб-страниц. Если вы хотите что-то более интересное, то доступно много сторонних инструментов. Сторонние редакторы часто поставляются с дополнительными функциями, включая подсветку синтаксиса, автозавершение, сворачиваемые блоки кода и поиск кода. Вот краткий список редакторов:</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Операционная система</th>
+   <th scope="col">Встроенный редактор</th>
+   <th scope="col">Сторонний редактор</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td><a href="http://en.wikipedia.org/wiki/Notepad_%28software%29" rel="external">Notepad</a></td>
+   <td>
+    <p><a href="http://notepad-plus-plus.org/">Notepad++</a></p>
+
+    <p><a href="https://www.visualstudio.com/">Visual Studio Code</a></p>
+
+    <p><a href="https://www.jetbrains.com/webstorm/">Web Storm</a></p>
+
+    <p><a href="http://brackets.io/">Brackets</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td>Mac OS</td>
+   <td><a href="http://en.wikipedia.org/wiki/TextEdit" rel="external">TextEdit</a></td>
+   <td>
+    <p><a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a></p>
+
+    <p><a href="https://www.visualstudio.com/">Visual Studio Code</a></p>
+
+    <p><a href="http://brackets.io/">Brackets</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td><a href="http://en.wikipedia.org/wiki/Vi" rel="external">Vi</a> (All UNIX)<br>
+    <a href="http://en.wikipedia.org/wiki/Gedit" rel="external">GEdit</a> (Gnome)<br>
+    <a href="http://en.wikipedia.org/wiki/Kate_%28text_editor%29" rel="external">Kate</a> (KDE)<br>
+    <a href="http://en.wikipedia.org/wiki/Kate_(text_editor)" rel="external">LeafPad</a> (Xfce)</td>
+   <td>
+    <p><a href="http://www.gnu.org/software/emacs/">Emacs</a><br>
+     <a href="http://www.vim.org/" rel="external">Vim</a></p>
+
+    <p><a href="https://www.visualstudio.com/">Visual Studio Code</a></p>
+
+    <p><a href="http://brackets.io/">Brackets</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ниже скриншот продвинутого текстового редактора:</p>
+
+<p><img alt="Screenshot of Notepad++." src="https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png" style="height: 311px; width: 450px;"></p>
+
+<h3 id="Загрузка_файлов_в_Интернете">Загрузка файлов в Интернете</h3>
+
+<p>Когда ваш сайт будет готов для публичного просмотра, вам придется загрузить свои веб-страницы на веб-сервер. Вы можете купить место на сервере у различных провайдеров (см. <a href="/en-US/docs/Learn/How_much_does_it_cost">Сколько стоит делать что-то в Интернете?</a>). После того, как вы решите, какого провайдера использовать, провайдер отправит вам по электронной почте информацию о доступе к протоколу FTP (протокол передачи файлов).  Загрузка файлов на веб-сервер является важным шагом при создании сайта, поэтому мы подробно расскажем об этом <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">в отдельной статье</a>. А сейчас, вот краткий список бесплатных базовых FTP-клиентов:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Операционная система</th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;">Программное обеспечение FTP</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td>
+    <p><a href="http://winscp.net" rel="external">WinSCP</a></p>
+
+    <p><a href="http://mobaxterm.mobatek.net/">Moba Xterm</a></p>
+   </td>
+   <td colspan="1" rowspan="3"><a href="https://filezilla-project.org/">FileZilla</a> (All OS)</td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td><a href="https://live.gnome.org/Nautilus" rel="external">Nautilus</a> (Gnome)<br>
+    <a href="http://dolphin.com/" rel="external">Dolphin</a> (KDE)</td>
+  </tr>
+  <tr>
+   <td>Mac OS</td>
+   <td><a href="http://cyberduck.de/">Cyberduck</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Просмотр_веб-сайтов">Просмотр веб-сайтов</h3>
+
+<p>Как вы уже знаете, вам необходим веб-браузер для просмотра веб-сайтов. Существуют десятки браузеров для вашего личного использования, однако когда вы разрабатываете веб-сайт, вы должны протестировать его, по крайней мере, со следующими основными браузерами, чтобы убедиться, что ваш сайт работает для большинста пользователей:</p>
+
+<ul>
+ <li><a href="https://www.mozilla.org/en-US/firefox/new/" rel="external">Mozilla Firefox</a></li>
+ <li><a href="https://www.google.fr/chrome/browser/" rel="external">Google Chrome</a></li>
+ <li><a href="http://windows.microsoft.com/en-US/internet-explorer/download-ie" rel="external">Microsoft Internet Explorer</a></li>
+ <li><a href="http://www.apple.com/safari/" rel="external">Apple Safari</a></li>
+</ul>
+
+<p>Если вы ориентируетесь на определенную группу (например, техническую платформу или страну), возможно, вам придется протестировать ваш сайт с помощью дополнительных браузеров, таких как <a href="http://www.opera.com/" rel="external">Opera</a>, <a href="http://www.konqueror.org/">Konqueror</a>, или<a href="http://www.ucweb.com/ucbrowser/" rel="external"> UC Browser</a>.</p>
+
+<p>Но тестирование усложняется, потому что некоторые браузеры работают только в определенных операционных системах. Apple Safari работает на iOS и Mac OS, а Internet Explorer работает только в Windows. Поэтому лучше воспользоваться такими сервисами, как <a href="http://browsershots.org/" rel="external">Browsershots</a> или <a href="http://www.browserstack.com/" rel="external">Browserstack</a>. Browsershots предоставляет скриншоты вашего сайта, того как ваш сайт будет выглядить в различных браузерах. Browserstack фактически предоставляет вам полный удаленный доступ к виртуальным машинам, поэтому вы можете протестировать ваш сайт в наиболее распространенных средах. Кроме того, вы можете настроить свою собственную виртуальную машину, но это требует некоторого опыта. (Если вы следуете этому пути, Microsoft имеет инструменты для разработчиков, включая готовую к использованию виртуальую машину на <a href="https://modern.ie" rel="external">modern.ie</a>.)</p>
+
+<p>Обязательно проведите тестирование на реальном устройстве, особенно на реальных мобильных устройствах. Симуляция мобильных устройств - это новая, развивающаяся технология и менее надежна, чем симуляция настольных устройств. Разумеется, мобильные устройства стоят денег, поэтому мы предлагаем взглянуть на  <a href="http://opendevicelab.com/" rel="external">Open Device Lab initiative</a>. Вы также можете обмениваться устройствами, если вы хотите протестировать на многих платформах, не тратя слишком много.</p>
+
+<h2 id="Следующие_шаги">Следующие шаги</h2>
+
+<ul>
+ <li>Некоторые из перечисленных программ бесплатны, но не все. <a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">Узнайте, сколько стоит сделать что-то в Интернете.</a></li>
+ <li>Если вы хотите больше узнать о текстовых редакторах, прочитайте нашу статью о том <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">как выбрать и установить текстовый редактор</a>.</li>
+ <li>Если вам интересно, как опубликовать ваш веб-сайт в Интернете, посмотрите статью <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">"Как загрузить файлы на веб-сервер"</a>.</li>
+</ul>
+
+<p> </p>