Últimamente as tabelas são consideradas as vilãs da Web. Termos que ajudaram a disseminação dos Web Standards como o Tableless (sem tabelas) depreciavam esse elemento HTML. Não gosto muito do termo Tableless, prefiro usar Layout CSS pois Tableless significa “sem tabelas” e pode ser muito mal interpretado por parte de algumas pessoas, principalmente iniciantes.

As tabelas foram criadas para dados tabulares, mas por serem um meio muito amigável de aninhar a estrutura de uma página, foram e ainda são muito usadas para layout. Há alguns anos não uso mais tabelas para layout, nos cursos de Dreamweaver no qual eu ministro aulas explico aos meus alunos que eles não devem usar os recursos de criação de layouts em tabelas. Felizmente a Adobe está fazendo o sua parte também, na versão CS3 do dreamweaver esses recursos ainda existem mas perderam destaque.

Minha intenção aqui é mostrar alguns recursos para tabelas de dados tabulares. Existem recursos poucos explorados nas tabelas. Esses recursos melhoram a acessibilidade e também melhoram a semântica do conteúdo.

Inicialmente falarei sobre as principais tags HTML das tabelas. Em outros artigos estarei falando especificamente de apresentação e acessibilidade.
Read this article »

Os erros de renderização de CSS que eu relatei no post anterior foram corrigidos na atualização 3.0.2 do Safari. Já tinha enviado alguns relatos de erro para a Apple e parece que o pessoal está se empenhando e melhorar a ferramenta. Espero que esse empenho continue.

Há 3 dias estou testando o Safari beta para Windows. Inicialmente pensei que o navegador seria uma versão similar ao do MAC e que os problemas de testes de Web Standards que os usuários de Windows tinham iram diminuir. Infelizmente isso não aconteceu. Estamos revivendo o que aconteceu na versão do IE 5 (única) que saiu para MAC, até agora parece que temos dois browsers distintos um para MAC e outro para Windows. A versão para windows possui vários Bugs de apresentação do CSS e segundo algumas notas técnicas que estão rolando na web também tem bugs de segurança.

Nos meus testes descobri que o Safari simplesmente desaparece com todos os textos em negrito, mesmo nas tags que são apresentadas em negrito por padrão. Por isso muita gente esta reclamando que os títulos das páginas não são exibidos. Isso é um problema muito sério e acredito que a equipe de desenvolvimento já está trabalhando na solução. Eu já fiz a minha parte o Bug. Para fazer isso é só clicar no botão de BUG do lado esquerdo do campo esquerdo do campo URL.

Hoje (14/06/07) saiu uma atualização do browser mas mesmo assim esse problema não foi resolvido. A versão ainda e beta e acredito que tem muita coisa para rolar ainda.

Foi publicado no Imasters essa semana a primeria parte de 3 artigos que estarei escerevendo sobre o uso correto das tabelas no HTML. O artigo está dividido em Estrutura do HTML, Apresentação com CSS e Otimização para acessibilidade. O link para o artigo é:

http://www.imasters.com.br/artigo/5128/tableless/tabelas_semanticamente_corretas

Autor: Rachel Andrew.
Publicação: SitePoint.
ISBN: 0957921888
Páginas: 376.

Referência muito objetiva sobre CSS. O livro tem uma pequena introdução sobre a estrutura do CSS e parte imediatamente para exemplos práticos.

Os seguintes assuntos são abordados no livro: posicionamento CSS, colunas em CSS, criação de folhas de estilo alternativas, apresentação de formulários, apresentação e interação de dados tabulares, efeitos em links, listas posicionamento de imagens.

Gostei muito da estrutura do livro. Ele é dividido em perguntas e respostas e proporciona a sensação de que você está falando diretamente com o autor. Cada pergunta é seguida da solução e algumas tem discussão. A discussão aprofunda ainda mais o assunto levando ao leitor conhecimentos extras como problemas com browsers, outras valores de propriedades, otimização de códigos e hacks. A maioria das respostas possuem exemplos bem interessantes com estruturas simples e complexas

Os capítulos do livro são divididos por elementos HTML e técnicas especiais do CSS. Cada começa com uma breve introdução sobre o assunto e depois vai para as perguntas e soluções sobre as principais necessidades do webdesigner. O livro também possui alguns JavaScripts que completam as necessidades de interação.

Link: http://www.oreilly.com/catalog/0957921888

Autor: Eric Meyer.
Publicação: New Riders.
ISBN: 073571245X
Páginas: 352.

A primeira vista este livro parece mais um guia técnico sobre CSS, mas ao primeiro contato se percebe que é uma ótima referência baseada nas necessidades do dia-a-dia do web designer.
O livro começa abordando como iniciar a transição do layout HTML para o layout híbrido (ainda com o uso de tabelas mas de maneira otimizada), e com isso vai gradativamente preparando o leitor para pensar e criar o tão desejado Layout CSS (Tableless).
Além de falar sobre CSS ele mostra como conceber um código HTML semanticamente correto e assim obter uma estrutura mais organizada e acessível.
Este livro aborda o conceito da separação de estrutura e apresentação, posicionamento CSS, colunas em CSS, criação de folhas de estilo alternativas, apresentação de formulários e efeitos em links, listas e imagens.
O livro Eric Mayer on CSS é uma das melhores referências sobre CSS que já vi. E posso dizer que ele é indispensável na biblioteca do web designer.

Link: http://www.peachpit.com/title/073571245X

Fui convidado pelo Tiago Celestino para uma estrevista sobre Web Standards no MX Studio. Na entrevista tive a oportunidade de falar sobre assuntos como Acessibilidade, Usabilidade e o uso inteligente das ferramentas Macromedia. Confiram a entrevista no site: www.mxstudio.com.br/entrevistas.php

Segue abaixo uma cópia:

O MXSTUDIO por intermédio de Tiago Celestino conversa com Lauro Santos, profissional de multimídia e Internet, entusiasta dos Web Standards e líder do Macromedia User Group – Bahia.

Lauro nos contou um pouco sobre sua escalada profissional e sobre o MUGBA.

De Web Standards, acessibilidade e usabilidade até a evolução das regras da W3C, confiram.:

1 – Lauro é uma grande satisfação conversar com um profissional que além de conceituado, ainda lidera um grupo de usuários Macromedia. De início conte-nos um pouco sobre você e sobre o MUGBA.

Comecei a ter interesse nas áreas de multimídia e internet na UFBA quando fazia graduação em Instrumento na Faculdade de Música. Iniciei com o Director e logo me deparei com o primeiro problema: falta de material sobre a ferramenta aqui no Brasil, mesmo assim não desisti comecei a importar livros primeiramente em Espanhol e logo depois em Inglês. Desenvolvi pequenos projetos para a faculdade e depois a passei interagir com agências de comunicação. Aqui na Bahia o mercado de multimídia não está muito desenvolvido e tive me dedicar mais a área de Web, pois a demanda era maior. Através de contatos on-line começaram a surgir trabalhos de Web no Sul, e esses exigiam uma complexidade um pouco maior em questão de qualidade o que me levou a começar a pesquisar sobre Web Standards. Isso tudo ocorreu de 1999 a 2001 e desde essa época venho me dedicando a Webstandards, Acessibilidade e ferramentas Macromedia. Dei aula de Director na Transnology (Vicente Junior), e atualmente sou instrutor Macromedia pela Imedia, além de consultor de internet e multimídia. Na minha carteira de clientes estão: Petrobrás, Secretaria de Cultura do Estado da Bahia e Unicef dentre algumas outras.

MUGBA (Macromedia User Group da Bahia) é uma comunidade de usuários das ferramentas Macromedia e tecnologias agregadas. E está aberta a todos os profissionais, estudantes e interessados. Estamos desenvolvendo algumas atividades dentre elas a formação de grupos de estudo. Estamos também fazendo parcerias com faculdades e preparando uma jornada de seminários que acontecerá em breve.

2 – Para muitos que não conhecem você poderia explicar o que são Web Standards? Qual o principal objetivo desses padrões e o que é preciso saber para utilizá-los?

Web Standards são diretrizes para o desenvolvimento em linguagens web. Seguindo essas normas o trabalho desenvolvido se torna compatível a todos os browsers e dispositivos que suportam a linguagem. Existem também as recomendações que são muito importantes e às vezes se um código é desenvolvido dentro das normas, mas não obedece algumas recomendações, fica incompatível com alguns dispositivos. As normas e recomendações podem ser conferidas no site da W3 http://www.w3.org/ (WWW Consortium).

Para trabalhar com Web Standards o profissional tem que ter um bom domínio da linguagem que usa, e isso não é adquirido simplesmente usando uma ferramenta WYSIWYG (what you see is what you get), ou seja, o modo design das ferramentas de desenvolvimento de HTML, mas sim procurando entender a síntese da linguagem e todos os elementos e recursos que ela oferece.

3 – Muitos usuários dizem que trabalhar com Web Standards é mais complicado do que desenvolver o site totalmente em tabelas. O que você pensa sobre essa questão e sobre Tableless?

Trabalhar com Web Standards requer um conhecimento estruturado da linguagem que se usa. Para muitas pessoas isso é um problema, pois elas acham que arrastar elementos ou clicar em botões para gerar códigos mais fácil do que interagir manualmente com o código e acabam até subutilizando o editor de código que usam.

Desenvolver sites sem tabelas não é uma norma e sim uma recomendação. As tabelas não foram desenvolvidas para aninhar layout e sim para dados tabulares, mas por fornecerem um subsídio fácil para layout se tornaram muito usadas.

Não sou contra o uso de tabelas para a criação de layouts, mas geralmente quem as usa não se preocupa com a qualidade do código que está gerando e acabam colocando tabelas dentro de tabelas dentro de tabelas etc. E também não se preocupam em separar a estrutura da apresentação.

Para quem tem dificuldade em criar layouts sem tabela recomendo o layout híbrido que consiste na estrutura em tabelas e toda a parte de apresentação em CSS. Se o profissional se dedicar, em pouco tempo estará apto a criar layouts sem tabelas.

4 – Muitas empresas estão investindo em acessibilidade e usabilidade, principalmente sites governamentais. Você acha que isso traz mais créditos para os projetos?

Os recursos de acessibilidade e usabilidade estão sendo usados em empresas e sites governamentais por necessidade e não para trazer créditos aos projetos. Os Web Standards se tornaram mais populares por causa destas necessidades e principalmente pela acessibilidade. Sites desenvolvidos em Web Standards já são em sua maioria 70% a 80% acessíveis.

Existem leis de federais em alguns países que exigem acessibilidade em sites governamentais. No Brasil existe o decreto 5.296, criado em 2 de dezembro de 2004 que determina a adequação de todos os sites do governo para as normas de acessibilidade no prazo de um ano.

Posso afirmar que várias empresas que desenvolvem para o governo ignoram o fato.

5 – A grande maioria dos “webs” não segue as regras estabelecidas pela W3C, alguns dizem que é mais complicado se trabalhar seguindo uma regra e outros dizem que quem faz a regra é o cliente. Qual seria a melhor solução para que as regras fossem mais utilizadas?

Costumo dizer que não existe segredo em trabalhar com os padrões o que existe na realidade é falta de interesse por parte dos profissionais. Não conheço ninguém que tenha domínio das linguagens que usa e prefira não seguir os padrões porque exige um pouco mais de atenção e dedicação ao desenvolver um projeto. O cliente na maioria das vezes não sabe a diferença de um site comum e um site em Web Standards. O que acontece é que a depender do tipo de cliente, ele não queira pagar por um projeto de qualidade, mas isso já é outra estória…

6 – Como você vê o futuro das padronizações e regras da W3C, alguma tendência perceptível?

Nos anos de 1996 a 2002 muitas empresas tiveram que desenvolver sites para IE e Netscape isso era um grande problema na época por aumentar consideravelmente custos operacionais.

Hoje já temos Browsers que seguem os padrões e estão se popularizando, temos também dispositivos móveis que acessam a internet e em um futuro breve todos os televisores terão acesso à internet. Todo esse crescimento será desordenado se não houver padrões. Imagine que o seu site poderá ser acessado em computadores (caso eles ainda existam), celulares, tvs a cabo, navegadores de automóveis, handhelds, dispositivos de acessibilidade etc. Agora imagine ter que desenvolver um site diferente para cada tipo de dispositivo…

Desenvolver em Padrões já é necessário e futuramente será imprescindível.

7 – Hoje em dia temos milhares de sites desenvolvidos em Flash, muitos dizem que é melhor para trabalhar e na maioria das vezes esquecem dos usuários da velha conexão discada. Com base em dados de que a conexão por banda larga está crescendo a cada ano no Brasil, você acha que isso influenciará na questão da não padronização da Internet, já que o Flash não trabalha seguindo os padrões?

O problema do uso indiscriminado e mal estruturado do Flash vai além do consumo de banda. O consumo de banda está sendo melhorado a cada versão da ferramenta, e já é possível desenvolver interfaces bem interessantes com um tamanho bem enxuto. A realidade do mercado é outra a cada dia aparecem mais sites com seqüências em bitmaps de 3D e outras pirotecnias que são muito interessantes se você tem banda larga e não é portador de necessidades especiais.

Os principais problemas do uso Flash são a compatibilidade com dispositivos e acessibilidade. A Macromedia vem tentando melhorar esses pontos também, mas posso afirmar que os recursos que já estão disponíveis não são usados e fogem do interesse dos profissionais que usam a tecnologia.

Alguns dispositivos de leitura de tela dão suporte básico ao Flash, mas os profissionais não fazem uso desses recursos. Vemos sites com menus e formulários em Flash, mas sem nenhuma preocupação com a acessibilidade.

Querem um bom exemplo de uso de Flash em conjunto com Web Standards? O próprio site da Macromedia. O menu do site da Macromedia é feito em Flash mas possui recursos de acessibilidade.

Recomendo em projetos de sites de conteúdo e governamentais que uso do Flash fique reduzido somente a pequenos banners e que esses tenham propriedades de acessibilidade. Já em sites em que exista a necessidade de um conteúdo mais rico em interativo, o Flash com certeza é uma das melhores soluções.

8 – Como todos nós sabemos a Macromedia anunciou o Studio 8. Na sua nova versão, o Dreamweaver está trabalhando muito melhor com CSS. Será que isso ajudará a padronização, uma vez que se projeta que 85% dos Designers e Developers trabalham com essa ferramenta?

Para os profissionais que já trabalham ou que estão iniciando em Web Standards as melhorias foram muito boas. Para aqueles que ainda preferem ser escravos da ferramenta as mudanças foram pequenas. O suporte a tabelas continua o mesmo e continua gerando apresentação inline.

Aqueles que trabalham com padrões e estavam ansiando por melhorias podem ficar felizes. Até a ferramenta “Insert DIV Tag” agora tem um lugar de destaque na Common Bar.

Melhorias como: visualização de Box Model, visualização de renderização para mídias, zoom, linhas guia, modo painel CSS, renomear estilos automáticos, recursos de acessibilidade por default, layers de posicionamento absoluto com estilo não inline, escolha de mídia ao linkar ou importar estilos. Tudo essas novas funcionalidades tornaram o Dreamweaver uma das melhores (senão a melhor) ferramentas para o desenvolvimento de Web Standards.

Mesmo com todos esses recursos, eu continuo a advertir aos meus alunos: Não sejam escravos da ferramenta. Os softwares servem para aumentar a produtividade e não para substituir os conhecimentos obrigatórios que o profissional deve ter das linguagens que usa. Nenhuma ferramenta gera um código perfeito e totalmente enxuto sem a interação do usuário. Costumo em minhas aulas mostrar sempre o código gerado pelo programa e falar sobre as boas práticas de separação entre Estrutura e Apresentação.

9 – Para fechar com chave de ouro, qual a sugestão que você daria para aqueles que ainda não tem interesse ou vontade de aprender mais sobre Web Standards?

Na verdade eu não tenho muito que falar para quem não tem interesse ou vontade. Falo para quem está aberto e quer evoluir. Estamos em constante evolução e ninguém sabe tudo. Todos os dias eu aprendo muito com meus alunos, amigos, colegas, escritores e articulistas etc. A internet abriu o mundo muito grande de informações, mas elas não vêm sozinhas para ninguém, temos que buscá-las. Acredito que o próprio tempo criará a necessidade para essas pessoas, e quem estiver estudando desde agora, no futuro estará na frente com certeza.

10 – A comunidade agradece a sua participação e espera que a padronização chegue logo, qual o seu recado para os usuários do MXSTUDIO?

Gostaria de agradecer ao MXSTUDIO e ao Tiago Celestino pela oportunidade da entrevista e para os usuários do MXSTUDIO eu quero dizer que usem as ferramentas como ferramentas e estudem XHTML, CSS, DOM, XML etc. Não usem somente os validadores de código, pois estes fazem uma análise mecânica do código. Eles procuram erros de sintaxe e não conseguem verificar se a estrutura de uma página está realmente estruturada. O caminho são os padrões e é necessário investir neles.

Fui convidado para ministrar uma palestra de Web Standards na Faculdade Ruy Barbosa.
A palestra encerrou um ciclo de apresentações de trabalhos da matéria de Interfaces Homem Computador do curso de Bacharelado em Sistemas de Informação ministrada pelo professor Márcio Rosa.
Fiquei muito contente em saber que o pessoal estava discutindo temas como Arquitetura da Informação e Usabilidade.
Os alunos se mostraram muito interessados pelo tema e já estão viabilizando a idéia de montar um grupo de estudo de Web Standards.