Interface.html
16.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta charset="UTF-8"><title>i3GeoSaude</title>
<link media="screen" href="./files/estilos.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./files/estilos.css"></head><body class="blue-bg">
<div style="text-align: justify;" id="wrapper-flex">
<div style="background-color: white;">
<div class="f-page-auto-cell" id="doc">
<div class="imginicio"><a href="index.html#inicio_usando"><img src="files/inicio.gif" title="Início" style="border: 0px solid ; width: 40px; height: 40px;" alt="inicio"></a></div>
<h1>Funcionalidades presentes na
Interface</h1>
<br>
As funcionalidas da interface referem-se aos recursos
implementados no i3GeoSaúde para permitir que os
usuário
interajam com os mapas de forma facilitada e intuitiva. A seguir
detalhamos os principais recursos presentes na
interface com usuário. <br>
<br>
<div class="trail-box">
<div class="trail-box-header"><img src="files/trails-box-tr.png" class="right" alt="" height="21" width="7"><img src="files/trails-box-tl.png" class="left" alt="" height="21" width="7"><comment title=" here is the box header " xmlns="http://disruptive-innovations.com/zoo/nvu"></comment>
<h1>Visão geral dos
mapas interativos
</h1>
</div>
<div class="trail-box-content">
<div style="text-align: justify;">
<br>
Cada instalação do i3GeoSaúde
pode conter mapas com diferentes objetivos e desenhos,
desenvolvidos conforme as necessidades de seus usuários.
Existem três interfaces
básicas de mapas que
normalmente são utilizadas pelo i3GeoSaúde. Em
quaisquer
uma delas
podem estar presentes os seguintes elementos,
conforme visto na <span style="font-weight: bold;">Figura 1</span>.<br>
<br>
<img src="imagens/Interface/componentesbasicos.jpg" style="width: 648px; height: 370px;" alt="componentebasico"><br>
<span style="font-weight: bold;">Figura 1</span>:
Interface com suas funcionalidades.<br>
<br>
• <span style="font-weight: bold;">Corpo
do mapa</span>:
área onde as camadas que
compõem o mapa são desenhadas. Permite a
navegação sobre o mapa, como as
operações de aproximação
(zoom) ou o deslocamento da abrangência espacial do mapa
("pan"). As operações atuam em um simples
“clique” sobre o mapa, em
um determinado ponto geográfico, além disso a
ferramenta
exibe informações básicas sobre os
pontos
georeferenciados ao capturar o posicionamento do mouse em movimento.
Veja na <span style="font-weight: bold;">Figura 2</span> detalhes sobre o corpo do mapa e as coordenadas
geográficas para o ponto clicado sobre o mapa.<br>
<br>
<img src="imagens/Interface/corpomapa_recursos.jpg" style="width: 648px; height: 356px;" alt="corpo do mapa e coordenadas"><br>
<span style="font-weight: bold;">Figura
2</span>:
Corpo do mapa e a barra com as coordenadas do ponto
geográfico.<br>
<br>
• <span style="font-weight: bold;">Menu
suspenso</span>: barra
contendo opções principais da ferramenta
i3GeoSaúde,
que contém outros submenus que são
expandidos para
mostrar ítens
secundários. Como visto na <span style="font-weight: bold;">Figura
3</span>,
as opções permitem abrir diversas funcionalidades
e
outros aplicativos. Essa barra fica normalmente localizada na
parte superior da interface. <br>
<br>
<img src="imagens/Interface/barramenususpenso.jpg" style="width: 684px; height: 36px;" alt="barra de menu suspensa"><br>
<span style="font-weight: bold;">Figura
3</span>: Menu suspenso.<br>
<br>
• <span style="font-weight: bold;">Barra
de botões</span>:
barra de ícones que
permitem acionar determinadas funcionalidades de uso mais
frequente. Na barra ficam ícones que permitem
operações de interação
direta com o mapa, como navegação,
posicionamento, zoom, e outros que abrem
outras janelas de opções. Como podemos ver na <span style="font-weight: bold;">Figura 5</span>,
há duas versões disponíveis, que
são
acionadas pelo controle posicionado à direita da barra: a
barra
padrão (com onze funções) e a barra
estendida,
contendo opções adicionais ao padrão.<br>
<img src="imagens/Interface/barrabotoes.jpg" style="width: 798px; height: 77px;" alt="barra de botoes"><br>
<span style="font-weight: bold;">Figura
4</span>: Barra de botões
(versão padrão e estendida).<br>
<br>
• <span style="font-weight: bold;">Barra
de
navegação</span>:
É um
tipo especial de barra de botões que apresenta
operações de navegação.
São úteis para se ter acesso rápido a
esse tipo de operação e também em
dispositivos móveis, como os “tablets”.
Em alguns casos, em função da área de
tela disponível, a barra de botões
padrão pode não existir, sendo mostrada apenas a
barra de navegação.<br>
<br>
• <span style="font-weight: bold;">Janela
flutuante</span>:
consiste em um elemento gráfico
que pode ser movimentado sobre o mapa e que contém
opções para o uso de determinada funcionalidade
ou que apenas apresenta textos explicativos. <br>
<br>
• <span style="font-weight: bold;">Guias
ou abas laterais</span>:
as guias são
áreas retráteis, podendo
estar escondidas ou não. Normalmente
contém elementos de maior destaque no mapa como as
opções que controlam as camadas, legenda e
catálogo de acesso aos dados. Os conteúdos das
guias podem ainda ser apresentados de diferentes formas, como as guias
do tipo “sanfona” ou acionadas por meio de
ícones. A <span style="font-weight: bold;">Figura 5</span>
mostra a guia de camadas localizada na lateral direita da interface,
ocm destaque para o controle que exibe e oculta a guia.<br>
<img src="imagens/Interface/guialateral.jpg" style="width: 333px; height: 296px;" alt="guia lateral"><br>
<span style="font-weight: bold;">Figura
5</span>: Guia lateral para
operações sobre as camadas (temas).<br>
<br>
• <span style="font-weight: bold;">Complementos</span>:
os
complementos ficam localizados em uma barra na parte inferior da
interface. Apresenta
diferentes informações, como a barra de escala,
escala numérica, bandeiras de idiomas, ícones de
redes sociais, posição do mouse, etc. A <span style="font-weight: bold;">Figura 6</span>
apresenta a barra de complementos normalmente encontrada no
i3GeoSaúde.<br>
<br>
<img src="imagens/Interface/barracomplementos.jpg" style="width: 720px; height: 15px;" alt="barra de complementos"><br>
<span style="font-weight: bold;">Figura
6</span>: Barra inferior com
funções complementares.<br>
<br>
• <span style="font-weight: bold;">Árvores</span>:
mostram
opções
organizadas de forma hierárquica e representadas
graficamente como uma árvore invertida, onde a raiz fica no
topo. A árvore é composta por nós que
podem ser expandidos ou não. Os nós que podem ser
expandidos apresentam um ícone de “+” ou
“-”, indicando o estado atual. Na <span style="font-weight: bold;">Figura 5 </span>você
pode ver um exemplo de árvore.<br>
<br>
• <span style="font-weight: bold;">Dobra
de página</span>:
a dobra é mostrada no
canto inferior direito do mapa e permite que o corpo do mapa seja
alterado, passando a ser desenhado por meio de um programa alternativo.
A dobra permite que você alterne as formas de visualizar o
mapa, ao abrir um mapa baseado no Google Maps ou no OpenLayers,
alternando entre os dois. A <span style="font-weight: bold;">Figura 7</span>
destaca o elemento que controla a dobra de página.<br>
<img src="imagens/Interface/dobra.jpg" style="width: 320px; height: 200px;" alt="dobra de página"><br>
<span style="font-weight: bold;">Figura
7</span>: Controle de dobra de
página. </div>
<ul>
</ul>
</div>
<div class="trail-box-bottom">
<img src="files/trails-box-br.png" class="right" alt="" height="6" width="7"><img src="files/trails-box-bl.png" class="left" alt="" height="6" width="7"></div>
</div>
<div class="trail-box">
<div class="trail-box-header"><img src="files/trails-box-tr.png" class="right" alt="" height="21" width="7"><img src="files/trails-box-tl.png" class="left" alt="" height="21" width="7"><comment title=" here is the box header " xmlns="http://disruptive-innovations.com/zoo/nvu"><comment title=" here is the box header " xmlns="http://disruptive-innovations.com/zoo/nvu"></comment></comment>
<h1>Formas de
visualização da Interface</h1>
</div>
<div class="trail-box-content">
<br>
Os componentes de
um mapa
podem ser posicionados e apresentados de formas variadas. A
visualização pode ser gerada com base em
diferentes
programas, como o
OpenLayers, GoogleMaps ou GoogleEarth. Cada um desses programas
possui características próprias, que
alteram a
forma como o usuário interage com o mapa.<br>
Na interface OpenLayers, todas as
funcionalidades do software podem ser utilizadas e o desenho das
camadas do mapa é mais eficiente em
relação
às outras formas de visualização. O
OpenLayers
é a forma padrão de
interação do
i3GeoSaúde, como pode ser visto na <span style="font-weight: bold;">Figura 8</span>.<br>
<br>
<br>
<img src="imagens/Interface/i3GEO%20%20%20OpenLayers.png" style="width: 584px; height: 408px;" alt="figura1">
<br>
<span style="font-weight: bold;">Figura
8</span>: Interface OpenLayers<br>
<br>
<br>
A interface Google Maps permite o uso da
base
cartográfica do Google, possibilitando
visualização tanto de ruas quanto imagens de
satélite, conforme pode ser visto na <span style="font-weight: bold;">Figura 9</span>.
A
barra de navegação é diferente do
padrão
OpenLayers, e o
desenho das
camadas do mapa pode ser mais lenta, em razão da
necessária conexão à internet para
acesso ao
Google Maps. A inclusão de
toponímia e símbolos pontuais podem ficar
comprometidos
nessa interface, uma vez que todas as camadas são desenhadas
por
partes, podendo ocorrer problemas nas bordas que compõem os
quadros do mapa. Um conjunto de
botões é mostrado no canto superior direito para
permitir
a escolha do tipo de mapa (ruas ou imagem de satélite).<br>
<br>
<br>
<br>
<img src="imagens/Interface/i3GEOGoogleMaps.png" style="width: 584px; height: 414px;" alt="figura2">
<br>
<span style="font-weight: bold;">Figura
9</span>: Interface Google Maps.<br>
<br>
Tanto o OpenLayers quanto o Google Maps apresentam o
mapa em
um plano 2D. Já a interface GoogleEarth permite que o mapa
seja
visto na perspectiva 3D,
como pode ser visto na forma de globo na <span style="font-weight: bold;">Figura
10</span>.<br>
Observe que a barra de botões
é
colocada em uma janela flutuante, e não existe a
possibilidade de
uso das guias retráteis, sendo necessário
mantê-las
fixas. Essa interface utiliza uma barra de
navegação mais
complexa, uma vez que o globo pode ter pontos de vista diferentes para
acomodar a visualização do relevo da
superfície do
globo.<br>
<br>
<br>
<br>
<img src="imagens/Interface/I3GEOEarth.jpg" style="width: 601px; height: 454px;" alt="figura3"><br>
<span style="font-weight: bold;">Figura
10</span>: Interface Google
Earth.<br>
<br>
</div>
<div class="trail-box-bottom">
<br>
</div>
</div>
<div class="trail-box">
<div class="trail-box-header"><img src="files/trails-box-tr.png" class="right" alt="" height="21" width="7"><img src="files/trails-box-tl.png" class="left" alt="" height="21" width="7"><comment title=" here is the box header " xmlns="http://disruptive-innovations.com/zoo/nvu"><comment title=" here is the box header " xmlns="http://disruptive-innovations.com/zoo/nvu"></comment></comment>
<h1>Outros componentes presentes
na
Interface</h1>
</div>
<div class="trail-box-content"><br>
O menu padrão, contendo as principais funcionalidades do
i3GeoSaúde,
contém sete ítens conforme mostrado na <span style="font-weight: bold;">Figura 11</span>.<br>
<img src="imagens/Interface/barramenususpenso.jpg" style="width: 684px; height: 36px;" alt="menususpenso"><br>
<span style="font-weight: bold;">Figura
11</span>: Menu suspenso.<br>
<br>
• <span style="font-weight: bold;">Admin/Login</span>: Utilizado
para fazer
autenticação do
usuário e ter acesso às funcionalidades de
administração,
caso o usuário tenha direitos de administrador.<br>
<br>
• <span style="font-weight: bold;">Marcadores</span>: Permite salvar a extensão da vista atual (nível de zoom e localização da vista no mapa) para ser retomada depois.<br>
<br>
•<span style="font-weight: bold;"> Ferramentas</span>: Acesso
rápido às
ferramentas que
atuam sobre as camadas que foram carregadas para
visualização no i3GeoSaúde.
As mesmas operações podem estar presentes em
outros
lugares da interface, como na árvore de camadas.<br>
<br>
• <span style="font-weight: bold;">Aplicativos</span>: Links que
abrem o mapa com diferentes desenhos e aplicativos que funcionam em
apoio ao i3GeoSaúde. Entre eles temos
Serviços, Download, Tela remota, Gerador de links e
parâmetros de inicialização e
Hiperbólica.<br>
<br>
• <span style="font-weight: bold;">Arquivo</span>: Ppções que permitem salvar,
recuperar e
compartilhar o mapa atual.<br>
<br>
• <span style="font-weight: bold;">Análise</span>: Operações de
análise
geográfica, descritas em Grades, Distância entre
pontos, "N"
pontos em polígono, Ponto em polígono/raster,
Distribuição de pontos, Centro médio,
Dissolve,
Geometrias, Entorno (buffer), Agrupa, Centróide,
Gráfico
e Linha do tempo.<br>
<br>
• <span style="font-weight: bold;">Ajuda</span>: Nesse
ítem são mostrados vários
links que
permitem obter mais informações sobre o
i3GeoSaúde.
Destacam-se os que indicam a documentação do
projeto, e a lista de funções. Essa
lista oferece
uma visão geral de todas as funções do
i3GeoSaúde e
links adicionais para obter ajuda sobre cada uma.<br>
<br>
Quanto à barra de botões, apresentada na <span style="font-weight: bold;">Figura 12,</span>
é importante destacar as funcionalidades, pois boa parte da
interação e tarefas do usuário com o
cartograma
ocorre nessa ferramanta. Para mais obter mais
informações
sobre as principais tarefas do usuário, <span style="text-decoration: underline;"></span><a target="_blank" href="OperacaoSobreMapa.html">veja
mais
detalhes em "principais operações sobre os mapas"</a><br>
<br>
<br>
<img src="imagens/Interface/Barrademenu.png" style="width: 803px; height: 35px;" alt="barrademenu"><br>
<span style="font-weight: bold;">Figura
12</span>: barra de Botões<br>
<br>
Outro componente frequentemente utilizado pelo usuário,
destacamos as guias ou abas laterais. Tais guias contém as
opções que controlam as camadas, legenda e
catálogo de acesso aos dados. A seguir apresentaremos
algumas das opções desse recurso.<br>
<br>
• <span style="font-weight: bold;">Mapa</span>:
Ao clicar no
ícone <img src="imagens/Interface/figura1.jpg" style="width: 31px; height: 31px;" alt="figura1">
surgirá três árvores principais:
Opção
de
"busca rápida", Propriedades do mapa (<span style="font-weight: bold;">Propriedades</span>),
Camadas de fundo
(<span style="font-weight: bold;">Camadas
de fundo</span>) e <span style="font-weight: bold;">Temas</span>,
que
permitem maior fluidez de visualização,
interação e análise sobre o mapa. Tais
opções podem ser vistas na <span style="font-weight: bold;"></span><span style="font-weight: bold;">Figura
13</span>.<br>
<br>
<img src="imagens/Interface/GuiaMapa.png" style="width: 246px; height: 220px;" alt="guiamapa"><br>
<span style="font-weight: bold;">Figura
13</span>: Guia do Mapa.<br>
<br>
• <span style="font-weight: bold;">Catálogo</span>:
mostra
por meio do ícone <img src="imagens/Interface/figura2.jpg" style="width: 32px; height: 29px;" alt="figura2">
opções
que permitem
adicionar novas camadas ao mapa atual. Essa guia contém uma
opção de busca, para localizar dados existentes
no
catálogo; um bloco de ícones com
opções
como upload, acesso à WMS, etc.; um ítem com a
lista de
serviços WMS cadastrados e um item para cada menu
disponível (Inclusão de uma camada no mapa,
Inclusão de uma camada baseada em serviços WMS e
Localizando dados no catálogo). A <span style="font-weight: bold;">Figura 14</span>
mostra um exemplo da Guia de Catálogo.<br>
<br>
<img src="imagens/Interface/guiacatalogo.png" style="width: 272px; height: 276px;" alt="guia catalogo"><br>
<span style="font-weight: bold;">Figura
14</span>: Guia de
Catálogo.<br>
<br>
• <span style="font-weight: bold;">Legenda</span>:
Ao clicar no
ícone <img src="imagens/Interface/figura3.jpg" style="width: 34px; height: 32px;" alt="figura3"> é
apresentado
os temas conforme pode ser visto no exemplo da <span style="font-weight: bold;">Figura 15</span>.<br>
<br>
<img src="imagens/Interface/guialegenda.png" style="width: 256px; height: 119px;" alt="guialegenda"><br>
<span style="font-weight: bold;">Figura
15</span>:Exemplo de temas do
Guia de legenda.<br>
<br>
<br>
</div>
</div>
<div class="imginicio"><a href="#top"><img src="files/topo.gif" title="Topo" style="border: 0px solid ; width: 41px; height: 35px;" alt="Topo"></a></div>
<br>
<br>
</div>
</div>
</div>
</body></html>