Subscribe  RSS

Первые шаги с UseShots Editor’ом

February 22nd, 2008 Posted in Tutorials, UseShots Editor, UseShots Samples In English

1. Введение

В этой статье я покажу, как, используя только UseShots Editor, можно меньше чем за 5 минут полностью создать статью со скриншотами и тут же опубликовать её на своём WordPress’овском блоге.

Для этого вам нужны две вещи:

1. Рабочий WordPress’овский блог, куда вы можете постить статьи. Если у вас нет своего блога, то можете получить бесплатный блог с бесплатным хостингом на WordPress.com. У них есть русифицированная версия, и сейчас они предоставляют 3Гб места для файлов.

2. Скачать и установить UseShots Editor (пока только английский интерфейс и только Windows версия).

Кстати, вся эта статья полностью создана и опубликована на этом сайте с помощью UseShots Editor’а.

2. Начнём

Начнём
Запустите UseShots Editor и кликните Start new article.

3. Новая статья

Новая статья
Дайте статье подходящее название (оно будет использовано как название блог-поста).

Если вы впервые пользуетесь UseShots Editor’ом, то у вас ещё нет настроенных профилей сайтов. Пока оставьте “Undefined” (неопределённый). У нас ещё будет возможность настроить сайт перед публикацией статьи.

Заметьте, что в профиле “Undefined” максимальная ширина скриншотов 480 пикселей. Это значит, что более широкие скриншоты будут автоматически уменьшаться, чтоб по размеру подходить к колонке блога (480 пикселей подойдут для многих тем WOrdPress’а).

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

Чтоб создать профиль сайта, кликните “Add New” (добавить новый). Настройка профиля сайта подробно рассмотрена в шаге 10 этой инструкции.

4. Первый экран

Первый экран
В UseShots Editor’е вы будете создавать статьи экран за
экраном.

Каждый экран состоит из
1. Заголовка (Caption) - короткого описания экрана, которое будет
использоваться как подзаголовок в статье.
2. Скриншота - самой картинки
3. Описания (Annotation) - произвольного текста, описывающего смысл
картинки.

Для начала сделаем снимок экрана. Для этого кликните на кнопке Take screen shot (сделать снимок).

5. Камера UseShots

Камера UseShots
Основное окно скроется и появится камера UseShots - окно с прозрачной областью внутри красной рамки.

Камера работает по тому же принципу, что и ваша цифровая фотокамера. Перемещайте её по экрану и в нужный момент нажмите Enter на клавиатуре или кликните на кнопке “Shoot”. Всё, что в этот момент окажется в видоискателе (внутри красной рамки), будет на вашем снимке.

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

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

6. Описание экрана

Описание экрана
Когда вы сделаете снимок, картинка появится в центре главного окна.

Введите заголовок в поле Caption. Этот заголовок будет использован и как значение параметра alt тэга img (для тех, кто думает о поисковиках).

В поле Annotation введите расширенное описание, раскрывающее смысл скриншота. Инструкции, комментарии, в общем всё, что подсказывает вам ваша фантазия.

Кстати, каждый из элементов экрана необязательный. Достаточно лишь одного из них. Можете даже не делать скриншот - в этом случае будет чисто текстовый экран (как первый экран этой статьи), а можете делать лишь скриншоты - получится своеобразная галерея.

Чтоб добавить новый экран в статью, кликните по кнопке Add Screen>> в правом нижнем углу.

7. Ссылка предпросмотра

Ссылка предпросмотра
В любой момент вы можете посмотреть, как будет выглядеть статья целиком. Для этого кликните по ссылке preview (предпросмотр) в правом верхнем углу редактора.

8. Предпросмотр

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

Чтоб закрыть режим предпросмотра, кликните hide preview в правом верхнем углу.

9. Готовы к публикации

Готовы к публикации
Когда статья готова к публикации, кликните Publish (опубликовать) в правом верхнем углу.

10. Настройки профиля сайта для публикации

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

Site Type - тип сайта (пока только WordPress Blog)
Profile Title - Название профиля сайта. Поможет выбирать нужный профиль среди доступных.
Home page - главная страница вашего блога (например: http://myblog.wordpress.com)
Max Width - максимальная ширина скриншотов, которые без уменьшения подходят для размещения на сайте. Более широкие скриншоты будут автоматически уменьшаться до приемлемых размеров.
XML-RPC end point можно не заполнять, если вы специально не меняли адрес этой страницы, используемый по умолчанию.
Username - имя пользователя
Password - пароль

Если не указать имя пользователя/пароль, то эти данные будут запрошены, когда вы будете публиковать статью.

Если хотите, чтоб имя пользователя/пароль сохранились после того, как вы закроете редактор, отметьте опцию “Save username and password” (сохранить имя пользователя и пароль).

11. Название статьи и тэги

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

Также назначьте вашей статье подходящие тэги (они помогут посетителям сайта находить нужные статьи). Разделяйте тэги запятыми.

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

Когда всё готово, кликните Post >> (отправить).

12. Статья опубликована

Статья опубликована

После того, как статья будет опубликована, вы увидите ссылки, с помощью которых вы можете открыть в браузере только что опубликованную статью. С помощью кнопки “Copy to clipboard” вы можете скопировать адрес опубликованной статьи в буфер обмена (например, чтоб потом вставить в email или переслать друзьям по аське).

Внимание: UseShots Editor показывает только стандартные WordPress’овские ссылки, которые подходят для блогов с любой структурой “красивых” ссылок. Когда вы откроете статью в браузере, то в адресной строке должны увидеть уже “красивую” ссылку.

13. Опубликованная статья в браузере

Опубликованная статья в браузере
А вот так выглядит только что созданная и опубликованная статья в моём тестовом блоге.

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

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

14. Отзывы

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

Оставляйте свои комментарии здесь или воспользуйтесь формой, чтоб отправить сообщение напрямую мне (по-русски или по-английски).

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

Спасибо!

Скачать UseShots Editor

P.S. Чтоб читать статьи на этом сайте на русском языке, кликните на российском флаге в правой колонке.

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.

  1. 6 Responses to “Первые шаги с UseShots Editor’ом”

  2. By Colin on 2008-05-20

    Great piece of software. Never wanted to tackle instructionals before, knowing how much messing around it would be. COuld do one in a few minutes now.

    Also could use to transfer from blog to word doc or pdf to make printable instructionals / books.

    Thanks!

  3. By Hein Maas on 2008-08-28

    Hi, is there a MAC OS X version of USeShots blog editor

  4. By Denis on 2008-08-29

    There is only a Windows version so far.
    Maybe when UseShots Editor is extremely popular and I get myself a Mac, I’ll have a cross-platform version.

  1. 3 Trackback(s)

  2. 2008-02-29: UseShots Blog » Screen Shots for Blogs (Meet the UseShots).
  3. 2008-04-03: UseShots Blog » UseShots Editor 0.4 sneak peek
  4. 2008-05-20: UseShots Blog » How to promote your tutorials. Tutorial directories. (Part 1)

Post a Comment