«Corner» — альтернатива стандартным баннерам

Баннер «Corner» (31.41КиБ)

У Глеба Гарипова увидел реализацию замечательной идеи — баннеров формата «Corner». Мне она нравится своей ненавязчивостью, правда меня мучают сомнения — будет ли вообще её кто-то открывать. Первые несколько раз, из любопытства — несомненно, а потом? На скриншоте не видно весь процесс, поэтому поясняю приницип — в свёрнутом состоянии баннер занимает небольшой анимированный уголок экрана, как только пользователь его потянет, открывается баннер целиком, по принципу перелистывания страницы. Живой пример можно увидеть на сайте медицинского портала Doctor.kz, справа над поиском.

4 комментария

Комментарии на Blok

Сделал комментарии на блок, через OpenID (поддерживается так же Simple Registration Extension) как и собирался. Пока, можно сказать, в стадии бета-тестрирования — я не слишком ещё хорошо разбираюсь в тонкостях OpenID. Кстати, если у кого-то ещё нет OpenID, то очень рекомендую завести его на сервисе myOpenID, исключительно удобно.

P.S. Дима, можешь написать прямо на сайте какую глупость я написал.

29 комментариев

Про Никон

Оригинал истории был расположен в сообществе «Содружество владельцев камер Nikon», но сейчас уже удалён, поэтому я размещаю её у себя полностью. Всем, занимающимся фотографией рекомедую прочитать её внимательно.

Человек я терпеливый, но после последней покупки решил рассказать вам печальную историю о приобретении никоновской оптики в Москве. По работе мне приходилось использовать оптику высокого класса, купленную в европе, потому я не сразу понял, что происходит =)

Началась вся беда естественно с… женщин ! =) Жена увлеклась фото. Первый сигнал — покупка полтинников 50/1.8 — из 3-х экземпляров 1 был более-менее резким, без ярко выраженных фф/бф. Почитав (в рунете!), что это практически норма, успокоился =) Далее 85/1.8 — та же история. Дальше интереснее! Покупка в фотомаркете 35-70/2.8 — выбирали вместе с продавцами, из 5 стекол все оказались с фф/бф ! Так же плачевно окончилась история с 55-200 VR. При тестовых снимках в Праге я был поражен его резкости для такой цены, потому здесь брал, не ожидая подвоха. А зря =) Сдал его обратно. Последняя капля — Никкор 12-24/4 — согласитесь, — недешевое стекло. Брак — мыло по левой стороне на 12—14мм. Обменял на… мыло по правой стороне на 12-14мм. Взял Сигмо — нет проблем =) При этом на западе такой проблемы не знают!

В Праге в Фотошкоде мне сказали, что в Россию техника Никон идет, минуя всего одно звено в производственной цепочке, — это ОТК =) Ни Никон, ни дистрибьюторов в этом винить нет смысла. Таможенные пошлины в нашей любимой стране таковы, что дилеры вынуждены были обратиться к производителю с просьбой снизить себестоимость техники. Как выяснилось — единственный способ, — исключить полную проверку на соответствие всех норм. А надо сказать, — 20% стоимости это как раз тестирование. Не знаю, относится ли это ко всей технике, ввозимой в Россию… к примеру, хороший знакомый из Эльдорадо сказал, что для их торговой сети это вообще норма, — это все, что втыкается в розетку =)

Сорри за сумбур, но накопилось =) Слишком уж много времени занимает беготня с возвратами и обменами.

Оставить комментарий

Перенос и FireFox

Как известно — FireFox последний из браузеров, который не поддерживает мягкий перенос (shy). Explorer, как один из продвинутых браузеров (не надо смеяться, я не шучу), начал его поддерживать самым первым. Мягким переносом верстальщик может указать где в длинном слове, при необходимости, можно сделать перенос, например, если слово не умещается в колонку. Я прочитал несколько статей на эту тему, но нигде эту задачу решить не смогли. Между тем, в FireFox действует нестандартный тег WBR, который позвляет добиться того же самого, но без символа переноса. Что не совсем то. Кстати, CSS применить к WBR нельзя. Как же быть?

Проблему я решил, но, увы, с потерями: придётся подбирать один параметр для каждого вида шрифта, слово разорванно тегом и поисковые машины проиндексируют его по частям, а полный (совместимый с Opera, FF и IE6) вариант довольно громоздок.

Во-первых, я сразу отказался от тега WBR, потому что любой HTML-валидатор укажет на то, что тег нестандартный. В FireFox действует Zero-width space, символ с кодом 8203, «пробел нулевой ширины». Он позволяет добиться того же самого — разорвать слово в определённом месте.

С идеей как это всё реализовать, я определился сразу — строка при переносе должна открывать концевой символ. А, если переноса нет, вставать поверх него. Вдоволь помучавшись с перекрытием через «position: absolute», и селектором «:after», я вдруг вспомнил о теге «Q», где можно указать текст перед и после этого тега (вообще-то указываются там открывающая и закрывающая кавычка, но сути-то это не меняет). Стало значительно проще. Для того, чтобы один символ затёр другой без остатка, я применяю «background: inherit» — наследуя фон из тегов выше.

Итак, один из минусов — это размер символа переноса в вашем экранном шрифте. Задаётся он в стиле (см. ниже) в параметре «margin-right» и для выбранной мной Tahoma равен 0.36em. Полный пример, работающий в FireFox таков (я выбрал «заброшенный» тег «VAR», чтобы реализовать задуманное):

<!-- Soft hyphen emulation in FireFox -->
<style type="text/css">
    body { background: white }
    var>q { quotes: "" "-"; margin-right: -0.36em }
    var { font-style: normal; background: inherit }
</style>

<var><q>оченьдлинноеслово&#8203;<var>продолжениеоченьдлинногослова</var></var>

Стоит браузеру разорвать слово в месте, где стоит пробел нулевой ширины и из-под второй половины слова появляется символ переноса. С полным вариантом всё немного сложнее — в Opera всё будет работать и так, в IE — нет. Там масса проблем — символ не будет перекрываться фоном, даже если вынести символ переноса из «Q» в текст, но можно заставить работать «shy». Для этого придётся убрать нулевой пробел, если его оставить в IE рядом с «shy», эффект будет непредвиденным.

Поэтому мы его убираем (кстати, можно попытаться вставить его через атрибут «content» селектором «var>var:before», если текст у нас в Unicode):

<!-- Soft hyphen in FireFox, Opera, IE6 -->
<style type="text/css">
    body { background: gray; font-size: 20px; font-family: Tahoma }
    var>q { quotes: "" "-"; margin-right: -0.36em }
    var { font-style: normal; background: inherit }
    * html var b { display: none }
</style>
<var><q>оченьдлинноеслово<b>&#8203;</b>&shy;<var>продолжениеоченьдлинногослова</var></var>

2 комментария

Неуловимый тег HYPE

Разбирая заметки сайта за 2000—2003 гг. (всё думаю — конвертировать их или не нужно), наткнулся на старую заметку, где я пытался разобраться с недокументированными тегами браузеров. На тот момент актуальными были Internet Explorer и, почивший ныне, Netscape Navigator (другой браузер под тем же именем зачем-то до сих пор выпускает AOL). Оказалось, что, по меньшей мере, один из «секретных» тегов браузера от Netscape дожил до наших дней — это HYPE.

Его до сих пор можно найти в исходниках ядра Gecko и, соответсвенно, он работает в браузерах, основанных на этом ядре. Основное его назначение туманно, по всей видимости, он должен выводить какую-то картинку и играть мелодию, но только на платформах Unix и Mac:

The hype tag is just for fun. It only effects the UNIX version which can affor to have a sound file compiled into the binary. If we have the memory, create a fake image tag to replace the <HYPE> tag and process it.

Легко убедиться, что тег присутствует, если попробовать в FireFox повесить на него любой CSS стиль. Кстати, тег таким же образом «работает» и в Опере, потому что (и это оказалось для меня большим сюрпризом) в Опере можно использовать любое сочетание букв в качестве тега. Самая старая Опера, которая у меня есть на компьютере — 8.02 прекрасно отобразила красный бордюр вокруг свежеизобретённого мной тега «REDBORDER» со стилем «background: 1px solid red».

Я думаю, что тег, возможно, не совсем бесполезен, так как Internet Explorer за тег его не считает. Возможно, таким образом можно применять CSS к какому-то блоку, незаметно для Internet Explorer или скрывать от него часть контента (применяя «display: none» на тег HYPE).

Оставить комментарий

Alternativa Game

На блоге «Флэш Потрошитель» увидел ссылку на любопытный проект — движок Alternativa3D (есть небольшая демострационная версия, нещадно отъедающая память).

Alternativa3D (81.40КиБ)

Alternativa3D — движок для MMORPG Alternative, который сделан на Flash9. В демонстрационной версии представлен небольшой кусок ланшафта с дорогами, травой, деревьями и домом. Всё это можно вращать, менять угол обзора. Скорость очень приличная — я попробовал игру на второй домашней машине, очень слабенькой (Pentium III-1.1GHz, 512Mb, GeForce3 Ti200), ниже 25 fps не опускается. Основные характеристики движка:

  • Трёхмерная геометрия и 3D-спрайты. Здания и ландшафт выполняются в “честном” 3D, объекты со сложной геометрией — в виде спрайтов, в т.ч. многофазных.
  • Система освещения, включающая направленные и точечные источники света. Изменение времени суток, рассеянный и солнечный свет, автоматическое затенение в углах, динамические тени, включая тени от спрайтов.
  • Настраиваемое качество текстур и освещения (при отсутствии аппаратной поддержки 3D-графики во Flash это особенно важно).
  • Низкая нагрузка на процессор (исключая моменты изменения освещения и вращения камеры, что происходит нечасто и не критично для игры).
    У создателей игры большие планы:

В одиночку или сообща игроки строят финансовые империи, делают политическую карьеру, создают криминальные группы, плетут интриги в борьбе за влияние и территорию, продают и покупают, организуют бизнес, просто работают и общаются.

Играющие имеют возможность перемещаться по виртуальному миру, взаимодействовать друг с другом: общаться, драться, обмениваться предметами, покупать и продавать их; арендовать и покупать недвижимость, развивать собственные навыки и физические данные, организовываться в группы для достижения общих целей.

Любопытно будет взглянуть.

Оставить комментарий

Пиксельные марки

Марка (4.74КиБ)

Интересный проект — пиксельные марки, собирает марки, наприсованный в пикельной технике художниками по всему миру. «Цена» на марке означает её популярность. На рисунке слева — марка известного дизайнера Sham. Правила участия очень просты — вы скачиваете один из двух шаблонов и рисуете в нём марку на одну из четырёх тем: «food», «fantasy», «sports» или «characters», выбираете каким шрифтом будет напечатана «цена» марки (один из пяти вариантов размеров) и отсылаете её на сайт.

Оставить комментарий

Монетизация траффика

Обычно я плохо отношусь к рекламе, она навязчива, она тратит моё время без разрешения и отвлекает от основого содержания, паразитирует на нём. Посмотрите на средний сайт центральной полосы интернета — всё мигает, при заходе на страницу ¾ экрана закрыто Flash-баннером, вокруг и посредине текста — баннеры, рекламные вставки, ссылки и прочее. В свете всеобщей монетизации (два интересных блога, где я бываю чаще всего — Димы Смирнова и Ильи Бирмана монетизированы уже несколько месяцев), всё, кажется, должно бы стать ещё хуже. Но нет, я обнаружил, что меня это явление не раздражает.

Для тех, кто не знает, монетизация, по сути — извлечение прибыли из своего сайта, часто — при помощи каких-то сервисов (той же «Sape», которую используют оба вышеупомянутых блога).

Не раздражает оно меня, думаю, по очень простой причине. Все блоги для меня делятся на две категории: «мне стоит читать» и «мне не стоит читать». В первую категорию попадают только талантливые и умные люди, такие же умные и талатливые как я или обладающие этими качествами в большей степени, пишущие на волнующие меня темы. Т. е., пока никто не обиделся, во второй категории тоже есть талантливые и умные, но если мне не интересны особенности игры на «Forex» или послеродовой синдром у курапаток, то я его не читаю.

Люди, которых я читаю, как талантливые и умные, выбирают ненавязчивые методы монетизации. «Sape» это вообще не реклама — это интимные отношения с «Яндексом», димины ссылки на сайт с фотографиями звёзд не пытаются играть с моими чувствами («такой хорошенький котёнок ест „Дрискас“», «после кружки пива „Мочаково“ они все пойдут к нему домой»), а заказные статьи, если они есть, действительно являются мнением авторов этих блогов.

Резюме — меня радует, что бо́льшая часть методов монетизации органично встраивается в контент. Это либо исключительно текстовая реклама (а значит её можно гармонично встроить в дизайн сайта и она не будет оттягивать на себя всё внимание, мешая сосредоточиться на главном), либо контекстная реклама, т. е., потенциально, увеличивающая ценность материала. Баннерная реклама попадается реже и это, как правило, партнёрская реклама, т. е. баннер можно изменить под дизайн сайта.

Оставить комментарий

Крутой лох

Короны (0.54КиБ)

Корон на «Блоговаре» я набрал аж десять штук. Если знать как, это очень просто, с появлением ботов стало ещё проще — можно было просто встать в очередь и дожидаться, когда боты скинут первых. Сейчас дела обстоят значительно хуже. Вчера Ильшат Саетов обнаружил, что правила игры поменялись — боты применяют боевые заклинание не на того, кто стоит на первом месте, а на того, у кого корона.

Очень неприятная ситуация — чем дольше у тебя корона, чем дальше ты сползаешь из таблицы. Когда у тебя её перехватят, выбираться снизу, возможно, придётся очень долго. Если её перехватят. Потому что многие поняли — лучше дождаться когда у ботов «сядут батарейки» (боты тратят деньги на заклинания, деньги у ботов конечные) и потом продолжить борьбу, чем красоваться в короне, но потом пытаться набрать УНЦ. Так что в надписе на короне «Типа Как Бы Крутой Блог» ключевые слова, пока, «типа как бы».

Оставить комментарий

Robots.txt для роботов?

На блоге «ODP (DMOZ) неофициально» нашёл ссылку на больше забавное, чем полезное исследование на тему применения файла robots.txt.

Andrew Wooster прошёлся скриптом, написанным на Python, по известнейшему каталогу DMOZ и скачал все robots.txt сайтов, которые там зарегистрированы. Получилась достаточно большая база — 12Гб (около 4,6 миллиона доменов). Бо́льшая часть сайтов (чуть больше 65%) этого файла не имеют, что ожидаемо, вот у меня, например, его тоже нет, у меня нечего запрещать к индексированию.

В остальной части встречались самые разные проблемы — это и нестандартные HTTP-коды ответа (например, 999 или 666), ошибочные mime-типы (например, text/x-perl, video/x-ms-asf или image/jpeg), файлы в других текстовых форматах (RTF, MS Word, HTML, LateX, KOffice — всё текстовые форматы), неверная кодировка (UTF-16 или, например, совсем уж экзотическая для многих французская «nf_z_62-010»), ошибочный формат комментариев (С++-комментарии или HTML), иструкции роботу на натуральных языках, файлы в формате info.txt, ошибки синтаксиса (опечатки, изменение порядка, ошибочное использование расширений), открыто указываются места расположений секретных каталогов (phpmyadmin, админка, частные данные) и так далее.

Какие выводы? В свете последних дискуссий о том, должен ли поисковик индексировать сайт без явного согласия на то веб-мастера, замечает Andrew Wooster, поисковикам придётся иметь очень нетривиальный парсер robots.txt, отпределяющий кодировки и форматы, поддерживающий все расширения и исправляющий любые ошибки. И даже в этом случае, если сторонники подобного запрета победят, ¾ интернета, если судить по кодам ответа, будет просто недоступна поисковым системам (DMOZ — достаточно хорошая выборка, это не мусорные сайты).

Оставить комментарий

Азбука: история букв

Пока искал шрифты, наткнулся на крайне интересный проект «Азбука» — истории о буквах. Написано увлекательно, хорошо иллюстрированно, понятно даже неподготовленному читателю. Отдельное спасибо проекту за статью о букве «ё», цитирую небольшую часть (выше читируемого текста приводится мнение Артемия Лебедева по поводу это буквы, смотрите статью):

Рассказав исторический анекдот про княгиню Дашкову, Лебедев забыл упомянуть, что княгиню поддержали ряд ведущих деятелей культуры того времени, включая Державина, который первый начал использовать букву в деловой переписке. Уже в 1795 появилось первое печатное издание, в котором встречается буква ё, — книга Ивана Дмитриева «Мои безделки». А в 1796 году окончательно популяризовал букву Карамзин, напечатав в Московской университетской типографии свою первую стихотворную книжку «Аониды». В ней с буквой ё были напечатано три слова: орёл, мотылёк, слёзы.

Зачем нужны выносные элементы? Спросите у любого шрифтовика — он ответит: выносные элементы улучшают читаемость текста, без них текст выглядел бы монотонно. Именно поэтому в раннем средневековье с появлением большого количества религиозной литературы появился и минускульный шрифт — предтеча строчный букв, который отличался от маюскульного шрифта (прописных букв) более плавными формами, большей убористостью и большим количеством выносных элементов, за которые «цеплялся» человеческий глаз, благодаря чему повышалась скорость чтения. Умляут — не выносной элемент, но функции у него те же.

Если посмотреть с художественной точки зрения, выносные элементы создают ритм, а ритм в свою очередь улучшает эстетические свойства шрифта. Это, кстати, и является одной из основных причин, почему латинский алфавит «красивей» кириллического. И по этой же причине текст набранный кириллицей называют «забором»: строчные буквы в массе своей копируют буквы прописные, а у них выносные элементы — большая редкость (Ц, Щ, Й, отчасти Ф в кириллице; Q, отчасти J в латинице).

Оставить комментарий

Фокусы с GIF, прозрачность и hover

Старинный револьвер с деревянной рукояткой и металлическим стволом на белом фоне.

Самые внимательные, наверное, заметили, что в прошлых заметках у меня на картинке использовалась эмуляция эффекта наведения на ссылку — посмотрите, если навести на картинку мышку, «ссылка», выделенная синим, на картинке подчеркнётся. И это не JavaScript.

Объяснение очень простое — картинка сделана с прозрачностью, далее при помощи CSS под неё подставлен белый фон, а при наведении (селектор «:hover») фон меняется на голубой. Такой же эффект использован на картинке с пистолетом слева (наведите мышку). Ссылка на картинке обязательна — без неё в Internet Explorer (версии ниже 7-й) фон менять не будет, «:hover» просто не сработает. Таблица стилей для этой картинки выглядит вот так:

a.gun:hover img { background: black } /* стиль при наведении мышкой */
a.gun img { margin: 0px; background: white } /* убираем поля в Opera и подкладываем белый фон */

HTML, соотвественно:

<a href="#" class="gun"><img src="gun.gif" /></a>

Если вам не ясно, почему пистолетик «стреляет» (т. е. почему изображение движется, когда наводишь мышку), то тут всё просто — прозрачная область движется (это animated GIF), на белом фоне этого не видно, когда фон меняется, создаётся эффект движущейся пули.

Ещё интересные эффекты можно получить, если использовать альфа-канал (полупрозрачность) в формате PNG, но, к сожалению, об анимации тут придётся забыть.

Оставить комментарий

Маркетологи

Придумал шутку про маркетологов. Для тех, кто понимает, marketolog.css:

*      { text-transform: uppercase }
:after { content: '!!!!!' }

Оставить комментарий

Сайт на мобильных устройствах: Wall4PHP

Латвийский парень Kaspars Foigts реализовал библиотеку Wall4PHP. Это реализация WALL (Wireless Abstraction Library, оригинальная версия создана Luca Passani на Java) на языке PHP. Библиотека предназначена для поддержки сайтом мобильных устройств и позволяет на специальном языке описывать вёрстку, чтобы потом показывать сайт на том языке, который поддерживается устройством (XHTML, WML, модифицированный HTML для Imode-устройств).

Профиль устройства (что именно им поддерживается) описывается на специальном XML-языке WURFL, по этим профилям WALL определяет в каком виде устройству показать сайт. На странице автора есть англоязычное описание возможностей библиотеки, языка, а так же несколько примеров работы. Библиотека не развивается с конца 2006-го года (хотя на сайте есть TODO), но, похоже, достаточно стабильна и функциональна.

Оставить комментарий

Хакеры и кракеры

О том, кто такие «хакеры» и чем они отличаются от «кракеров» написано достаточно давно, но мне очень нравится статья ЖЖ-пользователя Димы Сокола. Ничего нового (впрочем, для многих написанное — откровение), но изложение внятное, написано простым и понятным языком.

Оставить комментарий

Интересный символ в Unicode

Однолетнее травянистое растение из семейства шелковичных (1.40КиБ)

Как вы думаете, если ли в Unicode символ однолетного травянистого растения из семейства шелковичных, который большая часть альтернативно настроенных к обществу подростков носит в виде узнаваемого символа, а некоторые даже и пробовали курить?

Естественно, символа, в упомянутой мной узнаваемой форме, нет. И не будет. Но на планете Земля есть иерогифические языки, где многие базовые слова состоят из одного символа. В Unicode эти символы нужно включать. Так вот. Альтернативно настроенным повезло — в таблице есть символ, который в переводе обозначает это упорно неназываемое мной слово. Его же можно увидеть на картинке слева.

Оставить комментарий

Южный океан

Южный океан (9.23КиБ)

Я, к стыду своему, лишь около полугода назад узнал, что на нашей планете уже семь лет как пять океанов. В 2000-м году Международная гидрографическая организация официально вылелила Южный океан из состава Атлантического, Индийского и Тихого.

Впервые этот океан был выделен ещё в 1650 году голландским географом Варениусом, причём название «Южный океан» помещалось на картах и атласах до наших времён (исключая морские навигационные карты), хотя границы его время от времени пересматривались и до сих пор несколько размыты. Причина отделения — воды вокруг Антрактиды (вокруг которой этот океан располагается) имеют свою специфику и объеденены Антарктическим циркумполярным течением.

Оставить комментарий

Блоговар — армия ботов

В «Блоговаре» появился «исскуственный интеллект» — можно позволить сайту играть за вас, т. е. применять магию по какому-то нехитрому алгоритму. По всей видимости — просто атаковать тех, кто на первых местах: снимать защитные заклинания, отбирать УНЦ. Что из этого получится, сказать сложно, но, похоже, рейтинг будет в постоянной ротации. Я под раздачу уже попал, Дим, а защитные заклинания от ботов будут, м?

Куплю-ка я корону, пока могу. Это уже моя четвёртая корона, очень похоже, что последняя. Драться с армией ботов врядли кому-то подсилу.

Оставить комментарий