2012. január 15., vasárnap

Like gomb, like box és egyebek

Aki számítógépek közelében van, és főleg, ha még internetezik is, az tudja, mit is jelent az a bizonyos LLL, vagyis a Life Long Learning.
Hát igen. Hetenként tapasztalunk valamilyen újdonságot, újítást. Csak egy pár napot hagyunk ki kedvenc helyünkön, és máris csodálkozhatunk, no meg keresgélhetünk.

Így van ez a Bloggerben, a Facebookon, és a Twitter esetében is. Ezeken a helyeken nem harangozzák be már hónapokkal előre, hogy majd változunk. Minek, hiszen folyamatosan változnak.
Ezek a változások néha bosszantóak, mert végre megtanulunk valamit használni, már egész jól megy, és tessék, egyik napról a másikra más kinézet, máshová került gombok, új funkciók fogadnak minket.

Többször írtam már a különböző gombok elhelyezésének lehetőségeiről, és másokról is, amik akkor és ott igazak voltak.

Sokat gondolkoztam, mit tegyek? Időről időre térjek vissza ezekhez a bejegyzésekhez, és próbáljam ki az ott leírtak működnek-e még? Vagy inkább egy-egy új bejegyzésben írjam meg, hogy aktuálisan éppen hogyan lehet megoldani egy feladatot.
Ez utóbbi mellett döntöttem.

El is mondom, miért.
Ha én keresnék egy megoldási lehetőséget, mert azt tapasztalom, hogy valamit nem tudok megoldani mondjuk a Bloggerben, amit eddig gond nélkül tudtam, akkor nem keresgélnék több éves blogbejegyzések között, mert az a bizonyos funkció akkor még nem is létezett.

Ahogyan szakdolgozat írásakor is azt mondják, az a szakirodalom, ami 5 évnél régebbi, már nem szakirodalom. Jó, ez kicsit túlzás, mert vannak dolgok, amik nem változnak, de a tudomány is halad, és egy dolgozatban az újdonságokat kell figyelni, valami újat kell mutatni.
Az interneten még sokkal gyorsabban avulnak el dolgok. Azt hiszem, erről mindannyian órákig tudnánk beszélni.

Ezen megfontolás miatt nem nyúlok a régi bejegyzésekhez, hanem időnként megnézem, változtak-e azok a megoldások, melyekről már régebben írtam, és ha igen, egy új bejegyzésben írok róla.

2011. december 27., kedd

Validált, vagy nem validált

A honlapokról van szó, arról, hogy kódunk tiszta-e, vagyis, ha a http://validator.w3.org/ oldalon beírjuk honlapunk nevét, akkor az alábbi képen látható szöveget kapjuk-e.

Honlap kódjának ellenőrzése

Hát igen. Némelyek ölni tudnának egy ilyen jelentésért!:-)
Mások szerint viszont kit érdekel ez? Ki a fene kíváncsi arra, hogy a kódom "tiszta-e".

Mit jelent ez a tisztaság?
Azt, hogy a html nyelv mindegyik "nyelvjárásának" megvannak a maga -jei, és a leírás arról, mely utasítás hogyan használható, valamint az is, mit mikor kell használni, és mikor tilos.
Ha a kódunk nem teljesen tökéletes, akkor is megjelenik a honlap, és lehet, hogy semmi gond nem lesz vele. Más esetekben a kódrészek ütik egymást, vagyis valami nem jól jelenik meg, de még gyakrabban azt tapasztaljuk, hogy a kód írása közben máris hibaüzenetet kapunk, hogy nem a helyes módon akarunk valamit leírni.
Persze, ha a jó öreg jegyzettömb a munkaeszköz, akkor nem lesz kódolás közben semmiféle segítségünk.

A mikor jó a kód kérdéskört nem kívánom ennél jobban boncolgatni, hiszen az olvasóim döntő többsége nem webprogramozó végzettségű. (Ők meg nélkülem is tudják.)
Konyhanyelven pedig elég róla ennyit tudni.

A lényeg az, hogy előfordul, sikerül úgy összeszedni különböző, nekünk tetsző honlapokról a kódrészeket, hogy a végeredmény nem lesz megfelelő.

A vájtfülű, igényes programozói réteg szerint viszont az a honlap, ami nem állja meg a helyét a validáláskor, az nem érdemel meg egyetlen szót sem.

Egyes vélemények szerint az olvasó, a vásárló a honlapunk kódjának milyensége alapján állapítja meg rólunk, hogy abban a munkában, amit kínálunk a honlapon, milyenek vagyunk. Ha valid a honlap, jó cipész lehetek, ha nem valid, akkor biztos rossz pék vagyok.

Szerintem ez túlzás, de szerintem is törekedni kell arra, hogy az adott nyelvnek legjobban megfelelő kódolást készítsünk.

Sokszor a kódunkat éppen a Social Media különféle megosztási lehetőségei, dobozai, és egyéb csodái rontják el.
Például, amint a fenti, valid honlapra rátettem a Facebook oldalhoz való csatlakozási lehetőséget, máris egy csomó hibával rendelkezett.
Most ismét valid a honlap, mert sikerült a Facebook kódját úgy kigyomlálni, hogy a honlapom ismét megfelel a W3C igényeinek.

Én kihívásnak tekintem ezt a valid honlap dolgot, mert nem elég, hogy én megfelelően kódolok, még a különféle kapott, vagy kötelezően használandó kódok is elronthatják a honlapom kódjának tisztaságát.

Ahogy a nem valid honlap sem jelenti azt, hogy a látogatók fejvesztve menekülnek onnan, a valid honlap sem jelenti azt, hogy tömegek jönnek nézelődni. A legtöbb internetezőnek fogalma sincs róla, mit jelentenek a kis címkék némely oldal alján, és miért büszke a tulajdonos, ha validált honlapja van.

Ja, még egy megjegyzés ide: időnként ellenőrizzük, hogy valóban jogosan viseli honlapunk a validált honlap büszke címet, mert mostanában én is több olyan, magát validnak nevező oldallal találkoztam, ahol a linkre kattintva megtudtam, 10-20 vagy akár 80-100 hiba is van az oldalon. Készséggel elhiszem, hogy valamikor "Passed" jelzővel illették, de az idők során ez megváltozott.

2011. december 23., péntek

A Like gombról ismét

Előrebocsátom, hogy a Facebookon állandó a fejlődés, a változás.
Ezért van az, hogy amit ma olvasunk, sajnos néhány hónap múlva már nem biztos, hogy igaz, illetve nem biztos, hogy egy műveletet ugyanúgy kell végrehajtani.

Node sebaj, mert így legalább állandó téma tud lenni a Facebook és annak a működése, no meg a különböző funkciók bepasszírozása honlapjainkba.

A Like gombot hogyan tegyük fel honlapunk oldalsávjába, szól a kérdés.

Tegyük fel, hogy rendes html oldalról beszélünk, ahol stíluslapot is használunk.
Tehát ez a leírás nem a blog-ra vonatkozik.

Ha a Bloggeres blogban kell elhelyezni Like gombot, akkor a Like gomb a Bloggerben bejegyzést ajánlom elolvasásra.

Először is elzarándokolunk a Facebookra, és saját profilunkban vagyunk. (Nem oldalként vagyunk bejelentkezve)

A like gomb kódjának megtalálása, ha emberként vagyunk bejelentkezve macerás, tehát egyszerűbb, ha ezt a linket követjük: https://developers.facebook.com/docs/reference/plugins/like/

Itt már angolul cseveg velünk a Facebook.

Mutatja is, mit vár el tőlünk.

Like gombot generáltatunk


A Step 1 arról szól, hogy mondjuk meg, melyik honlapról van szó, és hogyan akarjuk formázni a Like gombot és környékét.

URL to Like alá be kell gépelni annak a honlapnak a címét, amire a Like gombot tenni akarjuk. Nem szabad elfelejteni a http:// részt sem, és ha csak www-vel érhető el az oldal, akkor azt sem.
A példában nálam is ki van töltve ez a sor.

Utána jön az XFBML Only rész, na, ezt a pipát vegyük ki innen!

Következik a Layout Style. Itt lehet 3 kinézet között választani. Amelyik tetszik, annak a nevét lássuk a panelen!

Width - vagyis a Like gombos részünk szélessége.
Ha oldalsávban akarjuk elhelyezni, biztos széles az alapból felajánlott 450 pixeles szélesség.
Meg kell nézni, milyen széles az oldalsávunk, és itt, a Facebookon kell elkezdeni játszani a szélesség beállításával. Ez azért jó, mert mindig látjuk az eredményt, ha beállítunk egy szélességet, és valahol a lapon kattintunk utána. Persze normális szélességek választása esetén.

Ha szeretnénk látni a lájkolók képét is, akkor hagyjuk bent a pipát a Show Faces szöveg alatt.

Like vagy recommend feliratú gomb között lehet választani jelenleg.

A Color Scheme segítségével fehér vagy fekete hátterünk lehet. (A Like gombos résznél.)
Ez azért jó, mert így a honlapunkhoz jobban illeszkedőt választhatjuk, persze direkt az elütő színűt is választhatjuk.

A Fontnál néhány betűtípust találunk, ezek közül választhatunk, és akkor a honlapunk szövege és a Like gombhoz tartozó szöveg ugyanolyan betűtípusú lehet.

Amikor minden beállítás készen van, az eredmény tetszik, akkor megnyomjuk a Get Code feliratú gombot.

Na, ekkor jön a feketeleves.

Merthogy sokféle kód van. Melyiket válasszam?

Az első a HTML5. Ha ilyen kódban van a honlapunk (nem hiszem, hogy ebben van), akkor ez a jó kód, ezt kell kimásolni.
Ha tudjuk, hogy xhtml valamelyik variációja, akkor az első nem jó nekünk.

A második biztos, hogy nem jó, ha honlapra akarjuk tenni, tehát az IFRAME verzió a mi kódunk.

Az IFRAME-s kódot másoljuk ki egy az egyben innen, és a honlapunk html kódjába kell illesztenünk.

Méghozzá oda, ahol szeretnénk, hogy megjelenjen. Ez egy okos mondat, igaz is, de!

Ugye stíluslapunk is van, és a különböző helyek valamilyen elnevezéssel bírnak.
Ha ez nem igaz, mert egyszerű, mezei html kódolásunk van, azt sem tudjuk, mi az a CSS, akkor valóban ott lesz a Like gomb, ahova beillesztjük.

Más esetben, tehát, ha stíluslapokkal is dolgoztunk, akkor megkeressük az oldalsáv kódolását, és oda illesztjük be a kódot.

Elmentjük a változtatást, és frissítjük az oldalt.

A fentieket most is kipróbáltam, működik.
Mi lehet a hiba, ha nem látunk semmit, vagy nem azt, amit várunk?
  • HTML5 kódolást illesztettünk be a honlapunkba, ami HTML4 vagy XHTML kódolású
  • XFBML-t illesztettünk be a HTML oldalba
  • Próbafájlunk a saját gépünkön van, és így nézzük meg böngészőben.

Ha a Like gombot működve szeretnénk látni, akkor azt egy igazi, éles honlapon helyezzük el.

Ha félünk, elrontunk valamit, akkor az egyik oldalunkat mentsük el más néven, én úgy csináltam, hogy a fájlnév mögé egy számot biggyesztettem, és ebbe illesszük be a Like gomb kódját, mentsük el, töltsük fel a tárhelyre.
Nyissuk meg azt az oldalt, amit más néven elmentettünk, ekkor látjuk, nincs Like gomb rajta, majd a címsorba írjuk be a mentés máskéntnél adott számot a fájl neve mögé, de a .html elé, és nyomjunk entert.

Akkor látnunk kell a próbaoldalon a Like gombot.

Ha jó helyen van, nincs más dolgunk, mint a honlapunk minden oldalára beilleszteni, ugyanerre a helyre.
Ha nincs jó helyen, nézzük meg, hol kellene lennie, hol nézne ki jobban, és tegyük át oda, majd ismét ellenőrizzük.

Tehát összefoglalva, ha Like gombot akarok a honlapomra:
  1. Facebookon kell a kódot generáltatnom, a fenti linkre kattintva könnyen elérhető helyen.
  2. A generált kódok közül ajánlott az IFRAME választása.
  3. Ezt a kódot kell a forrás megfelelő helyére illeszteni.
  4. Online kell kipróbálni a kód működését.
Remélem, a leírás alapján sikerül a honlapra Like gombot varázsolni!