Наша история с поселком Становлянка началась в далеком 2010 году. За это время мы запустили две версии сайта, последняя из них славно работает сейчас и справляется со своими ключевыми задачами. На днях мы загрузили третью очередь в интерактивную карту поселка и решили поделиться деталями этого интересного и любимого нами проекта.
Поселок располагается в 30 километрах от Екатеринбурга и занимает обширную площадь. Количество участков на данный момент превышает 800 и большая часть из них уже занята. Категория земель ИЖС. По сути, это целый жилой район с планируемой численностью жителей в 1600 человек. У них свой детский сад, школа, медицинский центр и места для занятия спортом. Проект большой и интересный.
Структура сайта
Сайты коттеджных поселков по структуре имеют набор базовых разделов. К ним относятся:
-
генплан
-
общее описание
-
документация
-
фотогалерея
-
месторасположение
По типам данных и функционалу получается следующее распределение:
-
генплан – интерактивная схема поселка, где можно посмотреть свободные участки и их стоимость
-
общее описание – текстовая страница с общими картинками
-
документация – список файлов в разных форматах для скачивания
-
фотогалерея – список фотографий с возможность просмотра как в галереи
-
месторасположение – карта, показывающая расположение до ближайших более крупных населенных пунктов
Дополнительно можно рассмотреть еще такие:
- Акции и новости
- Статьи - если планируется поисковое продвижение сайта
Почти все разделы содержат в себе стандартный функционал для многих корпоративных сайтов. Особой сложностью отличается лишь один – это интерактивный план. Поэтому о нем расскажем чуть более подробно.
Разработка интерактивного плана поселка
В первой версии сайта, которую делали в десятом году, использовалась модная на тот момент технология flash. Сегодня ей особо уже не пользуются при разработке сайтов, так как есть более легкие и гибкие инструменты в javascript и css. Но раньше достичь определенного анимационного эффекта и интерактива можно было только с флешем.
Во второй версии сайта план поселка создавался через SVG. Было сформировано полотно с подложкой специального фона в форме общей территории, а поверх накладывались элементы в виде участков. Каждый по своим координатам.
У каждого участка был свой набор данных. Это номер, статус, цена и площадь. В зависимости от статуса менялся цвет ячейки на карте.
Чтобы заказчику было легко редактировать список участков, мы интегрировали их в систему управления сайтом. Теперь, он может без посторонней помощи изменять по ним данные, например, поменять статус на "продан" или "забронирован". После сохранения эти обновления сразу отобразятся на генплане для конечных пользователей.
Разметка всего плана осуществлялась один раз. Наши специалисты проводили расчет по координатам и создавали все необходимые участки согласно официальной кадастровой карте. Работа не технологичная, а простая и муторная – высчитал, записал, следующий. И так больше 800 раз. Но эта работа делается единожды и далее ее повторять нет необходимости, а следовательно, и вопрос автоматизации данного процесса не стоял.
Фотогалерея и месторасположение
Для создания этих инструментов мы использовали уже привычные и понятные для многих инструменты.
Для фотографий, помимо деления на категории и отображения списка, добавили увеличение по клику, используя скприт fancybox.
Для месторасположения воспользовались конструктором Яндекс.карты, чтобы визуально выделить зону поселка на карте. Так пользователям удобнее и проще ориентироваться по масштабу и расположению.
Вместо резюме
У данного заказчика, кроме данного поселка, есть еще ряд площадей разного назначения на Урале и в Калининграде. В ассортименте имеется жилая, сельскохозяйственная и коммерческая земля. Поэтому мы не так давно запустили им общий координирующий сайт с каталогом всех объектов загородной недвижимости.
Второй сайт создавали на базе той же платформы что и первый. В итоге получается, что для конечных пользователей отображаются два независимых сайта, а их владелец может редактировать содержание через единый центр управления.
Особенностей в техническом плане у этого сайта нет. Поэтому запустили мы его быстро, но при этом учитывали обязательные современные требования. Например, адаптивность, чтобы сайт удобно было смотреть на смартфонах и планшетах. В итоге получилось просто и со вкусом.