depi.sk – svet očami Erika Gyepesa

Firefox rozšírenia pre tvorbu webových stránok

Ako veľký fanúšik prehliadača Firefox by som vám mohol veľa rozprávať prečo je lepším a vhodnejším prehliadačom pre každého, ale dnes sa sústredím na vývoj webových stránok. Pre vývojárov, ktorý sa riadia štandardami je Firefox nenahraditeľným nástrojom.

Úspešná tvorba web stránok si vyžaduje veľa tweakingu, ktorý vo väčšine prípadoch vyžaduje množstvo okružných jázd medzi prehliadačom, grafickým a vaším XHTML/CSS editorom. Firefox však prichádza so širokým výberom rozšírení. Niektoré z týchto rozšírení sú užitočné pre testovanie a validovania Vašich web stránok.

**Všeobecná rada:** Skôr ako začneme. Ak je to možné sťahujte rozšírenia priamo z ich oficiálnych (vývojárskych) stránok. Tie sú väčšinou aktualizované skôr ako na stránkach Firefox Add-ons. Každé zo spomenutých rozšírení funguje vo Firefoxe 1.5.0.3 a novšom.

– “Web developer”:http://chrispederick.com/work/webdeveloper/ – Jednoznačne najužitočnejšie rozšírenie pre tvorbu web stránok vo Firefoxe. Tento toolbar je plný užitočných testovacích nástrojov. Dokáže ohraničiť elementy stránok, zobraziť veľkosť obrázkov, zobraziť CSS a dáta formulárov, vypnúť niektoré elementy na stránke a pod. Dokáže toho naozaj oveľa viac ako by som mohol vysvetliť v tomto článku.

– “Aardvark”:http://www.karmatics.com/aardvark/ – Ste unudení z používania: border: 1px solid #000; pre debugovanie podivného chovania CSS? I keď toto rozšírenie neodstraňuje celkovo tento border trik, určite napomôže. Aardvark Vám umožňuje zviditeľniť okraj okolo blokov a zobraziť id/class práve označeného bloku. Taktiež umožňuje vďaka niektorím klávesovým skratkám robiť rôzne veci, ako napríklad vymazať vybraný element zo stránky, izolovať element, alebo posunúť selektívny rámček na vonkajší element (blok) okolo vybraného elementu. Takže, kým Web developer je najnutnejším nástrojom, Aardvark je ten, ktorý budete najviac používať.

– “Colorzilla”:http://www.iosart.com/firefox/colorzilla/index.html – Je nástroj “kvapátko” pre výber farby a testovanie. Postavením sa nad element zobrazuje informácie o farbe, DOM, X a Y súradnice predchádzajúceho kliknutia.

– “Fang”:http://www.standards-schmandards.com/index.php?show/fangs – Toto rozšírenie urobí textovú verziu stránky, ktorá je podobná stránke, ktorú by prečítal moderný screen reader.

– “Link Checker”:http://www.kevinfreitas.net/extensions/linkchecker/ – Tento link checker otestuje odkazy na web stránke a farebne ich oddelí (podľa funkčnosti).

– “Measure It”:http://www.kevinfreitas.net/extensions/measureit/ – Vám umožňuje odmerať šírku a výšku alebo umiestnenie akéhokoľvek elementu na stránke. Odteraz už nebudete musieť robiť screenshoty stránok a vkladať ich do Photoshopu alebo Fireworksu, aby ste zistili koľko má element pixelov.

– “Screen Grab”:http://andy.5263.org/?page_id=5 – Uloží web stránku tak, že scroluje a ukladá obrázky, ktoré nakoniec zlepí dokopy. Takto získate plný screenshot vašej stránky.

– “IE View”:http://ieview.mozdev.org/ – Chvíľami narazíte na stránku, ktorá vyžaduje Internet Explorer, alebo len proste v ňom lepšie vyzerá. Toto rozšírenie umožňuje otvoriť aktuálnu stránku alebo vybraný link v Internet Exploreri. Poznámka: Rozšírenie “IT Tab”:https://addons.mozilla.org/firefox/1419/ umožňuje prehliadať stránku v separátnej záložke takže nemusíte dokonca ani opúšťať prostredie Firefoxu.

– “Fire FTP”:https://addons.mozilla.org/extensions/moreinfo.php?id=684&application=firefox – FireFTP je bezplatný FTP klient pre Mozilla Firefox, ktorý poskytuje FTP aj SFTP (bezpečný) prístup na servery. Nemá síce toľko možností ako napríklad WS FTP, ale poslúži veľmi dobre.

– “HTML Validator”:http://users.skynet.be/mgueury/mozilla/ – Toto rozšírenie je založené na známom “HTML tidy”:http://tidy.sourceforge.net/ programe. Pridáva validáciu stránok priamo do prehliadača zdrojového kódu vo Firefoxe.

– “Firebug”:http://www.joehewitt.com/software/firebug/ – Kombinuje veľa funkcií z Aardvarku a je skvelým nástrojom pre prácu s DOM a XMLHttpRequest objektami.

– “BONUS: Del.icio.us”:https://addons.mozilla.org/firefox/1532/ – Nie je nevyhnutný pre vývoj web stránok, ale hladko integruje všetko čo potrebujete pre používanie Del.icio.us priamo vo Firefoxe.

*Tento článok je voľným prekladom článku “Firefox Extensions For Web Development”:http://www.themoleskin.com/archives/10-firefox-extensions-for-web-development/, uverejnený s písomným súhlasom autora. Je vydaný pod “Creative Commons licenciou”:http://creativecommons.org/licenses/by-nc-nd/2.5/*.

Prihlás sa na odber zaujímavých informácií e-mailom

* povinné polia
  • http://faster.sk faster

    Uf, akoze, parada, ale z tolkymi rozsireniami do FF by mi jeho beh zral viacej systemovych prostriedkov ako X server. Vlastne to mi zabera uz aj teraz. Takze, vsetko je to velmi pekne, ale v praxi tomu velu sancu nedavam. Teraz mam vo svojom FF mouse gestures, all in one sidebar, firebug, pocasie, page rank a fasterfox. To je tusim skoro vsetko a uz to asi ani nemienim rozsirovat. Aj ked naozaj je co pridavat.

  • http://www.prievan.sk Jozef Benko

    Ja by som sa pristavil pri rozšírení IE View, resp. IE Tab. Z článku vyplynulo, že sa jedná o webdeveloperské extensions. Ale pri tomto rozšírení je uvedené len “konzumentské” použitie.

    Toto rozšírenie by som skôr používal na ladenie stránok (napríklad odlišný boxmodel a podobe).

    A mám na to podobný názor ako faster. Nenechám si vziať výhodu FF, pre ktorú nepoužívam Operu – nároky na systémové prostriedky.

  • http://www.depi.sk Erik Gyepes

    **Jozef Benko:** hej z clanku to vyplynulo skor tak, ale samozrejme webdeveloper oceni taketo rozsirenie kedze nemusi IE spustat zvlast, len sa medzi nim prepne

    Inak je pravda, ze niektore rozsirenia “zeru” dost pamate, ale to uz zalezi od konkretneho rozsirenia, kazdy vsak nepotrebuje mat FTP klienta, Screen Grab alebo Measure It v prehliadaci, su to len tipy a kazdy si z toho moze vybrat to co by vedel najlepsie vyuzit. Minimalne vsak Web Developer by som odporucil, lebo je naozaj sikovnym pomocnikom.

  • http://www.slancik.net Michal Slančík

    Webdeveloper a ColorZilla su povinnostou :)

  • http://vano.wms.sk miro

    ten ie view neni zly… pokial zobrazuje presne ako ie tak si asi dam znovu ie 7 beta a budem pouzivat tento plugin. Lebo koli optimalizacii stranok som nemohol mat nainstalovany IE7 a som si ho musel odynstalovat.
    Dik za tip

  • http://vano.wms.sk miro

    no tak nic som si myslel ze ten ie view bude neco ako mal netscape ktory bez ie vedel zobrazit stranku ako ie a tak by som nemusel mat nainstalovany ie6. no tak nic…

  • http://www.depi.sk Erik Gyepes

    **miro:** toto rozsirenie funguje tak, ze spusti IE priamo z firefoxu, teda ho zahrnie do jeho uzivatelskeho rozhrania, cize je jedno aky IE budes mat nainstalovany, zahrnie vzdy ten, ktory mas. Ale inak je to velmi dobra pomocka, nemusis mat otvorenych tolko okien, este by sa zislo nieco podobne aj pre operu :)

  • rony

    *Aadvark:* čo má naviac? Webdeveloper túto funkciu obsahuje? (to je otázka, nie výčitka – nemám aadvark a možno má nejakú vlastnosť, ktorú ocením).

    *Colorzilla:* webdeveloper vie vytiahnuť zoznam použitých farieb v stránke a zobrazí to ako štvorce s vypísaným kódom farby. Povel View Color Information.

    *Measure It:* skús zvisle a vodorovne ciary cez stranku (Display Guidelines) zobrazuje zasa Webdeveloper alebo Display Ruler zobrazi krizik, klikneš ľavým a pridržíš ho. Ťaháš myš a kreslí štvoruholník a zobrazuje zároveň rozmery.

    Jediná škoda, že lišta Webdevelopera nemá nejaké tlačítko na jej rýchle skrytie a zobrazenie.

    Aby som bol spravodlivý: pozrel som si stránku Aadvark a jedna z výhod pri zobrazovaní rámika okolo boxov je, že sa nerozíde layout stránky, čo je u Webdevelopera nevyhnutné.

  • http://www.slancik.net Michal Slančík

    **rony**: Kukám, že vďaka tebe môžem odinštalovať ďalšie rozšírenie FF. O tej funkcii View Color Information som nevedel :) Nj, tie najnovšie verzie Webdevelopera som už tak podrobne neskúmal …

  • http://www.depi.sk Erik Gyepes

    Nj **rony** ma pravdu, ja som o pravitku a farbach vedel, ale Web developer ti vypise len farby z kodu stranky, resp. z CSSka, ColorZilla dokaze zistit akukolvek farbu – aj z obrazku a mne sa prave toto niekedy zide.
    U aadvarku sa mia paci moznost vyfarbenia celeho bloku, pripadne jeho uplneho “vystrihnutia” zo stranky. Najma to vyfarbenie sa niekedy velmi zide, nemusim tak pouzivat background-color v CSS.

  • http://www.ambience.sk dusoft

    je to aardvark, nie aadvark.

  • http://www.depi.sk Erik Gyepes

    **dusoft:** fixnute, diky za upozornenie