19 заметок с меткой интерактивный сервис
📅 30 марта

Пузыринг или как раздеть девушку

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

Фото для тренировки

Цвет фона Скачать
Reset

Как пользоваться сервисом?

• Создать пузырь: клик на свободном месте фотографии.
• Изменить размер: колесо мыши или жест двумя пальцами.
• Удалить: двойной клик по пузырю.

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

Что такое пузыринг или BUBBLING

Техника BUBBLING, или по-русски пузыринг, была придумана неким монахом, которому религия запретила смотреть на обнажённых женщин. Но это не точно 😃

После пузыринга девушка выглядит полностью голойПосле пузыринга девушка выглядит полностью голой

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

Видео-инструкция

На подходе... Заходите позже 😃

📅 23 марта

Бросить кубик онлайн

Бросить кубик

Многие люди колдуют над кубиком перед тем, как его бросить. Что-то шепчут, загадывают, чтобы выпала заветная шестёрка ⚅. Данный сервис уравнивает шансы всех игроков в плане везения или нечестных бросков. Чтобы начать, вы можете просто кликнуть по кубику или по кнопке «Бросить кубик». Чтобы начать новую игру — обновите страницу.

Если вы играете вдвоём / втроём или более, правильнее всего сделать так: каждому игроку открыть данный сайт на своём телефоне, чтобы у каждого был свой кубик. Иначе может получиться так, что все ваши ⚅-ки достанутся соседу )

Если есть вопросы — читайте далее, почему данный алгоритм назван «Честным», и насколько он вам подходит.

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

📅 4 мая 2017

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

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

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

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

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

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

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

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

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

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

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

📅 5 февраля 2016

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

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

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

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

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

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

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

📅 13 декабря 2015

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

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

Проверить

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

Во время разработки сайтов с адаптивной вёрсткой мне очень помогает наличие двух мониторов. На одном из них я пишу код, а на другом открыто 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 рассматривает мобильную версию отдельно от основной, предъявляя к ней особые требования. Если выполнить все требования, оценка сайта повысится. Это нелегко сделать, но результат того стоит!

📅 29 марта 2014

Проверка адаптивного сайта

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

{adaptiv}

Что такое адаптивный сайт?

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

Чем отличается адаптивный сайт от мобильной версии?

Если у сайта есть мобильная версия, то при загрузке такого сайта с мобильного телефона, вас перенаправят на другой адрес: site.ru → m.site.ru. Мобильная версия — это отдельный сайт с другим адресом.

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

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

Строго говоря, нельзя сравнивать адаптивный сайт и мобильную версию сайта. По сути адаптивный сайт = полная версия + версия для планшетов + версия для телефонов (мобильная), и всё это в одном флаконе. То есть, одно понятие заключено в другом.

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

Почему ширина телефона в данном сервисе такая маленькая?

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

Какой у меня размер окна браузера?

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

Таким образом, для разработчиков важны примерно 3 ключевых размера: 320, 480 и 800 точек в ширину. 1280 — это уже размер обычной PC-версии. Если остались вопросы, читайте подробнее в заметке про адаптивный дизайн.

📅 21 апреля 2013

Определение координат полигонов на Яндекс.Картах

Яндекс запустил новый конструктор карт, и теперь собственная карта с пометками вставляется всего одной строчкой скрипта. Это удобно для большинства пользователей, но в новом коде встраивания нет координат объектов.

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

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

📅 17 декабря 2012

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

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

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

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

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

Я был в роли Джека Воробья )

📅 14 ноября 2012

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

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

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

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

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

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

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

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

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

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

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

📅 14 декабря 2011

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

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

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

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

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

📅 12 октября 2011

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

Недавно изменилась форма таблицы Менделеева, привычная нам ещё со школы. Новая форма имеет 18 ячеек в ширину вместо 10, она более красивая и величественная 😃

По этому случаю для сайта xumuk.ru был сделан новый адаптивный сервис:

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

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

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

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

📅 16 мая 2011

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

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

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

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

📅 13 мая 2011

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

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

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

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

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

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

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

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

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

📅 19 октября 2009

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

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

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

📅 25 сентября 2009

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

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

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

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

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

📅 2 мая 2009

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

Сервис «Электронное строение атома» наглядно показывает, что все вещества состоят из одних и тех же частиц, как из деталей конструктора.

Помните сочетания типа 1s²2s²2p³, которых так боятся школьники? :)

Данный сервис помогает понять, как составляются формулы строения атома, и запомнить принцип заполнения орбиталей.

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

📅 7 декабря 2008

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

Редактор химических формул для сайта xumuk.ru написан за 20 дней на языке actionscript 2. Первая сырая версия была создана за 5 дней, а дальше мы работали над удобством, воплощая совершенно безумные идеи :) Например, автоматическое прицепление и вращение химических связей, разбивку элементов на самостоятельные части, и даже собственный язык разметки для создания новых элементов.

Если у вас установлен flash player, редактор можно посмотреть на сайте xumuk.ru, если у вас есть вопросы — читайте описание сервиса.

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

📅 26 сентября 2007

Краш-тест

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

Иван ТитовИван Титов
Веб-дизайнер,
разработчик
★ Москва
© 2004 – 2019