Arquivo da categoria: Arquitetura da Informação

Prepare-se para a Revolução – Boas práticas de desenvolvimento com Padrões Web

” O W3C mudou. Isso vai modificar todo um fluxo de trabalho e a velocidade das implementações dos browsers e a forma com que os desenvolvedores trabalham. “

O W3C mudou. O W3C foi criado exatamente para homologar, regularizar e criar novos padrões de publicação de informação na internet. O trabalho do W3C é exatamente criar caminhos para que os desenvolvedores e os fabricantes de browsers possam trilhar no futuro. Acontece que o W3C ficou tão grande, tão lerdo, tão aficcionado pelos problemas do futuro que acabou se perdendo nos seus próprios sonhos.

HTML 5

HTML 5

Um dos objetivos do W3C – se não o maior objetivo – é organizar toda a informação da internet. Para fazer isso, precisamos identificar toda essa informação de forma que a extração não seja complexa, pelo contrário, de maneira que a toda a informação que precisarmos possa ser extraída rapidamente, fácil e de qualquer tipo de dispositivo ou aplicação. Por isso, o W3C perdeu muito tempo criando padrões como RDF, por exemplo. Não desmerecendo essas tecnologias, que aliás são bem úteis para nos hoje. Mas cá entre nós, fazer bordas arredondadas para mim, hoje, é mais importante do que algumas necessidades de semântica.
Alguns dos desenvolvedores, a grande maioria gringos, também tinham essa visão. A necessidade de grande parte dos desenvolvedores eram ter coisas simples como suporte a PNG, bordas arredondadas, resize de imagem no background, colocar várias imagens de backgrounds em um elemento, css animation, e assim por diante. Por isso, muitos desenvolvedores começaram reinvidicar uma alteração de prioridades. O HTML 5 surgiu daí. Muitos se enganam se acham que o HTML 5 foi idéia original do W3C. Ele surgiu de um grupo de inconformados de o HTML não ter a pelo menos 10 anos, uma nova atualização. Então começaram a estudar e a escrever um novo padrão para a linguagem. Isso surgiu de uma união de desenvolvedores da Apple (Safari/Webkit), Mozilla e Opera. Muitos se enganam também, se acham que só o W3C pode criar padrões. Você pode criar um. Se vai haver suporte da comunidade, do W3C e dos fabricantes de browsers, é outra história. Mas você tem todo o direito de criar.

O grupo do HTML 5, queria mudar. Eles estavam cansados de usar uma tecnologia antiga e começaram a fazer o trabalho que se esperava que o W3C fizesse. Por fim, essa iniciativa ganhou tanta popularidade e ajuda de outros desenvolvedores, que o W3C resolveu abraçar a idéia e hoje ele cuida desse padrão.
O CSS3 também começou a aparecer por que o W3C abriu os olhos e resolveu começar a revolucionar a linguagem.

O W3C mudou. Os times que cuidam dessas linguagens foram divididas. Modularizadas. Deixe-me explicar. O CSS3 não será mais lançado de uma vez, mas em módulos. Há um time que cuidará da propriedade background. Outra que cuida da propriedade position, outra que cuida da propriedade border, e assim por diante. Isso possibilita que cada módulo, cada propriedade, cada parte do CSS seja lançado independentemente, acelerando o processo de suporte dos browsers e utilização pelos desenvolvedores. Logo, não há mais aquela história de “Browser tal não suporte CSS3”. Mentira, ele suporta, mas algumas das funcionalidades. A mesma coisa acontece com o HTML5. Dizem que o IE8 não suporta HTML 5, mas é mentira. Ele suporta partes do HTML 5. Já há vários módulos implementados no IE8, que fazem parte da especificação do HTML 5. Isso também acontece com os outros browsers.

A web vai ficar mais dinâmica agora. O CSS 3 e o HTML 5 vieram para separar o joio do trigo. Os designers não vão mais ficar pintando quadradinhos como antes. O CSS está virando uma linguagem visual de verdade. Há, por exemplo, working drafts de suporte a variáveis no CSS. E isto é só o começo.
A mesma coisa para o HTML 5. A mudança das tags estruturais do HTML é apenas a ponta das novas possibilidades. Para o pessoal que achava que o HTML é coisa de criança, se prepare, porque o buraco, agora, é mais embaixo.

Fonte

Deixe um comentário

Arquivado em Acessibilidade na internet, Arquitetura da Informação

A experiência do usuário além da usabilidade

Quantas vezes nos deparamos com burocracias e processos complicados para a realização de uma simples tarefa do dia-a-dia?

Alguns exemplos comuns…

Preciso aumentar o limite do cartão no site do cartão de crédito. Acesso o site e preencho a solicitação. Só depois eles apresentam mensagem informando que é necessário entregar um comprovante de renda.

experiencia_01.jpg

A transação está disponível no menu de navegação.

O sistema permite acessar um formulário e selecionar a opção de aumento de limite.

É frustrante, ao final, deparar com essa mensagem.

Ou preciso fazer uma TED (transferência para outro banco) pelo Internet Banking ainda hoje.

Após acessar o site e realizar o login, o sistema informa que só permite realizar transferências para contas que foram cadastradas na agência.

É necessário falar com o gerente ou ir até a agência para realizar a transferência.

experiencia_03.jpg

O menu possui a transação de TED sem cadastramento. Informa que essa operação só é válida para valores acima de R$5.000,00 e o limite do cliente é de R$1.000,00. Sem realizar cadastro, não permite efetuar o pagamento.

Ou ainda, uma empresa de telefonia permite acessar o site para consultar fatura, alterar a data de vencimento e solicitar reparos. Para isso, solicita login com usuário e a senha.

Após a identificação, para realizar qualquer consulta, o cliente precisa informar o número da linha que será consultada. Mas, se já estou logada, o sistema não deveria identificar o número das minhas linhas de telefone? É justo que para cada consulta eu tenha que digitar o número da linha se estou identificada?

experiencia_02.jpg

Após realizar o login, para cada consulta é necessário informar novamente os dados pessoais de identificação da conta.

São inúmeras situações corriqueiras no nosso dia-a-dia e as ferramentas digitais de conveniência, que surgiram para facilitar nossas vidas, acabam causando mais frustração, uma vez que vêm atreladas a diversos processos inconvenientes.

O que eu quero dizer com isso?

Ter uma boa interface, nomenclaturas adequadas e formulários que funcionam são itens muito importantes e fundamentais. Mas, a experiência do usuário vai além.

Uma boa usabilidade do site é primordial e temos que reformular processos e workflows, se preciso, para que a experiência do usuário seja positiva e completa.

Investir no site e em uma navegação intuitiva e agradável não é suficiente. Vamos rever os fluxos e processos por trás da interface. Nossos usuários não devem ser prejudicados por dificuldades internas da empresa, sistemas antigos ou processos formulados há muitos anos e que valem até hoje, independente da evolução tecnológica.

O mundo online é um grande desafio para todas as empresas. Ele exige rapidez, segurança e eficiência. Além disso, deve ser intuitivo, pois quem usará o serviço é o cliente. Todas essas qualidades não combinam com as estruturas burocráticas herdadas do século passado.

O dinamismo do mercado pede mudanças e quem tem exigido essa atitude é o cliente. Ele quer mais! Sendo assim, vamos pensar nas suas necessidades e como facilitar sua vida. A experiência deve ser planejada por completo e a usabilidade não deve estar restrita a trechos desconectados entre si.

Fonte

Deixe um comentário

Arquivado em Arquitetura da Informação, Usabilidade na internet

Semântica com o HTML5

Como podemos produzir código semântico utilizando HTML5? Essa é a pergunta que toda a comunidade de desenvolvedores gostaria de obter a resposta. Abaixo você vai encontrar um exemplo de código em HTML 5 onde o objetivo é tornar o código mais “usável”, acessível, utilizando poucas classes e ID’s.

Além disso, você vai esperar mais 10 anos para utilizar HTML até que os padrões finais sejam definidos ou vai ser mais um adepto já que o suporte a HTML 5 nos browsers está aumentando?

01.< !DOCTYPE html>
02.<html>
03. <head>
04. <meta charset="UTF-8" />
05. <title>Site Name &bull; Page Title</title>
06. </head>
07. <body>
08. <nav>
09. <h1><a href="/">Site Name</a></h1>
10. <ul>
11. <li><a href="#">Nav Link</a></li>
12. <li><a href="#">Nav Link</a></li>
13. <li><a href="#">Nav Link</a></li>
14. </ul>
15. </nav>
16. <header>
17. <p>Welcome to the site!</p>
18. <a href="#">Call to action!</a>
19. </header>
20. <section>
21. <aside>
22. <!-- Sidebar -->
23. </aside>
24. <article>
25. <header>
26. <h2>Article Name</h2>
27. <p>Posted by <cite>Kerrick Long</cite> on <time datetime="2009-06-21">June 21</time>.</p>
28. </header>
29. <p>Lorem ipsum dolor sit amet...Aliquam erat volutpat.</p>
30. <figure>
31. <img src="/images/eclipse.jpg" width="640" height="480" alt="Solar Eclipse" />
32. <label>Here we can see the solar eclipse that happened <time datetime="2009-05-28">recently</time>.</label>
33. </figure>
34. <p>Lorem ipsum dolor...</p>
35. </article>
36. </section>
37. <footer>
38. <p>&copy; <time datetime="2009-01-01">2009</time>, <cite>Site Owner</cite></p>
39. </footer>
40. </body>
41.</html>

Deixe um comentário

Arquivado em Acessibilidade na internet, Arquitetura da Informação, XHTML

HTML5: a cara da próxima web

Nova versão da linguagem incorpora em seu código funções para áudio e vídeo, APIs e funcionalidades do Flash e Silverlight

Html 5

Html 5

Quem acessa a internet desde seu início comercial – meados dos anos 90 – acompanhou a evolução da rede mundial em diversos aspectos. Um dos pontos que mais sofreu mutações foi a interface: de páginas estáticas e meramente informativas, até interações complexas permitidas por meio de tecnologias como o Ajax. Por trás de todo esse desenvolvimento, está uma linguagem que poucos vêem, mas que é a base de um mundo de páginas da web: o HTML, casamento entre os padrões HyTime e SGML, que surgiu no início dos anos 90.

Depois de mais de dez anos do lançamento da última versão da linguagem, o HTML 4, o Web Hypertext Application Technology Working Group está dando os últimos passos para anunciar a tão esperada versão 5. A último draft foi anunciado no início do ano e as cerca de 500 empresas que participam do grupo devem enviar suas correções e sugestões até o final de junho de 2009. A partir daí, cria-se o padrão de fato para que aplicações e browsers possam se adequar às novas funcionalidades.

Novas funções

“A ideia é que ele seja liberado em 2010. O principal destaque do HTML 5 é a possibilidade de agregar no código comando para áudio e vídeo”, afirma Vagner Diniz, gerente geral do W3C Escritório Brasil, consórcio que define os padrões técnicos a serem utilizados na web. São comandos específicos no lugar das tags quebra-galhos usadas hoje em dia. As famosas object e embed poderão ser substituídas pelas etiquetas e , para inclusão dos respectivos objetos multimídia.

As novas tags trazem funções interessantes de maneira nativa, excluindo a necessidade de embutir elementos externos nas páginas. Funções obtidas com o uso de Ajax, como os movimentos de arrastar-e-soltar itens de uma página, poderão ser chamadas direto do código HTML. “O Javascript faz referência a elementos do HTML. Como o HTML terá novos elementos, então o Ajax também será aprimorado”, afirma Carlos Ceccone, analista de projetos do W3C.

Aplicações baseadas na web também serão mais ágeis, pois menos dados serão requisitados de servidores. O HTML 5 inclui a possibilidade de inserir APIs dentro do código. O acesso local às informações facilitará funções de cache, busca e o acesso off-line de serviços da web. O plugin Google Gears, por exemplo, já é compatível com HTML 5, assim como o Adobe Air. Mas o grande burburinho começou após a apresentação do novo Gmail para dispostivos móveis que já utiliza recursos do HTML5, como pode ser visto na apresentação do VP de engenharia do Google, Vic gundotra.

Diniz também atenta para a limpeza do código. Uma mesma página escrita em HTML 5 será bem mais simples do que a em HTML 4. Para o desenvolvedor, ficará muito mais simples de programar. É possível ver uma comparação de uma página de um blog escrita nas duas versões da linguagem no site Hobo Web.

Outra novidade é a incorporação de funcionalidades de tecnologias para gráficos dinâmicos, como o Flash e o Silverlight. Será possível criar animações com gráficos vetoriais diretamente no código, com o uso da tag <canvas&gt. A web semântica também começa a aparecer no HTML 5 – em vez de enxergar um elemento título, legenda ou parágrafo, a linguagem conseguirá interpretar o conteúdo que está naquela caixa de texto.

Navegadores compatíveis

Mas não basta o padrão HTML chegar em sua versão 5 e os browsers não se adequerem para conseguir a renderização completa das novas funcionalidades. A página na Wikipedia lista não só as novidades do HTML 5, como mostra qual ferramenta já faz a renderização adequada das novidades.

Cada browser tem seu engine ou adota um já existente. O Internet Explorer, inclusive na recente versão 8, utiliza o Trident. O Gecko, da fundação Mozilla, é utilizado pelo browser Firefox, entre outros; o WebKit, desenvolvido pela Apple a partir do engine de código aberto KHTML, é usado no Safári, no Google Chrome e nos celulares Nokia. Já o Presto é a ferramenta do Opera.

O W3C disponibiliza regurlarmente um estudo com comparações entre HTML 4 e 5, na medida em que a recomendação HTML 5 avança.

Fonte

Deixe um comentário

Arquivado em Acessibilidade na internet, Arquitetura da Informação, Browsers, Tecnologia e sistemas, Usabilidade na internet, XHTML

WEB 3.0 – A terceira geração da internet

O que via acontecer?

O que via acontecer?

Na nova internet, os computadores poderão compreender o significado de textos e imagens para adivinhar o que você quer.

O início, a web era marcada por sites estáticos, sem interação com os usuários. A primeira grande mudança na forma em que usamos a internet veio com a larga aplicação de sites de comércio eletrônico. Assim, a rede passou a nos oferecer produtos e serviços. Depois veio a fase dos sites de relacionamento e compartilhamento de conteúdos (web 2.0).

Esse cenário nos colocou em uma situação muito complicada: Como organizar a imensa vastidão de conteúdo que se tornou a internet, de forma simples, eficiente e focada em nossas necessidades?

Web Semântica ou 3.0

Web Semântica ou 3.0

A resposta para esta questão é a “web semântica” – ou, se preferir, a web 3.0.

A principal aplicação da web semântica se refere à capacidade de os sistemas computacionais interpretarem o conteúdo disponível nos sites da internet e conseguir entender de forma diferenciada uma página em que a palavra bala é um doce ou é um projétil de armas. Ou seja, o conteúdo é interpretado de acordo com seu contexto. A forma com o que os sistemas irão executar esse rastreamento e interpretação será com base em mudanças na forma com que as páginas são construídas.

Parece um conceito simples, não? Mas não é tão simples assim. A forma com que essa evolução será conduzida ainda não é totalmente clara, mas é espetacular imaginar esse novo horizonte em nosso dia-a-dia.

Mais que um simples entendimento de palavras soltas – como o exemplo da bala – a web semântica poderá (e deverá) levar em conta cada usuário de forma individual, traçando perfis e procurando entregar ao usuário exatamente aquilo que ele quer, com base no que os sistemas de informação conhecem de seu comportamento.

Um exemplo: Alguém entra em seu mecanismo de busca favorito, procura por hospedagem em Florianópolis. O mecanismo reconhece o usuário, sabe que tem dois filhos pequenos, então irá priorizar no resultado hotéis e pousadas que tenham opções de lazer para crianças.

A web semântica também terá aplicações relacionadas a mídias – publicidade – e serviços. As propagandas apresentadas aos usuários poderão ser direcionadas pela sua localização. Através da integração de sistemas GPS à internet, a propaganda poderá ser direcionada a anunciantes que atendem naquela região. Por exemplo: Você está em casa, e a propaganda da academia do seu bairro aparece quando você está lendo noticias de boa forma em um blog ou site.

Aliás, é importante dizer que a web da qual falo não é apenas esta que acessamos através de um computador – cada vez mais outros equipamentos passam a estar também on-line. Nossos celulares já são minicomputadores portáteis capazes de acessar praticamente todos os serviços na internet. A dimensão da aplicabilidade de uma web totalmente focada no usuário, que leva em consideração fatores como onde o usuário está e o que ele está fazendo (comprando, viajando, andando no parque) é imensa.

Essa nova internet pode não estar tão distante de nós. A compreensão dos profissionais quanto à aplicabilidade das tecnologias para tornar o conteúdo plausível de interpretação por parte dos sistemas está cada vez mais difundida.

Claro que existe um trabalho muito grande para tornar a codificação das páginas acessíveis aos servidores que irão interpretar seus conteúdos e principalmente os serviços que poderão integrar os conteúdos com o perfil de quem os acessa.
Não vou entrar em uma discussão sobre a ética e os limites da nova web com relação a nossa privacidade. Claro que isso deverá ser alvo de muitas discussões e deverão em muitos momentos balizar as decisões de como estas novas tecnologias serão aplicadas.

O que é importante é termos consciência dessa evolução que vem acontecendo diante de nossos olhos e irá causar impacto em nossas vidas em breve.

Deixe um comentário

Arquivado em Acessibilidade na internet, Arquitetura da Informação, Tecnologia e sistemas, Usabilidade na internet

Como criar Protótipos Interativos com o Visio

visioSe você irá mostrar a um cliente o desenho do site em um papel, sabe o valor de apresentá-lo em uma versão interativa com links. Os usuários do Visio sabem que é muito simples criar protótipos interativos em HTML a partir de um set de Wireframes (Arquivo > Salvar como página Web).

Mas dessa forma ocorre uma desvantagem se você precisar enviar esses arquivos por e-mail, pois dependendo da complexidade do projeto, serão criados muitos arquivos HTML e várias imagens.

Os PDF’s são ideais para serem enviados por e-mail, mas leva-se tempo para criar protótipos interativos em PDF com o Visio. Abaixo você verá um tutorial de como fazer isso:

1.

Crie links nas páginas de primeiro plano, não nas de segundo plano – utilize os stencils do documento para gerenciar suas modificações.
É uma pratica habitual quando se cria wireframes no Visio colocar os elementos standard das páginas – topo, conteúdo, navegação – em uma página de fundo (background), assim os elementos se repetem em cada página de primeiro plano (foreground). De qualquer forma, quando publicado em PDF, o Visio não cria links para as camadas de background. Para criar protótipos interativos em PDF eles devem estar na página em primeiro plano. Isso significa que para uma distribuição de página standard, todos os elementos de navegação devem estar em cada página do wireframe. Poderia-se copiar e colar os elementos de navegação em cada página, mas isso seria um trabalho duro. Ao invés disso, utilize os stencils do documento. Funciona assim:

  • 1.1 – Crie um painel de navegação, utilizando uma forma distinta para cada link. Por exemplo, para criar 5 abas na parte superior da página, cosntrua cada aba em um bloco de texto separado.
  • 1.2 – Para adicionar links, aperte CTRL + K para abrir o quadro de diálogos de links. Depois de adicionar o Sub-link (não o link direto), clique em browse (examinar) e encontre a página que está seu wireframe, ao qual deseja linkar (ou introduza a URL).
  • 1.3 – Repita o primeiro e o segundo passo sempre que necessário. Uma vez que estiver pronto o painel de navegação, agrupeo (selecione todos os elementos, e aperte Shift+CTRL+G).
  • 1.4 – Abra os Stencils do documento: Arquivo > Formas > Mostrar Stencils do documento.
  • 1.5 – Arraste os elementos agrupados de navegação ao painel de Stencils.
  • 1.6 – Clique com o botão direito sobre o grupo de elementos e renomeios (por exemplo: “NavBar”).
  • 1.7 – Em cada página de seu wireframe, arraste oe elementos sobre a página de primeiro plano e os coloque em sua posição.
  • 1.8 – Se necessitar fazer modificações no grupo de navegação, clique com o botão direito sobre o Stencil do documento, e selecione Edição Mestre > Edição de forma Mestre. Qualquer modificação feita será atualizada automaticamente em qualquer página.

2.

Utilize o menu PDF no Visio, ao invés de imprimir através do Adobe PDF no menu de impressão.
Para que os links do PDF funcionem, utilize o menu PDF no Visio (Adobe PDF > Converter para Adobe PDF). Por alguma razão, se utilizar Arquivo > Imprimir e escolher Adobe PDF como impressora, os links do PDF não funcionam.
O resultado final será links funcionando em cada página. Para alterar os estados dos botões ou criar outros elementos interativos, é necessário editar os arquivos no Acrobat

Leve-o ao nível seguinte.
Esse artigo de Boxes & Arrows é uma fantástica revisão de como criar protótipos em PDF clicáveis com camadas, multimídia e muito mais. Foi centrado no uso avançado das ferramentas de edição do Acrobat.

Fonte

Deixe um comentário

Arquivado em Arquitetura da Informação

Como se faz um site?

A Volkswagen nos mostra em um vídeo publicitário como foi feito o novo site da volkswagen.co.uk.

Vídeo rápido e muito interessante, perca 1 minuto do seu tempo:

Deixe um comentário

Arquivado em Arquitetura da Informação