{"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\/blog\/como-ser-programador-front-end-el-2019\/","title":{"rendered":"\u00bfC\u00f3mo ser programador front-end el 2019?"},"content":{"rendered":"<p>Muchas veces antes de iniciarnos en una profesi\u00f3n o disciplina, nos preguntamos cu\u00e1les son las cosas necesarias para podernos dedicar a \u00e9sta. Y, en un mundo tan cambiante como es el mundo web, muchas veces nos podemos sentir abrumados al ver tantos lenguajes, tantas herramientas, tanto movimiento y tantos cambios. Es dif\u00edcil empezar. Pero tambi\u00e9n resulta dif\u00edcil mantenerse actualizado en los conocimientos.<\/p>\n<p>Es por este motivo que hoy os vamos a recomendar algunos recursos que nos ayudar\u00e1n a decidir qu\u00e9 aprender y qu\u00e9 conocimientos actualizar para poder <strong>dedicarnos al dise\u00f1o web este 2019<\/strong>.<\/p>\n<p>En primer lugar, compartimos con vosotros este <strong>resumen en 5 pasos<\/strong> en el que se indica qu\u00e9 conocimientos base necesitamos para dedicarnos a la programaci\u00f3n y el dise\u00f1o <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>En primer lugar, sit\u00faa el paso 1 en tener una buena base de dise\u00f1o. Aunque nos dediquemos a la programaci\u00f3n <em>front-end<\/em>, tambi\u00e9n tenemos que tener conocimientos b\u00e1sicos de lo <strong>esencial del dise\u00f1o<\/strong>: color y contraste, dominio del espacio blanco, uso de tipograf\u00edas, conocimiento de la jerarqu\u00eda visual y, sobre todo, velar por una buena consistencia.<\/p>\n<p>Una vez conocemos los aspectos principales del dise\u00f1o, en el 2\u00ba paso, nos centrar\u00edamos en aprender a <strong>crear interfaces de usuario (UI)<\/strong> adecuadas para nuestros proyectos. Prototipar y estructurar sitios web o <em>apps <\/em> o cualquier otro tipo de aplicaciones. Recomienda que antes de crear c\u00f3digo HTML y CSS desde cero, primero creemos prototipos y maquetas para estructurar todos los elementos que configuraran las diferentes interfaces. Para trabajar en dise\u00f1o UI, hay programas espec\u00edficos que nos facilitar\u00e1n la tarea, como: <a href=\"https:\/\/www.sketch.com\/\">Sketch<\/a> (para 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 tercer paso nos situar\u00eda ya en el <strong>aprendizaje del c\u00f3digo HTML y CSS<\/strong>. La red va llena de tutoriales para aprender HTML y CSS, para aprender a estructurar y poner estilos a todo lo que creamos en nuestros proyectos web. Pero, adem\u00e1s, tambi\u00e9n nos recomienda el uso de <a href=\"https:\/\/sass-lang.com\/\">Sass<\/a>, un preprocesador de CSS que nos facilitar\u00e1 mucho el trabajo cuando trabajemos con hojas de estilo. Con la misma finalidad que Sass, tambi\u00e9n podr\u00edamos aprender a utilizar otros preprocesadores como <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 4\u00ba paso ya nos centra en una de las bases m\u00e1s importantes del desarrollo <em>front-end<\/em>: <strong>el JavaScript<\/strong>. Es un lenguaje que te permite actualizar contenidos din\u00e1micamente, animar elementos, controlar elementos multimedia&#8230; Para trabajar en <em>front-end<\/em> te ser\u00e1 absolutamente necesario tener unos conocimientos s\u00f3lidos de este lenguaje y tambi\u00e9n de sus <em>frameworks<\/em>.<\/p>\n<p>Y, con <strong>los <em>frameworks<\/em> y las librer\u00edas JS<\/strong>, llegar\u00edamos al 5\u00ba y \u00faltimo paso. Estos <em>frameworks<\/em> y librer\u00edas de JavaScript nos ser\u00e1n muy \u00fatiles para crear aplicaciones complejas de una forma mucho m\u00e1s r\u00e1pida y eficiente. Se nos insta a aprender a utilizar <a href=\"https:\/\/reactjs.org\/\">React<\/a>, <a href=\"https:\/\/angular.io\/\">Angular<\/a> o <a href=\"https:\/\/vuejs.org\/\">Vue.js<\/a>, aunque resulta realmente dif\u00edcil elegir con qu\u00e9 <em>framework<\/em> se va a trabajar. Cada uno debe encontrar con cu\u00e1l de ellos se encuentra m\u00e1s c\u00f3modo y qu\u00e9 le resulta m\u00e1s f\u00e1cil para sus proyectos.<\/p>\n<h2>Para saber m\u00e1s<\/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>Muchas veces antes de iniciarnos en una profesi\u00f3n o disciplina, nos preguntamos cu\u00e1les son las cosas necesarias para podernos dedicar a \u00e9sta. Y, en un mundo tan cambiante como es el mundo web, muchas veces nos podemos sentir abrumados al ver tantos lenguajes, tantas herramientas, tanto movimiento y tantos cambios. Es dif\u00edcil empezar. Pero tambi\u00e9n &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/blog\/como-ser-programador-front-end-el-2019\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00ab\u00bfC\u00f3mo ser programador front-end el 2019?\u00bb<\/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\/wp-json\/wp\/v2\/posts\/527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/users\/163"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/comments?post=527"}],"version-history":[{"count":20,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/527\/revisions"}],"predecessor-version":[{"id":623,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/527\/revisions\/623"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/media?parent=527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/categories?post=527"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/tags?post=527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}