• A
  • A
  • A
  • АБВ
  • АБВ
  • АБВ
  • А
  • А
  • А
  • А
  • А
Обычная версия сайта

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

В 2021 году по заказу Операционного управления дополнительного профессионального образования на портале НИУ ВШЭ внедрена новая карточка образовательной программы дополнительного образования.

Особенности карточки: более яркий визуальный ряд, более жесткие требования к формату. Вся информация размещается при помощи виджетов, что позволяет верстать сайт, не имея опыта работы с HTML и CSS.

Поиск в каталоге: в настоящий момент идет разработка нового каталога программ дополнительного образования. Сайты программ, созданные в новом шаблоне, не ищутся по фильтрам поиска действующего каталога ДПО, но их можно найти по названию программы в строке поиска. 

Новый дизайн карточки ДПО
 

Три важных правила:

1. Не пытайтесь внедрить собственные шрифты и стили. Вам нужно просто разместить текст и очистить его от стороннего форматирования.

2. Исходные изображения необходимо оптимизировать для веб. Зачем это нужно, подробно написано здесь.

3. Уважайте авторское право. Нельзя просто взять и скачать любое изображение из интернета.

Консультации

Все вопросы, касающиеся подготовки текстового контента, — Жгун Оксана Леонидовна

Технические вопросы — Служба поддержки портала portal@hse.ru

Как начать?

Если вы никогда ранее не работали с карточкой ДПО (в т.ч. предыдущей версии), получите права «менеджера дополнительного образования», написав с корпоративной почты письмо в свободной форме на адрес portal@hse.ru (служба поддержки портала).

Как создать или найти карточку?

Войдите в административный интерфейс https://www.hse.ru/adm/ и перейдите в раздел Образование → Дополнительное образование new

Вы увидите список всех карточек программ ДПО НИУ ВШЭ:

Административный интерфейс: список программ

  • Для добавления новой программы нажмите на знак «+» рядом с заголовком «Список программ»;
  • Для поиска уже внесенной программы воспользуйтесь полем «Фильтр». Поиск осуществляется по названию программы;
  • Для редактирования программы нажмите на значок карандаша;
  • Если уверены, что программа вам не нужна и ее нужно удалить, нажмите на «корзину»;
  • Для временного скрытия с сайта карточки — сделайте карточку неактивной в разделе «Данные» конкретной карточки.

Клонирование карточек программ

Если у двух и более программ много общего, то можно клонировать карточку уже существующей программы. Будьте предельно внимательны, не делайте этого «ради эксперимента». Чтобы клонировать карточку, наведите курсор на значок листика рядом с названием программы (см. скриншот) и нажмите на него. Обязательно измените название карточки программы перед сохранением. Помните, что для того, чтобы страница хорошо искалась через поисковые системы, на ней должен быть уникальный контент. Одно дело, когда речь идет о преподавателях программы и совсем другое, когда у двух и более программ совпадают описания, преимущества и проч.

Клонирование карточки программы ДПО

Собираем шапку сайта программы

Шапка программы. Внешний вид

После нажатия на знак «+» на первой странице вы попадете в редактор создания карточки ДПО, раздел «Данные».

Заполняете следующие поля:

  • Название программы
  • Описание
  • Ключевая выгода программы в одном предложении
  • Подразделение (выберите из списка)
  • Тип программы
  • Старт курса
  • Продолжительность
  • Формат обучения
  • Менторство
  • Тип документа об образовании
  • Направление
  • Наличие аккредитации или сертификации (при вводе в поле слова «аккредитация» в правом верхнем углу шапки выведется фраза «программа аккредитована»)

Если вам нечего указать в поле, то оставьте его пустым.

Как выглядит административный интерфейс

Шапка программы. Административный интерфейс

Изображение в шапке программы

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

Размер изображения ­— 1520 на 800 пикселей, вес — 100-250 кб.

Изображения, заливаемые на портал, должны быть оптимизированы для веб, для этого можно воспользоваться, например, сервисом https://tinypng.com/ .

Кнопки «Подать заявку» и «Задать вопрос»

В шапку можно добавить форму приема заявок и форму «Задать вопрос». При установке ползунка «Показ кнопки заявки» или «Показ кнопки формы» в позицию «включено» форма будет создана автоматически. Не забудьте потом перейти в режим редактирования и изменить даты актуальности формы. При необходимости вы можете изменить поля формы. Подробнее про редактирование форм можно прочитать здесь: https://portal.hse.ru/poll (часть про создание формы нужно пропустить, в вашем случае форма уже создана в стандартном виде).

Если по каким-то причинам форма в карточке вам не подходит и вы хотите дать ссылку на форму, созданную на другом сайте, вы можете указать ссылку в поле «Ссылка на внешнюю форму заявки/вопроса».

Кнопки будут показываться не только в шапке, но также на плашках «Результаты», «Документ об образовании», «Стоимость и условия — с подложкой».

Как посмотреть, что получилось

В верхнем правом углу размещена кнопка «Открыть на сайте», нажмите на нее. Если вы видите ошибку 404, то проверьте, что карточка имеет статус «Активно» в разделе «Данные».

Собираем страницу программы

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

 Добавление виджета. Административный интерфейс

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

Как поменять виджеты местами

Виджет «Якорь»

Якорем называется закладка на определенном месте страницы, предназначенная для создания перехода к ней по ссылке. В данном случае якорь нужен для того, чтобы из меню можно было переходить на определенные разделы сайта. Вам необходимо переместить виджет «Якорь» в нужное место и прописать в нем латинскими буквами «имя якоря» (напр: anchor). В ссылке, по которой пользователь будет переходить в определенное место страницы, в поле «URL» нужно прописать ссылку на страницу плюс имя якоря с символом решетки (#) впереди (например: https://www.hse.ru/edu/dpo/452691928#anchor).

Как выглядит административный интерфейс

Виджет «Важные объявления»

Важные объявления. Внешний вид

Данный функционал необходим, если вы хотите донести до посетителей сайта что-то крайне важное. Не используйте важные объявления для размещения информации, которая уже есть на странице, старайтесь, чтобы на сайте было только одно важное объявление.

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

Как выглядит административный интерфейс

Важные объявления. Административный интерфейс

Виджет «О программе»

О программе. Внешний вид

В виджете две вкладки: «Текст» и «Видео».

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

Во вкладке «Видео» можно разместить проморолик о программе или видео с приветственным словом руководителя. Видео сначала необходимо разместить на Youtube. В поле URL проставляете ссылку вида: https://www.youtube.com/embed/VYSTPqTdHqk. Чтобы получить такую ссылку, находясь непосредственно на Youtube, нажимаете на кнопку «Поделиться» (она располагается под видео). Выбираете самый первый вариант — «Встроить». У вас откроется окно, где слева будет видео, а справа — встраиваемый код.

<iframe width="560" height="315" src="https://www.youtube.com/embed/VYSTPqTdHqk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Копируете оттуда значение c embed и вставляете эту ссылку в виджет. Если необходимо, можно добавить подпись.

Загрузите превью видео — оптимизированное изображение 314×184 пикселей.

Как выглядит административный интерфейс

О программе. Административный интерфейс

О программе. Административный интерфейс

Виджет «Нумерованный блок»

Нумерованный блок. Внешний вид

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

Как выглядит административный интерфейс

Нумерованный блок. Административный интерфейс

Виджет «Результаты»

Результаты. Внешний вид

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

На плашке автоматически добавятся формы «Подать заявку» и «Задать вопрос», если вы ранее включили их в разделе «Данные».

Не забудьте изменить размеры загружаемых картинок и оптимизировать их для веб.

Как выглядит административный интерфейс

Результаты. Административный интерфейс

Результаты. Административный интерфейс

Виджет «Для кого»

Для кого. Внешний вид

Поле «Основной подзаголовок» обязательно для заполнения.

Число пунктов не ограничено, но желательно, чтобы их было 3-5.

Как выглядит административный интерфейс

Для кого. Административный интерфейс

Виджет «Список изображений»

Список изображений. Внешний вид

Виджет позволяет залить изображения (размер изображения 100 на 250 пикселей) с гиперссылкой или без. Например, можно использовать виджет для публикации логотипов партнеров (обратите внимание, что для этого логотипы необходимо вписать в прямоугольник 100 на 250 пикселей.

Как выглядит административный интерфейс

Список изображений. Административный интерфейс

Виджет «Документ об окончании»

Документ об окончании. Внешний вид

Заполните поле «Текст». Не забудьте выделить текст и очистить стороннее форматирование, нажав на иконку .

Загрузите пример документа об образовании. Ширина изображения — 430 пикселей, изображение будет спозиционировано по центру по вертикали.

Как выглядит административный интерфейс

Документ об окончании. Административный интерфейс

Виджет «Текст с заголовком»

Текст с заголовком. Внешний вид

Можно добавить текст с заголовком. Не забудьте выделить текст и очистить стороннее форматирование, нажав на иконку .

Как выглядит административный интерфейс

Текст с заголовком. Административный интерфейс

Виджет «Программа обучения»

Программа. Внешний вид

В поле «Заголовок» можно указать название дисциплины или блока дисциплин, в поле «Бейдж» — число часов или кредитных единиц, в поле текст краткое описание или же список дисциплин, если ранее вы указали название блока. Не забудьте выделить текст и очистить стороннее форматирование, нажав на иконку .

Как выглядит административный интерфейс

Программа. Административный интерфейс

Виджет «Сообщество»

Сообщество. Внешний вид

Виджет позволяет разместить несколько иконок с текстом. Изображение должно иметь размер 80×80 пикселей, рекомендуемый формат — gif, png.

Как выглядит административный интерфейс

Сообщество. Административный интерфейс

Виджет «Отзывы выпускников»

Отзывы выпускников. Внешний вид

Позволяет разместить текст с отзывом. Рекомендуемое число знаков — 650 знаков с пробелами. Не забудьте выделить текст и очистить стороннее форматирование, нажав на иконку . Размер фото — 48×48 пикселей. После заливки фото нажимаете «Вырезать», чтобы выбрать фрагмент изображения, который будет показываться на странице.

Как выглядит административный интерфейс

Отзывы выпускников. Административный интерфейс

Виджет «Контакты»

Контакты. Внешний вид

Заполните поля. В поле «Текст» не забудьте выделить текст и очистить стороннее форматирование, нажав на иконку . Обратите внимание, что телефонный номер вводится в формате +7(000)000-00-00 . Обязательно указывайте код города. Каждый новый телефон указывается в своем поле. 

Как выглядит административный интерфейс

Контакты. Административный интерфейс

Виджет «Стоимость и условия»

Стоимость и условия. Внешний вид

Виджет имеет несколько вариантов разделов содержимого:

1. Простой — позволяет добавить заголовок, подзаголовок и гиперссылку для перехода на страницу с подробностями (необязательно)

2. С лейблом скидки — помимо текста, подзаголовка и гиперссылки можно добавить лейбл скидки.

3. С подложкой позволяет дополнительно разместить текст и кнопки на формы «Подать заявку» и «Задать вопрос».

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

Как выглядит административный интерфейс

Стоимость и условия. Административный интерфейс

Стоимость и условия. Административный интерфейс

Стоимость и условия. Административный интерфейс

Виджет «Преподаватели»

Преподаватели. Внешний вид

Виджет имеет несколько вариантов разделов содержимого: «Из ВШЭ» и «Не из ВШЭ».

Виджет «Из ВШЭ» позволяет выбрать преподавателя из списка персон ВШЭ. Не забудьте после выбора воспользоваться функцией «Вырезать», позволяющей определить фрагмент изображения, которое будет показываться на странице. Если этого не сделать, то все фотографии на странице скорее всего будут иметь разную высоту, а изображение будет нерезким. Если вы добавляете сотрудника из ВШЭ, но хотите, чтобы вместо перехода на его персональную станицу, появлялось всплывающее окно с информацией, то можно добавить его через виджет «Не из ВШЭ».

Виджет «Не из ВШЭ» позволяет добавить персону со следующими атрибутами: ФИО, должность, фото (желательно горизонтально ориентированное), всплывающий текст. Не забудьте после выбора фото воспользоваться функцией «Вырезать», позволяющей определить фрагмент изображения, которое будет показываться на странице. Если этого не сделать, то все фотографии на странице скорее всего будут иметь разную высоту.

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

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

Как выглядит административный интерфейс

Преподаватели. Административный интерфейс

Виджет «О школе»

О школе. Внешний вид

Позволяет загрузить горизонтально ориентированную фотографию и текст.

Рекомендованная ширина фотографии — 1600 пикселей. Контейнер для изображения имеет фиксированную высоту, изображение заполняет его и спозиционировано по центру. Значимая часть изображения (если есть) должна находиться по центру, так как параметры изображения меняются в зависимости от разрешения экрана.

Текст добавляется по строкам, а внутри строк по колонкам. Максимальное количество колонок — 12, однако мы не рекомендуем делать в одной строке больше 4 колонок, оптимально — 1-3 колонки. У каждой колонки нужно задать ширину. В сумме ширина всех колонок должна быть равна числу «12». Например, вы хотите, чтобы у вас было две одинаковые по ширине колонки, тогда для каждой колонки необходимо задать ширину «6».

Как выглядит административный интерфейс

О школе. Административный интерфейс

Виджет «Формат обучения»

Формат обучения. Внешний вид

Формируется на основе сведений из раздела «Данные»:

  • Условия приема
  • Формат обучения
  • Cостав группы
  • Язык обучения
  • Состав занятий
  • Итоговая работа
  • Есть возможность указать дополнительно свои данные.

Есть возможность указать дополнительно свои данные.

Как выглядит административный интерфейс

Формат обучения. Административный интерфейс

Связанные программы

На странице программы можно указать релевантные программы. Для этого перейдите в разделе «Данные» — «Связанные программы». Нажмите на «+», введите в поле поиска название программы. Если программа не находится, но она точно в новом каталоге программ, то попробуйте искать по части названия.

Меню

Для упрощения навигации по странице можно добавить на страницу программы пункты меню.

Предварительно в разделе «Конструктор» добавьте в нужные места «якоря». В меню в поле URL вам нужно будет прописать адрес страницы плюс имя якоря с символом решетки (#) впереди (например: https://www.hse.ru/edu/dpo/452691928#anchor).

SEO

Заполните поле «Описание документа». Из того, что вы напишете в этом поле, сформируется мета-тег description. Он описывает содержимое страницы для поисковых роботов (Яндекс и Google). Если description есть, ваша страница/сайт будет при прочих равных лучше индексироваться в поисковиках, окажутся выше в выдаче и, соответственно, увеличится поисковый трафик на ваш сайт. Кроме того, часто именно это описание Google подставляет в выдачу (на страницу результатов поиска).

Что собой представляет «Описание документа»? Это короткий связный текст, описывающий контент страницы. Оптимизаторы сайтов рекомендуют делать описание на 160 знаков, можно чуть больше, но имейте в виду, что большинство поисковых роботов игнорируют то, что написано за первыми 160-180 знаками. Также нельзя делать из описания набор ключевых слов через запятую. Во-первых, это очень не нравится роботам, и результат может оказаться отрицательным. Во-вторых, эта информация может показываться людям, а им нужен более связный текст.

Поля «Использовать в качестве заголовка окна» и «Убрать автоматически формируемую часть окна» менять не нужно, с этими полями работают специалисты.