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!

 
 

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!

 
 

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 »