Не так давно закончился второй сезон мультсериала «My Little Pony: Friendship Is Magic». Думаю, нет особой нужды развернуто его представлять, тем более, что он уже и на российском телевидении успел засветиться.

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

Жил да был один проект. И был у него интерфейс для выбора неких сущностей, живущих в древовидной структуре.

Изначально он выглядел как обычные выпадающие менюшки со скроллингом. Однако через некоторое время сущностей стало много и работа с ними преобрела характер пытки. Пользователи попросили сделать хотя бы саджест.

Просто саджест делать было скучно, поэтому я сделал вот такую штуковину, которая немного напоминает по внешнему виду маковский Файндер в мультиколоночном режиме. Отсюда и название — b-finder.

Изначально, «Файндер» был заточен только под один проект. Но народу эта штука понравилась и меня неоднократно спрашивали, можно ли его использовать где-нибудь еще. Посему я решил «отвязать» его от проекта и сделать jQuery-плагином для пущей совместимости.

Пару лет назад я сделал небольшой персональный проект под названием «Аггрегатор комиксов». Суть проекта в том, что есть куча сайтов с комиксами, на которых нет RSS-лент. И мне было откровенно лень ходить по этим сайтам вручную и проверять апдейты.

Посему был написан примитивный «паучок», обходящий сайты по расписанию, разбирающий содержимое страниц и по разным алгоритмам выковыривающий информацию об апдейтах и складывающий эту информацию в базу, откуда уже другой скрипт, вьюер, генерировал РСС, Атом или Хтмл.

Люди по-разному относятся к CSS. Кто-то ворчит, что раньше и таблицы были зеленее, кто-то горячится, мол, дайте мне ваши таблицы, уж я их озеленю. Лично я довольно давно воспринимаю CSS-файлы как совего рода конфиги для внешнего вида веб-страницы. По сути ведь так и есть. У хорошего верстальщика HTML используется для того, чтобы создать структуру документа, у которой затем с помощью CSS настраивается внешнее отображение.

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

Сейчас, когда космические сайты бороздят просторы мировой паутины, все чаще возникает потребность делать их многоязычными. Способов существует много. Под разные платформы, фреймворки и шаблонизаторы. Способ, который хочу предложить я, использует в качестве основы CSS.

Спустя несколько месяцев с публикации второй версии своих гитарных табулатур, нашел наконец-то время немного их доработать напильником.



Что было сделано:

— Убрал схемы с двойными струнами (они делались, в общем-то скорее по фану),
— Максимальное количество ладов ограничил двенадцатью,
— Добавил отображение номеров ладов,
— Добавил отображение номеров пальцев,
— Добавил отображение строя инструмента,
— Переделал отображение неактивных струн (раньше они выделялись красными «фишками», теперь, как и положено, красными крестиками и менее заметным цветом (второе сделано для шестого ИЕ, который не поддерживат css-свойство content),
— Поработал над кроссбраузерностью, в результате — та-дааам! — эта штука работает даже в старичке шестом ИЕ, хотя некоторых красивостей там увидеть и не получится.

Как это безобразие выглядит, можно увидеть на странице с примерами (сравнить с предыдущей версией).

Несколько раз по работе сталкивался с необходимостью верстать баллуны (облачка, филактеры). Если кто не в курсе, это такие штуки, с помощью которых в комиксах озвучивают реплики персонажей. В интерфейсах же сайтов их обычно используют для всяческих всплывающих подсказок к элементам.

Вдохновленный сайтом http://chordfind.com, а также примером r3code, решил довести до ума собственную версию табулатур.

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

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

Первый вопрос, который возникает: что вообще можно верстать на миллиметрах? Второй — какие с этим могут быть проблемы?

С первым вопросом все просто. На миллиметрах можно сверстать визитку формата 90х50, которую, в свою очередь, можно было бы распечатать на принтере. Сказано — сделано. Шутки ради использовал в качестве блочных элементов теги заголовков (<H*>). Как раз шесть штук насчиталось.

Проблемы при реализации всплыло три:

1. Опера несколько по-своему пересчитывает миллиметровые величины в пиксели. Чтобы добиться в ней отображения однопиксельной рамочки, пришлось поподбирать величины. Сошлись мы на ширине 0.3mm.

2. Размеры изображениям проще все-таки задавать в пикселях (хотя, как и в случае с Оперой, можно подобрать адекватные величины в миллиметрах).

3. При распечатке не отображаются изображения, заданные через css-свойство background. Поэтому пришлось все картинки вставлять в абсолютно спозиционированные блоки, а их уже размещать в требуемых местах.

Печатать пробовал из-под Макоси и Винды. Браузеры: ИЕ (6+), Огнелис, Опера, Сафари, Хром. Вроде нигде не глючило ни отображение, ни печать. Разве что в шестом ИЕ немного подтормаживал рендеринг. Все исходники можно посмотреть по ссылке на визитку.

На новизну идеи нисколько не претендую.