![Padrões da WEB Diego Potapczuk [email_address] diegoliveira.com.br Junho de 2008](https://image.slidesharecdn.com/padroesweb-090615224829-phpapp01/85/Padroes-Web-1-320.jpg)
![Padrões da WEB Diego Potapczuk [email_address] diegoliveira.com.br Junho de 2008](https://image.slidesharecdn.com/padroesweb-090615224829-phpapp01/75/Padroes-Web-1-2048.jpg)
![Muito obrigado Dúvidas ? Diego Potapczuk [email_address] diegoliveira.com.br](https://image.slidesharecdn.com/padroesweb-090615224829-phpapp01/85/Padroes-Web-42-320.jpg)
Padroes Web
- 1. Padrões da WEBDiego Potapczuk [email_address] diegoliveira.com.br Junho de 2008
- 2. Padrões da WEBOs padrões foram criados para facilitar a vida de quem trabalha com internet e para tornar a navegação dos usuário mais agradável. Diversos padrões e boas práticas definidas em diversas áreas (HTML Semântico, XHTML, CSS, usabilidade, acessibilidade, portabilidade).
- 3. HTML HTML deveser utilizado para definir o conteúdo e a estrutura. Deve ser semântico (dar significado) aos elementos da página. <h1>Título do curso</h1> <h2>Título do módulo</h2> <p>Parágrafo</p> <h3>Título da seção</h3>
- 4. HTML x XHTMLXHTML é a nova versão do HTML, foco atual de todos os navegadores e considerada o futuro da internet, sua versão atual é 1.0, mas o 1.1 já foi aprovado. Baseada no XML, segue as mesmas regras, é mais restrito que o HTML, mas é mais fácil de se trabalhar o documento posteriormente pois possibilita o uso de ferramentas XML.
- 5. HTML x XHTMLAssim como o HTML, existem 3 versões (Strict, Transitional e Frameset), Strict define que o documento é estritamente de definição de conteúdo, não possuindo algumas tags de apresentação e fora do padrão, modelo que segundo a W3 será o padrão final do XHTML, o Transitional é a transição do modelo antigo para o padrão, sendo mais tolerável, já o frameset é o modelo a ser usado quando se faz uso de Frames. A versão 1.1 do XHTML aparentemente não terá essas 3 versões, e será apenas de definição de documento.
- 6. Tags a seremevitadas Deliberadas Depreciadas: basefont center font hr s strike tt u Frames: frame frameset iframe Strict: b br (quando usado de forma errada no lugar de um <div> ou <p>) big i small sub sup Abusadas blockquote (quando usado para identar) table (quando usado para layout) Presentational Attributes align alink bgcolor color face height link (no <body>) size (nos elementos <font>) valign vlink width
- 7. Tags depreciadas S=Strict,T=Transitional e F=Frameset TF Deprecated. Defines underlined text <u> TF Deprecated. Defines strikethrough text < strike > TF Deprecated. Defines strikethrough text <s> TF Defines a noframe section < noframes > TF Deprecated. Defines a menu list <menu> TF Deprecated. Defines a single-line input field <isindex> TF Defines an inline sub window (frame) < iframe > F Defines a set of frames < frameset > F Defines a sub window (a frame) <frame> TF Deprecated. Defines text font, size, and color < font > TF Deprecated. Defines a directory list < dir > TF Deprecated. Defines centered text < center > TF Deprecated. Defines a base font < basefont > TF Deprecated. Defines an applet < applet > DTD Description Tag
- 8. Erros comuns Nãodefinir o tipo DocType apropriado XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- 9. Erros comuns Nãofechar elementos vazios Errado : <br><hr> Certo: <br /><hr />
- 10. Erros comuns Nãofechar elementos de conteúdo Errado : <p>Paragrafo 1<p>Paragrafo 2 Certo: <p>Paragrafo 1</p><p>Paragrafo 2</p>
- 11. Erros comuns Agrupamentoincorreto de elementos Errado : <em><strong>This is some text.</em></strong> Certo: <em><strong>This is some text.</strong></em>
- 12. Erros comuns Nãocolocar aspas em volta dos elementos Errado : <td rowspan=3> Certo: <td rowspan="3"> ou <td rowspan='3'>
- 13. Erros comuns Colocarcaracteres especiais no documento Errado : <title>Cars & Trucks</title> Certo: <title>Cars & Trucks</title>
- 14. Erros comuns Usaro & dentro de URLs Errado : <a href="index.php?page=news&style=5">News</a> Certo: <a href="index.php?page=news&style=5">News</a>
- 15. Erros comuns Nãoreconhecer que XHTML é case sensitive Errado : <BODY><P ID="ONE">The Best Page Ever</P></BODY> Certo: <body><p id="ONE">The Best Page Ever</p></body>
- 16. Erros comuns Usarredução de atributos Errado : <textarea readonly>READ-ONLY</textarea> Certo: <textarea readonly="readonly">READ-ONLY</textarea>
- 17. Recomendações para acessibilidadeProver um texto equivalente para todos elementos não textuais (imagens sem alt ou com alt vazios) Validar o documento para garantir máxima compatibilidade Validação do XHTML e CSS Usar Folha de estilo para apresentação Garantir que elementos de apresentação não atrapalhe usuários que não necessitam dele
- 18. Recomendações para acessibilidadeUsar elementos de título para convencionar a estrutura do documento <h1>Título do curso</h1> <h2>Título do módulo</h2> <h3>Título da seção</h3> Fazer uso correto de listas e citações Organize o documento para que possa ser lido sem a folha de estilo Garantir que o documento possa ser lido quando java, javascript ou applet estiverem desabilitados Tornar possível a navegação com o mouse ou o teclado Prover uma ordem lógica de navegação com o uso do TAB
- 19. Recomendações para acessibilidadeEvite o uso de elementos depreciados pelo W3C Elementos como <font> somente funcionam ainda para garantir a compatibilidade com navegadores antigos Usar as tags labels (etiquetas) com seus respectivos elementos dentro de formulários
- 20. Folha de EstiloAs folhas de estilo visam separar a apresentação e o conteúdo das páginas. As marcações (ex. HTML ou XHTML) definem como será a semântica do conteúdo e sua estrutura, mas não o layout visual (estilo) dele. O estilo deve ser definido em uma folha de estilo separada, usando uma linguagem como o CSS ou XSL. O CSS é a folha de estilo mais utilizada na internet
- 21. Vantagens A separaçãoda apresentação do conteúdo tem várias vantagens, e cada vez mais vantagens com uma melhor adoção e evolução do CSS pelos navegadores.
- 22. Velocidade Sites queutilizam CSS tendem a carregar mais rápido. A primeira pagina do site normalmente demora um pouco, pois ele ira carregar o conteúdo e o estilo, mas nas paginas seguintes, o estilo já estará no cachê do navegador.
- 23. Manutenção Guardar todasas informações de estilo em um único arquivo reduz o tempo gasto com manutenção, alem de evitar erros humanos reduzindo as tarefas de manutenção.
- 24. Acessibilidade Em navegadoresque não aceitam conteúdo gráfico, como o Lynx, irão ignorar esses CSS, mas o conteúdo continuará a ser mostrado corretamente. Outro exemplo são os terminais em braile e leitores de tela, que irão funcionar melhor, pois poderão ignorar por completo as informações de layout.
- 25. Customização Se ainformação de layout estiver toda de forma externa, um usuário pode escolher por desabilitar o layout e visualizar somente o conteúdo, alem de que hoje sites já disponibilizam diversas folhas de estilo, possibilitando que o usuário escolha a que mais gostar. Os navegadores mais modernos também possibilitam seus usuários definir suas próprias regras de CSS, possibilitando, por exemplo, que eles definam suas próprias cores e fontes para um site.
- 26. Consistência Como oarquivo de conteúdo contém apenas o conteúdo de forma semântica que o autor tem a intenção de mostrar, ele não precisa se preocupar com a apresentação no momento da composição.
- 27. Portabilidade Um documentopode ser usado em uma mídia totalmente diferente apenas trocando-se a folha de estilo.
- 28. Limitações Apesar doCSS ser um padrão adotado e difundido no mercado ele ainda possui diversas limitações, mas que estão sendo corrigidas com as novas especificações.
- 29. Suporte inconsistente dosnavegadores Diferentes navegadores irão mostrar layouts CSS diferente como resultado de bugs do navegador ou falta de alguns recursos CSS. Por exemplo o internet explorer 6 que implementa muitas das propriedades do CSS 2.0 de sua forma, gerando incompatibilidade e interpretando incorretamente diversas propriedades. Dessa forma tendo que ser utilizados diversos CSS “hacks” para conseguir um layout consistente.
- 30. Controle do formatodo elemento O CSS somente oferece formatos retangulares, cantos arredondados ou outras formas requerem formas não semânticas. Porem isso esta sendo analisado para o CSS3.
- 31. Falta de definiçãode colunas Atualmente layouts com múltiplas colunas é complexo de ser implementado, além de gerar diferentes visualizações a depender do navegador, resolução e formato de tela.
- 32.
- 33.
- 34. Sem folha deestilo
- 35. Modo tela pequenaCelulares Palms PDAs
- 36. Zen Garden –Código fonte
- 37. Site sem folhade estilo
- 38.
- 39.
- 40.
- 41.
- 42. Muito obrigado Dúvidas ? Diego Potapczuk [email_address] diegoliveira.com.br