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

Дані інструменти слугують доповненням для браузера. У більшості популярних веббраузерів, таких як Google Chrome, Firefox, Internet Explorer, Safari, Microsoft Edge та Opera інструменти веброзробки вже вбудовані для допомоги веброзробникам, також багато додаткових доповнень можна знайти у відповідних центрах завантаження плагінів.

Інструменти веброзробки дозволяють розробникам працювати з різними вебтехнологіями, включаючи [[subjects:basic:informatika:base:html|HTML]], [[subjects:basic:informatika:web:css|CSS]], DOM, JavaScript та інші компоненти.

==== Інструменти для створення сайтів ====
=== Редактор коду/Середовище розробки ===
**Редактор коду**\\
Насамперед, це корисний інструмент для тих, хто збирається самостійно створювати свій ресурс або вносити якісь поправки до нього. Якщо це так, то вам знадобиться написання коду на мовах html і css як мінімум, а можливо і на деяких інших. Для зручної роботи з ними потрібно якесь програмне забезпечення, в нашому випадку редактор, в якому цей код підсвічували, а також вилазили різні підказки по написанню. У будь-якому випадку, ви можете їх прибрати, якщо ви є досвідченим розробником.

**Середовище розробки**\\
Це щось подібне до того ж редактора, але включає в себе набагато більше можливостей. Сама назва говорить про це. У такому середовищі є все необхідне для того, щоб розробити сайт. Зазвичай таку програму встановлюють для того, щоб працювати з різними мовами програмування. В веб-програмуванні частіше всього використовується PHP, саме для роботи з ним ставлять середу.

**Можна виділити таке програмне забезпечення:**
<grid>
<col md="3">
{{ https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Notepad%2B%2B_Logo.svg/160px-Notepad%2B%2B_Logo.svg.png?125&nolink }}
Notepad++ — текстовий редактор, призначений для програмістів і тих, кого не влаштовує скромна функціональність програми «блокнот», що входить до складу Windows
</col>

<col md="3">
{{ https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Atom_editor_logo.svg/1200px-Atom_editor_logo.svg.png?110&nolink }}
Atom — розроблений компанією «GitHub» вільний текстовий редактор і редактор коду, який може використовуватися як самодостатнє рішення, так і у ролі технологічного стека для побудови різних спеціалізованих рішень
</col>

<col md="3">
{{ https://upload.wikimedia.org/wikipedia/uk/thumb/f/fa/PHPStorm_logo.svg/64px-PHPStorm_logo.svg.png?100&nolink }}
JetBrains PhpStorm — комерційне крос-платформове інтегроване середовище розробки для PHP, яке розробляється компанією JetBrains на основі платформи IntelliJ IDEA
</col>

<col md="3">
{{ https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Apache_NetBeans_Logo.svg/69px-Apache_NetBeans_Logo.svg.png?100&nolink }}
JNetBeans IDE — вільне інтегроване середовище розробки (IDE) для мов програмування Java, JavaFX, C/C++, PHP, JavaScript, HTML5, Python, Groovy.
</col>
</grid>

=== Система керування вмістом (CMS) ===
Система керування вмі́том (СКВ; англ. Content Management System, CMS) — програмне забезпечення для організації вебсайтів чи інших інформаційних ресурсів в Інтернеті чи окремих комп'ютерних мережах.

Системи управління вебсайтом часто розраховані на роботу у певному програмному середовищі. Наприклад, система MediaWiki, під управлінням якої працює Вікіпедія, написана мовою програмування PHP і зберігає вміст і налаштування у базі даних типу MySQL або PostgreSQL; тому для її роботи потрібно, щоб на сервері, де вона розміщена, були встановлені вебсервер (Apache, IIS чи інший), підтримка PHP та системи керування базами даних MySQL або PostgreSQL, а також, в разі необхідності, додаткові програми для обробки зображень чи математичних формул. Такі вимоги є досить типовими для відкритих СКВ.

=== Конструктори сайтів як спрощені інструменти ===
Редактори коду чи середовища розробки призначені для програмістів, тому що розробка дизайну та його реалізація в коді вимагає чималих знань, а якщо їх немає, то треба наймати людей, які це зроблять.

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

Деякі конструктори є великими веб-майданчиками, де ви можете зареєструвати собі домен, замовити додаткові послуги і т. д. Наприклад, Wix. А є просто програми-конструктори. Наприклад, DreamViewer або повністю візуальний Adobe Muse.

<grid>
<col md="4">
{{ https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Adobe_Dreamweaver_CC_icon.svg/64px-Adobe_Dreamweaver_CC_icon.svg.png?nolink&125 }}
Adobe Dreamweaver (попередня назва Macromedia Dreamweaver) — редактор, що відноситься до категорії WYSIWYG-редакторів, має дуже багато переваг: зручний інтерфейс, настроювання функцій, підтримка великих проектів і ShockWave-технологій, можливість закачування файлів через FTP, підтримка SSI і багато чого іншого
</col>
<col md="4">
{{ https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Adobe_Muse_CC_icon.svg/120px-Adobe_Muse_CC_icon.svg.png?nolink&125 }}
Adobe Muse — це офлайн-конструктор веб-сайтів без коду, який використовують для створення фіксованих, плавних або адаптивних веб-сайтів без необхідності написання коду.
</col>
<col md="4">
{{ https://www.logodee.com/wp-content/uploads/2020/07/LD-C-23.jpg?nolink&125 }}
Wix.com: Безкоштовний конструктор сайтів - міжнародна хмарна платформа для створення та розвитку інтернет-проектів, що дозволяє будувати професійні сайти і їхні мобільні версії на HTML5 з допомогою інструментів drag-and-drop.
</col>
</grid>

<callout type="info" title="WYSIWYG" icon="true">Візуальний редактор, також вживається назва WYSIWYG (вимовляється [wɪziwɪɡ], є абревіатурою від англ. What You See Is What You Get, «що бачиш, то і отримаєш») — властивість прикладних програм або вебінтерфейсів, в яких вміст відображається в процесі редагування і виглядає максимально близько схожим на кінцеву продукцію, яка може бути друкованим документом, вебсторінкою або презентацією. В даний час для подібних програм також широко використовується поняття «візуальний редактор».</callout>

=== Локальний сервер ===
Для створення сторінок на мові HTML звичайно не потрібно ніяких додаткових програм, тільки блокнот і браузер, але для більш серйозних проектів, які будуть вимагати підтримку PHP і баз даних необхідно мати веб-сервер. Чому так? Та тому що PHP виконується на стороні веб-сервера, усі запити і їх опрацювання виконує веб-сервер.

Якщо ви вирішили програмувати сайт на PHP або ж навіть створити сайт на основі будь-якої CMS(такі системи, як Joomla, WordPress, Drupal, DLE і інші), тож і вам буде необхідний веб-сервер.

<grid>
<col md="4">
{{ https://miro.medium.com/v2/resize:fit:800/1*SNA3tR3GPoiPNTH8ZR_fVA.png?125&nolink }}
Laragon — це потужне та портативне середовище для локальної розробки на PHP, яке дозволяє розробникам легко створювати та керувати веб-додатками. Воно постачається з такими інструментами, як Apache, MySQL, PHP та іншими сервісами, що робить налаштування розробницького стеку швидким і зручним.
</col>
<col md="4">
{{ https://upload.wikimedia.org/wikipedia/en/thumb/7/78/XAMPP_logo.svg/1200px-XAMPP_logo.svg.png?125&nolink }}
XAMPP — безкоштовна багатоплатформова збірка вебсервера з відкритим початковим кодом, що містить HTTP-сервер Apache, базу даних MariaDB, MySQL й інтерпретатори скриптів для мов програмування PHP та Perl, а також додаткові бібліотеки, що дозволяють запустити повноцінний вебсервер.
</col>
<col md="4">
{{ https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Apache_HTTP_server_logo_%282016%29.png/250px-Apache_HTTP_server_logo_%282016%29.png?125&nolink }}
Apache HTTP-сервер (вимовляється /ə.ˈpæ.ʧi/) — відкритий вебсервер Інтернет для UNIX-подібних, Microsoft Windows, Novell NetWare та інших операційних систем.
</col>
</grid>

==== Підтримка інструментів веброзробника ====
Кілька відомих веббраузерів мають вбудовані плагіни, які допомагають при розробці макету сторінки. 
  * [[wp>Mozilla Firefox|Firefox]] 
  * [[wp>Google Chrome]] 
  * [[wp>Microsoft Edge]] 
  * [[wp>Opera|Опера]] 
  * [[wp>Safari]]
===== Джерела =====
  * [[wp>Інструменти веброзробки]]
  * [[http://savelink.org.ua/instrumenti-dlya-stvorennya-sajtiv/|Інструменти для створення сайтів - Savelink]]
  * [[http://programming.in.ua/web-design/allphp/68-local-serv-priority.html|Що таке локальний сервер і для чого він потрібен - Українське програмування]]