Regras práticas para apresentação de páginas web
          em dispositivos fixos e móveis.
Maria Luisa Lopes de Faria   Or...
Roteiro da Apresentação

Introdução;
Revisão da Literatura;
Apresentação das Regras;
Aplicação das Regras;
Testes com disp...
Dados divulgados pelo MIT
                 No mundo inteiro há
                 mais de 2.4 bilhões de
                 us...
Pesquisa Nokia
How Consumers Really Use Smartphones

                                  Pesquisa com 400 usuários
         ...
Realidade na China
               Acesso a web dos
               usuários de
               telefones móveis:

          ...
Realidade na África
                Acesso a web dos
                usuários de
                telefones móveis:

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

                    ...
Dificuldades que esta abordagem
                   pode gerar


Redundância de dados;
Inconsistência de dados;
Dupla ou tr...
Enunciado do Problema

 O problema endereçado neste trabalho de
pesquisa consiste em investigar uma proposta
para o desenv...
Solução Escolhida

A solução escolhida consiste em
investigar e apresentar um
conjunto      de    regras    para
desenvolv...
Estudo de Caso


      Como estudo de caso, o
      portal desenvolvido neste
      trabalho    de     pesquisa
      exib...
Mobile Learning


    O Mobile Learning é definido
    como uma aprendizagem que
    ocorre por meio de dispositivos
    m...
Revisão da Literatura

Microportal
  Uma pequena versão de um portal e tem
  essencialmente o mesmo significado de um port...
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    n...
Microportal do Projeto
     m-Learning
   Buscou-se arquivar em um banco de
   dados as diferentes características dos
   ...
Aparelhos celulares
Aplicação Acadêmica

Solução 1:
  Arquivar em um Banco de Dados as diferentes
  características dos dispositivos.
Portal Educativo
Projeto mobiDIAK - Hungria



       Uma grande quantidade de
       conteúdos educacionais foi
       de...
Aplicação Acadêmica

Solução 2
  Oferecer apenas algumas informações para
  dispositivos móveis.
Portal e Microportal Corporativo
http://www.palmsource.com/index.html




                            http://www.palmsourc...
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 dispositiv...
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...
One Web Vision


segue em direção a
UMA WEB:
• de dados e serviços;
• em tudo; e
• para todos.
Regras práticas para desenvolvimento
              de portais

As regras encontram-se organizadas dentro
dos seguintes tóp...
Regras para escolha de
                                 conteúdos
      Estabeleça qual é o público alvo do portal [1];
  ...
Regras para escolha de
              conteúdos


Adequabilidade;
Clareza;
Limitações;
Consistência Temática; e
Significado...
Regras para aproveitamento de
                        espaço
         Faça um planejamento do leiaute [1];
         Evite ...
Regras para codificação

   Investigar quais são as tags suportadas pelo browser
   do seu principal cliente [1][3][4] (An...
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...
Regras para design de leiautes


Barra de Navegações; Navegação;
Equilíbrio;
Formato dos Links;
Pop-up, auto-refresh, redi...
Regras para uso de textos
          fontes e cores


Uso de cores;
Contraste de cores;
Suporte para codificação de caracte...
Regras para uso de tabelas

          Não use tabelas [1].




          Não use tabelas!

[1] HOW to Create Handheld Frie...
Regras para uso de imagem
        Use imagens cujo significado seja óbvio [3];
        Mantenha as imagens pequenas e simp...
Regras para uso de imagens



Imagens mapeadas;
Imagens de fundo legíveis;
Imagens extensas;
Tamanho da imagem;
Redimensio...
Estudo de Caso
Portal 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 c...
Testes com dispositivos

Em conformidade com as recomendações da
W3C.
Visaram demonstrar que os dispositivos
acessam as pá...
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 ut...
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...
Comparações entre as Soluções

     Em relação a solução de arquivar em
     um banco de dados as características
     dos...
Comparações entre as Soluções

Em relação a solução de oferecer apenas
algumas informações para dispositivos
móveis:
  Pro...
Testes com usuários

  Teste elaborado por Anne Kaikkonen, da Nokia Corporation
  IEEE – 2nd International Conference on M...
Testes com usuários

O usuário pode acessar facilmente a página principal do portal?
a.   ( ) Sim
b.    ( ) Não
Comente se...
Testes com usuários

O usuário pode facilmente entender o conteúdo da página?
a.   ( ) Sim
b.   ( ) Não
Comente se necessá...
Testes com usuários

O conteúdo da página encontra-se organizado em um caminho lógico?
a.   ( ) Sim
b.   ( ) Não
Comente s...
Testes com usuários

Baixar um conteúdo é um processo fácil de se entender?
a.   ( ) Sim
b.   ( ) Não
Comente se necessári...
Testes com usuários

Há passos desnecessários que aumentam o número de clicks e o tamanho do
    processo?
a.   ( ) Sim
b....
Resultados dos Testes com
                  Usuários
Alto índice de aprovação dos usuários;
Os usuários requisitaram a inc...
Principais Contribuições

As Regras aqui apresentadas foram
aplicadas e testadas com sucesso e
contribuem da seguinte form...
Principais Conclusões

A aplicação das regras no desenvolvimento de
portais adaptativos, propiciou o acesso das
páginas we...
Principais Conclusões

Os dispositivos que acessaram as páginas
web do portal, possuíam diferentes versões
de browser e de...
Principais Conclusões

Os usuários que participaram dos testes, navegando
pelo portal a partir de seus dispositivos, relat...
Perspectivas




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




Fonte:
Google - W3C Workshop on the Mobile Web in Devel...
Recomendações e Sugestões para
          Trabalhos Futuros

Criação de aplicativos e objetos de aprendizagem
utilizando so...
Obrigada!
Próximos SlideShares
Carregando em…5
×

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

579 visualizações

Publicada em

Tese de Mestrado apresentada no ITA, contém regras para publicação de conteúdos WEB em celulares, smartphones, Ipad, netbooks, notebooks, desktops e etc.

Publicada em: Tecnologia, Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
579
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

  1. 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. 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. 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. 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. 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. 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. 7. Usuários de tel. celular no Brasil
  8. 8. Demanda x Inovação
  9. 9. Dispositivos fixos e móveis acessam a Internet
  10. 10. Usuários acessando internet através de dispositivos móveis
  11. 11. Possibilidade de Solução
  12. 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. 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. 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. 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. 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. 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. 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. 19. Revisão da Literatura Aplicações Acadêmicas; Aplicações de Mercado:
  20. 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. 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. 22. Aparelhos celulares
  23. 23. Aplicação Acadêmica Solução 1: Arquivar em um Banco de Dados as diferentes características dos dispositivos.
  24. 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. 25. Aplicação Acadêmica Solução 2 Oferecer apenas algumas informações para dispositivos móveis.
  26. 26. Portal e Microportal Corporativo http://www.palmsource.com/index.html http://www.palmsource.com/lite/main.cgi
  27. 27. Abordagem de desenvolvimento adotada pelo mercado URLs distintas para cada tipo de dispositivo
  28. 28. Esquema da Solução Escolhida URL ÚNICA Uma única URL para todos os dispositivos
  29. 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. 30. One Web Vision segue em direção a UMA WEB: • de dados e serviços; • em tudo; e • para todos.
  31. 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. 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. 33. Regras para escolha de conteúdos Adequabilidade; Clareza; Limitações; Consistência Temática; e Significado central.
  34. 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. 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. 36. Regras para codificação • Códigos válidos; • Recursos externos; • Cookies; • Scripts e objetos; e • Textos Alternativos.
  37. 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. 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. 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. 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. 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. 42. Regras para uso de imagens Imagens mapeadas; Imagens de fundo legíveis; Imagens extensas; Tamanho da imagem; Redimensionamento de imagem.
  43. 43. Estudo de Caso Portal do Curso FIS-25
  44. 44. Modelagem do Sistema
  45. 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. 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. 47. Testes com Pocket PC
  48. 48. Testes com Palm
  49. 49. Testes com Telefones Celulares
  50. 50. Testes com Telefones Celulares
  51. 51. Testes com Telefones Celulares
  52. 52. Testes com Desktops
  53. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 68. Perspectivas Fonte: MIT - W3C Workshop on the Mobile Web in Developing Countries - December 5-6, 2006
  69. 69. Perspectivas Perspectivas para a web móvel. Fonte: Google - W3C Workshop on the Mobile Web in Developing Countries December 5-6, 2006
  70. 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. 71. Obrigada!

×