Создаeм интерактивный калькулятор для сайта

Создаём интерактивный калькулятор для сайта

В чём разбираемся

1

Находить темы, которые можно представить в формате калькулятора
2

Продумывать формулы расчётов
3

Создавать интерактивные калькуляторы

Лучший материал в СМИ — полезный материал. Календарь праздничных дней наступающего года, расписание ярмарок для дачников, список магазинов, где можно недорого купить всё необходимое к школе, список больниц, где можно донорам сдать кровь... Ограничения фантазии диктует только целевая аудитория.

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

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

Учимся у коллег

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

Расчитываем квартплату

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

Тарифы на вывоз мусора

Губернатор Тюменской области Александр Моор решил провести мусорную реформу. Теперь жители Тюмени будут платить за вывоз мусора не по квадратным метрам, а по количеству человек, прописанных в квартире. Портал 72.ru сделал калькулятор, который помогает рассчитать, сколько тюменцы будут платить за вывоз мусора в сравнении с предыдущими годами.

Калькулятор медиаменеджера

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

Этот калькулятор не даст вам однозначную цифру, не составит за вас бюджет вашего сетевого проекта. Но он даст представление о порядке сумм, которые вам нужно зарабатывать / получать от учредителя, чтобы поддерживать интернет-издание на плаву.

Посчитать бюджет своего медиапроекта

Добавьте сюда инвестиции в покупку движка и дизайна сайта, покупку оборудования и нужного софта, мебель, расходы на кофе и такси. Участники группы «Силамедиа» в «Фейсбуке» совместно создали вот такой документ-шаблон, который может помочь медиаменеджеру составить бюджет проекта.

Эти проекты сделаны с помощью сервиса Ucalc.pro. В нём вы можете создать интерактивный калькулятор для сайта, даже если не умеете программировать. Достаточно вспомнить школьный курс арифметики, добавить немного логики и представить, чего хочет пользователь, — калькулятор готов.

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

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

Как создать интерактивный калькулятор для сайта в сервисе ucalc.pro

Формулируем вопросы

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

После того как вы вошли в аккаунт, попадаете на страницу «Мои проекты». Там отображаются ранее созданные вами калькуляторы, если вы уже пользовались сервисом.

Нажимаем круглую кнопку зелёного цвета со знаком «+». Система предложит собрать проект с нуля либо использовать уже готовый шаблон.

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

Мы будем делать калькулятор с нуля. Для этого вернёмся на страницу «Мои проекты», нажмём зелёную кнопку со значком «+», выберем «Собрать самостоятельно». Слева в открывшемся окне расположен набор элементов для создания калькулятора, справа — рабочий стол. В верхней части рабочего пространства — кнопки «Отменить» и «Вернуть» (действие), режим предпросмотра и кнопка сохранения проекта. Кнопки «Дизайн» и «Формула» переключают режимы, но об этом расскажем позже, а пока работаем в режиме дизайна.

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

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

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

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

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

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

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

Обратите внимание, что расположение каждого элемента, в том числе «Результат», можно изменить в любое время. А в режиме редактирования всегда можно настроить элемент или удалить.

Вспоминаем математику

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

Возвращаемся к переключателю «Дизайн/Формула» в левом верхнем углу рабочего стола и нажимаем кнопку «Формула». Справа мы видим элементы калькулятора — каждый из них получил свою переменную, обозначенную латинской буквой. Слева на чёрном фоне — поле, в котором нужно написать формулу, чтобы система понимала, как ей считать итоговую сумму. Придется вспомнить уроки математики.

Результат по умолчанию обозначен как R1. Поняв, как устроен Ucalc.pro, вы сможете при необходимости прописывать несколько результатов (R2, R3 и так далее). Кликнув левой кнопкой мыши в окне формулы, вызовите список арифметических знаков.

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

Мы собирались посчитать, сколько суток в году пользователи тратят на дорогу до работы и обратно. Пишем формулу, она будет выглядеть так: E х G x 52 : 24, где E — это первый параметр (количество дней в неделю, когда человек ездит на работу), G — второй (время пользователя в пути), 52 — среднее количество недель в году, а 24 — количество часов в сутках.

Теперь проверим, работает ли наш калькулятор. Нажимаем на кнопку «Дизайн» и возвращаемся к рабочему столу. Обратите внимание на элемент «Результат»: по умолчанию там стоит дробное число и единица измерения рубль. Давайте настроим этот параметр.

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

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

Работает!

Включаем логику

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

Создаём новый проект, добавляем элементы: «Текст», «Список», «Флажок», «Галочка», «Числовое поле». Вводим параметры пиццы: размер, название, добавки, количество порций добавки.

Посмотрим, как выглядит формула такого проекта.

В простую формулу добавляем условие: если доставка (параметр F) срочная, то к общей сумме прибавляется 200 рублей. Давайте разберёмся, почему срочность обозначена цифрой 1. Не закрывая окно формулы, вернёмся к списку элементов калькулятора. Мы видим, что у каждой позиции есть свое значение — цифры справа. Например, маленькая пицца стоит 150 рублей.

Листаем таблицу данных до элемента F (срочная/несрочная доставка). Как видите, ответ «Да» обозначен единицей, ответ «Нет» — нулем. Таким образом, если пользователь хочет получить свой заказ быстрее, стоимость заказа автоматически увеличится на 200 рублей.

Работа с большим количеством параметров — творческий процесс: формулу можно оптимизировать, получать нужный результат разными способами. Например, в случае с доставкой формула может быть проще: сразу указываем стоимость доставки в параметрах ответа на вопрос, а вместо функции «если» просим систему прибавить параметр F к общей сумме.

Проверяем, правильно ли считает наш калькулятор, и переходим к оформлению внешнего вида.

Добавляем красок

Вернёмся в режим дизайна. В центре страницы расположены кнопки «Цвет фона», «Цветовые схемы», «Тема оформления».

Первая кнопка вызывает палитру цветов подложки. Вторая — определяет цвет мелких деталей. Третья — позволяет выбрать шаблон оформления.

Чтобы проект выглядел симпатичнее, добавим элемент «Картинка»: перетаскиваем его в рабочее пространство, зажав левую кнопку мыши, и загружаем нужное изображение с компьютера.

Сервис не поддерживает загрузку картинки по ссылке.

Итак, калькулятор готов. Осталось получить от пользователя то, ради чего мы затевали проект: нам нужна форма обратной связи. Её проще всего сделать с помощью полей «Текст».

Обратите внимание на кнопку действия «Заказать». Если навести на неё курсор, появляется панель инструментов, в которой можно: выбрать цвет фона и текста, настроить отправку сообщения пользователям по клику на кнопке, вывести на экран форму согласия на обработку персональных данных, активировать антиспам-систему.

Не забудьте указать назначение кнопки. Выбираем в настройках кнопки вкладку «Действие». Ещё к кнопке можно привязать счётчики Google Analytics и Яндекс.Метрики.

Публикуем проект

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

Перед тем как калькулятор выйдет в свет, проверяем, корректно ли он отображается на различных устройствах. Нажимаем кнопку «Предпросмотр» в правом верхнем углу. Если всё устраивает, нажимаем кнопку «Сохранить».

Во всплывающем окне появится эмбед-код для экспорта проекта. Копируем код и вставляем на страницу сайта или блога. Наш калькулятор готов! Не забудьте продумать для него промо.

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

Учимся у коллег

Помогаем пользователям сориентироваться
в ценах и калориях.

Калькулятор свадебного празднества

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

Калькулятор калорий

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

Рацион питания собак

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

Сколько вы можете тратить в день?

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

Калькулятор углеродного следа

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

Калькулятор медианавыков

Ежедневная работа журналиста состоит из конкретных действий. Не абстрактных «поиска и верификации информации», а из реальных «позвонить», «узнать email», «достучаться», «записать комментарий на диктофон», «сформулировать вопрос». Критичные для работы современного автора действия собраны в тест-калькулятор.

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

Если вы просто «знаете, как это делается», но на практике не применяете, галку лучше не ставить.

Пройти тест журналистских навыков