CSS и JavaScript доступность - лучшие практики - Изучение веб-разработки

CSS и JavaScript доступность - лучшие практики
==============================================

* Назад
* Обзор: Accessibility
* Далее  (en-US)

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

| Необходимые знания: | Базовая компьютерная грамотность, базовое понимание HTML, CSS и JavaScript, а также понимание, что такое доступность. |
| --- | --- |
| Цель: | Ознакомиться со способами использования CSS и JavaScript таким образом, чтобы не вредить доступности интерфейсов, а даже улучшать её. |

Влияют ли CSS и JavaScript на доступность?
------------------------------------------

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

CSS
---

Начнём наш обзор с CSS.

### Правильная семантика и ожидаемое пользователем поведение

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

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

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

#### «Стандартная» структура текстового контента

Заголовки, параграфы и списки — это основа текстового контента веб-страницы:

```html
<h1>Заголовок</h1>

<p>Параграф</p>

<ul>
  <li>В моём списке</li>
  <li>два элемента.</li>
</ul>
```

Типичные стили для такого контента могут выглядеть следующим образом:

```css
h1 {
  font-size: 5rem;
}

p,
li {
  line-height: 1.5;
  font-size: 1.6rem;
}
```

Следует обратить внимание, что:

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

Для более подробной информации смотрите Основы редактирования текста в HTML и Стилизация текста.

#### Акцентированный текст

Строчный элемент, который акцентирует особое внимание на содержащемся в нём тексте:

```html
<p>Вода <em>очень горячая</em>.</p>

<p>
  Собирающиеся на поверхности капельки воды называются
  <strong>конденсатом</strong>.
</p>
```

Возможно, нам понадобится добавить цвета акцентированному тексту:

```css
strong,
em {
  color: #a60000;
}
```

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

#### Аббревиатуры

Элемент, который позволяет разметить аббревиатуру или акроним и указать их расшифку:

```html
<p>
  Веб-контент верстается с помощью
  <abbr title="Hypertext Markup Language">HTML</abbr>.
</p>
```

И вновь, возможно, нам понадобится немного стилизовать наши аббревиатуры:

```css
abbr {
  color: #a60000;
}
```

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

#### Ссылки

Гиперссылки помогают нам переходить из одного места в сети в другое:

```html
<p>Посетите <a href="https://www.mozilla.org">домашнюю страницу Mozilla</a>.</p>
```

Ниже приведена базовая стилизация для ссылок:

```css
a {
  color: #ff0000;
}

a:hover,
a:visited,
a:focus {
  color: #a60000;
  text-decoration: none;
}

a:active {
  color: #000000;
  background-color: #a60000;
}
```

Стандартные соглашения по стилизации ссылок — подчёркивание и отличный от стандартного цвет (по умолчанию, синий) в обычном состоянии, другой цвет в случае, если ссылка ранее была посещена (по-умолчанию, фиолетовый) и еще один цвет для состояния нажатости (по-умолчанию, красный). Кроме того при наведении указателя мыши на ссылку указатель начинает отображаться в виде руки, а также ссылка выделяется, когда находится в фокусе (при перемещении по странице с помощью клавиши tab) или активна. Изображение ниже показывает выделение в Firefox (пунктирная обводка) и Chrome (синяя обводка):

![](/ru/docs/Learn/Accessibility/CSS_and_JavaScript/focus-highlight-firefox.png)

![](/ru/docs/Learn/Accessibility/CSS_and_JavaScript/focus-highlight-chrome.png)

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

#### Формы

Формы - это DOM-элементы, которые позволяют пользователям вводить данные на веб-страницах:

```html
<div>
  <label for="name">Введите имя</label>
  <input type="text" id="name" name="name" />
</div>
```

Мы подготовили пример хорошей стилизации формы, который вы можете найти здесь: form-css.html (а также посмотреть вживую).

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

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

#### Таблицы

Таблицы используются для отображения табличных данных.

Вы можете найти хороший образец HTML и CSS для таблицы в нашем примере: table-css.html (а также посмотреть вживую).

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

### Цвета и контраст

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

К счастью, проверить, всё ли в порядке с уровнем контрастности, весьма просто. Существует множество онлайн-инструментов, которые помогут сравнить пару цветов и вычислить значение контрастности. Например, Color Contrast Checker от WebAIM. Это довольно простой в использовании инструмент, который также предоставляет инструкции, как можно добиться соответствия критериям WCAG по контрастности цветов.

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

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

### Скрытые элементы

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

![](/ru/docs/Learn/Accessibility/CSS_and_JavaScript/tabbed-info-box.png)

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

А вот `visibility``:hidden` и `display``:none`, напротив, использовать для скрытия контента не следует, потому что они скрывают его не только визуально, но и от скринридеров. Поэтому применять эти свойства стоит, только если совсем скрыть контент и является вашей задачей.

**Примечание:** В статье Невидимый контент только для пользователей скринридеров (EN) содержится множество полезной информации по этой теме.

### Помните, что пользователи могут переопределять стили

#### Помните, что пользователи могут переопределять ваши стили

У пользователей есть возможность переопределять ваши стили своими, например:

* В руководстве Сары Мэддокс Как использовать пользовательские таблицы стилей (CSS) в Firefox (EN) можно найти подробные инструкции по пользовательским стилям в Firefox, а в статье Как использовать пользовательские таблицы стилей (CSS) в Internet Explorer (EN) за авторством Адриана Гордона, соответственно, для IE.
* Также можно воспользоваться браузерными расширениями. Например, расширение Stylish доступно для Firefox, Safari, Opera и Chrome.

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

JavaScript
----------

При неправильном использовании JavaScript тоже может вредить доступности.

Современный JavaScript — это очень мощный язык, с помощью которого можно делать кучу разных вещей: от простых обновлений пользовательского интерфейса до полноценных 2D- и 3D-игр. Понятно, что нельзя сделать абсолютно любой тип контента доступным на 100% для всех — нужно просто прилагать все усилия, чтобы делать веб-приложения доступными настолько, насколько это возможно.

Сравнительно несложно сделать доступным простой контент — например, текст, изображения, таблицы, формы и кнопки. Вспомним основные тезисы из статьи HTML: Хорошая основа для доступности:

* Хорошая семантика: использование каждого элемента для своей задачи. Следует убедиться, что используются различные типы элементов: заголовки, параграфы, `<button>`, `<a>` и так далее.
* Контент должен быть доступен либо как обычный текст, либо как альтернативный текст, например атрибут alt для изображений.

Мы также показали пример использования JavaScript для добавления некоторым элементам возможностей, которых они лишены по умолчанию — смотрите в разделе Добавление доступности с клавиатуры. Такое решение стоит рассматривать только в случае, когда по какой-то причине у вас нет доступа к изменению разметки. Намного надежнее и универсальнее будет использовать для каждой задачи соответствующий элемент. Также улучшить доступность несемантичных JavaScript-виджетов можно использованием WAI-ARIA атрибутов — с их помощью можно добавить некоторой искусственной семантики для пользователей скринридеров. В следующей статье мы рассмотрим эту тему подробнее.

Сложные приложения, например 3D-игры, сделать доступными непросто — написанная с использованием WebGL игра рендерится в элементе `<canvas>`, который в настоящее время не предоставляет никаких возможностей для использования людьми с дефектами зрения. Можно успокаивать себя тем, что данная группа пользователей не входит в целевую аудиторию, поэтому не стоит ожидать полной доступности для них. Тем не менее, вы можете реализовать управление с помощью клавиатуры (en-US) для игроков, которые не могут использовать мышь, а также сделать цветовую схему достаточно контрастной для игроков с дальтонизмом.

### Проблема с чрезмерным использованием JavaScript

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

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

### Ненавязчивый JavaScript

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

Хорошие примеры использования подхода с ненавязчивым JavaScript:

* Валидация формы на клиенте, которая показывает пользователю сообщение о проблемах в заполнении формы без необходимости отправлять данные для проверки на сервер. Если скриптов не будет, то форма продолжит работать, просто валидация будет несколько медленнее.
* Создание нестандартных элементов управления для HTML5 `<video>`, которыми возможно пользоваться с клавиатуры. И в то же самое время, указание прямой ссылки на видео, которой можно воспользоваться, если JavaScript отключён (стандартные элементы управления `<video>` недоступны с клавиатуры в большинстве браузеров).

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

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

**Примечание:** В этом простом примере серверная валидация не реализована.

Также мы постарались сделать эту форму довольно доступной. Мы использовали элементы `<label>` и связали их со своими полями ввода, таким образом скринридеры смогут корректно их озвучить:

```html
<label for="name">Введите ваше имя:</label>
<input type="text" name="name" id="name" />
```

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

```js
form.onsubmit = validate;

function validate(e) {
  errorList.innerHTML = "";
  for (let i = 0; i < formItems.length; i++) {
    const testItem = formItems[i];
    if (testItem.input.value === "") {
      errorField.style.left = "360px";
      createLink(testItem);
    }
  }

  if (errorList.innerHTML !== "") {
    e.preventDefault();
  }
}
```

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

В реальности валидация формы будет в разы сложнее. Возможно, вы захотите проверить, что введённое имя действительно выглядит как имя, а возраст — как число, да ещё и реалистичное (например, не отрицательное и состоящее не более чем из 3 цифр). Здесь мы реализовали лишь примитивную проверку на наличие хоть какого-то текста в полях ввода (`if (testItem.input.value === '')`).

Когда валидация проходит успешно, форма отправляется на сервер. Если же были обнаружены ошибки (`if (errorList.innerHTML !== '')`), то мы прерываем отправку формы (при помощи `preventDefault()`) и отображаем сообщения обо всех найденных ошибках (смотрите далее).

Для каждого пустого на момент отправки формы поля ввода мы создаем элемент списка с ссылкой и добавляем в `errorList`.

```js
function createLink(testItem) {
  const listItem = document.createElement("li");
  const anchor = document.createElement("a");

  anchor.textContent =
    "Поле ввода " +
    testItem.input.name +
    " пусто: введите " +
    testItem.input.name +
    ".";
  anchor.href = "#" + testItem.input.name;
  anchor.onclick = function () {
    testItem.input.focus();
  };
  listItem.appendChild(anchor);
  errorList.appendChild(listItem);
}
```

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

**Примечание:** Часть этого примера, связанная с `focus()`, довольно хитрая. Браузеры Chrome и Edge (а также новые версии IE) не нуждаются в коде `onclick`/`focus()` — они сами переведут фокус на элемент после клика по ссылке. Safari лишь выделит нужный элемент, так что этот блок кода нужен для корректной установки фокуса. В Firefox же трюк с выделением элемента при клике по ссылке не работает вообще. Данная ошибка должна быть вскоре исправлена — тогда Firefox придет к паритету с прочими браузерами (смотрите Firefox bug 277178).

Дополнительно, то что `errorField` расположено в вёрстке в самом начале (тогда как визуально в интерфейсе расположено иначе при помощи CSS), позволяет пользователям увидеть, что именно не так с заполнением формы, и легко вернуться обратно к нужным полям ввода в начале страницы.

Кроме того, мы использовали несколько WAI-ARIA атрибутов в нашем примере, чтобы решить проблемы с доступностью, вызванные обновлением контента без перезагрузки страницы (по умолчанию, скринридеры не могут подхватить эти изменения и уведомить об этом пользователя):
```

<div class="errors" role="alert" aria-relevant="all">
  <ul>
  </ul>
</div>
```

Мы разберем данные атрибуты в следующей статье, которая подробно описывает WAI-ARIA (en-US).

**Примечание:** Кто-то из читателей мог задуматься о том факте, что в HTML5 формах есть встроенные механизмы валидации, такие как атрибуты `required`, `min`/`minlength` и `max`/`maxlength` (смотрите подробнее на странице элемента `<input>`). Мы не использовали их в примере, потому что поддержка браузерами у HTML5 валидации весьма варьируется (например, только IE10 и новее).

**Примечание:** Статья Удобная и доступная валидация форм (EN) от WebAIM содержит дополнительную полезную информацию по этой теме.

### Прочие проблемы доступности, связанные с JavaScript

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

#### Специфичные события мыши

Большая часть интерактивности в пользовательских интерфейсах реализуется в JavaScript при помощи обработчиков событий, которые позволяют запускать код, когда происходит определённое событие. У некоторых таких событий имеются проблемы с доступностью. Хороший пример — это специфичные события мыши, например mouseover (en-US), mouseout (en-US), dblclick (en-US) и так далее. Функции, которые активируются при срабатывании этих событий, не будут доступны при использовании других устройств ввода, например клавиатуры.

Чтобы избежать проблем подобного рода, следует дублировать функциональность при помощи независимых от устройств событий. Например, события focus (en-US) и blur будут работать как для мыши, так и для клавиатуры.

Рассмотрим пример, который проиллюстрирует, когда это может быть важно. Допустим, у нас есть миниатюрное изображение, при наведении на которое или при фокусе на котором должна показываться его увеличенная версия (примерно как карточки товаров в каталоге интернет-магазина).

Мы подготовили простой пример, который можно посмотреть здесь mouse-and-keyboard-events.html (а здесь можно посмотреть исходный код). В коде представлены две функции, которые показывают и скрывают увеличенное изображение. Они устанавливаются в качестве обработчиков событий следующими строками кода:

```js
imgThumb.onmouseover = showImg;
imgThumb.onmouseout = hideImg;

imgThumb.onfocus = showImg;
imgThumb.onblur = hideImg;
```

Первые две строки кода запускают функцию, когда указатель мыши наводится на изображение или уходит с него, соответственно. Такая реализация не позволит открыть увеличенное изображение при помощи клавиатуры. Чтобы решить эту проблему, мы добавили последние две строки, которые запускают функции в случаях, если фокус перешёл на изображение или же ушёл с него. Таким образом, увеличенное изображение будет открываться при переходе на миниатюру при помощи клавиши tab (это возможно, потому что мы добавили миниатюрам `tabindex="0"`).

Событие click довольно любопытное — выглядит так, будто бы оно специфичное для мыши, однако большинство браузеров при нажатии клавиши Enter/Return активируют обработчики событий onclick на находящихся в фокусе ссылках или элементах формы, а также при тапе по элементам на сенсорном экране. Впрочем, это не работает автоматически, если вы позволяете принимать фокус неинтерактивному по умолчанию элементу при помощи tabindex — в таких случаях нужно специально прослушивать нажатие нужных кнопок (смотрите Добавление доступности с клавиатуры).

Проверьте ваши навыки!
----------------------

Вы дочитали до конца, но хорошо ли вы усвоили материал? Перед тем как двигаться дальше, вы можете пройти тесты, которые мы специально подготовили — смотрите Проверьте ваши навыки: CSS и JavaScript доступность (EN) (en-US).

Заключение
----------

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

Далее WAI-ARIA!

* Назад
* Обзор: Accessibility
* Далее  (en-US)


Как настроить локальный сервер для тестирования? - Изучение веб-разработки

Как настроить локальный сервер для тестирования?
================================================

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

| Требования: | Сначала вам необходимо изучить как работает интернет, а также что такое веб-сервер (en-US). |
| --- | --- |
| Цель: | Вы научитесь как устанавливать локальный тестовый сервер. |

Локальные и удалённые файлы
---------------------------

На протяжении всего обучения, вы будете открывать примеры непосредственно в браузере — двойным кликом по HTML файлу, перетаскиванием файла в окно браузера, или через меню *File* > *Open...* и указывая необходимый HTML файл. Существует множество способов как это сделать.

Если веб-адрес начинается с `file://` в котором далее прописан путь к файлу на вашем локальном жёстком диске, значит используется локальный файл. В противоположность этому, если вы откроете на просмотр один из наших примеров, расположенных на GitHub (или пример расположенный на любом другом удалённом сервере), веб-адрес будет начинаться с `http://` или `https://`, что означает что файл был получен через HTTP.

Проблемы тестирования локальных файлов
--------------------------------------

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

* **Они содержат асинхронные запросы.** Некоторые браузеры (включая Chrome) не будут запускать асинхронные запросы (см. Fetching data from the server), если вы просто запускаете пример из локального файла. Это связано с ограничениями безопасности (для получения дополнительной информации о безопасности в Интернете, ознакомьтесь с Website security).
* **Они имеют серверный язык.** Серверные языки (например, PHP или Python) требуют специального сервера для интерпретации кода и предоставления результатов.
Запуск простого локального HTTP сервера
---------------------------------------

Чтобы обойти проблему асинхронных запросов, нам нужно протестировать такие примеры, запустив их через локальный веб-сервер. Один из самых простых способов сделать это для наших целей - использовать модуль `SimpleHTTPServer` Python.

Для этого нужно:

1. Установить Python. Если вы пользуетесь Linux или Mac OS X, всё уже готово в вашей системе. Если вы пользователь Windows, вы можете скачать установочный файл с домашней страницы Python:
    * Зайдите на python.org
    * В секции загрузок, выберите линк для Python "3.xxx".
    * Внизу страницы выберите *Windows x86 executable installer* и скачайте его.
    * После загрузки файла запустите его.
    * На первой странице инсталлятора выберите чекбокс "Add Python 3.xxx to PATH".
    * Нажмите *Install*, затем нажмите *Close* когда установка закончится.
2. Откройте командную строку (Windows)/ (OS X/Linux). Для проверки установки Python введите следующую команду:

```bash
python -V
```

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

```bash
# 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 ..
```

4. Введите команду для запуска сервера в том каталоге:

```bash
# If Python version returned above is 3.X
python -m http.server
# If Python version returned above is 2.X
python -m SimpleHTTPServer
```

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

**Примечание:** . Если у вас уже есть что-то на порту 8000, вы можете выбрать другой порт, запустив команду сервера, за которой следует альтернативный номер порта, например: `python -m http.server 7800` (Python 3.x) или `python -m SimpleHTTPServer 7800` (Python 2.x). Затем вы можете получить доступ к своему контенту на `localhost: 7800`.

Запуск серверных языков локально
--------------------------------

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

* Для запуска кода на стороне сервера Python вам необходимо использовать веб-инфраструктуру Python. Вы можете узнать, как использовать структуру Django, прочитав Django Web Framework (Python). Flask также является хорошей (чуть менее тяжёлой) альтернативой Django. Чтобы запустить это, ознакомьтесь с install Python/PIP, а затем установите Flask с помощью `pip3 install flask`. На этом этапе вы сможете запустить примеры Python Flask, используя, например, `python3 python-example.py`, затем перейдя на `localhost: 5000` в свой браузер.
* Чтобы запустить серверный код Node.js (JavaScript), вам нужно использовать Node.js или фреймворк, построенный поверх него. Express - хороший выбор - см. Express Web Framework (Node.js/JavaScript).
* Чтобы запустить PHP-серверный код, вам понадобится настройка сервера, которая может интерпретировать PHP. Хорошими вариантами для локального тестирования PHP являются MAMP (Mac и Windows), AMPPS (Mac, Windows, Linux) и LAMP (Linux, Apache, MySQL и PHP / Python / Perl). Это полные пакеты, которые создают локальные настройки, позволяющие запускать базы данных Apache, PHP и MySQL.


Как разместить свой сайт в Google App Engine - Изучение веб-разработки

Как разместить свой сайт в Google App Engine
============================================

Google App Engine - это мощная платформа, которая позволяет создавать и запускать приложения в инфраструктуре Google - нужно ли создавать многоуровневое веб-приложение с нуля или размещать статический веб-сайт. Вот пошаговое руководство по размещению вашего сайта в Google App Engine.

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

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

1. Перейдите на панель App Engine dashboard в консоли Google Cloud Platform и нажмите кнопку «Создать» (*Create*).
2. Введите название проекта, отредактируйте свой ID проекта и отметьте его. Для этого урока используются следующие значения:
    * Project name: *GAE Sample Site*
    * Project ID: *gaesamplesite*
3. Если вы ещё не создали проект раньше, вам нужно будет выбрать, хотите ли вы получать обновления электронной почты или нет, соглашайтесь с Условиями обслуживания, а затем вы можете нажать кнопку «Создать», чтобы создать свой проект.
Создание приложения
-------------------

Каждый проект Cloud Platform может содержать одно приложение App Engine. Давайте подготовим приложение для нашего проекта.

1. Нам понадобится образец приложения для публикации. Если у вас его нет, загрузите и распакуйте это sample app..
2. Посмотрите на структуру образца приложения - папка `website` содержит содержимое вашего сайта, а `app.yaml` - ваш файл конфигурации приложения.
    * Ваш веб-сайт должен войти в папку `website`, а его целевую страницу нужно называть `index.html`, но кроме того, она может принимать любую форму.
    * Файл `app.yaml` - это файл конфигурации, который сообщает App Engine, как сопоставлять URL-адреса вашим статическим файлам. Вам не нужно его редактировать.
Публикация приложения
---------------------

Каждый проект Cloud Platform может содержать одно приложение App Engine. Давайте подготовим приложение для нашего проекта.

1. Нажмите кнопку Активировать Google Cloud Shell в верхней части окна консоли.

 ![Activate Google Cloud Shell button](/ru/docs/Learn/Common_questions/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine/activate-google-cloud-shell-button.png)
2. Откройте редактор кода с панели инструментов Cloud Shell.

 ![Code Editor from Cloud Shell toolbar](/ru/docs/Learn/Common_questions/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine/screen_shot_2018-05-09_at_23.13.21.png)
3. С помощью drag and drop разместите папку `sample-app` в левой панели редактора кода.
4. Вернитесь обратно в Cloud Shell и введите следующую команду для перехода в директорию вашего приложения:

```bash
cd sample-app
```

5. Теперь вы готовы развернуть ваше приложение, т.е. загрузить его в App Engine:

```bash
gcloud app deploy
```

6. Введите число от одного до семи, чтобы выбрать регион, в котором вы хотите разместить своё приложение.
7. Нажмите `Y` для подтверждения.
8. Теперь перейдите по ссылке *your-project-id*.appspot.com, чтобы увидеть ваш сайт. Например, для проекта с ID *gaesamplesite,* перейдите по ссылке gaesamplesite.appspot.com.
See also
--------

Чтобы узнать больше, смотрите Google App Engine Documentation.


Какое программное обеспечение необходимо для создания веб-сайта? - Изучение веб-разработки

Какое программное обеспечение необходимо для создания веб-сайта?
================================================================

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

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

Аннотация
---------

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

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

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

*Пока нет активного обучения.* Пожалуйста, подумайте о том, чтобы внести свой вклад.

Копай глубже
------------

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

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

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

| Операционная система | Встроенный редактор | Сторонний редактор |
| --- | --- | --- |
| Windows | Notepad | Notepad++Visual Studio CodeWeb StormBrackets |
| Mac OS | TextEdit | TextWranglerVisual Studio CodeBrackets |
| Linux | Vi (All UNIX) GEdit (Gnome) Kate (KDE) LeafPad (Xfce) | Emacs VimVisual Studio CodeBrackets |

Ниже скриншот продвинутого текстового редактора:

![Screenshot of Notepad++.](/ru/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need/notepadplusplus.png)

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

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

| Операционная система | Программное обеспечение FTP |
| --- | --- |
| Windows | WinSCP
Moba Xterm | FileZilla (All OS) |
| Linux | Nautilus
 (Gnome)Dolphin
 (KDE)
  |
| Mac OS | Cyberduck |

### Просмотр веб-сайтов

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

* Mozilla Firefox
* Google Chrome
* Microsoft Internet Explorer
* Apple Safari

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

Но тестирование усложняется, потому что некоторые браузеры работают только в определённых операционных системах. Apple Safari работает на iOS и Mac OS, а Internet Explorer работает только в Windows. Поэтому лучше воспользоваться такими сервисами, как Browsershots или Browserstack. Browsershots предоставляет скриншоты вашего сайта, того как ваш сайт будет выглядеть в различных браузерах. Browserstack фактически предоставляет вам полный удалённый доступ к виртуальным машинам, поэтому вы можете протестировать ваш сайт в наиболее распространённых средах. Кроме того, вы можете настроить свою собственную виртуальную машину, но это требует некоторого опыта. (Если вы следуете этому пути, Microsoft имеет инструменты для разработчиков, включая готовую к использованию виртуальную машину на modern.ie.)

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

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

* Некоторые из перечисленных программ бесплатны, но не все. Узнайте, сколько стоит сделать что-то в Интернете.
* Если вы хотите больше узнать о текстовых редакторах, прочитайте нашу статью о том как выбрать и установить текстовый редактор (en-US).
* Если вам интересно, как опубликовать ваш веб-сайт в Интернете, посмотрите статью "Как загрузить файлы на веб-сервер" (en-US).


Как выбрать текстовый редактор? - Изучение веб-разработки

Как выбрать текстовый редактор?
===============================

In this article we highlight some things to think about when installing a text editor for web development.

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

Summary
-------

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

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

Вот основные вопросы, на которые вы должны ответить:

* С какой ОС (операционной системой) я хочу работать?
* Какие технологии я хочу использовать?
* Какие основные функции я ожидаю от моего текстового редактора?
* Хочу ли я добавить дополнительные функции в мой текстовый редактор?
* Нужна ли мне поддержка / помощь при использовании моего текстового редактора?
* Имеет ли смысл мой текстовый редактор для меня?

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

Here are some popular editors:

| Редактор | Лицензия | Цена | ОС | Поддержка | Док. | Расширяемый |
| --- | --- | --- | --- | --- | --- | --- |
| Atom | MIT/BSD | Free | Windows, Mac, Linux | Forum | Online Manual | Yes |
| Brackets | MIT/BSD | Free | Windows, Mac, Linux | Forum, IRC | GitHub Wiki | Yes |
| Coda | Closed source | $99 | Mac | Twitter, Forum, E-mail | eBook | Yes |
| CodeLobster | Closed source | Free | Windows, Mac, Linux | Forum, E-mail | No end user doc | Yes |
| Emacs | GPL 3 | Free | Windows, Mac, Linux | FAQ, Mailing list, News Group | Online Manual | Yes |
| Espresso | Closed source | $75 | Mac | FAQ, E-mail | No end user doc, but plug-in doc | Yes |
| Gedit | GPL | Free | Windows, Mac, Linux | Mailing list, IRC | Online Manual | Yes |
| Komodo Edit | MPL | Free | Windows, Mac, Linux | Forum | Online Manual | Yes |
| Notepad++ | GPL | Free | Windows | Forum | Wiki | Yes |
| PSPad | Closed source | Free | Windows | FAQ, Forum | Online Help | Yes |
| Sublime Text | Closed source | $70 | Windows, Mac, Linux | Forum | Official, Unofficial | Yes |
| TextMate | Closed source | $50 | Mac | Twitter, IRC, Mailing list, E-mail | Online Manual, Wiki | Yes |
| TextWrangler | Closed source | Free | Mac | FAQ, Forum | PDF Manual | No |
| Vim | Specific open license | Free | Windows, Mac, Linux | Mailing list | Online Manual | Yes |
| Visual Studio Code | Open Source under MIT licence/ Specific licence for product | Free | Windows, Mac, Linux | FAQ | Documentation | Yes |

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

*Активное изучение пока не доступно. Пожалуйста, рассмотрите возможность внести свой вклад.*

Копай глубже
------------

### Критерии выбора

Итак, более подробно, о чем вы должны думать, когда выбираете текстовый редактор?

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

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

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).

#### What kind of technologies do I want to manipulate?

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 HTML, CSS, and 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

* **Code coloring.** Make your file more legible by color-coding keywords based on the technology you're using.
* **Code completion.** Save you time by auto-completing recurring structures (for example, automatically close HTML tags, or suggesting valid values for a given CSS property).
* **Code snippets.** 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.

Most text editors now support code coloring, but not necessarily the other two features. Make sure in particular that your text editor color-codes HTML, CSS, and JavaScript.

#### What kind of basic features do I expect from my text editor?

It depends on your needs and plans. These functionalities are often helpful:

* Search-and-replace, in one or multiple documents, based on regular expressions or other patterns as needed
* Quickly jump to a given line
* View two parts of a large document separately
* View HTML as it will look in the browser
* Select text in multiple places at once
* View your project's files and directories
* Format your code automatically with code beautifier
* Check spelling

#### Do I want to add extra features to my text editor?

An extensible editor comes with fewer built-in features, but can be extended based on your needs.

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.

If you like *lots* 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:

* Aptana Studio
* Eclipse
* Komodo IDE
* NetBeans IDE
* Visual Studio
* WebStorm

#### Do I need support/help while using my text editor?

Always good to know if you can get help or not when using software. For text editors, check for two different kinds of support:

1. User-oriented content (FAQ, manual, online help)
2. Discussion with developers and other users (forum, email, IRC)

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.

#### Does my text editor's look-and-feel matter to me?

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.

### Install and set up

Installing a text editor is usually quite straightforward. The method varies based on your platform but it shouldn't be too hard:

* **Windows.** The developers will give you an `.exe` or `.msi` file. Sometimes the software comes in a compressed archive like `.zip`, `.7z`, or `.rar`, and in that case you'll need to install an additional program to extract the content from the archive. Windows supports `.zip` by default.
* **Mac.** On the editor's website you can download a `.dmg` file. Some text editors you can find directly in the Apple Store to make installation even simpler.
* **Linux.** In the most popular distros you can start with your graphical package manager (Ubuntu Software Center, mintInstall, GNOME Software, &c.). You can often find a `.deb` or `.rpm` 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.

When you install a new text editor, your OS will probably continue to open text files with its default editor until you change the *file association.* These instructions will help you specify that your OS should open files in your preferred editor when you double-click them:

* Windows
    + Windows 8
    + Windows 7
    + older systems
* Mac OS X
* Linux
    + Ubuntu Unity
    + GNOME
    + KDE
Next steps
----------

Now that you have a good text editor, you could take some time to finalize your basic working environment, or, if you want to play with it right away, write your very first web page.


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

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

Данная статья покажет, как можно опубликовать сайт в Интернет с помощью инструментов передачи файлов(file transfer tools).

| Необходимые знания: | Вы должны знать что такое веб-сервер и как работают доменные имена. Также вы должны знать, как установить базовую среду и как написать простую веб-страницу. |
| --- | --- |
| Цель: | Научиться передавать файлы на сервер используя различные доступные инструменты передачи файлов(file transfer tools). |

Сводка
------

Если вы создали простую веб-страницу (для примера смотрите Основы HTML), вы, вероятно, захотите отобразить её онлайн, на веб-сервере. В данной статье мы обсудим как сделать это, используя различные доступные настройки, такие как SFTP клиенты, RSync и GitHub.

SFTP (Безопасный Протокол Передачи Файлов)
------------------------------------------

Существуют различные варианты SFTP клиентов. В нашем примере мы будем использовать FileZilla, тк он бесплатен и подходит для Windows, macOS и Linux. Чтобы установить менеджер перейдите на страницу загрузки FileZilla downloads page, нажмите на кнопку загрузки, затем установите пакет из установочного файла обычным способом.

**Примечание:** Конечно, есть много других вариантов. Смотрите Publishing tools для других способов.

Откройте приложение FileZilla; вы должны увидеть что-то вроде этого:

![](/ru/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/filezilla-ui.png)

### Вход в систему

В этом примере мы предположим, что наш хостинг-провайдер (сервис, на котором находится наш HTTP веб сервер) является фиктивной компанией "Example Hosting Provider", чьи URL адреса выглядят следующим образом: `mypersonalwebsite.examplehostingprovider.net`.

Сейчас мы создали аккаунт и получили от хостинг-провайдера следующую информацию:

>
> Поздравляем с созданием аккаунта на сервисе "Example Hosting Provider".
>
>
> Ваш аккаунт: `demozilla`
>
>
> Ваш сайт доступен по адресу:
>
>
> `demozilla.examplehostingprovider.net`
>
>
> Для загрузки файлов на этот аккаунт, пожалуйста, подключитесь через SFTP с использованием следующих учётных данных:
>
>
> * SFTP сервер: `sftp://demozilla.examplehostingprovider.net`
> * Имя пользователя: `demozilla`
> * Пароль: `quickbrownfox`
> * Порт: `5548`
> * Для публикации в интернет, поместите ваши файлы в папку `Public/htdocs` .
>
>
>

Давайте сначала посмотрим на `http://demozilla.examplehostingprovider.net/` — как вы можете видеть, то здесь пока ничего нет:

![Our demozilla personal website, seen in a browser: it's empty](/ru/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/demozilla-empty.png)

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

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

1. Выберите *File > Site Manager...* в главном меню.
2. В окне *Site Manager*, нажмите кнопку *New Site*, затем введите название сайта как **demozilla** в предоставленном месте.
3. Укажите SFTP-сервер вашего хоста в предоставленном поле: Host.
4. В раскрывающемся списке *Logon Type:* выберите *Normal*, затем введите предоставленные имя пользователя и пароль в соответствующие поля.
5. Введите правильный порт и другую информацию.

Ваше окно должно выглядеть как показано ниже:

![](/ru/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/site-manager.png)

Теперь нажмите *Connect* для подключения к SFTP-серверу.

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

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

После подключения ваш экран должен выглядеть примерно так (мы подключились к нашему собственному примеру, чтобы дать вам представление):
 ![](/ru/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/connected.png)

Давайте посмотрим, что вы видите:

* По центру левой панели вы можете видеть локальные файлы. Перейдите в каталог, в котором вы храните свой веб-сайт (например, `mdn`).
* По центру правой панели вы увидеть удалённые файлы. Мы вошли в наш удалённый корень FTP (в данном случае: `users/demozilla`)
* Вы можете пока игнорировать нижнюю и верхнюю панели. Соответственно, это журнал сообщений, показывающий состояние соединения между вашим компьютером и SFTP-сервером, и журнал в реальном времени каждого взаимодействия между вашим SFTP-клиентом и сервером.
### Загрузка на сервер

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

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

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

Пока все хорошо, но действительно ли файлы в сети? Вы можете перепроверить, перейдя на ваш сайт (например, `http://demozilla.examplehostingprovider.net/`) в вашем браузере:

![Here we go: our website is live!](/ru/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/here-we-go.png)

И вуаля! Наш сайт работает!

Rsync
-----

Rsync (en-US) 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.

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:

```bash
rsync [-options] SOURCE user@x.x.x.x:DESTINATION
```

* `-options` is a dash followed by a one or more letters, for example `-v` for verbose error messages, and `-b` to make backups. You can see the full list at the rsync man page (search for "Options summary").
* `SOURCE` is the path to the local file or directory that you want to copy files over from.
* `user@` is the credentials of the user on the remote server you want to copy files over to.
* `x.x.x.x` is the IP address of the remote server.
* `DESTINATION` is the path to the location you want to copy your directory or files to on the remote server.

You'd need to get such details from your hosting provider.

For more information and further eamples, see How to Use Rsync to Copy/Sync Files Between Servers.

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 `-e` option. For example:

```bash
rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION
```

You can find more details of what is needed at How To Copy Files With Rsync Over SSH.

### Rsync GUI tools

As with other command line tools, GUI tools also exist for Rsync, for those who are not as comfortable with using the command line. Acrosync is one such tool, and it is available for Windows and macOS.

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.

GitHub
------

GitHub allows you to publish websites via GitHub pages (gh-pages).

We've covered the basics of using this in the Publishing your website article from our Getting started with the Web guide, so we aren't going to repeat it all here.

However, it is worth knowing that you can also host a website on GitHub, but use a custom domain with it. See Using a custom domain with GitHub Pages for a detailed guide.

Other methods to upload files
-----------------------------

The FTP protocol is one well-known method for publishing a website, but not the only one. Here are a few other possibilities:

* **Web interfaces**. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service.
* **WebDAV (en-US)**. An extension of the HTTP protocol to allow more advanced file management.


Обзор инструментов разработки в браузерах - Изучение веб-разработки

Обзор инструментов разработки в браузерах
=========================================

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

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

Как открыть инструменты веб-разработчика в вашем браузере?
----------------------------------------------------------

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

![](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/screenshot_from_2014-11-25_12-32-57.png)

Как её отобразить? Есть три варианта:

* ***Клавиатура.*** *Ctrl + Shift + I*, кроме
    + **Internet Explorer.** *(клавиша - F12)*
    + **Mac OS X.** *(сочетание клавиш - ⌘ + ⌥ + I )*
* ***Панель Меню.***
    + **Firefox.** Открыть меню
     ![](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/2014-01-10-13-08-08-f52b8c.png) \*➤
     ![](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/screenshot_from_2014-11-26_14-24-56.png) \*➤ Инструменты разработки, или\_ *Инструменты ➤* *Веб-разработка ➤ Инструменты разработки*
    + **Chrome.** *Дополнительные инструменты ➤ Инструменты разработчика*
    + **Safari.** *Разработка ➤ Показать Web Inspector .* Если вы не видите меню "Разработка", зайдите в *Safari ➤ Настройки ➤ Дополнительно,* и проверьте стоит ли галочка *напротив "Показать меню разработки"*.
    + **Opera**. *Меню* *➤* *Разработка ➤ Инструменты разработчика.* Если вы не видите меню "Разработка", включите его отображение, перейдя в Меню *➤* Другие инструменты *➤* Показать меню разработчика.
* ***Контекстное меню.*** Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором вам нужно выбрать пункт *Исследовать Элемент*. (*дополнение:* этот способ отобразит вам код того элемента, на котором вы щёлкнули правой кнопкой.)

![](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/inspect-element-option.png)

Inspector: DOM обозреватель и CSS редактор
------------------------------------------

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

![](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/inspector.png)

Если вы н*е видите* Inspector,

* Нажмите на вкладку *Inspector* .
* В Internet Explorer, нажмите на *DOM Обозреватель,* или нажмите Ctrl + 1.
* В Safari, элементы управления представлены не так чётко, но вы должны увидеть HTML код, если вы не выбрали что-то другое в окне разработки. Нажмите на кнопку *Стиль,* чтобы увидеть CSS.
### Обзор DOM inspector

Для начала, попробуйте нажать правой кнопкой мыши (Ctrl+клик) по элементу HTML в DOM inspector и посмотрите на контекстное меню. Пункты меню могут различаться в разных браузерах, но важными из них являются одни и те же:

![](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/dev-tool-context-menu.png)

* **Удалить узел** (иногда *Удалить элемент*). Удаляет текущий элемент.
* **Править как HTML** (иногда *Добавить атрибут*/*Править текст*). Позволяет редактировать HTML и видеть результат "вживую". Очень полезно для отладки и тестирования.
* **:hover/:active/:focus**. Заставляет элементы переключить своё состояние на то, к которому применён ваш стиль.
* **Копировать/Копировать как HTML**. Копирует текущий выделенный HTML.

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

### Обзор CSS редактора

По умолчанию, CSS редактор отображает CSS-свойства применённые к текущему выбранному элементу:

![](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/css-viewer-2.png)

Эти функции особенно удобны:

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

Вы должно быть уже заметили другие вкладки в CSS редакторе:

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

Узнать больше об Inspector в различных браузерах:

* Firefox Page inspector
* IE DOM Explorer
* Chrome DOM inspector (Inspector в Opera схож с Inspector в Chrome)
* Safari DOM inspector and style explorer
Консоль JavaScript
------------------

Консоль JavaScript невероятно полезный инструмент для отладки JavaScript, если он не работает, как ожидалось. Она позволяет вам загружать JavaScript вопреки порядку загрузки скрипта в браузере, и докладывает об ошибках как только браузер пытается выполнить ваш код. Для доступа к консоли из любого браузера просто нажмите на кнопку Console. (В Internet Explorer, нажмите *Ctrl + 2*.) Откроется окно, как показано ниже:

![](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/console.png)

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

1.
```js
alert("hello!");
```

2.
```js
document.querySelector("html").style.backgroundColor = "purple";
```

3.
```js
var myImage = document.createElement("img");
myImage.setAttribute(
  "src",
  "https://farm4.staticflickr.com/3455/3372925208\_e1f2aae4e3\_b.jpg",
);
document.querySelector("h1").appendChild(myImage);
```

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

1.
```js
alert('hello!);
```

2.
```js
document.cheeseSelector("html").style.backgroundColor = "purple";
```

3.
```js
var myImage = document.createElement("img");
myBanana.setAttribute(
  "src",
  "https://farm4.staticflickr.com/3455/3372925208\_e1f2aae4e3\_b.jpg",
);
document.querySelector("h1").appendChild(myImage);
```

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

### Узнать больше

Узнать больше о JavaScript консоли в различных браузерах:

* Firefox Web Console
* IE JavaScript console
* Chrome JavaScript Console (Inpector в Opera схож с Inspector в Chrome)
* Safari Console


Как использовать GitHub Pages? - Изучение веб-разработки

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

GitHub — это сайт «социальной разработки». Он позволяет загружать репозитории кода для хранения **в системе управления версиями** Git. После загрузки вы можете сотрудничать с другими участниками для работы над общим проектом, а ещё это система с открытым исходным кодом по умолчанию: любой человек в мире может найти ваш код на GitHub, использовать его, учиться по нему и улучшать его. Вы тоже можете взаимодействовать с кодом других людей! В этой статье представлено базовое руководство по публикации контента с использованием функции gh-pages Github.

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

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

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

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

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

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

1. Направьте командную строку в вашу папку `test-site` (или папку с любым другим названием, содержащую ваш сайт). Для этого используйте команду `cd` (т.е. «**c**hange **d**irectory» — «поменяй директорию»). Вот что вы бы набрали, если бы разместили свой сайт в папке `test-site` на рабочем столе:

```bash
cd Desktop/test-site
```

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

```bash
git init
```

#### Дополнительно об интерфейсах командной строки

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

![](/ru/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages/command-line.png)

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

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

* **Windows**: **Командную строку** (**Command Prompt**) можно вызвать, нажав клавишу Windows, набрав *Command Prompt* и выбрав её из появившегося списка. Обратите внимание, что в Windows свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
* **OS X**: **Терминал** (**Terminal**) можно найти в *Applications > Utilities*.
* **Linux**: Обычно терминал можно вызвать с помощью *Ctrl + Alt + T*. Если это не сработает, найдите **Terminal** в панели приложений или меню.

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

### Создание репозитория для вашего кода

1. Затем вам нужно создать новый репозиторий для ваших файлов. Нажмите «Плюс» (+) в правом верхнем углу главной страницы GitHub и выберите «Новый репозиторий» (*New Repository*).
2. На этой странице в поле «Имя репозитория» (*Repository name*) введите имя для своего репозитория, например *my-repository*.
3. Также добавьте описание, чтобы уточнить, что будет содержать ваш репозиторий. Ваш экран должен выглядеть так:

 ![](/ru/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages/create-new-repo.png)
4. Нажмите «Создать репозиторий» (*Create repository*); откроется следующая страница:

 ![](/ru/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages/github-repo.png)
### Загрузка файлов на GitHub

1. На текущей странице вас интересует раздел *…or push an existing repository from the command line* («...или загрузите существующий репозиторий с помощью командной строки»). В этом разделе вы должны увидеть две строки кода. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:
```

git remote add origin https://github.com/chrisdavidmills/my-repository.git
```

2. Затем введите следующие две команды, нажимая Enter после каждой из них. Они готовят код для загрузки в GitHub и просят Git управлять этими файлами.

```bash
git add --all
git commit -m 'adding my files to my repository'
```

3. Наконец, загрузите код на GitHub, для чего вернитесь к текущей веб-странице GitHub и введите в терминал вторую из двух команд, которые мы увидели в секции *…or push an existing repository from the command line*:

```bash
git push -u origin main
```

4. Теперь вам нужно включить функционал GitHub Pages для своего репозитория. Чтобы сделать это, зайдите на страницу своего репозитория и выберите «Настройки» (*Settings*), затем выберите *Pages* на панели слева. В разделе *Source* выберите ветку main. Страница должна обновиться.
5. Перейдите в раздел GitHub Pages снова. Вы должны увидеть надпись «Ваш сайт готов к публикации на `https://xxxxxx`» («Your site is ready to be published at `https://xxxxxx`»).
6. Если вы кликните на ссылку, вам должна открыться страница с живой демонстрацией вашего примера, при условии, что домашняя страница называется `index.html` — по умолчанию ссылка ведет именно на неё. Если точка входа на ваш сайт называется как-то иначе, например `myPage.html`, то чтобы увидеть её, вам нужно открыть `https://xxxxxx/myPage.html`.
### Больше информации о GitHub

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

git add --all
git commit -m 'another commit'
git push
```

Вы можете написать более подходящее сообщение вместо *another commit*, чтобы уточнить, что именно вы только что изменили.

Мы едва коснулись Git. Чтобы узнать больше, начните с нашей статьи Git и GitHub.


Насколько дорого обойдётся сделать что-то с помощью Web? - Изучение веб-разработки

Насколько дорого обойдётся сделать что-то с помощью Web?
========================================================

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

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

Резюме
------

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

Программное обеспечение
-----------------------

### Текстовые редакторы

Вероятно, у вас уже есть текстовый редактор: например, блокнот на Windows, Gedit на Linux, TextEdit на Mac. Но вам будет легче писать код, если вы выберете редактор, который имеет подсветку синтаксиса и поможет вам наладить структуру кода.

Многие редакторы бесплатны, например, Atom, Brackets, Bluefish, TextWrangler, Eclipse, Netbeans, и Visual Studio Code. Некоторые, такие как Sublime Text, вы можете использовать в пробном режиме сколько угодно, но при этом, будете получать рекомендации о возможности приобретения. Некоторые, такие как PhpStorm, могут стоить от нескольких десятков до 200 долларов, в зависимости от выбранного плана. Наконец, есть те из них, такие как Microsoft Visual Studio, которые могут стоить сотни или даже тысячи долларов; хотя Visual Studio Community бесплатна для индивидуальных разработчиков или проектов с открытым исходным кодом. Часто, у платных редакторов есть также пробные версии.

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

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

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

Ваша система, вероятно, включает в себя простой редактор изображений или просмотрщик: Paint на Windows, Eye of Gnome на Ubuntu, Preview на Mac. Эти программы относительно ограничены, и вскоре вы захотите более развитый редактор, чтобы иметь возможность добавлять слои, накладывать эффекты и группировать объекты.

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

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

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

Если вы хотите встроить видео или аудио в ваш веб-сайт, то вы можете встроить онлайн сервисы (например, YouTube, Vimeo, или Dailymotion), или встроить ваши собственные видео (см. ниже расходы на пропускную способность).

Для аудиофайлов, вы можете найти бесплатное программное обеспечение (Audacity, Wavosaur), либо заплатить пару сотен долларов (Sony Sound Forge, Adobe Audition). Подобным образом, видеоредакторы могут быть бесплатными (PiTiVi, OpenShot для Linux, iMovie для Mac), менее чем $100 (Adobe Premiere Elements), либо иметь стоимость в пару сотен долларов (Adobe Premiere Pro, Avid Media Composer, Final Cut Pro). Программное обеспечение, поставляемое с вашей цифровой камерой может, также, удовлетворить все ваши нужды.

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

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

Каждая операционная система включает (S)FTP клиент, как часть своего файлового менеджера. Проводник Windows, Nautilus (распространённый файловый менеджер Linux), и Mac Finder - все имеют такую функциональность. Однако, люди часто выбирают удалённые (S)FTP клиенты, для одновременного отображения локальных и удалённых каталогов и хранения паролей сервера.

Если вы хотите установить (S)FTP клиент, то существует несколько, заслуживающих доверия, бесплатных вариантов: FileZilla, WinSCP для Windows, Cyberduck для Mac/Windows, и другие.

Из-за того, что FTP по своей природе небезопасен, вам следует использовать SFTP — безопасную, зашифрованную версию FTP, которую большинство хостинговых сайтов будут предлагать вам по умолчанию — или другое безопасное решение, такое как Rsync, работающее через SSH.

Браузеры
--------

У вас уже есть браузер либо вы можете загрузить его бесплатно. Если необходимо, загрузите Firefox отсюда или Google Chrome отсюда.

Веб-доступ
----------

### Компьютер / модем

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

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

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

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

Убедитесь что у вас достаточная скорость передачи данных:

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

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

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

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

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

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

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

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

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

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

Вы могли бы задать вопрос, почему мне следует платить за хостинг, когда существует так много бесплатных сервисов?

* У вас есть больше свободы, когда вы платите. Ваш веб-сайт только в ваших руках, и вы можете легко перейти от одного хостинг-провайдера к другому.
* Бесплатные хостинги могут добавлять рекламные объявления к вашему контенту, в обход вашего контроля.

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

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

Профессиональные веб-сайты агентств и хостингов
-----------------------------------------------

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

Здесь перечислены расходы, зависящие сразу от нескольких факторов:

* Это простой веб-сайт с парой страничек текста? Или более сложный, с около тысячей страниц?
* Будете ли вы его обновлять регулярно? или это будет статический веб-сайт?
* Должен ли веб-сайт подсоединяться к IT структуре вашей компании, чтобы собирать контент (например, внутренние данные)?
* Хотите ли вы какую-нибудь уникальную функцию, которая сейчас в моде?
* Хотите ли вы, чтобы агентство решало сложные проблемы пользователей UX?

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

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

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

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

На данный момент у вас есть понимание того, во сколько вам может обойтись ваш сайт, так что настало время проектирования веб-сайта и настройки вашего рабочего пространства. (en-US)

* Прочитайте о том, как выбрать и установить текстовый редактор (en-US).
* Если вы больше сфокусированы на проектировании, взгляните на анатомию веб-страницы.


Что такое веб-сервер - Изучение веб-разработки

Что такое веб-сервер
====================

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

| Необходимые знания: | Вы должны уже знать, как работает Интернет и понимать разницу между страницей, сайтом, сервером и поисковой системой. |
| --- | --- |
| Цель: | Вы узнаете, что такое веб-сервер и получите общее представление о том, как он работает. |

Введение
--------

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

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

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

![Basic representation of a client/server connection through HTTP](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server/web-server.svg)

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

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

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

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

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

*Активное изучение пока не доступно. Пожалуйста, рассмотрите возможность внести свой вклад.*

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

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

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

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

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

* всегда запущен и работает
* всегда подключён к Интернету
* имеет неизменный IP адрес (не все провайдеры предоставляют статический IP-адрес для домашнего подключения)
* обслуживается третьей, сторонней компанией

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

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

### Связь по HTTP

Во-вторых, веб-сервер обеспечивает поддержку HTTP (англ. ***H**yper**t**ext **T**ransfer **P**rotocol - гипертекстовый транспортный протокол*). Как следует из названия, HTTP указывает, как передавать гипертекст (т.е. связанные веб-документы) между двумя компьютерами.

Протокол представляет собой набор правил для связи между двумя компьютерами. HTTP является текстовым протоколом без сохранения состояния.

**Текстовый**

Все команды являются простым человекочитаемым текстом.

**Не сохраняет состояние**

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

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

* Исключительно *клиенты* могут производить HTTP-запросы, и только на *сервера*. Сервера способны только отвечать на HTTP-*запросы клиента*.
* При запросе файла по HTTP, клиент должен сформировать файловый URL.
* Веб-сервер *должен ответить* на каждый HTTP-запрос, по крайней мере сообщением об ошибке.

![The MDN 404 page as an example of such error page](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server/mdn-404.jpg)На веб-сервере HTTP-сервер отвечает за обработку входящих запросов и ответ на них.

1. При получении запроса, HTTP-сервер сначала проверяет, существует ли ресурс по данному URL.
2. Если это так, веб-сервер отправляет содержимое файла обратно в браузер. Если нет, сервер приложения генерирует необходимый ресурс.
3. Если ничто из этого не возможно, веб-сервер возвращает сообщение об ошибке в браузер, чаще всего "404 Not Found". (Это ошибка настолько распространена, что многие веб-дизайнеры тратят большое количество времени на разработку 404 страниц об ошибках.)
Статический и Динамический контент
----------------------------------

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

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

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

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

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

Теперь, когда вы познакомились с веб-серверами, вы можете:

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