Este documento apresenta as seguintes informações: 1) O roteiro da apresentação inclui introdução, revisão da literatura, apresentação de regras, aplicação das regras, testes com dispositivos e usuários e tendências futuras. 2) Fornece dados sobre o acesso móvel na China, África e Brasil. 3) A solução proposta consiste em desenvolver um portal capaz de adaptar conteúdos a diferentes dispositivos a partir de uma única URL.

1. 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

2. 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.

3. 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

4. Pesquisa Nokia
How Consumers Really Use Smartphones
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

5. Realidade na China
Acesso a web dos
usuários de
telefones móveis:
340 milhões
X
Acesso a web dos
usuários de
dispositivos fixos:
98 milhões
3x1

6. Realidade na África
Acesso a web dos
usuários de
telefones móveis:
28 milhões
X
Acesso a web dos
usuários de
dispositivos fixos:
4 milhões
7x1

7. Usuários de tel. celular no Brasil

8. Demanda x Inovação

9. Dispositivos fixos e móveis
acessam a Internet

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

11. Possibilidade de Solução

12. Uma das soluções adotadas...
URL 1 URL 2
URL 1 URL 2
URL 3
URL 3
URLs distintas para cada tipo de dispositivo

13. Dificuldades que esta abordagem
pode gerar
Redundância de dados;
Inconsistência de dados;
Dupla ou tripla manutenção URL 1 URL 2
dos portais; e URL 1 URL 2
Influência na preferência do URL 3
usuário por um ou outro URL 3
portal.

14. 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.

15. 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.

16. 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.

17. 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.

18. Revisão da Literatura
Microportal
Uma pequena versão de um portal e tem
essencialmente o mesmo significado de um portal; e
Uma aplicação baseada na web, que é essencialmente
uma pequena versão de um portal, voltado
exclusivamente para dispositivos móveis.

19. Revisão da Literatura
Aplicações Acadêmicas;
Aplicações de Mercado:

20. Microportal do Projeto
m-Learning
Projeto Europeu;
Voltado para jovens de 16 a 24 anos;
Alunos com necessidades de
alfabetização; e
Fora do ambiente formal de
aprendizagem.

21. 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; e
Deve ser atualizado todas as vezes que
um novo dispositivo surge no
mercado.

22. Aparelhos celulares

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

24. Portal Educativo
Projeto 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.

25. Aplicação Acadêmica
Solução 2
Oferecer apenas algumas informações para
dispositivos móveis.

26. Portal e Microportal Corporativo
http://www.palmsource.com/index.html
http://www.palmsource.com/lite/main.cgi

27. Abordagem de desenvolvimento
adotada pelo mercado
URLs distintas para cada tipo de dispositivo

28. Esquema da Solução Escolhida
URL
ÚNICA
Uma única URL para todos os dispositivos

29. 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.

30. One Web Vision
segue em direção a
UMA WEB:
• de dados e serviços;
• em tudo; e
• para todos.

31. Regras práticas para desenvolvimento
de 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; e
Regras para o uso de imagens.

32. Regras para escolha de
conteúdos
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].
[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.

33. Regras para escolha de
conteúdos
Adequabilidade;
Clareza;
Limitações;
Consistência Temática; e
Significado central.

34. Regras para aproveitamento de
espaço
Faça um planejamento do leiaute [1];
Evite desperdício de espaço [2]; e
Mantenha 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.

35. Regras para codificação
Investigar quais são as tags suportadas pelo browser
do 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.

36. Regras para codificação
• Códigos válidos;
• Recursos externos;
• Cookies;
• Scripts e objetos; e
• Textos Alternativos.

37. 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.

38. 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.

39. 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.

40. 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.
.

41. 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]; e
Evite 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.

42. Regras para uso de imagens
Imagens mapeadas;
Imagens de fundo legíveis;
Imagens extensas;
Tamanho da imagem;
Redimensionamento de imagem.

43. Estudo de Caso
Portal do Curso FIS-25

44. Modelagem do Sistema

45. 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; e
Testes de objetos de aprendizagem com Flash.

46. 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.

47. Testes com Pocket PC

48. Testes com Palm

49. Testes com Telefones Celulares

50. Testes com Telefones Celulares

51. Testes com Telefones Celulares

52. Testes com Desktops

53. 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.

54. 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.

55. Comparações entre as Soluções
Em relação a solução de arquivar em
um banco de dados as características
dos 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.

56. 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ção
independente do dispositivo que esteja
utilizando.

57. Testes com usuários
Teste elaborado por Anne Kaikkonen, da Nokia Corporation
IEEE – 2nd International Conference on Mobile Technology
O Teste visa encontrar problemas de usabilidade em portais móveis.

58. Testes com usuários
O usuário pode acessar facilmente a página principal do portal?
a. ( ) Sim
b. ( ) Não
Comente se necessário
Questão 6
100%
80%
60%
Percentual
40%
20%
0%
Sim Não
Respostas

59. Testes com usuários
O usuário pode facilmente entender o conteúdo da página?
a. ( ) Sim
b. ( ) Não
Comente se necessário
Questão 12
100%
80%
60%
Percentual
40%
20%
0%
Sim Não
Respostas

60. 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
Questão 10
100%
80%
60%
Percentual
40%
20%
0%
Sim Não
Respostas

61. Testes com usuários
Baixar um conteúdo é um processo fácil de se entender?
a. ( ) Sim
b. ( ) Não
Comente se necessário
Questão 7
100%
80%
60%
Percentual
40%
20%
0%
Sim Não
Respostas

62. 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
Questão 9
100%
80%
60%
Percentual
40%
20%
0%
Sim Não
Respostas

63. 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.

64. Principais Contribuições
As Regras aqui apresentadas foram
aplicadas e testadas com sucesso e
contribuem da seguinte forma:
O uso das regras propiciam um único
desenvolvimento 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; e
Propicia ao usuário a mesma experiência,
inclusive os mesmos dados em qualquer
dispositivo.

65. 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.

66. 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.

67. 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.

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

69. Perspectivas
Perspectivas para a web móvel.
Fonte:
Google - W3C Workshop on the Mobile Web in Developing Countries
December 5-6, 2006

70. Recomendações e Sugestões para
Trabalhos Futuros
Criação de aplicativos e objetos de aprendizagem
utilizando 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; e
Inclusão de recursos de ajuda.

71. Obrigada!