ТЕОРІЯ ВЕБ-ТЕХНОЛОГІЙ ТА ВЕБПРОСТОРУ

Анотація

За умов масової комп’ютеризації важливого значення набуває ефективне використання інформаційно-комунікаційних технологій. Значна роль належить web-технологіям. У статті здійснено огляд з основ композиції та типографіки стосовно дизайну веб-сторінок. Основою дослідження стали джерела, в яких простежено зміни та тенденції веб-дизайну у певні проміжки часу, та вивчено сайти, представлені на таких ресурсах як AWWWARDS, TheFwa, Dribble. Проаналізовано вплив вільного простору на фокусування погляду користувача, на чіткість і швидкість сприйняття інформації, на естетичний вигляд інтерфейсу. Виявлено класифікацію макро- і мікропробілів, а також різні способи їх використання. Простежується зв'язок принципів гештальту з використанням вільного простору в інтерфейсі. За умов масової комп’ютеризації важливого значення набуває ефективне використання інформаційно-комунікаційних технологій. Значна роль належить web-технологіям. Впровадження web-технологій в освітній простір початкової школи є вимогою сьогодення і моїм глибоким переконанням, яке я презентую у своєму досвіді роботи. Web-технології дозволяють, допомагають вносити елементи навчання, здійснюють підхід, сприяють співробітництву освітнього закладу. Незважаючи на досить велику кількість освітніх ресурсів в Інтернеті найбільш ефективними є ресурси, наближені потреб навчального предмету, та органічно вписуються в навчальне середовище. Таким місцем може стати персональний Web-сайт.

Ключові слова: вільний простір, макропростір, макропробіл, мікропростір, пасивний простір, активний простір.

Постановка проблеми

Web — це світова багатовіконна стрічка комп'ютерних баз даних, які використовують загальну інформаційну архітектуру, що обновлюється. Концептуально Web представляє собою систему управління базою даних типу "клієнт" — "сервер".Web-сторінка — це документ, який користувач одержує в результаті прочитування HTML-файлу спеціальною програмою — Web-оглядачем. Web-сторінка містить текст, графіку, а також посилання на інші документи і файли (текстові, графічні, аудіо і відео). Аналіз великої кількості сайтів виявив, що білий простір виконує основну роль балансування візуальної ієрархії та є провідником погляду стратегічними точками взаємодії в системі «користувач-інтерфейс». Керування його параметрами дає можливість дизайнерам контролювати увагу , ненав'язливо виділяти інформацію, поділяти важливі частини дизайну веб-сторінки, роблячи їх доступними для сприйняття, а також послідовно переводити погляд від одного структурного елементу до іншого. Web-сторінки, поєднані в загальну структуру, утворюють Web-вузол (Web-сайт). Окрім власне Web-сторінок, Web-вузол містить теги і файли, що забезпечують його функціонування в мережі Internet.Вузол Web — це частина системи Internet, що вміщує сервер Web. Сервер Web являє собою програмне забезпечення вузла, що дозволяє браузеру Web отримати доступ до документів, які зберігаються на вузлі. Web-сервер — це підключений до Internet комп'ютер, що підтримує протокол HTTP (HyperText Transfer Protocol). Він використовується для доставки даних в Internet і дозволяє користувачам клієнтських програм завантажувати і відтворювати текст, малюнки, звук, відео і інші дані. Протокол FTP (File Transfer Protocol) також є поширеним способом завантаження файлів на віддалений сервер. Web-сервер, володіючи спеціальними програмними засобами, забезпечує представлення розміщених на ньому Web-сторінок і пов'язаних з ними файлів по запиту клієнта. Відвідуючи вузол за допомогою Web-orajwana, користувач робить запит, повідомляючи адресу URL (наприклад: microsoft.com). URL — це універсальний покажчик ресурсів (Uniform Resource Locator). Він є адресою файлу, що знаходиться в мережі. Отримавши запит, сервер представляє потрібну сторінку, а також всі пов'язані з нею файли, наприклад малюнки, звуки і т.п. Web-оглядач — основний інструмент для перегляду і отримання інформації в Internet. Він є програмою, яка інтерпретує HTML-файли як Web-сторінки і відображає їх. Приклади Web-оглядачів: MS Internet Explorer, Netscape Navigator.Web-оглядач можна використовувати для переходів з однієї Web-сторінки на іншу по гіперпосиланнях, для завантаження файлів з Internet на комп'ютер, для відтворення на Web-сторінці файлів звукозапису, анімації, відео, а також запуску програм-додатків (наприклад, поштових). Публікація Web-вузла на Web-сервері. Щоб розмістити Web-вузол в мережі Internet, його необхідно опублікувати на Web-сервері. В цілому, публікація означає копіювання всіх файлів на віддалений сервер. В більшості випадків віддалене розташування — це шлях HTTP або FTP. Шлях, що використовується, залежить від технологій, що підтримує сервер. Вони вирізняються зручністю використання інструментів для пошуку та створення, а це підвищує ефективність уроку, активізує пізнавальну діяльність, мотивує до навчання. Проблемам упровадження web-технологій і використання web-ресурсів держава приділяє увагу. Отже, проблема використання технологій є однією з найактуальніших проблем сьогодення. А завдання - змінити уявлення щодо використання комп’ютера не тільки для ігор, але й для формування ключових компетентностей . Адже вона: • сприяє реалізації завдань; • забезпечує умови для розвитку творчої особистості; • сприяє розвитку інформаційно-цифрової компетентності; • дозволяє виявляти, які мають нахили до вивчення предметів; • сприяє розвитку пізнавальної активності. Гіперпосилання — це текстовий або графічний елемент Web-сторінки, який є покажчиком для переходу на іншу Web-сторінку. Розрізняють внутрішні і зовнішні гіперпосилання. Внутрішні гіперпосилання забезпечують перехід на іншу частину даної сторінки, файл або іншу сторінку даного Web-вузла. Зовнішні гіперпосилання вказують на файл або сторінку іншого Web-вузла. При натисканні мишею по гіпер-посиланню, що знаходиться на відкритій Web-сторінці, вказаний в ній об'єкт відображається в Web-оглядачі, відкривається або запускається залежно від типу цього об'єкту (файл, сторінка, програма). В Internet гіперпосилання є основним засобом переходів між Web-сторінками і Web-вузлами.Панель посилань — набір графічних або текстових кнопок Web-сторінки, що містить гіперпосилання. Гіпероб'єктом називається область або рядок тексту, поміщений в малюнок, якому призначено гіперпосилання. Коли відвідувач вузла натискає мишкою на цій області або рядку, в Web-оглядачі відкривається об'єкт, адреса якого вказана в гіперпосиланні.Малюнок, що містить один або декілька гіпероб'єктів, називається гіперкартою. Він зазвичай містить підказки для відвідувачів сайту про розташування гіпероб'єктів.

Структура Web-вузла. Web-вузол є набором Web-сторінок, з'єднаних в загальну структуру, яка має ієрархічний вигляд. Вершиною цієї структури, як правило, є головна (домашня) сторінка. Звичайно їй відповідає HTML-файл, якому призначається ім'я Default.htm або Index.htm.

Веб-технології - це різні інструменти та техніки, які використовуються в процесі зв’язку між різними типами пристроїв через Інтернет. Щоб краще зрозуміти цей термін, розіб’ємо його на дві частини: „веб” та „технологія”. У цьому випадку Інтернет стосується Всесвітньої павутини, більш відомої як WWW (World Wide Web). Вперше він з’явився у 1989 році, коли відомий вчений та інженер Тім Бернерс-Лі створив ефективний механізм розподілу ресурсів між науковцями усього світу. Вони колективно утворюють те, що ми називаємо Всесвітньою павутиною. Аналіз останніх досліджень і публікацій. Одним із перших про вільний простір написав відомий швейцарський типограф Ян Чихольд у своїй книзі «Нова типографіка». Він відзначив, що білі ділянки паперу є рівноцінними елементами композиції і пробіл слід розглядати в якості активного елементу, а не пасивного фону [3]. Також вільний простір є частиною естетичної теорії Рудольфа Арнхейма, в якій важливим є семантичний аспект просторової організації [1-3]. Американський професор Олександр Уайт, автор книги «Елементи графічного дизайну», запропонував використовувати пробіл в якості важливого компонента дизайну [2-7]. Включення простору в дизайн допомагає утримати увагу, підвищити читабельність і створювати ілюзії. Простір є важливою частиною макету. Вагомою роботою у даному напрямку є стаття «Основи дизайну: простір та співвідношення фігури і фону» Стівена Бредлі, дизайнера і веб-розробника, автора книги «Design Fundamentals: Elements, Attributes, & Principles». У цьому доробку було розглянуто простір в якості основного елементу проектування, а також відношення між простором та позитивними елементами в якості елементів дизайну, які формує дизайнер [3-5]. Найновіше дослідження принципів ефективного використання білого простору відображено у статті Томера Лернера, дизайнера і менеджера UX на Webydo [2-6]. Мета роботи полягає в аналізі макро- і мікропробілів у дизайні веб-сторінок на основі сучасних веб-сайтів, візуального впливу вільного простору на користувача та класифікації різновидів пробілів і способів їх використання, що дозволить впровадити дані дослідження для вирішення практичних задач і оптимізувати проектну діяльність веб-дизайнера. Виклад основного матеріалу дослідження. Одним із найважливіших компонентів веб-сторінки є білий простір, як частина концепту дизайну, який несе в собі візуальну привабливість. Простір покращує загальний вигляд, і розглядається як поняття «велике полотно». Кожен веб-сайт має цифровий інтерфейс. Кнопки, посилання, текст та інші елементи інтерфейсу – все повинно сприйматися так, щоб глядач побачив майстерно створену ілюстрацію або плакат. Макети сайтів створені для взаємодії з користувачем, але вони також розроблені з урахуванням естетичної привабливості. Негативний або вільний простір є частиною естетичної теорії Рудольфа Арнхейма [1-5]. Цей термін прийшов з фотомистецтва, де він означає весь простір, що не потрапив у фокус. Термін «пробіл» часто використовується у графічному дизайні. Мається на увазі будь-який порожній простір, найчастіше білого кольору. Ці поняття будуть використовуватися як синоніми, незалежно від кольору простору і його однорідності.

Простір має вплив на наступні напрямки:

1. Погляд-сканування. Простір між великими елементами впливає на те, як користувач переглядає сторінку, і правильне його використання дозволяє фокусувати погляд користувача на важливі елементи. 2. Чіткість. Простір між більш дрібними елементами (мікропростір), такими як лінії текстів, елементи списку, а іноді й іконки. Він має вплив на чіткість і швидкість прочитання та вибору. 3. Естетика. Пробіл займає найбільшу площину у візуальній організації веб-сторінки, отже, завдяки цьому інтерфейс набуває естетичного вигляду. Наприклад, випадкова роздрібненість контенту рідко виглядає як цілісна композиція. 4. Гіперпростір. Це великий за площиною пробіл, який вселяє в сторінку повітря, елегантність і вишуканість. Інформаційні технології (ІТ) — широкий клас дисциплін і областей діяльності, що належать до технологій управління і обробки даних. Під інформаційними технологіями розуміють комп'ютерні технології. ІТ мають справу з використанням комп'ютерів і програмного забезпечення для зберігання, перетворення, захисту, обробки, передачі і отримання інформації. Фахівців з комп'ютерної техніки і програмування часто називають ІТ-фахівцями. Web, або Всесвітня мережа — глобальний інформаційний простір, заснований на фізичній інфраструктурі Інтернету і протоколі передачі даних HTTP. Всесвітня мережа викликала справжню революцію в інформаційних технологіях і бум в розвитку Інтернету. Часто, кажучи про Інтернет, мають на увазі саме Всесвітню мережу. Для позначення Всесвітньої мережі також використовують слово веб (англ. web) і абревіатуру «WWW». Структура і принципи Всесвітньої мережі Всесвітню мережу утворюють мільйони веб-серверів мережі Інтернет, розташованих по всьому світу. Веб-сервер є програмою, що запускається на підключеному до мережі комп'ютері і використовує протокол HTTP для передачі даних. У простому вигляді така програма отримує по мережі HTTP-запит на певний ресурс, знаходить відповідний файл на локальному жорсткому диску і відправляє його по мережі комп'ютеру, що запитав. Складніші веб-сервери здатні динамічно формувати ресурси у відповідь на HTTP-запит. Для ідентифікації ресурсів (часто файлів або їх частин) у Всесвітній павутині використовуються одноманітні ідентифікатори ресурсів URI (англ. Uniform Resource Identifier). Для визначення місцезнаходження ресурсів в мережі використовуються одноманітні локатори ресурсів URL (англ. Uniform Resource Locator). Такі URL-локатори поєднують в собі технологію ідентифікації URI і систему доменних імен DNS (англ. Domain Name System) — доменне ім'я (або безпосередньо IP-адрес в числовому записі) входить до складу URL для позначення комп'ютера (точніше — одного з його мережевих інтерфейсів), який виконує код потрібного веб-сервера. Для перегляду інформації, отриманої від веб-сервера, на клієнтському комп'ютері застосовується спеціальна програма — веб-браузер. Основна функція веб-сервера-браузера — відображення гипертекста.Всесвітня павутина нерозривно пов'язана з поняттями гіпертексту і гиперпосилання. Більша частина інформації у Вебі являє собою саме гіпертекст.Термін гіпертекст був введений Тедом Нельсоном в 1965 році для позначення «тексту, що розгалужується або виконується, за запитом». Зазвичай гіпертекст - це набір текстів, що містять вузли переходу від одного тексту до іншого. Це дозвляє обирати об'єкт або послідовність читання. Загальновідомим і яскраво вираженим прикладом гіпертексту є веб-сторінки — документи на HTML (гіпертекстовій мові розмітки), розміщені в Мережі.Для полегшення створення, зберігання і відображення гіпертексту у Всесвітній мережі традиційно використовується мова HTML (англ. Hypertext Markup Language), мова розмітки гіпертексту. Робота з розмітки гіпертексту називається версткою, майстра розмітки називають вебмайстром. Після HTML-розмітки гіпертекст, вміщується у файл, такий HTML-файл є найпоширенішим ресурсом Всесвітньої мережі. Після того, як HTML-файл стає доступним веб-серверум, його починають називати «веб-сторінкою». Набір веб-сторінок утворює веб-сайт. До тексту веб-сторінок додаються гіперпосилання. Гіперпосилання допомагають користувачам Всесвітньої мережі легко переміщатися між ресурсами (файлами) незалежно від того, знаходяться ресурси на локальному комп'ютері або на віддаленому сервері. Гіперпосилання веба засновані на технології URL. В цілому можна зробити висновок, що Всесвітня павутина стоїть на «трьох китах»: HTTP, HTML і URL. Хоча останнім часом HTML почав трохи здавати свої позиції і поступатися ними сучаснішим технологіям розмітки: XHTML і XML. Для поліпшення візуального сприйняття веба почала широко застосовуватися технологія CSS, яка дозволяє задавати єдині стилі оформлення для багатьох веб-сторінок одразу. Веб-сайт, або просто сайт (англ. website, від web — мережа і site — «місце») — це сукупність веб-сторінок, доступних в інтернеті через протоколи Http/https; сукупність всіх загальнодоступних веб-сайтів і є Всесвітня Павутина. Сторінки веб-сайту об'єднані загальною кореневою адресою, а також зазвичай темою, логічною структурою, оформленням і/або авторством. Раніше поняття сайта змішували з фізичним вузлом мережі — хостом, сервером (вузлом). Але із зростанням Інтернету і технологічним поліпшенням серверів на одному комп'ютері стало можливе розміщення безлічі сайтів і доменів.Сторінки веб-сайтів — це файли з текстом, розміченим на мові HTML або XHTML. Ці файли завантажуються відвідувачем мережі на його комп'ютер, обробляються програмою-браузером і виводяться на засіб відображення користувача (монітор, екран КПК, принтер або синтезатор мови). Мова Html/xhtml дозволяє форматувати текст, розрізняти в ноьму функціональні елементи, створювати гіпертекстові посилання (гіперпосилання) і вставляти в сторінку зображення, звук та інші мультимедійні елементи. Відображення сторінки можна змінити додаванням до неї таблиці стилів на мові CSS або сценаріїв на мові Javascript. Сторінки сайтів можуть бути простими статичними наборами файлів або створюватися спеціальною комп'ютерною програмою на сервері — так званим движком сайту. Движок може бути або зроблений на замовлення для окремого сайту, або готовим продуктом, розрахованим на певний різновид сайтів. Деякі з движків можуть забезпечити власнику сайту можливість гнучкого налаштування структуризації і виведення інформації на вебсайті; такі движки називаються системами управління змістом.Виготовлення сайтів як працюючих цілісних інформаційних ресурсів - це складний процес, що потредує поєднання різних професійних навичок. Загальний термін на позначення сайтобудування — «веб-розробка».

Веб-сервіси – це технологія, яка дозволяє додаткам обмінюватися даними незалежно від платформи і мови програмування. Веб-сервіс обов'язково має програмний інтерфейс, який отримує через мережу команди і дані в заздалегідь обумовленому форматі, виконує якісь операції і відправляє через мережу відповідь. Передавані через мережу дані мають один із загальноприйнятих форматів зазвичай це якийсь різновид XML. Як протокол практично завжди використовується Tcp/ip, а якщо точніше, то HTTP або HTTPS. Група веб-сервісов, які взаємодіють в описаній вище манері складають веб-додаток. Відповідна архітектура додатка називається орієнтованою на сервіси.Інтернет(від англ. Internet) — всесвітня система добровільно об'єднаних комп'ютерних мереж, побудована на використанні протоколу IP і маршрутизації пакетів даних. Інтернет утворює глобальний інформаційний простір, служить фізичною основою для Всесвітньої мережі і безлічі систем (протоколів) передачі даних. Часто згадується як Всесвітня мережа і Глобальна мережа.Коли зараз вживають слово Інтернет, то найчастіше мають на увазі Всесвітню мережу і доступну через неї інформацію, а не саму фізичну мережу. Це призводить до різних юридичних колізій і правових наслідків, особливо в країнах з авторитарними режимами, що негативним чином позначається на економіці цих країн. Оскільки в Інтернеті існують інформаційні некомерційні ресурси, що добровільно надаються користувачам, володіючи, як суспільні бібліотеки і ЗМІ, широтою доступу, виникають правові колізії або придушення сегментів мережі, особливо в недемократичних країнах, які в обхід самого міжнародного визначення Інтернет та власних законів, декларують його як засіб масової інформації, монополізуючи підключення до мережі на рівні держави і, завдяки цьому, довільно і безкарно відключаючи неубажаний для режиму інформаційний ресурс від мережі. Неоднозначно трактується національним правом і некомерційне розповсюдження такою мережею фільмів, музики, фотографій навіть за умови виконання ліцензійних угод. Блоги (щоденники, призначені для користувача Інтернет), персональні сторінки в юридичну категорію ЗМІ не входять, оскільки не володіють всіма ознаками ЗМІ: назвою і періодичністю. Мета надання безкоштовної інформації може бути різною, в тому числі і комерційною («інтернет-магазини», наприклад). Будь-яке підключення до мережі Інтернет чергового комп'ютера є автоматичним ухваленням правил і умов даного добровільного обміну інформацією.Інтернет складається з багатьох тисяч корпоративних, наукових, урядових і домашніх мереж. Об'єднання мереж різної архітектури і топології стало можливе завдяки протоколу IP (англ. Internet Protocol) і принципу маршрутизації пакетів даних. Протокол IP був спеціально створений агностичним відносно фізичних каналів зв'язку. Тобто будь-яка система (мережа) передачі цифрових даних, дротова або бездротова, може передавати і трафік Інтернету. На стиках мереж спеціальні маршрутизатори (програмні або апаратні) займаються сортуванням і перенаправленням пакетів даних, виходячи з IP-адресов одержувачів цих пакетів. Протокол IP утворює єдиний адресний простір в масштабах всього світу, але в кожній окремій мережі може існувати і власний адресний підпростір, який вибирається виходячи з класу мережі. Така організація IP-адресов дозволяє маршрутизаторам однозначно визначати подальший напрям для кожного найдрібнішого пакету даних. В результаті між окремими мережами Інтернету не виникає конфліктів, і дані безперешкодно і точно передаються з мережі в мережу по всій планеті. Аналіз останніх досліджень

Питання теорії та практики активізації пізнавальної діяльності частково знайшли своє відображення і в працях таких вчених, як: В. Зінченко, О. Тихомиров, Я. Пономарьов, Л. Занков, С. Бондар, В. Бондар, В. Паламарчук, Н. Менчинська, Б. Коротяєв, Д. Богоявленський, К. Кабанова-Меллер, Д. Ельконін, М. Махмутов, М. Данилов, М. Скаткін, Л. Кудрявцев І. Лернер, Л. Аристова, А. Тализіна, П. Гальперін, Н.Бібік, І.Бех, Л.Божович, І. Друзь, Н. Кудикіна, Р. Хабіб, О. Савченко [6, 7]. Пізнавальна активність – це основа підготовки до продуктивної діяльності, це й умова духовного розвитку особистості, й умова розвитку самостійності особистості, підвищення рівня її творчого потенціалу; пізнавальна активність є важливою умовою вдосконалення і одночасно показником ефективності освітнього процесу [5, 7]. Одним із напрямів підвищення ефективності навчання вчені вбачають впровадження web-технологій в освітній процес. Питанням еволюції та використання web-технологій в освіті та науці присвячені роботи вітчизняних дослідників В.Ю. Бикова, М.І. Жалдака, Н.В. Морзе, С.О. Семерікова, С.В. Співаковського, зарубіжних науковців Т. Бернес Лі, К. Нільсона, Д. Харіса [1-4]. Окремі аспекти проблеми використання та створення web-ресурсів досліджено у працях Л.І. Білоусової, Л.В. Брескіної, О.М. Гончарової, А.Ю. Кравцової, С.А. Ракова, О.І. Шиман. Використовуючи соціальні мережеві сервіси в освітньому просторі, дуже важливо, щоб мати не тільки знання, а й відповідні компетенції пошуку, систематизації, адаптації та використання освітніх web-ресурсів як для проектування освітнього процесу, організації пізнавальної діяльності, так і для підвищення кваліфікації в умовах самоосвіти.

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

1. Макропростір – це відстань між великими елементами. Вона використовується для: – побудови загальної композиції; – відокремлення різних елементів; – між колонками тексту; – у якості відступів; – у ролі простору всередині фактичних графічних зображень. Макропробіл значно впливає на візуальний потік, який або м'яко підштовхує, або примушує погляд користувачів рухатися, скеровуючи його туди, куди задумав дизайнер, і тим самим маніпулює їх підсвідомістю. Як правило, великі відстані мають більший вплив. В композиції веб-сторінки повинен бути присутній візуальний баланс, однак при використанні великої кількості білого простору порушуються принципи Гештальту і послаблюються відносини між об'єктами. Серед великої кількості веб-сайтів, що ілюструють це положення, для прикладу був вибраний сайт арт-директора Томаша Висоцького, де можна наочно побачити, як простір спонукає до взаємодії з користувачем. Білий простір, що оточує заголовок сторінки «Digital Art & Experiments» з обох сторін, активно впливає на увагу користувачів. Верхнє і нижнє меню мають меншу кількість вільного простору, завдяки цьому підкреслюється їх другорядне значення. Пробіл залучає увагу і одночасно спрощує дизайн. Мікропростір – це простір між більш дрібними елементами або елементами у великих елементах, які в композиції набувають самостійної цінності та сенсу [2-4]. 2. Мікропростір використовується для підкреслення чіткості типографіки, щоб користувач мав можливість відрізнити кожну букву, тобто гармонізує відносини між кожним елементом інтерфейсу. Отже, у принципах гештальту користувальницького інтерфейсу допускається розташування його елементів у безпосередній близькості один до одного для їх аналогічного функціонування. Мікропробіл витримується однаковим в різних місцях веб-сторінки, і вона стає більш читабельною, покращується сприйняття інформації, що розташована на ній. Макро- і мікропробіли є типами вільного простору, кожен з яких може бути використаний пасивно або активно. Це застосування залежить від контексту. Як було сказано вище, чим більше місця використовується, тим сильніше тяжіння. Але при великій кількості білого простору втрачається зв'язок з елементами в загальній композиції. Баланс у композиції веб-сторінки досягається завдяки взаємодії пасивного й активного простору. Отже, розглянемо способи використання вільного простору: 1. Пасивний простір. При недостатній кількості білого простору сприйняття контенту сайту ускладнюється, бо при цьому створюється зайвий візуальний шум, що утруднює навігацію. У такому разі користувачу треба докладати зусилля, щоб розібратися в безладі. Знімає цю проблему використання пасивного простору. У сайті Resonate можна подивитися на відстань між словами-посиланнями на верхній панелі навігації, на текст у нижній частині і відстань між буквами, словами та лініями, що розташовані таким чином, щоб не привертати уваги. Це пасивний простір. 3. Активний простір. Найближчий елемент, який оточує велика кількість білого простору, привертає увагу відвідувачів сайту. Наприклад, на сторінці сайту «1000» серед великої кількості елементів – навігаційних вкладок, піктограм соціальних мереж, посилань – найбільш явно виділяється образ «1000», що є композиційним центром. Завдяки його інтерактивності, що зменшує і відштовхау інші елементи в кути сторінки, простір навколо «1000» задіяний для ефективної взаємодії з інтерфейсом. Макропробіл у багатьох випадках активно використовується для привертання уваги до композиційного центру сторінки або для відокремлення більш важливих елементів. Він також може бути використаний з мікропробілом. Відомий британський графічний дизайнер Марк Болтон (Mark Boulton), пояснює таке використання у своїй статті «A List Apartpiece», де він показує застосування вільного простору в якості активної відстані навколо конкретної цитати або пунктах в межах блоку тексту для того, щоб привернути до нього увагу. Це є відмінним способом, що дозволяє сфокусувати погляд на найбільш корисних фрагментах контенту [3-8]. 4. Простір на веб-сайтах використовується по-різному залежно від змісту. Наприклад, головна сторінка може мати багато негативного простору, завдяки чому центр уваги зосереджується в основному на заклику до дії (кнопка завантаження або «Explore my work»).

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

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

Виклад основного матеріалу

Останнім часом інтернет-технології стали відігравати ключову роль не тільки в бізнесі, інформаційно-аналітичній діяльності, а і в освіті. Їх активне використання у навчанні стало можливим завдяки появі та інтенсивному розвитку web-технологій. Застосовувати комп’ютер можна як навчаючу систему допоможе засвоєння знань і швидше подолання прогалин у знаннях. За допомогою комп’ютера процес стає індивідуальним та інтерактивним, цікавим і сприяє розвитку пізнавальної активності. З використанням web-технологій інформація подається динамічно, яскраво, текст поєднується з малюнками та графіками, може використовуватися мультиплікація, відбувається взаємний вплив кольору і звуку, задіяно багато асоціативних зв’язків та органів чуття. А все це сприяє кращому засвоєнню навчального матеріалу. Все це разом позитивно впливає на емоційну і вольову сфери психіки, стимулює рухливість вищої нервової діяльності, розвиває увагу та точність. Ще одним позитивним моментом, пов’язаним із застосуванням комп’ютера в процесі навчання, – є зміна ставлення до своїх помилок. Під час виконання певних завдань, створених за допомогою web-ресурсів, помилки легко виправляються і вони починають виконувати свою основну позитивну функцію – не дають збитися з вірного шляху, а стимулюють до навчання. Дизайнер виправляє помилку і немає і в цих умовах вони не мають наслідків. Саме web-технології змінюють шляхи співробітництва, спілкування та взаємодії, дозволяють користувачам не тільки отримувати інформацію, але і створювати її самим, самостійно опановувати новітні технології [1, 5].Оскільки у нас є обмежений простір для вивчення широкого спектру доступних веб-технологій, ми вибрали кілька, які найчастіше використовуються як початківцями, так і експертами в цій галузі.

Веб-технології діляться на наступні розділи: 1. Основи, які охоплюватимуть веб-браузери та деякі основи розробки веб-додатків 2. Мови програмування та фреймворки, які використовуються при розробці веб-сайтів 3. Бази даних, які використовуються на сервері для зберігання даних, необхідних або зібраних веб-сайтами 4. Деякі протоколи, тобто правила спілкування в Інтернеті 5. Графічні, аудіовізуальні та інші мультимедійні елементи. Деякі формати даних, які зазвичай використовуються для передачі даних через Інтернет 7. Інші різні веб-технології Веб-браузери, які просто називають браузерами, дають нам змогу переглядати всі ресурси, що є частиною Всесвітньої мережі. Вони засновані на архітектурі клієнт-сервер. У цьому випадку клієнтом є браузер. Можна сприймати сервер, як комбінацію програмного та апаратного забезпечення, яке приймає запити клієнта, а потім надсилає запитуваний ресурс клієнту. Щоразу, коли вводиться URL-адреса в адресний рядок вебпереглядача, він передає запит серверу, а потім отримує та відображає те, що користувач просив. Деякі популярні веб-браузери - Opera, Mozilla Firefox, Google Chrome та Safari.

Технології відіграють важливу роль у нашому повсякденному житті. Вони оточують нас і потрібні нам для виконання простих завдань і спрощення нашого життя. Усе програмне забезпечення, яке ми використовуємо, виготовляється розробниками програмного забезпечення програмістами. Однією з таких важливих технологій є веб-розробка. В нашу епоху інтернет-розвитку, веб-технології стали вкрай потрібними для людей. В процесі веб-розробки, створюють веб-сторінки та програми для користування в Інтернеті. Веб-розробка не обов'язково фокусується на дизайні веб-сайту; швидше, це стосується в основному частини програмування та кодування, що є основною складовою функціонування веб-сайту. Це стосується розробки та обслуговування веб-сторінок, включаючи такі поняття, як веб-дизайн, веб-програмування, веб-публікація та управління базами даних. Він включає різні типи засобів та методів створення веб-контенту, такі як текстові редактори для ручного редагування веб-сайтів, Dreamweaver для розробки веб-сторінки, використання веб-сайту для ведення блогу, для оновлення блогів тощо. Починаючи від базових і простих веб-сайтів, закінчуючи складними веб-додатками та платформами соціальних медіа, а також від численних веб-сторінок, що дають змогу здійснювати покупки в Інтернеті, і закінчуючи навіть системами управління контентом (CMS). Усі онлайнінструменти та веб-сайти, якими ми регулярно користуємося, є частиною веб-розробки. Крім того, всі ці інструменти та веб-сайти створені веброзробниками.

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

Веб-розробка - це кодування або програмування, що забезпечує функціональність веб-сайту відповідно до вимог власника. В основному мова йде про недизайнерський аспект побудови веб-сайтів, який включає кодування та розмітку. Веб-розробка варіюється від створення простих текстових сторінок до складних веб-додатків, соціальних мереж та електронних бізнесдодатків. − Ієрархія веб-розробки така: − Кодування на стороні клієнта; − Кодування на стороні сервера; − Технологія баз даних. Більшість веб-розробників використовують для розробки веб-сайтів мову розмітки гіпертексту (HTML), каскадні таблиці стилів (CSS) та мову програмування JavaScript. Гіпертекстова мова розмітки (HyperText Markup Language), яку частіше називають HTML, - це місце, де розпочинається веб-сайт. Це найважливіша складова всіх уроків, які охоплюють основи роботи в Інтернеті. Це мова клієнта, яка використовується для кодування інтерфейсу веб-сайту. Це допомагає розробникам визначити структуру веб-сторінки, і робить це за допомогою елементів, які ідентифікуються тегами. HTML визначає базову структуру веб-сайту - основу, на якій базується все інше. Він формує блоки, які визначають макет сторінки, формат та критичні компоненти. Хоча теоретично можливо розробляти веб-сайт лише у форматі HTML, це буде просто сайт без функціональної сторони, якщо він не розширений за допомогою CSS та JavaScript. Крім того, навіть такі прості модифікації стилю, як зміна кольору кнопки, 98 вимагають великої кількості коду, який виконується не лише за допомогою HTML. Кожен елемент, укладений у дужки < >, є елементом структури основи сайту. Однак DOCTYPE - це лише декларація, яка повідомляє браузеру, що те, що він збирається завантажити, - це документ HTML. Елемент визначає весь вміст, який утворює тіло документа. Вони вказують, де закінчуються текст, заголовок та абзац. CSS - одна з найбільш фундаментальних технологій дизайну вебсайтів. Щоб ще більше прикрасити веб-сторінки, можна інтегрувати CSS (каскадні таблиці стилів) у свій HTML-код. Процес застосування певних стилів до певних елементів HTML-коду може перетворитися на повторюване завдання. Для економії часу та енергії CSS можна використовувати для впорядкування процесу стилізації сторінок на всьому сайті. CSS використовується для стилізації вмісту веб-сайту. За кожним елементом або тегом сайту, закріплений той чи інший набір CSSінструкцій. Кожна із цих інструкцій, відповідає за зовнішні зміни того самого елементу, за яким вона закріплена. Усі стилістичні зміни кольорів, форм, зовнішнього вигляду – саме за це відповідає CSS. Мова програмування JavaScript використовується для того, щоб подбати про інтерактивність багатьох унікальних елементів веб-сайту. З його допомогою можна створювати ефекти, які змінюють зовнішній вигляд піктограм та випадаючих меню, додають анімацію, ігри та інші інтерактивні елементи. Вперше JavaScript було створено в 1995 році. Сьогодні він улюблений розробниками по всьому світу. Зараз це життєво важливий компонент веб-розробки, який допомагає створювати динамічні елементи веб-сторінок. Введення JavaScript привело до революційної хвилі інтерактивних веб-сторінок. Сьогодні включення графічних елементів, інтеграція баз даних та загальна динаміка веб-сайту можливі завдяки появі JavaScript. Хоча JavaScript спочатку був представлений як інтерфейсна мова розробки, зараз він стає популярним вибором і для внутрішньої розробки.

За умов масової комп’ютеризації важливого значення набуває ефективне використання інформаційно-комунікаційних технологій. Значна роль належить web-технологіям. Метою роботи є дослідження сучасних вебтехнологій та принципу їх роботи, порівняння з веб-технологіями минулого, вивчення питання ролі front-end розробки в формуванні сучасних веб-технологій, дослідження всіх аспектів сучасної front-end розробки та перспективи розвитку веб-простору. Результати дослідження. Веб-розробники, як правило, поділяються на розробників зовнішнього інтерфейсу (front-end developer), розробників 99 внутрішньої частини (back-end developer) та розробників, які володіють навиками і тих і інших (fullstack developer). Front end стосується всіх тих частин веб-сайту, які користувач може бачити на своєму екрані та взаємодіяти. Back end стосується прямо протилежного цьому. Він включає приховані механізми, які роблять функцію веб-сторінки. Типовий користувач, як правило, не знає, що відбувається у серверній системі. Fullstack-розробники, здатні виконувати одночасно і інтерфейсні, і серверні завдання. Веб-протоколи - це деякі заздалегідь визначені правила, яких повинен дотримуватися кожен, хто спілкується через Інтернет. Протокол передачі гіпертексту (HyperText Transfer Protocol), більш відомий як HTTP, - це веб-протокол, який визначає два поняття: − Як клієнтські запити передаються на сервери − Як сервери реагують на запити клієнтів У запиті повинні бути зазначені наступні чотири пункти: 1. URL-адреса ресурсу, який бажає клієнт 2. Метод, такий як GET (який використовується для отримання даних із сервера) або POST (який використовується для надсилання даних, які потрібно оновити на сервері) 3. Список заголовків (заголовки запитів можуть містити різну інформацію про клієнта або ресурс, який вони запитували, наприклад, ім’я браузера клієнта, операційну систему, розмір повідомлення, час і дату запиту, інформацію про контроль доступу / дані тощо) 4. Тіло, яке містить інформацію, яку клієнт хоче надіслати на сервер Після обробки запиту сервер надсилає відповідь з іншого кінця. Ця відповідь визначає три елементи: 1. Код стану у формі тризначного номера (Код стану, який ви могли бачити під час щоденних сеансів веб-перегляду, -, що вказує на те, що запитаний ресурс не вдалося знайти.) 2. Список заголовків (заголовки відповідей за структурою нагадують заголовки запитів і можуть містити таку інформацію, як розмір повідомлення, тип вмісту тощо). 3. Тіло, яке містить інформацію, яку клієнт запитував від сервера Всесвітня павутина зростатиме з дивовижними темпами, включаючи більшу кількість людей, пристроїв та ресурсів, доступних в Інтернеті. Тому очікується розширення веб-технологій. Отже, технічні фахівці будуть 100 прагнути до того, щоб забезпечити доступний веб-вміст для користувачів скрізь. Для захисту приватного веб-вмісту від зловмисних кібератак доведеться вжити більш жорстких заходів безпеки. WWW розпочався як Web 1.0 зі статичними веб-сторінками, написаними простим старим HTML. Потім він перейшов до Web 2.0 з появою JavaScript та інших технологій, що дозволило користувачам взаємодіяти з веб-контентом та створювати власні. Незабаром Інтернет піде на крок далі і вступить у свою третю фазу, тобто Web 3.0, яка буде набагато децентралізованішою, ніж сьогодні. Сучасні технології, такі як AI та IoT, незабаром домінуватимуть в Інтернеті. Все буде набагато автоматизованіше як з точки зору розробки, так і споживання нового контенту. Висновки. В результаті проведеного аналізу та досліджень, можна зробити такі висновки, що в сучасному світі інтернет-технологій, веброзробка, являється одним з провідних методів розробки програмного забезпечення. Веб-розробка – займає лідируючі позиції в списку технологій розробок, за рахунок універсальності для всіх можливих девайсів, починаючи від сучасних full hd телевізорів і закінчуючи портативними смартфонами. В свою чергу веб-розробка, як технологія, складається з двох складових, сторони інтерфейса (front end) та серверної сторони (back end). Кожна із цих частин веб-розробки представляє свою цінність і не може утворювати повноцінну веб-технологію поодинці. Front end, як частина веб-розробки, яка відповідає за те, що побачить користувач перед собою, заслуговує особливої уваги, оскільки кожен frontend розробник повинен бути не просто програмістом який пише код, а і, свого роду, митцем, здібним побачити проєкт правильно, поставити себе на місце користувача і дати собі відповідь на запитання «Чи приємно і комфортно користувачу буде працювати з сайтом?». З усього вищесказаного, можна сміливо зробити висновок, що інтернет-технології зараз знаходяться в етапі розквіту і основні етапи ще попереду. Оскільки сучасна технологічна обстановка в світі гостро потребує якісної веб-розробки, це означає, що попит на спеціалістів такого направлення, як front end не спадатиме, а отже не спадатиме попит і на якісні онлайн-курси з цього напрямку. В наш час швидкісного і якісного інтернету та зайнятих людей, які б хотіли пізнати всі ази front-end розробки, але банально не мають вільного часу або бажання для того, щоб мати значення і опанувати професію мрії. Відомо, що стандарти та тенденції веб-розробки front end змінюються швидше, ніж їх можна впровадити. Тому розробникам дуже важливо бути в курсі останніх мов програмування, фреймворків та технологій, щоб залишатися актуальними та конкурентоспроможними у галузі, що постійно розвивається. Подібні онлайн-курси, дають змогу надолужити пропущене, посилити свої слабкі сторони, заповнити пробіли і стати професіоналом своєї справи. Без сумніву, онлайн-курси це теперішнє і майбутнє освітнього процесу, особливо для людей які хочуть освоїти щось нове, але мають на це не так багато часу. Основний плюс подібних курсів заключається в тому, що здобувати знання і навички людина повинна сама, для цього людині потрібні бажання і розуміння того, що це дійсно потрібно, а це, в свою чергу, і є ключом до успішного здобуття і засвоєння будь-яких знань і навичок.

Використання різних електронних дидактичних матеріалів дозволить вчителю: • індивідуалізувати та диференціювати освітній процес; • посилити мотиваційний компонент навчання за рахунок використання різних видів діяльності та різних джерел інформації; • активізувати пізнавальну діяльність; • діагностувати помилки і оцінки результатів; • візуалізувати навчальну інформацію; • відповідати індивідуальному темпу роботи учня; • тестування засобами Google Форми • цілеспрямовано розроблені завдання за допомогою webресурсів для використання в освітньому просторі • спілкування через електронну пошту, ведення особистих блогів, участі в семінарах та вебінарах для колективного вирішення проблем • пошук в мережі і надає можливості вчителю та учню знаходити матеріал для розв’язання проблем, які виникають під час освітнього процесу Елементи дистанційного навчання Електронний дидактич ний матеріал • формувати інформаційно-цифрову компетентність; • забезпечувати швидкий доступ до інформації. Сучасний Інтернет пропонує багато ресурсів для використання в освітніх цілях. Звичайно, така інформаційна база має бути використана професійно і раціонально. Це вимагає, насамперед, усвідомлення значущості такого потенціалу і активне використання інтернет-ресурсів в діяльності для досягнення значиміших результатів.

Висновки

Працюючи в напрямку пошуку найбільш ефективних технологій для формування і розвитку пізнавальної активності, дійшли висновку, що саме впровадження web-технології є одним із засобів формування ключових компетентностей, необхідних для успішної діяльності учасників освітнього процесу. У користувальницькому інтерфейсі використовуються закони гештальта: об'єкти для більшої близькості з'являються в одній композиційній, коли білий простір діє, як візуальний сигнал. При дослідженні було виділено основні принципи й особливості застосування вільного простору у веб-дизайні: 1. Особливості просторового дизайну. Композиція гештальт у веб-дизайні – це сайт як єдине ціле, що існує від взаємодії суми його частин. Сайт Themes Kingdom є гарним прикладом гармонійного розташування різнорідних просторових елементів, які використовуються для різних цілей. Негативний простір перебуває між верхньою навігаційною панеллю та відчувається більш компактним, ніж простір між елементами блоку в нижній частині головної сторінки. Навігаційні посилання розташовуються в панелі навігації, текст зменшено на декілька пунктів, і посилання є частиною заголовку. Також сайт Themes Kingdom використовує багато зв'язків з додатковою нижньою панеллю на сторінці. Ці посилання є більш досконалими та задіюють більше простору в порівнянні з верхньою навігаційною панеллю. Навігаційні посилання менші, вони мають вигляд однієї великої панелі посилань. Білий простір згрупованих елементів використовується для передачі подібності посилань. Для утворення зв’язку елементи перебувають у тісній близькості один від одного Якщо, наприклад, взяти різні посилання теми «Категорії» безпосередньо під заголовком, то вони є химерні за рахунок тонких ліній іконок, застосованих для естетичної привабливості. Мікропростір між текстом і зображеннями, використання контрастної кольорової палітри привертає увагу відвідувачів до галереї із зображеннями, оскільки нічого більше від неї не відволікає. Мала кількість технічних посилань, кнопок або контенту, де користувач спостерігає інтерактивні елементи, сприяє зникненню зайвого візуального шуму. Зовнішня структура — це розташування основних важливих елементів на кожній сторінці. Треба вирішити, де і як буде розташовано меню, можливо, пошук, основний зміст, певні анонси про нові розділи сайту, оновлення, лічильник та банери, якщо вони передбачені на сайті. Під час розробки зовнішньої і внутрішньої структури орієнтуються на те, щоб в майбутньому відвідувачеві було легко орієнтуватися на сайті, щоб легко знаходилася важлива і потрібна інформація. Тому, перш ніж братися за розробку структури сайту, потрібно вивчити ресурси з подібною тематикою і подивитися, як вирішено це завдання там. Тобто потрібен зразок, причому цей зразок має бути вибраний з поміж багатьох сайтів. Оформлення або дизайн — це зовнішній вигляд сайту. Перше враження від сайту є дуже важливим, бо від нього залежить чи залишиться відвідувач, чи знайомитиметься з інформацією, яку йому пропонують, або закриє вікно з цим сайтом і назавжди забуде про його існування. Оформлення сайту підказує відвідувачеві, куди він потрапив: чи це є корпоративний сайт певної компанії, або інформаційний портал, або літературний сайт, або щось ще. Оформлення допомагає відвідувачеві орієнтуватися по сайту, а може, і навпаки, збити відвідувача так, що навіть при добре розробленій структурі відвідувачеві важко буде зорієнтуватися. Від оформлення залежить багато що — візуальна інформація є не менш важливою, ніж текстова, яка потім наповнить сайт. Не вірте, що дизайн — це справа смаку: що хочу, то і зроблю. Дизайн — це ціла наука. Щоб опанувати їй, доведеться ознайомитися з такими поняттями, як колористика (теорія кольору), композиція, шрифт, і багатьма іншими. Дизайн підпорядкований усталеним законам і правилам, і дизайн сайту — не виключення. Крім теорії потрібно буде також опанувати багатьма програмами, для втілення задумок в життя. Оформлення сайтів виявляється складною наукою: багато чого треба вміти і багато чого знати, щоб створити якісний дизайн для сайту. Кодинг і програмування. Тепер маємо оболонку (макет зовнішнього вигляду сайту) і план дій (структуру). А за оболонкою знаходиться каркас, на якому ця оболонка тримається, це є код сторінки. Він відповідає за те, як в певній послідовності на сторінці відображається текст і картинки. Мова HTML є основною при створенні документів, що розміщуються у World Wide Web. Завдяки мові розмітки користувач Web може у себе на екрані переглянути документ у тому вигляді, в якому його задумав розробник: із визначеними розмірами шрифту і розбивкою на абзаци, із заданими розмірами і розташуванням малюнків, із виділеними словами, посиланнями тощо. HTML — набір угод для розмітки документів, що визначають зовнішній вигляд документів на екрані комп'ютера при доступі до них із використанням програми браузера. Документи, підготовлені мовою HTML, називаються HTML-документами. Уявити, як виглядає код HTML-документа, ви зможете, якщо завантажите документ у браузер і виконаєте команду Вид — В виде HTML (в браузері Internet Explorer). У вікні Блокнот ви побачите код поточного документа.HTML-документ (або веб-сторінка) — це звичайний текстовий файл із розширенням htm або html, складений мовою HTML, який містить відомості для публікації в World Wide Web.Код HTML дуже компактний, і HTML-документи мають значно менший розмір, ніж документи, підготовлені в текстових редакторах типу Word. Це одна з основних причин широкого застосування мови HTML для кодування повідомлень, що розповсюджується по Інтернету. HTML-документи розміщаються в WWW не поодинці, а у виді сайтів. Кодинг і програмування є також достатньо складним етапом в створенні сайту. Від того, хто розробляє програмну начинку сайту, і пише код сайту, також як від дизайнера, потрібні хороші, тверді знання і досвід, для створення якісного комерційного і серйозного проекту. Проте, якщо йдеться про любительські проекти і домашні сторінки, то вимоги тут пом'якшуються. Тестування і доопрацювання. Коли сайт готовий, його викладають в мережу (Інтернет). Для цього потрібно зареєструвати для сайту доменне ім'я (адреса), і визначитися з хостингом (місце на сервері провайдера, де буде знаходитися сторінка). Процедура розміщення сайту в Інтернет не дуже складна, дізнатися все про це можна в Інтернеті.Коли сайт розміщено в Інтернеті, то перш, ніж його просувати і рекламувати, слід перевірити сайт на працездатність. Можливо, якісь скрипта виконуються з помилками. Можливо, десь пропущена важлива і цінна інформація або потрібна картинка.Після того, як протестовано і вивірено сайт на працездатність, слід попросити людей, що не брали участь в розробці, ще раз протестувати і оглянути ваш сайт. Можливо, що не помічено певних недоліків, які може побачити свіжим поглядом, людина, що не брала участь в розробці. Також можна провести дослідження за допомогою опитування: що подобається або не подобається відвідувачам на сайті, чи зручна навігація і т.д.Даний пункт в житті сайту достатньо важливий: здавалося б, подумаєш — дрібниці. Проте коли таких дрібниць накопичується багато — це дуже погано. Що зробить відвідувач, якщо не зможе додати запис у форум, або якщо стаття, що цікавить його, буде не доступна, внаслідок того, що до неї неправильно прописали шлях? Правильно, він може піти і більше не повернутися.

Просування, реклама.

Цей етап доведеться виконувати з певною періодичністю, щоб на сайт приходили нові відвідувачі. Кількість і постійний потік відвідувачів на сайт не залежить цілком від реклами, основну роль все ж таки грає наявність цікавої для певної групи людей інформації, заради якої вони і відвідуватимуть ресурс.Перш, ніж зайнятися рекламою сайту, варто подумати — а чи потрібно це? Якщо потрібно, то навіщо. Що зміниться від того, що на сайті стане десятком відвідувачів більше?Якщо це все-таки потрібно, слід продумати, яка аудиторія зацікавлена у ресурсі (вік, стать, професійна зайнятість цієї аудиторії — наприклад, програмісти вони або вчителі, люди похилого віку або діти). Після визначення аудиторії, треба з'ясувати її уподобання: які сайти відвідує, які журнали читає, і т.д. Там слід розставити посилання: розмістити рекламу в журналі або газеті, на потрібних сайтах. Краще всього дослідження аудиторії і рекламу сайту довірити професіоналам, які ретельно продумають рекламну кампанію, і в них краще вийде виконати поставлене завдання в рамках бюджету. Адже реклама теж вимагає певних знань і грошових вкладень, це не такий вже простий етап, як може показатися спочатку. З безкоштовних шляхів рекламування ресурсу: каталоги, пошукові системи, банерообмінні мережі, а також схвальні відгуки про сайт на сторінках інших людей. На жаль, безкоштовно розкрутити свій ресурс дещо важко, але все-таки можна, головне запастися терпінням, адже на безкоштовне просування ресурсу знадобиться дуже багато часу і сил. Природно, є і інші безкоштовні технології просування сайту, як спам або накрутка — але хотілося б застерегти від використання даних методів. Ефект від них тимчасовий, дані способи є чорними, тобто такі способи не вітаються рейтинговими і пошуковими системами і можуть спричинити виключення сайту з рейтингів і блокування в пошукових системах. Докладніше про методи просування і реклами сайту можна прочитати в Інтернет.

Подальша підтримка і оновлення.

Яким би хорошим не був сайт, його слід періодично поповнювати новою інформацією, щоб не втратити відвідувача. Підтримкою і оновленням комерційних сайтів, як правило, займається теж фахівець: веб-розробник. З одного боку це універсал, від якого потрібні знання як працювати з графікою (поверхневе), хороші знання в області кодингу (html, css) і знання мов програмування (поверхневе); з іншого боку веб-розробник не має глибоких знань ні в області програмування, ні в області дизайну, тобто не може замінити ні дизайнера, ні програміста при розробці серйозного комерційного ресурсу. Підтримкою ж особистих проектів доведеться займатися самостійно, правда, з часом, якщо ресурс хороший, можуть з'явиться помічники-добровольці. Але, відвідувача цікавить не лише нова інформація. Важливо також підтримувати зв'язок з відвідувачами: спілкування на форумі або в гостьовій книзі, які розташовуються на сайті, по можливості, відповідати на всі листи відвідувачів. При розвитку ресурсу іноді необхідно орієнтуватися на думку відвідувача. Потрібно відстежувати за сайтами з подібною тематикою, і прагнути бути на належному рівні. Відстеження за тенденціями в дизайні і новими технологіями: те, що було добре декілька років тому, сьогодні може виявитися застарілим і безглуздим, можливо прийде такий момент, коли оформлення сайту доведеться змінити, і його начинку також. Програми, що потрібні для web-мастерингу. Для виготовлення професійних сторінок доведеться вивчити декілька професійних програм.Візуальні редактори дозволяють швидко розробляти web-сторінки і корегувати вже написані, але з ними потрібно бути обережними, оскільки, завдяки саме їм, сторінка може погано відображатися в браузері.Найвідомішим є DremWiever, але зрештою можна використовувати те, що більше подобається. Часто згодом доводиться вручну виправляти код, що був згенерований даними програмами.Програми обробки растрової графіки — це одні з найважливіших програм, які доведеться освоїти. Вона нададуть змогу веб-розробнику здійснити:Сканування фотографій;Корекція відсканованих і готових фотографій, зокрема — тонова і колірна корекція; Ретуш фотографій;Розуміння відмінностей у форматах графічних файлів;Грамотне використання фільтрів; Як конкретні програми можна привести наступні:Adobe PhotoShop — дана програма є лідером в області графічних програм такого роду. Adobe ImageReady — підтримує фільтри від Adobe PhotoShop і є незамінною для створення анімованих Gif-зображень.Ідеальних редакторів немає, деякі краще роблять одне, деякі — інше, тому для складніших або специфічних завдань можна використовувати інші програмиПрограми обробки векторної графіки — це ще одні з важливих для дизайнера програм. Дозволяють створювати з нуля або з використанням клипартів різні логотипи, кнопки, ефектні написи і т.п. речі. Принципи векторних редакторів сильно відрізняються від растрових, тому освоювати їх доведеться окремо. Але, освоївши їх, можна виготовляти фірмові візитки, бланки, брошури. Конструювання односторінкових сайтів вимагає дотримання законів композиційного балансу та грамотного використання білого простору. У сайті Drew Wilson загальна композиція тримається на гармонійно об’єднаних компонентах: типографіці, кольорі, просторі, анімації та інших компонентах. 2. Прагматичне застосування. Кожен веб-сайт є унікальним і вимагає використовувати різні методи проектування, що взаємодіють один з одним. Під час дослідження було виявлено декілька правил прагматичного застосування білого простору: – Різноманітність. Деякі області можуть менше потребувати білого простору, а іншим його потрібно набагато більше. – Пріоритет чіткості та читабельності. На початку проектування створюється список компонентів інтерфейсу для оцінки масштабів змісту контенту [1-5]. На наступному етапі потрібно створити прототипи контенту та оцінити, скільки місця потрібно для розбірливості та читабельності [2-6]. – Заповнення вакууму. Використання контрастних кольорів, різний розмір шрифту, асиметричний пробіл, що надає стильність веб-сторінці [3-7]. Білий простір є елементом дизайну, реактивно впливає на сприйняття всіх навколишніх елементів. Прагматичний пробіл створює структуру навколо контенту, який має важливе значення для успіху будь-якого проекту [1-4]. Чим більше білий простір використовується, тим більш мінімалістичною стає сторінка сайту, тому що при проектуванні сайту виникає потреба видалити зайві елементи для запобігання хаосу. Для досягнення мінімалізму у веб-дизайні застосовуються «сума елементів» і «сприйняття розкоші». 3. Сума елементів. Чим менше елементів на сторінці, тим потужнішою стає вплив кожного окремого елемента. Якщо є тільки один елемент на сторінці, навіть захований в кутку, він стане єдиним візуальним центром для користувача. Якщо є багато дрібних елементів, користувачі втомлюються або просто відмовляються від пошуку потрібної інформації, відчувають себе безпомічними [4-7].

Типовими представниками даного класу є Corel DRAW і Adobe Illustrator — обидва є лідерами в своїх областях і, відповідно, мають останні досягнення в області векторної графіки. На противагу ним можна порадити програму Corel Xara. Ця програма, на відміну від двох попередніх, є швидкою і маленькою, але деякі ефекти і дії, що є доступними в інших програмах, у ній зробити неможливо.

Програми переглядання web-сторінок — це браузери — у даний час популярними є три браузера — це Microsoft Internet Explorer, Opera та Mozilla FireFox. Для контролю зовнішнього вигляду сторінок доведеться скористатися власне ними. Якісна веб-сторінка повинна однаково виглядати в будь-якому з цих браузерів. Простий текстовий редактор знадобиться для ручного виправлення і додавання HTML-коду, оскільки існуючі візуальні редактори не можуть повністю контролювати процес створення web-сторінки. Як приклад підійде звичайний Блокнот із стандартного постачання Windows або один HTML-редакторів, які мають вбудовані команди на перевірку правильності тегів і структури документів.Текстовий процесор потрібен для набору тексту, перевірки орфографії і виправлення помилок в розпізнаних текстах. Як приклад — звичайний Microsoft Word.

Програми розпізнавання тексту можуть заощадити багато часу, позбавляючи від ручного набору надрукованих текстів. Найпоширенішою програмою є Fine Reader, що розпізнає багато мов, має дружній інтерфейс і забезпечує ефективну та зручну роботу.Спеціалізовані програми дозволять виконати певні ефекти і справитися з такими завданнями, які іншими способами не можливо виконати. Ulead GIF Animator — програма для створення анімованих GIF-зображень. Має потужні засоби оптимізації.Фільтри для Adobe PhotoShop — їх кількість просто величезна, але реально знадобиться небагато. Вони здатні істотно підвищити роботу і двома-трьома натисненнями створити вражаючі ефекти.Macromedia Flash — стандарт для використання в web анімованих зображень. Має власне середовище розробки і дозволяє створювати вражаючу векторну анімацію.3D-nporpaMMbi — створення тривимірних композицій і експортування в графічні формати, що застосовуються у веб. Як приклад — 3D Studio Max.

Програми для обробки звуку — можуть знадобитися, якщо того вимагає сторінка. Це програми взагалі окремого класу, але для простої обробки звуку, наприклад, підійде CoolEdit. Це далеко не повний перелік програм для створення веб-сторінок. Не всі з них, звичайно, потрібно відразу ж мати, щоб почати писати свої сторінки. Для початку достатнього певного візуального редактора, а вже у міру накопичення досвіду долучаються й інші програми[1-4].О.Бовкун, як варіант, пропонує використати для створення персонального сайту унікальну систему "Ucoz". По-перше, ця система має україномовний інтерфейс, а отже, немає необхідності замінювати стандартні назви сторінок та розділів. По-друге, персональний сайт на початковому етапі свого існування має солідний розмір —Мб, якого вистачає для сайту навчального призначення. Єдина вимога, яка висувається до власників сайтів, — сайт повинен бути діючим. Тобто, власник сайту повинен його використовувати, змінюючи або доповнюючи інформацію, хоча б раз на 40 днів. Ця вимога мотивує власника сайту дбати про своє "творіння".

Персональний веб-сайт може виконувати наступні функції: • • створення навчального міні-середовища; • • поширення власного педагогічного досвіду; • • підвищення власного фахового рівня; • • підвищення рівня володіння засобами ІКТ; • • можливість зробити навчально-виховний процес гнучкішим за рахунок більш мобільного управління; • • розміщення навчальних матеріалів (програм, планів, контрольних запитань до заліку та тематичного оцінювання); • • допомога учням у самостійній роботі та підготовці домашнього завдання; • • можливість для учнів на відстані отримувати навчальний матеріал; • • спілкування учнів з однокласниками та безпосередньо з учителем. Використання персонального сайту дозволяє вчителю підвищити ефективність й результативність навчального процесу, підсилити освітні ефекти від застосування інноваційних та традиційних методик навчання, оскільки створюється можливість будування індивідуальних освітніх траєкторій учнів і забезпечується диференційований підхід до учнів з різним рівнем готовності до навчання[4-7].

Перспективи подальших досліджень.

Матеріали даної роботи можуть бути використані у своїй роботі за програмою Р. Шияна. А також можуть спонукати для створення власного сайту та електронних дидактичних матеріалів. Тому надалі буду продовжувати опановувати інші web-ресурси, щоб відповідати сучасним вимогам компетентного вчителя. Найпростіший спосіб збільшити білий простір у сайті – це зменшення кількості елементів на сторінці. Сайт для італійського модного бренду Voghi є успішним прикладом цього. На екрані є тільки два інтерактивні елементи: меню «гамбургер» з лівого боку і стрілка внизу. Контактна інформація згорнута праворуч, відсутність конкуруючих візуальних елементів дає можливість зосередити увагу на чудовій графіці, яка потім переключає користувача на стрілки. 4. Сприйняття розкоші. Мінімалізм став синонімом розкоші. Його використання асоціюється з вишуканістю та елегантністю. Сприйняття розкоші має пряме відношення до кількості білого простору: – великий білий простір розглядається як розкішний, високого класу, або елегантний, і, таким чином дорогий; – врівноважений пробіл збалансовано виглядає у візуальному потоці; – маленький білий простір викликає як безлад, так і нескоординованість, розсіювання уваги, зорове перевантаження. Для доказу вищесказаного можна навести порівняння сайту моди Voghi і сайту Amazon (Рис. 9). Amazon є більш метушним, та при цьому включає в себе більше можливостей навігації та акцій. Обидва сайти продають високоякісні модні товари, але користувачу легше зорієнтуватися на сайті, що має менше візуального шуму. Це відноситься і до макро- та мікропростору, але мають значення самі зображення, які використовуються на сайті у якості інформації. Проаналізувавши фотографії веб-сайтів індустрії моди, було відмічено, що застосовується більше артистизму, ніж, наприклад, у веб-сайті електроніки. Отже, у веб-дизайні за допомогою використання одного із фундаментальних художніх принципів відбувається гармонізація віртуального середовища. Влада білого простору виходить далеко за рамки використання його в якості засобу композиції і може бути використана стратегічно для бізнес-цілей, тісно пов'язаних із системою взаємодії «користувач-інтерфейс». На мінімальному рівні його використання полегшує основні комунікативні функції сайту, такі як читабельність і навігація. Але розумне використання білого простору перетворює прості інтерфейси в конструкції, що успішно взаємодіють із користувачами.

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

Список використаних джерел

1. Lerner T. How to Eectively Use Whitespace in Web Design. [Електроний ресурс]. / Tomer Lerner. (Дата: 17.02.2016) 2. White, A.W. «Elements of Graphic Design» [Текст]. / Alexander W. White. – Allworth Press,U.S. 2011. — 224 р. 3. Лозова В.І. Цілісний підхід до формування пізнавальної активності школярів / Харк. держ. пед. ун-т ім. Г.С. Сковороди. – 2-е вид., доп. – Харків: «ОВС», 2000. – 164с. 4. Гото Келлі, Котлер Емілі. Веб-редизайн, 2-е видання. – СПб. : «Символ-Плюс», 2006. – С. 416. 5. Марко Беллиньясо. Розробка Web-додатків в середовищі ASP.NET 2.0: завдання - проєкт - рішення = ASP.NET 2.0 Website Programming: Problem - Design - Solution. – М. : «Діалектика», 2007. – С. 640 6. Оліщук Андрій Володимирович.Розробка Web-додатків на PHP 5. Професійна робота. – М. : «Вільямс», 2006. – С. 352. 7. Campbell, Jennifer (2017). Web Design: Introductory. Cengage Learning. p. 27.

Для студентів старших років навчання. Основною метою є ознайомлення студентів з основами проведення наукових досліджень. Огірко І.В.