ІНФОРМАТИКА і не тільки... 

***

  • Інструктаж БЖД
  • Комп’ютер і здоров’я
  • Статистика


    Онлайн всього: 1
    Гостей: 1
    Користувачів: 0

    Навчання та творчість

    Головна » Файли » УРОКИ / ПРАКТИЧНІ РОБОТИ / ПІДРУЧНИКИ

    У розділі матеріалів: 3128
    Показано матеріалів: 11-20
    Сторінки: « 1 2 3 4 ... 312 313 »

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

    Найкращі онлайн-редактори станом на початок 2026 року.


    1. Найкращі професійні та універсальні інструменти

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

    Назва Найкраще підходить для Основні переваги
    Figma UI/UX дизайн, прототипування, спільна робота Потужні "векторні мережі", хмарне збереження, величезна спільнота плагінів.
    Vectr Швидке створення логотипів та іконок Дуже простий інтерфейс, безкоштовний, є вбудовані уроки для навчання.
    Photopea Редагування файлів .AI та .SVG Виглядає як клон Photoshop, але чудово працює з векторами, підтримує майже всі формати.

    2. Детальний огляд популярних сервісів

    Figma (Браузерна версія)

    Хоча Figma часто сприймають як інструмент для сайтів, її векторний движок — один із найзручніших.

    • Чому обрати: Унікальна система точок (Vector Networks) дозволяє з’єднувати лінії під будь-яким кутом, що набагато простіше, ніж у класичному Adobe Illustrator.

    • Вартість: Безкоштовно для особистих проєктів.

    Vectr

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

    • Чому обрати: Кожен створений тобою макет має унікальну URL-адресу, якою можна поділитися з іншими для перегляду в реальному часі.

    • Вартість: Повністю безкоштовно.

    Boxy SVG

    Орієнтований суто на стандарт SVG. Це інструмент для тих, хто хоче чистого коду і стандартної векторної логіки.

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

    • Особливість: Велика бібліотека готових іконок та шрифтів Google Fonts.

    Graphite

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

    • Чому обрати: Він використовує "процедурне редагування" — ти можеш змінювати параметри фігур у будь-який момент без втрати якості. Це щось середнє між дизайном та програмуванням.


    3. Спеціалізовані та ШІ-інструменти

    Якщо тобі не потрібно малювати з нуля, а треба швидко отримати результат:

    1. Canva: Хоча це більше редактор макетів, вона має величезну бібліотеку векторних елементів, які можна перефарбовувати та масштабувати без втрати якості.

    2. AutoDraw (від Google): Використовує штучний інтелект. Ти малюєш кривий ескіз мишкою, а сервіс пропонує замінити його на професійну векторну іконку.

    3. Kittl: Фокусується на складних ілюстраціях та вінтажному дизайні. Має багато вбудованих інструментів для деформації тексту та об'єктів.


    Підсумок: Що обрати тобі?

    • Якщо хочеш професійно рости в дизайні — обирай Figma.

    • Якщо потрібно швидко відредагувати готовий файл (.ai, .eps) — використовуй Photopea.

    • Якщо ти новачок і хочеш створити простий логотип — спробуй Vectr.

    • Якщо ти не вмієш малювати, але потрібна іконка — допоможе AutoDraw.

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

    11 клас Інформатика | Переглядів: 6 | Завантажень: 0 | Додав: mirgorodschoolseven | Дата: 12.01.2026 | Коментарі (0)

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


    Слайд 1: Що таке векторна графіка?

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

    Слайд 2: Векторний редактор як інструмент дизайнера

    Це професійне середовище для творчості. Найпопулярніші інструменти: Adobe Illustrator, Inkscape (безкоштовний) або CorelDRAW. Тут ми не малюємо пензлем, як у Paint, а "конструюємо" об'єкти, керуючи їхніми параметрами.

    Слайд 3: Основні інструменти малювання

    У кожного редактора є базовий набір:

    • Інструменти фігур: Прямокутник, еліпс, багатокутник.

    • Олівець: Для малювання довільних ліній.

    • Перо (Pen Tool): Найважливіший інструмент для створення точних кривих.

    • Текст: Робота зі шрифтами як з об'єктами.

    Слайд 4: Анатомія векторного контуру

    Будь-яка лінія складається з:

    1. Вузлів (опорних точок): Вони фіксують положення лінії.

    2. Сегментів: Відрізків між вузлами.

    3. Напрямних (важелів): Вони визначають кут та ступінь вигину кривої.

    Слайд 5: Магія кривих Безьє

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

    Слайд 6: Створення складних об'єктів з базових фігур

    Дизайнери рідко малюють складні форми з нуля. Найчастіше вони використовують логічні операції (Pathfinder):

    • Об'єднання: Дві фігури стають однією.

    • Віднімання: Одна фігура "вирізає" шматок з іншої.

    • Перетин: Залишається лише спільна частина фігур.

    Слайд 7: Редагування вузлів та сегментів

    Навіть якщо ти намалював криву лінію, її завжди можна виправити. Ти можеш:

    • Додавати нові вузли для деталізації.

    • Видаляти зайві вузли для плавності.

    • Змінювати тип вузла: гострий (кутовий) або гладкий (закруглений).

    Слайд 8: Створення нових об'єктів з ламаних

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

    Слайд 9: Заливка та обводка

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

    • Stroke (Обводка): Товщина, колір та стиль лінії контуру.

    • Fill (Заливка): Колір, градієнт або текстура всередині об'єкта. Градієнти дозволяють зробити плоску векторну фігуру об'ємною та реалістичною.

    Слайд 10: Висновок: Чому це важливо?

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

    11 клас Інформатика | Переглядів: 6 | Завантажень: 0 | Додав: SvetlanaCh | Дата: 11.01.2026 | Коментарі (0)

    Важливо показати, як формули допомагають у реальному житті.

    5 практичних завдань для роботи в Excel або Google Таблицях, що охоплюють різні види функцій:

    Об'єднай ці завдання в один проект «Особистий бюджет та успішність», де на різних аркушах однієї таблиці будуть різні розрахунки. Це ідеально підходить для вимог 8 класу!

    1. Завдання «Аналітик оцінок» (Математичні та Статистичні функції)

    Контекст: У тебе є список учнів та їхні оцінки за контрольну роботу.

    • Завдання: 1. Обчисли суму всіх балів класу (SUM).
      2. Знайди середній бал класу (AVERAGE).
      3. Визнач найвищу та найнижчу оцінку в класі (MAX, MIN).
      4. Порахуй, скільки всього учнів писали роботу (COUNT).

    2. Завдання «Кишенькові гроші» (Статистичні функції)

    Контекст: Ти ведеш облік своїх витрат за тиждень (категорії: їдальня, проїзд, розваги).

    • Завдання: 1. Порахуй загальну суму витрат за кожен день. 2. Використовуючи функцію AVERAGE, дізнайся, скільки в середньому ти витрачаєш на день. 3. Використовуючи функцію COUNTIF, порахуй, скільки разів за тиждень твої витрати перевищували 50 грн.

    3. Завдання «Мрія про новий гаджет» (Фінансові функції)

    Контекст: Ти хочеш купити телефон за 12 000 грн. У тебе вже є 2 000 грн, і ти плануєш відкладати по 500 грн щомісяця на депозит під 10% річних.

    • Завдання: 1. Використай функцію FV (майбутня вартість), щоб дізнатися, скільки грошей у тебе буде через рік. 2. Або використай функцію PMT, щоб розрахувати, скільки треба відкладати щомісяця, щоб назбирати на телефон за пів року.

    4. Завдання «Магазин канцтоварів» (Математичні функції та логіка)

    Контекст: Склади таблицю товарів: назва, ціна, кількість.

    • Завдання: 1. Обчисли вартість кожного товару (ціна * кількість). 2. Застосуй функцію ROUND, щоб округлити ціни до цілого числа, якщо вони мають копійки. 3. Знайди загальну вартість усієї закупівлі.

    5. Завдання «Метеорологічна станція» (Комплексне завдання)

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

    • Завдання: 1. Обчисли середню температуру за місяць. 2. Знайди кількість днів, коли була плюсова температура (використай COUNTIF). 3. Знайди різницю між найтеплішим та найхолоднішим днем (MAX мінус MIN).

    Порада для навчального проекту:

    Об'єднай ці завдання в один проект «Особистий бюджет та успішність», де на різних аркушах однієї таблиці будуть різні розрахунки. Це ідеально підходить для вимог 8 класу!

    8 клас Інформатика | Переглядів: 4 | Завантажень: 0 | Додав: SvetlanaCh | Дата: 09.01.2026 | Коментарі (0)

    1. Гра «Уважний митець»

      • Завдання: Вчитель описує алгоритм дій, а учні мають його виконати в редакторі (наприклад, Paint).

      • Інструкція: «Оберіть синій колір. Візьміть інструмент "Прямокутник". Намалюйте великий квадрат. Тепер візьміть жовте "Заливання" і зафарбуйте його всередині». В кінці порівнюємо, чи у всіх вийшов однаковий «будинок».

    2. Завдання «Чарівні перетворення ліній»

      • Завдання: Навчитися налаштовувати товщину та тип ліній.

      • Інструкція: Намалюй три дощики. Перший — тонкими блакитними лініями (дрібний дощ). Другий — товстими синіми (злива). Третій — за допомогою інструмента «Розпилювач» або «Пензель» (туман або сніг).

    3. Завдання «Геометричний зоопарк»

      • Завдання: Створити тваринку, використовуючи лише фігури (кола, овали, трикутники).

      • Інструкція: Спробуй намалювати гусеницю лише з кіл, або поросятко з овалів та трикутників. Це вчить дітей бачити форму предметів і вправно користуватися інструментами «Фігури».

    4. Гра «Ремонтник малюнків»

      • Завдання: Вчитель заздалегідь готує файл з «поламаними» малюнками (наприклад, сонечко без промінців, будинок без дверей або круг з діркою в контурі).

      • Інструкція: Використовуючи «Олівець» або «Пензель», домалюй відсутні деталі. Спробуй зафарбувати фігуру з діркою — що трапилося? Як це виправити?

    5. Завдання «Дзеркальні візерунки»

      • Завдання: Вивчити інструмент «Виділення» та копіювання.

      • Інструкція: Намалюй одну половинку метелика (одне крило). За допомогою вчителя спробуй його скопіювати, відобразити та приєднати другу частину. Це справжня магія для другокласників!

    2 клас Інформатика | Переглядів: 8 | Завантажень: 0 | Додав: SvetlanaCh | Дата: 09.01.2026 | Коментарі (0)

    Структура сайту. Види сторінок сайту. Автоматизовані засоби створення та публікації веб-ресурсів. Правила ергономічного розміщення відомостей на веб-сторінці. С. 150-163. 

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


    Слайд 1: Назва презентації

    Тема: Структура сайту та основи веброзробки. Зміст:

    • З чого складається сайт?

    • Якими бувають сторінки?

    • Як створити сайт без програмування?

    • Правила зручного дизайну (ергономіка).


    Слайд 2: Структура вебсайту

    Сайт — це не просто набір сторінок, а впорядкована система.

    1. Внутрішня структура — це схема зв’язків між сторінками (меню, посилання). Вона буває:

      • Лінійна: сторінки йдуть одна за одною (як у книжці).

      • Ієрархічна (деревоподібна): від головної сторінки до розділів і підрозділів.

      • Довільна: сторінки пов’язані між собою хаотично.

    2. Зовнішня структура — це вигляд окремої сторінки (дизайн).


    Слайд 3: Види сторінок сайту

    За функціями сторінки поділяють на:

    • Головна (Home page): «обличчя» сайту, звідки починається навігація.

    • Інформаційні: статті, новини, опис товарів.

    • Навігаційні: карти сайту, результати пошуку.

    • Контактні: форми зворотного зв'язку, адреси.

    • Цільові (Landing pages): сторінки, створені для реклами конкретного продукту.


    Слайд 4: Автоматизовані засоби створення веб-ресурсів

    Сьогодні не обов’язково знати мову HTML, щоб створити сайт. Для цього використовують:

    • Конструктори сайтів (SaaS): онлайн-сервіси (наприклад, Google Sites, Wix, Canva). Просто перетягуєш блоки — і готово!

    • Системи керування вмістом (CMS): програми для створення великих сайтів (наприклад, WordPress).

    • Онлайн-редактори: де можна швидко зробити візитку чи портфоліо.

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


    Слайд 5: Ергономіка веб-сторінок

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

    Основні елементи сторінки:

    1. Шапка (Header): назва сайту, логотип, меню.

    2. Основна частина (Content): головна інформація.

    3. Бічна панель (Sidebar): додаткові посилання, банери.

    4. Підвал (Footer): авторські права, контакти.


    Слайд 6: Правила розміщення відомостей

    Щоб сайт був зручним, дотримуйся цих правил:

    • Правило "F-патерну": користувачі зазвичай сканують сторінку очима у формі літери F (зліва направо, зверху вниз). Найважливіше став угорі ліворуч.

    • Контрастність: текст має легко читалися на фоні.

    • Простота навігації: користувач має знайти потрібну інформацію за 2-3 кліки.

    • Адаптивність: сайт повинен гарно виглядати і на комп'ютері, і на смартфоні.

    • Єдиний стиль: однакові шрифти та кольори на всіх сторінках.


    Слайд 7: Висновки

    • Сайт має чітку структуру для зручного пошуку інформації.

    • Існують різні типи сторінок під різні завдання.

    • Завдяки конструкторам (як Google Sites) кожен може стати розробником.

    • Головне в дизайні — зручність користувача (ергономіка).


    Тобі допомогти підібрати кольорову гаму для презентації чи, можливо, підказати, як створити перший сайт у Google Sites?

    7 клас Інформатика | Переглядів: 6 | Завантажень: 0 | Додав: SvetlanaCh | Дата: 09.01.2026 | Коментарі (0)

    10 запитань (відкритого типу), які допоможуть учням 9 класу глибше проаналізувати тему одновимірних масивів та зрозуміти логіку їх використання:

    1. Поясни своїми словами, що таке одновимірний масив. Чим він принципово відрізняється від звичайної змінної, яку ми використовували раніше?

    2. Наведи 3 приклади наборів даних із повсякденного життя, які було б зручно зберігати у вигляді масиву. Обґрунтуй свій вибір.

    3. Чому при роботі з великою кількістю даних (наприклад, 1000 значень) використання масивів є ефективнішим, ніж створення окремих змінних для кожного значення?

    4. З яких двох частин складається ім’я елемента масиву? Напиши приклад того, як звернутися до п'ятого елемента масиву з назвою Temper.

    5. Що таке індекс елемента масиву? Яким типом чисел він завжди має бути виражений?

    6. У відео згадувалося, що в Python індексація може починатися з 0, а в інших середовищах — з 1. Як ця різниця впливає на написання циклу для обробки 10 елементів?

    7. Для чого при обчисленні суми елементів масиву ми маємо обов'язково надати змінній-суматору початкове значення 0 перед початком циклу?

    8. Опиши алгоритм знаходження середнього арифметичного значень масиву. Які кроки потрібно виконати програмі?

    9. Чи можуть елементи одного масиву одночасно містити і текст, і числа? Поясни, виходячи з визначення масиву як «впорядкованого набору однотипних даних».

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

    9 клас Інформатика | Переглядів: 9 | Завантажень: 0 | Додав: SvetlanaCh | Дата: 09.01.2026 | Коментарі (0)

     10 запитань для учнів 10 класу з теми «Пошукова оптимізація та просування вебсайтів», складених на основі відеоматеріалу:

    1. Що таке «просування сайту» і яка його головна мета?

      (Очікувана відповідь: Це комплекс заходів для збільшення відвідуваності сайту цільовою аудиторією).

    2. Кого прийнято вважати «цільовою аудиторією» веб-ресурсу? Наведіть приклад для сайту школи.

      (Очікувана відповідь: Користувачі, для яких створено сайт; для школи — це учні, батьки та вчителі).

    3. Яка стратегія просування передбачає реєстрацію сайту в тематичних базах даних, як-от «Мета» чи «UAport»?

      (Очікувана відповідь: Реєстрація в пошукових каталогах).

    4. Розшифруйте абревіатуру SEO. У чому полягає суть цього процесу?

      (Очікувана відповідь: Search Engine Optimization — оптимізація коду та контенту під вимоги пошукових систем).

    5. Яка різниця між внутрішньою та зовнішньою оптимізацією сайту?

      (Очікувана відповідь: Зовнішня — робота з посиланнями на сайт з інших ресурсів; внутрішня — робота з HTML-кодом та контентом власної сторінки).

    6. Яка щільність ключових слів на сторінці вважається оптимальною для пошукових систем?

      (Очікувана відповідь: 5-7% від текстового змісту або 3-4 згадки на сторінку).

    7. Для чого використовується атрибут alt у тегу зображення з точки зору SEO?

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

    8. Назвіть теги HTML, які допомагають пошуковій системі зрозуміти важливість певних слів на сторінці.

      (Очікувана відповідь: <title>, <strong>, <h1>–<h2>, <i>).

    9. Що таке контекстна реклама і чим вона відрізняється від природної видачі пошуку?

      (Очікувана відповідь: Це платні оголошення, що з'являються за певними запитами, на відміну від безкоштовних результатів SEO).

    10. Який фактор є найважливішим для того, щоб сайт залишався популярним і відвідуваним протягом тривалого часу?

      (Очікувана відповідь: Унікальний, цікавий та корисний контент).

    10 клас Інформатика | Переглядів: 10 | Завантажень: 0 | Додав: mirgorodschoolseven | Дата: 24.12.2025 | Коментарі (0)

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

    1. Запитання для учнів 11 класу .

    Ці запитання допоможуть перевірити розуміння теоретичного матеріалу:

    1. Дайте визначення поняттю «художній образ». Як він співвідноситься з реальною дійсністю?

    2. На які два великі види можна поділити художні образи за їхньою природою? Наведіть приклади кожного.

    3. Опишіть класифікацію образів за їхнім характером. Чим відрізняються трагічні образи від комічних?

    4. Як образи поділяються за ставленням автора до них? Поясніть різницю між позитивними та негативними образами.

    5. Яка роль епізодичних образів у творі чи графічній композиції?

    6. Класифікуйте образи за предметом змалювання. Які саме об'єкти чи явища вони можуть представляти?

    7. Поясніть таку властивість художнього образу, як «метафоричність». Як вона допомагає автору передати задум?

    8. У чому полягає єдність конкретності та загальності в художньому образі?

    9. Що таке «художній символ»? Чим символ відрізняється від простого зображення предмета?

    10. Дайте визначення поняттю «знакова система». Яка її головна мета в історії людства?

    11. Назвіть три елементарні функції, що лежать в основі будь-якого знака. Опишіть їх суть (номінація, предикація, локалізація).

    12. Поясніть різницю між замкненими та відкритими знаковими системами. Наведіть приклади.

    13. Чим прості знакові системи відрізняються від складних (багатоярусних)?

    14. На які три групи поділяються зображення згідно з теорією графічного дизайну?

    15. Що таке «стилістична єдність» у контексті використання знаків та образів?


    2. Теми проєктів: Інтеграція графічного дизайну та української літератури

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

    1. «Знакова система драми-феєрії "Лісова пісня" Лесі Українки»: створення системи піктограм або символів для головних персонажів (Мавка, Лукаш, Перелесник) на основі їхніх характеристик.

    2. «Еволюція образу "міста" у творчості Валер'яна Підмогильного (роман "Місто")»: розробка графічного мудборду або серії плакатів, що передають трансформацію героя через візуальні метафори.

    3. «Символіка кольорів та образів у новелі "Intermezzo" Михайла Коцюбинського»: створення графічної серії «Образи-настрої» (Моя утома, Ниви, Сонце).

    4. «Графічна інтерпретація урбаністичних образів празької школи поетів»: візуалізація суворих та вольових образів (наприклад, О. Ольжича) через геометричні знакові системи.

    5. «Метафоричний світ "Тіней забутих предків"»: розробка логотипів або графічних знаків для гуцульських міфологічних істот (Чугайстер, Щезник) з дотриманням етностилю.

    6. «Стилістична єдність обкладинки сучасної української книги»: дизайн палітурки до твору Ліни Костенко «Маруся Чурай», де образ героїні поєднується з символом української пісні.

    7. «Знаки та символи в поезії Богдана-Ігоря Антонича»: створення абстрактних графічних композицій, що ілюструють поняття «рослинності» та «антропоцентризму» в його творчості.

    8. «Візуалізація образу "землі" у творі Ольги Кобилянської»: розробка інфографіки, що через знаки передає конфлікт і зв'язок людини з землею.

    9. «Гротеск та комічний образ у графіці (за творами Миколи Куліша)»: створення серії сатиричних ілюстрацій до п'єси «Мина Мазайло», де акцент робиться на характерності персонажів.

    10. «Інтерактивна мапа образів-символів українського бароко»: дослідження символічних знаків у творчості Григорія Сковороди та їх відтворення в сучасному мінімалістичному дизайні.

    11 клас Інформатика | Переглядів: 12 | Завантажень: 0 | Додав: SvetlanaCh | Дата: 24.12.2025 | Коментарі (0)

    10 запитань за змістом відео:

    1. Визначення поняття: Сформулюй власне визначення ергономіки веб-сайту. Які три ключові фактори (щодо стану користувача) вона має забезпечувати?

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

    3. Розташування відомостей: Які вимоги існують до заголовка сайту та розміщення найважливішої інформації на сторінці?

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

    5. Роль «підвалу» (footer): Яку практичну функцію виконує нижній колонтитул сторінки та які дані він має містити?

    6. Ефективна навігація: Поясни «правило вкладеності» рівнів сайту та вимоги до кількості посилань в одному навігаційному блоці.

    7. Оформлення та контраст: Як правильний вибір кольорової гами та вирівнювання тексту впливає на сприйняття інформації відвідувачем?

    8. Технічні параметри: Який оптимальний обсяг одного графічного файлу рекомендується для швидкого завантаження сторінки і чому це важливо?

    9. Інклюзивність: Які конкретні елементи (наприклад, підписи до зображень або масштабування) допомагають зробити сайт зручним для людей із вадами зору?

    10. Історичний контекст: Хто такий Якоб Нільсен і за допомогою якого винайденого ним методу сьогодні проводять ергономічний аудит сайтів?










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


    Завдання 1. Ергономічний аудит (Аналіз)

    Мета: Навчитися бачити помилки в інтерфейсі та пропонувати шляхи їх виправлення.

    Інструкція для учня:

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

    2. Проаналізуйте його за 5 критеріями з відео:

      • Навігація: Чи можна повернутися на головну в один клік? Скільки рівнів вкладеності має сайт?

      • Колористика: Чи достатній контраст між текстом і фоном?

      • Контент: Чи є на сторінці більше трьох колонок тексту? Чи з’являється горизонтальна смуга прокручування?

      • Швидкість: Чи швидко завантажуються зображення?

      • Доступність: Чи мають картинки альтернативний текст (підписи), який з’являється при наведенні?

    3. Результат: Складіть коротку таблицю "Проблема — Наслідок для користувача — Рекомендація щодо виправлення".


    Завдання 2. Створення прототипу ергономічної сторінки (Проєктування)

    Мета: Відпрацювати навички правильного розміщення елементів на веб-сторінці.

    Інструкція для учня:

    Використовуючи будь-який інструмент (онлайн-дошку як Jamboard/Miro, графічний редактор або навіть звичайний аркуш паперу), створіть макет (схему) головної сторінки сайту на тему "Екологія мого міста".

    Вимоги до макета:

    1. Заголовок: Чітка назва сайту, що дублюється на всіх сторінках.

    2. Меню: Не більше 7 пунктів в основному блоці навігації. Кнопки мають бути великими.

    3. Золотий трикутник: Розмістіть найважливішу новину у верхній лівій частині сторінки.

    4. Підвал (Footer): Додайте блок із контактами, авторськими правами та посиланням на карту сайту.

    5. Інклюзивність: Передбачте на макеті кнопку для перемикання у "Режим для людей із вадами зору" (збільшений шрифт/чорно-біла гама).

    10 клас Інформатика | Переглядів: 12 | Завантажень: 0 | Додав: mirgorodschoolseven | Дата: 19.12.2025 | Коментарі (0)

    📝 Текстовий процесор: Шаблони, стилі та пошук

    1. Використання шаблонів документів

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

    • Навіщо вони потрібні? Щоб не створювати документ "з нуля" щоразу (наприклад, резюме, лист, звіт чи календар).

    • Як знайти? У Microsoft Word: ФайлСтворити. Там можна обрати готовий макет.

    • Перевага: Економія часу та професійний вигляд документа.


    2. Форматування з використанням стилів

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

    • Типи стилів: Найчастіше використовують стилі для заголовків (Heading 1, 2) та звичайного тексту.

    • Чому це круто? 1. Швидкість: Можна змінити оформлення всіх заголовків одним кліком.

      2. Зміст: На основі стилів заголовків програма автоматично створює Зміст (автоматичне оглавление).

      3. Єдність: Весь документ виглядає в одному стилі.


    3. Пошук та заміна фрагментів тексту

    Ці інструменти допомагають миттєво знаходити слова у великих текстах і змінювати їх.

    • Пошук (Ctrl + F): Допомагає знайти конкретне слово або фразу в документі на 100+ сторінок за секунду.

    • Заміна (Ctrl + H): Автоматично змінює одне слово на інше у всьому документі.

      • Приклад: Тобі потрібно замінити в усьому тексті "м. Київ" на "столиця України". Замість того, щоб шукати вручну, ти використовуєш функцію "Замінити все".


    💡 Головні поради (Cheat Sheet):

    Функція Гарячі клавіші Результат
    Пошук Ctrl + F Виділяє знайдені слова жовтим.
    Заміна Ctrl + H Міняє старе слово на нове автоматично.
    Стилі Вкладка Основна Робить документ структурованим.







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


    Практична робота: "Ефективна робота з текстом"

    Завдання 1. Робота з шаблонами

    1. Відкрий головну сторінку Google Документів.

    2. Натисни «Галерея шаблонів» (угорі праворуч).

    3. Обери шаблон «Резюме» (або «Лист»).

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

    Завдання 2. Застосування стилів

    1. Створи новий порожній документ.

    2. Напиши назву документа: "Мої улюблені предмети". Застосуй до цього рядка стиль «Назва» (Title).

    3. Нижче напиши назви трьох предметів (наприклад: Інформатика, Математика, Історія). До кожної назви застосуй стиль «Заголовок 1» (Heading 1).

    4. Під кожним заголовком напиши по одному реченню, чому цей предмет цікавий. Переконайся, що для цього тексту встановлено стиль «Звичайний текст».

    Завдання 3. Автоматичний зміст

    1. Використовуючи документ із Завдання 2, перейди на новий рядок на самому початку документа.

    2. Натисни Вставити (Insert) → Зміст (Table of contents).

    3. Обери варіант із номерами сторінок.

    4. Перевірка: Додай ще один предмет зі стилем «Заголовок 1» в кінець документа і натисни кнопку «Оновити зміст» у самому змісті.

    Завдання 4. Пошук та заміна

    1. Скопіюй будь-який текст про комп'ютери з Вікіпедії (приблизно на 1 сторінку) і встав у Google Документ.

    2. Натисни Ctrl + H (або ПравкаЗнайти та замінити).

    3. У полі "Знайти" введи слово "комп'ютер".

    4. У полі "Замінити на" введи слово "ЕОМ" (велика літерами).

    5. Натисни «Замінити все». Подивись, скільки замін відбулося.

    Завдання 5. Швидке форматування стилів

    1. У тому ж документі зміни оформлення одного «Заголовка 1»: зроби його синім кольором, шрифтом Arial та розміром 18.

    2. Виділи цей змінений заголовок.

    3. У панелі стилів натисни стрілочку біля «Заголовок 1» та обери «Оновити 'Заголовок 1' відповідно до виділеного фрагмента».

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


    Порада: Після виконання можеш поділитися посиланням на документ із вчителем, натиснувши кнопку "Поділитися" (Share).

    Хочеш, щоб я підготував короткий тест для перевірки знань за цими завданнями?

    7 клас Інформатика | Переглядів: 19 | Завантажень: 0 | Додав: mirgorodschoolseven | Дата: 19.12.2025 | Коментарі (0)

    Категорії розділу

    1 клас Інформатика [44]
    2 клас Інформатика [319]
    3 клас Інформатика [367]
    4 клас Інформатика [380]
    5 клас Інформатика [603]
    6 клас Інформатика [537]
    7 клас Інформатика [632]
    8 клас Інформатика [635]
    9 клас Інформатика [705]
    10 клас Інформатика [657]
    11 клас Інформатика [798]
    Астрономія [20]
    Вправи / Завдання / Практичні роботи [68]
    Цифрова та медіаграмотність [103]
    Академічна доброчесність [20]
    Медіатворчість [29]
    Проекти / Вправи [209]
    Інструктажі БЖД / Правила БЖД [24]

    Вхід на сайт

    Пошук

    СПІВПРАЦЯ

  • МОН України
  • Міська Рада м.Миргород
  • ПОІППО
  • Міськво м.Миргород
  • Телестудія МИРГОРОД
  • Шкільний канал YouTube
  • E-mail та сайти вчителів
  • ЗОШ №7