Avatary na joggerze za pomocą mikroformatu hCard

24 kwietnia 2009, 13:37:55

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

Tagi: avatargaehcardmicroformats

Ta notka została wysłanana 24 kwietnia 2009 o 13:37:55.
Możesz przejść na koniec i zostawić komentarz.

Komentarze do notki Avatary na joggerze za pomocą mikroformatu hCard

  1. # mrk powiedział(a):
    24 kwietnia 2009 o 13:39:20

    << Przykład awatara wyciągniętego tą metodą. Zachęcam do dodawania do szablonów swoich wizytówek :)


  2. # Wasacz powiedział(a):
    24 kwietnia 2009 o 13:51:02

    Śmieszna sprawa, ale Jogger na głównej zdeencjował kod z tagiem obrazka, przeparsował do HTML, wyciął obrazek i zastąpił przez placeholder „[Obraz]”. Buuuuug.


  3. # mrk powiedział(a):
    24 kwietnia 2009 o 13:53:58

    Fakt, też zauważyłem. Na stronie bloga całe szczęście ok. Wrzucaj hCard na bloga :)


  4. # Wasacz powiedział(a):
    24 kwietnia 2009 o 13:56:32

    Moja aktualna „wizytówka” (http://wasacz.net/) czeka na aktualizację, chciałem ją właśnie dostosować do hCard. I tutaj mam problem, bo na blogach zwykle podpisuję się adresem bloga (chyba że OpenID jest dostępny, wtedy stroną domową). Da się więc jakoś umieścić metainformację, że moja wizytówka leży gdzieś indziej?


  5. # Wasacz powiedział(a):
    24 kwietnia 2009 o 13:57:26

    PS: Te avatary opóźniają ładowanie strony dość znacząco, ale mi to wygląda na powolny serwer ;) Wybacz combo-comment.


  6. # mrk powiedział(a):
    24 kwietnia 2009 o 14:01:20

    Nic nie wiem czy da się jakoś przekazać informację o innym położeniu wizytówki, musiałbyś wrzucić pewnie podwójnie. Co do wolnego ładowania - taka specyfika GAE :( generalnie podobno odżywa przy większym obciążeniu (aplikacja z pamięci nie jest wyrzucana)


  7. # Wasacz powiedział(a):
    24 kwietnia 2009 o 14:03:09

    Przepisać na szybsze PHP i tyle ;-)


  8. # q84_fH powiedział(a):
    24 kwietnia 2009 o 15:34:04

    Temat już był.
    Mój failskrypt:
    http://q84.fh.jogger.pl/2009/01/04/jogger-pl-resampling-favikonek-wersja-bez-exec/


  9. # Michał Górny powiedział(a):
    24 kwietnia 2009 o 17:50:31

    Użycie wymuszonych nazw klas do przechowywania informacji = fail. Tyle na temat.


  10. # mrk powiedział(a):
    24 kwietnia 2009 o 17:54:02

    @mgorny: generalnie wszystkie "mikroformaty" tak mają - masz jakiś lepszy pomysł? Fakt, w xml'u można by definiować oddzielny 'namespace' powiedzmy, a w html'u ?


  11. # Zal powiedział(a):
    25 kwietnia 2009 o 00:57:10

    U siebie to wrzuciłem, a teraz wykonuję test, czy faktycznie skrypt działa ;]


  12. # mrk powiedział(a):
    25 kwietnia 2009 o 00:59:12

    passed :)


  13. # Tomipnh powiedział(a):
    17 lutego 2010 o 00:10:59

    blah


Dodaj komentarz: