Close

Índice

O que é Front-End Development

Front-End Development é uma das etapas que compõe o desenvolvimento de qualquer website, seja uma simples landing page, um grande portal ou um Web App.

Como o próprio nome diz, Front-End Development se refere a tudo o que o usuário visualiza e interage nos web sites. Baseado nisso, o FED acaba sendo dividido em três camadas, cada uma com suas características próprias e importância para o resultado final do website:

  • ConteúdoHTML
  • ApresentaçãoCSS
  • Comportamento – ECMAScript (chamaremos de “JavaScript” por ser a nomenclatura familiar)

Para que o profissional esteja apto a atuar nestas três camadas do Front-End Development, deve-se ter conhecimentos em diversas áreas:

  • Web Semântica
  • User Experience
  • User Interface Design
  • User Interface Development
  • Acessibilidade
  • DOM Scripting *
  • Desenvolvimento para aplicações Mobile
  • Findability *

Voltar ao índice

Navegadores

Parte fundamental no trabalho do Front-End Developer é conhecer as possibilidades e limitações de cada navegador, incluindo dispositivos móveis.

Para efeitos de validação e teste, a maneira mais eficaz é dividir os navegadores em níveis, diferenciando-os pelos recursos que cada um suporta:

  • A-Grade – Navegadores que tiram melhor proveito dos padrões web modernos (HTML5) e oferecem maior fidelidade visual
  • C-Grade – É a base do suporte, composta por navegadores que oferecem nada mais que HTML semântico, ou seja, o conteúdo e a experiência são altamente acessíveis, mas funcionalidades avançadas e recursos visuais são limitados
  • X-Grade – Engloba navegadores desconhecidos ou pouco utilizados, assim seus recursos são desconsiderados. Parte-se do princípio de que são modernos, mas não são levados em conta no QA.

Nossa lista de navegadores e sua distribuição nos níveis é baseada nos padrões do Yahoo! User Interface Library:

A-Grade X-Grade
Chrome (Desktop e Android)* X
Firefox * X
Safari (macOS e iOS) * X
Internet Explorer 9 X
Internet Explorer 10 X
Microsoft Edge X

Para testes em navegadores Windows (dentro da plataforma Mac) utilizamos o aplicativo VirtualBox ou Parallels Desktop como máquina virtual.

A própria Microsoft disponibiliza a máquina virtual via download com a versão desejada do Internet Explorer, através do Modern.ie.

Voltar ao índice

HTML

HTMLHyperText Markup Language – é uma linguagem que descreve o conteúdo dos documentos web. Usa-se uma sintaxe contendo tags (os chamados “elementos”) que envolvem textos, estruturando o documento e dizendo aos user agents (navegadores) como ele deve ser interpretado.

Para que os desenvolvedores mantenham um alto padrão de qualidade de seus sites, foram criados os Web Standards (Padrões Web), que definem a maneira correta de produzir os sites de forma a garantir a melhor experiência possível ao usuário e visibilidade independente do dispositivo utilizado para acesso.

Benefícios dos web standards
  • Código eficiente
  • Fácil manutenção
  • Acessibilidade
  • Compatibilidade entre dispositivos
  • Viabiliza uso de web crawlers e search engines
Boas práticas

Para o desenvolvimento correto do HTML devemos estar atentos principalmente à semântica do código, ou seja, utilização correta das tags em seus devidos lugares, por exemplo:

  • Tags h1 – h6 para descrever os cabeçalhos do documento;
  • Utilizar tag nav para a navegação principal da página;
  • Ao utilizar a tag table para tabela, os leitores de tela instruem o usuário com deficiência visual a navegar por ela através das linhas e colunas;
  • Usando para os rótulos dos campos de formulário permite que, ao clicado, seja ativado o foco no campo correspondente.

Menos código significa menor tempo de carregamento (fato extremamente importante para usuários mobile), melhor performance nos sistemas de busca e redução de custos com hospedagem, devido a menor transmissão de dados.

Além do código simples e enxuto, deve-se evitar “misturar” as diferentes camadas de desenvolvimento, adicionando estilos inline ou scripts no meio da página. Estilos devem ser mantidos em arquivos CSS separados, bem como o comportamentos do site em JavaScripts externos.

Assim, código bem escrito é aquele que segue os princípios do POSH, ou seja, “Plain Old Semantic HTML“, mantendo-o mais simples possível. Tal prática agiliza a manutenção, consequência do fácil entendimento do código e permite futuros ajustes estruturais do site com facilidade (a chamada escalabilidade).

Ou seja, utilizando as tags para o princípio pela qual foram criadas, criamos um documento corretamente estruturado e de fácil compreensão. Esse principio é a base para a correta interpretação do conteúdo por usuários e máquinas (sistemas de busca e leitores de tela, por exemplo).

HTML5

O padrão HTML5 está bem fundamentado e atualmente todos os navegadores mais utilizados (aqueles que chamamos de A-Grade) tem suporte a grande parte das definições.

Tecnologias como Canvas, Web Storage e Geolocation já estão bem sedimentadas e usadas em todos os principais navegadores. Porém sempre devemos ficar atentos a novos recursos como CSS Grids, Service Workers, Web App Manifest, etc., pois devem dispor de uma alternativa para os usuários que não tiverem tais funcionalidades em seu navegador.

Para contornar problemas de novas tags HTML5 em navegadores C-Grade (IE6) ou até mesmo X-Grade (IE9) usamos o Modernizr, criando as novas tags por JavaScript para que sejam interpretadas pelos browsers, mesmo que eles não “saibam” o que elas significam.

Além de criar as novas tags, o Modernizr oferece um ótimo método para testar quais recursos HTML5 são suportados pelo navegador do usuário, assim podemos oferecer alternativas para funcionalidades que exijam tais recursos (ex: preferências do usuário que são salvas via localStorage, em navegadores antigos utilizam-se cookies).

Voltar ao índice

CSS

CSS (Cascading Style Sheets) é uma linguagem utilizada para dar instruções ao navegador de como ele deve estilizar, espaçar e posicionar certos elementos na tela. Desta maneira, o documento que antes só era texto (HTML) passa a seguir o layout graças ao CSS.

Assim como no caso do HTML, seguimos algumas diretrizes para escrever o CSS com padrão de qualidade:

  • Sem redundâncias: Nada de definições duplicadas, já que uma regra pode ser definida para diversos casos em uma só vez;
  • “Componentização” ou desenvolvimento baseado em componentes: Redução ao máximo da especificidade dos elementos ou seja, quanto mais abrangente a regra, mais fácil é a reutilização do mesmo elemento em diversos contextos. Para isso, o uso da metodologia BEM para nomenclaturas, facilita e ajuda na clareza dos elementos.
  • Redução de código: Uma regra por linha, deixando o documento mais enxuto e fácil de entender;
  • Código bem comentado e segmentado: Damos preferência para que, no início do CSS fiquem as definições gerais, seguidas pelas classes e elementos usados no site todo, depois as definições de estrutura geral (topo, colunas e rodapé). Caso hajam páginas internas, as definições específicas ficam por último, separando as páginas em blocos de código.
Organização dos arquivos

Como temos como princípio básico Progressive Enhancement, costumamos dividir os arquivos de acordo com seu contexto em todo o projeto. Usando algum framework ou não, é importante pensarmos na organização não só do código, mas na separação dos arquivos.

Exemplo de organização:

  • _general.scss: arquivo com definições gerais do projeto, aplicáveis a qualquer contexto e template;
  • components/_header.scss: definições para o cabeçalho do site e suas variações durante todo o projeto;
  • components/_footer.scss: assim como  o cabeçalho, o rodapé também pode ficar separado e ter suas definições criadas em um arquivo separado.

Dependendo do seu workflow, seja usando Gulp, Grunt ou CodeKit para compilar os arquivos SASS, recomendamos compilar todos os arquivos em um arquivo único (app.css por exemplo), a fim de diminuir as requisições do servidor, item importantíssimo para melhorar a performance dos projetos.

Padrão de ordem das propriedades

Para facilitar o entendimento do código é importante padronizarmos o máximo possível. Uma das formas que encontramos para viabilizar isso foi definir uma ordem para escrita das propriedades no CSS que, além de ser em apenas uma linha, há critérios para a organização das definições:

seletor { position:; top:; left:; float:; clear:; display:; width:; height:; margin:; padding:; transform:; border:; background:; font:; text:; color:; }

Assim fica mais simples de entender o critério usado para esta ordenação:

  1. Posicionamento:

    position
    top
    left

  2. Float

    float
    clear

  3. Comportamento

    display

  4. Medidas e espaçamentos

    width
    height
    margin
    padding

  5. Transform: este é um caso especial pois pode modificar tanto posicionamento como medidas e espaçamentos, porém sem alterar o flow da página

    transform

  6. Formatação do bloco

    border
    background
    box-shadow

  7. Formatação do conteúdo

    font
    text
    color

As demais propriedades não listadas acima, que nem sempre são usadas, devem ser inseridas de acordo com seu contexto ou ao final da linha (exemplo de z-index, transition, etc.).

Referência: WebPlatform.org: CSS

Responsive Web Design

Ao desenvolver um site devemos nos preocupar com todos os usuários, estejam eles usando navegadores muito antigos ou um dispositivo móvel moderno.

Web future

Porém, para que consigamos dar uma experiência agradável, aplicamos o conceito do Responsive Web Design, ou seja, layouts que se adaptam de acordo com características inerentes ao dispositivo utilizado pelo usuário – a mais comum é a viewport (dimensão de tela).

A base para aplicar este conceito é a utilização de CSS Media Queries de acordo com as dimensões (width e height), resolução (em dpi ou dpcm), orientação (vertical ou horizontal), etc., trocando estilos de acordo com o contexto do site. A idéia não é fazer um site totalmente novo, mas adaptar a apresentação da navegação e conteúdo para que a experiência fique agradável a todos.

Além disso, Responsive Web Design tem tudo a ver com Mobile First e Progressive Enhancement, seguindo estas metodologias para iniciar o desenvolvimento pelas telas menores, com um estilo base a ser utilizado em todas as “versões” das páginas, seguindo pelas próximas camadas de layouts de acordo com as telas maiores. É importantíssimo salientar que os breakpoints, ou seja, os passos nos quais as telas serão adaptadas, não devem ser fixos, mas se adequarem visando a melhor experiência do usuário de acordo com o design de interface.

Dica de livro: Responsive Web DesignA Book Apart

Referências:

Voltar ao índice

JavaScript

JavaScript é a linguagem responsável pela camada de comportamento do site, aperfeiçoando a experiência do usuário nas páginas.

Benefícios do JavaScript
  • Interação e experiência do usuário
  • Comportamento dinâmico
  • Animações
  • Auxiliar na acessibilidade (ex: suporte ao uso do teclado na navegação)
  • Suporte a recursos que navegadores antigos não possuem nativamente
Boas práticas

O principal cuidado que o desenvolvedor deve ter ao escrever seu javascript é pensar nos usuários que estiverem com este recurso desabilitado (sabemos que a quantidade de usuários com este perfil é mínima, mas existe, seja por regras de segurança ou outros motivos específicos).

O conteúdo, principalmente, não deve depender do javascript para ser visualizado. Ou seja, menus e outros sistemas de navegação que utilizem alguma interação para serem visualizados, devem ser exibidos caso o usuário não esteja com o JS habilitado.

Além disso, a exemplo do HTML e CSS, temos alguns pontos importantes a serem lembrados:

  • Deixe seu código muito bem comentado, para que futuras alterações sejam possíveis sem maiores dificuldades;
  • Não escreva código redundante;
  • Evite javascript inline e “embeddado” no corpo do documento HTML (princípio de não “misturar” as camadas de desenvolvimento);
  • Ao utilizar recursos novos, primeiro utilize métodos de detecção (ex: Modernizr) e, caso o usuário não tenha determinado recurso, ofereça o conteúdo de maneira alternativa;
  • Teste a performance do script nos principais navegadores e otimize seu código caso necessário;
  • Evite ou otimize os efeitos e movimentações que dificultam a na navegação e visualização do conteúdo.
  • Declare as variáveis de acordo com seu escopo, evitando definições globais para reduzir riscos de conflitos com componentes.
Frameworks

Acreditamos que os Frameworks podem ser uma valiosa contribuição para a agilidade no desenvolvimento de qualquer site e aplicação para Web, porém deve-se refletir sobre por que de seu uso e se esta é realmente a melhor ferramenta para solucionar seus problemas.

Ainda muito utilizado, o jQuery facilita muito a escrita de funções básicas (até mesmo AJAX), pavimentando inclusive o caminho para novas funcionalidades do JavaScript introduzidas com o HTML5.

Porém a evolução do trabalho do Front-End Developer passa pelo desenvolvimento dos Single Page Applications, que possibilitam a maior interação entre o client-side (tudo o que acontece no navegador do usuário) com o servidor, trazendo uma experiência e performance impossíveis até então.

Alguns dos Frameworks mais utilizados:

O uso destes novos Frameworks, em sua maioria, se baseiam na escrita utilizando os padrões ES6 (ECMAScript 6 ou ES2015), ainda não suportados de forma nativa pelos navegadores. Por isso é necessário de outras ferramentas que “traduzam” este código para o padrão antigo (como por exemplo o Babel), muito úteis neste período de transição das tecnologias.

Referências:

Voltar ao índice

Progressive Enhancement

“An escalator can never break; it can only become stairs”

Mitch Hedberg, Comedian

O conceito do Progressive Enhancement baseia-se nos seguintes princípios:

  • Conteúdo básico deve ser acessível a todos os navegadores;
  • Funcionalidade básica para o funcionamento do site também deve ser acessível a todos;
  • Código enxuto e semântico, contendo todo a informação relevante ao usuário (não recorrer ao javascript para gerar o conteúdo);
  • Estilização visual baseada nas definições de um arquivo CSS externo;
  • Toda a camada de comportamento deve ser derivada de um JavaScript externo, sem utilizar códigos misturados ao HTML;
  • Preferências do navegador do usuário devem ser respeitadas.

Ou seja, todos os usuários devem ter acesso ao conteúdo, mas a experiência visual muda dependendo da capacidade de cada navegador.

Progressive Enhancement 2.0
Progressive Enhancement 2.0 Progressive Enhancement 2.0
Apresentação no Slideshare

As tabelas acima mostram bem a diferenciação dos navegadores pelo nível de suporte a recursos HTML, CSS e JavaScript. Tudo isso embasa nosso conceito de suporte aos navegadores, classificando-os em A-Grade, C-Grade e X-Grade.

Referências:

Mobile

O desenvolvimento de sites para dispositivos móveis torna-se cada vez mais importante, a partir do momento que mais usuários estão usando tais dispositivos para acessar os web sites.

É importante ressaltar que os usuários mobile devem ser tratados com ainda mais cuidado, já que o propósito da navegação nos sites quase sempre é acompanhado por um objetivo específico, por isso deve-se levar em conta:

  • Peso do site, pois os custos de navegação ainda são altos, além da economia de bateria dos aparelhos devido ao processamento necessário para carregar estilos e imagens;
  • Progressive Enhancement deve ser muito bem executado, pois temos diversos tipos de dispositivos, desde celulares antigos que não possuem suporte a javascript, até tablets e smartphones com recursos HTML5 sofisticados;
  • Tenha como princípio, em todos os seus projetos, o uso do Responsive Web Design para oferecer a experiência mais agradável possível ao usuário. Utilizando Progressive Enhancement não há como deixar de seguir este caminho!

Além das questões acima, a interface deve ser otimizada para as telas menores, já que o conteúdo precisa ser o mais direto possível, a fim de suprir as necessidades dos usuários de maneira prática e rápida.

Outro ponto importante é levar em conta que a navegação não é feita com mouse, então deve-se prever também o meio de interação dos usuários com o site, assim todo o conteúdo relevante deve ser visível de maneira objetiva.

Apps

Com o melhor suporte a recursos HTML5 por parte dos smartphones e tablets, é possível fazermos aplicações relativamente complexas que utilizem a plataforma web como base de desenvolvimento.FF

Podem ser utilizados frameworks como Ionic e React Native que entregam aplicativos de forma nativa, utilizando tecnologias Web para atingir experiências (quase sempre) tão boas se comparadas a algo desenvolvido utilizando as linguagens de programação nativas.

Conforme comentamos na seção de JavaScript, a ferramenta escolhida deve solucionar um problema e não ser uma regra para todas as ocasiões.

Além dos frameworks, as Progressive Web Applications estão rapidamente ganhando relevância por justamente serem uma junção natural das tecnologias disponíveis em HTML, CSS e JavaScript, a fim de utilizar o máximo possível de recursos nativos dos dispositivos, garantindo que as aplicações funcionem também em modo offline.

Referências:

Acessibilidade

Para oferecer acesso que sirva ao maior número de usuários possível, é necessário seguir as Recomendações de Acessibilidade para Conteúdo Web.

O objetivo dessas recomendações é viabilizar melhor acesso, evitando a impossibilidade e dificuldade de quem acessa esses documentos da web.

Ao analisar a acessibilidade de uma página, basicamente devemos tratar com algumas das diferentes formas de acesso possíveis como: pessoas com limitações físicas, os telefones celulares, palmtops, tablets, navegadores antigos (Internet Explorer), resoluções de tela, velocidade da conexão, etc.

Dessa forma, acessibilidade na web não é só para pessoas com deficiência visual, ou qualquer outro tipo de deficiência, mas para um número de pessoas cada vez maior.

Acessibilidade na prática

Algumas pequenas ações contribuem para a melhor acessibilidade de suas páginas. O importante é que todos saibam a importância e tornem a preocupação com a acessibilidade um costume em todos os seus projetos, sejam eles pequenos ou extensos.

Veja como é simples facilitar o acesso de suas páginas:

  • Incluir o atributo alt em todas as imagens, descrevendo-as de maneira correta;
  • Assim como o alt, o atributo title é essencial em links, dizendo ao usuário o que irá acontecer caso ele acesse o link;
  • Também deve-se utilizar apenas texto relevante como anchor text dos links melhorando, inclusive, a indexação destas páginas pelos sistemas de busca;
  • Utilizar âncoras para acesso direto ao conteúdo ou topo do site, no caso de páginas extensas;
  • Habilitar navegação por teclas, seja usando javascript ou o atributo accesskey;
  • Em formulários, utilizar a tag label ligada ao campo correspondente:
    <label for="nome">Nome:</label> <input type="text" name="nome">
  • Nas tabelas pode-se dizer se as células th se referem a uma coluna ou a uma linha: 
    <table>
      <thead>
        <tr>
          <th>scope="col">Name</th>
          <th scope="col">Age</th>
          <th scope="col">Birthday</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>scope="row">Jackie</th>
          <td>5</td>
          <td>April 5</td>
        </tr>
        <tr>
          <th scope="row">Beth</th>
          <td>8</td>
          <td>January 14</td>
        </tr>
      </tbody>
    </table>

Voltar ao índice

Performance

A performance é um dos assuntos indispensáveis para a execução de qualquer projeto web, garantindo que qualquer página seja usada com o mínimo de esforço possível.

Devemos pensar na performance dos sites de duas formas distintas, principalmente pelo fato de estarmos difundindo cada vez mais os meios de acesso as informações:

Peso

A primeira forma que geralmente aparece na cabeça de todos está relacionada ao peso do site e, atualmente, temos diversas técnicas que podem otimizar a transferência das informações:

  • Compressão dos arquivos em gzip, definido via server-side;
  • Definir uma data de expiração para os arquivos, criando cache para o usuário;
  • Se você não tiver permissão de configuração do servidor, pode-se definir os cache control headers diretamente no HTML (usar somente em último caso):
    <meta http-equiv="Cache-Control" content="max-age=604800">
  • Usando técnicas para cache dos arquivos, não se esqueça de definir versões para eles, assim o usuário recarregará quando algo for ajustado:   
    <link href="assets/css/app.css?v=1" rel="stylesheet">
  • No caso de imagens, podemos usar as Data URIs que, apesar de acrescentarem em peso no HTML, facilitam no processamento dos arquivos pelo servidor (verifique o suporte dos navegadores a este recurso, pois o IE tem alguns problemas com a técnica);
  • Se estiver usando imagens do jeito convencional, utilize uma ferramenta de compressão das imagens. Isso pode ser automatizado em seu workflow com o uso de plugins como gulp-imagemin ou grunt-contrib-imagemin
  • Caso esteja desenvolvendo uma aplicação em HTML5, pode-se usar Application Cache, definindo quais arquivos serão salvos na máquina do usuário através de um arquivo chamado Manifest;
  • A velha técnica dos CSS Sprites certamente ajuda no carregamento do site, pois faz menos requisições ao servidor;
  • Comprimir arquivos CSS e JS, mantendo uma versão para produção e outra para desenvolvimento. Os compressores basicamente retiram comentários, espaços em branco e quebras de linha mas, no caso do JS, ainda podem ser utilizadas técnicas extremamente aprimoradas para diminuir seu peso (neste último caso, tome cuidado com ‘;’ faltando em seu código, caso contrário a compressão pode dar problemas).

Referências:

  • Coopers Performance: snippet HTML e exemplo de .htaccess para otimizações de forma simples e rápida.
Processamento

A segunda forma na qual a performance deve ser levada em conta está relacionada ao processamento, ainda mais com uso de dispositivos móveis (capacidade de processamento limitada e consumo de bateria) e aplicações HTML5 utilizando animações complexas.

Veja algumas atitudes que podem melhorar o processo de renderização das páginas:

  • Definição de width e height de cada imagem diretamente no HTML;
  • Adequação do site ao meio utilizado para acesso, fazendo uma versão para dispositivos móveis caso possível, assim o usuário só precisará renderizar conteúdo relevante (textos e imagens);
  • Só use vídeos com a permissão do usuário, principalmente em sites móveis;
  • Animações com CSS3 utilizando translate3D ou translateZ, ativando aceleração via hardware para ganhar (e muito) em performance;
  • Evitar ao máximo alterações via JS ou CSS que façam reflow e reformatação das informações, caso contrário a renderização será muito prejudicada (veja este video da Mozilla que exemplifica bem o conceito do reflow);
  • Inserir JS no final do documento (antes de fechar o body) também melhora na renderização do conteúdo.

Adotando estas práticas e levando em conta a performance desde a parte de Design da Interface, seu site certamente estará facilitando o acesso dos usuários, independente do meio de acesso!

Referências:

Voltar ao índice

Processo de trabalho

Apesar do conhecimento técnico ser essencial para qualquer desenvolvedor, uma correta conceituação da metodologia de trabalho é muito importante, principalmente ao se trabalhar em equipe.

Acreditamos que é muito importante apresentar nossa forma de trabalho para desenvolvedores que procuram otimizar sua performance, bem como outros profissionais que necessitam conhecer mais sobre a área do Front-End Development.

Desta maneira dividimos nosso trabalho em etapas que, como qualquer outra boa prática indicada anteriormente, serve para projetos de qualquer escala:

  • Documentação e especificação do projeto
  • Análise de interface
  • Análise técnica
  • Controle de versão
  • Controle de projeto
Documentação e especificação do projeto

Baseado no target, ou seja, público-alvo e dispositivos, o Front-End Developer já deve estar envolvido nas especificações do projeto.

Tendo todas as especificações bem definidas (ambiente de hospedagem, público-alvo e dispositivos), a documentação do projeto deve conter as tecnologias e versões diferentes (celulares, smartphones, tablets, etc.) que servirão como base para a produção da Arquitetura da Informação e Layouts.

Além disso, a prática de QA baseada nos navegadores divididos em níveis deve ser estabelecida desde o início pois, infelizmente, não só o cliente como muitos profissionais de Internet ainda não tem essa filosofia em mente.

Análise de interface

Com as definições do projeto estabelecidas, a etapa de análise da interface tem como intuito a comunicação direta com a área de Design e definições das limitações do site (já documentadas nas especificações do projeto).

Desta maneira podem ser utilizados alguns pontos para avaliação da interface:

  • Haverá mais de uma versão do site (desktop, mobile, etc.)?
  • Caso não haja mais de uma versão, o layout é flexível o suficiente para permitir que se pratique Responsive Web Design?
  • As fontes utilizadas são padrão de sistema ou webfonts?
  • O Designer previu Progressive Enhancement, ou seja, a não existência de alguns recursos visuais prejudica o uso do site?
  • Foram previstos elementos de navegação que facilitem a acessibilidade do site?
  • Foi criado um guide com todos os elementos, espaçamentos e comportamentos padrões dos layouts?
  • Foram previstos todos os comportamentos de formulário?
  • As páginas de erro também foram planejadas?

Ou seja, a análise tem que levar como base tudo o que foi definido na etapa anterior, colocando em prática já no Design de Interface. Trabalhando desta forma realmente fazemos juz ao termo “form follows function“.

Complementando a análise de interface, elaboramos um guia para designer e desenvolvedores com ferramentas e informações voltadas para facilitar na criação e desenvolvimento dos elementos das interfaces.

Análise técnica

Esta etapa tem como intuito iniciar o trabalho do Front-End Developer na prática, realizando uma análise estrutural de todos os layouts em conjunto com wireframe, descrevendo a estrutura de forma simples:

    PAGINA INICIAL
    ===============================================================
    
    header.header[role="banner"]
    
    --
    
    main.content[role="main"]
        
    --
    
    footer.footer
            
    --
      

Após a definição estrutural de todas as telas, deve-se analisar (obviamente, tomando como base o que foi definido na documentação do projeto) quais tecnologias serão utilizadas para a produção das páginas, por exemplo:

  • Metodologias utilizadas para reproduzir o layout;
  • Comportamentos planejados pela equipe de UX e Design;
  • Versão do framework javascript;
  • Quais scripts serão utilizados para determinadas funcionalidades (lightbox, navegações em abas, galerias de imagens, etc.);
  • Abordagem aos usuários de navegadores antigos (C-Grade) e outros dispositivos.

O objetivo desta etapa é separar bem todas as áreas de atuação do Front-End Developer, assim cada uma delas tem o foco necessário, otimizando o tempo total de produção.

Controle de versão

Parte importante de qualquer projeto é o versionamento de seus arquivos em desenvolvimento, principalmente nos projetos que envolvem grande equipe.

O versionamento deve fazer parte da cultura de todos, já que exige commits frequentes para que não haja perda de informações importantes. O interessante é que sejam feitos comentários para cada versão salva, assim a manutenção e compreensão do sistema é facilitada.

Os sistemas de controle de versão mais comumente vistos na web são:

Um workflow bem definido para os branches e regras para deploys das aplicações é muito importante para evitar conflitos e consequente perda de tempo no desenvolvimento de qualquer projeto.

Referências:

Controle de atividades

Para que qualquer projeto possa ser executado com qualidade e poucos bugs, o Front-End Developer precisa conhecer bem o projeto e as definições antes mesmo de iniciá-lo.

O Sistema de controle serve para armazenar todo o histórico de comentários a respeito do job com possíveis mudanças de escopo, avisos de novo conteúdo, relação de páginas concluídas e pendentes. Importante também registrar cada período de tempo designado no projeto, especificando o tipo de tarefa onde o tempo foi despendido.

Na Coopers utilizamos a ferramenta Ora para registrar e controlar todos os nossos projetos internos e de clientes.

Planilha para controle de andamento

Utilizamos as planilhas do Google Docs para criar tabelas contendo status do projeto, nome dos arquivos HTML, link para as especificações do job e observações. Além disso é possível observar o status geral do projeto vendo a relação entre telas feitas e o total.

Voltar ao índice

Apêndice

Ferramentas
  • Bitbucket – Ferramenta para organizar projetos e sistema de versionamento de arquivos;
  • Codepen – Ferramenta que facilita a criação e edição de código direto no browser, possibilitando inclusive o uso de frameworks, scripts e até pré-processadores (SASS, LESS, etc.), além do compartilhamento deste código;
  • PageSpeed Insights – Ferramenta do Google que auxilia na avaliação da performance do site. Possui alguns bugs, por exemplo no aviso de otimização de imagens que usam object-fit, porém em termos gerais funciona muito bem;
  • YSlow – Extensão para diversos navegadores (e bookmarklet mobile) que analisa a performance das páginas.
Referências gerais

Referências utilizadas para a construção deste artigo, além de servirem como fonte de inspiração para o trabalho dos Front-End Developers:

Voltar ao índice