Categories: Tecnologia

Front-end. O que é?

Front-end. Você sabe o que é? O que ele faz?

Alguns anos atrás, o termo que mais se ouvia quanto ao profissional que trabalha com o desenvolvimento de sites era WebDesigner.

E a função de WebDesigner era meio mística, parecia ser um profissional que sabia de tudo um pouco, códigos, Photoshop, Dreamweaver(alguém realmente usa?) e assim vai.

Atualmente, o desenvolvimento de um site passa pelos seguintes profissionais:

Hoje, meu foco é explicar melhor sobre o Front-end, mas pra você não ficar perdido no texto, vou explicar rapidamente quem é quem nessa história.


UX (User Experience)

Esse profissional é responsável por pensar na experiência do usuário. O fluxo do site é pensado por ele.


UI (User Interface)

Esse é o famoso Designer. Ele é quem dá vida a cara do site, colocando cor, escolhendo fontes, tamanhos e tudo mais. Obviamente ele deve seguir o que já foi desenhado pelo UX.


Front-end

Nesta parte do processo entra o cara que eu quero falar, o Front-end. Ele é responsável a fazer, efetivamente, o site funcionar, transformando o layout desenhado pelo UI em códigos.

Algumas vezes, principalmente sites feitos por sobrinhos, não existem as duas etapas anteriores. O site já começa a ser desenvolvido no código, sem antes se pensar na paleta de cores, ou se de acordo com o público-alvo é a melhor a logo centralizada ou à esquerda. O processo ideal é os 3 trabalharem juntos, tornando o site algo fácil de navegar, bonito e acessível ao maior número de dispositivos possíveis.

Esse profissional é o meio termo entre o Design e a programação. O mínimo do mínimo é que ele abra o layout feito no Photoshop em um manipulador de imagens e replique o visual e os efeitos com HTML, CSS e JavaScript/jQuery.

HTML (Hypertext Markup Language) é a linguagem base da Internet. Todo e qualquer site que você já tenha acessado na vida tem algo de HTML, inclusive esse blog aqui. No HTML criamos a estrutura da página, por exemplo, onde vai ficar a imagem, onde vai ficar o link, qual texto vem primeiro, entre outros. Com o HTML5, lançado em 2009/2010 (mas que alguns sobrinhos cismam em não utilizar), também ganhou uma importância semântica, ajudando o Google os buscadores a varrerem melhor o conteúdo dos sites.

CSS (Cascading Style Sheet) é a linguagem que dá o estilo a página. Nela você troca a cor da fonte, a cor de fundo, tamanho das imagens, e mais um monte de coisas. Com o CSS3, também é possível adicionar alguns efeitos de animação, como rotações, alterações de formas, o que faz com que os criativos criem sites bem legais apenas com essas duas linguagens (HTML5 + CSS3).

JavaScript (Não é um Script do Java, ou coisa do tipo) é uma linguagem de programação interpretada. Animações mais complicadas, menus bem diferentes, interações com usuário e outros. Para alguns grandes caras do mundo web, como o Diego Eis (criador do Tableless, que eu indico como leitura diária), não é tão importante para um Front-end saber uma linguagem de Programação como JavaScript. Na minha opinião, até para evolução como profissional, é bom saber algumas coisas.


Back-end

Apesar do Front-end trabalhar com linguagens de programação, o Back-end é o programador heavy da história. Nem todo site é necessário um back-end, mas para sites dinâmicos como lojas virtuais, portais de notícias e outros, o trabalho dele é importantíssimo.

Espero que com esse texto você tenha entendido melhor quem é o Front-end, o que faz e como é o Processo Ideal para o desenvolvimento de sites!

Até a próxima.

André Felizardo

View Comments

Share
Published by
André Felizardo

Recent Posts

Blockchain & Cripto

Desvendando o Potencial da Blockchain e Criptomoedas através da Criptografia Em um mundo onde a…

7 meses ago

Automatize o deploy de uma aplicação React com Github Actions e FTP

O deploy de uma aplicação React é uma etapa crucial para disponibilizar sua criação na…

1 ano ago

Github Satellite 2020 – Muitas novidades

Satellite 2020 foi a primeira conferência virtual do Github. O Github já tinha sido liberado…

5 anos ago

Web Components – Guia Geral

Neste guia veremos o que são web components, quando usar, sua estrutura e também um…

5 anos ago

Tipos de Frontend

A alguns anos atrás escrevi um texto sobre o que é o frontend, também palestrei…

5 anos ago

SVG – Guia definitivo

O que é SVG é a sigla para Scalable Vector Graphics que traduzindo seria gráficos…

5 anos ago