Урок 18. Інформаційна структура сайту. Інструментальні засоби для веб-розробки

18.1. Інформаційна структура сайту

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

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

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

Стандартна. Основна Web-сторінка містить посилання на інші документи Web-сайту, а документи містять посилання, відповідно, на основну Web-сторінку. Це найпростіший і найчастотніший спосіб організації Web-сайту. 

Основна сторінка
Стандартний спосіб організації Web-сторінок

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


Каскадний спосіб організації Web-сторінок

Хмарочос. У даній моделі відвідувачі можуть опинитися на деяких сторінках, тільки якщо вони йдуть вірним шляхом. Це нагадує підйом до потрібної кімнати у великому хмарочосі. 

Схема організації Web-сторінки, яка називається “хмарочос”.

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


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

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

18.2. Інструментальні засоби для веб-розробки

  1. Ручна за допомогою HTML
  2. За допомогою програмних засобів розробки сайтів
  3. За допомогою інструментальних систем таких як CMS
  4. З використанням популярних на цей час фреймворків
  5. На SaaS-плат­формах у CLOUD
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, CMS) — комп'ютерна програма чи система, що використовується для забезпечення і організації сумісного процеса створення, редагування та управління текстовими і мультимедійними документами (вмісту чи контента). Звичайно, що встановлення CMS робиться вже на вибраному хостингу. При цьому як мінімум вимагається FTP доступ та дозвіл роботи MySQL.
Таким чином, відділення дизайну від контенту є головною відміною особливістю динамічних сайтів від статичних.

Теги alternate, hreflang, media, type - навіщо і як їх використовувати

Немає коментарів:

Дописати коментар

Примітка: лише член цього блогу може опублікувати коментар.