Egy webes projekt: Sitebuilderek és Designerek (1. rész)

Webragacs

A webes szakma sokat fejlődött a FrontPage és az első ingyenes CMS rendszerek megjelenése óta, arról nem is beszélve, hogy a W3C mennyi újítást vezetett be ezen a területen. Eljutottunk a több megabájtnyi (több tucat) képből összeálló, stíluslapok nélküli weboldalaktól az egészen komoly HTML5-ös, CSS3-as webes alkalmazásokig, amiket nem csak asztali gépen, hanem mobil eszközökön is egyaránt tudunk használni. A Designer megálmodja, a Sitebuilder életre kelti, a Programozó megtanítja járni – ha ilyen egyszerű lenne, ez a cikk nem létezne.

Egy egyszerűbb webes projekten többnyire 3 réteg dolgozik:

  • Designer
    Elkészíti az arculattervet, megvizsgálja a grafikai trendeket, kiválasztja a megfelelő tipográfiát, a színelmélet felhasználásával kiválasztja a színkészletet és kialakítja az ergonomikus felhasználói felületet.
  • SiteBuilder (kliens oldali megjelenés)
    A jelölőnyelv és modern szabványok ismeretében, odafigyelve az optimális fájlméretekre és azok darabszámára, a lehető legnagyobb kompatibilitással átülteti a HTML és CSS nyelvére azokat a grafikákat, amiket a Designer megálmodott.
  • Programozó *
    Dinamikus tartalommal tölti fel a csontvázat, biztosítja a megfelelő kommunikációt kliens és szerver között, feldolgozza a kliens oldalról érkező lekérdezéseket, biztosítja az adatok védelmét, odafigyel a hatékony és gyors adatfeldolgozásra.

A SiteBuilder réteg a kliens oldali nyelv fejlődésével egyre jobban előtérbe került, és már nem csak képek darabolása a feladata, hanem komoly kódolás. A Designerek fő feladatköre alig változott, ám a SiteBuilderek feladatkörének bonyolódása miatt érdemes naprakész tudással rendelkezniük, különben rengeteg ütközés lesz a Designer és a SiteBuilder között. A felhasználó elöl rejtett szerver oldali (PHP, Perl, ASP) kódolás már-már tradicionális, nem sok új látott napvilágot az idők során, csupán előtérbe került az OOP és fontossá vált a gyors, kis méretű, nyers adatok generálása az AJAX népszerűsödése miatt. Mindemellett előtérbe került a kliens oldalon futó JavaScript programozók szerepe is, akik manapság már a kliens oldalon is komoly alkalmazásokat fejlesztenek.

Rétegek

Bajok a formátummal – avagy hogyan szúrjunk ki a SiteBuilderrel

A Designerek többnyire Adobe termék segítségével (Illustrator, Photoshop) készítik el munkáikat. Jobb esetben a SiteBuilder kap egy PSD fájlt, tele rétegekkel, amiket szabadon ki-be kapcsolgathat, hogy minél könnyebben elkészítse a böngészőben is működő változatot. Sajnos azonban akadnak olyan Designerek, akik fogják magukat és egy primitív, rétegek nélkül működő programban készítik el munkájukat, ennél rosszabb nem létezik. Azok még jobban járnak, akik egy PSD-ből exportált JPG képpel dolgoznak, a kategória kiváltságosai viszont egy veszteségmentes PNG képpel boldogulhatnak.

Ugyanis egyes Designerek így biztosítják magukat, hogy nem fog visszaélés történni az általuk készített PSD-vel. Ennél a pontnál igen, én is feltettem a kezem, hogy kérdezzek, azonban akik ezt csinálják, nyíl egyenesen hisznek munkájuk ilyesfajta védelmében. Ami sajnos még szomorúbb, a szegény Sitebuilder találja ki mi van egy box mögött, mi a betűstílus, mekkorák a betűk és még sorolhatnám.

Hála Istennek elég szűk a réteg, aki ezt az ipart űzi, de ha szembe találkozzunk egy ilyennel fussunk. Akik benne vannak a szakmában nem biztos hogy elhiszik, de a kezdőknek gyakran jut ilyen munka. Legyünk őszinték, sokszor a kis morzsák is jobbak a semminél.

Webragacs kamu

Bajok a minőséggel – a 3R, rasztergrafikus réteges rémálom

Aztán lépjünk tovább, a PSD építő bajnok Designerek sem mindig értik a dolgukat, lehet gyönyörű a Design, ha a mögötte álló fájlból egyszerűen nem lehet könnyedén kibányászni az adatokat. Sokszor előbb meg kell értenünk, a Design-t, hogy aztán munkának lássunk. Gyakori nehézségek:

  • Mappák ismeretének hiánya
    Amikor több száz réteget egy helyen látunk, egyszerűen feldolgozhatatlan/átláthatatlan, hogy melyik réteg mit csinál, melyikre és hogyan hat.
  • kisMillió almappa
    Az előbbi véglete, mikor szinte minden réteg külön mappában kap helyet, ezzel olyan káoszt generál, ami fikarcnyit sem jobb az előző pontnál.
  • Értelmetlen réteg/mappa nevek
    Gyakran a rétegek/mappák sorrendjüknek megfelelően kapnak egy nem túl beszélő nevet (pl.: #1, num2, dir3, lay4), így ez problémásabb mint az előző kettő.
  • Szövegek
    Akkor kap sok SiteBuilder a szívéhez, mikor olyan betűtípusokat használ a Designer, amik csak az ő gépén érhetőek el, sőt még online könyvtárakban sem fellelhetőek (beleértve a Webfont oldalak készleteit is). Azonban még ennél is tudunk tovább menni, a szövegek rasztergrafikussá vannak alakítva, így esélyünk sincs megtudni milyen méretű és betűtípusú.
  • Effektek
    Sokan az effektelt rétegeket is egybe olvasztják, így nem tudjuk megnézni milyen árnyékolások és ragyogások vannak rajta, ami fontos lenne, hiszen a CSS3 lehetőséget ad az árnyékolások attribútumként való hozzáadására, amivel meglehetősen sok adatmennyiséget spórolhatunk.

A megoldás egyszerű. A szövegeket, vektorgrafikus rétegeket hagyjuk meg eredeti formájukban. Az effekteket ne olvasszuk rá a rétegekre (ebben segítségre lehet a maszkolás és a mappákkal történő játszadozás). A mappák és rétegnevek pedig legyenek egyértelműek, logikus felépítésűek.

Egy gomb

Optimális korlátok ismerete

Sok Designer nincs tisztában azzal, hogy mit engedhet meg magának a felületek kialakításakor. Gyakran egy kis módosítással meglehetősen sok fejfájástól kíméli meg saját magát és a SiteBuildert is. Napjainkban a technikai korlátok már nem szaknak akkora határt mint 5 (vagy több) évvel ezelőtt, így ideje, hogy se a Designerek, se a SiteBuilderek ne a statikus effektekben gondolkodjanak Régebben egy lekerekített sarkú, színátmenetes háterű, kívül-belül árnyékolt gombot csupán képpel lehetett megoldani. Mára ezek közül mindenre van lehetőségünk, ezért érdemes ezeket a gombokat is eredeti formájukban megtartani (a designer által készített dokumentumban).

Hátterek esetén érdemes olyasmit választani, ami ismétlődés esetén sem válik unalmassá. Érdemes ezek kapcsán a Brusheezy oldalán körbenézni, hiszen itt rengeteg érdekes, ismétlődő mintát találhatunk, többnyire ingyenesen.

Remek döntés kis mennyiségű komplex grafikát használni. Tévesen hiszik azt a Designerek, hogy az egyre gyorsabb internet kapcsolatok mellett nyugodtan pazarolhatják az erőforrásokat. A SiteBuild során napjainkban igazán csak a Blend Mode portolása jelent problémát, sok esetben nem számít, de mintás háttér esetében nem kivitelezhető mondjuk a Multiply Blend Mode.

Manapság, a legegyszerűbb technikával szokták feldobni a Designeket, ez nem más mint a zaj (noise). Sajnos ezt csak kép felhasználásával tudjuk elérni, mivel többnyire háttérként használjuk a Spirites technika szóba sem jöhet. Érdemes zajos képeket háttérnek használni, mert kellemessé tud tenni egy egyébként monoton színvilágot. Tipp: Ha kihasználjuk a CSS3 adottságait, megadhatunk két réteges hátteret, a felső legyen egy PNG kép, ami a zajt tartalmazza, alatta pedig a szív, így egy zaj képpel számtalan színhez kreálhatunk zaj effektet.

Kommunikáció

Gyakori, hogy két teljesen különböző személy vagy cég készíti el a Designt és SiteBuildot, ilyenkor nagy valószínűséggel csak a megrendelőn keresztül lehet kommunikálni, ami – ha létre is jön – meglehetősen körül,ményes. Sajnos a megrendelők döntő többségében abszolút nem értenek a dologhoz, így tőlük nem is várhatunk segítséget, magunkra maradunk, de a végén úgy is a SiteBuilder lesz a hibás. Éppen ebből adódóan hibás döntés megcsináltatni a Designerrel a terméket, majd a teljes további munkafolyamatot átadni a SiteBuildernek, hiszen a konzultáció kettejük között mindenkinek jó tesz (főként a produktum minőségének).

A legszörnyűbb mondat, amit egy megrendelő mondhat: “Van egy hozzáértő ismerősöm, megnézte és lenne pár forradalmi javaslata!” Amint ezt egy Designer vagy Sitebuilder meghallja, beindul a fokozott adrenalintermelés, mert a magyarázkodás, terelés és koncepciómódosítás nem kis mentális energiát őröl fel egy ilyen esetben, ezért érdemes még a Design elkészítése előtt/közben lefixálni minden részletet.

* [Javítva]

Koller József írása –

Közel tíz éve foglalkozom informatikával, azon belül főként a webfejlesztéssel. Nem vagyok designer, de ettől teljesen függetlenül rajongok a szépen megtervezett grafikákért. Munkám első sorban a háttérben zajlik, ugyanis "kódolással" foglalkozom.

  • Ha tetszett a cikk, osztd meg!