Інструменти �веб-розробника

Модуль «Веб-технології»

Урок 5

​

Поміркуємо

Перегляньте наступне відео. Як ви вважаєте, чим відрізняється робота веб-дизайнера від роботи веб-розробника

• Який вигляд матиме сайт — цим питанням опікується веб-дизайнер.
• Веб-розробник отримує результат його роботи у вигляді макету. Його задача — досягнути відображення браузером сайту так, як запропонував веб-дизайнер. Тобто, він має написати код за допомогою мови розмітки HTML, каскадних таблиць стилів CSS та мовами програмування JavaScript і PHP.
• Відповідно веб-розробнику потрібен інструментарій, який полегшить написання коду.

Інструменти веб-розробника включають мови розмітки (HTML), стилів (CSS) та програмування (JavaScript), а також фреймворки (React, Angular), редактори коду (Visual Studio Code, Sublime Text), системи контролю версій (Git, GitHub) і інструменти тестування (Jest, Selenium). Вони допомагають створювати, тестувати, оптимізувати та керувати веб-сайтами і додатками.

Основні інструменти та технології

Основні інструменти та технології

Основні інструменти та технології

Редактор коду — перший інструмент веб-розробника

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

�Рейтинг популярності редакторів коду �

Visual Studio Code

• Безкоштовний крос-платформний редактор коду, розроблений корпорацією Microsoft.

• Програма має відкритий вихідний код. Вона оснащена доступним набором інструментів для редагування й налаштування, легко інтегрується з іншими сервісами, її власні властивості можна легко розширити. �

Visual Studio Code

Безумовний лідер по

популярності серед

веб-розробників

Notepad ++

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

Підтримує повноекранний режим, робить автоматичні відступи та автодоповнення, має дуже продумане підсвічування синтаксису.

Notepad ++ це розвинутий редактор коду, випущений в 2003 році і доступний лише на платформі Windows.

Notepad ++

Програма дозволяє здійснювати пошук і заміну тексту, перевірку правопису з порівнянням файла, використовувати фолдинг (функціонал згортання).

Sublime Text 3�

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

Sublime Text 3

Можна налаштувати плагін Package Control, що додасть інструменти налаштування та нові теми.

Atom

Безкоштовний крос-платформний редактор із відкритим вихідним кодом (розробка програмістів GitHub).�Інтерфейс Atom виглядає як клон редактора Sublime Text, проте він більш простий і зрозумілий.

�Програма за замовчуванням надає підсвічування синтаксису, доповнення й згортання коду, а також має вбудовану підтримку десятків мов програмування.

Atom

Постачається із�вбудованим менеджером пакетів для пошуку, створення власних пакетів для розширення функціоналу редактора.

Vim

• Редактор, назва якого походить від англ. Vi improved — покращений vi. Уперше він був випущений наприкінці 1991 року Брамом Мооленааром.
• Справжню міць Vim демонструє під час роботи з структурованими текстами та є незамінним для програмістів і верстальників: його використовує кожен четвертий веб-розробник.
• Vim є клоном текстового редактора vi для Unix, який написав Біл Джой ще в 1976 році. ��

Vim

Має незвичайний інтерфейс, заснований на поділі режимів роботи: стандартний режим, режим вставки, режим командного�рядка. �

Brackets

Редактор коду, створений «з нуля» спеціально для веб-дизайнерів і фронтенд-розробників, які працюють переважно з JavaScript, HTML і CSS.

​

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

�У Brackets є властивість «extract», що дозволяє розробникам підтягувати кольори, розміри, градієнти, шрифти та інші важливі дані з PSD-файла в CSS-файл, готовий до використання. ��

Brackets �

Brackets дуже популярний серед українських веб-розробників.

Цікаво

Сайт Stack Overflow було створено у 2008 році Джефом Етвудом і Джоелом Спольські як ресурс для програмістів, які намагаються вирішити якусь проблему.

Це сервіс питань і відповідей по програмуванню, який входить в сотню найбільш відвідуваних сайтів.

Щомісяця цей сайт відвідує близько 50 мільйонів людей.

• Слід відмітити, що за статистикою сайту, кількість українських професійних розробників на сервісі перевищує 1 відсоток
• Цікаво, що компанії, запрошуючи на роботу розробника програмного забезпечення, розглядають активний профіль на StackOverflow як важливу частину резюме.

​

Переважна більшість учасників є веб-розробниками.

​

Аналізуємо. Обговорюємо

1. У чому полягає різниця між роботою веб-дизайнера і веб-розробника?
2. Якими інструментами користується у роботі веб-розробник?
3. Яке призначення редактору коду?
4. Назвіть найпопулярніший, на вашу думку, редактор коду.
5. Що об’єднує всі редактори коду?�

Поміркуємо

Перегляньте наступне відео. Чи змінюється робота веб-розробника в залежності від типу сайту. Відповідь обґрунтуйте

Домашнє завдання

Знайдіть в Інтернеті відомості про інструменти веб-розробника, логотипи яких наведено на рисунку.

Створіть класифікацію інструментів. ��