mozok.click » Інформатика » Створення персонального навчального середовища. Офісні веб-програми для створення спільних документів. Опитування з використанням онлайнових форм. Створення сайтів. Конструювання сайтів з використанням онлайн-систем
Інформація про новину
  • Переглядів: 9212
  • Автор: admin
  • Дата: 15-01-2018, 08:13
15-01-2018, 08:13

Створення персонального навчального середовища. Офісні веб-програми для створення спільних документів. Опитування з використанням онлайнових форм. Створення сайтів. Конструювання сайтів з використанням онлайн-систем

Категорія: Інформатика

 

  • що таке персональне навчальне середовище;
  • як у персональному навчальному середовищі застосовують хмарні технології;
  • як організовують опитування за допомогою онлайнових форм;
  • як організувати доступ до інформаційних матеріалів у персональному навчальному середовищі.

 

27.1. Що таке персональне навчальне середовище?

Найрізноманітніші сервіси та інформаційні дані, що розміщені сьогодні в мережі Інтернет, не можуть бути охоплені одночасно кожним користувачем. Тому однією з навичок, які має сформувати людина, котра прагне бути успішною в змінному світі, — це уміння комунікувати: обмінюватись даними в мережі, правильно будувати запити, дотримуватися правил мережевого етикету та утворювати спільноти за професійним спрямуванням. Кожен з нас перебуває в деякому інформаційному просторі: навчається у школі, отримує відомості з газет, книг, телебачення, очно спілкується з рідними та друзями й віртуально — у соціальних мережах. Але інформаційний простір при цьому не вичерпується територією проживання чи колом спілкування. Він розширюється в міру того, наскільки людина залучає до нього нові джерела знань, зокрема професійні спільноти: групи, які створюються в мережі та реальному житті за інтересами. Учасники таких спільнот часто обмінюються своїми знаннями, дають рекомендації щодо використання нових ресурсів, допомагають оволодіти ними. Користувач Інтернету, включений у роботу таких груп, поступово накопичує сукупність даних і засобів, які використовує у своїй діяльності зараз, або планує переглянути чи використати в майбутньому. Таким чином формується його інформаційне середовище.

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

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

Використовуючи персональне навчальне середовище, користувач створює свою персональну мережу, вузлами якої можуть бути люди,

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

Мал. 27.1

27.2. Як у персональному навчальному середовищі застосовують хмарні технології?

Для організації персонального навчального середовища зазвичай використовують хмарні технології.

Хмарні технології — це інформаційні технології, що передбачають віддалене опрацювання та зберігання даних.

Хмара — це деякий сервер або мережа розподілених центрів опрацювання даних, де зберігаються дані та програми, які використовують користувачі за допомогою глобальної мережі. Хмарні технології дають змогу споживачам використовувати програми без встановлення на власний комп’ютер й доступу до особистих файлів з будь-якого комп’ютера, що має доступ в Інтернет.

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

менше витрат на придбання програмного забезпечення та його систематичне оновлення; необмежений обсяг збереження даних;

доступність із різних пристроїв і відсутність прив’язки до робочого місця;

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

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

Можна виділити такі популярні в Україні та світі хмарні сервіси зберігання даних: AmazonCloudDrive, AmazonCloudPlayer, Bitcasa, Box.net, Copy.com, Dropbox, Flickr, GoogleDrive, JungleDisk, iCloud, Mega, MediaFire, Mozy, Office365, OneDrive, Photobucket, Yunpan360, 4shared тощо.

Найпопулярнішими серед спеціалізованих хмарних сервісів на сьогодні є Dropbox і Google Drive. Безкоштовний обсяг даних, що можуть бути збережені зараз у хмарних сховищах, подано на малюнку 27.2.

Мал. 27.2

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

Наприклад, у сховищі Google Диск користувач може використовувати стандартні офісні веб-програми (табл. 27.1) та доповнювати їх список, підключивши інші додатки.

Таблиця 27.1

Вправа 1. Google Диск.

Завдання. Створіть сховище для зберігання файлів у персональному навчальному середовищі засобами Google Диск.

1. У браузері відкрийте сторінку пошукової системи Google.

2. Якщо у вас є акаунт Google, то увійдіть до сервісу під своїм акаунтом. В іншому разі — зареєструйте персональний акаунт.

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

3. Перейдіть до списку сервісів, обравши інструмент Додатки Google у правому верхньому куті вікна браузера.

4. У списку сервісів, що відкрився, оберіть сервіс Диск.

5. На запит служби підтримки оберіть персональний акаунт доступу до диска, якщо на комп’ютері працює ще декілька користувачів. Натисніть кнопку Продовжити (Continue).

6. Розгляньте структуру сховища (мал. 27.3).

Вправа 2. Публікація документів на Google Диску.

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

1. Увійдіть у середовище власного Google Диска й натисніть кнопку Створити.

2. У списку об’єктів для створення оберіть вказівку Папка (мал. 27.4).

3. У вікні Нова папка введіть назву папки — Проектсховище та натисніть кнопку Створити.

4. Відкрийте папку Проект сховище у сховищі Мій диск. Перетягніть у поле папки потрібні файли з папки Проект своєї структури папок (мал. 27.5).

5. Перевірте, чи відображений у сховищі розміщений файл (мал. 27.6).

Вправа 3. Створення документа на Google Диску.

Завдання. Створіть у персональному навчальному сховищі текстовий документ для формування списку учасників проекту «Ярмарок професій». Надайте до нього доступ іншим учням класу за їхньою електронною адресою з правами доступу: Редагування.

1. У списку об’єктів, який відкривається після натиснення кнопки Створити, вашого Google Диска, оберіть Google Документи.

2. Перейменуйте Документ без назви на Список учасників (мал. 27.7).

3. Запишіть заголовок документа. Використайте позначені на малюнку 27.8 інструменти онлайнового редактора для форматування тексту.

Мал. 27.8

4. Додайте після заголовка таблицю подібно до того, як ви додавали таблицю до текстового документа в офісних текстових процесорах (мал. 27.9). Сформуйте заголовки таблиці. Оформіть їх на власний розсуд, використавши повне меню інструментів (вказівка Більше) (мал. 27.10).

Мал. 27.9

Мал. 27.10

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

й у вікні,

що відкриється, введіть електронні адреси учнів класу. Налаштуйте рівень доступу: Редагування (мал. 27.11). Завершіть надання доступу натисненням кнопки Готово.

Мал. 27.11

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

Мал. 27.12

7. Завершіть редагування документа.



27.3. Як організовують опитування за допомогою онлайнових форм?

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

В онлайновій формі можна використати такі типи елементів при формуванні запитань для опитування:

з короткими відповідями — невеличке поле для відкритої відповіді (наприклад, підходить для запитань про прізвище, посаду, ввести певне число тощо);

абзац — велике текстове поле для відкритої відповіді (наприклад, Ваші побажання, Коментарі тощо);

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

лінійна шкала — відповідь відображається у вигляді шкали (від 3 до 10 проміжних значень), на якій можна задати опис тільки крайніх значень;

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

Вправа 4. Створення опитувальника.

завдання. Створіть опитувальник для проведення анкетування учнів щодо вибору їхньої майбутньої професії.

1. У сховищі Google Диск створіть онлайнову форму. Для цього у списку Створити оберіть вказівку Створити/Більше/Google Форми. Розгляньте об’єкти вікна, що відкрилось (мал. 27.13).

2. Змініть назву форми: Твій вибір майбутнього. В описі форми вкажіть, що це опитування учнів 9 класу відбувається під час проведення проекту «Ярмарок професій».

3. Змініть тип запитання, яке запропоноване системою, на З короткими відповідями (мал. 27.14).

Мал. 27.14

4. Замість фрази Запитання без назви введіть текст: Введіть своє прізвище та ім’я. Поставте позначку, що на це запитання користувач має відповісти обов’язково.

5. Додайте ще запитання. Для цього натисніть інструмент Додати

6. Аналогічно вводьте зміни до опитувальника за зразком, який подано у файлі Опитування в папці Навчальне середовище.

7. Зауважте, що ви можете змінити кольори теми оформлення форми опитування й навіть малюнок у полі заголовка, якщо скористаєтесь інструментом

8. Надішліть форму опитування учням класу, ввівши їхні адреси в полі Надіслати.

9. Підготуйте таблицю для збирання відповідей. Для цього оберіть вкладку Відповіді (мал. 27.15). Натисніть Створити електронну таблицю та налаштуйте її розташування. Завершіть створення таблиці для збору відповідей натисненням кнопки Створити.

Мал. 27.15

10. Перевірте, чи помістились усі запитання в таблиці Твій вибір майбутнього (відповіді). Очікуйте відповідей однокласників та слідкуйте, як при цьому змінюється вигляд таблиці відповідей.

11. У меню Форма електронної таблиці для збору відповідей оберіть вказівку Підсумок. Розгляньте, як змінюються діаграми підсумку у відповідь на зміну таблиці відповідей.

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

Доступ до інформаційних матеріалів персонального навчального середовища можна організувати декількома способами:

1) використати онлайновий сервіс електронних закладок для швидкого доступу до сайтів з будь-якого пристрою, які використовує користувач;

2) розмістити документи, збережені на локальному диску, у хмару;

3) синхронізувати Google Диск із локальним диском комп’ютера. Сьогодні є декілька різноманітних онлайнових сервісів (мал. 27.16)

для створення електронних закладок, що є аналогами звичайних закладок, які створюють засобами браузера. Прикладом є сервіс Pocket (https://getpocket.com/), де можна зберігати посилання на сайти й отримувати до них доступ через телефон, планшет і комп’ютер, навіть без підключення до Інтернету. Іншим сервісом, який використовують для таких цілей, є Streme (http://streme.co/). За допомогою сервісу Streme можна створювати групи закладок, якими легко обмінюватися. Групи закладок можуть бути доступними тільки для читання, або їх можуть редагувати інші користувачі. Таким чином створюється спільнота навколо обраної теми. Streme автоматично визначає тип даних, на які створено закладку — відео, аудіо та інші види мультимедіа, щоб подати їх у найзручніший спосіб. А це означає, що деякі інформаційні матеріали можна переглянути без переходу на сайт-джерело.

Мал. 27.16

Серед Додатків Google також є сервіс, який дає змогу створювати закладки. Щоб перейти до нього, у списку сервісів обирають Більше/Інші продукти від Google. У групі Веб пошук обирають Закладки (мал. 27.17).

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

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

Для того щоб отримувати повідомлення про зміни, які відбулися на сайті, чи появу нових дописів, наприклад, у веб-журналах чи блогах, використовують так звані канали новин, що організовують за допомогою технології RSS, якуще називають фідом (від англ. feed — живлення, постачання, канал)

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

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

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

Щоб налаштувати синхронізацію, виконують такі дії:

1. Відкрити Google Диск. Обрати Пуск /Всі програми/ Google Диск.

2. Натиснути значок Google Диск

на панелі завдань у правому

нижньому куті екрана. 3. Натиснути

в правому верхньому куті вікна та обрати Нала-

штування/Параметри синхронізації.

4. Обрати дані для синхронізації: Синхронізувати всі об’єкти в розділі Мій диск чи Синхронізувати тільки ці папки. Якщо обрано другий варіант, то позначити папки для синхронізації.

5. Натиснути Застосувати.

1. Що означає персональне навчальне середовище для вас особисто?

2. Що таке хмарні технології та які переваги їхнього застосування?

3. Які хмарні технології ви використовуєте у своєму навчальному середовищі? Наведіть приклади.

4. Які типи документів можна завантажувати в Google Диск, а які — створювати?

5. Як надавати спільний доступ до документів у своєму хмарному сховищі? Які рівні доступу можна надати?

6. Як створюють опитування за допомогою Google Форм?

7. Для чого використовують електронні закладки на ресурси Інтернету? Чим вони відрізняються від закладок браузера?

8. Як дізнаватися про зміни на сайті, не заходячи на нього у браузері?

9. Що таке синхронізація даних та для яких цілей її застосовують?

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

2. Перемістіть до Google Диска презентацію, створену в проекті «Ярмарок професій». Надайте доступ до завантаженого документа для коментування двом учням класу, щоб отримати від них дві похвали щодо змісту пропонованої презентації та однієї пропозиції щодо її удосконалення. Візьміть участь у такому коментуванні документів, які створені іншими учнями.

3. Створіть на Google Диску документ для спільного створення реклами у формі малюнка однієї з професій, які ви представлятимете на «Ярмарку професій». Долучіть до спільного редагування ще одного учня класу. Надайте доступ для коментування результатів своєї роботи вчителю та учню-експерту, якого визначить учитель.

4. Засобами редактора таблиць Google Диска створіть електронну таблицю для підрахунку витрат електроенергії домашніми побутовими приладами протягом дня. Кожен введіть потрібні значення відповідно до використання пристроїв удома. Визначте, чия родина більш ощадлива у використанні електроенергії.

5. Обговоріть, у чому подібність і відмінність кнопки RSS та кнопок Оповіщення й Підписатись

на каналі Цікава наука

1. Створіть модель власного персонального навчального середовища у вигляді карти знань. Додайте у вузли карти потрібні посилання на ресурси різних типів. Збережіть карту у файлі Я навчаюсь у папці Проекти своєї структури папок.

2. Створіть онлайнове опитування учнів класу з метою визначення думки однокласників щодо однієї з тем:

1) чи раціонально учні розподіляють свій час і що в цьому їм допомагає;

2) як учні ставляться до проблеми милосердя до бездомних тварин та які ваші пропозиції щодо цієї теми підтримують;

3) які шляхи вирішення проблеми сміття в селі, мікрорайоні, місті, запропоновані вами, підтримують учні класу;

4) як учні класу ставляться до здорового способу життя та чи мають проблеми зі шкідливими звичками?

Використайте у формі опитування не менш як 5 запитань різного типу. Оформіть її на власний розсуд і надішліть однокласникам для отримання відповідей.

3. Встановіть додаток Google Диск на персональний комп’ютер. Синхронізуйте папки, які ви використовуєте в навчанні, з хмарним диском Мій диск. Оберіть для цього потрібні параметри налаштувань синхронізації.

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

Проект «Е-урядування»

1. За допомогою Google Форми створіть опитувальник для проведення анкетування, наскільки прозорими та зручними є е-послуги, доступні у вашому місті чи громаді.

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

ОФІСНІ ВЕБ-ПРОГРАМИ ДЛЯ СТВОРЕННЯ СПІЛЬНИХ ДОКУМЕНТІВ. ОПИТУВАННЯ З ВИКОРИСТАННЯМ ОНЛАйНОВИХ ФОРМ.

Як працювати з офісними веб-програмами на Google Диску;

як організовувати опитування з використанням онлай-нових форм;

як працювати з електронною поштою.

Групу з трьох учнів, які спільно працюватимуть над виконанням практичної роботи.

Під час виконання практичних завдань пам’ятайте про правила безпеки життєдіяльності при роботі з комп’ютером!

Завдання. Літня школа (36 балів)

Учні 9 класу вирішили організувати в школі під час літніх канікул 5-денну літню

школу для молодших школярів, яка триватиме не більш як три години кожного

запланованого дня. Розподіліть обов’язки в групі та виконайте завдання:

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

2. Створіть текстові онлайнові документи: оголошення про проведення літньої школи;

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

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

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

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

реєстрації волонтерів літньої школи, у якій буде передбачено ім’я та прізвище волонтера, вік, яку волонтерську діяльність може запропонувати під час проведення літньої школи, який термін участі у школі: від одноразової участі — до повної зайнятості протягом 5 днів, контакти.

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

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

презентацію літньої школи та її засновників;

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

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

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

який вигляд має код розмітки веб-сторінки мовою HTML; які засоби використовують для створення веб-сайта; як створити веб-сайт в мережі.

29.1. Яку структуру можуть мати сайти?

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

Структура сайта визначає наявність розділів, сторінок, посилань на сторінки, розташування цих елементів та їхній взаємозв’язок.

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

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

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

При ієрархічній, або деревоподібній, структурі (мал. 29.3) створюється одна головна сторінка, яка не має попередніх, решта сторінок має лише одну попередню сторінку.

При довільній структурі кожна сторінка може містити посилання на довільну кількість сторінок сайта. Така структура найкраще підходить для сайтів, що містять різні за тематикою матеріали: каталогів, зібрань статей з різних тем або добірок посилань. Прикладом такої структури є сайт Бібліотека української літератури (www.ukrlib.com.ua).

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

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

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

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

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

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

Головна сторінка сайта має задовольняти правилу «3 по 3», тобто три абзаци по три речення про тематику та зміст, авторів і призначення сайта. Крім того, вона має відповідати таким вимогам: відображати тематику сайта;

бути цікавою, щоб користувач мав бажання переглянути інші сторінки сайта;

містити інструмент реалізації пошуку по сайту; містити розділ з актуальними даними, що постійно оновлюються, наприклад, новини, акції, поради дня тощо;

містити відомості про спосіб зворотного зв’язку (e-mail, телефон, адресу).

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

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

29.2. Які відмінності можуть мати веб-сторінки сайта?

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

Інформаційний вміст веб-сторінки зазвичай називають контентом.

Веб-сторінки можуть бути статичними та інтерактивними.

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

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

При створенні інтерактивних веб-сторінок використовують спеціальні скрипти, записані мовами javascript і VBScript, або Ftash-ролики (swf-файли).

Сайти, що містять інтерактивні веб-сторінки, називають динамічними. Для створення та супроводження динамічних сайтів використовують CMS (Content Management System) — систему управління сайтом, яку називають двигунцем сайта. Засоби розробки сайтів забезпечують відокремлення змістової частини (контенту) від дизайну (шаблону веб-сторінки), що дає змогу змінювати вміст веб-сторінки, не змінюючи дизайн, і змінювати шаблон сайта, не змінюючи вміст його веб-сторінок. Такі двигунці мають багато різних модулів: форуми, гостьові книги, поштові розсилки, контакти, опитувальники, форми реєстрації, форми пошуку, систему обміну повідомленнями між користувачами та інші компоненти, які перетворюють сайт з інформаційного засобу на комунікаційний.

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

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

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

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

Поняття домашня сторінка має декілька значень:

головна веб-сторінка деякого сайта, на яку користувач потрапляє, коли вводить своє доменне ім’я у вікні браузера. Така сторінка містить елементи для переходу на інші сторінки сайта; веб-сайт, що належить певній людині. Спочатку цей термін (від англ. Home Page) означав дім людини в Інтернеті, місце, де вона зберігає власні дані. Тепер такі сторінки містять, окрім даних про власника, і корисні відомості з певної тематики, зображення, повідомлення чи цікаві факти;

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

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

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

списку. Наприклад, перша сторінка інформаційної системи Конкурс, за допомогою якої можна відстежувати конкурс вступу до вищих навчальних закладів, побудована за типом веб-каталогу (мал. 29.6), що надає можливість територіального пошуку вищих навчальних закладів (http://vstup.info).


29.3. У чому полягає процес створення веб-сайта?

Процес створення веб-сайта складається з таких етапів:

визначення теми та мети створення сайта, розробка концепції веб-сайта та його структури;

проведення дослідження з обраної теми;

вибір способу подання даних і стилю оформлення веб-сторінок; розмітка та програмування сайта; наповнення сайта даними; художнє оформлення сторінок; розміщення веб-сторінок на сервері; популяризація сайта та підтримка його роботи.

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

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

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

Вміст сайта, який зазвичай займає 70-80 % його площі, безпосередньо впливає на дизайн майбутнього сайта. Тому спочатку добирають контент сайта, тобто всі матеріали та дані, які потрібно буде розмістити: текст, таблиці, малюнки, графіки тощо, і лише потім обирають його художнє оформлення. Перед розміщенням в Інтернеті сайт тестується як розробником, так і замовником, після цього виправляють знайдені помилки та некоректності.

Публікація сайта в Інтернеті передбачає його розміщення за обраним доменним ім’ям, яке реєструється у великих пошукових машинах і каталогах. Для того щоб сайт відвідувала значна кількість користувачів, потрібно здійснювати заходи щодо його популяризації — «розкрутки». Для цього використовується контекстна й банерна реклама, SEO, SMO та інші методи.

Пошукова система враховує такі параметри сайта при визначенні його релевантності (ступеня відповідності запиту, що вводиться при пошуку):

• щільність ключових слів;

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

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

SEO (від англ. Search Engine Optimization — пошукова оптиміза-ція) — комплекс заходів для підняття позицій сайта в результатах пошуку пошукових систем за певними запитами користувачів. Зазвичай, що вищою є позиція сайта в результатах пошуку, то більше зацікавлених відвідувачів переходить на нього з пошукових систем.

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

29.4. Що передбачає веб-дизайн?

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

форма подання та стиль наповнення сайта, його зміст; оформлення — графічні елементи, навігація, шрифти, кольорова гама;

технології — засоби створення, форматування сторінок і надання їм динамізму;

подання — швидкість і надійність відображення сайта в мережі; мета — причина створення сайта й очікувані результати.

Веб-дизайнеру, який вперше створює сайт, слід враховувати такі поради:

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

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

необхідно перевіряти сайт на наявність помилок — вони псують враження про важливість сайта;

потрібно використовувати правило «п’ятірки»: не більш ніж п’ять шрифтів (як за типом, так і за розміром) на одній сторінці; не слід використовувати напис Сторінка в розробці — краще прибрати посилання на таку сторінку.

При доборі відповідного дизайну для сайта важливо пам’ятати, що форма має завжди підкреслювати зміст, не бути «агресивною» при перегляді, гармонійно поєднувати елементи декору, стилю, кольору, бути зручною для перегляду.

29.5. Який вигляд має код розмітки веб-сторінки мовою HTML?

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

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

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

Назва кожного тега — це одна або декілька літер, взятих у кутові дужки (< та >), яким відповідають певні англійські слова, що пояснюють їхнє призначення. Наприклад, назва тега <BODY> виникла від англійського слова body — тіло, головна частина, а сам тег використовується для створення вмісту веб-сторінки.

Тег записують так: <Тег>...текст... </Тег>.

Відкриваючий тег <Тег> позначає місце початку дії тега на сторінці, текст — фрагмент тексту, до якого буде застосовано форматування, закриваючий тег </Тег> визначає місце закінчення дії тега на сторінці. Пару тегів (відкриваючий і закриваючий) називають контейнером. Закриваючий тег відрізняється від відкриваючого лише тим, що в коді перед його іменем ставиться символ «/». Більшість тегів є парними, однак є й одинарні.

Один тег може мати кілька параметрів — атрибутів. Наприклад,

<Тег параметр_1= значення_1 параметр_2=значення_2 >...текст, що відображається на сторінці... </Тег>.

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

Правила запису параметрів: після назви тега після пропуску зазначається ім’я параметра (наприклад, ALIGN — ім’я параметра, який вказує на спосіб вирівнювання тексту), далі зазначають «=» й у лапках записують значення параметра (наприклад, ALIGN= «center»). За необхідності далі вказують інші параметри через пропуск. Після останнього параметра ставлять символ >.

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

Для підготовки найпростішого htm-файла можна використати текстовий редактор Блокнот, після написання коду в якому слід задати ім’я файла та вказати розширення — htm.

Наприклад, щоб отримати веб-сторінку, як показано на малюнку 29.7, потрібно набрати код.

Зрозуміло, що веб-сторінка реального сайта матиме такі самі складові коду, однак набагато більше тегів і їхніх параметрів. Щоб переглянути цей код, потрібно в меню браузера обрати вказівку Перегляд HTML-коду.

29.6. Які засоби використовують для створення веб-сайта?

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

Створювати веб-сторінки можна за допомогою звичайного текстового редактора або спеціального HTML-редактора (мал. 29.8).

Текстові редактори (наприклад, Блокнот) дають змогу, знаючи призначення та опис тегів мови розмітки, створювати веб-сторінки «вручну», без автоматизації. Для прискорення цього процесу до текстових процесорів було додано спеціальні функції, які дають можливість вставляти гіперпосилання до тексту та зберігати документ у форматі HTML. Крім того, є спеціальні програми — HTML-редактори, які дають змогу автоматизувати цей процес. Такі програми належать до засобів автоматизованої розробки веб-сайтів.

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

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

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

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

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

1. Створіть папку Сайти у власній структурі папок.

2. Перегляньте у браузері веб-сторінку Вулиця^т, що зберігається в папці Навчальне середовище.

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

3. Розгляньте HTML-код сторінки, для чого відкрийте її в середовищі текстового редактора Блокнот.

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

4. Збережіть документ із HTML-кодом сторінки в папці Сайти своєї структури папок.

5. Внесіть зміни до тексту, що формує вміст сторінки, пам’ятаючи, що всі теги та їхні параметри містяться в кутових дужках <>, </>.

6. Збережіть внесені зміни.

7. Перегляньте, як буде відображатися створена веб-сторінка у браузері.

29.7. Як створити веб-сайт в мережі?

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

Розглянемо процес створення сайта в Інтернеті на прикладі сервісу Google Сайти (Google Sites). Якщо в користувача вже є свій акаунт Google, то він може скористатись ним, якщо ні — спершу потрібно налаштувати свій обліковий запис.

Вправа 2. Створення структури сайта засобами сервісу Google Сайти. завдання. Створіть сайт про дивовижні споруди світу, який складається з двох веб-сторінок — опису сайта й опису однієї зі споруд. Розмістіть на першій сторінці сайта зображення, що ілюструє дивовижні споруди світу.

4. Розгорніть список тем, які можна застосувати для стильового оформлення сторінок сайта (мал. 29.11).

Мал. 29.11

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

6. Завершіть процес створення макета сайта, натиснувши кнопку Створити сайт.

7. Доповніть головну сторінку сайта сторінкою з описом однієї зі споруд. Для цього оберіть інструмент Додати сторінку у верхній частині вікна (мал. 29.13).

8. Оберіть зі списку запропонованих шаблонів сторінки (веб-сторінка, оголошення, файловий менеджер, список) шаблон веб-сторінка. Зазначте назву сторінки Варто побачити! Укажіть, що створена сторінка буде розміщуватись на домашній сторінці (мал. 29.14).

Вправа 3. Створення вмісту веб-сайта засобами сервісу Google Сайти.

Завдання. Додайте текст і зображення до створеного макета сайта Дивовижні споруди.

1. Перейдіть за адресою навчального сайта https://sites.google.com/site/ divoviznisporudi/, ознайомтесь із вмістом його головної сторінки, перейдіть на сторінку Варто побачити! Скористайтесь матеріалами як зразком для наповнення вмісту сайта.

2. Скориставшись своїм обліковим записом, перейдіть до послуги Google Сайти. Відкрийте сайт Дивовижні споруди, створений у попередній вправі. Перейдіть у режим редагування головної сторінки — оберіть інструмент Редагувати

Змініть заголовок Домашня сторінка, вказавши свою назву головної сторінки сайта (наприклад, Дивовижні споруди світу).

3. Заповніть текстове поле сторінки вступом про дивовижні споруди світу (можна скористатися матеріалами з файла Дивовижні споруди.docx із папки Навчальне середовище\Дивовижні споруди або підготувати власний вступ).

4. Завантажте зображення Дивовижні споруди.jpg з папки Навчальне середовище\Дивовижні споруди, скориставшись послугою Вставити з меню вбудованого редактора веб-сторінки (мал. 29.15).

5. Перейдіть на сторінку Варто побачити! Додайте до неї опис однієї зі споруд на ваш розсуд. Додайте зображення обраної споруди. Для вибору споруди скористайтесь посиланнями у файлі Дивовижні споруди з папки Навчальне середовище\Дивовижні споруди або пошуком в Інтернеті.

6. Збережіть зміни й перегляньте створений сайт. Переконайтеся, що за допомогою засобів навігації можна переходити на домашню сторінку та сторінку Варто побачити!

1. Які типи веб-сторінок розрізняють? Що спільного та які відмінності вони мають?

2. Із чого починається створення веб-сайтів?

3. З яких етапів складається процес створення сайта?

4. Чи є процес «розкрутки» сайта обов’язковим? Поясніть.

5. Які розрізняють види внутрішньої структури веб-сторінок?

6. Яким чином можна встановити, хто має авторські права на дизайн сайта?

7. Як структура веб-сторінки впливає на її сприйняття користувачем?

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

1. Порівняйте сайти, адреси яких наведено у файлі Список сайтів папки Навчальне середовище. Встановіть, які з них є професійними, а які — любительськими. Виділіть три ознаки для такого визначення. Обговоріть результати в парі.

2. Чи можна назвати використання готових шаблонів та елементів для створення сайтів порушенням авторських прав? Обговоріть у парах.

3. Розгляньте приклади дизайну сайтів у презентації Дизайн сайтів з папки Навчальне середовище. Обміняйтесь думками, для яких прикладів дизайн дібрано доцільно. Що б ви запропонували змінити для покращення сприйняття матеріалу тих сайтів, дизайн яких, на вашу думку, дібрано невдало?

4. Чи можна стверджувати, що в користувача, який володіє прийомами роботи із сайтом, наприклад, www.site.pryklad.com, буде достатньо навичок для роботи із сайтом www.karta.pryklad.com? Аргументуйте відповідь. Обговоріть у парах.

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

6. Чи можна створити якісний сайт без спеціальної освіти з веб-програмування? Якими уміннями має володіти майбутній автор сайта? Обговоріть у парах.

1. Розгляньте приклади сайтів навчальних закладів, що зареєстровані на освітньому порталі www.osvita.org.ua. Відшукайте, чи є на цих сайтах зразки банерів. Засобами графічного редактора створіть банер сайта свого навчального закладу.

2. Знайдіть в Інтернеті приклади сайтів інтернет-магазинів, які займаються онлайновим продажем комп’ютерної техніки. Проаналізуйте їхні вміст і структуру. Сплануйте макет сайта інтернет-магазину, який матиме спеціалізацію з продажу принтерів. Створіть схему макета засобами графічного редактора або текстового процесора. Обґрунтуйте вибір програмного середовища для створення макета. Засобами безкоштовної служби Google створіть статичну веб-сторінку згідно з розробленим вами макетом. Надішліть електронною поштою запрошення відвідати створену вами веб-сторінку вчителеві та сусіду чи сусідці по парті.

3. Відкрийте головну сторінку з іменем index.htm з папки Навчальне середо-вище\Уроки HTML. Визначте структуру сайта, перегляньте вміст різних розділів. Ознайомтеся з додатковими відомостями про теги й атрибути мови HTML.

Дослідіть, які дії можна виконувати після створення сайта засобами сервісу Google Сайти. Для цього оберіть інструмент Інші дії

у верхній частині вікна. Оберіть вказівку Керування сайтом. Дослідіть, як змінити тему оформлення сайта й налаштувати інші властивості сайта (мал. 29.16).

Проект «Обираємо майбутню професію»

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

Проект «Е-урядування»

Розробіть сайт із матеріалами про те, як відкрити власний бізнес за допомогою е-послуг. Сплануйте структуру сайта й елементи навігації.

КОНСТРУЮВАННЯ САЙТІВ З ВИКОРИСТАННЯМ ОНЛАйН-СИСТЕМ

Як за допомогою сервісу Google Сайти створювати сайти; як налаштувати стильове оформлення сайта, створеного засобами сервісу Google Сайти; як додавати нові сторінки до сайта; як додавати на створені веб-сторінки текст, зображення та інші об’єкти;

як редагувати вміст веб-сторінки.

У власній структурі папок створіть папку Практична робота 13.

Під час виконання практичних завдань пам’ятайте про правила безпеки життєдіяльності при роботі з комп’ютером!

Завдання 1. Дивовижні споруди світу (6 балів)

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

Завдання 2. Мої захоплення (12 балів)

Засобами сервісу Google Сайти створіть сайт про власні захоплення. Матеріали, які вам знадобляться для додавання на веб-сторінки, збережіть у папці Практична робота 13 своєї структури папок. На головній сторінці розмістіть вступ і додайте зображення. Створіть інші три веб-сторінки, на яких детальніше опишіть свої три захоплення, проілюструйте їх зображеннями чи додайте посилання на відео, розміщені на YouTube.

завдання 3. рідкісні тварини (12 балів)

Засобами сервісу Google Сайти створіть сайт про рідкісних тварин. Матеріали, які вам знадобляться для додавання на веб-сторінки, збережіть у папці Практична робота 13 своєї структури папок. На головній сторінці розмістіть вступ і додайте зображення. Створіть інші три веб-сторінки, на яких подайте відомості про трьох тварин, проілюструйте їх зображеннями чи додайте посилання на відео, розміщені на YouTube.

завдання 4. Наші проекти (12 балів)

Засобами сервісу Google Сайти створіть сайт про проект, який реалізовано учнями вашого класу на уроках чи в позаурочний час. Матеріали, які вам знадобляться для додавання на веб-сторінки, збережіть у папці Практична робота 13 своєї структури папок. На головній сторінці сайта опишіть обраний проект, укажіть його мету та завдання, додайте відгуки учнів про проведений проект і пропозицію його підтримки іншими учнями шкіл. Створіть інші три веб-сторінки, на яких розмістіть відомості про реалізацію проекту, список використаних ресурсів, отримані результати, проілюструйте їх зображеннями чи додайте посилання на відео, розміщені на YouTube.


 

Завдання 1. «Дні цікавої' науки»

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

1. Оберіть форму подання збірки ресурсів, що буде зручною для використання учнями класу. Створіть збірку у вибраному середовищі. Організуйте спосіб розміщення матеріалів, який буде доступний учням класу.

2. Заповніть таблицю виконання завдання — файл Таблиця-наука, збережений у папці Компе-тентнісні завдання.

3. Надайте доступ до матеріалів учителю.

Завдання 2. «Оновлюємо комп’ютерний клас»

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

1. Оберіть форму подання звернення, яке буде зручним для перегляду адміністрацією школи. Створіть звернення у вибраному середовищі. Організуйте спосіб розміщення матеріалів, що буде доступним учням класу.

2. Заповніть таблицю виконання завдання — файл Таблиця-комп’ютери, збережений у папці Компетентнісні завдання.

3. Надайте доступ до матеріалів учителю.

Завдання 3. «Інтернет і наше життя»

Після роботи з інтернет-сервісом про еволюцію Інтернету за адресою http://evolutionofweb.appspot.com/7hhru для проведення Всесвітнього дня Інтернету в школі учні 9 класу вирішили створити комп’ютерну модель, яка демонструє, як змінювалося їхнє життя разом зі зміною Інтернету. Для цього вони планують створити лінію часу, де розмістять власні фотографії, малюнки ґаджетів і програм, які вони використовували, та як зростали їхні власні інформаційні потреби в користуванні мережевими послугами.

1. Оберіть форму подання моделі, що дасть змогу реалізувати заплановане. Створіть модель у вибраному середовищі. Організуйте спосіб розміщення матеріалів, який буде доступний учням класу.

2. Заповніть таблицю виконання завдання — файл Таблиця-модель, збережений у папці Компетентнісні завдання.

3. Надайте доступ до матеріалів учителю.

Завдання 4. «Комп’ютерні віруси»

Для проведення Дня безпечного Інтернету у школі учні 9 класу вирішили створити комп’ютерну модель, яка демонструє шкідливий вплив комп’ютерних вірусів та способи захисту від таких загроз. Для цього учні планують створити графічний образ кожного з відомих їм вірусів, «оживити» дії вірусів та озвучити можливі результати від імені програм і комп’ютера, які підлягають вірусній атаці.

1. Оберіть форму подання моделі, що дасть змогу реалізувати заплановане. Створіть модель у вибраному середовищі. Організуйте спосіб розміщення матеріалів, який буде доступний учням класу.

2. Заповніть таблицю виконання завдання — файл Таблиця-віруси, збережений у папці Компе-тентнісні завдання.

3. Надайте доступ до матеріалів учителю.

Завдання 5. STEM-центр

Учні вашої школи вирішили облаштувати STEM-центр і представити свою ідею адміністрації та батьківському комітету школи. Вони запропонували вам долучитися до проекту. Ви вирішили пояснити, що означають літери S, T, E, M у його назві, та як організовані такі центри в Україні та світі. Для такого центру ви плануєте розробити сайт, розмістити на ньому логотип STEM-центру, тому вам слід розробити карту структури сайта, а для організації зворотного зв’язку із центром, попереднього запису на заняття ви також маєте розробити форму реєстрації. Для придбання обладнання для центру ви створюєте кошторис, розрахунки для якого будете здійснювати у проекті, написаному мовою програмування.

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

2. Заповніть таблицю виконання завдання — файл Таблиця-STEM, збережений у папці Компе-тентнісні завдання.

3. Надайте доступ до матеріалів учителю.

Завдання 6. Smart City

Переглядаючи матеріали сайта http://forum.e.gov.ua/itdir2/, ви дізнались, що в Україні декілька міст має цікавий досвід реалізації проекту Smart City. Таке «розумне» місто чи село ви плануєте запропонувати створити громаді свого населеного пункту. Для цього вам потрібно розробити інформаційні матеріали, у яких подати пояснення, що таке Smart City, навести 5 ознак такого «розумного» міста чи села, подати приклади реалізації проекту в 5 населених пунктах України, 5 містах Європи та 5 містах у світі. Створіть власні пропозиції щодо побудови Smart City у вашому населеному пункті у вигляді дорожньої карти реформи.

1. Оберіть форму подання своїх матеріалів, що дасть змогу продемонструвати всі знайдені відомості та напрацьовані матеріали. Створіть представлення матеріалів у вибраному середовищі. Організуйте спосіб розміщення матеріалів, який буде доступний учням класу.

2. Заповніть таблицю виконання завдання — файл Таблиця-SMART, збережений у папці Компетентнісні завдання.

3. Надайте доступ до матеріалів учителю.

Об’єднайтесь у групи по 3-4 учні та створіть навчальний проект із дослідження обраної предметної галузі навчального курсу «Інформатика» на одну із запропонованих тем чи обраних самостійно:

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

надбудови табличного процесора: користь для користувача чи зайвий застосунок; редактори комп’ютерної графіки: нові інструменти для майбутнього художника; фрактали — це математика чи інформатика;

• вікісайти: основи конструювання та приклади застосувань;

• Офіс 365: сховище чи онлайнові офісні програми;

• робототехніка: як знання інформатики допоможуть керувати роботом;

• BD-моделювання: програми та реалізація.

Матеріали свого дослідження подайте у вигляді сайта, структуру та спосіб його створення оберіть самостійно.

Починаючи роботу над проектом:

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

2. У процесі виконання проектних завдань потрібно розглянути такі запитання:

1) Які основні ідеї ви розглядатимете у своєму проекті? Які ідеї вам потрібно буде дослідити та вивчити додатково?

2) Де ви шукатимете потрібні відомості? Які відомості ви можете знайти в газетах, книжках або в Інтернеті? З якими людьми ви, можливо, захочете і зможете зустрітися та обговорити проблему?

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

4) Які офісні веб-програми та інтернет-сховища можуть бути корисними для організації спільної роботи над виконанням проекту?

5) У який спосіб можна організувати опитування учнів щодо вашого проекту? Як використати результати опитування для його покращення?

6) У який спосіб ви плануєте провести презентацію результатів дослідження? Як розподілити обов’язки між членами групи, щоб кожен продемонстрував свій персональний внесок у виконання проекту?

7) Яких ресурсів (інформаційних, матеріальних, людських) вам бракує для виконання завдань проекту і яким чином можна вирішити цю проблему?

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

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

• Я слухав/слухала, коли інші говорили.

• Я пропонував/пропонувала свої ідеї.

• Я запитував/запитувала інших про їхні ідеї.

• Я ділився/ділилася матеріалами й інструментами.

• Я звертався/зверталася до моїх партнерів за допомогою, коли вона мені була потрібна.

• Я допоміг/допомогла комусь у моїй групі.

• Я сказав/сказала іншим, що мені подобаються їхні ідеї.

• Я дотримувався/дотримувалася черги й намагався/намагалася, щоб інші теж стежили за цим.

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

3. Сплануйте підсумковий етап — захист проекту. Під час підготовки до цього заходу вам потрібно узагальнити всі напрацювання, підготувати слайдову презентацію для супроводу вашого виступу. Для інформування запрошених на захист проектів гостей (учнів інших класів, учителів, батьків тощо) щодо тематики, програми та регламенту його проведення доцільно створити текстовий документ.

 

Це матеріал з підручника Інформатика 9 клас Морзе

 






^