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.
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).
– 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.
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.
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
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.
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">
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)
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.
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
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).
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).
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
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“ />
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}
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.
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>
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.
– 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>
zigolis
hakubishin3
iktakahiro
imamura_ko_0314
ytaka23
sat
akahane92
freee
lycorp_recruit_jp
wa6sn
bengo4com
chanyou0311
oracle4engineer
marktimemedia
csswizardry
tammyeverts
keithpitt
moore
jnunemaker
marcduiker
chriscoyier
erikaheidi
pauljervisheath
nonsquared
philhawksworth
