Ramon Victor http://www.ramonvictor.com Fri, 09 Sep 2011 14:59:00 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Slide: Mini Curso de Design de Interfaces para Dispositivos Móveis http://www.ramonvictor.com/slide-mini-curso-de-design-de-interfaces-para-dispositivos-moveis/ http://www.ramonvictor.com/slide-mini-curso-de-design-de-interfaces-para-dispositivos-moveis/#comments Thu, 19 May 2011 16:00:56 +0000 ramonvictor http://www.ramonvictor.com/?p=724 Continue reading →]]> O Brasil apresenta um crescimento incontrolável no que se diz respeito ao mercado de dispositivos móveis. Desde iPad, iPod, mpX da vida até os “bom e velhos” celulares (“A quantidade equivale a 104,68 linhas para cada 100 habitantes“, informações divulgadas pela Anatel).

Ou seja, nós que projetamos interfaces precisamos entender cada vez mais desse mercado que está em constante expansão.

Nesse post gostaria de compartilhar uma ótima apresentação, produzida por @paolopasseri, que nos dá uma visão geral de como funciona a experiência do uso desses dispositivos e, principalmente, quais são os quesitos que devemos levar em conta na hora de desenhar para esse tipo de artefato.

]]> http://www.ramonvictor.com/slide-mini-curso-de-design-de-interfaces-para-dispositivos-moveis/feed/ 1 Projeto Carolina Pires http://www.ramonvictor.com/projeto-carolina-pires/ http://www.ramonvictor.com/projeto-carolina-pires/#comments Thu, 26 Aug 2010 15:36:40 +0000 ramonvictor http://www.ramonvictor.com/?p=706 Continue reading →]]> Atualmente venho fazendo vários freelas com a maravilhosa combinação de front-end + wordpress. O blog da Carolina Pires foi mais uma oportunidade de melhorar minhas habilidades nessa área.

Esse projeto também serviu para usar um pouco das novidades do html5. Muito bom ver a semântica do html sendo melhorada na prática.

Todo design foi projetado pela Mooz, nesse caso fiquei com a responsabilidade fazer o html e torná-lo tema do wordpress.

]]> http://www.ramonvictor.com/projeto-carolina-pires/feed/ 0 Herança, especificidade e efeito cascata na CSS: Como funciona? http://www.ramonvictor.com/heranca-especificidade-e-efeito-cascata-na-css-como-funciona/ http://www.ramonvictor.com/heranca-especificidade-e-efeito-cascata-na-css-como-funciona/#comments Mon, 26 Apr 2010 13:24:03 +0000 ramonvictor http://www.ramonvictor.com/?p=463 Continue reading →]]> Esse assunto novamente? É pessoal, mesmo isto não sendo uma novidade, ainda é um dos problemas que continua atrapalhando a vida de muitos desenvolvedores. Não apenas os iniciantes, mas os experientes também. Por isso decidi ser um pouquinho ‘chato’ e explicar, mais uma vez, como os browser’s entendem as declarações CSS que nós escrevemos.

O que veremos?

“Árvore genealógica” do documento HTML

Inicialmente, veremos como funciona o modelo de árvore genealógica de todo documento HTML. Esta, conhecida também por árvore de nós (tree of node) . Observemos o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title>Document Title</title>
</head>
<body>
	<header>
		<h1>...</h1>
		<form action="">
			...
		</form>
	</header>
	<article>
		<section>
		</section>
	</article>
</body>
</html>

Como poderíamos ilustrá-lo numa árvore de nós (tree of node)? É simples:

Onde:

  • <body> é pai dos elementos <header> e  <article>;
  • <header> é pai do <h1> e  <form>;
  • <article> é pai do <section>;
  • Por último, o <body> é avô do <h1>, <form> e <section>;

Entender essa idéia, nas tags do documento HTML, é um pré-requisito importante para extraímos o máximo de performance na hora de escrevermos  nossas folhas de estilo. Se você pretende estudar javascript, esse conhecimento servirá também como base essencial para trabalhar com DOM (Document Object Model).

Cálculo de especifidade

O cálculo de especificidade, nada mais é, do que o “peso” que a CSS dá a cada tipo de declaração. Entenderemos melhor visualizando o exemplo:

p { color: #000 }
p.azul { color: blue }

Se declararmos um <p class=”azul”>, em nosso HTML, veremos que a cor considerada, neste caso, será o azul. Até que foi fácil  identificar, não é? Pois, sabemos que a classe declarada, na folha de estilo, tem especificidade maior em relação ao elemento sem nenhum atributo adicional.

Porém, existem casos que a coisa fica um pouco mais complicada, vejamos este exemplo:

div p.entry { font-size: 15px }
#conten p { font-size: 12px }

E agora? Quem é mais específico? Para identificar com segurança, essas ocasiões duvidosas, precisamos entender como é dado o “peso” para cada uma das regras de estilo declarada.

Elemento (p), Pseudo elemento (p:first-letter) d = 1 (0,0,0,1)
Classe (.minhaClasse), Pseudo classe (a:hover),
Attributo (a[rel=externo])		 c = 1 (0,0,1,0)
Id (#meuId) b = 1 (0,1,0,0)
Style inline (< p style=”color: #ccc”></p>) a = 1 (1,0,0,0)

Mesmo que pareçam chatas, são regras que devem ser entendidas para que tenhamos facilidade de identificar quais são as declarações mais específicas.

E, finalmente, como ficou o exemplo anterior?

div p.entry { font-size: 15px } /* (0,0,1,2) */
#conten p { font-size: 12px } /* (0,1,0,1) */

No exemplo acima, a segunda declaração é mais específica por ter um id declarado (b = 1). Porém, se a nossa marcação fosse da seguinte forma:

<div id="content">
<p class="entry" style="font-size: 18px">Lorem ipsum dolor sit amet</p>
</div>

A especificidade do style inline(1,0,0,0) seria  maior do que as mostradas nos exemplos anteriores, logo o texto seria exibido com font-size igual a 18px.

!important

Como toda regra, normalmente, tem suas exceções, essa não deixou de ter a sua. A declaração !important foi um hack criado para tornar a especificidade do elemento maior do que qualquer outra declaração dentro do documento CSS.

p.first { margin-left: 0 !important }

Então podemos usá-lo toda vez que as declarações, por algum motivo, não estiverem funcionando? Não! O !important é indicado apenas naquelas situações onde o código já chegou às suas mãos super mal estruturado e você precisa de uma solução imediata. Caso contrário, devemos usar o próprio conceito de especificidade e herança da CSS, evitando assim “sujeiras” no código.

Herança

O conceito de herança não tem complicação para ser entendido. Simplesmente, os elementos filhos herdam declarações do elemento pai. Só isso? Isso mesmo! Porém, devemos ficar atento, pois não são herdadas declarações relativas a posicionamento e tamanho (ex.: width, height, margin, padding, float, border e etc).

Para que o elemento filho herde valores como os citados acima é necessário declarar o valor da propriedade desejada como inherit. Por exemplo:

HTML

<div>
    <p>Lorem ipsum dolor sit amet</p>
</div>

CSS

div {
    padding: 10px;
    border: 1px solid #ccc
}
p {
    padding: inherit;
}

Certo, mas como faço para que uma declaração seja herdada sem ter que declarar explicitamente o valor  inherit?

Como tínhamos visto anteriormente, basta aplicar regras que não sejam referentes a posicionamento e tamanho, ou seja, se declararmos algo como o exemplo abaixo, todos os descendentes, neste caso da tag <body>, herdarão automaticamente as mesmas regras de estilo.

body {
    font-family: Arial, Sans-serif;
    font-size: 12px;
    color: #ccc
}

Efeito Cascata

Sabemos que podem existir duas, três ou até mais declarações direcionadas ao mesmo elemento. É aí onde atua o efeito cascata, que envolve tudo o que já vimos neste post e mais um conjunto de outros fatores que influenciam na hora de se definir qual regra de estilo será a exibida pelo browser.

Para entendermos quais seriam todos esses fatores e suas respectivas prioridades, em ordem crescente, observemos essa lista disponibilizada pelo site do maujor:

  1. folha de estilo padrão do navegador do usuário;
  2. folha de estilo do usuário;
  3. folha de estilo do desenvolvedor;
    • estilo externo (importado ou linkado).
    • estilo incorporado (definido na seção head do documento);
    • estilo inline (dentro de um elemento HTML);
  4. declarações do desenvolvedor com !important;
  5. declarações do usuário com !important;

Pode parecer um pouco complicado, porém essa parte teórica é essencial para que tenhamos menos dificuldade na hora de resolver bugs que surgem durante o desenvolvimento dos projetos.

Aproveitando o assunto de efeito cascata, abrirei um parêntese para falar, resumidamente, sobre a ferramenta FireBug. Atualmente utilizada por muitos profissionais da área, este plugin do Firefox surgiu para, dentre outras centenas de funcionalidades,  facilitar a identificar qual regra de estilo está sendo aplicada a cada elemento. Não entrarei em maiores detalhes, mas fica a dica para aqueles que ainda não o conheciam.

Conclusão

O que ganho se começar a aplicar todos esses conceitos?

  • Escrever menos linhas de código;
  • Facilitar futuras manutenções;
  • Evitar hacks, que dificultam a correção de bugs;
  • Gerar melhoria de performance com soluções bem elaboradas (ex.: css sprites);

Referências

Dicas, sugestões, acréscimos, críticas (construtivas)? Comente!

]]> http://www.ramonvictor.com/heranca-especificidade-e-efeito-cascata-na-css-como-funciona/feed/ 16 Projeto Urbana-PE http://www.ramonvictor.com/projeto-urbana-pe/ http://www.ramonvictor.com/projeto-urbana-pe/#comments Mon, 12 Apr 2010 16:19:10 +0000 ramonvictor http://www.ramonvictor.com/?p=536 Continue reading →]]> O site da Urbana-PE (antiga SETRANS-PE) foi uma ótima experiência para aplicar os conhecimentos que vinha adquirindo na área de customização com o cms wordpress.  O projeto foi desenvolvido pela Wenetus e fiquei com a responsabilidade de produzir a integração do wordpress e implementar também o XHTML, CSS e Javascript. O website precisou atender a pré-requisitos como: Soluções acessíveis com jQuery; Funcionar bem em todos os browsers atuais; Otimização de código e performance;

]]> http://www.ramonvictor.com/projeto-urbana-pe/feed/ 0 Photoshop para desenvolvedores web http://www.ramonvictor.com/photoshop-para-desenvolvedores-web/ http://www.ramonvictor.com/photoshop-para-desenvolvedores-web/#comments Wed, 07 Apr 2010 15:51:25 +0000 ramonvictor http://www.ramonvictor.com/?p=482 Continue reading →]]> Como 90% (ou  mais) dos layouts que chegam em nossas mãos são produzidos no Photoshop é importante que tenhamos conhecimento de algumas facilidades que este software nos oferece. Funcionalidades como: medir espessura de elementos, fatiar imagens, consultar tamanho de texto são algumas das atividades rotineiras que podem ser otimizadas.

Ajustar medida de régua e tipografia

Para que possamos visualizar as medidas da tipografia e régua em pixel, precisamos acessar o painel “preferences” (Edit > Preferences > Units & Rulers) e configurá-lo da seguinte forma:

Ajustar unidade de medida: Ferramenta seleção

No painel “info” (exibido via Window > info), é interessante que sejam configuradas as medidas para pixels também. Assim quando selecionarmos qualquer elemento veremos suas medidas exatas nesse painel.
Acesse: Info > Panel Options > Ruler Units

Exportação de imagens

Para exportação de imagens existem basicamente duas soluções. A primeira seria criar um novo arquivo colando nele apenas a layer que deseja exportar a outra seria utilizando a ferramenta slice tool. Adotei a segunda solução pois acredito ser bem mais eficiente. Vejamos como utilizar cada uma delas:

Slice tool

Atalho: ‘C’ na versão CS4  e ‘K’ na CS3.

Com essa ferramenta podemos criar diversas fatias com diferentes dimensões. Além disso é possível predefinir o nome que as imagens terão quando exportadas. Para acessar as propriedades da fatia precisamos acionar dois cliques em cima da mesma. Vejamos o painel abaixo.

Agora estamos com as informações da fatia configurada. Normalmente precisamos esconder as demais layers que não serão exportadas, para fazer isso existe uma maneira muito simples: basta pressionar “Alt + icone olho” (ver imagem abaixo) que o próprio PS se encarrega de esconder as demais layers. Para retornar a exibição basta acionar o mesmo atalho.

Criando um novo arquivo

Uma outra solução adotada por muitos, para exportar imagens, é colar a layer em um novo arquivo. É comum fazer isso de duas formas:

A primeira seria utilizando a ferramenta de seleção(M) e acionando o seguinte atalho “Ctrl + Shift + C”. Depois da cópia feita só é acessar “File > New” e deixar a opção de Clipboard marcada, feito isso só colar (Ctrl + V).

A outra forma seria utilizando a função de duplicar layer (Acessando “Layer > Duplicate layer …”). Com essa função podemos criar um novo arquivo com a layer desejada.

E você conhece mais algum “macete”?

]]> http://www.ramonvictor.com/photoshop-para-desenvolvedores-web/feed/ 0 Meu código é realmente acessível? http://www.ramonvictor.com/meu-codigo-e-realmente-acessivel/ http://www.ramonvictor.com/meu-codigo-e-realmente-acessivel/#comments Mon, 01 Mar 2010 17:16:57 +0000 ramonvictor http://www.ramonvictor.com/?p=442 Continue reading →]]> Assistir ao vídeo “Acessibilidade Web: Custo ou Benefício?”, publicado pelo acessodigital, nos faz questionar se realmente estamos construindo códigos acessivéis, visto que detalhes importantes, muitas vezes, passam despercebidos e acabam comprometendo o acesso de usuários deficientes.

Como dito no vídeo, por Lêda Lucia,  “Audição não é sintética como a Visão”, ou seja,  para aqueles que apenas escutam, as coisas não são muito simples quanto para aqueles que veem.

Outro item importante, ressaltado no vídeo, é a importância do link “Ir para o conteúdo” no início de todas as páginas. O mesmo, dá autonomia ao usuário de escolher se realmente é necessário escutar toda navegação antes de iniciar a leitura do conteúdo.

Além de se preocupar com a forma que o conteúdo será lido, deve-se ter uma preocupação maior com as funcionalidades que podem comprometer o acesso daqueles  que navegam apenas pelo teclado. Não visualizar itens de submenus, é um exemplo pratico de uma das dificuldades comuns existente em grandes portais na web, como citado no documentário.

Não quero me estender muito, pois o importante mesmo é que o vídeo seja assistido. Vejam-o e façam-se este questionamento: “Meu código é realmente acessível?”.

]]> http://www.ramonvictor.com/meu-codigo-e-realmente-acessivel/feed/ 4 Zen Coding: simplificando a vida do desenvolvedor XHTML http://www.ramonvictor.com/zen-coding-simplificando-a-vida-do-desenvolvedor-xhtml/ http://www.ramonvictor.com/zen-coding-simplificando-a-vida-do-desenvolvedor-xhtml/#comments Wed, 25 Nov 2009 01:36:27 +0000 ramonvictor http://www.ramonvictor.com/?p=420 Continue reading →]]> Hoje se espalhou pelo twitter a notícia do novo plugin que visa otimizar o tempo na codificação XHTML e CSS. O plugin Zen Coding, desenvolvido por Sergey Chikuyonok do Smashing Magazine.

A idéia base do plugin é trabalhar com a sintaxe do css para criar os elementos do XHTML. Após a digitação da combinação de elementos é necessário apenas prescionar (ctrl + ,) que a expressão transforma-se em tags. Na prática você escreveria:

div#nav>ul>li*2>a

Que resultaria em:

<div id="nav">
   <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
   </ul>
</div>

Testando o plugin  deu para perceber que quem tem um bom conhecimento de DOM sentirá uma facilidade maior em trabalhar com o plugin, devido a lógica de ‘arvore’ que ele utiliza para criar os elementos.

É tudo muito simples, veja a demostração do poder do Zen Coding:

Além do vídeo o Smashing disponibilizou um demo onde ao prescionar  “Ctrl + ,“ você tem uma previsão de como o plugin funciona.

Lista de possíveis propriedades e seus resultados.

  • (div, p) -> Nome do elemento;
  • (div#sidebar, a#logo) -> Elemento mais id;
  • (h1.vcard, p.entry.left) -> Emento mais classe ou combinações de classes;
  • (div#header>h1>a) -> Indicando o elemento filho;
  • (div#header+div#content+div#footer) -> Elementos irmãos;
  • (ul#nav>li*5>a) -> Multiplicando elementos;
  • (ul#nav>li.item-$*5) -> Numerando os itens;

Editores suportados

O Zen Coding foi produzido em JavaScript e Python para rodar na maior quantidade possível de plataformas. Porém alguns editores, como o TextMate, tem suporte apenas a função de expandir os termos abreviados (que pra mim já é muita coisa).

Os editores que tem suporte a todas funcionalidades do plugin são: Aptana(para Windowns), TEA for Coda e TEA for Espresso (para Mac).

O objetivo deste post é demonstrar um resumo do que é possível com esse maravilhoso plugin. Você pode se aprofundar no assunto visitando o post original. Lá você verá que existem outras funcionalidades inclusive a de acrescentar seus próprios trechos de códigos no arquivo fonte do plugin.

Espero que seja proveitoso para todos os leitores assim como esta sendo para mim. No próximo post explicarei como instalar o Zen no Aptana.

]]> http://www.ramonvictor.com/zen-coding-simplificando-a-vida-do-desenvolvedor-xhtml/feed/ 5 Dicas de como customizar formulários com jquey http://www.ramonvictor.com/dicas-de-como-customizar-formularios-com-jquey/ http://www.ramonvictor.com/dicas-de-como-customizar-formularios-com-jquey/#comments Tue, 17 Nov 2009 13:39:25 +0000 ramonvictor http://www.ramonvictor.com/?p=388 Continue reading →]]> Esta se tornando cada vez mais comum a pratica de Designers projetar formulários com visual diferente do padrão exibido pelos browsers.  Para implementar tal inovação, os desenvolvedores vem buscado soluções de scripts que não comprometam a acessibilidade e a performance do website.

Neste post irei demostrar uma solução que criei para personalizar inputs do tipo checkbox e radio, também listarei algumas referências de plugins muito úteis para customizar outros elementos do seu form.

Personalização de inputs checkbox e radio (demo)

Para personalizar inputs do tipo checkbox e radio é muito simples, primeiro vamos utilizar a marcação abaixo:

<ol class="list_radio">
   <li><input type="radio" id="rad1" name="exemplos" class="rad" /> <label for="rad1">Label 1</label></li>
   <li><input type="radio" id="rad2"  name="exemplos" class="rad"  /> <label for="rad2">Label 2</label></li>
   <li><input type="radio" id="rad3" name="exemplos" class="rad"  /> <label for="rad3">Label 2</label></li>
</ol>
<ol class="list_check">
   <li><input type="checkbox" id="chck1" class="chck" /> <label  for="chck1">Label 1</label></li>
   <li><input type="checkbox" id="chck2" class="chck" /> <label  for="chck2">Label 2</label></li>
   <li><input type="checkbox" id="chck3" class="chck" /> <label  for="chck3">Label 3</label></li>
</ol>

No CSS vamos aproveitar a herança das classes (list_check e list_radio) para colocar os respectivos backgrounds nos labels.

/* Estilo para type='radio'*/
.list_radio li { float: left; margin-right: 15px}
.list_radio li label { background: url(radio_bg.gif) no-repeat; padding:2px 0 2px 25px; cursor: pointer}
.list_radio li label.ativo { background-position: 0 -25px}
/* Estilo para type='checkbox'*/
.list_check li { padding-bottom: 10px}
.list_check li label {  background: url(check_bg.gif) no-repeat; padding:2px 0 2px 25px; cursor: pointer}
.list_check li label.ativo { background-position: 0 -26px}

Pelo jQuery iremos controlar a adição e remoção da classe ativo no label.

$(document).ready(function() {
  //escondendo os inputs padrões
  $(".rad, .chck").hide();
  //verificando se exite inputs marcados
  $("form input").each(function(i){
    if($(this).is(':checked')) {
         $(this).siblings('label').addClass("ativo");
    }
  });
  // Radios estilizados
  $(".list_radio label").click(function() {
    $(this).parent().siblings().children("label").removeClass("ativo");
    $(this).addClass("ativo");
    $(this).siblings('input[type=radio]').attr("checked", "checked");
  });
  // Checkboxs estilizados
  $(".list_check label").toggle(
    function() {
       $(this).siblings('input[type=checkbox]').attr("checked", "checked");
       $(this).addClass("ativo");
    },
    function() {
       $(this).siblings('input[type=checkbox]').attr("checked", "");
       $(this).removeClass("ativo");
  });
});

Outras customizações

É importante resaltar que fugir demais do padrão dos formulários do browser pode comprometer a usabilidade e performance do site. Desta forma o Designer tem que avaliar bem a experiência e limitações dos usuários antes de implementar essas inovações.

]]> http://www.ramonvictor.com/dicas-de-como-customizar-formularios-com-jquey/feed/ 3 Projeto Agência Sebrae de Notícias http://www.ramonvictor.com/projeto-agencia-sebrae-de-noticias/ http://www.ramonvictor.com/projeto-agencia-sebrae-de-noticias/#comments Fri, 06 Nov 2009 13:05:37 +0000 ramonvictor http://www.ramonvictor.com/?p=373 Continue reading →]]> A pouco foi lançado o projeto de redesign do portal Agência Sebrae de Notícias. Esse projeto proporcionou diversos aprendizados na implementação de codificação XHTML e CSS cross-browser, bem como na aplicação de varias funcionalidades da jQuery.

Junto ao portal também participei diretamente no desenvolvimento do InterEditor, produto criado pela SX Brasil, que será responsável por gerenciar o conteúdo da ASN e de outros grandes clientes da empresa.

Créditos ao @walmarandrade, @alemaorpm, @leomacedo, @talespereira e @ferrreira que participaram do esforço para que o portal ASN chegasse ao melhor resultado possível.

Projeto Sebrae

]]> http://www.ramonvictor.com/projeto-agencia-sebrae-de-noticias/feed/ 2 Designers também devem entender de acessibilidade na web http://www.ramonvictor.com/designers-tambem-devem-entender-de-acessibilidade-na-web/ http://www.ramonvictor.com/designers-tambem-devem-entender-de-acessibilidade-na-web/#comments Tue, 27 Oct 2009 14:32:38 +0000 ramonvictor http://www.ramonvictor.com/?p=363 Continue reading →]]> A participação do Designer no processo de criação de um site tem o foco principal no desenvolvimento do layout, porém o que muitos não sabem é que ele é responsável (ou pelo menos deveria ser) por determinar interações de interface e até mesmo definir o tipo de linguagem que o site deverá ser implementado (Se deve ser usado Ajax, Flash, CSS e etc).

Para Designers estudar usabilidade é essencial, mas entender de acessibilidade acaba sendo um diferencial. Pois além de projetar algo fácil de usar o profissional estará disponibilizando seu projeto a diferentes plataformas e facilitando possíveis dificuldades do usuário.

Então quais tipos de funcionalidades, em questão de acessibilidade, o Designer poderia projetar?

Controlar o tamanho da fonte

Geralmente os Designers definem um tamanho padrão para a tipografia do site, mas aqueles que tem dificuldade na visão precisam de uma opção de aumentar esse tamanho. Pelo correto seria de total responsabilidade de quem faz o layout inserir ou não a opção de controle de tamanho, de acordo com a necessidade do projeto.

Uso de Ajax

Somente projetar a tela não vai dizer ao front-end se ele deve implementar determinado site com ajax ou não, para isso é necessário o Designer avaliar se é viável trabalhar com Ajax, sabendo que esta tecnologia tem suas vantagens e desvantagens.

Algumas limitações com questão de indexação, bem como as dificuldades em criar diferentes urls para cada página específica devem ser avaliadas na hora e optar ou não pelo uso da linguagem.

Usar flash ou não?

O uso de determinadas formas e a maneira como os elementos carregam no site são definidos pelo Designer e é a partir desta idéia que será definido se vai usar flash ou não. Desta forma o profissional precisa saber quais serão as dificuldades em relação a deficientes, indexação do google e diferentes dispositivos no caso da utilização do flash.

Esses são três das centenas de motivos para Designers incluir como uma das suas responsabilidades, durante o processo de criação, a autonomia de definir o que é mais viável para a acessibilidade do website.

Assim é necessário atentar para o fato de que o site com restrições de acessibilidade gera uma impossibilidade de alguns usuários visitá-lo e sabemos que perder acessos é a última coisa que o nosso cliente quer.

]]> http://www.ramonvictor.com/designers-tambem-devem-entender-de-acessibilidade-na-web/feed/ 7