Загрузка...

Что плохого в неправильном оформлении текстов.

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

  1. Написать статью в MS Word или заказать на бирже, получив примерно в таком же формате. Обычно написание сопровождаете копированием некоторых отдельных предложений с разных сайтов в Интернете.
  2. Скопировать статью из MS Word и вставить ее в редактор при создании материала Joomla.
  3. Вставить изображения, если это необходимо.
  4. Подправить статью и сохранить.

Казалось бы, все правильно. И на сайте статья отображается более-менее корректно. Так что же не так? Я вам покажу.

Возьмем цитату:

“Кролики это не только ценный мех но и 3 4 килограмма диетического легко усваиваемого мяса”

Скопируем ее из Word’а и вставим в стандартный редактор Joomla TinyMCE. Вот такой код мы должны получить в идеале:

1

А вот то, что выдаст нам TinyMCE в реальности:

2

Мне страшно. И это с учетом того, что речь идет об одной единственной фразе, к которой не применены разношёрстные Word’овские стили.

Человек и в случае первого и в случае второго кода увидит после вставки только текст, т.е. не заметит никакой разницы. Но разница есть. Ниже привожу список недостатков такого подхода:

  1. Первое и главное – самое разное стилевое оформление в каждом из материалов Joomla. Один материал может быть написан шрифтом Times New Roman 11 размера, другой – Calibri 10 размера. Когда мы просматриваем полный текст статьи, это не особенно ощущается, но стоит увидеть эти статьи на странице блога рядом друг с другом – разница становится очевидной.
  2. В материалах при вставке к каждому абзацу текста, а иногда даже к каждому предложению добавляется атрибут style с собственными уникальными стилями оформления, что неправильно с точки зрения html-разметки.
  3. Если стилевое оформление чистых от style материалов редактируется в CSS всего парой строк кода для всего сайта, то приоритет style выше css, что приводит к необходимости редактирования каждого отдельного материала в случае, когда необходимо, например, увеличить размер шрифта текстов.
  4. Размеры каждой отдельной статьи в базе данных сильно увеличиваются. Это не играет роли в случае, если на сайте мало материалов, но может заметно раздуть базу данных, когда материалов тысячи.
  5. Некорректный перенос из Word’а подзаголовков материалов. Редко кто оформляет в Word подзаголовки материалов правильно. Обычно мы просто увеличиваем текст подзаголовка или делаем его жирным. Ни один скрипт переноса не поймет того, что это подзаголовок, а, следовательно, вставит его в редактор Joomla хоть и большим жирным текстом, но с использованием html-тега простого абзаца, но не тегов h2-h6, которые крайне важны для поисковых систем.

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

Чтобы не сталкиваться с проблемами, описанными выше, при добавлении материалов на ваш сайт используйте следующие простые правила:

  1. Установите, настройте и включите по умолчанию сторонний текстовый редактор для Joomla – JCE(подробнее про установку и настройку читайте ниже).
  2. Никогда не вставляйте тексты из блокнота Windows. В блокноте есть только перенос строк, но нет абзацев. Это приводит к неверному формированию кода при вставке в редактор Joomla.
  3. После каждой вставки текста в редактор, нажимайте кнопку «< >», которая показывает html-код, и проверяйте, что в коде нет атрибутов style. Звучит сложно, но на самом деле, это вопрос 3 секунд.
  4. После вставки текста в редактор выделяйте заголовки и добавляйте для них соответствующий тип оформления (h1 – не используем, поскольку это заголовок материала, h2 – заголовки второго уровня, h3 – заголовки третьего уровня, и т.д.): 
    3
  5. Задавайте для изображений только относительную ширину и высоту (в идеале: ширина 100%, высота: не задана), либо не задавайте ее вовсе. В противном случае, вы рискуете получить проблемы при добавлении сайту адаптивности под мобильные устройства. Да, знаю, на wedal.ru сделано как раз-таки неправильно =).
  6. Используйте при оформлении маркированных списков кнопки в редакторе:

4

Списки при вставке будут генерироваться автоматически при условии их правильного создания в Word.

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

Установка и первичная настройка редактора JCE.

Эта процедура делается только один раз и не отнимет у вас много времени. Следуйте шагам, описанным ниже:

  1. Скачайте и установите расширение JCE для Joomla. Сделать это можно через закладку Установить из JED, которая находится в менеджере расширений Joomla. Другой способ, перейти на официальный сайт JCE и скачать расширение для вашей версии Joomla.
  2. После установки JCE перейдите в общие настройки Joomla (Система –> Общие настройки) и выберите в настройке Редактор по умолчанию опцию JCE
    5
  3. Перейдите в Компоненты –> Редактор JCE–> Профили редактора –> Default –> Вкладка «Параметры плагина» –> Буфер обмена, и установите в опциях Удалять все SPANS и Удалять все стили значение Да. Этим вы установите отчистку текста от всех лишних стилей Word’а.
  4. Перейдите в Компоненты –> Редактор JCE–> Профили редактора –> Default –> Вкладка «Параметры плагина» –> Отображение блоков, и установите в опции Состояние значение Да. Этим вы включите выделение тегов в редакторе. Сначала  это может показаться неудобным, но вскоре вы привыкните и уже не будете представлять, как вы работали с редактором без этого выделения раньше.

{

}