Masivní kompilace návrhářských nástrojů
Weboví návrháři mají k dispozici velké množství nástrojů, protože dělají vše od organizování svých myšlenek o konkrétním návrhu až po ladění konečného návrhu.
Ale s tak velkým množstvím nástrojů, jak zjistíte, které z nich jsou opravdu užitečné a které z nich prostě ztratí čas?
Zkompilovali jsme obrovský seznam nejlepších a nejužitečnějších nástrojů pro webové designéry .
Úkolem je vynechat seznam běžných nástrojů, které většina návrhářů pravděpodobně již používá (například Dreamweaver nebo Panic's Coda, Photoshop nebo GIMP a podobné běžné softwarové programy, které už má ve svém toolkitu téměř každý návrhář).
Jedná se o nástroje, které vám ušetří čas, zvýší efektivitu návrháře, zjednoduší nebo urychlí proces návrhu nebo jinak usnadní váš život.
Kompilace nástrojů offline
Většina užitečných nástrojů pro tvorbu webových stránek se zaměřuje pouze na online nástroje.
Existuje však několik velmi užitečných nástrojů, které můžete využít k tomu, abyste otevřeli své možnosti, pokud jde o design. Tyto věci mohou usnadnit některé úkoly, včetně práce s nerozhodnými klienty.
Grafické tablety
Grafické tablety (také někdy označované jako kreslící tablety, grafické podložky nebo digitalizační tablety) jsou neuvěřitelně užitečným nástrojem v arzenálu webdesignera. Zatímco většina návrhářů může s myšou kreslit docela obratně, tabletka je mnohem jednodušší a rychlejší.
Většina tablet obsahuje dvě základní části: samotnou tabletu a pero (nebo stylus). Mnozí také přicházejí s pukem (který pracuje podobně jako myš, ale na samotné tabletě namísto podložky pod myš nebo stolu). Hlavním aspektem tablet je velikost, zatímco pero je hlavním zvážením citlivosti na tlak.
Samotné tablety jsou dostupné v rozměrech od 4 "x 5" do 19 "x 13". Samozřejmě, čím větší je tableta, tím dražší bude. Většina webových designérů může dostat pryč s tabletami na menším konci spektra, pokud nehodlá dělat hodně práce s ilustracemi (a dokonce i tehdy je zcela možné získat kvalitní výsledky z tablet střední velikosti).
A menší tablety jsou mnohem přenosnější, což je vhodné pro designéry, kteří nechtějí vždy být svázáni s psacím stolem.
Pera jsou citlivá na tlak, aby poskytly realističtější zážitek . Společné citlivosti se pohybují od 256 úrovní tlaku až po 2 048 úrovní. Čím vyšší je citlivost, tím více bude mít pocit, že používáte pero a papír.
Oblíbené grafické tablety
Wacom je pravděpodobně nejoblíbenější výrobce tablet. Mají čtyři různé produktové řady: Bambus (který zahrnuje výrobky Bamboo Craft a Bamboo Fun), zaměřené na spotřebitele a fandy; Graphire, jejich tablet Bluetooth; Intuos, jejich středová řada pro kreativní profesionály; a Cintiq, jejich high-end řadu, která obsahuje monitor do tabletu pro "pero na obrazovce" (jeden dokonce obsahuje 21 "obrazovku).
Aiptek dělá řadu nízkorozpočtových tablet, které začínají na pouhých 50 USD. Nabízejí tablety o rozměrech 12,1 "pro USB méně než 130 USD (ve srovnání s US $ 469 za tablet Wacom srovnatelné velikosti). Aiptek je nejzajímavější nabídka, ale je jejich My Note Premium (US $ 170), který vám umožní čerpat kus papíru na horní části tabletu se skutečným perem a zaznamenává vše, co děláte. Existuje dostatek paměti pro až 100 písemných stránek a je dodávána se zásuvkou pro kartu SD pro rozšíření kapacity. A chcete-li jej používat jen při psaní poznámek na schůzce, může být zbavena 4 AAA baterií, což znamená, že nebudete muset přenést váš notebook spolu s vámi.
UC-Logic je další hlavní výrobce grafických tablet. Jejich produkty spadají do středních cen tabulek, přičemž tablet 9 "x12" (PF1209-Pro) přichází kolem 250 USD. Disponují tablety, které začínají pouze za 40 USD.
Mood Boards
Nástěnné tabule (také nazývané inspirační desky) jsou skvělým nástrojem pro designéry, kteří pracují s klienty, kteří nemusí mít jasnou představu o tom, co chtějí.
Nástěnné tabule často mají formu koláže, která obsahuje prvky návrhu projektu. Příklady zahrnutých prvků mohou být typografické vzorky, barevné schémata, konkrétní grafické příklady nebo obecné prvky "nálady", které odrážejí vizi návrháře, pokud jde o dojem, který by měl návštěvníkům poskytnout.
Nástěnné desky se často používají v interiérovém designu, aby ukázaly klientům nápady pro rekonstrukci místnosti nebo celého domu. Používají se také v módním průmyslu, aby sloužily jako inspirace a směřování pro linii nebo sezónu. Ale jsou stejně cenné pro grafické a webové designéry.
V závislosti na typu klienta, s nímž pracujete, můžete vytvořit volnou koláž se vzorky překrývajícími se organickým způsobem . Pokud je váš klient v kreativní oblasti nebo je obeznámen s tvůrčím procesem, může tento druh nálady fungovat celkem dobře.
Pokud je váš klient na druhé straně zvyklý na podnikové nebo formální prostředí, je pravděpodobně vhodnější vytvořit organizovanější nástěnnou tabuli.
Použijte záhlaví, abyste oddělili barevné schéma, specifické prvky návrhu, typografii a další součásti vaší náladové desky, aby celou věc získali nějakou strukturu.
Máte-li několik nápadů na pokyny, ve kterých může projekt jít, vytváření několika různých tabulek nálady může být skvělým způsobem, jak získat zpětnou vazbu od zákazníků a dále upřesnit vlastní nápady.
Vytvoření dvou nebo tří různých příkladů pro zobrazení klienta může být cenné pro získání dalšího směru od vašeho klienta, aniž byste museli trávit hodiny nebo dny na skutečném maketu webu, jen aby vám bylo řečeno, že to není nic, co hledají.
A to je opravdu hlavní výhodou použití náladových tabulek ve vašem návrhu. Nálada obecně trvá mnohem méně času na vytvoření než maketa místa .
Použití tabulek s náladami, abyste získali další zpětnou vazbu od nerozhodného nebo nejistého klienta předtím, než uděláte hodiny designu, který bude odmítnut jen, bude každý šťastnější.
Zdroje pro vytváření vlastních moodboardu
Publikovali jsme článek o Proč nálady obsahují záležitost na konci loňského roku. Článek se zabývá základy vytváření nástěnných tabulek a proč byste je chtěli používat. Je to skvělý výchozí bod.
Z Couchu je video tutorial nazvaný Vytvoření efektivní rady nálady . Je to asi sedm minut a pokrývá základy tvorby digitální nálady pro projekty.
Flickr má Inspirační desky bazén, který shromažďuje obraz nálady a inspiračních tabulek z různých disciplín. Je to dobré místo pro hledání inspirace nebo jen prohlédněte si příklady toho, jak se ostatní blíží svým náladovým tabulem.
Kompilace online nástrojů
Online nástroje pro tvorbu webových stránek jsou desetník. Třídění mezi nimi k nalezení těch, které opravdu vyčnívají, může vypadat, že trvá více času, než byste někdy očekávali, že ušetříte pomocí nich.
Ale níže jsme našli ty nejlepší nástroje pro typografii, CSS, AJAX a Javascript, výběr barev a nástroje, které usnadňují vytvoření jednotlivých prvků stránky.
Opět jsou to některé z nejlepších dostupných nástrojů pro to, co dělají, takže nebudete muset plýtvat spoustu testování času desítkami různých nástrojů.
Nástroje typografie
Existuje řada online nástrojů pro experimentování s typografií na webových stránkách. Některé vám umožní porovnávat různé typy písma vedle sebe. Některé vám umožní vzorek pouze jednoho stylu najednou. A další vám ukazují různé doporučené fonty písma.
Jiné užitečné nástroje pro webovou typografii zahrnují aplikace pro konverzi velikostí pixelů na jednotky em a různé Lorem Ipsum a další generátory fiktivních textů. Celkově existují nástroje pro typografické zpracování, které jsou pro každou možnou potřebu, kterou může mít webový návrhář.
Tytester
Typetester umožňuje porovnávat až tři písma vedle sebe .
Můžete si vybrat libovolné písmo z vlastního počítače nebo používat písma z jejich nabídky běžných systémových písem a bezpečných písem. Umožňuje také změnit barvu, vodítko, sledování, velikost a další možnosti stylu.
Je to skvělý nástroj při rozhodování o tom, která písma se mají používat pro různé prvky, nebo dokonce i pro sestavování vlastních zásobníků písem (protože umožňuje porovnávat četná písma vedle sebe).
Typ sady CSS
CSS Type Set umožňuje vložit každý text, který chcete upravit do jednoho pole, nastavit posuvníky a zvolit další možnosti formátování a potom zkopírovat generovaný CSS.
Je to rychlý a snadný způsob, jak formátovat jakýkoli text, který potřebujete, od odstavců po nadpisy.
Možnosti zahrnují barvu textu, přední, sledování, změnu základní linie, dekorace textu, zarovnání a další.
Lepší CSS Font Stacks
Zatímco není tradičním nástrojem, jako takový, tento článek nabízí řadu alternativ k standardním zásobníkům fontů, které se obecně používají v CSS.
Kromě toho, že nabízíte pokyny pro vytváření vlastních zásobníků písem, nabízí tento článek také širokou škálu vzorových zásobníků, které můžete použít . Vynikající zdroj, když se cítíte poněkud narazil na vaše typografické možnosti.
HTML-Ipsum
Většina standardních generátorů Lorem Ipsum online vám poskytne blok textu a nic víc. A to je skvělé, když se jen snažíte naplnit nějaký prostor.
HTML-Ipsum však poskytuje text, který byl již označen pomocí základních značek HTML (odstavec, hlava, neordonované seznamy atd.), Takže můžete vidět, jak se vzájemně ovlivňují všechny různé prvky. Je to obrovský čas.
PXtoEm.com
PXtoEM.com dělá přesně to, co říká: konvertuje pixelová písma do písem em .
Možnosti, které vám dávají, jsou tím, co z něj činí skutečně působivý a flexibilní nástroj.
Můžete si vybrat velikost písma základního tělesa a získat konverze na základě výchozí velikosti písma prohlížeče (pokud například nastavíte procento základního písma na 62,5% tak, aby velikost 10 pixelů odpovídala hodnotě 1em, můžete jej vybrat jako výchozí velikost).
Typechart
Typový řádek umožňuje prohlížet celou škálu bezpečných písem a uvidíte, jak vypadají na systémech Windows i Mac .
Fonty můžete najít na základě velikosti, ať už se jedná o serif nebo sans serif, nebo o důraz. Zahrnuje pouze bezpečná písma, takže nabízené možnosti jsou omezené. Ale pro základní typografii je to skvělý nástroj, který může poskytnout spoustu inspirace.
A můžete zkopírovat a vložit CSS pro každý styl bez opuštění stránky.
Otočení typické
Flipping Typical umožňuje zobrazit běžné písma, které máte v počítači, ve formátu mřížky, aby bylo snadnější volba správného písma pro váš současný projekt.
Jedná se o skvělý nástroj, pokud nemáte zájem používat standardní fonty bezpečné pro web a chcete vidět další možnosti.
Je to zvláště užitečné, pokud nechcete procházet několika stovkami písem nainstalovaných v počítači a prostě chcete vidět populárnější.
Nástroje CSS
CSS je téměř stejně důležité v návrhu webových stránek jako HTML. A tam jsou stovky nástrojů, aby vaše CSS čistší, štíhlejší, efektivnější a obecně lépe, což vám ušetří čas a úsilí potřebné k ručnímu vylepšení vašich stylových listů.
Komprimace stylových listů, které mohou pomoci urychlit načítání vašich stránek, je zjednodušena pomocí automatického online nástroje. K odstranění duplicitních prohlášení jsou k dispozici také nástroje.
Podvodní listy udržují základní prvky CSS na dosah ruky, když kávu není docela rána v ráno a máte těžké si uvědomit, které pořadí vaše zkrácená značka by měla být.
Zatímco většina z těchto nástrojů dělá skvělou práci při čištění vašeho CSS, ujistěte se, že máte vždy zálohu vašeho originálu a vyzkoušet vygenerovaný konečný produkt. Někdy čistící prostředek nebo kompresor odstraní něco, co bylo nakonec nutné, tím, že porušíte své stránky.
CSS SuperScrub
CSS SuperScrub má za cíl podstatně snížit složitost a velikost stylových listů .
Zbavuje se nadbytečných hovorů, odstraňuje nepotřebný obsah a seskupuje zbývající prvky, aby později usnadnily úpravy.
Existuje několik možností, včetně jednoho, abyste odstranili všechny prázdné znaky v listu stylů nebo vložte nový řádek před otevřením zarážky.
Kód zkrášlení
Code Beautifier optimalizuje a čistí vaše soubory CSS .
Nabízí velké množství možností formátování textu, včetně komprese barev, třídění vlastností, konverze všech voličů na malá písmena, konverze vlastností na velká nebo malá písmena a volba úrovně komprese, kterou chcete použít.
Můžete buď zkopírovat a vložit svůj CSS do aplikace, nebo zadat adresu URL souboru CSS.
CSS Drive
CSS Drive je základní kompresor CSS .
Můžete nastavit, jak chcete, aby vaše CSS bylo komprimované (lehké, normální nebo super kompaktní) a jak chcete, aby zpracovávaly komentáře (zda je chcete odstranit).
K dispozici je také pokročilý režim, který vám nabízí mnohem více možností, včetně odstranění mezer kolem určitých znaků, odstraňování karet, odstraňování nových řádků a dalších.
Kontrola redundance služby CSS
Někdy v procesu navrhování stránek můžete nastavit voliče CSS, které neskončí, aby se dostaly do konečné značky.
Tyto voliče dělají nic víc, než aby vaše stylové listy mohly být později upravovány.
Kontrola redundance CSS prochází seznamem stylů a každou z vašich stránek HTML a zjistí, které selektory nejsou používány, a poté je odstraní .
Je to skvělý nástroj k použití, pokud si myslíte, že byste měli ve vašem stylu listy nepotřebné selektory.
Index vlastností CSS
Index vlastností CSS uvádí abecedně všechny vlastnosti CSS .
Kliknutím na libovolnou z přiložených vlastností se dostanete k definici a informacím o výchozí hodnotě, povolených hodnotách a zda se dědí z nadřazeného vlastnictví.
CSS zkratkou průvodce
Použití zkrácených vlastností CSS způsobí, že vaše soubory CSS jsou menší než použití vlastností dlouhých rukou .
Ale vzpomínka na to, jakou objednávku se všechny různé prvky dostanou do všech různých vlastností, může být bolest hlavy, zvláště pro ty, které nemusíte používat v každém designu, který děláte.
Obsahuje také informace o výchozích hodnotách vlastností, takže pokud se rozhodnete vynechat vlastnost, budete vědět, co předpokládá hodnotu.
Nástroje barvy
Výběr správných barev pro vaše návrhy webových stránek může být jedním z nejdůležitějších rozhodnutí, které učiníte v celém procesu návrhu.
Někdy se dostáváme do designu s předdefinovanou barevnou schématem (například když klient již nastavil barvy značky) nebo okamžitě vědět, jaké barvy chceme použít. Jinak budeme mít možnost vytvořit vlastní paletu pro návrh.
Pokud vytváříte barevné schéma od začátku, generátory barev a palety barev mohou být obrovskou pomocí.
Pokud již máte barevné schéma, je třeba vzít v úvahu další aspekty, jako je dostupnost a barvy, na které části webu.
Existují ale také nástroje, které jim pomohou s těmito rozhodnutími. Níže uvádíme některé z nejlepších nástrojů pro správu barevných schémat.
Filtr webových stránek s barevným odstínem
Vzhledem k tomu, že někde mezi 7 a 10% mužské populace má určitý stupeň barevné slepoty (podle Wikipedia ), ujistěte se, že vaše stránky jsou stále přístupné pro tuto populaci, není špatný nápad.
Tento nástroj vám ukáže, jak se vaše návrhy budou objevovat u lidí s řadou různých poruch barevnosti. Můžete zobrazit výsledky pro celý svůj web nebo vyloučit obrázky z výsledku.
Poskytují také odkaz na nástroj pro výběr barev, který je bezpečný pro barvy.
Najděte odpovídající barvy pro vaše webové stránky
Tento nástroj palety barev nalezne barvy, které se budou koordinovat s libovolnou vybranou barvou .
Můžete buď zvolit barvu z předdefinovaných možností, nebo zadejte libovolnou hexadecimální nebo RGB hodnotu barvy pro získání koordinačních palet založených na komplementárních, rozdělených doplňkových, třídávkových, tetradeových, analogových nebo monotónních barevných schématech.
Dodávané barvy jsou však stejně intenzivní, což znamená, že je to opravdu jen výchozí bod pro vytváření barevných palet pro vaše návrhy.
Generátor barev palety
Fotky jsou skvostnými místy, kde můžete hledat inspiraci návrhu. Tento nástroj může vytvořit paletu barev z libovolného obrázku, který zvolíte (stačí zadat adresu URL obrázku).
Poskytuje jak matné, tak živé barevné schémata na základě obrazu, který poskytujete.
Být schopen používat jakýkoli obrázek on-line opravdu dělá tento nástroj cenný, protože šetří čas potřebný ke stažení obrázku a poté znovu načíst na takové stránky, aby vygeneroval barevné schéma (nebo si ho stáhnout a otevřít v grafickém programu, paleta barev).
Kuler
Galerii barev palety Adobe Kuler je jednou z lepších barevných paletových galerií .
Můžete procházet nebo vyhledávat více než 10 000 barevných palet odeslaných uživateli společnosti Kuler a poté stáhnout nebo uložit oblíbené položky pro pozdější použití.
Kuler také obsahuje opravdu výkonný nástroj pro vytváření palet, který vám umožní vybrat barvy pomocí posuvníků nebo na základě hodnot barvy HSV, RGB, CMYK, LAB nebo hex.
Nastavení libovolné barvy jako základní barvy pak změní okolní barvy, které doplňují.
COLOURlovery
COLOURlovers je další skvělá farebná schéma .
Můžete vyhledávat více než 800 000 barevných schémat (založených na 20 schématech na stránku a 43 200+ stranách schémat). Kromě palet můžete také hledat jednotlivé barvy a vzory založené na paletách.
Jeden z nejužitečnějších funkcí COLOURlovers je však nástroj pro tvorbu vzorů, který vytváří vlastní vzory založené buď na předdefinované barevné schématu nebo na aplikaci, kterou vytvoříte za běhu.
Jen se ujistěte, že se chcete obrátit na vlastníka autorských práv vzoru, pokud chcete použít jeden pro komerční práci.
100 náhodných barev 2.0
Pokud opravdu nemáte tušení, kde začít s barevným schématem pro jeden z vašich návrhů, může být 100 náhodných barev 2,0 vhodným nástrojem.
To dělá přesně to, co název říká: představuje 100 náhodných barev včetně jejich hexadecimálních hodnot .
A pokud v prvních 100 nenásledujete nic, můžete jen zasáhnout a obdržet zcela novou sadu!
Nástroje jednotlivých prvků
Existuje mnoho generátorů, které umožňují rychlé a snadné vytváření tlačítek, pozadí, formulářů a dalších návrhových prvků pro vaše stránky.
Některé z nich jsou jen zdvořilé, ale jiné jsou velkou pomocí, pokud chcete rychle vytvořit něco jako tlačítko Web 2.0-ish nebo základní pruhované pozadí.
Nástroj pro tvorbu formulářů může být také velmi užitečný, zvláště pokud chcete, aby vaši klienti mohli provádět některé ze svých vlastních administrativních prací na svých formulářích.
Vím alespoň několik designérů, kteří tyto nástroje používají, takže nemusí vytvářet vlastní, zjednodušené rozhraní pro přístup k databázi formulářů nebo pro úpravy formulářů pro své klienty. Jsou skvělým spořičem času, zejména pro vytváření složitějších forem.
Wufoo
Wufoo je nástroj pro tvorbu formulářů ve formátu HTML, který nabízí více než 80 formulářových šablon a barevných schémat a současně umožňuje plnou kontrolu vytváření vlastních formulářů pro vaše klienty.
Šablony umožňují rychlejší a snadnější vytváření standardních webových formulářů (jako jsou registrační stránky nebo kontaktní formuláře).
Vložené formuláře jsou automaticky shromažďovány v databázi, která usnadňuje vašim klientům tisk, e-mailování jednotlivých položek, filtrování, vyhledávání a provádění dalších pokročilých funkcí, aniž byste museli vytvářet vlastní rozhraní.
Můžete dokonce použít Wufoo k vytváření on-line objednávkových formulářů a integraci s Authorize.net, PayPal nebo Google Checkout.
BgPatterns
BgPatterns vám umožňuje vytvářet dlaždicové vzory pomocí široké škály různých opakujících se prvků.
Můžete si vybrat barvu pozadí, texturu plátna a úhel vzoru. Můžete použít pozadí, které vytvoříte na webu BgPatterns, k náhledu, a poté jej po dokončení stahovat.
Můžete také procházet vzory vytvořené jinými uživateli. Je to nejrychlejší a nejjednodušší způsob, jak vytvořit jednoduché, obložené pozadí.
Stripe Generator 2.0
Vytváření opakujících se pruhů pro webové stránky je časově náročné.
Jistě, můžete vytvářet šablony pro běžné pruhy, které byste mohli použít, ale co když chcete pinový proužek pro jeden projekt, široký proužek pro jiný a jeden pro zvláštní úhel za jiný? Brzy tyto šablony prostě nezdá, že by to již přestaly.
Stripe Generator 2.0 nabízí pruhy v nejrůznějších úhlech , v libovolné šířce, kterou si vyberete, se stíny a přechody a bez použití libovolných barev hex.
Zahrnuje také pruhovou galerii, kde můžete vidět, co ostatní stavěli.
Tartan Maker
Pokud vytváříme pruhované pozadí, je časově náročné, vytváření křídlových pozadí je obrovská bolest hlavy.
To je místo, kde Tartan Maker přichází. Zvolte velikost příze, barvy vzoru a úhel a vytvoří to automaticky.
Můžete zobrazit náhled vašich návrhů na celou obrazovku a stáhnout soubor.
Pixelknete na pozadí Dotter
Tento generátor pozadí vytváří moderní tečkované pozadí s postupně menšími tečkami, které se pohybují dolů po stránce.
Pro gradientní pozadí můžete zvolit až dvě tečkové barvy a dvě barvy (nebo jen jednu barvu pro plné pozadí).
Můžete také určit výšku vzoru (výchozí hodnota je 700 pixelů). Vytvořené pozadí se opakuje na vodorovné ose.
Jako generátor tlačítek
Pokud ignorujete špatně přeložený text na této stránce, uvidíte, že je to jeden z nejdynamičtějších generátorů tlačítek . Přidejte text, různé přechody, pruhy, obrázky a další tlačítka.
Můžete vybrat tlačítko a barvy ohraničení, celkovou velikost (pomocí posuvníků nebo textových polí) a tloušťku okraje a jak je zaokrouhleno tlačítko.
Pokud zahrnujete pruhy, dostanete spoustu možností, včetně barvy, průhlednosti, tloušťky, mezer mezi pruhy a úhlu.
To je rozhodně nejvíce plně vybavený generátor tlačítek.
Button Maker
Tento generátor tlačítek vám umožňuje snadno vytvářet dvěma tónová tlačítka s rozlišením 80 × 15 pixelů .
Vyberte barvy tlačítek, barvy ohraničení, kde by měla být rozdělení mezi políčky a zadejte text pro každou stranu a to je vše!
Jedná se o jeden z těch nástrojů, které nejsou nabité funkcemi, ale dělají to, co bylo navrženo tak, aby to bylo perfektně a bez problémů.
Nástroje AJAX a JavaScript
Všichni víme, že Ajax může na vašich stránkách přidat mnoho funkcí. Ať už chcete přidat jednoduchou galerii obrázků, interaktivní kontaktní formulář nebo vytvořit celou webovou aplikaci , pomůže Ajax.
Ale začíná od nuly může být skličující, zvláště pokud jste relativně nový k Ajaxu. A i když se domníváte, že jste pro, může být stále časově náročné začít s prázdnou tabulkou pro každý z vašich projektů.
Existuje spousta nástrojů k urychlení vývoje Ajaxu. Od sbírek skriptů až po rámce pro specifické generátory prvků, je pravděpodobné, že je v níže uvedených nástrojích k dispozici něco, co z vás činí efektivnější vývojáře.
Ajaxload
Ajaxload je generátor pro vytváření ikon loaderů Ajaxu . Existuje mnoho různých ikon, ze kterých si můžete vybrat.
Vše, co musíte udělat, je nastavit barvy popředí a pozadí (nebo zvolit průhledné pozadí) a stahovat vygenerovaný skript.
Rychlé a snadné, ale ušetří vám pár minut (nebo delší) kódování!
Mini AJAX
Mini Ajax je galerie stahovaných Ajaxových a DHTML skriptů .
Zahrnuje vše od modálních oken až po prezentace až po pokročilejší skripty (například kalendáře a celé nástroje pro správu projektů).
Je to skvělý výchozí bod pro nalezení jednotlivých prvků Ajaxu, nebo dokonce jen pro získání nějaké inspirace.
K dispozici jsou ukázky pro spoustu skriptů a všechny jsou stahovatelné z původních zdrojů.
MooTools
MooTools je objektově orientovaný rámec JavaScriptu . Určitě není určen pro začátečníky, ale může vám umožnit psát flexibilní, výkonné aplikace Ajax, které jsou kompatibilní s cross-browser.
Je to také kompatibilní s normami a je neuvěřitelně dobře zdokumentováno.
Kromě hlavního tvůrce je také k dispozici tunka pluginů. MooTools lze použít k vytvoření všeho od jednoduchých obrázkových galerií až po kompletní uživatelská rozhraní.
jQuery
jQuery je knihovna jazyka JavaScript, která zjednodušuje paletu funkcí JavaScriptu .
Jednou z nejlepších částí tohoto konkrétního nástroje jsou však počet pluginů, které jsou již k dispozici pro jQuery.
K dispozici jsou připravené pluginy pro vše od jednoduchých animací až po formuláře widgetů až po pokročilé prvky uživatelského rozhraní.
Je pravděpodobné, že již byl vytvořen plugin pro něco, co byste mohli chtít udělat s JavaScriptem nebo Ajaxem, nebo alespoň jeden, který bude použit jako základ pro vytváření vlastních.
Script.aculo.us
Script.aculo.us je knihovna uživatelského rozhraní JavaScript, která obsahuje animační rámec, ovládací prvky Ajax, nástroje DOM a další .
Používá je Apple, CNN, Basecamp a Ruby on Rails. Je postavena na Prototypovém rámci.
Ve wiki Script.aculo.us je k dispozici rozsáhlá dokumentace, která usnadňuje zahájení práce.
Online nástroj pro kompresi jazyka JavaScript
Komprimace souborů JavaScriptu umožňuje jejich načtení rychleji, snížit méně šířky pásma a zabrat méně místa na vašem serveru. Tento nástroj usnadňuje kompresi.
Stačí zkopírovat a vložit své soubory JS (nebo nahrát je) do tohoto nástroje a pak vybrat, zda chcete komprimovat pomocí Minify nebo Packer.
Automaticky vyžívá čistší a efektivnější kód. Jen se ujistěte, že důkladně vyzkoušíte výsledky a vždy udržujte zálohu původního souboru.
JavaScript zkvalitňovač
Pokud je váš jazyk JavaScript trochu nespravedlivý, než byste chtěli (nebo je téměř nemožné dešifrovat, protože je tak špatně formátován), spusťte jej pomocí tohoto zkrášlovacího programu, abyste získali čisté, čisté a důsledně formátované skripty, které jsou snadněji čitelné a upravovány později .
Použitá nastavení jsou minimální, ale můžete vybrat, kolik prostorů chcete použít pro zarážky, zda chcete odhalit balíčky a zda chcete zachovat přerušení linky.
Opět se ujistěte, že testujete konečný kód a udržujete zálohu v případě jakýchkoli problémů v nově zkrášeném kódu.
Prohlížeče snímků
Bohužel různé prohlížeče vytvářejí stránky poněkud odlišnými způsoby. To může být obrovská bolest hlavy, zvláště pokud vaše klienti používají jeden prohlížeč a používáte zcela jinou.
Pokud vidí věci, které se nezobrazují na vašem konci (nebo naopak), může to způsobit problémy na obou stranách.
V počítači můžete vždy nainstalovat více prohlížečů, ale a) je to ztráta místa na disku a b) co s prohlížeči, které nejsou k dispozici pro váš operační systém? To je tam kde Prohlížeče snímků přichází v.
Můžete si vybrat z prakticky všech hlavních existujících prohlížečů, včetně obskurních prohlížečů jako Minefield a Epiphany.
Aplikace BrowserShots zobrazuje screenshoty pouze prohlížečů, které jste si vybrali pro zobrazení , takže můžete vybrat tolik nebo jen málo, kolik chcete.
Nezapomeňte, že čím více prohlížečů se rozhodnete testovat, tím déle trvá. Způsob, jakým je prohlížeč nastaven, je však možné pouze stránku uložit a vrátit se později, aby se zobrazily vaše výsledky.
Firebug
Žádný seznam nástrojů webových návrhářů by nebyl úplný, aniž by se zmínil plugin Firebug Firefox .
Často považovaný za jeden z nejdůležitějších nástrojů v arzenálu designéra , Firebug dělá ladění a editace kódu (ať už jde o JavaScript, CSS nebo HTML) o nekonečně jednodušší.
CSS můžete vyladit přímo v prohlížeči. Vizualizujte způsob zarovnání polí CSS. Upravte libovolný prvek na stránce přímo v prohlížeči.
Ladění JavaScript a rychlejší nalezení chyb. A to je jen škrábání povrchu toho, co Firebug může dělat.
Je to opravdu nezbytný nástroj pro každého návrháře. Jakmile ji použijete, budete se divit, jak jste někdy navrhli bez něj.
Zkompilovaný výhradně pro WDD od Camerona Chapmana.
Které nástroje nejvíce používáte? Které další nástroje používáte, které jsme pravděpodobně chyběli?