Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

Recentemente, Trevor Davis postou em seu site uma solução para abrir links externos em uma nova janela com jQuery, que consiste no seguinte:

$(document).ready(function(){
	$("a[@href^='http']“).attr(’target’,’_blank’);
});

O que esse script faz é pegar todos os links da página que iniciem com http e com isso o JavaScript adiciona o atributo target com valor _blank. É uma solução muito interessante, mas a meu ver, eu utilizaria uma solução mais semântica:

$(document).ready(function(){
	$("a[@rel=external]“).attr(’target’,'_blank’);
});

Minha solução pega todos os links da página que contenham o atributo rel=”external” e faça com que os mesmos abram em uma outra aba/janela. A meu ver, bem mais semântico. E você, tem alguma sugestão?

A Usabilidade é uma coisa que deve ser levado muito a sério, e recentemente, a falta de usabilidade em uma artigo do nosso cotidiano causou a morte de 2 pessoas na Turquia. O problema ocorreu devido ao usuário dispor em seu teclado do caracter exato que deveria usar para escrever uma palavra, que se escreve com a letra “I” turca, terminando por escrever outra distinta com um siginificado ofensivo, radicalmente diferente do pretendido.

Tudo começou quando Ramazan Çalçoban enviou um SMS para sua ex-mulher Emine, mas ela entendeu a mensagem como um insulto. Ela então mostrou a mensagem para sua família, e seu pai disse: “Ele está lhe tratando como se fosse uma prostituta”

Ramazan Çalçoban foi então a casa de Emine explicar o ocorrido, mas chegando lá foi insultado por toda a família dela, em consequência, matou sua ex-mulher, foi preso e na prisão se matou.

Referências

• Úsalo : Un problema de usabilidad en el SMS propicia dos muertes.
• 20minutos.es: Dos muertos por un SMS erróneo.

A Volkswagen nos mostra em um vídeo publicitário como foi feito o novo site da volkswagen.co.uk. Muito interessante, perca 1 minuto do seu tempo e veja o vídeo:

Quer conhecer pessoalmente grandes profissionais da Arquitetura de Informação? Alexandre Formagio deu a dica e eu vou reforçar a mesma. No dia 10 de Maio acontecerá na Faculdade Impacta um encontro e em seguida uma palestra sobre Arquitetura de Informação para marcar o início da primeira turma de Pós Graduação em Arquitetura de Informação na Faculdade Impacta Tecnologia em São Paulo.

Os palestrantes serão Guilhermo Reis e Silvia Melo, sem dúvida dois profissionais que eu adimiro e muito. Como sou um entusiasta da área, estarei presente lá. E aqueles que querem me pagar um café, um almoço, uma cerveja, ou trocar uma idéia, aconselho a fazer a sua inscrição.

Nesse Cheat Sheet desenvolvido por Michael Leigeber você vai aprender a economizar algumas boas linhas de código em suas declarações CSS:

Download

• Mirror 1
• Mirror 2

Até os sites pronográficos pensam em acessibilidade. O conteúdo está todo em formato áudio:

Via: Seraccesible

Se você irá mostrar a um cliente o desenho do site em um papel, sabe o valor de apresentá-lo em uma versão interativa com links. Os usuários do Visio sabem que é muito simples criar protótipos interativos em HTML a partir de um set de Wireframes (Arquivo > Salvar como página Web). Mas dessa forma ocorre uma desvantagem se você precisar enviar esses arquivos por e-mail, pois dependendo da complexidade do projeto, serão criados muitos arquivos HTML e várias imagens.

Os PDF’s são ideais para serem enviados por e-mail, mas leva-se tempo para criar protótipos interativos em PDF com o Visio. Abaixo você verá um tutorial de como fazer isso:

1. Crie links nas páginas de primeiro plano, não nas de segundo plano - utilize os stencils do documento para gerenciar suas modificações.

É uma pratica habitual quando se cria wireframes no Visio colocar os elementos standard das páginas - topo, conteúdo, navegação - em uma página de fundo (background), assim os elementos se repetem em cada página de primeiro plano (foreground). De qualquer forma, quando publicado em PDF, o Visio não cria links para as camadas de background. Para criar protótipos interativos em PDF eles devem estar na página em primeiro plano. Isso significa que para uma distribuição de página standard, todos os elementos de navegação devem estar em cada página do wireframe. Poderia-se copiar e colar os elementos de navegação em cada página, mas isso seria um trabalho duro. Ao invés disso, utilize os stencils do documento. Funciona assim:

• 1.1 - Crie um painel de navegação, utilizando uma forma distinta para cada link. Por exemplo, para criar 5 abas na parte superior da página, cosntrua cada aba em um bloco de texto separado.
• 1.2 - Para adicionar links, aperte CTRL + K para abrir o quadro de diálogos de links. Depois de adicionar o Sub-link (não o link direto), clique em browse (examinar) e encontre a página que está seu wireframe, ao qual deseja linkar (ou introduza a URL).
• 1.3 - Repita o primeiro e o segundo passo sempre que necessário. Uma vez que estiver pronto o painel de navegação, agrupeo (selecione todos os elementos, e aperte Shift+CTRL+G).
• 1.4 - Abra os Stencils do documento: Arquivo > Formas > Mostrar Stencils do documento.
• 1.5 - Arraste os elementos agrupados de navegação ao painel de Stencils.
• 1.6 - Clique com o botão direito sobre o grupo de elementos e renomeios (por exemplo: “NavBar”).
• 1.7 - Em cada página de seu wireframe, arraste oe elementos sobre a página de primeiro plano e os coloque em sua posição.
• 1.8 - Se necessitar fazer modificações no grupo de navegação, clique com o botão direito sobre o Stencil do documento, e selecione Edição Mestre > Edição de forma Mestre. Qualquer modificação feita será atualizada automaticamente em qualquer página.

2. Utilize o menu PDF no Visio, ao invés de imprimir através do Adobe PDF no menu de impressão.

Para que os links do PDF funcionem, utilize o menu PDF no Visio (Adobe PDF > Converter para Adobe PDF). Por alguma razão, se utilizar Arquivo > Imprimir e escolher Adobe PDF como impressora, os links do PDF não funcionam.

O resultado final será links funcionando em cada página. Para alterar os estados dos botões ou criar outros elementos interativos, é necessário editar os arquivos no Acrobat

Leve-o ao nível seguinte.

Esse artigo de Boxes & Arrows é uma fantástica revisão de como criar protótipos em PDF clicáveis com camadas, multimídia e muito mais. Foi centrado no uso avançado das ferramentas de edição do Acrobat

Referências

• elclerigo! - Cómo crear prototipos interactivos en PDF’s desde Visio

A primeira vista essa frase parece ridícula: “Não use mailto:“. Mas por que? Já parou para pensar que existem usuários iniciantes de internet, que nunca sequer na vida, utilizaram seus clientes de e-mail que vem pré-configurados em seu sistema operacional? Que eles estão acostumados, a aquela rotina de abrir o Browser, acessar a página do seu cliente de e-mail e lêlos todo alí?

Imagine a seguinte situação, uma empresa, em sua página de contato só coloca o mailto: em um link para contato, o usuário, ao clicar, pensa que será levado para um formulário qualquer, mas aí, após alguns segundos, aparece aquela janelinha de configuração de conta no cliente de e-mail, eu particularmente detesto isso, em algumas pessoas pode até causar fastidio!.

Utilize, sempre que possível, um formulário de contato, simples de preferência. Não quer utilizar um formulário? Deixe seu endereço, telefone, alguma forma de contato por sinais de fumaça, mas nunca cause esse descaso com o usuário.

Tudo começou como uma mera brincadeira, como uma forma de buscar aprendizado, estava engatinhando no mundo do desenvolvimento web, e precisava buscar um meio de adiquirir conhecimento, dessa forma então resolvi montar o meu blog. Parecia que não ia vingar, que eu iria postar alí durante um mês e depois largar o blog as traças, mas não, hoje acabou se tornando um blog de referência em CSS e XHTML. E também como puderam notar, de 3 meses para cá estou postando também bastante coisa sobre Arquitetura de Informação e Usabilidade, coisa que estou estudando muito ultimamente, quem sabe daqui 2 anos não viro referência no assunto também não é?

Infelizmente não vai ter layout novo, pois eu como designer sou péssimo, não vai ter promoção, ou seja, ninguém vai ganhar nada, que pena, mas eu só tenho a agradecer aquelas pessoas que me incentivaram e me incentivam, aqueles que perdem seu tempo lendo os meus posts, seja através do Feed ou aqui no blog mesmo, e agradecer também aos que me odiaram, e me odeiam, pois são elas que me motivam a manter esse blog. A todas essas pessoas o meu muito obrigado.

Aqui você pode ver um vídeo com um teste de usabilidade utilizando protótipos em papel que ajudou a equipe de Usabilidade da Corel a encontrar alguns defeitos em um desenho preliminar de um produto de criação de sites web:

Via: estándares y accesibilidad