Безумные символы

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

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

Что происходит?

Как обычно редактор добавляет на сайт текст? Копирует из вордовского документа или, не дай бог, с другого сайта (так делать точно не надо, воровать контент нехорошо и вредно!). Потом он заходит в админку и вставляет скопированный текст в WYSIWYG-редактор.

WYSIWYG-редактор (от англ. What You See Is What You Get, «что видишь, то и получишь») — это инструмент системы управления сайтом, предназначенный для форматирования текста, таблиц и ссылок. Внешне очень похож на примитивный текстовый редактор.

WYSIWYG-редактор в Joomla WYSIWYG-редактор в Joomla

Но штука в том, что вместе с собственно текстом копируется его форматирование: начертание, цвет и размер шрифта, отступы, выравнивание и другие его параметры. Этого не видно в редакторе по умолчанию, но если переключить его в режим HTML(на картинке выше это кнопка «HTML», в других редакторах может быть немного по-другому), вы увидите нечто в таком роде:

<span style="color: #000000; font-family: Times New Roman, serif; font-size: medium; line-height: normal; background-color: #efeddf;">ФБР потеряло данные о слежке за Мэрилин Монро, передает </span><a href="http://www.ap.org/" style="color: #800080; font-family: Times New Roman, serif; font-size: medium; line-height: normal;" target="_blank">Associated Press</a><span style="color: #000000; font-family: Times New Roman, serif; font-size: medium; line-height: normal; background-color: #efeddf;">. Их нет ни у спецслужб, ни в Национальных архивах, где такие документы обычно хранятся.</span>

Все эти посторонние теги и атрибуты — это результат копирования отформатированного текста.

Когда дизайнер разрабатывает дизайн сайта, он продумывает, в том числе, и способы оформления текста: шрифты, междустрочные интервалы, вид заголовков, оформление таблиц и списков. Все эти правила оформления описываются в отдельном файле (или нескольких файлах); сами же тексты без форматирования хранятся отдельно. В вышеописанном же примере правила оформления прописываются непосредственно в тексте; браузеры считают такие правила более важными и руководствуются именно ими. В результате нарушается задумка дизайнера, страдает внешний вид страницы, а объем ее увеличивается. Кроме того, неряшливая разметка страниц негативно воспринимается поисковыми системами — сайт в результатах поиска может оказаться ниже конкурентов.

Как сделать правильно?

Есть два способа: простой и правильный.

Смысл простого способа в том, чтобы убрать форматирование из копируемого текста. Если вы берете текст из Word, там прямо есть такая команда — «Очистить формат».

Команда «Очистить формат» в Word 2010 Команда «Очистить формат» в Word 2010

Если без Word — можно просто скопировать сначала текст в «Блокнот» («Блокнот» не поддерживает форматирование, так что оно просто теряется), а потом из «Блокнота» — на сайт.

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

Для разметки текста удобнее пользоваться специальными редакторами, например, Sublime Text или Notepad ++, но вообще, подойдет и тот же «Блокнот».

HTML разметка текста в редакторе Sublime HTML-разметка текста в редакторе Sublime

И никогда, никогда не пользуйтесь для выделения фрагментов текста цветом и не играйтесь с размером шрифта! Это под корень уничтожает всю ту красоту, над которой работал дизайнер. Даже если вам кажется, что надпись «Внимание!» просто необходимо написать красными буквами 20 кеглем, — возьмите себя в руки. Жирного начертания, скорее всего, будет более чем достаточно.

Именно поэтому в нашем Нибблере, студийной CMS, мы вообще все лишние кнопки форматирования отключили.

WYSIWYG-редактор CKEditor, используемый в CMSNibbler. Для форматирования — только необходимый минимум WYSIWYG-редактор CKEditor, используемый в CMS Nibbler. Для форматирования — только необходимый минимум

И о картинках

Хотя основная тема статьи — обработка текста для публикации на сайте, хочется все же несколько слов сказать и об изображениях. Ибо это вторая большая проблема для начинающих веб-мастеров.

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

  • Уменьшайте изображение до загрузки на сайт. Не надо грузить на сайт фотографию размером 1600х1200. Да, скорее всего геометрические размеры ее автоматически уменьшатся, но размер файла останется неизменным! Десяток картинок весом по 700 Мб — и страница будет грузиться заметно медленнее. Поэтому уменьшайте изображения в любом графическом редакторе, прежде чем публиковать их на сайте.
  • Придерживайтесь параметров картинки, предусмотренных дизайном. Это правило — вариация предыдущего, но тут дело не в скорости загрузки страницы, а в свойствах шаблона дизайна. Иногда дизайнеры строго ограничивают размер изображения, и при отклонении от этого правила страница выглядит некрасиво: картинка вылезает за пределы своего блока и разрушает верстку.
  • Формат — PNG или JPEG. Два основных формата изображений для веб — это PNG и JPEG. PNG — для картинок с большим количеством текста (скриншотов), JPEG — для фотографий.
  • Прописывайте атрибуты title и alt. Это бонусный совет для продвинутых пользователей. В теге img в атрибуте alt описывайте кратко изображение — тогда его можно будет найти через поиск по картинкам в Google или Яндекс. Хоть немножко, но увеличите посещаемость.

Пример тега img для предыдущей картинки:

    <img alt="WYSIWYG-редактор CKEditor, используемый в CMS Nibbler. Для форматирования — только необходимый минимум" src="/images/blog/wysiwyg/wysiwyg2.png" />

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