Ezt a posztot inkább a fejlesztőknek, webes cégeknek szánom, de érdekes lehet persze mások számára is. Először is tisztázzuk, mit értünk sitebuild alatt.
A sitebuild a megtervezett és a designer által elkészített felületek (nagyrészt photoshop, vagy fireworks) megvalósítása HTML és CSS nyelvek segítségével.
A webes fejlesztők között a sitebuilding egy „lenézett” munkafolyamat. Éppen emiatt írom ezt a posztot, hogy ideje lenne már a helyén kezelni. A jó sitebuild aranyat ér, igenis nehéz és komoly feladat, melyen egy webes, vagy mobil webes projekt sikeressége múlhat. Vegyük sorra, milyen fázisokból áll a sitebuilder munkája – ez a sorrend nyilván ízlés dolga.
Első fázis
A bedesignolt oldalakat át kell néznie, majd azokból gyors vázlatokat készít magának, hogyan is fog ez HTML formába kerülni. Sokan használnak CSS grid rendszereket, azok közül is a 960px széles a legelterjedtebb. A gridek használata megkönnyíti ezt a fázist, de csak akkor, ha már a tervező és a designer is eleve ebben gondolkodott. A lényeg, hogy felépíti a layoutokat HTML-ben és létrehozza hozzá a CSS-t.
Második fázis
Szükség van ugyebár CSS resetre. Minden böngészőnek van egy alapértelmezett CSS stílus készlete, melyek eltérnek egymástól. Éppen ezért hoztak létre különböző CSS reset stíluslapokat, melyek megpróbálják az összes böngészőt beállítani egy közös stílus készletre (a legtöbbet alkalmazott, legismertebb az Erik Meyer féle reset). Sokan mások által létrehozott megoldásokat alkalmaznak, mi ezekből gyúrtuk össze a ránk szabott változatot és arra esküszünk.
Harmadik fázis
Ki kell alakítani egy globális alap stílust, ami az egész oldalnak megfelel és jó alapot szolgáltat. Ehhez az összes oldalt végig kell nézni és meg kell határozni az alap font készletet, méretet, sor magasságot, a címsorok, lista elemek, űrlap elemek, normál és akció gombok stb. stílusát. Itt kell nagyon óvatosan eljárni! Ha ennél a fázisnál „hibázik” a sitebuilder, akkor a későbbi fejlesztések során rengeteg felesleges stílus felülbírálás keletkezik, ami egyrészt nagyobb CSS kód mennyiséget és lassabb renderelést eredményez, ezáltal rontva a felhasználói élményt. Kiemelten fontos, hogy a fejlesztők tudjanak a globális stílusokról és használják is azokat.
Negyedik fázis
„Darabolás”, ahogy viccesen nevezik. Ilyenkor a design állandó képi elemeinek kivágása történik. A jó sitebuilder tudja, hogy ezeket az ikonokat, logót, háttérképeket (amennyiben CSS-ben nem valósíthatók meg) érdemes CSS sprite(-ok) formájában tárolni. A gyors letöltés érdekében fontos, hogy minél kevesebb http request legyen. Minél kevesebb fájl kerül letöltésre, annál gyorsabban jelenik meg a böngészőben az oldal. A CSS sprite-oknál sok trükköt érdemes és kell alkalmazni, emellett a kivágott képek optimalizálásával is foglalkozni kell. A felhasználói oldalon egyáltalán nem mindegy, hogy a letöltött kép 80 kB, vagy 50 kB méretű.
Ötödik fázis
A tényleges HTML megvalósítás. Törekedni kell a minimális HTML kód használatára! Egyrészt a gyorsabb betöltés érdekében, másrészt a SEO szempontok miatt. „Minden manager tud HTML-ben programozni” – tartja a mondás, de egy „elegáns” HTML kód komoly szakmai kihívást jelent.
Mit kell tudnia egy sitebuildernek?
- a DOM a barátja
- ismeri az összes layout típust, legyen az fix széles, fluid, stb.
- a megfelelő HTML tageket használja az adott tartalomhoz (pl. ha táblázat, akkor <table>, ha felsorolás, akkor <ul>, ha számozott felsorolás, akkor <ol> és így tovább)
- CSS-t mélyrehatóan bírja, különös tekintettel a selectorokra, tudja, hogyan vonhatóak össze CSS utasítások (pl. background: #fff url(/image/background.gif) repeat-x;)
- ismeri az összes böngészőt és azok verzióinak kínjait (HTML, CSS)
- használja a HTML validatort és valid kódot ír
- kisujjában vannak a különböző CSS trükkök (hackek)
- tudja, mire van szükség a jó SEO-hoz és érti is az alapelveket
- legalább közepes szinten használja a photoshopot és/vagy fireworks-öt
- folyamatosan képzi magát! A még mindig befejezetlen HTML5 ajánlásait a böngészők programozói folyamatosan belefejlesztik az újabb és újabb verziókba, melyekkel lehetőségek tárháza nyílik meg az egyszerűsítés irányában
- webes tipográfia alapelveivel tisztában van
- szépérzékkel van megáldva
- a mobil webes sitebuild egy külön történet, a responsive megvalósítás és a különböző mobil eszközök problémái újabb ismereteket igényelnek
Az oldal betöltési sebessége
A betöltési idő nagyrészt az oldalak különböző elemeinek (képek, stíluslapok, JavaScriptek stb.) letöltésével és azok feldolgozásával telik, mely a teljes folyamat 80%-át teszi ki. Az elemek számának lecsökkentésével növelhető a betöltési sebesség. Ez a kulcsa a gyors oldalaknak!
Kedves vérbeli fejlesztők! Tudomásul kell vennetek, hogy a jó sitebuild és front-end fejlesztés sokkal fontosabb a felhasználói élményt tekintve, mint a legzseniálisabban optimalizált szerver oldali kód. ;) Nem véletlen egyébként, hogy világszerte külön cégek jöttek létre, melyek kizárólag sitebuild szolgáltatást nyújtanak. Ahogy látom, sajnos Magyarországon kevés a jó sitebuilder, és sok cég szenved az ilyen jellegű kompetencia hiányától. Kérlek, cáfoljatok meg!
Nyilván írhatnék még a bundle, minify hasznos és kötelező megoldásokról, de ezek már nem passzolnak igazán a sitebuild témakörébe – egyébként a sebesség optimalizálás is megér egy posztot. Majd. Később.
Néhány eszköz, ami sitebuilderként segítségedre lehet:
Megosztom
Tweetelem
Megosztom
Hozzászólások