Não, não, não, não, não! Não venho falar de política (cruzes canhoto!).
Conforme o Paulo Querido bem observou, o site Candidatura do professor Aníbal Cavaco Silva à Presidência da República é um perfeito exemplo, um dos melhores case studies, sobre como não fazer um site.
Apontou, principalmente, a questão dos formatos (proprietários) utilizados, e, apesar de, com isto, o ter feito, da acessibilidade, já nem falou
. Pois bem: pego no mote, e falo eu (de acessibilidade, e de markup no geral também)!
- acessibilidade não é só dar atributos ALT às imagens;
- não é preciso utilizar mais células vazias de tabela e imagens em branco para fazer espaço em branco à volta do conteúdo; existe o padding;
- aliás, não é preciso (nem correcto, nem muito amigo da acessibilidade) usar tabelas para fazer layouts; podem guardá-las para apresentar os resultados das eleições, pois é para coisas dessas que elas servem.
Como de gente que fala, fala, fala, fala, e não os vemos a fazer nada
está o nosso País cheio, nada como mostrar do que se fala: réplica não-funcional do site da Candidatura do Professor Aníbal Cavaco Silva, para efeitos de case study. XHTML 1.0 Strict:
- válido;
- acessível (acessível mesmo, não obrigando, por exemplo, um utilizador cego a estar constantemente a ouvir — através do screen reader — que vai começar uma tabela com x linhas e y colunas, que se vai a ver que não tem rigorosamente nada a não ser imagens);
- leve (a magia do aspecto é toda feita no ficheiro CSS, que pode e deve ser um só para todas as páginas do site e fica em cache);
- legível (o que proporciona uma manutenção à prova de alopecia auto-induzida).
Tempo de confecção: 45 minutos, incluindo alguma edição de imagem e procrastinação q.b.. Orçamento em software: €0,00 do sistema operativo, €0,00 de software da especialidade, €0,00 de software de edição de imagem, €0,00 de cliente de FTP. 6×3 são 18, 18 mil, 18 milhões, errr… é fazer as contas!
Licenciamento do código (XHTML e CSS): é levar senhores, é levar. Se passarem por aqui e o quiserem aproveitar, força. É o meu contributo para a democracia.
11 Comments
Lindo! Clap clap clap|
Boa iniciativa! Meus parabéns! :)
Aguardemos pelo dito "portal" que irá surgir dia 10 de Novembro.
Aquilo foi feito para ser temporário por é que deve ter sido feito às 3 pancadas, se calhar por um secretário de um mandatário qualquer, que não percebe nada de computadores. Mas como diz o RVidal, esperemos pelo portal, cheira-me que vem por aí, .Net, não sei porquê, mas cheira-me.
Pá, pensei, pensei… e a única palavra que me ocorre para começar o comentário é mesmo: PWNED! (^^,)
Mais uma vez, João, mostras que os standards estão aí para facilitar, não dificultar. 45 minutos? Aposto que demoraram mais a fazer as imagens dos "botões"..
Gostava de ver a diferença entre a oficial e esta nova versão num telemóvel. ;)
Sendo pouco original.. parabéns. :)
Mas não vão querer nada com a tua solução: não só é barata demais, como demonstra a incompetência de quem fez a primeira - e, por conseguinte, a incompetência de quem tem poder de decisão e os escolheu.
Preferirão abafar, ou fingir não saber de nada. Ei, talvez te paguem para ficar calado, enquanto implementam parte do que fizeste (e fá-lo-ão mal e porcamente, afinal uma solução perfeita significa que já não são precisos) e, de seguida, anunciam o "novo site acessível para deficientes" aos quatro ventos. :)
Hmm… acho que ando um bocado amargo com tanta incompetência corporativa à minha volta. Sorry. :(
@andr3:
Sim, e eu até tenho a vantagem de aproveitar os botões deles, mas, mesmo que fosse feit de raiz, ia dar ao mesmo, porque — se não fosse meu objectivo que isto ficasse mesmo igualzinho — eu não utilizaria imagens para os botões (para quê complicar?)…
Não me preocupei com isso, confesso, mas está feito de forma a que:
1) os browsers de telemóveis (mais antigos, possivelmente) que não carreguem CSS ficam com uma versão plain, que tem a vantagem de não carregar imagens que só iriam atafulhar a coisa num ecrã pequenininho.
2) para os dispositivos que interpretem folhas de estilo CSS sob a insígnia do meio "handheld", é só perder mais 5~10 minutos a fazer um cabeçalho mais pequeno e a fazer uma versão do CSS principal com o container reduzido a 320px ou algo assim.
@dehumanizer:
Isso soa imenso a teoria da conspiração… :P Por mim, podem pegar e usar à vontade, até nem precisam de dizer-me nada. Obviamente, o que aqui está não é uma solução "chave na mão" — há muita coisa que pode ser melhorada, mas isto é apenas um exemplo conceptual (com uma concretização, para sustentar a sua validade).
A quem referiu a condição de "provisória" da página
Penso que, no geral, as razões por detrás de layouts maus se distribuem em 2 vertentes:
1) desconhecimento de causa;
2) lei do menor esforço, optando por uma ferramenta WYSIWYG (que, na realidade, são WYSIAYG — What You See Is All You Get, plus a few proprietary garbage)
Mesmo não sabendo qual se aplica, "todos os caminhos vão dar a Roma":
1) se não tiveram conhecimento para o provisório, também não terão para o definitivo (pelo menos não em 2~3 semanas);
2) se a lei do menor esforço impera, então é pouco provável que existam 2 layouts (provisório e definitivo) nuclearmente diferentes.
Não é teoria da conspiração :). É, como disse, estar "amargo" por assistir quase diariamente a certas coisas.
Lembra-te, ao seres competente estás a revelar a incompetência de outros. E esses outros, se tiverem algum poder de decisão, vão rejeitar a tua proposta (bem melhor do que a deles) só por causa disso.
Eles vão aproveitar o que fizeste SE for de forma discreta, fazendo passar aquilo como sendo deles. Só assim. Nunca na vida vão admitir que receberam - ou pagaram - sei lá quantos milhares de euros a alguém para depois alguém fazer melhor… e de graça… e em menos de uma hora (acredita, eles precisaram de semanas, no mínimo).
Eu lido com estas coisas todos os dias - e nem sequer trabalho em nada relacionado com design de sites.
João,
Essa foi de morrer a rir! :)
Só prova que o sentido de humor é uma arma; muito boa.
45 minutos bem usados, meu caro.
Simulação Melhor que Original
Tenho que admitir que vi primeiro a simulação, estes motores de busca quando inviezados pregam partidas,e sem ter reparado no URL não me apercebi que era uma simulação. Fui ver o código e achei a marcação muito boa. Só depois é que olhei com atenção para as âncoras e aí percebi.
Quanto é que a pré-candidatura terá gasto com a construção do site.
Quando se aceita maus serviços privados depois não é de admirar que a administração pública aceite qualquer lixo que se lhe entregue.
Os Restante IncompetentesCandidatos
O estado das páginas dos restantes candidatos é semelhante na utilização de tabelas para arranjos de página. E claro que não vale a pena procurar sequer por Alt.
Observações finais
Nota-se que os candidatos não devem ter qualquer dificuldade em usar ratos, pois se tivessem desconfio que pensavam duas vezes. Também não têm problemas de visão pois usam em alguns textos cores cujo contraste me exige marcar o texto para poder ler…
Update (jcraveiro): ler artigo sobre o assunto, no blogue do autor deste comentário.
@dehumanizer:
Isto não é nenhuma proposta. É uma sugestão, com oferta de um "kit de iniciação". ;)
Com "proposta", não quis dizer "vocês usam isto e pagam-me X". O que tu fizeste (corrige-me se estou errado) foi "usem isto, estejam à vontade". Mesmo ISSO é uma proposta.
Estás a imaginar os tipos que fizeram o site em 2 meses e levaram sei lá quantos mil euros a chegarem a quem lhes pagou e dizer que "um tipo fez uma versão corrigida em 45 minutos, e oferece-nos essa versão"? Já viste o quanto eles passariam por incompetentes?
Mas não ligues; admito que ando amargo demais devido à minha situação actual. Isto passa. :)
One Trackback
[...] Desde que fiz o artigo e demonstração relativos à versão provisória do site da candidatura do Professor Cavaco Silva, nunca mais liguei ao assunto. Há instantes, através duma excelente análise do Vítor Azevedo aos Sites dos Candidatos às Eleições Presidenciais 2006, é que me lembrei que nos entretantos iria ficar online a versão definitiva do mesmo — verdade, ficou. [...]