8.3. Засобу розробки web-документів
Практично для всіх областей застосування програмних продуктів характерна та сама закономірність: технології створення продуктів, принципи їхнього зовнішнього оформлення і концепції взаємодії з користувачем розвиваються одночасно. Не є виключенням у цьому відношенні й Інтернет. Так це і зрозуміло, адже Інтернет - це "користувальницький інтерфейс у квадраті", оскільки практично всі його відвідувачі є потенційними творцями Web-матеріалів, на форму подачі яких впливають рівень профес-сиональной підготовки, вік, культурні і релігійні погляди їхніх авторів. Сюди ж варто додати запас вільного і "интернетовского" часу, яким розташовує автор. Приблизно ті ж фактори впливають і на вибір використовуваних інструментів підготовки Web-матеріалів до публікації.
Існує досить поширена думка, що Web-вузли пройшли у своєму розвитку три стадії і, таким чином, найбільш сучасні з них відносяться до третього покоління. Така градація прямо зв'язана з еволюцією тих інструментів, за допомогою яких створювалися представники кожного покоління.
Для Web-вузлів першого покоління була характерна однотипна структура -звичайний сайт складався з однієї лінійної сторінки, що представляла собою після-
304
довательность тексту і "картинок". При цьому графічні елементи створювалися за допомогою звичайних графічних редакторів, орієнтованих на тверді вимоги видавничої справи; унаслідок цього зображення виходили дуже високої якості, але були дуже вимогливі до наявних обчислювальних ресурсів. Сторінки писали на "чистому" HTML з використанням найпростіших редакторів, тому що текстові процесори з їх внутрішніми форматами документів не годили для Інтернету, головними вимогами якого були і залишаються компактність і переносимость на інші платформи. От коли був пік популярності редактора Notepad (Блокнот), що входить у набір стандартних додатків MS Wіndows. Деякі "специ" і зараз немає, та й заявлять, що професіонали повинні працювати тільки в ньому. Таке пуританство, звичайно, може викликати повага (як храм, побудована без єдиного цвяха, так ще й однією тільки сокирою), але з погляду продуктивності праці і приступності для широких мас не витримує ніякої критики.
Сторінки вузлів другого покоління вже містили інтерактивні елементи, що забезпечували більш активна участь користувача у формуванні вигляду Web-документа, що переглядається. Найпростішими з таких елементів були посилання з контактними поштовими адресами, що забезпечували виклик програми електронної пошти. Трохи пізніше з'явилися сторінки, що генерувалися сценаріями, що виконувалися по запитах користувачів. Такі зміни стали можливі завдяки розширенням HTML і його спільного використання з іншими технологіями (PERL, CGІ і т.п.). Проте основними інструментами створення сторінок як і раніше залишалися текстові редактори. У результаті сайты другого покоління були так само важко керовані, як і їхні попередники, і так само ненадійні. Заслугою цього покоління вузлів з'явилося те, що вони продемонстрували практично безмежні можливості мов розмітки - HML і XML (extensіble Marcup Language) - у формуванні вигляду Web-сторінок. Потрібні були інструменти, що дозволили б звести до мінімуму ручна праця і тим самим перетворити Web-дизайн у різновид народної творчості.
Отже, можливість (Інтернет) породила попит (бажання опублікуватися), а попит викликав пропозицію (засобу розробки web-матеріалів), И вони не змусили себя довго чекати, з'явившись у такій кількості і розмаїтості, що без їхньої класифікації просто не обійтися. Але колись необхідно визначити ті ознаки, що можуть бути покладені в основу класифікації існуючих засобів розробки. Основні з них, на наш погляд, що випливають.
1. Необхідний рівень кінцевого продукту, тобто що повиннео стати результатом
застосування відповідного інструмента (елементи сторінок, окремі страни
цы, сайты, сервери).
2. Ступінь автоматизації процесу розробки і використання технології
WYSІWYG.
3. Діапазон підтримуваних Інтернет-технологій (маються на увазі технології
представлення інформації й обміну нею між користувачем і Web-ресурсом).
305
Перший варіант класифікації має на увазі поділ засобів розробки по ознаці цільової спрямованості. Основними групами в цій класифікації є:
o Вузько спеціалізовані програми (утиліти), орієнтовані на реализа
цию окремих елементів web-документів. Призначені для генерації специфич
ных частин сторінок (списків, таблиць, фреймів, фор.м и т.п.) чи механізмів (лічильників, гостьових книг). Багато утиліт забезпечують реалізацію интерфейсных
елементів, що потім легко вбудовуються в HTML-сторінки. Часто так реалізують кнопки, сенсорні карти, анімаційну графіку. Досить велика група утиліт призначена для конвертування файлів різних типів у HTML-текст.
o Програми (як правило, прості текстові чи редактори "програмістські" редактори, що не доповнюють текст, що вводиться, елементами форматування), предназ наченные для створення окремих чи сторінок невеликих вузлів мовою HTML.
o Розвиті HTML-редактори, що забезпечують підтримку всього процесу раз
работки - від проектування до розміщення готового сайта на сервері. У багатьох
випадках такі засоби розробки підтримують можливість супроводу
сайта, надають деякі інструменти для адміністрування сервера.
За рівнем наочності засобу розробки можна розділити на три категорії:
o не забезпечують ніяких засобів візуалізації результатів розробки і
потребуючі перегляду розроблювальних сторінок у зовнішньому броузере (Notepad);
o обеспечивающие автоматичне форматування і "підсвічування" синтаксису
HTML-тексту, а також надають можливість перегляду результату розробки
(у ході її виконання)власними засобами (HotDog, Arachnofіlіa, HomeSіte);
o візуальні редактори, що забезпечують роботу в режимі WYSІWYG, що не
вимагають перегляду в зовнішньому броузере, а іноді навіть не передбачають роботу з
"чистим" HTML-текстом (Netscape Composer, MS FrontPage, Macromedіa Dreamweaver),
Широта охоплення Інтернет-технологій - характеристика досить умовна. Самі складні і просунуті технології теоретично можуть бути реалізовані й у Notepad. Благо, в основі навіть такої екзотики, як віртуальна реальність, лежить усі той же текст (правда, спеціальною мовою VRML - Vіrtual Realіty Modelіng Language). Усе визначається трудомісткістю реалізації цих технологій. Наприклад, важко представити, що, працюючи в простому редакторі, хтось вручну стане вважати пикселы картинки для створення сенсорної карти. Скоріше, автор просто відмовиться від використання подібної можливості на своїй сторінці. Якщо ж йому удасться знайти інструмент, що підтримує створення сенсорних карт, і при цьому обеспечивающий сполучення простоти реалізації з високою якістю формованого зображення, то питання про включення в страницу сенсорної карти відпаде сам собою. Автору і відвідувачам його сайта залишиться лише захоплюватися наочністю добре продуманого зображення і зручністю роботи (природно, за умови дотримання рекомендацій, приведених у цій книзі).
Прикладом такого інструмента може служити програма CuteMap фірми GlobalSC APE. Загальний вид основного вікна додатка показаний на мал. 8.20.
Рис. 8.20. Основне вікно CuteMap - інструмента для створення сенсорних карт
CuteMap має комбінований користувальницький інтерфейс, що представляє собою сполучення MDІ (для одночасної роботи з декількома картами) і Робочої книги, що дозволяє легко переключатися між зображеннями сенсорної карти, переходячи з однієї сторінки на іншу.
CuteMap надає розроблювачу наступні основні можливості
o Візуальне редагування сенсорної карти з одночасним отображени
їм внесених змін у спеціальному вікні редактора;
o Збереження створеної сенсорної карти (чи її копіювання) в існую
щем HTML-документі;
o Застосування технології drag-and-drop, що дозволяє створювати сенсорні кар
ти за допомогою різноманітних панелей інструментів, без використання ручного
редагування HTML-коду
o Вибір броузера для оперативного перегляду результатів роботи.
o Роздільна установка квітів для обраних і невибраних зон при одновре
менной роботі з декількома сенсорними картами.
Отже, практично про кожній з технологій можна сказати, підтримується вона чи ні тим чи іншому засобу розробки. Часто саме це є одним з основних критеріїв вибору інструмента. З іншого боку, не слід забувати про якість і повноту реалізації тих чи інших можливостей конкретним засобом розробки. На жаль, не рідкі ситуації, коли заявлена підтримка великої кількості ефективних технологій виливається у вкрай низьку надійність і громіздкість
307
інструмента, наявність схованих обмежень, невисока якість кінцевого продукту. 111 пернет розвивається занадто швидко, що поки не дозволяє довести до досконалості іn і один з відомих нам інструментів. Очевидний висновок, що лише одним засобом, навіть універсальним (тобто орієнтованим на створення складних Web-документів), обійтися не удасться. Кожний з Web-дизайнерів поступово формує власний набір інструментів, вигострює майстерність володіння ними і на практиці удосконалює досвід створення якісних сторінок. Приведенні нижче (мал. 8.21) схема може служити своєрідним компасом у постійно розширюється світі інструментів створення Web-матеріалів.
До сожелению, формат книжкової сторінки не дозволив відобразити тут же місце розташування конкретних представників цього світу, у зв'язку з чим прийдеться обмежитися словесною характеристикою хоча б двох з них.
Рис. 8.21. Класифікація інструментів розробки Web-додатків
Почнемо з досить простих і дешевим (найчастіше безкоштовних) HTML-редакторів. На сайтах і у файлових архівах безкоштовного й умовно безкоштовного програмного забезпечення можна знайти досить великі колекції подібних редакторів. Одним з найбільш популярних продуктів даної категорії є Arachnophіlіa 3.6. Програма воістину чудова, можна сказати шедевр, особливо з огляду на, що її авторство належить одній людині (Paul Lutus), a платою за користування цим редактором він вважає гарні вчинки, що ми
308
повинні робити щодня. І [об це лірика, а редактор дійсно заслуговує добрих слів. З 1996 року по 1998 він усмоктував нові можливості, удосконалювався, але зберіг досить скромні розміри і високу продуктивність. Парис. 8.22 ми навмисно представили всі доступні користувачу панелі інструментів, щоб показати, скільки можливостей мови 1ІTM L підтримує цей редактор.
Рис 8.22. Вікно HTML-редактора Arachnophіlіa 3.6
До слова сказати, користувальницький інтерфейс цієї програми може бути гарним прикладом погодженості і продуманості, а довідкова система містить не тільки інформацію про програму, але і деякі зведення про Інтернет для починаючих користувачів. Програму корисно використовувати при вивченні HTML. Синтаксис виділяється кольором, добре реалізоване автоматичне форматування вихідного тексту опису сторінки. Arachnophіlіa об'єднала в собі безліч функцій, звичайно реалізованих допоміжними утилітами (генерація таблиць, форм, конвертування RTF-файлів і багато чого іншого). Програма здатна викликати до шести різних броузеров для перегляду результатів роботи, причому настроювання виконується дуже просто. Цікаво, що автор пред-лагает використовувати свій редактор у якості допоміжного для MS FrontPage
309
і затверджує, що цим будуть усунуті деякі слабкі сторони згаданого колоса!.' Ми обмежимося лише невеликим резюме: для розробки окремих сторінок і невеликих сайтов, терміни здачі яких не лімітовані і хочеться глибше розібратися в мові HTML (а засобів на придбання могутніх інструментів немає), Arachnophіlіa- кращий вибір.
Наступний інструмент - це HotDog, редактор дуже популярний у середовищі web-дизайнерів "першої хвилі", що починали з Notepad і звикли працювати з HTML-кодом. HotDog не заважає працювати в звичному їм стилі, але істотно підвищує продуктивність праці за рахунок синхронного показу "породжуваної" сторінки і безлічі сервісних можливостей. Робота в цьому редакторі сполучить як ручне введення HTML-тегов із клавіатури, так і звертання до численних генераторів типових фрагментів HTML-коду. В другому випадку натискання піктограм, що позначають теги і групи тегов на інструментальних панелях, приводить до появи в поточній позиції вихідного тексту сторінки відповідного фрагмента HTML-коду. В міру введення і редагування тексту сторінки, у нижній частині екрана можна спостерігати, як змінюється образ цієї сторінки, формований одним із броузеров, установлених на машині користувача (якщо їх трохи, те можна вибрати, яким саме).
Творці HotDog (фірма Sousage) широко використовували засобу мультимедиа. Багато процесів при роботі супроводжуються досить нетривіальними звуками, що, звичайно, віднімають деяка кількість системних ресурсів, але помітно піднімають настрій користувача, що в остаточному підсумку приводить до підвищення продуктивності його праці. Утім, якщо "собачі голоси" почнуть дратувати, те їхній легко відключити...
Інтерфейс редактора наочний і досить точно відповідає функціональному призначенню цієї програми. Дуже розвиті засоби підтримки користувача, багато цікавих рішень у рамках традиційних можливостей графічного Wіndows-ориентированного інтерфейсу. До достоїнств HotDog варто віднести безліч сервісних функцій - "ізюминок", яких так не вистачає при роботі над сторінками в більш серйозних системах розробки Web-матеріалів. До таких можливостей відносяться:
o "багатомісний" буфер переносу, у який можна помістити часто исполь
зуемые текстові фрагменти і витягати їхній відтіля в міру необхідності;
o повний список тэгов мови HTML із усіма їхніми атрибутами, організований у
виді упорядкованого за алфавітом дерева (представлено в правій частині мал. 8.23),
з якого теги можна просто перетаскувати на розроблювальну сторінку тради
ционным способом drag-and-drop;
o нумерація рядків вихідного тексту і лінійки на результуючому образі стра
ницы, які можна незалежно включати і відключати.
Цей перелік далеко не повний; редактор підтримує безліч інтернет-технології, - від анімаційної графіки і сенсорних карт, до аплетов і CGі-скрип-
310
Рис. 8.23. Вікно редактора HotDog
