{"id":231,"date":"2011-09-23T03:16:11","date_gmt":"2011-09-23T03:16:11","guid":{"rendered":"http:\/\/leonardocotta.com.br\/blog\/?p=231"},"modified":"2011-09-23T03:16:11","modified_gmt":"2011-09-23T03:16:11","slug":"padroes-web-semantica-da-web-e-web-semantica","status":"publish","type":"post","link":"https:\/\/leonardocotta.com.br\/?p=231","title":{"rendered":"Padr\u00f5es Web, sem\u00e2ntica da Web e Web Sem\u00e2ntica"},"content":{"rendered":"<p>Existe uma confus\u00e3o sobre a conceitua\u00e7\u00e3o de Web Sem\u00e2ntica, entre dois  conceitos que por vez brigam entre si: o mais conhecido \u00e9 o proposto  por Tim Berners-Lee, que define a Web Sem\u00e2ntica como um ambiente onde \u201ca  informa\u00e7\u00e3o \u00e9 dada com um significado bem definido, permitindo melhor  intera\u00e7\u00e3o entre os computadores e as pessoas\u201d (BERNERS-LEE <em>et al<\/em>, 2001). O outro pode ser definido como \u201csem\u00e2ntica da Web\u201d, e trata da forma como escrevemos nossos c\u00f3digos, utilizando a <em>tag<\/em> correta no contexto correto para a qual ela foi criada.<!--more--><\/p>\n<p>Ambos os conceitos s\u00e3o muito semelhantes: buscam facilitar a  organiza\u00e7\u00e3o da informa\u00e7\u00e3o para a sua manipula\u00e7\u00e3o por m\u00e1quinas, mas\u2026 Com  exce\u00e7\u00e3o dos <em>bots<\/em> das m\u00e1quinas de busca e alguns poucos agentes,  escrever seu c\u00f3digo corretamente n\u00e3o ir\u00e1 fazer com que seus sites e  sistemas sejam reconhecidos automaticamente por estes. Um conceito n\u00e3o  exclui o outro, e s\u00e3o at\u00e9 complementares (ambos tratam de padr\u00f5es e  buscam a interoperabilidade), mas no fim das contas s\u00e3o completamente  diferentes entre si nos objetivos finais e nas t\u00e9cnicas de  desenvolvimento. Assim, aqui usarei sempre a nomenclatura Padr\u00f5es Web, e  estou dizendo sobre o desenvolvimento de <em>front-end<\/em> de  aplicativos Web, para evitar confus\u00f5es entre sem\u00e2ntica Web e Web  Sem\u00e2ntica (ou Web 3.0). Para saber mais sobre Web Sem\u00e2ntica, acesse o <a href=\"http:\/\/www.w3.org\/standards\/semanticweb\/\">site oficial<\/a> do assunto do <a title=\"World Wide Web Consortium\" rel=\"homepage\" href=\"http:\/\/www.w3.org\/\">W3C<\/a>, ou confira <a href=\"http:\/\/www.alexandrecolucci.com\/tag\/web-semantica\/\">outros artigos publicados neste blog<\/a>.<\/p>\n<p><strong>Por que codificar seguindo boas pr\u00e1ticas?<\/strong><\/p>\n<p>Ao desenvolver dentro dos Padr\u00f5es Web, a organiza\u00e7\u00e3o e a fun\u00e7\u00e3o dos  elementos XHTML \u00e9 um dos fatores essenciais na codifica\u00e7\u00e3o. Cada  elemento da p\u00e1gina exerce uma fun\u00e7\u00e3o (como t\u00edtulo, par\u00e1grafo,  formul\u00e1rio, divisor, lista etc.), definindo assim um \u201csignificado\u201d para  cada parte do layout.<\/p>\n<p>\u00c9 muito importante que os elementos estejam marcados corretamente, e \u00e9 \u00fatil por uma s\u00e9rie de motivos como:<\/p>\n<ul>\n<li>Reduzir o custo e a complexidade do desenvolvimento e manuten\u00e7\u00e3o;<\/li>\n<li>Aumentar a acessibilidade e a interoperabilidade;<\/li>\n<li>Permitir a indexa\u00e7\u00e3o eficiente do conte\u00fado pelos motores de busca;<\/li>\n<li>Reduzir o tamanho dos arquivos e o tempo de renderiza\u00e7\u00e3o do navegador;<\/li>\n<\/ul>\n<p>Entre diversos outros. Na medida em que formos avan\u00e7ando no guia,  voc\u00ea ver\u00e1 que \u00e9 muito mais l\u00f3gico desenvolver de acordo com os padr\u00f5es  do que utilizar milhares de gambiarras com tabelas.<\/p>\n<p><strong>O que s\u00e3o os Padr\u00f5es Web (Web Standards)?<\/strong><\/p>\n<p>Padr\u00f5es Web (ou <em>Web Standards<\/em>, em ingl\u00eas) s\u00e3o um conjunto de  normas, diretrizes, recomenda\u00e7\u00f5es, notas, artigos, tutoriais e afins de  car\u00e1ter t\u00e9cnico, produzidos pelo W3C, destinados a orientar  fabricantes, desenvolvedores e projetistas para o uso de pr\u00e1ticas que  possibilitem a cria\u00e7\u00e3o de uma Web acess\u00edvel a todos. Prev\u00ea o  desenvolvimento em camadas (informa\u00e7\u00e3o, formata\u00e7\u00e3o e comportamento), e  possui in\u00fameras vantagens: uniformidade, simplicidade, liberdade,  separa\u00e7\u00e3o de estrutura e apresenta\u00e7\u00e3o, facilidade de cria\u00e7\u00e3o e  manuten\u00e7\u00e3o, acessibilidade, extensibilidade, estabilidade etc. A lista \u00e9  crescente, e s\u00f3 \u00e9 percebida pelo desenvolvedor na medida em que ele os  utiliza no seu dia-a-dia.<\/p>\n<p>Eis como fica um trecho de c\u00f3digo <a title=\"HTML\" rel=\"wikipedia\" href=\"http:\/\/en.wikipedia.org\/wiki\/HTML\">HTML<\/a> desenvolvido com tabelas:<\/p>\n<pre>&lt;table cellspacing=\"0\" cellpadding=\"0\" width=\"500\"&gt;\n  &lt;tr&gt;\n    &lt;td width=\"200\"&gt;&lt;a href=\"produto.php?id=1\"&gt;TV LCD 22&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;font color=\"FF0000\"&gt;R$ 599,99&lt;\/font&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td width=\"200\"&gt;&lt;a href=\"produto.php?id=2\"&gt;TV LCD 40&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td bgcolor=\"#333333\"&gt;&lt;font color=\"FF0000\"&gt;R$ 999,99&lt;\/font&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td width=\"200\"&gt;&lt;a href=\"produto.php?id=3\"&gt;TV LCD 45&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;font color=\"FF0000\"&gt;R$ 1199,99&lt;\/font&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td width=\"200\"&gt;&lt;a href=\"produto.php?id=4\"&gt;TV Plasma 45&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;font color=\u201cFF0000\u201d&gt;R$ 1299,99&lt;\/font&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;<\/pre>\n<p>E o mesmo trecho equivalente nos Padr\u00f5es Web:<\/p>\n<pre>&lt;ul&gt;\n  &lt;li&gt;\n    &lt;a href=\"produto.php?id=1\"&gt;TV LCD 22&lt;\/a&gt; - R$ 599,99\n  &lt;\/li&gt;\n  &lt;li&gt;\n    &lt;a href=\"produto.php?id=2\"&gt;TV LCD 40&lt;\/a&gt; - R$ 999,99\n  &lt;\/li&gt;\n  &lt;li&gt;\n    &lt;a href=\"produto.php?id=3\"&gt;TV LCD 45&lt;\/a&gt; - R$ 1199,99\n  &lt;\/li&gt;\n  &lt;li&gt;\n    &lt;a href=\"produto.php?id=4\"&gt;TV Plasma 45&lt;\/a&gt; - R$ 1299,99\n  &lt;\/li&gt;\n&lt;\/ul&gt;<\/pre>\n<p>Imagine agora o HTML acima programado em <a title=\"PHP\" rel=\"wikipedia\" href=\"http:\/\/en.wikipedia.org\/wiki\/PHP\">PHP<\/a> para acessar uma tabela em um banco de dados qualquer:<\/p>\n<pre>&lt;table cellspacing=\"0\" cellpadding=\"0\" width=\"500\"&gt;\n&lt;? foreach ($produtos as $produto) { ?&gt;\n  &lt;tr&gt;\n    &lt;td width=\"200\"&gt;\n      &lt;a href=\"produto.php?id=&lt;?=$produto[0];?&gt;\"&gt;\n        &lt;?=$produto[1];?&gt;\n      &lt;\/a&gt;\n    &lt;\/td&gt;\n    &lt;td bgcolor=\"#333333\"&gt;\n      &lt;span&gt; - R$ &lt;?=$produto[2];?&gt;&lt;\/span&gt;\n    &lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;? } ?&gt;\n&lt;\/table&gt;<\/pre>\n<p>Veja o mesmo c\u00f3digo nos Padr\u00f5es Web:<\/p>\n<pre>&lt;ul&gt;\n&lt;? foreach ($produtos as $produto) { ?&gt;\n  &lt;li&gt;\n    &lt;a href=\"produto.php?id=&lt;?=$produto[0];?&gt;\"&gt;\n      &lt;?=$produto[1];?&gt;\n    &lt;\/a&gt;\n    - R$ &lt;?=$produto[2];?&gt;\n  &lt;\/li&gt;\n&lt;? } ?&gt;\n&lt;\/ul&gt;<\/pre>\n<p>Compare os c\u00f3digos na programa\u00e7\u00e3o final. O segundo \u00e9 infinitamente  mais leg\u00edvel, ocupa menos espa\u00e7o em bytes e requer muito menos  processamento do computador (e olha que o c\u00f3digo em HTML nem est\u00e1 t\u00e3o  \u201csujo\u201d assim\u2026). Precisa falar mais?<\/p>\n<p><strong>A sem\u00e2ntica dos elementos<\/strong><\/p>\n<p>Como foi dito anteriormente, a fun\u00e7\u00e3o de cada elemento no XHTML \u00e9 um  dos fatores essenciais na codifica\u00e7\u00e3o. Cada um deles tem um prop\u00f3sito  espec\u00edfico e, al\u00e9m de n\u00e3o fazer sentido, \u00e9 completamente errado seu uso  para outros prop\u00f3sitos. O caso cl\u00e1ssico \u00e9 o das tabelas: durante muito  tempo (at\u00e9 hoje na verdade, n\u00e3o me canso de ver sites e aplicativos  usando e abusando de tabelas) elas foram utilizadas como suportes para o  <em>layout<\/em>.<\/p>\n<p>Existe um grande motivo para que tal bizarrice: a cl\u00e1ssica incompatibilidade e limita\u00e7\u00e3o dos navegadores na renderiza\u00e7\u00e3o de <em>layouts <\/em>complexos.  Mas isso foi h\u00e1 mais de d\u00e9cada atr\u00e1s, quando o Nestcape dominava o  mercado e a Microsoft nem dava muita bola para o novo meio. O HTML era  somente uma linguagem simples de publica\u00e7\u00e3o de documentos, e poucos  pensaram que a Web se transformaria no meio de comunica\u00e7\u00e3o multim\u00eddia  que hoje conhecemos.<\/p>\n<p>A estrutura de elabora\u00e7\u00e3o do HTML consiste em instru\u00e7\u00f5es no conte\u00fado do documento, atrav\u00e9s de marcas de in\u00edcio e fim (<em>tags<\/em>)  definindo trechos do conte\u00fado, mediante as quais se determina a  formata\u00e7\u00e3o do texto, imagens e demais elementos que o comp\u00f5em. O HTML se  esgotou justamente por conta da confus\u00e3o que faz na elabora\u00e7\u00e3o de seus  documentos, n\u00e3o distinguindo os dados de marca\u00e7\u00e3o da pr\u00f3pria informa\u00e7\u00e3o  contida no documento.<\/p>\n<p>Nesses tempos her\u00f3icos, o uso de tabelas n\u00e3o s\u00f3 era massivo, como  tamb\u00e9m incentivado, como podemos conferir na \u201cp\u00e9rola\u201d a seguir:<\/p>\n<blockquote><p>As tabelas s\u00e3o parte integrante do HTML. Ao definir uma  grade de linhas e colunas, pode-se alinhar sistematicamente os itens. O  exemplo mais simples de uma tabela \u00e9 colocar o material em duas ou mais  colunas. (GOLDING; WHITE, p.125).<\/p><\/blockquote>\n<p>Em 1997 fazia muito sentido codificar com tabelas, at\u00e9 porque n\u00e3o  havia outro jeito mesmo. Que atire a primeira pedra quem tem mais de 10  anos de desenvolvimento Web e n\u00e3o usou NENHUMA tabela para montar <em>layouts<\/em>. Mas, faz\u00ea-lo em 2011 mostra uma extrema ignor\u00e2ncia, para n\u00e3o dizer coisa pior.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Refer\u00eancias bibliogr\u00e1ficas:<\/strong><\/p>\n<p>FERRAZ, Ronaldo. <strong>Construindo sites com Padr\u00f5es Web<\/strong>.\u00a0 Dispon\u00edvel em: <a href=\"http:\/\/kb.reflectivesurface.com\/br\/artigos\/sitesComPadroesWeb\">http:\/\/kb.reflectivesurface.com\/br\/artigos\/sitesComPadroesWeb<\/a>. Acesso em 25 mar. 2010.<\/p>\n<p>FERREIRA, Elcio. <strong>Produtividade Web 2.0<\/strong>: como ser produtivo desenvolvendo para Web. Dispon\u00edvel em: <a href=\"http:\/\/visie.com.br\/\">http:\/\/visie.com.br<\/a>. Acesso em 5 jun. 2008.<\/p>\n<p>GOLDING, Mordy; WHITE, Dave. <strong>Guia de cores para Web Designers<\/strong>. S\u00e3o Paulo: Quark, 1997.<\/p>\n<p>WASP. <strong>The Web Standards Project<\/strong>. Dispon\u00edvel em: <a href=\"http:\/\/www.webstandards.org\/\">http:\/\/www.webstandards.org<\/a>. Acesso em 25 mar. 2010.<\/p>\n<p>WORLD WIDE WEB CONSORTIUM. <strong>XHTML2 Working Group Home Page<\/strong>. Dispon\u00edvel em: <a href=\"http:\/\/www.w3.org\/MarkUp\">http:\/\/www.w3.org\/MarkUp<\/a>. Acesso em 10 mar. 2010.<\/p>\n<p><strong>Leia tamb\u00e9m:<\/strong><\/p>\n<ul class=\"zemanta-article-ul\">\n<li class=\"zemanta-article-ul-li\"><a href=\"http:\/\/blogs.msdn.com\/ie\/archive\/2010\/03\/05\/W3C-HTML-Working-Group-Publishes-New-Drafts.aspx\">W3C HTML Working Group Publishes New Drafts<\/a> (blogs.msdn.com)<\/li>\n<li class=\"zemanta-article-ul-li\"><a href=\"http:\/\/www.xconomy.com\/boston\/2010\/03\/10\/world-wide-web-consortium-must-seize-high-ground-on-web-standards-earlier-says-new-ceo-jeffrey-jaffe\/\">World Wide Web Consortium Must Seize High Ground on Web Standards Earlier, Says New CEO Jeffrey Jaffe<\/a> (xconomy.com)<\/li>\n<li class=\"zemanta-article-ul-li\"><a href=\"http:\/\/news.cnet.com\/8301-30685_3-20000783-264.html?part=rss&amp;subj=Webware\">Microsoft bolsters Web-accessible data plan<\/a> (news.cnet.com)<\/li>\n<\/ul>\n<div id=\"_mcePaste\" class=\"mcePaste\" style=\"position:absolute;left:-10000px;top:2200px;width:1px;height:1px;overflow:hidden;\">\n<p>Existe uma confus\u00e3o sobre a conceitua\u00e7\u00e3o de Web Sem\u00e2ntica, entre dois  conceitos que por vez brigam entre si: o mais conhecido \u00e9 o proposto  por Tim Berners-Lee, que define a Web Sem\u00e2ntica como um ambiente onde \u201ca  informa\u00e7\u00e3o \u00e9 dada com um significado bem definido, permitindo melhor  intera\u00e7\u00e3o entre os computadores e as pessoas\u201d (BERNERS-LEE <em>et al<\/em>, 2001). O outro pode ser definido como \u201csem\u00e2ntica da Web\u201d, e trata da forma como escrevemos nossos c\u00f3digos, utilizando a <em>tag<\/em> correta no contexto correto para a qual ela foi criada.<\/p>\n<p>Ambos os conceitos s\u00e3o muito semelhantes: buscam facilitar a  organiza\u00e7\u00e3o da informa\u00e7\u00e3o para a sua manipula\u00e7\u00e3o por m\u00e1quinas, mas\u2026 Com  exce\u00e7\u00e3o dos <em>bots<\/em> das m\u00e1quinas de busca e alguns poucos agentes,  escrever seu c\u00f3digo corretamente n\u00e3o ir\u00e1 fazer com que seus sites e  sistemas sejam reconhecidos automaticamente por estes. Um conceito n\u00e3o  exclui o outro, e s\u00e3o at\u00e9 complementares (ambos tratam de padr\u00f5es e  buscam a interoperabilidade), mas no fim das contas s\u00e3o completamente  diferentes entre si nos objetivos finais e nas t\u00e9cnicas de  desenvolvimento. Assim, aqui usarei sempre a nomenclatura Padr\u00f5es Web, e  estou dizendo sobre o desenvolvimento de <em>front-end<\/em> de  aplicativos Web, para evitar confus\u00f5es entre sem\u00e2ntica Web e Web  Sem\u00e2ntica (ou Web 3.0). Para saber mais sobre Web Sem\u00e2ntica, acesse o <a href=\"http:\/\/www.w3.org\/standards\/semanticweb\/\">site oficial<\/a> do assunto do <a class=\"zem_slink\" title=\"World Wide Web Consortium\" rel=\"homepage\" href=\"http:\/\/www.w3.org\/\">W3C<\/a>, ou confira <a href=\"http:\/\/www.alexandrecolucci.com\/tag\/web-semantica\/\">outros artigos publicados neste blog<\/a>.<\/p>\n<p><strong>Por que codificar seguindo boas pr\u00e1ticas?<\/strong><\/p>\n<p>Ao desenvolver dentro dos Padr\u00f5es Web, a organiza\u00e7\u00e3o e a fun\u00e7\u00e3o dos  elementos XHTML \u00e9 um dos fatores essenciais na codifica\u00e7\u00e3o. Cada  elemento da p\u00e1gina exerce uma fun\u00e7\u00e3o (como t\u00edtulo, par\u00e1grafo,  formul\u00e1rio, divisor, lista etc.), definindo assim um \u201csignificado\u201d para  cada parte do layout.<\/p>\n<p>\u00c9 muito importante que os elementos estejam marcados corretamente, e \u00e9 \u00fatil por uma s\u00e9rie de motivos como:<\/p>\n<ul>\n<li>Reduzir o custo e a complexidade do desenvolvimento e manuten\u00e7\u00e3o;<\/li>\n<li>Aumentar a acessibilidade e a interoperabilidade;<\/li>\n<li>Permitir a indexa\u00e7\u00e3o eficiente do conte\u00fado pelos motores de busca;<\/li>\n<li>Reduzir o tamanho dos arquivos e o tempo de renderiza\u00e7\u00e3o do navegador;<\/li>\n<\/ul>\n<p>Entre diversos outros. Na medida em que formos avan\u00e7ando no guia,  voc\u00ea ver\u00e1 que \u00e9 muito mais l\u00f3gico desenvolver de acordo com os padr\u00f5es  do que utilizar milhares de gambiarras com tabelas.<\/p>\n<p><strong>O que s\u00e3o os Padr\u00f5es Web (Web Standards)?<\/strong><\/p>\n<p>Padr\u00f5es Web (ou <em>Web Standards<\/em>, em ingl\u00eas) s\u00e3o um conjunto de  normas, diretrizes, recomenda\u00e7\u00f5es, notas, artigos, tutoriais e afins de  car\u00e1ter t\u00e9cnico, produzidos pelo W3C, destinados a orientar  fabricantes, desenvolvedores e projetistas para o uso de pr\u00e1ticas que  possibilitem a cria\u00e7\u00e3o de uma Web acess\u00edvel a todos. Prev\u00ea o  desenvolvimento em camadas (informa\u00e7\u00e3o, formata\u00e7\u00e3o e comportamento), e  possui in\u00fameras vantagens: uniformidade, simplicidade, liberdade,  separa\u00e7\u00e3o de estrutura e apresenta\u00e7\u00e3o, facilidade de cria\u00e7\u00e3o e  manuten\u00e7\u00e3o, acessibilidade, extensibilidade, estabilidade etc. A lista \u00e9  crescente, e s\u00f3 \u00e9 percebida pelo desenvolvedor na medida em que ele os  utiliza no seu dia-a-dia.<\/p>\n<p>Eis como fica um trecho de c\u00f3digo <a class=\"zem_slink\" title=\"HTML\" rel=\"wikipedia\" href=\"http:\/\/en.wikipedia.org\/wiki\/HTML\">HTML<\/a> desenvolvido com tabelas:<\/p>\n<pre>&lt;table cellspacing=\"0\" cellpadding=\"0\" width=\"500\"&gt;\n  &lt;tr&gt;\n    &lt;td width=\"200\"&gt;&lt;a href=\"produto.php?id=1\"&gt;TV LCD 22&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;font color=\"FF0000\"&gt;R$ 599,99&lt;\/font&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td width=\"200\"&gt;&lt;a href=\"produto.php?id=2\"&gt;TV LCD 40&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td bgcolor=\"#333333\"&gt;&lt;font color=\"FF0000\"&gt;R$ 999,99&lt;\/font&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td width=\"200\"&gt;&lt;a href=\"produto.php?id=3\"&gt;TV LCD 45&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;font color=\"FF0000\"&gt;R$ 1199,99&lt;\/font&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td width=\"200\"&gt;&lt;a href=\"produto.php?id=4\"&gt;TV Plasma 45&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;font color=\u201cFF0000\u201d&gt;R$ 1299,99&lt;\/font&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;<\/pre>\n<p>E o mesmo trecho equivalente nos Padr\u00f5es Web:<\/p>\n<pre>&lt;ul&gt;\n  &lt;li&gt;\n    &lt;a href=\"produto.php?id=1\"&gt;TV LCD 22&lt;\/a&gt; - R$ 599,99\n  &lt;\/li&gt;\n  &lt;li&gt;\n    &lt;a href=\"produto.php?id=2\"&gt;TV LCD 40&lt;\/a&gt; - R$ 999,99\n  &lt;\/li&gt;\n  &lt;li&gt;\n    &lt;a href=\"produto.php?id=3\"&gt;TV LCD 45&lt;\/a&gt; - R$ 1199,99\n  &lt;\/li&gt;\n  &lt;li&gt;\n    &lt;a href=\"produto.php?id=4\"&gt;TV Plasma 45&lt;\/a&gt; - R$ 1299,99\n  &lt;\/li&gt;\n&lt;\/ul&gt;<\/pre>\n<p>Imagine agora o HTML acima programado em <a class=\"zem_slink\" title=\"PHP\" rel=\"wikipedia\" href=\"http:\/\/en.wikipedia.org\/wiki\/PHP\">PHP<\/a> para acessar uma tabela em um banco de dados qualquer:<\/p>\n<pre>&lt;table cellspacing=\"0\" cellpadding=\"0\" width=\"500\"&gt;\n&lt;? foreach ($produtos as $produto) { ?&gt;\n  &lt;tr&gt;\n    &lt;td width=\"200\"&gt;\n      &lt;a href=\"produto.php?id=&lt;?=$produto[0];?&gt;\"&gt;\n        &lt;?=$produto[1];?&gt;\n      &lt;\/a&gt;\n    &lt;\/td&gt;\n    &lt;td bgcolor=\"#333333\"&gt;\n      &lt;span class=\"preco\"&gt; - R$ &lt;?=$produto[2];?&gt;&lt;\/span&gt;\n    &lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;? } ?&gt;\n&lt;\/table&gt;<\/pre>\n<p>Veja o mesmo c\u00f3digo nos Padr\u00f5es Web:<\/p>\n<pre>&lt;ul&gt;\n&lt;? foreach ($produtos as $produto) { ?&gt;\n  &lt;li&gt;\n    &lt;a href=\"produto.php?id=&lt;?=$produto[0];?&gt;\"&gt;\n      &lt;?=$produto[1];?&gt;\n    &lt;\/a&gt;\n    - R$ &lt;?=$produto[2];?&gt;\n  &lt;\/li&gt;\n&lt;? } ?&gt;\n&lt;\/ul&gt;<\/pre>\n<p>Compare os c\u00f3digos na programa\u00e7\u00e3o final. O segundo \u00e9 infinitamente  mais leg\u00edvel, ocupa menos espa\u00e7o em bytes e requer muito menos  processamento do computador (e olha que o c\u00f3digo em HTML nem est\u00e1 t\u00e3o  \u201csujo\u201d assim\u2026). Precisa falar mais?<\/p>\n<p><strong>A sem\u00e2ntica dos elementos<\/strong><\/p>\n<p>Como foi dito anteriormente, a fun\u00e7\u00e3o de cada elemento no XHTML \u00e9 um  dos fatores essenciais na codifica\u00e7\u00e3o. Cada um deles tem um prop\u00f3sito  espec\u00edfico e, al\u00e9m de n\u00e3o fazer sentido, \u00e9 completamente errado seu uso  para outros prop\u00f3sitos. O caso cl\u00e1ssico \u00e9 o das tabelas: durante muito  tempo (at\u00e9 hoje na verdade, n\u00e3o me canso de ver sites e aplicativos  usando e abusando de tabelas) elas foram utilizadas como suportes para o  <em>layout<\/em>.<\/p>\n<p>Existe um grande motivo para que tal bizarrice: a cl\u00e1ssica incompatibilidade e limita\u00e7\u00e3o dos navegadores na renderiza\u00e7\u00e3o de <em>layouts <\/em>complexos.  Mas isso foi h\u00e1 mais de d\u00e9cada atr\u00e1s, quando o Nestcape dominava o  mercado e a Microsoft nem dava muita bola para o novo meio. O HTML era  somente uma linguagem simples de publica\u00e7\u00e3o de documentos, e poucos  pensaram que a Web se transformaria no meio de comunica\u00e7\u00e3o multim\u00eddia  que hoje conhecemos.<\/p>\n<p>A estrutura de elabora\u00e7\u00e3o do HTML consiste em instru\u00e7\u00f5es no conte\u00fado do documento, atrav\u00e9s de marcas de in\u00edcio e fim (<em>tags<\/em>)  definindo trechos do conte\u00fado, mediante as quais se determina a  formata\u00e7\u00e3o do texto, imagens e demais elementos que o comp\u00f5em. O HTML se  esgotou justamente por conta da confus\u00e3o que faz na elabora\u00e7\u00e3o de seus  documentos, n\u00e3o distinguindo os dados de marca\u00e7\u00e3o da pr\u00f3pria informa\u00e7\u00e3o  contida no documento.<\/p>\n<p>Nesses tempos her\u00f3icos, o uso de tabelas n\u00e3o s\u00f3 era massivo, como  tamb\u00e9m incentivado, como podemos conferir na \u201cp\u00e9rola\u201d a seguir:<\/p>\n<blockquote><p>As tabelas s\u00e3o parte integrante do HTML. Ao definir uma  grade de linhas e colunas, pode-se alinhar sistematicamente os itens. O  exemplo mais simples de uma tabela \u00e9 colocar o material em duas ou mais  colunas. (GOLDING; WHITE, p.125).<\/p><\/blockquote>\n<p>Em 1997 fazia muito sentido codificar com tabelas, at\u00e9 porque n\u00e3o  havia outro jeito mesmo. Que atire a primeira pedra quem tem mais de 10  anos de desenvolvimento Web e n\u00e3o usou NENHUMA tabela para montar <em>layouts<\/em>. Mas, faz\u00ea-lo em 2010 mostra uma extrema ignor\u00e2ncia, para n\u00e3o dizer coisa pior.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Existe uma confus\u00e3o sobre a conceitua\u00e7\u00e3o de Web Sem\u00e2ntica, entre dois conceitos que por vez brigam entre si: o mais conhecido \u00e9 o proposto por Tim Berners-Lee, que define a Web Sem\u00e2ntica como um ambiente onde \u201ca informa\u00e7\u00e3o \u00e9 dada com um significado bem definido, permitindo melhor intera\u00e7\u00e3o entre os computadores e as pessoas\u201d (BERNERS-LEE &hellip; <a href=\"https:\/\/leonardocotta.com.br\/?p=231\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Padr\u00f5es Web, sem\u00e2ntica da Web e Web Sem\u00e2ntica<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[20,32],"tags":[95,105,138,200,254,270,271,275,277,280,283,284],"class_list":["post-231","post","type-post","status-publish","format-standard","hentry","category-programacao","category-web-semantica","tag-css","tag-design-de-interface","tag-html","tag-padroes-web","tag-style-sheets","tag-w3c","tag-web","tag-web-development","tag-web-patterns","tag-web-standards","tag-world-wide-web","tag-xhtml"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=\/wp\/v2\/posts\/231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=231"}],"version-history":[{"count":0,"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=\/wp\/v2\/posts\/231\/revisions"}],"wp:attachment":[{"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}