Underground InformatioN Center [&zametki] 
[network & security news] [RSS & Twitter] [articles, programing info] [books] [links, soft & more...] [soft archive][home]

Оригинальное использование иконок в адресной строке браузера

Введение
   В большинстве современных браузеров существует возможность отображать иконки в адресной строке и в меню "Избранное"(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, умеет совмещать несколько иконок вместе.
  • Скачать вышеприведенный скрипт в одном файле можно здесь (Скачано 4768 раз)

    [c] Uzbeck aka NiFiGaSebe!, mafia_zhivet@hotmail.com
    [c] uinC Team

    Thanks to Eugene

    Все документы и программы на этом сайте собраны ТОЛЬКО для образовательных целей, мы не отвечаем ни за какие последствия, которые имели место как следствие использования этих материалов\программ. Вы используете все вышеперечисленное на свой страх и риск.

    Любые материалы с этого сайта не могут быть скопированы без разрешения автора или администрации.


  • [network & security news] [RSS & Twitter] [articles, programing info] [books] [links, soft & more...] [soft archive][home]
     Underground InformatioN Center [&zametki] 
    2000-2015 © uinC Team