EpicWEB.plwebdesign, programowanie, phat lewt!

Wykrywanie poziomu powiększenia w przeglądarce.

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.

Ładne "guziki" w czystym HTML/CSS

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

Portal 2

I już prawie wszystko wiemy - Portal 2 został zapowiedziany.

Po przyjrzeniu się ogłoszeniu można zauważyć podkreślone literki - zebrane razem tworzą napis Dr Attmann i h0nee, które to mogą zostać użyte jako login i hasło do BBS-u co daje nam kolejny kawałek układanki ...

Thank you for assuming party escort submission position!

Ha! Mówię Ha! tym wszystkim (ok, Tobie jednemu, flegmatyk :P) z was, którzy myśleli, że zmiany w Portal to tylko próba ożywienia starej gry!

Przed paroma godzinami pojawił się kolejny update do gry Portal dodający jedną rzecz: "Added valuable asset retrieval". Co tym razem? Nowe zakończenie!

Po zakończeniu gry słychać dźwięk jakiejś maszyny, głos robota mówiącego "Thank you for assuming party escort submission position!" i widzimy jak nasza bohaterka zostaje odciągnięta w nieznane.

Jeżeli nie jest to zapowiedź kolejnych przygód w świecie Portal-u to ja już nie wiem :-)

The cake is a lie! Czyli o tym jak Valve robi kampanie reklamowe.

Kilka dni temu pojawił się nowy patch do gry Portal kto nie grał, ten niech idzie się wyspowiadać. Zmiany, jakie wnosił były co najmniej dziwne - pojawiła się tylko jedna informacja - "zmieniono częstotliwość radia by dostosować się do norm". Forum Steam od razu eksplodowało wieloma WTF-ami

Po paru minutach coś zaczęło się pojawiać - w grze pojawiły się radia, które umieszczone w odpowiednim miejscu odgrywały pliki dźwiękowe będące przekazami w kodzie Morse-a. Następnie znaleziono nowe pliki dźwiękowe w archiwum gry.

Same pliki nie przedstawiały sobą nic konkretnego - jakieś szumy i trzaski, głosy w tle. Okazało się jednak, że w plikach WAV osadzona jest grafika ... Na niektórych z obrazków udało się odnaleźć listery i cyfry, które po spisaniu dały hash MD5. Kolejną wskazówką był zapis "BBS (##) ####-#####", który insynuował numer telefonu. Tak, MD5 był zahashowanym numerem telefonu.

Osoby dzwoniące na numer witane są znajomym dźwiękiem modemu telefonicznego - dokładnie, pod telefonem znajduje się modem i stary BBS, który po zalogowaniu się na dane backup/backup wyświetla różne komunikaty i obrazki w ASCII art.

Całe poszukiwanie głębszego sensu wciąż trwa i nowe informacje pojawiają się w masie miejsc - chyba najbardziej "na czasie" jest Google Wave (lub dla nie posiadających konta - forum Steam w wersji "TL;DR").

Jedni spekulują, że jest to zapowiedź Portal 2, inni, że HL2: EP3 a jeszcze inni że połączenie obu gier w jeden wątek. Co się okaże - zobaczymy, jak dla mnie Valve dostaje tort za naprawdę niezłą kampanię marketingową nowego "produktu" wśród swojej geek-fan-base.