bár az írás vagy a kóddal való munka nem feltétlenül az elsődleges feladatod UX tervezőként (vagy egyáltalán a munkaköri leírásban), ez egy olyan készség, amely messzire viszi a munkáját. A fejlesztők és a mérnökök által használt nyelvek alapvető ismerete nemcsak jobb perspektívát nyújt a tervek életre keltésében, és segít a csapatok közötti kommunikációban, hanem lehetővé teszi, hogy a munkafolyamatokban is finomabbá váljon. (Tisztességes figyelmeztetés: Fejlesztői barátai hiányozhatnak, ha alkalmi nadrágja kisebb változtatásokat kér.)
bár sok nyelvet használnak egy weboldal felépítéséhez, a CSS csak az egyik leggyakrabban használt stíluslap nyelv, amelyet érdemes jobban megismerni. Valószínűleg már dolgozott vele, miközben ellenőrzéseket végzett a fejlesztőkkel, kicsi, stilisztikai módosításokat készített a beépített tervekhez, vagy saját interaktív prototípusokat készített az InVision stúdión kívül.
ahhoz, hogy ezeket a feladatokat (és még többet) megkönnyítsük, segít egy nagyszerű CSS-szerkesztő az eszköztárban. Akár a piacon egy újat (vagy szeretne segítséget választotta az első), összeállítottunk egy listát 10 a legjobb a piacon.
… de mielőtt belemerülnénk, menjünk ugyanazon az oldalon:
mi a CSS?
csak egy gyors frissítés: a CSS a “Cascading Style Sheets” rövidítése.”Ez egy stíluslap nyelv, amely segít egyszerre több oldal (például a háttérszín vagy a grafika) megjelenésének szabályozásában egy webhelyen, egyetlen fájl használatával. Ahelyett, hogy minden egyes oldal HTML-kódjába be kellene lépnie, és manuálisan módosítania kell,.a css fájlok széles körű változtatásokat hajthatnak végre a webhely összes oldalán.
miért van szükségük a tervezőknek CSS szerkesztőkre?
már említettük, de a tervezőknek CSS szerkesztőkre van szükségük ahhoz, hogy könnyen hozzáférjenek az a-hoz, és bármilyen változtatást végezzenek rajta .css fájl, amikor együttműködik a mérnökök vagy a fejlesztők, vagy épület ki a saját tervezésű. A CSS-szerkesztő használata nemcsak lehetővé teszi ezeknek a változtatásoknak a végrehajtását, hanem egyszerű módon is bemutatja a kódot, amely minimalizálja a hibák beillesztésének esélyét a fájlba.
Oké—most vissza a CSS szerkesztők lehetőségeihez:
10 nagy CSS szerkesztők, hogy használja
legnépszerűbb: fenséges szöveg
forrás: Sublime Text
Ár: ingyenesen “letölthető és értékelhető”, de nincs hivatalos korlát az értékelési időszakra. A folyamatos használatra vonatkozó kereskedelmi engedély 80 dollár.
operációs rendszerek:
- Mac OS X (10.7 vagy újabb szükséges)
- Windows
- Windows 64 bites
- Linux adattár
a Sublime Text egy reszponzív és gyors CSS szerkesztő, amely az egyik legnépszerűbb a piacon. Színkódolt nyelvi elemeket tartalmaz, amelyek könnyen és vizuálisan tartják a dolgokat a pályán, és egy kód automatikus kiegészítés funkció a weboldal testreszabásának felgyorsításához.
nagy együttműködés: Atom
forrás: Atom
Ár: Ingyenes
operációs rendszerek:
- Mac OS X (10.9 vagy újabb)
- Windows (7 vagy újabb)
- Linux (RedHat vagy Ubuntu)
Atom egy könnyen használható, nyílt forráskódú CSS szerkesztő, amely lehetővé teszi a valós idejű együttműködés másokkal a kódot (más néven olyan fejlesztők, hogy hozzá kell adni a saját csíp.)
a platform néhány intuitív funkcióval is rendelkezik, mint például:
- Automatikus kiegészítés a kód gyorsabb megírásához
- fájlrendszer böngésző, így egy vagy több projektet nyithat meg egyetlen ablakban
- az Atom praktikus kiterjesztéseként működő több “csomag” telepítésének lehetősége-még több funkciót adva a
együttműködéshez is nagyszerű: zárójelek
forrás: zárójelek
Ár: Ingyenes
operációs rendszerek:
- Mac OS (Mojave vagy újabb)
- Windows (7 vagy újabb)
- Linux (Ubuntu vagy Mint)
a Brackets egy nyílt forráskódú CSS-szerkesztő is, amely számos funkcióval rendelkezik, például egy élő előnézeti opcióval, amely összekapcsolja a böngészőjét, így közvetlenül a webhelyén láthatja a változtatásokat. Számos elérhető bővítménnyel is rendelkezik, amelyek még további testreszabást tesznek lehetővé.
nagyszerű Mac felhasználók számára: Espresso
forrás: Espresso
Ár: $79 (jön ingyenes próba)
operációs rendszerek: Mac OS (X vagy újabb)
Espresso egy CSS szerkesztő kizárólag a Mac OS. A zárójelekhez hasonlóan egy praktikus élő előnézeti eszközzel is rendelkezik, amely lehetővé teszi a webhelyén végrehajtott módosítások valós időben történő megtekintését. A webhelytervezők gyorsan dolgozhatnak olyan funkciókkal is, mint a keresés és a csere, valamint egy nagyszerű multi-edit eszköz, amely lehetővé teszi, hogy egyszerre végezzen tömeges szerkesztéseket.
nagy szerkesztő HTML, CSS, és egy maroknyi más nyelven: Jegyzettömb++
forrás: Jegyzettömb++
Ár: Ingyenes
operációs rendszerek: Windows (X vagy újabb)
a Notepad++ az egyik legnépszerűbb letölthető CSS—szerkesztő-jó okkal. A platform tele van olyan funkciókkal, mint az automatikus kiegészítés, a keresés és a csere, valamint a multiview, így egyszerre megnézheti a különböző projekteket. A Notepad++ több mint 20 nyelvet támogat, beleértve a CSS-t is, így valóban bejuthat a gyomokba a terveivel. 2019-től a CSS szerkesztő csak a Windows számára érhető el.
nagy azoknak, akik szeretik, hogy egyszerű: Komodói Edit
forrás: ActiveState
Ár: Ingyenes A Komodo Edit számára, de robusztusabb platformjuk, a Komodo IDE 295 dollárnál kezdődik egyetlen licencért.
operációs rendszerek:
- Windows
- Mac OS (X vagy újabb)
- Linux
a Komodo Edit egy minimális, de hatékony CSS szerkesztő eszköz. Ami hiányzik az olyan funkciókban, mint az élő előnézet vagy a valós idejű együttműködés, azt olyan eszközökkel pótolja, mint például a “Go to Anything”, amely lehetővé teszi olyan dolgok elvégzését, mint a szükséges fájlok keresése vagy a különböző menük megnyitása.
nagy kezdőknek: Stilizer
forrás: Skybound
Ár: van egy ingyenes próbaverzió és egy 79 dolláros egyszeri licencvásárlás ad egy termékkulcsot, amely Windows vagy Mac rendszeren működik, valamint egy 30 napos pénz-visszafizetési garanciát arra az esetre, ha vissza akar térni.
operációs rendszerek:
- Mac OS
- Windows
a Stylizer egy WYSIWYG CSS szerkesztő, amelynek élő előnézeti módja megkülönbözteti a piacon lévő többi CSS szerkesztőtől. A valós idejű előnézet, láthatjuk az összes változtatást a böngészőben, ahogy azokat. Azt is ad egy “figyelmeztetések” listát a hibákat úgy gondolja, hogy esetleg volna kódolás közben. Ez tökéletes minden újonc CSS szerkesztők odakinn.
nagyszerű azok számára, akik robusztus ingyenes CSS szerkesztőt keresnek: Visual Studio Code by Microsoft
Ár: Ingyenes
operációs rendszerek:
- Mac OS (X vagy újabb)
- Windows (7 vagy újabb)
- Linux (Debian, Ubuntu, Red Hat, Fedora vagy SUSE)
a Visual Studio Code (VSX) a Microsoft testre szabott CSS szerkesztője, és minden olyan robusztus funkcióval rendelkezik, amelyet elvárhat tőlük. Ez egy nagyon gyors CSS szerkesztő, olyan funkciókkal, mint az IntelliSense, amely “túlmutat a szintaxiskiemelésen és az automatikus kiegészítésen” a kód kitöltésével a “változó típusok, függvénydefiníciók és importált modulok alapján.”A VSX lehetővé teszi a kód hibakeresését közvetlenül a szerkesztőből.
nagy azoknak, akik szeretik a dolgokat gyors és egyszerű: Bluefish
forrás: kékhal
Ár: Ingyenes
operációs rendszerek:
- Mac OS (X vagy újabb)
- Windows (XP vagy újabb)
- Linux (Ubuntu, Debian és Fedora)
Bluefish egy egyszerű CSS szerkesztő a döntéshozók a munkahelyi termelékenység szoftver OpenOffice. A látvány és a felület szempontjából meglehetősen alapvető, de ez is szép és gyors. Nem fog leragadni egy csomó olyan funkció, amelyre nincs szüksége, mivel ezen a szoftveren gyakorlatilag nulla zsír van.
nagyszerű azok számára—akik robusztus szerkesztőt akarnak-és nem bánják, ha fizetnek érte: Rapid CSS
forrás: Rapid CSS
ár: kezdődik $39.95 (ingyenes próbaverzió) egy személyes, nem kereskedelmi engedély; $49,95 szakmai használatra.
operációs rendszerek: Windows (7 vagy újabb)
a Rapid CSS egy robusztus, többkódos szerkesztő, amely tele van olyan funkciókkal, mint a szintaxis kiemelése, az élő előnézet, a fejlett keresési és csere eszköz, sőt a “kódrészlet-könyvtár” a sablonokhoz.
letöltött egy CSS szerkesztőt, de még mindig szüksége van néhány tippre, hogy minden rendben legyen? Itt, hogyan lehet elkerülni a káoszt a stíluslapokban.