ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК |

Один на один с FreeBSD
З 24-го квітня 2006-го року купуйте нову книгу по операційній системі FreeBSD: "Один на один с FreeBSD".


 Зміст книги та уривки текстів -->>

 Buglist:11 Додати новий Переглянути існуючий список

Написана - російською мовою
Вміщує - 704 сторінки
Наклад - 2500 екземплярів
Рекомендована ціна - 75грн
Рік видання - 2006
Видавництво - MK-PRESS
Автор - Дідок О.О.
ISBN 966-8806-00-X
 • Оновлення [10]:
[18.11.2007] Протиріччя
[18.11.2007] Любові тепло
[28.10.2006] Пісня "Не..."+mp3
[23.10.2006] "Не думаючи жити/філософія сучасного життя"
[23.10.2006] Пісня "Ластівка"+mp3
[23.10.2006] Пісня "Безсилий"+mp3
[29.08.2006] Моя поезія
[29.08.2006] "Я - ти, і я - не ти"
[15.06.2006] "Кохання гра"
[07.06.2006] "Пам'ятаю..."
 • Новини сайту [3]:

[16.05.2006] 21-го травня вийшла моя книга по операційній системі FreeBSD. Пишу нову книгу по PHP. Дякую за підтримку ...


[24.02.2006] Добавив систему рейтингiв. Тепер ви можете оцiнити на свiй смак кожну статтю за п'ятибальною системою. Скоро напишу сторiнку рейтингових статей i систему коментарiв. Очiкуйте)


[19.01.2006] Життя радісне, коли на нього дивишся з добрими очима і гарним настроєм). Так от останні чудові фотографії від мене можна знайти тутечки, доречі, там можна знайти і мене, якщо когось зацікавить це)). Ммм. Дя - поповнив рахунок на хостинг ще на рік, збільшивши пакет)) Тепер у мну 3гіга місця, багато піддоменів, достатньо баз данних і навіть можливість повісити декілька доменів у себе - не погано, коротко кажучи. Ну добре, досить, ато вже не новина - а ціла стаття про моє життя-буття)) Заходьте ще)


Остання корекція: 01.01.2003
/0 
 Вперше опубліковано: 01.01.2003
Сторінку відкрито: 791Коментарiв: 0ДодатиЧитатиДопомога
ПОЧИТАТИІнформ. технологіїWeb ...Швидкі пальчики

Швидкі пальчики 01

Інше в підрозділі :

 Швидкі пальчики 02[2003-01-01]  Швидкі пальчики 03[2003-01-01]  Швидкі пальчики 04[2003-01-01]  Швидкі пальчики 05[2003-01-01]  Швидкі пальчики 06[2003-01-01]

За побажаннями тих, хто вважає своїми знаряддями праці клавіатуру і мишку, кому вже нудно пасивно користуватися Інтернетом, і права долонька свербить від невимовного хотіння вклеїти свою сторінку в різноколірну глобальну книжку, розпочинаємо спілкування на цю тему. Ви всі вже люди дорослі або принаймні вважаєте себе дорослими, і тому вчити вас - вельми невдячна і важка справа. Ніхто не любить невдячних справ - ні ті, хто не дякує, ні тим більше ті, кому не дякують. У зв’язку з цим сумним законом буття статті клубу “Швидкі пальчики” будуть носити радше характер інформацій для роздуму. Та й називатись будуть так само.

Інформація для роздуму номер 1: малюнки, фотки, прибамбасики. З чого складається Інтернет-сторінка звичайного формату HTML? Відповідь очевидна – з тексту і картинок. Текст – це текст, а картинки – це що? Відповідь не така очевидна. Тому поговоримо про формати графіки в Інтернет. Вияснимо дещо до того, як будемо збирати докупи текст і графіку в неповторне, гармонійне і наповнене страшенно цікавим змістом віртуальне творіння нашої уяви (саме у цьому полягає суть веб-дизайну).

Існують два основні формати Інтернет-графіки – GIF i JPEG. Є ще також формат PNG. Всюди, де згадують про нього, не забувають сповістити, що цей формат дуже прогресивний (можна використати навіть 48-бітний колір!) і набуває все більшого поширення (хоча й не дозволяє створювати анімацію). На жаль, жоден з файлів цього формату не потрапив мені до рук, - чи то через потік кешу, чи то простим завантаженням оригінальної картинки. Тому облишимо його. Поки що. Нетерплячих запрошую на сайт: http://pro.net.ru/fiction/png.html.

Усі ці формати репрезентують собою растрову графіку (чи то бітмапи – bitmap англійською). Єдиний поширений векторний (лінійний) формат анімованої веб-графіки – це flash-анімації (.swf), зараз вони в моді, і, мабуть колись замінять собою GIF-и (бо маленькі-премаленькі і швидкі-прешвидкі, а це все ще важливо і буде важливим ще довго). Але поки ніхто нікого не замінив, нам нічого не залишається, як погомоніти про те, що маємо.

Отже, маємо бітмапу. Що має бітмапа? Оскільки вона по суті є матрицею кольорових точок (пікселів), то має ширину і висоту в цих самих пікселах, а також палітру, розмірність якої залежатиме від того, скільки біт використовується для збереження кольору в цій бітмапі. Наприклад, розглянемо роздільну здатність (resolution), що називається True Color або RGB (red, green, blue). Відомо, що колір є зміксований з цих трьох основних компонуючих кольорів , тому кожен піксел можна представити 3-ма числами, в яких відображено кількість зеленого, червоного і синього в кольорі цього піксела. Три основні кольори – це три байти (по байту на кожен компонуючий колір) або 24 біти. З цього випливає, що максимальна кількість дискретних кольорів для бітмапи в палітрі True Color дорівнює 2 до 24-го ступеня, тобто 16 777 216 (ось звідки взялися постійно згадувані 16 мільйонів кольорів).

Приклад: якого мінімального розміру повинна бути відеокарта для того, щоб при розмірах екрану 600x800 пікселів досягалася роздільна здатність 16 біт або так званий High Color (палітра в 65 536 кольорів)? Рахуємо: 600x800x2 байти = 960 000 байт або приблизно 0.91 Мб. Отже, 1-Мб відеокарти нам вистачить.

Наступний приклад: порахуємо, скільки місця на диску займе файл 200x300 пікселів в True Color. 200x300x3байти = 180 000 байт або приблизно 175 Кб. Багато, звичайно, і дуже багато для Інтернет-сторінки, загальний розмір якої бажано робити десь меншим удвічі. Звичайно, чим вища роздільна здатність, чим більше з 16 мільйонів кольорів використано, тим якіснішою і колористично багатшою виглядає картинка. Але нас не перестає хвилювати розмір, і наші хвилювання цілком виправдані. Користувачі Інтернету – народ нетерплячий. Дуже повільно вантажиться сторінка – втікає на іншу. Кому, як не нам, це знати. Особливо тим, хто платить цілий справжній зелений папірець за годину і не з кишені шефа, а з ріднесенької власної.

Гадаю, всі згідні – файли треба стискати, зменшувати, скручувати в баранячий ріг, висушувати і викручувати (як після прання). Повинні для цього бути і певні засоби. Більшість графічних програм дозволяє здійснити різні види компресії. Найпримітивніший з них полягає в тому, що в картинці знаходяться області, що мають однаковий колір, і заміняються приміткою на зразок: “вся ця область такого самого кольору”. Але де ви бачили такі області на фотографії?… Тут, мабуть, така компресія не спрацює.

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

Розвиток лейтмотиву “забагато-замало” представлений у наступній сентенції. Відомо, що бітмапи бувають 3-х типів:
-некомпресована, нестиснута графіка (наприклад, .bmp-файли WINDOWS);
-зкомпресована графіка (метод, змальований вище). Це так звані формати “без втрат” (non-lossy). При декомпресії вони видають файл, ідентичний картинці до здійснення процедури компресії (саме такий алгоритм стиснення LZW використовується у форматі .gif ). Цього не завжди досить для високоякісної фотографії, тому мусимо шукати щось інше;
-ці пошуки іншого приводять нас до компресії “з втратами”, а саме – до формату JPEG. При такій компресії відбувається обов’язкова часткова (хоча б на трошечки) деградація кольору, і тому при цьому треба методом спроб і обломів визначати процент цієї деградації, добиваючись мінімізації розміру файлу і максимізації незіпсованості якості картинки.

А тепер трошки перескочимо до іншого поняття, яке називається зведенням (dithering або клішування чи remapping або навіть не знаю як перекласти, але знаю тільки, що для фотографій краще працює dithering, а для мальованої графіки - remapping), що означає зменшення кількості кольорів, що використовуються в палітрі, до 256-ти або навіть меншої їх кількості. Зведення відбувається таким чином, щоб створити максимально якісну “підробку” всіх кольорів картинки. Очевидно, краще, щоб для кожної бітмапки підбиралась своя унікальна палітра з 256-ти кольорів ( так званий 8-бітний колір), а не одна із стандартних палітр “по замовчуванню”(тобто щоб в програмі була така можливість, а в “правильних” програмах вона є).

Найчастіше в пакетах обробки графіки використовуються такі стандартні палітри “по замовчуванню”, як:
-2-х колірна (не обов’язково чорно-біла) – це 1-бітний колір;
-стандартна 16-колірна палітра WINDOWS (4-х бітний колір);
-ортогональні палітри (8, 16, 32, 64, 128, 256 кольорів) – палітри з рівномірним розподілом кольорів від чорного до білого, які розраховуються математично. Недоліком їх є те, що жодна з них не має сірого кольору, а в 32-х колірній палітрі, наприклад, не вистачає відтінків синього;
-216-колірна “безпечна” палітра Netscape – ці кольори гарантовано сприймаються усіма браузерами (хоча бажано для створення GIF використовувати саме цю палітру, але результат зведення кольорів до цієї палітри деколи виглядає просто жахливо);
-256-колірна палітра з сірим кольором: це палітра з 224 кольорів плюс 32 відтінки сірого кольору;
-256 відтінків сірого – від чорного до білого.

Щоб бути точною до кінця, признаюсь, що про “палітрований колір” (paletted-color) згадують тоді, коли в картинці використовується 256 кольорів і менше. Це все тонкі питання термінології, хоча краще мати глибоке розуміння процесу, а не самих лишень термінів. Основне тут – просто зрозуміти, що треба вчинити з малюнком, якщо ми хочемо розмістити його в Інтернет.

Мабуть, ви вже потрохи вловлюєте різницю між GIF i JPEG. Для того, щоб з класичного BMP-файлу WINDOWS отримати GIF, здійснюємо компресію “без втрат”, а щоб отримати JPEG – задаємо ступінь деградації. Перший і наразі єдиний формат, що дозволяє робити анімацію, gif , – використовує максимум 256 кольорів. Якщо вам потрібні різні елементи оформлення сторінки – кнопочки, гудзички, маркери абзаців, лінійочки і різні всякі там анімовані фіглі-міглі - то використовуйте саме його. 256-колірний файл очевидно менший ( не повірите, але рівно в 3 рази) від того, де використано 16 мільйонів кольорів.

(Можна і JPEG звести до 256-ти кольорів, але тоді не має змісту звертатися до цього формату.Ну, а взагалі, якщо щось можна звести до 256-ти кольорів і не втратити якість зображення, то зробити це треба обов’язково. 256 можна спробувати зредукувати до 128, 128 – до 64-х, 64 – до 32-х і так далі – поки картинка терпить всі ці тортури. Деколи зробити це просто лінуються, а потім дивуються, чому на їх сайт ніхто другий раз не заходить. Ще б пак, - він і перший раз до кінця зайти не зміг, - не вичекав завантаження, бідося.)

Саме стільки , - 16 мільйонів кольорів, - використовує формат jpeg, до якого ми, як правило, зводимо файли повноцінних колірно BMP або PNG-форматів. Без 16 мільйонів не обійтися, якщо треба розмістити на веб-сторінці фотографію або живопис, де є дуже важливим відтворення тонких переходів між відтінками кольору. Та й що тут казати – гарні речі люблять усі. Не буде зайвим поекспериментувати з ступінню деградації кольору, відслідковуючи при цьому зміни розміру файлу та якості картинки.

Ще один нюанс – jpeg не підтримує прозорості фону, як gif, але не всі картинки в Інтернет квадратові. Шматочкам за межами заокруглених куточків кнопочок для досягнення відповідного ефекту звичайно присвоюють властивість прозорості. І тому якщо картинка зводиться до 256-ти кольорів або менше, то її краще зберегти у форматі gif, як вже зазначалося вище. Підбір кольору фону веб-сторінки до кольору тих куточків з 16 мільйонів можливих може призвести до часткового затьмарення широких горизонтів, які перед вами відкриває власна сторінка в WWW. І взагалі, надмірне захоплення цим форматом часто буває причиною важких психічних розладів і зорових галюцинацій, першою ознакою яких є яскраво-зелений крокодильчик, що невпинно гасає по периметру головної вітрини WINDOWS.

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

Особливо допитливі з вас ще можуть поцікавитися терміном dpi (dots per inch). Якщо все вищесказане засвоїлося вами без особливих спотворень, то зрозуміти це буде зовсім просто. Допустимо, що екран має 600 на 800 пікселів, разом їх 480 тис. Знаючи фізичні розміри екрана в дюймах (12,14,15,17 і т.д.), можна порахувати, скільки точок (пікселів) припаде на 1 дюйм. Чим їх більше, тим картинка виглядає більш гладко і реалістично. Тепер, мабуть, зрозуміло, чому розмірність екрана (600 на 800, 1024 на 768 і так далі) повинна б зростати із збільшенням діагоналі екрана, - для того, щоб якісніше відображати графіку.

Детально про формати файлів можна почитати на сайті, присвяченому цій водночас вузькій і широкій темі:http://www.halyava.ru/document/

Безкоштовні картинки можна знайти на сайтах: http://www.barrysclipart.com, http://www.arttoday.com, http://pix.km.ua

Знайте: і солідні, і не дуже програми, звичайно дозволяють здійснити операції зведення та необхідної конвертації форматів. Не можу проминути того факту, що переважна більшість програм для створення GIF-ів є платною (майже немає в цій сфері відповідного freeware), оскільки ліцензія на цей формат належить корпорації Unisys з 1985 року, але вона підступно мовчала аж до 1994 –го, тобто поки формат не знайшов свого широкого розповсюдження і став заледве не найпопулярнішим в WEB. З того часу вищезгадана фірма вимагає виплати авторського гонорару в кожного, хто створює програми з використанням алгоритму LZW, - а це всі графічні пакети для конструювання GIF-ів. Добре хоч, що ліцензуванню підлягає тільки програмне забезпечення, а не всі картинки, що створюються за його допомогою. В будь-якому випадку дана тема не є актуальною там, де вимушені користуватися “хекнутими-крекнутими” пакетами. Залишається пожаліти виробників таких програм, які, з одного боку, потерпають від Unisys, а з іншого - від піратів. А з третього боку – де б були тепер всі ми, якби не пірати?…

І головне: завжди є можливість створити анімацію формату AVI (в якому можна використати True Color, але який не можна використати на веб-сторінці безпосередньо, а тільки при наявності плагінів або ще там чогось). А цей файл можна перекинути в GIF за допомогою, наприклад, Gif Construction Set Professional (автори програми люб’язно залишили цю опцію в незареєстрованій оціночній версії).

Не можу не забігти наперед і не зазначити, що тег <IMG>, за допомогою якого на веб-сторінку вписується картинка, вигідно не залишати без параметрів WIDTH i HEIGHT з правдивими значеннями, бо тоді браузер одразу знатиме, скільки місця треба відвести на ту чи іншу картинку і вантажитиме сторінку набагато швидше.

Про теги почнемо розмову наступного разу. Пропозиції прошу надсилати на поштову скриньку, але перед цим зверніть увагу на те, що гонорові люди називають disclaimer, а не гонорові – відмазкою: жодного Фронтпейджу, чистий, незіпсутий трактуванням різних візуальних редакторів HTML, також JavaScript і трошки VBScript-у. Врахуємо особливості браузерів та різних “халявних” і платних серверів. Розглянемо допоміжне програмне забезпечення і ваші побажання. А наразі тренуйте пальчики.



Всього ресурсів на сайті: 84
Востаннє сайт змінювався: 25.02.2006
Змінено на: PHS-7.3-STABLE версію
Ви 526551 відвідувач сайту
Сторінку згенеровано за 0.016 секунд

 Протоколи комутації IP

[2004-02-09] В наш час багато маршрутизаторів підтримують можливість установки інтерфейсів ATM. Проте для того, аби повністю використовувати всю смугу, надану каналом ATM 155 Мбіт/с, IP-маршрутизатор повинен мати можливість передавати в лінію до 100000 пакетів в секунду. Це перевищує можливо ...


 Зфотографувати цуценя

[2003-01-30] 1. Витащіть фотоплівку з коробки і вставте її в фотоапарат. 2. Вирвіть коробку з-під плівки з щелеп цуценя і викиньте її в корзину для сміття. 3. Дістаньте цуценя з корзини для сміття і очистіть мордочку від бруду. ...


 Швидкі пальчики 04

[2003-01-01] Для початку влаштуємо навігацію по ній за допомогою якорів, потім розфреймуємо вздовж і впоперек, а наступного разу елегантними штрихами розподілимо по картинці лінки. ...


 Швидкі пальчики 03

[2003-01-01] На жаль, знову все наосліп, бо не маю ні ваших побажань, ані критики. Тому сьогодні розповім про те, що називається “додатковими можливостями форматування”. Веб-сто ...


 HTML Digest 10

[2003-01-01] Останній спалах Ювілейний випуск дайджесту присвячується ще деяким базовим поняттям в роботі з програмою FLASH, без яких початківцю буде непросто освоювати її далі. ...


ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК |