1. Що таке Штучний Інтелект (ШІ)? 🤖

Штучний інтелект (ШІ, або AI від англ. Artificial Intelligence) — це розділ інформатики, метою якого є створення комп'ютерних систем, здатних імітувати (наслідувати) дії та процеси, що традиційно вважаються інтелектуальними, властивими людині.

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

Як працює ШІ?

ШІ працює за принципом машинного навчання:

1. Дані: Системі "згодовують" дуже багато прикладів (наприклад, тисячі фотографій котів і собак).

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

3. Рішення: Після навчання система може самостійно розпізнати, чи є на новій, невідомій їй фотографії, кіт чи собака. Якщо помиляється, вона "коригує" свій алгоритм.

Приклади використання ШІ, які ви знаєте:

• Голосові асистенти (Siri, Google Assistant, Alexa) — вони розуміють вашу мову та виконують команди.

• Системи рекомендацій (YouTube, Netflix) — пропонують вам фільми чи відео на основі того, що ви дивилися раніше.

• Розпізнавання облич (у телефоні чи камерах спостереження).

• Автоматичний переклад тексту з однієї мови на іншу (Google Translate).

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

2. Що таке SMART-технології? 💡

Слово SMART (від англ. Smart) перекладається як "розумний".

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

Основна ідея SMART-технологій полягає у взаємодії пристроїв у межах Інтернету речей (IoT) — це коли всі пристрої "спілкуються" між собою через Інтернет.

Що таке Електронне урядування (e-Government)?

Електронне урядування — це спосіб організації діяльності органів державної влади та місцевого самоврядування, що передбачає використання інформаційно-комунікаційних технологій (ІКТ) для:

• Підвищення ефективності державного управління.

• Спрощення та автоматизації надання державних послуг громадянам і бізнесу.

• Забезпечення прозорості та відкритості влади.

• Посилення участі громадян у державному управлінні (е-демократія).

По суті, це переведення спілкування між Владою, Громадянами та Бізнесом в цифровий формат.

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

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

Компоненти інформаційної системи

Будь-яка сучасна ІС складається з таких основних компонентів:

• Апаратне забезпечення (Hardware): Це фізичні пристрої, такі як комп'ютери, сервери, мережеве обладнання, принтери, сканери тощо.

• Програмне забезпечення (Software): Це програми та додатки, що керують апаратним забезпеченням та виконують інформаційні процеси. Сюди входять операційні системи, бази даних, прикладні програми (наприклад, текстові редактори, браузери).

• Дані: Це сира інформація, яка збирається, обробляється та зберігається системою. Дані можуть бути у вигляді текстів, чисел, зображень, аудіо та відео.

• Мережі: Це засоби для передачі даних, які з'єднують різні компоненти ІС, як-от Інтернет, локальні мережі (LAN) або бездротові мережі (Wi-Fi).

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

• Процеси (процедури): Це правила та інструкції, які описують, як дані мають бути оброблені та як люди мають взаємодіяти з системою.

Класифікація інформаційних систем

ІС можна класифікувати за різними критеріями:

• За рівнем управління в організації:

  • Операційні ІС: Підтримують щоденні операції, наприклад, облік продажів.

  • Управлінські ІС: Допомагають менеджерам контролювати та аналізувати роботу, наприклад, системи управління ресурсами підприємства (ERP).

  • Системи підтримки прийняття рішень: Надають аналітичні інструменти для вирішення складних завдань.

• За сферою застосування:

  • Економічні (бухгалтерські, фінансові): Використовуються для обліку та фінансового аналізу.

  • Виробничі: Автоматизують процеси виробництва та контролю якості.

  • Наукові: Використовуються для моделювання та проведення експериментів.

  • Медичні: Системи електронних медичних карт, діагностичні системи.

Приклади сучасних інформаційних систем

• Системи управління взаємовідносинами з клієнтами (CRM): Допомагають компаніям керувати даними про клієнтів, продажі та маркетинг.

• Системи електронної комерції: Вебсайти, що дозволяють купувати та продавати товари онлайн (наприклад, Amazon, Rozetka).

• Системи управління навчанням (LMS): Платформи, що підтримують освітній процес, дозволяючи викладачам надавати матеріали, а учням – виконувати завдання (наприклад, Google Classroom, Moodle).

• Геоінформаційні системи (ГІС): Системи для збору, зберігання та аналізу географічних даних, наприклад, Google Maps або навігаційні системи в автомобілях.

Інформація, повідомлення та дані

• Дані — це окремі факти, числа, символи, які самі по собі не мають повного сенсу. Це сирий, необроблений матеріал. Наприклад: "25", "Київ", "червоний".

• Повідомлення — це форма, в якій передаються дані. Це може бути текст, звук, зображення, відео або будь-який інший сигнал. Повідомлення — це спосіб донести дані до когось. Наприклад, надрукована на аркуші паперу цифра "25".

• Інформація — це дані, які були оброблені, організовані та надані в контексті, що робить їх осмисленими та корисними. Коли ви розумієте значення повідомлення, воно стає для вас інформацією. Наприклад, якщо ми знаємо, що "25" — це вік людини, ці дані стають інформацією.

Інформаційні системи в сучасному суспільстві

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

Роль ІС у сучасному суспільстві:

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

• Державне управління. Уряд використовує ІС для надання електронних послуг громадянам (наприклад, "Дія"), для обліку податків, ведення реєстрів та забезпечення прозорості.

• Освіта. Онлайн-курси, електронні бібліотеки та освітні платформи (наприклад, Google Classroom) зробили доступ до знань більш широким і зручним.

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

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

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

1. Що таке хостинг?

• Визначення: Хостинг (від англ. "hosting") – це послуга з надання дискового простору на сервері, підключеного до інтернету, для розміщення файлів веб-сайту (HTML-документів, зображень, відео, скриптів тощо). Простими словами, це "оренда місця" для вашого сайту в інтернеті, щоб він був доступний користувачам 24/7.

• Аналогія: Часто хостинг порівнюють з орендою приміщення для магазину. Щоб ваш магазин працював, вам потрібне місце, де зберігатимуться товари, і яке буде доступне для покупців. Так само і сайт: йому потрібне місце на сервері, щоб його могли відвідувати користувачі з усього світу.

• Хостинг-провайдер (хостер): Компанія, яка надає послуги хостингу. Їхнє завдання – забезпечити стабільну роботу сервера, його постійне підключення до інтернету та безпеку даних.

2. Навіщо потрібен хостинг?

• Доступність сайту: Без хостингу сайт існує лише на вашому комп'ютері і не доступний іншим користувачам. Хостинг дозволяє розмістити його в мережі Інтернет.

• Цілодобова робота: Сервери хостинг-провайдерів працюють безперебійно, забезпечуючи доступ до сайту в будь-який час.

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

• Доменне ім'я: Хостинг часто надається в комплексі з можливістю прив'язати до сайту доменне ім'я (наприклад, вашсайт.ua).

3. Види хостингу (основні, які можуть розглядатися):

• Віртуальний хостинг (Shared Hosting):

  • Принцип роботи: На одному фізичному сервері розміщується велика кількість веб-сайтів (від десятків до сотень). Ресурси сервера (процесор, пам'ять, дисковий простір) розподіляються між усіма користувачами.

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

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

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

1. Кнопки (Buttons):

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

Кнопкам можна додавати різноманітні стилі за допомогою CSS, щоб змінити їхній зовнішній вигляд (колір, розмір, шрифти, тіні тощо). 

Події (Events):

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

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

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

Каскадні таблиці стилів (CSS) – це потужний інструмент для стилізації веб-сторінок, який дозволяє відокремити вміст сторінки (HTML) від її зовнішнього вигляду.

Основні переваги використання CSS:

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

• Розділення вмісту та представлення: CSS дозволяє відокремити структуру HTML-документа від його зовнішнього вигляду, що спрощує підтримку та оновлення веб-сайту.

• Економія часу та зусиль: Замість того, щоб додавати стилі до кожного HTML-елемента окремо, ви можете створити CSS-правила, які застосовуватимуться до всіх елементів певного типу або класу.

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

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

Способи підключення CSS до HTML:

• Вбудовані стилі (inline styles): Стилі додаються безпосередньо до HTML-елемента за допомогою атрибута style.

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

• Внутрішні стилі (internal styles): Стилі додаються до HTML-документа в межах тега <style>, розташованого в розділі <head>.

  • Цей спосіб підходить для невеликих веб-сайтів або для стилізації окремих сторінок.

• Зовнішні стилі (external styles): Стилі зберігаються в окремому файлі з розширенням .css і підключаються до HTML-документа за допомогою тега <link>.

  • Цей спосіб є найбільш рекомендованим, оскільки дозволяє розділити HTML та CSS, що спрощує підтримку та оновлення веб-сайту.

Основні концепції CSS:

• Селектори (selectors): Визначають, до яких HTML-елементів застосовуватимуться CSS-правила.

• Властивості (properties): Визначають, які стилі застосовуватимуться до елементів (наприклад, color, font-size, background-color).

• Значення (values): Визначають значення властивостей (наприклад, red, 16px, lightblue).

Мова розмічання гіпертекстового документа (HTML) — це стандартна мова розмітки документів для перегляду веб-сторінок у браузері. Вона надає засоби для створення структурованих документів, позначаючи структуру тексту, наприклад, заголовки, абзаци, списки, посилання, цитати та інші елементи.

Основні поняття:

• Гіпертекст:

  • Це текст, який містить посилання на інші документи або ресурси.

  • Гіпертекст дозволяє користувачам переміщатися між різними частинами документа або між різними документами.

• Розмітка:

  • Це процес додавання до тексту спеціальних позначок, які визначають його структуру та зовнішній вигляд.

  • У HTML розмітка здійснюється за допомогою тегів.

• Теги:

  • Це ключові слова або символи, які записуються в кутові дужки (< >).

  • Теги визначають, де починається та де закінчується HTML-елемент.

  • Теги бувають парні (наприклад, <p>...</p>) та непарні (наприклад, <br>).

• HTML-документ:

  • Це текстовий файл, який містить HTML-розмітку.

  • HTML-документ складається з головного елемента <html>, до змісту якого додаються інші елементи.

• Браузер:

  • Це програма, яка інтерпретує HTML-код і відображає веб-сторінку на екрані.

Основні функції HTML:

• Створення структури веб-сторінок.

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

• Створення гіперпосилань для навігації між сторінками.

• Форматування тексту та інших елементів.

• Створення форм для введення даних.

HTML не є мовою програмування. Це мова розмітки, яка використовується для опису структури та вмісту веб-сторінок. Для створення інтерактивних веб-сторінок використовуються інші технології, такі як JavaScript.

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

Етапи створення мультимедійного проекту:

1. Визначення мети та цільової аудиторії:

   • Яка мета вашого проекту?

   • Для кого він призначений?

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

2. Розробка концепції та сценарію:

   • Яка історія або ідея лежить в основі вашого проекту?

   • Як ви хочете представити цю ідею?

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

3. Створення контенту:

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

   • Переконайтесь, що контент відповідає вашій концепції та є якісним.

   • Використовуйте відповідні інструменти та програмне забезпечення для створення та редагування контенту.

4. Інтеграція та компонування:

   • З'єднайте всі елементи мультимедіа в єдиний продукт.

   • Розмістіть контент наtimeline або в інтерактивному середовищі.

   • Додайте ефекти, переходи та інші елементи, щоб зробити ваш проект цікавим та динамічним.

5. Тестування та редагування:

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

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

   • Внесіть необхідні зміни та покращення.

6. Розповсюдження та презентація:

   • Виберіть спосіб розповсюдження вашого мультимедійного продукту: веб-сайт, соціальні мережі, DVD-диски тощо.

   • Підготуйте презентацію або промо-матеріали, щоб зацікавити аудиторію.

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

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

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

Існує три типи первинних ключів: ключові поля лічильника (лічильник), простий ключ і складений ключ.

Поле лічильника (тип даних «автозаповнення»). Для кожного запису цього поля таблиці автоматично заноситься унікальне числове значення.

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

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

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

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

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

За множинністю виділяють такі типи зв’язків:

• «один-до-одного» (1:1) означає, що в кожний момент часу кожному екземпляру сутності А відповідає 1 або 0 екземплярів сутності Б;

• «один-до-багатьох» (1:N) — одному екземпляру сутності А відповідає 0, 1 або більше екземплярів сутності Б;

• «багато-до-одного» (N:1) — обернений випадок до попереднього;

• «багато-до-багатьох» (N:М) — одному екземпляру сутності А відповідає 0, 1 або більше екземплярів сутності Б, і навпаки, одному екземпляру сутності Б відповідає 0, 1 або більше екземплярів сутності А.

Виконайте вправу за зразком наведеним у відео:

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

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

Опрацюйте матеріал за посиланням: 

Перегляньте відео та випішіть ключові поняття:

Повторення та узагальнення знань

Перейдіть за посиланням на сайт "Українського веб-довідника" та повторіть основні три технології вебпрограмування: html, css, javascript

Вивчаємо

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

Веб-сервер — це програма, яка створює і повертає відповіді на запити веб-pecypcів клієнтами.

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

Дані вебсторінок передаються за допомогою протоколу передачі гіпертексту HTTP.

HTTP — протокол передачі даних, що використовується в комп'ютерних мережах. Назва скорочена від HyperText Transfer Protocol, протокол передачі гіпертекстових документів.

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

Опрацюйте матеріали підручника ст. 206 - 212

Повторення

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

Вивчаємо

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

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

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

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

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

Вивчаємо

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

Інтелектуальна власність — це власність на результати інтелектуальної та творчої діяльності.

Об’єктами інтелектуальної власності (результатами інтелектуальної та творчої діяльності) згідно із законодавством України є:

• літературні та художні твори;

• комп’ютерні програми; y бази даних; y фонограми, відеограми, передачі (програми) організацій мовлення;

• наукові відкриття;

• винаходи, корисні моделі, промислові зразки;

• раціоналізаторські пропозиції;

• сорти рослин, породи тварин;

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

• комерційні таємниці тощо.

Авторське право — це сукупність прав автора (та його правона­ ступників) щодо створення або використання твору літератури, науки, мистецтва тощо.

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

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

Найбільш поширені помилкові судження щодо фотографій в мережі Інтернет:

- якщо фотозображення викладено в мережу Інтернет, автор такого зображення автоматично надає дозвіл на його вільне використання;

- якщо фотозображення розміщено в соціальних мережах його вважають об'єктом, який можна використовувати для будь-яких цілей та без будь-яких обмежень;

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

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

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

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

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

1. Вивчаємо

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

1.2 Занотуйте синтаксис додавання ілюстрації з прикріпленого скріншоту

1.3 Опрацюйте матеріали підручника § 11.12 ст. 186 - 189

2. Завдання

Використовуючи елемент <figure> створити сторінку фотогалерею та додати підписи до зображень. Для оформлення галереї застосувати наступні стилі:

• Застосувати до елементів figure обтікання справа, поле справа 1em;

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

• Застосувати до зображень такі параметри: границя 2 пікселя сірого кольору, висота 300 пікселів ширина 400пікселів, object-fit: none; 

Приклад можна побачити на рисунку прикріпленому до уроку

Здайте результат виконання у вигляді скріншоту

4. Рефлексія

Виконайте тестове завдання, здайте скріншот з виконаним тестом

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

Поняття блочної моделі

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

Блок елемента оточують такі властивості (рис. 1) :

• padding - відступ, простір між контентом та границею.

• border - границя, лінія вздовж кожного края блока. Границя може відображатись як для всіх сторін одразу, так і для будь-якої з них або комбінації сторін.

• background-color - колір фона, заповнює простір всередині границі включаючи область відступу.

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

Запис властивостей padding

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

padding-top :

padding-right :

padding-bottom :

padding left :

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

padding : 5px 10 px 20px 10px;

Запис властивостей margin

Аналогічно до властивостей padding значення полів мають дві форми запису: повну і скорочену. У повній формі записуються окремо значення для верхнього, правого, нижнього і лівого полів.

margin-top :

margin-right :

margin-bottom :

margin-left :

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

margin: 5px 10 px 20px 10px;

Запис границь

Границя може мати 3 властивості, а саме колір, товщина та стиль. Цим трьом властивостям відповідають три записи :

border-color :

border-width :

border -style :

Як і з полями та відступами властивість border має скорочений запис :

border : thin dotted black;

Для визначення товщини границі можна використовувати три ключових слова thin (тонка),  medium (середня) і thick (товста), або значення в пікселях. 

Колір можна задати за його назвою ( наприклад green, blue, yellow, orange...) або у форматі rgb або rgba, чи скориставшись його шістнадцятковим представленням (наприклад #eeffc3).

Окремої уваги заслуговує стиль границі (рис. 3) який може приймати різні значення : solid, dashed, dotted, double, groove, inset, outset, ridge, none.У властивості border також є можливість окремо форматувати кожну границю : border-top, border-right, border-bottom, border-left;

Встановлення фонового кольору

В CSS можна встановити фоновий колір як для всієї сторінки, так і для окремого елемента. Для цього використовується властивість background-color. Наприклад для того щоб встановити абзацу зелений фоновий колір можна скористатись наступним правилом :

p { bakcground-color : green; } або p { background-color : rgb(0,255,0); }

Вивчаємо:

HTML (англ. HyperText Markup Language — мова розмітки гіпертексту) — це мова тегів, засобами якої здійснюється розмічання вебсторінок для мережі Інтернет. Браузери отримують HTML-документи з вебсервера або з локальної пам'яті й передають документи в мультимедійні вебсторінки. HTML описує структуру вебсторінки семантично і спочатку включені сигнали для зовнішнього вигляду документа.

Для створення html документу використовуються текстові редактори. Середовище інтерпритації html коду є браузери.

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

2. Занотуйте базову розмітку вебсторінки та основні теги html

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

4* Перегляньте відео за посиланням (до 33 хвилини)

Вивчаємо:

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

2. Прочитайте та випишіть основні види сайтів:

Landing Page

Сторінка-вітрина, також лендінг (англ.. Landing page) – це веб-сторінка, яка відкривається при натисканні на рекламне оголошення чи лінк. «Цільова сторінка» є логічним продовженням рекламного оголошення або посилання. Часто «лендінги» пов'язані з соціальними медіа, розсилками електронною поштою або маркетинговими кампаніями пошукових двигунів (контекстною рекламою) з метою підвищення ефективності реклами. «Лендінг» може бути будь-якою сторінкою сайту або спеціально створеною окремою сторінкою. Загальна мета «лендінгу» перетворення (конверсії) відвідувачів сайту в потенційних покупців, тому її ще часто називають «приманка для клієнтів».

Сайт-візитка

Сайт-візитка найчастіше складається з декількох сторінок: 

інформація про фахівця; 

сторінка з послугами та цінами; 

сторінка з відгуками про роботу і портфоліо; 

контактна інформація для зв'язку. 

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

Форум

Перші форуми з'явилися на початку 2000-х, але все ще залишаються популярним місцем спілкування. Форум – це сайт для спілкування, тут створюють теми і допомагають один одному в рамках однієї загальної тематики.

Найчастіше форуми створюють на наступні, в основному, вузькі теми:

сім'я та діти; 

відносини; 

стиль; 

iгри; 

фінанси; 

і інші популярні теми.

Блог

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

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

Блоги створюються для: 

самовираження; 

самопіару і залучення уваги; 

заробітку прямими або непрямими методами. 

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

Почати вести блог досить просто. Наприклад, на платформі livejournal або blogger. Можна замовити розробку блогу у фрілансера або у веб-студії.

Сайти новин

Відмінна риса сайту новин – відвідуваність (понад 3 000 відвідувачів на добу) і вид контенту. Залежно від охоплення і масштабу можна поділити на міські, обласні новинні сайти, новинні сайти в масштабах держави і світу.

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

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

Інформаційні сайти 

Інформаційні сайти (ще називають SEO-сайти) мають дуже схожий вигляд на сайт новин, але мають ряд відмінностей. SEO-сайти створюються для надання відвідувачам того, що цікавить їх. 

Основне завдання SEO-сайту – вихід в ТОП пошукової видачі за певними запитами. З цією метою пишуться і оптимізуються статті, складається ядро сайту, проводиться аналіз і моніторинг для поліпшення ресурсу і контенту. 

Корпоративні сайти

Сайт для середніх і великих компаній.Створюється для публікації такої інформації: 

Про компанію; 

Про вакансії; 

Про товари, послуги; 

Про партнерів; 

Про контактної інформації. 

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

Інтернет-магазини

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

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

Інтернет-портали

Iнтернет-портал – тип сайту, який містить різні блоки, сервіси, новини і корисні матеріали. Найбільш популярний формат порталів – міські портали. Міські портали надають різну інформацію про те чи інше в місті чи області: новини, прогноз погоди, вакансії, каталоги компаній, оголошення та ін.

Портали досить складний в розробці вид сайту, тому що вимагає великої команди фахівців.

Онлайн-сервіси

Онлайн-сервіси дещо відрізняються від інших видів сайтів. Головне завдання такого сайту – здійснення певних процесів онлайн.Найбільш популярні і, ті що мають великий попит онлайн-сервіси: 

Фріланс-біржі; 

Органайзери та календарі; 

Кредитні калькулятори; 

Редактори документів; 

Онлайн-бухгалтерія; 

Онлайн CRM-системи 

Хмарні файлові сховища.

3. Опрацюйте ст. 142 - 144 підручника https://issuu.com/kreidaros/docs/informatyka-11-klas-rudenko-2019/142 

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

Вивчаємо

SEO (від англ. Search Engine Optimization — пошукова оптимізація) — маркетингове поняття, що охоплює цілий комплекс заходів. Це процес коригування HTML-коду, структури та текстового наповнення (контенту) сайта; контроль зовнішніх чинників на відповідність вимогам алгоритму пошукових систем.

Просування сайта — комплекс заходів щодо збільшення відвідуваності веб-ресурсу цільовими відвідувачами.

Опрацюйте основні засоби просування сайту та способи опрацювання даних сайту пошуковими роботами

Завдання

Опрацюйте § 11.23

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

HTML (англ. HyperText Markup Language — мова розмітки гіпертексту) — це мова тегів, засобами якої здійснюється розмічання вебсторінок для мережі Інтернет. Браузери отримують HTML-документи з вебсервера або з локальної пам'яті й передають документи в мультимедійні вебсторінки. HTML описує структуру вебсторінки семантично і спочатку включені сигнали для зовнішнього вигляду документа.

Для створення html документу використовуються текстові редактори. Середовище інтерпритації html коду є браузери.

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

2. Занотуйте базову розмітку вебсторінки та основні теги html

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

4* Перегляньте відео за посиланням (до 33 хвилини)

5. Ознайомтесь з html тегиами у довіднику тегів

https://w3schoolsua.github.io/tags/index.html#gsc.tab=0 

Тема. Проектування та створення об'єктів мультимедіа

Мета: Вивчити основи проектування та створення об'єктів мультимедіа, використовуючи різноманітні інструменти та техніки.

1. Під час виконання завдань дотримуйтесь правил безпечної роботи за компʼютером

Перегляньте та повторіть правила роботи за компʼютером (зображення "Правила роботи за компʼютером")

2. Вивчаємо

• Ознайомтесь з основними поняттями, занотуйте основні поняття в зошит

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

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

• Ознайомтесь з основними елементами програмного забезпечення для створення обʼєктів мультимедіа

Перегляньте зображення 1, проаналізуйте призначення інструментів

1 — файли проєкту ; 2 — панель інструментів; 3 — переходи; 4 — монтажний стіл; 5 — екран перегляду; 6 — кнопка збереження поточного кадру.

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

https://issuu.com/kreidaros/docs/informatika-10-klas-bondarenko-2018/163

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

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

Виконайте інтерактивну вправу 

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

Одним із засобів моделювання предметної області на етапі проектування БД є модель сутність-зв'язок, яку називають ER-моделлю. У ній застосовуються графічні засоби. Основними поняттями такої моделі є сутність, атрибут і зв'язок.

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

Атрибут – це властивість сутності. Зв’язок фактично встановлює взаємодію між сутностями .

Приклад: Сутність "ХОЛОДИЛЬНИК" характеризується такими атрибутами, як назва, маса, ціна, потужність.

Конкретний холодильник є екземпляром сутності "ХОЛОДИЛЬНИК".

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

В реляційній БД сутності відповідає таблиця, а екземпляру – запис.

Головне на етапі логічного проектування БД полягає у виконанні таких основних дій:

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

•  визначити кількість, назву та структуру кожної таблиці;

• визначити вміст кожної таблиці;

• установити зв’язки між таблицями.

Перегляньте відео створення ER-діаграми

Виконайте завдання практичної роботи та надішліть таблицю

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

Повторіть § 9 - 18

Статистика

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

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

Варіаційний ряд — це ряд розподілу, побудований за кількісною властивістю. 

Частота — число, яке показує, скільки разів зустрічається кожна варіанта. 

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

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

Обсяг вибірки n — це кількість варіант у вибірці, тобто кількість джерел інформації.

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

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

Опрацюйте теоретичний матеріал

Сучасні інформаційні технології використовуються і для здійснення доступу до своїх розрахункових рахунків клієнтами банків. Їх називають інтернет­банкінгом (е-банкінгом).

Користувач дистанційно, не виходячи з дому або знаходячись десь далеко, може увійти у свій акаунт на сайті банку та:

•  отримувати інформацію про залишки грошей на рахунку й контролювати їх рух;

• самостійно блокувати й розблокувати свої платіжні картки;

• переводити гроші з картки на картку;

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

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

• оплачувати постійні послуги (школа, дитячий садок, стоянка автомобіля, охорона, оплата за кредит);

• самостійно формувати квитанції по здійснених платежах і роздруковувати на власному принтері у зручний спосіб;

• відкривати депозитні рахунки;

• контролювати і здійснювати операції в системі інтернет-банкінгу за допомогою мобільного телефона.

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

На сьогодні майже всі банки мають свій інтернет-банкінг (Приват24, Ощад24/7, ПУМБ online тощо), що спрощує та полегшує клієнтам банків доступ до власних грошових заощаджень. Деякі банки розширюють коло послуг, які клієнт може отримати в інтернет-банку: купити квитки на транспорт, концерти, оплатити покупку в інтернет-магазині, замовити довідку про стан рахунків тощо.

Перші спроби надання банками таких онлайн-послуг було здійснено в США у 80-х роках ХХ ст., на сьогодні такими послугами користуються майже всі вкладники.

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

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

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

Сьогодні онлайн-продажі та інтернет-магазини набувають дедалі більшу популярність. В інтернет-магазинах можна купити будь-які види товарів: від автомобіля до продуктів харчування. Найвідоміші інтернет-магазини: Розетка, Lamoda, Prom.ua, ЖЖук тощо.

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

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

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

•  Електронні петиції (https://petition.president.gov.ua/);

• Єдиний державний портал надання адміністративних послуг (https:// poslugy.gov.ua/);

• Електронна система публічних закупівель (https://prozorro.gov.ua/);

• Єдиний державний реєстр декларацій (https://portal.nazk.gov.ua);

• Громадське обговорення проектів нормативно-правових актів на сайті Уряду України (www.kmu.gov.ua/ua/dostup-do-publichnoyi-infor maciyi /gromadske-obgovorennya-proektiv-normativno-pravovih-aktiv);

• Центр громадянських свобод (http://ccl.org.ua);

• Інформаційна система Конкурс (vstup.info);

• Інформаційна система управління освітою (https://isuo.org/);

• Електронний кабінет платника податків (https://cabinet.sfs.gov.ua/ cabinet/faces/index.jspx);

• Система електронного документообігу (http://sed.reforms.in.ua/) тощо

Впровадження системи електронного урядування стикається з низкою об’єктивних суттєвих перешкод. Ці проблеми тісно пов’язані з новими викликами інформаційного суспільства і належать до економічних, політичних, соціальних, безпекових та ін. Усі ці проблеми об’єднуються в глобальну проблему «цифрового розриву» (digital divide) — нерівного доступу громадян до електронних ресурсів і публічної інформації.

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

Завдання

1. Відкрийте зошит та запишіть:

5 вересня

Сучасні інформаційні системи. Людина в інформаційному суспільстві

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

5. Виконайте тестові завдання, та надішліть скріншот вчителю (Viber, 380508160159), обов'язково вказуйте прізвище та ім'я. Зверніть увагу, виконання тесту буде доступно лише до 13 вересня!

6. Сфотографуйте та надішліть фото конспекту вчителю!

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

Повторюємо

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

Авторське право — це сукупність прав автора (та його правона­ ступників) щодо створення або використання твору літератури, науки, мистецтва тощо.

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

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

Найбільш поширені помилкові судження щодо фотографій в мережі Інтернет:

- якщо фотозображення викладено в мережу Інтернет, автор такого зображення автоматично надає дозвіл на його вільне використання;

- якщо фотозображення розміщено в соціальних мережах його вважають об'єктом, який можна використовувати для будь-яких цілей та без будь-яких обмежень;

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

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

Повторення

Тег <iframe> ... </iframe> визначає вбудований фрейм (кадр або вікно). Вбудований фрейм використовується для вбудовування іншого документа в поточний HTML-документ. Тег iframe може бути використаним для додавання мультимедійних об'єктів із зовнішніх ресурсів.

Тег iframe має велику кількість атрибутів для налаштування, тож розглянемо основні:

• width - ширина фрейму;

• height - висота фрейму;

• title - заголовок;

• autoplay - автоматичне програвання при завантаженні;

• src - адреса вебресурсу або мультимедійного об'єкту що вставляється.

Узагальнення та систематизація знань

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

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

Тег <iframe> ... </iframe> визначає вбудований фрейм (кадр або вікно). Вбудований фрейм використовується для вбудовування іншого документа в поточний HTML-документ. Тег iframe може бути використаним для додавання мультимедійних об'єктів із зовнішніх ресурсів.

Приклад (додавання відео з сервісу youtube)

<iframe width="560" height="315" src="https://www.youtube.com/embed/BIz02qY5BRA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Параметри програвання мультимедійних об'єктів

Тег iframe має велику кількість атрибутів для налаштування, тож розглянемо основні:

• width - ширина фрейму;

• height - висота фрейму;

• title - заголовок;

• autoplay - автоматичне програвання при завантаженні;

• src - адреса вебресурсу або мультимедійного об'єкту що вставляється.

Велика кількість вебресурсів, що містять мультимедійний контент - дозволяють "ділитися" мультимедійним контентом, шляхом генерації iframe тегу. Розглянемо не прикладі сервісу youtube.

Повторення

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

1.    Відкрийте Текстовий редактор, створіть новий документ index.html і збережіть його .

2.     Створіть веб-сторінку і розмістіть на ній:

1)    Аудіо файл з альтернативним текстом

2)    Відео-файл з автозапуском (може працювати неправильно або неспрацювати через несумісність з веб-програвачем) і альтернативним текстом;

3)    Відео-файл з атрибутом керування і альтернативним текстом;

4)    Відеофайл з YouTube.

3.   Оформіть веб-сторінку на власний смак: додайте заголовки, підписи, посилання, кнопки, фонове заповнення (колір або картинка), зображення і т.д…

4.  Збережіть свою роботу і перегляньте результат у браузері .

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

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

:root{

padding:0;

margin:0; //скидання стилів браузера

box-sizing: border-box;

}

* {

box-sizing: inherit;

}

figure { //встановлюємо розмір елемента

width: 480px;

height: 360px;

border: 1px dashed black; //додаємо тонку пунктирну лінію навколо елементу

overflow: hidden; //все що виходить за границю елемента figure ховаємо

}

figure img{

max-width: 100%; //максимальна ширина зображення не перевищує 100% ширини

//елементу figure

}

figure figcaption{

font-size: 1.5em; //встановлюємо розмір стиль та вирівнювання підпису

font-style: italic;

text-align: center;

}

figure:hover img { //при наведенні вказівника на figure застосовуємо анімацію до img

animation: zoomIn; //вказуємо назву анімації

animation-duration: 2s; //та тривалість анімації

}

@keyframes zoomIn { //визначаємо ключові кадри анімації

from{

transform: scale(1.0); //transform :  функція перетворення

}

to{

transform: scale(1.8); //scale(1.8) означає що ми збільшуємо зображення в 1.8 разів

}

}