Webfejlesztési eszközök. Gentleman's dev kit. Funkcionalitási eszközök

Szakterületünkön nagyon fontos az adott feladat elvégzésének ismerete, valamint kreatív megközelítés alkalmazása. Ez azonban nem mindig elég. Nagyon fontos a megfelelő eszközök kiválasztása is, amelyek segítségével sokkal könnyebben és gyorsabban megoldható a feladat. Valójában a fejlesztők nagyon gyakran „tegnap” kapnak projekteket, és az idő sem utolsó tény a megvalósításukhoz. Itt olyan forrásokat és eszközöket talál, amelyek megkönnyítik a webes projektek különböző szakaszait.

Elrendezési eszközök

A MockFlow egy Flash-alapú szolgáltatás, amely lehetővé teszi drótvázak létrehozását egyszerű elemekkel a prototípus elkészítéséhez. Ideális egyéni tervezőknek és professzionális interfészfejlesztők csapatainak is, mivel rendelkezik az összes szabványos eszközzel az interfész prototípus készítéséhez.

keretdoboz

A Frame Box egy nagyon egyszerű online webhely-elrendezési eszköz. Nagyon gyorsan létrehozhat drótvázat az UI elemekkel, átméretezheti őket, és még az elrendezés szélességét is beállíthatja. Az elrendezést a közösségi hálózatokon is megoszthatja. Elég egyszerű és hatékony.

Ikonok

Érdekes forrás ingyenes ikonok letöltéséhez.

Itt nagyon sok érdekes ikont találhat. Kiválasztás után módosíthatja a hátterét, a dőlésszögét, a színét is. A keresés kulcsszavakon alapul.

Ez a megfelelő hely azok számára, akik minimalista ikonokat keresnek. Letölthetők PNG vagy SVG formátumban.

Az ezen az oldalon megjelenő összes ikon tiszta CSS-ben és egyetlen HTML DIV blokkban készült.

Egy webhely, amely ikon-betűtípusokat biztosít. Csak hozzá kell adnia a kívánt betűtípust a gyűjteményhez, importálnia kell css-be, kötnie kell egy osztályt és alkalmaznia kell a megfelelő helyre. Itt láthat egy példát.

Textúrák

A textúrák keresése meglehetősen kényelmes, mivel különböző kategóriákra vannak osztva.

Egy másik érdekes textúragyűjtemény. Az a nagyszerű ezen az oldalon, hogy jó néhány kategória létezik, amelyek sokféle textúrát (például fényeket vagy növényi leveleket) fednek le, amelyeket sehol máshol nem találsz.

Az oldalon meglehetősen sok ingyenes textúra, kép és 3D modell található.

stock képek

A kívánt kép minden erőfeszítés nélkül megtalálható.

A Dafont nagyon sok betűtípust kínál, amelyek többsége ingyenes kereskedelmi és személyes használatra. Itt azonnal megtekintheti, hogyan fog kinézni a szöveg. Sok különböző kategória kereshető. Cirill betűtípusokat is találhat. Nál nél

Rendkívül kényelmes szolgáltatás a betűtípusok beágyazásához és TrueType, WOFF, EOT Lite, EOT Compressed és SVG formátumba való automatikus konvertálásához. Az oldalon ingyenes betűtípusok galériája is található.

A betűtípusok beágyazása a Font Squirrel használatával a cikkben olvasható.

Az Identifont ingyenes betűtípusokat tartalmaz a Fontset nevű szakaszban. De ennek az erőforrásnak a segítségével is meg tudja határozni a betűtípust.

A szolgáltatás lehetővé teszi annak meghatározását, hogy melyik betűtípust használtuk, ha képet töltünk fel rá. Ezenkívül számos ingyenes betűtípust is letölthet.

Úgy gondoljuk, hogy nincs értelme leírni ezt az erőforrást. De még mindig. Ezzel kiválaszthatja a kívánt betűtípusokat, és importálhatja azokat webhelyére.

Funkcionalitási eszközök

Ez egy JavaScript-könyvtár, amelynek célja annak észlelése, hogy egy böngésző támogatja-e a HTML5-öt és a CSS3-at. Abban az esetben, ha az új funkciók nem támogatottak, bizonyos osztályokat alkalmazunk a HTML-címkékre.

Aki még nem ismeri valahogy a könyvtárat, az a Habrén olvashat a gyakorlati alkalmazásról.

A Ringmark egy webes teszt a mobilböngészők képességeinek meghatározására.

A polifill-ek olyan szkriptek, amelyek utánozzák a natív API-k viselkedését a régebbi böngészőkben. Itt több mint 40 szkriptet találhat. Néhányukban:

  • jQuery-Animate-Enhanced $.animate() metódus a Webkit, Mozilla és Opera CSS-átmeneteinek meghatározásához. IE6+ kompatibilis.
  • A CssSandpaper egy JavaScript-könyvtár, amellyel egészen érdekes effektusokat hozhat létre.
  • A jQuery-Anystrecht egy bővítmény, amely a css3 háttérméret modellezését hangsúlyozza.
  • A Transform.js és a Transitions.js szintén nagyon hasznos bővítmények, amelyek új lehetőségeket nyitnak meg.

Képgalériák

Reszponzív képgaléria feliratokkal.

A Touch Touch egy képgaléria, amely tökéletes megoldást kíván nyújtani mobil Android és IOS eszközökhöz.

Egyszerű parallaxis tartalomcsúszka különféle animációkkal.

Szöveges tartalmak, feliratos képek és videók elhelyezésére alkalmas csúszka. Ezenkívül végtelen, mert ha a felhasználó az utolsó képre lép, akkor automatikusan az elsőre megy.

Sprite generátorok

Mindenki ismeri a CSS sprite használatának előnyeit. Egy automatikus sprite generátor segítségével rengeteg időt takaríthatunk meg. Ez a generátor lehetőséget biztosít sprite létrehozására .png, .jpg formátumban és css kód generálására.

Hasznos oldalak

Összefoglalva, annak érdekében, hogy folyamatosan naprakész maradhasson a trendekkel, az alábbiakban felsorolunk néhány oldalt, amelyek ebben nagy segítséget nyújtanak Önnek.

  • A World Wide Web Consortium (W3C) egy olyan szervezet, amely technológiai szabványokat fejleszt és valósít meg a World Wide Web számára. A W3C közös alapelveket és szabványokat dolgoz ki az internetre vonatkozóan (úgynevezett „ajánlás”, eng. W3C ajánlások), amelyeket aztán szoftver- és hardvergyártók valósítanak meg. Ily módon kompatibilitás érhető el a különböző cégek szoftvertermékei és berendezései között, ami tökéletesebbé, sokoldalúbbá és kényelmesebbé teszi a világhálót.
  • A WebPlatform.org egy nyílt forrás, ahol a fejlesztők megosztják egymással tapasztalataikat. Az oldalon érdekes trendekről olvashat a HTML5, SVG, CSS3, animáció, videó, WebGL stb. terén.
  • A Html5 Kérem, egy nagyszerű forrás, ha tudni szeretné, hogy milyen újdonságok vannak a böngészőkben. Ezen túlmenően különféle többkitöltések és tartalékok használhatók, ha a tulajdonságok nem támogatottak.

Fordítás - Íróasztal

A haladás nem áll meg. Szinte nap mint nap látjuk, hogy születnek új szolgáltatások, programok, amelyek a webes szakemberek munkáját könnyítik meg.

Ebben a cikkben azokról az eszközökről szeretnék mesélni, amelyekre egy webdesignernek szüksége van a munkája sikeres és hatékony elvégzéséhez. Ez különösen fontos manapság, hiszen a technológia rohamosan fejlődik, és a Photoshoppal önmagában nem jutunk messzire.

Azok az eszközök és szolgáltatások, amelyekről ebben a cikkben mesélek, nemcsak a webdesignerek, hanem az online vállalkozók és a hétköznapi bloggerek számára is hasznosak lesznek.

Nos, készen állsz? Akkor kezdjük!

Vázlat

A Sketch az egyik legnépszerűbb webtervező eszköz. Régóta harcol a Photoshoppal a pálmáért a webes felületek fejlesztésében.

Az Adobe ötletéhez képest ennek a terméknek van néhány előnye. Ilyen például a sebesség, az alacsony erőforrásigény és a webes felület kialakítására való összpontosítás.

Egyetlen hátránya, hogy csak MacOS platformokat támogat. A termék 99 dollárba kerül, de ennek ellenére a felhasználói vélemények szerint a Sketch megéri a pénzt. Ahogy az várható volt a fizetős szolgáltatásoknál, a fejlesztők ingyenes próbaverziót biztosítanak.

Ara papagáj

A Macaw egy olyan eszköz, amelyet a tervezők építettek a tervezők számára. Fő jellemzője a webhelyek fejlesztése kódírás nélkül. Mint tudják, az utóbbi időben nagyon elmosódtak a határok a fejlesztők és a webdesignerek között. Az ara pedig valósággá teszi.

A Macaw segítségével reszponzív elrendezést érhet el a HTML és a CSS ismerete nélkül. Csak a megjelenésen kell dolgoznia, ezután maga az alkalmazás generálja a forráskódot.

A szoftver kétségtelen előnye a könnyű használhatóság. Azaz alig fél óra alatt megtanulhatod, hogyan készíthetsz adaptív weboldalsablonokat. És ami a legmeglepőbb, az ara teljesen ingyenes!

UXPin

Az UXPin egy komplett webtervezői eszköz. Meglehetősen sokoldalú, és nem korlátozódik egyetlen konkrét funkcióra sem.

Az UXPin segítségével weboldalakat és alkalmazásokat is tervezhet iOS rendszeren. Létrehozhat egyszerű projektvázlatokat és részletesebb felületsablonokat is.

Szükség esetén lehetőség van projektek importálására Photoshopból és Sketchből. Ezenkívül, ha a semmiből hoz létre egy projektet, használhat UX-mintákat olyan keretrendszerekből, mint a Bootstrap, Foundation stb.

Csoda

A Marvel egy másik eszköz a webhelyek és mobilalkalmazások vázlatainak létrehozására. Ennek a szolgáltatásnak a fő előnye a könnyű használhatóság. Íme, amit a szolgáltatás alapítója mond erről:

Azért hoztuk létre a Marvelt, hogy az emberek a lehető legkönnyebben megvalósíthassák marketingötleteiket. A Marvel egy rugalmas eszköz, amellyel egyszerű képekből és vázlatokból valódi interaktív prototípust készíthet egy weboldalról vagy alkalmazásról.

A Marvel sajátossága, hogy regisztrációkor hozzáférést kér a Dropboxon lévő fiókhoz. Ez szükséges a projektfájlok további importálásához. Az eszköz kétségtelen előnye az ingyenes alapcsomag.

webflow

A Webflow egy másik csodálatos webes alkalmazás, amely lehetővé teszi gyönyörű és reszponzív webhelyek könnyű létrehozását. Nem kell azonban olyan technológiákkal rendelkeznie, mint a HTML és a CSS.

A Webflow létrehozásának ötlete két testvértől származik, akik közösen foglalkoznak a webhelyek fejlesztésével. Egyikük programozó, másikuk webdesigner volt. Azzal az ötlettel álltak elő, hogy készítsenek egy ilyen alkalmazást, amellyel úgy alakíthatja ki az oldal megjelenését és vázát, hogy nem tud semmit a programozásról. Hát nagyon jól csinálták.

Canva

A Canva az egyik legjobb grafikai tervezési platform. Ezzel az eszközzel szinte bármilyen grafikai elemet létrehozhat.

A Canva különösen hasznos e-könyvek, infografikák, prezentációk és egyebek borítóinak készítéséhez. Figyelemre méltó, hogy a startup közösségben egy jól ismert személy, Guy Kawasaki dolgozik a Canván.

Ez a grafikus platform shareware. A Canva által kínált grafikai elemek között vannak fizetett és ingyenes lehetőségek is.

Főnév Projekt

A Noun Project nagyszerű forrás lehet webhelye vagy blogja grafikai elemeinek megtalálásához. A szolgáltatás segítségével a tervezők is kereshetnek munkájukkal.

Papír

A Paper az egyik legjobb iOS-alkalmazás a tervezők számára. Használja gyors jegyzetek, vázlatok, vázlatok és egyebek készítéséhez.

Az alkalmazás fejlesztője, az ötvenhárom emellett egy eredeti és nagyon funkcionális ceruzát is biztosít.

A papír különösen hasznos lesz egy projekt gyors vázlatainak elkészítésekor, valamint a tervezők napi munkájában.

Astropad

Az Astropad nagyszerű megoldás lehet a Mac webes tervezők számára. Ezzel az alkalmazással rajztáblát készíthet iPadjéről vagy iPhone-járól, amely szinkronizálni fog a Mac számítógépével.

Így weboldalakat és alkalmazásokat tervezhet a tollal és a táblagéppel, amelyek viszont csatlakoznak a Mac-hez. Mostantól sokkal élvezetesebb lesz a munka, és ezentúl a csuklója is ellazul.

Ikonkereső

Az Iconfinder az egyik legjobb webhely-favicon szolgáltatás. Adatbázisa több mint 800 ezer grafikai elemet tartalmaz. A kínálat fizetős és ingyenes opciókat is tartalmaz.

Nyugodtan kijelenthetjük, hogy az Iconfinder sok pénzt takaríthat meg, amikor ikonokat kell vásárolnia webhelyéhez.

365 Psd

A 365 Psd az ingyenes psd makettek és vektorképek egyik leggazdagabb tárháza. Itt mindent megtalálhat a céglogóktól a vadon élő állatok és a természet képeiig.

Freepik

A Freepik az ingyenes vektorok, ikonok és képek másik jó forrása. Szinte az összes anyag ingyenesen kölcsönözhető, feltéve, hogy tartalmaz egy backlinket. A rendelkezésre álló grafika mennyisége egyszerűen lenyűgöző.

Adobe Color CC

Az Adobe Color CC, amelyet általában Adobe Kulernek hívnak, régóta a tervezők egyik nélkülözhetetlen eszköze. Az Adobe Kuler nagy segítséget nyújt a színek és árnyalataik kiválasztásában, ha felületelemeken dolgozunk.

Különösen hasznos a színséma kiválasztásának funkciója. Összesen körülbelül hét van belőlük. Az Adobe Kuler segítségével sokkal magabiztosabb lesz a színekkel való munka és a sikeres árnyalatok kiválasztásában.

paletta

A Paletton lényegében ugyanazt a funkciót látja el, mint az előző szolgáltatás – webes színekkel dolgozik. A Paletton nagyszerű alternatívája a Coolernek, és van néhány különleges funkciója. A kezdők mindkét lehetőséget kipróbálhatják, és kiválaszthatják a nekik tetszőt.

Google Fonts

Google Fonts az egyik kedvenc szolgáltatásom. Sok webhelykészítő és tervező régóta értékeli a Google következő termékét.

Mint tudják, a betűtípusok szellemi tulajdon. Ez azt jelenti, hogy vagy fontokat kell vásárolnunk az oldalhoz, vagy ingyeneseket kell használnunk.

Nem nagyon szeretünk digitális termékeket vásárolni, így a Google betűtípusai sokat segíthetnek ebben a helyzetben. De ez egyáltalán nem szégyen, mivel a Google betűtípusai nagyon szilárdak. Mára több mint 700 tárgy van a gyűjteményükben. A világ minden tájáról érkező fejlesztők pedig már régóta rabjai ennek a szolgáltatásnak.

Általánosságban elmondható, hogy ha betűtípusokra van szüksége webhelyéhez, üdvözöljük a Google betűtípusok oldalán!

Betűtípus Mókus

Véleményem szerint a Font Squirrel a legmenőbb betűtípus-szolgáltatás. Előnye a Google szolgáltatással szemben a nagyobb betűkészlet.

A betűtípusok telepítése egy webhelyre nem a legegyszerűbb dolog, ezért külön videót készítettem erről a témáról. Ebben világosan bemutatom, hogyan lehet betűtípusokat letölteni és telepíteni a Google és Font Squirrel tárolókból. Az alábbi képre kattintva megtekintheti a képernyőfelvételt:


tabló nyilvános

A Tableau Public egy nagyszerű adatvizualizációs eszköz. Segítségével a száraz adatokat színes és vizuális grafikonokká és diagramokká alakíthatja. Próbáld ki. Biztos vagyok benne, hogy az oldal látogatói értékelni fogják.

Logotó

A weboldal logójának fontosságát nem lehet túlbecsülni. Segítségével keltheti az első és legmaradandóbb benyomást felhasználóiban.

De hogyan készítsünk logót a céged szellemében? Hogyan lehet ne csak kellemes és szép, hanem megfelelő benyomást kelteni az emberekben?

A Logopond szolgáltatás segítségével sok érdekes ötletet és kész megoldást találhat weboldala vagy márkája logójának elkészítéséhez. A Logopond előre elkészített és meglévő logók archívuma. A velük való ismerkedés után sok hasznos dolgot tanulhat meg, és inspirálódhat sikeres tervezők munkáiból.

Siteinspire

Folytatva az inspiráció témáját... A webdesignerek időnként nem csak logók készítésekor, hanem nagy projekteknél is hiányoznak a motivációból és a friss ötletekből. Akár az üzlet jön, jön az úgynevezett kreatív válság.

Ilyen időszakokban nagy segítséget jelenthet a Siteinspire szolgáltatás. Úgyszólván úgy tervezték, hogy emelje a művész szellemét, mivel tele van a legjobb tervezők csodálatos munkáival.

Kész projekteket találhat témakörök, alkalmazott megoldások és sok egyéb szempont szerint.

színvadász

Néha, amikor bizonyos felületelemeket készítek webhelyemhez, gyakran szembesülök azzal a problémával, hogy válasszam ki a megfelelő színt vagy árnyalatot. Nehéz lehet kitalálni, melyik szín a legjobb.

Ugyanakkor megoldásként sokszor találok valami jó fotót, képet. Egy jó színkombinációt használhatnék a weboldalamon. De hogyan lehet ezt technikailag elérni?

Ebben segít a Color Hunter szolgáltatás. Csak fel kell töltenie a kívánt képet, és íme! Azonnal tájékoztatást kap a benne használt összes színről.

ColorZilla

A ColorZilla nagyon klassz dolog. Vagy inkább hosszabbítás. Segítségével megtudhatja bármely olyan szín megjelölését, amely tetszik Önnek, amelyet valamelyik oldalon talált.

A bővítmény telepítése után a böngészőben egy pipettaikon jelenik meg. Ha rákattint, aktiválódik az eszköz. Ezután csak rá kell kattintania a képernyő azon területére, amelynek színét tudni szeretné. Ezt követően egy bizonyos szín megjelölése azonnal a vágólapra kerül. És végül nem marad más hátra, mint beilleszteni a Photoshopba, egy stíluslapra vagy bármely más helyre. Minimális mozgás - maximális hatékonyság)

Átméretező

Az oldal fejlesztése során rendszeresen ellenőrizni kell a megjelenítését különböző képernyőfelbontásoknál. De valóban szükséges-e ehhez az összes létező eszközt használni?

Egyáltalán nem. Ugyanannak a Google-nak az új szolgáltatása segítségével egyszerre különböző eszközökön láthatod az oldalad megjelenítését: laptopon, táblagépen és okostelefonon. Csak be kell írnia webhelye címét az űrlapon, és meg kell nyomnia az Enter billentyűt.

A Resizer szolgáltatás segítségével nem félhet szem elől téveszteni közönsége egyik vagy másik részét. Ahogy mondják, minden ellenőrzés alatt áll)

Tehát ebben a cikkben 22 szolgáltatásról beszéltem, amelyek nagyon hasznosak a webes tervezők számára. Az általam bemutatott eszközök többsége azonban az online vállalkozók és bloggerek számára is hasznos lesz.

Örülök, ha hozzáadja a "kedvenceit" ehhez a listához. Nyugodtan tegyél fel kérdéseket a megjegyzésekben, ha vannak.

És ez mindenem. Remélem, ez a cikk hasznos volt az Ön számára. Ha igaz:

  1. Tedd közzé újra ezt az anyagot a közösségi hálózatokon, hogy több ember részesülhessen belőle;
  2. Iratkozz fel hírlevelemre, hogy ne maradj le a hasznos és érdekes blogbejegyzésekről.

A CLI segítségével racionalizálhatjuk és automatizálhatjuk a webfejlesztési folyamatot. Ezért ebben a cikkben bemutattunk néhány nagyszerű eszközt, amelyeket az asztalon és a szerveren is futtathat. Ezen kívül listánk PHP-eszközöket és JavaScript-könyvtárakat is tartalmaz. Nos, menjünk végig mindegyiken.

Guetzli

A Google új eszköze, amely lehetővé teszi a kép eredeti méretének 35%-ával tömörítését a minőség megőrzése mellett. Ez egy igazi lelet, tekintve, hogy a hasonló nyílt forráskódú programok (például a JPEGOptim és a jpegtram) erre csak 20%-ban képesek. Úgy tűnik, hamarosan számos CMS-alkalmazás és bővítmény fog megjelenni, amelyek a Guetzlit integrálják a JPEG-képek optimalizálására.

/

Fejlesztői ütemterv

Általában ez egy infografika, amely egy webfejlesztő útját mutatja. Három irány létezik: előtér, háttér és DevOps. Ennek a dolognak a segítségével láthatod, hogy most melyik szakaszban vagy, mi hiányozhatna és merre fogsz továbblépni.

/

Netlify CMS

A SmashingMagazine megtette azt a merész lépést, hogy megszabaduljon a WordPresstől, és úgy döntött, hogy kipróbál valami újat egy másik, Netlify CMS nevű tartalomkezelő rendszerrel. Ez egy vadonatúj, a React.js-be épített eszköz, amely olyan statikus webhelygenerátorokba integrálható, mint a Jekyll, Hugo és MiddleMan.

/

BadSSL

Ez egy webes erőforrás, amely lehetővé teszi az SSL-konfiguráció ellenőrzését. A BadSSL egy remek és praktikus eszköz az SSL-hibák megtalálásához és kijavításához a webhelyén.

/

Alix

Chrome-bővítmény, amely lehetővé teszi a webhelyéhez való hozzáférés ellenőrzését. A telepítés és aktiválás után a beépülő modul egy átfedő ablakot ad az oldalhoz, amely figyelmeztet a hibákra.

/

AR.js

Ez a JavaScript-könyvtár lehetővé teszi a kiterjesztett valóság létrehozását és a vele való munkát webes technológiák segítségével. Meglepően gyors okostelefonokon.

/

React Trend

Ez az Upsplash egyik összetevője a felkapott vonaldiagramok létrehozásához. Testreszabható: beállíthatja a vonal vastagságát, színét, színátmeneteit és a görbe simaságát. a grafikus felhasználói felületet is használhatja az összetevőkód egyszerű létrehozásához.

/

Gitee

Egy macOS-alkalmazás, amely figyeli tevékenységét a GitHubon. Az eszköz új elemmel egészíti ki az állapotsort, amely jelzi a csillagok, feliratkozók és értesítések számát. Röviden, ez a GitHub az asztalon.

/

Hoppá

A Goops egy praktikus parancssori felület, amely elemzi a projektkönyvtárat, és meghatározza a .gitignore fájlhoz hozzáadandó könyvtárat és fájlokat. A CLI NPM-en keresztül telepíthető. A telepítés után be kell gépelnie a goops-t, és tulajdonképpen ennyi.

/

CSS hibakeresés

A DebugCSS egy CSS drop segédprogram, amely elemzi és ellenőrzi a CSS kimenetet a böngészőben. Maga az eszköz hasonló az Alix-hez – ha betölt egy debugCSS oldalt, az alkalmazás kiemeli az oldalon lévő hibás elemeket, és figyelmeztetéseket ad ki.

EagleJS

Az EagleJS egy JavaScript-könyvtár a RevealJS-hez hasonló prezentációk létrehozására. Az EagleJS egy JavaScript MVC keretrendszer, a Vue.js használatával készült, és a Pug-ot használja sablonként a dia létrehozásához.

BootstrapTour

JavaScript-könyvtár előugró útmutatók létrehozásához a Bootstrap komponens használatával. Az alkalmazás elemleírásai általában akkor jelennek meg, amikor egy új felhasználó megtekinti őket az alkalmazás felületén keresztül. Ez az ideális könyvtár, ha webhelye Bootstrap használatával készült.

Tégla

Ez egy JavaScript-könyvtár, amelyet a webalkalmazások felhasználói felületének létrehozására használnak. A gyűjteményben található összetevők között olyan funkciókat talál, mint a naptár, a menü és az űrlap. Tartalmaz egy "storage-indexeddb" komponenst is, amely lehetővé teszi az ügyféladatok tárolását az IndexedDB használatával.

Oktofa

Az OctoTree egy hasznos segédprogram, amely lehetővé teszi a Github-források és fájlok böngészését egy fastruktúra használatával, akárcsak egy IDE-szerkesztőben. A Chrome, a Safari, a Firefox és az Opera bővítményeként használatos, és elérhető a hivatalos bővítményboltjukból. Az Octotree magán- és vállalati Github-tárolót tart fenn.

.

Github értesítés

Egy másik hasznos Github-bővítmény a Chrome-hoz. A telepítés után akkor is kaphat értesítéseket, ha nem tartózkodik a Github oldalon.

Deployer

A Deployer egy fejlesztői eszköz a PHP webhelyéhez. Számos népszerű platformmal működik, köztük a WordPress, a Drupal, a Magento, a Laravel és a CodeIgniter. Ezzel az eszközzel saját algoritmusokat hozhat létre, amelyek a fejlesztés során futnak. Visszaállítási funkcióval működik, amely lehetővé teszi, hogy visszatérjen egy korábbi verzióhoz.

PHPStan

Ellenőrzi a PHP fájlokat hibákért.

NGINX kazánlemez

Nginx konfigurációk gyűjteménye, amely magában foglalja a háttér gyorsítótárazást, a csatlakozási és kérési sebesség korlátozását, valamint néhány egyéb módszert a webhely betöltési sebességének növelésére.

Pezsgő

Egy parancssor, amelyet a szerverére telepíthet tanúsítványok létrehozásához, kezeléséhez és megújításához a Let's Encrypt segítségével. Az SSL beillesztése most sokkal egyszerűbb.

,

Gofri rács

Egy másik Flexbox segítségével épített CSS rácsstruktúra.

Érdekelni fog:

A fejlesztők folyamatosan próbálják megkönnyíteni az életüket vagy bővíteni saját képességeiket. 11 eszközt készítettünk, amelyek ezt biztosítják.

A feladatok megvalósításához folyamatosan jelennek meg az online szolgáltatások, különféle eszközök. Kibővítik a programozási nyelvek standard szolgáltatásait, lehetővé teszik a szabványos feladatok néhány kattintással történő végrehajtását. Most foglalkozzunk a legjobb és leghasznosabb eszközökkel a vezető webfejlesztők arzenáljából.

Themify.me Ultra

Az internetes erőforrás-fejlesztők és webtervezők a létrehozás első napjától kezdve folyamatosan keresik a módokat az új erőforrások létrehozásának folyamatának egyszerűsítésére és felgyorsítására. Manapság számos eszköz egyszerűsítheti a webhelyfejlesztést, de Themify Ultra az összes analóg közül a legfejlettebb. Ezzel az eszközzel egy új erőforrás elindítása a lehető legegyszerűbbé vált, még soha nem volt ilyen egyszerű. Valójában ez a legdinamikusabb a WP meglévő témái közül.

A téma több mint 60 telepített formátumot tartalmaz, megoldást kínálnak a leggyakoribb kérdésekre. A dinamikus témával könnyen létrehozható egyoldalas webhely, valamint vállalati erőforrás vagy online áruház. Az összes téma szinte 1 kattintással betöltődik.

Themify Ultra- ez egy fizetős eszköz, de van próba verzió minden formátumhoz, ez lehetővé teszi, hogy megbizonyosodjon a kialakítás kiváló minőségéről, teljesítményéről és stabilitásáról. A bemutatott formátumok egy része teljesen ingyenes. A készítők garantálják, hogy fizetés után az ügyfél pontosan azt a terméket kapja meg, amelyet a demo verzióban tesztelt. Előfizetés vásárlása esetén az ügyfél emellett 1 éves technikai támogatást és rendszeres frissítéseket kap, újításokkal kiegészítve.

Tervezési bombák

TÓL TŐL Tervezési bombák Az oktatóanyagok terén páratlan ezen az oldalon található a legátfogóbb adatbázis a WordPress használatának megtanulásához. Elképzelni is nehéz, hogy egy általánosan elismert fórumon, ahol a világ minden tájáról összegyűlnek a fejlesztők és a tervezők, milyen rengeteg hasznos megoldás található. Számos érdekes megoldás segít bővíteni a létrehozott erőforrás képességeit.

A fórum egyetlen kisebb hátránya, hogy angol nyelven jelenik meg (nyilvánvaló, hogy a különböző országokból származó tervezők közötti kommunikációra csak az angol alkalmas). De maga az információkeresés jól felépített, szinte minden fejlesztő megérti a formát.

A szerzők nagy figyelmet fordítottak minden olyan terület létrehozására és lefedésére, amelyek szükségesek egy sikeres WordPress erőforrás fejlesztéséhez. Amint nehézségekbe ütközik a profil beállításával, a rendszer működésével stb., azonnal látogasson el erre a fórumra, és találjon utasításokat vagy megbeszélést a problémáról.

IMCreator

Aktívan fejlődő erőforrás, amely vezető szerepet tölt be a felhasználók vonzásában. IMCreatop egy hatékony platform a legkülönfélébb témájú és célú webhelyek gyors és problémamentes létrehozásához. Már ma is meghaladja a projekt közönsége 11 millió emberés egyre gyorsabban nő az előfizetők száma.

A fejlesztők ötlete egy olyan platform létrehozása, amely programozási ismeretek és a kód megérintése nélkül képes elvégezni a legtöbb manipulációt az oldallal. Még a fejlesztés területén ismeretekkel nem rendelkező személy is képes elkészíteni a kívánt helyszínt. A felhasználónak ki kell választania egy sablont, és a platform mindent feldolgoz, és barátságossá teszi a Google számára.

A könnyű használat nem ingyenes, a gyakorlatban a PRO-előfizetést évi 350 dollárért vásárolják meg, de a létrehozott erőforrások száma nincs korlátozva. Az ügyfelek egyedi weboldalt kapnak címkével, saját domainnel és tárhelytel, letöltött és telepített erőforrással.

wpDataTables.com

Az a gyakori feladat, hogy egy erőforrást vagy annak egy bizonyos részét táblázatkezelő alkalmazássá alakítsuk, egyszerűvé vált. Ha az oldal egyszerű, könnyen megteheti manuálisan, de ahogy az erőforrás fejlődik, már nem nélkülözheti a speciális ismereteket. wpDataTables egy bővítmény a WP számára, amely feldolgozza az adatokat, és néhány másodperc alatt táblázattá alakítja és grafikonokat készít.

A termék fontos előnye, hogy valós időben kommunikálhat a bővítménnyel. Az esetleges módosítások után a változások megjelennek a diagramon. Már ma is több mint 9 ezer cég használja a plugint a világon

Codester.com

Codester egy internetes piactér, ahol mindenféle webfejlesztő eszköz könnyen eladható és megvásárolható.

Mit lehet itt vásárolni:

  • PHP-szkriptek, amelyek nem nyilvánosak;
  • rendelési kód;
  • népszerű alkalmazások sablonjai;
  • egyedi témák;
  • bővítmények CMS-hez stb.

Az áruház nem korlátozódik egyetlen CMS-rel való együttműködésre, bármilyen platformra vásárolhat és értékesíthet terméket. A szolgáltatás azoknak a programozóknak hasznos, akik nem tudják elvégezni a munkát, nem akarnak időt vesztegetni, vagy csak pénzt keresni a munka kiterhelésével.

Az ilyen üzlet előnye, hogy összehasonlíthatja az áruk árait és minőségét, dönthet a funkcionalitásról, és csak ezután vásárolhatja meg a jelenlegi projekt legjövedelmezőbb megoldását. Más piacterekhez képest a Codesternek viszonylag alacsony árai vannak, és rendkívül ritka, hogy a friss termékek letöltésenként többe kerüljenek 15 dollárnál.

Bugherd

A fejlesztők régóta keresik az egyszerű és hatékony módszert a webhely hibakeresésére a projekt fejlesztési szakaszában. Nem minden vállalat engedheti meg magának, hogy tesztelőt alkalmazzon, ezért a BugHerd a megfelelő eszköz az erőforrások tesztelésére. A projekt lényege a felhasználó visszajelzési adatainak megvalósításában és elemzésében rejlik.

Ha a látogató bármilyen meghibásodást tapasztal, azonnal hibajelentést küld, és a problémáról részletes tájékoztatást ad a fejlesztőnek. Az eszköz segítségével lehetőség nyílik a közönséges áttekintések minőségi rendszerstabilitási jelentésekké alakítására és a fejlesztő számára a probléma megoldásához szükséges információkkal való ellátására.

Felhőszolgáltatás alapján működik, amely segíti a csapat munkájának szinkronizálását, az aktuális helytől függetlenül. Vannak funkciók a feladatok delegálására, hozzáférési szint beállítására, prioritásra, visszajelzés megosztására, kommunikációra, szűrésre, problématípus szerinti rendezésre stb.

Kezdetben egy próbaverziót kínálnak, amely lehetővé teszi a szolgáltatás képességének és funkcionalitásának értékelését, és a jövőben havonta kell fizetnie $29 .

EverSign

A szabadúszók célja, hogy minden olyan piacon dolgozzanak, ahol van kereslet és nagy a vásárlóerő. Általában Európából és az USA-ból származó ügyfelekről van szó, de velük probléma adódik a tranzakció jogi bejegyzésével. A folyamat gyakran időigényes, megterhelő és körülményes a részletek tömege miatt, és még bonyolultabbá válik, ha papíralapú szerződéskötésre van szükség. Szolgáltatás EverSign segít elkerülni ezeket a nehézségeket.

Az eszköz hasznos abban, hogy lehetővé teszi sokféle dokumentum létrehozását, jóváhagyását és aláírását teljesen legálisan elektronikus aláírással. Mára a szolgáltatást a legmegbízhatóbb forrásként ismerik el a jogerős szerződések megkötése terén. Magánügyfelek és kis- és nagyvállalatok egyaránt használhatják, a projekt univerzális.

Az induláshoz a legjobb módja az ingyenes csomag, amely havonta legfeljebb 5 dokumentum jóváhagyását biztosítja. Ha a korlát gyorsan kimerül, és több funkcióra van szükség, alap előfizetést kell vásárolni $99 korlátlan aláírással, három választható sablonnal és 24 órás támogatással.

ActiTIME

Ez egy rendkívül kényelmes és hihetetlenül nagy teljesítményű eszköz, amely lehetővé teszi a személyzet idő hatékony kezelését. A funkcionalitás elegendő a csapatok munkájának megszervezéséhez a projekteken és a feladatok időzítésének későbbi ellenőrzéséhez. Segít megelőzni a káoszt, és a csapatmunka hibakeresésének és az egyértelmű feladatbeállításnak köszönhetően a projektek sokkal gyorsabban befejezhetők.

ActiTIME segít összegyűjteni a riportok formájában bemutatott analitikai adatokat, amelyek jelzik az egyes feladatokra fordított időt. Lehetőség van a jelentés bemutatására grafikon vagy diagram formájában. A szolgáltatás nemcsak a munkaidőt tudja figyelembe venni, hanem kiküszöböli a pénzügyi ellenőrzésre fordított többletidőt is. Segít a számlázásban, bérszámfejtésben, számlakészítésben, nyaralás tervezésben stb.

CSS Design House

Az erőforrás nem csupán a tetszetős webhelyek újabb gyűjteménye. A CSS Design House a legjobb online aggregátor, amely segít kiválasztani a vezető tervező cégek termékeit. A legmodernebb, minőségibb és professzionálisabb tervezési ötletek az internet különböző területeiről kerülnek ide.

Az oldal kirakata modern, legjobb ötleteket tartalmaz magánszemélyek és nagy, kereskedelmi projektek számára egyaránt. Az erőforrás segítségével leegyszerűsödik a terv megvalósításához szükséges művész keresése.

LuckyOrange

Egyfajta detektív szolgáltatás, amely a felhasználói viselkedés nyomon követésére szolgál az erőforráson. Az eszköz működéséhez nem szükséges felhasználói regisztráció, működik még a most érkezett és az oldalt gyorsan elhagyó látogatókkal is. LuckyOrange segít megérteni, hogy a felhasználó pontosan mit csinált a munkamenete során.

A funkcionalitás lehetővé teszi az oldallal kapcsolatos problémák elemzését, hatékonyabb eszközök kiválasztását az ügyfelek megtartásához, és meghatározza a legnépszerűbb és legígéretesebb témákat. Ha van elképzelése a felhasználó interakciójáról, az erőforrásról alkotott elképzelése jelentősen növelheti a konverziót.

Az elemző blokk segítségével könnyen tájékozódhat a felhasználók számáról, az erőforráshoz való eljutásukról, az oldalon való böngészés történetéről, viselkedéséről, az egyes kulcskifejezések hatékonyságáról, a kommunikáció nyelvéről, a lakóhely országáról , stb. Az eszköz legfontosabb előnye a nagy pontosságú hőtérkép, amely megkönnyíti a legtöbb megtekintett tartalom megértését.

eladótárs

Ez egy rugalmas CRM rendszer a kisvállalkozásoknak. Az erőforrás-koncepció biztosítja az eszköz minimális bonyolultságát és egyszerű használatát. Az induló vállalkozások és a projektcsapatok a Salesmate segítségével gyorsabban kötnek szerződést az ügyfelekkel. A felhasználók száma már ma is meghaladta az 1200 vállalatot különböző országokból. A szolgáltatások ára demokratikus $15 havi. Az eszközzel lehetőség nyílik az adatbeviteli folyamatok automatizálására és az értékesítési teljesítmény nyomon követésére.

Az ugrásszerűen fejlődő WEB (reszponzív tervezés, CSS-előfeldolgozók, utófeldolgozók és egyéb dolgok) kihívást jelenthet lépést tartani valami újjal és hasznossal.
Az alábbiakban 14 eszközt talál, 7 webes tervezőknek és 7 webfejlesztőknek, amelyek segítenek a webhely elgondolásától a valóságig eljutni.

Webtervezőknek

1. Adobe Creative Cloud

Természetesen a Photoshop és az Illustrator két alapvető eszköz minden webdesigner számára. A Creative Cloud segítségével mindkettőhöz hozzáférhet, valamint néhány egyéb eszközhöz, például a Typekithez, az InDesignhoz és a Kulerhez. A Creative Cloud összes eszköze nagyon jól működik együtt, és minden tervező számára kötelező.

2. UI arcok

Mivel nehéz megtalálni a megfelelő képeket az elrendezéshez, az UI Faces avatarokat gyűjt a Twitteren keresztül, és elérhetővé teszi őket, hogy felhasználhassa őket a tervezéshez.

3,0-255

Szinte minden nap használom ezt az eszközt. A 0-255 megkönnyíti a kiválasztott szín variációinak megtalálását. Ez a tökéletes eszköz a kijelölésekhez, az aktív állapotokhoz és a kiemelésekhez.

4. Google Fonts

Az Arial, a Courier és a Georgia napjai óta nagy utat tett meg az interneten a tipográfia. A Google Fonts ingyenes, kész betűtípusok hatalmas könyvtára, amely már az elrendezés szakaszában betölthető.

5. Samuel L. Ipsum

A "Flight of the Serpent" című film rajongóinak bemutatom "Samuel L. Ipsum"-t (Samuel L. Ipsum). Ez a Lorem Ipsum idézet generátor. Ne feledje, három lehetőség közül választhat: Jackson-filmben megterhelt trágár idézetek, tiszta Jackson-film-idézetek és szokásos ol'lorem ipsum.

6. Reszponzív Sketch Pad

A Responsive Sketch Pad UI-sablonok jó társak, amikor az előtervezési fázisban van. A pontozott rács megkönnyíti a vonalak követését és a webhely megjelenítését a böngészőben és a mobileszközön.

7 ara

Ez az eszköz még nem jelent meg, de máris elég érdekes ajánlatnak tűnik. A Macaw ugyanazt a rugalmasságot ígéri, mint egy képszerkesztő, de szemantikus HTML-lel és tömör CSS-sel.

Webfejlesztőknek

1. Coda 2

Ez a kedvencem az all-in-one kódszerkesztő, az FTP kliens és a beépített MySQL szerkesztő miatt. A Coda 2 tartalmaz egy programozási referenciakönyvtárat és egy vizuális CSS-szerkesztőt is.
2. CSS előfeldolgozó
Attól függően, hogy mit fejleszt, az útmutató itt segít. A SASS futtatásához a Ruby szükséges (minden Mac-be beépítve), és alapszinten ugyanazt teszi, mint a LESS, egy másik előfeldolgozó. Mindkettő nagyszerű eszköz, és időtakarékos funkciókat kínál, például beágyazott szabályokat, keverékeket, változókat és logikát.
3. Front End Framework
Ismét két nagyszerű javaslatot kell megfontolni. A Twitter Bootstrap és a Zurb's Foundation együtt segíti a prototípus-készítést és a modern web fejlesztését gyorsabbá és egyszerűbbé tenni. Mindkét csomag reszponzív grid rendszer stíluselemekkel és alapértelmezett javascripttel a gazdag WEB megvalósításához.

4. Böngészőkészlet

Ez a kedvencem az egész készletből. A Browserstack lehetővé teszi, hogy bármilyen böngészőben és konfigurációban tesztelje az elkészült tervet. Ez egy praktikus eszköz, ha továbbra is támogatnia kell az IE7-et és az IE8-at projektjeiben.

5.Pingdom

Fedezze fel a DNS-t és a letöltési problémákat a Pingdom segítségével. Látni fogja, mennyi ideig tart a webhely különböző erőforrásainak betöltése, valamint az általános teljesítménypontszámot.

6. Chrome fejlesztői eszközök
Ha a Chrome Developer Toolkitben található egyik eszközt használja, akkor nevezzük azt Web Inspectornak. Az ellenőrrel együtt gyorsan diagnosztizálhatja a problémákat, és módosíthatja a jelölést. A konzolt hatékonyan használhatja a naplózásra és a JavaScript használatára is.
7. MAMP Pro
Könnyedén forgathatja a webhelyeket helyileg. A MAMP Pro megkönnyíti az Apache, MySQL és PHP fejlesztői környezet telepítését és adminisztrálását. Ha nagyszámú webhelyen dolgozik az ügyfelek számára, akkor rendelkeznie kell egy ilyen szerverrel.

A témát folytatva:
ablakok

Natalya Komarova , 2009. 05. 28. (2018. 03. 25.) Amikor egy fórumot vagy blogot olvasol, a bejegyzések szerzőire becenévvel és ... a felhasználó képével, az úgynevezett avatárral... emlékszel.