přejít na obsah přejít na navigaci

Linux E X P R E S, 13+ bezplatných nástrojů pro webové vývojáře a kodéry

13+ bezplatných nástrojů pro webové vývojáře a kodéry

color_palette.jpg

Pro vývoj webových stránek a aplikací je potřeba poměrně dost aplikací a podpůrných nástrojů. Je nutné je kupovat, nebo tuto poptávku pokrývá open source? Vybrali jsme několik aplikací, které považujeme za kvalitní a které nestojí ani korunu. Některé z nich jsou open source, některé dostupné jako webové online služby. 


reklama

Tento výběr je subjektivní, nemá jít o „konečný“ seznam. Vaše oblíbené programy uvítáme v diskuzi. A ano, ve Vimu to jde taky. ;-)

Pořádný editor nebo IDE

Každému vyhovuje něco jiného, někdo má rád Vi(m), někdo raději komplexní prostředí. Škoda, že Quanta Plus skončila tak potupně...

Komodo IDE

Komplexní vývojové prostředí s podporou pro „webové“ jazyky, chytrý editor (folding, kontrola syntaxe, nápověda k funkcím a samozřejmě zvýraznění syntaxe), projekty. Možnost rozšířit pomocí pluginů. Placená varianta má větší množství funkcí.

Naše starší recenze

http://www.activestate.com/komodo-edit, multiplatformní, 65 MB

Komodo Edit Komodo Edit

Aptana Studio

Další z aplikací založena na Eclipse, díky čemuž je poměrně náročná na výkon, ale zároveň poskytuje značný komfort v ovládání a dostupných funkcích. Obsahuje různé průvodce, integrovaný debuger, podporu pro Git, S/FTP/S, editor s mnoha funkcemi (nápověda k funkcím, útržky kódu, folding, zvýrazňování a další). Jde o komplexní IDE pro vývoj webových aplikací.

http://www.aptana.com/products/studio3, multiplatformní, 124 MB

Ale je dost možné, že vám bude stačit některé z jednoduchých editorů jako Medit, Geany nebo Gedit s pluginy – přečtěte si náš starší seriál.

Aptana Studio 3 Aptana Studio 3

Generátory kódu

Některý kód se obtížně ladí nebo připravuje. Práci mohou usnadnit generátory. Vybíráme některé z nich, všechny jsou to webové aplikace.

GenerateWP

Stačí doplnit názvy či argumenty a nástroj vám vygeneruje kód pro vytvoření vlastního typu článku, taxonomie, nového stavu článku, shortcode, sidebaru a dalších objektů používaných (a upravovaných) ve WordPressu. Minimalizujete tak riziko chyby a ušetříte si čas.

http://generatewp.com, online

Initializr – kostra nového webu

Když chcete vytvořit stránku postavenou na HTML5 a CSS3, která má být responzivní, validní a ideálně by měla využívat jQuery... budete všechen její kód vymýšlet či odněkud kopírovat? Nechte si základní kostru vygenerovat webem Initializr. Takové minimální šabloně se říká boilerplate a původně vznikla na http://html5boilerplate.com. Je otestovaná a široce využívaná, existuje množství klonů a kopií.

http://www.initializr.com, online

CSS3 Generator

Podobně časově náročné je to s vytvořením funkčního CSS3 kódu. Proč nevyužít připravené a vyzkoušené fragmenty? Tento generátor vám vygeneruje kód pro kulaté rohy, stínování, průhlednost, vícesloupcovou sazbu, přechody nebo transformace objektů. Vše můžete interaktivně upravovat.

http://css3generator.com, online

Ultimate CSS Gradient Generator

To, co neumí předchozí generátor, doplňuje tento – gradienty (barevné přechody). Můžete si vybrat z připravených vzorků, upravit je ve vizuálním režimu, zohlednit přitom podporu problémového MSIE. Výsledkem je univerzálně funkční kód, který stačí vložit do souboru se stylopisem.

http://www.colorzilla.com/gradient-editor/, online

Nástroje pro práci s barvami

Barvy jsou věda a při vytváření webů je potřeba vzít to v potaz.

ColorScheme Designer

Petr Staníček aka Pixy vytvořil tento skvělý nástroj již před několika lety a stále je nepostradatelný. Díky němu vytvoříte barevnou paletu, a to s ohledem na pravidla „barvotvorby“. Studené či teplé odstíny, analogické či komplementární, s vysokým či nízkým konstrastem. Výsledkem je unikátní adresa s vaší paletou, vzorník a kódy. Velmi doporučujeme.

http://colorschemedesigner.com, online

Lokální nástroje pro výběr barev

Stejně důležité jsou ale lokálně instalované nástroje pro práci s barevnou paletou. Často stačí základní gColor2 nebo pokročilejší Gpick, který už pracuje se stejnými pojmy jako ColorScheme Designer. Existuje mnoho doplňků pro prohlížeče, např. ColorZilla (kam patří také výše uvedený Ultimate CSS Gradient Generator).

http://www.colorzilla.com, doplňky pro prohlížeč

http://code.google.com/p/gpick/, Linux, Windows

Nástroj pro práci s barvami Gpick Nástroj pro práci s barvami Gpick

Drátěné modely, wireframy

Vytvořit kvalitní „dráťák“ je pracné, ale v procesu výroby webu či aplikace má své klíčové místo. Aplikací už není takové množství a jsou obvykle nějak limitované.

Lumzy.com

Aplikace běží v prohlížeči a není potřeba se registrovat ani za ni platit. Do okamžiku, než chcete svůj výtvor uložit – pak je vyžadována registrace. Export je možný v JPG a PDF. Aplikace obsahuje inventář ovládacích prvků, kontejnerů a prvků pro layout, který bohatě vyhovuje průměrné potřebě. Taktéž jsou k dispozici šablony pro stránky (page masters), dokonce témata vzhledu ve stylu Windows a Mac OS X. Práci lze sdílet s kolegy a diskutovat u ní.

POZN Subjektivní komentář – vzhled prvků se mi nelíbí, jejich grafické zpracování je na můj vkus příliš amatérské, i když je to zřejmě záměr.

http://www.lumzy.com/, zdarma, online

MockFlow.com

Množství funkcí se překrývá s jinými službami včetně zmíněného Lumzy. S tím rozdílem, že vzhled prvků působí estetičtějším dojmem, přesto neztrácí dojem ruční kresby. Účet zdarma umožňuje uložit pouze omezené množství stránek. Export je možný do PDF, PNG, PPT, textové specifikace do DOC, XLS, layout do HTML5.

http://mockflow.com, omezeně zdarma, online

MockFlow - tvorba drátěných modelů MockFlow - tvorba drátěných modelů

WireframeSketcher

Profesionální nástroj pro prototypování a návrhy aplikací a webových stránek. Postaveno na Eclipse. Obsahuje množství vizuálních prvků a témat, aby bylo možné univerzální použití (vzhled Windows, Mac OS X, iOS, Android, web aplikací). Zřejmě nejlepší nástroj, na který autor článku narazil.

http://wireframesketcher.com, multiplatformní, 14 zkušební doba, poté nelze ukládat, licence 99 dolarů

Firefox bez Firebugu?

Uvádím speciálně Firefox, protože jeho vývojářské nástroje dosáhly vysoké kvality. Takové, že už ani není potřeba instalovat Firebug nebo Web Developer Toolbar. Stačí stisknout Ctrl-Shift-i a jednotlivé prvky o sobě začnou povídat. Skvělý je také režim responzivního designu (Ctrl-Shift-m) a samozřejmě editor stylů. Naprosto perfektní je pak 3D pohled na prvky stránky.

Testování responzivního režimu u šablony WordPressu Testování responzivního režimu u šablony WordPressu

Průzkumník kódu ve Firefoxu Průzkumník kódu ve Firefoxu

Trojrozměrný pohled na stránku a její prvky Trojrozměrný pohled na stránku a její prvky

Další nástroje

Tento přehled je určitým subjektivním výběrem, jistě bychom mohli uvést další aplikace, které webový vývojář či kodér potřebuje či využije:

Nahoru

(Jako ve škole)
Průměr: 1,57 | Hodnotilo: 7
 

Top články z OpenOffice.cz

Příspěvky

Barevné palety - Agave
Petr Pravda 26. 08. 2013, 11:40:49
Odpovědět  Odkaz 
Pro barevná schémata používám Agave (http://home.gna.org/colorscheme/). A to i v prezentacích, tabulkách a dokumentech.
Při výběru barvy lze použít i pipetu.
To jsou takové drobnosti, které mne v Linuxu nikdy nepřestanou těšit :-)
Vlastimil Ott Re: Barevné palety - Agave
Vlastimil Ott 26. 08. 2013, 13:54:56
Odpovědět  Odkaz 
Díky, Agave jsem neznal, i když vlastně dělá podobnou práci jako ColorScheme Designer. Ale zařadím si ho na úkor gColor2 :-)
13+ bezplatných nástrojů pro webové vývojáře a kodéry
Marv-CZ 26. 08. 2013, 13:07:16
Odpovědět  Odkaz 
Když už se zmiňují IDE se specializací na web, tak by neměl chybět Bluefish.
http://bluefish.openoffice.nl
Vlastimil Ott Re: 13+ bezplatných nástrojů pro webové vývojáře a kodéry
Vlastimil Ott 26. 08. 2013, 13:50:00
Odpovědět  Odkaz 
Zkoušel jsem ho znovu, poté co obživl. Je to zastaralá aplikace, která nemá v moderním vývoji místo. Doufal jsem, že ho přepracovali, ale verze, kterou jsem zkoušel na jaře, vypadala stále jako z roku 2004.
Re: Re: 13+ bezplatných nástrojů pro webové vývojáře a kodéry
Marv-CZ 27. 08. 2013, 08:39:55
Odpovědět  Odkaz 
Nechápu. To tam mají přidat ribbon, aby vypadala moderně? Nebo co tomu konkrétně chybí?
Vlastimil Ott Re: Re: Re: 13+ bezplatných nástrojů pro webové vývojáře a kodéry
Vlastimil Ott 27. 08. 2013, 10:23:02
Odpovědět  Odkaz 
Když dělám šablonu pro WordPress, nikdy jsem nepotřeboval tlačítko pro vkládání tabulek nebo nadpisů a všechny ty tlačítka, které BlueFish má. To je prostě relikt z doby, kdy byl běžný uživatel nucen vytvářet stránky a nahrávat je na FTP. (Ano, část to dělá stále, ale moderní a progresivní to není.)

Ale hádat se nemusíme, je to můj názor, třeba je to jinak. Ostatně nezmínil jsem ho proto, že jsem ho aktuálně nezkoušel.
Re: Re: Re: Re: 13+ bezplatných nástrojů pro webové vývojáře a kodéry
Marv-CZ 27. 08. 2013, 14:09:15
Odpovědět  Odkaz 
To je jen jeden z několika panelů, který lze vypnout. A popravdě řečeno, já ho také vypnutý mám a nikdy jsem ty průvodce nepoužil. Používám ho kvůli takovým věcem, jako doplňování kódu, nápověda k funkcím během psaní, pokročilé funkci hledat/nahradit a podobným, které mají moderní editory, včetně těch zmiňovaných v článku.

Možná je až trochu přeplácaný funkcemi. Jen dialogové okno s nastavením je na procházení na dlouhé zimní večery. Ale on je primárně určen vývojářům a ti si většinou v takových věcech, na rozdíl od běžných uživatelů, libují :-)
Re: Re: Re: Re: 13+ bezplatných nástrojů pro webové vývojáře a kodéry
Lukenzi 28. 08. 2013, 18:38:46
Odpovědět  Odkaz 
Naprosto souhlasím, bluefish a podobné editory...jsem rád, že to není jen můj dojem. Pro nějakou kvalitní a rychlou práci jsou naprosto k ničemu. Spousty funkcí, které bych ocenil možná tak někdy před 10-ti lety, ale teď jsou na nic. Zatímco funkce, které bych potřeboval to nemá.

Pro větší projekty používám netbeans (nebo eclipse), tam je výhodou snad vše - je na to prostě stavěný. Pro menší věci jedině geany. Zkoušel jsem už snad všechny editory pro Linux ( i placené) a nejen pro něj a vždy jsem se nakonec vrátil k geany.
Vlastimil Ott Re: Re: Re: Re: Re: 13+ bezplatných nástrojů pro webové vývojáře a kodéry
Vlastimil Ott 28. 08. 2013, 19:33:37
Odpovědět  Odkaz 
Já jsem skončil u Meditu, který sice nemá folding a doplňování, ale prostě jsem si zvykl. Taky jsem jich zkoušel asi třicet, ale prostě jsem si nevybral. Už asi čtyři roky o nich chci napsat seriál... :-)

Geany jsem používal, ale je tam moc věcí, které mi nesedí.
Re: Re: Re: Re: Re: Re: 13+ bezplatných nástrojů pro webové vývojáře a kodéry
Piktor 30. 08. 2013, 09:18:18
Odpovědět  Odkaz 
Napište ten seriál, celkem by mě zajímalo nějaké komplexní srovnání. Pracoval jsem delší dobu s Eclipse, ale to je velmi těžkopádné. Přešel jsem na Geany, se kterým se mně pracuje velmi dobře, je rychlé, ale postrádám doplňování kódu. Zkusil jsem na vaše doporučení Komodo Edit a je to něco mezi. Funguje poměrně svižně, má většinu vymožeností, které potřebuji, tak tomu dám šanci.
Re: 13+ bezplatných nástrojů pro webové vývojáře a kodéry
msh 30. 08. 2013, 16:20:20
Odpovědět  Odkaz 
Článek je pěkný a celkově přínosný.
----------------------------
Bluefish. Také ho používám a dle mého soudu jde o skvělý editor. Používám Gedit, Geany a Bluefish, každý z nich má něco do sebe a každý používám na jiné věci. Bluefish používám na psaní šablon pro Smarty a XML/HTML. Obrovskou výhodou je, že editor barevně zvýrazní související párový tag. K nezaplacení pro hledání zapomenutého nebo nadbytečného divu, který někdo někde umaže/přidá a pak volá, že "se to nějak celý rozházelo". :-) A zatím jsem nenašel jiný editor pro Linux, který toto umí. Tím neříkám, že neexistují. Klidně tu někdo nějaký uveďte, rád se poučím.

Ten HTML Toolbar je skoro škoda skrývat. Je tam sice spousta tlačítek, která jsou pro spoustu lidí (i pro mě) zbytečná, na druhou stranu je tam spousta využitelných. Naprosto super je např. Quickstart, který během chvilinky udělá spoustu práce. Navíc se dají nejpoužívanější tlačítka dát do tabu Quickbar... ve výsledku celý HTML Toolbar práci hodně zefektivní.

Další suprovou věcí jsou položky v nabídce Zencoding. Prohlédněte a vyzkoušejte sami. A nabídky z hlavního menu jsou "odtrhávací", to taky ušetří pár kliků a urychlí práci. Skvělý je nástroj Advanced Find & Replace. Navíc je editor velmi svižný i na slabších strojích.

Bluefish nepoužívám ke psaní PHP, ale jak tak právě teď koukám, možná ke své vlastní škodě.

Jak se říká - sto lidí sto chutí - a chápu, že Bluefish nemusí vyhovovat každému. Na druhou stranu si ale své "zákazníky" bezesporu najde. Kdybych (čistě hypoteticky, taková situace totiž nenastane) musel ze tří mnou uvedených editorů vybrat jen jeden, vyhrál by to bezesporu Bluefish.
----------------------------
Další editory. Občas dělám věci kolem webů, ale netroufám se označit se jako webový vývojář. Poprosil bych přítomné profíky, jestli by sem mohli uvést, jaký editor nebo IDE používají a které "fíčury" jim přijdou jako nejužitečnější nebo dokonce nepostradatelné. Rád se přiučím od znalejších a zkušenějších. Sarkasmus nebo pokus o pruzení nebo nedejbože vyvolání hádky v mém postu mezi řádky nehledejte. Nejsou tam.
Adam Radiměřský 13+ bezplatných nástrojů pro webové vývojáře a kodéry
Adam Radiměřský 26. 08. 2013, 20:04:07
Odpovědět  Odkaz 
A co třeba BlueGriffon http://bluegriffon.org/ ? Má nejmodernější technologie jako HTML 5, CSS 3 a je taky zdarma. Sice mi stále ještě víc vyhovuje KompoZer http://www.kompozer.net/ jenže jeho vývoj nějak usnul a v nejnovějším Ubuntu ani není v repozitářích...
Vlastimil Ott Re: 13+ bezplatných nástrojů pro webové vývojáře a kodéry
Vlastimil Ott 26. 08. 2013, 22:48:11
Odpovědět  Odkaz 
BlueGriffon jsem v poslední chvíli smazal, protože s ním ještě nemám zkušenost, odrazuje mě nepřítomnost balíčků (Debian/Xubuntu 64 bit).

Kompozer patří do jiné kategorie, moc si nedovedu představit, že by ho používal kodér, který dělá s CSS3, jQuery a HTML5... Je to pohrobek Nvu..
13+ bezplatných nástrojů pro webové vývojáře a kodéry
fri 26. 08. 2013, 22:00:44
Odpovědět  Odkaz 
Pro barevná schémata je tu i: http://www.colorblender.com/
Re: 13+ bezplatných nástrojů pro webové vývojáře a kodéry
kuler 27. 08. 2013, 10:07:27
Odpovědět  Odkaz 
Vcera som objavil aj kuler.adobe.com
13+ bezplatných nástrojů pro webové vývojáře a kodéry
Petr Kobelka 27. 08. 2013, 09:18:46
Odpovědět  Odkaz 
V drátěných modelech mi chybí skvělý Pencil.

---
Petr Kobelka píše blog na http://www.egoblog.cz/
13+ bezplatných nástrojů pro webové vývojáře a kodéry
qk 30. 08. 2013, 01:52:05
Odpovědět  Odkaz 
A znate Sublime text?
13+ bezplatných nástrojů pro webové vývojáře a kodéry
Honza Doušek 19. 09. 2013, 21:31:22
Odpovědět  Odkaz 
Co naplat, když kvalitně se alespoň pro mě jako pro kodéra a grafika v linuxovém prostředí weby komfortně vyvíjet zrovna dvakrát nedají (subjektivní dojem). Ještě že editory typu Sublime-Text mají své linuxové verze.

Mnoho editorů je však buď nějakými pokusy studentíků, které to přestane bavit, další řada editorů má vývojáře příliš zaměřené na zhotovení co nejhoršího UI nebo je sto let za opicemi.

Bluefish bych také nezmiňoval. Psát kód v něm může snad jen šílenec. Kompozer a podobné editory ale používám i já. To když si chci narychlo nasázet nějakou tabulku. Jo na to je dobrý :).

Přesto ale i kodéři musí počítat s dodáním souborů, se kterými budete mít problémy. PSD, CDR atd... Alet o je všechno o emulaci, virtualizaci, všem co vás jen zpomalí.

Možná že se nedokážu po několika měsících řádně přizpůsobit, ale efektivita práce zrovna v tomto odvětví se mi zdá prachbídná.
13+ bezplatných nástrojů pro webové vývojáře a kodéry
Mordechai 3. 11. 2013, 08:01:42
Odpovědět  Odkaz 
Web Developer toolbar pro Firefox rozhodně není nahraditelný nativním firefoxím devbarem. Zatím.

Přidat názor

Nejsou podporovány žádné značky, komentáře jsou jen čistě textové. Více o diskuzích a pravidlech najdete v nápovědě.
Diskuzi můžete sledovat pomocí RSS kanálu rss



 
 

Vlastimil Ott

Vlastimil Ott

Spolupracuji s obecně prospěšnou společností Liberix, školím LibreOffice, WordPress, rozumím open source.


  • Distribuce: Xubuntu, Linux Mint
  • Grafické prostředí: Xfce
  • Hodnocení autora: ***

| proč linux | blog