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!

 
 

Kompresja gzip po stronie serwera

 

gzip - kompresja plików po stronie serweraMetod na przyspieszenie strony jest co najmniej kilkanaście. Najbardziej oczywistą wydaje się być kompresja. Ta ma wiele wariantów. Można kompresować kod, minimalizując liczbę instrukcji czy usuwając powielone fragmenty. Takie podejście opisałem we wpisie dotyczącym kompresji JavaScript i CSS. Można także kompresować grafikę i elementy multimedialne. Można – wreszcie – kompresować pliki po stronie serwera.

GZIP – czy warto?

Kod HTML, CSS, JavaScript i jakikolwiek inny kod sztucznego języka jest doskonałym materiałem do kompresji. Wszystko przez powtarzające się ciągi (znaczniki HTML, słowa kluczowe np. function), które łatwo poddają się kompresji. Kompresja rzędu 50% nie jest niczym nadzwyczajnym. To dwa razy szybsze wczytywanie strony. To dwa razy mniejsze zużycie transferu!

Obsługa GZIP przez przeglądarkę

Jeżeli nasz serwer ma przesyłać skompresowane pliki, przeglądarka musi się na to zgodzić. To, czy serwer prześle pliki spakowane GZIP-em, zależy od nagłówka otrzymanego przez przeglądarkę. W założeniu:

  • przeglądarka wysyła żądanie GET z nagłówkiem Accept-Encoding: gzip, deflate
  • serwer sprawdza czy kompresja jest dostępna i czy żądany zasób (plik) istnieje
  • serwer kompresuje plik i odsyła do klienta
  • przeglądarka dekompresuje stronę i wyświetla ją użytkownikowi

GZIP – jak to włączyć?

Apache posiada dwa moduły kompresujące pliki – mod_gzip i mod_deflate. Skorzystamy z tego drugiego, który jest łatwiejszy w konfiguracji. Odszukaj plik .htaccess w głównym folderze swojej strony i skopiuj do niego:
# kompresja plikow tekstowych, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Voila!

A co z kompresją grafiki?

Dlaczego kompresujemy tylko tekst? Do tego gzip nadaje się najlepiej. Pliki multimediów i grafiki powinny być skompresowane przed umieszczeniem na serwerze.

Używasz kompresji na stronie? Znasz inne, lepsze sposoby na zwiększenie wydajności strony? Podziel się nimi 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!

 
 
następne wpisy »