15 заметок с меткой интерактивный сервис

Калькулятор вероятности

Готовые варианты задачи:

Парадокс дней рожденияОн же для трёх человекОдно число на двух кубиках4 чёрных подряд в рулетке5 / 30 одного знака зодиака

Объектов в группе

Из них с одинаковыми параметрами
или более

Различных комбинаций параметров

Количество опытов (точность)
 × 100

Рассчитать вероятность

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

Калькулятор считает не строго по формулам, а базируется на случайных числах.

Калькулятор плохо отслеживает критические случаи. Например, такая задача: с какой вероятностью в классе из 36 человек найдётся 4 или более учеников одного знака зодиака? Очевидно, не 100%, потому что существует «идеальное» распределение, когда на каждый знак зодиака придётся ровно по три ученика. Но вероятность такой ситуации ничтожно мала, и она может не выпасть в калькуляторе даже при 1 млн опытов. Поэтому калькулятор показывает 100%.

Калькулятор стоимости поездки

автовозов.рф/расчет-онлайн

Калькулятор нужен для того, чтобы человек прикинул, сколько будет стоить поездка из точки А в точку Б. При подсчёте учитывается марка автомобиля, количество грузчиков, время в пути, а также через какие тарифные зоны Москвы или Подмосковья проходит маршрут.

Этапы работы калькулятора

  • Главные поля — откуда и куда, а справа — карта с тарифными зонамиГлавные поля — откуда и куда, а справа — карта с тарифными зонами

Повышение доверия

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

Инструменты для проверки адаптивного сайта

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

Проверить

Два экрана (или больше)

Во время разработки сайтов с адаптивной вёрсткой мне очень помогает наличие двух мониторов. На одном из них я пишу код, а на другом открыто 2-3 окна браузера, уменьшенных до «мобильного» размера. Чем больше физических экранов, тем лучше.

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

Web Developer Toolbar

Удобный инструмент: плагин Web Developer Toolbar для Firefox. Там есть кнопочка Resize, где можно задать список своих любимых разрешений, а затем изменять размер браузера одним кликом. В этом же окошке относительно недавно появился пункт Wiew Responsive Layouts, по нажатию на который откроется демонстрация сайта в самых популярных мобильных разрешениях:

Wiew Responsive Layouts — Посмотреть адаптивные макетыWiew Responsive Layouts — Посмотреть адаптивные макеты

Под какую ширину верстать

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

Размер окна браузера

Как правило, показанные размеры будут отличаться от реального разрешения в пикселях, которое указано в спецификации устройства. Смартфоны обычно показывают 800×480 пикселей, планшеты — 1280×800.

Таким образом, нам важны только 3 ключевых мобильных размера: 480, 800 или 1280 точек в ширину. Высота не так приципиальна при вёрстке, тут только один совет: выпадающее меню удобнее, если оно умещается на экране целиком.

PageSpeed Insights

Поисковые системы учитывают поведенческий фактор: от удобства сайта на телефоне или планшете напрямую зависит его положение в выдаче. Инструмент Гугла PageSpeed Insights рассматривает мобильную версию отдельно от основной, предъявляя к ней особые требования. Если выполнить все требования, оценка сайта повысится. Это нелегко сделать, но результат того стоит!

Выбор персонажа

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

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

Кажется, это идеальные условия для создания онлайн-сервиса:

Онлайн-сервис выбора персонажа написан «на коленке» при помощи jquery, php и mysql. Все запросы идут по ajax. Работает на любых устройствах, где есть интернет. Кате осталось только разместить ссылку вКонтакте — и на следующий день все уже выбрали свои роли.

Да, я был в роли Джека Воробья :) Фотки выложу попозже :)

Пара слов о таблицах проверки зрения

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

Возьмём первую попавшуюся таблицу по запросу в Гугле. На ней не только неправильно нарисованы буквы, но даже в правом столбце допущены глупые ошибки:

Неправильная таблицаНеправильная таблица

Буквы в настоящей таблице должны быть определённой формы, а штрихи — постоянной толщины.

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

Именно этому единичному расстоянию (x) равны толщина штрихов и промежутки между этими штрихами:

Буква Б из классической таблицыБуква Б из классической таблицы

Все буквы — квадратные. Штрихи одинаковой толщины, в 5 раз меньшей, чем высота (или ширина) буквы. Поэтому некорректно использовать какой-то стандартный шрифт!

Правильно построенные таблицы и больше теории — на странице сервиса.

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

Расчёт маршрута (API Яндекс.Карт)

Доделал сервис расчёта маршрутов для сайта «МК-Лидер» (с помощью API Яндекс.Карт). Задача была непростая: внутри МКАД одни расценки, за МКАД — другие. Например, для сквозного маршрута через МКАД из Зеленограда до Красногорска нужно рассчитать 5 участков:

1) выезд от базы до Зеленограда,
2) Зеленоград — МКАД,
3) кусочек по МКАДу,
4) МКАД — Красногорск,
5) возврат из Красногорска на базу.

Кроме путей по Москве (внутри МКАД) есть маршруты сквозные, из Москвы в Московскую область (или наоборот), а также только по МО:

Маршрут через МКАДМаршрут из Москвы в МОМаршрут по МО

▼ Читать дальше

Таблица Менделеева

Не так давно изменилась привычная форма таблицы Менделеева. Новая принятая форма выглядит так:

Интерактивная таблица МенделееваИнтерактивная таблица Менделеева

Искомые элементы подсвечиваются при вводе. Можно искать по названию (или его части), обозначению, атомной массе — короче говоря, по любому параметру из таблицы.

Посмотреть сервис в работе: Таблица Менделеева на xumuk.ru.

▼ Читать дальше

Сервис ЕГЭ для XuMuK.ru

Тесты по ЕГЭ в форме привычных бланков:

Автопереключение: ответили на 13-й вопрос, сразу включается 14-йАвтопереключение: ответили на 13-й вопрос, сразу включается 14-й

▼ Читать дальше

Поиск законов для «Правотеки»

Небольшой сервис поиска законов и статей в режиме реального времени для сайта «Правотеки»:

Всего 3 клика мышкой — и нужный закон перед вамиВсего 3 клика мышкой — и нужный закон перед вами

Калькуляторы услуг для «Гудвила»

В каждом разделе сайта компании «Гудвил», где имело смысл делать калькулятор, расположился соответствующий значок:

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

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

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

▼ Читать дальше

Гальванопара для XuMuK.ru

ГальванопараГальванопара

Оригинал сервиса на сайте xumuk.ru:
Определение полярности электродов и ЭДС гальванического элемента.

Конвертер величин для XuMuK.ru

В русском интернете можно найти 2-3 приличных конвертера величин. Теперь появился ещё один сервис, в стиле сайта XuMuK.ru:

Лошадиные силы переводим в киловаттыЛошадиные силы переводим в киловатты

Тестируем: Перевод физических величин на xumuk.ru.

▼ Читать дальше

Строение атома для XuMuK.ru

Чтобы увидеть красоту, откройте полноэкранную версию, а потом подвиньте красную букву Е до нужного уровня, или покрутите колёсиком, или введите название элемента:

Строение атома: кликните для просмотра полной версии на флешеСтроение атома: кликните для просмотра полной версии на флеше

▼ Читать дальше

Химический редактор

Смотрим (на xumuk.ru):
редактор химических формул и описание сервиса.

Химический редактор (включена сетка)Химический редактор (включена сетка)

▼ Читать дальше

Краш-тест

Данная флешка показывает, что произойдёт с непристёгнутым ребёнком при аварии:

А вот и полноэкранная версия краш-теста.

Иван ТитовИван Титов
Фрилансер, музыкант, физтех по жизни, семьянин, философ.
© 2004...2017