Gdyby sporządzić listę największych utrapień projektantów stron WWW, to jedną z czołowych pozycji zajmie niewielki wybór krojów czcionek. By zachować maksymalną spójność pomiędzy różnymi platformami systemowymi, projektant powinien ograniczyć się do trzech czcionek. To za mało. W tym artykule prezentujemy sIFR, technikę, która rewolucjonizuje sposób prezentacji tekstu na stronach WWW, pozwalając na uzyskanie dowolnej czcionki w niemal każdej przeglądarce.

SIFR to wolna od opłat i licencji technika łącząca
możliwości trzech technologii Adobe Flash,
JavaScript oraz CSS. Rolą sIFR jest automatyczna
podmiana istniejących elementów tekstowych strony
WWW (np. nagłówków) na odpowiadające im animacje
Flash zawierające tę samą treść, lecz o dowolnym
kroju czcionki.

sIFR to obecnie najlepsza metoda pozwalająca na
uzyskanie pięknych, wygładzonych czcionek bez wpływu
na semantyczność kodu źródłowego strony. Wymogiem
stojącym za poprawną pracą sIFR jest obecność
wtyczki Flash oraz obsługa JavaScript. Dostępność
technologii Flash wśród użytkowników internetu jest
bardzo duża. Podobnie z obsługą JavaScript, którego
interpretery wbudowano już nawet w przeglądarki telefonów
komórkowych. W sytuacji, gdy jedna z wymienionych
technologii nie jest w przeglądarce dostępna,
użytkownik strony zobaczy element w postaci zwykłej,
tekstowej. To bardzo korzystna właściwość, gdyż
nie ogranicza ona dostępności strony, choćby wśród
użytkowników przeglądarek w starszych urządzeniach
mobilnych.

Sprawdzonym sposobem na uzyskanie podobnego
efektu jest przygotowanie potrzebnych nagłówków
w formie graficznej i zapisanie w formacie GIF lub
PNG. Takie pliki graficzne zajmują mało miejsca i nie
wymagają niczego poza przeglądarką zdolną do
wyświetlania obrazów. Ma to uzasadnienie, gdy ilość
elementów graficznych do przygotowania nie przekracza
kilkunastu czy kilkudziesięciu, a strona nie musi być
w pełni zarządzalna przez system CMS.

Z punktu widzenia indeksacji przez wyszukiwarki,
czy ogólniej – pozycjonowania, sIFR to technika doskonała.
Jak wspomnieliśmy, sIFR nie wpływa na kod
źródłowy strony, a jedynie na jej prezentację. Dlatego
strony używające i nieużywające sIFR pozycjonują
się tak samo. Przy wykorzystaniu grafik otrzymujemy
podobną charakterystykę. Warunkiem jest wykonanie
podmiany nagłówka tekstowego na grafikę przy
wykorzystaniu CSS.

Główny koszt sIFR to zwiększony transfer: dodatkowy
CSS – ok. 1,5kB, pobranie każdej z czcionek – liczba
czcionek * 25–130 kB (w zależności od liczby znaków),
pobranie skryptu JS + konfiguracja – 35 kB.
Kosztem dodatkowym jest zwiększone zapotrzebowanie
na moc obliczeniową procesora renderującego
stronę. Odgrywa to znaczenie w przypadku urządzeń
o małej mocy obliczeniowej (urządzenia przenośne).

Czas renderingu jest pomijalny w stosunku do zwiększonego
czasu potrzebnego na pobranie dodatkowych
danych. Warto zaznaczyć, że wszystkie potrzebne pliki
pobierane są wyłącznie raz i cachowane w pamięci
podręcznej przeglądarki.

Krok pierwszy: przygotowanie zaplecza

{tlo_1}

1 Pobierz sIFR

Aby uzyskać efekt widoczny na ilustracji, konieczne będzie pobranie
pakietu sIFR. Pakiet dostępny jest w rozwojowej wersji 2 oraz w bogatszej
wersji 3 beta. Choć sIFR 3 nie doczekał się jeszcze oficjalnego wydania,
autorzy oprogramowania zalecają wersję 3 2. Pliki pobierzesz spod adresu:
http://dev.novemberborn.net/sifr3/nightlies/. Wybierz najświeższą wersję (na
samej górze).

{/tlo}
{tlo_0}

2 Struktura pakietu

Archiwum zawiera standardowe style, które należy dołączyć do nagłówka
strony WWW. Warto zwrócić uwagę na to, że pliki różnią się
w zależności od medium – print (dla wersji do druku), screen (przeglądarka).
W katalogu demo/index.html umieszczono stronę demonstracyjną, którą można
uruchomić na serwerze (np. na localhoście). Katalog flash zawiera wszystkie
pliki potrzebne do tworzenia plików czcionek. Katalog js zawiera sifr.js, główną
bibliotekę JavaScript odpowiedzialną za utworzenie napisu.

{/tlo}
{tlo_1}

3 Zadecyduj, gdzie wstawić nagłówki sIFR

Celem stosowania sIFR jest uzyskanie ładnego, wygładzonego tekstu
przy wykorzystaniu wybranej przez projektanta czcionki. Zastanów się,
gdzie warto wstawić sIFR. Pamiętaj, że narzędzie to nie służy do podmiany całych
bloków tekstu. Miejscem uzasadnionym są za to wszelkie nagłówki, tytuły
strony czy tytuły sekcji. Podmiana zajmuje trochę czasu. Im więcej elementów
sIFR, tym dłuższy czas ładowania strony.

{/tlo}
{tlo_0}

4 Wyselekcjonuj elementy kodu

W celu osiągnięcia zamierzonego efektu należy określić zestaw elementów
podlegających podmianie. W naszym przykładzie będą to nagłówki,
występujące w kodzie xhtml jako {html}

{/html} oraz {html}

{/html}. sIFR pozwala także na
korzystanie z bardziej wyrafinowanych selektorów (nie tylko typu, lecz także
{stala}klasy (.){/stala} oraz {stala}identyfikatorów (#){/stala}). Śródtytuł reprezentowany jest przez {stala}klasę
subsection{/stala} elementu DIV (ostatecznie DIV.subsection).

{/tlo}
{tlo_1}

5 Zainstaluj potrzebne czcionki

Zanim zabierzemy się do programowania, należy dobrać czcionki, które
mamy zamiar wykorzystać do utworzenia nagłówków. Choć na ilustracji
widać, że została zastosowana jedna czcionka, to w zasadzie nie ma w tej kwestii
ograniczeń. Do zaprezentowania konkretnej czcionki na stronie potrzebujemy
oprogramowania Adobe Flash Professional (wersja od 8.0 w górę ) oraz
samej czcionki, która powinna być już zainstalowana w systemie.

{/tlo}
{tlo_0}

6 Otwórz sifr.fla w Adobe Flash

Warto wspomnieć, że do korzystania z komercyjnych czcionek potrzebna
jest licencja. Korzystanie z sIFR nie łamie przy tym postanowień typowej
licencji (np. Adobe FontFolio). To dlatego bez obaw stosują go nawet firmy.
Otwórz teraz plik {stala}flash/sifr.fla{/stala}, który wykorzystamy do przerobienia naszej
czcionki na wersję we Flashu. Ta metoda gwarantuje, że nikt nie oskarży nas
o dystrybucję czcionki niezgodnie z postanowieniami licencji.

{/tlo}
{tlo_1}

7 Skonfiguruj skrypt ActionScript

Oprócz pliku sifr.fla, w katalogu flash zawarto trzy skrypty ActionScript. Są
one potrzebne do utworzenia odpowiedniej animacji zawierającej czcionkę.
Aby zabezpieczyć się przed wykradnięciem naszej animacji Flash, konieczne jest
ograniczenie domen, dla których możliwe jest użycie nowo utworzonej czcionki.
W tym celu poddaj edycji plik options.as i zmodyfikuj linię {stala}sIFR.domains = [\’*\’]{/stala};
na {stala}sIFR.domains = [\’*.mojadomena.pl\'{/stala}, {stala}\’mojadomena.pl\'{/stala}];. Dzięki użyciu gwiazdki
dostęp do czcionki uzyskają także wszystkie subdomeny (np. blog.mojadomena.pl).

{/tlo}
{tlo_0}

8 Wskaż czcionkę i jej style

Powracamy do pliku {stala}sifr.fla{/stala}, klikając dwukrotnie na biały arkusz, otwierając
Layer 1, który zawiera tekst Bold Italic Normal. W celu zmniejszenia rozmiaru
pliku wynikowego, można np. usunąć wszystkie formatowania poza pogrubieniem.
Gdybyśmy przy takim rozwiązaniu chcieli przy podmianie wykorzystać tekst pisany
kursywą, nagłówek pozostałby pusty, ponieważ brakowałoby tej wersji czcionki.
Wprowadźmy po jednej literze dla każdego typu formatowania, by w końcu wybrać
z listy rozwijalnej czcionkę, która nas interesuje (np. Lucida San Unicode).

{/tlo}
{tlo_1}

9 Rozszerz zakres znaków

Im mniej znaków składa się na dany język, tym mniejszy rozmiar pliku
wynikowego. To dlatego język angielski ma tę przewagę nad innymi,
gdyż nie zawiera znaków diaktrycznych. Gdybyśmy w tym momencie utworzyli
animację Flash zawierającą naszą czcionkę, to wszystkie próby użycia polskich
znaków w nagłówkach skutkowałyby brakiem odpowiednich liter. Koniecznie
jest osadzenie dodatkowych znaków. Kliknij na opcji „Osadź…” (Extend…)
i dołącz znaki: {stala}ąęłśżźćńóĄĘŁŚŻŹĆŃÓ{/stala}.

{/tlo}
{tlo_0}

10 Wyeksportuj czcionki do pliku .swf

Ostatnim etapem jest eksport filmu. W tym celu wybierz z menu
Plik > Eksportuj > Eksportuj film. Istotne jest zaznaczenie następujących
opcji: wersja – Flash Player 8, ActionScript – 2.0, włączone „chroń przed
importem” (protect from import), wyłączone „pozwól debugować” (permit
debuging), włączone „skompresuj film” (compress film). Operację należy powtórzyć
dla każdej kolejnej czcionki. Plik zapisujemy w katalogu j/, gdzie oprócz
czcionek znajdzie się skrypt JavaScript, silnik sIFR.

{/tlo}

Krok drugi: przygotuj CSS i JavaScript

{tlo_1}

1 Otwórz szablon nagłówka strony

Na potrzeby artykułu przygotowaliśmy przykładowy szablon strony.
Składa się on z pięciu elementów. Stronę rozpoczynają dwa nagłówki,
kolejno H1 i H2. Następnie pojawia się blok tekstu oraz nagłówek w formie elementu
DIV.subsection. Cały dokument zamyka blok tekstu. W naszym szablonie
istnieją dwa pliki CSS, które definiują prezentację dokumentu w przypadku
korzystania z przeglądarki i drukowania strony.

{/tlo}
{tlo_0}

2 Dodaj deklaracje JS i CSS

Edytujemy nagłówek strony, odnajdując tam odnośniki do plików CSS. Jeżeli
korzystasz z jednego pliku CSS, uniwersalnego dla wszystkich mediów,
dodaj oddzielny dla wersji drukowanej. Nagłówek uzupełniamy o deklarację zewnętrznego
skryptu JavaScript oraz nowego skryptu JS, który będzie odpowiadał
za konfigurację. Wszystkie skrypty umieszczamy w katalogu „j/”, zaś wszystkie
style znajdują się w katalogu „s/”. Kolejno edytujemy plik {stala}s/screen.css{/stala} i kopiujemy
do niego zawartość style css/sIFR-screen.css. Analogicznie dla pliku {stala}s/print.css{/stala}
i źródła css/sIFR-print.css. Do katalogu j/ trafia plik sifr.js oraz sifr-cfg.js.

{/tlo}
{tlo_1}

3 Dodaj standardowe definicje CSS

Edytuj plik s/screen.css i dodaj deklaracje stylów poszczególnych
elementów dokumentu. Co prawda sposób, w jaki będą formatować się
elementy strony wtedy, gdy sIFR nie będzie używany, nie mają tu znaczenia.
Warto jednak pamiętać, że to właśnie w ten sposób zostaną one wyświetlone
użytkownikom odwiedzającym serwis, jeżeli sIFR nie będzie w stanie się u nich
uruchomić.

{/tlo}
{tlo_0}

4 Stwórz definicje nagłówków dla sIFR

Przyszła pora na ustalenie rozmiaru nagłówków tworzonych przez sIFR.
Ponieważ czcionki bywają różne, rozmiar zadeklarowany w zwykłym
nagłówku pozbawionym sIFR może się mieć nijak do faktycznego rozmiaru nagłówka
sIFR. Aby utworzyć styl, który będzie działał tylko dla nagłówków sIFR,
należy nazwę selektora poprzedzić {stala}.sIFR-active{/stala}. Każdy tak utworzy styl musi
rozpoczynać się od deklaracji niewidoczności, gdyż chcemy ukryć nagłówek
tekstowy i zastąpić go elementem Flash.

{/tlo}
{tlo_1}

5 Stwórz definicje nagłówków dla sIFR cd.

Jeżeli rozmiar tekstu w nagłówku H1 ustalimy na 40 pikseli, to zmianie
ulegnie zarówno ilość miejsca zajmowanego przez nagłówek H1, jak
i wielkość liter. By odstęp pomiędzy poprzedzającymi go i następującymi po
nim elementami był taki, jak sobie tego życzymy, możemy skorzystać ze standardowych
marginesów (margin).

{/tlo}
{tlo_0}

6 Dodaj definicje JavaScript

Czas na konfigurację po stronie skryptu JavaScript. Stwórz nowy plik sifr-
-cfg.js w katalogu j/. Zadaniem skryptu jest zainicjowanie sIFR i podmiana
interesujących nas elementów. Rozpocznij od zadeklarowania tablicy font1,
zawierającej informację o lokalizacji pliku z czcionką. Metoda activate klasy
sIFR dokonuje inicjalizacji biblioteki, przyjmując za parametr wejściowy listę
używanych czcionek. Kolejne czcionki dodajemy po przecinku.

{/tlo}
{tlo_1}

7 Skorzystaj z metody sIFR.replace

Metoda replace klasy {stala}sIFR{/stala} odpowiada za właściwą zamianę nagłówka
na napis Flash. Jako parametr, {stala}replace(){/stala} przyjmuje tablicę informacyjną
o czcionce i tablice parametrów. Tutaj jedynym parametrem jest selektor, który
ma zostać objęty zamianą. Selektor nie może być listą elementów. Oczywiście
to nie koniec, gdyż sIFR 3 oferuje bardzo duże możliwości formatowania tak
uzyskanego nagłówka.

{/tlo}
{tlo_0}

8 Sprawdź pierwsze efekty

Na ilustracji widać pierwszy efekt zastosowania sIFR. W tym przykładzie
użyto pospolitego Ariala, który mimo że należy do czcionek mocno już
opatrzonych, w formie animacji Flash prezentuje się znakomicie. Teraz możliwe
jest użycie kursywy, pogrubienia, tła czy zmiana koloru każdego z nagłówków.
By jeszcze bardziej urozmaicić nasze nagłówki, możemy skorzystać z filtra
generującego cień.

{/tlo}
{tlo_1}

9 Przetestuj działanie AdBlocka

AdBlock to popularne rozszerzenie dla przeglądarki Firefox, pozwalające
na blokowanie niechcianego przekazu reklamowego. Ponieważ typowa
reklama wykonana jest w postaci animacji Flash, AdBlock domyślnie wyświetla
nad wszystkimi elementami Flash przycisk pozwalający na wyłączenie przekazu.
Nie inaczej traktowany jest sIFR, przez co nad wszystkimi nagłówkami
również pojawia się nieestetyczny dodatek.

{/tlo}
{tlo_0}

10 Poznaj przepis na AdBlocka

Aby pozbyć się kłopotu, dodaj do arkusza stylów odpowiednią
deklarację. Niestety nie zawsze przynosi ona oczekiwany rezultat,
szczególnie jeżeli wziąć pod uwagę najnowsze wersje oprogramowania. Pocieszający
jest fakt, iż z tego rodzaju programu korzystają tylko niektórzy użytkownicy
Firefoksa. Podczas używania AdBlocka może występować efekt znacznego
spowolnienia ładowania się strony wyposażonej w sIFR. To niestety bardzo
niekorzystne, ale końcowy efekt może być tego wart.

{/tlo}

Krok trzeci: stylizacja i efekty

{tlo_1}

1 Zmień kolory nagłówków

Flash jako taki wspiera w pewnym stopniu style CSS. Dzięki dodatkowej
pracy programistów sIFR i potencjału samego Flasha, zmiana koloru
nagłówka odbywa się w sposób zbliżony do tworzenia definicji stylu. Flash
wymaga, by stosować kolory w zapisie {stala}#00000{/stala}. Niedopuszczalny jest inny
zapis (np. {stala}gray, $00F{/stala}).

{/tlo}
{tlo_0}

2 Dodaj pogrubienie i kursywę

Uzyskanie tekstu pisanego pogrubioną wersją czcionki lub kursywą polega
na dokonaniu kolejnej drobnej zmiany w parametrach dostarczanych
do metody replace. Niestety nie ma możliwości stworzenia nagłówka, którego
część byłaby pogrubiona. Jedynym sposobem na uzyskanie takiego efektu jest
utworzenie obok siebie dwóch elementów i sztuczne połączenie ich w jedną
całość. Ponadto niemożliwe jest uzyskanie pogrubionej kursywy. Przykład jest
zatem w tej kwestii niepoprawny.

{/tlo}
{tlo_1}

3 Przetestuj tworzenie odnośników

Gdy z naszego nagłówka utworzymy odnośnik, jego kolor ulegnie
zmianie. Charakterystyczny niebieski kolor z podkreśleniem całego tekstu
można zmienić, korzystając z tych samych metod co poprzednio. Efektem
będzie nagłówek wyglądający dokładnie tak samo jak przed zmianą.

{/tlo}
{tlo_0}

4 Eksperymentuj z dodawaniem cieni

Ciekawą funkcjonalnością sIFR jest możliwość utworzenia cienia wokół
tekstu nagłówka. Do stworzenia takiego efektu posługujemy się filtrem,
którego deklaracja wygląda następująco:

filters: {
  DropShadow: {
    knockout: false,
    distance: 1,
    color: \'#e4e4e4\',
    strenght: 1
  }
}

{/tlo}