Arquivado em outubro de 2009

Imagens e imagens com hiperlink Acessíveis

links Acessivel

Utilize texto alternativo

Nas imagens, utilize o atributo alt=”….” do elemento <img /> para dar uma descrição textual à imagem.


<img src="images/fuscaPreto.jpg" alt="Foto de um fusca preto"  title="Foto de um fusca preto" />

foto de um fusca pretoEnquanto a imagem está sendo carregada ou quando por algum motivo a imagem não é exibida, o texto alternativo alt=”Foto de um fusca preto” é exibido.

O texto alternativo da imagem somente estará acessível a softwares de leitura de tela “Virtual Vision por exemplo” durante a leitura da página, pois uma imagem sem hiperlink não receberá foco através da navegação com a tecla TAB.

Ao mover o mouse por cima da imagem, o Virtual Vision irá ler o conteúdo do atributo alt=”Foto de um fusca preto”, mas lembre-se: o mouse é um dispositivo apontador, quase nunca utilizado.

Descrição textual da imagem “d-link”

criancas brincando na praia

Para imagens mais complexas é aconselhável utilizar uma técnica chamada d-link, que consiste em criar uma pagina HTML para descrever a imagem em questão.

A técnica é colocar um link com a letra “D” ao lado da imagem, para quando a navegação por TAB encontrar o link e usuário poder chegar até a página com a descrição detalhada da imagem.

Para não mudar seu projeto visual, é possível esconder visualmente o link com a letra “D” e o desenvolvedor poderá utilizar várias maneiras para esconder visualmente este link, com CSS é uma boa uma alternativa.

<!-- É uma opação colocar a link direto na imagem -->
<a href="descricaoimagemcriancanap.html"  title="ir a página da descrição textual da imagem, crianças brincando na praia">
     <img src="images/criancasNaP.jpg" alt="Crianças brincando na praia" />
</a>

<!--  A técnica D-link, este link é para ficar ao lado da imagem -->
<a href="descricaoimagemcriancanap.html" title="ir a página da descrição textual da imagem, crianças brincando na praia">
     [d]
</a> 

Como a curiosidade é da natureza do homem e já que o deficiente visual não pode apreciar o conteúdo da imagem visualmente, seria interessante prover as imagens de um texto descritivo.
Um recurso utilizado é colocar, após a imagem, um link com a letra “d”, conhecido como “d-link”, o qual fará referência a uma página html com a descrição textual da imagem. Como outros links, este receberá o foco após o usuário pressionar a tecla TAB na imagem.
Para quem não deseja prejudicar o design da página, com uma letra “d” após as imagens, utilize o recurso de d-link invisível, ou seja, coloque uma pequena imagem transparente no lugar da letra “d”.

Este post foi inspirado na cartilha de acessibilidade e pode ser encontrado no site Lupa Digital, e a citação acima são palavras do autor e pode ser lido em: Lupa digital no item 7.2.

, , , , ,

2 Comentários | Assine | Topo

Link Acessível

links Acessiveis

Para fazer com que os links fiquem acessíveis “href acessível” para leitores de telas e usuários que usam o teclado para navegar na internet. É bem simples e vou descrever algumas técnicas, tentando ser mais claro e objetivo possível.

Adicionando o Atributo “title”

O atributo “title” é muito importante, é ele que vai dar a descrição do link e informar para onde ele vai levar o seu usuário.


<a href="acessibilidade.html" title="Ir a página de acessibilidade">
     Acessibilidade
</a>

Facilite a vida dos seus usuários e escreva com um texto conciso, que faça sentido e que tenha relevância.

Adicione Teclas de Atalho

É uma boa idéia usar teclas de atalho na navegação principal, com isso você vai facilitar a vida de muita gente que tem dificuldade motora e não usa o mouse para acessar o seu conteúdo.


<a href="acessibilidade.html" accesskey="a">Acessibilidade</a>

Pular para o Conteúdo

Permita que o usuário possa ir direto ao conteúdo desejado.

Utilize um link com o atributo accesskey no topo do documento, faça com que ele seja o primeiro link do seu site. Com isso você evitará que o usuário percorra o site todo até chegar ao conteúdo desejado.

Caso você não queira que esse link apareça no topo, você poderá ocultar com CSS.


<div id="topo">
    <h1>titulo do site</h1> <!-- "essa área é muito importante p/ SEO mas é assunto para outro post" -->
    <a href="#conteudo" accesskey="p" title="ir ao conteúdo">Pular para o conteúdo</a>
</div>
<div id="menu">
    <!-- os intens do menu -->
</div>
<div id="conteudo">
    <!-- aqui é onde o usuário chegará, o conteúdo desejado -->
</div>

não que você vá colocar teclas de atalho em todos os links do seu site, mas pense nisso com carinho!

Navegando Através de Tab

Muitos usuários não podem ou não querem usar dispositivos como mouse para navegar em seu site.

Eles utilizam o teclado pra percorrer os links, geralmente usando a tecla “tab”.

Por este motivo seu código deve estar estruturado semanticamente, principalmente a estrutura de links, eles devem estar em uma ordem lógica de navegação, caso esteja, não é necessário usar o atributo “tabindex”.

Mas caso não esteja ou você queira conduzir seus usuários, use o atributo “tabindex” que permite definir a ordem de navegação dos links em seu sistema web.


<ul>
    <li><a href="#" tabindex="3">Link 1</a></li>
    <li><a href="#" tabindex="1">Link 2</a></li>
    <li><a href="#" tabindex="2">Link 3</a></li>
    <li><a href="#" tabindex="4">Link 4</a></li>
</ul>

Conduza seus usuários, dê a eles o que eles realmente precisam e querem ler

, , , , , ,

Nenhum comentário. | Assine | Topo

Menu Drop Down Acessível

Acessibilidadeda

Soluções inclusivas, em minha opinião são vitais para profissionais não só da web.

Entre tanto o que se vê por ai não é exatamente isso, mas se você está lendo este texto é porque você está há vários passos na frente de outros profissionais, e está com o pensamento certo e inclusivo.

Esta solução de menu acessível é muito fácil e funciona bem em vários navegadores como no IE6 + e em todos os browsers que dão suporte a web Standards. Funciona com teclado e mouse, e se o JavaScript estiver desabilitado dá pra acessar todos os links, mas os subitens não aparecem visualmente.

Veja o menu funcionando e vamos aos detalhes:

XHTML

É o documento de marcação onde vamos criar os nós do menu.

Vamos criar uma lista não ordenada “ul” e seus respectivos filhos e adicionar id e classes para podermos manipular alguns elementos.


<!-- As tags como o DOCTYPE, head, body e demais não vou descrever aqui para o post ser mais objetivo -->
<ul id="nav">
	<li><a href="index.html">Home</a></li>
	<li class="submenu"><a href="#" class="bullet">Portfólio</a>
		<ul>
			<li><a href="sites.html">Sites</a></li>
			<li class="submenu"><a href="#" class="bullet">Interfaces</a>
				<ul>
					<li><a href="graficas.html">Gráficas</a></li>
					<li><a href="digitais.html">Digitais</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="quemsomos.html">Quem Somos</a></li>
	<li><a href="contato.html">Contato</a></li>
</ul>

CSS

É o documento de apresentação, onde vamos posicionar e dar beleza ao nosso menu.

Aqui é onde você provavelmente ira mexer mais, para poder customizar seu menu acessível.


#nav, #nav ul {
	width: 70em;
	list-style: none;
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
 }
#nav li {
	float: left;
 }
#nav a {
	display: block;
	width: 10em;
	height: 2em;
	line-height: 2;
	text-align: center;
	text-decoration: none;
	background-color: #69c; /* IE precisa desta declaração */
	color: #fff;
	border: 1px solid #ccc;
	border-width: 0 1px 1px
 }
#nav a:hover {
	text-decoration: none;
	background: #c7daec;
	color:#69c;
 }
#nav a.bullet {
	background:#69c url(bullet.gif) no-repeat right;
 }
#nav a.bullet:hover {
	background: #c7daec url(bullet-over.gif) no-repeat right;
 }
#nav li ul {
	position: absolute;
	left: -1000em;
	width: 10em;
	margin: 0;
 }
#nav ul ul {
	margin: -2.1em 0 0 10.1em;
 }
#nav li:hover ul ul, #nav li.over ul ul {
	left: -1000em;
 }
#nav li:hover ul, #nav li li:hover ul, #nav li.over ul, #nav li li.over ul {
	left: auto;
}

JavaScript

O arquivo JavaScript é responsável pela ação.

É neste documento que vamos verificar os links e os subitens da lista e vamos fazer com que ele se encarregue em abrir os subitens.


<script type="text/javascript">

var dropdown_intervalId;
var dropdown_ulId = (!dropdown_ulId) ? 'nav' : dropdown_ulId;
var dropdown_delay = (!dropdown_delay) ? 0 : dropdown_delay;

function dropdown_init()
{
 try
 {
  var as = document.getElementById(dropdown_ulId).getElementsByTagName('a');

  for (var a = 0; a < as.length; a++)
  {
   as[a].onfocus = function() { dropdown_expand(this) }
   as[a].onmouseover = function() { dropdown_expand(this) }
   as[a].onblur = function() { dropdown_colapse(dropdown_delay) }
   as[a].onmouseout = function() { dropdown_colapse(dropdown_delay) }
  }

  dropdown_colapse(0);

 } catch(e){}

}

function dropdown_expand(caller)
{
 try
 {
  clearInterval(dropdown_intervalId);

  var uls = caller.parentNode.parentNode.getElementsByTagName('ul');

  for (var ul = 0; ul < uls.length; ul++)
   uls[ul].style.left = "-1000em";

  caller.parentNode.getElementsByTagName('ul')[0].style.left = "auto";

 } catch(e){}

}

function dropdown_colapse(milliseconds)
{
 try
 {
  clearInterval(dropdown_intervalId);

  dropdown_intervalId = setInterval(function()
  {
   var uls = document.getElementById(dropdown_ulId).getElementsByTagName('ul');

   for (var ul = 0; ul < uls.length; ul++)
    uls[ul].style.left = "-1000em";

   clearInterval(dropdown_intervalId);

  }, milliseconds, null);

 } catch(e){}

}

window.onload = dropdown_init;
</script>

Esse menu foi tema de debate na lista Acesso Digital, e esse post foi baseado na resposta do Gil Porta membro da lista, e o menu foi desenvolvido por Alexandre Junqueira.

, , , , ,

3 Comentários | Assine | Topo

Criador da www pede desculpas

Tim Berners Lee

Tim Berners-Lee disse que não imaginava o incômodo que teclar ‘//’ geraria.

O homem que inventou a World Wide Web (a WWW, que é a base da internet) pediu desculpas por ter colocado duas barras na frente dos endereços eletrônicos.

O cientista britânico Tim Berners-Lee, que criou a WWW há quase 30 anos, disse que o uso dos caracteres “//” após o “http:” é desnecessário.

Segundo o jornal britânico “The Times”, Berners-Lee disse em uma palestra em Washington que poderia ter criado os endereços sem as duas barras.

“Parecia uma boa ideia (usar o WWW) na época”, disse.

O cientista disse que, quando criou a world wide web, ele não imaginava que as barras causariam tanta irritação entre os usuários.

No entanto, ele brincou que ninguém calculou ainda a quantidade de terapeutas que conseguiram emprego para tratar pessoas com lesões de esforço repetitivo, de tanto usar a tecla w nos teclados de computador.

Na entrevista ao “The Times”, ele admite inclusive que o uso das barras é nocivo ao meio ambiente, já que desperdiça energia, papel e tinta.

Tim é diretor do World Wide Web Consortium, que trabalha com o governo britânico para aumentar o acesso das informações governamentais ao público.
fonte: G1

Nenhum comentário. | Assine | Topo

A diferença entre Arte e Design

good Art Is a Talent Esse assunto é complicado e tem sido debatido há muito tempo.

Artistas e designers criam composições visuais usando a mesma base de conhecimento, mas as suas razões para fazê-lo são completamente diferentes.

Alguns designers se consideram artistas, mas poucos artistas se consideram designers.

E isso é exatamente a diferença entre arte e design?

Neste post, vamos analisar e comparar alguns dos princípios fundamentais de cada.

Este é um assunto que as pessoas têm opiniões fortes, e Este post não é um guia definitivo, mas sim o ponto de partida para uma conversa, por isso vamos ter a mente aberta!

Arte é inspiração, Design é motivo

good Art Inspires

Talvez a diferença mais fundamental entre arte e design, que todos podemos concordar é sobre seus propósitos. Normalmente, o processo de criação de uma obra de arte começa do nada, uma tela em branco.  Uma obra de arte resulta de uma visão ou opinião ou sentimentos que o artista tem dentro de si.

Eles criam a arte de compartilhar esses sentimentos com os outros, para permitir que os telespectadores se relacionar com ela, aprender com ele ou ser inspirado por ela.

A mais famosa (e bem sucedida) das obras de arte hoje são aquelas que estabelecem o forte vínculo emocional entre o artista eo seu público.

Em contrapartida, quando um designer pretende criar uma nova peça, elas quase sempre têm um ponto fixo de partida, se uma mensagem, uma imagem, uma idéia ou uma ação.

O trabalho do designer não é inventar algo novo, mas de comunicar algo que já existe, para uma finalidade.

Esse objectivo é quase sempre para motivar o público a fazer alguma coisa: comprar um produto, usar um serviço, visitar o local, saber algumas informações.

Os projetos mais bem sucedidos são aqueles que transmite eficazmente sua mensagem e motiva os consumidores a realizar uma tarefa.

Arte é interpretada, Design é compreendido

good Art Ins interpreted

Outra diferença entre arte e design é a forma como as mensagens de cada um são interpretados por seus respectivos públicos.

Apesar de um artista que se propor a transmitir um ponto de vista ou a emoção,  que não quer dizer que o ponto de vista ou a emoção tenha um significado único.

Arte conecta com pessoas de maneiras diferentes, porque é interpretada de forma diferente.

Mona Lisa de Da Vinci tem sido interpretado e discutido por muitos anos. Apenas porque ela está sorrindo? Os cientistas dizem que é uma ilusão criada por sua visão periférica. Românticos dizem que ela está apaixonada. Céticos dizem que não há motivo.

Design é o oposto. Muitos dirão que, se um projeto pode ser “interpretado” em tudo, ele falhou em seu propósito.

O objetivo fundamental do projeto é o de comunicar uma mensagem e motivar o espectador a fazer alguma coisa.

Se o design transmite uma mensagem diferente do pretendido e seu espectador vai e faz alguma coisa com base na mensagem “mensagem incorreta”, então ela não cumpriu a sua obrigação.

Uma boa peça de design é quando a mensagem do designer é exatamente entendida pelo espectador.

Arte é gosto, Design é opinião

Arte é gosto Design é opinião

A arte é julgada pela opinião e a opinião é regido por gosto.

Para um entusiasta da arte moderna visão de futuro, um pedaço Tracey Emin “My Bed”, que foi indicado para o Prêmio Turner em 1999, pode ser a altura de expressão artística.

Para um seguidor da arte mais tradicional, pode ser um insulto para o meio.

Design tem um elemento de gosto, mas a diferença entre bom e mau design é essencialmente uma questão de opinião.

Uma boa peça de design pode ser bem sucedida sem ser a seu gosto.

Se ela cumpre seu objetivo de ser compreendida e motiva as pessoas a fazer algo, então se é bom ou não é uma questão de opinião. Poderíamos continuar a discutir este ponto específico, mas espero que o princípio subjacente é clara.

Arte é talento, Design é habilidade

Arte é talento Design é habilida

E sobre as habilidades do Criador?

Mais frequentemente do que não, um artista tem a habilidades natural. Claro, desde tenra idade, o artista cresce desenhando, pintando, desenvolvendo suas habilidades.

Mas o verdadeiro valor de um artista é no talento (ou a habilidade natural) que nascemos. Há alguma sobreposição aqui: bons artistas certamente têm habilidade, mas sem habilidade artística talento é, provavelmente, inútil.

Design, porém, é realmente uma habilidade que é ensinado e aprendido. Você não tem que ser um grande artista para ser um grande designer, você só tem que ser capaz de alcançar os objetivos do projeto.  Alguns dos estilistas mais respeitados no mundo são mais conhecidos por seu estilo minimalista. Eles não usam muita cor ou textura, mas eles prestam muita atenção ao tamanho, posicionamento e espaçamento, que pode ser aprendido sem talento.

Arte Envia uma mensagem diferente para Todos, Design envia a mesma mensagem para todos

Arte Envia uma mensagem diferente para Todos, Design envia a mesma mensagem para todos

Isso realmente cai sob o segundo ponto,  sobre a interpretação e compreensão. Mas se você for recordar de apenas uma coisa deste artigo, lembrese deste ponto.

Muitos designers consideram-se artistas, porque criar algo visualmente atraente, algo que seria orgulho para as pessoas se pendurar em uma parede e admirar.

Mas uma composição visual destina-se a realizar uma tarefa específica ou comunicar uma mensagem especial, não importa o quão bonito, não é arte.

É uma forma de comunicação, apenas uma janela para a mensagem que ele contém.

Poucos artistas se autodenominam designers, porque eles parecem entender melhor a diferença. Artistas não criam os seus trabalhos para vender um produto ou promover um serviço. Criam unicamente como um meio de auto-expressão, de modo que possa ser visto e apreciado por outros. A mensagem, se é que podemos chamar assim, não é um fato, mas um sentimento.

Dependendo de como você olha para ele, a diferença entre a arte eo design pode ser clara ou turva.

O post original deste artigo está em web designer de pot vale conhecer o blog dos caras é leitura de boa qualidade.

4 Comentários | Assine | Topo

Filme Prince of Persia

Prince of Persia Movie
The Sands of Time é uma adaptação do game para o cinema, bancado pela Disney, será filmada no Reino Unido, e em Marrocos, não só pelos cenários em sintonia com o filme, mas também pela emergente indústria de cinema e baixos impostos que está sendo montada em Marrocos.

O fime tem data prevista de estréia dia 28 de maio de 2010.  O fileme será produzido por Jerry Bruckheimer e estrelado por Jake Gyllenhaal, Gemma Arterton, Ben Kingsley e Alfred Molina.

Uma das coisas que não entendi bem é que o titulo do filme refere-se ao “primeiro” da serie o The Sands of Time que foi lançado em 2000, mas o pricipe Dastan, tem a fisionomia e as roupas do segundo game o Warrior Within.

Na imagem a baixo, o primeiro Dastan é o do filme e é o cartaz oficial, o segundo é no The Sands of Time e logo a baixo o terceiro é Warrior Within, qual é o mais parecido?!

Prince of Persia o filme

Só por curiosidade, um print de uma das primeiras versões do game.

Prince of Persia 1° versão

Bem vamos esperar e ver se o filme não embanana as histórias e torcer para ele representar a altura esse clássico dos games.

, , , , ,

Nenhum comentário. | Assine | Topo

Semiótica

SemioticaSemiótica é o estudo dos signos, ou seja, as representações das coisas do mundo que estão em nossa mente.

A semiótica ajuda a entender como as pessoas interpretam mensagens, interagem como objetos, pensam e se emocionam.

Fonte: Usabilidoido e Tecnicas psicoterapeuticas

Nenhum comentário. | Assine | Topo