Іконографіка, на прикладі Енетрі

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

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

Завдання просте і елементарне, ускладнюється лише однією обставиною — ми намагатимемося зробити наше рішення одночасно простим і красивим :)

Архаїчний спосіб через додавання атрибуту target доцільніше одразу відкинути, з наступних міркувань:
  • примусове нав’язування способу дій відвідувачам вже давно вважається в інтернеті моветоном
  • застосування нового вікна мусить бути анонсоване вашим відвідувачам явно (спеціальною іконкою чи у ще якийсь візуальний спосіб)
  • користувачі повинні мати можливість самостійного вибору (найбільш зручного для них варіанту)
Приходимо до наступного логічного висновку — нам необхідні цілих два гіперлінки:
  • звичайний, із звичним всім способом поведінки
  • додатковий, що відкриватиметься у новому вікні браузера
Оскільки наші лінки ведуть на зовнішній ресурс, елегантнішим рішенням буде застосування не типової кнопки, а власне іконки цього конкретного сайту :) Ось в результаті цих складних логічних побудов ми і отримуємо рішення, до практичної реалізації якого пора вже й переходити.

Важке рішення

Після деяких роздумів відкидаємо "важкий" варіант зі зберіганням іконок в базі даних. Бо це потребуватиме реалізації різних зайвих процедур типу робота, який періодично опитуватиме сайти на предмет зміни іконки, можливі питання копірайту і т.д.

Генерування твердого HTML-коду для лінку-дубля є можливим, з одним суттєвим "але" — перевірку іконок навмисне написаним для цього роботом все ж доведеться реалізовувати.

Легке рішення

Тому в нас просто не залишається інакшого вибору, як вирішити проблему в спосіб красивий і найпростіший. Так, через JavaScript :)

На Енетрі використовується фреймворк JQuery, тому наступний код приведено власне для нього. Проте, при потребі, ви можете легко його самостійно адаптувати для "чистого" яваскрипту, або й для будь-яких інших фреймворків.

// додаємо іконки всім гіперлінкам,
// позначеним атрибутом class="url"
$('a.url').each(function(){
var externalURL = $(this).attr('href');
// тут допустимі лише абсолютні URL, тому обходимося без зайвої перевірки
var faviconURL = externalURL.replace(/^(http|https)(:\/\/[^\/]+).*$/, '$1$2') + '/favicon.ico';
// додаємо в DOM-дерево зображення нашої стандартної іконки
var img = $('<img src="/images/external.png" alt="">').insertBefore(this);
// обертаємо навколо нього гіперлінк з опцією "нового вікна"
$(img).wrap('<a href="' + externalURL + '" onclick="window.open(this.href);return false;"></a>');
// створюємо та ініціалізуємо об’єкт малюнка
var ico = new Image();
ico.src = faviconURL;
// лише після того, як його буде успішно завантажено,
// замінюємо нашу стандартну іконку на іконку сайту
if (ico.complete) img.attr('src', faviconURL);
else ico.onload = function(){ img.attr('src', faviconURL) };
});
// все, готово!
Ось і всі зусилля по іконо-графіці, в наслідок яких ваш сайт буде розписано різноманітними іконками. Отриманий результат ви бачите кількома рядками нижче, та можете одразу випробувати його в дії. Звичайно, як і кожні ліки, їх вартує приймати дозовано, і лише там, де це дійсно необхідно.

Тож, приємної вам іконографіки!

коментарі:

+1meako 29.09.2009 15:31
Красиве і акуратне рішення. Якраз та операція, яку можна сміливо робити на стороні клієнта і за рахунок жабоскрипту.

Щось подібне є у Яндексу в видачі пошуку (там тільки іконка показується), але наразі лінь розкопувати як у них реалізовано.
jin 29.09.2009 19:14
Вередливому користувачеві не догодиш :) Та, власне, я вже й не пропоную нічого змінювати, просто вирішив написати про наступне. Навести мишкою на цю маленьку іконку складніше, ніж пересилити себе і перевести палець на коліщатко =)
Так, звичайно :) Але, погодьтеся, візуалізовані іконками "зовнішні" гіперлінки сприймаються таки набагато краще:



Оскільки відпадає зайва необхідність (нехай навіть підсвідомо:) вчитуватися безпосередньо в самі URL для того щоб зрозуміти, куди саме ви потрапите. Ось це "когнітивне" міркування власне і є тим головним мотивом, заради якого це рішення й було реалізовано на Енетрі.
+1jin 01.10.2009 15:42
Не заперечую. Якщо дивитись з цієї сторони, медаль виглядає класно))

додати коментар: