Інформатика 10 клас Розробки уроків

Урок "Пошукова оптимізація та просування вебсайтів"

Коришко Оксана Леонідівна 29 квітня 2020 14099 Відгуки відсутні

Про матеріал

Розробка уроку з інформатики у 10 (11) класі "Пошукова оптимізація та просування вебсайтів". У розробці подано конспект уроку, презентацію до уроку. Інтерактивний он-лайн тест «Створення та адміністрування сайту» можна використати на етапі актуалізації опорних знань (посилання на тест наведено у конспекті уроку).

Перегляд файлу

Дата проведення__________________

Клас 10

Тема: Пошукова оптимізація та просування вебсайтів

Мета уроку:

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

Тип уроку: засвоєння нових знань, умінь, навичок.

Перелік засобів навчання: IBM PC, підручник «Інформатика», мультимедійний проектор, сенсорна дошка, презентація PowerPoint.

Програмне забезпечення: Microsoft Office PowerPoint, браузер.

План уроку:

І. Організаційний етап 1 хв

II. Актуалізація опорних знань 5 хв

IІІ. Мотивація навчальної діяльності 7 хв

ІV. Засвоєння нових знань 20 хв

V. Застосування знань, формування вмінь та навичок 10 хв

VI. Підбиття підсумків уроку , завдання на самостійну підготовку 2 хв

ХІД УРОКУ

І. ОРГАНІЗАЦІЙНИЙ ЕТАП

II. АКТУАЛІЗАЦІЯ ОПОРНИХ ЗНАНЬ

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

Тест «Створення та адміністрування сайту»

https://naurok.com.ua/test/rozrobka-prostogo-vebsaytu-341123.html

Див. Додаток 1

IІІ. МОТИВАЦІЯ НАВЧАЛЬНОЇ ДІЯЛЬНОСТІ

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

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

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

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

Як це зробити? От сьогодні ми й розглянемо тему:

ІV. ЗАСВОЄННЯ НОВИХ ЗНАНЬ

Метод – пояснювально-ілюстративний
Форма організації навчальної діяльності – фронтальна

ПЛАН ВИВЧЕННЯ ТЕМИ (слайди №3-27):

Поняття пошукової оптимізації.
Просування сайту.

V. ЗАСТОСУВАННЯ ЗНАНЬ, ФОРМУВАННЯ ВМІНЬ ТА НАВИЧОК

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

Практична вправа (слайд №28)

VI. ПІДБИТТЯ ПІДСУМКІВ УРОКУ, ЗАВДАННЯ НА САМОСТІЙНУ ПІДГОТОВКУ

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

(слайд №29)

Додаток 1

Тест «Створення та адміністрування сайту»

https://naurok.com.ua/test/rozrobka-prostogo-vebsaytu-341123.html

Мова опису структури сторінок вебдокументів, яка дозволяє звичайний текст форматувати в абзаци, заголовки, списки та інші структури, створювати посилання на інші сторінки – це …

HTML
HTTP
WEB
URL

Веб-інтерфейс — це…

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

Ергономіка – це …

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

Хостинг – це …

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

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

Інфографіка
Юзабіліті
Верстка
Мультимедіа

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

Вебсистема керування вмістом сайта
Верстання сайта
Комп’ютерне моделювання
Адміністрування сайта

Схема розташування на сторінках основних блоків: заголовка, блоків навігації, інформаційних і рекламних блоків, підвалу тощо – це …

Контент
Стилістика
Макет
Атрибут

Укажіть теги мови HTML:

<HTML>
<ALT>
<BGCOLOR>
<BODY>
<TABLE>
<IMG>

Атрибути називають …

Документи, призначені для перегляду на екрані комп'ютера за допомогою браузера
Додаткові компоненти тега, що містять вказівки про те, як браузер повинен сприйняти і обробити тег
Елементи, що позначають фрагмент невиконуваного коду
Спеціалізовані редактори HTML

Укажіть атрибути тегів мови HTML:

<HTML>
<ALT>
<BGCOLOR>
<BODY>
<TABLE>
<IMG>

Перегляд файлу

користувачівзнаходять нові сайти через пошукові системи онлайн-покупок здійснюються на сайтах, які знайдено через пошукові системи 55%90%Відомо, що

Вибрані ключові слова потрібно розмістити в HTML-тегах сторінки, які опрацьовують пошукові роботи: • <title> — назва, що відображається на вкладці браузера;• <meta name=

— список ключових слів;• — опис сайту." title="Вибрані ключові слова потрібно розмістити в HTML-тегах сторінки, які опрацьовують пошукові роботи: • — назва, що відображається на вкладці браузера;• <meta name="keywords" content="ключові слова"> — список ключових слів;• <meta name="description" content="опис"> — опис сайту."> </div> <div data-index="15" class="slide slide15 hide" slidenumber="15"> <img class="slide_image" src="/uploads/files/402351/178355/191100_images/15.jpg" alt="Також на веб-сторінках повинні бути заголовки: Заголовок, створений тегом <h1>, має бути лише один і містити ключову фразу. Підзаголовки на сторінці варто створювати тегами <h2>." title="Також на веб-сторінках повинні бути заголовки: Заголовок, створений тегом <h1>, має бути лише один і містити ключову фразу. Підзаголовки на сторінці варто створювати тегами <h2>."> </div> <div data-index="16" class="slide slide16 hide" slidenumber="16"> <img class="slide_image" src="/uploads/files/402351/178355/191100_images/16.jpg" alt="Під час внутрішньої оптимізації сайту доцільно у HTML-коді сторінок виділити ключові слова тегами, які свідчать про важливість цих слів: • <strong> — задає напівжирне накреслення, вказує на важливість виділеного тексту;• <i> — задає курсивне накреслення;• <big> — збільшує поточний розмір символів тексту." title="Під час внутрішньої оптимізації сайту доцільно у HTML-коді сторінок виділити ключові слова тегами, які свідчать про важливість цих слів: • <strong> — задає напівжирне накреслення, вказує на важливість виділеного тексту;• <i> — задає курсивне накреслення;• <big> — збільшує поточний розмір символів тексту."> </div> <div data-index="17" class="slide slide17 hide" slidenumber="17"> <img class="slide_image" src="/uploads/files/402351/178355/191100_images/17.jpg" alt="Зображення, вставлені на веб-сторінку, повинні матитекст заміщення, який містить ключові слова. Для цього використовується атрибут alt: <img src="ім’я або URL-адреса файла із зображенням" alt="текст заміщення">" title="Зображення, вставлені на веб-сторінку, повинні матитекст заміщення, який містить ключові слова. Для цього використовується атрибут alt: <img src="ім’я або URL-адреса файла із зображенням" alt="текст заміщення">"> </div> <div data-index="18" class="slide slide18 hide" slidenumber="18"> <img class="slide_image" src="/uploads/files/402351/178355/191100_images/18.jpg" alt="У тексті веб-сторінок доцільно створювати гіперпосилання для переходу на інші сторінки цього самого сайту: " title="У тексті веб-сторінок доцільно створювати гіперпосилання для переходу на інші сторінки цього самого сайту: "> </div> <div data-index="19" class="slide slide19 hide" slidenumber="19"> <img class="slide_image" src="/uploads/files/402351/178355/191100_images/19.jpg" alt="Отже, для оптимізації сайта потрібно:01020304визначити найвідповідніші сайту ключові словааналізувати сайт на предмет внутрішньої оптимізації сторінок: чи правильні заголовки, якісні тексти, зрозуміла користувачеві навігаціяза необхідності проводити комплекс робіт, спрямованих на поліпшення структури сайта, зміну текстів та оптимізацію сторінок під пошукові запитирегулярно складати звіти про видимість сайта в популярних пошукових машинах" title="Отже, для оптимізації сайта потрібно:01020304визначити найвідповідніші сайту ключові словааналізувати сайт на предмет внутрішньої оптимізації сторінок: чи правильні заголовки, якісні тексти, зрозуміла користувачеві навігаціяза необхідності проводити комплекс робіт, спрямованих на поліпшення структури сайта, зміну текстів та оптимізацію сторінок під пошукові запитирегулярно складати звіти про видимість сайта в популярних пошукових машинах"> </div> <div data-index="20" class="slide slide20 hide" slidenumber="20"> <img class="slide_image" src="/uploads/files/402351/178355/191100_images/20.jpg" alt="— це комплекс заходів, спрямований на збільшення відвідуваності сайту цільовою аудиторією. Просування сайту— збільшення співвідношення відвідувачів сайта, які вчинили очікувану дію, до всіх відвідувачів (подається у відсотках). Мета" title="— це комплекс заходів, спрямований на збільшення відвідуваності сайту цільовою аудиторією. Просування сайту— збільшення співвідношення відвідувачів сайта, які вчинили очікувану дію, до всіх відвідувачів (подається у відсотках). Мета"> </div> <div data-index="21" class="slide slide21 hide" slidenumber="21"> <img class="slide_image" src="/uploads/files/402351/178355/191100_images/21.jpg" alt="Цільова аудиторія— це користувачі, для яких створено цей сайт.для інтернет-магазинівдля соціальних мереждля сайту закладу освіти для державних установ" title="Цільова аудиторія— це користувачі, для яких створено цей сайт.для інтернет-магазинівдля соціальних мереждля сайту закладу освіти для державних установ"> </div> <div data-index="22" class="slide slide22 hide" slidenumber="22"> <img class="slide_image" src="/uploads/files/402351/178355/191100_images/22.jpg" alt="Отже, стратегіями просування сайтів є: Реєстрація в пошукових каталогах. Просування сайту офлайн. Просування засобами соціальних мереж, SMOПошукова оптимізація, SEOКонтекстна (банерна) реклама" title="Отже, стратегіями просування сайтів є: Реєстрація в пошукових каталогах. Просування сайту офлайн. Просування засобами соціальних мереж, SMOПошукова оптимізація, SEOКонтекстна (банерна) реклама"> </div> <div data-index="23" class="slide slide23 hide" slidenumber="23"> <img class="slide_image" src="/uploads/files/402351/178355/191100_images/23.jpg" alt="— полягає в розміщенні відомостей про сайт у базах даних популярних тематичних каталогів, наприклад Мета (meta.ua), Uaport (uaport.net) тощо. Реєстрація в пошукових каталогах " title="— полягає в розміщенні відомостей про сайт у базах даних популярних тематичних каталогів, наприклад Мета (meta.ua), Uaport (uaport.net) тощо. Реєстрація в пошукових каталогах "> </div> <div data-index="24" class="slide slide24 hide" slidenumber="24"> <img class="slide_image" src="/uploads/files/402351/178355/191100_images/24.jpg" alt="— процес коригування HTML-коду, контенту, структури сайту для забезпечення відповідності вимогам пошукових систем з метою отримання високих позицій веб-ресурсу в результатах пошуку за певними запитами користувачів. Пошукова оптимізація, або SEO" title="— процес коригування HTML-коду, контенту, структури сайту для забезпечення відповідності вимогам пошукових систем з метою отримання високих позицій веб-ресурсу в результатах пошуку за певними запитами користувачів. Пошукова оптимізація, або SEO"> </div> <div data-index="25" class="slide slide25 hide" slidenumber="25"> <img class="slide_image" src="/uploads/files/402351/178355/191100_images/25.jpg" alt="— просування сайту з використанням можливостей соціальних мереж. Просування засобамисоціальних мереж. SMО, англ. Social Media Optimization — оптимізація соціальних медіа. SMM, англ. Social Media Marketing — маркетинг соціальних мереж. SMM — це реклама сайту в соціальних мережах і медіа. SMO передбачає створення на сайті засобів для зручного дода-вання відомостей з нього в соціальні мережі, коментування матеріалів сайту з використанням облікового запису соціальних мереж тощо. " title="— просування сайту з використанням можливостей соціальних мереж. Просування засобамисоціальних мереж. SMО, англ. Social Media Optimization — оптимізація соціальних медіа. SMM, англ. Social Media Marketing — маркетинг соціальних мереж. SMM — це реклама сайту в соціальних мережах і медіа. SMO передбачає створення на сайті засобів для зручного дода-вання відомостей з нього в соціальні мережі, коментування матеріалів сайту з використанням облікового запису соціальних мереж тощо. "> </div> <div data-index="26" class="slide slide26 hide" slidenumber="26"> <img class="slide_image" src="/uploads/files/402351/178355/191100_images/26.jpg" alt="Контекстна (банерна) реклама — передбачає розміщення рекламних оголошень про сайт на сторінках пошукових систем у результатах пошуку за певними ключовими словами. Рекламна кампанія є платною та проводиться з використанням спеціальних сервісів пошукових систем, наприклад Google Adwords." title="Контекстна (банерна) реклама — передбачає розміщення рекламних оголошень про сайт на сторінках пошукових систем у результатах пошуку за певними ключовими словами. Рекламна кампанія є платною та проводиться з використанням спеціальних сервісів пошукових систем, наприклад Google Adwords."> </div> <div data-index="27" class="slide slide27 hide" slidenumber="27"> <img class="slide_image" src="/uploads/files/402351/178355/191100_images/27.jpg" alt="Просування сайту офлайн — може проводитись у вигляді зовнішньої реклами, листівок, реклами у газетах, на радіо та телебаченні тощо." title="Просування сайту офлайн — може проводитись у вигляді зовнішньої реклами, листівок, реклами у газетах, на радіо та телебаченні тощо."> </div> <div data-index="28" class="slide slide28 hide" slidenumber="28"> <img class="slide_image" src="/uploads/files/402351/178355/191100_images/28.jpg" alt="Практичне завдання1. Перегляньте сайт Зелена хвиля (ecoclubua.com). 2. Запишіть, які елементи сайту відповідають вимогам ергономіки, а які — ні. 3. Запишіть, у чому могла б полягати оптимізація сайту." title="Практичне завдання1. Перегляньте сайт Зелена хвиля (ecoclubua.com). 2. Запишіть, які елементи сайту відповідають вимогам ергономіки, а які — ні. 3. Запишіть, у чому могла б полягати оптимізація сайту."> </div> <div data-index="29" class="slide slide29 hide" slidenumber="29"> <img class="slide_image" src="/uploads/files/402351/178355/191100_images/29.jpg" alt="Завдання на самостійну підготовку1. Ознайомтеся з рекомендаціями щодо просування (https://igroup.com.ua/seo-articles/prosuvannya-sajtu) та оптимізації сайтів (https://igroup.com.ua/seo-articles/optymizatsiya-sajtu). 2. Складіть карту знань з поясненням понять «просування веб-сайту» та «пошукова оптимізація». " title="Завдання на самостійну підготовку1. Ознайомтеся з рекомендаціями щодо просування (https://igroup.com.ua/seo-articles/prosuvannya-sajtu) та оптимізації сайтів (https://igroup.com.ua/seo-articles/optymizatsiya-sajtu). 2. Складіть карту знань з поясненням понять «просування веб-сайту» та «пошукова оптимізація». "> </div> </div> <div class="navigator"> <a class="prev disabled" href="javascript:void(0)" onClick="slider.prev()"><i class="fa fa-angle-left" aria-hidden="true"></i> Попередній слайд</a> <span class="numbers"> <span class="current">1</span> / <span class="total">29</span> </span> <a class="next" href="javascript:void(0)" onClick="slider.next()">Наступний слайд <i class="fa fa-angle-right" aria-hidden="true"></i></a> </div> </div> </div> <div class="content-block"> <div class="block-head">Зміст слайдів</div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/1.jpg" data-lightbox="slides" data-title="Слайд №1"><img src="/uploads/files/402351/178355/191100_images/thumb_1.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 1</div> <p>користувачівзнаходять нові сайти через пошукові системи онлайн-покупок здійснюються на сайтах, які знайдено через пошукові системи 55%90%Відомо, що</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/2.jpg" data-lightbox="slides" data-title="Слайд №2"><img src="/uploads/files/402351/178355/191100_images/thumb_2.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 2</div> <p>ПОШУКОВА ОПТИМІЗАЦІЯ ТА ПРОСУВАННЯ ВЕБСАЙТІВ </p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/3.jpg" data-lightbox="slides" data-title="Слайд №3"><img src="/uploads/files/402351/178355/191100_images/thumb_3.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 3</div> <p>Ви дізнаєтесь: Що розуміють підпошуковою оптимізацією сайта?>>>>>>>>>>>>>>>>>>У чому полягає процес просування сайта?</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/4.jpg" data-lightbox="slides" data-title="Слайд №4"><img src="/uploads/files/402351/178355/191100_images/thumb_4.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 4</div> <p>SEO (англ. Search Engine Optimization)— це роботи з аналізу і зміни внутрішньої структури меню сайта, робота з текстами, перевірка й налаштування всіх технічних параметрів для оптимальної роботи пошукового робота. Пошукова оптимізація— підвищення рейтингу сайта в пошукових системах (Google, Bing, Yahoo) та залучення трафіку. Мета SEO </p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/5.jpg" data-lightbox="slides" data-title="Слайд №5"><img src="/uploads/files/402351/178355/191100_images/thumb_5.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 5</div> <p></p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/6.jpg" data-lightbox="slides" data-title="Слайд №6"><img src="/uploads/files/402351/178355/191100_images/thumb_6.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 6</div> <p></p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/7.jpg" data-lightbox="slides" data-title="Слайд №7"><img src="/uploads/files/402351/178355/191100_images/thumb_7.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 7</div> <p>Класи пошукової оптимізації сайтів. Сіра. Не заборонені, але потенційно некоректні прийоми. Якщо чорну або сіру оптимізацію буде виявлено пошуковою системою, до сайта будуть застосовані штрафні санкції чи навіть бан. Чорна. Набір прийомів, які характеризуються явною некоректністю. Багато з них заборонені, деякі створені для введення пошукової системи в оману. Біла. Легальні професійні методи, що допов-нюють один одного й дають стабільний результат. Спрямована на те, щоб і відвідувачі, і пошукові машини ставили сайту високу оцінку.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/8.jpg" data-lightbox="slides" data-title="Слайд №8"><img src="/uploads/files/402351/178355/191100_images/thumb_8.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 8</div> <p>SEO-Manager. Фахівця, який проводить роботу з оптимізації веб-сайтів, називають оптимізатором (SEO-Manager). </p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/9.jpg" data-lightbox="slides" data-title="Слайд №9"><img src="/uploads/files/402351/178355/191100_images/thumb_9.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 9</div> <p>англ. webcrawler, bot, webrobots, webspider — бот, павук— це спеціальна програма, що є складовою частиною пошукової системи та призначена для перебирання сторінок Інтернету з метою занесення інформації про них у базу данихпошукової системи. Пошуковий робот</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/10.jpg" data-lightbox="slides" data-title="Слайд №10"><img src="/uploads/files/402351/178355/191100_images/thumb_10.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 10</div> <p>Роботи Google Google Mobile Ad. Sense і Google Ad. Sense — індексує сайти рекламної мережі Google Робот Googlebot — основний робот. Googlebot. News — сканує та індексує новини. Google. Mobile — індексує сайти для мобільних пристроїв. Googlebot. Images — шукає й індексує зображення. Googlebot. Video —індексує відео. Google. Ads. Bot — перевіряє якість цільової сторінки</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/11.jpg" data-lightbox="slides" data-title="Слайд №11"><img src="/uploads/files/402351/178355/191100_images/thumb_11.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 11</div> <p>1. Перед пошуком. Програмні роботи, «павуки» сканують Всесвітню павутину, індексують мільйони сторінок.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/12.jpg" data-lightbox="slides" data-title="Слайд №12"><img src="/uploads/files/402351/178355/191100_images/thumb_12.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 12</div> <p>2. Під час пошуку. Під час введення запиту працює функція Google «Живий пошук», яка показує підказки і дозволяє здійснити пошук якнайшвидше.3. Рейтинг. Щоб обрати з мільйонів результатів найрелевантніші, при опрацюванні запиту використовується понад 200 критеріїв (актуальність, якість матеріалу вебсайту, кількість вебсторінок, значимість посилань, слова на сторінці, синоніми ключових слів, тип пошукового результату, персоналізація і т.п.). На сторінку пошуку миттєво поміщуються найрелевантніші матеріали. Щоденно Google опрацьовує мільярди пошукових запитів.16% щоденних запитів є новими.4. Результат</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/13.jpg" data-lightbox="slides" data-title="Слайд №13"><img src="/uploads/files/402351/178355/191100_images/thumb_13.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 13</div> <p>Для процесу пошуку інформації дуже важливо правильно підібрати ключові слова. Оптимальною вважається щільність ключових слів 5–7 % від текстового вмісту веб-сторінки або 3–4 рази на сторінку.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/14.jpg" data-lightbox="slides" data-title="Слайд №14"><img src="/uploads/files/402351/178355/191100_images/thumb_14.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 14</div> <p>Вибрані ключові слова потрібно розмістити в HTML-тегах сторінки, які опрацьовують пошукові роботи: • <title> — назва, що відображається на вкладці браузера;• <meta name="keywords" content="ключові слова"> — список ключових слів;• <meta name="description" content="опис"> — опис сайту.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/15.jpg" data-lightbox="slides" data-title="Слайд №15"><img src="/uploads/files/402351/178355/191100_images/thumb_15.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 15</div> <p>Також на веб-сторінках повинні бути заголовки: Заголовок, створений тегом <h1>, має бути лише один і містити ключову фразу. Підзаголовки на сторінці варто створювати тегами <h2>.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/16.jpg" data-lightbox="slides" data-title="Слайд №16"><img src="/uploads/files/402351/178355/191100_images/thumb_16.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 16</div> <p>Під час внутрішньої оптимізації сайту доцільно у HTML-коді сторінок виділити ключові слова тегами, які свідчать про важливість цих слів: • <strong> — задає напівжирне накреслення, вказує на важливість виділеного тексту;• <i> — задає курсивне накреслення;• <big> — збільшує поточний розмір символів тексту.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/17.jpg" data-lightbox="slides" data-title="Слайд №17"><img src="/uploads/files/402351/178355/191100_images/thumb_17.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 17</div> <p>Зображення, вставлені на веб-сторінку, повинні матитекст заміщення, який містить ключові слова. Для цього використовується атрибут alt: <img src="ім’я або URL-адреса файла із зображенням" alt="текст заміщення"></p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/18.jpg" data-lightbox="slides" data-title="Слайд №18"><img src="/uploads/files/402351/178355/191100_images/thumb_18.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 18</div> <p>У тексті веб-сторінок доцільно створювати гіперпосилання для переходу на інші сторінки цього самого сайту: </p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/19.jpg" data-lightbox="slides" data-title="Слайд №19"><img src="/uploads/files/402351/178355/191100_images/thumb_19.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 19</div> <p>Отже, для оптимізації сайта потрібно:01020304визначити найвідповідніші сайту ключові словааналізувати сайт на предмет внутрішньої оптимізації сторінок: чи правильні заголовки, якісні тексти, зрозуміла користувачеві навігаціяза необхідності проводити комплекс робіт, спрямованих на поліпшення структури сайта, зміну текстів та оптимізацію сторінок під пошукові запитирегулярно складати звіти про видимість сайта в популярних пошукових машинах</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/20.jpg" data-lightbox="slides" data-title="Слайд №20"><img src="/uploads/files/402351/178355/191100_images/thumb_20.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 20</div> <p>— це комплекс заходів, спрямований на збільшення відвідуваності сайту цільовою аудиторією. Просування сайту— збільшення співвідношення відвідувачів сайта, які вчинили очікувану дію, до всіх відвідувачів (подається у відсотках). Мета</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/21.jpg" data-lightbox="slides" data-title="Слайд №21"><img src="/uploads/files/402351/178355/191100_images/thumb_21.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 21</div> <p>Цільова аудиторія— це користувачі, для яких створено цей сайт.для інтернет-магазинівдля соціальних мереждля сайту закладу освіти для державних установ</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/22.jpg" data-lightbox="slides" data-title="Слайд №22"><img src="/uploads/files/402351/178355/191100_images/thumb_22.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 22</div> <p>Отже, стратегіями просування сайтів є: Реєстрація в пошукових каталогах. Просування сайту офлайн. Просування засобами соціальних мереж, SMOПошукова оптимізація, SEOКонтекстна (банерна) реклама</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/23.jpg" data-lightbox="slides" data-title="Слайд №23"><img src="/uploads/files/402351/178355/191100_images/thumb_23.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 23</div> <p>— полягає в розміщенні відомостей про сайт у базах даних популярних тематичних каталогів, наприклад Мета (meta.ua), Uaport (uaport.net) тощо. Реєстрація в пошукових каталогах </p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/24.jpg" data-lightbox="slides" data-title="Слайд №24"><img src="/uploads/files/402351/178355/191100_images/thumb_24.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 24</div> <p>— процес коригування HTML-коду, контенту, структури сайту для забезпечення відповідності вимогам пошукових систем з метою отримання високих позицій веб-ресурсу в результатах пошуку за певними запитами користувачів. Пошукова оптимізація, або SEO</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/25.jpg" data-lightbox="slides" data-title="Слайд №25"><img src="/uploads/files/402351/178355/191100_images/thumb_25.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 25</div> <p>— просування сайту з використанням можливостей соціальних мереж. Просування засобамисоціальних мереж. SMО, англ. Social Media Optimization — оптимізація соціальних медіа. SMM, англ. Social Media Marketing — маркетинг соціальних мереж. SMM — це реклама сайту в соціальних мережах і медіа. SMO передбачає створення на сайті засобів для зручного дода-вання відомостей з нього в соціальні мережі, коментування матеріалів сайту з використанням облікового запису соціальних мереж тощо. </p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/26.jpg" data-lightbox="slides" data-title="Слайд №26"><img src="/uploads/files/402351/178355/191100_images/thumb_26.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 26</div> <p>Контекстна (банерна) реклама — передбачає розміщення рекламних оголошень про сайт на сторінках пошукових систем у результатах пошуку за певними ключовими словами. Рекламна кампанія є платною та проводиться з використанням спеціальних сервісів пошукових систем, наприклад Google Adwords.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/27.jpg" data-lightbox="slides" data-title="Слайд №27"><img src="/uploads/files/402351/178355/191100_images/thumb_27.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 27</div> <p>Просування сайту офлайн — може проводитись у вигляді зовнішньої реклами, листівок, реклами у газетах, на радіо та телебаченні тощо.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/28.jpg" data-lightbox="slides" data-title="Слайд №28"><img src="/uploads/files/402351/178355/191100_images/thumb_28.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 28</div> <p>Практичне завдання1. Перегляньте сайт Зелена хвиля (ecoclubua.com). 2. Запишіть, які елементи сайту відповідають вимогам ергономіки, а які — ні. 3. Запишіть, у чому могла б полягати оптимізація сайту.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/402351/178355/191100_images/29.jpg" data-lightbox="slides" data-title="Слайд №29"><img src="/uploads/files/402351/178355/191100_images/thumb_29.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 29</div> <p>Завдання на самостійну підготовку1. Ознайомтеся з рекомендаціями щодо просування (https://igroup.com.ua/seo-articles/prosuvannya-sajtu) та оптимізації сайтів (https://igroup.com.ua/seo-articles/optymizatsiya-sajtu). 2. Складіть карту знань з поясненням понять «просування веб-сайту» та «пошукова оптимізація». </p> </div> </div> </div> </div> </div> </div> <div class="document-content-block"> </div> </div> </div> <aside class="tb-lib-aside tb-lib-aside-bottom"> <section class="tb-card tb-promo-ev margbottom" aria-label="Підвищення кваліфікації"> <div class="tb-card-head"> <span class="tb-ico tb-ico-go" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg></span> <div class="tb-card-head-text"> <b>Підвищення кваліфікації</b> <small>Найближчі вебінари, конференції та курси</small> </div> </div> <div class="tb-promo-ev-list"> <a class="tb-promo-ev-item" href="/webinar/pomichnik-vchitelya-na-urok-yak-vikoristovuvati-shi-u-roboti-pedagoga" data-id="webinar_1595"> <span class="tb-promo-ev-img" style="background-image:url('https://naurok.com.ua/uploads/webinar/1595/list.png')"></span> <span class="tb-promo-ev-body"> <span class="tb-chips"> <span class="tb-chip tb-chip-sun">Вебінар</span> </span> <b class="tb-promo-ev-title">Помічник вчителя «На Урок»: як використовувати ШІ у роботі педагога</b> <small class="tb-promo-ev-meta"> <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> 2 листопада о 17:00</span> <span>2 години підвищення кваліфікації</span> </small> <small class="tb-promo-ev-lectors">Цукор Любов</small> </span> </a> <a class="tb-promo-ev-item" href="/webinar/bezpeka-uchniv-v-interneti-vpliv-shtuchnogo-intelektu-na-kiberbuling-v-umovah-trivalo-travmi-viyni" data-id="webinar_1600"> <span class="tb-promo-ev-img" style="background-image:url('https://naurok.com.ua/uploads/webinar/1600/list.png')"></span> <span class="tb-promo-ev-body"> <span class="tb-chips"> <span class="tb-chip tb-chip-sun">Вебінар</span> </span> <b class="tb-promo-ev-title">Безпека учнів в інтернеті: вплив штучного інтелекту на кібербулінг в умовах тривалої травми війни </b> <small class="tb-promo-ev-meta"> <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> 2 листопада о 18:00</span> <span>2 години підвищення кваліфікації</span> </small> <small class="tb-promo-ev-lectors">Найдьонова Любов</small> </span> </a> <a class="tb-promo-ev-item" href="/conference/practice_canva" data-id="conference_291"> <span class="tb-promo-ev-img" style="background-image:url('https://naurok.com.ua/uploads/conference/291/list.png')"></span> <span class="tb-promo-ev-body"> <span class="tb-chips"> <span class="tb-chip tb-chip-grape">Конференція</span> </span> <b class="tb-promo-ev-title">Canva для вчителів: практичні можливості для інтерактивного навчання</b> <small class="tb-promo-ev-meta"> <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> 3 листопада о 16:00</span> <span>10 годин підвищення кваліфікації</span> </small> <small class="tb-promo-ev-lectors">Момот Ольга, Батура Юлія, Баженова Наталія</small> </span> </a> </div> <div class="tb-card-foot"> <a class="tb-btn tb-btn-line tb-btn-sm" href="/upgrade">Усі заходи</a> <a class="tb-btn tb-btn-ghost tb-btn-sm" href="/courses">Курси</a> </div> </section> <div class="tb-lib-promo-classic"> <div class="tb-lib-card tb-library-award"> <img class="tb-library-award-img" src="/img/mart-cert-lg.png" alt="" loading="lazy"> <div class="tb-library-award-body"> <b>Безкоштовний сертифікат<br />про публікацію авторської розробки</b> <span>Щоб отримати, додайте розробку</span> <a class="tb-btn tb-btn-go" href="/biblioteka/upload"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Додати розробку</a> </div> </div> </div> <div class="tb-lib-card tb-lib-rels"><h2 class="tb-lib-h2">Рекомендовані матеріали</h2><div class="tb-lib-rel"><span class="tb-lib-file tb-lib-file-sm is-pptx" aria-hidden="true">pptx</span><span class="tb-lib-rel-body"><b><a class="tb-lib-rel-link" href="/prezentaciya-poyasnennya-ponyattya-pro-bazi-danih-178809.html">Презентація-пояснення "Поняття про бази даних"</a></b><small><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg> 844 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> 0</small></span></div><div class="tb-lib-rel"><span class="tb-lib-file tb-lib-file-sm is-pptx" aria-hidden="true">pptx</span><span class="tb-lib-rel-body"><b><a class="tb-lib-rel-link" href="/prezentaciya-poyasnennya-etapi-stvorennya-bazi-danih-178811.html">Презентація-пояснення "Етапи створення бази даних"</a></b><small><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg> 10620 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> 0</small></span></div><div class="tb-lib-rel"><span class="tb-lib-file tb-lib-file-sm is-pptx" aria-hidden="true">pptx</span><span class="tb-lib-rel-body"><b><a class="tb-lib-rel-link" href="/prezentaciya-poyasnennya-ponyattya-pro-sistemi-upravlinnya-bazami-danih-178814.html">Презентація-пояснення "Поняття про системи управління базами даних"</a></b><small><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg> 939 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> 0</small></span></div><div class="tb-lib-rel"><span class="tb-lib-file tb-lib-file-sm is-pptx" aria-hidden="true">pptx</span><span class="tb-lib-rel-body"><b><a class="tb-lib-rel-link" href="/prezentaciya-poyasnennya-sistema-upravlinnya-bazami-danih-microsoft-office-access-2010-178821.html">Презентація-пояснення "Система управління базами даних Microsoft Office Access 2010"</a></b><small><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg> 1036 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> 0</small></span></div></div> <div class="tb-lib-card tb-lib-rels"><h2 class="tb-lib-h2">Схожі матеріали</h2><div class="tb-lib-rel"><span class="tb-lib-file tb-lib-file-sm is-zip" aria-hidden="true">zip</span><span class="tb-lib-rel-body"><b><a class="tb-lib-rel-link" href="/nastroyuvannya-parametriv-storinok-stvorennya-kolontituliv-druk-dokumenta-praktichna-robota-4-avtomatichne-stvorennya-zmistu-dokumenta-nastroyuvannya-parametriv-storinok-stvorennya-kolontituliv-537.html">Практична робота з інформатики для 10 класу на тему: «Автоматичне створення змісту документа. Настроювання параметрів сторінок. Створення колонтитулів»</a></b><small><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg> 5358 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> 5</small></span></div><div class="tb-lib-rel"><span class="tb-lib-file tb-lib-file-sm is-docx" aria-hidden="true">docx</span><span class="tb-lib-rel-body"><b><a class="tb-lib-rel-link" href="/metodichna-rozrobka-pozaklasnogo-zahodu-z-informatiki-bezpechniy-internet-705.html"> Методична розробка позакласного заходу з інформатики “Безпечний Інтернет” </a></b><small><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg> 4524 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> 5</small></span></div><div class="tb-lib-rel"><span class="tb-lib-file tb-lib-file-sm is-ppt" aria-hidden="true">ppt</span><span class="tb-lib-rel-body"><b><a class="tb-lib-rel-link" href="/metodika-vikonannya-laboratornih-robit-z-informatiki-dlya-uchniv-pershogo-kursu-ptnz-riven-standartu-1014.html">Методика виконаннялабораторних робіт з інформатики для учнів першого курсу ПТНЗ (рівень стандарту)</a></b><small><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg> 5923 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> 5</small></span></div><div class="tb-lib-rel"><span class="tb-lib-file tb-lib-file-sm is-zip" aria-hidden="true">zip</span><span class="tb-lib-rel-body"><b><a class="tb-lib-rel-link" href="/urok-stvorennya-avtomatizovanogo-saytu-v-google-ta-prezentaciya-do-uroku-stvorennya-avtomatizovanogo-saytu-v-google-2658.html">Урок «Створення автоматизованого сайту в Google» та Презентація до уроку «Створення автоматизованого сайту в Google»</a></b><small><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg> 6671 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> 5</small></span></div><div class="tb-lib-rel"><span class="tb-lib-file tb-lib-file-sm is-pdf" aria-hidden="true">pdf</span><span class="tb-lib-rel-body"><b><a class="tb-lib-rel-link" href="/elektronniy-laboratorniy-praktikum-na-temu-videomontazh-4422.html">Електронний лабораторний практикум на тему «Відеомонтаж»</a></b><small><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg> 11344 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> 5</small></span></div></div> <div class="tb-lib-card tb-lib-share hidden-xs"> <h2 class="tb-lib-h2">Поділитись матеріалом</h2> <div class="tb-chips"> <a href="javascript:void(0)" class="tb-chip-btn tb-share-facebook" onclick="Share.facebook('https://naurok.com.ua/urok-poshukova-optimizaciya-ta-prosuvannya-vebsaytiv-178355.html', 'Урок "Пошукова оптимізація та просування вебсайтів"'); Share.log('doc',178355,'facebook');">Facebook</a> <a href="javascript:void(0)" class="tb-chip-btn tb-share-viber" onclick="Share.viber('https://naurok.com.ua/urok-poshukova-optimizaciya-ta-prosuvannya-vebsaytiv-178355.html', 'Урок "Пошукова оптимізація та просування вебсайтів"'); Share.log('doc',178355,'viber');">Viber</a> <a href="javascript:void(0)" class="tb-chip-btn tb-share-telegram" onclick="Share.telegram('https://naurok.com.ua/urok-poshukova-optimizaciya-ta-prosuvannya-vebsaytiv-178355.html', 'Урок "Пошукова оптимізація та просування вебсайтів"'); Share.log('doc',178355,'telegram');">Telegram</a> <a href="javascript:void(0)" class="tb-chip-btn tb-share-twitter" onclick="Share.twitter('https://naurok.com.ua/urok-poshukova-optimizaciya-ta-prosuvannya-vebsaytiv-178355.html', 'Урок "Пошукова оптимізація та просування вебсайтів"'); Share.log('doc',178355,'twitter');">Twitter</a> </div> </div> </aside> </div> <div class="tb-lib-dock"> <a class="tb-btn tb-btn-go" href="/registration?file_id=178355"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Завантажити</a> <a href="/registration?file_id=178355" class="tb-btn tb-btn-line" onClick="libsBookmark.save(178355);"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 12 5.2 5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z"/></svg> <span>Зберегти на потім</span></a> </div> </main></div> </div></div> </div> </div> <style> .field-turnstile{ display: none; } </style> <footer class="site-footer"> <div class="site-footer__document-check"> <div class="container-fluid"> <form id="w6" action="/proof" method="POST"> <input type="hidden" name="_csrf" value="688XNyd3nURBDa6Dm-RvHNWWVDXGn-K7G1Fq6SwCCpjYoH0GaATPHidandzIvQsu4cYZfYzuivxUFViCSW9L8Q=="> <div class="row"> <div class="col-xs-12 text-center"> <span class="site-footer__title"> Перевірка виданих документів </span> </div> <div class="col-xs-12 text-center"> <small class="site-footer__title site-footer__title--small"> Вкажіть номер документа (використовуйте кириличну розкладку) </small> </div> <div class="col-xs-12"> <div class="site-footer__form"> <div class="site-footer__input-wrapper"> <input type="text" name="number" value="" placeholder="ВXXX-XXXX" > </div> <div class="site-footer__button-wrapper"> <button type="submit">Перевірити</button> </div> </div> </div> </div> </form> </div> </div> <div class="site-footer__main"> <div class="container-fluid"> <div class="row site-footer__main-row"> <div class="col-xs-6 col-md-3"> <ul class="site-footer__list"> <li> <span class="site-footer__title"> Підвищення кваліфікації </span> </li> <li><a class="site-footer__item" href="/upgrade">Підвищення кваліфікації</a></li> <li><a class="site-footer__item" href="/webinar">Вебінари</a></li> <li><a class="site-footer__item" href="/conference">Конференції</a></li> <li><a class="site-footer__item" href="/courses">Курси</a></li> <li><a class="site-footer__item" href="https://vector.uied.gov.ua/uk/spk/1103/detail/" rel="nofollow noopener" target="_blank">Вектор</a></li> </ul> </div> <div class="col-xs-6 col-md-3"> <ul class="site-footer__list"> <li> <span class="site-footer__title"> Розділи </span> </li> <li><a class="site-footer__item" href="/journal">Журнал</a></li> <li><a class="site-footer__item" href="/biblioteka">Бібліотека розробок</a></li> <li><a class="site-footer__item" href="/test">Тести</a></li> <li><a class="site-footer__item" href="/labs">Лабораторні роботи</a></li> <li><a class="site-footer__item" href="/project">Проєкти</a></li> <li><a class="site-footer__item" href="/konkurs">Конкурси</a></li> <li><a class="site-footer__item" href="/olimpiada">Олімпіади</a></li> <li><a class="site-footer__item" href="/chat">Чат</a></li> <li><a class="site-footer__item" href="/pro">На Урок ПРО</a></li> <li><a class="site-footer__item" href="https://naurok.ua/course/english">Курси англійської мови</a> </ul> </div> <div class="col-xs-6 col-md-3 site-footer__social"> <ul class="site-footer__list"> <li> <span class="site-footer__title"> Про нас </span> </li> <li><a class="site-footer__item" href="/page/about">Про «На Урок»</a></li> <li><a class="site-footer__item" href="/school/request">Співпраця закладів освіти</a></li> </ul> <a href="/page/contact-us" class="button button--primary"> Зворотний зв'язок </a> <div class="site-footer__social-group"> <a target="_blank" href="https://www.youtube.com/channel/UCMCYaKTwZ1Olw1fuzLvgA_Q" class="site-footer__social-item site-footer__social-item--youtube"> <img src="/img/footer/youtube-ico.svg" alt=""> </a> <a target="_blank" href="https://www.facebook.com/naurok.com.ua/" class="site-footer__social-item site-footer__social-item--facebook"> <img src="/img/footer/facebook-ico.svg" alt=""> </a> <a target="_blank" href="https://t.me/naurok" class="site-footer__social-item site-footer__social-item--telegram"> <img src="/img/footer/telegram-ico.svg" alt=""> </a> </div> </div> <div class="col-xs-6 col-md-3"> <ul class="site-footer__list"> <li> <span class="site-footer__title"> Інше </span> </li> <li><a class="site-footer__item" href="https://naurok.ua">Вхід для учнів (naurok.ua)</a></li> <li><a class="site-footer__item" href="/calendar">Матеріали до свят</a></li> <li><a class="site-footer__item" href="/five">Конкурс «Фантастична п’ятірка»</a></li> </ul> </div> </div> <div class="row site-footer__copyright"> <div class="site-footer__copyright-info"> <div class="row"> <div class="col-xs-12 col-lg-6"> <small class="site-footer__title site-footer__title--small"> © 2017-2026, ТОВ «ОСВІТНІЙ ЦЕНТР «НА УРОК» </small> </div> <div class="col-xs-12 col-lg-6 text-xl-right"> <a href="/page/terms-of-use" class="site-footer__title--small">Угода користувача</a> | <a href="/page/terms" class="site-footer__title--small">Умови користування</a> | <a href="/page/privacy-policy" class="site-footer__title--small">Політика конфіденційності</a> </div> </div> </div> </div> </div> </div> </footer> <div class="modal fade" id="registration" tabindex="-1" role="dialog" aria-labelledby="registration"> <div class="modal-dialog modal-registration" role="document"> <div class="modal-content"> <div class="modal-body"> <div class="account-page account-registration" style="margin-top:10px"> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="h1-block text-center" style=" margin: 0 0 10px; font-weight: 700; font-size: 30px; line-height: 1; color: #bdbdbd;">Реєстрація на сайті «На Урок»</div> <div class="sth-form sth-form-white"> <div class="auth-clients"> <a class="facebook auth-link-facebook" href="/account/auth?authclient=facebook" title="Facebook"> <i class="fa fa-facebook-square" aria-hidden="true"></i> Зареєструватись за допомогою Facebook </a> </div> <div class="auth-clients"> <a class="google auth-link-google" href="/account/auth?authclient=google" title="Google"> <img src="/img/google-logo.svg" class="google-icon" alt=""> Зареєструватись за допомогою Google </a> </div> <div class="auth-or">або</div> <form id="footer-registration-form" action="/registration" method="post"> <input type="hidden" name="_csrf" value="688XNyd3nURBDa6Dm-RvHNWWVDXGn-K7G1Fq6SwCCpjYoH0GaATPHidandzIvQsu4cYZfYzuivxUFViCSW9L8Q=="> <div class="form-group field-lastname required"> <label class="control-label" for="lastname">Прізвище</label> <input type="text" id="lastname" class="form-control input-lg" name="lastName" maxlength="255" placeholder="Вкажіть прізвище" aria-required="true"> <p class="help-block help-block-error"></p> </div> <div class="form-group field-firstname required"> <label class="control-label" for="firstname">Ім'я</label> <input type="text" id="firstname" class="form-control input-lg" name="firstName" maxlength="255" placeholder="Вкажіть ім'я" aria-required="true"> <p class="help-block help-block-error"></p> </div> <div class="form-group field-email required"> <label class="control-label" for="email">Email</label> <input type="text" id="email" class="form-control input-lg" name="email" placeholder="Вкажіть ваш email" aria-required="true"> <p class="help-block help-block-error"></p> </div> <div class="form-group field-password required"> <label class="control-label" for="password">Пароль</label> <input type="password" id="password" class="form-control input-lg" name="password" placeholder="Придумайте пароль" aria-required="true"> <p class="help-block help-block-error"></p> </div> <div class="form-group field-turnstile"> <label class="control-label" for="turnstile"></label> <input type="hidden" id="cf-turnstile-1-input" name="turnstile" value=""><div id="cf-turnstile-1-widget"></div><script>(function(){var c=document.getElementById("cf-turnstile-1-widget");if(c){var f=c.closest("form");if(f){var b=f.querySelector("button[type=submit],input[type=submit],button:not([type])");if(b){b.disabled=true;var p=b.closest(".form-group")||b.parentNode;var l=document.createElement("div");l.className="cf-loader-text";l.id="cf-turnstile-1-widget-loader";l.innerHTML='<span class="cf-spinner"></span> Перевірка безпеки...';p.appendChild(l);}}}})();</script> <p class="help-block help-block-error"></p> </div> <p style="margin-top:20px; text-align:center;">Реєструючись, ви погоджуєтеся з <a target="_blank" href="/page/terms-of-use">угодою користувача</a> та <a target="_blank" href="/page/privacy-policy">політикою конфіденційності</a>.</p> <button type="submit" class="sth-btn-shaped sth-btn-shaped-lime btn-block"> Зареєструватись</button> </form> <div class="text-center" style="margin-top:20px;"> Вже зареєстровані? <a class="sth-underline-reverse" href="/login">Спробуйте увійти</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="FacebookAlert" tabindex="-1" role="dialog" aria-labelledby="FacebookAlert"> <div class="modal-dialog" role="document"> <div class="modal-content modal-facebook"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <div class="modal-message-title">Давай дружити!</div> <div class="modal-message">Оновлення «На Урок» — в кожну стрічку Facebook</div> <div class="modal-facebook-widget"> <div class="fb-page" data-href="https://www.facebook.com/naurok.com.ua" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/naurok.com.ua" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/naurok.com.ua">«На Урок». Освітній інтернет-проект</a></blockquote></div> </div> <div class="modal-close-link"> <a href="javascript:void(0)" data-dismiss="modal"> Дякую, Я вже давно з вами</a> </div> </div> </div> </div> </div> <div class="modal fade" id="SubscribeAlert" tabindex="-1" role="dialog" aria-labelledby="SubscribeAlert"> <div class="modal-dialog" role="document"> <div class="modal-content modal-email"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <i class="fa fa-paper-plane" aria-hidden="true"></i> <div class="modal-message-title">Розсилка «На Урок»</div> <div class="modal-message">Ми надсилатимемо наші цікаві та дуже корисні статті щоп’ятниці</div> <div class="form-inline"> <div class="form-group"> <label class="sr-only" for="emailForm">Ваш e-mail</label> <input type="email" class="form-control email-subscribe" id="emailForm" placeholder="Ваш e-mail"> </div> <button type="submit" class="btn btn-primary btn-subscribe">Підписатись</button> <div class="alert alert-success success-form hide">Дякуємо! Ми будемо тримати Вас в курсі!</div> </div> </div> </div> </div> </div> <script src="https://www.gstatic.com/firebasejs/5.11.0/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: "AIzaSyDqZNEmjh0EBu1hQqQR22QswP2ZFoOAnTE", authDomain: "naurok-com-ua.firebaseapp.com", databaseURL: "https://naurok-com-ua.firebaseio.com", projectId: "naurok-com-ua", storageBucket: "naurok-com-ua.appspot.com", messagingSenderId: "756484883010" }; firebase.initializeApp(config); </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "name": "«На Урок»", "url": "https://naurok.com.ua", "logo": "https://naurok.com.ua/img/logo_new3.png", "sameAs": [ "https://www.facebook.com/naurok.com.ua", "https://www.facebook.com/groups/naurok.com.ua/", "https://plus.google.com/116882310924056429434", "https://www.youtube.com/channel/UCMCYaKTwZ1Olw1fuzLvgA_Q" ] } </script> <script> /* пошук у шапці без залежності від jQuery (класичні onClick викликають $()); працює і на локальному сервері без jQuery */ (function(){ function show(on){ var f=document.querySelector('.main-nav .head-search-input'); if(!f) return; f.style.display=on?'block':''; document.querySelectorAll('.main-nav .menu-item').forEach(function(li){ li.style.display=on?'none':''; }); if(on){ var i=f.querySelector('input'); if(i) i.focus(); } } document.addEventListener('click', function(e){ if (e.target.closest('.main-nav .head-search-icon')) { e.preventDefault(); e.stopImmediatePropagation(); show(true); } else if (e.target.closest('.main-nav .close-search-form')) { e.preventDefault(); e.stopImmediatePropagation(); show(false); } }, true); })(); /* телефон: у фільтрах-чипах з горизонтальною прокруткою вибраний чип має бути видно одразу */ (function(){ if (!window.matchMedia || !matchMedia('(max-width: 640px)').matches) return; document.querySelectorAll('.tb-filters .tb-chips').forEach(function(row){ var on = row.querySelector('.is-on, .active, [aria-pressed="true"]'); if (on && row.scrollWidth > row.clientWidth) row.scrollLeft = Math.max(0, on.getBoundingClientRect().left - row.getBoundingClientRect().left + row.scrollLeft - 12); }); })(); /* картинки, яких немає на сервері (сховище віддає 403 — частина іконок олімпіад, обкладинок вебінарів): ховаємо замість значка «зламаної» картинки — лишається фон обгортки */ (function(){ function mark(i){ if (i.tagName === 'IMG') i.setAttribute('data-tb-broken', ''); } document.addEventListener('error', function(e){ mark(e.target); }, true); document.querySelectorAll('img').forEach(function(i){ var s = i.getAttribute('src') || ''; if (i.complete && s && !/\.svg(\?|$)|^data:/i.test(s) && !i.naturalWidth) mark(i); /* SVG без розмірів може мати naturalWidth 0 — для них лише подія error */ }); })(); </script> <script type="application/json" id="npw-data">{"guest":true,"plan":"month","prices":{"month":99,"year":999},"saving":189,"yearMonthly":83,"urls":{"pro":"/pro","checkout":"/pro/checkout","query":[],"login":"/account/login"},"features":[{"key":"assistant","title":"Помічник вчителя","value":"150 результатів щомісяця","text":"плани уроків, презентації, тести, листи батькам"},{"key":"test_ai","title":"ШІ-запитання для тестів","value":"200 щомісяця","text":"тема чи абзац з підручника — готові запитання"},{"key":"types","title":"Інтерактивні завдання","value":"усі 6 типів","text":"пропуски, список, таблиця правда/неправда, порядок, відповідності, категорії"},{"key":"chat","title":"Чат з видатними постатями","value":"без обмежень","text":"Леся Українка, Шевченко, Грушевський та інші"},{"key":"library_quiz","title":"Тести з матеріалів бібліотеки","value":"у лімітах Помічника","text":"будь-яка розробка — тест в один клік"},{"key":"publish","title":"Публікація в бібліотеці","value":"з Помічника","text":"ваші ШІ-матеріали побачать інші вчителі"},{"key":"doshka","title":"Інтерактивна дошка","value":"усі віджети й сторінки","text":"дошка з учнями, хмара слів, стіна думок, шумомір, камера, PDF, табло, ШІ-підказки"}],"contexts":{"default":["Усі ШІ-можливості «На Урок» в одній підписці","Помічник вчителя, ШІ-запитання й інтерактивні завдання для тестів, чат з постатями."],"assistant":["Безкоштовні результати використано","З ПРО — 150 результатів Помічника щомісяця. Оформіть і продовжуйте з того самого місця."],"test_ai":["Безкоштовні ШІ-запитання використано","З ПРО — 200 ШІ-запитань щомісяця. Оформіть і продовжуйте з того самого місця."],"types":["Інтерактивні завдання — з «На Урок ПРО»","Пропуски, порядок, відповідності, категорії й інші типи, які учні проходять з будь-якого пристрою."],"chat":["Безкоштовні відповіді вичерпано","З ПРО чат з постатями — без обмежень. Після оплати повернетеся до розмови."],"library_quiz":["Тести з матеріалів бібліотеки — з ПРО","Будь-яка розробка бібліотеки стає тестом в один клік — у межах 150 результатів Помічника вчителя щомісяця."],"publish":["Публікація в бібліотеці — з «На Урок ПРО»","Ваші матеріали з Помічника побачать і зможуть використати інші вчителі."],"doshka":["Уся «Інтерактивна дошка» — з «На Урок ПРО»","Скільки завгодно сторінок уроку, дошка з учнями, хмара слів, стіна думок, шумомір, камера, PDF, табло й матеріали Помічника."]},"free":{"assistant":10,"test_ai":10,"chat":10},"css":"/test-beta-static/paywall.css?v=1792088630"}</script><script src="/test-beta-static/paywall.js?v=1792596654" defer></script><script src="/js/app_core.js?4.1"></script> <script src="/assets/cb30fc59caa0617bdb70be372b05a914/jquery.js"></script> <script src="/assets/af03f6b16f606305d9cf827034cc8968/yii.js"></script> <script src="/js/app_set.js?9"></script> <script src="/js/script.full.js?v1.2.6"></script> <script src="/assets/f0db75bd7fb3b61fd5c2b967f1a77e3e/js/bootstrap.js"></script> <script src="/assets/af03f6b16f606305d9cf827034cc8968/yii.activeForm.js"></script> <script>(function () { document.querySelectorAll('.tb-lib-single .doc-content').forEach(function (dc) { var pages = dc.querySelectorAll('[id^="page"][id$="-div"]'); if (pages.length) { dc.classList.add('is-pdf'); var fit = function () { var w = dc.clientWidth; pages.forEach(function (p) { var pw = parseFloat(p.style.width) || p.scrollWidth; if (pw > 0) p.style.zoom = Math.min(1, w / pw); }); }; fit(); window.addEventListener('resize', fit); } else { dc.querySelectorAll('p, div').forEach(function (el) { if (el.querySelector('img, table, svg, iframe, object')) return; if (el.textContent.replace(/[\s ]+/g, '') === '') el.classList.add('tb-doc-empty'); }); // короткі написи з фігур і діаграм Word (були position:absolute) — підписами в рядок, а не стовпчиком dc.querySelectorAll('[style*="position: absolute"], [style*="position:absolute"]').forEach(function (el) { if (el.querySelector('img, table')) return; var text = el.textContent.replace(/\s+/g, ' ').trim(); if (text && text.length <= 40) el.classList.add('tb-doc-label'); }); } if (dc.scrollHeight > 1800) { dc.classList.add('is-collapsed'); var wrap = document.createElement('div'); wrap.className = 'tb-lib-doc-more'; var btn = document.createElement('button'); btn.type = 'button'; btn.className = 'tb-btn tb-btn-line'; btn.textContent = 'Показати весь документ'; btn.addEventListener('click', function () { var open = dc.classList.toggle('is-collapsed') === false; btn.textContent = open ? 'Згорнути' : 'Показати весь документ'; if (!open) dc.scrollIntoView({ block: 'start', behavior: 'smooth' }); }); wrap.appendChild(btn); dc.parentNode.insertBefore(wrap, dc.nextSibling); } }); })(); (function () { var orig = window.libsBookmark && libsBookmark.save; if (!orig) return; libsBookmark.save = function (id, clear) { var btns = document.querySelectorAll('.bookmark-file-beta'); var on = !btns[0].classList.contains('is-on'); orig.call(libsBookmark, id, clear); btns.forEach(function (b) { b.classList.toggle('is-on', on); b.querySelector('span').textContent = on ? 'Збережено' : 'Зберегти на потім'; }); }; })(); window.__tbClassic=[["^\/beta\/test\/homework\/list$","\/test\/homework\/list"],["^\/beta\/test\/bookmarks$","\/test\/bookmarks"],["^\/beta\/test\/certification$","\/test\/certification"],["^\/beta\/biblioteka\/moe$","\/biblioteka\/moe"],["^\/beta\/biblioteka\/zberezheni$","\/library\/bookmarks"],["^\/beta\/biblioteka\/zavantazheni$","\/library\/downloads"],["^\/beta\/biblioteka\/vidznaky$","\/biblioteka\/vidznaky"],["^\/beta\/biblioteka\/konkursy$","\/library\/contest-ten"],["^\/beta\/biblioteka\/([\\w\\-]+)\\.html$","\/$1.html"]];document.addEventListener("click",function(e){var a=e.target.closest&&e.target.closest("a[href]");if(!a)return;var h=a.getAttribute("href")||"";if(!/^\/beta(\/|$)/.test(h))return;var p=h.split("?");for(var i=0;i<window.__tbClassic.length;i++){var re=new RegExp(window.__tbClassic[i][0]);if(re.test(p[0])){a.setAttribute("href",p[0].replace(re,window.__tbClassic[i][1].replace(/\$(\d)/g,"$$$1"))+(p[1]?"?"+p[1]:""));return;}}},true); (function () { var menus = document.querySelectorAll('.main-nav .navbar-nav > li.dropdown, .add-menu'); if (!menus.length) return; var bootstrap = !!(window.jQuery && window.jQuery.fn && window.jQuery.fn.dropdown); function closeAll(except) { menus.forEach(function (menu) { if (menu === except) return; menu.classList.remove('open'); var toggle = menu.querySelector('.dropdown-toggle'); if (toggle) toggle.setAttribute('aria-expanded', 'false'); }); } if (!bootstrap) { // мобільне меню («гамбургер») — Bootstrap collapse document.querySelectorAll('.main-nav .navbar-toggle[data-target]').forEach(function (button) { button.addEventListener('click', function () { var target = document.querySelector(button.getAttribute('data-target')); if (!target) return; var open = !target.classList.contains('in'); target.classList.toggle('in', open); button.classList.toggle('collapsed', !open); button.setAttribute('aria-expanded', open ? 'true' : 'false'); }); }); menus.forEach(function (menu) { var toggle = menu.querySelector('.dropdown-toggle'); if (!toggle) return; toggle.addEventListener('click', function (event) { event.preventDefault(); event.stopPropagation(); var open = !menu.classList.contains('open'); closeAll(menu); menu.classList.toggle('open', open); toggle.setAttribute('aria-expanded', open ? 'true' : 'false'); }); }); } document.addEventListener('click', function (event) { var inside = Array.prototype.some.call(menus, function (menu) { return menu.contains(event.target); }); if (!inside) closeAll(); }); document.addEventListener('keydown', function (event) { if (event.key === 'Escape') closeAll(); }); })(); (function(){ var widgetId = null; var submitBtn = null; var rendered = false; var containerId = 'cf-turnstile-1-widget'; var inputId = 'cf-turnstile-1-input'; var attempts = 0; console.log('[Turnstile] Widget init: ' + containerId); function doRender(){ attempts++; if(rendered) return true; if(typeof turnstile === 'undefined') { if(attempts % 50 === 0) console.log('[Turnstile] Waiting for API... attempt ' + attempts); return false; } if(typeof turnstile.render !== 'function') { console.error('[Turnstile] API loaded but render is not a function:', turnstile); return false; } var c = document.getElementById(containerId); var inp = document.getElementById(inputId); if(!c || !inp) { console.error('[Turnstile] Container or input not found:', containerId, inputId); return false; } rendered = true; console.log('[Turnstile] Rendering widget: ' + containerId); var form = c.closest('form'); if(form){ // Find submit button - buttons default to type="submit" so also check buttons without explicit type submitBtn = form.querySelector('button[type="submit"],input[type="submit"],button:not([type])'); if(submitBtn){ submitBtn.disabled = true; // Add loader text if not already created by inline script if(!document.getElementById(containerId + '-loader')){ var btnParent = submitBtn.closest('.form-group') || submitBtn.parentNode; var loader = document.createElement('div'); loader.className = 'cf-loader-text'; loader.id = containerId + '-loader'; loader.innerHTML = '<span class="cf-spinner"></span> Перевірка безпеки...'; btnParent.appendChild(loader); } } } try { widgetId = turnstile.render(c, { 'sitekey': '0x4AAAAAACM8akA9pEX9Z7Br', 'theme': 'auto', 'size': 'invisible', 'action': 'reg', 'callback': function(token){ console.log('[Turnstile] Token received for ' + containerId); inp.value = token; if(submitBtn) submitBtn.disabled = false; var loader = document.getElementById(containerId + '-loader'); if(loader) loader.style.display = 'none'; }, 'expired-callback': function(){ console.log('[Turnstile] Token expired for ' + containerId); inp.value = ''; if(submitBtn) submitBtn.disabled = true; var loader = document.getElementById(containerId + '-loader'); if(loader) loader.style.display = 'flex'; if(widgetId !== null) turnstile.reset(widgetId); }, 'error-callback': function(err){ console.error('[Turnstile] Error for ' + containerId + ':', err); } }); console.log('[Turnstile] Render complete for ' + containerId + ', widgetId:', widgetId); } catch(e) { console.error('[Turnstile] Render exception:', e); return false; } if(form && !form.dataset.cfHooked){ form.dataset.cfHooked = '1'; form.addEventListener('submit', function(){ setTimeout(function(){ if(widgetId !== null && typeof turnstile !== 'undefined'){ try { turnstile.reset(widgetId); } catch(e){} } }, 500); }); } return true; } var interval = setInterval(function(){ if(doRender()) clearInterval(interval); }, 100); setTimeout(function(){ clearInterval(interval); if(!rendered){ console.error('[Turnstile] TIMEOUT: Widget did not render after 15s. API loaded:', typeof turnstile !== 'undefined'); if(submitBtn){ submitBtn.disabled = false; var loader = document.getElementById(containerId + '-loader'); if(loader) loader.style.display = 'none'; } } }, 15000); })();</script> <script>jQuery(function ($) { jQuery('.webinar-link').click(function(){ window.location.href=$(this).attr('data-url'); }); jQuery('#w6').yiiActiveForm([], []); jQuery('#footer-registration-form').yiiActiveForm([], []); $('.btn-subscribe').click(function(){ if($('.email-subscribe').val() != ''){ Cookies.set('modal_subscribe', 'subscribed'); $.post('/api/subscriber',{email:$('.email-subscribe').val(),_csrf:'688XNyd3nURBDa6Dm-RvHNWWVDXGn-K7G1Fq6SwCCpjYoH0GaATPHidandzIvQsu4cYZfYzuivxUFViCSW9L8Q=='},function(data){ console.log(data); $('.modal-email .alert').text('Дякуємо! Ми будемо тримати Вас в курсі!').removeClass('hide alert-warning').addClass('alert-success'); }).fail(function(data) { $('.modal-email .alert').text(data.responseJSON[0].message).removeClass('hide alert-success').addClass('alert-warning'); }); } }) });</script> </body> </html>