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

Перейдіть за посиланням на сайт "Українського веб-довідника" та повторіть основні три технології вебпрограмування: 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 разів

}

}

Додавання зображень

Додавання рисунків за допомогою елементу <figure>

В специфікації стандарту HTML5 було додано нові семантичні елементи для додавання рисунків на веб-сторінку. Контейнером для малюнку є HTML-елемент <figure>, а текст підпису до малюнку розміщується в елемент <figcaption>. Нижче (рис. 2) приведено приклад додавання зображення з використанням елементу <figure>.

Веб-сторінка

Розглянемо структуру веб-сторінки на прикладі якої ми розглянемо використання адаптивного веб-дизайну. Сторінка містить інформацію про кімнатні рослини. Інформація про кожну рослину разом з заголовком поміщені в окремий div тег з призначеним класом. При достатньо малій ширині екрану наша веб-сторінка виглядає так як на рисунку 2.

Тепер збільшимо розмір вікна веб-браузера для того щоб побачити як виглядатиме наша веб-сторінка на екрані комп'ютера (рис. 3).

Створимо дизайн веб-сторінки для настільної версії сайту використовуючи CSS-сітку

:root{

max-width: 1440px;

margin: 0 auto;

}

.grid {

display: grid;

grid-template-columns: repeat(4, 3fr);

grid-template-rows: 2fr 4fr 4fr;

grid-gap: 1em;

margin-left: 2em;

}

p {

font-size: 1vw;

}

h1{

font-size: 6vw

}

h2 {

font-size: 2vw;

}

h2 {

border-bottom: 0.1em solid black;

}

header {

padding: 3em 2em;

background-size: cover;

}

Протестуйте роботу веб-сторінки

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

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

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

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

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