reilag Dec 29 2016 at 14:11

Как мы звезды рейтинга дробили

3 min

21K

CSS*HTML*

Tutorial

From sandbox

+17

Comments 20

novoselov Dec 29 2016 at 14:28

Такая визуализация не информативна для пользователя без цифр.
Нельзя навскидку сказать это 60%, 70%, 80% или на какой из двух картинок больше процентов?
Простое разбиение на 10 частей позволяет сразу ответить на оба вопроса, закрашивая каждый сектор добавляем 10%

-8

m1n7 Dec 29 2016 at 16:49

И считать сектора? На экране телефона? На разбитом? Во время ходьбы?

-1

Apathetic Dec 30 2016 at 00:17

А чего вы остановились? Продолжайте:
Ходьбы по канату? Будучи одноногим? Под градом пуль? А внизу раскаленная лава? И метеорит вот-вот уже?

Gor40 Feb 1 2017 at 13:38

Водку? Утром? Теплую? Из мыльниц? Конечно…
(с) не помню кто

Antonto Dec 29 2016 at 15:21

Вот за нелинейную заливку прям спасибо вам!

Loki3000 Dec 29 2016 at 15:48

Для нелинейной модели мы взяли синусоиду. Она как раз отлично описывает плавное начало и окончание роста, и быстрый рост в средине.

Вроде бы синусоида как раз обеспечивает быстрый рост/спад и плавную середину. Да и из контекста повествования вытекает именно такое поведение.

reilag Dec 29 2016 at 16:51

Ой, запутался :)
Спасибо большое, поправил.

YaMishar Dec 29 2016 at 17:32

Мне, как пользователю, достаточно было бы шага 0.1. А то и 0.2. Более мелкий шаг приведёт к замыливанию.
А тут имхо — гораздо быстрее и проще вывести картинки. 50-100 картинок в PNG, а наодной странице скорее 20-30.
Или может я не прав? Я не веб программист, потому был бы благодарен за комментарии.

reilag Dec 29 2016 at 17:37

Но в целом, шага в 0.1 вполне хватает для того что бы «прикинуть» разницу в рейтинге.
Но проще не будет, ведь все эти 50-100 картинок нужно прорисовать и вывести соответствующую, предварительно округлив до нашего шага.

К тому же, у нас нет картинок для иконок :)

UFO just landed and posted this here

dom1n1k Dec 29 2016 at 23:17

Если хотите оптимизироваться и сэкономить несколько наносекунд — арксинус можно заменить на smoothstep. Форма графика там практически одинаковая.

dom1n1k Dec 29 2016 at 23:33

А хотя нет, вам же его ещё на 90 градусов разворачивать нужно — это убьет всю оптимизацию.

reilag Dec 30 2016 at 02:37

На таких небольших объемах, вообще не вижу смысла.
Вот если бы мы эти звездочки тысячами рендерили… тогда бы был смысл :)

dryja Dec 30 2016 at 11:35

А вот вопрос на тему рейтинга: как заставить его появиться в сниппетах поисковиков? Микроразметка есть, все валидируется в валидаторах гугла и яндекса, но рейтинг в сниппетах не отображает.
Техподдержка яндекса говорит «эта фича тестируется, так что мы ничего не гарантируем», а техподдержка гугла вообще говорит «ничего не гарантируем, у нас супер-пупер система модерации, мы сами не знаем, как она работает».

reilag Dec 30 2016 at 11:41

Согласен. Это еще та проблема. Мы так-же с этим стараемся бороться, но увы…
Даже встречали стайты, когда на них вообще нет реальных рейтингов или отзывов, а простая микроразметка, в которой указано 5. Гугл это отобразил.

А наш проект так ни одного снипета и не получил в выдаче гугла.
Мы используем JSON микроразметку. Возможно с этом и проблема?

dryja Dec 30 2016 at 11:48

Да хрен его знает. В мануалах того же яндекса написано, мол используйте микроразметку schema.org и все будет, и тот же яндекс отвечает «мы ничего не обещаем, извиняйте».
Хотя да, я проверял в валидаторах сайты, сниппеты которых отображаются с рейтингом, так там ошибок куча, валидаторы ругаются матом. В общем, странно это все.

dazed Dec 30 2016 at 14:30

Попробуйте через HTML код:

<div id="block_rating" itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<meta itemprop="bestRating" content="10">
<meta itemprop="ratingValue" content="7.5">
  <!-- Ваша отображаемая кнопка -->
</div>

Если, что у яндекса или на schema.org можно почитать.

reilag Dec 30 2016 at 17:54

А чем JSON-LD может не устраивать Google и Yandex, который входит в спецификацию schema.org?

dazed Jan 1 2017 at 23:56

Для Google думаю вполне устраивает, т.к. Вы сами написали, что у них в выдаче эта разметка работает. (Google в инновациях более прогрессивный чем Яндекс)
А вот у Яндекса, может это и работает, но кривовато и с нюансами. Плюс, у них на help странице указаны примеры с HTML разметкой. Возможно упор делают на него, поэтому если действительно важны звездочки в яндекс выдаче, то попробуйте этот вариант, что я порекомендовал выше.

Так же, учитывайте, что яндекс в таких вещах работает с задержкой от 2 недель и выше. Это проявляется во многих вещах, к примеру при добавлении нового сайта, при 301 редиректе на новый сайт итп.

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

vopper Jul 6 2017 at 12:45

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

Я же считаю, что для оценки чего либо нужно ввести трех бальную систему.
мне как пользователю ставящему оценку проще, 1 не понравилось приложение не решает моих проблем или решает проблемы, но через такой ад, что лучше об этом не думать.
2 приложение решает мои проблемы, но есть огрехи, которые мне не нравятся, но при этом он мне не мешает
ну и 3 люблюобожаю, увеличился ~~чле..~~, выросла грудь, стал ввести правильный образ жизни...

Это работает только в тех случаях, где спрашивают у масс людей. Но приэтом я бы не хотел, чтобы блогер, который ведет обзоры машин/книг/телефонов, пользовался трехбальной системой, он человек, который разбирается и для него как раз пятибальная(или выше) будет в самый раз.

Show the best of all time