Joomla. Новогодние фокусы 2008.
(TinyMCE - тест на адекватность. Как создаются шаблоны для Joomla)
Уровень: Новичок - Пользователь
Здравствуйте, уважаемые подписчики. В прошлом выпуске рассылки мы, в частности, рассказывали о том, как заставить визуальный HTML-редактор TinyMCE подружиться с ява-скриптами. А еще этот редактор может сильно затуманить голову при использовании некоторых шаблонов. Сейчас постараемся объяснить, где здесь связь.
TinyMCE - тест на адекватность :)
Столкнулись мы с этим как раз во время разработки сайта http://www.restnonstop.ru/. Дело в том, что дизайн для этого сайта я заказывал на одном из фрилансерных сервисов в сети. Почему? Смотрите разъяснение в следующем разделе...
Так вот, шаблон мне сделали, потом мы его с исполнителем на сайте до ума доводили. Вроде готово... А на следующий день я решил в админке на сайте изменить существующую статью. Открываю ее, а окно редактора ПУСТОЕ! На нашем демо-сайте сейчас воспроизведена эта ситуация. (Вход в админку: man / man)
Как говорится, представляем фокусы от Джумлы :) А конкретно, следующее:
- Выбираете в меню панели управления пункт Содержимое > Все содержимое. Потом открываете статью "Добро пожаловать в Joomla! - 2". Окно редактора пустое! Делаем некоторые пассы: повыделяем мышью "пустоту" в окне редактора... что-то проявляется :) значит у Вас есть талант иллюзиониста, а может это талант у TinyMCE :)
- Далее, попытаемся изменить выравнивание текста... Вас самих не удивляют Ваши способности: стало видно весь текст! Но выравнивание его не изменилось, на какую кнопку не нажимай! все равно выравнивается слева. Интересно, что при просмотре на сайте текст статьи виден сразу!
- Смотрим html-код статьи. В начале должен быть тег <p align="center"> (разный в зависимости от выравнивания) А текст ему не подчиняется!
Когда я это первый раз увидел, то было не до шуток. Что это все на шаблон завязано - сразу не подумал. А когда понял, сразу нашлось объяснение всем фокусам!
В этой статье содержимое выводится без тегов. Так уж сделали авторы! А это статья из демонстрационных данных дистрибутива Джумлы! Раз содержимое выводится без тегов, для него применялся стиль для тега <body>, который в шаблоне был таким:
body {
font-family : Tahoma, arial, sans-serif;
font-size : 12px;
margin : 0;
padding : 0;
color : #fff;
}
Цвет текста - белый! Если же изменить выравнивание текста, нажав кнопку в редакторе, то в текст добавляется тег <p align="center">, например. Стиль для него в шаблоне выглядит так:
td, tr, p, div {
font-family : Tahoma, Arial, sans-serif;
font-size : 12px;
color : #aaa;
text-align : left;
}
Поэтому при изменении выравнивания текст становится виден. Но по центру не выравнивается, так как свойство стиля важнее для браузера свойства тега. На сайте содержимое выводится в теге <td> (в ячейке таблице), поэтому его и видно сразу. Если задать в теге <body> правильный цвет, а в стиле для тегов <p>, <td> и т.д. .:) убрать свойство выравнивания текста, то чудеса исчезнут!
Выводы:
TinyMCE для вывода содержимого в своем окне использует стили из текущего шаблона, чтобы содержимое отображалось как на сайте, что, в принципе, логично. Но иногда делает это кривовато! А полного соответствия и не может получиться! Потому что на внешний вид содержимого в шаблоне могут влиять стили внешних контейнеров (в нашем случае такой контейнер - таблица), о которых TinyMCE и не догадывается!
Если накладываются ошибки в шаблоне, а белый цвет в стиле для <body> - это натуральный баг: в самом шаблоне он не проявляется, так как этот стиль перекрывается, но нашлась ситуация, когда он вылез! Еще одна причина того, что если шаблон для Джумлы попал Вам со стороны, его надо сразу рассмотреть вдоль и поперек, чтобы он не преподносил сюрпризов. Так вот, если накладываются ошибки в шаблоне, особенности функционирования TinyMCE и выводимая информация, подготовленная не Вами, то получается винегрет по уникальному рецепту :)
Чтобы это лучше переварить, следите за следующим:
- Все публикуемое содержимое должно быть в тегах (самое простое <p>).
- Форматировать содержимое в TinyMCE - это детский сад. Задавайте соответствующие свойства в стилях для тегов. Тогда содержимое на сайте всегда будет в ЕДИНОМ стиле!
Пример всего сказанного есть на демо-сайте. Сейчас на нем настроен вход для демо-доступа без привилегированных прав (логин: man / пароль: man). Это не потому, что мы там что-то нашаманили и не хотим Вам показывать. А чтобы никто реквизит не портил :) Через неделю после выхода этого выпуска восстановим привилегии обратно. А пока репетируйте!.. фокусы :)
Коммерческие шаблоны для Джумлы. Что по чем?!
Дизайн я заказывал потому, что в нашей "Lab" дизайнеров пока нет (профессиональных), так как для этого знания графических пакетов мало, нужен талант, и соответствующий человек, который этим талантом обладает. Есть категории сайтов, где дизайн, а точнее его графическая составляющая имеет важное значение. Для таких проектов лично я дизайн заказываю. Стилевое оформление сайта - тоже дизайн, хотя у профессионалов это называется верстка.
Разъясняю подробнее. В сети можно заказать как полностью шаблон, например для Джумлы или для чего-нибудь другого, или отдельно дизайн или отдельно верстку. Тонкость здесь следующая: дизайн такого уровня, как на restnonstop.ru стоит $150-200 (верхняя граница стоимости дизайна может быть любой в зависимости от того, что Вы хотите получить и что за "виртуоз" это будет реализовывать), а вот стоимость верстки шаблона более стабильная $40-50. Вывод: стоимость верстки в шаблоне составляет максимум пятую часть от стоимости всего шаблона. Поэтому заказывать дизайн отдельно, а верстать его самому, большого смысла нет. Конечно, если Вы верстальщик и можете это сделать за час, то это другой случай. Еще момент: в результате разработки дизайна сайта получается его макет, создаваемый обычно в фотошопе, и Вам демонстрируют рисунки страниц сайта.
Кстати, текущий дизайн restnonstop.ru - не первый. Одни "умельцы" мне выкатили вот это, от чего я чуть в обморок не упал :) Моя оценка этого творения: результат бреда после кошмарного сна... не буду углубляться по критериям оценки :) Сейчас вопрос не в этом, а в том, что в результате заказа отдельно дизайна Вы получаете макет страниц сайта примерно в таком виде в натуральную величину. А лучше сразу договариваться, чтобы Вам передали весь фотошоповский проект, потому что потом РЕДИЗАЙН простенький можно собственными силами сделать!..
Остальное - дело рук верстальщика. Он картинку режет на кусочки и помещает их в код шаблона, а также ПОЛНОСТЬЮ СОЗДАЕТ стили для шаблона. На первый взгляд кажется, что работа трудоемкая, а оплата по сравнению с дизайнерской... никакая. На самом деле все намного проще, верстальщик со стажем не создает шаблон с нуля, у него найдутся заготовки под любой макет, подгонять, разумеется, что-то приходится, но это работа в большинстве случаев на час-два. Конечно, бывают уникальные заказы, но для них нормальные специалисты и цены называют "уникальные"...
Лично, мое мнение, если создавать серьезный (профессиональный) сайт, то и дизайн на нем должен быть соответствующим :)
PS. Всех с наступающими праздниками! Успехов в укрощении Джумлы :) и во всем остальном!
Автор данной статьи: Леонид Мальков
