mrk's techblog

Co to jest hCard? Jest to jeden z mikroformatów służący do publikowania informacji osobistych (wizytówki), między innymi fotografii (avatara) użytkownika. Mikroformat ten definiuje po prostu sposób zapisu informacji z popularnego standardu vCard za pomocą tagów HTML.

Listę site'ów które używają różnych mikroformatów można zobaczyć tutaj - znajdziemy tam takich potentatów jak digg, google, flickr, linkedin czy twitter.

Zgodną ze standardem wizytówkę można przygotować za pomocą generatora , minimalna, zawierająca tylko avatar wygląda tak:

 
<div class="vcard">
  <img src="url_avatara" class="photo" />
</div>
 

Klasę "vcard" można odpowiednio udekorować za pomocą CSS, np. ukryć, jeżeli nie chcemy zdjęcia widocznego na stronie.

Na GAE powiesiłem małą usługę która szuka na podanej stronie pierwszej wizytówki w formacie hCard i przekierowuje do wyspecyfikowanego tam avatara, w przypadku braku do obrazka domyślnego. (keszując oczywiście dane, na razie tylko w memcache)

Potem wystarczy tylko odpowiednio udekorować komentarze pod wpisem, przykład w jQuery:

 
$(document).ready(function() {
  $('.commentlist li').each(function(k,v){
    url = $('cite a',v).attr('href') || 'anonim';
    $(v).prepend('<img src="http://its.sed.pl/avatar/'+url+'/" />')
  })
})
 

Zalety takiego rozwiązania? Zgodność z popularnym standardem, jest szansa, że tak przygotowaną wizytówkę będą w stanie automatycznie wykryć inne serwisy.

TODO:

• Przeskalowywanie obrazków po stronie serwera, generowanie kilku rozmiarów miniatur

Zaglądasz codziennie na pudelka, plotka czy inną naszą-klasę ;) i musisz tłumaczyć się potem kumplom z kompromitującej historii w firefoksie (eh ten awesome bar) ?

Rozwiązanie: trigger w sqlite o takiej postaci:

 
CREATE TRIGGER history_guard_trigger 
BEFORE INSERT ON moz_places 
WHEN new.url IN ('http://pudelek.pl/', 'http://www.plotek.pl/') 
BEGIN  SELECT RAISE(ROLLBACK,'bez takich mi tu'); END
 

Wrzucić można za pomocą świetnego rozszerzenia SQLite Manager, baza 'places.sqlite', polecenie Execute SQL.

P.S. Tak, wiem, że jest niejedno rozszerzenie które daje podobną funkcjonalność, ale tak jest na pewno bardziej geekowsko ;) Poza tym takie rozwiązanie jest prawdopodobnie lżejsze niż instalowanie kolejnego rozszerzenia...

Tutaj lekko zmodyfikowany Blip_er muzzy'iego - za pomocą kilku regexp'ów wstawiam linki do użytkowników, tagów, statusów i shortlinków. Aha, wymagane jQuery zamiast prototype. Demo po prawej.