Домашнє завдання. Підготуватися до контрольної роботи.

Презентація результатів проекту

Публічний захист із доповіддю і демонструванням розробленого сайта

Зразок плану виступу:

Ø Я працював над проектом...

Ø Проблемою мого проекту є...

Ø Мета мого проекту...

Ø Основні завдання проекту...

Ø Я розробив сайт, використовуючи такі технології і методи...

Ø Особливість дизайну мого сайта...

Ø Мій сайт розроблено для...

Ø Я використовував такі анімаційні ефекти...

Ø У розробці сайта використовувалися такі мультимедіа...

Ø Для оптимізації та просування мого веб-сайта було зроблено...

Оцінювання результатів виконання проекту

В оцінюванні результатів проектної діяльності беруть участь однокласники, вчитель та сам розробник проекту. Вони разом заповнюють оцінювальний лист рейтингової оцінки учня за творчий проект.

Домашнє завдання. Зробити доступними результати проекту для широкого кола користувачів Інтернету.

Домашнє завдання. Продовжити виконання проекту. 

Практична робота «Оцінка сайту. Просування сайту»

Послідовність виконання роботи

Проходження курсу «Основи цифрового маркетингу» в системі Google Digital Workshop (https://learndigital.withgoogle.com/digitalworkshop-ua/course/digital-marketing)

Домашнє завдання. Продовжити пізнавально-дослідницьку діяльність з питань просування сайту.

Домашнє завдання. Написати есе «Правила ергономічного розміщення відомостей на веб-сторінці». Розмістити матеріал у соціальній мережі. Проаналізувати коментарі та поради.

Практична робота «Створення та налагодження інтерактивної веб-сторінки з використанням форм та веб-програмування»

Послідовність виконання роботи

Робота з інструкційними картками.

Контрольні питання:

1. Що таке форма в HTML-документі?

2.    В яких випадках використовуються форми?

3.    Скільки форм можна розмістити на одній сторінці?

4.    Чи можуть форми бути вкладеними?

5.    Який тег використовують для задання форми?

6.    Назвіть відомі вам атрибути тега форми.

7.    Перерахуйте відомі вам елементи управління, які можуть створювати форму.

8.    Який тег використовується для створення на сторінці будь-якого елемента?

9.    Для чого елементу присвоюється ім’я? Чи можливий опис і використання елемента без нього?

10. Які елементи управління відносяться до текстових полів? Перерахуйте їх назви.

11. Якими атрибутами можна керувати параметрами текстового поля?

12. В яких випадках використовуються елементи-перемикачі?

13. Вкажіть синтаксис опису перемикачів в веб-документах?

14. Які типи кнопок використовують в формах? Які при цьому значення приймає атрибут type ?

15. Для чого в формі потрібні прапорці? Які параметри має прапорець?  Вкажіть синтаксис опису даного елемента.

16. Чим відрізняються такі елементи як прапорець і перемикач?

17. Для чого в формі використовують об’єднання елементів у групи? Які теги при цьому застосовують?

18. Поясніть структуру веб-документа, що описує створення групи елементів управління.

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

Корисні посилання: Перевірка форми на стороні клієнта - MDN (для зручності здійсніть онлайн-переклад веб-сторінок на українську мову)

Практична робота

Учитель організовує дослідницьку діяльність, допомагає учням визначитися з формою роботи:

Ø буду працювати самостійно;

Ø буду працювати в парі;

Ø буду працювати в групі.

Дослідницькі питання:

Ø Чи є потреба у тестуванні програмного забезпечення?

Ø Як здійснити тестування програмного забезпечення?

Ø У яких випадках використовують термін «валідація»?

Ø Чим відрізняються процеси верифікації і валідації?

Ø Як створити й застосувати правила валідації даних, що вводяться у форму?

Домашнє завдання. Продовжити пізнавально-дослідницьку діяльність з питань створення форм.

Переглянути відео: Форми в html_Основи веб-розробки

Корисні посилання: Навчальні матеріали по роботі з формами - MDN, Вступ до роботи з формами - MDN (для зручності здійсніть онлайн-переклад веб-сторінок на українську мову)

Папка матеріалів для практичної роботи: initial-version

Практична робота

Послідовність виконання роботи

Розробіть такі варіанти веб-сторінок із формами

1.  Сторінка з формою, яка містить інформацію про погоду цього дня. Створіть можливість для надсилання форми за електронною адресою.

2.  Уявіть, що ви відпочиваєте в дитячому таборі, і ваші батьки хочуть знати про ваш стан здоров'я, про те, як ви харчуєтеся та інше; придумайте відповідні поля форми та організуйте її надсилання за електронною адресою.

3.  Уявіть, що ви замовляєте піцу або іншу страву через Інтернет; придумайте форму для замовлення і організуйте її надсилання за електронною адресою.

4.  Розробіть форму для надсилання інформації про книжку до уявної електронної бібліотеки.

5.  Розробіть форму для надсилання інформації про товар, який можна придбати через уявний електронний магазин.

6.  Розробіть форму для виконання тесту з будь-якого предмета.

7.  Розробіть форму для надсилання інформації про учня для отримання атестата

8.  Розробіть форму для надсилання інформації, що характеризує роботу учня протягом літньої практики.

9.  Придумайте свій варіант використання форм.

Домашнє завдання. Запланувати у щоденнику самоосвіти пізнавально-дослідницьку діяльність з питань питань створення форм.

Переглянути відео: Як працює веб _ Основи веб-розробки

Корисні посилання: Стаття на вікі про веб-сервери, Статичні та динамічні сайти - MDN (для зручності здійсніть онлайн-переклад веб-сторінки на українську мову)

Практична робота

Послідовність виконання роботи

Учитель організовує дослідницьку діяльність, допомагає учням визначитися з формою роботи:

Ø буду працювати самостійно;

Ø буду працювати в парі;

Ø буду працювати в групі.

Учитель створює умови для визначення і обговорення питань, які стануть основою для дослідницької діяльності учнів.

Дослідницькі питання:

Ø Які існують сервери? Для чого вони потрібні?

Ø Що являють собою клієнт-серверні технології?

Ø Яка інформація про взаємодію «клієнт — сервер» потрібна для створення власного сайта?

Домашнє завдання. Запланувати пізнавально-дослідницьку діяльність з питань взаємодії «клієнт‑сервер» у щоденнику самоосвіти.

Практична робота №4 «Розміщення сайту на сервері»

Послідовність виконання роботи

1. Зареєструватися на безкоштовному хостингу (наприклад, zzz.com.ua тощо). На хостингу отримати доменне ім’я для власного сайту. Доменне ім’я повинно містити власне прізвище записане латиницею.

2. Створити мінімум три сторінки (з теми, що вас цікавить), використовуючи відповідний веб-інтерфейс. Проглянути власний сайт через браузер, використовуючи доменне ім’я власного сайту.

3. Створити електронний лист на тему «Мій сайт» з текстом, що містить ПІБ виконавця, клас, URL власного сайту. Надіслати лист на адресу вчителя.

4. Додайте інформацію про автора проекту.

5. Використовуючи файловий менеджер завантажте кілька файлів на сайт.

6. Перевірте роботу сайту через браузер, використовуючи домене ім’я власного сайту.

7.    Закрийте всі відкриті вікна.

8.    Повідомте вчителя про завершення роботи.

Контрольні питання:

1.   Назвіть основні етапи створення сайту? Охарактеризуйте їх.

2.    Назвіть найбільш поширені структури (схеми) сайтів.

3.    Які особливості створення сайтів за допомогою WYSIWYG-редакторів?

4.    Що розуміють під поняттям «хостинг»?

5.    У чому полягає особливість створення сайтів з використанням web-програмування?

6.    Яке програмне забезпечення використовується для створення сайту?

7. З якою метою здійснюється реєстрація сайту у пошукових системах та каталогах?

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

Посилання на безкоштовний хостинг: https://www.zzz.com.ua/uk

Практична робота «Вибір доменного ім’я та хостингу для власного сайта»

Послідовність виконання роботи

1. Вибір доменного ім’я для сайта, що розробляється учнем

2. Аналіз переваг і недоліків різних видів хостингу

3. Дослідження вибору виду хостингу розробниками сайтів обраної для проекту тематики

4. Вибір виду хостингу для власного сайта

Домашнє завдання. Запланувати у щоденнику самоосвіти пізнавально-дослідницьку діяльність з питань веб-програмування.

Переглянути відео: 1. Вступ до JavaScript _ Основи веб-розробки та 2. Базовий синтаксис мови JavaScript _ Основи веб-розробки

Корисні посилання: initial-version

Практична робота «Дослідження сайтів з інтерактивними сторінками»

Послідовність виконання роботи

1. Перегляд сайтів з інтерактивними сторінками

2. Визначення і оцінка якості інтерактивних компонентів

3. Формування банку ідей застосування інтерактивних компонентів для власного сайта.

Домашнє завдання. Запланувати у щоденнику самоосвіти пізнавально-дослідницьку діяльність з питань веб-програмування.

Домашнє завдання. Розповісти у соціальних мережах про досягнення на уроках інформатики.

Запланувати у щоденнику самоосвіти пізнавально-дослідницьку діяльність з питань графіки та мультимедіа для веб-середовища.

Практична робота «Застосування гіпертекстових, графічних, анімаційних та мультимедійних елементів на веб-сторінках»

Послідовність виконання роботи

1. Проаналізувати аналогічні сайти, що підходять за тематикою проекту, на наявність мультимедіа

2. Визначити, які мультимедіа необхідні для розробки обраного сайта

3. Розробити план виконання практичної роботи, у якому вказати:

а)  необхідність додаткових досліджень;

б)  отримання певних вмінь і навичок;

в)  терміни виконання роботи

4. Здійснити розміщення мультимедіа на веб-сторінках

5. Провести контроль і самооцінку зробленої роботи

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

Запланувати у щоденнику самоосвіти пізнавально-дослідницьку діяльність з питань створення мультимедіа.

Практична робота «Застосування гіпертекстових, графічних, анімаційних та мультимедійних елементів на веб-сторінках»

Послідовність виконання роботи

1. Проаналізувати аналогічні сайти, що підходять за тематикою проекту, на наявність мультимедіа

2. Визначити, які мультимедіа необхідні для розробки обраного сайта

3. Розробити план виконання практичної роботи, у якому вказати:

а)  необхідність додаткових досліджень;

б)  отримання певних вмінь і навичок;

в)  терміни виконання роботи

4. Здійснити розміщення мультимедіа на веб-сторінках

5. Провести контроль і самооцінку зробленої роботи

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

Запланувати у щоденнику самоосвіти пізнавально-дослідницьку діяльність з питань створення мультимедіа.

Домашнє завдання

Розповісти у соціальних мережах про свій досвід застосування анімаційних ефектів. Проаналізувати коментарі та поради друзів.

Запланувати у щоденнику самоосвіти пізнавально-дослідницьку діяльність з питань створення анімації.

5.    Вибрати фоновий малюнок для сайта, що розробляється учнем

6. Додати фоновий малюнок на веб-сторінку

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

  5. Приступити до створення графіки для сайта

6. Здійснити контроль і самооцінку виконаної роботи

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

Практична робота «Створення веб-сторінок»

Корисні посилання: initial-page

Переглянути відео: Каскадність та специфічність. Використання консолі для стилів

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

Практична робота «Виконання адаптивної верстки»

Корисні посилання: initial-page

Переглянути відео: Продовження адаптивного дизайну

Послідовність виконання роботи

1.    Визначити, з яким саме браузером має працювати сайт

2.    Виконати дослідження статистики відвідування сайтів з подібною тематикою. Використання сервісу Google Analytics

3.    Тестування сайтів на кросбраузерність. Пошук способів тестування. Використання готових утилітів та онлайн-сервісів

4.    Заповнити таблицю

|   Сайти      |    Оцінка кросбраузерності    |

|                   |                                                   |

Домашнє завдання. Написати есе «Життя без кросбраузерності».

Практична робота «Виконання адаптивної верстки»

Корисні посилання: initial-page

Переглянути відео: Адаптивний дизайн _ Основи веб-розробки

Послідовність виконання роботи

1.    Визначення способу виконання адаптивної верстки

2.    Здійснення адаптивної верстки

3.    Контроль якості виконаної роботи

Домашнє завдання. Опрацювати вивчений матеріал.

Практична робота «Дослідження властивостей стилів»

Корисні посилання: initial-page

Переглянути відео: Винесення стилів в окремий блок. Поняття та базовий приклад селекторів_Основи

                                    Блочні та лінійні (рядкові) елементи _ Основи веб-розробки

 Послідовність виконання роботи

1.    Вибір способу верстки веб-сторінок

2.    Виконання верстки веб-сторінок

3.    Контроль та аналіз виконаної роботи

4.    Визначення пробілу знань для виконання веб-сторінок

Домашнє завдання. Опрацювати вивчений матеріал.

Практична робота «Дослідження властивостей стилів»

Корисні посилання: Прості селектори, Синтаксис CSS, Як працює CSS

Переглянути відео: Поняття стилів _ Основи веб-розробки

Домашнє завдання. Опрацювати вивчений матеріал.

Домашнє завдання. Вивчити теги і створення документу HTML

Домашнє завдання. Організувати обговорення розробленого макету інформаційної структури сайта в соціальних мережах. Проаналізувати поради і коментарі друзів.

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

Послідовність виконання роботи

Використовуючи мережу Інтернет, з’ясуйте як налаштувати інструментальні засоби для веб-розробки.

Домашнє завдання. Запланувати пізнавально-дослідницьку діяльність з питань налаштування інструментальних засобів для веб-розробки у щоденнику самоосвіти.

Домашнє завдання. Написати есе «Які бувають інформаційні структури веб-сайтів».

Домашнє завдання. Завести «Щоденник особистих вражень від вивчення інформатики». Зробити пост у соціальних мережах про тренди веб-дизайну.

Домашнє завдання. Створити умови для обговорення теми проекту у соціальних мережах. Зібрати і проаналізувати поради, рекомендації та критичні зауваження. Виконати коригування завдань проекту. 

Домашнє завдання. Проаналізувати, якими типами сайтів ви найчастіше користуєтеся. Завести щоденник самоосвіти.