Underground InformatioN Center [& zametki]: Оригінальна використання іконок ...

Вступ
У більшості сучасних браузерів існує можливість відображати іконки в адресному рядку і в меню "Вибране" (Favorities). За допомогою цієї можливості, господар будь-якого сайту може прикрасити свій сайт. При відвідуванні його сайту в адресному рядку буде відображатися іконка, також, вона ж буде зображуватися в меню "Вибране" якщо цей сайт буде занесений в сам список "Вибраного".
Найпростіший спосіб, щоб при відвідуванні вашого сайту відображалася іконка - це покласти в кореневу директорію вашого сайту іконку, назвавши її favicon.ico. Тобто, якщо ваш сайт знаходиться за адресою http://www.site.ru, то адреса іконки буде http://www.site.ru/favicon.ico. Якщо ваша іконка лежить за іншою адресою, то можна прописати її адресу в самій сторінці, використовуючи тег
<Link rel = "shortcut icon" href = "ваш_путь">,
де замість "ваш_путь" ви прописуєте шлях до файлу іконки. Якщо іконка лежить на іншому сайті, то шлях буде таким: http://www.another_site.ru/dir/icon.ico, якщо ж іконка лежить у вас на сайті в іншій теці, то шлях буде виглядати так: / dir / icon .ico. Якщо необхідно використовувати для кожної сторінки різні іконки, то сооветственно, потрібно використовувати вищезгаданий тег в кожній сторінці, змінюючи при цьому "ваш_путь".
Дана технологія працює в Internet Explorer, Mozilla і Konqueror.
Щодо самих іконок - більшість підтримують браузерів розуміють всі іконки, будь-якого дозволу і розміру, також, вони розуміють файли в яких більше однієї іконки (наприклад: одна велика і одна маленька). Якщо ваша іконка розміром 32 на 32 пікселів, то браузер сам зменшить її до 16 на 16. Якщо колірна палітра вашого екрану менше кольорової палітри самої іконки, то браузер автоматично зменшить колірну палітру іконки. При створенні іконки для сайту, краще робити подвійну (коли в одному файлі дві іконки) - одну іконку розміром 16 на 16 (для адресного рядка, для списку "Вибране" і для панелі задач) і одну розміром в 32 на 32 пікселів (для робочого столу, раптом ви захочете помістити лінк цього сайту на робочий стіл). Що стосується колірної палітри, то я б порадив використовувати 256 кольорів, тому що цієї гами цілком достатньо для таких маленьких картинок в 32 на 32 пікселів, і тому, що на сьогоднішній день 99% користувачів мережі мають колірну палітру екрану не менше 256 кольорів. Для створення будь-яких іконок існує море програм і документації до них, так що я не буду тут вдаватися в ці подробиці, лише наведу пару лінків в самому кінці.
ОДНАК: це зовсім не те, про що я хотів тут поговорити ...

Оригінальний спосіб відображення іконок
Все вищеописане відмінно працювало на одному з моїх сайтів, але одного разу я переїхав на новий хостинг, де стояла російська версія Web-сервера Apache. Однією з відмінностей російської версії від стандартної англійської - це те, що сервер передає всі невідомі йому типи файлів з рядком:
Content-Type: text / plain; charset = "koi8-r"
На жаль, в списку відомих типів файлів в конфігурації російської Apache немає типів для деяких дуже важливих файлів, наприклад для rar і ​​ico. Коли браузер отримує будь-який файл він дивиться на тип переданого файлу, який був виданий веб сервером. Якщо тип є text / plain, то відповідно браузер обробляє цей приймається файл, як текст, спотворюючи значну частину файлу (не буду вдаватися в подробиці чому). Тут варто зазначити, що єдиним винятком є ​​браузер Opera, який приймає ВСЕ файли як бінарні, при цьому не спотворюючи їх.
При такому розкладі подій, в вашому адресному рядку замість іконки з'являтиметься якась перекручена картинка, при перегляді якої починає нудити, що і сталося з моїм сайтом.

Іконка в рядку браузера. У спотвореному вигляді (зверху) і в нормальному вигляді (знизу).

Однак! Я знайшов рішення і для такої проблемми. Взагалі-то, рішення два:
1) Додати в ваш файл apache / conf / mime.types відповідні відсутні типи файлів, наприклад:
application / rar rar
image / x-icon ico
Дане рішення повністю вирішить проблемму з псуванням бінарних файлів при передачі оних браузеру. А що, якщо у вас немає доступу до сервера? Що якщо ви не адміністратор? В такому випадку допоможе метод 2.
2) До того, як з'явилися проблемми, я подумував про те, щоб використовувати для адресного рядка кілька іконок. Але як? Прийшла в голову думка, що можна генерувати іконку. І це як раз те, що нам потрібно! Адже якщо я генеруючи іконку сам, то і тип файлу я передаю сам. Генерувати іконку можна за допомогою Перл скрипта. Які переваги даного способу?
+ Ви генеруєте тип файлу, тому будь-браузер отримає і відобразить іконку правильно.
+ Дуже прикольно, коли один відвідувач сайту бачить одну іконку, а інший - іншу, а потім вони ж заходять знову через деякий проміжок часу на сайт і бачать знову іншу іконку.
Наше завдання: зробити скрипт (в даному випадку ми розглядаємо Перл), який при запиті буде вибирати іконку зі списку наявних, випадковим чином, і видавати її браузеру, що я і зробив:

#! / Usr / bin / perl # Абсолютний шлях до директорії з іконками, # обов'язково використовувати "/" в кінці $ path = "/ path_to_your / dir / public_html / icons /"; # Список файлових імен всіх іконок, які ми будемо використовувати @list = ( 'uinc1.ico', 'uinc2.ico', 'uinc3.ico'); # Визначаємо розмір списку $ array_size = @list; # Отримуємо випадкове число, перетворимо його в ціле $ icon_no = rand ($ array_size); $ Icon_no = int ($ icon_no); # Визначаємо повний шлях до випадково вибраної іконки $ file = $ path. $ List [$ icon_no]; # Відправляємо той самий злощасний тип файлу print "Content-Type: image / x-icon \ n \ n"; # Відправлений сам файл open (ICON, $ file); print <ICON>; close (ICON);

УВАГА: Як абсолютного шляху до директорії з іконками вам потрібно прописати аболютно шлях всередині структури сервера, а не сайту. Якщо ви не знаєте, як визначити цей шлях, то почитайте ось це (друге питання).
А далі все просто. У кожну сторінку вставляємо згаданий на самому початку тег, попередньо помінявши шлях, на шлях до нашого нового скрипта на сайті:
<Link rel = "shortcut icon" href = "http://www.site.com/cgi-bin/icon.pl">
Даний метод генерації іконок використовується на цьому сайті.
Я пішов трохи далі і автоматизував процес вставки тега в усі сторінки. На цьому сайті більше 1000 сторінок і в усі вручну запхати тег просто неможливо. Однак, всі сторінки використовують ssi і модуль PVD Meta, який генерує Мета теги для всіх сторінок. Я прописав потрібний тег в цей модуль, і тепер він вставлется разом з Мета тегами.

Я отримав кілька листів щодо того, що Internet Explorer не завжди працює так, як описано тут. Насправді, це глюки самого IE і писати мені про це не треба. По-перше - в IE, на відміну від Mozilla, іконка з'явиться в адресному рядку ТІЛЬКИ після додавання цього сайту \ сторінки в "Вибране". По-друге - іноді, через глюкавий IE, іконка може зникнути навіть після додавання в "Вибране" і не відображатися в адресному рядку. На жаль, ці глюки присутні навіть в самих останніх версіях Internet Explorer.

Links

• сайт Favicon.com , Розповідається все про створення іконок і використанні їх в браузерах, за винятком оригінального методу, який я описав тут. Також на сайті є онайновий редактор іконок і колекції вже готових іконок для особистого використання.
  
• При написанні цього документа я консультувався з даної сторінкою
  
• Сайт модуля PVD Meta тут
• Дуже якісний редактор іконок, IconXP , Вміє поєднувати кілька іконок разом.
• Завантажити вищенаведений скрипт в одному файлі можна тут (Завантажено 4797 разів)
  

[c] Uzbeck aka NiFiGaSebe! , [email protected]
[C] uinC Team

Thanks to Eugene

Всі документи і програми на цьому сайті зібрані ТІЛЬКИ для освітніх цілей, ми не відповідаємо ні за які наслідки, які мали місце як наслідок використання цих матеріалів \ програм. Ви використовуєте все вищеперелічене на свій страх і ризик.
Будь-які матеріали з цього сайту не можуть бути скопійовані без дозволу автора або адміністрації.