Как сделать главную страницу новостного сайта яркой и привлекательной. Модульный редактор - технология автоматизированной нестандартной верстки.

1. «Мозаика новостей»,
или
Как сделать
главную страницу
новостного сайта яркой
и привлекательной
© Сергей Базанов, 2009-2011

2. Два основных вида верстки
главных страниц новостных сайтов:
 Шаблонная (жестко заданный формат верстки с
изменяющимися атрибутами объектов)
Как правило, не требует участия редактора, или редактор может
управлять только атрибутами (заголовок, лид, картинка и т.п.)
 Нешаблонная (динамически изменяющийся
формат верстки)
Управляется редактором (т.н. front page editor), который может
манипулировать не только атрибутами (заголовок, лид, картинка
и т.п.), но и визуальной формой и расположением
модулей/объектов в пределах заданной модульной сетки,
добиваясь разнообразнейших дизайнерских эффектов.

3. Примеры шаблонной верстки

5. Примеры нешаблонной верстки

8. Технологические варианты
автоматизированного управления
нешаблонной версткой:
 Визуальный редактор
Dr.Front компании Aptoma, www.aptoma.com
Достоинства: визуальный (а-ля Word), универсальный,
связь с CMS сайта по протоколу XML или RSS-фиду.
Недостатки: очень высокая цена
 Модульный редактор
от сайта MR7.ru (автор Сергей Базанов)
Достоинства: простота реализации и использования,
дешевизна, можно сделать на любой CMS.
Недостатки: функции визуализации ограничены,
унификация в пределах CMS.

9. Модульная сетка

10. Модульная сетка

11. Модульная сетка

12. Модульная сетка

13. Модульная сетка

14. Модульная сетка

15. Виды модулей
На всю ширину

16. Виды модулей
На всю ширину
½ ширины ½ ширины

17. Виды модулей
На всю ширину
½ ширины ½ ширины
1/3 ширины 1/3 ширины 1/3 ширины

18. Виды модулей
1/3 ширины 2/3 ширины

19. Варианты комбинаций модулей
1/3 ширины 2/3 ширины
2/3 ширины 1/3 ширины

20. Варианты комбинаций модулей
1/3 ширины 2/3 ширины
2/3 ширины 1/3 ширины
½ ширины ½ ширины

21. Варианты комбинаций модулей
1/2 ширины
1/2 ширины
1/2 ширины

22. Варианты комбинаций модулей
2/3 ширины
1/3 ширины
2/3 ширины

23. Варианты комбинаций модулей
2/3 ширины
1/3 ширины
2/3 ширины

24. Варианты комбинаций модулей
2/3 ширины
1/3 ширины
1/3 ширины 1/3 ширины

25. Варианты комбинаций модулей
2/3 ширины
1/3 ширины
1/3 ширины 1/3 ширины
½ ширины ½ ширины

26. Позиционирование модуля
правый
Ряд 1
левый
центральный правый
последний
Ряд 2
левый правый
последний

27. Позиционирование модуля
Ряд 1
левый центральный правый
последний
правый
Ряд 2
левый
правый
последний

28. Параметры позиционирования
модуля
 Типоразмер (список)
 на всю ширину
 1/2 ширины
 1/3 ширины
 2/3 ширины
 Номер ряда (число)
 Расположение в ряду (список)
 слева
 посредине
 справа
 справа последний
 слева последний

29. Связь модуля со страницей сайта
Через ID объекта (отдельная статья)
 Компонент (список)
 ID объекта (число)
Через гиперссылку (раздел, список статей)
 URL (строка)
Через HTML-код (flash, iframe, object etc.)
 HTML-код (текст)

31. Визуализация модуля
 Картинка (файл, берется из
соответствующего (ID) объекта компонента
или закачивается)
 Заголовок (текст, берется из
соответствующего (ID) объекта компонента
или вводится)
 Подзаголовок/лид (текст, берется из
соответствующего объекта компонента или
вводится)
 Прочие элементы дизайна

32. Структура компонента
«Мозаика новостей»
 Позиционирование модуля:
 Типоразмер (список)
 Номер ряда (число)
 Позиция в ряду (список)
 Связь с содержимым сайта:
 ID компонента (число)
 Гиперссылка (строка)
 Содержание модуля:
 Картинка (файл)
 Заголовок (текст)
 Подзаголовок/лид (текст)
 Прочие элементы дизайна
например, пропорции кадрирования картинки
или кегль шрифта заголовка

33. Этапы работы FPE
 Редактирование «мозаики новостей»
компоновка и редактирование объектов компонента
«Мозаика новостей», т.е. модулей, связанных через ID
или URL с соответствующими страницами сайта
(статьями, разделами и т.п.)
 Обновление «мозаики новостей» на
главной странице сайта
$mainnews = s_list_class(XXX,XXX,"");
$db->query("UPDATE LOW_PRIORITY Catalogue SET
MainNews = '".mysql_real_escape_string($mainnews)."'");

34. Спасибо за внимание!
Сергей Базанов
руководитель веб-проекта
MR7.ru,
медиаконцерн Schibsted,
Санкт-Петербург
bazanov@MR7.ru
facebook.com/sergey.bazanov