Скриншоты для блогов (Встречайте UseShots.)

Наконец, я готов представить на суд публики программу, над которой работал в свободное время несколько последних месяцев. UseShots Editor - бесплатная специализированная программа для блоггеров, которым часто нужно вставлять в свои статьи разнообразные скриншоты (скачать здесь).

Для названия программы я придумал слово UseShots (читается ЮсШотс). Для себя я определил это слово как Useful Screen Shots (полезные скриншоты). Это скриншоты, которые совместно с текстовыми описаниями показывают, как пользоваться (use) тем, что на них изображено, и тем самым приносят пользу (use).

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

Типичная последовательность действий была следующая. Print Screen. Потом вставлял экран в графический редактор. Вырезал нужную мне часть. Смотрел, подходит ли картинка по ширине к колонке блога. Если не подходила, то было два варианта. 1. уменьшить картинку. 2. Уменьшить размеры окна программы и сделать скриншот заново.

Уменьшение изображений
Оба варианта сопряжены с определёнными проблемами. Уменьшать картинку нужно было с умом, чтоб качество изображения оставалось приемлемым и не терялись мелкие детали. В общем случае уменьшение в 2 и 4 раза давало приемлемое качество изображения, но иногда при таком уменьшении терялись важные детали, мелкий текст становился нечитаемым, при других же степенях уменьшения, картинка получалась как бы “грязная”. Поэтому приходилось прибегать ко второму способу. Изменять размеры окна и переснимать скриншот, и возможно не один раз. Тут я очень пожалел, что не могу изначально узнать, какого размера нужные мне элементы, перед тем как делать скриншот.

Формат изображений
Когда получалась картинка подходящего качества, то вставал следующий вопрос: в каком формате её сохранять. Обычно рассматривалось 2 варианта: GIF и JPEG. Основным критерием был размер получаемых файлов при сохранении хорошего качества изображения. (Меня раздражает, когда приходится скачивать скриншоты в несколько сотен килобайт, когда в более оптимальном формате их размер был бы в несколько раз меньше. Маленький размер скриншотов так же является плюсом при ограниченном месте на сервере и при минимизации траффика.) В общем случае, GIF лучше подходит для текста и элементов интерфейса, преимущественно монотонных, в которых переход цвета, происходит резко, в то время как JPEG для элементов с плавными переходами цветов (фотографии, графика, уменьшенные изображения элементов интерфейса) .

Закачка скриншотов
Текст статьи писался в веб-интерфейсе в контрольной панели блога. Чтоб там увидеть картинки, нужно указать ссылку на файл изображения в интеренете. Значит, сперва надо закачать файлы на сайт. Это можно делать по-разному, но в любом случае надо:

1. вспомнить имена файлов и куда их сохранил (скриншоты могли быть сделаны и неделю назад, и среди них есть черновые версии, которые закачивать не надо)
2. точно сопоставить ссылки на закачанные файлы с конкретными картинками, чтоб вставить их в нужные места в статье (особенно важно, если у файлов изначально были малоговорящие имена типа 1.jpg, 5.jpg, etc.).
3. ну и потом каждую ссылку нужно вручную вставлять (а картинок может быть больше десятка).

И вот, когда картинки закачаны на сайт и вставлены в черновик статьи, приходит озарение (чтоб его!), что один из шагов можно было проиллюстрировать удачнее, или обращаешь внимание, что на скриншоте светится твой личный email, и его нужно убрать. А значит снова нужно делать/переделывать скриншот и по-новой закачивать его на сайт.

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

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

Идея
А что? Это - идея! Программировать умею.Ничего супернавороченного вроде не требуется. Получился вот такой список основных требований к программе:

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

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

UseShots и цифровые фотоаппараты
Для этой задачи переход на использование UseShots Editor’ом мне показался сходным с переходом на использование цифровых фотоаппаратов, после старых плёночных мыльниц. Помните, раньше чтобы просто узнать получился ли снимок, после того как его сделал приходилось ждать, пока отснимется вся плёнка. Потом идти проявлять плёнку, печатать фотографию. И через неделю после возвращения из отпуска обнаружить, что плёнка была бракованная и все снимки безвозвратно пропали. С цифровыми фотоаппаратами жизнь наша стала легче. О плёнках больше не надо беспокоиться, щуриться в глазок видоискателя тоже - что видно на экране, то и на фотографии будет. Сразу можно посмотреть, удачный получился снимок или нет. Неудачный удалить и тут же переснять. Ничего проявлять не нужно, можно сразу же показывать отснятые кадры друзьям. Не случайно, в UseShots для снимков экрана используется “камера”, по принципу действия напоминающая цифровую фотокамеру (со скидкой на особенности работы компьютерных программ).

UseShots для всех
Начав работать над этой программой, я подумал, она могла бы пригодиться не только мне одному. В конце концов, очень многие блоггеры, особенно пишущие на компьютерные темы, вставляют в свои статьи скриншоты (от чего, имхо, их статьи только выигрывают). А сколько разработчиков программ могли бы делать серии иллюстрированных тьюториалов(как tutorial по-русски?) на своих блогах? Служба поддержки могла бы публиковать иллюстрированные инструкции для пользователей. На внутренних серверах компаний могли бы публиковаться инструкции для новых служащих, иллюстрирующие, как выполняются те или иные служебные задачи. Возможно, кто-то уже задумывался о подобном использовании блогов, но, столкнувшись с трудностями, подобными тем, что я описал в начале этого поста, решил забросить эту идею.

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

WordPress
Текущая версия программы (0.2) работает только с блогами на движке WordPress. Этот движок был выбран благодаря своей популярности (миллионы блогов. Думаю, он входит в тройку наиболее популярных движков), развитой системе плагинов, развитому API и возможности программно закачивать файлы (первоначально думал о Blogger’е, но не нашёл в его API фукции для закачки файлов). А также, у WordPress есть бесплатный хостинг для блогов на WordPress.com c кучей места для закачки своих файлов (3Гб). Там можно выбрать русифицированную версию. Есть сайты, пишущие о WordPress на русском языке.

Среди ограничений и недоработок текущей версии

• Работает только на Windows (2000, XP, может быть Vista). Скорее всего не будет нормально работать на Win95, Win98 и WinME. (Это ограничение не касается самого блога)
• Публикация только на WordPress-овские блоги. Тестировалось на версиях 2.3+ (Поддержка других блог-платформ планируется.)
• Нет WYSIWYG редактора текста. Но в обычный текст можно вставлять ограниченный набор html тэгов (b, i, u, a, span, div), так что при умелом использовании в купе с CSS можно получить приличное форматирование.
• Пока не поддерживаются Категории WordPress’а. Статьи постятся в категорию по умолчанию. Но поддерживаются тэги. Можете ими пользоваться как своеобразной альтернативой категориям. (Поддержка категорий планируется).

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

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

Начну с ссылки на свою статью, которая от начала и до конца была создана и опубликована с помощью UseShots Editor’a. “Первые шаги с UseShots Editor’ом” - иллюстрированная пошаговая инструкция для всех желающих познакомиться с моей новой программой

Отзывы
Я очень рассчитываю на ваши отзывы. Они помогут мне определиться с тем, в каком направлении дальше развивать программу, какие фичи нужны только мне, а какие не только ;-) Ну и вообще, будущее этой программы будет зависеть от того, как тепло она будет встречена. Оставляйте ваши комментарии здесь или воспользуйтесь формой, чтоб связаться со мной напрямую.

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.

Tags: introduction, UseShots Editor