Дистанційне навчання КЗШ №99: Інформатика (8 клас)

19.03.2020

З'явилось питання? oljaa60@ukr.net

Види сайтів та цільова аудиторія

Переглянь презентацію та пройди тест за посиланням.
(виконати на 20.03.2020)

ТЕСТ

20.03.2020

Ознайомтесь з теоретичною частиною, переглянте презентацію, ВИКОНАЙ завдання з останнього слайду. Результат (скріншот чи посилання надсилай на електронну пошту oljaa60@ukr.net)
(виконати на 26.03.2020)

Планування веб-сайту, дизайн веб-сторінки, принципи розміщення контенту

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

Баланс

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

- симетричний баланс

- асиметричний баланс

- дисбаланс

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

Контраст

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

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

Акценти

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

Ритмічність

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

Єдність

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

Переглянь відеоролик, якщо виникли питання з практичної роботи.

02.04.2020

Створення та публікація веб-ресурсів

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

1. У вибраній системі створити сайт, присвячений життю класу. (blogger.com)

2. Створити пропоновані сторінки, наповнити їх текстовим та графічним матеріалом.

Головна — клас, фото класу, список учнів, класний керівник.

Моя школа — фото, адреса, адміністрація, контактні дані.

Це я — фото, хобі тощо.

3. Організувати на веб-сайті чат, опитування, календар.

Результат (скріншот чи посилання надсилай на електронну пошту oljaa60@ukr.net)

03.04.2020

Поняття про структуру веб-сайту

Ознайомся з теоретичною частиною за посиланням.
Ключові поняття теми: структура веб-сайту, гіперпосилання, навігація сайту.
Після вивчення нового матеріалу давайте відпочинемо та пограємо в гру.

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

Сенс гри використовуючи лише гіперпосилання на сайті вікіпедії, перейти від однієї статті до іншої. Назви статей потрібно завчасно обрати. Краще грати з друзями і обрати назви статей один одному, хто перший знайде статтю той і переміг. Відео-приклад.

Домашне завдання: виписати ключові поняття теми до зошита. Фото виконаної роботи надсилай на електронну скриньку (oljaa60@ukr.net).

09.04.2020

Графічні й мультимедійні елементи на веб- сторінках

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

Оберіть вже існуючу сторінкуз вашим класом. Далі додамо відео, натискаємо на кнопку:

Обираємо який саме ми хочимо завантажити відеоматеріал.

Після чого натискаємо кнопку "обрати".

Завантаження презентації дещо складніше. Я пропоную переглянути відеоролик та спробувати самостійно розмістити презентацію.

Посилання на блог надсилай на електронну скриньку (oljaa60@ukr.net).

10.04.2020

Мова описання гіпертекстових документів.

Теги й атрибути

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

В 1989 році Тім Бернерс–Лі запропонував упровадити гіпертекстову систему документів. Наприкінці 1991 року він опублікував у Інтернеті перший загальнодоступний опис мови розмітки HTML — «HTML теги». Він же створив і першу програму для перегляду гіпертекстових документів — браузер. Бернерс–Лі розглядав HTML як похідну мову від SGML, і в середині 1993 року Спеціальна Комісія Інтернет–розробок (IETF) офіційно визначила її такою, опублікувавши першу специфікацію HTML.

Наразі більшість веб–документів створюють за допомогою мови розмітки гіпертексту HTML (англійською Hyper Text Markup Language — мова розмітки гіпертексту). Призначення HTML — описати зовнішній вигляд документа за умови, що розміри екрану і масштаб подання тексту можуть змінюватися у процесі перегляду.

Розширення (тип) гіпертекстового документа, написаного мовою HTML, — htm або html.

Гіпертекстовий документ та його елементи

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

Ці коди визначені у мові програмування HTML – мова гіпертекстової розмітки.

Веб–сторінка – це документ у форматі HTML. Процес вставляння в текст кодів HTML називають розміткою.

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

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

Теги — вказівки HTML — записують у «кутових» дужках, утворених символами «<» і «>» — «менше» й «більше».

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

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

Для створення HTML–файлу можна використати найпримітивніший текстовий редактор. Наприклад, Блокнот (NotePad) для ОС Windows. Інколи, у середовищі цих редакторів здійснено виділення кольором дескрипторів. Наприклад, у середовищі Kate для ОС Linux Mint KDE. Хоча привабливішим видається використання спеціалізованих редакторів з поданням сторінки різними способами. Наприклад, редактора Kompozer чи Sublime Text.

Текстові елементи веб–сторінки, теги та їх атрибути

Структура HTML–документа (згідно зі стандартом HTML 4.01).

Оголошення типу документа (англійською Document type declaration, Doctype, DTD) — на початку документа тегом <!DOCTYPE>.

Заголовок документа, розташований у межах контейнера <head>, — містить опис загальних технічних відомостей або додаткову інформацію про документ, яку не відтворюють безпосередньо у браузері.

Тіло документа, розташоване у межах контейнера <body> або <frameset>, — містить основну інформацію про опис документа.

Структура HTML–документа

<!doctype html>

<html>

<head>

<title>Заголовок документа</title>

</head>

<body> Змістовна частина документа </body>

</html>

Тег html вказує браузеру, що він опрацьовує HTML–код. Все, що розташовано між парними тегами <html> і </html> є HTML–документом.

Атрибутом version можна задати версію HTML: <html version="4.01"> ;

Атрибутом lang можна задати основну мову документа, скажімо українську: <html lang="uk–ua"> .

Назва документа — текст між тегами <title> і </title>.

До тексту назви не застосовують форматування. Назва має бути короткою, інформативною і адекватно відображати зміст документа.

У заголовку документа можуть міститися деякі важливі дані, які використовуються браузерами, але в більшості випадків не відображаються, — метадані. Для цього використовується елемент meta, який задають одинарним тегом <meta> з такими атрибутами:

name — назва змінної;

content — значення змінної;

charset — кодування документа, наприклад utf–8;

lang — код мови, що визначає мову значень змінної;

http–equiv — вказує назву додаткового параметра.

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

Значення атрибута http–equiv та опис дії атрибута content (після тире):

Expires — задає дату і час оновлення документа;

Content–Language — аналог атрибуту lang тега html;

Content–Type — вказує тип документа та кодування символів;

Refresh — задає інтервал у секундах між оновленнями вмісту документа.

Приклади опису властивостей тега body:

bgcolor="white" — задати білий колір тла;

text="black" — задати чорний колір тексту;

background="picture.jpg" — задати зображення для тла;

bgproperties="fixed" — зображення тла не прокручувати;

style="text–align:justify;" — вирівнювати текст за шириною.

Крім цих атрибутів тега body використовують і такі:

link — колір невідвіданих гіперпосилань;

vlink — колір відвіданих гіперпосилань;

alink — колір гіперпосилань, обраних користувачем;

contenteditable — дозвіл (значення true) або заборона (значення false для елемента body або inherit для усіх інших елементів) користувачу редагувати HTML–документ у браузері.

Для введення в HTML–документ зарезервованих символів мови HTML (наприклад, > або &) або символів, які неможливо ввести з клавіатури, передбачено механізм посилань на символи.

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

Теги форматування символів (дескриптори стилів) завжди є парними:

<b>…</b> — жирне написання;

<i>…</i> — курсив;

<u>…</u> — підкреслення;

<strike>…</strike> — перекреслення;

<tt>…</tt> — стала ширина літер;

<sub>…</sub> — нижній індекс;

<sup>…</sup> — верхній індекс;

<big>…</big> — збільшити шрифт;

<small>…</small> — зменшити шрифт;

<em>…</em> — логічний наголос

<cite>…</cite> — цитування

<code>…</code> — текст коду

<samp>…</samp> — результат виконання програми

<strong>…</strong> — виділення

<dfn>…</dfn> — текст означення (залежно від браузера);

<var>…</var> — назва змінної або параметра

<kbd>…</kbd> — назва клавіші

<xmp>…</xmp> —текст–зразок

У поданому вище переліку перші 7 контейнерів (до порожнього рядка) називають фізичними, а наступні — логічними.

Форматування тексту мовою HTML виконують з використанням спеціальних тегів:

<h1>…</h1>, <h2>…</h2>, <h3>…</h3>, <h4>…</h4>, <h5>…</h5>, <h6>…</h6> — відображення заголовків відповідно 1, 2, 3, 4, 5 і 6 рівнів — перелічено у порядку зменшення розміру шрифту.

<p>…</p> — створення нового абзацу без відступу у першому рядку, між абзацами буде порожній рядок;

<pre>…</pre> — відображення тексту у повній відповідності до форматування, здійсненого за допомогою текстового редактора (пропуски, невідтворювані символи кінця рядка);

<nobr>…</nobr> — заборона перенесення слів, яку можна подавити тегом <wbr>;

<center>…</center> — центрування;

<br> — обривання рядка без пропуску рядка;

<hr> — проведення горизонтальної лінії.

Перші два види тегів (з перелічених вище) мають атрибут align з такими можливими значеннями:

center — центрування;

justify — вирівнювання за шириною;

left — вирівнювання за лівим краєм;

right — вирівнювання за правим краєм

і атрибут title — текст підказки.

Крім цього тег <p>…</p> має атрибут tabindex, який задає порядковий номер абзацу при переміщенні HTML–документом у вікні браузера за допомогою клавіші Tab.

Колір тексту можна задати його назвою англійською мовою:

aqua — бірюзовий;

black — чорний;

blue — світло–синій;

fuchsia — бузковий;

gray — сірий;

green — зелений;

lime — салатовий;

maroon — бордовий;

navy — синій;

olive — оливковий;

purple — фіолетовий;

red — червоний;

silver — сріблястий;

teal — сіро–зелений;

white — білий;

yellow — жовтий.

Колір можна задати кодами кольорової моделі RGB, як це роблять при роботі з графічним редактором. Наприклад, #ff7800.

Контактну інформацію записують у контейнері <address>…</address>.

Коментар записують у контейнері <comment>…</comment> або використовують тег <!––текст––>. Текст всередині цих тегів на екран браузера не буде показано.

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

Гіперпосилання – це один з найголовніших компонентів html–документів. Саме завдяки цим звичайним посиланням, Інтернет такий простий у використанні. Розглянемо найпростіші варіанти вставки гіперпосилань: посилання можуть бути як на сайті, так і на сторінці, як на свій сайт, так і на зовнішній, тому коди потрібно розрізняти між собою.

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

1. Для створення посилання на сайт, нам потрібно використовувати код:

Де, замість *** – посилання на сайт у форматі «http: // ….», а замість ***** – текст, під який поміщається гіперпосилання.

Приклад: <a href = “https://jak–zrobiti–samomu.com.ua/”>Журнал Як зробити все </a>

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

<a href =”https://jak–zrobiti–samomu.com.ua/yak–zrobiti–perekaz–webmoney/”>Як зробити переказ Вебмані? </a>

3. Як створити гіперпосилання в html на зовнішній сайт?

Для зовнішніх посилань, код слід трохи змінити. Щоб зробити посилання на інший сайт, використовуємо код: <a href = “***”> ***** </ a>

Де, замість *** – посилання на зовнішній сайт у форматі «http: // ….», а замість ***** – текст, під який поміщається гіперпосилання. Приклад: <a href = ”https://kzshkola99.blogspot.com/”> Головна сторінка</a>

16.04.2020

Створення простої веб-сторінки.

Виконай практичну роботу за посиланням. Готовий документ надсилай на електронну скриньку (oljaa60@ukr.net). Теги HTML їх опис, синтаксис та приклад використання.

17.04.2020

Правила ергономічного розміщення відомостей на веб-сторінці.

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

Завдання. Створити веб-сайт засобами безкоштовного сервісу Google sites, використовуючи надане наповнення.
Посилання на сайт надсилай на електронну скриньку (oljaa60@ukr.net).

23.04.2020

Веб 2.0 і соціальні сервіси. Соціальні мережі. Онлайнові спільноти.

Виконай вправу:

24.04.2020

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

Таблицю надсилай на електронну скриньку (oljaa60@ukr.net).

30.04.2020

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

Обери та завантаж програму для редагування відео. Можна використовувати і мобільні додатки. Назви можна взяти з презентація, аба за моєю рекомендацією: Kinemaster (мобільний додаток), Movavi Video Suite, Movie Maker, Free Video Editor.

07.05.2020

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

08.05.2020

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

Повторення раніше вивченого матеріалу

1. Які повідомлення називають мультимедійними?

2. Які програми для опрацювання мультимедійних об’єктів ви знаєте? Для чого призначені програвачі мультимедійних даних?

3. Які пристрої використовуються для створення і опрацювання мультимедійних повідомлень?

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

Аудіо- та відеодані зберігаються у файлах різних форматів. Файли аудіо мають розширення імені - wav, mid, flac, mp3 та ін. Файли відео мають розширення імені - mp4, wmv, mov, flv та ін.

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

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

Практичне завдання:

1. Записати процес створення формули в текстовому процесорі Word

2. Додати до записаного відео заставку з назвою на початку «Процес створення формул» та в кінці зі своїм іменем. Дизайн вибрати самостійно

3. Зберегти відео на робочому столі назвавши його своїм прізвищем та ім’ям

4. Збережене відео переформатувати в формат WMV.

5. Продемонструвати результат виконання вчителю.

14.05.2020

Кодування аудіо та відео. формати аудіо відеоданих.

Переглянь відеоурок.

15.05.2020

Створення сценарію відео-ролика.

  Розглянемо процес розробки сценарію відеофільму на прикладі створення відеофільму «Безпаперова інформатика» про реалізацію ідей В.М. Глушкова відносно використання комп’ютерних засобів у наші дні. Він говорив, що на початок двадцять першого століття основна маса інформації буде зберігатися в безпаперовому вигляді - у пам’яті ЕОМ.
   Для реалізації цих ідей під керівництвом В.М. Глушкова було розроблено серію ЕОМ МИР (рос. Машина для Инженерных Расчётов - машина для інженерних розрахунків) - прообрази персональних комп’ютерів. Основна ідея таких комп’ютерів - їх широке використання всіма верствами населення, не залежно від рівня освіти і віку.
   Враховуючи мету нашого відеофрагменту - демонстрація на уроці інформатики в ході розповіді про академіка В.М. Глушкова, складемо сценарій. Сценарій складається зі сценарних кадрів - опису змістових фрагментів відеофільму та подій, що в них відбуваються.
   1. Кадр 1. Титульна сторінка:
       • заголовок - Безпаперова інформатика;
       • колір тла - світло-зелений, колір літер - темно-зелений;
       • тривалість показу - 7 с;
       • звук - загальний фоновий звук з файлу;
       • візуальний ефект - Кінематографічні згасання, зліва;
       • ефект переходу на наступний кадр - розчинення, мозаїка.
   2. Кадр 2. Фотографія В.М. Глушкова:
       • фото з файлу;
       • тривалість показу - 6 с;
       • звук - дикторський текст, що починається на цьому кадрі і закінчується на наступному; тривалість звучання - визначається швидкістю відтворення тексту;
       • візуальний ефект – відсутній;
       • ефект переходу на наступний кадр - розчинення, мозаїка;
       • дикторський коментар - Директор Інституту кібернетики Академії наук України академік В.М. Глушков одним із завдань використання комп’ютерної техніки вважав перехід до безпаперової інформатики. Він говорив, що на початок двадцять першого століття основні обсяги інформації будуть зберігатися в безпаперовому вигляді - у пам’яті ЕОМ. І людина, яка не буде вміти працювати з комп’ютером і використовувати цю інформацію, буде подібна до того, хто на початку XX століття не вмів ані писати, ані читати.
   3. Кадр 3. Відео за участі В.М. Глушкова:
       • відео з файлу;
       • тривалість показу — завершується одночасно з дикторським текстом;
       • звук - загальний фоновий звук з файлу;
       • візуальний ефект - відсутній.
   4. Кадр 4. Заголовок:
       • текст - Послухаємо самого Віктора Михайловича Глушкова;
       • колір тла - світло-зелений, колір літер - темно-зелений;
       • тривалість показу - 7 с;
       • звук - загальний фоновий звук з файлу;
       • візуальний ефект - Кінематографічні згасання, зліва;
       • ефект переходу на наступний кадр - розчинення, мозаїка.
   5. Кадр 5. Відеорозповіді В.М. Глушкова про безпаперову інформатику:
       • відео з файлу;
       • тривалість показу - 48 с;
       • звук - звук з файлу відео;
       • візуальний ефект - відсутній;
       • ефект переходу на наступний кадр - розчинення, мозаїка.
   6. Кадр 6. Фотографія В.М. Глушкова разом з розробниками комп’ютера МИР-1:
       • фото з файлу;
       • тривалість показу - 6 с;
       • звук - загальний фоновий звук з файлу;
       • підпис - Для того щоб кожна людина могла працювати з ЕОМ, потрібно перейти до використання малих комп’ютерів - В.М. Глушков висуває ідею створення комп’ютерів МИР;
       • колір літер - помаранчевий, колір фону - темно-зелений;
       • візуальний ефект - відсутній;
       • ефект переходу на наступний кадр - розчинення, мозаїка.
   7. Кадр 7. Фотографія комп’ютера МИР-1:
        • фото з файлу;
        • підпис - Комп’ютер МИР мав малі розміри і зручний механізм введення-виведення даних - електричну друкарську машинку;
        • усі інші значення властивостей аналогічні до кадра 6.
   8. Кадр 8. Фотографія комп’ютера МИР-2:
       • фото з файлу;
       • підпис - Комп’ютер МИР-2 мав додаткову систему введення даних - світлове перо;
       • усі інші значення властивостей аналогічні до кадра 6.
   9. Кадр 9. Фотографія комп’ютера МИР-3:
       • фото з файлу;
       • підпис - Комп’ютер МИР-3;
       • усі інші значення властивостей аналогічні до кадра 6.
   10. Кадр 10. Заключні титри:
       • титри - Шкільна відеостудія «Майбутнє»:
       • оператор - Михайленко Степан;
       • автор тексту - Коваленко Оксана;
       • монтаж - Іваненко Микола;
       • колір тла - жовто-зелений, колір літер - білий;
       • тривалість показу — 10 с.

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

Використовуючи можливості програми OpenShot або Windows MovieMaker cтворіть проект "Моє захоплення", для якого підготуйте фотографії та відеозаписи. Використайте відеопереходи між зображеннями та відеозаписами. Додайте назву фільму й титри. Готовий проект збережіть як файл фільму у своїй папці. Проект надішліть на електронну адресу вчителя (yasenchuk.1school@gmail.com)

4. Підручник: стор. 91-96

21.05.2020

Захоплення аудіо та відео створення аудіо- відеофрагментів.

Опрацюй підр. п.12
Підготуй аудіо, зображення та фрагменти відео для проекта.

22.05.2020

Побудова аудіо та відеоряду. Додавання до кліпу ефектів.

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

28.05.2020

Налаштування часових параметрів аудіо- та відеоряду.
Перегляньте презентацію:

Оберіть тему для власного відеофільму.
Підберіть текст сценарію майбутнього фільму.
Знайдіть в Інтернеті зображення та відео, які відповідать тексту вашого сценарію.
Зробіть аудіозапис тексту.
Змонтуйте перший варіант майбутнього фільму у програмі "Киностудія" (можна використати будь-яку програму для створення відеофільмів), використовуючи зображення, відео та звукозапис.
Додайте відеопереходи та відкоригуйте фільм.
Збережіть перший варіант фільму у відеоформаті.
Знайдіть в Інтернеті мелодію, яку ви використаєте для фонового аудіозвучання.
Відкрийте створений перший варіант фільму у програмі "Киностудия" та додайте фонуву музику.
Відкоригуйте гучність фонової музики та збережіть фільм у відеоформаті.
Покажіть результат вчителю.

29.05.2020

Сервіси розміщення аудіо та відео файлів в Інтернеті.
Перегляньте презентацію:

Домашнє завдання: підготувати відео до публікації в Інтернеті