Google Sites (Сайти) як засіб узагальнення професійного досвіду педагогічного працівника

Роботу вчителя, що складена в роки

"Педагогічним досвідом" назвали навіки,

Проте з безцінним скарбом порівняти не змогли,

Бо ж сіять зерна успіху, мудрості й краси

Лиш прогресивним педагогам до снаги!

К. Р. Колос

У курсі викладено основи функціональних можливостей сервісу Google Сайти та їх використання при створенні власного web-ресурсу педагогічного працівника з метою акумулювання власного професійного досвіду.

Повноцінне використання функціональних можливостей сервісів Google можливе наразі лише при роботі з web-браузером Google Chome. Тому, якщо у Вас на комп'ютері не встановлена ця програма - закачайте її безкоштовно з Інтернету і встановіть. Використовуйте Google Chrome при роботі з сервісами Google.

Бажаємо успіхів!

1. Створення Google-акаунту як необхідна умова використання сервісу Google Сайти

1.1. Реєстрація власного Google-акаунта

Щоб мати можливість використовувати служби Google, у тому числі і «Сайти» необхідно, насамперед, зареєструватися на google.com.ua (рис.1.1), тобто створити свій акаунт (обліковий запис, у якому зберігаються персональні відомості користувача) (рис.1.2). Для відкриття переліку служб Google потрібно перейти за піктограмою Служби (рис.1.3).

Заповніть реєстраційну форму (рис.3):

- ім'я та прізвище пишете українською мовою;

- при формуванні імені користувача можна використовувати лише літери латинського алфавіту, цифри і крапки;

- при формуванні пароля можна використовувати лише літери латинського алфавіту та цифри; зверніть увагу яку розкладку клавіатури (великі чи малі літери) Ви використовуєте; пам'ятайте, що пароль не повинен збігатися з Вашою датою народження чи мобільним номером телефону;

- після заповнення всіх інших полів натисніть на кнопку "Наступний крок", далі підтвердіть номер телефону через код надісланий Вам через SMS.

Якщо Ви все правильно зробили - то тепер Ви знаходитесь у своєму акаунті і можете використовувати  усі безкоштовні сервіси Google, серед яких: Gmail (електронна пошта), Google Диск (віртуальна флешка на 15 Гбайт), Google Сайти тощо.

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

Для використання сервісів Google (Пошти, Диску, Сайти тощо) необхідно ...

  • зайти у свій Google-акаунт
  • зайти у пошукову систему Google
  • лише зайти у мережу Інтернет
  • лише запустити програму Google Chrome
продовжіть речення

2. Створення сайту на базі сервісу Google Сайти

2.1. Google Диск як засіб збереження файлів

Google Диск (віртуальна флешка на 15 Гбайт) є зручним сховищем, а також вставлення файлів із нього на сайт є раціональним методом використання простору сайту. Для цього варто знати та уміти використовувати функціональні можливості Google Диску.

Для того, щоб зайти на Google Диск потрібно вибрати "Додатки" (рис.2.1) -> Диск. Google Диск відкриється у новій вкладці.

Для того, щоб завантажити на Google Диск файл, необхідно у лівому верхньому куті вибрати кнопку "Створити", далі -> "Завантажити файл" (рис.2.2).

Після цього виберіть на своєму комп'ютері файл, далі - "Відкрити" (рис.2.3).

Відомості про процес завантаження будуть відображатися у правому нижньому куті вікна (рис.2.4)

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

Для того, щоб створити папку на Google Диск необхідно: "Створити" -> "Папка" -> вказати назву папки -> "Створити".

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

Якщо користувач планує виставити той чи інший об'єкт свого Google Диску на свій сайт, то має передбачити, що цей файл чи папку повинні бачити і інші користувачі Інтернет. Для цього він повинен надати доступ для перегляду іншим користувачам Інтернет.

Для цього необхідно: по файлу (папці) натиснути правою кнопкою миші -> у контекстному меню вибрати "Доступ" (рис.2.5).

Далі потрібно натиснути в лівому верхньому куті діалогового вікна "Отримати посилання для спільного доступу" -> "Готово" (рис.2.6)

Як встановлювати файли із Google Диску на свій сайт (створений на основі сервісу Google Сайти) буде пояснено у темі "Наповнення змісту (контенту) сайту".

Інструмент встановлення доступу до файлу

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

2.2. Створення web-ресурсу на базі сервісу Google Sites (Сайти)

Для запуску додатка Google Сайти необхідно відкрити сторінку із додатками Google, для цього: у правому верхньому кутку екрана необхідно натиснути "Додатки Google" -> Більше -> Інші додатки від Google (Рис.2.2.1, 2.2.2). Далі в категорії "Дім і офіс" вибрати Google Sites (Рис.2.2.3).

Для створення сайту натисніть "Створити" (рис.2.2.4)

Далі необхідно вибрати шаблон (рекомендуємо обирати "Пустий шаблон"). Далі вказуєте назву свого сайту, наприклад: "Навчальне портфоліо Прізвище", після чого потрібно підтвердити, що Ви не робот (рис.2.2.5)

Примітка.

Якщо після виконання описаних вище дій додаток Google Сайти видає повідомлення "Вибране Вами місце розташування не доступне", то це означає, що за такою URL-адресою уже зареєстрований web-ресурс (рис.2.2.6). У такому випадку рекомендуємо доставити (чи замінити) якийсь символ (можна використовувати лише літери латинського алфавіту та цифри) в URL-адресі.

Результатом має бути створений Вами сайт (рис.2.2.7)

Послідовність створення сайту

  • Вибрати шаблон
  • Вказати назву сайту
  • внести зміни в URL-адресу сайту (при потребі)
  • підтвердити, що сайт не створюється машиною- чи програмою-автоматом

3. Налаштування сайту

3.1. Встановлення загальних налаштувань сайта

На новоствореному web-ресурсі є лише назва сайту та одна web-сторінка "Домашня сторінка". Якщо при створені web-ресурсу обрано пустий шаблон, то сайт оформлено у сіро-білих кольорах  (рис.3.1.1).

Для переходу на налаштування сайту необхідно натиснути на кнопку "Спільний доступ".

Ліворуч у вікні міститься меню (рис.3.1.2).

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

У категорії "Загальні" (рис.3.1.2) можна:

  1. відкоригувати назву сайту чи відхилити налаштування "Відображати назву сайту у верхній частині сторінки";
  2. встановити сповіщення сайту: написати одноразове повідомлення, яке буде відображатися відвідувачам сайту;
  3. описати призначення сайту, зокрема: "Сайт створено для акумулювання педагогічної діяльності вчителя математики, інформатики Гришковецької гімназії Бердичівського району Стукало Тетяни Вікторівни";
  4. вибрати українську мову відображення сайту;
  5. встановити автоматичне налаштування сайту для мобільних телефонів тощо.

Визначіть необхідні налаштування для реалізації поставлених задач

  • Якщо до заголовку сайту: "Навчальне портфоліо Прізвище" - необхідно додати "Ім'я По батькові", то ...
    в загальних налаштуваннях сайту, необхідно ввести відповідні зміни у полі "Назва сайту"
  • Якщо на сайті для його відвідувачів необхідно встановити сповіщення типу "Вітаю Вас на своєму сайті!", то ...
    в загальних налаштуваннях сайту, необхідно ввести відповідні зміни у полі "Сповіщення сайту"
  • Якщо необхідно вказати призначення сайту типу "Web-ресурс призначений для акумулювання педагогічного досвіду вчителя фізики Житомирської ЗОШ №33 І-ІІІ ст. Гаркуши Надії Михайлівни", то ...
    в загальних налаштуваннях сайту, необхідно ввести відповідні зміни у полі "Опис сайту"
  • Для того, щоб користувачі могли переглядати сайт із мобільних пристроїв таких як: смартфони, планшети тощо, - необхідно ...
    в загальних налаштуваннях сайту встановити позначку для категорії "Автоматично налаштовувати сайт для мобільних телефонів"

3.2. Оформлення дизайну сайта

Для оформлення дизайну web-ресурса необхідно в меню вибрати категорію "Теми, кольори та шрифти" (рис.3.2.1).

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

Для прикладу оформимо дизайн свого сайту (рис.3.2.2). Для цього:

  1. обиремо нову тему;
  2. налаштуємо заголовок сайту: встановимо у заголовок зображення (рис.3.2.2) і змінимо колір тексту заголовку (рис.3.2.3).

Примітка. При форматуванні тексту особливу увагу слід звертати на читабельність тексту.

Для збереження налаштувань потрібно натиснути на кнопку у верхній частині екрана "Зберегти".

Для того, щоб перейти із налаштувань на сайт (рис.3.2.4) - необхідно зверху над меню натиснути на назву web-ресурсу (рис.3.2.3).

Яке з зображень відображає вікно з налаштуваннями дизайну (зовнішнього вигляду) сайту?

4. Наповнення контенту (змісту) сайту

4.1. Редагування сторінки. Коригування заголовку, встановлення зображення з комп'ютера та його налаштування

Якщо при створенні сайту вибрано "Пустий шаблон", то на сайті є лише одна web-сторінка "Домашня сторінка". Для її (а також інших, створених користувачем, web-сторінок) редагування: зміни назви та наповнення контентом (змістом) - передбачений ресурс "Редагувати сторінку" (натиснути кнопку із зображенням олівця у верхній правій частині екрана чи скористатися клавішею "e" на клавіатурі (англійська розкладка)) (рис.4.1.1).

Так за допомогою цього інструменту web-сторінка завантажується у режимі редагування, в якому можна:

  • змінювати назву web-сторінки, писати текст;
  • встановлювати зображення та завантажувати інші файли з персонального комп'ютера;
  • встановлювати зображення, документи, презентації, папки з файлами тощо з Google Диску;
  • розміщувати на сайті відео з YouTube;
  • налаштовувати гіперпосилання із тексту та зображення на інші електронні освітні ресурси тощо.

Так для зміни назви web-сторінки достатньо видалити наявну - і написати з клавіатури нову назву web-сторінки, після чого натиснути "Зберегти" (рис. 4.1.2).

Як результат - назва сторінки зміниться не лише на сторінці, а й у навігації сторінок (рис. 4.1.3)

Для продовження редагування сторінки - необхідно знову натиснути "Редагування" (див. рис. 4.1.2).

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

Часто, створюючи web-сторінку, користувач уявляє, як він хоче розмістити різні змістові блоки (текст, зображення, відео тощо) один відносно одного. Для зручності їх розташування можна розбити змістову область web-сторінки на частини, для цього необхідно скористатися інструментом "Макет" (рис. 4.1.4).

Наприклад, користувачеві потрібно на сторінці "Головна" розмістити:

  • зверху: педагогічне кредо;
  • нижче: зліва - свій фото-портрет, зправа - оголошення (анонс та фото-, відео-звіти навчально-виховних заходів);
  • знизу: життєве кредо.

​Для розміщення цих елементів найкраще підійде макет "Два стовпці" (рис. 3.1.4).

Далі вводимо у зазначені вище частини сторінки текст (рис. 4.1.5)

Для того, щоб у правій середній області вставити зображення з персонального комп'ютера, - необхідно: поставити курсор у визначене місце -> у пункті меню "Вставити" обрати "Зображення" (рис. 4.1.6) -> "Завантажити зображення" (рис. 4.1.7) -> "Оk" (рис. 4.1.8).

Зображення завжди встановлюється на web-сторінці у реальному розмірі. Якщо воно велике чи, навпаки, маленьке, то можна скористатися інструментами налаштування розміру відображення, які знаходяться на панелі інструментів зображення ( на рис.4.1.9 обрано розмір M).

Також за допомогою інструментів панелі інструментів зображення можна виставити його вирівнювання (на рис. 4.1.9 обрано вирівнювання "По центру").

Якщо у прямокутній області, де розміщено зображення, передбачається написання тексту збоку, то необхідно на панелі інструментів натиснути "Перенос увімкнено" (на рис. 4.1.9 вибрано "Перенос вимкнено") .

Якщо зображення чи інший змістовий компонент web-сторінки необхідно видалити - необхідно на його панелі інструментів обрати кнопку "Видалити" (рис. 4.1.9).

Для збереження контенту (змісту) web-сторінки необхідно натиснути на кнопку "Зберегти" (знаходиться у правому верхньому кутку екрана) (рис. 4.1.9).

4.2. Форматування тексту

Для форматування: зміни типу, розміру, кольору тексту і тла, накреслення (курсив, напівжирний, підкреслений) букв, а також налаштування маркованого та нумерованих списків, задання вирівнювання -  тексту web-сторінки необхідно завантажити сторінку у режимі редагування (див. п. 4.1).

Далі виділити той фрагмент тексту, який необхідно відформатувати, і обрати на панелі інструментів відповідний інструмент (рис. 4.2.1).

Так на рис. 4.2.1 текст: "Завдання вчителя – це ключик відшукати до кожної дитячої душі. І кожному можливість росту дати до інтелекту, що не матиме межі." - відформатовано за такими характеристиками:

  • тип шрифта: Verdana;
  • розмір: 10 пт;
  • колір тексту: темно-фіолетовий;
  • колір тла: білий;
  • вирівнювання: за лівим краєм.

Також із будь-якої частини тексту можна зробити гіперпосилання. Для цього потрібно написати та виділити текст -> на панелі інструментів web-сторінки вибрати "Додати або видалити посилання" чи скористатися комбінацією клавіш Ctrl+k (рис.4.2.2).

Для прикладу налаштуємо гіперпосилання з тексту "Житомирського обласного інституту післядипломної педагогічної освіти" (рис. 4.2.2). Для цього необхідно:

  1. написати текст (рис. 4.2.2);
  2. виділити текст "Житомирського обласного інституту післядипломної педагогічної освіти" (рис. 4.2.2);
  3. на панелі інструментів web-сторінки вибрати "Додати або видалити посилання" чи скористатися комбінацією клавіш Ctrl+k (рис.4.2.2);
  4. зайти на електронний освітній ресурс, на який потрібно переходити користувачу, коли він натискає на визначену частину тексту; в цьому випадку необхідно зайти на сайт Житомирського обласного інституту післядипломної педагогічної освіти (рис.4.2.3);
  5. скопіювати URL-адресу цього ресурсу (рис.4.2.3);
  6. перейти назад на свій сайт, де у діалоговому вікні "Створити посилання" в меню вибрати "Веб-адреса";
  7. в категорії "Посилання на цю URL-адресу:" вставити, скопійовану URL-адресу (в цьому випадку - www.zippo.net.ua);
  8. поставити позначку в налаштуванні "Відкрити це посилання в новому вікні";
  9. натиснути "Ok".
  10. Натиснути на кнопку "Зберегти" в правому верхньому куті екрану (рис. 4.2.4).

Результатом виконання таких дій є налаштоване гіперпосилання із тексту "Житомирського обласного інституту післядипломної педагогічної освіти", яке працює таким чином: якщо користувач натискає на цей текст - відкривається головна сторінка сайту Житомирського обласного інституту післядипломної педагогічної освіти (http://www.zippo.net.ua/) у новій вкладці.

4.3. Створення web-сторінок

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

Для того, щоб створити нову сторінку, наприклад, "Педагогічний портрет", необхідно:

  1. натиснути у правому верхньому куті вікна на кнопку "Створити сторінку" чи клавішу "c" на клавіатурі (рис. 4.3.1);
  2. вибрати шаблон web-сторінки (найчастіше, і в цьому випадку також, залишаємо шаблон за замовчуванням - "Веб-сторінка" (рис. 4.3.2); використання інших шаблонів буде висвітлено у наступних пунктах);
  3. вибрати місце розташування web-сторінки (рис. 4.3.2): оскільки новостворена web-сторінка "Педагогічний портрет" повинна бути однією з головних сторінок сайту (на рівні зі сторінкою "Головна"), тому в цьому випадку необхідно залишити встановлене за замовчуванням налаштування "Розмістити сторінку на верхньому рівні"; якщо ж вибрати налаштування "Розмістити на сторінці Головна", то новостворена web-сторінка "Педагогічний портрет" буде підсторінкою web-сторінки "Головна";
  4. натиснути у верхній частині вікна на кнопку "Створити".

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

Створення web-сторінки шаблону "Оголошення" здійснюється аналогічно.

Для прикладу створимо web-сторінку "Новини", яка відповідатиме web-шаблону "Оголошення" та буде підсторінкою сторінки "Головна".

Для цього необхідно:

  1. натиснути на кнопку "Створити сторінку" (рис. 4.3.1);
  2. вказати назву сторінки "Новини" (рис. 4.3.4);
  3. обрати шаблон "Оголошення" (рис. 4.3.4);
  4. "Вибрати інше місце" (рис. 4.3.4);
  5. в дереві сторінок натиснути "Головна" (рис. 4.3.4);
  6. обрати кнопку "Створити".

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

Для того, щоб зробити новий допис - необхідно натиснути кнопку "Новий допис", після чого згенерується нова сторінка, яку можна заповнювати новими відомостями щодо анонсів і результатів проведених освітніх заходів (рис. 4.3.5) -> "Зберегти".

Якщо після виконання вище описаних дій перейти на сторінку "Новини", то на ній відображатимуться саме ті відомості, які введені на сторінці-дописі (рис. 4.3.6).

Аналогічно також можна створити web-сторінку шаблону "Картотека".

Для прикладу створимо  web-сторінку "Публікації Колос К. Р." шаблону "Картотека", яка буде підсторінкою web-сторінки "Педагогічний портрет". Для цього потрібно:

  1. скористатися засобом "Створити сторінку";
  2. вказати назву сторінки (тут - "Публікації Колос К. Р.");
  3. обрати шаблон web-сторінки "Картотека";
  4. "Вибрати інше місце" (рис. 4.3.4);
  5. в дереві сторінок натиснути "Головна" (рис. 4.3.4);
  6. обрати кнопку "Створити".

На сторінці, створеній за шаблоном "Картотека" можна додавати файли з комп'ютера та Google Диску, посилання тощо. 

Для прикладу додамо до сторінки "Публікації Колос К. Р." файл дисертації "Система Moodle як засіб розвитку предметних компетентностей учителів інформатики у системі післядипломної педагогічної освіти", розміщений за URL-адресою: http://lib.iitta.gov.ua/850/1/Kolos_K_R_diser.pdf.

Для цього необхідно (рис. 4.3.9):

  1. скористатися інструментом "Додати посилання";
  2. вказати URL-адресу ресурсу;
  3. прописати автора та назву ресурсу;
  4. вказати вихідні положення чи анотацію ресурсу;
  5. натиснути кнопку "Додати".

Як результат - файл, розміщений за вказаною URL-адресою, буде додано до web-сторінки (рис.4.3.10)

На web-сторінці шаблону "Список" можна планувати та відображати виконання завдань, проектів тощо.

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

4.4. Переміщення та видалення web-сторінок

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

Для прикладу створимо web-сторінку "Проба", яка буде однією із головних  сторінок сайту. Зробимо її підсторінкою сторінки "Головна". Для цього необхідно:

  1. перейти на необхідну сторінку (в цьому випадку - на сторінку "Проба") (рис. 4.3.10);
  2. вибрати "Інші дії" -> "Перемістити сторінку" (рис. 4.4.1);
  3. вказати у дереві сторінок web-сторінку, підсторінкою якої буде переміщувана сторінка (рис. 4.4.2) (у цьому випадку: преміщувана сторінка "Проба" повинна бути підсторінкою сторінки "Головна", тому в дереві сторінок потрібно обрати "Головна");
  4. натиснути "Перемістити";
  5. результат - переміщена web-сторінка "Проба" (рис. 4.4.3).

Для видалення web-сторінки необхідно:

  1. перейти на необхідну сторінку (в цьому випадку - будемо видаляти сторінку "Проба") (рис. 4.4.4);
  2. вибрати "Інші дії" -> "Видалити сторінку" (рис. 4.4.4);
  3. підтвердити видалення сторінки (рис. 4.4.5);
  4. результат - видалена сторінка "Проба" (рис. 4.4.6).

4.5. Додавання файлів і папок із Google Диску до web-сторінки

Часто до контенту web-сторінки потрібно додати документ, презентацію, анкету (опитувальник), зображення, відео тощо. Оскільки для наповнення сайту, розробленого безкоштовно на базі Google Диску, передбачено лише 100 Мбайт, то потрібно раціонально розприділяти ресурси, розміщуючи їх на інших продуктах Google: Диску, YouTube, - та відображаючи на сайті. Таким чином ці ресурси не будуть використовувати об'єм пам'яті сайту.

Для  прикладу створимо сторінку "Дистанційне навчання", яку заповнимо різнотипними відомостями, а саме: напишемо текст з використанням клавіатури, вставимо файл із Google Диску із методичними рекомендаціями "Тьютор - організатор і керівник дистанційного курсу" та відео виступу Колос К. Р., розміщене на YouTube.

Для додання до web-сторінки документу із Google Диску, необхідно:

  1. завантажити на Google Диск необхідний документ;
  2. на Google Диску встановити для цього файлу доступ для перегляду іншими користувачами Інтернет (в противному випадку - файл ніхто не побачить, крім власника Google акаунту) і скопіювати його URL-адресу (рис. 4.4.1);
  3. поставити на сайті курсор у те місце, де повинен стати документ (в цьому випадку - під текстом);
  4. в меню сайту обрати: "Вставити" -> "Диск" -> "Документ" (рис. 4.4.2);
  5. вибрати документ; якщо ж документи не відображаються чи їх досить багато, то можна вставити, скопійовану під час налаштування доступу, URL-адресу цього документу у стрічку "Або вставте веб-адресу тут";
  6. "Вибрати";
  7. ввести властивості налаштування відображення документу: заголовок, ширину і висоту (в пікселях) області документу;
  8. "Зберегти";
  9. задати параметри відображення документу на web-сторінці: вирівнювання, обтікання - чи видалити документ за допомогою складових панелі інструментів документа;
  10. "Зберегти".

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

Аналогічно до встановлення Документа із Google Диска можна на web-сторінці відобразити презентацію, відео, анкету, папку тощо.

На прикладі також продемонструємо встановлення на web-сторінку папку з зображеннями.

Для цього створимо одну з головних web-сторінок "Світлини", на якій розміщуватимемо світлини з освітніх заходів.

Так, після проведення практичних занять для вчителів інформатики, фото-звіт  із їх навчання  на курсах підвищення кваліфікації можна викласти на сторінці "Світлини". Для цього необхідно:

  1. зберегти папку зі світлинами на Google Диску, де і відкрити доступ для її перегляду іншими користувачами;
  2. у меню сайту вибрати: "Вставити" -> "Диск" -> "Папка";
  3. вибрати необхідну папку;
  4. вказати властивості папки: заголовок, висоту та ширину (якщо поле "Ширина ... пікс." залишити пустим, то поле відображення папки буде автоматично налаштоване на ширину екрану) поля відображення вмісту папки, а також вигляд її елементів: список або сітка (якщо у папці наявні зображення, то її вміст варто налаштовувати "Показати як сітка"; так усі елементи папки відображатимуться у вигляді великих значків);
  5. натиснути "Зберегти" -> "Зберегти" (рис. 4.4.7).

Якщо після відображення папки (із Google Диску) на web-сторінці помічено неякісні, однотипні зображення чи сторонні об'єкти (файли, папки), то їх необхідно видаляти їх із папки; або, навпаки, якщо є й інші матеріали (світлини, відео) із проведеного навчально-виховного заходу, то їх потрібно додати до папки. Для редагування вмісту папки необхідно:

  1. зайти на Google Диск, де відкрити потрібну папку та відкоригувати її вміст;
  2. повернутися на сайт та оновити web-сторінку.

Для прикладу зі встановленої папки "Вчителі інформатики (25 березня 2016 р.)" видалили однотипні зображення та оновили web-сторінку "Світлини". Результат можна проаналізувати на рис. 4.4.8.

4.6. Встановлення відео з YouTube

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

Так для розміщення відео із YouTube  на web-сторінці сайту необхідно:

  1. в YouTube знайти і вмикнути відео, яке потрібно вставити на web-сторінку;
  2. зкопіювати URL-адресу відео (рис. 4.6.1);
  3. перейти на сайт, де в режимі редагування обраної сторінки в меню вибрати: "Вставити" -> "YouTube" (рис. 4.6.2);
  4. задати параметри відео -> "Зберегти" (рис. 4.6.3);
  5. "Зберегти" (рис. 4.6.4).

4.7. Встановлення гаджетів

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

Встановити гаджет на web-сторінку можна в режимі редагування сторінки, обравши в меню "Вставити" -> обрати необхідний гаджет. Якщо з наявних 5-ти гаджетів жоден не підходить, то необхідно обрати "інші гаджети...". Далі потрібний гаджет можна обрати в категоріях "Загальнодоступні" чи "Популярні", або ж "Додати гаджет за допомогою URL".

Для прикладу на сторінку "Головна" встановимо гаджет, який буде висвітлювати 5 останніх дописів, зроблених на сторінці "Новини" (шаблону "Оголошення"). Для цього необхідно:

  1. в режимі редагування сторінки "Головна" поставити курсор у те місце на web-сторінці, де необхідно поставити гаджет -> в меню сторінки натиснути "Вставити", де вибрати гаджет "Останні записи" (рис. 4.6.1);
  2. встановити налаштування для гаджету: вибрати сторінку, з якої потрібно відображати дописи -> визначити довжину відображення допису -> встановити кількість дописів для відображення у гаджеті -> написати загальну назву повідомлень (рис. 4.6.2);
  3. Натиснути "Зберегти" -> "Зберегти" (рис. 4.6.3).

Для того, щоб новий допис з'явився у категорії "Оголошення", необхідно вибрати "Переглянути більше" (рис. 4.6.3) -> відкриється сторінка "Новини", на якій можна зробити новий допис (натиснути кнопку "Новий допис" -> наповнити змістом згенеровану сторінку).

На прикладі також продемонструємо як встановляти гаджет "За допомогою URL". Так з самого верху на web-сторінці "Світлини" плануємо поставити слайд-шоу із зображень. Для цього необхідно:

  1. знайти у мережі Інтернет і зкопіювати URL-адресу гаджету, який перегортає зображення; одним з таких гаджетів є Slideshow, розташований за URL-адресою: http://hosting.gmodules.com/ig/gadgets/file/100809323395134262586/gallery_01.xml;
  2. завантажити на сайт у вигляді файлів зображення, які будуть демонструватися у слайд-шоу: "Інші дії" -> "Керування сайтом" -> в меню обрати "Вкладені файли" -> за допомогою функції "Завантажити" завантажити на сайт файли із зображеннями (усі файли повинні мати однотипні ім'я: slide1.XXX, slide2.XXX, ..., slideN.XXX, - та мати однакове розширення: JPG або PNG, а також зображення повинні бути одного розміру (як за шириною, так і за висотою)) -> перейти назад на сайт (натиснути на назву свого web-ресурсу) (рис. 4.6.5);
  3. у режимі редагування сторінки "Світлини" поставити курсор у те місце на web-сторінці, де необхідно поставити гаджет -> в меню сторінки натиснути "Вставити", де вибрати "...Інші гаджети..." (рис. 4.6.6);
  4. вибрати "Додати ґаджет за допомогою URL" -> ввести зкопійовану URL-адресу гаджету -> "Додати" (рис. 4.6.7);
  5. вказати налаштування гаджета: задати місце розташування файлів із зображеннями: якщо ці файли завантажено в кореневу папку сайту "Навчальне портфоліо Колос Катерини Ростиславівни" (URL-адреса сайту: https://sites.google.com/site/navcalneportfoliokoloc/), як зазначалося вище, то URL-адреса їх місця розташування буде такою: https://sites.google.com/site/navcalneportfoliokoloc -> вказати скільки зображень буде відображатися у слайд-шоу -> задати ширину і висоту зображень у пікселях -> вказати розширення (JPG чи PNG) -> задати розміри області відображення слайд-шоу -> зазначити назву слайд-шоу -> натиснути "Ok" (рис. 4.6.8)
  6. "Зберегти" (рис. 4.6.9).

5. Редагування бічної панелі

5.1. Встановлення банерів

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

Для того, щоб розмістити на бічній панелі сайту банер, наприклад, для переходу на сайт Міністерства освіти і науки України, необхідно:

  1. мати зображення, яке буде асоціюватися з МОН України: його можна зберегти з іншого ЕОР або зробити чи підкоригувати за допомогою графічного редактора;
  2. створити у бічній панелі поле для розміщення на ньому банерів, - для цього потрібно натиснути на кнопку "Інші дії", де вибрати "Редагування розмітки сайту" (рис. 5.1.1) -> за налаштуванням бічної панелі (Sidebar) додати "Текст" як новий елемент бічної панелі сайту (рис. 5.1.2); так під навігацією сторінок з'явиться лінія, яка при наведенні мишкою відображається у вигляді контейнера з написом "Текстове поле";
  3. натиснути на контейнер "Текстове поле" (рис. 5.1.3);
  4. вставити у текстове поле зображення, яке буде гіперпосиланням на інший ЕОР, для цього потрібно: у меню текстового поля обрати "Вставити" -> "Зображення" -> вибрати зображення на комп'ютері -> натиснути "Ok" (таким чином розмістили зображення на бічній панелі, далі - потрібно налаштувати його як гіперпосилання на визначений ЕОР) (рис. 5.1.4);
  5. на панелі інструментів зображення у категорії "Перейти за посиланням" вибрати "Змінити" (рис. 5.1.5);
  6. зазначити URL-адресу ЕОР, за якою користувач буде преходити, натискаючи на вставлене зображення (в цьому випадку - вказали URL-адресу сайту Міністерства освіти і науки України: http://mon.gov.ua/) (рис. 5.1.6);
  7. поставити позначку для категорії "Відкрити це посилання в новому вікні" (так ЕОР за зазначеною URL-адресою буде відкриватися у новій вкладці) (рис. 5.1.6);
  8. натиснути "Ok" (рис. 5.1.6).

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

  1. спосіб: встановити розмір зображення 100% за допомогою інструментів панелі  зображення;
  2. спосіб: змінити ширину бічної панелі (рис. 5.1.7 -5.1.8).

Так, керуючись вище зазначеними пунктами 4-8 поточної теми, у це поле можна поставити ще декілька банерів, наприклад, на ЕОР:

  • "Учителі Житомирщини" (https://sites.google.com/site/ucitelizitomirsini/),
  • "Учитель року 2016 Житомирська область" (https://sites.google.com/site/ucitelroku2016/home),
  • "Методичний міст Житомирщини" (https://sites.google.com/site/metodicnijmist/),
  • Інформаційно-комунікаційні технології в Житомирському обласному інституті післядипломної педагогічної освіти (https://sites.google.com/site/iktvzoippo/home) тощо.

5.2. Встановлення лічильників відвідуваності сайту

Лічильник відвідуваності (відвідувань) - невеликий елемент інтерфейсу сайту, що сповіщає про те, скільки людей відвідало сайт за певний період. Лічильники відвідувань на сьогоднішній день є мало не обов'язковими для кожного web-ресурсу, і за ними відвідувачі зазвичай судять, наскільки сайт популярний і відомий.

Встановимо такі лічильники відвідуваності сайту:

  • Flag Counter: http://s06.flagcounter.com/index.html;
  • RevolverMaps: https://www.revolvermaps.com/?target=setup2d.

Для цього на бічній панелі створимо текстову область "Статистика відвідуваності сайту" (див. пункт 5.1), на якій будемо розміщувати зазначені лічильники. Оскільки для їх встановлення буде згенеровано HTML-код, то відразу на панелі інструментів налаштування текстового вікна потрібно вибрати "Редагувати HTML-код" (натиснути на кнопку із зображенням "<H").

Для становлення лічильника відвідуваності сайту Flag Counter необхідно:

  1. у новій вкладці зайти за URL-адресою: http://s06.flagcounter.com/index.html;
  2. натиснути на кнопку "GET YOUR FLAG COUNTER" (рис. 5.2.2);
  3. ввести свою електронну адресу -> "Продовжити" (рис. 5.2.3);
  4. скопіювати згенерований HTML-код для сайту - "Code for websites (HTML)" (рис. 5.2.4);
  5. повернутися на сайт, де (у підготовлену раніше область) вставити скопійований HTML-код -> "Оновити" (рис. 5.2.5) -> "Ok" -> "Закрити".

Для становлення лічильника відвідуваності сайту RevolverMaps:  необхідно:

  1. у новій вкладці зайти за URL-адресою: https://www.revolvermaps.com/?target=setup2d;
  2. налаштувати параметри лічильника: вибрати вигляд карти -> встановити розміри лічильника -> обрати колір точок  (якими на карті світу відмічаються місця, звідки заходили на сайт) -> визначити стиль кутків лічильника (рис. 5.2.6) -> обрати версію коду: "static map" -> "HTML code" -> зкопіювати HTML-код (рис. 5.2.7);
  3. повернутися на сайт, де відкрити текстову область "Статистика відвідуваності сайту" -> на панелі інструментів "Налаштування текстового вікна" обрати кнопку "<H" ("Редагувати HTML-код") -> вставити скопійований HTML-код -> "Оновити" (рис. 5.2.5) -> "Ok" -> "Закрити".

Як результат вище зазначених дій - на бічній панелі буде розміщено два лічильника відвідуваності сайту (рис. 5.2.8)

5.3. Формування навігації сторінок "вручну"

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

Продемонструємо це на прикладі. Оскільки 5 останніх дописів зі сторінки "Новини" висвітлюються на сторінці "Головна" та інші дописи користувач може переглянути, натиснувши на "Переглянути більше", тому не має потреби у наявності назви сторінки "Новини" у навігації сторінок. Для реалізації цього необхідно:

  1. вибрати "Інші дії" -> "Редагування розмітки сайту" (рис. 5.3.1);
  2. змінити елемент бічної панелі: натиснути по навігації сторінок у будь-якому місці (рис. 5.3.2);
  3. зняти позначку біля налаштування "Автоматично організувати навігацію" -> "Додати сторінку" (рис. 5.3.3);
  4. вибрати сторінку, яку необхідно додати до навігації -> "Оk" (рис. 5.3.4);
  5. аналогічно (за пунктам 3-4) додати інші, необхідні у навігації назви сторінок;
  6. якщо додана сторінка має бути підсторінкою іншої, уже доданої до навігації, сторінки, то її потрібно здвинути праворуч за допомогою відповідної стрілки "Відступ" (якщо навпаки: сторінку переставити на вищий рівень - вибрати стрілку "Виступ") (рис. 5.3.5);
  7. а також для зміни послідовності розміщення сторінок можна скористатися стрілками "Угору" і "Униз" (рис. 5.3.5). 

6. Налаштування доступу на сайті

6.1. Налаштування доступу на рівні сайту

Якщо сайт знаходиться в процесі розробки - тоді бажано закрити доступ для перегляду сайту іншими користувачами або ж модерування цього web-ресурсу здійснюватимуть декілька осіб, то потрібно встановити відповідні налаштування доступу на рівні сайту, що можна налаштувати за допомогою функції "Спільний доступ" (рис. 6.1.1).

Так, наприклад, для налаштування заборони перегляду сайту іншими користувачами Інтернет, необхідно:

  1. у категорії "Спільний доступ і дозволи" обрати "Змінити" для налаштування "Для всіх у мережі – усі користувачі Інтернету можуть знаходити та переглядати" (рис. 6.1.2);
  2. вибрати "Вимк.: для певних користувачів. Доступ надано певним особам" (рис. 6.1.3);
  3. натиснути "Зберегти" (рис. 6.1.3).

Звертаємо увагу, що після базового наповнення змістом потрібно відкрити доступ для перегляду сайту усіма користувачами Інтернет. Для цього знову необхідно:

  1. зайти у у категорію "Спільний доступ і дозволи", де обрати "Змінити" для налаштування "Приватний доступ – доступ маєте лише ви" (рис. 6.1.4);
  2. вибрати "Увімк.: для всіх" (рис. 6.1.5);
  3. натиснути на кнопку "Зберегти" (рис. 6.1.5).

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

  1. зайти у у категорію "Спільний доступ і дозволи" (рис. 6.1.6);
  2. у категорії "Запросити користувачів:" вказати електронні адреси користувачів, яким надається право на редагування; бажано, щоб електронні адреси були створені на Google; після правильного введення електронної адреси система розпізнає користувача - замінюючи тим самим електронну адресу - на фото, ім'я та прізвище користувача (рис. 6.1.6);
  3. у випадаючому списку обрати "Редагування" (рис. 6.1.6);
  4. натиснути на кнопку "Надіслати" (рис. 6.1.6).

6.2. Налаштування доступу на рівні сторінок

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

Для прикладу створимо одну з головних web-сторінок сайту "Проведення освітніх заходів", доступ для редагування якої надамо Петру Грабовському (електронна адреса: [email protected]). При цьому Глібу Ковальському (електронна адреса: [email protected]), який може редагувати весь сайт, заборонимо редагувати цю сторінку.

  1. надаємо доступ для перегляду сайту користувачу за електронною адресою: [email protected] (рис. 6.2.1);
  2. вибрати "Увімкнути дозволи на рівні сторінки" (рис. 6.2.2);
  3. у дереві сторінок обрати web-сторінку, для якої потрібно змінити рівень доступу (в зазначеному випадку - необхідно обрати сторінку "Проведення освітніх заходів") -> натиснути "Змінити" (рис. 6.2.3);
  4. вибрати "Використовувати спеціальні дозволи" (рис. 6.2.4);
  5. налаштувати необхідний доступ для користувачів на рівні сторінки -> "Зберегти зміни" (рис. 6.2.5);
  6. для переходу із налаштувань сайту на сайт - потрібно натиснути на назву сайту, яка розміщена ліворуч над меню.