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

Видеозапись семинара для редакторов сайтов подразделений «Особенности работы с сайтом корпоративного портала»

1

1 декабря, 2021 г.

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

Служба поддержки

Доступ к редактированию персональной страницы и сайтов

portal@hse.ru

 


Редактирование персональных страниц, сайтов подразделений и образовательных программ (вопросы от ответственных)

portal@hse.ru

 


Добавление публикаций

publications@hse.ru

 


Добавление анонсов на главную страницу портала

portalnews@hse.ru

 

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

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

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

Видеозаписи семинаров: 26 апреля 2021, 12 мая 2021

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

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

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

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

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

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

Содержательные вопросы и работа с каталогом Операционного управления ДПО  — Жгун Оксана ЛеонидовнаФатьянова Екатерина Алексеевна

Технические вопросы размещения данных на портале НИУ ВШЭ  — Служба поддержки портала portal@hse.ru

Быстрые ссылки

Как начать

Добавление программ (создание новой карточки) осуществляется через каталог Операционного управления ДПО. Самостоятельное добавление программ на портале закрыто. В случае отсутствия карточки программы в каталоге обращайтесь в Операционное управление ДПО к Фатьяновой Екатерине Алексеевне.

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

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

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

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

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

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

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

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

Что делать, если у программы уже есть полноценный лендинг, на который идет реклама?

В этом случае Вам необходимо заполнить поля в разделе «Данные» и в поле «Сайт программы (для программ, имеющих лендинги)» вписать адрес лендинга программы.

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

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

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

Раздел поделен на 3 части.

1. Данные, импортируемые из базы ДПО. Заполнение и редактирование полей «Название», «Тип программы» и проч. осуществляется в базе данных каталога ДПО. В самой карточке поля для внесения изменений закрыты. По вопросам работы с каталогом ДПО необходимо обращаться к Фатьяновой Екатерине Алексеевне.

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

Данные-1

2. Дополнительные данные для карточки на портале. Поля «Менторство», «Изображение», «Ключевая выгода программы в одном предложении», «Состав занятий», «Итоговая работа» заполняются и редактируются в карточке.

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

Данные-2

3. Данные для Сведений о ВШЭ. На их основе формируется информация в обязательном для каждого университета разделе. Заполняются и редактируются в карточке.

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

Данные-3

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

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

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

Размер изображения ­— 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, нажимаете на кнопку «Поделиться» (она располагается под видео). Выбираете самый первый вариант — «Встроить». У вас откроется окно, где слева будет видео, а справа — встраиваемый код. Весь код копировать не нужно, нужно взять только ссылку c embed и вставить эту ссылку в виджет. Если необходимо, можно добавить подпись.

Загрузите превью видео — оптимизированное изображение 314×184 пикселей. Или нажмите «Загрузить превью» в административном интерфейсе  – в этом случае будет использоваться заставка с Youtube.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Загружать на страницу изображение документа необязательно. Изображение документа будет показано из справочника на основе той информации, которую вы внесли в поле «Тип документа об образовании» в разделе «Данные». Однако, если вас по какой-то причине не устраивает изображение по умолчанию, то вы можете загрузить свой вариант: ширина изображения — 430 пикселей, изображение будет спозиционировано по центру по вертикали.

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

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

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

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

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

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

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

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

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

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

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

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

Виджет «FAQ»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Загрузка файлов

На страницу можно загрузить один или несколько файлов. Для загрузки файлов используйте виджет «Список файлов». При загрузке файла можно указать текст, по клику на который будет открываться файл.

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

Внешний вид. Список файлов

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

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

Показ учебного плана

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

Пожалуйста, не используйте для загрузки учебного плана виджет «Список файлов».

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

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

Сведения об образовательной организации

После внедрения нового каталога ДПО информация из раздела (Краткая характеристика программы, Аннотации к рабочим программам дисциплин, Учебный план, Календарный учебный график) будет показываться в разделе «Сведения об образовательной организации» (обязательный раздел на сайте вуза).  Файл с учебным планом можно показать на странице программы.
Для загрузки файлов перейдите «Данные» — «Сведения об образовательной организации»

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

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

Меню

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

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

SEO

  • Заполните поле «Описание документа»

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

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

Если вы не знаете, что написать в этом поле, напишите название программы, далее текст длиной в 50-110 символов на тему: что дает программа или о чем она. В конце добавьте номер телефона (по желанию) «НИУ ВШЭ» (без кавычек).

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

  • Проверьте порядок расположения блоков на странице программы

Порядок влияет на приоритет ключевых слов для поисковой системы. Рекомендуемый порядок блоков:

  1. О программе
  2. Для кого (в описании начинать со слов Очная/Онлайн программа НАЗВАНИЕ программы)
  3. Формат обучения
  4. Программа обучения (если это возможно, то помимо названия дисциплины указывайте тип дисциплины (лекция, семинар и т.д.), добавляйте краткую аннотацию дисциплины)
  5. Результаты
  6. Документ об окончании
  7. Преимущества программы
  8. Преподаватели
  9. Стоимость и условия
  10. Как поступить на программу
  11. Наши выпускники трудоустроились в ведущие компании / Партнеры программы 
  12. Отзывы выпускников
  13. Контакты (адрес)
  • Повторите название программы 1-3 раза в тексте вне заголовка 
  • Обратите особое внимание на раздел с описанием преподаваемых на программе дисциплин

Чем более подробно и доходчиво вы распишете, что будет изучать слушатель программы, тем лучше.

  • Если этого не достаточно?

Если вы сделали все перечисленное выше, но не полностью удовлетворены результатом по трафику, отправьте заявку на подбор ключевых слов на portal@hse.ru со ссылкой на программу. Команда портала подберет для вас набор слов или словосочетаний, взяв за основу название вашей программы и список дисциплин. Список слов вы должны будете добавить в размещенный на странице программы контент.

Срок подбора составляет от 1 до 20 дней в зависимости от текущего объема работ.