28_matvienko-web

Матвієнко О.В., Бородкіна І.Л.

Internet-технології:

проектування Web-сторінки

Навчальний посібник

Київ

Альтерпрес

2003

Матвієнко О.В., Бородкіна І.Л. Internet-технології: проектування Webсторінки: Навч.посібник.-К.:Альтерпрес, 2003.- 132 с.

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

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

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

ISBN 966-542-228-6

Рецензенти:

Чачко А.С. доктор педагогічних наук, професор, академік Міжнародної академії інформатизації при ООН (Київський національний університет культури і мистецтв)

Зайченко Ю.П. доктор технічних наук, професор (Навчально-науковий комплекс “ Інститут прикладного системного аналізу” НАН України та

Міністерства освіти і науки України)

Рекомендовано Міністерством освіти і науки України як навчальний посібник для студентів вищих навчальних закладів (лист №14/18.2-726 від

5.04.2002).

Рекомендовано до друку Головною вченою радою Київського національного універсистету культури і мистецтв (протокол №4 від 13.12.2001

р.)

© Матвієнко О.В., Бородкіна І.Л.,

2003 © Художнє оформлення

«Альтерпрес», 2003

2

ВСТУП Сутність інформаційного суспільства визначається кількома

взаємопов‘язаними процесами:

−інформація і знання стають важливим ресурсом і рушійною силою соціально-економічного, технологічного і культурного розвитку;

−формується ринок інформації і знань як чинник виробництва, поряд з ринками природних ресурсів, праці і капіталу;

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

−розвинена інформаційна інфраструктура перетворюється на умову, що визначає національну і регіональну конкурентоспроможність;

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

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

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

−до операторів комп’ютерного набору, однією з вимог до яких є володіння мовою HTML;

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

−контент1-менеджера, який перевіряє вхідну інформацію, редагує,

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

Пропонований навчальний посібник не вичерпує всіх можливостей створення HTML-документів. Для повного освоєння мови HTML необхідно скористатися спеціальною літературою або відповідними інформаційними ресурсами мережі Інтернет1.

Навчальний посібник з проектування Web-сторінок містить приклади використання структурних елементів мови HTML при створенні електронного документа і завдання для самостійної роботи.

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

Дидактичний матеріал, використаний в навчальному посібнику, взято з

1 Від англ. content - зміст

3

книги: Українська минувщина: Ілюстрований етнографічний довідник/

А.П.Пономарьов, Л.Ф.Артюх, Т.В.Косміна та ін.-К.: Либідь, 1993.-256 с.

Графічний файл mamaj5.jpg, використаний як приклад при вивченні розділу 10, знаходиться на сайті: http://www.brama.com/ukr.html

4

РОЗДІЛ 1.ЕЛЕКТРОННИЙ ГІПЕРТЕКСТОВИЙ

ДОКУМЕНТ

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

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

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

Сьогодні терміни «електронний документ» та «віртуальний документ» не є усталеними і потребують окремого розгляду поняття “ віртуальність” стосовно форми існування документа.

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

обчислювальної	техніки фірми	Microsoft дає	таке тлумачення	поняття
“ віртуальний”: ”	Virtual- віртуальний – пристрій або об’єкт, які здаються не тим,
чим є насправді”. Словник з		програмування	та інформатики	дає таке

визначення: “ Virtual- віртуальний – такий, що не має фізичного втілення або сприймається інакше, ніж реалізований”.

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

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

5

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

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

Це стосується файлів з розширенням .HTM, тобто документів, записаних мовою гіпертекстової розмітки HTML (HyperText Markup Language). Кожний файл, призначений для функціонування в мережі, має свою адресу URL (Uniform Resource Locator – універсальний локатор ресурсу; використовується для визначення адрес різних серверів в Інтернет і документів на кожному сервері), може містити посилання на інші документи за цією ж тематикою, а також посилання на малюнки, які можуть знаходитись на цьому ж або на іншому комп’ютері. Програми-броузери (від англ. browse – переглядати), наприклад, Internet Explorer, дозволяють користувачу обирати за власним бажанням режим перегляду документів, які завантажуються з мережі Інтернет, тобто відключати малюнки, звук, анімацію, які фізично не є складовими документа, але призначені для цілісного його сприйняття. Така можливість, безумовно, впливає на інформаційну функцію документа і спосіб відображення інформації людською свідомістю.

Таким чином, віртуальність є, насправді, тільки властивістю електронного документа, причому вона не залежить від каналу його

розповсюдження	–	як вже було розглянуто, віртуальним може бути і	не
гіпертекстовий документ, який знаходиться на локальному комп’ютері.
М.Тейлор	дає	таке визначення гіпертексту: “ Гіпертекст – це	не

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

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

6

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

Традиційні визначення надають поняттю документа досить широке тлумачення, наприклад, запропоноване Кулешовим С.Г: “... документ – це

текст (як логічна послідовність мовних і немовних знаків), зафіксований на

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

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

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

7

РОЗДІЛ 2.ТИПИ WEB-САЙТІВ І ОЦІНКА ЇХ ЯКОСТІ

Гіпертекстова база даних у концепції WWW – це набір текстових файлів, розмічених мовою HTML, яка визначає форму представлення інформації (розмітка) і структуру зв’язків цих файлів (гіпертекстові посилання).

Електронні документи, створені мовою HTML і призначені для використання у мережі Інтернет, називаються Web-сторінками. Вони поєднуються у Web-сайти. Сайтом у мережі Інтернет називають комплекс взаємопов‘язаних однією темою Web-сторінок. Умовно сайти класифікують за принципом приналежності власника сайта до тієї або іншої категорії. Така класифікація корелює з розподілом сайтів за стилем і якістю дизайну.

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

При створенні сайту фірми або комерційної організації пріоритети змінюються. Як і у традиційних видах подання бізнес-інформації (буклети, проспекти, рекламні оголошення), корпоративний сайт має головною метою створити у користувача привабливий образ фірми, який запам‘ятовується. Сайт фірми – це інструмент рекламний тією ж мірою, що і друкований інформаційний засіб, тому він потребує якісного дизайну. Середній рівень корпоративних сайтів є досить високим, оскільки вони створюються, як правило, професійними дизайнерами. Крім участі професіоналів, обставиною, яка сприяє якісному дизайну корпоративних сайтів, є те, що їх зміст оновлюється порівняно нечасто, що дозволяє застосовувати статичний, менш гнучкий дизайн. Через статичність змісту більшість таких сайтів розраховані на одноразове відвідування, тому створювачі підходять до дизайну з особливою вимогливістю, щоб справити враження на відвідувача з першого разу. Звичайно, багато з корпоративних сайтів містять інформацію не тільки про саму фірму, але і про її продукти, тобто інформацію, яка оновлюється порівняно часто. Тим самим цей вид сайтів до певної міри зближується з некомерційними і контент-сайтами. Така подвійна рекламно-інформаційна функція характерна також для “ офіційних” сайтів фільмів, музичних альбомів і груп, спортивних команд. Багато з цих сайтів вже не є комерційними, особливо якщо вони належать не самим видавцям, кіностудіям або музикантам, а їх прихильникам.

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

Найбільш впливовим і помітним різновидом сайтів є контент-сайти -

8

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

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

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

Саме структура документа, а не його зовнішній вигляд, є об‘єктом мови розмітки HTML. Мова HTML призначена саме для розмітки логічної, а не візуальної, структури, а зовнішній вигляд документа у броузері є лише побічним ефектом логічної розмітки.

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

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

Саме такий академічний стиль характерний для освітніх і наукових сайтів

іє найкращим рішенням для тих, кому дизайн не надто важливий.

Переваги академічного стилю:

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

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

Стрімке зростання кількості ресурсів мережі Інтернет і відсутність

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

– оформлення документа (використання шрифтів, формату сторінок і

9

кольору для передачі змісту тексту);

–структура сайта;

–використані засоби розробки;

–зміст повідомлення;

–привабливість;

–доступність.

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

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

-читачі однаково застосовують шрифти як із засічками, так і без них;

-довжина рядка впливає на швидкість роботи;

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

-контрастність друкарських елементів (середній розмір, чіткість, світлість) більш важливі, ніж малюнок шрифту;

-використання білих літер на кольоровому фоні є ефективним засобом

привернення уваги до тексту.

Разом з тим, досі не досліджено, наскільки ці результати можуть бути застосовані до сітьвих документів.

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

-дезорієнтація користувача (незнання того, де користувач знаходиться відносно структури сайта);

-відволікання від головної мети;

-ненадійність навігації (функції або ознаки - колір, форма кнопок і гіперпосилань - навігації змінюються від сторінки до сторінки);

-недостатня кількість обмежень відносно дій користувача.

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

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

Стосовно розміщення інформації на сторінках існують рекомендації: на головній сторінці може бути мало тексту і посилання на інші сторінки сайту, на інших сторінках можна вміщувати весь обсяг інформації на одній сторінці. На відміну від традиційних паперових засобів, сітьові сторінки не мають обмежень на довжину. Існує тест на змістовність сторінки: її необхідно роздрукувати, при цьому не менше 3/4 повинно бути заповнено інформативним текстом (це не

10