Meteo Técnico Redesenho (Responsivo)

[Pages:112]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

i

ii

iii

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

iv

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

v

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.

vi

?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

vii

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

viii

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download