Épp kapóra jön egy megrendelés, egy konferencia weboldalát kellene elkészíteni, nyitóoldallal és számos különböző aloldallal. Meredeken hangzik, de szeretjük a kihívásokat! Vágjunk is bele!
A jó hír az, hogy befejeztük a cikksorozat pusztán elméleti fejtegetős részét, mostantól konkrét példák segítségével folytatjuk a weboldalak világának feltárását. A rossz hír, hogy nem aprózzuk el, rögtön nagy fába vágjuk a fejszénket, ugyanis egy nagy becsben tartott konferencia, a 2009-ben immáron sokadik alkalommal megrendezendő Lorem Ipsum weboldalának elkészítésével bíztak meg bennünket. (Igen, most jutott eszükbe, hogy weboldaluk legyen.)
Első lépésben a nyitóoldalt (főoldalt) kell elkészítenünk, amely a megrendelő elképzelése szerint elmondja az először oda látogatónak, hogy miről szól a konferencia, a visszatérők számára pedig hírekkel szolgál a szervezés alakulásáról, arról, milyen új előadókat sikerült megnyerni, ők milyen előadást fognak tartani, az miről fog szólni. A főoldalról természetesen el kell tudnunk érni az összes aloldalt is (értsd: lesz rajta egy menü), ahol a megrendelő olyanokra gondolt, mint a konferencia részletes programja, helyszíne (hogyan lehet odajutni stb.), részvételi jelentkezőlap az érdeklődők számára, az előadók és előadásaik részletesebb bemutatása, valamint egyéb információk a messziről ide érkezőknek (szállodák, nevezetességek a városban stb.) – meg ami még majd eszébe jut (ahogy az lenni szokott).
Papíron stimmeljen
Ha a fentiek alapján kialakult valamilyen elképzelésünk arról, hogy milyen jellegű weboldalt szeretnénk készíteni, jöhet a papír és a ceruza vagy a toll, és kezdhetünk tervezni! Az első alkalommal még nem érdemes nagyon „elszállni”, úgyhogy a hagyományos utat követve függőlegesen háromfelé osztjuk az oldalt. Az így létrejövő főrészeket hívhatjuk akár fejlécnek, törzsnek és láblécnek, kezdő weboldalkészítők azonban vigyázzanak, hogy ne keverjék össze ezt az (X)HTML-oldalak fejléc (‹head›) és törzs (‹body›) fogalmával!
Hosszú órákon át tartó ötletelés és rajzolás után megszületik a tervrajz, amely alapján már lehet gondolkodni dizájnban
A középső részt vízszintesen osztjuk ketté: balra a menü, jobbra az oldal tényleges, változó tartalma jelenik majd meg. Jelenleg tehát úgy néz ki, hogy három állandó oldalelemünk lesz, amely minden oldalon megjelenik: a fejléc, a menü és lábléc. Természetesen a fejlécbe kerül a konferencia logója, helyszíne és időpontja, mindez valamilyen kattintható formában, hogy ezen keresztül a látogató könnyedén visszajusson a nyitóoldalra. Az oldal középső részének bal szélén megjelenő menüből érjük majd el az aloldalakat, illetve majd gondolkodhatunk az alatta levő üres terület hasznosításán is. Végül a láblécben a konferencia támogatóit, elérhetőségeinket, valamint szerzői jogi közlendőinket tárhatjuk majd a világ elé. A dolgok, persze, a későbbiekben még változhatnak, de kiindulási pontnak ez remekül megfelel.
Az oldalszerkezet felvázolása után elengedhetjük a fantáziánkat, és kezdhetünk dizájnban is gondolkodni – ami egyáltalán nem könnyű. Általában a megrendelőnek van némi elképzelése arról, hogy mit szeretne látni, milyen legyen az oldal színvilága, illetve ő adja a konferencia logóját, amely alapvetően meghatározhatja fejlécünk kialakítását. Amennyiben szabad kezet kapunk – tapasztalatok híján – bátran forduljunk inspirációért az internethez (például a CSS Zen Garden különböző dizájnjaihoz), ami nyilván nem azt jelenti, hogy valaki másnak az oldalát egy az egyben lemásoljuk. Gyűjtsünk ötleteket, vegyük észre a nem szokványos, érdekes megoldásokat. Nyugalom, weboldalt tervezni nem két perc! Esetleg olvassuk el az előző, 3. leckét.
Végül, ha összeállt a tervrajz, lássuk el azt minél több részlettel és adattal (színek, méretek) stb. Az előző leckében volt szó a változó és fix szélességű weboldalak közötti különbségről – a tervből derüljön ki, hogy ebben az esetben melyik mellett döntöttünk. Az egészet addig finomítsuk, amíg úgy érezzük, hogy nemcsak saját magunk, hanem bárki más számára is világos, hogy mit szeretnénk létrehozni. Ez különösen akkor fontos, ha a tényleges grafikai munkákat valaki más fogja csinálni.
Polihisztorok előnyben
Képrétegek (balra): az egyes oldalelemeket egymástól elkülönítve rajzolhatjuk meg
Első lépésként rögtön eltöprenghetünk azon, hogy mekkora „vásznat” hozzunk létre a leendő terv számára. A méretet alapvetően a tervrajzban is szereplő oldalszélesség határozza meg, fix szélességű oldalaknál azonban érdemes lehet a megadott értékeknél egy kicsit nagyobb képpel dolgozni, hogy a monitorok nagyobb felbontása miatt keletkező „holttér” is rákerüljön a tervre. Ezt a jelenleg divatos dizájnirányzatok ügyesen ki szokták használni valamilyen képi hatás (például árnyék) kialakításához.
Érdemes lehet segédvonalak behúzásával felvázolni a fejléc és a lábléc helyét és méretét. Természetesen az oldal függőleges mérete elsősorban a rajta elhelyezett tartalom mennyiségétől függ majd, ezért ne foglalkozzunk azzal, hogy a lábléc nem is oda fog esni, ahova rajzoljuk. A lényeg, hogy maradjon elég hely középen az oda kerülő elemek (menük, szövegdobozok stb.) megrajzolására.
A munkaverziókat mindenképpen a grafikus program saját fájlformátumában mentsük el, hogy képrétegeink is megmaradjanak (a webbarát fájlformátumok – GIF, PNG, JPG – egyike sem támogat képrétegeket). Majd az elkészült látványtervből készítünk egy JPEG-változatot, hogy azt könnyen meg tudjuk mutatni másoknak is. Ha tervünket elfogadták, elkezdhetjük azt darabjaira szedni: a hátterek, a logó és az egyéb grafikai elemek mind-mind külön képállományba kerülnek. Ne felejtsük el, hogy nem mindenkinek áll a rendelkezésére több megabites kapcsolat, úgyhogy a megfelelő fájlformátum megválasztásával próbáljunk egyensúlyozni a fájlméret és a képminőség között.
Amihez már értünk
Ha nem nekünk kell a pixeleket összevadászni, meg sem kell várnunk, amíg a grafikus befejezi a munkáját, máris hozzáláthatunk összerakni az oldal tartalmi rétegét, azaz az XHTML-kódot.
Így néz ki egy teljesen üres (X)HTML oldal – elmenthetjük sablonnak későbbi munkákhoz
Először is építsük fel a weboldal vázát a kötelező elemekből: DTD, ‹html›, ‹head› és ‹body›. (Ha nem rémlene a dolog, térjünk vissza a 2008. márciusi számban található első leckéhez, és elevenítsük fel az ott tanultakat.) Ami a DTD-t illeti, a szabványok betartása iránt érzett eltökéltségünknek megfelelően a legszigorúbb XHTML 1.0 Strictet választottuk dokumentumtípusként. A fejlécében (‹head›...‹/head›) megadjuk az oldal címét mint kötelező elemet, majd egy ‹meta› tagben definiáljuk az oldal megjelenítéséhez szükséges karakterkészletet (a magyarázatot lásd az Árvíztűrő tükörfúrógép címszó alatt). Az oldal törzsrésze (‹body›...‹/body›) egyelőre üres, ám nem sokáig.
Természetesen a tervben vázolt főbb strukturális elemeket ‹div› tagekkel fogjuk felépíteni: a három fő oldalrész – fejléc, közép, lábléc – egy-egy külön ‹div›-be kerül, amelyeket természetesen azonosítókkal is ellátunk. Bár az azonosítókhoz hagyományosan mindenki angol szavakat használ, a könnyebb érthetőség kedvéért maradtunk a magyar megfelelőknél, még ha ékezet nélkül egy kicsit sután is mutatnak. Azért, hogy egyértelmű legyen, melyik mit is tartalmaz, mindegyik elé elhelyeztünk egy úgynevezett megjegyzést.
Három fő ‹div›-ünk tehát leírja majd a teljes oldalt, ám a CSS Zen Gardennél is látott módon mi is „becsomagoljuk” ezeket egy úgynevezett befoglaló ‹div›-be. Ezt angolul container vagy wrapper azonosítóval szokták ellátni, mi a jelzésértékű teljes_oldal azonosítót használtuk ebben az esetben.
Megtöltjük tartalommal
Az oldal már ebben a formájában is teljesen működőképes, más kérdés, hogy egyelőre csak szerkezeti elemeket tartalmaz, tartalmit még nem, ennélfogva meglehetősen üresnek tűnik egy böngészőben. Ideje ezen változtatni.
A fejlécben megjelennek az első tartalmi elemek, a középső rész pedig osztódik
Kezdjük a fejléccel, amelynek két fontos információt kell közölnie az ide látogatóval: a konferencia (egyben az oldal) címét, valamint azt, hogy arra mikor és hol kerül sor. Ezek leírásához címsorokat fogunk használni. A végleges fejlécben itt természetesen a konferencia logója fog megjelenni a szövegek helyett, ám a logó dizájnelem, az oldal kinézetéhez van inkább köze, ezért majd a stíluslap gondoskodik arról, hogy a címsorok eltűnjenek, és a helyükön megjelenjenek a kívánt képek. Gondolnunk kell viszont azokra is, akik nem rendelkeznek kép megjelenítésére alkalmas eszközzel, esetleg látássérültek, és felolvasószoftverrel böngészik a webet. Számukra a két címsor fontos információt hordoz.
A csúnya felsorolásból majd a CSS varázsol igazi menüt
A középső részt két további ‹div›-vel (bal_panel és jobb_panel) felosztjuk a korábban megbeszélt két részre, majd hozzáláthatunk a menü elkészítéséhez. Biztos mindenki látott már weboldalon valamilyen menüt; függetlenül attól, hogy az vízszintes vagy függőleges volt, egyértelműen kijelenthetjük róla, hogy az a menüpontok felsorolásából állt. Mivel weboldalunk tartalmi részének leírásához a megfelelő strukturális elemeket szeretnénk használni, ez a felismerés nagyon fontos, mert így máris tudjuk, hogy menünk például nem egy kupac bekezdésszövegből (‹p›) fog állni, hanem a megfelelő (X)HTML-elemet, a felsorolást (más néven rendetlen listát) fogjuk használni a kialakítására. (Ismétlés: 2. lecke) Először létrehozzuk a felsorolást – ‹ul›...‹/ul› tagek menu azonosítóval –, majd ezen belül elhelyezzük leendő menüpontjainkat mint listaelemeket, a ‹li›...‹/li› címkepárokkal. Később ezek még újabb pontokkal bővülhetnek, sőt a megrendelő meglebegtette, hogy ő szívesen látna többszintű menüt is akár – erre még visszatérünk.
A félkész XHTML-kód eredményét látva komoly képzelőerő kell ahhoz, hogy meglássuk a végeredményt
Mint ahogy visszatérünk majd hamarosan az 5. leckével, amelyben megtöltjük tartalommal az oldal jobb oldalát és láblécét, elgyönyörködünk a végeredményben, majd átballagunk a grafikusokhoz, és megkérdezzük, hogy készen vannak-e. Mert ha igen, akkor végre elkezdhetünk ismerkedni a régóta ígért stíluslapokkal.
***
Hasznos tudnivalók
- 1. Árvíztűrő tükörfúrógép
Az úgynevezett metaadatokról korábban csak érintőlegesen volt szó: ezeket használjuk arra, hogy a böngésző, illetve a keresőoldalak számára fontos információkat közöljünk. Ezek természetesen nem jelennek meg magában az oldalban, mégis nélkülözhetetlen részei annak. A CSS Zen Garden forráskódjának elemzésekor láttunk példát arra, hogyan adhatjuk meg az oldal készítőjének nevét, az oldal leírását vagy különböző kulcsszavakat, amelyek alapján a keresők majd eltalálnak oldalunkra.
Ezzel szemben a content-type azt mondja meg a böngészőnek vagy bármilyen más programnak, amely az oldalunkat feldolgozza, hogy az abban található szöveges információt milyen karakterkódolásnak megfelelően kell megjeleníteni, kezelni. Esetünkben ez azért fontos, hogy a magyar ékezetes betűk, különös tekintettel a hosszú ő-re és ű-re, helyesen jelenjenek meg a képernyőn. Ha valaki soha nem hallott még karakterkódolásról, a közel 50 éves történet lényege annyi, hogy anno a szöveges információ megjelenítéséhez létrehoztak egy őskarakterkészlet, amely alapvetően az angol ábécé 26 kis- és nagybetűjére épült. Később ezt kezdték el toldozni-foldozni a többi nyelv karaktereivel, ám mivel akkoriban még bájtban mérték az információt, a világ összes nyelvének egzotikus betűi és írásjelei nem fértek be egy kódtáblába. Kénytelenek voltak tehát nyelvenként, nyelvcsoportonként, tájegységenként stb. külön kódtáblákat létrehozni. Negyven-egynéhány évvel később a nyelvek és betűik végre egymásra találtak a Unicode kódolásban, úgyhogy sokan az ennek megfelelő UTF–8 kódolással készítik oldalaikat. Mi azonban – talán kissé maradi módon – az iso-8859-2, más néven latin2 (a Windowsban: közép-európai) kódolást közelebb érezzük magunkhoz, ezért a példákban ezt használjuk.
A leírtak illusztrálására adjunk hozzá egy ‹h1› címsort az egyelőre még üres HTML-dokumentumunkhoz árvíztűrő tükörfúrógép szöveggel, jelenítsük meg egy böngészőben. Ezt követően cseréljük ki a kódolást iso-8859-1, azaz latin1-re, és nézzük meg ismét az eredményt. Megpróbálhatjuk azt is, hogy kitöröljük a ‹meta› címkét az oldalból, ekkor a böngésző a saját alapbeállítása szerinti karakterkódolást fogja használni a megjelenítéshez, amely a magyar nyelvű Windows operációs rendszeren feltehetően a Közép-európai (iso-8859-2) lesz, mindenhol máshol pedig helytelenül fognak megjelenni ékezetes betűink – ezt a hibát tehát véletlenül se kövessük el.
Fontos! Vegyük észre, hogy a ‹meta› tagnek nincs lezáró párja, tehát a korábban tanult 4-es számú XHTML-parancsolatnak megfelelően saját magát zárja le: ... /›.
- Gyors megjegyzés
Az (X)HTML nyelv lehetőséget biztosít számunkra, hogy megjegyzésekkel lássuk el oldalunk kódját, így az mások számára is könnyebben átlátható, jobban érthető lesz. A megjegyzés a ‹!-- karakterekkel kezdődik és a --› karakterekkel ér véget, a kettő közé pedig tetszőleges, akár ékezeteket is tartalmazó szöveg írható. Ez természetesen nem jelenik meg az oldalban, kizárólag annak forrásában. A megjegyzéseket használhatjuk HTML-részletek „elrejtésére” is: ha egy HTML-kódsort veszünk közre a két jellel, az olyan, mintha kitöröltük volna az oldalból, a böngészőben nem fog megjelenni. Az oldal tesztelésénél vagy kísérletezésnél sokkal kényelmesebb így ki-be rakosgatni a kódrészleteket, mintha ténylegesen kitörölnénk, majd visszaírnánk őket. Arra azonban ügyeljünk, hogy ne szakítsunk félbe egy taget megjegyzéssel, mert az általában kaotikus eredménnyel jár.
