Newton Wagner » padrões

Jeffrey Zeldman e o jogo da Web 2.0

Newton Wagner — Tue, 17 Oct 2006 16:44:35 +0000

O autor do livro Desenvolvendo Sites Compatíveis, (citado aqui no blog), divulgou um divertido jogo no seu blog. A idéia é definir Web 1.0 e Web 2.0, como os exemplos abaixo, traduzidos do post do Zeldman e de alguns comentários:

Web 1.0: AOL compra a Times Warner
Web 2.0: Google compra o Youtube

Web 1.0: Sites bizarros no Geocities
Web 2.0: Sites bizarros no MySpace

Web 1.0: Pontos de Karma (orkut, pra quem não lembra)
Web 2.0: Diggs

Web 1.0: IE 5
Web 2.0: IE 7 (será?)

Web 1.0: "Em Construção"
Web 2.0: "Beta"

Web 1.0: table, tr, td, font
Web 2.0: div, h1, ul, li

Web 1.0: Você e eu
Web 2.0: Nós

Agora a parte realmente divertida: sua vez!

Benefícios da Utilização dos Padrões Web

Newton Wagner — Wed, 04 Oct 2006 18:46:35 +0000

Os padrões web pregam a separação do documento em camadas. Dessa forma, temos arquivos diferentes para a marcação, formatação e comportamento do documento web.

Essa organização implica em benefícios como diminuição do tempo de desenvolvimento e portabilidade.

Depois de projetar e realizar a marcação do seu documento, com xHTML, designers e programadores podem trabalhar ao mesmo tempo, sem interferir diretamente no trabalho um dos outros. Enquanto o primeiro se preocupa com a formatação, usando CSS, o segundo pode realizar as implementações do lado do servidor, e gerando as saídas xHTML. Resumindo, alterações no sistema independem de um designer para aplicar um estilo, e alterações de estilo independem de alterações no sistema, facilitando o trabalho e diminuindo o tempo de desenvolvimento.

Podendo aplicar várias folhas de estilo (CSS) a um mesmo documento, inclusive, especificando mídias diferentes. Isso implica em portabilidade. Todos os dispositivos acessam o mesmo documento, porém, cada um visualizará este documento conforme o estilo definido para o mesmo. É possível, por exemplo, criar estilos diferentes para navegadores de PCs, Handhelds (Palms, celulares, ...) e impressão, considerando suas limitações de acesso, saída e entrada de dados.

Prega-se também a preocupação com a semântica do seu documento. Semântica se ocupa com o significado. Na prática, isso significa marcar seu documento com os elementos corretos para cada seção. Cabeçalhos devem ser definidos com h1, h2 e etc, elementos criados específicamente para isso. Isso abre as portas para que nosso documento seja interpretado por máquinas. Um dos benefícios de seguir esta recomendação é a acessibilidade. Navegadores para cegos, que são capazes de ler o documento, poderiam dizer ao usuário à que se refere aquele trecho, se é uma citação (cite), um endereço (address), trecho de um código (code) e etc.

Outro benefício é a facilidade de indexação dos documentos, razão inicial pela qual Tim Berners-Lee imaginou sua web semântica. É fato que ferramentas de busca como Google, já utilizam a semântica para definir qual resultado da busca é mais relevante. Uma palavra encontrada em um título, ou uma referência (link), é, provavelmente, mais importante do que ela solta em um parágrafo.

Aperte o botão

Newton Wagner — Tue, 03 Oct 2006 13:49:07 +0000

Tenho que confessar que nunca ma atentei à utilidade da tag button, e sua diferença entre os botões feitos com a tag input, até ler um artigo no Digital-web.

A diferença é que com button, podemos inserir conteúdo dentro do elemento, enquanto que o input aceita apenas um valor, porém, a funcionalidade dos dois elementos é a mesma.

Teríamos:

Teríamos algo assim:

Conseguiu perceber a diferença? No lugar da palavra Enviar, poderíamos colocar o conteúdo que quisermos, assim como formatar, além do próprio botão, nosso parágrafo, utilizando todo o potêncial do CSS.

Esta técnica potencializa o uso de imagens no lugar do botão, sem termos que remover o valor da propriedade value, perdendo a acessibilidade do botão para usuários impossibilitados de visualizar a imagem.

Para mais detalhes, veja o artigo original que deu origem à este post, inclusive o nome (rs): Push my button.

Observação: Não recomendo o uso de estilos inline, conforme o exemplo citado neste post. Fiz dessa forma apenas para facilitar o entendimento do código.

Atualizado 05/10: melhorei o visual do exemplo do uso de button.

Introdução aos Padrões Web

Newton Wagner — Fri, 29 Sep 2006 12:13:57 +0000

A partir daí, o W3C seguiu uma série de esforços para padronizar, principalmente, a linguagem HTML, base da web, que chegou até a sua versão 4.01, antes de ser revista pelo órgão. Esta revisão foi para atender à idéia de Berners-Lee da web semântica. Para isso, o HTML foi re-escrito como uma estensão do XML, eliminando todos os elementos de formatação da linguagem, dando origem ao XHTML. Para atender à necessidade de formatar estes documentos, foi criada a linguagem CSS.

A web semântica consiste em organizar os documentos web de tal forma, que estes possam ser interpretados automaticamente, facilitando a pesquisa e cruzamento das informações dos documentos. Ou seja, além da informação, a máquina saberia distinguir a que se refere esta informação. Um exemplo prático disso é que, se utilizassemos o elemento address para definir o endereços em nosso site, uma ferramenta de busca poderia criar uma indexação destes endereços, e disponibilizar para o usuário. Quantas vezes você visitou o site de uma empresa e cansou de procurar pelo endereço, ou um telefone de atendimento ao cliente?

Hoje, nós, desenvolvedores web podemos comemorar muitos avanços, mas ainda estamos longe de uma real padronização dos navegadores.

Adotando os padrões web: XHTML

Newton Wagner — Sat, 23 Sep 2006 12:39:52 +0000

O XHTML é a linguagem utilizada para escrever os documentos web. Se você está estranhando o X na frente do HTML, não há muito o que se preocupar. O XHTML é a junção das linguagens XML e HTML. Dessa forma, todas as regras de sintaxe aplicadas a um documento XML, devem se aplicar ao documento XHTML.

Estas alterações de sintaxe não são tão complexas, alguns exemplos dessas modificações são:

As tags e seus atributos devem ser em letras minúsculas;
Todas as tags devem, obrigatóriamente, ser fechadas, inclusive as tags img e br.

Estas diferenças podem ser encontradas em diversas referências na internet. Porém, a mais importante alteração a ser realizada no seu documento não é a sintática, e sim a semântica. Deve-se conhecer os elementos XHTML para usá-los corretamente, ou seja, utlizar as tags certas para descrever as informações no seu documento, sendo importante lembrar que estas tags já existiam no HTML. Vemos no exemplo abaixo, um exemplo muito comum de código para definição de um título:

Meu Título

Definimos na estrutura do documento, que o título da página será do tamanho 16px em vermelho e negrito. Porém, se tivéssemos conhecimento da linguagem, utilizaríamos a tag h1, para definir títulos na página:


Meu Título

Para saber se seu código está semanticamente correto, é preciso se perguntar se uma máquina seria capaz de entender a que se refere o trecho de código. No primeiro exemplo, a maquina sabe que deve escrever o texto "Meu Título" em negrito, vermelho e tamanho de 16px. No segundo, ele sabe que "Meu Título" é um Cabeçalho nível 1.

Outra mudança no seu documento será a estruturação do mesmo. Se você divide áreas como Topo, Navegação, Conteúdo e Rodapé utilizando tabelas (table), revendo a documentação do XHTML, você descobrirá a existência da tag div, criada justamente para definir divisões de blocos dentro do seu documento, ou ainda, a tag span, para definir divisões em linha do documento.

Abolir os elementos de formatação é outra medida necessária para a adoção dos padrões web. Esqueça que as tags font, b e i, dentre outras, assim como atributos de formatação, como background e color, entre outros. Estes elementos estão em desuso e serão, possívelmente, removidos de especificações nas versões futuras do XHTML. No lugar da tag b, que indica bold (negrito), por exemplo, substitua pela tag strong, que indica força. O efeito inicial nos navegadores é o mesmo, pois em ambas, por padrão, deixarão seu texto em negrito. Porém, você pode definir na formatação que força no seu documento é uma letra normal, escrita com outra cor, o que não faria sentido definir um estilo desses em uma tag denominada "negrito".

Tenha em mente que você está apenas estruturando o seu documento, escreva toda a sua página sem qualquer estilo, e veja se é um documento legível para nós na tela do navegador, com um código semântico para as máquinas. Depois disso, você pode pensar em formatar seu documento utilizando a linguagem definida para isso, o CSS, que será assunto de um outro post.

Lista de mudanças no IE7

Newton Wagner — Wed, 23 Aug 2006 16:48:17 +0000

Vi no WaSP que saiu no IEBlog uma lista de mudanças realizadas no Internet Explorer 7. De fato, parece que muitos bugs de CSS conhecidos foram corrigidos, e que o pessoal da Microsoft está interessado em seguir as definições do W3C.

Os novos navegadores antigos

Newton Wagner — Wed, 09 Aug 2006 18:08:25 +0000

Quando comecei a estudar os padrões web, tinha a preocupação de testar as páginas em navegadores ditos antigos na época. Porém, eu me preocupava apenas com o Internet Explorer 5.x e seu famoso bug de box model, dentre outros. No livro Projetando web sites compatíveis, do Zeldman, os navegadores antigos eram Netscape e Internet Explorer 4.

Passado algum tempo, novos navegadores foram lançados e, graças à minha resistência de demorar um pouco para atualizar os programas, comecei a notar que os desenvolvedores não estão mais preocupados em compatibilizar seus produtos com os 'novos navegadores antigos'.

Até o navegador queridinho do desenvolvedor web, Firefox, na versão 1.0.x, ou mesmo o antigo Mozzila apresentam erros de renderização em diversos sites, inclusive nos mais famosos blogs sobre o padrões web no Brasil. Geralmente as diferenças são muito menores do que no princípio, mas as vezes o resultado pode prejudicar a experiência do usuário no site.

Pergunta desafio: Devo me preocupar com isso? A resposta, pra mim, é sim, mas não precisa correr imediatamente para compatibilizar seu site. Se descabelar por que um campo está passando um pouco a largura da área dele, sem prejudicar o usuário, é um exagero. Porém, quando o menu de letras brancas fica invisível por que caiu pra linha de baixo num fundo branco, é preciso tomar uma atitude.

Conclusão resumida: Use o bom senso, mas verifique o funcionamento do seu site também nos "novos navegadores antigos".

Newton Wagner » padrões

Jeffrey Zeldman e o jogo da Web 2.0

Artigos Relacionados:

Benefícios da Utilização dos Padrões Web

Artigos Relacionados:

Aperte o botão

Vou Comprar!

Artigos Relacionados:

Introdução aos Padrões Web

Artigos Relacionados:

Adotando os padrões web: XHTML

Meu Título

Artigos Relacionados:

Lista de mudanças no IE7

Artigos Relacionados:

Os novos navegadores antigos

Artigos Relacionados: