Padroes Web
Loading...
Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.
1 Favorite
-
igorpimentel
favorited this 2 months ago
Padroes Web - Presentation Transcript
- Padrões da WEB Diego Potapczuk [email_address] diegoliveira.com.br Junho de 2008
- Padrões da WEB
- Os 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).
- HTML
- HTML deve ser 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>
- HTML x XHTML
- XHTML é 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.
- HTML x XHTML
- Assim 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.
- Tags a serem evitadas
- 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
- 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
- Erros comuns
- Não definir 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">
- Erros comuns
- Não fechar elementos vazios
- Errado : <br><hr>
- Certo: <br /><hr />
- Erros comuns
- Não fechar elementos de conteúdo
- Errado : <p>Paragrafo 1<p>Paragrafo 2
- Certo: <p>Paragrafo 1</p><p>Paragrafo 2</p>
- Erros comuns
- Agrupamento incorreto de elementos
- Errado : <em><strong>This is some text.</em></strong>
- Certo: <em><strong>This is some text.</strong></em>
- Erros comuns
- Não colocar aspas em volta dos elementos
- Errado : <td rowspan=3>
- Certo: <td rowspan="3"> ou <td rowspan='3'>
- Erros comuns
- Colocar caracteres especiais no documento
- Errado : <title>Cars & Trucks</title>
- Certo: <title>Cars & Trucks</title>
- Erros comuns
- Usar o & 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>
- Erros comuns
- Não reconhecer 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>
- Erros comuns
- Usar redução de atributos
- Errado : <textarea readonly>READ-ONLY</textarea>
- Certo: <textarea readonly="readonly">READ-ONLY</textarea>
- Recomendações para acessibilidade
- Prover 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
- Recomendações para acessibilidade
- Usar 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
- Recomendações para acessibilidade
- Evite 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
- Folha de Estilo
- As 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
- Vantagens
- A separação da 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.
- Velocidade
- Sites que utilizam 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.
- Manutenção
- Guardar todas as 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.
- Acessibilidade
- Em navegadores que 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.
- Customização
- Se a informaçã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.
- Consistência
- Como o arquivo 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.
- Portabilidade
- Um documento pode ser usado em uma mídia totalmente diferente apenas trocando-se a folha de estilo.
- Limitações
- Apesar do CSS 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.
- Suporte inconsistente dos navegadores
- 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.
- Controle do formato do 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.
- Falta de definição de 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.
- Exemplos
- http://www.webstandards.org/
- http://www.csszengarden.com/
- Web Standards Project
- Sem folha de estilo
- Modo tela pequena
- Celulares
- Palms
- PDAs
- Zen Garden – Código fonte
- Site sem folha de estilo
- Site normal
- Muito obrigado
- Dúvidas ?
More info about this document
© All Rights Reserved
Go to text version
- Total Views 212
- 211 on SlideShare
- Comments 0
- Favorites 1
- Downloads 0
Most viewed embeds
All embeds
- Upload Info
- Uploaded via SlideShare
- Uploaded as Microsoft PowerPoint
0 comments
Post a comment