Webstandards

1,778 views

Published on

Apresentação realizada dia 25 de Outubro de 2008 no Seminário PHP realizado no Instituto Audy Mentor, Fortaleza - CE.

Por Diego Maia.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,778
On SlideShare
0
From Embeds
0
Number of Embeds
84
Actions
Shares
0
Downloads
40
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Webstandards

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

×