O objetivo deste texto n\u00e3o \u00e9 ser uma verdade absoluta, tampouco pretendo abordar todos os m\u00ednimos detalhes do tema a ser discutido, pois, provavelmente poderia ser escrita toda uma cole\u00e7\u00e3o de livros e ainda assim n\u00e3o abordaria-se todas as min\u00facias de um tema t\u00e3o complexo.<\/p>\n
Observa\u00e7\u00e3o: Eu posso estar errado.<\/p>\n
As melhores pessoas para falarem sobre tableless \u00e9 o pessoal do Tableless.com.br<\/a>, por isso, n\u00e3o acredite em nada do que est\u00e1 escrito abaixo e s\u00f3 acredite neles quando se tratar deste assunto.<\/p>\n Ao contr\u00e1rio do que pode parecer, uma p\u00e1gina tableless n\u00e3o \u00e9 uma p\u00e1gina totalmente sem<\/strong> tabelas, e sim, uma p\u00e1gina com Por qu\u00ea? Porque dessa forma os browsers n\u00e3o PC<\/acronym><\/em> v\u00e3o rederizar o conte\u00fado de forma intelig\u00edvel mesmo que as tabelas se percam na renderiza\u00e7\u00e3o. Tamb\u00e9m porque alguns browsers antigos (todas as vers\u00f5es do Internet Exploder inclu\u00eddas) precisam baixar todo o conte\u00fado da tabela antes de exibi-la, ou seja, se todo o seu layout est\u00e1 dentro de uma tabela, o browser s\u00f3 vai exibir o conte\u00fado depois de baixar tudo, imagens, texto, anima\u00e7\u00f5es etc<\/abbr>.<\/p>\n _ Podre isso n\u00e9?<\/em><\/p>\n Nem tanto, pois, lembre-se, as Tamb\u00e9m faz parte desse "movimento" a utiliza\u00e7\u00e3o das tags para o que elas foram projetadas, por exemplo, se voc\u00ea tem um t\u00edtulo, use: _ Mas por qu\u00ea isso, pra qu\u00ea esse fundamentalismo todo em volta dos webstandards?<\/em><\/p>\n Xiita? Eu? Qu\u00ea isso! Um dos motivos é que os arquivos ficam muito<\/strong> menores, podendo chegar a menos da metade do tamanho do arquivo não tableless. A redução é de alguns KB<\/abbr>, mas em um site como o UOL<\/acronym> ou Terra essa redução aparentemente insignificante pode traduzir-se em dezenas de terabytes<\/strong> economizados! Para ver mais exemplos como este veja os estudos de caso<\/a> do Tableless.com.br<\/a>.<\/p>\n Outro motivo é que marcados semânticamente, um browser n\u00e3o visual – como um leitor de tela ou um rob\u00f4 de busca – vai saber o que fazer com o texto que est\u00e1 com marca\u00e7\u00e3o semanticamente correta (conceitos de Semantic Web<\/em> [Web Sem\u00e2ntica]). Por exemplo, um leitor de tela ao inv\u00e9s de ler WYSIWYG<\/acronym> – o que seria um verdadeiro caos – l\u00ea "What You See Is What You Get<\/em>" se seu acr\u00f4nimo estiver marcado assim: E n\u00e3o \u00e9 s\u00f3 isso, um rob\u00f4 de busca – Google por exemplo – pode colocar em seu banco de dados que sua p\u00e1gina tem a express\u00e3o "What You See Is What You Get<\/em>" no seu conte\u00fado caso voc\u00ea use o A publicidade gratuita dos sites de procura \u00e9 muito preciosa e n\u00e3o pode ser desperdi\u00e7ada. Um texto marcado com _ Mas afinal, qual a diferen\u00e7a entre acr\u00f4nimo e abrevia\u00e7\u00e3o? Ou qual a diferen\u00e7a entre abrevia\u00e7\u00e3o e acr\u00f4nimo?<\/em><\/p>\n Bem, eu quebrei bastante minha cabe\u00e7a para compreender isso… Acr\u00f4nimo<\/dfn> \u00e9 uma sequ\u00eancia de letras que s\u00e3o lidas normalmente e representam v\u00e1rias palavras, como o j\u00e1 citado WYSIWYG<\/acronym><\/acronym> ou IE<\/acronym>, W3C<\/acronym>, GNU<\/acronym>, Linux<\/acronym>, WinAmp<\/acronym>. Nem sempre precisam ser todas mai\u00fascilas, tampouco \u00e9 regra que seja apenas uma letra de cada palavra, pode ser mais de uma letra como em WinAmp<\/acronym>, por exemplo, o importante \u00e9 que seu acr\u00f4nimo represente mais de uma palavra. Abrevia\u00e7\u00e3o<\/dfn> \u00e9 um modo reduzido de escrever uma palavra, como ex<\/abbr>, Ms<\/abbr>, Win<\/abbr>, site<\/abbr>, fone<\/abbr>, Br<\/abbr>, end<\/abbr> etc<\/abbr>.<\/p>\n _ Beleza, marquei meu texto todo seguindo os padr\u00f5es, tudo lindo e cheio de tags malucas, mas e agora? T\u00e1 tudo feio e monocrom\u00e1tico aqui no meu browser super moderno que aceita at\u00e9 applet Java! Deixa eu colocar tudo em um applet Java com uma reflex\u00e3o bem linda e um super movimento bem legal?<\/em><\/p>\n N\u00e3o fa\u00e7a isso, pelo amor de Deus, applet Java ningu\u00e9m merece. Java \u00e9 lento<\/dfn><\/strong>.<\/p>\n Bem, sua palavra chave \u00e9: CSS<\/acronym>! Sim, as tais das folhas de estilo<\/dfn>, \u00e9 com elas que voc\u00ea vai formatar todo o seu conte\u00fado. Voc\u00ea quer que seu t\u00edtulo seja roxo e com uma linda borda verde lim\u00e3o? Voc\u00ea quer que os itens da lista do seu menu esteja todo em apenas uma linha l\u00e1 no canto direito na p\u00e1gina? Voc\u00ea quer que todas os seus acr\u00f4nimos apare\u00e7am em fonte Comic Sans<\/em> com o fundo prateado? Voc\u00ea quer que as suas cita\u00e7\u00f5es estejam em it\u00e1lico e com tamanho 20% maior que o resto do texto? Tudo isso e muito<\/strong> mais pode ser feito via CSS<\/acronym>, voc\u00ea nem tem id\u00e9ia do que estas tr\u00eas letras podem fazer na sua vida… Mais poderosa que elas s\u00f3 Jesus Cristo*.<\/p>\n Como j\u00e1 foi dito, aprenda mais visitando Tableless.com.br<\/a> e v\u00e1 tamb\u00e9m ao W3C<\/acronym><\/a>, se quiser ver exemplos do poder do CSS<\/acronym> veja o CSS<\/acronym> Zen Garden<\/a>. A prop\u00f3sito, deus<\/a> sempre pode te ajudar nessa busca por conhecimento.<\/p>\n Boa sorte pequeno gafanhoto.<\/p>\n * Exagero expl\u00edcito e exageradamente for\u00e7ado.<\/p>\n","protected":false},"excerpt":{"rendered":" O objetivo deste texto n\u00e3o \u00e9 ser uma verdade absoluta, tampouco pretendo abordar todos os m\u00ednimos detalhes do tema a<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,35,1,47],"tags":[125,119,88,102,84,89,94,104,147,103,43],"class_list":["post-9","post","type-post","status-publish","format-standard","hentry","category-article","category-development","category-others","category-technology","tag-app","tag-arte","tag-conceito","tag-direito","tag-eco","tag-google","tag-internet","tag-lei","tag-terra","tag-web","tag-xhtml"],"_links":{"self":[{"href":"https:\/\/marcogomes.com\/blog\/wp-json\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marcogomes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marcogomes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marcogomes.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcogomes.com\/blog\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":1,"href":"https:\/\/marcogomes.com\/blog\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"predecessor-version":[{"id":1269,"href":"https:\/\/marcogomes.com\/blog\/wp-json\/wp\/v2\/posts\/9\/revisions\/1269"}],"wp:attachment":[{"href":"https:\/\/marcogomes.com\/blog\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcogomes.com\/blog\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcogomes.com\/blog\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<table><\/code> para construir tabelas de dados e <div><\/code> para construir divis\u00f5es de conte\u00fado.<\/p>\n<table><\/code> foram feitas para formatar tabelas de dados – como pre\u00e7os de produtos, ou os ramais e os funcion\u00e1rios dos departamentos de uma certa empresa, logo, \u00e9 aceit\u00e1vel que o browser baixe tudo antes de exibir, para n\u00e3o confundir o usu\u00e1rio com informa\u00e7\u00f5es "incompletas".<\/p>\n<h1><\/code>, se voc\u00ea tem um subt\u00edtulo: <h2><\/code>, <h3><\/code>, <h4><\/code> e assim por diante. Se voc\u00ea tem uma lista de itens – um Menu, por exemplo -, use: <ul><\/code> ou <ol><\/code> e <li><\/code> para cada item. Se vai formatar uma lista de defini\u00e7\u00f5es: <dl><\/code>, <dt><\/code>, <dd><\/code>. Se voc\u00ea vai escrever uma defini\u00e7\u00e3o: <dfn><\/code>, uma abrevia\u00e7\u00e3o: <abbr><\/code>, um acr\u00f4nimo: <acronym><\/code>, uma cita\u00e7\u00e3o: <cite><\/code>, um c\u00f3digo computacional: <code><\/code> e de forma semelhante existem dezenas de tags espec\u00edficas para cada tipo dee conte\u00fado, o melhor mesmo \u00e9 estudar a documenta\u00e7\u00e3o do HTML<\/acronym> 4.01 do W3C<\/acronym><\/a>. Estes padr\u00f5es \u00e9 o que chamamos de webstandards<\/dfn>.<\/p>\n<acronym title="What You See Is What You Get">WYSIWYG<\/acronym><\/acronym><\/code>.<\/p>\n<acronym><\/code>, se voc\u00ea n\u00e3o usar essa tag ele simplesmente n\u00e3o vai saber que WYSIWYG<\/acronym> tem o mesmo significado. Isso implica que, se algu\u00e9m procura por WYSIWYG<\/acronym>, seu site vai aparecer no resultado, por\u00e9m, se algu\u00e9m procura por "What You See Is What You Get<\/em>", bem, a\u00ed sua p\u00e1gina rodou<\/em>, voc\u00ea n\u00e3o estar\u00e1 no resultado.<\/p>\n<h1><\/code> por exemplo, recebe um escore muito maior que um marcado com <p><\/code>. No futuro, com a populariza\u00e7\u00e3o da Semantic Web<\/em>, poderemos criar mecanismos de busca espec\u00edficos, como, por exemplo, um que procure apenas pela defini\u00e7\u00e3o de "opr\u00f3brio<\/em>", ou ent\u00e3o pelo significado da abrevia\u00e7\u00e3o LTDA<\/abbr>.<\/p>\n