Официальный сайт

Мониторинг сайта

Вебинар от 23 ноября 2022

Выдержка из вебинара от 6 июня 2022

Содержание вебинара

Видеозапись вебинара: https://youtu.be/TSkjrz-R84I.
Материалы вебинара - см. вложения страницы.

image-1654507726366.png

Сроки проверки

image-1654505311051.png

Проверка статуса мониторинга

Обратить внимание на заполнение "Специального раздела" со сведениями об образовательной организации.

Система "АИС мониторинг"

https://ais-monitoring.obrnadzor.gov.ru (проверка по тегам, у вуза есть ЛК)

"Карта вузов"

https://map.obrnadzor.gov.ru/application/university/view/1135 (без ЛК вуза, можно посмотреть текущую информацию о вузе).

Обратная связь и запросы на изменение сведений в "Карте сайта": dep07@obrnadzor.gov.ru.

Пример хорошего заполнения данных: https://pimunn.ru (ПИМУ Минздрава России).

Для самообследования можно пользоваться проверочными листами (приказ Рособрнадзора № 1533 от 29.11.2021).

Версия для слабовидящих

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

Некоторые аспекты можно увидеть на слайде:

image-1654507333557.png

Разное

image-1654507656383.png

Комментарии к старым наработкам по созданию сайта

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

Главная страница

Ссылка: https://stankin.bs18.ru/index.php.

Карусель с баннерами и редактируемым меню

Меню, заголовок и ссылки которого легко меняются контент-менеджером в зависимости от ситуации:

Необходимо учесть, что одновременно в вузе проходят несколько мероприятий, для которых размещаются баннеры на главной странице. Как обсуждали на встрече, необходимо подумать, нет ли возможности не только сделать "точки" навигации между слайдами (как на скриншоте выше), но также, чтобы можно было сразу увидеть названия мероприятий, которые представлены в карусели, с возможностью быстрого перехода на нужный слайд. При этом, при переходе на нужный слайд слайдшоу должно останавливаться, чтобы пользователь имел возможность рассмотреть слайд (можно реализовать в виде кнопки "Play"/"Pause").

Хотя на встрече 23 ноя 2023 предлагалось отказаться от традиционной карусели с баннерами, все же необходимо учитывать, что время от времени нам присылают баннеры из внешних организаций (например, из Министерства). Эти баннеры имеют размеры, подходящие под размещение именно в карусели на видном месте сайта.

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

Два разреза для навигации по сайту

Первый разрез - кому адресована информация, второй разрез - разделы сайта (отражают базовые разделы сайта).

image-1700837526390.png

Панель действий с редактируемыми кнопками

Похоже по смыслу на меню в карусели, но логически отличается тем, что меню ссылается на контент, а в панели содержатся действия (заполнение формы, поиск, вход в систему и т.д. - см. скриншот).

Постоянные элементы панели действий:

Настраиваемые кнопки (преднастроенные при сдаче сайта):

image-1700837690455.png

На приведенном скриншоте "Приоритет2030" фигурирует в виде изображения. Необходимо подумать относительно реализации: будет ли это отдельная область под мини-баннеры или будет возможность прикреплять изображение в область кнопок.

Информационные блоки на главной

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

Кнопка "Наверх"

Должна присутствовать на всех страницах.

Карточки новостей

Должны включать счетчик просмотров.

Главное меню сайта

По горизонтали и вертикали дублируются два варианта навигации из верхнего меню (о двух вариантах навигации см. раздел выше). Дублируются кнопки действий из верхней панели сайта.

image-1701095917475.png

Страница новостей, мероприятий и объявлений

Ссылка: https://stankin.bs18.ru/news.php.

Новости, анонсы и объявления обладают сходным набором характеристик, поэтому было принято решение объединить их на одной странице. Вот как это выглядело в согласованном варианте макета (клик по заголовкам "НОВОСТИ", "МЕРОПРИЯТИЯ", "ОБЪЯВЛЕНИЯ" отображает карточки соответствующего типа):

image-1701080771163.png

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

Раскрытый фильтр по тематике

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

image-1701080470617.png

Раскрытый фильтр по подразделениям

Подразделения берутся из структуры университета.

image-1701080527498.png

Раскрытый фильтр по датам

Для разных типов материалов дата имеет свой смысл:
- для новости это дата публикации (не системная дата создания элемента инфоблока, а из специального поля "Дата публикации");
- для мероприятия это дата начала мероприятия;
- для объявления это системная дата публикации элемента инфоблока.

image-1701080662103.png

Активные фильтры

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

Новость

Ссылка на страницу: https://stankin.bs18.ru/news-single.php.

Шапка

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

Согласованный вариант:

image-1701095181451.png

Блок "Читайте также"

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

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

image-1701095258669.png

Список тегов

При клике на тег должна открываться страница расширенного поиска с соответствующим предустановленным тегом в поле "Тематика". Список тегов можно увидеть над блоком "Читайте также" в предыдущем разделе.

Поиск по сайту

Необходимо качественно проработать поиск по сайту. Согласована отдельная страница с результатами поиска, поиск производится посредством:

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

Согласованный вариант страницы поиска:

image-1701082873557.png

Активные фильтры

В свернутом состоянии фильтров должно отображаться название фильтра и сводная информация о примененных фильтрах:

image-1701082303947.png

Пример компонента, в котором качественно реализована возможность отображать метку поля и фильтры: https://quasar.dev/vue-components/select#the-display-value:

image-1701082133523.png

Кнопка сброса фильтра

Должна присутствовать единая кнопка сброса всех фильтров, как показано на скриншоте выше.

Переход из строки поиска

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

Страница контента

Ссылка на страницу: https://stankin.bs18.ru/text.php.

В текущем разделе приведен скриншот согласованной страницы с целью продемонстрировать элементы, которые должны быть редактируемы из стандартного WYSIWYG-редактора. По вопросу элементов на странице см. также блок "Читайте также", счетчик просмотров, список тегов в разделе новостей.

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

image-1701094851835.png

Сущности из структуры университета

Необходимо проработать страницы:

Мобильное меню

Удачный вариант реализации мобильного меню можно увидеть на текущем сайте приемной комиссии (отображается только на мобильных устройствах). Нюансы:

image-1701096997396.png

Памятка по важным моментам

О чем не забыть:

Проработка следующим этапом

Список визуальных блоков (по подобию с лендингами): https://stankin.bs18.ru/blocks.php (по ссылке не полный перечень блоков).

Калькулятор ЕГЭ - урезанная версия списка направлений подготовки: https://stankin.bs18.ru/calc.php (может потребоваться согласование с ответственным секретарем приемной комиссии).

Списки поступающих: https://stankin.bs18.ru/lists.php. Обсуждался вариант отображения списка направлений подготовки с фильтрацией наподобие страницы поиска по сайту.

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

Поля таблицы:

Главная страница

Меню

Принципиальная схема

На примере раздела приемной комиссии видно, что может быть до четырех уровней вложенности пунктов меню, например:

  1. Поступающим
  2. Поступление в магистратуру
  3. Целевое обучение
  4. Прием на целевое обучение

Вариант 1 (вертикальное меню 2-го уровня)

Представленная ниже версия организации меню позволяет решить проблему:

image-1703541173470.png

Предлагается сократить или вообще убрать серую левую полосу и красную стрелку, так чтобы пункты 2-го уровня были шли вплотную к левому краю экрана.

Вариант 2 (горизонтальное меню 2-го уровня)

image-1703628947216.png

Оформление и визуальные эффекты

Вариант 1

Кликните на видео для просмотра.

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

Скриншот:

image-1703602918588.png

Ссылка на демо-версию: https://tympanus.net/Blueprints/VerticalIconMenu.

Для справки также приводится вариант на сайте ВШЭ (не самый красивый и удобный):

image-1703628516141.png

Вариант 3

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

Кликните на видео для просмотра.

Слайдер

Останавливаемся на варианте со слайдером, т.к. он всем понятен и прост для контент-менеджеров. На что обратить внимание:

Предлагается сделать слайдер таким образом, чтобы он редактировался не отдельно, а чтобы в него можно было выводить данные из инфоблоков (новости, мероприятия, объявления). Это будет регулироваться флагом "Отобразить в слайдере на главной странице". В случае, если эта опция выбрана, прикрепленное изображение должно быть нужного формата, чтобы оно могло быть отображено в слайдере.

Вариант 1

Под изображением в левом блоке фигурирует:

В правом блоке будет краткий анонс.

image-1703604111037.webp

Вариант "навигационных точек" можно позаимствовать с сайта https://www.toyota.com.br:

image-1703604651339.png

Вариант 2 (меню совмещено со слайдером)

Главная страница сайта ВШЭ:

image-1703628706004.png

Вариант 3

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

image-1703603884410.png

Блок "Полезное"

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

image-1703625463291.png

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

image-1703625605349.png

Облако тегов

Более красивая замена блоку ключевых слов на текущем сайте. Можно предусмотреть фиксированные позиции и размеры для ключевых слов, а через админку они будут заполняться. Предлагаемая техническая реализация: инфоблок с полями "Текст", "Ссылка", а также где открывать - в текущей вкладке или новой. Поворот относительно горизонтальной линии реализовать можно с помощью CSS-правил.

Идеи для реализации

Можно, например, взять за основу следующую структуру, заменив значок Python на логотип или фото станкина:

image-1703628140201.png

Есть вариант и посложнее - на слово "СТАНКИН" наложить теги со связанными иконками:

Облако тегов.png

Новости

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

image-1702993385875.png

Комментарии к приведенному примеру:

Мероприятия и объявления

Экран делится на 2 части:

У каждого из блоков свой заголовок.

Приблизительная организация блока "Мероприятия":

image-1702984581451.png

Приблизительная организация блока "Объявления" (выделено красным прямоугольником):

image-1703546678801.png

Партнеры

Используем вариант из "Фигмы" или любой стандартный вариант.

Галерея

Используем вариант компоновки блоков из "Фигмы".

Небольшое техническое дополнение: предлагается предусмотреть также флаг "Разместить в галерее" для всех видов контента - новостей, мероприятий, объявлений и обычных страниц. В этом случае используемая обложка будет размещена в галерее, а в качестве ссылки будет фигурировать URL данной единицы контента. Цель - чтобы люди не просто посмотрели некоторую подборку красивых фотографий, но чтобы в случае заинтересованности они могли перейти на нужный материал.

Цифры и факты

Неплохая реализация на сайте ВШЭ:

image-1703626612159.png

Контакты

Форму обратной связи убираем. Это не лендинг, задача сбора данных от посетителей не стоит. У других вузов с даже самыми прогрессивными сайтами такой формы также нет.

Хороший и лаконичный вариант блока контактов можно найти на сайтах ВШЭ и Московского Политеха:

image-1703626948623.png

image-1703627021493.png

Подвал

Учитывая, что верхнее и левое меню будут прикреплены к краям экрана и всегда будут у пользователя перед глазами, нет смысла делать насыщенный ссылками подвал, достаточно включить минималистичный логотип, фразу "Министерство науки и высшего образования РФ", название вуза, информацию об авторских правах и год.

Инструкция по предоставлению контента для сайта

Общие сведения

Контент для наполнения сайта загружается на облачный сервис newcloud.stankin.ru в виде файлов, организованных определенным образом внутри директорий. Каждая директория – это раздел или страница сайта.

Для передачи внешнего вида страницы сайта используется файл формата Microsoft Word, название которого совпадает с названием директории. В этом файле отражено форматирование текста, размещение изображений, таблиц и т.п. Эта информация будет использоваться при наполнении нового сайта контентом на основании данных из облака newcloud.stankin.ru.

Пример организации файлов и папок можно увидеть в тестовом разделе (доступен без авторизации), ниже приведено изображение с наполнением этого раздела и необходимыми пояснениями. Тестовый раздел размещен в корне директории "Контент для нового сайта stankin.ru" (закрытый раздел), предназначенной для загрузки контента для разрабатываемого сайта.

На приведенном изображении показан внешний вид тестового раздела в облаке (ссылка на тестовый раздел дана выше). Важные нюансы организации данных выделены красным цветом:

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

Правила наполнения

Основные сведения о размещении контента описаны выше. В текущем разделе затронуты технические подробности формата предоставляемых материалов.

Текст

Изображения

Видео

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

По всем вопросам, связанным с предоставлением контента, можно обращаться одним из следующих способов:

  1. Написать заявку на 112@stankin.ru с указанием темы "Заполнение контента для сайта stankin.ru".
  2. Позвонить по внутреннему номеру: 2-13.
  3. Прийти в каб. 0916.

Сайт на vue: локальная разработка

Локальное развертывание проекта

Склонировать к себе на компьютер репозиторий Git:

git@192.168.30.18:stankin-vue.git

Настроить ветки, запушить в репозиторий, написать, в какую ветку переключаться для работы.

Для установки, необходимо массив с проектом перенести в IDE (WebStorm/VisualStudio Code), также нам нужен Node.js определенной версии:

image-1715164492528.png

Качаем любую из списка.

Далее в консоли среды разработки пишем:

npm install

Дожидаемся установки модулей, далее можно использовать команду:

npm run serve

На нас посыпется куча ошибок, после чего должны увидеть:

image-1715164888616.png

Собственно данный адрес нам необходим для отладки внесенных изменений:


image-1715164953881.png

Сборка измененного проекта

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

Для этого используется следующая команда:

npm run build

Запускаем команду, дожидаемся окончания билда, в корневой папке проекта появится zip архив, с названием dist.zip.

Данный архив и является билдом проекта, который мы в дальнейшем развернем на сервере.

Загрузка новой версии сайта на прод

Для загрузки необходимо подключиться через SFTP-клиент (Например, предустановленный в станкине WinSCP) к серверу станкина (82.179.84.29, root)

Сайт расположен по пути /var/www/stankin.

Необходимо сделать бекап всех папок, кроме abitur, sveden, uploads, upload.

Полученный после билда архив необходимо разархивировать, и заменить на сервере все папки, кроме abitur, sveden, uploads, upload.

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

Если изменения применены успешно, необходимо также переопубликовать счетчик Яндекс Метрика.

Викон (Vikon)

Обновление информации на сайте (подгрузить данные из "Викона"):
https://site.stankin.ru/sveden/update/index.php


Предпросмотр информации в "Виконе" без обновления информации на сайте (на примере раздела со списком сотрудников):
https://db-nica.ru/sveden/employees