6 Essential Firefox Add-Ons dla projektantów
Jako webdesigner (i zaawansowany technologicznie użytkownik Internetu), nie ma usprawiedliwienia, aby nie używać przeglądarki Firefox jako głównej przeglądarki internetowej. Jeśli nie korzystasz jeszcze z Firefoksa, musisz iść i pobieranie teraz. Firefox zapewnia nie tylko najwyższą jakość przeglądania Internetu, ale zapewnia także nieskończoną ilość funkcji, których po prostu nie znajdziesz w żadnej innej przeglądarce internetowej.
Ponieważ firmy zewnętrzne mogą tworzyć dodatki dla Firefoksa, pobierając najlepsze dostępne dodatki, możesz zmienić Firefoksa w narzędzie, które znacznie zwiększa wydajność i oszczędza niezliczoną ilość czasu. Ponieważ istnieje wiele różnych dodatków do pobrania, może być trochę przytłaczające, aby wybrać te, z których powinieneś korzystać.
Dlatego postanowiłem wykonać dla Ciebie całą pracę związaną z nogą i skompilować listę sześciu najlepszych dodatków dla Firefoksa dla projektantów stron internetowych.
Twórca stron internetowych
Chociaż nazywa się Twórca stron internetowych ten dodatek do Firefoksa jest absolutnie nieoceniony dla projektantów stron internetowych. Jeśli chcesz pobrać i zainstalować tylko jeden dodatek do Firefoksa, to ten, który poleciłbym Tobie. Powodem jest to, że ten dodatek zapewnia wiele różnych użytecznych funkcji i może być sklasyfikowany jako dodatek Swiss Army Knife do Firefox .
Pierwszą cechą tego dodatku, który przydadzą się projektanci, jest menu CSS . Funkcje tego menu obejmują możliwość wyłączania stylów, wyświetlania CSS według typu mediów, widoku CSS, przeglądania informacji o stylu, dodawania niestandardowego arkusza stylów użytkownika lub bezpośredniej edycji CSS .
Kolejną cechą interesującą projektantów jest menu Obraz . Oprócz wyświetlania atrybutów ALT, wymiarów obrazu, rozmiarów plików obrazów i ścieżek obrazów, można wyłączyć obrazy, znaleźć uszkodzone obrazy, obrazy konturowe, zastąpić obrazy atrybutami ALT i kilkoma dodatkowymi funkcjami.
Chociaż mogłem poświęcić kilka stron wszystkim funkcjom oferowanym przez ten dodatek, chcę po prostu dotknąć kilku innych funkcji, które projektanci stron internetowych uznają za szczególnie użyteczne. Obejmują one możliwość zarysowania różnych elementów (od klatek po elementy blokowe), edycję HTML i pokazywanie ukrytych elementów .
Firebug
Podczas gdy Web Developer to pierwszy dodatek polecam każdemu projektantowi, Firebug zajmuje drugie miejsce pod względem użyteczności dla projektantów.
Dzięki Firebug natychmiast otrzymujesz możliwość edytowania, debugowania lub monitorowania dowolnej strony internetowej . Firebug zapewnia pełną kontrolę nad CSS, HTML i JavaScriptem dowolnej strony. Co najważniejsze, każda zmiana, którą wprowadzasz, odbywa się na żywo i natychmiast , dzięki czemu możesz szybko przetestować różne zmiany i natychmiast zobaczyć wyniki tych zmian.
Podobnie jak większość najlepszych dodatków do Firefoksa, Firebug wykracza poza swoją podstawową funkcjonalność i zapewnia bogactwo opcji, które ułatwiają każdemu użytkownikowi całkowitą personalizację korzystania z tego dodatku. Niektóre dodatkowe funkcje i opcje oferowane przez Firebug obejmują skróty klawiaturowe, możliwość kontrolowania sposobu i miejsca wyświetlania obszaru edycji Firebug, wizualne przewodniki do edycji CSS, analizę aktywności sieci i konfigurowalne rejestrowanie dla JavaScript .
Colorzilla
Jako projektant stron internetowych nigdy nie wiesz, kiedy natkniesz się na inspirację podczas surfowania po Internecie. Na przykład możesz przeglądać witrynę i znaleźć kolor, który naprawdę Ci się podoba.
Jeśli chcesz szybko i sprawnie znaleźć dokładną wartość HSV i RGB dla tego narzędzia, powinieneś zainstalować ColorZilla dodatek.
Dodatek ColorZilla wyposażony jest w kroplomierz internetowy , dzięki któremu można łatwo uzyskać dokładną wartość określonego koloru. Oprócz kroplomierza online, ColorZilla oferuje kilka dodatkowych funkcji, które większość projektantów stron internetowych uzna za użyteczne, takie jak analizator kolorów DOM i przeglądarka palet online . Analizator kolorów DOM pozwala zlokalizować elementy na stronie, które odpowiadają danemu kolorowi i dowiedzieć się reguł CSS, które określają określony kolor, podczas gdy przeglądarka palety online pozwala zakładki i udostępniać palety kolorów, które lubisz.
FireShot
Chociaż twój system operacyjny ma niewątpliwie wbudowaną funkcję przechwytywania ekranu, nie oznacza to, że domyślne przechwytywanie ekranu ma wszystkie potrzebne funkcje.
Na przykład, czy domyślne przechwytywanie ekranu z części OS można pobrać na stronie internetowej, która znajduje się poza oknem przeglądarki?
W większości przypadków odpowiedź na to pytanie brzmi "nie". Na szczęście istnieje dodatek do Firefoksa, który oferuje tę funkcję wraz z szeregiem innych użytecznych funkcji.
FireShot jest zaawansowanym dodatkiem do przechwytywania ekranu dla Firefoksa . Oprócz możliwości przechwytywania całej strony internetowej (nawet jeśli istnieją części strony, które nie są widoczne z powodu ograniczeń w oknie przeglądarki), FireShot pozwala również dodawać adnotacje bezpośrednio do zrzuty ekranu.
FireShot oferuje kilka opcji obsługi zrzutów ekranu. Nie tylko można je zapisać w różnych formatach plików, ale można je również zapisać na komputerze, wysłać pocztą e-mail do innych osób lub zapisać na bezpłatnym serwerze hostingowym FireShot. Dzięki szerokiej gamie funkcji, ten dodatek przyciągnął ponad sto pięćdziesiąt tysięcy aktywnych użytkowników i okazał się być nieoceniony dla projektantów stron internetowych i innych profesjonalistów internetowych.
CSS Validator / HTML Validator
Jako projektant chcesz mieć pewność, że cała Twoja ciężka praca będzie łatwo dostępna dla odwiedzających i wyświetlona im prawidłowo. Jednym z najprostszych sposobów zapewnienia wykonania obu tych zadań jest sprawdzenie poprawności całego kodu .
Chociaż są to dwa osobne dodatki, zarówno Validator CSS , jak i HTML Validator powinny zostać zainstalowane w przeglądarce dowolnego projektanta stron internetowych. Po zainstalowaniu dodatków, CSS Validator można uzyskać dostęp z menu Narzędzia, a do sprawdzania poprawności kodu HTML można uzyskać dostęp z paska stanu przeglądarki Firefox.
Każdy z dodatków potwierdza kod zgodnie z odpowiednimi standardami W3C . Podczas gdy walidator CSS po prostu wykonuje standardową walidację kodu, walidator HTML zapewnia dodatkową funkcjonalność.
Korzystając z walidatora HTML, możesz sprawdzić poprawność bezpośrednio w przeglądarce (gdzie wszelkie błędy są wyświetlane jako ikona paska stanu), pokazać źródło z objaśnieniami błędów po sprawdzeniu poprawności lub sprawdzeniu poprawności proponowanych rozwiązań dla wszelkich błędów.
Okno przeglądarki Resizer
Jako osoba, która tworzy projekty internetowe, jednym z najbardziej frustrujących problemów, z którymi się zetkniesz, jest próba stworzenia projektów, które działają na różnych ekranach.
Ponieważ nie wiesz, czy użytkownik będzie oglądał Twoją pracę z rozdzielczością 640 × 480, 800 × 600, 1024 × 768, 1280 × 1024 lub 1600 × 1200, Twoim obowiązkiem jest tworzenie projektów, które działają we wszystkich tych rozdzielczościach. .
Chociaż istnieje wiele sposobów wyświetlania pracy w różnych rozdzielczościach, odkryłem, że przeglądarka Dodatek do okna Resizer jest najbardziej wydajnym sposobem na wykonanie tego zadania. Po pobraniu i zainstalowaniu tego dodatku będzie można błyskawicznie zmienić rozmiar okna przeglądarki na jeden ze standardowych rozmiarów rozdzielczości wymienionych powyżej.
Pozwoli to sprawdzić, czy Twój projekt będzie dobrze wyglądać dla użytkowników, którzy nie używają tej samej rozdzielczości co Ty. Najlepszą rzeczą w tym dodatku jest to, że jeśli używasz go w połączeniu z innymi dodatkami z tej listy (w szczególności Firebug), gdy zobaczysz, że coś nie wyświetla się poprawnie, możesz natychmiast wprowadzić poprawki do swojego kodu i zobacz, czy to rozwiąże problem, a wszystko to bez opuszczania twojego bieżącego okna przeglądarki.
Znasz jakieś inne dobre rozszerzenia dla projektantów? Możesz komentować i zostawić nam swoją opinię.