Alapok: Frontend

Ha többre van szükségünk, mint a Blogger (vagy bármely más blogszolgáltató) által kínált egyszerű módosítások, kénytelenek vagyunk belenyúlni az oldal kódjába. Ehhez viszont ismernünk kell az azt felépítő nyelveket, különben csak kókányolás lesz az egész. Félreértés ne essék: úgy is lehet. Mindenhonnan összecsipegetett kódokkal "ide tedd, oda másold" leírások alapján az alap sablonokat kiegészítve is remek dizájnt lehet varázsolni. A gond ott kezdődik, ha ezt módosítani kell, mert nem működik, vagy nem úgy működik, amit mi szeretnénk. Sok dizájnnal foglalkozó blog tesz közzé kisebb kódokat, és gyakran le is írják, mely részek módosításával tudjuk cserélni a színeket, talán a méretekről is ejtenek pár szót; de ha komolyabb változtatásra van szükségünk, magunkra vagyunk hagyva. Ilyenkor vagy megalkuszunk, vagy némi kutatómunka után kijavítjuk, és reménykedünk, hogy jól csináltuk. Ám mi történik akkor, ha még egyedibb dolgokra van szükségünk? Nincs más, mint előre: vessük bele magunkat a webprogramozásba! No, nem kell sietni, ez egy egész óceán! Mi csak épp belemártjuk a lábujjunkat.

Frontend

Ha fellépsz egy weboldalra, minden, amit ott látsz, szigorúan meghatározott sorrenddel és kinézettel kell, hogy rendelkezzen, különben a böngésző nem tudná mindig ugyanúgy megjeleníteni. A tartalmi dolgokért a HTML nyelv felelős, a kinézetet a CSS irányítja, a bonyolultabb, programozást igénylő dolgokat meg a JavaScript. Röviden és nagyon leegyszerűsítve ennyi a frontend. A frontend (vagy front end, esetleg kötőjellel, mindenki másképp írja) a program azon "vége", amelyik a "felhasználó felé néz". Tehát amivel te, böngészés közben, találkozol, és amit a Blogger rendszerében amúgy szerkeszteni tudunk. A másik, rejtett "vége" a backend, ebbe nem tudunk belenyúlni. (Ha egyszer eljutunk odáig, hogy a Blogger működését kiveséztük, mindent megértettünk, nincs olyan elem, amit ne tárgyaltunk volna már, és a határokat túlfeszítettük, akkor talán belekezdünk egy saját blogmotor írásába. Akkor esetleg előjön, addig biztosan nem.) Használhatjuk az általa biztosított dolgokat, elérhetjük az adatbázisban tárolt adatokat (mondjuk a bejegyzések szövegét, címét, publikálási idejét stb.), de nem módosíthatjuk a működtetésért felelős programkódokat. Mindent a kliens, a felhasználó oldaláról kell elérnünk. Emiatt tűnik úgy, hogy látszólag egyszerű dolgokat, pl. a blogposztok megjelenésének megfordítása, csak hosszas macerával valósíthatóak meg. Valamit valamiért. Cserébe a Google biztosít nekünk egy ingyenes, működő rendszert, amit majdnem teljesen testreszabhatunk, és nem a mi fejünk fáj, ha valami gond adódik az adatbázissal. Használjuk hát ki ezt a „majdnem teljes” testreszabhatóságot, és ne elégedjünk meg az alapokkal! Ehhez tanulnunk kell egy keveset, elsőként a HTML-t, ami, mint említettem, elsősorban a tartalmi részek megjelenítéséért felel.

Válasszunk szerkesztőt!

A programozás során a legjobb tanulás a gyakorlás. Ez igaz a nem programozási nyelvek esetében is, mint a HTML (erről később). Ezért, és hogy az élmény teljes legyen, elhagyjuk a Bloggert egy kis időre. Nyugalom, visszatérünk! Nem megyünk messzire, épp csak a Jegyzettömbig. (Linux felhasználóknak mondjuk gedit, bár ez alapszinten is csalás; Mac alatt pedig TextEdit Plain text módban.) Igazából bármilyen egyszerű szövegszerkesztő megteszi, de mivel Windows alatt ez az alap választás, miért töltenénk le bármi mást? „Na de Szuzs! Én már programoztam egy keveset, és a Jegyzettömb a lehető legrosszabb választás, hidd el nekem!” Szinte hallom az ellenérveket. Nem, nem, az első leckéknél maradunk ennél. Igen, vannak jobbak, NotePad++, Sublime Text 3, hogy a webre legnépszerűbb Windows választásokat említsem, de nekünk egyelőre mindez nem kell. Méghozzá azért, mert induljunk el előbb a nehezebb úton, és csak utána váltsunk a könnyebbre! A haladóbb szerkesztőkkel alapvetően az a gond, hogy képesek automatikus szövegkiegészítésre, ami gyakorlott programozóknak nagy előny, de amíg tanuljuk a nyelvet, nem szabad használni. Ha mindig csak egy tabulátorba kerül a szükséges szó kiegészítése, sosem tanuljuk meg rendesen. Ha a program automatikusan bezárja a tageket, magunktól elfelejtenénk. A Jegyzettömb megfelel. Vannak más programok, a Wordnek is van webes megjelenítése, létezik a DreamWeaver (Adobe), vagy a SharePoint Designer (MS Office), amik engedik „összekattintani” a kódot, ám ezzel ugyanott vagyunk: ha tisztességes munkát akarsz kiadni a kezedből, kerülöd. Látatlanban megmondom neked, hogy jobb, rövidebb kódot tudsz összehozni, mint azok. A Jegyzettömb nagy hátránya (ami nem is annyira nagy), hogy nincs szintaxis kiemelés, mint a Blogger HTML-szerkesztő rendszerénél. (Ezért mondtam, hogy a gedit csalás. Annak van. Linux alatt valahogy mindig szebb az élet, ha programozni kell.) Nem baj, majd megtanulunk nagyon odafigyelni a helyesírásra. Mert ez, bármennyire unalmas hallani, fontos. Itt minden elírás számít. Később, ha nagy kódokról lesz szó, úgyis váltunk egy tisztességes szerkesztőre, ami mindent tud, addig marad ez a módszer. Én a blogon használok szintaxis kiemelést, ez alapján könnyebb lesz ellenőrizni a beírt szöveget. Apropó beírás: nem másolás-beillesztés! Így bárkinek menne. Mi, mint mondtam, a nehéz úton haladunk, és kézzel pötyögjük be a dolgokat. Ha kell, kétezer soron keresztül. Nagy előnye, hogy az emberben biztosan rögzülnek az alapok, illetve megtanul optimalizálni, rövidíteni. (Ki akar kétezer sort írni, ha megoldható csak ezerrel?) Oké, nem mindig kell feltalálnunk a kereket, ha olyan dolgokra lesz szükségünk, amiket már megírtak előttünk, majd másolunk bőszen. De addig: nadrágot (szoknyát) felkötni, indul a gépelés!

Megjegyzések