Selects Multiple NÃO! Checkboxes SIM! Uma campanha pela abolição de selects multiples

Sabe, eu nunca tinha parado pra pensar sobre isso.

Selects multiples são muito chatos.
Chatos pro visitante - que tem que usar o shift pra escolher mais de um (que visitante sabe fazer isso?)
Chatos pro desenvolvedor - na hora do html e na hora de tratar os dados no server-side (php, asp, etc).
Chatos pra estilizar o visual - Alterar visual CSS de selects é quase impossível.

Quantas vezes já vimos formulários assim:

Escolha as cidades de destino (pressione shift ou control para escolher mais de uma):
Goiânia Palmas Fortaleza São Paulo Salvador

O povão gosta de mouse. O povão não gosta de teclado. O povão lá sabe o que é shift ou control?

Se quer uma página acessível não é melhor fazer assim?

Escolha as cidades de destino:

Goiânia
Palmas
Fortaleza
São Paulo
Salvador

É mais bonito ou não é? É mais fácil pro visitante ou não é?

Olha só como o código é simples:

<style>
/* coloque este estilo em seu arquivo css */
.check-select-multiple { display: inline-block; height: 60px; padding: 0 5px; overflow-y: scroll; width: 300px; border: 2px inset #DDD; background: white;}
.check-select-multiple label { display: inline-block; width: 95%;}</style>
<div class="check-select-multiple">
<label><input name="cidades" type="checkbox" value="1" />Goiânia</label>
<label><input name="cidades" type="checkbox" value="2" />Palmas</label>
<label><input name="cidades" type="checkbox" value="3" />Fortaleza</label>
<label><input name="cidades" type="checkbox" value="4" />São Paulo</label>
<label><input name="cidades" type="checkbox" value="5" />Salvador</label>
</div>

Veja que não precisamos fazer malabarismos com javascripts nem plugins pra Jquery. É só usar a simplicidade do belo HTML+CSS.

Além da facilidade pro visitante, ainda é infinitamente mais fácil estilizar uma DIV do que estilizar um Select (principalmente nos IEs da vida).

Se você gostou da minha explanação, abrace esta campanha também. Diga adeus ao select-multiple.
Faça um link para esta campanha, compartilhe no twitter, facebook, google-plus, faça bandeiras, passeatas, greve de fome...

Amém. Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Flash?!? Não, apenas Javascript + CSS

Post rápido pra recomendar a todos que visitem o site do William Grasel.

Surpeendam-se com as potencialidades do JavaScript + CSS.

Teoricamente, JavaScript pode fazer quase tudo que outras linguagens fazem, contanto que não mexa com arquivos locais e nem com recursos de hardware da máquina.

Ainda aguardo o dia em que encontrarei (ou me indicarão) uma biblioteca/framework de javascript para facilidades de programação como efeitos em gráficos, etc. Assim como temos várias em Java e outras linguagens.

PS.: Ah, pra quem não percebeu em minhas postagens com código, eu instalei o Google Code Prettifier. Como eu não tô afim de sair indo em tooodos meus posts e alterando as tags 'pre' para receberem a class 'prettyprint' eu fiz uma pequena alteração e comentei a linha 'if (cs.me && cs.className.indexOf('prettyprint') >= 0)'.

Té logo povo.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Web Developer tools no IE, OP e FF

Atualmente todo desenvolvedor web que se preze conhece a incrivelmente salvadora WebDeveloper toolbar do Firefox. Em conjunto com a espetacular Firebug (excesso de adjetivo né? heh) e com com o DOM inspector, o desevolvedor pode achar exatamante onde está o erro/problema e corrigir de forma ultra-fácil. Seja problema no HTML, CSS ou JavaScript.

A bagaça começa a ficar complicada quando o problema SÓ acontece ou no Opera ou no Internet Explorer.
Estes dois navegadores não tem algo como um DOM inspector do Firefox ou as duas extensões citadas antes.

Mas eles tem umas ferramentazinhas que quase dão pro gasto: Opera developer tools e Internet Explorer Developer Toolbar Beta 3.

Internet Explorer Developer Toolbar Beta 3

Eu já tinha ele ha um bom tempo mas não tinha usado. Daí ontem baixei a versão nova (Beta 3), atualizada agora em janeiro.

Instalei o bixo no meu IE6, e como já devem imaginar, não chega aos pés do trio do Firefox (Webdeveloper, Firebug e DomInspector). Mas dá pros gastos. Na hora do aperto com o IE talvez ajude.

Ah, não cliquem nesse primeiro botão aí (chamado "select element by click") pois costuma travar o IE (pra variar).

Algo que chamou a atenção foi o fato de a extensão ter dado um visualizador de códigos descente pro IE.

Opera Developer tools

Os fãs do Opera que me desculpem, mas essas ferramentinhas aí conseguem ser pior que a IE Developer Toolbar beta 3 (que nome pequeno).

Tão mais pra Opera Gambiarra tools.

Além de serem um saco de usar, não mostram nada sobre a principal complicação do Opera que é o suporte ao JavaScript. Ou seja, como o Opera tem um ótimo suporte aos padrões e ao DOM (exceto JavaScript) esta ferramenta aí não vai ajudar muito não.

O IE Dev Toolbar eu recomendo instalar pois pode te ajudar algum dia, mas estas ferramentas do Opera aqui não compensa perder tempo não.

------------------

Eeeeexta post: Há também o Web Accessibility toolbar para o IE, que parece ser porreta, mas o mico aqui não teve muito tempo de testar não.

Se você tá sem assunto pra fazer uma postagem nova no seu blog, aproveita ae e fala melhor dessa toolbar ae. Parece que a danada tem até negócio pra JavaScript. Me pareceu bem completa.

Ah, fala das outras duas aí acima também que eu nem falei quase nada né? "Pode crê mico, pode crê. ".

 

Té mais povo.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

TCC sobre WebStandards / Tableless

Opa pessoal, como prometido vou postar finalmente meu Trabalho de Conclusão de Curso (TCC) de Tecnologia em Redes de Comunicação do CEFET-GO sobre Padrões Web.

Editado 18/10/07: Corrigindo o link.

Vale lembrar que já re-aprendi melhor muitos dos conceitos escritos no trabalho. Ênfase na parte do Histórico da Web e do HTML que foi uma das partes mais difíceis de fazer e organizar (eu já havia apresentado uma prévia deste histórico em um dos meus primeiros posts aqui no El Micox).

De forma a facilitar o entendimento, tentei dividir/basear a metodologia Web Standards através de três pilares principais:

• Utilização dos padrões definidos pela W3C;
• Acessibilidade e universalidade;
• Separação entre conteúdo (XHTML), apresentação visual (CSS) e comportamento (JavaScript/ECMAScript);

O Resumo / Abstract do trabalho foi:

O trabalho apresenta a metodologia Web Standards para o desenvolvimento de páginas Web. Tal metodologia baseia-se no uso correto dos padrões definidos pela W3C (World Wide Web Consortium). Esta forma de desenvolvimento se contrapõe a um método de desenvolvimento bastante comum atualmente, que utiliza tabelas para montar a estrutura da página. Na metodologia dos padrões Web os elementos da página são utilizados com o propósito definido pela W3C. É prezada usabilidade e a separação entre elementos de conteúdo, visuais e de comportamento. Como, neste modelo de desenvolvimento, as tabelas não são utilizadas para montar a estrutura da página, mas apenas em dados tabulares, criou-se o termo Tableless, em contrapartida à técnica que utiliza tabelas.

O trabalho está organizado em 8 capítulos:

1. No cap. 1 é feita a introdução do trabalho e uma breve descrição de cada capítulo.
2. No segundo capítulo apresentamos alguns conceitos sobre a Web, bem como o seu histórico. E, por fim, as principais diferenças entre o HTML e o XHTML.
3. No terceiro capítulo descrevemos o método de desenvolvimento que utiliza tabelas na montagem da estrutura da página e seus principais problemas.
4. No quarto capítulo apresentamos a solução para estes problemas utilizando a metolodogia Web Standards, seus princípios básicos e seus benefícios.
5. No quinto capítulo exemplificamos o desenvolvimento de uma página baseada nos padrões Web.
6. No sexto capítulo apresentamos uma comparação entre o método de desenvolvimento com tabelas e o método baseado na metodologia Tableless.
7. No sétimo capítulo descrevemos as principais dificuldades para uma maior adoção dos padrões Web.
8. No oitavo capítulo apresentamos as conclusões e as sugestões para trabalhos futuros.

A apresentação do trabalho vocês já conheceram, agora o link para o texto em PDF é este aqui:

Web Standards - Os Benefícios do desenvolvimento Web baseado na metodologia Tableless.

Até que enfim terminei essa guerra do TCC. Ufs carambolas.

Vocês já sabem né? Críticas, dúvidas, sugestões é só comentar que eu sempre vejo e respondo. Té.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Caixa Econômica Federal corrige i-Banking

Lembram-se da minha reclamação de que a Caixa Econômica Federal queria, de certa forma, que eu gastasse R$500,00 em licença do Windows para que eu pudesse usar o Internet Banking dela?

Então, graças a diós (não sei se foram graças às minhas reclamações), ela resolveu a questão.

Agora, ela identifica o navegador do usuário e, só solicita a instalação do tal plugin se ver que o cara já está usando o Internet Explorer.

Como eu tinha reclamado antes, achei justo fazer este novo post informando que eles resolveram o problema.

Bom para nós usuários.
Espero que algúem tenha levado um CR lá no depto. de tecnologia da Caixa. :-)

//Ah, terminei meu TCC sobre WebStandards. Já publiquei a apresentação e estou esperando o ano novo pra publicar o texto em PDF aqui pra vocês.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Novo i-banking da Caixa Economica Federal só funciona no IE

Olha só que legal.

Lá estava o mico tentando acessar seu internet banking da Caixa Economica Federal como faz toda semana.

Daí eu vejo que agora eles estão pedindo um novo cadastro no i-banking. Já estranhei de cara, pois já fiz este cadastro a um tempo atrás. Mas vamos lá, vamos fazer novamente. O pior ainda estava por vir.

De repente me jogam em uma maldita tela chamada "Instalando o Módulo de Segurança". Lá vem bomba: é um controle ActiveX que você deve instalar no seu computador para "supostamente" deixar sua conexão mais segura. Que legal né?

Eu, que uso Firefox ficarei sem acesso ao internet banking da caixa. Quem usa outro navegador que não seja o IE, também ficará sem acesso. Quem usa outro Sistema Operacional que não seja o Windows também.

Será que os competentes do departamento de TI deles vivem em um casulo? Nã lêem notícias? Não sabem que o IE só está perdendo mercado? Será que estes caras não lêem jornal, não se atualizam, não acessam sites de TI?? Será que os caras não vêem isto???

Já liguei lá reclamando geral. Me prometeram corrigir até o final da semana. Vamos ver.

Editado 29-12-06: problema corrigido. Vivaa!!

Mais problemas com bancos no post do jader: Acessibilidade e Usabilidade na web: um caso (realmente) sério

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

AJAX - botão voltar: A solução

Olá povo,

Hoje vim falar de um problema que atormenta o pessoal que usa ajax sem moderação (variação da utilização do ajax onde os desenvolvedores praticamente jogam fora a tag <a> - aqui outra ótima explicação do termo by JulioGreff): O maldito problema do botão voltar que não funciona com ajax.

Bom, como eu e o Julio já falamos, Ajax não foi feito pra reinventar o sistema de links, mâaas o pessoal que ainda insiste em usar o ajax dessa forma têm uma dúvida existencial: como é que o danado do Gmail faz pro tal botão "voltar" funfar?

Várias soluções já foram propostas: soluções complicadas, soluções gringas, soluções envolvendo server-side, soluções que funcionam só no IE, que só funcionam no FF, etc.

Porém agora, após uma longa briga travada por 3 paladinos do ajax (Bernardo Rufino, Julio Greff e Cau Guanabara), parece que finalmente está saindo uma solução definitiva: Solução simples para o Botão Voltar do Ajax, Cross Browser.

Texto da postagem do Bermonruf:

Começou tudo aqui, pelo menos para mim. Eu criei uma gambiarra feia e suja que só funcionava no Firefox, aí o JulioGreff criou uma (não gambiarra!) com a mesma lógica, só que beeeeeeeeemm mais simples e objetiva, porém ainda não funcionava no nosso amiguinho IE. Depois o Cau Guanabara criou uma solução baseada nesta página que apesar de bem objetiva tinha código pra caramba, o Júlio criou uma bem parecida e mais simples, e eu lá só vendo no que ia dar. Depois disso tudo, achei que ainda dava pra simplificar mais. Resolvi analisar a página que o Cau Guanabara passou, nem rolei a barra de rolagem e fui para cá, a solução dos utilizadores de Flash. Aí fiz uns desenhos, isso mesmo, não pra layout não, e consegui uma solução rápida, simples, não necessita linguagem server-side, e Cross Browser (Testada no Opera, IE e Firefox).

Este macaco aqui não participou da brincadeira hheeh.
Bom, chega. Já falei demais. Visita a página com a solução e a página com os códigos.
Lá na página com a solução tem a tabela de compatibilidade dos navegadores e o link para os screenshots.

Té. Adiós.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Ajax - Use com moderação

Opa povo,

Quem frequenta o fórum iEvolution ou deu uma passada no Ajaxonline já deve ter lido este artigo. Para os visitantes do meu blog, transcrevo o texto completo abaixo :)

 

Bom, esta postagem está mais para um guia de boas maneiras no uso do AJAX do que para um tutorial propriamente dito.

Diversos programadores atuais, na euforia da Web 2 estão colocando AJAX em todo lugar: em links comuns, em menus, etc. Isto não é necessário. Isto é errado!
O navegador JÁ cuida dos links para nós. Não vamos re-inventar a roda.

Gostaria de lembrar a todos que AJAX não surgiu para substituir a barra de endereços no navegador e muito menos para complicar a vida do usuário impedindo acesso à links.
Ele surgiu para melhorar a experiência do usuário, impedindo reloads de página desnecessários, e para facilitar a vida do programador.

Não usem AJAX só por modismos. Não usem Ajax ao extremo. Usem com moderação.

Você deve planejar TODO o seu site como se a tecnologia AJAX não existisse, para só depois facilitar a vida do usuário incluindo os recursos em AJAX em locais como formulários, previsualizações, etc.

Se for fazer um menu, por exemplo, os links deste devem estar completamente disponíveis mesmo se o javascript do navegador do visitante estiver desativado.
Sim, é difícil eu sei, mas isto é deixar seu site acessível.

Não podemos nos esquecer também, que os usuários adoram recursos como "Favoritos" do navegador.

- Se o seu link não estiver disponível na barra de endereços, como o usuário poderá adicionar aquele seu artigo aos seus favoritos?
- Aos seu del.icio.us?
- Como poderá indicar o artigo para um amigo?
- Como poderá colocar um link para seu artigo no blog dele?
- Como poderá colocar um link em um fórum, por exemplo.

E o principal:
- COMO O GOOGLE ENCONTRARÁ SEU ARTIGO ???

Bom, caso eu não tenha te convencido, e você continue desejando usar o modismo do AJAX ao extremo, faça pelo menos de uma forma que o href ainda esteja com o endereço certo.
Assim será possível, tanto para o Google quanto para quem quiser abrir o link em nova janela/aba, chegarem até o destino.

<a href="http://elmicox.blogspot.com/" target="_blank" onclick="carregaAJAX(this.href); return false;">link menos mal</a>

Este truque consiste em deixar o endereço correto no link, porém cancela-lo com o return:false no onclick. Teste-o.

Enfim, a base da internet são os links. Não acabe com eles por modismos

Leia mais:
10 lugares onde usar (e não usar) AJAX - VS solutions
Link tem que ser link - El Micox
Javascript não obstrusivo - Busca no google

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Testes de acessibilidade e usabilidade incomuns

Olá povo.

Nós entusiastas das WebStandards sempre pregamos a acessilidade e usabilidade como uma de nossas bandeiras, mas muitas vezes, ao desenvolvermos nosso site, só lembramos desta acessibilidade apenas no quesito "ser visualizado em diversos navegadores" e nos esqueçemos dos outros dispositivos.

São poucos os que verificam a acessibilidade e usabilidade de seu site lembrando de outros quesitos também como:

1. Navegadores sem suporte a CSS
2. Navegadores sem suporte a imagens
3. Navegadores sem suporte a Javascript
4. Navegadores de dispositivos móveis
5. Navegadores de texto
6. Navegador com letras grandes ativadas
7. Visualização de Impressão

É claro que existem outras verificações que devem ser feitas como a da área útil da tela e contraste de cores, mas nesta postagem, vou focar apenas nos 6 itens acima e mostrar maneiras de testá-los.
O importante não é manter o super-ultra-moderno visual que você fez para seu site, mas sim manter o conteúdo, a navegação e a organização. Para não ter que ficar repetindo estes 3 termos toda hora, vou chamá-los de 3 básicos de um site.

Teste sem suporte a CSS

Este é o teste mais básico.
Para não ter que ficar baixando navegadores antigos só pra testar isto, você pode usar os recursos do seu browser para desabilitar o CSS.
Todo navegador decente possui um menu "Exibir > Estilos > Nenhum estilo" ou algo similar.
Assim você pode desabilitar o CSS e ver se sua página mantém os 3 básicos e permitem que seus visitantes usem o site.

Teste sem suporte a imagens

Para desabilitar as imagens e ver se seu site mantém os 3 básicos da usabilidade, podemos fazer uso da WebDeveloper Toolbar (ou WDT) no Firefox ou do menu "Exibir > Imagens" no Opera.

Teste sem suporte a Javascript

Este aqui acho que é básico para todos. Todos os navegadores modernos possuem mecanismos para desabilitar a execução de Javascript através da configuração de opções. Eu pessoalmente, acho que a dobradinha Firefox/WDT saem na frente por deixarem a tarefa bem mais fácil.

Teste com navegadores de dispositivos móveis

Enquanto estiver desenvolvendo, tenha em mente que estes dispositivos possuem tela pequena (400px ou menos). Não se esqueça também que possuimos o media type handheld como "carta na manga", apesar das media types não estarem completamente habilitadas em todos os dispositivos.
Todos sabemos que o Opera Mini é um navegador que está se popularizando para estes dispositivos. Para não ter que tirar o celular do bolso, você pode usar um simulador online do Opera Mini para PCs (feito em Java).
Na fase de desenvolvimento, podemos ver uma prévia de como está nossa página através da WDT em "Miscellaneous > Small Screen Rendering".

Teste com navegadores de texto

Novamente, pra não ficar baixando navegador demais, eu prefiro utilizar o Opera pra simular a renderização em navegadores de texto. Vou em "Exibir > Estilo > Modo usuário > Emular navegador de texto". Observação:Não sei se o CSS media type "tty" deveria funcionar aqui, só sei que não funcionou.

Teste com letras grandes

Não pense que isto não tem importância. Muitas e muitas pessoas usam sim a configuração para aumentar o tamanho de letras e facilitar a leitura, porém, nós desenvolvedores sempre nos esquecemos disso e nosso layout e os 3 básicos vão por água abaixo. Enfim, trabalhar com letras grandes é algo que pode te trazer muitas dores de cabeça se seu site não estiver bem planejado.
Pra efetuar o teste é fácil: todos os navegadores possuem um menu "Exibir > Tamanho do texto" ou algo similar.

Visualização de impressão

Este também é algo muito importante e agente sempre esquece.
Após desenvolver seu site, não custa nada dar uma passada no visualizador de impressão pra ver se está tudo ok.
Não se esqueça que, pra nos ajudar, há o media type "print" nos navegadores modernos.

Ao desenvolver suas declarações CSS para o media "print", seja bonzinho com seu usuário e com o cartucho de tinta dele: retire imagens desnecessárias, cores desnecessárias, negritos desnecessários, layouts desnecessários e mantenha o foco no conteúdo daquela página apenas, nada de ficar exibindo menus, cabeçalhos e rodapés em excesso, afinal, não há como navegar via folha de papel não é?

 

Enfim, aqui você acabou seu pequeno teste de acessibilidade e usabilidade. Espero que seu site não tenha dado muitos problemas :) . Lembrando para os que ainda não se converteram, tudo fica mais fácil quando você é adepto dos WebStandards (duvida? faça estes testes com minhas 2 conversões). Não se esqueça que o importante não é seu visual mas sim os 3 básicos citados anteriormente: conteúdo, navegação e organização.

Outras ferramentas úteis pra avaliar sua acessibilidade são: o validador de acessibilidade DaSilva (pra mim é lei) e a Mozilla Accessibility Extension (que eu ainda não testei - testem aí e comentem hehehe ). Editado 04/01/07: Tem também o Examinator que o Henrique indicou nos comments.

Ah, não se esqueçam de assinar a lista de presença quem ainda não assinou.
Este primata se despede aqui. Até o próximo episódio. :)

// Dúvidas? Este artigo também foi postado no fórum iEvolution. Joque suas dúvidas lá!
// Se eu falei alguma bobeira, comente aí :) !!

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.