28_matvienko-web

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

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

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

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

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

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

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

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

Графіки як форма подання інформації мають такі переваги:

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

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

Діаграма як форма представлення інформації ефективна у випадках, коли

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

Таблиці раціонально застосовувати у випадках, коли між двома або більшим числом параметрів встановлений однозначний функціональний

81

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

Існує кілька ключових правил використання фонового кольору і зображень:

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

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

-складні фонові зображення різко знижують прочитуваність тексту і дратують користувача.

Графічним елементам, які включаються до Web-сторінок, за допомогою

існуючих пакетів графічних програм, таких, як Photoshop, можна надати ефектів, які допомагають користувачу сприймати інформацію:

-тіні, які розташовуються під текстом і графікою і надають сторінці ефекту тривімірності;

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

- зображення з трасованими променями –	надають враження
об’ємності.
Web-сторінки повинні виглядати в одному стилі –	кожна сторінка вузла

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

Оптимізація пошукових характеристик HTML-документа

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

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

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

зяких має різне значення. Можна виділити такі частини документа:

−заголовок (тег <TITLE>);

−URL-сторінки;

−<META>-тег;

−посилання;

−заголовки;

−ALT-текст;

−власне текст сторінки.

Для того, щоб WEB-ресурс з’являвся на початку лістингу результатів пошуку, необхідно дотримуватись таких загальних правил:

-на сторінці має бути текст. Сторінка з недостатньою кількістю

82

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

-базові поняття і ключові слова документа слід включати у HTML-

теги (у порядку значущості): <TITLE>, <H1>-<H6>, <ADRESS>, <B>,<STRONG>. Чим частіше слово зустрічається у комбінації цих полів, тим більша вірогідність, що пошукова система знайде документ і розташує його ближче до початку списку результатів;

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

-необхідна наявність посилань на внутрішні сторінки, оскільки пошукові машини відшукують сторінки за гіпертекстовими посиланнями – чим більше посилань всередині “ дерева” документів на Web-сайті, тим більша вірогідність, що всі сторінки будуть проіндексовані;

-важливо, щоб ключові слова, зазначені в заголовку і <META>-

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

83

РОЗДІЛ 19. ВИКОРИСТАННЯ JAVA-СКРИПТІВ

ПРИ СТВОРЕННІ HTML-ДОКУМЕНТА

При розробці сучасного сайта не завжди можна обійтись лише можливостями мови розмітки HTML. З метою надання Web-сторінкам привабливого вигляду і створення у відвідувача відчуття взаємодії із сайтом використовують додаткові можливості, які доступні при використанні Javaскриптів. Діапазон їх застосування досить широкий: це і елементи інтерактивності, які можуть містити складні процедури обробки, і просто декоративні елементи, які надають привабливості сайту. Мова JavaScript була розроблена спільно компаніями Sun Microsystems і Netscape на синтаксичній основі мови Java.

Java-скрипт вбудовується в HTML-документ і взаємодіє з ним. Скрипти можуть знаходитись у будь-якому місці HTML-документа. Однак теги HTML не можна вміщувати всередині Java-скрипт-програми. Java-скрипт-програма вміщується між тегами <script> ... </script>, виняток становлять “ обробники подій”.

Зустрівши тег <script>, браузер по рядках аналізує зміст документа доти, поки не буде досягнуто тег </script>. Після цього відбувається перевірка скрипта на наявність помилок і компіляція програми у формат, придатний для виконання на комп‘ютері користувача.

Головна частина Java-скрипт-програми може бути вміщена у контейнер <head>... </head>, оскільки він зчитується при завантаженні HTML -документа одним з перших. Теоретично скрипт можна вміщувати у будь-якому місці HTML -документа, хоча краще це робити перед тегом <body>... </body>, тобто в заголовку документа.

Синтаксис тега:

<script language="JavaScript"> [текст програми]

</script>

Слід мати на увазі, що слово "JavaScript" записується із дотриманням регістру символів.

Багато з об‘єктів мови JavaScript відповідають тегам, які формують HTML-документи.

Деякі об‘єкти мови JavaScript мають наслідування. Зокрема, гіперзв‘язок є об‘єктом, який наслідується з об‘єкта document. У мові Java-скрипт об‘єкти, які наслідуються, також мають назву властивостей. Наприклад, множина гіперзв‘язків є властивістю об‘єкта document, а links – ім’ям цієї властивості.

ОБ‘ЄКТИ
Password	-	поле введення пароля, яке створюється за допомогою
		тега <input type=password>
Radio	-	селекторна кнопка (radio button), яка створюється за

84

		допомогою тега <input type=radio>
Reset	-	кнопка перезавантаження, яка створюється за
		допомогою тега <input type=reset>
Select (options[ ]) -		елементи <option> об‘єкта <select>
Submit	-	кнопка передавання даних, яка створюється за
		допомогою тега <input type=submit>
Text	-	поле введення, яке створюється за допомогою тега
		<input type=text>
Textarea	-	поле тексту, яке створюється за допомогою тега

<textarea>

Важливим елементом мови є події, які використовуються для виконання певних частин програмного коду скрипта. Події в основному ініціюються тими чи іншими діями користувача. Якщо користувач натиснув певну кнопку, відбувається подія “Click”. Якщо вказівник мишки перетинає будь-яке посилання у тексті – відбувається подія MouseOver. Використання мови JavaScript при обробці подій значно розширило можливості мови HTML.

Події поділяються на декілька категорій.

Події, пов‘язані з документами (події документа):

- завантаження і закриття документів.

Події, пов‘язані з гіперзв‘язком:

- активізація гіперзв‘язку.

Події, пов‘язані з формою:

-натискання мишкою кнопок;

-одержання і втрата фокусу введення і зміна вмісту полів введення, областей тексту і списків;

-виділення тексту у полях введення і областях тексту.

Події, пов‘язані з мишкою:

- наведення вказівника мишки на гіперзв‘язок і активізація гіперзв‘язку.

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

Нижче наведено імена деяких подій і умови їх виникнення.

Ім‘я події	Атрибут HTML	Умова виникнення події
Change	onChange	Зміна вмісту поля введення чи
області тексту або вибір нового елемента списку
Click	OnClick	Натискання мишки на елементі
форми або гіперзв‘язку
MouseOver	onMouseOver	Наведення	вказівника	мишки	на
	гіперзв‘язок
MouseOut	onMouseOut	Наведення	вказівника	мишки не	на
гіперзв‘язок
Select	OnSelect	Виділення тексту у полі введення або

85

області тексту
Submit	onSubmit	Передавання даних форми
Для забезпечення здійснення події необхідно задати функцію-обробник
події.	Колекції прикладів Java-скриптів розміщуються на Web-сайтах мережі

Інтернет і можуть бути запозичені і використані розробниками Web-сторінок у власних документах.

ПРИКЛАД (відкриття нового вікна, завантаження в нього документа і закриття вікна):

<html>

<head>

<script language=”JavaScript”> function opWind()

{

var myUrl = “2.htm”; myWin=window.open(myUrl,

“wind1”,”left=0,top=250",”width=400,height=400,resi sable=no,scrollbars=no,menu bar=no”);

}

</script>

</head>

<body>

<input type=”button” value=” Відкрити вікно” onClick=”opWind()”> <input type=”button” value=” Закрити вікно” onClick=”myWin.close()”> </body>

</html>

Відображення програмою-броузером:

ПРИКЛАД (зміна фону таблиці при наведенні мишки).

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

Виконується за допомогою обробника події потрапляння курсора мишки в область таблиці onMouseover і вихід з цієї області onMouseOut:

<table

id=table

onMouseover

=”table.bgColor=’red’”

onMouseOut=”table.bgColor=’white’” bgcolor=white bo rder=1><tr>

<td>

Це приклад зміни фону таблиці</td>

86

</tr>
</table>
Аналогічним	чином можна	змінювати і фоновий малюнок таблиці,
записавши:
<table	id=table	onMouseover=”table.background=’4.gi f’”

onMouseOut==”table.background=’11.gif’” border=1>

(4.gif – фоновий малюнок, який з‘являється у таблиці при наведенні на неї курсора мишки, 11.gif – фоновий малюнок, який з’являється в таблиці при виведенні курсора мишки з області таблиці).

ПРИКЛАД (динамічне обведення таблиці контуром.)

При наведенні курсора мишки на таблицю остання стане окресленою контуром (відповідно, коли мишка залишить область таблиці, контур зникне):

<table id=table1 onMouseover=”table1.border=’2'” onMouseOut=”table1.border=’0'” border=0><tr>

<td>

Приклад динамічного окреслення таблиці контуром: </td>

</tr>

</table>

ПРИКЛАД (спадне меню з посиланнями і кнопкою підтвердження): <html>

<head>

<title> </title> </head>

<body>

<form> Виберіть потрібний розділ довідника “ Українська минувщина”

<select name=”p1" >

<option selected value=”0"> Розділи</option>

<option value=”1.htm”> ТРАДИЦІЙНЕ ЖИТЛО</option>

<option value=”file2.htm”> НАРОДНІ ЗАНЯТТЯ</option> <option value=”file3.htm”> УКРАЇНСЬКА КУХНЯ</option>

<option value=”file4.htm”> СТАРОВИННА ОБРЯДОВІСТЬ</option> </select>

<input type=”BUTTON” value=” ВИБРАТИ” onclick=”location.href=p1.options[p1.selectedIndex] .value ;”> </form>

</body>

</html>

Відображення програмою-броузером:

87

ПРИКЛАД (спадне меню без кнопки підтвердження вибору): <html>

<head>

<title> </title> </head>

<body>

<form> Оберіть потрібний розділ довідника “ Українська минувщина”<select name=”p1"

onChange=”location.href=p1.options[p1.selectedIndex ] .value ;” >

<option selected value=”0"> Розділи</option>

<option value=”1.htm”> ТРАДИЦІЙНЕ ЖИТЛО</option>

<option value=”2.htm”> НАРОДНІ ЗАНЯТТЯ</option> <option value=”file3.htm”> УКРАЇНСЬКА КУХНЯ</option>

<option value=”file4.htm”> СТАРОВИННА ОБРЯДОВІСТЬ</option> </select>

</form>

</body>

</html>

Відображення програмою-броузером:

88

Завдання для самостійної роботи

1.Перевірити виконання наведених скриптів, вставивши їх до власних HTML-сторінок.

2. Здійснити у мережі Інтернет пошук прикладів скриптів, скориставшись пошуковими системами Rambler і META.

89

90