Урок 26. Створення та адміністрування сайту

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

Але багато не беруть до уваги одну деталь - Білл Гейтс озвучив цю фразу в далеких дев’яностих роках. Якщо дехто тільки замислюєтеся про інтернет-маркетинг – то він вже спізнився на тридцять років.

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

Ви вже знаєте, що веб-сайт — це набір веб-сторінок, пов’язаних між собою темою, навігацією та доменним іменем.

Залежно від технології створення виділяють такі типи сайтів.

1. Статичні сайти, що містять статичні HTML або XHTML-сторінки. Статичні веб-сторінки — це статичні файли (набір тексту, таблиць, малюнків тощо), які створюються за допомогою мови розмітки HTML (мають розширення html або htm) і зберігаються в готовому вигляді у файловій системі сервера.

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

3. Flash-сайти — це інтерактивні програми, розроблені в середовищі Macromedia Flash. Основним інструментом розробки flash-програм є векторна графіка (інтерактивна векторна анімація для Веб). Flash додає сайтам динамічності й інтерактивності.

4. Комбіновані сайти, у яких використовують вищезазначені технології створення сайтів.

Для створення сайтів різних типів використовуються різноманітні інструментальні засоби для веб-розробки:

1. Ручна за допомогою HTML

2. За допомогою програмних засобів розробки сайтів

3. За допомогою інструментальних систем таких як CMS

4. За допомогою онлайн-систем конструювання сайтів

1. Ручна за допомогою HTML. При появі стандарту HTML, цей метод був найпоширенішим. Основною програмою для розробки був Notepad. Але у цього методу є істотні недоліки. Цей спосіб досить трудомісткий. І до того ж зробити нормальний Web-сайт без CSS, JavaScript та інших мов програмування досить важко.

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

Виділимо декілька інструментальних систем для розробки HTML:

• програми, що мають у своєму складі візуальні редактори (design-based editor) – засоби, які автоматично формують необхідний HTML-код, дозволяючи розробляти Web-сторінки в режимі WYSIWYG;

• програми-редактори (code-based editors), які надають редактор і допоміжні засоби для автоматизації написання коду.

Розглянемо найбільш популярні design-based редактори:

• Adobe DreamWeaver – один з кращих візуальних редакторів, що генерують HTML код. Він дозволяє працювати в декількох режимах одночасно, з HTML кодом або у візуальному режимі. Але основним недоліком є те, що програма генерує занадто “важкий” код, додаючи багато зайвого. Але, якщо знайомі з HTML, тоді текст HTML можна відредагувати. Ця програмна система випускалася до 2005 року компанією Macromedia, після чого була придбана фірмою Abode.

• Microsoft FrontPage – це простий в засвоєнні і зручний Web-редактор для проектування, підготовки і публікації Web-сайтів. Завдяки інтеграції з сімейством продуктів MS Office, звичного інтерфейсу і великої кількості шаблонів програма дозволяє швидко засвоїти роботу навіть початківцям, які знайомі з основами роботи в MS Word. При цьому FrontPage не можна назвати рішенням для «чайників»: програма надає широкі функціональні можливості та різноманітні засоби оптимізації при колективній розробці. Вона дозволяє швидко створювати динамічні комплексні Web-вузли практично будь-якої складності.

Розглянемо популярні code-based редактори:

• Adobe HomeSites – це потужний пакет, до складу якого входить багато корисних функцій і підпрограм. Об’ємний дистрибутив редактора включає в себе, крім самого редактора, редактор TopStyle для редагування таблиць CSS, перевірку орфографії та багато іншого.

• HotDog – цілком професійний редактор. Вбудована підтримка дуже широкого набору інструментів, що використовуються в Web-дизайні: HTML, CSS, JavaSript, VBScript, ASP, а також DOM – об’єктну модель документа, що використовується при програмуванні на VBScript і JavaScript. При цьому перевірка синтаксису цих інструментів може налаштовуватися в досить широких межах. Наприклад, HTML можна перевіряти на відповідність версії 3.2, 4, або на “перегляді” тільки в Internet Explorer та інше.

• AceHTML – основні функціональні можливості – подібно HomeSite і FirstPage. З цінних якостей AceHTML треба відзначити вмілу роботу з кодуваннями російської мови. Другий плюс – дуже непогана вбудована утиліта для перегляду графічних файлів у комп’ютері. У просторому вікні відображаються ескізи всіх картинок в директорії, а також їх параметри і розмір у пікселях.

3. Використання інструментальних систем CMS для створення динамічних Web-сайтів

Для створення динамічного сайту можливі два шляхи.

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

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

Другий шлях є основним на цей час для створення складних, сучасних сайтів, порталів, Веб-додатків. Це метод з використанням CMS. Як ви вже знаєте із попередніх уроків, система керування вмістом, або CMS (англ. Content Management System), — це програмне забезпечення, завдяки якому здійснюється керування вмістом сайту.

4. За допомогою онлайн-систем конструювання сайтів

Онлайн-система конструювання сайтів (конструктор сайтів) — сервіс, розташований безпосередньо в мережі Internet, який надає можливість з готових шаблонів створити сайт.

Популярність таких програм обумовлена такими їхніми перевагами:

• немає необхідності опановувати мовою програмування веб-ресурсів;

• наявність безкоштовних конструкторів сайтів;

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

• оперативна публікація сторінок;

• висока швидкість виконання проєкту;

• можливість редагування в режимі он-лайн;

• зручний інтерфейс.

Досвідчені фахівці знають і про недоліки таких програм:

• нерозв'язність проблеми відсутності потрібного шаблону;

• залежність сайту від сервісу: сервіс закрили — сайт зник;

• громіздка назва.

Приклади онлайн сервісів для конструювання сайтів: Google Sites, A5, Fo, Nethouse, Wix, Umi.

Правила розробки сайту: як створити гарний сайт?

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

Контент сайту

Контент – це термін яким заведено називати наповнення (вміст) певного інформаційного ресурсу.

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

Не менш важливим аспектом створення гарного сайту є й оптимізація контенту для роботи з пошуковими системами - так званий SEO-копірайтинг відповідає за це.

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

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

Дизайн сайту

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

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

Юзабіліті сайти

У погоні за «креативним» дизайном не можна забувати про такий важливий аспект створення гарного сайту, як його юзабіліті. Дослівно з англійського слово «юзабіліті» (useability) означає «можливість використання» і не випадково саме цим терміном прийнято називати зручні для відвідувача зовнішній вигляд, структуру й навігацію сайту.

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

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

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

Функціональність сайту

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

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

Перераховані правила розробки сайту - лише основні. Створення гарного сайту, як і будь-якого іншого якісного продукту, вимагає не тільки знання певних правил, але й досвіду їхнього застосування на практиці, уміння в рамках правил знаходити нестандартні, «свіжі» рішення.