Download as
Browse Code »

Commit d8b52d5bbffee7012cc06315d9e456c65353cf80

Authored by Edmar Moretti
1 parent f1d21202
Exists in master

--no commit message

Showing 2 changed files with 307 additions and 855 deletions   Show diff stats
docs/Ferramentadeanalise.html
  Diff comments   View file @d8b52d5
1 1 <!DOCTYPE html>
2   -<html lang="pt-br"><head>
  2 +<html lang="pt-br">
  3 +<head>
  4 +<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  5 +<meta charset="UTF-8">
  6 +<title>Ferramentas de Análise</title>
  7 +<link media="screen" href="./files/estilos.css" type="text/css" rel="stylesheet">
  8 +<link rel="stylesheet" type="text/css" href="./files/estilos.css">
  9 +</head>
  10 +<body class="blue-bg">
  11 + <h1>Ferramentas de Análise</h1>
  12 + <p>As ferramentas de análise permitem delimitar fronteiras e traçar comparativos de tempo apresentando o tema ao usuário de forma intuitiva. A seguir, descrevemos cada ícone da janela flutuante "Análise". Encontrando as opções de análise
  13 + <p>No menu suspenso, clique em "Ferramentas", em seguida clique no ítem "Cartogramas estatísticos".<div class="imagemExemplo">
  14 + <img src="imagens/Analise/exemplo03%20Mar.%2011%2014.49.jpg">
  15 + <p> Menu Ferramentas.
3 16  
  17 + </div>
  18 + <p> Em seguida, será apresentada a janela flutuante "Cartogramas estatísticos". Nesta janela clique no botão "Análise".
  19 + <div class="imagemExemplo">
  20 + <img src="imagens/Analise/manalise02%20Mar.%2018%2015.03.jpg" >
  21 + <p> Janela flutuante "Cartogramas estatísticos".
  22 + </div>
  23 + <p> Uma vez clicado o botão "Análise", será apresentada a janela flutuante "Análise" contendo as opções de análise, em forma de botões. Perceba que há uma caixa denominada "Ativar a camada", na qual identifica em que camada (tema) do cartograma será aplicada a operação de análise.
  24 + <div class="imagemExemplo">
  25 + <img src="imagens/Analise/manalise01%20Mar.%2019%2010.16.jpg" >
  26 + <p> Janela com opções de Análise.
4 27  
  28 + </div>
  29 + <h2>Ferramentas de Análise</h2>
  30 + <p>
  31 + Uma vez na janela "Análise", iremos esclarecer a funcionalidade de cada umdos ítens presentes. Observe que cada função de análise ativa uma janela flutuante sobre o mapa.
  32 + <p>
  33 + <img src="imagens/Analise/open-street-maps.png" style="width: 24px; height: 24px;" alt="foco"> <span style="font-weight: bold;">Focar</span>: Foca no Mapa por meio da janela flutuante "Localiza limite", para determinar os limites geográficos no cartograma, a partir das unidades Estado, Município e
  34 + Bairro, conforme a necessidade de observação que o usuário deseja. Para aplicar essa função, basta escolher o nível da unidade territorial e clicar no ícone da "lupa", ao lado da unidade. A figura mostra um exemplo para os limites&nbsp;do bairro de "Nazaré", localizado no Estado do "Pará", Municipio de "Belém".
  35 + <div class="imagemExemplo">
  36 + <img src="imagens/Analise/analise223.jpg" >
  37 + <p>Localizar limite para um bairro.
5 38  
  39 + </div>
  40 + <p>
  41 + <img src="imagens/Analise/open-street-maps-show.png" style="width: 24px; height: 24px;" alt="mostralimite">
  42 + <span style="font-weight: bold;">Mostrar limite</span>: &nbsp;Mostra os limites geográficos que estão cadastrados para o cartograma, podendo ser configurada a cor (o padrão é "vermelho"), &nbsp;a largura da borda do limite, e incluir também os nomes dos estados, municipios ou bairros que foi escolhido essa finalidade. Veja na figura um exemplo de janela flutuante para a função "Mostrar Limites".
  43 + <div class="imagemExemplo">
  44 + <img src="imagens/Analise/analise207.jpg" >
  45 + <p>Definição de limites.
6 46  
7   - <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
8   - <meta charset="UTF-8"><title>Ferramentas de Análise</title>
  47 + </div>
  48 + <p> Considere o seguinte exemplo: se o limite escolhido foi "Bairro", sem a identificação dos nomes do limite e com a cor padrão (vermelho), aplicado ao município de Belém, você verá um mapa como o visto na figura.
  49 + <div class="imagemExemplo">
  50 + <img src="imagens/Analise/analise222.jpg" style="width: 229px; height: 196px;" alt="limite">
  51 + <p>Exemplo de limite de bairros.
  52 + </div>
  53 + <p>
  54 + <img src="imagens/Analise/open-street-maps-filtro.png" style="width: 24px; height: 24px;" alt="limitoexpecifico">
  55 + <span style="font-weight: bold;">Filtro Geográfico</span>: Ao acionar esse botão será mostrado no mapa apenas os dados de determinado limite geográficos, conforme a opção da unidade geográfica que se deseja trabalhar. A figura&nbsp; mostra a janela com um exemplo de filtro aplicado até ao nível de município.
  56 + <div class="imagemExemplo">
  57 + <img src="imagens/Analise/analise208.jpg" >
  58 + <p> Janela de filtro geográfico.
  59 + </div>
  60 + <p>
  61 + <img src="imagens/Analise/open-street-maps-filtrotime.png" style="width: 24px; height: 24px;" alt="tempo">
  62 + <span style="font-weight: bold;">&nbsp;Filtro de tempo</span>: Mostra apenas os dados de um período de tempo, quando o tema conter parâmetros temporais (ano, mês, dia, hora). A figura mostra um exemplo para a camada "População residente..." que possui o parâmetro "ano", com o valor "2000".
  63 + <div class="imagemExemplo">
  64 + <img src="imagens/Analise/analise209.jpg" >
  65 + <p> Exemplo da função&nbsp; "Filtro temporal".
  66 + </div>
  67 + <p>
  68 + <img src="imagens/Analise/table.png" style="width: 24px; height: 24px;" alt="tabelaatributo">
  69 + <span style="font-weight: bold;">Tabela de atibutos</span>: Mostra uma tabela contendo os dados do limite geográfico selecionado. A figura mostra os dados do limite "Bairro", representando os registros dos bairros do município de Belém (Pará). &nbsp;
  70 + Além do relatório com os registros de dados, é possível exibir estatísticas, gráficos e produzir um relatório personalizado (escolhendo quais colunas deseja exibir).
  71 + <div class="imagemExemplo">
  72 + <img src="imagens/Analise/analise224.jpg" >
  73 + <p> Tabela de atributos (exemplo).
  74 + </div>
  75 + <p>
  76 + <img src="imagens/Analise/manalise02%20Mar.%2019%2010.25.jpg" style="width: 23px; height: 23px;" alt="graficointerativo">
  77 + <span style="font-weight: bold;">Gráfico interativo</span>: Gera um Gráfico (em diversos formatos) com os dados do tema (camada) selecionada. A figura mostra alguns tipos de gráficos (pizza, área 2d, etc) que podem ser aplicados. Além do gráfico, é possível especificar quais dados serão exibidos e a base de dados em forma de arquivo CSV.
9 78  
10   - <link media="screen" href="./files/estilos.css" type="text/css" rel="stylesheet">
11   - <link rel="stylesheet" type="text/css" href="./files/estilos.css"></head><body class="blue-bg">
12   -<div id="wrapper-flex">
13   -<div style="background-color: white;">
14   -<div class="f-page-auto-cell" id="doc">
15   -<div class="imginicio"><img onclick="window.history.back()" style="border: 0px solid ; width: 40px; height: 40px;" alt="inicio" src="files/inicio.gif"></div>
16   -<h1>Ferramentas de
17   -Análise<span style="color: rgb(51, 51, 51); font-family: Verdana,Helvetica,Arial; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255); display: inline ! important; float: none;"></span></h1>
18   -As ferramentas de análise permitem delimitar fronteiras e
19   -traçar
20   -comparativos de tempo apresentando o tema ao usuário de forma
21   -intuitiva. A
22   -seguir, descrevemos cada ícone da janela flutuante
23   -"Análise".<br>
24   -<br>
25   -<div class="trail-box">
26   -<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>
27   -<h1>Encontrando as
28   -opções de análise<a name="inicio_install_windows"></a></h1>
29   -</div>
30   -<div class="trail-box-content">No
31   -menu suspenso, clique em "Ferramentas", em seguida clique no
32   -ítem "Cartogramas estatísticos".
33   -<br>
34   -<br>
35   -<div class="imagemExemplo" >
36   -<img src="imagens/Analise/exemplo03%20Mar.%2011%2014.49.jpg" style="width: 283px; height: 522px;" alt="ferrramentas"><br>
37   -Menu Ferramentas.
38   -</div>
39   -<br>
40   -Em seguida, será apresentada a janela flutuante "Cartogramas
41   -estatísticos". Nesta janela
42   -clique no botão "Análise".<br>
43   -<br>
44   -<div class="imagemExemplo" >
45   -<img src="imagens/Analise/manalise02%20Mar.%2018%2015.03.jpg" style="width: 287px; height: 302px;" alt="analize"><br>
46   -Janela
47   -flutuante "Cartogramas estatísticos".
48   -</div>
49   -<br>
50   -Uma vez clicado o botão "Análise",
51   -será
52   -apresentada a janela
53   -flutuante "Análise" contendo as opções
54   -de
55   -análise, em forma de botões.
56   -Perceba que há uma caixa denominada "Ativar a camada", na
57   -qual
58   -identifica em que camada (tema) do cartograma será aplicada
59   -a
60   -operação de análise.<br>
61   -<br>
62   -<div class="imagemExemplo" >
63   -<img src="imagens/Analise/manalise01%20Mar.%2019%2010.16.jpg" style="width: 280px; height: 225px;" alt="analise"><br>
64   -Janela com
65   -opções de Análise.
66   -</div>
67   -</div>
68   -<div class="trail-box-bottom">
69   -<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>
70   -</div>
71   -<div class="trail-box">
72   -<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>
73   -<h1>Ferramentas de
74   -Análise<a name="inicio_install_windows"></a></h1>
75   -</div>
76   -<div class="trail-box-content">
77   -<ul>
78   -</ul>
79   -<span style="font-weight: bold;"></span>Uma
80   -vez na janela
81   -"Análise", iremos esclarecer a funcionalidade de cada umdos
82   -ítens presentes. Observe que cada
83   -função de análise ativa uma janela
84   -flutuante sobre o mapa.<br>
85   -<br>
86   -<img src="imagens/Analise/open-street-maps.png" style="width: 24px; height: 24px;" alt="foco">
87   -<span style="font-weight: bold;">Focar</span>:
88   -Foca no Mapa por meio da
89   -janela flutuante "Localiza limite", para determinar os limites
90   -geográficos no cartograma, a partir das unidades Estado,
91   -Município e Bairro, conforme a necessidade de
92   -observação que o usuário deseja. Para
93   -aplicar essa
94   -função, basta escolher o nível da
95   -unidade
96   -territorial e clicar no ícone da "lupa", ao lado da unidade.
97   -A figura mostra um exemplo
98   -para os limites&nbsp;do bairro de "Nazaré", localizado
99   -no Estado do "Pará", Municipio
100   -de "Belém".<br>
101   -<br>
102   -<div class="imagemExemplo" >
103   -<img src="imagens/Analise/analise223.jpg" alt="limitelocalisar"><br>
104   -Localizar limite para um
105   -bairro.
106   -</div>
107   -<br>
108   -<img src="imagens/Analise/open-street-maps-show.png" style="width: 24px; height: 24px;" alt="mostralimite">
109   -<span style="font-weight: bold;">Mostrar
110   -limite</span>:
111   -&nbsp;Mostra os limites geográficos que estão
112   -cadastrados
113   -para o cartograma, podendo ser configurada a cor (o padrão
114   -é "vermelho"), &nbsp;a largura da borda do limite, e
115   -incluir
116   -também os nomes dos
117   -estados,
118   -municipios ou bairros que foi escolhido essa finalidade. Veja na figura
119   -um exemplo de janela flutuante para a função
120   -"Mostrar Limites".<br>
121   -<br>
122   -<div class="imagemExemplo" >
123   -<img src="imagens/Analise/analise207.jpg" alt="mostrar lmite"><br>
124   -definição de limites.
125   -</DIV>
126   -<br>
127   -Considere o seguinte exemplo: se o limite escolhido foi "Bairro", sem a
128   -identificação dos nomes do limite e com a cor
129   -padrão (vermelho), aplicado ao município de
130   -Belém,
131   -você verá um mapa como o visto na figura.<br>
132   -<br>
133   -<div class="imagemExemplo" >
134   -<img src="imagens/Analise/analise222.jpg" style="width: 229px; height: 196px;" alt="limite"><br>
135   -Exemplo de limite de
136   -bairros.
137   -</div>
138   -<br>
139   -<br>
140   -<img src="imagens/Analise/open-street-maps-filtro.png" style="width: 24px; height: 24px;" alt="limitoexpecifico">
141   -<span style="font-weight: bold;">Filtro
142   -Geográfico</span>: Ao
143   -acionar esse botão será
144   -mostrado no mapa apenas os dados de determinado limite
145   -geográficos, conforme a opção da
146   -unidade geográfica que se deseja trabalhar. A figura&nbsp;
147   -mostra a janela com um exemplo de filtro aplicado até ao
148   -nível de município. <br>
149   -<br>
150   -<div class="imagemExemplo" >
151   -<img src="imagens/Analise/analise208.jpg" style="width: 222px; height: 266px;" alt="filtrar"><br>
152   -Janela de filtro
153   -geográfico.
154   -</div>
155   -<br>
156   -<br>
157   -<img src="imagens/Analise/open-street-maps-filtrotime.png" style="width: 24px; height: 24px;" alt="tempo">
158   -<span style="font-weight: bold;">&nbsp;Filtro
159   -de
160   -tempo</span>: Mostra
161   -apenas os dados de um período de tempo, quando o tema conter
162   -parâmetros temporais (ano, mês, dia, hora).
163   -A figura mostra um exemplo para a
164   -camada "População residente..." que possui o
165   -parâmetro "ano", com o valor "2000".<br>
166   -<br>
167   -<div class="imagemExemplo" >
168   -<img src="imagens/Analise/analise209.jpg" style="width: 264px; height: 394px;" alt="filtrotempo"><br>
169   -Exemplo da
170   -função&nbsp; "Filtro temporal".
171   -</div>
172   -<br>
173   -<img src="imagens/Analise/table.png" style="width: 24px; height: 24px;" alt="tabelaatributo">
174   -<span style="font-weight: bold;">Tabela
175   -de atibutos</span>: Mostra uma
176   -tabela contendo os dados do limite geográfico selecionado. A
177   -figura
178   -mostra os dados do
179   -limite "Bairro", representando os registros dos bairros do
180   -município de Belém (Pará). &nbsp;<br>
181   -Além do relatório com os registros de dados,
182   -é
183   -possível exibir estatísticas, gráficos
184   -e produzir
185   -um relatório personalizado (escolhendo quais colunas deseja
186   -exibir).<br>
187   -<br>
188   -<div class="imagemExemplo" >
189   -<img src="imagens/Analise/analise224.jpg" style="width: 536px; height: 454px;" alt="tabale"><br>
190   -Tabela de atributos
191   -(exemplo).
192   -</div>
193   -<br>
194   -<img src="imagens/Analise/manalise02%20Mar.%2019%2010.25.jpg" style="width: 23px; height: 23px;" alt="graficointerativo">
195   -<span style="font-weight: bold;">Gráfico
196   -interativo</span>: Gera um
197   -Gráfico (em diversos formatos) com os dados do tema (camada)
198   -selecionada. A figura
199   -mostra alguns tipos de gráficos (pizza, área 2d,
200   -etc) que
201   -podem ser aplicados. Além do gráfico,
202   -é
203   -possível especificar quais dados serão exibidos e
204   -a base
205   -de dados em forma de arquivo CSV. <br>
206   -<br>
207   -<div class="imagemExemplo" >
208   -<img src="imagens/Analise/analise211.jpg" style="width: 289px; height: 270px;" alt="grafico"><br>
209   -Gráfico
210   -interativo.
211   -</div>
212   -<br>
213   -Após escolher o&nbsp;tipo de
214   -gráfico e definir os dados a serem exibidos,
215   -será apresentado na janela o gráfico com os dados
216   -a
217   -serem analisados. A figura
218   -mostra um&nbsp;&nbsp;exemplo para o gráfico contendo dados sobre população residente no Acre em 2000.<br>
219   -<br>
220   -<div class="imagemExemplo" >
221   -<img src="imagens/Analise/analise226.jpg" style="width: 477px; height: 412px;" alt="grafico"><br>
222   -Exemplo de
223   -gráfico em área simples.
224   -</div>
225   -<br>
226   -<img src="imagens/Analise/layer-opacity.png" style="width: 24px; height: 24px;" alt="opacidade">
227   -<span style="font-weight: bold;">Opacidade</span>:
228   -Controla o
229   -nível
230   -de opacidade (transparência) do cartograma, utilizando-se
231   -para
232   -isso de uma barra deslizante que gradua o nível de
233   -transparência.<br>
234   -<br>
235   -<div class="imagemExemplo" >
236   -<img src="imagens/Analise/analise212.jpg" style="width: 236px; height: 94px;" alt="opacite"><br>
237   -Opacidade.
238   -</div>
239   -<br>
240   -<img src="imagens/Analise/player-forward.png" style="width: 24px; height: 24px;" alt="animacao">
241   -<span style="font-weight: bold;">Animação</span>:
242   -Produz
243   -animações de apresentações
244   -entre temas. O efeito de animação só
245   -ocorrerá se pelo menos dois temas, normalmente temporais
246   -para
247   -uma mesma base de dados, forem selecionados. A figura
248   -mostra dois temas escolhidos para a animação.<br>
249   -<br>
250   -<div class="imagemExemplo" >
251   -<img src="imagens/Analise/analise213.jpg" style="width: 216px; height: 131px;" alt="animacao"><br>
252   -Animação.
253   -</div>
254   -<br>
255   -<img src="imagens/Analise/calculator.png" style="width: 24px; height: 24px;" alt="calculator">
256   -<span style="font-weight: bold;">Alterar
257   -classificação</span>
258   -(da legenda):
259   -Permite editar a legenda, no que se refere às cores das
260   -classes e ao tipo de
261   -classificação (intervalos iguais ou quartil).<br>
262   -<br>
263   -<div class="imagemExemplo" >
264   -<img src="imagens/Analise/analise214.jpg" style="width: 501px; height: 448px;" alt="legenda"><br>
265   -Alterar Legenda.
266   -</div>
267   -<br>
268   -<img src="imagens/Analise/24-to-8-bits.png" style="width: 24px; height: 24px;" alt="Alterarcores">
269   -<span style="font-weight: bold;">Alterar
270   -cores</span>: Altera apenas as cores
271   -das classes do dados da variável presente no tema escolhido.
272   -A figura mostra a janela com
273   -algumas opções de cores.<br>
274   -<br>
275   -<div class="imagemExemplo" >
276   -<img src="imagens/Analise/analise215.jpg" style="width: 301px; height: 430px;" alt="cor"><br>
277   -Cores.
278   -</div>
279   -<br>
280   -<img src="imagens/Analise/mapset.png" style="width: 24px; height: 24px;" alt="cotina"><span style="font-weight: bold;">
281   -Cortina</span>: cria um efeito de
282   -sobreposição e transição
283   -entre temas. O efeito é controlado por uma barra deslizante
284   -presente na janela.<br>
285   -<br>
286   -<div class="imagemExemplo" >
287   -<img src="imagens/Analise/analise216.jpg" style="width: 233px; height: 111px;" alt="cortina"><br>
288   -Cortina.
289   -</div>
290   -<br>
291   -<img src="imagens/Analise/3d-light.png" style="width: 24px; height: 24px;" alt="mapa3d">
292   -<span style="font-weight: bold;">Mapa
293   -temático 3D</span>:
294   -Gera os dados para a representação do mapa em uma
295   -visão 3D, utilizando a técnica utilizada no
296   -Google Earth
297   -(no formato KML). Ao final do processo, é criado um arquivo
298   -KML
299   -que pode ser aberto com o Google Earth, ou baixado pelo link gerado
300   -pelo i3GeoSaúde. A figura mostra algumas
301   -das opções da funcionalidade para o tema
302   -selecionado ("Influenza por bairro...").<br>
303   -<br>
304   -<div class="imagemExemplo" >
305   -<img src="imagens/Analise/analise217.jpg" style="width: 285px; height: 246px;" alt="3d"><br>
306   -Mapa temático
307   -3D.
308   -</div>
309   -<br>
310   -<img src="imagens/Analise/manalise03%20Mar.%2019%2010.52.jpg" style="width: 22px; height: 25px;" alt="e">
311   -<span style="font-weight: bold;">Estatíscas
312   -gerais</span>:
313   -Mostra um resumo das estatísticas de&nbsp;uma
314   -variável
315   -(selecionada para a camada ativa), aplicando-se
316   -funções
317   -estatísticas conhecidas (média, moda,
318   -mediana e outras). A figura
319   -mostra um exemplo para a camada "Influenza por bairro...".<br>
320   -<br>
321   -<div class="imagemExemplo" >
322   -<img src="imagens/Analise/analise218.jpg" style="width: 305px; height: 292px;" alt="estatistica"><br>
323   -Estatísticas.
324   -</div>
325   -<br>
326   -<img src="imagens/Analise/boundary-remove-add.png" style="width: 24px; height: 24px;" alt="contorno">
327   -<span style="font-weight: bold;">Ativa
328   -e desativa
329   -contornos de limites geográficos</span>:
330   -permite exibir ou ocultar as bordas dos limites geográficos.<br>
331   -<br>
332   -<img src="imagens/Analise/manalise04%20Mar.%2019%2010.56.jpg" style="width: 27px; height: 25px;" alt="forma"><span style="font-weight: bold;">Altera
333   -a
334   -forma de representação</span>.
335   -Essa função permite modificar a
336   -apresentação
337   -gráfica dos dados no cartograma, podendo utilizar circulos
338   -com
339   -três opções de formas, ou mantendo o
340   -padrão
341   -de preenchimento da área do limite
342   -geográfico.<br>
343   -<br>
344   -<div class="imagemExemplo" >
345   -<img src="imagens/Analise/analise219.jpg" style="width: 255px; height: 303px;" alt="Forma"><br>
346   -Formas de representação dos dados nos limites.
347   -</div>
348   -<br>Exemplo de preenchimento&nbsp;por meio de ponto.<br>
349   -<br>
350   -<div class="imagemExemplo" >
351   -<img src="imagens/Analise/analise227.jpg" style="width: 407px; height: 367px;" alt="pontos"><br>
352   -Exemplo de preenchimento
353   -com pontos.</div>
354   -<br>
355   -<img src="imagens/Analise/dem.png" style="width: 24px; height: 24px;" alt="mapacalor">
356   -<span style="font-weight: bold;">Mapa
357   -de calor</span>: Exibe um mapa
358   -com
359   -intensidades de cores baseadas nas faixas de valores presentes na
360   -região geográfica selecionada no tema.<br>
361   -<br>
362   -<img src="imagens/Analise/mapset-add.png" style="width: 24px; height: 24px;" alt="congelavisao">
363   -<span style="font-weight: bold;">Congela
364   -visão</span>:
365   -Possibilita a seleção da imagem
366   -em área delimitada da&nbsp;tela, para uma
367   -análise particular.<br>
368   -<br>
369   -<div class="imagemExemplo" >
370   -<img src="imagens/Analise/analise220.jpg" alt="fixo"><br>
371   -Janela&nbsp;
372   -"congelar
373   -visão".
374   -</div>
375   -<br>
376   -<img src="imagens/Analise/label.png" style="width: 24px; height: 24px;" alt="Mostratexto">
377   -<span style="font-weight: bold;">Mostra
378   -os valores como texto:</span>
379   -Mostra os valores como rótulos (com os valores em forma de
380   -texto), sobre os limites geográficos do&nbsp;mapa. A
381   - figura mostra a janela
382   -com algumas das opções da funcionalidade.<br>
383   -<br>
384   -<div class="imagemExemplo" >
385   -<img src="imagens/Analise/analise221.jpg" style="width: 376px; height: 225px;" alt="texto"><br>
386   -Opções para gerar os valores
387   -(Toponímia) nas regiões do mapa.
388   -</div>
389   -<br>
390   -A seguir um exemplo de toponímia
391   -(infomações sobre
392   -o mapa).
393   -No exemplo existem números
394   -que representam a quantidade de incidência de
395   -vítimas de
396   -influenza em cada região geográfica.<br>
397   -<br>
398   -<div class="imagemExemplo" >
399   -<img src="imagens/Analise/analise229.jpg" style="width: 245px; height: 229px;" alt="toponomia"><br>
400   -Exemplo de
401   -toponímia.
402   -</div>
403   -<br>
404   -<img src="../../i3geo/imagens/gisicons/layer-group-add.png" style="width: 24px; height: 24px;" alt=""> <span style="font-weight: bold;">Junta dados das camadas:</span>
405   -Cruza as informações de duas camadas similares ou complementares,
406   -gerando um novo dado. É possível realizar operações como soma e divisão
407   -entre os dados das camadas.<br>
408   -<br>
409   -<div class="imagemExemplo" >
410   -<img style="width: 267px; height: 351px;" alt="" src="imagens/Analise/analise230.jpg"><br>
411   -Exemplo de junção de dados
412   -</div>
413   -</div>
414   -<div class="trail-box-bottom">
415   -<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>
416   -</div>
417   -</div>
418   -<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>
419   -&nbsp;<br>
420   -<br>
421   -</div>
422   -</div>
423   -</div>
424   -</body></html>
  79 + <div class="imagemExemplo">
  80 + <img src="imagens/Analise/analise211.jpg" >
  81 + <p> Gráfico interativo.
  82 + </div>
  83 + <p> Após escolher o&nbsp;tipo de gráfico e definir os dados a serem exibidos, será apresentado na janela o gráfico com os dados a serem analisados. A figura mostra um&nbsp;&nbsp;exemplo para o gráfico contendo dados sobre população residente no Acre em 2000.
  84 +
  85 + <div class="imagemExemplo">
  86 + <img src="imagens/Analise/analise226.jpg" >
  87 + <p> Exemplo de gráfico em área simples.
  88 + </div>
  89 + <p>
  90 + <img src="imagens/Analise/layer-opacity.png" style="width: 24px; height: 24px;" alt="opacidade">
  91 + <span style="font-weight: bold;">Opacidade</span>: Controla o nível de opacidade (transparência) do cartograma, utilizando-se para isso de uma barra deslizante que gradua o nível de transparência.
  92 + <div class="imagemExemplo">
  93 + <img src="imagens/Analise/analise212.jpg" >
  94 + <p> Opacidade.
  95 + </div>
  96 + <p>
  97 + <img src="imagens/Analise/player-forward.png" style="width: 24px; height: 24px;" alt="animacao">
  98 + <span style="font-weight: bold;">Animação</span>: Produz animações de apresentações entre temas. O efeito de animação só ocorrerá se pelo menos dois temas, normalmente temporais para uma mesma base de dados, forem selecionados. A figura mostra dois temas escolhidos para a animação.
  99 + <div class="imagemExemplo">
  100 + <img src="imagens/Analise/analise213.jpg" >
  101 + <p> Animação.
  102 + </div>
  103 + <p>
  104 + <img src="imagens/Analise/calculator.png" style="width: 24px; height: 24px;" alt="calculator">
  105 + <span style="font-weight: bold;">Alterar classificação</span> (da legenda): Permite editar a legenda, no que se refere às cores das classes e ao tipo de classificação (intervalos iguais ou quartil).
  106 + <div class="imagemExemplo">
  107 + <img src="imagens/Analise/analise214.jpg" >
  108 + <p> Alterar Legenda.
  109 + </div>
  110 + <p>
  111 + <img src="imagens/Analise/24-to-8-bits.png" style="width: 24px; height: 24px;" alt="Alterarcores">
  112 + <span style="font-weight: bold;">Alterar cores</span>: Altera apenas as cores das classes do dados da variável presente no tema escolhido. A figura mostra a janela com algumas opções de cores.
  113 + <div class="imagemExemplo">
  114 + <img src="imagens/Analise/analise215.jpg" >
  115 + <p> Cores.
  116 + </div>
  117 + <p>
  118 + <img src="imagens/Analise/mapset.png" style="width: 24px; height: 24px;" alt="cotina">
  119 + <span style="font-weight: bold;"> Cortina</span>: cria um efeito de sobreposição e transição entre temas. O efeito é controlado por uma barra deslizante presente na janela.
  120 +
  121 + <div class="imagemExemplo">
  122 + <img src="imagens/Analise/analise216.jpg" >
  123 + <p> Cortina.
  124 + </div>
  125 + <p>
  126 + <img src="imagens/Analise/3d-light.png" style="width: 24px; height: 24px;" alt="mapa3d">
  127 + <span style="font-weight: bold;">Mapa temático 3D</span>: Gera os dados para a representação do mapa em uma visão 3D, utilizando a técnica utilizada no Google Earth (no formato KML). Ao final do processo, é criado um arquivo KML que pode ser aberto com o Google Earth, ou baixado pelo link gerado pelo i3GeoSaúde. A figura mostra algumas das opções da funcionalidade para o tema selecionado ("Influenza por bairro...").
  128 + <div class="imagemExemplo">
  129 + <img src="imagens/Analise/analise217.jpg" >
  130 + <p> Mapa temático 3D.
  131 + </div>
  132 + <p>
  133 + <img src="imagens/Analise/manalise03%20Mar.%2019%2010.52.jpg" style="width: 22px; height: 25px;" alt="e">
  134 + <span style="font-weight: bold;">Estatíscas gerais</span>: Mostra um resumo das estatísticas de&nbsp;uma variável (selecionada para a camada ativa), aplicando-se funções estatísticas conhecidas (média, moda, mediana e outras). A figura mostra um exemplo para a camada "Influenza por bairro...".
  135 + <div class="imagemExemplo">
  136 + <img src="imagens/Analise/analise218.jpg" >
  137 + <p> Estatísticas.
  138 + </div>
  139 + <p>
  140 + <img src="imagens/Analise/boundary-remove-add.png" style="width: 24px; height: 24px;" alt="contorno">
  141 + <span style="font-weight: bold;">Ativa e desativa contornos de limites geográficos</span>: permite exibir ou ocultar as bordas dos limites geográficos.
  142 +<p>
  143 + <img src="imagens/Analise/manalise04%20Mar.%2019%2010.56.jpg" style="width: 27px; height: 25px;" alt="forma">
  144 + <span style="font-weight: bold;">Altera a forma de representação</span>. Essa função permite modificar a apresentação gráfica dos dados no cartograma, podendo utilizar circulos com três opções de formas, ou mantendo o padrão de preenchimento da área do limite geográfico.
  145 + <div class="imagemExemplo">
  146 + <img src="imagens/Analise/analise219.jpg" >
  147 + <p> Formas de representação dos dados nos limites.
  148 + </div>
  149 + <p>Exemplo de preenchimento&nbsp;por meio de ponto.
  150 + <div class="imagemExemplo">
  151 + <img src="imagens/Analise/analise227.jpg" >
  152 + <p> Exemplo de preenchimento com pontos.
  153 + </div>
  154 + <p>
  155 + <img src="imagens/Analise/dem.png" style="width: 24px; height: 24px;" alt="mapacalor">
  156 + <span style="font-weight: bold;">Mapa de calor</span>: Exibe um mapa com intensidades de cores baseadas nas faixas de valores presentes na região geográfica selecionada no tema.
  157 + <p>
  158 + <img src="imagens/Analise/mapset-add.png" style="width: 24px; height: 24px;" alt="congelavisao">
  159 + <span style="font-weight: bold;">Congela visão</span>: Possibilita a seleção da imagem em área delimitada da&nbsp;tela, para uma análise particular.
  160 + <div class="imagemExemplo">
  161 + <img src="imagens/Analise/analise220.jpg" alt="fixo">
  162 + <p> Janela&nbsp; "congelar visão".
  163 +
  164 + </div>
  165 + <p>
  166 + <img src="imagens/Analise/label.png" style="width: 24px; height: 24px;" alt="Mostratexto">
  167 + <span style="font-weight: bold;">Mostra os valores como texto:</span> Mostra os valores como rótulos (com os valores em forma de texto), sobre os limites geográficos do&nbsp;mapa. A figura mostra a janela com algumas das opções da funcionalidade.
  168 + <div class="imagemExemplo">
  169 + <img src="imagens/Analise/analise221.jpg" >
  170 + <p> Opções para gerar os valores (Toponímia) nas regiões do mapa.
  171 + </div>
  172 + <p> A seguir um exemplo de toponímia (infomações sobre o mapa). No exemplo existem números que representam a quantidade de incidência de vítimas de influenza em cada região geográfica.
  173 + <div class="imagemExemplo">
  174 + <img src="imagens/Analise/analise229.jpg" >
  175 + <p> Exemplo de toponímia.
  176 + </div>
  177 + <p>
  178 + <img src="../../i3geo/imagens/gisicons/layer-group-add.png" style="width: 24px; height: 24px;" alt="">
  179 + <span style="font-weight: bold;">Junta dados das camadas:</span> Cruza as informações de duas camadas similares ou complementares, gerando um novo dado. É possível realizar operações como soma e divisão entre os dados das camadas.
  180 + <div class="imagemExemplo">
  181 + <img src="imagens/Analise/analise230.jpg">
  182 + <p> Exemplo de junção de dados
  183 + </div>
  184 +</body>
  185 +</html>
... ...
docs/Interface.html
  Diff comments   View file @d8b52d5
1 1 <!DOCTYPE html>
2   -<html><head>
3   - <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
4   - <meta charset="UTF-8"><title>i3GeoSaude</title>
5   -
6   - <link media="screen" href="./files/estilos.css" type="text/css" rel="stylesheet">
7   - <link rel="stylesheet" type="text/css" href="./files/estilos.css"></head><body class="blue-bg">
8   -
9   -<div style="text-align: justify;" id="wrapper-flex">
10   -<div style="background-color: white;">
11   -<div class="f-page-auto-cell" id="doc">
12   -<div class="imginicio"><img onclick="window.history.back()" style="border: 0px solid ; width: 40px; height: 40px;" alt="inicio" src="files/inicio.gif"></div>
13   -<h1>Funcionalidades presentes na
14   -Interface</h1>
15   -As funcionalidas da interface referem-se aos recursos
16   -implementados no i3GeoSaúde para permitir que os
17   -usuário
18   -interajam com os mapas de forma facilitada e intuitiva. A seguir
19   -detalhamos os principais recursos presentes na
20   -interface com usuário. <br>
21   -<br>
22   -<div class="trail-box">
23   -<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>
24   -<h1>Visão geral dos
25   -mapas interativos
26   -</h1>
27   -</div>
28   -<div class="trail-box-content">
29   -<div style="text-align: justify;">&nbsp;
30   -Cada instalação do i3GeoSaúde
31   -pode conter mapas com diferentes objetivos e desenhos,
32   -desenvolvidos conforme as necessidades de seus usuários.
33   -Existem três interfaces
34   -básicas de mapas&nbsp;que
35   -normalmente são utilizadas pelo i3GeoSaúde. Em
36   -quaisquer
37   -uma delas
38   -podem estar presentes os seguintes elementos.<br>
39   -<br>
40   -<div class="imagemExemplo" >
41   -<img src="imagens/Interface/componentesbasicos.jpg" style="width: 648px; height: 370px;" alt="componentebasico"><br>
42   -&nbsp; &nbsp;<span style="font-weight: bold;">Figura 1</span>:
43   -Interface com suas funcionalidades.
44   -</div>
45   -<br>
46   -• <span style="font-weight: bold;">Corpo
47   -do mapa</span>:
48   -área onde as camadas que
49   -compõem o mapa são desenhadas. Permite a
50   -navegação sobre o mapa, como as
51   -operações de aproximação
52   -(zoom) ou o deslocamento da abrangência espacial do mapa
53   -("pan"). As operações atuam em um simples
54   -“clique” sobre o mapa, em
55   -um determinado ponto geográfico, além disso a
56   -ferramenta
57   -exibe informações básicas sobre os
58   -pontos
59   -georeferenciados ao capturar o posicionamento do mouse em movimento.
60   -Veja abaixo detalhes sobre o corpo do mapa e as coordenadas
61   -geográficas para o ponto clicado sobre o mapa.<br>
62   -<br>
63   -<div class="imagemExemplo" >
64   -<img src="imagens/Interface/corpomapa_recursos.jpg" style="width: 648px; height: 356px;" alt="corpo do mapa e coordenadas"><br>
65   -Corpo do mapa e a barra com as coordenadas do ponto
66   -geográfico.
67   -</div>
68   -<br>
69   -• <span style="font-weight: bold;">Menu
70   -suspenso</span>: barra
71   -contendo opções principais da ferramenta
72   -i3GeoSaúde,
73   -que&nbsp;contém outros submenus que são
74   -expandidos para
75   -mostrar ítens
76   -secundários. Como visto na figura abaixo,
77   -as opções permitem abrir diversas funcionalidades
78   -e
79   -outros aplicativos. Essa barra fica normalmente localizada na
80   -parte superior da interface.&nbsp; <br>
81   -<br>
82   -<div class="imagemExemplo" >
83   -<img src="imagens/Interface/barramenususpenso.jpg" style="width: 684px; height: 36px;" alt="barra de menu suspensa"><br>
84   -Menu suspenso.
85   -</div>
86   -<br>
87   -• <span style="font-weight: bold;">Barra
88   -de botões</span>:
89   -barra de ícones que
90   -permitem acionar determinadas funcionalidades de uso mais
91   -frequente.&nbsp; Na barra ficam ícones que permitem
92   -operações de interação
93   -direta com o mapa, como navegação,
94   -posicionamento, zoom, e outros que abrem
95   -outras janelas de opções. Como podemos ver na figura,
96   -há duas versões disponíveis, que
97   -são
98   -acionadas pelo controle posicionado à direita da barra: a
99   -barra
100   -padrão (com onze funções) e a barra
101   -estendida,
102   -contendo opções adicionais ao padrão.<br><br>
103   -<div class="imagemExemplo" >
104   -<img src="imagens/Interface/barrabotoes.jpg" style="width: 798px; height: 77px;" alt="barra de botoes"><br>
105   -Barra de botões
106   -(versão padrão e estendida).
107   -</div>
108   -<br>
109   -• <span style="font-weight: bold;">Barra
110   -de
111   -navegação</span>:
112   -É um
113   -tipo especial de barra de botões que apresenta
114   -operações de navegação.
115   -São úteis para se ter acesso rápido a
116   -esse tipo de operação e também em
117   -dispositivos móveis, como os “tablets”.
118   -Em alguns casos, em função da área de
119   -tela disponível, a barra de botões
120   -padrão pode não existir, sendo mostrada apenas a
121   -barra de navegação.<br>
122   -<br>
123   -• <span style="font-weight: bold;">Janela
124   -flutuante</span>:
125   -consiste em um elemento gráfico
126   -que pode ser movimentado sobre o mapa e que contém
127   -opções para o uso de determinada funcionalidade
128   -ou que apenas apresenta textos explicativos. <br>
129   -<br>
130   -• <span style="font-weight: bold;">Guias
131   -ou abas laterais</span>:
132   -as guias são
133   -áreas retráteis, podendo
134   -estar&nbsp;escondidas ou não. Normalmente
135   -contém elementos de maior destaque no mapa como as
136   -opções que controlam as camadas, legenda e
137   -catálogo de acesso aos dados. Os conteúdos das
138   -guias podem ainda ser apresentados de diferentes formas, como as guias
139   -do tipo “sanfona” ou acionadas por meio de
140   -ícones. A figura seguinte
141   -mostra a guia de camadas localizada na lateral direita da interface,
142   -ocm destaque para o controle que exibe e oculta a guia.<br><br>
143   -<div class="imagemExemplo" >
144   -<img src="imagens/Interface/guialateral.jpg" style="width: 333px; height: 296px;" alt="guia lateral"><br>
145   -Guia lateral para
146   -operações sobre as camadas (temas).
147   -</div>
148   -<br>
149   -• <span style="font-weight: bold;">Complementos</span>:
150   -os
151   -complementos ficam localizados em uma barra na parte inferior da
152   -interface. Apresenta
153   -diferentes informações, como a barra de escala,
154   -escala numérica, bandeiras de idiomas, ícones de
155   -redes sociais, posição do mouse, etc. A figura
156   -apresenta a barra de complementos normalmente encontrada no
157   -i3GeoSaúde.<br>
158   -<br>
159   -<div class="imagemExemplo" >
160   -<img src="imagens/Interface/barracomplementos.jpg" style="width: 720px; height: 15px;" alt="barra de complementos"><br>
161   -Barra inferior com
162   -funções complementares.
163   -</div>
164   -<br>
165   -• <span style="font-weight: bold;">Árvores</span>:
166   -mostram
167   -opções
168   -organizadas de forma hierárquica e representadas
169   -graficamente como uma árvore invertida, onde a raiz fica no
170   -topo. A árvore é composta por nós que
171   -podem ser expandidos ou não. Os nós que podem ser
172   -expandidos apresentam um ícone de “+” ou
173   -“-”, indicando o estado atual.<br>
174   -<br>
175   -• <span style="font-weight: bold;">Dobra
176   -de página</span>:
177   -a dobra é mostrada no
178   -canto inferior direito do mapa e permite que o corpo do mapa seja
179   -alterado, passando a ser desenhado por meio de um programa alternativo.
180   -A dobra permite que você alterne as formas de visualizar o
181   -mapa, ao abrir um mapa baseado no Google Maps ou no OpenLayers,
182   -alternando entre os dois.<br><br>
183   -<div class="imagemExemplo" >
184   -<img src="imagens/Interface/dobra.jpg" style="width: 320px; height: 200px;" alt="dobra de página"><br>
185   -Controle de dobra de
186   -página.
187   -</div>
188   -</div>
189   -<ul>
190   -</ul>
191   -</div>
192   -<div class="trail-box-bottom">
193   -<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>
194   -</div>
195   -<div class="trail-box">
196   -<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>
197   -<h1>Formas de
198   -visualização da Interface</h1>
199   -</div>
200   -<div class="trail-box-content">
201   -
202   -Os componentes de
203   -um mapa
204   -podem ser posicionados e apresentados de formas variadas. A
205   -visualização pode ser gerada com base em
206   -diferentes
207   -programas, como o
208   -OpenLayers, GoogleMaps ou GoogleEarth. Cada um desses programas
209   -possui características próprias, que
210   -alteram a
211   -forma como o usuário interage com o mapa.<br>
212   -Na interface OpenLayers,&nbsp; todas as
213   -funcionalidades do software podem ser utilizadas e o desenho das
214   -camadas do mapa é mais eficiente em
215   -relação
216   -às outras formas de visualização. O
217   -OpenLayers
218   -é a forma padrão de
219   -interação do
220   -i3GeoSaúde.<br>
221   -<br>
222   -<div class="imagemExemplo" >
223   -<img src="imagens/Interface/i3GEO%20%20%20OpenLayers.png" style="width: 584px; height: 408px;" alt="figura1">
224   -<br>
225   -Interface OpenLayers
226   -</div>
227   -<br>
228   -A interface Google Maps permite o uso da
229   -base
230   -cartográfica do Google, possibilitando
231   -visualização tanto de ruas quanto imagens de
232   -satélite.
233   -A
234   -barra de navegação é diferente do
235   -padrão
236   -OpenLayers, e o
237   -desenho das
238   -camadas do mapa pode ser mais lenta, em razão da
239   -necessária conexão à internet para
240   -acesso ao
241   -Google Maps. A inclusão de
242   -toponímia e símbolos pontuais podem ficar
243   -comprometidos
244   -nessa interface, uma vez que todas as camadas são desenhadas
245   -por
246   -partes, podendo ocorrer problemas nas bordas que compõem os
247   -quadros do mapa. Um conjunto de
248   -botões é mostrado no canto superior direito para
249   -permitir
250   -a escolha do tipo de mapa (ruas ou imagem de satélite).<br>
251   -<br>
252   -<div class="imagemExemplo" >
253   -<img src="imagens/Interface/i3GEOGoogleMaps.png" style="width: 584px; height: 414px;" alt="figura2">
254   -<br>
255   -Interface Google Maps.
256   -</div>
257   -<br>
258   -Tanto o OpenLayers quanto o Google Maps apresentam o
259   -mapa em
260   -um plano 2D. Já a interface GoogleEarth permite que o mapa
261   -seja
262   -visto na perspectiva 3D.<br>
263   -Observe que a barra de botões
264   -é
265   -colocada em uma janela flutuante, e não existe a
266   -possibilidade de
267   -uso das guias retráteis, sendo necessário
268   -mantê-las
269   -fixas. Essa interface utiliza uma barra de
270   -navegação mais
271   -complexa, uma vez que o globo pode ter pontos de vista diferentes para
272   -acomodar a visualização do relevo da
273   -superfície do
274   -globo.<br>
275   -<br>
276   -<div class="imagemExemplo" >
277   -<img src="imagens/Interface/I3GEOEarth.jpg" style="width: 601px; height: 454px;" alt="figura3"><br>
278   -Interface Google
279   -Earth.
280   -</div>
281   -<br>
282   -</div>
283   -<div class="trail-box-bottom">
284   -<br>
285   -</div>
286   -</div>
287   -<div class="trail-box">
288   -<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>
289   -<h1>Outros componentes presentes
290   -na
291   -Interface</h1>
292   -</div>
293   -<div class="trail-box-content">
294   -O menu padrão, contendo as principais funcionalidades do
295   -i3GeoSaúde,
296   -contém sete ítens.<br>
297   -<br>
298   -<div class="imagemExemplo" >
299   -<img src="imagens/Interface/barramenususpenso.jpg" style="width: 684px; height: 36px;" alt="menususpenso"><br>
300   -Menu suspenso.
301   -</div>
302   -<br>
303   -• <span style="font-weight: bold;">Admin/Login</span>: Utilizado
304   -para fazer
305   -autenticação do
306   -usuário e ter acesso às funcionalidades de
307   -administração,
308   -caso o usuário tenha direitos de administrador.<br>
309   -<br>
310   -• <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>
311   -<br>
312   -•<span style="font-weight: bold;"> Ferramentas</span>: Acesso
313   -rápido às
314   -ferramentas que
315   -atuam sobre as camadas que foram carregadas para
316   -visualização no i3GeoSaúde.
317   -As mesmas operações podem estar presentes em
318   -outros
319   -lugares da interface, como na árvore de camadas.<br>
320   -<br>
321   -• <span style="font-weight: bold;">Aplicativos</span>: Links que
322   -abrem o mapa com diferentes desenhos e aplicativos que funcionam em
323   -apoio ao i3GeoSaúde. Entre eles temos
324   -Serviços, Download, Tela remota, Gerador de links e
325   -parâmetros de inicialização e
326   -Hiperbólica.<br>
327   -<br>
328   -• <span style="font-weight: bold;">Arquivo</span>: Ppções que permitem salvar,
329   -recuperar e
330   -compartilhar o mapa atual.<br>
331   -<br>
332   -• <span style="font-weight: bold;">Análise</span>: Operações de
333   -análise
334   -geográfica, descritas em Grades, Distância entre
335   -pontos, "N"
336   -pontos em polígono, Ponto em polígono/raster,
337   -Distribuição de pontos, Centro médio,
338   -Dissolve,
339   -Geometrias, Entorno (buffer), Agrupa, Centróide,
340   -Gráfico
341   -e Linha do tempo.<br>
342   -<br>
343   -• <span style="font-weight: bold;">Ajuda</span>: Nesse
344   -ítem são mostrados vários
345   -links que
346   -permitem obter mais informações sobre o
347   -i3GeoSaúde.
348   -Destacam-se os que indicam a documentação do
349   -projeto, e a lista de funções. Essa
350   -lista oferece
351   -uma visão geral de todas as funções do
352   -i3GeoSaúde e
353   -links adicionais para obter ajuda sobre cada uma.<br>
354   -<br>
355   -Quanto à barra de botões,
356   -é importante destacar as funcionalidades, pois boa parte da
357   -interação e tarefas do usuário com o
358   -cartograma
359   -ocorre nessa ferramanta. Para mais obter mais
360   -informações
361   -sobre as principais tarefas do usuário,&nbsp;&nbsp;<span style="text-decoration: underline;"></span><a target="_blank" href="OperacaoSobreMapa.html">veja
362   -mais
363   -detalhes em "principais operações sobre os mapas"</a>
364   -<br>
365   -<br>
366   -<div class="imagemExemplo" >
367   -<img src="imagens/Interface/Barrademenu.png" style="width: 803px; height: 35px;" alt="barrademenu"><br>
368   -Barra de Botões
369   -</div>
370   -<br>
371   -Outro componente frequentemente utilizado pelo usuário,
372   -destacamos as guias ou abas laterais. Tais guias contém as
373   -opções que controlam as camadas, legenda e
374   -catálogo de acesso aos dados. A seguir apresentaremos
375   -algumas das opções desse recurso.<br>
376   -<br>
377   -• <span style="font-weight: bold;">Mapa</span>:
378   -Ao clicar no
379   -ícone <img src="imagens/Interface/figura1.jpg" style="width: 31px; height: 31px;" alt="figura1">&nbsp;
380   -surgirá três árvores principais:
381   -Opção
382   -de
383   -"busca rápida", Propriedades do mapa (<span style="font-weight: bold;">Propriedades</span>),
384   -Camadas de fundo
385   -(<span style="font-weight: bold;">Camadas
386   -de fundo</span>) e <span style="font-weight: bold;">Temas</span>,
387   -que
388   -permitem maior fluidez de visualização,
389   -interação e análise sobre o mapa.<br>
390   -<br>
391   -<div class="imagemExemplo" >
392   -<img src="imagens/Interface/GuiaMapa.png" style="width: 246px; height: 220px;" alt="guiamapa"><br>
393   -Guia do Mapa.
394   -</div>
395   -<br>
396   -• <span style="font-weight: bold;">Catálogo</span>:
397   -mostra
398   -por meio do ícone&nbsp;<img src="imagens/Interface/figura2.jpg" style="width: 32px; height: 29px;" alt="figura2">
399   -opções
400   -que permitem
401   -adicionar novas camadas ao mapa atual. Essa guia contém uma
402   -opção de busca, para localizar dados existentes
403   -no
404   -catálogo; um bloco de ícones com
405   -opções
406   -como upload, acesso à WMS, etc.; um ítem com a
407   -lista de
408   -serviços WMS cadastrados e um item para cada menu
409   -disponível (Inclusão de uma camada no mapa,
410   -Inclusão de uma camada baseada em serviços WMS e
411   -Localizando dados no catálogo).<br>
412   -<br>
413   -<div class="imagemExemplo" >
414   -<img src="imagens/Interface/guiacatalogo.png" style="width: 272px; height: 276px;" alt="guia catalogo"><br>
415   -Guia de
416   -Catálogo.
417   -</div>
418   -<br>
419   -• <span style="font-weight: bold;">Legenda</span>:
420   -Ao clicar no
421   -ícone <img src="imagens/Interface/figura3.jpg" style="width: 34px; height: 32px;" alt="figura3"> é
422   -apresentado
423   -os&nbsp;temas.<br>
424   -<br>
425   -<div class="imagemExemplo" >
426   -<img src="imagens/Interface/guialegenda.png" style="width: 256px; height: 119px;" alt="guialegenda"><br>
427   -Exemplo de temas do
428   -Guia de legenda.
429   -</div>
430   -</div>
431   -</div>
432   -<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>
433   -<br>
434   -<br>
435   -</div>
436   -</div>
437   -</div>
438   -</body></html>
  2 +<html>
  3 +<head>
  4 +<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  5 +<meta charset="UTF-8">
  6 +<title>i3GeoSaude</title>
  7 +<link media="screen" href="./files/estilos.css" type="text/css" rel="stylesheet">
  8 +<link rel="stylesheet" type="text/css" href="./files/estilos.css">
  9 +</head>
  10 +<body class="blue-bg">
  11 + <h1>Funcionalidades presentes na Interface</h1>
  12 + <p>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. Visão geral dos mapas interativos
  13 + <p>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&nbsp;que normalmente são utilizadas pelo i3GeoSaúde. Em quaisquer uma delas podem estar presentes os seguintes elementos.
  14 + <div class="imagemExemplo">
  15 + <img src="imagens/Interface/componentesbasicos.jpg">
  16 + <p>Interface com suas funcionalidades.
  17 + </div>
  18 + <p>
  19 + • <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 abaixo detalhes
  20 + sobre o corpo do mapa e as coordenadas geográficas para o ponto clicado sobre o mapa.
  21 + <div class="imagemExemplo">
  22 + <img src="imagens/Interface/corpomapa_recursos.jpg">
  23 + <p>Corpo do mapa e a barra com as coordenadas do ponto geográfico.
  24 + </div>
  25 + <p>
  26 + • <span style="font-weight: bold;">Menu suspenso</span>: barra contendo opções principais da ferramenta i3GeoSaúde, que&nbsp;contém outros submenus que são expandidos para mostrar ítens secundários. Como visto na figura abaixo, as opções permitem abrir diversas funcionalidades e outros aplicativos. Essa barra fica normalmente localizada na parte superior da interface.&nbsp;
  27 + <div class="imagemExemplo">
  28 + <img src="imagens/Interface/barramenususpenso.jpg" style="width: 684px; height: 36px;" alt="barra de menu suspensa">
  29 + <p>Menu suspenso.
  30 + </div>
  31 + <p>
  32 + • <span style="font-weight: bold;">Barra de botões</span>: barra de ícones que permitem acionar determinadas funcionalidades de uso mais frequente.&nbsp; 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 figura, 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
  33 + opções adicionais ao padrão.
  34 + <div class="imagemExemplo">
  35 + <img src="imagens/Interface/barrabotoes.jpg">
  36 + <p>Barra de botões (versão padrão e estendida).
  37 + </div>
  38 + <p>
  39 + • <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.
  40 + <p>
  41 + • <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.
  42 + <p>
  43 + • <span style="font-weight: bold;">Guias ou abas laterais</span>: as guias são áreas retráteis, podendo estar&nbsp;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 figura seguinte mostra a guia de camadas localizada na lateral direita da interface,
  44 + ocm destaque para o controle que exibe e oculta a guia.
  45 + <div class="imagemExemplo">
  46 + <img src="imagens/Interface/guialateral.jpg">
  47 + <p>Guia lateral para operações sobre as camadas (temas).
  48 + </div>
  49 + <p>
  50 + • <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 figura apresenta a barra de complementos normalmente encontrada no i3GeoSaúde.
  51 + <div class="imagemExemplo">
  52 + <img src="imagens/Interface/barracomplementos.jpg">
  53 + <p>Barra inferior com funções complementares.
  54 + </div>
  55 + <p>
  56 + • <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.
  57 + <p>
  58 + • <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.
  59 + <div class="imagemExemplo">
  60 + <img src="imagens/Interface/dobra.jpg">
  61 + <p>Controle de dobra de página.
  62 + </div>
  63 + <h2>Formas de visualização da Interface</h2>
  64 + <p>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. Na interface OpenLayers,&nbsp; 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.
  65 + O OpenLayers é a forma padrão de interação do i3GeoSaúde.
  66 + <div class="imagemExemplo">
  67 + <img src="imagens/Interface/i3GEO%20%20%20OpenLayers.png">
  68 + <p>Interface OpenLayers
  69 + </div>
  70 + <p>A interface Google Maps permite o uso da base cartográfica do Google, possibilitando visualização tanto de ruas quanto imagens de satélite. 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
  71 + 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).
  72 + <div class="imagemExemplo">
  73 + <img src="imagens/Interface/i3GEOGoogleMaps.png">
  74 + <p>Interface Google Maps.
  75 + </div>
  76 + <p>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. 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.
  77 + <div class="imagemExemplo">
  78 + <img src="imagens/Interface/I3GEOEarth.jpg">
  79 + <p>Interface Google Earth.
  80 + </div>
  81 + <h2>Outros componentes presentes na Interface</h2>
  82 + <p>O menu padrão, contendo as principais funcionalidades do i3GeoSaúde, contém sete ítens.
  83 + <div class="imagemExemplo">
  84 + <img src="imagens/Interface/barramenususpenso.jpg">
  85 + <p>Menu suspenso.
  86 + </div>
  87 + <p>
  88 + • <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. •
  89 + <p>
  90 + <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.
  91 + <p>
  92 + • <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.
  93 + <p>
  94 + • <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.
  95 + <p>
  96 + • <span style="font-weight: bold;">Arquivo</span>: Ppções que permitem salvar, recuperar e compartilhar o mapa atual.
  97 + <p>
  98 + • <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.
  99 + <p>
  100 + • <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. Quanto à barra de botões, é importante destacar as funcionalidades, pois boa parte da interação e tarefas do usuário com o cartograma ocorre nessa ferramanta.
  101 + Para mais obter mais informações sobre as principais tarefas do usuário,&nbsp;&nbsp;
  102 + <p>
  103 + <span style="text-decoration: underline;"></span><a target="_blank" href="OperacaoSobreMapa.html">veja mais detalhes em "principais operações sobre os mapas"</a>
  104 + <div class="imagemExemplo">
  105 + <img src="imagens/Interface/Barrademenu.png">
  106 + <p>Barra de Botões
  107 + </div>
  108 + <p>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.
  109 + <p>
  110 + • <span style="font-weight: bold;">Mapa</span>: Ao clicar no ícone <img src="imagens/Interface/figura1.jpg" style="width: 31px; height: 31px;" alt="figura1">&nbsp; 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
  111 + sobre o mapa.
  112 + <div class="imagemExemplo">
  113 + <img src="imagens/Interface/GuiaMapa.png">
  114 + <p>Guia do Mapa.
  115 + </div>
  116 + <p>
  117 + • <span style="font-weight: bold;">Catálogo</span>: mostra por meio do ícone&nbsp;<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
  118 + mapa, Inclusão de uma camada baseada em serviços WMS e Localizando dados no catálogo).
  119 + <div class="imagemExemplo">
  120 + <img src="imagens/Interface/guiacatalogo.png">
  121 + <p>Guia de Catálogo.
  122 + </div>
  123 + <p>
  124 + • <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&nbsp;temas.
  125 + <div class="imagemExemplo">
  126 + <img src="imagens/Interface/guialegenda.png">
  127 + <p>Exemplo de temas do Guia de legenda.
  128 +</body>
  129 +</html>
... ...