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 <!DOCTYPE html> 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 <!DOCTYPE html> 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>