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

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

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

[+] Обо всем по порядку:

Идея и первый набросок

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

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

Родившаяся идея немедленно заносится в Microsoft OneNote, причем я с равным успехом делаю это на ПК и смартфоне. Моя записная книжка размещена на SkyDrive и автоматически синхронизируется между всеми устройствами.

Увеличить рисунок

Да, у меня уже установлен Office 2013 Preview. Кстати, в этой записи блога вы увидите много программ с английским языком интерфейса – так я работаю.

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

Исследование вопроса

Чтобы идея доросла до статьи, приходится исследовать вопрос подробнее. Я черпаю необходимые сведения из:

• своего опыта и экспериментов в системе
• базы знаний Microsoft и библиотек TechNet и MSDN
• блогов команд и отдельных сотрудников Microsoft
• справки Windows (все равно ее никто не читает, а там бывает тайное знание :)
• форумов и прочих сайтов в Интернете

Конечно, список ресурсов варьируется в зависимости от темы статьи, но первый пункт в нем присутствует всегда и неизменно на первом месте.

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

По ходу исследования я выделяю идеям отдельные страницы в OneNote (на рисунке выше их список затенен справа для сохранения интриги :). Такая страница в итоге может содержать:

• моменты, которые необходимо уточнить
• снимки экрана
• ссылки на веб-страницы или скопированные из них фрагменты текста (OneNote умеет автоматически добавлять к ним ссылку)

При этом на главной странице идей я частенько оставляю ссылку на страницу отдельной записи. В OneNote она создается так же, как в Wiki — [[Название статьи]]. И лишь набрав достаточно материала, я перехожу к работе над статьей.

Создание статьи

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

Текст

Эти строки я пишу в Microsoft Word – лучшем текстовом процессоре для моих задач.

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

Настроенная автоматическая замена часто позволяет обходиться без переключения раскладки, что ускоряет ввод текста

Удобная панель навигации позволяет легко перемещаться по большой статье и быстро менять порядок разделов при необходимости.

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

Большинство статей в этом блоге написаны языком, который понятен ученикам 5 – 8 классов.

Закончив статью, я вставляю содержание, автоматически генерируя ссылки-якоря на каждый раздел статьи.

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

Кстати, даже если в записи нет видимого содержания, якоря все равно присутствуют, и их можно посмотреть букмарклетом.

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

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

Снимки экрана

Снимки экрана я уже много лет создаю в TechSmith Snagit.

Увеличить рисунок

За это время программа обросла ненужным жирком, но некоторые возможности я нахожу очень удобными:

• режим снимка All-in-One позволяет на лету выбрать окно, меню или область экрана
• отложенный снимок с таймером незаменим для захвата в сложных случаях (например, всплывающих подсказок)
• фигурная обрезка изображений, рамки и клипарт (номера, стрелки и т.п.) позволяют мне создавать для вас информативные картинки

Картинкам я уделяю не меньше внимания, чем тексту статьи.

Мне очень нравится американская поговорка «Картинка стоит тысячи слов», и постоянные читатели блога видели немало комбинированных скриншотов, объединяющих несколько окон.

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

Я делаю снимки экрана в рабочей системе и на виртуальной машине. Сейчас на Hyper-V у меня подняты Windows 7 и Windows 8, причем вторая фактически копирует рабочую среду. Настроив основную систему, я конвертировал диск в VHD и подключил его к виртуальной машине.

Windows 8 необходима мне на Hyper-V для уменьшения габаритов и размеров снимков целого экрана. У моего ноутбука разрешение 1600х900, а на виртуальной машине — 1366х768.

Кстати, если вы обратили внимание, я относительно недавно перешел с JPEG на PNG. Конечно, я и раньше был в курсе преимуществ PNG, но JPEG был удобнее (причина чуть ниже). Однако именно полноэкранные снимки Windows 8 подвигли меня изменить привычке, поскольку их уменьшенные версии выглядели бы в JPEG совсем непривлекательно.

Обработка кода HTML

Если вы заглянете в исходный код этой страницы, то увидите, что содержимое статьи представляет собой чистый код HTML. Там лишь заголовки, абзацы, списки и картинки, а их внешний вид полностью контролируется стилями (CSS).

Это означает, что изменение любого элемента в CSS немедленно отразится на всех страницах блога, и ручной правки не потребуется.

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

Microsoft Word

Сохранив документ в стандартном формате DOCX, я тут же нажимаю F12 и сохраняю его в формате HTML страницы с фильтром. Word создает файл с расширением HTM и экспортирует картинки в отдельную папку.

Кстати, а знаете ли вы другой способ извлечения картинок из DOCX?

Notepad++

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

Обработчик кода HTML

В 2006 году на OSZone был создан клуб переводчиков. Мы переводили статьи Microsoft TechNet, а основным рабочим инструментом был Word. Вот тогда наш замечательный разработчик Sham и создал специальный обработчик кода, который размещен на сервере OSZone.

Увеличить рисунок

Ссылку я не даю, поскольку этот инструмент предназначен только для внутреннего использования. Он очищает от мусора код HTML, который генерирует Microsoft Word, и приводит его к виду, который заточен под публикацию на сайте OSZone. Однако я с успехом применяю этот код для публикации в блоге, тем более картинки все равно загружаются на сервер OSZone.

BK ReplaceEm

Завершающий штрих в работе над кодом HTML наносит программа для массового поиска и замены внутри файлов — BK ReplaceEm (ныне Replace Text). Я пользуюсь ей уже лет восемь, и в прошлом она была абсолютно незаменима для создания учебника по автоустановке.

Ключевые возможности программы:

• создание независимых друг от друга групп, каждая из которых содержит набор пар для поиска и замены (группы и наборы можно сохранять и импортировать)
• поиск и замена по границам диапазонов и с помощью регулярных выражений
• обработка всех или заданных фильтром файлов в папке с возможностью автоматического создания резервных копий

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

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

Обработка и загрузка картинок

Прежде чем загрузить картинки на сервер, я переименовываю и оптимизирую их.

Обработка картинок

Когда мои снимки экрана были в формате JPEG, я не занимался их обработкой, отводя эту роль загрузчику картинок (о нем чуть ниже). Разве что на Total Commander возлагалось переименование файлов вида image00x.jpg, которые выдавал Microsoft Word.

Однако с переходом на PNG встал ребром вопрос автоматизации переименования, создания миниатюр и контроля над размером изображений, и я его решил скриптом. Точнее, мне помог его написать Василий Гусев (MVP PowerShell), для которого эта задача стала легкой утренней разминкой.

##Переменные
#Путь к папке с картинками
$mydir = "C:\Users\Vadim\Documents\blog-entries-creation_files"
#Обработанные картинки помещаются в подпапку 'out'
$outdir = $mydir+"\out\"
#Строка для поиска в именах файлов
$replace = "image0"
#Строка для замены в именах файлов
$newname = "blog-entry-creation-process"

##Операции
cd $mydir
#Конструкция dir -file работает только в Windows 8 / PowerShell 3
#dir -file | Ren -NewName {$_ -replace $replace,$newname}
#Переименование файлов
dir | where {-not $_.psiscontainer}| Ren -NewName {$_ -replace $replace,$newname}
#Оптимизация полноразмерных изображений (pngout должна лежать в PATH)
dir | where {-not $_.psiscontainer} | foreach {& "pngout.exe" $_.fullname ($outdir + $_.Name)}
#Создание миниатюр и их оптимизация с помощью IrfanView, используя заданные в ней параметры массовой обработки изображений
dir | where {-not $_.psiscontainer} | foreach {& "C:\Program Files\IrfanView\i_view32.exe" $_.fullname /advancedbatch /convert ($outdir + $_.BaseName + "_mini_oszone.png")}

Этот скрипт PowerShell:

• переименовывает изображения, опираясь на заданные в переменных имя папки с картинками и шаблон поиска/замены в именах файлов
• обрабатывает полноразмерные изображения с помощью pngout для уменьшения размера файлов
• вызывает IrfanView для создания миниатюр изображений, превышающих 480 px по ширине (миниатюры тоже оптимизируются плагином pngout)

Звучит сложно? В реальности все сводится к двум изменениям в скрипте и его запуску.

Загрузка картинок

Практически все картинки моих статей хранятся в одной папке на сервере OSZone. Такой подход обусловлен двумя причинами:

1. Размещение картинок на другом домене сокращает время загрузки веб-страниц.
2. На OSZone есть удобный загрузчик картинок, причем его свойства учитывает обработчик кода, о котором речь шла выше.

Так, при загрузке картинок автоматически создаются их миниатюры шириной 480 px, что является стандартом для OSZone и по совпадению — моего блога (у главной колонки ширина 500 px). К сожалению, миниатюры в PNG сильно теряли в качестве и прибавляли в весе, потому я и делал раньше картинки в JPEG.

Увеличить рисунок

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

Публикация в WordPress

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

Публикация по расписанию

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

Так, эта запись выходит в то время, когда Сапсан несет меня из Питера в Москву.

Миниатюра записи

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

Цитата

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

Увеличить рисунок

Иногда я создаю для подписчиков «тизеры», отличающиеся от вступления к записи, при этом ход ее повествования не нарушается.

Произвольные поля

Эти поля я применяю для внедрения нестандартного кода в отдельные записи. Например, при добавлении опроса к записи в заголовок страницы нужно внести часть кода, что и реализуется настраиваемым полем.

Увеличить рисунок

Кстати, опросы BooRoo – это хороший пример стороннего веб-сервиса, который необходим мне для общения с вами в блоге.

All-in-One SEO Pack

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

Альтернативным заголовком я пользуюсь нередко, и хочу пояснить для вас его практический смысл. Например, постоянные читатели блога легко догадаются, что Дело об исчезнувших фотографиях — это очередной рассказ из серии о Шерлоке Холмсе. Однако такой заголовок вряд ли даст полезную информацию людям, наткнувшимся на него в результатах поисковика.

Увеличить рисунок

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

Рекомендуемые записи

В конце каждой статьи блога вы видите список рекомендуемых материалов. Я подбираю их для вас с помощью плагина Microkid’s Related Posts.

Увеличить рисунок

Для WordPress есть несколько плагинов такого рода, в том числе и полностью автоматизированные (например, на основе тегов). Но я предпочитаю вручную отбирать записи, которые подходят по теме. Обычно, мне хватает поиска по заголовкам записей.

Конечно, я использую и другие плагины, в том числе и при публикации (например, Post to Twitter), но там все автоматизировано.

Предварительный просмотр

Прежде чем отправить запись в свободное плавание, я неоднократно использую функцию предварительного просмотра. Она позволяет увидеть, как именно статья выглядит в блоге – ее структуру, размеры абзацев, расположение картинок и цитат.

И да, я еще раз вычитываю запись, причем нередко по ходу дела перефразирую одно-два предложения!

Уведомления о новых записях

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

• письма и обновления ленты RSS для подписчиков блога
• создание темы на форуме с анонсом записи блога (лента добавляется в список, который RSS-робот форума проверяет по расписанию и публикует тему от моего имени)
• публикация анонса в Facebook с помощью RSS Graffiti

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

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

Заключение

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

• встроенные средства Windows: PowerShell, Hyper-V и проводник (где массу времени экономит быстрая навигация в окнах «Открыть» и «Сохранить как»)
• офисные приложения Microsoft: OneNote и Word
• сторонние программы и утилиты: Chrome, Notepad++, Snagit, IrfanView, pngout, BK ReplaceEm и не упомянутый в рассказе Charu
• закрытые веб-сервисы OSZone: обработчик кода и загрузчик картинок
• общедоступные веб-сервисы и соцсети: FeedBurner, BooRoo, RSS Graffiti, Twitter, Facebook и т.д.
• WordPress и различные плагины к нему

Внушительный список, не правда ли? А ведь в него даже не входят средства, которые я применяю для экспериментов в системе в зависимости от темы записи!

---

И как вам процесс? Напишите в комментариях, что интересного, полезного или, может быть, странного вы подметили в нем?

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

Наконец, сейчас самый удобный момент для общих вопросов о WordPress, раз уж я поднял эту тему.