NEWSAIC (Мозаика новостей)

© Сергей Базанов, 2009-2011

«Мозаика новостей»,«Мозаика новостей»,илиили

Как сделать Как сделать главную страницу главную страницу

новостного сайта яркой новостного сайта яркой и привлекательнойи привлекательной

Два основных вида верстки Два основных вида верстки главных страниц новостных сайтов:главных страниц новостных сайтов:

Шаблонная (жестко заданный формат верстки с изменяющимися атрибутами объектов) Как правило, не требует участия редактора, или редактор может управлять только атрибутами (заголовок, лид, картинка и т.п.)

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

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

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

Технологические варианты Технологические варианты автоматизированного управления автоматизированного управления

нешаблонной версткой:нешаблонной версткой: Визуальный редактор

Dr.Front компании Aptoma, www.aptoma.comДостоинства: визуальный (а-ля Word), универсальный, связь с CMS сайта по протоколу XML или RSS-фиду. Недостатки: очень высокая цена

Модульный редактор от сайта MR7.ru (автор Сергей Базанов)Достоинства: простота реализации и использования, дешевизна, можно сделать на любой CMS.Недостатки: функции визуализации ограничены, унификация в пределах CMS.

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

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

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

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

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

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

Виды модулейВиды модулей

На всю ширину

Виды модулейВиды модулей

На всю ширину

½ ширины ½ ширины

Виды модулейВиды модулей

На всю ширину

½ ширины ½ ширины

1/3 ширины1/3 ширины 1/3 ширины

Виды модулейВиды модулей

2/3 ширины1/3 ширины

Варианты комбинаций модулейВарианты комбинаций модулей

2/3 ширины1/3 ширины

2/3 ширины 1/3 ширины

Варианты комбинаций модулейВарианты комбинаций модулей

2/3 ширины1/3 ширины

2/3 ширины 1/3 ширины

½ ширины ½ ширины

Варианты комбинаций модулейВарианты комбинаций модулей

1/2 ширины

1/2 ширины

1/2 ширины

Варианты комбинаций модулейВарианты комбинаций модулей

2/3 ширины

1/3 ширины

2/3 ширины

Варианты комбинаций модулейВарианты комбинаций модулей

2/3 ширины

1/3 ширины

2/3 ширины

Варианты комбинаций модулейВарианты комбинаций модулей

2/3 ширины

1/3 ширины

1/3 ширины1/3 ширины

Варианты комбинаций модулейВарианты комбинаций модулей

2/3 ширины

1/3 ширины

1/3 ширины1/3 ширины

½ ширины ½ ширины

Позиционирование модуляПозиционирование модуля

правый

левый

правый последний

центральный

левый правый последний

Ряд

1Ря

д 2

Позиционирование модуляПозиционирование модуля

левый правый последний

центральный

левый

правый

Ряд

1Ря

д 2

правый последний

Параметры позиционирования Параметры позиционирования модулямодуля

Типоразмер (список) на всю ширину 1/2 ширины 1/3 ширины 2/3 ширины

Номер ряда (число) Расположение в ряду (список)

слева посредине справа справа последний слева последний

Связь модуля со страницей сайтаСвязь модуля со страницей сайта

Через ID объекта (отдельная статья) Компонент (список) ID объекта (число)

Через гиперссылку (раздел, список статей) URL (строка)

Через HTML-код (flash, iframe, object etc.) HTML-код (текст)

Визуализация модуляВизуализация модуля

Картинка (файл, берется из соответствующего (ID) объекта компонента или закачивается)

Заголовок (текст, берется из соответствующего (ID) объекта компонента или вводится)

Подзаголовок/лид (текст, берется из соответствующего объекта компонента или вводится)

Прочие элементы дизайна

Структура компонентаСтруктура компонента«Мозаика новостей»«Мозаика новостей»

Позиционирование модуля: Типоразмер (список) Номер ряда (число) Позиция в ряду (список)

Связь с содержимым сайта: ID компонента (число) Гиперссылка (строка)

Содержание модуля: Картинка (файл) Заголовок (текст) Подзаголовок/лид (текст) Прочие элементы дизайна

например, пропорции кадрирования картинки или кегль шрифта заголовка

Этапы работы FPEЭтапы работы FPE Редактирование «мозаики новостей»

компоновка и редактирование объектов компонента «Мозаика новостей», т.е. модулей, связанных через ID или URL с соответствующими страницами сайта (статьями, разделами и т.п.)

Обновление «мозаики новостей» на главной странице сайта

$mainnews = s_list_class(XXX,XXX,"");$db->query("UPDATE LOW_PRIORITY Catalogue SET MainNews = '".mysql_real_escape_string($mainnews)."'");

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

bazanov@MR7.ru

facebook.com/sergey.bazanov