20 suurepärast tööriista veebidisaini ja -arenduse jaoks

Autor: Peter Berry
Loomise Kuupäev: 19 Juuli 2021
Värskenduse Kuupäev: 13 Mai 2024
Anonim
20 suurepärast tööriista veebidisaini ja -arenduse jaoks - Loominguline
20 suurepärast tööriista veebidisaini ja -arenduse jaoks - Loominguline

Sisu

Kui teil on selle viimase 12 kuu jooksul olnud vaikne aeg, siis olete hästi hakkama saanud, sest teised meist higistasid ainult selleks, et veebis muutuste baasmääraga sammu pidada. HTML5 on saavutanud kriitilise massi, reageeriv arendamine jätkas täieliku kallutamise juures, siis on olemas audio-API-d ja WebGL ...

Õnneks korreleerub muutuste määr positiivselt arendajate ja disainerite probleemide lahendamise jõupingutustega kõikjal, kaevatud nende vastavatele erialadele.

Nišitööriistad

Selle tulemusena on meil koos suuremate ettevõtte toetatud rakendustega tohutu hulk väikseid tööriistu ja teeke, millest igaüks on mõeldud konkreetse probleemi lahendamiseks või teatud võimaluste säilitamiseks. Paar nendest projektidest on muutunud institutsioonideks: Modernizr, tehniliste võimaluste taseme hoidmine ja PhoneGap, mis hoiab mobiiliturgu veebitüüpide jaoks avatud.

Kõige julgustavam on see, et mõnel on ruumi katsetamiseks. Ja isegi natuke eneseõnnitlusi, mida tõendab asjaolu, et Google tundis end mõnede tööriistade osas piisavalt enesekindlalt, et neid Yeomani projekti pakkida ja nuusutada.

Tõepoolest, see on kena nimekiri, mis on enamiku arenduspiruka viilude jaoks hästi esindatud. Alates täiemahulistest IDE-dest kuni väikeste eksootiliste ja ilusa esteetikaga raamatukogudeni. Kuid selle aasta iseloomu annab see, milline on nende tööriistade ilmekus. Selle niši sees näitab igaüks, et meie kasutatavad probleemid hakkavad ületama probleeme, vabastades end veebi loomevõimalustest rohkem andmiseks. Kuidas on see rõõmsa sõnumi jaoks? Häid pühi!


  • Siit leiate kõik meie disainivahenditega seotud funktsioonid

01. Bugherd

Hind: Tasuta - $ 99 / kuu 25 liikmele

Vastupidiselt levinud arvamusele ei ole uue saidi käivitamine arendusmeeskonna töö lõpp. Kui üldse, siis see on hetk, kus higi hakkab tõepoolest tekkima. Kui kliendid hakkavad tagasisidet saama, hakkavad need segased ja vastuolulised taotlused e-kirjadena filtreeruma, mis seejärel lüüakse ringi, enne kui neist lõpuks vaidluskontoks saab.

BugHerd pakub korralikku ja hästi korraldatud viisi tagasiside, veaparanduste ja funktsioonitaotluste käsitsemiseks - ilma e-posti üldkuludeta. Lihtne .js kaasamine ja saidi külastajad saavad tagasiside nupu. Projekti külalised saavad vigu ja taotlusi esitada, liikmed saavad kogu seebangi hallata sõbralikust ja intuitiivsest liidesest. Vigade progresseerumine aruandest tegevusse lõpetamiseni on alternatiivsele olukorrale palju parem: järkjärguline ülesehitamine, mis lõpuks üle jõu käib.


BugHerdi abil on ülesannete lisamine ülilihtne

02. Fontello

Hind: Tasuta

Miks on nii raske leida ikoonide komplekti, mis kataks kõik alused ühtlase väljanägemisega? Üks elu suurimatest saladustest ehk.Noh, enam ei imesta, sest Fontellol pole mitte ainult kõiki vajalikke ikoone, vaid saate valida ja valida vajaminevad tähestikud ning koondada need oma minimalistlikku komplekti.

Muidugi saate GitHubi hoidlast alla laadida kogu ikoonikomplekti (tegelikult on see mitu komplekti), kuid Fontello.com liides muudab teie fondi kohandamise nii lihtsaks ja see on ainus mõistlik lähenemisviis. Projekt on avatud lähtekoodiga, kuid nagu alati, oleks annetused teretulnud.

03. Proto.io

Hind: Tasuta - 49 dollarit kuus

Hea prototüüpimise tööriist peaks võimaldama teil kiiresti käima saada ja töötada, kuid pakkuma ka piisavalt sügavust, et saaksite oma ideid täpsustada nii kaugele, et nad ei vajata, et te kasutaja õlale toetuksite, öeldes näiteks "Lihtsalt ignoreeri seda natuke praegu" . Proto.io teeb just seda.

Samuti tegeleb see kõigi puudutuseliigutustega, mida soovite, tegeletakse animatsioonidega ning jagamise ja kommenteerimisega. Seda on lihtne kasutada ja õnneks on olemas ka tasuta plaan.


04. Sihtasutus 3

Hind: Tasuta

Tundub, et tundlik disain on nullist umbes tuhande miili tunnis tõusnud. Ja asjad muutuvad endiselt piisavalt kiiresti, et väikseid arenduspoode on raske ajakohasena hoida, rääkimata oma teadus- ja arendustegevuse korraldamisest. Seal tuleb sihtasutus 3.

Fond 3 on välja töötanud agentuur ZURB, millel on reageeriva probleemi lahendamiseks saadaval olevad ressursid ja kogemused. Sihtasutus 3 võib olla teie enda projektide kavand, kiire prototüüpimise tööriist või isegi objekti õppetund, kuidas osade veebi probleemidega tegeleda praegused probleemid.

Uusim versioon tutvustab lihtsustatud võrgustruktuuri ja teeb hüppe SASS / Compassile, võimaldades stiilile hõlpsamini läheneda. Kuigi on otstarbekas töötada SASSiga, kui plaanite tutvuda sihtasutusega 3, on kohandatav allalaadimine mõeldud ka sirge CSS-i versiooni lubamiseks.

5. Dreamweaver CS6

Hind: Alates 344,32 naelsterlingist

Sujuvad paigutused, CSS3 üleminekud ja täiustatud PhoneGapi tugi viivad Adobe'i veebikujunduse uusima värskenduse eest kõikehõlmavaks. Ei saa eitada, et Dreamweaver CS6 jõuab maapinnale.

Dreamweaveri probleem on alati olnud see, et selle funktsionaalsus on tasakaalus ja vajadus kasutajast eemale hoida. CS6 haldab seda tegelikult päris hästi.

Uued vedeliku paigutused on käepärased, kuid tegelikult on need kõige vähem veenvad. See tunnustus läheb tõenäoliselt CSS3 üleminekutele, mida on Dreamweaveri abiga lõbus uurida.

06. Pilv9 IDE

Hind: Tasuta / 12 dollarit kuus Premium

Sel aastal sai brauseripõhine IDE lõpuks täis paljude paljutõotavate projektidega, mis pakuvad täisfunktsionaalseid rakendusi, mis võimaldavad teha koostööd kõikjal isegi suuremahulistes projektides. Nende hulgas on Cloud9 oma serv.

Koodiredaktor on väga kasutatav. Koodi lõpuleviimine, nutikad pukseerimis- ja dokumendipuud, FTP-integreerimine ja kõik see, kuid Cloud9 muudab ühenduvus: kui meeskond häkkib sama faili, tuvastatakse iga kasutaja oma värvilise kursori järgi. Vestlusmoodul sulgeb tagasiside tsükli.

Integreeritud GitHubi sarnaste seadmetega, võimeline võrguühenduseta töötama ja üldiselt intuitiivselt kasutatav. Kui soovite lahendust koodiga kuskil, vaadake seda kõigepealt.

07. Sencha Touch 2

Hind: Tasuta

Ei saa eitada, et mobiilseade / puutetundlik seade on veebiarendust lõplikult muutnud. See on laiem, heterogeensem maailm seal ja kõik tahavad killukest tegevust. Sencha Touch 2 eesmärk on viia see unistus HTML5 arendajatele käeulatuses.

Täiustatud API, tugevamad dokumendid ja koolitusmaterjalid, samuti paljude juhtivate seadmetega integreeritud integreeritud integreerimine muudavad Sencha Touch 2 tõsiseks kandidaadiks valitud mobiiliarenduse raamistikus. Õppimiskõver on olemas, kuid kuna Sencha eesmärk on olla otsast lõpuni pakett, siis on vähemalt üks nõlv, mida mööda ronida.

08. Adobe Edge Inspect

Hind: Tasuta

Suurepärane väike rakendus mobiiliarendajatele, varem tuntud kui Adobe Shadow, mis teeb disainiprotsessist tohutu vaeva. Lihtsalt ühendage oma seadmed (Android ja iOS) peamasinaga. Seejärel kajasid sirvitud saidid otse kõigisse ühendatud seadmetesse.

Kui teil on tingimuslik kood või tundlikud mallid, peaksid need hästi töötama. Ja kui soovite koodi järgi nokitseda, klõpsake lihtsalt paaristatud seadme kõrval olevates nurksulgudes (Chrome'is) ja lähete minema.

09. Sulgudes

Hind: Tasuta

Võite arvata, et koodiredaktori kontseptsioon oleks juba päris küps. Seal on nii palju ja nad on kõik nii sarnased, et on lihtne ette kujutada, et lõplik plaan on leitud. Sulgudes on näha, et isegi sellel tasemel on uurimiseks palju võimalusi.

Sulgude keskne eesmärk näib olevat kõigi korduvate väikeste ülesannete eemaldamine, mida me arendusprotsessi sisse keerame. Brauseri uuesti laadimine, elemendi CSS-i muutmine, funktsioonide otsimine. Täielik au asjaosalistele, sest ka beetaversioonis on sulgude kasutamine värskendavalt hea. Vaadake nende YouTube'i kanalit.

Ja kui soovite täiustatud kasutuskogemust, saate nüüd registreeruda Adobe loomepilves ja hankida servakoodi. Sulgudes ehitatud Edge Code lisab tüpograafia ja PhoneGapi suurepäraseid omadusi.

10. Modernizr 2.6

Hind: Tasuta

Parema geolokatsiooni, WebGL-i ja paljude kogukondade poolt tuvastatud avastuste abil on Modernizri uusim värskendus pakkunud progressiivse täiustuse kabali jaoks olulisi uusi tuvastusi, et hambad kätte saada.

Populaarse brauserivõimaluste tuvastamise tööriista versioon 2.6 värskendab ka paari sõltuvust, kuid kõige suurem hulk uusi tuvastusi tuleb kogukonnalt. Loend ise teeb huvitavaks lugemise: css-backgroundposition-xy, css-subpixelfont, svg-filters, vibration…

Kui soovite kasutada uusimaid funktsioone vastutustundlikult, on see kogu, mida peate ajakohastama.

11. Trello

Hind: Tasuta

Seal on üllatavalt palju projektijuhtimise tööriistu. Nad jälgivad kellaaega ja määravad meeskondi, kuid väga vähestel neist on selline loomulik külgetõmme, mida Trello ilmutab labidates.

Visuaalne metafoor on tahvel. Lihtne kontseptsioon, kuid Trello muudab selle millekski, mis suudab ühe pilguga kuvada projekti kõik pisiasjad. Mida teha, see on tehtud, täielik. Kommenteerimine, jagamine, failide lisamine, prioriteetide seadmine. Trello teeb seda kõike lõbusaks ja aitab seda tehes oma kahetsusväärse mina laevakujuliseks meenutada. Hea kraam.


12. TypeCast beeta

Hind: Beetaversiooni ajal tasuta

Tänu suurele edasiminekule veebifondides on tüpograafia muutumas veebidisaineri töö järjest olulisemaks elemendiks. Kuid lihtne asjaolu, et nüüd on tuhandeid fonte valida, ei muuda seda tööd tegelikult lihtsamaks. Selleks soovite TypeCasti.

TypeCast võimaldab teil valida oma fonte tarnijate Fonts.com, TypeKit, FontDeck ja Google seast. Kuid see võimaldab teil ka tegelikult kompekte luua, neid stiilida ja kõrvuti alternatiivsete kujundustega võrrelda. Seejärel avaldage lihtsalt URL, kui soovite tagasisidet. Fonte ei pea tegelikult ostma enne, kui olete otsustanud lõpliku sisselogitud lahenduse.

Kasutajaliides on nii intuitiivne, et koputate uue lehe kontseptsioonid kiiresti välja. Pole kahtlust, et see on suurepärane viis veebis tüübi katsetamiseks ja tulemused räägivad iseenda eest. Kas see on tegelikult aja kokkuhoid, on vaieldav - tüpograafiliselt vaidlustatud inimeste jaoks võib see olla tohutu (kuid nauditav) küüliku auk, mis kaob.


13. Võre

Hind: 12 dollarit komplekti kohta / 18 dollarit kuus

Võrgustik on saamas sama palju veebidisaini keskpunktiks, nagu traditsiooniliselt trükimaailmas, kuid millele on lisatud mõningaid komplikatsioone. Ilmselt peavad need võrgud olema paindlikud ja reageerivad. Aga kuidas sa sellise asjaga mängid, kui arvutused muudkui segavad? Vastus: Võre.

Mark Boulton Designis loodud rahva loodud võrgukomplekt võimaldab teil uurida võrkude võimalusi, lisades veerge, määrates suhtarvud ja määrates vihmaveerennid, muretsemata aritmeetika aluseks. Loodud kood on suuremeelne sel lihtsal põhjusel, et see katab kogu aluse. Samuti saate pngs, .js ülekatte ja CSS / HTML-failid. See avab uurimisvõre.


14. Yeoman

Hind: Tasuta

Kaasaegne veebiarendus näib ühinevat paljude väikeste avatud lähtekoodiga projektide ja tööriistade ümber. Sellised nagu Bootstrap, Compass ja PhantomJS. Iga pakett, mis annab uue töö jaoks ühe aspekti, võib olla testimine, CSS-i raamistikud või koodide kompileerimine.

Yeoman on Google'i katse koondada neist rakendustest parimad ühe kohandatava bänneri alla. Uute veebirakenduste tellingute koostamine, pakettide ajakohasena hoidmine, koodi automaatkompileerimine, piltide optimeerimine. Yeoman on su selja saanud. Nagu öeldakse.

Kui Yeoman ja selle sõltuvused on installitud, toimub võluvägi kõik käsureal, nii et teil oleks ideaalne seal käske anda. Kui te pole seda, ärge muretsege, süsteem on väga hästi dokumenteeritud, isegi nii, et see on hea koht Yeomani pakitavate asjadega tutvumiseks.

15. Emmet

Hind: Tasuta

Varem tuntud kui Zen Coding, projekt Emmet, edastab CSS-i sarnase lühikirja teie käsitsi kodeeritud lehtedele. See on lihtne mõiste, mis põhineb „jupi” ideel, pakkudes teie jaoks tööriista, et lõigata läbi kõige korduvamad kodeerimisülesanded nagu nuga võiga.

Rakendage lihtsat süntaksit: ’p.klassi_nimi’ annab teile ’p> / p>’. Pesitsemine on lihtne: ’div> p.klassinimi’ muutub ’div> p> / p> / div>’. Saate pildi. Võite isegi manustada loremi impsumi teksti, genereerida loendeid ja kui olete asjadest aru saanud, saate luua oma otseteed ja koodilõikude struktuurid.

Kokkuvõttes on see tõeliselt võimas laiendus, mis on saadaval laia valiku populaarsete toimetajate jaoks. Kui kodeerite käsitsi, säästab see palju aega. Ärge siiski üle pingutage, kuna stringid muutuvad kiiresti dešifreerimatuks.

16. Ülev tekst 2

Hind: $59

Kodeerimiskeskkonna õigeks seadmine võib olla keeruline. Kas soovite palju nuppe, menüüsid ja esiletõstmisi? Või kas eelistate minimaalset liidest ja eelistate sõltuvustega ise hakkama saada? Küsimusi on lõputult, kui hakkate neid küsima.

Ülev tekst 2 soosib minimalistlikku lähenemist. Kaunilt lihtne tekstiredaktor keskendub kirjutamiskogemuse siidiseks muutmisele, nii et saate oma koodi välimuse ja käsitseda just nii, nagu soovite.

Toetatakse paljusid keeli, sealhulgas C ++, Clojure ja Markdown, redigeerimisfunktsioonidega, näiteks taanduvate koodide kokkuvarisemisega, saab kenasti hakkama ja Minimap annab teile lehel kiire navigeerimise.

17. Microsoft WebMatrix 2

Hind: Tasuta

Ühel või teisel ajal on peaaegu kõik veebis töötavad Microsofti neednud. Ütleme nii, et nende nime vastu on mõni must märk. WebMatrix 2 näitab, et see ei pea nii olema. Kaugel sellest.

WebMatrix 2 on suurepärane IDE, millega töötada, olenemata eelistatud keelest või raamistikust, milles töötate. See on puhas vaadata, kiiresti kasutatav, kasulik, kuid pealetükkimatu. Ja kui juhtute olema .NET-i pühendunu, teeb see teie elu palju lihtsamaks.

Andmebaasidesse ühendamine või CMS-i baasi installimine, isegi Node.js abil häkkimine. WebMatrix tegeleb asjadega tõhusalt. Kui varasemad MS-i tooted on oma saavutuste üle karjumise tõttu ülerahvastatud, kohtleb see rakendus teid kui täiskasvanut. Seda parem on, kui olete täiskasvanu, kes töötab C # -s.

18. PhoneGap 2.0

Hind: Tasuta

Kõik näivad nõustuvat, et mobiil on uus must. Ja kuna see on nii, on vanasõnas suur piin, et see "uus" platvorm suutis taastada nii palju töölaua ees seisvaid probleeme: erinevad API-d, keeled, brauserid, failivormingud ... Õnneks on PhoneGap läinud kaugele nende raskuste silumiseks.

PhoneGap 2, esimene väljaanne pärast Adobe haaramist, on märkimisväärne edasiminek vähemalt kahel põhjusel. Esimene on platvormide lihtne kasv, kaasa arvatud Windows 8 telefon. Teine on PhoneGap Buildi kättesaadavus, mis annab arendajatele ühe kompileerimispunkti, mis on võimeline jõudma igale platvormile. Pole ime, et rakendusi on nii palju.

19. Firefox 18

Hind: Tasuta

Veeb liigub praegu üsna kiiresti - isegi omaenda standardite järgi. Järelikult on Firefoxi jaoks olnud kiire aasta. Midagi, mille eest me kõik ülejäänud peaksime olema väga tänulikud.

Tutvustades hulgaliselt uusi tehnoloogiaid alates veebipesadest kuni IndexedDB ja kasulike tööriistadeni, nagu veebikonsool ja Javascripti käsiraamat, on Firefox andnud arendajatele võimaluse uurida uusi võimalusi ja tööriistu, et seda oluliselt kasumlikumaks muuta.

Mozilla jõupingutuste püsivus muuta uhiuute ja vanade tehnoloogiate kasutamine tõhusamaks on pehmelt öeldes muljetavaldav.


20. Photon

Hind: Tasuta

See on lõbus projekt. Photon loob 3D-ruumis renderdatud DOM-elementidele lihtsa valgusefekti. Selle teeb võimalikuks uus fikseeritud CSS-i teisendusvara. Või kuna see on õigemini tuntud atribuut ’[hankija eesliide] - muuda’.

See on nutikas värk, ehkki pea keerutamiseks mõnevõrra keeruline ja vana CPU-le veidi raske. Kuid Photoni looja Tom Giannattasio teeb selle kasutamiseks origami kraana kujul hea juhtumi. Käivitage korralik brauser ja võtke see keerutamiseks.

Meeldis see? Loe neid!

  • Rakenduse loomine
  • Laadige alla parimad tasuta fondid
  • Parimad tasuta veebifondid disaineritele
  • Vaadake, mis on liitreaalsuse järgmine

Kui olete hiljuti kohanud mõnda lahedat tööriista, mis pole meie loendisse jõudnud, kuid arvate, et neil peaks olema, palun andke meile kommentaarides teada. Samamoodi, kui olete loonud tööriista, mida soovite, et me järgmises kokkuvõttes esitaksime, tulistage meile e-kiri!


Meie Valik
Animeeritud liikide lähedased kohtumised
Loe Rohkem

Animeeritud liikide lähedased kohtumised

Nüüd, juba 18. korda toimuv lühifilmi- ja animat ioonife tival Encounter on iga-aa tane filmiloojate talent, mi ke kendub meediumi kahele kõige nõudlikumale teadu harule.2012....
5 suurepärast näidet isikupärastatud sotsiaalsete ikoonide kohta
Loe Rohkem

5 suurepärast näidet isikupärastatud sotsiaalsete ikoonide kohta

ot iaalmeedia ikoonid on peaaegu iga eal a uva veebi aidi lahutamatu o a. Kuigi mõned võivad valida tradit ioonili e, oovivad tei ed li ada oma kontaktandmetele natuke i ik u t. iin oleme v...
Tippdisainerid maalivad heategevusürituseks Oscari võitnud koera
Loe Rohkem

Tippdisainerid maalivad heategevusürituseks Oscari võitnud koera

uurbritannia Bri toli linn on tuntud oma kultuurili e mitmeke i u e poole t ja tutvu tab ageli tänavakun ti, et tähi tada loominguli u t ja koguda vahendeid erinevatele heategevu organi at ...