1. Порядок виконання роботи

1. Обрати тематику майбутнього сайту

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

3. Обрати програми, що потрібні для створення

4. Створити сайт

5. Заповнити службовою та довідковою інформацією мета-теги

6. Як розділ, винести на сайт відомості про автора

7. Розмістити сайт на сервері і протестувати

2. ЗМІСТ ЗВІТУ

1. Назва та мета виконання індивідуальної роботи.

2. Тематика та структура проектованого веб-сайту.

3. Поетапний опис створення сайту (код).

4. Скрін сторінок розробленого веб-сайту.

5. Адреса розміщеного на сервері сайту.

6. Висновки.

Практичне завдання №1

Тема: Основні етапи розробки веб-сайту

Мета: Ознайомитися з основними етапами розробки веб-сайту. Розробка стратегії створення індивідуального сайту. Вибір теми, стилю майбутнього сайту. Розробка структури сайту.

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

Теоретичні відомості Основні етапи розробки веб-сайту

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

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

Роботу над кожним проектом слід проводити в строгій відповідності з приведеними нижче етапами робіт з розробки сайту.

1. Передпроектна підготовка. Ідея

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

2. Розробка дизайну сторінок

   1. Дизайн-концепція сайту (креативний дизайн)

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

2. Технічний дизайн

Розробка логічної і фізичної структури ресурсу. Компонування сторінки, верстальної структури. Елементи навігації

3. Верстка

Створення шаблонів сторінок. Перевірка правильності написання коду. Верстка сторінок сайту на основі затвердженого дизайну типових сторінок. Збірка сторінок.

4. Інформаційне наповнення сайту

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

5. Програмна частина проекту

   1. Інтеграція сайту з системою управління

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

2. Програмування, запуск проекту

На цьому етапі допрацьовується функціонал, що не міститься у стандартному складі системи управління.

6. Тестування сайту в Інтернеті

Тестування сайту на наявність помилок та коректність функціонування в різних браузерах (Internet Explorer, Netscape, Opera, Safari). Перевірка ідентичності відображення сторінок в різних екранних роздільних здатностях в різних браузерах.

7. Розміщення сайту в Інтернеті

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

8. Просування сайту

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

9. Подальша підтримка сайту

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

Ідея

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

Отже, потрібно вирішити:

• Навіщо створювати сайт (чи потрібно це взагалі)

• Про що буде сайт (тематика)

• Що це буде (домашня сторінка, портал, або щось ще)

• Відмінність від сайтів з такою ж тематикою (якщо це не домашня сторінка)

• Яка буде аудиторія сайту (стать, вік, інтереси і т.д.)

• Якого роду сервіси будуть присутні на сайті (форум, каталог, пошта і т.д.)

• Плани на найближче майбутнє

• Плани подальшого розвитку (перспективи)

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

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

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

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

Структуру сайту можна умовно розділити на зовнішню і внутрішню.

Внутрішня структура сайту

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

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

- Головна сторінка (розповідь про себе)

- Фотографії

- Контактна інформацію (e-mail)

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

- Головна сторінка (розповідь про себе) - Фотографії - Влітку - В інституті - Мої друзі - Про мене - Моя Творчість - Вірші - Музика - Гостьова книга - Контактна інформацію (e-mail)

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

Зовнішня структура

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

Шапка сайту
Логотип	Банер	Пошук
Меню	Основний текст	Новини
		Додаткова інформація
Банер
Інформація про розробника	Контактні адреси та телефони	Лічильники

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

Оформлення сайту

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

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

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

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

Кодинг і програмування

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

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

Але HTML і CSS відповідають лише за розмітку зовнішнього вигляду документа (сторінки), а для того, щоб реалізувати складніші речі, наприклад, на зразок гостьової книги, або пошуку по сайту, або форуму, потрібні вже інші засоби. Потрібно знати мови програмування для веб – PERL, PHP, ASP або інші.

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

Отже, якщо HTML і CSS - це каркас на якому все тримається, то програми-скрипти (на PERL, PHP, ASP) - це механізм, розташований усередині цього каркаса. Веб-програмування вже складніший для освоєння предмет, ніж HTML або CSS, проте, тут знову ж таки немає нічого складного, адже є готові рішення, так звані готові програми-скрипти, які розповсюджуються в Інтернет, як на безкоштовній, так і платній основі.

Тестування і доопрацювання

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

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

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

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

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

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

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

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

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

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

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

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