Esta é minha lista de artigos com a tag "tableless"

Leia o Tableless

Por: Henrique Costa PereiraThursday 25 June 2009 às 19:25

Caramba, escrevendo algumas coisas pra um curso que estou preparando para dar em Uberlândia sobre padrões web, me veio uma baita nostalgia de quando eu aprendi o caminho do bem com HTML e CSS. Então eu tinha que escrever este texto em homenagem ao Tableless.

Para quem não conhece o Tableless (se você é leitor desse blog é difícil não conhecê-los) é o site de Diego Eis e Elcio Ferreira sobre padrões web. Só isso. Os caras começaram a compartilhar informações em uma época escassa de material em português e faziam o maior sucesso entre os nerds emergentes (putz..) que queriam aprender na raça a escrever HTML e CSS de forma decente. Se a moda lá fora era o CSS Zen Garden (lembram disso?), a moda no Brasil era o Tableless.

Tenho o maior carinho e respeito por este site que foi grande fonte de inspiração pra eu começar a blogar. Tanto o Tableless como o Bruno Torres (meu comentarista de eventos preferido do Twitter) foram minhas principais fontes pra aprender a escrever código direito em 2004. Já conheci os caras pessoalmente (com exceção do Elcio) e cheguei a ser um dos professores dos cursos de HTML básico e Microformats da Visie por uns tempos. A Visie por sua vez é a empresa de treinamentos web fundada pelos caras, e que eu indico até hoje se você quiser fazer um curso e aprender o caminho do bem de forma mais suave.

O Tabless, na história dos padrões web no Brasil tem seu pé cravado, responsável por ensinar uma pancada de moleques por este país a parar de usar tabelas pra montar layouts. E se você está dando seus primeiros passos, é lá (e não aqui) que você tem que começar. Aqui tem muita coisa também, mas o acervo do Tableless é muito maior.

Abraço ao Diego e ao Elcio e vida longa ao Tableless.

Fórum Tableless

Por: Henrique Costa PereiraFriday 15 September 2006 às 13:15

Pessoal, o Diego Eis andou fazendo algumas benfeitorias no Fórum Tableless (na verdade foi o Bruno quem fez, hehehe) muito interessantes e tem muito conteúdo bom lá, principalmente para o pessoal que está começando. Eu achei até que este fórum tinha sido desativado, mas é que ele ficou um pouco largadão por um tempo. Se você tem muitas dúvidas, veja a quantidade de assuntos e questões que já foram resolvidas por lá.

Quem ainda não conhece o Fórum, dê uma navegada por lá para conferir. Vez ou outra você talvez até encontrará o Diego, o Elcio, o Bruno Torres…

A semântica do span e do div

Por: Henrique Costa PereiraMonday 14 August 2006 às 07:14

Recentemente me deparei com uma nota publicada no Berea Street que me fez lembrar de um grande dilema que assombra muitos desenvolvedores iniciantes (e outros não tão iniciantes assim). Qual o significado semântico das tags <div> e <span>? Este é um assunto delicado que só os bem iniciados no assunto deveriam participar. De qualquer maneira sua contribuição para esta discussão será muito bem vinda. Vamos então aos fatos.

A W3C define div e span da seguinte maneira:

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

Elementos de bloco podem conter elementos inline e outros elementos de bloco. Elementos inline devem conter apenas dados, (textos propriamente dito) e outros elementos inline. Inerente a este distinção estrutural temos a idéia de que elementos de bloco criam estruturas maiores do que os elementos inline. Ou seja, tanto o div quanto o span são elementos estruturais (generic mechanism for adding structure to documents) em seus respectivos contextos. Até aqui nada demais.

Como escreve Lachlan Hunt e o Roger Johansson endossa, basicamente o span e o div são elementos estruturais com o propósito de aplicar "semântica autoral" onde não há nenhum outro elemento semântico disponível. Ou seja, se você possuiu um conjunto de elementos que precisam ser agrupados (como header e footer por exemplo), o div é a tag estrutural específica para isso. Este é o princípio semântico.

Por "semântica autoral" ("author-defined semantics" nas palavras dele), Lachlan se refere ao tipo de semântica que se pode alcançar juntamente com atributos como o id e o class (Microformats te lembra alguma coisa?). Nesta altura você já deve saber utilizar class com semântica em mente, saber que nomes de classes podem ser utilizados para qualquer propósito que os user agents queiram inclusive com propósitos semânticos e tudo mais certo? Dúvidas em relação a isso, favor ler os referidos links.

Vai um dilema ai?

Para esquentar a discussão, em um outro texto sob o domínio da W3C sobre unordered lists (o que acaba fazendo uma referência ao famoso divless que eu acho tão semântico quanto fazer sites estruturados em tabelas), o autor Brian Hisman escreve em poucas palavras:

Elements such as <div> and <span> are semantically empty, implying no meaning other than grouping content into blocks.

Em outras palavras, <div> e <span> não possuem significado (são vazios em si) até que você dê um a eles. Por isso que a velha discussão de que um site tableless (que usa divs no lugar tabelas para estruturar um site) pode ser tão vazio semânticamente quanto um site estruturado com a tag font. Mesmo que estes elementos sejam vazios, não significa que devam continuar assim. Meu conselho é que você procure utilizar tag <div> em um contexto justificável em que você possa dar um significado junto com um atributo class igualmente justificável. Uma <div> (division) mais um atributo class="footer" pode ter bastante significado, e isso é óbvio para vocês também certo?

Tableless vs Web Standards

Por: Henrique Costa PereiraSunday 23 July 2006 às 13:23

<update:date="2006-07-27">
Dando continuidade ao debate pertinente sobre este assunto, o Diego Eis deixou sua contribuição com o texto quase homônimo em Web standards vs Tableless
</update>

Já faz muito tempo que não vejo uma discussão sobre esse assunto que na verdade eu sempre quis dar um pitaco. A discussão aqui trata-se sobre o que na prática cada um destes termos (tableless e web standards) representam na história recente da web e a forma com que eles se propagaram. Opiniões contrárias são muito bem vindas apesar que pretendo levantar tópicos mais históricos e objetivos e menos subjetivos.

Antes de começar, gostaria de dizer claramente (para os não iniciados no assunto) de que essa discussão trata-se da utilização dos termos “tableless” e “web standards” e não representa uma avaliação do site Tableless.com.br criado pelo Diego Eis e Elcio Ferreira que são amigos e estão do lado do bem da força (o melhor lado em que poderiam estar). Ou seja, isso não é um oposição ao nome do site deles (até eu queria ser dono desse domínio!) e sim ao falso conceito propagado sobre o termo “tableless“. Por isso sem comentários passionais, ok?

Tableless

O termo “tableless” (do inglês “sem tabelas“) foi criado em contrapartida a uma técnica antiga (e utilizada até hoje na verdade) para estruturar os sites utilizando-se tabelas para conseguir controlar a aparência dos elementos em um site. Em meados da década de 90 quando os browsers ainda não haviam implementado nada de CSS, todo o posicionamento dos elementos e a aparência deles era toda controlada através de marcação e delarações inline. A técnica de spacer (o uso de um gif transparente para empurrar elementos e deixá-los em um local específico) era amplamente utilizada. Naquela época era compreensível a utilização destas técnicas devido a ausencia de implementações de CSS nos browsers, considerando que o nível 1 do CSS foi publicado em 1996 e o nível 2 somente em 1998.

Antes disso então, todas as técnicas hoje consideradas sujas, eram verdadeiros macetes (e não gambiarras) para se alcançar o sucesso na web. Mesmo que desde o início o HTML não tivesse sido criado com estes propósitos, a necessidade e demanda por sites com design mais elaborado acabou fortalecendo muito a utilização dessas técnicas por muito tempo. Até as ferramentas de desenvolvimento foram aos poucos se adequando a esta metodologia de desenvolvimento o que acabou ficando conhecido como WYSIWYG.

Passados os anos e após praticamente todos os browsers em uso já tivessem implementado boa parte de CSS, os desenvolvedores continuaram por um tempo a criar sites como faziam anos atrás. O termo “tableless” então, surge em oposição a esta visão de desenvolvimento que utiliza tabelas (e não CSS) para estruturar e controlar a aparência de um site.

Web standards

Web standards é um termo mais amplo que refere-se aos padrões web como um todo e não somente as linguagens de marcação e CSS. Outra coisa importante é que “web standards” não é um termo de oposição como é o termo tableless, até mesmo porque ninguém defende racionalmente algo do tipo “não aos padrões web”.

A organização responsável por estes padrões é a famosa W3C e segui-los (web standards), nada mais é do que construir sites que sigam as especificações por eles propostas e implementada por desenvolvedores e pela industria mundial que está ao redor da web. Se você ainda está na fase de questionar a necessidade de “padrões” leia o texto “seguindo os padrões” do Diego Eis.

Este conceito de web standards envolve a utilização das diferentes tecnologias que constituem a web de forma que garanta a interoperabilidade da prórpia web como um todo. Isso envolve portanto um amplo conjunto de boas práticas para o desenvolmento web em diversas áreas que envolve linguagens de marcação (XML, HTML, XHTML), linguagens de apresentação (CSS), semântica (RDF), linguagens de comportamento (DOM), acessibilidade (WAI), protocolos (HTTP), mobile ( MWI) dentre outras. Em resumo, um site que segue os web standards preza pelos vários aspectos que o constitui e não somente o aspecto estrutural sobre usar <div> ou <table> no desenvolvimento de um site.

Tableless vs Web Standards

Acho que é neste ponto em que as diferênças se acentuam. E espero que você entenda a diferença entre os dois termos antes de qualquer avaliação dessa discussão. Algumas perguntas retóricas de exemplo vão demonstrar melhor essas diferenças.

Um profissional inexperiênte que nos dias de hoje sem conhecimentos mínimos de semântica mas que consegue a façanha de converter seu site feito em tabelas para algo cheio de divs (o cara consegue fazer uma convenção internacional de divs em uma única página) e utilizando CSS, significa que este site segue os padrões? Significa que ele é “tableless” simplesmente pelo fato de não utilizar tabelas para estruturar um site? Será que somente pelo fato do cara não utilizar tabelas mas coloca uma div com uma classe em cada cantinho do site dele, significa que este segue os web standards?

Seguindo os web standards muito além do tableless

Um site que não utiliza tabelas para estruturar um site (teoricamente um site “tableless”) mas que ainda usa algo do tipo <div class="titulo">Titulo do artigo aqui</div> no lugar de um <h1> ou <h2> é tão contrário aos web standards quanto aquele que utiliza tabelas para estruturar o site. Alguém discorda disso neste ponto? Se considerarmos o aspecto semântico, o <div> (que serve para criar estruturas lógicas) bem como a tag <table> (que serve para exibir dados tabulares) podem ser semanticamente vazias quanto qualquer outra tag utilizada no contexto errado. Podemos colocar no bolo também a questão da validação de um site, que nada pode dizer sobre ele, se segue ou não os padrões.

Tableless é um ótimo marketing (principalmente para o Diego que é sortudo dono do domínio no Brasil), é uma palavra com um fundo histórico interessante que representou uma oposição a uma metodologia de desenvolvimento que marcou a história recente da web, mas que não diz o que web standards diz. Uma não deve ser utilizada para expressar o que a outra diz.