Julio Vedovatto

Depois da quebra de recorde no dia 17 deste mês, o interesse pelo navegador ainda não acabou.

De acordo com a Mozilla, a versão 3 de seu navegador já rompeu a marca de mais de 20 milhões de downloads, graças a este marca, subiu mais 4% na participação do mercado. Um grande feito, pode-se dizer.

E viva ao socialismo que a Mozilla nos trouxe.

Recebi ontem uma ótima indicação da lista de discussão AIfia.pt sobre um site que mostrava os rascunhos de grandes projetos, como Twitter e Flickr na sua versão em papel, assim que se começa grandes idéias, no papel.

Rascunho do Twitter

A idéia era criar protótipos navegáveis ou não, para se passar a intenção de com o site se basea. Esses tempo atrás fiz algo parecido num workshop da vida.

Maurivan me disse uma vez que o mais maneiro dessas idéias é escanear seus rabiscos de idéias Web e jogar no Flickr para que todos vejam.

Estou fazendo o curso de Design de Iteração do Instituto Faber Ludens (do Fred, do Usabilidoido), utilizando Instalações das Faculdades San Martin do Brasil.  A coisa ruim que não poderei fazer o curso todo (pois o preço está fora do meu orçamento e patrocínio da  vovó), então selecionei apenas umas matérias, somente para ter a fundamentação teórica.

O legal do curso, que todos os trabalhos que fazemos são divulgados direto no blog do Instituto, então já fiz dois trabalinhos e publiquei no blog, para quem quiser ver, favoritem: http://www.faberludens.com.br/?q=pt-br/blog/43

O pessoal está fazendo trabalhos muito feras, vale a pena conferirem semanalmente o que publicamos por lá.

Fora isto, tenho trocentos textos do curso já pra ler x_X … ai ai

A gigante eletrônica Sansung aproveitou um conceitos básicos de ilusão de ótica para promover seu super-ultra celular, o Sansung Soul (lançado em Abril/Maio deste ano).

Veja abaixo os vídeos divulgados pela empresa, um é uma demonstração de 2 minutos de 10 ilusões de ótica, o outro eles levaram o “ser pré-histórico” para dar uma voltadinha na Inglaterra, mechendo com muita gente.

10 ilusões em 2 minutos

Passeio com o dinossauro

Achei muito boa este marketing p/ passar o conceito do Sansung Soul.

Na verdade isto está perto de acontecer, em média o Google compara 2 empresas por semana, já a algum tempo eu fico avisando: “vai chega uma hora que usaremos camisetas do Adsense para tirar grana“.

Fizeram uma série de montagens mostrando como seria elas na visão do gigante web.

Gostei mais da placa: “Did you mean”

Sempre me deparo com as seguintes situação: tenho que carregar bibliotecas (como tinyMCE) em gestores de conteúdo, mas o tamanho da biblioteca é muito grande (sem Gzip) ou tenho que carregar um CSS para impressão de uma página, mas o somente a parte do conteúdo é dinâmica, cabeçalho/rodapé são dinâmicos.

Vou carregar coisas desncessárias em páginas que não preciso? Lógico que não né. :B

Pensando um pouco cheguei a conclusão: posso “injetar” na header do documento quando atingir as páginas que preciso, veja o código abaixo, utilizando jQuery:

function loadScript(src) {
$(’head’).append(
$(document.createElement(’script’))
.attr({
type: ‘text/javascript’,
src: src + “?_” + parseInt((Math.random()*1000000))
})
)
}
function loadCSS: function(src, media_css) {
$(’head’).append(
$(document.createElement(’link’))
.attr({
rel: ’stylesheet’,
type: ‘text/css’,
media: media_css || ’screen,projection’,
href: _HTTP_PATH_ + src + “?_” + parseInt((Math.random()*1000000))
})
)
}

Onde eu quero carregar dinamicamente um CSS, eu simplesmente faço isto:

<script type="text/javascript">loadCSS("css/impressao_pagina.css", "print");

Geralmente adiciono isto no próprio html mesmo (que será carregado quando o documento terminar o seu “loading”) ou via a função ready() do jQuery.

Isto seria uma forma de Lazy Loading de pobre, mas na essência do conceito, não deixa de ser.

Rápido e indolor

Uma campanha Web feita pelo Greenpeace para mais uma das grandes erros de nosso país

Já tá mais no que na cara que grandes conglomerados industriais impetuosos irão comprar grandes partes de outros países latino americanos como Bolívia, Colômbia, Equador, Guiana, Guiana Francesa, Peru, Suriname e Venezuela.

Ainda teremos uma guerra pelo verde, vão por mim…

Enquanto nada acontece, vamos fazer nossa parte (o pouco já faz diferença sim no todo!) e assinem este protesto online.

Dia 17 (meu aniversário por sinal!), a Mozilla Foundation lançou a versão 3.0 de seu navegador (que aliás já estou utilizando e estou gostando das inovações. Fizeram até uma campanha para bater o recorde do IE de downloads simultâneos em um dia só, e conseguiram: ~8,2 milhões de downloads.

Para variar, o time de desenvolvedores do IE mandou um bolo comemorativo para o time de desenvolvimento do Mozilla, parabenizando-os pelo grande feito do novo navegador.

Bem que o pessoal da Mozilla podia fazer algo BEM mais sarcástico quando a Microsoft lançar o IE 8.

Estava guardando está faz tempo, na partida da 3º rodada do campeonato Brasileiro, jogaram meu Coritiba do coração contra o São Paulo lá no Morumbi. Tudo bem, meu timão foi para mais uma derrota espetacular, tanto que até me surpreendeu com um empate. Acho que a derrota pro Fluminense desanimou os São Paulinos.

Eis que na saída do jogo, começa aquela velha conhecida rivalidade (a qual me faz evitar ir aos estádios ver jogos), um torcedor meche com o outro, xinga a mãe da li, toma de cá e assim vai. Para variar sempre um idiota fez por merecer uns tabefes, veja no vídeo abaixo.

“Apanhou porque mereceu”

Tá certo que dei risadas, porque mostra que nós Coxa-brancas sabemos nos defender, o Bambi apanhou porque mereceu mesmo, deu para ver claramente que como o cara estava em território do adversário, tava no cantinho dele, tentando levar a vida em paz.

Mais vê se isso é atitude que se faça? Vamos aos jogos de futebol para empurrar nosso time rumo a vitória, conquistar aqueles 3 pontos, só por que o cara é de outro time não posso tornar ele meu pior inimigo, devo respeitá-lo como adversário de uma maneira ética. Este tipo de coisa que falta para os Atleticanos.

Paz nos estádios, paz na saída dos estádios principalmente, para que sempre possamos empurrar nosso time para frente sempre!

Uma simples checklist com recomendações de acessiblidade foi feita por Aaron Cannon, um desenvolvedor web e consultor de acessibilidade cego. Considerango este fato, creio que ele sabe do que está falando, e algumas coisas começarei a adotar em meu desenvolvimento.

Traduzi a lista e dei uma inscrementada em algumas questões que ele levanta, veja abaixo:

Marcações

• Separe bem a estrutura da apresentação e use marcações apropriadas. Por exemplo, listas de  marcações são listas (<ul>,<ol>,<dl>) ao invés  de uma <br> depois de cada item de uma texto  que você quer deixar como marcação.
• Cabeçalhos HTML (<h1>) são muito úteis para pessoas com alguma forma de deficiência visual, marque propriamente as seções de sua página ao invés de utilizar uma <p> estilizada.
• Dê as páginas títulos relevantes ao corpo dela,  utilizando a tag <title>.
• Indique a primeira linguagem do documento utilizando o atributo “lang” na tag <html> e indique qualquer passagem de linguagem fora a principal dentro das tags.  Ex: Documento está em pt_BR e tem algo em Espanhol, ficaria assim: “<span lang=”es”>Hola</span> é Oi em espanhol“.
• Provenha um link “pular para conteúdo” em  páginas muito longas, com muito conteúdo não relevante ao documento que estiver antes do principal.
• Sempre indique cabeçalhos de tabela utilizando tag <th> e associe todas as células com seu cabeçalho.
• Tenha certeza que a troca de campos de um  formulário está sendo feita de acordo com o que foi especificado, atributo “tabindex” é muito útil para estes casos, mas se seu formulário está em ordem, é irrelevante o atributo.

Aparência e Conteúdo

• Tenha certeza que sua página continue usável  quando é desabilitado a exibição de imagens,  isto inclue imagens de fundo em relação ao  texto. (Exemplo imagem de fundo negra com texto branco, ao desabilitar o fundo fica branco e o texto branco, pedendo usabilidade).
• Tenha certeza que a página estará utíl quando usuário aumentar o tamanho da fonte do site,  nem todos os usuários enxergam como você.
• Tenha certeza que os elementos de sua página  possam ser manipulados por teclado (pelo menos os elementos com relevância ao documento).
• Sempre que possível, utilize textos cabeçalhos descritivos e textos nos links para serem totalmente compreendidos para quem está fora do contexto. (Ex: “Sem links no estilo “click aqui”).
• Não utilize conteúdo que pisque demasiadamente ou brilhe muito, procure fazer o efeito com um intervalo de 3 segundos pelo menos.
• Pense em usuários com capacidade de visão limitada, procure utilizar fundos que façam contraste suficiente com o documento, que não agridam visualmente mesmo os usuários com capacidade normal de visão.
• Não esconde a estilização :focus dos elements (como links), caso ele esteja utilizando um teclado, ele precisa saber no o que está passando é um link.
• Não requira que os usuários percebam a fonte, cor ou qualquer outra alteração no estilo para entender o que está ocorrendo. Por exemplo: “Os itens em vermelho precisam ser corrigidos“, a menos que a palavra ou itens são indicados em alguma outra forma.

Conteudo Dinâmico

• Não abuse de muitos eventos JavaScript que  alterem radicalmente a página ou carreguem uma nova página quando acionados.

Mídia

• Tenha certeza que todas as imagens possuam o atributo “alt”, deixando em branco para imagens que julgue ser decorativas apenas. Sempre adicione atributo alt em imagens que  acompanham links. Em geral, ser breve nas descrições “alt” da imagem. mas provenha detalhes quando se veícula um significado. Utilize tambem atributo “longdesc” caso haja necessidade de uma explicação mais detalhada e o conteúdo não tem nada a respeito.
• Provenha tradução de transcripts, captions e sinais de linguagen para cada audio e vídeo com fala.
• Não esqueça de adicionar controles de vídeo e audio em seu conteúdo multimídia.
• Quando o texto pode ser muito bem renderizado pelo navegador, evite utiliza-lo em imagens (técnicas de “Image Replacing” são uma boa pedida, mas considerar traduções de texto/imagem).
• Procure não utilizar CAPTCHAS a menos que seja muito necessário, porém se precise utilizar, provenha um áudio do mesmo.

Formulários

• Sempre procure utilziar <label> em textos ao  lado de campos (Ex: Nome). Caso o formulário não contenha um texto específico na página,  insara-o e esconda via CSS.
• Utilize <fieldset> com legendas (<legend>) para associar campos de multípla seleção ou “radio boxes”.
• Identifique todos os erros de entrada no texto  (com adicão de qualquer imagem ou ícones) e coloque o a notificação do erro o mais próximo possível do campo que ocorreu o erro ou no topo da página com uma âncora para o o campo com erro.
• Provenha sempre links de ajuda com instruções inline para explicar melhor o campo quando necessário.
• Não permita que o usuário completem ações importantes sem uma confirmação ou uma opção de desfazer a mesma.
• Evite utilizar elementos HTML que não são aplicáveis para formulários, um exemplo clássico é um link para submeter o formulário.

Testando

• Teste suas páginas com validação HTML (como http://validator.w3c.org), se ela não passar por validação tem um importante motivo. Eu utilizo o add-on do Firefox, o HTML Validator.
• Teste todas as páginas para visibilidade de cores, utilizando simuladores ou add-ons no seu navegador. (Author recomenda http://colororacle.cartography.ch ou http://www.vischeck.com).
• Teste suas páginas para questões de acessibilidade (http://wave.webaim.org), mas somente depois que você terminou tudo o que deve ser feito recomendado neste documento.

Hoje em dia vale muito a pena pensar em usuários com algum tipo de deficiência, afinal ele é um cliente como qualquer outro para sua aplicação e alem do mais, fazendo isto você demonstrará seu diferencial no mercado.