Ознайомтеся з інформацією показаною у відеоролику:

Інфографіка (інформаційна графіка) — це графічне подання числових даних та/або зв’язків між об’єктами з використанням графіків, діаграм, інших графічних об’єктів. 

Найбільш використовуваними графічними зображеннями варіаційних рядів є гістограма (діаграма) та полігон (лінійна діаграма). Полігон, як ви вже знаєте, найчастіше використовують для зображення дискретних рядів, гістограму — для зображення інтервальних рядів. 

Перегляньте відеоролик:

Комп’ютерне моделювання

Комп’ютерне моделювання – це процес створення комп’ютерної моделі об’єкту або процесу з метою дослідження його поведінки та використання отриманих знань для вирішення різних задач. Цей підхід знайшов широке застосування в різних галузях, включаючи інженерію, медицину, економіку та інші.

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

Моделювання за допомогою віртуальної реальності (VR) є відносно новим напрямком у комп’ютерному моделюванні. Цей підхід полягає в створенні віртуального середовища, в якому можна відтворювати різні сценарії поведінки об’єктів та процесів. Він дозволяє створювати більш реалістичні моделі та отримувати більш точні результати. VR-технології використовуються в різних галузях, включаючи медицину, автомобілебудування та інші.

Перегляньте відеоролик

Перегляньте відео:

Як обрати майбутню професію?

Чому така велика роль надається інформаційним системам? Наше суспільство стало інформаційним, ми живемо в інформаційному суспільстві, тому людина повинна вміти до нього пристосуватись.

Що ж таке інформація? Чи існує її чітке визначення?

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

Сервіси для онлайн навчання:

Сьогодні наслідки від пошкодження або знищення інформації (даних) є більш значними, ніж втрата матеріальних ресурсів. Нерідко вартість інформації, втраченої, наприклад, під час природного лиха або техногенної аварії, може в сотні разів перевищувати вартість будівель. Тому на цьому уроці ми розглянемо принципи інформаційної безпеки, види загроз інформаційній безпеці та правила безпечної роботи в Інтернеті.

Конфіденційність — забезпечення доступу до даних на основі розподілу прав доступу, захист від несанкціонованого ознайомлення.

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

Цілісність передбачає захист даних від їх зловмисного або випадкового знищення чи спотворення.

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

Види загроз інформаційній безпеці:

• отримання доступу до секретних або конфіденційних даних;

• порушення або повне припинення роботи комп’ютерної інформаційної системи;

• отримання доступу до керування роботою комп’ютерної інформаційної системи;

• знищення або спотворення даних.

• Значна частина загроз інформаційній безпеці виникає внаслідок користування ресурсами Інтернету. Серед них основними загрозами є такі:

•  Потрапляння в інформаційну систему шкідливого програмного забезпечення: вірусів, троянських програм, мережевих хробаків, клавіатурних шпигунів, рекламних систем.

•  Атаки хакерів.

•  BotNet — це комп'ютерна мережа, що складається з деякої кількості хостів, із запущеними ботами — автономним програмним забезпеченням.

•  DdoS — атака на відмову в обслуговуванні, розподілена атака на відмову в обслуговуванні (англ. DoS-attack (Distributed) Denial-of-service attack) — напад на комп'ютерну систему з наміром зробити комп'ютерні ресурси недоступними користувачам, для яких комп'ютерна система була призначена.

•  Фішинг — вид шахрайства, метою якого є виманювання персональних даних у клієнтів онлайн-аукціонів, сервісів з переказу або обміну валюти, інтернет-магазинів тощо.

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

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

Опрацювати §5, вивчити основні поняття інформаційної безпеки.

Чому така велика роль надається інформаційним системам? Наше суспільство стало інформаційним, ми живемо в інформаційному суспільстві, тому людина повинна вміти до нього пристосуватись.

Що ж таке інформація? Чи існує її чітке визначення?

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

Інформація буває відкритою та з обмеженим доступом, правдивою, хибною або відвертою брехнею, вона може продаватися і купуватись (тобто бути товаром).

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

Зверни увагу!

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

Людині, щоб почуватися впевненою в сучасному світі, слід сформувати передусім такі знання та вміння:

• знання основ теорії інформації;

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

• уміння аналізувати, класифікувати, оцінювати нові повідомлення, синтезувати нові рішення й ідеї;

• готовність не тільки оволодівати новими знаннями, а й пропагувати нові ефективні технології й ідеї;

• готовність сприймати різноманітні повідомлення, навіть такі, що ламають стереотипи;

• стійкі навички міжособистісного спілкування, у тому числі з використанням  комп’ютерних технологій і різними мовами;

• уміння аргументовано вести дискусії, готовність визнати себе переможеним  у цій дискусії;

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

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

Вивчаємо

API — це абривіатура «Application Programming Interface «(інтерфейс програмування додатків, програмний інтерфейс програми). Зазвичай API використовується для передачі даних між додатками.

Зазвичай дані передаються у форматі JSON.

Абревіатура розшифровується JavaScript Object Notation. JSON – це абсолютно незалежний від мови реалізації формат файлу. Його застосовують для обміну даними в JavaScript. Спочатку використовувався виключно в JavaScript, але тепер і інші мови мають бібліотеками, що дають можливість працювати з ним (Наприклад, Ruby або PHP)

Приклад даних у форматі JSON

{"name":"John", "age":30, "car":null}

Опрацюйте матеріали презентації

Розглянемо приклад отримання даних

fetch('http://example.com/movies.json')

  .then((response) => response.json())

  .then((data) => console.log(data));

* Створіть динамічну вебсторінку дані для якої отримуватимуться з API сервісу Unsplash

Для використання сервісу можете використати наступний код
await fetch('https://api.unsplash.com/photos/?client_id=K23Mhz4OxZScU34Z0HkO7Gq6ddHvRp1w5mcwznpGWAU')

.then(response=>response.json())

.then(data=>console.log(data))

• Використайте функцію вищого порядку forEach для опрацювання результатів виклику

• Використайте функцію createElement для створення та відображення зображень отриманих з API

17/05 Узагальнення та систематизація знань з модуля "Вебтехнології"

10/05 Створення динамічних елементів на веб-сторінках

Повторення

Вітаю на уроці інформатики! На попередньому уроці ми з'ясували як використовувати мову програмування JavaScript для зміни елементів DOM. А що ж таке DOM? Давайте пригадаємо, для цього повторіть матеріали презентації "Об'єктна модель документа".

Вивчаємо

На більшості сайтів контент генерується динамічно "на льоту", такі сайти відповідно називаються динамічними, якщо вміст сторінки сайту не змінюється - то він є статичним. В одному випадку ми можемо отримувати динамічний контент з віддаленого серверу (так працюють соціальні мережі, сайти новин і т.п.), в іншому випадку контент може додаватись у відповідь на дії користувача (наприклад при натисканні на кнопку з'являється форма для замовлення).

Опрацюйте відеоматеріал

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

Перевірте свої знання

Виконайте тестові завдання у формі прикріпленій до уроку

03/05 Кнопки, події, функції

Доброго дня! Сьогодні на уроці ми ознайомимось з концепцією подійно-орієнтованого програмування. Наша задача - навчитись відловлювати події на сторінці та опрацьовувати їх за допомогою обробників подій.

1. Поміркуємо

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

3. Перегляньте відео

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

5. Завдання дослідіть зразок

Зробіть власний обробник подій для опрацювання натискання на кнопку "-" за посиланням https://replit.com/join/aozahgkahv-roman-anatoliio

26/04 Поняття про мови веб-скриптів та спосіб використання скриптів у гіпертекстових документах. Об'єктна модель документа

Вітаю! Сьогодні на уроці ми познайомимось з мовою програмування JavaScript. JavaScript почала розроблятись для веб-браузера Netscape у 1995 р., з часом можливості мови JavaScript були розширені і зараз програмний код написаний на JavaScript може вбудовуватись у html-код вебсторінки. Крім того JavaScript має безліч інших варіантів застосування. JavaScript не єдина мова для написання сценаріїв на вебсторінці, але є найпопулярнішою і підтримується усіма браузерами.

1. Вивчаємо

• Опрацюйте матеріал презентації;

• Занотуйте основні відомості про мову програмування JavaScript та її синтаксис.

2. Виконайте завдання

• Перегляньте завдання прикріплене до уроку та виконайте його. Для виконання завдання можете скористатись онлайн середовищами repl.it або codepen.io 

• Прикріпіть скріншот коду до цього завдання

• * Кожне з трьох завдань оцінюється в 2 бали

3. Перевірте як ви засвоїли свої знання виконавши тестові завдання

За потреби повторно перегляньте презентацію

19/04 Мультимедіа на веб-сторінках. Розміщення мультимедійних файлів і настроювання параметрів їх програвання

Повторення

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

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

На попередньому уроці ми вже розглянули способи додавання зображень на вебсторінку, під час перегляду сторінок в Інтернеті ви могли помічати що елементи з'являються на сторінках по мірі того як довантажується контент, або після певної взаємодії користувача з елементами на вебсторінці. Тому на сьогоднішньому уроці ми з вами навчимося додавати переходу та анімаційні ефекти до елементів вебсторінки, розширимо знання про CSS та об'єктну модуль документу.

1. Вивчаємо

1.1 Опрацюйте матеріали презентації, занотуйте синтаксис CSS для додавання переходів та анімації

1.2 Опрацюйте приклад коду

1.3 Опрацюйте матеріали підручника (за посиланням) § 11.13 ст. 190 - 192

2. Перевірте свої знання

Виконайте тестові завдання за посиланням

29/03 Адаптивна верстка. Кросбраузерна оптимізація сторінок сайту

Вивчаємо

1. Ознайомтесь з поняттям та основними принципами адаптивної верстки переглянувши презентацію

2. Виконайте завдання:

• Завантажте теку HomePlants.7z та розпакуйте файли-заготовик

• Модифікуйте CSS-код веб-сторінки додавши до неї ще одну контрольну точку для розмірів екрану шириною, від 720 до 1080 пікселів. В такому випадку сторінка відображається у вигляді двох колонок.

• Надішліть скріншот веб-сторінки при розмірі вікна від 720 до 1080 пікселів на електронну адресу вчителя.

Кросбраузерна сумісність — це здатність веб-сайту або веб-програми працювати в різних браузерах.

Вендорний префікс — це спеціальний префікс, який додається до властивості CSS. Деякі властивості повинні мати вендорний префікс щоб відображатись в інших браузерах, наприклад box_shadow.

Вендорні префікси підтримуються такими браузерами:

•  -ms-

•  -webkit-

•  -webkit-

• -moz-

•  -webkit-

•  -webkit-

•  -o-

• -ms-

Кожен браузер містить власну таблицю стилів для відображення елементів, для того щоб вебсайт однаково можна перезаписати усі налаштування браузера за допомогою спеціальних таблиць, наприклад normalize.css.

2. Опрацюйте матеріали підручника 

Опрацюйте § 11.11 ст. 182 - 185

3. Перегляньте відеоматеріал 

(автор Галина Лисенко)

22/03 Проектування та верстка веб-сторінок

Процес створення сайта (веб-проекту) умовно можна розподілити на кілька етапів. Розглянемо такі етапи, як загальне планування; розробка дизайну; планування макета веб-сторінок.

Опрацювати ст. 168 - 175 за підручником, виконати тестові завдання 

15/03 Каскадні таблиці стилів. Стильове оформлення сторінок

Каскадні таблиці стилів (англ. Cascading Style Sheets, або скорочено CSS) — спеціальна мова, що використовується для опису зовнішнього вигляду сторінок, написаних мовою розмітки даних. Основна ідея CSS полягає в тому, щоб відокремити дизайн документа від його вмісту. CSS відповідає за оформлення і зовнішній вигляд HTML-коду, тоді як HTML — за зміст та логічну структуру документа. 

Конструкція СSS, яка відповідає за зовнішній вигляд певного елемента HTML, називається CSS-правилом. Усі CSS-правила складаються із селектора та блоку оголошень. Блок оголошень містить одне або кілька оголошень, розташованих у фігурних дужках. Усередині блоку оголошень знаходяться пари CSS-властивість — значення, розділені крапкою з комою (рис. 1). 

Кожне правило починається із селектора, що вибирає ті HTML-елементи до яких буде застосовано CSS-правило. Селектор дозволяє вибрати один або декілька HTML елементів. В якості селектора можуть бути вказані назви HTML-елементів. Наприклад для того щоб відобразити усі заголовки на сторінці синім кольором ми можемо скористатись таким правилом: 

h1, h2, h3, h4, h5, h6 {

color : blue;

}

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

Ідентифікатори подібні до класів, але зустрічаються в контенті лише один раз. Для застосування ідентифікатора використовується наступний запис

Підключення каскадних таблиць стилів

Існує кілька способів підключення CSS-коду до HTML-документа. Розглянемо деякі з них. 

<body>
<header style="background-color : gray;
width : 900px;
height : 100px;
text-align : center;
padding - top : 30px;
margin : 10px auto;>
Заголовок сайта
</header>
</body>

<body>
<style>
header {
background-color : gray;
width : 900px;
height : 100px;
text-align : center;
padding - top : 30px;
margin : 10px auto;
}
</style>
<header>
Заголовок сайта
</header>
</body>

@import url(css/style.css);

Якщо на один і той самий елемент діє одночасно кілька стилів то вибирається той у якого більший пріорітет. Якщо пріорітет однаковий - вибирається стиль що записаний у CSS-файлі останнім.

Занотуй в зошиті описані вище способи застосування стилів до html-елементів.

08/03 Таблиці та списки на веб-сторінках

Вивчаємо:

1. Таблиці

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

Елементи HTML-таблиць

HTML-таблиці скаладаються з рядків, кожен рядок містить певну кількість комірок. Увесь вміст таблиці розміщується між відкриваючим та закриваючими тегами <table>...</table>. Нижче наведено основні теги для створення та роботи з таблицями.

01/03 Інструментальні засоби для веб-розробки

Є цілий клас завдань (створення сайту, перевірка його працездатності, супровід, оптимізація та просування), виконання

яких неможливе без участі фахівців різної спеціалізації.                       

Який вигляд матиме сайт — цим питанням опікується веб-дизайнер. Веб-розробник отримує результат його роботи у вигляді макету. Його задача — написати код, який відобразить браузер у саме такому вигляді, як запропонував веб-дизайнер.

Вивчаємо

1. Опрацюйте матеріали презентації

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

2. Ознайомтесь з поняттям системи контролю версій за посиланням https://cutt.ly/Swv0tpI8 

3. Опрацюйте основні редактори коду (підручник ст. 154 - 158)

4. Виконайте тестове завдання 

23/02 Інформаційна структура сайту

Вивчаємо (опрацюйте матеріал): 

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

1.Інформаційна структура сайта — спосіб організації інформаційних даних на веб-сайті, а також структура взаємодії різних блоків інформації один з одним. 

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

Сайти поділяються на сайти з лінійною та ієрархічною структурою. Також є сайти з довільною структурою, на яких навігація здійснюється в довільному порядку. Сайтом з довільною структурою є, наприклад, Вікіпедія.

Перегляньте види інформаційнї структури сайту у доданому файлі

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

Гіперпосилання, або просто посилання чи лaнка — активний (виділеним кольором) текст, зображення чи кнопка на вебсторінці, натиснення на яку (активізація гіперпосилання) викликає перехід на іншу сторінку чи іншу частину поточної сторінки.

2. Яку структуру повинен мати ваш сайт? 

Далі розглянемо, яку структуру повинен мати сайт. 

Найпоширеніші речі, які ми матимемо в будь-якому створеному проекті веб-сайту, — це індексний HTML-файл і папки, які містять зображення, файли стилів і файли сценаріїв. 

Давайте створимо їх зараз: 

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

- папка зображень: ця папка міститиме всі зображення, які ви використовуєте на своєму сайті. Створіть папку під назвою images у папці тестового сайту. 

- папка styles: ця папка міститиме код CSS, який використовується для стилізації вашого вмісту (наприклад, встановлення кольорів тексту та фону). Створіть папку під назвою styles у папці тестового сайту. 

- папка сценаріїв: ця папка міститиме весь код JavaScript, який використовується для додавання інтерактивних функцій на ваш сайт (наприклад, кнопки, які завантажують дані при натисканні). Створіть папку під назвою scripts у папці тестового сайту.

Додайте скріншот зі створеними файлам до цього завдання. Для створення файлової структури в режимі онлайн можна скористатись сервісом repl.it 

3. Шлях до файлу

Шлях до файлу описує розташування файлу в структурі папок вебсайту. Наприклад: 

<img src="picture.jpg"> Файл "picture.jpg" знаходиться в тій же папці, що й поточна сторінка 

<img src="images/picture.jpg"> Файл "picture.jpg" знаходиться в папці зображень у поточній папці 

<img src="/images/picture.jpg"> Файл "picture.jpg" знаходиться в папці зображень у корені поточної веб-сторінки 

<img src="../picture.jpg"> Файл "picture.jpg" знаходиться в папці на один рівень вище від поточної папки

15/02 Основні тренди у веб-дизайні

Завдання:

1. Опрацюйте матеріали презентації: https://cutt.ly/IwlP0PxI 

2. Перегляньте відео https://www.youtube.com/watch?v=tfemSAUaueo&t=14s&ab_channel=LogosITAcademyUA 

3. Відкрийте підручник та прочитайте ст. 135 - 138, письмово дайте відповідь на завдання 5, на ст. 138 ( для виконання завдання скористайтесь посиланням https://wearesocial.com/uk/blog/2023/07/social-media-use-reaches-new-milestone/) , розділ для пошуку вказано у доданому зображенні.

4. Сфотографуйте свою відповідь, або надішліть документ (посилання на документ) та доєднайте до завдання. Позначте завдання як виконане.

Бажаю успіху!

Вивчаємо

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

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

Опрацюйте матеріали підручника § 4.6

Опрацюйте матеріали презентації (авт. Н. Речич)

Завдання

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

• Cтворіть інфографіку, де відобразіть, на що ви витратили цей час. 

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

У процесі створення веб-сайту важливо спланувати його структуру так, щоб користувачам Інтернету було максимально зручно працювати з вашим сайтом.

Вивчаємо

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

Ергономічний сайт — це сайт, що забезпечує необхідні зручності відвідувачеві, зменшує фізичну та психологічну втому, зберігає здоров’я та працездатність.

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

Правила зручного розташування відомостей на веб-сайті:

• простота — на сторінці має бути якомога менше елементів (дизайну). Завдяки цьому увагу фокусують на контенті. Легше привернути увагу до чогось важливого, коли її не відволікають елементами дизайну;

• фіксований дизайн — зараз зазвичай вже не зустрічаються сайти з «гумової версткою»;

• менше колонок — якщо раніше зустрічалися сайти в чотири колонки, а то і більше, то сьогодні три — вже максимум. А частіше — дві;

• назва сайту вгорі сторінки — це явище не нове. Але зараз блок у верхній частині сторінки, відділений від решти контенту, — загальновизнаний стандарт;

• проста навігація — меню навігації має бути великим і помітним, легким в розумінні, гіперпосилання повинні чітко відрізнятися від решти контенту;

• збільшений кегль — роздільна здатність і розміри моніторів зростають, тому можна не напружувати очі;

• чіткий логотип — щоб сайт запам’ятали, у нього має бути яскравий і виразний логотип;

• ніжний градієнт — плавний перехід з одного кольору в інший. Цей досить простий, малопомітний елемент, справляє гарне враження навіть при нудному за своєю суттю дизайну;

• шрифти без зарубок — текст, набраний таким шрифтом, набагато легше читати;

• нижній колонтитул — його ще називають «підвалом». Це невеликий блок внизу сторінки, в якому повторено навігаційне меню, розташовано копірайт ©, посилання на дизайнера сайту, контакти власника ресурсу. Якщо раніше це не вважали обов’язковим, то тепер відсутність «підвалу» вважають ознакою поганого тону;

• великі кнопки — якщо на сторінці присутні кнопки «проглянути», «придбати» тощо, то їх роблять такими, щоб користувач їх помітив і не схибив при натисканні — великого розміру і яскравими.

Види макетів веб-сторінок 

Більшість сучасних веб-сайтів використовують або адаптивний, або реактивний веб-дизайн.

До появи інтернету і смартфонів сайти розроблялися для екранів настільних комп'ютерів і ноутбуків. Ці екрани були обмежені в розмірах, і дизайнери сайтів використовували фіксований або регульований дизайн.

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

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

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

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

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

Більшість веб-сайтів використовують або адаптивний дизайн, або реактивний дизайн, оскільки ці два дизайну веб-сайтів відображаються по-різному в залежності від пристрою або розміру екрану, використовуваного для відображення сторінки. У фіксованому і регульованому дизайні вміст веб-сторінки може виявитися занадто дрібним і незручним для перегляду.

Завдання

• Опрацюйте матеріали підручника § 11.22, ст. 219-220

• Проаналізуйте тренди поточного року та оцініть їх з точки зору ергономіки.

• Дослідіть платформи Dribble та Behance, знайдіть основні тренди у вебдизайні (за необхідністю скористайтесь перекладачем) (3 бали)

• Створіть текстовий документ до якого додайте опис трендів у вебдизайні в 2023 та 2024 та позначте ті які позитивно та негативно впливатимуть на ергономіку (на вашу думку) (6 балів)

• Додайте ілюстрації трендів до документу (3 бали)

• Додайте створений документ до своєї роботи та позначте завдання як виконане

Вивчаємо

Графіка

Багато веб-сторінок оформлюються зображеннями. В специфікації HTML5 концепт рисунка дещо відрізняється від зображення. Рисунок рекомендують сприймати як рисунки в книгах, відокремлене від тексту, але на яке даються посилання. Часто рисунки мають підписи. Ви вже знайомі з тегом <img> для додавання зображень до веб-сторінки, пригадайте його синтаксис.  

<img src="URL" alt="альтернативний текст">

Альтернативний текст відображається замість зображення, якщо браузер не зміг його завантажити, або якщо для доступу до веб-сайту використовується програма екранного доступу для людей з вадами зору.

Гіперпосилання

Гіперпосилання, або просто посилання, іноді лaнка — активний (виділеним кольором) текст, зображення або кнопка на вебсторінці, натиснення на яку (активізація гіперпосилання) викликає перехід на іншу сторінку або на іншу частину сторінки, на якій він перебуває.

Гіперпосилання можна додати за допомогою тегу

<a href="https://www.google.com"&gt;Назва посилання</a>

• Опрацюйте матеріали презентації

• Опрацюйте ст. 159 - 163 підручника

Завдання

• Створіть сторінку фотогалереї що міститимуть фото відповідно до зразку, тематику фотогалереї можете обрати самостійно.

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

• Позначте завдання виконаним

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

Повторення

Система керування вмістом (Content Management System, CMS) -  програмне забезпечення для організації веб-сайтів чи інших інформаційних ресурсів в Інтернеті чи окремих комп'ютерних мережах.

Етапи створення вебсайту у CMS Google

1. Реєстрація облікового запису на сервері онлайн-системи керування вмістом веб-сайтів .

2. Створення сайту, вибір його назви .

3. Вибір елементів оформлення сайту .

4. Створення сторінок сайту, системи навігації, заповнення сторінок контентом .

5. Публікація сайту

Вивчаємо

Створений сайт потребує адміністрування

Адміністрування сайта — це комплекс заходів щодо підтримування чіткого функціонування сайта, його працездатності, швидкої роботи, зручності для користувача, регулярного оновлення матеріалів на його сторінках.

Адміністрування сайта умовно можна розподілити на інформаційне

й технічне (розгляньте таблицю)

• Опрацюйте відеоматеріал

• Опрацюйте матеріали підручника § ст. 148 - 150 https://issuu.com/kreidaros/docs/informatika-10-klas-bondarenko-2018/148 

Завдання

• Виконайте практичне завдання

Мета: Сьогодні на уроці ми ознайомимось з поняттям гіпертексту, інформаційним ресурсом WorldWideWeb, поняттям Web-сторінки та Web-сайту, дізнаймось що таке сайт та класифікацію сайтів.

Вивчаємо

Системи керування вмістом — CMS (Content Management System) – програмне забезпечення для організації створення, редагування й управління контентом вебсайтів.

HTML — стандартизована мова розмітки документів для перегляду вебсторінок у браузері. Браузери отримують HTML документ від сервера за протоколами HTTP/HTTPS або відкривають з локального диска, далі інтерпретують код в інтерфейс, який відображатиметься на екрані монітора.

За допомогою CMS можна створювати вебсторінки не маючи знань з HTML.

Опрацюйте матеріали презентації, занотуйте основні поняття в зошиті

Перегляньте матеріали відео, ознайомтесь з процесом створення сайту за допомогою CMS Google

Завдання

Виконайте тестові завдання

Повторіть основні теми вивчені у І семестрі

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

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

Повторимо правила безпеки в мережі Інтернет

Перед початком роботи, повторимо правила безпечної роботи в мережі Інтернет

Повторення

Тож давайте почнемо з повторення основних понять баз даних

Психологічна хвилинка

Завдання

Розгляньте таблиці баз даних

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

Руханка

Виконймо вправи руханки

Підсумковий тест

Виконайте підсумкове тестування з теми "Бази даних"

Повторимо правила безпеки в мережі Інтернет

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

(Канал pin production)

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

Повторення

Повторимо основні елементи відношення у базі даних

Давайте розглянемо приклади запитів які можна застосувати до однієї таблиці, розглянемо для прикладу таблицю авторів з бази даних "Бібліотека"

• Визначити усіх авторів які писали у жанрі "Детектив"

• Визначити усіх авторів які не працювали у жанрі "Фентезі"

• Визначити кількість книг за кожним жанром

• Визначити імена авторів на літеру "Д"

• Визначити авторів які видали більше 40 книг

• Визначити письменників в жанрі фентезі імена яких починаються з "Дж"

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

Психологічна хвилинка

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

Опрацюйте матеріал

Якщо ви працюєте зі смартфону, ваму може бути корисним це відео

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

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

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

Розглянемо процес створення запиту з параметром. Створимо запит у якоми виберемо Працівників із Таблиці КАДРИ (а саме поля "Номер справи", "Прізвище",  "Стаж" та "Номер магазина"), у яких стаж роботи перевищує 16 років .Для цього потрібно виконати всього 4 кроки.

Занотуйте в зошиті визначення та процес створення запиту

Перейдіть за посиланням, та створіть копію бази даних

• Додайте команду для пошуку письменників у жанрі фентезі

• Додайте команду для впорядкування таблиці письменників за алфавітом

• Додайте команду для фільтрування письменників які написали менше 20 книг

Надшліть скріншот запитів вчителю

Опрацюйте матеріали та зробіть короткий конспект

Опрацюйте  § 22 - 23, ст. 128 - 135

Перегляньте відео про сортування та фільтрацію даних у таблиці.

Libre Office Base - це система керування базами даних, що входить до пакету LibreOffice, та вільно поширюється за ліцезією GNU. В середовищі Libre Office є 4 основні типи об'єктів : таблиці, форми, запити та звіти.

Створення таблиці

1. Опрацювати процес створення нової таблиці. Занотувати основні поняття.

2. Створити таблицю в середовищі СУБД Base відповідно до завдання нижче і прислати скріншот створеної таблиці:

Вивчаємо

Опрацюйте матеріал, занотуйте основні визначення

Бази даних класифікують за різними критеріями.

За моделлю організації даних розрізняють такі бази даних:

• Ієрархічна. Ієрархічна база даних може бути представлена як дерево, що складається з об'єктів різних рівнів. Між об'єктами існують зв'язки типу «предок-нащадок». При цьому можлива ситуація, коли об'єкт не має нащадків або має їх декілька, тоді як у об'єкта-нащадка обов'язково тільки один предок.

• Мережна. Така база даних подібна до ієрархічної, за винятком того, що кожен об'єкт може мати більше одного предка.

• Реляційна. Реляційна база даних зберігає дані у вигляді таблиць. Найвживаніші СКБД використовують реляційну модель даних.

• Об'єктно-орієнтована. У базі даних цього виду дані оформляють у вигляді моделей об'єктів.

За розміщенням даних виділяють такі види баз:

• Локальна, або централізована. Така база даних підтримується на одному комп'ютері.

• Розподілена. Частини такої бази даних розміщують на різних комп'ютерах мережі.

На даний момент найпоширенішими залшиаються реляційні розподілені бази даних, але їх все більше витісняють бази об'єктні бази даних та бази даних реалізовані за технологією NoSQL.

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

Атрибутом (attribute) називається властивість, що описує деяку характеристику описуваного об'єкта. В представленні таблиці атрибуту відповідає стовпець.

Запис (record) - рядок таблиці бази даних, містить комбінацію полів певної сутності. Записи ще називають кортежами.

Відношення — фундаментальне поняття реляційної моделі даних. З цієї причини модель і називається реляційною (від англійського relation — відношення).

Відношення має просту графічну інтерпретацію, воно може буде представлене у вигляді таблиці, стовпці (поля, атрибути) якої відповідають властивостям сутності, а рядки (записи, кортежі) - значенням.

Вивчаємо

База даних — це організована структура, призначена для зберігання, зміни й обробки взаємопов’язаної інформації, переважно великих обсягів. 

Як і будь-яка інша програма бази даних були створені для вирішення деякої проблеми. Це проблема зберігання та обробки великих об'ємів даних. Бази даних забезпечують такі переваги як :

• робота з великими об'ємами даних;

• простота оновлення даних;

• точність даних;

• забезпечення безпеки даних;

• запобігання надлишковості даних;

• зберігання важливих даних.

Системи управління базами даних

СУБД — система управління базами даних. СУБД — це комплекс програмних засобів, необхідних для створення структури нової бази, її наповнення, редагування вмісту і відображення інформації. Найбільш поширеними СУБД є MySQL, PostgreSQL, Oracle, Microsoft SQL Server. 

На відміну від таких CУБД як MySQL, для роботи з якими потрібно володіти мовою написання запитів SQL, є і більш прості програми для роботи з базами даних, які входять до офісних пакетів Microsoft Office та LibreOffice.

Ви можете завантажити та безкоштовно використовувати протягом місяця СУБД Microsoft Access. Для завантаження перейдіть за посиланням https://www.microsoft.com/uk-ua/microsoft-365/access.

Якщо ви бажаєте використовувати СУБД Base, яка вільно росповсюджується перейдіть за цим посиланням для завантаження https://www.libreoffice.org/download/download/?lang=ua .