Resolução de Problemas de Layout

Design Responsivo: Entenda o que é a técnica e como ela funciona.

O conceito de design responsivo não é uma grande novidade, mas tem chamado bastante atenção nos últimos tempos com o crescimento do mercado de dispositivos móveis, principalmente por conta dos tablets e celulares de tamanhos e resoluções cada vez mais variadas.
Só para você saber, o layout do Midiatismo é um exemplo de design responsivo.
Neste novo contexto dos navegadores e várias resoluções, o design responsivo surge como uma evolução lógica do design de sites, também conhecido como web design. Antes grande parte da internet era acessada por resoluções e navegadores muito semelhantes. Até pouco tempo atrás bastava fazer um site que funcionava em Internet Explorer com resolução máxima de 1024×768 pixels que tudo estava resolvido, claro existiam outras características, mas a grande maioria estava nesse mesmo grupo – no máximo havia os usuários de Mozilla Firefox. Hoje tudo mudou, temos TVs de 50″ polegadas acessando internet, temos celulares que tem telas de 2″ até 5″, tablets de 6″ até 11″ polegadas e sem contar os próprios computadores, que tem telas de netbook até os mais novos iMacs da Apple, colocando uma margem de 11″ até 26″ polegadas.

Esta característica demonstra que um site pode ser visto de diversas formas e em diversos contextos, e é para isto que os sites devem estar preparados. O design responsivo, como o próprio nome já indica, consegue responder ao tamanho da tela para se adequar da melhor forma. Ao invés de criar dois sites separados, um para mobile e um para desktops, como era muito comum hoje, você faz apenas um site que vai se adaptar muito bem a qualquer tela em que ele for carregado.

Você faz um site responsivo ou vai fazer dez sites diferentes

Uma das principais vantagens do design responsivo também se torna um grande problema para as agências digitais. Se você quer que o seu site esteja adaptado aos celulares, smartphones, tablets, notebooks, desktops e TVs, você provavelmente teria que fazer pelo menos 5 sites diferentes. A evolução do design responsivo mudou bastante isto, conseguindo trazer a vantagens de ter diversos sites para um só lugar.
Mas esta facilidade de adaptação também cria um problema para as agências digitais e todos aqueles profissionais que trabalham no desenvolvimento de sites. Como cobrar um site com design responsivo? Você deve somar o valor de vários serviços ou deve ter um valor diferenciado? Você deve oferecer design responsivo em pacotes diferenciados onde cada um tem foco em certos dispositivos?

Claro que o design responsivo não resolve todos os problemas e talvez nem seja a solução para todos, mas definitivamente é um caminho a ser seguido e ainda mais explorado. Muitos defendem que o melhor caminho ainda é um site dedicado a cada dispositivo que pode – e deve – se aproveitar de técnicas de design responsivo.
Há também quem aponte que o design responsivo não é a solução completa, já que ainda não consegue ser totalmente otimizado aos celulares (principalmente no quesito peso e velocidade de carregamento), mas ainda parece ser a melhor solução em relação a custo benefício.

A importância da adoção de padrões na internet

Apesar da existência dos padrões da W3C para tentar igualar as ferramentas baseadas em web, quem desenvolve para web sabe que os padrões não são assim tão padronizados – quem diga o Internet Explorer.
Hoje em dia não há apenas dois navegadores centrais para você se preocupar. Até pouco tempo atrás você fazia o site funcionar no Firefox e – com muito trabalho – no Internet Explorer 6 e 7. Hoje temos Internet Explorer (7, 8, 9 e 10), Firefox, Google Chrome (Desktop, tablet e celular), Safari, Opera (desde desktop até o da televisão) e vários navegadores menores. Tudo isso sem contar a proliferação de sistemas operacionais, hoje em dia não existe “apenas” o Windows, também devemos nos preocupar com o Mac, Linux, Android, iOs, Windows Phone e por aí vai.

A adoção e evolução dos padrões de internet nunca foram tão necessárias como estão sendo agora.

Estes dois termos são essenciais para entender como os navegadores interpretam os sites. Em primeiro o user agent, comumente utilizado para diferenciar o usuário quando ele está acessando através do celular ou do navegador desktop. O “agente de usuário” (tradução literal, por favor, não utilizem ela) é a função dentro do site que identifica as questões técnicas que envolvem o usuário que esta o visitando.
Geralmente esta função é utilizada para diferenciar o site mobile do site normal fazendo apenas uma verificação de navegador e sistema operacional – na verdade ele verifica algumas outras questões mais técnicas que não vem ao caso agora. Mas o problema é que muitos dispositivos e navegadores acabam não entrando na lista, portanto não são direcionados para o site correto.
Por exemplo, quando você acessa o fictício www.exemplodesite.com.br e é redirecionado para om.exemplodesite.com.br é porque provavelmente ele identificou que o seu user agent era mobile. O problema é que se você usar, por exemplo, o Firefox para Android, ele não vai ser identificado e irá mostrar o www.exemplodesite.com.br (Obs.: usei Firefox para Android como exemplo porque isto ocorreu recentemente comigo).
O uset-agent do primeiro iPad era este:Mozilla/5.0 (iPad; U; CPU OS 3_2_1 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Mobile/7B405
Já os media queries (que podemos traduzir como “Conferência de Mídia”[?]) são uma propriedade do CSS (“código de estilo” das páginas web) que identifica qual a mídia aquele site está sendo carregado e atribui determinado estilo a ela. O design responsivo atual trabalha basicamente com esta função, modificando tamanhos, dimensões e formatos conforme o tamanho da tela do usuário.
Por exemplo, se você abrir o Midiatismo e redimensionar a tela do seu navegador, quando esta função do CSS identificar que se trata de uma tela menor que 760 pixels de largura, ele irá mudar o visual do blog, sem ter nenhuma alteração no conteúdo carregado, apenas na forma como eles estão dispostos.
Você pode entender mais sobre as media queries através desta documentação da W3C.
Só media queries não bastam. Seria impraticável criar uma media querie para cada resolução existente — seriam milhares! Devemos usar poucas media queries e fazer o layout fluir entre os breakpoints.
O segredo é não usar pixels nas medidas, mas priorizar um layout mais fluído e flexível baseado em porcentagens e ems.
Seria até possível criar um site mobile apenas com essa ideia, sem usar media queries. Se tudo for porcentual, o design se adaptaria a todas as resoluções. Mas, na prática, não seria um design capaz de aproveitar o potencial de cada dispositivo. As media queries permitem ajustar o design pensando em adaptar e melhorar a experiência do usuário.

A verdade é que você provavelmente precisará reconstruir boa parte do seu site. Mas para ter um pouco menos de trabalho, recomendo que procure utilizar frameworks que já trabalhem com o design responsivo. Frameworks são estruturas de código já prontas que trazem consigo diversas linhas em CSS, JavaScript e HTML já escritas, facilitando bastante o trabalho do desenvolvedor do site.

Entre os frameworks mais conhecidos podemos citar os seguintes:
Foundation (http://foundation.zurb.com/)
Boostrap (http://twitter.github.com/bootstrap/)
Semantic Grid System (http://semantic.gs/)
Frameless (http://framelessgrid.com/)
Skeleton (http://www.getskeleton.com/)
Golden Grid (http://goldengridsystem.com/)
Fluid Baseline (http://fluidbaselinegrid.com/)
Initializr (http://www.initializr.com/)

Classes condicionais

Existem várias maneiras de se lidar com as diferenças entre browsers quando se trata de CSS. Eu mesmo já falei sobre CSS hacks, comentários condicionais e até uma biblioteca JS que corrige os problemas do IE tornando-o standards compliant. Cada uma delas tem suas vantagens e desvantagens, e ainda vou escrever um post sobre isso, prometo.
Os comentários condicionais costumam ser uma das maneiras mais aceitas e bem vistas de se encarar o problema. Com eles é possível entregar o layout perfeito, sem erros, mantendo o CSS limpo, sem hacks e válido à um custo razoável: o uso um arquivo CSS adicional para o Internet Explorer. Pra quem ainda não conhece, funciona assim:
01.<html>
02.<head>
03.<link rel="stylesheet" type="text/css" href="estilos.css" />
04.<!--[if IE 6]>
05.<link rel="stylesheet" type="text/css" href="estilos-para-ie6.css" />
06.<![endif]-->
07.</head>
08.<body>
09.<div id="menu">conteúdo do site....</div>
10.</body>
11.</html>

Tudo o que estiver dentro das tags <!–[if IE 6]> e <![endif]–> será interpretado apenas pelo Internet Explorer 6. Dessa forma você pode escrever o seu CSS sem nenhum hack, com código 100% válido, e colocar todas as correções em um outro arquivo específico para o IE. A desvantagem é ter 2 arquivos CSS ao invés de um, o que pode ser prejudicial em termos de atualização e manutenção.
Mas e se, ao invés de usar os comentários condicionais para linkar um novo CSS, os usássemos para fazer o seguinte:
01.<html>
02.<head>
03.<link rel="stylesheet" type="text/css" href="estilos.css" />
04.</head>
05.<!--[if IE 6 ]>
06.<body class="ie">
07.<![endif]-->
08.<!--[if !IE 6]>-->
09.<body>
10.<!--<![endif]-->
11.<div id="menu">conteúdo do site....</div>
12.</body>
13.</html>

Isso faz com que a classe “ie” [class="ie"] seja aplicada apenas quando o browser utilizado é o Internet Explorer 6 [if IE 6]. Caso contrário o <body> fica sem nenhuma classe [o sinal "!" significa "não igual"]. Assim, podemos escrever nosso CSS da seguinte maneira:

1.div#menu { color: inherit; } /* linha interpretada por todos os browsers */
2..ie div#menu { color: #ff8000; } /* linha interpretada apenas pelo IE 6 */

Ou seja, podemos colocar todas as correções precedidas pelo seletor de classe “.ie”, dessa forma apenas o IE 6 irá interpretá-las. Eliminamos assim a necessidade de um segundo arquivo e ficamos livres também dos hacks, podendo então escrever CSS 100% válido. 

Padrões de Repetição para Imagens

- Explicar e exemplificar a técnica de padrões de repetição para imagens.
- Aplicar padrões de repetição para resolver problemas de layout.

Os padrões de repetição ou patterns são muito utilizados no web design. HTML os têm e CSS, é claro, também. Todos nós já os teremos usado em muitas ocasiões, para conseguir a repetição de uma imagem que colocamos como fundo de uma página ou de qualquer outro elemento de uma web. O componente Canvas do HTML 5 também tem sua própria implementação dos padrões, com os quais podemos fazer facilmente um mosaico no que se repita constantemente uma imagem.

Definir um padrão

Para definir um padrão utilizamos o método createPattern() que pertence ao contexto do canvas. Este método recebe dois parâmetros. O primeiro é a imagem que desejamos utilizar como padrão e o segundo é o tipo de repetição que queremos implementar.

A imagem que desejamos utilizar podemos tirá-la de um objeto Image de Javascript e o tipo de repetição é similar ao que se utiliza quando se define um fundo de imagem em CSS: "repeat" (para um mosaico que se repete tanto na horizontal quanto na vertical, "repeat-x" (para repetições na horizontal), "repeat-y" (para repetir a imagem na vertical) e "no-repeat", que não produzirá nenhuma repetição).

Existem vários passos prévios a serem realizados antes de se poder utilizar uma imagem:
Criar um objeto Image de Javascript:
var img = new Image();
Associar o arquivo gráfico desejado:
img.src = 'logo-desarrolloweb.gif';
Definir o que desejamos fazer com a imagem, por meio do evento onload, que se ativa quando a imagem está pronta para usar:
img.onload = function(){
//código que desejemos fazer, onde sabemos ao certo que a imagem está disponível.
}

Uma vez que tenhamos definido um padrão, ainda temos metade do trabalho por diante. Esse padrão simplesmente estará declarado como objeto em Javascript e pronto para usar em um canvas, mas para isso devemos configurar o estilo de preenchimento e em seguida preencher de cor uma área.

var meuPadrao = ctx.createPattern(objeto_imagem, 'repeat');

Com a linha anterior teríamos criada uma variável meuPadrao que contem um padrão de imagem pronto para ser utilizado.

Configurar um padrão como estilo de preenchimento de cor

A propriedade fillStyle do contexto do canvas, que vimos ao falar da cor de preenchimento e de traçado em canvas, à parte de especificar a cor de preenchimento, indicar um padrão para utilizar para preencher uma área. Com isto, conseguiremos pintar uma área com um padrão ou mosaico de imagem, em lugar de uma cor plana.

ctx.fillStyle = meuPadrao;

Com isto conseguimos que, na próxima vez que se preencha de cor uma área, se faça com um mosaico de imagem ou pattern, em lugar de uma cor plana.
Agora podemos preencher de cor qualquer área, que será preenchida com o padrão definido anteriormente.
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
Com esta linha preencheríamos de cor toda a área disponível no elemento canvas, ou seja, um retângulo que vai desde a coordenada (0,0) até toda a largura e altura do canvas. Como previamente se aplicou o padrão à propriedade fillStyle, em vez de preencher com uma cor se preencherá com um mosaico de imagem.
Para terminar colocamos o código de um exemplo que faz uso de uma imagem para criar o pattern.
window.onload = function(){
//Recebemos o elemento canvas
var ctx = cargaContextoCanvas('meucanvas');
if(ctx){
//Crio uma imagem com um objeto Image de Javascript
var img = new Image();
//indico a URL da imagem
img.src = 'logo-desarrolloweb.gif';
//defino o evento onload do objeto imagem
img.onload = function(){
//Crio um "pattern" no canvas
var meuPadrao = ctx.createPattern(img, 'repeat');
ctx.fillStyle = meuPadrao;
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
}
}
}
Como vimos, não há muito mistério no uso de padrões. É um pouco mais trabalhoso que colocar uma imagem no canvas, mas muito menos que se tivéssemos que escrever um script para realizar o mosaico "à mão".
Outra forma: Você alguma vez ja teve vontade de colocar um gradiente em diagonal como plano de fundo no seu site ou blog mas percebeu que teria que criar uma imagem inteira e seria inviável, pois ficaria muito pesada?
Uma das coisas que aprendemos em HTML é criar backgrounds usando repetições de imagens. Para criar então um gradiente vertical ou horizontal é perfeitamente viável sem necessitar criar uma imagem inteira, ela só preceisa ter a largura da tela e espessura de 1 ou 2 pixels no caso de gradiente horizontal e vice versa para gradiente vertical. A repetição da imagem criará emendas perfeitas que no final parecerão uma imagem única.
Criar um gradiente diagonal com uma imagem pequena e que se encaixe perfeitamente, principalmente se tiver mais de duas cores acho que não é tarefa fácil.
Felizmente é possível fazer um efeito desses com CSS puro.
Veja o código abaixo:

Então entra em cena o Ultimate CSS Gradient Generator uma ferramenta online que lhe possibilitará criar gradientes lineares, diagonais e até mesmo radiais.

Padrão de repetição de imagens com a propriedade background

As propriedades background permitem definir efeitos para o pano de fundo de elementos

O CSS oferece as seguintes propriedades para definição de background (fundo) de elementos em HTML:
background-color: define uma cor de fundo.
background-image: define uma imagem de fundo.
background-repeat: define uma repetição para uma imagem, definida nas posições horizontal e vertical.
background-attachment: não suportados por todos os navegadores.
background-position: posicionamento da imagem no fundo da página.

Propriedade background-image - Imagem de fundo

A propriedade background-image define uma imagem para ser usada como fundo de um elemento.
Por padrão a imagem é repetida, então ela acaba cobrindo todo o elemento. Por isso é preciso tomar cuidado ao definir imagens menores que o tamanho do elemento na qual a mesma será carregada.
Vejamos como uma imagem pequena pode ser utilizada para preencher todo o corpo de uma página:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade background-image em CSS</title>
  </head>
  <body style="background-image: url(imagens/fundo.gif);">
    <h3>Propriedade background-image em CSS</h3>
    <p>
      Esta página tem uma pequena imagem definida com
      a propriedade <strong>background-image</strong>.
    </p>
    <p>
      Como o padrão para essa propriedade é que a mesma
      seja repetida, todo o corpo da página recebe
      esse fundo.
    </p>
  </body>
</html>

A imagem utilizada na página acima é bem pequena, com apenas 10 x 10 pixels, veja:

Mas como a mesma é repetida, o corpo da página acaba sendo renderizado com um mosaico. 
Veja o resultado:

É preciso tomar cuidado para que a apresentação do texto não seja prejudicada pela imagem de fundo.

Propriedade background-repeat - repetição de background

A propriedade background-repeat utiliza geralmente os valores repeat-xe repeat-y, que determinam o eixo no qual uma imagem será repetida.
Há também o valor no-repeat, que evita que a imagem seja repetida, como veremos mais abaixo.
Os valores para a propriedade background-repeat devem ser utilizados em conjunto com a propriedade backgroun-image, para que seja possível determinar qual imagem será repetida.

Valor repeat-x - Repetição na horizontal

Por exemplo, digamos que você queira aplicar um fundo de uma imagem em background no topo da página, como a imagem abaixo:

Se você inserir uma imagem completa, cobrindo toda a largura da área desejada, a página pode demorar para carregar e ficar lenta.
Com CSS e a técnica background-repeat definido com valor repeat-x, é possível utilizar uma imagem bem menor, mais estreita, conhecida em Webdesign como "fatia". Veja a imagem abaixo:

Agora vejamos como utilizar essa "fatia" da imagem em degradê que queremos criar em uma página:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade background-repeat na horizontal em CSS</title>
    <style type="text/css">
      body {
        background-image: url(imagens/background_degrade_fatia.gif);
        background-repeat: repeat-x;
      }
    </style>
  </head>
  <body>
    <h3>Background-repeat na horizontal em CSS</h3>
    <p>
      Esta página utiliza uma "fatia" de imagem em degradê
      que será repetida horizontalmente com a propriedade
      <strong>background-repeat</strong> com um valor
      <strong>repeat-x</strong>.
    </p>
    <p>
      Com o valor <strong>repeat-x</strong> a imagem
      será repetida até o tamanho da largura do elemento
      no qual a imagem está inserida, neste caso, no
      corpo do elemento <strong>body</strong>.
    </p>
  </body>
</html>

Ao visualizarmos o resultado, vemos que podemos utilizar imagens pequenas e repeti-las horizontalmente, podendo criar imagens de fundo interessantes:

Valor repeat-y - Repetição na vertical

Assim como podemos repetir imagens na horizontal com a propriedaderepeat-x também podemos repeti-las na vertical com a propriedaderepeat-y.
Essa propriedade é muito útil para criar um fundo para o corpo do documento, evitando a renderização de uma imagem muito grande e de tamanho fixo.
Se o desenvolvedor colocar uma imagem muito grande para o fundo da página inteira pode ocorrer de a página demorar para carregar.
Além disso, uma imagem com tamanho pré-definido no corpo da página limita a altura da mesma ao tamanho da imagem.
Vejamos como é possível definir um fundo para uma página completa utilizando somente uma imagem repetida no eixo y:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade background-repeat na vertical em CSS</title>
    <style type="text/css">
      body {
        background-image: url(imagens/fatia_horizontal.gif);
        background-repeat: repeat-y;
      }
    </style>
  </head>
  <body>
    <h3>Background-repeat na vertical em CSS</h3>
    <p>
      Esta página utiliza uma "fatia" de imagem em degradê
      que será repetida verticalmente com a propriedade
      <strong>background-repeat</strong> com um valor
      <strong>repeat-y</strong>.
    </p>
    <p>
      Com o valor <strong>repeat-y</strong> a imagem
      será repetida até o tamanho da altura do elemento
      no qual a imagem está inserida, neste caso, no
      corpo do elemento <strong>body</strong>.
    </p>
  </body>
</html>

A imagem utilizada nesse código é a seguinte:

Visualiando a página:

Valor no-repeat - Evitar repetição de imagem

Como vimos anteriormente, a propriedade background-image por padrão repete a imagem definida até preencher toda a página.
Para evitar que isso ocorra, utiliza-se o valor no-repeat para a propriedade background-image.
Vejamos um exemplo:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade background-image sem repetição</title>
    <style type="text/css">
      body {
        background-image: url(imagens/lemmon.png);
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h3>Background-image sem repetição.</h3>
    <p>
      Esta página utiliza uma imagem de fundo
      que foi determinada para não ser repetida
      através do valor <strong>no-repeat</strong>
      para a propriedade <strong>background-image</strong>.
    </p>
    <p>
      Se o valor não for definido como
      <strong>no-repeat</strong> a imagem será
      repetida por toda a página, como é o padrão.
    </p>
  </body>
</html>

Ao visulizarmos a página, vemos que a imagem aparece somente uma vez:

Veja o que aconteceria se não fosse definido o valor no-repeat para a propriedade background-repeat:

Técnicas de Substituição de Imagens

- Usar técnicas apropriadas para gerar conteúdos acessíveis e amigáveis (pessoas cegas e motores de busca).

Equivalente Textual

Todas as informações de uma página acessível devem ser apresentadas em texto. Isso significa que, se for usada alguma outra mídia, como imagens e sons, as informações que elas contêm devem ser repetidas numa descrição textual. Essa descrição deve ser "equivalente", isto é, deve transmitir as mesmas informações que os elementos disponibilizados.
Podemos dizer que os exemplos mais comuns de elementos não textuais são imagens de figuras, fotografias, botões, animações, linhas horizontais separadoras, mapas, filmes e sons.
Esses elementos não textuais podem ser tranquilamente utilizados numa página acessível, apenas devemos usar equivalentes textuais, a maioria deles com conteúdo, para dar oportunidade de todos os usuários percebê-los, caso isso seja adequado.
Sons incluem fala, sinais de áudio, sons de alerta, narrativas e trilhas de áudio em vídeo. Nem todos os usuários podem acessar ou utilizar esses elementos diretamente, especialmente surdos e deficientes auditivos, e, assim, necessitam também que a informação ou funcionalidade seja fornecida de outra forma, ou seja, no formato texto ou visual.
De qualquer maneira, o equivalente textual tem a função de traduzir em texto, em linguagem clara e simples, a imagem ou som, especialmente se ele for necessário para o entendimento do conteúdo.
Assim, os equivalentes textuais também são fundamentais para pessoas surdas, só que, ao invés de descreverem imagens, deverão descrever sons. Se existirem sonorizações na página, como mensagens sonoras ou vídeos com informações orais, estas devem estar redundantes em texto, para que a pessoa surda ou com uma deficiência auditiva severa possa absorver o conteúdo transmitido pela sonorização. Nesse caso, a língua gestual também pode ser importante.

Fornecer um texto equivalente para cada elemento não textual

"ALT", "LONGDESC" e "D.LINK" são técnicas para a criação de textos equivalentes.

Instruções e Técnicas

Use o atributo ALT para objetos não textuais simples, tais como figuras e títulos gráficos ou botões, deve-se especificar a descrição textual utilizando o atributo HTML "Alt" (alternativo).
O texto do atributo ALT deve ser escrito cuidadosamente para que possa fornecer informações equivalentes. Se o texto do ALT não transmitir com eficácia as informações que a imagem mostra, ele será inútil. Ao se usar um texto no atributo ALT para fornecer textos equivalentes para imagens utilizadas como links, o texto deve ter sentido como um título do link quando for lido fora do contexto. Para imagens meramente decorativas que não contêm informações, tais como espaçadores, linhas e enchimentos, usa-se o texto Alt vazio. No caso de imagens decorativas do tipo utilizadas em menus e itens de lista, barras separadoras, "coloca-se a imagem em background, através de CSS".

Uso do atributo Alt com texto vazio para objetos que não contêm informações

Para imagens que são meramente decorativas e não contêm informações, tais como espaçadores, marcadores, linhas e enchimentos, usa-se o valor vazio para o atributo ALT (alt=" "). Ele será ignorado pela maioria das tecnologias de auxílio, tais como leitores de tela, e evitará bombardear o usuário com centenas de descrições inúteis, tais como "um espaçador, uma linha azul, marcador, marcador...". Deve-se notar que o texto vazio no atributo Alt tem espaço entre as aspas. Ele não é o mesmo que alt="", que não contém um espaço e, portanto, não é um atributo Alt com texto vazio. Tecnologias de auxílio podem não ignorar objetos com atributo Alt que não contenham espaço.
ALT=" " - ALT Vazio - correto;
ALT="" - ALT Nulo.

Fornecimento de uma longa descrição quando o texto Alt não for adequado

Realmente, o atributo ALT não é útil para explicações complexas demais para serem descritas em poucas palavras. Por exemplo, se for exibir um gráfico que mostre o crescimento populacional de três países (Brasil, Argentina e Uruguai) de 1995 a 2001, pode-se utilizar o atributo ALT para dar uma descrição básica do gráfico, tal como: "Gráfico que mostra o crescimento populacional de Brasil, Argentina e Uruguai, de 1995 a 2001".
Entretanto, as informações contidas no gráfico podem ser muito complexas e exigirem uma descrição muito maior e pormenorizada da informação. O gráfico pode mostrar linhas coloridas com os parâmetros de cada país, permitindo ao usuário identificar rapidamente tendências globais e fazer comparações.
Isto está além da capacidade do atributo ALT e, nesse caso, deve-se utilizar o atributo HTML "LONGDESC" ou um "D" link. Essas duas técnicas permitem aos usuários acessarem um texto separado que descreve o contexto. Longdesc, embora seja parte da especificação do HTML, não é suportado por grande parte dos navegadores. A técnica alternativa "D" link envolve a inserção, além da imagem, de um link apresentado como a letra maiúscula "D". O alvo desse link deve ser uma página web separada com uma longa descrição detalhada para pessoas com deficiência visual. Quando o usuário tiver lido esse texto, ele pode retornar à página com a imagem. "Longdesc" significa "longa descrição".

Imagens em Background acessíveis

Os leitores de tela não possuem somente a função de ler os textos de conteúdos web, mas também de descrever a estrutura das páginas e executar as tarefas propostas por seus aplicativos. Quanto à descrição da estrutura, o leitor ao encontrar elementos (X)HTML os sonoriza e é por isso que se torna importante o desenvolvimento das páginas dentro dos padrões web. Quando um leitor de tela passa por um elemento <a> ele sonoriza "link", quando encontra um elemento <TABLE> ele, da mesma forma, sonoriza "tabela" complementando ainda quantas linhas e colunas essa possui e revelando ao usuário cego a estrutura de células que vem a seguir, quando passa por um elemento <UL> ele "diz" "LISTA DE ITENS" etc. Da mesma forma, ao encontrar um <IMG> ele sonoriza "gráfico" revelando a existência de uma imagem. São essas descrições que facilitam as pessoas cegas entrarem nos links, navegarem nas tabelas de dados de forma mais adequada etc. No caso das imagens, se esta é apenas decorativa e sem outra função que altere o conhecimento dos usuários de leitores de tela, cegos em geral, pode-se colocar essas imagens não como um elemento de marcação (HTML/XHTML), mas apenas no plano de fundo, em CSS, através da propriedade background. Isso faz com que o leitor de tela passe e ignore completamente a existência da imagem.
A grande vantagem disso é não saturar os ouvidos da pessoa com deficiência visual, que passa o tempo todo ouvindo tudo sobre a página, além das informações a que estão interessados. É importantíssimo escutar a existência de um link, de um formulário e de todos ou quase todos os elementos de uma página, mas algumas informações são exageradas e sem utilidade. A página pode ficar "verborrágica" demais. Dessa forma, o uso do atributo ALT vazio e da imagem em background são extremamente utilizados em acessibilidade na web
Entretanto, é bom observar que muitas imagens colocadas em plano de fundo, como aquelas que indicam o destino de um link para um site externo, fartamente utilizadas, deveriam, ao contrário, estarem em (X)HTML, pois possuem informação relevante. Ou seja, se o usuário clicar naquele link sairá do site e pode não ser esse o seu desejo. As pessoas que enxergam estarão avisadas do destino do link, mas as pessoas cegas e de baixa visão, pelo fato do leitor de tela ignorar imagens desse tipo, poderão entrar nele desavisadamente. Deixe essas imagens disponíveis no próprio texto do link e com o seu atributo ALT, por exemplo:
<a href="http://www.bengalalegal.com">Bengala Legal
<img src="img/ext.gif" width="17" height="11" alt="Site Externo." title="Site Externo." /></a>

Imagem sem o atributo ALT.
<img src="img/imagem123.gif" width="43" height="43">

Imagem com o atributo ALT.
<img src="img/imagem123.gif" width="43" height="43" alt="Símbolo de Acessibilidade">

Exemplo de quando a imagem está associada a um link.

Link com imagem sem o atributo ALT.
<a href="http://www.bengalalegal.com"><img src="imagem125.gif" width="100" height="99"></a>

Link com imagem com o atributo ALT.
<a href="http://www.bengalalegal.com"><img src="imagem125.gif" width="100" height="99" alt="Conheça a Bengala Legal"></a>

Exemplo com Atributos ALT, LONGDESC e D.LINK.

O exemplo abaixo irá demonstrar a equivalência textual da imagem do selo da campanha "Acesso de Humor".

D

Código

<img src="selo-humor.jpg" width="100" height="120" alt="Selo da Campanha Acesso de Humor." title="Selo da Campanha Acesso de Humor." longdesc="desc-acessodehumor.php"><br>
<a href="13-desc-acessodehumor.php" title="Descrição textual da imagem do selo">D.</a>

Quando a imagem parece ser um texto.

Letras e textos artisticamente planejados, desenhados na imagem, usados para títulos, cabeçalhos ou logos de empresas não são texto. Texto significa somente o que é chamado de "texto real", digitado no teclado.
Na imagem abaixo temos um exemplo de texto "desenhado", que está na própria imagem e de "texto real", que se apresenta no atributo ALT. A imagem é de um "Quem Somos" e o texto, colocado no ALT, deve ser o mesmo:

Imagem de um texto:  <img src="img/imagem127q.gif" alt="Quem somos" width="106" height="20" />

- Listar e descrever as técnicas de substituição de imagem. Identificar as vantagens e desvantagens de cada técnica.

"Image replacement" pode ser traduzido para "Substituição por imagem". É o termo usado para designar a técnicaCSS de escrever um texto usando uma imagem. Isto amplia as possibilidades de uso de fontes decorativas para escrita, uma vez que o designer não fica restrito às fontes instaladas no dispositivo do usuário, podendo compor seus textos com imagens ao seu inteiro gosto. Na prática a substituição se faz para pequenos textos, em sua grande maioria para o nome ou a designação do site.
Não se vai projetar um texto longo em uma imagem pois isto demandaria um tempo de carregamento da página infinitamente superior ao tempo requerido pelo texto escrito com fonte Arial, Times, Verdana ou seja lá a que for.
A substituição de um texto por uma imagem com uso de CSS deve ser feita de modo a não bloquear a acessibilidade ao texto substituido. Assim é preciso considerar basicamente as seguintes situações em que o texto deverá estar legível:
· CSS desabilitada;
· imagens desabilitadas;
· CSS e imagens desabilitadas;
· navegação com leitor de tela.

Fahrner Image Replacement (FIR)

Todd Fahrner membro do W3C, colaborador da WaSP, desenvolvedor e autor consagrado no universo Web Standards é inventor da técnica de substituir texto por imagem. A técnica inventada por Fahrner recebeu seu nome e é conhecida pelo acrônimo FIR iniciais para Fahrner Image Replacement.

O código FIR:

Radu Darvas <img> Replacement

A técnica de Radu Darvas propõe o uso do elemento IMG na marcação estrutural, para abrigar uma imagem GIF transparente de um pixel com o atributo "alt" definido com o texto da informação passada pela imagem.
O código de Radu Darvas:

Stuart Langridge Image Replacement

A técnica de Stuart não usa o elemento extra SPAN e esconde o texto declarando padding igual a altura da imagem e height igual a zero. Devido ao box model quebrado do IE são acrescidas algumas regras CSS extras para aquele navegador.

Malarkey Image Replacement (MIR)

Na técnica de Malarkey também não aparece elemento extra SPAN e o texto é escondido com uso de letter-spacing muito grande e negativo.
É necessário um 'hack' para o Ópera que interpreta erroneamente a declaração letter-spacing.

Lindsay Image Replacement

Nesta técnica o texto é escondido declarando-se um tamanho de fonte muito pequeno, igual a 1px e fazendo a cor do texto igual a cor do fundo.

Dave Shea Image Replacement

Dave Shea usando a técnica original com um elemento SPAN extra, proposta por Fahrner desenvolveu uma versão usando o atributo title para fornecer um toltip quando o ponteiro do mouse passa sobre a imagem e deixando o elemento SPAN vazio! 

Meu site pessoal

Clique aqui e visite meu site pessoal, deixem comentários.

Intercionalização

1. Apresentar as técnicas básicas para disponibilizar o conteúdo em um formato internacional

A internacionalização é a criação e o desenvolvimento de um produto, aplicação ou conteúdo de um documento que permite a localização fácil para públicos-alvo que variam em cultura, região ou idioma.
No inglês, "internacionalização" (internationalization) é, geralmente, referenciada como i18n, onde 18 é o número de letras entre o I e o N. Aplicando-se a mesma regra ao português, internacionalização pode ser escrita i17o.
A internacionalização geralmente implica em:

• Concepção e desenvolvimento de uma forma que remova as barreiras para a localização ou implantação internacional. Isso inclui muitos assuntos, como: a utilização do Unicode, asseguração do tratamento adequado de caracteres, caso necessário, o cuidado com a concatenação de strings, a independência do código nos valores de strings de interfaces gráficas etc..
• Fornecimento de suporte a recursos que podem não ser utilizados até que a internacionalização ocorra, por exemplo: adicionando uma marcação em sua DTD para suportar textos bidirecionais ou para identificar o idioma, ou adicionando suporte CSS para textos verticais e caracteres não latinos.
• Inclusão de suporte às preferências locais, regionais, culturais ou de idiomas. Normalmente, isso envolve a inserção pré-definida de dados de localização e recursos derivados de bibliotecas disponíveis ou de preferências do usuário. Exemplos incluem: formatos de data e hora, calendários locais, formatos de números e sistemas numéricos, classificação e apresentação de listas, manipulação de nomes pessoais, formas de endereço etc..
• Separação de elementos localizáveis a partir do código-fonte ou do conteúdo, de tal forma que as alternativas localizadas possam ser carregadas ou selecionadas baseando-se nas preferências internacionais do usuário, conforme necessário.

Observe que esses itens não incluem, necessariamente, a localização do conteúdo, aplicação ou produto para outro idioma; são práticas de desenvolvimento que permitem que tal migração ocorra facilmente no futuro, no entanto, que podem ter utilidade significativa mesmo que nenhuma localização ocorra.

Codificação

Use o Unicode sempre que possível para conteúdo, bases de dados, etc. Sempre declare a codificação do conteúdo.
A codificação de caracteres que você escolhe determina a maneira como os bytes são mapeados para caracteres em seu texto.
O Unicode permite que você trabalhe de forma simples com quase todos os scripts e idiomas em uso em todo o mundo. Deste modo, o Unicode simplifica a manipulação de conteúdo em vários idiomas dentro de uma única página ou entre um ou mais sites. O Unicode é especialmente útil quando usado em formulários, scripts e bases de dados, onde você muitas vezes precisa oferecer suporte a vários idiomas. O Unicode também facilita muito a adição de novos idiomas ao seu conteúdo.

Escapes 

Use caracteres em vez de escapes (exemplo &#xE1; &#225; ou &aacute;) sempre que possível.
Escapes como Referências de Caracteres Numéricos (Numeric Character References - NCRs), e entidades são maneiras de representar qualquer caractere Unicode na marcação usando apenas caracteres ASCII. Por exemplo, você pode representar o caractere á em X/HTML como &#xE1; ou &#225; ou &aacute;.
Esses escapes são úteis para representar claramente caracteres ambíguos ou invisíveis, e para evitar problemas com caracteres de sintaxe, como E comercial e sinais de maior e de menor. Eles também podem ser úteis algumas vezes para representar caracteres que não são suportados pela codificação de caracteres em uso ou que não estão disponíveis no teclado. Em outros casos, você sempre deve usar caracteres em vez de escapes.

Apresentação vs. conteúdo

Use folhas de estilo para informações de apresentação. Limite a marcação para a semântica.
Um princípio importante de web design é manter o estilo ou a apresentação do conteúdo separados do texto verdadeiro. Isso facilita a aplicação de um estilo alternativo ao mesmo texto, por exemplo, para exibir o mesmo conteúdo em um browser convencional e em um dispositivo manual pequeno.
Este princípio é especialmente útil para localização, pois scripts diferentes têm necessidades tipográficas distintas. Por exemplo, devido à complexidade dos caracteres japoneses, pode ser preferível mostrar ênfase em páginas X/HTML em japonês de outras maneiras, em vez de usar o negrito e o itálico. Será muito mais simples aplicar essas alterações se a apresentação for descrita usando CSS, e a marcação será muito mais limpa e manejável se o texto for classificado de modo correto e claro como 'enfatizado' em vez de apenas 'negrito'.
Você pode economizar um tempo e um esforço considerável durante a localização se trabalhar com arquivos CSS em vez de ter de alterar a marcação, pois qualquer alteração necessária poderá ser feita em um único local para todas as páginas, e o tradutor poderá se focar no conteúdo e não na apresentação.

Formulários 

Use uma codificação adequada no formulário e no servidor. Ofereça suporte para formatos locais de nomes/endereços, horários/datas, etc.
A codificação usada para uma página HTML que contém um formulário deve suportar todos os caracteres necessários para inserir dados no formulário. Isso é especialmente importante se for possível que os usuários adicionem informações em vários idiomas.
As bases de dados e os scripts que recebem dados de formulários em páginas com vários idiomas também devem ser capazes de suportar os caracteres para todos esses idiomas simultaneamente.
A maneira mais simples de permitir que isso aconteça é utilizar o Unicode para ambas as páginas que contêm os formulários e todos os processos e armazenagem de retaguarda. Nesta situação, o usuário poderá inserir dados em qualquer idioma e script que precisar.

Navegação

Em cada página, inclua uma opção de navegação bem visível para localizar páginas ou sites, usando o idioma de destino.
Quando você tiver versões de uma página ou site em um idioma diferente, ou para um país ou região diferentes, você deve fornecer uma maneira para que o usuário visualize a versão que ele prefere. Essa opção deve ficar disponível em qualquer página de seu site onde houver essa alternativa.

Texto da direita para a esquerda.

Para XHTML, adicione dir="rtl" à tag html. Apenas use novamente para alterar a direção básica.
Textos em idiomas como árabe, hebraico, persa e urdu são lidos da direita para a esquerda. Essa direção de leitura geralmente resulta em textos alinhados à direita e em imagens espelhadas de layout de página e de tabelas, por exemplo. Você pode configurar o alinhamento padrão e a disposição do conteúdo da página da direita para a esquerda simplesmente incluindo dir="rtl" na tag html.
A direção configurada na tag html estabelece uma direção básica para o documento que é atribuída a todos os elementos na página. Não é necessário repetir o atributo em elementos menores a menos que você queira especificamente alterar o fluxo direcional.

Microformatos

1. Definição de Web Semântica

O termo “Web Semântica” refere-se à visão do W3C da Web dos Dados Linkados. A Web Semântica dá às pessoas a capacidade de criarem repositórios de dados na Web, construírem vocabulários e escreverem regras para interoperarem com esses dados. A linguagem de dados é possível com tecnologias como RDF, SPARQL, OWL, SKOS.
A Web Semântica congrega um conjunto de tecnologias que visam proporcionar significado aos dados publicados na web, permitindo que as máquinas possam processá-los de forma mais efetiva, levando-se em consideração a semântica presente, para executar tarefas mais sofisticadas.

2. Definição de Microformatos

Os microformatos são conceituados de acordo com MICROFORMATS.ORG como um conjunto simples de dados formatados abertos: Projetado primeiro para seres humanos e máquinas em segundo lugar, microformatos são um conjunto simples de dados formatados abertos construídos sobre as normas existentes e amplamente adotadas. Em vez de jogar fora o que funciona hoje, microformatos pretendem resolver os problemas mais simples primeiro, adaptando-se os comportamentos atuais e padrões de uso (por exemplo, XHTML, blogs). Com o intuito de ampliar a compreensão acerca do conceito de microformatos, a comunidade afirma que os microformatos são:
- Uma maneira de pensar sobre os dados.
- Princípios de concepção de formatos.
- Adaptado a comportamentos atuais e padrões de uso.
- Altamente correlacionada com XHTML semântico, AKA the real world semantics, AKA lowercasesemantic web, AKA lossless XHTML.
- Um conjunto de padrões simples de dados abertos formatos que estão ativamente em desenvolvimento e implementação para mais/melhores blog´s estruturados e publicação de microconteúdo web em geral.
- "Uma revolução evolutiva"

3. Definição dos microformatos hCard e hCalendar

O microformato hCard é utilizado para fazer a anotação de endereços de pessoas e companhias, tendo como base o padrão vCard de dados pessoais. É identificado pela classe raiz vCard, e é composto pelas seguintes propriedades principais:

O microformato hCard baseia-se no padrão vCard de publicação eletrônica de dados pessoais para implementar anotação semântica sobre estes dados na Internet. Diversas aplicações estão disponíveis para a geração de código hCard a partir de dados fornecidos pelo usuário. Outras também são capazes de identificar microformatos disponíveis em páginas da Web e fazer uso deles, como adicionar contatos em uma agenda.
O microformato hCalendar ocupa-se da anotação semântica de dados relativos a eventos e compromissos. Baseia-se no padrão de troca eletrônica de dados iCalendar e possui, como classe raiz a classe v Calendar evEvent, esta última representando um evento do tipo hCalendar. O microformato é composto pelas seguintes propriedades principais:

4. Aplicar microformats para marcação de contato (hCard), e informações sobre evento (hCalendar).

Vê-se a seguir um exemplo de implementação de um hCard, extraído de Microformats.org : 

Utilizando o site http://microformats.org/code/hcard/creator você pode ter o código para utilizar no seu site, como o exemplo abaixo:

Vê-se a seguir um exemplo de implementação de um hCalendar, extraído de Microformats.org: 

Utilizando o site http://microformats.org/code/hcalendar/creator você pode ter o código para utilizar no seu site, como o exemplo abaixo:

5. Passo a passo: Como utilizar uma ferramenta de tradução microformats para criar um link que permita o usuários baixar ou mover o conteúdo para outro local (por exemplo, traduzir hCard para vCard para download em um programa de catálogo de endereços).

H2VX é uma ferramenta que permite a realização de download de uma lista de contatos e tradução a tradução desta para vCard(.vcf) e para iCalendar(.ics).
A ferramenta H2VX é uma implementação do X2V que é uma implementação open source de microformatos XSLT criada por Brian Suda, X2V traduz os eventos hCard ou hCalendar em seus correspondentes .vcf ou .ics. Para utilizar o H2VX é necessário realizar os seguintes passos:

- Acesse a página http://h2vx.com/
- Selecione o primeiro link: Contact Conversion Service - http://h2vx.com/vcf/ -.
- No campo "Web Adress" insira sua URL
- Se desejar fazer o download do contato diretamente clique no botão download.

Agora se você criar um contato utilizando hCard é quiser que este contato seja baixado para máquina do usuário em um formato .vcf, para que ele possa adicionar ao seu catálogo de endereços, para criar um link para link para o serviço de conversão H2VX, assim:

<a href = "http://h2vx.com/vcf/YOURURLHERE" > Download vCard </ a>

Tutorial CSS

1. Passo a passo como gerar uma versão para impressão e outra para visualização de uma mesma página HTML.

Às vezes necessitamos que nossa página se imprima em uma impressora de maneira diferente de como se visualiza na página web. Por exemplo, se em uma página mostra-se um informe com dados que se deseja guardar impresso em papel, provavelmente desejaremos que na impressora se mostre com uma fonte menor, para que se possa comprimir todo o conteúdo de forma que caiba em uma folha. Também é possível que desejemos que apareça nos informes o logo da companhia centralizado no cabeçalho do informe.
Tudo isto pode ser feito com CSS. As Folhas de Estilo em Cascata servem para definir o aspecto da página, e estes estilos podem ser declarados de maneira distinta na hora de imprimir um documento e na hora de vê-lo no navegador.
Com CSS pode-se definir estilos em um documento externo, desta maneira:

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

Com isto supomos que temos um arquivo chamado estilos.css, que está no mesmo diretório da página, onde se definem os estilos do documento.
De modo parecido, podemos atribuir uma folha de estilos externa para definir o aspecto quando um usuário imprime a página web:

<link href="estilos_impressao.css" rel="stylesheet" type="text/css" media="print"> 

O único que muda é o atributo media="print", que indica que esta folha de estilos é só para quando vai se imprimir a web.
Temos um HTML que inclui duas folhas de estilos e dispõe de várias camadas.




Como pode ser visto no HTML anterior, foram incluídos dois arquivos CSS com estilos. O primeiro é estilo.css, que é o estilo que se utilizará ao visualizar a página no navegador. O segundo link com uma folha de estilos CSS é estilo_imprimir.css, que definirá o aspecto da página ao imprimi-la (observe o atributo media="print" da etiqueta).
Os códigos CSS são muito parecidos, simplesmente fizemos duas mudanças para ilustrar o que vínhamos dizendo. Na visualização da página não se mostrará a camada com id="logo". Por sua parte, ao imprimir a página não se mostrará a barra de navegação da esquerda e os conteúdos centrais se mostrarão em toda a largura do espaço de impressão. Também não se mostrará a camada id="cabecalho".

O código CSS de visualização no navegador 

O código CSS que se utilizará para a impressão da página