Front-End: o que é, para que serve e como aprender?

Neste artigo você entenderá em detalhes o que é Front-End e qual é a sua finalidade. Desde os primórdios da internet, um dos maiores desafios sem dúvida para os profissionais de web, foi e ainda é criar sites que enriqueçam a experiência do usuário.

Sem tempo para ler? Clique no play abaixo para ouvir o conteúdo!

O fato é que, no início da web, e principalmente no Brasil, não tínhamos tantos recursos para internet como temos hoje, e os usuários estavam mais preocupados em descobrir um mundo novo, do que exatamente avaliar como ele foi apresentado.
Na realidade alguns recursos que hoje são comuns e viraram até mesmo verbos, antes eram impensados. Pense em termos como “Postei no Face”, “Twittei isso ontem” o que isso significaria a apenas 15 anos atrás?

Antigamente, os responsáveis por criar as páginas web, eram os Web Designers e os Web Masters. Um era o responsável pela criação do Layout, HTML, formatação das tabelas que formavam o visual e o outro pela programação, na época utilizava-se CGI, VBScript, JScript etc.

A nossa realidade hoje melhorou muito se compararmos com alguns anos atrás, já que a Internet está em constante progresso.

Novas tecnologias e novos conhecimentos aliado à criatividade nata do ser humano, possibilitaram o surgimento de recursos maravilhosos, pense desde Comércio Eletrônico, Internet Banking, Redes Sociais, Redes de Compras Coletivas, Mapas, StreetView, Vídeos, fotos. A Internet está em constante progresso.

Com o advento das novas tecnologias, surgiram também novos dispositivos os chamados Mobile Device ou Dispositivos móveis. Tablets, smartphone, ultrabooks com inúmeros formatos e resoluções. A tarefa do profissional de web seja ele Designer ou Desenvolvedor cresceu exponencialmente, hoje temos além dos tradicionais:

• Web Designer
• Web Master

Novas profissões, e falaremos em especial do Front-End Developer.

O que é Front-End?

Existem muitos conceitos sobre o que é um desenvolvedor Front-End, alguns dizem que é o mesmo que um Web Designer, outros especificam que por ter a palavra desenvolvedor no nome, ele é um Web Designer que domina linguagens de programação do lado cliente, por exemplo JavaScript. 

Quando as vezes os Web Designers conhecem apenas o básico do JavaScript e a implementação de plug-ins. Nosso objetivo não é levantar polêmicas, portanto, uma boa definição sobre Front-End Developer, é mencionada numa excelente matéria criada há uns 3 anos atrás pelo The Guardian uma referência Britânica, que diz:

“Para muitas pessoas, o desenvolvimento do lado cliente pode ser percebido como “fazer as coisas bem”, ao mesmo tempo que é um comentário válido, uma vez que esses profissionais fazem as coisas parecem boas, com uma boa aparência, fazem venderem  melhor, há muitas outras tecnologias que se enquadram nesta campo que podem ser geralmente ignorados”.

Para que serve o Front-End?

Embora o Front-End Developer precisa cuidar da aparência do site, espera-se que ele domine uma série de tecnologias que podem passar despercebidas. São elas:

• Marcação HTML

Um Front-End Developer precisa dominar a parte sintática e semântica do HTML em especial do HTML5, com os novos elementos, Header, Nav, Section, Article, Aside, Footer, Microdados.

A maioria das pessoas acham um site pelos buscadores (leia-se google.com.br), logo um dos nossos principais objetivos é possuir um site limpo, organizado e que tenha uma boa aceitação aos motores de buscas, a prática de melhorar seu site para os motores de busca é chamada de Search Engine Optimization (SEO). 

Um Front-End developer tem entre suas atribuições criar boas práticas de SEO, além de deixar um layout leve e inovador.
Alguns sites na web mostram quais recursos do HTML5 nós podemos utilizar nas versões atuais dos principais navegadores, veja por exemplo www.html5readiness.com , www.caniuse.com

• Estilização CSS(CSS3)

Dar significado ao conteúdo é uma coisa, apresenta-lo como mencionamos de forma leve, inovadora é outra. As folhas de estilo em cascata (Cascading Style Sheets) permitem que um conteúdo seja formatado da forma como você deseja, e é um grande aliado a sua criatividade, uma vez que é possível criar coisas inimagináveis apenas com CSS e em especial CSS3.

Formatação de fontes, recursos de textos como colunas, novas formas de alinhamento, efeito nos blocos, animações, transformações, transições e muito mais. Um Front-End Developer é sem dúvida um profissional que domina essa linguagem de estilização.

• Cross-Browser e Cross Device

Qual é uma das maiores virtudes do HTML5 e CSS3? A possibilidade de criar inúmeros recursos antes impensados realizar apenas com HTML, por exemplo acessar o hardware do dispositivo, criar animações sem o uso de Flash.

Só um adendo: O HTML5 não é um substituto do Flash! É muito mais que isso, duas ou três das áreas do HTML5(Leia-se: Canvas, WebGL, CSS3 3D, Transform, Animation) podem realizar o que o Flash realiza, com a vantagem de ser nativo no navegador e rodar em qualquer dispositivo. Mas isso também é um assunto para outro artigo, se você nunca ouviu falar de WebGL, Canvas, veja alguns exemplos, simples: https://goo.gl/Jb905  use as setas do teclado, https://goo.gl/HKdC3 use o mouse.

Cross-Browser significa rodar em qualquer navegador e em qualquer versão de navegador, esse é um dos maiores pesadelos que tínhamos no passado. Tínhamos?

Ou ainda temos, é verdade que já foi pior, ter que fazer um site que rodasse no Chrome, Firefox, e inúmeras versões do Internet Explorer é ainda a tarefa de muitos que estão lendo este artigo, acredite somos solidários com seu sofrimento.

No entanto hoje existem alguns recursos que permitem que você aplique uma tecnologia ao site, e caso o navegador não suporte tal tecnologia automaticamente fazemos um contorno, ou um fallback. Na Inglaterra existe uma argamassa ou massa corrida chamada Polycell de uma marca chamada Polyfilla.

A ideia da massa corrida é deixar uma parede lisinha sem buracos ou irregularidades, essa é a ideia de um termo chamado PolyFill ou uma massa corrida para que os navegadores não se comportem de maneira estranha com alguns recursos que não suportam. Por exemplo o Modernizr.

Também está sendo criado uma nova iniciativa para padronizar a Web e torna-la mais organizada, evitando que navegadores tenham comportamentos tão distinto quando da interpretação dos elementos de um site. É a Web platform www.webplatform.org https://goo.gl/M0972

Layout Responsivo é a ordem do dia, Cross-Device significa que o seu app ou site, pode rodas bem em qualquer dispositivo, o CSS3 e até versões anteriores tinham recursos que permitiam resolver a resolução do usuários.

São utilizado as “media queries”, mas ser responsivo envolve mais, por exemplo, se um usuário está acessando o seu site de um dispositivo móvel, como um smartphone, talvez ele esteja na rua, ou num local longe de seu notebook ou desktop, então além de alinhar o site para a resolução ideal, será que todas as informações que temos num site comum serão necessárias para alguém que está usando um dispositivo de tela menor?

Ser responsivo envolve pensar como o usuário que acessa de um dispositivo móvel. Lembre-se nosso principal objetivo é enriquecer a experiência do usuário, e não torna-la um pesadelo.

Outros termos são importantes para o Front-End Developer, tais como performance, Usabilidade, acessibilidade ( já tentou fazer uma experiência de acessibilidade no seu computador? Tente desconectar o mouse, e utilizar um site, em especial se ele tiver aqueles light-box que congelam a tela e aparecem numa área fora do site comum.

Como aprender Front-End?

A qualificação mais importante para se tornar um desenvolvedor frontend é a proficiência em HTML, CSS e JavaScript entre as principais habilidades. Sem saber codificação, nada mais no seu currículo importa.

É possível aprender por conta própria, mas isso não significa que a educação formal não importa. Muitas empresas preferem ou até mesmo exigem que o desenvolbvedor tenha um diploma.

E o que a Impacta está fazendo para ajuda-lo a se tornar um Front-End Developer? Temos um Bootcamp para a formação do Desenvolvedor Front-End, fique atento e se desejar poderá nos enviar dúvidas sobre o assunto. 

Curtiu o post? Deixe seu comentário nos contando se o conteúdo foi relevante para você ou caso tenha ficado alguma dúvida!