{"id":35,"date":"2015-01-29T17:51:48","date_gmt":"2015-01-29T17:51:48","guid":{"rendered":"https:\/\/felizardoandre.wordpress.com\/?p=35"},"modified":"2015-08-28T19:36:47","modified_gmt":"2015-08-28T19:36:47","slug":"front-end-o-que-e","status":"publish","type":"post","link":"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/","title":{"rendered":"Front-end. O que \u00e9?"},"content":{"rendered":"<p>Front-end. Voc\u00ea sabe o que \u00e9? O que ele faz?<\/p>\n<p>Alguns anos atr\u00e1s, o termo que mais se ouvia quanto ao profissional que trabalha com o desenvolvimento de sites era WebDesigner.<\/p>\n<p>E a fun\u00e7\u00e3o de WebDesigner era meio m\u00edstica, parecia ser um profissional que sabia de tudo um pouco, c\u00f3digos, Photoshop, Dreamweaver(algu\u00e9m realmente usa?) e assim vai.<\/p>\n<p>Atualmente, o desenvolvimento de um site passa pelos seguintes profissionais:<\/p>\n<ul>\n<li><a href=\"#ux\">UX<\/a><\/li>\n<li><a href=\"#ui\">UI<\/a><\/li>\n<li><a href=\"#front\">Front-end<\/a><\/li>\n<li><a href=\"#back\">Back-end*<\/a><\/li>\n<\/ul>\n<p>Hoje, meu foco \u00e9 explicar melhor sobre o Front-end, mas <!--more-->pra voc\u00ea n\u00e3o ficar perdido no texto, vou explicar rapidamente quem \u00e9 quem nessa hist\u00f3ria.<\/p>\n<hr \/>\n<blockquote>\n<h2><a name=\"ux\"><\/a>UX (User Experience)<\/h2>\n<\/blockquote>\n<p>Esse profissional \u00e9 respons\u00e1vel por pensar na experi\u00eancia do usu\u00e1rio. O fluxo do site \u00e9 pensado por ele.<\/p>\n<hr \/>\n<blockquote>\n<h2><a name=\"ui\"><\/a>UI (User Interface)<\/h2>\n<\/blockquote>\n<p>Esse \u00e9 o famoso Designer. Ele \u00e9 quem d\u00e1 vida a cara do site, colocando cor, escolhendo fontes, tamanhos e tudo mais. Obviamente ele deve seguir o que j\u00e1 foi desenhado pelo UX.<\/p>\n<hr \/>\n<p><img decoding=\"async\" class=\"size-medium wp-image-37 aligncenter lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/front-end-development.jpg?w=300\" alt=\"front-end-development\" width=\"300\" height=\"200\" data-srcset=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/front-end-development.jpg 620w, http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/front-end-development-300x200.jpg 300w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/200;\" \/><\/p>\n<blockquote>\n<h2><a name=\"front\"><\/a>Front-end<\/h2>\n<\/blockquote>\n<p>Nesta parte do processo entra o cara que eu quero falar, o Front-end. Ele \u00e9 respons\u00e1vel a fazer, efetivamente, o site funcionar, transformando o layout desenhado pelo UI em c\u00f3digos.<\/p>\n<p>Algumas vezes, principalmente sites feitos por sobrinhos, n\u00e3o existem as duas etapas anteriores. O site j\u00e1 come\u00e7a a ser desenvolvido no c\u00f3digo, sem antes se pensar na paleta de cores, ou se de acordo com o p\u00fablico-alvo \u00e9 a melhor a logo centralizada ou \u00e0 esquerda. O processo ideal \u00e9 os 3 trabalharem juntos, tornando o site algo f\u00e1cil de navegar, bonito e acess\u00edvel ao maior n\u00famero de dispositivos poss\u00edveis.<\/p>\n<p>Esse profissional \u00e9 o meio termo entre o Design e a programa\u00e7\u00e3o. O m\u00ednimo do m\u00ednimo \u00e9 que ele abra o layout feito <span style=\"text-decoration: line-through;\">no Photoshop<\/span> em um manipulador de imagens e replique o visual e os efeitos com HTML, CSS e JavaScript\/jQuery.<\/p>\n<p>HTML (Hypertext Markup Language) \u00e9 a linguagem base da Internet. Todo e qualquer site que voc\u00ea j\u00e1 tenha acessado na vida tem algo de HTML, inclusive esse blog aqui. No HTML criamos a estrutura da p\u00e1gina, por exemplo, onde vai ficar a imagem, onde vai ficar o link, qual texto vem primeiro, entre outros. Com o HTML5, lan\u00e7ado em 2009\/2010 (mas que alguns sobrinhos cismam em n\u00e3o utilizar), tamb\u00e9m ganhou uma import\u00e2ncia sem\u00e2ntica, ajudando <span style=\"text-decoration: line-through;\">o Google<\/span> os buscadores a varrerem melhor o conte\u00fado dos sites.<\/p>\n<p>CSS (Cascading Style Sheet) \u00e9 a linguagem que d\u00e1 o estilo a p\u00e1gina. Nela voc\u00ea troca a cor da fonte, a cor de fundo, tamanho das imagens, e mais um monte de coisas. Com o CSS3, tamb\u00e9m \u00e9 poss\u00edvel adicionar alguns efeitos de anima\u00e7\u00e3o, como rota\u00e7\u00f5es, altera\u00e7\u00f5es de formas, o que faz com que os criativos criem sites bem legais apenas com essas duas linguagens (HTML5 + CSS3).<\/p>\n<p>JavaScript (N\u00e3o \u00e9 um Script do Java, ou coisa do tipo) \u00e9 uma linguagem de programa\u00e7\u00e3o interpretada. Anima\u00e7\u00f5es mais complicadas, menus bem diferentes, intera\u00e7\u00f5es com usu\u00e1rio e outros. Para alguns grandes caras do mundo web, como o <a title=\"Diego Eis - Medium\" href=\"https:\/\/medium.com\/@diegoeis\" target=\"_blank\">Diego Eis<\/a> (criador do <a title=\"Tableless\" href=\"http:\/\/tableless.com.br\/\" target=\"_blank\">Tableless<\/a>, que eu indico como leitura di\u00e1ria), n\u00e3o \u00e9 t\u00e3o importante para um Front-end saber uma linguagem de Programa\u00e7\u00e3o como JavaScript. Na minha opini\u00e3o, at\u00e9 para evolu\u00e7\u00e3o como profissional, \u00e9 bom saber algumas coisas.<\/p>\n<hr \/>\n<blockquote>\n<h2><a name=\"back\"><\/a>Back-end<\/h2>\n<\/blockquote>\n<p>Apesar do Front-end trabalhar com linguagens de programa\u00e7\u00e3o, o Back-end \u00e9 o programador heavy da hist\u00f3ria. Nem todo site \u00e9 necess\u00e1rio um back-end, mas para sites din\u00e2micos como lojas virtuais, portais de not\u00edcias e outros, o trabalho dele \u00e9 important\u00edssimo.<\/p>\n<p>Espero que com esse texto voc\u00ea tenha entendido melhor quem \u00e9 o Front-end, o que faz e como \u00e9 o Processo Ideal para o desenvolvimento de sites!<\/p>\n<p>At\u00e9 a pr\u00f3xima.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Front-end. Voc\u00ea sabe o que \u00e9? O que ele faz? Alguns anos atr\u00e1s, o termo que mais se ouvia quanto ao profissional que trabalha com o desenvolvimento de sites era WebDesigner. E a fun\u00e7\u00e3o de WebDesigner era meio m\u00edstica, parecia ser um profissional que sabia de tudo um pouco, c\u00f3digos, Photoshop, Dreamweaver(algu\u00e9m realmente usa?) e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":36,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[48,49,50,51,52,53,54,55,56,57,58,59],"class_list":["post-35","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnologia","tag-back-end","tag-css","tag-designer","tag-dreamweaver","tag-front-end","tag-html","tag-internet","tag-javascript","tag-js","tag-ui","tag-ux","tag-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Front-end. O que \u00e9? - Blog do Andr\u00e9 Felizardo<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Front-end. O que \u00e9? - Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"og:description\" content=\"Front-end. Voc\u00ea sabe o que \u00e9? O que ele faz? Alguns anos atr\u00e1s, o termo que mais se ouvia quanto ao profissional que trabalha com o desenvolvimento de sites era WebDesigner. E a fun\u00e7\u00e3o de WebDesigner era meio m\u00edstica, parecia ser um profissional que sabia de tudo um pouco, c\u00f3digos, Photoshop, Dreamweaver(algu\u00e9m realmente usa?) e [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-29T17:51:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-08-28T19:36:47+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png\" \/>\n\t<meta property=\"og:image:width\" content=\"670\" \/>\n\t<meta property=\"og:image:height\" content=\"337\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Andr\u00e9 Felizardo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andr\u00e9 Felizardo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/front-end-o-que-e\\\/#article\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/front-end-o-que-e\\\/\"},\"author\":{\"name\":\"Andr\u00e9 Felizardo\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"headline\":\"Front-end. O que \u00e9?\",\"datePublished\":\"2015-01-29T17:51:48+00:00\",\"dateModified\":\"2015-08-28T19:36:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/front-end-o-que-e\\\/\"},\"wordCount\":626,\"commentCount\":3,\"image\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/front-end-o-que-e\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/01\\\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png\",\"keywords\":[\"back-end\",\"css\",\"designer\",\"dreamweaver\",\"front-end\",\"html\",\"Internet\",\"javascript\",\"js\",\"ui\",\"ux\",\"web\"],\"articleSection\":[\"Tecnologia\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/front-end-o-que-e\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/front-end-o-que-e\\\/\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/front-end-o-que-e\\\/\",\"name\":\"Front-end. O que \u00e9? - Blog do Andr\u00e9 Felizardo\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/front-end-o-que-e\\\/#primaryimage\"},\"image\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/front-end-o-que-e\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/01\\\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png\",\"datePublished\":\"2015-01-29T17:51:48+00:00\",\"dateModified\":\"2015-08-28T19:36:47+00:00\",\"author\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"breadcrumb\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/front-end-o-que-e\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/front-end-o-que-e\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/front-end-o-que-e\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/01\\\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png\",\"contentUrl\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/01\\\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png\",\"width\":670,\"height\":337},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/front-end-o-que-e\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Front-end. O que \u00e9?\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\",\"name\":\"Blog do Andr\u00e9 Felizardo\",\"description\":\"Programa\u00e7\u00e3o de dev para dev\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\",\"name\":\"Andr\u00e9 Felizardo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"contentUrl\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"caption\":\"Andr\u00e9 Felizardo\"},\"sameAs\":[\"http:\\\/\\\/www.andrefelizardo.com.br\"],\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/author\\\/andrefelizardo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Front-end. O que \u00e9? - Blog do Andr\u00e9 Felizardo","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/","og_locale":"pt_BR","og_type":"article","og_title":"Front-end. O que \u00e9? - Blog do Andr\u00e9 Felizardo","og_description":"Front-end. Voc\u00ea sabe o que \u00e9? O que ele faz? Alguns anos atr\u00e1s, o termo que mais se ouvia quanto ao profissional que trabalha com o desenvolvimento de sites era WebDesigner. E a fun\u00e7\u00e3o de WebDesigner era meio m\u00edstica, parecia ser um profissional que sabia de tudo um pouco, c\u00f3digos, Photoshop, Dreamweaver(algu\u00e9m realmente usa?) e [&hellip;]","og_url":"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/","og_site_name":"Blog do Andr\u00e9 Felizardo","article_published_time":"2015-01-29T17:51:48+00:00","article_modified_time":"2015-08-28T19:36:47+00:00","og_image":[{"width":670,"height":337,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png","type":"image\/png"}],"author":"Andr\u00e9 Felizardo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Andr\u00e9 Felizardo","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/#article","isPartOf":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/"},"author":{"name":"Andr\u00e9 Felizardo","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"headline":"Front-end. O que \u00e9?","datePublished":"2015-01-29T17:51:48+00:00","dateModified":"2015-08-28T19:36:47+00:00","mainEntityOfPage":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/"},"wordCount":626,"commentCount":3,"image":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/#primaryimage"},"thumbnailUrl":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png","keywords":["back-end","css","designer","dreamweaver","front-end","html","Internet","javascript","js","ui","ux","web"],"articleSection":["Tecnologia"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/","url":"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/","name":"Front-end. O que \u00e9? - Blog do Andr\u00e9 Felizardo","isPartOf":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/#primaryimage"},"image":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/#primaryimage"},"thumbnailUrl":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png","datePublished":"2015-01-29T17:51:48+00:00","dateModified":"2015-08-28T19:36:47+00:00","author":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"breadcrumb":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/#primaryimage","url":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png","contentUrl":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png","width":670,"height":337},{"@type":"BreadcrumbList","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"http:\/\/www.andrefelizardo.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Front-end. O que \u00e9?"}]},{"@type":"WebSite","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website","url":"http:\/\/www.andrefelizardo.com.br\/blog\/","name":"Blog do Andr\u00e9 Felizardo","description":"Programa\u00e7\u00e3o de dev para dev","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.andrefelizardo.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b","name":"Andr\u00e9 Felizardo","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","url":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","contentUrl":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","caption":"Andr\u00e9 Felizardo"},"sameAs":["http:\/\/www.andrefelizardo.com.br"],"url":"http:\/\/www.andrefelizardo.com.br\/blog\/author\/andrefelizardo\/"}]}},"jetpack_featured_media_url":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png","jetpack_shortlink":"https:\/\/wp.me\/p6EP66-z","jetpack-related-posts":[{"id":1100,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/","url_meta":{"origin":35,"position":0},"title":"Tipos de Frontend","author":"Andr\u00e9 Felizardo","date":"4 de mar\u00e7o de 2020","format":false,"excerpt":"A alguns anos atr\u00e1s escrevi um texto sobre o que \u00e9 o frontend, tamb\u00e9m palestrei sobre o que \u00e9 frontend, a carreira do frontend e os tipos de frontend que existem. Como minha vis\u00e3o sobre o assunto mudou bastante, resolvi revisitar esses materiais e escrever um parecer atualizado sobre os\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"http:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=700%2C400 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=1050%2C600 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=1400%2C800 4x"},"classes":[]},{"id":717,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/node-js-o-que-e-entenda-agora\/","url_meta":{"origin":35,"position":1},"title":"Node.js, o que \u00e9? Entenda agora","author":"Andr\u00e9 Felizardo","date":"24 de outubro de 2016","format":false,"excerpt":"As vezes eu digo que Node.js \u00e9 o futuro. Mas est\u00e1 errado. Node.js \u00e9 o presente. Se voc\u00ea quer fazer apps com Ionic, por exemplo, voc\u00ea precisa ter\u00a0Node\u00a0instalado.\u00a0At\u00e9 pra brincar com .NET Core, voc\u00ea pode utilizar\u00a0Node\u00a0pra criar sua Web API. E n\u00e3o sei voc\u00ea, mas, eu usei v\u00e1rias vezes o\u00a0npm,\u2026","rel":"","context":"Em &quot;Curiosidades&quot;","block_context":{"text":"Curiosidades","link":"http:\/\/www.andrefelizardo.com.br\/blog\/category\/curiosidades\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/10\/node.js.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/10\/node.js.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/10\/node.js.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/10\/node.js.png?resize=700%2C400 2x"},"classes":[]},{"id":404,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-site-encontre-o-ideal-para-sua-empresa\/","url_meta":{"origin":35,"position":2},"title":"Tipos de Site &#8211; Encontre o ideal para sua empresa","author":"Andr\u00e9 Felizardo","date":"12 de outubro de 2015","format":false,"excerpt":"Um dos primeiro passos para colocar sua empresa\/ideia no mundo digital, com uma boa identidade \u00e9 ter um site. Por\u00e9m mesmo identificando essa necessidade, alguns empreendedores acreditam que ter um site \u00e9 muito caro ou dif\u00edcil. Nos primeiros contatos com os clientes, eu gosto de passar os v\u00e1rios tipos poss\u00edveis\u2026","rel":"","context":"Em &quot;Empreendedorismo&quot;","block_context":{"text":"Empreendedorismo","link":"http:\/\/www.andrefelizardo.com.br\/blog\/category\/empreendedorismo\/"},"img":{"alt_text":"sites","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/10\/sites.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/10\/sites.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/10\/sites.png?resize=525%2C300 1.5x"},"classes":[]},{"id":963,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-vue-js\/","url_meta":{"origin":35,"position":3},"title":"O que \u00e9 Vue.js","author":"Andr\u00e9 Felizardo","date":"10 de janeiro de 2018","format":false,"excerpt":"Vue.js \u00e9 uma biblioteca\u00a0JavaScript\u00a0acess\u00edvel, vers\u00e1til e perform\u00e1tica. E apesar do site oficial dizer que Vue.js \u00e9 um framework JavaScript Progressivo, eu j\u00e1 vou come\u00e7ar discordando :) Entendemos por framework, aquela solu\u00e7\u00e3o 'fechada' quando voc\u00ea j\u00e1 tem definido por exemplo a estrutura de diret\u00f3rios, ou a forma como voc\u00ea faz uma\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"http:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=700%2C400 2x"},"classes":[]},{"id":72,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/acessibilidade-web-parte-i\/","url_meta":{"origin":35,"position":4},"title":"Acessibilidade Web &#8211; Parte I","author":"Andr\u00e9 Felizardo","date":"9 de mar\u00e7o de 2015","format":false,"excerpt":"Acessibilidade Web quer dizer que todos os conte\u00fados ou servi\u00e7os devem estar acess\u00edveis, com f\u00e1cil acesso, da forma mais intuitiva e com o menor esfor\u00e7o, para o maior n\u00famero poss\u00edvel de usu\u00e1rios, independente de sistemas ou dispositivos utilizados, mas sem esquecer que tamb\u00e9m deve ser independente a suas culturas, experi\u00eancias\u2026","rel":"","context":"Em &quot;Tecnologia&quot;","block_context":{"text":"Tecnologia","link":"http:\/\/www.andrefelizardo.com.br\/blog\/category\/tecnologia\/"},"img":{"alt_text":"Acessibilidade Web","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/acessibilidade_web.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/acessibilidade_web.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/acessibilidade_web.png?resize=525%2C300 1.5x"},"classes":[]},{"id":926,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-ember-js\/","url_meta":{"origin":35,"position":5},"title":"O que \u00e9 Ember.js","author":"Andr\u00e9 Felizardo","date":"30 de setembro de 2017","format":false,"excerpt":"Ember.js \u00e9 um framework Javascript (sim, mais um) para construir aplica\u00e7\u00f5es web ambiciosas. O objetivo dele \u00e9 aumentar a produtividade de desenvolvimento de aplica\u00e7\u00f5es web, mas focado no paradigma de que \u00e9 melhor gastar um pouco mais de tempo no desenvolvimento por\u00e9m facilitar a manuten\u00e7\u00e3o. Antes de detalhar mais o\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"http:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"Logo Ember.js","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/09\/ember.js.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/09\/ember.js.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/09\/ember.js.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/09\/ember.js.png?resize=700%2C400 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":0,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/35\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media\/36"}],"wp:attachment":[{"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media?parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/categories?post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/tags?post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}