Az első weboldalam — és amit azóta másképp csinálok

Ez családi munka volt, és annak is mondom

Az első weboldalamat nem idegen ügyfélnek készítettem, hanem édesapámnak — a neve rajta is van az oldalon. Ő ingatlanközvetítő és bérbeadási specialista Budapesten, kis portfólióval, ami nála elv: kevesebb megbízás, több figyelem jut egyre.

Ezt nem rejtegetem, mert így hiteles: itt tanultam meg, hogyan áll össze egy oldal, mi kell egy vállalkozás kirakatához, és milyen kérdéseket tesz fel egy megbízó — akkor is, ha vacsoránál teszi fel.

Miért kész témából épült

Az ingatlanos oldalak külön műfaj: listázás szűrőkkel, adatlap paraméterekkel és galériával, kiemelt ajánlatok, ügynök-profil. Kezdőként ezt nulláról megépíteni hónapok lettek volna — a készen vásárolt, iparágra szakosodott téma napok alatt adta oda az egészet, kétnyelvűséggel együtt.

Az ár utólag mutatkozott meg, és nem egyszerre: a téma sok olyan funkciót cipel, amit az oldal nem használ; a frissítései óvatosságot kívánnak, mert sok minden függ tőlük; és amikor valamit másképp szerettem volna, a beállítások falába ütköztem. Egy kész témában vendég az ember, nem házigazda.

Ugyanez a kérdés máshonnan is előkerült: egy átvett honlapnál nem én választottam a rétegeket, mégis velem maradt a következményük.

Mit jelent ez, ha hasonló a helyzeted

Ha egyszemélyes vállalkozásod van és gyorsan kell kirakat, a kész téma tisztességes első lépés — ennél az oldalnál is az volt, és az oldal ma is dolgozik. A kérdés évekkel később jött elő: ki tudja karbantartani, és mennyibe kerül, amikor változtatni kell.

Ennél az oldalnál a válasz nem egy nagy váltás lett, hanem sok kicsi. Az alapot lépésenként cseréltem ki alatta — miközben a dizájn a kezdetektől ugyanaz. A megbízó számára ez a legfontosabb része: a látogatói oldalon semmi nem mozdult, a munka végig a felszín alatt zajlott.

A felszín ugyanaz maradt, alatta minden kicserélődött

Az oldal ma egy saját témán fut, bővítmény nélkül. Ez azért számít, mert minden bővítmény a saját ütemében frissül, és bármelyikük frissítése el tud törni valamit, aminek elvileg semmi köze hozzá. Ahol egyetlen komponens van, ott ez a kockázat nem áll fenn.

Az adatbázis tizenkét táblából áll, és mind a tizenkettő használatban van. A médiakönyvtárban a valódi képek vannak, generált másolatok nélkül — a WordPress hat képmérete közül három ki van kapcsolva, mert a téma nem használja őket.

A látogató egyetlen stíluslapot és egyetlen scriptet tölt le, tömörítve 31 és 10 KB — jQuery nélkül.

Ez a lap fentebb azt írta, hogy egy kész témában vendég az ember, nem házigazda. Ennél az oldalnál ez a másik oldaláról is igaz: az oldalon lévő kódot én írom. Ettől látszik a hiba helye, és a javításhoz nem kell megvárni, hogy valaki más kiadjon egy frissítést.

Hogy a dizájn tényleg ugyanaz maradt, azt nem szemre néztem meg, hanem géppel mértem. Egy eszköz bejárja a lapot és tulajdonságonként kiírja, amit a böngésző ténylegesen renderel — szín, betűméret, sormagasság, betűsúly, margó, sarok, igazítás —, egy másik pedig összepárosítja a régi és az új változat elemeit, és felsorolja az összes eltérést.

Az utolsó futáskor a hirdetés-archívumon nulla eltérő elem volt, a főoldalon egy (egy bekezdés három sorban tör négy helyett), az ingatlan-aloldalon kettő — ott két dobozcím a régi változaton sorközi elem, nálam blokk, ami ugyanúgy néz ki. Szín-, betűméret-, sormagasság-, betűsúly-, margó-, sarok- és igazítás-eltérés egyik lapon sem maradt.

Két eltérés szándékosan maradt, és mindkettő olyan hely, ahol a régi változat el volt romolva. Az aloldalain a fejléc 672 képpont magasra nőtt egy méret nélküli, 569 képpontos logó miatt; nálam minden lapon ugyanaz a 140 képpontos fejléc fut. A főoldali kiemelt-carousel pedig üresen állt, mert a régi téma csúszkája nem indult el — ott most valódi kártya van.

Minden építésemnél ez a kiindulás: minél kevesebb idegen alkatrész, és amit lehet, arra a helyzetre szabva, amiben az oldal tényleg dolgozik.

Amit az iparági téma a motorháztető alatt ad

Az ingatlanos témák magja az ingatlan mint adattípus: ár, alapterület, szobaszám, elhelyezkedés, státusz — és minden felület ebből épül. A listázás ezekre szűr, az adatlap ezeket jeleníti meg, a „kiemelt ajánlat” ezekből választ. Ez az, amit kezdőként a legnehezebb lett volna jól megtervezni, és ezt adta a téma készen.

Ugyanez a mag magyarázza a súlyát is: a téma nem tudja, hogy egy egyszemélyes bérbeadási specialistának épül, ezért hozza a nagy irodáknak szánt részeket is — ügynök-csapatot, hitelkalkulátort, előfizetési csomagokat. Ezek nem látszanak, de ott vannak, betöltődnek, frissülnek.

A törékenység egy oka: ugyanaz a mező négy helyen

Egy felmérés egyetlen okra vezette vissza, amit addig sok apró bosszúságként éltem meg. Egy ingatlan-mező — mondjuk az alapterület — négy helyen élt egyszerre: a téma mezőszerkesztőjének táblájában, az oldalszerkesztő sablonjában, a téma PHP-jában és a fordító szótárában. Egy átnevezés mind a négyet el tudta törni, és csak az egyik jelzett.

Az új oldalon egyetlen PHP-tömb írja le az összes mezőt: kulcs, magyar és angol címke, típus, értékkészlet, mértékegység, szűrhető-e, ikon. Ebből generálódik a szerkesztőfelület, a mentés és a validáció, az ingatlan adatlapja, a szűrősáv, a keresőnek küldött strukturált adat és mindkét nyelv. Új mező felvétele hat sor, egyetlen fájlban.

Ez a különbség a karbantartási időben látszik meg. Egy huszonöt komponensű oldalnál a hibakeresés első fele nem a hibáról szól, hanem arról, hogy melyik idegen alkatrész változott meg. Ha az oldalon lévő kódot én írtam, ez a kör kimarad.

Hogyan lehet bizonyítani, hogy a dizájn nem változott

Ha az alapot kicserélik egy oldal alatt, a megbízó első kérdése jogosan az, hogy ugyanúgy fog-e kinézni. Erre a „ránéztem és jó” válasz kevés: egy négypixeles margó-eltérés vagy egy árnyalattal más szürke nem tűnik fel egyesével, húsz helyen viszont már más lap.

Ezért két eszköz készült hozzá. Az egyik megméri a lapot: valódi böngészőben bejárja az elemeket, és tulajdonságonként kiírja, amit a böngésző ténylegesen renderel. A másik összepárosítja a régi és az új változat elemeit, és egyszerre listázza az összes eltérést, tulajdonság szerint csoportosítva — nem egyesével kell vadászni rájuk.

A párosítás a látható szöveg alapján megy, két finomítással. A relatív függőleges helyzet azért kell, mert ugyanaz a telefonszám a fejlécben és a láblécben is szerepel — enélkül a fejléc elemét a lábléc elemével vetettük volna össze. Az azonos elemnév pedig azért, mert a menüpont különben párba állt volna az azonos szövegű oldalcímmel.

Két álpozitívot is ki kellett szűrni. Balról jobbra író nyelvben a start és a left igazítás ugyanaz. A régi változat pedig egy nem létező betűnévre hivatkozott, amit a böngésző az alapértelmezett talpatlan betűvel rajzolt ki — az pedig vizuálisan azonos azzal, amit a mostani stíluslap kér.

$ tools/mero.py <cim> meres.tsv
$ tools/diff.py regi.tsv sajat.tsv

hirdetes-archivum   0 eltero elem
fooldal             1  (egy bekezdes 3 sorban tor 4 helyett)
ingatlan-aloldal    2  (ket dobozcim sorkozi vs. blokk, azonos megjelenes)

A feltöltés, ami napi művelet

Ennek az oldalnak egyetlen napi művelete van: új hirdetés feltöltése. A régi felület ezt a WordPress alapértelmezéseire hagyta, és azok itt félrevezetők voltak. Egy hirdetésnek pontosan egy állapota, egy típusa és egy kerülete van; a WordPress ezeket négy külön dobozban, jelölőnégyzetes listaként kínálta, ahol be lehetett jelölni kettőt is, a huszonhárom kerület görgetése pedig kényelmetlen volt.

Most legördülők, és ott állnak, ahová tartoznak. Ami tényleg többes lehet — jacuzzi, riasztó, szauna —, az maradt jelölőnégyzet. A kötelező mezők csillagot kapnak, de szándékosan nem böngésző-szintű kötelezőt: egy félkész hirdetést piszkozatként el kell tudni menteni, a böngésző validációja viszont a mentést is blokkolná. Helyette az oldalsáv tetején egy doboz felsorolja, mi hiányzik még — nem tilt, megmutat.

Két művelet külön is megérte a munkát. A koordináta-keresés cím alapján: eddig a térképről kellett kézzel átmásolni, és ez volt a leggyakoribb elgépelési pont — egy rossz koordinátánál a térkép más városrészt mutat. A kérés a szerverről megy, nem a böngészőből, tehát a látogatói oldalra semmilyen külső kérés nem szivárog át. És a hirdetés másolása: egy házban gyakran több lakás kiadó, és a legtöbb adatuk azonos — a másolás minden mezőt, a galériát és mindhárom besorolást átviszi, piszkozatként.

Ami nem nyilvánvaló

A kétnyelvűség itt volt a legjobb vétel

Az oldal magyarul és angolul fut — bérbeadásnál a külföldi bérlő nem kivétel, hanem célközönség. A téma és a fordítás-kezelés együttműködése készen jött, és ez az a rész, amit ma is jó döntésnek tartok: a kétnyelvűség utólagos hozzáépítése sokkal fájdalmasabb, mint elsőre bekapcsolni.

Az első ügyféltől tanulja meg az ember a kérdéseket

A családi megbízás abban különbözik az idegentől, hogy a kérdések kíméletlenebbek és gyakoribbak. Itt hallottam először azt, hogy „ezt miért ennyi ideig tart átírni?” — és a válasz kereséséből értettem meg, hogy a rétegek száma nem technikai részlet, hanem az ügyfél pénztárcájának kérdése. Minden azóta épült oldalamon kevesebb réteg van, mint ezen.

A tartalom átemelését két szám gyanúsága mentette meg

A tartalom átemelésekor a galéria több adatsorban állt: a képlista hirdetésenként tizenöt-húsz külön sorban állt, ugyanazzal a kulccsal. Az első export ezért hirdetésenként egyetlen képet mentett — 929 helyett 97-et. Semmi nem hibázott; a szám nem stimmelt. Hatvanegy hirdetéshez kilencvenhét kép nem jön ki.

A koordinátáknál a régi rendszer a nagyítási szintet is a szám mellé írta. A tisztító ezt hibás adatnak vette, így hatvanegyből kilenc koordináta ment volna át. A minta most elfogadja és eldobja a harmadik számot — nem csak a migráció miatt: a térképről másolt sor is pontosan így néz ki.

A mérés hazudott, amíg a süti-sáv takarta a tartalmat

A régi és az új oldal összehasonlítása sokáig egyezést mutatott olyan helyeken, ahol valójában eltérés volt: a süti-sáv ráült az oldalra, és a mögötte lévő elemeket a mérőeszköz vagy nem látta, vagy máshol látta. Amióta ez kiderült, más a szabály: ha egy mérés túl szép eredményt ad, előbb a mérőeszközt nézem meg, nem az eredményt hiszem el.

Kérdések erről a munkáról

Összefoglaló

Az első weboldalam édesapám budapesti ingatlanközvetítői vállalkozásának készült — bérbeadási specialista, kis portfólióval —, és ezt a lap nyíltan vállalja: családi megbízás volt, ezen tanultam a szakmát. Az oldal egy ingatlanpiacra szakosodott, készen vásárolt WordPress témára épült, ami napok alatt adott listázást, keresőt, adatlapot és kétnyelvűséget; az ára utólag mutatkozott meg a nem használt funkciók súlyában, a kényes frissítésekben és a beállítások falaiban. Az oldal él, két nyelven dolgozik. A dizájn a kezdetektől ugyanaz; ami alatta van, azt lépésenként cseréltem ki; ma saját témán fut, bővítmény nélkül. Hogy a megjelenés tényleg változatlan maradt, azt mérés mutatja: az utolsó összevetésen a hirdetés-archívumon nulla, a főoldalon egy, az ingatlan-aloldalon két eltérő elem maradt, és egyik lapon sem maradt szín-, betűméret-, sormagasság-, betűsúly-, margó-, sarok- vagy igazítás-eltérés. Az egyedi működés magja egyetlen PHP-tömb: abból generálódik a szerkesztő, a validáció, az adatlap, a szűrő, a strukturált adat és mindkét nyelv. A legmaradandóbb tanulsága minden későbbi munkámban ott van: kevesebb réteg, mert a rétegek száma végül az ügyfél pénztárcájának kérdése.

← Minden esettanulmány