Следующие термины являются одними из наиболее распространенных аббревиатур и жаргонных терминов, которыми ежедневно пользуются веб-разработчики. Я написал эту статью с целью объяснить эти сложные концепции веб-разработки простым способом.
HTML
Язык гипертекстовой разметки — это стандартизированный код, определяющий структуру веб-сайта. Это текстовая система, которая организует контент и определяет, как поток и макет контента будут представлены с помощью семантических элементов, таких как упорядоченные списки, ссылки, верхние и нижние колонтитулы. Элементы HTML обозначаются тегами, например ‹a›‹/a›. Теги также могут включать другие языки, такие как JavaScript, и ссылаться на скрипты CSS. Когда мы открываем файл HTML в браузере, код внутри файла интерпретируется как визуальная (или звуковая) веб-страница.
CSS
Каскадные таблицы стилей — это язык, используемый для описания того, как должен выглядеть HTML-документ. Он определяет представление содержимого с точки зрения макета, цветов и шрифтов.
Каскадирование относится к схеме приоритетов, которая определяет, какое правило стиля применяется, если несколько правил стиля нацелены на определенный элемент. Например, последнее прочитанное правило и более конкретная цель имеют приоритет над противоположным. Несколько правил объединяются для создания окончательного стиля элемента.
Таблица стилей относится к набору правил оформления элементов в документе.
CSS отделен от HTML, чтобы улучшить доступность, уменьшить количество повторений в HTML-документе и позволить веб-страницам совместно использовать форматирование.
JS
JavaScript – это объектно-ориентированный язык программирования, который делает сайт динамичным, интерактивным, реагирующим на действия пользователя (например, клики), а также управляет данными и содержимым веб-страницы.
JavaScript содержит стандартную библиотеку объектов, таких как Array, Date и Math, а также основной набор языковых элементов, таких как типы, операторы, управляющие структуры и операторы.
API
Интерфейс прикладного программирования — это интерфейс обмена сообщениями, который принимает наш запрос на доступ к информации и сообщает внешнему источнику данных, какие данные мы хотим получить, добавить, обновить или удалить, а затем возвращает нам ответ.
REST-API
Передача репрезентативного состояния – это тип API. Данные существуют по URL-адресу, который называется конечной точкой API, например http://api.yummly.com/v1. Мы можем взаимодействовать с данными, используя стандартные методы HTTP, такие как GET, POST, PUT и DELETE.
GET –запрос данных – получение сведений о существующем рецепте.
POST — создает новые данные — добавляет новый рецепт
PUT — обновляет данные — обновляет рецепт
DELETE — удалить данные — удалить рецепт из базы данных
Дополнительные параметры могут быть переданы вместе с нашим запросом после URL-адреса в строке запроса. Параметр называется параметром запроса и состоит из пары "ключ-значение".
http://api.yummly.com/v1/api/recipes?_app_id=ВАШ_ID&_app_key=ВАШ_APP_KEY&q=onion+суп
JSON
Обозначение объектов JavaScript – это объект JavaScript, отформатированный для API, который состоит из фигурных скобок и пар "ключ-значение". Объект JSON может включать все типы данных JS (например, строки, числа, логические значения, вложенные массивы и объекты).
Асинхронный JavaScript
Когда JavaScript выполняется, он делает запрос AJAX (асинхронный JavaScript и XML) для обмена информацией с сервером и не ждет ответа, пока продолжает обработку. Это асинхронно, потому что даже после выполнения нескольких запросов AJAX интерпретатор кода продолжает выполнение кода в течение времени ожидания возврата данных, а возвращаемые данные не прерывают представление страницы при обновлении.
Обещание — это переменная, в которой хранится запрос AJAX. Обещание — это не сами данные, а обещание, что данные в конечном итоге вернутся. Функция обработчика имеет дело с успешным или неудачным ответом.
ДОМ
Объектная модель документа – это соглашение для представления и взаимодействия с объектами в HTML-документах. Узлы (также известные как элементы) каждого документа организованы иерархически в виде древовидной структуры с ветвями или дочерними узлами. Корнем дерева является document.documentElement.
Домены
Устройства, из которых состоит Интернет, объединены в большие сети физической инфраструктуры, которые связываются друг с другом по подземным/подводным проводам и идентифицируются с помощью IP-адресов. Как и при отправке открытки по почте, когда мы передаем информацию через Интернет, нам необходимо иметь обратный адрес и почтовый адрес.
Адреса интернет-протокола (IP) — это уникальные строки идентификационных номеров, которые позволяют устройствам обмениваться данными. Чтобы упростить запоминание чисел, мы используем доменные имена.
Домен: shouldiuseacarousel.com
IP: 45.72.141.133
DNS
Система доменных имен используется для перевода доменных имен в номера IP-адресов.
URL-адрес
Унифицированный указатель ресурсов — этоболее конкретный адрес, чем доменное имя, предоставляющий такую информацию, как конкретная папка и файл на сервере.
Домен: youtube.com
БРАУЗЕР
Программное приложение для получения, представления и навигации по веб-сайтам, видео, фотографиям и интерактивному контенту в Интернете. Наиболее часто используемыми браузерами являются Chrome, Firefox, Internet Explorer и Safari.
Обеспечение кросс-браузерной совместимости сайта является большой проблемой для разработчиков, к счастью, такие инструменты, как React, Webpack, Post-CSS и Babel, облегчают эту задачу.
Шаги для отображения страницы в браузере:
- Браузер получает HTML с сервера и формирует объектную модель документа (DOM)
- Стили загружаются, анализируются и формируют объектную модель CSS (CSSM).
- Набор объектов, называемый деревом рендеринга, которые визуально представляют видимые узлы в структуре DOM, объединяющие DOM и CSSOM. Каждый из объектов рендеринга в дереве содержит соответствующий объект DOM с примененными стилями.
- Для каждого дерева рендеринга вычисляются координаты объекта для размещения всех элементов
- Объекты дерева отображаются в браузере с помощью процесса, называемого «рисованием».
- Браузер «перерисовывает» отдельные элементы, стили которых изменяют или перекомпоновывают элементы, когда изменения затрагивают содержимое документа, структуру или положение элемента.
Клиент
Клиент — это устройство, подключенное к Интернету, например компьютер, подключенный к Wi-Fi, или мобильный телефон, подключенный к данным, а также программное обеспечение для доступа в Интернет, доступное на этих устройствах, например браузер.
СЕРВЕРЫ/ХОСТИНГ
Хостинг относится к компьютерам, которые никогда не выключаются, так называемые серверы, на которых хранятся файлы, составляющие веб-сайт.
Поставщик услуг веб-хостинга предоставляет услуги, необходимые для просмотра веб-сайта, такие как дисковое пространство, учетные записи электронной почты, базы данных, FTP-доступ для загрузки и скачивания файлов, панель управления для управления хостингом и веб-сайтом, а также функции безопасности для обеспечения безопасности данных.
HTTP
Протокол передачи гипертекста
Протокол — это хорошо известный набор правил и стандартов, используемых для связи между машинами.
Клиенты и серверы общаются, обмениваясь сообщениями. Браузер инициирует связь, отправляя сообщения, называемые запросами, а сервер обрабатывает эти запросы и отвечает сообщениями, которые называются ответами. HTTP используется для получения гипертекстовых документов (также называемых ссылками), изображений, видео или публикации контента на серверах.
Серверы отвечают на запросы кодами состояния длиной 3 цифры. Коды, начинающиеся с:
1 — предоставляет информацию во время соединения
2 — успешное подключение
3 — перенаправление
4 — ошибка на стороне клиента: запрошенные ресурсы не существуют или пользователю отказано в доступе
5 — ошибка на стороне сервера: не удалось подключиться к базе данных или сервер не работает
Прокси
Посредники, которые передают HTTP-сообщения между браузером и сервером, что может повлиять на производительность и выполнять множество функций, таких как:
- кэширование
- фильтрация — т. е. сканирование на вирусы, родительский контроль
- балансировка нагрузки — позволяет нескольким серверам обслуживать разные запросы)
- аутентификация
- ведение журнала — т.е. хранение истории
ПЕЧЕНЬЕ
Небольшой фрагмент данных, отправляемый сервером и сохраняемый в веб-браузере пользователя, чтобы веб-браузеру не приходилось повторно запрашивать эти данные и замедлять время загрузки. Файлы cookie в основном используются для следующих целей:
- Управление сессиями: входы в систему (сохранение пользователя в системе), корзины покупок, результаты игр.
- Персонализация: пользовательские настройки и настройки
- Отслеживание: запись и анализ поведения пользователей.
Спасибо за прочтение!
Я надеюсь, что это помогло укрепить любые абстрактные понятия о процессе разработки и помочь вам объяснить эти термины младшим разработчикам, интервьюерам, дизайнерам, клиентам, вашим неграмотным в португальском языке родителям и т. д.
