Az első magunk készítette weboldal éppolyan emlékezetes lehet, mint mondjuk az első szerelem. A folyamat, amelynek során összetákoltuk, feltöltöttük, behívtuk, és egyszer csak megjelent a böngészőben... valami tagadhatatlanul katartikus élmény. (Igen, a miénk is rettenetesen nézett ki.)
A kilencvenes évek közepén még kevesek kiváltsága volt az internet, fiatal és kiforratlan volt a World Wide Web, azaz a világháló, és maguk a böngészők is gyerekcipőben jártak. Ennek ellenére - vagy talán éppen ezért -, már akkor is sokunk számára jelentett izgalmas elfoglaltságot, hogy az oldalak „mögé" nézzünk, lássuk, mitől és hogyan működnek, és hogy mi is valami hasonlót hozzunk létre. Több mint tíz év elteltével minden megváltozott. Egykor elképzelhetetlen sebességgel tör utat az internet mindennapjainkba, az alapvető webes technológiák meglehetősen kiforrottnak tekinthetők, és a böngészők is felnőttek (a feladathoz) - már amelyik, ugye. Változatlan maradt a kíváncsiság, az alkotás iránti vágy, hogy mi is létrehozzunk valamit, amit majd mások megnézhetnek a böngészőjükben. Egy saját weboldalt.
Nemcsak a web, a weboldalak készítésének módja is rengeteget változott az évek során. Ma már tudjuk, hogy amikor mi kezdtünk ezzel foglalkozni, kizárólag egyféleképpen lehetett weboldalakat készíteni: rosszul. Ehhez képest a manapság rendelkezésünkre álló technológiák, alkalmazások, lehetőségek, valamint az interneten fellelhető tengernyi információ komoly előrelépést jelent, így ma már kétféleképpen lehet weboldalt készíteni: jól vagy rosszul. Sorozatunkkal épp az a célunk, hogy bemutassuk, hogyan és miért érdemes jól csinálni, és hogy ez egyáltalán nem nehezebb, mint ha a régi, rossz, ám elsőre talán egyszerűbbnek tűnő beidegződéseket követnénk.
A száraz módszertant mindenki utálja (pont, mint a hosszúra nyúló bevezetőket), ezért igyekszünk majd ezt rövidre fogni, és inkább a mindennapi életből vett gyakorlati példák segítségével átadni a tudnivalókat. Íme három főbb témakörünk: az oldalak tartalmi részét leíró HTML nyelv alapvető „építőkockái"; az oldalelemek megjelenését befolyásoló stíluslapok (azaz a CSS), valamint az egyes elemek viselkedését befolyásoló, az oldalt interaktívabbá, jól használhatóvá tevő programok (JavaScript) lesznek. Mivel az újság nem feltétlenül a legjobb közeg hosszú forráskódok közlésére, a cikkben csak a leglényegesebb kódrészleteket mutatjuk majd be, a teljes kód pedig februári számunk CD/DVD mellékleten található.
Felszerelés
Ahogy a tanévkezdés előtt a diákok felkeresik a papír-írószer boltokat, hogy megvásárolják a szükséges taneszközöket, nekünk is össze kell állítanunk a weboldalkészítéshez szükséges egységcsomagunkat. Szerencsére az internet bővelkedik kiváló ingyenes szoftverekben, ezért a megfelelő felszerelés összeállítása számunkra egy fillérbe nem kerül. Mindenképpen szükségünk lesz egy, de inkább több böngészőre, egy jó szerkesztőprogramra, amelyben az oldalainkat megalkothatjuk, és bár a grafikai kérdésekkel egyelőre csak érintőlegesen foglalkozunk, biztosan kell majd valamilyen grafikus alkalmazás a különböző képi elemek (hátterek, fülek, gombok stb.) létrehozásához, szerkesztéséhez.
Böngészők
Mivel erről később még lesz szó, a többes szám magyarázataként elégedjünk meg most azzal, hogy a böngészők sajnos nem működnek egyformán. Ez azt jelenti, hogy ha elkészítünk egy oldalt, elég jó az esélye annak, hogy az máshogy fog kinézni Internet Explorerben, máshogy Firefoxban, és talán egy kicsit máshogy Operában. Emiatt a profi weboldalkészítők kénytelenek szinte valamennyi elérhető böngészőn, sőt azok valamennyi használatban levő verzióján tesztelni munkájuk gyümölcsét. A kezdőktől ezt szerencsére senki sem várja el, számukra a Firefox mindenkori legfrissebb verziója tűnik jó választásnak, több okból is. Egyaránt elérhető Windows, Mac OS X és Linux operációs rendszer alatt, elfogadható mértékben támogatja a webes szabványokat, de ami még jobb, kiváló kiegészítők tölthetők le hozzá, amelyek jelentősen megkönnyítik majd az elkerülhetetlenül becsúszó hibák felderítését és kijavítását. ?pp ezért a cikk során ezt fogjuk használni elsődleges böngészőként és néha át-átugrunk majd az Internet Explorerbe, ha a helyzet úgy kívánja. A többi hasonló szoftver felhasználóitól elnézést kérünk, egyben arra bátorítanánk őket, hogy nyugodtan próbáljanak ki minden példát saját kedvenc programjukban is.
Szerkesztők
Az interneten fellelhető webszerkesztő programokkal valószínűleg Dunát lehetne rekeszteni. Alapvetően két nagy csoportba sorolhatók be: vannak az úgynevezett vizuális szerkesztők, valamint a kódszerkesztők. Előbbiek megjelenésükben inkább a grafikai alkalmazásokra hasonlítanak; az oldalt vizuális eszközökkel, majdnem „rajzolva" tudjuk létrehozni, míg a program magától legenerálja az ehhez szükséges forráskódot. Több okból sem ajánljuk az ilyen alkalmazások használatát: egyrészt a többségük pocsék kódot generál, amely komoly eltérésekhez vezethet különböző böngészőkben nézve. A fő probléma azonban az, hogy ezek használatával nem tanulunk semmit, pedig ugye, épp az volna a cél.
Ezzel szemben a kódszerkesztők első ránézésre talán a Jegyzettömbre hasonlítanak, ami nem véletlen, hiszen maga a Jegyzettömb is felfogható kódszerkesztő programként (sokan használják is weboldalkészítésre). Ezekben nekünk kell kézzel megírnunk a weboldalt leíró HTML-kódot, amelyet a program különböző kényelmi funkciókkal támogat. Ilyen például a többszörös Undo lehetősége (műveletek több lépésben történő visszavonása), az egyes kódrészletek eltérő színezése (áttekinthetőbbé teszi a kódot), a sorok számozása, a kódösszevonás, az automatikus eltolás, valamint számos más fejlett szerkesztési és megjelenítési szolgáltatás.
Teljesen mindegy, melyik kódszerkesztőt használjuk, amíg az képes a bevitt kódot .html kiterjesztésű, normál szövegfájlba menteni. A mi két nagy kedvencünk ezen a téren a Notepad2, illetve az egy ablakban több állomány szerkesztésére is képes Notepad++.
Grafikai szoftver
Bizonyára sokak számára meglepő lesz a következő kijelentés, de nem kell a Photoshop! Hacsak nem vagyunk profi grafikusok és/vagy fényképészek, akiknek a számítógépén amúgy is ott van már, első weboldalaink megtervezéséhez keressünk egy egyszerűen kezelhető, ingyenes vagy olcsó grafikus alkalmazást. Ugyanúgy megfelelhet e célra az ingyenes GIMP (Windowsra itt) vagy Paint.NET, mint az olcsóbb, de fizetős kategóriából a Corel Paint Shop Pro Photo vagy a már szintén Corel-színekben megjelenő Ulead PhotoImpact. Rövidesen látni fogjuk, hogy az első lépések megtételéhez egyáltalán nincs szükség grafikai alkalmazásra, és ha már eljutottunk oda tudásban, hogy kezdhetünk grafikában is gondolkodni, akkor sem kell túlzásokba esni. Weboldalunk nem attól fog jól kinézni, hogy milyen hiper-szuper látványos effektussal írunk rá ki 2-3 szót, ehelyett inkább arra törekedjünk, hogy az egész oldal összhatásában sugalljon kedvező képet.
A megvilágosodáshoz vezető út
A következő hónapban megkezdjük az ismerkedést a HTML-lel, leendő weboldalaink tartalmának leíró nyelvével, emellett elkezdjük tárgyalni a tartalom - megjelenés - viselkedés rétegek koncepcióját. Ez nagyon röviden arról szól, hogy minden általunk létrehozott weboldal tulajdonképpen három rétegből épül fel: legalul található a tartalmi réteg (maga a HTML-kód), erre épül rá a megjelenés rétege (ezt a tényleges dizájnstíluslapok írják le), és végül az egésznek a legtetején ül az ezek viselkedését befolyásoló programkód (JavaScript). Nagyon fontos, hogy az egyes rétegeket egymástól szigorúan elkülönítve kezeljük, ne keverjük őket - ezeknek önmagukban is meg kell állniuk a helyüket. Például az oldalnak akkor is normálisan kezelhetőnek kell maradnia, ha a böngészőben ki van kapcsolva a JavaScript-támogatás (eltűnik a harmadik réteg), a tartalmi rétegnek pedig akkor is értelmesnek, értelmezhetőnek kell maradnia, ha a böngésző valamiért nem támogatja a stíluslapokat (például mert egy látássérült felhasználóknak készített felolvasószoftver). Tapasztalatból tudjuk, hogy ezt a koncepciót elsőre nem egyszerű megemészteni, illetve ha az ember már évekkel korábban elkezdett foglalkozni weboldalkészítéssel, de a „rossz úton" indult el, onnan sem könnyű rátalálni erre az általunk követendőnek tartott módszerre. Éppen ezért mutatunk be egy több szempontból is nagyon látványos példát.
Látogassuk meg a www.csszengarden.com címen található oldalt. Egy meglehetősen letisztult, puritán stíluselemekből építkező oldalt látunk, melynek angol nyelvű szövege éppen a fenti koncepciónak azt a részét tárgyalja A megvilágosodáshoz vezető út címen, hogy a tartalom és a megjelenés két egymástól teljesen elkülönülő rétegként alkotja a weboldalt, egyben lehetőséget kínál arra, hogy külön-külön letöltsük a tartalmi részt (a HTML-forrást) és a megjelenítési részt, az oldal kinézetét leíró stíluslapot (CSS). Nem fontos megérteni a szöveget, elég, ha elraktározzuk magunkban az oldal kinézetét. Ezután a lap jobb szélén, a „select a design" (válassz egy dizájnt) felirat alatti pergamen hátterű részén kattintsunk bármelyik hivatkozásra - de ne a designerek nevére.
Így egy másik weboldalra jutunk - vagy mégsem? Látszólag igen, hiszen amit látunk, az teljesen máshogy néz ki. A szöveg azonban ugyanaz, még akkor is, ha egyes részei most máshol, másképp jelennek meg. Az oldal tartalmi rétege változatlan maradt, ám az előző, letisztult kinézetért felelős megjelenítési réteg helyett egy újat kapott (új stíluslapot), amely egy teljesen eltérő kinézetet ír le. Próbáljunk ki több dizájnt, meg fogunk döbbenni, hogy pusztán a stíluslapok cserélgetésével mire lehetünk képesek.
Még egy kísérlet: hívjuk elő a Web Designer eszköztárat az ikonjára kattintva, és CSS menüben válasszuk ki a Disable Styles -> All Styles menüpontokat. Ezzel tulajdonképpen „kikapcsoltuk" az aktuális megjelenítési réteget; amit most látunk, az maga a nyers tartalom. (Ez egyébként nem teljesen igaz, de az egyszerűség kedvéért fogadjuk most el tényként.) Vegyük észre, hogy az oldal továbbra is tökéletesen olvasható és értelmezhető maradt, amit a felépítéséhez használt tartalmi struktúrák - a különböző fontosságú címsorok, a bekezdések, illetve a lap alján a felsorolások - tesznek lehetővé. Pontosan ezek azok a HTML-„építőkövek", amelyekkel a következő alkalommal elkezdünk ismerkedni.
