środa, 31 marca 2010

Pseudoklasy CSS, które mogą pozytywnie zaskoczyć

Pewnie każdy pisząc arkusz stylów CSS korzysta z selektora :hover dla linków. Mi rzadko zdarza się wykorzystywać jakieś inne, ale chyba warto o nich pamiętać, tym bardziej, że niektóre działają bardzo sympatycznie i we wszystkich popularnych przeglądarkach.
Będę je tutaj dopisywał, aż uzbiera się kilka, żeby było po co wchodzić;)

zachęcam też do dawania własnych propozycji:
  • :first-letter - pozwala nadać osobny styl dla pierwszej literki w treści pomiędzy znacznikami, span, div, p itp... przykład
  • :first-line - pozwala nadać osobny styl dla pierwszej linijki w treści pomiędzy znacznikami, span, div, p itp... przykład
  • :first-child - pozwala się odwołać do pierwszego elementu np listy, lub pierwszej kolumny tabeli.
  • :hover - do stosowania nie tylko w linkach, ale np: w wierszach tabeli do podświetlania, lub praktycznie w każdym innym elemencie. Nie wszędzie zadziała (np stare wersje IE), ale zwykle niezadziałanie nie skutkuje problemami ;) oczywiście można się bawić w skrypty onmouseover i onmouseout, ale nie zawsze będziemy chcieli śmiecić...
  • :before i :after - niestety nie działają w ie7 i w GC, nie jest to jakaś rewelacja, ale można gdzieś wykorzystać ;)

wtorek, 30 marca 2010

Manualny crop

Wpis troszkę daleko powiązany z tematyka bloga, ale nie mogę się powstrzymać, przed zaprezentowaniem tego co znalazłem w jednym z realizowanych swoich projektów.
Może najpierw fota:
Wyjątkowo kreatywny klient wstawiał zdjęcia produktów na stronę, ale niestety nie posiadał zdjęcia jednego z produktów. Posiadał natomiast katalog, w którym zdjęcie się znajdowało, ale otoczone niepożądanymi literkami :) Sprytny użytkownik przykrył więc litery kartkami papieru i wykonał to arcyzdjęcie :)

... aż mam ochotę przykryć ten wpis dookoła kartkami ;)

niedziela, 28 marca 2010

CACHE IE + AJAX + ODŚWIEŻANIE TREŚCI

Potrzebowałem dzisiaj wyświetlić na stronie aktualny czas, ale nie czas z systemu użytkownika, tylko czas serwera. Myślałem, że sprawa prosta - i jest prosta, ale Internet Explorer postanowił robić figle.
Jeżeli chodzi o samo zastosowanie ajaxa, to nie mam z tym dużego doświadczenia, ale w tym przypadku można sprowadzić problem do kilku linijek wykorzystując bibliotekę prototype.
Kod wygląda tak: Dla wyjaśnienia parametry updatera to:
1. id elementu, którego treść odświeżamy,
2. link do pliku z treścią - w moim przypadku jest tam tylko: echo date("H:i:s");
3. konfiguracja - w tym przypadku: metoda get, częstotliwość co 1s, decay:1 oznacza stałą częstotliwość (wartości >1 oznaczają że im dłuższy czas oczekiwania na odpowiedź tym rzadziej będzie pytał, a mniejsze od 1 odwrotnie szczegóły tutaj).

Wszystko działa pod FireFoxem, ale IE pokazuje ciągle pierwszy wynik, czyli cachuje pierwszy wynik i zegar stoi ;)

ROZWIĄZANIE:
1. zmieniamy GET na POST
2. dopisujemy jakiś parametr do linku, żeby miał co wysłać tym POSTem
Wygląda to tak: Teraz wszystko działa w naszej kochanej przeglądarce.
Może to durne rozwiązanie, ale bardzo krótkie, dlatego uznaję go za dobre, a przede wszystkim skuteczne.

Odświeżanie za pomocą jQuery opisałem tutaj

sobota, 27 marca 2010

Specjalne czcionki na stronie www

Pierwszy post o skrypcie umożliwiającym wzbogacenie strony www o specjalne czcionki, czyli takie jakich użytkownik może nie mieć zainstalowanych na komputerze. Niestety nie ma 3-linijkowego rozwiązania problemu ładnych czcionek działającego pod różnymi przeglądarkami.
Popularne rozwiązanie to skrypt: sifr (oparty o flash i js).
Ja używam nieco innego skryptu bazującego na PHP i JS (opis rozwiązania po angielsku).
Dla osoby nie znającej flasha jest na pewno bardziej zrozumiałe, a co za tym idzie łatwiej można go modyfikować, a ponadto zadziała również w przeglądarce bez zainstalowanej wtyczki adobe...

Czego nam potrzeba:
1. plik fonta w formacie ttf (konwersja fonta online)
2. skrypt php, który będzie nam generował napisy ładną czcionką (heading.txt - po pobraniu zmień rozszerzenie na .php)
3. skrypt .js, który podmieni napisy napisane brzydką czcionką, na ładne (replacement.js)

Krótkie wyjaśnienie działania:
heading.php - generuje obrazek w formacie PNG, na którym wypisuje tekst przekazany w parametrze text - po prostu za pomocą funkcji: ImageTTFText wypisuje tekst na obrazek i zwraca tenże obrazek. Dodatkowo ma możliwość włączenia cache, żeby nie generować za każdym razem.
replacement.js - odpowiada za odnalezienie wszystkich napisów które mają być podmienione (np po tagu, czy klasie css) i podmianę tekstu w nich zawartego na wygenerowane obrazki.

Tutaj zwykle ktoś, kto coś słyszał o pozycjonowaniu się przeraża, bo widzi że tekst się nie zaznacza, czyli, że robot tego nie widzi i będzie źle w wyszukiwarkach... ale wystarczy zaglądnąć w źródło strony, żeby zobaczyć, że nic strasznego się nie stało, a wszystkie teksty są na swoim miejscu - całą zabawa odbywa się dopiero po załadowaniu strony za pomocą javascriptu, co raczej robota nie powinno interesować ;]

Dobra teraz szybko co zrobić żeby zadziałało:
1. w sekcji head dokumentu wstawiamy:
2. Domyślnie replacement.js jest napisany tak, że sprawdza najpierw, czy przeglądarka klienta potrafi wyświetlać obrazki (jeśli nie to nie podmienia dla zaoszczędzenia transferu), żeby wykonać to sprawdzenie można wgrać 1-pixelowego png na serwer i podać ścieżkę do niego w 14 linijce. Ja nie widzę większego sensu, żeby to sprawdzać (raczej jak przeglądarka obsługuje JS to da radę wyświetlić obrazek), dlatego w linii 33 zmieniam wartość: var imageLoaded = true; (czyli już sprawdzone).
3. W pliku heading.php w pierwszych linijkach ustawiamy kolor fonta, kolor tła (żeby były ładne krawędzie), rozmiar fonta i oczywiście ścieżkę do pliku z fontem.

I to by było na tyle ;) Działający przykład do pobrania tutaj

Przykłady wykorzystania:
shop.bagastyle.com/
filuteria.pl/

Uwagi:
- polskie znaki w niektórych czcionkach powodują, że napis bywa przesunięty niżej w stosunku do napisu bez polskich znaków np: o kreskę nad "Ś" - można to rozwiązać np dopisując warunek w pliku heading.php, który przesunie w dół teksty bez polskich znaków, albo pobawić się CSSem i wyrównywać obrazki z tekstem do dołu.

Aha i jeszcze jedna rzecz o której zapomniałem wstawianie specjalnych czcionek wymaga jak widać trochę fikołków. Nawet jeśli ktoś powie, że wystarczy wstawić skrypt i już to też nie jest do końca tak, bo nie każdy content jest od razu ładowany na stronie np: treści ładowane ajaxem, albo generowane za pomocą skryptów będą wymagały dogrzebania się odpowiedniego miejsca i dopisania kilku linijek odpalających replacement ponownie... to znowu może w pewnych przypadkach zamulać, albo głupio wyglądać, można coś kombinować z CSSem, ale to znowu moze być potraktowane jako clocking i znowu trzeba coś kombinować... i z powodu głupiej czcionki mamy dużo więcej pracy...
Biorąc pod uwagę powyższe wydaje mi się, że zanim zdecydujemy się na super czcionkę warto przejrzeć listę czcionek, którą kiedyś dawno temu przygotowałem i zastanowić się, czy przypadkiem zastosowanie którejś z nich nie będzie takie straszne.
Na liście jest Helvetica, której nie ma w standardzie w windowsach, ale jak nie ma to system wyświetli ariala, który jest podobny i nic się nie stanie ;) Aha i lista jest według częstotliwości stosowania, którą gdzieś kiedyś znalazłem ;)