Posts com a tag: "Desenvolvimento"

É correto abrir links em novas janelas?

Não, não é correto. À primeira vista, é comum acharmos que  a decisão de abrir links em novas janelas depende do site e do seu público. É normal imaginar que visitantes habituados a clicar em vários links estão mais acostumados a abri-los em novas janelas e visitantes que clicam menos são mais propensos a abrir links em uma nova janela para poder permanecer no site e navegar por ele depois. No entanto, isso não é verdade.

E aí? Na minha janela ou na sua? E aí? Na minha janela ou na sua?

Os usuários não gostam de lidar com dezenas de abas abertas involuntariamente e alguns visitantes tendem a se irritar rapidamente ao verem o botão “Voltar” desabilitado. Além disso, alguns visitantes podem não perceber que uma nova janela foi aberta e igualmente se frustarem com o botão “Voltar” desabilitado. Isso vai contra os bons princípios de usabilidade e experiência do usuário e nós, web designers, temos obrigação de defender tais princípios.

Continuar lendo »

O que é Javascript não obstrutivo?

Javascript não obstrutivo diz respeito a scripts que, ao serem desabilitados, não interferem no funcionamento da página.

Como assim?

Simples, digamos que você tem um menu que funciona com JavaScript:

Menu DropDown Olha que maravilha, você passa o mouse e surgem novas opções.

O que aconteceria se alguém acessasse sua página com um navegador que não tem suporte a JavaScript[bb]? Ela deixaria de funcionar? No exemplo acima, como o internauta chegaria até “sub Option 0”?

Utilizar JavaScript não obstrutivo é utilizar scripts que aprimorem suas aplicações web sem que elas fiquem dependentes do mesmo.

Um bom exemplo disso são os links Boo-box. Ao clicar em um link, uma chamada JavaScript abrirá uma vitrine dentro do site. Caso o Javascript esteja desabilitado, o internauta é redirecionado para uma nova página. A aplicação funciona de qualquer maneira, o JavaScript apenas adiciona uma funcionalidade.

Por que utilizar?

Simples, JavaScript não obstrutivo é uma das principais maneiras de garantir a acessibilidade, facilitar a manutenção e ganhar tempo na hora de desenvolver seu site.

Para saber mais

Nos próximos dias estarei publicando a série The Seven Rules Of Unobtrusive JavaScript traduzida. Então assine o feed e fique por dentro das 7 regras essenciais para um JavaScript não obstrutivo.

Acessibilidade: Design com foco no conteúdo

Em se tratando de web, uma das coisas que mais atrai minha atenção é saber que o usuário tem o controle. Ele não precisa seguir um caminho linear, ele navega por onde bem entender à procura da informação desejada.

Facilitar o acesso à informação é o caminho do sucesso em um projeto web. E nesse ponto, é crucial aliar conteúdo de qualidade a uma apresentação impecável. Pense comigo: você pode ter o melhor produto do setor, mas se não apresentá-lo de maneira agradável contribuirá para reduzir o seu nível de confiabilidade.

Imagem Vitrines Os produtos podem ter a mesma qualidade, mas quem transmite mais confiança?

Entretanto não podemos esquecer do acesso à informação, não adianta ter um produto apresentado de maneira glamurosa se você não facilita o acesso a ele.

objetivo.jpg A informação está lá. Mas o usuário consegue chegar facilmente até ela?

E o que isso significa na prática?

Facilite a vida do usuário

Tenha em mente que muitas vezes você “perde” (entre aspas) no design para aumentar suas chances de conquistar o internauta.

Exemplo: um site com uma barra de rolagem interna.

barra1.jpg Até certo ponto, layout agradável e conteúdo ok.

No meu monitor de 17 polegadas o site aparece exatamente como na imagem acima. Agora veja o que acontece quando acesso de um monitor menor.

barra2.jpg Cadê o conteúdo? O site inteiro fica dentro desse espaço.

O conteúdo do site (que no fim das contas é o que realmente importa) fica num espaço pequeno e difícil de navegar. Apesar do layout “bacana”, não consigo acessar as informações de maneira agradável. Nesse caso, será que não valeria a pena modificar o layout para facilitar a navegação? Quem acha que sim, levante a mão.

hands.jpg Viva o usuário!

Isso quer dizer que devo fazer meu site no menor tamanho possível? Não. A recíproca também é prejudicial, diminua seu site para monitores 800×600 e ele ficará menor ainda em monitores de grande resolução, prejudicando a leitura.

O mesmo site visto em dois monitores diferentes. Vai uma lupa aí?

O que fazer então?

Desenvolva soluções criativas baseadas no público-alvo e no briefing do projeto. Tenha em mente que seu site pode ser acessado de vários dispositivos…

Existem até geladeiras acessando a internet atualmente.

E de várias maneiras…

Já tentou acessar seu site só com o teclado?

Não trabalhe achando que todo mundo acessa o site da mesma maneira que você. Desenvolva priorizando a apresentação do conteúdo de maneira agradável ao usuário, e não a apresentação do site como um todo. No fim das contas, o sucesso fica por conta dos que são criativos e sabem aliar os melhores conceitos de design e desenvolvimento web (leia-se padrões web, usabilidade, acessibilidade, SEO e todos os conceitos correlacionados) ao seu trabalho.

Lembre-se sempre que, não importa a forma de acesso do usuário, seu site sempre deve estar apresentável de modo que o conteúdo seja o foco.

Para saber mais

Rodapé sempre no fim da página (sem javascript)

Para o novo site da Hiperquímica(que ainda não foi ao ar) precisei de uma solução para manter o rodapé sempre no fim da página, independente da quantidade de conteúdo que viria antes. Uma pesquisa rápida no Google me levou até algumas alternativas que utilizavam javascript[bb] (não me agradaram nem um pouco) e outras que utilizavam somente CSS.

As alternativas com CSS em sua maioria utilizavam duas propriedades para o rodapé: “position:absolute” e “bottom:0″. O problema dessa solução é que se redimensionarmos a janela do navegador, o rodapé sobrepõe o conteúdo, veja um exemplo dessa aplicação.

Procurando em sites gringos, encontrei uma solução interessante no qrayg.com. Adaptei o arquivo e disponibilizei um exemplo com código-fonte mais enxuto, confira!

O arquivo com exemplo dessa solução está bem simples, então acredito que não haverá dúvidas. Mas se precisarem de algum esclarecimento, é só comentar!

Definindo a linguagem padrão do estilo aplicado no HTML

Geralmente inserimos folhas de estilo externas ou utilizamos o atributo style para inserir informações de estilo no HTML. A tag link é a opção mais utilizada e recomendada para inserir folhas de estilo externas, por exemplo:

<link href="cute.css" rel="stylesheet" type="text/css"/ >

Repare que nesse caso é informada qual a linguagem utilizada no estilo, através do type=”text/css”. Agora se você está utilizando o atributo style para estilos inline, o user agent pode não saber qual a linguagem utilizada no estilo aplicado. Ou se uma empresa desenvolver uma nova linguagem de estilos e um novo mime-type por exemplo, seria difícil impor e assegurar o funcionamento na plataforma de distribuição que temos hoje. Entretanto, existe uma maneira.

Se você precisar especificar uma linguagem padrão para todos os estilos aplicados no seu site, você pode utilizar uma meta tag no cabeçalho da sua página:

<meta http-equiv="Content-Style-Type" content="text/css"/>

E você pode inserir essa informação no header HTTP:

Content-Style-Type: text/css

Caso você utilize um servidor Apache, a partir da versão 2.0 você pode usar mod_headers e mod_setenvif no arquivo geral de configuração ou trabalhar a nível de diretório através do .htaccess:

SetEnvIf response Content-Type [text/html|application/xhtml+xml] html-content=1
Header add “Content-Style-Type: text/css” env=html-content

Vale lembrar que essas configurações não são ativadas por padrão na base de configuração do Apache[bb], se você quiser utilizá-las, deve ativá-las manualmente.

Obs: Este artigo é a tradução de um post do blog da W3C. Incluí alguns links para ajudar que, em alguns casos, podem refletir a minha opnião e de outros autores. Se houver dúvidas, comente!

Topo