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

1. Padrões e boas práticas de desenvolvimento web Gabriel Zigolis
2. Objetivo • Obtenção de requisitos mínimos de qualidade no código dos produtos. • Maximizar a acessibilidade, performance, portabilidade e buscabilidade.
3. 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.
4. 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).
5. 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.
6. 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.
7. 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
8. 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.
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> – Não utilizar tags e atributos depreciados
10. 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>
11. 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">
12. 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)
13. 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.
14. 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
15. 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).
16. 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).
17. 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
18. 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“ />
19. CSS - Sintaxe • Sintaxe básica das regras CSS: – SELETOR { PROPRIEDADE: VALOR; } • Exemplo: – h1{ • background: #ccc; }
20. 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}
21. 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;
22. 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; }
23. 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.
24. 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>
25. 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;
26. 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.
27. 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>
28. Exemplo
29. Exemplo
30. Referências • W3C – http://www.w3.org/ • Web Standards Project – http://www.webstandards.org • YUI – http://developer.yahoo.com/yui/
31. Ferramentas • Firebug – (ie, firefox, chrome) • Web developer – (firefox, chrome) • YSlow – (firefox, chrome) • Mode compatibilidade ie 7, 8 + inspetor de código – ie
32. Dúvidas, sugestões, doações... ?