Page Comparison

На этой странице мы дадим вам рекомендации к размещению контента на портале и разберем следующие вопросы:

Table of Contents

Основные рекомендации

...

Общие рекомендации

Expand

title	Что нужно знать о хранении контента

Что нужно знать о хранении контента

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

Note
Файлы, загруженные на портал, навсегда сохраняются на сервере после загрузки. Даже если файл отвязали от материала, он продолжит занимать место на сервере.

Если добавлять файл как ссылку с хостинга – это актуально для видеофайлов, уменьшение памяти не происходит.

...

Как подготовить графический контент

Expand

title	Только цифры. Если нужен быстрый ответ

Модули, применяемые изображения и их размеры

Название модуля	Изображения
Личный кабинет	Обложка - 1168 x 360 px, растягивается в зависимости от контента
Учебные планы	Карточка учебного плана - 376 x 160 px Карточка превью материала - 444 x 204 px
Уроки и тесты	Карточка - 376 x 160 px Шапка материала - 1175 x 360 px
Квесты	Карточка квеста - 376 x 160 px Карточка превью материала - 444 x 204 px
Блоги	Карточка - 376 x 160 px Шапка материала - 1175 x 360 px
Мероприятия	Карточка - 150 x 135 px Шапка материала - 1175 x 360 px
Новости	Карточка - 376 x 160 px Шапка материала - 1175 x 360 px Главная новость - 1175 x 360 px
Каталог призов	Карточка - 410 x 185 px Изображение в галерее - 398 x 320 px
Библиотека	Карточка - 276 x 145 px
Сообщества	Карточка - 376 x 160 px Шапка сообщества - 680 x 250 px Карточка материала - 150 x 130 px Шапка материала - 1175 x 360 px
Опросы га ГС	376 x 160 px
Хоткейс на ГС	216 x 92 px
Баннер на ГС	1663 x 560 px
Онбординг	332 x 480 px

Expand

title	Подробные рекомендации по подготовке графического контента

Подробные рекомендации по подготовке графического контента

Все изображения, загруженные на портал кадрируются под определённый размер.
Размеры мы собрали в таблице.

Помните, что изображения не должны быть меньше ожидаемого размера.
Мы рекомендуем подбирать изображения с безопасными полями сверху и снизу, около 50px или 5-20% от длин сторон изображения.
Это должны быть не рамки, а просто участки изображения, которые система может обрезать, затемнить или каким-то другим образом изменить отображение.

Panel

panelIconId	1f913
panelIcon	:nerd:
panelIconText	🤓
bgColor	#EAE6FF

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

Существует 6 типов изображений, которые вы можете использовать в работе с контентом портала.

Превью
Шапка
Галерея
Изображение в теле записи

...

Превью

...

Шапка (баннер)

...

Галерея

Онбординг
Баннеры

Портал адаптивный, поэтому отображение страниц зависит от типа устройства, с которого зашел пользователь.
В зависимости от условий изображения переставляются местами, сжимаются и режутся.
Для управления этими изменениями условия

(

– кадрирование, сжатие, растягивание

)

– подобраны оптимально,

исходя из 3-х

на основании из трёх точек слома

-

– десктоп, планшет, телефон.

Note

Выбирайте изображения, которые имеют поля безопасности. Эти поля могут быть обрезаны блоком изображения. Размер каждого поля может занимать 5-20% от ширины или длины изображения. Поэтому не выбирайте изображения с важным текстом по краям изображения.

Превью

Превью – яркое изображение горизонтальной ориентации

, которое располагается на карточке-превью на общей странице записей.

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

Размер изображений: 376

x 209 px (на Главной странице) и 376

х 160 px

(на вторичной странице) кадрирование по центру

...

Изображение превью для новости

Шапка –

для главной и вторичной страницы. Размер может быть пропорционально больше – изображения будут кадрированы под этот размер.
Изображения кадрируются по центру.

Image Added

Шапка

Это изображение располагается внутри каждой записи и отражает основную тему сообщения.

Галерея

Галерея используется, когда к одной записи есть несколько изображений, которые можно разместить в отдельный альбом

внутри записи. Подходят

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

Если

Panel

panelIconId	1f913
panelIcon	:nerd:
panelIconText	🤓
bgColor	#EAE6FF

Если к записи прилагается только одно изображение, не рекомендуется использовать инструмент Галереи. В таком случае воспользуйтесь вставкой изображения в тело сообщения.

Галерея может быть использована, как слайдер для публикации презентации.
Для этого сохраните презентацию в виде изображений.

Размер изображений

: 750x420px, кадрирование по центру

...

Пример галереи

может быть любым. Изображения кадрируются по центру.

Так выглядят изображения в галерее на странице материала.

Image Added

А так выглядит изображение при просмотре в галерее.

Image Added

Изображения в теле записи

В тело записи вставляются те изображения, которые относятся к той части текста, рядом с которой находятся.
Ориентация изображение не важна. В текст можно вставить большие и небольшие изображения.

Размер изображений:

720

750 x N px

, кадрирование Пример изображения в теле записи

. Изображения кадрируются по центру.

...

Image Added

Онбординг

Требования к размеру изображений – не менее 332 x 480 px.

Баннеры

Рекомендуется выбирать

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

Не

рекомендуется использовать

используйте белый цвет и текст на изображении.
Текст, который добавлен подобным способом, может не читаться при адаптивном изменении изображения

, используйте встроенные заголовки и тест

. Для добавления текста используйте настройки баннеров.

Размер изображения: 1663 x 560 px

, кадрирование

. Изображения кадрируются по центру.

Image Modified

Баннер на Главной странице портала

Приветственная презентация

...

Изображение для приветственной презентации

Размер изображения: 791 х 291 px, кадрирование по центру

Таблица модулей, изображений и размеров

...

Название модуля

...

Изображения

...

Личный кабинет

...

Обложка - 1168 на 360, растягивается в

зависимости от контента

...

Учебные планы

...

Карточка учебного плана - 376 на 160

Карточка превью материала - 444 на 204

...

Уроки и тесты

...

Карточка - 376 на 160

Шапка материала - 1175 на 360

...

Квесты

...

Карточка квеста - 376 на 160

Карточка превью материала - 444 на 204

...

Блоги

...

Карточка - 376 на 160

Шапка материала - 1175 на 360

...

Мероприятия

...

Карточка - 150 на 135

Шапка материала - 1175 на 360

...

Новости

...

Карточка - 376 на 160

Шапка материала - 1175 на 360

Главная новость - 1175 на 360

...

Каталог призов

...

Карточка - 410 на 185

Изображение в галерее - 398 на 320 (примерно)

...

Библиотека

...

Карточка - 276 на 145

...

Сообщества

...

Карточка - 376 на 160

Шапка сообщества - 680 на 250

Карточка материала - 150 на 130

Шапка материала - 1175 на 360

...

Опросы га ГС

...

376 на 205

...

Хоткейс на ГС

...

216 на 92

...

Баннер на ГС

...

Как подготовить текстовый контент

Expand

title	Рекомендации по подготовке текстового контента

Как подготовить видеоконтент

Expand

title	Рекомендации по подготовке видеоконтента

Versions Compared

Old Version 12

New Version 13

Key

Основные рекомендации

Оглавление

Общие рекомендации

Что нужно знать о хранении контента

Как подготовить графический контент

Модули, применяемые изображения и их размеры

Личный кабинет

Учебные планы

Уроки и тесты

Квесты

Блоги

Мероприятия

Новости

Каталог призов

Библиотека

Сообщества

Опросы га ГС

Хоткейс на ГС

Баннер на ГС

Онбординг

Подробные рекомендации по подготовке графического контента

Превью

Шапка

Галерея

Изображения в теле записи

Онбординг

Баннеры

Приветственная презентация

Таблица модулей, изображений и размеров

Как подготовить текстовый контент

Рекомендации по подготовке текстового контента

Заголовок или Описание

Текст статьи

Как подготовить видеоконтент

Рекомендации по подготовке видеоконтента