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
