10 клас

Вибірковий модуль "Веб технології"

Завантажити підручник
Зміст навчального матеріалу
Відеопояснення виконання практичних робіт
Програмне забезпечення
https://sites.google.com/view/inf10/
Інтерактивне навчання
_________________________________________________________________________



УРОК 1. Основні тренди у вебдизайні

1. Переглянути презентацію
https://drive.google.com/file/d/1Xm6M9LV6NCHtghSMlLoPZ_JpgWdlpYX1/view
2. Приклад анімованої візуалізації  https://he.net/3d-map/
Домашнє завдання
1. Запишіть опорний конспект.
2. Наведіть приклади використання штучного інтелекту в сучасних онлайн-платформах.
3. Виконайте інтерактивні вправи:
https://learningapps.org/view7657063
https://learningapps.org/view21246349
_______________________________________________________________________

УРОК 2. Види та типи сайтів. Цільова аудиторія
Працюємо з підручником
2. Ознайомитися з класифікацією сайтів (підручник, ст. 13).
3. Створити у WPS Office схему класифікації сайтів.
Домашнє завдання
1. Запишіть опорний конспект.
2. Наведіть приклади  перспективних способів збирання інформації про цільову аудиторію?
__________________________________________________________________________

УРОК 3. Інформаційна структура сайту.
Працюємо з підручником
1. Переглянути презентацію https://drive.google.com/file/d/10mreMoZtcVge3tNBlr3XPkjoF-j7bnSO/view
2. Ознайомитися зі структурою комерційного сайту (підручник, ст. 23).
3. Дайте характеристику сайтів Х - mind та Draw.io
4. Створити у WPS Office структуру сайту - візитки. 
Домашнє завдання
1. Запишіть опорний конспект.
2. Поміркуйте, яка структура характерна для будь-якого сайту. Опишіть цю структуру.
3. Виконайте інтерактивну вправу
https://learningapps.org/view23474212
___________________________________________________________________________

УРОК 4. Практична робота. Створення інформаційної структури сайту. 
2. Ознайомитися зі структурою комерційного сайту (підручник, ст. 23).
3. Працюйте із сайтами Х - mind або  Draw.io 
Домашнє завдання
1. Виконайте практичну роботу. Надішліть знімок з екрана в Classroom
__________________________________________________________________________

УРОК 5. Технології розробки сайтів. Інструменти веброзробника
Працюємо з підручником "Веб технології", 10 клас, параграф 1.4 (ст. 29).
2. Знайдіть в Інтернеті відомості про інструменти веброзробника, логотипи яких наведено на рис. 1.30 (ст. 32) у підручнику.
3. Ознайомтеся із найпопулярнішими редакторами кодів.
Домашнє завдання
1. Запишіть опорний конспект.
2. Поміркуйте! У чому полягає різниця між роботою вебдизайнера і веброзробника?
3. Виконайте інтерактивну вправу:
https://learningapps.org/view31699646
https://learningapps.org/view30276516?authuser=0
__________________________________________________________________________

УРОК 6.  Мова гіпертекстової розмітки
1. Переглянути презентацію 
https://docs.google.com/presentation/d/1Uzg1kqGbPJzCSRkTC57mCObTi1sJmQFU/edit?usp=sharing&ouid=105877202724651622658&rtpof=true&sd=true
2. Переглянути запропоновані відео:
WWW виповнилося 25 років https://youtu.be/o6cM2UYilNg?si=Bcz5eh6H6A6QWdSV
Мова гіпертекстової розмітки  https://youtu.be/t3TuI3dYYLg?si=C5jcFXxf53vDpLET
Тім Бернерс-Лі: Світова мережа наступного покоління
https://youtu.be/E_84UNQpVmI?si=eYADbUVZzjOWXScE
3. Завдання для самостійного виконання (підручник, ст. 41). Виконати в Notepad++
Домашнє завдання
1. Запишіть опорний конспект.
2. Знайдіть в інтернеті відомості про Тіма Бернерс-Лі, зробіть коротке повідомлення.
3. Виконайте інтерактивну вправу: https://learningapps.org/view28088471
________________________________________________________________________

УРОК 7.  Каскадні таблиці стилів 
1. Переглянути презентацію
https://docs.google.com/presentation/d/1cGeUuy20RJqiiD5PKpDmjfCg2S5fo1TB/edit?usp=sharing&ouid=110873064889365226992&rtpof=true&sd=true 
2. Переглянути запропоноване відео:
Каскадні таблиці стилів  https://youtu.be/_Th3LSw0kSg?feature=shared
3. Дайте відповіді на запитання для перевірки знань (ст. 49).
Домашнє завдання
1. Запишіть опорний конспект.
2. Виконати завдання для самостійного виконання (ст. 50).
3. Виконайте інтерактивні вправи: https://learningapps.org/view32651395
https://learningapps.org/view24248629
https://learningapps.org/view23561845
_________________________________________________________________________

УРОК 8.  Проєктування та верстка вебсторінок
1. Переглянути презентацію https://docs.google.com/presentation/d/1vTU5f_VcTCv-eOq6wlBlRsTpvb57HFfj/edit?usp=sharing&ouid=105877202724651622658&rtpof=true&sd=true
2. Переглянути запропоноване відео:
Проєктування та верстка вебсторінок  https://youtu.be/6EMfwsh1440?feature=shared
3. Дайте відповіді на запитання для перевірки знань (ст. 61).
Домашнє завдання
1. Запишіть опорний конспект.
2. Виконати завдання для самостійного виконання (ст. 61).
3. Виконайте інтерактивні вправи: https://learningapps.org/view32799243
https://learningapps.org/view8324592
__________________________________________________________________________

УРОК 9.  Адаптивна верстка
1. Переглянути презентацію https://docs.google.com/presentation/d/1ZH_zUsRjpn-tiWu08ALQFzi_oRVDu_4a/edit?usp=sharing&ouid=105877202724651622658&rtpof=true&sd=true
2. Переглянути запропоноване відео:
Адаптивна верстка https://youtu.be/mPXgoVcXvpg?feature=shared
3. Дайте відповіді на запитання для перевірки знань (ст. 71).
Домашнє завдання
1. Запишіть опорний конспект.
2. Виконати завдання для самостійного виконання (ст. 71).
3. Виконайте інтерактивну вправу: https://learningapps.org/view23671322
5. Спробуйте свої сили в грі Flexbox Froggy, де потрібно допомагати жабеняті Фрогі та його друзям написанням css-коду (https://flexboxfroggy.com/#uk). Пройдіть перші шість рівнів. Скриншот результату надішліть в Classroom. 
__________________________________________________________________________

УРОК 10.  Кросбраузерність
1. Переглянути презентацію
https://docs.google.com/presentation/d/1WszbMgOD7mZAYsf7VdFueuAgF_t3771K/edit?usp=sharing&ouid=105877202724651622658&rtpof=true&sd=true
2. Переглянути запропоноване відео:
3. Інструменти CSS: скинути CSS
Домашнє завдання
1. Запишіть опорний конспект.
2. Дайте відповіді на запитання для перевірки знань (ст. 79).
3. Виконайте інтерактивну вправу: https://learningapps.org/view7350438
5. Спробуйте свої сили в грі Flexbox Froggy, де потрібно допомагати жабеняті Фрогі та його друзям написанням css-коду (https://flexboxfroggy.com/#uk). Пройдіть перші шість рівнів. Скриншот результату надішліть в Classroom. 
____________________________________________________________________________

УРОК 11.  Практична робота №10. Створення та наповнення вебсторінок
1. Повторіть параграфи 2.1- 2.5.
2. Виконайте інтерактивні вправи (призначення тегів).
https://learningapps.org/view24870988
3. Виконайте практичне завдання, використовуючи інструкцію із сайту.
https://itinschool.com.ua/stvorennya-veb-storinky-zasobamy-movy-html/
4. Надішліть в Класрум  скриншот екрана монітора (або файл із сайтом).
______________________________________________________________________________

ТЕМАТИЧНЕ ОЦІНЮВАННЯ 
______________________________________________________________________________

УРОК 12.  Графіка для веб-середовища
1. Переглянути презентацію https://docs.google.com/presentation/d/1NcyJKPOLgvG4uK7DVuzUUJ-bAPYU1D5g/edit?usp=sharing&ouid=105877202724651622658&rtpof=true&sd=true
2. Переглянути запропоноване відео.
Графіка для веб-середовища https://youtu.be/erl2rkRE_pk?feature=shared
3. Дайте відповіді на запитання для перевірки знань (ст. 86).
Домашнє завдання
1. Запишіть опорний конспект.
2. Виконати завдання для самостійного виконання (ст. 86).
https://www.youtube.com/watch?v=drnc3W3JAyQ&authuser=0
3. Виконайте інтерактивну вправу: https://learningapps.org/view23682398
________________________________________________________________________________

УРОК 13.  Анімаційні ефекти
1. Переглянути презентацію 
3. Дайте відповіді на запитання для перевірки знань (ст. 86).
Домашнє завдання
1. Запишіть опорний конспект.
2. Виконати завдання практичної роботи (ст. 93).
https://youtu.be/1A_D8ImKW6k?feature=shared
3. Виконайте інтерактивну вправу: https://learningapps.org/view8799942
_______________________________________________________________________________

УРОК 14.  Мультимедіа на веб-сторінках
2. Переглянути запропоноване відео.
Мультимедіа https://youtu.be/W-n1CggKvvs?feature=shared
3. Ознайомитися із навчальними матеріалами https://dystosvita.org.ua/mod/page/view.php?id=1319
Домашнє завдання
1. Запишіть опорний конспект.
2. Дайте відповіді на запитання для перевірки знань (ст. 100).
3. Виконайте інтерактивні вправи: https://learningapps.org/view33567018
https://learningapps.org/view14736966

ДОДАТКОВО
Переглянути відео https://drive.google.com/drive/folders/16V5-v2GkJZZ0OD-M8MuohMpTmVmDSy5y
_______________________________________________________________________________

УРОК 15.  Застосування мультимедіа на веб-сторінках (Практичне заняття)
Працюємо з підручником "Веб технології", 10 клас, параграфи 3.1 - 3.3 (ст. 84-100).
1. Повторити параграфи 3.1- 3.3
2. Виконати тест https://naurok.com.ua/test/join?gamecode=6975934
3. Виконайте практичне завдання.
ВІДЕО-допомога виконання практичного завдання:
https://youtu.be/3sOiL0w8-Tk?feature=shared
ВІДЕО-допомога для виконання практичної роботи:
https://youtu.be/YYCRmU1yFtM?feature=shared

ДОДАТКОВО
Переглянути відео https://drive.google.com/drive/folders/16V5-v2GkJZZ0OD-M8MuohMpTmVmDSy5y
_______________________________________________________________________________
УРОК 16.  Практична робота №11. Застосування мультимедіа на веб-сторінках
1. Повторіть параграфи 3.1- 3.3.
2. Продовжуємо роботу над практичними завданнями та власним сайтом. 
ВІДЕО-допомога виконання практичного завдання:
https://youtu.be/3sOiL0w8-Tk?feature=shared
ВІДЕО-допомога для виконання практичної роботи:
https://youtu.be/YYCRmU1yFtM?feature=shared

ДОДАТКОВО
Виконайте практичне завдання, використовуючи інструкцію із сайту.
https://itinschool.com.ua/stvorennya-veb-storinky-zasobamy-movy-html/
Надішліть в Класрум  скриншот екрана монітора (або файл із сайтом).
______________________________________________________________________________

ТЕМАТИЧНЕ ОЦІНЮВАННЯ 
______________________________________________________________________________

УРОК 17.  Об'єктна модель документа
2. Переглянути запропоноване відео.
а) https://youtu.be/unBqzt32-lw?feature=shared (EdEra)
3. Дайте відповіді на запитання для перевірки знань (ст. 108).
4. Яка організація і чому запропонувала стандарт DOM?
Домашнє завдання
1. Запишіть опорний конспект.
2. Виконайте інтерактивні вправи: https://learningapps.org/view23684181
https://learningapps.org/view17727560?authuser=0
3. Додатково ознайомтеся з Онлайн-курсом «Основи веб-розробки».
У безкоштовному онлайн-курсі «Основи веб-розробки» ти ознайомишся з теоретичними та практичними аспектами фронтенд-розробки, навчишся створювати власні веб-сайти та адаптувати їх під власні потреби. 
Записатися на курс https://courses.ed-era.com/courses/course-v1:EDERA_BBF+WEB+2019/about
________________________________________________________________________________

УРОК 18.  Веб-програмування та інтерактивні сторінки 
Працюємо з підручником "Веб технології", 10 клас, параграф 4.2 (ст. 109).
1. Переглянути презентацію
https://docs.google.com/presentation/d/1szi-6X_YZOsIg6QYdFeLLhcE1o631N8E/edit?usp=sharing&ouid=105877202724651622658&rtpof=true&sd=true
2. Подивіться запропоноване відео  https://youtu.be/8sX0dHzuPVE?feature=shared
3. Дайте відповіді на запитання для перевірки знань (ст. 112)
Домашнє завдання
1. Запишіть опорний конспект.
2. Виконайте інтерактивні вправи: https://learningapps.org/view8483527
https://learningapps.org/view24496327
3. Виконати практичне завдання для самостійного виконання (ст. 115)
https://youtu.be/FhwYBiWovqA?feature=shared
_________________________________________________________________________________

3. Дайте відповіді на запитання для перевірки знань (ст. 120 (122)).
4. Знайдіть в інтернеті відомості про українських інтернет-провайдерів. Порівняйте вартість їхніх послуг. Результати подайте у вигляді інфографіки.
Домашнє завдання
1. Запишіть опорний конспект.
2. Виконайте інтерактивну вправу: https://learningapps.org/view23575907
Додатково
Free Website Hosting https://www.infinityfree.com/
__________________________________________________________________________________

УРОК 20.  П/Р Хостинг сайту. Розміщення сайту на сервері
Працюємо з підручником "Веб технології", 10 клас, параграф 4.3 (ст. 117).
1. Подивитися відео виконання практичної роботи.
https://www.youtube.com/watch?v=VL_wI54RQs8&authuser=0
2. Виконати практичну роботу, використовуючи сайти:
ho.ua проект успішно працює з серпня 2005 року  https://ho.ua/uk/?authuser=0
АБО
Free Website Hosting https://www.infinityfree.com/
Домашнє завдання
1. Знайдіть в Інтернеті відомості про українських хостинг-провайдерів.
Які із них можуть запропонувати безкоштовний хостинг для сайту.
__________________________________________________________________________________

3. Дайте відповіді на запитання для перевірки знань (ст. 132)
Домашнє завдання
1. Запишіть опорний конспект.
2. Виконайте інтерактивні вправи Кахут
Вправа 1. 
https://kahoot.it/challenge/05277784?challenge-id=f1b0ea7a-00f4-4f7d-b425-69d4891193a3_1713896039532
Вправа 2. 
https://kahoot.it/challenge/06484748?challenge-id=f1b0ea7a-00f4-4f7d-b425-69d4891193a3_1713896331614
__________________________________________________________________________________

УРОК 22. Взаємодія "клієнт - сервер"
2. Подивіться запропоноване відео https://youtu.be/6izSKqMmzXA?feature=shared
3. Дайте відповіді на запитання для перевірки знань (ст. 136)
Домашнє завдання
1. Запишіть опорний конспект.
2. Виконайте інтерактивні вправи
Клієнт-сервер https://learningapps.org/view23686790
Мережна взаємодія https://learningapps.org/view16759656
___________________________________________________________________________________

УРОК 23. Валідація сайту та збереження даних форм 
2. Подивіться запропоноване відео https://youtu.be/nbmYZaM_u2c?feature=shared
3. Дайте відповіді на запитання для перевірки знань (ст. 140)
Домашнє завдання
1. Запишіть опорний конспект.
2. Виконайте інтерактивні вправи.
Валідація https://learningapps.org/view23687216
Додатково! Пригадати "Основні тренди у веб-дизайні" https://learningapps.org/view28739877
__________________________________________________________________________________

УРОК 24. П/Р Створення та налагодення веб-сторінки (сайту на Webnode)/  
1. Повторити параграф 4.6 (ст. 137).
2. Створюємо сайт на Webmode   https://www.webnode.com/uk/
https://youtu.be/w1SXH_uBhOQ?feature=shared
АБО
Створюємо сайт на Onepage  https://onepage.io/uk?via=svidersky
___________________________________________________________________________________

УРОК 25. Прикладний програмний інтерфейс 
2. Подивіться запропоноване відео https://youtu.be/cX0A-4qtAwQ?feature=shared
3. Дайте відповіді на запитання для перевірки знань (ст. 150)
Домашнє завдання
1. Запишіть опорний конспект.
2. Виконайте інтерактивні вправи.
https://learningapps.org/view21268556?authuser=0
___________________________________________________________________________________

УРОК 26. Виконання індивідуального навчального проєкту. Тематичне оцінювання
1. Повторити параграфи 4.1- 4.7.
2. Пройти тестування на сайті "На урок"

Виконуємо індивідуальний навчальний проєкт.
Створюємо сайт на Webmode   https://www.webnode.com/uk/
https://youtu.be/w1SXH_uBhOQ?feature=shared
АБО
Створюємо сайт на Onepage  https://onepage.io/uk?via=svidersky
___________________________________________________________________________________

УРОК 27. Правила ергономічного розміщення відомостей на веб-сторінці
1. Подивіться запропоноване відео https://youtu.be/7bzlEcQEQXg?feature=shared
https://youtu.be/kfbBQIWuvn4?feature=shared
2. Дайте відповіді на запитання для перевірки знань (ст. 155)
Домашнє завдання
1. Запишіть опорний конспект.
2. Виконайте інтерактивні вправи.
https://learningapps.org/view15324620
___________________________________________________________________________________

УРОК 28. Пошукова оптимізація і просування веб-сайтів
1. Подивіться запропоноване відео https://youtu.be/qpyA_ZXf3O4?feature=shared&t=138
https://youtu.be/TbMfJWu5cXA?feature=shared
2. Дайте відповіді на запитання для перевірки знань (ст. 159)
Домашнє завдання
1. Запишіть опорний конспект.
2. Виконайте інтерактивні вправи.
https://learningapps.org/view23662506

___________________________________________________________________________________

УРОК 29. Оцінка сайту. Просування веб-сайтів
1. Подивіться запропоноване відео https://youtu.be/2DC5T-ChjDw?feature=shared
2. Дайте відповіді на запитання для перевірки знань (ст. 159)
Домашнє завдання
1. Запишіть опорний конспект.
2. Виконайте інтерактивні вправи.
https://learningapps.org/view33189903
https://learningapps.org/view33190057
___________________________________________________________________________________

УРОК 30.  Навчальний проєкт "Створення та наповнення сайту"
1. Подивіться запропоноване відео
"Створення сайту засобами системи керування вмістом веб-сайтів"
https://youtu.be/0-YteQHyETY?feature=shared
ПРАКТИЧНЕ ЗАВДАННЯ. Створення та наповнення сайтів
Створення сайту на Webmode.
АБО
Створюємо сайт на Onepage https://onepage.io/uk?via=svidersky
https://youtu.be/2DC5T-ChjDw?feature=shared
https://youtu.be/sAyZyQp3Us8?si=GiXGfQAnepdYjAiI

___________________________________________________________________________________

УРОК 31.  Навчальний проєкт "Створення та наповнення сайту"
1. Продовжуємо працювати над створенням і наповненням сторінок свого сайту.
2. Виконати завдання тестів із сайту "На урок"
https://naurok.com.ua/test/join?gamecode=4511107
https://naurok.com.ua/test/join?gamecode=6214412
3. Виконати інтерактивну вправу
___________________________________________________________________________________

УРОК 32. Презентація навчальних проєктів
1. Презентуємо власні сайти.


__________________________________________________________________________________

УРОК 33. Підведення підсумків.
1. Подивитися та оцінити сайт "Зроблено в Україні. Найуспішніші українські ігри"

2. Розробники Code Combat пропонують вчитися програмуванню, захоплюючи землі і перемагаючи ворогів в кращих традиціях RPG. Починати грати можна «з нуля», не маючи про програмування жодного уявлення. Користувач може вибрати мову програмування, яку хоче освоїти: Python або JavaScript. Рівні гри збудовані як хороший курс програмування з наростаючою складністю. Вам належить стати чарівником, який за допомогою програмного коду змінює навколишній світ. На кожному рівні перед гравцем ставиться певне завдання - наприклад, знайти гриб, який допоможе перемогти людожера, повести в бій солдат або вибратися з в'язниці. На початку все просто, ви пишете код і відразу бачите на екрані, як він буде виконуватися. Потім завдання стають складнішими, і вам доводиться думати все більше і більше. Гра має 80 безкоштовних рівнів і відкритий програмний код. Сотні гравців з різних країн доклали свій талант до того, щоб CodeCombat став краще. Саме завдяки цьому світ воїнів і магів виявився швидко переведений на різні мови.
Спробуйте!
https://codecombat.com/play?authuser=0
___________________________________________________________________________________
___________________________________________________________________________________

Відео http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_editor

HTML https://docs.google.com/document/d/1VyikGVBRt4ZhViofFIyNGDNbHD-bQVHGNjl2xYL167s/edit?usp=sharing

Бази даних


Обчислення у запитах
https://docs.google.com/document/d/1pKvhyTC3uH0hYB0xsnEbrmt9GQxz3EjJEKVqjhqdRHM/edit?usp=sharing

Для учнів 10 класу "Бази даних"

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


Пройти навчальне тестування
Виконати інтерактивну вправу
https://learningapps.org/view19541179?authuser=0
________________________________________________________________________________

Немає коментарів:

Дописати коментар

Підписатися на: Коментарі (Atom)