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.

W momencie pisania artykułu CMS Made Simple był dostępny w wersji 1.10 i i takiej dotyczą niniejsze informacje. Oczywiście problem występuje we wcześniejszych, oraz może się pojawić w późniejszych edycjach.

Na czym polega problem?

Na wirtualnych serwerach Home.pl, ale taka sytuacja może mieć miejsce na innych, dostęp do katalogu tmp jest ograniczony. Z założenia ma on służyć do zapisu różnych danych tymczasowych, takich jak np. sesje. Ze względów bezpieczeństwa jest on niedostępny z zewnątrz.

Cały problem polega na tym, że od wersji 1.8 CMS Made Simple generuje arkusze CSS do statycznych plików i umieszcza je w katalogu /tmp/cache. O ile potrafi je w tym przypadku bez problemu zapisać, to już przy dostępie z zewnątrz po HTTP otrzymujemy wspomniany wcześniej błąd 403 Forbidden, czyli brak dostępu.

Rozwiązanie problemu nr 1 – inny sposób generowania CSS

Pierwszym i najszybszym sposobem na niedogodność, jest zmiana sposobu generowania plików CSS, a konkretnie do powrócenia do starej możliwości stosowanej w CMS Made Simple. Wystarczy więc zamienić w szablonie wywołanie {cms_stylesheet} na {stylesheet}.

Możemy to zrobić w panelu administracyjnym, wchodząc w menu w Wygląd -> Szablony i wybrać odpowiedni/e szablon/y.

W ten sposób zamiast dołączenia CSS z katalogu /tmp/cache w postaci

<link rel="stylesheet" type="text/css" href="http://www.moja-strona.pl/cache/stylesheet_50_132723884.css" media="all">

w wygenerowanym pliku HTML otrzymamy:

<link rel="stylesheet" type="text/css" media="all" href="http://www.fmoja-strona.pl/stylesheet.php?cssid=50&mediatype=all" />

Rozwiązanie problemu nr 2 – zmiana w konfiguracji

I tu pojawia się drobny problem. Pierwszym krokiem w zmianie jest oczywiście sprawdzenie zawartości pliku config.php. Tu niestety możemy się rozczarować – nie ma w nim odpowiedniej opcji, umożliwiającej szybką zmianę. Jedyną związaną z tym katalogiem zmienną jest ustawienie

$config['previews_path'] = '/tmp/cache';

Założenie katalogu /cache i nadanie mu praw do zapisu, a następnie zmiana powyższej zmiennej nie spowoduje poprawnego dostępu do plików CSS. Jest to bowiem związane z tym, że wykorzystywana w wielu miejscach CMSa ścieżka jest zapisana w pliku fileloc.php oraz niestety „na twardo” w innych.

UWAGA: wszelkie opisane poniżej zmiany ingerują bezpośrednio w kod CMS Made Simple. W takim wypadku tracimy możliwość oficjalnego supprotu oraz utrudniamy sobie aktualizacje. Musimy pamiętać, że po jej wykonaniu będziemy musieli ponownie wprowadzić nasze poprawki.

W linii nr 3 w pliku fileloc.php  znajduje się następująca definicja:

define("TMP_CACHE_LOCATION", dirname(__FILE__) . DIRECTORY_SEPARATOR . 'tmp' . DIRECTORY_SEPARATOR . 'cache');

Wystarczy więc wpisać tu swoją własną ścieżkę, czyli w naszym przypadku /cache:

define("TMP_CACHE_LOCATION", dirname(__FILE__) . DIRECTORY_SEPARATOR . 'cache');

Po tej zmianie pliki CSS będą zapisywane w nowej lokacji, jednak niestety CMS będzie ich nadal szukał w poprzedniej. Cóż, jest to ewidentny błąd programistów, którzy „na twardo: wpisali ścieżkę, zamiast skorzystać z odpowiedniej zmiennej konfiguracyjnej. Musimy więc zająć się plikiem /plugins/function.cms_stylesheet.php i odnaleźć odpowiedniwpis (linie 117 i 121 lub w ich pobliżu). Najlepiej w nich po prostu podać swoje ścieżki do katalogu, w którym zapisywane są obecnie pliki CSS. Poniższe linie:

$stylesheet .= '<link rel="stylesheet" type="text/css" href="' . $root_url . '/tmp/cache/' . $filename . '"/>' . "\n";

$stylesheet .= '<link rel="stylesheet" type="text/css" href="' . $root_url . '/tmp/cache/' . $filename.'" media="' . $media_type.'"/>'."\n";

należy więc zamienić na

$stylesheet .= '<link rel="stylesheet" type="text/css" href="' . $root_url . $config['previews_path'] . '/' . $filename.'" media="' . $media_type . '"/>' . "\n";

$stylesheet .= '<link rel="stylesheet" type="text/css" href="' . $root_url . $config['previews_path'] . '/' . $filename . '"/>' . "\n";

W ten sposób problem z dostępem do CSS zostanie rozwiązany i arkusze stylów będą mogły być wczytane przez naszą stronę.

Problem z pluginami, np. Captcha 0.4.5

Część dodatków pisanych do CMS Made Simple przez zewnętrznych programistów zawiera podobny do opisanego powyżej błąd. Niestety, ale ścieżki dostępu do katalogów cache zostały w nich zapisane „na twardo”, a nie z wykorzystaniem zmiennej konfiguracyjnej. Musimy być zatem czujni i gdy występuje problem z dostępem do tworzonych plików, przeglądać ich kod.

Przykładowo występuje on we wtyczce Captcha (w momencie pisania artykułu w wersji 0.4.5), z której korzysta między innymi doskonałe rozszerzenie Form Builider. Zapisuje ona wygenerowane do przepisania przez użytkownika obrazki w katalogu /tmp/cache, jednak na stronie nie jest możliwe ich poprawne wyświetlenie.

Rozwiązanie jest proste, czyli poprawienie odpowiedniej linijki w pliku wtyczki modules/Captcha/lib/classes/class.captchalib.php w liniach 81 oraz 82 (lub pobliskich). W następującym kodzie:

$this->setImagePath(cms_join_path($this->cmsconfig['root_path'],'tmp','cache'));
$this->setImageUrl($this->cmsconfig['root_url'] . '/tmp/cache');

musimy podać swój katalog, czyli /cache:

$this->setImagePath(cms_join_path($this->cmsconfig['root_path'],'cache'));
$this->setImageUrl($this->cmsconfig['root_url'] . '/cache');

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ą.