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.

SSH: Simplificando tarefas com o Secure Shell

A não ser que você já seja usuário de Linux, provavelmente nunca tenha ouvido falar em SSH, eis então uma ótima hora para descobrir do que se trata e em que pode lhe ajudar no dia-a-dia. Tem um pouco a ver com Telnet (aposto que já ouviu esse nome) mas a diferença é a conexão criptografada, tornando as operações mais seguras.

Partindo do ponto que seu servidor de hospedagem tem acesso por SSH, vamos aprender a usá-lo: Para quem utiliza Linux, basta abrir a linha de comando e digitar ssh nome.do.host, já para usuários de Windows, será necessário instalar um cliente (recomendo o PuTTY, basta efetuar o download e instalá-lo). Quando iniciar o PuTTY aparecerão as inúmeras configurações, onde geralmente só é preciso indicar o Host Name e então clicar em Open.

Configurações do PuTTY

Logo em seguida será aberta uma janela com linha de comando onde será perguntado seu nome de usuário (login) e a respectiva senha.

Login pelo PuTTY

Agora divirta-se, você está conectado!

PuTTY Conectado

Legal, mas se eu já uso um cliente de FTP, para que precisaria de outro de SSH?

Existem operações que podem economizar uma quantidade incalculável de tempo se realizadas com alguns simples comandos por SSH. Imagine as seguintes situações em seu cotidiano:

  1. É necessário realizar operações em massa como renomear todos os arquivos de uma pasta, e agora? Você pode renomear todos manualmente, ou usar a cabeça e digitar no SSH algo como for arq to *.JPG; do mv $arq ${arq/.JPG/.jpg};done (nesse caso todos os arquivos com a extensão .JPG são modificados para .jpg, mas as possibilidades são infinitas).
    <update>
    Como sugeriu o Elcio, uma solução ainda mais interessante seria utilizar o comando rename "s/JPG$/jpg/” *.JPG, para evitar problemas caso a imagem contenha “JPG” no nome (no nome mesmo, não na extensão).
    </update>
  2. Agora o desafio é criar um pacote de backup com todos os seus arquivos, você pode baixar todos eles separadamente, compacatá-los usando seu programa favorito e então enviar novamente por FTP. Mas é muito mais fácil conectar remotamente em seu servidor e executar zip -r backup.zip diretorio, você tem então seu arquivo backup.zip com todos os arquivos contidos na pasta diretorio.
  3. Essa vem do blog do Elcio, no artigo “Quem tem medo do terminal?“. Suponhamos que você precise copiar uma pasta chamada “site” para “sitenovo”, para então trabalhar de maneira segura na nova versão de seu site. Você vai baixar todos os arquivos para sua máquina (igualmente ao exemplo anterior), renomear a pasta e então enviá-los de volta? Não complique! Basta um simples comando: cp -r site sitenovo. Muito mais simples, não?

Citei apenas três exemplos, mas as possibilidades são infinitas e o tempo economizado é incontestável. Não tenha medo do terminal, e aproveite o que ele tem a oferecer.

Leitura recomendada:

Designers, programadores e as necessidades do mercado

Lendo um artigo no Acorda pra Web! sobre como o flash pode ser bem utilizado na web (apesar de pouco vermos isso na prática), sem tornar o conteúdo inacessível para quem não o possui devido player. Mas no final do post foi levantada uma questão que gostaria de discutir:

Por que será que ninguém desenvolve em Flash então? Eu sei, é porque a web é feita de dois tipos de pessoas: amantes de design que não sabem programar muito bem e amantes de programação que tem preconceito de ferramentas de design.

Não é bem assim. Designer é designer e programador é programador, não adianta tentar mesclar dois talentos tão distintos que o resultado será no máximo “meia boca”. Um profissional jamais será realmente bom enquanto ele ousar atuar em áreas distintas simultâneamente.

O mercado precisa de profissionais cada vez mais especialistas em apenas uma determinada área (que de preferência seja o melhor naquilo que faz), e este profissional realizará apenas tarefas relacionadas a sua especialidade. É absurdo exigir que o designer faça também o sistema de administração em alguma linguagem server-side, e se ocorrer, o resultado já sabemos: design ou programação (ou mesmo os dois) de péssima qualidade.

Se atualmente você tem sido um “faz-tudo”, recomendo que escolha uma área a qual lhe interessa e que seu desempenho seja bom, para então aprofundar-se nela. Caso você seja o chefe de um funcionário assim (ou de vários), está na hora de rever seus conceitos. O resultado das mudanças tendem a ser positivo em ambos os casos.

Leitura recomendada:

Solucao para problema de cores com PNG

Por mais que aparentasse ser um caso sem solução, apareceu uma forma de eliminar o problema documentado no artigo “Problema com cores de PNG no Internet Explorer“. Quem explicou a causa do problema e apresentou uma solução foi Vitorio Tadao Kuroda.

O problema:

Um arquivo PNG carrega informações de correção de cores (GAMMA) pra que evite que ocorra distorções de cores nas imagens. Por ironia esse é um dos problemas encontrados na adoção desse formato.
O problema aparece do fato dos browsers tratarem tradicionalmente os valores RGB especificados no CSS (e HTML), GIF e JPEG de maneira idêntica. Já o PNG a informação GAMMA armazenada para usar o valor correto dos valores RGB não coincide com os outros elementos (css, gif, html…) pq nem todos os browsers interpretam essa informação da mesma maneira: alguns a ignoram completamente, enquanto outros aplicam um ajuste de GAMMA arbitrario.

E a solução:

é possível remover esse GAMMA do PNG assim os navegadores exibirão as imagens da mesma maneira que GIF´s JPEG´s … Mas isso não é bem verdade para todos os navegadores (SAFARI 1.3) uma outra alternativa seria tentar alterar valor do gamma offset, neste caso não tem jeito… vc só vai conseguir agradar um dos dois mais problemáticos com png´s (IE ou SAFARI 1.3).
Caso vc queira agradar o Safari 1.3 vai ter q usar o gamma offset de 0.5181347
No caso do IE o valor do gamma offset seria de 0,555555
(o Photoshop´s acima da versao 5.0 salvam o gamma offset com 0,45000)

Depois de tratar a imagem PNG com o TweakPNG (programa também citado pelo Vitorio) e manter as outras duas imagens intactas temos:

quadrado PNG na cor #2F3B6F com gamma corrigido quadrado JPG na cor #2F3B6F quadrado GIF na cor #2F3B6F

E capturas de tela para consagrar o resultado…

Firefox 2.0.0.2
Resultado do experimento no Firefox 2.0.0.2

Opera 9.10
Resultado do experimento no Opera 9.10

Internet Explorer 6
Resultado do experimento no Internet Explorer 6

Internet Explorer 7
Resultado do experimento no Internet Explorer 7

Agradeçam o Vitorio pela dica.

Trabalhando com Comentários Condicionais

Todos que desenvolvem seguindo os padrões do W3C já estão cansados de ver seus trabalhos ficarem ótimos no Firefox, no Opera e outros navegadores com boa adoção dos padrões. Mas quando chega a hora de testar no Internet Explorer quase sempre surgem problemas para resolvermos.

Partindo do ponto que você implementou o design de seu site por CSS as correções para o IE devem ir também na folha de estilos, então você apela para o uso de hacks que impedem seu código de validar e comprometem seu layout em versões futuras do Internet Explorer. E agora?

Agora você pode esquecer aquele monte de hacks e passar a usar comentários condicionais. Eis um artigo em português bem completo falando deles.

O que quero ensinar é a criar uma folha de estilos exclusiva para o Internet Explorer (por exemplo: ie.css) e incluí-la através dos maravilhosos comentários condicionais da seguinte forma:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css"></link>
<![endif]-->

Lá você poderá realizar todos os ajustes necessários apenas para o IE sem prejudicar a aparência em outros navegadores e muito menos arruinar a validação de seu código.

Mas ainda há um problema, o Internet Explorer 7 já interpreta corretamente alguns valores mas não o suficiente para não precisar de correções. A solução: como seu ie.css não é examinado pelo validador, você pode usar hacks como colocar _ (underline) antes de cada atributo, exemplo:

margin:10px;
_margin:20px;

Nesse caso o Internet Explorer 7 lê o primeiro atributo e ignora o segundo, e as versões anteriores interpretam os dois, mas aplicam o segundo pois sobrepõem o primeiro. Eu gosto de trabalhar assim, sem misturar as gambiarras de compatibilidade com meu CSS principal.

Vale lembrar que novas versões do Internet Explorer tendem a atender melhor os padrões, então utilize os comentários condicionais e hacks com cautela para que isso não venha a quebrar seu layout em versões futuras.

Problema com cores de PNG no Internet Explorer

—-atualização—-
Solução para o problema documentado neste artigo: Solucao para problema de cores com PNG. Créditos para Vitorio Tadao Kuroda.
—-fim da atualização—-

Todos já sabem que o Internet Explorer 6 tem suas dificuldades com o formato de imagens PNG e que sua versão 7 supostamente superou isso, digo supostamente pois me deparei com um problema que irei documentar neste artigo.

Não sei se esse experimento já foi realizado anteriormente, mas enfim, o objetivo é analisar três arquivos de imagens com extensões diferentes totalmente preenchidos com a cor #2F3B6F. As extensões são PNG, JPG e GIF.

quadrado PNG na cor #2F3B6F quadrado JPG na cor #2F3B6F quadrado GIF na cor #2F3B6F

Se você usa o Internet Explorer (não importa a versão) já deve estar vendo a imagem em PNG com uma coloração diferente, mas para confirmar seguem capturas de tela. As imagens estão na mesma ordem que foram apresentadas acima, por CSS coloquei bordas para melhor visibilidade.

Firefox 2.0.0.1
Resultado do experimento no Firefox 2.0.0.1

Opera 9.10
Resultado do experimento no Opera 9.10

Internet Explorer 6
Resultado do experimento no Internet Explorer 6

Internet Explorer 7
Resultado do experimento no Internet Explorer 7

É possível notar que nenhum dos navegadores interpreta a imagem PNG com perfeição mas os resultados no Opera e Firefox são toleráveis. Já o Internet Explorer apresenta um problema mais sério alterando bastante a cor original do arquivo.