Tutorial Avançado de HTML: Declarações

7 07 2008

image

Essa página trata de como definir um documento XHTML válido.

Declaração do tipo do documento

Lá no topo de suas páginas você precisa de uma declaração do tipo do documento. Isso mesmo, você precisa.

Sem especificar um doctype (tipo do documento), seu HTML simplesmente não é HTML válido e a maioria dos navegadores vão usar o ‘modo sujo’ pra visualizá-lo, o que quer dizer que eles vão achar que você não sabe que diabos você está fazendo e vão fazer o que eles acharem melhor com o seu código. Você pode ser o maior ninja de HTML que já andou sobre a Terra. Seu HTML pode não ter falha nenhuma e seu CSS pode ser simplesmente perfeito, mas sem uma declaração do documento, ou uma declaração errada, vai parecer que suas páginas foram coladas por um filhote de gibão míope de um olho só com dificuldades de aprendizado.

Essa é a declaração para um documento XHTML 1.0 Strict (XHTML 1.0 Estrito):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

A declaração seguinte é de um documento XHTML 1.1. Ela pode parecer preferível, por ser a última versão do XHTML, mas existem alguns problemas que serão explicados num minuto…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
>

Se você simplesmente não consegue deixar o HTML 4 ir embora ou se você tem algum fetiche pelo Netscape 4, você pode usar o XHTML 1.0 Transitional (XHTML 1.0 de Transição):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Você só deve usar esse tipo de documento se você tem uma necessidade incomum de acomodar navegadores mais velhos, raramente usados, ou se você está convertendo pros padrões páginas antigas, feitas usando HTML 4 ou anterior. XHTML 1.0 de transição permite velhos elementos de apresentação do HTML 4, que podem resultar numa apresentação melhor em navegadores como Netscape 4. No entanto, usar esses elementos vai prejudicar a eficiência e possivelmente a acessibilidade de suas páginas web.

Finalmente, se você é um daqueles caras meio loucos que usam frames, a declaração de um documento XHTML 1.0 Frameset é assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Note que a tag DOCTYPE é meio rebelde e exige ser escrita em letras maiúsculas e enfeitada com um ponto de exclamação. Ela também quebra as regras por ser a única tag que não precisa ser fechada.

Declarando Linguagens

Você deve identificar a linguagem principal de um documento através de um cabeçalho HTTP ou com o atributo xml:lang dentro da tag html de abertura. Embora isso não seja necessário para produzir um documento XHTML válido, é uma preocupação com a acessibilidade. O valor é uma abreviação, como ‘en’ (English – Inglês), ‘fr’ (Francês), ‘de’ (Alemão) ou ‘pt-BR’ (Português do Brasil).

A declaração de um documento com conteúdo principalmente em português é assim:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR">

Depois de declarar uma linguagem principal, se você usar outra linguagem no seu conteúdo, você deve usar o atributo xml:lang in-line (como em <span xml:lang="de">HTML Hund</span>).

Tipos de Conteúdo

O típo de mídia e o conjunto de caracteres de um documento HTML também precisam ser especificados, e isso é feito com um cabeçalho HTTP como:


Content-Type: text/html; charset=UTF-8

A primeira parte (nesse exemplo, o pedaço text/html) é o Tipo MIME (MIME Type) do arquivo, e isso faz com que o navegador saiba qual o tipo de mídia de um arquivo e então o que fazer com ele. Todos os arquivos têm algum MIME Type. Uma imagem JPEG é image/jpeg, um arquivo CSS é text/css e o tipo geralmente usado pra HTML é text/html.

A segunda parte do cabeçalho HTTP (no exemplo, o pedaço UTF-8) é o conjunto de caracteres.

Talvez o jeito mais fácil de modificar um cabeçalho HTML (ou imitar um) é usar uma tag meta ‘HTTP-equivalent’ no HTML, que vai ser algo assim:


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Levemente mais complicado, mas preferível (por ser um cabeçalho HTTP propriamente dito e ainda reduzir o HTML), é enviar o cabeçalho usando uma linguagem de programação no lado do servidor (server side). Com PHP, você poderia usar algo assim:

<?php header("Content-Type: text/html; charset= UTF-8"); ?>

Se você não quer ou não pode usar uma linguagem, você possivelmente pode ir direto pro servidor com um arquivo ‘.htaccess’. A maioria dos servidores (compatíveis com Apache) pode ter um pequeno arquivo de texto com o nome ‘.htaccess’ no diretório raíz, e com a seguinte linha nele você pode associar todo arquivo com extensão ‘.html’ com um MIME type e um conjunto de caracteres:


AddType text/html;charset=UTF-8 html

No entanto, nem todas as hospedagens permitem que você altere as configurações do servidor com um arquivo como esse.

Conjuntos de caracteres incluem ‘ISO-8859-1′ para muitas linguagem ocidentais, baseadas no Latim, que não usem caracteres especiais como ‘ç’ ou ‘ã’; ‘SHIFT_JIS’ para Japonês; ‘UTF-8′, uma versão do Formato de Transformação Unicode (Unicode Transformation Format), que fornece um grande número de caracteres usados na maioria das linguagens, entre outros. Basicamente, você deve usar um conjunto de caracteres que você sabe que vai ser reconhecido por sua audiência. A menos que você esteja usando uma linguagem baseada no Latim que não use acentos, como o Inglês, onde ISO-8859-1 pode ser usado e é praticamente universalmente compreendido, você deve usar UTF-8 porque ele pode mostrar a maioria dos caracteres da maioria das linguagem e é o código mais seguro de se usar porque vai funcionar no computador da grande maioria das pessoas.

Você pode ler mais sobre conjuntos de caracteres em outros lugares pela web.

XHTML deve ser enviado com o MIME type application/xhtml+xml. Isso é o que ele é – uma aplicação XML. Infelizmente, a maioria dos navegadores não tem idéia do que é isso. Então é geralmente aceito que não faz mal usar o MIME type text/html. De acordo com o W3C, e depois reforçado pelo Web Standards Project (Projeto Padrões Web), alguns sabores de XHTML 1.0 podem ser enviados com o tipo text/html, mas XHTML 1.1 não deve, e é por isso que os exemplos no site usam XHTML 1.0 Strict, assumindo um MIME Type text/html. Mas você pode (e talvez até deva) enviar o tipo correto para os navegadores que o aceitam com um pouco de “trapaça” no servidor.

Esse site usa PHP para enviar XHTML 1.1 com um MIME Type application/xhtml+xml para os navegadores que entendem e renderizam esse tipo (como o Mozilla) e XHTML 1.0 Strict com o tipo text/html para outros navegadores (como o IE). O script, colocado no topo de cada página parece com isso:


<?php
if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){
header("Content-Type: application/xhtml+xml; charset=UTF-8");
echo('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">');
} else {
header("Content-Type: text/html; charset=UTF-8");
echo ('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
}
?>

Se você não conhece PHP, não se preocupe com o código acima. Ele checa se o o navegador aceita o MIME Type application/xhtml+xml e, se sim, esse tipo é enviado e o tipo de documento XHTML 1.1 é escrito no HTML. Se o MIME Type não é reconhecido então o tipo text/html é enviado e o tipo de documento XHTML 1.0 Strict é escrito no HTML.

Além da paz de espírito que você vai sentir por saber que está fazendo a coisa certa e se preparando para o futuro, o benefício imediato de usar esse método é que Mozilla vai tratar seus arquivos como aplicações XML e simplesmente não vai funcionar se seu XHTML não estiver de acordo com o padrão, por exemplo, se não estiver bem formado. Você vai poder testar sua aplicação sem ter que passar o documento por um validador.

Páginas Relacionadas

Referência





Tutorial Avançado de HTML: Formulários Acessíveis

5 07 2008

image

Formulários não são a coisa mais fácil pra usuários com deficiências. Navegar por uma página com conteúdo escrito é uma coisa, saltitar entre campos de formulário e inserir informação é outra bem diferente. Por causa disso, é uma boa idéia adicionar vários elementos ao formulário para torná-lo mais acessível.

Rótulos

Cada campo de formulário deve ter seu próprio rótulo (label).  A tag label resolve isso, com um atributo for que a conecta a algum elemento do formulário.

<form>
<label for="seuNome">Seu nome:</label> <input type="text" name="seuNome" id="seuNome" />
...

Labels ainda vem com um bônus: navegadores visuais renderizando a página fazem com que eles sejam clicáveis, colocando o foco no elemento do fomulário associado.

Nota: os atributos name e id são obrigatórios – o name para que a aplicação manipule o campo e o id para que o label se associe a ele.

Conjuntos de campos e legendas

Você pode agrupar campos, por exemplo nome (primeiro, último, do meio, título, etc.) ou endereço (linha 1, linha 2, país, código postal, etc.) usando a tag fieldset.

Dentro de um conjunto de campos, você pode definir uma legenda com a tag legend.

Nota: Navegadores visuais geralmente representam um conjunto de campos com uma borda ao redor deles e a legenda inserida no canto superior-esquerdo da borda.

<form action="algumscript.php" >
<fieldset>
<legend>Nome</legend>
<p>Primeiro nome: <input type="text" name="primeiroNome" /></p>
<p>Último nome: <input type="text" name="ultimoNome" /></p>
</fieldset>
<fieldset>
<legend>Endereço</legend>
<p>Endereço: <textarea name="endereco" ></textarea></p>
<p>CEP: <input type="text" name="cep" /></p>
</fieldset>
...

Grupos de Opções

A tag optgroup agrupa opções numa caixa de seleção. Ela requer o atributo label, que é o texto que vai ser mostrado como um pseudo-cabeçalho que não pode ser selecionado, precedendo aquele grupo na lista dropdown em navegadores visuais

<select name="pais">
	<optgroup label="África">
		<option value="gam">Gambia</option>
		<option value="mad">Madagascar</option>
		<option value="nam">Namíbia</option>
	</optgroup>
	<optgroup label="Europa">
		<option value="fra">França</option>
		<option value="rus">Russia</option>
		<option value="uk">Reino Unido</option>
	</optgroup>
	<optgroup label="America do Norte">
		<option value="can">Canada</option>
		<option value="mex">México</option>
		<option value="eua">EUA</option>
	</optgroup>
</select>

Navegando pelos campos

Como links, campos de formulário (e grupos de campos) precisam ser navegáveis sem o uso de um dispositivo apontador, como o mouse. Os mesmos métodos usados em links para facilitar essa tarefa podem ser usados em elementos de formulário – tabulação e teclas de acesso.

Os atributos accesskey e tabindex podem ser adicionados nas tags individuais do formulário, como input, e também em tags legend.

<input type="text" name="nome" accesskey="n" tabindex="1" />

Pra mais informações sobre isso, veja a página Links Acessíveis.

Páginas Relacionadas

Exemplos

Referência





Tutorial Avançado de HTML: Dominando Tabelas

5 07 2008

image

Quer dizer que você acha que sabe como fazer uma tabela? Claro, você conhece as tags table, tr, td e th, você tem até os atributos rowspan e colspan no seu bolso. Você pode mesmo fazer uma mesinha pra café de madeira compensada, mas você não quer saber como construir uma daquelas mesas de jantar de madeira sólida e polida, com topo de vidro, dessas que suportam o peso de um elefante obeso?

Você quer? Que legal.

A vingança das colunas

Linhas em tabelas fazem as colunas parecerem meio estúpidas. Elas fazem todo o trabalho, com a tabela sendo construída linha por linha, deixando as colunas se sentindo meio rejeitadas.

Pra sorte das colunas mais ansiosas, as tags colgroup e col vieram para o resgate.

Essas tags permitem que você defina as colunas da tabela e deixe elas com o estilo que você quiser, o que é útil especialmente se você quer certas colunas alinhadas ou coloridas de uma outra forma. Sem essas tags, você ia ter que estilizar as células individualmente.

Aqui está um exemplo dessas tags em uso:

<table>
  <colgroup> 
    <col />
    <col class="alternada" />
    <col />
  </colgroup>
  <tr>
    <td>Essa</td>
    <td>Aquela</td>
    <td>A outra</td>  </tr>  <tr>  <td>Huguinho</td>  <td>Zézinho</td>  <td>Luizinho</td>
  </tr>
</table>

Os estilos da classe ‘alternada’ vão ser aplicadas à segunda coluna, ou à segunda célula em cada linha.

Você também pode usar o atributo span tanto em colgroup quanto em col, de um jeito parecido com colspan e rowspan.

Usando span na tag colgroup irá definir o número de colunas às quais aquele grupo irá pertencer. Por exemplo, <colgroup span=”2″></colgroup> agruparia as duas primeiras colunas. Quando span for usada em colgroup, você não deve usar tags col.

Para agrupar colunas, é mais sensato usar span na tag col. No exemplo acima, isso pode ser aplicado dessa forma:

<table>
  <colgroup>  <col />  <col span="2" class="alternada" />  </colgroup>
  ...

Isso aplicaria “alternada” às duas últimas colunas.

Oh, mas sempre tem que ter uma pegadinha, não é? Aqui está: Os únicos estilos que você pode aplicar em colunas são bordas, bakgrounds, largura e visibilidade.

Internet Explorer parece se comportar bem melhor que os outros navegadores porque ele permite que você use praticamente qualquer propriedade CSS, como color, em colunas. Mas, como já era de se esperar, isso só acontece porque ele age de um jeito bem louco.  Pra uma explicação mais detalhada dessa anomalia peculiar, deixe que Hixie explica.

Sumário e Legenda

Um jeito simples e rápido de melhorar a acessibilidade de suas tabelas é sempre colocar um sumário (summary) e uma legenda (caption).

Um sumário pode ser adicionado usando o atributo summary da tag table de abertura. Ele não será mostrado, mas pode ajudar numa representação não-visual de uma tabela.

A tag caption define uma legenda logo depois da tag de abertura table. Por padrão ela aparece em cima da tabela, mas pode ser colocada no topo, à direta, embaixo ou à esquerda com os valores top, right, bottom e left da propriedade CSS caption-side, embora o IE ignore essa propriedade.

<table
  summary="O ritual de acasalamento dos gafanhotos,
  mostrando quantos usam proteção e quantos fumam um cigarro depois">
  <caption>Ritual de Acasalamento dos Gafanhotos</caption>
  ...

Cabeçalhos, rodapés e a busca pela tabela rolável

thead, tbody e tfoot te permitem separar a tabela em cabeçalho, corpo e rodapé. Isso é útil principalmente em tabelas muito grandes e quando elas são impressas. O cabeçalho e o rodapé, por exemplo, devem aparecer em todas as páginas.

Esses elementos devem ser definidos na ordem theadtfoottbody. Olha como eles são:

<table>  <thead>
   <tr>  <td>Cabeçalho 1</td>  <td>Cabeçalho 2</td>  <td>Cabeçalho 3</td>
   </tr>
  </thead>
  <tfoot>
  <tr>  <td>Rodapé 1</td>  <td>Rodapé 2</td>  <td>Rodapé 3</td>  </tr>  </tfoot>
  <tbody>  <tr>  <td>Célula 1</td>  <td>Célula 2</td>  <td>Célula 3</td>  </tr>  ...
  </tbody>
</table>

Nota: Voltando as diferenças normais entre os navegadores, dessa vez o IE não tem nenhuma dica quando se trata de cabeçalhos e rodapés, e embora eles sejam renderizados na página, eles não vão aparecer no topo e no fim de cada página impressa.

Colocar barra de rolagem numa tabela é útil, mas não é tão simples graças a diferenças entre navegadores. Além disso, a maioria dos usuários não está acostumada com barras de rolagem em tabelas e pode achar que o conteúdo disponível é só o que está visível. No Imaputz você aprende a criar uma tabela rolável com cabeçalho fixo – mas o CSS que ele usa pra fazer isso não é tão fácil de entender.

Páginas Relacionadas

Exemplos

Referência





Tutorial Avançado de HTML: Dominando Texto

4 07 2008

image

A tag br ainda é usada demais em lugares onde a tag p deveria ser usada, mas no geral já se aceita que a tag p deve ser usada pra representar parágrafos. Existem ainda diversas outras tags que devem ser usadas para definir certos elementos textuais como citações, abreviações e código de computador.

Você deve manter em mente que, mesmo que os navegadores mostrem esses elementos em formatos diferentes, o importante não é o que eles parecem, mas sim o significado que eles aplicam ao texto.

Abreviações e Acrônimos

abbr e acronym são usadas para abreviações e acrônimos respectivamente.

Uma abreaviação é uma forma mais curta de uma frase. Muito abrangente. Um acrônimo é uma abreviação composta pelas letras iniciais (ou partes das palavras) da frase que ele está representando. Por isso, CSS é um acrônimo válido, mas HTML e XHTML não são (se ‘Hypertext Markup Language’ – ‘Linguagem de Marcação de Hipertexto’ em inglês – fosse um acrônimo, seria ‘HML’. Do mesmo modo, XHTML seria EHML).

Para uma melhor acessibilidade, a frase que o acrônimo ou abreviação está representando deve ser usada no atributo title.

<p>Esse site é sobre <abbr title="HyperText Markup Language -Linguagem de Marcação de Hipertexto">HTML</abbr> e <acronym title="Cascading Style Sheets - Folhas de Estilo Encadeadas">CSS</acronym>.</p>

Por algum motivo frustante, Internet Explorer, o navegador mais comum, não suporta a tag abbr. Por sorte, um cara chamado Marek Prokop desenvolveu uma solução bem legal com javascript pra isso. O Revolução também fez um texto em português sobre essa solução.

Existe muita discussão sobre o uso de elementos de abreviação e acrônimo. Maujor fez uma análise bem completa sobre eles.

Citações

blockquote, q e cite são usados para citações. blockquote é um elemento de bloco usado para citações grandes, enquanto q é um elemento in-line usado para frases menores. cite também é um elemento in-line e preferível a q pela sua natureza semântica e porque o elemento q provavelmente vai se tornar obsoleto.

Novamente, o atributo title pode ser usado pra mostrar de onde a citação veio.

Nota: q geralmente não muda a aparência do texto – você precisa usar CSS se quiser aplicar um estilo.

<p>Então eu perguntei ao Bob e ele disse
<cite>Eu sei tanto sobre citações quanto sobre leitura de pensamento de pombos</cite>.
Por sorte, eu encontrei HTML Dog e ele disse:</p>
<blockquote title="De HTML Dog, http://www.htmldog.com/">
 <p>blockquote, q e cite são usados para citações.  blockquote é um elemento de bloco usado para grandes citações, e q é um elemento in-line usado para frases menores.  cite também é in-line e é preferível a q por causa de sua natureza semântica e pela possibilidade de q se tornar obsoleto.
 </p>
</blockquote>

Código

Existem algumas tags usadas principalmente para código, como code e var que são específicas pra código de computador além de pre e samp.

code é usada para código de computador.

var é usada para variáveis dentro de um código.

<code><var>ocopoepequeno</var> = true;</code>

samp é similar a código, mas deve ser usado pra pedaços de código de saída.

pre é texto pré-formatado e o que ele tem de especial é que ele preserva os espaços em branco dentro dele. Geralmente é usado para blocos de código.

<pre>
   <div id="intro">
   <h1>Algum Cabeçalho</h1>
   <p>Algum parágrafo parágrafo legal legal.</p>
   </div>
</pre>

Termo de Definição

dfn é um termo de definição e é usado para destacar o primeiro uso de um termo. Como abbr e acronym, o atributo title pode ser usado para descrever o termo.

<p>A mãe <dfn title="Cadela">canina</dfn> de Bob e seu pai <dfn title="Cavalo">equino</dfn> pediram pra ele se sentar e carinhosamente explicaram que ele era um organismo <dfn title="Uma mutação que combina dois ou mais conjuntos de cromossomos de diferentes espécies">poliploide</dfn>.</p>

Endereços

address deve ser usado para um endereço.

<address>
Casa do HMTL Dog<br /> Rua HTML<br /> Dogópolis<br / > nº 77
</address>

Raridades Obscuras

Existem algumas tags que devem ser lembradas, mas que raramente são usadas por causa de sua natureza super específica.

bdo serve pra inverter a direção do texto, e pode ser usada para mostrar linguagens onde se lê da direita pra esquerda. O valor do atributo obrigatório dir pode ser ltr (left to rightesquerda pra direita) ou rtl (right to left – direita pra esquerda).

<bdo dir="rtl">odnadoC</bdo>

kbd é usado pra indicar texto que dese ser digitado pelo usuário.

<p>Agora digite <kbd>woo hoo</kbd></p>

ins e del são usados para indicar trechos que você inseriu ou deletou do conteúdo da página. Essas tags podem ter os atributos datetime (no formato AAAAMMDD, indicando quando o trecho foi inserido ou deletado) e cite (uma URL que descreva porque a inserção ou deleção foi feita).

O elemento ins geralmente é mostrado sublinhado e o elemento del cortado por um traço.

<p>Esse é o conteúdo
<del datetime="20030522">nonsense</del><ins cite="http://www.htmldog.com">muito informativo</ins>
que eu escrevi.</p>

Elementos de Apresentação

b, i, tt, sub, sup, big e small são todos elementos usados para modificar a apresentação e como tais, por sua definição, não devem ser usados se você está tentando separar conteúdo da apresentação. b, por exemplo, define um elemento em negrito e não tem significado algum. Essas tags definem características apenas visuais, e isso é trabalho do CSS. Mesmo que essas tags sejam válidas, existem outras (como strong e em) que adicionam significado, e por isso são preferíveis. Se você quer apenas replicar estilos específicos dessas tags, sem dar nenhum significado especial, você deve usar tags span e modificar o estilo com CSS.

Páginas Relacionadas

Referência





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.





Tutorial Avançado de HTML: Recapitulada nos Padrões

31 05 2008

Símbolo da"Acessibilidade na Web"

Essa página é para quem conhece HTML, mas está meio inseguro em relação aos padrões envolvidos no XHTML e à filosofia de separar conteúdo e apresentação.

Separando conteúdo e apresentação

HTML não foi criado pra ser usado para apresentação, mas alguns navegadores incorporaram elementos que formatavam texto e os desenvolvedores deram um jeito de manipular o layout, e o HTRML começou a ser usado pro fim errado. Com o poder do CSS não é mais necessário cuidar da apresentação usando HTML, e o conteúdo (HTML) agora pode ser completamente separado da apresentação (CSS).

Essa abordagem traz inúmeros benefícios – os arquivos ficam menores, você tem mais flexibilidade com uma folha de estilos central sendo aplicada em todo o website e as páginas são muito mais acessíveis.

Seguir essa filosofia significa apenas que você não deve alterar a apresentação de nada com HTML. Tags como font e atributos como bgcolor não devem ser usados. Nem mesmo o artibuto border dentro da tag img é válido no XHTML 1.1. Isso não é um problema – não existe nenhuma formatação que pode ser feita com HTML e não pode ser feita, e muito melhor, com CSS.

Não basta tirar a apresentação do HTML, o termo conteúdo significa que tags HTML específicas devem ser usadas quando apropriado. Por exemplo, h1, h2, etc. devem ser usados para cabeçalhos – vocâ não pode só usar CSS pra deixar suas fontes maiores.

Um bom guia é ver se um navegador visual, com seu estilo padrão, apresenta o documento corretamente sem uma folha de esstilos.

Tabelas não devem ser usadas para o layout – tabelas foram criadas para mostrar dados tabulares. Essa é provavelmente a técnica mais difícil para HTMLzeiros se acostumarem porque muda completamente o modo como o HTML era tradicionalmente estruturado tempos atrás. Essa abordagem reduz drasticamente o tamanho da página e, devido ao código resultante bem estruturado, a torna muito mais acessível.

Leia a página sobre layout no Tutorial Avançado de CSS pra saber mais sobre isso – e aprender a fazer suas páginas sem usar tabelas.

Tags

No XHTML todas as tags devem estar em mínusculo e precisam ser fechadas. As tags que não tem tags de fechamento (como br e img) precisam se fechar com uma ‘/’ no final (como <br />). É recomendável colocar um espaço antes da barra.

A marcação precisa ser “bem-formada” (well formed), com os elementos aninhados da forma correta (por exemplo, <strong><em>assim</em></strong>, não <strong><em>assim</strong></em>).

Todos os documentos precisam ter os elementos html, head, title e body. Eles também devem começar com uma declaração do tipo do documento.

O corpo do elemento deve começar com p, h1, h2, h3, h4, h5, h6, div, pre, address, ins ou del.

Atributos

Todos os atributos devem estar escritos em mínusculo e seus valores dentro de aspas duplas.

Atributos minimizados não são permitidos (como <input type=”checkbox” checked />). O valor dos atributos que geralmente eram minimizados deve ser igual ao seu nome (como <input type=”checkbox” checked=”checked” />).

O atributo name não é mais válido (exceto em elementos de formulário) e deve ser substituído por id.

O atributo target não é um atributo válido. Ainda bem. Ele era mesmo meio idiota.

O atributo alt na tag img é obrigatório.

Acessibilidade

As razões para construir páginas web acessíveis a usuários com deficiências são bem evidentes. Não é apenas questão de moral, mas beneficia nosso futuro, já que os usuários da web vão envelhecendo e a precisão dos sentidos degenera, e é uma vantagem comercial, já que usuários com deficiências são consumidores. Acessibilidade não é apenas permitir que pessoas com deficiências acessem sua página, é garantir que qualquer pessoa possa acessar sua página e facilitar o acesso de pessoas com leves deficiências, como visão baixa.

Já existem alguns incentivos legais à acessibilidade, como a “Seção 508″, nos Estados Unidos, uma tentativa de forçar certas iniciativas referentes a acessibilidade, e leis no Reino Unido e no Brasil que obrigam todos os sites do governo a serem acessíveis. Quanto tempo vai levar até que leis assim sejam aplicadas para sites comerciais no geral, como são nos edifícios?

Se você seguir as práticas acima, seu HTML já deve ser bastante acessível a pessoas com deficiência. Existem alguns cuidados que podem tornar suas páginas ainda mais acessíveis (por exemplo, veja as páginas Links Acessíveis e Formulários Acessíveis) e isso não é nada difícil.

Páginas Relacionadas

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





Tutorial Avançado de HTML

27 05 2008

"XHTML Válido", "CSS Válido" e "Acessibilidade Brasil"

O objetivo do Tutorial Avançado de HTML é te mostrar como aproveitar ao máximo as características do HTML e como tornar suas páginas mais acessíveis.

Como o Tutorial Iniciante de HTML e o Tutorial Intermediário de HTML ensinam a usar o padrão mais recente do HTML (XHTML 1.0+), alguns aspectos desse guia podem não ser familiares pra muitas pessoas que não leram os tutoriais Iniciante e Intermediário, e é por isso que vamos dar uma recapitulada nos padrões. No geral, as páginas nessa seção assumem que você já conhece HTML e quer usá-lo em seu máximo potencial.

Conteúdos

Páginas Relacionadas

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





Tutorial Intermediário de HTML: Exercícios

22 04 2008

Logo do +web em tom verde escuro

Antes de irmos pro próximo assunto, vamos praticar um pouco o que vimos por aqui.

Primeiro, dê uma incrementada no projeto que você começou lá atrás. Use as tags novas que você aprendeu, retire as tags más. Atualiza o seu servidor e envie o resultado pra meu email.

O segundo exercício é esse:

Exercício

Como você viu no começo desse curso e nesse texto que foi indicado, html é pra conteúdo e CSS é pra apresentação.

No código abaixo temos conteúdo e apresentação misturados no HTML – muito feio. Sua missão é limpar esse código. Substituir tudo que for relativo a apresentação por CSS, acrescentar o que estiver faltando, usar a tag certa pra cada elemento – p para parágrafos, h# para cabeçalhos, etc.

<html>
  <head>
    <title>Minha Página Misturada</title>
  </head>

  <body bgcolor="#00FFFF">
  <p align="center"><b><font size="6" face="Verdana">Um Cabeçalho</font></b></p>
  <p align="center"></p>
  <hr>
  <p><font face="Verdana" size="2">Esse texto que você está lendo foi retiradao de um <b> curso</b> de html.
  Desse mesmo jeito. <b> Só estou mudando os textos</b>, pro autor não ficar com raiva de mim</b>.</font></p>
  <p><font face="Verdana" size="2">E eu vou continuar escrevendo <b>qualquer coisa</b>, <b>qualquer coisa mesmo</b>,
  <b>sem ter nada pra falar</b>, <b>enrolando</b>, mais um pouco.</font></p>
  <p><font face="Verdana" size="2">E não ligue se isso não fizer sentido</font></p>
  <p align="center"><font face="Verdana" size="2">
  <img border="0" src="imagem.jpg" width="400" height="300"></font></p>
  <p><font face="Verdana" size="2"><b>Correio Electrónico:</b><a href="mailto:htmlvelhinho@algumauniversidade.pt">htmlvelhinho@algumauniversidade.pt</a></font></p>
  <p> </p><p><a href="um-link.html"><font face="Verdana" size="1">código HTML desta página</font></a></p>
  <p><a href="diario.html"><font face="Verdana" size="1">Um texto bem pequeninho.</font></a></p>
  </body>
</html>

O que é importante aqui: Compare o tamanho do arquivo antes de depois de ser limpado e você vai perceber que o arquivo limpo é bem menor. Um arquivo menor significa uma página que carrega mais rápido e que ocupa menos espaço.

Quem não quer uma página carregando mais rápido?

Quando estiver pronto, sigara para a próxima parte: CSS Intermediário.

Páginas Relacionadas





Tutorial Intermediário de HTML: Tags Más

13 03 2008

Código

Essa página analisa algumas tags HTML dos mundos de contos de fada e tempos pré-históricos. Más, fedorentas, ou simples coisinhas feias que pertenceram a padrões HTML ultrapassados, tolices proprietárias aleatórias que só quase-funcionam numa sub-versão de algum navegador ou tags que simplesmente foram suplantadas por tags mais novas.

A abordagem do HTML Dog de ensinar HTML e CSS baseado nos padrões web sem fazer barulho nenhum sobre os próprios padrões é uma boa mas, ao fazer isso, usuários (principalmente iniciantes) podem encontrar abordagens diferentes e más-práticas em outros lugares e não saber o que há de errado com elas. Pensando nisso foi criado esse guia sobre o que Não usar.

HTML tentou se mover da apresentação para o significado, conduzindo uma filosofia de separar o conteúdo e significado (HTML) da apresentação (CSS). Essa abordagem geral torna as páginas muito mais enxutas, porque um único conjunto de instruções relativas à apresentação (em um arquivo CSS externo) pode ser aplicado a muitas páginas. Isso também faz com que a manutenção do site se torne muito mais fácil, já que mudanças globais podem ser feitas a partir de uma única origem.

Algumas das “tags más” são apenas tags relativas à apresentação (como small) que devem ser substituídas por alguma coisa com significado ou simplesmente CSS. Outras podem ser não apenas relativas à apresentação, mas desnecessariamente volumosas (como a tag font) ou horrivelmente prejudiciais à usabilidade (como o blink).

Tags

Essas são algumas das tags mais comuns por aí que têm alternativas melhores:

  • b pode ser usado pra deixar um elemento em negrito. Usar strong (que quer dizer ênfase forte) em seu lugar adiciona significado. Para adicionar apenas negrito, sem significado especial, a regra CSS font-weight: bold faz o serviço.
  • i pode ser usado para deixar um elemento em itálico. Usar em (significa ênfase) em seu lugar adiciona também significado. font-style: italic também pode ser usado pra ajustar apenas a apresentação.
  • big pode ser usado pra criar um texto grande. Usar, ao invés disso, cabeçalhos (h1, h2, etc., quando o texto for um cabeçalho genuíno) adiciona significado, ou simplesmente usar a propriedade font-size no CSS te dá mais controle sobre a apresentação.
  • small pode ser usado pra criar texto pequeno. CSS (font-size) mais uma vez te dá mais controle.
  • hr pode ser usado pra mostrar uma linha na horizontal. De qualquer forma, é raro usar hr numa página feita com CSS; propriedades como border-top e border-bottom ou até mesmo simples imagens fazem o trabalho bem melhor.

Todas as tags mencionadas acima são compatíveis com os últimos padrões HTML, mas elas não aplicam nenhum significado ao conteúdo, coisa que todas as “tags boas” devem fazer. Elas poderiam ser mais úteis, mas elas não são muito prejudiciais, e facilmente poderiam ser confundidas com pequenas criancinhas inocentes e cheias de bondade perto dessas tags imundas abaixo:

  • u pode ser usado pra sublinhar elementos. Só que a maioria das pessoas associa texto sublinhado com links (se tá sublinhado, é pra clicar). Por isso essa tag morreu muito tempo atrás – você realmente não quer sublinhar texto que não seja link.
  • center pode ser usada pra centralizar um elemento dentro de outro. A propriedade CSS permite os valores não apenas de center, mas também left (esquerda), right (direita) e justify (justificado).
  • menu pode ser usado pra criar um menu. Ela faz exatamente o que ul faz, mas como uma “lista não-ordenada” é mais geral, ul permanece de pé sobre o cadáver de menu.
  • layer é similar ao elemento div posicionado com CSS. Ela só funciona em versões velhas do navegador Netscape, o que a torna meio inútil.
  • blink faz o texto piscar e marquee faz o texto ficar atravessando a página. Apenas digam “NÃO!”, crianças. Elas tem um suporte muito limitado e com certeza foram criadas só pra fazer brincadeiras muito, muito doentes.
  • font, que podia ser usada pra definir o nome da fonte, tamanho e cor de um elemento ganhou uma merecida reputação de ser o notoriamente perverso Lord dos Duendes diabólicos da Taglândia. Velhos sites (e até mesmo alguns novos) tem tags font espalhadas por todas as suas páginas como uma praga de cupim. Muita de sua proliferação começou com os softwares de autoria web colocando a tag font ao redor de cada elemento em que o autor aplicava cor ou tamanho. Enquanto a tag font precisa ser aplicada em cada ocorrência de um elemento (digamos, sempre que você usa uma tag p), com CSS você pode aplicar propriedades a todas as ocorrências de um elemento com apenas uma linha de código para todo o seu site. Usando esse método, a página fica bem mais leve que uma página equivalente infestada de tags font. Além disso, mudanças podem ser feitas mais facilmente porque tudo que você precisa fazer é mudar uma linha de CSS ao invés de cada instância da tag font. Isso também aumenta suas chances de manter um design consistente em todo o site. tags font e o uso inapropriado de tabelas são as causas mais comuns de páginas desnecessariamente inchadas.

Atributos

Você pode pensar que, agora que já conhece as tag más e só vai usar as boazinhas, seu HTML está limpo e seguro. Mas existem alguns atributos na estreita esperando pra estragar suas “tags boas”.

  • name pode ser usada pra dar um nome a um elemento, o que é perfeitamente aceitável em elementos em formulários como o input, mas em qualquer outro lugar name foi substituído pelo atributo id.
  • text e bgcolor podem ser usadas pra especificar a cor base do texto e a cor do background de uma página dentro da tag body de abertura. As propriedades CSS color e background-color podem fazer isso quando aplicadas ao seletor body.
  • background pode ser usado dentro da tag body pra especificar uma imagem para o background de uma página. CSS cuida de imagens de background bem melhor com propriedades como background-image.
  • link, alink e vlink podem ser usadas na tag body pra especificar a cor dos links (não-visitado, ativo e visitado). CSS, baby – :link, :active e :visited fazem todo o trabalho.
  • align pode ser usada pra alinhar o conteúdo de um elemento (como em <div align="center">Stuff</div>), mas, como acontece com a tag center, a propriedade CSS text-align é a nova chefe.
  • target pode ser usada pra abrir um link em vários estados, geralmente em uma nova janela (como

<a href="qualquerlugar.html" target="_blank">Ajude me</a>

). Parece legal, mas não está fazendo nenhum favor ao seu site. Usuários não querem que coisas (como novas janelas) apareçam como mágica e a ferramenta de navegação mais usada em um site é o botão “Voltar”, que não vai funcionar se você abrir o link em uma nova janela. target é inválido e inacessível.

Atributos relativos a apresentação como width e height para imagens e cellpading e cellspacing para células ainda tem que ser usados devido a frequência com que diferentes valores precisam ser aplicados a diferentes elementos. Eles não são a solução perfeita, mas se você tem uma página com um grande número de imagens ou tabelas, você pode não ter nenhuma outra escolha sensata.

Os mais desconcertantes atributos relativos a apresentação pertencem a tag textarea, onde os atributos cols (número de colunas) e rows (número de linhas) são não apenas válidos, mas obrigatórios segundo o último padrão HTML.

Tags boas, mau uso

Pra entrar na sua casa você até pode se ajoelhar e se espremer por aquela pequena portinhola de cachorro mas espere! Tem uma porta humana bem grande enfeitada com um aparelho chamado fechadura! Wow! Olhe – a porta, tipo, é do tamanho certo pra um humano passar.

A coleção de tags HTML (as boas) foi feita pra uma razão específica e acredite ou não (acredite), quando você as usa pelos motivos certos, você consegue resultados melhores.

Páginas web são muito mais acessíveis para pessoas com deficiências quando o HTML é semântico (as tags são usadas pelos motivos certos), por que, por exemplo, leitores de tela vão geralmente enfatizar uma lista quando encontram uma tag ul ou ol e um cabeçalho quando encontram um h1 ou h2.

A tag HTML mais usada inapropriadamente é a table. Tabelas são muitas vezes usadas pra fazer o layout, mas elas devem ser usadas apenas pra mostrar dados tabulares, como sempre foi sua intenção. O método de layout sem tabelas não é nenhum tipo de desafio Zen Budista para a iluminação de um verdadeito geek, existe um benefício prático real de não apenas reduzir drasticamente o peso da página, mas também facilitar a manutenção e o redesign. Um bom exemplo disso é o Zen Garden (versão brasileira – Zen Garden do Maujor). Mudando apenas o CSS, você muda o visual do site inteiro. Legal, não é?

Algumas vezes designers usam algumas das tags e atributos mencionados aqui (especialmente tabelas para layout) pra conseguir um design que suporta tanto navegadores antigos (em especial o Netscape 4) quanto os modernos. Tabelas vão efetivamente permitir um controle melhor sobre a apresentação em navegadores que não suportam o CSS, como o Netscape 4, mas existem pouquíssimos usuários desses navegadores e cada vez menos, enquanto o número de usuários onde um layout feito com tabelas é uma grande desvantagem – usuários de dispositivos móveis – cresce. As vantagens de um design livre de tabelas mencionadas acima de longe superam as desvantagens e o resultado são páginas que, embora percam o estilo pra uma minoria, permanecem com todas as suas funcionalidades em todos os navegadores.

Frames (Quadros)

Cachinhos Dourados achou que seria uma ótima idéia comer aquelas tigelas de mingau, mas três mamíferos grandes e carnívoros apareceram e a jogaram pela janela. Frames são tigelas de mingau que pertencem a ursos. Podem parecer legais, mas é bem perigoso andar em algum lugar perto deles.

A maioria dos sites não usa frames e no geral usuários da web estão acostumados com um único documento compondo uma página.

Mas se, por alguma razão, você quer:

  • prevenir os usuários de adicionar uma página específica aos seus favoritos;
  • prevení-los de recomendar uma página por email ou mensageiro instantâneo;
  • adicionar um outro nível de complexidade pra usuários que usam leitores de tela, que vão ter que navegar entre frames ao invés de navegar por uma página
  • confundir mecanismos de busca,

vá em frente, use frames.

No geral, frames não fazem nada além de adicionar complexidadade e subtrair usabilidade.

Se você seguir essas receitas de bolo, você não vai errar muito:

  1. Se o nome da tag ou atributo pelo menos sussura alguma coisa sugerindo apresentação, não use. Isso é trabalho do CSS. E CSS faz o trabalho bem melhor.
  2. Usa a tag pra fazer o que o nome indica. Tabelas são pra dados tabulares. Cabeçalhos pra cabeçalhos. Etcetera etcetera.
  3. Quando você tiver algum conteúdo específico, use as tags apropriadas. Listas pra listas, cabeçalhos pra cabeçalho, yada yada yada.

E já que falamos muito de usabilidade e acessibilidade, alguns links pra você ficar mais por dentro do assunto:

Páginas Relacionadas

Referência

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





Tutorial Intermediário de HTML: Listas de Definição

10 03 2008

Lista de definição

O Tutorial Iniciante de HTML analisou só as listas ordenadas e não-ordenadas. Assim como a série “Jennie é um Gênio”, listas de definição são muito frequentemente esquecidas. Isso acontece talvez porque elas são bem mais específicas que listas ordenadas e não-ordenadas e até menos úteis, mas onde existir uma lista de termos e descrições (como um glossário), uma lista de definição deve ser usada.

O elemento dl põe a bola em jogo, similar aos elementos ul e ol, iniciando a lista. Ao invés de elementos li, listas de definição tem um elemento dt, que é o termo da definição (definition term), seguido de um elemento dd, que é a descrição da definição (definition description) associada ao elemento dt.

Não é necessário haver um elemento dt seguido por um elemento dd, pode haver qualquer número dos dois. Por exemplo, se existem várias palavras com o mesmo significado, devem existir várias dt’s seguidas por um dd. Se você tiver uma palavra que significa várias coisas diferentes, deve existir um dt seguido por vários dd’s.

<h1>Um glossário qualquer</h1>
<dl>
	<dt>HTML</dt>
	<dd>Abreviação de HyperText Markup Language (Linguagem de Marcação de Hipertexto) - uma linguagem usada para construir páginas web.</dd>

	<dt>Canino</dt>
	<dd>Qualquer mamífero carnívoro pertencente a família Canidae.</dd>
	<dd>Um tipo de dente humano.</dd>

	<dt>Suco de Vaca</dt>
	<dt>Cerveja de Gato</dt>
	<dt>Leite</dt>
	<dd>Um líquido branco produzido por vacas e usado pra consumo humano.</dd>
</dl>

Páginas Relacionadas

  • Próxima Página: Tags Más
  • Página Anterior: Tabelas II
  • Listas – Listas Ordenadas e Não-Ordenadas (Tutorial Iniciante de HTML)
Exemplos
Referência

BlogBlogs Tags: tutorial, minicurso, html

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