ІНФОРМАТИКА 10 КЛАС (зима - весна 2022)

31.05.2022

Підсумковий урок

👉1.Вітаю! Сьогодні пригадаємо, що ми вивчали у курсі інформатики 10 класу.

💥(1) Інформаційні технології в суспільстві

(навчання в інтернеті, професії майбутнього, інтернет-маркетинг, штучний інтелект)

💥(2) Моделі та моделювання

(інфографіка, тест Тюрінга, 3D-моделювання)

💥(3) Системи керування базами даних

(Едгар Код, реляційні бази даних, ключі..)

💥(4)Інструменти вебдизайну

💥(5)Проєктування та верстка вебсторінок

💥(6) Графіка та мультимедіа на вебсторінках

💥(7)Вебпрограмування

👉2. Завдання:

обери одну або декілька тем і створи ребуси (всього має бути 6 шт.)

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

Надішли на пошту teacheritschool1@gmail.com фото ребусів 

_________________________________________

24.05.2022

Прикладний програмний інтерфейс

👉1.Вітаю! Сьогодні поговоримо про API - прикладний програмний інтерфейс.

👉2. Переглянь презентацію за покликанням

💥Виконай тест

_______________________________________

17.05.2022

Хостинг сайту

👉1.Вітаю! Сьогодні розглянемо хостинг сайту. До цього ми розглянули створення сайту, наповнення його. Тепер ми маємо все це розмістити у доступ. Цим і займається хостинг.

👉2. Переглянь презентацію:

💫Дай відповіді на питання за покликанням

________________________________________

10.05.2022

Перевірка сайту на валідацію

👉1.Вітаю! Сьогодні виконуємо практичне завдання, метою якого є: перевірити правильність написання  html- та css-коду за допомогою валідатора консорціуму Всесвітнього Павутиння.

👉2. Хід практичної роботи:

💥І. Перевірка правильності HTML-коду

1. Переходимо за адресою: validator.w3.org. Перед нами відкриється сторінка, на якій є 3 вкладки. На першій вкладці «Validate by URI» ви можете перевірити валідність сайту розміщеного в інтернет, на другий «Validate by File Upload» - завантажити файл з комп'ютера, і на третій «Validate by Direct Input» - вставити вміст файлу безпосередньо в форму для введення. (Рис.1, 2)

Рис.1. Головна сторінка валідатора W3C

2. Використовуємо другий спосіб – завантажимо файл з комп’ютера. Для цього обираємо вкладку «Validate by File Upload», та натискуємо команду «Оберіть файл» ., назва обраного файлу відображається у вікні 

Рис.2

3. Додатково налаштовуємо опції перевірки:

4. Визначаємо кодування: (рис.3.) та тип документу (рис.4 (можна обрати «визначати автоматично»)

Рис. 3

Рис. 4

5. Запускаємо на перевірку за допомогою команди «Check»

6. Проаналізуйте отримані попередження та помилки, після виправлення знову застосуйте перевірку, повторюючи ці дії до появи повідомлення, аналогічного наведеному на рис.5.

Рис.5.

💥ІІ. Перевірка правильності СSS-коду

1. Для перевірки на валідність СSS-коду там необхідно перейти за посиланням https://jigsaw.w3.org/css-validator/ (рис.6.)

2. Сервіс аналогічно validator.w3.org надає три можливості перевірки коду. Обираємо другий спосіб.

3. Запускаємо на перевірку та аналізуємо отримані повідомлення. В разі появи помилки, виправте її та знову активізуйте перевірку. Продовжуйте повторювати дії до появи повідомлення про відсутність помилок.

Файли для тестування:

.сss

.html

💫Надішли на пошту teacheritschool1@gmail.com результати тестувань. 

💢Якщо не можеш виконати практичне завдання, то виконай інтерактивну вправу за посиланням (на 9 балів). Фото надсилай на пошту

_________________________________________

03.05.2022

Валідація та збереження даних форми

👉1.Вітаю! Сьогодні ми розглянемо, що відбувається, коли користувач заповнив форму на сайті: як і де зберігається інформація, який алгоритм роботи з цими даними? Все це у презентації нижче👇

👉2. Завдання: 

заповни форму

______________________________________

26.04.2022

Створення інтерактивної сторінки за допомогою форми

👉1.Вітаю! Сьогодні виконаємо практичну роботу, під час якої використаємо елементи форми для розробки інтерактивної сторінки.

👉2. Використовуючи зразок, створи форму згідно завдання👇

👉3. Завдання:

спробуй змінити хоча б блоки "Коротко про себе" та "Детальніше про себе"

Роботи надсилай на електронну скриньку

teacheritschool1@gmail.com

_________________________________________

19.04.2022

Вебпрограмування та інтерактивні сторінки

👉1.Вітаю! Сьогодні навчимось створювати інтерактивні сторінки та поговоримо про вебпрограмування.

👉2. Переглянь презентацію нижче👇:

 

👉3. Завдання:

• на 12 балів: переглянь форму за посиланням і відредагуй її за зразком, поданим нижче👇

• на 10 балів: виконай інтерактивну вправу

!! У вправі присутня помилка! Знайдеш - додатковий бал отримаєш.

Роботи надсилай на електронну скриньку

teacheritschool1@gmail.com

________________________________________

12.04.2022

Об'єктна модель документа (DOM)

👉1.Вітаю! Сьогодні дізнаємось, як з’єднується вебсторінка з мовами опису сценаріїв або мовами програмування. Переглянь презентацію👇

👉2. Виконай наступні інтерактивні вправи:

• Об'єктна модель документа
• Обов'язкові теги HTML-документа

👉3.Виконай практичне завдання:

Дослідіть DOM використовуючи інструменти розробника браузера. 

Для цього відкрийте сторінку index.html попередньої домашньої роботи, натисніть «Інструменти розробника» або F12 натисни і перейдіть на вкладку «Elements».

При натисканні на елемент на дереві вузлів ви отримуєте детальну інформацію у лівому вікні

Зробіть скріншот DOM вашої сторінки та надішліть вчителю

💪4. Завдання!

Чекаю на електронну скриньку teacheritschool1@gmail.com роботи: або фото виконаних вправ (на 10 балів), або скріншот DOM вашої сторінки (на 12 балів).

Будьте у безпеці!

____________________________________

05.04.2022

Мультимедіа на вебсторінках

👉1.Вітаю! Сьогодні продовжуємо працювати з вебтехнологіями. Сьогодні будемо вивчати, як додати мультимедіа на сторінку. Переглянь презентацію👇

👉2. Виконай наступні інтерактивні вправи

• Віднови структуру HTML-документу
• Основні теги HTML5

Скріншот або фото з результатом виконання чекаю на електронну скриньку teacheritschool1@gmail.com 

👉3.Виконай практичне завдання за посиланням

• на 8 рядку, в тезі <img> після src в лапках необхідно написати посилання на зображення, яке ти хочеш додати. Для того, щоб отримати посилання, необхідно натиснути на зображення в пошуковику і обрати пункт "Копіювати URL зображення"
• на 9 рядку додати своє відео. Для цього знайти у YouTube коротеньке відео про Україну, написнути під відео "Поділитися" - > "Вбудувати" та скопіювати код.

💪4. Завдання!

Чекаю на електронну скриньку teacheritschool1@gmail.com роботи: або фото виконаних вправ (на 10 балів), або фото сайту з вбудованими фото та відео (на 12 балів).

Будьте у безпеці!

_________________________________________

29.03.2022

Анімаційні ефекти

👉1. Вітаю! Більшість сучасних сайтів містять анімаційні ефекти. Навіть, можна сформулювати так: неможливо уявити сучасний сайт без анімаційного ефекту. Розглянемо, як їх додати на сайт

👉2. Перегляньте приклади анімації за посиланням https://www.mockplus.com/blog/post/css-animation-examples

Для цього необхідно натиснути під анімацією на напис "Просмотреть CSS - код". 

За можливості, спробуй відредагувати обрану анімацію.

👉3. А тепер попрацюємо над вдосконаленням медіаграмотності. На інформаційному просторі створюється величезна кількість діпфейків. Розберемось з цим питанням:

                

💪4. Завдання!

Чекаю на електронну скриньку teacheritschool1@gmail.com приклади діпфейків)

Будьте у безпеці!

___________________________

22.03.2022

Кросбраузерна оптимізація сторінок сайту

👉1. Вітаю!  Сьогодні говоримо про оптимізацію сторінок сайту. Ознайомся з презентацією

👉2. Завдання:

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

• Larry Ellison, Oracle; 

• Marc Andreessen, Netscape;

•  Andy Grove, Intel;

•  Al Shugart, Seagate Technology; 

• Gordon Moore, Intel; 

• John Chambers, Cisco Systems; 

• Steve Jobs, Apple Computer, Pixar; 

• Scott McNealy, Sun Microsystems; 

• John Doerr ,Kleiner Perkins, Caufield & Byers; 

• Larry Sonsini, Wilson Sonsini Goodrich & Rosati; 

• Lew Platt, Hewlett-Packard; 

• Jim Clark, Netscape

Інформацію подай за допомогою форми або напиши на електронну скриньку teacheritschool1@gmail.com

___________________

22.02.2022

Практична робота "Використання модуля CSS Flexbox"

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

👉Хід виконання:

💥1)Замініть  значення атрибуту “flex-direction”  на “column-reverse”.  Перегляньте, які зміни відбулись. Зроби скріншот змін

💥2) Перегляньте  сайт при зміні значень атрибуту “flex-direction”  на  “row-reverse”  та  “row”  відповідно.  Зроби скріншот змін

💥3) Додайте атрибут “justify-content». Надайте значення “center”, “flex-start”,  “flex-end”, “space-around”. Зроби скріншот змін

💥4)Збільшіть висоту контейнера (height: 200px; або  300px). Додайте атрибут «align-items». Перегляньте та зробіть скріншоти при значеннях: “center”, “flex-start”,  “flex-end”, “stretch”. Зробіть висновок про природу значення   “stretch” атрибута «align-items» та “space-around”  атрибута “justify-content». Зроби скріншот змін

На сайті  “CAN I USE” ("Чи можу я використовувати") https://caniuse.com надаються сучасні таблиці, котрі відображають як браузери підтримують передові веб-технологій на стаціонарних  та мобільних веб-браузерах. Знайдіть дані по використанню CSS Flexible Box Layout Module. Зробіть висновки. Надішліть скріншот результату.

💣Отже, я чекаю на електронну скриньку 4 скріншоти ходу роботи з сайтом та 1 скріншот результату запиту на сайті https://caniuse.com/

___________________________

15.02.2022

Проєктування та верстка вебсторінок

1) Вітаю! Сьогодні ми з вами продовжуємо вивчати HTML. Розглянемо проєктування та верстку вебсторінок.

2) Переглянь презентацію. Зверни увагу на слайди 3-5, 9, 17, 21

3) Завдання: 

 - склади mood board (зразок на слайді 22) для шкільного сайту 

 - ознайомся із наступними сайтами

https://vintage.com.ua/

https://dops.digital/

Mood board надсилай на електронну скриньку teacheritschool1@gmail.com

_______________________

08.02.2022

Каскадні таблиці стилів

1) Вітаю! Сьогодні ми з вами продовжуємо вивчати HTML. Розглянемо, як взаємопов'язані HTML та CSS (каскадні таблиці стилів - англ. абревіатура).

Ознайомся із презентацією. Особливу увагу зверни на слайди 11, 31 та 32.

Виконай вправу. Скріншот надішли на пошту teacheritschool1@gmail.com. На скрішоті має бути видно "Чудово, правильне рішення знайдено! " та час виконання вправи (якщо на телефоні, то годинник у верхньому правому куті, на ПК - в нижньому)

 

______________________

 01.02.2022

Мова гіпертекстової розмітки

1) Вітаю! Сьогодні ми з вами продовжуємо вивчати HTML. Отже, ознайомимось з презентацією 

(за матеріаламиhttps://oksanakovalenko.blogspot.com/) 

2)Завдання:

Заготовка для завдання - https://jsfiddle.net/oksanapas/x9gejasu/

 У цьому проекті потрібно сформувати вірш із поданого суцільного тексту. Розставляйте теги абзаців (між строфами) та нових рядків (між рядками).

Покрокові інструкції

1.  Назва вірша - заголовок першого рівня.
   
2.  Автор вірша - заголовок другого рівня.
   
3.  Строфа вірша - це один абзац. Кожен новий рядок відділяється тегами розриву рядка.
   
4.  Вітаю, завдання виконане!  Роботу виконуй або у Блокнот, або за допомогою заготовки. Фото з результатом виконання надсилай на пошту teacheritschool1@gmail.com

_______________________

Заготовка для практичної роботи:

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Вірш</title>

  </head>

  <body>

    ЯКЩО…

    Євген Сверстюк

   Як зможеш гідно річ вести з юрбою 

    І з Королем не втратиш простоти, 

    Якщо усі рахуються з тобою — 

    На відстані, яку відміриш ти; 

    Якщо ущерть наповниш біг хвилини 

    Снагою дум, енергією дій, 

    Тоді весь світ тобі належить, сину, 

    І більше: ти — Людина, сину мій.

  </body>

</html>