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!

 
 

Na skróty w JavaScript

 

Skrócony zapis definicje tablic, obiektów w JavaScriptWydeptane ścieżki na trawniku, świadczą o złym rozplanowaniu sieci chodników. Ludzie używają drogi na skróty, by szybciej dotrzeć do celu. Nie musisz niszczyć trawnika, by szybciej stworzyć aplikację w JavaScript. Użyj skrótów do tworzenia tablic i obiektów.

Obiekty w JavaScript

Droga naokoło:


var obj = new Object();
obj.name = 'web design template';
obj.id = 1234;
(...)

Droga na skróty:


var obj = {
    name: 'web design template',
    id: 1234,
    (...)
};

Tablice w JavaScript

Oldschool:


var tab = new Array();
tab[0] = 'uno';
tab[1] = 'duo';
(...)

Skrócony zapis:


var tab = ['uno', 'duo', (...)];

Analogia z formatem JSON

Jeżeli jeszcze nie przekonałem Cię do stosowania skrótów, warto się ich nauczyć z jeszcze jednego powodu. Jedno słowo – JSON. JSON to format opisu danych, taki jak XML. Ciężko nie dostrzec analogii w zapisie formatu do skróconej składni w JavaScripcie. Przykład?


{
    name: 'KISS design',
    attributes: [{
        category: 'web design',
        length: 12
    }],
    shorthand: 'Kd',
    display: {
        width: 700,
        height: 300
    }
}

Jeżeli chodzi o zastosowanie, JSON wyśmienicie sprawdza się do komunikacji aplikacji klienckiej i serwera. Dla programistów PHP, szczególnie przydatne mogą okazać się funkcje json_encode i json_decode. JSON znają doskonale Ci, którym nie jest obce tworzenie aplikacji AJAX-owych. Więcej o sposobach użycia formatu JSON, wkrótce.

Znasz inne shorthand’y w JavaScript lub innych językach? Które uważasz za szczególnie przydatne? Wolisz korzystać z XML-a czy JSON-a? Napisz w komentarzu.

 
 

Akcje JavaScript w delegacji

 

Delegowanie akcji w JavaScriptDelegowanie akcji to wbudowana cecha języka JavaScript. Pozwala na błyskawiczne przypisanie akcji do całej grupy elementów. Jak to możliwe? Wykorzystujemy przodka, który oddelegowuje zadanie do elementów, znajdujących się niżej w hierarchii DOM.

Pora na przykład


<ul id="kiss-design-list>
	<li><a href="http://google.pl">Google</a></li>
	<li><a href="http://wikipedia.pl">Wiki</a></li>
	<li><a href="http://smashingmagazine.com">SM</a></li>
	<li><a href="http://kissdesign.pl">KISS design</a></li>
</ul>

Stara szkoła uczyła w ten sposób:


window.onload = function () {
    var list  = document.getElementById("kiss-design-list");
    var links = list.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function () {
		alert("Heey-ya!");
		return false;
        }
    }
};

Działa? Działa. Z tym, że rozwiązanie wymaga napisania sporo kodu. Przelatujemy pętlą po wszystkich odnośnikach na liście i dla każdego z nich przypisujemy akcję.

Zrób to lepiej, czyli delegacja eventów


window.onload = function () {
    var list = document.getElementById("kiss-design-list");
    list.onclick = function (e) {
        var event = e || window.event;
        var target = event.target || event.srcElement;
        if(target.nodeName.toLowerCase() === 'a') {
		alert("Heey-ya!");
		return false;
	}
    }
};

Volia! Wpierw przypisujesz akcję jednemu z przodków, elementów, których akcje chcesz obsłużyć. W tym przykładzie dodajemy akcję elementowi ul#kiss-design-list. Następnie sprawdzasz kto był rzeczywistym celem eventu. Jeżeli celem jest odnośnik (użycie pola nodeName), to obsługujesz akcję.

Można jeszcze krócej?

Zapis mógłby być jeszcze krótszy, ale przeglądarki w różny sposób dostarczają obiekty Event i informacje na temat celu. Stąd linie 4 i 5. Aby otrzymać rozwiązanie w pełni cross-browser, przeczytaj poprzedni wpis o akcjach w JavaScript. Oczywiście korzystając z gotowych frameworków w stylu jQuery, nie musisz się zupełnie o to martwić.

Return false. Or maybe true.

Pamiętaj, aby po obsłudze akcji zwracać false, jeżeli nie chcesz by przeglądarka wykonała domyślną akcję (w tym przypadku przekierowanie do odpowiedniej strony). Dzięki temu po kliknięciu na link, użytkownik zobaczy jedynie okno alertu.

Czy delegacja akcji faktycznie jest uproszczeniem? Może wolisz korzystać z frameworków, nawet jeżeli masz do napisania jedną funkcję w JS? Podziel się wrażeniami w komentarzu.

 
 
następne wpisy »