Przydatne rozszerzenia Firefoxa - ColorZilla

Colorzilla
W zastosowaniu: dopasowywanie koloru reklam do koloru strony

Dla firefoxa stworzono wiele dodatków, które usprawniają pracę webmastera. Jednym z nich jest colorzilla. Rozszerzenie to ma za zadanie uprościć pracę z kolorami na stronie internetowej.
Jak wiemy z praktyki znalezienie kodu koloru np reklamy pasującego do reszty strony wymaga zwykle zastosowania osobnej aplikacji, która odczytuje wartości RGB konkretnego pixela ekranu. W pracy webmastera przydaje się szybki wgląd do żądanej wartości, dlatego zostało stworzone tego typu podręczne narzędzie.
Dostęp do funkcji Colorzilli uzyskujemy przez kliknięcie prawego klawisza myszki. Pojawia wówczas się menu podręczne w którym jest rozwijane podmenu ColorZilla

Colorzilla dostarcza kilka funkcji do których należą: Paleta kolorów, kroplomierz, inspektor Dom, powiększenie.
Omówię tutaj tylko trzy z nich - paletę kolorów, kroplomierz i powiększenie. Inspektor elementów DOM nie zostanie omówiony
Według opisu dodatku funkcja ta śledzi właściwości elementów strony i pozwala uzyskać różne informacje o elementach DOM na stronie w szybki i łatwy sposób.

Paleta kolorów
Pomaga dobierać kod koloru. Można po prostu określić go przez kliknięcie w odpowiedni obszar palety kolorów. Jest kilka predefiniowanych palet kolorów, które są przeznaczone do określonych zakresów zastosowań.
Wśród dostępnych palet są:
Hues and brightnesses
Hues and saturations
System css colors
W3C named colors
Web color by hue
Web named colors
Web safe colors
X named colors
Funkcja palety kolorów jest odwrotna do funkcji kroplomierza, który zostanie omówiony poniżej. Tutaj wybieramy kolor według wyczucia, najbardziej pasujący do koloru strony. Odczytujemy jego wartość w postaci #RRGGBB i wklejamy do kodu strony.


Kroplomierz

Chcąc dokładniej dopasować kolor tekstu lub tła reklamy do istniejących na stronie kolorów elementów możemy się posłużyć funkcją kroplomierza. Idea tej funkcji polega na pobraniu próbki koloru z gotowego graficznego elementu strony (obrazek, obramowanie).

W celu pobrania koloru klikamy kroplomierz. Na ekranie pojawia się krzyżyk, którego środkiem wskazujemy miejsce na stronie. Po dokonaniu próbkowania klikamy prawym klawiszem myszki i wybieramy z menu funkcję kopiuj. Funkcja kopiuj w menu podręcznym ma kilka postaci zależnie od formatu zapisu koloru, który mamy zamiar wykorzystać na stronie.




Po wskazaniu i wybraniu koloru należy kliknąć prawym klawiszem myszki w ikonę kroplomierza w lewym dolnym rogu ekranu i skopiować wartość do schowka systemowego.

Powiększenie

Niektóre obrazki mogą mieć dość małe rozmiary i trudno jest wtedy dokładnie wskazać odpowiedni element. Jest na to sposób w Colorzillli. Istnieje możliwość znacznego powiększenia obrazu (do 1000%).

Samo powiększenie obrazu w przeglądarce nie jest jakąś unikalną właściwością, gdyż w Firefoxie istnieje wbudowana funkcja ułatwiająca powiększenie obrazu. Można przytrzymać lewy klawisz CTRL i pokręcić rolką myszki w swoją stronę.

ColorZilla ma możliwość dodatkowo mierzyć odstęp między dwoma różnymi elementami obrazu wyrażoną w pikselach.
Pomiar niestety nie jest podawany w bezpośredniej postaci lecz trzeba go sobie obliczyć na podstawie odczytu wskazać dla dwóch punktów. Cóż, nie jest to szczyt wygody, w każdym razie nie udało mi się doszu-kać łatwiejszego sposobu na pomiar. Wspomnę jeszcze że wartości są liczone od prawego górnego rogu ekranu.
Przesuwając kursor odczytujemy u dołu po lewej stronie w pasku przeglądarki wartość delta X i delta Y.



Ciekawostką jest także że Colorzilla pokazuje nazwę stylu css w obrębie którego znajduje się dany
tekst na stronie.

Jeśli jesteśmy uczestnikami programu Google Adsense to zapewne taki dodatek przyda się nam do ustawienia kodu koloru w reklamie zarówno tekstu jak i tła czy obramowania. Można go również wykorzystać w ustawieniu własności arkusza styli css. Celów wykorzystania może być oczywiście dużo więcej, nie sposób o wszystkich powiedzieć.

ColorZillę można pobrać pod adresem: https://addons.mozilla.org/pl/firefox/addon/271