{"id":728,"date":"2017-02-07T22:07:37","date_gmt":"2017-02-07T22:07:37","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/?p=728"},"modified":"2017-02-09T21:00:42","modified_gmt":"2017-02-09T21:00:42","slug":"dossier-editors-de-codi","status":"publish","type":"post","link":"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/2017\/02\/07\/dossier-editors-de-codi\/","title":{"rendered":"Dossier &#8212; Editors de codi"},"content":{"rendered":"<p><\/p>\n<h1>EDITORS DE CODI<\/h1>\n<h2>Introducci\u00f3: Qu\u00e8 s\u00f3n?<\/h2>\n<p>Els editors de codi s\u00f3n programes que ens ajuden a gestionar el codi font dels nostres projectes. S\u00f3n ideals quan hom treballa amb diferents llenguatges de programaci\u00f3, alternant-los o en un sol projecte (per exemple, en un projecte web \u00e9s molt habitual combinar html, javascript, css, php, etc.).<\/p>\n<p>El codi, de fet, no \u00e9s res m\u00e9s que text, que ser\u00e0 interpretat com a codi quan s\u2019executi en el context adequat. Aix\u00f2 vol dir que, en realitat, el podem escriure en qualsevol entorn que ens mantingui el text pur (\u2018plain text\u2019) com ara la Llibreta de Notes a Windows o TextEdit a Mac. Per\u00f2 excepte per canvis molt r\u00e0pids quan no tenim un editor a m\u00e0, \u00e9s molt poc habitual treballar el codi amb aquests entorns tan austers.<\/p>\n<p>El que fan els editors de codi \u00e9s facilitar-nos la tasca, de maneres diferents segons cada un. Per exemple, \u00e9s molt habitual que tingui funcions d\u2019autocompletar, de gesti\u00f3 de versions, que canvi\u00efn els colors de cada part del text segons el context, que comprovin la sintaxi del codi, o que a partir de plugins es pugui executar el codi directament per tal de provar-lo.<\/p>\n<h2>Recursos<\/h2>\n<p>Com en tants altres temes, una cerca a Internet sobre editors de codi font (<em>source code editors<\/em>) ens portar\u00e0 a p\u00e0gines i m\u00e9s p\u00e0gines amb llistes dels 10, 15, 20, 49&#8230;) millors editors de codi, consells, recomanacions, v\u00eddeo tutorials&#8230; i un consell que es repeteix, emulant <a href=\"https:\/\/www.youtube.com\/watch?v=nfswcNBqVOY\">el fam\u00f3s anunci de Col\u00f3n dels anys 80<\/a>: Busqueu, proveu i compareu, i feu servir el que us vagi millor.<\/p>\n<p>Alguns d\u2019aquests enlla\u00e7os amb llistes s\u00f3n realment bons i exhaustius, i hi trobareu que en general es repeteixen sempre els mateixos editors. Val la pena fixar-se amb la data de publicaci\u00f3. Qualsevol cosa amb m\u00e9s d\u2019un parell d\u2019anys d\u2019antiguitat la podem considerar antiga, en un tema com aquest. Per exemple, <a href=\"http:\/\/blog.livecoding.tv\/10-best-text-editors-programming-2016\/\">aquest enlla\u00e7<\/a>, en angl\u00e8s com la gran majoria, \u00e9s dels millors, i llista pros i contres de cada editor. O <a href=\"http:\/\/www.emezeta.com\/articulos\/los-mejores-editores-de-texto-para-programar\">aquest altre en castell\u00e0<\/a>, tamb\u00e9 molt complert i ben comentat.<\/p>\n<p>Vista aquesta varietat i completesa de llistes, evitarem fer-ne aqu\u00ed l\u2019en\u00e8ssima iteraci\u00f3. Podeu navegar per les dues llistes proposades i les desenes m\u00e9s per trobar totes les opcions possibles. En aquest post, per\u00f2, tenint en compte que si heu arribat fins aqu\u00ed \u00e9s que probablement us esteu iniciant en la programaci\u00f3, o almenys en l\u2019\u00fas d\u2019editors de codi, ens centrarem nom\u00e9s amb tres: Sublime, Atom i Brackets. Els triem tenint en compte quina \u00e9s la millor opci\u00f3 per alg\u00fa que es vol iniciar avui dia. Els dos primers s\u00f3n sens dubte la prefer\u00e8ncia de gaireb\u00e9 tots els qui escriuen sobre editors de codi i en recomanen. El tercer, Brackets, \u00e9s una recomanaci\u00f3 espec\u00edfica pels qui treballen exclusivament en llenguatges web.<\/p>\n<h2>El podi<\/h2>\n<p>Deixarem a mans del lector decidir qui s\u2019ha d\u2019endur la medalla d\u2019or, plata i bronze del nostre podi, i procedirem a presentar els tres candidats per estricte ordre d\u2019aparici\u00f3. Sublime text, un veter\u00e0 aparegut el 2008 anir\u00e0 primer, seguit per Atom i Brackets, apareguts a inicis i finals de 2014 respectivament.<\/p>\n<h2>SUBLIME TEXT<\/h2>\n<ul>\n<li>Desenvolupador: \u00a0\u00a0\u00a0\u00a0\u00a0 Sublime HQ Pty Ltd<\/li>\n<li>Llic\u00e8ncia:\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Software propietari, amb llic\u00e8ncia <a href=\"https:\/\/es.wikipedia.org\/wiki\/Nagware\"><em>begware<\/em><\/a><\/li>\n<li>Preu:\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Demo gratu\u00efta il\u00b7limitada \/ $70 Pagament \u00fanic<\/li>\n<li>Primera versi\u00f3 de: \u00a0\u00a0 Gener 2008<\/li>\n<li>Sistemes operatius: \u00a0 Mac, Linux, Windows<\/li>\n<\/ul>\n<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/Sublime-text-2-screenshot.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-730 aligncenter\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/Sublime-text-2-screenshot.png\" width=\"400\" height=\"226\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/Sublime-text-2-screenshot.png 640w, http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/Sublime-text-2-screenshot-300x169.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<p><em>By Jordi Burguet-Castell &#8211; Own work, CC BY-SA 4.0, <a href=\"https:\/\/commons.wikimedia.org\/w\/index.php?curid=45722042\">https:\/\/commons.wikimedia.org\/w\/index.php?curid=45722042<\/a><\/em><\/p>\n<p>La comunitat d\u2019usuaris de Sublime \u00e9s extensa i activa. Aix\u00f2 es pot comprovar mirant el f\u00f2rum que penja de la mateixa <a href=\"https:\/\/forum.sublimetext.com\/\">p\u00e0gina del projecte<\/a>\u00a0i naturalment fent cerques gen\u00e8riques a Internet. Els mateixos creadors de Sublime mantenen un <a href=\"https:\/\/www.sublimetext.com\/blog\/\">blog<\/a> per explicar-ne les novetats i actualitzacions\u00a0i una <a href=\"https:\/\/www.sublimetext.com\/support\">documentaci\u00f3 i servei de d\u2019ajuda formal<\/a>.<\/p>\n<h3>Selecci\u00f3 de plugins<\/h3>\n<p>Entre els molts plugins disponibles per a Sublime (i tamb\u00e9 trobables a llistes com <a href=\"http:\/\/www.hongkiat.com\/blog\/sublime-text-plugins\/\">aquesta de 18<\/a>\u00a0o <a href=\"https:\/\/www.sitepoint.com\/10-essential-sublime-text-plugins-full-stack-developer\/\">aquesta de 10<\/a>, en destaquem els seg\u00fcents:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/packagecontrol.io\/\">Package control<br \/>\n<\/a><\/strong>El plugin que us permetr\u00e0 controlar de manera f\u00e0cil i eficient tots els altres plugins, packages, etc. que afegeixis a Sublime.<strong><a href=\"https:\/\/packagecontrol.io\/\"><br \/>\n<\/a><\/strong><\/li>\n<\/ul>\n<ul>\n<li><strong><a href=\"https:\/\/packagecontrol.io\/packages\/Alignment\">Alignment<br \/>\n<\/a><\/strong>Del mateix desenvolupador que l\u2019anterior: facilita la llegibilitat del codi permetent formatar-lo. Funciona amb diversos llenguatges de programaci\u00f3.<strong><a href=\"https:\/\/packagecontrol.io\/packages\/Alignment\"><br \/>\n<\/a><\/strong><\/li>\n<\/ul>\n<ul>\n<li><strong><a href=\"https:\/\/github.com\/kemayo\/sublime-text-git\">Git<br \/>\n<\/a><\/strong>Un altre plugin essencial, en aquest cas si treballeu amb GitHub. Aquest plugin us permetr\u00e0 executar les comandes essencials d\u2019aquest controlador de versions sense necessitat de sortir de l\u2019editor de codi.<\/li>\n<\/ul>\n<h3>Pros<\/h3>\n<ul>\n<li>Projecte veter\u00e0 i consolidat<\/li>\n<li>\u00c0mplia comunitat d\u2019usuaris<\/li>\n<li>Interf\u00edcie molt refinada amb molts detalls que ajuden a ser eficient programant<\/li>\n<\/ul>\n<h3>Contres<\/h3>\n<ul>\n<li>No \u00e9s gratu\u00eft (tot i que gaireb\u00e9)<\/li>\n<li>Competidors com Atom li podrien fer perdre for\u00e7a a mig termini<\/li>\n<\/ul>\n<h3><strong>Conclusi\u00f3<\/strong>:<\/h3>\n<p>Sublime \u00e9s una molt bona opci\u00f3 si hom vol un editor de codi fiable, robust, consolidat, i amb una \u00e0mplia comunitat darrere. Tanmateix, si us decanteu per aquesta opci\u00f3, tingueu els ulls oberts a futurs esdeveniments, sobretot tenint en compte el pes que pugui anar agafant el proper editor que analitzem: Atom.<\/p>\n<h3><strong>Recull de recursos per a Sublime:<\/strong><\/h3>\n<ul>\n<li>Compet\u00edssim i molt actualitzat tutorial de Sublime 3, en castell\u00e0, allotjat a la web de l\u2019IES San Clemente de Santiago de Compostela:<br \/>\n<a href=\"https:\/\/manuais.iessanclemente.net\/index.php\/Tutorial_sobre_editor_Sublime_Text_3\">https:\/\/manuais.iessanclemente.net\/index.php\/Tutorial_sobre_editor_Sublime_Text_3<\/a><\/li>\n<li>Aquesta guia tamb\u00e9 \u00e9s molt completa, potser una millor opci\u00f3 per iniciar-se:<br \/>\n<a href=\"http:\/\/www.emezeta.com\/articulos\/guia-sublime-text\">http:\/\/www.emezeta.com\/articulos\/guia-sublime-text<\/a><\/li>\n<\/ul>\n<p>I d\u2019entre els molt\u00edssims v\u00eddeotutorials, una selecci\u00f3 dels que s\u00f3n en castell\u00e0:<\/p>\n<ul>\n<li>Videotutorial de Sublime 3:<br \/>\n<a href=\"https:\/\/www.youtube.com\/watch?v=Ugq_LHcOBtA\">https:\/\/www.youtube.com\/watch?v=Ugq_LHcOBtA<\/a><\/li>\n<li>Introducci\u00f3 a Sublime (versi\u00f3 2):<br \/>\n<a href=\"https:\/\/www.youtube.com\/watch?v=9RQlsuGAcCM\">https:\/\/www.youtube.com\/watch?v=9RQlsuGAcCM<\/a><\/li>\n<li>Curs intensiu de Sublime Text:<br \/>\n<a href=\"https:\/\/www.youtube.com\/watch?v=VJmvnfUKZ2I\">https:\/\/www.youtube.com\/watch?v=VJmvnfUKZ2I<\/a><\/li>\n<li>Pels m\u00e9s novells, instal\u00b7laci\u00f3 de Sublime 3:<br \/>\n<a href=\"https:\/\/www.youtube.com\/watch?v=Ao8N4ZFIhnE\">https:\/\/www.youtube.com\/watch?v=Ao8N4ZFIhnE<\/a><\/li>\n<\/ul>\n<h3><\/h3>\n<h2>ATOM<\/h2>\n<ul>\n<li>Desenvolupador: \u00a0\u00a0\u00a0\u00a0\u00a0 Github Inc.<\/li>\n<li>Llic\u00e8ncia:\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"https:\/\/ca.wikipedia.org\/wiki\/Llic%C3%A8ncia_X11\"> MIT License<\/a><\/li>\n<li>Preu:\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Gratu\u00eft<\/li>\n<li>Primera versi\u00f3 de: \u00a0\u00a0 Febrer 2014<\/li>\n<li>Sistemes operatius: \u00a0 Mac, Linux, Windows<\/li>\n<\/ul>\n<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/Atom-editor.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-733 aligncenter\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/Atom-editor.png\" alt=\"Atom\" width=\"400\" height=\"305\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/Atom-editor.png 1102w, http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/Atom-editor-300x229.png 300w, http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/Atom-editor-768x585.png 768w, http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/Atom-editor-1024x781.png 1024w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<p><em>By Jordi Burguet-Castell &#8211; Own work, CC BY-SA 4.0, <a href=\"https:\/\/commons.wikimedia.org\/w\/index.php?curid=45722042\">https:\/\/commons.wikimedia.org\/w\/index.php?curid=45722042<\/a><\/em><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/Atom-editor.png\"><br \/>\n<\/a><\/p>\n<p>Atom \u00e9s un competidor directe de Sublime Text. De fet, apareix en contraposici\u00f3 a aquest, tot copiant-ne alhora la gran majoria de funcionalitats. Per tant, s\u00f3n en el fons molt semblants, fins i tot amb l\u2019aspecte, i tot fa preveure que Atom li pugui anar guanyant terreny a Sublime. Com amb Sublime, el ventall de llenguatges de programaci\u00f3 amb els que s\u2019hi pot treballar \u00e9s molt ampli. \u00c9s doncs, tamb\u00e9, una eina pensada per ser molt vers\u00e0til.<\/p>\n<p>Tampoc \u00e9s cap sorpresa que Atom disposi d\u2019un <a href=\"http:\/\/blog.atom.io\/\">blog<\/a>\u00a0i <a href=\"https:\/\/atom.io\/docs\">p\u00e0gina oficial de documentaci\u00f3<\/a>\u00a0aix\u00ed com d\u2019un <a href=\"https:\/\/discuss.atom.io\/\">f\u00f2rum<\/a>\u00a0que, a jutjar per n\u00famero de visites i respostes als posts, tot i ser prou actiu no arriba als nivells del de sublime. Aix\u00f2 s\u00ed, al tenir Github al darrere, Atom juga amb l\u2019avantatge de tenir ja d\u2019entrada una base potencial d\u2019usuaris molt gran, aix\u00ed que, com s\u2019ha dit, \u00e9s esperable que vagi creixent en els propers temps si el desenvolupament d\u2019aquest editor es mant\u00e9 a l\u2019alt nivell que fins ara.<\/p>\n<p>Per fer-vos una idea del nivell de creativitat i recursos que hi ha darrere Atom, no us perdeu el genial v\u00eddeo de presentaci\u00f3: <a href=\"https:\/\/www.youtube.com\/watch?v=Y7aEiVwBAdk\">https:\/\/www.youtube.com\/watch?v=Y7aEiVwBAdk<\/a><\/p>\n<h3>Selecci\u00f3 de plugins<\/h3>\n<p><strong>Selecci\u00f3 de plugins<\/strong><\/p>\n<p>La mateixa p\u00e0gina d\u2019Atom ofereix un <a href=\"https:\/\/atom.io\/packages\">bon llistat dels plugins i packages disponibles<\/a>. Entre aquests, destaquem:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/atom.io\/packages\/minimap\">Minimap<br \/>\n<\/a><\/strong>Es tracta d\u2019un plugin que afegeix a Atom una caracter\u00edstica que Sublime ja t\u00e9: Una representaci\u00f3 gr\u00e0fica de tot el codi (a la part dreta de l\u2019editor) que et situa dins el teu projecte. Molt \u00fatil.<strong><a href=\"https:\/\/atom.io\/packages\/minimap\"><br \/>\n<\/a><\/strong><strong><a href=\"https:\/\/atom.io\/packages\/minimap\"><br \/>\n<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/atom.io\/packages\/atom-beautify\">Beautify<br \/>\n<\/a><\/strong>Aquest plugin recupera un nom amb molta hist\u00f2ria per a formatar el text de manera que sigui llegible. Beautify \u00e9s com se\u2019n deia de fer aix\u00f2 al m\u00edtic Design by Numbers de John Maeda, i a les primeres versions del seu successor: Processing.<\/li>\n<\/ul>\n<ul>\n<li><strong><a href=\"https:\/\/atom.io\/packages\/git-plus\">Git Plus<br \/>\n<\/a><\/strong>Com en el cas de Sublime, Atom disposa d\u2019un plugin que us permetr\u00e0 executar les comandes essencials d\u2019aquest controlador de versions sense necessitat de sortir de l\u2019editor de codi.<\/li>\n<\/ul>\n<h3>Pros<\/h3>\n<ul>\n<li>Gratu\u00eft<\/li>\n<li>Codi lliure<\/li>\n<li>Promogut per GitHub<\/li>\n<\/ul>\n<h3>Contres<\/h3>\n<ul>\n<li>Encara \u00e9s molt nou i relativament poc implementat<\/li>\n<li>S\u2019assembla molt a Sublime, es podria argumentar que massa i tot.<\/li>\n<\/ul>\n<h3>Conclusi\u00f3<\/h3>\n<p>Atom \u00e9s una molt bona elecci\u00f3 com a editor de codi. \u00c9s un projecte que ha comen\u00e7at molt fort i t\u00e9 bones perspectives per davant, sobretot pel fet que al darrere hi t\u00e9 una plataforma tan potent com GitHub. A m\u00e9s, forma part de la cultura del codi obert. \u00c9s a dir, \u00e9s \u2018free\u2019 en tant que gratu\u00eft per\u00f2 tamb\u00e9 \u2018free\u2019 en tant que lliure i a disposici\u00f3 de tothom.<\/p>\n<h3>Recull de recursos per a Atom:<\/h3>\n<ul>\n<li>Guia d\u2019iniciaci\u00f3, en castell\u00e0:<br \/>\n<a href=\"http:\/\/www.emezeta.com\/articulos\/como-configurar-atom-editor-y-sus-mejores-plugins\">http:\/\/www.emezeta.com\/articulos\/como-configurar-atom-editor-y-sus-mejores-plugins<\/a><\/li>\n<\/ul>\n<ul>\n<li>Guia d\u2019iniciaci\u00f3 en angl\u00e8s:<br \/>\n<a href=\"http:\/\/readwrite.com\/2014\/05\/20\/github-atom-5-tips-getting-started-tutorial-corey-johnson\/\">http:\/\/readwrite.com\/2014\/05\/20\/github-atom-5-tips-getting-started-tutorial-corey-johnson\/<\/a><\/li>\n<\/ul>\n<ul>\n<li>I dins d&#8217;Atom mateix:<br \/>\nDocumentaci\u00f3: <a href=\"http:\/\/flight-manual.atom.io\/\">http:\/\/flight-manual.atom.io\/<br \/>\n<\/a>\u00a0 \u00a0 \u00a0Packages: <a href=\"https:\/\/atom.io\/packages\">https:\/\/atom.io\/packages<\/a><\/li>\n<\/ul>\n<h2>BRACKETS<\/h2>\n<ul>\n<li>Desenvolupador: \u00a0\u00a0\u00a0\u00a0\u00a0 Adobe Systems<\/li>\n<li>Llic\u00e8ncia:\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=\"https:\/\/ca.wikipedia.org\/wiki\/Llic%C3%A8ncia_X11\">MIT License<\/a><\/li>\n<li>Preu:\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Gratu\u00eft<\/li>\n<li>Primera versi\u00f3 de: \u00a0\u00a0 Novembre 2014<\/li>\n<li>Sistemes operatius: \u00a0 Mac, Linux, Windows<\/li>\n<\/ul>\n<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/hero@2x.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-736\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/hero@2x.png\" width=\"400\" height=\"129\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/hero@2x.png 2300w, http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/hero@2x-300x97.png 300w, http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/hero@2x-768x248.png 768w, http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/hero@2x-1024x330.png 1024w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/files\/2017\/02\/hero@2x.png\"><br \/>\n<\/a><em>Font:\u00a0<a href=\"http:\/\/brackets.io\/\">http:\/\/brackets.io\/<\/a><\/em><\/p>\n<p>Brackets \u00e9s un editor de codi diferent als docs anteriors, perqu\u00e8 est\u00e0 enfocat exclusivament a la programaci\u00f3 web. Aix\u00ed doncs, si us interessa programar amb HTML5, javascript, css&#8230; aquesta pot ser la vostra opci\u00f3. Amb Brackets podeu editar codi web a temps real, \u00e9s a dir, veient immediatament els canvis resultants del que toqueu al codi.<\/p>\n<p>Aquest editor compta amb una caracter\u00edstica prou particular: Pertany a i est\u00e0 desenvolupat per Adobe Systems, un monstre del software propietari, per\u00f2 \u00e9s software lliure. Per tant, us el podeu baixar i instal\u00b7lar gratu\u00eftament, i si voleu us en podeu baixar el codi font de GitHub.<\/p>\n<p>Brackets, com tot bon editor de codi, treballa amb colors perqu\u00e8 pogueu distingir les parts del codi. T\u00e9 m\u00faltiples <a href=\"http:\/\/brackets.io\/contribute.html\">extensions<\/a> per ampliar les funcionalitats del programa, i al ser codi obert en permet el creixement sostingut. I entre altres coses, t\u00e9 una funcionalitat per revisar el codi JavaScript (anomenada JSLint) i ajudar en el proc\u00e9s de depuraci\u00f3 d\u2019errors.<\/p>\n<h3>Pros<\/h3>\n<ul>\n<li>Gratu\u00eft<\/li>\n<li>Software\u00a0lliure<\/li>\n<li>Pensat espec\u00edficament per a programaci\u00f3 web: Si \u00e9s el vostre \u00e0mbit, no necessiteu m\u00e9s.<\/li>\n<li>Desenvolupat per Adobe Systems<\/li>\n<\/ul>\n<h3>Contres<\/h3>\n<ul>\n<li>Pensat espec\u00edficament per a programaci\u00f3 web: Si voleu fer m\u00e9s que programaci\u00f3 web, hi trobareu limitacions<\/li>\n<li>Desenvolupat per Adobe Systems<\/li>\n<\/ul>\n<h3>Conclusi\u00f3<\/h3>\n<p>\u00c9s un molt bon editor de codi. Com que est\u00e0 pensat espec\u00edficament per als llenguatges que es fan servir per a programar webs, \u00f2bviament \u00e9s una molt bona opci\u00f3 nom\u00e9s si aquest \u00e9s el vostre context de treball. Per tant, en aquest cas \u00e9s simple: Si treballeu amb llenguatges web, proveu Brackets. Si feu un \u00fas m\u00e9s generalista de llenguatges de programaci\u00f3, mireu Sublime o Atom.<\/p>\n<h3><strong>Recursos externs:<\/strong><\/h3>\n<ul>\n<li>Un bon article que n\u2019explica les principals caracter\u00edstiques:<br \/>\n<a href=\"http:\/\/html5facil.com\/tips\/brackets-io-un-editor-de-texto-open-source-por-adobe\/\">http:\/\/html5facil.com\/tips\/brackets-io-un-editor-de-texto-open-source-por-adobe\/<\/a><\/li>\n<\/ul>\n<ul>\n<li>I un altre en angl\u00e8s:<br \/>\n<a href=\"https:\/\/www.sitepoint.com\/review-brackets-editor\/\">https:\/\/www.sitepoint.com\/review-brackets-editor\/<\/a><\/li>\n<\/ul>\n<ul>\n<li>Raons per fer servir Brackets:<br \/>\n<a href=\"https:\/\/www.seekmomentum.com\/blog\/design-and-development\/switched-brackets-io\/\">https:\/\/www.seekmomentum.com\/blog\/design-and-development\/switched-brackets-io\/<\/a><\/li>\n<\/ul>\n<ul>\n<li>Canal oficial al youtube, ple de tutorials en v\u00eddeo:<br \/>\n<a href=\"https:\/\/www.youtube.com\/user\/CodeBrackets\">https:\/\/www.youtube.com\/user\/CodeBrackets<\/a><\/li>\n<\/ul>\n<h2><strong>Comentaris finals<\/strong><\/h2>\n<p>Com s\u2019ha dit, aquesta nom\u00e9s \u00e9s una petita selecci\u00f3 de les moltes opcions que hi ha, per\u00f2 una selecci\u00f3 raonada. Una mena de podi que hem triat, i que coincideix amb el que s\u2019acostuma a trobar a les t\u00edpiques \u2018llistes de\u2019 que trobareu a Internet. Si ho voleu comprovar \u2013i veure\u2019n altres opcions\u2014aqu\u00ed en teniu alguns exemples:<\/p>\n<ul>\n<li>Tres llistes bones llistes en castell\u00e0:<br \/>\n<a href=\"http:\/\/www.emezeta.com\/articulos\/los-mejores-editores-de-texto-para-programar\">http:\/\/www.emezeta.com\/articulos\/los-mejores-editores-de-texto-para-programar<\/a> (ja mencionat al principi de l\u2019article).<br \/>\n<a href=\"https:\/\/hipertextual.com\/archivo\/2014\/09\/editores-codigo-mas-versatiles\/\">https:\/\/hipertextual.com\/archivo\/2014\/09\/editores-codigo-mas-versatiles\/<br \/>\n<\/a><a href=\"http:\/\/www.campusmvp.es\/recursos\/post\/Los-10-mejores-editores-gratuitos-de-HTML-CSS-y-JavaScript.aspx\">http:\/\/www.campusmvp.es\/recursos\/post\/Los-10-mejores-editores-gratuitos-de-HTML-CSS-y-JavaScript.aspx<\/a><\/li>\n<\/ul>\n<ul>\n<li>&#8230;i una en angl\u00e8s:<br \/>\n<a href=\"https:\/\/www.elegantthemes.com\/blog\/resources\/the-11-best-code-editors-available-in-2015\">https:\/\/www.elegantthemes.com\/blog\/resources\/the-11-best-code-editors-available-in-2015<\/a><\/li>\n<\/ul>\n<ul>\n<li>I si ho voleu en format v\u00eddeo tamb\u00e9 en trobareu:<br \/>\n<a href=\"https:\/\/www.youtube.com\/watch?v=nmR5gEj1l9o\">https:\/\/www.youtube.com\/watch?v=nmR5gEj1l9o<\/a><\/li>\n<\/ul>\n<p>I per no ser menys, entre les alternatives que trobareu en destacarem aquests:<\/p>\n<ul>\n<li>Vim &#8211; <a href=\"http:\/\/www.vim.org\/\">http:\/\/www.vim.org\/<\/a><\/li>\n<li>Nano &#8211; <a href=\"https:\/\/www.nano-editor.org\/\">https:\/\/www.nano-editor.org\/<\/a><\/li>\n<li>Gedit &#8211; <a href=\"https:\/\/wiki.gnome.org\/Apps\/Gedit\">https:\/\/wiki.gnome.org\/Apps\/Gedit<\/a><\/li>\n<li>Notepad++ &#8211; <a href=\"https:\/\/notepad-plus-plus.org\/\">https:\/\/notepad-plus-plus.org\/<\/a><\/li>\n<li>TextWrangler &#8211; <a href=\"http:\/\/www.barebones.com\/products\/TextWrangler\/\">http:\/\/www.barebones.com\/products\/TextWrangler\/<\/a><\/li>\n<\/ul>\n<p>Aix\u00ed doncs, si no us voleu fiar de la nostra preselecci\u00f3, cerqueu, compareu, i feu servir el que us sembli millor.<\/p>","protected":false},"excerpt":{"rendered":"<p>EDITORS DE CODI Introducci\u00f3: Qu\u00e8 s\u00f3n? Els editors de codi s\u00f3n programes que ens ajuden a gestionar el codi font dels nostres projectes. S\u00f3n ideals quan hom treballa amb diferents llenguatges de programaci\u00f3, alternant-los o en un sol projecte (per exemple, en un projecte web \u00e9s molt habitual combinar html, javascript, css, php, etc.). El [&hellip;]<\/p>\n","protected":false},"author":100,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,23,2,3,1,4,33,34,37,18],"tags":[138,140,137,136,141,122,139],"class_list":["post-728","post","type-post","status-publish","format-standard","hentry","category-castellano","category-catalan","category-dificultad","category-facil","category-general","category-idioma","category-linux","category-mac","category-software","category-windows","tag-atom","tag-brackets","tag-editores-de-codigo","tag-editors-de-codi","tag-programacio","tag-programacion","tag-sublime"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/wp-json\/wp\/v2\/posts\/728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/wp-json\/wp\/v2\/users\/100"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/wp-json\/wp\/v2\/comments?post=728"}],"version-history":[{"count":13,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/wp-json\/wp\/v2\/posts\/728\/revisions"}],"predecessor-version":[{"id":756,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/wp-json\/wp\/v2\/posts\/728\/revisions\/756"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/wp-json\/wp\/v2\/media?parent=728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/wp-json\/wp\/v2\/categories?post=728"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labpc\/wp-json\/wp\/v2\/tags?post=728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}