Цілі:
навчальна: сформувати поняття системи керування вмістом для веб-ресурсів; етапи створення веб-сайтів;
розвивальна: розвивати логічне мислення, пам’ять; формувати вміння узагальнювати;
виховна: виховувати інформаційну культуру, формування бережливого ставлення до обладнання комп’ютерного кабінету, виховання уміння працювати в групі; формування позитивного ставлення до навчання.
Тип уроку: Комбінований.
Обладнання та наочність: дошка, комп’ютери з підключенням до мережі Інтернет, підручник, навчальна презентація.
Програмне забезпечення: браузер, офісні програми.
Хід уроку
І. Організаційний етап
· привітання
· перевірка присутніх
· перевірка готовності учнів до уроку
ІІ. Актуалізація опорних знань
ІІІ. Мотивацій навчальної діяльності
IV. Вивчення нового матеріалу
Пояснення вчителя з елементами демонстрування презентації
(використовуються можливості локальної мережі кабінету або проектор)
Існують онлайн-системи конструювання сайтів, які одночасно з послугами з розробки веб-сайтів надають послуги безкоштовного хостингу. Такими є системи: Google Сайти, uCoz, Weebly та інші
У цих системах створення веб-сайту здійснюється у режимі онлайн одразу на сервері хостингу.
З 9-го класу ви знаєте, що розробка веб-сайтів складається з кількох етапів. Ці етапи подібні до етапів розв'язування задач із використанням комп'ютера. Згадаємо їх:
Постановка завдання. На цьому етапі визначається мета створення сайту, його основна тематика, здійснюється аналіз існуючих сайтів такої самої або схожої тематики.
У результаті розробник повинен знати:
· мету, з якою створюється сайт;
· тематику сайту, відмінності сайту від інших сайтів такої самої тематики;
· аудиторію потенційних відвідувачів сайту: вік, стать, коло інтересів тощо;
· перелік сервісів для розміщення на сайті: форум, чат, пошукова система, веб-каталог, електронна пошта та інше;
· перспективи розвитку сайту.
2. Визначення структури сайту. На цьому етапі важливо скласти перелік розділів сайту для формування системи навігації, список сторінок, визначити зв'язки між ними.
Кількість сторінок залежатиме від того інформаційного наповнення, яке планується на ньому розмістити. Результатом повинна стати мапа (карта) сайту — схема, що візуально відображає ієрархію сторінок сайту, зв'язки та переходи між ними, тобто внутрішню структуру сайту.
Наприклад, для сайту вашого класу, основними відвідувачами якого будуть учні класу та їхні батьки, мапа сайту може бути такою.
Розробка структури веб-сторінок сайту. Наступним завданням є визначення структури зовнішнього вигляду веб-сторінок. Оскільки для більшості сторінок сайту рекомендується застосовувати єдиний стиль оформлення, то потрібно визначити схему розташування на сторінках основних блоків: як буде розташовано, основний матеріал, анонси, меню, додаткові інформаційні та рекламні блоки, лічильник відвіду-вачів тощо
Як правило, на веб-сторінках передбачено розміщення:
верхнього блоку — заголовка, у якому містяться логотип і назва сайту;
блоку навігації (меню) для переходу до основних розділів сайту;
інформаційного блоку з основним матеріалом, що займає центральну частину сторінки;
нижнього блоку — підвалу, для розміщення контактних даних, повідомлення про авторські права тощо.
Якщо розробка сторінок сайту буде здійснюватись автоматизованими засобами, то структура веб-сторінок може бути запропонована в шаблоні сторінки.
Розробка дизайн-макета сторінок сайту. Дизайн-макет сторінок включає набір значень властивостей текстових і графічних об'єктів сторінки: кольорової гами сторінок, елементів графічного оздоблення, набору шрифтів та іншого.
Тобто визначає стиль сайту.
Дизайн-макет спирається на попередньо розроблену зовнішню структуру сторінок сайту. Важливо, щоб стиль відповідав призначенню сайту, особливостям основної аудиторії, на яку розраховано сайт, був орієнтований на надання найбільших зручностей для сприйняття основного матеріалу.
Дизайн-макет може бути розроблено дизайнером у графічному редакторі, намальовано на папері тощо. Якщо розробка сайту буде здійснюватись автоматизованими засобами, то варіанти дизайн-макета можуть бути запропоновані у темах сайту.
Створення та верстка сторінок сайту. Створюються сторінки, як правило, з використанням тегів мови HTML. У процесі створення відбувається верстка сторінок.
Верстка — це процес розміщення на сторінці під час її створення текстових, графічних та інших об'єктів так, щоб сторінка отримала вигляд згідно з розробленим дизайн-макетом. На цьому етапі здійснюється й інформаційне наповнення сайту.
Якщо на етапі постановки завдання передбачалося розміщення на сайті додаткових сервісів і засобів зворотного зв'язку, таких як системи пошуку, голосування, форуми та інше, то потрібен ще й етап програмування сайту.
При автоматизованому створенні сайту деякі з наведених засобів можуть бути вставлені з готових шаблонів.
Розміщення (публікація) сайту в Інтернеті. На даному етапі сайт отримує доменне ім'я та розміщується на сервері хостинг-провайдера.
Після цього сайт стає доступним для перегляду користувачами Інтернету, якщо він не має обмежень на доступ.
Робота з підручником: § 4.3
V. Засвоєння нових знань, формування вмінь
Робота за комп’ютером
1) Повторення правил безпечної поведінки за комп’ютером.
2) Інструктаж учителя.
3) Практична робота за комп’ютерами.
Підручник ст. 130-131
4) Вправи для очей.
VI. Підсумки уроку
Фронтальне опитування
1. Які етапи розробки кожному з веб-сайтів? Що відбувається на кожному з них?
2. Які етапи розробки сайту засобами онлайн-системи керування вмістом веб-сайтів?
3. Що таке внутрішня структура веб-сайту?
4. Які складові структури веб-сторінки?
5. Що таке верстка? Що є результатом верстки сайту?
Рефлексія
1. Під час уроку я
дізнався…
зрозумів…
навчився…
2. Найбільше мені сподобалося…
3. На уроках найкраще в мене виходило…
4. Я мав (-ла) труднощі з…
5. Я хотів би ще дізнатися про…
VІI. Домашнє завдання
Підручник § 4.3 ст. 122-123
Дати відповіді на запитання, задані у фронтальному опитуванні
VІІI. Оцінювання роботи учнів