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

02.06.2022

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

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

 Сайти для тих, хто планує вступати:

1. https://vstup.osvita.ua/  Рейтингові списки, пошук навчальних закладів, інформація про складові конкурсного бала - все це є на сайті. 
   
2. https://abit-poisk.org.ua/  Пошук інформації про вступників різних років
   
3. https://zno.testportal.com.ua/info/login  Інформаційна сторінка учасника ЗНО
   
4. https://vstup.osvita.ua/spec/1-0-0/ Пошук спеціальностей, на які можна вступити з твоїми предметами ЗНО
5. https://osvitanow.org/ Натисни "Навчання в Україні" і зі списку обери необхідне питання
   
6. https://vstup.edbo.gov.ua/ пошук конкурсних пропозицій

_______________________________________________________

26.05.2022

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

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

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

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

________________________________________

19.05.2022

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

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

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

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

_______________________________________

12.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 балів). Фото надсилай на пошту

_________________________________________

05.05.2022

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

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

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

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

______________________________________

28.04.2022

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

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

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

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

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

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

teacheritschool1@gmail.com

_________________________________________

21.04.2022

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

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

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

 

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

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

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

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

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

teacheritschool1@gmail.com

________________________________________

14.04.2022

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

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

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

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

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

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

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

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

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

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

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

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

________________________________________

07.04.2022

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

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

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

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

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

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

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

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

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

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

________________________________________

31.03.2022

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

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

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

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

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

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

                

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

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

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

_________________________________________

24.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

___________________

24.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/

______________________

17.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

__________

 10.02.2022

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

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

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

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

 

Додатково!

1) HTML5. Уроки для початківців. W3Schools українською HTML Стилі - CSS

2) 

______________________________________________ 

 03.02.2022

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

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

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

2)Інтерактивні вправи:

пригадай основні поняття HTML (ми працювали з цією темою в 1 семестрі 10 класу)

3)Завдання:

Заготовка для завдання - 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>