Sifrem pisane
Już od jakiegoś czasu przymierzałem się do zaimplementowania na stronie flashowych nagłówków, które byłyby dostępne jak zwykły tekst i nie ograniczały mnie co do rodzaju czcionki. Sifr okazał się bezkonkurencyjny w porównaniu do np. generowania nagłówków za pomocą js i plików graficznych. Nie będę się rozpisywał czym jest sifr i nie zamierzam też dyskutować o problemach w jego użytkowaniu odsyłając jednocześnie na forum. Artykuł proszę traktować raczej jako minitutorial a nie rozprawę nt. sifra.
Aby wygenerować sifrowe nagłówki musimy zaopatrzyć się w (ogólnie) skrypt sifr w wersji 2.0.5 (w chwili pisania tego artykułu) oraz odpowiednią czcionkę w formacie *.swf. O ile z pobraniem skryptu nie powinno być problemu o tyle wygenerowanie pliku czcionki może być uciążliwe dla osób, którzy okreśłenia flash, fla i swf na codzień nie używają :). No ale w końcu od czegoś jest ten internet. Aby wygenerować plik *.swf ze swojej ulubionej czcionki możemy wykorzystać generator on-line lub programy: sIFR Font Embedder oraz sifrmaker. Jednak zarówno jeden jak i drugi program, przynajmnie w moim przypadku, powodował problemy podczas generowania plików *.swf a w/w generator działa jakoś podejrzanie wolno… . W końcu trafiłem na program OpensIFRr, który po zainstalowaniu spełnił wszystkie moje oczekiwania, jednak dopiero po zamianie pliku swfmill.exe (w folderze instalacyjnym programu czyli domyślnie w Windows - C:\Program Files\OpensIFRr) na inny plik swfmill.exe.
Aby zainstalować sifr na stronie, w jej nagłówku należy podać ścieżki dostępu do plików js i css, które po ściągnięciu można wypakować do jakiegokolwiek folderu, który w przykładzie będzie nosił nazwę flashtext.
-
<link rel="stylesheet" href="flashtext/all.css" type="text/css" media="all" />
-
<link rel="stylesheet" href="flashtext/sIFR-screen.css" type="text/css" media="screen" />
-
<link rel="stylesheet" href="flashtext/sIFR-print.css" type="text/css" media="print" />
-
<script src="flashtext/sifr.js" type="text/javascript"></script>
Użytkownicy wordpressa mogą umieścić skrypt w folderze z wykorzystywanym themem i odnosić się do niego jak w przykładzie poniżej:
-
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/flashtext/all.css" type="text/css" media="all" />
-
</link><link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/flashtext/sIFR-screen.css" type="text/css" media="screen" />
-
</link><link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/flashtext/sIFR-print.css" type="text/css" media="print" />
-
<script src="<?php bloginfo('stylesheet_directory'); ?>/flashtext/sifr.js" type="text/javascript"></script>
Następnie w źródle strony, na końcu - tuż przed znacznikiem <body> należy wstawić odniesienie do pliku czcionki *.swf, który został wygenerowany w podany wcześniej sposób lub sposoby.
-
<script type="text/javascript">
-
//< ![CDATA[
-
if(typeof sIFR == "function"){
-
sIFR.replaceElement("h1, h2″, "flashtext/GRIDY PL.swf", named({sBgColor:"#FFFFFF",sWmode:"transparent", sLinkColor:"#17271C", sHoverColor:"#BB5E00″, sCase:"upper", sFlashVars:"textalign=center"}));
-
};
-
//]]>
-
</script>
Użytkownicy wordpressa mogą oczywiście postąpić nieco inacze:
-
<script type="text/javascript">
-
//< ![CDATA[
-
if(typeof sIFR == "function"){
-
sIFR.replaceElement("h1, h2″, "<?php bloginfo('stylesheet_directory'); ?>/flashtext/GRIDY PL.swf", named({sBgColor:"#FFFFFF", sWmode:"transparent", sLinkColor:"#17271C", sHoverColor:"#BB5E00″, sCase:"upper", sFlashVars:"textalign=center"}));
-
};
-
//]]>
-
</script>
I to właściwie koniec tego minitutoriala. W przykładzie powyżej sifr zamieni standardową czcionkę w nagłówkach h1 i h2 na czcionkę GRIDY PL, z której wygenerowałem plik GRIDY PL.swf. Parametry w podanym przykładzie również powinny być zrozumiałe:
- sBgColor:"#FFFFFF" - oznacza kolor tła tekstu,
- sWmode:"transparent" - oznacza przezroczyste tło pod tekstem
- sLinkColor:"#17271C" - to kolor odnośnika
- sHoverColor:"#BB5E00″ - kolor odnośnika po najechaniu kursorem czyli "hover"
- sCase:"upper" = text-transform:uppercase;
- sFlashVars:"textalign=center" - czyli wyrównanie tekstu
Należy oczywiście pamiętać o ostylowaniu w/w nagłówków poprzez nadanie im odpowiednich cech i wartości w css, aby np. w przypadku wyłączenia przez użytkownika obsługi js nagłówki nadal dobrze wyglądały. Z używania sifr do generowania tekstu należy korzystać rozsądnie. Strona z sifrem trochę "ssie" nawet przy generowaniu niewielkiej ilości tekstu. Ustawienia tła tekstu na przeźroczyste jeszcze bardziej opóźnia załadowanie strony.
Na przykładowej stronie można też nieco odmienne wykorzystanie sifra - wykorzystanie klasy do zamiany tekstu i utworzenie szablonu. Inne informacje o sifr można znaleźć w google
* * *
Brak komentarzy
