Тема уроку: "Створення веб-ресурсів"

Нова інформаційна технологія досягла такого розвитку, що, мабуть, не залишилося сфер людського життя, не затронутиx глобальною мережею Internet. В даний час інтерес до мережі Internet продовжує зростати. Розроблений в роки інформаційного вибуху Internet стає невід'ємною, частиною життя більшості людей всього світу.
Розвиток сучасних технологій сприяє появі нових спеціальностей в цій сфері діяльності. Ще кілька років тому про спеціальності Web-дизайнера ніхто не знав, а сьогодні вона є однією з найпопулярніших в області інформаційних технологій.
Невід'ємна частина Internet, WWW (World Wide Web, в перекладі з англійського "всесвітня павутина"), дозволила по-новому користуватися давно відомими в усьому світі текстовими посиланнями. Коли автор журнальної статті чи книги поміщає в тексті знак виноски, в нижній частині сторінки, крім пояснення, можуть бути вказані джерела додаткової інформації, наприклад, інша сторінка або книга. В Internet укладачі комп'ютерних "сторінок" роблять практично те ж саме, підкреслюючи або виділяючи в документах ключові слова або піктограми.
Виділені слова і піктограми вказують користувачеві, що в Internet є додаткова інформація на цю тему, часто на іншій сторінці. Цю сторінку можна відразу ж викликати на екран і переглянути, хоча вона, можливо, знаходиться зовсім на іншому комп'ютері і навіть в іншій країні. За допомогою цього технічного прийому користувач приєднується до самих документів, а не просто наводить про них довідки.
Крім того, в Web можна зберігати і виводити на екран графіком і фотознімки, відтворювати звук, а також переглядати анімацію і відеозапису.

World Wide Web є однією з наймолодших послуг Internet: WWW народилася в 1990 році в європейському дослідницькому центрі CERN, а в 1992 році почалося практичне застосування цієї технології за межами CERN. З кінця 1993 року почався воістину вибухове зростання WWW, який привів до того, що сьогодні цей вид інформаційного сервісу Internet є найпопулярнішим, найбільш динамічно розвиваються і багато в чому визначає сучасний вигляд всесвітньої мережі.
Кількість WWW-серверів подвоюється в середньому кожні три місяці, причому кількість WWW-серверів комерційних організацій зростає ще швидше. Темпи зростання WWW, які проявляються в збільшенні як числа WWW-серверів, так і кількості доступних через WWW документів і баз даних, перевищують навіть дуже високі темпи зростання загальної кількості користувачів Internet.

Спочатку WWW-сервери створювалися в організаціях, що мали досить великий досвід роботи в глобальних мережах: в університетах, академічних та галузевих науково-дослідних інститутах та центрах, комерційних фірмах, які є сервіс-провайдерами Internet. Сьогодні WWW-сервери мають сотні державних, комерційних і громадських організацій різного профілю діяльності. Якщо проаналізувати цей перелік, то виявиться, що поки найбільш численними є три категорії організацій, які створили своє представництво в Internet: фірми, що працюють в області комп'ютерних технологій, вищі навчальні заклади та науково-дослідні організації природничо-наукового і технічного профілю. Однак спектр WWW-серверів, що розглядається з точки зору тематики інформаційних ресурсів і підтримуючих їх організацій, безперервно розширюється. Створюються сервери урядових органів, громадських об'єднань, засобів масової інформації, виробничих підприємств, фірм, що працюють в сфері обслуговування. З'являються електронні версії суспільно-політичних і спеціалізованих періодичних видань.
Цікавою тенденцією, що намітилася ще навесні 1996 року, є поява значної кількості серверів комерційних банків, фінансових корпорацій, інвестиційних компаній, бірж, брокерських фірм та мережевих інформаційних систем для сфери економіки і фінансів.
СТВОРЕННЯ ВЕБ САЙТУ

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

1. Ідея

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

3. Розробка оформлення сайту

4. Кодинг, програмування

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

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

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

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

ІДЕЯ

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

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

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

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

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


РОЗРОБКА СТРУКТУРИ


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

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


ВНУТРІШНЯ СТРУКТУРА САЙТУ.

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

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

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

тому на сайті може додатися розділ Моя Творчість.

- Головна сторінка (розповідь про себе) - Фотографії - Влітку - В інституті - Мої друзі - Про мене

- Моя Творчість
- Вірші

- Музика

- Гостьова книга - Контактна інформацію (e-mail)

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


ЗОВНІШНЯ СТРУКТУРА

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

Шапка сайту

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

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

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


ОФОРМЛЕННЯ САЙТУ

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

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

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

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


КОДИНГ І ПРОГРАМУВАННЯ


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

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


ТЕСТУВАННЯ І ДООПРАЦЮВАННЯ


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

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

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


ПРОГРАМИ, ЩО ПОТРІБНІ ДЛЯ WEB-МАСТЕРИНГУ


Для виготовлення професійних сторінок доведеться вивчити декілька професійних програм.


ВІЗУАЛЬНІ РЕДАКТОРИ


Дозволяють швидко розробляти web-сторінки і корегувати вже написані, але з ними потрібно бути обережними, оскільки, завдяки саме їм, сторінка може погано відображатися в браузері. Найвідомішим є DremWiever, але зрештою можна використовувати те, що більше подобається. Часто згодом доводиться вручну виправляти код, що був згенерований даними програмами.


ПРОГРАМИ ОБРОБКИ РАСТРОВОЇ ГРАФІКИ


Це одні з найважливіших програм, які доведеться освоїти. Вона нададуть змогу веб-розробнику здійснити: • Сканування фотографій; • Корекція відсканованих і готових фотографій, зокрема - тонова і колірна корекція; • Ретуш фотографій; • Розуміння відмінностей у форматах графічних файлів; • Грамотне використання фільтрів;

Як конкретні програми можна привести наступні: • Adobe PhotoShop - дана програма є лідером в області графічних програм такого роду. • Adobe ImageReady - підтримує фільтри від Adobe PhotoShop і є незамінною для створення анімованих Gif-зображень. Зрештою, ідеальних редакторів немає, деякі краще роблять одне, деякі – інше, тому для складніших або специфічних завдань можна використовувати інші програми


ПРОГРАМИ ОБРОБКИ ВЕКТОРНОЇ ГРАФІКИ


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

тому освоювати їх доведеться окремо. Але, освоївши їх, можна виготовляти фірмові візитки, бланки, брошури. Типовими представниками даного класу є Corel DRAW і Adobe Illustrator - обидва є лідерами в своїх областях і, відповідно, мають останні досягнення в області векторної графіки. На противагу ним можна порадити програму Corel Xara.
Дана програма, на відміну від двох попередніх, є швидкою і маленькою, але деякі ефекти і дії, що є доступними в інших програмах, в ній зробити або важко, або взагалі неможливо.


ПРОГРАМИ ПЕРЕГЛЯДАННЯ WEB-СТОРІНОК


Це браузери - в даний час популярними є три браузера - це Microsoft Internet Explorer, Opera та Mozilla FireFox. Для контролю зовнішнього вигляду сторінок доведеться скористатися власне ними. Якісна веб-сторінка повинна однаково виглядати в будь-якому з цих браузерів.


ПРОСТИЙ ТЕКСТОВИЙ РЕДАКТОР


Знадобиться для ручного виправлення і додавання HTML-коду, оскільки існуючі візуальні редактори не можуть повністю контролювати процес створення web-сторінки. Як приклад підійде звичайний Блокнот із стандартного постачання Windows або один HTML-редакторів, які мають вбудовані команди на перевірку правильності тегів і структури документів.


ТЕКСТОВИЙ ПРОЦЕСОР


Потрібен для набору тексту, перевірки орфографії і виправлення помилок в розпізнаних текстах. Як приклад - звичайний Microsoft Word.

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