W tym artykule Karl Hodge pokaże, jak za pomocą zestawu najlepszych wtyczek i rozszerzeń przekształcić Firefoksa w kompletne narzędzie do tworzenia stron.
Co budujemy? Za pomocą Firefoksa 2.0 oraz zestawu starannie dobranych rozszerzeń utworzymy w pełni opensource\’ową platformę do budowy serwisów, wyposażoną w zaawansowane funkcje, zazwyczaj dostępne tylko w komercyjnych pakietach. Ulepszona przeglądarka umożliwi kontrolę DOM-u stron, ulepszanie CSS-ów, edycję kodu, debugowanie JavaScriptu oraz przeprowadzanie testów walidacji.
Czy korzystamy z całego potencjału naszej przeglądarki? Prawdopodobnie codziennie uruchamiamy ją po to, by obejrzeć projekty naszych stron, odwiedzamy serwisy i oglądamy filmy na YouTube, ale przeglądarka potrafi dużo więcej! Zwłaszcza Firefoksa nadzwyczaj łatwo dostosować do naszych wymagań za pomocą specjalnych rozszerzeń, które są po prostu kawałkiem kodu zmieniającym sposób działania przeglądarki.
Instalacja rozszerzeń Firefoksa zazwyczaj jest bardzo prosta. Programiści tworzą rozszerzenia, korzystając z formatu Mozilla XPI i następnie zamieszczają linki do nich bezpośrednio na stronach WWW. Gdy klikamy taki link, Firefox rozpoznaje, że pobieramy rozszerzenie i automatycznie menedżer dodatków sprawdza, czy są dostępne jakieś aktualizacje zainstalowanych rozszerzeń. Jeśli tak, to automatycznie je pobiera. Jeśli okaże się, że nie korzystamy z któregoś z rozszerzeń, możemy je usunąć przechodząc w menu głównym do Narzędzia → Dodatki. Możemy całkowicie usunąć lub zablokować jakiekolwiek rozszerzenie znajdujące się na liście.
W tym tutorialu pokażę, jak przekształcić Firefoksa w platformę do tworzenia stron WWW jedynie za pomocą bezpłatnych rozszerzeń.
Porada eksperta:
- Greasemonkey
Greasemonkey dodaje funkcje JavaScriptu do architektury wtyczek Firefoksa. Podczas gdy inne rozszerzenia zawężają swoje działanie do strony, ta umożliwia twórcom stron zmienianie dokumentów w przeglądarce. Innymi słowy dodaje funkcjonalność bezpośrednio do stron WWW. Instaluje się ją w taki sam sposób, jak inne rozszerzenia Firefoksa, i można do niej dodawać skrypty, klikając ich linki. Oprogramowanie rozpoznaje próby otwarcia skryptu Greasemonkey i umożliwia dodanie go do naszej kolekcji. Więcej znajdziemy pod adresem http://www.greasespot.net. - Rozszerzenia dla IE
Firefox to nie jedyna przeglądarka, do której można dodać wtyczki, to samo można zrobić z Internet Explorerem 6 i 7. W przypadku przeglądarki Microsoftu tworzenie stron jest mniej efektywne, instalacja mniej wygodna, ale także tutaj są wtyczki, którym warto się przyjrzeć. Listę kompatybilnych wtyczek znajdziemy w serwisie Windows Marketplace (http://www.windowsmarketplace.com), w dziale IE Add- Ons. Wśród narzędzi dla twórców stron znajdziemy Microsoft Developer Toolbar dla IE7, który działa z IE6, jak też IESpy.
{tlo_1}
KROK 1: najlepsze z grupy
Mój wybór rozszerzenia Firefoksa padł na Web Developera (http://www.chrispederick.com/work/web-developer). Dzięki niemu możemy na wiele sposobów oglądać i edytować niewidoczną strukturę każdej strony. Web Developer może stać się głównym narzędziem do testowania stron.
{/tlo}
{tlo_0}
KROK 2: odkrywca DOM
Web Developer dodaje do Firefoksa pasek narzędzi, dzięki któremu możemy podejrzeć Document Object Model (DOM) naszej strony, jak też zaznaczyć elementy bloku lub bezpośrednio edytować powiązaną z nim strukturę CSS w czasie rzeczywistym. Możemy też zablokować lub odblokować określone funkcje strony.
{/tlo}
{tlo_1}
KROK 3: narzędzia usprawniające
Kolejnym rozszerzeniem jest Firebug (http://www.getfirebug.com). Niektóre z jego narzędzi są takie same jak Web Developera, jednak jego javascriptowe funkcje docenią zaawansowani twórcy stron. Narzędzia do debugowania, edycji oraz monitorowania sieci pomogą usprawnić nasze CSS-y, XML oraz JavaScript.
{/tlo}{tlo_1}
KROK 15: IETab
IETab (http://ietab.mozdev.org) umożliwia wyświetlanie stron za pomocą silnika Internet Explorera bez konieczności opuszczania Firefoksa! Klikamy prawym klawiszem myszy, by uruchomić je z silnikiem renderującym IE, podczas gdy Firefox zachowuje kontrolę nad interfejsem. Skorzystajmy z tego rozszerzenia do sprawdzania stron pod kątem kompatybilności z przeglądarkami.
{/tlo}
{tlo_0}
KROK 16: testy dostępności
Firefox Accessibility Extension (http://firefox.cita.uiuc.edu) zaprojektowano z myślą o łatwiejszym przeglądaniu stron WWW przez ludzi niepełnosprawnych, ale z tego rozszerzenia mogą też skorzystać twórcy serwisów do testowania działania stron. To wszystko dzięki wielu narzędziom raportującym.
{/tlo}
{tlo_1}
KROK 17: lokalne wykonywanie
Ze względu na fakt, że rozszerzenia są uruchamiane w naszej przeglądarce, zamiast łączyć się z odległymi serwerami, przeglądarka testuje sparsowany HTML na naszej stronie, nie zaś jej skrypty. Fałszywe błędy mogące pojawić się w następstwie stosowania pakietów testujących, które próbują odczytać i uruchomić skrypty, są wykluczane.
{/tlo}
{tlo_0}
KROK 18: funkcjonalność klienta FTP
FireFTP (http://fireftp.mozdev.org) dodaje do Firefoksa w pełni funkcjonalnego klienta FTP, który wygląda i działa jak desktopowa aplikacja FTP. Za jej pośrednictwem możemy skorzystać z dostępu do pulpitu i serwerów FTP przy wykorzystaniu techniki \”przeciągnij i upuść\”, jak też użyć linii komend.
{/tlo}
{tlo_1}
KROK 19: zestaw narzędzi webmastera
W charakterze finałowego elementu naszego zestawu narzędzi twórcy stron WWW skorzystajmy z FireFTP do uploadu skryptów i plików bez opuszczania Firefoksa. W połączeniu z innymi przydatnymi rozszerzeniami wymienionymi w tym tutorialu FireFTP jest tym niezbędnym narzędziem, które umożliwia przekształcenie Firefoksa w pełni funkcjonalną platformę do tworzenia stron WWW.
{/tlo}{tlo_1}
KROK 4: główne funkcje
Jedną z mocnych stron Firebuga jest korzystanie z javascriptowej konsoli Mozilli. Nie tylko łatwo ją wywołać, ale mamy tu nawet pojedynczą linię do pisania, możliwość testowania kodu linia po linii, jak też opcję rozszerzenia do pełnowymiarowego okna z tekstem, które korzysta z silnika JavaScript Firefoksa do wykonywania kodu.
{/tlo}
{tlo_0}
KROK 5: pełny program
Web Developer i Firebug umożliwiają poprawianie stron witryny lub debugowanie plików lokalnie przed ich wysłaniem. Codetch (http://www.codetch.com) idzie dalej, umożliwiając budowę zintegrowanego środowiska programowania (ang. IDE) na bazie Firefoksa lub jakiegokolwiek innego pakietu, który jest kompatybilny z rozszerzeniami Mozilli.
{/tlo}
{tlo_1}
KROK 6: WYSIWYG
Osoby, które po raz pierwszy instalują Codetcha mogą być zaskoczone tym, że jest to program do pełnej edycji kodu, z wyrazistym projektem i podglądem kodu, który można konfigurować w trybie podzielonego okna. Mamy tu także wbudowany dostęp do konsoli JavaScript oraz pełne wsparcie kodowania XHTML-a i CSS-ów.
{/tlo}
{tlo_0}
KROK 7: proste podejście
Trzy opisane rozszerzenia dają w sumie kompletne środowisko do tworzenia stron WWW. Celem It\’s All Text (http://addons.mozilla.org/en-US/firefox/addon/4125) jest ułatwienie edycji i tworzenia formularzy, dzięki możliwości wprowadzania treści pochodzących z zewnętrznych źródeł.
{/tlo}
{tlo_1}
KROK 8: edycja pól tekstowych w domyślnym edytorze
It\’s All Text, choć słabiej wyposażony w funkcje niż Codetch, jest poręczny na swój sposób, umożliwiając powiązanie pól tekstowych z dowolnym programem do edycji na naszym komputerze. Skorzystanie z domyślnego edytora, którego używamy na co dzień, sprawi, że nasza praca będzie szybka i efektywna.
{/tlo}
{tlo_0}
KROK 9: programy zewnętrzne
Jeśli zawiedzie nas prostota It\’s All Text, jest sposób na to, by ściśle zintegrować Firefoksa z naszymi narzędziami programistycznymi. Mozex (http://mozex.mozdev.org) umożliwia korzystanie z jakiegokolwiek zewnętrznego programu do edycji treści stron, poglądu kodu źródłowego, obsługi linków innych niż HTTP oraz pobierania plików.
{/tlo}{tlo_1}
KROK 10: wywołanie Notatnika
Po zainstalowaniu Mozeksa możemy sprawić, by Firefoks otwierał pliki źródłowe w systemowym Notatniku (lub jakimkolwiek innym edytorze tekstowym). Wystarczy, że przejdziemy do Narzędzia→Dodatki→Rozszerzenia i wybierzemy Mozeks. Następnie wybierzemy Opcje. Teraz w polu Source editor wpisujemy: {stala}C:\\Windows\\Notepad.exe %t{/stala}.
{/tlo}
{tlo_0}
KROK 11: próbkowanie kolorów
Także projektanci mogą korzystać z dobrodziejstwa rozszerzeń Firefoksa. ColorZilla (http://www.iosart.com/firefox) to wspaniałe narzędzie umożliwiające próbkowanie kolorów z każdego miejsca przeglądarki za pomocą narzędzia Zakraplacz. Odczytane wartości RGB można wkleić do naszego edytora.
{/tlo}
{tlo_1}
KROK 12: wybór koloru
Klikamy prawym klawiszem myszy ikonę ColorZilla w dolnym lewym rogu okna przeglądarki, aby uzyskać dostęp do opcji wklejania. Dwa razy klikamy tę samą ikonę, aby uzyskać dostęp do pełnej palety kolorów w postaci pola wyboru RGB lub formatu palety. W widoku palety uwzględniono nazewnictwo W3C oraz bezpieczne kolory dla strony.
{/tlo}
{tlo_0}
KROK 13: schematy kolorystyczne
ColorZilla umożliwia próbkowanie wielu kolorów dla strony lub palety oraz budowanie własnego schematu kolorystycznego. Przytrzymujemy wciśnięty klawisz Shift, gdy próbkujemy piksel. Jeśli obszar, który chcemy próbkować jest mały, powiększamy go za pomocą opcji Zoom, którą wybieramy z menu głównego ColorZilli.
{/tlo}
{tlo_1}
KROK 14: pomiary
ColorZillę wyposażono w jedną ukrytą funkcję, dzięki której możemy przeprowadzić pomiary między dwoma punktami na stronie z dokładnością do piksela. W trybie Zakraplacza klikamy punkt, ponownie wybieramy ten tryb i klikamy drugi punkt. Wyniki pomiarów znajdziemy w Status Bar.
{/tlo}
