Про FOP, SVG, PDF и значение дизайна.


Коворкинг интересен тем, что в нем можно встретить интересных людей.
Следующая история произошла после краткой беседы с Димой Гарником, арт-директором небольшой дизайн-студии.
У Димы была идея создать простой сайт для автовизиток. Идея несложная, но интересная. Вы заходите на сайт, указываете номер телефона и сообщение (например: “Мешает машина? Звони!“). Затем вы получаете развертку, из которой можно собрать симпатичную машинку. Развертка – это PDF-файл, который можно распечатать на листе бумаги формата А4 и собрать. Самое главное: сборка идет как “оригами”, т.е. без ножниц и клея, нужны только “прямые” руки и время.
В итоге получается такая штука:

car_2
Собственно, нужно было как-то реализовать генерацию этих разверток.

Так совпало, что Дима подошел и рассказал про свою идею именно в тот момент, когда мы с соседом пили кофе и вели досужие разговоры на тему: “что бы такого сделать интересного и не сложного”. Димина идея показалась интересной и не очень трудоемкой.
Генерацией PDF-файлов мне уже приходилось заниматься в прошлом (хотя это и была, в основном, генерация документов и отчетов с использованием различных выборок из БД – принципиальной разницы я не видел).

В общем, я сделал эту штуку.

Про FOP, SVG, PDF

Приблизительный план, что и как нужно делать, в целом, был понятен сразу:

1. Берем рисунок в векторе.
2. Сохраняем его в SVG-формате.
3. Поскольку SVG – это обычный XML, то менять в нем содержимое (номер, сообщение, цвет и т.д.) несложно.
4. Прикручиваем преобразователь SVG → PDF.
5. Проверяем, что все это работает, и делаем к этому “обвес”, который обрабатывает HTTP запросы и отдает пользователю PDF-файл.
6. Прикручиваем дизайн или интегрируем с текущим сайтом.

В целом, все прошло согласно плану. За исключением следующих моментов:

1. Проблемы со шрифтами.
Конечно, все зависит от SVG-файла, но, возможно, возникнут сложности с кириллическими шрифтами после развертывания на сервере (т.е. на Linux-е).
Решение: поставить недостающие (зависит от того, какие нужны) шрифты.
Например, как-то так:

apt-get install ttf-mscorefonts-installer

2. Еще раз проблемы со шрифтами.
У того, кто раньше работал с Apache FOP, могут возникнуть сложности в более тонкой настройке конфигурации.
Дело в том, что формат файла для настройки PDFTranscoder-а отличается от привычного fop.xconf!

Если кратко:

//Создает перекодировщик. Кроме PDF, если верить документации есть перевод в PostScript, EPS.
        Transcoder transcoder = new PDFTranscoder();

        // Если нужно "вшивать" свои шрифты, требуется дополнительная настройка
        try {
            DefaultConfigurationBuilder cfgBuilder = new DefaultConfigurationBuilder();
            Configuration cfg = cfgBuilder.buildFromFile(new File("pdf-renderer-cfg.xml"));
            ContainerUtil.configure(transcoder, cfg);
        } catch (Exception e) {
            throw new TranscoderException(e);
        }

Где “pdf-renderer-cfg.xml”:



  
    
      
    
  

Весь пример можно скачать с сайта Apache FOP.

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

На этом технические детали хотелось бы оставить в стороне и написать пару слов про дизайн и его значение.

Про дизайн.

Есть такая замечательная статья Learning to see (Учимся видеть)
В ней приводится следующая диаграмма:
chart

Как правило, чем более “программистская” контора, тем сильнее доминирует принцип – делаем “not pretty but functional“, а затем дизайн (если остались деньги).
Все бы хорошо, но бывают заказчики, которым потом жалко тратить деньги на нормальный дизайн: им главное, чтобы работало. Как правило, это касается разработки внутренних систем. В целом, это нормальная бизнес-ситуация: лишних денег на “красивости” часто нет. Правда в том, что в итоге сотрудникам некоторых компаний приходится годами пользоваться унылым корпоративным ПО.

Если приводить аналогию, то в таком случае, сайт для создания автовизитки без дизайна выглядел бы примерно так:

pod_steklom_bold
Без дизайна

Для сравнения, вот так он выглядит сейчас:

pod_steklom_beauty
С дизайном

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

Красиво выглядит? Да, бесспорно! Работает? К сожалению, нет. При этом могут пройти месяцы, пока из красивого получится работающее. Ситуация может усугубиться, если дизайнер “понапридумывает” разного, а это потом не будет работать или окажется невозможным реализовать.

Многие скажут: “К чему эти банальности? Это и так понятно!”. Понятно, но хотел бы повторить: нормальный дизайн – это не опция, это неотъемлемая часть хорошего программного продукта. Такая же составляющая, как и его функциональность.

PS: Может кто-то знает нормальные курсы дизайна по UI/UX? Не про “сферического коня в вакууме”, а про конкретные практики – как пользоваться инструментами. И не про общие принципы: что нужно выравнивать, что какие-то цвета плохо сочетаются и т.д., – про это многое уже известно.
Проблема в том, что иногда по мелочи нужно что-то сделать (например, у меня бывают вопросы, как в фотошопе кнопку перекрасить из серого в красный) и это вызывает определенные сложности. Спасибо соседям по коворкингу, что выручают (Николай, Надежда – это я про вас ;).
В общем, если кто-то из программистов, читающих мой блог, бывал на таких курсах – был бы рад услышать про них отзыв: стоит или нет.

PPS: Если, вдруг, какой-то дизайнер забредет на мой программистский блог – буду рад возможности сотрудничества. Пишите в комментариях ;).

Любое использование либо копирование материалов или подборки материалов сайта, элементов дизайна и оформления допускается лишь с разрешения правообладателя и только со ссылкой на источник: programador.ru

Телеграм канал: @prgrmdr
Почта для связи: vit [at] programmisty.com