Технології розробки сайтів. Інструменти розробки сайтів.

Тема: Технології розробки сайтів. Інструменти розробки сайтів.

Інструментальні засоби для веб-розробки:

• Ручна за допомогою HTML

• За допомогою програмних засобів розробки сайтів

• За допомогою інструментальних систем таких як CMS

• З використанням популярних на цей час фреймворків

• На SaaS-плат­формах у CLOUD

1. Ручна за допомогою HTML. При появі стандарту HTML, цей метод був найпоширенішим. Основною програмою для розробки був Notepad. Але у цього методу є істотні недоліки. Цей спосіб досить трудомісткий. І до того ж зробити нормальний Web-сайт без CSS, JavaScript та інших мов програмування досить важко.

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

Виділимо декілька інструментальних систем для розробки HTML:

• програми, що мають у своєму складі візуальні редактори (design-based editor)– засоби, які автоматично формують необхідний HTML-код, дозволяючи розробляти Web-сторінки в режимі WYSIWYG;

• програми-редактори (code-based editors), які надають редактор і допоміжні засоби для автоматизації написання коду.

Розглянемо найбільш популярні design-based редактори:

• Adobe DreamWeaver – один з кращих візуальних редакторів, що генерують HTML код. Він дозволяє працювати в декількох режимах одночасно, з HTML кодом або у візуальному режимі. Але основним недоліком є те, що програма генерує занадто “важкий” код, додаючи багато зайвого. Але, якщо знайомі з HTML, тоді текст HTML можна відредагувати. Ця програмна система випускалася до 2005 року компанією Macromedia, після чого була придбана фірмою Abode.

• Microsoft FrontPage – це простий в засвоєнні і зручний Web-редактор для проектування, підготовки і публікації Web-сайтів. Завдяки інтеграції з сімейством продуктів MS Office, звичного інтерфейсу і великої кількості шаблонів програма дозволяє швидко засвоїти роботу навіть початківцям, які знайомі з основами роботи в MS Word. При цьому FrontPage не можна назвати рішенням для «чайників»: програма надає широкі функціональні можливості та різноманітні засоби оптимізації при колективній розробці. Вона дозволяє швидко створювати динамічні комплексні Web-вузли практично будь-якої складності.

Розглянемо популярні code-based редактори:

• Adobe HomeSites – це потужний пакет, до складу якого входить багато корисних функцій і підпрограм. Об’ємний дистрибутив редактора включає в себе, крім самого редактора, редактор TopStyle для редагування таблиць CSS, перевірку орфографії та багато іншого.

• HotDog – цілком професійний редактор. Вбудована підтримка дуже широкого набору інструментів, що використовуються в Web-дизайні: HTML, CSS, JavaSript, VBScript, ASP, а також DOM – об’єктну модель документа, що використовується при програмуванні на VBScript і JavaScript. При цьому перевірка синтаксису цих інструментів може налаштовуватися в досить широких межах. Наприклад, HTML можна перевіряти на відповідність версії 3.2, 4, або на “перегляді” тільки в Internet Explorer та інше.

• AceHTML – основні функціональні можливості – подібно HomeSite і FirstPage. З цінних якостей AceHTML треба відзначити вмілу роботу з кодуваннями російської мови. Другий плюс – дуже непогана вбудована утиліта для перегляду графічних файлів у комп’ютері. У просторому вікні відображаються ескізи всіх картинок в директорії, а також їх параметри і розмір у пікселях.

3. Використання інструментальних систем CMS для створення динамічних Web-сайтів

Для створення динамічного сайту можливі два шляхи.

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

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

Другий шлях є основним на цей час для створення складних, сучасних сайтів, порталів, Веб-додатків. Це метод з використанням CMS. Вікіпедія дає наступне визначення: CMS - це система керування вмістом (контентом) (англ. Content management system, CMS) — комп'ютерна програма чи система, що використовується для забезпечення і організації сумісного процеса створення, редагування та управління текстовими і мультимедійними документами (вмісту чи контента). Звичайно, що встановлення CMS робиться вже на вибраному хостингу. При цьому як мінімум вимагається FTP доступ та дозвіл роботи MySQL.

Таким чином, відділення дизайну від контенту є головною відміною особливістю динамічних сайтів від статичних.

При створенні сайтів часто можна почути слова «фронтенд» і «бекенд». Вони втілюють у собі протилежну «філософію», але при цьому фронтенд і бекенд один без одного не змогли б повноцінно існувати. Що ж таке фронтенд і бекенд та чим вони відрізняються?

Фронтенд і бекенд: основна відмінність

Який би приклад підійшов у цьому випадку? Коли ви ведете автомобіль, ви використовуєте кермо, щоб привести його в рух і дати інші важливі команди. Але те, що дійсно приводить авто в рух, заховане всередині. Це його двигун.

Так само з фронтендом і бекендом. Фронтенд-розробка зосереджена на тих елементах сайту, які ви бачите у браузері і з якими безпосередньо взаємодієте. Бекенд-розробка відповідає за функціонал сайту і має справу з речами, яких ви не бачите, — такими як бази даних та сервери.

Фронтенд-розробка: завжди «на передньому плані»

Frontend – це публічна частина web-додатків (веб-сайтів), з якою користувач може взаємодіяти і контактувати напряму.

Щоб представити контент сайту найкращим чином та забезпечити ідеальну взаємодію користувача з сайтом, фронтенд-розробники використовують багато корисних інструментів, найважливіші з яких — HTML, CSS та JavaScript. HTML (Hypertext Markup Language) відповідає за представлення коду користувачам у зрозумілій та звичній формі. CSS (Cascading Style Sheets) пропонує чудові можливості із вдосконалення стилів (кольори, фони, блики і т.д.) Javascript робить взаємодію користувача з сайтом швидшою та цікавішою за допомогою слайдів, випадних меню, безкінечного скролінгу та багатьох інших способів — вибір безмежний.

Низка інших елементів та фреймворків (SAAS, LESS, Bootstrap, jQuery, Angular, Ember і т.д.) використовуютья разом із цією «великою трійкою» для значного полегшення роботи.

Компоненти фронтенд розробки:

HTML (HyperText Markup Language) кажучи простими словами – це мова розмітки всіх елементів і документів на сторінці, і їх взаємодія в структурі сторінки.

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

JavaScript– мова, створена оживляти веб-сторінки. Завдання JavaScript – відгукуватися на дії користувача, обробляти натискання клавіш, переміщення курсора, кліки мишкою. JavaScript також дає можливість вводити повідомлення, посилати запити на сервер, а також завантажує дані без перезавантаження сторінки, і так далі.

Бекенд-розробка: «серце» вашого сайту

Backend – це програмно-апаратна частина проекту; це все те, що відбувається на стороні сервера і що залишається невидимим користувачеві (сам сервер теж є частиною бекенду, тільки апаратного)

Бекенд — «невидимий двигун» сайту. Бекенд-розробники пишуть код, використовуючи такі популярні мови програмування, як PHP, Ruby on Rails, Python, .NET та інші. Коли потрібно виконати якусь операцію, бекенд-код взаємодіє з базою даних (використовуючи MySQL, SQL, Microsoft Access і т.д.). Після цього необхідна інформація повертається користувачу в формі фронтенд-коду.

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

Отже, звідси і назва front – це видиме спереду, back – це те, що приховано позаду, невидиме.

Тест містить 8 питань та на його проходження дається 12 хвилин