Eu sou Desenvolvedor Front-End

Criação e desenvolvimento de sites; otimização SEO onpage; melhorias de velocidade e performance para o Google. Trabalho como desenvolvedor front-end e consultor!

Por Fabio Lobo, atualizado em 26/07/2020. 2 pessoas falando sobre isso!

Quem mexe com código sabe programar? Bom, não é bem assim. O trabalho de um Desenvolvedor Front-End não é nada parecido com a “programação” que muitos têm em mente.

Hoje temos centenas de termos técnicos para quem trabalha com internet. Não sinta-se mal por não conhecer algum ou se confundir com outro. Às vezes até eu me enrolo com os nomes.

Sou auto-didata com desenvolvimento front-end, comecei na área há cerca de quinze anos. Muita coisa mudou de lá pra cá – na verdade, muda quase todo mês. Vou falar mais sobre essa área por aqui, e esse post vai ser sempre atualizado quando alguma coisa nova surgir!

O que faz um Desenvolvedor Front-End?

ilustração de navegador dividido ao meio; de um lado o código front-end, do outro o resultado (site)

Explicar o que um desenvolvedor Front-end faz é fácil. O complicado é explicar que isso não é “programação”.

Em uma explicação básica, um desenvolvedor Front-end pega o layout do site que o Web Designer criou, fatia as imagens e escreve códigos o suficiente para que aquele layout possa ser visualizado em um navegador.

Em mais detalhes, o trabalho de criação de sites envolve três etapas: web design, front-end e back-end.

  1. Web Design: o layout é uma imagem que representa como o site aparecerá em navegadores;
  2. Desenvolvimento Front-end: trabalha a parte que o visitante do site vai ver, que é basicamente o layout;
  3. Programação Back-end: trabalha as ferramentas (como validação e envio de um formulário de contato) e painel de controle do site, que são as partes que o visitante não vê no site.

Um exemplo que costumo dar é o corpo humano. O Web Design é a pele, os pelos, a roupa e tudo mais que é visual. O Front-End são os ossos, a carne e os músculos, o que dá estrutura à parte visual. Já o Back-End seriam os órgãos, como o cérebro e o coração, o que faz tudo funcionar.

5 diferenças entre front-end e back-end

Em resumo:

  1. Linguagem de marcação / programação: o front-ender trabalha com HTML, CSS e JavaScript (client-side); o back-ender normalmente trabalha com apenas uma linguagem como PHP, Python, e até JavaScript (server-side);
  2. Frameworks: enquanto o foco dos frameworks de front-end é visual, como jQuery e Bootstrap (o qual eu chamo carinhosamente de butt’s crap, mas fica pra outro post), os frameworks de back-end têm foco nas funcionalidades, como Laravel, ou CMSs como WordPress;
  3. Otimização: a grosso modo, o dev front-end otimiza o site para o navegador; o dev back-end otimiza para o servidor;
  4. Boas práticas: o desenvolvedor front-end tem um contato maior com SEO técnico (parte do SEO Onpage), acessibilidade e UX (experiência do usuário); já o desenvolvedor back-end se concentra mais com segurança, validação e sanitização de dados;
  5. Armazenamento de dados: para salvar dados de usuários o responsável pelo front-end utiliza o próprio navegador, como local storage, session storage e cookies; já o encarregado pelo back-end utiliza banco de dados como SQL.

Como você pode ver, são duas áreas bem distintas. E não dá pra dizer exatamente que uma é mais fácil que a outra, porque ambas têm suas complexidades.

Mas também há o profissional responsável tanto por front-end quanto por back-end: o Desenvolvedor full stack.

E antigamente dava-se o nome de Webmaster para o profissional que trabalhava tanto com Web Design quanto com Desenvolvimento Web.

Exemplos de trabalhos de Front-end

Trabalho com desenvolvimento front-end de sites, blogs, lojas virtuais… o que houver de demanda! Abaixo, seguem 5 trabalhos que usarei como exemplo.

Melhorias de velocidade e desempenho em site

printscreen do google lighthouse com resultados de desempenho

Um de meus trabalhos mais recentes foi pra um antigo cliente. Sua nota no relatório Google Lighthouse havia caído bastante, então era preciso modernizar parte do código e otimizar tudo de acordo com as novas recomendações do Google.

O site posta muitas imagens e também utiliza sistemas de anúncios, que como eu já disse aqui, são os principais vilões em relação à lentidão de um site.

Ou seja, era praticamente uma missão impossível. Mas no final deu tudo certo.

Resumo sobre o projeto:

  • Melhorias no front-end: implementei melhorias como lazy-loading, removi o uso de jQuery por parte do tema WordPress e também reduzi scripts;
  • Otimizações em geral: além de uma limpa em plugins e scripts desnecessários, também foi preciso trabalhar algumas minificações e retardamento de scripts;
  • Trabalho completo: fora as otimizações, a criação de logo, identidade visual e tema WordPress também fizeram parte do meu trabalho nesse projeto.

Gerador de senhas

printscreen de gerador de senhas K_Gasp4m

O K_Gasp4m (“K – Generate a strong password for me”) foi um trabalho open source que fiz pra “brincar” com JavaScript.

Isso porque na época eu não tinha muitas demandas com essa linguagem, então comecei a pensar em algumas ferramentas básicas para praticar. Essa foi a primeira: um gerador de senhas.

Resumo sobre o projeto:

  • Desenvolvimento: ferramenta simples criada com JavaScript puro que gera senhas fortes a partir de algumas opções que o usuário selecionar;
  • Criação: também fiz o design da ferramenta, que tem visual tão simples quanto o gerador em si.

Desenvolvimento de site

dinheirama

Em mais uma oportunidade de trabalhar para o Dinheirama, dessa vez a missão era fazer o desenvolvimento front-end e para WordPress do novo layout do site.

O layout em si foi criado pela equipe da Grão, e foi uma evolução do design anterior.

printscreen do google lighthouse

Um dos objetivos do trabalho também foi deixar o site mais leve, até porque o tema anterior (que fora desenvolvido por uma agência terceira) era extremamente lento e pesado.

Resumo sobre o projeto:

  • Desenvolvimento de layout: fiz o tema para WordPress a partir do layout criado por eles;
  • Consultoria: participei do processo de criação de layout orientando a equipe com boas práticas de usabilidade e otimização.

Calculadora com simulação de gastos

printscreen da ferramenta de cálculo de gastos

Criei e desenvolvi a Cãoculadora pensando em ajudar com o planejamento financeiro de quem tem animais de estimação (principalmente cães, que são minha praia).

Nesse caso, além da ferramenta em si, fiz uma pesquisa extensa sobre o mercado pra reunir o máximo de informações da melhor maneira possível.

Resumo sobre o projeto:

  • Criação: segui a identidade visual do blog, que também é de minha autoria;
  • Desenvolvimento: a calculadora funciona com JavaScript puro e uma API de gráficos do Google.

Gerador de nomes para cachorros

printscreen da ferramenta geradora de nomes

Em mais um projeto para meu blog, o Amo Vira Lata, criei um gerador de nomes – o KchorrIN.

A ferramenta é bem simples: o usuário seleciona um gênero e um tipo de nome, e aí é só clicar no botão que o nome gerado aparecerá na coleira.

Resumo sobre o projeto:

  • Criação: segui a identidade visual do blog e adaptei uma ilustração de coleira para ter um aspecto visual mais divertido;
  • Desenvolvimento: também criada com JavaScript puro, a ferramenta ainda tem uma animação de zoom na hora em que o nome é gerado.

Otimizações para Google PageSpeed Insights

prinscreen de resultado no google pagespeed insights e no google lighthouse

Por fim, meu próprio site não poderia deixar de ser um case. Afinal, eu tenho que dar o exemplo, certo?

Como o Google passou a realizar diversas mudanças em suas recomendações a respeito de velocidade e desempenho dos sites, passei a fazer alguns testes pra deixar meu site o mais próximo possível do que o buscador vê como “ideal”.

Isso porque é praticamente impossível seguir alguns requisitos que o Google recomenda. Nem os próprios sites do Google têm pontuação 100 no PageSpeed, por exemplo.

printscreen de resultados no think with google - test my site

Para a avaliação, utilizei também o Google Lighthouse, que é mais completo que o PageSpeed Insights, e o Think With Google, que avalia o site inteiro em dispositivos móveis.

O trabalho envolveu algumas alterações na própria estrutura do site. No final das contas, o site em si ficou bem melhor.

Resumo sobre o projeto:

  • Análise de desempenho: através das plataformas de teste de velocidade do Google (PageSpeed Insights, Lighthouse e Think With Google), fiz a análise de o que deveria ser melhorado;
  • Otimização: o trabalho envolveu diversas mudanças no site, como tipografia, scripts, minificação, lazy loading e retardamento de scripts, alteração da estrutura de algumas páginas e modernizações.

Saiba mais sobre Front-End

Entendeu o que faz um desenvolvedor front-end? Aproveite para tirar mais algumas dúvidas comuns:

HTML é linguagem de programação?

Não. HTML é uma linguagem de marcação, puramente estrutural.

Uma linguagem de programação como PHP trabalha com funções, lógica de programação, declarações condicionais, manipulação de dados e por aí vai.

O HTML é uma linguagem lida pelo navegador, que interpreta o código como uma página web (ou seja, um site). Uma linguagem de programação é lida e interpretada pelo servidor.

Os termos “programador HTML”, “programação HTML”, além de “programador front-end” e “programação front-end”, portanto, são incorretos!

Front-ender faz SEO?

Não necessariamente. SEO não é bem um foco no desenvolvimento front-end, até porque a otimização para buscadores é muito abrangente e envolve mais de uma área de conhecimento.

Porém, conhecer técnicas de SEO onpage é o mínimo para um desenvolvedor da área que queira ser reconhecido como profissional.

Isso porque boa parte do SEO onpage, que é o SEO técnico, é feito no front-end de um site. Exemplos diretos e indiretos:

  • Título e cabeçalhos (headings);
  • Tags meta (description e open graph);
  • Imagens (tag alt e compressão);
  • Atributos de links (rel);
  • Minificação do código;
  • Etc.

Desenvolvedor front-end trabalha com WordPress?

Depende do profissional: questão de preferência ou foco. Isso porque nem todo profissional front-end trabalha com as mesmas ferramentas e plataformas.

Mas o front-ender que usa WordPress pode trabalhar com a customização de temas prontos ou criar e desenvolver temas personalizados. Ou os dois, como é meu caso.

Como o WordPress é uma plataforma completa, ela acaba dispensando o conhecimento back-end, de certa forma. Assim, mesmo que o foco do profissional seja com front-end, ele pode trabalhar com WordPress (de maneira profissional) sem muita dificuldade.

Quando e como contratar um desenvolvedor front-end?

Você vai precisar de um desenvolvedor front-end em casos assim:

  • Para desenvolver um site a partir de um layout (em PSD, XD ou AI, por exemplo);
  • Para consultoria, melhorias e ajustes de SEO técnico;
  • Se seu site está muito lento e com pontuação baixa no Google;
  • Para criar alguns tipos de ferramentas interativas;
  • Para instalar, configurar e personalizar um tema WordPress.

Como você pode perceber, eu trabalho na área. Precisando, é só chamar!

Revisão

Será que você ainda tem alguma dúvida? Revise todas as informações abaixo:

O que é front-end?

Front-end é o código que basicamente faz a parte visual de um site: HTML, CSS e JavaScript. A grosso modo, é o que o visitante vê em um site.

O que faz um desenvolvedor front end?

O desenvolvedor frontend trabalha com desenvolvimento HTML, CSS e JavaScript na criação de sites, podendo ter diferenciais e especializações no mercado de trabalho com SEO técnico, UX, ferramentas interativas etc. Um front-ender também pode complementar seus projetos com frameworks e CMSs como o WordPress.

O que é desenvolvedor full stack?

Um desenvolvedor fullstack trabalha tanto com front end quanto com back end (linguagem de programação).

O que é web master?

Webmaster é um termo obsoleto utilizado para quem trabalha com criação de sites como web designer e desenvolvedor (frontend e backend), tudo ao mesmo tempo.

Não é permitida a reprodução integral desse conteúdo. A cópia pode ser ruim para você!

Quem é Fabio Lobo?

Web designer, desenvolvedor front-end e programador WordPress.

Quem é Fabio Lobo?

Estou há mais de uma década na área. O foco do meu trabalho é em usabilidade, facilidade pro usuário, acessibilidade, SEO e performance.

Também tenho alguns projetos open source, além de prestar consultoria em hospedagem WordPress e criação de conteúdo.

Como posso te ajudar hoje?

Trabalho com consultoria, suporte, manutenção, criação e desenvolvimento.

Fale comigo

Leia também...

...alguns textos que têm a ver com o assunto:

Acelerar WordPress: dicas para carregamento rápido

Deixar o WordPress veloz requer uma otimização bem específica – e bem feita. Veja essas dicas para acelerar o WordPress e reduzir seu tempo de carregamento!

Search Console: como instalar, usar e melhorar seu site

Quer melhorar o SEO do seu site e deixá-lo livre de erros? Saiba como instalar e usar o Google Search Console, ferramenta gratuita com relatórios para otimização.

Como melhorar o SEO de seu site visando subir nas buscas

Quer saber como otimizar ainda mais seu site? Saiba como é feito um trabalho de SEO e siga os passos para ter um site melhor indexado.

Comentários

2 comentários até o momento

  • Fábio, você faz análise de relatório do SemRush e correções ?? Tenho um site que está mau das pernas com SEO … rs

    Te mandei um email !

    Responder
    • Faço sim, Leonor! Já respondi seu email :D

      Responder

Deixe seu comentário

Se você deseja um orçamento, entre em contato clicando aqui.

Quero um orçamento