mailto: temat i treść predefiniowane

 

Mailto - specyfikacja, tytuł, treść e-mailZwykły tag odnośnika <a> pozwala na uruchomienie domyślnego klienta poczty i wysłanie e-maila pod wskazany adres. W tym celu stosuje się przedrostek mailto: z wpisanym adresem odbiorcy.

Czasami jednak warto rozszerzyć ten schemat o domyślne wartości tematu lub treści e-maila. Jak to zrobić?

<a href="mailto:art.polkowski@gmail.com?body=tresc&subject=tytul-wiadomosci">Artur Polkowski</a>

Powyższy przykład jest poprawny, ale nie radzi sobie z białymi znakami (spacja, przejście do następnej linii). Kodowanie takich znaków jest następujące:

  • spacja — %20
  • przejście do następnej linii — %0D%0A

Po ich zastosowaniu:

<a href="mailto:art.polkowski@gmail.com?body=Witaj!%0D%0ACo u Ciebie?&subject=Tytul%20wiadomosci">Artur Polkowski</a>

Przykład w wersji live: Artur Polkowski

Chcesz dowiedzieć się więcej? Zobacz specyfikację mailto.

 
 

Magiczna siódemka w skutecznej nawigacji

 

Optymalizacja nawigacji z regułą siedmuMagiczny i szczęśliwy numer? Pierwsza myśl – siódemka! Coś w niej musi być skoro mamy 7 grzechów głównych, 7 dni w tygodniu, 7 powodów by się obijać… ;]

Siedem. Plus/minus dwa. Tyle obiektów możemy przechować w naszej pamięci krótkotrwałej. Tyle czynności wykonywać naraz, na tyle rzeczy zwracać uwagę. Siedem. To jedna z naczelnych zasad kognitywistyki, wyniesiona z artykułu opublikowanego w 1956 roku przez psychologa George’a A. Millera.

Dlatego strony z masą animowanych gifów nie są najlepszym rozwiązaniem. Dlatego warto się zastanowić nad strukturą nawigacji na naszej stronie. Ta może być głęboka (użytkownik potrzebuje więcej kliknięć, by dostać się do żądanego zasobu), lub płytka.

Tradycyjnie potrzebujemy złotego środka – i tu przychodzi magic rule of seven. Na każdym poziomie nawigacji powinniśmy mieć 7 odnośników (plus/minus 2). Wtedy przeszukiwanie jest wydajne (niewiele przejść), a jednocześnie nie powoduje uczucia przytłoczenia informacją.

Nawigacja na stronie według magic rule of seven

Kolejną magiczną liczbą jest 3. Trzy kliknięcia to wystarczająco dużo, by zniechęcić czytelnika, poszukującego odpowiedniego zasobu. Sprawdźmy ile stron jesteśmy w stanie wygenerować przy pomocy trzech poziomów nawigacji.

73 = 343 strony

To chyba wystarczająca ilość dla większości stron. A jak Ty budujesz nawigację? Jaką logikę czy podziały stosujesz? Napisz poniżej!

 
 

XHTML – wykorzystanie semantyki

 

Semantyka xhtml, czyli jak zacząć pozycjonowanieProjektujesz, tworzysz strony, podstawy – xhtml i css nie są Ci obce. Ludzie wchodzą na Twoje strony, czytają je, wynoszą z nich jakąś wartość. Wynoszą dzięki temu, że słowa na nich zapisane mają określone znaczenie. Tym jest semantyka. Tym jest język.

Co to ma do xhtml-a? Spójrz na poniższy przykład.


<div class="header">
   Moje ulubione blogi o <span class="bold">web designie</span>:
</div>
<p class="item">seventhmodel.com/blog/</p>
<p class="item">designerblog.pl</p>
<p class="item">kissdesign.pl</p>
</div>

Taki kod popełnia chyba każdy, kto zaczyna obracać się w temacie. Teraz wersja bardziej pro:


<h1>Moje ulubione blogi o <strong>webdesignie</strong>:</h1>
<ul>
   <li>seventhmodel.com/blog/</li>
   <li>designerblog.pl</li>
   <li>kissdesign.pl</li>
</ul>

Jaka to różnica, skoro i jedno, i drugie za pomocą tych samych reguł w css może wyglądać identycznie?

W semantyce oczywiście! Dziś ma to największe znaczenie dla wyszukiwarek. Nie jest żadnym odkryciem, że frazy opisane przez nagłówki h1h6, czy podkreślone za pomocą strong i em, mają większe znaczenie na stronie. Idąc krok dalej, wyszukiwarki już niedługo będą rozkładały strony na czynniki pierwsze i wyjdą poza podział na ważne i nieistotne.

Google szukając dla użytkownika definicji jakiegoś terminu, zajrzy do stron, które zawierają szukaną frazę w tagu dt (definition title). Już teraz mamy wysyp różnych mikroformatów, które korzystają z ukrytej przed użytkownikiem semantyki xhtml-a.

Dlatego stosuj znaczniki, zgodnie z ich przeznaczeniem. Nie nadużywaj nic nie znaczących div-ów i span-ów. Korzystaj z bogactwa jakie daje xhtml. Jestem pewien, że takie podejście zaprocentuje już w niedalekiej przyszłości. A na pewno nie zaszkodzi ;]

Chcesz więcej?  Przyjrzyj się  użyciu specyficznych tagów xhtml opisanych przeze mnie.

Uważasz, że cała ta zabawa w semantykę to tylko dodatkowa czarna robota? A może na własnej skórze odczułeś wpływ semantyki na SEO? Napisz o tym w komentarzu!

 
 

Programowanie akcji w JavaScript

 

Czyli jak to zrobić zgodnie z zaleceniami w3c albo jak to zrobić… tak, by działało ;] Problem dotyczy (tradycyjnie) IE, a także Safari, które stosują inne odwołania do obiektu Event i obiektu wywołującego zdarzenie.

Oto rozwiązanie podpatrzone na quirksmode.org (polecam!):
Plik XHTML z linkiem, do którego dodamy akcję po kliknięciu (onclick). Dobrą praktyką jest definiowanie akcji po załadowaniu strony za pomocą zdarzenia onload elementu body.


<body onload="addListeners();">
<a href="site.html" id="link">Kliknij na mnie!</a>
</body>

Plik JavaScript z oprogramowaną akcją:


function addListeners(){
document.getElementById("link").onclick=doSomething;
}

//domyślnie wg. w3c powinniśmy otrzymać obiekt klasy Event
function doSomething(e) {
	var targ;
	if (!e) var e = window.event; //naprawiamy bug IE
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	if (targ.nodeType == 3) //naprawiamy bug Safari
		targ = targ.parentNode;
}

W ten prosty sposób mamy rozwiązanie cross-browser. Funkcja doSomething dostarcza nam niezbędnych informacji w obiekcie klasy Event (zmienna e), a także referencję do obiektu, który jest źródłem akcji (zmienna targ).

Więcej na ten temat (m.in. szczegółowa obsługa myszy/klawiatury) w tym artykule o eventach.

Skuteczne? Proste? Podziel się wrażeniami w komentarzu!

 
 
« poprzednie wpisynastępne wpisy »