Ma csak egy egészen lightos kóddal érkeztem, amivel a blogban lévő komment számos részt alakíthatjátok át. A megjelenő szöveg helyett (Mit szólsz hozzá, Hozzászólások(99) helyett mindössze a kommentek száma fog megjelenni a kis ikon mellett. A későbbiekben esetleg arról is írhatok, hogyan helyezhetitek fel ezt a számot a dátum mellé, mint a Histórián. A funkció már a js fájlból is elérhető:

<script> kommentSzam(); </script>

Most, hogy végre lement a zh-k nagyrésze, visszatérhetek az oldalhoz, és a fejlesztéséhez. Tudom, hogy sokan félnek a komolyabb kódoktól, ezért nem szívesen használjátok őket. Persze, sokkal könnyebb elrontani, és ha valaki nem ért hozzá, akkor nem olyan könnyű rájönni a hibára. Ezért úgy döntöttem, hogy más formában fogom megírni a kódokat. Egyetlen JS fájlba fogom megírni őket, függvényekként, amiket aztán egyetlen sor kóddal elérhettek. Ezt a fájlt  másik oldalamra töltöttem fel, ott könnyebben tudom folyamatosan szerkeszteni. Hogy a benne lévő kódokat használni tudjátok, mindössze ennyit kell egy oldalmodulba elhelyeznetek:

<script src="http://nikkiiworld.flaunt.nu/gp_css/gphacks.js"></script>

Ezután amit használni szeretnétek, csak ennyit kell még pluszban elheleyznetek:

<script> függvényNeve("paraméter1","paraméter2"); </script>

Sokkal egyszerűbb, nem igaz? A függvény nevét és a "paramétereit" persze mindig változtatni kell, de erről mindegyikről lesz külön leírás, hogy mit kell ott megadnotok. így biztos, hogy nem rontjátok el a kódot.

És most lássuk, miket használhatunk eddig. Ha több kódot is felhasználunk, nem kell a <script> </script> tageket folyamatosan bemásolni, a függvényeket egyszerre is el lehet őket helyezni. (pl.

<script>

fontAwesomeBlog(); 
smsSavAtmeretezes();

</script>

Font Awesome ikonok a blogmodulba

Az alábbi sorral egyszerűen megvalósíthatjuk a font awesome ikonok elhelyezését a blogmodulban. A kódot kiegészítettem css-el is, így azt sem kell külön hozzá írni, csak ha más ikonokra cserélnénk őket. CSS-el .datum illetve .szerzo névvel hivatkozhatunk rájuk. A content rész után kell megadni az új ikon kódját, illetve egy !important még szükséges lehet a végére.

<script> fontAwesomeBlog(); </script>

Természetesen nem muszáj minden blog modulra engedélyezni az ikonokat, így megadható egy modul id is. Fontos, hogy " " jelek között adjuk meg az azonosítót. A számsort, ha megnyitjuk a blogot, az url címből is ki tudjuk olvasni (a pg= után lévő 8 szám). Igy csak az adott blogmodulra fog érvényesülni.

<script> fontAwesomeBlog( "module_body_36931914" ); </script>

SMS sáv átméretezése

<script> smsSavAtmeretezes(); </script>

Disqus használat

<script>disqus( 'disqus_fórum_neve', kommentek_száma, 'api_key', true);</script>

disqus_fórum_neve: Itt kell megadni a regisztrált disqus fórum nevét. Nekem pl gphacks. Ügyelj a ' ' jelekre, közé kerüljön a név.
kommentek_száma: Itt egy számot kell megadni, ennyi komment fog megjelenni.
api_key: Ez az a hosszú kód, amit meg kell adni.  Ha nem tudod, hol keresd, a leírásban megtalálod: Disqus G-Portálra
blogplusz: Itt true vagy false értéket kell megadni. Ha true szerepel ott, akkor lecseréli a blogpluszban lévő komment részt a Disqus kommentekre. False esetén, létre kell hoznod egy <div id="comments"></div> elemet valahol, és abban fognak megjelenni a kommentek.

Ígértem, hogy fogok írni erről is, és ennek most el is jött az ideje. No de ahhoz, hogy belevágjunk, nem árt tisztában lenni azzal, hogy miről is lesz szó. Hiszen nem mindenkinek egyértelmű az, hogy mit jelent a reszponzív - illetve szerintem a többségnek ez talán új fogalom.

A reszponzivitás annyit jelent, hogy több felbontást is támogat egy weboldal egyszerre. Talán emlékeztek rá, hogy volt egy időszak, amikor divat volt kiírni, hogy "Ajánlott felbontás: X*Y" (vicces, nem igaz? - nehogy már a szerkesztő várja el, hogy mekkora felbontásban nézzük az adott oldalt). Persze minden weboldalt meg lehet nézni mobilon is, nem is emiatt lett fontos, hanem, hogy sokszor kisebb felbontásban széthullik az egész, vagy egyszerűen csak nem túl kényelmes olvasni. Kis betűk, nagyítgatás, oldalra görgetés.. ez nem túl kellemes, a nagy képekről nem is beszélve, ami mobilneten lehet, hogy 10x olyan lassan tölt be, mint a PC-n szélessávú nettel.

Lehet erre azt mondani, hogy felesleges, úgysem nézi senki az oldalt mobiltelefonról, de tényleg így van ez? Egyáltalán nem, és aki nem maga miatt szerkeszt weboldalt, hanem egy kicsit is odafigyel a látogatóira, annak ez igenis fontos dolog.  

Mi kell ahhoz, hogy Reszponzívvá tehessük a G-Portálos oldalunkat?

Erre bevezettek egy új meta elemet, ami egészen másképp fogja betölteni az oldalakat. Ha megnézünk egy alap gportálos oldalt mobilon (vagy bármilyen oldalt, ami nem reszponzív), az oldalt kicsinyítve tölti be, utána kell még nagyítgatni, hogy meg lehessen rajta jobban nézni, amire kíváncsiak vagyunk. Ezzel az elemmel azonban akkorában fog betöltődni az oldal, amekkora a mobilunk szélessége. Ha nincs mobilbaráttá téve a weboldal, akkor ezt nem szabad bekapcsolni, különben használhatatlanná teheti az oldalt kisebb felbontásokban. Ez az új elem szerencsére már elérhető a gportálon, a Vezérlő > Beállítások - Haladó beállítások részben, a HTML5 doctype-pal együtt engedélyezni kell.

Ettől még előrébb nem igazán jutottunk, úgyhogy nézzük a további teendőket. Először is felejtsük el a pixeleket. Persze sokkal kényelmesebb pixelekben gondolkodni, de épp ez az, amitől nem lesz felbontásbarát a weblap soha. Csak gondoljunk bele: adott egy 1920px széles monitor, és egy 460px széles mobil. Ha a szokásos layout-ot készítenénk el, 1000px-es oldalszélességgel, már ott gondban lennénk a telefonnal, hiszen az már a 2x méreténél is nagyobb. Ezért pixel helyett használjunk %-ot, mint mértékegységet. Ez teljes rugalmasságot biztosít nekünk. 

Rengeteg reszponzív tesztelős böngésző plugin van már (Responsive Tester néven pl), hasznos lehet ezeket is kipróbálni.

A Stílus & felület alatt nem árt az oldalszélességet is Automatikusra állítani, különben ugyanott leszünk, mint az elején.

Az alapfelállás legyen az, hogy az oldalsáv 30% helyet foglal el, a tartalom pedig a maradék 70%-ot. Ezt az alábbi módon tudjuk elérni:

.sitemain .sitecol:first-child{ 
    width: 30%;
}
.sitemain .sitecol:nth-child(2){ 
    width: 70%; /* használhatunk auto-t is akár */
}

A fenti példa arra az esetre jó, hogyha egy oldalsávot használunk, és az a baloldalon van. Jobb oldalsáv esetén csak fel kell cserélni a kettőt. Ha pedig mindkét oldalra szeretnénk modulokat helyezni, csak hozzá kell adni egy újabb blokkot: .sitemain .sitecol:nth-child(3){..} , ezzel beállíthatjuk a jobb oldali sávot is.

Kiemelten hasznos itt a böngészőben lévő Vizsgáló használata, hiszen vannak fix értékek is, amiket nem mi adtunk meg, így ezeket nem könnyű észrevenni: mint például az alábbi kód is, ami nem igazán engedi, hogy az a 30%-os oldalsáv 160px-tól különböző legyen. A fix méret helyett használjunk 100%-ot.

.column_side {
    width: 100%; /* width: 160px; helyett */
}

Ha most elkezdünk az ablakmérettel játszani, máris látszik, hogy az arányok megmaradnak egymáshoz képest. Ettől még sokkal kényelmesebb nem lett a weboldal használata, de már jó úton haladunk felé.

Amik igazán kényelmessé fogják tenni, azok a media query-k. Ezek arra jók, hogy felismerik az eszközt, amin megjelenítjük a weboldalt, így különböző felbontásokhoz teljesen más szerkezetet alakíthatunk ki. Például azt szeretnénk, hogy az oldalsáv és a tartalmi sáv egymás alatt helyezkedjenek el, egyforma szélességben. 460px szélességben a 30%-os oldalsáv már igencsak olvashatatlan.

@media screen and (max-width: 680px) {
    .sitemain .sitecol, .column_side_td {
        width: 100% !important;
        display:block;
    }
}

A fenti kód az egészen a 680px szélességig úgy fogja megjeleníteni a weboldalt, hogy egymás alá helyezi a két sávot. (Ha a tartalmi részt szeretnénk felülre, akkor célszerű az oldalsávot jobbra állítani). A média queryk-ről majd egy következő tutorialban lesz szó bővebben.

Megjegyzés:

Nem mindenki szereti, hogyha az oldal egyik széltől a másikig ér, és ezzel nincs is semmi baj, erre is van megoldás: ahogyan korábban a .site{} - ban megadtuk az oldalszélességet (fixen), ott most is megadhatjuk, %-ban. a margin: auto-val pedig továbbra is középrehelyezhető az oldal.

Max-width helyett természetesen megadható min-width is, illetve a kettő keveréke is, így számtalan különböző stílust készíthetünk, bármekkora felbontáshoz. pl.

@media only screen 
and (min-device-width : 680px) 
and (max-device-width : 1024px) {
/* 680px és 1024px közötti felbontásokhoz ez a formázás lesz */
}

Illetve a { .. } kapcsok közé akár egy teljes css kódot is írhatunk, ezáltalán tényleg teljesen eltérő stílust adhatunk a különböző nézetekhez.

Készítettem egy alap CSS kódot is, igaz nincs kész, de a lényeg benne van:

Most egy olyan kódot hoztam nektek, amellyel egy 'CSS váltót' készíthettek. CSS kódokkal foglalkozó oldalakra szuper, hiszen enélkül nem nézhető át a teljes oldal élőben, hogy hogy is fog kinézni. Igy viszont nem kell többé próbamodulokkal, esetleg próbaoldalakkal küzedeni, egyetlen kattintásra megváltoztatható az oldal kinézete.

Aki ki szeretné próbálni, az itt megteheti: CSS váltó demó (A példa css kódokért köszönet Efruse-nak)

A kód a bővebben rész után található.

Sziasztok. :) Ezt az oldalt aloldalként hoztam létre, hogy a GP-s kódjaimat innen is elérhessétek. Hiszen mégis csak a GP-hez kapcsolódnak, akkor legyenek ott is. Engem már ismerhettek, a nikkiiworld szerkesztője vagyok. :) Az oldal amolyan kódlibrary-ként fog üzemelni. Javaslatokat szívesen fogadok, hogy mire szeretnétek kódot látni. :) A kódokat egyszerűen, az oldalmenüből eléritek - legalábbis amíg nincs többszáz kód, addig ez így fog menni. Jó böngészést kívánok nektek! :)