НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ "КИЄВО-МОГИЛЯНСЬКА АКАДЕМІЯ"

Кафедра інформатики

Адаптація електроних макетів до публікації в Internet

Курсова робота
студентки ДКТ-4
Сігаєвої Марини

Науковий керівник:
Бублик В. В.

Київ

1998

План

Вступ

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

Представлення інформації в Internet

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

Адаптація тексту

Текст у Internet-публікації є найбільш інформативною частиною. Справа в тім, що деякі користувачі Internet заради швидкості переглядають тільки текст, вимикаючи перегляд зображень. І заради тієї ж самої швидкості всі користувачі Internet надають перевагу дуже лаконічним і змістовним текстам. І це зрозуміло, адже за кожну хвилину роботи в Internetі користувач віддає власні кошти. Отже, якщо це звичайно не художній твір чи оригінальний документ, доведеться відкорегувати весь текст електроного макету так, щоб він задовільняв двом основним вимогам – змістовність та лаконічність. Тепер щодо структури. Гіпертекстові технології Internet відкривають можливості якісної структоризації тексту. Якщо текст займає більше ніж один-два екрани, його бажано розбити на кілька частин, а потім створити між цими частинами внутрішні посилання. Крім того, іноді варто “приховати” деякі частини текстового документу глибоко в середину WWW-публікації, щоб зробити їх доступними не для всіх користувачів, а лише для тих, кому вони дійсно потрібні. Інтерактивність не повинна відволікати увагу читача від самого тексту, тобто посилань повинно бути значно менше ніж тексту. Для посилань не варто використовувати фрази подібні до “клацніть тут”, краще зробити інтерактивними важливі слова та фрази самого тексту.

Адаптація графіки

Як правило, електроний макет містить досить великі ілюстрації у форматі tiff, eps тощо. В Internetі ці формати не використовуються. Основними вимогами до графічних форматів, які застосовуються в Internet є незалежність від платформи та компактність (а отже швидкість завантаження). Найчастіше використовують формати JPEG (стандарт Joint Photographic Expert Group), GIF (Graphics Intercange Format) та PNG – для растрової графіки, і SHOCKWAVE FLASH – для векторної графіки та анімації.

Формат JPEG від фірми C-Cube Microsystems має максимальну глибину кольору 16 млн. кольорів і використовує алгоритм стиснення з втратами. Для стиснення, зображення ділять на блоки 8х8, і досліджують зміну кольору від блоку до блоку. Відбувається, так зване, квантування кольору: за спеціальним алгоритмом визначається і знищується різниця між кольорами, яка є надлишковою (непомітною для ока). Цей метод може зменшити розмір зображення на 50-70 відсотків. У Internet формат JPEG використовують для представлення фотографій та зображень з великою кількістю напівтонів.

Формат GIF було розророблено фірмою Compuserve у 1987 році. Він використовує алгоритм стиснення без втрат LZW, названий за іменами розробників Лемпеля (Lempel), Зива (Ziv) і Уелша (Welch). За допомогою цього формату можливе трьох-п’ятикратне стиснення кольорових зображень. Особливості цього формату – черезрядкове завантаження, можливість анімації та прозорі області, роблять його чи не найпопулярнішим серед графічних форматів Internet. Єдиний недолік зображення у GIF форматі – обмежена глибина кольору (лише 256 кольорів). Звичайно, при сучасних графічних картах, які можуть відображувати близько 16 млн. кольорів, 256 - це більше ніж архаїчно. Крім того кілька років тому фірма Unisis захистила LZW-стиснення патентом, тому при його комерційному використанні постійно виникають юридичні проблеми. На HTML-сторінках формат GIF найчастіше використовують для зображень, що мають великі області одного кольору, нерівні краї, тощо.

Формат PNG було розроблено для заміни формата GIF. PNG має дві значні переваги. По-перше, він використовує свій власний алгоритм стиснення без втрат. По-друге, має максимальну глибину кольору 48 розрядів. Складність цього формату – вибір фільтру стиснення. На жаль, цей формат не має й сотої частини популярності GIF, тому ще не всі броузери його підтримують.

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

Для того щоб файли цього формату можна було переглядати у броузері достатньо мати відповідний plug-in, який встановиться автоматично при завантаженні HTML-сторінки з FLASH.

Створення Web-публікації

Мова HTML

Як відомо, Web-сторінки створюються на мові HTML (HyperText MarkUp Language), яка є “мовним стандартом” World Wide Web. Основою мови HTML є теги (tags), спеціальні символи, за допомогою яких можна макетувати абзаци, напівжирний чи курсивний текст, заголовки, вбудовувати графічні зображення тощо. Стандарти мови розробляє та затверджує консорціум World Wide Web (W3C). На сьогодні стандартом HTML є версія 4.0 під кодовою назвою Cougar (Пума). Новими можливостями HTML 4.0 є:

• Інтернаціоналізація за рахунок розширення системи символів;

• Покращене представлення та звертання до окремих HTML-елементів для ліпшої навігації;

• Сценарії, які всередині Web-сторінки можуть реагувати на дані користувача;

• Взірці стилів;

• Прив’язування файлу будь-якого типу до Web-сторінки в якості об’єкту.

Таким чином версія HTML 4.0 надає покращені можливості форматування сторінок та спрощує навігацію в Інтернет.

Програми створення Internet-сторінок

HTML-документ – це звичайний ASCII-файл, який, в принципі, можна створити за допомогою будь-якого текстового редактору. Для цього потрібно лише знати мову HTML. Але існує багато спеціальних Web-редакторів. Вони мають приємний графічний інтерфейс, з їх допомогою можна зручно редагувати ASCII-текст, а можна створювати сторінки, взагалі не знаючи мови HTML. У таких редакторах Web-документ з усіма своїми елементами виглядає так само, як і у вікні Web-браузера. Серед найвідоміших програм для створення сторінок можна назвати Macromedia DREAWEAVER 2, Microsoft FRONTPAGE 98, HOTMETAL PRO 4.0, FUSION2.02, Adobe PAGEMILL 3.0. Найпотужнішою серед них є DreamWeaver від Macromedia. Ця програма найкраще підтримує WYSIWYG (What you see is what you get) принцип, пропонує всі необхідні функції. Але жодна з програм автоматичного генерування Web сторінок не в стані задовольнити того, який прагне мати повний контроль над своїм творінням.

Основні елементи сторінки

Мова HTML дозволяє визначити на сторінці такі основні елементи: фон, текст, графічні елементи, таблиці, кадри, форми. Майже кожен з цих елементів в свою чергу може бути гіпертестовим посиланням на іншу Web-сторінку. Існують два основних типи фонів: однотонні та з візерунком. Окремим випадком однотонного фону є стандартний фон, який використовується броузером за замовчанням (як правило світло-сірого кольору). Безумовно дуже ефективним прийомом є використання оригінального визерунку для фону. Таблиці, крім свого безпосереднього призначення, широко застосовуються для макетування Web-сторінок. Практично майже кожна добре скомпонована сторінка базується на таблиці. Фрейми розділяють вікно броузера на частини, кожна з яких відповідає окремому HTML-файлу. Технологія фреймів ще кілька років тому вважалася революційною, але на сьогодні Internet перенасичений невмілим та невдалим використанням фреймів, і їх слід вживати лише тоді, коли без них обійтися ніяк не можна. Форми використовуються для введення даних і передачі їх на сервер для подальшої обробки.

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

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

Альтернативні способи предсталення інформації в Internet

HTML-публікація має невеликий розмір, завдяки чому швидко передається через мережу, є "рідною" для будь-якого броузера, і, в принципі, є основою для всього WEB-сервісу. Тому конкурентів у неї бути не може. Можна говорити лише про альтернативи, які можуть стати у пригоді в тій чи іншій конкретній ситуації. Зокрема, якщо електроний макет зі складною структурою потрібно представити в Internet абсолютно без змін (главу книжки тощо), то засобами мови HTML досягти цього буде дуже важко. Доведеться кропітливо працювати над зовнішньою відповідністю Web-сторінки до макету-оригіналу. Можуть винукнути проблеми з відповідністю шрифтів, обтіканням зображень, адаптацією графіки. І певна річ, що деякі складні, нестандартні, творчі "родзинки" макету відтворити буде взагалі не реально, зважаючи на досить обмежені можливості макетування в мові HTML. Отож, коли виниикає потреба зберігти абсолютно точну відповідність до оригіналу, то єдина можливість – перетворити макет на PDF файл. PDF (Portable Document Format) — це унікальний формат, створений всесвітньо відомою фірмою Adobe. Перетворити електроний макет на PDF можна у більшості програмі макетування за допомогою команди "SAVE AS <name>.pdf" або "EXPORT TO PDF". Тут певно не буде йти мова про адаптацію, бо таке перетворення передбачає повну відповідність до макету-оригіналу зі збереженням якості. Єдиним недоліком цього варіанту є великий порівняно з HTML розмір PDF-файлу та обов'язкова наявність у користувача, щоправда безкоштовного, продукту Acrobat Reader від фірми Adobe.

Методика адаптації на прикладі створення Web-сайту видавництва

Особливості електроних матеріалів видавництва

Адаптацію електроних макетів до публікації в Internet часто доводиться проводити при створенні Web-сайтів видавництв. Найчастіше електроні матеріали видавництв це макети, створені у програмах QuarkXpress, Pagemaker, VenturaPublisher, іноді навіть у MsWord. Останні версії QuarkXpress, Pagemaker, MsWord підтримують можливість автоматичного переведення електроного макету в HTML формат. Але при цьому частина елементів макетування сторінки передається не зовсім коректно або не передається взагалі, не підтримується багатошаровість, додається багато абсолютно не потрібних тегів. Навіть після кропіткого та ретельного корегування створені таким чином Internet-сторінки виглядають не професійно. Тому краще не переводити електроні макети в HTML автоматично, а самостійно створювати Web-сторінку на основі матеріалу існуючого електроного макету. При цьому текст варто переносити за допомогою звичайних “copy/paste”, а розмір і формат зображення з вихідного файлу змінювати у професійних програмах типу Adobe Imageready, Adobe Photoshop, Image Alchemy від Handmade Software Inc. тощо. До того ж слід зазначити, що професійна адаптація – це процес творчий. В одних випадках не всю інформацію, що міститься в електроних макетах потрібно переводити в Internet-публікацію. Наприклад, для сайту видавництва достатньо навести зменшені обкладинки видань з короткою анотацією, вспупом, окремою главою тощо. В інших слід додати елементи яких не існувало в електроному макеті. Наприклад, навігаційну пенель, гіпертекстові посилання.

Представлення видавництв у всесвітній мережі. Розроблення структури сайту.

Аналізуючи сайти таких видавництв, як O’reilly and associates, BHV, Sybex, ITC, (див. Додатки 1-5) та відбираючи найбільш вдалі рішення, можна стверджувати, що оптимальна структура верхнього рівня сайту видавництва повинна виглядати приблизно так:

• про видавництво,

• інформація про книжки,

• пошук книжок,

• бестселери,

• нові надходження,

• прайс-листи,

• замовити книжку,

• соціологічне дослідження,

• цікава інформація.

Основну навігаційну панель, яка повинна бути присутньою на кожній сторінці сайту, варто створювати саме на базі цих пунктів. Така навігаційна панель відповідатимє золотому правилу: <7 +/- 2 >. Це правило відбиває особливості людського сприйняття. Найкраще людина сприйає і запам‘ятовує від 5 до 9 об‘єктів. Якщо їх менше — втрачається цікавість, якщо більше — розсіюєься увага. Крім того, саме така будова навігаційної панелі надає можливість перейти до найважливішої з погляду користувача інформації з будь-якої сторінки сайту. Тому, здається за потрібне, рекомендувати таку структуру, як стандартний каркас при розробці сайтів видавництв. Така стандартизація дозволить користувачу, який відвідав хоча б один подібний сайт, легко зорієнтуватися і знайти необхідне в структурі інших. Розглянемо більш детально кожен пункт розробленої нами навігаційної панелі.

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

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

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

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

Прайс-листи: це сторінка з поточними цінами на кожне видання. Варто забезпечити її динамічнє оновлення на основі, наприклад, таблиці Excell з найсвіжішими прайс-листами (звичайно, якщо така вже існує).

Замовити книжку: тут можливі різні варіанти. Ідеальним здається створення Internet-магазину з можливістю інтерактивних замовлень і розрахунків за кредитними картками. Але в умовах України для широкого споживача така можливість стане реальною мабуть ще тільки років через 5 -10. Тому можна просто подати адреси відділу збуту, пунктів розповсюдження тощо. Можливо непоганим міг би бути варіант заповнення форми, за якою на адресу замовника книжки приносить кур‘єр, або вони надсилаються по пошті з післяплатою.

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

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

Адаптація електроних макетів на практиці

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

• обкладинка,

• інформація про автора,

• зміст,

• анотація,

• передмова,

• окремі уривки чи малюнки з книжки,

• відгуки у пресі,

• за яку ціну можна придбати книжку,

• як дати рекламу на її сторінках.

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

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

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

Окремі глави, розділи або повна версія книжки: це інформація яка найчастіше подається без особливих змін, тому дуже доцільно представити її у форматі PDF. Якщо, все ж таки прийнято рішення представити дану інформацію, як HTML-cторінку, то слід зважати на те, що сторінка може мати дещо інший вигляд ніж оригінал. Іноді доцільно поділити дуже довгі глави на невеликі підрозділи, кожен з яких буде займати 1-2 екрани, а потім організувати внутрішній зв‘язок між ними. Можуть бути випадки, коли, особливо для учбової чи довідникової літеретури, доведеться змінювати всю структуру книжки, аби зробити її дійсно інтерактивною і зручною для користувача Internet.

Висновки

Основне завдання цієї роботи полягало у розробці методології перетворення електроного макету в Internet-публікацію. У роботі розглянуто специфіку представлення інформації в Internet, багато уваги приділено проблемам адаптації тексту та графічних файлів, застосуванню гіпертекстових технологій. Описано основні принципи створення HTML-публікації, розглянуто як можливу альтернативу — формат PDF. Зазначені особливості представлення електроних матеріалів видавництв. Проведено дослідження Web-сайтів видавництв, при створенні яких доводиться адаптувати електроні макети. На основі дослідження запропоновано методику створення оптимального сайту. Здійснено спробу створити сайт видавництва "Абрис" з використанням описаної методології (див. додаток 6).

Додатки

1. O’Reilly

2. BHV

3. ITC (HotLine, Домашний ПК, Комп. Обозрение).

4. Piter press

5. Sybex

6. Абрис

Список використаної літератури:

1. Брейн Грей “Как сделать красиво в Интернете”, Санкт-Петербург: Символ-Плюс, 1998. – 320 с.: ил.

2. Адель и Сет Гринберг “Практика работи с Photoshop 4”, К.: Диалектика, 1998. – 624 с.: ил.

3. Журнал CHIP 4’98 “Тестирование Web-редакторов”, стр. 60 – 70.

4. Рон Водески “Графика для Web. Библия дизайнера”, K.: Диалектика, 1997. – 608 с.: ил.

5. Журнал CHIP 9’97 “Графические формати”, стр. 58-61.

6. Журнал CHIP 2’98 “HTML 4.0”, стр. 72-78.