Strona www dla dewelopera z katalogiem mieszkań - case study

Strona dla developera z ofertą mieszkań

W ostatnim czasie mieliśmy okazję pracować przy serwisie z katalogiem mieszkań oferowanych w nowowym apartamentowcu przy ulicy Mikołowskiej w Katowicach. Jeśli planujesz zrobić stronę z ofertą mieszkań lub lokali do sprzedaży lub wynajmu ten wpis może być dla Ciebie.

Serwis był pierwszą realizacją strony z katalogiem mieszkań na nowym systemie Wirtualizer EMS, dlatego byliśmy bardzo pozytywnie nastawieni do projektu.
Poniżej przeczytasz czego się nauczyliśmy przy tej realizacji, może ta wiedza przyda się również Tobie.

1. Interaktywny katalog mieszkań

Oprócz typowych stron informacyjnych ważną częścią serwisu był katalog z ofertą mieszkań. Pewnie zastanawiasz się po co w ogóle katalog mieszkań na stronie tego typu. Przecież można by zrobić normalną stronę informacyjną z opisem inwestycji, z przykładowymi wizualizacjami mieszkań w galerii zdjęć, a szczegółowe informacje o mieszkaniach zawrzeć w pliku lub plikach PDF do pobrania. Oczywiście można. Jeśli jednak zależy Ci na wygodzie użytkownika (UX), która przekłada się na wysoką konwersję (leady sprzedażowe) to katalog może być świetnym rozwiązaniem.

Główne zalety katalogu mieszkań na stronie:

  • wygodne filtrowanie katalogu po piętrach, powierzchni, dostępności oraz sortowanie mieszkań po tych samych kryteriach
  • wygodne przeglądarnie oferty mieszkań i lokali w dwóch różnych widokach - jako kafelki lub tabelka
  • możliwość wygodnego składania zapytań o konkretne mieszkanie lub lokal bezpośrednio w szczegółach
  • kompletne informacje o każdym mieszkaniu / lokalu - powierzchnie, udogodnienia, zdjęcia, położenie
  • zwiększenie objętości serwisu dzięki dodatkowym podstronom katalogu ważne przy pozycjonowaniu strony
  • możliwość udostępnienia / zapisania linku do konkretnego mieszkania / lokalu
  • możliwość wykorzystania katalogu w kampaniach remarketingowych Facebook Ads i Google Ads
  • możliwość wygodnego składania zpaytań na wybrane mieszkanie lub lokal


W realizowanym projekcie nie tylko mieliśmy wdrożyć katalog mieszkań, ale miał on być w pewnym sensie interaktywny. Chodziło o podstrony z widokiem budynku w rzucie 3d oraz podstrony z rzutami poszczególnych pięter przedstawiające rozkład mieszkań w rzucie 2d. Te podstrony miały dostarczać inforamcji o mieszkaniach po najechaniu odpowiednio na pięro lub konkretne mieszkanie.

Interaktywny katalog mieszkań - wybór piętra


W przypadku podstorny z widokiem budynku 3d po najechaniu na dane piętro miało się ono zaznaczać oraz miała się wyświetlać informacja o mieszkaniach - ilość łącznie, w rezerwacji, dostępnych. Na podstronach z widokiem pięter 2d najechanie kursorem na mieszkanie miało powodować jego zapalenie oraz miała się pojawiać informacja o danym mieszkaniu.

Katalog mieszkań - wybór mieszkania na piętrze


Potrzebowaliśmy rozwiązania, które w elastyczny sposób pozwoli nam tworzyć wektory na zdjęciach, czyli zaznaczać dowolne obszary, a następnie je kolorować osobną płaszczyzną, z ewentualną przezroczystością. Szukaliśmy gotowych skryptów, które można by użyć i ewentualnie zaimplementować w naszym systemie CMS. Znaleźliśmy kilka rozwiązań i zaczęliśmy je po kolei testować oraz próbować implementować jako elementy panelu zarządzania.
 

Katalog mieszkań - szczegóły mieszkania


Testowanie dostępnych narzędzi do tworzenia wektorów zabrało nam sporo czasu i energii, nie mówiąc o próbie ich implementacji jako element panelu CMS. Traciliśmy kolejne godziny i dni i wcale nie posuwaliśmy się do przodu. W końcu się poddaliśmy. Przemyśleliśmy sprawę i doszliśmy do wniosku, że tak naprawdę nie ma znaczenia gdzie będziemy tworzyć wektory, ważne aby mieć narzędzie które to umożliwi i będzie proste w użyciu.

I tak trafiliśmy na stronę https://www.image-map.net/ - darmowe narzędzie które pozwala na tworzenie wektorów w banalnie prosty sposób, zwracając potrzebne współrzędne.

Przede wszystkim można nanosić obszary w formie wielokątów oraz nanosić ich dowolną ilość, a nawet edytować istniejące. Problemem okazało się mapowanie punktów blisko siebie, zbyt mała rozdzielczość zdjęć plus mały obszar roboczy sprawiał, że czasami tworzone wektory nie pokrywały idealnie ściań mieszkań. Na szczęście i z tym można sobie poradzić.

Tworzenie wektorów


Przeglądarki Chrome i Firefox pozwalają włączyć tryb responsywny a nim ustawić dowolną rozdzielczość ekranu. Zwiększenie rozdzielczości do wartości ekstremalnych np. 6000px oraz dodatkowa modyfikacja kodu CSS w inspektorze przeglądarki pozwoliło powiększyć obszar roboczy dzięki czemu możliwe było realizowanie mapowania na zdjęciach w powiększeniu a tym samym bardziej szczegółową manipulację punktami tworzonych poligonów.

Po naniesieniu wektorów narzędzie generuje kod ze współrzędnymi. Ponieważ wszystkie mieszkania dodawane były niezależnie jako katalog mogliśmy im przypisać te współrzędne, a następnie odczytywać je w serwisie. Oczywiście musieliśmy używać tych samych zdjęć, aby wszystko się pokrywało.

Pokrywało się .. ale nie do końca.

Okazało się, że u osoby odpowiedzialnej za realizację projektu po stronie klienta wektory są przesunięte wzgledem zdjęć. Po analizie okazało się, że korzysta ona z monitora 27 cali z rozdzielczością 2880px a my korzystamy z monitorów full hd o rozdzielczości 1920px. Konieczne było wprowadzenie modyfikacji, generowanie większych obrazków i wprowadzenie odpowiedniego przesunięcia współrzędnych. Finalnie wszystko się udało zgrać tak aby w każdej rozdzielczości wektory pokrywały się z liniami obrazków.

Podsumowując. Czasami lepiej skorzystać z zewnętrznych narzędzi i skupić na realizacji celu niż tracić energię i za wszelką cenę wdrożyć integrację narzędzi, "bo fajnie jakby się udało". Chcieliśmy na siłę zaimplementować moduły do obsługi wektorów jako część naszego systemu, co było zupełnie niepotrzebne. Coś, co na początku wydawało się proste do zrobienia finalnie okazało się tematem nie do przeskoczenia, lub wymagającym ogromnego nakładu pracy i czasu. Na szczęście w porę się opamiętaliśmy i finalnie zmieniliśmy podejście do realizacji dzięki czemu udało się osiągnać to na czym nam zależało - potrzebny efekt, elastyczność przy użyciu prostych w obsłudze narzędzi.

2. Wprowadzanie treści

W projekcie byliśmy odpowiedzialni również za wprowadzenie treści, czyli parametrów wszystkich mieszkań. Otrzymaliśmy materiały w formie plików Excela w trakcie prac wdrożeniowych. Jeszcze w trakcie wdrożenia przystąpiliśmy do wprowadzenia mieszkań do bazy. Wprowadzenie prawie 200 mieszkań wraz z podpięciem zdjęć to spory nakład pracy. Nie dało się tego zautomatyzować przez co była to mozolna, ręczna praca.

Po wprowadzeniu mieszkań do bazy okazało się, że nastąpi zmiana numeracji. I tu zaczęły się problemy.

Myślimy sobie, pozamieniamy numery i będzie po temacie. Okazało się, że zmiany numeracji to nie wszystko, zmieniają się również parametry mieszkań. Jednym słowem trzeba zmieniać praktycznie wszystko, sprawdzić każde mieszkanie, porównać parametry, wprowadzić zmiany.
 

Parametry mieszkania


Do tego doszły jeszcze zmiany w zdjęciach z układem mieszkań, rzutów 3d i 2d. Zmiana dużej ilości zdjęć wymaga sporej ilości klikania.

Na sam koniec wpadliśmy na pomysł, że zamiast podmieniać pliki w rekordach bazy lepszym rozwiązaniem jest podmiana zdjęć. Jednym słowem, najlepiej wprowadzić konkretną nomenklaturę plików np. blok-b-2d-mieszkanie-15.jpg gdzie dla tego rodzaju zdjęć zmieniać się będą tylko numery mieszkań na końcu.

Dlatego najlepszym rozwiązaniem jest przypisanie mieszkaniom konkretnych nazw plików,  a w przypadku pomyłek i konieczności zmiany zdjęć - wymiana plików w odpowiednim katalogu na serwerze. Jest to nieporównywalnie szybsze rozwiązanie niż podpnanie innych plików w rekordach mieszkań.

Podsumowując. Jeśli inwestycja jest wciąż w trakcie realizacji, lepiej wstrzymać się z wprowadzaniem parametrów lokali, gdyż te mogą ulec zmianie.

Rozwój Wirtualizer EMS

Mimo dużo większego nakładu pracy niż zakładaliśmy jesteśmy bardzo zadowoleni z efektów realizacji, dzięki której rozbudowaliśmy nasz system CMS o nowe funkcjonalności, m.in.

  • widok wybranych wartości cech na gridzie katalogu
  • widok zdjęć wraz ze ścieżkami i nazwami plików na gdzie galerii zdjeć
  • możliwość wygodnego dodawania wartości cech przy dużej ilości unikalnych wartości
Katalog mieszkań z parametrami w kolumnach

Po stronie użytkownika również rozwinęliśmy system szablonów o możliwość sortowania danych w katalogu dla dowolnej cechy np. przy prezentacji danych w formie tabelki. Temat banalny kiedy sortujemy dane załadowane w przeglądarce - kiedy wszystkie dane są widoczne.

Kiedy mamy dużą ilość danych wtedy powinny one być dzielone na porcje. Sortowanie danych w takim przypadku jest sporo trudniejsze gdyż sortowanie musi odbywać się po stronie serwera a nie w przeglądarce. Udało się zrealizować obydwa sposoby sortowania, choć druga wersja była dużo bardziej czasochłonna.

Filtrowanie i sortowanie mieszkań

 

Podsumowanie

Jesteśmy zadowoleni z finalnego efekty jako udało się osiągnąć i mamy nadzieję, że klient również. Cieszymy, się że udało się stworzyć nowe funkcjonalności po stronie użytkownika i panelu zarządzania. Stworzenie ich wymagało sporego nakładu pracy i czasu ale finalny efekt wynagrodził włożony trud. Poszerzyliśmy nasze doświadczenie o pracę z wektorami oraz ich kreatywne i elastyczne wykorzystanie. Realizacja pokazuje, że oferta w formie katalogu może być dobrym pomysłem również w przypadku sprzedaży mieszkań czy lokali.

Jeśli masz jakieś uwagi lub pytania napisz komentarz lub wyślij do nas wiadomość.

Komentarze

Twój komentarz

Nick *
E-mail *
Komentarz *

Zobacz także

Używamy Cookies, które będą zamieszczane w Twoim komputerze. Więcej w Polityce Prywatności. - więcej

Newsletter
Nowości na blogu, życzenia na święta .. generalnie co u nas słychać :)
Name
Email
 
Wyrażam zgodę na wysyłanie wiadomości marketingowych oraz przetwarzanie moich danych osobowych.
 

Drogi użytkowniku,

Zgodnie z art. 13 ust. 1 i ust. 2 Rozporządzenia Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 roku (RODO), informuję że:

  • Twoje dane osobowe nie będą przekazywane odbiorcom.

  • Twoje dane osobowe nie będą przekazywane do państwa trzeciego ani organizacji międzynarodowych.

  • Przysługuje Ci prawo cofnięcia zgody na przetwarzanie danych osobowych w dowolnym momencie, bez wpływu na zgodność z prawem przetwarzania, którego dokonano na podstawie zgody przed jej cofnięciem.

  • Posiadasz prawo dostępu do treści swoich danych oraz prawo ich sprostowania, a także do przenoszenia swoich danych osobowych tj. do otrzymania od administratora Pani/Pana danych osobowych, w ustrukturyzowanym powszechnie używanym formacie nadającym się do odczytu maszynowego.

  • Masz prawo wniesienia skargi do organu nadzorczego zajmującego się ochroną danych osobowych, gdy uznasz, iż przetwarzanie danych osobowych narusza przepisy Rozporządzenia Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 roku (RODO).

  • Twoje dane osobowe będą przetwarzane w sposób zautomatyzowany, nie będą podlegały profilowaniu.

  • Administratorem danych jest Jan Nowak z którym można się skontaktować pod adresem info@heuristic.pl.
     

Pliki Cookies

Na naszych stronach używamy technologii, takich jak pliki cookie, do zbierania i przetwarzania danych osobowych w celu personalizowania treści i reklam oraz analizowania ruchu na stronach i w Internecie. Pragniemy zapoznać Cię ze szczegółami stosowanych przez nas technologii oraz z przepisami, które niebawem wejdą w życie, tak aby dać Ci pełną wiedzę i komfort w korzystaniu z naszych serwisów internetowych. Zapoznaj się z poniższymi informacjami przed przejściem do serwisu. Klikając przycisk „przejdź do serwisu” lub zamykając to okno zgadzasz się na postanowienia zawarte poniżej.

RODO

Z dniem 25 maja 2018 r. rozpoczyna obowiązywanie Rozporządzenie Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (określane popularnie jako „RODO”). RODO obowiązywać będzie w identycznym zakresie we wszystkich krajach Unii Europejskiej, a więc także w Polsce i wprowadza szereg zmian w zasadach regulujących przetwarzanie danych osobowych.

Czym są dane osobowe

Dane osobowe to, zgodnie z RODO, informacje o zidentyfikowanej lub możliwej do zidentyfikowania osobie fizycznej. W przypadku korzystania z naszego serwisu takimi danymi są np. adres e-mail, adres IP, a w przypadku wysłania zapytania - imię i nazwisko. Dane osobowe mogą być zapisywane w plikach cookies lub podobnych technologiach (np. local storage) instalowanych przez nas na naszej stronie i urządzeniach, których używasz podczas korzystania z naszych usług.

Podstawa i cel przetwarzania

Przetwarzanie danych osobowych wymaga podstawy prawnej. RODO przewiduje kilka rodzajów takich podstaw prawnych dla przetwarzania danych, a w przypadkach korzystania z naszych usług wystąpią, co do zasady trzy z nich:

  • Niezbędność przetwarzania do zawarcia lub wykonania umowy, której jesteś stroną. Umowa to, w naszym przypadku, regulamin danej usługi. Jeśli zatem zawieramy z Tobą umowę o realizację danej usługi (np. usługi zapewniającej Ci możliwość zapoznania się z naszym serwisem w oparciu o treść regulaminu tego serwisu), to możemy przetwarzać Twoje dane w zakresie niezbędnym do realizacji tej umowy. Bez tej możliwości nie bylibyśmy w stanie zapewnić Ci usługi, a Ty nie mógłbyś z niej korzystać.

  • Niezbędność przetwarzania do celów wynikających z prawnie uzasadnionych interesów realizowanych przez administratora lub przez stronę trzecią. Ta podstawa przetwarzania danych dotyczy przypadków, gdy ich przetwarzanie jest uzasadnione z uwagi na nasze usprawiedliwione potrzeby, co obejmuje między innymi konieczność zapewnienia bezpieczeństwa usługi, dokonanie pomiarów statystycznych, ulepszania naszych usług i dopasowania ich do potrzeb i wygody użytkowników (np. personalizowanie treści w usługach) jak również prowadzenie marketingu i promocji własnych usług administratora.

  • Twoja dobrowolna zgoda. Jest potrzebna głównie w przypadku, gdy usługi marketingowe dostarczają Ci podmioty trzecie oraz gdy to my świadczymy takie usługi dla podmiotów trzecich. Aby móc pokazać interesujące Cię reklamy (np. produktu, którego możesz potrzebować) reklamodawcy i ich przedstawiciele muszą mieć możliwość przetwarzania Twoich danych. Udzielenie takiej zgody jest całkowicie dobrowolne, i jeśli nie chcesz, nie musisz jej udzielać. Dzięki naszemu rozwiązaniu masz również możliwość ograniczenia zakresu lub zmiany zgody w dowolnym momencie. Twoje pozostałe uprawnienia wynikające z udzielenia zgody są opisane poniżej.


Twoje dane, w ramach naszych usług, przetwarzane będą wyłącznie w przypadku posiadania przez nas lub inny podmiot przetwarzający dane jednej z dopuszczonych przez RODO podstaw prawnych i wyłącznie w celu dostosowanym do danej podstawy, zgodnie z opisem powyżej. Twoje dane przetwarzane będą do czasu istnienia podstawy do ich przetwarzania – czyli w przypadku udzielenia zgody do momentu jej cofnięcia, ograniczenia lub innych działań z Twojej strony ograniczających tę zgodę, w przypadku niezbędności danych do wykonania umowy – przez czas jej wykonywania, a w przypadku, gdy podstawą przetwarzania danych jest uzasadniony interes administratora – do czasu istnienia tego uzasadnionego interesu.

Przekazywanie danych

Twoje dane będą przetwarzane przez Administratora danych osobowych oraz i Zaufanych Partnerów, którym zostaną przekazane w celach analizy. W każdym takim przypadku przekazanie danych nie uprawnia ich odbiorcy do dowolnego korzystania z nich, a jedynie do korzystania w celach wyraźnie przez nas wskazanych. Dzięki temu możemy np. lepiej dobrać najciekawsze lub najtańsze oferty dopasowane dla Ciebie. W każdym przypadku przekazanie danych nie zwalnia przekazującego z odpowiedzialności za ich przetwarzanie. Dane mogą być też przekazywane organom publicznym, o ile upoważniają ich do tego obowiązujące przepisy i przedstawią odpowiednie żądanie, jednak nigdy w innym przypadku.

Cookies

Na naszych stronach internetowych i w aplikacjach używamy technologii, takich jak pliki cookie, local storage i podobnych służących do zbierania i przetwarzania danych osobowych oraz danych eksploatacyjnych w celu personalizowania udostępnianych treści i reklam oraz analizowania ruchu na naszych stronach. Cookies to dane informatyczne zapisywane w plikach i przechowywane na Twoim urządzeniu końcowym (tj. Twój komputer, tablet, smartphone itp.), które przeglądarka wysyła do serwera przy każdorazowym wejściu na stronę z tego urządzenia, podczas gdy odwiedzasz różne strony w Internecie.

Twoje uprawnienia

Zgodnie z RODO przysługują Ci następujące uprawnienia wobec Twoich danych i ich przetwarzania przez nas i Zaufanych Partnerów.

Jeśli udzieliłeś zgody na przetwarzanie danych możesz ją w każdej chwili wycofać.

Masz również prawo żądania dostępu do Twoich danych osobowych, ich sprostowania, usunięcia lub ograniczenia przetwarzania, prawo do przeniesienia danych, wyrażenia sprzeciwu wobec przetwarzania danych oraz prawo do wniesienia skargi do organu nadzorczego. Uprawnienia powyższe przysługują także w przypadku prawidłowego przetwarzania danych przez administratora.

Zgoda

Jeśli chcesz zgodzić się na przetwarzanie przez nas Twoich danych osobowych zebranych w związku z korzystaniem przez Ciebie z naszej strony w celach marketingowych (obejmujących niezbędne działania analityczne i zestawianie w profile marketingowe na podstawie Twojej aktywności na stronach internetowych) w tym ich przetwarzanie w plikach cookies itp. instalowanych na Twoich urządzeniach i odczytywanych z tych plików przez Administratora danych osobowych. Możesz w łatwy sposób wyrazić tę zgodę, klikając w przycisk „Przejdź do serwisu” lub zamykając to okno. Wyrażenie zgody jest dobrowolne. 

Zaufani Partnerzy

Dane osobowe o których mowy powyżej udostępniane są wyłącznie zaufanym partnerom w celach statystycznych oraz w celu realizowania dodatkowych usług dostępnych w serwisie.

Zaufanie partnerzy:

  • Google Inc. - w celach statystycznych, analizy danych, w celach marketingowych
  • Yandex Metrica - w celach statystycznych, analizy danych
  • Smartsupp.com, s.r.o. - w celach świadczenia usługi chatu on-line
  • Facebook, Inc. - w celach statystycznych, analizy danych, w celach marketingowych
  • Hotjar Limited - w celach statystycznych, analizy danych, w celach marketingowych, w celach świadczenia usługi chatu on-line
  • CWK Spółka z o.o. spółka komandytowa - w celach realizowania usług kurierskich
  • R2G Polska Sp. z o.o. - w celach realizowania usług kurierskich
  • Poczta Polska S.A. - w celach realizowania usług kurierskich

Newsletter

„Wyrażam zgodę na przetwarzanie moich danych osobowych w celach i zakresie zgodnymi z realizacją usługi newsletter opisanej w Polityce prywatności. Jestem świadomy/a, że zgodę tą mogę w każdej chwili wycofać.”