PADRÕES WEB – WEB STANDARDS Diego Maia Evangelista – Webdesigner [email_address]
PADRÕES WEB - WEBSTANDARDS O que  são os Web Standards? São as normas que regem a construção e a intepretação de conteudo para a web. Todos que produzem softwares e conteúdo para web devem ter conhecimento sobre os padrões estabelecidos pela  W3C. W3C  - World Wide Web Consortium: Criada em 1994 por Tim Berners-Lee, hoje possuindo cerca de 400 membros entre eles várias das maiores empresas de tecnologia do mundo. -  Adobe Systems Inc. -  Apple, Inc. -  Cisco -  Google, Inc. -  Mozilla Foundation -  Microsoft Corporation -  Nokia -  Red Hat -  ORACLE
PADRÕES WEB - WEBSTANDARDS Quais são os padrões W3C? Existem vários tipos de padrões estabelecidos pela W3C, os que mais conhecidos são: -  XHTML -  CSS -  XML   - DOM XHTML  - eXtensible Hypertext Markup Language: É a reformulação do HTML, acrecentando semântica às máquinas, combinando as tags do HTML com as regras do XML. A intenção do XHTML veio para melhorar a acessibilidade. CSS  - Cascading Style Sheets: Linguagem de estilo, veio para separar o conteúdo da sua formatação. Toda parte de cores, tipografia e disposição dos elementos deve ficar em um arquivo diferente do XHTML. XML  - eXtensible Markup Language: é uma recomendação da W3C para gerar linguagens de marcação. É uma boa opção para gerar documentos com dados hierárquicos. DOM   - Document Object Model: é uma especificação da W3C, independente de plataforma e linguagem, onde pode-se dinamicamente alterar e editar a estrutura, conteúdo e estilo de um documento eletrônico.
PADRÕES WEB - WEBSTANDARDS Porque utilizar padrões Web? Facilidade na manutenção de código Baixo custo de produção Diminuição de banda e velocidade de transferência Acessível em qualquer tipo de dispositivo Maiores benefícios para os usuários
PADRÕES WEB - WEBSTANDARDS Conhecendo XHTML <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /> <title>Insert title here</title> </head> <body> <h1>Hello Wold!</h1> </body> </html>
PADRÕES WEB - WEBSTANDARDS Conhecendo XHTML Structure Module* body, head, html, title Text Module* abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var Hypertext Module* a List Module* dl, dt, dd, ol, ul, li Object Module object, param Presentation Module b, big, hr, i, small, sub, sup, tt Edit Module del, ins Bidirectional Text Module bdo Forms Module button, fieldset, form, input, label, legend, select, optgroup, option, textarea Table Module caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr Image Module img Client-side Image Map Module area, map Server-side Image Map Module Attribute ismap on img Intrinsic Events Module Events attributes Metainformation Module meta Scripting Module noscript, script Stylesheet Module style element Style Attribute Module  Deprecated style attribute Link Module link Base Module base
PADRÕES WEB - WEBSTANDARDS Passado da Web
PADRÕES WEB - WEBSTANDARDS De volta para o futuro.
Table X Tableless Tabless não quer dizer &quot;não usar tabelas&quot;. Tableless quer dizer: Não usar tabelas para disposição de conteúdo de um site. Tabelas devem ser usadas para dados tabulares. PADRÕES WEB - WEBSTANDARDS
PADRÕES WEB - WEBSTANDARDS Formulário Semánticamente Correto
PADRÕES WEB - WEBSTANDARDS Referencias http://usabilidoido.com.br/padroes_web_webstandards.html http://www.webstandards.org/about/mission/pt/ http://wikipedia.org/ http://www.w3.org/TR/xhtml11/doctype.html http://www.w3c.br/
PADRÕES WEB – WEB STANDARDS Diego Maia Evangelista – Webdesigner [email_address] OBRIGADO

Webstandards

  • 1.
    PADRÕES WEB –WEB STANDARDS Diego Maia Evangelista – Webdesigner [email_address]
  • 2.
    PADRÕES WEB -WEBSTANDARDS O que são os Web Standards? São as normas que regem a construção e a intepretação de conteudo para a web. Todos que produzem softwares e conteúdo para web devem ter conhecimento sobre os padrões estabelecidos pela W3C. W3C - World Wide Web Consortium: Criada em 1994 por Tim Berners-Lee, hoje possuindo cerca de 400 membros entre eles várias das maiores empresas de tecnologia do mundo. - Adobe Systems Inc. - Apple, Inc. - Cisco - Google, Inc. - Mozilla Foundation - Microsoft Corporation - Nokia - Red Hat - ORACLE
  • 3.
    PADRÕES WEB -WEBSTANDARDS Quais são os padrões W3C? Existem vários tipos de padrões estabelecidos pela W3C, os que mais conhecidos são: - XHTML - CSS - XML - DOM XHTML - eXtensible Hypertext Markup Language: É a reformulação do HTML, acrecentando semântica às máquinas, combinando as tags do HTML com as regras do XML. A intenção do XHTML veio para melhorar a acessibilidade. CSS - Cascading Style Sheets: Linguagem de estilo, veio para separar o conteúdo da sua formatação. Toda parte de cores, tipografia e disposição dos elementos deve ficar em um arquivo diferente do XHTML. XML - eXtensible Markup Language: é uma recomendação da W3C para gerar linguagens de marcação. É uma boa opção para gerar documentos com dados hierárquicos. DOM - Document Object Model: é uma especificação da W3C, independente de plataforma e linguagem, onde pode-se dinamicamente alterar e editar a estrutura, conteúdo e estilo de um documento eletrônico.
  • 4.
    PADRÕES WEB -WEBSTANDARDS Porque utilizar padrões Web? Facilidade na manutenção de código Baixo custo de produção Diminuição de banda e velocidade de transferência Acessível em qualquer tipo de dispositivo Maiores benefícios para os usuários
  • 5.
    PADRÕES WEB -WEBSTANDARDS Conhecendo XHTML <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /> <title>Insert title here</title> </head> <body> <h1>Hello Wold!</h1> </body> </html>
  • 6.
    PADRÕES WEB -WEBSTANDARDS Conhecendo XHTML Structure Module* body, head, html, title Text Module* abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var Hypertext Module* a List Module* dl, dt, dd, ol, ul, li Object Module object, param Presentation Module b, big, hr, i, small, sub, sup, tt Edit Module del, ins Bidirectional Text Module bdo Forms Module button, fieldset, form, input, label, legend, select, optgroup, option, textarea Table Module caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr Image Module img Client-side Image Map Module area, map Server-side Image Map Module Attribute ismap on img Intrinsic Events Module Events attributes Metainformation Module meta Scripting Module noscript, script Stylesheet Module style element Style Attribute Module Deprecated style attribute Link Module link Base Module base
  • 7.
    PADRÕES WEB -WEBSTANDARDS Passado da Web
  • 8.
    PADRÕES WEB -WEBSTANDARDS De volta para o futuro.
  • 9.
    Table X TablelessTabless não quer dizer &quot;não usar tabelas&quot;. Tableless quer dizer: Não usar tabelas para disposição de conteúdo de um site. Tabelas devem ser usadas para dados tabulares. PADRÕES WEB - WEBSTANDARDS
  • 10.
    PADRÕES WEB -WEBSTANDARDS Formulário Semánticamente Correto
  • 11.
    PADRÕES WEB -WEBSTANDARDS Referencias http://usabilidoido.com.br/padroes_web_webstandards.html http://www.webstandards.org/about/mission/pt/ http://wikipedia.org/ http://www.w3.org/TR/xhtml11/doctype.html http://www.w3c.br/
  • 12.
    PADRÕES WEB –WEB STANDARDS Diego Maia Evangelista – Webdesigner [email_address] OBRIGADO