Skip to content

HTML5 , Novas tags, funcionalidades e outras novidades

9 de setembro de 2010

Estudando um pouco sobre HTML5 para começar alguns projetos mobile aqui na Mídia 3, percebi muitas coisas novas e boas, uma pena que a maioria das novidades não funcionam para todos os browsers. Enfim, fiz uma apresentação do que etsudei sobre HTML5. Um resumo das novas tags, funcionalidades, entre outros.

Prototipagem em Papel e Testes de Usabilidade

20 de agosto de 2010

Projeto final apresentado – Acessibilidade

22 de dezembro de 2009

Olá leitores do meu blog desatualizado. Essa desatenção desatenção ao blog possui uma justificativa, estava cursando uma pós e nesses ultimos 2 meses, estava fazendo a monografia.

Apresentei meu projeto final no sábado passado, dia 19 de dezembro. Prometo que em 2010 estarei atualizando o blog com frequência.

Estava fazendo o curso de especialização de Ergodesign de Interfaces – Usabilidade e Arquitetura da informação na PUC- Rio, sim o nome do curso é grande assim mesmo.

Este curso me foi de grande valia, aprendi bastante sobre essa área, avaliações heurísticas, avaliações  cooperativas, card sorting, enfim um mundo de coisas.

Mas o que quero  falar, é que consegui unir minha paixão por acessibilidade com este curso, e quanto mais sei sobre o assunto, mais precisarei aprender.

E como não poderia ser diferente, desenvolvi meu projeto final voltado para acessibilidade. Usei a rede social Acesse sendo a interface a ser avaliada.

Um dos professores mais importantes neste curso foi   o prof. Edson Rufino (@edsonrufino) , ele conseguiu me direcionar bem com a minha pesquisa, porque ele também tem seus estudos voltados para esta área. Também não posso deixar de agradecer atenção dos outros professores.

O meu objetivo da pesquisa foi avaliar acessibilidade da rede social, fiz uma avaliação de conformidade do WCAG 2.0 e avaliação cooperativas com cegos.

Percebi a grande importância de avaliar os projetos a partir do WCAG 2.0, apesar de difícil interpretação, a validação do projeto a partir do WCAG. Assim se consegue um melhor aperfeiçoamento quanto a acessibilidade nos projetos. É claro que não podemos esquecer das avaliações com usuários que usarão a interface em questão, sempre descobrimos coisas que os usuários precisam.

Segue abaixo minha apresentação com a avaliação da rede social Acesse que fiz para meu projeto final.

Desenvolva aplicações web com suporte multi-idioma

15 de outubro de 2009

Estou em uma nova fase da minha vida profissional,  aprendendo um pouco de ASP.NET, Jquery, enfim, tentando ser uma Front End completa. Estou gostando até, tenho aprendido bastante coisa. Afinal, acho que um HTMLer hoje em dia tem que ser um Front End completo, um desenvolvedor de interface. Enfim, isso fica em algum outro post. Hoje venho apresentar alguma coisinha que aprendi em ASP.NET e achei válido, pra colocarmos nosso site/sistema e vários idiomas.

Utilizando Resources

Habitualmente, as aplicações usam imagens e strings como ícones para barras de ferramentas ou menus, texto de menus e texto de labels. Alterar estes strings e imagens pode ser realmente “feio” e trabalhoso se você os colocou diretamente no código-fonte. Para alterar estes strings e imagens da forma mais fácil possível sem ter que procurá-los e alterá-los diretamente em seus códigos-fontes, você pode colocá-los em arquivos separados e então mudá-los em um único local.

O Framework .NET e o CLR (Common Language Runtime) oferecem grande apoio e este tipo de abordagem através da utilização de embebed resources (recursos embutidos).

O principal uso de resources é para localização. Utilizando arquivos de resource, você pode definir valores para as principais propriedades dos controles (como o text de um controle label) em diferentes arquivos – um para cada idioma que sua aplicação tenha suporte. Cada um destes resources contém strings (pares: chave/valor) para as propriedades localizadas em cada controle traduzido dentro do idioma correspondente.

Os arquivos de resource também podem ser usados com outra finalidade, porém não irei discutí-las neste momento.

Os conteúdo destes resources ficam armazenados habitualmente em arquvos .resx, que nada mais são do que arquivos XML contendo valores strings ou referência a arquivos externos. Ao compilar sua aplicação esses arquivos (strings e referências) são adicionados junto com o binário de sua aplicação.

Existem dois tipos de arquivos de resource:Local e Global que estão descritos abaixo:

Local Resources

Os resources locais são específicos para uma única página web e devem ser usados apenas para provê versões da página em diferentes idiomas.

Os resources locais devem ser armazenados no subdiretório App_LocalResources localizado dentro do mesmo diretório da página web, ou seja, deve-se existir um subdiretório App_LocalResources em cada diretório.

Os arquivos de resource são nomeados utilizando o formato: [.idioma].resx . Abaixo um exemplo de arquivos de resource válidos para diferentes idiomas para a página Default.aspx:

Default.aspx.resx – Arquivo base do resource, este arquivo será utilizado quando nenhum outro idioma for encontrado.

Default.aspx.de.resx – Resource para Alemão (A abreviatuta para Alemão é de).

Default.aspx.en.resx – Resource para o idioma inglês. (abreviatura para inglês é en).

Default.aspx.pt-BR .resx – Resouce para idioma Português (Brasil) especificamente (a abreviatura para o idioma português usado no Brasil é “pt-BR”)

Como o propósito de nossa aplicação é utilizar o recurso de multi-idiomas em todo o site não vamos utilizar resources do tipo local.

Global Resources

Os resources globais podem ser lidos de qualquer página ou código no web site. Você deve utilizar apenas os resources globais quando precisar acessar um único resource em múltiplas paginas web. Os resources globais devem ser armazenados no diretório App_GlobalResources na raiz da aplicação.

Os resources globais devem ser nomeados usando o formato [.idioma].resx. Abaixo um exemplo de arquivos de resources globais válidos:

MeuResource.resx – Arquivo padrão de resource. Será usado quando nenhum arquivo de resouce for localizado para o idioma atual.

MeuResource.en-US.resx – Arquivo de Resource para o idioma IngLês – Estados Unidos.

MeuResource.it-IT.resx – Arquivo de Resource para o idioma italiano –Itália.

Usar resources locais para definir automáticamente os valores dos controles é chamado de “implicit localization”. Através da “explicit localization” você define as propriedades dos controles manualmente associando-os com os arquivos de resource globais. o ASP.NET então automáticamente provê a tradução cultural para os usuários finais.

Para utilizar a localização explícita (explicit localization), crie primeiro um arquivo padrão de resource e então crie os arquivos de resource para cada idioma individualmente. Finalmente, associe as propriedades dos controles para os resources.

Após a descrição de o que é, e como funciona um arquivo de resource, vamos finalmente começar a criação de nossa aplicação.

No nosso exemplo, vamos utilizar os idiomas: Alemão, Francês, Inglês, Italiano e claro o nosso Português.

Para saber o código identificador de cada idioma, acesse a lista de identificadores aqui.

Criação dos arquivos de Resource Globais.

Para criar um arquivo de resource global siga os passos abaixo:

  1. No Solution Explorer, clique com o botão direito do mouse na raiz do web site e então clique em Add ASP.NET Folder e depois em App_GlobalResources.
  2. Clique com o botão direito do mouse em App_GlobalResources e então clique em Add New Item.
  3. Na tela Visual Studio installer templates, clique em Resource File.
  4. Na caixa de texto Nome, digite qualquer nome que queira utilizar seguido da extensão .resx. (No nosso exemplo usamos Idioma.resx).
  5. Dê um duplo clique no novo resource para abri-lo no Visual Studio. Será exibido uma tabela. Adicione valores para o idioma e então clique em Salvar.
  6. Copie e cole o arquivo de resouce para criar outros arquivos em diferentes idiomas. Para cada idioma adicione o identificador imediatamente antes da extensão .resx. Por exemplo, para o idioma espanhol, o arquivo deverá ser nomeado para Idioma.es-ES.resx.

Associando as propriedades do controle com o resource

Assim que os arquivos de resource foram definidos, você pode associar as propriedades do controle (como Label.Text) com o resource global e automaticamente o ASP.NET irá exibir o texto correto para o idioma do usuário.

Para associar as propriedades do controle com o resource global, adicione a o código <%$ Resource:ClassKey, ResourceKey %>. na propriedade que deseja utilizar o arquivo de resource.

Ex:

<asp:Label ID=”lblExemplo” runat=”server” Text=” <%$ Resources:Idioma,TextoExemplo %>”> </asp:Label>

Caso queira alimentar a propriedade programaticamente, siga o exemplo abaixo:

lblExemplo.Text = Resources.Idioma.TextoExemplo;

Se as propriedades do resource não estiverem disponível em tempo de desenvolvimento, você pode usar a função GetGlobalResourceObject, como abaixo:

lblExemplo.Text = GetGlobalResourceObject(”Idioma”, “TextoExemplo”).ToString();

Definindo a cultura (idioma) atual

É possível definir dois tipo de propriedades para definir a cultura, são elas:

Culture: Determina o resultado de funções dependentes de cultura, como formatos de datas, números e moeda. Você só pode definir esta propriedade usando o formato linguagem-região (como pt-BR) não é possível definir a propriedade apenas com a linguagem (pt).

UICulture: Determina qual cultura será carregada na página. Você pode definir apenas a linguagem (pt).

Para definir estas propriedades, você deve sobrescrever o método InitializeCulture. Após definir as propriedades Culture e UICulture, você deve chamar o método base.InitializeCulture.

No nosso exemplo, criamos uma página base (PageBase) onde sobrescrevemos o método InitializeCulture:

protected override void InitializeCulture()

{

string c = Idioma;

UICulture = c;

Culture = c;

base.InitializeCulture();

}

Com isso você já pode utilizar o recurso multi-idioma em seus projetos web.

Em nosso exemplo, definimos uma master page com um dropdown onde é possível alterar o idioma da página em tempo de execução.

Logo abaixo, o link com o código-fonte completo de nossa aplicação exemplo com suporte multi-idioma.

Download: GlobalizationExample.rar

Citação do Blog: http://roniedias.wordpress.com/2009/04/03/globalization-desenvolva-aplicacoes-web-com-suporte-multi-idioma/

Bom pessoal, por hoje é só.. Tenho mais coisas pra comentar do que venho aprendendo.. em breve posto aqui..

1a. Conferência Web W3C Brasil

30 de agosto de 2009

A Conferência Web W3C Brasil foi criada para oferecer ao público brasileiro um amplo fórum anual de discussão e debate sobre a evolução da Web, a padronização de suas tecnologias e o impacto dessas tecnologias na sociedade e na cultura. A Conferência reunirá pesquisadores, desenvolvedores, usuários, empresas, agências digitais, mídia e todos aqueles que são apaixonados pela Web e que têm algo a oferecer, usar e debater.

A 1a. Conferência Web W3C Brasil 2009 será realizada em São Paulo, SP, nos dia 23 e 24 de novembro, no Blue Tree Towers Morumbi no bairro do Brooklin. Acesse os links para obter informações sobre o local, hotéis da região, chamada de trabalhos ou sobre como se inscrever para participar da conferência da web brasileira.

Chamada para trabalhos

Você pode ser um palestrante da 1a. Conferência Web W3C Brasil! Se você tem um caso prático e inovador de uso da web, ou fez uma pesquisa cujos resultados merecem ser compartilhados com toda a comunidade web brasileira, ou ainda tem o “pulo do gato” para ensinar em um tutorial, então atenda a nossa Chamada de ‘Papers’, Casos de uso e Tutoriais.

O Comitê de Programa vai selecionar as submissões mais relevantes para compor a programação da Conferência. Mais detalhes em Chamada de trabalhos.

Entre na comunidade da conferência no Facebook e fique por dentro.


Eu pretendo ir, estou analisando possibilidades de tirar folga do trabalho para estes dias e hotéis. Agente se vê por lá.

Lançamento da primeira rede social acessível

15 de agosto de 2009

É com grande honra que apresento a nova rede social acessível do Brasil. O Acesse veio para revolucionar, para permitir que as pessoas normais convivam mais com os deficientes e com o mundo dos paraolímpico. Muito bom de ter participado na criação deste projeto na minha empresa, QX3 juntamente com o Instituto Superar . O prazo foi curto, algumas noites viradas na criação deste, porém a vontade da equipe  de fazer um projeto beneficiando tanto deficientes como não deificientes fizeram que nos esforçassemos cada vez mais.

Foi um caminho longo, não é fácil colocar todas as diretrizes de acessibilidade, deixar o código ssemântico, e além disso criarmos um visual bonito e limpo no site, mas enfim, conseguimos deixar a rede social acessível a todos. É bom olhar e perceber que todos se benficiaram, todos gostaram. Mas enfim, não é só isso, estamos projetando novas funcionalidades para a rede social, sempre no intuito de facilitar a acessibilidade para todos.

Além disso, a rede social está validada nos principais navegadores e nos leitores de tela (Jaws e DOSVOX).

Uma matéria saiu no Globo Esporte sobre o projeto:  Paraolímpicos ganham comunidade virtual adaptada às suas necessidades

É claro que, projeto da casa, fiz questão de me cadastrar e participar da rede social. Me procurem pelo meu nome ” Taynara Jaegger “.

Acesse – http://www.acesse.org.br

Table ou No table?

26 de julho de 2009

 

Semana passada tive um problema com margens renderizadas com difereça nos navegadores,  precisariamos que no site tivesse um body com fundo para que ele se repetisse acordo com o conteudo/tamanho de cada página do site, infelizmente descobri da pior maneira que as margens além de serem renderizadas diferente nos navegadores, isso também é afetada em cada versão de browser, então um “backgorund-position” com hacks era ineficaz.

Então após várias tentativas com divs envolvendo o conteudo, declarar no css o html e o body com 100% as páginas que possuiam scroll não herdava todo fundo, e adivinha, colocamos uma tabela somente para estrturar essa parte e o que aconteceu? Em um toque de mágina o site ficou perfeito, o fundo se adequando a todos os navegadores e o site ficou fluidosem problema algum.

Tive alguns problemas com não usar tabelas para estruturar sites, alguns clientes colocavam muito mais conteudo do que era permitido, mas a idéia de nosso projetos não é essa, tornar sites fixo e sim com conteudo fluido, para que um dia possamos colocar mais ou menos conteudo e o site continuar do  mesmo jeito.

Mando um post do meu chefe sobre ter ou não tabela, Ele retratou esta matéria em uma comunidade interna da nossa empresa, incentivado pelo problema que tivemos acima.

 

 

Resolvi lançar esse assunto pois tenho percebido que, em muitos projetos, estamos gastando um tempo danado, talvez muito maior do que o necessário, apenas para deixar o site todo tableless. Eu concordo que o modelo de formatação por tabela seja ultrapassado semanticamente, mas ao mesmo tempo ele nos dá uma confiança muito grande de que o que estamos construindo é realmente sólido. É como uma parede de alvenaria comparada à uma de gesso. Na parede de alvenaria podemos pendurar o que quisermos: armários, quadros, etc. Na de gesso, se não usarmos uma bucha especial, corremos o risco daquela parede desmoronar. A tabela nos tira a vantagem do design fluido e da flexibilidade de adaptar a mesma informacao de formas completamente diferentes. Em compensacao sabemos de antemao que, se uma pagina foi concebida para ter determinado layout, ela realmente vai ter aquele layout. E sejamos praticos, em 99,99% da vezes ela nao tem que ter layout diferente daquele em que foi concebida. Sera que realmente vale a pena gastar aquelas horas, dias ou semanas a mais, so pra ter essa falsa “flexibilidade”. A ponta do lapis provavelmente vai dizer que nao. O mais sensato me parece ser, antes de iniciarmos qualquer projeto, sentarmos todos juntos e definir uma estrategia de montagem, junto com equipe de html, design e comercial, e definir o caminho mais balanceado para atingir o que foi efetivamente vendido para o cliente.

via @postarek

Eu acho ideal termos sim tabelas pra estruturação de sites, assim conseguimos sempre ter um site fluido, mas como tabela não é acessível, não podemos descartar que o conteúdo em si precisa estar o mais lipo possível com ‘tabless’.

Enfim pessoas, postem suas opinioes!

Seguir

Obtenha todo post novo entregue na sua caixa de entrada.