Firefox to jedna z aplikacji, które trafiły w gusta szerokiej i różnorodnej grupy użytkowników. Dzięki systemowi rozszerzeń można go zmieniać i rozbudowywać tak, by służył zarówno sekretarkom jak i programistom, uczniom gimnazjum oraz... ich dziadkom. W poniższym artykule przyjrzymy się kilku rozszerzeniom dla Firefoksa, które z pewnością zainteresują osoby parające się webmasterką.
Postanowiliśmy przybliżyć Wam trzy bardzo ciekawe narzędzia - EditCSS (ułatwiające pracę z arkuszami stylów), HTML Validator (służące do sprawdzania zgodności stron ze standardami) oraz ColorZilla (ułatwiające dobieranie kolorów dla strony i pobieranie próbek z innych stron).

EditCSS

EditCSS jest rozszerzeniem ułatwiającym pracę z arkuszami stylów. Po jego instalacji w menu kontekstowym okna przeglądarki pojawi się opcja EditCSS wywołująca panel boczny (można go uruchomić również za pomocą kombinacji klawiszy [Ctrl]+[8]). W panelu pojawi się zawartość arkusza stylów otwartej w przeglądarce strony (o ile strona takowy posiada). Nie ma przy tym znaczenia, czy arkusz jest osadzony w dokumencie HTML, czy jest plikiem zewnętrznym, podczepionym pod ten dokument. Największą atrakcją w pracy z EditCSS jest jednak to, że tak wyświetlony arkusz można edytować, obserwując jednocześnie od razu zmiany w głównym oknie - na przykład zmiana koloru tła będzie widoczna zaraz po wprowadzeniu nowej wartości dla atrybutu background-color i zamknięciu jej średnikiem.

EditCSS Kliknij, aby powiększyćEditCSS

Oprócz modyfikowania istniejących arkuszy można również załadować wybranej stronie zupełnie inny arkusz i sprawdzić jak będzie ona wyglądać. EditCSS może się przydać nie tylko doświadczonym webmasterom, którzy pracują nad detalami wizualnymi swoich stron, ale również początkującym twórcom, którzy chcieliby się czegoś nauczyć oglądając cudze projekty. Warto przy pomocy tego rozszerzenia oglądać strony wykonane przez profesjonalistów, bo zmieniając w nich detale można lepiej zrozumieć mechanizmy działania arkuszy stylów.

Aktualna wersja EditCSS ma pewną drobną niedogodność - nie ładuje automatycznie zewnętrznych arkuszy stylów dla stron przechowywanych lokalnie na dysku. Nie jest to jednak istotny problem, bo zawsze można dowolny arkusz dla strony załadować poprzez menu Rozszerzenia. Przyjemnie byłoby również zobaczyć w kolejnych wersjach EditCSS mechanizm sprawdzający poprawność składniową arkusza stylów.

Więcej informacji: EditCSS.



Komentarze (29)

  • Abraxas
  • 2006-05-04 12:19:51

EditCSS, HTML Validator? Panowie przecież to wszystko i wiele więcej jest w składzie świetnego WebDeveloper Toolbar o którym nawet nie raczyliście wspomnieć.

  • zdzana
  • 2006-05-04 12:22:52

Dokładnie, WebDeveloper Toolbar ma to wszystko o wiele, naprawde wiele więcej, jest dodatkowo jedynym powodem mojej rezygnacji z Opery. Dodatek sam w sobie jest niesamowice pomocy przy projektowaniu jakiejkolwiek witryny.

  • nashaden
  • 2006-05-04 12:28:15

brakuje mi w tym spisie rozszerzenia 'Web Developer' (dostępne pod adresem: https://addons.mozilla.org/firefox/60/), które posiada m.in. funkcje (X)HTML i CSS validatora (przekazującą dane do validatorów W3C) i dziesiątki innych, których użyteczność jest nie do przecenienia dla webdeveloperów.

  • Abraxas
  • 2006-05-04 12:35:41

Cholera nie zauważyłem. chyba że teraz dopisali :) Ale tak czy siak opisywanie drobnicy i traktowanie po macoszemu najbardziej przydatnego narzędzia jest moim zdaniem niedopatrzeniem. No nic idę kury nakarmić.

  • Pix
  • 2006-05-04 12:35:56

Owszem ale powinni opisać WebDevloper bo to jest podstawowe narzędzie do pracy ze stronami - może to i jest kombajn ale znacznie bardziej ułatwia życie niż te opisane dodatki. A jego obsługa nie jest skomplikowana i szybko znajduje się potrzebne funkcje. W większości wypadków wystarczy mieć WebDevlopera i HTMLValidator żeby spokojnie pracować.

  • Jerzy Śrót
  • 2006-05-04 12:49:32

Zauważyłem, że nie wspomniano o WebDeveloper, które ma wszystko, co mają inne rozszerzenia i jest niezwykle pomocny przy tworzeniu stron internetowych.

  • darek
  • 2006-05-04 14:04:33

"O tym, że warto pisać kod HTML-owy zgodnie ze specyfikacją, nie trzeba chyba nikogo przekonywać" W takim razie musicie przekonać swojego głównego webmastera, bo strona pcworld.pl ma tyle błędów, że aż strach. Pod Operą często wszystko źle wygląda. P.S. Mogliście wspomnieć o rewelacyjnym WebDeveloper. <żart>

  • zdzana
  • 2006-05-04 14:18:01

Fragment mówiący o WebDeveloper Toolbar dopisano po pierwszych komentarzach :D ....

  • JeZZoo
  • 2006-05-04 14:21:43

@zdzana: co do WebDevelopera dla opery to proszę ;) wiele zbliżonych funkcjonalności z dodatkiem FF http://nontroppo.org/wiki/WebDevToolbar

  • Redakcja
  • 2006-05-04 14:45:45

Szanowna (Szanowny?) zdzana - akapit zawierający informację o WebDeveloper znajdował się w tekście od początku. Treść artykułu nie była w żaden sposób modyfikowana po jego opublikowaniu. Będziemy wdzięczni za powstrzymanie się od wygłaszania nieprawdziwych zarzutów.

  • solo/ng
  • 2006-05-04 14:49:18

ffox ma inna genialna rzecz - XULa, piszac soft pod FFoxa i XULa mozna robic naprawde swietny interface. polecam:)

  • Gość
  • 2006-05-04 15:11:31

Przeglądarka, jak sama nazwa mówi, służy do przeglądania a nie tworzenia stron www. Każdy normalny webmaster korzysta z programów do tego przeznaczonych. Powoli dochodzimy do tego, że Firefox stanie się całym systemem operacyjnym.

  • JeZZoo
  • 2006-05-04 16:19:18

@Gość: Bez przesady, nie systemem operacyjnym, ale wydajnym narzędziem, które pozwoli wykorzystywać funkcjonalność tym, którzy mają na to ochotę, na tym właśnie polega budowa FF, nie chcesz- nie korzystasz. Ja do swoich potrzeb wybrałem Operę, bo nie musze szukać rozszerzeń. Każdemu według potrzeb ;)

  • MM
  • 2006-05-04 19:26:12

"O tym, że warto pisać kod HTML-owy zgodnie ze specyfikacją, nie trzeba chyba nikogo przekonywać." Panie Witoldzie, czy mógłby Pan skomentować to, co znajduje się pod poniższym linkiem? Czekamy z niecierpliwością! http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pcworld.pl%2Fnews%2F92698_2.html

  • W. Kiera¶
  • 2006-05-04 19:53:28

@MM: Przykro mi, ja nie mam wpływu na kształt strony PCWorld, ja tu tylko co jakiś czas piszę teksty. Osobiście uważam, że strony powinno się pisać poprawnie, uważam to za oczywiste i staram się propagować, ale nikogo zmusić do tego nie mogę. Szczerze powiedziawszy, to nawet miałem nadzieję, że ktoś zwróci uwagę na to zdanie. :)

  • Pix
  • 2006-05-04 21:04:15

<BR>Panie</WBR><WBR> Witoldzie,</WBR><WBR> czy</WBR><WBR> mógłby</WBR><WBR> Pan</WBR><WBR> skomentować</WBR> Kawałek kodu - czy ktoś może mnie oświecić co to za znacznik <WBR>??? Nie jest akceptowany przez W3C, ale rozpoznawalny przez IE i Mozillę. I dlaczego każde słowo jest w tym znaczniku??? Co do kodu to nie jest tak źle - "tylko" 792 ostrzerzenia (większość dotyczy <WBR></WBR>) i 0 błędów.

  • mad_man
  • 2006-05-04 21:42:54

heh ja nic nie mowie, fakt ff ma fajne wtyczki ktore ulatwiaja prace z www, ale jesli chodzi o zgodnsc z cssami to niestety ffowi duuzo brakuje, zobaczcie sobie porownanie przegladarek pod wzgledem testu acid2 na osiolkach, to mowi samo za siebie

  • west28
  • 2006-05-04 22:16:30

o ilości błędów pcwk nie będe się wypowiadał ale jeśli chodzi o HTML Validator to tylko niepotrzebnie podniósł mi ciśnienie. Otóż wtyczce tej brakuje jeszcze troszeczkę do prawidłowej analizy kodu strony.... pozdrawiam

  • ms
  • 2006-05-05 00:23:32

mad_man: Acid 2 to nie jest cały CSS, to tylko jego ułamek. Opera nie ma np. opacity i automatycznych kolumn, które ma Firefox. Tylko tego akurat Acid 2 nie sprawdza.

  • tomek
  • 2006-05-05 00:24:59

Pix o znacznkiu WBR możesz dowiedzieć się więcej na stronie http://webmaster.helion.pl/kurshtml/bloki/bloki.htm. Na samym dole znajduje się jego wytłumaczenie. PS od dawna zajmuje się html-elem i także nie spotkałem się z tym znacznikiem na żadnej stronie poza tą.

  • Pix
  • 2006-05-05 05:53:47

Dzięki W takim razie tu jest zastosowana niepotrzebnie - brak znacznika <nobr></nobr>. No i po co zamykać </WBR> przy html4???? Chyba że IE miał problemy z wyświetleniem strony.

  • mad_man
  • 2006-05-05 09:45:53

@ms, ee chyba Ci sie cusik pomylilo bo u mnie opera lyka opacity, a automatyczne kolumny, hmm nie wiem jakby to mialo wygladac to jest raz, a dwa obecnie sie juz nie stosuje tabelek...!!!

  • nashaden
  • 2006-05-05 10:12:56

<wbr> to pozostałość po HTML3.0 i Netscape 6.x. Jesli tekst wstawimy pomiędzy <nobr></nobr> (również tag specyficzny dla HTML3.0 i Netscape poniżej 6.x) oznacza, iż niemoże on być łamany; wstawienie <wbr> daje taką możliwość, np. <nobr>Lorem ipsum dolor sit amet,<wbr> consectetuer adipiscing elit.</nobr>Od wersji Netscape 6.x nie supportowany przez ta przeglądarkę, oraz przez te oparte na Gecko, co do IE i Opery to nie jestem pewien.

  • MM
  • 2006-05-05 10:14:33

@ mad_man: automatyczne kolumny, o których pisze ms nie mają z tabelami nic wspólnego.

  • solo/ng
  • 2006-05-05 12:44:45

co do w3c i kodu - dajcie sobie spokoj, tamten test BYL dobry, jak stronki tworzylo sie w jakichs wysiwygach. Obecnie jak mamy kod oddzielony od tresci a jakis pomost pluje w pehapie (lub xlst) htmlem, kto w ogole zawraca sobie glowe takimi archaimzami jak np. ALT w tagu IMG? to 2006 rok a nie 1996, w3c powinno znacznie zmienic zasady, bo obecnie praktycznie nikt sie ich nie trzyma, bo sa archainczne.

  • mazdac
  • 2006-05-05 13:30:36

solo wierz mi jeszcze korzysta się z przeglądarek tekstowych, element alt jest również przydatny jeśli korzysta sie z przegladarki dla niewidomych, w3c dobrze robi 'czepiajac' sie tych błachych zdawałoby się elementów gdyż to one decydują o dostępności internetu dla wszystkich, nie tylko tych pełnosprawnych i posiadających tryb graficzny.

  • Kali
  • 2006-05-05 13:44:13

@solo: Pierniczysz wasc. ALT to wspaniala pozywka dla Google'a np. Wiele innych podobnych, blachych z pozoru, wymogow wspaniale udostepnia strony m.in. "najwiekszemu slepcowi" jakim jest wlasnie Google. Poza tym wlasnie przy pomocy skryptow bardzo latwo zadbac o taka dostepnosc. Co do WYSYWIGOW, o ktorych piszesz, to zupelnie nie rozumiem o co Ci chodzi. Chyba nie do konca wiesz o czym piszesz.

  • jaq
  • 2006-05-05 20:27:19

po pierwsze nie rozumiem po co ten artykul powstal. TRZY STRONY O NICZYM!!! jesli juz o narzediu webmajsterskim pod FF to trzeba bylo wlasnie o WebDeveloper napisac, a nie o tych wypierdkowatych rozszerzeniach "wysylanie do odleglych serverow w3c" - no smiechu warte, te 10-50 kb zabija nasze lacze!!! nie walidujcie przez w3c bu hahaha solo: Kali ma racje, co ty w ogole bredzisz, po pierwsze zapomnijmy o html i mowmy o xhtml (ktory juz od ok. 6 lat powninien byc standardem, ale jak sie dzieci biora za produkcje stron to tak jest ze eksperci swoje a ludki swoje) po drugie wlasnie m.in. takie dodatkowe atrybuty jak alt, title etc. moga przekazac dodatkowa porcej informacji, czy to robocikowi, czy to wlasnie niewidomemu do autora: moze tak o mozliwosciach rozszerzania Opery, ja po Opera mam pasek z ta sama funkcjonalnoscia co WebDeveloper pod FF, ale o takich bajerach malo kto wie, a Opera jest lepsza, nie wszysto co open source najlepsze

  • Speco
  • 2006-05-06 00:45:09

jaq ma racje, artykul mija sie z tematem, dobre jest to, ze ktos poruszyl taki temat. jednym z najlepszych narzedzi jest dodatek Web Developer. od siebie dorzuce, ze warto sprawdzic takze IE Tab - pozwala pod FF ogladac strony przepuszczone przez engine IE.

reklama

Popularne produkty

Nokaut

PC World z prezentem!

Tak, zamawiam 12 wydań PC World po 14,09 zł każde (zamiast 19,90 zł) od numeru 6/2012.
Dodatkowo program Panda Antyvirus Pro 2012,
chroniący aż 3 komputery, dostanę za darmo.

PC World 6/2012
Nowy numer PC World 6/2011
Razem: 169


  • Z darmową wysyłką
Wyrażam zgodę na wykorzystywanie mojego adresu email do celów marketingowych. rozwiń »

Pobierz bezpłatnego e-booka

20 lat polskiej sieci
Ebook 20 lat polskiej sieci to kompletna charakterystyka polskiego internetu (oraz polskiego internauty). Odpowiadamy na pytanie, jak wygląda nasz kraj na tle bliższych i dalszych europejskich sąsiadów pod względem popularyzacji szerokopasmowych łączy internetowych i rynku mobilnego. Wymieniamy również wady i zalety korzystania z bezpłatnych punktów dostępowych.
Jeśli chcesz otrzymać darmowego e-booka, wpisz swój adres e-mail. Wyślemy Ci go natychmiast!
Wyrażam zgodę na wykorzystywanie mojego adresu email do celów marketingowych. rozwiń »

  Kariera w IT 2012

Kariera w IT 2012
Uczelnie, rynek pracy, rekrutacja, pracodawcy, rozwój zawodowy - czyli wszystko, co chcielibyście wiedzieć o pracy specjalistów IT w Polsce. Piszemy jakie uczelnie wybrać, dlaczego warto studiować informatykę i kierunki techniczne, jak wygląda proces rekrutacji i jak dobrze wypaść przed pracodawcą, opisujemy pracodawców - firmy IT - i możliwe ścieżki kariery.

  Rekomendacje

reklama
Warunki obsługi - Kontakt - Regulamin - Polityka prywatności
Serwis zgodny z ASME - Serwisy IDG - Reklama -

Prenumerata: PC World, Computerworld, Networld
© Copyright 2012 International Data Group Poland S.A.
04-204 Warszawa ul. Jordanowska 12
tel.(+4822)321-78-00   fax(+4822)321-78-88
Archiwum wiadomości: 2011 2010 2009 2008 2007 2006 2005 2004 2003 2002 2001