{"id":5456,"date":"2017-04-04T09:00:18","date_gmt":"2017-04-04T12:00:18","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=5456"},"modified":"2019-03-26T11:02:13","modified_gmt":"2019-03-26T14:02:13","slug":"front-end-ou-back-end-entenda-as-diferencas-e-descubra-o-seu-perfil","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/front-end-ou-back-end-entenda-as-diferencas-e-descubra-o-seu-perfil\/","title":{"rendered":"Front-End ou Back-End? Entenda as diferen\u00e7as e descubra o seu perfil"},"content":{"rendered":"<p>Se voc\u00ea quer saber as <strong>diferen\u00e7as entre Front-End e Back-End<\/strong>, voc\u00ea est\u00e1 no lugar certo! A cria\u00e7\u00e3o de sistemas envolve a separa\u00e7\u00e3o entre o <a href=\"https:\/\/www.mxcursos.com\/blog\/categoria\/desenvolvimento\/\">desenvolvimento<\/a> dos recursos que o ele cont\u00e9m: Back-End e a interface, que \u00e9 onde o usu\u00e1rio faz a intera\u00e7\u00e3o com as suas fun\u00e7\u00f5es e as informa\u00e7\u00f5es que ele manipula \u2014 o Front-End.<\/p>\n<p>Para atuar como desenvolvedor web, \u00e9 importante escolher entre Front-End ou Back-End, pois h\u00e1 uma grande variedade de tecnologias e t\u00e9cnicas espec\u00edficas para cada uma delas. No mercado, h\u00e1 uma clara distin\u00e7\u00e3o entre os profissionais que atuam entre delas e \u00e9 importante se especializar na \u00e1rea desejada para encontrar oportunidades de trabalho.<\/p>\n<p>Explicaremos nesse post as diferen\u00e7as entre Front-End e Back-End e qual \u00e9 o papel do profissional que atua em cada uma delas.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-5629 size-full\" title=\"Diferen\u00e7as entre Front-End e Back-End\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/03\/2.jpg\" alt=\"Diferen\u00e7as entre Front-End e Back-End\" width=\"740\" height=\"307\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/03\/2.jpg 740w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/03\/2-600x249.jpg 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2017\/03\/2-24x10.jpg 24w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><\/p>\n<h2>Desenvolvedor Front-End<\/h2>\n<p>Este profissional vai desenvolver a <a href=\"https:\/\/www.mxcursos.com\/blog\/como-criar-sites-incriveis\/\" target=\"_blank\" rel=\"noopener noreferrer\">interface entre o sistema e o usu\u00e1rio<\/a>. A partir do projeto gr\u00e1fico do sistema criado por um <a href=\"https:\/\/www.mxcursos.com\/blog\/7-softwares-todo-web-designer-precisa-dominar\/\" target=\"_blank\" rel=\"noopener noreferrer\">designer<\/a>, ele vai desenvolver as telas e seu comportamento em fun\u00e7\u00e3o da intera\u00e7\u00e3o com o usu\u00e1rio. Por exemplo:<\/p>\n<ul>\n<li>Recursos da interface do sistema: bot\u00f5es, campos de pesquisa e exibi\u00e7\u00e3o de resultados, listas, tabelas etc.;<\/li>\n<li>Intera\u00e7\u00e3o com o usu\u00e1rio: telas com mensagens de texto indicando que uma a\u00e7\u00e3o foi conclu\u00edda ou est\u00e1 pendente e varia\u00e7\u00f5es de cores e formas conforme as a\u00e7\u00f5es dos usu\u00e1rios;<\/li>\n<li>Anima\u00e7\u00f5es: modo como informa\u00e7\u00f5es aparecem ou saem da tela ou tornam o sistema mais intuitivo;<\/li>\n<li>Ferramentas para auxiliar o usu\u00e1rio a manipular as informa\u00e7\u00f5es na tela: autocomplete, modais, dicas que explicam as fun\u00e7\u00f5es que o sistema oferece.<\/li>\n<\/ul>\n<p><strong>Dica:<\/strong> Quer se especializar ou potencializar seus conhecimentos em Desenvolvimento Front-End? Conhe\u00e7a nossos <a href=\"https:\/\/www.mxcursos.com\/front-end?tracking=blog&amp;utm_source=blog&amp;utm_medium=post_link&amp;utm_content=marketing\" target=\"_blank\" rel=\"noopener noreferrer\">cursos de Desenvolvimento<\/a>. E se quiser aprender a programar, tamb\u00e9m temos \u00f3timos <a href=\"https:\/\/www.mxcursos.com\/programacao?tracking=blog&amp;utm_source=blog&amp;utm_medium=post_link&amp;utm_content=marketing\" target=\"_blank\" rel=\"noopener noreferrer\">cursos de Programa\u00e7\u00e3o<\/a>.<\/p>\n<h2>O que o desenvolvedor Front-End deve compreender?<\/h2>\n<h3>HTML<\/h3>\n<p>Linguagem para estruturar a p\u00e1gina. Com o HTML, s\u00e3o criados os elementos b\u00e1sicos da p\u00e1gina \u2014 como cabe\u00e7alho, rodap\u00e9, itens de formul\u00e1rio e tabelas \u2014, bem como a estrutura em que as informa\u00e7\u00f5es s\u00e3o apresentadas.<\/p>\n<h3>CSS<\/h3>\n<p>\u00c9 usada para dar formar e a apar\u00eancia \u00e0 p\u00e1gina. Por meio do <a href=\"https:\/\/www.mxcursos.com\/blog\/aprenda-a-criar-pagina-estilo-onepage-com-html5-e-css3\/\" rel=\"noopener noreferrer\">CSS<\/a> define-se cores, fontes, tamanhos, distanciamento e posicionamento dos elementos da p\u00e1gina.<\/p>\n<h3>Javascript<\/h3>\n<p>Linguagem utilizada para determinar o comportamento da p\u00e1gina, manipulando a estrutura em HTML, o CSS aplicado a ele e as informa\u00e7\u00f5es que est\u00e3o sendo mostradas.<\/p>\n<p>Com Javascript, s\u00e3o criadas as ferramentas que v\u00e3o facilitar a utiliza\u00e7\u00e3o do sistema pelo usu\u00e1rio. Alguns exemplos criados usando essa linguagem s\u00e3o autocomplete, calend\u00e1rio, carrossel e customiza\u00e7\u00f5es como dicas exibidas em bal\u00f5es estilizados, por exemplo.<\/p>\n<p>Dica: Quer aprender Javascript? Conhe\u00e7a <a href=\"https:\/\/www.mxcursos.com\/javascript?tracking=blog&amp;utm_source=blog&amp;utm_medium=post_link&amp;utm_content=marketing\" target=\"_blank\" rel=\"noopener noreferrer\">nossos cursos online<\/a>.<\/p>\n<h2>Desenvolvedor Back-End<\/h2>\n<p>\u00c9 o respons\u00e1vel por criar as funcionalidades que um sistema apresenta. \u00c9 ele quem desenvolve o software que cont\u00e9m as regras de neg\u00f3cio, faz a intera\u00e7\u00e3o com os bases de dados, cria APIs e outros recursos que o sistema pode oferece.<\/p>\n<h2>Como o profissional Back-End atua?<\/h2>\n<p><a href=\"https:\/\/www.mxcursos.com\/blog\/curso-online-de-programacao-como-escolher-um\/\" rel=\"noopener noreferrer\">Para atuar como Back-End<\/a>, o desenvolvedor deve conhecer uma linguagem de programa\u00e7\u00e3o como Java, <a href=\"https:\/\/www.mxcursos.com\/blog\/como-usar-sistemas-em-php-para-criar-aplicacoes-incriveis\/\" rel=\"noopener noreferrer\">PHP<\/a> ou Phyton, por exemplo, que ser\u00e1 usada para a constru\u00e7\u00e3o do sistema. Ele ent\u00e3o cria a l\u00f3gica do sistema e desenvolve fun\u00e7\u00f5es como:<\/p>\n<ul>\n<li>Grava\u00e7\u00e3o e atualiza\u00e7\u00e3o de informa\u00e7\u00f5es;<\/li>\n<li>Transa\u00e7\u00f5es comerciais;<\/li>\n<li>Envios de e-mail;<\/li>\n<li>Fun\u00e7\u00f5es que geram an\u00e1lises dos dados armazenados e ficam dispon\u00edveis para gr\u00e1ficos;<\/li>\n<li>Relat\u00f3rios.<\/li>\n<\/ul>\n<p>O desenvolvedor Back-End deve saber trabalhar com bancos de dados e conhecer tecnologias para cria\u00e7\u00e3o de servidores web, transa\u00e7\u00f5es usando protocolos como HTTP e de seguran\u00e7a para proteger os dados dos usu\u00e1rios.<\/p>\n<p>Para <strong>atuar como Front-End ou Back-End<\/strong>, existem v\u00e1rios conhecimentos espec\u00edficos que diferenciam bastante um do outro e s\u00e3o determinantes na carreira do desenvolvedor que vai atuar em cada uma delas.<\/p>\n<p>O Front-End deve se aprimorar em linguagens e recursos que v\u00e3o tornar a interface com o usu\u00e1rio clara e intuitiva, enquanto o Back-End desenvolve os recursos que definem o neg\u00f3cio para o qual o sistema foi idealizado.<\/p>\n<p>E voc\u00ea? Est\u00e1 interessado na carreira de desenvolvedor Front-End ou Back-End? <a href=\"https:\/\/mxcursos.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Conhe\u00e7a os cursos da MX Cursos!<\/a> Voc\u00ea vai encontrar o que precisa para ser um profissional completo, independentemente de qual for a sua op\u00e7\u00e3o.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea quer saber as diferen\u00e7as entre Front-End e Back-End, voc\u00ea est\u00e1 no lugar certo! A cria\u00e7\u00e3o de sistemas envolve a separa\u00e7\u00e3o entre o desenvolvimento dos recursos que o ele cont\u00e9m: Back-End e a interface, que \u00e9 onde o usu\u00e1rio faz a intera\u00e7\u00e3o com as suas fun\u00e7\u00f5es e as informa\u00e7\u00f5es que ele manipula \u2014 o [&hellip;]<\/p>\n","protected":false},"author":83,"featured_media":18844,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[1272,1181,1271,1270,1233,1185],"class_list":["post-5456","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-back-end","tag-css3","tag-front-end","tag-html","tag-javascript","tag-php"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/5456","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=5456"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/5456\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/18844"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=5456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=5456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=5456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}