Przeglądarka Mozilla Firefox jest open-source’owym programem o wszechstronnych możliwościach, a skupiona wokół niego społeczność nieustannie tworzy nowe dodatki. Dzięki odpowiedniemu ich zestawowi program może realizować różnorakie zadania. Jako webmaster, odnajdziesz w bazie wtyczek odnaleźć szereg narzędzi, które w znacznym ułatwiają tworzenie stron internetowych. Oto przegląd najciekawszych z nich.
Prosty w użyciu system wtyczek to jeden z powodów
stale rosnącej popularności Firefoksa. Każdy
programista może bez trudu napisać własne
rozszerzenie i udostępnić je wszystkim użytkownikom
przeglądarki. Żadna z konkurencyjnych przeglądarek
nie posiada obecnie podobnych możliwości i nic nie
zapowiada, aby w najbliższej przyszłości mogło się to
zmienić.
Gdy raz zaczniesz korzystać z zestawu wtyczek
dla webmasterów, to najprawdopodobniej w krótkim
czasie przyzwyczaisz się do nich tak mocno, że nie
będziesz sobie wyobrażać codziennej pracy bez ich
wykorzystywania. To dlatego ani Internet Explorer, ani
Opera czy jakakolwiek inna przeglądarka nie mogą
obecnie równać się pod tym względem z Firefoksem.
Prezentujemy omówienie najprzydatniejszych,
mniej i bardziej znanych, wtyczek. Nasz wybór jest
rzecz jasna absolutnie subiektywny. Jest wśród nich
Web Developer – jedno z najpopularniejszych rozszerzeń,
które zawiera naprawdę sporą liczbę narzędzi.
Umożliwia chociażby szybkie wyłączanie i włączanie
stylów CSS, JavaScriptu czy obsługi obrazków.
Kolejne z omawianych rozszerzeń to ColorZilla. Służy
do łatwego pobierania kodów kolorów z dowolnej
strony internetowej, co na pewno będzie przydatne
projektantom szukającym inspiracji w dziełach innych
webdesignerów. Z kolei EditCSS jest wtyczką pozwalającą
na bezpośrednią edycję kodu CSS przeglądanej
strony i podgląd rezultatów w czasie rzeczywistym.
Bardzo przydatny jest także Walidator HTML, który
umożliwia bezpośrednią kontrolę zgodności pisanego
kodu ze standardami W3C. Kolejna wtyczka, IE Tab,
pozwala uzyskać dostęp do silnika renderującego
Internet Explorera bezpośrednio z poziomu Firefoksa.
Możesz więc dzięki niej sprawdzić wygląd i działanie
strony w przeglądarce IE bez potrzeby jej fizycznego
uruchamiania.
To jeszcze nie koniec ciekawych wtyczek dla webmasterów.
Jedna z bardziej interesujących to Firebug,
czyli rozbudowana konsola JavaScript i debuger CSS,
która informuje o znalezionych błędach. Warta uwagi
jest także wtyczka MeasureIt pozwalająca na mierzenie
szerokości poszczególnych obiektów na stronie.
Przedostatnia z opisywanych wtyczek to Aardvark.
Służy do modyfikowania elementów przeglądanej
strony i oferuje na tym polu bardzo szerokie możliwości.
Na zakończenie opisujemy rozszerzenie View
formatted source, dzięki któremu źródła przeglądanych
stron możesz widzieć w postaci sformatowanej oraz
w odpowiednim kolorze.
Instalację pierwszego z omawianych rozszerzeń,
czyli Web Developera, przedstawimy z największą
ilością szczegółów, aby zaprezentować dokładnie
sam proces instalacji nowych wtyczek w Firefoksie.
W opisie kolejnych z nich pominiemy najbardziej
oczywiste kroki, tak aby zaprezentować tylko to, co
najważniejsze.
Krok siódmy: Measurelt
{tlo_0}
1 Mierz elementy na stronie
MeasureIt to sprytna wtyczka udostępniająca wygodną w użyciu linijkę,
za pomocą której możesz zmierzyć wysokość i szerokość dowolnego
elementu na stronie. Pobierzesz ją z adresu: https://addons.mozilla.org/pl/firefox/
addon/539.
{/tlo}
{tlo_1}
2 Uaktywnij wtyczkę
Aby włączyć wtyczkę, kliknij w ikonę linijki znajdującą się na pasku stanu
w lewym rogu okna przeglądarki. Cała strona zostanie wówczas przykryta
specjalną przezroczystą warstwą, po której można wygodnie rysować.
{/tlo}
{tlo_0}
3 Zacznij rysowanie
Możesz teraz narysować kursorem dowolny prostokąt, a z boku
zobaczysz jego wymiary. Prostokąt możesz przesuwać strzałkami przy
przyciśniętym klawiszu Ctrl o jeden piksel w każdą stronę. Jeżeli przyciśniesz
wraz z nim klawisz Shift, prostokąt będzie się przesuwał o 5 pikseli.
{/tlo}
Krok ósmy: Aadvark
{tlo_1}
1 Modyfikuj na żywo dowolne elementy serwisu
Wtyczkę Aardvark możesz pobrać ze strony https://addons.mozilla.org/pl/firefox/
addon/4111. Jest to proste w użyciu narzędzie do zaznaczania dowolnych
elementów na stronie i dokonywania na nich rozmaitych akcji. Daje duże możliwości
manipulowania dowolną witryną, choć nie będą to zmiany bardzo dokładne.
{/tlo}
{tlo_0}
2 Uruchom nowe rozszerzenie
Wtyczkę uruchamiasz, rozwijając menu „Narzędzia” lub klikając prawym
przyciskiem myszy w oknie przeglądarki, a następnie wybierając opcję
„Start Aardvark”. Pozostanie ona aktywna do momentu ponownego wybrania
tej opcji lub przejścia na inną stronę.
{/tlo}
{tlo_1}
3 Zaznacz dowolny element
Po wskazaniu kursorem dowolnego elementu strony zostaje on otoczony
czerwoną ramką, a obok pojawia się nazwa odpowiedniego znacznika
HTML.
{/tlo}
{tlo_0}
4 Modyfikuj wybrane pozycje
Elementami możesz manipulować za pomocą skrótów klawiaturowych, których
spis podano w ramce na poprzedniej stronie. Tutaj widzimy kompletnie
przemeblowaną witrynę magazynyinternetowe.pl.
{/tlo}
Krok dziewiąty: View formatted source
{tlo_1}
1 Uzyskaj dostęp do sformatowanego kodu strony
Aby zainstalować rozszerzenie View formatted source, odwiedź adres
https://addons.mozilla.org/pl/firefox/addon/697. Dzięki tej wtycze będziesz
mógł oglądać sformatowane i pokolorowane źródła stron.
{/tlo}
{tlo_0}
2 Uaktywnij rozszerzenie
Od tej pory możesz korzystać ze sformatowanych źródeł za pomocą
skrótu klawiaturowego ALT+CTRL+U lub opcji „Narzędzia” > „View
formatted source”. W sytuacji, gdy zechcesz poznać sposób działania skomplikowanych
stron, wtyczka ta może się okazać niezastąpioną pomocą.
{/tlo}
Krok pierwszy: Web Developer
{tlo_1}
1 Pobierz niezbędnik webmastera
Odwiedź stronę http://mozillapl.org/baza_rozszerzen/dla_tworcow_stron/
web_developer i zainstaluj rozszerzenie, wybierając system operacyjny,
z którego korzystasz. Jeśli nie chcesz przepisywać tak długiego adresu, użyj
wyszukiwarki na stronie głównej http://mozillapl.org. Odpowiednie linki
instalacyjne znajdują się na dole strony. Większość rozszerzeń dostępnych jest
w wersjach dla Windows, Linuksa i Mac OS X.
{/tlo}
{tlo_0}
2 Zezwól na instalację
Jeżeli wcześniej nie instalowałeś żadnych rozszerzeń z serwisu http://mozillapl.
org, to w górnej części okna ukaże się komunikat wskazujący, że
serwis ten nie ma uprawnień do zainstalowania nowego rozszerzenia. Kliknij
na „zmień opcje”, a w oknie, które się następnie ukaże, kliknij „Zezwól”. Po tej operacji musisz ponownie kliknąć w link instalacyjny.
{/tlo}
{tlo_1}
3 Rozpocznij instalację
W nowym oknie ujrzysz komunikat z potwierdzeniem instalacji. Kliknij
przycisk „Zainstaluj”, gdy uaktywni się po 6 sekundach. Nie przejmuj się
tym, że dana wtyczka nie ma podpisu cyfrowego. Nie jest to konieczne i nie
wiąże się z tym żadne niebezpieczeństwo.
{/tlo}
{tlo_0}
4 Zrestartuj przeglądarkę
W kolejnym oknie ujrzysz pasek wskazujący postęp w pobieraniu i instalacji
rozszerzenia. Operacja ta powinna się odbyć relatywnie szybko
w zależności od łącza, jakim dysponujesz. Teraz musisz zamknąć i ponownie
uruchomić Firefoksa
{/tlo}
{tlo_1}
5 Zapoznaj się z opcjami
Po ponownym uruchomieniu programu ujrzysz pasek narzędziowy z szeregiem
opcji. Jest on bardzo długi, wobec czego należy rozszerzyć okno,
by mieć dostęp do wszystkich opcji. Te najważniejsze znajdują się na szczęście
po lewej stronie.
{/tlo}
{tlo_0}
6 Dostosuj wygląd wtyczki
Możesz łatwo włączać i wyłączać pasek Web Developera, jeśli umieścisz
odpowiednią ikonę na pasku nawigacyjnym. Z menu „Widok” wybierz
„Paski narzędzi”, a następnie „Dostosuj”. Znajdź ikonę „Web Developer” i przenieś
ją we właściwe miejsce na pasku przeglądarki.
{/tlo}{tlo_1}
Krok drugi: ColorZilla
1 Pobieraj kolory ze stron
Rozszerzenie ColorZilla służące do pobierania
kodów kolorów z przeglądanych stron
znajdziesz na stronie http://mozillapl.org/baza_rozszerzen/
dla_tworcow_stron/colorzilla. Zainstaluj
je w taki sam sposób, jak Web Developera. Tym
razem nie musisz jednak po raz drugi pozwalać
stronie na instalację wtyczki. Raz udzielone zezwolenie
jest cały czas ważne.
{/tlo}
{tlo_0}
2 Rozpocznij korzystanie z wtyczki
Aby zacząć korzystać z ColorZilli, kliknij
prawym przyciskiem myszy na oglądanej
stronie i wybierz pozycję „ColorZilla”. Dzięki opcji
zoomowania możesz powiększyć wymiary strony
i łatwiej wyselekcjonować interesujący cię kolor.
Aby pobrać kolor, skorzystaj z opcji „Kroplomierz”
i kliknij w odpowiednim miejscu strony.
{/tlo}
{tlo_1}
3 Skopiuj kod koloru
W celu skopiowania
kodu koloru kliknij
prawym przyciskiem
w ikonę pipety, która
ukazała się w lewym dolnym
rogu przeglądarki
na pasku stanu. Wybierz
jedną z dostępnych opcji,
aby skopiować kolor
w żądanym formacie.
{/tlo}
Krok trzeci: EditCSS
{tlo_0}
1 Edytuj kod CSS na żywo
W przeciwieństwie do
poprzednich dwóch wtyczek,
rozszerzenie Edit CSS pobierzesz
ze strony https://
addons.mozilla.org/pl/firefox/
addon/179. Jest to serwis
z dodatkami do produktów
Mozilli, jednak zawiera także
wtyczki niemające polskiego
tłumaczenia. W czasie
instalacji postępuj tak samo,
jak w przypadku wcześniej
opisanych wtyczek.
{/tlo}
{tlo_1}
2 Uruchom edytor CSS
Aby uruchomić edytor CSS, wczytaj stronę WWW i klikając prawym
przyciskiem myszy, wybierz z podręcznego menu opcję „Edit CSS”.
Możesz także skorzystać ze skrótu klawiaturowego Shift+Ctrl+8.
{/tlo}
{tlo_0}
3 Wprowadź zmiany w kodzie
Po lewej stronie okna przeglądarki wyświetlony zostanie podręczny edytor CSS. Wszystkie zmiany
wprowadzane do kodu będą widoczne w prawej części okna.
{/tlo}
{tlo_1}
4 Obserwuj zmiany wyglądu strony
Jak widać, zmiana
koloru tła na czerwony jest
natychmiast widoczna na
przeglądanej stronie. Ułatwia
to w dużym stopniu zrozumienie
kodu napisanego przez
innych webmasterów.
{/tlo}
Krok czwarty: Walidator HTML
{tlo_0}
1 Uruchamiaj walidator w locie
Walidatorów nie trzeba przedstawiać żadnemu webmasterowi. Wiesz
zapewne, że służą one do kontroli poprawności pisanego kodu. Wtyczkę,
która na bieżąco sprawdza zgodność kodu przeglądanej strony ze standardami
W3C, możesz pobrać z adresu http://mozillapl.org/baza_rozszerzen/dla_tworcow_
stron/walidator_html.
{/tlo}
{tlo_1}
2 Zrestartuj Firefoksa
Gdy ponownie uruchomisz program, zostaniesz zapytany, który ze sposobów
walidacji wybierasz. Program Tidy znany jest ze swojej mniejszej
dokładności. Natomiast Parser SGML to program, z którego korzysta także
walidator na stronie W3C. Dlatego polecamy wybór właśnie drugiej opcji. Od
tej pory w prawym dolnym rogu przeglądarki widnieć będzie ikona informująca,
czy dana strona poprawnie przeszła proces walidacji.
{/tlo}
{tlo_0}
Krok piąty: IE Tab
1 Twórz strony zgodne z przeglądarką IE
Jeżeli regularnie sprawdzasz wygląd pisanych stron w przeglądarce
Internet Explorer, polubisz rozszerzenie IE Tab. Dzięki niemu Firefox
uzyskuje dostęp do silnika IE. Wtyczkę pobierzesz ze strony http://mozillapl.
org/baza_rozszerzen/nawigacja_na_stronach/ie_tab. Zadziała ona jedynie
w systemach Windows i Mac OS X, ponieważ nie istnieje oficjalnie wspierana
wersja Internet Explorera dla Linuksa.
{/tlo}
{tlo_1}
2 Otwórz stronę w IE Tab
Aby wyświetlić daną stronę
za pomocą silnika Internet
Explorera, kliknij w oknie przeglądarki
prawym przyciskiem myszy
i wybierz z menu podręcznego
pozycję „Otwórz tę stronę w IE
Tab”. Otworzy się nowe okno
przeglądarki prezentujące wygląd
strony w Internet Explorerze.
{/tlo}
Krok szósty: Firebug
{tlo_0}
1 Wychwytuj wszystkie błędy na stronie
Firebug to kolejna bardzo rozbudowana wtyczka. Jej konsola wyświetla
komunikaty o działaniu skryptów JavaScript, a w przypadku korzystania
z technologii Ajax, również informacje o połączeniach z serwerem. Za pomocą
Firebuga możesz edytować, debugować i monitorować kod JS, CSS i HTML.
Wtyczkę pobierzesz ze strony: https://addons.mozilla.org/pl/firefox/addon/1843.
{/tlo}
{tlo_1}
2 Otwórz dodatkowy panel Firebuga
Żeby otworzyć dodatkowy panel Firebuga, wejdź w opcję „Narzędzia” >
„Firebug”, a następnie wybierz „Open Firebug”. Opcja „Disable Firebug”
wyłącza działanie rozszerzenia, gdy jest zaznaczona i włącza działanie, gdy jest
odznaczona. Kliknij teraz na opcji „Enable Firebug”, aby go włączyć.
{/tlo}
{tlo_0}
3 Śledź dane i kod
W pierwszej zakładce widoczne są odnalezione błędy JavaScript. Druga
prezentuje kod HTML wraz z kodem CSS, trzecia sam CSS. W zakładce
„Script” możesz obserwować kod JavaScript. Czwarta zakładka ukazuje
elementy drzewa DOM, a ostatnia pliki pobrane z serwera wraz z czasem
ładowania.
{/tlo}
{tlo_1}
4 Edytuj kod w czasie rzeczywistym
Po wybraniu opcji „Edit” możesz w czasie rzeczywistym edytować kod
CSS i JavaScript, na bieżąco obserwując wprowadzane zmiany. Firebug
może więc z powodzeniem pełnić taką samą funkcję, jak omawiana już wtyczka
EditCSS.
{/tlo}
