Meteo Técnico Redesenho (Responsivo)

(1)

i

Meteo Técnico Redesenho (Responsivo)

João André Seixas Bastos

Dissertação para obtenção do Grau de Mestre em

Engenharia Informática e de Computadores

Orientador: Prof. João Manuel Brisson Lopes

Júri

Presidente: Prof. Alberto Manuel Rodrigues da Silva Orientador: Prof. João Manuel Brisson Lopes

Membros do Júri: Prof. Hugo Miguel Aleixo Albuquerque Nicolau

Setembro 2020

(2)

ii

(3)

iii

(4)

iv

Abstract

With the constant growing use of the Internet as a mean of sending information and the number of different devices to see that same information, it is crucial to think about how said information is presented and is available to the user in any type of device. From this necessity the concept of Responsive Design is born, which tries to apply for the same website a set of rules that modify said website adapting it according to the device’s characteristics, in this case, according to the size of the screen of the device and it’s orientation. This introduces the need to adapt websites that do not follow this concept making them suitable to be visualized and in a correct way in any device. Analyzing the current state of Meteo Técnico’s website and comparing it with other meteorology websites allowed us to elaborate a solution around the Responsive Design concept, maintaining all current services already available and showing information in a more appealing way to either mobile devices or desktop devices. One of the main concerns was the adaptation of the website’s structure to a vertical infinite view in mobile devices, maintaining a good information presentation on desktop devices, also having a table to show hourly data and an intuitive way to revisit already searched places, using a favorites bar. Our solution allows the website to be easily used by users with or without scientific objectives. The user now can obtain weather data in a more effective way and in diverse devices. By performing user testing we were able to prove the success of our solution and we were also able to identify potential functionalities that can be integrated in the future.

Keywords: Responsive design, mobile devices, Meteorology, MARETEC, Meteo Técnico

(5)

v

Resumo

Com a crescente utilização da Internet como meio de difusão de informação e a crescente criação de dispositivos para apresentar essa mesma informação, torna-se fulcral pensar na forma como a informação é apresentada e está disponível para o utilizador em qualquer dispositivo. Desta necessidade surge o conceito de “Design Responsivo”, o qual tenta aplicar para um único website um conjunto de regras que o modificam de acordo com as características dos diferentes dispositivos, nomeadamente a resolução e a orientação. Isto introduz a necessidade de adaptar os websites que não seguem este conceito fazendo com que os mesmos se apresentem de forma correta e também mais personalizada para cada dispositivo. Analisando o estado atual do website do Meteo Técnico e comparando-o com os demais websites de meteorologia permitiu-nos elaborar uma solução com base no “Design Responsivo”, mantendo todos os serviços já disponibilizados e mostrando a informação de forma mais simples e adaptada quer a dispositivos móveis como a dispositivos fixos.

Uma das principais preocupações foi a adaptação da estrutura do site para uma vista vertical

“infinita” em dispositivos móveis, mantendo uma boa apresentação da informação para dispositivos fixos, tendo também a preocupação de incluir uma tabela de informação horária e uma forma intuitiva de revisitar locais já pesquisados, através de uma barra de favoritos. A nossa solução permite que o website seja facilmente usado por utilizadores com objetivos não científicos e também para utilizadores que usam as previsões para fins científicos. O utilizador agora consegue consultar informações meteorológicas de forma mais eficaz e nos mais diversos dispositivos. Com a realização de testes com utilizadores pudemos comprovar o sucesso da nossa solução e permitiu identificar potenciais funcionalidades a integrar no futuro.

Palavras-Chave: Design responsivo, dispositivos móveis, Meteorologia, MARETEC, Meteo Técnico

(6)

vi

Agradecimentos

Antes de mais, gostaria de agradecer ao meu orientador de tese, o Professor João Brisson, que ao longo desta pequena grande aventura, me guiou e incentivou a realizar o melhor trabalho possível e por estar sempre disponível para esclarecer as minhas dúvidas levando este projeto a bom porto.

Em segundo lugar, quero também de agradecer ao Jorge Palma pela sua disponibilidade para me explicar como funciona o Meteo Técnico e também tudo sobre as previsões. Agradeço também pelo seu trabalho em adaptar o servidor para me fornecer os dados necessários que depois seriam apresentados pela nossa solução.

Obrigado à minha namorada por todo o apoio, incentivo, carinho e força para concluir esta tese, à minha família por estarem sempre lá para mim, me apoiarem e acreditarem em mim e aos meus amigos que me acompanharam neste processo e ouviram os meus desabafos.

E a Deus, sempre.

Obrigado a todos, sem vocês este trabalho não teria sido possível.

(7)

vii

Índice

Abstract ... iv

Resumo ... v

Agradecimentos ... vi

Índice ... vii

Lista de figuras ... x

Lista de tabelas ... xii

Lista de acrónimos ... xiv

1. Introdução ... 15

1.1. Contextualização ... 15

1.2. Motivação ... 16

1.3. Definição do problema ... 16

1.4. Objetivos do trabalho ... 16

1.5. Organização do documento ... 17

2. Trabalho relacionado ... 18

2.1. Instituto Português do Mar e da Atmosfera... 18

2.2. Meteogalicia ... 22

2.3. The Weather Channel ... 26

2.4. Meteored ... 30

2.5. Website atual ... 35

2.5.1. Navegação ... 35

2.5.2. Previsão por localidade ... 36

2.5.3. Previsão por coordenadas ... 38

2.5.4. Problemas afetos às duas páginas ... 40

2.5.5. Conclusão ... 41

2.6. Conclusão da análise ... 41

3. Análise contextual e Requisitos ... 42

3.1. Simbologia... 42

3.2. Apresentação da informação ... 42

3.3. SPA vs MPA ... 43

3.3.1. SPA ... 43

(8)

viii

3.3.2. MPA ... 44

3.3.3. Conclusão da análise ... 44

3.4. Cenários ... 45

3.4.1. Cenário 1 ... 45

3.4.2. Cenário 2 ... 45

3.4.3. Cenário 3 ... 46

3.5. Requisitos... 46

4. Arquitetura e Tecnologia ... 48

4.1. Arquitetura da solução ... 48

4.2. Tecnologia ... 49

4.2.1. Frameworks e bibliotecas... 49

4.3. Bibliotecas adicionais ... 52

4.3.1. Bootstrap ... 52

4.3.2. SnapSVG e TweenMax ... 53

4.3.3. NGX-Charts ... 53

5. Implementação da solução ... 54

5.1. Estrutura do projeto ... 54

5.2. Disposição ... 55

5.2.1. Barra de navegação ... 58

5.2.2. Bloco de pesquisa ... 58

5.2.3. Barra de favoritos e informações meteorológicas para hoje e próximos dias ... 58

5.2.4. Informação horária para o dia escolhido ... 59

5.2.5. Gráficos para o dia escolhido e vista estendida ... 60

5.2.6. Footer ... 61

5.3. Simbologia... 61

5.4. Dados ... 63

5.4.1. Dados meteorológicos ... 63

5.4.2. Cookies... 65

5.5. Detalhes da implementação... 65

5.5.1. Ciclo de vida ... 65

5.5.2. Pesquisa de local ... 66

5.5.3. Cartão do dia atual com animação ... 66

5.5.4. Tipos de dados ... 68

6. Avaliação da solução ... 71

6.1. Testes de usabilidade ... 71

6.1.1. Protocolo ... 71

(9)

ix

6.1.2. Resultados ... 72

6.1.3. Conclusões dos testes ... 84

7. Conclusão ... 85

7.1. Análise conclusiva ... 85

7.2. Trabalho futuro ... 85

8. Bibliografia ... 86

Anexos ... 87

(10)

x

Lista de figuras

Figura 1 – Secção Previsão diária (IPMA) ... 19

Figura 2 – Secção Notícias (IPMA) ... 19

Figura 3 - Secção Nível de seca, Bivalves e Extremos (IPMA) ... 20

Figura 4 - Outras visualizações (IPMA) ... 20

Figura 5 - Mapa num dispositivo móvel (IPMA) ... 21

Figura 6 - Previsão por localidade (IPMA) ... 21

Figura 7 – Mapa principal (MeteoGalicia) ... 23

Figura 8 - Mapa principal num dispositivo móvel (MeteoGalicia) ... 24

Figura 9 - Páginal principal (MeteoGalicia) ... 24

Figura 10 - Previsão por localidade (MeteoGalicia) ... 25

Figura 11 - Página inicial (TWC) ... 26

Figura 12 – Informações meteorológicas para o dia atual (TWC) ... 27

Figura 13 - Página inicial num dispositivo móvel (TWC) ... 27

Figura 14 - Previsão horária e para 10 dias (TWC) ... 28

Figura 15 - Previsão horária em dispositivos móveis (TWC) ... 29

Figura 16 - Locais para os quais a Meteored tem previsões ... 30

Figura 17 - Barra de pesquisa e favoritos (Meteored) ... 30

Figura 18 - Mapa da página inicial (Meteored) ... 31

Figura 19 - Acesso omitido à pesquisa e favoritos em dispositivos móveis (Meteored) ... 32

Figura 20 - Informação de temperatura e vento omitidas em dispositivos móveis (Meteored) ... 32

Figura 21 - Previsão descritiva (Meteored) ... 33

Figura 22 - Gráfico de tempo por horas (Meteored) ... 33

Figura 23 – Previsão horária próximos dias (Meteored) ... 33

Figura 24 - Página Inicial Meteo Técnico ... 35

Figura 25 - Previsão por localidade (Meteo Técnico) ... 36

Figura 26 - Setas de indicação da força e direção do vento ... 37

Figura 27 - Previsão por localidade em dispositivos móveis ... 37

Figura 28 - Previsão por coordenadas em dispositivos tipo desktop (Meteo Técnico) ... 38

(11)

xi

Figura 29 - Previsão por coordenadas num dispositivo móvel (Meteo Técnico) ... 39

Figura 30 - Intervalos de tempo expandidos (Meteo Técnico) ... 40

Figura 31 - Omissão da localização, informação solar e da última atualização (Meteo Técnico) ... 40

Figura 32 - Arquitetura da solução ... 48

Figura 33 - Estrutura do projeto ... 54

Figura 34 – Parte do ficheiro routes.ts como exemplo de duas routes ... 55

Figura 35 – Disposição em dispositivos móveis (a) ... 56

Figura 36 – Disposição em dispositivos móveis (b) ... 56

Figura 37 – Disposição em dispositivos móveis (c) ... 56

Figura 38 – Disposição em dispositivos móveis (d) ... 56

Figura 39 – Disposição em dispositivos muito grandes (a) ... 57

Figura 40 – Disposição em dispositivos muito grandes (b) ... 57

Figura 41 - Disposição em dispositivos muito grandes (c) ... 57

Figura 42 - Barra de navegação ... 58

Figura 43 - Botão para adicionar local ... 58

Figura 44 - Barra de pesquisa ... 58

Figura 45 - Barra de favoritos ... 59

Figura 46 – Frente do cartão representativo do dia atual ... 59

Figura 47 - Verso do cartão representativo do dia atual ... 59

Figura 48 - Informação horária ... 60

Figura 49 - Gráficos ... 60

Figura 50 - Diagrama de caixa para os tempos de resposta ... 72

Figura 52 – Diagrama de caixa para os tempos de resposta ... 79

(12)

xii

Lista de tabelas

Tabela 1 - Grelha do Bootstrap... 52

Tabela 2 – Simbologia - ícones relativos à previsão global ... 62

Tabela 3 – Simbologia - ícones representativos de informação ... 63

Tabela 4 – Resultados tarefa 1 website atual (ordem wA – wR) ... 73

Tabela 5 - Resultados tarefa 1 website atual (ordem wR – wA) ... 73

Tabela 6 - Resultados tarefa 2 website atual (ordem wA – wR) ... 74

Tabela 16 - SUS para o website atual ... 78

Tabela 17 – Resultados tarefa 1 website responsivo (ordem wR – wA) ... 80

Tabela 18 - Resultados tarefa 1 website responsivo (ordem wA – wR) ... 80

Tabela 19 - Resultados tarefa 2 website responsivo (ordem wR – wA) ... 80

(13)

xiii Tabela 28 - Resultados tarefa 4 website responsivo (ordem wA – wR) ... 82 Tabela 29 - SUS para o website responsivo ... 84

(14)

xiv

Lista de acrónimos

MARETEC Marine, Environment & Technology Center NOAA National Oceanic and Atmospheric Administration IPMA Instituto Português do Mar e da Atmosfera IBM International Business Machines

TWC The Weather Channel SPA Single-Page Application MPA Multi-Page Application

API Application Programming Interface WMO World Meteorological Organization SEO Search Engine Optimization XML Extensible Markup Language JSON JavaScript Object Notation

HTML Hypertext Markup Language

DOM Document Object Model JSX JavaScript Syntax Extension OOP Object Oriented Programming CSS Cascading Style Sheets SUS System Usability Scale

(15)

15

1. Introdução

1.1. Contextualização

O MARETEC surge como Centro de Ambiente e Tecnologia Marinha em 1992, altura em que pouco ou nada existia na internet sobre meteorologia. Nesta mesma altura, o Serviço Meteorológico Nacional não disponibilizava os dados meteorológicos que recolhia de forma gratuita e é então que o Professor José Joaquim Delgado Domingos decide desenvolver a previsão matemática do tempo.

Visto que o Serviço Meteorológico Nacional não fornecia os dados de forma gratuita foram procuradas, outras alternativas não nacionais, tais como, NOAA, entre outros. Em meados de 2000, através do Modelo Matemático do Tempo e dos dados recolhidos, surgem as primeiras previsões e o primeiro cliente, a Redes Energéticas Nacionais, para poder dispor de previsões sobre o vento e poder estimar a produção de energia eólica. Surge assim o website meteo.tecnico.ulisboa.pt como forma de mostrar e entregar estas previsões e também para aplicações industriais e científicas. Após isto, as previsões e o website foram sendo alargados e o Instituto Superior Técnico cria a sua própria estação meteorológica situada na sua Torre Sul.

Com o alargar e melhoramento das previsões, estas começam a ter não só interesse científico, mas também interesse por parte de utilizadores não ligados à ciência e apenas interessados na consulta meteorológica para, por exemplo, saberem se precisam de levar guarda chuva quando saírem de casa ou não. Dessa maneira, e com o passar do tempo, o website passa a ser acedido não só através de computadores pessoais, mas também através de telemóveis e tablets e isso traz-nos a realidade de que cada vez mais vivemos rodeados dos mais diversos dispositivos, com os mais diversos tamanhos de ecrã e resoluções, que estão ligados à Internet [1]. De acordo com [2], com este aumento crescente de dispositivos surge um problema: garantir que um website é apresentado corretamente e de forma intuitiva em todos esses dispositivos, problema esse que encontramos no website em questão. De forma a resolvermos esse problema surge a necessidade de aprofundar e utilizar o “Design Responsivo” para garantir que as previsões chegam a todos os dispositivos sem erros de interface e com uma boa experiência de utilização para todo o tipo de utilizadores.

Sabendo que cada dispositivo pode ter proporções diferentes, tablet vs. telemóvel vs. computador vs. computador híbrido, e que um só dispositivo pode ser usado em orientações diferentes (horizontal e vertical), é cada vez mais necessário que um único website possa ser corretamente visualizado independentemente do dispositivo e orientação em que tal acontece. O “Design Responsivo” é então a forma como se adapta um mesmo website a diferentes dispositivos recorrendo a regras, disposições em grelha e fluídas do conteúdo do website com base na dimensão do dispositivo em que o website está a ser visualizado. O “Design Responsivo” torna-se particularmente importante se pensarmos que o utilizador atual já não está apenas preocupado em receber informação, mas também se preocupa com a forma como esta lhe é apresentada, se é compreensível, apelativa e se lhe mostra o que ele pretende ver de uma forma rápida e eficaz.

(16)

16

1.2. Motivação

É com base no já mencionado que surge a necessidade de aplicar estas recentes normas de

“Design Responsivo” ao website já existente meteo.tecnico.ulisboa.pt. Este website tem como objetivo disponibilizar um conjunto de informações meteorológicas e ambientais, tais como previsão meteorológica para vários dias consecutivos para as várias regiões do país, previsão meteorológica por coordenadas geográficas introduzidas pelo utilizador e previsão meteorológica horária para quatro dias consecutivos. Além da previsão meteorológica disponibiliza também gráficos de temperatura, humidade, cobertura de nuvens, precipitação, vento, pressão e camada limite. A necessidade de intervenção neste website prende-se com o facto de que, devido à diversidade de dispositivos, o mesmo não se encontra pronto para ser visto em qualquer dispositivo visto que, quando foi criado, a sua função era apresentar dados em ecrãs horizontais, de diagonais de 13” ou mais, de forma científica e estes iriam ser vistos maioritariamente por cientistas ou engenheiros. Atualmente, para ser website para todo o tipo de utilizador, torna-se então necessário pensar que este website vai ser visto num número crescente de dispositivos, nas mais diversas condições e que o utilizador que o estará a explorar pode ter motivações não científicas para o fazer. Um utilizador pode apenas querer ver a temperatura para o dia seguinte para uma região, enquanto que um outro utilizador pode querer saber, por exemplo, que temperatura, força do vento e precipitação irão ocorrer às 14 horas em Lisboa e ainda outro pode querer analisar a evolução da temperatura para os dias seguintes. Dessa forma, a abordagem à aplicação do “Design Responsivo” deve também ter em conta este aspeto.

1.3. Definição do problema

Não obstante à abordagem mais profunda no decorrer deste documento, apresentamos aqui algumas ideias essenciais: a apresentação do website atual tem problemas quando este é visualizado em dispositivos mais pequenos, tais como telemóveis e tablets. Por exemplo, num telemóvel, para qualquer localização, seja ela dada de forma automática ou pesquisada, a primeira informação apresentada é um mapa e de seguida dois seletores, um de distrito e outro de município, ficando a informação dita importante escondida e sendo necessário arrastar a página para cima para poder ver uma tabela com a previsão por períodos de seis horas e mesmo assim informações como a cobertura de nuvens ou a humidade apenas podem ser vistas através dos gráficos, que ficam cortados e requerem que o utilizador arraste para a esquerda de forma a ver todos os dias disponíveis. Na sua maioria os ícones usados não são autoexplicativos e informação que é facilmente obtida num computador passando o rato por cima do ícone torna-se de difícil acesso num telemóvel/tablet pois requer um toque, num ícone bastante pequeno, ou até um toque longo, para aparecer.

1.4. Objetivos do trabalho

O nosso objetivo foi desenvolver uma solução que permitisse que o website atual fosse apresentado em qualquer dispositivo, adaptando-se ao mesmo, apresentando a informação de uma forma apelativa, simples, eficaz e compreensível. Dado que este website foi inicialmente desenhado

(17)

17 para ser visto em computadores e posteriormente parcialmente adaptado para alguns dispositivos, um dos objetivos foi também levantar que adaptações já implementadas poderíamos manter, quais precisavam ser revistas e que outras precisavam de ser implementadas. Por fim tivemos como objetivo a unificação das páginas já existentes numa única página que permitisse ao utilizador ter acesso à mesma informação, agora de uma forma mais centralizada e “limpa” do que a existente.

Tivemos também como objetivo desenvolver a solução de forma a operar em lugar do website existente.

1.5. Organização do documento

Este documento encontra-se organizado da seguinte forma:

• Capítulo 1: introduzimos o contexto do projeto, os problemas de soluções existentes e os objetivos do trabalho;

• Capítulo 2: apresentamos os trabalhos relacionados, os problemas e as partes positivas desses trabalhos e de seguida uma recolha do estado atual do website;

• Capítulo 3: analisamos o contexto em que a nossa solução se insere, analisando as diferenças encontradas no capítulo anterior e definindo cenários e uma lista de requisitos.

• Capítulo 4: apresentamos a arquitetura da solução e uma análise tecnológica.

• Capítulo 5: apresentamos a solução desenvolvida em detalhe.

• Capítulo 6: apresentamos os métodos de avaliação da nova solução, bem como os resultados da mesma e respetivas conclusões.

• Capítulo 7: apresentamos as conclusões deste trabalho bem como o trabalho futuro.

(18)

18

2. Trabalho relacionado

Neste capítulo procurámos apresentar e analisar alguns websites que se encontram relacionados com o nosso, e também a solução já existente, identificando os aspetos positivos e negativos dessas soluções e em que medida nos podem ajudar a melhorar a nossa solução. Os websites analisados foram IPMA, devido à sua aceitação e utilização em Portugal, MeteoGalicia, devido a ter uma implementação semelhante à do IPMA mas com algumas diferenças interessantes de analisar, The Weather Channel, pela sua aceitação internacional e também pelo facto de já ter adaptação a dispositivos móveis e Meteored, mais especificamente a solução desenvolvida para o território português (tempo 14 dias), por ter adaptação a dispositivos móveis e também outros aspetos interessantes de analisar.

De salientar que além de nos focarmos na informação apresentada pelos websites também nos focámos na apresentação dessa informação, tanto em ecrãs grandes, como pequenos.

Na listagem de aspetos positivos e negativos teremos em conta a perspetiva de um utilizador com objetivos não científicos, visto que a nossa solução foi pensada para ser usada principalmente para este tipo de utilizadores.

2.1. Instituto Português do Mar e da Atmosfera

O Instituto Português do Mar e da Atmosfera¹ é o organismo público português que resulta da fusão do Instituto de Meteorologia com a unidade de investigação marinha do Instituto Nacional de Recursos Biológicos e o departamento de geologia marinha proveniente do Laboratório Nacional de Engenharia e Geologia². A plataforma web do IPMA destina-se a apresentar ao utilizador informações de tempo, previsões diárias, significativas, a dez dias e horárias. Além destas disponibiliza também informações sobre o mar, sismos, clima, bivalves, pescas e aquacultura, aeronáutica, agricultura, ambiente, navios, aviões e espaço. Grande parte desta informação é acedida através de uma barra de navegação presente no topo da página, tendo em cada aba múltiplas formas de ver a informação pretendida.

Especificamente em relação à parte meteorológica que nos interessa, a plataforma permite-nos ver o mapa de Portugal (Figura 1), com as respetivas previsões para cada região, com possibilidade de alternar entre uma vista de tempo e temperatura (a 2 metros) e uma vista do vento. Para além disso temos também acesso a um mapa de avisos meteorológicos. Utilizando a barra de navegação superior, incluída nesta secção de previsão diária, temos acesso ao dito anteriormente para “hoje”,

“amanhã” e “depois de amanhã”.

Ainda nesta primeira página temos ainda uma secção de notícias à esquerda da secção de previsão diária (Figura 2), uma coluna à direita com informação sobre o nível de seca no Continente,

1 http://www.ipma.pt/pt/

2 Informação disponível em https://pt.wikipedia.org/wiki/Instituto_Português_do_Mar_e_da_Atmosfera

(19)

19 informação de bivalves e extremos registados até uma certa data (Figura 3). Temos ainda previsões por mapas, atividade sísmica e imagens de satélite (Figura 4).

Figura 1 – Secção Previsão diária (IPMA)

Figura 2 – Secção Notícias

(IPMA)

(20)

20 Figura 3 - Secção Nível de seca, Bivalves e

Extremos (IPMA)

Figura 4 - Outras visualizações (IPMA)

Aspetos positivos:

• Num único local, o primeiro que o utilizador vê ao chegar, podemos ter imediatamente acesso à informação base de temperatura das várias regiões, quer para o dia em questão, quer para os dois dias seguintes;

• Os ícones utilizados para representar o estado do tempo e mar são bastante autoexplicativos e, passando o ponteiro por estes ícones, podemos obter mais informação sobre vento e precipitação.

• Pequenas animações nos ícones que ajudam a perceber melhor o estado do tempo, por exemplo, animação de gotas de chuva conforme a probabilidade de precipitação e oscilação das nuvens consoante a força do vento.

Aspetos negativos:

• Quando em vista mais reduzida (Figura 5), a mesma que temos num telemóvel, temos de ampliar a página para ser possível ler a informação nela contida;

• As informações extra só são dadas passando o ponteiro por cima dos ícones, mas num dispositivo que não tem “rato”, mas que reage ao toque, esta informação extra não é apresentada;

• Além de parte do mapa desaparecer, os ícones de mudança de vista (temperatura e vento) também desaparecem em formatos pequenos;

• A página no geral não redimensiona num dispositivo pequeno, pelo que a informação ou é extremamente pequena e difícil de ler, ou partes dessa informação são cortadas;

• Ao ampliar a página num dispositivo móvel, para ser possível ler a informação contida no mapa, todos os gestos de navegação horizontal ou vertical tornam-se muito difíceis de reproduzir, sendo que esses gestos só são detetados nas zonas da página que não o mapa.

(21)

21 Figura 5 - Mapa num dispositivo móvel (IPMA)

Focando-nos agora na parte da secção da previsão por localidade (Figura 6). De notar que por omissão a página dá-nos logo a previsão descritiva para a combinação Lisboa/Lisboa como distrito e cidade, não havendo qualquer pedido para ser obtida a localização atual. A secção esquerda das notícias mantém-se visível com as mesmas notícias e a secção da direita desaparece.

Figura 6 - Previsão por localidade (IPMA)

(22)

22 Aspetos positivos:

• A previsão apresentada é para 10 dias;

• Toda a informação possível é apresentada: temperatura real, temperatura sentida, vento, humidade, precipitação, estado do mar, avisos meteorológicos e índice de ultravioletas.

• Tal como no mapa, quando tentamos ver esta página num telemóvel, a maior parte da informação é demasiado pequena para ser lida e temos de ampliar para a conseguir ler perdendo a vantagem dada pela página de ver as condições para os 10 dias ao mesmo tempo;

• Apesar de serem boas para utilizadores experientes, para utilizadores comuns as caixas de seleção de distrito e cidade não são de fácil utilização;

• No topo do ecrã temos a vista de 10 dias para temperatura, vento e precipitação, mas a partir daí a restante informação mais descritiva muda de escala, sendo apresentada por hora desde a hora atual até às 23 horas do dia atual e depois as horas disponíveis do dia seguinte, o que pode causar confusão.

Conclusão:

Na sua maioria o website do IPMA não foi pensado para ser visto em dispositivos móveis, como telemóveis e tablets, e na sua generalidade acaba por ser um website que pretende mostrar tudo o que consegue. Com isto acaba por ter muita informação espalhada pelas mais de 80 páginas que tem, mesmo que isso não seja o ideal para um utilizador não científico que apenas quer ver uma ou duas informações meteorológicas de um dado local. Ou seja, na sua generalidade é um website mais indicado para utilizadores científicos, e alguns curiosos, e não para utilizadores que gostariam de saber se amanhã irá chover no local onde vivem ou trabalham.

2.2. Meteogalicia

MeteoGalicia³ tem como principal objetivo a produção e publicação de previsões meteorológicas para a Galiza, assim como a exportação e manutenção da rede de observação meteorológica e climatológica da Junta da Galiza⁴. O website foca-se em dar ao utilizador informação meteorológica para quatro dias e a médio prazo, mostrando por omissão as temperaturas de sete sub-regiões da Galiza.

3 https://www.meteogalicia.gal

4 Informação disponível em https://es.wikipedia.org/wiki/MeteoGalicia

(23)

23 Na página principal do website temos logo acesso a um mapa geral da Galiza, com as temperaturas mínimas e máximas das respetivas sub-regiões e ainda uma secção da tendência da temperatura mínima e máxima para a Galiza no geral (Figura 7).

Figura 7 – Mapa principal (MeteoGalicia) Aspetos positivos:

• Apresenta o seu próprio conjunto de ícones e tem uma página que explica e clarifica o seu significado;

• É possível ver as temperaturas máximas e mínimas para as sete sub-regiões de forma rápida;

• Através dos ícones empregues no mapa é fácil entender o estado do tempo, vento e precipitação.

• Quando a página é vista num dispositivo pequeno, grande parte da mesma desaparece, pelo que grande parte da informação é perdida ou o seu acesso dificultado (Figura 8);

• Os ícones, apesar de existir legenda à parte, nem sempre são autoexplicativos para o utilizador não científico;

• As vistas para os restantes dias não modificam o mapa atual, mas abrem uma página diferente;

• De igual modo carregando no dia atual, apesar do mesmo aparecer como que selecionado (através do verde mais escuro), vamos para o mesmo tipo de página que carregando nos outros dias;

• Toda a restante informação que o website disponibiliza tem pouco espaço de separação, acabando por tudo estar muito próximo, existindo muitos focos de distração visual, também devido as diversas cores distribuídas pela página.

(24)

24 Figura 8 - Mapa principal num dispositivo móvel (MeteoGalicia)

Figura 9 - Páginal principal (MeteoGalicia)

(25)

25 Focando-nos agora na previsão descritiva que nos é fornecida pela plataforma. É possível obter uma previsão descritiva, a curto ou médio prazo, tanto para uma sub-região, como para um concelho (Figura 9).

Figura 10 - Previsão por localidade (MeteoGalicia) Aspetos positivos:

• Temos informação para quatro dias e a longo prazo para mais cinco dias.

• Os ícones, aqui em fundo cinzento, são mais fáceis de compreender (principalmente quando há indicação de precipitação).

• É possível vermos um gráfico que mostra a evolução da temperatura, vento e condições atmosféricas de forma horária.

• Simbologia do vento muito baseada nas normas das cartas meteorológicas, a qual nem todos os utilizadores conhecem;

• Tal como na página do mapa, esta também omite informação quando é apresentada em dispositivos mais pequenos.

• O tamanho geral da informação é pequeno para dispositivos móveis, sendo necessário ampliar para ler a informação;

• Os ícones de vento não representam velocidade, apenas direção.

Conclusão:

Podemos concluir que na sua maioria o website do MeteoGalicia não foi pensado para ser visto em dispositivos móveis, pelo que não existe nenhuma adaptação das páginas a dispositivos mais pequenos.

(26)

26

2.3. The Weather Channel

O The Weather Channel⁵ é um website gerido pela The Weather Company, uma empresa que disponibiliza previsões meteorológicas e trabalha com tecnologias de informação⁶, pertencente à IBM.

Este website permite ao utlizador consultar previsões para os mais diversos locais do mundo, estando disponível em várias linguas. Como principais funcionalidades tem a apresentação da informação para o dia atual, previsão horária, para 10 dias, para o próximo fim de semana, mensal até 14 dias, radar e previsão para esqui (Figura 11).

Figura 11 - Página inicial (TWC)

Ao entrar no website o utilizador consegue escolher um local para obter informações meteorológicas e o mesmo fica guardado na barra superior como um local favorito. Com o local selecionado o utilizador consegue rapidamente saber as condições atuais para o local, uma previsão para quatro alturas diferentes do dia: manhã, tarde, noite e madrugada, de seguida uma secção com mais informações meteorológicas (Figura 12), previsão horária (hora atual e próximas 4 horas), previsão diária (dia atual e próximos 4 dias) e radar. As previsões horária e diária têm ainda formas de ver mais informação sem ser necessário voltar ao topo da página. Já em dispositivos móveis a página tem sempre disponível uma barra fixa ao fim da página (Figura 13), o que permite um fácil acesso à informação disponível e omitem as secções de previsão horária e 10 dias, de maneira que não existem um excessivo arrastar para cima para ver todo o conteúdo da página.

5 https://weather.com

6 Informação disponível em https://en.wikipedia.org/wiki/The_Weather_Company

(27)

27 Figura 12 – Informações meteorológicas para o dia atual (TWC)

Figura 13 - Página inicial num dispositivo móvel (TWC)

(28)

28 Assim, para a página principal temos:

• A informação está bem compartimentada e é apresentada de forma faseada;

• Simbologia própria e autoexplicativa;

• Design simples e “limpo”;

• Na secção da previsão para o dia não é explícita a temperatura que é apresentada, pois analisando os valores disponíveis (através da previsão horária), não nos mostram nem a mínima, nem a máxima, nem a média, para aquela altura do dia, o que se torna um pouco confuso;

• Não é claro se a temperatura mostrada é a temperatura prevista ou a temperatura sentida prevista, pois num sítio aparece como “sensação”, mas noutro a mesma temperatura não tem descrição associada;

• Não é possível vermos mais do que as próximas 4 horas e 4 dias sem sair desta página, não tem tudo num só local;

• Para o caso dos dispositivos móveis, apesar de ajudar a não ter demasiada informação vertical, acaba por não nos mostrar informação importante logo na primeira página que vemos.

Continuando a análise, e devido à semelhança entre as duas páginas, iremos analisar a página de previsão horária e de previsão para 10 dias simultaneamente (Figura 14). De notar que ambas as páginas se apresentam de forma muito semelhante em dispositivos grandes e pequenos.

Figura 14 - Previsão horária e para 10 dias (TWC)

(29)

• Cada entrada da tabela mostra informação pertinente de uma forma simples e rápida;

• A informação apresentada encontra-se bem espaçada e é de fácil leitura;

• A entrada referente à hora atual é apresentada já aberta, de forma a mostrar mais informação ao utilizador que possa ser do seu interesse;

• Separação da informação para dois momentos dos vários dias na página de 10 dias, mostrando informação detalhada para esses dois momentos (dia e noite).

• A apresentação da informação no formato de tabela tem o inconveniente de produzir muito espaço não aproveitado à volta da tabela, sendo necessário navegar mais verticalmente para encontrar a informação pretendida;

• Do ponto de vista de utilização, em dispositivos móveis, a existência de anúncios no meio da tabela torna a tabela ainda mais extensa verticalmente (Figura 15);

• A indicação da cobertura de nuvens é qualitativa e não quantitativa, não existe apresentação da percentagem de cobertura que ajuda a perceber melhor a indicação qualitativa.

Figura 15 - Previsão horária em dispositivos móveis (TWC) Conclusão:

Podemos concluir que este website foi concebido tendo todo o tipo de dispositivos em conta, visto que se adapta consoante o ecrã em que está a ser mostrado. Ainda assim, do ponto de vista de experiência de utilização, cada vez que se troca de forma de apresentar a informação (hoje, hora a hora, 10 dias, etc.) a página tem de recarregar completamente, ou seja, há sempre um ajuste visual das diversas partes do website e um certo tempo de espera entre o pedido e a resposta sem um indicador visual de que isso está a acontecer. De salientar que permite a inserção de locais através de uma barra de pesquisa, o que facilita a procura mais personalizada de previsões.

(30)

30

2.4. Meteored

A Meteored⁷ surge no fim dos anos 90 como um website com links externos para consultar os diferentes dados meteorológicos, tais como satélites, mapas do tempo, entre outros. Com o aumento da procura o domínio meteored.com é adquirido em junho de 2000 pela sociedade Alpred S.L. com sede em Espanha e daí a esta parte entram em processo de expansão, tendo agora previsões para quase todo o mundo⁸ (Figura 16).

Figura 16 - Locais para os quais a Meteored tem previsões

A Meteored tem websites em várias línguas e em Portugal assume-se com o domínio tempo.pt.

À entrada da página é pedida a partilha da localização atual, que, se concedida, gera uma aba junto à barra de pesquisa (Figura 17), onde também ficam guardadas outras localizações favoritas.

Figura 17 - Barra de pesquisa e favoritos (Meteored)

São disponibilizadas previsões para 14 dias e na página principal temos acesso a um mapa de Portugal que mostra os principais dados para os vários concelhos e no próprio mapa temos acesso a uma legenda explicativa da simbologia utilizada (Figura 18).

7 https://www.tempo.pt

8 Informação disponível em https://www.tempo.pt/sobre-nos/empresa

(31)

31 Figura 18 - Mapa da página inicial (Meteored)

• Temos informação para 14 dias com uma vista geral de Portugal Continental e Ilhas;

• Em dispositivos grandes temos a hipótese de alternar os símbolos visíveis entre temperatura, símbolo, vento ou todos visíveis ao mesmo tempo;

• A página está adaptada a dispositivos móveis, não havendo cortes no mapa apresentado.

• Em dispositivos móveis, tanto a barra de pesquisa, como a barra com localizações favoritas ficam ocultas, sendo apenas possível aceder através de botões que se escondem se arrastarmos para cima para ver o resto da página (Figura 19);

• A informação de temperatura e vento que existe em dispositivos grandes é perdida em dispositivos pequenos, aparecendo apenas o símbolo (Figura 20);

• Perde-se a facilidade de trocar para um dia que não o próximo ou o anterior em dispositivos móveis, pois apenas temos acesso a esses dias por meio de setas que carregam logo o dia quando carregadas.

(32)

32 Figura 19 - Acesso omitido à pesquisa e favoritos

em dispositivos móveis (Meteored)

Figura 20 - Informação de temperatura e vento omitidas em dispositivos móveis (Meteored)

Passando agora à análise da página de previsão descritiva (Figura 21), temos uma separação em blocos, em que o primeiro é relativo à temperatura e temperatura sentida atuais, bem como o índice UV, de seguida uma barra horizontal com os 14 dias com previsão, previsão horária, hoje e amanhã que apresentam a informação na forma de gráficos (Figura 22), e por fim uma tabela com as 24 horas agrupadas em intervalos de 3 horas para o dia seguinte ao atual, com possibilidade de expansão e sem possibilidade de expansão para os restantes 12 dias (Figura 23).

(33)

33 Figura 21 - Previsão descritiva (Meteored)

Figura 22 - Gráfico de tempo por horas (Meteored)

Figura 23 – Previsão horária próximos dias (Meteored)

(34)

• Facilidade de acesso a todos os dias disponibilizados, em dispositivos grandes através de uma barra horizontal e em dispositivos pequenos através de uma tabela vertical;

• Informações pertinentes do dia atual como a temperatura, temperatura sentida e índice UV estão bem visíveis;

• Responsividade da página a todo o tipo de dispositivos;

• Indicação do vento feita através de simbologia das cartas de meteorologia e também mostrando o intervalo de valores em (km/h).

• O bloco que representa o dia atual e seleção de dias, quem em dispositivos móveis representa apenas o dia atual, é colorido e essa cor muda consoante alguma informação, mas isso não está explicado de forma visível;

• Pedindo informação para outro dia, ou por horas, etc. faz com que a página tenho de recarregar completamente, o que prejudica a experiência de utilização;

• Em dispositivos móveis perdemos a tabela horária de forma direta, pois apenas aparece depois de selecionado o dia, o que implica mais um recarregamento da página;

• Em dispositivos móveis, ao “tocar” para ver mais informações para uma determinada hora, praticamente todo o ecrã fica ocupado por essas informações, tornando difícil a comparação entre horas;

• Comparação de informações meteorológicas entre locais diferentes torna-se também complicada devido ao desaparecimento da barra superior com o arrastar vertical e também com o caminho que é necessário percorrer para chegar à informação pretendida.

Conclusão:

Este website foi pensado tendo em conta os diversos dispositivos existentes e adapta-se de forma satisfatória à maioria, salientando-se que a escolha de vista de informação através de tabelas se torna difícil em dispositivos móveis devido ao arrastar vertical que é necessário fazer. A existência de um grande bloco com cor também causa algum contraste e, no limite, algum desconforto, apesar de ser pequeno em dispositivos móveis. Nota-se aqui também uma grande perda na experiência de utilização pelo facto de as páginas precisarem de recarregar a cada pedido efetuado e não atualizarem simplesmente a informação que mostram.

(35)

35

2.5. Website atual

Nesta secção vamos apresentar o website atual e analisar os problemas encontrados atualmente nas duas páginas de meteo.tecnico.ulisboa.pt.

2.5.1. Navegação

Um dos problemas atuais do website é a redundância da navegação de algumas páginas. Na página inicial temos acesso a duas escolhas: previsão por região e previsão por coordenadas (Figura 24).

Figura 24 - Página Inicial Meteo Técnico

Acedendo à página de previsão por região temos um resumo das localidades de Portugal com previsão para cinco dias. Selecionando uma dessas localidades somos redirecionados para outra página que nos dá informação detalhada sobre a localidade. Essa página não é mais do que a página de previsão por coordenadas com as coordenadas centrais da localidade escolhida anteriormente.

Esta redundância torna a utilização da plataforma pouco simples para o utilizador comum e até mesmo para um utilizador experiente, visto que este tem de navegar pelas duas páginas distintas para obter a informação que pretende. E ainda, se porventura começar pela página de previsão por região, e não quiser obter informação de um dos distritos de Portugal Continental, tem forçadamente de ir para a página de previsão por coordenadas, pois só aí encontra forma de pesquisar uma localidade específica.

(36)

36

2.5.2. Previsão por localidade

Nesta página temos então acesso a uma tabela com previsão para 5 dias, para os distritos de Portugal Continental (Figura 25). O mapa, à esquerda, permite selecionar um distrito de forma visual e ilumina a entrada correspondente na tabela.

Figura 25 - Previsão por localidade (Meteo Técnico) Aspetos positivos:

• Mapa de Portugal Continental apresentado com tamanho adequado e com ícones que mostram de forma rápida as condições meteorológicas nas localidades;

• Previsão para cinco dias, com condições do céu, vento e temperatura;

• Informação do nascer e pôr-do-sol, bem como da fase da lua;

• Informação sobre a data e hora da última atualização.

• A informação apresentada, é um pouco avassaladora, visto que estamos perante uma tabela de 18 entradas por 7 colunas;

• Os ícones da tabela têm proporções demasiado pequenas para uma fácil e rápida compreensão dos mesmos. Por exemplo, a força do vento é representada pelas "caudas”

das setas que representam o vento e muitas vezes é difícil distinguir dois traços iguais de dois traços díspares (Figura 26);

• Conforme o tipo de dispositivo utilizado várias informações começam a desaparecer:

(37)

37 o O mapa desparece a partir do tamanho de um tablet;

o Deste tamanho para baixo os dados da tabela vão desaparecendo até que apenas restam os ícones de informação meteorológica (Figura 27);

o Ainda num tamanho equivalente a um telemóvel (na vertical), a tabela excede a largura do ecrã e não se ajusta, fazendo com que o último dia fique cortado (Figura 27).

Figura 26 - Setas de indicação da força e direção do vento

Figura 27 - Previsão por localidade em dispositivos móveis

(38)

38

2.5.3. Previsão por coordenadas

Esta página corresponde à informação que podemos obter pesquisando qualquer local através da combinação de seletores de distrito e município (Figura 28).

Figura 28 - Previsão por coordenadas em dispositivos tipo desktop (Meteo Técnico) Aspetos positivos:

• O Mapa permite a escolha do local exato sobre o qual se pretende obter a previsão meteorológica;

• Temos acesso a 7 gráficos distintos e para todos temos hipótese de exportação;

• Hipótese de escolha inicial baseada no distrito e município;

• Localização por nome da localidade.

• Na zona de previsão por intervalo de tempo as entradas da tabela cuja hora já passou mantêm-se visíveis, o que dificulta a navegação, principalmente em dispositivos móveis, pois aumenta o comprimento da página;

• A coluna “Tar / Tsentida” é um pouco confusa pois usa as mesmas cores da temperatura máxima e mínima da página de previsão por localidade;

• Expandindo os intervalos de tempo perdemos as cores de temperatura máxima e mínima;

• O nome do local onde estamos, ou as coordenas, estão repetidos, neste caso por cima da zona do horário e na zona dos gráficos, ocupando espaço desnecessário;

• As caixas de seleção contém muita informação para ser percorrida verticalmente, o que é um problema em dispositivos móveis;

(39)

39

• A possibilidade de introdução de uma localização por nome de localidade não é imediata (encontra-se no “alvo” presente no mapa);

• Os gráficos, por vezes, não são autoexplicativos, como por exemplo, no gráfico de temperatura temos duas linhas e só sabemos o seu significado tocando no mapa ou passando por cima dele com o ponteiro;

• O eixo horizontal dos gráficos não tem rótulo, é possível deduzir-se que representa as horas, mas não é imediato;

• O tamanho de letra dos vários elementos escritos não é consistente, temos abas com tamanhos de letra mais pequenos do que, por exemplo, a descrição do vento;

• Redimensionando a janela para outros dispositivos passamos a ter de percorrer a página verticalmente perdendo muita informação imediata (Figura 29);

• O mapa não está preparado para dispositivos móveis, a sua navegação não é simples e muitas vezes previne movimentos como o arrastar vertical;

• Os gráficos, em dispositivos móveis, aparecem com a sua legenda cortada e a informação que apareceria com o passar do ponteiro, acaba por não aparecer, ou aparecer com muita dificuldade com um toque longo;

• A expansão dos intervalos de tempo ocupa demasiado espaço e torna a navegação em dispositivos móveis pouco simples (Figura 30);

• Em qualquer dimensão de dispositivo há um excesso de espaço inutilizado o que, principalmente em dispositivos mais pequenos, é crucial não existir em excesso, pois faz com que o utilizador precise de percorrer um caminho mais longo até chegar à informação que pretende encontrar.

Figura 29 - Previsão por coordenadas num dispositivo móvel (Meteo Técnico)

(40)

40 Figura 30 - Intervalos de tempo expandidos (Meteo Técnico)

2.5.4. Problemas afetos às duas páginas

Em formato de dispositivo móvel as duas páginas perdem a barra colocada no topo da página (Figura 32) tirando assim ao utilizador a informação sobre o local sobre o qual está a ver precisões, o nascer e pôr-do-sol, a fase da lua, o tempo atual e o tempo da última atualização da informação.

Em geral, todas as páginas têm tendência a ter o tamanho da letra da informação que contém demasiado pequeno para ser visto num dispositivo móvel, todas contém demasiado espaço em branco e a tendência a dar demasiadas “linhas de informação” ao mesmo tempo ao utilizador, mesmo sem este o pedir.

É possível ver também que da forma como as páginas estão organizadas, a página de previsão por localidade adequa-se a um utilizador sem objetivos científicos, apesar de conter demasiada informação, e já a página de previsão por coordenadas adequa-se a um utilizador experiente devido à quantidade de opções e informação diferente que é apresentada.

Figura 31 - Omissão da localização, informação solar e da última atualização (Meteo Técnico)

(41)

41

2.5.5. Conclusão

Tal como já dissemos anteriormente, o website atual não está preparado, nem foi pensado para ser apresentado em dispositivos móveis, não mostrando a informação de forma simples e clara, tendo muitos problemas à medida que o vemos em dispositivos cada vez mais pequenos.

Existe também uma forte utilização da apresentação de informação quando o ponteiro passar por cima de algum elemento, o que não se aplica num dispositivo móvel, ou seja, essa informação muito raramente é vista pelo utilizador que consulta o website num dispositivo móvel.

2.6. Conclusão da análise

Podemos então concluir que dos 5 websites aqui apresentados, 3 nos mostram como ainda existem websites que não foram adaptados para serem apresentados em dispositivos móveis e como isso dificulta muito a sua utilização e 2 nos mostram que já existem websites meteorológicos com preocupações de se adaptarem a todo o tipo de dispositivos e dos quais pudemos tirar algumas boas práticas para a nossa solução.

Uma constante de todos os websites é o facto de ser extremamente importante que a informação seja de fácil e rápida leitura e que existam poucos fatores que impactem negativamente a experiência de utilização (tempos de espera entre pedidos, contraste das cores, etc.).

Vemos também que qualquer dos websites que se apresenta como tendo uma boa responsividade para dispositivos móveis, teve também a preocupação de incluir uma barra de pesquisa, de forma a que o utilizador tenha uma experiência mais personalizada, e também uma barra de favoritos, para um fácil acesso a várias localizações e até para comparações.

De notar que dos 2 websites com adaptação a dispositivos móveis, um deles mantém também o uso de gráficos, bem adaptados a dispositivos móveis, que, ainda que menos utilizados por utilizadores não científicos, continuam a ter uma grande utilidade para os dois tipos de utilizadores, desde que apresentados corretamente.

(42)

42

3. Análise contextual e Requisitos

De forma a criar uma solução que resolva os problemas já referenciados do website atual, e que também o melhore, é necessário analisar o contexto em que o website se insere, definindo uma lista de requisitos. Essa lista terá como base uma pequena análise das diferenças encontradas no capítulo anterior, nomeadamente a simbologia, apresentação da informação, de um ponto de vista tecnológico, a diferença entre Single Page Application e Multi Page Application e também cenários que nos ajudam a compreender as necessidades dos utilizadores e que permitiram a elaboração dos testes.

3.1. Simbologia

Um dos aspetos mais importantes na visualização de informações meteorológicas é exatamente a simbologia que lhes é associada [3] e dessa maneira foi criada pela WMO, uma organização intergovernamental especializada em meteorologia que conta com 193 membros, dos quais Portugal também faz parte, um conjunto de regras e aspetos globais definidos em [4] para o processamento de dados meteorológicos e sistemas de previsão, referenciando [5] como o manual de códigos a serem usados, nomeadamente a representação gráfica de dados meteorológicos e previsões, que nos interessa particularmente.

De notar que não existe uma norma para a representação de dados e previsões meteorológicas, na sua maioria, e de acordo com aquilo que conseguimos apurar, cada website acaba por ter a sua própria simbologia e uma página explicativa desta mesma simbologia. Todas as páginas analisadas no capítulo anterior seguem o que dissemos anteriormente, inclusive o website atual.

Isto acontece devido ao sistema de símbolos criado para as cartas meteorológicas ter sido pensado para isso mesmo e, de momento, não existir uma adaptação comumente aceite para uso num website ou aplicação. É também necessário notar que a simbologia adotada para as cartas meteorológicas se destina, maioritariamente, a um uso científico, daí a simbologia usada num website meteorológica ser substancialmente mais simples, de forma a ser facilmente decifrada por qualquer tipo de utilizador.

3.2. Apresentação da informação

Neste trabalho pretendemos construir uma solução que resolvesse os problemas do website atual e que proporcionasse uma consulta eficiente e eficaz do mesmo nos mais diversos dispositivos tendo então uma abordagem do “Design Responsivo”. Isto traduz-se no contínuo reajuste dos conteúdos do website de acordo com a variação da dimensão do dispositivo em que o mesmo é apresentado, independentemente do dispositivo [6].

(43)

43 É necessário também ter em atenção o facto de que os dispositivos móveis, ao invés dos dispositivos desktop, acabam por ser utilizados mais frequentemente na vertical, o que implica que a forma como apresentamos a informação meteorológica tem de ser adaptada consoante a dimensão do dispositivo. Assim, e com base nos exemplos dos vários websites que analisámos, podemos concluir que uma separação por secções da informação apresentada é útil para a visualização desta mesma informação e permite ao utilizador ver informações meteorológicas de forma agrupada.

Ainda relativo a este assunto fizemos um inquérito (Anexo A) a 73 pessoas, das quais 64 costumam consultar o tempo. Com base nas respostas à pergunta “Quando consulta o tempo, o que procura primeiro?” podemos concluir que temos a seguinte ordem de importância na apresentação da informação: previsão para o dia, previsão para os dias seguintes, previsão horária para o dia. Através da pergunta seguinte podemos concluir que os inquiridos têm um grande interesse pela temperatura, condições atmosféricas para o dia atual, de seguida o mesmo para o dia seguinte e próximos dias e um menor interesse pela previsão horária.

3.3. SPA vs MPA

Tendo em conta a experiência de utilização, é necessário também abordar duas formas de programação de um website: aplicações de página única (SPA) e aplicações de múltiplas páginas (MPA). Uma abordagem (SPA) é mais moderna que a outra (MPA) e ambas acabam por ter vantagens e desvantagens, pelo que se torna necessário analisar ambas.

3.3.1. SPA

Uma SPA é então uma aplicação web que não requer um recarregar da página, tendo um rápido tempo de carregamento. Com uma SPA tudo é contido numa única página HTML e quando o utilizador interage com a aplicação, apenas partes em concordância com a ação feita pelo utilizador são atualizadas, mantendo tudo o resto intocado. Podemos então dizer que a página é atualizada dinamicamente cada vez que é feita uma ação na mesma, pois cada vez que é feito um pedido dentro da página não é necessário carregar novamente elementos que já existem na página, como por exemplo uma barra de navegação, um footer, uma tabela cujo conteúdo mudou mas a tabela continua a ser o elemento onde essa informação é apresentada, etc. Exemplos disto são websites como Gmail⁹, Facebook¹⁰, Twitter¹¹, entre outros.

Temos então como vantagens:

• Responsividade, ao ter apenas certos elementos a serem recarregados permite que a página mantenha o seu aspeto havendo apenas uma atualização da informação em causa no pedido;

9 www.gmail.com

10 www.facebook.com

11 www.twitter.com

(44)

44

• Velocidade, o tempo de resposta e alteração do conteúdo a mostrar acaba por ser apenas o tempo de resposta do servidor, idealmente o tempo de carregamento de um website não deve exceder os 3 segundos ou a hipótese de perda do utilizador aumenta¹²;

• Separação entre informação vinda do servidor e a interface ao nível de programação;

• Fluidez, para o utilizador não existe qualquer “piscar” do ecrã entre ações, mesmo que existam atualizações nos elementos;

• Facilidade de reaproveitamento do código produzido para a criação de aplicações móveis nativas.

Desvantagens:

• Dificuldade por parte dos motores de busca em indexar o conteúdo dinâmico de uma SPA e dessa forma as várias “páginas” aparecerem como diferentes buscas;

• É mais fácil ter fugas de memória pois um event listener, que não tenha sido destruído depois do elemento a qual este pertence já não estar em uso, fica indefinidamente a ocupar memória, o que pode provocar uma grande perda de performance.

3.3.2. MPA

Uma MPA é uma forma mais tradicional para desenvolver uma aplicação web, na qual, para cada pedido é feito um recarregamento de toda a página com a resposta desse pedido.

Vantagens:

• Grande facilidade de indexação por parte dos motores de busca, pois cada página existe separadamente e com isto, cada página pode ter as suas metatags, palavras-chave, etc., tudo características importantes para o ranking numa busca;

• Facilidade de desenvolvimento, pois é necessário menor conhecimento tecnológico;

• Existe há mais tempo, logo existem mais soluções pré-feitas para problemas atuais. Por exemplo: e-commerces, redes sociais, etc.

Desvantagens:

• Dificuldade de reaproveitamento do código para o desenvolvimento de uma aplicação móvel nativa;

• Dificuldade de separação entre o desenvolvimento de front-end e de back-end, pois ambos ficam bastante interligados.

3.3.3. Conclusão da análise

Podemos concluir que para a nossa solução o uso de uma SPA é o mais indicado pois, relativamente à indexação, já existem formas de contornar o problema com uso de frameworks próprias para o desenvolvimento de SPAs, e também com o uso dessas mesmas frameworks, facilmente conseguimos garantir que não existem fugas de memória na página. Temos ainda como grande vantagem a fluidez, responsividade e velocidade do ponto de vista de experiência de

12 Mais informações em https://www.hobo-web.co.uk/your-website-design-should-load-in-4-seconds/

(45)

45 utilização, visto que um utilizador atual consulta, maioritariamente, o tempo todos os dias. De notar que, para referência futura, o reaproveitamento da nossa solução para a elaboração de uma aplicação móvel também constitui uma grande vantagem.

3.4. Cenários

Com base ainda no inquérito que realizámos (Anexo A), pudemos chegar também à conclusão que os utilizadores sentem necessidade de ter um acesso rápido a localizações favoritas (mais de 50% responderam com 5 – muito interessado a esta pergunta) e ainda que estão bastante interessados em fornecer a sua localização de forma automática para a obtenção de previsões (cerca de 65% responderam com 5 – muito interessado).

Com base no anteriormente descrito elaborámos os seguintes cenários:

3.4.1. Cenário 1

São 9h00 e o João está prestes a sair de casa e tem dúvidas se deve levar o seu casaco consigo, visto que está um sol radioso lá fora. O João acede ao Meteo Técnico através do seu smartphone e insere na barra de pesquisa “Oeiras”, pois é a zona para onde ele vai, aparece uma lista com várias opções e ele escolhe “Oeiras”. De seguida o sistema mostra-lhe a previsão para o dia de hoje em Oeiras e o João arrasta a página chegando à previsão horária. Aqui arrasta a página lateralmente vendo todas as horas seguintes e conclui que às 18h00, hora em que começa o seu regresso a casa, irão estar 16º C, pelo que ele decide levar o seu casaco.

3.4.2. Cenário 2

É sexta-feira e a Marta está indecisa entre ir passar o fim de semana a Sesimbra e aproveitar a praia, ou a Santarém onde moram os seus primos. A Marta acede ao Meteo Técnico através do seu desktop e, visto ser uma utilizadora recorrente, já tem Santarém nos favoritos. Marta começa por selecionar “Santarém” nos favoritos, o sistema mostra-lhe a previsão para o dia de hoje em Santarém e a Marta arrasta a página até chegar à zona dos gráficos, que mostra primeiramente a temperatura, e seleciona “precipitação”. O sistema atualiza o gráfico para lhe mostrar a precipitação para o dia atual e Marta seleciona “vista estendida”. O sistema volta a atualizar o gráfico para lhe mostrar todos os valores de precipitação para os dias disponíveis para Santarém. Marta conclui que não vai chover durante o fim de semana e, depois de arrastar a página, introduz na pesquisa “Sesimbra” e pressiona a tecla “Enter”. O sistema atualizou as informações para o dia de hoje em Sesimbra e manteve o gráfico na aba “precipitação”, a Marta arrasta então a página e seleciona “vista estendida”. O sistema atualiza o gráfico para lhe mostrar todos os valores de precipitação para os dias disponíveis para Sesimbra e a Marta conclui que no sábado, das 14h às 17h e domingo das 11h às 15h irá chover, pelo que decido ir passar o fim de semana a Sesimbra.