26 урок
Цілі:
навчальна: сформувати поняття ергономіки розміщення відомостей на веб-сторінці;
розвивальна: розвивати логічне мислення, пам’ять; формувати вміння узагальнювати;
виховна: виховувати інформаційну культуру, формування бережливого ставлення до обладнання комп’ютерного кабінету, виховання уміння працювати в групі; формування позитивного ставлення до навчання.
Тип уроку: Комбінований.
Обладнання та наочність: дошка, комп’ютери з підключенням до мережі Інтернет, підручник, навчальна презентація.
Програмне забезпечення: браузер, офісні програми.
Хід уроку
І. Організаційний етап
· привітання
· перевірка присутніх
· перевірка готовності учнів до уроку
ІІ. Актуалізація опорних знань
ІІІ. Мотивацій навчальної діяльності
IV. Вивчення нового матеріалу
Пояснення вчителя з елементами демонстрування презентації
(використовуються можливості локальної мережі кабінету або проектор)
Ергономіка розміщення об'єктів на сторінці
У процесі створення веб-сайту важливо спланувати його структуру так, щоб користувачам Інтернету було максимально зручно працювати з вашим сайтом.
Ергономіка (грец έργος — праця, νώμος — закон) — це наука, яка вивчає особливості виробничої діяльності людини з метою забезпечення ефективності, безпеки та зручності цієї діяльності.
Ергономічний сайт — це сайт, що забезпечує необхідні зручності відвідувачеві, зменшує фізичну та психологічну втому, зберігає здоров’я та працездатність.
Складовою частиною ергономіки сайту є ступінь зручності та простоти веб-сайтів у використанні для користувача без потреби проходження спеціального навчання. Будь-яка людина повинна мати можливість інтуїтивно пов’язувати дії, які потрібно виконати на веб-сторінці, з об’єктами, що вона бачить.
Під час розробки структури веб-сторінок потрібно:
• подавати відомості у зрозумілій і стислій формі;
• пропонувати кілька посилань для переходу на одну й ту саму сторінку, щоб забезпечити кожному користувачу можливість вибрати найбільш зручне або очевидне;
• усувати будь-яку двозначність щодо наслідків дій після вибору елементів керування на веб-сторінці.
Ергономіка сайту стосується розміщення відомостей на веб-сторінках, системи навігації, оформлення сторінок, швидкості їх завантаження Наведемо опис критеріїв, за якими оцінюється ергономічність веб-сторінок.
Критерії оцінювання ергономічності веб-сторінок
Під час розробки веб-сайту потрібно враховувати можливість надання зручності для користувачів з особливими потребами. Для цього варто звертати увагу на таке:
• розмір шрифту повинен бути достатнім, щоб без масштабування сторінок його змогли прочитати без напруження зору більшість користувачів; для людей з вадами зору бажано надавати можливість змінення розміру шрифту;
• зображення повинні мати підписи та текст заміщення, щоб люди з вадами зору змогли зорієнтуватися у змісті зображення;
• за можливості додавати на веб-сторінки елементи, що озвучують важливі відомості на сайті.
2. Поняття про просування сайтів
Метою створення сайтів є залучення якомога більшого числа відвідувачів для ознайомлення з матеріалами сайту. Тому важливим етапом роботи із сайтом є його просування.
Просування сайту — це комплекс заходів, спрямований на збільшення відвідуваності сайту цільовою аудиторією. Цільовою аудиторією вважаються користувачі, для яких створено цей сайт: для інтернет-магазинів — користувачі, що шукають відповідний товар, для соціальних мереж — ті, хто має потребу в спілкуванні та обміні думками з певних питань, для сайту закладу освіти — ті, хто цікавиться новинами та умовами навчання у закладі тощо.
Існують різні та постійно з’являються нові стратегії просування сайтів. Наведемо приклади стратегій, які використовують для просування сайтів:
• Реєстрація в пошукових каталогах — полягає в розміщенні відомостей про сайт у базах даних популярних тематичних каталогів, наприклад Мета (meta.ua), Uaport (uaport.net) тощо.
• Пошукова оптимізація, або SEO (англ. Search Engine Optimization — пошукова оптимізація), — процес коригування HTML-коду, контенту, структури сайту для забезпечення відповідності вимогам пошукових систем з метою отримання високих позицій веб-ресурсу в результатах пошуку за певними запитами користувачів.
• Просування засобами соціальних мереж, SMO (англ. Social Media Optimization — оптимізація соціальних медіа) та SMM (англ. Social Media Marketing — маркетинг соціальних мереж) — просування сайту з використанням можливостей соціальних мереж. SMO передбачає створення на сайті засобів для зручного додавання відомостей з нього в соціальні мережі, коментування матеріалів сайту з використанням облікового запису соціальних мереж тощо. SMM — це реклама сайту в соціальних мережах і медіа
• Контекстна (банерна) реклама — передбачає розміщення рекламних оголошень про сайт на сторінках пошукових систем у результатах пошуку за певними ключовими словами. Рекламна кампанія є платною та проводиться з використанням спеціальних сервісів пошукових систем, наприклад Google Adwords.
• Просування сайту офлайн — може проводитись у вигляді зовнішньої реклами, листівок, реклами у газетах, на радіо та телебаченні тощо.
Ці та інші засоби сприяють збільшенню відвідуваності сайту. Але основним фактором популярності ресурсу є унікальний, цікавий і корисний для відвідувачів контент сайту.
3. Пошукова оптимізація
Для того щоб пошукова система наводила в числі перших у списку знайдених ресурсів ваш сайт, потрібно враховувати такі параметри:
• частота появи ключових слів на веб-сторінках. Оптимальною вважається щільність ключових слів 5-7 % від текстового вмісту веб-сторінки або 3-4 рази на сторінку;
• індекс цитування сайту, тобто показник, який визначається на основі кількості веб-ресурсів, які мають гіперпосилання на цей сайт При цьому сайти з посиланнями повинні бути такої самої або схожої тематики та ін.
Оптимізація сайту може бути зовнішньою та внутрішньою. Зовнішня оптимізація полягає в збільшенні кількості зовнішніх посилань на сайт. Внутрішня оптимізація передбачає удосконалення HTML-коду веб-сторінок вашого сайту з точки зору розміщення та форматування ключових слів.
Ключові слова характеризують сайт, за ними ваш сайт може бути знайдено під час пошуку в пошукових системах. Наприклад, для сайту навчального закладу ключовими словами можуть бути повна назва закладу, його тип — заклад освіти, школа, ліцей, гімназія тощо, слова освіта, навчання та ін.
Вибрані ключові слова потрібно розмістити в HTML-тегах сторінки, які опрацьовують пошукові роботи:
• <title> — назва, що відображається на вкладці браузера;
• <meta name="keywords" content="ключові слова"> — список ключових слів;
• <meta name="description" content="опис"> — опис сайту.
Наприклад, під час пошуку в пошуковій системі Google за запитом весела наука на першій позиції виведено посилання на сайт Весела наука з URL-адресою veselanauka.org.
HTML-код цієї сторінки містить, серед іншого, такі теги:
<meta name="keywords" content="Всеукраїнський Конкурс Проектів Інформатика Весела Наука школа ліцей чорноморський"/>
<meta name="description» content="Всеукраїнський Конкурс Проектів по Інформатиці Весела Наука"/>
<title>Всеукраїнський Конкурс Проектів по Інформатиці Весела Наука</title>
Під час внутрішньої оптимізації сайту доцільно у HTML-коді сторінок виділити ключові слова тегами, які свідчать про важливість цих слів:
• <strong> — задає напівжирне накреслення, вказує на важливість виділеного тексту;
• <i> — задає курсивне накреслення;
• <big> — збільшує поточний розмір символів тексту.
Достатньо, щоб на веб-сторінці було виділено таким чином 1-2 ключових слова.
Також на веб-сторінках повинні бути заголовки Заголовок, створений тегом <h1>, має бути лише один і містити ключову фразу. Підзаголовки на сторінці варто створювати тегами <h2>.
Бажано також, щоб зображення, вставлені на веб-сторінку, мали текст заміщення, який містить ключові слова. Для цього використовується атрибут alt:
<img src="ім’я або URL-адреса файла із зображенням" alt="текст заміщення">
У тексті веб-сторінок доцільно створювати гіперпосилання для переходу на інші сторінки цього самого сайту.
Наприклад, під час пошуку в пошуковій системі Google за запитом винахідник на першій позиції виведено посилання на сайт Технічна студія Винахідник з URL-адресою vynahidnyk.org.
HTML-код цієї сторінки, серед іншого, містить такі теги:
<img src="http://vynahidnyk.org/files/logo.png" alt="Винахідник"/>
<strong>Технічна студія Винахідник</strong>
<a href="http://vynahidnyk.org/pro-studiyu/">Про студію</a>
Зауважимо, що під час створення сайту засобами сервісу Google Сайти не має можливості врахувати деякі із цих рекомендацій, оскільки розробник сайту не працює безпосередньо з HTML-кодом сторінок сайту.
Робота з підручником: § 4.4
V. Засвоєння нових знань, формування вмінь
Робота за комп’ютером
1) Повторення правил безпечної поведінки за комп’ютером.
2) Інструктаж учителя.
3) Практична робота за комп’ютерами.
Підручник ст. 137
4) Вправи для очей.
Завдання:
Створіть у сервісі Google Сайти веб-сайт Збережемо природу рідного краю, розмістіть на ньому відомості про екологічні проблеми вашого регіону та запропонуйте способи їх подолання. Здійсніть заходи з просування та пошукової оптимізації сайту.
Методичні рекомендації:
1. Визначте ключові слова для вашого сайту, які стануть назвами веб-сторінок. Ними можуть бути: екологія, екологічні проблеми, захист природи, природа України, збереження природи, природа рідного краю, подолання екологічних проблем тощо.
2. Створіть у сервісі Google Сайти сайт з назвою Збережемо природу рідного краю.
3. Виберіть тему оформлення сайту та зображення у верхньому колонтитулі домашньої сторінки на ваш смак.
4. Розмістіть ключові слова сайту в назвах веб-сторінок. Для цього дайте домашній сторінці назву, наприклад Природа рідного краю. Створіть дві сторінки сайту з назвами, наприклад Екологічні проблеми та Збереження природи.
5. Розмістіть ключові слова сайту в заголовку статті на домашній сторінці. Для цього:
5.1. Виберіть у панелі навігації домашню сторінку
5.2. Уставте на веб-сторінку текстовий блок
5.3. Виберіть у меню текстового блока кнопку відкриття списку Стилі та команду Заголовок. Зверніть увагу на зміну розміру шрифту в заголовку.
5.4. Уведіть заголовок, наприклад Рідний край, натисніть клавішу Enter. Зверніть увагу на зміну розміру шрифту в тексті.
5.5. Уведіть 2-3 речення з описом того, за що ви любите свій край, яким ви хочете його бачити. В окремому абзаці вкажіть призначення сайту — для висвітлення екологічних проблем вашого краю та пошуку шляхів їх подолання.
6. Уставте до тексту сторінки гіперпосилання для переходу на інші сторінки сайту: під час вибору слів про екологічні проблеми — на сторінку з описом проблем, під час вибору слів про шляхи подолання проблем — на сторінку про збереження природи.
7. Уведіть ключові слова як текст заміщення для зображення. Для цього:
7.1. Уставте на сторінку Збереження природи інфографіку Біорізноманіття в Україні зі сторінки Новини сайту Всеукраїнська екологічна ліга.URL-адреса файла із зображенням
7.2. Виберіть в меню блока зображення кнопку Інші опції редагування та команду Додати текст заміщення.
7.3. Уведіть текст Природа України.
7.4. Виберіть кнопку Застосувати.
8. Уставте на сторінку Екологічні проблеми текст з файла. Оформіть заголовки та підзаголовки в тексті. Для цього:
8.1. Виберіть у панелі навігації сторінку Екологічні проблеми.
8.2. Уставте на сторінку текстовий блок
8.3. Відкрийте у вікні текстового процесора файл.
8.4. Виділіть увесь текст, скопіюйте його та вставте в текстовий блок на сторінці сайту.
8.5. Виділіть заголовок тексту Сім екологічних проблем України, виберіть у меню текстового блока кнопку відкриття списку Стилі та команду Заголовок.
8.6. Виділіть підзаголовок Неякісна вода, виберіть у меню текстового блока кнопку відкриття списку Стилі та команду Підзаголовок.
8.7. Оформіть як підзаголовки назви ще шести екологічних проблем.
9. Опублікуйте сайт. Уведіть частину URL-адреси ecology та ваше прізвище латиницею.
10. Перегляньте опублікований сайт.
11. Закрийте вікно браузера.
VI. Підсумки уроку
Фронтальне опитування
1. Який сайт вважається ергономічним?
2. Які критерії потрібно враховувати для забезпечення ергономічності сайту? Схарактеризуйте їх.
3. Яким чином під час створення сайту можна створити зручності для користувачів з особливими потребами?
Рефлексія
1. Під час уроку я
дізнався…
зрозумів…
навчився…
2. Найбільше мені сподобалося…
3. На уроках найкраще в мене виходило…
4. Я мав (-ла) труднощі з…
5. Я хотів би ще дізнатися про…
VІI. Домашнє завдання
Знайдіть в Інтернеті відомості про тренди поточного року та прослідкуйте, як вони змінювалися останнім часом.
За результатами дослідження створіть презентацію, розмістіть на своєму гугл-диску та надішліть посилання вчителю.
VІІI. Оцінювання роботи учнів