Massiv kompilering af designerværktøjer
Webdesignere har et væld af værktøjer til rådighed for dem, for at gøre alt fra at organisere deres tanker om et bestemt design til debugging af det endelige design.
Men med så mange værktøjer derude, hvordan bestemmer du nogensinde, hvilke der er virkelig nyttige, og hvilke vil bare spilde din tid?
Vi har samlet en massiv liste over nogle af de bedste og mest nyttige værktøjer derude til webdesignere .
Med det formål at udelade listen er fælles værktøjer, som de fleste designere sandsynligvis allerede bruger (som Dreamweaver eller Panic's Coda, Photoshop eller GIMP, og lignende almindelige softwareprogrammer, som stort set alle designer har allerede i deres værktøjssæt).
Dette er værktøjer, der sparer tid, gør dig mere effektiv, forenkler eller fremskynder din designproces eller på anden måde gør dit liv lettere.
Samling af offlineværktøjer
De fleste rundups af nyttige webdesign værktøjer fokuserer kun på online værktøjer.
Men der er et par meget nyttige værktøjer, du kan bruge til at åbne dine muligheder, når det kommer til design. Disse ting kan gøre visse opgaver nemmere, herunder at arbejde med ubeslutsomede kunder.
Grafik tabletter
Grafiktabletter (også undertiden benævnt tegntabeller, grafikpuder eller digitaliseringstabeller) er et utroligt nyttigt værktøj i et webdesigners arsenal. Mens de fleste designere kan tegne sig godt med en mus, gør en tablet det meget lettere og hurtigere.
De fleste tabletter består af to grundlæggende dele: selve tabletten og penen (eller stylus). Mange kommer også med en puck (som fungerer på samme måde som en mus, men på selve tavlen i stedet for en musemåtte eller dit skrivebord). Hovedvægten for tabletten er størrelsen, mens penens hovedanbefaling er trykfølsomhed.
Tabletterne selv er tilgængelige i størrelser fra ca. 4 "x 5" til 19 "x 13". Selvfølgelig, jo større tabletter bliver, jo dyrere bliver det. For det meste kan webdesignere komme væk med tabletter i den mindre ende af spektret, medmindre de har planer om at lave en masse illustrationarbejde (og selv så er det helt muligt at få kvalitetsresultater fra en mellemstorletablet).
Og mindre tabletter er mere bærbare, hvilket gør dem nemme for designere, der ikke altid vil være bundet til deres skrivebord.
Pennerne er trykfølsomme for at give en mere realistisk oplevelse . Fælles følsomheder spænder fra 256 niveauer af tryk op til 2.048 niveauer. Jo højere følsomhedsniveauet er, desto mere føles det, at du faktisk bruger en pen og et papir.
Populære grafiske tabletter
Wacom er nok den mest populære tabletproducent derude. De har fire forskellige produktlinjer: Bamboo (som omfatter deres Bamboo Craft og Bamboo Fun produkter), der er rettet mod forbrugere og hobbyfolk; Graphire, deres Bluetooth tablet; Intuos, deres mid-range linje for kreative fagfolk; og Cintiq, deres high-end line, der inkorporerer en skærm i tabletten for en "pen-on-screen" oplevelse (den ene har endda en 21 "skærm).
Aiptek Lav en række billige tabletter, der starter med kun US $ 50. De tilbyder en 12,1 "USB tablet til mindre end US $ 130 (sammenlignet med US $ 469 for en Wacom tablet af tilsvarende størrelse). Aipteks mest interessante tilbud er dog deres My Note Premium (US $ 170), som giver dig mulighed for at tegne et stykke papir på toppen af tavlen med en rigtig pen og registrerer alt, hvad du gør. Der er nok hukommelse til op til 100 skriftlige sider, og den leveres med en SD-kortspor til udvidelse af dens kapacitet. Og hvis du kun vil bruge det til at tage notater på et møde, kan det løbe af 4 AAA-batterier, hvilket betyder at du ikke behøver at medbringe din bærbare computer sammen med dig.
UC-Logic er den anden store grafikkortproducent. Deres produkter falder i midten af priserne på tabletter, med en 9 "x12" tablet (PF1209-Pro) kommer ind på omkring US $ 250. De har tabletter til rådighed, der starter med kun US $ 40.
Mood boards
Mood boards (også kaldet inspiration boards) er et godt værktøj til designere, der arbejder med kunder, der måske ikke har en klar idé om, hvad de vil have.
Mood boards har ofte form af en collage, der indeholder designelementer til projektet. Eksempler på elementer inkluderet kan være typografi prøver, farveskemaer, specifikke grafiske eksempler eller generelle "humør" elementer, der afspejler designers vision for det indtryk webstedet skal give besøgende.
Mood boards bruges ofte i interiør design feltet til at vise kunder ideer til renovering af et værelse eller et helt hus. De bruges også i modeindustrien til at tjene som inspiration og retning for en linje eller en sæson. Men de er lige så værdifulde for grafiske og webdesignere.
Afhængigt af hvilken type klient du arbejder med, kan du oprette en løs collage med eksempler, der overlapper på en økologisk måde . Hvis din klient er i et kreativt felt eller er bekendt med den kreative proces, kan denne slags humørbræt fungere ret godt.
Hvis din klient på den anden side er vant til et mere corporate eller formelt miljø, er det sandsynligvis mere hensigtsmæssigt at oprette en mere organiseret stemmebord.
Brug overskrifter til at adskille farveskemaet, specifikke designelementer, typografi og andre dele af dit humørbræt for at give hele sagen noget struktur.
Hvis du har flere ideer til retninger, hvor et projekt kan gå, kan skabe nogle få forskellige humørbræt være en god måde at få klientfeedback til og yderligere forfine dine egne ideer.
Oprettelse af to eller tre forskellige eksempler til at vise en klient kan være værdifuldt for at få yderligere retning fra din klient uden at bruge timer eller dage på en faktisk site mock-up bare for at blive fortalt, at det ikke er noget, som de leder efter.
Og det er virkelig den største fordel ved at bruge humørbræt i din designproces. Et humørbræt tager generelt meget mindre tid til at oprette end en site mock-up .
Brug af humørbræt til at få yderligere tilbagemeldinger fra en ubeslutsom eller usikker klient, før du forpligter dig til et design, der kun afvises, gør alle lykkelige.
Ressourcer til at oprette dine egne humørbræt
Vi offentliggjorde en artikel om Hvorfor Mood boards Matter i slutningen af sidste år. Artiklen dækker det grundlæggende ved at oprette humørbræt og hvorfor du vil bruge dem. Det er et godt udgangspunkt.
Fra Sofaen er der en video tutorial kaldet Oprettelse af et effektivt humørkort . Det er omkring syv minutter lang og dækker det grundlæggende for at skabe et digitalt humørbord til projekter.
Flickr har en Inspiration boards pool, der samler stemning og inspiration bord billeder fra på tværs af flere design discipliner. Det er et godt sted at finde inspiration eller bare tjekke eksempler på hvordan andre nærmer sig deres humørbræt.
Sammensætning af onlineværktøjer
Online webdesign værktøjer er et dime et dusin. Sortering gennem dem for at finde dem der virkelig skiller sig ud, kan synes at tage mere tid, end du måske nogensinde har forventet at spare ved at bruge dem.
Men nedenfor har vi fundet de bedste værktøjer til typografi, CSS, AJAX og Javascript, farvevalg og værktøjer til at gøre det lettere at oprette individuelle sideelementer.
Igen er disse nogle af de bedste værktøjer til rådighed for det, de gør, så du behøver ikke at spilde en masse tidstest med at snesevis af forskellige værktøjer.
Typografi Værktøjer
Der er et væld af online værktøjer til at eksperimentere med typografi på dit website design. Nogle giver dig mulighed for at sammenligne forskellige skrifttyper side om side. Nogle lader dig kun prøve en stil ad gangen. Og endnu andre viser dig forskellige anbefalede skrifttypestabler.
Andre nyttige webtypografiværktøjer omfatter apps til konvertering af pixelstørrelser til enheder og en række Lorem Ipsum og andre dummy tekstgeneratorer. Alt i alt er der typografi værktøjer derude for stort set alle mulige behov en webdesigner måtte have.
Typetester
Typetester lader dig sammenligne op til tre skrifttyper ved siden af hinanden .
Du kan vælge en hvilken som helst skrifttype fra din egen computer eller bruge skrifttyper fra deres menu med almindelige system skrifttyper og web-sikre skrifttyper. Det giver dig også mulighed for at ændre farve, ledende, sporing, størrelse og andre stilindstillinger.
Det er et godt værktøj, når du forsøger at bestemme hvilke skrifttyper der skal bruges til forskellige elementer eller endda til at kompilere dine egne skrifttypestabler (da det lader dig sammenligne talrige skrifttyper side om side).
CSS Type Set
CSS Type Set sætter dig i stand til at indsætte enhver tekst, du vil ændre i en boks, justere skydere og vælge andre formateringsindstillinger, og derefter kopiere det genererede CSS.
Det er en hurtig og nem måde at formatere enhver tekst, du har brug for, fra afsnit til hovedetiketter.
Indstillinger omfatter tekstfarve, ledende, sporing, baseline shift, tekst dekorationer, justering og meget mere.
Bedre CSS Font Stacks
Selvom det ikke er et traditionelt værktøj, giver denne artikel i sig selv en række alternativer til standard skrifttypestabler, der generelt bruges i CSS.
Ud over at tilbyde retningslinjer for oprettelse af dine egne skrifttypestabler, indeholder denne artikel også en bred vifte af prøve stabler, du kan bruge . En fremragende ressource, når du føler dig lidt stumped over dine typografi muligheder.
HTML-Ipsum
De fleste standard Lorem Ipsum generatorer online giver dig en blok af tekst og ikke mere. Og det er godt, hvis du bare forsøger at fylde lidt plads.
Men HTML-Ipsum giver dig tekst, der allerede er markeret med grundlæggende HTML-tags (afsnit, hoved, uordnede lister osv.), Så du kan se, hvordan alle de forskellige elementer interagerer med hinanden. Det er en enorm timesaver.
PXtoEm.com
PXtoEM.com gør præcis hvad det siger: det konverterer billedstørrelser i skrifttyper til em-størrelse .
De muligheder, det giver dig, er hvad der gør det til et virkelig imponerende og fleksibelt værktøj.
Du kan vælge grundtekstens skrifttypestørrelse og få konverteringer baseret på din browsers standard skriftstørrelse (så hvis du for eksempel indstiller din basis skrifttype procent til 62,5%, så en 10 pixel størrelse er lig med 1em, kan du vælge det som din standardstørrelse).
Typechart
Typeskart giver dig mulighed for at gennemse en række websikker skrifttyper og se, hvordan de ser på både Windows og Mac-systemer .
Du kan finde skrifttyper baseret på størrelse, uanset om de er serif eller sans-serif eller vægt. Den indeholder kun websikker skrifttyper, så de tilbudte muligheder er begrænsede. Men for grundlæggende typografi er det et godt værktøj, der kan give masser af inspiration.
Og du kan kopiere og indsætte CSS'en for hver stil uden at forlade siden.
Flipping Typisk
Med Flipping Typical kan du se de almindelige skrifttyper, du har på din computer, i et gitterformat for at gøre det lettere at vælge den rigtige skrifttype til dit nuværende projekt.
Dette er et godt værktøj, når du ikke er interesseret i bare at bruge standardwebsafe skrifttyper og ønsker at se flere muligheder.
Det er især nyttigt, hvis du ikke vil vade gennem et par hundrede skrifttyper installeret på din computer og bare vil se de mere populære.
CSS værktøjer
CSS er næsten lige så vigtigt i webdesign som HTML. Og der er hundredvis af værktøjer derude for at gøre din CSS renere, slankere, mere effektiv og generelt bedre, så du sparer tid og kræfter for at manuelt forbedre dine stilark.
Komprimering af dine stilark, som kan hjælpe med at fremskynde belastningstiden for dine websteder, forenkles ved at bruge et automatisk onlineværktøj. Der er værktøjer til rådighed for at fjerne dobbelterklæringer også.
Cheat ark holder de grundlæggende elementer i CSS lige ved hånden, når kaffen ikke har helt sparket ind om morgenen, og du har svært ved at huske hvilken rækkefølge din stenografi skal være i.
Mens de fleste af disse værktøjer gør et godt stykke arbejde med at rydde op på din CSS, skal du sørge for, at du altid holder en sikkerhedskopi af din original og tester det endelige produkt, der genereres. Nogle gange vil en renere eller kompressor fjerne noget, der var nødvendigt for at bryde dit websted.
CSS SuperScrub
CSS SuperScrub har til formål at reducere kompleksiteten og størrelsen af dine stilark betydeligt .
Det slipper af overflødige opkald, fjerner unødvendigt indhold og grupperer resterende elementer for at gøre redigering lettere senere.
Der er et par valgmuligheder, herunder en for at fjerne alt hvidrummet i dit stilark, eller for at indsætte en ny linje, før du åbner bøjler.
Kode Beautifier
Kode Beautifier optimerer og renser dine CSS-filer .
Det giver et stort antal muligheder til formatering af din tekst, herunder komprimering af farver, sortering af dine egenskaber, omdannelse af alle dine selektorer til små bogstaver, omregning af dine egenskaber til enten store eller små bogstaver og valg af komprimeringsniveau, du vil bruge.
Du kan enten kopiere og indsætte dit CSS i appen eller give en URL til din CSS-fil.
CSS-drev
CSS-drev er en grundlæggende CSS-kompressor .
Du kan indstille, hvordan komprimeret du vil have din CSS til at være (lys, normal eller super kompakt), og hvordan du vil have det til at håndtere kommentarer (om du vil fjerne dem).
Der er også en avanceret tilstand, der giver dig mange flere muligheder, herunder fjernelse af mellemrum omkring bestemte tegn, fjernelse af faner, fjernelse af nye linjer og meget mere.
CSS Redundancy Checker
Nogle gange i færd med at designe et websted, kan du oprette CSS selectors, der ikke ender med at gøre det til din endelige markup.
Disse selektorer gør ikke mere end at gøre dine stilark mere omfattende og sværere at redigere senere.
CSS Redundancy Checker går gennem dit stilark og hver af dine HTML-sider for at se, hvilke selektorer der ikke bruges, og fjerner dem derefter .
Det er et godt værktøj til brug, hvis du tror, at du måske har unødvendige selektorer i dine stilark.
CSS Ejendomsindeks
CSS Property Index lister hver CSS-ejendom alfabetisk .
Hvis du klikker på nogen af de medfølgende egenskaber, får du en definition og information om standardværdien, tilladte værdier og om det arver fra en forælderegenskab.
CSS Shorthand Guide
Brug af stenografi CSS-egenskaber gør dine CSS-filer mindre end brug af longhand-egenskaber .
Men husk hvilken rækkefølge alle de forskellige elementer går ind i alle de forskellige egenskaber kan være hovedpine, især for dem, du måske ikke bruger i hvert enkelt design, du gør.
Det indeholder også oplysninger om standardværdierne for ejendom, så hvis du vælger at forlade en ejendom, ved du, hvad det vil antage, at værdien skal være.
Farveværktøjer
At vælge de rigtige farver til dit website design kan være en af de vigtigste beslutninger, du laver i hele designprocessen.
Nogle gange kommer vi ind i et design med et foruddefineret farveskema (f.eks. Når en klient allerede har etableret mærkefarver) eller ved straks, hvilke farver vi vil bruge. Andre gange kan vi være fri til at oprette vores egen palette til designet.
Hvis du opretter et farveskema fra bunden, kan farvepaletgeneratorer og gallerier være en stor hjælp.
Hvis du allerede har et farveskema, er der andre overvejelser at tage i betragtning, såsom tilgængelighed og hvilke farver der skal bruges på hvilke dele af webstedet.
Men der er værktøjer derude til at hjælpe med disse beslutninger også. Nedenfor er nogle af de bedste værktøjer til rådighed til styring af farveskemaer.
Colorblind Web Page Filter
I betragtning af at et sted mellem 7 og 10% af den mandlige befolkning har en vis grad af farveblindhed (ifølge Wikipedia ), og sørg for at dine websteder stadig er tilgængelige for den befolkning, er ikke en dårlig idé.
Dette værktøj viser dig, hvordan dine designs vises for mennesker med en række forskellige farveblindness lidelser. Du kan se resultaterne for hele dit websted eller udelukke billeder fra resultatet.
De giver også et link til et farveblind-sikkert farvevalgværktøj.
Find matchende farver til dit websted
Dette farvepaletværktøj finder farver, der koordinerer med hvilken farve du vælger .
Du kan enten vælge en farve fra deres foruddefinerede indstillinger eller indtaste en hex eller RGB-farveværdi for at få koordinerende paletter baseret på komplementære, split komplementære, triade, tetrade, analoge eller monotone farveskemaer.
De angivne farver er alle ens i intensitet, hvilket betyder, at dette kun er et udgangspunkt for at skabe farvepaletter til dine designs.
Color Palette Generator
Billeder er gode steder at kigge efter design inspiration. Dette værktøj kan oprette en farvepalette fra ethvert billede, du vælger (angiv kun billedets URL).
Det giver både kedelige og levende farveskemaer baseret på det billede, du giver.
At kunne bruge et billede online gør virkelig dette værktøj værdifuldt, da det sparer tid for at downloade et billede og derefter genoploades til et websted som dette for at generere et farveskema (eller download og derefter åbne i et grafikprogram for at manuelt oprette en farvepalet).
Kuler
Adobes Kuler farvepalette galleri er en af de bedre farvepalette gallerier derude.
Du kan gennemse eller søge mere end 10.000 farvepaletter indsendt af Kuler-brugere og derefter downloade eller gemme dine favoritter til senere reference.
Kuler indeholder også et rigtig kraftigt paletteværktøj, der gør det muligt at vælge farver med skydere eller baseret på HSV, RGB, CMYK, LAB eller hex farveværdier.
Indstilling af en farve som basisfarve vil derefter ændre de omgivende farver som komplement.
COLOURlovers
COLOURlovers er et andet stort farveskema galleri .
Du kan søge mere end 800.000 farveskemaer (baseret på 20 ordninger pr. Side og 43.200 sider med ordninger). Ud over paletter kan du også søge individuelle farver og mønstre baseret på paletter.
En af COLOURlovers mest nyttige funktioner er dog det mønsteroprettelsesværktøj, som gør det muligt at oprette dine egne mønstre baseret på enten et foruddefineret farveskema eller en, du opretter på farten.
Bare sørg for at kontakte ophavsmandens ejer af mønstret, hvis du vil bruge en til kommercielt arbejde.
100 tilfældige farver 2,0
Hvis du virkelig ikke har nogen idé om, hvor du skal starte på farveskemaet til et af dine designs, kan 100 Random Colors 2.0 være det rigtige værktøj.
Det gør bare hvad navnet siger: præsenterer dig med 100 tilfældige farver, herunder deres hex-værdier .
Og hvis du ikke finder noget i de første 100, kan du bare finde opdateringer og få et helt nyt sæt!
Individuelle elementværktøjer
Der er mange generatorer derude, der gør det hurtigt og nemt at oprette knapper, baggrunde, former og andre designelementer til dine websteder.
Nogle af dem er bare gimmicky, men andre er en stor hjælp, hvis du bare vil hurtigt oprette noget som en Web 2.0-ish-knap eller en grundlæggende stribet baggrund.
Formværktøjsværktøjer kan også være meget nyttige, især hvis du vil have dine klienter til at kunne gøre noget af deres eget administrationsarbejde på deres formularer.
Jeg kender mindst et par designere, der bruger disse værktøjer, så de ikke behøver at opbygge en brugerdefineret, forenklet grænseflade til adgang til formulardatabasen eller til redigering af formularer til deres kunder. De er en fantastisk tidsbesparende, især til opbygning af mere komplicerede former.
Wufoo
Wufoo er en HTML formularbygger, der tilbyder mere end 80 form skabeloner og farveskemaer, samtidig med at du giver fuld kontrol til at oprette brugerdefinerede formularer til dine kunder.
Skabeloner gør det hurtigere og lettere at oprette standard webformularer (f.eks. Registreringssider eller kontaktformularer).
Indleverede formularer indsamles automatisk i en database, der gør det nemt for dine kunder at udskrive, e-mail individuelle poster, filtrere, søge og udføre andre avancerede funktioner uden at kræve, at du opbygger en brugerdefineret grænseflade.
Du kan endda bruge Wufoo til at oprette online bestillingsformer og integrere med Authorize.net, PayPal eller Google Checkout.
BgPatterns
BgPatterns lader dig oprette flisebelægningsmønstre ved hjælp af en lang række forskellige gentagende elementer.
Du kan vælge din baggrundsfarve, lærredestruktur og mønsterets vinkel. Du kan anvende de baggrunde, du opretter på BgPatterns websted for at forhåndsvise, og download derefter billedet, når du har færdiggjort det.
Du kan også gennemse mønstre oprettet af andre. Det er den hurtigste og nemmeste måde at oprette enkle, flisebelagt baggrunde på.
Stripe Generator 2.0
Oprettelse af gentagne striber til et websted er tidskrævende.
Sikker på, at du kan oprette skabeloner til almindelige striber, du kan bruge, men hvad hvis du vil have en stribe stripe til et projekt, en bred stribe til en anden og en i en ulige vinkel for en anden? Snart ser disse skabeloner ikke ud til at skære det længere.
Stripe Generator 2.0 tilbyder striber i forskellige vinkler , i næsten enhver bredde, du vælger, med eller uden skygger og gradienter , og ved hjælp af de ønskede hex-farver.
De indeholder også et stripe galleri hvor du kan se, hvad andre har bygget.
Tartan Maker
Hvis der skabes stribede baggrunde, er det tidskrævende at skabe plaid baggrunde er en enorm hovedpine.
Det er her, Tartan Maker kommer ind. Vælg garnstørrelsen, farverne til dit mønster og vinklen, og det skaber det automatisk.
Du kan forhåndsvise dine designs fuldskærm og derefter downloade filen.
Pixelknetes baggrundsdatter
Denne baggrundsgenerator skaber en moderne prikket baggrund med gradvist mindre prikker, når de bevæger sig ned på siden.
Du kan vælge op til to prikkfarver og to farver til en gradient baggrund (eller kun en enkelt farve for en solid baggrund).
Du kan også angive mønsterets højde (standard er 700 pixels). Baggrunden skabte gentagelser på en vandret akse.
Som Button Generator
Hvis du ignorerer den dårligt oversatte tekst på denne side, vil du se, at dette er en af de smukkeste knapgeneratorer til rådighed . Tilføj tekst, forskellige gradienter, striber, billeder og meget mere til dine knapper.
Du kan vælge knappen og kantfarverne, den samlede størrelse (ved hjælp af skydere eller tekstfelter) og grænsetykkelsen, og hvordan rundet knappen er.
Hvis du inkluderer striber, får du masser af muligheder, herunder farve, gennemsigtighed, tykkelse, mellemrummet mellem striber og vinklen.
Dette er absolut den mest komplette knapgenerator derude.
Button Maker
Denne knapgenerator gør det nemt at oprette to-tone 80 × 15 pixel knapper .
Vælg knappens farver, kantfarverne, hvor splittet mellem boksene skal være, og skriv teksten til hver side, og det er det!
Dette er et af de værktøjer, der ikke er fyldt med funktioner, men gør hvad det var designet til at gøre perfekt og problemfrit.
AJAX og JavaScript-værktøjer
Vi ved alle, at Ajax kan tilføje et ton af funktionalitet til dit websted. Uanset om du vil tilføje et simpelt billedgalleri, en interaktiv kontaktformular eller oprette en hel webapplikation , er Ajax der for at hjælpe.
Men startende fra bunden kan være skræmmende, især hvis du er relativt ny for Ajax. Og selvom du betragter dig selv som en proffs, kan det stadig være tidskrævende at starte med en tom skifer for hver af dine projekter.
Der er masser af værktøjer derude for at fremskynde din Ajax-udvikling. Fra scriptsamlinger til rammer til specifikke elementgeneratorer er der sandsynligvis noget tilgængeligt i værktøjerne nedenfor, som vil gøre dig til en mere effektiv udvikler.
Ajaxload
Ajaxload er en generator til at oprette Ajax loader ikoner . Der er et ton af forskellige ikoner at vælge imellem.
Alt du skal gøre er at indstille forgrunds- og baggrundsfarverne (eller vælg en gennemsigtig baggrund), og download bare det genererede script.
Hurtig og nem, men det sparer dig et par minutter (eller længere) for kodning!
Mini AJAX
Mini Ajax er et galleri af downloadbare Ajax og DHTML scripts .
Den omfatter alt fra modale vinduer til diasshow til mere avancerede scripts (som kalendere og hele projektstyringsværktøjer).
Det er et godt udgangspunkt for at finde individuelle Ajax elementer eller endda bare for at få inspiration.
Der er demoer til rådighed for mange af scriptene, og alle kan downloades fra deres originale kilder.
MooTools
MooTools er en objektorienteret JavaScript-ramme . Det er bestemt ikke designet til begyndere, men kan tillade dig at skrive fleksible, kraftfulde Ajax-apps, der er kompatible med browseren.
Det er også standard-kompatibelt og utrolig vel dokumenteret.
Ud over kernebyggeren er der også et ton af plugins til rådighed. MooTools kan bruges til at skabe alt fra enkle billedgallerier til at udfylde brugergrænseflader.
jQuery
jQuery er et JavaScript-bibliotek, der forenkler en række JavaScript-funktioner .
En af de bedste dele af dette særlige værktøj er dog antallet af plugins, der allerede er tilgængelige for jQuery.
Der er færdige plugins til alt fra simple animationer til formularer til widgets til avancerede brugergrænsefladeelementer.
Der er sandsynligvis allerede et plugin lavet til næsten alt hvad du måske vil gøre med JavaScript eller Ajax, eller i det mindste en til at bruge som grundlag for at lave din egen.
Script.aculo.us
Script.aculo.us er et JavaScript-brugergrænsefladebibliotek, der indeholder en animationsramme, Ajax-kontroller, DOM-værktøjer og mere .
Det bruges af Apple, CNN, Basecamp og Ruby on Rails. Det er bygget på Prototype Framework.
Der er omfattende dokumentation til rådighed i Script.aculo.us wiki, hvilket gør det nemt at komme i gang.
Online JavaScript Compression Tool
Komprimering af dine JavaScript-filer gør dem hurtigere, spiser mindre af din båndbredde og tager mindre plads på din server. Dette værktøj gør det lettere for komprimering.
Du skal bare kopiere og indsætte dine JS-filer (eller uploade dem) i dette værktøj, og vælg derefter, om du vil komprimere ved hjælp af Minify eller Packer.
Det spytter automatisk ud renere og mere effektiv kode. Bare sørg for at du grundigt tester resultaterne og altid gemmer en sikkerhedskopi af din oprindelige fil.
JavaScript Beautifier
Hvis din JavaScript er lidt mere messig end du vil have (eller næsten umulig at dechifrere, fordi den er så dårligt formateret), kør den gennem denne beautifier for at få pæne, rene, konsekvent formaterede scripts, der er nemmere at læse og redigere senere .
De anvendte indstillinger er minimal, men du kan vælge, hvor mange mellemrum der skal bruges til indrykning, om du vil registrere pakkere, og om du vil bevare linjeskift.
Igen skal du sørge for at teste den endelige kode og holde en backup praktisk, hvis der opstår problemer i din nyligt udsmykkede kode.
Browsershots
Uheldigvis giver forskellige browsere websteder på lidt forskellige måder. Dette kan være en enorm hovedpine, især hvis dine kunder bruger en browser, og du bruger en helt anden.
Hvis de ser ting, der ikke vises på din ende (eller omvendt), kan det skabe problemer på begge sider.
Du kan altid installere flere browsere på din computer, men a) det er spild af diskplads og b) hvad med browsere, der ikke er tilgængelige for dit operativsystem? Det er der Browsershots kommer i.
Du kan vælge mellem stort set alle større browsere, der findes, herunder uklare browsere som Minefield og Epiphany.
BrowserShots viser dig skærmbilleder af kun de browsere, du har valgt for at se , så du kan vælge så mange eller færre som du ønsker.
Bare husk, at jo flere browsere du vælger at teste, jo længere tid vil det tage. Den måde, hvorpå BrowserShots er oprettet, kan du bare bogmærke siden og komme tilbage senere for at se dine resultater.
Firebug
Ingen liste over webdesignerværktøjer ville være komplet uden at nævne Firebug Firefox-plugin .
Firebug gør ofte debattering og redigering af din kode (uanset om det er JavaScript, CSS eller HTML) uendeligt nemmere som det mest værdifulde værktøj i en designer arsenal .
Du kan justere din CSS lige i din browser. Visualiser den måde, dine CSS-bokse er justeret på. Rediger ethvert element på din side lige i din browser.
Debug din JavaScript og find fejl hurtigere. Og det skraber bare overfladen af, hvad Firebug kan gøre.
Det er virkelig et must-have værktøj til enhver designer derude. Når du bruger det, vil du spekulerer på, hvordan du nogensinde har designet uden det.
Kompileret udelukkende til WDD af Cameron Chapman.
Hvilke værktøjer bruger du mest? Hvilke andre værktøjer bruger du, som vi måske har savnet?