Firefox, którego pobrano z sieci już blisko 170 mln razy, zainspirował do utworzenia setek fantastycznych rozszerzeń. Przedstawiamy piętnaście, których nie można pominąć.
Na pierwszym miejscu listy spraw o których musi pamiętać twórca stron powinno
znaleźć się zdanie mówiące o tym, że jeśli coś może pójść źle, z pewnością
pójdzie źle. Jedynie najprostszy projekt strony można wykonać od początku do
końca bez uciekania się do sztuczek spowodowanych niekompatybilnością,
problemami z dostępem lub pomyłkami w kodzie.
Główny problem wynika z faktu, że
rozwiązanie piętrzących się trudności z praca nad projektem strony nie jest
prostym zadaniem. Internetowe przeglądarki zaprojektowano tak, by były łatwe w
użytkowaniu. Zamieszczenie w nich kompletu narzędzi do debugowania nie jest
wiec idealnym rozwiązaniem. Twórcy przeglądarek mogą nie być zainteresowani
dodawaniem narzędzi do debuggowania do swojego oprogramowania, co jednak nie
oznacza, że nie można tego zrobić. Jeśli przeglądarka ma prosta, otwarta na
rozszerzenia architekturę, każdy może dodać nowe funkcje i sprawić, by
przeglądarka wypełniała zadania, których sobie życzy.
Największa liczba
rozszerzeń może się pochwalić Firefox – obecnie ponad 1000. Niemal wszystkie
działają na wielu platformach – można je uruchomić zarówno na Macach, Linuksie,
jak też w Windows. Obejmują konsole debuggowania, walidatory składni, operatory
cookie, narzędzia dostępności, podręczniki, narzędzia do pomiarów oraz
pozycjonowania stron. Dodajmy do tego rozszerzenia potrafiące przerobić strony i
arkusze stylów, których ożyliśmy… i nagle Firefox staje się najbardziej
przyjazna programistom przeglądarka.
W dalszej części artykułu pokażemy co
potrafi 15 najlepszych wtyczek oraz przyjrzymy się rozszerzeniom przeznaczonym
dla innych przeglądarek. Instalacja rozszerzeń jest prosta: wystarczy kliknąć
instalacyjny odnośnik, znajdujący się na każdej stronie z pobraniami, udzielić
pozwolenia na zainstalowanie i Firefox pobierze i zainstaluje rozszerzenie. Po
upewnieniu się, że jest zgodne z wersja przeglądarki, której używamy,
rozszerzenie zacznie działać po ponownym uruchomieniu Firefoksa.
1. Web Developer
http://chrispederick.com/work/webdeveloper
Jeżeli istnieje jakaś wtyczka, która może zarządzać pozostałymi, jest nią Web
Developer Toolbar. Ponieważ udostępnia mnóstwo funkcji, zacznijmy od
najprostszych. Często potrzebujemy ustalić, który styl zastosować w elemencie
strony. Po zainstalowaniu Web Developera wystarczy kliknąć View Style
Information i za każdym razem, gdy naprowadzimy wskaźnik myszy na element,
zastosowany styl wyświetlić się w naszym pasku statusu.
Jest też więcej
użytecznych funkcji: możemy obramować wyróżniki, wspólne elementy i odnośniki
bez tytułowych znaczników. Obrazki pokazuj ą rozmiary, znaczniki alt i obrazki
o przekroczonym rozmiarze. Formularze umożliwiają obróbkę elementów formularzy i
metod wysyłania, ciasteczka umożliwiają dodawanie, usuwanie i blokowanie
ciasteczek.
2. Mozilla Accesibility Extension
http://cita.disability.uiuc.edu/software/mozilla
Wirtualnie każda firma i właściciel serwisu musi zapewnić jednakowy dostęp do
strony zarówno dla osób zdrowych, jak i niepełnosprawnych. The Mozilla
Accessibility Extension udostępniła pasek narzędziowy, który umożliwia zdrowym
projektantom przekonanie się, jak to jest być niepełnosprawnym użytkownikiem
sieci oraz udostępnia niepełnosprawnym użytkownikom zestaw narzędzi
wspomagających proces przeglądania stron.
Dodatkowo przy wyświetlaniu obrazów,
które nie mają znaczników alt lub longdesc, rozszerzenie umożliwia blokowanie
niektórych zachowań myszy, dzięki czemu możemy się dowiedzieć, jak zachowuje się
strona, gdy nawiguje po niej ktoś, kto nie używa myszy. Możliwe jest też
blokowanie formatowania
3. Fangs Screen Reader Emulator
http://www.standards-schmandards.com/fangs
Rozszerzenie Mozilla Accessibility najlepiej działa w zestawie z Fangs Screen
Reader Emulatorem. Fangs jest najpopularniejszym czytnikiem ekranu używanym
przez internautów, którzy mają problemy ze wzrokiem. Fangs Screen Reader
Emulator daje możliwość uzyskania jednego ciągu tekstu, który jest identyczny z
tym, co Fangs przeczyta, gdy otworzy naszą stronę WWW.
Rozszerzenie jest
dostępne bezpośrednio z menu Narzędzia. Wyróżnia ono listę nagłówków, które
wybierze Fangs, podobnie jak listę odnośników wyświetlanych dokładnie w tej
samej kolejności co w Fangsie. Rozszerzenie jest kompatybilne jedynie z
Firefoksem w wersji 1.0.
4. FireBug
http://www.joehewitt.com/software/firebug/
FireBug jest użytecznym usprawnieniem we wbudowanym w Firefoksie systemie
debuggowania. Dzieli okno przeglądarki na dwie części: górną przeznaczą dla
strony WWW, oraz dolną, która spełnia funkcję konsoli, uzupełnion ą o własne
menu. Tutaj wyświetlane są komunikaty o błędach, łącząc walidatory CSS i
HTML-a, konsolę JavaScript Firefoksa i Inspectora DOM z linią komend
interpretera JavaScriptu.
Jedną z bardzo użytecznych funkcji dla programistów
AJAX-a jest XMLHttpRequest Spy, niedostępny przy domyślnych ustawieniach.
Monitoruje on różne wiadomości sieciowych usług wymienianych między Firefoksem
i serwerami z uruchomionymi aplikacjami AJAX, co w znacznym stopniu ułatwia
debuggowanie
5. ColorZilla
http://www.iosart.com/firefox/colorzilla
Upewnienie się, że elementy strony odpowiadają sobie kolorystycznie i nie są
dwoma różnymi elementami może zajmować dużo czasu, zwłaszcza jeżeli przykładowo
porównujemy obrazy z tekstem. ColorZilla pracuje jak zakraplacz znany z
Photoshopa i innych programów graficznych, który umożliwia próbkowanie kolorów
każdego elementu, bez względu na to czy są one zakodowane, czy są obrazem.
Wystarczy kliknąć narzędzie, a następnie naprowadzić wskaźnik myszy nad obiekt,
by poznać jaki jest kod koloru. ColorZilla raportuje też odległość między
kliknięciem i obecną pozycją kursora myszy. Ponadto, aby upewnić się, że klikamy
we właściwe miejsce, możemy skorzystać z funkcji powiększenia do 1000%.
7. MetaTags Sidebar
http://ex-code.com/metatags/mozilla.html
Możemy mieć najlepszą stronę na świecie, ale jeżeli nikt nie będzie jej
odwiedzać, nikogo nie będzie obchodzić. Metatagi są zaszyte na górze strony, aby
lepiej poinformować wyszukiwarki o tematyce strony, jak też dostarczyć inne
informacje, na przykład o prawach autorskich.
Rozszerzenia MetaTags to boczny
pasek zawierający wszystkie informacje przechowywane w meta tagach bieżącej
strony, ale w wygodnym, czytelnym formacie. Jeżeli serwis ma słowa kluczowe
zaprojektowane pod kątem specyficznych wyszukiwań, możemy kliknąć je prawym
klawiszem myszy, aby przywołać listę opcji, włączając w to wyszukiwanie
różnych serwisów aukcyjnych dla obecnych cen reklam. Są tu też odnośniki do
usług zapisywania strony do wyszukiwarek oraz usług serwisu Alexa monitorującego ruch.
8. DevBoi
Każdy, kto tworzy pliki CSS doświadczył sytuacji, gdy nie przywoływały one
dokładniej składni dla stylu lub przeglądarki, którą wspierały. To norma. Prócz
tego istnieją tabele, HTML, XHTML, PHP, Ruby on Rails, JavaScript, DOM… Tak
wiele do zapamiętania, tak wiele do zrobienia.
DevCoi to przydatny pasek dla
programistów, który udostępnia wszystkie podręczniki, z których nie mogliśmy
skorzystać, gdy były najbardziej potrzebne. Po prostu uruchomiamy go z menu
Narzędzia i następnie podwójnym kliknięciem elementu, który nas interesuje
wywołujemy właściwą stronę podręcznika. Nagle kodowanie staje się o wiele
prostsze.
9. JSView
http://www.scorpiondb.com/firefox/extensions/jsview
Przyzwoite narzędzia do JavaScriptu i CSS wraz z narzędziami do AJAX-a to
obecnie zestaw obowiązkowy dla każdego twórcy stron. Większość przeglądarek
umożliwia jedynie podejrzenie kodu źródłowego strony i zazwyczaj trzeba
przedzierać się przez kod, by znaleźć odnośniki do zewnętrznych plików i
następnie otworzyć je osobno.
JSView otwiera wszystkie zewnętrzne pliki CSS i
Java- Scirpt w swoich oknach. Jeżeli mamy do czynienia z jednym każdego rodzaju,
musimy wybrać czy chcemy otworzyć wszystkie, czy jedynie jeden – aby otworzyć
pojedynczy plik, wybieramy każdy z nich z menu View. Otwarcie wszystkich
jednocześnie wiąże się z koniecznością wybrania ich z menu kontekstowego lub
użycia opcyjnego przycisku na pasku.
10. Execute JS
http://www.rudolf-noe.de/ExecuteJS.htm
Zwyczajowo przy pisaniu skryptów w JavaScripcie najpierw tworzymy skrypt,
następnie ładujemy go na serwer i dalej wczytujemy stronę do przeglądarki.
Jeżeli skrypt działa, jest dobrze. Jeżeli nie, korzystamy z konsoli JavaScript
do wyeliminowania błędów. Execute JS uwalnia od wielu nudnych zadań, pozwalając
zastosować JavaScript bezpośrednio na stronie.
Konsola wyoewietla rezultaty
każdego działania, możemy też znaleźć właściwości obiektów na stronie. Za
pomocą rozszerzenia łatwo modyfikuje się funkcje szukania, ładowania i edycji,
można je też zachować, gdy są już ukończone. Execute JS wyposażono także w
inne użyteczne narzędzia, dzięki którym można zaoszczędzić czas. To historia
wszystkich fragmentów kodu i zapis skrótów do elementów z których często
korzystamy
11. SEO Links extension
http://seopen.com/firefox-extension/index.php
Pozycjonowanie stron nie zatrzymało się na metatagach. Przygotowanie strony w
taki sposób, by była przyjazna dla mechanizmów wyszukiwawczych wymaga
jednocześnie wiedzy i artyzmu – jest bowiem wiele czynników wpływających na
to, jak strona jest pozycjonowania w rankingu wyszukiwarki. Rozszerzenie SEO
Links to zebrane w jednym miejscu narzędzi online, za pomocą których można
sprawdzać postępy na tym polu.
Podobnie jak niektóre inne rozszerzenia, SEO
Links umożliwia opracowanie słów kluczowych, których możemy użyć. Informuje,
co znajduje się w leżącym na serwerze pliku robot.txt, podaje rozmiar pliku
strony, czy jest uwzględniony w katalogu DMOZ, ile linków prowadzi do strony,
jak jest spozycjonowana w PageRanku Google\’a i wiele więcej.
12. Add N Edit Cookies
http://addneditcookies.mozdev.org
Większość menedżerów ciasteczek umożliwia ich podgląd. Za pomocą niektórych
można je usunąć. Jednak każdy, kto chciałby edytować ciasteczka podczas testów,
powinien wybrać rozszerzenie Add N Edit Cookies. To narzędzie ma wbudowany
system filtrujący, dzięki któremu można szybko wyszukać potrzebne ciasteczko.
Dodatkowa opcja, której na próżno szukać w różnych menedżerach ciasteczek, to
możliwość dodania ciasteczka z dowolnej domeny, którą wybierzemy. To prezent
dla każdego, kto chce przetestować swój serwis z różnymi ustawieniami
ciasteczek bez męczarni łączenia się ze stronami z logowaniem. Jednocześnie to
wspaniały sposób na przetestowanie tego, jak dobre mamy zabezpieczenia.
13. UrlParams
http://www.urlparams.blogwart.com/share/index.php
Wirtualnie każdy serwis, który jest interaktywny, korzysta z formularzy. Aby
zobaczyć, co zostało w nich wprowadzone zazwyczaj zmusza do przyjrzenia się
całej treści strony lub nagłówkom serwera, następnie cofnięcia się i ponownego
wprowadzenia informacji za pomocą oryginalnego formularza, który już został
załadowany. UrParams jest bocznym paskiem, dzięki któremu możemy całą tę
procedurę ominąć. Wyświetla rodzaje pól i danych, które formularz wysłał na
serwer i daje możliwość ponownego ich wysłania. Działa zarówno z formularzami
GET, jak i POST. Tym, co odróżnia go od podobnego LiveHTTPHeaders oraz innych
podobnych rozszerzeń, oprócz możliwości edycji, jest layout. Jest czytelny,
podobnie jak inne opcje.
14. Table Inspector
http://juicystudio.com/article/firefox-table-inspector.php
Oznaczanie HTML-a mające na celu udostępnienie tabel zostawia użytkownikowi
mnóstwo możliwości – użycie znaczników takich jak summary, headers, axis, scope
i abbr.
Jednak podczas przeglądania w zwykłej przeglądarce kod pozostaje
niewidoczny. Rozszerzenie Table Inspector sprawia, że można zobaczyć to, co było
niewidoczne. Gdy już aktywujemy rozszerzenie z menu Narzędzia lub kontekstowego
menu, będziemy w stanie zobaczyć wszystko zaznaczone w boksach.
15. Clear Cache Button
Przycisk Clear Cache pozwala natychmiast opróżnić pamięć cache Firefoksa. Aby
udostępnić ten przycisk, trzeba otworzyć Widok | Paski narzędzi | Dostosuj w
celu przywołania procedury dostosowywania paska, a następnie przeciągnąć
przycisk na pasek i kliknąć OK.
Pozostałe przeglądarki
Podczas gdy przeglądarki open source, takie jak Mozilla, Seamonkey i Flock,
potrafią korzystać z niektórych rozszerzeń Firefoksa, a nawet mają własne, to w
przypadku komercyjnych przeglądarek jest ich zbyt mało.
Internet Explorer
http://www.microsoft.com/windows/ie/default.mspx
Pomimo tego, że korzysta z niego większość użytkowników sieci, Internet
Explorer jest daleki od bycia faworytem wśród większości twórców stron. To
oznacza, że choć ActiveX Foundation powinna uczynić go poręcznym, lista dodatków
dla twórców stron przeznaczonych dla IE jest zaskakująco niewielka.
Na Windows
Marketplace (http://windowsmarketplace.com) znajduje się lista
najpopularniejszych z nich, jednak jedyny, który warto zainstalować to Web
Developer Toolbar Microsoftu (http://tinyurl.com/8rwb8).
Safari
To teraz podstawowa przeglądarka na wszystkich macach, IE został wypchnięty już
kilka lat temu. Jednak choć to open source\’owy szkielet renderujący strony,
oparty na kodzie KHTML Konquerora, Safari jest stosunkowo zamknięta.
WebDevAdditions (http://www.laszlo.com.pl/webdev) próbuje skopiować niektóre z
możliwości Web Developer Extension Firefoksa, takie jak blokowanie arkuszy
stylów, obrazków itd.
SafariSource (http://www.tildesoft.com/Misc.html#SafarSource) wyróżnia różne źródła elementów kodu zgodnie z
naszymi ustaleniami, podczas gdy SafariStand (http://hetima.com/safari/stand-e.html) dodaje zestaw funkcji, wśród których znalazły się
informacje o nagłówku, ciasteczkach i statystyce obrazków
Opera
Opera nie jest znana z obfitości rozszerzeń, ponieważ bardzo dużo funkcji
wbudowano w przeglądarkę. Jednak jest kilka rozszerzeń wartych uwagi. Warto
zainstalować Web Developer Toolbar and Menu (http://nontroppo.org/wiki/Web-
DevToolbar).
Wraz z nim otrzymujemy mnóstwo rozszerzeń w jednym pakiecie.
Funkcje obejmują dane CSS, informacje o ciasteczkach i formularzach. Innym
użytecznym rozszerzeniem Opery jest W3-Dev Menu
(http://tobyinkster.co.uk/opera).
