Для кого цей урок

 

Цей урок створений як готове рішення «взяв і провів», без складної підготовки та додаткових пояснень.

 

Для вчителів інформатики

●     підходить для школи, гуртків та онлайн-занять

●     не потребує глибоких знань HTML

●     усі завдання покрокові та зрозумілі

●     можна провести навіть без попереднього досвіду роботи з Edublocks

 

Для дітей без досвіду програмування

●     не потрібно знати код

●     формат «як у Scratch» — збираємо сайт з блоків

●     швидкий результат уже на першому уроці

●     підвищує мотивацію та впевненість у собі

 

Формат проведення

●     підходить для онлайн та офлайн занять

●     працює у звичайному браузері

●     реєстрація не потрібна

 

Тривалість уроку

●     45 хвилин

●     оптимально вкладається в один навчальний урок           

Результат уроку

 

Після проведення цього уроку кожен учень отримує готовий односторінковий сайт, створений власноруч.

 

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

 

Що є на сайті після уроку:

●     заголовок (назва сайту)

●     текстовий блок із власним змістом

●     зображення

●     кнопка або посилання

 

Сайт створюється у середовищі Edublocks, у форматі «збірки з блоків», що дозволяє дітям легко зрозуміти логіку побудови вебсторінки без вивчення складного коду.

 

На скріні нижче показано приклад готового сайту, який учень може створити вже за одне заняття.

 

 

 

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

 

Педагогічна цінність: дитина отримує перший успішний досвід у веброзробці, що підвищує мотивацію до подальшого вивчення ІТ.

 

Назва уроку: Перший сайт за 1 заняття

Для кого: учні 5–7 класів 

Тривалість: 45 хвилин

Формат: онлайн або офлайн

Інструмент: Edublocks (працюємо без реєстрації)

 

Мета уроку

●     Показати, що сайт можна створити швидко і просто

●     Ознайомити з логікою будови сайту

●     Дати учням відчуття успіху: "Я — айтішник, я зробив сайт"

 

Очікуваний результат Кожен учень має:

●     простий односторінковий сайт

●     заголовок, текст, картинку, кнопку

●     розуміння: з чого складається сайт

 

Структура уроку

 

1. Вступ — мотивація (5 хв)

 

Слова вчителя:

«А як ви думаєте, за скільки часу можна зробити сайт? За день? За тиждень? А що, якщо я скажу — за один урок?»

 

Коротка розмова:

●     Де ми бачимо сайти щодня?

●     Для чого людям сайти?

 

Меседж уроку:

«Сьогодні ви створите свій перший справжній сайт. Не гру, не презентацію — сайт!»

 

2. Знайомство з Edublocks (5 хв)

 

Слова вчителя:

«Edublocks — це як Scratch, але для сайтів. Ми не пишемо код вручну

— ми збираємо сайт з блоків»

 

Дії:

1.      Відкрити Edublocks

2.      Показати інтерфейс:

○ поле для сайту

○ блоки (заголовок, текст, картинка)

 

Акцент:

●     реєстрація не потрібна

●     усе працює прямо в браузері

 

Дія 1. Відкрити Edublocks 1.      Перейти за посиланням https://edublocks.org/ 2.      Натиснути синю кнопку Start Coding 3.      На наступному кроці натиснути на кнопку HTML 4.      У наступному вікні ввести імʼя index.html та натиснути на кнопку Create
Дія 2. Показати інтерфейс 1    - тут команди заголовка і тексту 2    - тут команда для зображення 3    - тут команда для кнопки 4    - сюди перетягуємо блоки 5    - тут відображається сайт

3. Практика 1.  Заголовок сайту (10 хв)

 

Завдання: створити назву сайту

 

Слова вчителя:

«У кожного сайту є обличчя — це заголовок. Якщо заголовок нудний, сайт не читають»

 

Кроки для учнів:

1. Додати блок Заголовок 2. Написати назву (приклади): ○ «Мій перший сайт»

○ «3 факти про мене»

○ «Мій улюблений герой»

 

Міні-чек:

●     текст видно?

●     він великий?

 

Крок 1. Додати блок Заголовок
Крок 2. Написати назву
Результат

 

4. Практика 2. Текст (10 хв)

 

Слова вчителя:

«Сайт без тексту — як книга без слів»

 

Завдання: Додати текстовий блок із 3–4 реченнями

 

Підказки для дітей:

●     Про себе

●     Про улюблену гру

●     Про хобі

 

Критерій:

●     текст читається

●     є відступи

 

Крок 1. Додати текстовий блок
Крок 2. Написати текст
Результат

 

5. Практика 3. Картинка (10 хв)

 

Слова вчителя:

«Картинки роблять сайт живим»

 

Кроки:

1.      Додати блок Картинка

2.      Вставити посилання

3.      Змінити розмір

 

Міні-обговорення:

● Чому картинка має підходити до тексту?

 

Крок 1. Додати блок Картинка
Крок 2. Вставити посилання на зображення
Крок 3. Змінити розмір
Результат

 

6. Практика 4. Кнопка (5–10 хв)

 

Слова вчителя:

«Кнопка — це те, що змушує сайт діяти»

 

Завдання:

●     Додати кнопку

 

Текст кнопки:

●     «Дізнатись більше»

●     «Перейти»

 

Крок 1. Додати блок Кнопка
Крок 2. Написати текст кнопки
Результат

 

7. Міні-презентація сайтів (5 хв)

 

Слова вчителя:

«Сьогодні ви не просто виконували завдання. Ви стали вебтворцями та створили власні сайти»

 

Як проводимо:

● 2–3 учні (або за бажанням) показують свої сайти ● Учень коротко розповідає:

○ про що сайт

○ що було найцікавіше робити

 

Фраза для підтримки:

«У кожного сайт вийшов унікальний — як і його автор»

8. Kahoot «Так чи ні?» (5–7 хв)

 

Слова вчителя:

«А тепер перевіримо, хто сьогодні був найуважнішим вебтворцем.

Граємо у Kahoot — тільки Так або Ні»

 

Дії для вчителя:

1.      Перейти за посиланням на кахут (для вчителя): https://create.kahoot.it/details/5eb4c108-b0d9-49fd-8ff3-286b11b47a3 7?drawer=

2.      Натиснути на синю кнопку Провести наживо

 

3.      Натиснути на кнопку Продовжити без острова

 

4.      Натиснути на кнопку Почати

 

5.      Повідомити учням код гри або натиснути на сам код (тоді він скопіюється) і надіслати учням посилання.

 

6.      Після того, як вісі учні приєднаються, натиснути на кнопку Почати

 

Дії для учнів:

1.      Зайти на сайт Kahoot! за посиланням, яке скине вчитель або зайти на сайт за посиланням https://kahoot.it/ і ввести код, який надасть вчитель

 

2.      Ввести свій нікнейм і натиснути кнопку Поїхали!

 

 

Фінальна фраза уроку

 

Слова вчителя:

«Сьогодні ви довели, що створювати сайти — це не страшно, а цікаво.

І це тільки початок»