Технології

розробки сайтів.
Інструменти
розробки сайтів
10 За навчальною програмою 2018 року

(11)

Урок 17-18
 Актуалізація опорних знань
Розділ 1
§5 і життєвого досвіду 10
(11)
Продовжіть речення:

Веб-сайти потрібні для...

Я знаю такі типи сайтів...

Про розробку веб-сайтів мені відомо...

Я маю такий досвід розробки веб-сайтів...

Я маю такий досвід розробки веб-сайтів...

Розділ 1
Технології розробки сайтів
§5
10
(11)
Інструментальні засоби для веб-розробки:
Засоби редагування Технології та мови
та конвертування програмування для
Мова розмітки
для створення та розробки
гіпертексту HTML
інтерпретації Web- інтерактивних сторінок
документів і мобільних додатків
 Розділ 1
Технології розробки сайтів
§5
10
(11)
Сайт логічно розділений на дві великі частини:

частину, призначену
технічну частину
для користувача

back-end
front-end
 Розділ 1
Технології розробки сайтів
§5
10
(11)

Технічна частина (back-end) являє собою файли, що

містять в собі вихідний код, написаний на різних мовах
програмування.
Цей код обробляє дані,
отримані від користувача,
перевіряє ці дані і, в
залежності від результатів,
може виконувати різні дії.
Технічна частина також
відповідає за генерацію
сторінок або різних їх
ділянок.
 Розділ 1
Технології розробки сайтів
§5
10
(11)
Існує кілька популярних мов програмування, які
використовуються для реалізації технічної частини:

PHP Python Ruby С

Кожна має свої можливості й недоліки, варто лише

зазначити, що PHP має найбільше поширення і
підтримку.
 Розділ 1
Технології розробки сайтів
§5
10
(11)
Клієнтська частина
сайта (front-end) — це
все, що ми бачимо, все,
що рухається у нас на
екрані, і все, на що можна
натиснути.
Клієнтську частину забезпечують дві обов’язкові
складові:

мова розмітки веб-

каскадні таблиці стилів
сторінок HTML
 Розділ 1
Інструменти розробки сайтів
§5
10
(11)
Створювати веб-сторінки можна за допомогою
звичайного текстового редактора або спеціального
HTML-редактора.
Програми створення веб-сторінок

Текстові Текстові
HTML-редактори
редактори процесори
 Розділ 1
Інструменти розробки сайтів
§5
10
(11)
Програми, що дають змогу спростити технологію
створення сайта:

Dreamweaver — зручна програма, що дає змогу швидко

створювати сайти.

Photoshop — дає змогу редагувати картинки і зберігати їх у

форматі для web.

Notepad++ — технологічний редактор з підсвічуванням коду.

Filezilla — FTP-клієнт, який дає змогу швидко і без проблем

завантажувати/вивантажувати документи на хостингу.
 Розділ 1
Інструменти розробки сайтів
§5
10
(11)
Ви навчилися конструювати
сайти з використанням онлайн-
систем. Тепер ознайомимося зі
спеціальними програмами —
системами керування вмістом
(СКВ) (англ. CMS — Content
Management System).
Система керування вмістом — це програмний
комплекс, який забезпечує доступ користувача до
ресурсів сайта (веб-сторінок, бази даних та ін.) та
виконання над ними різних операцій (змінювання,
видалення, додавання, захист тощо).
 Розділ 1
Інструменти розробки сайтів
§5
10
(11)
Існують тисячі СКВ, що відрізняются одна від одної
набором засобів, які отримують адміністратор сайта та
користувачі. Прикладами СКВ є:

WordPress Joomla Drupal Moodle та ін.

 Розділ 1
Інструменти розробки сайтів
§5
10
(11)
До основних функцій
СКВ належать
надання користувачу
інформації у зручному
для використання
вигляді, засобів для
індивідуальної та
спільної роботи над
вмістом і для
керування ним
(зберігання, захист
тощо).
 Розділ 1
Інструменти розробки сайтів
§5
10
(11)
Розглянемо основні особливості деяких популярних
вільних СКВ.
Moodle (англ. Modular
Object-Oriented Dynamic
Learning Environment —
модульне об’єктно-
орієнтоване динамічне
навчальне середовище)  —
платформа для створення
різноманітних навчальних
ресурсів.
 Розділ 1
Інструменти розробки сайтів
§5
10
(11)
Сайт
проекту:
moodle.org

На
сторінці:
https://moodle.net/sites/index.php?country=UA
Можна переглянути список українських ресурсів, які
ґрунтуються на Moodle.
 Розділ 1
Інструменти розробки сайтів
§5
10
(11)
Moodle дозволяє вчителям і учням ефективно
організувати спільну діяльність:

для учнів для вчителів

можливість розробляти
цілодобовий доступ до
дистанційні курси,
навчальних матеріалів
розміщувати та оперативно
різних типів, перегляд
змінювати навчальні
результатів тестування,
матеріали, слідкувати за
спілкування (чат, форум,
діяльністю кожного учня
семінар та ін.)
тощо.
 Розділ 1
Інструменти розробки сайтів
§5
10
(11)
СКВ MediaWiki розроблено
спеціально для Вікіпедії, проте вона
використовується на багатьох
сайтах, які працюють за технологією
«вікі».
На цій платформі побудовано і
сайт самого проекту MediaWiki

https://www.mediawiki.org/wiki/MediaWiki
 Розділ 1
Інструменти розробки сайтів
§5
10
(11)
Вікі-сайт дозволяє користувачам довільно
змінювати зміст сторінок під час їх перегляду у
вікні браузера.
Угорі кожної сторінки Вікіпедії й біля кожного
підзаголовка є посилання Редагувати або ред.. Якщо
його клацнути, то сторінка перейде в режим
редагування. Після цього слід внести виправлення й
клацнути кнопку Опублікувати зміни.
 Розділ 1
Інструменти розробки сайтів
§5
10
(11)
Універсальна СКВ Joomla!
дозволяє створювати та
підтримувати найрізноманітніші
сайти: від сайтів-візитівок до
великих корпоративних сайтів,
інтернет-магазинів, інтернет-
порталів тощо.
Така гнучкість досягається завдяки великій кількості
вибіркових модулів, які може використати розробник
сайта.
 Розділ 1
Створення веб-сторінки мовою HTML
§5
10
(11)
Розглянемо процес створення
веб-сторінок з використанням
текстового редактора Notepad++.
notepad-plus-plus.org

За замовчуванням текст, що вводиться в редакторі,

кодується з використанням кодової таблиці Юнікод.
 Розділ 1
Створення веб-сторінки мовою HTML
§5
10
(11)
Після введення коду веб-сторінки та збереження
документа у файлі, тип якого Hyper Text Markup
Language file, елементи коду будуть подані різними
кольорами залежно від їх типу:

текст числа теги

значення
атрибути тегів коментарі тощо.
атрибутів
 Розділ 1
Створення веб-сторінки мовою HTML
§5
10
(11)
Щоб побачити, як відображається веб-сторінка в
браузері, можна виконати Виконати  Launch in Chrome.
Після цього буде запущено на виконання браузер
Google Chrome, у вікні якого відобразиться створена
веб-сторінка.

2
 Розділ 1
Створення веб-сторінки мовою HTML
§5
10
(11)
Наведену на малюнку структуру коду рекомендується
використовувати в усіх веб-сторінках, які ви
створюватимете.
 Розділ 1
Запитання для рефлексії
§5
10
(11)
1. Чи залишилися питання з теми уроку, на які я не
знаю відповіді?
2. Які труднощі були під час вивчення технології
розробки сайтів?
3. Чи маю я задоволення від роботи на уроці?
4. Чи знаю я, де шукати додаткову інформацію
з питань технологій розробки сайтів?
 Дякую за увагу!

10 За навчальною програмою 2018 року

(11)

Урок
Урок17-18
5