Как делался «Бизнес-линч» 9 сентября 2006

1 сентября на сайте студии открылся «Бизнес-линч». Раздел состоит из двух частей — той, где дизайнеры загружают свои работы и видят рецензии, и той, где арт-директоры пишут комментарии. Во второй — «админской» — части установлен редактор, который специально для этого раздела создали наши флеш-технологи.

Замечательно и удобно (не надо возиться ни с Фотошопом, ни с яваскриптом). А теперь черкания арт-директора придется показать на сайте.

Решение «в лоб», которое использовалось в первые дни,— поместить на сайте точно такой же флеш, но с отключенной возможностью редактирования. «Админская» часть флеш-редактора сохраняет данные в базе, а «клиентская» читает их.

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

У черты
Итак, мы остались наедине с XML-данными в базе. Примерно такими:

<?xml version="1.0" encoding="UTF-8" ?> 
<document
    imagey="106"
    imagex="128"
    image-url="E163C183-5244-47F1-8DBE-9AD7B427BFC6.jpg">
    <text height="55" width="115" y="141" x="641">
        <content>Что тут делает вафельная решетка?</content>
        <triangle
            y1="55" x1="0"
            y2="89" x2="-89" 
            y3="55" x3="15"
        />
    </text>
</document>

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

Тени на среднем слое полупрозрачны — значит, нужен PNG. А в распоряжении пока что есть только XML — значит, нужен конвертер. Разумно воспользоваться форматом SVG: это одновременно и векторная графика, и XML-код.

Сделать SVG из XML проще простого — существует XSLT. А вот как сделать из SVG PNG, сразу не сообразишь. (Нужна ведь автоматика, которая будет работать на Юникс-сервере).

Уже давным давно работает программа ImageMagick, с ее помощью мы в промышленных масштабах делаем «превьюхи» (например, для «Рутины»).

ImageMagick понимает подмножество формата SVG, но результатом (справа) останется доволен разве что Пикассо:

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

Последний рывок
На поиски нужного инструмента ушел почти день. Существует около десятка конвертеров SVG в PNG (насколько они превосходят ImageMagick, не всегда известно), все из них требуют установки дополнительных программ, и эти зависимости расходятся веером: каждый новый компонент требует еще нескольких.

Самым разумным оказалось поставить SVG-растеризатор (SVG rasterizer) из комплекта «Батик». Для его работы, правда, потребовалось установить и Яву, так что этот способ не только разумный, но и современный.

Вся технологическая цепь в итоге содержит такой набор ключевых слов: Flash, XML, XSL, PNG, Java.

Неужели это все?
Нет, конечно не все. Кроме пээнгэ-файла создается еще и гиф, чтобы порадовать владельцев старых браузеров. А отдельное XSLT-преобразование создает HTML-разметку, расставляющую текстовые блоки в нужные места.