torinasakura/kino-reporter

Официальный сайт ресурса Кино Репортёр

kino-reporter's Issues

Секции

Задача

Сделать фрагмент Секции

• Статьи
• Персоны
• Фильмы и сериалы

---

• desktop
• mobile

Отрисовать дизайн

Interview

Задача

Сделать фрагмент Interview

• desktop
• mobile

Menu

Задача

Сделать фрагмент Menu

Сделать фрагмент Promo (Menu)

• desktop
• mobile

Материал

Материал

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

Всё зависит от того, кто создаёт материал и какую цель преследует.

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

Типы материалов

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

Когда Редактор (автор) создаёт новый материал в админке, он выбирает шаблон. Это ускоряет и упрощает создание новых материалов, а также создаёт необходимые ограничения.

Статья, Новость, Интервью

Эти три типа имеют один шаблон на всех.

Какие требования к типу Статья, Новость, Интервью?

В дизайне этот шаблон обозначен как Articles page (Default).

Рецензия

В дизайне этот шаблон обозначен как Articles Page (Collection).

Какие требования к типу Рецензия?

Подборка

В дизайне этот шаблон обозначен как Articles Page (Review).

Какие требования к типу Подборка?

Дополнительные параметры материала

В зависимости от типа материала (шаблона), можно прикрепить то или иное дополнение. Дополнение это маленький инструмент, который «расширяет» функционал взаимодействия с материалом.

Рубрика

К материалу можно прикрепить одну или несколько рубрик. Это нужно для того, чтобы отображать материал в тех местах, где это важно. Фильтровать материалы, искать в поиске. Рубрика это своего рода метка для материала.

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

Фильм

Представим что редактор пишет новый материал-новость (например, кинопремьера фильма) и хочет прикрепить относящийся фильм к новости.

Он может сделать это, прикрепив в редактор необходимый Фильм.

Персона

По аналогии с фильмом, к материалу можно прикрепить персону.
Режиссёра, Постановщика, Актёра или любую другую персону, которая есть в базе данных сервиса.

Materials

Задача

Сделать фрагмент Sort by

Сделать фрагмент Search result

• desktop
• mobile

Hero

Задача

Сделать фрагмент Hero

• desktop
• mobile

Main Editor

Задача

Сделать фрагмент Main Editor

• desktop
• mobile

Ревизия действующих плагинов на WP Kinoreporter

Кинорепортёр, ревизия плагинов для WP.googlesheetfile

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

Список задач:

• #28
• #29
• #30
• #31
• #32
• #33
• #34
• #35
• #36
• #37
• #38
• #41

Picks & News

Задача

Сделать фрагмент Picks&News

• desktop
• mobile

Карьера

Карьера

Сущность-таблица, которая хранит в себе список должностей персон.

Список на котором сосредоточимся

• Актёр
• Режиссёр
• Продюсер
• Оператор
• Композитор
• Художник-постановщик

Reviews

Задача

Сделать фрагмент Reviews

• desktop
• mobile

UX анализ и вопросы

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

Дополнительно от меня:

Шапка

1. Почему выделена рубрика "Подкасты" ярко-красным и плеер вынесен на самое видно мето ? На них как-то зарабатываете?

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

3. Иконки соцсетей лучше разместить в подвал. Для шеринга конкретной статить, как описывали сеошники, поместим внутри статьи (плавающие иконки).

4. Поиск нужно заметнее.

5. Кнопку "Подписаться" на новости сейчас совсем не найдешь. А она очень важна для возврата пользователей через анонсы. Надо заметнее, на видном месте. Можно сделать меню фиксированным и кнопка все время будет видна. Можно через 30-50 минут пребывания на сайте показывать модальное окно с формой подписки.

6. Избранное. Добавлять, просматривать свои избранные, делиться ими после авторизации.

7. Подписку на журнал лучше переименовать в "Купить журнал". Нравится как подано у https://kinoart.ru/
   Не спрятано в меню, показывают обложку с кнопкой "Купить" и "Подробнее".
   Было бы полезно показать, что внутри журнала, содержание.

8. Бесконечная лента на главной без разделения на рубрики.
Сейчас все в кучу. Нужно визуально разделить на рубрики, в которых показываем превью самых свежих (и/или популярных) постов, например:

• Главное сегодня (3-4 превью) + кнопка "Смотреть еще" (с переходом в категорию)
• Самые популярные (3-4 превью) + кнопка "Смотреть еще" (с переходом в категорию) и т.д.
• подборки типо "Топ-5", "Топ-10"

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

На главной ленту с трелерами нужно ставить на первом экране. Можно слайдер.

Судя по карте кликов в Яндекс Метрике, много кликают на стрелке перелистывания слайдера Трейлеры. Перенести выше, заметнее, было бы круто запускать трейлер сразу в окне без перехода на Ютюб.

По Яндекс метрике самая популярная статья за год - 25 лучших бесплатных фильмов на Ютюбе. Во время новогодных праздников ее посещение резко возрастало. Можно сделать подборку и разместить на главной слайдер с трейлерами, как вариант.
Особенно это актуально сделать сейчас перед новогодними каникулами.

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

10. Детальная страница статьи.
Бесконечный скролл - нехорошо. В идеале 1 статья = 1 страница, нужна кнока "Наверх".
(Согласна с рекомендациями (https://docs.google.com/document/d/1PXsi0Px1GePh-wXxpOcQTsT7RtfFhjvj78ENQVMYG50/edit#heading=h.b9dtouukwfns)

11. Реклама на сайте
Рекламный баннер в левом нижнем углу перекрывает основной контент. Предлагаю заложить плейсхолдеры под рекламу в теле статьи и в сайд-баре.
Есть ли статистика по наиболее кликабельным блокам?

12. Видео-проигрыватель в правом нижнем углу - реклама или что?

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

14. Каталог
Будем ли реализовывать? (по рекомендациям):

• календарь кинопремьер (раздел с фильтрами, виджет)
• [база данных фильмов/сериалов/персон](нужно сделать базу данных фильмов/сериалов/персон)
• Карточка фильма/персоны

15. Гид по киновселенным будет реализован? (Из дока рекомендаций)

16. Аудиоверсии статей (из рекомендаций) - будем реализовывать?

15. Логотип и цвет
Меняем лого или оставляем как есть?
По цветовой гамме можно оставить черный, красный (как акциент), белый, серый.

Жанр

Жанр

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

Список жанров на которых решили сосредоточиться

• Боевик
• Военный
• Документальный
• Драма
• Катастрофа
• Комедия
• Мелодрама
• Триллер
• Ужасы
• Фантастика
• Фэнтези

Обратная связь от Алексея Говорухина

Алексей прислал обратную связь в виде нумерованных пунктов. Десятый пункт зачеркнутый, по просьбе @TorinAsakura.

Фидбэк

1. Шрифт без засечек! Посмотреть какой есть, предложить варианты (главное, чтобы в старых материалах при перезаливке заменились новые шрифты)

2. Правая колонка в слайдере скролится?

3. Новостей в блоке сайдера нет?

4. Даты материалов на главной не нужны, только внутри материала

5. На главной у картинок три варианта соотношения сторон картинок — много, нужно максимум два, должно коррелироваться с форматами картинок сейчас иначе картинки старых материалов будут отображаться не корректно

6. Плашка "подкаст" — не нужно, меняем на "колонка главного редактора" (нужно сделать, в т.ч. внутреннюю, референс - колонка редактора из журнала https://kinoreporter.ru/glavnyj-redaktor-kinoreportera-mariya-lemesheva-o-prestizhnoj-kinopremii-sobytie-goda-i-budushhem-kinoindustrii/).

   • Картинка справа - это коллаж или отдельные кликабельные фото?
   • Формат картинки? Нужно подумать куда лучше в "Основные типы страниц"

7. Под "колонкой главного редактора" блок "рецензии" - 4 сниппета + скролл или кнопка "ещё" с переходом на страницу рубрики "рецензии"

8. Главная - "рецензии" - убрать, Вместо неё делаем "интервью", размер фото как в "кино/сериалы", 3 колонки х 2 ряда фото+имя+цитата +. кнопка "ещё" с переходом в рубрику "интервью"

9. Главная — ближайшие премьеры: писали ранее, что эта рубрика не нужна.

10. Подписка на рассылку новостей - как реализовано? mailchimp или встроенный в WP плагин? Что за коронавирус на плашке?

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

12. Article page collection (подборки) - пока нет базы не можем сделать обновление с картинками

13. Article page review (рецензии) - у автора оставляем только имя и фамилию, подложку и регалии не нужен

14. Основные типы страниц - в отдельных категориях должны быть шаблоны "Главный редактор" и "Интервью, ", либо, как обсуждали, чтобы в разные инструменты (имя автора, оглавление и пр.) можно было использовать везде.

15. Оценку фильму ставит редакция

16. Авторизация только через соцсети, никакой почты/телефона и пр. персональных данных

17. В итоге как формируем базу?

18. График премьер не нужен!

19. Magazine info - В номере (без "новом")

20. Личный кабинет - profile: убрать слово "мои" - Статьи (не "мои"), Подкасты (не "мои")

Разбор и онбоардинг в проект Кинорепортёр

Созвонился с @dakand он ввёл меня в курс дела. Там сейчас активно доделываются ключевые задачи, поэтому договорились что «прямо вот сейчас» я туда не лезу. Как только ключие задачи выполнят, сможем все вместе собраться и поговорить о разработке.

Они работают тут: https://github.com/atls/design/issues/30

Footer

Задача

Сделать фрагмент Footer

• desktop
• mobile

No results

Задача

Сделать фрагмент No results

• desktop
• mobile

Header

Задача

Сделать фрагмент Header

• desktop
• mobile

Знакомство с JTBD (Jobs to be done)

@elizavetapugacheva твоя задача

На созвоне уже рассказывал про проект kinoreporter.ru. Есть документ по которому мы будем ориентироваться при разработке нового сайта. Там упомянуто про их печатный журнал, также я об этом рассказывал и в целом его можно найти на их сайте. Эта штука очень важна, потому что:

• Во-первых, это единственный прямой источник дохода от пользователей.
• Во-вторых, это имиджевая вещь.
• В-третьих, успех развитый через коммерческий продукт сильнее привязывает пользователей.

Но у них много проблем. Сам журнал пиарится не явно, отсутсвует вариативность покупки, отсутствует электронная версия.

Тебе нужно проанализировать этот продукт - в чем его недостатки и преимущества, как улучшить его позиционирование, как добиться увеличения лояльности через этот продукт, какой путь пользователь проходит до покупки продукта, как привлечь и как удержать читателя. Нам необходимо какое-то исследование, которым мы можем фигурировать для издательства, когда, например, предложим ввести электронное издание журнала. Исследование будем проводить на основе методологии JBTD.

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

Материалы:

1. Имхо, самый удобный гайд по JBTD, но можешь смотреть и в других местах.
2. Референс подписки на электронную версию журнала - "Журналус" студии Лебедева.

Films

Задача

Сделать фрагмент Sort by

Сделать фрагмент Search result

• desktop
• mobile

Референсы к новому дизайну сайта

Подборка в фигме
Подборка скринов на диске

Journal

Задача

Сделать фрагмент Journal

• desktop
• mobile

Страница поиска

Список задач:

• #54
• #55
• #56
• #57
• #58
• #59

Рубрика

Рубрика

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

Список рубрик

• Кино
• Культура
• Премии
• Сериалы
• Стиль
• Театры
• Техно
• Фестивали

Persons

Задача

Сделать фрагмент Sort by

Сделать фрагмент Search result

• desktop
• mobile

Movies & series

Задача

Сделать фрагмент Movies & series

• desktop
• mobile

Анализ текущей версии.

Не применяются состояния для иконок в Button

Описание

@TFK70

При текущем подходе appearance стилей иконки которые находятся в кнопке не реагируют на состояния.

Попробовал эти стили сделать так:

const appearanceCloseSearchDefaultStyles = ({ theme }) => ({
  '&': createAppearanceStyles({
    fontColor: theme.colors.button.closeSearch.default.font,
    backgroundColor: theme.colors.button.closeSearch.default.background,
    borderColor: theme.colors.button.closeSearch.default.border,
  }),
  'svg > path:only-of-type': {
    fill: theme.colors.button.closeSearch.default.font,
  },
})

const appearanceCloseSearchHoverStyles = ({ theme }) => ({
  '&:hover': createAppearanceStyles({
    fontColor: theme.colors.button.closeSearch.hover.font,
    backgroundColor: theme.colors.button.closeSearch.hover.background,
    borderColor: theme.colors.button.closeSearch.hover.border,
  }),
  '&:hover svg > path:only-of-type': {
    fill: theme.colors.button.closeSearch.hover.font,
  },
})

const appearanceCloseSearchPressedStyles = ({ theme }) => ({
  '&:active': createAppearanceStyles({
    fontColor: theme.colors.button.closeSearch.pressed.font,
    backgroundColor: theme.colors.button.closeSearch.pressed.background,
    borderColor: theme.colors.button.closeSearch.pressed.border,
  }),
  '&:active svg > path:only-of-type': {
    fill: theme.colors.button.closeSearch.pressed.font,
  },
})

const appearanceCloseSearchDisabledStyles = ({ theme }) => ({
  '&': createAppearanceStyles({
    fontColor: theme.colors.button.closeSearch.disabled.font,
    backgroundColor: theme.colors.button.closeSearch.disabled.background,
    borderColor: theme.colors.button.closeSearch.disabled.border,
  }),
  'svg > path:only-of-type': {
    fill: theme.colors.button.closeSearch.disabled.font,
  },
})

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

Воспроизвести

1. Ветка feat/init-front
2. Запуститься
3. Нажать на инпут в хедере
4. Ввести че нибудь + enter
5. Видим это

Материалы

Серый бекграунд которого не должно быть, тк нигде не задан

Screen.Recording.2022-11-03.at.14.31.15.mov

Вывод

Нужно в генераторе button добавить возможность менять цвет у иконки, но перед этим разобраться откуда берется бекграунд, тк это решение не до конца корректно отрабатывает

Вариации цветов у кнопок

@TFK70

Проблема

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

Например:

Здесь видно что эти две кнопки одинаковые, значит им можно дать один нейминг, как обычно это и делаем, но так как кнопок на проекте много, придется выдумывать какие-то рандомные имена кнопкам и самое главное их будет МНОГО. Рассмотрим такую ситуацию - прошло 20 дней, мне нужно указать вариант стиля кнопке, как она называется в коде я не помню, допустим такая вариация называется sushi, а в фигме такого нейминга нет, в таком случае мне придется смотреть цвета стейтов у кнопки в фигме и пробегаться по всем возможным вариантам в файле colors.ts на такое же соответствие цветов

В фигме у одинаковых вариантов имена различаются:

А значит придется выдумывать какое-то общение название, которое в фигму не заложено, оно будет только у меня в коде, через какое-то время попробуй определи что за кнопка с названием sushi, тут как ни крути придется сидеть и искать соответствие цвета

Итог

Есть два варианта:

1. То что я делаю сейчас, оставляю комменты с именем вариации кнопки. Тк в будущем будет проще ориентироваться, проще говоря я синхроню свой код и фигму
2. Использовать имена из фигмы, но в таком случае одинаковые вариации не будут под одним неймингом, вместо имени sushi которое объединяло две кнопки со скринов выше, будут как две разные сущности с названиями otherMonth и otherFilter

Фильм

Фильм

Здесь какой-то текст о сущности фильм

О фильме

• Название: Локализованное и Оригинальное
• Постер (Cover)
• Трейлер
• Дата выхода
• Жанр
• Страна
• Слоган
• Хронометраж (продолжительность)

Главные участники производства фильма

• Режиссёр
• Оператор
• Сценарист
• Продюсер
• Композитор
• Художник
• Монтаж

Главные роли

• Список релейтед актёров

Дубляж

• Список релейтед дубляжоров

Непонятно куда

• рецензии
• материалы о фильме

Как ранжировать материалы:

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

Дистрибуция контента

Текущая схема дистрибуции: https://www.figma.com/file/nmAhSUlmajfFBcKgYjWLqB/KP-Distribution-Schemes

Сюда добавлю ссылки на мануалы по подключения платформ.

Targetings

Targetings закрывает:

• Facebook
• VK
• Twitter
• Odnoklassniki

И устраивает Кинорепортёр полностью. Формирует нужного вида посты. Иногда что-то даёт сбой и нужно ручное вмешательство, но это как правило очень редко.

Custom Feeds

Yandex Новости

• Технические требования Яндекс новостей: https://yandex.ru/support/news/export-content/export.html

Yandex Zen

• Линк на аккаунт Кинорепортёр: https://zen.yandex.ru/kinoreporter.ru/
• Похоже на технические требования ZEN: https://yandex.ru/support/zen/website/rss-modify.html
• Плагин для WP: https://ru.wordpress.org/plugins/rss-for-yandex-zen/

Google Новости

Насколько я понимаю, это настраивается стандартным фидом RSS WP.

Pulse Mail.ru

• Нашёл какую-то инструкцию по подключению: https://seopulses.ru/kak-podkluchitsya-k-pulse-mail-ru/

Ручной труд

• Telegram
• Instagram

Делают вручную, «потому что хотят». Свои гайдлайны для этих платформ.

Search

Задача

Сделать фрагмент Search

• desktop
• mobile

Tabs

Задача

Сделать фрагмент Tabs

• desktop
• mobile

Проектная подготовка

Начало работы

• #15

Написание документов

Сущности

• #18
• #19
• #20
• #21
• #22
• #23
• Награды

Акторы

• Редактор

• Контент менеджер

• #24

Newsletter

Задача

Сделать фрагмент Newsletter

• desktop
• mobile

Персона

Персона

Персона это сущность, которая хранит в себе информацию о персоне и её конфигурации.

Персоной в рамках системы является: Актёр, Режиссёр, Постановщик, Сценарист и так далее. Персона создаётся контент менеджером в админке.

Здесь описана модель абстрактной персоны, со всеми необходимыми атрибутами.

Личное

• Основная фотография
• Имя рус/англ (если речь об иностранной персоне) (два поля: русское ФИО и Английское)
• Фамилия рус/англ (если речь об иностранной персоне) (два поля: русское ФИО и Английское)
• Дата рождения
• Место рождения
• Дата смерти

О персоне

Карьера

Список всех должностей персоны.

Награды

Список и изображения (опционально) наград, которые получила персона.

Здесь нужен список наград.

Связанные фильмы (Фильмография)

Список фильмов, связанных с персоной.

Фотогалерея

Стандартная фотогалерея. Какие-то фотографии будут отображаться, какие-то нет. Контент менеджер формирует фотогалерею.

Материалы о персоне

Здесь будут подвязаны материалы о персоне: статьи, новости, рецензии и прочее. Все материалы, в которых упоминалась персона. \

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