TurulMeme gépház

Tapir már többször jelezte, hogy nem lenne ellenére ha készülne egy Firefox kiegészítő a TurulMeme-hez. Egyrészről nem szeretem kielégítettlenül hagyni a drága felhasználókat, másrészről pedig soha életemben nem csináltam ilyet, így ez egyértelmű felkérés volt egy keringőre.

A Mozilla gyorstalpalóján áttanulmányozása után megnéztem pár meglévő kiterjesztést és pár órás molyolás után azt kell mondanom, kifejezetten egyszerű és élvezetes Firefox alá fejleszteni(na jó, a tucatnyi lefagyástól eltekintve). A végeredmény innen tölthető le: https://addons.mozilla.org/en-US/firefox/addon/10067.

Telepítés és a böngésző újraindítása után a státuszsorban megjelenik a TurulMeme kis ikonja (amiért örök hálám fogja üldözni offroadster-t és a Webisztán-t), jobb egérgombra felugrik egy kis menű ahol a beállításokon kívül szerepel pár link ami a TurulMeme hasznosabb oldalára mutat. Az izgalmasabb dolog persze az egér bal gombjának felengedése után történik: a jobb felső sarokban megjelenik egy kis doboz amiben mindig látható, hogy az adott oldalt hányan osztották meg és mennyien fűztek hozzá megjegyzést (nyilván – ha a megosztások száma nem nulla - erre kattintva elnavigál a TurulMeme-n lévő permalink oldalra, ahol megnézhető ki osztotta meg és milyen hozzászólások vannak). Nem utolsósorban pedig a dobozból is közvetlenül meghívható a Google Reader által biztosított megosztó ablak a “megosztom” feliratra kattintva.

Ha el akarod tüntetni a kis dobozt, akkor csak kattints ismét a státuszsorban lévő ikonra. De ha kint van a doboz és a beállításoknál a “TurulMeme doboz új oldal megnyitásakor is jelenjen meg” felirat mellett lévő checkbox-ban ott figyel a kis pipa, akkor navigálás közben mindig megjelenik a doboz a friss tartalommal.

Már csak azt nem tudom, hogy tudtam eddig enélkül élni…

Ja, majdnem elfeletettem… Fejes Balázs felkérésére előreláthatólag a februári New Tech Meetup-on az én rusnya képemet kell bámultok pár percig. Enyhítendő a maradandó károsodást, cserébe viszek majd pár üveg sört:-)

 Update: Készült egy újabb verzió az extension-ből, amiben az alt+m gombra ki lehet nyitni illetve bezárni a TurulMeme dobozt, de valamit elcsesztem a Mozilla addon oldalán és jelenleg rossz verziót lehet letölteni (0.1.2 néven fut és ráadásul nincs is hozzá állomány. Fogalmam sincs mikor élesedik ki a jó változat (0.1.4), ezért ha nem ezt a változatot látjátok kint akkor töltsétek le a régebbi (0.1.1) verziót! Bocs a bénázásért...

Az iWiW Homokozó megnyitásakor egyből az jutott eszembe, hogy jó lenne összehasonlítani a Facebook platformjával. Mivel az utóbbihoz volt már szerencsém, így nagyjából két óra alatt tető is alá hoztam egy fapados Facebook alkalmazást: http://apps.facebook.com/turulmeme/. Tényleg nagyon egyszerű az egész, semmiféle social ficsört nem használok ki a lehetőségekből, csupán egy wrapper a TurulMeme-hez (ráadásul az egyszerűbb, iframe-s beépítési módot választottam). Tesztelésre tökéletes.

Egy nappal később kezembe vettem a lapátot, hogy építsek egy hasonlóan primitív dombocskát a fejlesztők számára dedikált iWiW homokozóba. Célként hasonlót fogalmaztam meg: csináljunk gyorsan egy wrapper-t mindenféle extra funkció nélkül. Nagyon egyszerűen fogalmazva a nagy különbség a két rendszer között, hogy az OpenSocial esetén jóval több javascript matatásra van szükségünk. Viszont mivel mindkét megoldás egy iframe-be épülve jelenik meg, így viszonylag nagy mozgástérrel rendelkezünk. Bár nem tudom, hogy az iWiW esetében mennyire veszik rossz néven, ha a már említett iframe-n belül elnavigálgatunk ilyen-olyan külső hivatkozásra...

Valószínűleg az OpenSocial ismeretének hiánya miatt a fent már említett cél elérése kb. kétszer gyorsabbnak tűnik a Facebook esetén. De mint tudjuk, jó pap holtig tanul.

Szerencsére kisfiam betegsége gyorsan a feledés homályába merült, így volt időm ismét a TurulMeme fejlesztésével foglalkozni. Sikerült több dolgot is kipipálnom a teendők listán, nézzük szépen sorban.

Már az előző posztban írtam, hogy lesz majd lehetőség közvetve a meme oldaláról megosztani egy nekünk tetsző bejegyzést. Ennek biztosítására került be a listákra egy „megosztom” link, ami egyszerűen kihasználja a Google Reader által biztosított egyik lehetőséget. A működése nagyon egyszerű, az adott bejegyzéshez legenerál egy RSS-t a rendszer és ezt adja át a Google Reader számára.

Az oldal indulása óta törtem a fejemet, hogy milyen módon lehetne valahogy kategorizálni a bejegyzéseket. Eléggé szubjektív dolog, hogy ki milyen bejegyzést milyen kategóriába passzírozna be, ezért a TurulMeme oldalain ma megjelent „Kategóriák” doboz nagyjból az én véleményemet/álláspontomat tükrözi. Persze lehet majd azon sokat vitatkozni, hogy „miért éppen X kategóriába került”, de szerettem volna ennek a ficsörnek egy első változatát mégis kirakni az oldalra (egyébként pedig a saját szájízünknek megfelelő kategórizálására a Google Reader jelenleg is biztosít lehetőséget).

Több módszert is kipróbáltam a kategorizálás megvalósítására és végül a leghatékonyabb módszernek az bizonyult, hogy egyrészről a bejegyzésekhez tartozó cimkéket, másrészről pedig az adott bejegyzést tartalmazó oldal hivatkozását figyeli a rendszer. Jelenleg közel a fele van valamilyen kategóriába besorolva az ajánlásoknak.

Eszpee kérésére a todo lista hátsó régiójából előkaptam egy újabb API, widget megvalósítását. Eddig csak arra volt lehetőség, hogy egy adott bejegyzéshez tartozó adatokat kérjünk le, a mai frissítéssel lehetségessé vált egy adott domain alá tartozó friss hozzászólások lekérésére (sajnos ez ismét felszínre hozott egy problémát: ha egy bejegyzésre több különböző url-en keresztül is hivatkozunk, akkor a meme egyelőre még külön kezeli az azokhoz tartozó bejegyzéseket). Az advanced felhasználók számára az API leírásának erre vonatkozó részét ajánlom, de gondoltam a többiekre is. Ismét a saját kis blogomat vettem elő és azon végeztem el a (fájdalommentes műtétet): a blog.hu keltetőjében létrehoztam egy HTML dobozt, ami megkapta jól megérdemelt tartalmát (szövegét):

<script type="text/javascript" src="http://turulmeme.com/api/widget/commentbox.js"></script>

A formázáshoz pedig felvettem pár új sort a sablon CSS-ébe:

/* TurulMeme Comment Box */

#turulmemeCommentBox
{
    font-size:11px;
    padding-bottom: 20px;
}
#turulmemeCommentBoxHeader
{
    display: none;

}
#turulmemeCommentBox a.sharer, #turulmemeCommentBox a.turulSharer
{
    color:#8A2602;
        font-family:'Georgia',Lucida,Verdana;
    font-size:11px;
    text-decoration:none;
}

#turulmemeCommentBox a.sharer:hover, #turulmemeCommentBox a.turulSharer:hover
{
    background-color: #fff;
    text-decoration: underline;
}

#turulmemeCommentBox img.profilePic
{
    border-width:0;
    margin:0;
    padding-top:0;
    vertical-align:bottom;
    width: 16px;
    height: 16px;
}

#turulmemeCommentBox a.turulSharer
{
    padding: 0px 10px;
    float:left;
}

#turulmemeCommentBox .turulmemeCommentBox-entry-annotation-body a
{
        color:#636060;
        text-decoration:none;
}
#turulmemeCommentBox .turulmemeCommentBox-entry-annotation-body a:hover
{
       text-decoration:none;
}

/* /TurulMeme Comment Box */

Mivel többen is kérdeztek, hogy miként lehet a legegyszerűbben a TurulMeme oldalain megjelenő bejegyzéseket megosztani, véleményt fűzni hozzá, ezért gondoltam leírom én hogy csinálom.

Természetesen elsődlegesen a Google Reader felületét használom arra, hogy időnként átnézve megjelöljek és esetleg véleményt is hozzáfűzzek olyan bejegyzésekhez amik felkeltették az érdeklődésemet.

Ha a memén találok valami érdekes bejegyzést, akkor rákattintok a címére, elolvasom a teljes anyagot az eredeti oldalon. Ha véleményem van róla, vagy csak egyszerűen én is megosztanám, akkor rábökök a toolbar-ban lévő bookmarklet-re. Az eredeti problémához visszakanyarodva, szerintem sokan nem is tudnak erről a lehetőségről. Ha valaki veszi a fáradtságot és a Google Reader felületén rábök a Notes menűpontra, akkor a „Share anything from around the web” megleli a Szent Grálhoz vezető utat.

De megkönnyítendő a dolgot, berakom ebbe a blogbejegyzésbe is. Ha Firefox/Chrome-ot használsz akkor a lentebb található „Megosztom” feliratot egyszerűen húzd be az egérrel a toolbar-ba, ha pedig Explorer-t akkor nyomd meg a jobb egérgombot a „Megosztom” feliraton, majd válaszd ki az „Add to favorites” („Hozzáadás a kedvencekhez” vagy valami hasonló a magyar verziókban) menüpontot.

Megosztom

A használata is pofonegyszerű, ha egy olyan oldalon vagy éppen amit megosztanál, véleményt írnál akkor csak kattints a toolbar-ban a „Megosztom” feliratra (Explorer esetén a Favorites/Kedvencek közül válaszd ki) és a már jól ismert ablak fog megjelenni (feltéve, hogy be vagy jelentkezve a reader-be). Persze nem csak olyan oldalakat lehet így megosztani amit már másvalaki is megosztott, hanem bármit, ráadásul „vicces” dolgokat is ki lehet hozni belőle, erről bővebben itt olvashattok.

Az egyszerűség kedvéért a TurulMeme felületére is ki fog kerülni egy „megosztom” link az adott bejegyzések mellé/alá, de sajnos egyik kisfiam betegsége megakadályozott a mai frissítésben. De ami késik, nem múlik…

A fiatalkori lázadó korszakomat követő családalapítással, gyermekeim megszületésével jóval érzékenyebb lettem a körülöttem lévő világra. Bár anyagi körülményeim nem teszik lehetővé hogy annyira bőkezűen segítsem a rászorulókat és civil szerveződéseket, mint amennyire szeretném, de ha lehetőség adódik rá akkor mégis próbálok valamit tenni értük. Azt gondolom sokan mások is így vannak ezzel, nekik szeretném felhívni a figyelmüket az alig két hete indult kezdeményezésre.

A Bloggerúnió tárt karokkal várja azokat a jelentkezőket, akik vállalják hogy saját oldalaik, blogjuk felületein (kizárólag) civil szervezetet népszerűsítő, pro bono hirdetéseket jelentetnek meg, ezzel is kifejezve szolidaritásukat, elkötelezettségüket a civil ügyek iránt.

Mivel számomra nagyon szimpatikus a kezdeményezés, ezért a privát blogom mellett a mitortent.hu és a TurulMeme is helyet ad ezentúl ilyen jellegű hirdetéseknek. Most te jössz...

Update: teodora jóvoltából a freeblog.hu közössége is okosabb lett, köszönöm! 

Az API megjelenése után nem sokkal már meg is jelent az első Wordpress plugin, de mint tudjuk van élet a WP-n túl is... Pollner pedig volt olyan kedves és lehetőséget adott rá, hogy Médiablog kísérleti alanya lehessen egy sima javascript-es beépítőkód tesztelésének. Miután sikerült nagyjából belőni a dolgot, szerettem volna a (sajnos nagyon ritkán frissülő és kutyát nem érdeklő) privát blogomban is felhasználni, ami történetesen a blog.hu felségjezésű birodalom része. Itt kezdődtek a gondok (ha a végső megoldásra vagy kiváncsi, akkor irány a poszt vége)...

Nem vagyok nagy sablon buherátor, de egyből sikerült kiszúrnom hogy az általam használt alapsablonnál (WP Brown) nem igazán van lehetőség a javascript hivatkozás beszúrására úgy, hogy csak permalinkes oldalon jelenítse meg az adott bejegyzéshez tartozó megosztókat és hozzászólásokat. Gyors levél a support felé és szerencsére a válasz is gyorsan érkezett (külön dicséret, köszönet és hála a rapid reakcióért nekik!): csak akkor próbáljak kiiratni hasonló dolgokat, ha a DOM-ban ott figyel a „feedback_container” azonosítójú elem. Bingó! Ezután már percek kérdése volt megoldani, hogy beszúrja a tartalomba a kívánt elemeket. Viszont először a <blhc:postloop> belesejébe tettem a js hivatkozást, ennek hatására a főoldali lista X alkalommal (minden egyes bejegyzés esetén) lekérte a szervertől a javascript állományt, ráadásul windows.onload-ot használtam a beillesztés előtt. Nem szép…

Gondoltam ha már prototype keretrendszert használ a blog.hu, akkor megpróbálkozom DomReady kiterjesztéssel, de Explorer alatt egyszerűen képtelen voltam normálisan működésre bírni. Tovább nehezítette a helyzetemet, hogy pl. a sablon változtatása után Explorer alatt egyszerűen nem jelentek meg a változások. Átmeneti állományok stb. törlése sem segített, workaround megoldásnak nagyjából az volt használható, ha váltogattam a különböző sablonok között. Na jó, akkor búcsuzzunk el a prototype használatától, welcome jQuery! Persze ez sem ment zökkenőmentesen, hiába próbáltam külső állományból behúzni a jQuery-t, összeakadtak a prototype-al a jQuery.noConflict() ellenére. A végső megoldást az jelentette, hogy a külső hivatkozás helyett bemásoltam a jQuery csomagolt változatát a saját szkriptembe és láss csodát, működik és sikerült végre kiváltanom a window.onload-ot a hőn áhított jQuery(document).ready-vel.

A beépítés menete saját blog.hu sablonodba elég egyszerű: másold be a

<script language="javascript" type="text/javascript" src="http://turulmeme.com/api/widget/bloghu.js"></script>

hivatkozást a sablonba (nálam a <blhc:postloop> tag elé került, neked is ezt javasolnám). A formázást pedig természetesen a CSS szerkesztésével tudod tökéletesre fejleszteni, íme az én sablonomhoz tartozó rész:

/* TurulMeme */

#turulmeme
{
    font-size:12px;
    padding-bottom: 20px;
}
#turulHeader
{
    color:#E2AF0D;
    font-size:15px;
    font-weight:normal;
    letter-spacing:0;
        padding-bottom:10px;
        margin-bottom:6px;
}
#turulmeme a.sharer, #turulmeme a.turulSharer
{
    color:#E6A487;
        font-family:'Georgia',Lucida,Verdana;
    font-size:12px;
    font-weight:bold;
    text-decoration:none;
}

#turulmeme a.sharer:hover, #turulmeme a.turulSharer:hover
{
    background-color: #fff;
    text-decoration: underline;
}

#turulmeme img.profilePic
{
    border-width:0;
    margin:0;
    padding-top:0;
    vertical-align:bottom;
    width: 16px;
    height: 16px;
}

#turulmeme .sharers
{   
    overflow:hidden;
}
#turulmeme .sharers .sharersHeader
{
    color:#666666;
    font-weight: bold;
    float:left;
        font-family:'Georgia',Lucida,Verdana;
        font-size:12px;
}

#turulmeme a.turulSharer
{
    padding: 0px 10px;
    float:left;
}
#turulmeme .tip-box
{
    margin-top: 8px;
    position: relative;
}
#turulmeme .tip-box .arr
{
    background-repeat: no-repeat;
    font-size: 1px;
    height: 100%;
    left: 10px;
    position: absolute;
    top: -11px;
}

#turulmeme .tip-left .c
{
    margin-left: 20px;
}

#turulmeme .tip-left .arr
{
    background-image: url(http://turulmeme.com/images/tip-arrow-top.gif);
    background-position: left bottom;
    background-repeat: no-repeat;
    padding-left: 26px;
}

#turulmeme .entry-annotation
{
    color: #666666;
    margin: 15px 0 10px; /*max-width:565px;*/
}

#turulmeme .entry-annotation-author-name
{
    font-size: 13px;
    font-weight: bold;
}

#turulmeme .entry-annotation-body
{
    font-size: 12px;
    font-style: italic;
    line-height: 115%;
    margin: 0.3em;
}
#turulmeme .entry-annotation-author-container
{
    font-weight: bold;
    padding: 0.3em 0.3em 0.3em 0;
    white-space: nowrap;
}
#turulmeme .entry-annotation-profile-image
{
    border: 1px solid #CCCCCC;
    height: 18px;
    margin-right: 0.3em;
    width: 18px;
}
#turulmeme .entry-annotation-box-container
{
    width: 100%;
}
#turulmeme .entry-annotation-box .round-box
{
    width: auto;
}
#turulmeme .entry-annotation-box .round-box .c
{
    background-color: #E1ECFE !important;
    width: auto;
}
#turulmeme .entry-annotation-box .round-box .s
{
    background-color: #C2D9FF !important;
}
#turulmeme .entry-annotation-box .round-box .tl, #turulmeme .entry-annotation-box .round-box .tr, #turulmeme .entry-annotation-box .round-box .bl, #turulmeme .entry-annotation-box .round-box .br
{
    height: 1px;
    width: 1px;
}
#turulmeme .entry-annotation .tip-left .arr
{
    background-image: url(http://turulmeme.com/images/annotation-tip-arrow-top.gif);
    background-position: 0 3px;
    padding-left: 9px;
}
#turulmeme .entry-annotation .tip-left .c
{
    margin-left: 8px;
}
#turulmeme .round-box
{
    empty-cells: show;
}
#turulmeme .round-box td
{
    margin: 0;
    padding: 0;
}
#turulmeme .round-box .s
{
    font-size: 1px;
    line-height: 1px;
}
#turulmeme.round-box .s, #turulmeme .round-box .c
{
    background-color: #CCCCCC;
}
#turulmeme .round-box .tl, #turulmeme .round-box .tr, #turulmeme .round-box .bl, #turulmeme .round-box .br
{
    background-repeat: no-repeat;
    height: 3px;
    width: 3px;
}
#turulmeme .round-box .tl
{
    background-image: url(http://turulmeme.com/images/corner_tl.gif);
    background-position: left top;
}
#turulmeme .round-box .tr
{
    background-image: url(http://turulmeme.com/images/corner_tr.gif);
    background-position: right top;
}
#turulmeme .round-box .bl
{
    background-image: url(http://turulmeme.com/images/corner_bl.gif);
    background-position: left bottom;
}
#turulmeme .round-box .br
{
    background-image: url(http://turulmeme.com/images/corner_br.gif);
    background-position: right bottom;
}
#turulmeme .round-box .sq
{
    background-image: none;
}
#turulmeme .entry-annotation
{
    margin-top: 0;
}
#turulmeme .entry-annotation-body
{
    margin: 0.1em 0.5em;
}
#turulmeme .annotations
{
    padding:4px;
}

/* /TurulMeme */

Sokszor, sok helyen leírtam, hogy nagyon nehéz dolgom lesz a logókkal kapcsolatban. Egyrészről nagyon jó érzés látni a rengeteg beérkezett tervet (KÖSZÖNÖM!), másrészről pedig nagyon rossz dolog tudni, hogy dönteni kell. Többek közt ezt a felelősséget csökkentendő gondoltam, hogy megpróbálom bevonni a közösség aktív részét a végső ítélet meghozatalába.

Logikusnak tűnt, hogy kiválasztom a nekem legjobban tetsző öt logót és ezek után adom át a pálcát nektek. Amennyire logikusnak tűnt, pontosan annyira volt kemény... Fogtam a jó öreg Photoshop-ot és minden logót egyenként átméreteztem, megpróbáltam beilleszteni a főoldali nézetbe. Az összkép alapján pedig egy tízes skálán osztályoztam egyenként a terveket. Több logónál nem éreztem a felhasznált színeket a jelenlegi dizájnba illeszkedőnek vagy éppen a motívum volt idegen tőle (de ettől még lehetett nagyon ötletes). Sajnos párat ezek közül nagyon fájó szívvel, de alacsonyabb pontszámra kellett belőnöm. 

Az Excel sorainak rendezése volt a legegyszerűbb feladat, melynek eredményét már láthatjátok a Webisztánon. Véleményem szerint a dizájn kérdés nagyon szubjektív dolog (és bevallom, nem is igazán értek hozzá), remélem a többség elfogadja döntésemet a kiválasztott pályaművekkel kapcsolatban, én is pont ugyanígy fogok tenni az általatok megjelölt végső győztessel...

A ketrec publikálásakor már jeleztem, hogy ez csak a kezdete a folyamatoknak. Ma reggel egy következő lépcsőként a főoldalhoz és a friss bejegyzésekhez tartozó RSS csatornák (katt a nagy RSS ikonra) már figyelembe veszik, hogy be vagy-e jelentkezve és a ketrec éppen zárva vagy nyitva van. Innentől semmi akadálya annak, hogy a kedvenc RSS olvasódban (nyilván a Google Reader az:-)) már a saját szűrt listádat lásd.

Többen jelezték, hogy a Google profilképek nem kerültek frissítésre a Turulmeme oldalain belül, ezért most lefuttattam egy update-t, remélem sikerült mindenkinek átvenni az aktuális avatarját. Nem ehhez kapcsolódik, de találtam egy apró problémát a bejegyzések mellé érdekes, egyéb bejegyzéseket ajánló kódban. Ezt is próbáltam fixálni.

Már az oldal indulásakor is említettem Hírbehozó kérdésére válaszolva, hogy a spam az egyik gyenge pontja az ilyen rendszereknek. Ahogy lassan elterjedt a site híre, meg is jelentek az első verebek. Ahogy egyik ismerősöm fogalmazott: „média lettél, megjelentek a spammerek”.

Jó úszómesterhez hasonlóan én sem nézem jó szemmel, ha valaki a medence széléről pisál bele a medencébe (na jó, egy-két puki azért még belefér). Természetesen mindenkinek szíve joga eldönteni, hogy mit oszt meg másokkal, de ha ezt egyszerűen csak saját haszonszerzésének céljából teszi akkor a TurulMeme oldalain belül csak egy sarok jut számára, ahol a térdeplését egy nagy adag kukorica teszi kényelmessé. Persze mint mindenben, ebben is több fokozat létezik, de első körben ezt a térdeplést egy feltünő bilog jelképezi az adott „megosztó” profiloldalán illetve egy „line-through” dekoráció a bejegyzések megosztóinak listáján (de azért sunyiban pár nofollow is becsúszott).

Persze ha valaki szánja-bánja bűneit és becsszóra betartja a jövőben az úttörők 12 pontját, akkor a megbocsátás sem marad el, ismét nyitva áll majd előtte a strand kapuja.

Az elmúlt két napban hatvan ember vette a fáradtságot és regisztrált a rendszerben (a közel napi ezer egyedi látogatóból), de közülük kevesen használják is az ehhez kapcsolódó plusz szolgáltatást, azaz nem igazán jellemző a ketrecbe zárás. Az egyik apró fejlesztás ehhez kapcsolódik, nevezetesen ha valaki mégis „blokkol” bizonyos forrásokat illetve domain neveket és a ketrec ajtaját nyitva tartja, akkor a listákban a számára nem kívánatos tartalmak kicsit „halványabban” jelennek meg.

Magamon azt vettem észre, hogy az aktivitást mutató oldalon előszeretettel pásztázza a szemem azokat az elemeket ahol hozzászólás is van, így bekerült egy szűrési lehetőség az oldalra amivel le tudjuk szűkíteni a listát hozzászólást is tartalmazó bejegyzésekre. A nap másik (és egyben utolsó) fejlesztése is az aktivitáshoz kapcsolódik, ráadásul ezzel már fenyegettelek is benneteket egy előző posztomban. A friss bejegyzések oldalára bekerült egy „rendezés aktivitás alapján” opció. Alapesetben ezen az oldalon a bejegyzések a publikálásuk időrendjében vannak rendezve, de ha valaki az aktivitás alapján történő rendezést választja akkor mindig az a bejegyzés lesz a lista elején amit éppen megosztott valaki vagy éppen hozzászólt.