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

Как работает Интернет
=====================

Эта статья о том, что такое Интернет, и как он работает.

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

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

**Интернет** является основой сети (the Web), технической инфраструктурой, благодаря которой и существует Всемирная Паутина. По своей сути, интернет - очень большая сеть компьютеров, которые могут взаимодействовать друг с другом.

История интернета не до конца ясна. Проект по созданию интернета был начат в 60-х годах как исследовательский проект при поддержке министерства обороны США. Затем, в 80-х эволюционировал в сеть, которую поддерживали и развивали множество университетов и частных компаний. Технологии, лежащие в основе интернета, продолжали развиваться со временем, но основной принцип работы не сильно изменился: Интернет - это способ подключить компьютеры в единую сеть и убедиться, что даже при серьёзных сбоях, они всё равно найдут способ связаться друг с другом.

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

* Как работает интернет за 5 минут (en.): 5-минутный видеоролик поможет вам понять базовые принципы работы интернета (автор Aaron Titus).
* Как работает интернет? (en.) Подробное, хорошо визуализированное 9-минутное видео.
Погружаемся глубже
------------------

### Простая сеть

Когда нужно связать между собой два компьютера, вы должны связать их в сеть либо проводным (обычно с помощью Ethernet кабеля), либо беспроводным способом (например, с помощью WiFi или Bluetooth). Современные компьютеры поддерживают любой из этих способов связи.

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

![Два компьютера соединены вместе](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-1.png)

Таким способом вы можете подключить более двух компьютеров, но с каждым новым это становится все сложнее. Если хочется подключить, скажем, 10 компьютеров, вам понадобится 45 кабелей и 9 сетевых плат в каждом компьютере!

![Десять компьютеров вместе](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-2.png)

Чтобы решить эту проблему, каждый компьютер в сети подключается к специальному маленькому компьютеру. Этот компьютер называют *маршрутизатором*. Маршрутизатор исполняет только одну роль: как сигнальщик на железной дороге он следит за тем, чтобы пакет, отправленный одним компьютером — источником — достиг пункта назначения. Чтобы отправить сообщение компьютеру B, компьютер A сначала должен отправить его маршрутизатору, который перенаправит его компьютеру B и проконтролирует, чтобы данные не попали компьютеру C.

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

![Десять компьютеров с маршрутизатором](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-3.png)

### Сеть сетей

Пока все нормально. Но что нам делать, если нужно объединить в сеть сотни, тысячи или миллиарды компьютеров? Конечно, один маршрутизатор не справится с этой задачей, но если вы внимательно читали, то помните, что маршрутизатор — это обычный компьютер, и ничто не мешает нам соединить друг с другом 2 маршрутизатора. Давайте сделаем это.

![Два маршрутизатора соединены вместе](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-4.png)

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

![Маршрутизаторы, связанные с маршрутизаторами](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-5.png)

Такая сеть уже очень похожа на то, что мы называем интернетом, но мы что-то упустили. Наша сеть построена для решения только наших задач. Но кроме неё есть и другие сети: наши друзья, соседи — кто угодно может создать свою сеть. Как же нам их объединить? Мы не можем протянуть кабели между нашим домом и всеми остальными сетями в мире. Чтобы решить эту проблему, мы можем воспользоваться уже существующими кабельными сетями. Ведь у нас дома уже есть кабели, например, электрические или телефонные. Телефонный провод уже соединяет ваш дом со всем остальным миром, так что он идеально подходит для решения нашей задачи. Чтобы подключить нашу сеть к глобальной сети с помощью телефонного провода, нам понадобится специальное оборудование, которое называется *модем*. Модем перекодирует информацию, поступающую из нашей сети в формат, который можно передавать через телефонную сеть, и наоборот, декодируют информацию из телефонной сети в формат, который распознают наши компьютеры.

![Маршрутизатор, подключенный к модему](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-6.png)

Итак, мы подключились к телефонной сети. Следующий шаг — передать сообщение из нашей сети в сеть, с которой мы хотим связаться. Чтобы сделать это, мы должны подключить нашу сеть к провайдеру услуг интернета (Internet Service Provider (ISP)). Провайдер — компания, которая обслуживает специальные маршрутизаторы, которые не только подключены друг к другу (объединяют в единую сеть всех клиентов провайдера), но также связаны с маршрутизаторами других провайдеров. Таким образом, наше сообщение, пройдя транзитом через сеть нескольких провайдеров, достигнет сеть назначения. Интернет — это сеть сетей, которая объединяет в себе всю вышеперечисленную инфраструктуру.

![Полный интернет-стек](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-7.png)

### Поиск компьютера

Чтобы послать сообщение какому-то компьютеру, необходимо как-то обратиться к нему, выделить среди других. Поэтому каждый компьютер, подключённый к сети, имеет свой уникальный адрес для связи: этот адрес называют IP-адресом (IP — сокращение для *Internet Protocol*, протокол интернета). В зависимости от версии протокола IP этот адрес может записываться по-разному. Самая широко используемая версия интернет-протокола — версия 4. Адреса IPv4 обычно записываются в виде четырёх чисел, разделённых точками, например: 192.168.2.10.

Такие адреса отлично подходят для компьютеров, но людям очень сложно их запоминать. Чтобы упростить себе жизнь, мы можем присвоить каждому IP-адресу псевдоним с понятным для человека именем. Такой псевдоним называют доменным именем. Например, google.com — доменное имя, которое является псевдонимом IP-адреса 173.194.121.32. Использование доменного имени — самый простой способ обратиться к компьютеру в интернете.

![Демонстрация, как доменное имя может быть псевдонимом IP-адреса](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/dns-ip.png)

### Интернет и веб

Как вы уже заметили, когда мы просматриваем Веб с помощью браузера, обычно мы используем доменное имя, чтобы обратиться к веб-сайту. Означает ли это, что Интернет и Веб — это одно и то же? Ответ не так прост. Мы уже знаем, что Интернет — это техническая основа, которая позволяет миллиардам компьютеров связываться друг с другом. Среди этих компьютеров есть небольшая группа (называемая веб-серверами), которые могут отправлять сообщения, распознаваемые браузерами. *Интернет* — это инфраструктура, а *Веб* — это сервис, построенный на основе этой инфраструктуры. Стоит отметить, что кроме Веба есть и другие сервисы, построенные на базе Интернета. Например, электронная почта или IRC (en-US).

### Интранет и Экстранет

Интранет — это *частная* сеть, доступ к которой разрешён только членам определённой организации. Такая сеть обычно используется для предоставления участникам портала для безопасного доступа к общим ресурсам, совместной работы и общения. Например, во внутренней сети организации могут размещаться веб-страницы для обмена информацией об отделе или команде, общие диски для управления ключевыми документами и файлами, порталы для выполнения задач делового администрирования и инструменты для совместной работы, такие как базы знаний, доски обсуждений и системы обмена сообщениями.

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

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

![Графическое представление того, как работают Интранет и Экстранет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-8.png)

Дальнейшие шаги
---------------

* Как работает Веб
* Понимание разницы между веб-страницей, веб-сайтом, веб-сервером и поисковиком
* Что такое доменные имена


Веб-страницы, веб-сайты, веб серверы и поисковики - Изучение веб-разработки

Веб-страницы, веб-сайты, веб серверы и поисковики
=================================================

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

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

В двух словах
-------------

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

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

Веб-страница

Документ, который может быть отображён веб-браузерами, такими как: Firefox, Google Chrome, Microsoft Internet Explorer / Edge или Safari от Apple. Само понятие "веб-страница" для краткости будем называть просто "страница".

Веб-сайт

Коллекция веб-страниц, связанных между собой какими-либо способами. Употребление в лексике: "веб-сайт" или просто "сайт".

Веб-сервер

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

Поисковая система

Веб-сайт, помогающий в поиске других веб-страниц, например такие как: Google, Bing или Yahoo.

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

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

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

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

### Веб-страница

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

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

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

Все веб-страницы в сети имеют свой уникальный адрес. Чтобы получить доступ к нужной странице просто наберите её адрес в адресной строке вашего браузера:

![Example of a web page address in the browser address bar](/ru/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines/web-page.jpg)

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

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

![Example of a web site domain name in the browser address bar](/ru/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines/web-site.jpg)

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

### Веб-сервер

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

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

### Поисковая система

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

Наиболее популярные поисковые системы: Google, Bing, Yandex, DuckDuckGo, и многие другие. Некоторые из них универсальны, а какие-то ориентированы на определённую область. Используйте тот поисковик, который удобен вам.

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

Ниже пример того, как браузер Firerox по умолчанию отображает окно поиска Google на стартовой (домашней) странице:

![Example of Firefox nightly displaying a custom Google page as default](/ru/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines/search-engine.jpg)

Смотрите также
--------------

* Погружаемся глубже: что такое Веб-сервер (en-US)
* Рассмотрим, как веб-страницы связаны с веб-сайтом: Разбираемся с веб-ссылками


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

Что такое URL-адрес?
====================

Данная статья описывает Единый локатор ресурсов или Uniform Resource Locators (URLs), объясняет, что это такое, и описывает его структуру.

| Предварительно: | Вам нужно узнать как работает интернет, что такое Веб сервер (en-US) and что лежит в основе веб ссылок. |
| --- | --- |
| Цель: | Вы узнаете, что такое URL и как они работают в вебе. |

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

Наряду с понятиями гипертекста и протокола HTTP, понятие URL является одной из основных концепций Всемирной паутины. Это механизм, используемый браузерами для получения любого опубликованного во Всемирной сети ресурса.

**URL** обозначает *Uniform Resource Locator*. URL это лишь адрес, который выдан уникальному ресурсу в интернете. В теории, каждый корректный URL ведёт на уникальный ресурс. Такими ресурсами могут быть HTML-страница, CSS-файл, изображение и т.д. На практике, существуют некоторые исключения, когда, например, URL ведёт на ресурс, который больше не существует или который был перемещён. Поскольку ресурс, доступный по URL, а также сам URL обрабатываются веб-сервером, его владелец должен внимательно следить за размещаемыми ресурсами и связанными с ними URL.

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

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

Подробная информация
--------------------

### Основы: анатомия URL

Вот несколько примеров URL:
```

https://developer.mozilla.org
https://developer.mozilla.org/ru/docs/Learn/
https://developer.mozilla.org/ru/search?q=URL
```

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

URL состоит из различных частей, некоторые из которых являются обязательными, а некоторые - факультативными. Рассмотрим наиболее важные части на примере:
```

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
```

![Protocol](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-protocol@x2.png)

`http://` это протокол. Он отображает, какой протокол браузер должен использовать. Обычно это HTTP-протокол или его безопасная версия - HTTPS. Интернет требует эти 2 протокола, но браузеры часто могут использовать и другие протоколы, например `mailto:` (чтобы открыть почтовый клиент) или `ftp:` для запуска передачи файлов, так что не стоит удивляться, если вы вдруг увидите другие протоколы.

![Domaine Name](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-domain@x2.png)

`www.example.com` это доменное имя. Оно означает, какой веб-сервер должен быть запрошен. В качестве альтернативы может быть использован и IP-адрес, но это делается редко, поскольку запоминать IP сложнее, и это не популярно в интернете.

![Port](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-port@x2.png)

`:80` это порт. Он отображает технический параметр, используемый для доступа к ресурсам на веб-сервере. Обычно подразумевается, что веб-сервер использует стандартные порты HTTP-протокола (80 для HTTP и 443 для HTTPS) для доступа к своим ресурсам. В любом случае, порт - это факультативная составная часть URL.

![Path to the file](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-path@x2.png)

`/path/to/myfile.html` это адрес ресурса на веб-сервере. В прошлом, адрес отображал местоположение реального файла в реальной директории на веб-сервере. В наши дни это чаще всего абстракция, позволяющая обрабатывать адреса и отображать тот или иной контент из баз данных.

![Parameters](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-parameters@x2.png)

`?key1=value1&key2=value2` это дополнительные параметры, которые браузер сообщает веб-серверу. Эти параметры - список пар ключ/значение, которые разделены символом `&`. Веб-сервер может использовать эти параметры для исполнения дополнительных команд перед тем как отдать ресурс. Каждый веб-сервер имеет свои собственные правила обработки этих параметров и узнать их можно, только спросив владельца сервера.

![Anchor](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL/mdn-url-anchor@x2.png)

`#SomewhereInTheDocument` это якорь на другую часть того же самого ресурса. Якорь представляет собой вид "закладки" внутри ресурса, которая переадресовывает браузер на "заложенную" часть ресурса. В HTML-документе, например, браузер может переместиться в точку, где установлен якорь; в видео- или аудио-документе браузер может перейти к времени, на которое ссылается якорь. Важно отметить, что часть URL после #, которая также известна как идентификатор фрагмента, никогда не посылается на сервер вместе с запросом.

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

Вам стоит представлять URL как обычный почтовый адрес: *протокол* обозначает почтовый транспорт, который вы собираетесь использовать,*доменное имя* - это город, *порт* - это почтовый индекс; *адрес* - это номер дома;*параметры* представляют собой дополнительную информацию, как, например, номер квартиры; и, наконец, *якорь* представляет собой конкретного получателя, которому вы адресуете своё письмо.

### Как использовать URL

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

Язык HTML — который будет обсуждать позже (en-US) — позволяет активно использовать URL для:

* создания ссылок на другие документы с помощью тега `<a>`;
* связывания документа с его дополнительными файлами, например с помощью тегов `<link>` или `<script>`;
* отображения медиа-элементов, например изображений (с помощью тега `<img>`), видео (с помощью тега `<video>`), звуков и музыки (с помощью тега `<audio>`) и так далее;
* отображения других HTML-документов внутри текущего с помощью тега `<iframe>` (en-US).

**Примечание:** При указании URL-адресов для загрузки ресурсов как части страницы (например, при использовании `<script>`, `<audio>`, `<img>`, `<video>`, и т.д.), следует использовать только URL-адреса HTTP и HTTPS. Использование FTP, например, не особенно безопасно и больше не поддерживается многими браузерами.

Другие технологии, такие как CSS или JavaScript, также активно используют URL, так что это реально основа веба.

### Абсолютные и относительные URL

Все, что мы изучали выше - это *абсолютные URL*. Но так же существуют и *относительные URL*. Изучим их.

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

Когда URL используется в документе, например в HTML-странице, ситуация отличается. Потому что браузер уже знает URL текущего документа и он может использовать эти сведения для дополнения недостающих частей любого адреса, указанного в документе. Простейший пример *относительного* URL - указание только *адресной части* URL. А если адрес в URL начинается с символа `"/`", браузер запросит ресурс от корня сервера, без отсылки к контексту текущего документа.

Разберём это на примерах.

#### Примеры абсолютных URL

Полный URL (такой же, как обсуждали в начале статьи)
```

https://developer.mozilla.org/ru/docs/Learn
```

Скрыт протокол
```

//developer.mozilla.org/ru/docs/Learn
```

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

Скрыт домен
```

/ru/docs/Learn
```

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

#### Примеры относительных URL

Для лучшего понимания следующих примеров, давайте договоримся, что мы обращаемся к URL из документа, который опубликован по адресу: `https://developer.mozilla.org/ru/docs/Learn`

Дочерние ресурсы
```

Skills/Infrastructure/Understanding_URLs
```

Поскольку URL не начинается с `/`, браузер сделает попытку найти документ в поддиректории относительно текущего документа. В данном примере будет запрошен этот URL: `https://developer.mozilla.org/ru/docs/Learn/Skills/Infrastructure/Understanding_URLs`

Назад по дереву папок
```

../CSS/display
```

В этом случае, мы используем команду `../` — унаследованную из файловой системы UNIX — чтобы сказать браузеру, что он должен подняться на 1 директорию вверх. Соответственно, здесь мы хотим открыть URL: `https://developer.mozilla.org/ru/docs/Learn/../CSS/display`, который может быть упрощён до вида: `https://developer.mozilla.org/ru/docs/CSS/display`

### Семантические URL

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

Семантика, разумеется, плохо распознаётся компьютерами. Вы наверняка видели URL, которые выглядят как куча случайных символов. Но у семантических URL есть много преимуществ:

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

* Понимание доменных имён


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

Что такое доменные имена
========================

В этом материале мы обсудим доменные имена: что это такое, как они формируются и как зарегистрировать домен для себя.

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

Summary
-------

Доменные имена - ключевая составляющая инфраструктуры Интернета. Они предоставляют человеко-читаемые адреса веб-серверов, доступных в Интернете.

Каждый компьютер подключён к Интернету и может быть доступен через публичный IP-адрес, который состоит из 32 бит для IPv4 адреса (такие адреса обычно записываются в виде четырёх чисел от 0 до 255, разделённых точками (напр.., `173.194.121.32`) или 128 bit для IPv6 адреса (они обычно записываются в виде 8 групп по 4 шестнадцатеричных чисел, разделённых двоеточиями (напр., `2027:0da8:8b73:0000:0000:8a2e:0370:1337`). Компьютеры могут легко обрабатывать эти адреса , но у живых людей уходит слишком много времени на использование таких адресов. IP-адреса также сложно запоминаются и часто меняются со временем. Для решения этой проблемы в Интернете используются человеко-читаемые адреса, называемые доменными именами.

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

*В данный момент нет обучающего курса . Но вы можете помочь составить его.*

Глубокое погружение
-------------------

### Структура доменных имён

Доменное имя имеет простую структуру, состоящую из нескольких частей (частей может быть бесконечное количество, но на практике число уровней обычно невелико), разделённых точками и **читаемых справа налево**:

![Anatomy of the MDN domain name](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name/structure.png)

Каждая из этих частей предоставляет специфическую информацию о доменном имени.

TLD (en-US) (Корневой домен).

Корневой домен сообщает наиболее общую информацию. Корневой домен говорит пользователям наиболее общую информацию о службе, доступной по доменному имени. Наиболее общие корневые домены (.com, .org, .net) не требуют от веб-службы соответствия строгим критериям, но некоторые корневые домены имеют и более строгие политики. Например, локальные корневые домены, такие как .us, .fr, или .sh, могут требовать, чтобы услуги по данному адресу предоставлялись на национальном языке или физически размещались на территории страны.

Домены

Домены - это то, что следует за корневыми доменами. Домен может представлять собой что угодно, от одного знака до целого предложения. Домен сразу за корневым доменом также называют *"доменом второго уровня"*. Доменное имя может включать неограниченное количество доменов, нет никакого ограничения только на 3 домена в составе доменного имени. Например, www.inf.ed.ac.uk - это корректное доменное имя. Тот, кто контролирует "верхнюю" часть доменного имени (например, mozilla.org), тот может создавать доменные имена более "низких" уровней (часто называемые, "поддоменами") (например, developer.mozilla.org).

### Покупка доменного имени

#### Кто владеет доменным именем?

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

Компании, называемые регистраторами, ведут реестры доменных имён, которые содержат техническую и административную информацию, связывающую вас и ваш домен.

>
> \*\*Примечание:\*\*Для некоторых доменных имён регистратор может отсутствовать, реестр может не вестись. Например, все домены в зоне .fire используются компанией Amazon только в собственных нуждах.
>
>
>

#### Как найти свободное доменное имя

Для того, чтобы определить, свободно или нет желаемое доменное имя, сделайте следующее,

* Перейдите на веб-сайта регистратора доменных имён. Большинство из них предоставляют сервис "whois", который подскажет вам, свободно ли желаемое доменное имя.
* Также мы можете использовать командную строку, введя в ней команду whois и получив ответ, например, для `mozilla.org`:
```

$ whois mozilla.org
Domain Name:MOZILLA.ORG
Domain ID: D1409563-LROR
Creation Date: 1998-01-24T05:00:00Z
Updated Date: 2013-12-08T01:16:57Z
Registry Expiry Date: 2015-01-23T05:00:00Z
Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
Sponsoring Registrar IANA ID: 292
WHOIS Server:
Referral URL:
Domain Status: clientDeleteProhibited
Domain Status: clientTransferProhibited
Domain Status: clientUpdateProhibited
Registrant ID:mmr-33684
Registrant Name:DNS Admin
Registrant Organization:Mozilla Foundation
Registrant Street: 650 Castro St Ste 300
Registrant City:Mountain View
Registrant State/Province:CA
Registrant Postal Code:94041
Registrant Country:US
Registrant Phone:+1.6509030800
```

Как вы видите, нельзя зарегистрировать доменное имя `mozilla.org` потому что Mozilla Foundation уже зарегистрировало его.

Теперь давайте посмотрим, можно ли зарегистрировать доменное имя `afunkydomainname.org`:
```

$ whois afunkydomainname.org
NOT FOUND
```

Как вы видите, домен не существует в базе данных whois (на момент написания этой статьи), соответственно, его можно зарегистрировать.

#### Как получить доменное имя

Процедура довольно проста:

1. Перейдите на веб-сайт регистратора доменных имён.
2. Обычно там есть кнопка "Зарегистрировать домен" или что-то подобное. Нажмите её.
3. Заполните форму требуемыми данными. Убедитесь, что вы не опечатались в названии доменного имени. Потому что, если вы оплатите его, то будет уже поздно исправлять ошибку!
4. Регистратор сообщит вам, когда доменное имя будет корректно зарегистрировано. Через несколько часов все DNS-сервера обновятся и ваш домен начнёт работать.

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

#### Обновление DNS

Базы данных DNS хранятся на каждом DNS-сервере по всему миру и эти серверы обращаются за обновлениями к нескольким серверам, называемым "authoritative name server" или "корневой DNS-сервер". Когда ваш регистратор создаёт или обновляет информацию о зарегистрированном домене, она должна обновиться во всех DNS-базах. Каждый DNS-сервер хранит информацию о домене фиксированное количество времени, а затем автоматически обновляет её (DNS-сервер запрашивает корневой сервер снова). Соответственно, обновление баз занимает какое-то время, пока информация о новых или изменённых доменах распространяется по Интернету.

**Примечание:** Это время часто называется **время распространения**. Тем не менее эта задержка не означает, что за это время доменное имя обновит само себя на всех серверах сверху донизу. Очень часто DNS-сервер, запрашиваемый вашим компьютером не знает конкретного домена и запрашивает о нём корневые DNS-сервера по мере требования.

### Как работает DNS-запрос?

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

1. Напечатайте `mozilla.org` в адресной строке вашего браузера.
2. Ваш браузер спросит ваш компьютер, знает ли он уже, какому IP-адресу соответствует этот домен (используя локальный DNS-кеш). Если имя есть в кеше, оно транслируется в IP-адрес и браузер направляется к необходимому серверу. И всё.
3. Если же ваш компьютер не знает, какой IP-адрес соответствует доменному имени `mozilla.org`, он запрашивает DNS-сервер, чья задача - сообщить вашему компьютеру какой IP-адрес соответствует запрошенному доменному имени.
4. Теперь ваш компьютер знает соответствие и может взаимодействовать с сервером.

![Explanation of the steps needed to obtain the result to a DNS request](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name/2014-10-dns-request2.png)

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

Итак, мы поговорили о процессах и архитектуре. Время двигаться дальше.

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


Разбираемся с веб ссылками - Изучение веб-разработки

Разбираемся с веб ссылками
==========================

В данной статье мы узнаем, что такое ссылки и почему они важны.

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

Коротко
-------

Гиперссылки, в народе ссылки, являются фундаментальной основой Веба. Чтобы объяснить, что такое ссылки, мы должны обратиться к основам Веб-архитектуры.

В 1989 году Тим Бернерс-Ли (Tim Berners-Lee), создатель Веба, говорил о трёх китах, на которых стоит Веб:

1. URL, система адресов, которая отслеживает веб-документы.
2. HTTP, транспортный протокол, помогающий найти документы по заданным URL
3. HTML, формат документа, позволяющий встраивать *гиперссылки*

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

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

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

![Example of a basic display and effect of a link in a web page](/ru/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks/link-1.png)

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

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

*В данном разделе нет контента. Please, consider contributing.*

Глубокое погружение
-------------------

Как мы определили, ссылка — это строка, которая связана с URL. Мы используем ссылки, чтобы с лёгкостью перепрыгивать с одного документа на другой. Здесь существуют некоторые нюансы, которые важно рассмотреть:

### Типы ссылок

Внутренняя ссылка

Ссылка между двумя веб-страницами, принадлежащими к одному веб-сайту. Без внутренних ссылок нет такого понятия как веб-сайт (конечно, если это не одностраничный сайт).

Внешняя ссылка

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

Входящие ссылки

Ссылка с чьей-либо веб-страницы на ваш сайт. Это внешняя ссылка наоборот. Имейте в виду, что вам не обязательно отвечать тем же кому-то, кто ссылается на ваш сайт.

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

Когда вы начинаете, вам не имеет смысла сильно волноваться о наличии внешних и входящих ссылок, но они важны, если вы хотите, чтобы поисковые системы находили ваш сайт. (См. более детальное объяснение ниже.)

### Якоря (Anchors)

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

![Example of a basic display and effect of an anchor in a web page](/ru/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks/link-2.png)

### Ссылки и поисковые системы

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

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

* Текст ссылки влияет на то, какой поисковый запрос выдаст URL.
* Чем больше существует входящих ссылок на сайт, тем выше он будет в результатах поиска.
* *Внешние ссылки* влияют на оценку и сайта источника, и сайта, на который они ссылаются, но в какой степени, — неизвестно.

SEO (поисковая оптимизация) - это комплекс мер для "поднятия" позиции сайтов в поисковой выдаче. Оптимизация использования ссылок на сайте является одной из ключевых в SEO.

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

Так что теперь, конечно, вы захотите создать несколько веб-страниц со ссылками!

* Чтобы получить более теоретическое обоснование, узнайте об URL-адресах и их структуре, поскольку каждая ссылка указывает на URL-адрес.
* Хотите что-нибудь более практичное? В статье Создание гиперссылок нашего модуля Введение в HTML подробно объясняется, как реализовывать ссылки.
* Приступите к изучению HTML. Научитесь создавать HTML-документы и связывать их между собой. (en-US)


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

Как начать разрабатывать свой сайт?
===================================

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

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

Определение идеи проекта
------------------------

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

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

* Что я хочу в конце-концов получить?
* Каким образом web-сайт поможет мне в достижении моих целей?
* Что и в каком порядке должно быть реализовано, чтобы достичь моих целей?

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

Активное Обучение
-----------------

*На данный момент этот раздел ещё не готов. Вы можете помочь сообществу разработчиков, вступив в Please, consider contributing.*

Более глубокое погружение
-------------------------

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

Технические навыки безусловно важны. Музыканты обязаны владеть своим инструментом. Но даже хороший музыкант никогда не создаст хорошую музыку не имея идеи. Следовательно, прежде чем переходить к вашей любимой IDE, вы должны отойти немного назад и детально представить, что же вы на самом деле хотите сделать.

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

**Примечание:** Имеется неисчислимое множество способов, как сформулировать идею проекта. К сожалению, мы не можем собрать здесь все сразу (и даже увесистой книги не хватит). То, что мы представляем в этой статье - это простой способ выполнить шаги, которые профессионалы называют Project Ideation, Project Planning и Project Management.

### Что же в конце концов я хочу получить?

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

Представьте себя музыкантом. Должно быть, вы хотите:

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

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

1. Найти нового друга (подругу).
2. Предоставить людям возможность прослушать ваше творчество.
3. Поговорить о музыке.
4. Наладить контакт с другими музыкантами.
5. Создать интернет-магазин.
6. Обучать своему творчеству с помощью видео-уроков.
7. Публиковать фото вашего кота.

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

Теперь, когда вы получили приоритетный список ваших целей, имеет смысл перейти к следующему вопросу.

### Как сайт поможет мне в достижении цели?

И так, у вас есть конкретная цель и вам кажется, что для её достижения нужен веб-сайт. Вы уверены?

Вернёмся к нашему примеру. У нас есть 5 задач, связанных с музыкой, одна из области личной жизни (поиск своей пары), и ни с чем не связанные фото кота. Есть ли смысл создавать сайт, который способен удовлетворить всем этим требованиям? Так ли это необходимо? В конце концов, десятки уже существующих web-сервисов способны помочь вам в достижении ваших целей.

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

Оставшиеся пять задач непосредственно связанны с музыкой. Конечно же, на данный момент уже достаточно сайтов, обладающих подобной функциональностью, но в текущем контексте имеет смысл создать сайт, посвящённый именно вам. Прежде всего, сайт - это лучший способ *чтобы собрать все*, что мы хотим опубликовать, в одном месте (для решения проблем под номерами 3, 5 и 6) и создать среду для взаимодействия между нами и публикой (для решения проблем 2 и 4). Если проще, то так как все эти задачи из одной области, содержание всего в одном месте (веб-сайте) поможет нам в достижении целей, а также поможет нашим поклонникам связаться с нами.

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

### Что и в какие сроки должно быть реализовано для достижения целей?

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

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

| Цель | План по достижению |
| --- | --- |
| Предоставить людям доступ к вашему творчеству | 1. Записать музыку
2. Опубликовать ваши аудиозаписи в сети (Можете ли вы использовать для
 этого существующие сервисы?)
3. Предоставить людям доступ к вашей музыке в некоторых частях вашего
 сайта
 |
| Обсудить вашу музыкальную деятельность | 1. Написать несколько статей для затравки обсуждений
2. Определить, как должны быть оформлены статьи
3. Опубликовать готовые тексты на вашем сайте (Как это делается?)
 |
| Познакомиться с коллегами по цеху | 1. Предоставить людям способ связаться с вами (Email? Соц. сеть? Номер
 телефона? Письмо?)
2. Определить, как люди могут узнать эти данные на вашем сайте
 |
| Создать интернет-магазин | 1. Приготовить их
2. Разместить в магазине
3. Найти способ доставки
4. Определиться с платёжной системой
5. Добавить способ делать заказы на вашем сайте
 |
| Обучать музыке в своих видео-уроках | 1. Записать видео-уроки
2. Разместить видео в онлайне (И снова: стоит ли использовать для этого
 уже готовые платформы?)
3. Предоставить людям доступ к видео на вашем сайте (проинформировать)
 |

**Два важных замечания.**

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

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

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

Как стало понятно, простая мысль "А не сделать ли мне сайт?" порождает очень много работы, и при каждом следующем обдумывании она только растёт. В скором она может стать очень большой, но это не повод для паники. Вы не обязаны отвечать на *все* вопросы, а также выполнять каждый пункт плана. Что действительно имеет значение, так это ваше видение результата и понимание целей. Однажды создав идею, вам нужно определиться, как и когда её реализовать. Разбивайте большие задачи на меньшие и более выполнимые. И каждая выполненная задача приблизит вас к грандиозному успеху.


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

Как создать дизайн, подходящий для всех пользователей?
======================================================

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

| Перед началом: | Сначала вам следует прочитать What is accessibility?, поскольку мы не рассматриваем здесь **доступность** подробно. |
| --- | --- |
| Цель: | Универсальный дизайн означает дизайн для всех, независимо от инвалидности или технических ограничений. В этой статье перечислены наиболее важные характеристики для универсального дизайна. |

Краткое описание
----------------

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

Более глубокое изучение
-----------------------

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

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

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

Давайте загрузим и установим анализатор цветового контраста Paciello Group.

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

Например, давайте протестируем цвета на этой странице и посмотрим, как мы справляемся с анализатором цветового контраста:

![Colour contrast on this page: excellent!](/ru/docs/Learn/Common_questions/Design_and_accessibility/Design_for_all_types_of_users/colour-contrast.png)

Коэффициент контрастности яркости между текстом и фоном составляет 8,30:1, что превышает минимальный стандарт (4,5: 1) и должно позволить многим слабовидящим людям читать эту страницу.

### Размер шрифта

Вы можете указать размер шрифта на веб-сайте либо в относительных, либо в абсолютных единицах.

#### Абсолютные единицы

Абсолютные единицы измерения не рассчитываются пропорционально, а относятся к размеру, так сказать, набранному в камне, и выражаются большую часть времени в пикселях (`px`). Например, если в вашем CSS вы объявите это:
```

body { font-size:16px; }
```

... вы говорите браузеру, что бы ни случилось, размер шрифта должен быть 16 пикселей. Современные браузеры обходят это правило, делая вид, что вы просите "16 пикселей, когда пользователь устанавливает коэффициент масштабирования 100%".

Однако, на протяжении многих лет Internet Explorer категорически отображается 16 на 16 пикселей. В этом случае масштабирование ничего не дало, даже в последнем Internet Explorer 8, который нам все ещё приходится обслуживать, потому что он все ещё существует.

#### Относительные единицы

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

Относительные единицы обычно выражаются в `em`, `%` и `rem`:

Процентные размеры: `%`

Этот блок сообщает вашему браузеру, что размер шрифта элемента должен составлять N% от предыдущего элемента, размер шрифта которого был выражен. Если родитель не найден, то размер шрифта по умолчанию в браузере считается базовым размером для расчёта (обычно эквивалентным 16 пикселям).

Em размеры: `em`

Эта единица вычисляется так же, как и проценты, за исключением того, что вы вычисляете в частях 1, а не в частях 100. Говорят, что "em" - это ширина заглавной буквы "М" в алфавите (грубо говоря, буква "М" вписывается в квадрат).

Rem размеры: `rem`

Эта единица измерения пропорциональна размеру шрифта корневого элемента и выражается в виде частей, таких как em.

Предположим, что нам нужен базовый размер шрифта 16px и h1 (основной заголовок) в эквиваленте 32px, но если в пределах h1 мы найдём `промежуток` с классом `подзаголовков`, он тоже должен быть отрисован с размером шрифта по умолчанию (обычно 16px).

Вот HTML, который мы используем:
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Эксперимент с размером шрифта</title>
</head>
<body>

    <h1>Это наш главный заголовок
        <span class="subheading">Это подзаголовок</span>
    </h1>

</body>
</html>
```

CSS на основе процентов будет выглядеть следующим образом:
```

body { font-size:100%; } /* 100% от базового размера шрифта браузера, поэтому в большинстве случаев он будет отображаться как 16 пикселей*/
h1 { font-size:200%; } /* в два раза больше размера тела, таким образом, 32 пикселя */
span.subheading { font-size:50%; } /* половина размера h1, таким образом, 16 пикселей, чтобы вернуться к исходному размеру */
```

Та же проблема выражена и с ems:
```

body { font-size:1em; } /* 1em = 100% от базового размера браузера, так что в большинстве случаев это будет выглядеть как 16 пикселей */
h1 { font-size:2em; } /* в 2 раза больше размера тела, так что 32 пикселя */
span.subheading { font-size:0.5em; } /* половина размера h1, таким образом, 16 пикселей, чтобы вернуться к исходному размеру */
```

Как вы можете видеть, математика быстро становится сложной, когда вам нужно следить за родителем, родителем родителя, родителем родителя родителя и так далее. (Большинство проектов выполняется в пиксельном программном обеспечении, поэтому математику должен выполнять человек, кодирующий CSS).

Теперь о `rem`. Эта единица измерения относится к размеру корневого элемента, а не к какому-либо другому родительскому элементу. CSS можно переписать таким образом:
```

body { font-size:1em; } /* 1em = 100% от базового размера браузера, так что в большинстве случаев это будет выглядеть как 16 пикселей */
h1 { font-size:2rem; } /* в 2 раза больше размера тела, так что 32 пикселя */
span.subheading { font-size:1rem; } /* исходный размер */
```

Так ведь проще, правда? Это работает как в Internet Explorer 9, так и в любом другом поддерживаемом браузере, поэтому, пожалуйста, не стесняйтесь использовать этот способ.

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

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

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

Мы бы посоветовали следующее:

* Опишите шрифты в единицах rem, большинство браузеров будут очень довольны ими;
* Пусть старые браузеры отображают шрифты со своим собственным внутренним движком. Браузерные движки будут игнорировать любое свойство или значение в CSS, если они не могут справиться с ними, так что ваш сайт все ещё может быть непригодным для использования, если он не соответствует видению вашего дизайнера. Старые браузеры в любом случае находятся на пути к выходу из использования.

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

### Длина строки

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

Конечно, проблема не исчезает, когда мы переключаемся на интернет. Глаза читателя действуют как челнок, идущий от строки к строке. Чтобы сделать чтение проще для глаз людей, ограничьте ширину строки примерно 60 или 70 символами.

Для этого вы можете указать размер контейнера вашего текста. Давайте рассмотрим этот HTML:
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Эксперимент с размером шрифта</title>
</head>
<body>

<div class="container">
    <h1>Это наш главный заголовок
        <span class="subheading">Это наш подзаголовок</span>
    </h1>

    <p>[длинный текст, который занимает много строк]</p>
</div>

</body>
</html>
```

У нас есть `div` с классом `container`. Мы можем стилизовать `div` либо для установки его ширины (используя свойство `width`), либо для его максимальной ширины, чтобы он никогда не становился слишком большим (используя свойство `max-width`). Если вам нужен эластичный/адаптивный веб-сайт, и вы не знаете, какова ширина браузера по умолчанию, вы можете использовать свойство `max-width`, чтобы разрешить до 70 символов в строке и не более:
```

div.container { max-width:70em; }
```

### Альтернативный контент для изображений, аудио и видео

Веб-сайты часто включают в себя разные вещи, помимо обычного текста.

#### Изображения

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

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

Декоративные изображения

Они просто для украшения и не передают никакой полезной информации. Чаще всего их можно было бы заменить фоновым изображением. Убедитесь, что они имеют пустой атрибут `alt`: `<img src="deco.gif" alt="">`, чтобы они не засоряли текст.

Информационные изображения

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

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

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

#### Аудио/видео

Также вам стоит предоставлять альтернативы мультимедийному контенту.

Субтитры / закрытие субтитров

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

Расшифровка

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

### Сжатие изображения

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

* **Устанавливаемое программное обеспечение.** ImageOptim (Mac), OptiPNG (все платформы), PNGcrush (DOS, Unix/Linux)
* **Онлайн инструменты.** Yahoo's smushit!, Онлайн-оптимизатор изображений Dynamic drive (который может автоматически преобразовываться из одного формата в другой, если он более эффективен с пропускной способностью)


Производительность веб-приложений в бизнесе - Изучение веб-разработки

Производительность веб-приложений в бизнесе
===========================================

* Назад
* Обзор: Performance

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

| Необходимо: | Базовое понимание компьютерной терминологии, знание клиентской части веб-технологий, понимание базовых принципов оптимизации производительности. |
| --- | --- |
| Задача: | Стать уверенным при объяснении клиентам и менеджменту важности оптимизации производительности. |

Делайте производительность приоритетом
--------------------------------------

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

### Бюджеты производительности

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

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

### Ключевые показатели

Установка ключевых показателей (Key Performance Indicators, KPI) целями может привести к тому, что цели производительности также станут целями бизнеса. KPI может быть одновременно и набором важных бизнес-показателей, которые объясняют влияние производительности на цели бизнеса, так и способом демонстрации преимущества такого подхода. Вот несколько примеров KPI:

**Уровень конверсии**

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

**Время на сайте**

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

**Уровень лояльности клиентов**

Этот показатель также называется "The net promoter score (NPS)". Он позволяет понять, будет ли пользователь рекомендовать ваш сервис / бизнес своим знакомым.

Установка уровня конверсии, времени на сайте и/или уровня лояльности клиентов в виде KPI даёт другим департаментам наглядный пример того, зачем нужно тратить усилия на производительность.

* Назад
* Обзор: Performance
Смотрите также
--------------

* The "why" of web performance (en-US)
* What is web performance? (en-US)
* How do users perceive performance? (en-US)
* Measuring performance (en-US)
* Multimedia: images (en-US)
* Multimedia: video (en-US)
* JavaScript performance best practices (en-US).
* HTML performance features (en-US)
* CSS performance features (en-US)
* Fonts and performance
* Mobile performance
* Focusing on performance


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

Кросс-браузерное тестирование
=============================

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

Предпосылки
-----------

Сначала вы должны изучить основы HTML, CSS,JavaScript языков прежде чем пытаться использовать инструменты, описанные здесь.

Руководства
-----------

Введение в кросс-браузерное тестирование

Этот модуль начинается с обзора темы кросс-браузерного тестирования и отвечает на такие вопросы, как «что такое кросс-браузерное тестирование?», «с какими наиболее распространёнными типами проблем вы столкнётесь?» и «каковы основные подходы к тестированию, выявлению и устранению проблем?"

Стратегии проведения тестирования (en-US)

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

Рассмотрим общие проблемы HTML и CSS (en-US)

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

Рассмотрим общие проблемы JavaScript (en-US)

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

Рассмотрим общие проблемы доступности (en-US)

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

Внедрение свойства обнаружения

Свойство выявления включает в себя разработку того, поддерживает ли браузер определённый блок кода, и работает ли другой код, зависящий от того, делает он (или нет), чтобы браузер всегда мог обеспечить рабочую силу, а также сбои / ошибки в некоторых браузерах. В этой статье описывается, как написать собственную простую функцию выявления, как использовать библиотеку для ускорения реализации и встроенные функции для обнаружения функций, такие как `@supports`.

Введение в автоматизированное тестирование (en-US)

 Введение в автоматизированное тестирование
 Вручную запускать тесты на нескольких браузерах и устройствах, несколько раз в день, может стать утомительным и трудоёмким. Чтобы эффективно справляться с этим, вы должны ознакомиться с инструментами автоматизации. В этой статье мы рассмотрим, что доступно, как использовать задачи, а также основы использования коммерческих приложений для автоматизации тестирования браузера, таких как Sauce Labs и Browser Stack.

Настройка собственной среды автоматизации тестирования (en-US)

В этой статье мы научим вас, как установить свою собственную среду автоматизации и запустить собственные тесты с помощью Selenium / WebDriver и библиотеки тестирования, такой как selenium-webdriver для Node. Мы также рассмотрим, как интегрировать локальную тестовую среду с коммерческими приложениями, такими как те, которые обсуждались в предыдущей статье.


Понимание JavaScript-фреймворков для фронтенда - Изучение веб-разработки

Понимание JavaScript-фреймворков для фронтенда
==============================================

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

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

Этим набором статей мы постараемся дать вам удобную отправную точку, чтобы помочь вам начать изучать основы. Мы не стремимся научить вас всему, что вам нужно знать о React / ReactDOM, или Vue, или какой-то другой конкретной среде; Документация этих фреймворков отлично выполняют эту работу. Вместо этого мы хотим сделать шаг назад и сначала ответить на более фундаментальные вопросы, такие как:

* Почему я должен использовать фреймворк? Какие проблемы он решит?
* Какие вопросы я должен задать себе при выборе определённого фреймворка?
 Нужен ли мне какой-либо из них вовсе?
* Какими возможностями обладают фреймворки? Как они работают в целом и в чём отличия их имплементаций этих возможностей?
* Как они связаны с "ванильным" JavaScript, или HTML?

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

**Начните прямо сейчас с "Введение в фронтенд фреймворки" (en-US)**

Prerequisites
-------------

You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — HTML, CSS, and especially JavaScript.

Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.

Introductory guides
-------------------

1. Introduction to client-side frameworks (en-US)

We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.

2. Framework main features (en-US)

Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of "the big 4" frameworks, looking at how frameworks tend to work from a high level, and the differences between them.

React tutorials
---------------

**Примечание:** React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.

If you need to check your code against our version, you can find a finished version of the sample React app code in our todo-react repository. For a running live version, see https://mdn.github.io/todo-react-build/.

1. Getting started with React

In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.

2. Beginning our React todo list (en-US)

Let's say that we've been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic `App` component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.

3. Componentizing our React app (en-US)

At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn't have any hard rules for what is and isn't a component – that's up to you! In this article we will show you a sensible way to break our app up into components.

4. React interactivity: Events and state (en-US)

With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.

5. React interactivity: Editing, filtering, conditional rendering (en-US)

As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks, and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.

6. Accessibility in React (en-US)

In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screenreader users.

7. React resources (en-US)

Our final article provides you with a list of React resources that you can use to go further in your learning.

Ember tutorials
---------------

**Примечание:** Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.

If you need to check your code against our version, you can find a finished version of the sample Ember app code in the ember-todomvc-tutorial repository. For a running live version, see https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ (this also includes a few additional features not covered in the tutorial).

1. Getting started with Ember (en-US)

In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.

2. Ember app structure and componentization (en-US)

In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.

3. Ember interactivity: Events, classes and state (en-US)

At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.

4. Ember Interactivity: Footer functionality, conditional rendering (en-US)

Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.

5. Routing in Ember (en-US)

In this article we learn about routing, or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".

6. Ember resources and troubleshooting (en-US)

Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.

Vue tutorials
-------------

**Примечание:** Vue tutorials last tested in May 2020, with Vue 2.6.11.

If you need to check your code against our version, you can find a finished version of the sample Vue app code in our todo-vue repository. For a running live version, see https://mdn.github.io/todo-vue/dist/.

1. Getting started with Vue (en-US)

Now let's introduce Vue, the third of our frameworks. In this article we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.

2. Creating our first Vue component (en-US)

Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props, and saving data state.

3. Rendering a list of Vue components (en-US)

At this point we've got a fully working component; we're now ready to add multiple `ToDoItem` components to our App. In this artcle we'll look at adding a set of todo item data to our `App.vue` component, which we'll then loop through and display inside `ToDoItem` components using the `v-for` directive.

4. Adding a new todo form: Vue events, methods, and models (en-US)

We now have sample data in place, and a loop that takes each bit of data and renders it inside a `ToDoItem` in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text `<input>`, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.

5. Styling Vue components with CSS (en-US)

The time has finally come to make our app look a bit nicer. In this article we'll explore the different ways of styling Vue components with CSS.

6. Using Vue computed properties (en-US)

In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods, but only re-run when one of their dependencies changes.

7. Vue conditional rendering: editing existing todos (en-US)

Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely `v-if` and `v-else` — to allow us to toggle between the existing todo item view, and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.

8. Focus management with Vue refs (en-US)

We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.

9. Vue resources (en-US)

Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.

Which frameworks did we choose?
-------------------------------

We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:

* They are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skillset when looking for a job.
* They have strong communities and good documentation. It is very important to be able to get help with learning a complex subject, especially when you are just starting out.
* We don't have the resources to cover *all* modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.
* As a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. Keeping the list short is therefore helpful.

We want to say this up front — we've **not** chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.

Note that we were hoping to have more frameworks included upon intial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via Matrix, or Discourse, or drop us a mail on the mdn-admins list.


Git и GitHub - Изучение веб-разработки

Git и GitHub
============

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

Самая популярная СКВ (по крайней мере, среди веб-разработчиков) являются **Git**, а также **GitHub**- сайт, обеспечивающий размещение ваших репозиториев и включающий инструменты для работы с ними. Цели этого модуля - дать вам необходимые знания о каждой из упомянутых СКВ.

Обзор
-----

СКВ являются основой для разработки программного обеспечения:

* Редко, когда вы работаете с проектом полностью самостоятельно. Как только вы начинаете работать с другими людьми, возникает риск конфликта. Речь идёт о ситуации, когда несколько человек пытается в одно и то же время обновить одну и ту же часть кода. Нужен определённый механизм, позволяющий управлять событиями и тем самым избежать потери результатов общей работы.
* Работая с проектом в одиночку или с другими, вы захотите иметь возможность иметь резервную копию кода на случай поломки вашего компьютера.
* Также у вас может возникнуть необходимость откатить изменения к более ранним версиям, если проблема обнаружена позднее. Конечно, это начать делать самостоятельно, сохраняя различные версии одного и того же файла, например `myCode.js`, `myCode_v2.js`, `myCode_v3.js`, `myCode_final.js`, `myCode_really_really_final.js`, и так далее, но это на самом деле ненадёжный и порождающий ошибки способ.
* Различные члены команды могут захотеть создать собственные версии кода (в Git такие версии именуются **ветками**), работать над новой фичей в этой версии, а затем контролируемо объединить эту версию (в GitHub используются **пул реквизиты** - запросы на принятие изменений) с главной версией.

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

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

Подготовка
----------

Для использования Git и GitHub тебе необходимо:

* Компьютер с установленной версией Git (посмотри страницу загрузки Git).
* Приложения для работы с Git. В зависимости от того как ты предпочитаешь работать, можешь использовать Git-клиенты с графическим интерфейсом (мы рекомендуем GitHub Desktop, SourceTree или Git Kraken) или просто продолжай использовать окно терминала. Если честно, будет весьма полезно для тебя узнать основы использования git-команд в терминале, даже если ты собираешься работать через графический интерфейс.
* Аккаунт на GitHub. Если у тебя ещё его нет, зарегистрируйся сейчас по указанной ссылке.

Что касается предварительных знаний, вам не нужно разбираться в веб-разработке, Git / GitHub или VCS, чтобы приступить к этому модулю. Тем не менее, рекомендуется, чтобы вы разбирались в составлении кода, могли его писать и читать, а также сохранили пару строчек кода в своих репозиториях!

Также желательно, чтобы у вас были некоторые базовые знания о терминале, например, перемещение между каталогами, создание файлов и изменение системного `PATH`.

**Примечание:** Github не единственный сайт / инструментарий который ты можешь использовать с Git. Есть и альтернативы, такие как GitLab, которые ты можешь попробовать, а также ты можешь попробовать настроить свой собственный сервер Git и использовать вместо GitHub. Мы в этом курсе остановились на GitHub, чтобы показать один из рабочих способов.

Руководства
-----------

Все указанные ниже ссылки ведут на внешние ресурсы. Со временем у нас появится свой собственный курс по Git/GitHub. А сейчас они помогут вам подробнее разобраться в материале.

Hello World (from GitHub)

Это практическое руководство поможет вам сразу начать пользоваться GitHub. Оно содержит основы использования Git, такие как создание репозиториев, веток, создание коммитов, открытие и слияние пулл-реквестов.

Git Handbook (from GitHub)

Этот справочник по Git подробнее объясняет, что такое система контроля версий (VCS), что такое репозиторий, на чём основана модель работы GitHub, описывает команды Git, примеры их использования и многое другое.

Forking Projects (from GitHub)

Это руководство объясняет, как при помощи создания форка (fork) чужого проекта вы можете поучаствовать в его разработке.

About Pull Requests (from GitHub)

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

Mastering issues (from GitHub)

На вкладке с обсуждением проблем (issue) пользователи могут задавать вопросы и сообщать об ошибках, а вы можете курировать работу над обновлениями кода: назначать ответственных за исправление возникших проблем, отвечать на вопросы пользователей, сообщать об исправлении ошибок. Эта статья поможет вам разобраться со всем, что касается работы над проблемами.

**Примечание:** На самом деле вы можете делать при помощи Git и GitHub **намного больше** , но мы считаем, что эти руководства необходимый минимум для начала его эффективного использования. По мере погружения в Git и использования более сложных команд к вам придёт понимание, что очень легко сделать что-то неправильно. Не беспокойтесь, даже профессиональные разработчики иногда испытывают трудности с Git и ищут решения в Интернете. Например, на сайте Flight rules for Git или Dangit, git!

Материалы для изучения
----------------------

* Understanding the GitHub flow
* Git command list (справочник по командам git)
* Mastering markdown (правила оформления сообщений в пулл-реквестах (PR), комментариях, и `.md`-файлах).
* Getting Started with GitHub Pages (правила публикаций страниц и демо-сайтов на GitHub).
* Learn Git branching (интерактивный справочник по правилам ветвления в Git)
* Flight rules for Git (полезный справочник решений конкретных задач, возникающих при работе с Git, и ситуаций, когда что-то пошло не так).
* Dangit, git! (ещё один полезный справочник, сосредоточенный на решении проблем при работе Git).