rel=tag mikroformat dla tagów

 

rel tag mikroformat opis

Atrybut rel z wartością „tag” umieszczony w linku pozwalana na oznaczenie go jako tagu, który kieruje do zbioru treści powiązanych tematycznie z nazwą. Wszystko wyjaśnia krótki przykład poniżej:


<h2>Tagi:</h2>
<a href="http://kissdesign.pl/tag/webdesign" rel="tag">webdesign</a>
<a href="http://kissdesign.pl/tag/seo" rel="tag">seo</a>

Zastosowanie rel=”tag”

Łatwo domyślić się, że naturalnym zastosowaniem tego mikroformatu jest umieszczenie go w linkach chmury tagów. I wszędzie, gdzie tylko umieszcza się linki tagów ;]

Ale po co mi to?

Cel stosowania mikroformatów jest jeden – wykorzystanie możliwości jakie daje semantyczna sieć. Dzięki temu automaty takie jak boty wyszukiwarek (synonim dla Google) mogą łatwiej sklasyfikować treść opisaną mikroformatem i ją „zrozumieć”. To daje większe szanse na wyższą pozycję w rankingu wyszukiwarki przy słowach kluczowych odpowiadających tagom.

Używasz mikroformatów na swoich stronach? Uważasz, że są potrzebne czy to „sztuka dla sztuki”? Skomentuj!

 
 

hCalendar – umów się w XHTML-u

 

Warning: DOMDocument::loadHTML() [domdocument.loadhtml]: Unexpected end tag : p in Entity, line: 69 in /home/noir/domains/kissdesign.pl/public_html/wp-content/themes/kissdesign/netninja_wp.php on line 134

hCalendar - mikroformat przykładyCiąg dalszy cyklu o najpopularniejszych mikroformatach. Dotychczas poznałeś format hCard, teraz czas na hCalendar.

hCalendar – hIstoria

Format hCalendar powstał, aby wyszukiwanie informacji o wydarzeniach było jeszcze prostsze. Algorytmy wyszukiwarek będą mogły z dużym prawdopodobieństwem odpowiedzieć np. na zapytanie kiedy i gdzie odbywa się koncert Madonny? To nie wszystko! Dzięki hCalendar wymiana danych o wydarzeniach będzie jeszcze prostsza. Zaznaczenie myszą fragmentu strony opartej o hCalendar, kliknięcie prawym przyciskiem i zapisz wydarzenie w komórce to jeszcze przyszłość. Jak daleka? Zobaczymy!

hCalendar – opis mikroformatu

Użycie mikroformatu jest naprawdę proste. Wystarczy użyć odpowiednich klas CSS do opisania danych. Nazwy klas są naprawdę intuicyjne. Zobacz na ten przykład użycia hCalendar:


<div class="vevent">
   <abbr title="2010-09-06T08:0000" class="dtstart">6 Września 2010,  8:00</abbr> : 
   <abbr title="2010-09-08T22:00" class="dtend">8 Września 2010,  22:00</abbr> :  
   <span class="summary">Konferencja hCalendar2010</span> w 
   <span class="location">Poznań, Plac Wolności 4</span>
   <div class="description">Konferencja wokół zagadnień semantycznego Internetu. Przedstawienie mikroformatów takich jak hCard, hCalendar.</div>
   <div class="tags">Tagi: 
   <a href="http://eventful.com/events/tags/konferencja" rel="tag">konferencja</a>
   <a href="http://eventful.com/events/tags/web%20design" rel="tag"> web design</a>
   </div>
</div>

Oczywiście nie musisz pamiętać wszystkich pól i klas. Skorzystaj z generatora on-line hCalendar.

hCalendar – jak to wygląda?

Format specyfikuje jedynie odpowiednie elementy HTML opisane klasami CSS. To wszystko. Dlatego forma prezentacji jest całkowicie dowolna. Zobacz powyższy przykład w wersji live:

Konferencja hCalendar2010
Poznań, Plac Wolności 4

Od 6 Września 2010, 8:00
do 8 Września 2010, 22:00

Konferencja wokół zagadnień semantycznego Internetu. Przedstawienie mikroformatów takich jak hCard, hCalendar.

Chcesz skorzystać z powyższego szablonu dla hCalendar? Pobierz plik CSS layoutu hCalendar.

Korzystasz już z formatu hCalendar? Znasz inne mikroformaty? Chcesz się dowiedzieć więcej na ten temat? Napisz w komentarzu!

 
 

hCard – internetowa wizytówka

 

hCard - opis mikroformatu do danych kontaktowychInternet rozwija się w kierunku semantycznej sieci. Chociaż większą część tego trendu biorą na swe barki programiści wyszukiwarek (synonim dla Google), to nie znaczy, że możesz pozostać bierny.

Nie chodzi jedynie o pisanie poprawnego, semantycznego kodu XHTML. To już było. Teraz nadchodzi czas mikroformatów!

hCard – ale o co chodzi?

hCard to format opisujący dane kontaktowe osób, instytucji, adresy miejsc itd. Idea powstania takiego formatu jest jasna – jeden uniwersalny format pozwala na łatwą wymianę, obróbkę i wreszcie wyszukiwanie danych. Dokładnie tak, jak w kontaktach biznesowych – wymieniasz wizytówki na spotkaniu zamiast spisywać adresy i telefony.

hCard – hOwto

Jak użyć mikroformatu hCard? Wystarczy zastosować odpowiednie klasy do opisu danych w ściśle określonym formacie. Jeżeli śmierdzi Ci to czytaniem dłuugiej specyfikacji, to się mylisz. Spójrz na ten przykład:

<div id="hcard-Artur-Polkowski" class="vcard">
   <a class="url fn n" href="http://kissdesign.pl">  <span class="given-name">Artur Polkowski</span></a>
   <div class="org">KISS design</div> //nazwa organizacji
   <a class="email" href="mailto:art.polkowski@gmail.com"> art.polkowski@gmail.com</a>
   <div class="adr">
      <div class="street-address">Łąkowa 15</div>
      <span class="locality">Poznań</span>, <span class="postal-code">60-900</span>
   </div>
   <div class="tel">605 444 555</div>
</div>

Voila!
W głównym obiekcie z klasą (koniecznie!) vcard, umieszczasz poszczególne informacje teleadresowe. Pełna specyfikacja hCard jest oczywiście szersza i obejmuje więcej opcjonalnych pól, ale dla większości przypadków, znajomość powyższych nazw klas jest wystarczająca. Nie musisz jednak ich wszystkich pamiętać. Skorzystaj z generatora hCard on-line. Dzięki niemu masz pewność, że Twój kod jest poprawny i gotowy do wklejenia wprost na stronę.

hCard – a jak to wygląda?

Tak jak zechcesz! Dzięki temu, że dane są opisane ściśle określonymi nazwami klas, nawet nie musisz samodzielnie pisać reguł css. Możesz skorzystać z gotowych! Ściągnij poniższą stylizację hCard w CSS mojego autorstwa!

Artur Polkowski

KISS design

Łąkowa 15

Poznań, 60-900

605 444 555

Szukasz inspiracji? Zobacz projekty pierwszych wizytówek!