Posts Tagged ‘layout’

Refletindo sobre Semântica

Em meu último artigo, sobre a Resistência que desenvolvedores tem em adotar as Web Standards, muitas pessoas se manifestaram no sentido de que trabalhar com editores WYSIWYG como Fireworks ou Dreamweaver, na criação de páginas diagramadas com tabelas, seria mais produtivo, além de evitar incompatibilidade com navegadores.

As alegações são de que o uso das Web Standards aumenta o tempo de desenvolvimento, a quantidade de testes e a correção de erros. Isso realmente pode acontecer, se o desenvolvedor não possuir experiência suficiente com XHTML e CSS, e consequentemente criar Layout’s inadequados para a estruturação.

A maior dificudade que as pessoas tem para compreender a importância do desenvolvimento com as Web Standards é (1) imaginar que é apenas uma questão de substituir Tabelas por DIVs, e (2) não compreender a questão da Semântica.

O que é Semântica?

A Semântica, enquanto estudo da palavra, tem preocupação com o significado dos objetos (me refiro aqui a objeto como tudo que é perceptível aos sentidos).

A ideia de uma Web Semântica surgiu em 2001 a partir de um artigo publicado por Tim Berners-Lee, James Hendler e Ora Lassila, e tem como objetivo extender a Web atual, através da atribuição de significado ao conteúdo dos documentos, de forma que eles possam ser compreensíveis não só por seres humanos, mas também por máquinas. Isso possibilitaria que informações úteis em diferentes sistemas fossem integradas para facilitar a vida das pessoas.

Vamos imaginar que eu possuo uma agenda online, onde consta que tenho uma viagem marcada para Nova Yorque, assim como a data e o horário em que devo embarcar. Essas informações seriam muito claras para mim ou para qualquer outro ser humano, que poderia providenciar tudo que fosse necessário para a viajem.

Agora vamos imaginar que essa agenda possui informações com significado não só para humanos, mas também para máquinas, de forma que esses dados pudessem ser integrados com outros sistemas pelo mundo, que também tivessem informações com significado para as máquinas.

Com isso, meu sistema ao identificar o compromisso na agenda, poderia automaticamente buscar e reservar para mim uma passagem aérea para o dia e horário em que fosse necessário, assim como reservar um quarto no hotel mais próximo ao meu local de destino, e quem sabe até me recomendar passeios, livrarias e restaurantes, de acordo com meus gostos pessoais descritos no perfil de uma rede social qualquer.

Parece até coisa de filmes de ficção cientícfica!

Para que algo assim fosse possível, para que os sistemas tivessem esse nível de automatização e funcionassem como na história acima, teriamos que pensar na evolução dos documentos, antes de pensar na evolução das tecnologias.

Teriamos que criar documentos em que as informações tivessem significado não só para humanos, mas também para máquinas.

Isso seria a Web Semântica.

Tirar o lixo e organizar a casa

Alguém sabe a quantidade de informação que existe hoje na Web, ou quanta informação é possível de ser armazenada digitalmente?

Um CD comum armazena cerca de 650 Megabytes de informação, e isso equivale a 340.000 páginas com 2000 caracteres cada. Se essas páginas fossem impressas em papel de 20 gramas em frente e verso, a pilha de papel necessária para equivaler a capacidade informativa de um CD pesaria 770 quilos. (Informação retirada do livro “Do papel até a Web”, de Tony McKinley)

Acho que agora deu pra ter uma ideia!

A Web tem mais informações do que todas as bibliotecas do mundo juntas. Infelizmente a maioria dessas informações não tem significado nem sentido algum.

Uma Linguagem de Marcação como o HTML é feita de etiquetas (tag’s) que servem para dar significado as partes de um documento. Sendo assim, com as etiquetas <h1></h1> informamos que determinado trecho de texto é um título, com as etiquetas <p></p> indicamos que determinado trecho de texto é um paragrafo, ou então com as etiquetas <blockquote></blockquote> informamos que determinado bloco de texto é uma citação.

Sabendo disso, poderiamos acreditar que trabalhando com HTML teriamos naturalmente documentos com definições claras sobre o que é cada informação.

Porém, desde o início a Web foi sendo explorada como uma extensão da mídia impressa, com uma preocupação unicamente visual, sem levar em consideração a estrutura do documento e seu significado. Como os recursos do HTML eram limitados para diagramação, além de possuir algumas marcações próprias para formatação, os documentos começaram a ser adaptados de forma equivocada, e recursos como tabelas (que existem para definir dados tabulares) começaram a ser usadas para diagramar páginas de sites como se fossem páginas de revistas. O uso correto das marcações era ignorado: etiquetas de paragrafo eram usadas para comportar títulos ou listas, por exemplo.

Essa forma de criar os documentos faz com que a informação fique clara para o seres humanos, porém sem sentido algum para máquinas ou sistemas que possam vir a (tentar) interpretar os documentos.

Trabalhar com Web Standards significa criar documentos onde serão usadas apenas as marcações necessárias para identificar as informações, sem que sejam inseridas marcações com finalidades visuais.

O uso de tabelas para diagramar as páginas gera um código sem significado, muitas vezes incompreensível, e várias vezes maior que o necessário, enchendo os servidores pelo mundo de Terabytes inuteis, além de fazer com que boa parte das informações úteis não sejam compreendidas pelas máquinas.

Devemos usar apenas marcações que forneçam significado à cada parte do documento, e toda apresentação visual deve estar em um documento separado (CSS).

Acessibilidade: máquinas informando seres humanos

Quem cria páginas para Web utilizando editores WYSIWYG e tabelas, pode alegar que disponibiliza informações claras ao menos aos seres humanos.

Mas será que realmente todos os seres humanos tem acesso as informações publicadas na Web?

Algumas pessoas necessitam do suporte de tecnologias assistivas para compreender as informações da Web, seja por deficiências visuais ou motoras, necessitando do auxílio de Leitores de Tela, Teclados Alternativos, Ampliadores de Tela, Ponteiras de cabeça e Linhas Braile. Existem pessoas que dependem de máquinas para acessar as informações disponíveis na Web.

Para que um programa Leitor de Tela com síntese de voz, usado por uma pessoas cega, possa compreender as informações de um documento e converte-las em áudio, é necessário que todos os dados possuam marcações com significados corretos, para que o programa compreenda quais são os títulos, as listas, os paragrafos e os dados tabulares, assim como ter alternativas textuais para descrever imagens e animações.

Também é importante que os documentos tenham uma sequência lógica, da mesma forma que os capítulos de um livro. Quando usa-se tabelas para diagramar um Layout, a única preocupação é com a organização visual, deixando o código com uma sequência incompreensível para máquinas, como se misturassemos os capítulos do livro.

Para que todas pessoas possam ter acesso as informações, devemos criar documentos com uma sequência coerente, com alternativas textuais para imagens e animações, atalhos de teclado para links e campos de formulários, indicações de conteúdos em outros idiomas, e tudo que possibilite as tecnologias assistivas de compreender o documento.

Trabalhando pela evolução dos Sistemas de Informação

Boa parte das justificativas dos profissionais que não trabalham com os Padrões está no fato de que navegadores antigos como o IE6 (que possui a maior fatia dos usuários) não possuem suporte adequado aos Padrões. Porém existem formas de driblar isso, que podemos encontrar com uma simples busca na Web: para PNG’s transparentes, assim como para a falta de interpretação de algumas propriedades de CSS, como pseudo-elementos, podemos utilizar scripts como o IE7.js. Para diferenças de renderização entre navegadores temos técnicas de CSS Reset.

Qualquer Layout complexo é possível de ser feito com CSS, basta ter conhecimento e as armas certas engatilhadas. O fato dos navegadores antigos não fornecerem suporte adequado não pode ser pretexto para pararmos de estudar, nem pregarmos o retrocesso do Desenvolvimento para a Web. Dessa forma não estaremos contribuindo para que evolução alguma aconteça (você acha que o IE8 passou no teste ACID 2 porquê a Microsoft decidiu ser legal, ou pela pressão do mercado e dos desenvolvedores?).

Outra fácil justificativa é jogar a culpa nos clientes, que não flexibilizam prazos e nem recompensam financeiramente o uso das Web Standards. Mas será que todos os clientes tem receio de investir em projetos acessíveis por terem preocupações unicamente visuais, ou porque não são esclarecidos das reais vantagens?

Estudar, argumentar, e convencer os clientes está ao alcance de todos. As vantagens que podemos obter com o uso das Web Standards estão documentadas em diversos sites: arquivos menores e sites mais leves, menor consumo de banda, maior indexação pelos mecanismos de busca, maiores facilidades de manutenção e redesign, além de maior Acessibilidade.

Claro que para isso realmente acontecer, devemos compreender que trabalhar com Web Standards não é apenas uma questão de substituir tabelas por DIVs (Tableless).

Maior produtividade virá com a experiência, e com a compreensão de que os documentos não podem ser verdadeiras “sopas de tag’s”. Se criarmos páginas com uma grande quantidade de marcações sem significado, mesmo que não usemos tabelas e editores WYSIWYG, não conseguiremos obter essas vantagens.

É necessário criarmos documentos com significados não só para humanos, mas também para máquinas. Os sites são armazenados em máquinas, Leitores de Tela e outras Tecnologias Assistivas são máquinas, e também os mecanismos de busca são máquinas!

As possibilidades de existência de uma Web Semântica, com integração de dados entre diversos sistemas informacionais, que possam melhorar a qualidade de vida das pessoas, só serão possíveis com documentos semânticos, e claro que isso não se resume a desenvolver um HTML com devido significado. Porém, outros assuntos relacionados, como RDF ou Microformatos, são temas para outro artigo.

Para que haja evolução das máquinas e dos sistemas, é preciso que haja primeiro uma evolução dos profissionais que fazem a Web.

Resistência aos Padrões Web

Olá amiguinhos!

Na última edição do Campus Party Brasil, fiquei encarregado de abrir as atividades na área de Design com a palestra sobre Web Standards.

Após a palestra, e depois de bater papo com muita gente por lá, cheguei a triste conclusão de que muitos profissionais ainda desconhecem as Web Standards, e desenvolvem sites a moda antiga (usando tabelas para diagramar o Layout).

Para contribuir na mudança desse quadro, este artigo é o primeiro de uma série sobre Web Standards ao qual estarei escrevendo. E para ter certeza de que vou ajudar a esclarecer as dúvidas sobre esse assunto, deixo aberto o espaço para a sugestão de temas para os próximos artigos.

Resistência aos padrões, ou amor as tabelas?

Pior do que perceber que ainda hoje muitas pessoas desconhecem as Web Standards e suas vantagens, é perceber que existem pessoas que conhecem, porém resistem a elas, com argumentos (sem fundamentos) de que desenvolver sites com o uso de tabelas para diagramar o Layout é melhor e mais produtivo.

Esses dias andou pipocando pelas listas de discussão um artigo escrito por um tal de Ron Garret, onde ele tenta justificar que o CSS não serve para diagramar Layouts (Why CSS should not be used for layout), e afirmando que o uso de tabelas é melhor para tal finalidade.

Essa forma de pensar mostra que muitas pessoas tem a visão equivocada de considerar o Design como mera produção estética, e desconsideram a concepção de projeto. Como escrevi em outro artigo, além da questão estética, o Design engloba a criação de um produto funcional, usável, eficiente e economicamente viável.

Uma estrutura de informação, como documentos escritos em HTML ou XML, deve conter apenas marcações com devido significado (semântica). Adicionar marcações sem significado em um site pode ser comparado a adicionar diversas páginas em branco a um livro: aumentaria inutilmente o tamanho do mesmo, e não teriam sentido algum para o leitor. É justamente isso que acontece com o uso das tabelas para diagramar o Layout.

Podemos dizer que o HTML não é uma linguagem de marcação verdadeira, pois sua sintaxe preve (limitadas) marcações para formatação. Uma linguagem de marcação deve apenas estruturar a informação (como o XHTML), enquanto a apresentação deve vir de um documento específico (CSS).

A maior dificuldade no uso do CSS para diagramação das páginas vem da incapacidade dos navegadores, não só no suporte a linguagem, como na padronização do efeito renderizado. O IE6 suporta apenas 51% das propriedades do CSS 2.1, o IE7 apenas 56%, o Firefox2 suporta 91%. O IE6, que ainda é o navegador mais usado, também suporta apenas 73% do HTML/XHTML, 50% do DOM e 10% do CSS3. Mais informações sobre essas estatísticas podem ser vistas em http://www.webdevout.net/browser-support).

O CSS não é perfeito, as empresas que desenvolvem os navegadores não colaboram no suporte, e a W3C não é nenhum exemplo de discussões promissoras em prol a padronização. Lembrando que a W3C não se resume apenas aquele tiozinho carismatico de ideais livres que inventou a Web, mas de diversas empresas com interesses não tão nobres (quem chegou a acompanhar discussões sobre o uso dos codec’s Ogg Vorbis e o Ogg Theora como padrão nos navegadores, para o uso da nova tag <video></video> no HTML5, sabe do que eu estou falando).

A vantagem do uso de Padrões Web

Recortar um layout em softwares como o Fireworks, e exportar diretamente para HTML com tabelas pode parecer fácil e rápido. Porém o código gerado torna-se incompreensível, sem uma sequência lógica da informação ou significado, além de ser muito maior que o necessário.

O uso das Web Standards propicia um melhor custo-benefício. As vantagens do uso de padrões e da separação das camadas de Conteúdo (XHTML), apresentação (CSS) e Comportamento (Javascript) são evidentes:

  • Com arquivos menores e as camadas de Apresentação (CSS) e Comportamento (Javascript) no cachê do navegador, teremos um carregamento mais rápido das páginas, além de menores custos de hospedagem.
  • Com a formatação de todas as páginas baseadas num mesmo arquivo CSS, teremos uma melhor consistência visual, e possibilidades de manutenção e redesign mais baratos e eficientes.
  • Com marcações mais semânticas (usadas com seu devido significado) e com as informações do documento estruturadas em uma sequência lógica, teremos melhores resultado nos mecanismos de buscas, além de melhor acessibilidade e Interoperabilidade entre diferentes dispositivos.

Exemplos práticos dessas vantagens:

  • A Legal & General, uma das primeiras empresas a aplicar em seu site as “Diretivas para acessibilidade Web” (Web Content Accessibility Guidelines) da W3C, e os resultados foram que as taxas de conversão aumentaram 300%, custos de manutenção cairam 66%, listagem natural nas buscas aumentou 50% e o carregamento das páginas ficou 75% mais rápido (fonte: RevistaW).
  • A ESPN, quando migrou seu site para os Padrões, reduziu cerca de 50kb em cada página, economizando 2 Terabytes de banda por dia (fonte: Mike Davidson).

Quanto a beleza dos sites feitos com CSS, é indiscultivel que as possibilidades são enormes, e muito mais eficiêntes que a formatação possibilitada com o uso de tabelas no HTML. Exemplos disso podemos encontrar na galeria CSS Zen Garden ou em sites como o Web Leed Design.

Se as Web Standards ainda não são o ideal, é o que de melhor temos hoje para o desenvolvimento de páginas para a Web.

Linguagens como o CSS tem sempre mil possibilidades. A limitação está no Designer.

Palestra “Conceitos de Design”

Palestra ministrada nos dias 10/11 (Microcamp, São Bernardo) e 30/11 (Microcamp, Santo André) para o Workshop “Processo de Criação”, voltado principalmente para os alunos do curso de Web Design Developer.

O conteúdo da palestra foi baseado no artigo “Conceitos de Design: Função, letras, cores e formas”

Slides da Palestra

Ver mais Slides de Eduardo Santos no SlideShare.

Return top

BlogBlogs.Com.Br