Как очистить пост блога от мусора Microsoft Word?

Приветствую вас! Подготовку постов удобно осуществлять в редакторах вроде Microsoft Word. Так вы можете избежать или снизить количество ошибок в тексте, произвести должное оформление и т.д. В тоже время, если вставить такой текст напрямую в визуальный редактор блога, вы получите кучу ненужного вам кода.

Как очистить пост блога от мусора Microsoft Word?

В этом посте я хочу рассказать вам о том, как следует подготавливать посты блога. Сюда войдут: подготовка постов в MS Word, очистка кода сервисом «Реформатор» и особенности работы с визуальными редакторами, которыми так часто пользуются новички. Если вы не желаете разводить мусор в своём блоге, рекомендую уделить внимание данной теме. Приступим?

Подготовка постов в MS Word

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

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

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

  • Не используйте изменение шрифта, его размера и цвета. Исключением может служить преднамеренное желание выделить фрагмент текста.
  • Не используйте отступы, лишние пробелы и пустые строки.
  • Не вставляйте в текст картинки. Это нужно делать в редакторе блога, предварительно загрузив их на сервер.
  • Для оформления текста лучше использовать стандартные стили и форматирование.
  • Для очистки текста от использованного оформления можно использовать пункт «Очистить формат» в списке стилей и форматирования.
  • Старайтесь избегать сложных конструкций в виде тех же таблиц или изучите, как с ними работать в HTML.

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

Очистка кода сервисом Реформатор

Несмотря на то, что MS Word позволяет работать с веб-страницами, он не является HTML-редактором. Производя копирование текста из MS Word в визуальный редактор блога, вы получите огромное количество лишнего кода. Например:

мусор в коде при копировании из MS Word в визуальный редактор блога

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

онлайн сервис подготовки постов - Реформатор

В том случае, если включено (а оно включено по умолчанию) «Автоформатирование» очистка кода будет осуществлена уже при вставке. В результате, кликнув «Исходный HTML» вы увидите полностью чистый HTML-код, размеченный должным образом. Также вы можете очистить от мусора выделенный фрагмент текста, используя инструмент «Очистить HTML». Здесь же имеется ряд стандартных инструментов для разметки HTML-документа.

Примечательно, что в дальнейшем вы можете скопировать полученный текст из «Реформатора» в визуальный редактор своего блога и получить надлежащий результат. Главное здесь понять, что большая часть оформления поста (шрифт по умолчанию, его размер и цвета, а также многое другое) уже заложены в самом дизайне блога. Вам не нужно обращать внимание на то, как выглядит текст в MS Word или визуальном редакторе. Свой истинный вид он получит, когда будет опубликован в блоге. К слову, при желании вы можете использовать функцию предварительного просмотра, если таковая есть.

Особенности работы с визуальными редакторами

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

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

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

Послесловие

Основная моя рекомендация такова – изучайте HTML, а визуальные редакторы используйте только для удобства при написании постов. Только в этом случае вы сможете добиться наиболее оптимального результата. Это касается как оформления так и веса веб-страниц. Ищите компромисс. А у меня всё. Спасибо за внимание. Удачи!

С уважением, Константин

Коротакая ссылка: http://goo.gl/HSSD7

Видео на закуску: Что нового в MS Word 2013?

Twitter Facebook ВКонтакте Одноклассники Google+

24 комментария:

Княгиня
Лично меня в приводят в содрогание запихнутые в код поста конструкции с text-align:justyfy и с многовложенными фонтами. Правда, я сильно продвинутый пользователь - настолько продвинутый, что к своему Вордпрессу прикрутила типографскую функцию - расстановка неразрывных пробелов и правильных тире. Но даже когда я этого не умела, я постила аккуратный чистый текст со списками и врезками в нужных местах, без вордовых излишеств. На изнанке узелков быть не должно. :)
Константин Кирилюк
2Княгиня: типографика тоже не самое лучше решение, ведь это куча мнемоник и всяких nobr. Так что вопрос спорный.
Надежда Хачатурова
Я совсем не профессионал в движках, но знаю, что веб-программисты считают копирование текстов из ворда убийством для сайта. Только из блокнота! Возможно, это в большей степени касается джумлы, но и на ней не только магазины создаются, но и блоги.
Константин Кирилюк
Надежда, как я и говорил, подготавливать текст в MS Word и иже это правильно и удобно. Можно попытаться уменьшить количество ошибок, оформить всё заранее (например, выделить жирным или проставить ссылки) и т.д. Но MS Word не является HTML-редактором. Это надо помнить и просто убирать лишнее. Реформатор в этом достаточно хорошее решение. Говорю вам в том числе и как программист :)
Дмитрий
Привет!
Window Live Writer не используешь? Он ведь очень удобен и с проверкой орфографии.
Я без него вообще писать не могу (из админки WP)
Константин Кирилюк
Дмитрий, для WordPress его использовать не пробовал, а вот с блогхостингами не сложилось. Думаю, было бы интересно почитать напиши ты о Window Live Writer и своём опыте работы с ним.
Дмитрий Тихонов
Так сам же можешь написать ))))

У тебя более дотошно и подробнее будет (в хорошем смысле слова)
Константин Кирилюк
Я сейчас в блоги на WordPress не пишу, тема не актуальна, а значит и пост получится вялый имхо. К тому же есть масса тем с которыми сейчас работаю :)
Княгиня
2Константин: зачем мнемоники? Я отлично обхожусь без них: неразрывный пробел, длинное тире, многоточие - это всё обычные символы. К тому же у меня utf-8. Вот, скажем, некоторые стрелочки и специфические символы в cp-1251 могут превращаться в знаки вопроса, но неразрывный пробел и в ней нормально отображается без замены мнемоникой.
Константин Кирилюк
2Княгиня: спасибо! Честно говоря, до недавнего времени и не знал о неразрыбном пробеле, воспринимая его лишь как мнемонику:   - сейчас разобрался, буду использовать.
Александр Кувшинников
После твоей рекомендации по вышеописанной проблеме я удалил весь хлам из статей блога. До этого я, не заморачиваясь, копипастил текст из MW. Использую еще и функцию "типографить". Получается что не стоит этого делать?!
Forex trader
А я просто из Word копирую в обычный блокнот - он все форматирование отбрасывает. Затем форматирую стандартными средствами блога.
Константин Кирилюк
Саш жаль, что ты не смотришь за моими сабжами на фэйсбук. Я там сейчас целую серию "НА ЗАМЕТКУ" стал публиковать. Однако отпишусь и тут. Тем более, что мы с Княгиняй уже прояснили данный вопрос в комментариях.

В общем, Реформатор для типографики использует мнемонику  , а это согласись лишние байты. Но эту мнемонику можно заменить "неравзрывным пробелом". В том же MS Word, для вставки этого символа, можно использовать комбинацию Shift+ctrl+пробел. Внешне получится тот же пробел, но неразрывной :)

P.S. Если честно, то с типографикой лично я не заморачиваюсь. Тут с орфографией и грамматикой хоть бы разобраться :)
Константин Кирилюк
2Forex trader: можно и так. Лично я вообще обычно только с исходным кодом и работаю, т.к. использую много нестандартного оформления. Но в других случаях гораздо удобней пойти по пути наименьшего сопротивления имхо.
Владимир
Очень интересная статья, коллега! Продолжайте дальше писать в таком же духе и Вы будете обречены на успех, мне лично очень нравится, как Вы излагаете мысль :)
Константин Кирилюк
Всё относительно Владимир. Если судить по притоку подписчиков, то становится очевидно, что надо ещё работать, экспериментировать и искать варианты.
Сергей
Константин, действительно острый вопрос осветили. Я также использую ворд из-за грамматики и орфографии в основном. Но вставку делаю именно с ворда, просто при вставке использую дополнительные кнопки в визуальном редакторе админки "вставить из Word" тогда код получается чистым.
Константин Кирилюк
Сергей, вы абсолютно правы. В некоторых CMS имеется такая функция, но мало кто знает о её существовании. Единого формата этой кнопки нет, люди просто запутаются. Поэтому я и предложил самый оптимальный вариант для новичков имхо.
Денис
Ну мне с этим повезло. В JCE (для джумлы, не знаю есть ли она для других CMS) есть функция "Вставить как неформатированный текст" =) А все форматирование довожу уже в CMS.
Денис
Да, кстати, еще можно просто скопировать текст и вставить его в блокнот, оттуда же скопировать, и вставить в CMS. Тогда текст будет голый.
Константин Кирилюк
Денис, в том то и фича, что зачем же два раз форматировать текст? Я лично раз всё размечаю в MS Word и даже ссылки ставлю, потом загоняю в реформатор и из него копирую в блог. Само действо занимает пару секунд. Ну, плюс у меня есть спец.разметка вроде выделение маркером, серым текстом и т.д., но это не суть важно.
Константин Кирилюк
P.S. вставка в блокнот это фообще капец, т.к. например русские кавычки коверкаются. В общем, я за реформатор ;)
Дмитрий Тихонов
Ой нет. Как увидел один раз, какой код лезет из Ворда - сразу все в блокноте стал делать )

А потом перешел на Live Writer
Константин Кирилюк
Блокнот плох тем, что русские кавычки делает обычными. В Live Writer есть проверка, но только кажись орфографии, а как там с грамматикой? Для меня это немаловажно. В общем жду от тебя статьи о Live Writer. Теперь ты просто обязан её написать :)
Отправить комментарий