По вопросам разработки сервисов с использованием API Яндекс.Карт обращайтесь ко мне через раздел Контакты.
Исходные условия: есть карта глубин, созданная в конструкторе Яндекс карт. Точек (меток) очень много, из-за этого карта тормозит. Задача: объединить точки в кластеры, чтобы уменьшить тормоза и улучшить внешний вид.
Для начала проверяем возможность создания кластера прямо в конструкторе, чтобы обойтись малой кровью. Такой вопрос уже возникал у пользователей, и похоже, что такой возможности всё ещё нет:
Значит, нужно переделывать карту с нуля, взяв из конструктора только исходные данные: координаты меток, названия деревень, информацию о почве.
▼ Читать дальше
Многие люди колдуют над кубиком перед тем, как его бросить. Что-то шепчут, загадывают, чтобы выпала заветная шестёрка ⚅. Данный сервис уравнивает шансы всех игроков в плане везения или нечестных бросков. Чтобы начать, вы можете просто кликнуть по кубику или по кнопке «Бросить кубик». Чтобы начать новую игру — обновите страницу.
Если вы играете вдвоём / втроём или более, правильнее всего сделать так: каждому игроку открыть данный сайт на своём телефоне, чтобы у каждого был свой кубик. Иначе может получиться так, что все ваши ⚅-ки достанутся соседу )
Если есть вопросы — читайте далее, почему данный алгоритм назван «Честным», и насколько он вам подходит.
Задача:рассчитать стоимость доставки товара по городу, учитывая различные тарифные зоны. Выбрать и сгруппировать заказы, которые удобно доставить курьером за одну поездку.
Данный модуль создан на движке Яндекс.Карт и предназначается для CRM-системы службы доставки. На вход поступают данные о всех новых (ещё не обработанных) заказах: номер заказа, желаемое время и адрес доставки. На выходе получается таблица, в которой перечислены заказы, расстояние от офиса, стоимость доставки в зависимости от тарифной зоны. Если адрес находится за пределами города, то показан километраж за МКАДом, а стоимость увеличивается с учётом цены за километр.
Сервис API Яндекс.Карт рассчитывает точки не мгновенно. На обработку и просчёт 10 точек уходит примерно 1-2 секунды. Поэтому пункты просчитываются по одному, и в это время таблица недоступна. После того, как все точки рассчитаны, менеджеру можно приступать к обработке заказов.
Здесь реализована синхронизация карты и таблицы. Заказы можно выбирать как на карте, так и в самой таблице. Кнопка «Только выделенные» оставляет на карте только выделенные заказы — так удобнее оценить, успеет ли курьер объехать все эти точки за один день.
В будущем данный скрипт будет дорабатываться. Например, можно добавить оценку по времени для выбранных заказов с учётом поездки курьера на машине или на общественном транспорте.
Стандартное поведение браузеров при клике на якорную ссылку может сбить человека с толку. Потому что страница скроллится мгновенно, и человек не понимает, в какое место страницы он попал (вверх или вниз), да и вообще — остался ли он на данной странице, или перешёл на другую.
Чтобы это исправить, будем использовать плавную прокрутку на javascript или jquery. Плавная прокрутка до элемента ясно даёт понять, что мы остались на том же сайте, и куда именно прокрутилась страница.
Обычная функция типа scrollTo делает прокрутку, но это было бы слишком грубо и не учитывало все нюансы. А вот что требуется от правильного скрипта:
1) отменить стандартные действия браузера при клике по таким ссылкам;2) определить расстояние до элемента, к которому нужно прокрутить;3) плавно, то есть, без тормозов прокрутить страницу на это расстояние;4) изменить window.location.hash — часть адреса страницы после решётки #.
Оголите части тела девушки на фотографии, спрятав лишние детали одежды при помощи пузырей. Потренируйтесь на готовых девушках или загрузите свои изображения.
• Создать пузырь: клик на свободном месте фотографии.• Изменить размер: колесо мыши или жест двумя пальцами.• Удалить: двойной клик по пузырю.
Загруженные фото редактируются только у вас в браузере, на сайт не передаются и не сохраняются. Результат можно скачать себе на компьютер или телефон.
Техника BUBBLING, или по-русски пузыринг, была придумана неким монахом, которому религия запретила смотреть на обнажённых женщин. Но это не точно 😃
Секрет прост: берётся фото в купальнике, далее закрашиваются все участки тела в одежде, а голые участки — остаются. При просмотре таких фотографий фантазия творит чудеса, и всё самое интересное дорисовывается нашим воображением.
На подходе... Заходите позже 😃
На одном из сайтов нужно было реализовать прокрутку (скролл) страницы наверх с плавной анимацией. На jquery это делается одной командой:
$("html,body").animate({scrollTop:0},500);
А на чистом яваскрипте немного сложнее:
var t;function scrolltop() {var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);if(top>0) {window.scrollTo(0,Math.floor(top/1.5));t = setTimeout("scrolltop()",30);} else {clearTimeout(t);}return false;}
Переменная top равна текущему расстоянию прокрутки страницы в пикселях. Каждые 30 мс эта величина уменьшается в 1,5 раза, в итоге плавно достигает нуля. Это имитация свойства ease-out в CSS анимациях.
Если вам нужно скроллить страницу наверх линейно, без ускорения, то пишем как-то так:
window.scrollTo(0,-20);
Тогда страница будет скроллиться наверх со скоростью 20 пикселей в 30 мс.
Чем обусловлен период в 30 мс? Кофмортная частота обновления экрана — примерно 30 кадров в секунду, значит, продолжительность каждого кадра — 30 мс. Для идеальной гладкости можно сделать 60 кадров в секунду, и тогда таймауты должны быть примерно по 15 мс. Но это может подтромаживать на слабых устройствах.
Готовые варианты задачи:
Объектов в группе
Из них с одинаковыми параметрами или более
Различных комбинаций параметров
Количество опытов (точность) × 100
Если нужно повысить точность результатов, увеличьте количество опытов. При этом скрипт будет работать дольше.
Калькулятор считает не строго по формулам, а базируется на случайных числах.
Калькулятор плохо отслеживает критические случаи. Например, такая задача: с какой вероятностью в классе из 36 человек найдётся 4 или более учеников одного знака зодиака? Очевидно, не 100%, потому что существует «идеальное» распределение, когда на каждый знак зодиака придётся ровно по три ученика. Но вероятность такой ситуации ничтожно мала, и она может не выпасть в калькуляторе даже при 1 млн опытов. Поэтому калькулятор показывает 100%.
Данная статья рассматривает вопрос с технической точки зрения и предназначена для веб-мастеров, а также спаммеров тех, кто хочет оставить комментарии с разных аккаунтов, но с одного устройства.
Часть параметров передаёт браузер при обращении к серверу, а другую часть можно определить с помощью яваскрипта и передать аяксом.
Айпи можно скрыть с помощью специальных сервисов или плагинов. Про остальное обычно забывают. Однако этих данных достаточно, чтобы с большой вероятностью вычислить спам-комментарии на одном и том же сайте (или на сетке своих сайтов, или в сообществе сайтов одной тематики).
Калькулятор нужен для того, чтобы человек прикинул, сколько будет стоить поездка из точки А в точку Б. При подсчёте учитывается марка автомобиля, количество грузчиков, время в пути, а также через какие тарифные зоны Москвы или Подмосковья проходит маршрут.
Показательно, что многие посетители вводят только адрес старта и финиша. Если их устраивает цена, они не доводят заказ до конца, а сразу же звонят. Уточнив детали у менеджера, они радуются, что сумма поездки совпадает с цифрами из калькулятора. Таким образом, калькулятор работает на повышение конверсии и доверия.
bbondarenko.ru
Новая версия сайта Братьев Бондаренко выгодно отличается от предыдущей. Теперь на первом плане — фотографии, музыка, видео. Полезное пространство экрана используется на полную.
Сайт занимает всю ширину и высоту на любом мониторе или планшете (на смартфоне поддерживается только горизонтальная ориентация). Пункты меню переключаются без перезагрузки страницы.
Фишка сайта — постоянный плеер в нижней части:
Замечу, что плеер включается только по желанию пользователя, а песня не прерывается при переходе в другой раздел сайта. Это классно: запустил красивую музыку и спокойно изучаешь сайт. А если открыть видео, то плеер ставится на паузу.
Возникла задача проследить, на какие ссылки кликает пользователь на сайте. С использованием jquery клиентский скрипт получился очень простым: вешаем событие на всю страницу, если кликнули по ссылке — отправляем аяксом все нужные параметры (ссылка, её координаты на странице, браузер и т.д.)
Чтобы сработало обычное действие ссылки (и события от других счётчиков), функция возвращает true, не дожидаясь успешного ответа от сервера.
//подключаем jqueryvar vizit_start = Math.round(new Date().getTime() / 1000);//запоминаем время захода на страницу (timestamp в секундах)$('body').click(function(e) {var a_click=e.target;//a_click - объект, по которому кликнулиif($(a_click).is('a')) {//если это ссылка, то отправляем данныеvar a_pos=$(a_click).position();//теперь переменная a_pos хранит координаты объектаvar vizit_sec = Math.round(new Date().getTime() / 1000) - vizit_start;//время визита = разница во времени$.ajax({//отправка данных аяксомurl:"http://site.ru/sledilka.php",//куда отправляем данныеtype:"POST",//методом POSTdata:{page:location.href,//адрес текущей страницыwidth:$("html").width(),//ширина страницы (контента)height:$("html").height(),//высота страницы (контента)left:a_pos.left,//координата ссылки Xtop:a_pos.top,//координата ссылки Yurl:$(a_click).attr('href'),//куда ведёт ссылкаtxt:$(a_click).text(),//текст ссылкиbrowser:navigator.userAgent,//инфа о браузере и ОСvizit:vizit_sec//время визита в секундах},dataType: "text"//данные представлены как текст});}return true;});
Скачать скрипт
Серверная часть принимает данные POST-ом (например, время визита: $_POST["vizit"]) и записывает в базу. Визуализация этих данных выходит за рамки этой заметки. Например, можно нарисовать карту кликов, как в Яндекс.Метрике. Но даже по текстовым таблицам уже можно сделать выводы.
Тест показывает, как выглядит адаптивный сайт на различных мобильных устройствах. Для проверки ваш сайт должен поддерживать загрузку и работу во фреймах. Для удобства просмотра переведите браузер в полноэкранный режим.
Адаптивный сайт автоматически подстраивается под ширину устройства. При этом блоки сайта могут скрываться или видоизменяться. Например, на компьютере логотип и меню сайта располагаются слева направо, а на телефоне — сверху вниз.
Если у сайта есть мобильная версия, то при загрузке такого сайта с мобильного телефона, вас перенаправят на другой адрес: site.ru → m.site.ru. Мобильная версия — это отдельный сайт с другим адресом.
Если же у сайта нет мобильной версии, адрес сайта не изменится при загрузке с телефона. На телефон будут загружаться те же самые данные, что и на компьютер. Чаще всего это неудобно для пользователя, потому что экран телефона меньше в несколько раз.
Данная проблема решается двумя способами: добавить мобильную версию m.site.ru или НЕ делать отдельный сайт, но добавить вашему основному сайту адаптивности. Это специальные стили и скрипты, которые включаются, если ширина экрана слишком мала: например, спрятать меню, увеличить шрифт, вместо крупных изображений показать маленькие и т.п.
Строго говоря, нельзя сравнивать адаптивный сайт и мобильную версию сайта. По сути адаптивный сайт = полная версия + версия для планшетов + версия для телефонов (мобильная), и всё это в одном флаконе. То есть, одно понятие заключено в другом.
Адаптивный сайт совмещает в себе и обычный (для PC), и мобильный (для телефонов), и несколько промежуточных вариантов (крупные телефоны, планшеты, телевизоры и т.д.). Главное преимущество адаптивного сайта — он хорошо выглядит на любой ширине экрана.
Реальное количество пикселей на современных гаджетах, как правило, очень велико, а сайты не рассчитаны на такую огромную ширину. Поэтому мобильные устройства с экранами повышенной чёткости открывают сайты, приведя их к некоему виртуальному стандарту. Чтобы узнать эти цифры у себя, нажмите кнопку, открыв эту страницу с телефона или планшета:
На устройствах с ретино-подобными дисплеями показанные размеры будут отличаться от реального разрешения в пикселях, которое указано в спецификации устройства. Смартфоны покажут 320×480 или 480×800 пикселей, планшеты — 1280×800.
Таким образом, для разработчиков важны примерно 3 ключевых размера: 320, 480 и 800 точек в ширину. 1280 — это уже размер обычной PC-версии. Если остались вопросы, читайте подробнее в заметке про адаптивный дизайн.
Встала задача отсортировать таблицу на яваскрипте по любому столбику. Известный всем плагин tablesorter у меня не заработал, и я решил, что быстрее и удобнее будет написать свой скрипт. Вот, что получилось через час:
Демо
Скрипт получился из 20 строк, 1 кб (готовый tablesorter весит 13 кб и дольше «усваивается»). Ещё одно отличие: подготовительные операции для сортировки происходят по клику; это имеет смысл, потому что сортировка нужна не всем.
Первым делом нужно присвоить идентификаторы каждой строчке таблицы. Это лучше сделать сразу на сервере при выводе таблицы:
<tr id="z_1" ><td> ... </td></tr><tr id="z_2" ><td> ... </td></tr>...
Теперь идентификатор будет привязан к строке с данными, и если её переставить в другое место, ничего не перепутается.
Яндекс запустил новый конструктор карт, и теперь собственная карта с пометками вставляется всего одной строчкой скрипта. Это удобно для большинства пользователей, но в новом коде встраивания нет координат объектов.
Выкладываю свой скрипт, который выводит координаты полигонов, центра карты и значение зума.
Клик по карте включает режим рисования полигона, следующим кликом ставится первая точка полигона (и так далее). После завершения (клик по точке → завершить) можно таким же образом рисовать следующий полигон. По нажатию кнопки внизу отобразятся координаты всех полигонов (в порядке рисования), потом зум и центр карты.
(Это обучающая статья. Если вы хотите заказать карту, вам сюда: plunix.ru/yandeks-ili-gugl-karta...)
В предыдущей заметке я рассказал, как захватить большое изображение (карту) по частям при помощи скриншотов и Фотошопа. Однако если есть средства для управления картой (API), то можно лёгким движением получить карту любого размера:
Зачем вообще такая большая карта? Неужели нельзя проматывать её на экране, или купить карту нужной области, повесить на стенку и втыкать в неё флажки?
С помощью инструментов Яндекс.Карт на карте можно расположить «умные» метки (например, разноцветные), маршруты и любую другую информацию. Эти операции можно выполнить вручную или автоматически. Потом карта с информацией печатается, вешается на стенку: это удобно, потому что видно сразу всю карту, а не только её часть. После распечатывания остаётся возможность порисовать на готовой карте.
Или вот ещё идея: распечатать карту с крестиками, а в них воткнуть настоящие флажки. Если объектов сотня, экономится немало времени.
Нам нужно:1) отобразить карту необходимого масштаба и размера в браузере,2) сохранить всю страницу в виде картинки (в том числе фрагменты, выходящие за область экрана).
Доделал сервис расчёта маршрутов для сайта «МК-Лидер» (с помощью API Яндекс.Карт). Задача была непростая: внутри МКАД одни расценки, за МКАД — другие. Например, для сквозного маршрута через МКАД из Зеленограда до Красногорска нужно рассчитать 5 участков:
1) выезд от базы до Зеленограда,2) Зеленоград — МКАД,3) кусочек по МКАДу,4) МКАД — Красногорск,5) возврат из Красногорска на базу.
Кроме путей по Москве (внутри МКАД) есть маршруты сквозные, из Москвы в Московскую область (или наоборот), а также только по МО:
ekofriend.com
На сайте можно заказать красивую экологически чистую упаковку (пакеты, корзиночки, коробочки). Дизайн хорошо передаёт эко-направленность:
Мною выполнены вёрстка, дорисовка недостающих элементов и программирование.
cs-fashion.ru
Завершил разработку миниоптового интернет-магазина cs-fashion.ru:
По различным причинам эта работа затянулась почти на год. Восхищаюсь бесконечным терпением заказчицы 😃
Недавно изменилась форма таблицы Менделеева, привычная нам ещё со школы. Новая форма имеет 18 ячеек в ширину вместо 10, она более красивая и величественная 😃
По этому случаю для сайта xumuk.ru был сделан новый адаптивный сервис:
Искомые элементы подсвечиваются при вводе. Можно искать по названию или его части, обозначению, атомной массе — короче говоря, по любому параметру из таблицы.
Посмотреть сервис в работе: Таблица Менделеева на xumuk.ru.
Тесты по ЕГЭ в форме привычных бланков:
Небольшой сервис поиска законов и статей в режиме реального времени для сайта «Правотеки»:
vodalux.ru
На сайте представлены основные подразделения компании. Каждая кнопка слева ведёт либо на галерею, либо на нужный адрес. Галерея — это «разбросанные» фотки, которые увеличиваются при наведении.
Весь сайт — это одна страница (разделы переключаются скриптами без перезагрузки). Здесь такой ход оправдан тем, что информации на сайте почти нет.
© Дизайн не мой (я просто разверстал и использовал яву-скрипт 😃
В каждом разделе сайта компании «Гудвил», где имело смысл делать калькулятор, расположился соответствующий значок:
Допустим, вы заинтересовались услугами для ИП с работниками и читаете этот раздел сайта. Тогда откроется нужный калькулятор с нужными вам функциями, и не нужно будет разбираться в каком-то универсальном сервисе с кучей параметров.
Оригинал сервиса на сайте xumuk.ru: Определение полярности электродов и ЭДС гальванического элемента.
В русском интернете можно найти 2-3 приличных конвертера величин. Теперь появился ещё один сервис, в стиле сайта XuMuK.ru:
Тестируем: Перевод физических величин на xumuk.ru.
Иван Титов