Curso Web Design | O que é Front-End Developer?

Link to Blog do Curso Web Design - Microcamp SP

Posted: 31 Jul 2014 04:45 AM PDT

Desde que a internet começou a dar os seus primeiros passos e os primeiros sites foram desenvolvidos, uma das grandes preocupações dos web designers e web developers em geral era (e ainda é, diga-se de passagem) criar páginas que possuíssem recursos para auxiliar o usuário em sua experiência. É claro que no começo não haviam sido desenvolvidas muitas técnicas para tal, até porque isso ainda não era uma grande preocupação na época. A maioria dos usuários estava mais preocupada apenas na descoberta da internet e seus recursos do que avaliar as facilidades disponíveis.

Nessa época, poderíamos dizer que um site era essencialmente criado por dois tipos de profissionais: os Web Designers e os Web Masters. O Web Designer, como o nome sugere, era o responsável pela criação da estrutura e da parte gráfica das páginas, ou seja, era o responsável pelo código HTML, a estilização em CSS e as imagens que compunham o visual . Já o WebMaster era o responsável pela programação, ou o funcionamento da página propriamente dita, empregando scripts em Javascript, PHP e outros.

É claro que a coisa toda não podia parar por aí. A tecnologia – e por consequência a internet – é dinâmica e novos formatos, novas ideias e novas funcionalidades foram criadas, testadas e incorporadas à web. Antigamente, o que eram apenas páginas com banners animados e letras piscando, hoje são páginas que possibilitam fazer movimentações comerciais e bancárias, consultar mapas, compartilhar vídeos e fotos, interagir com grupos de amigos e muito mais. A lista é grande e eu poderia discorrer sobre o assunto longamente – além de incluir aí também as novas formas de acesso à rede, como os dispositivos móveis (tablets, smartphones, smart tvs e tudo mais que esteja sendo criado enquanto você lê este texto).

Com toda essa transformação, é bastante simples chegar à conclusão de que o perfil do profissional também iria mudar, e isso não foi diferente. As responsabilidades e as funções de um profissional web aumentaram, e muito! Com um leque tão grande de tecnologias e funções, fica até difícil criar um rótulo para abrigar tantas e tão diferentes habilidades para um profissional.

O que nos leva ao Front-End Developer.

Afinal, o que é um Front-End Developer?

O conceito sobre Front-End Developer ainda é fonte de alguma discussão na rede mundial de computadores. Muitas pessoas que trabalham com desenvolvimento de páginas web acham que o Front-End é o profissional equivalente a Web Designer, ou seja, o profissional responsável pelo "visual" da página. Mas a palavra "developer" (desenvolvedor, em bom português) entrega: apenas criar o design da página não faz da pessoa um profissional Front-End (entenda-se aqui “design” como o visual da página). Espera-se que ele domine as linguagens de programação que rodam do lado cliente (client-side) e algumas regras que garantam que essa página seja visualizada da forma correta e, por extensão, melhorem a experiência do usuário. Podemos citar algumas delas como exemplo: fazer com que a página se ajuste ao dispositivo que o usuário utiliza para visualiza=la corretamente na tela; corrigir eventuais bugs entre diferentes navegadores; fazer com que um conteúdo alternativo seja visualizado pelo usuário da página caso alguma tecnologia não funcione; e criar alternativas para pessoas com deficiências, entre tantas outras que poderia citar aqui.

A área de Front-End Developer é multidisciplinar, por isso é conveniente que um profissional deva ser capacitado não somente em criação de imagens, bom uso de tipografia, diagramação bem feita ou correta aplicação da teoria das cores, mas também na usabilidade, arquitetura de informação e é claro, um pouco de programação.

Mas isso tudo também faz parte das funções de um designer? É claro que sim! O design da página será invariavelmente afetado ou criará uma experiência ruim caso algumas das situações citadas acima ocorram. Por exemplo, se um plugin não carrega, mas você reservou uma janela para ele ser visualizado na página, o que irá aparecer no lugar? Se um usuário acessa a página a partir de um smartphone e o layout não é responsivo (ou seja, não se adapta ao dispositivo), o que irá acontecer com o tamanho das fontes, dos botões, do texto, etc.? E se você cria algo no visual do seu site, mas ele aparece de forma diferente em diferentes navegadores? Pois bem, se algum desses erros ocorrerem, a responsabilidade é do designer. E você deve estar se perguntando: "Mas isso tudo não é feito com código?". Pois é, chegamos ao ponto central da questão. Ser um Front-End developer não significa saber desenhar um site no Photoshop ou no Fireworks, ou "apenas" criar páginas com HTML e CSS puramente. Ser um Front-End developer é saber criar designs para suas páginas e saber programá-las para que esses mesmos designs sobrevivam às mais diversas situações e, de quebra, possam auxiliar o usuário na experiência de navegação.

"Programar" em HTML e CSS?

É importante frisar que nem HTML nem CSS são linguagens de programação. Muita gente acha que "programa" algo nessas duas linguagens simplesmente porque elas são compostas de códigos. Mas, linguagens de programação, como o próprio nome explica, são um conjunto de comandos (linguagem) que, seguindo regras pré-determinadas, passam instruções lógicas para computadores realizarem tarefas (e aí entra a programação!). HTML e CSS são, em essência, responsáveis pelo visual da página. Por isso o Front-End ainda é (corretamente) ligado ao design.

O fato é que hoje o Web Design mudou. Você não desenha mais um site puramente com imagens e as fatia no Fireworks apenas. Você cria <Divs> e as estiliza, e embora isso possa parecer terrivelmente estranho, isso é web design! Escrever códigos que possam melhorar seu site levando em consideração a experiência do usuário é o cerne da existência de um Front-End Developer.

O que eu preciso saber para ser um Front-End Developer?

HTML, a estrutura

Como sabemos, não existe página web sem HTML. Ela é a linguagem base de todos os sites que existem e não haveria processamento de texto na internet sem o uso dela (sem falar em áudio, vídeo, etc. já que são conectados por hiperligações). Você não estaria lendo o texto desta página se ela não existisse, por exemplo. Neste momento, você está visualizando o resultado de um código HTML e na maioria das vezes nem se dá conta.

Importante lembrar que a linguagem HTML está em constante desenvolvimento para se tornar mais semântica e cheia de significado. Dominar o HTML, em especial o HTML5 e seus novos elementos é parte fundamental do aprendizado de um Front-End Developer!

CSS, o estilo

Criar uma estrutura é uma coisa. Revesti-la de cores, transições e efeitos é tarefa do CSS. Em uma analogia básica, podemos dizer que o HTML é estrutura de uma construção, com suas paredes formadas por blocos, já o CSS é a tinta que pintaria essa parede, suas texturas e molduras de gesso. As folhas de estilo em cascata (Cascading Style Sheets) são capazes de produzir formatações em fontes, criar formas de alinhamento, transformações, transições e até pequenas animações sem o uso do Flash. São essenciais para dar vazão a sua capacidade criativa no design de páginas, em especial com os recursos de sua última versão, o CSS3.

Técnicas SEO

Você já deve ter ouvido falar em SEO – Search Engine Optimization, ou Otimização para Sistema de Buscas, certo? É a maneira de preparar o conteúdo de uma página ou de um site inteiro para que seja encontrado durante uma pesquisa e para um melhor posicionamento nos rankings das ferramentas de procura. Já abordamos o assunto aqui – você pode clicar neste link para ler o post completo sobre SEO. As técnicas vão desde criar títulos de páginas descritivos, passando por descrições de imagens em tags ALT, descrições nos links , Meta tags e informações do conteúdo nas tags <title>.

Design Responsivo e Mobile First

Como mencionei anteriormente, hoje é quase inimaginável pensar em um site que não tenha uma versão ou funcionamento adaptado para diversos tamanhos de monitores de computador ou dispositivos móveis. Este é um assunto recorrente aqui, já discorremos sobre o tema no post inaugural do blog e em outras oportunidades, como no post sobre Media Queries, por exemplo. É claro que Design Responsivo engloba muito mais do que apenas o conhecimento de Media Queries. É preciso pensar que um Smartphone ou Tablet precisem de um layout próprio para que as páginas web sejam visualizadas de forma correta neles. Muita gente defende até que os layouts para dispositivos portáteis devem ser criados primeiramente (Mobile First!) antes mesmo do layout do site para desktop. E você, já tinha pensado nisto? Sabia que essa forma de desenhar páginas envolve técnicas de HTML e CSS combinadas? Pois é, nunca é tarde para começar a pesquisar sobre o assunto!

Técnicas Cross-Browser

O termo Cross-browser refere-se à habilidade de um site, página web ou script side-client de ter suporte a múltiplos navegadores. É uma forma de utilizar tecnologias compatíveis com qualquer navegador de internet para que exiba conteúdos de acordo com as especificações do W3C. O termo foi criado nos anos 90 por causa da incompatibilidade entre navegadores durante o período que ficou conhecido como a "Guerra dos Browsers" e significa que o site possui a capacidade de ser visualizado da mesma maneira por qualquer navegador web. Embora atualmente esses problemas sejam cada vez menores, ainda é importante conhecer certas técnicas para reduzir os problemas causados pelo uso de versões antigas dos navegadores pré-padrões W3C.

Conclusão

Claro que ainda há muito mais coisas que poderia mencionar aqui, mas acredito que a essa altura você já tenha compreendido bem o significado sobre o que é ser um Front-End Developer (inclusive se você já pode se auto rotular como um) e o tipo de conhecimento que deve ter para trabalhar nessa área. Espero ter lançado uma boa luz sobre o assunto – é claro que, como disse no início, ainda há muita discussão e especulação sobre o que é ser um profissional Front-End, mas acredito que o conteúdo desse post vai ajuda-lo a ter um bom ponto de partida sobre o assunto. Prometo que em breve escreverei sobre a contrapartida do profissional de designer na programação: o Back-End Developer.

Grande abraço e até o próximo post!

Páginas

quinta-feira, 31 de julho de 2014