Jak to zwykle bywa w dniach żałobnych wyszarzamy również serwisy internetowe. IE ma do tego filtr, pozostałe przeglądarki mają jQuery, ale jest to rozwiązanie wolne. Poniżej zamieszczam dla zainteresowanych skrypt PHP który przerabia obrazek na grayscale:

Kod na PasteBin.com - niestety, Jogger mi rozwala formatowanie. Wymaga PHP5!

Skrypt przerabia obrazek złapany w parametrze img w GET (tak, by można było dodać rewrite w .htaccess) i wynik zapisuje w katalogu cache więc daj mu 777. Pamiętaj, by we własnym zakresie zadbać o walidację, czy dany obiekt należy przerobić, w innym wypadku masz gotową dziurę bezpieczeństwa.

Od paru tygodni w wolnych chwilach klecę coś, czego mi, jako webdeveloperowi, zawsze brakowało. Czy często zdarza się wam dopytywać klienta o to, pod jaką przeglądarką i konfiguracją systemu strona źle się wyświetla? Ile razy dostaliście zrzut ekranu strony w 3 megowym pliku BMP? Ja za dużo ;-)

JakWyglada.pl to strona która w prosty sposób zbierze dla odwiedzającego informacje o jego przeglądarce, systemie operacyjnym, rozdzielczości czy obsłudze różnych technologii. Informacje te mogą następnie zostać przesłane na wskazany adres e-mail poprzez wypełnienie krótkiego formularza.

Dodatkową funkcjonalnością jest dołączenie do tych informacji zrzutu ekranu - można to oczywiście zrobić ręcznie - Prt Scr i dołączamy obrazek ze stroną i wszelkimi widocznymi informacjami do maila, ale można też wykorzystać opcje wbudowaną w aplikacje. Screenshot wykonywany jest przy użyciu appletu Java - niestety, z powodu ograniczeń bezpieczeństwa wymagane jest zaakceptowanie certyfikatu wystawionego imiennie przeze mnie. Gwarantuję, że applet nie robi nic innego niż zapisanie zrzutu ekran(ów*) jako plik %TEMP%\jakwyglada.jpg i wysłanie go do serwera strony wraz z danymi z formularza.

Oczywiście, jak to w Web 2.0 strona jest w wersji Beta - proszę o przesyłanie wszelkich uwag - zarówno co do wyglądu jak i funkcjonowania strony - czy to tu, czy też mailem na btm@anfo.pl.

* testowałem tylko w przypadku konfiguracji "monitor 1 po lewo, monitor 2 po prawo", jeżeli ktoś ma odwrotnie skonfigurowane monitory - o ile to nie duży problem, proszę o przetestowanie i podesłanie informacji, czy screenshot wykonany jest poprawnie. Wiem, że w przypadku takiej właśnie konfiguracji + MacOS "lewy" monitor ma ujemne współrzędne - jakie inne cyrki mogą wystąpić, nie wiem ;-)

Gdybym za każdym razem, kiedy źródłem błędnego wyświetlania się strony jest to, że klient ma zwiększony poziom zbliżenia (Ctrl +) dostawał 5 zł miałbym już chyba na parę zgrzewek PEPSI ;-) Przy jednym z ostatnich mini projektów potrzebowałem informacji właśnie o tym - czy osoba odwiedzająca stronę ma ustawiony zoom na wartość inną niż 100%.

Pierwsze próby spełzły na niczym - myślałem, że przy zwiększeniu poziomu zoom-u wymiary obrazków pobierane dynamicznie przez JavaScript będą odzwierciedlał ich nowe proporcje - jednak tak nie jest, podają one wciąż rzeczywiste (ustalone na stronie za pomocą HTML/CSS) wymiary. Okazało się, że jedynym obiektem, który przy zmianie zoom-u potrafi zgłaszać swój nowy wymiar jest Flash. Nie przepadam za Flashem, ale Action Script mam jako-tako opanowany, więc całość zamknęła się w 8 linijkach AS3 i kilku JS. Zacznijmy od Action Script:

stage.scaleMode = "noScale"; #1
import flash.external.ExternalInterface;
import flash.utils.setInterval;
function sendSignal():void {
        ExternalInterface.call("flashSize", stage.stageWidth); #5
}
setInterval(sendSignal, 100);
sendSignal();

Wyjaśnię tylko co "trudniejsze" linijki. Pierwsza (#1) informuje nasz obiekt, że w przypadku skalowania strony nie należy skalować zawartości flash - obiekty mają pozostać tej samej wielkości, zmieni się za to wymiar "płótna" (stage). Kolejna (#5) wywołuje poprzez ExternalInterface funkcję flashSize którą definiujemy w naszym HTML jako funkcję JavaScript, przyjmującą jako argument jeden parametr numeryczny - przekazujemy do niej szerokość obiektu flash.

Mając już gotowy Flash, osadzamy go na stronie nadając np. 100px szerokości - domyślnie, pierwsze wywołanie przekaże do funkcji flashSize() właśnie powyższe 100. Przy przeskalowaniu strony (Ctrl +) przekaże już nową wartość, np. 111px - dzięki temu możemy z proporcji (bądź też bez, jeżeli używamy bazowej szerokości 100px) obliczyć procentowy poziom powiększenia i odpowiednio zareagować (zmienić logikę strony, poinformować odwiedzającego).

Próbowałem wywołanie cykliczne (setInterval) zastąpić reakcją na zdarzenie Event.RESIZE, ale zdaje się, że nie jest one sygnalizowane w takiej konfiguracji stąd też setInterval - na szczęście sama funkcja jest na tyle lekka że nie powoduje praktycznie żadnego dodatkowego obciążenia dla CPU.

Ostatnio potrzebowałem na szybko stworzyć "ładne guziki", będące odnośnikami do wartych wyeksponowania części serwisu - jako że elementów takich było by kilka(naście) na łamach całego serwisu i jako iż nie przepadam za stosowaniem grafiki tam, gdzie nie trzeba wymyśliłem coś, co w moich odczuciach jest ładnym guzikiem z zastosowaniem samego HTML i CSS.

To jest ładny, gładki button!

Rozwiązanie takie daje mi możliwość zmienienia koloru guzika poprzez łatwą modyfikację 2(4) parametrów w CSS. Przejdźmy do kodu, na początek HTML:

<a href="#" class="fancyButton><span>To jest ładny guzik</span></a>

Jak widać całość jest semantycznie poprawna - ktoś mógłby się upierać, że SPAN nie jest potrzebny i można go wstawić dynamicznie za pomocą CSS, może i można, nie wszędzie działa - starałem by rozwiązanie ładnie się degradowało w starszych przeglądarkach (w IE6 prawie działa).

Koniec dygresji, CSS:

.fancyButton {
        background: #0066CC;
        border: 1px solid #0066CC;

        display: inline-block;
        height: 48px;
        line-height: 48px; 
        font: 24px/48px "Trebuchet MS","Trebuchet",Arial,Helvetica,sans-serif;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
}

.fancyButton:hover {
        opacity: 0.7;
        -moz-opacity: 0.7;
        -webkit-opacity: 0.7;
}

.fancyButton span {
        background: #53A9FF;
        border: 1px solid #53A9FF; 
        color: white;
        
        display: block;
        text-align: center;
        padding: 0px 10px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
        height: 50%;
}

Na pierwszy rzut oka widać, że rozwiązanie nie będzie działać w starszych przeglądarkach - do zaokrąglenia używam border-radius, do przeźroczystości opacity - przeglądarki, które nie obsługują tych rozwiązań wyświetlą po prostu dwu-kolorowy prostokąt bez efektu najazdu (można go osiągnąć na sztywno zmieniając kolory w :hover, ale tracimy wygodę zmiany koloru w wielu guzikach na raz).

Demonstracja oraz informacje o degradacji w starszych przeglądarkach