Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Workshop Padrões de Desenvolvimento Front-End ...

Workshop Padrões de Desenvolvimento Front-End por Gabriel

Workshop sobre padrões de desenvolvimento Front-End para a equipe de devs da Embratec GoodCard por Gabriel Zigolis

Gabriel Zigolis

January 10, 2012
Tweet

More Decks by Gabriel Zigolis

Other Decks in Technology

Transcript

  1. Objetivo • Obtenção de requisitos mínimos de qualidade no código

    dos produtos. • Maximizar a acessibilidade, performance, portabilidade e buscabilidade.
  2. Padrões Web • Com a popularização da web e a

    falta de suporte do HTML a recursos de apresentação, os fabricantes de navegadores passaram a criar versões “paralelas” do HTML. • Diversas versões foram criadas, contribuindo para um ambiente inconsistente. Surgiram ai os códigos proprietários que só funcionavam em um determinado tipo e versão de navegador.
  3. Padrões Web • Para por fim ao ambiente caótico de

    incompatibilidade, garantindo o futuro aberto da Web, foi criado em 1994, o World Wide Web Consortium (W3C). • Os principais Padrões, são criados e mantidos pelo W3C, com a finalidade de manter a consistência entre os diversos navegadores e dispositivos de acesso, são esses: • HTML, CSS, XML, XHTML , Document Object Model (DOM).
  4. Case - ESPN • Por que trabalhar com padrões web?

    – Em 2003 o site de esportes mais acessado do mundo espn.com com 10 milhões de acessos diários foi redesenhado seguindo os padrões web. – O nível de implementação dos padrões no ESPN foi suficiente para atingir benefícios significativos, principalmente em largura de banda. Reduz-se em média 50% do tamanho de uma página ao se usar marcação estrutural e semântica.
  5. Case - ESPN • Algumas características da reformulação: – Todo

    posicionamento feito com CSS. – Não são usadas tabelas para layout. – Sem tags “font” na marcação. – Marcação estruturada focando a economia de largura de banda. – Uma única folha de estilo para todos os navegadores, sem detecção por JavaScript.
  6. Case – site estabelecimentos • Por que trabalhar com padrões

    web? – Um único objeto do site estabelecimentos foi reescrito dentro dos padrões web, como resultado, redução de 80% no tamanho do arquivo, economia de 53GB de transferência em 1 ano. Login.cfm Tamanho Tráfego Diário Tráfego Mensal Tráfego Anual Legado 68.8 KB 246.67 MB 5.42 GB 65.04 GB Novo 13.6 KB 46.48 MB 1022.56 MB 11.98 GB 3.500 Acessos diários Google Analytics
  7. xHTML • É a reformulação do HTML 4 com aplicação

    de XML. • É responsável apenas pela marcação (estrutura) do código, todos os aspectos relacionados a apresentação devem ser adicionados por css. • Documentos xHTML devem usar letras minúsculas para todos os elementos do HTML, bem como nomes de atributos, essa diferença é necessária porque XML é case- sensitive.
  8. xHTML • Principais diferenças entre HTML xHTML: – Overlapping •

    Correto: <p>parágrafo com <em>ênfase</em></p> • Incorreto: <p>parágrafo com <em>ênfase</p></em> – Fechamento de tags • Correto: <p>um parágrafo.</p> <p>outro parágrafo</p> • Incorreto: <p>um parágrafo. <p>outro parágrafo. </em> – Atributos declarados entre aspas • Correto: <td rowspan=“3”> • Incorreto: <td rowspan=3> – Não utilizar tags e atributos depreciados
  9. xHTML • Principais diferenças entre HTML xHTML: – Overlapping •

    Correto: <p>parágrafo com <em>ênfase</em></p> • Incorreto: <p>parágrafo com <em>ênfase</p></em> – Fechamento de tags • Correto: <p>um parágrafo.</p> <p>outro parágrafo</p> • Incorreto: <p>um parágrafo. <p>outro parágrafo. </em> – Atributos declarados entre aspas • Correto: <td rowspan=“3”> • Incorreto: <td rowspan=3>
  10. Doctype • Todo documento xHTML deve conter declaração do tipo

    de documento, o padrão utilizado deve ser xHTML 1.0 Transitional, como abaixo: • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  11. Semântica • O marcação deve ser totalmente semântica: • Não

    utilizar <b> <i>, e sim <strong>, <em> • H's na hierarquia, sem h1 redundante • Utilizar a tag H1 para o nome da empresa (logo) – Utilizar <ul>, <ol> para lista de itens, menus... – Não utilizar tags e atributos depreciados: • <font> <center> <i> <u>... • align, background, border color / face hspace / vspace style target ... • Não utilizar elementos inline sobre block – <a href=”#”><h1>Título</h1></a> • Não utilizar frames • Não utilizar iframes • codificação HTML identada (tab de 4 espaços) • semantica correta (disabled="disabled" , checked="checked", / ao finalizar)
  12. Charset • O charset a ser utilizado é o UTF-8.

    Formulários • Utilizar as tags fieldset e label. • Utilizar o atributo action. • Utilizar o input com type=“submit” para enviar o form. Tabelas • Dever ser utilizadas apenas para dados tabulares. • Utilizar tags th, thead, tfoot e tbody.
  13. Nomenclaturas • As nomenclaturas a serem utilizadas tem por objetivo

    a criação de um padrão para os nomes das pastas e dos arquivos a serem utilizados no site. • Os nomes de arquivos devem ser criados utilizando letras minúsculas sem acentos e com utilização de “-“ (hífen). – Nomenclatura ( id | class ) • Utilizar o elemento pai como referência – #gcd-doc #gcd-topo – Utilizar o prefixo do produto, separado “-” com breve nome do elemento: – Goodcard » id = gcd-nome-do-id » class = gcd-nome-da-classe – Embratec » id = emb-nome-do-id » class = emb-nome-da-classe
  14. Imagens • Utilizar alt e title • Declarar as dimensões

    de todas as imagens. • Não escalar a imagem, criar no tamanho correto. • Formatos padrões utilizados: – PNG, JPG e GIF. • Todas OTIMIZADAS para WEB (Não é impressão gráfica).
  15. Estrutura de pastas / diretórios <produto> - pasta raiz do

    sistema. <img> - pasta que conterá todas as imagens do sistema. <css> - pasta que conterá todos os arquivos CSS. <js> - pasta que conterá todos os arquivos JS. <...> - para cada tipo específico (json, flv, dentro outros).
  16. CSS • É responsável por toda a aparência de uma

    página, incluindo: – Família, cor e tamanho de fontes, posicionamento e dimensão de elementos, cores de fundo ou qualquer outra propriedade de formatação de um elemento. • CSS permite separar a apresentação do conteúdo, obtendo disto diversos benefícios: – Economia na banda do usuário acelerando o tempo de carga – Redução da sobrecarga no servidor – Redução do tempo de design e desenvolvimento – Redução do tempo de atualização e manutenção – Aumento da usabilidade – Aumento da visibilidade para SEO
  17. CSS • Incluindo CSS na página – As regras CSS

    podem ser incluídas de 3 formas: • Inline - > diretamente no elemento html (incorreto) – <p style=“color:#ccc”>A importância dos padrões web</p> • Interno - > dentro da página html (incorreto) – <style type=“text/css”>p{color:#ccc}</style> • Externo -> incluído externamente como um link (correto) • Deve ser incluído como um arquivo externo – <link href="css/gcd-padrao.css" rel="stylesheet“ />
  18. CSS - Sintaxe • Sintaxe básica das regras CSS: –

    SELETOR { PROPRIEDADE: VALOR; } • Exemplo: – h1{ • background: #ccc; }
  19. CSS - Boas práticas • Formatar os elementos na mesma

    ordem do xHTML • Utilizar as propriedades em ordem alfabética: – #gcd-doc{background:#ccc;margin:10px;padding:10;px} • Otimizar as regras, utilizando declarações abreviadas: – #gcd-doc{margin:10px;} • Ao invés de: – #gcd-doc{margin-top:10px;margin-right:10px; margin- bottom:10px;margin-left:10px}
  20. CSS - Boas práticas • Minificar os arquivos CSS para

    produção • Modularizar os arquivos: – gcd-reset.css – gcd-padrao.css – gcd-skin.css • Evitar utilização de hacks: – *margin:20px; – _margin:10px;
  21. CSS - Boas práticas • Não utilizar comentários no código

    de produção. • Utilizar CSS Sprites para minimizar requests: #gcd-rodape-grupo h4 a { background: url("../img/gcd-sprites-logos.png") no-repeat 0 0; display: block; height: 55px; width: 80px; }
  22. Javascript • É uma linguagem de script client-side mais popular

    da web. • É responsável por todo o comportamento da página, incluindo: – Interações com o usuário, animações, alertas, modais, validações de formulários, drag and drop de elementos, dentre outros. • É uma linguagem fracamente tipada, ou seja: – O compilador capturas erros durante o tempo de execução. – É mais rápida, porem menos segura.
  23. Javascript • Incluindo JS na página – As funções JS

    podem ser incluídas de 3 formas: • Inline - > diretamente no elemento html (incorreto) – <p onclick=“fazAlgumaCoisa();”>Faz alguma coisa</p> • Interno - > dentro da página html (incorreto) – <script type=“text/javascript”>window.onload(alert(“Oi”);)</script> • Externo -> incluído externamente como um script(correto) • Deve ser incluído como um arquivo externo – <script type="text/javascript" src="js/jquery.js"></script>
  24. JS - Sintaxe • Sintaxe básica do JS: function fazAlgo(){

    alert(“Bem vindo”); } function initFunction(){ var alerta = document.getElementById(“gcd-alerta”); alerta.onclick = function(){ fazAlgo(); } } window.onload = initFunction;
  25. JS - Boas práticas • Arquivos JS devem ser minificados

    para produção. • Todas as funções, plugins ou bibliotecas devem ser incluídas externamente. • JS não obstrutivo, conteúdo e funcionalidades principais devem estar acessíveis com js desabilitado. • Sempre utilizar padrão de codificação unicode para strings. • Evitar o uso de alerts. • Não utilizar popups.
  26. JS - Boas práticas • Cuidado com excesso de AJAX

    – Deve ser utilizado, quando necessário • Modularizar os arquivos de forma inteligente – A tela de login não precisa chamar todas as funções do sistema – O js deve ser modularizado para atender a todas as necessidades do sistema: • <script type="text/javascript" src="js/jquery.js"></script> • <script type="text/javascript" src="js/gcd-padrao.js"></script> • <script type="text/javascript" src="js/gcd-validacao.js"></script>
  27. Referências • W3C – http://www.w3.org/ • Web Standards Project –

    http://www.webstandards.org • YUI – http://developer.yahoo.com/yui/
  28. Ferramentas • Firebug – (ie, firefox, chrome) • Web developer

    – (firefox, chrome) • YSlow – (firefox, chrome) • Mode compatibilidade ie 7, 8 + inspetor de código – ie