Ключові поняття

TCP/IP - сукупність мережевих протоколів, що використовуються в інтернеті та інших мережах, включає в себе систему передачі даних, розподілення IP-адрес і т.п.
http:// - протокол передачі гіпертекстової інформації, https:// - з шифруванням даних.

DNS (Domain Name System) - система доменних імен, використовується в основному для отримання IP-адреси хоста (сервера або сервіса) по його імені, наприклад, http://somesite.com/ ==> 140.30.11.42.

URL (Uniform Resource Locator) - адреса ресурса. Іншими словами - адреса сайта чи певної сторінки на сайті, запит в базу даних і т.ін.

URI (Uniform Resource Identificator) - унікальний вказівник на ресурс.

Кожен URL є одночасно і URI. Та ідентифікатор не завжди є адресою ресурса:
ftp://cite.com/files/archive.zip ==> URL, URI;
http://download.org/?file=a3DxJ74mNT ==> URI, але не URL,
файл може лежать будь-де і його URL може бути таким: http://se06732m.filex.xyz/126aa/73/archive.zip.

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

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

Серверна частина сайту (backend) - комплекс програмного забезпечення, що забезпечує роботу веб-сайта. Типовий бекенд складається з веб-сервера, інтерпритатора чи компілятора серверної мови програмування і баз даних.

Веб-сервер - програма, що забезпечує обмін інформацією між сервером і клієнтом по протоколу http(s). Веб-сервер є обов’язковим омпонентом для роботи веб-сайту, він може віддавати клієнтам статичні веб-сторінки чи файли, наприклад, зображення, PDF, текстові, архіви, exe… Типові веб-сервери - Apache, ISS - Internet Informaton Services від Microsoft.

Інтерпритатор чи компілятор - програми для обробки серверних мов програмування. За допомогою них можна створювати динамічні веб-сторінки, інформація на яких змінюється в залежності від певних обставин.
Інтерпритатор - при кожному запиту користувача обробляє код сторінки і виконує його. Типові інтерпритатори: PHP, Ruby, Python
Компілятор - програма, що компілює код сторінки в машинний код при створенні сторінки і при кожному запиті користувача виконує створену програму. Типовим прикладом є cgi-програми, написані на будь-якій мові (C, Java, Python, Perl, Fortran...).

СКБД - система керування базами даних, включає в себе саму систему даних (таблиці, об’єкти), мову запитів SQL і програмної оболонки для виконання запитів і сервісного обслуговування бази даних. Типові системи: MySQL, PostgreSQL, MS SQL, SQLite.

LAMP - типова сукупність програм веб-сервера, в даному випадку: Linux, Apache, MySQL, PHP (Python, Perl).

Приклади сборок веб-серверів: XAMPP, OpenSever, Denwer.

Клієнтська частина сайту (frontend) - комплекс програм, що забезпечують відображення веб-сторінки на екрані користувача. Включає в себе браузер, обробник сценарних скриптів, плагіни для відображення Flash, відео, аудіо, PDF...

Браузер - програма для перегляду веб-сторінок, веб-файлів, керування веб-додатками. Типові браузери: MS Explorer, MS Edge, Google Chrome, Mozilla Firefox, Opera.

HTML (HyperText Markup Language) - мова гіпертекстової розмітки. Не є мовою програмування, а лише розмітки (оформлення). Використовується на переважній більшості веб-сторінок в інтернеті. Браузер інтерпритує сторінку, написану на HTML і отриманий результат відображає на екрані.
У сьогоднішніх реаліях мова HTML повинна описувати тільки дані, їх систематизацію, семантику. Зовнішній вигляд даних повністю описується у таблицях стилів (CSS).

CSS (Cascading Style Sheets) - каскадні таблиці стилів, мова для опису зовнішнього вигляду документа, написаного на мові розмітки.

JS (JavaScript) - найпоширеніша мова сценарних скриптів, виконується на стороні клієнта, покращуючи взаємодію користувача з веб-сайтом.

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

Макет - файл в форматі PSD, зовнішній вигляд веб-сторінки, створений дизайнером в фотошопі.

Порізка - вирізування з макету фотографій, зображень та декоративних елементів у вигляді окремих файлів у форматах PNG, JPG та GIF, створення спрайтів.

Модель даних веб-сторінки (Data Model) - інформація, що представлена на веб-сторінці у звичайному текстовому форматі.

HTML-код веб-сторінки - модель даних, оформлена тегами, поділена блоками на логічні елементи.
HTML-код не повинен містити оформлення веб-сторінки! Теги повинні описувати виключно дані, а не розмір та колір шрифтів, положення елементів на сторінці.

Стилізація - оформлення стилями HTML-коду сторінки. Описування розмірів шрифтів, кольорів, фонів, відступів, взаємне розташування елементів веб-сторінки.

Скриптування - створення скриптів для веб-сторінки.

Верстка - перетворення макету на статичну веб-сторінку, використовуючи HTML, CSS, JS.

Програмування - перетворення статичних веб-сторінок на динамічні із застосуванням серверних мов програмування типу PHP, Ruby, Python, Perl, ASP.NET, cgi-програм.

Натяжка на CMS - перетворювання статичних веб-сторінок на шаблон для CMS (Wordpress, Jomla, UMI, 1С Бітрікс...).

Контрольні питання

  1. Що таке IP, сервер, хостинг і домен?
  2. Яка різниця між URL та URI?
  3. Які професії задіяні у розробці сайтів та додатків?
  4. Перелічіть ключові етапи створення сайту.
  5. Перелічіть процеси створення фронт-енд частини сайту.
  6. Які програми застосовуються у фронтенд-розробці? Для чого вони потрібні? Опишіть їх призначення.
  7. Які мови розмітки, програмування використовуються у фронтенд-розробці? А у всій веб-розробці, включаючи бек-енд, тестування, ведення документації?
  8. Що таке CMS?