Методи оцінювання якості web-ресурсів

Розробка сайту-візитки компанії, яка надає послуги в ІТ-галузі та оцінювання створеного сайту. Структурне розположення усіх html, css—файлів та зображень. Створення текстового документу з іменем index та розширенням .html. Тестування сторінки в браузері.

Рубрика Программирование, компьютеры и кибернетика
Вид курсовая работа
Язык украинский
Дата добавления 25.06.2015
Размер файла 1,9 M

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Размещено на http://www.allbest.ru

АНОТАЦІЯ

Курсовий проект // «Методи оцінювання якості web-ресурсів». // Melkiy.te.ua Mi.ucoz.org // 7.05010201 Комп'ютерні системи та мережі // Тернопільський національний технічний університет імені Івана Пулюя, факультет комп'ютерно-інформаційних систем і програмної інженерії, кафедра комп'ютерних систем та мереж, група СІ-52 // Тернопіль, 2014 // С. - , рис. - , табл. - , додатків - , джерел - .

Ключові слова: WEB-САЙТ, SEO, САЙТ-ВІЗИТКА, САЙТ, ОЦІНКА.

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

Матеріали, покладені в основу розробки проекту:

стандарти мови web-програмування, мови гіпертекстової розмітки та каскадних таблиць стилів;

стандартні правила SEO.

Курсовий проект включає графічну частину, що виконана на окремих аркушах формату А1. Графічна частина включає структуру сайту та методи оцінювання сайту.

ЗМІСТ

ВСТУП

1. СТВОРЕННЯ ВЕБ-САЙТУ

1.1 Веб -сторінка

1.2 Теоретичні аспекти створення веб-сайтів8

1.3 Розробка структури веб-сайту

1.4 Створення сайту

2. ВИКОРИСТОмВНІСТЬ

2.1 Веб-використомвність

2.2 Критерії оцінювання ресурсів інтернету

2.3 Способи оцінювання ресурсів інтернету

3. ОПТИМІЗАЦІЯ САЙТУ

3.1 Внутрішня оптимізація сайту

3.2 Перевірка якості сайту

4 СЕРВІСИ ДЛЯ ОЦІНЮВАННЯ ЯКОСТІ WEB-РЕСУРСІВ

4.1 Ping-Admin.Ru

4.2 mysitecost.ru

4.3 validator.w3.org

ВИСНОВКИ

СПИСОК ВИКОРИСТАНОЇ ЛІТЕРАТУРИ

ДОДАТКИ

ВСТУП

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

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

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

Завдання які вирішуються при наявності Web-сайту:

оповіщення своїх клієнтів про новинки та цікаві для них події;

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

прийом замовлень на товари і послуги;

здійснення електронних платежів.

1. СТВОРЕННЯ ВЕБ-САЙТУ

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

Сайтом також називають вузол мережі Інтернет, комп'ютер, за яким закріплена унікальна ІР-адреса, і взагалі будь-який об'єкт в Інтернеті, за яким закріплена адреса, що ідентифікує його в мережі (FTP-site, WWW-site тощо).

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

1.1 Веб -сторінка

Веб-сторінка (англ. Web-page) -- інформаційний ресурс доступний в мережі World Wide Web (Всесвітня павутина), який можна переглянути у веб-браузері. Зазвичай, інформація веб-сторінки записана в форматі HTML, XHTML, або рідше wml (для wap-сторінок).

HTML -- Мова розмітки гіпертекстових документів. Cтандартна мова розмітки веб-сторінок в Інтернеті. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді.

HTML є похідною мовою від SGML, успадкувавши від неї визначення типу документу та ідеологію структурної розмітки тексту.

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

Типовий Web-документ складається з текстових блоків, рисунків, таблиць, ліній, гіперпосилань. Більш складні Web-документи містять фрейми (вкладені Web-сторінки), елементи керування та вводу інформації(кнопки, перемикачі, поля вводу тексту), динамічні об'єкти (Java Applet, Java Script, ActiveX).

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

1.2 Теоретичні аспекти створення веб-сайтів

Поняття про мову розмітки гіпертексту

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

Тег - це одиниця коду HTML, яка складається з “команди”, поміщеної у кутові дужки < >. Теги бувають відкриваючими та закриваючими. Закриваючі теги починаються зі знаку /. Документи починаються і закінчуються тегами, які позначають його початок та кінець: <HTML> та </HTML>

В межах документу виділяються дві області - заголовок та власне “тіло документу”. Заголовок оголошується тегами <HEAD> та </HEAD>

У межах заголовку можуть розміщуватись власне заголовок документу (відображається у верхній стрічці вікна браузера), він створюється тегами <TITLE> та </TITLE>; крім цього у заголовку документу може міститися тег <META>, який використовується для технічного опису документу (інформація для пошукових програм), а також тег <STYLE>, який використовується для опису стилів, які використовуються у документі.

Наступним розділом документу HTML є розділ “тіла документу”. Він починається тегом <BODY>, а закінчується тегом </BODY> . Він має наступні параметри:

BACKGROUND = “*.*” Замість *.* вказується адреса малюнка, який повинен бути фоном даного документу

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

TEXT= Вказується колір тексту

LINK= Визначає колір гіперпосилань у документі

ALINK= Визначає колір гіперпосилань у момент натиснення

VLINK= Визначає колір переглянутих гіперпосилань

Форматування символів

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

Для переходу на новий рядок використовується тег <BR> .

Для виділення тексту в абзаци існують теги <P> та </P> .

Текст, розміщений між тегами <B> та </B> буде жирнішим. bold

Текст, розміщений між тегами <I> та </I> буде написаний курсивом. italics

А текст, розміщений між тегами <U> та </U> буде підкресленим. underlined

Текст, розміщений між тегами <S> та </S> буде перекресленим. striken

Текст, розміщений між тегами <SUB> та </SUB> буде написаний як нижній індекс. індекс

Текст, розміщений між тегами <SUP> та </SUP> буде виглядати як верхній індекс.

Тег <HR> вставляє у документ горизонтальну лінію.

Крім цього, можна використовувати різне форматування шрифту за допомогою тегу <FONT> , який має параметри <FACE> - тип шрифту (наприклад: `Lucida Sans', `Arial', `Monotype Corsiva', `Times New Roman'), <SIZE> - розмір шрифту (1-7), та <COLOR> - колір шрифту.

Заголовки

Для змістового виділення елементів сторінки використовуються теги-заголовки. Заголовки в HTML бувають шести типів. Текст, розміщений всередині тегу заголовка <H1> </H1> відображатиметься відповідно до типу цього заголовка. Найбільшим є заголовок Н1, найменшим - Н6. Заголовок може розміщуватись на екрані по центру, або вирівняний по правому або лівому краю. <H2 align=center \ right \ left ></H2>

Списки

Списки у HTML бувають трьох видів: марковані, нумеровані та довільної форми.

Можливий вибір маркування списку (circle/disk/square = коло/круг/квадрат)

Також можна вказувати різні типи нумерування: арабські цифри, римські цифри великі й маленькі, латинські букви великі й маленькі. Крім того, можна вказувати номер, з якого починається нумерування (для третього списку це №5, для останнього - №9).

І останній тип списків - довільної форми. Приклад їх складення та вигляду:

У цьому випадку ми вказуємо не лише елементи списку (старости), але й спосіб їх переліку (за групами)

Використання графіки

Для оформлення документів можна використовувати графічні об'єкти. Як вже згадувалось, можна вказати малюнок або колір, які будуть слугувати тлом для документу. Можна також вставляти малюнки прямо в документ. Для цього використовується тег <IMG> . Він має наступні параметри:

src=”*.*” - файлова адреса малюнка, який потрібно вставити

width= - ширина малюнка (в пікселях)

height= - висота малюнка (в пікселях)

align=”center \ right \ left” - спосіб вирівнення малюнка по центру \ по правому \ по лівому краю

alt=”picture” - альтернативний текст для випадків, коли малюнок не завантажується

Гіперпосилання

Інтернет базується на документах, що пов'язані між собою, тобто на гіперпосиланнях між документами. Їх можна створювати за допомогою мови HTML. Між тегами <a href=”index.html”> та </a > вставляється деякий текст, клацнувши на якому можна перейти до вказаного у href документу (в даному випадку - до index.html).

Іноді виникає потреба перейти до підтеми в межах одного документу. Тоді використовується так званий якір. У тому місці документа, куди треба буде перейти, вставляється мітка <a name=”a1?> , а посилання на неї створюється за допомогою тегів <a href=”index.html#a1?> та </a >

Таблиці

Часто для структурованого представлення інформації використовуються таблиці. Вони створюються тегами <TABLE> (таблиця), <TR> (рядки таблиці), <TD> (стовпці таблиці).

Як бачимо - мова HTML надає можливість об'єднання комірок таблиці: тег <td colspan= > поєднує стовпці, а тег <td rowspan= > - рядки.

Тег таблиці <TABLE> має наступні параметри:

bgcolor - колір таблиці

border= - ширина рамки таблиці (0-невидима рамка)

width= - ширина таблиці (в пікселях або у відсотках)

height= - висота таблиці (в пікселях або у відсотках)

align=”center \ right \ left” - спосіб вирівнення таблиці по центру \ по правому \ по лівому краю

Схожі параметри мають теги <TD> та <TR> :

bgcolor - колір комірки / всього рядка

background=*.* - колір комірки

width= - ширина комірки (в пікселях або у відсотках)

height= - висота комірки (в пікселях або у відсотках)

align=”center \ right \ left” - спосіб вирівнення вмісту комірок: по центру \ по правому \ по лівому краю

valign=”top \ bottom \ middle” - спосіб вирівнення вмісту комірок по вертикалі: згори \ внизу \ посередині

nowrap - блокує автоматичне перенесення слів в межах комірки

colspan= - кількість стовпців комірки

rowspan= - кількість рядків комірки

Форми

Форми дозволяють організувати інтерактивність для web-сторінки. Форми в документах HTML розміщуються між тегами <FORM > та </FORM> .

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

ACTION Цей атрибут задає те, як оброблятиметься форма. Зазвичай йому присвоюється адреса програми, яка оброблятиме дані, отримані з форми. Тут можна також вказати електронну адресу, на яку треба відсилати відомості з форми. <form action=”index.pl”> <form action=”x@x.lviv.ua”>

METHOD Задається те, як саме форма передаватиметься за адресою, вказаною в попередньому атрибуті(варіанти: get/post)

ENCTYPE Задає спосіб кодування (application/x-www-form-urlencoded)

Форма може складатись з різних елементів: текстових полів, випадаючих меню, списків, перемикачів та кнопок.

Текстові елементи. Для створення найпростішого текстового поля потрібно вставити елемент <INPUT>і присвоїти його атрибуту значення text. Всі елементи форми повинні мати ім'я. <input type=text name=name> Значенню атрибуту size елементу <INPUT> відповідає кількість символів, які будуть введені у це поле. Якщо користувач введе більше символів, то текст прокручуватиметься. Якщо треба обмежити розміри поля, можна визначити атрибут maxlength - максимальна кількість символів, яку можна ввести у поле.

Поле для паролів. Дані, введені у це поле показуються на екрані у вигляді “зірочок” для того, щоб введена інформація залишалась приватною. Для цього атрибуту type присвоюється значення password.

Багатострічкове текстове поле. У цього елемента є атрибути rows (кількість рядків), cols (кількість стовпців), name (ім'я). <textarea name=t1 rows=6 cols=60> та </textarea> . Для цього елементу можна задати значення по замовчуванню між тегами <textarea> та </textarea> .

Меню. Випадаюче меню дає користувачеві можливість вибрати один варіант з кількох можливих. Це меню створюється елементом <select> та </select> . Всередині його розміщуються кілька елементів <option> . При вказанні в атрибуті value іншого значення, ніж після <option> , на обробку відправлятиметься саме це значення. Можна вказати який елемент буде вибраним по замовчуванню через атрибут selected. Можна також поставити атрибут size - тоді на екран виводиметься лише певна кількість стрічок списку.

<select name=”s1?>

<option value=”Ukraine”> Ukraine

<option value=”Russia”> Russia

<option value=”Other”> Other country

</select>

Мітки. Якщо користувачеві потрібно обрати кілька пунктів з великої групи варіантів можна використати поле для міток. Для цього атрибуту type елементу <input> присвоюється значення checkbox. За допомогою атрибута value можна вказати “своє” значення замість того, що мало б передаватись далі.

<input type=checkbox value=”Cat” name=a1> Cat

<input type=checkbox value=”Parrot” name=a1> Parrot

Кнопки-перемикачі. Користувач може обирати лише один варіант з запропонованих. Для цього атрибутуtype елементу <input> присвоюється значення radio. Тут обов'язково потрібно вказувати однакове ім'яname і різні значення value.

<input type=radio name=r1 value=”yes”> Yes

<input type=radio name=r1 value=”no”> No

Кнопки reset та submit. Ці кнопки організовуються також через задання значення атрибуту type елементу <input> як reset абоsubmit відповідно. Кнопка Reset дозволяє користувачеві очистити заповнені поля і перевести форму у початковий стан. Submit - дає команду броузеру відправити вміст форми за адресою, вказаною у атрибутіaction елементу <form> .

Стилі

Таблиці стилів, так звані CSS, Cascading Style Sheets містять опис формату частини або цілого тексту. Задання стилю відбувається за допомогою тегу <style>

<head>

<style>

тег{

властивість1:значення1;

властивість2:значення2;

}

</style>

</head>

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

<link rel=”stylesheet” type=”text/css” hreaf=”styles.css”>

За допомогою стилів ми можемо змінити вигляд тегів h, p, body, table тощо. Наприклад, задання стилю body {background:honeydew} означає, що лише вказуючи тег body він завжди позначатиме фон кольору honeydew.

Можна також вводити власні стилі. Наприклад, стиль .blue {color:blue} означає, що текст буде написаний блакитним кольором.

При використанні стилів доцільно користуватись тегом <div> - він не форматує документ, але помічає фрагмент тексту, який розглядатиметься як єдиний об'єкт. Тоді для цього об'єкту можна вказати певний стиль форматування - <div class=blue> При цьому всередині тегу <div> можуть бути розміщені й інші елементи та теги.

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

background колір фону

font-family вид шрифта

font-size розмір шрифта

color колір шрифта

text-align вирівнювання тексту

text-decoration оздоблення тексту

font-weight - жирність шрифта

margin-top - відстань від верхнього рядка

line-height - висота рядка

1.3 Розробка структури веб-сайту

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

Структурне розположення усіх html, css -- файлів та зображень:

Папка public_html - коренева папка

- index.html - головна сторінка

- about.html - про компанію

- services.html - послуги компанії

- contact.html - контакти

- help.html - FAQ

- styles.css - головний CSS-стиль сайту

Папка images - папка для збереження картинок

- blockquote.gif

- blockquote-blockquote.gif

- index_r1_c1.jpg

- index_r2_c1.jpg

- index_r2_c2.jpg

- index_r2_c3.jpg

- index_r2_c4.jpg

- index_r2_c5.jpg

- index_r2_c6.jpg

- index_r2_c7.jpg

- index_r3_c4.jpg

- index_r4_c3.jpg

- index_r4_c4.jpg

- index_r4_c5.jpg

- index_r5_c3.jpg

- index_r6_c1.jpg

- spacer.gif

Даний сайт містить 5 html-сторінок та 1 CSS-файл.

1.4 Створення сайту

Тепер коли усе готово, можна починати створення сайту.

Для початку створимо каскадну таблицю стилів CSS.

Для цього відкриємо текстовий редактор і створимо новий файл. Після запису коду, збережемо цей документ. Дамо йому ім'я: styles та розширення .css

Рисунок 1 -- файл styles.css

Далі створимо ще один текстовий документ з іменем index та розширенням .html

Із наявної інформації про створення сайтів пишемо першу сторінку сайту.

Рисунок 2 -- файл index.html

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

Рисунок 3 -- відображення сторінки в браузері

сайт візитка web

Як бачимо усе добре. Тепер створюємо інші сторінки сайту.

Коли усе готово можна завантажувати усі файли на хостинг. Хостинг та домен я вибрав та зареєстрував раніше.

Рисунок 4 -- завантаження файлів сайту на хостинг

Файли сайту успішно завантажені на хостинг.

2. ВИКОРИСТОмВНІСТЬ

Використомвність, часто Юзабіліті (англ. Usability -- дослівно «зручність користування») -- поняття в мікроергономіці, що визначає загальну степінь зручності предмета при використанні; термін схожий з терміном «ергономічність», але має іншу область поширення і відрізняється нюансами визначення. Використовується для комп'ютерної техніки, терміном юзабіліті називають концепцію розробки користувацьких інтерфейсів програмного забезпечення, орієнтовану на максимальну психологічну і зорову зручність для користувача. ISO визначає використовність як «Ступінь з якою продукт може бути використано визначеними користувачами для досягнення визначених цілей з ефективністю, продуктивністю та вдоволеністю для специфічного контексту використання».

2.1 Веб-використомвність

Веб-юзабіліті (англ. web-usability -- дослівно «зручність користування веб») -- це застосування принципів юзабіліті в тих областях, де перегляд веб-сторінок можна розглядати як загальну парадигму (або "метафору") для побудови GUI

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

Деякі загальні цілі веб-юзабіліті:

Представити користувачеві інформацію в ясній і стислій формі

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

Усунути будь-яку двозначність щодо наслідків дій (наприклад, кнопка /видалити/покупка)

Розміщення важливих елементів у відповідній області на веб-сторінці або веб-додатку

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

2.2 Критерії оцінювання ресурсів інтернету

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

Щоб оцінити якість сайту є такі критерії:

Комфортність:

1. Чи відокремлений зміст сайту від інших елементів навігації?

2. Чи сумісний код сайту із популярними браузерами?

3. Наскільки сумісний сайт зі стандартами кодування W3C? Використовується HTML/CSS?

4. Чи вказані теги «alt» для всіх важливих картинок?

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

Навігація:

1. Чи використовується для посилань текст, який зрозуміло вказує, куди вони ведуть?

2. Глибина - скільки кліків потрібно зробити, щоб дістатися до сторінки в глибині сайту.

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

4. Чи видно по посиланнях, що вони клікабельні?

5. Наскільки просто користуватися сайтом? Значки чіткі чи ні? Чи розрізняються кнопки/посилання у вигляді тексту, які не клікабельні, і навпаки?

6. Чи є стиль шрифту чітким та зрозумілим. Чи достатній розмір шрифту для комфортного читатиння.

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

8. Чи доступна карта сайту? Якщо ні, чи можливо здійснити пошук за ключовими словами? Примітка: У великих сайтах (більше тисячі сторінок) обов'язково повинна бути форма пошуку.

Дизайн:

1. Чи є дизайн сайту естетично привабливим?

2. Чи кольори сайту гармонійні і логічно пов'язані?

3. Чи легко сприймаються вибрані кольори? (Наприклад, чи достатньо вони контрастні, щоб дальтоніки і люди зі слабким зором могли користуватися сайтом?)

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

5. Шрифти повинні легко читатися, акуратно зменшуватися і добре виглядати на екранах з різним розширенням.

Контент:

1. Стиль текстів відповідає призначенню сайту і «говорить» з цільовою аудиторією?

2. Чи можна змінити розмір тексту в браузері, чи зміна розміру обмежена налаштуваннями CSS?

3. Чи достатній контраст між текстом і кольором фону для зручного читання?

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

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

6. Чи є на сайті розділ «Про сайт», де вказується хто автор проекту, та посилання на джерело контенту, автором якого власник сайту не є?

7. Чи регулярно оновлюється контент?

Безпека:

1. Чи є якісь очевидні слабкі місця у системі безпеки?

2. Наскільки форми пристосовані до спеціальних символів?

3. Чи захищені паролі приватних каталогів від доступу та індексування?

4. Чи зберігаються дані клієнтів на віддаленому сервері і чи надійно захищена база даних від зовнішнього доступу?

Інші технічні фактори:

1. Яка швидкість завантаження сайту?

2. Чи всі посилання (внутрішні та зовнішні) валідні та активні?

3. Чи є у скриптах помилки?

4. Чи захищений сайт від помилок з боку сервера?

Інші маркетингові фактори:

1. Чи достатньо сайт оптимізований під пошукові системи (виділені основні частини тексту (ключі)? Чи релевантні і контекстуально пов'язані теги заголовку, текст заголовку, що прописаний в тегу Н1, зовнішні посилання і т. д.).

2. Чи зацікавлює користувача головна сторінка сайту, щоб він захотів перейти на інші сторінки.

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

4. Чи сформовано файл Robots.txt?

5. Чи доступна карта сайту?

6. Чи доступна кожна сторінка хоча б за простим HTML-посиланям (без JavaScript або Flash Link)?

7. Чи містить кожна сторінка сайту певний текст? (Скільки тексту залишиться на сторінці, якщо прибрати всі картинки, відео, Java-аплети і JavaScript код? Те, що залишилося, як і раніше розкриває суть сторінки?)

8. Чи кожна сторінка доступна тільки по одному URL посиланню?

Матеріал, що використовується на законних підставах / Гарантії / Легітимізація:

1. Чи є на вашому сайті сторінка контактів з дійсними адресами, безкоштовний номер телефону, форма контакту або доступний e-mail, зрозумілий і простий у використанні механізм зворотного зв'язку/контакту?

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

3. Чи проводите ви політику конфіденційності (особливо, якщо ви зберігаєте дані, електронну пошту, імена, куки)?

2.3 Способи оцінювання ресурсів інтернету

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

Як оцінити відвідуваність сайту:

Для простої оцінки відвідуваності сайту можна скористатися стандартними сервісами, де в спеціальну форму треба ввести адресу сайту і натиснути «Отримати». Через секунду з'явиться статистика по обраному сайту: кількість відвідувачів за місяць, за останню добу і за поточний день.

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

Як оцінити сайт онлайн:

Тут введимо ім'я сайту і тиснемо «Аналіз». Сервіс видасть наступну інформацію: назву, опис і ключові слова, по яких просувається сайт, скріншоти зі сторінками сайту, кількість сторінок сайту, індексованих пошуковими системами, рейтинги, виставлені сайту системами Яндекс і Google (Яндекс ТІЦ - тематичний індекс цитування і Google PR або Google Page Rank - така ж оцінка з боку Google). Є й такі показники, як процентне співвідношення на сторінках сайту текстової інформації і зображень із зазначенням на мови програмування, на яких написаний сайт, швидкість і час завантаження сторінок сайту, кількість посилань на сторінках і багато іншого. В цій же системі пункти «Система управління сайтом», «Сайти на одному IP», «Наявність IP в спам-базах» - ця інформація буде корисна, щоб оцінити ефективність сайту.

Яндекс ТИЦ і Google PR:

Системи цих оцінок трохи різняться, крім того, PR простіше для сприйняття, оскільки оцінка сайту в цій системі ведеться за 10-бальною шкалою - чим вище бал, тим якісніше і корисніше для користувачів сайт і тим вище сайт буде розташований на сторінках видачі в пошуковій системі Google по відповідних запитах. Щоб підвищити PR, потрібно розміщувати релевантний контент (вміст, відповідне заявленій тематиці сайту), розміщувати на сторінках сайту посилання на інші його сторінки (в помірній кількості) і, звичайно ж, сайт повинен бути вже досить «дорослим», щоб пошукова система почала йому «довіряти».

Найвищі оцінки - від 8 до 10 можуть отримати тільки сайти дуже великих компаній. Так що якщо у вашого сайту оцінка від 5 до 7 - можна сказати, що він працює на «відмінно», 3-4 - це «добре», 2 - «задовільно». Якщо оцінка 1, то потрібно серйозно доопрацьовувати сайт, а ось нульова оцінка може свідчити про проблеми з індексацією сайту в Google.

Інші можливості оцінки сайту:

Тут є схожа інформація, проте розташована вона більш наочно. Як звичайно, для кожного сайту є рейтинги ТИЦ і PR, а також кількість проіндексованих сторінок в системах пошукових гігантів Google і Яндекс, кількість ресурсів, на які розміщені посилання на аналізований сайт. Є інформація і про наявність сайту в каталогах, віці сайту, IP сайту, хостерів і останнім пунктом тут йде PR-CY.Rank - рейтинг, розроблений співробітниками даної системи аналізу сайтів - можете порівняти рейтинги різних сайтів, щоб отримати їжу для роздумів.

Як оцінити якість сайту:

Що стосується того, як оцінити сайт з точки зору унікальності його вмісту (контенту), використовуємо програми-антіплагіатори. Відмінною програмою в цій категорії є «Advego Plagiatus».

Відмінними вважаються показники від 95% і вище, хорошими - 90-95%, задовільними: 80-90%.

Якщо унікальність тексту нижче 80%, краще для нормальної індексації пошуковими його переписати так, щоб домогтися більш високого ступеня унікальності.

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

3. ОПТИМІЗАЦІЯ САЙТУ

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

3.1 Внутрішня оптимізація сайту

1. Перед тим, як оптимізувати сайт, потрібно визначитися із запитами, по яких планується просувати сайт. Це можна зробити через сервіс Яндекс Дірект (при просуванні в Яндексi).

2. Після визначення запитів підбираються найбільш релевантні сторінки під кожен запит.

3. Кожна сторінка сайту оптимізується під 1-2 запити.

4. Ключові слова мають бути присутніми в тайтлi і описі сторінки (у формі, зручній для прочитання користувачами, а не просто як перерахування ключовикiв).

5. Ключові слова мають бути прописані в заголовку <h1>, а також бути присутніми в тексті у вигляді різних словосполук. При цьому важливо дотримуватися мiри -- шукачі уміють відрізняти тексти, просто "насичені" ключовиками.

6. Ключові слова мають бути присутніми в тегах <b> та <i>, а також в текстах (анкорах) внутрішніх посилань.

7. Ключові слова мають бути прописані в тегах alt і title до картинок.

8. Окрім верхніх/бокових меню, внутрішні сторінки сайту мають бути додатково перелінкованi у футерi -- підвалі сайту (при цьому потрібно використовувати ключові слова), а також в текстах повних новин сайту (наприклад, після статті йде 5 посилань «Схожі матеріали» на схожі по темі сторінки сайту, що збільшує кількість переглядів сторінок).

9. Адреси сторінок сайту переважно робити у вигляді статичних сторінок.

10. Окрім особливих випадків всі зовнішні посилання (лічильники і таке інше) слід закривати від індексації через <noindex> і rel=”nofollow”, щоб не витікав PR і тІЦ.

11. Найцікавіші матеріали сайту мають бути на видному місці, наприклад, в розділі меню «Популярне».

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

13. Всі сторінки сайту мають бути доступні в 2-3 кліка від головної.

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

15. Оформлення сторінок має бути по максимуму винесене у файл CSS (каскадні таблиці стилів), щоб зменшити об'єм кодiв і прискорити час завантаження сайту.

16. Дизайн сайту має бути оптимізований як під Internet Explorer, так і під Mozilla Firefox, Opera і Safari. Не секрет, що частенько сайти в різних браузерах відображуються по-різному.

3.2 Перевірка якості сайту

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

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

Ключові моменти оцінки якості веб-проектів

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

- Сумісність сайту з браузерами.

- Відповідність стандартам.

- Семантика HTML -кода.

- Доступність сайту для користувачів.

- Швидкість роботи на стороні сервера.

- Швидкість роботи на стороні браузеру.

Кросбраузернiсть сайту

Перевіряємо за допомогою www.browsershots.org. Вибираємо найбільш поширені браузери для цільової аудиторії (Internet Explroer 6, 7 і 8, Firefox 2 і 3, Opera 9 і 10, Safari 3, Chrome 1). Отримуємо пару десятків зображень головної сторінки сайту, і вже по ній оцінюємо якість верстання: наскільки вона відповідає початковому дизайн-макету.

Відповідність стандартам

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

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

Відповідність стандартам доступності : WCAG. Перевіряємо за допомогою www.contentquality.com (досить відповідності першому рівню - A, WCAG Priority 1).

Доступність і семантика коду

Відключення стилів і JavaScript у браузері дозволить "побачити" сайт таким, як він "виглядає" для пошукових і інших роботів. У Firefox це можна зробити за допомогою Web Developer Toolbar. У інших браузерах - в налаштуваннях відключення скриптів і з допомогою:

javascript:document.getElementsByTagName('head')[0].innerHTML='';void(0);

Запуск цій адреси у браузері усуне велику кiлькiсть стилів (або ж усi) із сторінки.

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

Швидкість роботи сайту

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

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

Для перевірки якості швидкості завантаження клієнтською складовою можна скористатися або YSlow під Firebug для Firefox (оцінка має бути не менше 80, краще всього не менше 90), або ж безкоштовним інструментом webo.in (проста оцінка не нижче 70, краще - вище 80).

На що впливає якість сайту

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

Швидкість створення HTML -сторiнок і загальний час завантаження дуже сильно впливає на доступність сайту. Ключовим параметром тут є "завантаження за 4 секунди" і швидше завантаження, ніж у основних конкурентів. У відсутності основних переваг на ринках з високою конкуренцією швидкість роботи сайту може виявитися вирішальним чинником при прийнятті рішення.

Зараз на ринку існує декілька рішень, що дозволяють автоматизувати прискорення сайту на клієнтському рівні. Для ASP.NET - це GetRPO.com, для систем на базі PHP - це Web Optimizer.

4. СЕРВІСИ ДЛЯ ОЦІНЮВАННЯ ЯКОСТІ WEB-РЕСУРСІВ

Існують спеціальні сайти для оцінювання якості web-ресурсів мережі. Ці сайти визначають такі важливі показники, як: Ping (провірка доступності сайту / чи сайт в on-line), Проверка обратных ссылок (провірка, хто посилається на цей сайт) Проверка ТИЦ и PR (рейтинг сайту у пошуковиках). Окрім цього, ці сервіси стежать за роботою Вашого сайту і повідомляють Вас, якщо щось не працює, або працює неправильно.

4.1 Ping-Admin.Ru

Ping-Admin.Ru - моніторинг сайтів і серверів. Перевірка роботи сайту

Ping-Admin.Ru здійснює цілодобовий моніторинг на вашому сервері таких сервисов як: HTTP, HTTPS; FTP; MySQL, PostgreSQL; POP3, SMTP, IMAP; DNS, а також перевірки за допомогою Ping й Telnet. моніторинг сервера сайту сервісів перевірка доступності ping

Сервіс надає наступні послуги:

Детальна разова перевірка сайту;

Ping;

Перевірка зворотних посилань;

Перевірка ТИЦ й PR.

Рисунок 5 -- Результат перевірки сайту сервісом Ping-Admin.Ru

Результати перевірки:

ТИЦ: 0; PR: 1

IP вашого сервера 31.170.163.16

Термін завантаження сайту 0,701655 сек

DNS 0,151359(21,57%)

швидкість завантаження 37 КБ/с

4.2 mysitecost.ru

mysitecost.ru - рахує вартість сайту, кількість відвідувачів, щоденний доход, перевіримо Google PageRank, індекс цитування від Яндекс, довідаємося інформацію про хостинге, покажемо соціальний індекс і багато чого іншого.

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

Опис оцінювання сайту проектом mysitecost.ru

Рисунок 6 -- Результат перевірки сайту сервісом mysitecost.ru

Результати перевірки:

Ця сторінка містить звіт про приблизну вартість сайту http://melkiy.te.ua. Цей сайт має Google PageRank 1. Мережний IP адреса 31.170. 163.16. Щоденний доход сайту з реклами біля $0.11. Ми проаналізували різні дані по цьому сайті й приблизно його оцінили в $161.5.

Інформація про сайт - Компанія "Веселощів студент" - Курсова робота Володимира Melkiy.te.uaа

Приблизна інформація:

Переглядів у день: 84

Щоденний доход: $0.11

Хостів у день: 28

Щомісячний доход: $3.3

Контекстна реклама:

Google AdSense: Ні.

Яндекс Директ: Ні.

Пошуковий індекс:

Google Page Rank: 1/10

Посилань в Google: 0

Google Analytics: -

Сторінок в Google: 2

Alexa Рейтинг: 0

Посилань в Alexa: 0

Яндекс тиц: 0

Яндекс Rang: 0/6

Наявність у каталогах:

DMOZ Directory: -

Yandex Каталог: -

Yahoo! Directory: -

Mail.ru Каталог: -

Безпека сайту:

Перевірка від McAfee: ok

Перевірка від Google: ok

Інформація про хостинг і CMS:

IP: 31.170.163.16

Місто: Немає даних

Провайдер: Немає даних

Веб Сервер: Apache

Країна: United States

CMS: Немає даних

4.3 validator.w3.org

W3C Markup Validation Service - це безкоштовна послуга, що надається в W3C. Дозволяє перевірити сумісність вашого HTML документа зі стандартами HTML або XHTML, і дозволяє веб-авторам знайти помилки.

Рисунок 7 -- Результат перевірки сайту сервісом validator.w3.org

Результати перевірки:

6 Помилки, 31 попередження

Адреса: http://melkiy.te.ua/

Кодування :UTF-8

Doctype : HTML 4.01 Transitional

Кореневий елемент: HTML

ВИСНОВКИ

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

Сайт пройшов зовнішню та внутрішню провірку за такими критеріями:

комфортність;

навігація;

дизайн;

відвідуваність;

PR та ТІЦ;

швидкість завантаження сторінок;

правильність коду;

присутність у популярних каталогах.

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

СПИСОК ВИКОРИСТАНОЇ ЛІТЕРАТУРИ

Морзе Н.В. Методика навчання інформатики: Навч. посіб.: У 4 ч. / За ред. акад. М.І. Жалдака. - К.: Навчальна книга, 2003. - Ч. ІІІ: Методика навчання основних послуг глобальної мережі Інтернет. - 196 с.

Рамський Ю.С., Рєзіна О.В. Вивчення інформаційно-пошукових систем мережі Інтернет: Навч. посіб. - К.: НПУ імені М.П. Драгоманова, 2004. - 60 с.

Teaching Web Evaluation, http://lrs.ed.uiuc.edu/wp/credibility/page4.html, Date Last Modified: 7/01/2002

Как оценить достоверность результатов поиска? [Электронный ресурс] - Режим доступа: http://shperk.ru/v-seti/servisy/kak-ocenit-dostovernost-rezultatov-poiska.html

Мержевич В. (1 октября 2010). Фиксированная ширина, float плюс margin [WWW документ]. URL http://htmlbook.ru/layout/fiksirovannaya-shirina-float-plyus-margin (28 листопада 2012).

Мержевич В. (22 сентября 2010). Основы CSS. Свойства текста [WWW документ]. URL http://htmlbook.ru/content/svoystva-teksta (28 листопада 2012).

Глушаков С.В., Жакин И.А., Хачиров Т.С. Программирование Web-страниц . - Харьков: «Фолио», 2005.-390 с.

Viktor Motuzka.(13 листопада 2012). Сайт [WWW документ]. URL http://uk.wikipedia.org/wiki/%D0%A1%D0%B0%D0%B9%D1%82 (28 листопада 2012)

ДОДАТОК А

Технічне завдання

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

Тернопільський національний технічний університет ім. І. Пулюя

Кафедра комп'ютерних систем та мереж

“ЗАТВЕРДЖУЮ”

Завідувач кафедрою КС

______ д.т.н. Лупенко С.А.

“____”_________2014 р.

ТЕХНІЧНЕ ЗАВДАННЯ

На курсовий проект

На тему: «Методи оцінювання якості web-ресурсів»

На здобуття освітньо-кваліфікаційного рівня “Спеціаліст”

Спеціальність 7.05010201 “Комп'ютерні системи та мережі”

“Узгоджено”

Керівник курсового проекту

Жаровський Р.О.____________

“____”_________2014р.

“Виконавець”

Студент групи СІ-52

Melkiy.te.ua В. Р.__________

“____”_________2014 р.

Тернопіль -- 2014

ЗАГАЛЬНІ ПОЛОЖЕННЯ

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

1.1 Повне найменування системи та її умовне позначення

Повна назва теми курсового проекту: «Методи оцінювання якості web-ресурсів»

1.2 Виконавець курсового проекту

Студент Melkiy.te.ua Mi.ucoz.org, групи СІ-52, факультету комп'ютерно-інформаційних систем та програмної інженерії, Тернопільського національного технічного університету імені Івана Пулюя.

1.3 Перелік вихідних даних, документів, на підставі яких створюється система

Вихідні дані та документи на підставі яких створюється сайт:

стандарти мови web-програмування, мови гіпертекстової розмітки та каскадних таблиць стилів;

стандартні правила SEO.

1.4 Планові терміни початку та завершення проектування

Плановий термін початку виконання курсового проекту - 10.02.2014 року.

Плановий термін завершення виконання курсового проекту - 27.04.2014 року.

ПРИЗНАЧЕННЯ ТА МЕТА WEB-РЕСУРСУ

2.1 Призначення сайту-візитки

Сайт-візитка призначена для:

опису інформації про компанію;

опису послуг, які надає компанія;

запису відгуків про діяльність компанії.

2.2 Мета оцінювання сайту-візитки

Метою курсового проекту є розробка сайту-візитки та його тестування, що включає в себе:

створення сайту-візитки;

тестування відображення сайту у різних бравзерах;

тестування відображення шрифту сайту;

контроль відвідування сайту;

тестування швидкості завантаження сторінок сайту.

3 ВИМОГИ ДО САЙТУ

3.1 Вимоги до сайту-візитки в цілому

Сайт повинен:

коректно відображати сторінки у кодуванні utf-8;

відображати послуги, які надає компанія;

надавати інформацію про компанію.

3.2 Вимоги до структури

Сайт складається з html-сторінок, CSS-стилів та зображень у форматах JPG та GIF.

Папка public_html - коренева папка

- index.html - головна сторінка

- about.html - про компанію

- services.html - послуги компанії

- contact.html - контакти

- help.html - FAQ

- styles.css - головний CSS-стиль сайту

Папка images - папка для збереження картинок

4 ТЕХНІКО-ЕКОНОМІЧНІ ПОКАЗНИКИ

Собівартість сайту-візитки повинен становити не більше 2000 грн.

Термін експлуатації повинен бути не менше 10 тис. год.

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

5 СТАДІЇ І ЕТАПИ ПРОЕКТУВАННЯ

Таблиця 1. Стадії та етапи виконання курсового проекту (КП)

№ етапу

Назва етапу виконання КП

Термін виконання

1

Розробка та затвердження технічного завдання

2

Аналіз технічного завдання, підбір бібліографічних матеріалів, необхідних для виконання роботи, техніко-економічний аналіз

3

Розробка структури сайту

4

Внутрішнє тестування сайту

5

Перевірка якості сайту

6

Зовнішнє тестування сайту

7

Оформлення пояснювальної записки

8

Попередній захист курсового проекту

9

Захист курсового проекту

6 ПОРЯДОК КОНТРОЛЮ І ПРИЙМАННЯ

Контроль процесу виконання КП проводить керівник курсового проекту.

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

7 ВИМОГИ ДО ДОКУМЕНТАЦІЇ

Документація повинна відповідати вимогам ЄСКД та ДСТУ

Комплект конструкторської документації:

пояснювальна записка;

додатки;

графічний матеріал:

В комплект конструкторської документації можуть вноситися зміни та доповнення в процесі розробки.

Під час виконання КП в дане технічне завдання можуть вноситися зміни та доповнення.

ДОДАТОК Б

Вихідні коди

index.html

<html>

<head>

<title>Компанія "Веселий студент" - Курсова робота Володимира Melkiy.te.uaа</title>

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

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div align="center" >

<table border="0" cellpadding="0" cellspacing="0" width="683">

<tr>

<td><img src="images/spacer.gif" width="42" height="1" border="0" alt="" /></td>

<td><img src="images/spacer.gif" width="392" height="1" border="0" alt="" /></td>

<td><img src="images/spacer.gif" width="13" height="1" border="0" alt="" /></td>

<td><img src="images/spacer.gif" width="177" height="1" border="0" alt="" /></td>

<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>

<td><img src="images/spacer.gif" width="57" height="1" border="0" alt="" /></td>

<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>

<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>

</tr>

<tr>

<td colspan="7" id="header"><blockquote>

<blockquote>

<p>Компанія "Веселий студент"</p><!-- Назва сайту на сторінці -->

</blockquote>

</blockquote></td>

<td><img src="images/spacer.gif" width="1" height="193" border="0" alt="" /></td>

</tr>

<tr>

<td rowspan="4" id="border7"><!-- текст --></td>

<td rowspan="4" align="left" valign="top" id="content"><h1><center>Вітаємо Вас на головній сторінці</center></h1><!-- Заголовок -->

<hr>

<!-- опис -->

<p>Компанія "Веселий студент"</p>

Якщо Ви потрапили на цю сторінку, значить Ви хочете створити собі web-сайт.<br>

Наша компанія працює у сфері web-розробки з 2006 року.<br>

Серед наших клієнтів є такі компанії, як [melkiy] corporation та VVcompany<br>

<hr>

<td colspan="4" rowspan="4" align="left" valign="top">

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td><img src="images/spacer.gif" width="13" height="1" border="0" alt="" /></td>

<td><img src="images/spacer.gif" width="177" height="1" border="0" alt="" /></td>

<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>

<td><img src="images/spacer.gif" width="57" height="1" border="0" alt="" /></td>

<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>

<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>

</tr>

<tr>

<td rowspan="2" id="border1"><!-- текст --></td>

<td height="19" id="border2"><!-- текст --></td>

<td rowspan="2"><img name="index_r2_c5" src="images/index_r2_c5.jpg" width="1" height="227" border="0" id="index_r2_c5" alt="" /></td>

<td rowspan="2" id="border3"><!-- текст --></td>

<td rowspan="4"><img name="index_r2_c7" src="images/index_r2_c7.jpg" width="1" height="344" border="0" id="index_r2_c7" alt="" /></td>

<td><img src="images/spacer.gif" width="1" height="19" border="0" alt="" /></td>

</tr>

<tr>

<td rowspan="2" align="left" valign="top" bgcolor="#030303">


Подобные документы

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

    дипломная работа [2,4 M], добавлен 20.10.2013

  • Проектування технологій навчання з теми "Створення веб-сайту засобами HTML". Організація та методика проведення лекційного, лабораторного та практичного (семінарського) заняття. Розробка дидактичних матеріалів до інноваційних технологій навчання.

    курсовая работа [2,3 M], добавлен 21.12.2013

  • Мова розмітки гіпертекстових сторінок HTML. Каскадні таблиці стилів CSS. Розробка інформаційного Web-сайту: меню навігації, структура та інтерфейс сайту. Тестування, впровадження та тестування розробленого проекту. Безпека умов праці при використанні ПК.

    дипломная работа [1,3 M], добавлен 20.05.2012

  • Структура, характеристики та принципи розробки сучасного сайту-візитки. Розробка дизайну. Характеристика сайту кав’ярні. Основні вимоги до програми та до інтерфейсу. Опис проектних рішень, інструментів та підходів до розробки з обґрунтуванням їх вибору.

    дипломная работа [3,2 M], добавлен 19.03.2017

  • Історія розвитку та теорія Web-дизайну. Ефективність програмно-апаратних засобів. Створення Web-сторінки за допомогою мови HTML. Розробка концептуальної моделі підручника. Структура HTML документу, його інформаційних потоків. Форматування тексту, фрейми.

    курсовая работа [1,3 M], добавлен 29.05.2012

  • Принципи створення WEB-сторінок. Правила і програми для створення електронних публікацій. Гіперпосилання. Використання JAVA-скриптів при створенні HTML документу. Графіка у HTML-документах. Утворення та відправлення повідомлень електронної пошти.

    реферат [177,1 K], добавлен 19.10.2007

  • Опис інформаційного забезпечення системи для розробки сайту. Технічне завдання на розробку web-сторінки. Комплект засобів, проектування та завантаження сторінок. Тестування сайту в різних браузерах. Розрахунок собівартості та ціни програмного продукту.

    дипломная работа [1,8 M], добавлен 14.05.2012

  • Сайт як інформаційна одиниця мережі Інтернет. Просування сайту за допомогою дошок оголошень. Створення web-сторінок за допомогою мови HTML. Послуги, які надають web-ресурси з пошуку роботи. Пошукові системи, сайти та портали з працевлаштування.

    курсовая работа [59,3 K], добавлен 02.10.2014

  • Поняття мови РНР - скриптової мови програмування, яка була створена для генерації HTML-сторінок на стороні веб-серверу. Можливості і використання PHP, її переваги і недоліки. Розроблення сайту для турагенства за допомогою гіпертекстової розмітки HTML.

    контрольная работа [11,2 M], добавлен 21.04.2015

  • Загальна характеристика особливостей алгоритму просування сайту. Розробка основних елементів фірмового стилю, що складають пакет рекламної кампанії. Етапи розробки Web-сайту компанії "Гранд Авто". Особливості програмної частини і структури сайту.

    дипломная работа [3,3 M], добавлен 26.02.2012

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.