/***** Selector Hacks ******/

/* IE 6 and below */
* html #uno  { color: red }

/* IE 7 and below */
*:first-child+html #dos { color: red }

/* IE 7 and modern browsers */
html>body #tres { color: red }

/* Modern browsers (not IE 7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below */
html:first-child #cinco { color: red }

/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }

/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #diez  { background: #FFDECE; border: 2px solid #ff0000 }
}

/***** Attribute Hacks ******/

/* ie6 and below */
#once { _color:blue }

/* ie7 and below */
#doce { *color: blue } /* or #color:blue */

Para iniciar a sequencia dos tutoriais, resolvi falar sobre listas de ordenação e explicar um pouco mais sobre o uso e cada uma e o porque isso é importante na hora de se desenvolver um site dentro dos padrões w3c.

Listas desordenadas: <ul>

As listas desordenadas são, comumente, as mais utilizadas por todos nós desenvolvedores quando resolvemos criar menus. E porque utilizamos as <ul> na criação de menus? Simples! Porque, semânticamente, os menus são itens correspondentes a uma lista sem ordenação não se encaixando em qualquer outra tag, semânticamente, a não ser a <ul>.

Listas ordenadas: <ol>

Idêntica as <ul>, porém nela temos a obrigação de ordernarmos os itens, seja eles por ordem alfabética, numérica, crescente ou decrescente. Devemos utilizá-las quando queremos criar, por exemplo, um passo-a-passo, uma receita ou até mesmo uma lista de categorias do seu blog.

Listas de definição: <dl>

As listas de definição são as menos utilizadas e pouco entendidas por muitos. Uma maneira bastante fácil e simples para o entendimento da <dl> é pensarmos em um glossário. Todo glossário possui termos e, cada termos, suas descrições. Para os termos utilizamos <dt> e para as descrições <dd>. Uma coisa muito importante na <dl> é que: nunca termos, em hipótese alguma, um termo repetido com descrições diferentes. Cada termo tem sua descrição única, caso contrário o mesmo não poderá ser um <dl>, e sim uma <ul> ou uma <ol>.

Em tempo, basta sabermos o nome de cada tag para qu possamos entender o seu uso. Consegui ser claro na explicação?

A alguns meses, venho tentando descobrir – mesmo eu não sendo desenvolvedor e por intermédio de sites, blogs e afins – como fazer com que os componentes do Asp.Net renderizem de forma correta e acessível. Atualmente, meu maior problema se encontra em um componente chamado GridView. O GridView é um novo controle do Asp.Net 2.0 e uma melhoria do antigo DataGrid.

Um dos maiores problemas no DataGrid era a falta de comprometimento com a acessibilidade e isso foi corrigido com o GridView, juntamente com diversas outras falhas, porém, para que a GridView se comporte de forma acessível temos que definir algumas propriedades para o componente e adicionar elementos extras em seu code-behind.

Primeiro, temos que definir a propriedade UseAcessibleHeader = “true” em nossa GridView. Isso irá fazer com que, na hora da renderização, as tags <td> sejam substituídas pela tag <th> quando a mesma for um cabeçalho.

Por algum motivo que não sei qual, não existe nenhuma propriedade na GridView para que seja fixado as tags <thead>, <tfoot> e <tbody> no componente – tags as quais são de grande importância para a acessibilidade de um site, como podemos ver no tópico Criando Tabelas Acessíveis em xHTML -, porém, existe uma maneira simples de adicionar-mos estes elementos em C# e VB.NET.

Primeiro, iremos adicionar o componente GridView em nossa página:

<asp:GridView runat="server" ID="GridView1" />

Após a inserção do componente GridView em nossa página, iremos adicionar o código abaixo, em um novo método, no code-behind:

private void MakeAcessible(GridView grid) {
    if (grid.Rows.Count > 0) {
        grid.UseAcessibleHeader = true;
        grid.HeaderRow.TableSection = TableRowSection.TableHeader;      // adiciona as tags <thead> e <tbody>
        grid.FooterRow.TableSection = TableRowSection.TableFooter;      // adiciona a tag <tfoot>. remova caso a grid não possua footer
    }
}

Agora, a chamada para o método acima no evento Page_Load:

protected void Page_Load(object sender, EventArgs e) {
    MakeAcessible(GridView1);
}

Infelizmente, por meu servidor ser php, não tenho como adicionar uma aplicação Asp.Net de exemplo para que possam verificar o código, mas funciona. Podem testar.

fonte: http://blog.madskristensen.dk/post/Make-the-GridView-control-accessible.aspx

Para que um formulário seja realmente acessível, precisamos estar cientes da existência de algumas tags básicas e para que elas servem. Vamos a elas:

• form: cria uma área para a entrada de dados podendo conter campos de texto, checkboxes, radio-buttons etc.
• fieldset: utilizado para agrupar elementos no formulário. ex: dados pessoais, dados profissionais etc.
• legend: define um nome para cada fieldset criado
• label: define um “label” para um determinado controle.
• input, checkbox e radiobutton: elementos de um form.

Conhecida as principais tags, vamos a criação do formulário. Primeiro criaremos a área válida do form:

<form action="/">
    aqui iremos montar nosso form
</form>

Dentro da área criada pela tag <form>, iremos dividir as informações em Dados Pessoais e Dados Profissionais utilizando as tags <fieldset> e <legend> para então adicionarmos os campos a serems preenchidos:

<fieldset>
    <legend>Dados Pessoais</legend>
    <p><label for="txtNome">Nome <input type="text" id="txtNome" value="" /></label></p>
    <p><label for="txtEmail">Email <input type="text" id="txtEmail" value="" /></label></p>
</fieldset>
<fieldset>
    <legend>Dados Profissionais</legend>
    <p><label for="txtEmpresa">Empresa <input type="text" id="txtEmpresa" value="" /></label></p>
    <p><label for="txtCargo">Cargo <input type="text" id="txtCargo" value="" /></label></p>
</fieldset>

Para finalizar, um botão para o enviao dessas informações:

<p><input type="submit" value="Enviar" /></p>

O resultado final vocês podem ver na imagem abaixo.

Muita gente tem horror a tabelas quando o assunto é ‘tableless’, dizem que tabela não deve mais ser utilizadas etc, mas poucos sabem que tabelas devem sim ser utilizadas, porém, com o seu real objetivo que é de mostrar, apenas, dados tabulares e não para criação de layouts.

Para se montar uma tabela em html – xhtml, devemos conhecer suas tags e para que cada uma delas servem.

Conheça as tags:

• <table> – delimitador de uma tabela. é com ele que iremos indicar aonde começa e termina nossa tabela. é dentro dela que iremos adicionar título, cabeçalho, rodapé, células e linhas;
• <caption> – inserida imediatamente após a <table>, define um título para a tabela correspondente;
• <thead> – agrupa linhas de uma tabela definindo o cabeçalho. inserida sempre após a tag <caption>;
• <tfoot> – agrupa linhas de uma tabela definindo o rodapé. inserida sempre após a tag <thead>;
• <tbody> – também agrupa linhas de uma tabela, porém, define seu conteúdo. inserida sempre após a tag <tfoot>;
• <tr> – cria uma linha na tabela;
• <td> – cria uma coluna na tabela;
• <th> – define uma coluna de cabeçalho na tabela.

Vejamos como fica nossa tabela implementada com as tags acima:

<table>
    <caption>Criando Tabelas Acessíveis</caption>
    <thead>
        <tr>
            <th>Nome</th>
            <th>Site</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Nome</td>
            <td>Site</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Fulano 01</td>
            <td>Site do Fulano 01</td>
        </tr>
        <tr>
            <td>Fulano 02</td>
            <td>Site do Fulano 02</td>
        </tr>
        <tr>
            <td>Fulano 03</td>
            <td>Site do Fulano 03</td>
        </tr>
    </tbody>
</table>

Veja o exemplo da tabela acima.

Dessa forma, teremos uma tabela acessível a todos, principalmente quando for utilizado um leitor de tela – jaws por exemplo – e sem sermos confundidos de que coluna vem o dado lido.

Não esqueça de deixar o seu comentário dizendo o que achou desse tutorial.

Âncoras. O que são?

Âncoras são pontos-chave dentro de um site/texto. Quem nunca abriu um documento no word e, logo nas primeiras páginas, deu de cara com um índice onde, quando clicado no item te lançava direto para o texto relacionado? Isso é um texto âncora.

Como utilizar as âncoras?

Para criarmos âncoras em nossos sites, devemos conhecer sua sintaxe.

<a name="principal"></a>

Como visto, utilizamos a tag de hyperlink do xhtml com a propriedade name onde name é o nome da ancora. No exemplo proposto, nossa âncora se chama principal.

Criado o destino da âncora, criaremos a chamada. Também é utilizada a tag de hyperlink para a chamada da âncora, vejamos.

<a href="#principal">pular para conteúdo principal</a>

Nota-se que o atributo href recebe o nome da âncora com o prefixo # que identifica que nossa âncora esta na página atual.

As âncoras também podem ser utilizadas para páginas de destino diferentes da atual, vejamos o exemplo abaixo.

<a href="http://gustavoribeiro.com/#principal">conteúdo principal de gustavoribeiro.com</a>

Recomendação

É muito importante criamos uma âncora em nossos sites que salte direto para o conteúdo principal, como pode ser visto no canto superior direito do meu blog. Dessa forma, estamos ajudando os deficientes visuais a chegarem mais rápido no conteúdo principal do site.

Um exemplo interessante são os sites jornalisticos que atualizam automaticamente suas páginas de 3 em 3 minutos e, muitas vezes, esse refresh é feito tão rápido que enquanto os leitores de tela percorrem os links para poder chegar no conteúdo principal, a página já foi atualizada e retorna para o início do site tendo que percorrer todos os links novamente. Se existisse uma âncora para o conteúdo principal do site, seria mais fácil e rápido chegarmos ao conteúdo principal.

P.S.: Por favor, não utilizem refresh automático nas páginas. Eu sou contra e condeno essa prática.

Por padrão, toda tabela renderizada recebe o atributo separate mesmo que não seja especificado no CSS da página, ou seja, cada elemento possui sua própria borda.

Exemplo de tabela com o atributo separate.

<table style="border:solid 1px #00f">
    <tbody>
        <tr>
            <td style="border:solid 1px #0f0">célula 1</td>
            <td style="border:solid 1px #0f0">célula 2</td>
            <td style="border:solid 1px #0f0">célula 3</td>
        </tr>
    </tbody>
</table>

Exemplo de tabela com o atributo collapse.

<table style="border:solid 1px #00f;border-collapse:collapse">
    <tbody>
        <tr>
            <td style="border:solid 1px #0f0">célula 1</td>
            <td style="border:solid 1px #0f0">célula 2</td>
            <td style="border:solid 1px #0f0">célula 3</td>
        </tr>
    </tbody>
</table>

Outras dicas são bem vindas nos comentários

1. Tomar vergonha na cara e começar a tratar minhas escolioses com RPG (como solicitado pelo médico);
2. Entrar em uma academia e perder uns 10 quilos;
3. Comprar um iPhone (ou um outro smartphone touch legal);
4. Conhecer Fortaleza;
5. Voltar a Porto Alegre e rever amigas(os);
6. Conhecer Fernando de Noronha (quase impossível);
7. Ser menos estressado e reclamão;
8. Tentar voltar em Salvador para rever amigas(os);
9. Comprar um MacBook (se possível, o pro);
10. Conhecer Florianópolis;
11. Vender bastante perfume importado e;
12. Tomar coragem e sair de casa.

E colocou uma barata, que preparava belíssimos relatórios e tinha muita experiência, como supervisora. A primeira preocupação da barata foi a de padronizar o horário de entrada e saída da formiga.

Logo, a barata precisou de uma secretária para ajudar a preparar os relatórios e contratou também uma aranha para organizar os arquivos e controlar as ligações telefônicas.

O marimbondo ficou encantado com os relatórios da barata e pediu também gráficos com indicadores e análise das tendências que eram mostradas em reuniões.

A barata, então, contratou uma mosca, e comprou um computador com impressora colorida. Logo, a formiga produtiva e feliz, começou a se lamentar de toda aquela movimentação de papéis e reuniões!

O marimbondo concluiu que era o momento de criar a função de gestor para a área onde a formiga produtiva e feliz, trabalhava. O cargo foi dado a uma cigarra, que mandou colocar carpete no seu escritório e comprar uma cadeira especial.

A nova gestora cigarra logo precisou de um computador e de uma assistente (sua assistente na empresa anterior) para ajudá-la a preparar um plano estratégico de melhorias e um controle do orçamento para a área onde trabalhava a formiga, que já não cantarolava mais e cada dia se tornava mais chateada.

A cigarra, então, convenceu o gerente marimbondo, que era preciso fazer um estudo de clima. Mas, o marimbondo, ao rever as cifras, se deu conta de que a unidade na qual a formiga trabalhava já não rendia como antes e contratou a coruja, uma prestigiada consultora, muito famosa, para que fizesse um diagnóstico da situação. A coruja permaneceu três meses nos escritórios e emitiu um volumoso relatório, com vários volumes que concluía : Há muita gente nesta empresa!!

E adivinha quem o marimbondo mandou demitir? A formiga, claro, porque ela andava muito desmotivada e aborrecida.

Antigamente – e ainda bato de frente com isso hoje em dia – esses menus eram criados utilizando javascript e, pelo menos, dois arquivos de imagem – uma para o menu ativo e outra quando ativado o mouseover. Um problema que muito me incomoda com essa maneira de se criar menus é o fato de, quando passamos o mouse por cima no objeto ele sumir com a imagem de fundo enquanto carrega a nova imagem.

Com todas as possibilidades que o CSS nos dá, isso muda muito. Primeiro que, não precisamos mais do javascript para ativar a troca de imagem e tão pouco de duas imagens. Vamos a explicação.

Vamos começar pela imagem que iremos utilizar no menu. Criaremos, no mesmo arquivo de imagem, os dois estilos para nosso menu conforme imagem abaixo:

Percebemos que, da metade para cima, temos a parte que aparecerá logo que carregarmos nossa página e, na metade de baixo, a parte que aparecerá quando passarmos o mouse sobre o menu. Ok Gustavo, mas como faremos isso? Simples! Primeiro criaremos nosso menu com listas desordenadas:

<ul>
    <li><a href="index.htm">Home</a></li>
    <li><a href="quemSomos.htm">Quem Somos</a></li>
    <li><a href="contato.htm">Contato</a></li>
</ul>

A mágica esta toda no CSS, vejamos:

a {display:block;width:100px;height:18px;background:url('bgMenu.gif') no-repeat}
a:hover {background-position:0 -18px} /* ao passar o mouse no menu, deslocar
                                         o fundo em -18px para o topo */

Veja o exemplo!

Acessando os links abaixo, você poderá visualizar esses guias e também, caso prefira, baixar o PDF para impressão ou para própria consulta digital.

• Guia de referência rápida xHTML
• Guia de referência rápida CSS

Além de diversas melhorias, contaremos com áreas exclusivas para divulgação de trabalhos e de nossa carteira de clientes.

Enquanto isso, para não deixar de movimentar esse site, estaremos provisoriamente com o essa “roupagem” simples e, se preferir, acesse o nosso blog ou nossos artigos (para acompanhar futuras postagens) ou entre em contato pelo e-mail contato[a]gustavoribeiro.com.

Compre a revista, leia o artigo e – se não for pedir muito – enviem um feedback. Gostaria muito de saber o que os leitores estão achando do artigo e o que eu posso melhorar para, se existir, os próximos.

Sumário da edição (pdf)

Grande abraço.