Quirks mode e Standards mode: Entendendo os modos de renderização

Se você é do período sombrio da web, quando Netscape e Internet Explorer finalmente resolveram implementar o CSS (mesmo que não respeitando padrão algum), não deve ter boas lembraças de como os browsers renderizavam suas páginas. Apenas mais tarde os padrões do W3C ganharam força e os navegadores tiveram de implementá-los.

Netscape Internet Explorer Opera

Surgiu então um problema, com a renderização obedecendo os padrões muitos sites “quebrariam” por serem projetados para navegadores antigos. A solução foi que browsers novos passassem a ter dois modos de renderização: o Quirks mode e o Standards mode, também conhecido por Strict mode (existe ainda o Almost Standards mode, que é uma pequena variação do Standards mode).

Sites antigos continuariam sendo renderizados “corretamente” (do ponto de vista de como foram projetados) através do Quirks mode, que obedece regras sem muito sentido criadas no passado pelos browsers. Enquanto sites novos poderiam usufruir dos padrões criados pelo W3C pois seriam tratados pelo Standards mode. O navegador ficou responsável por escolher o modo apropriado através do Doctype usado (ou ausência de um). Veja uma tabela com possíveis declarações de Doctype e seu resultado em cada navegador.

O Quirks mode hoje é uma dor de cabeça para muitos desenvolvedores, é preciso estar ciente de qual modo de renderização está sendo usado em seu site para evitar problemas “misteriosos”. Muitas vezes o Internet Explorer volta a usar o Quirks mode por detalhes como uma declaração XML ou mesmo um comentário antes do Doctype, se você desenvolve seguindo os padrões isso pode facilmente quebrar seu layout.

(Almost) Standards mode é a melhor opção para seu projeto, embora os browsers novos tenham suporte ao Quirks mode é muito complicado e pouco produtivo trabalhar com ele por não ser realmente padronizado. E mesmo utilizando o Standards mode seu site ainda deve ficar “legível” em navegadores antigos.

Leitura recomendada:

Web 2.0: Evolução ou retrocesso?

É fácil notar os inúmeros entusiastas da tal Web 2.0, empresas e desenvolvedores tirando proveito ao prometer serviços de acordo com as tendências da nova Web (em que Web estamos mesmo?). Não acho errado, é mais simples que explicar diversos conceitos técnicos a seus clientes, o problema está quando o foco do projeto passa a ser a tecnologia e não o usuário em si.

Antes de pensar em “Web 2.0″ é fundamental dominar alguns itens básicos como [BP:215]usabilidade[/BP], acessibilidade, semântica e design. Mas na prática vemos diversas páginas com [BP:215]JavaScript[/BP] obstrutivo, efeitos visuais exagerados e layouts confusos cheios de brilho. É uma falha grave esquecer-se do básico.

  • JavaScript pode ser ótimo, mas não deve utilizar muitos recursos do sistema e nem ser obrigatório para navegar pelo site;
  • Efeitos visuais são bem vindos em alguns momentos, como indicar uma alteração ou exibir algum alerta. Mas nunca a cada movimento do usuário;
  • Layouts podem ser bem trabalhados, mas se não forem fáceis de se usar perdem todo o sentido que é servir o conteúdo de forma agradável.

Jakob Nielsen está certo ao dizer que a Web 2.0 está fazendo empresas e desenvolvedores negligenciarem o bom design, aquele voltado a facilitar a vida do usuário. Nesses casos o termo parece inadequado, deveria ser algo como “Web 0.1alpha”, coerente com o retrocesso.

Se você deseja desenvolver aplicações web e sites modernos, comece aprendendo o básico de acessibilidade, usabilidade, semântica e design. Somente respeitando esses itens a web pode realmente evoluir e a experiência do usuário ser cada vez melhor.

Customizando Checkboxes e Radio Buttons, e uma abordagem sobre Usabilidade

Vi no del.icio.us do tableless uma dica para personalização de Checkboxes e Radio Buttons, se chama CRIR: Checkbox & Radio Input Replacement, muito interessante diga-se de passagem. O resultado são Checkboxes e Radio Buttons mais sofisticados e atraentes, acesse a página da técnica ou simplesmente veja a imagem:

Checkboxes e Radio Buttons customizados

Achei realmente muito bonito. Mas isso me faz pensar: Será que todos os usuários perceberão que se trata de um Checkbox/Radio Button? Quando estão acostumados com a aparência padrão encontrada em seus sitemas operacionais ou mesmo navegadores, pode gerar certa confusão apresentar Checkboxes e/ou Radio Buttons totalmente diferentes (mesmo mais agradáveis).

Preservando a aparência padrão dos elementos você facilita a vida do usuário na hora de reconhecê-los, um exemplo clássico são links na cor azul e sublinhados, tão defendidos por Jakob Nielsen. Mas acho que a maioria concorda que isso é visualmente desagradável, ou no mínimo pouco criativo. Então o que fazer?

Tente conciliar os dois lados, customize seus formulários e links, mas faça de modo que sempre se pareçam com formulários e links. O usuário não deve parar para pensar “será que isso é um link?” ou “será que isso é um checkbox?”. É totalmente possível servir um site com bom design e ao mesmo tempo fácil de ser usado, e os resultados são ótimos.

HTML ou XHTML, qual escolher?

Essa é uma questão antiga, muitos gostam de considerar o HTML ultrapassado e usam XHTML por ser “sua versão melhorada”. Esse raciocínio não está errado, mas que a verdade seja dita: seu XHTML provavelmente é interpretado como HTML.

Acha estranho? Quando você declara a seguinte tag: <meta http-equiv="content-type" content="text/html; charset=utf-8" />, está dizendo para seu documento ser interpretado como HTML (por mais que tenha escrito em XHTML).

Não se sita mal, (ainda) não considero viável servir documentos como XHTML real nessa web que está sempre sendo atrasada por alguns. Isso não é motivo para abandonar o XHTML e voltar a escrever HTML, somente para algumas pessoas as quais eu respeito a opinião. É interessante continuar escrevendo e validar seu XHTML, de preferência com o DocType Strict.

Você se educa seguindo as rigorosas normas de criação do XHTML e só tende a ganhar com isso, terá mais chances de escrever um código semântico, limpo e organizado (não que no HTML você não possa, a diferença é que o XHTML praticamente te obriga a isso).

Leitura recomendada: XHTML:

Instalação do Ubuntu 7.04 Feisty Fawn

Como já devem ter visto, foi lançado o Ubuntu 7.04 Feisty Fawn recentemente. Finalmente pude testar seu processo de instalação. É simples e intuitivo, após inserir o CD é carregado um menu onde há opções como selecionar o idioma, escolher mapa de teclado, resolução de tela e algumas opções de acessibilidade para poder iniciar a seção.

Menu inicial do Live CD do UbuntuSelecionando o idioma a ser usado no Live CD do UbuntuMenu inicial pronto para iniciar o Ubuntu

Logo vem uma tela de carregamento bastante bonita (menos assutadora que uma preta com textos passando). Em seguida o Gnome é iniciado com um belo desktop rodando diretamente do CD.

Ubuntu sendo carregadoGnome sendo carregadoUbuntu desktop carregado

O sistema operacional estará rodando diretamente do CD, logo é possível experimentar o Ubuntu sem medo de afetar o qualquer outro sistema já presente em seu computador.

Há um ícone no desktop para iniciar a instalação em seu HD, a começamos selecionando o idioma da instalação, em seguida a localidade e o mapa do teclado. Vem então a parte que considero mais crítica: o particionamento do disco, nesse momento é bom saber exatamente o que está fazendo caso não queira perder dados existentes em seu HD.

Há também uma nova etapa que chamou a atenção: a possibilidade de importar contas de usuários presentes em instalações anteriores de outros sistemas operacionais, salvando também seus arquivos.

Selecionando o idioma na instalação do UbuntuSelecionando sua localidade na instalação do UbuntuSelecionando o mapa de teclado na instalação do UbuntuIniciando o particionador na instalação do UbuntuSelecionando um particionamento automático na instalação do UbuntuPossibilidade de importar contas anteriores na instalação do Ubuntu

A parte mais trabalhosa já foi, agora basta selecionar seu nome de usuário, senha e nome do computador. Será gerada uma lista com todas as opções marcadas e operações a serem feitas, caso esteja tudo certo, basta clicar em Install para que o processo não interativo comece.

Setando nome de usuário e senha na instalação do UbuntuLista com todas as opções marcadas e alterações a serem feitas para a instalação do UbuntuInício do processo não interativo de instalação do Ubuntu

Após todos os arquivos serem copiados para o HD, ainda são baixados pacotes de linguagens (no caso Português do Brasil) antes que a instalação finalize, e quando finalizar você poderá continuar usando o Live CD ou então reiniciar o sistema para desfrutar de seu Ubuntu recém instalado.

Baixando pacotes de linguagens na instalação do UbuntuOpção de reiniciar ou continuar usando o Live CD na instalação do Ubuntu

Logo que reiniciar e entrar em seu sistema novinho em folha verá novamente a bela tela de carregamento do sistema operacional e posteriormente uma de login (lembra da parte onde se escolhia um nome de usuário e uma senha?).

Agora é só alegria, já temos um desktop sólido e muito funcional, com assistente de atualização e muitos aplicativos úteis pré-instalados. Caso não goste das cores padrões do Ubuntu, troque o tema com alguns cliques, e que tal dar uma navegada com o grande Mozilla Firefox?

Carregamento do Ubuntu já instaladoTela de login do UbuntuDesktop com Ubuntu recém instaladoGerenciando atualizações do UbuntuMudando o tema padrão do UbuntuNavegando com o Mozilla Firefox no Ubuntu

Simples não? Todo o processo ocorre em interfaces gráficas, todas simples e intuitivas. Se toda essa facilidade ainda não é motivo para experimentar o Ubuntu, experimente o serviço ShipIt e receba CDs gratuitamente em sua casa.

Para quem quiser também experimentar o Kubuntu 7.04 (Ubuntu com KDE), recomendo o tutorial de instalação escrito pelo Pascutti.