Sposób na własne czcionki na stronach WWW

sIFRIstnieje metoda na umieszczenie napisu wykonanego dowolnym krojem czcionek na stronie WWW. Napis tak umieszczony będzie „zaznaczalny” i „kopiowalny” – słowem, będzie zachowywał się tak jak powinien. Co ważne – crawlery wyszukiwarek będą ten napis widzieć w sposób naturalny, czyli zastosowanie tej metody nie wpłynie ujemnie na SEO ani dostępność. Działa pod wszystkimi popularnymi przeglądarkami.

Mowa o sIFR (Scalable Inman Flash Replacement). Technika ta jest połączeniem javascriptu i flasha (w którym wyświetlany jest krój czcionki). Działanie sIFRu jest bardzo proste: Na początku ładowana jest strona (x)html. Następnie skrypt js sprawdza, czy jest zainstalowany flash – jeśli nie jest, napisy które miały być wyświetlone zewnętrzną czcionką, pozostaną wyświetlone czcionką zdefiniowaną w CSS. Jeśli flash jest zainstalowany, js w miejsce podmienianego napisu „wkleja” obiekt flasha zawierającego kod actionscript, który generuje określony napis w określonym kroju czcionek. Wszystko się dzieje w ułamku sekundy, często niezauważalnym przez użytkownika.

Technologia sIFR jak widać jest ciekawa i działa wręcz bezbłędnie. Jednak nie zamierzam jej używać bo: 1) nie jest dostępna dla osób nie używających js lub/i flasha lub używających jakiegoś adblockera 2) taka kombinacja powoduje niepotrzebną komplikację kodu strony, 3) każdy flash obciąża nieco procesor i powoduje wolniejsze działanie przeglądarki na słabszych maszynach (a wciąż się z takimi spotykam). Kilkadziesiąt flashy na stronie może zablokować przeglądarkę.

Niemniej – technologia sFIR jest ciekawym rozwiązaniem którego kiedyś bardzo poszukiwałem. Gdyby jakiś Klient bardzo marudził nad konieczną zmianą kroju na jakiś fikuśny, sIFRa będzie można mu zaserwować :)

[edit: jest też inne, lepsze rozwiązanie: wiki.github.com/sorccu/cufon … ale płatne :( ]

Image Reflection Generator

Reflection Maker Reflection Maker to nic innego, jak łatwa, prosta, intuicyjna, przyjazna i przejrzysta w działaniu i obsłudze aplikacja on-line służąca do tworzenia łebdwazerowego efektu odbicia obrazka. Przydatne dla nie-grafików, lub dla grafików leniwych :)
Grafikę wejściową możemy pociągnąć z Sieci, możemy też wysłać plik z dysku. Podajemy jeszcze wielkość odbicia, kolor tła i – voila :) Wynik dostajemy w JPGu (szkoda że nie w PNGu z alfą, ale darowanemu koniowi…).

Ponad 20 narzędzi do pracy z CSS

CSS Tools Pod tym adresem znajduje się spis ponad 20 narzędzi do edycji, tworzenia i zarządzania klasami, obiektami i w ogóle kodem CSS. Część z nich jest bardzo przydatna. Są narzędzia do oczyszczania, optymalizowania i kompresji kodu, automatycznego tworzenia zaokrąglonych narożników, efektów takich jak rollover, list, menusów, oraz nawet całych layoutów. Smacznego :)

Generator graficznych zakładek

Navigation Tab Menu Generator Wpis na blogu Pawła Wimmera przypomniał mi o głównej tematyce tego bloga, od której ostatnio nieco odbiegłem…

Aplikacja sieciowa pod adresem tabsgenerator.com pozwala na szybkie stworzenie on-line ładnych obrazków zakładek dla menusów stron internetowych. Przyda się przede wszystkim nie-do-końca grafikom :)
Hint: Stwórz sobie dwie (lub nawet trzy) podobne zakładki, jedna z nich może świetnie wyglądać jako „wybrana” lub po najechaniu wskaźnikiem myszki (np. podświetlona zakładka) – taki efekt można łatwo zmontować poprzez przesuwanie tła CSS (Riddle dobrze opisał to tutaj).

CAIR – Nowa metoda skalowania zdjęć

Content Aware Image Resizing Rzecz jest na tyle ciekawa, że postanowiłem o tym napisać u siebie, mimo że w wielu miejscach Sieci (szczególnie tych dla grafików i fotografów) aż o tym huczy.

Chodzi o tzw. Content Aware Image Resizing (CAIR, czasem zwaną też „Liquid Rescale”), metodę skalowania zdjęć opracowaną przez izraelskich naukowców. Pisząc językiem laika – Metoda ta zmniejszając rozmiary zdjęcia stara się zachować duże rozmiary ważnych elementów tegoż zdjęcia. Trudno to opisać, a łatwiej zobaczyć, więc popatrzcie teraz na obrazek po lewej. Duży obrazek to źródło, obrazek w górnym prawym rogu jest przeskalowany tradycyjnie, a ilustracja w prawym dolnym rogu – za pomocą CAIR. Niezłe, co?

Pobawić się tą technologią można za pomocą aplikacji pod adresem swieskowski.net/carve (podłożyć można własne zdjęcia), natomiast wykorzystać ją w praktyce np. za pomocą darmowego programu graficznego GIMP, stosując plugin Liquid Rescale.