1.1.2 Особливості подання тексту на Web-сторінках
При створенні професійної графіки для Web використовується текст зі згладженими краями. Згладжування – це легка розмитість на нерівних краях, що згладжує переходи між краями. Не згладжені краї, навпроти, виглядають зазубреними, східчастими. Виключенням із цього загального правила є текст дуже малого розміру, (10 пунктів і менше), застосування згладжування робить його практично нерозрізненим. Текст малих розмірів буде виглядати набагато краще без згладжування. При розробці Web-сторінки засобами базового HTML є два комплекти шрифтів; пропорційний і шрифт фіксованої ширини. Проблема полягає лише в тім, що невідомо, який з них і якого розміру буде використаний при відображенні. Пропорційний шрифт - інакше " шрифт змінної ширини " для кожного символу виділяється різна кількість місця залежно від його накреслення.
Наприклад, у пропорційному шрифті заголовна "W" займає більше місця в рядку по горизонталі, чим прописна "І". Такі шрифти,як: Tіmes, Helvetіca і Arіal є прикладами пропорційних шрифтів. Web-браузери для більшості текстів на Web-сторінці, включаючи основний текст, заголовки, списки, цитати й т.д., використовують пропорційні шрифти. Як правило, більші уривки основного тексту зручніше читати, коли вони надруковані пропорційними шрифтами. Оскільки більшість користувачів нюмають часу замінити шрифти, установлені по замовчуванню, з великою ймовірністю можна припустити, що текст на вашій сторінці буде відображений шрифтом Tіmes розміром 10 або 12 пунктів (за замовчуванням в Netscap ) або Helvetіca (за замовчуванням в Microsoft Internet Explorer). Але це всього лише загальне правило. Шрифт з фіксованою шириною надає однакове місце для всіх символів шрифту. Заголовна "W" займає не більше місця, ніж прописна "І". Прикладами шрифтів фіксованої ширини є гарнітури Courіerі Monaco. В Web-браузерах шрифти фіксованої ширини використовуються для відображення будь-якого тексту в середині наступних HTML -тегів: <рге>,,,,,</pre>. Оскільки багато з людей не змінюють на лаштунків шрифтів, встановлених за замовчуванням, то текст, що перебуває в зазначених тегах, буде виведений одним з шрифтів типу Courіer. Дизайнери швидко зрозуміли, що самий вірний спосіб абсолютного контролю над шрифтами-помістити текст в зображення. Можна часто бачити заголовки, підзаголовки й оголошення, виконані в вигляді файлів GІ. Багато Web-сторінок представлені винятково в графіці, що містить в середині себе весь текст сторінки. Переваги використання графіки замість HTML–тексту абсолютно очевидні: - можна визначати тип шрифту, розмір, проміжок між буквами, колір і вирівнювання-всі атрибути, які викликають складності тільки в HTML; - ваша сторінка буде однакова при перегляді в усіх графічних браузерах. Але в цього методу є ряд недоліків: - зображення завантажується довше, ніж текст, тому що графічні файли звичайно на кілька порядків більші, ніж HTML-тексти, що мають той же зміст; -у неграфічних браузерах зміст втрачається. Користувачі, які не можуть (або не хочуть) переглядати графіку, не побачать і тексту. Альтернативний текст (використовується атрибут Alt) на місці графічного зображення допомагає, але його можливості обмежені й це не завжди надійний спосіб ототожнення відсутньої графічної інформації; -інформацію, що перебуває в зображенні, не можна індексувати або організувати її пошук. В результаті з документу виключаються важливі частини інформації. Звичайно розмір шрифту визначається в пунктах (72 пункти (пт) = 1 дюйм висоти шрифту) але, нажаль, ці розміри не досить точно переводяться між платформами. Найчастіше це відбувається тому, що їхні операційні системи управляють дисплеями зрізними дозволами. Звичайно Windows використовує дозвіл екрана 96 крапок / дюйм, a MacOS-72 крапок / дюйм. Монітори Multі Scan допускають більш високий дозвіл. Шрифт на екрані дисплея Масіntosh має точно такий же розмір, як і при перегляді (наприклад, 12 пт Tіmes на екрані виглядає так само, як 12 пт Tіmes на папері). Для шрифтів Microsoft подібна угода не виконується, і розмір шрифту при виводі на екран більше, що полегшує читання з дисплея. В результаті шрифт розміром 12 пт на Windows більше схожий на друкований шрифт 16 пунктів. Щоб одержати на Windows друкований розмір 12 пт, вам потрібно вибрати розмір шрифту 9 пунктів але тоді користувачі комп'ютерів Масіntosh побачать текст майже нерозбірливим, тому що він буде відображений шрифтом розміром всього 6,75 пт).
1.1.3 Особливості подання графіки на Web-сторінках
На даний момент майже всі зображення в Web, представлені у двох форматах: GІF і JPEG. Третій суперник, що заслуговує згадування, формат PNG, бореться за підтримку й увагу браузерів. Далі-короткий огляд "великої трійки" онлайнових графічних форматів. Більш докладна інформація представлена в главах, присвячених кожному з форматів. GІF - Grafіc Іnterchange Format можна назвати традиційним форматом файлів Web. Він був першим форматом файлів, що підтримувався Web-браузерами, й донині продовжує залишатися основним графічним форматом Web. Його властивості полягають у наступному: - підтримує не більше 256 кольорів (менше можна й часто потрібно); - використовує палітру кольорів; - використовує стиск без втрати інформації по методу LZW (який подібний застосовуваному в архіваторі PKZІ, і, отже,GіF –файли надалі практично нестискуються); підтримує черезстрочне розгорнення; - є потоковим форматом, тобто показ картинки починається підчас перекачування; - дозволяє призначити одному з кольорів в палітрі прозорий атрибут,що застосовується при створенні так званих прозорих гіфів; - має можливість збереження в одному файлі декількох зображень, що знаходить своє застосування при виготовленні анімованих гіфів;- підтримує можливість вставки в файл керуючих блоків, які дозволяють вставляти коментарі у файл (наприклад, про авторські права), здійснювати затримку між показами зображень іт.д.А тепер трошки роз'яснень-до чого ці властивості можуть привести. Як ми написали, GіF підтримує не більше 256 кольорів, а це значить, що всі зображення, які ми зберігаємо в GіF-форматі, явно або неявно зменшують кількість кольорів, щоб укластися в цей ліміт (різні програми з різним успіхом). А з відси висновок - якщо взяти гарну фотографію з плавними переходами й ледь уловимими відтінками кольору, то після перетворення все буде набагато гірше – відтінки перестануть бути невловимими, і вся фотографія придбає неприродний, нереалістичний вид. Тому, якщо треба все-таки зберегти фотографію в форматі GіF й передати всі відтінки, то доводиться йти на хитрості. Наприклад, до фотографії можна застосувати який-не будь художній фільтр і перетворити її в малюнок або застосувати тонування. Зате немає ніяких проблем з збереженням малюнків й креслень в цьому форматі, вони, як правило, добре стискуються й не містять багато кольорів. Другим найбільш популярним графічним форматом в Web є JPEG – Joіnt Photo graphіc Experts Group. Він містить 24 –розрядну інформацію про колір. Це 16,77 млн. кольорів на відміну від 256 кольорів формату GіF. В JPEG використовується так званий стиск з втратами. Це означає, що деяка інформація про зображення в процесі стиску відкидається, але в більшості випадків погіршення якості зображення не наносить шкоди й часто навіть не помітно. Фотографії або будь-які зображення з плавними градаціями кольорів найкраще зберігати в JPEG-форматі, тому що він пропонує більш високу якість зображень, що вміщуються в файл меншого обсягу. Проте, JPEG не є кращим рішенням для графічних зображень з одноколірними областями, оскільки цей формат має тенденцію змінювати колір цяточками й кінцевий файл, як правило, буде трохи більший, ніж GіF–файл для того ж зображення. Є ще третій графічний формат, що конкурує за постійне використання в Web. Це формат PNG –Portable Network Graphіc, що, незважаючи на деякі достоїнства, з 1994р. Перебуває більш-менш у тіні. Тільки недавно браузери почали підтримувати PNG як вбудовану графіку, але PNG має всі шанси стати дуже популярним форматом в Web. Саме тому він включений тут в " більшу трійку ". PNG може підтримувати 8–розрядні індексовані кольори, 16–розрядні півтони або 24–розрядні повно кольорові зображення, використовуючи схему зтиску без втрат. Це забезпечує більш високу якість зображень, а іноді й менший обсяг файлу в порівнянні з форматом GіF. Крім того, файли PNG мають деякі чудові функції, наприклад, вбудоване керування гама коефіцієнтом, змінювані рівні прозорості ( це дозволяє показувати малюнок крізь м'які тіні, що відкидаються ). Оскільки зображення Web існують тільки на екрані дисплея, буде технічно правильно вимірювати їхній дозвіл в пік селях на дюйм (ppі – pіxel sper іnch). Інша одиниця виміру дозволу-кількість крапок на дюйм (dpі – dots per іnch) ставиться до дозволу друкованих зображень й залежить від дозволу друкувального пристрою. Але, тому що реальні розміри графіки залежать від дозволу дисплея, вимір у дюймах стає для Web-оточення не прийнятним. Єдиною значимою одиницею виміру стає піксель. Практично створювати зображення з дозволом 72 ppі (це кращий варіант для подання на екрані), звертаючи увагу тільки на загальні розміри в пікселях. В процесі створення графіки на Web можна взагалі не використовувати дюйми. Важливий розмір зображення в порівнянні з іншими зображеннями на сторінці й загальному розмірі вікна браузера. Наприклад, багато користувачів як і раніше використовують 15–дюймові –дисплеї з дозволом 800x600 пікселів. Щоб гарантувати заповнення графічною заставкою всього простору екрана, краще зробити його шириною не більше 600 пікселів.