Regras práticas para apresentação de páginas web em dispositivos fixos e móveis.

Maria Luisa Lopes de Faria Orientador: Prof. Dr. José Silvério Edmundo Germano

Roteiro da Apresentação

Introdução;Revisão da Literatura;Apresentação das Regras;Aplicação das Regras;Testes com dispositivos e com usuários;Tendências e Perspectivas para os próximos anos;Conclusões Recomendações e Sugestões para Trabalhos Futuros.

Dados divulgados pelo MIT

No mundo inteiro há mais de 2.4 bilhões de usuários de celular;

59% destes 2.4 bilhões vivem em paises em desenvolvimento tornando os celulares a 1ª tecnologia de telecomunicações a ter mais usuários que nos países desenvolvidos.

Natham Eagle, PhD

Pesquisa Nokia

Pesquisa com 400 usuários no Reino Unido, Alemanha, Singapura e países desenvolvidos;

63% dos dados provém da navegação na web.

Fonte: Esa Eerola (2005) Nokia

How Consumers Really Use Smartphones

Realidade na China

Acesso a web dos usuários de telefones móveis:

340 milhõesX

Acesso a web dos usuários de dispositivos fixos:

98 milhões

3 x 1

Realidade na ÁfricaAcesso a web dos usuários de telefones móveis:

28 milhõesX

Acesso a web dos usuários de dispositivos fixos:

4 milhões

7 x 1

Usuários de tel. celular no Brasil

Demanda x Inovação

Dispositivos fixos e móveis acessam a Internet

Usuários acessando internet através de dispositivos móveis

Possibilidade de Solução

Uma das soluções adotadas...

URL 1 URL 2

URL 3

URLs distintas para cada tipo de dispositivo

URL 1

URL 3

URL 2

Dificuldades que esta abordagem pode gerar

Redundância de dados;Inconsistência de dados;Dupla ou tripla manutenção dos portais; e Influência na preferência do usuário por um ou outro portal.

URL 1 URL 2

URL 3

URL 1

URL 3

URL 2

Enunciado do Problema

O problema endereçado neste trabalho de pesquisa consiste em investigar uma proposta para o desenvolvimento de portais capaz de adaptar conteúdos web à maior parte dos dispositivos – desktops, palmtops e telefones celulares - a partir de uma única URL, de forma a otimizar a manutenção de dados e eliminar redundâncias ou inconsistências de informações.

Solução Escolhida

A solução escolhida consiste em investigar e apresentar um conjunto de regras para desenvolver um portal, que seja capaz de adaptar conteúdos web àmaior parte dos dispositivos (desktop, palmtop e telefone celular), propiciando aos alunos e usuários em geral, a oportunidade de acesso a informações em qualquer tempo e lugar, a partir de uma única URL.

Estudo de Caso

Como estudo de caso, o portal desenvolvido neste trabalho de pesquisa exibirá conteúdos da disciplina FIS25 –Mecânica II, inserindo este trabalho no contexto de Mobile Learning.

Mobile Learning

O Mobile Learning é definido como uma aprendizagem que ocorre por meio de dispositivos móveis. Um fator que diferencia Mobile Learning de outras formas de aprendizagem é o uso de tecnologias móveis como auxílio no processo de aprendizagem.

Revisão da Literatura

MicroportalUma pequena versão de um portal e tem essencialmente o mesmo significado de um portal; eUma aplicação baseada na web, que é essencialmente uma pequena versão de um portal, voltado exclusivamente para dispositivos móveis.

Revisão da Literatura

Aplicações Acadêmicas;Aplicações de Mercado:

Microportal do Projeto m-Learning

Projeto Europeu;Voltado para jovens de 16 a 24 anos;Alunos com necessidades de alfabetização; eFora do ambiente formal de aprendizagem.

Microportal do Projeto m-Learning

Buscou-se arquivar em um banco de dados as diferentes características dos dispositivos;Estas características são recuperadas caca vez que um determinado dispositivo acessa o microportal;Há um conjunto de aplicativos para escrever e manter; eDeve ser atualizado todas as vezes que um novo dispositivo surge no mercado.

Aparelhos celulares

Aplicação Acadêmica

Solução 1:Arquivar em um Banco de Dados as diferentes características dos dispositivos.

Portal EducativoProjeto mobiDIAK - Hungria

Uma grande quantidade de conteúdos educacionais foi desenvolvida para o portal;Apenas algumas informações são disponibilizadas para usuários que possuem telefones wap.

Aplicação Acadêmica

Solução 2Oferecer apenas algumas informações para dispositivos móveis.

Portal e Microportal Corporativo

http://www.palmsource.com/index.html

http://www.palmsource.com/lite/main.cgi

Abordagem de desenvolvimento adotada pelo mercado

URLs distintas para cada tipo de dispositivo

Esquema da Solução Escolhida

URL ÚNICA

Uma única URL para todos os dispositivos

A W3C não recomenda o conceito de duas webs;A visão “One Web” visa:

Definir um conjunto de melhores práticas que quando seguidas por autores e desenvolvedores são capazes de tornar os conteúdos acessíveis para usuários de dispositivos fixos e móveis.Fazer tudo o que for possível para que a mesma informação e serviço sejam disponibilizadas para os usuários independente do dispositivo que ele esteja utilizando.

segue em direção a UMA WEB:

• de dados e serviços;

• em tudo; e

• para todos.

One Web Vision

Regras práticas para desenvolvimentode portais

As regras encontram-se organizadas dentro dos seguintes tópicos:

Regras para escolha de conteúdo;Regras para aproveitamento de espaço;Regras para codificação;Regras para o design de leiautes;Regras para o uso de textos, fontes e cores;Regras para o uso de tabelas; eRegras para o uso de imagens.

Estabeleça qual é o público alvo do portal [1];Estabeleça que tipo de informação é mais importante para o público alvo [1]; Comece com poucas informações e seja seletivo [2];Mantenha as páginas curtas e simples [3][4]; e Mantenha o foco no conteúdo e não no tamanho das telas [3][1].

Regras para escolha de conteúdos

[1] XHTML in Mobile Application Development.INTERNATIONAL SYMPOSIUM ON MOBILE HUMAN-COMPUTER INTERACTION.

[2] WAP Usability Report. By Jakob Nielsen and Mark Ramsay.

[3] HOW to Create Handheld Friendly Web Pages. University of Iowa - Information Technology Services

[4] Evaluating Interface Design Choices on WAP Phones: Single-choice List Selection and Navigation among Cards. International Workshop on Human Computer Interaction.

Regras para escolha de conteúdos

Adequabilidade;Clareza;Limitações;Consistência Temática; eSignificado central.

Regras para aproveitamento de espaço

Faça um planejamento do leiaute [1];Evite desperdício de espaço [2]; eMantenha as informações concisas e elegantemente organizadas [1].

[1] XHTML in Mobile Application Development. INTERNATIONAL SYMPOSIUM ON MOBILE HUMAN-COMPUTER INTERACTION

[2] Evaluating Interface Design Choices on WAP Phones: Single-choice List Selection and Navigation among Cards. International Workshop on Human Computer Interaction.

Regras para codificação

Investigar quais são as tags suportadas pelo browserdo seu principal cliente [1][3][4] (Anexo B);Remover todo código HTML não essencial [2];Incluir nas páginas a meta-tag <META NAME=“Handheldfliendly” content =“True”> [2].

[1] XHTML in Mobile Application Development.INTERNATIONAL SYMPOSIUM ON MOBILE HUMAN-COMPUTER INTERACTION.

[2] HOW to Create Handheld Friendly Web Pages. University of Iowa - Information Technology Services

[3] About AvantGo. AvantGo Portal.

[4] DESIGNING Web Sites for the Internet Explorer for Pocket PC. MSDN / Microsoft Portal.

Regras para codificação

• Códigos válidos;

• Recursos externos;

• Cookies;

• Scripts e objetos; e

• Textos Alternativos.

Regras para o design de leiautes

Use hyperlinks para a navegação [1][2];Use também outros mecanismos (access key) [2];Descreva no atributo ALT os elementos que não estejam em formato de texto [1].

[1] HOW to Create Handheld Friendly Web Pages. University of Iowa - Information Technology Services.

[2] Usability Problems in Today's Mobile Internet Portals. IEEE - 2nd International Conference on Mobile Technology, Applications and Systems.

Regras para design de leiautes

Barra de Navegações; Navegação;Equilíbrio;Formato dos Links;Pop-up, auto-refresh, redirecionamento;Tamanho da página (Limite);Rolagem de Tela, gráficos para espaçamento;Título da Página e Frames.

Regras para uso de textos fontes e cores

Uso de cores;Contraste de cores;Suporte para codificação de caracteres;Uso de caracteres codificados;Mensagens de erro;Fontes.

Regras para uso de tabelas

Não use tabelas [1].

Não use tabelas!

[1] HOW to Create Handheld Friendly Web Pages. University of Iowa -Information Technology Services.

.

Regras para uso de imagem

Use imagens cujo significado seja óbvio [3];Mantenha as imagens pequenas e simples [1];Converta as imagens com cuidado [1];Desenhe suas próprias imagens [1]; eEvite imagens largas e detalhadas [2].

[1] XHTML in Mobile Application Development.INTERNATIONAL SYMPOSIUM ON MOBILE HUMAN-COMPUTER INTERACTION.

[2] About AvantGo. AvantGo Portal.

[3] Evaluating Interface Design Choices on WAP Phones: Single-choice List Selection and Navigation among Cards. International Workshop on Human Computer Interaction.

Regras para uso de imagens

Imagens mapeadas;Imagens de fundo legíveis;Imagens extensas;Tamanho da imagem;Redimensionamento de imagem.

Estudo de CasoPortal do Curso FIS-25

Modelagem do Sistema

Implementação

Utilização da linguagem HTML 4.01;Reutilização de Material didático;Aplicação de todas as Regras;Testes com dispositivos e com usuários; eTestes de objetos de aprendizagem com Flash.

Testes com dispositivos

Em conformidade com as recomendações da W3C.Visaram demonstrar que os dispositivos acessam as páginas desenvolvidas a partir de uma única URL, conforme proposto no Enunciado da Solução.

Testes com Pocket PC

Testes com Palm

Testes com Telefones Celulares

Testes com Telefones Celulares

Testes com Telefones Celulares

Testes com Desktops

Resultado dos Testes com dispositivos

As páginas do portal foram acessadas por todos os dispositivos utilizando uma única URL;Os dispositivos que acessaram as páginas web do portal, possuíam diferentes versões de browser e de sistema operacional, e mesmo assim não foram registrados erros ou falhas durante a navegação dos usuários.

Comparações entre as Soluções

Em relação a disponibilização de URLs distintas:O trabalho segue a visão “One Web” da W3C;Propicia um único desenvolvimento de páginas web;Propicia aos desenvolvedores maior facilidade no desenvolvimento e manutenção de informações.

Em relação a solução de arquivar em um banco de dados as característicasdos dispositivos:

Evita que o desenvolvedor tenha que escrever e manter um vasto conjunto de aplicativos;Evita que o desenvolvedor tenha que atualizar o sistema cada vez que surge um novo dispositivo no mercado.

Comparações entre as Soluções

Em relação a solução de oferecer apenas algumas informações para dispositivos móveis:

Propicia a mesma experiência, inclusive os mesmos dados em qualquer dispositivo;O usuário obterá a mesma informaçãoindependente do dispositivo que esteja utilizando.

Comparações entre as Soluções

Testes com usuários

O Teste visa encontrar problemas de usabilidade em portais móveis.

Teste elaborado por Anne Kaikkonen, da Nokia Corporation IEEE – 2nd International Conference on Mobile Technology

Testes com usuários

0%20%40%60%80%

100%

Percentual

Sim Não

Respostas

Questão 6

O usuário pode acessar facilmente a página principal do portal?

a. ( ) Sim

b. ( ) Não

Comente se necessário

Testes com usuários

0%20%40%60%80%

100%

Percentual

Sim Não

Respostas

Questão 12

O usuário pode facilmente entender o conteúdo da página?

a. ( ) Sim

b. ( ) Não

Comente se necessário

Testes com usuários

O conteúdo da página encontra-se organizado em um caminho lógico?

a. ( ) Sim

b. ( ) Não

Comente se necessário

0%20%40%60%80%

100%

Percentual

Sim Não

Respostas

Questão 10

Testes com usuários

Baixar um conteúdo é um processo fácil de se entender?

a. ( ) Sim

b. ( ) Não

Comente se necessário

0%20%40%60%80%

100%

Percentual

Sim Não

Respostas

Questão 7

Testes com usuários

Há passos desnecessários que aumentam o número de clicks e o tamanho do processo?

a. ( ) Sim

b. ( ) Não

Comente se necessário

0%20%40%60%80%

100%

Percentual

Sim Não

Respostas

Questão 9

Resultados dos Testes com Usuários

Alto índice de aprovação dos usuários;Os usuários requisitaram a inclusão de itens como “Mecanismos de Procura” e “Ajuda”;Todos os dispositivos dos usuários acessaram as páginas web.

Principais Contribuições

As Regras aqui apresentadas foram aplicadas e testadas com sucesso e contribuem da seguinte forma:O uso das regras propiciam um únicodesenvolvimento de páginas web;Esta abordagem evita redundâncias ou inconsistências de dados nos portais; Propicia aos desenvolvedores maior facilidade na atualização e manutenção das informações; ePropicia ao usuário a mesma experiência, inclusive os mesmos dados em qualquer dispositivo.

Principais Conclusões

A aplicação das regras no desenvolvimento de portais adaptativos, propiciou o acesso das páginas web em diversos dispositivos; as páginas foram acessadas por telefones celulares, smartphones, pdas e desktops.

Principais Conclusões

Os dispositivos que acessaram as páginas web do portal, possuíam diferentes versões de browser e de sistema operacional, e mesmo assim não foram registrados erros ou falhas durante a navegação dos usuários.

Principais Conclusões

Os usuários que participaram dos testes, navegando pelo portal a partir de seus dispositivos, relataram que a navegação foi fácil e que o conteúdo foi bem adaptado para o ambiente de web móvel.Na opinião dos usuários, as informações apresentaram-se bem organizadas, dentro dos limites da tela dos respectivos dispositivos.

Perspectivas

Fonte: MIT - W3C Workshop on the Mobile Web in Developing Countries - December 5-6, 2006

Perspectivas

Perspectivas para a web móvel.

Google - W3C Workshop on the Mobile Web in Developing CountriesDecember 5-6, 2006

Fonte:

Recomendações e Sugestões para Trabalhos Futuros

Criação de aplicativos e objetos de aprendizagemutilizando softwares como Macromedia Flash 8 e o Flash Lite;Desenvolvimento de testes online que permitam uma interatividade com os alunos;Inclusão de um mecanismo de procura; eInclusão de recursos de ajuda.

Obrigada!