Ajude a sustentar a Wikipédia e outros projetos, sem colocar a mão no bolso, e concorra a um Eee PC!

27 06 2008

Ajude a sustentar a Wikipédia e outros projetos, sem colocar a mão no bolso, e concorra a um Eee PC!
…e também a pen drives, card drives, camisetas geeks, livros e mais! O BR-Linux e o Efetividade lançaram uma campanha para ajudar a Wikimedia Foundation e outros mantenedores de projetos que usamos no dia-a-dia on-line. Se você puder doar diretamente, ou contribuir de outra forma, são sempre melhores opções. Mas se não puder, veja as regras da promoção e participe – quanto mais divulgação, maior será a doação do BR-Linux e do Efetividade, e você ainda concorre a diversos brindes!

Fica a dica!

E se você não quiser um Eee PC, pode mandar entregar aqui em casa.

Anúncios




O primeiro livro sobre Rails 2.1 é brasileiro!

6 06 2008

O Rails 2.1 mal saiu, e o Carlos Brando e o Marcos Tapajós já fizeram um livro sobre ele. O trabalho ficou muito, muito bacana. São 126 páginas sobre as novidades dessa versão, e gratuito!

Não falo muito agora sobre o livro porque ainda não li – o livro ainda tá quentinho. Mas folheando deu pra ver que é material de primeira.

Parabéns pros caras!

Tá esperando o que? Corre lá e baixa o primeiro livro sobre Rails 2.1!





Tutorial Avançado de HTML: Links Acessíveis

4 06 2008

Link "Pular para o conteúdo"

Essa página trata de várias maneiras de melhorar a acessibilidade dos links na sua página.

Navegação com o teclado

Usuários que não podem ou não querem usar dispositivos apontadores (mouses, por exemplo) podem usar o teclado pra percorrer os links, geralmente usando a tecla “tab”. Por isso, links devem estar numa ordem lógica de navegação. O atributo tabindex permite definir essa ordem ainda que, se o HTML estiver linear como ele deve, uma ordem lógica de navegação exista automaticamente.

Pra testar o efeito do tabindex, faça o seguinte:

Coloque três links numa página HTML:

<p><a href="#">Link 1</a></p>

<p><a href="#">Link 2</a></p>

<p><a href="#">Link 3</a></p>

Abra a página em seu navegador e tecle “tab” até chegar no último link. Você deve ter percebido que a ordem foi a mesmo em que eles foram definidos no documento.

Agora, mude o código para isso e teste novamente.

<p><a href="#" tabindex="3">Link 1</a></p>

<p><a href="#" tabindex="1">Link 2</a></p>

<p><a href="#" tabindex="2">Link 3</a></p>

Teclas de Atalho

Teclas de atalho (accesskeys) permitem uma navegação mais fácil, ao atribuir um atalho a um link (que geralmente vai ganhar foco quando o usuário pressionar ‘Alt’ ou ‘Shift’ + ‘Alt’ + a tecla de atalho, dependendo do navegador). Pra usuários que não usam dispositivos apontadores, esse é um modo muito mais fácil e rápido de navegar do que navegar pelos links usando ‘tab’.

Não é necessário usar teclas de atalho em todos os links, mas é uma boa idéia colocar nos links da navegação primária.

<a href="algumapagina.html" accesskey="a">Alguma Página</a>

O problema com teclas de atalho é que geralmente não existe nenhum jeito do usuário descobrir aonde elas estão (a não ser que ele olhe o código fonte). JAWS, o leitor de tela mais popular que existe, vai ler em voz alta essas teclas de atalho, mas para obter todas as vantagens delas você precisa deixá-las mais explícitas.

Você pode usar uma técnica similar ao link “Pular navegação” (veja abaixo), ou optar por uma página separada explicando as funcionalidades relacionadas à acessiblilidade, incluindo as teclas de atalho. Um método que está crescendo em popularidade é sublinhar a primeira letra do link, similar ao método usado nos menus da maioria dos programas Windows.

Títulos de Links

É uma boa idéia adicionar o atributo title, que vai mostrar uma descrição do lugar pra onde o link leva, melhorando a navegação.

Se o link é usado pra executar Javascript, também é bom explicar o que devia (mas não vai) acontecer pra usuários que não tem Javascript.

<a href="#" onclick="abrepopupdetestável()" onkeypress="abrepopupdetestável()" title="Abre uma janela pop-up detestável com Javascript">Monstro</a>

Popups

Por falar em popups Javascript, se você vai insistir em usá-los, ou se alguém te disse pra usá-los, você pode deixar as coisas mais acessíveis usando o evento onkeypress além de onclick. Além disso, se você incluir uma página normal no valor do atributo href do link e retornar false na função que abre o popup, se o usuário não tiver Javascript uma página normal vai abrir. Por exemplo:

<script type="text/javascript"> function abrepopupdetestável() { window.open("monstro.html", "", "toolbar=no,height=100,width=200"); return false; } </script> ... <a href="monstro.html" onclick="return abrepopupdetestável()" onkeypress="return abrepopupdetestável()">Monstro</a>

Links Adjacentes

Links adjacentes devem ser separador por mais que simples espaços, pra que eles possam ser compreendidos por leitores de tela.

Isso pode ser feito colocando caracteres entre os links (como uma barra vertical – ‘link | link‘) ou os cercando com caracteres (como colchetes – ‘[link] [link]‘). Também é uma boa idéia colocar os links de navegação dentro de listas. Essas listas podem ser estilizadas com CSS para serem mostradas do jeito que você quiser, até mesmo com os itens lado-a-lado (usando display: in-line).

Pular Navegação

Você deve dar a usuários de leitores de tela a oportunidade de pular a navegação e ir direto para o conteúdo. Isso porque se sua navegação for consistente (como ela deve ser), o usuário não precisa atravessar a mesma informação em todas as páginas, especialmente se sua navegação for muito longa. Você pode pular a navegação colocando um link antes dela que leve direto para o conteúdo.

Alguma coisa assim:

<div id="cabecalho"> <h1>O Cabeçalho</h1> <a href="#conteudo" accesskey="p">Pular navegação</a> </div> <div id="navegacao"> <!-- um monte de coisas de navegação --> </div> <div id="conteudo"> <!-- conteúdo adorável --> </div>

Obviamente você não quer que esse link apareça em navegadores visuais, por isso é melhor usar CSS pra torná-lo invisível.

Essa é uma dica de CSS, mas específica pra “pular navegação”.

O jeito mais óbvio de fazer isso é usar display: none, mas alguns leitores de tela vão levar isso a sério e não ler o link, como nós queremos. Ao invés de usar isso, você pode definir a largura e o comprimento do elemento como zero (width: 0; height: 0; overflow: hidden;), que tem o mesmo efeito visual mas ainda é lido por leitores de tela. 

Páginas Relacionadas

Referência

Esse material é uma adaptação do HTML Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Firefox Download Day e Mozilla Party no Cefet!

2 06 2008

Ajude o Firefox na missão de entrar pro Livro dos Recordes como o software mais baixado em 24 horas! Tudo que você tem que fazer é baixar o Firefox 3 no Download Day, que ainda não tem data definida, mas vai ser no fim de junho.

Clique na imagem e participe!

Download Day

E também pra comemorar o lançamento do Firefox 3, quem vem muuuito bacana, vai rolar no Cefet a Natal Mozilla Party!

A programação ainda não está completamente definida, mas provavelmente vamos ter algumas palestras sobre o Firefox, as novidades na versão 3 e algumas extensões indispensáveis, e um workshop sobre desenvolvimento de extensões pro Firefox. Bacana, não?

Vai ser dia 21 de junho, 9h da manhã, no mini-auditório do Cefet/RN, junto com o Dia Livre, organizado pelo PSL-RN (Projeto Software Livre).

Se você é fã do Firefox vai estar em Natal dia 21, aparece lá. Se você é fã do Firefox mas não vai estar em Natal, procura (ou cria) uma Mozilla Party perto de você.

Participe!