Kategória: Böngészők

Facebook alkalmazás fejlesztés, amire érdemes figyelni

A napokban egy kisebb Facebook alkalmazás fejlesztésén dolgoztam. Régen kb. 1 éve csináltam ilyen munkát. A fejlesztés közben egy-két kisebb-nagyobb problémával találtam szembe magamat.

Amire érdemes figyelni Facebook alkalmazás készítésekor:

A Facebook alkalmazáshoz https:// kapcsolattal kell rendelkeznünk.
Mellőzzük a PHP-s keretrendszerek használatát. Pl.: CI-t, ha a session adatokat nem adatbázisban tároljuk, hanem a CI által definiált Cookieban, érdekes működések alakulhatnak ki belőle, ugyanis egyes böngészők AJAX-os kérés válaszoknál ennek frissítését figyelmen kívül hagyhatják.

Ha Facebook user id-re van szükségünk valamihez, azt ott abban a pillanatba próbáljuk meg lekérdezni, és ne egy eltárolt változóból próbáljuk kiolvasni.
A különálló CSS,  JS és egyéb fájlok elérését relatív eléréssel adjuk meg. “Facebook alkalmazás fejlesztés, amire érdemes figyelni” Tovább olvasása

html div img vertical-align:middle probléma és egy lehetséges megoldása

Meguntam, hogy minden ilyen vertical-align-os igazítást táblázattal oldok meg. Most megint ebbe a problémába ütköztem és végre rászántam az időt a probléma megoldására.

Az alapprobléma a következő:
Van egy fix méretű divünk és benne egy képi elemet akarunk vertikálisan és horizontálisan is középre igazítani. Ez egy hétköznapi probléma.

Miért írom én most ezt a cikket?
Sok helyen olvastam utána, hol és hogyan érdemes megoldani ezt a problémát. Sok helyen a kérdezőt, oltogatták és céloztak a megoldásra pl.: a weblaboron… olyan kioktatós jellegű hozzászólások voltak nagy számban, persze tisztelet a kivételnek. Nos én ezeket a bejegyzéseket vagy 5 ször átrágtam és nem igazán jutottam el a megoldáshoz, mivel elméleti szinten nagyon jól megmondják, csak példával nincs illusztrálva! Igazán akkor tudja megérteni az ember, ha megkeresi maga a megoldáshoz vezető utat. Nekem ez cirka 10 órámba került…

A feladat:
Adott egy fix méretű div és benne vertikálisan és horizontálisan is középre akarunk helyezni egy képi elemet. “html div img vertical-align:middle probléma és egy lehetséges megoldása” Tovább olvasása

Táblázatszerű lista színezése CSS3-al

Egy munkám során, olyan felületet kell építenem, ami épít a gyorsaságra. Egy részfeladata ennek a következő: Táblázatszerű listát kell megjelenítenem, ebben a táblázatban egyszerre több száz sornyi adat is megjelenhet. Egyszerűen akartam megoldani a problémát, és javascripttől  mentesen. A feladat minden második sor más és más háttérszínnel jelenjen meg, erre vannak jó kis javascriptes css-es megoldások, de én ettől mentesen akartam megoldani a dolgot. Ekkor akadtam a CSS3 Pszeudo Class-aira.   Ezzel, egyszerűen megoldható, hogy melyik sort milyenre akarjuk kidekorálni. A W3c egy aloldalon be is mutatja, hogyan működik és hogyan kell használni. Nagy probléma vele, hogy sok böngésző még nem támogatja, így publikus oldalon ez a megoldás még nem használható ki teljes mértékben. Támogatottság a korábban belinkelt oldalon, nos publikus oldalon maradnak a javascriptes megoldások, mert ez “még túl friss” :). Probléma még, hogy sor és oszlop szinten egyszerre nem lehet alkalmazni. Ezért nagy kár, mert így hover állapottal a táblázatban nem látható, hogy melyik sorban és melyik oszlopban vagyunk éppen.

Facebook social pluginok használata

Mostanság megszokottá vált, hogy minden weboldalon megjelenik egy Facebook Like gomb. Ennek elkészítéséről most nem írnék, egyszerűen látogasson el az illető a Facebook fejlesztői oldalára, az oldal állandóan változik felépítésében így hogy hova kattintson az illető felesleges elmagyarázni, itt megtalálja, hogyan miként lehet Like gombot létrehozni. Szerintem menni fog 🙂

Nos lényeg a lényeg ezen Facebook nyújtotta Plugineket kétféle képpen lehet betenni egy oldalba, vagy iframe-be vagy használjuk a <fb></fb> jelőlőket azaz az FBML-t (FaceBook Markup Language). A kódot a Facebook oldala le is generálja számunkra. Én személy szerint nem vagyok egy iframe rajongó, ezért az FBML megoldást használom. Betesszük az oldalunk kódjába, megnézzük Firefoxban megy, remek hír. Explorer teszt: ó te drága Explorer 🙂 megint nem mutatsz semmit, az indok egyszerű az Explorer nem tudja értelmezni az FBML nyelvet helyből, nem is baj szerintem, de ennek megoldását nagyon sikerült elrejteni.

Hogyan tudjuk a like gombot és társait előhívni Explorerben is?

A válasz nagyon egyszerű csak nehezen akad rá az ember, mivel ahogy észrevettem ezt az apró lényegi részt nem reklámozzák,  nincs más dolgunk mint a az FBML névteret, hozzáadni az oldalunkhoz, és már fut is a Facebook Like gomb Explorerben is, azaz

a <html> tagben definiáljuk ezt a következőképpen:

<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:fb="http://www.facebook.com/2010/fbml">

így már menni fog Expolrer alatt is a Facebook Like gomb és minden ami FBML 🙂