Jaki adres www powinny mieć wersje językowe strony?

Istnieją trzy podstawowe możliwości rozwiania problemu z wersjami strony www. Po pierwsze możemy wykupić różne domeny dla każdej z nich. Przykładowo pod adresem mojastrona.pl umieścimy rodzimą wersję, pod mojastrona.com angielską, mojastrona.de niemiecką itd. Oczywiście z uwagi na koszty domen jest to najdroższa możliwość. O ile można to robić przy kliku krajach, to ich większa ilość stwarza coraz większe problemy.

Przeciwną możliwością jest skorzystanie z podziału serwisu na części według języka i korzystanie z odpowiedniego parametru do jego rozróżnienia. Może to wyglądać następująco:

• mojastrona.pl
• mojastrona.pl/en
• mojastrona.pl/de

Takie rozwianie jest znaczenie tańsze (potrzebujemy tylko jednej domeny), jednak ma swoje wady. Cała strona jest umieszczona pod jednym adresem IP, katalogi stron www przyjmą tylko jej jedną wersję, a więc trudniej przeprowadzić udane pozycjonowanie. Takich minusów jest jeszcze więcej.

Istnieje dobra metoda pośrednia pomiędzy dwoma powyższymi przypadkami, opierająca się na subdomenach. Łączy ona ich zalety w postaci niskich kosztów (subdomeny mamy w cenie domeny głównej) oraz nie posiada wad drugiej z omówionych możliwości. Na początek pod główną domeną umieszczamy naszą podstawową wersję językową. Może to być mojastorna.pl dla wersji polskiej, jednak w przypadku stawiania na wielojęzyczność lepiej skorzystać z mojastrona.com dla angielskiej itd. Następnie dla kolejnych tworzymy kolejne, na przykład:

• pl.mojastrona.com
• de.mojastrona.com
• fr.mojastrona.com
• ru.mojastrona.com

Możemy także w ten sposób tworzyć wersje językowe dla poszczególnych krajów. Przykładowo język hiszpański wygląda trochę inaczej w swojej ojczyźnie niż w Meksyku. Dlatego możemy zastosować następujące wersje:

• es-es.mojastrona.com – hiszpańska wersja językowa dla mieszkańców Hiszpanii
• es-mx.mojastrona.com – hiszpańska wersja językowa dla mieszkańców Meksyku

Oznaczenie wersji językowych dla Google

Gdy poszczególne wersje językowe strony są wydzielone na subdomenach, warto dodatkowo pokazać Google, jak ma je rozróżniać. Można w tym celu skorzystać z właściwości rel=”alternate” dla znacznika HTML link. Można to zrobić w następujący sposób:

<link rel="alternate" hreflang="en" href="http://example.com/" />
<link rel="alternate" hreflang="de" href="http://de.example.com/" />
<link rel="alternate" hreflang="es-ES" href="http://es-es.example.com/" />
<link rel="alternate" hreflang="es-MX" href="http://es-mx.example.com/" />

Dodatkowo, gdy wyświetlamy bardzo podobną treść pod różnymi subdomenami dla kilku krajów, warto oznaczyć wersję preferowaną. Można to zrobić przy pomocy właściwości rel=”canonical” znacznika link. Dzięki temu unikniemy problemów z duplikowaniem treści:

<link rel="canonical" href="http://www.example.com/" />

Niestandardowe czcionki jako grafika

Jak już wspomniałem we wstępie, umieszczanie „graficznych tekstów” nie jest najlepszym rozwiązaniem, po pierwsze ze względu na pozycjonowanie. Dla Google bardzo ważna jest treść na naszej stronie, a w przypadku takiego podejścia nie będzie ona odczytana. Dodatkowo utrudnione będzie wprowadzanie zmian na stronie, gdyż za każdym razem będziemy musieli generować na nowo grafiki i wstawiać je na stronie. Podobne problemy może sprawiać strona przygotowana we Flashu.

Aby to zautomatyzować, możemy wykorzystać bibliotekę JavaScript Cufon. Generuje ona sama potrzebne grafiki do wprowadzonych przez nas tekstów, jednak pozostanie drugi z problemów – odczytanie ich przez wyszukiwarki internetowe.

Jeśli w graficzny sposób tworzymy tylko niewielkie części strony, menu lub nagłówek, nie będzie to problem. Co jednak zrobić w przypadku normalnych tekstów?

Wstawianie czcionek przez @font-face

Istnieje bardzo proste rozwiązanie powyższych problemów. W CSS możemy dodawać własne, niestandardowe czcionki przy pomocy @font-face. Pewną niedogodnością jest to, że poszczególne przeglądarki internetowe wykorzystują różne standardy (EOT, SVG,  WOFF, TTF). Możemy jednak w jednej definicji zawrzeć różne warianty, dzięki czemu w praktycznie w każdej wygląd będzie taki, jak zamierzaliśmy (nawet w Internet Explorer 6).

Najprościej stworzyć wymagane definicje za pośrednictwem serwisu Font Squirrel. Możemy tam wybrać z całkiem pokaźnego zbioru interesującą nas czcionkę i pobrać paczkę zawierającą pliki źródłowe w różnych formatach oraz wymagany kod CSS.

Jeśli nie znajdziemy w zasobach serwisu interesującego fonta, możemy stworzyć własną definicję. Trzeba w tym celu posiadać plik TTF, z którego dostępny generator utworzy dla nas indywidualną paczkę z definicją czcionki.

Gdy posiadamy już definicję wybranej przez nasz czcionki w plikach EOT, SVG,  WOFF oraz TTF należy je wgrać na serwer, a następnie określić nową czcionkę w CSS podając odpowiednie ścieżki:

@font-face {
font-family: 'KingthingsSpikelessRegular';
src: url('Kingthings_Spikeless-webfont.eot');
src: url('Kingthings_Spikeless-webfont.eot?#iefix') format('embedded-opentype'),
url('Kingthings_Spikeless-webfont.woff') format('woff'),
url('Kingthings_Spikeless-webfont.ttf') format('truetype'),
url('Kingthings_Spikeless-webfont.svg#KingthingsSpikelessRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Następnie wystarczy tak zdefiniowaną czcionkę przypisać standardowo do odpowiedniego obiektu poprzez font-family:

p {font-family: KingthingsSpikelessRegular, Arial, sans-serif}

Niestandardowe czcionki z Google Web Fonts

Jeśli nie chcemy sami przygotowywać definicji czcionek i wgrywać ich na nasz serwer, możemy skorzystać z usługi Google Web Fonts. Po wyborze interesującej nas czcionki możemy ją dodać na trzy różne sposoby:

• standardowe dołączenie dokumentu CSS

  <link href='http://fonts.googleapis.com/css?family=Nosifer+Caps' rel='stylesheet' type='text/css'>
  

• polecenie @import w CSS

  @import url(http://fonts.googleapis.com/css?family=Nosifer+Caps);
  

• kod Java Script

Usługa Google sama rozpozna z jakiej przeglądarki korzystamy i prześle jej odpowiednie definicje. Szybkość działania jest bardzo dobra, czcionki pojawiają się w wybranym formacie praktycznie od razu.

Na zakończenie niniejszego poradnika otrzymamy efekt, który można zobaczyć w całości tutaj. Będzie to formularz umożliwiający dodanie nowej osoby do przykładowego systemu. Znajdzie się na nim kilka pól, w tym lista rozwijana z nazwami zawodów a obok niej przycisk „Dodaj nowy”. Po jego kliknięciu pojawi się odpowiednie okno z formularzem dodania rekordu. Pomijam tu fakt, że pola będą generowane na podstawie danych z bazy, oraz uproszczam wygląd samego formularza (osoba a nie imię, nazwisko, itd).

Na początek stwórzmy więc formularz, który będzie widoczny od samego początku na ekranie.

<form action="" method="post">
  <div class="field">
    <label for="person">Osoba</label>
    <input type="text" name="person" id="person" value=""/>
  </div>
  <div id="add-new-subform">
  <label for="new-occupation">Nowy zawód</label>
  <input type="text" value="" name="new-occupation" id="new-occupation" />
  <input type="button" value="Dodaj" id="add-new-save" />
  <input type="button" value="Anuluj" id="add-new-cancel" />
  </div>
  <div class="field">
    <label for="occupation">Zawód</label>
    <select name="occupation" id="occupation">
      <option value="1">Opcja 1</option>
      <option value="2">Opcja 2</option>
      <option value="3">Opcja 3</option>
      <option value="4">Opcja 4</option>
    </select>
    <input type="button" value="+" id="add-new-show" />
  </div>
  <div class="field">
    <label for="information">Uwagi</label>
    <textarea name="information" id="information" rows="5" cols="10"></textarea>
  </div>
  <div>
    <input type="submit" value="Zapisz" />
  </div>
</form>

W powyższym formularzu zostały umieszczone trzy pola: tekstowe, select oraz textarea. W divie „add-new-subform” znajdzie się podformularz z polem tekstowym, który pojawi się w momencie dodawania nowego rekordu. Nie będę tu prezentował całego pliku CSS, można go zobaczyć w zaprezentowanym wcześniej przykładzie.

Ważne są dwie definicje. Po pierwsze, należy ukryć podformularz i przygotować go do wyświetlenia na pierwszym planie (wyskoki z-index):

div#add-new-subform {position: absolute; display: none; z-index: 100;
 background-color: #fff; border: solid 1px #000; padding: 15px;}

Dodatkowo zdefiniujemy obiekt, który „ściemni” całość widocznej strony. Ważne, aby znalazł się on na obecnie widocznym obszarze, ale pod nowym oknem formularza. Dlatego musi mieć odpowiednią wartość z-index i na początku pozostać niewidoczny. Definicje przeźroczystości zostały przedstawione w sposób, dzięki któremu powinny się wyświetlać poprawnie we wszystkich popularnych przeglądarkach:

div#cover {position: fixed; width: 100%; height: 100%;
z-index: 99; background-color: #000000; -moz-opacity: 0.7; 
opacity: 0.7; filter: alpha(opacity=70);}

Teraz pozostaje oprogramowanie funkcjonalności w jQuery (dokładny opis poniżej):

$(document).ready(function(){
    $('#add-new-show').click(function(){
	// dodanie ciemnego tła
	$('body').prepend('<div id="cover">&nbsp;</div>');
	// wyświetlenie podformularza
	$("#add-new-subform").css({'display': 'block'});
      
	$("#add-new-save").click(function(){
	  var new_occupation = $("#new-occupation").val();
	  if(typeof new_occupation !== "undefined" && new_occupation){
	    // dodanie nowego rekordu do bazy oraz wpisu w polu select 
	    addNewOccupation(new_occupation);
	    // usunięcie ciemnego tła i ukrycie podformularza
	    $('#cover').remove();
	    $("#add-new-subform").css({'display': 'none'});
	  };
	});
	
	$("#add-new-cancel").click(function(){
	    // usunięcie ciemnego tła i ukrycie podformularza
	    $('#cover').remove();
	    $("#add-new-subform").css({'display': 'none'});
	});
    });
});      

function addNewOccupation(new_occupation){
  // tutaj za pomoca AJAX mozna dodać do bazy nowy rekord
  // zapytanie powinno zwrócić id nowego zawodu
  var id = 100;	// id nowego zawodu dodanego do bazy
  $("#occupation").append(new Option(new_occupation,id));
  $("#occupation").val(id);
}

Na początek ustalamy działanie dla akcji kliknięcia w przycisk „+” (#add-new-show). Kolejno: dodajemy nową warstwę do dokumentu, która przykryje całą obecnie wyświetlaną stronę (patrz definicja styli dla #cover) oraz wyświetlamy podformularz.

Następnie definiujemy odpowiednie działania dla klikniętego przycisku zapisania nowego zawodu (#add-new-save). Gdy został on wpisany w pojawiającym się polu tekstowym, wywołujemy funkcję addNewOccupation(), po czym usuwamy ciemne tło i ukrywamy podformularz. Funkcja dodania nowego zawodu powinna zawierać wywołanie AJAX, zapisujące dane do bazy po uprzednim sprawdzeniu ich poprawności. Wynikiem powinno być id dodanego rekordu, dzięki czemu będziemy mogli parę id oraz nazwa zawodu dopisać do pola select na formularzu głównym, a następnie zaznaczyć ją jako wybraną. W zaprezentowanym przykładzie nie przedstawiono samego zapisu do bazy, a do zmiennej id przypisana została przykładowa wartość.

Powyższy przykład został zaprezentowany w bardzo uproszczony sposób, może stanowić podstawę do własnej implementacji ciekawego wywołania okna dialogowego. Dostosowanie do własnych potrzeb nie powinno stanowić większego problemu.

Dzięki różnym upodobaniom użytkowników musimy mieć więc zainstalowanych w systemie kilka przeglądarek internetowych. Tylko wtedy stestujemy dobrze wygląd tworzonego serwisu WWW. Jeśli chodzi o Internet Explorer, możemy sobie pomóc świetną aplikacją o nazwie IE Tester.

Dzięki niej mamy możliwość wyświetlenia strony w wielu wersjach przeglądarki, tj. IE 5.5, 6, 7, 8 oraz 9 (w momencie pisania tego artykułu). Wyświetlenie strony w ostatniej wersji IE jest możliwe tylko pod Windows 7 z zainstalowaną w systemie wersją tej przeglądarki. Program można pobrać ze strony http://www.my-debugbar.com

W tym tekście zamierzam się zająć ostatnim z tych elementów, czyli elementami graficznymi naszego serwisu. Każdy wie, że nie powinno ich być za dużo, oraz  że powinny mieć jak najmniejszy rozmiar. Istnieje także sposób na zmniejszenie liczby odwołań do nich.

Wystarczy w tym celu skorzystać z dobrodziejstw Data URI, czyli możliwości przechowywania obrazka w postaci binarnej, zakodowanej przy pomocy base64,  bezpośrednio w dokumencie CSS.  Dzięki temu zmniejszamy ilość odwołań HTTP, wielkość pliku CSS możemy natomiast zmniejszyć poprzez kompresję. Wystarczy skorzystać z gzipa, dane zapisane w base64 kompresują się bardzo dobrze.

Przykładowy kod dodający obrazek, może wyglądać w następujący sposób:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAA
AAMAgMAAAArG7R0AAAADFBMVEX/////mQD/ZgDMMwAfZILpAAAAJUlEQVQImWNgAALW
0BAGqVWrIVgDiLu0GaQWdUNojdVwOf7/fwACPA009gxCxwAAAABJRU5ErkJggg=="
alt="My image" />

Definicja elementu listy w CSS może natomiatst wyglądać tak:

ul li { margin-left: 20px; background: url(' data:image/png;
base64,iVBORw0KGgoAAAANSUhEUgAAAAwAA AAMAgMAAAArG7R0AAAADFBMVEX//
///mQD/ZgDMMwAfZILpAAAAJUlEQVQImWNgAALW0BAGqVWrIVgDiLu0GaQWdUNojd
VwOf7/fwACPA009gxCxwAAAABJRU5ErkJggg==') top left no-repeat;}

Aby zakodować obrazek pod systemami linuksowymi, wystarczy skorzystać z polecania base64. Innym sposobem może być skorzystanie z darmowego konwertera.

Jeśli korzystamy z PHP, możemy wygenerować potrzeby kod przy użyciu poniższej funkcji:

<?php
function data_uri($file, $mime)
{
 $contents = file_get_contents($file);
 $base64   = base64_encode($contents);
 return ('data:' . $mime . ';base64,' . $base64);
}
?>

A nastepnie wykorzystać go na naszej stronie:

<img src="<?php echo data_uri('image.png','image/png');?>" alt="My image" />

Niestety, nie ma róży bez kolców. Mimo ogromnych zalet jakie stwarza Data URI, napotkamy na ogromny problem związany z przeglądarkami. IE potrafi wyświetlać zakodowane w ten sposób obrazki od wersji 8, o ile nie przekraczają one 32 KB. Starsze wersje przeglądarki Microsoftu w ogóle nie obsługują tej technologii.

Jeśli jednak optymalizujemy serwis będący pod dużym obciążeniem, warto skorzystać z tego mechanizmu dla użytkowników używających przeglądarek, które go wspierają.