Технології розробки сайтів. Інструменти розробки сайтів
За навчальною програмою 2018 року
Урок 5
10
(11)
Актуалізація опорних знань і життєвого досвіду
Розділ 1 § 5
Продовжіть речення:
Веб-сайти потрібні для...
Я знаю такі типи сайтів...
Про розробку веб-сайтів мені відомо...
Я маю такий досвід розробки веб-сайтів...
Я маю такий досвід розробки веб-сайтів...
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Технології розробки сайтів
Розділ 1 § 5
Інструментальні засоби для веб-розробки:
Мова розмітки гіпертексту HTML
Засоби редагування та конвертування для створення та інтерпретації Web-документів
Технології та мови програмування для розробки інтерактивних сторінок і мобільних додатків
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Технології розробки сайтів
Розділ 1 § 5
Сайт логічно розділений на дві великі частини:
частину, призначену для користувача
технічну частину
front-end
back-end
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Технології розробки сайтів
Розділ 1 § 5
Технічна частина (back-end) являє собою файли, що містять в собі вихідний код, написаний на різних мовах програмування.
Цей код обробляє дані, отримані від користувача, перевіряє ці дані і, в залежності від результатів, може виконувати різні дії. Технічна частина також відповідає за генерацію сторінок або різних їх ділянок.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Технології розробки сайтів
Розділ 1 § 5
Існує кілька популярних мов програмування, які використовуються для реалізації технічної частини:
PHP
Python
Ruby
С
Кожна має свої можливості й недоліки, варто лише зазначити, що PHP має найбільше поширення і підтримку.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Технології розробки сайтів
Розділ 1 § 5
Клієнтська частина сайта (front-end) — це все, що ми бачимо, все, що рухається у нас на екрані, і все, на що можна натиснути.
Клієнтську частину забезпечують дві обов’язкові складові:
мова розмітки веб-сторінок HTML
каскадні таблиці стилів
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Інструменти розробки сайтів
Розділ 1 § 5
Створювати веб-сторінки можна за допомогою звичайного текстового редактора або спеціального HTML-редактора.
Програми створення веб-сторінок
Текстові редактори
Текстові процесори
HTML-редактори
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Інструменти розробки сайтів
Розділ 1 § 5
Програми, що дають змогу спростити технологію створення сайта:
Dreamweaver — зручна програма, що дає змогу швидко створювати сайти.
Photoshop — дає змогу редагувати картинки і зберігати їх у форматі для web.
Notepad++ — технологічний редактор з підсвічуванням коду.
Filezilla — FTP-клієнт, який дає змогу швидко і без проблем завантажувати/вивантажувати документи на хостингу.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Інструменти розробки сайтів
Розділ 1 § 5
Ви навчилися конструювати сайти з використанням онлайн-систем. Тепер ознайомимося зі спеціальними програмами — системами керування вмістом (СКВ) (англ. CMS — Content Management System).
Система керування вмістом — це програмний комплекс, який забезпечує доступ користувача до ресурсів сайта (веб-сторінок, бази даних та ін.) та виконання над ними різних операцій (змінювання, видалення, додавання, захист тощо).
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Інструменти розробки сайтів
Розділ 1 § 5
Існують тисячі СКВ, що відрізняются одна від одної набором засобів, які отримують адміністратор сайта та користувачі. Прикладами СКВ є:
WordPress
Joomla
Drupal
Moodle та ін.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Інструменти розробки сайтів
Розділ 1 § 5
До основних функцій СКВ належать надання користувачу інформації у зручному для використання вигляді, засобів для індивідуальної та спільної роботи над вмістом і для керування ним (зберігання, захист тощо).
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Інструменти розробки сайтів
Розділ 1 § 5
Розглянемо основні особливості деяких популярних вільних СКВ.
Moodle (англ. Modular Object-Oriented Dynamic Learning Environment — модульне об’єктно-орієнтоване динамічне навчальне середовище) — платформа для створення різноманітних навчальних ресурсів.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Інструменти розробки сайтів
Розділ 1 § 5
Сайт проекту:
На сторінці:
https://moodle.net/sites/index.php?country=UA
Можна переглянути список українських ресурсів, які ґрунтуються на Moodle.
moodle.org
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Інструменти розробки сайтів
Розділ 1 § 5
Moodle дозволяє вчителям і учням ефективно організувати спільну діяльність:
для учнів
для вчителів
цілодобовий доступ до навчальних матеріалів різних типів, перегляд результатів тестування, спілкування (чат, форум, семінар та ін.)
можливість розробляти дистанційні курси, розміщувати та оперативно змінювати навчальні матеріали, слідкувати за діяльністю кожного учня тощо.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Інструменти розробки сайтів
Розділ 1 § 5
СКВ MediaWiki розроблено спеціально для Вікіпедії, проте вона використовується на багатьох сайтах, які працюють за технологією «вікі».
На цій платформі побудовано і сайт самого проекту MediaWiki
https://www.mediawiki.org/wiki/MediaWiki
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Інструменти розробки сайтів
Розділ 1 § 5
Угорі кожної сторінки Вікіпедії й біля кожного підзаголовка є посилання Редагувати або ред.. Якщо його клацнути, то сторінка перейде в режим редагування. Після цього слід внести виправлення й клацнути кнопку Опублікувати зміни.
Вікі-сайт дозволяє користувачам довільно змінювати зміст сторінок під час їх перегляду у вікні браузера.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Інструменти розробки сайтів
Розділ 1 § 5
Універсальна СКВ Joomla! дозволяє створювати та підтримувати найрізноманітніші сайти: від сайтів-візитівок до великих корпоративних сайтів, інтернет-магазинів, інтернет-порталів тощо.
Така гнучкість досягається завдяки великій кількості вибіркових модулів, які може використати розробник сайта.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Створення веб-сторінки мовою HTML
Розділ 1 § 5
Розглянемо процес створення веб-сторінок з використанням текстового редактора Notepad++.
За замовчуванням текст, що вводиться в редакторі, кодується з використанням кодової таблиці Юнікод.
notepad-plus-plus.org
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Створення веб-сторінки мовою HTML
Розділ 1 § 5
Після введення коду веб-сторінки та збереження документа у файлі, тип якого Hyper Text Markup Language file, елементи коду будуть подані різними кольорами залежно від їх типу:
текст
числа
теги
атрибути тегів
значення атрибутів
коментарі тощо.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Створення веб-сторінки мовою HTML
Розділ 1 § 5
Щоб побачити, як відображається веб-сторінка в браузері, можна виконати Виконати ⇒ Launch in Chrome. Після цього буде запущено на виконання браузер Google Chrome, у вікні якого відобразиться створена веб-сторінка.
1
2
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Створення веб-сторінки мовою HTML
Розділ 1 § 5
Наведену на малюнку структуру коду рекомендується використовувати в усіх веб-сторінках, які ви створюватимете.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Запитання для рефлексії
Розділ 1 § 5
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Домашнє завдання
Розділ 1 § 5
Запланувати пізнавально-дослідницьку діяльність з питань налаштування інструментальних
засобів для веб-розробки у щоденнику самоосвіти.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Працюємо за комп’ютером
Розділ 1 § 5
Використовуючи мережу Інтернет, з’ясуйте як налаштувати інструментальні засоби для веб-розробки.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Дякую за увагу!
За навчальною програмою 2018 року
Урок 5
10
(11)