× Aktuálně z oboru

Vychází Game Ready ovladače pro Far Cry 5 [ clanek/2018040603-vychazi-game-ready-ovladace-pro-far-cry-5/ ]
Celá zprávička [ clanek/2018040603-vychazi-game-ready-ovladace-pro-far-cry-5/ ]

Užitečné nástroje pro tvorbu webu a webových aplikací

[ http://programujte.com/profil/1483-lukas-chury/ ]Google [ https://plus.google.com/101446994797551111026?rel=author ]       [ http://programujte.com/profil/14523-martin-simecek/ ]Google [ ?rel=author ]       2. 3. 2010       41 184×

Přehled užitečných nástrojů, které dokážou značně zjednodušit či zrychlit vývoj nebo pomoci při testování a návrhu webu nebo webové aplikace. Ukážeme si, co dokážou a jak je použít, aby nám zpříjemnily práci.

Všechny zde probrané nástroje existují jako rozšíření (doplňky) pro Firefox, který je pro vývoj webových aplikací - díky značnému množství doplňků - nejlepší. Pokud tedy používáte jiný výchozí prohlížeč, doporučuji si nainstalovat i Firefox [ http://www.mozilla.com/en-US/firefox/all.html ], který je dostupný jak pro operační systém Windows, tak i Linux či Max OS X. Některé nástroje již existují i pro jiné prohlížeče (Opera, Chrome), v takovém případě to bude zmíněno.

Web Developer

Rozšíření Web Developer od vývojáře Chrise Pedericka přidá do prohlížeče lištu s nástroji, která velmi usnadňuje jak vývoj webu, tak i jeho testování. Oblíbenost doplňku potvrzují i statistiky: téměř 15 miliónů stažení.

Podpora:

  • Firefox > 1.0
  • Opera má podobný nástroj WebDevToolbar [ http://operawiki.info/WebDevToolbar ], Chrome má Web Developer Tools [ https://chrome.google.com/extensions/detail/fbmlldeibipeppiabbdjajcneipfbocm ] a Internet Explorer Developer Toolbar [ http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en ]. S žádným nemám osobní zkušenost (pokud je používáte, podělte se v diskuzi).

Díky tomuto nástroji můžete:

  • zakázat na webu Javascript (a ověřit si tak funkčnost webu bez něj), barvy (color, background) nebo předávání refererů,
  • zákazat, prohlížet, vytvářet, editovat či mazat cookies,
  • zákázat či upravovat CSS,
  • komplexně ovládat formulářové prvky (změna metody odeslání POST > GET a naopak) a obrázky (zobrazení webu bez obrázků, zobrazení alt, title, velikostí…),
  • změnit velikost okna na obvyklá rozlišení jedním klikem (1024×768, 1280×1024…),
  • validovat HTML, CSS, feedy, odkazy a přístupnost, počet a výčet chyb v CSS a Javascriptu,
  • zjistit, jakým režimem je stránka vykreslena (dle platných standardů/kompatibilního módu).

Doporučuji vyzkoušet, doporučuje 11 z 10 vývojářů.

Stáhnout Web Developer pro Firefox [ https://addons.mozilla.org/cs/firefox/addon/60 ]

Firebug

Pomocí rozšíření Firebug můžete měnit cokoliv na stránce bez nutnosti obnovení (reloadu) a hned zhlédnout výsledek; můžete měnit HTML kód, CSS, Javascript, pozorovat co se kam posílá nebo zjistit všechny CSS vlastnosti konkrétního prvku na jeden klik. Více než 22 miliónů stažení.

Podpora:

  • Firefox > 1.5
  • Opera, Internet Explorer, Chrome a Safari mohou používat Firebug Lite [ http://getfirebug.com/firebuglite ].

Díky tomuto nástroji můžete:

  • jedním klikem na cílový prvek (obrázek, odstavec, input…) zjistit všechny vlastnosti CSS, které se na něj vztahují (i které se dědí), a přesné umístění ve zdrojovém kódu,
  • zobrazovat (a díky tomu ladit) chyby v Javascriptu, CSS, XML, XHR (Ajaxu), chyby sítě i chyby, které mají vliv na výkon,
  • komplexně procházet zdrojový kód (HTML) i CSS styly, Javascript a také jakékoliv volání (HTML, CSS, JS, XHR, obrázky, Flash),
  • zobrazit všechny poslané hlavičky při každém volání skriptu/obrázku…,
  • zjistit čas nutný ke stažení obrázku/skriptu…, zdali byl cachován a velikosti jednotlivých volaných objektů, vrácené stavy,
  • obzvláště dobré je sledování vrácených stavů, odezvy, poslaných hlaviček a předaných parametrů (hlavně u Ajaxu), čímž se dá dobře kontrolovat, zda se posílá, co má.

Firebug je povinnost každého vývojáře.

Stáhnout Firebug [ https://addons.mozilla.org/cs/firefox/addon/1843 ]

ColorZilla

ColorZilla umožňuje jedním klikem zjistit barvu jakéhokoliv pixelu ve Firefoxu, aniž byste ji složitě zjišťovali vložením screenu do grafického editoru.

Podpora:

  • Firefox > 1.5

Díky tomuto nástroji můžete:

  • vybrat barvu jakéhokoliv pixelu na stránce,
  • zjištěnou hodnotu automaticky kopírovat do schránky,
  • kopírovat barvu ve formátu #RRGGBB, rgb(RRR,GGG,BBB) a dalších.

ColorZilla velmi zpříjemňuje práci s barvami.

Stáhnout ColorZilla [ https://addons.mozilla.org/cs/firefox/addon/271 ]

MeasureIt

Pomocí rozšíření MeasureIt můžete tahem myši a vybráním oblasti ihned zjistit její rozměry, opět aniž byste kopírovali screen do grafického editoru, vše jedním klikem.

Podpora:

  • Firefox > 1.0

Díky tomuto nástroji můžete:

  • zjistit rozměry vybrané oblasti (v pixelech) nad jakoukoliv stránkou.

Pokud upravujete projekt po delší době, zjistíte tak jednoduše rozměry bloků či objektů.

Stáhnout MeasureIt [ https://addons.mozilla.org/cs/firefox/addon/539 ]

YSlow

Rozšíření YSlow analyzuje webovou stránku a doporučí, jak zvýšit výkon a stránku zoptimalizovat (dle doporučených pravidel Yahoo, které je autorem tohoto rozšíření).

Podpora:

  • Firefox > 3.0, je nutné mít nainstalovaný Firebug

Díky tomuto nástroji můžete:

  • zjistit, jak zoptimalizovat web tak, aby byl co nejvýkonnější, zjistit výkonnostní skóre,
  • zjistit chyby v obsahu, cookies, CSS, Javascriptu a obrázcích, jaký mají vliv na výkon webové aplikace a také další doporučení, jak nastavit server, aby bylo dosaženo lepších výsledků,
  • zhlédnout statistiky a počet HTTP requestů (jejich velikost, typ a cachování).

YSlow je dobrá věc na kontrolu projektů po úpravách či po finalizaci nového projektu. Je nutné mít nainstalovaný Firebug, protože se YSlow instaluje jako jeho rozšíření.

Stáhnout YSlow [ https://addons.mozilla.org/cs/firefox/addon/5369 ]

Jako poslední rozšíření doporučuji ColorfulTabs [ https://addons.mozilla.org/cs/firefox/addon/1368 ]. Nepomůže vám zvýšit výkon webové aplikace; jediné co dělá, je obarvování panelů. Každému panelu (webové stránce) je přiřazena automaticky barva, kterou se panel obarví a tím je lépe identifikovatelný. Barvu lze také navolit manuálně k webu. Praktickou výhodou pak je, že si např. web obarvíte žlutě, phpMyAdmin červeně atp., a pokud máte v jednu dobu otevřeno více panelů, díky barvám se mezi nimi můžete lépe orientovat.

Používáte-li další rozšíření, která mohou pomoci při vývoji webových aplikací, podělte se s námi o ně.


Článek stažen z webu Programujte.com [ http://programujte.com/clanek/2010022700-uzitecne-nastroje-pro-tvorbu-webu-a-webovych-aplikaci/ ].