Újratervezés

TL;DR: hosszas háttérmunkák eredményeképpen új motort és dizájnt kapott a blog. Nem érdekes, lapozzál.

Az előző változatot nagyon szerettem, az élesítése után kapott visszajelzések alapján nektek is bejött. Nem véletlen, hogy két hónap híján két évig nem nyúltam hozzá komolyabban. Az akkori eszemmel most sem készíteném máshogy, de azóta elég sokat változott a szemléletmódom, ráadásul a webdizájn területén megjelent egy rakás újdonság, amelyek jó része mára már széles körben alkalmazható, nekem pedig illene ezeket ténylegesen tanulmányozni és a tanultakat a gyakorlatban kamatoztatni.

És mi mást barmoljon szét az ember, ha nem a blogját?

Amik kellettek

A kívánságlistán az elejétől kezdve szerepeltek kihagyhatatlan tételek, aztán ahogy azokat kipipáltam, mindig felmerült valami új, amit érdekesnek vagy hasznosnak találtam. Körülbelül ez volt a kiindulási alap:

  1. HTML5-re történő áttérés
  2. Latin2 helyett UTF-8 karakterkódolás
  3. szélesebb hely a szöveg és a képek számára
  4. nagyobb és jobban olvasható betűk
  5. a bejegyzések között léptető linkek áthelyezése az ablak széleiről valami értelmesebb helyre
  6. a logó és a színvilág megtartása

Amik lettek

Lettek.

Először is kinyírtam a kezdőlapot, az egyből a legutolsó bejegyzésre ugrik. Nem tudtam neki értelmes szerepet kitalálni, a bejegyzések listája meg úgyis ott van az archívumban, nem kell csak azért, hogy legyen. A kereső egyelőre annyira hatékony, hogy vagy többet talál, mint kellene, vagy semmit sem talál, de dolgozom rajta, további értesítésig csak érzéssel használjátok. A desklognak is annyi, de feléled majd, amint visszatérnek és kereshetővé válnak a címkék.

Igazság szerint a dizájn volt az, amivel többet (sokkal többet) kellett foglalkoznom, mint azt előre terveztem, de legalább nem látszik rajta. Amikor elfogyott az ihlet, végignéztem egy rakás olyan oldalt, amiket nálam ezerszer tehetségesebb emberek alkottak. A komplett lenyúlás helyett csak próbálgattam az ottani megoldásokat beilleszteni az én elképzelésembe, de ez nagyon nem működött és egy idő után már a saját ötleteimet is másoknak tulajdonítottam. Ekkor két hétre félretettem az egészet, hogy kitisztuljon az agyam.

Abban voltam csak biztos, hogy egy egyszerű, átlátható layoutot szeretnék, ami akár így, akár úgy, de egyedi is, ráadásul kitaláltam e mellé, hogy akkor szakítsunk a fix szélességgel is és alkalmazkodjon az oldal a mindenkori ablakmérethez. Megismerkedtem hát a CSS3 media query-kkel és a responsive design fogalmával. Jelen pillanatban azt mondhatom, hogy az oldal alapvetően 1024px szélességre lett tervezve, ennél kisebb felbontásoknál pedig úgy rendeződik át, hogy mindig esztétikus és kezelhető marad, a 320px szélességgel bezárólag. (Ha mégsem, jelezd és megoldom.)

Telefon, tablet, PC hero shot
Hero shot, mi?

Aztán kitaláltam a fejlécbe a két téglalapot és a menüt. Jó, nem a világ legbonyolultabb oldalfejléce, de úgy nézzetek rá, hogy én képszerkesztő programmal is kizárólag geometriai alakzatokat bírok rajzolni. (Mondjuk ezeket pont nem kellett megrajzolni.) A léptető linkek az ablak széléről átkerültek a bejegyzés fejlécébe, ráadásul a sorrendjüket is felcseréltem just for fun, bár a könyvekben is balról jobbra haladunk, a múltból a jövő felé. (Kivéve persze az időutazásról szóló könyveket, mer’ ott kituggya.)

Eltakarítottam a Facebookos gombokat a bejegyzések alól. Azt szeretném, hogy a tartalommal kapcsolatos vélemények elsősorban hozzászólás formájában érkezzenek, mert egy egyszerű lájkkal ellentétben ezzel tudok kezdeni valamit, például válaszolok. Azért gátolni sem akarom a közösségi terjesztést, úgyhogy a kommentűrlap tetején ott a Facebookos megosztás meg a Twitterre küldés linkje, ha valaki erre vágyik.

A dizájn sajátossága még, hogy egyes posztok, ha a téma úgy kívánja, teljesen egyedi megjelenést kaphatnak. Majd meglátjuk, mire lesz ez jó, szerintem izgalmas lehetőség és megígérem, hogy nagyon szép köröket meg sokszögeket fogok berakni illusztrációnak.

Böngésző-mizéria

Az oldal HTML5-re és CSS3-ra épít, ezért főleg a modern böngészőkben (Firefox 3.6+, Chrome stable, Opera 10+, IE9) néz ki úgy, hogy szeretném. Az Internet Explorer korábbi verziói számára készülőben van egy speciális stíluslap, amivel nem lesz ennyire szétcsúszva minden, bár meg kell néznem a statisztikát, hogy érdemes-e egyáltalán foglalkoznom velük.

Fin

Azt hiszem, elmondtam mindent, amit a dizájnváltás kapcsán el lehetett mondani. Remélem tetszik. Jó olvasgatást a továbbiakban, jelezzétek a hibákat, ha vannak (és általában vannak), én meg rájuk repülök, mint M. György a lakossági megtakarításokra.

Enter.

Gumby pénzügyminiszter

Monty Python Repülő Cirkusza - csoportkép
A kép eredeti méretben.

Terry Jones és Graham Chapman most tudja meg, hogy 2%-kal emelkedik a tévéelőfizetés díja az általános ÁFA-kulcs.

Érdekességek a CSS világából

Mindig hatalmas öröm, ha valami, amit korábban ötvenszer ugyanúgy oldottál meg, egyszerre elkezd nem működni és fogalmad sincsen, miért, hiszen minden ugyanolyan, semmi sincsen elgépelve, felcserélve, elfelejtve. Most egy ilyen problémát osztanék meg a tisztelt egybegyűltekkel, amire találtam workaroundot, de magyarázatot nem.

Adott tehát egy stíluslap, amelyben ilyen szabályok szerepelnek:

* { border: 0; }
...
form input, form textarea { border: 1px #ddd solid; background: #eee; }

Kérdés: Lesz-e kerete az űrlap mezőinek?
a, Lesz, mert az űrlapmezőkre vonatkozó szabály felülbírálja az univerzális szabályt.
b, Nem lesz, mert az univerzális szabály felülbírálja az űrlapmezőkre vonatkozó szabályt.
c, Nem lesz, mert bár az űrlapmezőkre vonatkozó szabály felülbírálja az univerzális szabályt, ez a tény a böngészőket nem érdekli.

A helyes válasz a c. Komolyan. Meg lehet nézni Firebuggal vagy Element Inspectorral, hogy az űrlap mezőin ott van az alkalmazott stílustulajdonságok között az egy képpont széles keret, mégsem úgy jelenik meg az oldalon, hanem keret nélkül. Viszont a háttér színe helyes.

Az ilyesmit azért általában kibírja az ember nevetőgörcs nélkül. Ilyenkor jön az, hogy elkezdjük kutatni a jelenség forrását, majd eljutunk oda, hogy szétdaraboljuk a szelektorokat egyszerűbbekre:

form input { border: 1px #ddd solid; }

form textarea { border: 1px #ddd solid; }

És meglepve tapasztaljuk, hogy így meg jó. És ez csak a border tulajdonsággal van így, minden más jó az első megadási móddal. Rohadjak meg, ha értem.

You Monster!

Az ordító Vader meg a pislogó ewok csak terelés, igazából ez lesz a Star Wars BD-ROM legnagyobb újítása:

Gombóc Artu

And now for something completely different.

A Pepsi és a Mentos cukorka kölcsönhatása már régóta közismert. Nos, végeztem kutatásokat a témában és bizton állíthatom, hogy az éhgyomorra ivott mandarinos Fanta (esetleg Mirinda) és tízpercnyi vonatozás képes arra, hogy igazán testközelbe hozza az élményt.

És ez még azelőtt történt, hogy felszállt volna Az Ember, Aki Akkor Jött Ki A Detoxból.

Terepzsemle

Végre van szép új épülete az Informatikai Karnak, tágas meg fényes meg egyelőre nem lehet benne sehol leülni, ellenben máris folynak odabent az emberkísérletek, amennyiben a Tanulmányi Osztály irodája a büfé tőszomszédságában kapott helyet.

Szépen kialakul majd a feltételes reflex, csak nem tudom, az lesz-e rosszabb, hogy minden ügyintézés után kajás lesz a delikvens, vagy hogy minden büfélátogatás után késztetést érez rá, hogy bemenjen a TO-ra.