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
  • Web Design
  • User Experience
  • Front-End Engineering
  • 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-GradeC-Grade
Chrome *X
Firefox *X
Safari *X
Safari iOS *X
Internet Explorer 7
X
Internet Explorer 8
X
Internet Explorer 9X
Internet Explorer 10X
EdgeX

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;
  • 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 <label> para os rótulos dos campos de formulário permite que, ao clicado, seja ativado o foco no campo correspondente.

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).

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).

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.

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.

HTML5

Devido a boa aceitação dos navegadores modernos e smartphones, usamos como padrão o HTML5 em nossos projetos, principalmente no que diz respeito a semântica do código.

Novos recursos como Web Storage, Canvas, Geolocation, etc., se utilizados, devem dispor de uma alternativa para os usuários que não tiverem tais funcionalidades em seu navegador.

Para que o uso de elementos HTML5 não dê problemas em alguns navegadores C-Grade (IE6) ou até mesmo A-Grade (IE7, IE8 e 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;
  • Especificidade – tiramos o máximo de proveito da especificidade, mas sem exageros, já que quanto maior as definições, mais pesado fica para o navegador interpretar a regra;
  • Uma regra por linha, deixando o documento mais enxuto e fácil de entender;
  • Código bem comentado e segmentado, ou seja, no início do CSS estão 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 nossos projetos da seguinte maneira:

  • scss/geral.scss para as definições gerais do site todo;
  • scss/templates.scss para as definições específicas das templates, a serem usadas em todas as telas;
  • scss/_medium.scss e _large.scss com as definições gerais para as telas médias e maiores;
  • scss/_medium-templates.scss e _large-templates.scss contendo definições específicas das páginas para telas médias e grandes.

Dependendo do seu workflow, seja usando CodeKit, Grunt ou Gulp para compilar os arquivos SASS, nosso framework concatena todos os arquivos em um geral.css, a fim de diminuir as requisições do servidor, item importantíssimo para melhorar a performance dos projetos.

Além disso, independente do tamanho do site também temos o impressao.scss (compilado em impressao.css) que possui definições básicas para tornar qualquer site amigável em sua versão de impressão.

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:; border:; background:; font:; text:; color:; }
        
  1. position:;
  2. top:;
  3. left:;
  4. float:;
  5. clear:;
  6. display:;
  7. width:;
  8. height:;
  9. margin:;
  10. padding:;
  11. border:;
  12. background:;
  13. font:;
  14. text:;
  15. color:;

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

1 até 3 posicionamento
4 até 5 float
6 comportamento
7 até 10 medidas e espaçamentos
11 até 12 formatação do bloco
13 até 15 formatação do conteúdo

As demais propriedades não listadas acima, que nem sempre são usadas devem ser inseridas em seguida, no final da linha antes do fechamento das chaves.

Compatibilidade entre os navegadores

Um dos grandes desafios dos Front-End Developers é o teste nos diversos browsers, por isso é de extrema importância conhecer suas limitações.

Como o Internet Explorer ainda é o mais utilizado e há grande diferença entre suas versões, usamos algumas metodologias para facilitar o ajuste específico, como é o caso dos conditional comments no início do código:

<!DOCTYPE html>
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="pt-br"> <!--<![endif]-->
      

Este código insere a classe ‘lt-ie8’ para versões abaixo do IE8 e assim por diante. No caso dos Internet Explorers acima da versão 9 e outros navegadores, não é colocada nenhuma classe específica, apenas a ‘no-js’.

Solução para - quase - todos os problemas do IE < 8: hasLayout

A coisa mais importante a ser compreendida para evitar grande parte dos bugs do Internet Explorer (abaixo da versão 8) é a propriedade hasLayout, ou seja, atribuindo ‘layout‘ a determinado elemento, muitos problemas desaparecem como mágica!

Sempre que precisar, ative o hasLayout do elemento usando height: 1% ou zoom: 1, tirando proveito dos conditional comments explicados anteriormente:

.lt-ie8 elemento { height: 1%; }
        

Para quase todos os outros bugs um simples position: relative resolve!

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 Progressive Enhancement, seguindo a metodologia de começar 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

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.
  • Use var para cada variável.
  • Caso não seja extremamente necessário, utilize javascript puro ao invés de bibliotecas como jQuery.
Frameworks

Além de pouparem tempo de desenvolvimento pela fácil escrita do código, os frameworks auxiliam a corrigir diversos problemas de compatibilidade entre os navegadores, porém deve-se analisar a finalidade de sua aplicação para julgar se é realmente necessário utilizá-los ou não.

Para a construção de nossos sites costumamos utilizar jQuery, auxiliando a otimizar o tempo de produção e adicionando recursos cada vez mais importantes (manipulação, ajax, etc.).

No desenvolvimento de sites mobile uma boa opção é o framework jQuery Mobile pois, além de manter a facilidade de escrita, adiciona eventos e elementos de interface específicos para dispositivos móveis (importante ressaltar que direciona-se a smartphones e tablets, já que celulares antigos (os chamados feature phones tem suporte básico ao javascript).

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.

Voltar ao índice

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.

Frameworks

Para o desenvolvimento de sites e aplicações direcionadas a smartphones, utilizamos basicamente o jQuery Mobile que fornece, além do jQuery como base, uma interface semelhante as aplicações nativas de iOS com HTML, CSS e JavaScript. Além disso, a customização dessa interface é bem facilitada através de skins com CSS.

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.

Utilizamos o Phonegap para desenvolver aplicativos nativos a iOS, Android, Blackberry, Windows Phone 7, entre outros sistemas móveis, sempre utilizando HTML5 como base. O mais interessante deste framework é que podemos acessar recursos nativos de cada aparelho, já que apesar de estarmos falando de HTMLs, é possível interagir com estes recursos usando JavaScript.

Além do Phonegap, outros frameworks que merecem destaque são: Sencha Touch e Appcelerator Titanium.

Voltar ao índice

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>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
        <th scope="col">Birthday</th>
      </tr>
      <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>
    </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="css/geral.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. Torne isto um hábito em todos os seus projetos!
  • 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).
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!

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?
  • Todas os alertas de formulário foram previstos?

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 - #inicial
    ===============================================================
    
    .limites
    
    --
    
      header.topo
        
    
    --
    
      .conteudo
        
    
    --
    
      footer.rodape
        
    
    --
      

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:

  • A versão do HTML, dependendo do ambiente no qual o site será hospedado;
  • 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:

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 BamBam! 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.

Para facilitar a aplicação do sistema de planilha, criamos um [modelo padrão] para que seja usado em qualquer projeto.

Voltar ao índice

Apêndice

Ferramentas
  • Add-on para Google Chrome: Microformats. Para verificar se os microformats criados foram implementados.
  • Add-on para Google Chrome: Humans.txt. Uma forma de reconhecer quem fez o website, e as ferramentas que usaram.
  • Code Spaces – Ferramenta para organizar projetos e sistema de versionamento de arquivos.
  • 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