Hunlap, hun nem lap [updated]

Vigyázat, ez hosszú lesz.

Tegnapelőtt Márkus Emília villájában volt szerencsém továbbképzés-szerűséget tartani, ami egyrészt a környezet miatt volt nagyon jó érzés, másrészt pedig a kollégák érdeklődése és számtalan kérdése (meg az utána tartott rövid beszélgetés) miatt volt élvezet. Sok mindenről volt szó, de most számomra az egyik legfontosabbat és legérdekesebbet emelném ki.

Sok szó esett a könyvtári honlapokról. Abban nagyrészt megegyeztünk (és a New York Public Library honlapjának segítségével bizonyítást is nyert), hogy a Fővárosi Szabó Ervin Könyvtárának webes megjelenése, hát mondjuk hagy maga után némi kívánni valót. És hogy ez nem elszigetelt probléma, hanem általános.

 

Tudom, hogy volt számtalan kísérlet arra, hogy a könyvtár és honlapja viszonyát meghatározzák, és ennek megfelelően alakítsák ki az utóbbit. Mára nekem kb. az a véleményem alakult ki, hogy olyan a kettő közt a viszony, mint a könyvtár és pl. az enteriőrje között. Alapvetően meghatározza a felhasználó véleményét és képét a könyvtárról. Tehát hiába van széleskörű szolgáltatási rendszere és fantasztikus személyzete egy könyvtárnak (erre szerencsére rengeteg példa van), ha a weben oda látogató azt látja, amit.

Az derült ki a NYPL példájából (is), hogy a kevesebb az bizony több. Általános problémának érzem azt, hogy rengeteg olyan információ van a könyvtárban, amit természetesen meg kell jeleníteni, de egyáltalán nem egyszerre, és főleg nem úgy, ahogy az manapság szokás. Nagyon szeretem nézegetni az újabb és újabb dizájnokat, valamint ha találok valami usability-s vagy hasonló cikket, általában el szoktam fogyasztani (főleg ha magyar). Van hozzá egy olyan-amilyen ízlésem, és ennek eredményeképpen általában sírni valónak találom ezeket a lapokat használhatóság és úgy általában kinézet tekintetében.

Ekkor jött a jogos kérdés, ami állandóan ott lebeg amúgy is a szemem előtt: na és akkor mi van a sajátunkkal, ha már ennyire okos vagyok? Érdekes kérdés, a válasz nem túl egyszerű, ugyanis próbálok a magam szabta követelményeknek megfelelni, ugyanakkor nagyon elégedetlen vagyok az eredménnyel. Egyelőre ott tartok hogy…

MOMEK

Mielőtt belevágok élve a lehetőséggel, egy kicsit hadd magyarázzam a bizonyítványt, ami nagyrészt az alább felvázolt pontok után válik nagyrészt érthetővé.

Jelenleg a MOME Könyvtár honlapja blogmotoron fut. Ez így is fog maradni, míg én felelek érte, azt hiszem, a blogom ismeretében ezt nem kell részletezni. Ami a megjelenést illeti, az holtbiztos fog változni. Egyébként az utóbbi egy évben (amióta megvan ez a lap), azóta változott is, hol így, hol úgy, néha kényszerűségből (a WordPress frissítés ledobta a témát, az pedig a megtervezett előlapot, ami a blogot portálként jelenítette meg), néha kedvtelésből (sajnos/szerencsére szeretek ilyenen dolgozni), de legtöbbször igyekeztem a saját szempontrendszeremet megvalósítani.

  1. Fontos a portálszerű megjelenés. De érdemes lenne tanulni azoktól a webhelyektől, amelyek a könyvtárral ellentétben, iszonyatos tömegű információt jelenítenek meg, akár percről percre. Sokkal fontosabb az áttekinthető, jól strukturált, letisztult megjelenés, mint az, hogy minél több információt zsúfoljunk egy helyre. Ami szerintem lényeges: a szolgáltatások, katalóguskereső, hírek, RSS. Ennyi. A többi pedig elérhető máshogy.
    És ha már iszonyatos tömegű információ: szerintem kutya kötelessége lenne a könyvtár állományának, hogy a honlapban szervesen megjelenjen. És ha már blogmotornál tartunk, akkor itt van hozzá a Scriblio. Sokkal értékesebb tartalom tud lenni, mint mondjuk az Események pont.
  2. A zöld-barna-rozsdaszín legjobb esetben is ’90-es évek közepe. Nem mondom, hogy a mostani irányzatok időtállóbbak, de egyrészt lehet válogatni az irányzatok közt (grunge, minimál, retro stb.), másrészt a mai eszközökkel (CMS témák, CSS, minták, gallériák, tervezési segédeszközök stb.) sokkal gyorsabban és egyszerűbben lehet vizuálisan is megvalósítani az elképzeléseinket.
  3. Ne féljünk sok-sok képet kitenni a lapra, de azt mindenképpen érdemes szem előtt tartani, hogy ezek a képek illusztrációk, nem pedig témák, még ha a könyvtárosokról vagy az épületről/állományról is készültek. Egy-egy jól elhelyezett (és jól megcsinált – kompozíció, kivágás) kép nagyot dobhat a lapon. Ehhez mindenképpen érdemes segítséget kérni profi szakembertől, biztos, hogy előbb-utóbb talál az ember segítőkész, fotózni tudó embert a környezetében. (Én persze a MOME fotószakosaival könnyen vagyok…) És még egy fontos dolog: ne megás képeket tegyünk ki. Erre két módszer van: vagy egy Irfanview-típusú képnézegetővel megnyitjuk, és ott a Kép/Szerkesztés pontban az Átméretezés paranccsal oldjuk meg a dolgot, vagy feltöltjük egy tárhelyre (Flickr/Picasa), ott pedig már kapunk olyan linket, amelyet akár egy az egyben beilleszthetünk a kívánt helyre, és így nem fog órák hosszat töltődni a könyvtár lapja – legalábbis nem a képek miatt.
  4. A megfogalmazásnál nagyon-nagyon kerüljük a hivatalos formákat. Lehet, hogy a könyvtárunk az egyik legfontosabb közintézmény a városban/legnagyobb szakkönyvtár/legkomolyabb kutatóknak van, de ez nem számít. Tényleg. Nem kellenek a bürokratikus, hivatalos stílus kitekert körmondatai, lehetetlen megfogalmazásai, rövid, lényegretörő szövegek kellenek, közvetlen, könnyen olvasható és éretelmezhető megfogalmazásban. Lehet, hogy ez előszörre nehezen fog menni, de aztán belelendül az ember, és előbb-utóbb meg fog látszódni ez a visszajelzéseken is. Pl. kevesebb kérdés fog előfordulni olyan dolgokkal kapcsolatban, amit pedig leírtunk. A másik lényeges dolog, hogy ha hosszabb szöveget írunk, akkor tagoljuk. Bekezdésekre, felsorolásokra, emeljünk ki félkövérrel és dőlttel (de soha ne aláhúzással, ezt hagyjuk meg a linkeknek).

Mount Prospect Public Library

Az én okoskodásomból kb. ennyire telt. Szerencsére van nálam egy csomó okosabb ember, akik le is írják, hogy ők erről mit gondolnak. Többek közt a Smashing Magazine, amihez egyébként is gyakran fordulok, ha valamire szükségem van webes témakörben. Így többek közt egy 10 pontos szempontrendszert is közzétettek, amit csak felsorolás szinten közölnék:

  1. Ne gondolkoztassuk a felhasználót – azaz ne azon kelljen agyalnia, hogy hogyan kell használni egy adott weblapot (hiszen az csak egy eszköz), az legyen magától értetődő, intuitív – hadd összpontosítson a látogató a feladatára.
  2. Ne játsszunk a felhasználó türelmével – minél kevesebbet kell aktívan tenni egy szolgáltatás használatához (kérdések megválaszolása, adatok szolgáltatása, ide-oda kattintgatás, olvasás stb.), annál többen fogják igénybe venni ezt a szolgáltatást. Ez leginkább azért van, mert egy szolgáltatást először általában csak ki akarnak próbálni (“játszani“), és utána használni. Ha pedig már a kipróbálása is ilyen követelményeket támaszt, nem lesz túl sok elszánt jelentkező, ebben biztosak lehetünk.
  3. A felhasználó figyelmének irányítása – vannak tiszta szabályok (szemmozgás iránya, szöveg és kép figyelemirányító szerepe és viszonya), amelyek be nem tartása “büntetve” lesz, ebben biztosak lehetünk. Az, hogy tekintet nem lineárisan fogja be a képernyőt, hogy a kiemelt dolgok előbb és hosszabban tartják fogva a figyelmet, mind szempont kell, hogy legyen a tervezésnél.
  4. Szolgáltatások bemutatása – a modern webdizájnnak hatalmas előnye a szolgáltatásokat, elérhető lehetőségeket bemutató rövid leírások megoldása. Ezek megoldásának formája igazából teljesen lényegtelen, csak annyi a fontos, hogy könnyen érthetőek legyenek és jól észrevehető helyen, hogy a felhasználó komfortérzetét növeljék.
  5. Hatékony stílus kialakítása – nagyrészt a fenti 4-es pontban már leírtam, ezt annyiban egészíteném ki, hogy érdemes az üzleti élet frappáns megoldásait átvenni. Ilyenek az egy szavas vagy rövid mondatos megfogalmazások, amelyek csak a mondanivaló lényegét közlik. A rizsa aztán jöhet, csak máshol, nem fogva el a teret az egyéb közlendőktől.
  6. Egyszerűségre való törekvés – az lenne a jó, ha az ún. “KIS-elv” (keep it simple) lenne minden közérdekű honlap alapvető tervezési szempontja. Az az általános tapasztalat, hogy egy egyszerűre tervezett lapon több információhoz jutnak hozzá a felhasználók, mint egy komplexen tervezett szájton.
  7. Ne féljünk az üres helyektől (aka white space) – nem csak az információ túláradását tudja enyhíteni (“cognitive load-ra” tud valaki jó kifejezést…?), de könnyebben észre lehet venni azt. Elsőre furcsán hangzik, de nem biztos, hogy egy összevissza zsúfolt lapon észrevesszük, hogy hol van a minket érdeklő információ. Az egyszerűséggel való összekapcsolást segítheti továbbá a megjelenő tartalom hierarchikus rendezése (dátum, kategória, cím, szerző különböző szempontú kiemelései stb.).
  8. Hatékony kommunikáció vizuális nyelv segítségével – Aaron Marcus fogalmazta meg annak a “látható nyelvnek” három alapvető összetevőjét, amely gyakorlatilag azt a módot jelenti, ahogyan a felhasználó befogadja a tartalmat a képernyőről: ez a rendezettség, a gazdaságosság (további négy oszloppal: egyszerűség, átláthatóság, elkülöníthatőség és hangsúlyosság) és a kommunikáció.
  9. Konvencionális elemek használata – minél több közismert (és akár elvárt) elemet használunk fel a tervezéskor, annál kevesebb időre van szüksége a felhasználónak, hogy elsajátítsa a honlap használatát és a navigációt. Ez ugyanakkor természetesen nem jelenti azt, hogyha van egy jó ötletünk, akkor ne újítsunk. De tényleg csak akkor, ha jó.
  10. Tesztelés bevezetés előtt, azután pedig rendszeresen – ehhez pedig néhány dolgot nem árt szem előtt tartani:
    • egy tesztelő is több mint a semmi
    • a tesztelés állandóan ismétlődő és folyamatos tevékenység
    • a usability (használhatósági) teszt mindig hasznos eredménnyel végződik
    • a fejlesztő alkalmatlan a tesztelésre – ez olyan, mint a lektorálás és a korrektúra, azt hiszem ezt nem nehéz belátni…

Hát ennyi lett volna. Remélem, tudtam némi használható alapot adni a továbbiakhoz. Ha bármi kiegészítenivalótok van, ne tartsátok vissza! Ja, és a Smashing Magazine cikkében vannak példák is, azokat nem akartam most áthúzni, átkattintás után meg lehet nézni, hogy hogyan is néz ki az, amit leírtak a 10 pontban.

A címért meg elnézést kérek, nem tudom mi jött rám, de már marad, vállalom.

Update: az építészeknél is aktuális a kérdés, tegnap jelent meg a Hogyan (ne) fejlesszünk kamarai honlapot? bejegyzéssorozat első része a Koós Miklós blogján. Ezenkívül Gica kérdésfelvetésére (Miért nem becsülik a [könyvtár]szakot?) is merült fel ilyen válasz (nem tőlem)…

Vasárnap reggeli WordPress és dizájn linkek

Hosszú-hosszú ideje gyűlnek a linkek, most egy nagy adag jön, időben visszafelé összevissza.

Az első a WPCandy pofás Template Hierarchy ábrája (a WP működési struktúrája gyakorlatilag), amely a WordPress Codexben található diagram sokkal-messze szebb verziója. Fel is került az Advanced Help Sheet mellé. És ha már help sheet, akkor nem árt, ha megvan a The Ultimate Guide to the WordPress Loop is. Ha úgy leszek meg az időbeosztásom is, meg lesz magyarul is. (Igyekszem.)

A következő friss találmányom, a WPZOOM ajánlása, 20 forrás, ahonnan válogatott, szebbnél-szebb témákat lehet beszerezni. Kb. a fele átfedéssel van fent azt hiszem (legalábbis nekem a különböző feedeket figyelve ez a benyomásom), de tényleg lehet találni gyöngyszemeket. Szintén szép témákat kínál a SkinPress is.

Hozzám hasonló szerencsétlenek nagy segítsége lehet a Disable WordPress Upgrade Option plugin. Ezzel egy kis lélegzetet és időt lehet nyerni, ha érkezik az új WordPress kiadás.

Ez az aprócska kis kód a widgetektől függően tölti e a stíluslapokat, hasznos. És aki ennél jobban szeret hekkelgetni (és a Photoshop sem idegen tőle), annak itt van pár inspiráló kommentdizájn. Ha pedig ennyire azért nem akarunk mélyen turkálni a dolgokban, de van igény a szépre és hasznosra, annak az egyik legjobb kiegészítő az admin felületre (dropdown menü, lelőttem a poént). Esetleg ha valaki egy fullos CMS-t akar fargni a WordPresséből (ki nem? ;), annak egy 10 pontos lista a musthave pluginekből.

Nem teljesen WordPress, de a WebResourcesDepot-on találtam ezt a több, mint 1300 crystal ikont. A FastIcon Smashing Feed ikonszett pedig megvette kilóra a fél magyar webet, legalábbis a Google Reader szerint. És ha már ennyire belebonyolódtam a grafikába, akkor egy lista is jöjjön a Web 2.0 dizájn titkairól. Végül pedig a Smashing Magazine 60 darabos válogatása tényleg nagyon szép fontokból.

Ennyi volt a mese reggelire, én most speciel szívesebben olvasom a KörútiKocsmák bejegyzéseit (powered by picidzé), az első belopta magáta szívembe, repesve várom, várjuk a következőt.

GUI

Kikerült “béta”(?) verzióban az új könyvtári honlap, ami önmagában öröm. Az viszont nem, hogy rohadtul nem úgy sikerült, ahogy akartam, és úgy néz ki, nem is lesz olyan még egy ideig. Hogy miért? Nem tudom. Valószínűleg a GUI (Graphical User Interface) a gond. Pont az előbb emlegetett program tudatosította bennem, mert az Apple ebben az egyben biztos jó, ahogy Lipilee fogalmazta:

Közben kicsit vidámabb lesz, mert a Nokia/Sony-Ericsson/Siemens börtönből átszállították az Apple börtönbe, ahol fehérek a gumibotok és lekerekítettek, és ettől elkezi élvezni az anális szexet.

(Jó, éppen nagyon másról volt szó, de tetszik a mondat. Kész.)

Szóval: úgy érzem, nagyon nincs kiforrva az interfész, amin a kedves felhasználók elektronikusan érintkeznek a könyvtárukkal. Mert ugyan elkezdődött a blogok, portálok (aka CMS-ek) használata, de csak mint CMS-eké, nem pedig mint a könyvtár arculatáé, megjelenéséé. Elég sok füzetet telefirkáltam már vázlatokkal, de nem igazán sikerült még megnyugtató megoldást találni – ld. MOME Könyvtár.

(Ja, jó vicc: szeptember vége felé a vezetőség kijelentette, hogy nem jó név a MOMEK – ezt akartam kirakni a honlapra, mint a név -, maradjon Moholy-Nagy Művészeti Egyetem Könyvtára, majd két hétre rá kitalálták, hogy építsen a könyvtár brandet. De a név, az nem jó. Tessék valamit kitalálni.)

Sajnos a firkálmányok eddig kb. 5 különböző füzetben vannak, így nem tudom őket mind előásni. Majd este meglesznek, és akkor rendszerezem őket. Addig meg megy a csiszolgatás.

Screenshot

A portálépítgetés megy. Legutoljára azt magyaráztam, hogy hogyan lehet a Corvinás keresőfelületet belepakolni gyorsan a lapunkba, azóta pedig a kezdőlapot csiszolgattam. Szétosztottam négy nagyobb körbe az egyes lehetőségeket, azt szépen elneveztem, és egy oszlpoba rendeztem, majd az egészet táblázat-szerűen elhelyztem a statikus kezdőlapon, amire a WP 2.2 már nagyon alkalmas, a Beállítások > Olvasás oldalon lehet szórakozni. A legegyszerűbb létrehozni egy home.php nevű lap-sablont (emlékszünk? előző bejegyzés…), majd ezt alakítgatni.

A szerűt azért emeltem ki, mert jómunkásember nem használt táblázatot tartalomigazításhoz (bár erről vannak más vélemények is…), csak dobozokat (alias <div>). Nos, ez nekem mindig munka, hogy újra és újra rájöjjek, hogyan lehet 2x2es felületet létrehozni. Az egyszerűség kedvéért itt most rögzítem.

Tehát, először csináljuk meg a Nagy divet, aztán a két sornak is egyet-egyet, aztán, ha több elemet (listát, bekezdést, blokkot stb.) akarunk rakni egy hasábba, akkor azoknak is egyet. Ez azt jelenti hogy 7 darabot kell megcsinálni, valahogy így:

<div id="kezdolap">
<div id="felso">
<div class="felso_bal"></div>
<div class="felso_jobb"></div>
</div>
<div id="also">
<div class="also_bal"></div>
<div class="also_jobb"></div>
</div>
</div>

Ezt pedig formázzuk be most. A bal oldaliak ellebegnak balra, a jobb oldaliak pedig jobbra, valamint, ha különböző mennyiségű tartalmat teszünk bele, akkor érdemes megadni egy fix magasságot is, mondjuk 200 pixel. Ez CSS-ben így néz ki:

.felso_bal, .also_bal { float: left; height: 200px; }
.felso_jobb, .also_jobb { float: right; height: 200px; }

Gyakorlatilag ennyi. Én még annyit bolondítottam rajta, hogy az egyes blokkok címe mellé raktam egy ikont, amit úgy értem el, hogy <h2> címsor taggel emeltem ki a címet (pl. Hírek), majd a CSS-ben beállítottam, hogy a háttérben jelenjen meg az ikon, balra csúsztatva. Érdemes átlátszó hátterű ikonokat használni (ezt tudja a PNG és a GIF kiterjesztés is), mert így szép hatást lehet elérni színes háttérrel is, ennek “pusztán” annyi a hátulütőja, hogy az Explorer nem tudja kezelni, hanem szürke hátteret pakol be. Állítólag van rá megoldás, én működővel még nem találkoztam. És akkor ez így néz ki:

.felso_bal h2 {background: url(http://a_kep_urlje/kep_cime.png) no-repeat left; padding: 10px 0px 0px 35px;}

momek printscreenÉs így a másik hárommal is. A background állítja be a háttér tulajdonságait, amelyben megadjuk a kép helyét, azt hogy ne ismétlődjék (ezt meg tudja tenni függőleges – x-repeat – és vízszintes – y-repeat – irányban is, amíg ki nem tölti az adott blokk hátterét), valamint hogy a tartalomhoz képest balra lebegtesse (azaz jobbra fussa körül a szöveg), végül pedig a felső és a jobboldali szegélyét állítottuk olyan vastagra, hogy ne folyjon egymásra kép és szöveg.

Az meg már csak egy kósza ötlet volt, hogy az olvasót előre tájékoztassuk, hogy mit talál adott oldalon. Erre ugye van a title="link címe" megoldás, amit elegánsabb megoldással ki is vetíthetünk a linkek mellé egy JavaScript segítségével.

Legközelebb itt folytatom, addig is egy printscreen a kezdőlapról.

A papírforma

Amikor munkába álltam, az egyik feladatom az volt, hogy böngésszek végig minél több külföldi művészeti egyetem könyvtárának honlapját, és összegezzem a tapasztalataimat. Ez megtörtént, és a következő eredményre jutottam. A külföldi egyetemi könyvtárak legelső sorban az egyetemek információs központjai, tudásbázisai, szellemi központjai. A honlapok funkcióit három nagyobb csoportra lehet osztani:

  1. (Saját) gyűjtemények, avagy repozitóriumok, digitális könyvtárak stb.; (külső) források (linkek, tematikus gyűjtések, adatbázisok, feedgyűjtemények és ezek alapján való hírszolgáltatás stb.).
  2. Segédletek, tananyagok, használati útmutatók
    • információkeresés, -rendezés (pl. könyvtár- és webhasználat)
    • egyéb (pl. hogyan írjunk dolgozatot, pályázatot, bibliográfiát)
    • tanulmányi élethez kapcsolódó (pl. infó oktatókról, tananyagokról, pályázatokról)
  3. Kérdezd a könyvtárost!; online ügyintézés (kölcsönzés, hosszabbítás, iratkozás, olvasószolgálat stb.)

Ezeket összevetettem a kész anyaggal (meglévő honlappal), és ebből nekem a következő struktúra állt össze (ez egy kicsit specifikus, egyetemi könyvtárra vonatkozó, de nyilván nem okoz nehézséget átültetni a helyi igényekre) – eléggé triviális dolgokat is leírok, de mindegy, nekem fáradtság, és persze a sorrend sem releváns:

Általános információk

Adatbázisok

  • Elérhetőség
  • Nyitvatartás
  • Beiratkozás, árak
  • Könyvtárhasználati szabályzat
  • Az egyes menüpontok leírása (nem a tartalom leírása, hanem hogy mire jó)

Szolgáltatások

  • Saját könyvtár (ez még jövő, messzi is talán, de az UTCA már jön…)
  • Kérdezd a könyvtárost!

Katalógus

Segédanyagok

  • Tanulás
  • Kutatás
  • Könyvtárhasználat
  • Webhasználat

Gyűjtemények

  • Hallgatói
  • Könyvtári

Fontos, hogy egy tartalom több helyre is tartozhat! Nem az a cél, hogy minél kisebb méretű lapot hozzunk létre, hiszen ma már nem számít pár kilobyte, viszont sokkal-sokkal könnyebb megtalálni egy-egy adott tartalmat többféle szempont alapján.

A másik lényeges dolog – ami viszont megtakarít nekünk némi gépelést -, hogy össze-vissza kell linkelni a portált (jó és rossz értelemben egyaránt). Ha megoldjuk a folyamatos tájékoztatást, hogy hol jár az olvasó, nem fog eltévedni. Pl. az adatbázisokhoz be lehet linkelni a segédanyagok vonatkozó részét, a gyűjteményekhez a kapcsolódó tanegységről, oktatóról szóló információt stb. Ez eléggé hosszadalmas munka, de kreatív, úgyhogy élvezetes.

Lehet, sőt valószínű, hogy nem írtam túl sok újat, de hozzátartozik ez is a sorozathoz.

Pofozgatás

Eddig tehát telepítettünk egy WordPress blogot, majd a kész alapra elkezdtünk tervezgetni. Azért ez a sorrend, mert így jobban láthatóak a lehetőségek, meg nekem ilyen az eszem járása. Mielőtt nekifogunk a post olvasásához, játsszunk kicsit a bloggal, írjunk próbabejegyzéseket, próbakommenteket, -kategóriákat stb. Ez még később is hasznunkra lehet, ha látni akarjuk építés közben, hogyan is fogunk kinézni. Természetesen ezeket később törölhetjük.

Most, ha mindezzel megvagyunk, nézzük, mit tudunk tenni egy ilyen blogmotorral. Ide fog kelleni nekünk az angol nyelvtudás, ugyanis van egy zseniáls sorozat, So you want to create WordPress themes huh? címmel. Ez kell nekünk, ugyanis minden utolsó kis pontosvesszőt elmagyaráz az író, így nulla PHP, HTML és CSS tudással is tudunk létrehozni teljesen saját sablont a 25 (igazából 16, több részre felbontva) lecke során (egyik sem tart fél óránál tovább, de inkább 10-15 percesek…).

Ebben a bejegyzésben most gyorsan végigveszem ezt a 16 pontot. Végigkövetése és megcsinálása nem tart tovább egy könnyed esténél.

  1. Először az alap szabályokat sajátítjuk el. Mindent taget le kell zárni, úgy bizony, mert akkor kapunk szép, valid, azaz szabványos kódot. Az, hogy soronként plusz 4-5 karaktert írunk le, nagyon-nagyoion sok olvasónk dolgát könnyít meg. A második alapszabály, hogy minden sablon minimum két fájlból áll: index.php és style.css. Ezen kívül még 12 fájlunk lesz, ha mindent akarunk használni, de ez nem probléma, majd szépen lassan kialakul. A Lingo részben megismerkedünk az alapvető blog-szakszókinccsel (5 darab), ezután pedig a WordPress fájl-hierarchiával.
  2. A második leckében az egyes fájlok konkrét funkciójával ismerkedünk meg.
  3. A harmadik már mélyvíz, elkezdjük építeni az index.php fájlunkat. Mivel a lecke saját gépen működő szervert feltételez (aki biztosra akar menni, az csinálhatja így, de talán nincs most erre szükség), ezért mi hagyjuk figyelmen kívül az XAMPP-pal foglalkozó részeket, de ez persze gusztus dolga. Kreáljunk egy index.php-t és egy style.css-t, és az elsőbe másoljuk be a postban található index.txt tartalmát, ami a fejlécet tartalmazza. Ezek után ennek a metaadatokat tartalmazó fejlécet vesszük sorra, elemenként, hogy mi mit jelent. Ezek után töltsük a helyére (http://blogomcime.hu/wp-content/themes/), és nézzük meg a kezelőfelületen a Megjelenés > Sablonok fülön, hogy jé, hát ott van.
  4. Miután megvannak a metaadatok a helyükön vannak, készítsük el a blogunk fejlécét, avagy címsorát.
  5. Folytatásképpen alakítsuk tovább a fejlécet, linkeljünk, csicsázzunk.
  6. Hatodik lépésként hozzuk létre a WordPress lelkét, a Loop-ot. Szó szerint hurkot jelent, ez jeleníti meg a postokat. Érdemes azt a fejezetet nagyon-nagyon lelkiismereten végigolvasni, ugyanis ennek alapos ismerete szinte korlátlan lehetőségeket ad majd kezünkbe.
  7. Ha megvan a Loop, oldjuk meg, hogy tartalom is legyen benne. Ehhez írjuk be a megfelelő kódokat, és formázzuk meg úgy, hogy később szabadon tudjuk kezelni a kinézetét.
  8. Következőként az egyes bejegyzések metaadatait (dátum, szerző, kategória) is jelenítsük meg.
  9. Így létrehoztuk a bejegyzések megjelenítését, már csak azt kell megadni, hogy mi történjék, ha ne adj isten olyat keres valaki, ami nincs is a blogunkban, valamint aggassunk minden bejegyzésünkre sorszámozott címkéket, így akár egyéni megjelenést is biztosíthatunk az egyes bejegyzéseknek (pl az első kiemelése stb.).
  10. Ezek után az egyes bejegyzések és oldalak közti navigációt (előre-hátra, fel-le, jobbra-balra, kinek mi a szíve vágya) oldjuk meg.
  11. A következő nagy lépés az oldalsáv létrehozása, amiben a tartalmat nem képző, kiegészítő funkciók kaphatnak helyet, illetve a visszakeresést segítő kategóriák listája.
  12. Emellett érdemes kirakni a statikus lapok listáját is, akár hierachikusan is megjelenítve.
  13. Már csak az archívum és a linklista hiányzik (ezt errefelé Blogrollnak hívják, de én speciel nem ragaszkodom az elnevezéshez)…
  14. Kis apróságként még hozzácsapjuk a keresést (alapvető!), valamint a naptárat, ami gyakorlatilag az archívum táblázatos megjelenítése. Saját megunkat pedig azzal segíthetjük meg, ha környezetfüggő admin-menüt is pakolunk bele az oldalsávba (azaz, ha be vagyunk jelentkezve, az Admin-felületre rak ki linket, ha nem, a bejelentkező-oldalhoz).
  15. Hab a tortánt, hogy az oldalsávba válogathatunk a hatalmas fejlesztőtábor által előállított widgetek (eszközök?) közül. Ehhez kell még egy csöpp kis munka.
  16. Leértünk a lap aljára: a láblécet is létrehozzuk.
  17. Ha elértünk idáig, nézzük meg, hogy szabványos-e az, amit csináltunk (azt hiszem, nem lövök le semmit, ha elárulom, hogy ha nem nyúltunk mellé nagyon, akkor szabványos…).
  18. Ezek után a kész vázat, ami lássuk be, csúnyácska, nem is kicsit, bár van aki így is szereti, gyúrjuk meg. Erre való a CSS (Cascading Style Sheet – lépcsős stíluslap). Ne ijedjünk meg, továbbra is el lesz magyarázva, miért nyomunk le minden egyes gombot. Nem lesz nehéz.
  19. Az alapvetés után a színek jelölését sajátíthatjuk el (nem ijesztésképpen mondom, de hexadecimális kódban va, azaz 000000-tól ffffff-ig jelöljük a színeket – feketétől fehérig -, de nem ördöngős, ez is el lesz mondva), valamint a linkek formázását.
  20. Ha már szép színesek vagyunk, terjeszkedjünk, azaz dobáljunk és nyomogassunk dobozokat helyre és méretre.
  21. A fő részek kialakítása után olyan finomságokkal is foglalkozhatunk, mint a bejegyzések és metaadatainak formázása.
  22. Az oldalsáv formázása ezek után már – sajnos – gyerekjáték lesz…
  23. A lábléc sem okozhat különösebb nehézséget. Ugyanebben a lépésben istenül meg az index.php, ugyanis azzal, hogy kiemeljük belőle a különböző modulokat (fejléc, oldalsáv és lábléc), csak a lényeg és a lélek (Loop, emlékszünk?) marad benne.
  24. Ha kieszedtük ezeket a függelék részeket, formázzuk meg őket.
  25. Legutoljára pedig a kommenteket is gyúrjuk át, hogy szépek legyenek.

Kész is. Megvan a pofás blog, ráadásul mire eddig eljutunk, már tisztában is vagyunk a WordPress alapvető nyelvtanával. Ugye nem volt annyira nehéz…?

(Bocsánat az elgépelésekért, késő van, és holnap elhúzok kicsit pihire, folytatás utána, vagy vizsgaidőszak végén. Majd kiderül.)

Struktúra tervezése

Az előzőekben létrehoztunk egy új WordPress-blogot, amit már akár használhatunk is, funkcióiban nagyszerűen kielégítheti bárki igényeit. De. Mi van, ha mi mondjuk az intézményünknek (mondjuk ki: könyvtárunknak) szeretnénk csinálni blogot, vagy “csak” egy portált? Akkor “sajnos” még van vele munka bőven, ami viszont tiszta öröm, mert szinte játék WP-t építgetni és felfedezni az újabb és újabb lehetőségeket. (Ezt teljesen magamtól írtam, nem kapok érte pénzt. Ha valaki nem hisz nekem, próbáljon párhuzamosan WordPress-t és Joomla!-t hegeszteni…)

Először készítsünk egy vázlatot, hogy mire is akarjuk használni az oldalunkat. Az élő példánál maradva, mondjuk egy könyvtár oldalát szeretnénk megcsinálni.

Elsőként nézzük meg, mi volt eddig a honlapunkon. Ábrázoljuk fa szerkezetben, néhány kulcsszóval jelezve, milyen tartalom hol szerepel. Aztán hasonló módon rajzoljuk meg a vágyott lap struktúráját. Ne fogjuk vissza magunkat, zsúfoljunk bele minden ötletet, ami egy belső brainstormingon felmerül (akár még a 100+-50 munkatársat foglalkoztató intézményben is! – és én, ha vezető lennék, névtelenül kérném a nyomtatott véleményeket…), akár még az aktívabb olvasókat is bevonva (online és nyomtatott kérdőív, oktatók, professzionális felhasználó stb.), ebből aztán lehet visszafaragni esetleg (ha nagyon muszály), de sokkal jobb eleve több ötletből válogatni.

Másodszor, próbáljuk összegyúrni az adott rendszer, esetünkben a WordPress lehetőségeivel. Határozzuk meg a tartalmak alá- és fölérendeltségét, és döntsük el, mi statikus és mi dinamikus tartalom. Ami statikus tartalom, lap lesz, ami dinamikus, kategória. Emellett döntsük el azt is, hogy milyen szolgáltatásokat nyújtunk még online (IM olvasószolgálat, tematikus linkgyűjtemény, elektronikus gyűjtemények, repozióriumok, szakmai blogok, híroldal stb. – a katalógust azért nem írtam ide, mert nem látom valószínűségét annak, hogy akár még csak a lehetősége is felmerüljön itthon még jóideig egy Scriblio-típusú dolog használatának… pedig ingyen van), ezeket írjuk fel egy listába, később még szükségünk lesz rá.

Ha mindezzel készen vagyunk, próbáljuk meg szövegesen megfogalmazni az intézményünk profilját, kinézetét, design-jét (hiányos szókincs miatt nem tudom pontosan leírni, amire gondolok). Ebben valószínűleg nagy segítségre lehet az alapítási okirat, az intézmény vezetőjének pályázata, valamint szintén a kollégák (akár névtelen) véleménye. Ennek jegyében határozzuk meg a legjellemzőbb design-elemeket (logó, színek, akár betűtípus), mert ez tényleg lehet ennyire fontos… Gyűjtsünk hozzá fotókat, rajzokat stb. a könyvtárról (akár polcok, könyvek stb.), olvasókról, munkatársakról, bármiről, aminek köze lehet a könyvtárhoz.

Eddig a tervezgetés, még esetleg szükségünk lehet egy gyorstalpaló angol HTML/CSS, és PHP nyelvtanfolyamra – nem kell megijedni, egyik sem olyan bonyolult, mint amilyennek kinéz (és minimális tudás is nagyon-nagyon elég, ráadásul garantált, hogy a móka végére ez a tudás hatványozódni fog, tehát profit is…), ráadásul itt is működhet a közös munka, biztos van a kollégák közt, aki tud angolul, valamint olyan informatikus (vagy ne adj’Isten, könyvtáros ; ), aki már találkozott a fenti programnyelvekkel. Ráadásul még erre sem lesz szükség. Kávé / sör / pizza / pogi / pattogatott kukorica / zene / kényelmes szék beszerez, bekészít, lelket kisimít…

a ruhat eszi az embert

…szeretem a stylegala-t. nézegetni még jobban mint hivatkozni. fantasztikus dizájnok rohangálnak jobbra-balra, de kicsit lassan frissülnek. milyen szerencse, hogy a netvibes-re anno lementettem a css reboot linkjét, hogy most vizsgák közt megpattanó aggyal hirtelen megtaláljam, és újra elmerüljek a vizuális élménydömingben…

és igen. nincs bölcsész (szerintem), akinek ne remegne meg a szive a gyönyörűségtől egy ilyen csendélet láttán. már csak egy csendes könyvtárszoba, egy két és fél négyzetméteres dolgozóasztallal…