Bom pessoal quem deve ter passado por aqui nos últimos meses percebeu que o blog estava parado e sem atualizações.

Muito trabalho e muitos estudos e um pouco de má administração de tempo são os vilões desse sumiço. Um dos frutos bons disso tudo é que fui agraciado com o título de Adobe Community Champion pela Adobe no início desse ano (2011) outro é que depois de toda essa imersão estou com muita coisa para compartilhar.

Aos poucos vou retornar a produção e espero a participação da comunidade.

Abraço a todos!

Estão falando muito das novas especificações HTML 5 e CSS3. Muito alvoroço sobre os novos padrões que prometem muitas possibilidades para o desenvolvimento de interfaces web.

No meio disso muitos não estão percebendo que várias conquistas resultantes de muito esforço estão sendo esquecidas. Brigamos muito para que os padrões atuais fossem mais usados, que as interfaces web melhorassem em semântica, acessibilidade. Tudo isso conseguindo através do uso de padrões por desenvolvedores e que eles fossem adotados pelos de browsers, dispositivos e tecnologias assistivas.

Ainda temos muitas páginas na web com layouts em tabelas, mal formatadas e semanticamente desestruturadas. Muitos ainda não sabem desenvolver em HTML/XHTML e CSS e só conseguem criar páginas com a ajuda de editores WYSIWYG.

Fim do XHTML 2 e ascensão do HTML 5

O XHTML foi criado para colocar uma ordem ao caos, usando o parseamento XML as páginas web se tornaram mais organizadas, isso abriu espaço para a semântica de código e de conteúdo uma vez que tags e atributos de foram eliminados. As páginas passaram a ser mais otimizadas e de fácil processamento. O que levou a uma melhoria na renderização de páginas em dispositivos com pouco poder de processamento.

Ainda não é seguro usar as especificações de XHTML e CSS e sua plenitude porque alguns browsers (leia-se Internet Explorer) ainda não dão suporte pleno a esses padrões.

Há um tempo atrás os novos padrões XHTML 2 e  HTML 5 foram propostos e com isso surgiram dois grupos de desenvolvimento separados. Não entendi bem a necessidade da criação de dois novos padrões e aposto que muitos não entenderam também. O que era esperado acabou acontecendo até antes do previsto com o anuncio da W3 sobre o fim do grupo de trabalho do XHTML 2 no final de 2009.

Agora estamos assistindo a ascensão do HTML 5, que vem trazendo muitas novidades como estruturas semânticas, validação de formulários, mas ao mesmo tempo existe um seguimento excitado com a volta das más práticas do HTML 4 tais como:  codificação em letras maiúsculas, atributos sem valor, case-insensitive etc.

É possível codificar o HTML 5 usando o parseamento do XHTML, esta metodologia está sendo denominada de XHTML 5. Então porque não usar?

Estou vendo muitos exemplos das novas funcionalidades para a validação de formulários com HTML 5 usando atributos sem valores e tags em letras maiúsculas. Isso é um fato que me preocupa bastante porque se os disseminadores da tecnologia continuarem a divulgá-la ignorando as boas práticas de codificação teremos um problema sério em um futuro próximo.

CSS3

No CSS3 a criação de propriedades proprietárias na implementação da linguagem em Browsers pode estar gerando outro problema. Estão sendo usados prefixos como webkit Mozilla. Porque não estão sendo usadas as propriedades com o nome proposto sem o sufixo?

Até hoje sofremos na implementação de JavaScript em diferentes browsers. Será que essa novela irá se repetir com o CSS3?

Ainda estamos no começo

Os browsers ainda estão dando suporte parcial a HTML 5 e CSS 3. Isso não nos impede de começarmos a testar as suas novidades, mas ainda em nível experimental ou fornecendo alternativas a funcionalidades que ainda não são suportadas em outros browsers.

Opera, Firefox e Browsers Web Kit já estão dando suporte parcial a alguns recursos. A Microsoft ainda está trabalhando na nova versão do Internet Explorer prometendo dar um suporte aos padrões.

À medida que testo os novos padrões estarei publicando exemplos aqui no blog.

Se quiser se interar mais no assunto visite alguns links interessantes:

http://www.w3.org/2009/06/xhtml-faq.html

http://html5doctor.com/

http://www.whatwg.org/specs/web-apps/current-work/

Faz um bom tempo que não posto uma avaliação sobre o suporte de Web Standards. Em posts anteriores tenho avaliado os browsers mais usados que são o IE, Firefox, Opera e Safari.

Uma avaliação anterior e completa pode ser visualizada no post Novos Browsers e suporte a seletores CSS.

Desde essa última avaliação o suporte a Web Standards tem melhorado bastante, com excessão do Internet Explorer da Microsoft.

A Microsoft prometeu que o Internet Explorer 8 seria fiel aos padrões estabelecidos pela W3, mas não passo da promessa, pois o IE 8 melhorou mas continua sendo o pior browser do mercado e só  lidera nas estáticas porque é imposto como browser do sistema operacional Windows.

Parece que agora o IE tem um concorrente a nível de marketing. O Chrome browser do Google tem a sua engine baseada no Web Kit que é a mesma do Safari. O Google já está sugerindo o seu browser, mas ainda de uma maneira sutil, talvez não queira cometer o mesmo erro de imposição da Microsoft.

IE 8
Acid test 3  20/100
Suporte a seletores CSS:
Teste 43 seletores (578 variações)
22 ok
1  bug
20 não suportados
349/578 testes
Safari 4
Acid test 3  100/100
suporte a seletores CSS
Teste 43 seletores (578 variações)
43 ok
0  bug
0 não suportados
578/578 testes
Firefox 3.5
Acid test 3 93/100
Suporte a seletores CSS:
Teste 43 seletores (578 variações)
43 ok
0  bug
0 não suportados
578/578 testes

Chrome 2.0.172.31
Acid test 3 71/100
Suporte a seletores CSS:
Teste 43 seletores (578 variações)
43 ok
0  bug
0 não suportados
578/578 testes

Ainda Em beta:

Opera 10
Acid test 3 99/100
Suporte a seletores CSS:
Teste 43 seletores (578 variações)
43 ok
0  bug
0 não suportados
578/578 testes

Como vocês podem conferir acima o Firefox na versão 3.5 está com suporte a todos os seletores CSS, algo que já tinha sido alcançado pelo Safari e Chrome e Opera. Já no AcidTest 3 somente o Safari, Chrome e Opera 10(beta) conseguem passar no teste, O Firefox melhorou muito no teste com uma marca de 93/100.

Bom temos ótimos browsers no mercado, mas infelizmente não podemos usar recursos avançados de CSS e Javascript porque a maioria do público da internet ainda usa o IE que é imposto pelo Microsoft nos sistema operacional Windows que tem a maior fatia do mercado. Um luz de esperança foi lançada pelo Google com o lançamento do Chrome mas a campanha desse browser ainda está bem tímida talvez porque a postura do Google não é de impor e sim de conquistar o seus usuários. Sendo assim resta a nós fazermos a nossa parte mostrando que existem outras opções de browser de internet.

Testes realizados em:
http://acid3.acidtests.org/
http://www.css3.info/selectors-test/test.html

Ao assistir uma palestra sobre SEO e SEM da Martha Gabriel presenciei um dos participantes do evento perguntar sobre o “problema do atributo alt no Firefox”. Essa sempre foi uma afirmação dos meus alunos no  curso de Web Standards na BR Multimídia. Sendo assim resolvi escrever esse artigo para esclarecer aos iniciantes de Web Standards,  Acessibilidade e SEO o que realmente acontece e o uso correto do atributo ALT para imagens no HTML.

Muitas pessoas usam o atributo alt em imagens esperando o hint que aparece quando o cursor do mouse é posicionado sobre a imagem, mas no Firefox isso não acontece. Alguns que não conhecem as reais funcionalidades desse atributo falam que é um erro do Firefox, Opera, Safari etc.

Comportamento do atributo ALT no IE e browsers modernos

O hint que aparece quando o cursor do mouse está sobre uma imagem não é papel do ALT e sim do atributo TITLE. Nos browsers que seguem mais a risca as especificações de Web Standards o hint só poderá ser visto com o uso do atributo TITLE.

Você deve estar pensando agora que isso é um erro do IE. Alguns podem ter esse ponto de vista, mas você vai perceber que quando insere um atributo TITLE em uma imagem o IE ele substitui o ALT no hint. Já que isso acontece podemos entender que o IE simplesmente usa o ALT em mais uma funcionalidade caso o usuário não esteja usando o atributo TITLE, mesmo assim seria melhor que ele seguisse a especificação para não gerar confusões.

Usando corretamente o atributo ALT

Vamos esclarecer então para que serve o atributo ALT. Como a própria abreviação sugere o atributo ALT se refere a um texto alternativo e deve ser usado nos seguintes contextos:

1. Texto alternativo para imagens. Quando um usuário desabilita o carregamento de imagens em seu browser ou dispositivo o texto do alt é exibido no lugar da imagem. No caso de algum erro acontecer no carregamento da imagem o texto alternativo também será exibido. Caso a imagem possua algum link a sua funcionalidade também poderá ser referenciada no alt, aumentando assim a usabilidade caso a imagem não seja carregada.
2. Texto alternativo para acessibilidade. Leitores de tela e leitores de código usados por portadores de necessidades especiais irão ler o atributo alt para descrever a imagem.

Só para salientar o atributo ALT  e de uso obrigatório para imagens.

Atributo ALT e SEO

O atributo ALT também pode ser usado para otimização de conteúdo on-page, mas com muito bom senso.

Uma das primeiras regras ao se otimizar o uso de palavras chave é se lembrar que o conteúdo em primeiro lugar deve ser criado para os usuários e não para sistema de busca. Em se tratando de acessibilidade e o uso do atributo ALT para imagens essa regra também deve ser seguida. Apesar do texto do ALT não ser lido normalmente na página, ele vai ser usado por leitores de tela e de código. Sendo assim não se deve inserir somente palavras chave no texto do ALT e sim escrever uma descrição condizente com o conteúdo da imagem em equilíbrio com a inserção de palavras chave.

Erros quanto ao uso e não uso do atributo ALT

Existem erros muito comuns quanto a aplicação do Atributo ALT, vou numerar alguns deles abaixo:

1. O não uso do Atributo ALT que é obrigatório para imagens de conteúdo.
2. Atributo ALT vazio somente para passar em validações de código. Todo atributo ALT deve ter uma pequena descrição da imagem.
3. Atributo ALT vazio gerado por editores de código. Diversos editores de código e editores visuais inserem automaticamente o atributo ALT vazio. Por isso afirmo que o código deve ser verificado antes de sua publicação, pois nenhum editor HTML é perfeito.
4. Atributo ALT igual para todas as imagens de conteúdo de uma página.
5. Atributo ALT somente para gerar hint do mouse. Como explicado acima o hint é uma funcionalidade do atributo Title. Caso tenha necessidade do hint use o atributo TITLE em conjunto com o ALT mas usando textos diferentes, pois os leitores de tela e código não entendem o TITLE. E lembrando mais uma vez o ALT é obrigatório.

Hoje foi o lançamento mundial do Firefox 3. A data foi marcada com o evento Firefox Download Day onde o objetivo é bater o record de software mais “baixado” em 24 horas.

Essa versão ainda não dá suporte a seletores CSS (de 43 seletores 36 passaram,  7 tipos de seletores não são totalmente suportados). A equipe de desenvolvimento garante que o suporte será melhorado na versão 3.1 do e na versão 4.0 o suporte será total. Veja essa informação no Mozilla Wiki.  Os seus concorrentes Opera 9.5 e o Safari 3 já conseguiram passar no teste e esse suporte completo é muito esperado também para no Firefox.

O Firefox 3 ainda não passou no AcidTest 3 e ficou com um score (71) menor do que o Opera 9.5 (85) e do Safari (75).

O Browser continua sendo o mais popular depois do IE (popular por imposição) e sua flexibilidade na a instalação de novas funcionalidades ainda é incomparável.

Foi lançada a versão final do Safari 3.1. A grande novidade é que a Apple guardou as cartas na manga até o lançamento final da nova versão. A última versão do beta 3.0.4 ainda não suportava completamente todos os seletores CSS. A versão lançada oferece suporte completo a CSS (até a versão 2.1), tirando assim a hegemonia do Opera 9.5 que ainda está na versão beta. Com isso temos agora dois browsers  oferecendo suporte pleno as versões vigentes do CSS.

O Safari oferece também suporte a algumas especificacões do CSS 3 (ainda em desenvolvimento) usando a engine Webkit.

Algumas novidades surgiram depois do post Novos Browsers e suporte a seletores CSS. O beta do Opera 9.5 ficou disponível para download, o beta do Firefox 3 e do Safari foram atualizados e a Microsoft disponibilizou o download do IE8 beta prometendo ficar mais atenta aos padrões. Vamos ver então as novidades de suporte a CSS:

Opera 9.5
- Suporte completo 43
- 0 com bugs
- 0 não suportados
- Suporte a 578 variações

Firefox 3.0 b4
- Suporte completo 36
- 0 com bugs
- 7 não suportados
- Suporte à 373 de 578

IE 8.0.60001
- Suporte completo 14
- 4 com bugs
- 25 não suportados
- Suporte à 335 de 578

Safari 3.0.4
- Suporte completo 25
- 9 com bugs
- 9 não suportados
- Suporte à 346 de 578

Testes realizados no site CSS3.info

Comparado com o resultado anterior vemos que a equipe do Firefox tá fazendo a sua parte, pois todos os bugs foram eliminados e agora o versão mais atual do beta possui suporte completo a 36 seletores. O Safari continua com o mesmo suporte mesmo lançando uma versão atual do beta. O Internet Explorer 8 que veio prometendo se preocupar com os padrões por enquanto não mostrou que mudou muito em relação a versão 7, somente o problema de um  seletor que não era suportado foi resolvido.

Concluindo o Opera 9.5 beta ainda continua soberano com suporte completo a selectores CSS.

Quer ter uma idéia de com serão algumas das funcionalidades do CSS 3? Instale o Safari 3.0.3 beta e visite a tabela de funcionalidades já suportadas nos browsers disponível no CSS3.info.

O Firefox possui algumas das funcionalidades implementadas mas o Safari sai na frente. E esses dois browsers fazem uso de prefixos -moz- e webkit nas propriedades, o que não é uma coisa muito bacana porque faz a gente lembrar da época das Tags proprietárias do IE e Netscape.

Se quiser pode instalar o módulo de voz no Opera e testar as funcionalidades de Speech do CSS 3.

Parece que as novas versões de browser ganharão melhorias muito significativas no suporte a seletores CSS. Segundo o sistema de teste de suporte à seletores do site CSS3.info, existem 43 tipos e 578 variações de seletores.
Fiquei surpreendido ao ver uma imagem da suposta nova versão do Opera (codinome Kestrel) que dará suporte completo a todas esses seletores.

Para termos uma idéia mais exata da importância desse suporte basta compararmos com o suporte nas versões atuais nos Browsers para Windows:

Firefox 2.0.0.6
- Suporte completo 26
- Com bugs 10
- 7 não suportados
- Suporte a 357 variações

IE 7
- Suporte completo 13
- Com bugs 4
- 26 não suportados
- Suporte a 330 variações

IE 6
- Suporte completo 10
- Com bugs 1
- 32 não suportados
- Suporte a 330 variações

Agora vamos ver o suporte das novas versões de Browser para Windows:

Firefox 3 alpha
- Suporte completo 32
- Com bugs 4
- 7 não suportados
- Suporte a 369 variações

Safari 3.0.3 beta
- Suporte completo 25
- Com bugs 9
- 9 não suportados
- Suporte a 346 variações

Opera 9.5
- Suporte completo 43
- Com bugs 0
- 0 não suportados
- Suporte a 578 variações

Mas infelizmente o IE ainda é o browser de maior fatia do mercado.
Nós desenvolvedores podemos fazer a nossa parte disseminando o uso de browsers que se importam com o suporte a Web Standards.

Bom pessoal, nessa segunda parte do artigo iremos trabalhar com a apresentação de tabelas e, inicialmente, vamos retirar o atributo border que inserirmos na primeira parte.A tabela que iremos trabalhar tem o seguinte código:

 Read this article »