Параметри оцінки якості сайта

Зовнішній вигляд

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

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

Колір:відповідність кольорів,застосовуваних для конкретної аудиторії івизначеної мети.

Структура сайту

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

Інформаційна архітектура: структура сайта;можливість“інтуїтивної”роботи із сайтом; взаємозв‘язки та ієрархія.

Застосовувані засоби

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

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

Повідомлення

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

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

Зрозумілість:відповідність повідомлення аудиторії;наявність успоживачів знань для розуміння тексту.

Привабливість

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

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

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

Завдання

1. Відшукати у мережі інтернет офіційні сайти КНТУ та йще чотирьох університетів України.

2. Проаналізувати якість сайтів за пунктами:

· час плвного завантаження;

· привабливість, оформлення;

· відповідність оформлення до призначення сайту;

· співвідношення статики та динаміки сайту;

· зручність та зрозумілість інтерфейсу;

· зручність навігації по розділах сайту та на поточній сторінці;

· зрозумілість суті та розміщення інформації;

· цікавість викладеної інформації;

· зручність доступу до певних розділів, блоків, сторінок;

· повнота висвітлення ключових блоків інформації;

· зв’язок з іншими інтернет-ресурсами

а також за іншими критеріями, перерахованими у довідкових відомостях.

3. Скласти таблицю "Показники-Оцінки" для розглянутих сайтів. Дати оцінки за 5-бальною шкалою кожному сайту за кожним показником.

4. Підрахувати суму оцінок для кожного сайту та вивести рейтинг сайтів за сумарними оцінками.

Самостійна робота №5

Порівняльний аналіз та вибір програм для створення сайтів

Завдання

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

2. Зкачати та уcтановити програми на комп'ютер.

3. Вивчити особливості інтерфейсу та функціональні можливості програм:

· ступінь автоматизації увеження коду та візуальності;

· наявність готових шаблонів;

· наявність допомоги, підказок;

· зручність меню команд та панелей інструментів;

· підтримка Html, Css, Dhtml, Javascript, Flash, SQL, PHP, ASP тощо;

· сумісність з іншими прорамами;

· платний (ціна)/безкошиовний та інше.

4. Оцінити зручність створення веб-сторінки в кожному з редакторів.

5. Вибрати програму для подальшого використання, обгрунтувавши свій вибір.

 

Самостійна робота №6

Робота з колонками та списками на веб-сторінках

Довідкові відомості

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

Ширина колонок

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

Приклад. Ширина колонки в пикселах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Две колонки</title>

</head>

<body>

<table width="100%" cellspacing="0" cellpadding="5">

<tr>

<td width="200" valign="top">Левая колонка</td><td valign="top">Правая колонка</td>

</tr>

</table>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Две колонки</title>

</head>

<body>

<table width="100%" cellspacing="0" cellpadding="5">

<tr>

<td width="200" valign="top">Левая колонка</td><td valign="top">Правая колонка</td>

</tr>

</table>

</body>

</html>

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

Елементи списків всіх типів мають відступ від лівої межі екрана.

 

Тип	Теги списку Теги елементів
Нумерований	<OL>…</OL>	<LI>…</LI> -	елемент списку
Маркірований	<UL>…</UL>	<LI>…</LI> -	елемент списку
Список описів	<DL>…</DL>	<DD>…</DD> -	назва терміну

 

<DT>…</DT>- визначення терміну

 

За замовчуванням елементи впорядкованого списку нумеруються цілими числами, починаючи з 1. До тега нумерованого списку <OL> існує атрибут TYPE. Встановлюючи TYPE рівним “ А”, “ а”, “ І”, “ і”, можна змінити схему нумерації на великі літери, малі літери, великі або малі римські цифри відповідно.

Атрибут START дозволяє задавати початкове значення для нумерації (за замовчуванням START=1, але можна вказати будь-яке додатне число).

Атрибут TYPE тега <UL> дозволяє змінювати вигляд маркера TYPE=disk - маркер має вигляд диска;

TYPE=circle - маркер має вигляд кола; TYPE=square - маркер має вигляд квадрата.

ПРИКЛАД (нумерований список)

Файл у форматі HTML:

<HTML>

<HEAD>

<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>

<BODY>

<P ALIGN=CENTER>

<B>УКРАЇНСЬКА МИНУВЩИНА </B><BR> <I>Етнографічний довідник </I><BR>

<OL>

<LI>ТРАДИЦІЙНЕ ЖИТЛО</LI> <LI>НАРОДНІ ЗАНЯТТЯ</LI> <LI>УКРАЇНСЬКА КУХНЯ</LI> <LI>НАЦІОНАЛЬНЕ ВБРАННЯ</LI>

</OL>

</P>

</BODY>

</HTML>

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

 

ПРИКЛАД (маркерований список)

Файл у форматі HTML:

<HTML>

<HEAD>

<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>

<BODY>

<H1 ALIGN=CENTER>УКРАЇНСЬКА МИНУВЩИНА </H1><BR> <H2 ALIGN=CENTER> Етнографічний довідник </H2><BR>

<P ALIGN= CENTER><B>УКРАЇНСЬКА КУХНЯ </B> </P>

<UL>

<LI>ПОВСЯКДЕННА Й СВЯТКОВА ЇЖА ТА НАПОЇ</LI> <LI>РЕЖИМ І СЕЗОННІСТЬ ХАРЧУВАННЯ, ХАРЧОВІ ЗАБОРОНИ

</LI>

<LI>ОБРЯДОВА ЇЖА</LI> </UL>

</BODY>

</HTML>

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

ПРИКЛАД (список описів):

Файл у форматі HTML:

<HTML>

<HEAD>

<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>

<BODY>

<H1 ALIGN=CENTER>УКРАЇНСЬКА МИНУВЩИНА

</H1><BR>

<H2 ALIGN=CENTER>Етнографічний довідник</H2><BR> <P ALIGN=CENTER><B> ОБРЯДОВА ЇЖА</B> </P>

<DL>

<DT><B>ПАСКА</B></DT>

<DD>весняний обрядовий хліб, який готували до Великодня. Дуже здобне вчинене тісто на яйцях, маслі, сметані, олії, цукрі добре вимішували і ставили у тепле місце сходити.</DD>

<DT><B>КУТЯ</B>

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

</DL>

</BODY>

</HTML>

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

 

Завдання

Створити дві колонки тексту.

Використовуючи наведений нижче перелік: Старовинна обрядовість Сімейні звичаї та обряди

Свята й обряди календарного циклу Трудова обрядовість Свята громадських об’єднань Обрядова їжа

необхідно:

· Подати інформацію у вигляді нумерованого списку. Перелік повинен починатись з літери D.

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

номера 3.

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

Приклад для списку описів:

ЗЕЛЕНІ СВЯТА – українська назва християнського свята Трійці, що відзначається на 50-й день після Паски. Троїцько-русальна обрядовість знаменувала завершення весняного і початок літнього календарного циклу. В основі її лежали культ рослинності, магія закликання майбутнього врожаю.

4. Представити інформацію у вигляді списку з комбінованою нумерацією, наприклад:

· ТРАДИЦІЙНЕ ЖИТЛО

· Поселення, житло, забудова

· Житло в духовному світі селянина II. НАРОДНІ ЗАНЯТТЯ

· Види господарської діяльності

· Ремесла і промисли

· Гончарство

· Ковальство

· Господарське начиння

Кретрольні питання

· Як розмістити текст у колонках?

· Які існують види списків?

· Яку схему можна обрати для нумерованого списку?

· Чи можна вставити до нумерованого списку маркірований?

· Який атрибут використовується для зміни схеми нумерації?

 

Самостійна робота №7