Разработка сайта для индустриального парка «Краснодар»

Главное о кейсе

Все цели, поставленные заказчиком, выполнены в срок 2 месяца работы

Бизнес-задача и ее решение

Проблема №1
Изначально мы планировали складывать одинаковые большие png-изображения каждого объекта в один контейнер, что должно было добавить работе интерфейса стабильности. Но выяснилось, что браузеры на webkit (Chrome, Safari, Opera) зависают при наличии более 25-ти объектов (у нас 45), а именно, png-изображений размером 2500х1400, даже пустых по 10кб. Что удивительно, помимо Firefox, с этой задачей успешно справлялся Internet Explorer, даже 9-й.
Решение
Написан скрипт, рассчитывающий ширину экрана, и устанавливающий пропорционально уменьшенные изображения с объектами на требуемые координаты.

Объекты расставлены, включаются/выключаются через админку, все работает стабильно. Теперь нужно сделать выделение объектов полигонами при наведении. Их 45, и это не жилые комплексы с прямоугольными зданиями. У нас детализированные объекты с большим количеством дуг и граней. Времени нет, и мы принимаем решение написать конструктор для создания полигонов курсором мыши. Он получился не идеальным, но сократил нам время реализации этой задачи раз в 10. Теперь мы гордимся получившимися выделяемыми областями и готовы постигать новые высоты.

Дизайн сайта предусматривает наличие диагональных линий, разделяющих экраны. Современные технологии позволяют использование векторной графики для реализации подобных решений. Но не тут-то было. Если Firefox, Safari и Internet Explorer строили идеально прямые линии, то Chrome и Opera строил «рваные» диагонали, особенно, если отключено сглаживание шрифтов ClearType, в этом случае мы вообще наблюдали пиксель-арт.

Проблема №2

Современные браузеры Google Chrome и Opera не могут рендерить идеальные наклонные линии средствами векторной графики. При этом, при выключенном сглаживании шрифта ClearType результат просто ужасный.

Мы наклоняли div, реализовывали через border-witdh, использовали svg, но результат был одинаковым. Находили решение для исправления схожей проблемы с border-radius, но в нашем случае это не подходило.

Решение

Использовать png изображения) Да, старые добрые png с прозрачностью.

Сайт разделен на 3 основные части: информация о парке, текущие резиденты и информация для инвесторов.

Информация о парке представлена в виде трех основных р

азделов, важных для индустриального парка:

Описание парка http://tinyurl.com/gpz5scj

Расположение парка http://tinyurl.com/gqndqul

Инфраструктура парка http://tinyurl.com/jxhdq88

На страницах расставлены акценты на наиболее интересующую информацию для целевого посетителя.

Список резидентов индустриального парка представлен в виде карточек резидента с информацией о статусе его проекта, контактной информацией и его вакансиями http://indpark-krd.ru/residents/

Информация для потенциальных резидентов отражена в виде преимуществ расположения в парке http://indpark-krd.ru/investors/ и списка свободных площадей, возможных для аренды и выкупа http://indpark-krd.ru/investors/

Прочая информация о кейсе

Индустриальный парк «Краснодар» относится к частным индустриальным паркам типа Greenfield, создаваемым на вновь отведенном незастроенном земельном участке, изначально не обеспеченном инфраструктурой.

Индустриальный парк «Краснодар» — проект компании «Тандер» (группа компаний «Магнит»), в 2015 году вошедшей в рейтинг 100 самых инновационных компаний мира по версии Forbes (23-е место), обогнав таких гигантов, как Visa, Starbucks, Adobe и Coca-Cola, а в 2012 году являвшийся пятым по капитализации среди ритейлеров всего мира. В 2016 году стартовал проект индустриального парка с целью организации собственного производства и создания выгодных условий для инвестиционных проектов.

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

Выиграли тендер, срок 2 месяца, 2 языка, информации – Бах на салфетке написал, но самое главное, нет референсов по технологиям. Самыми ближайшими были сайты жилых комплексов девелоперских компаний, но если на них используется одно изображение в бэкграунде и выделение областей полигонами сверху, то нам нужно было отключать/включать объекты, а, значит, делать бэкграунд динамическим. Все это должно быть кроссбраузерным и адаптивным. Canvas не рассматривали, поскольку нужно быстро, красиво и нересурсозатратно.

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

Скриншоты

Комментарий заказчика

Благодарим компанию Webit за разработку нашего сайта на CMS Bitrix. Скорость сдачи проекта была один из приоритетов, и компания справилась за 2 месяца, быстрее наших ожиданий. Но главная цель проекта - это интерактивная карт, где пользователи могут выбрать и купить промышленную постройку или территорию в онлайн-режиме. Все наши требования были выполнены качественно и в срок. А для удобства была создана мобильная версия сайта.
Кроме того, хотим поблагодарить руководителя проекта Романа Бацкалевича, который всегда был на связи и всегда находил для нас лучшие решения.