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!

 
 

Uwaga – nowe okno! Ikona przy linku _blank

 

Ikona przy linku otwierającym nowe okno przeglądarki

Linki otwierające się w nowych oknach z przyczyny znanej jedynie autorowi strony irytują szarego internetowego szperacza. Niekiedy jednak warto, czasami wręcz trzeba użyć feralnego atrybutu <a target=”_blank„>link</a>.

Szczególnie gdy mamy do czynienia z listą zewnętrznych źródeł w artykule czy wskazujemy adres do strony, która będzie prawdopodobnie równolegle wykorzystywana z docelową. Do tej drugiej kategorii można zaliczyć wszystkie strony z materiałami do pobrania, strony aplikacji internetowych itp.

Co jednak zrobić, by pasek irytacji czytelnika nie przekroczył maksimum po kilku linkach otwierających nowe okno? Wystarczy go poinformować o takich linkach za pomocą dodatkowej ikony przy odnośniku.

Zobacz eleganckie i za razem funkcjonalne rozwiązanie oznaczenia linków _blank.

Gotowy kod poniżej. Ikona open.png do pobrania.

a[target="_blank"],
a[target="new"]{
   padding-right:14px;  /* szerokość ikony z marginesem */
   background: url(open.png) right top no-repeat;
} 

Przydał Ci się ten post? Wykorzystałeś przykład na swojej stronie? Napisz o tym w komentarzu! :-)

 
 

Wielki POST i mały GET

 

Widzieliście ostrzeżenia typu „nie odświeżaj strony, ani nie używaj przycisku wstecz przeglądarki” ? Zapewne tak, bo to dość często stosowana praktyka zapobiegania ponownemu wysłaniu danych np. poprzez formularz. Praktyka powszechna, ale metoda rozwiązania problemu żadna.

Weźmy przykład – formularz przelewu internetowego. Wypełniamy dane, klikamy przycisk Akceptuj. Dane o transakcji zostają wysłane do serwera za pomocą metody POST. Serwer odnotowuje zmiany w bazie danych. Załadowana zostaje ta sama strona z formularzem. Użytkownik klika wstecz. Przeglądarka z reguły rzuca ostrzeżeniem o powtórnym przesłaniu danych żądaniem POST. Wiadomość jest zbyt konfundująca, użytkownik nieopatrznie zgadza się na ponowne przesłanie danych. Pieniądze zostają przelane dwukrotnie.

Co zrobić by uniknąć pozwów od użytkowników takich jak powyżej? Ostrzec, że za ich działania na stronie nie odpowiadamy prawnie lub użyć przekierowania po przetworzeniu danych otrzymanych POST-em. Tylko tyle i aż tyle. Teraz przykład wypisania z listy mailingowej. Schemat działania zawarty w trzech plikach:

form.html z prostym formularzem:


<form action="form_post.php" method="post">
   <input type="text" name="email" />
   <input type="submit" value="Wyślij" />
</form>

form_post.php przetwarzający dane (operacje na bazie danych itp.)


<?php
if(isset($_POST['email'])){
   // usuń e-mail z bazy subskrybentów
}
//przekierowanie z parametrem - adresem e-mail (metoda GET!)
header('Location: form_result.php?email=' . $_POST['email']);
?>

form_result.php, czyli plik wynikowy z rezultatem operacji


<?php
if(isset($_GET['email'])){
   //pobierz dane np. imię i nazwisko z bazy danych
   $query = "SELECT name, surname FORM users WHERE email = ?";
   //podstawienie $_GET['email'] pod zmienną wiązania i zwrócenie wyniku bazy danych
   (...)
   echo "$name $surname, zostałeś poprawnie wypisany z newslettera.";
}
?>

Voila! Teraz nawet po naciśnięciu przycisku wstecz, nie ma zagrożenia, ponieważ strona rezultatu operacji była ładowana za pomocą metody GET.

Idea szerzej opisana w artykule Redirect After Post.

 
 

Idealna długość linii

 

Szerokość linii tekstu ma kluczowe znaczenie dla czytelności. Powinna ona zawierać 45 do 75 znaków, co daje wartość 30 do 50 em szerokości. Voila!

 
 
« poprzednie wpisynastępne wpisy »