{"id":527,"date":"2019-03-26T20:31:40","date_gmt":"2019-03-26T19:31:40","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/?p=527"},"modified":"2019-11-12T20:52:17","modified_gmt":"2019-11-12T19:52:17","slug":"como-ser-programador-front-end-el-2019","status":"publish","type":"post","link":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/blog\/como-ser-programador-front-end-el-2019\/","title":{"rendered":"Com ser programador front-end en 2019?"},"content":{"rendered":"<p>Moltes vegades abans d&#8217;iniciar-nos en una professi\u00f3 o disciplina, ens preguntem quines s\u00f3n les coses que ens calen saber per a poder-nos-hi dedicar. I, en un m\u00f3n tan canviant com \u00e9s el m\u00f3n web, moltes vegades ens podem sentir sobrepassats en veure tants llenguatges, tantes eines, tant moviment i tants canvis. \u00c9s dif\u00edcil comen\u00e7ar. Per\u00f2 tamb\u00e9 resulta dif\u00edcil mantenir-se actualitzat en els coneixements.<\/p>\n<p>\u00c9s per aquest motiu que avui us volem recomanar alguns recursos que ens ajudaran a decidir qu\u00e8 aprendre i quins coneixements actualitzar per a poder <strong>dedicar-nos al disseny web aquest 2019<\/strong>.<\/p>\n<p>En primer lloc, us deixem amb aquest <strong>resum en 5 passos<\/strong> en qu\u00e8 se&#8217;ns indiquen els coneixements base que hem de tenir per a dedicar-nos a la programaci\u00f3 i disseny <a href=\"https:\/\/es.wikipedia.org\/wiki\/Front-end_y_back-end\"><em>front-end<\/em><\/a>.<\/p>\n<p><iframe loading=\"lazy\" title=\"Becoming a Frontend Developer \/ Designer in 2019 - Five Step Guide\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/9kl30htP1iw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Primer de tot, situa el 1r pas, en tenir una bona base de disseny. Encara que ens dediquem a la programaci\u00f3 <em>front-end<\/em>, tamb\u00e9 hem de tenir coneixements b\u00e0sics d&#8217;all\u00f2 <strong>essencial del disseny<\/strong>: color i contrast, domini de l&#8217;espai blanc, \u00fas de tipografies, coneixement de la jerarquia visual i, sobretot, vetllar per una bona consist\u00e8ncia.<\/p>\n<p>Un cop coneixem els aspectes principals del disseny, en el 2n pas, ens centrar\u00edem en aprendre a <strong>crear interf\u00edcies d&#8217;usuari (UI)<\/strong> adequades per als nostres projectes. Prototipar i estructurar llocs webs o apps o qualsevol altre tipus d&#8217;aplicacions. Recomana que abans de crear codi HTML i CSS des de zero, primer creem prototips i maquetes per estructurar tots els elements que configuraran les diferents interf\u00edcies. Per a treballar en disseny UI hi ha programes espec\u00edfics que ens facilitaran la feina, com: <a href=\"https:\/\/www.sketch.com\/\">Sketch<\/a> (nom\u00e9s per MAC), <a href=\"https:\/\/www.adobe.com\/es\/products\/xd.html\">Adobe XD<\/a>, <a href=\"https:\/\/www.figma.com\/\">Figma<\/a>, <a href=\"https:\/\/www.invisionapp.com\/\">InVision<\/a>, etc.<\/p>\n<p>El 3r pas ens situaria ja en l&#8217;<strong>aprenentatge del codi HTML i CSS<\/strong>. La xarxa \u00e9s plena de tutorials per aprendre HTML i CSS, per tal d&#8217;estructurar i posar estils a tot el qu\u00e8 creem en els nostres projectes web. Per\u00f2, a m\u00e9s, tamb\u00e9 ens recomana l&#8217;\u00fas de <a href=\"https:\/\/sass-lang.com\/\">Sass<\/a>, un preprocessador de CSS que ens facilitar\u00e0 molt la feina a l&#8217;hora de treballar amb fulls d&#8217;estil. Amb la mateixa finalitat que Sass, tamb\u00e9 podries aprendre a utilitzar altres preprocessadors com <a href=\"http:\/\/lesscss.org\/\">Less<\/a>, <a href=\"http:\/\/stylus-lang.com\/\">Stylus<\/a> o <a href=\"http:\/\/compass-style.org\/\">Compass<\/a>.<\/p>\n<p>El 4t pas ja ens centra en una de les bases m\u00e9s importants del desenvolupament <em>front-end<\/em>: <strong>el JavaScript<\/strong>. \u00c9s un llenguatge que et permet actualitzar continguts din\u00e0micament, animar elements, controlar elements multim\u00e8dia&#8230; Per a treballar amb <em>front-end<\/em> et ser\u00e0 absolutament necessari tenir uns coneixements s\u00f2lids d&#8217;aquest llenguatge i dels seus <em>frameworks<\/em>.<\/p>\n<p>I, amb <strong>els <em>frameworks<\/em> i les llibreries JS<\/strong>, arribar\u00edem al 5\u00e8 i darrer pas. Aquests <em>frameworks<\/em> i llibreries de JavaScript ens seran molt \u00fatils per a crear aplicacions complexes d&#8217;una manera molt m\u00e9s r\u00e0pida i eficient. Se&#8217;ns recomana aprendre a utilitzar <a href=\"https:\/\/reactjs.org\/\">React<\/a>, <a href=\"https:\/\/angular.io\/\">Angular<\/a> o <a href=\"https:\/\/vuejs.org\/\">Vue.js<\/a>, tot i que resulta dif\u00edcil triar amb quin <em>framework<\/em> es vol treballar. Cadasc\u00fa ha de trobar amb quin d&#8217;ells es troba m\u00e9s c\u00f2mode i qu\u00e8 li \u00e9s m\u00e9s f\u00e0cil per als seus projectes.<\/p>\n<h2>Per a saber-ne m\u00e9s<\/h2>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/where-do-you-learn-html-css-in-2019\/\">Where do you learn HTML i CSS in 2019?<\/a>, Chris Coyier, CSS-Tricks<\/li>\n<li><a href=\"https:\/\/uxtricks.design\/blogs\/ux-design\/best-ui-design-tools\/\">Best UI Design Tools 2019: your guide<\/a>, Daniel Schwarz, UX Tricks<\/li>\n<li><a href=\"https:\/\/medium.com\/javascript-scene\/top-javascript-frameworks-and-topics-to-learn-in-2019-b4142f38df20\">Top JavaScript Frameworks and topics to learn in 2019<\/a>, Eric Elliot, Medium<\/li>\n<li><a href=\"https:\/\/stackshare.io\/stackups\/less-vs-sass-vs-stylus\">Sass vs Less vs Stylus &#8211; Help me decide<\/a>, Jordan Irabor, Stackshare<\/li>\n<li><a href=\"https:\/\/medium.com\/@TechMagic\/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d\">React vs Angular vs Vue.js &#8211; What choose in 2019?<\/a>, TechMagic, Medium<\/li>\n<\/ul>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Moltes vegades abans d&#8217;iniciar-nos en una professi\u00f3 o disciplina, ens preguntem quines s\u00f3n les coses que ens calen saber per a poder-nos-hi dedicar. I, en un m\u00f3n tan canviant com \u00e9s el m\u00f3n web, moltes vegades ens podem sentir sobrepassats en veure tants llenguatges, tantes eines, tant moviment i tants canvis. \u00c9s dif\u00edcil comen\u00e7ar. Per\u00f2 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/blog\/como-ser-programador-front-end-el-2019\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Com ser programador front-end en 2019?&#8221;<\/span><\/a><\/p>\n","protected":false},"author":163,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-527","post","type-post","status-publish","format-standard","hentry","category-blog","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/users\/163"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/comments?post=527"}],"version-history":[{"count":20,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/527\/revisions"}],"predecessor-version":[{"id":623,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/527\/revisions\/623"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/media?parent=527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/categories?post=527"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/tags?post=527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}