Блог вчителя інформатики

5.  Інструменти розробки сайтів.

Який вигляд матиме сайт - це питанням вирішує вебдизайнер. Результат своєї роботи у вигляді макету передає веброзробнику. Завдання веброзробника - написати код, що відобразить браузер у саме такому вигляді, як запропонував вебдизайнер.

Розробка для програміста або дизайнера – як творчість для художника. А кожний створений сайт – предмет гордості. Розробник – перш за все, фахівець. Його завдання – не просто писати код. А завдання дизайнера не просто створювати дизайн. Кінцева мета для обох – створення продукту, який повністю задовольняє вимоги клієнта.

Процес розробки чітко розділений на етапи, що повинні бути реалізовані у рамках проекту.

Основні етапи веб-розробки:

1. Аналіз брифу і написання технічне завдання.

 Бриф – це такий документ, своєрідна анкета, яку заповнює замовник. У брифі клієнт вказує свої побажання щодо дизайну, функціоналу сайту чи програми та інші деталі проекту. На основі брифу менеджери IT-компанії складають ТЗ (технічне завдання) для розробників.

2. Прототипування.

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

3. Розробка дизайну.

На даному етапі дизайнер промальовує сторінки ресурсу. Сьогодні важливо, аби сайт мав не лише десктопну версію, а й мобільну. Незмінна вимога до дизайну – “дружній” інтуїтивно зрозумілий інтерфейс. Тобто такий, коли користувач легко і швидко знаходить необхідну інформацію на сайті.

4. Програмування.

Front-end розробники перетворюють макети з дизайном в інтерактивні веб-сторінки за допомогою мови HTML (по-суті, перетворюють малюнок на код). Back-end розробники поєднують/інтегрують зверстані веб-сторінки з базою даних та системою керування сайтом. Їх задача – зробити сайт не просто закодованою картинкою, а перетворити його на повноцінний функціональний робочий інструмент.

4. Тестування.

Ресурс проходить тестування на відповідність макетів дизайну, швидкість роботи, оптимізацію під мобільні пристрої і відображення в різних браузерах. Фінальна перевірка якості – це оцінка готового продукту з точки зору, як програміста, так і користувача. Тестується виконання функціоналу: чи маємо можливість здійснити покупку, чи проходить оплата, чи надходять листи, тощо. Тестується працездатність проекту загалом.

5. Наповнення сайту.

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

6. Деплой сайту.

На цьому етапі компанія-розробник допомагає клієнту вибрати хостинг (місце в інтернеті) і отримати домен (адреса ресурсу) – два моменти, необхідні для розміщення сайту. Після чого переносять сайт на цей хостинг. Ресурс відкривається для пошукових систем. І проходить етап фінального тестування після переносу.

7. Просування ресурсу.

SEO-фахівці, SMM-менеджери, таргетологи займаються комплексним просуванням ресурсу: аналізують його роботу, складають стратегію внутрішньої і зовнішньої оптимізації та втілюють її у життя.

Перегляньте відео на цю тему.

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

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

• Visual Studio Code — це безкоштовний крос-платформний редактор коду, розроблений корпорацією Microsoft. Програма має відкритий вихідний код. Вона оснащена доступним на­бором інструментів для редагування й налаштування, легко інтегрується з іншими сервісами, її властивості можна легко розширити.
  
  
  
• Notepad+H - це розвинутий редактор коду, доступний лише на платформі Windows. Ним користуються понад 30% розробників. Програма дуже швидка, підтримує зовнішні плагіни, включаючи макроси, її інтерфейс передбачає редагування в різних вкладках, є опція перетягування для початківців. Notepad** підтримує повноекранний режим, робить автоматичні відступи та автодоповнення, має дуже про­думане підсвічування синтаксису. Програма дозволяє здійснювати пошук і заміну тексту, перевірку правопису з порівнянням файла, використовувати фолдинг (функціонал згортання).
  
  
  
• Sublime Text 3 — це крос-платформний редактор коду, що має як преміум-версію, так і безкоштовну версію, яку можна завантажити на офіційному сайті. Програма легка й дуже швидка в роботі, за замовчуванням надає автодоповнення, підсвічування синтаксису та фолдинг, має зручний інтер­фейс для початківців, виявлення та виділення синтаксичних помилок, дозволяє одночасно редагувати багато рядків. У Sublime Text 3 можна додатково налаштувати плагін Package Control, додавши таким чином інструменти налаштування, нові теми.
  
  
  
• Atom — це безкоштовний крос-платформний редактор із відкритим вихідним кодом. Інтерфейс Atom виглядає як клон редактора Sublime Text, проте працювати в ньому набагато ком­фортніше, оскільки він більш простий і зрозумілий. Крім того, якщо розробник під час програмування стикається з труд­нощами, спільнота GitHub досить активно розв'язує цю проблему. Програма за замовчуванням надає підсвічування синтаксису, допов­нення й згортання коду, а також має вбудовану підтримку десятків мов програмування. Atom постачається із вбудованим менеджером пакетів, завдяки чому можна здійснювати пошук, установлювати або створювати власні пакети для розширення функціоналу редактора.
  

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