SlideShare uma empresa Scribd logo
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 &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;>
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=&quot;3&quot;> ou <td rowspan='3'>
Erros comuns Colocar caracteres especiais no documento Errado :  <title>Cars & Trucks</title>  Certo:  <title>Cars &amp; Trucks</title>
Erros comuns Usar o & dentro de URLs Errado :  <a href=&quot;index.php?page=news&style=5&quot;>News</a>  Certo: <a href=&quot;index.php?page=news&amp;style=5&quot;>News</a>
Erros comuns Não reconhecer que XHTML é case sensitive Errado :  <BODY><P ID=&quot;ONE&quot;>The Best Page Ever</P></BODY>  Certo: <body><p id=&quot;ONE&quot;>The Best Page Ever</p></body>
Erros comuns Usar redução de atributos Errado :  <textarea readonly>READ-ONLY</textarea>  Certo: <textarea readonly=&quot;readonly&quot;>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  ? Diego Potapczuk [email_address] diegoliveira.com.br

Mais conteúdo relacionado

Mais procurados

HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
PeslPinguim
 
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
Herbet Ferreira Rodrigues
 
HTML Formatando Textos
HTML Formatando TextosHTML Formatando Textos
HTML Formatando Textos
Mayza de Oliveira
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
Léo Dias
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
Dra. Camila Hamdan
 
HTML Básico
HTML BásicoHTML Básico
Web Standards
Web StandardsWeb Standards
Web Standards
Renata Tibiriçá
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
Mayza de Oliveira
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Uni Buscapé Company
 
Aula 07
Aula 07Aula 07
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
Sliedesharessbarbosa
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
franciosney
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
Sergio Finamore
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
ledsifes
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
Tales Augusto
 
Html Básico
Html BásicoHtml Básico
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
Eliene Resende
 
HTML
HTMLHTML

Mais procurados (20)

HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
 
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
 
HTML Formatando Textos
HTML Formatando TextosHTML Formatando Textos
HTML Formatando Textos
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
Aula 07
Aula 07Aula 07
Aula 07
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Apostila curso xhtml css
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
HTML
HTMLHTML
HTML
 

Destaque

Projeto Indiana
Projeto IndianaProjeto Indiana
Projeto Indiana
hellequin
 
Applets - O Retorno: A Nova Geração do Java Plug-in
Applets - O Retorno: A Nova Geração do Java Plug-inApplets - O Retorno: A Nova Geração do Java Plug-in
Applets - O Retorno: A Nova Geração do Java Plug-in
Serge Rehem
 
Wbs simulação de um projeto rev01
Wbs simulação de um projeto rev01Wbs simulação de um projeto rev01
Wbs simulação de um projeto rev01
cegpt43
 
Aplicações java com netbeans
Aplicações  java com  netbeansAplicações  java com  netbeans
Aplicações java com netbeans
Thalles Anderson
 
A importância dos padrões web
A importância dos padrões webA importância dos padrões web
A importância dos padrões web
Divulgrs
 
Movies
MoviesMovies
3rd class copia
3rd class   copia3rd class   copia
Año de la diversificación productiva y del fortalecimiento de la educación
Año de la diversificación productiva y del fortalecimiento de la educaciónAño de la diversificación productiva y del fortalecimiento de la educación
Año de la diversificación productiva y del fortalecimiento de la educación
marisolstef
 
Danny Chew Wedding Fashion Shoot
Danny Chew Wedding Fashion ShootDanny Chew Wedding Fashion Shoot
Danny Chew Wedding Fashion Shoot
ShootFest
 
Bajan creole Presentation
Bajan creole PresentationBajan creole Presentation
Bajan creole Presentation
Estefania Acevedo
 
CSS
CSSCSS
Samir Mamude - Sistemas Comerciais Java EE
Samir Mamude - Sistemas Comerciais Java EESamir Mamude - Sistemas Comerciais Java EE
Samir Mamude - Sistemas Comerciais Java EE
Samir Mamude
 
7 Habits of Effective Sites in Asia Pac
7 Habits of Effective Sites in Asia Pac7 Habits of Effective Sites in Asia Pac
7 Habits of Effective Sites in Asia Pac
Cuneyt Uysal
 
2011 newsgator Cuneyt Uysal 6 Steps to Social SharePoint Intranet
2011 newsgator Cuneyt Uysal 6 Steps to Social SharePoint Intranet2011 newsgator Cuneyt Uysal 6 Steps to Social SharePoint Intranet
2011 newsgator Cuneyt Uysal 6 Steps to Social SharePoint Intranet
Cuneyt Uysal
 
Les adverbes
Les adverbesLes adverbes
Guilty people gideon schipaanboord
Guilty people gideon schipaanboordGuilty people gideon schipaanboord
Guilty people gideon schipaanboord
webwinkelvakdag
 
Criação e Interface para dispositivos móveis
Criação e Interface para dispositivos móveisCriação e Interface para dispositivos móveis
Criação e Interface para dispositivos móveis
Alex Ivonika
 

Destaque (20)

Projeto Indiana
Projeto IndianaProjeto Indiana
Projeto Indiana
 
Applets - O Retorno: A Nova Geração do Java Plug-in
Applets - O Retorno: A Nova Geração do Java Plug-inApplets - O Retorno: A Nova Geração do Java Plug-in
Applets - O Retorno: A Nova Geração do Java Plug-in
 
Wbs simulação de um projeto rev01
Wbs simulação de um projeto rev01Wbs simulação de um projeto rev01
Wbs simulação de um projeto rev01
 
Aplicações java com netbeans
Aplicações  java com  netbeansAplicações  java com  netbeans
Aplicações java com netbeans
 
A importância dos padrões web
A importância dos padrões webA importância dos padrões web
A importância dos padrões web
 
Movies
MoviesMovies
Movies
 
3rd class copia
3rd class   copia3rd class   copia
3rd class copia
 
Año de la diversificación productiva y del fortalecimiento de la educación
Año de la diversificación productiva y del fortalecimiento de la educaciónAño de la diversificación productiva y del fortalecimiento de la educación
Año de la diversificación productiva y del fortalecimiento de la educación
 
Al lail
Al lailAl lail
Al lail
 
Danny Chew Wedding Fashion Shoot
Danny Chew Wedding Fashion ShootDanny Chew Wedding Fashion Shoot
Danny Chew Wedding Fashion Shoot
 
BOGOTÁ
BOGOTÁBOGOTÁ
BOGOTÁ
 
рецепты
рецептырецепты
рецепты
 
Bajan creole Presentation
Bajan creole PresentationBajan creole Presentation
Bajan creole Presentation
 
CSS
CSSCSS
CSS
 
Samir Mamude - Sistemas Comerciais Java EE
Samir Mamude - Sistemas Comerciais Java EESamir Mamude - Sistemas Comerciais Java EE
Samir Mamude - Sistemas Comerciais Java EE
 
7 Habits of Effective Sites in Asia Pac
7 Habits of Effective Sites in Asia Pac7 Habits of Effective Sites in Asia Pac
7 Habits of Effective Sites in Asia Pac
 
2011 newsgator Cuneyt Uysal 6 Steps to Social SharePoint Intranet
2011 newsgator Cuneyt Uysal 6 Steps to Social SharePoint Intranet2011 newsgator Cuneyt Uysal 6 Steps to Social SharePoint Intranet
2011 newsgator Cuneyt Uysal 6 Steps to Social SharePoint Intranet
 
Les adverbes
Les adverbesLes adverbes
Les adverbes
 
Guilty people gideon schipaanboord
Guilty people gideon schipaanboordGuilty people gideon schipaanboord
Guilty people gideon schipaanboord
 
Criação e Interface para dispositivos móveis
Criação e Interface para dispositivos móveisCriação e Interface para dispositivos móveis
Criação e Interface para dispositivos móveis
 

Semelhante a Padroes Web

Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
Eliene Resende
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
clodiney cruz
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
Fábio Flatschart
 
Aula html
Aula htmlAula html
Aula html
Suissa
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Fabio Moura Pereira
 
Trabalho jQuery
Trabalho jQueryTrabalho jQuery
Trabalho jQuery
grupoucpel
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
Professor Samuel Ribeiro
 
Html
HtmlHtml
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTML
Willian Magalhães
 
Academia Verão 2011 - HTML
Academia Verão 2011 - HTMLAcademia Verão 2011 - HTML
Academia Verão 2011 - HTML
Nuno Simaria
 
Academia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSSAcademia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSS
Nuno Simaria
 
Xhtml
XhtmlXhtml
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
JEANCLEVERSONPRATAS
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
RubenManhia
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTML
Willian Magalhães
 
Html E Websemantica Trabalho
Html E Websemantica TrabalhoHtml E Websemantica Trabalho
Html E Websemantica Trabalho
Adagenor Ribeiro
 
Apresentando o HTML
Apresentando o HTMLApresentando o HTML
Apresentando o HTML
Mércia Regina da Silva
 
Html5
Html5Html5
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
Reinaldo Vieira dos Santos
 
Html completo
Html completoHtml completo
Html completo
EMSNEWS
 

Semelhante a Padroes Web (20)

Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
Aula html
Aula htmlAula html
Aula html
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
 
Trabalho jQuery
Trabalho jQueryTrabalho jQuery
Trabalho jQuery
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
 
Html
HtmlHtml
Html
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTML
 
Academia Verão 2011 - HTML
Academia Verão 2011 - HTMLAcademia Verão 2011 - HTML
Academia Verão 2011 - HTML
 
Academia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSSAcademia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSS
 
Xhtml
XhtmlXhtml
Xhtml
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTML
 
Html E Websemantica Trabalho
Html E Websemantica TrabalhoHtml E Websemantica Trabalho
Html E Websemantica Trabalho
 
Apresentando o HTML
Apresentando o HTMLApresentando o HTML
Apresentando o HTML
 
Html5
Html5Html5
Html5
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Html completo
Html completoHtml completo
Html completo
 

Último

se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
ronaldos10
 
Segurança da Informação - Onde estou e para onde eu vou.pptx
Segurança da Informação - Onde estou e para onde eu vou.pptxSegurança da Informação - Onde estou e para onde eu vou.pptx
Segurança da Informação - Onde estou e para onde eu vou.pptx
Divina Vitorino
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
Faga1939
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
Ismael Ash
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão
 
Eletiva_O-mundo-conectado-Ensino-Médio.docx.pdf
Eletiva_O-mundo-conectado-Ensino-Médio.docx.pdfEletiva_O-mundo-conectado-Ensino-Médio.docx.pdf
Eletiva_O-mundo-conectado-Ensino-Médio.docx.pdf
barbosajucy47
 
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ismael Ash
 

Último (7)

se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
 
Segurança da Informação - Onde estou e para onde eu vou.pptx
Segurança da Informação - Onde estou e para onde eu vou.pptxSegurança da Informação - Onde estou e para onde eu vou.pptx
Segurança da Informação - Onde estou e para onde eu vou.pptx
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
 
Eletiva_O-mundo-conectado-Ensino-Médio.docx.pdf
Eletiva_O-mundo-conectado-Ensino-Médio.docx.pdfEletiva_O-mundo-conectado-Ensino-Médio.docx.pdf
Eletiva_O-mundo-conectado-Ensino-Médio.docx.pdf
 
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
 

Padroes Web

  • 1. Padrões da WEB Diego Potapczuk [email_address] diegoliveira.com.br Junho de 2008
  • 2. 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).
  • 3. 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>
  • 4. 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.
  • 5. 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.
  • 6. 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
  • 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ão definir o tipo DocType apropriado XHTML 1.0 Strict <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;>
  • 9. Erros comuns Não fechar elementos vazios Errado : <br><hr> Certo: <br /><hr />
  • 10. 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>
  • 11. Erros comuns Agrupamento incorreto de elementos Errado : <em><strong>This is some text.</em></strong> Certo: <em><strong>This is some text.</strong></em>
  • 12. Erros comuns Não colocar aspas em volta dos elementos Errado : <td rowspan=3> Certo: <td rowspan=&quot;3&quot;> ou <td rowspan='3'>
  • 13. Erros comuns Colocar caracteres especiais no documento Errado : <title>Cars & Trucks</title> Certo: <title>Cars &amp; Trucks</title>
  • 14. Erros comuns Usar o & dentro de URLs Errado : <a href=&quot;index.php?page=news&style=5&quot;>News</a> Certo: <a href=&quot;index.php?page=news&amp;style=5&quot;>News</a>
  • 15. Erros comuns Não reconhecer que XHTML é case sensitive Errado : <BODY><P ID=&quot;ONE&quot;>The Best Page Ever</P></BODY> Certo: <body><p id=&quot;ONE&quot;>The Best Page Ever</p></body>
  • 16. Erros comuns Usar redução de atributos Errado : <textarea readonly>READ-ONLY</textarea> Certo: <textarea readonly=&quot;readonly&quot;>READ-ONLY</textarea>
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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.
  • 22. 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.
  • 23. 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.
  • 24. 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.
  • 25. 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.
  • 26. 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.
  • 27. Portabilidade Um documento pode ser usado em uma mídia totalmente diferente apenas trocando-se a folha de estilo.
  • 28. 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.
  • 29. 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.
  • 30. 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.
  • 31. 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.
  • 34. Sem folha de estilo
  • 35. Modo tela pequena Celulares Palms PDAs
  • 36. Zen Garden – Código fonte
  • 37. Site sem folha de estilo
  • 39.  
  • 40.  
  • 41.  
  • 42. Muito obrigado Dúvidas ? Diego Potapczuk [email_address] diegoliveira.com.br