Code Show

Sexta-feira passada (17/08), teve o CodeShow foi desenvolvido um sistema de publicação de livros (bem no estilo do Flickr), porém por ser um projeto bem detalhado e especifico não deu para ser concluído em 6 horas de trabalho, mas foi interessante como funciona a metodologia de trabalho (Designers e Programadores), algumas dicas e utilidades surgiram que muitas coisas podem ser feita de outras maneiras.

Uma experiência interessante, porque não foi uma palestra e nem um workshop, algo diferente mostrando um dia-a-dia de trabalho, com desenvolvimento e sugestões.

Ganhei uma camiseta por interagir mostrando um recurso de acessibilidade na plataforma Mac OS X de aumentar elementos da tela, zoom interno maximiza a tela em até 20 vezes e acompanhando automaticamente o cursor do mouse — que também pode ser redimensionado — você pode focar mais no seu trabalho e não perder tempo correndo o mouse pela barra de rolagem.

Eu assisti à construção de um projeto, como integrar as ferramentas, nas seguintes etapas:

1. Projeto.
O desenho inicial da aplicação. Ferramentas utilizadas: wireframes, quadro-branco e canetão.
2. Layout.
Ferramentas utilizadas: Adobe Illustrator. O layout já estará feito, mas o Diego aproveitará para mostrar para os Designers de plantão as facilidades do Illustrator para a criação de layouts.
3. Construção do HTML e CSS.
Escrita do código client-side, em XHTML válido e semântico, com folhas de estilo CSS, inclusive para dispositivos móveis e impressão. Ferramentas utilizadas: CODA, templates do PSE, XHTML, CSS, media types.
4. Criação do Banco de Dados.
Ferramentas utilizadas: quadro-branco e canetão, MySQL Query Browser, Subversion.
5. Desenvolvimento das camadas de modelo e controle.
Ferramentas utilizadas: Kate, gedit, Python, SQLObject, Subversion.
6. Desenvolvimento GUI HTML.
Neste ponto teremos uma aplicação completamente acessível e funcional, porém sem interação via Javascript. Ferramentas utilizadas: Kate, gedit, Python, PSE, Subversion.
7. Desenvolvimento Ajax.
Nesta etapa desenvolveremos toda a interação Javascript e Ajax da aplicação. Ferramentas utilizadas: Kate, gedit, Javascript não-obstrutivo, CSS, Ajax, JSON, Python, PSE, Subversion.
8. Publicação. (Esperando o Código-fonte)

Mais em: http://visie.com.br/codeshow/

Marcadores: acessibilidade, code, show, tableless

 

¶ 10:48 0 comments

 

Teste Acessibilidade no Navegador

Existem vários sites para validar seu site nos padrões W3C/WAI

Tem um jeito mais fácil de fazer esse teste de validação, utilizando seu navegador.
Baixei o Fire Fox, nele tem uma extensão (plug-in/add-on) chamada HTML VALIDADOR (clique aqui para baixar).

Nessa extensão indica em qual linha tem erros e avisos.

Quando instalar e reiniciar o Browser, você vai ver um icone no canto inferior direito.
Se esse Icone for Verde , o site está validado, se tiver vermelho contém erros graves e se tiver um amarelho é de avisos para ser corrigido.

Lembrando que é super importante deixar o código sempre nos padrões para maior visibilidade do site, mesmo se o Icone validado estiver verde, é sempre bom validar a acessibilidade do site

Para ativar o teste de acessibilidade no código HTML, vai em Ferramentas/Tools do Firefox, tem uma opção Html Validator Options ou vai em Add-ons/Extensões, selecione HTML VALIDATOR e clique em Opção/Options.



Ative o "Accessibilty level" (igual da foto), deixando pelo menos no nível 1.
Se conseguir corrigir os problemas de acessibilidade no nível 3, deixará seu site com mais visibilidade ampliando o número de pessoas que possam acessar.

Procure sempre validar o código e deixar acessível multi plataforma.

Marcadores: accessible, acessibilidade, addon, ajuda, developer, firefox, html, plugin, tools, validator, W3C, WAI, Web Accessibility Initiative, webdesign, webmaster

 

¶ 12:17 0 comments

 

Dicas de acessibilidade para o seu blog

Se você chegou agora, antes de continuar leia: Torne seu blog acessível para todos.

Depois de lançar a campanha "Torne seu blog acessível para todos", nada mais justo que escrever um post com dicas de acessibilidade. Estou muito satisfeito com a campanha, pois os blogueiros que estão participando, estão escrevendo excelentes posts com seus pontos de vista sobre essa questão, e também com algumas dicas de acessibilidade, formando uma grande teia de informação.

As dicas que listarei a seguir, são de acordo com meu ponto de vista, visando a melhor usabilidade do blog para todos os leitores, e tornando-o compatível com os softwares usados pelos portadores de deficiência visual e/ou física para ler as páginas. Poderão ver um exemplo prático dessas dicas aqui mesmo em meu blog.

• Acesse seu blog usando o mesmo programa usado pelos deficientes visuais

Antes de tudo, acesse seu blog da maneira que ele é acessado por um deficiente visual e/ou físico. Assim poderá entender toda a dificuldade que é sentida ao acessar um blog que tem péssimo nível de acessibilidade. Esse sem dúvidas é o melhor teste para constatar o nível de acessibilidade de seu blog.

Baseado nessa experiência, poderá aperfeiçoar seu blog, e automaticamente torná-lo acessível por uma pessoa que use um desses programas, assim aumentando o tráfego do seu blog. O link para download do software, se encontra no post: Campanha: Torne seu blog acessível para todos - o mesmo recomendado no início desse post.

• Crie um menu principal antes do conteúdo

É importante que no blog exista um menu principal antes de todo e qualquer conteúdo. Assim o usuário não precisará navegar por todo o conteúdo do blog para achar algo que deseja acessar. Para os deficientes visuais, isso é essencial, uma vez que se não existir esse menu, ele tem que navegar por todo o site para achar o que deseja, e isso não é um processo rápido, pois precisará ouvir a descrição de cada link antes de chegar no desejado.

Nesse menu, é muito importante que o primeiro link seja "Ir para o conteúdo", pois assim o software que lê a tela - usado pelos portadores -, não precisará navegar por todos os links para que possa chegar ao conteúdo.

A criação desse menu principal, é feita de forma muito simples. Basta usar links que levem a outra parte da mesma página. Por exemplo, para criar um link para ir diretamente as categorias que estão localizadas na sidebar, fiz da seguinte maneira:

Usei as tags:
<a href="#categorias">Categorias</a> e <a name="categorias"></a>

Coloquei a primeira tag na parte superior de meu layout (onde está localizado o menu) e a segunda tag foi colocada na sidebar, antes dos links das categorias. Assim ao clicar no link que foi posto no menu, o leitor automaticamente será conduzido as categorias, isso facilita tanto para seus leitores comuns, quanto para os especiais - portadores de alguma deficiência. E foi assim que montei todo o menu, apenas direcionando para outras partes do layout.

• Crie o link "Voltar para o menu principal"

Crie o link "Voltar para o menu principal" da mesma forma que criou os links do menu principal - como expliquei na dica anterior - e o coloque no final da página. Assim ao chegar ao fim do conteúdo, o leitor não precisará rolar toda a página para voltar ao topo. E pior ainda se for no caso dos softwares leitores de tela, pois sem esse link, ele precisararia ler todos os links novamente, para que então pudesse voltar ao menu principal.

• Descreva links e imagens

É de extrema importância que você faça a descrição de cada imagem que usar em seu blog, principalmente se essas forem usadas no menu. A descrição pode ser feita através do atributo "alt". Assim o programa que lê a tela, irá reconhecer essa descrição. Também é super importante que use links descritivos. Ao invés de: Acesse o post da campanha, Clicando aqui., prefira: Visite o post da Campanha: Torne seu blog acessível para todos. Você também pode descrever o link através do atributo "title". Assim ao leitor levar o mouse sobre o link, surgirá a descrição do mesmo.

Alguns posts antigos ainda possuem imagens e links mal descritos. Isso vai ser corrigido durante essa semana, que estou me dedicando especialmente a isso.

• Acesse seu blog com vários navegadores

Os navegadores usados por seus leitores nem sempre são iguais ao que você usa, há uma diversidade imensa nessa questão. Você deve fazer com que seu blog atenda as necessidades de todos os leitores, independente do navegador e/ou resolução usada por ele, por isso teste seu blog usando o maior número de navegadores possível, principalmente com o leitor de telas usados pelos deficientes - como disse na primeira dica, esse é o melhor teste de acessibilidade.

Não esqueça de refazer os testes sempre que fazer alguma alteração em seu código, por mínima que seja.

• Mais dicas

Como disse no início do post, os blogueiros que estão participando da campanha escreveram ótimos posts, contando seu ponto de vista sobre essa questão, e também repletos de dicas super interessantes. Recomendo que leia o post de cada participante, além de conhecer seu ponto de vista, poderão aperfeiçoar seus blogs com as dicas dadas por ele. Os links para os participantes também se encontram no post da campanha.

Marcadores: accessible, acessibilidade, dicas, WAI, Web Accessibility Initiative

 

¶ 12:27 0 comments

 

Campanha: Torne seu blog acessível para todos

Campanha adotada pelo blog TV Retrô estou divulgando para expandir o uso de acessibilidade na web, confira:
Campanha: Torne seu blog acessível para todos



Principais Objetivos:

• Tornar possível a acessibilidade de pessoas portadoras de deficiência visual ao conteúdo do seu blog
  


• Colaborar o máximo possível com a inclusão digital
  


• Proporcionar fontes de informação e/ou entretenimento aos deficientes visuais
  


• Incentivar outros blogueiros a fazerem o mesmo que você
  


• Compartilhar soluções de acessibilidade

O que me levou a lançar essa campanha

Ontem, assisti a um vídeo - que pode ser assistido no final desse post - que me comoveu bastante, o vídeo trata de acessibilidade na Web. Mostra as dificuldades encontradas pelos deficientes visuais, ao visitar um site que não esteja de acordo com alguns padrões de acessibilidade. Pensei um pouco a respeito e tive a idéia de lançar essa campanha, para que juntos, possamos tornar nossos blogs acessíveis a pessoas portadoras de deficiência visual.

A maioria dos deficientes visuais, a menos que tenham ótimas condições financeiras, são analfabetos ou apenas possuem um nível de educação básico. Os métodos usados na educação de deficientes visuais, são métodos especiais, que não são encontrados em escolas comuns, e por isso se torna inacessível para as pessoas de classe média. A Internet é um recurso que pode mudar isso! Informações são encontradas muito facilmente por toda a Web, só que a maioria dos sites, por não atenderem a determinados padrões, tornam-se incompatíveis com os programas usados pelos deficientes visuais para acessar a Web. Por isso resolvi fazer essa campanha, para podermos possibilitar o acesso a um maior número de páginas para os deficientes visuais.

Porque aderir a campanha

Aderindo a campanha, você está diretamente contribuindo com a inclusão digital e possibilita que pessoas portadoras de deficiência visual, tenham acesso a um maior número de informação, notícia, entretenimento, e todo o conteúdo que pode ser encontrado na Internet. Você também elevará o nível de acessibilidade do seu blog ao máximo, apenas com algumas pequenas modificações no código fonte de sua página - acreditem, são modificações muito simples.

Softwares usados pelos deficientes visuais

Os 3 principais softwares usados pelos deficientes visuais, são o Dosvox, Jaws e Virtual Vision.

Compartilhar soluções de acessibilidade

Além de beneficiar uma boa parte da sociedade, também nos beneficiaremos, pois ao participar da campanha, o blogueiro irá tornar o seu blog compatível com o programa e fará um post contando sua experiência com isso tudo. E para propagar informação, também irá citar as técnicas usadas para melhorar a acessibilidade de seu blog, assim todos iremos ensinar e aprender juntos, que é uma das grandes vantagens e diferenciais dos blogs.

Como tornar meu blog acessível?

Não é nada complicado, o principal erro que cometemos em relação a acessibilidade, é deixar de usar as tags de descrição, que são muito bem ilustradas no vídeo. Não se preocupem, ao assistirem o vídeo, vocês entenderão muito bem do que estou falando.

Cheguei a conclusão, que a melhor forma de tornar seu blog acessível, é assim como eu fiz, ver o seu blog como os deficientes veriam. Foi uma experiência incrível, que irei descrever no próximo parágrafo.

Baixei o programa Jaws, que é usado pelos deficientes para ler o conteúdo da página - isso também é mostrado no vídeo -, configurei para a língua portuguesa, e acessei alguns sites, pude sentir na pele as mesmas dificuldades encontradas pelos deficientes visuais ao acessar uma página que não esteja de acordo com alguns padrões de acessibilidade.

Abri o programa, desliguei o monitor e acessei um blog escolhido aleatoriamente, e consegui navegar pela página razoalvelmente bem, mas tive um pouco de dificuldade para navegar pelo menu do blog. Em seguida fechei a página do blog, e acessei o site Bengala Legal, que foi construído por um deficiente visual. Consegui navegar perfeitamente por todo site, li uma poesia escrita por ele, depois voltei a página inicial e fechei o navegador.

Também visitei o meu blog, consegui navegar normalmente pelo menu, mas tive dificuldade para ler os posts, pois o programa mesmo estando configurado para o português, lia os posts em inglês, acho que deve ter algo no meu código que impede que o programa leia em português. Tenho que melhorar muitas coisas, as descrições dos links, as descrições das imagens, o menu. Farei isso na semana que vem, e não descansarei até deixar meu blog totalmente acessível pelo programa.

Façam o mesmo que eu, baixem o programa - colocarei o link no final do post - e acessem seu blog, assim verão se seu blog já está acessível pelo programa, ou se ainda falta ser melhorado em algum critério. O programa pode ser baixado gratuitamente, e é muito fácil de ser usado. Para navegar em sites, basta apenas usar a tecla TAB para navegar pelos links, e as setinhas do teclado , para ler os textos. Quando assistirem ao vídeo, verão como é fácil.

Como participar?

Para participar da campanha, em primeiro lugar tem que ter interesse pelo que foi citado acima e desejar elevar o nível de acessibilidade do seu blog ao máximo, pois um blog que pode ser acessado por um deficiente visual, garanto que pode ser acessado por qualquer pessoa não portadora. Assista ao vídeo, baixe o programa, navegue pelo seu blog usando o programa, com isso já terá idéia de como aperfeiçoar o seu blog. Como já disse anteriormente, as principais mudanças que você precisará fazer em seu blog, é apenas usar corretamente as tags de descrição, e fazer links mais descritivos, assista ao vídeo e veja porque!

Depois disso, escreva um post contando sua experiência, falando em que aspecto você melhorou a acessibilidade de seu blog, como fez, etc... Quando publicar o post, deixe a URL por comentário - o blogger não dá suporte a trackback ¬¬ -, que irei linkar todos que aderirem a campanha.

Aderiu a campanha

Até agora aderiu a campanha:

Alessandro Martins com o post Campanha: torne seu blog acessível para todos
Lu com o post Seu blog é acessível?
Alex Rodrigues com o post Acessibilidade, Design Web e Ubuntu

Links

Assistam ao vídeo citado nesse post
Download do programa Jaws
Informações sobre o Dosvox, Jaws e Virtual Vision.

Produtores do vídeo

Bruno Torres
Horácio Pastor Soares
Lêda Lúcia Spelta
Marco Antonio de Queiroz (MAQ)

Marcadores: accessible, acessibilidade, campanha, WAI, Web Access ibility Initiative

 

¶ 11:55 0 comments

 

Comunidade Acessibilidade Web

Acessibilidade Web http://acessibilidadeweb.com.via6.com

No site via6.com é um Orkut de Trabalho e para Profissionais no estilo o LinkedIN.
Descrição: Comunidade sobre o tema de Acessibilidade na Web.

Mostrar boas maneiras e dicas para manter o conteúdo acessível a qualquer usuário e independente a plataforma que está sendo usada.

Projeto que todos possam obter informação.
Melhorar o desenvolvimento do HTML para semântico e organizado nos padrões WAI/W3C.

Atualizações e novidades:
http://blog.fspina.com.br/labels/acessibilidade.html
http://www.naveguebem.org/ (Em teste!)

Marcadores: acessibilidade, ajuda, comunidade, guia, help, manual, reference, WAI, Web Accessibility Initiative

 

¶ 13:16 1 comments

 

Amputados Vencedores

Dica do Flávio é amputado dos braços há 9 anos.
Monto um site de auto-ajuda onde recebe 21.000 mil visitas ao mês.
Vejam a entrevista para Jornal de Londrina.
http://www.amputadosvencedores.com.br/entrevista_jornallondrina.htm

Marcadores: acessibilidade

 

¶ 13:03 0 comments

 

Dicas Rápidas do W3C para criar na Web

Marcadores: accessible, acessibilidade, dicas, W3C, WAI, Web Accessibility Initiative, webdesign

 

¶ 17:45 0 comments

 

Acessibilidade no Leopard

Segue as "features" de acessibilidade que tem no MAC OS X Leopard

Marcadores: accessible, acessibilidade, apple

 

¶ 16:24 0 comments

 

Curso de Acessibilidade para Webdesigners Gratuito

Marcadores: accessible, acessibilidade, curso, e-learning, WAI, Web Accessibility Initiative

 

¶ 10:34 0 comments

 

Acessibilidade na Web: Custo ou Benefício?

Vídeo - Acessibilidade na Web: Custo ou Benefício?

A acessibilidade no desenvolvimento de sites não é uma concessão, um ato de boa vontade para com usuários com necessidades específicas: é uma visão estratégica e lucrativa.

Imagine o site de uma loja ou de um banco construídos sem a acessibilidade adequada: uma pessoa com deficiência ou com qualquer tipo de dificuldade de acesso - potenciais clientes - estarão automaticamente excluídos. E o que dizer dos sites de serviços públicos?

Esse vídeo de 12 minutos sobre a Acessibilidade Web, mostra algumas das principais barreiras de diversos sites e suas soluções. Conheça na íntegra esse projeto e baixe o vídeo em um dos formatos disponíveis no link abaixo:

Vídeo: "Acessibilidade na Web: Custo ou Benefício?"

Acessibilidade, web Standards, Usabilidade.

Acessibilidade de verdade é a soma de acessibilidade + web standards + usabilidade. Desenvolvemos uma metodologia que vai além da acessibilidade, pois leva em conta o contexto social.

Achei genial e emocionante a idéia, estou procurando como partipar e ajudar nesse projeto :) QUERO ENTRAR NESSE TIME!

LINKS:

• site do projeto- Acesso Digital
  
• site desenvolvido por um cego - Bengala Legal
  
• Documento como fazer um site em flash acessível
• sites de referência - Elo Eficiente

Marcadores: accessible, acessibilidade, WAI, Web Accessibility Initiative

 

¶ 16:51 2 comments