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

1.

10
(11)
Урок 5
Технології
розробки сайтів.
Інструменти
розробки сайтів
За навчальною програмою 2018 року

2.

Розділ 1
§5
Актуалізація опорних знань
і життєвого досвіду
Продовжіть речення:
Веб-сайти потрібні для...
Я знаю такі типи сайтів...
Про розробку веб-сайтів мені відомо...
Я маю такий досвід розробки веб-сайтів...
Я маю такий досвід розробки веб-сайтів...
© Вивчаємо інформатику
teach-inf.at.ua
10
(11)

3.

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

4.

Розділ 1
§5
Технології розробки сайтів
10
(11)
Сайт логічно розділений на дві великі частини:
частину, призначену
для користувача
back-end
front-end
© Вивчаємо інформатику
технічну частину
teach-inf.at.ua

5.

Розділ 1
§5
Технології розробки сайтів
10
(11)
Технічна частина (back-end) являє собою файли, що
містять в собі вихідний код, написаний на різних мовах
програмування.
Цей код обробляє дані,
отримані від користувача,
перевіряє ці дані і, в
залежності від результатів,
може виконувати різні дії.
Технічна частина також
відповідає за генерацію
сторінок або різних їх
ділянок.
© Вивчаємо інформатику
teach-inf.at.ua

6.

Розділ 1
§5
Технології розробки сайтів
10
(11)
Існує кілька популярних мов програмування,
використовуються для реалізації технічної частини:
PHP
Python
Ruby
які
С
Кожна має свої можливості й недоліки, варто лише
зазначити, що PHP має найбільше поширення і
підтримку.
© Вивчаємо інформатику
teach-inf.at.ua

7.

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

8.

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

9.

Розділ 1
§5
Інструменти розробки сайтів
Програми, що
створення сайта:
дають
змогу
спростити
10
(11)
технологію
Dreamweaver — зручна програма, що дає змогу швидко
створювати сайти.
Photoshop — дає змогу редагувати картинки і зберігати їх у
форматі для web.
Notepad++ — технологічний редактор з підсвічуванням коду.
Filezilla — FTP-клієнт, який дає змогу швидко і без проблем
завантажувати/вивантажувати документи на хостингу.
© Вивчаємо інформатику
teach-inf.at.ua

10.

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

11.

Розділ 1
§5
Інструменти розробки сайтів
10
(11)
Існують тисячі СКВ, що відрізняются одна від одної
набором засобів, які отримують адміністратор сайта та
користувачі. Прикладами СКВ є:
WordPress
© Вивчаємо інформатику
Joomla
teach-inf.at.ua
Drupal
Moodle та ін.

12.

Розділ 1
§5
Інструменти розробки сайтів
До основних функцій
СКВ належать
надання користувачу
інформації у зручному
для використання
вигляді, засобів для
індивідуальної та
спільної роботи над
вмістом і для
керування ним
(зберігання, захист
тощо).
© Вивчаємо інформатику
teach-inf.at.ua
10
(11)

13.

Розділ 1
§5
Інструменти розробки сайтів
10
(11)
Розглянемо основні особливості деяких популярних
вільних СКВ.
Moodle (англ.
Modular
Object-Oriented
Dynamic
Learning
Environment —
модульне
об’єктноорієнтоване
динамічне
навчальне середовище) —
платформа для створення
різноманітних навчальних
ресурсів.
© Вивчаємо інформатику
teach-inf.at.ua

14.

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

15.

Розділ 1
§5
Інструменти розробки сайтів
Moodle дозволяє вчителям
організувати спільну діяльність:
і
учням
10
(11)
ефективно
для учнів
для вчителів
цілодобовий доступ до
навчальних матеріалів
різних типів, перегляд
результатів тестування,
спілкування (чат, форум,
семінар та ін.)
можливість розробляти
дистанційні курси,
розміщувати та оперативно
змінювати навчальні
матеріали, слідкувати за
діяльністю кожного учня
тощо.
© Вивчаємо інформатику
teach-inf.at.ua

16.

Розділ 1
§5
Інструменти розробки сайтів
10
(11)
СКВ
MediaWiki
розроблено
спеціально для Вікіпедії, проте вона
використовується
на
багатьох
сайтах, які працюють за технологією
«вікі».
На цій платформі побудовано
сайт самого проекту MediaWiki
і
https://www.mediawiki.org/wiki/MediaWiki
© Вивчаємо інформатику
teach-inf.at.ua

17.

Розділ 1
§5
Інструменти розробки сайтів
10
(11)
Вікі-сайт
дозволяє
користувачам
довільно
змінювати зміст сторінок під час їх перегляду у
вікні браузера.
Угорі кожної сторінки Вікіпедії й біля кожного
підзаголовка є посилання Редагувати або ред.. Якщо
його
клацнути,
то
сторінка
перейде
в
режим
редагування. Після цього слід внести виправлення й
клацнути кнопку Опублікувати зміни.
© Вивчаємо інформатику
teach-inf.at.ua

18.

Розділ 1
§5
Інструменти розробки сайтів
10
(11)
Універсальна
СКВ
Joomla!
дозволяє
створювати
та
підтримувати
найрізноманітніші
сайти:
від
сайтів-візитівок
до
великих
корпоративних
сайтів,
інтернет-магазинів,
інтернетпорталів тощо.
Така гнучкість досягається завдяки великій кількості
вибіркових модулів, які може використати розробник
сайта.
© Вивчаємо інформатику
teach-inf.at.ua

19.

Розділ 1
§5
Створення веб-сторінки мовою HTML
10
(11)
Розглянемо процес створення
веб-сторінок
з
використанням
текстового редактора Notepad++.
notepad-plus-plus.org
За замовчуванням текст, що вводиться в редакторі,
кодується з використанням кодової таблиці Юнікод.
© Вивчаємо інформатику
teach-inf.at.ua

20.

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

21.

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

22.

Розділ 1
§5
Створення веб-сторінки мовою HTML
10
(11)
Наведену на малюнку структуру коду рекомендується
використовувати
в
усіх
веб-сторінках,
які
ви
створюватимете.
© Вивчаємо інформатику
teach-inf.at.ua

23.

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

24.

Розділ 1
§5
Домашнє завдання
Запланувати пізнавальнодослідницьку діяльність з
питань налаштування
інструментальних
засобів для веб-розробки у
щоденнику самоосвіти.
© Вивчаємо інформатику
teach-inf.at.ua
10
(11)

25.

Розділ 1
§5
Працюємо за комп’ютером
10
(11)
Використовуючи мережу
Інтернет, з’ясуйте як
налаштувати
інструментальні засоби
для веб-розробки.
© Вивчаємо інформатику
teach-inf.at.ua

26.

Дякую за увагу!
10
(11)
Урок 5
За навчальною програмою 2018 року